@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;
  }
}


/* =========================================================
   FOOTER INSIDE TOP SPACE FIX
   Requested: add more space from the top inside footer.
   This final override only changes footer spacing; old HTML,
   JavaScript, IDs, routes, links and dynamic category logic stay unchanged.
========================================================= */
.site-footer.alalaas-reference-footer,
.alalaas-reference-footer {
  margin-top: clamp(48px, 5vw, 80px) !important;
}

.alalaas-reference-footer .footer-main {
  padding-top: clamp(28px, 3.5vw, 56px) !important;
}

.alalaas-reference-footer .footer-top-grid {
  margin-top: 0 !important;
  padding-top: clamp(92px, 8vw, 132px) !important;
  padding-bottom: 52px !important;
}

@media (max-width: 900px) {
  .alalaas-reference-footer .footer-main {
    padding-top: 34px !important;
  }

  .alalaas-reference-footer .footer-top-grid {
    margin-top: 0 !important;
    padding-top: 78px !important;
    padding-bottom: 44px !important;
  }
}

@media (max-width: 560px) {
  .alalaas-reference-footer .footer-main {
    padding-top: 28px !important;
  }

  .alalaas-reference-footer .footer-top-grid {
    margin-top: 0 !important;
    padding-top: 62px !important;
    padding-bottom: 38px !important;
  }
}

/* =========================================================
   FOOTER SPACE REDUCE UPDATE
   Requested: decrease some of the footer top space.
   Only CSS spacing overrides are added. No HTML, JavaScript,
   IDs, routes, API calls, or dynamic category logic changed.
========================================================= */
.site-footer.alalaas-reference-footer,
.alalaas-reference-footer {
  margin-top: clamp(34px, 4vw, 60px) !important;
}

.alalaas-reference-footer .footer-top-grid {
  padding-top: clamp(48px, 5vw, 72px) !important;
  padding-bottom: 44px !important;
}

@media (max-width: 820px) {
  .site-footer.alalaas-reference-footer,
  .alalaas-reference-footer {
    margin-top: 34px !important;
  }

  .alalaas-reference-footer .footer-top-grid {
    padding-top: 46px !important;
    padding-bottom: 38px !important;
  }
}

@media (max-width: 560px) {
  .site-footer.alalaas-reference-footer,
  .alalaas-reference-footer {
    margin-top: 28px !important;
  }

  .alalaas-reference-footer .footer-top-grid {
    padding-top: 38px !important;
    padding-bottom: 32px !important;
  }
}

/* =========================================================
   FINAL UPDATE: remove the small decorative lines in footer.
   CSS-only change. Footer HTML, links, scripts and old logic are unchanged.
========================================================= */
.alalaas-reference-footer .footer-section-title::after,
.site-footer.alalaas-reference-footer .footer-section-title::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.alalaas-reference-footer .footer-section-title,
.site-footer.alalaas-reference-footer .footer-section-title {
  margin-bottom: 22px !important;
}

/* =========================================================
   FINAL UPDATE: make footer typography more formal and less bold.
   CSS-only change. Footer HTML, links, scripts, IDs and old logic unchanged.
========================================================= */
.site-footer.alalaas-reference-footer,
.alalaas-reference-footer {
  font-family: "Inter", "Manrope", Arial, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.alalaas-reference-footer .footer-section-title,
.site-footer.alalaas-reference-footer .footer-section-title {
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: 0.095em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
}

.alalaas-reference-footer .footer-title,
.site-footer.alalaas-reference-footer .footer-title {
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.alalaas-reference-footer .footer-links a,
.alalaas-reference-footer .best-grid a,
.alalaas-reference-footer .footer-tools-grid a,
.alalaas-reference-footer .footer-legal a,
.site-footer.alalaas-reference-footer .footer-links a,
.site-footer.alalaas-reference-footer .best-grid a,
.site-footer.alalaas-reference-footer .footer-tools-grid a,
.site-footer.alalaas-reference-footer .footer-legal a {
  font-size: 13.5px !important;
  line-height: 1.62 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.alalaas-reference-footer .footer-contact-line strong,
.site-footer.alalaas-reference-footer .footer-contact-line strong {
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.alalaas-reference-footer .footer-contact-line small,
.site-footer.alalaas-reference-footer .footer-contact-line small {
  font-size: 13px !important;
  line-height: 1.58 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.alalaas-reference-footer .store-btn,
.site-footer.alalaas-reference-footer .store-btn {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.alalaas-reference-footer .footer-mini-label,
.alalaas-reference-footer .footer-center-title,
.site-footer.alalaas-reference-footer .footer-mini-label,
.site-footer.alalaas-reference-footer .footer-center-title {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.105em !important;
}

.alalaas-reference-footer .edition-pill,
.alalaas-reference-footer .edition-option,
.site-footer.alalaas-reference-footer .edition-pill,
.site-footer.alalaas-reference-footer .edition-option {
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.alalaas-reference-footer .footer-app-mini,
.site-footer.alalaas-reference-footer .footer-app-mini {
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.alalaas-reference-footer .footer-app-mini small,
.site-footer.alalaas-reference-footer .footer-app-mini small {
  font-size: 10.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.alalaas-reference-footer .footer-copy,
.site-footer.alalaas-reference-footer .footer-copy {
  font-size: 12px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.alalaas-reference-footer .footer-copy span,
.site-footer.alalaas-reference-footer .footer-copy span {
  font-weight: 600 !important;
}

@media (max-width: 560px) {
  .alalaas-reference-footer .footer-title,
  .site-footer.alalaas-reference-footer .footer-title {
    font-size: 13.5px !important;
  }

  .alalaas-reference-footer .footer-links a,
  .alalaas-reference-footer .best-grid a,
  .alalaas-reference-footer .footer-tools-grid a,
  .site-footer.alalaas-reference-footer .footer-links a,
  .site-footer.alalaas-reference-footer .best-grid a,
  .site-footer.alalaas-reference-footer .footer-tools-grid a {
    font-size: 13px !important;
  }
}


/* =========================================================
   FINAL UPDATE: increase footer font sizes by 2px.
   CSS-only change. Footer HTML, links, scripts, IDs and old logic unchanged.
========================================================= */
.alalaas-reference-footer .footer-section-title,
.site-footer.alalaas-reference-footer .footer-section-title {
  font-size: 14px !important;
}

.alalaas-reference-footer .footer-title,
.site-footer.alalaas-reference-footer .footer-title {
  font-size: 16px !important;
}

.alalaas-reference-footer .footer-links a,
.alalaas-reference-footer .best-grid a,
.alalaas-reference-footer .footer-tools-grid a,
.alalaas-reference-footer .footer-legal a,
.site-footer.alalaas-reference-footer .footer-links a,
.site-footer.alalaas-reference-footer .best-grid a,
.site-footer.alalaas-reference-footer .footer-tools-grid a,
.site-footer.alalaas-reference-footer .footer-legal a {
  font-size: 15.5px !important;
}

.alalaas-reference-footer .footer-contact-line strong,
.site-footer.alalaas-reference-footer .footer-contact-line strong {
  font-size: 15.5px !important;
}

.alalaas-reference-footer .footer-contact-line small,
.site-footer.alalaas-reference-footer .footer-contact-line small {
  font-size: 15px !important;
}

.alalaas-reference-footer .store-btn,
.site-footer.alalaas-reference-footer .store-btn {
  font-size: 14px !important;
}

.alalaas-reference-footer .footer-mini-label,
.alalaas-reference-footer .footer-center-title,
.site-footer.alalaas-reference-footer .footer-mini-label,
.site-footer.alalaas-reference-footer .footer-center-title {
  font-size: 13.5px !important;
}

.alalaas-reference-footer .edition-pill,
.alalaas-reference-footer .edition-option,
.site-footer.alalaas-reference-footer .edition-pill,
.site-footer.alalaas-reference-footer .edition-option {
  font-size: 15px !important;
}

.alalaas-reference-footer .footer-app-mini,
.site-footer.alalaas-reference-footer .footer-app-mini {
  font-size: 16px !important;
}

.alalaas-reference-footer .footer-app-mini small,
.site-footer.alalaas-reference-footer .footer-app-mini small {
  font-size: 12.5px !important;
}

.alalaas-reference-footer .footer-copy,
.site-footer.alalaas-reference-footer .footer-copy {
  font-size: 14px !important;
}

@media (max-width: 560px) {
  .alalaas-reference-footer .footer-title,
  .site-footer.alalaas-reference-footer .footer-title {
    font-size: 15.5px !important;
  }

  .alalaas-reference-footer .footer-links a,
  .alalaas-reference-footer .best-grid a,
  .alalaas-reference-footer .footer-tools-grid a,
  .site-footer.alalaas-reference-footer .footer-links a,
  .site-footer.alalaas-reference-footer .best-grid a,
  .site-footer.alalaas-reference-footer .footer-tools-grid a {
    font-size: 15px !important;
  }
}

/* =========================================================
   FINAL UPDATE: change footer font increase from 2px to 1px.
   CSS-only change. Footer HTML, links, scripts, IDs and old logic unchanged.
========================================================= */
.alalaas-reference-footer .footer-section-title,
.site-footer.alalaas-reference-footer .footer-section-title {
  font-size: 13px !important;
}

.alalaas-reference-footer .footer-title,
.site-footer.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,
.alalaas-reference-footer .footer-legal a,
.site-footer.alalaas-reference-footer .footer-links a,
.site-footer.alalaas-reference-footer .best-grid a,
.site-footer.alalaas-reference-footer .footer-tools-grid a,
.site-footer.alalaas-reference-footer .footer-legal a {
  font-size: 14.5px !important;
}

.alalaas-reference-footer .footer-contact-line strong,
.site-footer.alalaas-reference-footer .footer-contact-line strong {
  font-size: 14.5px !important;
}

.alalaas-reference-footer .footer-contact-line small,
.site-footer.alalaas-reference-footer .footer-contact-line small {
  font-size: 14px !important;
}

.alalaas-reference-footer .store-btn,
.site-footer.alalaas-reference-footer .store-btn {
  font-size: 13px !important;
}

.alalaas-reference-footer .footer-mini-label,
.alalaas-reference-footer .footer-center-title,
.site-footer.alalaas-reference-footer .footer-mini-label,
.site-footer.alalaas-reference-footer .footer-center-title {
  font-size: 12.5px !important;
}

.alalaas-reference-footer .edition-pill,
.alalaas-reference-footer .edition-option,
.site-footer.alalaas-reference-footer .edition-pill,
.site-footer.alalaas-reference-footer .edition-option {
  font-size: 14px !important;
}

.alalaas-reference-footer .footer-app-mini,
.site-footer.alalaas-reference-footer .footer-app-mini {
  font-size: 15px !important;
}

.alalaas-reference-footer .footer-app-mini small,
.site-footer.alalaas-reference-footer .footer-app-mini small {
  font-size: 11.5px !important;
}

.alalaas-reference-footer .footer-copy,
.site-footer.alalaas-reference-footer .footer-copy {
  font-size: 13px !important;
}

@media (max-width: 560px) {
  .alalaas-reference-footer .footer-title,
  .site-footer.alalaas-reference-footer .footer-title {
    font-size: 14.5px !important;
  }

  .alalaas-reference-footer .footer-links a,
  .alalaas-reference-footer .best-grid a,
  .alalaas-reference-footer .footer-tools-grid a,
  .site-footer.alalaas-reference-footer .footer-links a,
  .site-footer.alalaas-reference-footer .best-grid a,
  .site-footer.alalaas-reference-footer .footer-tools-grid a {
    font-size: 14px !important;
  }
}


/* =========================================================
   FINAL UPDATE: footer background black.
   CSS-only change. Footer HTML, links, scripts, IDs and old logic unchanged.
========================================================= */
.site-footer,
.site-footer.alalaas-reference-footer,
.alalaas-reference-footer,
.site-footer .footer-main,
.alalaas-reference-footer .footer-main,
.site-footer.alalaas-reference-footer .footer-main,
.alalaas-reference-footer .footer-bottom,
.site-footer.alalaas-reference-footer .footer-bottom,
.alalaas-reference-footer .footer-apps-strip,
.site-footer.alalaas-reference-footer .footer-apps-strip {
  background: #000000 !important;
}

.site-footer.alalaas-reference-footer,
.alalaas-reference-footer {
  --alalaas-footer-bg: #000000 !important;
  --alalaas-footer-panel: #000000 !important;
  background-color: #000000 !important;
}

.alalaas-reference-footer .footer-main {
  background-image: none !important;
  background-color: #000000 !important;
}


/* =========================================================
   FOOTER TOP SECTION MODIFICATION - FORMAL PREMIUM LAYOUT
   Changes only the footer visual design. Existing HTML links,
   IDs, category loading, dropdown script and old logic are kept.
========================================================= */
.site-footer.alalaas-reference-footer,
.alalaas-reference-footer {
  --footer-soft-white: rgba(255,255,255,.88) !important;
  --footer-soft-text: rgba(255,255,255,.68) !important;
  --footer-border: rgba(255,255,255,.12) !important;
  --footer-card: rgba(255,255,255,.035) !important;
  --footer-card-hover: rgba(255,255,255,.065) !important;
  --footer-red: #ad060e !important;
  --footer-yellow: #fdcf00 !important;
}

.alalaas-reference-footer .footer-main {
  background-image: none !important;
  background-color: #000000 !important;
}

/* Main part shown in the screenshot */
.alalaas-reference-footer .footer-top-grid {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, .78fr) minmax(340px, .95fr) !important;
  gap: clamp(24px, 3.2vw, 54px) !important;
  align-items: start !important;
  margin: 44px 0 34px !important;
  padding: clamp(30px, 3.8vw, 48px) !important;
  border: 1px solid var(--footer-border) !important;
  border-radius: 30px !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
}

.alalaas-reference-footer .footer-top-grid::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: none !important;
}

.alalaas-reference-footer .footer-main-links,
.alalaas-reference-footer .footer-best-for,
.alalaas-reference-footer .footer-side-card {
  min-width: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.alalaas-reference-footer .footer-main-links,
.alalaas-reference-footer .footer-best-for {
  padding-right: clamp(10px, 2.2vw, 34px) !important;
  border-right: 1px solid rgba(255,255,255,.09) !important;
}

/* Make Company, Category and My Account appear cleaner in one row */
.alalaas-reference-footer .footer-link-matrix {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2.4vw, 36px) !important;
}

.alalaas-reference-footer .footer-section-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin-bottom: 30px !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
}

.alalaas-reference-footer .footer-section-title::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--footer-red) !important;
  box-shadow: 0 0 0 5px rgba(173,6,14,.18) !important;
}

.alalaas-reference-footer .footer-section-title::after {
  bottom: -12px !important;
  width: 74px !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--footer-red), rgba(253,207,0,.75), transparent) !important;
}

.alalaas-reference-footer .footer-title {
  margin-bottom: 16px !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  color: #ffffff !important;
}

.alalaas-reference-footer .footer-links {
  gap: 7px !important;
}

.alalaas-reference-footer .footer-links a,
.alalaas-reference-footer .best-grid a {
  min-height: 34px !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 6px 10px 6px 0 !important;
  border-radius: 12px !important;
  color: var(--footer-soft-text) !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 450 !important;
  letter-spacing: -.01em !important;
}

.alalaas-reference-footer .footer-links a:hover,
.alalaas-reference-footer .best-grid a:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,.055) !important;
  transform: translateX(5px) !important;
}

.alalaas-reference-footer .footer-links a::before {
  width: 6px !important;
  min-width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(253,207,0,.75) !important;
  opacity: .55 !important;
  transition: opacity .22s ease, background .22s ease !important;
}

.alalaas-reference-footer .footer-links a:hover::before {
  width: 6px !important;
  opacity: 1 !important;
  background: var(--footer-red) !important;
}

/* Best suited links become clean mini rows */
.alalaas-reference-footer .best-grid {
  display: grid !important;
  gap: 9px !important;
}

.alalaas-reference-footer .best-grid a {
  display: flex !important;
  align-items: center !important;
  padding: 9px 12px !important;
  width: 100% !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  background: rgba(255,255,255,.025) !important;
}

.alalaas-reference-footer .best-grid a::before {
  content: "" !important;
  width: 3px !important;
  height: 18px !important;
  border-radius: 999px !important;
  margin-right: 10px !important;
  background: linear-gradient(180deg, var(--footer-red), var(--footer-yellow)) !important;
}

/* Right contact/platform card */
.alalaas-reference-footer .footer-side-card {
  display: grid !important;
  gap: 26px !important;
}

.alalaas-reference-footer .footer-platforms,
.alalaas-reference-footer .footer-contact-block {
  padding: 0 !important;
}

.alalaas-reference-footer .footer-store-row {
  gap: 10px !important;
  margin-bottom: 4px !important;
}

.alalaas-reference-footer .store-btn {
  height: 40px !important;
  min-width: 142px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  border-color: rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.045) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

.alalaas-reference-footer .store-btn i {
  font-size: 19px !important;
}

.alalaas-reference-footer .store-btn:hover {
  background: var(--footer-red) !important;
  border-color: var(--footer-red) !important;
}

.alalaas-reference-footer .footer-contact-list {
  gap: 12px !important;
}

.alalaas-reference-footer .footer-contact-line {
  grid-template-columns: 46px 1fr !important;
  gap: 14px !important;
  padding: 14px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  background: var(--footer-card) !important;
  transition: background .22s ease, border-color .22s ease, transform .22s ease !important;
}

.alalaas-reference-footer .footer-contact-line:hover {
  background: var(--footer-card-hover) !important;
  border-color: rgba(173,6,14,.45) !important;
  transform: translateY(-2px) !important;
}

.alalaas-reference-footer .footer-contact-line > span {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(253,207,0,.22) !important;
  color: var(--footer-yellow) !important;
  background: rgba(253,207,0,.055) !important;
}

.alalaas-reference-footer .footer-contact-line:hover > span {
  color: #ffffff !important;
  border-color: var(--footer-red) !important;
  background: var(--footer-red) !important;
}

.alalaas-reference-footer .footer-contact-line strong {
  margin-bottom: 5px !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

.alalaas-reference-footer .footer-contact-line small {
  color: var(--footer-soft-text) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}

@media (max-width: 1180px) {
  .alalaas-reference-footer .footer-top-grid {
    grid-template-columns: 1fr !important;
  }

  .alalaas-reference-footer .footer-main-links,
  .alalaas-reference-footer .footer-best-for {
    padding-right: 0 !important;
    padding-bottom: 28px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.09) !important;
  }

  .alalaas-reference-footer .footer-side-card {
    grid-template-columns: 1fr 1.2fr !important;
  }
}

@media (max-width: 760px) {
  .alalaas-reference-footer .footer-top-grid {
    margin-top: 24px !important;
    padding: 26px 18px !important;
    border-radius: 22px !important;
  }

  .alalaas-reference-footer .footer-link-matrix,
  .alalaas-reference-footer .footer-side-card {
    grid-template-columns: 1fr !important;
  }

  .alalaas-reference-footer .store-btn {
    flex: 1 1 150px !important;
  }
}


/* FINAL FIX: remove the new decorative footer background only */
.alalaas-reference-footer .footer-main {
  background-image: none !important;
  background-color: #000000 !important;
}

.alalaas-reference-footer .footer-top-grid {
  background: transparent !important;
  box-shadow: none !important;
}

.alalaas-reference-footer .footer-top-grid::before {
  background: none !important;
}

/* FINAL FIX: remove footer top border, rounded radius, and colored accent styling */
.alalaas-reference-footer .footer-top-grid {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.alalaas-reference-footer .footer-section-title::before,
.alalaas-reference-footer .footer-section-title::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

.alalaas-reference-footer .footer-links a::before,
.alalaas-reference-footer .best-grid a::before {
  display: none !important;
  content: none !important;
}

.alalaas-reference-footer .footer-links a,
.alalaas-reference-footer .best-grid a {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding-left: 0 !important;
}

.alalaas-reference-footer .footer-links a:hover,
.alalaas-reference-footer .best-grid a:hover {
  background: transparent !important;
  color: #ffffff !important;
}

.alalaas-reference-footer .store-btn,
.alalaas-reference-footer .footer-contact-line,
.alalaas-reference-footer .footer-contact-line > span {
  border-radius: 0 !important;
}

.alalaas-reference-footer .footer-contact-line {
  background: transparent !important;
  border-color: rgba(255,255,255,.14) !important;
}

.alalaas-reference-footer .footer-contact-line > span {
  color: #ffffff !important;
  background: transparent !important;
  border-color: rgba(255,255,255,.24) !important;
}

.alalaas-reference-footer .footer-contact-line:hover,
.alalaas-reference-footer .footer-contact-line:hover > span,
.alalaas-reference-footer .store-btn:hover {
  background: transparent !important;
  border-color: rgba(255,255,255,.34) !important;
  color: #ffffff !important;
}

/* =========================================================
   FINAL UPDATE: match platform and contact block to shared image only.
   Scoped to footer right side card. Other footer parts unchanged.
========================================================= */
.alalaas-reference-footer .footer-side-card .footer-section-title,
.site-footer.alalaas-reference-footer .footer-side-card .footer-section-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

.alalaas-reference-footer .footer-side-card .footer-section-title::before,
.site-footer.alalaas-reference-footer .footer-side-card .footer-section-title::before {
  display: inline-block !important;
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  border-radius: 50% !important;
  background: #c31f26 !important;
  box-shadow: 0 0 0 6px rgba(195, 31, 38, .16) !important;
}

.alalaas-reference-footer .footer-side-card .footer-section-title::after,
.site-footer.alalaas-reference-footer .footer-side-card .footer-section-title::after {
  display: none !important;
  content: none !important;
}

.alalaas-reference-footer .footer-side-card {
  gap: 30px !important;
}

.alalaas-reference-footer .footer-store-row,
.site-footer.alalaas-reference-footer .footer-store-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 0 !important;
}

.alalaas-reference-footer .footer-side-card .store-btn,
.site-footer.alalaas-reference-footer .footer-side-card .store-btn {
  height: 41px !important;
  min-width: 142px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.035) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  transform: none !important;
}

.alalaas-reference-footer .footer-side-card .store-btn i,
.site-footer.alalaas-reference-footer .footer-side-card .store-btn i {
  font-size: 20px !important;
  color: #ffffff !important;
}

.alalaas-reference-footer .footer-side-card .store-btn:hover,
.site-footer.alalaas-reference-footer .footer-side-card .store-btn:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.30) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.alalaas-reference-footer .footer-contact-list,
.site-footer.alalaas-reference-footer .footer-contact-list {
  display: grid !important;
  gap: 13px !important;
}

.alalaas-reference-footer .footer-side-card .footer-contact-line,
.site-footer.alalaas-reference-footer .footer-side-card .footer-contact-line {
  display: grid !important;
  grid-template-columns: 46px 1fr !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 76px !important;
  padding: 16px 17px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.035) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  transform: none !important;
}

.alalaas-reference-footer .footer-side-card .footer-contact-line:hover,
.site-footer.alalaas-reference-footer .footer-side-card .footer-contact-line:hover {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(253,207,0,.22) !important;
  transform: translateY(-1px) !important;
}

.alalaas-reference-footer .footer-side-card .footer-contact-line > span,
.site-footer.alalaas-reference-footer .footer-side-card .footer-contact-line > span {
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(253,207,0,.30) !important;
  background: rgba(253,207,0,.055) !important;
  color: #fdcf00 !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
}

.alalaas-reference-footer .footer-side-card .footer-contact-line:hover > span,
.site-footer.alalaas-reference-footer .footer-side-card .footer-contact-line:hover > span {
  border-color: rgba(253,207,0,.45) !important;
  background: rgba(253,207,0,.075) !important;
  color: #fdcf00 !important;
  transform: none !important;
}

.alalaas-reference-footer .footer-side-card .footer-contact-line i,
.site-footer.alalaas-reference-footer .footer-side-card .footer-contact-line i {
  font-size: 19px !important;
  color: currentColor !important;
}

.alalaas-reference-footer .footer-side-card .footer-contact-line strong,
.site-footer.alalaas-reference-footer .footer-side-card .footer-contact-line strong {
  display: block !important;
  margin: 0 0 5px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

.alalaas-reference-footer .footer-side-card .footer-contact-line small,
.site-footer.alalaas-reference-footer .footer-side-card .footer-contact-line small {
  display: block !important;
  color: rgba(255,255,255,.76) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}


/* =========================================================
   Cake Service Styles
   Moved into common stylesheet from cake-service.css
========================================================= */

:root {
    --cake-primary: #c31f26;
    --cake-primary-dark: #8f141a;
    --cake-primary-deep: #5f0f13;
    --cake-gold: #f7b733;
    --cake-cream: #fff8f1;
    --cake-pink: #fff1f3;
    --cake-text: #283142;
    --cake-heading: #101828;
    --cake-muted: #667085;
    --cake-card: #ffffff;
    --cake-border: rgba(195, 31, 38, 0.12);
    --cake-shadow: 0 28px 80px rgba(16, 24, 40, 0.12);
    --cake-soft-shadow: 0 18px 48px rgba(16, 24, 40, 0.08);
    --cake-radius: 34px;
  }

  * { box-sizing: border-box; }

  .cake-page {
    overflow: hidden;
    color: var(--cake-text);
    background:
      radial-gradient(circle at 8% 8%, rgba(195, 31, 38, 0.08), transparent 28%),
      radial-gradient(circle at 92% 4%, rgba(247, 183, 51, 0.14), transparent 24%),
      linear-gradient(180deg, #fffefe 0%, #fff8f8 42%, #ffffff 100%);
    font-family: inherit;
  }

  .cake-container {
    width: 75%;
    margin: 0 auto;
  }

  .cake-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    color: var(--cake-primary);
    background: rgba(195, 31, 38, 0.08);
    border: 1px solid rgba(195, 31, 38, 0.14);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .cake-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cake-primary);
    box-shadow: 0 0 0 6px rgba(195, 31, 38, 0.12);
  }

  .cake-title {
    margin: 16px 0 0;
    color: var(--cake-heading);
    font-size: clamp(34px, 3.2vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.055em;
    font-weight: 850;
  }

  .cake-subtitle {
    margin: 20px 0 0;
    color: var(--cake-muted);
    font-size: 16.5px;
    line-height: 1.82;
    font-weight: 400;
  }

  .cake-highlight { color: var(--cake-primary); }

  .cake-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 25px;
    border-radius: 999px;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 900;
    transition: 0.25s ease;
    font-family: inherit;
  }

  .cake-btn:hover { transform: translateY(-3px); }

  .cake-btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary), var(--cake-primary-dark));
    box-shadow: 0 18px 36px rgba(195, 31, 38, 0.26);
  }

  .cake-btn-light {
    color: var(--cake-primary);
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.16);
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.06);
  }

  .cake-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  .cake-section-head {
    max-width: 850px;
    margin: 0 auto 46px;
    text-align: center;
  }

  .cake-section-head .cake-title {
    font-size: clamp(30px, 2.4vw, 58px);
    letter-spacing: -0.042em;
  }

  /* HERO */
  .cake-hero {
    position: relative;
    padding: 112px 0 86px;
  }

  .cake-hero::before {
    content: "";
    position: absolute;
    inset: 26px;
    border: 1px solid rgba(195, 31, 38, 0.08);
    border-radius: 46px;
    pointer-events: none;
  }

  .cake-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 58px;
    align-items: center;
  }

  .cake-hero-copy { max-width: 720px; }

  .cake-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
  }

  .cake-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
  }

  .cake-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border-radius: 999px;
    color: #344054;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 12px 26px rgba(16, 24, 40, 0.06);
    font-size: 13px;
    font-weight: 800;
  }

  .cake-trust-pill svg { color: var(--cake-primary); }

  .cake-hero-media { position: relative; }

  .cake-hero-card {
    position: relative;
    overflow: hidden;
    padding: 12px;
    border-radius: 42px;
    background: #ffffff;
    box-shadow: var(--cake-shadow);
  }

  .cake-hero-card img {
    width: 100%;
    height: 570px;
    display: block;
    object-fit: cover;
    border-radius: 32px;
  }

  .cake-hero-card::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 32px;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 28%, rgba(15, 23, 42, 0.56) 100%),
      linear-gradient(135deg, rgba(195, 31, 38, 0.18), transparent 55%);
    pointer-events: none;
  }

  .cake-hero-badge {
    position: absolute;
    left: -22px;
    bottom: 36px;
    z-index: 2;
    width: min(345px, calc(100% - 30px));
    padding: 23px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 54px rgba(16, 24, 40, 0.18);
  }

  .cake-hero-badge strong {
    display: block;
    color: var(--cake-primary);
    font-size: 30px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 9px;
  }

  .cake-hero-badge span {
    display: block;
    color: #475467;
    font-size: 14px;
    line-height: 1.62;
    font-weight: 600;
  }

  .cake-floating {
    position: absolute;
    right: -18px;
    top: 38px;
    z-index: 2;
    padding: 18px;
    width: 214px;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary), var(--cake-primary-deep));
    box-shadow: 0 22px 42px rgba(195, 31, 38, 0.26);
  }

  .cake-floating small {
    display: block;
    opacity: 0.84;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
  }

  .cake-floating strong {
    display: block;
    font-size: 23px;
    line-height: 1.06;
    font-weight: 950;
  }

  /* SERVICE CARDS - FORMAL CAKE SERVICE UPGRADE */
  .cake-services {
    position: relative;
    padding: 96px 0;
    background:
      radial-gradient(circle at 12% 12%, rgba(195, 31, 38, 0.06), transparent 24%),
      radial-gradient(circle at 88% 8%, rgba(247, 183, 51, 0.12), transparent 22%),
      linear-gradient(180deg, #ffffff 0%, #fffafa 100%);
  }

  .cake-services::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 72px;
    width: min(74%, 1100px);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.22), transparent);
  }

  .cake-services-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }

  .cake-service-card {
    position: relative;
    overflow: hidden;
    min-height: 505px;
    padding: 0;
    border-radius: 28px;
    isolation: isolate;
    color: #ffffff;
    border: 0;
    background: #4b1118;
    box-shadow: 0 24px 58px rgba(16, 24, 40, 0.16);
    transition: 0.28s ease;
  }

  .cake-service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 34px 76px rgba(195, 31, 38, 0.22);
  }

  .cake-service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.24), transparent 24%),
      radial-gradient(circle at 82% 16%, rgba(247, 183, 51, 0.22), transparent 20%),
      linear-gradient(180deg, rgba(70, 8, 20, 0.04) 0%, rgba(70, 8, 20, 0.20) 42%, rgba(35, 5, 18, 0.92) 100%);
    pointer-events: none;
  }

  .cake-service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(9, 2, 8, 0.20) 54%, rgba(9, 2, 8, 0.78) 100%);
    pointer-events: none;
  }

  .cake-service-card:nth-child(1) { background: linear-gradient(135deg, #8f141a, #3a0814); }
  .cake-service-card:nth-child(2) { background: linear-gradient(135deg, #b0182a, #400914); }
  .cake-service-card:nth-child(3) { background: linear-gradient(135deg, #c23a52, #3d091b); }
  .cake-service-card:nth-child(4) { background: linear-gradient(135deg, #f3a17f, #5a111b); }

  .cake-service-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: 0.45s ease;
    z-index: 0;
  }

  .cake-service-card:hover .cake-service-bg { transform: scale(1.08); }

  .cake-service-number {
    position: absolute;
    left: 22px;
    top: 22px;
    z-index: 4;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--cake-primary);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.52);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.15);
    font-size: 13px;
    font-weight: 950;
  }

  .cake-service-title-float {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 78px;
    z-index: 4;
    color: #ffffff;
    font-size: clamp(27px, 2.1vw, 39px);
    line-height: 0.94;
    letter-spacing: -0.045em;
    font-weight: 950;
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  }

  .cake-service-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 26px 24px 24px;
  }

  .cake-service-content h3 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 21px;
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -0.025em;
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.30);
  }

  .cake-service-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.90);
    font-size: 14.5px;
    line-height: 1.58;
    font-weight: 500;
    text-shadow: 0 7px 18px rgba(0, 0, 0, 0.28);
  }

  .cake-service-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    min-height: 44px;
    margin-top: 18px;
    padding: 0 19px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #ef262d, var(--cake-primary));
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 15px 34px rgba(195, 31, 38, 0.34);
    transition: 0.25s ease;
  }

  .cake-service-link:hover {
    transform: translateY(-2px);
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(195, 31, 38, 0.42);
  }

  .cake-service-link svg {
    width: 17px;
    height: 17px;
  }

  /* PROCESS - FORMAL EXECUTIVE REDESIGN */
  .cake-process {
    position: relative;
    overflow: hidden;
    padding: 108px 0;
    background:
      radial-gradient(circle at 9% 12%, rgba(195, 31, 38, 0.08), transparent 27%),
      radial-gradient(circle at 92% 20%, rgba(247, 183, 51, 0.14), transparent 24%),
      linear-gradient(180deg, #fffefe 0%, #fff8f8 100%);
  }

  .cake-process::before {
    content: "";
    position: absolute;
    inset: 38px 34px;
    border-radius: 48px;
    border: 1px solid rgba(195, 31, 38, 0.08);
    pointer-events: none;
  }

  .cake-process::after {
    content: "";
    position: absolute;
    right: -160px;
    top: 48px;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: rgba(247, 183, 51, 0.10);
    pointer-events: none;
  }

  .cake-process-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    gap: 34px;
    align-items: stretch;
  }

  .cake-process-intro {
    position: relative;
    overflow: hidden;
    min-height: 610px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 46px;
    border-radius: 38px;
    color: #ffffff;
    background:
      radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.16), transparent 30%),
      radial-gradient(circle at 92% 12%, rgba(247, 183, 51, 0.28), transparent 28%),
      linear-gradient(135deg, var(--cake-primary-deep), var(--cake-primary) 58%, #8f141a);
    box-shadow: 0 30px 82px rgba(95, 15, 19, 0.22);
  }

  .cake-process-intro::before {
    content: "";
    position: absolute;
    right: -88px;
    bottom: -88px;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    border: 38px solid rgba(255, 255, 255, 0.08);
  }

  .cake-process-intro::after {
    content: "04";
    position: absolute;
    right: 34px;
    top: 30px;
    color: rgba(255, 255, 255, 0.09);
    font-size: clamp(92px, 10vw, 168px);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.08em;
  }

  .cake-process-intro-content,
  .cake-process-summary {
    position: relative;
    z-index: 1;
  }

  .cake-process-intro .cake-kicker {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
  }

  .cake-process-intro .cake-kicker::before {
    background: #ffffff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12);
  }

  .cake-process-intro .cake-title {
    max-width: 650px;
    margin-top: 20px;
    color: #ffffff;
    font-size: clamp(30px, 2.4vw, 58px);
    letter-spacing: -0.056em;
  }

  .cake-process-intro .cake-subtitle {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.82);
  }

  .cake-process-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 36px;
  }

  .cake-process-summary-item {
    min-height: 112px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
  }

  .cake-process-summary-item strong {
    display: block;
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 10px;
  }

  .cake-process-summary-item span {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 650;
  }

  .cake-process-panel {
    position: relative;
    padding: 18px;
    border-radius: 38px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 26px 76px rgba(16, 24, 40, 0.10);
    backdrop-filter: blur(12px);
  }

  .cake-process-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
    padding: 20px 22px;
    border-radius: 28px;
    background:
      radial-gradient(circle at 88% 0%, rgba(247, 183, 51, 0.14), transparent 34%),
      #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.10);
  }

  .cake-process-panel-head h3 {
    margin: 0;
    color: var(--cake-heading);
    font-size: 21px;
    line-height: 1.2;
    font-weight: 950;
    letter-spacing: -0.03em;
  }

  .cake-process-panel-head span {
    color: #667085;
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 550;
  }

  .cake-process-badge {
    flex: 0 0 auto;
    min-width: 96px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary), var(--cake-primary-dark));
    box-shadow: 0 14px 28px rgba(195, 31, 38, 0.22);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .cake-process-grid {
    counter-reset: cakeStep;
    display: grid;
    gap: 14px;
  }

  .cake-process-card {
    position: relative;
    overflow: hidden;
    counter-increment: cakeStep;
    display: grid;
    grid-template-columns: 86px 1fr auto;
    gap: 20px;
    align-items: center;
    min-height: 124px;
    padding: 22px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 16px 42px rgba(16, 24, 40, 0.065);
    transition: 0.26s ease;
  }

  .cake-process-card:hover {
    transform: translateX(8px);
    border-color: rgba(195, 31, 38, 0.25);
    box-shadow: 0 24px 56px rgba(195, 31, 38, 0.13);
  }

  .cake-process-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 7px;
    background: linear-gradient(180deg, var(--cake-primary), var(--cake-gold));
  }

  .cake-process-card::after {
    content: "0" counter(cakeStep);
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    color: rgba(195, 31, 38, 0.16);
    background: rgba(195, 31, 38, 0.05);
    font-size: 29px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.05em;
  }

  .cake-process-icon {
    position: relative;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    margin: 0;
    border-radius: 24px;
    color: var(--cake-primary);
    background:
      radial-gradient(circle at 28% 20%, rgba(247, 183, 51, 0.28), transparent 34%),
      var(--cake-pink);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.56);
  }

  .cake-process-icon svg {
    width: 30px;
    height: 30px;
  }

  .cake-step-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 8px;
    padding: 7px 11px;
    border-radius: 999px;
    color: var(--cake-primary);
    background: rgba(195, 31, 38, 0.07);
    border: 1px solid rgba(195, 31, 38, 0.12);
    font-size: 10.5px;
    font-weight: 950;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .cake-step-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--cake-primary);
  }

  .cake-process-card h3 {
    margin: 0 0 8px;
    color: var(--cake-heading);
    font-size: 20px;
    line-height: 1.22;
    font-weight: 950;
    letter-spacing: -0.025em;
  }

  .cake-process-card p {
    max-width: 520px;
    margin: 0;
    color: #536073;
    font-size: 14.5px;
    line-height: 1.66;
    font-weight: 450;
  }

  @media (max-width: 1100px) {
    .cake-process-layout { grid-template-columns: 1fr; }
    .cake-process-intro { min-height: auto; }
  }

  @media (max-width: 700px) {
    .cake-process { padding: 64px 0; }
    .cake-process::before { display: none; }
    .cake-process-intro { padding: 32px 22px; border-radius: 28px; }
    .cake-process-summary { grid-template-columns: 1fr; }
    .cake-process-panel { padding: 12px; border-radius: 28px; }
    .cake-process-panel-head { display: block; padding: 18px; border-radius: 22px; }
    .cake-process-badge { margin-top: 14px; }
    .cake-process-card { grid-template-columns: 1fr; min-height: auto; padding: 22px 20px; border-radius: 22px; }
    .cake-process-card:hover { transform: translateY(-4px); }
    .cake-process-card::after { position: absolute; right: 16px; top: 16px; width: 54px; height: 54px; font-size: 24px; }
    .cake-process-icon { width: 62px; height: 62px; border-radius: 21px; }
    .cake-process-icon svg { width: 27px; height: 27px; }
  }


  /* FEATURE SPLIT - FORMAL REDESIGN */
  .cake-feature {
    position: relative;
    overflow: hidden;
    padding: 106px 0;
    background:
      radial-gradient(circle at 8% 14%, rgba(195, 31, 38, 0.08), transparent 28%),
      radial-gradient(circle at 88% 78%, rgba(247, 183, 51, 0.12), transparent 24%),
      linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
  }

  .cake-feature::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.18), transparent);
  }

  .cake-feature-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 34px;
    align-items: stretch;
    padding: 18px;
    border-radius: 44px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 34px 90px rgba(16, 24, 40, 0.10);
    backdrop-filter: blur(12px);
  }

  .cake-feature-copy {
    position: relative;
    overflow: hidden;
    padding: 48px;
    border-radius: 32px;
    color: #ffffff;
    background:
      radial-gradient(circle at 15% 12%, rgba(255, 255, 255, 0.14), transparent 27%),
      radial-gradient(circle at 92% 10%, rgba(247, 183, 51, 0.20), transparent 25%),
      linear-gradient(135deg, var(--cake-primary-deep) 0%, var(--cake-primary-dark) 48%, #3d080d 100%);
  }

  .cake-feature-copy::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 42px solid rgba(255, 255, 255, 0.06);
  }

  .cake-feature-copy .cake-section-head {
    position: relative;
    z-index: 1;
    text-align: left;
    margin: 0 0 30px;
    max-width: 100%;
  }

  .cake-feature-copy .cake-kicker {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
  }

  .cake-feature-copy .cake-kicker::before {
    background: #ffffff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12);
  }

  .cake-feature-copy .cake-title {
    color: #ffffff;
    font-size: clamp(30px, 2.4vw, 58px);
    line-height: 1.03;
    letter-spacing: -0.052em;
  }

  .cake-feature-copy .cake-subtitle {
    color: rgba(255, 255, 255, 0.80);
    max-width: 620px;
  }

  .cake-feature-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
    margin-top: 30px;
  }

  .cake-mini-card {
    position: relative;
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 16px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: none;
    transition: 0.25s ease;
  }

  .cake-mini-card:hover {
    transform: translateX(7px);
    background: rgba(255, 255, 255, 0.15);
  }

  .cake-mini-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 20px;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(247, 183, 51, 0.32), rgba(255, 255, 255, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .cake-mini-icon svg { width: 24px; height: 24px; }

  .cake-mini-card h3 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 16.5px;
    line-height: 1.24;
    font-weight: 950;
  }

  .cake-mini-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 13.8px;
    line-height: 1.62;
  }

  .cake-feature-copy .cake-hero-actions {
    position: relative;
    z-index: 1;
    margin-top: 32px;
  }

  .cake-feature-copy .cake-btn-primary {
    color: var(--cake-primary);
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
  }

  .cake-feature-copy .cake-btn-light {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.20);
    box-shadow: none;
  }

  .cake-feature-media {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 18px;
    min-width: 0;
  }

  .cake-feature-image {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 610px;
    border-radius: 32px;
    border: 0;
    box-shadow: none;
    background:
      linear-gradient(135deg, rgba(195, 31, 38, 0.08), rgba(247, 183, 51, 0.14)),
      #fff7e5;
  }

  .cake-feature-image::before {
    content: "";
    position: absolute;
    inset: 22px;
    z-index: 2;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    pointer-events: none;
  }

  .cake-feature-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 0%, rgba(15, 23, 42, 0.20) 100%),
      radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.40), transparent 25%);
    pointer-events: none;
  }

  .cake-feature-image img {
    width: 100%;
    height: 100%;
    min-height: 610px;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
  }

  .cake-feature-badge {
    position: absolute;
    left: 34px;
    right: 34px;
    bottom: 34px;
    z-index: 4;
    width: auto;
    padding: 0;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    box-shadow: 0 26px 60px rgba(16, 24, 40, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.70);
  }

  .cake-feature-badge-inner {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 18px;
    align-items: center;
    padding: 22px;
  }

  .cake-feature-badge-mark {
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    border-radius: 26px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary), var(--cake-primary-deep));
    box-shadow: 0 18px 32px rgba(195, 31, 38, 0.26);
  }

  .cake-feature-badge-mark svg { width: 38px; height: 38px; }

  .cake-feature-badge strong {
    display: block;
    color: var(--cake-primary);
    font-size: 25px;
    line-height: 1.08;
    font-weight: 950;
    margin-bottom: 7px;
    letter-spacing: -0.03em;
  }

  .cake-feature-badge span {
    display: block;
    color: #536073;
    font-size: 13.5px;
    line-height: 1.58;
    font-weight: 650;
  }

  .cake-feature-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .cake-feature-stat {
    min-height: 122px;
    padding: 20px;
    border-radius: 26px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 18px 42px rgba(16, 24, 40, 0.07);
  }

  .cake-feature-stat strong {
    display: block;
    color: var(--cake-heading);
    font-size: 30px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.04em;
    margin-bottom: 9px;
  }

  .cake-feature-stat span {
    display: block;
    color: var(--cake-muted);
    font-size: 13.5px;
    line-height: 1.46;
    font-weight: 650;
  }

  /* WHY - FORMAL REDESIGN */
  .cake-why {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    background:
      radial-gradient(circle at 12% 8%, rgba(195, 31, 38, 0.10), transparent 28%),
      radial-gradient(circle at 92% 18%, rgba(247, 183, 51, 0.16), transparent 26%),
      linear-gradient(180deg, #fffefe 0%, #fff8f8 100%);
  }

  .cake-why::before {
    content: "";
    position: absolute;
    left: -120px;
    top: 70px;
    width: 310px;
    height: 310px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.06);
    filter: blur(2px);
  }

  .cake-why::after {
    content: "";
    position: absolute;
    right: -150px;
    bottom: -130px;
    width: 410px;
    height: 410px;
    border-radius: 50%;
    background: rgba(247, 183, 51, 0.13);
    filter: blur(2px);
  }

  .cake-why-shell {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 46px;
    background:
      linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,250,250,.94));
    border: 1px solid rgba(195, 31, 38, 0.14);
    box-shadow: 0 34px 92px rgba(16, 24, 40, 0.10);
  }

  .cake-why-hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 38px;
    align-items: stretch;
    padding: 34px;
  }

  .cake-why-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 520px;
    padding: 48px 36px 48px 42px;
    border-radius: 34px;
    background:
      radial-gradient(circle at 5% 0%, rgba(247, 183, 51, 0.14), transparent 34%),
      linear-gradient(135deg, #ffffff 0%, #fff7f7 100%);
    border: 1px solid rgba(195, 31, 38, 0.12);
  }

  .cake-why-copy .cake-section-head {
    max-width: 690px;
    text-align: left;
    margin: 0;
  }

  .cake-why-copy .cake-title {
    font-size: clamp(30px, 2.4vw, 58px);
    letter-spacing: -0.052em;
  }

  .cake-why-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 34px;
  }

  .cake-why-proof-item {
    min-height: 112px;
    padding: 18px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.06);
  }

  .cake-why-proof-item strong {
    display: block;
    color: var(--cake-primary);
    font-size: 28px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 9px;
  }

  .cake-why-proof-item span {
    display: block;
    color: #5c6678;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 650;
  }

  .cake-why-image {
    position: relative;
    min-height: 520px;
    border-radius: 34px;
    overflow: hidden;
    background: var(--cake-primary-deep);
    box-shadow: 0 26px 68px rgba(16, 24, 40, 0.16);
  }

  .cake-why-image img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    display: block;
    object-fit: cover;
    transform: scale(1.02);
  }

  .cake-why-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 18%, rgba(15, 23, 42, 0.72) 100%),
      linear-gradient(135deg, rgba(195, 31, 38, 0.32), transparent 58%);
    pointer-events: none;
  }

  .cake-why-floating {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    z-index: 2;
    padding: 28px;
    border-radius: 28px;
    color: #ffffff;
    background: rgba(95, 15, 19, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.20);
  }

  .cake-why-floating strong {
    display: block;
    color: #ffffff;
    font-size: 34px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -0.035em;
    margin-bottom: 10px;
  }

  .cake-why-floating span {
    display: block;
    color: rgba(255, 255, 255, 0.86);
    font-size: 14px;
    line-height: 1.66;
    font-weight: 600;
  }

  .cake-why-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 0 34px 34px;
  }

  .cake-why-card {
    position: relative;
    overflow: hidden;
    min-height: 248px;
    padding: 26px;
    border-radius: 30px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.13);
    box-shadow: 0 20px 48px rgba(16, 24, 40, 0.07);
    transition: 0.28s ease;
  }

  .cake-why-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--cake-primary), var(--cake-gold));
  }

  .cake-why-card::after {
    content: "";
    position: absolute;
    right: -34px;
    top: -34px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.055);
  }

  .cake-why-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 62px rgba(195, 31, 38, 0.13);
  }

  .cake-why-icon {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 20px;
    color: var(--cake-primary);
    background:
      radial-gradient(circle at 28% 18%, rgba(247, 183, 51, 0.28), transparent 44%),
      var(--cake-pink);
    border: 1px solid rgba(195, 31, 38, 0.10);
  }

  .cake-why-icon svg { width: 27px; height: 27px; }

  .cake-why-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 10px;
    color: var(--cake-heading);
    font-size: 18px;
    line-height: 1.22;
    font-weight: 950;
    letter-spacing: -0.018em;
  }

  .cake-why-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #536073;
    font-size: 14px;
    line-height: 1.68;
  }

  /* TESTIMONIAL */
  .cake-testimonial {
    padding: 96px 0;
    background: linear-gradient(180deg, #fffafa 0%, #ffffff 100%);
  }

  .cake-testimonial-shell {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 24px;
    padding: 22px;
    border-radius: 46px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--cake-border);
    box-shadow: var(--cake-shadow);
  }

  .cake-testimonial-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px;
    border-radius: 34px;
    color: #ffffff;
    background:
      radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.14), transparent 28%),
      linear-gradient(135deg, var(--cake-primary-deep), var(--cake-primary) 58%, #8f1018);
  }

  .cake-testimonial-content .cake-kicker {
    width: fit-content;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
  }

  .cake-testimonial-content .cake-kicker::before { background: #ffffff; box-shadow: none; }

  .cake-testimonial-content h2 {
    margin: 18px 0 0;
    color: #ffffff;
    font-size: clamp(28px, 2.2vw, 66px);
    line-height: 1.08;
    letter-spacing: -0.045em;
    font-weight: 760;
  }

  .cake-testimonial-content p {
    margin: 20px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 15.5px;
    line-height: 1.78;
  }

  .cake-review {
    position: relative;
    margin-top: 30px;
    padding: 28px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .cake-review blockquote {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    line-height: 1.58;
    font-weight: 700;
  }

  .cake-review-author {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .cake-avatar {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: var(--cake-primary);
    background: #ffffff;
    font-size: 15px;
    font-weight: 950;
  }

  .cake-person { display: flex; align-items: center; gap: 13px; }
  .cake-person strong { display: block; color: #ffffff; font-size: 15px; font-weight: 900; }
  .cake-person span { display: block; margin-top: 4px; color: rgba(255,255,255,.72); font-size: 13px; font-weight: 650; }
  .cake-stars { color: #ffd166; letter-spacing: .06em; white-space: nowrap; }

  /* TESTIMONIAL SLIDER UPDATE */
  .cake-review-slider {
    position: relative;
  }

  .cake-review-slide {
    transition: opacity .35s ease;
  }

  .cake-review-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .cake-review-controls .cake-review-author {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    flex: 1 1 auto;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .cake-review-nav {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
  }

  .cake-review-arrow {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    cursor: pointer;
    transition: .25s ease;
  }

  .cake-review-arrow:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.16);
  }

  .cake-review-arrow svg {
    width: 18px;
    height: 18px;
  }

  @media (max-width: 700px) {
    .cake-review-controls {
      flex-direction: column;
      align-items: flex-start;
    }

    .cake-review-controls .cake-review-author {
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
    }

    .cake-review-nav {
      width: 100%;
      justify-content: flex-start;
    }
  }

  .cake-testimonial-visual {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 18px;
  }

  .cake-testimonial-img {
    position: relative;
    overflow: hidden;
    min-height: 430px;
    border-radius: 34px;
    box-shadow: 0 24px 58px rgba(16, 24, 40, 0.12);
  }

  .cake-testimonial-img img {
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
    display: block;
  }

  .cake-testimonial-label {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    box-shadow: 0 22px 44px rgba(16, 24, 40, 0.15);
  }

  .cake-testimonial-label strong {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary), var(--cake-primary-deep));
    font-size: 25px;
    line-height: 1;
    font-weight: 950;
  }

  .cake-testimonial-label span {
    color: #475467;
    font-size: 13.5px;
    line-height: 1.58;
    font-weight: 650;
  }

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

  .cake-benefit {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 112px;
    padding: 16px 16px 16px;
    border-radius: 24px;
    background:
      radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82) 34%, rgba(255, 248, 248, 0.94) 100%),
      linear-gradient(180deg, #ffffff 0%, #fffafa 100%);
    border: 1px solid rgba(195, 31, 38, 0.16);
    color: var(--cake-heading);
    text-align: center;
    font-family: inherit;
    font-size: 13.8px;
    line-height: 1.24;
    font-weight: 950;
    box-shadow: 0 22px 54px rgba(16, 24, 40, 0.08);
    transition: 0.28s ease;
    isolation: isolate;
  }

  .cake-benefit::before {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, transparent, var(--cake-primary), rgba(247, 183, 51, 0.45), transparent);
    opacity: 0.78;
  }

  .cake-benefit::after {
    content: "✦";
    position: absolute;
    right: 32%;
    top: 14px;
    color: var(--cake-primary);
    font-size: 9px;
    line-height: 1;
    opacity: 0.88;
  }

  .cake-benefit:hover {
    transform: translateY(-6px);
    border-color: rgba(195, 31, 38, 0.28);
    box-shadow: 0 30px 66px rgba(195, 31, 38, 0.13);
  }

  .cake-benefit-icon {
    position: relative;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--cake-primary);
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow:
      0 10px 22px rgba(16, 24, 40, 0.07),
      inset 0 0 0 6px rgba(195, 31, 38, 0.035);
  }

  .cake-benefit-icon::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid rgba(195, 31, 38, 0.13);
    border-top-color: var(--cake-primary);
    transform: rotate(18deg);
  }

  .cake-benefit-icon svg {
    width: 19px;
    height: 19px;
    color: var(--cake-primary);
    position: relative;
    z-index: 1;
  }

  .cake-benefit-line {
    position: relative;
    width: 38px;
    height: 1px;
    margin: 2px auto 0;
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.9), transparent);
  }

  .cake-benefit-line::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    border: 1.5px solid var(--cake-primary);
    background: #ffffff;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .cake-benefit-text {
    display: block;
    color: #07111f;
    font-size: 13.5px;
    font-weight: 950;
    letter-spacing: -0.015em;
  }

  /* MODAL */
  .cake-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .cake-modal.is-open { display: flex; }

  .cake-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(8px);
  }

  .cake-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(900px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 32px;
    background: #ffffff;
    box-shadow: 0 34px 90px rgba(15, 23, 42, 0.28);
    animation: cakeModalIn 0.25s ease;
  }

  @keyframes cakeModalIn {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .cake-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 28px 30px 24px;
    border-bottom: 1px solid rgba(195, 31, 38, 0.12);
    background:
      radial-gradient(circle at 92% 0%, rgba(247, 183, 51, 0.16), transparent 25%),
      linear-gradient(135deg, #fff7f7 0%, #ffffff 66%);
  }

  .cake-modal-kicker {
    color: var(--cake-primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  .cake-modal-title {
    margin: 0;
    color: var(--cake-heading);
    font-size: clamp(25px, 2.1vw, 40px);
    line-height: 1.12;
    letter-spacing: -0.03em;
    font-weight: 900;
  }

  .cake-modal-close {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: #ffffff;
    color: var(--cake-heading);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .25s ease;
  }

  .cake-modal-close:hover { transform: rotate(90deg); color: var(--cake-primary); }
  .cake-modal-close svg { width: 22px; height: 22px; }

  .cake-modal-body {
    max-height: calc(100vh - 210px);
    overflow: auto;
    padding: 28px 30px 30px;
  }

  .cake-modal-intro {
    margin: 0 0 18px;
    padding: 20px 22px;
    border-radius: 22px;
    color: #344054;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 14px 34px rgba(16, 24, 40, 0.06);
    font-size: 15.5px;
    line-height: 1.75;
    font-weight: 500;
  }

  .cake-modal-points {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cake-modal-points li {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #3f4857;
    font-size: 15px;
    line-height: 1.68;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.04);
  }

  .cake-modal-point-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--cake-primary);
    background: var(--cake-pink);
  }

  .cake-modal-point-icon svg { width: 21px; height: 21px; }
  .cake-modal-points strong { color: var(--cake-heading); font-weight: 900; }

  .cake-modal-note {
    margin-top: 18px;
    padding: 19px 22px;
    border-radius: 20px;
    border-left: 4px solid var(--cake-primary);
    background: rgba(195, 31, 38, 0.06);
    color: #3f4857;
    font-size: 14.5px;
    line-height: 1.65;
    font-weight: 500;
  }

  .cake-modal-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 30px 26px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
  }

  .cake-modal-help {
    color: #667085;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
  }

  .cake-modal-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary), var(--cake-primary-dark));
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 16px 28px rgba(195, 31, 38, 0.22);
  }

  @media (max-width: 1100px) {
    .cake-hero-grid,
    .cake-feature-wrap,
    .cake-why-grid,
    .cake-testimonial-shell { grid-template-columns: 1fr; }
    .cake-services-grid,
    .cake-process-grid { grid-template-columns: repeat(2, 1fr); }
    .cake-feature-copy .cake-section-head,
    .cake-why-copy .cake-section-head { text-align: center; margin-left: auto; margin-right: auto; }
    .cake-feature-image { height: 520px; }
    .cake-why-image { min-height: 520px; }
    .cake-feature-badge { left: 24px; }
  }

  @media (max-width: 700px) {
    .cake-container { width: min(92%, 1440px); }
    .cake-hero { padding: 60px 0 56px; }
    .cake-hero::before { display: none; }
    .cake-services,
    .cake-process,
    .cake-feature,
    .cake-why,
    .cake-testimonial { padding: 58px 0; }
    .cake-title { font-size: clamp(34px, 10vw, 52px); }
    .cake-section-head { margin-bottom: 32px; }
    .cake-hero-card { border-radius: 28px; padding: 8px; }
    .cake-hero-card img { height: 390px; border-radius: 22px; }
    .cake-hero-card::after { inset: 8px; border-radius: 22px; }
    .cake-hero-badge,
    .cake-floating,
    .cake-feature-badge { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; margin: -46px 16px 0; }
    .cake-floating { margin-top: 14px; }
    .cake-services-grid,
    .cake-process-grid,
    .cake-feature-list,
    .cake-benefits { grid-template-columns: 1fr; }
    .cake-service-card { min-height: 470px; }
    .cake-service-title-float { top: 76px; font-size: 34px; }
    .cake-service-content { padding: 24px 22px 22px; }
    .cake-feature-image { height: 390px; border-radius: 28px; border-width: 8px; }
    .cake-why-image { min-height: 410px; border-radius: 28px; }
    .cake-why-floating { left: 16px; right: 16px; bottom: 16px; padding: 18px; border-radius: 22px; }
    .cake-why-card { grid-template-columns: 1fr; text-align: center; }
    .cake-why-icon { margin: 0 auto; }
    .cake-testimonial-shell { padding: 12px; border-radius: 30px; }
    .cake-testimonial-content { padding: 34px 22px; border-radius: 24px; }
    .cake-review blockquote { font-size: 17px; }
    .cake-review-author { flex-direction: column; align-items: flex-start; }
    .cake-testimonial-img,
    .cake-testimonial-img img { min-height: 360px; border-radius: 24px; }
    .cake-testimonial-label { left: 14px; right: 14px; bottom: 14px; grid-template-columns: 1fr; }
    .cake-modal { padding: 14px; }
    .cake-modal-dialog { border-radius: 24px; }
    .cake-modal-head,
    .cake-modal-body,
    .cake-modal-foot { padding-left: 20px; padding-right: 20px; }
    .cake-modal-points li { grid-template-columns: 1fr; }
  }

  @media (max-width: 1100px) {
    .cake-feature-wrap { grid-template-columns: 1fr; }
    .cake-feature-copy .cake-section-head { text-align: center; margin-left: auto; margin-right: auto; }
    .cake-feature-copy { padding: 42px 34px; }
    .cake-feature-image { min-height: 520px; height: 520px; }
    .cake-feature-image img { min-height: 520px; }
  }

  @media (max-width: 700px) {
    .cake-feature-wrap { padding: 10px; border-radius: 30px; gap: 12px; }
    .cake-feature-copy { padding: 32px 20px; border-radius: 24px; }
    .cake-mini-card { grid-template-columns: 1fr; text-align: center; }
    .cake-mini-icon { margin: 0 auto; }
    .cake-feature-copy .cake-hero-actions { justify-content: center; }
    .cake-feature-image { min-height: 390px; height: 390px; border-radius: 24px; }
    .cake-feature-image img { min-height: 390px; }
    .cake-feature-image::before { inset: 12px; border-radius: 18px; }
    .cake-feature-badge { position: relative; left: auto; right: auto; bottom: auto; margin: -60px 14px 0; }
    .cake-feature-badge-inner { grid-template-columns: 1fr; text-align: center; padding: 20px; }
    .cake-feature-badge-mark { margin: 0 auto; }
    .cake-feature-stats { grid-template-columns: 1fr; }
    .cake-feature-stat { min-height: auto; text-align: center; }
  }



  @media (max-width: 1100px) {
    .cake-why-hero { grid-template-columns: 1fr; }
    .cake-why-copy { min-height: auto; }
    .cake-why-list { grid-template-columns: repeat(2, 1fr); }
    .cake-why-copy .cake-section-head { text-align: center; margin-left: auto; margin-right: auto; }
  }

  @media (max-width: 700px) {
    .cake-why { padding: 58px 0; }
    .cake-why-shell { border-radius: 30px; }
    .cake-why-hero { padding: 14px; gap: 14px; }
    .cake-why-copy { padding: 30px 20px; border-radius: 24px; }
    .cake-why-proof { grid-template-columns: 1fr; }
    .cake-why-image { min-height: 390px; border-radius: 24px; }
    .cake-why-image img { min-height: 390px; }
    .cake-why-floating { left: 16px; right: 16px; bottom: 16px; padding: 20px; border-radius: 22px; }
    .cake-why-list { grid-template-columns: 1fr; padding: 0 14px 14px; }
    .cake-why-card { min-height: auto; text-align: center; }
    .cake-why-icon { margin-left: auto; margin-right: auto; }
  }


  /* EXTRA TEXT FILL - added to use existing open space without removing the layout */
  .cake-fill-copy {
    position: relative;
    z-index: 1;
    margin-top: 26px;
    padding: 22px 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
  }

  .cake-fill-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 14.5px;
    line-height: 1.74;
    font-weight: 550;
  }

  .cake-fill-copy p + p { margin-top: 12px; }

  .cake-fill-points {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    margin-top: 24px;
  }

  .cake-fill-point {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 15px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.82);
    font-size: 13.5px;
    line-height: 1.56;
    font-weight: 600;
  }

  .cake-fill-point strong {
    display: block;
    color: #ffffff;
    font-size: 14.5px;
    line-height: 1.25;
    font-weight: 950;
    margin-bottom: 4px;
  }

  .cake-fill-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .cake-fill-icon svg {
    width: 18px;
    height: 18px;
  }

  .cake-light-fill {
    margin-top: 26px;
    padding: 22px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.06);
  }

  .cake-light-fill h3 {
    margin: 0 0 10px;
    color: var(--cake-heading);
    font-size: 18px;
    line-height: 1.24;
    font-weight: 950;
    letter-spacing: -0.02em;
  }

  .cake-light-fill p {
    margin: 0;
    color: #5c6678;
    font-size: 14.2px;
    line-height: 1.72;
    font-weight: 500;
  }

  @media (max-width: 700px) {
    .cake-fill-copy,
    .cake-light-fill { margin-top: 20px; padding: 18px; border-radius: 20px; }
    .cake-fill-point { grid-template-columns: 1fr; }
    .cake-fill-icon { margin: 0 auto; }
  }


  /* ICON FIXES - correct cake service icons for all shared blocks */
  .cake-kicker::before {
    width: 18px;
    height: 18px;
    border-radius: 0;
    background: currentColor;
    box-shadow: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 9h16v11H4V9Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M3 6h18v3H3V6Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 6v14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 6c-1.9-3.2-5.8-2.2-5 .5.5 1.6 2.6 1.7 5-.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 6c1.9-3.2 5.8-2.2 5 .5-.5 1.6-2.6 1.7-5-.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 9h16v11H4V9Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M3 6h18v3H3V6Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 6v14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 6c-1.9-3.2-5.8-2.2-5 .5.5 1.6 2.6 1.7 5-.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 6c1.9-3.2 5.8-2.2 5 .5-.5 1.6-2.6 1.7-5-.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .cake-btn-icon,
  .cake-service-number svg,
  .cake-process-summary-item strong svg,
  .cake-feature-stat strong svg,
  .cake-why-proof-item strong svg {
    width: 24px;
    height: 24px;
    display: block;
    flex: 0 0 auto;
  }

  .cake-service-number {
    color: var(--cake-primary);
    font-size: 0;
  }

  .cake-service-number svg {
    width: 25px;
    height: 25px;
  }

  .cake-process-summary-item strong,
  .cake-feature-stat strong,
  .cake-why-proof-item strong {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    margin-bottom: 13px;
    font-size: 0;
    letter-spacing: 0;
  }

  .cake-process-summary-item strong {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.20);
  }

  .cake-feature-stat strong,
  .cake-why-proof-item strong {
    color: var(--cake-primary);
    background: radial-gradient(circle at 30% 20%, rgba(247, 183, 51, 0.22), transparent 42%), var(--cake-pink);
    border: 1px solid rgba(195, 31, 38, 0.12);
  }

  .cake-feature-stat,
  .cake-why-proof-item,
  .cake-process-summary-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .cake-btn .cake-btn-icon {
    width: 20px;
    height: 20px;
  }


  /* CAKE SERVICE ICON UPDATE - icon update for section labels */
  .cake-kicker::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 8h4l1.6-2.5h4.8L16 8h4v11H4V8Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z' stroke='black' stroke-width='2'/%3E%3Cpath d='M18 11h.01' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 8h4l1.6-2.5h4.8L16 8h4v11H4V8Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z' stroke='black' stroke-width='2'/%3E%3Cpath d='M18 11h.01' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }



  /* =========================================================
     FULL PAGE DESIGN REFRESH - CAKE SERVICE
     Applied to all sections except the last testimonial part.
     Keeps old EJS logic, modals, buttons, and content unchanged.
  ========================================================= */
  .cake-page {
    background:
      radial-gradient(circle at 6% 7%, rgba(195, 31, 38, 0.13), transparent 24%),
      radial-gradient(circle at 92% 10%, rgba(247, 183, 51, 0.12), transparent 26%),
      linear-gradient(180deg, #fffefe 0%, #fff6f6 34%, #ffffff 100%);
  }

  .cake-container {
    width: min(89%, 1480px);
  }

  .cake-title {
    font-weight: 850;
    letter-spacing: -0.045em;
  }

  .cake-subtitle {
    color: #5d6678;
    font-size: 16px;
    line-height: 1.78;
  }

  .cake-btn {
    min-height: 56px;
    padding: 0 28px;
    border-radius: 18px;
  }

  .cake-btn-primary {
    background: linear-gradient(135deg, #c31f26 0%, #8f141a 100%);
    box-shadow: 0 18px 42px rgba(195, 31, 38, 0.28);
  }

  .cake-btn-light {
    color: #8f141a;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(195, 31, 38, 0.18);
  }

  /* Hero: premium cake service landing style */
  .cake-hero {
    padding: 92px 0 76px;
    background:
      linear-gradient(135deg, rgba(16, 24, 40, 0.04), rgba(195, 31, 38, 0.035)),
      radial-gradient(circle at 78% 20%, rgba(247, 183, 51, 0.16), transparent 24%);
  }

  .cake-hero::before {
    inset: 22px 38px;
    border-radius: 34px;
    border-color: rgba(195, 31, 38, 0.12);
    background: rgba(255, 255, 255, 0.24);
  }

  .cake-hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 46px;
    padding: 24px;
    border-radius: 38px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(195, 31, 38, 0.13);
    box-shadow: 0 34px 92px rgba(16, 24, 40, 0.10);
    backdrop-filter: blur(14px);
  }

  .cake-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px 18px 34px 26px;
  }

  .cake-hero .cake-title {
    font-size: clamp(36px, 4.2vw, 82px);
    line-height: 1.03;
  }

  .cake-hero .cake-subtitle {
    max-width: 760px;
    font-size: 17px;
  }

  .cake-hero-card {
    padding: 0;
    border-radius: 34px;
    background: #111827;
    box-shadow: 0 30px 86px rgba(15, 23, 42, 0.20);
  }

  .cake-hero-card img {
    height: 560px;
    border-radius: 34px;
  }

  .cake-hero-card::after {
    inset: 0;
    border-radius: 34px;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 35%, rgba(15, 23, 42, 0.72) 100%),
      linear-gradient(135deg, rgba(195, 31, 38, 0.28), rgba(247, 183, 51, 0.08));
  }

  /* Services: formal card grid */
  .cake-services {
    padding: 96px 0 104px;
    background:
      radial-gradient(circle at 8% 12%, rgba(195, 31, 38, 0.08), transparent 24%),
      linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
  }

  .cake-services::before {
    top: 52px;
    width: min(89%, 1220px);
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.28), rgba(247, 183, 51, 0.24), transparent);
  }

  .cake-services-grid {
    gap: 20px;
  }

  .cake-service-card {
    min-height: 475px;
    border-radius: 26px;
    box-shadow: 0 24px 62px rgba(16, 24, 40, 0.13);
  }

  .cake-service-card::before {
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.08) 0%, rgba(15, 23, 42, 0.24) 45%, rgba(15, 23, 42, 0.90) 100%),
      linear-gradient(135deg, rgba(195, 31, 38, 0.20), transparent 62%);
  }

  .cake-service-card::after {
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(15, 23, 42, 0.38) 55%, rgba(15, 23, 42, 0.86) 100%);
  }

  .cake-service-number {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, #c31f26, #8f141a);
    border: 1px solid rgba(255, 255, 255, 0.28);
  }

  .cake-service-title-float {
    top: 90px;
    font-size: clamp(26px, 1.8vw, 34px);
    line-height: 1.03;
  }

  .cake-service-content {
    padding: 28px 24px 26px;
  }

  .cake-service-content h3 {
    font-size: 20px;
  }

  .cake-service-link {
    border-radius: 16px;
    background: #ffffff;
    color: #c31f26;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
  }

  .cake-service-link:hover {
    color: #c31f26;
    background: #fff3f3;
  }

  /* Process: clean executive workflow */
  .cake-process {
    padding: 104px 0;
    background:
      radial-gradient(circle at 88% 12%, rgba(247, 183, 51, 0.15), transparent 26%),
      linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
  }

  .cake-process::before {
    inset: 34px 42px;
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.46);
  }

  .cake-process-layout {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 24px;
  }

  .cake-process-intro {
    min-height: 590px;
    border-radius: 32px;
    padding: 42px;
    background:
      linear-gradient(135deg, rgba(18, 24, 38, 0.94), rgba(95, 15, 19, 0.96)),
      radial-gradient(circle at 10% 10%, rgba(247, 183, 51, 0.24), transparent 28%);
  }

  .cake-fill-copy,
  .cake-fill-point {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.16);
  }

  .cake-process-summary {
    gap: 12px;
  }

  .cake-process-summary-item {
    border-radius: 20px;
  }

  .cake-process-panel {
    border-radius: 32px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.92);
  }

  .cake-process-panel-head {
    border-radius: 24px;
  }

  .cake-process-card {
    grid-template-columns: 76px 1fr auto;
    min-height: 118px;
    border-radius: 24px;
  }

  .cake-process-icon {
    width: 62px;
    height: 62px;
    border-radius: 20px;
  }

  /* Feature: split production showcase */
  .cake-feature {
    padding: 104px 0;
    background:
      linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
  }

  .cake-feature-wrap {
    border-radius: 36px;
    padding: 16px;
    box-shadow: 0 34px 90px rgba(16, 24, 40, 0.11);
  }

  .cake-feature-copy {
    border-radius: 28px;
    padding: 46px;
    background:
      radial-gradient(circle at 16% 10%, rgba(247, 183, 51, 0.18), transparent 24%),
      linear-gradient(135deg, #5f0f13 0%, #8f141a 52%, #101828 100%);
  }

  .cake-mini-card {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.11);
  }

  .cake-feature-image,
  .cake-feature-image img {
    min-height: 590px;
  }

  .cake-feature-image {
    border-radius: 28px;
  }

  .cake-feature-badge {
    border-radius: 24px;
  }

  .cake-feature-stat {
    border-radius: 22px;
    min-height: 112px;
  }

  /* Why: modern trust block */
  .cake-why {
    padding: 104px 0;
    background:
      radial-gradient(circle at 12% 12%, rgba(195, 31, 38, 0.08), transparent 24%),
      linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
  }

  .cake-why-shell {
    border-radius: 36px;
    box-shadow: 0 32px 84px rgba(16, 24, 40, 0.10);
  }

  .cake-why-hero {
    gap: 24px;
    padding: 24px;
  }

  .cake-why-copy {
    border-radius: 28px;
    min-height: 500px;
    padding: 42px;
  }

  .cake-why-proof {
    gap: 12px;
  }

  .cake-why-proof-item {
    border-radius: 20px;
  }

  .cake-why-image {
    border-radius: 28px;
  }

  .cake-why-floating {
    border-radius: 24px;
    background: rgba(16, 24, 40, 0.76);
  }

  .cake-why-list {
    gap: 14px;
    padding: 0 24px 24px;
  }

  .cake-why-card {
    min-height: 230px;
    border-radius: 24px;
  }

  .cake-why-icon {
    border-radius: 18px;
  }

  /* Keep the last part unchanged */
  .cake-testimonial,
  .cake-testimonial * {
    /* no new design override for the final testimonial section */
  }

  @media (max-width: 1100px) {
    .cake-hero-grid,
    .cake-process-layout,
    .cake-feature-wrap,
    .cake-why-hero {
      grid-template-columns: 1fr;
    }

    .cake-services-grid,
    .cake-why-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 700px) {
    .cake-container { width: 92%; }
    .cake-hero-grid { padding: 14px; border-radius: 28px; }
    .cake-hero-copy { padding: 24px 10px; text-align: center; }
    .cake-hero-actions { justify-content: center; }
    .cake-hero-card img { height: 390px; }
    .cake-services-grid,
    .cake-why-list { grid-template-columns: 1fr; }
    .cake-service-card { min-height: 440px; }
    .cake-process-intro,
    .cake-feature-copy,
    .cake-why-copy { padding: 28px 20px; border-radius: 24px; }
    .cake-feature-image,
    .cake-feature-image img { min-height: 390px; }
  }



  /* HERO UPDATE - cake service design similar to shared reference, not exact copy */
  .cake-cake-hero-v2 {
    position: relative;
    padding: 92px 0 74px;
    overflow: hidden;
    background:
      linear-gradient(90deg, rgba(195,31,38,0.10) 0%, rgba(255,255,255,0.96) 43%, rgba(247,183,51,0.12) 100%),
      linear-gradient(rgba(195,31,38,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(195,31,38,0.035) 1px, transparent 1px);
    background-size: auto, 32px 32px, 32px 32px;
  }

  .cake-cake-hero-v2::before {
    display: none;
  }

  .cake-hero-word {
    position: absolute;
    left: 4%;
    top: 18px;
    z-index: 0;
    color: rgba(195,31,38,0.055);
    font-size: clamp(58px, 9vw, 168px);
    line-height: .85;
    font-weight: 950;
    letter-spacing: -.075em;
    white-space: nowrap;
    pointer-events: none;
    text-transform: uppercase;
  }

  .cake-hero-v2-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 42px;
    align-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .cake-hero-v2-copy {
    padding: 38px 0 34px;
    max-width: 760px;
  }

  .cake-cake-hero-v2 .cake-kicker {
    color: #b01821;
    background: rgba(255,255,255,.58);
    border-color: rgba(195,31,38,.20);
    box-shadow: 0 14px 34px rgba(195,31,38,.08);
  }

  .cake-cake-hero-v2 .cake-title {
    max-width: 790px;
    margin-top: 18px;
    color: #07152d;
    font-size: clamp(38px, 4vw, 74px);
    line-height: 1.03;
    letter-spacing: -.058em;
    font-weight: 950;
  }

  .cake-cake-hero-v2 .cake-highlight {
    color: #d42d35;
    font-weight: 450;
    text-decoration: underline;
    text-decoration-color: rgba(247,183,51,.72);
    text-underline-offset: 7px;
    text-decoration-thickness: 4px;
  }

  .cake-cake-hero-v2 .cake-subtitle {
    max-width: 720px;
    margin-top: 26px;
    color: #33445f;
    font-size: 17px;
    line-height: 1.85;
    font-weight: 470;
  }

  .cake-hero-v2-actions {
    margin-top: 34px;
    gap: 14px;
  }

  .cake-cake-hero-v2 .cake-btn {
    min-height: 58px;
    border-radius: 999px;
    padding: 0 27px;
    font-size: 14px;
    box-shadow: 0 18px 42px rgba(15,23,42,.10);
  }

  .cake-cake-hero-v2 .cake-btn-primary {
    background: linear-gradient(135deg, #c31f26, #92141b);
    box-shadow: 0 20px 42px rgba(195,31,38,.25);
  }

  .cake-cake-hero-v2 .cake-btn-light {
    background: rgba(255,255,255,.76);
    border: 1px solid rgba(195,31,38,.18);
    color: #b01821;
  }

  .cake-hero-v2-pills {
    margin-top: 30px;
    gap: 13px;
  }

  .cake-hero-v2-pills .cake-trust-pill {
    min-height: 48px;
    padding: 0 16px;
    background: rgba(255,255,255,.72);
    border-color: rgba(195,31,38,.14);
    color: #17243b;
    box-shadow: 0 16px 34px rgba(15,23,42,.07);
  }

  .cake-hero-v2-pills .cake-trust-pill svg {
    width: 18px;
    height: 18px;
  }

  .cake-hero-v2-media {
    min-height: 560px;
    position: relative;
  }

  .cake-hero-v2-card {
    position: absolute;
    right: 26px;
    top: 0;
    width: calc(100% - 38px);
    height: 548px;
    padding: 12px;
    overflow: hidden;
    border-radius: 38px;
    background: #ffffff;
    box-shadow: 0 34px 86px rgba(15,23,42,.17);
  }

  .cake-hero-v2-card img {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 29px;
    filter: saturate(1.04) contrast(1.02);
  }

  .cake-hero-v2-card::after {
    inset: 12px;
    border-radius: 29px;
    background:
      linear-gradient(180deg, rgba(12,21,38,0.06) 0%, rgba(12,21,38,0.14) 44%, rgba(12,21,38,0.64) 100%),
      linear-gradient(135deg, rgba(195,31,38,.18), transparent 56%);
  }

  .cake-hero-perfect {
    position: absolute;
    right: 0;
    top: 44px;
    z-index: 5;
    width: 205px;
    padding: 21px 20px;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, #b01821, #7d1016);
    box-shadow: 0 26px 50px rgba(125,16,22,.28);
  }

  .cake-hero-perfect small {
    display: block;
    margin-bottom: 10px;
    color: rgba(255,255,255,.86);
    font-size: 12px;
    font-weight: 700;
  }

  .cake-hero-perfect strong {
    display: block;
    color: #ffffff;
    font-size: 23px;
    line-height: 1.02;
    letter-spacing: -.03em;
    font-weight: 950;
  }

  .cake-hero-info-card {
    position: absolute;
    left: 0;
    bottom: 22px;
    z-index: 5;
    width: min(430px, 82%);
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 16px;
    align-items: center;
    padding: 22px;
    border-radius: 25px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(195,31,38,.12);
    box-shadow: 0 26px 68px rgba(15,23,42,.16);
    backdrop-filter: blur(14px);
  }

  .cake-hero-info-icon {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, #c31f26, #7d1016);
    box-shadow: 0 18px 34px rgba(195,31,38,.25);
  }

  .cake-hero-info-icon svg {
    width: 36px;
    height: 36px;
  }

  .cake-hero-info-card strong {
    display: block;
    margin-bottom: 8px;
    color: #c31f26;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -.035em;
    font-weight: 950;
  }

  .cake-hero-info-card span {
    display: block;
    color: #536073;
    font-size: 13.8px;
    line-height: 1.62;
    font-weight: 560;
  }

  @media (max-width: 1100px) {
    .cake-hero-v2-grid { grid-template-columns: 1fr; gap: 26px; }
    .cake-hero-v2-copy { max-width: 100%; text-align: center; padding-top: 20px; }
    .cake-hero-v2-actions, .cake-hero-v2-pills { justify-content: center; }
    .cake-hero-v2-media { min-height: 560px; }
    .cake-hero-v2-card { left: 36px; right: 36px; width: auto; }
    .cake-hero-perfect { right: 8px; }
    .cake-hero-info-card { left: 8px; }
  }

  @media (max-width: 700px) {
    .cake-cake-hero-v2 { padding: 58px 0 56px; background-size: auto, 24px 24px, 24px 24px; }
    .cake-hero-word { top: 28px; left: 3%; font-size: 58px; opacity: .75; }
    .cake-cake-hero-v2 .cake-title { font-size: clamp(34px, 10vw, 48px); }
    .cake-cake-hero-v2 .cake-subtitle { font-size: 15.5px; line-height: 1.75; }
    .cake-hero-v2-copy { padding: 8px 0 0; }
    .cake-hero-v2-media { min-height: 510px; }
    .cake-hero-v2-card { left: 0; right: 0; top: 0; width: 100%; height: 390px; padding: 8px; border-radius: 28px; }
    .cake-hero-v2-card img { border-radius: 21px; }
    .cake-hero-v2-card::after { inset: 8px; border-radius: 21px; }
    .cake-hero-perfect { top: 16px; right: 12px; width: 168px; padding: 16px; border-radius: 20px; }
    .cake-hero-perfect strong { font-size: 19px; }
    .cake-hero-info-card { left: 12px; right: 12px; bottom: 0; width: auto; grid-template-columns: 1fr; text-align: center; padding: 20px; }
    .cake-hero-info-icon { margin: 0 auto; width: 66px; height: 66px; border-radius: 22px; }
    .cake-hero-info-card strong { font-size: 24px; }
  }



  /* CAKE SERVICE DESIGN UPGRADE - keeps existing structure, changes the visual mood */
  :root {
    --cake-primary: #c31f26;
    --cake-primary-dark: #97171f;
    --cake-primary-deep: #5d1118;
    --cake-gold: #f7b733;
    --cake-cream: #fff7ea;
    --cake-pink: #fff0f2;
    --cake-border: rgba(195, 31, 38, 0.14);
  }

  .cake-page {
    background:
      radial-gradient(circle at 7% 6%, rgba(247, 183, 51, 0.20), transparent 26%),
      radial-gradient(circle at 94% 2%, rgba(195, 31, 38, 0.12), transparent 24%),
      linear-gradient(180deg, #fffaf5 0%, #fff5f6 45%, #ffffff 100%);
  }

  .cake-cake-hero-v2 {
    background:
      radial-gradient(circle at 12% 20%, rgba(247, 183, 51, .18), transparent 30%),
      linear-gradient(135deg, #fff9f0 0%, #fff2f3 55%, #ffffff 100%);
  }

  .cake-hero-word {
    color: rgba(195, 31, 38, 0.08) !important;
    letter-spacing: .08em;
  }

  .cake-hero-v2-card {
    background: linear-gradient(135deg, #ffffff, #fff1f3);
    box-shadow: 0 34px 90px rgba(195, 31, 38, 0.18);
  }

  .cake-hero-v2-card::after,
  .cake-service-card::after,
  .cake-why-image::after {
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 18%, rgba(61, 8, 15, 0.70) 100%),
      linear-gradient(135deg, rgba(247, 183, 51, 0.18), rgba(195, 31, 38, 0.18));
  }

  .cake-service-card {
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 28px 70px rgba(111, 25, 30, 0.18);
  }

  .cake-service-number,
  .cake-process-icon,
  .cake-why-icon,
  .cake-benefit-icon {
    background: radial-gradient(circle at 30% 18%, rgba(247, 183, 51, .30), transparent 42%), #fff7f8;
  }

  .cake-service-title-float {
    max-width: 88%;
    padding: 4px 0;
  }

  .cake-process-intro,
  .cake-feature-copy,
  .cake-testimonial-content {
    background:
      radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.16), transparent 30%),
      radial-gradient(circle at 92% 12%, rgba(247, 183, 51, 0.24), transparent 28%),
      linear-gradient(135deg, #5d1118, #c31f26 58%, #8f141a);
  }


  /* DIFFERENT SERVICES DESIGN - editorial mosaic layout */
  .cake-services-editorial {
    position: relative;
    padding: 98px 0 108px;
    background:
      radial-gradient(circle at 6% 10%, rgba(247, 183, 51, 0.18), transparent 22%),
      radial-gradient(circle at 94% 20%, rgba(195, 31, 38, 0.10), transparent 26%),
      linear-gradient(180deg, #ffffff 0%, #fff7f4 100%);
  }

  .cake-services-editorial::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 54px;
    width: min(78%, 1180px);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.22), rgba(247, 183, 51, 0.26), transparent);
  }

  .cake-services-head {
    max-width: none;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 36px;
    align-items: end;
    margin: 0 0 42px;
    text-align: left;
  }

  .cake-services-head .cake-title {
    max-width: 720px;
    font-size: clamp(32px, 2.8vw, 64px);
    line-height: 1.02;
  }

  .cake-services-head .cake-subtitle {
    max-width: 720px;
    margin: 0;
    padding: 22px 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 18px 48px rgba(16, 24, 40, 0.06);
  }

  .cake-services-mosaic {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    gap: 24px;
    align-items: stretch;
  }

  .cake-service-stack {
    display: grid;
    gap: 18px;
  }

  .cake-services-editorial .cake-service-card {
    position: relative;
    overflow: hidden;
    min-height: 0;
    padding: 0;
    color: var(--cake-heading);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(195, 31, 38, 0.13);
    border-radius: 34px;
    box-shadow: 0 28px 78px rgba(16, 24, 40, 0.10);
    transition: 0.28s ease;
  }

  .cake-services-editorial .cake-service-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 34px 86px rgba(195, 31, 38, 0.16);
  }

  .cake-services-editorial .cake-service-card::before,
  .cake-services-editorial .cake-service-card::after {
    display: none;
  }

  .cake-service-featured {
    display: grid;
    grid-template-rows: 390px auto;
  }

  .cake-service-compact {
    display: grid;
    grid-template-columns: 188px 1fr;
    min-height: 202px;
  }

  .cake-services-editorial .cake-service-media {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    background: #fff0f2;
  }

  .cake-services-editorial .cake-service-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 35%, rgba(95, 15, 19, 0.58) 100%),
      linear-gradient(135deg, rgba(247, 183, 51, 0.14), rgba(195, 31, 38, 0.10));
    pointer-events: none;
  }

  .cake-services-editorial .cake-service-bg {
    position: relative;
    inset: auto;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.01);
    transition: 0.45s ease;
  }

  .cake-services-editorial .cake-service-card:hover .cake-service-bg {
    transform: scale(1.07);
  }

  .cake-service-ribbon {
    position: absolute;
    left: 24px;
    top: 24px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(95, 15, 19, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.26);
    backdrop-filter: blur(12px);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .cake-service-ribbon::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cake-gold);
  }

  .cake-services-editorial .cake-service-body {
    position: relative;
    z-index: 2;
    padding: 30px;
  }

  .cake-service-featured .cake-service-body {
    padding: 34px;
  }

  .cake-service-topline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
  }

  .cake-services-editorial .cake-service-number {
    position: static;
    z-index: auto;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    color: var(--cake-primary);
    background:
      radial-gradient(circle at 30% 16%, rgba(247, 183, 51, 0.30), transparent 42%),
      #fff4f5;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.60), 0 12px 28px rgba(195, 31, 38, 0.10);
    font-size: 0;
  }

  .cake-services-editorial .cake-service-number svg {
    width: 24px;
    height: 24px;
  }

  .cake-service-label {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    color: var(--cake-primary);
    background: rgba(195, 31, 38, 0.07);
    border: 1px solid rgba(195, 31, 38, 0.10);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .cake-services-editorial .cake-service-body h3 {
    margin: 0 0 12px;
    color: var(--cake-heading);
    font-size: clamp(23px, 2vw, 38px);
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: 950;
    text-shadow: none;
  }

  .cake-service-compact .cake-service-body h3 {
    font-size: clamp(20px, 1.35vw, 28px);
  }

  .cake-services-editorial .cake-service-body p {
    margin: 0;
    color: #536073;
    font-size: 14.5px;
    line-height: 1.68;
    font-weight: 500;
    text-shadow: none;
  }

  .cake-service-featured .cake-service-body p {
    max-width: 640px;
    font-size: 15.5px;
  }

  .cake-service-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
  }

  .cake-service-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 13px;
    border-radius: 999px;
    color: #344054;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.05);
    font-size: 12.5px;
    font-weight: 850;
  }

  .cake-services-editorial .cake-service-link {
    margin-top: 22px;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary), var(--cake-primary-dark));
    box-shadow: 0 16px 34px rgba(195, 31, 38, 0.22);
  }

  .cake-services-editorial .cake-service-link:hover {
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary-dark), var(--cake-primary-deep));
  }

  @media (max-width: 1100px) {
    .cake-services-head,
    .cake-services-mosaic {
      grid-template-columns: 1fr;
    }

    .cake-services-head {
      text-align: center;
    }

    .cake-services-head .cake-title,
    .cake-services-head .cake-subtitle {
      margin-left: auto;
      margin-right: auto;
    }
  }

  @media (max-width: 700px) {
    .cake-services-editorial {
      padding: 62px 0;
    }

    .cake-services-head {
      gap: 18px;
      margin-bottom: 28px;
    }

    .cake-services-head .cake-subtitle {
      padding: 18px;
      text-align: center;
    }

    .cake-service-featured,
    .cake-service-compact {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
    }

    .cake-service-featured .cake-service-media,
    .cake-service-compact .cake-service-media {
      height: 255px;
    }

    .cake-services-editorial .cake-service-body,
    .cake-service-featured .cake-service-body {
      padding: 24px 20px;
      text-align: center;
    }

    .cake-service-topline,
    .cake-service-meta {
      justify-content: center;
    }
  }




  /* MORE FORMAL SERVICES DESIGN - clean executive package cards */
  .cake-services-formal {
    padding: 108px 0;
    background:
      linear-gradient(180deg, #ffffff 0%, #fffafa 100%) !important;
  }

  .cake-services-formal::before {
    display: none !important;
  }

  .cake-formal-services-shell {
    position: relative;
    overflow: hidden;
    padding: 34px;
    border-radius: 44px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.10);
    box-shadow: 0 34px 95px rgba(16, 24, 40, 0.10);
  }

  .cake-formal-services-shell::before {
    content: "";
    position: absolute;
    left: 34px;
    right: 34px;
    top: 0;
    height: 5px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, var(--cake-primary), var(--cake-gold), var(--cake-primary));
  }

  .cake-formal-services-head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 42px;
    align-items: end;
    margin-bottom: 34px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(195, 31, 38, 0.10);
  }

  .cake-formal-services-head .cake-title {
    max-width: 760px;
    font-size: clamp(32px, 2.7vw, 62px);
    line-height: 1.03;
    letter-spacing: -0.048em;
  }

  .cake-formal-services-head .cake-subtitle {
    margin: 0;
    max-width: 760px;
    color: #5f6b7c;
    font-size: 15.5px;
    line-height: 1.78;
  }

  .cake-formal-service-table {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
  }

  .cake-services-formal .cake-formal-service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 560px;
    color: var(--cake-heading);
    background: #ffffff;
    border: 1px solid rgba(16, 24, 40, 0.09);
    border-radius: 28px;
    box-shadow: 0 18px 45px rgba(16, 24, 40, 0.07);
    transition: .28s ease;
  }

  .cake-services-formal .cake-formal-service-card::before,
  .cake-services-formal .cake-formal-service-card::after {
    display: none !important;
  }

  .cake-services-formal .cake-formal-service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(195, 31, 38, 0.24);
    box-shadow: 0 28px 70px rgba(195, 31, 38, 0.13);
  }

  .cake-formal-featured {
    border-color: rgba(195, 31, 38, 0.24) !important;
  }

  .cake-formal-image {
    position: relative;
    height: 230px;
    overflow: hidden;
    background: #fff1f3;
  }

  .cake-formal-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(16,24,40,0.02) 0%, rgba(16,24,40,0.26) 100%);
    pointer-events: none;
  }

  .cake-services-formal .cake-service-bg {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.01);
    transition: .45s ease;
  }

  .cake-services-formal .cake-formal-service-card:hover .cake-service-bg {
    transform: scale(1.06);
  }

  .cake-formal-tag {
    position: absolute;
    left: 18px;
    top: 18px;
    z-index: 2;
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 13px;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(95, 15, 19, 0.82);
    border: 1px solid rgba(255,255,255,0.28);
    backdrop-filter: blur(10px);
    font-size: 10.5px;
    font-weight: 950;
    letter-spacing: .09em;
    text-transform: uppercase;
  }

  .cake-formal-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 26px 24px 24px;
  }

  .cake-formal-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
  }

  .cake-services-formal .cake-service-number {
    position: static !important;
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    border-radius: 16px;
    color: var(--cake-primary);
    background: #fff7f8;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: none;
    font-size: 0;
  }

  .cake-services-formal .cake-service-number svg {
    width: 24px;
    height: 24px;
  }

  .cake-formal-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    color: #7a2630;
    background: rgba(195, 31, 38, 0.06);
    border: 1px solid rgba(195, 31, 38, 0.10);
    font-size: 10.5px;
    font-weight: 950;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .cake-formal-content h3 {
    margin: 0 0 12px;
    color: var(--cake-heading);
    font-size: 25px;
    line-height: 1.12;
    letter-spacing: -0.03em;
    font-weight: 950;
    text-shadow: none;
  }

  .cake-formal-content p {
    margin: 0;
    color: #5b6678;
    font-size: 14.2px;
    line-height: 1.65;
    font-weight: 500;
    text-shadow: none;
  }

  .cake-formal-list {
    display: grid;
    gap: 10px;
    margin: 20px 0 0;
    padding: 20px 0 0;
    list-style: none;
    border-top: 1px solid rgba(16, 24, 40, 0.08);
  }

  .cake-formal-list li {
    position: relative;
    padding-left: 22px;
    color: #344054;
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 750;
  }

  .cake-formal-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cake-primary);
    box-shadow: 0 0 0 4px rgba(195, 31, 38, 0.08);
  }

  .cake-services-formal .cake-service-link {
    margin-top: auto;
    width: 100%;
    min-height: 48px;
    border-radius: 16px;
    color: var(--cake-primary);
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.20);
    box-shadow: none;
  }

  .cake-services-formal .cake-service-link:hover {
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary), var(--cake-primary-dark));
    border-color: transparent;
  }

  @media (max-width: 1200px) {
    .cake-formal-service-table {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cake-services-formal .cake-formal-service-card {
      min-height: 530px;
    }
  }

  @media (max-width: 800px) {
    .cake-services-formal { padding: 64px 0; }
    .cake-formal-services-shell { padding: 22px; border-radius: 30px; }
    .cake-formal-services-head { grid-template-columns: 1fr; gap: 16px; text-align: center; }
    .cake-formal-services-head .cake-title,
    .cake-formal-services-head .cake-subtitle { margin-left: auto; margin-right: auto; }
    .cake-formal-service-table { grid-template-columns: 1fr; }
    .cake-services-formal .cake-formal-service-card { min-height: auto; }
    .cake-formal-image { height: 245px; }
    .cake-formal-content { text-align: left; }
  }



  /* ADVANCED FORMAL SERVICES DESIGN - executive service portfolio */
  .cake-services-advanced {
    position: relative;
    padding: 112px 0 !important;
    background:
      radial-gradient(circle at 7% 10%, rgba(195, 31, 38, 0.07), transparent 28%),
      radial-gradient(circle at 92% 8%, rgba(247, 183, 51, 0.10), transparent 25%),
      linear-gradient(180deg, #ffffff 0%, #fff9f9 100%) !important;
  }

  .cake-services-advanced::before {
    display: none !important;
  }

  .cake-advanced-service-shell {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border-radius: 46px;
    background:
      linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,250,250,.92));
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 34px 100px rgba(16, 24, 40, 0.11);
  }

  .cake-advanced-service-shell::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 34px;
    border: 1px solid rgba(195, 31, 38, 0.07);
    pointer-events: none;
  }

  .cake-advanced-service-shell::after {
    content: "CAKE SERVICE";
    position: absolute;
    right: 34px;
    top: 18px;
    color: rgba(195, 31, 38, 0.045);
    font-size: clamp(58px, 8vw, 142px);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.08em;
    pointer-events: none;
  }

  .cake-advanced-service-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 22px;
    align-items: stretch;
  }

  .cake-advanced-service-intro {
    position: relative;
    overflow: hidden;
    min-height: 720px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px;
    border-radius: 34px;
    color: #ffffff;
    background:
      radial-gradient(circle at 16% 8%, rgba(255,255,255,.16), transparent 28%),
      radial-gradient(circle at 96% 8%, rgba(247,183,51,.22), transparent 26%),
      linear-gradient(145deg, var(--cake-primary-deep), var(--cake-primary-dark) 54%, #3c070b 100%);
    box-shadow: 0 28px 72px rgba(95, 15, 19, 0.24);
  }

  .cake-advanced-service-intro::before {
    content: "";
    position: absolute;
    right: -92px;
    bottom: -92px;
    width: 285px;
    height: 285px;
    border-radius: 50%;
    border: 44px solid rgba(255,255,255,.07);
  }

  .cake-advanced-service-intro::after {
    content: "✦";
    position: absolute;
    right: 42px;
    top: 38px;
    color: rgba(255,255,255,.13);
    font-size: 76px;
    line-height: 1;
  }

  .cake-advanced-service-intro > * {
    position: relative;
    z-index: 1;
  }

  .cake-advanced-service-intro .cake-kicker {
    color: #ffffff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.22);
  }

  .cake-advanced-service-intro .cake-kicker::before {
    background: #ffffff;
    box-shadow: 0 0 0 6px rgba(255,255,255,.13);
  }

  .cake-advanced-service-intro .cake-title {
    margin-top: 20px;
    color: #ffffff;
    font-size: clamp(34px, 3vw, 64px);
    line-height: 1.02;
    letter-spacing: -0.055em;
  }

  .cake-advanced-service-intro .cake-subtitle {
    color: rgba(255,255,255,.82);
    font-size: 15.5px;
    line-height: 1.82;
  }

  .cake-advanced-checklist {
    display: grid;
    gap: 12px;
    margin-top: 30px;
  }

  .cake-advanced-check {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.15);
  }

  .cake-advanced-check-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #ffffff;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
  }

  .cake-advanced-check-icon svg { width: 22px; height: 22px; }

  .cake-advanced-check strong {
    display: block;
    color: #ffffff;
    font-size: 14.5px;
    line-height: 1.25;
    font-weight: 950;
    margin-bottom: 4px;
  }

  .cake-advanced-check span {
    display: block;
    color: rgba(255,255,255,.72);
    font-size: 12.8px;
    line-height: 1.5;
    font-weight: 600;
  }

  .cake-advanced-service-note {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 16px;
    align-items: center;
    margin-top: 34px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255,255,255,.94);
    color: var(--cake-heading);
    box-shadow: 0 20px 44px rgba(0,0,0,.14);
  }

  .cake-advanced-note-mark {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary), var(--cake-primary-deep));
  }

  .cake-advanced-note-mark svg { width: 32px; height: 32px; }

  .cake-advanced-service-note strong {
    display: block;
    color: var(--cake-primary);
    font-size: 20px;
    line-height: 1.15;
    font-weight: 950;
    margin-bottom: 6px;
  }

  .cake-advanced-service-note span {
    display: block;
    color: #536073;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 650;
  }

  .cake-advanced-service-area {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
  }

  .cake-advanced-service-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 28px 30px;
    border-radius: 30px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.10);
    box-shadow: 0 18px 46px rgba(16,24,40,.065);
  }

  .cake-advanced-service-head h3 {
    margin: 0 0 8px;
    color: var(--cake-heading);
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: 950;
  }

  .cake-advanced-service-head p {
    margin: 0;
    max-width: 720px;
    color: #5f6b7c;
    font-size: 14.5px;
    line-height: 1.65;
    font-weight: 500;
  }

  .cake-advanced-head-badge {
    display: inline-flex;
    min-width: 116px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary), var(--cake-primary-dark));
    box-shadow: 0 16px 32px rgba(195,31,38,.23);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .cake-advanced-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .cake-services-advanced .cake-advanced-card {
    position: relative;
    display: grid;
    grid-template-columns: 185px 1fr;
    min-height: 318px;
    overflow: hidden;
    border-radius: 30px;
    color: var(--cake-heading);
    background: #ffffff;
    border: 1px solid rgba(16,24,40,.09);
    box-shadow: 0 20px 52px rgba(16,24,40,.075);
    transition: .28s ease;
  }

  .cake-services-advanced .cake-advanced-card::before,
  .cake-services-advanced .cake-advanced-card::after {
    display: none !important;
  }

  .cake-services-advanced .cake-advanced-card:hover {
    transform: translateY(-7px);
    border-color: rgba(195,31,38,.25);
    box-shadow: 0 30px 78px rgba(195,31,38,.14);
  }

  .cake-advanced-card-media {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    background: #fff1f3;
  }

  .cake-advanced-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,.42) 100%),
      linear-gradient(135deg, rgba(195,31,38,.22), transparent 58%);
    pointer-events: none;
  }

  .cake-services-advanced .cake-service-bg {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: 100%;
    min-height: 318px;
    display: block;
    object-fit: cover;
    transform: scale(1.02);
    transition: .45s ease;
  }

  .cake-services-advanced .cake-advanced-card:hover .cake-service-bg {
    transform: scale(1.08);
  }

  .cake-advanced-card-label {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(95,15,19,.78);
    border: 1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(12px);
    font-size: 10.5px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .cake-advanced-card-body {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 24px;
  }

  .cake-advanced-card-body::before {
    content: "";
    position: absolute;
    left: 0;
    top: 24px;
    bottom: 24px;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(180deg, var(--cake-primary), var(--cake-gold));
  }

  .cake-advanced-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }

  .cake-services-advanced .cake-service-number {
    position: static !important;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 18px;
    color: var(--cake-primary);
    background:
      radial-gradient(circle at 28% 20%, rgba(247,183,51,.22), transparent 42%),
      #fff7f8;
    border: 1px solid rgba(195,31,38,.12);
    box-shadow: inset 0 0 0 6px rgba(255,255,255,.68);
    font-size: 0;
  }

  .cake-services-advanced .cake-service-number svg { width: 25px; height: 25px; }

  .cake-advanced-package-code {
    color: #7a2630;
    background: rgba(195,31,38,.06);
    border: 1px solid rgba(195,31,38,.10);
    padding: 8px 11px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .cake-advanced-card-body h3 {
    margin: 0 0 10px;
    color: var(--cake-heading);
    font-size: 24px;
    line-height: 1.13;
    letter-spacing: -0.035em;
    font-weight: 950;
    text-shadow: none;
  }

  .cake-advanced-card-body p {
    margin: 0;
    color: #5b6678;
    font-size: 13.9px;
    line-height: 1.62;
    font-weight: 500;
    text-shadow: none;
  }

  .cake-advanced-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0 20px;
    padding: 0;
    list-style: none;
  }

  .cake-advanced-features li {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 12px;
    color: #344054;
    background: #fff8f8;
    border: 1px solid rgba(195,31,38,.08);
    font-size: 12px;
    line-height: 1.25;
    font-weight: 800;
  }

  .cake-advanced-features li::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--cake-primary);
    box-shadow: 0 0 0 4px rgba(195,31,38,.08);
  }

  .cake-services-advanced .cake-service-link {
    margin-top: auto;
    width: fit-content;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary), var(--cake-primary-dark));
    border: 0;
    box-shadow: 0 14px 28px rgba(195,31,38,.22);
  }

  .cake-services-advanced .cake-service-link:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(195,31,38,.32);
  }

  @media (max-width: 1280px) {
    .cake-advanced-service-layout { grid-template-columns: 1fr; }
    .cake-advanced-service-intro { min-height: auto; }
  }

  @media (max-width: 920px) {
    .cake-services-advanced { padding: 68px 0 !important; }
    .cake-advanced-service-shell { padding: 14px; border-radius: 32px; }
    .cake-advanced-service-shell::before { inset: 12px; border-radius: 24px; }
    .cake-advanced-service-intro { padding: 32px 22px; border-radius: 26px; }
    .cake-advanced-service-head { grid-template-columns: 1fr; text-align: center; padding: 24px 20px; }
    .cake-advanced-head-badge { margin: 0 auto; }
    .cake-advanced-service-grid { grid-template-columns: 1fr; }
  }

  @media (max-width: 650px) {
    .cake-services-advanced .cake-advanced-card { grid-template-columns: 1fr; }
    .cake-advanced-card-media { min-height: 250px; }
    .cake-services-advanced .cake-service-bg { min-height: 250px; }
    .cake-advanced-card-body { padding: 24px 20px; }
    .cake-advanced-features { grid-template-columns: 1fr; }
    .cake-advanced-service-note { grid-template-columns: 1fr; text-align: center; }
    .cake-advanced-note-mark { margin: 0 auto; }
  }



  /* PREMIUM CATALOG SERVICES DESIGN - like shared reference, formal advanced cards */
  .cake-services-catalog {
    position: relative;
    padding: 86px 0 96px !important;
    background:
      radial-gradient(circle at 12% 8%, rgba(195, 31, 38, 0.035), transparent 25%),
      radial-gradient(circle at 86% 6%, rgba(247, 183, 51, 0.07), transparent 23%),
      linear-gradient(180deg, #ffffff 0%, #fffdfc 60%, #fff8f8 100%) !important;
  }

  .cake-services-catalog::before {
    display: none !important;
  }

  .cake-catalog-head {
    max-width: 930px;
    margin: 0 auto 58px;
    text-align: center;
  }

  .cake-catalog-head .cake-kicker {
    background: #fff2f3;
    border: 1px solid rgba(195, 31, 38, 0.18);
    box-shadow: 0 10px 28px rgba(195, 31, 38, 0.06);
  }

  .cake-catalog-head .cake-kicker::before {
    width: 8px;
    height: 8px;
  }

  .cake-catalog-head .cake-title {
    max-width: 980px;
    margin: 22px auto 0;
    font-size: clamp(36px, 3.15vw, 72px);
    line-height: .98;
    letter-spacing: -0.065em;
    font-weight: 950;
  }

  .cake-catalog-head .cake-subtitle {
    max-width: 760px;
    margin: 18px auto 0;
    color: #5f6b7c;
    font-size: 16px;
    line-height: 1.8;
  }

  .cake-catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
  }

  .cake-catalog-card {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    border-radius: 28px;
    color: #ffffff;
    background:
      radial-gradient(circle at 22% 14%, rgba(255,255,255,.13), transparent 27%),
      linear-gradient(145deg, #bd1722 0%, #78111a 48%, #1d1024 100%);
    box-shadow: 0 26px 68px rgba(45, 15, 24, 0.18);
    isolation: isolate;
    transition: .28s ease;
  }

  .cake-catalog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 34px 84px rgba(195, 31, 38, 0.22);
  }

  .cake-catalog-card::before {
    content: "";
    position: absolute;
    inset: 12px;
    z-index: 5;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    pointer-events: none;
  }

  .cake-catalog-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
      linear-gradient(180deg, rgba(69, 4, 11, 0.28) 0%, rgba(69, 4, 11, 0.10) 37%, rgba(18, 9, 26, 0.92) 100%),
      linear-gradient(90deg, rgba(255,255,255,.08), transparent 22%, rgba(0,0,0,.12));
    pointer-events: none;
  }

  .cake-catalog-bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 128px;
    z-index: 1;
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
    opacity: .95;
    transform: scale(1.03);
    filter: saturate(1.06) contrast(1.02);
    transition: .45s ease;
  }

  .cake-catalog-card:hover .cake-catalog-bg {
    transform: scale(1.09);
  }

  .cake-catalog-card:nth-child(1) .cake-catalog-bg { object-position: center 48%; }
  .cake-catalog-card:nth-child(2) .cake-catalog-bg { object-position: center 50%; }
  .cake-catalog-card:nth-child(3) .cake-catalog-bg { object-position: center 55%; }
  .cake-catalog-card:nth-child(4) .cake-catalog-bg { object-position: center 55%; }

  .cake-catalog-number {
    position: absolute;
    left: 24px;
    top: 24px;
    z-index: 6;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--cake-primary);
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 14px 28px rgba(0,0,0,.13);
    font-size: 14px;
    font-weight: 850;
  }

  .cake-catalog-ornament {
    position: absolute;
    left: 36%;
    top: 62px;
    z-index: 6;
    width: 84px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(247, 183, 51, .68), transparent);
  }

  .cake-catalog-ornament::before {
    content: "✦";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: rgba(247, 183, 51, .86);
    font-size: 10px;
    line-height: 1;
    background: rgba(116, 13, 22, .86);
    padding: 0 7px;
  }

  .cake-catalog-big-title {
    position: absolute;
    left: 54px;
    right: 38px;
    top: 78px;
    z-index: 6;
    color: #f7c553;
    font-size: clamp(36px, 2.15vw, 50px);
    line-height: .82;
    font-weight: 950;
    letter-spacing: -0.06em;
    text-shadow: 0 10px 28px rgba(0,0,0,.22);
  }

  .cake-catalog-big-title span {
    display: block;
    color: rgba(255,255,255,.82);
  }

  .cake-catalog-script {
    display: block;
    margin-top: 2px;
    margin-left: 24px;
    color: rgba(247, 183, 51, .95) !important;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 19px;
    line-height: .9;
    font-weight: 500;
    letter-spacing: -.03em;
    transform: rotate(-9deg);
  }

  .cake-catalog-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    padding: 0 30px 30px;
    text-align: left;
  }

  .cake-catalog-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin-bottom: 16px;
    padding: 0 17px;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 28px rgba(0,0,0,.16);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .055em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .cake-catalog-content h3 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 27px;
    line-height: 1.03;
    letter-spacing: -0.04em;
    font-weight: 950;
    text-shadow: 0 10px 26px rgba(0,0,0,.30);
  }

  .cake-catalog-content p {
    margin: 0;
    min-height: 76px;
    color: rgba(255,255,255,.86);
    font-size: 14.2px;
    line-height: 1.58;
    font-weight: 500;
    text-shadow: 0 8px 20px rgba(0,0,0,.30);
  }

  .cake-catalog-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 48px;
    margin-top: 20px;
    padding: 0 22px;
    border-radius: 999px;
    border: 0;
    color: #ffffff;
    background: linear-gradient(135deg, #e02a30, #c31f26);
    box-shadow: 0 16px 34px rgba(195, 31, 38, .35);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 900;
    cursor: pointer;
    transition: .25s ease;
  }

  .cake-catalog-button:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #f0343a, #a9141b);
  }

  .cake-catalog-button svg {
    width: 17px;
    height: 17px;
  }

  @media (max-width: 1280px) {
    .cake-container { width: min(92%, 1440px); }
    .cake-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cake-catalog-card { min-height: 560px; }
  }

  @media (max-width: 700px) {
    .cake-services-catalog { padding: 62px 0 !important; }
    .cake-catalog-head { margin-bottom: 34px; }
    .cake-catalog-head .cake-title { font-size: clamp(34px, 10vw, 50px); }
    .cake-catalog-head .cake-subtitle { font-size: 15px; }
    .cake-catalog-grid { grid-template-columns: 1fr; gap: 18px; }
    .cake-catalog-card { min-height: 535px; border-radius: 24px; }
    .cake-catalog-big-title { left: 46px; top: 76px; font-size: 40px; }
    .cake-catalog-bg { height: 285px; bottom: 134px; }
    .cake-catalog-content { padding: 0 24px 26px; }
    .cake-catalog-content h3 { font-size: 25px; }
  }


/* =========================================================
   Flower Service Styles
   Moved into common stylesheet from flower-service.css
========================================================= */

:root {
    --cake-primary: #c31f26;
    --cake-primary-dark: #8f141a;
    --cake-primary-deep: #5f0f13;
    --cake-gold: #f7b733;
    --cake-cream: #fff8f1;
    --cake-pink: #fff1f3;
    --cake-text: #283142;
    --cake-heading: #101828;
    --cake-muted: #667085;
    --cake-card: #ffffff;
    --cake-border: rgba(195, 31, 38, 0.12);
    --cake-shadow: 0 28px 80px rgba(16, 24, 40, 0.12);
    --cake-soft-shadow: 0 18px 48px rgba(16, 24, 40, 0.08);
    --cake-radius: 34px;
  }

  * { box-sizing: border-box; }

  .cake-page {
    overflow: hidden;
    color: var(--cake-text);
    background:
      radial-gradient(circle at 8% 8%, rgba(195, 31, 38, 0.08), transparent 28%),
      radial-gradient(circle at 92% 4%, rgba(247, 183, 51, 0.14), transparent 24%),
      linear-gradient(180deg, #fffefe 0%, #fff8f8 42%, #ffffff 100%);
    font-family: inherit;
  }

  .cake-container {
    width: 75%;
    margin: 0 auto;
  }

  .cake-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    color: var(--cake-primary);
    background: rgba(195, 31, 38, 0.08);
    border: 1px solid rgba(195, 31, 38, 0.14);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .cake-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cake-primary);
    box-shadow: 0 0 0 6px rgba(195, 31, 38, 0.12);
  }

  .cake-title {
    margin: 16px 0 0;
    color: var(--cake-heading);
    font-size: clamp(34px, 3.2vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.055em;
    font-weight: 850;
  }

  .cake-subtitle {
    margin: 20px 0 0;
    color: var(--cake-muted);
    font-size: 16.5px;
    line-height: 1.82;
    font-weight: 400;
  }

  .cake-highlight { color: var(--cake-primary); }

  .cake-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 25px;
    border-radius: 999px;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 900;
    transition: 0.25s ease;
    font-family: inherit;
  }

  .cake-btn:hover { transform: translateY(-3px); }

  .cake-btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary), var(--cake-primary-dark));
    box-shadow: 0 18px 36px rgba(195, 31, 38, 0.26);
  }

  .cake-btn-light {
    color: var(--cake-primary);
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.16);
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.06);
  }

  .cake-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  .cake-section-head {
    max-width: 850px;
    margin: 0 auto 46px;
    text-align: center;
  }

  .cake-section-head .cake-title {
    font-size: clamp(30px, 2.4vw, 58px);
    letter-spacing: -0.042em;
  }

  /* HERO */
  .cake-hero {
    position: relative;
    padding: 112px 0 86px;
  }

  .cake-hero::before {
    content: "";
    position: absolute;
    inset: 26px;
    border: 1px solid rgba(195, 31, 38, 0.08);
    border-radius: 46px;
    pointer-events: none;
  }

  .cake-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 58px;
    align-items: center;
  }

  .cake-hero-copy { max-width: 720px; }

  .cake-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
  }

  .cake-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
  }

  .cake-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border-radius: 999px;
    color: #344054;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 12px 26px rgba(16, 24, 40, 0.06);
    font-size: 13px;
    font-weight: 800;
  }

  .cake-trust-pill svg { color: var(--cake-primary); }

  .cake-hero-media { position: relative; }

  .cake-hero-card {
    position: relative;
    overflow: hidden;
    padding: 12px;
    border-radius: 42px;
    background: #ffffff;
    box-shadow: var(--cake-shadow);
  }

  .cake-hero-card img {
    width: 100%;
    height: 570px;
    display: block;
    object-fit: cover;
    border-radius: 32px;
  }

  .cake-hero-card::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 32px;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 28%, rgba(15, 23, 42, 0.56) 100%),
      linear-gradient(135deg, rgba(195, 31, 38, 0.18), transparent 55%);
    pointer-events: none;
  }

  .cake-hero-badge {
    position: absolute;
    left: -22px;
    bottom: 36px;
    z-index: 2;
    width: min(345px, calc(100% - 30px));
    padding: 23px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 54px rgba(16, 24, 40, 0.18);
  }

  .cake-hero-badge strong {
    display: block;
    color: var(--cake-primary);
    font-size: 30px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 9px;
  }

  .cake-hero-badge span {
    display: block;
    color: #475467;
    font-size: 14px;
    line-height: 1.62;
    font-weight: 600;
  }

  .cake-floating {
    position: absolute;
    right: -18px;
    top: 38px;
    z-index: 2;
    padding: 18px;
    width: 214px;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary), var(--cake-primary-deep));
    box-shadow: 0 22px 42px rgba(195, 31, 38, 0.26);
  }

  .cake-floating small {
    display: block;
    opacity: 0.84;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
  }

  .cake-floating strong {
    display: block;
    font-size: 23px;
    line-height: 1.06;
    font-weight: 950;
  }

  /* SERVICE CARDS - FORMAL FLOWER SERVICE UPGRADE */
  .cake-services {
    position: relative;
    padding: 96px 0;
    background:
      radial-gradient(circle at 12% 12%, rgba(195, 31, 38, 0.06), transparent 24%),
      radial-gradient(circle at 88% 8%, rgba(247, 183, 51, 0.12), transparent 22%),
      linear-gradient(180deg, #ffffff 0%, #fffafa 100%);
  }

  .cake-services::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 72px;
    width: min(74%, 1100px);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.22), transparent);
  }

  .cake-services-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }

  .cake-service-card {
    position: relative;
    overflow: hidden;
    min-height: 505px;
    padding: 0;
    border-radius: 28px;
    isolation: isolate;
    color: #ffffff;
    border: 0;
    background: #4b1118;
    box-shadow: 0 24px 58px rgba(16, 24, 40, 0.16);
    transition: 0.28s ease;
  }

  .cake-service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 34px 76px rgba(195, 31, 38, 0.22);
  }

  .cake-service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.24), transparent 24%),
      radial-gradient(circle at 82% 16%, rgba(247, 183, 51, 0.22), transparent 20%),
      linear-gradient(180deg, rgba(70, 8, 20, 0.04) 0%, rgba(70, 8, 20, 0.20) 42%, rgba(35, 5, 18, 0.92) 100%);
    pointer-events: none;
  }

  .cake-service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(9, 2, 8, 0.20) 54%, rgba(9, 2, 8, 0.78) 100%);
    pointer-events: none;
  }

  .cake-service-card:nth-child(1) { background: linear-gradient(135deg, #8f141a, #3a0814); }
  .cake-service-card:nth-child(2) { background: linear-gradient(135deg, #b0182a, #400914); }
  .cake-service-card:nth-child(3) { background: linear-gradient(135deg, #c23a52, #3d091b); }
  .cake-service-card:nth-child(4) { background: linear-gradient(135deg, #f3a17f, #5a111b); }

  .cake-service-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: 0.45s ease;
    z-index: 0;
  }

  .cake-service-card:hover .cake-service-bg { transform: scale(1.08); }

  .cake-service-number {
    position: absolute;
    left: 22px;
    top: 22px;
    z-index: 4;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--cake-primary);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.52);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.15);
    font-size: 13px;
    font-weight: 950;
  }

  .cake-service-title-float {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 78px;
    z-index: 4;
    color: #ffffff;
    font-size: clamp(27px, 2.1vw, 39px);
    line-height: 0.94;
    letter-spacing: -0.045em;
    font-weight: 950;
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  }

  .cake-service-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 26px 24px 24px;
  }

  .cake-service-content h3 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 21px;
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -0.025em;
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.30);
  }

  .cake-service-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.90);
    font-size: 14.5px;
    line-height: 1.58;
    font-weight: 500;
    text-shadow: 0 7px 18px rgba(0, 0, 0, 0.28);
  }

  .cake-service-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    min-height: 44px;
    margin-top: 18px;
    padding: 0 19px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #ef262d, var(--cake-primary));
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 15px 34px rgba(195, 31, 38, 0.34);
    transition: 0.25s ease;
  }

  .cake-service-link:hover {
    transform: translateY(-2px);
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(195, 31, 38, 0.42);
  }

  .cake-service-link svg {
    width: 17px;
    height: 17px;
  }

  /* PROCESS - FORMAL EXECUTIVE REDESIGN */
  .cake-process {
    position: relative;
    overflow: hidden;
    padding: 108px 0;
    background:
      radial-gradient(circle at 9% 12%, rgba(195, 31, 38, 0.08), transparent 27%),
      radial-gradient(circle at 92% 20%, rgba(247, 183, 51, 0.14), transparent 24%),
      linear-gradient(180deg, #fffefe 0%, #fff8f8 100%);
  }

  .cake-process::before {
    content: "";
    position: absolute;
    inset: 38px 34px;
    border-radius: 48px;
    border: 1px solid rgba(195, 31, 38, 0.08);
    pointer-events: none;
  }

  .cake-process::after {
    content: "";
    position: absolute;
    right: -160px;
    top: 48px;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: rgba(247, 183, 51, 0.10);
    pointer-events: none;
  }

  .cake-process-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    gap: 34px;
    align-items: stretch;
  }

  .cake-process-intro {
    position: relative;
    overflow: hidden;
    min-height: 610px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 46px;
    border-radius: 38px;
    color: #ffffff;
    background:
      radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.16), transparent 30%),
      radial-gradient(circle at 92% 12%, rgba(247, 183, 51, 0.28), transparent 28%),
      linear-gradient(135deg, var(--cake-primary-deep), var(--cake-primary) 58%, #8f141a);
    box-shadow: 0 30px 82px rgba(95, 15, 19, 0.22);
  }

  .cake-process-intro::before {
    content: "";
    position: absolute;
    right: -88px;
    bottom: -88px;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    border: 38px solid rgba(255, 255, 255, 0.08);
  }

  .cake-process-intro::after {
    content: "04";
    position: absolute;
    right: 34px;
    top: 30px;
    color: rgba(255, 255, 255, 0.09);
    font-size: clamp(92px, 10vw, 168px);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.08em;
  }

  .cake-process-intro-content,
  .cake-process-summary {
    position: relative;
    z-index: 1;
  }

  .cake-process-intro .cake-kicker {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
  }

  .cake-process-intro .cake-kicker::before {
    background: #ffffff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12);
  }

  .cake-process-intro .cake-title {
    max-width: 650px;
    margin-top: 20px;
    color: #ffffff;
    font-size: clamp(30px, 2.4vw, 58px);
    letter-spacing: -0.056em;
  }

  .cake-process-intro .cake-subtitle {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.82);
  }

  .cake-process-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 36px;
  }

  .cake-process-summary-item {
    min-height: 112px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
  }

  .cake-process-summary-item strong {
    display: block;
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 10px;
  }

  .cake-process-summary-item span {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 650;
  }

  .cake-process-panel {
    position: relative;
    padding: 18px;
    border-radius: 38px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 26px 76px rgba(16, 24, 40, 0.10);
    backdrop-filter: blur(12px);
  }

  .cake-process-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
    padding: 20px 22px;
    border-radius: 28px;
    background:
      radial-gradient(circle at 88% 0%, rgba(247, 183, 51, 0.14), transparent 34%),
      #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.10);
  }

  .cake-process-panel-head h3 {
    margin: 0;
    color: var(--cake-heading);
    font-size: 21px;
    line-height: 1.2;
    font-weight: 950;
    letter-spacing: -0.03em;
  }

  .cake-process-panel-head span {
    color: #667085;
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 550;
  }

  .cake-process-badge {
    flex: 0 0 auto;
    min-width: 96px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary), var(--cake-primary-dark));
    box-shadow: 0 14px 28px rgba(195, 31, 38, 0.22);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .cake-process-grid {
    counter-reset: cakeStep;
    display: grid;
    gap: 14px;
  }

  .cake-process-card {
    position: relative;
    overflow: hidden;
    counter-increment: cakeStep;
    display: grid;
    grid-template-columns: 86px 1fr auto;
    gap: 20px;
    align-items: center;
    min-height: 124px;
    padding: 22px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 16px 42px rgba(16, 24, 40, 0.065);
    transition: 0.26s ease;
  }

  .cake-process-card:hover {
    transform: translateX(8px);
    border-color: rgba(195, 31, 38, 0.25);
    box-shadow: 0 24px 56px rgba(195, 31, 38, 0.13);
  }

  .cake-process-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 7px;
    background: linear-gradient(180deg, var(--cake-primary), var(--cake-gold));
  }

  .cake-process-card::after {
    content: "0" counter(cakeStep);
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    color: rgba(195, 31, 38, 0.16);
    background: rgba(195, 31, 38, 0.05);
    font-size: 29px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.05em;
  }

  .cake-process-icon {
    position: relative;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    margin: 0;
    border-radius: 24px;
    color: var(--cake-primary);
    background:
      radial-gradient(circle at 28% 20%, rgba(247, 183, 51, 0.28), transparent 34%),
      var(--cake-pink);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.56);
  }

  .cake-process-icon svg {
    width: 30px;
    height: 30px;
  }

  .cake-step-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 8px;
    padding: 7px 11px;
    border-radius: 999px;
    color: var(--cake-primary);
    background: rgba(195, 31, 38, 0.07);
    border: 1px solid rgba(195, 31, 38, 0.12);
    font-size: 10.5px;
    font-weight: 950;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .cake-step-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--cake-primary);
  }

  .cake-process-card h3 {
    margin: 0 0 8px;
    color: var(--cake-heading);
    font-size: 20px;
    line-height: 1.22;
    font-weight: 950;
    letter-spacing: -0.025em;
  }

  .cake-process-card p {
    max-width: 520px;
    margin: 0;
    color: #536073;
    font-size: 14.5px;
    line-height: 1.66;
    font-weight: 450;
  }

  @media (max-width: 1100px) {
    .cake-process-layout { grid-template-columns: 1fr; }
    .cake-process-intro { min-height: auto; }
  }

  @media (max-width: 700px) {
    .cake-process { padding: 64px 0; }
    .cake-process::before { display: none; }
    .cake-process-intro { padding: 32px 22px; border-radius: 28px; }
    .cake-process-summary { grid-template-columns: 1fr; }
    .cake-process-panel { padding: 12px; border-radius: 28px; }
    .cake-process-panel-head { display: block; padding: 18px; border-radius: 22px; }
    .cake-process-badge { margin-top: 14px; }
    .cake-process-card { grid-template-columns: 1fr; min-height: auto; padding: 22px 20px; border-radius: 22px; }
    .cake-process-card:hover { transform: translateY(-4px); }
    .cake-process-card::after { position: absolute; right: 16px; top: 16px; width: 54px; height: 54px; font-size: 24px; }
    .cake-process-icon { width: 62px; height: 62px; border-radius: 21px; }
    .cake-process-icon svg { width: 27px; height: 27px; }
  }


  /* FEATURE SPLIT - FORMAL REDESIGN */
  .cake-feature {
    position: relative;
    overflow: hidden;
    padding: 106px 0;
    background:
      radial-gradient(circle at 8% 14%, rgba(195, 31, 38, 0.08), transparent 28%),
      radial-gradient(circle at 88% 78%, rgba(247, 183, 51, 0.12), transparent 24%),
      linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
  }

  .cake-feature::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.18), transparent);
  }

  .cake-feature-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 34px;
    align-items: stretch;
    padding: 18px;
    border-radius: 44px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 34px 90px rgba(16, 24, 40, 0.10);
    backdrop-filter: blur(12px);
  }

  .cake-feature-copy {
    position: relative;
    overflow: hidden;
    padding: 48px;
    border-radius: 32px;
    color: #ffffff;
    background:
      radial-gradient(circle at 15% 12%, rgba(255, 255, 255, 0.14), transparent 27%),
      radial-gradient(circle at 92% 10%, rgba(247, 183, 51, 0.20), transparent 25%),
      linear-gradient(135deg, var(--cake-primary-deep) 0%, var(--cake-primary-dark) 48%, #3d080d 100%);
  }

  .cake-feature-copy::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 42px solid rgba(255, 255, 255, 0.06);
  }

  .cake-feature-copy .cake-section-head {
    position: relative;
    z-index: 1;
    text-align: left;
    margin: 0 0 30px;
    max-width: 100%;
  }

  .cake-feature-copy .cake-kicker {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
  }

  .cake-feature-copy .cake-kicker::before {
    background: #ffffff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12);
  }

  .cake-feature-copy .cake-title {
    color: #ffffff;
    font-size: clamp(30px, 2.4vw, 58px);
    line-height: 1.03;
    letter-spacing: -0.052em;
  }

  .cake-feature-copy .cake-subtitle {
    color: rgba(255, 255, 255, 0.80);
    max-width: 620px;
  }

  .cake-feature-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
    margin-top: 30px;
  }

  .cake-mini-card {
    position: relative;
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 16px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: none;
    transition: 0.25s ease;
  }

  .cake-mini-card:hover {
    transform: translateX(7px);
    background: rgba(255, 255, 255, 0.15);
  }

  .cake-mini-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 20px;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(247, 183, 51, 0.32), rgba(255, 255, 255, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .cake-mini-icon svg { width: 24px; height: 24px; }

  .cake-mini-card h3 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 16.5px;
    line-height: 1.24;
    font-weight: 950;
  }

  .cake-mini-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 13.8px;
    line-height: 1.62;
  }

  .cake-feature-copy .cake-hero-actions {
    position: relative;
    z-index: 1;
    margin-top: 32px;
  }

  .cake-feature-copy .cake-btn-primary {
    color: var(--cake-primary);
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
  }

  .cake-feature-copy .cake-btn-light {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.20);
    box-shadow: none;
  }

  .cake-feature-media {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 18px;
    min-width: 0;
  }

  .cake-feature-image {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 610px;
    border-radius: 32px;
    border: 0;
    box-shadow: none;
    background:
      linear-gradient(135deg, rgba(195, 31, 38, 0.08), rgba(247, 183, 51, 0.14)),
      #fff7e5;
  }

  .cake-feature-image::before {
    content: "";
    position: absolute;
    inset: 22px;
    z-index: 2;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    pointer-events: none;
  }

  .cake-feature-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 0%, rgba(15, 23, 42, 0.20) 100%),
      radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.40), transparent 25%);
    pointer-events: none;
  }

  .cake-feature-image img {
    width: 100%;
    height: 100%;
    min-height: 610px;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
  }

  .cake-feature-badge {
    position: absolute;
    left: 34px;
    right: 34px;
    bottom: 34px;
    z-index: 4;
    width: auto;
    padding: 0;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    box-shadow: 0 26px 60px rgba(16, 24, 40, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.70);
  }

  .cake-feature-badge-inner {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 18px;
    align-items: center;
    padding: 22px;
  }

  .cake-feature-badge-mark {
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    border-radius: 26px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary), var(--cake-primary-deep));
    box-shadow: 0 18px 32px rgba(195, 31, 38, 0.26);
  }

  .cake-feature-badge-mark svg { width: 38px; height: 38px; }

  .cake-feature-badge strong {
    display: block;
    color: var(--cake-primary);
    font-size: 25px;
    line-height: 1.08;
    font-weight: 950;
    margin-bottom: 7px;
    letter-spacing: -0.03em;
  }

  .cake-feature-badge span {
    display: block;
    color: #536073;
    font-size: 13.5px;
    line-height: 1.58;
    font-weight: 650;
  }

  .cake-feature-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .cake-feature-stat {
    min-height: 122px;
    padding: 20px;
    border-radius: 26px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 18px 42px rgba(16, 24, 40, 0.07);
  }

  .cake-feature-stat strong {
    display: block;
    color: var(--cake-heading);
    font-size: 30px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.04em;
    margin-bottom: 9px;
  }

  .cake-feature-stat span {
    display: block;
    color: var(--cake-muted);
    font-size: 13.5px;
    line-height: 1.46;
    font-weight: 650;
  }

  /* WHY - FORMAL REDESIGN */
  .cake-why {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    background:
      radial-gradient(circle at 12% 8%, rgba(195, 31, 38, 0.10), transparent 28%),
      radial-gradient(circle at 92% 18%, rgba(247, 183, 51, 0.16), transparent 26%),
      linear-gradient(180deg, #fffefe 0%, #fff8f8 100%);
  }

  .cake-why::before {
    content: "";
    position: absolute;
    left: -120px;
    top: 70px;
    width: 310px;
    height: 310px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.06);
    filter: blur(2px);
  }

  .cake-why::after {
    content: "";
    position: absolute;
    right: -150px;
    bottom: -130px;
    width: 410px;
    height: 410px;
    border-radius: 50%;
    background: rgba(247, 183, 51, 0.13);
    filter: blur(2px);
  }

  .cake-why-shell {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 46px;
    background:
      linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,250,250,.94));
    border: 1px solid rgba(195, 31, 38, 0.14);
    box-shadow: 0 34px 92px rgba(16, 24, 40, 0.10);
  }

  .cake-why-hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 38px;
    align-items: stretch;
    padding: 34px;
  }

  .cake-why-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 520px;
    padding: 48px 36px 48px 42px;
    border-radius: 34px;
    background:
      radial-gradient(circle at 5% 0%, rgba(247, 183, 51, 0.14), transparent 34%),
      linear-gradient(135deg, #ffffff 0%, #fff7f7 100%);
    border: 1px solid rgba(195, 31, 38, 0.12);
  }

  .cake-why-copy .cake-section-head {
    max-width: 690px;
    text-align: left;
    margin: 0;
  }

  .cake-why-copy .cake-title {
    font-size: clamp(30px, 2.4vw, 58px);
    letter-spacing: -0.052em;
  }

  .cake-why-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 34px;
  }

  .cake-why-proof-item {
    min-height: 112px;
    padding: 18px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.06);
  }

  .cake-why-proof-item strong {
    display: block;
    color: var(--cake-primary);
    font-size: 28px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 9px;
  }

  .cake-why-proof-item span {
    display: block;
    color: #5c6678;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 650;
  }

  .cake-why-image {
    position: relative;
    min-height: 520px;
    border-radius: 34px;
    overflow: hidden;
    background: var(--cake-primary-deep);
    box-shadow: 0 26px 68px rgba(16, 24, 40, 0.16);
  }

  .cake-why-image img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    display: block;
    object-fit: cover;
    transform: scale(1.02);
  }

  .cake-why-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 18%, rgba(15, 23, 42, 0.72) 100%),
      linear-gradient(135deg, rgba(195, 31, 38, 0.32), transparent 58%);
    pointer-events: none;
  }

  .cake-why-floating {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    z-index: 2;
    padding: 28px;
    border-radius: 28px;
    color: #ffffff;
    background: rgba(95, 15, 19, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.20);
  }

  .cake-why-floating strong {
    display: block;
    color: #ffffff;
    font-size: 34px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -0.035em;
    margin-bottom: 10px;
  }

  .cake-why-floating span {
    display: block;
    color: rgba(255, 255, 255, 0.86);
    font-size: 14px;
    line-height: 1.66;
    font-weight: 600;
  }

  .cake-why-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 0 34px 34px;
  }

  .cake-why-card {
    position: relative;
    overflow: hidden;
    min-height: 248px;
    padding: 26px;
    border-radius: 30px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.13);
    box-shadow: 0 20px 48px rgba(16, 24, 40, 0.07);
    transition: 0.28s ease;
  }

  .cake-why-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--cake-primary), var(--cake-gold));
  }

  .cake-why-card::after {
    content: "";
    position: absolute;
    right: -34px;
    top: -34px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.055);
  }

  .cake-why-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 62px rgba(195, 31, 38, 0.13);
  }

  .cake-why-icon {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 20px;
    color: var(--cake-primary);
    background:
      radial-gradient(circle at 28% 18%, rgba(247, 183, 51, 0.28), transparent 44%),
      var(--cake-pink);
    border: 1px solid rgba(195, 31, 38, 0.10);
  }

  .cake-why-icon svg { width: 27px; height: 27px; }

  .cake-why-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 10px;
    color: var(--cake-heading);
    font-size: 18px;
    line-height: 1.22;
    font-weight: 950;
    letter-spacing: -0.018em;
  }

  .cake-why-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #536073;
    font-size: 14px;
    line-height: 1.68;
  }

  /* TESTIMONIAL */
  .cake-testimonial {
    padding: 96px 0;
    background: linear-gradient(180deg, #fffafa 0%, #ffffff 100%);
  }

  .cake-testimonial-shell {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 24px;
    padding: 22px;
    border-radius: 46px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--cake-border);
    box-shadow: var(--cake-shadow);
  }

  .cake-testimonial-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px;
    border-radius: 34px;
    color: #ffffff;
    background:
      radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.14), transparent 28%),
      linear-gradient(135deg, var(--cake-primary-deep), var(--cake-primary) 58%, #8f1018);
  }

  .cake-testimonial-content .cake-kicker {
    width: fit-content;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
  }

  .cake-testimonial-content .cake-kicker::before { background: #ffffff; box-shadow: none; }

  .cake-testimonial-content h2 {
    margin: 18px 0 0;
    color: #ffffff;
    font-size: clamp(28px, 2.2vw, 66px);
    line-height: 1.08;
    letter-spacing: -0.045em;
    font-weight: 760;
  }

  .cake-testimonial-content p {
    margin: 20px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 15.5px;
    line-height: 1.78;
  }

  .cake-review {
    position: relative;
    margin-top: 30px;
    padding: 28px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .cake-review blockquote {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    line-height: 1.58;
    font-weight: 700;
  }

  .cake-review-author {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .cake-avatar {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: var(--cake-primary);
    background: #ffffff;
    font-size: 15px;
    font-weight: 950;
  }

  .cake-person { display: flex; align-items: center; gap: 13px; }
  .cake-person strong { display: block; color: #ffffff; font-size: 15px; font-weight: 900; }
  .cake-person span { display: block; margin-top: 4px; color: rgba(255,255,255,.72); font-size: 13px; font-weight: 650; }
  .cake-stars { color: #ffd166; letter-spacing: .06em; white-space: nowrap; }

  /* TESTIMONIAL SLIDER UPDATE */
  .cake-review-slider {
    position: relative;
  }

  .cake-review-slide {
    transition: opacity .35s ease;
  }

  .cake-review-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .cake-review-controls .cake-review-author {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    flex: 1 1 auto;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .cake-review-nav {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
  }

  .cake-review-arrow {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    cursor: pointer;
    transition: .25s ease;
  }

  .cake-review-arrow:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.16);
  }

  .cake-review-arrow svg {
    width: 18px;
    height: 18px;
  }

  @media (max-width: 700px) {
    .cake-review-controls {
      flex-direction: column;
      align-items: flex-start;
    }

    .cake-review-controls .cake-review-author {
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
    }

    .cake-review-nav {
      width: 100%;
      justify-content: flex-start;
    }
  }

  .cake-testimonial-visual {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 18px;
  }

  .cake-testimonial-img {
    position: relative;
    overflow: hidden;
    min-height: 430px;
    border-radius: 34px;
    box-shadow: 0 24px 58px rgba(16, 24, 40, 0.12);
  }

  .cake-testimonial-img img {
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
    display: block;
  }

  .cake-testimonial-label {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    box-shadow: 0 22px 44px rgba(16, 24, 40, 0.15);
  }

  .cake-testimonial-label strong {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary), var(--cake-primary-deep));
    font-size: 25px;
    line-height: 1;
    font-weight: 950;
  }

  .cake-testimonial-label span {
    color: #475467;
    font-size: 13.5px;
    line-height: 1.58;
    font-weight: 650;
  }

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

  .cake-benefit {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 112px;
    padding: 16px 16px 16px;
    border-radius: 24px;
    background:
      radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82) 34%, rgba(255, 248, 248, 0.94) 100%),
      linear-gradient(180deg, #ffffff 0%, #fffafa 100%);
    border: 1px solid rgba(195, 31, 38, 0.16);
    color: var(--cake-heading);
    text-align: center;
    font-family: inherit;
    font-size: 13.8px;
    line-height: 1.24;
    font-weight: 950;
    box-shadow: 0 22px 54px rgba(16, 24, 40, 0.08);
    transition: 0.28s ease;
    isolation: isolate;
  }

  .cake-benefit::before {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, transparent, var(--cake-primary), rgba(247, 183, 51, 0.45), transparent);
    opacity: 0.78;
  }

  .cake-benefit::after {
    content: "✦";
    position: absolute;
    right: 32%;
    top: 14px;
    color: var(--cake-primary);
    font-size: 9px;
    line-height: 1;
    opacity: 0.88;
  }

  .cake-benefit:hover {
    transform: translateY(-6px);
    border-color: rgba(195, 31, 38, 0.28);
    box-shadow: 0 30px 66px rgba(195, 31, 38, 0.13);
  }

  .cake-benefit-icon {
    position: relative;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--cake-primary);
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow:
      0 10px 22px rgba(16, 24, 40, 0.07),
      inset 0 0 0 6px rgba(195, 31, 38, 0.035);
  }

  .cake-benefit-icon::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid rgba(195, 31, 38, 0.13);
    border-top-color: var(--cake-primary);
    transform: rotate(18deg);
  }

  .cake-benefit-icon svg {
    width: 19px;
    height: 19px;
    color: var(--cake-primary);
    position: relative;
    z-index: 1;
  }

  .cake-benefit-line {
    position: relative;
    width: 38px;
    height: 1px;
    margin: 2px auto 0;
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.9), transparent);
  }

  .cake-benefit-line::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    border: 1.5px solid var(--cake-primary);
    background: #ffffff;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .cake-benefit-text {
    display: block;
    color: #07111f;
    font-size: 13.5px;
    font-weight: 950;
    letter-spacing: -0.015em;
  }

  /* MODAL */
  .cake-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .cake-modal.is-open { display: flex; }

  .cake-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(8px);
  }

  .cake-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(900px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 32px;
    background: #ffffff;
    box-shadow: 0 34px 90px rgba(15, 23, 42, 0.28);
    animation: cakeModalIn 0.25s ease;
  }

  @keyframes cakeModalIn {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .cake-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 28px 30px 24px;
    border-bottom: 1px solid rgba(195, 31, 38, 0.12);
    background:
      radial-gradient(circle at 92% 0%, rgba(247, 183, 51, 0.16), transparent 25%),
      linear-gradient(135deg, #fff7f7 0%, #ffffff 66%);
  }

  .cake-modal-kicker {
    color: var(--cake-primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  .cake-modal-title {
    margin: 0;
    color: var(--cake-heading);
    font-size: clamp(25px, 2.1vw, 40px);
    line-height: 1.12;
    letter-spacing: -0.03em;
    font-weight: 900;
  }

  .cake-modal-close {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: #ffffff;
    color: var(--cake-heading);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .25s ease;
  }

  .cake-modal-close:hover { transform: rotate(90deg); color: var(--cake-primary); }
  .cake-modal-close svg { width: 22px; height: 22px; }

  .cake-modal-body {
    max-height: calc(100vh - 210px);
    overflow: auto;
    padding: 28px 30px 30px;
  }

  .cake-modal-intro {
    margin: 0 0 18px;
    padding: 20px 22px;
    border-radius: 22px;
    color: #344054;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 14px 34px rgba(16, 24, 40, 0.06);
    font-size: 15.5px;
    line-height: 1.75;
    font-weight: 500;
  }

  .cake-modal-points {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cake-modal-points li {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #3f4857;
    font-size: 15px;
    line-height: 1.68;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.04);
  }

  .cake-modal-point-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--cake-primary);
    background: var(--cake-pink);
  }

  .cake-modal-point-icon svg { width: 21px; height: 21px; }
  .cake-modal-points strong { color: var(--cake-heading); font-weight: 900; }

  .cake-modal-note {
    margin-top: 18px;
    padding: 19px 22px;
    border-radius: 20px;
    border-left: 4px solid var(--cake-primary);
    background: rgba(195, 31, 38, 0.06);
    color: #3f4857;
    font-size: 14.5px;
    line-height: 1.65;
    font-weight: 500;
  }

  .cake-modal-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 30px 26px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
  }

  .cake-modal-help {
    color: #667085;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
  }

  .cake-modal-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary), var(--cake-primary-dark));
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 16px 28px rgba(195, 31, 38, 0.22);
  }

  @media (max-width: 1100px) {
    .cake-hero-grid,
    .cake-feature-wrap,
    .cake-why-grid,
    .cake-testimonial-shell { grid-template-columns: 1fr; }
    .cake-services-grid,
    .cake-process-grid { grid-template-columns: repeat(2, 1fr); }
    .cake-feature-copy .cake-section-head,
    .cake-why-copy .cake-section-head { text-align: center; margin-left: auto; margin-right: auto; }
    .cake-feature-image { height: 520px; }
    .cake-why-image { min-height: 520px; }
    .cake-feature-badge { left: 24px; }
  }

  @media (max-width: 700px) {
    .cake-container { width: min(92%, 1440px); }
    .cake-hero { padding: 60px 0 56px; }
    .cake-hero::before { display: none; }
    .cake-services,
    .cake-process,
    .cake-feature,
    .cake-why,
    .cake-testimonial { padding: 58px 0; }
    .cake-title { font-size: clamp(34px, 10vw, 52px); }
    .cake-section-head { margin-bottom: 32px; }
    .cake-hero-card { border-radius: 28px; padding: 8px; }
    .cake-hero-card img { height: 390px; border-radius: 22px; }
    .cake-hero-card::after { inset: 8px; border-radius: 22px; }
    .cake-hero-badge,
    .cake-floating,
    .cake-feature-badge { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; margin: -46px 16px 0; }
    .cake-floating { margin-top: 14px; }
    .cake-services-grid,
    .cake-process-grid,
    .cake-feature-list,
    .cake-benefits { grid-template-columns: 1fr; }
    .cake-service-card { min-height: 470px; }
    .cake-service-title-float { top: 76px; font-size: 34px; }
    .cake-service-content { padding: 24px 22px 22px; }
    .cake-feature-image { height: 390px; border-radius: 28px; border-width: 8px; }
    .cake-why-image { min-height: 410px; border-radius: 28px; }
    .cake-why-floating { left: 16px; right: 16px; bottom: 16px; padding: 18px; border-radius: 22px; }
    .cake-why-card { grid-template-columns: 1fr; text-align: center; }
    .cake-why-icon { margin: 0 auto; }
    .cake-testimonial-shell { padding: 12px; border-radius: 30px; }
    .cake-testimonial-content { padding: 34px 22px; border-radius: 24px; }
    .cake-review blockquote { font-size: 17px; }
    .cake-review-author { flex-direction: column; align-items: flex-start; }
    .cake-testimonial-img,
    .cake-testimonial-img img { min-height: 360px; border-radius: 24px; }
    .cake-testimonial-label { left: 14px; right: 14px; bottom: 14px; grid-template-columns: 1fr; }
    .cake-modal { padding: 14px; }
    .cake-modal-dialog { border-radius: 24px; }
    .cake-modal-head,
    .cake-modal-body,
    .cake-modal-foot { padding-left: 20px; padding-right: 20px; }
    .cake-modal-points li { grid-template-columns: 1fr; }
  }

  @media (max-width: 1100px) {
    .cake-feature-wrap { grid-template-columns: 1fr; }
    .cake-feature-copy .cake-section-head { text-align: center; margin-left: auto; margin-right: auto; }
    .cake-feature-copy { padding: 42px 34px; }
    .cake-feature-image { min-height: 520px; height: 520px; }
    .cake-feature-image img { min-height: 520px; }
  }

  @media (max-width: 700px) {
    .cake-feature-wrap { padding: 10px; border-radius: 30px; gap: 12px; }
    .cake-feature-copy { padding: 32px 20px; border-radius: 24px; }
    .cake-mini-card { grid-template-columns: 1fr; text-align: center; }
    .cake-mini-icon { margin: 0 auto; }
    .cake-feature-copy .cake-hero-actions { justify-content: center; }
    .cake-feature-image { min-height: 390px; height: 390px; border-radius: 24px; }
    .cake-feature-image img { min-height: 390px; }
    .cake-feature-image::before { inset: 12px; border-radius: 18px; }
    .cake-feature-badge { position: relative; left: auto; right: auto; bottom: auto; margin: -60px 14px 0; }
    .cake-feature-badge-inner { grid-template-columns: 1fr; text-align: center; padding: 20px; }
    .cake-feature-badge-mark { margin: 0 auto; }
    .cake-feature-stats { grid-template-columns: 1fr; }
    .cake-feature-stat { min-height: auto; text-align: center; }
  }



  @media (max-width: 1100px) {
    .cake-why-hero { grid-template-columns: 1fr; }
    .cake-why-copy { min-height: auto; }
    .cake-why-list { grid-template-columns: repeat(2, 1fr); }
    .cake-why-copy .cake-section-head { text-align: center; margin-left: auto; margin-right: auto; }
  }

  @media (max-width: 700px) {
    .cake-why { padding: 58px 0; }
    .cake-why-shell { border-radius: 30px; }
    .cake-why-hero { padding: 14px; gap: 14px; }
    .cake-why-copy { padding: 30px 20px; border-radius: 24px; }
    .cake-why-proof { grid-template-columns: 1fr; }
    .cake-why-image { min-height: 390px; border-radius: 24px; }
    .cake-why-image img { min-height: 390px; }
    .cake-why-floating { left: 16px; right: 16px; bottom: 16px; padding: 20px; border-radius: 22px; }
    .cake-why-list { grid-template-columns: 1fr; padding: 0 14px 14px; }
    .cake-why-card { min-height: auto; text-align: center; }
    .cake-why-icon { margin-left: auto; margin-right: auto; }
  }


  /* EXTRA TEXT FILL - added to use existing open space without removing the layout */
  .cake-fill-copy {
    position: relative;
    z-index: 1;
    margin-top: 26px;
    padding: 22px 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
  }

  .cake-fill-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 14.5px;
    line-height: 1.74;
    font-weight: 550;
  }

  .cake-fill-copy p + p { margin-top: 12px; }

  .cake-fill-points {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    margin-top: 24px;
  }

  .cake-fill-point {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 15px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.82);
    font-size: 13.5px;
    line-height: 1.56;
    font-weight: 600;
  }

  .cake-fill-point strong {
    display: block;
    color: #ffffff;
    font-size: 14.5px;
    line-height: 1.25;
    font-weight: 950;
    margin-bottom: 4px;
  }

  .cake-fill-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .cake-fill-icon svg {
    width: 18px;
    height: 18px;
  }

  .cake-light-fill {
    margin-top: 26px;
    padding: 22px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.06);
  }

  .cake-light-fill h3 {
    margin: 0 0 10px;
    color: var(--cake-heading);
    font-size: 18px;
    line-height: 1.24;
    font-weight: 950;
    letter-spacing: -0.02em;
  }

  .cake-light-fill p {
    margin: 0;
    color: #5c6678;
    font-size: 14.2px;
    line-height: 1.72;
    font-weight: 500;
  }

  @media (max-width: 700px) {
    .cake-fill-copy,
    .cake-light-fill { margin-top: 20px; padding: 18px; border-radius: 20px; }
    .cake-fill-point { grid-template-columns: 1fr; }
    .cake-fill-icon { margin: 0 auto; }
  }


  /* ICON FIXES - correct cake service icons for all shared blocks */
  .cake-kicker::before {
    width: 18px;
    height: 18px;
    border-radius: 0;
    background: currentColor;
    box-shadow: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 9h16v11H4V9Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M3 6h18v3H3V6Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 6v14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 6c-1.9-3.2-5.8-2.2-5 .5.5 1.6 2.6 1.7 5-.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 6c1.9-3.2 5.8-2.2 5 .5-.5 1.6-2.6 1.7-5-.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 9h16v11H4V9Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M3 6h18v3H3V6Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 6v14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 6c-1.9-3.2-5.8-2.2-5 .5.5 1.6 2.6 1.7 5-.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 6c1.9-3.2 5.8-2.2 5 .5-.5 1.6-2.6 1.7-5-.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .cake-btn-icon,
  .cake-service-number svg,
  .cake-process-summary-item strong svg,
  .cake-feature-stat strong svg,
  .cake-why-proof-item strong svg {
    width: 24px;
    height: 24px;
    display: block;
    flex: 0 0 auto;
  }

  .cake-service-number {
    color: var(--cake-primary);
    font-size: 0;
  }

  .cake-service-number svg {
    width: 25px;
    height: 25px;
  }

  .cake-process-summary-item strong,
  .cake-feature-stat strong,
  .cake-why-proof-item strong {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    margin-bottom: 13px;
    font-size: 0;
    letter-spacing: 0;
  }

  .cake-process-summary-item strong {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.20);
  }

  .cake-feature-stat strong,
  .cake-why-proof-item strong {
    color: var(--cake-primary);
    background: radial-gradient(circle at 30% 20%, rgba(247, 183, 51, 0.22), transparent 42%), var(--cake-pink);
    border: 1px solid rgba(195, 31, 38, 0.12);
  }

  .cake-feature-stat,
  .cake-why-proof-item,
  .cake-process-summary-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .cake-btn .cake-btn-icon {
    width: 20px;
    height: 20px;
  }


  /* FLOWER SERVICE ICON UPDATE - icon update for section labels */
  .cake-kicker::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 8h4l1.6-2.5h4.8L16 8h4v11H4V8Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z' stroke='black' stroke-width='2'/%3E%3Cpath d='M18 11h.01' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 8h4l1.6-2.5h4.8L16 8h4v11H4V8Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z' stroke='black' stroke-width='2'/%3E%3Cpath d='M18 11h.01' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }



  /* =========================================================
     FULL PAGE DESIGN REFRESH - FLOWER SERVICE
     Applied to all sections except the last testimonial part.
     Keeps old EJS logic, modals, buttons, and content unchanged.
  ========================================================= */
  .cake-page {
    background:
      radial-gradient(circle at 6% 7%, rgba(195, 31, 38, 0.13), transparent 24%),
      radial-gradient(circle at 92% 10%, rgba(247, 183, 51, 0.12), transparent 26%),
      linear-gradient(180deg, #fffefe 0%, #fff6f6 34%, #ffffff 100%);
  }

  .cake-container {
    width: min(89%, 1480px);
  }

  .cake-title {
    font-weight: 850;
    letter-spacing: -0.045em;
  }

  .cake-subtitle {
    color: #5d6678;
    font-size: 16px;
    line-height: 1.78;
  }

  .cake-btn {
    min-height: 56px;
    padding: 0 28px;
    border-radius: 18px;
  }

  .cake-btn-primary {
    background: linear-gradient(135deg, #c31f26 0%, #8f141a 100%);
    box-shadow: 0 18px 42px rgba(195, 31, 38, 0.28);
  }

  .cake-btn-light {
    color: #8f141a;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(195, 31, 38, 0.18);
  }

  /* Hero: premium cake service landing style */
  .cake-hero {
    padding: 92px 0 76px;
    background:
      linear-gradient(135deg, rgba(16, 24, 40, 0.04), rgba(195, 31, 38, 0.035)),
      radial-gradient(circle at 78% 20%, rgba(247, 183, 51, 0.16), transparent 24%);
  }

  .cake-hero::before {
    inset: 22px 38px;
    border-radius: 34px;
    border-color: rgba(195, 31, 38, 0.12);
    background: rgba(255, 255, 255, 0.24);
  }

  .cake-hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 46px;
    padding: 24px;
    border-radius: 38px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(195, 31, 38, 0.13);
    box-shadow: 0 34px 92px rgba(16, 24, 40, 0.10);
    backdrop-filter: blur(14px);
  }

  .cake-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px 18px 34px 26px;
  }

  .cake-hero .cake-title {
    font-size: clamp(36px, 4.2vw, 82px);
    line-height: 1.03;
  }

  .cake-hero .cake-subtitle {
    max-width: 760px;
    font-size: 17px;
  }

  .cake-hero-card {
    padding: 0;
    border-radius: 34px;
    background: #111827;
    box-shadow: 0 30px 86px rgba(15, 23, 42, 0.20);
  }

  .cake-hero-card img {
    height: 560px;
    border-radius: 34px;
  }

  .cake-hero-card::after {
    inset: 0;
    border-radius: 34px;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 35%, rgba(15, 23, 42, 0.72) 100%),
      linear-gradient(135deg, rgba(195, 31, 38, 0.28), rgba(247, 183, 51, 0.08));
  }

  /* Services: formal card grid */
  .cake-services {
    padding: 96px 0 104px;
    background:
      radial-gradient(circle at 8% 12%, rgba(195, 31, 38, 0.08), transparent 24%),
      linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
  }

  .cake-services::before {
    top: 52px;
    width: min(89%, 1220px);
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.28), rgba(247, 183, 51, 0.24), transparent);
  }

  .cake-services-grid {
    gap: 20px;
  }

  .cake-service-card {
    min-height: 475px;
    border-radius: 26px;
    box-shadow: 0 24px 62px rgba(16, 24, 40, 0.13);
  }

  .cake-service-card::before {
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.08) 0%, rgba(15, 23, 42, 0.24) 45%, rgba(15, 23, 42, 0.90) 100%),
      linear-gradient(135deg, rgba(195, 31, 38, 0.20), transparent 62%);
  }

  .cake-service-card::after {
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(15, 23, 42, 0.38) 55%, rgba(15, 23, 42, 0.86) 100%);
  }

  .cake-service-number {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, #c31f26, #8f141a);
    border: 1px solid rgba(255, 255, 255, 0.28);
  }

  .cake-service-title-float {
    top: 90px;
    font-size: clamp(26px, 1.8vw, 34px);
    line-height: 1.03;
  }

  .cake-service-content {
    padding: 28px 24px 26px;
  }

  .cake-service-content h3 {
    font-size: 20px;
  }

  .cake-service-link {
    border-radius: 16px;
    background: #ffffff;
    color: #c31f26;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
  }

  .cake-service-link:hover {
    color: #c31f26;
    background: #fff3f3;
  }

  /* Process: clean executive workflow */
  .cake-process {
    padding: 104px 0;
    background:
      radial-gradient(circle at 88% 12%, rgba(247, 183, 51, 0.15), transparent 26%),
      linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
  }

  .cake-process::before {
    inset: 34px 42px;
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.46);
  }

  .cake-process-layout {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 24px;
  }

  .cake-process-intro {
    min-height: 590px;
    border-radius: 32px;
    padding: 42px;
    background:
      linear-gradient(135deg, rgba(18, 24, 38, 0.94), rgba(95, 15, 19, 0.96)),
      radial-gradient(circle at 10% 10%, rgba(247, 183, 51, 0.24), transparent 28%);
  }

  .cake-fill-copy,
  .cake-fill-point {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.16);
  }

  .cake-process-summary {
    gap: 12px;
  }

  .cake-process-summary-item {
    border-radius: 20px;
  }

  .cake-process-panel {
    border-radius: 32px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.92);
  }

  .cake-process-panel-head {
    border-radius: 24px;
  }

  .cake-process-card {
    grid-template-columns: 76px 1fr auto;
    min-height: 118px;
    border-radius: 24px;
  }

  .cake-process-icon {
    width: 62px;
    height: 62px;
    border-radius: 20px;
  }

  /* Feature: split production showcase */
  .cake-feature {
    padding: 104px 0;
    background:
      linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
  }

  .cake-feature-wrap {
    border-radius: 36px;
    padding: 16px;
    box-shadow: 0 34px 90px rgba(16, 24, 40, 0.11);
  }

  .cake-feature-copy {
    border-radius: 28px;
    padding: 46px;
    background:
      radial-gradient(circle at 16% 10%, rgba(247, 183, 51, 0.18), transparent 24%),
      linear-gradient(135deg, #5f0f13 0%, #8f141a 52%, #101828 100%);
  }

  .cake-mini-card {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.11);
  }

  .cake-feature-image,
  .cake-feature-image img {
    min-height: 590px;
  }

  .cake-feature-image {
    border-radius: 28px;
  }

  .cake-feature-badge {
    border-radius: 24px;
  }

  .cake-feature-stat {
    border-radius: 22px;
    min-height: 112px;
  }

  /* Why: modern trust block */
  .cake-why {
    padding: 104px 0;
    background:
      radial-gradient(circle at 12% 12%, rgba(195, 31, 38, 0.08), transparent 24%),
      linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
  }

  .cake-why-shell {
    border-radius: 36px;
    box-shadow: 0 32px 84px rgba(16, 24, 40, 0.10);
  }

  .cake-why-hero {
    gap: 24px;
    padding: 24px;
  }

  .cake-why-copy {
    border-radius: 28px;
    min-height: 500px;
    padding: 42px;
  }

  .cake-why-proof {
    gap: 12px;
  }

  .cake-why-proof-item {
    border-radius: 20px;
  }

  .cake-why-image {
    border-radius: 28px;
  }

  .cake-why-floating {
    border-radius: 24px;
    background: rgba(16, 24, 40, 0.76);
  }

  .cake-why-list {
    gap: 14px;
    padding: 0 24px 24px;
  }

  .cake-why-card {
    min-height: 230px;
    border-radius: 24px;
  }

  .cake-why-icon {
    border-radius: 18px;
  }

  /* Keep the last part unchanged */
  .cake-testimonial,
  .cake-testimonial * {
    /* no new design override for the final testimonial section */
  }

  @media (max-width: 1100px) {
    .cake-hero-grid,
    .cake-process-layout,
    .cake-feature-wrap,
    .cake-why-hero {
      grid-template-columns: 1fr;
    }

    .cake-services-grid,
    .cake-why-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 700px) {
    .cake-container { width: 92%; }
    .cake-hero-grid { padding: 14px; border-radius: 28px; }
    .cake-hero-copy { padding: 24px 10px; text-align: center; }
    .cake-hero-actions { justify-content: center; }
    .cake-hero-card img { height: 390px; }
    .cake-services-grid,
    .cake-why-list { grid-template-columns: 1fr; }
    .cake-service-card { min-height: 440px; }
    .cake-process-intro,
    .cake-feature-copy,
    .cake-why-copy { padding: 28px 20px; border-radius: 24px; }
    .cake-feature-image,
    .cake-feature-image img { min-height: 390px; }
  }



  /* HERO UPDATE - cake service design similar to shared reference, not exact copy */
  .cake-cake-hero-v2 {
    position: relative;
    padding: 92px 0 74px;
    overflow: hidden;
    background:
      linear-gradient(90deg, rgba(195,31,38,0.10) 0%, rgba(255,255,255,0.96) 43%, rgba(247,183,51,0.12) 100%),
      linear-gradient(rgba(195,31,38,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(195,31,38,0.035) 1px, transparent 1px);
    background-size: auto, 32px 32px, 32px 32px;
  }

  .cake-cake-hero-v2::before {
    display: none;
  }

  .cake-hero-word {
    position: absolute;
    left: 4%;
    top: 18px;
    z-index: 0;
    color: rgba(195,31,38,0.055);
    font-size: clamp(58px, 9vw, 168px);
    line-height: .85;
    font-weight: 950;
    letter-spacing: -.075em;
    white-space: nowrap;
    pointer-events: none;
    text-transform: uppercase;
  }

  .cake-hero-v2-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 42px;
    align-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .cake-hero-v2-copy {
    padding: 38px 0 34px;
    max-width: 760px;
  }

  .cake-cake-hero-v2 .cake-kicker {
    color: #b01821;
    background: rgba(255,255,255,.58);
    border-color: rgba(195,31,38,.20);
    box-shadow: 0 14px 34px rgba(195,31,38,.08);
  }

  .cake-cake-hero-v2 .cake-title {
    max-width: 790px;
    margin-top: 18px;
    color: #07152d;
    font-size: clamp(38px, 4vw, 74px);
    line-height: 1.03;
    letter-spacing: -.058em;
    font-weight: 950;
  }

  .cake-cake-hero-v2 .cake-highlight {
    color: #d42d35;
    font-weight: 450;
    text-decoration: underline;
    text-decoration-color: rgba(247,183,51,.72);
    text-underline-offset: 7px;
    text-decoration-thickness: 4px;
  }

  .cake-cake-hero-v2 .cake-subtitle {
    max-width: 720px;
    margin-top: 26px;
    color: #33445f;
    font-size: 17px;
    line-height: 1.85;
    font-weight: 470;
  }

  .cake-hero-v2-actions {
    margin-top: 34px;
    gap: 14px;
  }

  .cake-cake-hero-v2 .cake-btn {
    min-height: 58px;
    border-radius: 999px;
    padding: 0 27px;
    font-size: 14px;
    box-shadow: 0 18px 42px rgba(15,23,42,.10);
  }

  .cake-cake-hero-v2 .cake-btn-primary {
    background: linear-gradient(135deg, #c31f26, #92141b);
    box-shadow: 0 20px 42px rgba(195,31,38,.25);
  }

  .cake-cake-hero-v2 .cake-btn-light {
    background: rgba(255,255,255,.76);
    border: 1px solid rgba(195,31,38,.18);
    color: #b01821;
  }

  .cake-hero-v2-pills {
    margin-top: 30px;
    gap: 13px;
  }

  .cake-hero-v2-pills .cake-trust-pill {
    min-height: 48px;
    padding: 0 16px;
    background: rgba(255,255,255,.72);
    border-color: rgba(195,31,38,.14);
    color: #17243b;
    box-shadow: 0 16px 34px rgba(15,23,42,.07);
  }

  .cake-hero-v2-pills .cake-trust-pill svg {
    width: 18px;
    height: 18px;
  }

  .cake-hero-v2-media {
    min-height: 560px;
    position: relative;
  }

  .cake-hero-v2-card {
    position: absolute;
    right: 26px;
    top: 0;
    width: calc(100% - 38px);
    height: 548px;
    padding: 12px;
    overflow: hidden;
    border-radius: 38px;
    background: #ffffff;
    box-shadow: 0 34px 86px rgba(15,23,42,.17);
  }

  .cake-hero-v2-card img {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 29px;
    filter: saturate(1.04) contrast(1.02);
  }

  .cake-hero-v2-card::after {
    inset: 12px;
    border-radius: 29px;
    background:
      linear-gradient(180deg, rgba(12,21,38,0.06) 0%, rgba(12,21,38,0.14) 44%, rgba(12,21,38,0.64) 100%),
      linear-gradient(135deg, rgba(195,31,38,.18), transparent 56%);
  }

  .cake-hero-perfect {
    position: absolute;
    right: 0;
    top: 44px;
    z-index: 5;
    width: 205px;
    padding: 21px 20px;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, #b01821, #7d1016);
    box-shadow: 0 26px 50px rgba(125,16,22,.28);
  }

  .cake-hero-perfect small {
    display: block;
    margin-bottom: 10px;
    color: rgba(255,255,255,.86);
    font-size: 12px;
    font-weight: 700;
  }

  .cake-hero-perfect strong {
    display: block;
    color: #ffffff;
    font-size: 23px;
    line-height: 1.02;
    letter-spacing: -.03em;
    font-weight: 950;
  }

  .cake-hero-info-card {
    position: absolute;
    left: 0;
    bottom: 22px;
    z-index: 5;
    width: min(430px, 82%);
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 16px;
    align-items: center;
    padding: 22px;
    border-radius: 25px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(195,31,38,.12);
    box-shadow: 0 26px 68px rgba(15,23,42,.16);
    backdrop-filter: blur(14px);
  }

  .cake-hero-info-icon {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, #c31f26, #7d1016);
    box-shadow: 0 18px 34px rgba(195,31,38,.25);
  }

  .cake-hero-info-icon svg {
    width: 36px;
    height: 36px;
  }

  .cake-hero-info-card strong {
    display: block;
    margin-bottom: 8px;
    color: #c31f26;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -.035em;
    font-weight: 950;
  }

  .cake-hero-info-card span {
    display: block;
    color: #536073;
    font-size: 13.8px;
    line-height: 1.62;
    font-weight: 560;
  }

  @media (max-width: 1100px) {
    .cake-hero-v2-grid { grid-template-columns: 1fr; gap: 26px; }
    .cake-hero-v2-copy { max-width: 100%; text-align: center; padding-top: 20px; }
    .cake-hero-v2-actions, .cake-hero-v2-pills { justify-content: center; }
    .cake-hero-v2-media { min-height: 560px; }
    .cake-hero-v2-card { left: 36px; right: 36px; width: auto; }
    .cake-hero-perfect { right: 8px; }
    .cake-hero-info-card { left: 8px; }
  }

  @media (max-width: 700px) {
    .cake-cake-hero-v2 { padding: 58px 0 56px; background-size: auto, 24px 24px, 24px 24px; }
    .cake-hero-word { top: 28px; left: 3%; font-size: 58px; opacity: .75; }
    .cake-cake-hero-v2 .cake-title { font-size: clamp(34px, 10vw, 48px); }
    .cake-cake-hero-v2 .cake-subtitle { font-size: 15.5px; line-height: 1.75; }
    .cake-hero-v2-copy { padding: 8px 0 0; }
    .cake-hero-v2-media { min-height: 510px; }
    .cake-hero-v2-card { left: 0; right: 0; top: 0; width: 100%; height: 390px; padding: 8px; border-radius: 28px; }
    .cake-hero-v2-card img { border-radius: 21px; }
    .cake-hero-v2-card::after { inset: 8px; border-radius: 21px; }
    .cake-hero-perfect { top: 16px; right: 12px; width: 168px; padding: 16px; border-radius: 20px; }
    .cake-hero-perfect strong { font-size: 19px; }
    .cake-hero-info-card { left: 12px; right: 12px; bottom: 0; width: auto; grid-template-columns: 1fr; text-align: center; padding: 20px; }
    .cake-hero-info-icon { margin: 0 auto; width: 66px; height: 66px; border-radius: 22px; }
    .cake-hero-info-card strong { font-size: 24px; }
  }



  /* FLOWER SERVICE DESIGN UPGRADE - keeps existing structure, changes the visual mood */
  :root {
    --cake-primary: #c31f26;
    --cake-primary-dark: #97171f;
    --cake-primary-deep: #5d1118;
    --cake-gold: #f7b733;
    --cake-cream: #fff7ea;
    --cake-pink: #fff0f2;
    --cake-border: rgba(195, 31, 38, 0.14);
  }

  .cake-page {
    background:
      radial-gradient(circle at 7% 6%, rgba(247, 183, 51, 0.20), transparent 26%),
      radial-gradient(circle at 94% 2%, rgba(195, 31, 38, 0.12), transparent 24%),
      linear-gradient(180deg, #fffaf5 0%, #fff5f6 45%, #ffffff 100%);
  }

  .cake-cake-hero-v2 {
    background:
      radial-gradient(circle at 12% 20%, rgba(247, 183, 51, .18), transparent 30%),
      linear-gradient(135deg, #fff9f0 0%, #fff2f3 55%, #ffffff 100%);
  }

  .cake-hero-word {
    color: rgba(195, 31, 38, 0.08) !important;
    letter-spacing: .08em;
  }

  .cake-hero-v2-card {
    background: linear-gradient(135deg, #ffffff, #fff1f3);
    box-shadow: 0 34px 90px rgba(195, 31, 38, 0.18);
  }

  .cake-hero-v2-card::after,
  .cake-service-card::after,
  .cake-why-image::after {
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 18%, rgba(61, 8, 15, 0.70) 100%),
      linear-gradient(135deg, rgba(247, 183, 51, 0.18), rgba(195, 31, 38, 0.18));
  }

  .cake-service-card {
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 28px 70px rgba(111, 25, 30, 0.18);
  }

  .cake-service-number,
  .cake-process-icon,
  .cake-why-icon,
  .cake-benefit-icon {
    background: radial-gradient(circle at 30% 18%, rgba(247, 183, 51, .30), transparent 42%), #fff7f8;
  }

  .cake-service-title-float {
    max-width: 88%;
    padding: 4px 0;
  }

  .cake-process-intro,
  .cake-feature-copy,
  .cake-testimonial-content {
    background:
      radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.16), transparent 30%),
      radial-gradient(circle at 92% 12%, rgba(247, 183, 51, 0.24), transparent 28%),
      linear-gradient(135deg, #5d1118, #c31f26 58%, #8f141a);
  }


  /* DIFFERENT SERVICES DESIGN - editorial mosaic layout */
  .cake-services-editorial {
    position: relative;
    padding: 98px 0 108px;
    background:
      radial-gradient(circle at 6% 10%, rgba(247, 183, 51, 0.18), transparent 22%),
      radial-gradient(circle at 94% 20%, rgba(195, 31, 38, 0.10), transparent 26%),
      linear-gradient(180deg, #ffffff 0%, #fff7f4 100%);
  }

  .cake-services-editorial::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 54px;
    width: min(78%, 1180px);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.22), rgba(247, 183, 51, 0.26), transparent);
  }

  .cake-services-head {
    max-width: none;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 36px;
    align-items: end;
    margin: 0 0 42px;
    text-align: left;
  }

  .cake-services-head .cake-title {
    max-width: 720px;
    font-size: clamp(32px, 2.8vw, 64px);
    line-height: 1.02;
  }

  .cake-services-head .cake-subtitle {
    max-width: 720px;
    margin: 0;
    padding: 22px 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 18px 48px rgba(16, 24, 40, 0.06);
  }

  .cake-services-mosaic {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    gap: 24px;
    align-items: stretch;
  }

  .cake-service-stack {
    display: grid;
    gap: 18px;
  }

  .cake-services-editorial .cake-service-card {
    position: relative;
    overflow: hidden;
    min-height: 0;
    padding: 0;
    color: var(--cake-heading);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(195, 31, 38, 0.13);
    border-radius: 34px;
    box-shadow: 0 28px 78px rgba(16, 24, 40, 0.10);
    transition: 0.28s ease;
  }

  .cake-services-editorial .cake-service-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 34px 86px rgba(195, 31, 38, 0.16);
  }

  .cake-services-editorial .cake-service-card::before,
  .cake-services-editorial .cake-service-card::after {
    display: none;
  }

  .cake-service-featured {
    display: grid;
    grid-template-rows: 390px auto;
  }

  .cake-service-compact {
    display: grid;
    grid-template-columns: 188px 1fr;
    min-height: 202px;
  }

  .cake-services-editorial .cake-service-media {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    background: #fff0f2;
  }

  .cake-services-editorial .cake-service-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 35%, rgba(95, 15, 19, 0.58) 100%),
      linear-gradient(135deg, rgba(247, 183, 51, 0.14), rgba(195, 31, 38, 0.10));
    pointer-events: none;
  }

  .cake-services-editorial .cake-service-bg {
    position: relative;
    inset: auto;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.01);
    transition: 0.45s ease;
  }

  .cake-services-editorial .cake-service-card:hover .cake-service-bg {
    transform: scale(1.07);
  }

  .cake-service-ribbon {
    position: absolute;
    left: 24px;
    top: 24px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(95, 15, 19, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.26);
    backdrop-filter: blur(12px);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .cake-service-ribbon::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cake-gold);
  }

  .cake-services-editorial .cake-service-body {
    position: relative;
    z-index: 2;
    padding: 30px;
  }

  .cake-service-featured .cake-service-body {
    padding: 34px;
  }

  .cake-service-topline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
  }

  .cake-services-editorial .cake-service-number {
    position: static;
    z-index: auto;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    color: var(--cake-primary);
    background:
      radial-gradient(circle at 30% 16%, rgba(247, 183, 51, 0.30), transparent 42%),
      #fff4f5;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.60), 0 12px 28px rgba(195, 31, 38, 0.10);
    font-size: 0;
  }

  .cake-services-editorial .cake-service-number svg {
    width: 24px;
    height: 24px;
  }

  .cake-service-label {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    color: var(--cake-primary);
    background: rgba(195, 31, 38, 0.07);
    border: 1px solid rgba(195, 31, 38, 0.10);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .cake-services-editorial .cake-service-body h3 {
    margin: 0 0 12px;
    color: var(--cake-heading);
    font-size: clamp(23px, 2vw, 38px);
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: 950;
    text-shadow: none;
  }

  .cake-service-compact .cake-service-body h3 {
    font-size: clamp(20px, 1.35vw, 28px);
  }

  .cake-services-editorial .cake-service-body p {
    margin: 0;
    color: #536073;
    font-size: 14.5px;
    line-height: 1.68;
    font-weight: 500;
    text-shadow: none;
  }

  .cake-service-featured .cake-service-body p {
    max-width: 640px;
    font-size: 15.5px;
  }

  .cake-service-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
  }

  .cake-service-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 13px;
    border-radius: 999px;
    color: #344054;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.05);
    font-size: 12.5px;
    font-weight: 850;
  }

  .cake-services-editorial .cake-service-link {
    margin-top: 22px;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary), var(--cake-primary-dark));
    box-shadow: 0 16px 34px rgba(195, 31, 38, 0.22);
  }

  .cake-services-editorial .cake-service-link:hover {
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary-dark), var(--cake-primary-deep));
  }

  @media (max-width: 1100px) {
    .cake-services-head,
    .cake-services-mosaic {
      grid-template-columns: 1fr;
    }

    .cake-services-head {
      text-align: center;
    }

    .cake-services-head .cake-title,
    .cake-services-head .cake-subtitle {
      margin-left: auto;
      margin-right: auto;
    }
  }

  @media (max-width: 700px) {
    .cake-services-editorial {
      padding: 62px 0;
    }

    .cake-services-head {
      gap: 18px;
      margin-bottom: 28px;
    }

    .cake-services-head .cake-subtitle {
      padding: 18px;
      text-align: center;
    }

    .cake-service-featured,
    .cake-service-compact {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
    }

    .cake-service-featured .cake-service-media,
    .cake-service-compact .cake-service-media {
      height: 255px;
    }

    .cake-services-editorial .cake-service-body,
    .cake-service-featured .cake-service-body {
      padding: 24px 20px;
      text-align: center;
    }

    .cake-service-topline,
    .cake-service-meta {
      justify-content: center;
    }
  }




  /* MORE FORMAL SERVICES DESIGN - clean executive package cards */
  .cake-services-formal {
    padding: 108px 0;
    background:
      linear-gradient(180deg, #ffffff 0%, #fffafa 100%) !important;
  }

  .cake-services-formal::before {
    display: none !important;
  }

  .cake-formal-services-shell {
    position: relative;
    overflow: hidden;
    padding: 34px;
    border-radius: 44px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.10);
    box-shadow: 0 34px 95px rgba(16, 24, 40, 0.10);
  }

  .cake-formal-services-shell::before {
    content: "";
    position: absolute;
    left: 34px;
    right: 34px;
    top: 0;
    height: 5px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, var(--cake-primary), var(--cake-gold), var(--cake-primary));
  }

  .cake-formal-services-head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 42px;
    align-items: end;
    margin-bottom: 34px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(195, 31, 38, 0.10);
  }

  .cake-formal-services-head .cake-title {
    max-width: 760px;
    font-size: clamp(32px, 2.7vw, 62px);
    line-height: 1.03;
    letter-spacing: -0.048em;
  }

  .cake-formal-services-head .cake-subtitle {
    margin: 0;
    max-width: 760px;
    color: #5f6b7c;
    font-size: 15.5px;
    line-height: 1.78;
  }

  .cake-formal-service-table {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
  }

  .cake-services-formal .cake-formal-service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 560px;
    color: var(--cake-heading);
    background: #ffffff;
    border: 1px solid rgba(16, 24, 40, 0.09);
    border-radius: 28px;
    box-shadow: 0 18px 45px rgba(16, 24, 40, 0.07);
    transition: .28s ease;
  }

  .cake-services-formal .cake-formal-service-card::before,
  .cake-services-formal .cake-formal-service-card::after {
    display: none !important;
  }

  .cake-services-formal .cake-formal-service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(195, 31, 38, 0.24);
    box-shadow: 0 28px 70px rgba(195, 31, 38, 0.13);
  }

  .cake-formal-featured {
    border-color: rgba(195, 31, 38, 0.24) !important;
  }

  .cake-formal-image {
    position: relative;
    height: 230px;
    overflow: hidden;
    background: #fff1f3;
  }

  .cake-formal-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(16,24,40,0.02) 0%, rgba(16,24,40,0.26) 100%);
    pointer-events: none;
  }

  .cake-services-formal .cake-service-bg {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.01);
    transition: .45s ease;
  }

  .cake-services-formal .cake-formal-service-card:hover .cake-service-bg {
    transform: scale(1.06);
  }

  .cake-formal-tag {
    position: absolute;
    left: 18px;
    top: 18px;
    z-index: 2;
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 13px;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(95, 15, 19, 0.82);
    border: 1px solid rgba(255,255,255,0.28);
    backdrop-filter: blur(10px);
    font-size: 10.5px;
    font-weight: 950;
    letter-spacing: .09em;
    text-transform: uppercase;
  }

  .cake-formal-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 26px 24px 24px;
  }

  .cake-formal-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
  }

  .cake-services-formal .cake-service-number {
    position: static !important;
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    border-radius: 16px;
    color: var(--cake-primary);
    background: #fff7f8;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: none;
    font-size: 0;
  }

  .cake-services-formal .cake-service-number svg {
    width: 24px;
    height: 24px;
  }

  .cake-formal-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    color: #7a2630;
    background: rgba(195, 31, 38, 0.06);
    border: 1px solid rgba(195, 31, 38, 0.10);
    font-size: 10.5px;
    font-weight: 950;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .cake-formal-content h3 {
    margin: 0 0 12px;
    color: var(--cake-heading);
    font-size: 25px;
    line-height: 1.12;
    letter-spacing: -0.03em;
    font-weight: 950;
    text-shadow: none;
  }

  .cake-formal-content p {
    margin: 0;
    color: #5b6678;
    font-size: 14.2px;
    line-height: 1.65;
    font-weight: 500;
    text-shadow: none;
  }

  .cake-formal-list {
    display: grid;
    gap: 10px;
    margin: 20px 0 0;
    padding: 20px 0 0;
    list-style: none;
    border-top: 1px solid rgba(16, 24, 40, 0.08);
  }

  .cake-formal-list li {
    position: relative;
    padding-left: 22px;
    color: #344054;
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 750;
  }

  .cake-formal-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cake-primary);
    box-shadow: 0 0 0 4px rgba(195, 31, 38, 0.08);
  }

  .cake-services-formal .cake-service-link {
    margin-top: auto;
    width: 100%;
    min-height: 48px;
    border-radius: 16px;
    color: var(--cake-primary);
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.20);
    box-shadow: none;
  }

  .cake-services-formal .cake-service-link:hover {
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary), var(--cake-primary-dark));
    border-color: transparent;
  }

  @media (max-width: 1200px) {
    .cake-formal-service-table {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cake-services-formal .cake-formal-service-card {
      min-height: 530px;
    }
  }

  @media (max-width: 800px) {
    .cake-services-formal { padding: 64px 0; }
    .cake-formal-services-shell { padding: 22px; border-radius: 30px; }
    .cake-formal-services-head { grid-template-columns: 1fr; gap: 16px; text-align: center; }
    .cake-formal-services-head .cake-title,
    .cake-formal-services-head .cake-subtitle { margin-left: auto; margin-right: auto; }
    .cake-formal-service-table { grid-template-columns: 1fr; }
    .cake-services-formal .cake-formal-service-card { min-height: auto; }
    .cake-formal-image { height: 245px; }
    .cake-formal-content { text-align: left; }
  }



  /* ADVANCED FORMAL SERVICES DESIGN - executive service portfolio */
  .cake-services-advanced {
    position: relative;
    padding: 112px 0 !important;
    background:
      radial-gradient(circle at 7% 10%, rgba(195, 31, 38, 0.07), transparent 28%),
      radial-gradient(circle at 92% 8%, rgba(247, 183, 51, 0.10), transparent 25%),
      linear-gradient(180deg, #ffffff 0%, #fff9f9 100%) !important;
  }

  .cake-services-advanced::before {
    display: none !important;
  }

  .cake-advanced-service-shell {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border-radius: 46px;
    background:
      linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,250,250,.92));
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 34px 100px rgba(16, 24, 40, 0.11);
  }

  .cake-advanced-service-shell::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 34px;
    border: 1px solid rgba(195, 31, 38, 0.07);
    pointer-events: none;
  }

  .cake-advanced-service-shell::after {
    content: "FLOWER SERVICE";
    position: absolute;
    right: 34px;
    top: 18px;
    color: rgba(195, 31, 38, 0.045);
    font-size: clamp(58px, 8vw, 142px);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.08em;
    pointer-events: none;
  }

  .cake-advanced-service-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 22px;
    align-items: stretch;
  }

  .cake-advanced-service-intro {
    position: relative;
    overflow: hidden;
    min-height: 720px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px;
    border-radius: 34px;
    color: #ffffff;
    background:
      radial-gradient(circle at 16% 8%, rgba(255,255,255,.16), transparent 28%),
      radial-gradient(circle at 96% 8%, rgba(247,183,51,.22), transparent 26%),
      linear-gradient(145deg, var(--cake-primary-deep), var(--cake-primary-dark) 54%, #3c070b 100%);
    box-shadow: 0 28px 72px rgba(95, 15, 19, 0.24);
  }

  .cake-advanced-service-intro::before {
    content: "";
    position: absolute;
    right: -92px;
    bottom: -92px;
    width: 285px;
    height: 285px;
    border-radius: 50%;
    border: 44px solid rgba(255,255,255,.07);
  }

  .cake-advanced-service-intro::after {
    content: "✦";
    position: absolute;
    right: 42px;
    top: 38px;
    color: rgba(255,255,255,.13);
    font-size: 76px;
    line-height: 1;
  }

  .cake-advanced-service-intro > * {
    position: relative;
    z-index: 1;
  }

  .cake-advanced-service-intro .cake-kicker {
    color: #ffffff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.22);
  }

  .cake-advanced-service-intro .cake-kicker::before {
    background: #ffffff;
    box-shadow: 0 0 0 6px rgba(255,255,255,.13);
  }

  .cake-advanced-service-intro .cake-title {
    margin-top: 20px;
    color: #ffffff;
    font-size: clamp(34px, 3vw, 64px);
    line-height: 1.02;
    letter-spacing: -0.055em;
  }

  .cake-advanced-service-intro .cake-subtitle {
    color: rgba(255,255,255,.82);
    font-size: 15.5px;
    line-height: 1.82;
  }

  .cake-advanced-checklist {
    display: grid;
    gap: 12px;
    margin-top: 30px;
  }

  .cake-advanced-check {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.15);
  }

  .cake-advanced-check-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #ffffff;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
  }

  .cake-advanced-check-icon svg { width: 22px; height: 22px; }

  .cake-advanced-check strong {
    display: block;
    color: #ffffff;
    font-size: 14.5px;
    line-height: 1.25;
    font-weight: 950;
    margin-bottom: 4px;
  }

  .cake-advanced-check span {
    display: block;
    color: rgba(255,255,255,.72);
    font-size: 12.8px;
    line-height: 1.5;
    font-weight: 600;
  }

  .cake-advanced-service-note {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 16px;
    align-items: center;
    margin-top: 34px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255,255,255,.94);
    color: var(--cake-heading);
    box-shadow: 0 20px 44px rgba(0,0,0,.14);
  }

  .cake-advanced-note-mark {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary), var(--cake-primary-deep));
  }

  .cake-advanced-note-mark svg { width: 32px; height: 32px; }

  .cake-advanced-service-note strong {
    display: block;
    color: var(--cake-primary);
    font-size: 20px;
    line-height: 1.15;
    font-weight: 950;
    margin-bottom: 6px;
  }

  .cake-advanced-service-note span {
    display: block;
    color: #536073;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 650;
  }

  .cake-advanced-service-area {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
  }

  .cake-advanced-service-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 28px 30px;
    border-radius: 30px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.10);
    box-shadow: 0 18px 46px rgba(16,24,40,.065);
  }

  .cake-advanced-service-head h3 {
    margin: 0 0 8px;
    color: var(--cake-heading);
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: 950;
  }

  .cake-advanced-service-head p {
    margin: 0;
    max-width: 720px;
    color: #5f6b7c;
    font-size: 14.5px;
    line-height: 1.65;
    font-weight: 500;
  }

  .cake-advanced-head-badge {
    display: inline-flex;
    min-width: 116px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary), var(--cake-primary-dark));
    box-shadow: 0 16px 32px rgba(195,31,38,.23);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .cake-advanced-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .cake-services-advanced .cake-advanced-card {
    position: relative;
    display: grid;
    grid-template-columns: 185px 1fr;
    min-height: 318px;
    overflow: hidden;
    border-radius: 30px;
    color: var(--cake-heading);
    background: #ffffff;
    border: 1px solid rgba(16,24,40,.09);
    box-shadow: 0 20px 52px rgba(16,24,40,.075);
    transition: .28s ease;
  }

  .cake-services-advanced .cake-advanced-card::before,
  .cake-services-advanced .cake-advanced-card::after {
    display: none !important;
  }

  .cake-services-advanced .cake-advanced-card:hover {
    transform: translateY(-7px);
    border-color: rgba(195,31,38,.25);
    box-shadow: 0 30px 78px rgba(195,31,38,.14);
  }

  .cake-advanced-card-media {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    background: #fff1f3;
  }

  .cake-advanced-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,.42) 100%),
      linear-gradient(135deg, rgba(195,31,38,.22), transparent 58%);
    pointer-events: none;
  }

  .cake-services-advanced .cake-service-bg {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: 100%;
    min-height: 318px;
    display: block;
    object-fit: cover;
    transform: scale(1.02);
    transition: .45s ease;
  }

  .cake-services-advanced .cake-advanced-card:hover .cake-service-bg {
    transform: scale(1.08);
  }

  .cake-advanced-card-label {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(95,15,19,.78);
    border: 1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(12px);
    font-size: 10.5px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .cake-advanced-card-body {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 24px;
  }

  .cake-advanced-card-body::before {
    content: "";
    position: absolute;
    left: 0;
    top: 24px;
    bottom: 24px;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(180deg, var(--cake-primary), var(--cake-gold));
  }

  .cake-advanced-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }

  .cake-services-advanced .cake-service-number {
    position: static !important;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 18px;
    color: var(--cake-primary);
    background:
      radial-gradient(circle at 28% 20%, rgba(247,183,51,.22), transparent 42%),
      #fff7f8;
    border: 1px solid rgba(195,31,38,.12);
    box-shadow: inset 0 0 0 6px rgba(255,255,255,.68);
    font-size: 0;
  }

  .cake-services-advanced .cake-service-number svg { width: 25px; height: 25px; }

  .cake-advanced-package-code {
    color: #7a2630;
    background: rgba(195,31,38,.06);
    border: 1px solid rgba(195,31,38,.10);
    padding: 8px 11px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .cake-advanced-card-body h3 {
    margin: 0 0 10px;
    color: var(--cake-heading);
    font-size: 24px;
    line-height: 1.13;
    letter-spacing: -0.035em;
    font-weight: 950;
    text-shadow: none;
  }

  .cake-advanced-card-body p {
    margin: 0;
    color: #5b6678;
    font-size: 13.9px;
    line-height: 1.62;
    font-weight: 500;
    text-shadow: none;
  }

  .cake-advanced-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 18px 0 20px;
    padding: 0;
    list-style: none;
  }

  .cake-advanced-features li {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 12px;
    color: #344054;
    background: #fff8f8;
    border: 1px solid rgba(195,31,38,.08);
    font-size: 12px;
    line-height: 1.25;
    font-weight: 800;
  }

  .cake-advanced-features li::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--cake-primary);
    box-shadow: 0 0 0 4px rgba(195,31,38,.08);
  }

  .cake-services-advanced .cake-service-link {
    margin-top: auto;
    width: fit-content;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--cake-primary), var(--cake-primary-dark));
    border: 0;
    box-shadow: 0 14px 28px rgba(195,31,38,.22);
  }

  .cake-services-advanced .cake-service-link:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(195,31,38,.32);
  }

  @media (max-width: 1280px) {
    .cake-advanced-service-layout { grid-template-columns: 1fr; }
    .cake-advanced-service-intro { min-height: auto; }
  }

  @media (max-width: 920px) {
    .cake-services-advanced { padding: 68px 0 !important; }
    .cake-advanced-service-shell { padding: 14px; border-radius: 32px; }
    .cake-advanced-service-shell::before { inset: 12px; border-radius: 24px; }
    .cake-advanced-service-intro { padding: 32px 22px; border-radius: 26px; }
    .cake-advanced-service-head { grid-template-columns: 1fr; text-align: center; padding: 24px 20px; }
    .cake-advanced-head-badge { margin: 0 auto; }
    .cake-advanced-service-grid { grid-template-columns: 1fr; }
  }

  @media (max-width: 650px) {
    .cake-services-advanced .cake-advanced-card { grid-template-columns: 1fr; }
    .cake-advanced-card-media { min-height: 250px; }
    .cake-services-advanced .cake-service-bg { min-height: 250px; }
    .cake-advanced-card-body { padding: 24px 20px; }
    .cake-advanced-features { grid-template-columns: 1fr; }
    .cake-advanced-service-note { grid-template-columns: 1fr; text-align: center; }
    .cake-advanced-note-mark { margin: 0 auto; }
  }



  /* PREMIUM CATALOG SERVICES DESIGN - like shared reference, formal advanced cards */
  .cake-services-catalog {
    position: relative;
    padding: 86px 0 96px !important;
    background:
      radial-gradient(circle at 12% 8%, rgba(195, 31, 38, 0.035), transparent 25%),
      radial-gradient(circle at 86% 6%, rgba(247, 183, 51, 0.07), transparent 23%),
      linear-gradient(180deg, #ffffff 0%, #fffdfc 60%, #fff8f8 100%) !important;
  }

  .cake-services-catalog::before {
    display: none !important;
  }

  .cake-catalog-head {
    max-width: 930px;
    margin: 0 auto 58px;
    text-align: center;
  }

  .cake-catalog-head .cake-kicker {
    background: #fff2f3;
    border: 1px solid rgba(195, 31, 38, 0.18);
    box-shadow: 0 10px 28px rgba(195, 31, 38, 0.06);
  }

  .cake-catalog-head .cake-kicker::before {
    width: 8px;
    height: 8px;
  }

  .cake-catalog-head .cake-title {
    max-width: 980px;
    margin: 22px auto 0;
    font-size: clamp(36px, 3.15vw, 72px);
    line-height: .98;
    letter-spacing: -0.065em;
    font-weight: 950;
  }

  .cake-catalog-head .cake-subtitle {
    max-width: 760px;
    margin: 18px auto 0;
    color: #5f6b7c;
    font-size: 16px;
    line-height: 1.8;
  }

  .cake-catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
  }

  .cake-catalog-card {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    border-radius: 28px;
    color: #ffffff;
    background:
      radial-gradient(circle at 22% 14%, rgba(255,255,255,.13), transparent 27%),
      linear-gradient(145deg, #bd1722 0%, #78111a 48%, #1d1024 100%);
    box-shadow: 0 26px 68px rgba(45, 15, 24, 0.18);
    isolation: isolate;
    transition: .28s ease;
  }

  .cake-catalog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 34px 84px rgba(195, 31, 38, 0.22);
  }

  .cake-catalog-card::before {
    content: "";
    position: absolute;
    inset: 12px;
    z-index: 5;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    pointer-events: none;
  }

  .cake-catalog-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
      linear-gradient(180deg, rgba(69, 4, 11, 0.28) 0%, rgba(69, 4, 11, 0.10) 37%, rgba(18, 9, 26, 0.92) 100%),
      linear-gradient(90deg, rgba(255,255,255,.08), transparent 22%, rgba(0,0,0,.12));
    pointer-events: none;
  }

  .cake-catalog-bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 128px;
    z-index: 1;
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
    opacity: .95;
    transform: scale(1.03);
    filter: saturate(1.06) contrast(1.02);
    transition: .45s ease;
  }

  .cake-catalog-card:hover .cake-catalog-bg {
    transform: scale(1.09);
  }

  .cake-catalog-card:nth-child(1) .cake-catalog-bg { object-position: center 48%; }
  .cake-catalog-card:nth-child(2) .cake-catalog-bg { object-position: center 50%; }
  .cake-catalog-card:nth-child(3) .cake-catalog-bg { object-position: center 55%; }
  .cake-catalog-card:nth-child(4) .cake-catalog-bg { object-position: center 55%; }

  .cake-catalog-number {
    position: absolute;
    left: 24px;
    top: 24px;
    z-index: 6;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--cake-primary);
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 14px 28px rgba(0,0,0,.13);
    font-size: 14px;
    font-weight: 850;
  }

  .cake-catalog-ornament {
    position: absolute;
    left: 36%;
    top: 62px;
    z-index: 6;
    width: 84px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(247, 183, 51, .68), transparent);
  }

  .cake-catalog-ornament::before {
    content: "✦";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: rgba(247, 183, 51, .86);
    font-size: 10px;
    line-height: 1;
    background: rgba(116, 13, 22, .86);
    padding: 0 7px;
  }

  .cake-catalog-big-title {
    position: absolute;
    left: 54px;
    right: 38px;
    top: 78px;
    z-index: 6;
    color: #f7c553;
    font-size: clamp(36px, 2.15vw, 50px);
    line-height: .82;
    font-weight: 950;
    letter-spacing: -0.06em;
    text-shadow: 0 10px 28px rgba(0,0,0,.22);
  }

  .cake-catalog-big-title span {
    display: block;
    color: rgba(255,255,255,.82);
  }

  .cake-catalog-script {
    display: block;
    margin-top: 2px;
    margin-left: 24px;
    color: rgba(247, 183, 51, .95) !important;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 19px;
    line-height: .9;
    font-weight: 500;
    letter-spacing: -.03em;
    transform: rotate(-9deg);
  }

  .cake-catalog-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    padding: 0 30px 30px;
    text-align: left;
  }

  .cake-catalog-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin-bottom: 16px;
    padding: 0 17px;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 28px rgba(0,0,0,.16);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .055em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .cake-catalog-content h3 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 27px;
    line-height: 1.03;
    letter-spacing: -0.04em;
    font-weight: 950;
    text-shadow: 0 10px 26px rgba(0,0,0,.30);
  }

  .cake-catalog-content p {
    margin: 0;
    min-height: 76px;
    color: rgba(255,255,255,.86);
    font-size: 14.2px;
    line-height: 1.58;
    font-weight: 500;
    text-shadow: 0 8px 20px rgba(0,0,0,.30);
  }

  .cake-catalog-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 48px;
    margin-top: 20px;
    padding: 0 22px;
    border-radius: 999px;
    border: 0;
    color: #ffffff;
    background: linear-gradient(135deg, #e02a30, #c31f26);
    box-shadow: 0 16px 34px rgba(195, 31, 38, .35);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 900;
    cursor: pointer;
    transition: .25s ease;
  }

  .cake-catalog-button:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #f0343a, #a9141b);
  }

  .cake-catalog-button svg {
    width: 17px;
    height: 17px;
  }

  @media (max-width: 1280px) {
    .cake-container { width: min(92%, 1440px); }
    .cake-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cake-catalog-card { min-height: 560px; }
  }

  @media (max-width: 700px) {
    .cake-services-catalog { padding: 62px 0 !important; }
    .cake-catalog-head { margin-bottom: 34px; }
    .cake-catalog-head .cake-title { font-size: clamp(34px, 10vw, 50px); }
    .cake-catalog-head .cake-subtitle { font-size: 15px; }
    .cake-catalog-grid { grid-template-columns: 1fr; gap: 18px; }
    .cake-catalog-card { min-height: 535px; border-radius: 24px; }
    .cake-catalog-big-title { left: 46px; top: 76px; font-size: 40px; }
    .cake-catalog-bg { height: 285px; bottom: 134px; }
    .cake-catalog-content { padding: 0 24px 26px; }
    .cake-catalog-content h3 { font-size: 25px; }
  }



  /* REDUCED SPACING ONLY - keep same design/content/logic */
  .cake-hero { padding: 76px 0 54px; }
  .cake-services,
  .cake-process,
  .cake-feature,
  .cake-why,
  .cake-testimonial { padding: 62px 0; }

  .cake-section-head { margin-bottom: 28px; }
  .cake-title { margin-top: 10px; }
  .cake-subtitle { margin-top: 12px; line-height: 1.68; }

  .cake-hero-grid { gap: 36px; }
  .cake-hero-actions { margin-top: 20px; }
  .cake-trust-row { margin-top: 18px; }

  .cake-services::before { top: 44px; }
  .cake-services-grid { gap: 16px; }

  .cake-process::before { inset: 22px 26px; }
  .cake-process::after { top: 24px; }
  .cake-process-layout { gap: 22px; }
  .cake-process-intro { min-height: 540px; padding: 36px; }
  .cake-process-intro .cake-title { margin-top: 14px; }
  .cake-process-summary { margin-top: 24px; gap: 10px; }
  .cake-process-panel { padding: 14px; }
  .cake-process-panel-head { margin-bottom: 12px; padding: 16px 18px; }
  .cake-process-grid { gap: 10px; }
  .cake-process-card { min-height: 110px; padding: 18px; gap: 16px; }
  .cake-process-card h3 { margin-bottom: 5px; }
  .cake-step-tag { margin-bottom: 5px; }

  .cake-feature-wrap { gap: 22px; padding: 14px; }
  .cake-feature-copy { padding: 36px; }
  .cake-feature-copy .cake-section-head { margin-bottom: 20px; }
  .cake-feature-list { margin-top: 20px; gap: 10px; }
  .cake-mini-card { padding: 14px; gap: 12px; }
  .cake-feature-copy .cake-hero-actions { margin-top: 22px; }
  .cake-feature-media { gap: 12px; }
  .cake-feature-image,
  .cake-feature-image img { min-height: 540px; }
  .cake-feature-stats { gap: 10px; }
  .cake-feature-stat { min-height: 104px; padding: 16px; }

  .cake-why-hero { gap: 24px; padding: 24px; }
  .cake-why-copy { min-height: 460px; padding: 36px 30px; }
  .cake-why-proof { margin-top: 22px; gap: 10px; }
  .cake-why-image,
  .cake-why-image img { min-height: 460px; }
  .cake-why-list { gap: 12px; padding: 0 24px 24px; }
  .cake-why-card { min-height: 220px; padding: 22px; }
  .cake-why-icon { margin-bottom: 14px; }
  .cake-why-card h3 { margin-bottom: 6px; }

  .cake-testimonial-shell { gap: 16px; padding: 16px; }
  .cake-testimonial-content { padding: 42px; }
  .cake-testimonial-content h2 { margin-top: 12px; }
  .cake-testimonial-content p { margin-top: 12px; }
  .cake-review { margin-top: 20px; padding: 22px; }
  .cake-review-controls { margin-top: 16px; padding-top: 14px; }
  .cake-testimonial-visual { gap: 12px; }
  .cake-benefits { gap: 10px; }

  .cake-fill-copy,
  .cake-light-fill { margin-top: 18px; }
  .cake-fill-points { margin-top: 16px; gap: 9px; }
  .cake-fill-point { padding: 11px 13px; }

  @media (max-width: 1100px) {
    .cake-feature-image,
    .cake-feature-image img { min-height: 460px; height: 460px; }
    .cake-why-copy,
    .cake-process-intro { min-height: auto; }
  }

  @media (max-width: 700px) {
    .cake-hero { padding: 44px 0 38px; }
    .cake-services,
    .cake-process,
    .cake-feature,
    .cake-why,
    .cake-testimonial { padding: 38px 0; }
    .cake-section-head { margin-bottom: 22px; }
    .cake-hero-grid,
    .cake-feature-wrap,
    .cake-why-hero,
    .cake-testimonial-shell { gap: 10px; }
    .cake-service-card { min-height: 420px; }
    .cake-feature-copy,
    .cake-testimonial-content { padding: 26px 18px; }
    .cake-process-intro { padding: 26px 18px; }
    .cake-why-copy { padding: 24px 18px; }
    .cake-feature-image,
    .cake-feature-image img,
    .cake-why-image,
    .cake-why-image img { min-height: 340px; height: 340px; }
    .cake-why-list { padding: 0 10px 10px; gap: 10px; }
    .cake-why-card { padding: 18px; }
  }


/* =========================================================
   Studio Service Styles
   Moved into common stylesheet from studio-service.css
========================================================= */

:root {
    --sweet-primary: #c31f26;
    --sweet-primary-dark: #8f141a;
    --sweet-primary-deep: #5f0f13;
    --sweet-gold: #f7b733;
    --sweet-cream: #fff8f1;
    --sweet-pink: #fff1f3;
    --sweet-text: #283142;
    --sweet-heading: #101828;
    --sweet-muted: #667085;
    --sweet-card: #ffffff;
    --sweet-border: rgba(195, 31, 38, 0.12);
    --sweet-shadow: 0 28px 80px rgba(16, 24, 40, 0.12);
    --sweet-soft-shadow: 0 18px 48px rgba(16, 24, 40, 0.08);
    --sweet-radius: 34px;
  }

  * { box-sizing: border-box; }

  .sweet-page {
    overflow: hidden;
    color: var(--sweet-text);
    background:
      radial-gradient(circle at 8% 8%, rgba(195, 31, 38, 0.08), transparent 28%),
      radial-gradient(circle at 92% 4%, rgba(247, 183, 51, 0.14), transparent 24%),
      linear-gradient(180deg, #fffefe 0%, #fff8f8 42%, #ffffff 100%);
    font-family: inherit;
  }

  .sweet-container {
    width: 75%;
    margin: 0 auto;
  }

  .sweet-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    color: var(--sweet-primary);
    background: rgba(195, 31, 38, 0.08);
    border: 1px solid rgba(195, 31, 38, 0.14);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .sweet-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sweet-primary);
    box-shadow: 0 0 0 6px rgba(195, 31, 38, 0.12);
  }

  .sweet-title {
    margin: 16px 0 0;
    color: var(--sweet-heading);
    font-size: clamp(34px, 3.2vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.055em;
    font-weight: 850;
  }

  .sweet-subtitle {
    margin: 20px 0 0;
    color: var(--sweet-muted);
    font-size: 16.5px;
    line-height: 1.82;
    font-weight: 400;
  }

  .sweet-highlight { color: var(--sweet-primary); }

  .sweet-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 25px;
    border-radius: 999px;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 900;
    transition: 0.25s ease;
    font-family: inherit;
  }

  .sweet-btn:hover { transform: translateY(-3px); }

  .sweet-btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--sweet-primary), var(--sweet-primary-dark));
    box-shadow: 0 18px 36px rgba(195, 31, 38, 0.26);
  }

  .sweet-btn-light {
    color: var(--sweet-primary);
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.16);
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.06);
  }

  .sweet-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  .sweet-section-head {
    max-width: 850px;
    margin: 0 auto 46px;
    text-align: center;
  }

  .sweet-section-head .sweet-title {
    font-size: clamp(30px, 2.4vw, 58px);
    letter-spacing: -0.042em;
  }

  /* HERO */
  .sweet-hero {
    position: relative;
    padding: 112px 0 86px;
  }

  .sweet-hero::before {
    content: "";
    position: absolute;
    inset: 26px;
    border: 1px solid rgba(195, 31, 38, 0.08);
    border-radius: 46px;
    pointer-events: none;
  }

  .sweet-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 58px;
    align-items: center;
  }

  .sweet-hero-copy { max-width: 720px; }

  .sweet-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
  }

  .sweet-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
  }

  .sweet-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border-radius: 999px;
    color: #344054;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 12px 26px rgba(16, 24, 40, 0.06);
    font-size: 13px;
    font-weight: 800;
  }

  .sweet-trust-pill svg { color: var(--sweet-primary); }

  .sweet-hero-media { position: relative; }

  .sweet-hero-card {
    position: relative;
    overflow: hidden;
    padding: 12px;
    border-radius: 42px;
    background: #ffffff;
    box-shadow: var(--sweet-shadow);
  }

  .sweet-hero-card img {
    width: 100%;
    height: 570px;
    display: block;
    object-fit: cover;
    border-radius: 32px;
  }

  .sweet-hero-card::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 32px;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 28%, rgba(15, 23, 42, 0.56) 100%),
      linear-gradient(135deg, rgba(195, 31, 38, 0.18), transparent 55%);
    pointer-events: none;
  }

  .sweet-hero-badge {
    position: absolute;
    left: -22px;
    bottom: 36px;
    z-index: 2;
    width: min(345px, calc(100% - 30px));
    padding: 23px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 54px rgba(16, 24, 40, 0.18);
  }

  .sweet-hero-badge strong {
    display: block;
    color: var(--sweet-primary);
    font-size: 30px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 9px;
  }

  .sweet-hero-badge span {
    display: block;
    color: #475467;
    font-size: 14px;
    line-height: 1.62;
    font-weight: 600;
  }

  .sweet-floating {
    position: absolute;
    right: -18px;
    top: 38px;
    z-index: 2;
    padding: 18px;
    width: 214px;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sweet-primary), var(--sweet-primary-deep));
    box-shadow: 0 22px 42px rgba(195, 31, 38, 0.26);
  }

  .sweet-floating small {
    display: block;
    opacity: 0.84;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
  }

  .sweet-floating strong {
    display: block;
    font-size: 23px;
    line-height: 1.06;
    font-weight: 950;
  }

  /* SERVICE CARDS - FORMAL SWEETS UPGRADE */
  .sweet-services {
    position: relative;
    padding: 96px 0;
    background:
      radial-gradient(circle at 12% 12%, rgba(195, 31, 38, 0.06), transparent 24%),
      radial-gradient(circle at 88% 8%, rgba(247, 183, 51, 0.12), transparent 22%),
      linear-gradient(180deg, #ffffff 0%, #fffafa 100%);
  }

  .sweet-services::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 72px;
    width: min(74%, 1100px);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.22), transparent);
  }

  .sweet-services-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }

  .sweet-service-card {
    position: relative;
    overflow: hidden;
    min-height: 505px;
    padding: 0;
    border-radius: 28px;
    isolation: isolate;
    color: #ffffff;
    border: 0;
    background: #4b1118;
    box-shadow: 0 24px 58px rgba(16, 24, 40, 0.16);
    transition: 0.28s ease;
  }

  .sweet-service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 34px 76px rgba(195, 31, 38, 0.22);
  }

  .sweet-service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.24), transparent 24%),
      radial-gradient(circle at 82% 16%, rgba(247, 183, 51, 0.22), transparent 20%),
      linear-gradient(180deg, rgba(70, 8, 20, 0.04) 0%, rgba(70, 8, 20, 0.20) 42%, rgba(35, 5, 18, 0.92) 100%);
    pointer-events: none;
  }

  .sweet-service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(9, 2, 8, 0.20) 54%, rgba(9, 2, 8, 0.78) 100%);
    pointer-events: none;
  }

  .sweet-service-card:nth-child(1) { background: linear-gradient(135deg, #8f141a, #3a0814); }
  .sweet-service-card:nth-child(2) { background: linear-gradient(135deg, #b0182a, #400914); }
  .sweet-service-card:nth-child(3) { background: linear-gradient(135deg, #c23a52, #3d091b); }
  .sweet-service-card:nth-child(4) { background: linear-gradient(135deg, #f3a17f, #5a111b); }

  .sweet-service-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: 0.45s ease;
    z-index: 0;
  }

  .sweet-service-card:hover .sweet-service-bg { transform: scale(1.08); }

  .sweet-service-number {
    position: absolute;
    left: 22px;
    top: 22px;
    z-index: 4;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--sweet-primary);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.52);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.15);
    font-size: 13px;
    font-weight: 950;
  }

  .sweet-service-title-float {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 78px;
    z-index: 4;
    color: #ffffff;
    font-size: clamp(27px, 2.1vw, 39px);
    line-height: 0.94;
    letter-spacing: -0.045em;
    font-weight: 950;
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  }

  .sweet-service-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 26px 24px 24px;
  }

  .sweet-service-content h3 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 21px;
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -0.025em;
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.30);
  }

  .sweet-service-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.90);
    font-size: 14.5px;
    line-height: 1.58;
    font-weight: 500;
    text-shadow: 0 7px 18px rgba(0, 0, 0, 0.28);
  }

  .sweet-service-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    min-height: 44px;
    margin-top: 18px;
    padding: 0 19px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #ef262d, var(--sweet-primary));
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 15px 34px rgba(195, 31, 38, 0.34);
    transition: 0.25s ease;
  }

  .sweet-service-link:hover {
    transform: translateY(-2px);
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(195, 31, 38, 0.42);
  }

  .sweet-service-link svg {
    width: 17px;
    height: 17px;
  }

  /* PROCESS - FORMAL EXECUTIVE REDESIGN */
  .sweet-process {
    position: relative;
    overflow: hidden;
    padding: 108px 0;
    background:
      radial-gradient(circle at 9% 12%, rgba(195, 31, 38, 0.08), transparent 27%),
      radial-gradient(circle at 92% 20%, rgba(247, 183, 51, 0.14), transparent 24%),
      linear-gradient(180deg, #fffefe 0%, #fff8f8 100%);
  }

  .sweet-process::before {
    content: "";
    position: absolute;
    inset: 38px 34px;
    border-radius: 48px;
    border: 1px solid rgba(195, 31, 38, 0.08);
    pointer-events: none;
  }

  .sweet-process::after {
    content: "";
    position: absolute;
    right: -160px;
    top: 48px;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: rgba(247, 183, 51, 0.10);
    pointer-events: none;
  }

  .sweet-process-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    gap: 34px;
    align-items: stretch;
  }

  .sweet-process-intro {
    position: relative;
    overflow: hidden;
    min-height: 610px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 46px;
    border-radius: 38px;
    color: #ffffff;
    background:
      radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.16), transparent 30%),
      radial-gradient(circle at 92% 12%, rgba(247, 183, 51, 0.28), transparent 28%),
      linear-gradient(135deg, var(--sweet-primary-deep), var(--sweet-primary) 58%, #8f141a);
    box-shadow: 0 30px 82px rgba(95, 15, 19, 0.22);
  }

  .sweet-process-intro::before {
    content: "";
    position: absolute;
    right: -88px;
    bottom: -88px;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    border: 38px solid rgba(255, 255, 255, 0.08);
  }

  .sweet-process-intro::after {
    content: "04";
    position: absolute;
    right: 34px;
    top: 30px;
    color: rgba(255, 255, 255, 0.09);
    font-size: clamp(92px, 10vw, 168px);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.08em;
  }

  .sweet-process-intro-content,
  .sweet-process-summary {
    position: relative;
    z-index: 1;
  }

  .sweet-process-intro .sweet-kicker {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
  }

  .sweet-process-intro .sweet-kicker::before {
    background: #ffffff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12);
  }

  .sweet-process-intro .sweet-title {
    max-width: 650px;
    margin-top: 20px;
    color: #ffffff;
    font-size: clamp(30px, 2.4vw, 58px);
    letter-spacing: -0.056em;
  }

  .sweet-process-intro .sweet-subtitle {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.82);
  }

  .sweet-process-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 36px;
  }

  .sweet-process-summary-item {
    min-height: 112px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
  }

  .sweet-process-summary-item strong {
    display: block;
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 10px;
  }

  .sweet-process-summary-item span {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 650;
  }

  .sweet-process-panel {
    position: relative;
    padding: 18px;
    border-radius: 38px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 26px 76px rgba(16, 24, 40, 0.10);
    backdrop-filter: blur(12px);
  }

  .sweet-process-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
    padding: 20px 22px;
    border-radius: 28px;
    background:
      radial-gradient(circle at 88% 0%, rgba(247, 183, 51, 0.14), transparent 34%),
      #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.10);
  }

  .sweet-process-panel-head h3 {
    margin: 0;
    color: var(--sweet-heading);
    font-size: 21px;
    line-height: 1.2;
    font-weight: 950;
    letter-spacing: -0.03em;
  }

  .sweet-process-panel-head span {
    color: #667085;
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 550;
  }

  .sweet-process-badge {
    flex: 0 0 auto;
    min-width: 96px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sweet-primary), var(--sweet-primary-dark));
    box-shadow: 0 14px 28px rgba(195, 31, 38, 0.22);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .sweet-process-grid {
    counter-reset: sweetStep;
    display: grid;
    gap: 14px;
  }

  .sweet-process-card {
    position: relative;
    overflow: hidden;
    counter-increment: sweetStep;
    display: grid;
    grid-template-columns: 86px 1fr auto;
    gap: 20px;
    align-items: center;
    min-height: 124px;
    padding: 22px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 16px 42px rgba(16, 24, 40, 0.065);
    transition: 0.26s ease;
  }

  .sweet-process-card:hover {
    transform: translateX(8px);
    border-color: rgba(195, 31, 38, 0.25);
    box-shadow: 0 24px 56px rgba(195, 31, 38, 0.13);
  }

  .sweet-process-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 7px;
    background: linear-gradient(180deg, var(--sweet-primary), var(--sweet-gold));
  }

  .sweet-process-card::after {
    content: "0" counter(sweetStep);
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    color: rgba(195, 31, 38, 0.16);
    background: rgba(195, 31, 38, 0.05);
    font-size: 29px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.05em;
  }

  .sweet-process-icon {
    position: relative;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    margin: 0;
    border-radius: 24px;
    color: var(--sweet-primary);
    background:
      radial-gradient(circle at 28% 20%, rgba(247, 183, 51, 0.28), transparent 34%),
      var(--sweet-pink);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.56);
  }

  .sweet-process-icon svg {
    width: 30px;
    height: 30px;
  }

  .sweet-step-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 8px;
    padding: 7px 11px;
    border-radius: 999px;
    color: var(--sweet-primary);
    background: rgba(195, 31, 38, 0.07);
    border: 1px solid rgba(195, 31, 38, 0.12);
    font-size: 10.5px;
    font-weight: 950;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .sweet-step-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--sweet-primary);
  }

  .sweet-process-card h3 {
    margin: 0 0 8px;
    color: var(--sweet-heading);
    font-size: 20px;
    line-height: 1.22;
    font-weight: 950;
    letter-spacing: -0.025em;
  }

  .sweet-process-card p {
    max-width: 520px;
    margin: 0;
    color: #536073;
    font-size: 14.5px;
    line-height: 1.66;
    font-weight: 450;
  }

  @media (max-width: 1100px) {
    .sweet-process-layout { grid-template-columns: 1fr; }
    .sweet-process-intro { min-height: auto; }
  }

  @media (max-width: 700px) {
    .sweet-process { padding: 64px 0; }
    .sweet-process::before { display: none; }
    .sweet-process-intro { padding: 32px 22px; border-radius: 28px; }
    .sweet-process-summary { grid-template-columns: 1fr; }
    .sweet-process-panel { padding: 12px; border-radius: 28px; }
    .sweet-process-panel-head { display: block; padding: 18px; border-radius: 22px; }
    .sweet-process-badge { margin-top: 14px; }
    .sweet-process-card { grid-template-columns: 1fr; min-height: auto; padding: 22px 20px; border-radius: 22px; }
    .sweet-process-card:hover { transform: translateY(-4px); }
    .sweet-process-card::after { position: absolute; right: 16px; top: 16px; width: 54px; height: 54px; font-size: 24px; }
    .sweet-process-icon { width: 62px; height: 62px; border-radius: 21px; }
    .sweet-process-icon svg { width: 27px; height: 27px; }
  }


  /* FEATURE SPLIT - FORMAL REDESIGN */
  .sweet-feature {
    position: relative;
    overflow: hidden;
    padding: 106px 0;
    background:
      radial-gradient(circle at 8% 14%, rgba(195, 31, 38, 0.08), transparent 28%),
      radial-gradient(circle at 88% 78%, rgba(247, 183, 51, 0.12), transparent 24%),
      linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
  }

  .sweet-feature::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.18), transparent);
  }

  .sweet-feature-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 34px;
    align-items: stretch;
    padding: 18px;
    border-radius: 44px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 34px 90px rgba(16, 24, 40, 0.10);
    backdrop-filter: blur(12px);
  }

  .sweet-feature-copy {
    position: relative;
    overflow: hidden;
    padding: 48px;
    border-radius: 32px;
    color: #ffffff;
    background:
      radial-gradient(circle at 15% 12%, rgba(255, 255, 255, 0.14), transparent 27%),
      radial-gradient(circle at 92% 10%, rgba(247, 183, 51, 0.20), transparent 25%),
      linear-gradient(135deg, var(--sweet-primary-deep) 0%, var(--sweet-primary-dark) 48%, #3d080d 100%);
  }

  .sweet-feature-copy::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 42px solid rgba(255, 255, 255, 0.06);
  }

  .sweet-feature-copy .sweet-section-head {
    position: relative;
    z-index: 1;
    text-align: left;
    margin: 0 0 30px;
    max-width: 100%;
  }

  .sweet-feature-copy .sweet-kicker {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
  }

  .sweet-feature-copy .sweet-kicker::before {
    background: #ffffff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12);
  }

  .sweet-feature-copy .sweet-title {
    color: #ffffff;
    font-size: clamp(30px, 2.4vw, 58px);
    line-height: 1.03;
    letter-spacing: -0.052em;
  }

  .sweet-feature-copy .sweet-subtitle {
    color: rgba(255, 255, 255, 0.80);
    max-width: 620px;
  }

  .sweet-feature-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
    margin-top: 30px;
  }

  .sweet-mini-card {
    position: relative;
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 16px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: none;
    transition: 0.25s ease;
  }

  .sweet-mini-card:hover {
    transform: translateX(7px);
    background: rgba(255, 255, 255, 0.15);
  }

  .sweet-mini-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 20px;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(247, 183, 51, 0.32), rgba(255, 255, 255, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .sweet-mini-icon svg { width: 24px; height: 24px; }

  .sweet-mini-card h3 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 16.5px;
    line-height: 1.24;
    font-weight: 950;
  }

  .sweet-mini-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 13.8px;
    line-height: 1.62;
  }

  .sweet-feature-copy .sweet-hero-actions {
    position: relative;
    z-index: 1;
    margin-top: 32px;
  }

  .sweet-feature-copy .sweet-btn-primary {
    color: var(--sweet-primary);
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
  }

  .sweet-feature-copy .sweet-btn-light {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.20);
    box-shadow: none;
  }

  .sweet-feature-media {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 18px;
    min-width: 0;
  }

  .sweet-feature-image {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 610px;
    border-radius: 32px;
    border: 0;
    box-shadow: none;
    background:
      linear-gradient(135deg, rgba(195, 31, 38, 0.08), rgba(247, 183, 51, 0.14)),
      #fff7e5;
  }

  .sweet-feature-image::before {
    content: "";
    position: absolute;
    inset: 22px;
    z-index: 2;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    pointer-events: none;
  }

  .sweet-feature-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 0%, rgba(15, 23, 42, 0.20) 100%),
      radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.40), transparent 25%);
    pointer-events: none;
  }

  .sweet-feature-image img {
    width: 100%;
    height: 100%;
    min-height: 610px;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
  }

  .sweet-feature-badge {
    position: absolute;
    left: 34px;
    right: 34px;
    bottom: 34px;
    z-index: 4;
    width: auto;
    padding: 0;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    box-shadow: 0 26px 60px rgba(16, 24, 40, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.70);
  }

  .sweet-feature-badge-inner {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 18px;
    align-items: center;
    padding: 22px;
  }

  .sweet-feature-badge-mark {
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    border-radius: 26px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sweet-primary), var(--sweet-primary-deep));
    box-shadow: 0 18px 32px rgba(195, 31, 38, 0.26);
  }

  .sweet-feature-badge-mark svg { width: 38px; height: 38px; }

  .sweet-feature-badge strong {
    display: block;
    color: var(--sweet-primary);
    font-size: 25px;
    line-height: 1.08;
    font-weight: 950;
    margin-bottom: 7px;
    letter-spacing: -0.03em;
  }

  .sweet-feature-badge span {
    display: block;
    color: #536073;
    font-size: 13.5px;
    line-height: 1.58;
    font-weight: 650;
  }

  .sweet-feature-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .sweet-feature-stat {
    min-height: 122px;
    padding: 20px;
    border-radius: 26px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 18px 42px rgba(16, 24, 40, 0.07);
  }

  .sweet-feature-stat strong {
    display: block;
    color: var(--sweet-heading);
    font-size: 30px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.04em;
    margin-bottom: 9px;
  }

  .sweet-feature-stat span {
    display: block;
    color: var(--sweet-muted);
    font-size: 13.5px;
    line-height: 1.46;
    font-weight: 650;
  }

  /* WHY - FORMAL REDESIGN */
  .sweet-why {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    background:
      radial-gradient(circle at 12% 8%, rgba(195, 31, 38, 0.10), transparent 28%),
      radial-gradient(circle at 92% 18%, rgba(247, 183, 51, 0.16), transparent 26%),
      linear-gradient(180deg, #fffefe 0%, #fff8f8 100%);
  }

  .sweet-why::before {
    content: "";
    position: absolute;
    left: -120px;
    top: 70px;
    width: 310px;
    height: 310px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.06);
    filter: blur(2px);
  }

  .sweet-why::after {
    content: "";
    position: absolute;
    right: -150px;
    bottom: -130px;
    width: 410px;
    height: 410px;
    border-radius: 50%;
    background: rgba(247, 183, 51, 0.13);
    filter: blur(2px);
  }

  .sweet-why-shell {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 46px;
    background:
      linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,250,250,.94));
    border: 1px solid rgba(195, 31, 38, 0.14);
    box-shadow: 0 34px 92px rgba(16, 24, 40, 0.10);
  }

  .sweet-why-hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 38px;
    align-items: stretch;
    padding: 34px;
  }

  .sweet-why-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 520px;
    padding: 48px 36px 48px 42px;
    border-radius: 34px;
    background:
      radial-gradient(circle at 5% 0%, rgba(247, 183, 51, 0.14), transparent 34%),
      linear-gradient(135deg, #ffffff 0%, #fff7f7 100%);
    border: 1px solid rgba(195, 31, 38, 0.12);
  }

  .sweet-why-copy .sweet-section-head {
    max-width: 690px;
    text-align: left;
    margin: 0;
  }

  .sweet-why-copy .sweet-title {
    font-size: clamp(30px, 2.4vw, 58px);
    letter-spacing: -0.052em;
  }

  .sweet-why-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 34px;
  }

  .sweet-why-proof-item {
    min-height: 112px;
    padding: 18px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.06);
  }

  .sweet-why-proof-item strong {
    display: block;
    color: var(--sweet-primary);
    font-size: 28px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 9px;
  }

  .sweet-why-proof-item span {
    display: block;
    color: #5c6678;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 650;
  }

  .sweet-why-image {
    position: relative;
    min-height: 520px;
    border-radius: 34px;
    overflow: hidden;
    background: var(--sweet-primary-deep);
    box-shadow: 0 26px 68px rgba(16, 24, 40, 0.16);
  }

  .sweet-why-image img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    display: block;
    object-fit: cover;
    transform: scale(1.02);
  }

  .sweet-why-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 18%, rgba(15, 23, 42, 0.72) 100%),
      linear-gradient(135deg, rgba(195, 31, 38, 0.32), transparent 58%);
    pointer-events: none;
  }

  .sweet-why-floating {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    z-index: 2;
    padding: 28px;
    border-radius: 28px;
    color: #ffffff;
    background: rgba(95, 15, 19, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.20);
  }

  .sweet-why-floating strong {
    display: block;
    color: #ffffff;
    font-size: 34px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -0.035em;
    margin-bottom: 10px;
  }

  .sweet-why-floating span {
    display: block;
    color: rgba(255, 255, 255, 0.86);
    font-size: 14px;
    line-height: 1.66;
    font-weight: 600;
  }

  .sweet-why-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 0 34px 34px;
  }

  .sweet-why-card {
    position: relative;
    overflow: hidden;
    min-height: 248px;
    padding: 26px;
    border-radius: 30px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.13);
    box-shadow: 0 20px 48px rgba(16, 24, 40, 0.07);
    transition: 0.28s ease;
  }

  .sweet-why-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--sweet-primary), var(--sweet-gold));
  }

  .sweet-why-card::after {
    content: "";
    position: absolute;
    right: -34px;
    top: -34px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.055);
  }

  .sweet-why-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 62px rgba(195, 31, 38, 0.13);
  }

  .sweet-why-icon {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 20px;
    color: var(--sweet-primary);
    background:
      radial-gradient(circle at 28% 18%, rgba(247, 183, 51, 0.28), transparent 44%),
      var(--sweet-pink);
    border: 1px solid rgba(195, 31, 38, 0.10);
  }

  .sweet-why-icon svg { width: 27px; height: 27px; }

  .sweet-why-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 10px;
    color: var(--sweet-heading);
    font-size: 18px;
    line-height: 1.22;
    font-weight: 950;
    letter-spacing: -0.018em;
  }

  .sweet-why-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #536073;
    font-size: 14px;
    line-height: 1.68;
  }

  /* TESTIMONIAL */
  .sweet-testimonial {
    padding: 96px 0;
    background: linear-gradient(180deg, #fffafa 0%, #ffffff 100%);
  }

  .sweet-testimonial-shell {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 24px;
    padding: 22px;
    border-radius: 46px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--sweet-border);
    box-shadow: var(--sweet-shadow);
  }

  .sweet-testimonial-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px;
    border-radius: 34px;
    color: #ffffff;
    background:
      radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.14), transparent 28%),
      linear-gradient(135deg, var(--sweet-primary-deep), var(--sweet-primary) 58%, #8f1018);
  }

  .sweet-testimonial-content .sweet-kicker {
    width: fit-content;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
  }

  .sweet-testimonial-content .sweet-kicker::before { background: #ffffff; box-shadow: none; }

  .sweet-testimonial-content h2 {
    margin: 18px 0 0;
    color: #ffffff;
    font-size: clamp(28px, 2.2vw, 66px);
    line-height: 1.08;
    letter-spacing: -0.045em;
    font-weight: 760;
  }

  .sweet-testimonial-content p {
    margin: 20px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 15.5px;
    line-height: 1.78;
  }

  .sweet-review {
    position: relative;
    margin-top: 30px;
    padding: 28px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .sweet-review blockquote {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    line-height: 1.58;
    font-weight: 700;
  }

  .sweet-review-author {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .sweet-avatar {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: var(--sweet-primary);
    background: #ffffff;
    font-size: 15px;
    font-weight: 950;
  }

  .sweet-person { display: flex; align-items: center; gap: 13px; }
  .sweet-person strong { display: block; color: #ffffff; font-size: 15px; font-weight: 900; }
  .sweet-person span { display: block; margin-top: 4px; color: rgba(255,255,255,.72); font-size: 13px; font-weight: 650; }
  .sweet-stars { color: #ffd166; letter-spacing: .06em; white-space: nowrap; }

  /* TESTIMONIAL SLIDER UPDATE */
  .sweet-review-slider {
    position: relative;
  }

  .sweet-review-slide {
    transition: opacity .35s ease;
  }

  .sweet-review-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .sweet-review-controls .sweet-review-author {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    flex: 1 1 auto;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .sweet-review-nav {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
  }

  .sweet-review-arrow {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    cursor: pointer;
    transition: .25s ease;
  }

  .sweet-review-arrow:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.16);
  }

  .sweet-review-arrow svg {
    width: 18px;
    height: 18px;
  }

  @media (max-width: 700px) {
    .sweet-review-controls {
      flex-direction: column;
      align-items: flex-start;
    }

    .sweet-review-controls .sweet-review-author {
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
    }

    .sweet-review-nav {
      width: 100%;
      justify-content: flex-start;
    }
  }

  .sweet-testimonial-visual {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 18px;
  }

  .sweet-testimonial-img {
    position: relative;
    overflow: hidden;
    min-height: 430px;
    border-radius: 34px;
    box-shadow: 0 24px 58px rgba(16, 24, 40, 0.12);
  }

  .sweet-testimonial-img img {
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
    display: block;
  }

  .sweet-testimonial-label {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    box-shadow: 0 22px 44px rgba(16, 24, 40, 0.15);
  }

  .sweet-testimonial-label strong {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sweet-primary), var(--sweet-primary-deep));
    font-size: 25px;
    line-height: 1;
    font-weight: 950;
  }

  .sweet-testimonial-label span {
    color: #475467;
    font-size: 13.5px;
    line-height: 1.58;
    font-weight: 650;
  }

  .sweet-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .sweet-benefit {
    display: grid;
    gap: 11px;
    min-height: 114px;
    padding: 18px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid var(--sweet-border);
    color: var(--sweet-heading);
    font-size: 13.5px;
    line-height: 1.34;
    font-weight: 900;
    box-shadow: 0 18px 42px rgba(16, 24, 40, 0.08);
  }

  .sweet-benefit svg { width: 28px; height: 28px; color: var(--sweet-primary); }

  /* MODAL */
  .sweet-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .sweet-modal.is-open { display: flex; }

  .sweet-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(8px);
  }

  .sweet-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(900px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 32px;
    background: #ffffff;
    box-shadow: 0 34px 90px rgba(15, 23, 42, 0.28);
    animation: sweetModalIn 0.25s ease;
  }

  @keyframes sweetModalIn {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .sweet-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 28px 30px 24px;
    border-bottom: 1px solid rgba(195, 31, 38, 0.12);
    background:
      radial-gradient(circle at 92% 0%, rgba(247, 183, 51, 0.16), transparent 25%),
      linear-gradient(135deg, #fff7f7 0%, #ffffff 66%);
  }

  .sweet-modal-kicker {
    color: var(--sweet-primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  .sweet-modal-title {
    margin: 0;
    color: var(--sweet-heading);
    font-size: clamp(25px, 2.1vw, 40px);
    line-height: 1.12;
    letter-spacing: -0.03em;
    font-weight: 900;
  }

  .sweet-modal-close {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: #ffffff;
    color: var(--sweet-heading);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .25s ease;
  }

  .sweet-modal-close:hover { transform: rotate(90deg); color: var(--sweet-primary); }
  .sweet-modal-close svg { width: 22px; height: 22px; }

  .sweet-modal-body {
    max-height: calc(100vh - 210px);
    overflow: auto;
    padding: 28px 30px 30px;
  }

  .sweet-modal-intro {
    margin: 0 0 18px;
    padding: 20px 22px;
    border-radius: 22px;
    color: #344054;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 14px 34px rgba(16, 24, 40, 0.06);
    font-size: 15.5px;
    line-height: 1.75;
    font-weight: 500;
  }

  .sweet-modal-points {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sweet-modal-points li {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #3f4857;
    font-size: 15px;
    line-height: 1.68;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.04);
  }

  .sweet-modal-point-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--sweet-primary);
    background: var(--sweet-pink);
  }

  .sweet-modal-point-icon svg { width: 21px; height: 21px; }
  .sweet-modal-points strong { color: var(--sweet-heading); font-weight: 900; }

  .sweet-modal-note {
    margin-top: 18px;
    padding: 19px 22px;
    border-radius: 20px;
    border-left: 4px solid var(--sweet-primary);
    background: rgba(195, 31, 38, 0.06);
    color: #3f4857;
    font-size: 14.5px;
    line-height: 1.65;
    font-weight: 500;
  }

  .sweet-modal-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 30px 26px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
  }

  .sweet-modal-help {
    color: #667085;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
  }

  .sweet-modal-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sweet-primary), var(--sweet-primary-dark));
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 16px 28px rgba(195, 31, 38, 0.22);
  }

  @media (max-width: 1100px) {
    .sweet-hero-grid,
    .sweet-feature-wrap,
    .sweet-why-grid,
    .sweet-testimonial-shell { grid-template-columns: 1fr; }
    .sweet-services-grid,
    .sweet-process-grid { grid-template-columns: repeat(2, 1fr); }
    .sweet-feature-copy .sweet-section-head,
    .sweet-why-copy .sweet-section-head { text-align: center; margin-left: auto; margin-right: auto; }
    .sweet-feature-image { height: 520px; }
    .sweet-why-image { min-height: 520px; }
    .sweet-feature-badge { left: 24px; }
  }

  @media (max-width: 700px) {
    .sweet-container { width: min(92%, 1440px); }
    .sweet-hero { padding: 60px 0 56px; }
    .sweet-hero::before { display: none; }
    .sweet-services,
    .sweet-process,
    .sweet-feature,
    .sweet-why,
    .sweet-testimonial { padding: 58px 0; }
    .sweet-title { font-size: clamp(34px, 10vw, 52px); }
    .sweet-section-head { margin-bottom: 32px; }
    .sweet-hero-card { border-radius: 28px; padding: 8px; }
    .sweet-hero-card img { height: 390px; border-radius: 22px; }
    .sweet-hero-card::after { inset: 8px; border-radius: 22px; }
    .sweet-hero-badge,
    .sweet-floating,
    .sweet-feature-badge { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; margin: -46px 16px 0; }
    .sweet-floating { margin-top: 14px; }
    .sweet-services-grid,
    .sweet-process-grid,
    .sweet-feature-list,
    .sweet-benefits { grid-template-columns: 1fr; }
    .sweet-service-card { min-height: 470px; }
    .sweet-service-title-float { top: 76px; font-size: 34px; }
    .sweet-service-content { padding: 24px 22px 22px; }
    .sweet-feature-image { height: 390px; border-radius: 28px; border-width: 8px; }
    .sweet-why-image { min-height: 410px; border-radius: 28px; }
    .sweet-why-floating { left: 16px; right: 16px; bottom: 16px; padding: 18px; border-radius: 22px; }
    .sweet-why-card { grid-template-columns: 1fr; text-align: center; }
    .sweet-why-icon { margin: 0 auto; }
    .sweet-testimonial-shell { padding: 12px; border-radius: 30px; }
    .sweet-testimonial-content { padding: 34px 22px; border-radius: 24px; }
    .sweet-review blockquote { font-size: 17px; }
    .sweet-review-author { flex-direction: column; align-items: flex-start; }
    .sweet-testimonial-img,
    .sweet-testimonial-img img { min-height: 360px; border-radius: 24px; }
    .sweet-testimonial-label { left: 14px; right: 14px; bottom: 14px; grid-template-columns: 1fr; }
    .sweet-modal { padding: 14px; }
    .sweet-modal-dialog { border-radius: 24px; }
    .sweet-modal-head,
    .sweet-modal-body,
    .sweet-modal-foot { padding-left: 20px; padding-right: 20px; }
    .sweet-modal-points li { grid-template-columns: 1fr; }
  }

  @media (max-width: 1100px) {
    .sweet-feature-wrap { grid-template-columns: 1fr; }
    .sweet-feature-copy .sweet-section-head { text-align: center; margin-left: auto; margin-right: auto; }
    .sweet-feature-copy { padding: 42px 34px; }
    .sweet-feature-image { min-height: 520px; height: 520px; }
    .sweet-feature-image img { min-height: 520px; }
  }

  @media (max-width: 700px) {
    .sweet-feature-wrap { padding: 10px; border-radius: 30px; gap: 12px; }
    .sweet-feature-copy { padding: 32px 20px; border-radius: 24px; }
    .sweet-mini-card { grid-template-columns: 1fr; text-align: center; }
    .sweet-mini-icon { margin: 0 auto; }
    .sweet-feature-copy .sweet-hero-actions { justify-content: center; }
    .sweet-feature-image { min-height: 390px; height: 390px; border-radius: 24px; }
    .sweet-feature-image img { min-height: 390px; }
    .sweet-feature-image::before { inset: 12px; border-radius: 18px; }
    .sweet-feature-badge { position: relative; left: auto; right: auto; bottom: auto; margin: -60px 14px 0; }
    .sweet-feature-badge-inner { grid-template-columns: 1fr; text-align: center; padding: 20px; }
    .sweet-feature-badge-mark { margin: 0 auto; }
    .sweet-feature-stats { grid-template-columns: 1fr; }
    .sweet-feature-stat { min-height: auto; text-align: center; }
  }



  @media (max-width: 1100px) {
    .sweet-why-hero { grid-template-columns: 1fr; }
    .sweet-why-copy { min-height: auto; }
    .sweet-why-list { grid-template-columns: repeat(2, 1fr); }
    .sweet-why-copy .sweet-section-head { text-align: center; margin-left: auto; margin-right: auto; }
  }

  @media (max-width: 700px) {
    .sweet-why { padding: 58px 0; }
    .sweet-why-shell { border-radius: 30px; }
    .sweet-why-hero { padding: 14px; gap: 14px; }
    .sweet-why-copy { padding: 30px 20px; border-radius: 24px; }
    .sweet-why-proof { grid-template-columns: 1fr; }
    .sweet-why-image { min-height: 390px; border-radius: 24px; }
    .sweet-why-image img { min-height: 390px; }
    .sweet-why-floating { left: 16px; right: 16px; bottom: 16px; padding: 20px; border-radius: 22px; }
    .sweet-why-list { grid-template-columns: 1fr; padding: 0 14px 14px; }
    .sweet-why-card { min-height: auto; text-align: center; }
    .sweet-why-icon { margin-left: auto; margin-right: auto; }
  }


  /* EXTRA TEXT FILL - added to use existing open space without removing the layout */
  .sweet-fill-copy {
    position: relative;
    z-index: 1;
    margin-top: 26px;
    padding: 22px 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
  }

  .sweet-fill-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 14.5px;
    line-height: 1.74;
    font-weight: 550;
  }

  .sweet-fill-copy p + p { margin-top: 12px; }

  .sweet-fill-points {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    margin-top: 24px;
  }

  .sweet-fill-point {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 15px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.82);
    font-size: 13.5px;
    line-height: 1.56;
    font-weight: 600;
  }

  .sweet-fill-point strong {
    display: block;
    color: #ffffff;
    font-size: 14.5px;
    line-height: 1.25;
    font-weight: 950;
    margin-bottom: 4px;
  }

  .sweet-fill-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .sweet-fill-icon svg {
    width: 18px;
    height: 18px;
  }

  .sweet-light-fill {
    margin-top: 26px;
    padding: 22px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.06);
  }

  .sweet-light-fill h3 {
    margin: 0 0 10px;
    color: var(--sweet-heading);
    font-size: 18px;
    line-height: 1.24;
    font-weight: 950;
    letter-spacing: -0.02em;
  }

  .sweet-light-fill p {
    margin: 0;
    color: #5c6678;
    font-size: 14.2px;
    line-height: 1.72;
    font-weight: 500;
  }

  @media (max-width: 700px) {
    .sweet-fill-copy,
    .sweet-light-fill { margin-top: 20px; padding: 18px; border-radius: 20px; }
    .sweet-fill-point { grid-template-columns: 1fr; }
    .sweet-fill-icon { margin: 0 auto; }
  }


  /* ICON FIXES - correct studio/service icons for all shared blocks */
  .sweet-kicker::before {
    width: 18px;
    height: 18px;
    border-radius: 0;
    background: currentColor;
    box-shadow: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 9h16v11H4V9Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M3 6h18v3H3V6Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 6v14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 6c-1.9-3.2-5.8-2.2-5 .5.5 1.6 2.6 1.7 5-.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 6c1.9-3.2 5.8-2.2 5 .5-.5 1.6-2.6 1.7-5-.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 9h16v11H4V9Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M3 6h18v3H3V6Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 6v14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 6c-1.9-3.2-5.8-2.2-5 .5.5 1.6 2.6 1.7 5-.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 6c1.9-3.2 5.8-2.2 5 .5-.5 1.6-2.6 1.7-5-.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .sweet-btn-icon,
  .sweet-service-number svg,
  .sweet-process-summary-item strong svg,
  .sweet-feature-stat strong svg,
  .sweet-why-proof-item strong svg {
    width: 24px;
    height: 24px;
    display: block;
    flex: 0 0 auto;
  }

  .sweet-service-number {
    color: var(--sweet-primary);
    font-size: 0;
  }

  .sweet-service-number svg {
    width: 25px;
    height: 25px;
  }

  .sweet-process-summary-item strong,
  .sweet-feature-stat strong,
  .sweet-why-proof-item strong {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    margin-bottom: 13px;
    font-size: 0;
    letter-spacing: 0;
  }

  .sweet-process-summary-item strong {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.20);
  }

  .sweet-feature-stat strong,
  .sweet-why-proof-item strong {
    color: var(--sweet-primary);
    background: radial-gradient(circle at 30% 20%, rgba(247, 183, 51, 0.22), transparent 42%), var(--sweet-pink);
    border: 1px solid rgba(195, 31, 38, 0.12);
  }

  .sweet-feature-stat,
  .sweet-why-proof-item,
  .sweet-process-summary-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .sweet-btn .sweet-btn-icon {
    width: 20px;
    height: 20px;
  }


  /* STUDIO ICON UPDATE - camera icon for section labels */
  .sweet-kicker::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 8h4l1.6-2.5h4.8L16 8h4v11H4V8Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z' stroke='black' stroke-width='2'/%3E%3Cpath d='M18 11h.01' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 8h4l1.6-2.5h4.8L16 8h4v11H4V8Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z' stroke='black' stroke-width='2'/%3E%3Cpath d='M18 11h.01' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }



  /* =========================================================
     FULL PAGE DESIGN REFRESH - STUDIO SERVICE
     Applied to all sections except the last testimonial part.
     Keeps old EJS logic, modals, buttons, and content unchanged.
  ========================================================= */
  .sweet-page {
    background:
      radial-gradient(circle at 6% 7%, rgba(195, 31, 38, 0.13), transparent 24%),
      radial-gradient(circle at 92% 10%, rgba(247, 183, 51, 0.12), transparent 26%),
      linear-gradient(180deg, #fffefe 0%, #fff6f6 34%, #ffffff 100%);
  }

  .sweet-container {
    width: min(89%, 1480px);
  }

  .sweet-title {
    font-weight: 850;
    letter-spacing: -0.045em;
  }

  .sweet-subtitle {
    color: #5d6678;
    font-size: 16px;
    line-height: 1.78;
  }

  .sweet-btn {
    min-height: 56px;
    padding: 0 28px;
    border-radius: 18px;
  }

  .sweet-btn-primary {
    background: linear-gradient(135deg, #c31f26 0%, #8f141a 100%);
    box-shadow: 0 18px 42px rgba(195, 31, 38, 0.28);
  }

  .sweet-btn-light {
    color: #8f141a;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(195, 31, 38, 0.18);
  }

  /* Hero: premium studio landing style */
  .sweet-hero {
    padding: 92px 0 76px;
    background:
      linear-gradient(135deg, rgba(16, 24, 40, 0.04), rgba(195, 31, 38, 0.035)),
      radial-gradient(circle at 78% 20%, rgba(247, 183, 51, 0.16), transparent 24%);
  }

  .sweet-hero::before {
    inset: 22px 38px;
    border-radius: 34px;
    border-color: rgba(195, 31, 38, 0.12);
    background: rgba(255, 255, 255, 0.24);
  }

  .sweet-hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 46px;
    padding: 24px;
    border-radius: 38px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(195, 31, 38, 0.13);
    box-shadow: 0 34px 92px rgba(16, 24, 40, 0.10);
    backdrop-filter: blur(14px);
  }

  .sweet-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px 18px 34px 26px;
  }

  .sweet-hero .sweet-title {
    font-size: clamp(36px, 4.2vw, 82px);
    line-height: 1.03;
  }

  .sweet-hero .sweet-subtitle {
    max-width: 760px;
    font-size: 17px;
  }

  .sweet-hero-card {
    padding: 0;
    border-radius: 34px;
    background: #111827;
    box-shadow: 0 30px 86px rgba(15, 23, 42, 0.20);
  }

  .sweet-hero-card img {
    height: 560px;
    border-radius: 34px;
  }

  .sweet-hero-card::after {
    inset: 0;
    border-radius: 34px;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 35%, rgba(15, 23, 42, 0.72) 100%),
      linear-gradient(135deg, rgba(195, 31, 38, 0.28), rgba(247, 183, 51, 0.08));
  }

  /* Services: formal card grid */
  .sweet-services {
    padding: 96px 0 104px;
    background:
      radial-gradient(circle at 8% 12%, rgba(195, 31, 38, 0.08), transparent 24%),
      linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
  }

  .sweet-services::before {
    top: 52px;
    width: min(89%, 1220px);
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.28), rgba(247, 183, 51, 0.24), transparent);
  }

  .sweet-services-grid {
    gap: 20px;
  }

  .sweet-service-card {
    min-height: 475px;
    border-radius: 26px;
    box-shadow: 0 24px 62px rgba(16, 24, 40, 0.13);
  }

  .sweet-service-card::before {
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.08) 0%, rgba(15, 23, 42, 0.24) 45%, rgba(15, 23, 42, 0.90) 100%),
      linear-gradient(135deg, rgba(195, 31, 38, 0.20), transparent 62%);
  }

  .sweet-service-card::after {
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(15, 23, 42, 0.38) 55%, rgba(15, 23, 42, 0.86) 100%);
  }

  .sweet-service-number {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, #c31f26, #8f141a);
    border: 1px solid rgba(255, 255, 255, 0.28);
  }

  .sweet-service-title-float {
    top: 90px;
    font-size: clamp(26px, 1.8vw, 34px);
    line-height: 1.03;
  }

  .sweet-service-content {
    padding: 28px 24px 26px;
  }

  .sweet-service-content h3 {
    font-size: 20px;
  }

  .sweet-service-link {
    border-radius: 16px;
    background: #ffffff;
    color: #c31f26;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
  }

  .sweet-service-link:hover {
    color: #c31f26;
    background: #fff3f3;
  }

  /* Process: clean executive workflow */
  .sweet-process {
    padding: 104px 0;
    background:
      radial-gradient(circle at 88% 12%, rgba(247, 183, 51, 0.15), transparent 26%),
      linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
  }

  .sweet-process::before {
    inset: 34px 42px;
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.46);
  }

  .sweet-process-layout {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 24px;
  }

  .sweet-process-intro {
    min-height: 590px;
    border-radius: 32px;
    padding: 42px;
    background:
      linear-gradient(135deg, rgba(18, 24, 38, 0.94), rgba(95, 15, 19, 0.96)),
      radial-gradient(circle at 10% 10%, rgba(247, 183, 51, 0.24), transparent 28%);
  }

  .sweet-fill-copy,
  .sweet-fill-point {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.16);
  }

  .sweet-process-summary {
    gap: 12px;
  }

  .sweet-process-summary-item {
    border-radius: 20px;
  }

  .sweet-process-panel {
    border-radius: 32px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.92);
  }

  .sweet-process-panel-head {
    border-radius: 24px;
  }

  .sweet-process-card {
    grid-template-columns: 76px 1fr auto;
    min-height: 118px;
    border-radius: 24px;
  }

  .sweet-process-icon {
    width: 62px;
    height: 62px;
    border-radius: 20px;
  }

  /* Feature: split production showcase */
  .sweet-feature {
    padding: 104px 0;
    background:
      linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
  }

  .sweet-feature-wrap {
    border-radius: 36px;
    padding: 16px;
    box-shadow: 0 34px 90px rgba(16, 24, 40, 0.11);
  }

  .sweet-feature-copy {
    border-radius: 28px;
    padding: 46px;
    background:
      radial-gradient(circle at 16% 10%, rgba(247, 183, 51, 0.18), transparent 24%),
      linear-gradient(135deg, #5f0f13 0%, #8f141a 52%, #101828 100%);
  }

  .sweet-mini-card {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.11);
  }

  .sweet-feature-image,
  .sweet-feature-image img {
    min-height: 590px;
  }

  .sweet-feature-image {
    border-radius: 28px;
  }

  .sweet-feature-badge {
    border-radius: 24px;
  }

  .sweet-feature-stat {
    border-radius: 22px;
    min-height: 112px;
  }

  /* Why: modern trust block */
  .sweet-why {
    padding: 104px 0;
    background:
      radial-gradient(circle at 12% 12%, rgba(195, 31, 38, 0.08), transparent 24%),
      linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
  }

  .sweet-why-shell {
    border-radius: 36px;
    box-shadow: 0 32px 84px rgba(16, 24, 40, 0.10);
  }

  .sweet-why-hero {
    gap: 24px;
    padding: 24px;
  }

  .sweet-why-copy {
    border-radius: 28px;
    min-height: 500px;
    padding: 42px;
  }

  .sweet-why-proof {
    gap: 12px;
  }

  .sweet-why-proof-item {
    border-radius: 20px;
  }

  .sweet-why-image {
    border-radius: 28px;
  }

  .sweet-why-floating {
    border-radius: 24px;
    background: rgba(16, 24, 40, 0.76);
  }

  .sweet-why-list {
    gap: 14px;
    padding: 0 24px 24px;
  }

  .sweet-why-card {
    min-height: 230px;
    border-radius: 24px;
  }

  .sweet-why-icon {
    border-radius: 18px;
  }

  /* Keep the last part unchanged */
  .sweet-testimonial,
  .sweet-testimonial * {
    /* no new design override for the final testimonial section */
  }

  @media (max-width: 1100px) {
    .sweet-hero-grid,
    .sweet-process-layout,
    .sweet-feature-wrap,
    .sweet-why-hero {
      grid-template-columns: 1fr;
    }

    .sweet-services-grid,
    .sweet-why-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 700px) {
    .sweet-container { width: 92%; }
    .sweet-hero-grid { padding: 14px; border-radius: 28px; }
    .sweet-hero-copy { padding: 24px 10px; text-align: center; }
    .sweet-hero-actions { justify-content: center; }
    .sweet-hero-card img { height: 390px; }
    .sweet-services-grid,
    .sweet-why-list { grid-template-columns: 1fr; }
    .sweet-service-card { min-height: 440px; }
    .sweet-process-intro,
    .sweet-feature-copy,
    .sweet-why-copy { padding: 28px 20px; border-radius: 24px; }
    .sweet-feature-image,
    .sweet-feature-image img { min-height: 390px; }
  }



  /* HERO UPDATE - studio design similar to shared reference, not exact copy */
  .sweet-studio-hero-v2 {
    position: relative;
    padding: 92px 0 74px;
    overflow: hidden;
    background:
      linear-gradient(90deg, rgba(195,31,38,0.10) 0%, rgba(255,255,255,0.96) 43%, rgba(247,183,51,0.12) 100%),
      linear-gradient(rgba(195,31,38,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(195,31,38,0.035) 1px, transparent 1px);
    background-size: auto, 32px 32px, 32px 32px;
  }

  .sweet-studio-hero-v2::before {
    display: none;
  }

  .studio-hero-word {
    position: absolute;
    left: 4%;
    top: 18px;
    z-index: 0;
    color: rgba(195,31,38,0.055);
    font-size: clamp(58px, 9vw, 168px);
    line-height: .85;
    font-weight: 950;
    letter-spacing: -.075em;
    white-space: nowrap;
    pointer-events: none;
    text-transform: uppercase;
  }

  .studio-hero-v2-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 42px;
    align-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .studio-hero-v2-copy {
    padding: 38px 0 34px;
    max-width: 760px;
  }

  .sweet-studio-hero-v2 .sweet-kicker {
    color: #b01821;
    background: rgba(255,255,255,.58);
    border-color: rgba(195,31,38,.20);
    box-shadow: 0 14px 34px rgba(195,31,38,.08);
  }

  .sweet-studio-hero-v2 .sweet-title {
    max-width: 790px;
    margin-top: 18px;
    color: #07152d;
    font-size: clamp(38px, 4vw, 74px);
    line-height: 1.03;
    letter-spacing: -.058em;
    font-weight: 950;
  }

  .sweet-studio-hero-v2 .sweet-highlight {
    color: #d42d35;
    font-weight: 450;
    text-decoration: underline;
    text-decoration-color: rgba(247,183,51,.72);
    text-underline-offset: 7px;
    text-decoration-thickness: 4px;
  }

  .sweet-studio-hero-v2 .sweet-subtitle {
    max-width: 720px;
    margin-top: 26px;
    color: #33445f;
    font-size: 17px;
    line-height: 1.85;
    font-weight: 470;
  }

  .studio-hero-v2-actions {
    margin-top: 34px;
    gap: 14px;
  }

  .sweet-studio-hero-v2 .sweet-btn {
    min-height: 58px;
    border-radius: 999px;
    padding: 0 27px;
    font-size: 14px;
    box-shadow: 0 18px 42px rgba(15,23,42,.10);
  }

  .sweet-studio-hero-v2 .sweet-btn-primary {
    background: linear-gradient(135deg, #c31f26, #92141b);
    box-shadow: 0 20px 42px rgba(195,31,38,.25);
  }

  .sweet-studio-hero-v2 .sweet-btn-light {
    background: rgba(255,255,255,.76);
    border: 1px solid rgba(195,31,38,.18);
    color: #b01821;
  }

  .studio-hero-v2-pills {
    margin-top: 30px;
    gap: 13px;
  }

  .studio-hero-v2-pills .sweet-trust-pill {
    min-height: 48px;
    padding: 0 16px;
    background: rgba(255,255,255,.72);
    border-color: rgba(195,31,38,.14);
    color: #17243b;
    box-shadow: 0 16px 34px rgba(15,23,42,.07);
  }

  .studio-hero-v2-pills .sweet-trust-pill svg {
    width: 18px;
    height: 18px;
  }

  .studio-hero-v2-media {
    min-height: 560px;
    position: relative;
  }

  .studio-hero-v2-card {
    position: absolute;
    right: 26px;
    top: 0;
    width: calc(100% - 38px);
    height: 548px;
    padding: 12px;
    overflow: hidden;
    border-radius: 38px;
    background: #ffffff;
    box-shadow: 0 34px 86px rgba(15,23,42,.17);
  }

  .studio-hero-v2-card img {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 29px;
    filter: saturate(1.04) contrast(1.02);
  }

  .studio-hero-v2-card::after {
    inset: 12px;
    border-radius: 29px;
    background:
      linear-gradient(180deg, rgba(12,21,38,0.06) 0%, rgba(12,21,38,0.14) 44%, rgba(12,21,38,0.64) 100%),
      linear-gradient(135deg, rgba(195,31,38,.18), transparent 56%);
  }

  .studio-hero-perfect {
    position: absolute;
    right: 0;
    top: 44px;
    z-index: 5;
    width: 205px;
    padding: 21px 20px;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, #b01821, #7d1016);
    box-shadow: 0 26px 50px rgba(125,16,22,.28);
  }

  .studio-hero-perfect small {
    display: block;
    margin-bottom: 10px;
    color: rgba(255,255,255,.86);
    font-size: 12px;
    font-weight: 700;
  }

  .studio-hero-perfect strong {
    display: block;
    color: #ffffff;
    font-size: 23px;
    line-height: 1.02;
    letter-spacing: -.03em;
    font-weight: 950;
  }

  .studio-hero-info-card {
    position: absolute;
    left: 0;
    bottom: 22px;
    z-index: 5;
    width: min(430px, 82%);
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 16px;
    align-items: center;
    padding: 22px;
    border-radius: 25px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(195,31,38,.12);
    box-shadow: 0 26px 68px rgba(15,23,42,.16);
    backdrop-filter: blur(14px);
  }

  .studio-hero-info-icon {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, #c31f26, #7d1016);
    box-shadow: 0 18px 34px rgba(195,31,38,.25);
  }

  .studio-hero-info-icon svg {
    width: 36px;
    height: 36px;
  }

  .studio-hero-info-card strong {
    display: block;
    margin-bottom: 8px;
    color: #c31f26;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -.035em;
    font-weight: 950;
  }

  .studio-hero-info-card span {
    display: block;
    color: #536073;
    font-size: 13.8px;
    line-height: 1.62;
    font-weight: 560;
  }

  @media (max-width: 1100px) {
    .studio-hero-v2-grid { grid-template-columns: 1fr; gap: 26px; }
    .studio-hero-v2-copy { max-width: 100%; text-align: center; padding-top: 20px; }
    .studio-hero-v2-actions, .studio-hero-v2-pills { justify-content: center; }
    .studio-hero-v2-media { min-height: 560px; }
    .studio-hero-v2-card { left: 36px; right: 36px; width: auto; }
    .studio-hero-perfect { right: 8px; }
    .studio-hero-info-card { left: 8px; }
  }

  @media (max-width: 700px) {
    .sweet-studio-hero-v2 { padding: 58px 0 56px; background-size: auto, 24px 24px, 24px 24px; }
    .studio-hero-word { top: 28px; left: 3%; font-size: 58px; opacity: .75; }
    .sweet-studio-hero-v2 .sweet-title { font-size: clamp(34px, 10vw, 48px); }
    .sweet-studio-hero-v2 .sweet-subtitle { font-size: 15.5px; line-height: 1.75; }
    .studio-hero-v2-copy { padding: 8px 0 0; }
    .studio-hero-v2-media { min-height: 510px; }
    .studio-hero-v2-card { left: 0; right: 0; top: 0; width: 100%; height: 390px; padding: 8px; border-radius: 28px; }
    .studio-hero-v2-card img { border-radius: 21px; }
    .studio-hero-v2-card::after { inset: 8px; border-radius: 21px; }
    .studio-hero-perfect { top: 16px; right: 12px; width: 168px; padding: 16px; border-radius: 20px; }
    .studio-hero-perfect strong { font-size: 19px; }
    .studio-hero-info-card { left: 12px; right: 12px; bottom: 0; width: auto; grid-template-columns: 1fr; text-align: center; padding: 20px; }
    .studio-hero-info-icon { margin: 0 auto; width: 66px; height: 66px; border-radius: 22px; }
    .studio-hero-info-card strong { font-size: 24px; }
  }



  /* COMPACT SPACING UPDATE - reduced spaces only, design/content unchanged */
  .sweet-hero {
    padding: 78px 0 54px;
  }

  .sweet-services,
  .sweet-process,
  .sweet-feature,
  .sweet-why,
  .sweet-testimonial {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .sweet-section-head {
    margin-bottom: 28px;
  }

  .sweet-title {
    margin-top: 12px;
  }

  .sweet-subtitle {
    margin-top: 14px;
    line-height: 1.68;
  }

  .sweet-hero-grid {
    gap: 34px;
  }

  .sweet-hero-actions {
    margin-top: 22px;
  }

  .sweet-trust-row {
    margin-top: 20px;
  }

  .sweet-services::before {
    top: 44px;
  }

  .sweet-services-grid {
    gap: 16px;
  }

  .sweet-service-card {
    min-height: 460px;
  }

  .sweet-service-content {
    padding: 22px 22px 20px;
  }

  .sweet-service-link {
    margin-top: 13px;
  }

  .sweet-process::before {
    inset: 24px 24px;
  }

  .sweet-process-layout,
  .sweet-feature-wrap,
  .sweet-why-hero,
  .sweet-testimonial-shell {
    gap: 22px;
  }

  .sweet-process-intro {
    min-height: 540px;
    padding: 34px;
  }

  .sweet-process-intro .sweet-title {
    margin-top: 14px;
  }

  .sweet-process-summary {
    margin-top: 24px;
    gap: 10px;
  }

  .sweet-process-panel {
    padding: 14px;
  }

  .sweet-process-panel-head {
    margin-bottom: 12px;
    padding: 16px 18px;
  }

  .sweet-process-grid {
    gap: 10px;
  }

  .sweet-process-card {
    min-height: 106px;
    padding: 18px;
    gap: 16px;
  }

  .sweet-step-tag {
    margin-bottom: 6px;
  }

  .sweet-process-card h3 {
    margin-bottom: 6px;
  }

  .sweet-feature-wrap {
    padding: 14px;
  }

  .sweet-feature-copy {
    padding: 36px;
  }

  .sweet-feature-copy .sweet-section-head {
    margin-bottom: 20px;
  }

  .sweet-feature-list {
    gap: 10px;
    margin-top: 20px;
  }

  .sweet-mini-card {
    padding: 14px;
    gap: 12px;
  }

  .sweet-feature-copy .sweet-hero-actions {
    margin-top: 22px;
  }

  .sweet-feature-media {
    gap: 12px;
  }

  .sweet-feature-image,
  .sweet-feature-image img {
    min-height: 540px;
  }

  .sweet-feature-badge {
    bottom: 24px;
    left: 24px;
    right: 24px;
  }

  .sweet-feature-badge-inner {
    padding: 18px;
    gap: 14px;
  }

  .sweet-feature-stats {
    gap: 10px;
  }

  .sweet-feature-stat {
    min-height: 104px;
    padding: 16px;
  }

  .sweet-why-hero {
    padding: 24px;
  }

  .sweet-why-copy {
    min-height: 460px;
    padding: 34px 28px;
  }

  .sweet-why-proof {
    gap: 10px;
    margin-top: 24px;
  }

  .sweet-why-proof-item {
    min-height: 96px;
    padding: 15px;
  }

  .sweet-why-image,
  .sweet-why-image img {
    min-height: 460px;
  }

  .sweet-why-floating {
    left: 22px;
    right: 22px;
    bottom: 22px;
    padding: 22px;
  }

  .sweet-why-list {
    gap: 12px;
    padding: 0 24px 24px;
  }

  .sweet-why-card {
    min-height: 210px;
    padding: 22px;
  }

  .sweet-why-icon {
    margin-bottom: 14px;
  }

  .sweet-testimonial-shell {
    padding: 16px;
  }

  .sweet-testimonial-content {
    padding: 40px;
  }

  .sweet-testimonial-content h2,
  .sweet-testimonial-content p {
    margin-top: 14px;
  }

  .sweet-review {
    margin-top: 22px;
    padding: 22px;
  }

  .sweet-review-author,
  .sweet-review-controls {
    margin-top: 16px;
    padding-top: 14px;
  }

  .sweet-testimonial-visual {
    gap: 12px;
  }

  .sweet-testimonial-img,
  .sweet-testimonial-img img {
    min-height: 390px;
  }

  .sweet-testimonial-label {
    left: 18px;
    right: 18px;
    bottom: 18px;
    padding: 14px;
  }

  .sweet-benefits {
    gap: 10px;
  }

  .sweet-benefit {
    min-height: 96px;
    padding: 14px;
  }

  .sweet-fill-copy,
  .sweet-light-fill {
    margin-top: 18px;
    padding: 18px 20px;
  }

  .sweet-fill-points {
    gap: 9px;
    margin-top: 16px;
  }

  .sweet-fill-point {
    padding: 12px 13px;
  }

  .sweet-modal-head {
    padding: 22px 26px 18px;
  }

  .sweet-modal-body {
    padding: 22px 26px 24px;
  }

  .sweet-modal-foot {
    padding: 18px 26px 22px;
  }

  .sweet-modal-intro,
  .sweet-modal-note {
    margin-bottom: 12px;
    padding: 16px 18px;
  }

  .sweet-modal-points {
    gap: 10px;
  }

  .sweet-modal-points li {
    padding: 14px;
  }

  @media (max-width: 1100px) {
    .sweet-feature-copy {
      padding: 30px 28px;
    }

    .sweet-feature-image,
    .sweet-feature-image img {
      min-height: 450px;
      height: 450px;
    }

    .sweet-why-copy,
    .sweet-process-intro {
      min-height: auto;
    }
  }

  @media (max-width: 700px) {
    .sweet-hero {
      padding: 42px 0 38px;
    }

    .sweet-services,
    .sweet-process,
    .sweet-feature,
    .sweet-why,
    .sweet-testimonial {
      padding-top: 38px;
      padding-bottom: 38px;
    }

    .sweet-section-head {
      margin-bottom: 22px;
    }

    .sweet-hero-grid,
    .sweet-process-layout,
    .sweet-feature-wrap,
    .sweet-why-hero,
    .sweet-testimonial-shell {
      gap: 12px;
    }

    .sweet-service-card {
      min-height: 410px;
    }

    .sweet-process-intro,
    .sweet-feature-copy,
    .sweet-why-copy,
    .sweet-testimonial-content {
      padding: 24px 18px;
    }

    .sweet-process-card {
      padding: 18px 16px;
    }

    .sweet-feature-image,
    .sweet-feature-image img,
    .sweet-why-image,
    .sweet-why-image img {
      min-height: 340px;
      height: 340px;
    }

    .sweet-testimonial-img,
    .sweet-testimonial-img img {
      min-height: 320px;
    }

    .sweet-why-hero {
      padding: 10px;
    }

    .sweet-why-list {
      padding: 0 10px 10px;
      gap: 10px;
    }

    .sweet-why-card {
      padding: 18px;
    }
  }


/* =========================================================
   Sweets Service Styles
   Moved into common stylesheet from sweets-service.css
========================================================= */

:root {
    --sweet-primary: #c31f26;
    --sweet-primary-dark: #8f141a;
    --sweet-primary-deep: #5f0f13;
    --sweet-gold: #f7b733;
    --sweet-cream: #fff8f1;
    --sweet-pink: #fff1f3;
    --sweet-text: #283142;
    --sweet-heading: #101828;
    --sweet-muted: #667085;
    --sweet-card: #ffffff;
    --sweet-border: rgba(195, 31, 38, 0.12);
    --sweet-shadow: 0 28px 80px rgba(16, 24, 40, 0.12);
    --sweet-soft-shadow: 0 18px 48px rgba(16, 24, 40, 0.08);
    --sweet-radius: 34px;
  }

  * { box-sizing: border-box; }

  .sweet-page {
    overflow: hidden;
    color: var(--sweet-text);
    background:
      radial-gradient(circle at 8% 8%, rgba(195, 31, 38, 0.08), transparent 28%),
      radial-gradient(circle at 92% 4%, rgba(247, 183, 51, 0.14), transparent 24%),
      linear-gradient(180deg, #fffefe 0%, #fff8f8 42%, #ffffff 100%);
    font-family: inherit;
  }

  .sweet-container {
    width: 75%;
    margin: 0 auto;
  }

  .sweet-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    color: var(--sweet-primary);
    background: rgba(195, 31, 38, 0.08);
    border: 1px solid rgba(195, 31, 38, 0.14);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .sweet-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sweet-primary);
    box-shadow: 0 0 0 6px rgba(195, 31, 38, 0.12);
  }

  .sweet-title {
    margin: 16px 0 0;
    color: var(--sweet-heading);
    font-size: clamp(34px, 3.2vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.055em;
    font-weight: 850;
  }

  .sweet-subtitle {
    margin: 14px 0 0;
    color: var(--sweet-muted);
    font-size: 16.5px;
    line-height: 1.82;
    font-weight: 400;
  }

  .sweet-highlight { color: var(--sweet-primary); }

  .sweet-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 25px;
    border-radius: 999px;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 900;
    transition: 0.25s ease;
    font-family: inherit;
  }

  .sweet-btn:hover { transform: translateY(-3px); }

  .sweet-btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--sweet-primary), var(--sweet-primary-dark));
    box-shadow: 0 18px 36px rgba(195, 31, 38, 0.26);
  }

  .sweet-btn-light {
    color: var(--sweet-primary);
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.16);
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.06);
  }

  .sweet-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  .sweet-section-head {
    max-width: 850px;
    margin: 0 auto 30px;
    text-align: center;
  }

  .sweet-section-head .sweet-title {
    font-size: clamp(30px, 2.4vw, 58px);
    letter-spacing: -0.042em;
  }

  /* HERO */
  .sweet-hero {
    position: relative;
    padding: 76px 0 58px;
  }

  .sweet-hero::before {
    content: "";
    position: absolute;
    inset: 26px;
    border: 1px solid rgba(195, 31, 38, 0.08);
    border-radius: 46px;
    pointer-events: none;
  }

  .sweet-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 36px;
    align-items: center;
  }

  .sweet-hero-copy { max-width: 720px; }

  .sweet-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 20px;
  }

  .sweet-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
  }

  .sweet-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border-radius: 999px;
    color: #344054;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 12px 26px rgba(16, 24, 40, 0.06);
    font-size: 13px;
    font-weight: 800;
  }

  .sweet-trust-pill svg { color: var(--sweet-primary); }

  .sweet-hero-media { position: relative; }

  .sweet-hero-card {
    position: relative;
    overflow: hidden;
    padding: 12px;
    border-radius: 42px;
    background: #ffffff;
    box-shadow: var(--sweet-shadow);
  }

  .sweet-hero-card img {
    width: 100%;
    height: 570px;
    display: block;
    object-fit: cover;
    border-radius: 32px;
  }

  .sweet-hero-card::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 32px;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 28%, rgba(15, 23, 42, 0.56) 100%),
      linear-gradient(135deg, rgba(195, 31, 38, 0.18), transparent 55%);
    pointer-events: none;
  }

  .sweet-hero-badge {
    position: absolute;
    left: -22px;
    bottom: 36px;
    z-index: 2;
    width: min(345px, calc(100% - 30px));
    padding: 23px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 54px rgba(16, 24, 40, 0.18);
  }

  .sweet-hero-badge strong {
    display: block;
    color: var(--sweet-primary);
    font-size: 30px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 9px;
  }

  .sweet-hero-badge span {
    display: block;
    color: #475467;
    font-size: 14px;
    line-height: 1.62;
    font-weight: 600;
  }

  .sweet-floating {
    position: absolute;
    right: -18px;
    top: 38px;
    z-index: 2;
    padding: 18px;
    width: 214px;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sweet-primary), var(--sweet-primary-deep));
    box-shadow: 0 22px 42px rgba(195, 31, 38, 0.26);
  }

  .sweet-floating small {
    display: block;
    opacity: 0.84;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
  }

  .sweet-floating strong {
    display: block;
    font-size: 23px;
    line-height: 1.06;
    font-weight: 950;
  }

  /* SERVICE CARDS - FORMAL SWEETS UPGRADE */
  .sweet-services {
    position: relative;
    padding: 64px 0;
    background:
      radial-gradient(circle at 12% 12%, rgba(195, 31, 38, 0.06), transparent 24%),
      radial-gradient(circle at 88% 8%, rgba(247, 183, 51, 0.12), transparent 22%),
      linear-gradient(180deg, #ffffff 0%, #fffafa 100%);
  }

  .sweet-services::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 72px;
    width: min(74%, 1100px);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.22), transparent);
  }

  .sweet-services-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .sweet-service-card {
    position: relative;
    overflow: hidden;
    min-height: 440px;
    padding: 0;
    border-radius: 28px;
    isolation: isolate;
    color: #ffffff;
    border: 0;
    background: #4b1118;
    box-shadow: 0 24px 58px rgba(16, 24, 40, 0.16);
    transition: 0.28s ease;
  }

  .sweet-service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 34px 76px rgba(195, 31, 38, 0.22);
  }

  .sweet-service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.24), transparent 24%),
      radial-gradient(circle at 82% 16%, rgba(247, 183, 51, 0.22), transparent 20%),
      linear-gradient(180deg, rgba(70, 8, 20, 0.04) 0%, rgba(70, 8, 20, 0.20) 42%, rgba(35, 5, 18, 0.92) 100%);
    pointer-events: none;
  }

  .sweet-service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(9, 2, 8, 0.20) 54%, rgba(9, 2, 8, 0.78) 100%);
    pointer-events: none;
  }

  .sweet-service-card:nth-child(1) { background: linear-gradient(135deg, #8f141a, #3a0814); }
  .sweet-service-card:nth-child(2) { background: linear-gradient(135deg, #b0182a, #400914); }
  .sweet-service-card:nth-child(3) { background: linear-gradient(135deg, #c23a52, #3d091b); }
  .sweet-service-card:nth-child(4) { background: linear-gradient(135deg, #f3a17f, #5a111b); }

  .sweet-service-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: 0.45s ease;
    z-index: 0;
  }

  .sweet-service-card:hover .sweet-service-bg { transform: scale(1.08); }

  .sweet-service-number {
    position: absolute;
    left: 22px;
    top: 22px;
    z-index: 4;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--sweet-primary);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.52);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.15);
    font-size: 13px;
    font-weight: 950;
  }

  .sweet-service-title-float {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 78px;
    z-index: 4;
    color: #ffffff;
    font-size: clamp(27px, 2.1vw, 39px);
    line-height: 0.94;
    letter-spacing: -0.045em;
    font-weight: 950;
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  }

  .sweet-service-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 26px 24px 24px;
  }

  .sweet-service-content h3 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 21px;
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -0.025em;
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.30);
  }

  .sweet-service-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.90);
    font-size: 14.5px;
    line-height: 1.58;
    font-weight: 500;
    text-shadow: 0 7px 18px rgba(0, 0, 0, 0.28);
  }

  .sweet-service-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    min-height: 44px;
    margin-top: 18px;
    padding: 0 19px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #ef262d, var(--sweet-primary));
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 15px 34px rgba(195, 31, 38, 0.34);
    transition: 0.25s ease;
  }

  .sweet-service-link:hover {
    transform: translateY(-2px);
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(195, 31, 38, 0.42);
  }

  .sweet-service-link svg {
    width: 17px;
    height: 17px;
  }

  /* PROCESS - FORMAL EXECUTIVE REDESIGN */
  .sweet-process {
    position: relative;
    overflow: hidden;
    padding: 70px 0;
    background:
      radial-gradient(circle at 9% 12%, rgba(195, 31, 38, 0.08), transparent 27%),
      radial-gradient(circle at 92% 20%, rgba(247, 183, 51, 0.14), transparent 24%),
      linear-gradient(180deg, #fffefe 0%, #fff8f8 100%);
  }

  .sweet-process::before {
    content: "";
    position: absolute;
    inset: 38px 34px;
    border-radius: 48px;
    border: 1px solid rgba(195, 31, 38, 0.08);
    pointer-events: none;
  }

  .sweet-process::after {
    content: "";
    position: absolute;
    right: -160px;
    top: 48px;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: rgba(247, 183, 51, 0.10);
    pointer-events: none;
  }

  .sweet-process-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    gap: 22px;
    align-items: stretch;
  }

  .sweet-process-intro {
    position: relative;
    overflow: hidden;
    min-height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 46px;
    border-radius: 38px;
    color: #ffffff;
    background:
      radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.16), transparent 30%),
      radial-gradient(circle at 92% 12%, rgba(247, 183, 51, 0.28), transparent 28%),
      linear-gradient(135deg, var(--sweet-primary-deep), var(--sweet-primary) 58%, #8f141a);
    box-shadow: 0 30px 82px rgba(95, 15, 19, 0.22);
  }

  .sweet-process-intro::before {
    content: "";
    position: absolute;
    right: -88px;
    bottom: -88px;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    border: 38px solid rgba(255, 255, 255, 0.08);
  }

  .sweet-process-intro::after {
    content: "04";
    position: absolute;
    right: 34px;
    top: 30px;
    color: rgba(255, 255, 255, 0.09);
    font-size: clamp(92px, 10vw, 168px);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.08em;
  }

  .sweet-process-intro-content,
  .sweet-process-summary {
    position: relative;
    z-index: 1;
  }

  .sweet-process-intro .sweet-kicker {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
  }

  .sweet-process-intro .sweet-kicker::before {
    background: #ffffff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12);
  }

  .sweet-process-intro .sweet-title {
    max-width: 650px;
    margin-top: 20px;
    color: #ffffff;
    font-size: clamp(30px, 2.4vw, 58px);
    letter-spacing: -0.056em;
  }

  .sweet-process-intro .sweet-subtitle {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.82);
  }

  .sweet-process-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
  }

  .sweet-process-summary-item {
    min-height: 112px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
  }

  .sweet-process-summary-item strong {
    display: block;
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 10px;
  }

  .sweet-process-summary-item span {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 650;
  }

  .sweet-process-panel {
    position: relative;
    padding: 18px;
    border-radius: 38px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 26px 76px rgba(16, 24, 40, 0.10);
    backdrop-filter: blur(12px);
  }

  .sweet-process-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
    padding: 20px 22px;
    border-radius: 28px;
    background:
      radial-gradient(circle at 88% 0%, rgba(247, 183, 51, 0.14), transparent 34%),
      #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.10);
  }

  .sweet-process-panel-head h3 {
    margin: 0;
    color: var(--sweet-heading);
    font-size: 21px;
    line-height: 1.2;
    font-weight: 950;
    letter-spacing: -0.03em;
  }

  .sweet-process-panel-head span {
    color: #667085;
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 550;
  }

  .sweet-process-badge {
    flex: 0 0 auto;
    min-width: 96px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sweet-primary), var(--sweet-primary-dark));
    box-shadow: 0 14px 28px rgba(195, 31, 38, 0.22);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .sweet-process-grid {
    counter-reset: sweetStep;
    display: grid;
    gap: 14px;
  }

  .sweet-process-card {
    position: relative;
    overflow: hidden;
    counter-increment: sweetStep;
    display: grid;
    grid-template-columns: 86px 1fr auto;
    gap: 20px;
    align-items: center;
    min-height: 108px;
    padding: 22px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 16px 42px rgba(16, 24, 40, 0.065);
    transition: 0.26s ease;
  }

  .sweet-process-card:hover {
    transform: translateX(8px);
    border-color: rgba(195, 31, 38, 0.25);
    box-shadow: 0 24px 56px rgba(195, 31, 38, 0.13);
  }

  .sweet-process-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 7px;
    background: linear-gradient(180deg, var(--sweet-primary), var(--sweet-gold));
  }

  .sweet-process-card::after {
    content: "0" counter(sweetStep);
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    color: rgba(195, 31, 38, 0.16);
    background: rgba(195, 31, 38, 0.05);
    font-size: 29px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.05em;
  }

  .sweet-process-icon {
    position: relative;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    margin: 0;
    border-radius: 24px;
    color: var(--sweet-primary);
    background:
      radial-gradient(circle at 28% 20%, rgba(247, 183, 51, 0.28), transparent 34%),
      var(--sweet-pink);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.56);
  }

  .sweet-process-icon svg {
    width: 30px;
    height: 30px;
  }

  .sweet-step-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 8px;
    padding: 7px 11px;
    border-radius: 999px;
    color: var(--sweet-primary);
    background: rgba(195, 31, 38, 0.07);
    border: 1px solid rgba(195, 31, 38, 0.12);
    font-size: 10.5px;
    font-weight: 950;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .sweet-step-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--sweet-primary);
  }

  .sweet-process-card h3 {
    margin: 0 0 8px;
    color: var(--sweet-heading);
    font-size: 20px;
    line-height: 1.22;
    font-weight: 950;
    letter-spacing: -0.025em;
  }

  .sweet-process-card p {
    max-width: 520px;
    margin: 0;
    color: #536073;
    font-size: 14.5px;
    line-height: 1.66;
    font-weight: 450;
  }

  @media (max-width: 1100px) {
    .sweet-process-layout { grid-template-columns: 1fr; }
    .sweet-process-intro { min-height: auto; }
  }

  @media (max-width: 700px) {
    .sweet-process { padding: 46px 0; }
    .sweet-process::before { display: none; }
    .sweet-process-intro { padding: 32px 22px; border-radius: 28px; }
    .sweet-process-summary { grid-template-columns: 1fr; }
    .sweet-process-panel { padding: 12px; border-radius: 28px; }
    .sweet-process-panel-head { display: block; padding: 18px; border-radius: 22px; }
    .sweet-process-badge { margin-top: 14px; }
    .sweet-process-card { grid-template-columns: 1fr; min-height: auto; padding: 22px 20px; border-radius: 22px; }
    .sweet-process-card:hover { transform: translateY(-4px); }
    .sweet-process-card::after { position: absolute; right: 16px; top: 16px; width: 54px; height: 54px; font-size: 24px; }
    .sweet-process-icon { width: 62px; height: 62px; border-radius: 21px; }
    .sweet-process-icon svg { width: 27px; height: 27px; }
  }


  /* FEATURE SPLIT - FORMAL REDESIGN */
  .sweet-feature {
    position: relative;
    overflow: hidden;
    padding: 70px 0;
    background:
      radial-gradient(circle at 8% 14%, rgba(195, 31, 38, 0.08), transparent 28%),
      radial-gradient(circle at 88% 78%, rgba(247, 183, 51, 0.12), transparent 24%),
      linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
  }

  .sweet-feature::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.18), transparent);
  }

  .sweet-feature-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 22px;
    align-items: stretch;
    padding: 18px;
    border-radius: 44px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 34px 90px rgba(16, 24, 40, 0.10);
    backdrop-filter: blur(12px);
  }

  .sweet-feature-copy {
    position: relative;
    overflow: hidden;
    padding: 48px;
    border-radius: 32px;
    color: #ffffff;
    background:
      radial-gradient(circle at 15% 12%, rgba(255, 255, 255, 0.14), transparent 27%),
      radial-gradient(circle at 92% 10%, rgba(247, 183, 51, 0.20), transparent 25%),
      linear-gradient(135deg, var(--sweet-primary-deep) 0%, var(--sweet-primary-dark) 48%, #3d080d 100%);
  }

  .sweet-feature-copy::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 42px solid rgba(255, 255, 255, 0.06);
  }

  .sweet-feature-copy .sweet-section-head {
    position: relative;
    z-index: 1;
    text-align: left;
    margin: 0 0 30px;
    max-width: 100%;
  }

  .sweet-feature-copy .sweet-kicker {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
  }

  .sweet-feature-copy .sweet-kicker::before {
    background: #ffffff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12);
  }

  .sweet-feature-copy .sweet-title {
    color: #ffffff;
    font-size: clamp(30px, 2.4vw, 58px);
    line-height: 1.03;
    letter-spacing: -0.052em;
  }

  .sweet-feature-copy .sweet-subtitle {
    color: rgba(255, 255, 255, 0.80);
    max-width: 620px;
  }

  .sweet-feature-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
    margin-top: 20px;
  }

  .sweet-mini-card {
    position: relative;
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 16px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: none;
    transition: 0.25s ease;
  }

  .sweet-mini-card:hover {
    transform: translateX(7px);
    background: rgba(255, 255, 255, 0.15);
  }

  .sweet-mini-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 20px;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(247, 183, 51, 0.32), rgba(255, 255, 255, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .sweet-mini-icon svg { width: 24px; height: 24px; }

  .sweet-mini-card h3 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 16.5px;
    line-height: 1.24;
    font-weight: 950;
  }

  .sweet-mini-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 13.8px;
    line-height: 1.62;
  }

  .sweet-feature-copy .sweet-hero-actions {
    position: relative;
    z-index: 1;
    margin-top: 32px;
  }

  .sweet-feature-copy .sweet-btn-primary {
    color: var(--sweet-primary);
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
  }

  .sweet-feature-copy .sweet-btn-light {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.20);
    box-shadow: none;
  }

  .sweet-feature-media {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 18px;
    min-width: 0;
  }

  .sweet-feature-image {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 450px;
    border-radius: 32px;
    border: 0;
    box-shadow: none;
    background:
      linear-gradient(135deg, rgba(195, 31, 38, 0.08), rgba(247, 183, 51, 0.14)),
      #fff7e5;
  }

  .sweet-feature-image::before {
    content: "";
    position: absolute;
    inset: 22px;
    z-index: 2;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    pointer-events: none;
  }

  .sweet-feature-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 0%, rgba(15, 23, 42, 0.20) 100%),
      radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.40), transparent 25%);
    pointer-events: none;
  }

  .sweet-feature-image img {
    width: 100%;
    height: 100%;
    min-height: 450px;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
  }

  .sweet-feature-badge {
    position: absolute;
    left: 34px;
    right: 34px;
    bottom: 34px;
    z-index: 4;
    width: auto;
    padding: 0;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    box-shadow: 0 26px 60px rgba(16, 24, 40, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.70);
  }

  .sweet-feature-badge-inner {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 18px;
    align-items: center;
    padding: 22px;
  }

  .sweet-feature-badge-mark {
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    border-radius: 26px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sweet-primary), var(--sweet-primary-deep));
    box-shadow: 0 18px 32px rgba(195, 31, 38, 0.26);
  }

  .sweet-feature-badge-mark svg { width: 38px; height: 38px; }

  .sweet-feature-badge strong {
    display: block;
    color: var(--sweet-primary);
    font-size: 25px;
    line-height: 1.08;
    font-weight: 950;
    margin-bottom: 7px;
    letter-spacing: -0.03em;
  }

  .sweet-feature-badge span {
    display: block;
    color: #536073;
    font-size: 13.5px;
    line-height: 1.58;
    font-weight: 650;
  }

  .sweet-feature-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .sweet-feature-stat {
    min-height: 105px;
    padding: 20px;
    border-radius: 26px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 18px 42px rgba(16, 24, 40, 0.07);
  }

  .sweet-feature-stat strong {
    display: block;
    color: var(--sweet-heading);
    font-size: 30px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.04em;
    margin-bottom: 9px;
  }

  .sweet-feature-stat span {
    display: block;
    color: var(--sweet-muted);
    font-size: 13.5px;
    line-height: 1.46;
    font-weight: 650;
  }

  /* WHY - FORMAL REDESIGN */
  .sweet-why {
    position: relative;
    overflow: hidden;
    padding: 72px 0;
    background:
      radial-gradient(circle at 12% 8%, rgba(195, 31, 38, 0.10), transparent 28%),
      radial-gradient(circle at 92% 18%, rgba(247, 183, 51, 0.16), transparent 26%),
      linear-gradient(180deg, #fffefe 0%, #fff8f8 100%);
  }

  .sweet-why::before {
    content: "";
    position: absolute;
    left: -120px;
    top: 70px;
    width: 310px;
    height: 310px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.06);
    filter: blur(2px);
  }

  .sweet-why::after {
    content: "";
    position: absolute;
    right: -150px;
    bottom: -130px;
    width: 410px;
    height: 410px;
    border-radius: 50%;
    background: rgba(247, 183, 51, 0.13);
    filter: blur(2px);
  }

  .sweet-why-shell {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 46px;
    background:
      linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,250,250,.94));
    border: 1px solid rgba(195, 31, 38, 0.14);
    box-shadow: 0 34px 92px rgba(16, 24, 40, 0.10);
  }

  .sweet-why-hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 24px;
    align-items: stretch;
    padding: 34px;
  }

  .sweet-why-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 450px;
    padding: 48px 36px 48px 42px;
    border-radius: 34px;
    background:
      radial-gradient(circle at 5% 0%, rgba(247, 183, 51, 0.14), transparent 34%),
      linear-gradient(135deg, #ffffff 0%, #fff7f7 100%);
    border: 1px solid rgba(195, 31, 38, 0.12);
  }

  .sweet-why-copy .sweet-section-head {
    max-width: 690px;
    text-align: left;
    margin: 0;
  }

  .sweet-why-copy .sweet-title {
    font-size: clamp(30px, 2.4vw, 58px);
    letter-spacing: -0.052em;
  }

  .sweet-why-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 34px;
  }

  .sweet-why-proof-item {
    min-height: 112px;
    padding: 18px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.06);
  }

  .sweet-why-proof-item strong {
    display: block;
    color: var(--sweet-primary);
    font-size: 28px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 9px;
  }

  .sweet-why-proof-item span {
    display: block;
    color: #5c6678;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 650;
  }

  .sweet-why-image {
    position: relative;
    min-height: 450px;
    border-radius: 34px;
    overflow: hidden;
    background: var(--sweet-primary-deep);
    box-shadow: 0 26px 68px rgba(16, 24, 40, 0.16);
  }

  .sweet-why-image img {
    width: 100%;
    height: 100%;
    min-height: 450px;
    display: block;
    object-fit: cover;
    transform: scale(1.02);
  }

  .sweet-why-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 18%, rgba(15, 23, 42, 0.72) 100%),
      linear-gradient(135deg, rgba(195, 31, 38, 0.32), transparent 58%);
    pointer-events: none;
  }

  .sweet-why-floating {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    z-index: 2;
    padding: 28px;
    border-radius: 28px;
    color: #ffffff;
    background: rgba(95, 15, 19, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.20);
  }

  .sweet-why-floating strong {
    display: block;
    color: #ffffff;
    font-size: 34px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -0.035em;
    margin-bottom: 10px;
  }

  .sweet-why-floating span {
    display: block;
    color: rgba(255, 255, 255, 0.86);
    font-size: 14px;
    line-height: 1.66;
    font-weight: 600;
  }

  .sweet-why-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 0 34px 34px;
  }

  .sweet-why-card {
    position: relative;
    overflow: hidden;
    min-height: 220px;
    padding: 26px;
    border-radius: 30px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.13);
    box-shadow: 0 20px 48px rgba(16, 24, 40, 0.07);
    transition: 0.28s ease;
  }

  .sweet-why-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--sweet-primary), var(--sweet-gold));
  }

  .sweet-why-card::after {
    content: "";
    position: absolute;
    right: -34px;
    top: -34px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.055);
  }

  .sweet-why-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 62px rgba(195, 31, 38, 0.13);
  }

  .sweet-why-icon {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 20px;
    color: var(--sweet-primary);
    background:
      radial-gradient(circle at 28% 18%, rgba(247, 183, 51, 0.28), transparent 44%),
      var(--sweet-pink);
    border: 1px solid rgba(195, 31, 38, 0.10);
  }

  .sweet-why-icon svg { width: 27px; height: 27px; }

  .sweet-why-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 10px;
    color: var(--sweet-heading);
    font-size: 18px;
    line-height: 1.22;
    font-weight: 950;
    letter-spacing: -0.018em;
  }

  .sweet-why-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #536073;
    font-size: 14px;
    line-height: 1.68;
  }

  /* TESTIMONIAL */
  .sweet-testimonial {
    padding: 64px 0;
    background: linear-gradient(180deg, #fffafa 0%, #ffffff 100%);
  }

  .sweet-testimonial-shell {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 24px;
    padding: 22px;
    border-radius: 46px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--sweet-border);
    box-shadow: var(--sweet-shadow);
  }

  .sweet-testimonial-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px;
    border-radius: 34px;
    color: #ffffff;
    background:
      radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.14), transparent 28%),
      linear-gradient(135deg, var(--sweet-primary-deep), var(--sweet-primary) 58%, #8f1018);
  }

  .sweet-testimonial-content .sweet-kicker {
    width: fit-content;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
  }

  .sweet-testimonial-content .sweet-kicker::before { background: #ffffff; box-shadow: none; }

  .sweet-testimonial-content h2 {
    margin: 18px 0 0;
    color: #ffffff;
    font-size: clamp(28px, 2.2vw, 66px);
    line-height: 1.08;
    letter-spacing: -0.045em;
    font-weight: 760;
  }

  .sweet-testimonial-content p {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 15.5px;
    line-height: 1.78;
  }

  .sweet-review {
    position: relative;
    margin-top: 20px;
    padding: 28px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .sweet-review blockquote {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    line-height: 1.58;
    font-weight: 700;
  }

  .sweet-review-author {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .sweet-avatar {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: var(--sweet-primary);
    background: #ffffff;
    font-size: 15px;
    font-weight: 950;
  }

  .sweet-person { display: flex; align-items: center; gap: 13px; }
  .sweet-person strong { display: block; color: #ffffff; font-size: 15px; font-weight: 900; }
  .sweet-person span { display: block; margin-top: 4px; color: rgba(255,255,255,.72); font-size: 13px; font-weight: 650; }
  .sweet-stars { color: #ffd166; letter-spacing: .06em; white-space: nowrap; }

  .sweet-testimonial-visual {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 18px;
  }

  .sweet-testimonial-img {
    position: relative;
    overflow: hidden;
    min-height: 380px;
    border-radius: 34px;
    box-shadow: 0 24px 58px rgba(16, 24, 40, 0.12);
  }

  .sweet-testimonial-img img {
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
    display: block;
  }

  .sweet-testimonial-label {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    box-shadow: 0 22px 44px rgba(16, 24, 40, 0.15);
  }

  .sweet-testimonial-label strong {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sweet-primary), var(--sweet-primary-deep));
    font-size: 25px;
    line-height: 1;
    font-weight: 950;
  }

  .sweet-testimonial-label span {
    color: #475467;
    font-size: 13.5px;
    line-height: 1.58;
    font-weight: 650;
  }

  .sweet-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .sweet-benefit {
    display: grid;
    gap: 11px;
    min-height: 114px;
    padding: 18px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid var(--sweet-border);
    color: var(--sweet-heading);
    font-size: 13.5px;
    line-height: 1.34;
    font-weight: 900;
    box-shadow: 0 18px 42px rgba(16, 24, 40, 0.08);
  }

  .sweet-benefit svg { width: 28px; height: 28px; color: var(--sweet-primary); }

  /* MODAL */
  .sweet-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .sweet-modal.is-open { display: flex; }

  .sweet-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(8px);
  }

  .sweet-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(900px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 32px;
    background: #ffffff;
    box-shadow: 0 34px 90px rgba(15, 23, 42, 0.28);
    animation: sweetModalIn 0.25s ease;
  }

  @keyframes sweetModalIn {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .sweet-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 28px 30px 24px;
    border-bottom: 1px solid rgba(195, 31, 38, 0.12);
    background:
      radial-gradient(circle at 92% 0%, rgba(247, 183, 51, 0.16), transparent 25%),
      linear-gradient(135deg, #fff7f7 0%, #ffffff 66%);
  }

  .sweet-modal-kicker {
    color: var(--sweet-primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  .sweet-modal-title {
    margin: 0;
    color: var(--sweet-heading);
    font-size: clamp(25px, 2.1vw, 40px);
    line-height: 1.12;
    letter-spacing: -0.03em;
    font-weight: 900;
  }

  .sweet-modal-close {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: #ffffff;
    color: var(--sweet-heading);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .25s ease;
  }

  .sweet-modal-close:hover { transform: rotate(90deg); color: var(--sweet-primary); }
  .sweet-modal-close svg { width: 22px; height: 22px; }

  .sweet-modal-body {
    max-height: calc(100vh - 210px);
    overflow: auto;
    padding: 28px 30px 30px;
  }

  .sweet-modal-intro {
    margin: 0 0 18px;
    padding: 20px 22px;
    border-radius: 22px;
    color: #344054;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 14px 34px rgba(16, 24, 40, 0.06);
    font-size: 15.5px;
    line-height: 1.75;
    font-weight: 500;
  }

  .sweet-modal-points {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sweet-modal-points li {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #3f4857;
    font-size: 15px;
    line-height: 1.68;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.04);
  }

  .sweet-modal-point-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--sweet-primary);
    background: var(--sweet-pink);
  }

  .sweet-modal-point-icon svg { width: 21px; height: 21px; }
  .sweet-modal-points strong { color: var(--sweet-heading); font-weight: 900; }

  .sweet-modal-note {
    margin-top: 18px;
    padding: 19px 22px;
    border-radius: 20px;
    border-left: 4px solid var(--sweet-primary);
    background: rgba(195, 31, 38, 0.06);
    color: #3f4857;
    font-size: 14.5px;
    line-height: 1.65;
    font-weight: 500;
  }

  .sweet-modal-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 30px 26px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
  }

  .sweet-modal-help {
    color: #667085;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
  }

  .sweet-modal-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sweet-primary), var(--sweet-primary-dark));
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 16px 28px rgba(195, 31, 38, 0.22);
  }

  @media (max-width: 1100px) {
    .sweet-hero-grid,
    .sweet-feature-wrap,
    .sweet-why-grid,
    .sweet-testimonial-shell { grid-template-columns: 1fr; }
    .sweet-services-grid,
    .sweet-process-grid { grid-template-columns: repeat(2, 1fr); }
    .sweet-feature-copy .sweet-section-head,
    .sweet-why-copy .sweet-section-head { text-align: center; margin-left: auto; margin-right: auto; }
    .sweet-feature-image { height: 520px; }
    .sweet-why-image { min-height: 520px; }
    .sweet-feature-badge { left: 24px; }
  }

  @media (max-width: 700px) {
    .sweet-container { width: min(92%, 1440px); }
    .sweet-hero { padding: 60px 0 56px; }
    .sweet-hero::before { display: none; }
    .sweet-services,
    .sweet-process,
    .sweet-feature,
    .sweet-why,
    .sweet-testimonial { padding: 58px 0; }
    .sweet-title { font-size: clamp(34px, 10vw, 52px); }
    .sweet-section-head { margin-bottom: 24px; }
    .sweet-hero-card { border-radius: 28px; padding: 8px; }
    .sweet-hero-card img { height: 390px; border-radius: 22px; }
    .sweet-hero-card::after { inset: 8px; border-radius: 22px; }
    .sweet-hero-badge,
    .sweet-floating,
    .sweet-feature-badge { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; margin: -46px 16px 0; }
    .sweet-floating { margin-top: 14px; }
    .sweet-services-grid,
    .sweet-process-grid,
    .sweet-feature-list,
    .sweet-benefits { grid-template-columns: 1fr; }
    .sweet-service-card { min-height: 410px; }
    .sweet-service-title-float { top: 76px; font-size: 34px; }
    .sweet-service-content { padding: 24px 22px 22px; }
    .sweet-feature-image { height: 390px; border-radius: 28px; border-width: 8px; }
    .sweet-why-image { min-height: 360px; border-radius: 28px; }
    .sweet-why-floating { left: 16px; right: 16px; bottom: 16px; padding: 18px; border-radius: 22px; }
    .sweet-why-card { grid-template-columns: 1fr; text-align: center; }
    .sweet-why-icon { margin: 0 auto; }
    .sweet-testimonial-shell { padding: 12px; border-radius: 30px; }
    .sweet-testimonial-content { padding: 34px 22px; border-radius: 24px; }
    .sweet-review blockquote { font-size: 17px; }
    .sweet-review-author { flex-direction: column; align-items: flex-start; }
    .sweet-testimonial-img,
    .sweet-testimonial-img img { min-height: 360px; border-radius: 24px; }
    .sweet-testimonial-label { left: 14px; right: 14px; bottom: 14px; grid-template-columns: 1fr; }
    .sweet-modal { padding: 14px; }
    .sweet-modal-dialog { border-radius: 24px; }
    .sweet-modal-head,
    .sweet-modal-body,
    .sweet-modal-foot { padding-left: 20px; padding-right: 20px; }
    .sweet-modal-points li { grid-template-columns: 1fr; }
  }

  @media (max-width: 1100px) {
    .sweet-feature-wrap { grid-template-columns: 1fr; }
    .sweet-feature-copy .sweet-section-head { text-align: center; margin-left: auto; margin-right: auto; }
    .sweet-feature-copy { padding: 42px 34px; }
    .sweet-feature-image { min-height: 450px; height: 450px; }
    .sweet-feature-image img { min-height: 450px; }
  }

  @media (max-width: 700px) {
    .sweet-feature-wrap { padding: 10px; border-radius: 30px; gap: 12px; }
    .sweet-feature-copy { padding: 32px 20px; border-radius: 24px; }
    .sweet-mini-card { grid-template-columns: 1fr; text-align: center; }
    .sweet-mini-icon { margin: 0 auto; }
    .sweet-feature-copy .sweet-hero-actions { justify-content: center; }
    .sweet-feature-image { min-height: 340px; height: 340px; border-radius: 24px; }
    .sweet-feature-image img { min-height: 340px; }
    .sweet-feature-image::before { inset: 12px; border-radius: 18px; }
    .sweet-feature-badge { position: relative; left: auto; right: auto; bottom: auto; margin: -60px 14px 0; }
    .sweet-feature-badge-inner { grid-template-columns: 1fr; text-align: center; padding: 20px; }
    .sweet-feature-badge-mark { margin: 0 auto; }
    .sweet-feature-stats { grid-template-columns: 1fr; }
    .sweet-feature-stat { min-height: auto; text-align: center; }
  }



  @media (max-width: 1100px) {
    .sweet-why-hero { grid-template-columns: 1fr; }
    .sweet-why-copy { min-height: auto; }
    .sweet-why-list { grid-template-columns: repeat(2, 1fr); }
    .sweet-why-copy .sweet-section-head { text-align: center; margin-left: auto; margin-right: auto; }
  }

  @media (max-width: 700px) {
    .sweet-why { padding: 44px 0; }
    .sweet-why-shell { border-radius: 30px; }
    .sweet-why-hero { padding: 14px; gap: 14px; }
    .sweet-why-copy { padding: 30px 20px; border-radius: 24px; }
    .sweet-why-proof { grid-template-columns: 1fr; }
    .sweet-why-image { min-height: 340px; border-radius: 24px; }
    .sweet-why-image img { min-height: 340px; }
    .sweet-why-floating { left: 16px; right: 16px; bottom: 16px; padding: 20px; border-radius: 22px; }
    .sweet-why-list { grid-template-columns: 1fr; padding: 0 14px 14px; }
    .sweet-why-card { min-height: auto; text-align: center; }
    .sweet-why-icon { margin-left: auto; margin-right: auto; }
  }


  /* EXTRA TEXT FILL - added to use existing open space without removing the layout */
  .sweet-fill-copy {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    padding: 22px 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
  }

  .sweet-fill-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 14.5px;
    line-height: 1.74;
    font-weight: 550;
  }

  .sweet-fill-copy p + p { margin-top: 12px; }

  .sweet-fill-points {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    margin-top: 16px;
  }

  .sweet-fill-point {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 15px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.82);
    font-size: 13.5px;
    line-height: 1.56;
    font-weight: 600;
  }

  .sweet-fill-point strong {
    display: block;
    color: #ffffff;
    font-size: 14.5px;
    line-height: 1.25;
    font-weight: 950;
    margin-bottom: 4px;
  }

  .sweet-fill-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .sweet-fill-icon svg {
    width: 18px;
    height: 18px;
  }

  .sweet-light-fill {
    margin-top: 18px;
    padding: 22px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.06);
  }

  .sweet-light-fill h3 {
    margin: 0 0 10px;
    color: var(--sweet-heading);
    font-size: 18px;
    line-height: 1.24;
    font-weight: 950;
    letter-spacing: -0.02em;
  }

  .sweet-light-fill p {
    margin: 0;
    color: #5c6678;
    font-size: 14.2px;
    line-height: 1.72;
    font-weight: 500;
  }

  @media (max-width: 700px) {
    .sweet-fill-copy,
    .sweet-light-fill { margin-top: 20px; padding: 18px; border-radius: 20px; }
    .sweet-fill-point { grid-template-columns: 1fr; }
    .sweet-fill-icon { margin: 0 auto; }
  }


  /* ICON FIXES - correct sweets/service icons for all shared blocks */
  .sweet-kicker::before {
    width: 18px;
    height: 18px;
    border-radius: 0;
    background: currentColor;
    box-shadow: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 9h16v11H4V9Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M3 6h18v3H3V6Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 6v14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 6c-1.9-3.2-5.8-2.2-5 .5.5 1.6 2.6 1.7 5-.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 6c1.9-3.2 5.8-2.2 5 .5-.5 1.6-2.6 1.7-5-.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 9h16v11H4V9Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M3 6h18v3H3V6Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 6v14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 6c-1.9-3.2-5.8-2.2-5 .5.5 1.6 2.6 1.7 5-.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 6c1.9-3.2 5.8-2.2 5 .5-.5 1.6-2.6 1.7-5-.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .sweet-btn-icon,
  .sweet-service-number svg,
  .sweet-process-summary-item strong svg,
  .sweet-feature-stat strong svg,
  .sweet-why-proof-item strong svg {
    width: 24px;
    height: 24px;
    display: block;
    flex: 0 0 auto;
  }

  .sweet-service-number {
    color: var(--sweet-primary);
    font-size: 0;
  }

  .sweet-service-number svg {
    width: 25px;
    height: 25px;
  }

  .sweet-process-summary-item strong,
  .sweet-feature-stat strong,
  .sweet-why-proof-item strong {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    margin-bottom: 13px;
    font-size: 0;
    letter-spacing: 0;
  }

  .sweet-process-summary-item strong {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.20);
  }

  .sweet-feature-stat strong,
  .sweet-why-proof-item strong {
    color: var(--sweet-primary);
    background: radial-gradient(circle at 30% 20%, rgba(247, 183, 51, 0.22), transparent 42%), var(--sweet-pink);
    border: 1px solid rgba(195, 31, 38, 0.12);
  }

  .sweet-feature-stat,
  .sweet-why-proof-item,
  .sweet-process-summary-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .sweet-btn .sweet-btn-icon {
    width: 20px;
    height: 20px;
  }


/* =========================================================
   Portrait Service Styles
   Moved into common stylesheet from portrait-service.css
========================================================= */

:root {
    --sweet-primary: #c31f26;
    --sweet-primary-dark: #8f141a;
    --sweet-primary-deep: #5f0f13;
    --sweet-gold: #f7b733;
    --sweet-cream: #fff8f1;
    --sweet-pink: #fff1f3;
    --sweet-text: #283142;
    --sweet-heading: #101828;
    --sweet-muted: #667085;
    --sweet-card: #ffffff;
    --sweet-border: rgba(195, 31, 38, 0.12);
    --sweet-shadow: 0 28px 80px rgba(16, 24, 40, 0.12);
    --sweet-soft-shadow: 0 18px 48px rgba(16, 24, 40, 0.08);
    --sweet-radius: 34px;
  }

  * { box-sizing: border-box; }

  .sweet-page {
    overflow: hidden;
    color: var(--sweet-text);
    background:
      radial-gradient(circle at 8% 8%, rgba(195, 31, 38, 0.08), transparent 28%),
      radial-gradient(circle at 92% 4%, rgba(247, 183, 51, 0.14), transparent 24%),
      linear-gradient(180deg, #fffefe 0%, #fff8f8 42%, #ffffff 100%);
    font-family: inherit;
  }

  .sweet-container {
    width: 75%;
    margin: 0 auto;
  }

  .sweet-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    color: var(--sweet-primary);
    background: rgba(195, 31, 38, 0.08);
    border: 1px solid rgba(195, 31, 38, 0.14);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .sweet-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sweet-primary);
    box-shadow: 0 0 0 6px rgba(195, 31, 38, 0.12);
  }

  .sweet-title {
    margin: 16px 0 0;
    color: var(--sweet-heading);
    font-size: clamp(34px, 3.2vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.055em;
    font-weight: 850;
  }

  .sweet-subtitle {
    margin: 20px 0 0;
    color: var(--sweet-muted);
    font-size: 16.5px;
    line-height: 1.82;
    font-weight: 400;
  }

  .sweet-highlight { color: var(--sweet-primary); }

  .sweet-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 25px;
    border-radius: 999px;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 900;
    transition: 0.25s ease;
    font-family: inherit;
  }

  .sweet-btn:hover { transform: translateY(-3px); }

  .sweet-btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--sweet-primary), var(--sweet-primary-dark));
    box-shadow: 0 18px 36px rgba(195, 31, 38, 0.26);
  }

  .sweet-btn-light {
    color: var(--sweet-primary);
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.16);
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.06);
  }

  .sweet-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  .sweet-section-head {
    max-width: 850px;
    margin: 0 auto 46px;
    text-align: center;
  }

  .sweet-section-head .sweet-title {
    font-size: clamp(30px, 2.4vw, 58px);
    letter-spacing: -0.042em;
  }

  /* HERO */
  .sweet-hero {
    position: relative;
    padding: 112px 0 86px;
  }

  .sweet-hero::before {
    content: "";
    position: absolute;
    inset: 26px;
    border: 1px solid rgba(195, 31, 38, 0.08);
    border-radius: 46px;
    pointer-events: none;
  }

  .sweet-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 58px;
    align-items: center;
  }

  .sweet-hero-copy { max-width: 720px; }

  .sweet-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
  }

  .sweet-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
  }

  .sweet-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border-radius: 999px;
    color: #344054;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 12px 26px rgba(16, 24, 40, 0.06);
    font-size: 13px;
    font-weight: 800;
  }

  .sweet-trust-pill svg { color: var(--sweet-primary); }

  .sweet-hero-media { position: relative; }

  .sweet-hero-card {
    position: relative;
    overflow: hidden;
    padding: 12px;
    border-radius: 42px;
    background: #ffffff;
    box-shadow: var(--sweet-shadow);
  }

  .sweet-hero-card img {
    width: 100%;
    height: 570px;
    display: block;
    object-fit: cover;
    border-radius: 32px;
  }

  .sweet-hero-card::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 32px;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 28%, rgba(15, 23, 42, 0.56) 100%),
      linear-gradient(135deg, rgba(195, 31, 38, 0.18), transparent 55%);
    pointer-events: none;
  }

  .sweet-hero-badge {
    position: absolute;
    left: -22px;
    bottom: 36px;
    z-index: 2;
    width: min(345px, calc(100% - 30px));
    padding: 23px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 54px rgba(16, 24, 40, 0.18);
  }

  .sweet-hero-badge strong {
    display: block;
    color: var(--sweet-primary);
    font-size: 30px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 9px;
  }

  .sweet-hero-badge span {
    display: block;
    color: #475467;
    font-size: 14px;
    line-height: 1.62;
    font-weight: 600;
  }

  .sweet-floating {
    position: absolute;
    right: -18px;
    top: 38px;
    z-index: 2;
    padding: 18px;
    width: 214px;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sweet-primary), var(--sweet-primary-deep));
    box-shadow: 0 22px 42px rgba(195, 31, 38, 0.26);
  }

  .sweet-floating small {
    display: block;
    opacity: 0.84;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
  }

  .sweet-floating strong {
    display: block;
    font-size: 23px;
    line-height: 1.06;
    font-weight: 950;
  }

  /* SERVICE CARDS - FORMAL SWEETS UPGRADE */
  .sweet-services {
    position: relative;
    padding: 96px 0;
    background:
      radial-gradient(circle at 12% 12%, rgba(195, 31, 38, 0.06), transparent 24%),
      radial-gradient(circle at 88% 8%, rgba(247, 183, 51, 0.12), transparent 22%),
      linear-gradient(180deg, #ffffff 0%, #fffafa 100%);
  }

  .sweet-services::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 72px;
    width: min(74%, 1100px);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.22), transparent);
  }

  .sweet-services-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }

  .sweet-service-card {
    position: relative;
    overflow: hidden;
    min-height: 505px;
    padding: 0;
    border-radius: 28px;
    isolation: isolate;
    color: #ffffff;
    border: 0;
    background: #4b1118;
    box-shadow: 0 24px 58px rgba(16, 24, 40, 0.16);
    transition: 0.28s ease;
  }

  .sweet-service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 34px 76px rgba(195, 31, 38, 0.22);
  }

  .sweet-service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.24), transparent 24%),
      radial-gradient(circle at 82% 16%, rgba(247, 183, 51, 0.22), transparent 20%),
      linear-gradient(180deg, rgba(70, 8, 20, 0.04) 0%, rgba(70, 8, 20, 0.20) 42%, rgba(35, 5, 18, 0.92) 100%);
    pointer-events: none;
  }

  .sweet-service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(9, 2, 8, 0.20) 54%, rgba(9, 2, 8, 0.78) 100%);
    pointer-events: none;
  }

  .sweet-service-card:nth-child(1) { background: linear-gradient(135deg, #8f141a, #3a0814); }
  .sweet-service-card:nth-child(2) { background: linear-gradient(135deg, #b0182a, #400914); }
  .sweet-service-card:nth-child(3) { background: linear-gradient(135deg, #c23a52, #3d091b); }
  .sweet-service-card:nth-child(4) { background: linear-gradient(135deg, #f3a17f, #5a111b); }

  .sweet-service-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: 0.45s ease;
    z-index: 0;
  }

  .sweet-service-card:hover .sweet-service-bg { transform: scale(1.08); }

  .sweet-service-number {
    position: absolute;
    left: 22px;
    top: 22px;
    z-index: 4;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--sweet-primary);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.52);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.15);
    font-size: 13px;
    font-weight: 950;
  }

  .sweet-service-title-float {
    position: absolute;
    left: 24px;
    right: 24px;
    top: 78px;
    z-index: 4;
    color: #ffffff;
    font-size: clamp(27px, 2.1vw, 39px);
    line-height: 0.94;
    letter-spacing: -0.045em;
    font-weight: 950;
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  }

  .sweet-service-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 26px 24px 24px;
  }

  .sweet-service-content h3 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 21px;
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -0.025em;
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.30);
  }

  .sweet-service-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.90);
    font-size: 14.5px;
    line-height: 1.58;
    font-weight: 500;
    text-shadow: 0 7px 18px rgba(0, 0, 0, 0.28);
  }

  .sweet-service-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    min-height: 44px;
    margin-top: 18px;
    padding: 0 19px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #ef262d, var(--sweet-primary));
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 15px 34px rgba(195, 31, 38, 0.34);
    transition: 0.25s ease;
  }

  .sweet-service-link:hover {
    transform: translateY(-2px);
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(195, 31, 38, 0.42);
  }

  .sweet-service-link svg {
    width: 17px;
    height: 17px;
  }

  /* PROCESS - FORMAL EXECUTIVE REDESIGN */
  .sweet-process {
    position: relative;
    overflow: hidden;
    padding: 108px 0;
    background:
      radial-gradient(circle at 9% 12%, rgba(195, 31, 38, 0.08), transparent 27%),
      radial-gradient(circle at 92% 20%, rgba(247, 183, 51, 0.14), transparent 24%),
      linear-gradient(180deg, #fffefe 0%, #fff8f8 100%);
  }

  .sweet-process::before {
    content: "";
    position: absolute;
    inset: 38px 34px;
    border-radius: 48px;
    border: 1px solid rgba(195, 31, 38, 0.08);
    pointer-events: none;
  }

  .sweet-process::after {
    content: "";
    position: absolute;
    right: -160px;
    top: 48px;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: rgba(247, 183, 51, 0.10);
    pointer-events: none;
  }

  .sweet-process-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    gap: 34px;
    align-items: stretch;
  }

  .sweet-process-intro {
    position: relative;
    overflow: hidden;
    min-height: 610px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 46px;
    border-radius: 38px;
    color: #ffffff;
    background:
      radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.16), transparent 30%),
      radial-gradient(circle at 92% 12%, rgba(247, 183, 51, 0.28), transparent 28%),
      linear-gradient(135deg, var(--sweet-primary-deep), var(--sweet-primary) 58%, #8f141a);
    box-shadow: 0 30px 82px rgba(95, 15, 19, 0.22);
  }

  .sweet-process-intro::before {
    content: "";
    position: absolute;
    right: -88px;
    bottom: -88px;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    border: 38px solid rgba(255, 255, 255, 0.08);
  }

  .sweet-process-intro::after {
    content: "04";
    position: absolute;
    right: 34px;
    top: 30px;
    color: rgba(255, 255, 255, 0.09);
    font-size: clamp(92px, 10vw, 168px);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.08em;
  }

  .sweet-process-intro-content,
  .sweet-process-summary {
    position: relative;
    z-index: 1;
  }

  .sweet-process-intro .sweet-kicker {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
  }

  .sweet-process-intro .sweet-kicker::before {
    background: #ffffff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12);
  }

  .sweet-process-intro .sweet-title {
    max-width: 650px;
    margin-top: 20px;
    color: #ffffff;
    font-size: clamp(30px, 2.4vw, 58px);
    letter-spacing: -0.056em;
  }

  .sweet-process-intro .sweet-subtitle {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.82);
  }

  .sweet-process-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 36px;
  }

  .sweet-process-summary-item {
    min-height: 112px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
  }

  .sweet-process-summary-item strong {
    display: block;
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 10px;
  }

  .sweet-process-summary-item span {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 650;
  }

  .sweet-process-panel {
    position: relative;
    padding: 18px;
    border-radius: 38px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 26px 76px rgba(16, 24, 40, 0.10);
    backdrop-filter: blur(12px);
  }

  .sweet-process-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
    padding: 20px 22px;
    border-radius: 28px;
    background:
      radial-gradient(circle at 88% 0%, rgba(247, 183, 51, 0.14), transparent 34%),
      #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.10);
  }

  .sweet-process-panel-head h3 {
    margin: 0;
    color: var(--sweet-heading);
    font-size: 21px;
    line-height: 1.2;
    font-weight: 950;
    letter-spacing: -0.03em;
  }

  .sweet-process-panel-head span {
    color: #667085;
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 550;
  }

  .sweet-process-badge {
    flex: 0 0 auto;
    min-width: 96px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sweet-primary), var(--sweet-primary-dark));
    box-shadow: 0 14px 28px rgba(195, 31, 38, 0.22);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .sweet-process-grid {
    counter-reset: sweetStep;
    display: grid;
    gap: 14px;
  }

  .sweet-process-card {
    position: relative;
    overflow: hidden;
    counter-increment: sweetStep;
    display: grid;
    grid-template-columns: 86px 1fr auto;
    gap: 20px;
    align-items: center;
    min-height: 124px;
    padding: 22px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 16px 42px rgba(16, 24, 40, 0.065);
    transition: 0.26s ease;
  }

  .sweet-process-card:hover {
    transform: translateX(8px);
    border-color: rgba(195, 31, 38, 0.25);
    box-shadow: 0 24px 56px rgba(195, 31, 38, 0.13);
  }

  .sweet-process-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 7px;
    background: linear-gradient(180deg, var(--sweet-primary), var(--sweet-gold));
  }

  .sweet-process-card::after {
    content: "0" counter(sweetStep);
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    color: rgba(195, 31, 38, 0.16);
    background: rgba(195, 31, 38, 0.05);
    font-size: 29px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.05em;
  }

  .sweet-process-icon {
    position: relative;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    margin: 0;
    border-radius: 24px;
    color: var(--sweet-primary);
    background:
      radial-gradient(circle at 28% 20%, rgba(247, 183, 51, 0.28), transparent 34%),
      var(--sweet-pink);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.56);
  }

  .sweet-process-icon svg {
    width: 30px;
    height: 30px;
  }

  .sweet-step-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 8px;
    padding: 7px 11px;
    border-radius: 999px;
    color: var(--sweet-primary);
    background: rgba(195, 31, 38, 0.07);
    border: 1px solid rgba(195, 31, 38, 0.12);
    font-size: 10.5px;
    font-weight: 950;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .sweet-step-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--sweet-primary);
  }

  .sweet-process-card h3 {
    margin: 0 0 8px;
    color: var(--sweet-heading);
    font-size: 20px;
    line-height: 1.22;
    font-weight: 950;
    letter-spacing: -0.025em;
  }

  .sweet-process-card p {
    max-width: 520px;
    margin: 0;
    color: #536073;
    font-size: 14.5px;
    line-height: 1.66;
    font-weight: 450;
  }

  @media (max-width: 1100px) {
    .sweet-process-layout { grid-template-columns: 1fr; }
    .sweet-process-intro { min-height: auto; }
  }

  @media (max-width: 700px) {
    .sweet-process { padding: 64px 0; }
    .sweet-process::before { display: none; }
    .sweet-process-intro { padding: 32px 22px; border-radius: 28px; }
    .sweet-process-summary { grid-template-columns: 1fr; }
    .sweet-process-panel { padding: 12px; border-radius: 28px; }
    .sweet-process-panel-head { display: block; padding: 18px; border-radius: 22px; }
    .sweet-process-badge { margin-top: 14px; }
    .sweet-process-card { grid-template-columns: 1fr; min-height: auto; padding: 22px 20px; border-radius: 22px; }
    .sweet-process-card:hover { transform: translateY(-4px); }
    .sweet-process-card::after { position: absolute; right: 16px; top: 16px; width: 54px; height: 54px; font-size: 24px; }
    .sweet-process-icon { width: 62px; height: 62px; border-radius: 21px; }
    .sweet-process-icon svg { width: 27px; height: 27px; }
  }


  /* FEATURE SPLIT - FORMAL REDESIGN */
  .sweet-feature {
    position: relative;
    overflow: hidden;
    padding: 106px 0;
    background:
      radial-gradient(circle at 8% 14%, rgba(195, 31, 38, 0.08), transparent 28%),
      radial-gradient(circle at 88% 78%, rgba(247, 183, 51, 0.12), transparent 24%),
      linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
  }

  .sweet-feature::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.18), transparent);
  }

  .sweet-feature-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 34px;
    align-items: stretch;
    padding: 18px;
    border-radius: 44px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 34px 90px rgba(16, 24, 40, 0.10);
    backdrop-filter: blur(12px);
  }

  .sweet-feature-copy {
    position: relative;
    overflow: hidden;
    padding: 48px;
    border-radius: 32px;
    color: #ffffff;
    background:
      radial-gradient(circle at 15% 12%, rgba(255, 255, 255, 0.14), transparent 27%),
      radial-gradient(circle at 92% 10%, rgba(247, 183, 51, 0.20), transparent 25%),
      linear-gradient(135deg, var(--sweet-primary-deep) 0%, var(--sweet-primary-dark) 48%, #3d080d 100%);
  }

  .sweet-feature-copy::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 42px solid rgba(255, 255, 255, 0.06);
  }

  .sweet-feature-copy .sweet-section-head {
    position: relative;
    z-index: 1;
    text-align: left;
    margin: 0 0 30px;
    max-width: 100%;
  }

  .sweet-feature-copy .sweet-kicker {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
  }

  .sweet-feature-copy .sweet-kicker::before {
    background: #ffffff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12);
  }

  .sweet-feature-copy .sweet-title {
    color: #ffffff;
    font-size: clamp(30px, 2.4vw, 58px);
    line-height: 1.03;
    letter-spacing: -0.052em;
  }

  .sweet-feature-copy .sweet-subtitle {
    color: rgba(255, 255, 255, 0.80);
    max-width: 620px;
  }

  .sweet-feature-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
    margin-top: 30px;
  }

  .sweet-mini-card {
    position: relative;
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 16px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: none;
    transition: 0.25s ease;
  }

  .sweet-mini-card:hover {
    transform: translateX(7px);
    background: rgba(255, 255, 255, 0.15);
  }

  .sweet-mini-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 20px;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(247, 183, 51, 0.32), rgba(255, 255, 255, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .sweet-mini-icon svg { width: 24px; height: 24px; }

  .sweet-mini-card h3 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 16.5px;
    line-height: 1.24;
    font-weight: 950;
  }

  .sweet-mini-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 13.8px;
    line-height: 1.62;
  }

  .sweet-feature-copy .sweet-hero-actions {
    position: relative;
    z-index: 1;
    margin-top: 32px;
  }

  .sweet-feature-copy .sweet-btn-primary {
    color: var(--sweet-primary);
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
  }

  .sweet-feature-copy .sweet-btn-light {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.20);
    box-shadow: none;
  }

  .sweet-feature-media {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 18px;
    min-width: 0;
  }

  .sweet-feature-image {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 610px;
    border-radius: 32px;
    border: 0;
    box-shadow: none;
    background:
      linear-gradient(135deg, rgba(195, 31, 38, 0.08), rgba(247, 183, 51, 0.14)),
      #fff7e5;
  }

  .sweet-feature-image::before {
    content: "";
    position: absolute;
    inset: 22px;
    z-index: 2;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    pointer-events: none;
  }

  .sweet-feature-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 0%, rgba(15, 23, 42, 0.20) 100%),
      radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.40), transparent 25%);
    pointer-events: none;
  }

  .sweet-feature-image img {
    width: 100%;
    height: 100%;
    min-height: 610px;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
  }

  .sweet-feature-badge {
    position: absolute;
    left: 34px;
    right: 34px;
    bottom: 34px;
    z-index: 4;
    width: auto;
    padding: 0;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    box-shadow: 0 26px 60px rgba(16, 24, 40, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.70);
  }

  .sweet-feature-badge-inner {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 18px;
    align-items: center;
    padding: 22px;
  }

  .sweet-feature-badge-mark {
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    border-radius: 26px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sweet-primary), var(--sweet-primary-deep));
    box-shadow: 0 18px 32px rgba(195, 31, 38, 0.26);
  }

  .sweet-feature-badge-mark svg { width: 38px; height: 38px; }

  .sweet-feature-badge strong {
    display: block;
    color: var(--sweet-primary);
    font-size: 25px;
    line-height: 1.08;
    font-weight: 950;
    margin-bottom: 7px;
    letter-spacing: -0.03em;
  }

  .sweet-feature-badge span {
    display: block;
    color: #536073;
    font-size: 13.5px;
    line-height: 1.58;
    font-weight: 650;
  }

  .sweet-feature-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .sweet-feature-stat {
    min-height: 122px;
    padding: 20px;
    border-radius: 26px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 18px 42px rgba(16, 24, 40, 0.07);
  }

  .sweet-feature-stat strong {
    display: block;
    color: var(--sweet-heading);
    font-size: 30px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.04em;
    margin-bottom: 9px;
  }

  .sweet-feature-stat span {
    display: block;
    color: var(--sweet-muted);
    font-size: 13.5px;
    line-height: 1.46;
    font-weight: 650;
  }

  /* WHY - FORMAL REDESIGN */
  .sweet-why {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    background:
      radial-gradient(circle at 12% 8%, rgba(195, 31, 38, 0.10), transparent 28%),
      radial-gradient(circle at 92% 18%, rgba(247, 183, 51, 0.16), transparent 26%),
      linear-gradient(180deg, #fffefe 0%, #fff8f8 100%);
  }

  .sweet-why::before {
    content: "";
    position: absolute;
    left: -120px;
    top: 70px;
    width: 310px;
    height: 310px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.06);
    filter: blur(2px);
  }

  .sweet-why::after {
    content: "";
    position: absolute;
    right: -150px;
    bottom: -130px;
    width: 410px;
    height: 410px;
    border-radius: 50%;
    background: rgba(247, 183, 51, 0.13);
    filter: blur(2px);
  }

  .sweet-why-shell {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 46px;
    background:
      linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,250,250,.94));
    border: 1px solid rgba(195, 31, 38, 0.14);
    box-shadow: 0 34px 92px rgba(16, 24, 40, 0.10);
  }

  .sweet-why-hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 38px;
    align-items: stretch;
    padding: 34px;
  }

  .sweet-why-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 520px;
    padding: 48px 36px 48px 42px;
    border-radius: 34px;
    background:
      radial-gradient(circle at 5% 0%, rgba(247, 183, 51, 0.14), transparent 34%),
      linear-gradient(135deg, #ffffff 0%, #fff7f7 100%);
    border: 1px solid rgba(195, 31, 38, 0.12);
  }

  .sweet-why-copy .sweet-section-head {
    max-width: 690px;
    text-align: left;
    margin: 0;
  }

  .sweet-why-copy .sweet-title {
    font-size: clamp(30px, 2.4vw, 58px);
    letter-spacing: -0.052em;
  }

  .sweet-why-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 34px;
  }

  .sweet-why-proof-item {
    min-height: 112px;
    padding: 18px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.06);
  }

  .sweet-why-proof-item strong {
    display: block;
    color: var(--sweet-primary);
    font-size: 28px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 9px;
  }

  .sweet-why-proof-item span {
    display: block;
    color: #5c6678;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 650;
  }

  .sweet-why-image {
    position: relative;
    min-height: 520px;
    border-radius: 34px;
    overflow: hidden;
    background: var(--sweet-primary-deep);
    box-shadow: 0 26px 68px rgba(16, 24, 40, 0.16);
  }

  .sweet-why-image img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    display: block;
    object-fit: cover;
    transform: scale(1.02);
  }

  .sweet-why-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 18%, rgba(15, 23, 42, 0.72) 100%),
      linear-gradient(135deg, rgba(195, 31, 38, 0.32), transparent 58%);
    pointer-events: none;
  }

  .sweet-why-floating {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    z-index: 2;
    padding: 28px;
    border-radius: 28px;
    color: #ffffff;
    background: rgba(95, 15, 19, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.20);
  }

  .sweet-why-floating strong {
    display: block;
    color: #ffffff;
    font-size: 34px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -0.035em;
    margin-bottom: 10px;
  }

  .sweet-why-floating span {
    display: block;
    color: rgba(255, 255, 255, 0.86);
    font-size: 14px;
    line-height: 1.66;
    font-weight: 600;
  }

  .sweet-why-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 0 34px 34px;
  }

  .sweet-why-card {
    position: relative;
    overflow: hidden;
    min-height: 248px;
    padding: 26px;
    border-radius: 30px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.13);
    box-shadow: 0 20px 48px rgba(16, 24, 40, 0.07);
    transition: 0.28s ease;
  }

  .sweet-why-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--sweet-primary), var(--sweet-gold));
  }

  .sweet-why-card::after {
    content: "";
    position: absolute;
    right: -34px;
    top: -34px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.055);
  }

  .sweet-why-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 62px rgba(195, 31, 38, 0.13);
  }

  .sweet-why-icon {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 20px;
    color: var(--sweet-primary);
    background:
      radial-gradient(circle at 28% 18%, rgba(247, 183, 51, 0.28), transparent 44%),
      var(--sweet-pink);
    border: 1px solid rgba(195, 31, 38, 0.10);
  }

  .sweet-why-icon svg { width: 27px; height: 27px; }

  .sweet-why-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 10px;
    color: var(--sweet-heading);
    font-size: 18px;
    line-height: 1.22;
    font-weight: 950;
    letter-spacing: -0.018em;
  }

  .sweet-why-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #536073;
    font-size: 14px;
    line-height: 1.68;
  }

  /* TESTIMONIAL */
  .sweet-testimonial {
    padding: 96px 0;
    background: linear-gradient(180deg, #fffafa 0%, #ffffff 100%);
  }

  .sweet-testimonial-shell {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 24px;
    padding: 22px;
    border-radius: 46px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--sweet-border);
    box-shadow: var(--sweet-shadow);
  }

  .sweet-testimonial-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px;
    border-radius: 34px;
    color: #ffffff;
    background:
      radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.14), transparent 28%),
      linear-gradient(135deg, var(--sweet-primary-deep), var(--sweet-primary) 58%, #8f1018);
  }

  .sweet-testimonial-content .sweet-kicker {
    width: fit-content;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
  }

  .sweet-testimonial-content .sweet-kicker::before { background: #ffffff; box-shadow: none; }

  .sweet-testimonial-content h2 {
    margin: 18px 0 0;
    color: #ffffff;
    font-size: clamp(28px, 2.2vw, 66px);
    line-height: 1.08;
    letter-spacing: -0.045em;
    font-weight: 760;
  }

  .sweet-testimonial-content p {
    margin: 20px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 15.5px;
    line-height: 1.78;
  }

  .sweet-review {
    position: relative;
    margin-top: 30px;
    padding: 28px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .sweet-review blockquote {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    line-height: 1.58;
    font-weight: 700;
  }

  .sweet-review-author {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .sweet-avatar {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: var(--sweet-primary);
    background: #ffffff;
    font-size: 15px;
    font-weight: 950;
  }

  .sweet-person { display: flex; align-items: center; gap: 13px; }
  .sweet-person strong { display: block; color: #ffffff; font-size: 15px; font-weight: 900; }
  .sweet-person span { display: block; margin-top: 4px; color: rgba(255,255,255,.72); font-size: 13px; font-weight: 650; }
  .sweet-stars { color: #ffd166; letter-spacing: .06em; white-space: nowrap; }

  /* TESTIMONIAL SLIDER UPDATE */
  .sweet-review-slider {
    position: relative;
  }

  .sweet-review-slide {
    transition: opacity .35s ease;
  }

  .sweet-review-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .sweet-review-controls .sweet-review-author {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    flex: 1 1 auto;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .sweet-review-nav {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
  }

  .sweet-review-arrow {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    cursor: pointer;
    transition: .25s ease;
  }

  .sweet-review-arrow:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.16);
  }

  .sweet-review-arrow svg {
    width: 18px;
    height: 18px;
  }

  @media (max-width: 700px) {
    .sweet-review-controls {
      flex-direction: column;
      align-items: flex-start;
    }

    .sweet-review-controls .sweet-review-author {
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
    }

    .sweet-review-nav {
      width: 100%;
      justify-content: flex-start;
    }
  }

  .sweet-testimonial-visual {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 18px;
  }

  .sweet-testimonial-img {
    position: relative;
    overflow: hidden;
    min-height: 430px;
    border-radius: 34px;
    box-shadow: 0 24px 58px rgba(16, 24, 40, 0.12);
  }

  .sweet-testimonial-img img {
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
    display: block;
  }

  .sweet-testimonial-label {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    box-shadow: 0 22px 44px rgba(16, 24, 40, 0.15);
  }

  .sweet-testimonial-label strong {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sweet-primary), var(--sweet-primary-deep));
    font-size: 25px;
    line-height: 1;
    font-weight: 950;
  }

  .sweet-testimonial-label span {
    color: #475467;
    font-size: 13.5px;
    line-height: 1.58;
    font-weight: 650;
  }

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

  .sweet-benefit {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 112px;
    padding: 16px 16px 16px;
    border-radius: 24px;
    background:
      radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82) 34%, rgba(255, 248, 248, 0.94) 100%),
      linear-gradient(180deg, #ffffff 0%, #fffafa 100%);
    border: 1px solid rgba(195, 31, 38, 0.16);
    color: var(--sweet-heading);
    text-align: center;
    font-family: inherit;
    font-size: 13.8px;
    line-height: 1.24;
    font-weight: 950;
    box-shadow: 0 22px 54px rgba(16, 24, 40, 0.08);
    transition: 0.28s ease;
    isolation: isolate;
  }

  .sweet-benefit::before {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: 0;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, transparent, var(--sweet-primary), rgba(247, 183, 51, 0.45), transparent);
    opacity: 0.78;
  }

  .sweet-benefit::after {
    content: "✦";
    position: absolute;
    right: 32%;
    top: 14px;
    color: var(--sweet-primary);
    font-size: 9px;
    line-height: 1;
    opacity: 0.88;
  }

  .sweet-benefit:hover {
    transform: translateY(-6px);
    border-color: rgba(195, 31, 38, 0.28);
    box-shadow: 0 30px 66px rgba(195, 31, 38, 0.13);
  }

  .sweet-benefit-icon {
    position: relative;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--sweet-primary);
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow:
      0 10px 22px rgba(16, 24, 40, 0.07),
      inset 0 0 0 6px rgba(195, 31, 38, 0.035);
  }

  .sweet-benefit-icon::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid rgba(195, 31, 38, 0.13);
    border-top-color: var(--sweet-primary);
    transform: rotate(18deg);
  }

  .sweet-benefit-icon svg {
    width: 19px;
    height: 19px;
    color: var(--sweet-primary);
    position: relative;
    z-index: 1;
  }

  .sweet-benefit-line {
    position: relative;
    width: 38px;
    height: 1px;
    margin: 2px auto 0;
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.9), transparent);
  }

  .sweet-benefit-line::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    border: 1.5px solid var(--sweet-primary);
    background: #ffffff;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .sweet-benefit-text {
    display: block;
    color: #07111f;
    font-size: 13.5px;
    font-weight: 950;
    letter-spacing: -0.015em;
  }

  /* MODAL */
  .sweet-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .sweet-modal.is-open { display: flex; }

  .sweet-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(8px);
  }

  .sweet-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(900px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 32px;
    background: #ffffff;
    box-shadow: 0 34px 90px rgba(15, 23, 42, 0.28);
    animation: sweetModalIn 0.25s ease;
  }

  @keyframes sweetModalIn {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .sweet-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 28px 30px 24px;
    border-bottom: 1px solid rgba(195, 31, 38, 0.12);
    background:
      radial-gradient(circle at 92% 0%, rgba(247, 183, 51, 0.16), transparent 25%),
      linear-gradient(135deg, #fff7f7 0%, #ffffff 66%);
  }

  .sweet-modal-kicker {
    color: var(--sweet-primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  .sweet-modal-title {
    margin: 0;
    color: var(--sweet-heading);
    font-size: clamp(25px, 2.1vw, 40px);
    line-height: 1.12;
    letter-spacing: -0.03em;
    font-weight: 900;
  }

  .sweet-modal-close {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: #ffffff;
    color: var(--sweet-heading);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .25s ease;
  }

  .sweet-modal-close:hover { transform: rotate(90deg); color: var(--sweet-primary); }
  .sweet-modal-close svg { width: 22px; height: 22px; }

  .sweet-modal-body {
    max-height: calc(100vh - 210px);
    overflow: auto;
    padding: 28px 30px 30px;
  }

  .sweet-modal-intro {
    margin: 0 0 18px;
    padding: 20px 22px;
    border-radius: 22px;
    color: #344054;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 14px 34px rgba(16, 24, 40, 0.06);
    font-size: 15.5px;
    line-height: 1.75;
    font-weight: 500;
  }

  .sweet-modal-points {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .sweet-modal-points li {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #3f4857;
    font-size: 15px;
    line-height: 1.68;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.04);
  }

  .sweet-modal-point-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--sweet-primary);
    background: var(--sweet-pink);
  }

  .sweet-modal-point-icon svg { width: 21px; height: 21px; }
  .sweet-modal-points strong { color: var(--sweet-heading); font-weight: 900; }

  .sweet-modal-note {
    margin-top: 18px;
    padding: 19px 22px;
    border-radius: 20px;
    border-left: 4px solid var(--sweet-primary);
    background: rgba(195, 31, 38, 0.06);
    color: #3f4857;
    font-size: 14.5px;
    line-height: 1.65;
    font-weight: 500;
  }

  .sweet-modal-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 30px 26px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
  }

  .sweet-modal-help {
    color: #667085;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
  }

  .sweet-modal-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sweet-primary), var(--sweet-primary-dark));
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 16px 28px rgba(195, 31, 38, 0.22);
  }

  @media (max-width: 1100px) {
    .sweet-hero-grid,
    .sweet-feature-wrap,
    .sweet-why-grid,
    .sweet-testimonial-shell { grid-template-columns: 1fr; }
    .sweet-services-grid,
    .sweet-process-grid { grid-template-columns: repeat(2, 1fr); }
    .sweet-feature-copy .sweet-section-head,
    .sweet-why-copy .sweet-section-head { text-align: center; margin-left: auto; margin-right: auto; }
    .sweet-feature-image { height: 520px; }
    .sweet-why-image { min-height: 520px; }
    .sweet-feature-badge { left: 24px; }
  }

  @media (max-width: 700px) {
    .sweet-container { width: min(92%, 1440px); }
    .sweet-hero { padding: 60px 0 56px; }
    .sweet-hero::before { display: none; }
    .sweet-services,
    .sweet-process,
    .sweet-feature,
    .sweet-why,
    .sweet-testimonial { padding: 58px 0; }
    .sweet-title { font-size: clamp(34px, 10vw, 52px); }
    .sweet-section-head { margin-bottom: 32px; }
    .sweet-hero-card { border-radius: 28px; padding: 8px; }
    .sweet-hero-card img { height: 390px; border-radius: 22px; }
    .sweet-hero-card::after { inset: 8px; border-radius: 22px; }
    .sweet-hero-badge,
    .sweet-floating,
    .sweet-feature-badge { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; margin: -46px 16px 0; }
    .sweet-floating { margin-top: 14px; }
    .sweet-services-grid,
    .sweet-process-grid,
    .sweet-feature-list,
    .sweet-benefits { grid-template-columns: 1fr; }
    .sweet-service-card { min-height: 470px; }
    .sweet-service-title-float { top: 76px; font-size: 34px; }
    .sweet-service-content { padding: 24px 22px 22px; }
    .sweet-feature-image { height: 390px; border-radius: 28px; border-width: 8px; }
    .sweet-why-image { min-height: 410px; border-radius: 28px; }
    .sweet-why-floating { left: 16px; right: 16px; bottom: 16px; padding: 18px; border-radius: 22px; }
    .sweet-why-card { grid-template-columns: 1fr; text-align: center; }
    .sweet-why-icon { margin: 0 auto; }
    .sweet-testimonial-shell { padding: 12px; border-radius: 30px; }
    .sweet-testimonial-content { padding: 34px 22px; border-radius: 24px; }
    .sweet-review blockquote { font-size: 17px; }
    .sweet-review-author { flex-direction: column; align-items: flex-start; }
    .sweet-testimonial-img,
    .sweet-testimonial-img img { min-height: 360px; border-radius: 24px; }
    .sweet-testimonial-label { left: 14px; right: 14px; bottom: 14px; grid-template-columns: 1fr; }
    .sweet-modal { padding: 14px; }
    .sweet-modal-dialog { border-radius: 24px; }
    .sweet-modal-head,
    .sweet-modal-body,
    .sweet-modal-foot { padding-left: 20px; padding-right: 20px; }
    .sweet-modal-points li { grid-template-columns: 1fr; }
  }

  @media (max-width: 1100px) {
    .sweet-feature-wrap { grid-template-columns: 1fr; }
    .sweet-feature-copy .sweet-section-head { text-align: center; margin-left: auto; margin-right: auto; }
    .sweet-feature-copy { padding: 42px 34px; }
    .sweet-feature-image { min-height: 520px; height: 520px; }
    .sweet-feature-image img { min-height: 520px; }
  }

  @media (max-width: 700px) {
    .sweet-feature-wrap { padding: 10px; border-radius: 30px; gap: 12px; }
    .sweet-feature-copy { padding: 32px 20px; border-radius: 24px; }
    .sweet-mini-card { grid-template-columns: 1fr; text-align: center; }
    .sweet-mini-icon { margin: 0 auto; }
    .sweet-feature-copy .sweet-hero-actions { justify-content: center; }
    .sweet-feature-image { min-height: 390px; height: 390px; border-radius: 24px; }
    .sweet-feature-image img { min-height: 390px; }
    .sweet-feature-image::before { inset: 12px; border-radius: 18px; }
    .sweet-feature-badge { position: relative; left: auto; right: auto; bottom: auto; margin: -60px 14px 0; }
    .sweet-feature-badge-inner { grid-template-columns: 1fr; text-align: center; padding: 20px; }
    .sweet-feature-badge-mark { margin: 0 auto; }
    .sweet-feature-stats { grid-template-columns: 1fr; }
    .sweet-feature-stat { min-height: auto; text-align: center; }
  }



  @media (max-width: 1100px) {
    .sweet-why-hero { grid-template-columns: 1fr; }
    .sweet-why-copy { min-height: auto; }
    .sweet-why-list { grid-template-columns: repeat(2, 1fr); }
    .sweet-why-copy .sweet-section-head { text-align: center; margin-left: auto; margin-right: auto; }
  }

  @media (max-width: 700px) {
    .sweet-why { padding: 58px 0; }
    .sweet-why-shell { border-radius: 30px; }
    .sweet-why-hero { padding: 14px; gap: 14px; }
    .sweet-why-copy { padding: 30px 20px; border-radius: 24px; }
    .sweet-why-proof { grid-template-columns: 1fr; }
    .sweet-why-image { min-height: 390px; border-radius: 24px; }
    .sweet-why-image img { min-height: 390px; }
    .sweet-why-floating { left: 16px; right: 16px; bottom: 16px; padding: 20px; border-radius: 22px; }
    .sweet-why-list { grid-template-columns: 1fr; padding: 0 14px 14px; }
    .sweet-why-card { min-height: auto; text-align: center; }
    .sweet-why-icon { margin-left: auto; margin-right: auto; }
  }


  /* EXTRA TEXT FILL - added to use existing open space without removing the layout */
  .sweet-fill-copy {
    position: relative;
    z-index: 1;
    margin-top: 26px;
    padding: 22px 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
  }

  .sweet-fill-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 14.5px;
    line-height: 1.74;
    font-weight: 550;
  }

  .sweet-fill-copy p + p { margin-top: 12px; }

  .sweet-fill-points {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    margin-top: 24px;
  }

  .sweet-fill-point {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 15px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.82);
    font-size: 13.5px;
    line-height: 1.56;
    font-weight: 600;
  }

  .sweet-fill-point strong {
    display: block;
    color: #ffffff;
    font-size: 14.5px;
    line-height: 1.25;
    font-weight: 950;
    margin-bottom: 4px;
  }

  .sweet-fill-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
  }

  .sweet-fill-icon svg {
    width: 18px;
    height: 18px;
  }

  .sweet-light-fill {
    margin-top: 26px;
    padding: 22px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.06);
  }

  .sweet-light-fill h3 {
    margin: 0 0 10px;
    color: var(--sweet-heading);
    font-size: 18px;
    line-height: 1.24;
    font-weight: 950;
    letter-spacing: -0.02em;
  }

  .sweet-light-fill p {
    margin: 0;
    color: #5c6678;
    font-size: 14.2px;
    line-height: 1.72;
    font-weight: 500;
  }

  @media (max-width: 700px) {
    .sweet-fill-copy,
    .sweet-light-fill { margin-top: 20px; padding: 18px; border-radius: 20px; }
    .sweet-fill-point { grid-template-columns: 1fr; }
    .sweet-fill-icon { margin: 0 auto; }
  }


  /* ICON FIXES - correct studio/service icons for all shared blocks */
  .sweet-kicker::before {
    width: 18px;
    height: 18px;
    border-radius: 0;
    background: currentColor;
    box-shadow: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 9h16v11H4V9Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M3 6h18v3H3V6Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 6v14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 6c-1.9-3.2-5.8-2.2-5 .5.5 1.6 2.6 1.7 5-.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 6c1.9-3.2 5.8-2.2 5 .5-.5 1.6-2.6 1.7-5-.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 9h16v11H4V9Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M3 6h18v3H3V6Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 6v14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 6c-1.9-3.2-5.8-2.2-5 .5.5 1.6 2.6 1.7 5-.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 6c1.9-3.2 5.8-2.2 5 .5-.5 1.6-2.6 1.7-5-.5Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .sweet-btn-icon,
  .sweet-service-number svg,
  .sweet-process-summary-item strong svg,
  .sweet-feature-stat strong svg,
  .sweet-why-proof-item strong svg {
    width: 24px;
    height: 24px;
    display: block;
    flex: 0 0 auto;
  }

  .sweet-service-number {
    color: var(--sweet-primary);
    font-size: 0;
  }

  .sweet-service-number svg {
    width: 25px;
    height: 25px;
  }

  .sweet-process-summary-item strong,
  .sweet-feature-stat strong,
  .sweet-why-proof-item strong {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    margin-bottom: 13px;
    font-size: 0;
    letter-spacing: 0;
  }

  .sweet-process-summary-item strong {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.20);
  }

  .sweet-feature-stat strong,
  .sweet-why-proof-item strong {
    color: var(--sweet-primary);
    background: radial-gradient(circle at 30% 20%, rgba(247, 183, 51, 0.22), transparent 42%), var(--sweet-pink);
    border: 1px solid rgba(195, 31, 38, 0.12);
  }

  .sweet-feature-stat,
  .sweet-why-proof-item,
  .sweet-process-summary-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .sweet-btn .sweet-btn-icon {
    width: 20px;
    height: 20px;
  }


  /* STUDIO ICON UPDATE - camera icon for section labels */
  .sweet-kicker::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 8h4l1.6-2.5h4.8L16 8h4v11H4V8Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z' stroke='black' stroke-width='2'/%3E%3Cpath d='M18 11h.01' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 8h4l1.6-2.5h4.8L16 8h4v11H4V8Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z' stroke='black' stroke-width='2'/%3E%3Cpath d='M18 11h.01' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }



  /* =========================================================
     FULL PAGE DESIGN REFRESH - PORTRAIT SERVICE
     Applied to all sections except the last testimonial part.
     Keeps old EJS logic, modals, buttons, and content unchanged.
  ========================================================= */
  .sweet-page {
    background:
      radial-gradient(circle at 6% 7%, rgba(195, 31, 38, 0.13), transparent 24%),
      radial-gradient(circle at 92% 10%, rgba(247, 183, 51, 0.12), transparent 26%),
      linear-gradient(180deg, #fffefe 0%, #fff6f6 34%, #ffffff 100%);
  }

  .sweet-container {
    width: min(89%, 1480px);
  }

  .sweet-title {
    font-weight: 850;
    letter-spacing: -0.045em;
  }

  .sweet-subtitle {
    color: #5d6678;
    font-size: 16px;
    line-height: 1.78;
  }

  .sweet-btn {
    min-height: 56px;
    padding: 0 28px;
    border-radius: 18px;
  }

  .sweet-btn-primary {
    background: linear-gradient(135deg, #c31f26 0%, #8f141a 100%);
    box-shadow: 0 18px 42px rgba(195, 31, 38, 0.28);
  }

  .sweet-btn-light {
    color: #8f141a;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(195, 31, 38, 0.18);
  }

  /* Hero: premium studio landing style */
  .sweet-hero {
    padding: 92px 0 76px;
    background:
      linear-gradient(135deg, rgba(16, 24, 40, 0.04), rgba(195, 31, 38, 0.035)),
      radial-gradient(circle at 78% 20%, rgba(247, 183, 51, 0.16), transparent 24%);
  }

  .sweet-hero::before {
    inset: 22px 38px;
    border-radius: 34px;
    border-color: rgba(195, 31, 38, 0.12);
    background: rgba(255, 255, 255, 0.24);
  }

  .sweet-hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 46px;
    padding: 24px;
    border-radius: 38px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(195, 31, 38, 0.13);
    box-shadow: 0 34px 92px rgba(16, 24, 40, 0.10);
    backdrop-filter: blur(14px);
  }

  .sweet-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px 18px 34px 26px;
  }

  .sweet-hero .sweet-title {
    font-size: clamp(36px, 4.2vw, 82px);
    line-height: 1.03;
  }

  .sweet-hero .sweet-subtitle {
    max-width: 760px;
    font-size: 17px;
  }

  .sweet-hero-card {
    padding: 0;
    border-radius: 34px;
    background: #111827;
    box-shadow: 0 30px 86px rgba(15, 23, 42, 0.20);
  }

  .sweet-hero-card img {
    height: 560px;
    border-radius: 34px;
  }

  .sweet-hero-card::after {
    inset: 0;
    border-radius: 34px;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 35%, rgba(15, 23, 42, 0.72) 100%),
      linear-gradient(135deg, rgba(195, 31, 38, 0.28), rgba(247, 183, 51, 0.08));
  }

  /* Services: formal card grid */
  .sweet-services {
    padding: 96px 0 104px;
    background:
      radial-gradient(circle at 8% 12%, rgba(195, 31, 38, 0.08), transparent 24%),
      linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
  }

  .sweet-services::before {
    top: 52px;
    width: min(89%, 1220px);
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.28), rgba(247, 183, 51, 0.24), transparent);
  }

  .sweet-services-grid {
    gap: 20px;
  }

  .sweet-service-card {
    min-height: 475px;
    border-radius: 26px;
    box-shadow: 0 24px 62px rgba(16, 24, 40, 0.13);
  }

  .sweet-service-card::before {
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.08) 0%, rgba(15, 23, 42, 0.24) 45%, rgba(15, 23, 42, 0.90) 100%),
      linear-gradient(135deg, rgba(195, 31, 38, 0.20), transparent 62%);
  }

  .sweet-service-card::after {
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(15, 23, 42, 0.38) 55%, rgba(15, 23, 42, 0.86) 100%);
  }

  .sweet-service-number {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, #c31f26, #8f141a);
    border: 1px solid rgba(255, 255, 255, 0.28);
  }

  .sweet-service-title-float {
    top: 90px;
    font-size: clamp(26px, 1.8vw, 34px);
    line-height: 1.03;
  }

  .sweet-service-content {
    padding: 28px 24px 26px;
  }

  .sweet-service-content h3 {
    font-size: 20px;
  }

  .sweet-service-link {
    border-radius: 16px;
    background: #ffffff;
    color: #c31f26;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
  }

  .sweet-service-link:hover {
    color: #c31f26;
    background: #fff3f3;
  }

  /* Process: clean executive workflow */
  .sweet-process {
    padding: 104px 0;
    background:
      radial-gradient(circle at 88% 12%, rgba(247, 183, 51, 0.15), transparent 26%),
      linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
  }

  .sweet-process::before {
    inset: 34px 42px;
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.46);
  }

  .sweet-process-layout {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 24px;
  }

  .sweet-process-intro {
    min-height: 590px;
    border-radius: 32px;
    padding: 42px;
    background:
      linear-gradient(135deg, rgba(18, 24, 38, 0.94), rgba(95, 15, 19, 0.96)),
      radial-gradient(circle at 10% 10%, rgba(247, 183, 51, 0.24), transparent 28%);
  }

  .sweet-fill-copy,
  .sweet-fill-point {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.16);
  }

  .sweet-process-summary {
    gap: 12px;
  }

  .sweet-process-summary-item {
    border-radius: 20px;
  }

  .sweet-process-panel {
    border-radius: 32px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.92);
  }

  .sweet-process-panel-head {
    border-radius: 24px;
  }

  .sweet-process-card {
    grid-template-columns: 76px 1fr auto;
    min-height: 118px;
    border-radius: 24px;
  }

  .sweet-process-icon {
    width: 62px;
    height: 62px;
    border-radius: 20px;
  }

  /* Feature: split production showcase */
  .sweet-feature {
    padding: 104px 0;
    background:
      linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
  }

  .sweet-feature-wrap {
    border-radius: 36px;
    padding: 16px;
    box-shadow: 0 34px 90px rgba(16, 24, 40, 0.11);
  }

  .sweet-feature-copy {
    border-radius: 28px;
    padding: 46px;
    background:
      radial-gradient(circle at 16% 10%, rgba(247, 183, 51, 0.18), transparent 24%),
      linear-gradient(135deg, #5f0f13 0%, #8f141a 52%, #101828 100%);
  }

  .sweet-mini-card {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.11);
  }

  .sweet-feature-image,
  .sweet-feature-image img {
    min-height: 590px;
  }

  .sweet-feature-image {
    border-radius: 28px;
  }

  .sweet-feature-badge {
    border-radius: 24px;
  }

  .sweet-feature-stat {
    border-radius: 22px;
    min-height: 112px;
  }

  /* Why: modern trust block */
  .sweet-why {
    padding: 104px 0;
    background:
      radial-gradient(circle at 12% 12%, rgba(195, 31, 38, 0.08), transparent 24%),
      linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
  }

  .sweet-why-shell {
    border-radius: 36px;
    box-shadow: 0 32px 84px rgba(16, 24, 40, 0.10);
  }

  .sweet-why-hero {
    gap: 24px;
    padding: 24px;
  }

  .sweet-why-copy {
    border-radius: 28px;
    min-height: 500px;
    padding: 42px;
  }

  .sweet-why-proof {
    gap: 12px;
  }

  .sweet-why-proof-item {
    border-radius: 20px;
  }

  .sweet-why-image {
    border-radius: 28px;
  }

  .sweet-why-floating {
    border-radius: 24px;
    background: rgba(16, 24, 40, 0.76);
  }

  .sweet-why-list {
    gap: 14px;
    padding: 0 24px 24px;
  }

  .sweet-why-card {
    min-height: 230px;
    border-radius: 24px;
  }

  .sweet-why-icon {
    border-radius: 18px;
  }

  /* Keep the last part unchanged */
  .sweet-testimonial,
  .sweet-testimonial * {
    /* no new design override for the final testimonial section */
  }

  @media (max-width: 1100px) {
    .sweet-hero-grid,
    .sweet-process-layout,
    .sweet-feature-wrap,
    .sweet-why-hero {
      grid-template-columns: 1fr;
    }

    .sweet-services-grid,
    .sweet-why-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 700px) {
    .sweet-container { width: 92%; }
    .sweet-hero-grid { padding: 14px; border-radius: 28px; }
    .sweet-hero-copy { padding: 24px 10px; text-align: center; }
    .sweet-hero-actions { justify-content: center; }
    .sweet-hero-card img { height: 390px; }
    .sweet-services-grid,
    .sweet-why-list { grid-template-columns: 1fr; }
    .sweet-service-card { min-height: 440px; }
    .sweet-process-intro,
    .sweet-feature-copy,
    .sweet-why-copy { padding: 28px 20px; border-radius: 24px; }
    .sweet-feature-image,
    .sweet-feature-image img { min-height: 390px; }
  }



  /* HERO UPDATE - studio design similar to shared reference, not exact copy */
  .sweet-studio-hero-v2 {
    position: relative;
    padding: 92px 0 74px;
    overflow: hidden;
    background:
      linear-gradient(90deg, rgba(195,31,38,0.10) 0%, rgba(255,255,255,0.96) 43%, rgba(247,183,51,0.12) 100%),
      linear-gradient(rgba(195,31,38,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(195,31,38,0.035) 1px, transparent 1px);
    background-size: auto, 32px 32px, 32px 32px;
  }

  .sweet-studio-hero-v2::before {
    display: none;
  }

  .studio-hero-word {
    position: absolute;
    left: 4%;
    top: 18px;
    z-index: 0;
    color: rgba(195,31,38,0.055);
    font-size: clamp(58px, 9vw, 168px);
    line-height: .85;
    font-weight: 950;
    letter-spacing: -.075em;
    white-space: nowrap;
    pointer-events: none;
    text-transform: uppercase;
  }

  .studio-hero-v2-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 42px;
    align-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .studio-hero-v2-copy {
    padding: 38px 0 34px;
    max-width: 760px;
  }

  .sweet-studio-hero-v2 .sweet-kicker {
    color: #b01821;
    background: rgba(255,255,255,.58);
    border-color: rgba(195,31,38,.20);
    box-shadow: 0 14px 34px rgba(195,31,38,.08);
  }

  .sweet-studio-hero-v2 .sweet-title {
    max-width: 790px;
    margin-top: 18px;
    color: #07152d;
    font-size: clamp(38px, 4vw, 74px);
    line-height: 1.03;
    letter-spacing: -.058em;
    font-weight: 950;
  }

  .sweet-studio-hero-v2 .sweet-highlight {
    color: #d42d35;
    font-weight: 450;
    text-decoration: underline;
    text-decoration-color: rgba(247,183,51,.72);
    text-underline-offset: 7px;
    text-decoration-thickness: 4px;
  }

  .sweet-studio-hero-v2 .sweet-subtitle {
    max-width: 720px;
    margin-top: 26px;
    color: #33445f;
    font-size: 17px;
    line-height: 1.85;
    font-weight: 470;
  }

  .studio-hero-v2-actions {
    margin-top: 34px;
    gap: 14px;
  }

  .sweet-studio-hero-v2 .sweet-btn {
    min-height: 58px;
    border-radius: 999px;
    padding: 0 27px;
    font-size: 14px;
    box-shadow: 0 18px 42px rgba(15,23,42,.10);
  }

  .sweet-studio-hero-v2 .sweet-btn-primary {
    background: linear-gradient(135deg, #c31f26, #92141b);
    box-shadow: 0 20px 42px rgba(195,31,38,.25);
  }

  .sweet-studio-hero-v2 .sweet-btn-light {
    background: rgba(255,255,255,.76);
    border: 1px solid rgba(195,31,38,.18);
    color: #b01821;
  }

  .studio-hero-v2-pills {
    margin-top: 30px;
    gap: 13px;
  }

  .studio-hero-v2-pills .sweet-trust-pill {
    min-height: 48px;
    padding: 0 16px;
    background: rgba(255,255,255,.72);
    border-color: rgba(195,31,38,.14);
    color: #17243b;
    box-shadow: 0 16px 34px rgba(15,23,42,.07);
  }

  .studio-hero-v2-pills .sweet-trust-pill svg {
    width: 18px;
    height: 18px;
  }

  .studio-hero-v2-media {
    min-height: 560px;
    position: relative;
  }

  .studio-hero-v2-card {
    position: absolute;
    right: 26px;
    top: 0;
    width: calc(100% - 38px);
    height: 548px;
    padding: 12px;
    overflow: hidden;
    border-radius: 38px;
    background: #ffffff;
    box-shadow: 0 34px 86px rgba(15,23,42,.17);
  }

  .studio-hero-v2-card img {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 29px;
    filter: saturate(1.04) contrast(1.02);
  }

  .studio-hero-v2-card::after {
    inset: 12px;
    border-radius: 29px;
    background:
      linear-gradient(180deg, rgba(12,21,38,0.06) 0%, rgba(12,21,38,0.14) 44%, rgba(12,21,38,0.64) 100%),
      linear-gradient(135deg, rgba(195,31,38,.18), transparent 56%);
  }

  .studio-hero-perfect {
    position: absolute;
    right: 0;
    top: 44px;
    z-index: 5;
    width: 205px;
    padding: 21px 20px;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, #b01821, #7d1016);
    box-shadow: 0 26px 50px rgba(125,16,22,.28);
  }

  .studio-hero-perfect small {
    display: block;
    margin-bottom: 10px;
    color: rgba(255,255,255,.86);
    font-size: 12px;
    font-weight: 700;
  }

  .studio-hero-perfect strong {
    display: block;
    color: #ffffff;
    font-size: 23px;
    line-height: 1.02;
    letter-spacing: -.03em;
    font-weight: 950;
  }

  .studio-hero-info-card {
    position: absolute;
    left: 0;
    bottom: 22px;
    z-index: 5;
    width: min(430px, 82%);
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 16px;
    align-items: center;
    padding: 22px;
    border-radius: 25px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(195,31,38,.12);
    box-shadow: 0 26px 68px rgba(15,23,42,.16);
    backdrop-filter: blur(14px);
  }

  .studio-hero-info-icon {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, #c31f26, #7d1016);
    box-shadow: 0 18px 34px rgba(195,31,38,.25);
  }

  .studio-hero-info-icon svg {
    width: 36px;
    height: 36px;
  }

  .studio-hero-info-card strong {
    display: block;
    margin-bottom: 8px;
    color: #c31f26;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -.035em;
    font-weight: 950;
  }

  .studio-hero-info-card span {
    display: block;
    color: #536073;
    font-size: 13.8px;
    line-height: 1.62;
    font-weight: 560;
  }

  @media (max-width: 1100px) {
    .studio-hero-v2-grid { grid-template-columns: 1fr; gap: 26px; }
    .studio-hero-v2-copy { max-width: 100%; text-align: center; padding-top: 20px; }
    .studio-hero-v2-actions, .studio-hero-v2-pills { justify-content: center; }
    .studio-hero-v2-media { min-height: 560px; }
    .studio-hero-v2-card { left: 36px; right: 36px; width: auto; }
    .studio-hero-perfect { right: 8px; }
    .studio-hero-info-card { left: 8px; }
  }

  @media (max-width: 700px) {
    .sweet-studio-hero-v2 { padding: 58px 0 56px; background-size: auto, 24px 24px, 24px 24px; }
    .studio-hero-word { top: 28px; left: 3%; font-size: 58px; opacity: .75; }
    .sweet-studio-hero-v2 .sweet-title { font-size: clamp(34px, 10vw, 48px); }
    .sweet-studio-hero-v2 .sweet-subtitle { font-size: 15.5px; line-height: 1.75; }
    .studio-hero-v2-copy { padding: 8px 0 0; }
    .studio-hero-v2-media { min-height: 510px; }
    .studio-hero-v2-card { left: 0; right: 0; top: 0; width: 100%; height: 390px; padding: 8px; border-radius: 28px; }
    .studio-hero-v2-card img { border-radius: 21px; }
    .studio-hero-v2-card::after { inset: 8px; border-radius: 21px; }
    .studio-hero-perfect { top: 16px; right: 12px; width: 168px; padding: 16px; border-radius: 20px; }
    .studio-hero-perfect strong { font-size: 19px; }
    .studio-hero-info-card { left: 12px; right: 12px; bottom: 0; width: auto; grid-template-columns: 1fr; text-align: center; padding: 20px; }
    .studio-hero-info-icon { margin: 0 auto; width: 66px; height: 66px; border-radius: 22px; }
    .studio-hero-info-card strong { font-size: 24px; }
  }



  /* SPACING REDUCTION ONLY - keep same design, content and logic */
  .sweet-hero { padding: 72px 0 52px !important; }
  .sweet-services,
  .sweet-process,
  .sweet-feature,
  .sweet-why,
  .sweet-testimonial { padding: 56px 0 !important; }

  .sweet-section-head { margin-bottom: 24px !important; }
  .sweet-title { margin-top: 10px !important; }
  .sweet-subtitle { margin-top: 12px !important; line-height: 1.68 !important; }

  .sweet-hero-grid { gap: 34px !important; }
  .sweet-hero-actions { margin-top: 20px !important; gap: 10px !important; }
  .sweet-trust-row { margin-top: 18px !important; gap: 9px !important; }
  .sweet-trust-pill { padding: 9px 12px !important; }

  .sweet-services::before { top: 42px !important; }
  .sweet-services-grid { gap: 14px !important; }
  .sweet-service-card { min-height: 445px !important; }
  .sweet-service-number { top: 16px !important; left: 16px !important; }
  .sweet-service-title-float { top: 66px !important; left: 18px !important; right: 18px !important; }
  .sweet-service-content { padding: 20px 18px 18px !important; }
  .sweet-service-content h3 { margin-bottom: 7px !important; }
  .sweet-service-link { margin-top: 12px !important; min-height: 40px !important; }

  .sweet-process::before { inset: 22px 24px !important; }
  .sweet-process::after { top: 22px !important; }
  .sweet-process-layout { gap: 22px !important; }
  .sweet-process-intro { min-height: 500px !important; padding: 34px !important; }
  .sweet-process-intro .sweet-title { margin-top: 14px !important; }
  .sweet-process-summary { margin-top: 22px !important; gap: 10px !important; }
  .sweet-process-summary-item { min-height: 92px !important; padding: 14px !important; }
  .sweet-process-summary-item strong { margin-bottom: 6px !important; }
  .sweet-process-panel { padding: 12px !important; }
  .sweet-process-panel-head { margin-bottom: 10px !important; padding: 15px 17px !important; }
  .sweet-process-grid { gap: 9px !important; }
  .sweet-process-card { min-height: 102px !important; padding: 16px !important; gap: 14px !important; }
  .sweet-process-card h3 { margin-bottom: 5px !important; }
  .sweet-step-tag { margin-bottom: 5px !important; padding: 5px 9px !important; }

  .sweet-feature-wrap { gap: 22px !important; padding: 12px !important; }
  .sweet-feature-copy { padding: 34px !important; }
  .sweet-feature-copy .sweet-section-head { margin-bottom: 18px !important; }
  .sweet-feature-list { margin-top: 20px !important; gap: 9px !important; }
  .sweet-mini-card { padding: 14px !important; gap: 12px !important; }
  .sweet-mini-card h3 { margin-bottom: 5px !important; }
  .sweet-feature-copy .sweet-hero-actions { margin-top: 22px !important; }
  .sweet-feature-media { gap: 12px !important; }
  .sweet-feature-image,
  .sweet-feature-image img { min-height: 520px !important; }
  .sweet-feature-badge { bottom: 22px !important; left: 24px !important; right: 24px !important; }
  .sweet-feature-badge-inner { padding: 16px !important; gap: 12px !important; }
  .sweet-feature-stats { gap: 10px !important; }
  .sweet-feature-stat { min-height: 96px !important; padding: 15px !important; }
  .sweet-feature-stat strong { margin-bottom: 5px !important; }

  .sweet-why::before { top: 42px !important; }
  .sweet-why-shell { border-radius: 38px !important; }
  .sweet-why-hero { gap: 22px !important; padding: 22px !important; }
  .sweet-why-copy { min-height: 430px !important; padding: 34px 28px !important; }
  .sweet-why-proof { margin-top: 22px !important; gap: 10px !important; }
  .sweet-why-proof-item { min-height: 92px !important; padding: 14px !important; }
  .sweet-why-proof-item strong { margin-bottom: 5px !important; }
  .sweet-why-image,
  .sweet-why-image img { min-height: 430px !important; }
  .sweet-why-floating { left: 20px !important; right: 20px !important; bottom: 20px !important; padding: 20px !important; }
  .sweet-why-floating strong { margin-bottom: 7px !important; }
  .sweet-why-list { gap: 12px !important; padding: 0 22px 22px !important; }
  .sweet-why-card { min-height: 205px !important; padding: 20px !important; }
  .sweet-why-icon { margin-bottom: 14px !important; }
  .sweet-why-card h3 { margin-bottom: 6px !important; }

  .sweet-testimonial-shell { gap: 16px !important; padding: 14px !important; }
  .sweet-testimonial-content { padding: 38px !important; }
  .sweet-testimonial-content h2 { margin-top: 12px !important; }
  .sweet-testimonial-content p { margin-top: 12px !important; line-height: 1.66 !important; }
  .sweet-review { margin-top: 20px !important; padding: 20px !important; }
  .sweet-review-author,
  .sweet-review-controls { margin-top: 16px !important; padding-top: 13px !important; }
  .sweet-testimonial-visual { gap: 12px !important; }
  .sweet-testimonial-img,
  .sweet-testimonial-img img { min-height: 370px !important; }
  .sweet-testimonial-label { left: 18px !important; right: 18px !important; bottom: 18px !important; padding: 14px !important; gap: 12px !important; }
  .sweet-benefits { gap: 10px !important; }
  .sweet-benefit { min-height: 92px !important; padding: 13px !important; gap: 6px !important; }

  .sweet-fill-copy,
  .sweet-light-fill { margin-top: 16px !important; padding: 16px 18px !important; }
  .sweet-fill-copy p + p { margin-top: 8px !important; }
  .sweet-fill-points { margin-top: 14px !important; gap: 8px !important; }
  .sweet-fill-point { padding: 10px 12px !important; gap: 9px !important; }

  @media (max-width: 1100px) {
    .sweet-hero-grid,
    .sweet-feature-wrap,
    .sweet-testimonial-shell { gap: 18px !important; }
    .sweet-services-grid,
    .sweet-process-grid { gap: 12px !important; }
    .sweet-feature-image,
    .sweet-feature-image img { min-height: 450px !important; height: 450px !important; }
    .sweet-why-image,
    .sweet-why-image img { min-height: 420px !important; }
  }

  @media (max-width: 700px) {
    .sweet-hero { padding: 42px 0 34px !important; }
    .sweet-services,
    .sweet-process,
    .sweet-feature,
    .sweet-why,
    .sweet-testimonial { padding: 34px 0 !important; }
    .sweet-section-head { margin-bottom: 20px !important; }
    .sweet-hero-card img { height: 340px !important; }
    .sweet-service-card { min-height: 410px !important; }
    .sweet-service-content { padding: 18px 16px 16px !important; }
    .sweet-process-intro { padding: 24px 18px !important; }
    .sweet-process-card { padding: 16px !important; }
    .sweet-feature-wrap { gap: 8px !important; }
    .sweet-feature-copy { padding: 24px 16px !important; }
    .sweet-feature-image,
    .sweet-feature-image img { min-height: 330px !important; height: 330px !important; }
    .sweet-why { padding: 34px 0 !important; }
    .sweet-why-hero { padding: 10px !important; gap: 10px !important; }
    .sweet-why-copy { padding: 24px 16px !important; }
    .sweet-why-image,
    .sweet-why-image img { min-height: 330px !important; }
    .sweet-why-list { padding: 0 10px 10px !important; gap: 10px !important; }
    .sweet-testimonial-content { padding: 26px 18px !important; }
    .sweet-testimonial-img,
    .sweet-testimonial-img img { min-height: 310px !important; }
  }


/* =========================================================
   Gifts Service Styles
   Moved into common stylesheet from gifts-service.css
========================================================= */

:root {
    --alalaas-primary: #c31f26;
    --alalaas-primary-dark: #94171d;
    --alalaas-primary-deep: #5f0f13;
    --alalaas-primary-soft: #fff1f2;
    --alalaas-cream: #fff8f3;
    --alalaas-gold: #f7b733;
    --alalaas-text: #151923;
    --alalaas-heading: #0f172a;
    --alalaas-muted: #667085;
    --alalaas-card: #ffffff;
    --alalaas-border: #f0d3d5;
    --alalaas-bg: #ffffff;
    --alalaas-soft-bg: #fff9f8;
    --alalaas-shadow: 0 24px 60px rgba(16, 24, 40, 0.12);
    --alalaas-shadow-soft: 0 14px 35px rgba(16, 24, 40, 0.08);
    --alalaas-radius: 30px;
  }

  * {
    box-sizing: border-box;
  }

  .alalaas-page {
    background: var(--alalaas-bg);
    color: var(--alalaas-text);
    overflow: hidden;
    font-family: inherit;
  }

  .alalaas-container {
    width: 75%;
    max-width: 1600px;
    margin: 0 auto;
  }

  .alalaas-section-head {
    text-align: center;
    max-width: 880px;
    margin: 0 auto 48px;
  }

  .alalaas-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 17px;
    margin-bottom: 16px;
    border-radius: 999px;
    color: var(--alalaas-primary);
    background: rgba(195, 31, 38, 0.08);
    border: 1px solid rgba(195, 31, 38, 0.16);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .alalaas-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--alalaas-primary);
    box-shadow: 0 0 0 6px rgba(195, 31, 38, 0.12);
  }

  .alalaas-title {
    margin: 0;
    color: var(--alalaas-heading);
    font-size: clamp(28px, 2.5vw, 72px);
    line-height: 1.08;
    letter-spacing: -0.035em;
    font-weight: 850;
  }

  .alalaas-subtitle {
    margin: 18px auto 0;
    max-width: 760px;
    color: var(--alalaas-muted);
    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;
  }

  .alalaas-highlight {
    color: var(--alalaas-primary);
  }

  /* HERO */
  .alalaas-hero {
    position: relative;
    padding: 92px 0 84px;
    background:
      radial-gradient(circle at 8% 12%, rgba(195, 31, 38, 0.12), transparent 28%),
      radial-gradient(circle at 92% 10%, rgba(247, 183, 51, 0.16), transparent 24%),
      linear-gradient(135deg, #fff8f8 0%, #ffffff 52%, #fff7f3 100%);
  }

  .alalaas-hero::before {
    content: "";
    position: absolute;
    inset: 24px;
    border: 1px solid rgba(195, 31, 38, 0.08);
    border-radius: 38px;
    pointer-events: none;
  }

  .alalaas-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 58px;
    align-items: center;
  }

  .alalaas-hero-content {
    max-width: 670px;
  }

  .alalaas-hero-content .alalaas-title {
    font-size: clamp(28px, 2.5vw, 72px);
  }

  .alalaas-hero-text {
    margin: 24px 0 32px;
    color: #475467;
    font-size: 17px;
    line-height: 1.85;
    font-weight: 400;
  }

  .alalaas-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
  }

  .alalaas-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 26px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: 0.25s ease;
    border: 0;
    cursor: pointer;
  }

  .alalaas-btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--alalaas-primary), var(--alalaas-primary-dark));
    box-shadow: 0 18px 34px rgba(195, 31, 38, 0.28);
  }

  .alalaas-btn-light {
    color: var(--alalaas-primary);
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.18);
    box-shadow: 0 12px 26px rgba(16, 24, 40, 0.06);
  }

  .alalaas-btn:hover {
    transform: translateY(-3px);
  }

  .alalaas-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
  }

  .alalaas-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(195, 31, 38, 0.13);
    color: #344054;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.05);
  }

  .alalaas-trust-pill svg {
    width: 17px;
    height: 17px;
    color: var(--alalaas-primary);
  }

  .alalaas-trust-pill .alalaas-inline-icon,
  .alalaas-why-mini .alalaas-inline-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: var(--alalaas-primary);
  }

  .alalaas-hero-media {
    position: relative;
  }

  .alalaas-hero-media::before {
    content: "";
    position: absolute;
    right: -20px;
    top: -20px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: rgba(247, 183, 51, 0.18);
    z-index: -1;
  }

  .alalaas-hero-img-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    padding: 12px;
    background: #ffffff;
    box-shadow: var(--alalaas-shadow);
  }

  .alalaas-hero-img {
    width: 100%;
    height: 540px;
    object-fit: cover;
    display: block;
    border-radius: 28px;
  }

  .alalaas-hero-badge {
    position: absolute;
    left: -28px;
    bottom: 38px;
    width: min(340px, calc(100% - 26px));
    padding: 23px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(195, 31, 38, 0.14);
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.14);
    backdrop-filter: blur(14px);
  }

  .alalaas-hero-badge strong {
    display: block;
    color: var(--alalaas-primary);
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 9px;
  }

  .alalaas-hero-badge span {
    color: #475467;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
  }

  .alalaas-floating-card {
    position: absolute;
    right: -18px;
    top: 36px;
    width: 205px;
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--alalaas-primary), var(--alalaas-primary-deep));
    color: #ffffff;
    box-shadow: 0 22px 40px rgba(195, 31, 38, 0.26);
  }

  .alalaas-floating-card span {
    display: block;
    font-size: 12px;
    opacity: 0.86;
    margin-bottom: 7px;
    font-weight: 700;
  }

  .alalaas-floating-card strong {
    display: block;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 900;
  }

  /* SERVICES */
  .alalaas-services {
    padding: 88px 0;
    background: linear-gradient(180deg, #ffffff 0%, #fffafa 100%);
  }

  .alalaas-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .alalaas-service-card {
    position: relative;
    overflow: hidden;
    min-height: 530px;
    border-radius: 30px;
    box-shadow: var(--alalaas-shadow-soft);
    isolation: isolate;
  }

  .alalaas-service-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s ease;
    z-index: -2;
  }

  .alalaas-service-card:hover img {
    transform: scale(1.08);
  }

  .alalaas-service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.04) 10%, rgba(15, 23, 42, 0.86) 100%),
      linear-gradient(135deg, rgba(195, 31, 38, 0.24), transparent 55%);
    z-index: -1;
  }

  .alalaas-service-number {
    position: absolute;
    top: 22px;
    left: 22px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.93);
    color: var(--alalaas-primary);
    font-size: 14px;
    font-weight: 900;
  }

  .alalaas-service-content {
    position: absolute;
    z-index: 1;
    left: 24px;
    right: 24px;
    bottom: 26px;
    color: #ffffff;
  }

  .alalaas-service-content h3 {
    margin: 0 0 10px;
    font-size: 27px;
    line-height: 1.08;
    font-weight: 850;
    letter-spacing: -0.02em;
  }

  .alalaas-service-content p {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14.5px;
    line-height: 1.6;
    font-weight: 400;
  }

  .alalaas-service-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 0 18px;
    border-radius: 999px;
    color: #ffffff;
    background: var(--alalaas-primary);
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none;
    transition: 0.25s ease;
  }

  .alalaas-service-link:hover {
    background: #ffffff;
    color: var(--alalaas-primary);
  }

  /* PREMIUM SALES SECTION */
  .alalaas-sales-strip {
    position: relative;
    padding: 96px 0;
    background:
      radial-gradient(circle at 12% 18%, rgba(195, 31, 38, 0.08), transparent 28%),
      radial-gradient(circle at 92% 20%, rgba(247, 183, 51, 0.14), transparent 24%),
      linear-gradient(180deg, #fffafa 0%, #ffffff 100%);
    overflow: hidden;
  }

  .alalaas-sales-strip::before {
    content: "";
    position: absolute;
    right: -160px;
    top: -160px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.06);
  }

  .alalaas-sales-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 48px;
    align-items: center;
  }

  .alalaas-sales-content .alalaas-section-head {
    text-align: left;
    margin: 0 0 30px;
    max-width: 720px;
  }

  .alalaas-sales-content .alalaas-title {
    font-size: clamp(28px, 2.5vw, 72px);
    color: var(--alalaas-heading);
  }

  .alalaas-sales-content .alalaas-subtitle {
    margin-left: 0;
    color: #536073;
  }

  .alalaas-sales-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
  }

  .alalaas-sales-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 34px;
  }

  .alalaas-sales-feature {
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.11);
    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.07);
    transition: 0.25s ease;
  }

  .alalaas-sales-feature:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 46px rgba(195, 31, 38, 0.12);
  }

  .alalaas-sales-feature::after {
    content: "";
    position: absolute;
    right: -34px;
    top: -34px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.06);
  }

  .alalaas-sales-feature-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    color: var(--alalaas-primary);
    background:
      radial-gradient(circle at 30% 20%, rgba(247, 183, 51, 0.22), transparent 42%),
      var(--alalaas-primary-soft);
  }

  .alalaas-sales-feature-icon svg {
    width: 23px;
    height: 23px;
  }

  .alalaas-sales-feature h3 {
    margin: 0 0 7px;
    color: var(--alalaas-heading);
    font-size: 15.5px;
    line-height: 1.3;
    font-weight: 900;
  }

  .alalaas-sales-feature p {
    margin: 0;
    color: #667085;
    font-size: 13.5px;
    line-height: 1.58;
    font-weight: 400;
  }

  .alalaas-sales-media {
    position: relative;
  }

  .alalaas-sales-img-card {
    position: relative;
    overflow: hidden;
    height: 730px;
    border-radius: 42px;
    border: 12px solid #ffffff;
    box-shadow: var(--alalaas-shadow);
  }

  .alalaas-sales-img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .alalaas-sales-img-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.46)),
      linear-gradient(135deg, rgba(195, 31, 38, 0.20), transparent 55%);
  }

  .alalaas-sales-badge {
    position: absolute;
    left: -26px;
    bottom: 34px;
    z-index: 2;
    max-width: 315px;
    padding: 23px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.44);
    box-shadow: 0 22px 44px rgba(16, 24, 40, 0.16);
    backdrop-filter: blur(14px);
  }

  .alalaas-sales-badge strong {
    display: block;
    color: var(--alalaas-primary);
    font-size: 28px;
    line-height: 1.08;
    font-weight: 950;
    margin-bottom: 8px;
  }

  .alalaas-sales-badge span {
    display: block;
    color: #536073;
    font-size: 13.5px;
    line-height: 1.58;
    font-weight: 600;
  }

  .alalaas-sales-top-badge {
    position: absolute;
    right: -18px;
    top: 38px;
    z-index: 2;
    padding: 17px 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--alalaas-primary), var(--alalaas-primary-deep));
    color: #ffffff;
    box-shadow: 0 20px 38px rgba(195, 31, 38, 0.25);
  }

  .alalaas-sales-top-badge small {
    display: block;
    font-size: 12px;
    opacity: 0.82;
    font-weight: 700;
    margin-bottom: 5px;
  }

  .alalaas-sales-top-badge strong {
    display: block;
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
  }

  .alalaas-sales-mini-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
  }

  .alalaas-sales-mini {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 15px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    color: #344054;
    font-size: 13.5px;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.06);
  }

  .alalaas-sales-mini span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--alalaas-primary);
    box-shadow: 0 0 0 6px rgba(195, 31, 38, 0.10);
  }

  /* APP CTA */
  .alalaas-app {
    padding: 0 0 92px;
    background: #ffffff;
  }

  .alalaas-app-box {
    position: relative;
    overflow: hidden;
    min-height: 460px;
    display: grid;
    grid-template-columns: 1fr 0.86fr;
    align-items: center;
    gap: 34px;
    padding: 72px 84px;
    border-radius: 38px;
    background:
      radial-gradient(circle at 88% 22%, rgba(255, 255, 255, 0.18), transparent 25%),
      radial-gradient(circle at 10% 95%, rgba(255, 255, 255, 0.14), transparent 28%),
      linear-gradient(135deg, var(--alalaas-primary), var(--alalaas-primary-deep));
    color: #ffffff;
    box-shadow: 0 26px 60px rgba(195, 31, 38, 0.18);
  }

  .alalaas-app-box::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    right: -120px;
    bottom: -130px;
    border: 55px solid rgba(255, 255, 255, 0.08);
  }

  .alalaas-app-content {
    position: relative;
    z-index: 1;
  }

  .alalaas-app-content h2 {
    margin: 0 0 22px;
    max-width: 650px;
    font-size: clamp(28px, 2.5vw, 72px);
    line-height: 1.12;
    letter-spacing: -0.035em;
    font-weight: 850;
  }

  .alalaas-app-content p {
    margin: 0 0 30px;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.75;
    font-weight: 400;
  }

  .alalaas-app-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
  }

  .alalaas-store-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 999px;
    color: var(--alalaas-primary);
    background: #ffffff;
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 900;
    transition: 0.25s ease;
  }

  .alalaas-store-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.18);
  }

  .alalaas-store-btn svg {
    width: 20px;
    height: 20px;
  }

  .alalaas-phone {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
  }

  .alalaas-phone-card {
    position: relative;
    width: min(360px, 100%);
    padding: 14px;
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(12px);
  }

  .alalaas-phone img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    border-radius: 26px;
    display: block;
    filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.22));
  }

  .alalaas-mini-note {
    position: absolute;
    left: -24px;
    bottom: 28px;
    padding: 15px 17px;
    max-width: 200px;
    border-radius: 18px;
    background: #ffffff;
    color: var(--alalaas-heading);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.14);
  }

  .alalaas-mini-note strong {
    display: block;
    color: var(--alalaas-primary);
    font-size: 18px;
    font-weight: 900;
  }

  .alalaas-mini-note span {
    display: block;
    margin-top: 4px;
    color: #667085;
    font-size: 12.5px;
    line-height: 1.45;
    font-weight: 600;
  }

  /* WHY CHOOSE */
  .alalaas-why {
    position: relative;
    padding: 98px 0;
    background:
      radial-gradient(circle at 12% 20%, rgba(195, 31, 38, 0.08), transparent 28%),
      radial-gradient(circle at 75% 12%, rgba(247, 183, 51, 0.14), transparent 24%),
      linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
  }

  .alalaas-why-wrap {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 46px;
    align-items: stretch;
  }

  .alalaas-why-media {
    position: relative;
    height: 100%;
    display: flex;
  }

  .alalaas-why-img-box {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 42px;
    box-shadow: var(--alalaas-shadow);
  }

  .alalaas-why-img-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.50)),
      linear-gradient(135deg, rgba(195, 31, 38, 0.18), transparent 55%);
  }

  .alalaas-why-img-box img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    display: block;
  }

  .alalaas-why-floating {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    z-index: 2;
    padding: 24px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(14px);
  }

  .alalaas-why-floating strong {
    display: block;
    color: var(--alalaas-primary);
    font-size: 34px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 9px;
  }

  .alalaas-why-floating span {
    display: block;
    color: #475467;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 600;
  }

  .alalaas-why-content .alalaas-section-head {
    text-align: left;
    margin: 0 0 30px;
    max-width: 720px;
  }

  .alalaas-why-content .alalaas-title {
    font-size: clamp(20px, 2.0vw, 62px);
  }

  .alalaas-why-list {
    display: grid;
    gap: 18px;
  }

  .alalaas-why-card {
    position: relative;
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 18px;
    align-items: flex-start;
    padding: 24px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(195, 31, 38, 0.11);
    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.07);
    transition: 0.25s ease;
  }

  .alalaas-why-card:hover {
    transform: translateX(8px);
    border-color: rgba(195, 31, 38, 0.25);
    box-shadow: 0 22px 46px rgba(195, 31, 38, 0.12);
  }

  .alalaas-why-icon {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: var(--alalaas-primary);
    background:
      radial-gradient(circle at 30% 20%, rgba(247, 183, 51, 0.22), transparent 40%),
      var(--alalaas-primary-soft);
    box-shadow: inset 0 0 0 1px rgba(195, 31, 38, 0.09);
  }

  .alalaas-why-icon svg {
    width: 32px;
    height: 32px;
  }

  .alalaas-why-card h3 {
    margin: 0 0 8px;
    color: var(--alalaas-heading);
    font-size: 19px;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: -0.015em;
  }

  .alalaas-why-card p {
    margin: 0;
    color: #536073;
    font-size: 15px;
    line-height: 1.72;
    font-weight: 400;
  }

  .alalaas-why-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
  }

  .alalaas-why-mini {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 16px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    color: #344054;
    font-size: 13.5px;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.06);
  }

  .alalaas-why-mini span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--alalaas-primary);
    box-shadow: 0 0 0 6px rgba(195, 31, 38, 0.10);
  }

  .alalaas-why-mini .alalaas-inline-icon {
    width: 18px;
    height: 18px;
  }

  .alalaas-why-mini .alalaas-inline-icon svg {
    width: 18px;
    height: 18px;
  }

  /* STORIES */
  .alalaas-stories {
    position: relative;
    padding: 96px 0;
    background:
      radial-gradient(circle at 10% 12%, rgba(195, 31, 38, 0.09), transparent 28%),
      radial-gradient(circle at 92% 16%, rgba(247, 183, 51, 0.14), transparent 24%),
      linear-gradient(180deg, #fffafa 0%, #ffffff 100%);
    overflow: hidden;
  }

  .alalaas-stories::before {
    content: "";
    position: absolute;
    left: -130px;
    bottom: -160px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.06);
  }

  .alalaas-stories-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
  }

  .alalaas-stories-content .alalaas-section-head {
    text-align: left;
    margin: 0 0 30px;
    max-width: 720px;
  }

  .alalaas-stories-content .alalaas-title {
    color: var(--alalaas-heading);
    font-size: clamp(28px, 2.5vw, 72px);
  }

  .alalaas-stories-content .alalaas-subtitle {
    color: #536073;
    margin-left: 0;
  }

  .alalaas-story-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 34px 0 28px;
  }

  .alalaas-story-stat {
    position: relative;
    overflow: hidden;
    padding: 28px 20px;
    border-radius: 26px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.11);
    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.08);
    transition: 0.25s ease;
  }

  .alalaas-story-stat-icon {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 16px;
    color: var(--alalaas-primary);
    background:
      radial-gradient(circle at 30% 20%, rgba(247, 183, 51, 0.22), transparent 42%),
      var(--alalaas-primary-soft);
    box-shadow: inset 0 0 0 1px rgba(195, 31, 38, 0.10);
  }

  .alalaas-story-stat-icon svg {
    width: 22px;
    height: 22px;
  }

  .alalaas-story-stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 46px rgba(195, 31, 38, 0.13);
  }

  .alalaas-story-stat::after {
    content: "";
    position: absolute;
    right: -35px;
    top: -35px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.07);
  }

  .alalaas-story-stat strong {
    position: relative;
    z-index: 1;
    display: block;
    color: var(--alalaas-primary);
    font-size: 34px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 10px;
  }

  .alalaas-story-stat span {
    position: relative;
    z-index: 1;
    display: block;
    color: #475467;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .alalaas-story-note {
    display: grid;
    gap: 14px;
    margin-top: 26px;
  }

  .alalaas-story-note-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 16px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.10);
    color: #475467;
    font-size: 14.5px;
    line-height: 1.65;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.05);
  }

  .alalaas-story-note-item svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--alalaas-primary);
    margin-top: 2px;
  }

  .alalaas-stories-media {
    position: relative;
  }

  .alalaas-stories-img-card {
    position: relative;
    overflow: hidden;
    height: 560px;
    border-radius: 42px;
    box-shadow: var(--alalaas-shadow);
    border: 12px solid #ffffff;
  }

  .alalaas-stories-img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .alalaas-stories-img-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.42)),
      linear-gradient(135deg, rgba(195, 31, 38, 0.20), transparent 55%);
  }

  .alalaas-stories-badge {
    position: absolute;
    left: -24px;
    bottom: 34px;
    z-index: 2;
    max-width: 300px;
    padding: 22px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.44);
    box-shadow: 0 22px 44px rgba(16, 24, 40, 0.16);
    backdrop-filter: blur(14px);
  }

  .alalaas-stories-badge strong {
    display: block;
    color: var(--alalaas-primary);
    font-size: 27px;
    line-height: 1.08;
    font-weight: 950;
    margin-bottom: 8px;
  }

  .alalaas-stories-badge span {
    display: block;
    color: #536073;
    font-size: 13.5px;
    line-height: 1.58;
    font-weight: 600;
  }

  .alalaas-stories-rating {
    position: absolute;
    right: -18px;
    top: 38px;
    z-index: 2;
    padding: 17px 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--alalaas-primary), var(--alalaas-primary-deep));
    color: #ffffff;
    box-shadow: 0 20px 38px rgba(195, 31, 38, 0.25);
  }

  .alalaas-stories-rating small {
    display: block;
    font-size: 12px;
    opacity: 0.82;
    font-weight: 700;
    margin-bottom: 5px;
  }

  .alalaas-stories-rating strong {
    display: block;
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
  }

  .alalaas-stories-rating span {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: #ffd166;
  }

  /* TESTIMONIAL */
  .alalaas-testimonial {
    padding: 96px 0;
    background: linear-gradient(180deg, #ffffff 0%, #fffafa 100%);
  }

  .alalaas-testimonial-wrap {
    position: relative;
    min-height: 440px;
    display: grid;
    grid-template-columns: 335px 1fr;
    align-items: center;
    gap: 0;
  }

  .alalaas-testimonial-img {
    position: relative;
    z-index: 2;
    width: 390px;
    height: 350px;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: var(--alalaas-shadow);
    border: 10px solid #ffffff;
  }

  .alalaas-testimonial-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .alalaas-testimonial-card {
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 74px 84px 74px 170px;
    border-radius: 40px;
    background:
      radial-gradient(circle at 75% 18%, rgba(255, 255, 255, 0.16), transparent 24%),
      linear-gradient(135deg, var(--alalaas-primary), var(--alalaas-primary-dark));
    color: #ffffff;
    box-shadow: 0 26px 56px rgba(195, 31, 38, 0.18);
  }

  .alalaas-quote-mark {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 60px;
    line-height: 1;
    font-weight: 900;
    margin-bottom: 20px;
  }

  .alalaas-testimonial-card h3 {
    max-width: 720px;
    margin: 0 0 18px;
    font-size: clamp(38px, 1.5vw, 62px);
    line-height: 1.18;
    letter-spacing: -0.035em;
    font-weight: 600;
  }

  .alalaas-testimonial-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 15px;
    font-weight: 700;
  }

  .alalaas-dots {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
  }

  .alalaas-dot-btn {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: var(--alalaas-primary);
    font-size: 22px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.25s ease;
  }

  .alalaas-dot-btn:hover {
    transform: translateY(-2px);
  }

  .alalaas-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
  }



  /* GIFT COLLECTION DETAIL MODAL */
  .alalaas-service-link {
    border: 0;
    cursor: pointer;
    font-family: inherit;
  }

  .alalaas-gift-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .alalaas-gift-modal.is-open {
    display: flex;
  }

  .alalaas-gift-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(8px);
  }

  .alalaas-gift-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(880px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 32px;
    background: #ffffff;
    box-shadow: 0 34px 90px rgba(15, 23, 42, 0.28);
    animation: alalaasModalIn 0.25s ease;
  }

  @keyframes alalaasModalIn {
    from {
      opacity: 0;
      transform: translateY(16px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .alalaas-gift-modal-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 28px 30px 24px;
    border-bottom: 1px solid rgba(195, 31, 38, 0.12);
    background:
      radial-gradient(circle at 92% 0%, rgba(247, 183, 51, 0.16), transparent 25%),
      linear-gradient(135deg, #fff7f7 0%, #ffffff 66%);
  }

  .alalaas-gift-modal-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--alalaas-primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  .alalaas-gift-modal-kicker svg {
    width: 16px;
    height: 16px;
  }

  .alalaas-gift-modal-title {
    margin: 0;
    color: var(--alalaas-heading);
    font-size: clamp(25px, 2.1vw, 40px);
    line-height: 1.12;
    letter-spacing: -0.03em;
    font-weight: 900;
  }

  .alalaas-gift-modal-close {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: #ffffff;
    color: var(--alalaas-heading);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: 0.25s ease;
  }

  .alalaas-gift-modal-close:hover {
    transform: rotate(90deg);
    color: var(--alalaas-primary);
    border-color: rgba(195, 31, 38, 0.22);
  }

  .alalaas-gift-modal-close svg {
    width: 22px;
    height: 22px;
  }

  .alalaas-gift-modal-body {
    max-height: calc(100vh - 210px);
    overflow: auto;
    padding: 28px 30px 30px;
  }

  .alalaas-gift-modal-intro {
    margin: 0 0 18px;
    padding: 20px 22px;
    border-radius: 22px;
    color: #344054;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 14px 34px rgba(16, 24, 40, 0.06);
    font-size: 15.5px;
    line-height: 1.75;
    font-weight: 500;
  }

  .alalaas-gift-modal-points {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .alalaas-gift-modal-points li {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #3f4857;
    font-size: 15px;
    line-height: 1.68;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.04);
  }

  .alalaas-gift-modal-point-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--alalaas-primary);
    background:
      radial-gradient(circle at 30% 20%, rgba(247, 183, 51, 0.22), transparent 42%),
      var(--alalaas-primary-soft);
  }

  .alalaas-gift-modal-point-icon svg {
    width: 21px;
    height: 21px;
  }

  .alalaas-gift-modal-points strong {
    color: var(--alalaas-heading);
    font-weight: 900;
  }

  .alalaas-gift-modal-note {
    margin-top: 18px;
    padding: 19px 22px;
    border-radius: 20px;
    border-left: 4px solid var(--alalaas-primary);
    background: rgba(195, 31, 38, 0.06);
    color: #3f4857;
    font-size: 14.5px;
    line-height: 1.65;
    font-weight: 500;
  }

  .alalaas-gift-modal-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 30px 26px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
  }

  .alalaas-gift-modal-help {
    color: #667085;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
  }

  .alalaas-gift-modal-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--alalaas-primary), var(--alalaas-primary-dark));
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 16px 28px rgba(195, 31, 38, 0.22);
    transition: 0.25s ease;
  }

  .alalaas-gift-modal-action:hover {
    transform: translateY(-2px);
    color: #ffffff;
  }

  .alalaas-gift-modal-action svg {
    width: 18px;
    height: 18px;
  }

  @media (max-width: 700px) {
    .alalaas-gift-modal {
      padding: 14px;
    }

    .alalaas-gift-modal-dialog {
      border-radius: 24px;
    }

    .alalaas-gift-modal-head,
    .alalaas-gift-modal-body,
    .alalaas-gift-modal-foot {
      padding-left: 20px;
      padding-right: 20px;
    }

    .alalaas-gift-modal-body {
      max-height: calc(100vh - 220px);
    }

    .alalaas-gift-modal-points li {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 1100px) {
    .alalaas-hero-grid,
    .alalaas-sales-wrap,
    .alalaas-app-box,
    .alalaas-why-wrap,
    .alalaas-stories-wrap {
      grid-template-columns: 1fr;
    }

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

    .alalaas-sales-content .alalaas-section-head,
    .alalaas-stories-content .alalaas-section-head {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    .alalaas-sales-content .alalaas-subtitle,
    .alalaas-stories-content .alalaas-subtitle {
      margin-left: auto;
    }

    .alalaas-sales-actions,
    .alalaas-sales-mini-row {
      justify-content: center;
    }

    .alalaas-sales-img-card,
    .alalaas-stories-img-card {
      height: 500px;
    }

    .alalaas-sales-badge,
    .alalaas-stories-badge {
      left: 24px;
    }

    .alalaas-sales-top-badge,
    .alalaas-stories-rating {
      right: 24px;
    }

    .alalaas-testimonial-wrap {
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .alalaas-testimonial-img {
      width: 100%;
      max-width: 540px;
      height: 330px;
      margin: 0 auto;
    }

    .alalaas-testimonial-card {
      padding: 54px;
    }

    .alalaas-hero-badge {
      left: 24px;
    }

    .alalaas-floating-card {
      right: 20px;
    }

    .alalaas-mini-note {
      left: 22px;
    }

    .alalaas-why-wrap {
      align-items: center;
    }

    .alalaas-why-media {
      display: block;
      height: auto;
    }

    .alalaas-why-img-box,
    .alalaas-why-img-box img {
      height: 520px;
      min-height: 520px;
    }
  }

  @media (max-width: 700px) {
    .alalaas-container {
      width: 75%;
      max-width: 1600px;
    }

    .alalaas-hero {
      padding: 58px 0 56px;
    }

    .alalaas-hero::before {
      display: none;
    }

    .alalaas-services,
    .alalaas-sales-strip,
    .alalaas-why,
    .alalaas-stories,
    .alalaas-testimonial {
      padding: 58px 0;
    }

    .alalaas-section-head {
      margin-bottom: 34px;
    }

    .alalaas-hero-img {
      height: 390px;
      border-radius: 22px;
    }

    .alalaas-hero-img-wrap {
      border-radius: 28px;
      padding: 8px;
    }

    .alalaas-hero-badge {
      position: relative;
      left: auto;
      bottom: auto;
      margin: -54px 16px 0;
      width: auto;
    }

    .alalaas-floating-card {
      position: relative;
      right: auto;
      top: auto;
      width: auto;
      margin: 16px 16px 0;
    }

    .alalaas-services-grid,
    .alalaas-sales-features,
    .alalaas-story-stats {
      grid-template-columns: 1fr;
    }

    .alalaas-service-card {
      min-height: 370px;
    }

    .alalaas-sales-feature {
      padding: 18px;
    }

    .alalaas-sales-img-card,
    .alalaas-stories-img-card {
      height: 390px;
      border-radius: 28px;
      border-width: 8px;
    }

    .alalaas-sales-badge,
    .alalaas-sales-top-badge,
    .alalaas-stories-badge,
    .alalaas-stories-rating {
      position: relative;
      left: auto;
      right: auto;
      top: auto;
      bottom: auto;
      max-width: none;
      margin-top: 14px;
    }

    .alalaas-app {
      padding-bottom: 58px;
    }

    .alalaas-app-box {
      padding: 42px 24px;
      border-radius: 28px;
    }

    .alalaas-phone img {
      height: 300px;
    }

    .alalaas-mini-note {
      position: relative;
      left: auto;
      bottom: auto;
      max-width: none;
      margin-top: 14px;
    }

    .alalaas-why-media {
      display: block;
      height: auto;
    }

    .alalaas-why-img-box,
    .alalaas-why-img-box img {
      height: 390px;
      min-height: 390px;
      border-radius: 28px;
    }

    .alalaas-why-floating {
      left: 16px;
      right: 16px;
      bottom: 16px;
      padding: 18px;
      border-radius: 22px;
    }

    .alalaas-why-floating strong {
      font-size: 28px;
    }

    .alalaas-why-content .alalaas-section-head {
      text-align: center;
      margin-bottom: 28px;
    }

    .alalaas-why-card {
      grid-template-columns: 1fr;
      text-align: center;
      padding: 24px 20px;
    }

    .alalaas-why-card:hover {
      transform: translateY(-4px);
    }

    .alalaas-why-icon {
      margin: 0 auto;
    }

    .alalaas-why-bottom {
      justify-content: center;
    }

    .alalaas-testimonial-card {
      padding: 36px 24px;
      border-radius: 28px;
    }

    .alalaas-testimonial-img {
      height: 300px;
      border-radius: 26px;
    }
  }

  /* TESTIMONIAL - LUXURY EDITORIAL DESIGN */
  .alalaas-testimonial {
    position: relative;
    padding: 112px 0;
    background:
      radial-gradient(circle at 8% 10%, rgba(195, 31, 38, 0.07), transparent 30%),
      radial-gradient(circle at 88% 18%, rgba(247, 183, 51, 0.15), transparent 28%),
      linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
    overflow: hidden;
  }

  .alalaas-testimonial::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 42px;
    width: min(72%, 1120px);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.25), transparent);
  }

  .alalaas-testimonial-shell {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 34px;
    align-items: stretch;
    min-height: 560px;
    border-radius: 46px;
    padding: 22px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 246, 246, 0.94));
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 30px 86px rgba(16, 24, 40, 0.12);
  }

  .alalaas-testimonial-shell::before {
    content: "";
    position: absolute;
    right: -120px;
    top: -150px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.065);
    pointer-events: none;
  }

  .alalaas-testimonial-shell::after {
    content: "";
    position: absolute;
    left: -130px;
    bottom: -150px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(247, 183, 51, 0.12);
    pointer-events: none;
  }

  .alalaas-testimonial-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 516px;
    padding: 54px 58px;
    border-radius: 34px;
    background:
      radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.12), transparent 28%),
      linear-gradient(135deg, var(--alalaas-primary-deep), var(--alalaas-primary) 58%, #8f1018);
    color: #ffffff;
    box-shadow: 0 26px 60px rgba(195, 31, 38, 0.18);
  }

  .alalaas-testimonial-kicker {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin-bottom: 22px;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .alalaas-testimonial-kicker svg {
    width: 18px;
    height: 18px;
  }

  .alalaas-testimonial-title {
    max-width: 760px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(24px, 2.2vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.045em;
    font-weight: 750;
  }

  .alalaas-testimonial-text {
    max-width: 700px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 16px;
    line-height: 1.78;
    font-weight: 400;
  }

  .alalaas-testimonial-review {
    position: relative;
    margin-top: 34px;
    padding: 30px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
  }

  .alalaas-testimonial-review::before {
    content: "\201C";
    position: absolute;
    right: 24px;
    top: -18px;
    color: rgba(255, 255, 255, 0.16);
    font-size: 112px;
    line-height: 1;
    font-family: Georgia, serif;
    font-weight: 900;
  }

  .alalaas-testimonial-review blockquote {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.55;
    letter-spacing: -0.02em;
    font-weight: 750;
  }

  .alalaas-testimonial-author {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .alalaas-testimonial-person {
    display: flex;
    align-items: center;
    gap: 13px;
  }

  .alalaas-testimonial-avatar {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 19px;
    color: var(--alalaas-primary);
    background: #ffffff;
    font-size: 15px;
    font-weight: 950;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
  }

  .alalaas-testimonial-person strong {
    display: block;
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
  }

  .alalaas-testimonial-person span {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 650;
  }

  .alalaas-testimonial-stars {
    color: #ffd166;
    font-size: 18px;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .alalaas-testimonial-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
  }

  .alalaas-dot-btn {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 50%;
    background: #ffffff;
    color: var(--alalaas-primary);
    font-size: 22px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.25s ease;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
  }

  .alalaas-dot-btn:hover {
    transform: translateY(-2px);
    background: var(--alalaas-primary-deep);
    color: #ffffff;
  }

  .alalaas-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.42);
  }

  .alalaas-dot.is-active {
    width: 30px;
    border-radius: 999px;
    background: #ffffff;
  }

  .alalaas-testimonial-visual {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 18px;
    min-height: 516px;
  }

  .alalaas-testimonial-main-img {
    position: relative;
    overflow: hidden;
    min-height: 382px;
    border-radius: 34px;
    background: #ffffff;
    box-shadow: 0 24px 58px rgba(16, 24, 40, 0.12);
  }

  .alalaas-testimonial-main-img img {
    width: 100%;
    height: 100%;
    min-height: 382px;
    object-fit: cover;
    display: block;
  }

  .alalaas-testimonial-main-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00), rgba(15, 23, 42, 0.44)),
      linear-gradient(135deg, rgba(195, 31, 38, 0.16), transparent 60%);
  }

  .alalaas-testimonial-image-label {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.46);
    box-shadow: 0 22px 44px rgba(16, 24, 40, 0.15);
    backdrop-filter: blur(14px);
  }

  .alalaas-testimonial-image-label strong {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--alalaas-primary), var(--alalaas-primary-deep));
    font-size: 25px;
    line-height: 1;
    font-weight: 950;
    box-shadow: 0 16px 30px rgba(195, 31, 38, 0.20);
  }

  .alalaas-testimonial-image-label span {
    display: block;
    color: #475467;
    font-size: 13.5px;
    line-height: 1.58;
    font-weight: 650;
  }

  .alalaas-testimonial-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .alalaas-testimonial-benefit {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 11px;
    min-height: 116px;
    padding: 18px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.10);
    color: var(--alalaas-heading);
    font-size: 13.5px;
    line-height: 1.34;
    font-weight: 900;
    box-shadow: 0 18px 42px rgba(16, 24, 40, 0.08);
  }

  .alalaas-testimonial-benefit::after {
    content: "";
    position: absolute;
    right: -28px;
    top: -28px;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.06);
  }

  .alalaas-testimonial-benefit svg {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    color: var(--alalaas-primary);
  }

  @media (max-width: 1100px) {
    .alalaas-testimonial-shell {
      grid-template-columns: 1fr;
    }

    .alalaas-testimonial-content,
    .alalaas-testimonial-visual {
      min-height: auto;
    }

    .alalaas-testimonial-main-img,
    .alalaas-testimonial-main-img img {
      min-height: 430px;
    }
  }

  @media (max-width: 700px) {
    .alalaas-testimonial {
      padding: 60px 0;
    }

    .alalaas-testimonial-shell {
      padding: 12px;
      border-radius: 30px;
      gap: 18px;
    }

    .alalaas-testimonial-content {
      padding: 34px 22px;
      border-radius: 24px;
      text-align: left;
    }

    .alalaas-testimonial-title {
      font-size: clamp(29px, 9vw, 42px);
    }

    .alalaas-testimonial-review {
      padding: 23px;
      border-radius: 24px;
    }

    .alalaas-testimonial-review blockquote {
      font-size: 17px;
      line-height: 1.65;
    }

    .alalaas-testimonial-author {
      flex-direction: column;
      align-items: flex-start;
    }

    .alalaas-testimonial-main-img,
    .alalaas-testimonial-main-img img {
      min-height: 360px;
      border-radius: 24px;
    }

    .alalaas-testimonial-image-label {
      left: 14px;
      right: 14px;
      bottom: 14px;
      grid-template-columns: 1fr;
      padding: 16px;
      border-radius: 20px;
    }

    .alalaas-testimonial-image-label strong {
      width: 64px;
      height: 64px;
      border-radius: 20px;
      font-size: 21px;
    }

    .alalaas-testimonial-benefits {
      grid-template-columns: 1fr;
    }

    .alalaas-testimonial-benefit {
      min-height: auto;
      grid-template-columns: auto 1fr;
      align-items: center;
    }

    .alalaas-testimonial-controls {
      justify-content: flex-start;
    }
  }



  /* ADVANCED DESIGN UPGRADE - keep old logic, only visual enhancement */
  .alalaas-page {
    background:
      linear-gradient(180deg, #fffefe 0%, #fff8f8 42%, #ffffff 100%);
  }

  .alalaas-container {
    width: min(88%, 1440px);
  }

  .alalaas-hero {
    min-height: 86vh;
    display: flex;
    align-items: center;
    padding: 118px 0 104px;
    background:
      radial-gradient(circle at 8% 12%, rgba(195, 31, 38, 0.18), transparent 26%),
      radial-gradient(circle at 80% 8%, rgba(247, 183, 51, 0.24), transparent 24%),
      radial-gradient(circle at 58% 88%, rgba(195, 31, 38, 0.10), transparent 28%),
      linear-gradient(135deg, #fff3f4 0%, #ffffff 47%, #fff5ef 100%);
  }

  .alalaas-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.46;
    background-image:
      linear-gradient(rgba(195, 31, 38, 0.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(195, 31, 38, 0.055) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  }

  .alalaas-hero-content {
    position: relative;
  }

  .alalaas-hero-content::before {
    content: "GIFT SERVICE";
    position: absolute;
    left: -8px;
    top: -58px;
    color: rgba(195, 31, 38, 0.055);
    font-size: clamp(54px, 9vw, 150px);
    line-height: 1;
    letter-spacing: -0.08em;
    font-weight: 950;
    white-space: nowrap;
    pointer-events: none;
  }

  .alalaas-title {
    letter-spacing: -0.055em;
    text-wrap: balance;
  }

  .alalaas-highlight {
    position: relative;
    display: inline-block;
    padding: 0 6px;
    background: linear-gradient(90deg, var(--alalaas-primary), #ee3942, var(--alalaas-primary-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .alalaas-highlight::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 3px;
    height: 12px;
    border-radius: 999px;
    background: rgba(247, 183, 51, 0.35);
    z-index: -1;
  }

  .alalaas-hero-text,
  .alalaas-subtitle {
    text-wrap: pretty;
  }

  .alalaas-btn {
    position: relative;
    overflow: hidden;
  }

  .alalaas-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-120%) skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    transition: transform 0.55s ease;
  }

  .alalaas-btn:hover::before {
    transform: translateX(120%) skewX(-18deg);
  }

  .alalaas-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 28px;
  }

  .alalaas-hero-stat {
    position: relative;
    overflow: hidden;
    padding: 18px 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 16px 35px rgba(16, 24, 40, 0.07);
    backdrop-filter: blur(14px);
  }

  .alalaas-hero-stat::after {
    content: "";
    position: absolute;
    right: -28px;
    top: -28px;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.06);
  }

  .alalaas-hero-stat strong {
    position: relative;
    z-index: 1;
    display: block;
    color: var(--alalaas-primary);
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 8px;
  }

  .alalaas-hero-stat span {
    position: relative;
    z-index: 1;
    color: #475467;
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .alalaas-hero-img-wrap {
    transform: rotate(1.4deg);
    transition: transform 0.45s ease, box-shadow 0.45s ease;
  }

  .alalaas-hero-media:hover .alalaas-hero-img-wrap {
    transform: rotate(0deg) translateY(-6px);
    box-shadow: 0 32px 82px rgba(195, 31, 38, 0.18);
  }

  .alalaas-service-card,
  .alalaas-sales-feature,
  .alalaas-why-card,
  .alalaas-story-stat,
  .alalaas-testimonial-benefit {
    transform: translateZ(0);
  }

  .alalaas-service-card {
    min-height: 560px;
    border: 1px solid rgba(255, 255, 255, 0.60);
  }

  .alalaas-service-card::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.22);
    z-index: 1;
    pointer-events: none;
  }

  .alalaas-service-content {
    padding-top: 40px;
  }

  .alalaas-service-content::before {
    content: "Premium Gift Category";
    display: inline-flex;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.88);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
  }

  .alalaas-process {
    position: relative;
    padding: 96px 0;
    background:
      radial-gradient(circle at 13% 17%, rgba(195,31,38,0.09), transparent 28%),
      radial-gradient(circle at 84% 18%, rgba(247,183,51,0.16), transparent 26%),
      linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
    overflow: hidden;
  }

  .alalaas-process::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: min(1120px, 88%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(195,31,38,0.24), transparent);
  }

  .alalaas-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    counter-reset: giftStep;
  }

  .alalaas-process-card {
    counter-increment: giftStep;
    position: relative;
    overflow: hidden;
    min-height: 260px;
    padding: 28px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(195,31,38,0.12);
    box-shadow: 0 18px 42px rgba(16,24,40,0.075);
    backdrop-filter: blur(16px);
    transition: 0.28s ease;
  }

  .alalaas-process-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 58px rgba(195,31,38,0.13);
    border-color: rgba(195,31,38,0.26);
  }

  .alalaas-process-card::after {
    content: "0" counter(giftStep);
    position: absolute;
    right: 20px;
    top: 18px;
    color: rgba(195,31,38,0.07);
    font-size: 72px;
    line-height: 1;
    font-weight: 950;
  }

  .alalaas-process-icon {
    position: relative;
    z-index: 1;
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 22px;
    color: var(--alalaas-primary);
    background:
      radial-gradient(circle at 25% 20%, rgba(247,183,51,0.32), transparent 46%),
      var(--alalaas-primary-soft);
    box-shadow: inset 0 0 0 1px rgba(195,31,38,0.10);
  }

  .alalaas-process-icon svg {
    width: 29px;
    height: 29px;
  }

  .alalaas-process-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 10px;
    color: var(--alalaas-heading);
    font-size: 19px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    font-weight: 950;
  }

  .alalaas-process-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #536073;
    font-size: 14.5px;
    line-height: 1.7;
    font-weight: 450;
  }

  .alalaas-hero-stat,
  .alalaas-service-card,
  .alalaas-process-card,
  .alalaas-sales-feature,
  .alalaas-why-card,
  .alalaas-story-stat,
  .alalaas-testimonial-shell {
    will-change: transform;
  }

  @media (max-width: 1200px) {
    .alalaas-process-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 700px) {
    .alalaas-container {
      width: 92%;
      max-width: 100%;
    }

    .alalaas-hero {
      min-height: auto;
      padding: 64px 0 58px;
    }

    .alalaas-hero-content::before {
      display: none;
    }

    .alalaas-hero-stats,
    .alalaas-process-grid {
      grid-template-columns: 1fr;
    }

    .alalaas-hero-actions .alalaas-btn {
      width: 100%;
    }

    .alalaas-service-card {
      min-height: 420px;
    }

    .alalaas-process {
      padding: 62px 0;
    }

    .alalaas-process-card {
      min-height: auto;
      padding: 24px;
    }
  }


/* =========================================================
   Moved from: Pasted text (2)(30).txt
   ========================================================= */
:root {
    --alalaas-primary: #c31f26;
    --alalaas-primary-dark: #94171d;
    --alalaas-primary-deep: #5f0f13;
    --alalaas-primary-soft: #fff1f2;
    --alalaas-cream: #fff8f3;
    --alalaas-gold: #f7b733;
    --alalaas-text: #151923;
    --alalaas-heading: #0f172a;
    --alalaas-muted: #667085;
    --alalaas-card: #ffffff;
    --alalaas-border: #f0d3d5;
    --alalaas-bg: #ffffff;
    --alalaas-soft-bg: #fff9f8;
    --alalaas-shadow: 0 24px 60px rgba(16, 24, 40, 0.12);
    --alalaas-shadow-soft: 0 14px 35px rgba(16, 24, 40, 0.08);
    --alalaas-radius: 30px;
  }

  * {
    box-sizing: border-box;
  }

  .alalaas-page {
    background: var(--alalaas-bg);
    color: var(--alalaas-text);
    overflow: hidden;
    font-family: inherit;
  }

  .alalaas-container {
    width: 75%;
    max-width: 1600px;
    margin: 0 auto;
  }

  .alalaas-section-head {
    text-align: center;
    max-width: 880px;
    margin: 0 auto 48px;
  }

  .alalaas-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 17px;
    margin-bottom: 16px;
    border-radius: 999px;
    color: var(--alalaas-primary);
    background: rgba(195, 31, 38, 0.08);
    border: 1px solid rgba(195, 31, 38, 0.16);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .alalaas-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--alalaas-primary);
    box-shadow: 0 0 0 6px rgba(195, 31, 38, 0.12);
  }

  .alalaas-title {
    margin: 0;
    color: var(--alalaas-heading);
    font-size: clamp(28px, 2.5vw, 72px);
    line-height: 1.08;
    letter-spacing: -0.035em;
    font-weight: 850;
  }

  .alalaas-subtitle {
    margin: 18px auto 0;
    max-width: 760px;
    color: var(--alalaas-muted);
    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;
  }

  .alalaas-highlight {
    color: var(--alalaas-primary);
  }

  /* HERO */
  .alalaas-hero {
    position: relative;
    padding: 92px 0 84px;
    background:
      radial-gradient(circle at 8% 12%, rgba(195, 31, 38, 0.12), transparent 28%),
      radial-gradient(circle at 92% 10%, rgba(247, 183, 51, 0.16), transparent 24%),
      linear-gradient(135deg, #fff8f8 0%, #ffffff 52%, #fff7f3 100%);
  }

  .alalaas-hero::before {
    content: "";
    position: absolute;
    inset: 24px;
    border: 1px solid rgba(195, 31, 38, 0.08);
    border-radius: 38px;
    pointer-events: none;
  }

  .alalaas-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 58px;
    align-items: center;
  }

  .alalaas-hero-content {
    max-width: 670px;
  }

  .alalaas-hero-content .alalaas-title {
    font-size: clamp(28px, 2.5vw, 72px);
  }

  .alalaas-hero-text {
    margin: 24px 0 32px;
    color: #475467;
    font-size: 17px;
    line-height: 1.85;
    font-weight: 400;
  }

  .alalaas-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
  }

  .alalaas-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 26px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: 0.25s ease;
    border: 0;
    cursor: pointer;
  }

  .alalaas-btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--alalaas-primary), var(--alalaas-primary-dark));
    box-shadow: 0 18px 34px rgba(195, 31, 38, 0.28);
  }

  .alalaas-btn-light {
    color: var(--alalaas-primary);
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.18);
    box-shadow: 0 12px 26px rgba(16, 24, 40, 0.06);
  }

  .alalaas-btn:hover {
    transform: translateY(-3px);
  }

  .alalaas-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
  }

  .alalaas-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(195, 31, 38, 0.13);
    color: #344054;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.05);
  }

  .alalaas-trust-pill svg {
    width: 17px;
    height: 17px;
    color: var(--alalaas-primary);
  }

  .alalaas-trust-pill .alalaas-inline-icon,
  .alalaas-why-mini .alalaas-inline-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: var(--alalaas-primary);
  }

  .alalaas-hero-media {
    position: relative;
  }

  .alalaas-hero-media::before {
    content: "";
    position: absolute;
    right: -20px;
    top: -20px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: rgba(247, 183, 51, 0.18);
    z-index: -1;
  }

  .alalaas-hero-img-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    padding: 12px;
    background: #ffffff;
    box-shadow: var(--alalaas-shadow);
  }

  .alalaas-hero-img {
    width: 100%;
    height: 540px;
    object-fit: cover;
    display: block;
    border-radius: 28px;
  }

  .alalaas-hero-badge {
    position: absolute;
    left: -28px;
    bottom: 38px;
    width: min(340px, calc(100% - 26px));
    padding: 23px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(195, 31, 38, 0.14);
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.14);
    backdrop-filter: blur(14px);
  }

  .alalaas-hero-badge strong {
    display: block;
    color: var(--alalaas-primary);
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 9px;
  }

  .alalaas-hero-badge span {
    color: #475467;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
  }

  .alalaas-floating-card {
    position: absolute;
    right: -18px;
    top: 36px;
    width: 205px;
    padding: 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--alalaas-primary), var(--alalaas-primary-deep));
    color: #ffffff;
    box-shadow: 0 22px 40px rgba(195, 31, 38, 0.26);
  }

  .alalaas-floating-card span {
    display: block;
    font-size: 12px;
    opacity: 0.86;
    margin-bottom: 7px;
    font-weight: 700;
  }

  .alalaas-floating-card strong {
    display: block;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 900;
  }


  /* ABOUT US - BELOW HERO */
  .alalaas-about-us {
    position: relative;
    padding: 70px 0;
    background: #ffffff;
    overflow: hidden;
  }

  .alalaas-about-wrap {
    position: relative;
    display: grid;
    grid-template-columns: 0.86fr 1.14fr;
    gap: 54px;
    align-items: stretch;
  }

  .alalaas-about-media {
    position: relative;
    overflow: hidden;
    height: auto;
    min-height: 100%;
    border-radius: 10px;
    background: #f8fafc;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
  }

  .alalaas-about-media img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.45s ease;
  }

  .alalaas-about-media:hover img {
    transform: scale(1.04);
  }

  .alalaas-about-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 92px;
    height: 92px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: var(--alalaas-primary);
    box-shadow: 0 0 0 1px rgba(195, 31, 38, 0.18), 0 0 0 26px rgba(195, 31, 38, 0.14), 0 0 0 52px rgba(195, 31, 38, 0.08);
    z-index: 2;
  }

  .alalaas-about-play svg {
    width: 36px;
    height: 36px;
    margin-left: 5px;
    fill: currentColor;
  }

  .alalaas-about-content {
    position: relative;
    padding: 8px 0;
  }

  .alalaas-about-content h2 {
    margin: 0;
    color: #0b1220;
    font-size: clamp(28px, 2.1vw, 44px);
    line-height: 1.18;
    letter-spacing: -0.035em;
    font-weight: 850;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.12);
  }

  .alalaas-about-content h2::after {
    content: "";
    display: block;
    width: 54px;
    height: 3px;
    margin-top: 14px;
    background: var(--alalaas-primary);
    box-shadow: 22px 0 0 rgba(195, 31, 38, 0.42);
  }

  .alalaas-about-text {
    display: grid;
    gap: 24px;
    margin-top: 28px;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.82;
    font-weight: 400;
  }

  .alalaas-about-text p {
    margin: 0;
  }

  .alalaas-about-text strong {
    color: var(--alalaas-heading);
    font-weight: 900;
  }

  .alalaas-about-sections {
    display: grid;
    gap: 26px;
    margin-top: 30px;
  }

  .alalaas-about-section {
    display: grid;
    gap: 12px;
  }

  .alalaas-about-section h3 {
    margin: 0;
    color: #0b1220;
    font-size: clamp(22px, 1.45vw, 32px);
    line-height: 1.2;
    letter-spacing: -0.03em;
    font-weight: 850;
  }

  .alalaas-about-section p {
    margin: 0;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;
  }

  .alalaas-about-values {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
  }

  .alalaas-about-values li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 500;
  }

  .alalaas-about-values-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-top: 3px;
    color: #ffffff;
    background: #c31f26;
    box-shadow: 0 6px 14px rgba(195, 31, 38, 0.24);
  }

  .alalaas-about-values-icon svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }

  .alalaas-about-values-icon svg path:first-child {
    fill: none;
  }

  /* SERVICES */
  .alalaas-services {
    padding: 88px 0;
    background: linear-gradient(180deg, #ffffff 0%, #fffafa 100%);
  }

  .alalaas-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .alalaas-service-card {
    position: relative;
    overflow: hidden;
    min-height: 530px;
    border-radius: 30px;
    box-shadow: var(--alalaas-shadow-soft);
    isolation: isolate;
  }

  .alalaas-service-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s ease;
    z-index: -2;
  }

  .alalaas-service-card:hover img {
    transform: scale(1.08);
  }

  .alalaas-service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.04) 10%, rgba(15, 23, 42, 0.86) 100%),
      linear-gradient(135deg, rgba(195, 31, 38, 0.24), transparent 55%);
    z-index: -1;
  }

  .alalaas-service-number {
    position: absolute;
    top: 22px;
    left: 22px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.93);
    color: var(--alalaas-primary);
    font-size: 14px;
    font-weight: 900;
  }

  .alalaas-service-content {
    position: absolute;
    z-index: 1;
    left: 24px;
    right: 24px;
    bottom: 26px;
    color: #ffffff;
  }

  .alalaas-service-content h3 {
    margin: 0 0 10px;
    font-size: 27px;
    line-height: 1.08;
    font-weight: 850;
    letter-spacing: -0.02em;
  }

  .alalaas-service-content p {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14.5px;
    line-height: 1.6;
    font-weight: 400;
  }

  .alalaas-service-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 0 18px;
    border-radius: 999px;
    color: #ffffff;
    background: var(--alalaas-primary);
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none;
    transition: 0.25s ease;
  }

  .alalaas-service-link:hover {
    background: #ffffff;
    color: var(--alalaas-primary);
  }

  /* PREMIUM SALES SECTION */
  .alalaas-sales-strip {
    position: relative;
    padding: 96px 0;
    background:
      radial-gradient(circle at 12% 18%, rgba(195, 31, 38, 0.08), transparent 28%),
      radial-gradient(circle at 92% 20%, rgba(247, 183, 51, 0.14), transparent 24%),
      linear-gradient(180deg, #fffafa 0%, #ffffff 100%);
    overflow: hidden;
  }

  .alalaas-sales-strip::before {
    content: "";
    position: absolute;
    right: -160px;
    top: -160px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.06);
  }

  .alalaas-sales-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 48px;
    align-items: center;
  }

  .alalaas-sales-content .alalaas-section-head {
    text-align: left;
    margin: 0 0 30px;
    max-width: 720px;
  }

  .alalaas-sales-content .alalaas-title {
    font-size: clamp(28px, 2.5vw, 72px);
    color: var(--alalaas-heading);
  }

  .alalaas-sales-content .alalaas-subtitle {
    margin-left: 0;
    color: #536073;
  }

  .alalaas-sales-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
  }

  .alalaas-sales-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 34px;
  }

  .alalaas-sales-feature {
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.11);
    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.07);
    transition: 0.25s ease;
  }

  .alalaas-sales-feature:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 46px rgba(195, 31, 38, 0.12);
  }

  .alalaas-sales-feature::after {
    content: "";
    position: absolute;
    right: -34px;
    top: -34px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.06);
  }

  .alalaas-sales-feature-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    color: var(--alalaas-primary);
    background:
      radial-gradient(circle at 30% 20%, rgba(247, 183, 51, 0.22), transparent 42%),
      var(--alalaas-primary-soft);
  }

  .alalaas-sales-feature-icon svg {
    width: 23px;
    height: 23px;
  }

  .alalaas-sales-feature h3 {
    margin: 0 0 7px;
    color: var(--alalaas-heading);
    font-size: 15.5px;
    line-height: 1.3;
    font-weight: 900;
  }

  .alalaas-sales-feature p {
    margin: 0;
    color: #667085;
    font-size: 13.5px;
    line-height: 1.58;
    font-weight: 400;
  }

  .alalaas-sales-media {
    position: relative;
  }

  .alalaas-sales-img-card {
    position: relative;
    overflow: hidden;
    height: 730px;
    border-radius: 42px;
    border: 12px solid #ffffff;
    box-shadow: var(--alalaas-shadow);
  }

  .alalaas-sales-img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .alalaas-sales-img-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.46)),
      linear-gradient(135deg, rgba(195, 31, 38, 0.20), transparent 55%);
  }

  .alalaas-sales-badge {
    position: absolute;
    left: -26px;
    bottom: 34px;
    z-index: 2;
    max-width: 315px;
    padding: 23px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.44);
    box-shadow: 0 22px 44px rgba(16, 24, 40, 0.16);
    backdrop-filter: blur(14px);
  }

  .alalaas-sales-badge strong {
    display: block;
    color: var(--alalaas-primary);
    font-size: 28px;
    line-height: 1.08;
    font-weight: 950;
    margin-bottom: 8px;
  }

  .alalaas-sales-badge span {
    display: block;
    color: #536073;
    font-size: 13.5px;
    line-height: 1.58;
    font-weight: 600;
  }

  .alalaas-sales-top-badge {
    position: absolute;
    right: -18px;
    top: 38px;
    z-index: 2;
    padding: 17px 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--alalaas-primary), var(--alalaas-primary-deep));
    color: #ffffff;
    box-shadow: 0 20px 38px rgba(195, 31, 38, 0.25);
  }

  .alalaas-sales-top-badge small {
    display: block;
    font-size: 12px;
    opacity: 0.82;
    font-weight: 700;
    margin-bottom: 5px;
  }

  .alalaas-sales-top-badge strong {
    display: block;
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
  }

  .alalaas-sales-mini-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
  }

  .alalaas-sales-mini {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 15px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    color: #344054;
    font-size: 13.5px;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.06);
  }

  .alalaas-sales-mini span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--alalaas-primary);
    box-shadow: 0 0 0 6px rgba(195, 31, 38, 0.10);
  }

  /* APP CTA */
  .alalaas-app {
    padding: 0 0 92px;
    background: #ffffff;
  }

  .alalaas-app-box {
    position: relative;
    overflow: hidden;
    min-height: 460px;
    display: grid;
    grid-template-columns: 1fr 0.86fr;
    align-items: center;
    gap: 34px;
    padding: 72px 84px;
    border-radius: 38px;
    background:
      radial-gradient(circle at 88% 22%, rgba(255, 255, 255, 0.18), transparent 25%),
      radial-gradient(circle at 10% 95%, rgba(255, 255, 255, 0.14), transparent 28%),
      linear-gradient(135deg, var(--alalaas-primary), var(--alalaas-primary-deep));
    color: #ffffff;
    box-shadow: 0 26px 60px rgba(195, 31, 38, 0.18);
  }

  .alalaas-app-box::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    right: -120px;
    bottom: -130px;
    border: 55px solid rgba(255, 255, 255, 0.08);
  }

  .alalaas-app-content {
    position: relative;
    z-index: 1;
  }

  .alalaas-app-content h2 {
    margin: 0 0 22px;
    max-width: 650px;
    font-size: clamp(28px, 2.5vw, 72px);
    line-height: 1.12;
    letter-spacing: -0.035em;
    font-weight: 850;
  }

  .alalaas-app-content p {
    margin: 0 0 30px;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.75;
    font-weight: 400;
  }

  .alalaas-app-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
  }

  .alalaas-store-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 999px;
    color: var(--alalaas-primary);
    background: #ffffff;
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 900;
    transition: 0.25s ease;
  }

  .alalaas-store-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.18);
  }

  .alalaas-store-btn svg {
    width: 20px;
    height: 20px;
  }

  .alalaas-phone {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
  }

  .alalaas-phone-card {
    position: relative;
    width: min(360px, 100%);
    padding: 14px;
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(12px);
  }

  .alalaas-phone img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    border-radius: 26px;
    display: block;
    filter: drop-shadow(0 24px 36px rgba(0, 0, 0, 0.22));
  }

  .alalaas-mini-note {
    position: absolute;
    left: -24px;
    bottom: 28px;
    padding: 15px 17px;
    max-width: 200px;
    border-radius: 18px;
    background: #ffffff;
    color: var(--alalaas-heading);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.14);
  }

  .alalaas-mini-note strong {
    display: block;
    color: var(--alalaas-primary);
    font-size: 18px;
    font-weight: 900;
  }

  .alalaas-mini-note span {
    display: block;
    margin-top: 4px;
    color: #667085;
    font-size: 12.5px;
    line-height: 1.45;
    font-weight: 600;
  }

  /* WHY CHOOSE */
  .alalaas-why {
    position: relative;
    padding: 98px 0;
    background:
      radial-gradient(circle at 12% 20%, rgba(195, 31, 38, 0.08), transparent 28%),
      radial-gradient(circle at 75% 12%, rgba(247, 183, 51, 0.14), transparent 24%),
      linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
  }

  .alalaas-why-wrap {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 46px;
    align-items: stretch;
  }

  .alalaas-why-media {
    position: relative;
    height: 100%;
    display: flex;
  }

  .alalaas-why-img-box {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 42px;
    box-shadow: var(--alalaas-shadow);
  }

  .alalaas-why-img-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.50)),
      linear-gradient(135deg, rgba(195, 31, 38, 0.18), transparent 55%);
  }

  .alalaas-why-img-box img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    display: block;
  }

  .alalaas-why-floating {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    z-index: 2;
    padding: 24px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(14px);
  }

  .alalaas-why-floating strong {
    display: block;
    color: var(--alalaas-primary);
    font-size: 34px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 9px;
  }

  .alalaas-why-floating span {
    display: block;
    color: #475467;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 600;
  }

  .alalaas-why-content .alalaas-section-head {
    text-align: left;
    margin: 0 0 30px;
    max-width: 720px;
  }

  .alalaas-why-content .alalaas-title {
    font-size: clamp(20px, 2.0vw, 62px);
  }

  .alalaas-why-list {
    display: grid;
    gap: 18px;
  }

  .alalaas-why-card {
    position: relative;
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 18px;
    align-items: flex-start;
    padding: 24px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(195, 31, 38, 0.11);
    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.07);
    transition: 0.25s ease;
  }

  .alalaas-why-card:hover {
    transform: translateX(8px);
    border-color: rgba(195, 31, 38, 0.25);
    box-shadow: 0 22px 46px rgba(195, 31, 38, 0.12);
  }

  .alalaas-why-icon {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: var(--alalaas-primary);
    background:
      radial-gradient(circle at 30% 20%, rgba(247, 183, 51, 0.22), transparent 40%),
      var(--alalaas-primary-soft);
    box-shadow: inset 0 0 0 1px rgba(195, 31, 38, 0.09);
  }

  .alalaas-why-icon svg {
    width: 32px;
    height: 32px;
  }

  .alalaas-why-card h3 {
    margin: 0 0 8px;
    color: var(--alalaas-heading);
    font-size: 19px;
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: -0.015em;
  }

  .alalaas-why-card p {
    margin: 0;
    color: #536073;
    font-size: 15px;
    line-height: 1.72;
    font-weight: 400;
  }

  .alalaas-why-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
  }

  .alalaas-why-mini {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 16px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    color: #344054;
    font-size: 13.5px;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.06);
  }

  .alalaas-why-mini span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--alalaas-primary);
    box-shadow: 0 0 0 6px rgba(195, 31, 38, 0.10);
  }

  .alalaas-why-mini .alalaas-inline-icon {
    width: 18px;
    height: 18px;
  }

  .alalaas-why-mini .alalaas-inline-icon svg {
    width: 18px;
    height: 18px;
  }

  /* STORIES */
  .alalaas-stories {
    position: relative;
    padding: 96px 0;
    background:
      radial-gradient(circle at 10% 12%, rgba(195, 31, 38, 0.09), transparent 28%),
      radial-gradient(circle at 92% 16%, rgba(247, 183, 51, 0.14), transparent 24%),
      linear-gradient(180deg, #fffafa 0%, #ffffff 100%);
    overflow: hidden;
  }

  .alalaas-stories::before {
    content: "";
    position: absolute;
    left: -130px;
    bottom: -160px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.06);
  }

  .alalaas-stories-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
  }

  .alalaas-stories-content .alalaas-section-head {
    text-align: left;
    margin: 0 0 30px;
    max-width: 720px;
  }

  .alalaas-stories-content .alalaas-title {
    color: var(--alalaas-heading);
    font-size: clamp(28px, 2.5vw, 72px);
  }

  .alalaas-stories-content .alalaas-subtitle {
    color: #536073;
    margin-left: 0;
  }

  .alalaas-story-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 34px 0 28px;
  }

  .alalaas-story-stat {
    position: relative;
    overflow: hidden;
    padding: 28px 20px;
    border-radius: 26px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.11);
    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.08);
    transition: 0.25s ease;
  }

  .alalaas-story-stat-icon {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 16px;
    color: var(--alalaas-primary);
    background:
      radial-gradient(circle at 30% 20%, rgba(247, 183, 51, 0.22), transparent 42%),
      var(--alalaas-primary-soft);
    box-shadow: inset 0 0 0 1px rgba(195, 31, 38, 0.10);
  }

  .alalaas-story-stat-icon svg {
    width: 22px;
    height: 22px;
  }

  .alalaas-story-stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 46px rgba(195, 31, 38, 0.13);
  }

  .alalaas-story-stat::after {
    content: "";
    position: absolute;
    right: -35px;
    top: -35px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.07);
  }

  .alalaas-story-stat strong {
    position: relative;
    z-index: 1;
    display: block;
    color: var(--alalaas-primary);
    font-size: 34px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 10px;
  }

  .alalaas-story-stat span {
    position: relative;
    z-index: 1;
    display: block;
    color: #475467;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .alalaas-story-note {
    display: grid;
    gap: 14px;
    margin-top: 26px;
  }

  .alalaas-story-note-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 16px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.10);
    color: #475467;
    font-size: 14.5px;
    line-height: 1.65;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.05);
  }

  .alalaas-story-note-item svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--alalaas-primary);
    margin-top: 2px;
  }

  .alalaas-stories-media {
    position: relative;
  }

  .alalaas-stories-img-card {
    position: relative;
    overflow: hidden;
    height: 560px;
    border-radius: 42px;
    box-shadow: var(--alalaas-shadow);
    border: 12px solid #ffffff;
  }

  .alalaas-stories-img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .alalaas-stories-img-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.42)),
      linear-gradient(135deg, rgba(195, 31, 38, 0.20), transparent 55%);
  }

  .alalaas-stories-badge {
    position: absolute;
    left: -24px;
    bottom: 34px;
    z-index: 2;
    max-width: 300px;
    padding: 22px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.44);
    box-shadow: 0 22px 44px rgba(16, 24, 40, 0.16);
    backdrop-filter: blur(14px);
  }

  .alalaas-stories-badge strong {
    display: block;
    color: var(--alalaas-primary);
    font-size: 27px;
    line-height: 1.08;
    font-weight: 950;
    margin-bottom: 8px;
  }

  .alalaas-stories-badge span {
    display: block;
    color: #536073;
    font-size: 13.5px;
    line-height: 1.58;
    font-weight: 600;
  }

  .alalaas-stories-rating {
    position: absolute;
    right: -18px;
    top: 38px;
    z-index: 2;
    padding: 17px 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--alalaas-primary), var(--alalaas-primary-deep));
    color: #ffffff;
    box-shadow: 0 20px 38px rgba(195, 31, 38, 0.25);
  }

  .alalaas-stories-rating small {
    display: block;
    font-size: 12px;
    opacity: 0.82;
    font-weight: 700;
    margin-bottom: 5px;
  }

  .alalaas-stories-rating strong {
    display: block;
    font-size: 24px;
    line-height: 1;
    font-weight: 950;
  }

  .alalaas-stories-rating span {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: #ffd166;
  }

  /* TESTIMONIAL */
  .alalaas-testimonial {
    padding: 96px 0;
    background: linear-gradient(180deg, #ffffff 0%, #fffafa 100%);
  }

  .alalaas-testimonial-wrap {
    position: relative;
    min-height: 440px;
    display: grid;
    grid-template-columns: 335px 1fr;
    align-items: center;
    gap: 0;
  }

  .alalaas-testimonial-img {
    position: relative;
    z-index: 2;
    width: 390px;
    height: 350px;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: var(--alalaas-shadow);
    border: 10px solid #ffffff;
  }

  .alalaas-testimonial-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .alalaas-testimonial-card {
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 74px 84px 74px 170px;
    border-radius: 40px;
    background:
      radial-gradient(circle at 75% 18%, rgba(255, 255, 255, 0.16), transparent 24%),
      linear-gradient(135deg, var(--alalaas-primary), var(--alalaas-primary-dark));
    color: #ffffff;
    box-shadow: 0 26px 56px rgba(195, 31, 38, 0.18);
  }

  .alalaas-quote-mark {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 60px;
    line-height: 1;
    font-weight: 900;
    margin-bottom: 20px;
  }

  .alalaas-testimonial-card h3 {
    max-width: 720px;
    margin: 0 0 18px;
    font-size: clamp(38px, 1.5vw, 62px);
    line-height: 1.18;
    letter-spacing: -0.035em;
    font-weight: 600;
  }

  .alalaas-testimonial-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 15px;
    font-weight: 700;
  }

  .alalaas-dots {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
  }

  .alalaas-dot-btn {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: var(--alalaas-primary);
    font-size: 22px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.25s ease;
  }

  .alalaas-dot-btn:hover {
    transform: translateY(-2px);
  }

  .alalaas-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
  }



  /* GIFT COLLECTION DETAIL MODAL */
  .alalaas-service-link {
    border: 0;
    cursor: pointer;
    font-family: inherit;
  }

  .alalaas-gift-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .alalaas-gift-modal.is-open {
    display: flex;
  }

  .alalaas-gift-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(8px);
  }

  .alalaas-gift-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(880px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 32px;
    background: #ffffff;
    box-shadow: 0 34px 90px rgba(15, 23, 42, 0.28);
    animation: alalaasModalIn 0.25s ease;
  }

  @keyframes alalaasModalIn {
    from {
      opacity: 0;
      transform: translateY(16px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .alalaas-gift-modal-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 28px 30px 24px;
    border-bottom: 1px solid rgba(195, 31, 38, 0.12);
    background:
      radial-gradient(circle at 92% 0%, rgba(247, 183, 51, 0.16), transparent 25%),
      linear-gradient(135deg, #fff7f7 0%, #ffffff 66%);
  }

  .alalaas-gift-modal-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--alalaas-primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  .alalaas-gift-modal-kicker svg {
    width: 16px;
    height: 16px;
  }

  .alalaas-gift-modal-title {
    margin: 0;
    color: var(--alalaas-heading);
    font-size: clamp(25px, 2.1vw, 40px);
    line-height: 1.12;
    letter-spacing: -0.03em;
    font-weight: 900;
  }

  .alalaas-gift-modal-close {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: #ffffff;
    color: var(--alalaas-heading);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: 0.25s ease;
  }

  .alalaas-gift-modal-close:hover {
    transform: rotate(90deg);
    color: var(--alalaas-primary);
    border-color: rgba(195, 31, 38, 0.22);
  }

  .alalaas-gift-modal-close svg {
    width: 22px;
    height: 22px;
  }

  .alalaas-gift-modal-body {
    max-height: calc(100vh - 210px);
    overflow: auto;
    padding: 28px 30px 30px;
  }

  .alalaas-gift-modal-intro {
    margin: 0 0 18px;
    padding: 20px 22px;
    border-radius: 22px;
    color: #344054;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 14px 34px rgba(16, 24, 40, 0.06);
    font-size: 15.5px;
    line-height: 1.75;
    font-weight: 500;
  }

  .alalaas-gift-modal-points {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .alalaas-gift-modal-points li {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #3f4857;
    font-size: 15px;
    line-height: 1.68;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.04);
  }

  .alalaas-gift-modal-point-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--alalaas-primary);
    background:
      radial-gradient(circle at 30% 20%, rgba(247, 183, 51, 0.22), transparent 42%),
      var(--alalaas-primary-soft);
  }

  .alalaas-gift-modal-point-icon svg {
    width: 21px;
    height: 21px;
  }

  .alalaas-gift-modal-points strong {
    color: var(--alalaas-heading);
    font-weight: 900;
  }

  .alalaas-gift-modal-note {
    margin-top: 18px;
    padding: 19px 22px;
    border-radius: 20px;
    border-left: 4px solid var(--alalaas-primary);
    background: rgba(195, 31, 38, 0.06);
    color: #3f4857;
    font-size: 14.5px;
    line-height: 1.65;
    font-weight: 500;
  }

  .alalaas-gift-modal-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 30px 26px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
  }

  .alalaas-gift-modal-help {
    color: #667085;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
  }

  .alalaas-gift-modal-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--alalaas-primary), var(--alalaas-primary-dark));
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 16px 28px rgba(195, 31, 38, 0.22);
    transition: 0.25s ease;
  }

  .alalaas-gift-modal-action:hover {
    transform: translateY(-2px);
    color: #ffffff;
  }

  .alalaas-gift-modal-action svg {
    width: 18px;
    height: 18px;
  }

  @media (max-width: 700px) {
    .alalaas-gift-modal {
      padding: 14px;
    }

    .alalaas-gift-modal-dialog {
      border-radius: 24px;
    }

    .alalaas-gift-modal-head,
    .alalaas-gift-modal-body,
    .alalaas-gift-modal-foot {
      padding-left: 20px;
      padding-right: 20px;
    }

    .alalaas-gift-modal-body {
      max-height: calc(100vh - 220px);
    }

    .alalaas-gift-modal-points li {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 1100px) {
    .alalaas-hero-grid,
    .alalaas-sales-wrap,
    .alalaas-app-box,
    .alalaas-why-wrap,
    .alalaas-stories-wrap {
      grid-template-columns: 1fr;
    }

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

    .alalaas-sales-content .alalaas-section-head,
    .alalaas-stories-content .alalaas-section-head {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    .alalaas-sales-content .alalaas-subtitle,
    .alalaas-stories-content .alalaas-subtitle {
      margin-left: auto;
    }

    .alalaas-sales-actions,
    .alalaas-sales-mini-row {
      justify-content: center;
    }

    .alalaas-sales-img-card,
    .alalaas-stories-img-card {
      height: 500px;
    }

    .alalaas-sales-badge,
    .alalaas-stories-badge {
      left: 24px;
    }

    .alalaas-sales-top-badge,
    .alalaas-stories-rating {
      right: 24px;
    }

    .alalaas-testimonial-wrap {
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .alalaas-testimonial-img {
      width: 100%;
      max-width: 540px;
      height: 330px;
      margin: 0 auto;
    }

    .alalaas-testimonial-card {
      padding: 54px;
    }

    .alalaas-hero-badge {
      left: 24px;
    }

    .alalaas-floating-card {
      right: 20px;
    }

    .alalaas-mini-note {
      left: 22px;
    }

    .alalaas-why-wrap {
      align-items: center;
    }

    .alalaas-why-media {
      display: block;
      height: auto;
    }

    .alalaas-why-img-box,
    .alalaas-why-img-box img {
      height: 520px;
      min-height: 520px;
    }
  }

  @media (max-width: 700px) {
    .alalaas-container {
      width: 75%;
      max-width: 1600px;
    }

    .alalaas-hero {
      padding: 58px 0 56px;
    }

    .alalaas-hero::before {
      display: none;
    }

    .alalaas-services,
    .alalaas-sales-strip,
    .alalaas-why,
    .alalaas-stories,
    .alalaas-testimonial {
      padding: 58px 0;
    }

    .alalaas-section-head {
      margin-bottom: 34px;
    }

    .alalaas-hero-img {
      height: 390px;
      border-radius: 22px;
    }

    .alalaas-hero-img-wrap {
      border-radius: 28px;
      padding: 8px;
    }

    .alalaas-hero-badge {
      position: relative;
      left: auto;
      bottom: auto;
      margin: -54px 16px 0;
      width: auto;
    }

    .alalaas-floating-card {
      position: relative;
      right: auto;
      top: auto;
      width: auto;
      margin: 16px 16px 0;
    }

    .alalaas-services-grid,
    .alalaas-sales-features,
    .alalaas-story-stats {
      grid-template-columns: 1fr;
    }

    .alalaas-service-card {
      min-height: 370px;
    }

    .alalaas-sales-feature {
      padding: 18px;
    }

    .alalaas-sales-img-card,
    .alalaas-stories-img-card {
      height: 390px;
      border-radius: 28px;
      border-width: 8px;
    }

    .alalaas-sales-badge,
    .alalaas-sales-top-badge,
    .alalaas-stories-badge,
    .alalaas-stories-rating {
      position: relative;
      left: auto;
      right: auto;
      top: auto;
      bottom: auto;
      max-width: none;
      margin-top: 14px;
    }

    .alalaas-app {
      padding-bottom: 58px;
    }

    .alalaas-app-box {
      padding: 42px 24px;
      border-radius: 28px;
    }

    .alalaas-phone img {
      height: 300px;
    }

    .alalaas-mini-note {
      position: relative;
      left: auto;
      bottom: auto;
      max-width: none;
      margin-top: 14px;
    }

    .alalaas-why-media {
      display: block;
      height: auto;
    }

    .alalaas-why-img-box,
    .alalaas-why-img-box img {
      height: 390px;
      min-height: 390px;
      border-radius: 28px;
    }

    .alalaas-why-floating {
      left: 16px;
      right: 16px;
      bottom: 16px;
      padding: 18px;
      border-radius: 22px;
    }

    .alalaas-why-floating strong {
      font-size: 28px;
    }

    .alalaas-why-content .alalaas-section-head {
      text-align: center;
      margin-bottom: 28px;
    }

    .alalaas-why-card {
      grid-template-columns: 1fr;
      text-align: center;
      padding: 24px 20px;
    }

    .alalaas-why-card:hover {
      transform: translateY(-4px);
    }

    .alalaas-why-icon {
      margin: 0 auto;
    }

    .alalaas-why-bottom {
      justify-content: center;
    }

    .alalaas-testimonial-card {
      padding: 36px 24px;
      border-radius: 28px;
    }

    .alalaas-testimonial-img {
      height: 300px;
      border-radius: 26px;
    }
  }

  /* TESTIMONIAL - LUXURY EDITORIAL DESIGN */
  .alalaas-testimonial {
    position: relative;
    padding: 112px 0;
    background:
      radial-gradient(circle at 8% 10%, rgba(195, 31, 38, 0.07), transparent 30%),
      radial-gradient(circle at 88% 18%, rgba(247, 183, 51, 0.15), transparent 28%),
      linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
    overflow: hidden;
  }

  .alalaas-testimonial::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 42px;
    width: min(72%, 1120px);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.25), transparent);
  }

  .alalaas-testimonial-shell {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 34px;
    align-items: stretch;
    min-height: 560px;
    border-radius: 46px;
    padding: 22px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 246, 246, 0.94));
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 30px 86px rgba(16, 24, 40, 0.12);
  }

  .alalaas-testimonial-shell::before {
    content: "";
    position: absolute;
    right: -120px;
    top: -150px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.065);
    pointer-events: none;
  }

  .alalaas-testimonial-shell::after {
    content: "";
    position: absolute;
    left: -130px;
    bottom: -150px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(247, 183, 51, 0.12);
    pointer-events: none;
  }

  .alalaas-testimonial-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 516px;
    padding: 54px 58px;
    border-radius: 34px;
    background:
      radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.12), transparent 28%),
      linear-gradient(135deg, var(--alalaas-primary-deep), var(--alalaas-primary) 58%, #8f1018);
    color: #ffffff;
    box-shadow: 0 26px 60px rgba(195, 31, 38, 0.18);
  }

  .alalaas-testimonial-kicker {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin-bottom: 22px;
    border-radius: 999px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .alalaas-testimonial-kicker svg {
    width: 18px;
    height: 18px;
  }

  .alalaas-testimonial-title {
    max-width: 760px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(24px, 2.2vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.045em;
    font-weight: 750;
  }

  .alalaas-testimonial-text {
    max-width: 700px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 16px;
    line-height: 1.78;
    font-weight: 400;
  }

  .alalaas-testimonial-review {
    position: relative;
    margin-top: 34px;
    padding: 30px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
  }

  .alalaas-testimonial-review::before {
    content: "\201C";
    position: absolute;
    right: 24px;
    top: -18px;
    color: rgba(255, 255, 255, 0.16);
    font-size: 112px;
    line-height: 1;
    font-family: Georgia, serif;
    font-weight: 900;
  }

  .alalaas-testimonial-review blockquote {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.55;
    letter-spacing: -0.02em;
    font-weight: 750;
  }

  .alalaas-testimonial-author {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .alalaas-testimonial-person {
    display: flex;
    align-items: center;
    gap: 13px;
  }

  .alalaas-testimonial-avatar {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 19px;
    color: var(--alalaas-primary);
    background: #ffffff;
    font-size: 15px;
    font-weight: 950;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
  }

  .alalaas-testimonial-person strong {
    display: block;
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
  }

  .alalaas-testimonial-person span {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 650;
  }

  .alalaas-testimonial-stars {
    color: #ffd166;
    font-size: 18px;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .alalaas-testimonial-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
  }

  .alalaas-dot-btn {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 50%;
    background: #ffffff;
    color: var(--alalaas-primary);
    font-size: 22px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.25s ease;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
  }

  .alalaas-dot-btn:hover {
    transform: translateY(-2px);
    background: var(--alalaas-primary-deep);
    color: #ffffff;
  }

  .alalaas-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.42);
  }

  .alalaas-dot.is-active {
    width: 30px;
    border-radius: 999px;
    background: #ffffff;
  }

  .alalaas-testimonial-visual {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 18px;
    min-height: 516px;
  }

  .alalaas-testimonial-main-img {
    position: relative;
    overflow: hidden;
    min-height: 382px;
    border-radius: 34px;
    background: #ffffff;
    box-shadow: 0 24px 58px rgba(16, 24, 40, 0.12);
  }

  .alalaas-testimonial-main-img img {
    width: 100%;
    height: 100%;
    min-height: 382px;
    object-fit: cover;
    display: block;
  }

  .alalaas-testimonial-main-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00), rgba(15, 23, 42, 0.44)),
      linear-gradient(135deg, rgba(195, 31, 38, 0.16), transparent 60%);
  }

  .alalaas-testimonial-image-label {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.46);
    box-shadow: 0 22px 44px rgba(16, 24, 40, 0.15);
    backdrop-filter: blur(14px);
  }

  .alalaas-testimonial-image-label strong {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 24px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--alalaas-primary), var(--alalaas-primary-deep));
    font-size: 25px;
    line-height: 1;
    font-weight: 950;
    box-shadow: 0 16px 30px rgba(195, 31, 38, 0.20);
  }

  .alalaas-testimonial-image-label span {
    display: block;
    color: #475467;
    font-size: 13.5px;
    line-height: 1.58;
    font-weight: 650;
  }

  .alalaas-testimonial-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .alalaas-testimonial-benefit {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 11px;
    min-height: 116px;
    padding: 18px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.10);
    color: var(--alalaas-heading);
    font-size: 13.5px;
    line-height: 1.34;
    font-weight: 900;
    box-shadow: 0 18px 42px rgba(16, 24, 40, 0.08);
  }

  .alalaas-testimonial-benefit::after {
    content: "";
    position: absolute;
    right: -28px;
    top: -28px;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.06);
  }

  .alalaas-testimonial-benefit svg {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    color: var(--alalaas-primary);
  }

  @media (max-width: 1100px) {
    .alalaas-testimonial-shell {
      grid-template-columns: 1fr;
    }

    .alalaas-testimonial-content,
    .alalaas-testimonial-visual {
      min-height: auto;
    }

    .alalaas-testimonial-main-img,
    .alalaas-testimonial-main-img img {
      min-height: 430px;
    }
  }

  @media (max-width: 700px) {
    .alalaas-testimonial {
      padding: 60px 0;
    }

    .alalaas-testimonial-shell {
      padding: 12px;
      border-radius: 30px;
      gap: 18px;
    }

    .alalaas-testimonial-content {
      padding: 34px 22px;
      border-radius: 24px;
      text-align: left;
    }

    .alalaas-testimonial-title {
      font-size: clamp(29px, 9vw, 42px);
    }

    .alalaas-testimonial-review {
      padding: 23px;
      border-radius: 24px;
    }

    .alalaas-testimonial-review blockquote {
      font-size: 17px;
      line-height: 1.65;
    }

    .alalaas-testimonial-author {
      flex-direction: column;
      align-items: flex-start;
    }

    .alalaas-testimonial-main-img,
    .alalaas-testimonial-main-img img {
      min-height: 360px;
      border-radius: 24px;
    }

    .alalaas-testimonial-image-label {
      left: 14px;
      right: 14px;
      bottom: 14px;
      grid-template-columns: 1fr;
      padding: 16px;
      border-radius: 20px;
    }

    .alalaas-testimonial-image-label strong {
      width: 64px;
      height: 64px;
      border-radius: 20px;
      font-size: 21px;
    }

    .alalaas-testimonial-benefits {
      grid-template-columns: 1fr;
    }

    .alalaas-testimonial-benefit {
      min-height: auto;
      grid-template-columns: auto 1fr;
      align-items: center;
    }

    .alalaas-testimonial-controls {
      justify-content: flex-start;
    }
  }


  /* SPACING REDUCE ONLY - tighter gaps between each part, no content/design/logic changes */
  .alalaas-section-head {
    margin-bottom: 26px !important;
  }

  .alalaas-kicker {
    margin-bottom: 10px !important;
    padding: 8px 14px !important;
  }

  .alalaas-subtitle {
    margin-top: 10px !important;
    line-height: 1.62 !important;
  }

  .alalaas-hero {
    padding: 56px 0 44px !important;
  }

  .alalaas-hero::before {
    inset: 14px !important;
  }

  .alalaas-hero-grid,
  .alalaas-sales-wrap,
  .alalaas-why-wrap,
  .alalaas-stories-wrap,
  .alalaas-testimonial-shell {
    gap: 26px !important;
  }

  .alalaas-hero-text {
    margin: 14px 0 20px !important;
    line-height: 1.65 !important;
  }

  .alalaas-hero-trust,
  .alalaas-why-bottom,
  .alalaas-sales-mini-row {
    margin-top: 16px !important;
  }

  .alalaas-services,
  .alalaas-sales-strip,
  .alalaas-why,
  .alalaas-stories,
  .alalaas-testimonial {
    padding: 48px 0 !important;
  }

  .alalaas-app {
    padding: 0 0 48px !important;
  }

  .alalaas-services-grid,
  .alalaas-sales-features,
  .alalaas-story-stats,
  .alalaas-testimonial-benefits {
    gap: 14px !important;
  }

  .alalaas-service-card {
    min-height: 450px !important;
  }

  .alalaas-service-content {
    bottom: 18px !important;
  }

  .alalaas-service-content h3 {
    margin-bottom: 7px !important;
  }

  .alalaas-service-content p {
    margin-bottom: 12px !important;
    line-height: 1.48 !important;
  }

  .alalaas-sales-content .alalaas-section-head,
  .alalaas-why-content .alalaas-section-head,
  .alalaas-stories-content .alalaas-section-head {
    margin-bottom: 18px !important;
  }

  .alalaas-sales-actions {
    margin-top: 18px !important;
  }

  .alalaas-sales-features {
    margin-top: 20px !important;
  }

  .alalaas-sales-feature,
  .alalaas-why-card,
  .alalaas-story-stat,
  .alalaas-story-note-item,
  .alalaas-testimonial-benefit {
    padding: 16px !important;
  }

  .alalaas-sales-feature h3,
  .alalaas-why-card h3 {
    margin-bottom: 5px !important;
  }

  .alalaas-sales-feature p,
  .alalaas-why-card p,
  .alalaas-story-note-item {
    line-height: 1.5 !important;
  }

  .alalaas-sales-img-card {
    height: 590px !important;
  }

  .alalaas-app-box {
    min-height: 360px !important;
    gap: 22px !important;
    padding: 46px 56px !important;
  }

  .alalaas-app-content h2 {
    margin-bottom: 12px !important;
  }

  .alalaas-app-content p {
    margin-bottom: 18px !important;
    line-height: 1.55 !important;
  }

  .alalaas-phone img {
    height: 280px !important;
  }

  .alalaas-why-list,
  .alalaas-story-note {
    gap: 12px !important;
  }

  .alalaas-why-img-box,
  .alalaas-why-img-box img {
    min-height: 440px !important;
    height: 440px !important;
  }

  .alalaas-why-floating {
    bottom: 18px !important;
    padding: 18px !important;
  }

  .alalaas-stories-img-card {
    height: 460px !important;
  }

  .alalaas-story-stats {
    margin: 20px 0 18px !important;
  }

  .alalaas-story-stat-icon {
    margin-bottom: 10px !important;
  }

  .alalaas-story-stat strong {
    margin-bottom: 6px !important;
  }

  .alalaas-testimonial-shell {
    min-height: 450px !important;
    padding: 16px !important;
  }

  .alalaas-testimonial-content,
  .alalaas-testimonial-visual {
    min-height: 420px !important;
  }

  .alalaas-testimonial-content {
    padding: 38px 42px !important;
  }

  .alalaas-testimonial-kicker {
    margin-bottom: 14px !important;
    padding: 8px 14px !important;
  }

  .alalaas-testimonial-text {
    margin-top: 14px !important;
    line-height: 1.58 !important;
  }

  .alalaas-testimonial-review {
    margin-top: 20px !important;
    padding: 22px !important;
  }

  .alalaas-testimonial-review blockquote {
    line-height: 1.42 !important;
  }

  .alalaas-testimonial-author {
    margin-top: 16px !important;
    padding-top: 14px !important;
  }

  .alalaas-testimonial-controls,
  .alalaas-dots {
    margin-top: 16px !important;
  }

  .alalaas-testimonial-main-img,
  .alalaas-testimonial-main-img img {
    min-height: 320px !important;
  }

  .alalaas-testimonial-benefit {
    min-height: 92px !important;
    gap: 7px !important;
  }

  .alalaas-gift-modal-head {
    padding: 20px 24px 18px !important;
  }

  .alalaas-gift-modal-body {
    padding: 20px 24px 22px !important;
  }

  .alalaas-gift-modal-foot {
    padding: 18px 24px 20px !important;
  }

  .alalaas-gift-modal-intro {
    margin-bottom: 12px !important;
    padding: 16px 18px !important;
    line-height: 1.55 !important;
  }

  .alalaas-gift-modal-points {
    gap: 10px !important;
  }

  .alalaas-gift-modal-points li {
    padding: 14px !important;
    line-height: 1.5 !important;
  }

  .alalaas-gift-modal-note {
    margin-top: 12px !important;
    padding: 15px 18px !important;
    line-height: 1.5 !important;
  }

  @media (max-width: 1100px) {
    .alalaas-hero-grid,
    .alalaas-sales-wrap,
    .alalaas-app-box,
    .alalaas-why-wrap,
    .alalaas-stories-wrap,
    .alalaas-testimonial-shell {
      gap: 18px !important;
    }

    .alalaas-sales-img-card,
    .alalaas-stories-img-card {
      height: 420px !important;
    }

    .alalaas-testimonial-card {
      padding: 36px !important;
    }

    .alalaas-why-img-box,
    .alalaas-why-img-box img {
      height: 420px !important;
      min-height: 420px !important;
    }
  }

  @media (max-width: 700px) {
    .alalaas-hero {
      padding: 38px 0 34px !important;
    }

    .alalaas-services,
    .alalaas-sales-strip,
    .alalaas-why,
    .alalaas-stories,
    .alalaas-testimonial {
      padding: 36px 0 !important;
    }

    .alalaas-app {
      padding-bottom: 36px !important;
    }

    .alalaas-section-head {
      margin-bottom: 20px !important;
    }

    .alalaas-hero-text {
      margin: 12px 0 16px !important;
    }

    .alalaas-hero-trust {
      margin-top: 14px !important;
    }

    .alalaas-service-card {
      min-height: 320px !important;
    }

    .alalaas-sales-feature,
    .alalaas-why-card,
    .alalaas-story-stat,
    .alalaas-testimonial-benefit {
      padding: 14px !important;
    }

    .alalaas-sales-img-card,
    .alalaas-stories-img-card,
    .alalaas-why-img-box,
    .alalaas-why-img-box img {
      height: 320px !important;
      min-height: 320px !important;
    }

    .alalaas-app-box {
      padding: 30px 20px !important;
      min-height: 0 !important;
      gap: 16px !important;
    }

    .alalaas-phone img {
      height: 240px !important;
    }

    .alalaas-testimonial {
      padding: 36px 0 !important;
    }

    .alalaas-testimonial-shell {
      gap: 12px !important;
      padding: 10px !important;
      min-height: 0 !important;
    }

    .alalaas-testimonial-content {
      padding: 26px 18px !important;
      min-height: 0 !important;
    }

    .alalaas-testimonial-review {
      margin-top: 16px !important;
      padding: 18px !important;
    }

    .alalaas-testimonial-main-img,
    .alalaas-testimonial-main-img img {
      min-height: 280px !important;
    }
  }


  @media (max-width: 1100px) {
    .alalaas-about-wrap {
      grid-template-columns: 1fr;
      gap: 36px;
    }

    .alalaas-about-media {
      height: 470px;
      min-height: 470px;
    }

    .alalaas-about-media img {
      min-height: 470px;
    }
  }

  @media (max-width: 700px) {
    .alalaas-about-us {
      padding: 46px 0;
    }

    .alalaas-about-wrap {
      gap: 28px;
    }

    .alalaas-about-media {
      height: 360px;
      min-height: 360px;
      border-radius: 10px;
    }

    .alalaas-about-media img {
      min-height: 360px;
      border-radius: 0;
    }

    .alalaas-about-play {
      width: 72px;
      height: 72px;
      box-shadow: 0 0 0 1px rgba(195, 31, 38, 0.18), 0 0 0 18px rgba(195, 31, 38, 0.14), 0 0 0 34px rgba(195, 31, 38, 0.08);
    }

    .alalaas-about-play svg {
      width: 28px;
      height: 28px;
    }

    .alalaas-about-text {
      gap: 18px;
      font-size: 14.5px;
      line-height: 1.74;
    }

    .alalaas-about-section p,
    .alalaas-about-values li {
      font-size: 14.5px;
      line-height: 1.74;
    }

    .alalaas-about-sections {
      gap: 22px;
      margin-top: 24px;
    }
  }


  /* WHY CHOOSE - REDESIGNED ONLY */
  .alalaas-why {
    position: relative;
    padding: 76px 0;
    background:
      radial-gradient(circle at 12% 18%, rgba(195, 31, 38, 0.06), transparent 26%),
      radial-gradient(circle at 88% 16%, rgba(247, 183, 51, 0.12), transparent 24%),
      linear-gradient(180deg, #ffffff 0%, #fffafa 100%);
    overflow: hidden;
  }

  .alalaas-why::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 36px;
    width: min(74%, 1140px);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.22), transparent);
    pointer-events: none;
  }

  .alalaas-why-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 28px;
    align-items: stretch;
    padding: 18px;
    border-radius: 42px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 30px 84px rgba(16, 24, 40, 0.10);
    backdrop-filter: blur(12px);
  }

  .alalaas-why-media {
    position: relative;
    display: block;
    min-height: 100%;
    border-radius: 32px;
    overflow: hidden;
    background: var(--alalaas-primary-deep);
  }

  .alalaas-why-img-box {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 590px;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: none;
  }

  .alalaas-why-img-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.02) 0%, rgba(15, 23, 42, 0.18) 38%, rgba(95, 15, 19, 0.84) 100%),
      linear-gradient(135deg, rgba(195, 31, 38, 0.32), transparent 58%);
  }

  .alalaas-why-img-box img {
    width: 100%;
    height: 100%;
    min-height: 590px;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
  }

  .alalaas-why-floating {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: center;
    padding: 22px 24px;
    border-radius: 26px;
    color: #ffffff;
    background: rgba(95, 15, 19, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(14px);
  }

  .alalaas-why-floating strong {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    margin: 0;
    border-radius: 26px;
    color: var(--alalaas-primary);
    background: #ffffff;
    font-size: 29px;
    line-height: 1;
    font-weight: 950;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
  }

  .alalaas-why-floating span {
    display: block;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    line-height: 1.62;
    font-weight: 600;
  }

  .alalaas-why-content {
    position: relative;
    overflow: hidden;
    padding: 38px;
    border-radius: 32px;
    background:
      radial-gradient(circle at 90% 0%, rgba(247, 183, 51, 0.14), transparent 32%),
      linear-gradient(135deg, #ffffff 0%, #fff8f8 100%);
    border: 1px solid rgba(195, 31, 38, 0.10);
  }

  .alalaas-why-content::after {
    content: "";
    position: absolute;
    right: -86px;
    bottom: -86px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    border: 38px solid rgba(195, 31, 38, 0.045);
    pointer-events: none;
  }

  .alalaas-why-content .alalaas-section-head {
    position: relative;
    z-index: 1;
    text-align: left;
    margin: 0 0 24px;
    max-width: 860px;
  }

  .alalaas-why-content .alalaas-title {
    font-size: clamp(28px, 2.3vw, 56px);
    line-height: 1.06;
    letter-spacing: -0.045em;
  }

  .alalaas-why-content .alalaas-subtitle {
    margin-left: 0;
    max-width: 830px;
    font-size: 15.5px;
    line-height: 1.72;
  }

  .alalaas-why-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .alalaas-why-card {
    position: relative;
    overflow: hidden;
    display: block;
    min-height: 218px;
    padding: 26px 24px 24px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 18px 44px rgba(16, 24, 40, 0.07);
    transition: 0.26s ease;
  }

  .alalaas-why-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--alalaas-primary), var(--alalaas-gold));
  }

  .alalaas-why-card::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.055);
  }

  .alalaas-why-card:hover {
    transform: translateY(-7px);
    border-color: rgba(195, 31, 38, 0.25);
    box-shadow: 0 28px 62px rgba(195, 31, 38, 0.13);
  }

  .alalaas-why-icon {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin: 0 0 18px;
    border-radius: 23px;
    color: var(--alalaas-primary);
    background:
      radial-gradient(circle at 30% 18%, rgba(247, 183, 51, 0.24), transparent 42%),
      var(--alalaas-primary-soft);
    box-shadow: inset 0 0 0 1px rgba(195, 31, 38, 0.10);
  }

  .alalaas-why-icon svg {
    width: 29px;
    height: 29px;
  }

  .alalaas-why-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 9px;
    color: var(--alalaas-heading);
    font-size: 18px;
    line-height: 1.24;
    font-weight: 950;
    letter-spacing: -0.02em;
  }

  .alalaas-why-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #536073;
    font-size: 14.3px;
    line-height: 1.62;
    font-weight: 400;
  }

  .alalaas-why-bottom {
    display: none;
  }

  @media (max-width: 1100px) {
    .alalaas-why-wrap {
      grid-template-columns: 1fr;
    }

    .alalaas-why-img-box,
    .alalaas-why-img-box img {
      min-height: 460px;
      height: 460px;
    }

    .alalaas-why-content .alalaas-section-head {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    .alalaas-why-content .alalaas-subtitle {
      margin-left: auto;
    }
  }

  @media (max-width: 700px) {
    .alalaas-why {
      padding: 48px 0;
    }

    .alalaas-why-wrap {
      padding: 10px;
      gap: 12px;
      border-radius: 30px;
    }

    .alalaas-why-media,
    .alalaas-why-img-box {
      border-radius: 24px;
    }

    .alalaas-why-img-box,
    .alalaas-why-img-box img {
      min-height: 360px;
      height: 360px;
    }

    .alalaas-why-floating {
      left: 14px;
      right: 14px;
      bottom: 14px;
      grid-template-columns: 1fr;
      text-align: center;
      padding: 18px;
      border-radius: 22px;
    }

    .alalaas-why-floating strong {
      width: 82px;
      height: 82px;
      margin: 0 auto;
      font-size: 26px;
    }

    .alalaas-why-content {
      padding: 28px 20px;
      border-radius: 24px;
    }

    .alalaas-why-list {
      grid-template-columns: 1fr;
      gap: 13px;
    }

    .alalaas-why-card {
      min-height: auto;
      text-align: center;
      padding: 24px 20px;
      border-radius: 22px;
    }

    .alalaas-why-icon {
      margin-left: auto;
      margin-right: auto;
    }
  }



  /* CUSTOMER TRUST SECTION - REDESIGNED ONLY */
  .alalaas-stories {
    position: relative;
    padding: 70px 0;
    background:
      radial-gradient(circle at 0% 100%, rgba(195, 31, 38, 0.07), transparent 30%),
      radial-gradient(circle at 100% 0%, rgba(247, 183, 51, 0.13), transparent 28%),
      linear-gradient(180deg, #ffffff 0%, #fff9f9 100%);
    overflow: hidden;
  }

  .alalaas-stories::before {
    content: "";
    position: absolute;
    left: -170px;
    bottom: -190px;
    width: 390px;
    height: 390px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.055);
  }

  .alalaas-stories-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 36px;
    align-items: stretch;
    padding: 20px;
    border-radius: 42px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(195, 31, 38, 0.12);
    box-shadow: 0 30px 80px rgba(16, 24, 40, 0.10);
    backdrop-filter: blur(12px);
  }

  .alalaas-stories-content {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 560px;
    padding: 48px;
    border-radius: 32px;
    background:
      radial-gradient(circle at 12% 12%, rgba(247, 183, 51, 0.14), transparent 28%),
      linear-gradient(135deg, #ffffff 0%, #fff7f7 100%);
    border: 1px solid rgba(195, 31, 38, 0.10);
  }

  .alalaas-stories-content::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.055);
    pointer-events: none;
  }

  .alalaas-stories-content .alalaas-section-head {
    position: relative;
    z-index: 1;
    text-align: left;
    max-width: 100%;
    margin: 0 0 26px;
  }

  .alalaas-stories-content .alalaas-title {
    max-width: 680px;
    font-size: clamp(32px, 3vw, 66px);
    line-height: 1.02;
    letter-spacing: -0.05em;
  }

  .alalaas-stories-content .alalaas-subtitle {
    max-width: 790px;
    margin: 18px 0 0;
    color: #4f5d72;
    font-size: 15.6px;
    line-height: 1.75;
  }

  .alalaas-story-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
  }

  .alalaas-story-stat {
    position: relative;
    overflow: hidden;
    min-height: 138px;
    padding: 20px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--alalaas-primary), var(--alalaas-primary-deep));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 20px 42px rgba(195, 31, 38, 0.18);
    transition: 0.25s ease;
  }

  .alalaas-story-stat:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 56px rgba(195, 31, 38, 0.24);
  }

  .alalaas-story-stat::after {
    content: "";
    position: absolute;
    right: -32px;
    top: -32px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
  }

  .alalaas-story-stat-icon {
    position: relative;
    z-index: 1;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    border-radius: 16px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.20);
  }

  .alalaas-story-stat-icon svg {
    width: 22px;
    height: 22px;
  }

  .alalaas-story-stat strong {
    position: relative;
    z-index: 1;
    display: block;
    color: #ffffff;
    font-size: 34px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 8px;
  }

  .alalaas-story-stat span {
    position: relative;
    z-index: 1;
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 11.5px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .alalaas-stories-media {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 100%;
  }

  .alalaas-stories-img-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 560px;
    border-radius: 32px;
    border: 0;
    background: var(--alalaas-primary-deep);
    box-shadow: none;
  }

  .alalaas-stories-img-card img {
    width: 100%;
    height: 100%;
    min-height: 560px;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    transition: 0.45s ease;
  }

  .alalaas-stories-img-card:hover img {
    transform: scale(1.08);
  }

  .alalaas-stories-img-card::before {
    content: "";
    position: absolute;
    inset: 18px;
    z-index: 2;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.60);
    pointer-events: none;
  }

  .alalaas-stories-img-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, 0.00) 0%, rgba(15, 23, 42, 0.44) 100%),
      linear-gradient(135deg, rgba(195, 31, 38, 0.20), transparent 58%);
    pointer-events: none;
  }

  @media (max-width: 1100px) {
    .alalaas-stories-wrap {
      grid-template-columns: 1fr;
    }

    .alalaas-stories-content {
      min-height: auto;
    }

    .alalaas-stories-content .alalaas-section-head {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }

    .alalaas-stories-content .alalaas-title,
    .alalaas-stories-content .alalaas-subtitle {
      margin-left: auto;
      margin-right: auto;
    }

    .alalaas-stories-img-card,
    .alalaas-stories-img-card img {
      height: auto;
      min-height: 460px;
    }
  }

  @media (max-width: 700px) {
    .alalaas-stories {
      padding: 46px 0;
    }

    .alalaas-stories-wrap {
      padding: 10px;
      border-radius: 28px;
      gap: 12px;
    }

    .alalaas-stories-content {
      padding: 30px 20px;
      border-radius: 22px;
    }

    .alalaas-stories-content .alalaas-section-head {
      margin-bottom: 22px;
    }

    .alalaas-story-stats {
      grid-template-columns: 1fr;
    }

    .alalaas-story-stat {
      min-height: auto;
    }

    .alalaas-stories-img-card,
    .alalaas-stories-img-card img {
      height: auto;
      min-height: 360px;
      border-radius: 22px;
    }

    .alalaas-stories-img-card::before {
      inset: 12px;
      border-radius: 16px;
    }
  }


  /* SERVICES SIZE AND SPACE UPDATE ONLY */
  .alalaas-services {
    padding: 68px 0 !important;
  }

  .alalaas-services .alalaas-container {
    width: 96% !important;
    max-width: 1500px !important;
  }

  .alalaas-services-grid {
    gap: 28px !important;
  }

  .alalaas-service-card {
    min-height: 560px !important;
  }

  @media (max-width: 1100px) {
    .alalaas-services .alalaas-container {
      width: 92% !important;
    }

    .alalaas-services-grid {
      gap: 24px !important;
    }

    .alalaas-service-card {
      min-height: 500px !important;
    }
  }

  @media (max-width: 700px) {
    .alalaas-services .alalaas-container {
      width: 92% !important;
    }

    .alalaas-services-grid {
      gap: 22px !important;
    }

    .alalaas-service-card {
      min-height: 430px !important;
    }
  }


/* =========================================================
   Moved from: Pasted code (3)(24).html
   ========================================================= */
/* =========================================================
     ALALAAS GIFTS - COMMUNITY RESPONSIBILITY PAGE
     New formal design with no card-heavy layout
     Header/footer includes kept
     Accordion logic kept
  ========================================================= */

  :root{
    --cr-red:#c31f26;
    --cr-red-dark:#94141a;
    --cr-ink:#111827;
    --cr-text:#4b5563;
    --cr-muted:#6b7280;
    --cr-line:rgba(17,24,39,.12);
    --cr-soft:#fff6f7;
    --cr-white:#ffffff;
    --cr-shadow:0 24px 80px rgba(17,24,39,.08);
  }

  *{box-sizing:border-box;}

  .cr-page{
    background:#fff;
    color:var(--cr-ink);
    font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
    overflow:hidden;
  }

  .cr-wrap{
    width:90%;
    max-width:1320px;
    margin:0 auto;
  }

  .cr-kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--cr-red);
    font-size:12px;
    line-height:1;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.16em;
  }

  .cr-kicker::before{
    content:"";
    width:42px;
    height:1px;
    background:var(--cr-red);
  }

  .cr-btn{
    min-height:52px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:0 23px;
    border-radius:999px;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    transition:.25s ease;
  }

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

  .cr-btn-primary{
    color:#fff !important;
    background:var(--cr-red);
    box-shadow:0 16px 34px rgba(195,31,38,.22);
  }

  .cr-btn-primary:hover,
  .cr-btn-primary:focus{
    color:#fff !important;
    background:var(--cr-red-dark);
    transform:translateY(-2px);
    text-decoration:none;
    outline:none;
  }

  .cr-btn-outline{
    color:var(--cr-red) !important;
    border:1px solid rgba(195,31,38,.22);
    background:#fff;
  }

  .cr-btn-outline:hover,
  .cr-btn-outline:focus{
    color:var(--cr-red-dark) !important;
    border-color:rgba(195,31,38,.42);
    transform:translateY(-2px);
    text-decoration:none;
    outline:none;
  }

  /* HERO - NO CARDS */
  .cr-hero{
    position:relative;
    min-height:720px;
    display:flex;
    align-items:center;
    background:
      linear-gradient(90deg,rgba(17,24,39,.90) 0%,rgba(17,24,39,.72) 44%,rgba(17,24,39,.20) 100%),
      url('https://images.unsplash.com/photo-1513885535751-8b9238bd345a?auto=format&fit=crop&w=1800&q=80') center/cover no-repeat;
  }

  .cr-hero::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:8px;
    background:var(--cr-red);
  }

  .cr-hero::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:130px;
    background:linear-gradient(180deg,transparent,#fff);
    pointer-events:none;
  }

  .cr-hero-inner{
    position:relative;
    z-index:2;
    max-width:780px;
    padding:92px 0 120px;
  }

  .cr-hero .cr-kicker{
    color:#fff;
  }

  .cr-hero .cr-kicker::before{
    background:#fff;
  }

  .cr-hero h1{
    margin:22px 0 0;
    color:#fff;
    font-size:clamp(42px,5vw,82px);
    line-height:.98;
    letter-spacing:-.06em;
    font-weight:700;
  }

  .cr-hero p{
    margin:26px 0 0;
    max-width:720px;
    color:rgba(255,255,255,.84);
    font-size:17px;
    line-height:1.88;
    font-weight:400;
  }

  .cr-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
    margin-top:36px;
  }

  .cr-hero-meta{
    position:absolute;
    z-index:3;
    right:5%;
    bottom:48px;
    display:flex;
    align-items:center;
    gap:20px;
    color:#fff;
  }

  .cr-hero-meta span{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:13px;
    font-weight:600;
    color:rgba(255,255,255,.86);
  }

  .cr-hero-meta i{
    color:#fff;
    font-size:18px;
  }

  /* FORMAL INTRO */
  .cr-intro{
    padding:96px 0 66px;
  }

  .cr-intro-grid{
    display:grid;
    grid-template-columns:340px 1fr;
    gap:70px;
    align-items:start;
  }

  .cr-intro-label{
    position:sticky;
    top:90px;
    padding-top:8px;
  }

  .cr-intro-label h2{
    margin:18px 0 0;
    color:var(--cr-ink);
    font-size:clamp(28px,3vw,46px);
    line-height:1.08;
    letter-spacing:-.045em;
    font-weight:700;
  }

  .cr-intro-label p{
    margin:18px 0 0;
    color:var(--cr-muted);
    font-size:15px;
    line-height:1.78;
  }

  .cr-intro-content{
    border-left:1px solid var(--cr-line);
    padding-left:48px;
  }

  .cr-large-text{
    margin:0;
    color:var(--cr-ink);
    font-size:clamp(28px,3.2vw,54px);
    line-height:1.12;
    letter-spacing:-.048em;
    font-weight:650;
  }

  .cr-intro-content p:not(.cr-large-text){
    margin:26px 0 0;
    max-width:860px;
    color:var(--cr-text);
    font-size:16px;
    line-height:1.92;
  }

  .cr-text-tags{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:34px;
    padding-top:28px;
    border-top:1px solid var(--cr-line);
  }

  .cr-text-tags span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--cr-ink);
    font-size:13.5px;
    font-weight:650;
  }

  .cr-text-tags i{
    color:var(--cr-red);
    font-size:18px;
  }

  /* PRINCIPLES - LINE BASED, NOT CARDS */
  .cr-principles{
    padding:72px 0 88px;
    background:linear-gradient(180deg,#fff 0%,#fff8f8 100%);
    border-top:1px solid rgba(17,24,39,.08);
    border-bottom:1px solid rgba(17,24,39,.08);
  }

  .cr-section-head{
    display:grid;
    grid-template-columns:360px 1fr;
    gap:70px;
    align-items:end;
    margin-bottom:46px;
  }

  .cr-section-head h2{
    margin:16px 0 0;
    color:var(--cr-ink);
    font-size:clamp(30px,3.2vw,56px);
    line-height:1.04;
    letter-spacing:-.052em;
    font-weight:700;
  }

  .cr-section-head p{
    margin:0;
    color:var(--cr-text);
    font-size:16px;
    line-height:1.86;
    max-width:760px;
  }

  .cr-principle-list{
    border-top:1px solid var(--cr-line);
  }

  .cr-principle-row{
    display:grid;
    grid-template-columns:100px minmax(250px,.75fr) 1fr 120px;
    gap:28px;
    align-items:center;
    padding:32px 0;
    border-bottom:1px solid var(--cr-line);
  }

  .cr-principle-no{
    color:var(--cr-red);
    font-size:15px;
    font-weight:800;
    letter-spacing:.08em;
  }

  .cr-principle-row h3{
    margin:0;
    color:var(--cr-ink);
    font-size:25px;
    line-height:1.18;
    letter-spacing:-.03em;
    font-weight:700;
  }

  .cr-principle-row p{
    margin:0;
    color:var(--cr-text);
    font-size:15px;
    line-height:1.78;
  }

  .cr-principle-icon{
    justify-self:end;
    width:54px;
    height:54px;
    border-radius:999px;
    display:grid;
    place-items:center;
    color:var(--cr-red);
    background:#fff;
    border:1px solid rgba(195,31,38,.18);
  }

  .cr-principle-icon i{font-size:25px;}

  /* IMPACT - EDITORIAL SPLIT */
  .cr-impact{
    position:relative;
    padding:96px 0;
    background:#fff;
  }

  .cr-impact-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:60px;
    align-items:center;
  }

  .cr-impact-media{
    position:relative;
    min-height:580px;
    overflow:hidden;
    border-radius:0 70px 0 70px;
  }

  .cr-impact-media img{
    width:100%;
    height:100%;
    min-height:580px;
    object-fit:cover;
    display:block;
  }

  .cr-impact-media::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(17,24,39,.02),rgba(17,24,39,.42));
  }

  .cr-impact-copy{
    padding:30px 0;
  }

  .cr-impact-copy h2{
    margin:18px 0 0;
    color:var(--cr-ink);
    font-size:clamp(32px,3.4vw,62px);
    line-height:1.02;
    letter-spacing:-.055em;
    font-weight:700;
  }

  .cr-impact-copy p{
    margin:24px 0 0;
    color:var(--cr-text);
    font-size:16px;
    line-height:1.9;
  }

  .cr-impact-lines{
    margin-top:34px;
    border-top:1px solid var(--cr-line);
  }

  .cr-impact-line{
    display:grid;
    grid-template-columns:42px 1fr;
    gap:16px;
    padding:20px 0;
    border-bottom:1px solid var(--cr-line);
  }

  .cr-impact-line i{
    color:var(--cr-red);
    font-size:26px;
    margin-top:2px;
  }

  .cr-impact-line strong{
    display:block;
    color:var(--cr-ink);
    font-size:16px;
    font-weight:700;
    line-height:1.36;
  }

  .cr-impact-line span{
    display:block;
    margin-top:5px;
    color:var(--cr-muted);
    font-size:14px;
    line-height:1.65;
  }

  /* PROMISE SECTION - NO BOX CARDS */
  .cr-promise{
    padding:92px 0;
    background:
      linear-gradient(90deg,var(--cr-red) 0%,var(--cr-red-dark) 100%);
    color:#fff;
  }

  .cr-promise-grid{
    display:grid;
    grid-template-columns:390px 1fr;
    gap:70px;
    align-items:start;
  }

  .cr-promise h2{
    margin:18px 0 0;
    color:#fff;
    font-size:clamp(30px,3vw,54px);
    line-height:1.06;
    letter-spacing:-.05em;
    font-weight:700;
  }

  .cr-promise .cr-kicker{
    color:#fff;
  }

  .cr-promise .cr-kicker::before{
    background:#fff;
  }

  .cr-promise-text p{
    margin:0 0 22px;
    color:rgba(255,255,255,.84);
    font-size:16px;
    line-height:1.9;
  }

  .cr-promise-signature{
    margin-top:34px;
    padding-top:26px;
    border-top:1px solid rgba(255,255,255,.22);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
  }

  .cr-promise-signature strong{
    display:block;
    color:#fff;
    font-size:19px;
    font-weight:700;
  }

  .cr-promise-signature span{
    display:block;
    margin-top:5px;
    color:rgba(255,255,255,.72);
    font-size:13.5px;
  }

  .cr-promise-signature a{
    color:var(--cr-red) !important;
    background:#fff;
    min-height:48px;
    padding:0 20px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    gap:9px;
    text-decoration:none;
    font-size:14px;
    font-weight:750;
    transition:.25s ease;
  }

  .cr-promise-signature a:hover,
  .cr-promise-signature a:focus{
    transform:translateY(-2px);
    background:#fff4f5;
    text-decoration:none;
    outline:none;
  }

  /* FAQ - SIMPLE FORMAL */
  .cr-faq{
    padding:88px 0 96px;
    background:#fff;
  }

  .cr-faq-grid{
    display:grid;
    grid-template-columns:390px 1fr;
    gap:70px;
    align-items:start;
  }

  .cr-faq h2{
    margin:18px 0 0;
    color:var(--cr-ink);
    font-size:clamp(30px,3vw,52px);
    line-height:1.06;
    letter-spacing:-.048em;
    font-weight:700;
  }

  .cr-faq p{
    margin:18px 0 0;
    color:var(--cr-text);
    font-size:15.5px;
    line-height:1.82;
  }

  .ag-community-accordion{
    border-top:1px solid var(--cr-line);
  }

  .ag-community-acc-item{
    border-bottom:1px solid var(--cr-line);
  }

  .ag-community-acc-btn{
    width:100%;
    min-height:78px;
    border:0;
    background:transparent;
    color:var(--cr-ink);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    text-align:left;
    padding:22px 0;
    font-size:18px;
    line-height:1.35;
    font-weight:700;
    cursor:pointer;
    transition:.22s ease;
  }

  .ag-community-acc-btn:hover,
  .ag-community-acc-btn:focus{
    color:var(--cr-red);
    outline:none;
  }

  .ag-community-acc-btn i{
    width:40px;
    height:40px;
    border-radius:999px;
    border:1px solid rgba(195,31,38,.18);
    color:var(--cr-red);
    display:grid;
    place-items:center;
    font-size:18px;
    flex:0 0 auto;
  }

  .ag-community-acc-body{
    height:0;
    overflow:hidden;
    transition:height .28s ease;
  }

  .ag-community-acc-inner{
    padding:0 70px 24px 0;
    color:var(--cr-text);
    font-size:15px;
    line-height:1.82;
  }

  .ag-community-acc-item.is-open .ag-community-acc-btn{
    color:var(--cr-red);
  }

  .ag-community-acc-item.is-open .ag-community-acc-btn i{
    color:#fff;
    background:var(--cr-red);
  }

  @media (max-width:1100px){
    .cr-hero{
      min-height:650px;
    }

    .cr-hero-meta{
      position:relative;
      right:auto;
      bottom:auto;
      margin-top:-88px;
      padding-bottom:42px;
      color:#fff;
    }

    .cr-intro-grid,
    .cr-section-head,
    .cr-impact-grid,
    .cr-promise-grid,
    .cr-faq-grid{
      grid-template-columns:1fr;
      gap:32px;
    }

    .cr-intro-label{
      position:relative;
      top:auto;
    }

    .cr-intro-content{
      border-left:0;
      padding-left:0;
      border-top:1px solid var(--cr-line);
      padding-top:32px;
    }

    .cr-principle-row{
      grid-template-columns:76px 1fr;
      align-items:start;
    }

    .cr-principle-row p{
      grid-column:2;
    }

    .cr-principle-icon{
      grid-column:2;
      justify-self:start;
      margin-top:4px;
    }

    .cr-impact-media,
    .cr-impact-media img{
      min-height:440px;
    }
  }

  @media (max-width:700px){
    .cr-wrap{width:92%;}

    .cr-hero{
      min-height:auto;
    }

    .cr-hero-inner{
      padding:84px 0 120px;
    }

    .cr-hero h1{
      font-size:clamp(40px,11vw,58px);
    }

    .cr-hero-meta{
      flex-direction:column;
      align-items:flex-start;
      gap:12px;
    }

    .cr-actions,
    .cr-promise-signature{
      flex-direction:column;
      align-items:stretch;
    }

    .cr-btn,
    .cr-promise-signature a{
      width:100%;
    }

    .cr-intro,
    .cr-principles,
    .cr-impact,
    .cr-promise,
    .cr-faq{
      padding:64px 0;
    }

    .cr-principle-row{
      grid-template-columns:1fr;
      gap:12px;
      padding:28px 0;
    }

    .cr-principle-row p,
    .cr-principle-icon{
      grid-column:auto;
    }

    .cr-impact-media{
      border-radius:0 42px 0 42px;
    }

    .cr-impact-media,
    .cr-impact-media img{
      min-height:360px;
    }

    .ag-community-acc-btn{
      font-size:16px;
      padding:20px 0;
    }

    .ag-community-acc-inner{
      padding-right:0;
    }
  }

  @media (prefers-reduced-motion:reduce){
    *{
      transition:none !important;
      scroll-behavior:auto !important;
    }
  }


/* =========================================================
   Moved from: Pasted code (4)(17).html
   ========================================================= */
:root {
    --ctc-bg: #fff7f8;
    --ctc-bg-2: #eaf8ff;
    --ctc-primary: #b10b14;
    --ctc-primary-dark: #8f0710;
    --ctc-primary-soft: rgba(177, 11, 20, 0.09);
    --ctc-text: #101828;
    --ctc-muted: #667085;
    --ctc-border: #e6edf5;
    --ctc-input: #f8fafc;
    --ctc-card: #ffffff;
    --ctc-shadow: 0 24px 70px rgba(16, 24, 40, 0.12);
    --ctc-soft-shadow: 0 14px 40px rgba(102, 105, 109, 0.08);
    --ctc-radius: 28px;
  }

  .ctc-page {
    width: 100%;
    min-height: 100vh;
    background:
      radial-gradient(circle at 8% 12%, rgba(177, 11, 20, 0.12), transparent 30%),
      radial-gradient(circle at 92% 8%, rgba(14, 165, 233, 0.14), transparent 32%),
      linear-gradient(135deg, var(--ctc-bg) 0%, var(--ctc-bg-2) 100%);
    padding: 34px 18px 0;
    font-family: inherit;
    overflow: hidden;
  }

  .ctc-wrap {
    width: 80%;
    max-width:70%;
    margin: 0 auto;
    padding-bottom: 72px;
    position: relative;
  }

  .ctc-wrap::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: -120px;
    top: 120px;
    border-radius: 50%;
    background: rgba(177, 11, 20, 0.08);
    filter: blur(2px);
    pointer-events: none;
  }

  .ctc-heading-area {
    text-align: center;
    margin-bottom: 46px;
    position: relative;
    z-index: 2;
  }

  .ctc-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 18px;
    border: 1px solid rgba(177, 11, 20, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    color: var(--ctc-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 18px;
    box-shadow: 0 10px 26px rgba(177, 11, 20, 0.08);
    backdrop-filter: blur(10px);
  }

  .ctc-title {
    margin: 0;
    color: var(--ctc-text);
    font-size: clamp(36px, 5vw, 62px);
    line-height: 1.03;
    font-weight: 900;
    letter-spacing: -2.2px;
  }

  .ctc-title span {
    color: var(--ctc-primary);
    position: relative;
  }

  .ctc-subtitle {
    max-width: 760px;
    margin: 18px auto 0;
    color: var(--ctc-muted);
    font-size: 17px;
    line-height: 1.75;
    font-weight: 400;
  }

  .ctc-trust-row {
    margin: 26px auto 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  .ctc-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(230, 237, 245, 0.95);
    color: #344054;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.06);
  }

  .ctc-trust-pill svg {
    width: 16px;
    height: 16px;
    color: var(--ctc-primary);
  }

  .ctc-main-grid {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 32px;
    align-items: stretch;
    position: relative;
    z-index: 2;
  }

  .ctc-info-panel {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: var(--ctc-radius);
    padding: 28px;
    box-shadow: var(--ctc-soft-shadow);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
  }

  .ctc-info-panel::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -80px;
    width: 210px;
    height: 210px;
    background: rgba(177, 11, 20, 0.08);
    border-radius: 50%;
    pointer-events: none;
  }

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

  .ctc-panel-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 13px;
    border-radius: 999px;
    background: var(--ctc-primary-soft);
    color: var(--ctc-primary);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 20px;
  }

  .ctc-panel-badge svg {
    width: 15px;
    height: 15px;
  }

  .ctc-panel-title {
    margin: 0;
    color: var(--ctc-text);
    font-size: 30px;
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: -0.8px;
  }

  .ctc-panel-text {
    margin: 13px 0 26px;
    color: var(--ctc-muted);
    font-size: 15px;
    line-height: 1.7;
  }

  .ctc-info-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .ctc-info-card {
    width: 100%;
    min-height: 84px;
    background: #ffffff;
    border: 1px solid rgba(230, 237, 245, 0.9);
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 17px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.06);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  }

  .ctc-info-card:hover {
    transform: translateY(-3px);
    border-color: rgba(177, 11, 20, 0.18);
    box-shadow: 0 18px 40px rgba(16, 24, 40, 0.1);
  }

  .ctc-info-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(177, 11, 20, 0.12), rgba(177, 11, 20, 0.04));
    color: var(--ctc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ctc-info-icon svg {
    width: 22px;
    height: 22px;
    display: block;
  }

  .ctc-info-content h3 {
    margin: 0 0 5px;
    color: var(--ctc-text);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 850;
  }

  .ctc-info-content p,
  .ctc-info-content a {
    margin: 0;
    color: #475467;
    font-size: 13.5px;
    line-height: 1.5;
    font-weight: 500;
    text-decoration: none;
  }

  .ctc-info-content a:hover {
    color: var(--ctc-primary);
  }

  .ctc-mini-cta {
    position: relative;
    z-index: 2;
    margin-top: 28px;
    padding: 20px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--ctc-primary), var(--ctc-primary-dark));
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(177, 11, 20, 0.22);
  }

  .ctc-mini-cta h4 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 850;
  }

  .ctc-mini-cta p {
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13.5px;
    line-height: 1.6;
  }

  .ctc-form-card {
    background: #ffffff;
    border-radius: var(--ctc-radius);
    padding: 34px;
    box-shadow: var(--ctc-shadow);
    border: 1px solid rgba(255, 255, 255, 0.86);
    position: relative;
    overflow: visible;
  }

  .ctc-form-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, var(--ctc-primary), #ef4444, #0ea5e9);
    border-radius: var(--ctc-radius) var(--ctc-radius) 0 0;
  }

  .ctc-form-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 28px;
  }

  .ctc-form-head h2 {
    margin: 0;
    color: var(--ctc-text);
    font-size: 27px;
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: -0.8px;
  }

  .ctc-form-head p {
    margin: 8px 0 0;
    color: var(--ctc-muted);
    font-size: 14.5px;
    line-height: 1.65;
    max-width: 430px;
  }

  .ctc-form-icon {
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 18px;
    background: var(--ctc-primary-soft);
    color: var(--ctc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ctc-form-icon svg {
    width: 24px;
    height: 24px;
  }

  .ctc-form {
    width: 100%;
  }

  .ctc-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: 18px;
  }

  .ctc-field {
    display: flex;
    flex-direction: column;
  }

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

  .ctc-field label {
    color: #344054;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 750;
    margin-bottom: 9px;
  }

  .ctc-field input,
  .ctc-field select,
  .ctc-field textarea {
    width: 100%;
    border: 1px solid var(--ctc-border);
    background: var(--ctc-input);
    color: #101828;
    border-radius: 16px;
    outline: none;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, transform 0.22s ease;
  }

  .ctc-field input,
  .ctc-field select {
    height: 52px;
    padding: 0 16px;
  }

  .ctc-field textarea {
    min-height: 132px;
    resize: vertical;
    padding: 15px 16px;
  }

  .ctc-field input::placeholder,
  .ctc-field textarea::placeholder {
    color: #98a2b3;
  }

  .ctc-field input:focus,
  .ctc-field select:focus,
  .ctc-field textarea:focus {
    border-color: rgba(177, 11, 20, 0.42);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(177, 11, 20, 0.08);
    transform: translateY(-1px);
  }

  /* ================= ONLY CHANGED SELECT DESIGN START ================= */

  .ctc-need-select {
    width: 100%;
    position: relative;
    z-index: 30;
  }

  .ctc-need-native {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
    pointer-events: none;
    left: 0;
    top: 0;
  }

  .ctc-need-trigger {
    width: 100%;
    height: 52px;
    border: 1px solid var(--ctc-border);
    background: var(--ctc-input);
    color: #101828;
    border-radius: 16px;
    outline: none;
    font-size: 14px;
    font-family: inherit;
    padding: 0 46px 0 16px;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, transform 0.22s ease;
    position: relative;
  }

  .ctc-need-trigger:hover {
    border-color: rgba(177, 11, 20, 0.25);
    background: #ffffff;
  }

  .ctc-need-trigger:focus,
  .ctc-need-select.is-open .ctc-need-trigger {
    border-color: rgba(177, 11, 20, 0.46);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(177, 11, 20, 0.08);
    transform: translateY(-1px);
  }

  .ctc-need-trigger-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ctc-need-trigger.is-placeholder .ctc-need-trigger-text {
    color: #98a2b3;
  }

  .ctc-need-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    color: var(--ctc-primary);
    transition: transform 0.22s ease;
  }

  .ctc-need-select.is-open .ctc-need-arrow {
    transform: translateY(-50%) rotate(180deg);
  }

  .ctc-need-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    background: #ffffff;
    border: 1px solid rgba(177, 11, 20, 0.18);
    border-radius: 20px;
    box-shadow: 0 26px 70px rgba(16, 24, 40, 0.22);
    padding: 10px;
    display: none;
    z-index: 999;
  }

  .ctc-need-select.is-open .ctc-need-menu {
    display: block;
    animation: ctcNeedDrop 0.18s ease both;
  }

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

  .ctc-need-search-wrap {
    position: relative;
    margin-bottom: 8px;
  }

  .ctc-need-search {
    width: 100%;
    height: 44px;
    border-radius: 13px;
    border: 1px solid rgba(177, 11, 20, 0.26);
    background: #ffffff;
    color: #101828;
    outline: none;
    font-size: 14px;
    padding: 0 38px 0 14px;
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.04);
  }

  .ctc-need-search:focus {
    border-color: rgba(177, 11, 20, 0.52);
    box-shadow: 0 0 0 4px rgba(177, 11, 20, 0.08);
  }

  .ctc-need-search-icon {
    position: absolute;
    right: 13px;
    top: 50%;
    width: 17px;
    height: 17px;
    transform: translateY(-50%);
    color: #98a2b3;
    pointer-events: none;
  }

  .ctc-need-list {
    max-height: 238px;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .ctc-need-option {
    min-height: 42px;
    border-radius: 12px;
    padding: 0 38px 0 12px;
    color: #101828;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    transition: background 0.18s ease, color 0.18s ease;
  }

  .ctc-need-option:hover {
    background: rgba(177, 11, 20, 0.07);
    color: var(--ctc-primary);
  }

  .ctc-need-option.is-selected {
    background: linear-gradient(135deg, var(--ctc-primary), #d31928);
    color: #ffffff;
  }

  .ctc-need-option.is-selected::after {
    content: "✓";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    font-weight: 900;
    color: #ffffff;
  }

  .ctc-need-empty {
    display: none;
    padding: 14px 12px;
    color: #667085;
    font-size: 13px;
  }

  .ctc-need-select.has-error .ctc-need-trigger {
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.08);
  }

  @media (max-width: 575px) {
    .ctc-need-menu {
      border-radius: 18px;
    }

    .ctc-need-list {
      max-height: 220px;
    }
  }

  /* ================= ONLY CHANGED SELECT DESIGN END ================= */

  .ctc-send-btn {
    width: 100%;
    height: 54px;
    border: none;
    border-radius: 17px;
    background: linear-gradient(135deg, var(--ctc-primary), var(--ctc-primary-dark));
    color: #ffffff;
    margin-top: 24px;
    font-size: 14px;
    font-weight: 850;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
    box-shadow: 0 16px 34px rgba(177, 11, 20, 0.28);
  }

  .ctc-send-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.02);
    box-shadow: 0 20px 42px rgba(177, 11, 20, 0.34);
  }

  .ctc-send-btn svg {
    width: 19px;
    height: 19px;
  }

  .ctc-response-note {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #667085;
    font-size: 13px;
    line-height: 1.5;
  }

  .ctc-response-note svg {
    width: 17px;
    height: 17px;
    color: var(--ctc-primary);
    min-width: 17px;
  }

  .ctc-map-full {
    width: 100%;
    margin-top: 0;
    background: #ffffff;
    padding: 0 18px 34px;
  }

  .ctc-map-shell {
    width: 80%;
    max-width: 70%;
    margin: 0 auto;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(16, 24, 40, 0.14);
    border: 8px solid #ffffff;
    background: #ffffff;
  }

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

  @media (max-width: 1200px) {
    .ctc-wrap,
    .ctc-map-shell {
      width: 90%;
    }
  }

  @media (max-width: 991px) {
    .ctc-page {
      padding-top: 28px;
    }

    .ctc-wrap,
    .ctc-map-shell {
      width: 92%;
    }

    .ctc-heading-area {
      margin-bottom: 34px;
    }

    .ctc-main-grid {
      grid-template-columns: 1fr;
      gap: 24px;
      max-width: 720px;
      margin: 0 auto;
    }

    .ctc-info-panel,
    .ctc-form-card {
      padding: 26px;
    }
  }

  @media (max-width: 575px) {
    .ctc-page {
      padding: 24px 14px 0;
    }

    .ctc-wrap,
    .ctc-map-shell {
      width: 100%;
    }

    .ctc-wrap {
      padding-bottom: 50px;
    }

    .ctc-title {
      letter-spacing: -1.2px;
    }

    .ctc-subtitle {
      font-size: 15px;
    }

    .ctc-trust-row {
      justify-content: flex-start;
    }

    .ctc-info-panel,
    .ctc-form-card {
      padding: 20px;
      border-radius: 22px;
    }

    .ctc-panel-title,
    .ctc-form-head h2 {
      font-size: 24px;
    }

    .ctc-form-head {
      flex-direction: column;
    }

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

    .ctc-info-card {
      padding: 15px;
      align-items: flex-start;
    }

    .ctc-map-full {
      padding: 0 14px 28px;
    }

    .ctc-map-shell {
      border-radius: 22px;
      border-width: 6px;
    }

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

  .ctc-submit-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(16, 24, 40, 0.58);
    backdrop-filter: blur(8px);
  }

  .ctc-submit-modal.show {
    display: flex;
  }

  .ctc-submit-box {
    width: 430px;
    max-width: 96vw;
    background: #ffffff;
    border-radius: 28px;
    padding: 34px 28px 28px;
    text-align: center;
    box-shadow: 0 30px 90px rgba(16, 24, 40, 0.32);
    position: relative;
    overflow: hidden;
    transform: translateY(8px) scale(0.98);
    animation: ctcModalIn 0.25s ease forwards;
  }

  .ctc-submit-box::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 8px;
    background: linear-gradient(90deg, var(--ctc-primary), #ef4444, #0ea5e9);
  }

  @keyframes ctcModalIn {
    to { transform: translateY(0) scale(1); }
  }

  .ctc-submit-icon {
    width: 82px;
    height: 82px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(49, 185, 120, 0.14), rgba(49, 185, 120, 0.05));
    color: #19a15f;
    display: grid;
    place-items: center;
    box-shadow: 0 18px 42px rgba(49, 185, 120, 0.16);
  }

  .ctc-submit-icon svg {
    width: 42px;
    height: 42px;
  }

  .ctc-submit-title {
    margin: 0 0 8px;
    color: var(--ctc-text);
    font-size: 25px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -0.5px;
  }

  .ctc-submit-message {
    margin: 0 auto;
    max-width: 340px;
    color: var(--ctc-muted);
    font-size: 14.5px;
    line-height: 1.65;
  }

  .ctc-submit-close {
    width: 100%;
    height: 50px;
    margin-top: 24px;
    border: none;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--ctc-primary), var(--ctc-primary-dark));
    font-size: 14px;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 16px 34px rgba(177, 11, 20, 0.25);
  }

  .ctc-submit-error .ctc-submit-icon {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.14), rgba(239, 68, 68, 0.05));
    color: #ef4444;
    box-shadow: 0 18px 42px rgba(239, 68, 68, 0.16);
  }

  .ctc-send-btn.is-loading {
    pointer-events: none;
    opacity: 0.82;
  }


/* =========================================================
   Moved from: Pasted code (5)(12).html
   ========================================================= */
:root {
    --ala-primary: #9f1021;
    --ala-primary-dark: #6d0714;
    --ala-gold: #d7a642;
    --ala-ink: #171014;
    --ala-muted: #71676b;
    --ala-soft: #fff7f4;
    --ala-border: rgba(159, 16, 33, .13);
    --ala-shadow: 0 24px 65px rgba(73, 12, 22, .12);
  }

  .ala-page,
  .ala-page * {
    box-sizing: border-box;
  }

  .ala-page {
    width: 100%;
    background:
      radial-gradient(circle at 12% 8%, rgba(215,166,66,.18), transparent 28%),
      radial-gradient(circle at 90% 16%, rgba(159,16,33,.10), transparent 30%),
      linear-gradient(180deg, #fffaf7 0%, #ffffff 42%, #fff7f4 100%);
    color: var(--ala-ink);
    padding: 54px 0 70px;
    font-family: inherit;
  }

  .ala-container {
    width: min(75%, 1180px);
    margin: 0 auto;
  }

  .ala-hero {
    position: relative;
    overflow: hidden;
    border-radius: 34px;
    padding: clamp(34px, 5vw, 64px);
    color: #fff;
    background:
      linear-gradient(135deg, rgba(91,7,17,.98), rgba(159,16,33,.95) 56%, rgba(215,166,66,.88));
    box-shadow: var(--ala-shadow);
  }

  .ala-hero::before {
    content: "";
    position: absolute;
    right: -80px;
    top: -90px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255,255,255,.13);
  }

  .ala-hero::after {
    content: "";
    position: absolute;
    left: -70px;
    bottom: -90px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
  }

  .ala-hero__content {
    position: relative;
    z-index: 2;
    max-width: 850px;
  }

  .ala-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff6e8;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .ala-kicker span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ala-gold);
    box-shadow: 0 0 0 5px rgba(215,166,66,.20);
  }

  .ala-title {
    margin: 22px 0 16px;
    font-size: clamp(34px, 5vw, 60px);
    line-height: 1.03;
    letter-spacing: -.04em;
    font-weight: 850;
  }

  .ala-lead {
    margin: 0;
    max-width: 820px;
    color: rgba(255,255,255,.88);
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.85;
  }

  .ala-layout {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 28px;
  }

  .ala-content {
    display: grid;
    gap: 18px;
  }

  .ala-section {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ala-border);
    border-radius: 26px;
    background: rgba(255,255,255,.93);
    box-shadow: 0 16px 44px rgba(73,12,22,.07);
    padding: clamp(22px, 3vw, 34px);
  }

  .ala-section--accent {
    background: linear-gradient(135deg, #ffffff 0%, #fff8f5 100%);
  }

  .ala-section__top {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 12px;
  }

  .ala-number {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ala-primary), var(--ala-primary-dark));
    color: #fff;
    font-size: 14px;
    font-weight: 850;
    box-shadow: 0 12px 24px rgba(159,16,33,.20);
    flex: 0 0 auto;
  }

  .ala-section h2 {
    margin: 0;
    color: var(--ala-primary-dark);
    font-size: clamp(21px, 2.3vw, 29px);
    line-height: 1.18;
    letter-spacing: -.02em;
    font-weight: 850;
  }

  .ala-section p {
    margin: 12px 0 0;
    color: var(--ala-muted);
    line-height: 1.85;
    font-size: 15.5px;
  }

  .ala-section strong {
    color: var(--ala-ink);
  }

  .ala-list {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    display: grid;
    gap: 11px;
  }

  .ala-list li {
    position: relative;
    padding: 13px 14px 13px 44px;
    border-radius: 16px;
    background: #fff9f6;
    border: 1px solid rgba(159,16,33,.09);
    color: #4c4245;
    line-height: 1.7;
    font-size: 15px;
  }

  .ala-list li::before {
    content: "✓";
    position: absolute;
    left: 14px;
    top: 14px;
    width: 20px;
    height: 20px;
    border-radius: 8px;
    background: rgba(159,16,33,.10);
    color: var(--ala-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
  }

  .ala-contact-clean {
    padding: 0;
    background: #fff;
  }

  .ala-contact-clean__hero {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 4vw, 42px);
    background:
      linear-gradient(135deg, #6d0714 0%, #9f1021 58%, #d7a642 100%);
    color: #fff;
  }

  .ala-contact-clean__hero::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -70px;
    top: -80px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
  }

  .ala-contact-clean__hero::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    left: -55px;
    bottom: -65px;
    border-radius: 50%;
    background: rgba(255,255,255,.09);
  }

  .ala-contact-clean__content {
    position: relative;
    z-index: 2;
    max-width: 780px;
  }

  .ala-contact-label {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff7e6;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .ala-contact-clean h2 {
    margin: 14px 0 10px;
    color: #fff;
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.15;
    font-weight: 850;
    letter-spacing: -.03em;
  }

  .ala-contact-clean__hero p {
    margin: 0;
    max-width: 760px;
    color: rgba(255,255,255,.86);
    line-height: 1.85;
    font-size: 15.5px;
  }

  .ala-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
  }

  .ala-contact-action {
    min-height: 46px;
    padding: 0 19px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 850;
    transition: .2s ease;
  }

  .ala-contact-action--white {
    background: #fff;
    color: var(--ala-primary-dark);
  }

  .ala-contact-action--outline {
    color: #fff;
    border: 1px solid rgba(255,255,255,.26);
    background: rgba(255,255,255,.12);
  }

  .ala-contact-action:hover {
    transform: translateY(-2px);
  }

  .ala-contact-clean__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid rgba(159,16,33,.10);
  }

  .ala-contact-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 26px;
    border-right: 1px solid rgba(159,16,33,.10);
    border-bottom: 1px solid rgba(159,16,33,.10);
    background: #fff;
  }

  .ala-contact-row:nth-child(2n) {
    border-right: 0;
  }

  .ala-contact-row:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .ala-contact-row--wide {
    grid-column: span 2;
    border-right: 0;
    border-bottom: 0;
    background: linear-gradient(90deg, #fffaf8 0%, #ffffff 100%);
  }

  .ala-contact-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 16px;
    background: rgba(159,16,33,.08);
    color: var(--ala-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }

  .ala-contact-row small {
    display: block;
    margin-bottom: 6px;
    color: var(--ala-primary);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .ala-contact-row strong,
  .ala-contact-row a,
  .ala-contact-row span {
    display: block;
    color: var(--ala-ink);
    text-decoration: none;
    font-size: 17px;
    line-height: 1.55;
    font-weight: 750;
    word-break: break-word;
  }

  .ala-contact-row a:hover {
    color: var(--ala-primary);
  }

  @media (max-width: 980px) {
    .ala-container {
      width: min(88%, 1180px);
    }
  }

  @media (max-width: 700px) {
    .ala-page {
      padding: 32px 0 48px;
    }

    .ala-container {
      width: min(94%, 1180px);
    }

    .ala-hero {
      border-radius: 24px;
      padding: 28px 20px;
    }

    .ala-section {
      border-radius: 20px;
    }

    .ala-section__top {
      flex-direction: column;
    }

    .ala-contact-clean__body {
      grid-template-columns: 1fr;
    }

    .ala-contact-row,
    .ala-contact-row:nth-child(2n),
    .ala-contact-row:nth-last-child(-n + 2) {
      border-right: 0;
      border-bottom: 1px solid rgba(159,16,33,.10);
    }

    .ala-contact-row--wide {
      grid-column: span 1;
      border-bottom: 0;
    }

    .ala-contact-clean__hero {
      padding: 28px 20px;
    }
  }


/* =========================================================
   Moved from: Pasted text (6)(4).txt
   ========================================================= */
/* =========================================================
     ALALAAS GIFTS FAQ PAGE - NEW PREMIUM EDITORIAL DESIGN
     - Design only changed
     - Header/footer include structure unchanged
     - Existing category, search, clear, and accordion logic unchanged
     - Scoped CSS for this page only
  ========================================================= */

  :root{
    --ag-red:#c31f26;
    --ag-red-dark:#a9151d;
    --ag-yellow:#fdcf00;
    --ag-ink:#171b24;
    --ag-text:#303747;
    --ag-muted:#687386;
    --ag-line:#e9edf3;
    --ag-line-2:#f1f3f6;
    --ag-bg:#f7f3ef;
    --ag-card:#ffffff;
    --ag-cream:#fffaf4;
    --ag-soft-red:#fff1f2;
    --ag-shadow:0 26px 70px rgba(24, 28, 38, .08);
    --ag-shadow-soft:0 14px 35px rgba(24, 28, 38, .06);
  }

  .mw-legal,
  .mw-legal *{
    box-sizing:border-box;
  }

  .mw-legal{
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(circle at 5% 4%, rgba(253,207,0,.20), transparent 26%),
      radial-gradient(circle at 92% 12%, rgba(195,31,38,.12), transparent 28%),
      linear-gradient(180deg, #fffaf4 0%, #f7f3ef 46%, #ffffff 100%);
    color:var(--ag-ink);
    font-family:Inter, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  .mw-legal::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.48;
    background-image:
      linear-gradient(rgba(195,31,38,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(195,31,38,.035) 1px, transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(180deg, #000 0%, transparent 55%);
  }

  .mw-legal strong,
  .mw-legal b{
    font-weight:620;
  }

  .mw-legal__container{
    position:relative;
    z-index:1;
    width:90%;
    max-width:1320px;
    margin:0 auto;
  }

  .mw-legal__section{
    scroll-margin-top:115px;
  }

  .ag-faq{
    padding:28px 0 68px;
  }

  /* ================= HERO ================= */
  .ag-faq__hero{
    position:relative;
    overflow:hidden;
    min-height:330px;
    border:1px solid rgba(195,31,38,.14);
    border-radius:34px;
    padding:48px;
    background:
      linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 48%, rgba(255,244,245,.92) 100%);
    box-shadow:var(--ag-shadow);
    isolation:isolate;
  }

  .ag-faq__hero::before{
    content:"";
    position:absolute;
    right:38px;
    top:34px;
    width:170px;
    height:170px;
    border-radius:42px;
    transform:rotate(10deg);
    background:
      linear-gradient(135deg, rgba(195,31,38,.95), rgba(169,21,29,.95));
    box-shadow:0 28px 60px rgba(195,31,38,.22);
    opacity:.95;
    z-index:-1;
  }

  .ag-faq__hero::after{
    content:"";
    position:absolute;
    right:73px;
    top:69px;
    width:100px;
    height:100px;
    border-radius:50%;
    border:18px solid rgba(253,207,0,.95);
    box-shadow:0 18px 40px rgba(253,207,0,.18);
    z-index:-1;
  }

  .ag-faq__heroContent{
    max-width:900px;
    position:relative;
    z-index:2;
  }

  .ag-faq__badge{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-bottom:18px;
    padding:10px 14px;
    border:1px solid rgba(195,31,38,.15);
    border-radius:999px;
    background:#ffffff;
    color:var(--ag-red);
    font-size:12.5px;
    line-height:1;
    letter-spacing:.06em;
    text-transform:uppercase;
    font-weight:650;
    box-shadow:0 14px 28px rgba(195,31,38,.07);
  }

  .ag-faq__badge i{
    font-size:15px;
    line-height:1;
  }

  .mw-legal__h1{
    margin:0;
    max-width:850px;
    color:var(--ag-ink);
    font-size:clamp(36px, 2.7vw, 66px);
    line-height:.98;
    letter-spacing:-.055em;
    font-weight:720;
  }

  .mw-legal__h2{
    margin:0;
    color:var(--ag-ink);
    font-size:25px;
    line-height:1.2;
    letter-spacing:-.03em;
    font-weight:700;
  }

  .mw-legal__p{
    max-width:820px;
    margin:18px 0 0;
    color:var(--ag-muted);
    font-size:16.5px;
    line-height:1.82;
    font-weight:400;
  }

  /* ================= SEARCH ================= */
  .ag-faq__tools{
    margin-top:30px;
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:15px;
    align-items:center;
  }

  .ag-faq__search{
    min-height:64px;
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid rgba(195,31,38,.13);
    border-radius:22px;
    padding:8px 10px 8px 12px;
    background:rgba(255,255,255,.92);
    box-shadow:0 18px 40px rgba(24,28,38,.07);
    backdrop-filter:blur(10px);
  }

  .ag-faq__searchIcon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:16px;
    color:#fff;
    background:var(--ag-red);
    box-shadow:0 12px 24px rgba(195,31,38,.20);
  }

  .ag-faq__searchIcon svg{
    width:20px;
    height:20px;
    stroke:currentColor;
    stroke-width:2.1;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .ag-faq__search input{
    flex:1;
    min-width:0;
    border:0;
    outline:none;
    color:var(--ag-ink);
    background:transparent;
    font-size:15px;
    line-height:1.5;
    font-weight:450;
  }

  .ag-faq__search input::placeholder{
    color:#9aa3b2;
  }

  .ag-faq__clear{
    border:0;
    border-radius:16px;
    background:#1e2430;
    color:#ffffff;
    padding:13px 18px;
    cursor:pointer;
    font-size:14px;
    line-height:1;
    font-weight:650;
    transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
  }

  .ag-faq__clear:hover,
  .ag-faq__clear:focus{
    background:var(--ag-red);
    transform:translateY(-1px);
    box-shadow:0 12px 24px rgba(195,31,38,.18);
  }

  .ag-faq__count{
    white-space:nowrap;
    color:#5e687a;
    font-size:14px;
    line-height:1.5;
    font-weight:500;
    padding:15px 18px;
    border:1px solid rgba(195,31,38,.11);
    border-radius:18px;
    background:rgba(255,255,255,.82);
    box-shadow:0 12px 26px rgba(24,28,38,.045);
  }

  .ag-faq__count strong{
    color:var(--ag-red);
    font-weight:750;
  }

  /* ================= QUICK CARDS ================= */
  .ag-faq__quickWrap{
    margin-top:30px;
  }

  .ag-faq__sectionHead{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
  }

  .ag-faq__sectionHead p{
    margin:6px 0 0;
    color:var(--ag-muted);
    font-size:14.5px;
    line-height:1.65;
    font-weight:400;
  }

  .ag-faq__quick{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:18px;
  }

  .ag-faq__quickCard{
    position:relative;
    overflow:hidden;
    min-height:202px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:24px;
    border:1px solid rgba(231,235,241,.95);
    border-radius:28px;
    background:#ffffff;
    color:var(--ag-ink);
    text-decoration:none;
    box-shadow:var(--ag-shadow-soft);
    transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
  }

  .ag-faq__quickCard::before{
    content:"";
    position:absolute;
    inset:auto 20px 18px 20px;
    height:5px;
    border-radius:999px;
    background:linear-gradient(90deg, var(--ag-red), var(--ag-yellow));
    transform:scaleX(.28);
    transform-origin:left;
    transition:transform .24s ease;
  }

  .ag-faq__quickCard::after{
    content:"";
    position:absolute;
    width:132px;
    height:132px;
    right:-58px;
    top:-58px;
    border-radius:50%;
    background:linear-gradient(135deg, rgba(195,31,38,.10), rgba(253,207,0,.16));
    pointer-events:none;
  }

  .ag-faq__quickCard:hover,
  .ag-faq__quickCard:focus{
    outline:none;
    transform:translateY(-6px);
    border-color:rgba(195,31,38,.20);
    box-shadow:0 24px 58px rgba(24,28,38,.11);
  }

  .ag-faq__quickCard:hover::before,
  .ag-faq__quickCard:focus::before{
    transform:scaleX(1);
  }

  .ag-faq__quickTop{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    position:relative;
    z-index:1;
  }

  .ag-faq__quickIcon{
    width:56px;
    height:56px;
    border-radius:20px;
    display:grid;
    place-items:center;
    color:var(--ag-red);
    background:var(--ag-soft-red);
    border:1px solid rgba(195,31,38,.13);
  }

  .ag-faq__quickIcon svg{
    width:27px;
    height:27px;
    stroke:currentColor;
    stroke-width:1.85;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .ag-faq__quickArrow{
    width:38px;
    height:38px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:var(--ag-red);
    background:#fff7f8;
    border:1px solid rgba(195,31,38,.12);
    transition:background .2s ease, color .2s ease, transform .2s ease;
  }

  .ag-faq__quickCard:hover .ag-faq__quickArrow{
    background:var(--ag-red);
    color:#fff;
    transform:translate(3px, -3px);
  }

  .ag-faq__quickTitle{
    position:relative;
    z-index:1;
    margin:20px 0 8px;
    color:var(--ag-ink);
    font-size:17px;
    line-height:1.32;
    letter-spacing:-.018em;
    font-weight:700;
  }

  .ag-faq__quickText{
    position:relative;
    z-index:1;
    margin:0 0 14px;
    color:var(--ag-muted);
    font-size:14px;
    line-height:1.7;
    font-weight:400;
  }

  /* ================= MAIN FAQ LAYOUT ================= */
  .mw-faq{
    margin-top:28px;
  }

  .ag-faq__layout{
    margin-top:30px;
    display:grid;
    grid-template-columns:310px minmax(0,1fr);
    gap:24px;
    align-items:start;
  }

  /* ================= CATEGORY NAV ================= */
  .ag-faq__nav{
    position:sticky;
    top:110px;
    border:1px solid rgba(231,235,241,.95);
    border-radius:30px;
    padding:18px;
    background:rgba(255,255,255,.92);
    box-shadow:var(--ag-shadow-soft);
    backdrop-filter:blur(10px);
  }

  .ag-faq__navTitle{
    margin:0 0 16px;
    color:var(--ag-ink);
    font-size:18px;
    line-height:1.25;
    font-weight:750;
    letter-spacing:-.025em;
  }

  .ag-faq__navLinks{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .ag-faq__catLink{
    width:100%;
    border:1px solid transparent;
    border-radius:20px;
    padding:11px;
    display:grid;
    grid-template-columns:44px 1fr 34px;
    align-items:center;
    gap:12px;
    text-align:left;
    cursor:pointer;
    color:var(--ag-text);
    background:#ffffff;
    transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  }

  .ag-faq__catLink:hover,
  .ag-faq__catLink:focus{
    outline:none;
    transform:translateX(3px);
    background:#fff8f8;
    border-color:rgba(195,31,38,.12);
  }

  .ag-faq__catIcon{
    width:44px;
    height:44px;
    border-radius:16px;
    display:grid;
    place-items:center;
    color:var(--ag-red);
    background:#fff1f2;
    transition:background .2s ease, color .2s ease;
  }

  .ag-faq__catIcon svg{
    width:21px;
    height:21px;
    stroke:currentColor;
    stroke-width:1.85;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .ag-faq__catText{
    color:inherit;
    font-size:14.8px;
    line-height:1.35;
    letter-spacing:-.01em;
    font-weight:650;
  }

  .ag-faq__catCount{
    width:32px;
    height:32px;
    border-radius:999px;
    display:grid;
    place-items:center;
    color:#858f9f;
    background:#f2f4f7;
    font-size:12px;
    font-weight:750;
  }

  .ag-faq__catLink.is-active{
    color:#ffffff;
    background:
      radial-gradient(circle at 90% 15%, rgba(253,207,0,.28), transparent 34%),
      linear-gradient(135deg, #c31f26, #a9151d);
    border-color:rgba(195,31,38,.20);
    box-shadow:0 18px 32px rgba(195,31,38,.23);
    transform:translateX(0);
  }

  .ag-faq__catLink.is-active .ag-faq__catIcon,
  .ag-faq__catLink.is-active .ag-faq__catCount{
    background:rgba(255,255,255,.16);
    color:#ffffff;
  }

  .mw-faq__section.is-hidden-category{
    display:none !important;
  }

  /* ================= FAQ SECTIONS ================= */
  .ag-faq__main{
    min-width:0;
  }

  .mw-faq__section{
    position:relative;
    overflow:hidden;
    margin-bottom:20px;
    border:1px solid rgba(231,235,241,.95);
    border-radius:30px;
    background:#ffffff;
    box-shadow:var(--ag-shadow-soft);
  }

  .mw-faq__section::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:5px;
    background:linear-gradient(90deg, var(--ag-red), var(--ag-yellow), transparent);
  }

  .mw-faq__sectionHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:26px 28px 22px;
    border-bottom:1px solid var(--ag-line-2);
    background:
      radial-gradient(circle at 96% 12%, rgba(253,207,0,.13), transparent 22%),
      linear-gradient(180deg, #ffffff, #fffdfb);
  }

  .mw-faq__sectionTag{
    white-space:nowrap;
    color:var(--ag-red);
    background:#fff6f7;
    border:1px solid rgba(195,31,38,.14);
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    line-height:1;
    letter-spacing:.025em;
    font-weight:700;
  }

  .mw-faq__group{
    display:grid;
    gap:0;
  }

  .mw-faq__item{
    position:relative;
    background:#fff;
    border-bottom:1px solid var(--ag-line-2);
    transition:background .22s ease;
  }

  .mw-faq__item:last-child{
    border-bottom:0;
  }

  .mw-faq__item::before{
    content:"";
    position:absolute;
    left:0;
    top:14px;
    bottom:14px;
    width:0;
    border-radius:0 999px 999px 0;
    background:var(--ag-red);
    transition:width .22s ease;
  }

  .mw-faq__item:hover,
  .mw-faq__item.is-open{
    background:#fffafa;
  }

  .mw-faq__item:hover::before,
  .mw-faq__item.is-open::before{
    width:5px;
  }

  .mw-faq__btn{
    width:100%;
    border:0;
    background:transparent;
    cursor:pointer;
    padding:20px 26px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 42px;
    align-items:center;
    gap:18px;
    text-align:left;
  }

  .mw-faq__q{
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    align-items:center;
    gap:15px;
    color:var(--ag-ink);
    font-size:15.7px;
    line-height:1.48;
    letter-spacing:-.006em;
    font-weight:620;
  }

  .mw-faq__q strong{
    width:46px;
    height:46px;
    border-radius:17px;
    display:grid;
    place-items:center;
    color:var(--ag-red);
    background:#fff2f3;
    border:1px solid rgba(195,31,38,.13);
    font-size:13px;
    line-height:1;
    font-weight:800;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
  }

  .mw-faq__item.is-open .mw-faq__q strong{
    background:var(--ag-red);
    color:#ffffff;
    border-color:var(--ag-red);
  }

  .mw-faq__icon{
    width:42px;
    height:42px;
    border-radius:16px;
    display:grid;
    place-items:center;
    border:1px solid var(--ag-line);
    background:#ffffff;
    color:var(--ag-red);
    transition:transform .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
  }

  .mw-faq__icon svg{
    width:18px;
    height:18px;
    stroke:currentColor;
    stroke-width:2.25;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .mw-faq__btn[aria-expanded="true"] .mw-faq__icon{
    transform:rotate(180deg);
    background:var(--ag-red);
    color:#ffffff;
    border-color:var(--ag-red);
  }

  .mw-faq__panel{
    height:0;
    overflow:hidden;
    transition:height .28s ease;
    will-change:height;
  }

  .mw-faq__panelInner{
    padding:0 28px 24px 87px;
    color:var(--ag-muted);
    line-height:1.78;
    font-size:14.6px;
    font-weight:400;
  }

  .mw-faq__a{
    margin:0;
    max-width:920px;
  }

  .mw-faq__note{
    max-width:920px;
    margin-top:12px;
    padding:13px 15px;
    border:1px solid rgba(195,31,38,.12);
    border-left:4px solid var(--ag-red);
    border-radius:14px;
    background:#ffffff;
    color:#5f697a;
    font-size:13.7px;
    line-height:1.68;
    font-weight:400;
  }

  .mw-faq__btn:focus-visible,
  .ag-faq__clear:focus-visible,
  .ag-faq__catLink:focus-visible,
  .ag-faq__supportBtn:focus-visible,
  .ag-faq__quickCard:focus-visible{
    outline:3px solid rgba(195,31,38,.22);
    outline-offset:3px;
  }

  .ag-faq__empty{
    display:none;
    margin-top:16px;
    border:1px dashed #d2d9e4;
    border-radius:22px;
    padding:22px;
    background:#ffffff;
    color:var(--ag-muted);
    line-height:1.7;
    font-size:15px;
    font-weight:400;
    box-shadow:var(--ag-shadow-soft);
  }

  .ag-faq__empty strong{
    color:var(--ag-ink);
    font-weight:750;
  }

  /* ================= SUPPORT CTA ================= */
  .ag-faq__support{
    position:relative;
    overflow:hidden;
    margin-top:24px;
    border:1px solid rgba(195,31,38,.14);
    border-radius:30px;
    padding:26px;
    background:
      radial-gradient(circle at 88% 12%, rgba(253,207,0,.22), transparent 28%),
      linear-gradient(135deg, #1f2530, #111722);
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    box-shadow:0 24px 60px rgba(24,28,38,.16);
  }

  .ag-faq__support::before{
    content:"";
    position:absolute;
    width:160px;
    height:160px;
    right:-65px;
    bottom:-75px;
    border-radius:50%;
    border:24px solid rgba(195,31,38,.48);
  }

  .ag-faq__support h3{
    position:relative;
    margin:0;
    color:#ffffff;
    font-size:23px;
    line-height:1.25;
    letter-spacing:-.025em;
    font-weight:760;
  }

  .ag-faq__support p{
    position:relative;
    max-width:740px;
    margin:8px 0 0;
    color:rgba(255,255,255,.76);
    font-size:14.8px;
    line-height:1.7;
    font-weight:400;
  }

  .ag-faq__supportBtn{
    position:relative;
    z-index:1;
    min-width:175px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:18px;
    background:#ffffff;
    color:var(--ag-red) !important;
    padding:14px 18px;
    text-decoration:none;
    font-size:14px;
    line-height:1;
    font-weight:750;
    box-shadow:0 16px 30px rgba(0,0,0,.16);
    transition:transform .2s ease, background .2s ease, color .2s ease;
  }

  .ag-faq__supportBtn:hover,
  .ag-faq__supportBtn:focus{
    transform:translateY(-2px);
    background:var(--ag-yellow);
    color:#1f2530 !important;
  }

  .ag-faq__supportBtn svg{
    width:18px;
    height:18px;
    stroke:currentColor;
    stroke-width:2.1;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .ag-faq__quick a,
  .ag-faq__quickCard,
  .ag-faq__quickCard:link,
  .ag-faq__quickCard:visited,
  .ag-faq__quickCard:hover,
  .ag-faq__quickCard:focus,
  .ag-faq__quickCard:active,
  .ag-faq__supportBtn,
  .ag-faq__supportBtn:link,
  .ag-faq__supportBtn:visited,
  .ag-faq__supportBtn:hover,
  .ag-faq__supportBtn:focus,
  .ag-faq__supportBtn:active{
    text-decoration:none !important;
  }

  .ag-faq__quickCard *,
  .ag-faq__supportBtn *{
    text-decoration:none !important;
  }

  .ag-faq__quickCard,
  .ag-faq__supportBtn,
  .ag-faq__catLink,
  .mw-faq__btn,
  .ag-faq__clear{
    -webkit-tap-highlight-color:transparent;
  }

  /* ================= RESPONSIVE ================= */
  @media (max-width:1180px){
    .ag-faq__quick{
      grid-template-columns:repeat(2, minmax(0,1fr));
    }

    .ag-faq__layout{
      grid-template-columns:1fr;
    }

    .ag-faq__nav{
      position:static;
    }

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

  @media (max-width:768px){
    .mw-legal__container{
      width:94%;
    }

    .ag-faq{
      padding:18px 0 48px;
    }

    .ag-faq__hero{
      min-height:auto;
      padding:32px 24px;
      border-radius:26px;
    }

    .ag-faq__hero::before{
      width:118px;
      height:118px;
      right:-34px;
      top:-34px;
      border-radius:32px;
      opacity:.22;
    }

    .ag-faq__hero::after{
      width:76px;
      height:76px;
      right:6px;
      top:6px;
      border-width:14px;
      opacity:.42;
    }

    .ag-faq__tools{
      grid-template-columns:1fr;
    }

    .ag-faq__count{
      white-space:normal;
    }

    .ag-faq__sectionHead{
      flex-direction:column;
      align-items:flex-start;
    }

    .mw-faq__sectionHeader{
      padding:22px 20px 18px;
      flex-direction:column;
      align-items:flex-start;
    }

    .ag-faq__support{
      flex-direction:column;
      align-items:flex-start;
    }

    .ag-faq__supportBtn{
      width:100%;
    }
  }

  @media (max-width:576px){
    .ag-faq__quick{
      grid-template-columns:1fr;
    }

    .ag-faq__navLinks{
      grid-template-columns:1fr;
    }

    .ag-faq__catLink{
      grid-template-columns:42px 1fr 32px;
      padding:10px;
      border-radius:18px;
    }

    .ag-faq__catIcon{
      width:42px;
      height:42px;
      border-radius:15px;
    }

    .mw-faq__btn{
      padding:18px;
      grid-template-columns:minmax(0,1fr) 38px;
      gap:12px;
    }

    .mw-faq__q{
      grid-template-columns:38px minmax(0,1fr);
      gap:12px;
      font-size:14.8px;
      align-items:flex-start;
    }

    .mw-faq__q strong,
    .mw-faq__icon{
      width:38px;
      height:38px;
      border-radius:14px;
    }

    .mw-faq__panelInner{
      padding:0 18px 20px 68px;
      font-size:14px;
    }

    .ag-faq__support{
      border-radius:24px;
      padding:22px;
    }
  }

  @media (max-width:420px){
    .mw-faq__panelInner{
      padding-left:18px;
    }

    .ag-faq__search{
      padding:8px;
    }

    .ag-faq__clear{
      padding:12px 14px;
    }
  }

  @media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
      transition:none !important;
      scroll-behavior:auto !important;
    }
  }

  /* =========================================================
     HELP STYLE COMBINATION
     Hero like first image + content like second image
     Design only, content/IDs/logic unchanged
  ========================================================= */

  :root{
    --help-red:#c31f26;
    --help-red-dark:#99141b;
    --help-ink:#0a1839;
    --help-text:#556277;
    --help-line:rgba(17,24,39,.12);
  }

  .mw-legal{
    background:#ffffff !important;
    color:var(--help-ink) !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
  }

  .mw-legal::before{
    display:none !important;
  }

  .mw-legal__container.ag-faq{
    width:min(1360px,92%) !important;
    max-width:none !important;
    padding:0 0 34px !important;
  }

  /* HERO LIKE FIRST IMAGE */
  .ag-faq__hero{
    position:relative !important;
    margin:0 calc(50% - 50vw) !important;
    min-height:700px !important;
    display:flex !important;
    align-items:center !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:0 !important;
    padding:0 !important;
    background:
      linear-gradient(90deg,rgba(10,18,36,.93) 0%,rgba(17,26,45,.80) 43%,rgba(33,18,23,.34) 100%),
      url('asset/images/web/shopping-xperience.jpeg') center/cover no-repeat !important;
    box-shadow:none !important;
    isolation:isolate !important;
  }

  .ag-faq__hero::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:8px !important;
    height:auto !important;
    border-radius:0 !important;
    transform:none !important;
    background:var(--help-red) !important;
    box-shadow:none !important;
    opacity:1 !important;
    z-index:1 !important;
  }

  .ag-faq__hero::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:115px !important;
    width:auto !important;
    border:0 !important;
    border-radius:0 !important;
    background:linear-gradient(180deg,rgba(255,255,255,0),#ffffff) !important;
    box-shadow:none !important;
    z-index:1 !important;
    pointer-events:none !important;
  }

  .ag-faq__heroContent{
    position:relative !important;
    z-index:2 !important;
    width:min(1360px,92%) !important;
    max-width:860px !important;
    margin:0 auto !important;
    padding:92px 0 122px !important;
  }

  .ag-faq__badge{
    display:inline-flex !important;
    align-items:center !important;
    gap:12px !important;
    margin:0 0 26px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#ffffff !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:850 !important;
    letter-spacing:.18em !important;
    text-transform:uppercase !important;
  }

  .ag-faq__badge::before{
    content:"" !important;
    width:46px !important;
    height:1px !important;
    background:#ffffff !important;
    opacity:.92 !important;
  }

  .ag-faq__badge i{
    display:none !important;
  }

  .mw-legal__h1{
    max-width:860px !important;
    margin:0 !important;
    color:#ffffff !important;
    font-size:clamp(52px,3vw,92px) !important;
    line-height:.95 !important;
    letter-spacing:-.078em !important;
    font-weight:820 !important;
    text-shadow:0 16px 40px rgba(0,0,0,.18) !important;
  }

  .mw-legal__p{
    max-width:820px !important;
    margin:30px 0 0 !important;
    color:rgba(255,255,255,.88) !important;
    font-size:17px !important;
    line-height:1.9 !important;
  }

  /* SEARCH + COUNT BELOW HERO LIKE SECOND IMAGE */
  .ag-faq__contentTools{
    margin:40px 0 0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:16px !important;
    align-items:center !important;
  }

  .ag-faq__contentTools .ag-faq__search{
    min-height:96px !important;
    display:grid !important;
    grid-template-columns:94px minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:0 !important;
    border:1px solid rgba(17,24,39,.10) !important;
    border-radius:999px !important;
    padding:8px 10px !important;
    background:#ffffff !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
  }

  .ag-faq__contentTools .ag-faq__searchIcon{
    width:54px !important;
    height:54px !important;
    margin-left:8px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    border:0 !important;
    background:#fff3f4 !important;
    color:var(--help-red) !important;
    box-shadow:none !important;
  }

  .ag-faq__contentTools .ag-faq__search input{
    height:70px !important;
    padding:0 18px !important;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    color:#1f2b46 !important;
    font-size:18px !important;
    font-weight:500 !important;
  }

  .ag-faq__contentTools .ag-faq__search input::placeholder{
    color:#8f99ab !important;
  }

  .ag-faq__contentTools .ag-faq__clear{
    min-height:66px !important;
    min-width:152px !important;
    border:0 !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,var(--help-red),var(--help-red-dark)) !important;
    color:#ffffff !important;
    padding:0 30px !important;
    font-size:16px !important;
    font-weight:850 !important;
    box-shadow:none !important;
    transform:none !important;
  }

  .ag-faq__contentTools .ag-faq__clear:hover,
  .ag-faq__contentTools .ag-faq__clear:focus{
    background:#111827 !important;
    color:#ffffff !important;
    transform:none !important;
    box-shadow:none !important;
  }

  .ag-faq__contentTools .ag-faq__count{
    min-height:96px !important;
    display:flex !important;
    align-items:center !important;
    white-space:nowrap !important;
    border:1px solid rgba(17,24,39,.10) !important;
    border-radius:999px !important;
    background:#ffffff !important;
    color:#5d677b !important;
    padding:0 22px !important;
    box-shadow:none !important;
    font-size:15px !important;
  }

  .ag-faq__contentTools .ag-faq__count strong{
    color:var(--help-red) !important;
  }

  /* HIDE SIDEBAR + QUICK CARDS TO MATCH SECOND IMAGE */
  .ag-faq__quickWrap,
  .ag-faq__nav{
    display:none !important;
  }

  .ag-faq__layout{
    margin-top:26px !important;
    display:block !important;
  }

  .ag-faq__main{
    min-width:0 !important;
  }

  /* FAQ LIST LIKE SECOND IMAGE */
  .mw-faq{
    margin-top:0 !important;
  }

  .mw-faq__section{
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  .mw-faq__section::before{
    display:none !important;
  }

  /* hide big section headings so the rows dominate like the second image */
  .mw-faq__sectionHeader{
    display:none !important;
  }

  .mw-faq__group{
    display:grid !important;
    gap:0 !important;
  }

  .mw-faq__item{
    position:relative !important;
    background:transparent !important;
    border-bottom:1px solid var(--help-line) !important;
    transition:none !important;
  }

  .mw-faq__item:first-child{
    border-top:1px solid var(--help-line) !important;
  }

  .mw-faq__item:hover,
  .mw-faq__item.is-open{
    background:#fffafa !important;
  }

  .mw-faq__item::before{
    display:none !important;
  }

  .mw-faq__btn{
    width:100% !important;
    min-height:150px !important;
    padding:30px 0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 64px !important;
    gap:26px !important;
    border:0 !important;
    background:transparent !important;
    text-align:left !important;
    align-items:center !important;
  }

  .mw-faq__q{
    display:grid !important;
    grid-template-columns:72px minmax(0,1fr) !important;
    align-items:start !important;
    gap:20px !important;
    color:var(--help-ink) !important;
    font-size:18px !important;
    line-height:1.45 !important;
    font-weight:760 !important;
  }

  .mw-faq__q strong{
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    display:block !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:var(--help-red) !important;
    font-size:30px !important;
    line-height:1 !important;
    font-weight:850 !important;
    padding-top:8px !important;
  }

  .mw-faq__q span{
    display:block !important;
  }

  .mw-faq__icon{
    width:48px !important;
    height:48px !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
    background:#ffffff !important;
    color:var(--help-red) !important;
    border:1px solid rgba(17,24,39,.14) !important;
    box-shadow:none !important;
  }

  .mw-faq__btn[aria-expanded="true"] .mw-faq__icon{
    background:var(--help-red) !important;
    color:#ffffff !important;
    border-color:var(--help-red) !important;
  }

  .mw-faq__panelInner{
    padding:0 72px 24px 92px !important;
    color:#617084 !important;
    font-size:15px !important;
    line-height:1.8 !important;
  }

  .mw-faq__a{
    max-width:980px !important;
    margin:0 !important;
  }

  .mw-faq__note{
    max-width:980px !important;
    margin-top:12px !important;
    border:0 !important;
    border-left:4px solid var(--help-red) !important;
    border-radius:0 !important;
    background:#fff6f7 !important;
    color:#617084 !important;
    box-shadow:none !important;
  }

  .ag-faq__empty{
    border:1px dashed var(--help-line) !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:#ffffff !important;
  }

  .ag-faq__support{
    margin-top:38px !important;
    border:0 !important;
    border-radius:30px !important;
    padding:32px 36px !important;
    background:linear-gradient(135deg,var(--help-red),var(--help-red-dark)) !important;
    color:#ffffff !important;
    box-shadow:none !important;
  }

  .ag-faq__support::before{
    display:none !important;
  }

  .ag-faq__supportBtn{
    border-radius:999px !important;
    background:#ffffff !important;
    color:var(--help-red) !important;
    box-shadow:none !important;
  }

  .ag-faq__supportBtn:hover,
  .ag-faq__supportBtn:focus{
    background:#111827 !important;
    color:#ffffff !important;
    transform:none !important;
  }

  @media (max-width:900px){
    .ag-faq__hero{
      min-height:auto !important;
    }

    .ag-faq__heroContent{
      width:94% !important;
      padding:74px 0 102px !important;
    }

    .mw-legal__h1{
      font-size:clamp(38px,11vw,58px) !important;
    }

    .mw-legal__p{
      font-size:15.5px !important;
      line-height:1.82 !important;
    }

    .ag-faq__contentTools{
      grid-template-columns:1fr !important;
      margin-top:26px !important;
    }

    .ag-faq__contentTools .ag-faq__count{
      min-height:52px !important;
      width:max-content !important;
      max-width:100% !important;
      padding:0 16px !important;
      border-radius:999px !important;
    }

    .mw-faq__btn{
      min-height:120px !important;
      grid-template-columns:minmax(0,1fr) 50px !important;
      gap:16px !important;
      padding:24px 0 !important;
    }

    .mw-faq__q{
      grid-template-columns:50px minmax(0,1fr) !important;
      gap:14px !important;
      font-size:16px !important;
    }

    .mw-faq__q strong{
      font-size:24px !important;
      padding-top:6px !important;
    }

    .mw-faq__icon{
      width:42px !important;
      height:42px !important;
    }

    .mw-faq__panelInner{
      padding:0 0 22px 64px !important;
    }
  }

  @media (max-width:560px){
    .mw-legal__container.ag-faq{
      width:94% !important;
    }

    .ag-faq__contentTools .ag-faq__search{
      grid-template-columns:72px minmax(0,1fr) !important;
      border-radius:28px !important;
      padding:8px !important;
    }

    .ag-faq__contentTools .ag-faq__searchIcon{
      width:44px !important;
      height:44px !important;
      margin-left:4px !important;
    }

    .ag-faq__contentTools .ag-faq__search input{
      height:52px !important;
      padding:0 10px !important;
      font-size:15px !important;
    }

    .ag-faq__contentTools .ag-faq__clear{
      grid-column:1 / -1 !important;
      width:100% !important;
      min-height:50px !important;
      margin-top:8px !important;
      border-radius:999px !important;
    }

    .mw-faq__btn{
      grid-template-columns:minmax(0,1fr) 44px !important;
    }

    .mw-faq__q{
      grid-template-columns:44px minmax(0,1fr) !important;
      gap:12px !important;
    }

    .mw-faq__q strong{
      font-size:22px !important;
    }

    .mw-faq__panelInner{
      padding-left:56px !important;
    }
  }

  @media (max-width:420px){
    .mw-faq__panelInner{
      padding-left:0 !important;
    }
  }


  /* =========================================================
     FINAL MATCH: HELP PAGE STYLE
     Hero like first reference + content list like second reference
     Design focused; existing IDs and accordion elements kept
  ========================================================= */

  :root{
    --help-red:#c31f26;
    --help-red-dark:#99141b;
    --help-ink:#061735;
    --help-text:#5c6780;
    --help-muted:#8993a6;
    --help-line:rgba(17,24,39,.12);
  }

  .mw-legal{
    background:#ffffff !important;
    color:var(--help-ink) !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
  }

  .mw-legal::before{
    display:none !important;
  }

  .mw-legal__container.ag-faq{
    width:min(1360px,92%) !important;
    max-width:none !important;
    padding:0 0 34px !important;
    margin:0 auto !important;
  }

  /* HERO - dark image style */
  .ag-faq__hero{
    position:relative !important;
    margin:0 calc(50% - 50vw) !important;
    min-height:700px !important;
    display:flex !important;
    align-items:center !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:0 !important;
    padding:0 !important;
    background:
      linear-gradient(90deg,rgba(10,18,36,.93) 0%,rgba(17,26,45,.80) 43%,rgba(33,18,23,.34) 100%),
      url('asset/images/web/shopping-xperience.jpeg') center/cover no-repeat !important;
    box-shadow:none !important;
    isolation:isolate !important;
  }

  .ag-faq__hero::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:8px !important;
    height:auto !important;
    border-radius:0 !important;
    transform:none !important;
    background:var(--help-red) !important;
    box-shadow:none !important;
    opacity:1 !important;
    z-index:1 !important;
  }

  .ag-faq__hero::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:115px !important;
    width:auto !important;
    border:0 !important;
    border-radius:0 !important;
    background:linear-gradient(180deg,rgba(255,255,255,0),#ffffff) !important;
    box-shadow:none !important;
    z-index:1 !important;
    pointer-events:none !important;
  }

  .ag-faq__heroContent{
    position:relative !important;
    z-index:2 !important;
    width:min(1360px,92%) !important;
    max-width:880px !important;
    margin:0 auto !important;
    padding:92px 0 122px !important;
  }

  .ag-faq__badge{
    display:inline-flex !important;
    align-items:center !important;
    gap:12px !important;
    margin:0 0 26px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#ffffff !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:850 !important;
    letter-spacing:.18em !important;
    text-transform:uppercase !important;
  }

  .ag-faq__badge::before{
    content:"" !important;
    width:46px !important;
    height:1px !important;
    background:#ffffff !important;
    opacity:.92 !important;
  }

  .ag-faq__badge i{
    display:none !important;
  }

  .mw-legal__h1{
    max-width:880px !important;
    margin:0 !important;
    color:#ffffff !important;
    font-size:clamp(52px,6vw,92px) !important;
    line-height:.95 !important;
    letter-spacing:-.078em !important;
    font-weight:820 !important;
    text-shadow:0 16px 40px rgba(0,0,0,.18) !important;
  }

  .mw-legal__p{
    max-width:820px !important;
    margin:30px 0 0 !important;
    color:rgba(255,255,255,.88) !important;
    font-size:17px !important;
    line-height:1.9 !important;
  }

  /* Search below hero exactly like Help page content */
  .ag-faq__contentTools{
    margin:40px 0 0 !important;
    display:block !important;
  }

  .ag-faq__contentTools .ag-faq__search{
    width:100% !important;
    min-height:96px !important;
    display:grid !important;
    grid-template-columns:94px minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:0 !important;
    border:1px solid rgba(17,24,39,.10) !important;
    border-radius:999px !important;
    padding:8px 10px !important;
    background:#ffffff !important;
    box-shadow:0 18px 50px rgba(17,24,39,.055) !important;
    backdrop-filter:none !important;
  }

  .ag-faq__contentTools .ag-faq__searchIcon{
    width:54px !important;
    height:54px !important;
    margin-left:8px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    border:0 !important;
    background:#fff3f4 !important;
    color:var(--help-red) !important;
    box-shadow:none !important;
  }

  .ag-faq__contentTools .ag-faq__search input{
    height:70px !important;
    padding:0 18px !important;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    color:#1f2b46 !important;
    font-size:18px !important;
    font-weight:500 !important;
  }

  .ag-faq__contentTools .ag-faq__search input::placeholder{
    color:#8f99ab !important;
  }

  .ag-faq__contentTools .ag-faq__clear{
    min-height:66px !important;
    min-width:152px !important;
    border:0 !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,var(--help-red),var(--help-red-dark)) !important;
    color:#ffffff !important;
    padding:0 30px !important;
    font-size:16px !important;
    font-weight:850 !important;
    box-shadow:none !important;
    transform:none !important;
  }

  .ag-faq__contentTools .ag-faq__clear:hover,
  .ag-faq__contentTools .ag-faq__clear:focus{
    background:#111827 !important;
    color:#ffffff !important;
    transform:none !important;
    box-shadow:none !important;
  }

  .ag-faq__contentTools .ag-faq__count{
    display:none !important;
  }

  /* Hide sidebar/category cards so content becomes like Help article list */
  .ag-faq__quickWrap,
  .ag-faq__nav{
    display:none !important;
  }

  .ag-faq__layout{
    margin-top:44px !important;
    display:block !important;
  }

  .ag-faq__main{
    min-width:0 !important;
    counter-reset:faq-row !important;
  }

  /* Show all sections in list style */
  .mw-faq__section,
  .mw-faq__section.is-hidden-category{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  .mw-faq__section::before{
    display:none !important;
  }

  .mw-faq__sectionHeader{
    display:none !important;
  }

  .mw-faq__group{
    display:grid !important;
    gap:0 !important;
  }

  .mw-faq__item{
    position:relative !important;
    counter-increment:faq-row !important;
    background:transparent !important;
    border-bottom:1px solid var(--help-line) !important;
    transition:none !important;
  }

  .mw-faq__section:first-of-type .mw-faq__item:first-child{
    border-top:1px solid var(--help-line) !important;
  }

  .mw-faq__item:hover,
  .mw-faq__item.is-open{
    background:#fffafa !important;
  }

  .mw-faq__item::before{
    display:none !important;
  }

  .mw-faq__btn{
    width:100% !important;
    min-height:150px !important;
    padding:30px 0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 64px !important;
    gap:26px !important;
    border:0 !important;
    background:transparent !important;
    text-align:left !important;
    align-items:center !important;
  }

  .mw-faq__q{
    position:relative !important;
    display:grid !important;
    grid-template-columns:72px minmax(0,1fr) !important;
    align-items:start !important;
    gap:18px !important;
    padding-top:26px !important;
    color:var(--help-ink) !important;
    font-size:26px !important;
    line-height:1.22 !important;
    font-weight:820 !important;
    letter-spacing:-.04em !important;
  }

  .mw-faq__q strong{
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    display:block !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:transparent !important;
    font-size:0 !important;
    line-height:1 !important;
    font-weight:850 !important;
    padding-top:3px !important;
  }

  .mw-faq__q strong::before{
    content:counter(faq-row, decimal-leading-zero) !important;
    color:var(--help-red) !important;
    font-size:15px !important;
    line-height:1 !important;
    font-weight:850 !important;
    letter-spacing:.04em !important;
  }

  .mw-faq__q::before{
    content:"FAQ" !important;
    position:absolute !important;
    left:90px !important;
    top:0 !important;
    color:var(--help-red) !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:700 !important;
    letter-spacing:.12em !important;
    text-transform:uppercase !important;
  }

  #faq-orders .mw-faq__q::before{ content:"▦  ORDERS" !important; }
  #faq-gifts .mw-faq__q::before{ content:"▦  GIFT SERVICES" !important; }
  #faq-delivery .mw-faq__q::before{ content:"▦  DELIVERY" !important; }
  #faq-payments .mw-faq__q::before{ content:"▦  PAYMENTS" !important; }
  #faq-returns .mw-faq__q::before{ content:"▦  RETURNS" !important; }
  #faq-corporate .mw-faq__q::before{ content:"▦  CORPORATE" !important; }
  #faq-account .mw-faq__q::before{ content:"▦  ACCOUNT" !important; }

  .mw-faq__preview{
    grid-column:2 / 3 !important;
    display:block !important;
    margin-top:10px !important;
    color:#5f6c82 !important;
    font-size:16px !important;
    line-height:1.55 !important;
    font-weight:400 !important;
    letter-spacing:0 !important;
    max-width:760px !important;
    display:-webkit-box !important;
    -webkit-line-clamp:1 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }

  .mw-faq__icon{
    width:48px !important;
    height:48px !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
    background:#ffffff !important;
    color:var(--help-red) !important;
    border:1px solid rgba(17,24,39,.14) !important;
    box-shadow:none !important;
  }

  .mw-faq__btn[aria-expanded="true"] .mw-faq__icon{
    background:var(--help-red) !important;
    color:#ffffff !important;
    border-color:var(--help-red) !important;
  }

  .mw-faq__panelInner{
    padding:0 72px 26px 90px !important;
    color:#617084 !important;
    font-size:15px !important;
    line-height:1.8 !important;
  }

  .mw-faq__a{
    max-width:980px !important;
    margin:0 !important;
  }

  .mw-faq__note{
    max-width:980px !important;
    margin-top:12px !important;
    border:0 !important;
    border-left:4px solid var(--help-red) !important;
    border-radius:0 !important;
    background:#fff6f7 !important;
    color:#617084 !important;
    box-shadow:none !important;
  }

  .ag-faq__empty{
    border:1px dashed var(--help-line) !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:#ffffff !important;
  }

  .ag-faq__support{
    margin-top:38px !important;
    border:0 !important;
    border-radius:30px !important;
    padding:32px 36px !important;
    background:linear-gradient(135deg,var(--help-red),var(--help-red-dark)) !important;
    color:#ffffff !important;
    box-shadow:none !important;
  }

  .ag-faq__support::before{
    display:none !important;
  }

  .ag-faq__supportBtn{
    border-radius:999px !important;
    background:#ffffff !important;
    color:var(--help-red) !important;
    box-shadow:none !important;
  }

  .ag-faq__supportBtn:hover,
  .ag-faq__supportBtn:focus{
    background:#111827 !important;
    color:#ffffff !important;
    transform:none !important;
  }

  @media (max-width:900px){
    .ag-faq__hero{
      min-height:auto !important;
    }

    .ag-faq__heroContent{
      width:94% !important;
      padding:74px 0 102px !important;
    }

    .mw-legal__h1{
      font-size:clamp(38px,11vw,58px) !important;
    }

    .mw-legal__p{
      font-size:15.5px !important;
      line-height:1.82 !important;
    }

    .ag-faq__contentTools{
      margin-top:26px !important;
    }

    .mw-faq__btn{
      min-height:120px !important;
      grid-template-columns:minmax(0,1fr) 50px !important;
      gap:16px !important;
      padding:24px 0 !important;
    }

    .mw-faq__q{
      grid-template-columns:50px minmax(0,1fr) !important;
      gap:14px !important;
      font-size:21px !important;
    }

    .mw-faq__q::before{
      left:64px !important;
    }

    .mw-faq__preview{
      font-size:15px !important;
    }

    .mw-faq__icon{
      width:42px !important;
      height:42px !important;
    }

    .mw-faq__panelInner{
      padding:0 0 22px 64px !important;
    }
  }

  @media (max-width:560px){
    .mw-legal__container.ag-faq{
      width:94% !important;
    }

    .ag-faq__contentTools .ag-faq__search{
      grid-template-columns:72px minmax(0,1fr) !important;
      border-radius:28px !important;
      padding:8px !important;
      min-height:auto !important;
    }

    .ag-faq__contentTools .ag-faq__searchIcon{
      width:44px !important;
      height:44px !important;
      margin-left:4px !important;
    }

    .ag-faq__contentTools .ag-faq__search input{
      height:52px !important;
      padding:0 10px !important;
      font-size:15px !important;
    }

    .ag-faq__contentTools .ag-faq__clear{
      grid-column:1 / -1 !important;
      width:100% !important;
      min-height:50px !important;
      margin-top:8px !important;
      border-radius:999px !important;
    }

    .mw-faq__btn{
      grid-template-columns:minmax(0,1fr) 44px !important;
    }

    .mw-faq__q{
      grid-template-columns:44px minmax(0,1fr) !important;
      gap:12px !important;
      font-size:19px !important;
    }

    .mw-faq__q::before{
      left:56px !important;
    }

    .mw-faq__panelInner{
      padding-left:56px !important;
    }
  }

  @media (max-width:420px){
    .mw-faq__panelInner{
      padding-left:0 !important;
    }
  }


  /* =========================================================
     HERO ONLY PATCH
     Make hero match the provided reference more closely
     Do not change the rest of the page
  ========================================================= */
  .ag-faq__hero{
    position:relative !important;
    margin:0 calc(50% - 50vw) !important;
    min-height:700px !important;
    display:flex !important;
    align-items:center !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:0 !important;
    padding:0 !important;
    background:
      linear-gradient(90deg, rgba(10,18,35,.94) 0%, rgba(17,26,45,.82) 42%, rgba(43,19,28,.32) 100%),
      url('asset/images/web/shopping-xperience.jpeg') center/cover no-repeat !important;
    box-shadow:none !important;
    isolation:isolate !important;
  }

  .ag-faq__hero::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:8px !important;
    background:var(--help-red, #c31f26) !important;
    z-index:1 !important;
    opacity:1 !important;
  }

  .ag-faq__hero::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:120px !important;
    background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.96)) !important;
    z-index:1 !important;
    pointer-events:none !important;
  }

  .ag-faq__heroContent{
    position:relative !important;
    z-index:2 !important;
    width:min(1360px,92%) !important;
    max-width:900px !important;
    margin:0 auto !important;
    padding:95px 0 122px !important;
  }

  .ag-faq__badge{
    display:inline-flex !important;
    align-items:center !important;
    gap:14px !important;
    margin:0 0 28px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#ffffff !important;
    box-shadow:none !important;
    text-transform:uppercase !important;
    font-size:12px !important;
    font-weight:850 !important;
    letter-spacing:.18em !important;
    line-height:1 !important;
  }

  .ag-faq__badge::before{
    content:"" !important;
    width:46px !important;
    height:1px !important;
    background:#ffffff !important;
    opacity:.92 !important;
  }

  .ag-faq__badge i{
    display:none !important;
  }

  .mw-legal__h1{
    max-width:880px !important;
    margin:0 !important;
    color:#ffffff !important;
    font-size:clamp(54px, 6.1vw, 92px) !important;
    line-height:.94 !important;
    letter-spacing:-.08em !important;
    font-weight:820 !important;
    text-shadow:0 18px 40px rgba(0,0,0,.18) !important;
  }

  .mw-legal__p{
    max-width:820px !important;
    margin:30px 0 0 !important;
    color:rgba(255,255,255,.88) !important;
    font-size:17px !important;
    line-height:1.9 !important;
    font-weight:400 !important;
  }

  @media (max-width:900px){
    .ag-faq__hero{
      min-height:auto !important;
    }

    .ag-faq__heroContent{
      width:94% !important;
      padding:78px 0 104px !important;
    }

    .mw-legal__h1{
      font-size:clamp(38px, 11vw, 60px) !important;
    }

    .mw-legal__p{
      font-size:15.5px !important;
      line-height:1.82 !important;
    }
  }


  /* HERO ONLY FINAL FIX - do not affect any other section */
  .ag-faq__hero{
    position:relative !important;
    margin:0 calc(50% - 50vw) !important;
    min-height:700px !important;
    display:flex !important;
    align-items:center !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:0 !important;
    padding:0 !important;
    background:
      linear-gradient(90deg, rgba(238, 27, 55, 0.94) 0%, rgba(45, 18, 24, 0.8) 43%, rgba(35,18,24,.32) 100%),
      url('asset/images/web/shopping-xperience.jpeg') center center  !important;
    box-shadow:none !important;
    isolation:isolate !important;
  }

  .ag-faq__hero::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:8px !important;
    height:auto !important;
    border-radius:0 !important;
    transform:none !important;
    background:#c31f26 !important;
    box-shadow:none !important;
    opacity:1 !important;
    z-index:1 !important;
  }

  .ag-faq__hero::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:0 !important;
    width:auto !important;
    height:115px !important;
    border:0 !important;
    border-radius:0 !important;
    transform:none !important;
    background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.92)) !important;
    box-shadow:none !important;
    opacity:1 !important;
    z-index:1 !important;
    pointer-events:none !important;
  }

  .ag-faq__heroContent{
    position:relative !important;
    z-index:2 !important;
    width:min(1360px,92%) !important;
    max-width:880px !important;
    margin:0 auto !important;
    padding:96px 0 125px !important;
  }

  .ag-faq__badge{
    display:inline-flex !important;
    align-items:center !important;
    gap:12px !important;
    margin:0 0 28px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#fff !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:850 !important;
    letter-spacing:.18em !important;
    text-transform:uppercase !important;
  }

  .ag-faq__badge::before{
    content:"" !important;
    width:46px !important;
    height:1px !important;
    background:#fff !important;
    opacity:.92 !important;
  }

  .ag-faq__badge i{
    display:none !important;
  }

  .ag-faq__hero .mw-legal__h1{
    max-width:880px !important;
    margin:0 !important;
    color:#fff !important;
    font-size:clamp(94px,.1vw,92px) !important;
    line-height:.94 !important;
    letter-spacing:.08em !important;
    font-weight:820 !important;
    text-shadow:0 18px 40px rgba(0,0,0,.18) !important;
  }

  .ag-faq__hero .mw-legal__p{
    max-width:820px !important;
    margin:30px 0 0 !important;
    color:rgba(255,255,255,.88) !important;
    font-size:17px !important;
    line-height:1.9 !important;
    font-weight:400 !important;
  }

  @media (max-width:900px){
    .ag-faq__hero{
      min-height:auto !important;
    }

    .ag-faq__heroContent{
      width:94% !important;
      padding:78px 0 104px !important;
    }

    .ag-faq__hero .mw-legal__h1{
      font-size:clamp(38px,11vw,60px) !important;
    }

    .ag-faq__hero .mw-legal__p{
      font-size:15.5px !important;
      line-height:1.82 !important;
    }
  }


  /* Remove bottom white/fade overlay from FAQ hero only */
  .ag-faq__hero::after{
    display:none !important;
    content:none !important;
    background:none !important;
    height:0 !important;
  }


/* =========================================================
   Moved from: Pasted text (7)(5).txt
   ========================================================= */
/* =========================================================
     ALALAAS GIFTS FAQ PAGE - NEW PREMIUM EDITORIAL DESIGN
     - Design only changed
     - Header/footer include structure unchanged
     - Existing category, search, clear, and accordion logic unchanged
     - Scoped CSS for this page only
  ========================================================= */

  :root{
    --ag-red:#c31f26;
    --ag-red-dark:#a9151d;
    --ag-yellow:#fdcf00;
    --ag-ink:#171b24;
    --ag-text:#303747;
    --ag-muted:#687386;
    --ag-line:#e9edf3;
    --ag-line-2:#f1f3f6;
    --ag-bg:#f7f3ef;
    --ag-card:#ffffff;
    --ag-cream:#fffaf4;
    --ag-soft-red:#fff1f2;
    --ag-shadow:0 26px 70px rgba(24, 28, 38, .08);
    --ag-shadow-soft:0 14px 35px rgba(24, 28, 38, .06);
  }

  .mw-legal,
  .mw-legal *{
    box-sizing:border-box;
  }

  .mw-legal{
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(circle at 5% 4%, rgba(253,207,0,.20), transparent 26%),
      radial-gradient(circle at 92% 12%, rgba(195,31,38,.12), transparent 28%),
      linear-gradient(180deg, #fffaf4 0%, #f7f3ef 46%, #ffffff 100%);
    color:var(--ag-ink);
    font-family:Inter, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  .mw-legal::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.48;
    background-image:
      linear-gradient(rgba(195,31,38,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(195,31,38,.035) 1px, transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(180deg, #000 0%, transparent 55%);
  }

  .mw-legal strong,
  .mw-legal b{
    font-weight:620;
  }

  .mw-legal__container{
    position:relative;
    z-index:1;
    width:90%;
    max-width:1320px;
    margin:0 auto;
  }

  .mw-legal__section{
    scroll-margin-top:115px;
  }

  .ag-faq{
    padding:28px 0 68px;
  }

  /* ================= HERO ================= */
  .ag-faq__hero{
    position:relative;
    overflow:hidden;
    min-height:330px;
    border:1px solid rgba(195,31,38,.14);
    border-radius:34px;
    padding:48px;
    background:
      linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 48%, rgba(255,244,245,.92) 100%);
    box-shadow:var(--ag-shadow);
    isolation:isolate;
  }

  .ag-faq__hero::before{
    content:"";
    position:absolute;
    right:38px;
    top:34px;
    width:170px;
    height:170px;
    border-radius:42px;
    transform:rotate(10deg);
    background:
      linear-gradient(135deg, rgba(195,31,38,.95), rgba(169,21,29,.95));
    box-shadow:0 28px 60px rgba(195,31,38,.22);
    opacity:.95;
    z-index:-1;
  }

  .ag-faq__hero::after{
    content:"";
    position:absolute;
    right:73px;
    top:69px;
    width:100px;
    height:100px;
    border-radius:50%;
    border:18px solid rgba(253,207,0,.95);
    box-shadow:0 18px 40px rgba(253,207,0,.18);
    z-index:-1;
  }

  .ag-faq__heroContent{
    max-width:900px;
    position:relative;
    z-index:2;
  }

  .ag-faq__badge{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-bottom:18px;
    padding:10px 14px;
    border:1px solid rgba(195,31,38,.15);
    border-radius:999px;
    background:#ffffff;
    color:var(--ag-red);
    font-size:12.5px;
    line-height:1;
    letter-spacing:.06em;
    text-transform:uppercase;
    font-weight:650;
    box-shadow:0 14px 28px rgba(195,31,38,.07);
  }

  .ag-faq__badge i{
    font-size:15px;
    line-height:1;
  }

  .mw-legal__h1{
    margin:0;
    max-width:850px;
    color:var(--ag-ink);
    font-size:clamp(36px, 2.7vw, 66px);
    line-height:.98;
    letter-spacing:-.055em;
    font-weight:720;
  }

  .mw-legal__h2{
    margin:0;
    color:var(--ag-ink);
    font-size:25px;
    line-height:1.2;
    letter-spacing:-.03em;
    font-weight:700;
  }

  .mw-legal__p{
    max-width:820px;
    margin:18px 0 0;
    color:var(--ag-muted);
    font-size:16.5px;
    line-height:1.82;
    font-weight:400;
  }

  /* ================= SEARCH ================= */
  .ag-faq__tools{
    margin-top:30px;
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:15px;
    align-items:center;
  }

  .ag-faq__search{
    min-height:64px;
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid rgba(195,31,38,.13);
    border-radius:22px;
    padding:8px 10px 8px 12px;
    background:rgba(255,255,255,.92);
    box-shadow:0 18px 40px rgba(24,28,38,.07);
    backdrop-filter:blur(10px);
  }

  .ag-faq__searchIcon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:16px;
    color:#fff;
    background:var(--ag-red);
    box-shadow:0 12px 24px rgba(195,31,38,.20);
  }

  .ag-faq__searchIcon svg{
    width:20px;
    height:20px;
    stroke:currentColor;
    stroke-width:2.1;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .ag-faq__search input{
    flex:1;
    min-width:0;
    border:0;
    outline:none;
    color:var(--ag-ink);
    background:transparent;
    font-size:15px;
    line-height:1.5;
    font-weight:450;
  }

  .ag-faq__search input::placeholder{
    color:#9aa3b2;
  }

  .ag-faq__clear{
    border:0;
    border-radius:16px;
    background:#1e2430;
    color:#ffffff;
    padding:13px 18px;
    cursor:pointer;
    font-size:14px;
    line-height:1;
    font-weight:650;
    transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
  }

  .ag-faq__clear:hover,
  .ag-faq__clear:focus{
    background:var(--ag-red);
    transform:translateY(-1px);
    box-shadow:0 12px 24px rgba(195,31,38,.18);
  }

  .ag-faq__count{
    white-space:nowrap;
    color:#5e687a;
    font-size:14px;
    line-height:1.5;
    font-weight:500;
    padding:15px 18px;
    border:1px solid rgba(195,31,38,.11);
    border-radius:18px;
    background:rgba(255,255,255,.82);
    box-shadow:0 12px 26px rgba(24,28,38,.045);
  }

  .ag-faq__count strong{
    color:var(--ag-red);
    font-weight:750;
  }

  /* ================= QUICK CARDS ================= */
  .ag-faq__quickWrap{
    margin-top:30px;
  }

  .ag-faq__sectionHead{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
  }

  .ag-faq__sectionHead p{
    margin:6px 0 0;
    color:var(--ag-muted);
    font-size:14.5px;
    line-height:1.65;
    font-weight:400;
  }

  .ag-faq__quick{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:18px;
  }

  .ag-faq__quickCard{
    position:relative;
    overflow:hidden;
    min-height:202px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:24px;
    border:1px solid rgba(231,235,241,.95);
    border-radius:28px;
    background:#ffffff;
    color:var(--ag-ink);
    text-decoration:none;
    box-shadow:var(--ag-shadow-soft);
    transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
  }

  .ag-faq__quickCard::before{
    content:"";
    position:absolute;
    inset:auto 20px 18px 20px;
    height:5px;
    border-radius:999px;
    background:linear-gradient(90deg, var(--ag-red), var(--ag-yellow));
    transform:scaleX(.28);
    transform-origin:left;
    transition:transform .24s ease;
  }

  .ag-faq__quickCard::after{
    content:"";
    position:absolute;
    width:132px;
    height:132px;
    right:-58px;
    top:-58px;
    border-radius:50%;
    background:linear-gradient(135deg, rgba(195,31,38,.10), rgba(253,207,0,.16));
    pointer-events:none;
  }

  .ag-faq__quickCard:hover,
  .ag-faq__quickCard:focus{
    outline:none;
    transform:translateY(-6px);
    border-color:rgba(195,31,38,.20);
    box-shadow:0 24px 58px rgba(24,28,38,.11);
  }

  .ag-faq__quickCard:hover::before,
  .ag-faq__quickCard:focus::before{
    transform:scaleX(1);
  }

  .ag-faq__quickTop{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    position:relative;
    z-index:1;
  }

  .ag-faq__quickIcon{
    width:56px;
    height:56px;
    border-radius:20px;
    display:grid;
    place-items:center;
    color:var(--ag-red);
    background:var(--ag-soft-red);
    border:1px solid rgba(195,31,38,.13);
  }

  .ag-faq__quickIcon svg{
    width:27px;
    height:27px;
    stroke:currentColor;
    stroke-width:1.85;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .ag-faq__quickArrow{
    width:38px;
    height:38px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:var(--ag-red);
    background:#fff7f8;
    border:1px solid rgba(195,31,38,.12);
    transition:background .2s ease, color .2s ease, transform .2s ease;
  }

  .ag-faq__quickCard:hover .ag-faq__quickArrow{
    background:var(--ag-red);
    color:#fff;
    transform:translate(3px, -3px);
  }

  .ag-faq__quickTitle{
    position:relative;
    z-index:1;
    margin:20px 0 8px;
    color:var(--ag-ink);
    font-size:17px;
    line-height:1.32;
    letter-spacing:-.018em;
    font-weight:700;
  }

  .ag-faq__quickText{
    position:relative;
    z-index:1;
    margin:0 0 14px;
    color:var(--ag-muted);
    font-size:14px;
    line-height:1.7;
    font-weight:400;
  }

  /* ================= MAIN FAQ LAYOUT ================= */
  .mw-faq{
    margin-top:28px;
  }

  .ag-faq__layout{
    margin-top:30px;
    display:grid;
    grid-template-columns:310px minmax(0,1fr);
    gap:24px;
    align-items:start;
  }

  /* ================= CATEGORY NAV ================= */
  .ag-faq__nav{
    position:sticky;
    top:110px;
    border:1px solid rgba(231,235,241,.95);
    border-radius:30px;
    padding:18px;
    background:rgba(255,255,255,.92);
    box-shadow:var(--ag-shadow-soft);
    backdrop-filter:blur(10px);
  }

  .ag-faq__navTitle{
    margin:0 0 16px;
    color:var(--ag-ink);
    font-size:18px;
    line-height:1.25;
    font-weight:750;
    letter-spacing:-.025em;
  }

  .ag-faq__navLinks{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .ag-faq__catLink{
    width:100%;
    border:1px solid transparent;
    border-radius:20px;
    padding:11px;
    display:grid;
    grid-template-columns:44px 1fr 34px;
    align-items:center;
    gap:12px;
    text-align:left;
    cursor:pointer;
    color:var(--ag-text);
    background:#ffffff;
    transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  }

  .ag-faq__catLink:hover,
  .ag-faq__catLink:focus{
    outline:none;
    transform:translateX(3px);
    background:#fff8f8;
    border-color:rgba(195,31,38,.12);
  }

  .ag-faq__catIcon{
    width:44px;
    height:44px;
    border-radius:16px;
    display:grid;
    place-items:center;
    color:var(--ag-red);
    background:#fff1f2;
    transition:background .2s ease, color .2s ease;
  }

  .ag-faq__catIcon svg{
    width:21px;
    height:21px;
    stroke:currentColor;
    stroke-width:1.85;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .ag-faq__catText{
    color:inherit;
    font-size:14.8px;
    line-height:1.35;
    letter-spacing:-.01em;
    font-weight:650;
  }

  .ag-faq__catCount{
    width:32px;
    height:32px;
    border-radius:999px;
    display:grid;
    place-items:center;
    color:#858f9f;
    background:#f2f4f7;
    font-size:12px;
    font-weight:750;
  }

  .ag-faq__catLink.is-active{
    color:#ffffff;
    background:
      radial-gradient(circle at 90% 15%, rgba(253,207,0,.28), transparent 34%),
      linear-gradient(135deg, #c31f26, #a9151d);
    border-color:rgba(195,31,38,.20);
    box-shadow:0 18px 32px rgba(195,31,38,.23);
    transform:translateX(0);
  }

  .ag-faq__catLink.is-active .ag-faq__catIcon,
  .ag-faq__catLink.is-active .ag-faq__catCount{
    background:rgba(255,255,255,.16);
    color:#ffffff;
  }

  .mw-faq__section.is-hidden-category{
    display:none !important;
  }

  /* ================= FAQ SECTIONS ================= */
  .ag-faq__main{
    min-width:0;
  }

  .mw-faq__section{
    position:relative;
    overflow:hidden;
    margin-bottom:20px;
    border:1px solid rgba(231,235,241,.95);
    border-radius:30px;
    background:#ffffff;
    box-shadow:var(--ag-shadow-soft);
  }

  .mw-faq__section::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:5px;
    background:linear-gradient(90deg, var(--ag-red), var(--ag-yellow), transparent);
  }

  .mw-faq__sectionHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:26px 28px 22px;
    border-bottom:1px solid var(--ag-line-2);
    background:
      radial-gradient(circle at 96% 12%, rgba(253,207,0,.13), transparent 22%),
      linear-gradient(180deg, #ffffff, #fffdfb);
  }

  .mw-faq__sectionTag{
    white-space:nowrap;
    color:var(--ag-red);
    background:#fff6f7;
    border:1px solid rgba(195,31,38,.14);
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    line-height:1;
    letter-spacing:.025em;
    font-weight:700;
  }

  .mw-faq__group{
    display:grid;
    gap:0;
  }

  .mw-faq__item{
    position:relative;
    background:#fff;
    border-bottom:1px solid var(--ag-line-2);
    transition:background .22s ease;
  }

  .mw-faq__item:last-child{
    border-bottom:0;
  }

  .mw-faq__item::before{
    content:"";
    position:absolute;
    left:0;
    top:14px;
    bottom:14px;
    width:0;
    border-radius:0 999px 999px 0;
    background:var(--ag-red);
    transition:width .22s ease;
  }

  .mw-faq__item:hover,
  .mw-faq__item.is-open{
    background:#fffafa;
  }

  .mw-faq__item:hover::before,
  .mw-faq__item.is-open::before{
    width:5px;
  }

  .mw-faq__btn{
    width:100%;
    border:0;
    background:transparent;
    cursor:pointer;
    padding:20px 26px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 42px;
    align-items:center;
    gap:18px;
    text-align:left;
  }

  .mw-faq__q{
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    align-items:center;
    gap:15px;
    color:var(--ag-ink);
    font-size:15.7px;
    line-height:1.48;
    letter-spacing:-.006em;
    font-weight:620;
  }

  .mw-faq__q strong{
    width:46px;
    height:46px;
    border-radius:17px;
    display:grid;
    place-items:center;
    color:var(--ag-red);
    background:#fff2f3;
    border:1px solid rgba(195,31,38,.13);
    font-size:13px;
    line-height:1;
    font-weight:800;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
  }

  .mw-faq__item.is-open .mw-faq__q strong{
    background:var(--ag-red);
    color:#ffffff;
    border-color:var(--ag-red);
  }

  .mw-faq__icon{
    width:42px;
    height:42px;
    border-radius:16px;
    display:grid;
    place-items:center;
    border:1px solid var(--ag-line);
    background:#ffffff;
    color:var(--ag-red);
    transition:transform .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
  }

  .mw-faq__icon svg{
    width:18px;
    height:18px;
    stroke:currentColor;
    stroke-width:2.25;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .mw-faq__btn[aria-expanded="true"] .mw-faq__icon{
    transform:rotate(180deg);
    background:var(--ag-red);
    color:#ffffff;
    border-color:var(--ag-red);
  }

  .mw-faq__panel{
    height:0;
    overflow:hidden;
    transition:height .28s ease;
    will-change:height;
  }

  .mw-faq__panelInner{
    padding:0 28px 24px 87px;
    color:var(--ag-muted);
    line-height:1.78;
    font-size:14.6px;
    font-weight:400;
  }

  .mw-faq__a{
    margin:0;
    max-width:920px;
  }

  .mw-faq__note{
    max-width:920px;
    margin-top:12px;
    padding:13px 15px;
    border:1px solid rgba(195,31,38,.12);
    border-left:4px solid var(--ag-red);
    border-radius:14px;
    background:#ffffff;
    color:#5f697a;
    font-size:13.7px;
    line-height:1.68;
    font-weight:400;
  }

  .mw-faq__btn:focus-visible,
  .ag-faq__clear:focus-visible,
  .ag-faq__catLink:focus-visible,
  .ag-faq__supportBtn:focus-visible,
  .ag-faq__quickCard:focus-visible{
    outline:3px solid rgba(195,31,38,.22);
    outline-offset:3px;
  }

  .ag-faq__empty{
    display:none;
    margin-top:16px;
    border:1px dashed #d2d9e4;
    border-radius:22px;
    padding:22px;
    background:#ffffff;
    color:var(--ag-muted);
    line-height:1.7;
    font-size:15px;
    font-weight:400;
    box-shadow:var(--ag-shadow-soft);
  }

  .ag-faq__empty strong{
    color:var(--ag-ink);
    font-weight:750;
  }

  /* ================= SUPPORT CTA ================= */
  .ag-faq__support{
    position:relative;
    overflow:hidden;
    margin-top:24px;
    border:1px solid rgba(195,31,38,.14);
    border-radius:30px;
    padding:26px;
    background:
      radial-gradient(circle at 88% 12%, rgba(253,207,0,.22), transparent 28%),
      linear-gradient(135deg, #1f2530, #111722);
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    box-shadow:0 24px 60px rgba(24,28,38,.16);
  }

  .ag-faq__support::before{
    content:"";
    position:absolute;
    width:160px;
    height:160px;
    right:-65px;
    bottom:-75px;
    border-radius:50%;
    border:24px solid rgba(195,31,38,.48);
  }

  .ag-faq__support h3{
    position:relative;
    margin:0;
    color:#ffffff;
    font-size:23px;
    line-height:1.25;
    letter-spacing:-.025em;
    font-weight:760;
  }

  .ag-faq__support p{
    position:relative;
    max-width:740px;
    margin:8px 0 0;
    color:rgba(255,255,255,.76);
    font-size:14.8px;
    line-height:1.7;
    font-weight:400;
  }

  .ag-faq__supportBtn{
    position:relative;
    z-index:1;
    min-width:175px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:18px;
    background:#ffffff;
    color:var(--ag-red) !important;
    padding:14px 18px;
    text-decoration:none;
    font-size:14px;
    line-height:1;
    font-weight:750;
    box-shadow:0 16px 30px rgba(0,0,0,.16);
    transition:transform .2s ease, background .2s ease, color .2s ease;
  }

  .ag-faq__supportBtn:hover,
  .ag-faq__supportBtn:focus{
    transform:translateY(-2px);
    background:var(--ag-yellow);
    color:#1f2530 !important;
  }

  .ag-faq__supportBtn svg{
    width:18px;
    height:18px;
    stroke:currentColor;
    stroke-width:2.1;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .ag-faq__quick a,
  .ag-faq__quickCard,
  .ag-faq__quickCard:link,
  .ag-faq__quickCard:visited,
  .ag-faq__quickCard:hover,
  .ag-faq__quickCard:focus,
  .ag-faq__quickCard:active,
  .ag-faq__supportBtn,
  .ag-faq__supportBtn:link,
  .ag-faq__supportBtn:visited,
  .ag-faq__supportBtn:hover,
  .ag-faq__supportBtn:focus,
  .ag-faq__supportBtn:active{
    text-decoration:none !important;
  }

  .ag-faq__quickCard *,
  .ag-faq__supportBtn *{
    text-decoration:none !important;
  }

  .ag-faq__quickCard,
  .ag-faq__supportBtn,
  .ag-faq__catLink,
  .mw-faq__btn,
  .ag-faq__clear{
    -webkit-tap-highlight-color:transparent;
  }

  /* ================= RESPONSIVE ================= */
  @media (max-width:1180px){
    .ag-faq__quick{
      grid-template-columns:repeat(2, minmax(0,1fr));
    }

    .ag-faq__layout{
      grid-template-columns:1fr;
    }

    .ag-faq__nav{
      position:static;
    }

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

  @media (max-width:768px){
    .mw-legal__container{
      width:94%;
    }

    .ag-faq{
      padding:18px 0 48px;
    }

    .ag-faq__hero{
      min-height:auto;
      padding:32px 24px;
      border-radius:26px;
    }

    .ag-faq__hero::before{
      width:118px;
      height:118px;
      right:-34px;
      top:-34px;
      border-radius:32px;
      opacity:.22;
    }

    .ag-faq__hero::after{
      width:76px;
      height:76px;
      right:6px;
      top:6px;
      border-width:14px;
      opacity:.42;
    }

    .ag-faq__tools{
      grid-template-columns:1fr;
    }

    .ag-faq__count{
      white-space:normal;
    }

    .ag-faq__sectionHead{
      flex-direction:column;
      align-items:flex-start;
    }

    .mw-faq__sectionHeader{
      padding:22px 20px 18px;
      flex-direction:column;
      align-items:flex-start;
    }

    .ag-faq__support{
      flex-direction:column;
      align-items:flex-start;
    }

    .ag-faq__supportBtn{
      width:100%;
    }
  }

  @media (max-width:576px){
    .ag-faq__quick{
      grid-template-columns:1fr;
    }

    .ag-faq__navLinks{
      grid-template-columns:1fr;
    }

    .ag-faq__catLink{
      grid-template-columns:42px 1fr 32px;
      padding:10px;
      border-radius:18px;
    }

    .ag-faq__catIcon{
      width:42px;
      height:42px;
      border-radius:15px;
    }

    .mw-faq__btn{
      padding:18px;
      grid-template-columns:minmax(0,1fr) 38px;
      gap:12px;
    }

    .mw-faq__q{
      grid-template-columns:38px minmax(0,1fr);
      gap:12px;
      font-size:14.8px;
      align-items:flex-start;
    }

    .mw-faq__q strong,
    .mw-faq__icon{
      width:38px;
      height:38px;
      border-radius:14px;
    }

    .mw-faq__panelInner{
      padding:0 18px 20px 68px;
      font-size:14px;
    }

    .ag-faq__support{
      border-radius:24px;
      padding:22px;
    }
  }

  @media (max-width:420px){
    .mw-faq__panelInner{
      padding-left:18px;
    }

    .ag-faq__search{
      padding:8px;
    }

    .ag-faq__clear{
      padding:12px 14px;
    }
  }

  @media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
      transition:none !important;
      scroll-behavior:auto !important;
    }
  }

  /* =========================================================
     HELP STYLE COMBINATION
     Hero like first image + content like second image
     Design only, content/IDs/logic unchanged
  ========================================================= */

  :root{
    --help-red:#c31f26;
    --help-red-dark:#99141b;
    --help-ink:#0a1839;
    --help-text:#556277;
    --help-line:rgba(17,24,39,.12);
  }

  .mw-legal{
    background:#ffffff !important;
    color:var(--help-ink) !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
  }

  .mw-legal::before{
    display:none !important;
  }

  .mw-legal__container.ag-faq{
    width:min(1360px,92%) !important;
    max-width:none !important;
    padding:0 0 34px !important;
  }

  /* HERO LIKE FIRST IMAGE */
  .ag-faq__hero{
    position:relative !important;
    margin:0 calc(50% - 50vw) !important;
    min-height:700px !important;
    display:flex !important;
    align-items:center !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:0 !important;
    padding:0 !important;
    background:
      linear-gradient(90deg,rgba(10,18,36,.93) 0%,rgba(17,26,45,.80) 43%,rgba(33,18,23,.34) 100%),
      url('asset/images/web/about-banner.jpeg') center/cover no-repeat !important;
    box-shadow:none !important;
    isolation:isolate !important;
  }

  .ag-faq__hero::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:8px !important;
    height:auto !important;
    border-radius:0 !important;
    transform:none !important;
    background:var(--help-red) !important;
    box-shadow:none !important;
    opacity:1 !important;
    z-index:1 !important;
  }

  .ag-faq__hero::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:115px !important;
    width:auto !important;
    border:0 !important;
    border-radius:0 !important;
    background:linear-gradient(180deg,rgba(255,255,255,0),#ffffff) !important;
    box-shadow:none !important;
    z-index:1 !important;
    pointer-events:none !important;
  }

  .ag-faq__heroContent{
    position:relative !important;
    z-index:2 !important;
    width:min(1360px,92%) !important;
    max-width:860px !important;
    margin:0 auto !important;
    padding:92px 0 122px !important;
  }

  .ag-faq__badge{
    display:inline-flex !important;
    align-items:center !important;
    gap:12px !important;
    margin:0 0 26px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#ffffff !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:850 !important;
    letter-spacing:.18em !important;
    text-transform:uppercase !important;
  }

  .ag-faq__badge::before{
    content:"" !important;
    width:46px !important;
    height:1px !important;
    background:#ffffff !important;
    opacity:.92 !important;
  }

  .ag-faq__badge i{
    display:none !important;
  }

  .mw-legal__h1{
    max-width:860px !important;
    margin:0 !important;
    color:#ffffff !important;
    font-size:clamp(52px,3vw,92px) !important;
    line-height:.95 !important;
    letter-spacing:-.078em !important;
    font-weight:820 !important;
    text-shadow:0 16px 40px rgba(0,0,0,.18) !important;
  }

  .mw-legal__p{
    max-width:820px !important;
    margin:30px 0 0 !important;
    color:rgba(255,255,255,.88) !important;
    font-size:17px !important;
    line-height:1.9 !important;
  }

  /* SEARCH + COUNT BELOW HERO LIKE SECOND IMAGE */
  .ag-faq__contentTools{
    margin:40px 0 0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:16px !important;
    align-items:center !important;
  }

  .ag-faq__contentTools .ag-faq__search{
    min-height:96px !important;
    display:grid !important;
    grid-template-columns:94px minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:0 !important;
    border:1px solid rgba(17,24,39,.10) !important;
    border-radius:999px !important;
    padding:8px 10px !important;
    background:#ffffff !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
  }

  .ag-faq__contentTools .ag-faq__searchIcon{
    width:54px !important;
    height:54px !important;
    margin-left:8px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    border:0 !important;
    background:#fff3f4 !important;
    color:var(--help-red) !important;
    box-shadow:none !important;
  }

  .ag-faq__contentTools .ag-faq__search input{
    height:70px !important;
    padding:0 18px !important;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    color:#1f2b46 !important;
    font-size:18px !important;
    font-weight:500 !important;
  }

  .ag-faq__contentTools .ag-faq__search input::placeholder{
    color:#8f99ab !important;
  }

  .ag-faq__contentTools .ag-faq__clear{
    min-height:66px !important;
    min-width:152px !important;
    border:0 !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,var(--help-red),var(--help-red-dark)) !important;
    color:#ffffff !important;
    padding:0 30px !important;
    font-size:16px !important;
    font-weight:850 !important;
    box-shadow:none !important;
    transform:none !important;
  }

  .ag-faq__contentTools .ag-faq__clear:hover,
  .ag-faq__contentTools .ag-faq__clear:focus{
    background:#111827 !important;
    color:#ffffff !important;
    transform:none !important;
    box-shadow:none !important;
  }

  .ag-faq__contentTools .ag-faq__count{
    min-height:96px !important;
    display:flex !important;
    align-items:center !important;
    white-space:nowrap !important;
    border:1px solid rgba(17,24,39,.10) !important;
    border-radius:999px !important;
    background:#ffffff !important;
    color:#5d677b !important;
    padding:0 22px !important;
    box-shadow:none !important;
    font-size:15px !important;
  }

  .ag-faq__contentTools .ag-faq__count strong{
    color:var(--help-red) !important;
  }

  /* HIDE SIDEBAR + QUICK CARDS TO MATCH SECOND IMAGE */
  .ag-faq__quickWrap,
  .ag-faq__nav{
    display:none !important;
  }

  .ag-faq__layout{
    margin-top:26px !important;
    display:block !important;
  }

  .ag-faq__main{
    min-width:0 !important;
  }

  /* FAQ LIST LIKE SECOND IMAGE */
  .mw-faq{
    margin-top:0 !important;
  }

  .mw-faq__section{
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  .mw-faq__section::before{
    display:none !important;
  }

  /* hide big section headings so the rows dominate like the second image */
  .mw-faq__sectionHeader{
    display:none !important;
  }

  .mw-faq__group{
    display:grid !important;
    gap:0 !important;
  }

  .mw-faq__item{
    position:relative !important;
    background:transparent !important;
    border-bottom:1px solid var(--help-line) !important;
    transition:none !important;
  }

  .mw-faq__item:first-child{
    border-top:1px solid var(--help-line) !important;
  }

  .mw-faq__item:hover,
  .mw-faq__item.is-open{
    background:#fffafa !important;
  }

  .mw-faq__item::before{
    display:none !important;
  }

  .mw-faq__btn{
    width:100% !important;
    min-height:150px !important;
    padding:30px 0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 64px !important;
    gap:26px !important;
    border:0 !important;
    background:transparent !important;
    text-align:left !important;
    align-items:center !important;
  }

  .mw-faq__q{
    display:grid !important;
    grid-template-columns:72px minmax(0,1fr) !important;
    align-items:start !important;
    gap:20px !important;
    color:var(--help-ink) !important;
    font-size:18px !important;
    line-height:1.45 !important;
    font-weight:760 !important;
  }

  .mw-faq__q strong{
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    display:block !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:var(--help-red) !important;
    font-size:30px !important;
    line-height:1 !important;
    font-weight:850 !important;
    padding-top:8px !important;
  }

  .mw-faq__q span{
    display:block !important;
  }

  .mw-faq__icon{
    width:48px !important;
    height:48px !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
    background:#ffffff !important;
    color:var(--help-red) !important;
    border:1px solid rgba(17,24,39,.14) !important;
    box-shadow:none !important;
  }

  .mw-faq__btn[aria-expanded="true"] .mw-faq__icon{
    background:var(--help-red) !important;
    color:#ffffff !important;
    border-color:var(--help-red) !important;
  }

  .mw-faq__panelInner{
    padding:0 72px 24px 92px !important;
    color:#617084 !important;
    font-size:15px !important;
    line-height:1.8 !important;
  }

  .mw-faq__a{
    max-width:980px !important;
    margin:0 !important;
  }

  .mw-faq__note{
    max-width:980px !important;
    margin-top:12px !important;
    border:0 !important;
    border-left:4px solid var(--help-red) !important;
    border-radius:0 !important;
    background:#fff6f7 !important;
    color:#617084 !important;
    box-shadow:none !important;
  }

  .ag-faq__empty{
    border:1px dashed var(--help-line) !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:#ffffff !important;
  }

  .ag-faq__support{
    margin-top:38px !important;
    border:0 !important;
    border-radius:30px !important;
    padding:32px 36px !important;
    background:linear-gradient(135deg,var(--help-red),var(--help-red-dark)) !important;
    color:#ffffff !important;
    box-shadow:none !important;
  }

  .ag-faq__support::before{
    display:none !important;
  }

  .ag-faq__supportBtn{
    border-radius:999px !important;
    background:#ffffff !important;
    color:var(--help-red) !important;
    box-shadow:none !important;
  }

  .ag-faq__supportBtn:hover,
  .ag-faq__supportBtn:focus{
    background:#111827 !important;
    color:#ffffff !important;
    transform:none !important;
  }

  @media (max-width:900px){
    .ag-faq__hero{
      min-height:auto !important;
    }

    .ag-faq__heroContent{
      width:94% !important;
      padding:74px 0 102px !important;
    }

    .mw-legal__h1{
      font-size:clamp(38px,11vw,58px) !important;
    }

    .mw-legal__p{
      font-size:15.5px !important;
      line-height:1.82 !important;
    }

    .ag-faq__contentTools{
      grid-template-columns:1fr !important;
      margin-top:26px !important;
    }

    .ag-faq__contentTools .ag-faq__count{
      min-height:52px !important;
      width:max-content !important;
      max-width:100% !important;
      padding:0 16px !important;
      border-radius:999px !important;
    }

    .mw-faq__btn{
      min-height:120px !important;
      grid-template-columns:minmax(0,1fr) 50px !important;
      gap:16px !important;
      padding:24px 0 !important;
    }

    .mw-faq__q{
      grid-template-columns:50px minmax(0,1fr) !important;
      gap:14px !important;
      font-size:16px !important;
    }

    .mw-faq__q strong{
      font-size:24px !important;
      padding-top:6px !important;
    }

    .mw-faq__icon{
      width:42px !important;
      height:42px !important;
    }

    .mw-faq__panelInner{
      padding:0 0 22px 64px !important;
    }
  }

  @media (max-width:560px){
    .mw-legal__container.ag-faq{
      width:94% !important;
    }

    .ag-faq__contentTools .ag-faq__search{
      grid-template-columns:72px minmax(0,1fr) !important;
      border-radius:28px !important;
      padding:8px !important;
    }

    .ag-faq__contentTools .ag-faq__searchIcon{
      width:44px !important;
      height:44px !important;
      margin-left:4px !important;
    }

    .ag-faq__contentTools .ag-faq__search input{
      height:52px !important;
      padding:0 10px !important;
      font-size:15px !important;
    }

    .ag-faq__contentTools .ag-faq__clear{
      grid-column:1 / -1 !important;
      width:100% !important;
      min-height:50px !important;
      margin-top:8px !important;
      border-radius:999px !important;
    }

    .mw-faq__btn{
      grid-template-columns:minmax(0,1fr) 44px !important;
    }

    .mw-faq__q{
      grid-template-columns:44px minmax(0,1fr) !important;
      gap:12px !important;
    }

    .mw-faq__q strong{
      font-size:22px !important;
    }

    .mw-faq__panelInner{
      padding-left:56px !important;
    }
  }

  @media (max-width:420px){
    .mw-faq__panelInner{
      padding-left:0 !important;
    }
  }


  /* =========================================================
     FINAL MATCH: HELP PAGE STYLE
     Hero like first reference + content list like second reference
     Design focused; existing IDs and accordion elements kept
  ========================================================= */

  :root{
    --help-red:#c31f26;
    --help-red-dark:#99141b;
    --help-ink:#061735;
    --help-text:#5c6780;
    --help-muted:#8993a6;
    --help-line:rgba(17,24,39,.12);
  }

  .mw-legal{
    background:#ffffff !important;
    color:var(--help-ink) !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
  }

  .mw-legal::before{
    display:none !important;
  }

  .mw-legal__container.ag-faq{
    width:min(1360px,92%) !important;
    max-width:none !important;
    padding:0 0 34px !important;
    margin:0 auto !important;
  }

  /* HERO - dark image style */
  .ag-faq__hero{
    position:relative !important;
    margin:0 calc(50% - 50vw) !important;
    min-height:700px !important;
    display:flex !important;
    align-items:center !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:0 !important;
    padding:0 !important;
    background:
      linear-gradient(90deg,rgba(10,18,36,.93) 0%,rgba(17,26,45,.80) 43%,rgba(33,18,23,.34) 100%),
      url('asset/images/web/about-banner.jpeg') center/cover no-repeat !important;
    box-shadow:none !important;
    isolation:isolate !important;
  }

  .ag-faq__hero::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:8px !important;
    height:auto !important;
    border-radius:0 !important;
    transform:none !important;
    background:var(--help-red) !important;
    box-shadow:none !important;
    opacity:1 !important;
    z-index:1 !important;
  }

  .ag-faq__hero::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:115px !important;
    width:auto !important;
    border:0 !important;
    border-radius:0 !important;
    background:linear-gradient(180deg,rgba(255,255,255,0),#ffffff) !important;
    box-shadow:none !important;
    z-index:1 !important;
    pointer-events:none !important;
  }

  .ag-faq__heroContent{
    position:relative !important;
    z-index:2 !important;
    width:min(1360px,92%) !important;
    max-width:880px !important;
    margin:0 auto !important;
    padding:92px 0 122px !important;
  }

  .ag-faq__badge{
    display:inline-flex !important;
    align-items:center !important;
    gap:12px !important;
    margin:0 0 26px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#ffffff !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:850 !important;
    letter-spacing:.18em !important;
    text-transform:uppercase !important;
  }

  .ag-faq__badge::before{
    content:"" !important;
    width:46px !important;
    height:1px !important;
    background:#ffffff !important;
    opacity:.92 !important;
  }

  .ag-faq__badge i{
    display:none !important;
  }

  .mw-legal__h1{
    max-width:880px !important;
    margin:0 !important;
    color:#ffffff !important;
    font-size:clamp(52px,6vw,92px) !important;
    line-height:.95 !important;
    letter-spacing:-.078em !important;
    font-weight:820 !important;
    text-shadow:0 16px 40px rgba(0,0,0,.18) !important;
  }

  .mw-legal__p{
    max-width:820px !important;
    margin:30px 0 0 !important;
    color:rgba(255,255,255,.88) !important;
    font-size:17px !important;
    line-height:1.9 !important;
  }

  /* Search below hero exactly like Help page content */
  .ag-faq__contentTools{
    margin:40px 0 0 !important;
    display:block !important;
  }

  .ag-faq__contentTools .ag-faq__search{
    width:100% !important;
    min-height:96px !important;
    display:grid !important;
    grid-template-columns:94px minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:0 !important;
    border:1px solid rgba(17,24,39,.10) !important;
    border-radius:999px !important;
    padding:8px 10px !important;
    background:#ffffff !important;
    box-shadow:0 18px 50px rgba(17,24,39,.055) !important;
    backdrop-filter:none !important;
  }

  .ag-faq__contentTools .ag-faq__searchIcon{
    width:54px !important;
    height:54px !important;
    margin-left:8px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    border:0 !important;
    background:#fff3f4 !important;
    color:var(--help-red) !important;
    box-shadow:none !important;
  }

  .ag-faq__contentTools .ag-faq__search input{
    height:70px !important;
    padding:0 18px !important;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    color:#1f2b46 !important;
    font-size:18px !important;
    font-weight:500 !important;
  }

  .ag-faq__contentTools .ag-faq__search input::placeholder{
    color:#8f99ab !important;
  }

  .ag-faq__contentTools .ag-faq__clear{
    min-height:66px !important;
    min-width:152px !important;
    border:0 !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,var(--help-red),var(--help-red-dark)) !important;
    color:#ffffff !important;
    padding:0 30px !important;
    font-size:16px !important;
    font-weight:850 !important;
    box-shadow:none !important;
    transform:none !important;
  }

  .ag-faq__contentTools .ag-faq__clear:hover,
  .ag-faq__contentTools .ag-faq__clear:focus{
    background:#111827 !important;
    color:#ffffff !important;
    transform:none !important;
    box-shadow:none !important;
  }

  .ag-faq__contentTools .ag-faq__count{
    display:none !important;
  }

  /* Hide sidebar/category cards so content becomes like Help article list */
  .ag-faq__quickWrap,
  .ag-faq__nav{
    display:none !important;
  }

  .ag-faq__layout{
    margin-top:44px !important;
    display:block !important;
  }

  .ag-faq__main{
    min-width:0 !important;
    counter-reset:faq-row !important;
  }

  /* Show all sections in list style */
  .mw-faq__section,
  .mw-faq__section.is-hidden-category{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  .mw-faq__section::before{
    display:none !important;
  }

  .mw-faq__sectionHeader{
    display:none !important;
  }

  .mw-faq__group{
    display:grid !important;
    gap:0 !important;
  }

  .mw-faq__item{
    position:relative !important;
    counter-increment:faq-row !important;
    background:transparent !important;
    border-bottom:1px solid var(--help-line) !important;
    transition:none !important;
  }

  .mw-faq__section:first-of-type .mw-faq__item:first-child{
    border-top:1px solid var(--help-line) !important;
  }

  .mw-faq__item:hover,
  .mw-faq__item.is-open{
    background:#fffafa !important;
  }

  .mw-faq__item::before{
    display:none !important;
  }

  .mw-faq__btn{
    width:100% !important;
    min-height:150px !important;
    padding:30px 0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 64px !important;
    gap:26px !important;
    border:0 !important;
    background:transparent !important;
    text-align:left !important;
    align-items:center !important;
  }

  .mw-faq__q{
    position:relative !important;
    display:grid !important;
    grid-template-columns:72px minmax(0,1fr) !important;
    align-items:start !important;
    gap:18px !important;
    padding-top:26px !important;
    color:var(--help-ink) !important;
    font-size:26px !important;
    line-height:1.22 !important;
    font-weight:820 !important;
    letter-spacing:-.04em !important;
  }

  .mw-faq__q strong{
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    display:block !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:transparent !important;
    font-size:0 !important;
    line-height:1 !important;
    font-weight:850 !important;
    padding-top:3px !important;
  }

  .mw-faq__q strong::before{
    content:counter(faq-row, decimal-leading-zero) !important;
    color:var(--help-red) !important;
    font-size:15px !important;
    line-height:1 !important;
    font-weight:850 !important;
    letter-spacing:.04em !important;
  }

  .mw-faq__q::before{
    content:"FAQ" !important;
    position:absolute !important;
    left:90px !important;
    top:0 !important;
    color:var(--help-red) !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:700 !important;
    letter-spacing:.12em !important;
    text-transform:uppercase !important;
  }

  #faq-orders .mw-faq__q::before{ content:"▦  ORDERS" !important; }
  #faq-gifts .mw-faq__q::before{ content:"▦  GIFT SERVICES" !important; }
  #faq-delivery .mw-faq__q::before{ content:"▦  DELIVERY" !important; }
  #faq-payments .mw-faq__q::before{ content:"▦  PAYMENTS" !important; }
  #faq-returns .mw-faq__q::before{ content:"▦  RETURNS" !important; }
  #faq-corporate .mw-faq__q::before{ content:"▦  CORPORATE" !important; }
  #faq-account .mw-faq__q::before{ content:"▦  ACCOUNT" !important; }

  .mw-faq__preview{
    grid-column:2 / 3 !important;
    display:block !important;
    margin-top:10px !important;
    color:#5f6c82 !important;
    font-size:16px !important;
    line-height:1.55 !important;
    font-weight:400 !important;
    letter-spacing:0 !important;
    max-width:760px !important;
    display:-webkit-box !important;
    -webkit-line-clamp:1 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }

  .mw-faq__icon{
    width:48px !important;
    height:48px !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
    background:#ffffff !important;
    color:var(--help-red) !important;
    border:1px solid rgba(17,24,39,.14) !important;
    box-shadow:none !important;
  }

  .mw-faq__btn[aria-expanded="true"] .mw-faq__icon{
    background:var(--help-red) !important;
    color:#ffffff !important;
    border-color:var(--help-red) !important;
  }

  .mw-faq__panelInner{
    padding:0 72px 26px 90px !important;
    color:#617084 !important;
    font-size:15px !important;
    line-height:1.8 !important;
  }

  .mw-faq__a{
    max-width:980px !important;
    margin:0 !important;
  }

  .mw-faq__note{
    max-width:980px !important;
    margin-top:12px !important;
    border:0 !important;
    border-left:4px solid var(--help-red) !important;
    border-radius:0 !important;
    background:#fff6f7 !important;
    color:#617084 !important;
    box-shadow:none !important;
  }

  .ag-faq__empty{
    border:1px dashed var(--help-line) !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:#ffffff !important;
  }

  .ag-faq__support{
    margin-top:38px !important;
    border:0 !important;
    border-radius:30px !important;
    padding:32px 36px !important;
    background:linear-gradient(135deg,var(--help-red),var(--help-red-dark)) !important;
    color:#ffffff !important;
    box-shadow:none !important;
  }

  .ag-faq__support::before{
    display:none !important;
  }

  .ag-faq__supportBtn{
    border-radius:999px !important;
    background:#ffffff !important;
    color:var(--help-red) !important;
    box-shadow:none !important;
  }

  .ag-faq__supportBtn:hover,
  .ag-faq__supportBtn:focus{
    background:#111827 !important;
    color:#ffffff !important;
    transform:none !important;
  }

  @media (max-width:900px){
    .ag-faq__hero{
      min-height:auto !important;
    }

    .ag-faq__heroContent{
      width:94% !important;
      padding:74px 0 102px !important;
    }

    .mw-legal__h1{
      font-size:clamp(38px,11vw,58px) !important;
    }

    .mw-legal__p{
      font-size:15.5px !important;
      line-height:1.82 !important;
    }

    .ag-faq__contentTools{
      margin-top:26px !important;
    }

    .mw-faq__btn{
      min-height:120px !important;
      grid-template-columns:minmax(0,1fr) 50px !important;
      gap:16px !important;
      padding:24px 0 !important;
    }

    .mw-faq__q{
      grid-template-columns:50px minmax(0,1fr) !important;
      gap:14px !important;
      font-size:21px !important;
    }

    .mw-faq__q::before{
      left:64px !important;
    }

    .mw-faq__preview{
      font-size:15px !important;
    }

    .mw-faq__icon{
      width:42px !important;
      height:42px !important;
    }

    .mw-faq__panelInner{
      padding:0 0 22px 64px !important;
    }
  }

  @media (max-width:560px){
    .mw-legal__container.ag-faq{
      width:94% !important;
    }

    .ag-faq__contentTools .ag-faq__search{
      grid-template-columns:72px minmax(0,1fr) !important;
      border-radius:28px !important;
      padding:8px !important;
      min-height:auto !important;
    }

    .ag-faq__contentTools .ag-faq__searchIcon{
      width:44px !important;
      height:44px !important;
      margin-left:4px !important;
    }

    .ag-faq__contentTools .ag-faq__search input{
      height:52px !important;
      padding:0 10px !important;
      font-size:15px !important;
    }

    .ag-faq__contentTools .ag-faq__clear{
      grid-column:1 / -1 !important;
      width:100% !important;
      min-height:50px !important;
      margin-top:8px !important;
      border-radius:999px !important;
    }

    .mw-faq__btn{
      grid-template-columns:minmax(0,1fr) 44px !important;
    }

    .mw-faq__q{
      grid-template-columns:44px minmax(0,1fr) !important;
      gap:12px !important;
      font-size:19px !important;
    }

    .mw-faq__q::before{
      left:56px !important;
    }

    .mw-faq__panelInner{
      padding-left:56px !important;
    }
  }

  @media (max-width:420px){
    .mw-faq__panelInner{
      padding-left:0 !important;
    }
  }


  /* =========================================================
     HERO ONLY PATCH
     Make hero match the provided reference more closely
     Do not change the rest of the page
  ========================================================= */
  .ag-faq__hero{
    position:relative !important;
    margin:0 calc(50% - 50vw) !important;
    min-height:700px !important;
    display:flex !important;
    align-items:center !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:0 !important;
    padding:0 !important;
    background:
      linear-gradient(90deg, rgba(10,18,35,.94) 0%, rgba(17,26,45,.82) 42%, rgba(43,19,28,.32) 100%),
      url('asset/images/web/about-banner.jpeg') center/cover no-repeat !important;
    box-shadow:none !important;
    isolation:isolate !important;
  }

  .ag-faq__hero::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:8px !important;
    background:var(--help-red, #c31f26) !important;
    z-index:1 !important;
    opacity:1 !important;
  }

  .ag-faq__hero::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:120px !important;
    background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.96)) !important;
    z-index:1 !important;
    pointer-events:none !important;
  }

  .ag-faq__heroContent{
    position:relative !important;
    z-index:2 !important;
    width:min(1360px,92%) !important;
    max-width:900px !important;
    margin:0 auto !important;
    padding:95px 0 122px !important;
  }

  .ag-faq__badge{
    display:inline-flex !important;
    align-items:center !important;
    gap:14px !important;
    margin:0 0 28px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#ffffff !important;
    box-shadow:none !important;
    text-transform:uppercase !important;
    font-size:12px !important;
    font-weight:850 !important;
    letter-spacing:.18em !important;
    line-height:1 !important;
  }

  .ag-faq__badge::before{
    content:"" !important;
    width:46px !important;
    height:1px !important;
    background:#ffffff !important;
    opacity:.92 !important;
  }

  .ag-faq__badge i{
    display:none !important;
  }

  .mw-legal__h1{
    max-width:880px !important;
    margin:0 !important;
    color:#ffffff !important;
    font-size:clamp(54px, 6.1vw, 92px) !important;
    line-height:.94 !important;
    letter-spacing:-.08em !important;
    font-weight:820 !important;
    text-shadow:0 18px 40px rgba(0,0,0,.18) !important;
  }

  .mw-legal__p{
    max-width:820px !important;
    margin:30px 0 0 !important;
    color:rgba(255,255,255,.88) !important;
    font-size:17px !important;
    line-height:1.9 !important;
    font-weight:400 !important;
  }

  @media (max-width:900px){
    .ag-faq__hero{
      min-height:auto !important;
    }

    .ag-faq__heroContent{
      width:94% !important;
      padding:78px 0 104px !important;
    }

    .mw-legal__h1{
      font-size:clamp(38px, 11vw, 60px) !important;
    }

    .mw-legal__p{
      font-size:15.5px !important;
      line-height:1.82 !important;
    }
  }


  /* HERO ONLY FINAL FIX - do not affect any other section */
  .ag-faq__hero{
    position:relative !important;
    margin:0 calc(50% - 50vw) !important;
    min-height:700px !important;
    display:flex !important;
    align-items:center !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:0 !important;
    padding:0 !important;
   background:
      linear-gradient(90deg, rgba(238, 27, 55, 0.94) 0%, rgba(45, 18, 24, 0.8) 43%, rgba(35,18,24,.32) 100%),
      url('asset/images/web/shopping-xperience.jpeg') center center  !important;
    box-shadow:none !important;
    isolation:isolate !important;
  }

  .ag-faq__hero::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:8px !important;
    height:auto !important;
    border-radius:0 !important;
    transform:none !important;
    background:#c31f26 !important;
    box-shadow:none !important;
    opacity:1 !important;
    z-index:1 !important;
  }

  .ag-faq__hero::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:0 !important;
    width:auto !important;
    height:115px !important;
    border:0 !important;
    border-radius:0 !important;
    transform:none !important;
    background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.92)) !important;
    box-shadow:none !important;
    opacity:1 !important;
    z-index:1 !important;
    pointer-events:none !important;
  }

  .ag-faq__heroContent{
    position:relative !important;
    z-index:2 !important;
    width:min(1360px,92%) !important;
    max-width:880px !important;
    margin:0 auto !important;
    padding:96px 0 125px !important;
  }

  .ag-faq__badge{
    display:inline-flex !important;
    align-items:center !important;
    gap:12px !important;
    margin:0 0 28px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#fff !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:850 !important;
    letter-spacing:.18em !important;
    text-transform:uppercase !important;
  }

  .ag-faq__badge::before{
    content:"" !important;
    width:46px !important;
    height:1px !important;
    background:#fff !important;
    opacity:.92 !important;
  }

  .ag-faq__badge i{
    display:none !important;
  }

  .ag-faq__hero .mw-legal__h1{
    max-width:880px !important;
    margin:0 !important;
    color:#fff !important;
    font-size:clamp(94px,.1vw,92px) !important;
    line-height:.94 !important;
    letter-spacing:.08em !important;
    font-weight:820 !important;
    text-shadow:0 18px 40px rgba(0,0,0,.18) !important;
  }

  .ag-faq__hero .mw-legal__p{
    max-width:820px !important;
    margin:30px 0 0 !important;
    color:rgba(255,255,255,.88) !important;
    font-size:17px !important;
    line-height:1.9 !important;
    font-weight:400 !important;
  }

  @media (max-width:900px){
    .ag-faq__hero{
      min-height:auto !important;
    }

    .ag-faq__heroContent{
      width:94% !important;
      padding:78px 0 104px !important;
    }

    .ag-faq__hero .mw-legal__h1{
      font-size:clamp(38px,11vw,60px) !important;
    }

    .ag-faq__hero .mw-legal__p{
      font-size:15.5px !important;
      line-height:1.82 !important;
    }
  }


  /* Remove bottom white/fade overlay from FAQ hero only */
  .ag-faq__hero::after{
    display:none !important;
    content:none !important;
    background:none !important;
    height:0 !important;
  }



  /* =========================================================
     FINAL ALIGNMENT FIX
     Hero text, search bar, and FAQ content start from same left line
     Added for marked left alignment area
  ========================================================= */
  :root{
    --faq-page-left: clamp(18px, 8.7vw, 164px);
  }

  .mw-legal__container.ag-faq,
  .ag-faq__heroContent{
    width: calc(100vw - (var(--faq-page-left) * 2)) !important;
    max-width: 1552px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ag-faq__heroContent{
    max-width: 1552px !important;
  }

  .ag-faq__hero .mw-legal__h1,
  .ag-faq__hero .mw-legal__p{
    max-width: 880px !important;
  }

  .ag-faq__contentTools,
  .ag-faq__layout{
    width: 100% !important;
  }

  @media (max-width:900px){
    :root{
      --faq-page-left: 3%;
    }

    .mw-legal__container.ag-faq,
    .ag-faq__heroContent{
      width: 94% !important;
      max-width: none !important;
    }
  }


/* =========================================================
   Moved from: Pasted code (8)(6).html
   ========================================================= */
:root {
    --ala-primary: #9f1021;
    --ala-primary-dark: #6d0714;
    --ala-gold: #d7a642;
    --ala-ink: #171014;
    --ala-muted: #71676b;
    --ala-soft: #fff7f4;
    --ala-border: rgba(159, 16, 33, .13);
    --ala-shadow: 0 24px 65px rgba(73, 12, 22, .12);
  }

  .ala-page,
  .ala-page * {
    box-sizing: border-box;
  }

  .ala-page {
    width: 100%;
    background:
      radial-gradient(circle at 12% 8%, rgba(215,166,66,.18), transparent 28%),
      radial-gradient(circle at 90% 16%, rgba(159,16,33,.10), transparent 30%),
      linear-gradient(180deg, #fffaf7 0%, #ffffff 42%, #fff7f4 100%);
    color: var(--ala-ink);
    padding: 54px 0 70px;
    font-family: inherit;
  }

  .ala-container {
    width: min(75%, 1180px);
    margin: 0 auto;
  }

  .ala-hero {
    position: relative;
    overflow: hidden;
    border-radius: 34px;
    padding: clamp(34px, 5vw, 64px);
    color: #fff;
    background:
      linear-gradient(135deg, rgba(91,7,17,.98), rgba(159,16,33,.95) 56%, rgba(215,166,66,.88));
    box-shadow: var(--ala-shadow);
  }

  .ala-hero::before {
    content: "";
    position: absolute;
    right: -80px;
    top: -90px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255,255,255,.13);
  }

  .ala-hero::after {
    content: "";
    position: absolute;
    left: -70px;
    bottom: -90px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
  }

  .ala-hero__content {
    position: relative;
    z-index: 2;
    max-width: 850px;
  }

  .ala-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff6e8;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .ala-kicker span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ala-gold);
    box-shadow: 0 0 0 5px rgba(215,166,66,.20);
  }

  .ala-title {
    margin: 22px 0 16px;
    font-size: clamp(34px, 5vw, 60px);
    line-height: 1.03;
    letter-spacing: -.04em;
    font-weight: 850;
  }

  .ala-lead {
    margin: 0;
    max-width: 820px;
    color: rgba(255,255,255,.88);
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.85;
  }

  .ala-layout {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 28px;
  }

  .ala-content {
    display: grid;
    gap: 18px;
  }

  .ala-section {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ala-border);
    border-radius: 26px;
    background: rgba(255,255,255,.93);
    box-shadow: 0 16px 44px rgba(73,12,22,.07);
    padding: clamp(22px, 3vw, 34px);
  }

  .ala-section--accent {
    background:
      linear-gradient(135deg, #ffffff 0%, #fff8f5 100%);
  }

  .ala-section__top {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 12px;
  }

  .ala-number {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ala-primary), var(--ala-primary-dark));
    color: #fff;
    font-size: 14px;
    font-weight: 850;
    box-shadow: 0 12px 24px rgba(159,16,33,.20);
    flex: 0 0 auto;
  }

  .ala-section h2 {
    margin: 0;
    color: var(--ala-primary-dark);
    font-size: clamp(21px, 2.3vw, 29px);
    line-height: 1.18;
    letter-spacing: -.02em;
    font-weight: 850;
  }

  .ala-section p {
    margin: 12px 0 0;
    color: var(--ala-muted);
    line-height: 1.85;
    font-size: 15.5px;
  }

  .ala-list {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
    display: grid;
    gap: 11px;
  }

  .ala-list li {
    position: relative;
    padding: 13px 14px 13px 44px;
    border-radius: 16px;
    background: #fff9f6;
    border: 1px solid rgba(159,16,33,.09);
    color: #4c4245;
    line-height: 1.7;
    font-size: 15px;
  }

  .ala-list li::before {
    content: "✓";
    position: absolute;
    left: 14px;
    top: 14px;
    width: 20px;
    height: 20px;
    border-radius: 8px;
    background: rgba(159,16,33,.10);
    color: var(--ala-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
  }

  /* New Different Contact Design */
  .ala-contact-clean {
    padding: 0;
    background: #fff;
  }

  .ala-contact-clean__hero {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 4vw, 42px);
    background:
      linear-gradient(135deg, #6d0714 0%, #9f1021 58%, #d7a642 100%);
    color: #fff;
  }

  .ala-contact-clean__hero::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -70px;
    top: -80px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
  }

  .ala-contact-clean__hero::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    left: -55px;
    bottom: -65px;
    border-radius: 50%;
    background: rgba(255,255,255,.09);
  }

  .ala-contact-clean__content {
    position: relative;
    z-index: 2;
    max-width: 780px;
  }

  .ala-contact-label {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff7e6;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .ala-contact-clean h2 {
    margin: 14px 0 10px;
    color: #fff;
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.15;
    font-weight: 850;
    letter-spacing: -.03em;
  }

  .ala-contact-clean__hero p {
    margin: 0;
    max-width: 760px;
    color: rgba(255,255,255,.86);
    line-height: 1.85;
    font-size: 15.5px;
  }

  .ala-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
  }

  .ala-contact-action {
    min-height: 46px;
    padding: 0 19px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 850;
    transition: .2s ease;
  }

  .ala-contact-action--white {
    background: #fff;
    color: var(--ala-primary-dark);
  }

  .ala-contact-action--outline {
    color: #fff;
    border: 1px solid rgba(255,255,255,.26);
    background: rgba(255,255,255,.12);
  }

  .ala-contact-action:hover {
    transform: translateY(-2px);
  }

  .ala-contact-clean__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid rgba(159,16,33,.10);
  }

  .ala-contact-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 26px;
    border-right: 1px solid rgba(159,16,33,.10);
    border-bottom: 1px solid rgba(159,16,33,.10);
    background: #fff;
  }

  .ala-contact-row:nth-child(2n) {
    border-right: 0;
  }

  .ala-contact-row:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .ala-contact-row--wide {
    grid-column: span 2;
    border-right: 0;
    border-bottom: 0;
    background:
      linear-gradient(90deg, #fffaf8 0%, #ffffff 100%);
  }

  .ala-contact-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 16px;
    background: rgba(159,16,33,.08);
    color: var(--ala-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }

  .ala-contact-row small {
    display: block;
    margin-bottom: 6px;
    color: var(--ala-primary);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .ala-contact-row strong,
  .ala-contact-row a,
  .ala-contact-row span {
    display: block;
    color: var(--ala-ink);
    text-decoration: none;
    font-size: 17px;
    line-height: 1.55;
    font-weight: 750;
    word-break: break-word;
  }

  .ala-contact-row a:hover {
    color: var(--ala-primary);
  }

  @media (max-width: 980px) {
    .ala-container {
      width: min(88%, 1180px);
    }
  }

  @media (max-width: 700px) {
    .ala-page {
      padding: 32px 0 48px;
    }

    .ala-container {
      width: min(94%, 1180px);
    }

    .ala-hero {
      border-radius: 24px;
      padding: 28px 20px;
    }

    .ala-section {
      border-radius: 20px;
    }

    .ala-section__top {
      flex-direction: column;
    }

    .ala-contact-clean__body {
      grid-template-columns: 1fr;
    }

    .ala-contact-row,
    .ala-contact-row:nth-child(2n),
    .ala-contact-row:nth-last-child(-n + 2) {
      border-right: 0;
      border-bottom: 1px solid rgba(159,16,33,.10);
    }

    .ala-contact-row--wide {
      grid-column: span 1;
      border-bottom: 0;
    }

    .ala-contact-clean__hero {
      padding: 28px 20px;
    }
  }


/* ================= career_apply.html moved inline CSS ================= */
.apply-page {
--career-red: #c31f26;
    --career-red-dark: #99161d;
    --career-title: #17171a;
    --career-text: #475467;
    --career-muted: #667085;
    --career-border: #ebe7e2;
    --career-soft: #fff7f7;
    --career-white: #fff;
    --career-shadow: 0 24px 70px rgba(148,145,140,.12);
}

.apply-page,
  .apply-page * {
box-sizing: border-box;
}

.apply-page {
padding: 34px 0 86px;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--career-text);
    background: linear-gradient(180deg, #fff 0%, #fff9f9 46%, #fff 100%);
}

.apply-page .apply-container {
width: 90%;
    max-width: 1240px;
    margin: 0 auto;
}

.apply-page .svg-icon {
width: 18px;
    height: 18px;
    display: inline-block;
    flex: 0 0 auto;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.apply-page .apply-icon-circle {
width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    border-radius: 50%;
    background: var(--career-red);
    color: #fff;
}

.apply-page .apply-icon-circle .svg-icon {
width: 18px;
    height: 18px;
    stroke-width: 2.8;
}

.apply-page .apply-icon-soft {
width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    border-radius: 11px;
    background: #fff1f1;
    color: var(--career-red);
}

.apply-page .apply-icon-soft .svg-icon {
width: 17px;
    height: 17px;
}

.apply-page .apply-back {
display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 7px 17px 7px 8px;
    border: 1px solid var(--career-border);
    border-radius: 999px;
    color: var(--career-title);
    text-decoration: none;
    font-weight: 850;
    font-size: 14px;
    margin-bottom: 24px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16,24,40,.06);
    transition: .24s ease;
}

.apply-page .apply-back:hover {
color: var(--career-red);
    text-decoration: none;
    transform: translateX(-3px);
    border-color: rgba(195,31,38,.18);
}

.apply-page .apply-hero {
display: grid;
    grid-template-columns: minmax(0,1fr) 340px;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 24px;
}

.apply-page .apply-hero-main {
position: relative;
    overflow: hidden;
    border: 1px solid rgba(195,31,38,.14);
    border-radius: 30px;
    background:
      radial-gradient(circle at 94% 10%, rgba(195,31,38,.15), transparent 30%),
      linear-gradient(135deg,#fff,#fff7f7);
    padding: 38px 40px;
    box-shadow: 0 18px 55px rgba(16,24,40,.06);
}

.apply-page .apply-hero-main::after {
content: "";
    position: absolute;
    right: -70px;
    bottom: -80px;
    width: 210px;
    height: 210px;
    border-radius: 999px;
    border: 28px solid rgba(195,31,38,.055);
    pointer-events: none;
}

.apply-page .apply-kicker {
position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border-radius: 999px;
    background: #fff;
    color: var(--career-red);
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(195,31,38,.08);
}

.apply-page .apply-kicker .svg-icon {
width: 17px;
    height: 17px;
}

.apply-page .apply-hero-main h1 {
position: relative;
    z-index: 2;
    margin: 16px 0 10px;
    color: var(--career-title);
    font-size: clamp(30px,3.4vw,48px);
    line-height: 1.08;
    font-weight: 920;
    letter-spacing: -.045em;
}

.apply-page .apply-hero-main p {
position: relative;
    z-index: 2;
    margin: 0;
    max-width: 760px;
    color: var(--career-muted);
    line-height: 1.8;
    font-size: 15px;
}

.apply-page .apply-cover {
border-radius: 30px;
    overflow: hidden;
    border: 1px solid var(--career-border);
    min-height: 260px;
    background: #fff;
    box-shadow: var(--career-shadow);
}

.apply-page .apply-cover img {
width: 100%;
    height: 100%;
    min-height: 260px;
    display: block;
    object-fit: cover;
}

.apply-page .apply-cover-placeholder {
height: 100%;
    min-height: 260px;
    display: grid;
    place-items: center;
    color: var(--career-red);
    background:
      radial-gradient(circle at 80% 20%, rgba(195,31,38,.16), transparent 32%),
      linear-gradient(135deg,#fff7f7,#fff);
}

.apply-page .apply-cover-placeholder .svg-icon {
width: 64px;
    height: 64px;
    stroke-width: 1.8;
}

.apply-page .apply-shell {
display: grid;
    grid-template-columns: minmax(0,1fr) 340px;
    gap: 24px;
    align-items: start;
}

.apply-page .apply-form-card,
  .apply-page .apply-side-card {
border: 1px solid var(--career-border);
    border-radius: 30px;
    background: #fff;
    box-shadow: var(--career-shadow);
    overflow: hidden;
}

.apply-page .apply-form-head {
padding: 26px 30px;
    border-bottom: 1px solid var(--career-border);
    background:
      radial-gradient(circle at 96% 0%, rgba(195,31,38,.08), transparent 30%),
      #fff;
}

.apply-page .apply-form-head h2 {
display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 6px;
    color: var(--career-title);
    font-size: 24px;
    font-weight: 920;
    letter-spacing: -.025em;
}

.apply-page .apply-form-head p {
margin: 0;
    color: var(--career-muted);
    line-height: 1.7;
    font-size: 14px;
}

.apply-page .apply-form {
padding: 30px;
}

.apply-page .apply-section {
margin-bottom: 30px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--career-border);
}

.apply-page .apply-section:last-child {
margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.apply-page .apply-section-title {
display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    color: var(--career-title);
    font-size: 18px;
    font-weight: 920;
}

.apply-page .apply-grid {
display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px;
}

.apply-page .apply-field {
display: grid;
    gap: 8px;
}

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

.apply-page .apply-field label {
color: var(--career-title);
    font-size: 13px;
    font-weight: 850;
}

.apply-page .apply-field input,
  .apply-page .apply-field select,
  .apply-page .apply-field textarea {
width: 100%;
    border: 1px solid var(--career-border);
    border-radius: 14px;
    min-height: 46px;
    padding: 10px 13px;
    outline: none;
    color: var(--career-title);
    font-size: 14px;
    background: #fff;
}

.apply-page .apply-field textarea {
min-height: 112px;
    resize: vertical;
    line-height: 1.7;
}

.apply-page .apply-field input:focus,
  .apply-page .apply-field select:focus,
  .apply-page .apply-field textarea:focus {
border-color: var(--career-red);
    box-shadow: 0 0 0 .16rem rgba(195,31,38,.12);
}

.apply-page .apply-help {
color: var(--career-muted);
    font-size: 12px;
    line-height: 1.5;
}

.apply-page .apply-actions {
display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.apply-page .apply-submit {
display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    min-height: 52px;
    padding: 0 28px;
    border-radius: 999px;
    background: var(--career-red);
    color: #fff;
    font-size: 14px;
    font-weight: 950;
    cursor: pointer;
    transition: .24s ease;
}

.apply-page .apply-submit:hover {
background: var(--career-red-dark);
    transform: translateY(-2px);
}

.apply-page .apply-submit:disabled {
opacity: .75;
    cursor: not-allowed;
    transform: none;
}

.apply-page .apply-alert {
display: none;
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;
}

.apply-page .apply-alert.success {
display: block;
    background: #ecfdf3;
    color: #027a48;
    border: 1px solid #abefc6;
}

.apply-page .apply-alert.error {
display: block;
    background: #fff1f3;
    color: #b42318;
    border: 1px solid #fecdd3;
}

.apply-page .apply-side {
position: sticky;
    top: 22px;
    display: grid;
    gap: 18px;
}

.apply-page .apply-side-card {
padding: 22px;
}

.apply-page .apply-side-card h3 {
display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 13px;
    color: var(--career-title);
    font-size: 19px;
    font-weight: 920;
}

.apply-page .apply-info {
display: grid;
    gap: 11px;
}

.apply-page .apply-info span {
display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
    border: 1px solid var(--career-border);
    border-radius: 16px;
    background: #fbfaf8;
    color: #344054;
    font-size: 13px;
    font-weight: 800;
}

.apply-page .apply-empty {
text-align: center;
    padding: 60px 20px;
    border: 1px dashed rgba(195,31,38,.28);
    border-radius: 28px;
    background: #fff;
}

.apply-page .apply-empty-icon {
width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    border-radius: 26px;
    background: #fff1f1;
    color: var(--career-red);
}

.apply-page .apply-empty-icon .svg-icon {
width: 42px;
    height: 42px;
}

.apply-page .apply-empty h2 {
margin: 0 0 8px;
    color: var(--career-title);
    font-size: 26px;
    font-weight: 920;
}

.apply-page .apply-empty p {
margin: 0;
    color: var(--career-muted);
}

@media (max-width:1050px) {
.apply-page .apply-hero,
  .apply-page .apply-shell {
grid-template-columns: 1fr;
}

.apply-page .apply-side {
position: static;
}
}

@media (max-width:700px) {
.apply-page .apply-container {
width: 94%;
}

.apply-page .apply-hero-main,
  .apply-page .apply-form {
padding: 24px 20px;
}

.apply-page .apply-grid {
grid-template-columns: 1fr;
}

.apply-page .apply-actions {
justify-content: stretch;
}

.apply-page .apply-submit {
width: 100%;
}
}


/* ================= career_details.html moved inline CSS ================= */
.career-detail {
--career-primary: #b91c1c;
    --career-primary-dark: #7f1212;
    --career-gold: #d8a13d;
    --career-ink: #101828;
    --career-text: #475467;
    --career-muted: #667085;
    --career-line: #eaecf0;
    --career-soft: #fff7f2;
    --career-white: #ffffff;
    --career-shadow: 0 24px 60px rgba(177, 180, 185, 0.1);
    --career-shadow-soft: 0 14px 34px rgba(116, 119, 126, 0.07);
}

.career-detail,
  .career-detail * {
box-sizing: border-box;
}

.career-detail {
position: relative;
    overflow: hidden;
    padding: 42px 0 92px;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--career-text);
    background:
      radial-gradient(circle at 4% 6%, rgba(185, 28, 28, 0.10), transparent 28%),
      radial-gradient(circle at 94% 10%, rgba(216, 161, 61, 0.14), transparent 26%),
      linear-gradient(180deg, #ffffff 0%, #fffaf7 48%, #ffffff 100%);
}

.career-detail::before {
content: "";
    position: absolute;
    left: -180px;
    bottom: 120px;
    width: 360px;
    height: 360px;
    border-radius: 999px;
    border: 55px solid rgba(185, 28, 28, 0.045);
    pointer-events: none;
}

.career-detail .career-container {
width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.career-detail .svg-icon {
width: 19px;
    height: 19px;
    display: inline-block;
    flex: 0 0 auto;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.career-detail .icon-box {
width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    border-radius: 14px;
    background: #fff1f1;
    color: var(--career-primary);
}

.career-detail .small-icon-box {
width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    border-radius: 10px;
    background: #fff1f1;
    color: var(--career-primary);
}

.career-detail .career-back {
display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 7px 20px 7px 8px;
    margin-bottom: 24px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--career-line);
    color: var(--career-ink);
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.075);
    transition: 0.24s ease;
}

.career-detail .career-back:hover {
color: var(--career-primary);
    text-decoration: none;
    transform: translateX(-3px);
    border-color: rgba(185, 28, 28, 0.18);
}

.career-detail .career-back-icon {
width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    border-radius: 50%;
    background: var(--career-primary);
    color: #ffffff;
}

.career-detail .career-back-icon svg {
width: 18px;
    height: 18px;
    display: block;
    stroke: #ffffff;
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.career-detail .career-shell {
display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 26px;
    align-items: start;
}

.career-detail .career-main {
overflow: hidden;
    border-radius: 34px;
    background: #ffffff;
    border: 1px solid rgba(234, 236, 240, 0.96);
    box-shadow: var(--career-shadow-soft);
}

.career-detail .career-cover {
position: relative;
    height: 420px;
    overflow: hidden;
    background: linear-gradient(135deg, #fff0f0, #fff8ef);
}

.career-detail .career-cover::after {
content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 48%;
    background: linear-gradient(180deg, transparent, rgba(16, 24, 40, 0.38));
    pointer-events: none;
}

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

.career-detail .career-cover-placeholder {
height: 100%;
    display: grid;
    place-items: center;
    color: var(--career-primary);
    background:
      radial-gradient(circle at 70% 24%, rgba(185, 28, 28, 0.16), transparent 36%),
      linear-gradient(135deg, #fff7f7, #ffffff);
}

.career-detail .career-cover-placeholder .svg-icon {
width: 76px;
    height: 76px;
    stroke-width: 1.7;
}

.career-detail .career-head {
position: relative;
    overflow: hidden;
    padding: 44px 48px;
    background:
      radial-gradient(circle at 96% 0%, rgba(216, 161, 61, 0.16), transparent 28%),
      linear-gradient(135deg, #ffffff, #fff7f7);
    border-bottom: 1px solid var(--career-line);
}

.career-detail .career-head::before {
content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    border: 30px solid rgba(185, 28, 28, 0.055);
}

.career-detail .career-labels {
position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 18px;
}

.career-detail .career-label {
display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(185, 28, 28, 0.13);
    color: var(--career-primary);
    font-size: 12px;
    font-weight: 950;
    box-shadow: 0 10px 22px rgba(16, 24, 40, 0.04);
}

.career-detail .career-label .svg-icon {
width: 15px;
    height: 15px;
}

.career-detail .career-head h1 {
position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 0 16px;
    color: var(--career-ink);
    font-size: clamp(32px, 3.7vw, 58px);
    line-height: 1.04;
    letter-spacing: -0.055em;
    font-weight: 950;
}

.career-detail .career-head p {
position: relative;
    z-index: 2;
    max-width: 850px;
    margin: 0;
    color: var(--career-muted);
    line-height: 1.85;
    font-size: 16px;
}

.career-detail .career-body {
padding: 44px 48px 52px;
}

.career-detail .career-section {
position: relative;
    margin-bottom: 32px;
    padding: 28px;
    border-radius: 26px;
    background: #ffffff;
    border: 1px solid #f0f1f3;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.035);
}

.career-detail .career-section:last-child {
margin-bottom: 0;
}

.career-detail .career-section h2 {
display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    color: var(--career-ink);
    font-size: 23px;
    line-height: 1.2;
    font-weight: 950;
    letter-spacing: -0.035em;
}

.career-detail .career-section h2 .svg-icon {
width: 21px;
    height: 21px;
}

.career-detail .career-text {
color: var(--career-text);
    line-height: 2;
    font-size: 15.5px;
    white-space: pre-line;
}

.career-detail .career-side {
position: sticky;
    top: 24px;
    display: grid;
    gap: 18px;
}

.career-detail .career-side-card {
overflow: hidden;
    padding: 24px;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(234, 236, 240, 0.96);
    box-shadow: var(--career-shadow-soft);
}

.career-detail .career-side-card h3 {
display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 15px;
    color: var(--career-ink);
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -0.03em;
    font-weight: 950;
}

.career-detail .career-side-card h3 .svg-icon {
width: 21px;
    height: 21px;
    color: var(--career-primary);
}

.career-detail .apply-panel {
position: relative;
    overflow: hidden;
    padding: 28px;
    background:
      radial-gradient(circle at 94% 0%, rgba(216, 161, 61, 0.22), transparent 34%),
      linear-gradient(145deg, #fff8f1, #ffffff);
    border: 1px solid rgba(216, 161, 61, 0.20);
}

.career-detail .apply-panel::before {
content: "";
    position: absolute;
    right: -60px;
    bottom: -70px;
    width: 180px;
    height: 180px;
    border-radius: 999px;
    border: 26px solid rgba(185, 28, 28, 0.055);
}

.career-detail .apply-icon {
position: relative;
    z-index: 2;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 23px;
    background: #ffffff;
    color: var(--career-primary);
    box-shadow: 0 18px 40px rgba(185, 28, 28, 0.12);
}

.career-detail .apply-icon .svg-icon {
width: 34px;
    height: 34px;
}

.career-detail .apply-panel h3,
  .career-detail .apply-panel p,
  .career-detail .apply-panel a {
position: relative;
    z-index: 2;
}

.career-detail .apply-note {
margin: 0;
    color: var(--career-muted);
    line-height: 1.75;
    font-size: 13.5px;
}

.career-detail .apply-link {
display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 52px;
    margin-top: 18px;
    border-radius: 16px;
    background: var(--career-ink);
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 950;
    transition: 0.24s ease;
}

.career-detail .apply-link:hover {
background: var(--career-primary);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
}

.career-detail .apply-link .svg-icon {
width: 18px;
    height: 18px;
}

.career-detail .career-info {
display: grid;
    gap: 11px;
}

.career-detail .career-info span {
display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 13px;
    border-radius: 16px;
    background: #f9fafb;
    border: 1px solid #f0f1f3;
    color: #344054;
    font-size: 13px;
    font-weight: 850;
}

.career-detail .career-info .svg-icon {
width: 17px;
    height: 17px;
}

.career-detail .related-list {
display: grid;
    gap: 10px;
}

.career-detail .related-list a {
position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #f9fafb;
    border: 1px solid #f0f1f3;
    color: var(--career-ink);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 900;
    transition: 0.24s ease;
}

.career-detail .related-role-icon {
width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff1f1;
    color: var(--career-primary);
}

.career-detail .related-role-icon .svg-icon {
width: 15px;
    height: 15px;
}

.career-detail .related-list a:hover {
color: var(--career-primary);
    text-decoration: none;
    border-color: rgba(185, 28, 28, 0.20);
    background: #fffafa;
    transform: translateX(3px);
}

.career-detail .career-empty {
position: relative;
    overflow: hidden;
    text-align: center;
    padding: 72px 24px;
    border-radius: 30px;
    background:
      radial-gradient(circle at 50% 0%, rgba(185, 28, 28, 0.10), transparent 32%),
      #ffffff;
    border: 1px dashed rgba(185, 28, 28, 0.26);
    box-shadow: 0 16px 38px rgba(16, 24, 40, 0.05);
}

.career-detail .career-empty-icon {
width: 86px;
    height: 86px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 26px;
    background: #fff2f2;
    color: var(--career-primary);
    box-shadow: 0 16px 34px rgba(185, 28, 28, 0.10);
}

.career-detail .career-empty-icon .svg-icon {
width: 43px;
    height: 43px;
}

.career-detail .career-empty h2 {
color: var(--career-ink);
    margin: 0 0 9px;
    font-size: 29px;
    line-height: 1.2;
    letter-spacing: -0.035em;
    font-weight: 950;
}

.career-detail .career-empty p {
margin: 0 auto;
    max-width: 620px;
    color: var(--career-muted);
    line-height: 1.75;
    font-size: 14.5px;
}

@media (max-width: 1120px) {
.career-detail .career-shell {
grid-template-columns: 1fr;
}

.career-detail .career-side {
position: static;
      grid-template-columns: repeat(2, minmax(0, 1fr));
}

.career-detail .apply-panel {
grid-column: 1 / -1;
}
}

@media (max-width: 820px) {
.career-detail .career-container {
width: 94%;
}

.career-detail {
padding-top: 28px;
}

.career-detail .career-main {
border-radius: 28px;
}

.career-detail .career-cover {
height: 280px;
}

.career-detail .career-head,
  .career-detail .career-body {
padding: 32px 22px;
}

.career-detail .career-section {
padding: 22px;
      border-radius: 22px;
}

.career-detail .career-side {
grid-template-columns: 1fr;
}
}

@media (max-width: 520px) {
.career-detail .career-cover {
height: 230px;
}

.career-detail .career-head h1 {
font-size: 34px;
}

.career-detail .career-labels {
flex-direction: column;
      align-items: flex-start;
}

.career-detail .career-label {
width: 100%;
}

.career-detail .career-section h2 {
align-items: flex-start;
      font-size: 21px;
}
}

/* =========================================================
   CAREERS PAGE CSS (moved from careers.html)
   ========================================================= */
.career-page {
    --career-primary: #b91c1c;
    --career-primary-dark: #7f1212;
    --career-gold: #d8a13d;
    --career-ink: #101828;
    --career-text: #475467;
    --career-muted: #667085;
    --career-line: #eaecf0;
    --career-soft: #fff7f2;
    --career-white: #ffffff;
    --career-shadow: 0 24px 60px rgba(16, 24, 40, 0.10);
    --career-shadow-soft: 0 14px 34px rgba(16, 24, 40, 0.07);
  }

  .career-page,
.career-page * {
    box-sizing: border-box;
  }

  .career-page {
    position: relative;
    overflow: hidden;
    padding: 44px 0 90px;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--career-text);
    background:
      radial-gradient(circle at 5% 5%, rgba(185, 28, 28, 0.10), transparent 28%),
      radial-gradient(circle at 92% 10%, rgba(216, 161, 61, 0.14), transparent 26%),
      linear-gradient(180deg, #ffffff 0%, #fffaf7 48%, #ffffff 100%);
  }

  .career-page::before {
    content: "";
    position: absolute;
    left: -180px;
    bottom: 140px;
    width: 360px;
    height: 360px;
    border-radius: 999px;
    border: 55px solid rgba(185, 28, 28, 0.045);
    pointer-events: none;
  }

  .career-page .career-container {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .career-page .svg-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    flex: 0 0 auto;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .career-page .career-icon-soft {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    border-radius: 11px;
    background: #fff1f1;
    color: var(--career-primary);
  }

  .career-page .career-icon-soft .svg-icon {
    width: 17px;
    height: 17px;
  }

  .career-page .career-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 34px;
    align-items: stretch;
    min-height: 390px;
    border-radius: 34px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid rgba(185, 28, 28, 0.10);
    box-shadow: var(--career-shadow-soft);
  }

  .career-page .career-hero-content {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    padding: 54px 48px;
    background:
      linear-gradient(135deg, rgba(185, 28, 28, 0.98), rgba(127, 18, 18, 0.96)),
      radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.30), transparent 25%);
    color: #ffffff;
  }

  .career-page .career-hero-content::before {
    content: "";
    position: absolute;
    right: -95px;
    top: -95px;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    border: 34px solid rgba(255, 255, 255, 0.10);
  }

  .career-page .career-hero-content::after {
    content: "";
    position: absolute;
    left: 40px;
    bottom: -90px;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
  }

  .career-page .career-kicker {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.01em;
  }

  .career-page .career-kicker .svg-icon {
    color: #ffe3a3;
    width: 18px;
    height: 18px;
  }

  .career-page .career-hero h1 {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 22px 0 16px;
    color: #ffffff;
    font-size: clamp(34px, 4.3vw, 62px);
    line-height: 1.02;
    letter-spacing: -0.055em;
    font-weight: 950;
  }

  .career-page .career-hero p {
    position: relative;
    z-index: 2;
    max-width: 730px;
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 16px;
    line-height: 1.85;
    font-weight: 450;
  }

  .career-page .career-hero-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
  }

  .career-page .career-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--career-primary-dark);
    font-size: 13px;
    font-weight: 850;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.10);
  }

  .career-page .career-hero-pill .svg-icon {
    color: var(--career-gold);
    width: 17px;
    height: 17px;
  }

  .career-page .career-hero-side {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    padding: 30px;
    background:
      radial-gradient(circle at 70% 8%, rgba(216, 161, 61, 0.24), transparent 34%),
      linear-gradient(145deg, #fff8f1, #ffffff);
    border: 1px solid rgba(216, 161, 61, 0.18);
  }

  .career-page .career-side-card {
    height: 100%;
    min-height: 310px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
  }

  .career-page .career-side-icon {
    width: 78px;
    height: 78px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background: #ffffff;
    color: var(--career-primary);
    box-shadow: 0 18px 40px rgba(185, 28, 28, 0.12);
  }

  .career-page .career-side-icon .svg-icon {
    width: 38px;
    height: 38px;
    stroke-width: 1.8;
  }

  .career-page .career-side-card h2 {
    margin: 0;
    color: var(--career-ink);
    font-size: 29px;
    line-height: 1.18;
    letter-spacing: -0.035em;
    font-weight: 950;
  }

  .career-page .career-side-card p {
    margin: 10px 0 0;
    color: var(--career-muted);
    font-size: 14px;
    line-height: 1.75;
  }

  .career-page .career-side-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .career-page .career-side-stat {
    padding: 16px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(234, 236, 240, 0.9);
    box-shadow: 0 12px 24px rgba(16, 24, 40, 0.045);
  }

  .career-page .career-side-stat strong {
    display: block;
    color: var(--career-ink);
    font-size: 23px;
    font-weight: 950;
    letter-spacing: -0.025em;
  }

  .career-page .career-side-stat span {
    display: block;
    margin-top: 3px;
    color: var(--career-muted);
    font-size: 12px;
    font-weight: 750;
  }

  .career-page .career-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    margin: 36px 0 22px;
  }

  .career-page .career-toolbar-left {
    max-width: 720px;
  }

  .career-page .career-toolbar-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #fff3f3;
    color: var(--career-primary);
    border: 1px solid rgba(185, 28, 28, 0.12);
    font-size: 12px;
    font-weight: 900;
  }

  .career-page .career-toolbar-badge .svg-icon {
    width: 16px;
    height: 16px;
  }

  .career-page .career-toolbar h2 {
    margin: 0;
    color: var(--career-ink);
    font-size: clamp(25px, 2.4vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.04em;
    font-weight: 950;
  }

  .career-page .career-toolbar p {
    margin: 9px 0 0;
    color: var(--career-muted);
    font-size: 14px;
    line-height: 1.7;
  }

  .career-page .career-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 18px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid var(--career-line);
    color: var(--career-ink);
    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.055);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
  }

  .career-page .career-count .career-icon-soft {
    width: 28px;
    height: 28px;
    border-radius: 10px;
  }

  .career-page .career-count .svg-icon {
    width: 16px;
    height: 16px;
  }

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

  .career-page .career-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 300px 1fr auto;
    align-items: stretch;
    min-height: 230px;
    border-radius: 28px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    border: 1px solid rgba(234, 236, 240, 0.96);
    box-shadow: 0 16px 34px rgba(16, 24, 40, 0.055);
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
  }

  .career-page .career-card:hover {
    transform: translateY(-5px);
    border-color: rgba(185, 28, 28, 0.23);
    box-shadow: var(--career-shadow);
    color: inherit;
    text-decoration: none;
  }

  .career-page .career-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 24px;
    bottom: 24px;
    width: 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--career-primary), var(--career-gold));
    opacity: 0.95;
  }

  .career-page .career-cover {
    height: 100%;
    min-height: 230px;
    overflow: hidden;
    background: linear-gradient(135deg, #fff0f0, #fff8ef);
  }

  .career-page .career-cover img {
    width: 100%;
    height: 100%;
    min-height: 230px;
    display: block;
    object-fit: cover;
    transition: transform 0.35s ease;
  }

  .career-page .career-card:hover .career-cover img {
    transform: scale(1.055);
  }

  .career-page .career-cover-placeholder {
    height: 100%;
    min-height: 230px;
    display: grid;
    place-items: center;
    color: var(--career-primary);
    background:
      radial-gradient(circle at 70% 24%, rgba(185, 28, 28, 0.16), transparent 36%),
      linear-gradient(135deg, #fff7f7, #ffffff);
  }

  .career-page .career-cover-placeholder .svg-icon {
    width: 58px;
    height: 58px;
    stroke-width: 1.8;
  }

  .career-page .career-card-inner {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 28px 26px;
  }

  .career-page .career-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }

  .career-page .career-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 7px 11px;
    border-radius: 999px;
    background: #fff6f6;
    color: var(--career-primary);
    border: 1px solid rgba(185, 28, 28, 0.12);
    font-size: 12px;
    font-weight: 900;
  }

  .career-page .career-tag .svg-icon {
    width: 15px;
    height: 15px;
  }

  .career-page .career-card h3 {
    margin: 0;
    color: var(--career-ink);
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.15;
    font-weight: 950;
    letter-spacing: -0.035em;
  }

  .career-page .career-card p {
    max-width: 760px;
    margin: 0;
    color: var(--career-muted);
    line-height: 1.78;
    font-size: 14px;
  }

  .career-page .career-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
  }

  .career-page .career-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 11px;
    border-radius: 12px;
    background: #f9fafb;
    border: 1px solid #f0f1f3;
    color: #344054;
    font-size: 12.5px;
    font-weight: 800;
  }

  .career-page .career-meta .svg-icon {
    color: var(--career-primary);
    width: 16px;
    height: 16px;
  }

  .career-page .career-action {
    display: flex;
    align-items: center;
    padding: 26px 26px 26px 0;
  }

  .career-page .career-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 152px;
    min-height: 48px;
    padding: 12px 18px;
    border-radius: 16px;
    background: var(--career-ink);
    color: #ffffff;
    font-size: 14px;
    font-weight: 950;
    transition: background 0.24s ease, transform 0.24s ease;
  }

  .career-page .career-card:hover .career-btn {
    background: var(--career-primary);
    transform: translateX(3px);
  }

  .career-page .career-btn .svg-icon {
    width: 18px;
    height: 18px;
  }

  .career-page .career-empty {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 70px 24px;
    border-radius: 30px;
    background:
      radial-gradient(circle at 50% 0%, rgba(185, 28, 28, 0.10), transparent 32%),
      #ffffff;
    border: 1px dashed rgba(185, 28, 28, 0.26);
    box-shadow: 0 16px 38px rgba(16, 24, 40, 0.05);
  }

  .career-page .career-empty-icon {
    width: 86px;
    height: 86px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 26px;
    background: #fff2f2;
    color: var(--career-primary);
    box-shadow: 0 16px 34px rgba(185, 28, 28, 0.10);
  }

  .career-page .career-empty-icon .svg-icon {
    width: 43px;
    height: 43px;
  }

  .career-page .career-empty h3 {
    color: var(--career-ink);
    margin: 0 0 9px;
    font-size: 27px;
    line-height: 1.2;
    letter-spacing: -0.035em;
    font-weight: 950;
  }

  .career-page .career-empty p {
    margin: 0 auto;
    max-width: 620px;
    color: var(--career-muted);
    line-height: 1.75;
    font-size: 14.5px;
  }

  @media (max-width: 1180px) {
    .career-page .career-hero {
      grid-template-columns: 1fr;
    }

    .career-page .career-card {
      grid-template-columns: 260px 1fr;
    }

    .career-page .career-action {
      grid-column: 2 / 3;
      padding: 0 28px 26px;
      align-items: flex-start;
    }

    .career-page .career-btn {
      width: 100%;
    }
  }

  @media (max-width: 820px) {
    .career-page .career-container {
      width: 94%;
    }

    .career-page {
      padding-top: 28px;
    }

    .career-page .career-hero {
      border-radius: 26px;
      padding: 12px;
    }

    .career-page .career-hero-content {
      padding: 36px 24px;
      border-radius: 22px;
    }

    .career-page .career-hero-side {
      padding: 22px;
      border-radius: 22px;
    }

    .career-page .career-side-stats {
      grid-template-columns: 1fr;
    }

    .career-page .career-toolbar {
      flex-direction: column;
      align-items: flex-start;
    }

    .career-page .career-card {
      grid-template-columns: 1fr;
    }

    .career-page .career-cover,
.career-page .career-cover img,
.career-page .career-cover-placeholder {
      min-height: 220px;
    }

    .career-page .career-card-inner {
      padding: 24px 22px 20px;
    }

    .career-page .career-action {
      grid-column: auto;
      padding: 0 22px 24px;
    }

    .career-page .career-card::before {
      left: 22px;
      right: 22px;
      top: 0;
      bottom: auto;
      width: auto;
      height: 5px;
    }
  }

  @media (max-width: 520px) {
    .career-page .career-hero-content {
      padding: 30px 20px;
    }

    .career-page .career-hero h1 {
      font-size: 34px;
    }

    .career-page .career-hero-actions {
      flex-direction: column;
    }

    .career-page .career-hero-pill {
      width: 100%;
      justify-content: center;
    }

    .career-page .career-meta {
      flex-direction: column;
    }

    .career-page .career-meta span {
      width: 100%;
    }

    .career-page .career-count {
      width: 100%;
      justify-content: center;
    }
  }

.career-page .career-side-copy {
  margin-top: 24px;
}

.apply-page .apply-required-mark {
  color: #c31f26;
  font-weight: 900;
}


/* =========================================================
   MOVED PAGE-SPECIFIC CSS FROM INLINE <style> BLOCKS
   These rules were appended without changing page HTML logic or JS.
========================================================= */

/* ================= home.html style block 1 ================= */
.spin-win-home-section {
  padding: 0 0 24px;
}

.spin-win-home-card {
  position: relative;
  display: block;
  min-height: 190px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, #ad060e 0%, #ffecb3 100%);
  box-shadow: 0 18px 46px rgba(173, 6, 14, 0.18);
}

.spin-win-home-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.spin-win-home-overlay {
  position: absolute;
  inset: auto 24px 24px 24px;
  max-width: 560px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 34px rgba(15,23,42,0.12);
}

.spin-win-home-badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #ad060e;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.spin-win-home-overlay strong {
  display: block;
  color: #111827;
  font-size: 22px;
  line-height: 1.22;
  font-weight: 900;
}

@media (max-width: 767px) {
  .spin-win-home-card img {
    height: 170px;
  }

  .spin-win-home-overlay {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 12px 14px;
  }

  .spin-win-home-overlay strong {
    font-size: 16px;
  }
}

.hero-area {
  padding: 16px 0 24px;
}

.hero-image-slider {
  position: relative;
  width: 100%;
  height: 700px;
  border-radius: 26px;
  overflow: hidden;
  background: #fff7e8;
}

.hero-image-track {
  width: 100%;
  height: 100%;
  position: relative;
}

.hero-image-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
  transition:
  opacity 0.65s ease,
  visibility 0.65s ease,
  transform 1.2s ease;
}

.hero-image-slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  z-index: 2;
}

.hero-image-link {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-image-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: #111827;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
  transition: 0.25s ease;
}

.hero-arrow:hover {
  background: #ffffff;
  transform: translateY(-50%) scale(1.05);
}

.hero-arrow-prev {
  left: 18px;
}

.hero-arrow-next {
  right: 18px;
}

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.hero-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: 0.25s ease;
}

.hero-dots .dot.active {
  width: 28px;
  background: #2f80ed;
}

@media (max-width: 1199px) {
  .hero-image-slider {
    height: 380px;
    border-radius: 22px;
  }
}

@media (max-width: 991px) {
  .hero-image-slider {
    height: 320px;
  }
}

@media (max-width: 767px) {
  .hero-area {
    padding: 10px 0 18px;
  }

  .hero-image-slider {
    height: 230px;
    border-radius: 18px;
  }

  .hero-arrow {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  .hero-arrow-prev {
    left: 10px;
  }

  .hero-arrow-next {
    right: 10px;
  }
}

@media (max-width: 480px) {
  .hero-image-slider {
    height: 190px;
    border-radius: 16px;
  }
}

[data-product-card].is-soldout,
.product-click-card.is-soldout {
  position: relative;
}

[data-product-card].is-soldout::before,
.product-click-card.is-soldout::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(173, 6, 14, 0.03) 100%);
  pointer-events: none;
  z-index: 1;
}

[data-product-card].is-soldout .soldout-badge,
.product-click-card.is-soldout .soldout-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 14px 8px 10px;
  border-radius: 18px;
  background: linear-gradient(135deg, #d80e16 0%, #a5060d 100%);
  color: #ffffff;
  box-shadow: 0 16px 34px rgba(173, 6, 14, 0.24);
  pointer-events: none;
}

[data-product-card].is-soldout .soldout-badge-icon,
.product-click-card.is-soldout .soldout-badge-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

[data-product-card].is-soldout .soldout-badge-icon svg,
.product-click-card.is-soldout .soldout-badge-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

[data-product-card].is-soldout .soldout-badge-text,
.product-click-card.is-soldout .soldout-badge-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}

[data-product-card].is-soldout .soldout-badge-text strong,
.product-click-card.is-soldout .soldout-badge-text strong {
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

[data-product-card].is-soldout .soldout-badge-text small,
.product-click-card.is-soldout .soldout-badge-text small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

[data-product-card].is-soldout img,
.product-click-card.is-soldout img {
  filter: saturate(0.94) contrast(0.98);
}

.js-add-cart.is-soldout,
.js-add-cart:disabled {
  cursor: not-allowed !important;
  opacity: 1;
  filter: none;
  border: 1px solid rgba(173, 6, 14, 0.14) !important;
  background: linear-gradient(180deg, #fff7f7 0%, #f7f0f1 100%) !important;
  color: #9f1118 !important;
  box-shadow: none !important;
}

.js-add-cart.is-soldout .soldout-btn-wrap,
.js-add-cart:disabled .soldout-btn-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  white-space: nowrap;
}

.js-add-cart.is-soldout .soldout-btn-icon,
.js-add-cart:disabled .soldout-btn-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(173, 6, 14, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.js-add-cart.is-soldout .soldout-btn-icon svg,
.js-add-cart:disabled .soldout-btn-icon svg {
  width: 13px;
  height: 13px;
  display: block;
}

.js-add-cart.is-soldout .soldout-btn-label,
.js-add-cart:disabled .soldout-btn-label {
  color: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.top-selling-cart.is-soldout {
  min-width: 92px;
  min-height: 52px;
  padding: 0 12px !important;
  border-radius: 16px !important;
}

.top-selling-cart.is-soldout .soldout-btn-label {
  font-size: 11px;
}

@media (max-width: 767px) {
  [data-product-card].is-soldout .soldout-badge,
  .product-click-card.is-soldout .soldout-badge {
    top: 12px;
    right: 12px;
    min-height: 40px;
    padding: 7px 12px 7px 9px;
    gap: 8px;
    border-radius: 16px;
  }

  [data-product-card].is-soldout .soldout-badge-icon,
  .product-click-card.is-soldout .soldout-badge-icon {
    width: 22px;
    height: 22px;
  }

  [data-product-card].is-soldout .soldout-badge-text strong,
  .product-click-card.is-soldout .soldout-badge-text strong {
    font-size: 10px;
  }

  [data-product-card].is-soldout .soldout-badge-text small,
  .product-click-card.is-soldout .soldout-badge-text small {
    font-size: 9px;
  }
}

.stock-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17, 24, 39, .52);
}
.stock-modal-backdrop.is-open { display: flex; }
.stock-modal-card {
  width: min(430px, 100%);
  border-radius: 24px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(15, 23, 42, .28);
  text-align: center;
}
.stock-modal-top {
  padding: 28px 26px 18px;
  background: linear-gradient(180deg, #fff3f4 0%, #ffffff 100%);
}
.stock-modal-icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 14px;
  border-radius: 22px;
  background: #ad060e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.stock-modal-icon svg {
  width: 32px;
  height: 32px;
  display: block;
}
.stock-modal-card h3 {
  margin: 0 0 9px;
  color: #111827;
  font-size: 22px;
  font-weight: 800;
}
.stock-modal-card p {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.65;
}
.stock-modal-actions { padding: 0 26px 26px; }
.stock-modal-close {
  width: 100%;
  min-height: 46px;
  border: none;
  border-radius: 999px;
  background: #ad060e;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.product-rating-ui {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.4;
}

.product-rating-ui .rating-stars-wrap {
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  white-space: nowrap;
}

.product-rating-ui .rating-stars-empty {
  color: #d9d9d9;
}

.product-rating-ui .rating-stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  color: #f5a623;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
}

.product-rating-ui .rating-label {
  color: #6b7280;
  font-weight: 500;
  white-space: nowrap;
}

.product-rating-ui .rating-divider {
  color: #c4c4c4;
  font-weight: 400;
}

.product-rating-ui .rating-reviews {
  color: #5f6f8a;
  white-space: nowrap;
}

.deal-week-rate,
.top-selling-meta,
.trending-new-rating,
.featured-new-rate {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.deal-week-rate small,
.top-selling-meta small,
.trending-new-rating small,
.featured-new-rate small {
  margin: 0;
}

[data-product-card] {
  cursor: pointer;
}

[data-product-card] a,
[data-product-card] button {
  cursor: pointer;
}


/* ================= track_order.html style block 1 ================= */
.track-page {
        min-height: 100vh;
        padding: 46px 0 70px;
        font-family: inherit;
      }

      .track-container {
        width: 75%;
        max-width: 75%;
        margin: 0 auto;
      }

      .track-hero {
        background: linear-gradient(135deg, #c31f26 0%, #991b1f 100%);
        border-radius: 24px;
        padding: 34px;
        color: #ffffff;
        display: grid;
        grid-template-columns: 1.25fr 0.75fr;
        gap: 24px;
        align-items: center;
        margin-bottom: 28px;
      }

      .track-hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 34px;
        padding: 0 14px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.14);
        color: #ffffff;
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 14px;
      }

      .track-hero h1 {
        margin: 0 0 10px;
        color: #ffffff;
        font-size: 34px;
        line-height: 1.15;
        font-weight: 800;
        letter-spacing: -0.02em;
      }

      .track-hero p {
        margin: 0;
        color: rgba(255, 255, 255, 0.88);
        font-size: 15px;
        line-height: 1.65;
        max-width: 620px;
      }

      .track-hero-icon {
        width: 132px;
        height: 132px;
        border-radius: 34px;
        background: rgba(255, 255, 255, 0.13);
        display: flex;
        align-items: center;
        justify-content: center;
        justify-self: end;
      }

      .track-hero-icon i {
        font-size: 72px;
        color: #ffffff;
      }

      .track-card,
      .order-main,
      .order-side,
      .track-empty {
        background: #ffffff;
        border: 1px solid #eef0f4;
        border-radius: 22px;
        box-shadow: 0 12px 35px rgba(15, 23, 42, 0.07);
      }

      .track-card {
        padding: 26px;
        margin-bottom: 24px;
      }

      .track-form-title {
        margin: 0 0 18px;
        color: #111827;
        font-size: 20px;
        font-weight: 800;
      }

      .track-form {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 14px;
        align-items: end;
      }

      .track-field label {
        display: block;
        margin-bottom: 8px;
        color: #374151;
        font-size: 13px;
        font-weight: 700;
      }

      .track-field input {
        width: 100%;
        height: 48px;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        padding: 0 14px;
        color: #111827;
        background: #ffffff;
        font-size: 14px;
        outline: none;
        transition: all 0.2s ease;
      }

      .track-field input:focus {
        border-color: rgba(195, 31, 38, 0.55);
        box-shadow: 0 0 0 4px rgba(195, 31, 38, 0.08);
      }

      .track-btn {
        height: 48px;
        min-width: 150px;
        border: 0;
        border-radius: 14px;
        background: #c31f26;
        color: #ffffff;
        font-size: 14px;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .track-btn:hover {
        background: #a9161d;
        box-shadow: 0 12px 26px rgba(195, 31, 38, 0.24);
      }

      .track-alert {
        background: #fff1f2;
        border: 1px solid #fecdd3;
        color: #9f1239;
        border-radius: 16px;
        padding: 15px 16px;
        margin-bottom: 24px;
        font-size: 14px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .order-result {
        display: grid;
        grid-template-columns: 1fr 360px;
        gap: 24px;
        align-items: start;
      }

      .order-main,
      .order-side {
        padding: 24px;
      }

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

      .section-head h2 {
        margin: 0;
        color: #111827;
        font-size: 20px;
        font-weight: 850;
      }

      .status-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 30px;
        padding: 6px 12px;
        border-radius: 999px;
        background: #fff1f2;
        color: #c31f26;
        font-size: 12px;
        font-weight: 800;
        text-transform: capitalize;
      }

      .order-meta {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 22px;
      }

      .meta-box {
        background: #f9fafb;
        border: 1px solid #eef0f4;
        border-radius: 16px;
        padding: 14px;
      }

      .meta-box span {
        display: block;
        color: #6b7280;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 5px;
      }

      .meta-box strong {
        display: block;
        color: #111827;
        font-size: 14px;
        font-weight: 800;
        word-break: break-word;
      }

      .track-steps {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin: 8px 0 26px;
      }

      .step {
        position: relative;
        text-align: center;
      }

      .step::before {
        content: "";
        position: absolute;
        top: 17px;
        left: -50%;
        width: 100%;
        height: 3px;
        background: #e5e7eb;
        z-index: 0;
      }

      .step:first-child::before {
        display: none;
      }

      .step.active::before {
        background: #c31f26;
      }

      .step-icon {
        position: relative;
        z-index: 1;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #e5e7eb;
        color: #6b7280;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 9px;
      }

      .step.active .step-icon {
        background: #c31f26;
        color: #ffffff;
      }

      .step span {
        display: block;
        color: #374151;
        font-size: 12px;
        font-weight: 800;
      }

      .order-items {
        display: grid;
        gap: 12px;
      }

      .order-item {
        display: flex;
        align-items: center;
        gap: 13px;
        border: 1px solid #eef0f4;
        border-radius: 16px;
        padding: 12px;
        background: #ffffff;
      }

      .order-item img {
        width: 64px;
        height: 64px;
        border-radius: 14px;
        object-fit: cover;
        background: #f3f4f6;
        border: 1px solid #eef0f4;
      }

      .order-item-info {
        flex: 1;
        min-width: 0;
      }

      .order-item-info h4 {
        margin: 0 0 5px;
        color: #111827;
        font-size: 14px;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .order-item-info p {
        margin: 0;
        color: #6b7280;
        font-size: 13px;
        font-weight: 600;
      }

      .order-item-price {
        color: #111827;
        font-size: 14px;
        font-weight: 850;
        white-space: nowrap;
      }

      .summary-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 11px 0;
        border-bottom: 1px solid #eef0f4;
        color: #374151;
        font-size: 14px;
        font-weight: 650;
      }

      .summary-row strong {
        color: #111827;
        font-weight: 850;
      }

      .summary-row.total {
        border-bottom: 0;
        padding-top: 16px;
        color: #111827;
        font-size: 17px;
        font-weight: 850;
      }

      .summary-row.total strong {
        color: #c31f26;
        font-size: 20px;
      }

      .track-empty {
        padding: 38px 20px;
        text-align: center;
        color: #6b7280;
      }

      .track-empty i {
        font-size: 54px;
        color: #c31f26;
        margin-bottom: 12px;
      }

      .track-empty h3 {
        margin: 0 0 8px;
        color: #111827;
        font-size: 20px;
        font-weight: 850;
      }

      .track-empty p {
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
      }

      @media (max-width: 991px) {
        .track-container {
          width: 94%;
          max-width: 94%;
        }

        .track-hero,
        .order-result,
        .track-form {
          grid-template-columns: 1fr;
        }

        .track-hero-icon {
          justify-self: start;
        }
      }

      @media (max-width: 575px) {
        .track-container {
          width: 94%;
          max-width: 94%;
        }

        .track-page {
          padding: 28px 0 50px;
        }

        .track-hero {
          padding: 24px;
          border-radius: 20px;
        }

        .track-hero h1 {
          font-size: 27px;
        }

        .order-meta {
          grid-template-columns: 1fr;
        }

        .track-steps {
          grid-template-columns: 1fr;
          gap: 14px;
        }

        .step {
          display: flex;
          align-items: center;
          gap: 12px;
          text-align: left;
        }

        .step::before {
          display: none;
        }

        .step-icon {
          margin: 0;
        }
      }


/* ================= spin_win.html style block 1 ================= */
:root {
    --brand: #ad060e;
    --brand-dark: #85030a;
    --brand-soft: #fff1f2;
    --gold: #f7c65a;
    --gold-soft: #fff7df;
    --dark: #111827;
    --muted: #667085;
    --border: #f0d8da;
    --white: #ffffff;
  }

  .spin-page-new {
    min-height: 78vh;
       overflow: hidden;
    position: relative;
  }

  .spin-page-new::before {
    content: "";
    position: absolute;
    width: 470px;
    height: 470px;
    right: -235px;
    top: -220px;
    border-radius: 50%;
    background: rgba(173, 6, 14, 0.075);
  }

  .spin-page-new::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    left: -180px;
    bottom: -180px;
    border-radius: 50%;
    background: rgba(247, 198, 90, 0.18);
  }

  .spin-page-new .container {
    position: relative;
    z-index: 2;
  }

  .spin-center-wrap {
    width: min(980px, 100%);
    margin: 0 auto;
  }

  .spin-intro-header {
    text-align: center;
    margin-bottom: 24px;
  }

  .spin-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #fff1f2;
    color: var(--brand);
    font-size: 11.5px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 14px;
    box-shadow: 0 10px 24px rgba(173, 6, 14, 0.07);
  }

  .spin-label span {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: inline-grid;
    place-items: center;
    font-size: 11px;
  }

  .spin-intro-header h1 {
    margin: 0;
    color: var(--dark);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.06;
    font-weight: 950;
    letter-spacing: -0.05em;
  }

  .spin-intro-header h1 span {
    color: var(--brand);
    font-weight: 650;
  }

  .spin-intro-header p {
    max-width: 690px;
    margin: 13px auto 0;
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.75;
    font-weight: 500;
  }

  .spin-wheel-card {
    background:
      linear-gradient(#ffffff, #ffffff) padding-box,
      linear-gradient(135deg, rgba(173, 6, 14, 0.32), rgba(247, 198, 90, 0.44)) border-box;
    border: 1px solid transparent;
    border-radius: 34px;
    padding: 24px;
    box-shadow:
      0 30px 80px rgba(173, 6, 14, 0.13),
      0 10px 34px rgba(17, 24, 39, 0.06);
    position: relative;
    overflow: hidden;
  }

  .spin-wheel-card::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -118px;
    bottom: -118px;
    border-radius: 50%;
    background: rgba(173, 6, 14, 0.065);
  }

  .spin-wheel-card::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    left: -85px;
    top: -85px;
    border-radius: 50%;
    background: rgba(247, 198, 90, 0.16);
  }

  .spin-card-header {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 8px 10px 20px;
  }

  .spin-card-header h2 {
    margin: 0;
    color: var(--dark);
    font-size: 24px;
    font-weight: 950;
    letter-spacing: -0.04em;
  }

  .spin-card-header p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
  }

  .spin-status {
    flex: 0 0 auto;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--gold-soft);
    color: #946200;
    font-size: 10.5px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
    border: 1px solid rgba(247, 198, 90, 0.28);
  }

  .spin-wheel-stage {
    position: relative;
    z-index: 3;
    border-radius: 30px;
    border: 1px solid #efd8da;
    background:
      radial-gradient(circle at center, #ffffff 0%, #ffffff 44%, #fff5f5 100%);
    display: grid;
    place-items: center;
    padding: 44px 28px;
    min-height: 470px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  }

  .wheel-holder {
    width: min(470px, 100%);
    aspect-ratio: 1 / 1;
    position: relative;
  }

  .wheel-holder::before {
    content: "";
    position: absolute;
    inset: -19px;
    border-radius: 50%;
    background: rgba(173, 6, 14, 0.06);
    border: 12px solid rgba(236, 218, 202, 0.72);
  }

  .wheel-holder::after {
    content: "";
    position: absolute;
    inset: -34px;
    border-radius: 50%;
    border: 1px solid rgba(173, 6, 14, 0.10);
  }

  .wheel-pointer {
    position: absolute;
    top: -27px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--brand), var(--brand-dark));
    box-shadow: 0 16px 30px rgba(173, 6, 14, 0.25);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 19px;
    font-weight: 950;
  }

  .wheel-pointer::before {
    content: "★";
  }

  .wheel-pointer::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -22px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 30px solid var(--brand-dark);
  }

  .spin-wheel {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 17px solid #ffffff;
    background: conic-gradient(
      #b8000b 0deg 45deg,
      #f7c65a 45deg 90deg,
      #111827 90deg 135deg,
      #fff0f1 135deg 180deg,
      #b8000b 180deg 225deg,
      #f7c65a 225deg 270deg,
      #111827 270deg 315deg,
      #fff0f1 315deg 360deg
    );
    box-shadow:
      inset 0 0 0 7px rgba(255, 255, 255, 0.45),
      inset 0 0 0 1px rgba(255, 255, 255, 0.85),
      0 25px 66px rgba(17, 24, 39, 0.22);
    transition: transform 4.2s cubic-bezier(.12,.67,.08,1);
    overflow: hidden;
  }

  .spin-wheel::before {
    content: "";
    position: absolute;
    inset: 36px;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,0.42);
    pointer-events: none;
  }

  .spin-wheel::after {
    content: "";
    position: absolute;
    inset: 13px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.32);
    pointer-events: none;
  }

  .wheel-item {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    width: 182px;
    height: 182px;
    display: grid;
    place-items: center;
    transform-origin: 0 0;
    transform:
      rotate(var(--item-angle))
      translateX(145px)
      translate(-50%, -50%);
    pointer-events: none;
  }

  .wheel-prize-img {
    width: 100px;
    height: 100px;
    border-radius: 17px;
    object-fit: cover;
    background: #ffffff;
    border: 3px solid rgba(255,255,255,0.96);
    box-shadow:
      0 12px 24px rgba(0,0,0,0.20),
      0 0 0 1px rgba(173, 6, 14, 0.08);
    transform: rotate(var(--counter-angle));
  }

  .wheel-center {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 10;
    transform: translate(-50%, -50%);
    width: 124px;
    height: 124px;
    border-radius: 50%;
    border: 10px solid #ffffff;
    background:
      radial-gradient(circle at 32% 24%, rgba(255,255,255,.34), transparent 28%),
      linear-gradient(145deg, var(--brand), var(--brand-dark));
    color: #ffffff;
    display: grid;
    place-items: center;
    text-align: center;
    box-shadow:
      0 18px 40px rgba(17, 24, 39, 0.24),
      inset 0 0 0 1px rgba(255,255,255,.18);
  }

  .wheel-center strong {
    font-size: 18px;
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: -0.02em;
    text-transform: uppercase;
  }

  .spin-actions-area {
    position: relative;
    z-index: 3;
    margin-top: 21px;
    display: grid;
    gap: 13px;
  }

  .spin-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .spin-play-btn {
    min-width: 235px;
    min-height: 54px;
    border: 0;
    border-radius: 17px;
    background: linear-gradient(135deg, var(--brand), #d91622);
    color: #fff;
    font-size: 14.5px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 17px 32px rgba(173, 6, 14, 0.22);
    transition: .2s ease;
  }

  .spin-play-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 40px rgba(173, 6, 14, 0.28);
  }

  .spin-play-btn:disabled {
    opacity: .72;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 12px 24px rgba(173, 6, 14, 0.13);
  }

  .spin-back-link {
    min-height: 54px;
    padding: 0 25px;
    border: 1px solid #edcfd1;
    border-radius: 17px;
    background: #ffffff;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(17, 24, 39, 0.05);
    transition: .2s ease;
  }

  .spin-back-link:hover {
    background: #fff1f2;
    color: var(--brand);
    text-decoration: none;
    transform: translateY(-2px);
  }

  .spin-message {
    max-width: 520px;
    margin: 0 auto;
    padding: 12px 16px;
    text-align: center;
    background: #fff;
    border: 1px solid #efd8d9;
    border-radius: 16px;
    color: var(--muted);
    font-size: 12.7px;
    font-weight: 700;
    line-height: 1.55;
  }

  .spin-mini-rules {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 18px;
  }

  .spin-mini-rule {
    padding: 14px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.88);
    border: 1px solid #f1dddf;
    text-align: center;
  }

  .spin-mini-rule strong {
    display: block;
    color: var(--dark);
    font-size: 13px;
    font-weight: 950;
    margin-bottom: 4px;
  }

  .spin-mini-rule span {
    display: block;
    color: var(--muted);
    font-size: 11.8px;
    line-height: 1.45;
    font-weight: 600;
  }

  .spin-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.64);
    backdrop-filter: blur(8px);
  }

  .spin-modal-backdrop.show {
    display: flex;
  }

  .spin-result-modal {
    width: min(470px, 100%);
    background: #ffffff;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 36px 90px rgba(0,0,0,.30);
    border: 1px solid rgba(255,255,255,0.75);
    text-align: center;
    animation: spinResultPop .28s ease;
  }

  .spin-result-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 30px 24px;
    background:
      radial-gradient(circle at top, rgba(247, 198, 90, 0.18), transparent 42%),
      linear-gradient(135deg, #fff5f5, #ffffff);
    text-align: center;
  }

  .spin-result-image-wrap,
  .spin-result-fail-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .spin-result-hero img {
    width: 138px;
    height: 138px;
    border-radius: 28px;
    object-fit: contain;
    object-position: center;
    background: #fff;
    border: 1px solid #ecd2d3;
    box-shadow: 0 16px 38px rgba(17, 24, 39, 0.12);
  }

  .spin-failure-icon {
    width: 124px;
    height: 124px;
    border-radius: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    background:
      radial-gradient(circle at 32% 24%, rgba(255,255,255,.95), rgba(255,255,255,.36) 42%, transparent 43%),
      linear-gradient(145deg, #fff7f7 0%, #ffe9eb 100%);
    border: 1px solid rgba(173, 6, 14, 0.14);
    box-shadow:
      0 18px 42px rgba(173, 6, 14, 0.15),
      inset 0 1px 0 rgba(255,255,255,.82);
    position: relative;
  }

  .spin-failure-icon::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 26px;
    border: 1px dashed rgba(173, 6, 14, 0.18);
  }

  .spin-failure-icon svg {
    width: 58px;
    height: 58px;
    display: block;
    position: relative;
    z-index: 2;
  }

  .spin-result-body {
    padding: 0 32px 32px;
    text-align: center;
  }

  .spin-result-body h2 {
    margin: 0;
    color: var(--dark);
    font-size: 27px;
    line-height: 1.22;
    font-weight: 950;
    letter-spacing: -0.04em;
    text-align: center;
  }

  .spin-result-body p {
    max-width: 360px;
    margin: 11px auto 0;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.65;
    font-weight: 500;
    text-align: center;
  }

  .spin-result-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 23px;
    flex-wrap: wrap;
  }

  .spin-result-actions button,
  .spin-result-actions a {
    min-width: 98px;
    min-height: 46px;
    padding: 0 20px;
    border: 0;
    border-radius: 15px;
    font-weight: 950;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: .2s ease;
  }

  .spin-result-actions button:hover,
  .spin-result-actions a:hover {
    transform: translateY(-1px);
  }

  .spin-result-primary {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 12px 26px rgba(173, 6, 14, 0.20);
  }

  .spin-result-light {
    background: #fff1f2;
    color: var(--brand);
  }

  @keyframes spinResultPop {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  @media (max-width: 991px) {
    .spin-center-wrap {
      width: 100%;
    }

    .spin-wheel-stage {
      min-height: 450px;
    }

    .spin-mini-rules {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 575px) {
    .spin-page-new {
      padding: 34px 0 54px;
    }

    .spin-wheel-card {
      padding: 18px;
      border-radius: 25px;
    }

    .spin-card-header {
      flex-direction: column;
      align-items: flex-start;
      padding: 6px 4px 18px;
    }

    .spin-wheel-stage {
      padding: 34px 14px;
      border-radius: 22px;
      min-height: 365px;
    }

    .spin-intro-header h1 {
      font-size: 34px;
    }

    .spin-intro-header p {
      font-size: 14px;
    }

    .wheel-holder {
      width: min(330px, 100%);
    }

    .wheel-holder::before {
      inset: -13px;
      border-width: 8px;
    }

    .wheel-holder::after {
      inset: -23px;
    }

    .wheel-pointer {
      width: 58px;
      height: 58px;
      top: -21px;
    }

    .wheel-pointer::after {
      bottom: -18px;
      border-left-width: 13px;
      border-right-width: 13px;
      border-top-width: 24px;
    }

    .spin-wheel {
      border-width: 11px;
    }

    .wheel-center {
      width: 104px;
      height: 104px;
      border-width: 8px;
    }

    .wheel-center strong {
      font-size: 15px;
    }

    .wheel-item {
      width: 54px;
      height: 54px;
      transform:
        rotate(var(--item-angle))
        translateX(100px)
        translate(-50%, -50%);
    }

    .wheel-prize-img {
      width: 46px;
      height: 46px;
      border-radius: 13px;
      border-width: 2px;
    }

    .spin-play-btn,
    .spin-back-link {
      width: 100%;
    }
  }


/* ================= order_summary.html style block 1 ================= */
:root {
    --checkout-red: #c31f26;
    --checkout-red-dark: #9f171d;
    --checkout-black: #15171c;
    --checkout-text: #202532;
    --checkout-muted: #6b7280;
    --checkout-border: #e6e8ee;
    --checkout-bg: #f6f7f9;
    --checkout-soft: #fff4f5;
    --checkout-white: #ffffff;
  }

  .order-summary-page {
    min-height: 100vh;
    padding: 36px 0 70px;
    background: #f6f7f9;
    color: var(--checkout-text);
    font-family: inherit;
   
  }

  .order-summary-page * {
    box-sizing: border-box;
    
  }

  .checkout-formal-shell {
    max-width: 1340px;
    margin: 0 auto;
  }

  .checkout-formal-header {
    margin-bottom: 22px;
    padding: 24px 28px;
    
    border: 1px solid var(--checkout-border);
    border-radius: 18px;
    background: var(--checkout-white);
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.045);
  }

  .checkout-formal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
  }

  .checkout-formal-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--checkout-soft);
    color: var(--checkout-red);
    font-size: 12px;
    font-weight: 600;
  }

  .checkout-formal-header h1 {
    margin: 0 0 5px;
    color: var(--checkout-black);
    font-size: 27px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
  }

  .checkout-formal-header p {
    margin: 0;
    color: var(--checkout-muted);
    font-size: 14px;
    line-height: 1.55;
    font-weight: 400;
  }

  .checkout-formal-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }

  .checkout-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border-radius: 12px;
    background: #fafafa;
    border: 1px solid #eceef3;
    white-space: nowrap;
  }

  .checkout-step-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--checkout-red);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
  }

  .checkout-step-text {
    color: var(--checkout-black);
    font-size: 12px;
    font-weight: 600;
  }

  .os-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 392px;
    gap: 22px;
    align-items: start;
  }

  .os-card {
    background: var(--checkout-white);
    border: 1px solid var(--checkout-border);
    border-radius: 18px;
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.045);
    overflow: hidden;
  }

  .os-card-pad {
    padding: 0;
  }

  .formal-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 21px 23px;
    border-bottom: 1px solid var(--checkout-border);
    background: #ffffff;
  }

  .formal-panel-title {
    min-width: 0;
  }

  .os-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--checkout-soft);
    color: var(--checkout-red);
    font-size: 12px;
    font-weight: 600;
  }

  .os-title-row {
    display: contents;
  }

  .os-title-row h2,
  .os-card h3 {
    margin: 0;
    color: var(--checkout-black);
    font-size: 21px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.015em;
  }

  .os-muted {
    color: var(--checkout-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
  }

  .os-add-more {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid var(--checkout-red);
    background: var(--checkout-white);
    color: var(--checkout-red) !important;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    white-space: nowrap;
    transition: 0.2s ease;
  }

  .os-add-more:hover {
    background: var(--checkout-red);
    color: #ffffff !important;
  }

  .formal-items-table {
    padding: 18px 23px 22px;
  }

  .formal-table-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 120px;
    gap: 16px;
    padding: 0 2px 11px;
    border-bottom: 1px solid var(--checkout-border);
    color: var(--checkout-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .os-item-list {
    padding-top: 0;
  }

  .os-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 120px;
    gap: 16px;
    align-items: center;
    padding: 16px 2px;
    border-bottom: 1px solid #eef0f4;
  }

  .os-item:last-child {
    border-bottom: none;
  }

  .formal-product-cell {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
  }

  .os-thumb {
    width: 70px;
    height: 70px;
    border-radius: 14px;
    background: #f7f8fa;
    border: 1px solid #eaedf3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
  }

  .os-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .os-item h4 {
    margin: 0 0 6px;
    color: var(--checkout-black);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
  }

  .os-item-meta {
    color: var(--checkout-muted);
    font-size: 12.5px;
    font-weight: 400;
  }

  .formal-qty-cell {
    color: var(--checkout-text);
    font-size: 13px;
    font-weight: 600;
  }

  .os-item-price {
    text-align: right;
    color: var(--checkout-black);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
  }

  .os-section {
    border-top: 1px solid var(--checkout-border);
    padding: 22px 23px;
    margin-top: 0;
  }

  .os-note-card,
  .os-recommend-card {
    border: 1px solid var(--checkout-border);
    border-radius: 16px;
    background: #ffffff;
    padding: 18px;
  }

  .os-note-head,
  .os-recommend-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .os-note-head {
    margin-bottom: 14px;
  }

  .os-note-icon,
  .os-recommend-icon {
    width: 39px;
    height: 39px;
    border-radius: 12px;
    background: var(--checkout-soft);
    color: var(--checkout-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: 0 0 auto;
  }

  .os-note-head h3,
  .os-recommend-head h3 {
    margin: 0 0 4px;
    color: var(--checkout-black);
    font-size: 16px;
    font-weight: 700;
  }

  .os-note-head p,
  .os-recommend-head p {
    margin: 0;
    color: var(--checkout-muted);
    font-size: 13px;
    line-height: 1.5;
  }

  .os-note-field textarea {
    width: 100%;
    min-height: 108px;
    resize: vertical;
    border-radius: 12px;
    border: 1px solid #dfe3eb;
    background: #fbfcfd;
    padding: 13px 14px;
    color: var(--checkout-black);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    outline: none;
    transition: 0.2s ease;
  }

  .os-note-field textarea::placeholder {
    color: #9aa3b2;
  }

  .os-note-field textarea:focus {
    border-color: var(--checkout-red);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(195, 31, 38, 0.08);
  }

  .os-note-tips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
  }

  .os-note-tips span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    background: #f7f8fa;
    border: 1px solid #eceef3;
    color: var(--checkout-muted);
    font-size: 12px;
    font-weight: 400;
  }

  .os-recommend-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 15px;
  }

  .os-recommend-badge {
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f3f4f6;
    color: var(--checkout-text);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }

  .os-people-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    scroll-behavior: smooth;
  }

  .os-people-scroll::-webkit-scrollbar,
  .os-coupon-page-scroll::-webkit-scrollbar {
    height: 7px;
  }

  .os-people-scroll::-webkit-scrollbar-track,
  .os-coupon-page-scroll::-webkit-scrollbar-track {
    background: #f1f2f4;
    border-radius: 999px;
  }

  .os-people-scroll::-webkit-scrollbar-thumb,
  .os-coupon-page-scroll::-webkit-scrollbar-thumb {
    background: #c9ced8;
    border-radius: 999px;
  }

  .os-product-row-card {
    min-width: 235px;
    max-width: 235px;
    flex: 0 0 auto;
    border: 1px solid var(--checkout-border);
    border-radius: 15px;
    background: #ffffff;
    overflow: hidden;
    transition: 0.2s ease;
  }

  .os-product-row-card:hover {
    border-color: rgba(195, 31, 38, 0.28);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
  }

  .os-product-index {
    display: none;
  }

  .os-product-row-img {
    width: 100%;
    height: 138px;
    overflow: hidden;
    background: #f8f9fb;
  }

  .os-product-row-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .os-product-row-info {
    padding: 12px 13px 8px;
    min-width: 0;
  }

  .os-product-label {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--checkout-soft);
    color: var(--checkout-red);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
  }

  .os-product-row-info h4 {
    margin: 0 0 8px;
    color: var(--checkout-black);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    min-height: 37px;
  }

  .os-product-rating {
    color: #f59e0b;
    font-size: 12px;
    margin-bottom: 8px;
  }

  .os-product-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
  }

  .os-product-price del {
    color: #9ca3af;
    font-size: 12px;
    font-weight: 400;
  }

  .os-product-price strong {
    color: var(--checkout-red);
    font-size: 16px;
    font-weight: 700;
  }

  .os-product-price span {
    color: var(--checkout-muted);
    font-size: 12px;
  }

  .os-product-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 13px 13px;
  }

  .os-product-views {
    color: var(--checkout-muted);
    font-size: 11.5px;
    white-space: nowrap;
  }

  .os-product-cart-btn {
    width: 37px;
    height: 37px;
    border: none;
    border-radius: 10px;
    background: var(--checkout-red);
    color: #ffffff;
    font-size: 17px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
  }

  .os-product-cart-btn:hover {
    background: var(--checkout-black);
  }

  .os-empty {
    padding: 28px 16px;
    text-align: center;
    border: 1px dashed #d9dee8;
    border-radius: 14px;
    background: #fbfcfd;
    color: var(--checkout-muted);
    font-size: 14px;
  }

  .os-summary {
    position: sticky;
    top: 18px;
  }

  .os-summary-top {
    padding: 22px 22px 17px;
    border-bottom: 1px solid var(--checkout-border);
    background: #ffffff;
  }

  .os-summary-top h3 {
    font-size: 21px;
    font-weight: 700;
    color: var(--checkout-black);
  }

  .os-lines {
    padding: 19px 22px 0;
  }

  .os-summary-block {
    margin-bottom: 17px;
  }

  .os-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 11px;
    margin-bottom: 10px;
  }

  .os-section-head h3,
  .os-summary-block .os-section-head h3 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--checkout-black);
  }

  .os-change-btn {
    border: 1px solid #f2c7ca;
    background: var(--checkout-soft);
    color: var(--checkout-red);
    border-radius: 9px;
    min-height: 32px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
  }

  .os-change-btn:hover {
    background: var(--checkout-red);
    border-color: var(--checkout-red);
    color: #ffffff;
  }

  .os-info-box {
    position: relative;
    border: 1px solid var(--checkout-border);
    background: #fbfcfd;
    border-radius: 14px;
    padding: 14px 14px 14px 42px;
    min-height: 72px;
  }

  .os-info-box::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 20px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--checkout-red);
    box-shadow: 0 0 0 5px rgba(195, 31, 38, 0.11);
  }

  .os-info-box strong {
    display: block;
    color: var(--checkout-black);
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.35;
  }

  .os-coupon-page-box {
    width: 100%;
  }

  .os-coupon-page-title {
    margin: 0 0 10px;
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--checkout-black);
  }

  .os-coupon-page-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    scroll-behavior: smooth;
  }

  .os-coupon-page-card {
    min-width: 218px;
    max-width: 218px;
    min-height: 72px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 0 0 auto;
    padding: 12px;
    border: 1px solid var(--checkout-border);
    border-radius: 13px;
    cursor: pointer;
    background: #ffffff;
    transition: 0.2s ease;
  }

  .os-coupon-page-card:hover {
    border-color: rgba(195, 31, 38, 0.28);
    background: #fffafa;
  }

  .os-coupon-page-card.active {
    border-color: var(--checkout-red);
    background: var(--checkout-soft);
  }

  .os-coupon-page-card input {
    accent-color: var(--checkout-red);
    margin-top: 2px;
    flex: 0 0 auto;
  }

  .os-coupon-page-card strong {
    display: block;
    color: var(--checkout-black);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.35;
  }

  .os-coupon-page-card span {
    display: block;
    color: var(--checkout-muted);
    font-size: 12.5px;
    line-height: 1.4;
  }

  .os-hidden-coupon-status {
    display: none !important;
  }

  .os-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 11px 0;
    color: var(--checkout-muted);
    font-size: 14px;
    border-bottom: 1px solid #eef0f4;
  }

  .os-line strong {
    color: var(--checkout-black);
    font-size: 14px;
    font-weight: 700;
  }

  .os-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 18px 22px 20px;
    padding: 16px;
    border-radius: 14px;
    background: #15171c;
    color: #000;
    font-size: 16px;
    font-weight: 700;
  }

  .os-total strong {
    color: #000;
    font-size: 22px;
    font-weight: 800;
  }

  .os-place-order {
    width: calc(100% - 44px);
    margin: 0 22px 22px;
    min-height: 50px;
    border: none;
    border-radius: 12px;
    background: var(--checkout-red);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(195, 31, 38, 0.22);
    transition: 0.2s ease;
  }

  .os-place-order:hover {
    background: var(--checkout-red-dark);
  }

  .os-place-order:disabled {
    opacity: 0.7;
    cursor: wait;
  }

  .os-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.56);
    backdrop-filter: blur(5px);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 18px;
  }

  .os-modal-backdrop.active {
    display: flex;
  }

  .os-modal {
    width: min(620px, 100%);
    max-height: 86vh;
    overflow: auto;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.26);
    border: 1px solid rgba(255, 255, 255, 0.8);
  }

  .os-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 19px 21px;
    border-bottom: 1px solid var(--checkout-border);
    background: #ffffff;
  }

  .os-modal-head h3 {
    margin: 0;
    color: var(--checkout-black);
    font-size: 18px;
    font-weight: 700;
  }

  .os-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: #f2f3f5;
    color: var(--checkout-black);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    transition: 0.2s ease;
  }

  .os-modal-close:hover {
    background: var(--checkout-red);
    color: #ffffff;
  }

  .os-modal-body {
    padding: 19px 21px 21px;
  }

  .os-option {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px;
    border: 1px solid var(--checkout-border);
    border-radius: 13px;
    margin-bottom: 10px;
    cursor: pointer;
    background: #ffffff;
    transition: 0.2s ease;
  }

  .os-option:hover {
    border-color: rgba(195, 31, 38, 0.25);
    background: #fffafa;
  }

  .os-option.active {
    border-color: var(--checkout-red);
    background: var(--checkout-soft);
  }

  .os-option input {
    accent-color: var(--checkout-red);
    margin-top: 2px;
  }

  .os-option strong {
    display: block;
    color: var(--checkout-black);
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 4px;
  }

  .os-option span {
    display: block;
    color: var(--checkout-muted);
    font-size: 13px;
    line-height: 1.45;
  }

  .os-delivery-option-card,
  .os-address-option-card {
    padding: 14px;
    border-radius: 14px;
  }

  .os-address-form {
    margin-top: 16px;
    padding: 15px;
    border: 1px solid var(--checkout-border);
    border-radius: 14px;
    background: #fbfcfd;
  }

  .os-address-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--checkout-black);
    font-size: 13.5px;
    font-weight: 700;
  }

  .os-input {
    width: 100%;
    min-height: 44px;
    border-radius: 11px;
    border: 1px solid #dfe3eb;
    padding: 0 13px;
    outline: none;
    color: var(--checkout-black);
    background: #ffffff;
    font-size: 14px;
    transition: 0.2s ease;
  }

  .os-input:focus {
    border-color: var(--checkout-red);
    box-shadow: 0 0 0 4px rgba(195, 31, 38, 0.08);
  }

  .os-save-address-btn {
    width: 100%;
    min-height: 44px;
    border: none;
    border-radius: 11px;
    background: var(--checkout-red);
    color: #ffffff;
    font-weight: 700;
    margin-top: 11px;
    cursor: pointer;
    transition: 0.2s ease;
  }

  .os-save-address-btn:hover {
    background: var(--checkout-red-dark);
  }

  @media (max-width: 1199px) {
    .os-wrap {
      grid-template-columns: minmax(0, 1fr) 370px;
    }

    .checkout-formal-steps {
      display: none;
    }
  }

  @media (max-width: 991px) {
    .os-wrap {
      grid-template-columns: 1fr;
    }

    .os-summary {
      position: static;
    }

    .checkout-formal-header-row {
      flex-direction: column;
      align-items: flex-start;
    }

    .checkout-formal-steps {
      display: flex;
      width: 100%;
      overflow-x: auto;
      padding-bottom: 4px;
    }
  }

  @media (max-width: 575px) {
    .order-summary-page {
      padding: 24px 0 48px;
    }

    .checkout-formal-header {
      padding: 20px;
      border-radius: 16px;
    }

    .checkout-formal-header h1 {
      font-size: 23px;
    }

    .formal-panel-head {
      flex-direction: column;
      align-items: flex-start;
      padding: 19px;
    }

    .os-add-more {
      width: 100%;
      justify-content: center;
    }

    .formal-items-table {
      padding: 15px 19px 19px;
    }

    .formal-table-head {
      display: none;
    }

    .os-item {
      grid-template-columns: 1fr;
      gap: 10px;
      padding: 14px 0;
    }

    .formal-product-cell {
      align-items: flex-start;
    }

    .os-thumb {
      width: 68px;
      height: 68px;
    }

    .formal-qty-cell {
      padding-left: 82px;
    }

    .os-item-price {
      padding-left: 82px;
      text-align: left;
    }

    .os-section {
      padding: 19px;
    }

    .os-recommend-head {
      flex-direction: column;
    }

    .os-product-row-card {
      min-width: 220px;
      max-width: 220px;
    }

    .os-product-row-img {
      height: 128px;
    }

    .os-coupon-page-card {
      min-width: 210px;
      max-width: 210px;
    }
  }


  /* ================================
     New formal premium checkout design
     Keeps all old EJS and JavaScript logic unchanged
  ================================= */
  .order-summary-page {
    background:
      radial-gradient(circle at top left, rgba(195, 31, 38, 0.075), transparent 34%),
      linear-gradient(180deg, #fbfbfc 0%, #f3f4f7 100%);
  }

  .checkout-formal-shell {
    max-width: 85%;
  }

  .checkout-formal-header,
  .os-card,
  .os-note-card,
  .os-recommend-card {
    border-color: #e8ebf1;
    box-shadow: 0 16px 42px rgba(17, 24, 39, 0.06);
  }

  .checkout-formal-header {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff 0%, #fff8f8 100%);
  }

  .checkout-formal-header::after {
    content: '';
    position: absolute;
    right: -54px;
    top: -62px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.09);
    pointer-events: none;
  }

  .checkout-formal-kicker,
  .os-eyebrow {
    background: #fff0f1;
    color: var(--checkout-red);
    letter-spacing: 0.01em;
  }

  .checkout-step {
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.04);
  }

  .formal-panel-head,
  .os-summary-top {
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
  }

  .os-add-more,
  .os-change-btn,
  .os-place-order,
  .os-product-cart-btn,
  .os-save-address-btn {
    letter-spacing: 0.01em;
  }

  .formal-table-head {
    background: #fafbfc;
    border: 1px solid #eef0f4;
    border-radius: 12px;
    padding: 12px 14px;
  }

  .os-item {
    padding: 17px 14px;
    border-bottom: 1px solid #eef0f4;
    transition: 0.18s ease;
  }

  .os-item:hover {
    background: #fbfcfd;
    border-radius: 14px;
  }

  .os-thumb {
    border-radius: 16px;
  }

  .os-note-card {
    background: linear-gradient(135deg, #ffffff 0%, #fffafa 100%);
  }

  .os-note-icon,
  .os-recommend-icon {
    background: #fff0f1;
    box-shadow: inset 0 0 0 1px rgba(195, 31, 38, 0.08);
  }

  .os-note-head h3,
  .os-recommend-head h3,
  .os-summary-top h3,
  .os-title-row h2,
  .os-card h3 {
    font-weight: 700;
  }

  /* People also added - formal one-row rectangle design like the shared image */
  .os-recommend-card {
    padding: 0;
    overflow: hidden;
    background: #ffffff;
  }

  .os-recommend-head {
    padding: 20px 22px 16px;
    margin-bottom: 0;
    border-bottom: 1px solid #eef0f4;
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
  }

  .os-recommend-badge {
    background: #fff0f1;
    color: var(--checkout-red);
    border: 1px solid rgba(195, 31, 38, 0.12);
  }

  .os-people-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 18px 22px 22px;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
  }

  .os-people-scroll::-webkit-scrollbar {
    height: 7px;
  }

  .os-people-scroll::-webkit-scrollbar-track {
    background: #f1f2f4;
    border-radius: 999px;
  }

  .os-people-scroll::-webkit-scrollbar-thumb {
    background: #c9ced8;
    border-radius: 999px;
  }

  .os-product-row-card {
    position: relative;
    min-width: 560px;
    max-width: 560px;
    flex: 0 0 560px;
    min-height: 150px;
    display: grid;
    grid-template-columns: 44px 122px minmax(0, 1fr) 118px;
    align-items: center;
    gap: 14px;
    padding: 20px 16px 20px 16px;
    border: 1px solid #e5e9f0;
    border-radius: 16px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.035);
    scroll-snap-align: start;
    transition: 0.2s ease;
  }

  .os-product-row-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--checkout-red);
    opacity: 0;
    transition: 0.2s ease;
  }

  .os-product-row-card:hover {
    border-color: rgba(195, 31, 38, 0.28);
    box-shadow: 0 14px 34px rgba(17, 24, 39, 0.085);
    transform: translateY(-2px);
  }

  .os-product-row-card:hover::before {
    opacity: 1;
  }

  .os-product-index {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff0f1;
    color: var(--checkout-red);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
  }

  .os-product-row-img {
    width: 122px;
    height: 122px;
    border-radius: 14px;
    border: 1px solid #edf0f5;
    background: #f7f8fa;
    overflow: hidden;
  }

  .os-product-row-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.25s ease;
  }

  .os-product-row-card:hover .os-product-row-img img {
    transform: scale(1.035);
  }

  .os-product-row-info {
    padding: 0;
    min-width: 0;
  }

  .os-product-label {
    min-height: auto;
    padding: 0;
    margin: 0 0 6px;
    border-radius: 0;
    background: transparent;
    color: #00897b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .os-product-row-info h4 {
    min-height: 0;
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 15.5px;
    font-weight: 650;
    line-height: 1.32;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .os-product-rating {
    margin-bottom: 8px;
    color: #f59e0b;
    font-size: 12.5px;
    font-weight: 600;
  }

  .os-product-price {
    gap: 7px;
    align-items: baseline;
  }

  .os-product-price del {
    color: #9aa3b2;
    font-size: 13px;
    font-weight: 500;
  }

  .os-product-price strong {
    color: #0b1220;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  .os-product-price span {
    color: #64748b;
    font-size: 12.5px;
    font-weight: 600;
  }

  .os-product-actions {
    padding: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
  }

  .os-product-views {
    color: #64748b;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
  }

  .os-product-cart-btn {
    width: 43px;
    height: 43px;
    border-radius: 10px;
    background: var(--checkout-red);
    box-shadow: 0 10px 18px rgba(195, 31, 38, 0.18);
  }

  .os-product-cart-btn:hover {
    background: #0f172a;
    transform: translateY(-1px);
  }

  @media (max-width: 767px) {
    .os-people-scroll {
      padding: 16px;
    }

    .os-product-row-card {
      min-width: 500px;
      max-width: 500px;
      flex-basis: 500px;
      grid-template-columns: 38px 96px minmax(0, 1fr) 96px;
      gap: 12px;
      padding: 14px;
    }

    .os-product-row-img {
      width: 96px;
      height: 96px;
    }

    .os-product-actions {
      gap: 10px;
    }

    .os-product-price strong {
      font-size: 18px;
    }
  }

  @media (max-width: 480px) {
    .os-product-row-card {
      min-width: 430px;
      max-width: 430px;
      flex-basis: 430px;
      grid-template-columns: 34px 82px minmax(0, 1fr) 72px;
      border-radius: 14px;
    }

    .os-product-row-img {
      width: 82px;
      height: 82px;
    }

    .os-product-index {
      width: 32px;
      height: 32px;
      font-size: 12px;
    }

    .os-product-row-info h4 {
      font-size: 14px;
    }

    .os-product-views {
      display: none;
    }
  }

  .os-info-box {
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
  }

  .os-total {
    background: linear-gradient(135deg, #ebc82c 0%, #ddb504 100%);
    box-shadow: 0 14px 26px rgba(17, 24, 39, 0.13);
  }

  @media (max-width: 1199px) {
    .os-people-scroll {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 767px) {
    .os-people-scroll {
      padding: 16px;
    }

    .os-product-row-card {
      grid-template-columns: 38px 96px minmax(0, 1fr);
      gap: 12px;
      padding: 14px;
    }

    .os-product-row-img {
      width: 96px;
      height: 96px;
    }

    .os-product-actions {
      grid-column: 2 / 4;
      justify-content: space-between;
      min-width: 0;
      padding-top: 2px;
    }

    .os-product-price strong {
      font-size: 18px;
    }
  }

  @media (max-width: 480px) {
    .os-product-row-card {
      grid-template-columns: 34px 82px minmax(0, 1fr);
      border-radius: 14px;
    }

    .os-product-row-img {
      width: 82px;
      height: 82px;
    }

    .os-product-index {
      width: 32px;
      height: 32px;
      font-size: 12px;
    }

    .os-product-row-info h4 {
      font-size: 14px;
    }
  }


  /* New formal checkout header design */
  .checkout-formal-header {
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    padding: 0;
    border: 1px solid #e7eaf0;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.065);
  }

  .checkout-formal-header::after {
    display: none;
  }

  .checkout-formal-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 7px;
    background: linear-gradient(180deg, var(--checkout-red), var(--checkout-red-dark));
  }

  .checkout-formal-header-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 26px;
    padding: 26px 28px 26px 34px;
    z-index: 1;
  }

  .checkout-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
  }

  .checkout-header-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #fff1f2;
    color: var(--checkout-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    flex: 0 0 auto;
    border: 1px solid #ffdadd;
  }

  .checkout-formal-kicker {
    margin: 0 0 8px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--checkout-red);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
  }

  .checkout-formal-kicker i {
    display: none;
  }

  .checkout-formal-header h1 {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.025em;
  }

  .checkout-formal-header p {
    max-width: 620px;
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 400;
  }

  .checkout-formal-steps {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    border: 1px solid #edf0f5;
    border-radius: 18px;
    background: #f8fafc;
    flex: 0 0 auto;
  }

  .checkout-step {
    position: relative;
    min-width: 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    box-shadow: none;
    white-space: nowrap;
  }

  .checkout-step:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 16px;
    bottom: 16px;
    width: 1px;
    background: #e5e7eb;
  }

  .checkout-step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #111827;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    box-shadow: none;
  }

  .checkout-step:first-child .checkout-step-number {
    background: var(--checkout-red);
  }

  .checkout-step-text {
    color: #344054;
    font-size: 12px;
    font-weight: 600;
  }

  .checkout-header-count {
    margin-left: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 12px;
    font-weight: 600;
  }

  @media (max-width: 991px) {
    .checkout-formal-header-row {
      grid-template-columns: 1fr;
      padding: 24px;
    }

    .checkout-formal-steps {
      width: 100%;
      overflow-x: auto;
      justify-content: flex-start;
    }
  }

  @media (max-width: 575px) {
    .checkout-formal-header {
      border-radius: 18px;
    }

    .checkout-formal-header-row {
      padding: 22px 18px 22px 24px;
      gap: 18px;
    }

    .checkout-header-left {
      align-items: flex-start;
      gap: 12px;
    }

    .checkout-header-icon {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      font-size: 21px;
    }

    .checkout-formal-header h1 {
      font-size: 23px;
    }

    .checkout-step {
      min-width: 92px;
      padding: 9px 12px;
    }
  }


  /* FIX: remove big empty space between product name/details and views in People also added */
  .os-product-row-card {
    grid-template-columns: 44px 122px 220px auto !important;
    min-width: 545px !important;
    max-width: 545px !important;
    flex-basis: 545px !important;
    column-gap: 12px !important;
  }

  .os-product-row-info {
    width: 220px !important;
    max-width: 220px !important;
  }

  .os-product-actions {
    justify-content: flex-start !important;
    gap: 12px !important;
  }

  @media (max-width: 767px) {
    .os-product-row-card {
      min-width: 485px !important;
      max-width: 485px !important;
      flex-basis: 485px !important;
      grid-template-columns: 38px 96px 200px auto !important;
    }

    .os-product-row-info {
      width: 200px !important;
      max-width: 200px !important;
    }
  }

  @media (max-width: 480px) {
    .os-product-row-card {
      min-width: 410px !important;
      max-width: 410px !important;
      flex-basis: 410px !important;
      grid-template-columns: 34px 82px minmax(0, 1fr) auto !important;
    }

    .os-product-row-info {
      width: auto !important;
      max-width: none !important;
    }
  }



  /* FIX: make People also added product rectangle width 90% without changing old logic */
  .os-people-scroll {
    width: 100% !important;
  }

  .os-product-row-card {
    min-width: 65% !important;
    max-width: 65% !important;
    flex: 0 0 65% !important;
    grid-template-columns: 44px 122px minmax(0, 1fr) auto !important;
    column-gap: 12px !important;
  }

  .os-product-row-info {
    width: auto !important;
    max-width: none !important;
  }

  .os-product-actions {
    justify-content: flex-end !important;
    gap: 12px !important;
  }

  @media (max-width: 767px) {
    .os-product-row-card {
      min-width: 90% !important;
      max-width: 90% !important;
      flex-basis: 90% !important;
      grid-template-columns: 38px 96px minmax(0, 1fr) auto !important;
    }
  }

  @media (max-width: 480px) {
    .os-product-row-card {
      min-width: 90% !important;
      max-width: 90% !important;
      flex-basis: 90% !important;
      grid-template-columns: 34px 82px minmax(0, 1fr) !important;
    }

    .os-product-actions {
      grid-column: 2 / 4 !important;
      justify-content: space-between !important;
    }
  }


  .os-address-form select.os-input {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #475467 50%), linear-gradient(135deg, #475467 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
  }


  /* ==========================================================
     District picker without mobile phone header
     Old select/save address logic is kept. This custom district
     picker writes the chosen value back to #newDistrictSelect.
  ========================================================== */
  .os-hidden-native-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .os-address-form {
    background: #ffffff;
    border-radius: 18px;
  }

  .os-location-field {
    width: 100%;
    min-height: 58px;
    border: 0;
    border-radius: 999px;
    background: #f1f3f7;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 18px;
    cursor: pointer;
    transition: 0.2s ease;
    margin-bottom: 14px;
    text-align: left;
  }

  .os-location-field:hover {
    background: #eef1f6;
  }

  .os-location-field:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(195, 31, 38, 0.09);
  }

  .os-location-field i {
    color: #111827;
    font-size: 22px;
    flex: 0 0 auto;
  }

  .os-location-field span {
    flex: 1;
    color: #5b606b;
    font-size: 15px;
    font-weight: 500;
  }

  .os-location-field.has-value span {
    color: #111827;
    font-weight: 650;
  }

  .os-location-field .os-location-chevron {
    margin-left: auto;
    font-size: 18px;
    color: #111827;
  }

  .os-address-input-wrap {
    position: relative;
    margin-bottom: 12px;
  }

  .os-address-input-wrap i {
    position: absolute;
    left: 19px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #111827;
    z-index: 1;
  }

  .os-address-input-wrap .os-input {
    min-height: 58px;
    border: 0;
    border-radius: 999px;
    background: #f1f3f7;
    padding-left: 54px;
    font-size: 15px;
  }

  .os-district-picker-modal {
    background: rgba(15, 23, 42, 0.56);
    backdrop-filter: blur(5px);
    padding: 18px;
    align-items: center;
    justify-content: center;
  }

  .os-district-dialog {
    width: min(540px, 100%);
    max-height: min(78vh, 720px);
    overflow: hidden;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.26);
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
  }

  .os-district-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 19px 21px;
    border-bottom: 1px solid var(--checkout-border);
    background: #ffffff;
  }

  .os-district-head-title h3 {
    margin: 0 0 4px;
    color: var(--checkout-black);
    font-size: 18px;
    font-weight: 700;
  }

  .os-district-head-title p {
    margin: 0;
    color: var(--checkout-muted);
    font-size: 13px;
    line-height: 1.45;
  }

  .os-district-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: #f2f3f5;
    color: var(--checkout-black);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    transition: 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .os-district-close:hover {
    background: var(--checkout-red);
    color: #ffffff;
  }

  .os-district-body {
    flex: 1;
    overflow-y: auto;
    background: #ffffff;
    padding-bottom: 12px;
  }

  .os-district-search-wrap {
    padding: 15px 18px;
    border-bottom: 1px solid #eef0f4;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .os-district-search {
    position: relative;
  }

  .os-district-search i {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 25px;
    color: #111827;
  }

  .os-district-search input {
    width: 100%;
    height: 56px;
    border: 0;
    border-radius: 999px;
    background: #eef1f6;
    color: #111827;
    padding: 0 18px 0 56px;
    outline: none;
    font-size: 15px;
    font-weight: 400;
  }

  .os-district-search input:focus {
    box-shadow: 0 0 0 4px rgba(195, 31, 38, 0.08);
    background: #f4f6fa;
  }

  .os-district-search input::placeholder {
    color: #5b606b;
  }

  .os-district-list {
    background: #ffffff;
    padding: 0 18px 16px;
  }

  .os-district-item {
    width: 100%;
    min-height: 58px;
    border: 0;
    border-bottom: 1px solid #eef0f4;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #111111;
    cursor: pointer;
    text-align: left;
    padding: 0 6px;
    transition: 0.18s ease;
  }

  .os-district-item:hover,
  .os-district-item.active {
    background: #fff7f7;
  }

  .os-district-flag {
    width: 20px;
    min-width: 20px;
    font-size: 19px;
    line-height: 1;
  }

  .os-district-name {
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.01em;
  }

  .os-district-empty {
    padding: 32px 18px;
    text-align: center;
    color: #667085;
    font-size: 14px;
    display: none;
  }

  @media (max-width: 575px) {
    .os-district-picker-modal {
      padding: 12px;
    }

    .os-district-dialog {
      max-height: 82vh;
      border-radius: 16px;
    }

    .os-district-head {
      padding: 17px 18px;
    }

    .os-district-search-wrap {
      padding: 13px 14px;
    }

    .os-district-list {
      padding: 0 14px 14px;
    }
  }


  /* Address modal sections - add new address first, saved addresses second */
  .os-address-section {
    margin-bottom: 18px;
  }

  .os-address-section:last-child {
    margin-bottom: 0;
  }

  .os-address-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    color: var(--checkout-black);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
  }

  .os-address-section-title i {
    color: var(--checkout-red);
    font-size: 18px;
  }

  .os-address-section-subtitle {
    margin: -6px 0 13px;
    color: var(--checkout-muted);
    font-size: 13px;
    line-height: 1.45;
  }

  .os-address-saved-list {
    display: grid;
    gap: 10px;
  }

  .os-address-form {
    margin-top: 0;
  }



  /* EVC phone + user friendly popup improvements */
  .os-evc-phone-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 13px;
    border: 1px solid #e5e7eb;
    border-radius: 13px;
    background: #fbfcfd;
  }

  .os-evc-phone-value {
    color: #111827;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .os-mini-edit-btn {
    border: 1px solid rgba(195, 31, 38, 0.22);
    background: #fff5f6;
    color: var(--checkout-red);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
  }

  .os-mini-edit-btn:hover {
    background: var(--checkout-red);
    color: #ffffff;
  }

  .os-phone-edit-card {
    padding: 18px;
  }

  .os-phone-edit-card label {
    display: block;
    margin-bottom: 8px;
    color: #111827;
    font-size: 13px;
    font-weight: 700;
  }

  .os-phone-help {
    margin-top: 9px;
    color: #667085;
    font-size: 12px;
    line-height: 1.5;
  }

  .os-phone-error {
    display: none;
    margin-top: 9px;
    color: #b42318;
    font-size: 12px;
    font-weight: 600;
  }

  .os-phone-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
  }

  .os-popup-modal {
    max-width: 430px;
  }

  .os-notice-body {
    padding: 24px;
    text-align: center;
  }

  .os-notice-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #fff1f2;
    color: var(--checkout-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }

  .os-notice-title {
    margin: 0 0 8px;
    color: #111827;
    font-size: 19px;
    font-weight: 800;
  }

  .os-notice-message {
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.55;
  }

  .os-notice-actions {
    display: flex;
    justify-content: center;
    margin-top: 18px;
  }

  .os-primary-modal-btn,
  .os-secondary-modal-btn {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }

  .os-primary-modal-btn {
    border: 1px solid var(--checkout-red);
    background: var(--checkout-red);
    color: #ffffff;
  }

  .os-secondary-modal-btn {
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #344054;
  }



  /* EVC payment processing modal */
  .os-processing-body {
    padding: 28px 24px 26px;
    text-align: center;
  }

  .os-processing-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #fff1f2;
    color: var(--checkout-red);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .os-processing-icon::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 3px solid rgba(195, 31, 38, 0.12);
    border-top-color: var(--checkout-red);
    animation: osPaySpin 0.9s linear infinite;
  }

  .os-processing-icon i {
    font-size: 28px;
    position: relative;
    z-index: 1;
  }

  @keyframes osPaySpin {
    to { transform: rotate(360deg); }
  }

  .os-processing-title {
    margin: 0 0 8px;
    color: #111827;
    font-size: 20px;
    font-weight: 800;
  }

  .os-processing-message {
    margin: 0 auto;
    max-width: 340px;
    color: #667085;
    font-size: 14px;
    line-height: 1.65;
  }

  .os-processing-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 10px 14px;
    border-radius: 999px;
    background: #fbfcfd;
    border: 1px solid #e5e7eb;
    color: #111827;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
  }

  .os-processing-note {
    margin-top: 14px;
    color: #9aa3b2;
    font-size: 12px;
    line-height: 1.55;
  }

  .os-product-row-card {
    min-width: 48% !important;
    max-width: 48% !important;
    flex: 0 0 48% !important;
    grid-template-columns: 42px 110px minmax(0, 1fr) auto !important;
  }

  .os-product-row-img {
    background: #f8fafc !important;
  }

  .os-product-row-img img {
    object-fit: cover !important;
  }

  @media (max-width: 991px) {
    .os-product-row-card {
      min-width: 75% !important;
      max-width: 75% !important;
      flex-basis: 75% !important;
    }
  }

  @media (max-width: 575px) {
    .os-product-row-card {
      min-width: 88% !important;
      max-width: 88% !important;
      flex-basis: 88% !important;
      grid-template-columns: 34px 82px minmax(0, 1fr) !important;
    }
  }


  .macaash-summary-card {
    margin-bottom: 16px;
    padding: 15px 16px;
    border: 1px solid #f2c6cb;
    border-radius: 14px;
    background: #fff7f8;
    color: #7c0309;
  }
  .macaash-summary-card strong { display:block; font-size:15px; margin-bottom:5px; }
  .macaash-summary-card span { color:#374151; font-size:13px; }


/* ================= item_list.html style block 1 ================= */
[data-product-card].is-soldout,
  .product-click-card.is-soldout {
    position: relative;
  }

  [data-product-card].is-soldout::before,
  .product-click-card.is-soldout::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(173, 6, 14, 0.03) 100%);
    pointer-events: none;
    z-index: 1;
  }

  [data-product-card].is-soldout .soldout-badge,
  .product-click-card.is-soldout .soldout-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px 14px 8px 10px;
    border-radius: 18px;
    background: linear-gradient(135deg, #d80e16 0%, #a5060d 100%);
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(173, 6, 14, 0.24);
    pointer-events: none;
  }

  [data-product-card].is-soldout .soldout-badge-icon,
  .product-click-card.is-soldout .soldout-badge-icon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  [data-product-card].is-soldout .soldout-badge-icon svg,
  .product-click-card.is-soldout .soldout-badge-icon svg {
    width: 14px;
    height: 14px;
    display: block;
  }

  [data-product-card].is-soldout .soldout-badge-text,
  .product-click-card.is-soldout .soldout-badge-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.05;
  }

  [data-product-card].is-soldout .soldout-badge-text strong,
  .product-click-card.is-soldout .soldout-badge-text strong {
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  [data-product-card].is-soldout .soldout-badge-text small,
  .product-click-card.is-soldout .soldout-badge-text small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  [data-product-card].is-soldout img,
  .product-click-card.is-soldout img {
    filter: saturate(0.94) contrast(0.98);
  }

  .js-add-cart.is-soldout,
  .js-add-cart:disabled {
    cursor: not-allowed !important;
    opacity: 1;
    filter: none;
    border: 1px solid rgba(173, 6, 14, 0.14) !important;
    background: linear-gradient(180deg, #fff7f7 0%, #f7f0f1 100%) !important;
    color: #9f1118 !important;
    box-shadow: none !important;
  }

  .js-add-cart.is-soldout .soldout-btn-wrap,
  .js-add-cart:disabled .soldout-btn-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    white-space: nowrap;
  }

  .js-add-cart.is-soldout .soldout-btn-icon,
  .js-add-cart:disabled .soldout-btn-icon {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(173, 6, 14, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .js-add-cart.is-soldout .soldout-btn-icon svg,
  .js-add-cart:disabled .soldout-btn-icon svg {
    width: 13px;
    height: 13px;
    display: block;
  }

  .js-add-cart.is-soldout .soldout-btn-label,
  .js-add-cart:disabled .soldout-btn-label {
    color: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
  }

  .top-selling-cart.is-soldout {
    min-width: 92px;
    min-height: 52px;
    padding: 0 12px !important;
    border-radius: 16px !important;
  }

  .top-selling-cart.is-soldout .soldout-btn-label {
    font-size: 11px;
  }

  @media (max-width: 767px) {
    [data-product-card].is-soldout .soldout-badge,
    .product-click-card.is-soldout .soldout-badge {
      top: 12px;
      right: 12px;
      min-height: 40px;
      padding: 7px 12px 7px 9px;
      gap: 8px;
      border-radius: 16px;
    }

    [data-product-card].is-soldout .soldout-badge-icon,
    .product-click-card.is-soldout .soldout-badge-icon {
      width: 22px;
      height: 22px;
    }

    [data-product-card].is-soldout .soldout-badge-text strong,
    .product-click-card.is-soldout .soldout-badge-text strong {
      font-size: 10px;
    }

    [data-product-card].is-soldout .soldout-badge-text small,
    .product-click-card.is-soldout .soldout-badge-text small {
      font-size: 9px;
    }
  }

  .stock-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(17, 24, 39, .52);
  }

    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(17, 24, 39, .52);
  }
  .stock-modal-backdrop.is-open { display: flex; }
  .stock-modal-card {
    width: min(430px, 100%);
    border-radius: 24px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(15, 23, 42, .28);
    text-align: center;
  }
  .stock-modal-top {
    padding: 28px 26px 18px;
    background: linear-gradient(180deg, #fff3f4 0%, #ffffff 100%);
  }
  .stock-modal-icon {
    width: 66px;
    height: 66px;
    margin: 0 auto 14px;
    border-radius: 22px;
    background: #ad060e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
  }

  .stock-modal-icon svg {
    width: 32px;
    height: 32px;
    display: block;
  }
  .stock-modal-card h3 {
    margin: 0 0 9px;
    color: #111827;
    font-size: 22px;
    font-weight: 800;
  }
  .stock-modal-card p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.65;
  }
  .stock-modal-actions { padding: 0 26px 26px; }
  .stock-modal-close {
    width: 100%;
    min-height: 46px;
    border: none;
    border-radius: 999px;
    background: #ad060e;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }


/* ================= item_list.html style block 2 ================= */
.product-click-card {
    cursor: pointer;
  }

  .product-click-card a,
  .product-click-card button {
    cursor: pointer;
  }

  .product-rating-ui {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.35;
  }

  .dynamic-stars {
    position: relative;
    display: inline-block;
    color: #d1d5db;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  .dynamic-stars-empty {
    color: #d1d5db;
  }

  .dynamic-stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    overflow: hidden;
    color: #f5a623;
    white-space: nowrap;
    pointer-events: none;
  }

  .product-rating-ui .rating-label {
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
  }

  .product-rating-ui .rating-divider {
    color: #cbd5e1;
    font-weight: 400;
  }

  .product-rating-ui .rating-reviews {
    color: #64748b;
    margin: 0;
    white-space: nowrap;
  }

  .product-rating-ui-light .rating-label,
  .product-rating-ui-light .rating-reviews {
    color: rgba(255, 255, 255, 0.88);
  }

  .product-rating-ui-light .rating-divider {
    color: rgba(255, 255, 255, 0.55);
  }


  /* Added spacing between rating row and progress line - no logic changed */
  .plist-body .product-rating-ui,
  .deal-week-info .product-rating-ui,
  .top-selling-main .product-rating-ui,
  .top-selling-content .product-rating-ui,
  .trending-new-body .product-rating-ui,
  .featured-new-big-content .product-rating-ui,
  .featured-new-info .product-rating-ui {
    margin-bottom: 12px;
  }

  .plist-progress,
  .deal-week-progress {
    margin-top: 0;
  }

  .top-selling-main .home-price-row,
  .top-selling-content .home-price-row,
  .trending-new-body .home-price-row,
  .featured-new-big-content .home-price-row,
  .featured-new-info .home-price-row {
    margin-top: 10px;
  }


  /* Category / Product Type click fix - no color change */
  .plist-sidebar-filter,
  .plist-sidebar-card,
  .plist-filter-grid,
  .plist-field,
  .plist-search-select {
    position: relative;
  }

  .plist-search-select {
    z-index: 20;
  }

  .plist-search-select.is-open {
    z-index: 99999;
  }

  .plist-search-select-btn,
  .plist-search-select-option {
    cursor: pointer;
    pointer-events: auto;
  }

  .plist-search-select-menu {
    z-index: 99999;
    pointer-events: auto;
  }

  .plist-search-select-search,
  .plist-search-select-options,
  .plist-search-select-option {
    pointer-events: auto;
  }


/* ================= item_list.html style block 3 ================= */
/* Hard dropdown click fix only. Colors/design are not changed. */
  .plist-page-with-sidebar,
  .plist-layout,
  .plist-sidebar-filter,
  .plist-sidebar-card,
  .plist-filter,
  .plist-filter-sidebar,
  .plist-filter-grid,
  .plist-field,
  .plist-search-select {
    overflow: visible !important;
  }

  .plist-sidebar-filter,
  .plist-sidebar-card,
  .plist-filter,
  .plist-filter-grid,
  .plist-field {
    position: relative !important;
  }

  .plist-field-select-open {
    z-index: 2147483000 !important;
  }

  .plist-search-select {
    position: relative !important;
    z-index: 10 !important;
  }

  .plist-search-select.is-open {
    z-index: 2147483001 !important;
  }

  .plist-search-select-btn {
    position: relative !important;
    z-index: 3 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  .plist-search-select-btn *,
  .plist-search-select-menu *,
  .plist-search-select-option {
    pointer-events: auto !important;
  }

  .plist-search-select-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: none !important;
    z-index: 2147483002 !important;
    pointer-events: auto !important;
  }

  .plist-search-select.is-open .plist-search-select-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .plist-search-select-search,
  .plist-search-select-options,
  .plist-search-select-option,
  .plist-search-select-search input {
    position: relative !important;
    z-index: 2147483003 !important;
    pointer-events: auto !important;
  }

  .plist-search-select-option {
    cursor: pointer !important;
    touch-action: manipulation !important;
    user-select: none !important;
  }

  .plist-search-select-search input {
    user-select: text !important;
  }


/* ================= cart.html style block 1 ================= */
/* Cart login required box */
  .cart-section .cart-login-required {
    padding: 55px 20px;
    text-align: center;
  }

  .cart-section .cart-login-required h2 {
    margin: 0 0 10px;
    color: #111827;
    font-size: 26px;
    font-weight: 700;
  }

  .cart-section .cart-login-required p {
    margin: 0 0 24px;
    color: #6b7280;
    font-size: 15px;
    font-weight: 400;
  }

  .cart-section .cart-login-btn {
    min-width: 150px;
    min-height: 44px;
    padding: 0 26px;
    border-radius: 999px;
    background: #c31f26;
    color: #ffffff !important;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
  }

  .cart-section .cart-login-btn:hover {
    background: #a71920;
    color: #ffffff !important;
    transform: translateY(-1px);
  }

  .cart-section .cart-login-btn i {
    font-size: 16px;
    color: inherit;
  }


  .stock-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(17, 24, 39, .52);
  }

  .stock-modal-backdrop.is-open { display: flex; }

  .stock-modal-card {
    width: min(430px, 100%);
    border-radius: 24px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(15, 23, 42, .28);
    text-align: center;
  }

  .stock-modal-top {
    padding: 28px 26px 18px;
    background: linear-gradient(180deg, #fff3f4 0%, #ffffff 100%);
  }

  .stock-modal-icon {
    width: 66px;
    height: 66px;
    margin: 0 auto 14px;
    border-radius: 22px;
    background: #ad060e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
  }

  .stock-modal-icon svg {
    width: 32px;
    height: 32px;
    display: block;
  }

  .stock-modal-card h3 {
    margin: 0 0 9px;
    color: #111827;
    font-size: 22px;
    font-weight: 800;
  }

  .stock-modal-card p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.65;
  }

  .stock-modal-actions { padding: 0 26px 26px; }

  .stock-modal-close {
    width: 100%;
    min-height: 46px;
    border: none;
    border-radius: 999px;
    background: #ad060e;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }


/* ================= cart_detail.html style block 1 ================= */
.product-rating-ui {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    line-height: 1.4;
  }

  .cdp-rating.product-rating-ui {
    margin-bottom: 14px;
  }

  .rating-stars-wrap {
    position: relative;
    display: inline-block;
    width: 78px;
    min-width: 78px;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    letter-spacing: 1px;
    overflow: hidden;
    vertical-align: middle;
  }

  .rating-stars-empty,
  .rating-stars-fill {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 16px;
  }

  .rating-stars-empty {
    color: #d8dde6;
  }

  .rating-stars-fill {
    color: #f5a623;
    overflow: hidden;
  }

  .rating-label {
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
  }

  .rating-divider {
    color: #c4c4c4;
    font-weight: 400;
  }

  .rating-reviews {
    color: #5f6f8a;
    white-space: nowrap;
  }

  .cdp-similar-card.js-product-card {
    cursor: pointer;
  }

  .cdp-similar-card.js-product-card:hover .cdp-similar-name a,
  .cdp-similar-card.js-product-card:hover .cdp-similar-link {
    color: inherit;
    text-decoration: underline;
  }

  .cdp-similar-meta.product-rating-ui {
    gap: 7px;
    margin-top: 8px;
    margin-bottom: 14px;
  }

  .cdp-similar-meta .rating-label,
  .cdp-similar-meta .rating-reviews {
    font-size: 13px;
  }

  @media (max-width: 575px) {
    .cdp-similar-meta.product-rating-ui {
      gap: 6px;
    }

    .cdp-similar-meta .rating-label,
    .cdp-similar-meta .rating-reviews {
      font-size: 12px;
    }
  }

  /* =========================================================
     SIMILAR PRODUCTS CARD DESIGN LIKE SHARED IMAGE
     Added only for Similar Products design. Old logic is unchanged.
  ========================================================= */
  .cdp-similar-row-wrap {
    width: 100%;
    overflow: hidden;
  }

  .cdp-similar-row {
    gap: 22px !important;
    padding: 4px 2px 12px;
    align-items: stretch;
    scroll-behavior: smooth;
  }

  .dotw-card.cdp-similar-card {
    flex: 0 0 320px !important;
    width: 320px !important;
    max-width: 320px !important;
    min-height: 480px;
    padding: 16px !important;
    border: 1px solid #f0d8df !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 7px rgba(17, 24, 39, 0.04) !important;
    cursor: pointer;
    overflow: hidden;
  }

  .dotw-card.cdp-similar-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.08) !important;
  }

  .dotw-card.cdp-similar-card .dotw-badge {
    top: 16px !important;
    left: 16px !important;
    height: 33px !important;
    min-width: 54px !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    background: #d71920 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 33px !important;
    letter-spacing: .2px;
    text-transform: uppercase;
    z-index: 2;
  }

  .dotw-card.cdp-similar-card .dotw-badge--new,
  .dotw-card.cdp-similar-card .dotw-badge--sale {
    background: #d71920 !important;
    color: #ffffff !important;
  }

  .cdp-similar-img {
    display: block !important;
    width: 100% !important;
    height: 215px !important;
    margin: 0 0 17px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #f8fafc;
  }

  .cdp-similar-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .cdp-similar-name {
    min-height: 31px;
    margin: 0 0 18px !important;
    color: #1f2937 !important;
    font-size: 18px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
  }

  .cdp-similar-name a,
  .cdp-similar-link {
    color: inherit !important;
    text-decoration: none !important;
  }

  .cdp-similar-card.js-product-card:hover .cdp-similar-name a,
  .cdp-similar-card.js-product-card:hover .cdp-similar-link {
    color: inherit !important;
    text-decoration: none !important;
  }

  .cdp-similar-meta.product-rating-ui {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 0 14px !important;
    border-bottom: 3px solid #eef1f5;
    color: #7b8798;
  }

  .cdp-similar-meta .rating-stars-wrap {
    width: 78px;
    min-width: 78px;
    height: 16px;
    line-height: 16px;
  }

  .cdp-similar-meta .rating-stars-empty,
  .cdp-similar-meta .rating-stars-fill {
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 1px;
  }

  .cdp-similar-meta .rating-label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #8a93a5 !important;
    white-space: nowrap;
  }

  .cdp-similar-meta .rating-divider {
    margin-left: auto;
    color: #c5ccd8 !important;
    font-size: 16px;
    font-weight: 400;
  }

  .cdp-similar-meta .rating-reviews {
    font-size: 12px !important;
    color: #6f7f99 !important;
    white-space: nowrap;
  }

  .cdp-similar-sold {
    margin-top: 11px;
    color: #73839a;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
  }

  .cdp-similar-sold strong {
    color: #66758d;
    font-weight: 700;
  }

  .cdp-similar-price {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    margin-top: 12px !important;
    padding-top: 0 !important;
    min-height: 26px;
  }

  .cdp-similar-price .old {
    color: #a6adba !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: line-through !important;
  }

  .cdp-similar-price .now {
    color: #111827 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px;
  }

  .cdp-similar-price .qty {
    color: #6b7280 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  .cdp-similar-btn {
    width: 100% !important;
    height: 44px !important;
    margin-top: 20px !important;
    border: 1px solid #e6eaf1 !important;
    border-radius: 10px !important;
    background: #f9fafc !important;
    color: #1f2937 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
  }

  .cdp-similar-btn:hover {
    background: #ffffff !important;
    border-color: #d9dee8 !important;
    color: #111827 !important;
  }

  .cdp-similar-btn i {
    margin-left: 8px;
    font-size: 18px;
    vertical-align: -2px;
  }

  @media (max-width: 767px) {
    .dotw-card.cdp-similar-card {
      flex-basis: 320px !important;
      width: 320px !important;
      max-width: 320px !important;
    }
  }



  /* =========================================================
     FIX SIMILAR PRODUCTS CARD SAME HEIGHT
     Added only for card alignment. Old logic is unchanged.
  ========================================================= */
  .cdp-similar-row {
    align-items: stretch !important;
  }

  .dotw-card.cdp-similar-card {
    height: 484px !important;
    min-height: 484px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .cdp-similar-img {
    flex: 0 0 215px !important;
  }

  .cdp-similar-name {
    min-height: 50px !important;
    max-height: 50px !important;
    margin-bottom: 13px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  .cdp-similar-meta.product-rating-ui {
    min-height: 34px !important;
    flex: 0 0 auto !important;
  }

  .cdp-similar-sold {
    min-height: 20px !important;
    flex: 0 0 auto !important;
  }

  .cdp-similar-price {
    min-height: 28px !important;
    flex: 0 0 auto !important;
  }

  .cdp-similar-btn {
    margin-top: auto !important;
    flex: 0 0 44px !important;
  }

  @media (max-width: 767px) {
    .dotw-card.cdp-similar-card {
      height: 484px !important;
      min-height: 484px !important;
    }
  }


  /* =========================================================
     CUSTOMER REVIEW + WRITE REVIEW DESIGN LIKE SHARED IMAGE
     Added only for rating/review UI. Old product/cart logic is unchanged.
  ========================================================= */
  .cdp-review-section {
    margin-top: 48px;
    padding: 28px 0 8px;
    border-top: 1px solid #eef0f4;
    font-family: inherit;
  }

  .cdp-review-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 438px;
    gap: 28px;
    align-items: stretch;
    margin-bottom: 18px;
  }

  .cdp-review-score-card {
    min-height: 128px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .cdp-review-score-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .cdp-review-score-line strong {
    color: #111827;
    font-size: 48px;
    line-height: .95;
    font-weight: 750;
    letter-spacing: -1.5px;
  }

  .cdp-review-score-line .rating-stars-wrap {
    width: 128px;
    min-width: 128px;
    height: 24px;
    line-height: 24px;
  }

  .cdp-review-score-line .rating-stars-empty,
  .cdp-review-score-line .rating-stars-fill {
    font-size: 24px;
    line-height: 24px;
    letter-spacing: 1px;
  }

  .cdp-review-score-line > span {
    color: #111827;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;
  }

  .cdp-review-score-card p {
    margin: 8px 0 0 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
  }

  .cdp-review-score-card p span {
    color: #138f19;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .cdp-review-score-card p i {
    color: #138f19;
    font-size: 16px;
    vertical-align: -2px;
    margin-left: 3px;
  }

  .cdp-review-metrics {
    padding: 18px 20px;
    border-radius: 8px;
    background: #f8f8f8;
  }

  .cdp-review-metric-row {
    display: grid;
    grid-template-columns: 150px minmax(80px, 1fr) 30px;
    gap: 12px;
    align-items: center;
    min-height: 35px;
  }

  .cdp-review-metric-row span {
    color: #111827;
    font-size: 14px;
    font-weight: 400;
  }

  .cdp-review-meter {
    height: 4px;
    border-radius: 999px;
    background: #ececec;
    overflow: hidden;
  }

  .cdp-review-meter b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #ff5a00;
  }

  .cdp-review-metric-row strong {
    color: #111827;
    font-size: 14px;
    font-weight: 500;
    text-align: right;
  }

  .cdp-review-filter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 8px 0 24px;
  }

  .cdp-review-filter {
    min-height: 33px;
    padding: 0 17px;
    border: 1px solid #d8dce2;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
    line-height: 31px;
    font-weight: 400;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }

  .cdp-review-filter.is-active {
    border-color: #111827;
    box-shadow: inset 0 0 0 1px #111827;
    font-weight: 700;
  }

  .cdp-review-sort {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #111827;
    font-size: 14px;
  }

  .cdp-review-sort strong {
    font-weight: 700;
  }

  .cdp-review-mentions {
    margin: 0 0 26px;
  }

  .cdp-review-mentions > strong {
    display: block;
    margin-bottom: 13px;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
  }

  .cdp-review-mentions div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .cdp-review-mentions button {
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid #dde1e7;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    font-size: 14px;
    font-weight: 400;
  }

  .cdp-review-language-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 22px;
    color: #6b7280;
    font-size: 14px;
  }

  .cdp-review-language-note i {
    color: #8b919b;
    font-size: 17px;
  }

  .cdp-review-language-note button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #111827;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: 14px;
    cursor: pointer;
  }

  .cdp-review-body {
    display: block;
  }

  .cdp-review-list {
    display: flex;
    flex-direction: column;
  }

  .cdp-review-item {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 18px;
    padding: 22px 0 24px;
    border-bottom: 1px solid #e8eaee;
    background: #ffffff;
  }

  .cdp-review-customer {
    min-width: 0;
  }

  .cdp-review-avatar-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
  }

  .cdp-review-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    background: #e04600;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex: 0 0 auto;
  }

  .cdp-review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .cdp-review-name {
    margin: 0;
    color: #111827;
    font-size: 14px;
    line-height: 1.15;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cdp-review-country,
  .cdp-review-verified {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    color: #138f19;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 400;
  }

  .cdp-review-country i,
  .cdp-review-verified i {
    color: #138f19;
    font-size: 13px;
  }

  .cdp-review-content {
    min-width: 0;
  }

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

  .cdp-review-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    color: #ff5a00;
    font-size: 17px;
    line-height: 1;
    letter-spacing: .3px;
    white-space: nowrap;
  }

  .cdp-review-stars .is-empty {
    color: #e4e6eb;
  }

  .cdp-review-date {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 400;
    white-space: nowrap;
  }

  .cdp-review-text {
    margin: 0 0 9px;
    color: #111827;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 400;
  }

  .cdp-review-product-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px 7px 7px;
    border-radius: 5px;
    background: #f4f4f5;
    color: #4b5563;
  }

  .cdp-review-product-strip img {
    width: 34px;
    height: 34px;
    border-radius: 5px;
    object-fit: cover;
    background: #ffffff;
    flex: 0 0 auto;
  }

  .cdp-review-product-meta {
    min-width: 0;
    flex: 1;
  }

  .cdp-review-product-name {
    color: #4b5563;
    font-size: 14px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cdp-review-product-price {
    margin-top: 2px;
    color: #111827;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
  }

  .cdp-review-product-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #111827;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }

  .cdp-helpful-btn {
    margin-top: 11px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 400;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .cdp-helpful-btn i {
    color: #6b7280;
    font-size: 15px;
  }

  .cdp-helpful-btn:hover,
  .cdp-helpful-btn.is-active {
    color: #138f19;
  }

  .cdp-helpful-btn:hover i,
  .cdp-helpful-btn.is-active i {
    color: #138f19;
  }

  .cdp-review-empty {
    display: none !important;
  }

  .cdp-write-review {
    max-width: 600px;
    margin-top: 28px;
    padding: 22px;
    border: 1px solid #eef0f4;
    border-radius: 12px;
    background: #ffffff;
  }

  .cdp-write-review h3 {
    margin: 0 0 14px;
    color: #111827;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.25px;
  }

  .cdp-write-card {
    padding: 20px;
    border: 1px solid #f0f1f4;
    border-radius: 14px;
    background: #f8f8f9;
  }

  .cdp-write-stars {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
  }

  .cdp-write-star {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #e0e3e8;
    font-size: 34px;
    line-height: 32px;
    cursor: pointer;
    transition: color .16s ease, transform .16s ease;
  }

  .cdp-write-star:hover {
    transform: translateY(-1px);
  }

  .cdp-write-star.is-active,
  .cdp-write-star.is-hover {
    color: #ff5a00;
  }

  #productReviewComment {
    width: 100%;
    min-height: 86px;
    border: 0;
    outline: none;
    resize: vertical;
    background: transparent;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 400;
  }

  #productReviewComment::placeholder {
    color: #7a7d84;
    opacity: 1;
  }

  .cdp-submit-review {
    min-width: 180px;
    min-height: 46px;
    margin: 14px 0 0;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: #c91f2a;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
    cursor: pointer;
    transition: background .16s ease, transform .16s ease;
  }

  .cdp-submit-review:hover {
    background: #b81924;
    transform: translateY(-1px);
  }

  .cdp-submit-review:disabled {
    opacity: .72;
    cursor: not-allowed;
    transform: none;
  }

  @media (max-width: 991px) {
    .cdp-review-layout {
      grid-template-columns: 1fr;
      gap: 30px;
    }

    .cdp-review-head {
      align-items: flex-start;
      flex-direction: column;
    }
  }

  @media (max-width: 575px) {
    .cdp-review-title,
    .cdp-write-review h3 {
      font-size: 25px;
    }

    .cdp-review-top {
      grid-template-columns: 45px minmax(0, 1fr);
    }

    .cdp-review-stars {
      grid-column: 2 / 3;
      margin-top: 2px;
      font-size: 24px;
      justify-self: start;
    }

    .cdp-review-text {
      font-size: 16px;
    }

    .cdp-write-card {
      min-height: 220px;
      padding: 24px 16px 20px;
    }

    .cdp-submit-review {
      min-height: 60px;
      font-size: 18px;
    }
  }



  /* Review section responsive fixes */
  @media (max-width: 991px) {
    .cdp-review-overview {
      grid-template-columns: 1fr;
    }

    .cdp-review-metrics {
      max-width: 100%;
    }

    .cdp-review-sort {
      width: 100%;
      margin-left: 0;
      justify-content: flex-start;
      padding-top: 4px;
    }
  }

  @media (max-width: 767px) {
    .cdp-review-score-line strong {
      font-size: 40px;
    }

    .cdp-review-metric-row {
      grid-template-columns: 128px minmax(60px, 1fr) 30px;
    }

    .cdp-review-item {
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .cdp-review-customer {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px 12px;
    }

    .cdp-review-avatar-row {
      margin-bottom: 0;
    }

    .cdp-review-country,
    .cdp-review-verified {
      margin-top: 0;
    }

    .cdp-review-product-strip {
      align-items: flex-start;
    }

    .cdp-review-product-link {
      display: none;
    }
  }

  @media (max-width: 575px) {
    .cdp-review-filter-row,
    .cdp-review-mentions div {
      gap: 8px;
    }

    .cdp-review-filter,
    .cdp-review-mentions button {
      padding: 0 12px;
      font-size: 13px;
    }

    .cdp-review-metric-row {
      grid-template-columns: 1fr;
      gap: 5px;
      padding: 7px 0;
    }

    .cdp-review-metric-row strong {
      text-align: left;
    }
  }

  /* =========================================================
     RATING OVERVIEW LIKE SHARED IMAGE
     Shows real average + 5-to-1 distribution. Hidden when no rating.
  ========================================================= */
  .cdp-review-overview.is-hidden {
    display: none !important;
  }

  .cdp-review-overview {
    display: grid;
    grid-template-columns: 170px minmax(280px, 420px);
    gap: 26px;
    align-items: start;
    justify-content: flex-start;
    margin-bottom: 24px;
  }

  .cdp-review-score-card {
    min-height: 0;
    display: block;
    padding: 0;
    background: transparent;
  }

  .cdp-review-main-score {
    display: block;
    margin: 0 0 8px;
    color: #1f2d44;
    font-size: 34px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: -0.8px;
  }

  .cdp-review-score-stars {
    margin-bottom: 8px;
  }

  .rating-stars-wrap--large {
    width: 118px !important;
    min-width: 118px !important;
    height: 23px !important;
    line-height: 23px !important;
  }

  .rating-stars-wrap--large .rating-stars-empty,
  .rating-stars-wrap--large .rating-stars-fill {
    font-size: 22px !important;
    line-height: 23px !important;
    letter-spacing: 1px !important;
  }

  .cdp-review-score-card p {
    margin: 0;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 400;
  }

  .cdp-review-breakdown {
    width: 100%;
    padding-top: 3px;
  }

  .cdp-rating-bar-row {
    display: grid;
    grid-template-columns: 24px minmax(160px, 320px) 44px;
    gap: 8px;
    align-items: center;
    min-height: 24px;
  }

  .cdp-rating-bar-label {
    color: #24304a;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
  }

  .cdp-rating-bar-label i {
    color: #8bb400;
    font-size: 15px;
    font-style: normal;
    vertical-align: -1px;
  }

  .cdp-rating-bar-row[data-star="3"] .cdp-rating-bar-label i {
    color: #f6b23c;
  }

  .cdp-rating-bar-row[data-star="2"] .cdp-rating-bar-label i,
  .cdp-rating-bar-row[data-star="1"] .cdp-rating-bar-label i {
    color: #ff6b2c;
  }

  .cdp-rating-track {
    height: 8px;
    border-radius: 999px;
    background: #f1f2f6;
    overflow: hidden;
  }

  .cdp-rating-track b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #2dae0b;
    transition: width .2s ease;
  }

  .cdp-rating-bar-row[data-star="1"] .cdp-rating-track b,
  .cdp-rating-bar-row[data-star="2"] .cdp-rating-track b {
    background: #ff6b2c;
  }

  .cdp-rating-bar-row strong {
    color: #1f2d44;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    text-align: right;
  }

  .cdp-write-review {
    width: 100%;
    max-width: 600px;
    margin-top: 26px;
    padding: 22px;
    border: 1px solid #e7ebf1;
    border-radius: 12px;
    background: #ffffff;
  }

  .cdp-write-review h3 {
    margin: 0 0 14px;
    color: #020b1c;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 750;
  }

  .cdp-write-card {
    min-height: 180px;
    padding: 24px 20px;
    border: 1px solid #eaedf2;
    border-radius: 13px;
    background: #f8f8f9;
  }

  .cdp-write-stars {
    gap: 8px;
    margin-bottom: 15px;
  }

  .cdp-write-star {
    width: 30px;
    height: 31px;
    color: #d8dde6;
    font-size: 32px;
    line-height: 31px;
  }

  .cdp-write-star.is-active,
  .cdp-write-star.is-hover {
    color: #ff5a00;
  }

  #productReviewComment {
    min-height: 74px;
    color: #4b5563;
    font-size: 14px;
  }

  .cdp-submit-review {
    min-width: 180px;
    min-height: 46px;
    margin-top: 15px;
    border-radius: 999px;
    background: #d41928;
    font-size: 14px;
    font-weight: 700;
  }

  .cdp-submit-review:hover {
    background: #bd1522;
  }

  @media (max-width: 767px) {
    .cdp-review-overview {
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .cdp-rating-bar-row {
      grid-template-columns: 28px minmax(150px, 1fr) 44px;
    }

    .cdp-write-review {
      max-width: 100%;
      padding: 18px;
    }
  }


  /* =========================================================
     MOVE WRITE REVIEW TO RIGHT SIDE OF RATING AREA
     Added only for review layout position. Old logic is unchanged.
  ========================================================= */
  .cdp-review-top-area {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 560px);
    gap: 28px;
    align-items: start;
    margin-bottom: 22px;
  }

  .cdp-review-top-area--no-rating {
    grid-template-columns: minmax(0, 560px);
  }

  .cdp-review-overview {
    margin-bottom: 0 !important;
  }

  .cdp-review-overview.is-hidden {
    display: none !important;
  }

  .cdp-write-review.cdp-write-review--top {
    width: 100%;
    max-width: none;
    margin-top: 0 !important;
    box-sizing: border-box;
  }

  .cdp-write-review.cdp-write-review--top .cdp-write-card {
    min-height: 180px;
  }

  .cdp-write-review.cdp-write-review--top #productReviewComment {
    min-height: 92px;
  }

  .cdp-review-body {
    margin-top: 0;
  }

  @media (max-width: 1199px) {
    .cdp-review-top-area {
      grid-template-columns: minmax(0, 1fr) minmax(380px, 500px);
      gap: 24px;
    }
  }

  @media (max-width: 991px) {
    .cdp-review-top-area,
    .cdp-review-top-area--no-rating {
      grid-template-columns: 1fr;
    }

    .cdp-write-review.cdp-write-review--top {
      max-width: 600px;
    }
  }

  @media (max-width: 575px) {
    .cdp-write-review.cdp-write-review--top {
      padding: 18px;
    }

    .cdp-write-review.cdp-write-review--top .cdp-write-card {
      min-height: 190px;
    }
  }



  /* =========================================================
     FINAL FIX: SAME HEIGHT + PROJECT PRIMARY COLOR (#c31f26)
     Only review/rating styling changed. Old product logic unchanged.
  ========================================================= */
  :root {
    --cdp-project-primary: #c31f26;
    --cdp-project-primary-dark: #a8171e;
    --cdp-project-primary-soft: rgba(195, 31, 38, 0.10);
    --cdp-project-text: #111827;
    --cdp-project-muted: #6b7280;
    --cdp-project-border: #e7ebf1;
    --cdp-project-soft-bg: #fafafa;
  }

  .cdp-review-top-area {
    align-items: stretch !important;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 560px) !important;
    gap: 30px !important;
  }

  .cdp-review-overview,
  .cdp-write-review.cdp-write-review--top {
    min-height: 344px !important;
    height: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid var(--cdp-project-border) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.02) !important;
  }

  .cdp-review-overview {
    display: grid !important;
    grid-template-columns: 170px minmax(280px, 420px) !important;
    gap: 26px !important;
    align-content: start !important;
    align-items: start !important;
    padding: 26px 28px !important;
    margin-bottom: 0 !important;
  }

  .cdp-review-overview.is-hidden {
    display: none !important;
  }

  .cdp-write-review.cdp-write-review--top {
    display: flex !important;
    flex-direction: column !important;
    padding: 22px !important;
    margin-top: 0 !important;
  }

  .cdp-write-review.cdp-write-review--top h3 {
    color: var(--cdp-project-text) !important;
    font-size: 22px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    margin: 0 0 16px !important;
  }

  .cdp-write-review.cdp-write-review--top .cdp-write-card {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 24px 20px !important;
    border: 1px solid #eceff4 !important;
    border-radius: 12px !important;
    background: #f8f8f9 !important;
  }

  .cdp-write-review.cdp-write-review--top #productReviewComment {
    min-height: 118px !important;
    color: #374151 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .cdp-review-main-score,
  .cdp-rating-bar-row strong,
  .cdp-rating-bar-label,
  .cdp-write-review h3,
  .cdp-review-name,
  .cdp-review-text,
  .cdp-review-product-price,
  .cdp-review-product-link {
    color: var(--cdp-project-text) !important;
  }

  .cdp-review-score-card p,
  .cdp-review-date,
  .cdp-helpful-btn,
  .cdp-review-product-name {
    color: var(--cdp-project-muted) !important;
  }

  .cdp-review-score-stars .rating-stars-fill,
  .cdp-write-star.is-active,
  .cdp-write-star.is-hover,
  .cdp-review-stars,
  .cdp-rating-bar-label i,
  .cdp-rating-bar-row[data-star="3"] .cdp-rating-bar-label i,
  .cdp-rating-bar-row[data-star="2"] .cdp-rating-bar-label i,
  .cdp-rating-bar-row[data-star="1"] .cdp-rating-bar-label i {
    color: var(--cdp-project-primary) !important;
  }

  .cdp-rating-track b,
  .cdp-rating-bar-row[data-star="1"] .cdp-rating-track b,
  .cdp-rating-bar-row[data-star="2"] .cdp-rating-track b {
    background: var(--cdp-project-primary) !important;
  }

  .cdp-review-avatar {
    background: var(--cdp-project-primary) !important;
  }

  .cdp-review-country,
  .cdp-review-verified,
  .cdp-review-country i,
  .cdp-review-verified i,
  .cdp-helpful-btn:hover,
  .cdp-helpful-btn.is-active,
  .cdp-helpful-btn:hover i,
  .cdp-helpful-btn.is-active i {
    color: var(--cdp-project-primary) !important;
  }

  .cdp-submit-review {
    min-width: 180px !important;
    min-height: 46px !important;
    margin-top: 16px !important;
    border-radius: 999px !important;
    background: var(--cdp-project-primary) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border: 0 !important;
  }

  .cdp-submit-review:hover {
    background: var(--cdp-project-primary-dark) !important;
  }

  .cdp-review-top-area--no-rating {
    grid-template-columns: minmax(0, 560px) !important;
  }

  @media (max-width: 1199px) {
    .cdp-review-top-area {
      grid-template-columns: minmax(0, 1fr) minmax(380px, 500px) !important;
      gap: 24px !important;
    }
  }

  @media (max-width: 991px) {
    .cdp-review-top-area,
    .cdp-review-top-area--no-rating {
      grid-template-columns: 1fr !important;
    }

    .cdp-review-overview,
    .cdp-write-review.cdp-write-review--top {
      min-height: auto !important;
    }

    .cdp-write-review.cdp-write-review--top {
      max-width: 600px !important;
    }
  }

  @media (max-width: 767px) {
    .cdp-review-overview {
      grid-template-columns: 1fr !important;
      gap: 18px !important;
      padding: 22px !important;
    }
  }

  @media (max-width: 575px) {
    .cdp-write-review.cdp-write-review--top,
    .cdp-review-overview {
      padding: 18px !important;
    }
  }


  /* =========================================================
     REVIEW LIKE / DISLIKE BUTTONS
     Added only for review reaction. Old logic is unchanged.
  ========================================================= */
  .cdp-review-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
  }

  .cdp-reaction-btn {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #6b7280;
    font-size: 13px;
    line-height: 1;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
  }

  .cdp-reaction-btn i {
    font-size: 16px;
    line-height: 1;
    color: inherit;
  }

  .cdp-reaction-btn:hover,
  .cdp-reaction-btn.is-active {
    color: var(--cdp-project-primary) !important;
    border-color: rgba(195, 31, 38, .35);
    background: rgba(195, 31, 38, .06);
  }

  .cdp-reaction-btn:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
  }

  .cdp-dislike-btn:hover,
  .cdp-dislike-btn.is-active {
    color: var(--cdp-project-primary) !important;
  }


  /* =========================================================
     FINAL FIX: PRODUCT ACTION ICONS DISPLAY WELL
     Only icon/button styling changed. Old logic is unchanged.
  ========================================================= */
  .cdp-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }

  .cdp-actions .cdp-ic {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease !important;
    overflow: visible !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  .cdp-actions .cdp-ic i,
  .cdp-actions .cdp-ic svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    color: currentColor !important;
    font-size: 18px !important;
    line-height: 1 !important;
    text-align: center !important;
    vertical-align: middle !important;
    transform: none !important;
  }

  .cdp-actions .cdp-ic i::before {
    display: block !important;
    line-height: 1 !important;
    margin: 0 !important;
  }

  .cdp-actions .cdp-ic:hover,
  .cdp-actions .cdp-ic.is-active {
    color: #c31f26 !important;
    border-color: rgba(195, 31, 38, .28) !important;
    background: rgba(195, 31, 38, .05) !important;
    box-shadow: 0 8px 22px rgba(195, 31, 38, .10) !important;
    transform: translateY(-1px) !important;
  }

  .cdp-actions .cdp-ic:active {
    transform: translateY(0) !important;
  }

  .cdp-actions .cdp-ic:disabled {
    opacity: .65 !important;
    cursor: not-allowed !important;
    transform: none !important;
  }

  @media (max-width: 575px) {
    .cdp-actions {
      gap: 8px !important;
    }

    .cdp-actions .cdp-ic {
      width: 42px !important;
      height: 42px !important;
      min-width: 42px !important;
      min-height: 42px !important;
    }

    .cdp-actions .cdp-ic i,
    .cdp-actions .cdp-ic svg {
      width: 17px !important;
      height: 17px !important;
      min-width: 17px !important;
      min-height: 17px !important;
      font-size: 17px !important;
    }
  }


  /* =========================================================
     PREMIUM RIGHT SIDE STORE + FEATURES DESIGN
     Only right sidebar design changed. Old logic is unchanged.
  ========================================================= */
  :root {
    --alalaas-primary: #c31f26;
    --alalaas-primary-dark: #a8171e;
    --alalaas-primary-soft: rgba(195, 31, 38, 0.09);
    --alalaas-primary-soft-2: rgba(195, 31, 38, 0.14);
    --alalaas-text: #111827;
    --alalaas-muted: #667085;
    --alalaas-border: #edf0f5;
    --alalaas-card: #ffffff;
    --alalaas-soft-bg: #fbfcfe;
  }

  .cdp-side {
    position: sticky;
    top: 18px;
    align-self: flex-start;
  }

  .cdp-store.cdp-store--premium {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border: 1px solid rgba(195, 31, 38, 0.15);
    border-radius: 24px;
    background:
      radial-gradient(circle at top right, rgba(195, 31, 38, 0.14), transparent 36%),
      linear-gradient(135deg, #ffffff 0%, #fff8f8 100%);
    box-shadow: 0 18px 42px rgba(17, 24, 39, 0.08);
  }

  .cdp-storeGlow {
    position: absolute;
    right: -45px;
    top: -45px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.12);
    pointer-events: none;
  }

  .cdp-storeTop {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .cdp-storeBadge {
    width: 54px;
    height: 54px;
    min-width: 54px;
    border-radius: 17px;
    background: var(--alalaas-primary);
    color: #ffffff;
    border: 2px solid #00799b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 26px rgba(195, 31, 38, 0.18);
    overflow: hidden;
  }

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

  .cdp-storeBadge i {
    font-size: 24px;
    line-height: 1;
    color: #ffffff;
  }

  .cdp-storeText {
    min-width: 0;
  }

  .cdp-storeSmall {
    display: block;
    margin-bottom: 3px;
    color: var(--alalaas-muted);
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
  }

  .cdp-storeBy {
    color: var(--alalaas-text);
    font-size: 20px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.35px;
  }

  .cdp-storeDesc {
    position: relative;
    z-index: 1;
    margin: 16px 0 18px;
    color: #5b6577;
    font-size: 14px;
    line-height: 1.65;
    font-weight: 400;
  }

  .cdp-storeBtn {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--alalaas-primary);
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px;
    line-height: 46px;
    font-weight: 800;
    letter-spacing: 0.25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 14px 28px rgba(195, 31, 38, 0.22);
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  }

  .cdp-storeBtn i {
    font-size: 17px;
    line-height: 1;
    transition: transform 0.18s ease;
  }

  .cdp-storeBtn:hover {
    background: var(--alalaas-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(195, 31, 38, 0.28);
  }

  .cdp-storeBtn:hover i {
    transform: translateX(3px);
  }

  .cdp-features.cdp-features--premium {
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--alalaas-border);
    border-radius: 24px;
    background: var(--alalaas-card);
    box-shadow: 0 16px 38px rgba(17, 24, 39, 0.06);
  }

  .cdp-features--premium .cdp-feat {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 22px;
    gap: 14px;
    align-items: center;
    padding: 18px 18px;
    border-bottom: 1px solid var(--alalaas-border);
    background: #ffffff;
    transition: background 0.18s ease, transform 0.18s ease;
  }

  .cdp-features--premium .cdp-feat:last-child {
    border-bottom: 0;
  }

  .cdp-features--premium .cdp-feat:hover {
    background: linear-gradient(90deg, rgba(195, 31, 38, 0.055), #ffffff);
  }

  .cdp-features--premium .cdp-feat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 999px;
    background: transparent;
    transition: background 0.18s ease;
  }

  .cdp-features--premium .cdp-feat:hover::before {
    background: var(--alalaas-primary);
  }

  .cdp-features--premium .cdp-featIc {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 16px;
    background: var(--alalaas-primary-soft);
    color: var(--alalaas-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(195, 31, 38, 0.08);
  }

  .cdp-features--premium .cdp-featIc i {
    font-size: 22px;
    line-height: 1;
  }

  .cdp-featText {
    min-width: 0;
  }

  .cdp-features--premium .cdp-feat h4 {
    margin: 0 0 5px;
    color: var(--alalaas-text);
    font-size: 15px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.15px;
  }

  .cdp-features--premium .cdp-feat p {
    margin: 0;
    color: var(--alalaas-muted);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 400;
  }

  .cdp-featArrow {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #98a2b3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
  }

  .cdp-featArrow i {
    font-size: 14px;
    line-height: 1;
  }

  .cdp-features--premium .cdp-feat:hover .cdp-featArrow {
    color: var(--alalaas-primary);
    background: var(--alalaas-primary-soft);
    transform: translateX(2px);
  }

  @media (max-width: 1199px) {
    .cdp-side {
      position: static;
    }

    .cdp-features--premium .cdp-feat {
      grid-template-columns: 46px minmax(0, 1fr) 20px;
      padding: 17px 16px;
    }

    .cdp-features--premium .cdp-featIc {
      width: 46px;
      height: 46px;
      min-width: 46px;
    }
  }

  @media (max-width: 767px) {
    .cdp-store.cdp-store--premium,
    .cdp-features.cdp-features--premium {
      border-radius: 20px;
    }

    .cdp-store.cdp-store--premium {
      padding: 20px;
    }

    .cdp-storeBadge {
      width: 50px;
      height: 50px;
      min-width: 50px;
      border-radius: 16px;
    }

    .cdp-storeBy {
      font-size: 18px;
    }

    .cdp-features--premium .cdp-feat {
      grid-template-columns: 44px minmax(0, 1fr);
    }

    .cdp-featArrow {
      display: none;
    }

    .cdp-features--premium .cdp-featIc {
      width: 44px;
      height: 44px;
      min-width: 44px;
      border-radius: 15px;
    }
  }

  @media (max-width: 480px) {
    .cdp-store.cdp-store--premium {
      padding: 18px;
    }

    .cdp-storeDesc {
      font-size: 13px;
    }

    .cdp-features--premium .cdp-feat {
      gap: 12px;
      padding: 16px 15px;
    }

    .cdp-features--premium .cdp-feat h4 {
      font-size: 14px;
    }

    .cdp-features--premium .cdp-feat p {
      font-size: 12.5px;
    }
  }


/* =========================================================
   FIX COMPARE MINI BAR DISPLAY
   Prevents raw compare text from appearing unstyled on page.
   Old compare logic is unchanged.
========================================================= */
.compare-mini-bar {
  position: fixed !important;
  left: 50% !important;
  bottom: 24px !important;
  z-index: 9998 !important;
  width: min(620px, calc(100% - 32px)) !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(195, 31, 38, 0.16) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 22px 55px rgba(17, 24, 39, 0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate(-50%, 18px) !important;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}

.compare-mini-bar.is-show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}

.compare-mini-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.compare-mini-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 14px !important;
  background: rgba(195, 31, 38, .09) !important;
  color: #c31f26 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.compare-mini-icon i {
  font-size: 20px !important;
  line-height: 1 !important;
}

#compareMiniText {
  display: block !important;
  color: #111827 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

.compare-mini-left small {
  display: block !important;
  margin-top: 3px !important;
  color: #667085 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
}

.compare-mini-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

.compare-mini-view,
.compare-mini-clear {
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  line-height: 38px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.compare-mini-view {
  border: 0 !important;
  background: #c31f26 !important;
  color: #ffffff !important;
}

.compare-mini-clear {
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  color: #4b5563 !important;
}

.compare-mini-view:hover {
  background: #a8171e !important;
  color: #ffffff !important;
}

.compare-mini-clear:hover {
  border-color: rgba(195, 31, 38, .26) !important;
  color: #c31f26 !important;
}

@media (max-width: 575px) {
  .compare-mini-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    bottom: 14px !important;
  }

  .compare-mini-actions {
    width: 100% !important;
  }

  .compare-mini-view,
  .compare-mini-clear {
    flex: 1 1 0 !important;
    text-align: center !important;
  }
}

/* =========================================================
   SERVICE DETAIL MODAL
   Opens when customer clicks Fast Delivery / Secure Payment /
   Easy Return / Customer Support. Old logic is unchanged.
========================================================= */
.cdp-features--premium .cdp-feat {
  cursor: pointer;
}

.cdp-features--premium .cdp-feat:focus-visible {
  outline: 3px solid rgba(195, 31, 38, .18);
  outline-offset: -3px;
}

.cdp-service-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  padding: 20px;
  overflow: auto;
}

.cdp-service-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cdp-service-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.66);
  backdrop-filter: blur(3px);
}

.cdp-service-dialog {
  position: relative;
  width: min(800px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .28);
  animation: cdpServiceIn .18s ease both;
}

@keyframes cdpServiceIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.cdp-service-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 28px 26px 24px;
  border-bottom: 1px solid #edf0f5;
}

.cdp-service-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  color: #c31f26;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
}

.cdp-service-kicker i {
  font-size: 15px;
  line-height: 1;
}

.cdp-service-head h2 {
  margin: 0;
  color: #111827;
  font-size: 28px;
  line-height: 1.18;
  font-weight: 850;
  letter-spacing: -0.6px;
}

.cdp-service-close {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border: 1px solid #e6eaf0;
  border-radius: 18px;
  background: #ffffff;
  color: #111827;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.cdp-service-close i {
  font-size: 22px;
  line-height: 1;
}

.cdp-service-close:hover {
  color: #c31f26;
  border-color: rgba(195, 31, 38, .22);
  background: rgba(195, 31, 38, .05);
}

.cdp-service-body {
  padding: 24px 26px;
}

.cdp-service-intro {
  padding: 18px 18px;
  border: 1px solid #e6eaf0;
  border-radius: 16px;
  background: #ffffff;
  color: #3f4653;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
}

.cdp-service-points {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.cdp-service-point {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
  padding: 15px 16px;
  border: 1px solid #e6eaf0;
  border-radius: 16px;
  background: #ffffff;
}

.cdp-service-point i {
  margin-top: 3px;
  color: #c31f26;
  font-size: 17px;
  line-height: 1;
}

.cdp-service-point p {
  margin: 0;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
}

.cdp-service-point strong {
  color: #111827;
  font-weight: 850;
}

.cdp-service-important {
  margin-top: 16px;
  padding: 16px 18px;
  border-left: 3px solid #c31f26;
  border-radius: 16px;
  background: rgba(195, 31, 38, .055);
  color: #4b5563;
  font-size: 14.5px;
  line-height: 1.6;
}

.cdp-service-important strong {
  color: #111827;
  font-weight: 850;
}

.cdp-service-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 26px;
  border-top: 1px solid #edf0f5;
}

.cdp-service-foot p {
  margin: 0;
  color: #667085;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
}

.cdp-service-contact {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 16px;
  background: #c31f26;
  color: #ffffff !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1;
  font-weight: 850;
  white-space: nowrap;
  transition: background .16s ease, transform .16s ease;
}

.cdp-service-contact:hover {
  background: #a8171e;
  transform: translateY(-1px);
}

.cdp-service-contact i {
  font-size: 17px;
  line-height: 1;
}

body.cdp-service-modal-open {
  overflow: hidden;
}

@media (max-width: 767px) {
  .cdp-service-modal {
    padding: 12px;
    align-items: flex-end;
  }

  .cdp-service-dialog {
    width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: 24px;
  }

  .cdp-service-head,
  .cdp-service-body,
  .cdp-service-foot {
    padding-left: 18px;
    padding-right: 18px;
  }

  .cdp-service-head h2 {
    font-size: 23px;
  }

  .cdp-service-foot {
    align-items: stretch;
    flex-direction: column;
  }

  .cdp-service-contact {
    width: 100%;
  }
}



/* Sold out stock guard */
.cdp-main { position: relative; }
.cdp-soldout-ribbon {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 9px 16px 9px 11px;
  border-radius: 18px;
  background: linear-gradient(135deg, #d80e16 0%, #a5060d 100%);
  color: #fff;
  box-shadow: 0 18px 38px rgba(173, 6, 14, .24);
}
.cdp-soldout-ribbon-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.cdp-soldout-ribbon-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}
.cdp-soldout-ribbon-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}
.cdp-soldout-ribbon-copy strong {
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.cdp-soldout-ribbon-copy small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 10px;
  font-weight: 600;
}
.cdp-add.is-soldout,
.cdp-add:disabled,
.cdp-qtyWrap.is-disabled button {
  cursor: not-allowed;
}
.cdp-add.is-soldout {
  border: 1px solid rgba(173, 6, 14, 0.14);
  background: linear-gradient(180deg, #fff7f7 0%, #f7f0f1 100%);
  color: #9f1118;
  opacity: 1;
}
.cdp-soldout-btn-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.cdp-soldout-btn-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(173, 6, 14, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.cdp-soldout-btn-icon svg {
  width: 13px;
  height: 13px;
  display: block;
}
.cdp-soldout-btn-label {
  color: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
}
.stock-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17, 24, 39, .52);
}
.stock-modal-backdrop.is-open { display: flex; }
.stock-modal-card {
  width: min(440px, 100%);
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(15, 23, 42, .28);
  text-align: center;
}
.stock-modal-top {
  padding: 28px 26px 18px;
  background: linear-gradient(180deg, #fff3f4 0%, #ffffff 100%);
}
.stock-modal-icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 14px;
  border-radius: 22px;
  background: #ad060e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.stock-modal-icon svg {
  width: 32px;
  height: 32px;
  display: block;
}
.stock-modal-card h3 {
  margin: 0 0 9px;
  color: #111827;
  font-size: 22px;
  font-weight: 800;
}
.stock-modal-card p {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.65;
}
.stock-modal-actions {
  padding: 0 26px 26px;
}
.stock-modal-close {
  width: 100%;
  min-height: 46px;
  border: none;
  border-radius: 999px;
  background: #ad060e;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}


/* ================= search.html style block 1 ================= */
.search-page {
    padding: 34px 0 60px;
    background: #ffffff;
  }

  .search-hero {
    background: #fafafa;
    border: 1px solid #eef0f4;
    border-radius: 22px;
    padding: 28px;
    margin-bottom: 24px;
  }

  .search-title {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 700;
    color: #111827;
  }

  .search-subtitle {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
  }

  .search-box-large {
    margin-top: 20px;
    display: flex;
    gap: 12px;
  }

  .search-box-large input {
    flex: 1;
    height: 50px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 0 16px;
    font-size: 14px;
    outline: none;
  }

  .search-box-large input:focus {
    border-color: #c31f26;
  }

  .search-box-large button {
    height: 50px;
    border: 0;
    border-radius: 14px;
    background: #c31f26;
    color: #fff;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }

  .search-section {
    margin-top: 28px;
  }

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

  .search-section-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
  }

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

  .search-product-card {
    display: block;
    border: 1px solid #eef0f4;
    border-radius: 18px;
    background: #ffffff;
    padding: 12px;
    text-decoration: none;
    color: #111827;
    transition: all 0.2s ease;
  }

  .search-product-card:hover {
    border-color: rgba(195, 31, 38, 0.28);
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
  }

  .search-product-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    background: #f7f7f8;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .search-product-name {
    margin: 12px 0 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #111827;
    min-height: 38px;
  }

  .search-product-price {
    font-size: 15px;
    font-weight: 700;
    color: #c31f26;
  }

  .search-chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .search-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
  }

  .search-chip:hover {
    border-color: #c31f26;
    color: #c31f26;
  }

  .empty-search {
    padding: 36px;
    text-align: center;
    border: 1px dashed #e5e7eb;
    border-radius: 18px;
    color: #6b7280;
  }

  @media (max-width: 1199px) {
    .search-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (max-width: 991px) {
    .search-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 767px) {
    .search-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search-box-large {
      flex-direction: column;
    }

    .search-box-large button {
      width: 100%;
    }
  }

/* ================= customer_feedback.html style block 1 ================= */
:root {
    --brand-red: #c31f26;
    --brand-red-dark: #9f121b;
    --brand-gold: #f7b733;
    --success: #16a34a;
    --ink: #172033;
    --muted: #6b7280;
    --soft-muted: #8a93a5;
    --line: #e8ecf3;
    --page-bg: #f6f7fb;
    --card-bg: #ffffff;
    --danger-soft: #fff1f2;
    --success-soft: #ecfdf3;
    --shadow: 0 24px 70px rgba(15, 23, 42, 0.11);
  }

  .feedback-page,
  .feedback-page * {
    box-sizing: border-box;
  }

  .feedback-page {
    min-height: 78vh;
    padding: 46px 0 64px;
    background:
      radial-gradient(circle at 8% 0%, rgba(195, 31, 38, 0.08), transparent 28%),
      radial-gradient(circle at 92% 10%, rgba(247, 183, 51, 0.14), transparent 26%),
      linear-gradient(180deg, #ffffff 0%, var(--page-bg) 100%);
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--ink);
  }

  .feedback-container {
    width: min(94%, 1040px);
    margin: 0 auto;
  }

  .feedback-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.15fr;
    gap: 28px;
    align-items: stretch;
  }

  .feedback-info-card,
  .feedback-form-card {
    background: var(--card-bg);
    border: 1px solid rgba(232, 236, 243, 0.95);
    border-radius: 28px;
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  .feedback-info-card {
    position: relative;
    padding: 34px;
    background:
      linear-gradient(145deg, rgba(195, 31, 38, 0.96), rgba(130, 17, 26, 0.98)),
      url("data:image/svg+xml,%3Csvg width='420' height='420' viewBox='0 0 420 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.14)' stroke-width='1'%3E%3Ccircle cx='350' cy='80' r='130'/%3E%3Ccircle cx='350' cy='80' r='90'/%3E%3Ccircle cx='60' cy='360' r='110'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    color: #ffffff;
  }

  .feedback-info-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
  }

  .feedback-info-title {
    margin: 28px 0 12px;
    color: #ffffff;
    font-size: 34px;
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: -0.04em;
  }

  .feedback-info-text {
    margin: 0;
    max-width: 420px;
    color: rgba(255, 255, 255, 0.83);
    font-size: 15px;
    line-height: 1.75;
    font-weight: 500;
  }

  .feedback-benefits {
    display: grid;
    gap: 14px;
    margin-top: 34px;
  }

  .feedback-benefit {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 13px;
    align-items: center;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.14);
  }

  .feedback-benefit-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 20px;
  }

  .feedback-benefit-title {
    margin: 0 0 3px;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 900;
  }

  .feedback-benefit-text {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 12.5px;
    line-height: 1.45;
    font-weight: 600;
  }

  .feedback-form-header {
    padding: 30px 32px 22px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #ffffff 0%, #fffafa 100%);
  }

  .feedback-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: var(--brand-red);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .feedback-form-title {
    margin: 0;
    color: var(--ink);
    font-size: 26px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -0.03em;
  }

  .feedback-form-subtitle {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
    font-weight: 500;
  }

  .feedback-form-body {
    padding: 28px 32px 32px;
  }

  .feedback-section {
    margin-bottom: 24px;
  }

  .feedback-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
  }

  .feedback-label {
    display: block;
    color: #2d3445;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 900;
  }

  .feedback-helper {
    color: var(--soft-muted);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
  }

  .feedback-rating {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 11px;
  }

  .feedback-rate-btn {
    min-height: 74px;
    border: 1px solid #e7ebf2;
    border-radius: 18px;
    background: #ffffff;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.18s ease;
    display: grid;
    place-items: center;
    gap: 5px;
    padding: 10px 6px;
  }

  .feedback-rate-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(195, 31, 38, 0.35);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  }

  .feedback-rate-btn.active {
    border-color: rgba(195, 31, 38, 0.55);
    background: #fff8f8;
    box-shadow: 0 14px 30px rgba(195, 31, 38, 0.12);
    transform: translateY(-2px);
  }

  .feedback-rate-emoji {
    display: block;
    font-size: 28px;
    line-height: 1;
  }

  .feedback-rate-text {
    display: block;
    color: #5f687a;
    font-size: 11px;
    font-weight: 900;
  }

  .feedback-rate-btn.active .feedback-rate-text {
    color: var(--brand-red);
  }

  .feedback-issue-button {
    width: 100%;
    min-height: 58px;
    border: 1px solid #e7ebf2;
    border-radius: 16px;
    background: #ffffff;
    color: #303849;
    cursor: pointer;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
    transition: all 0.18s ease;
  }

  .feedback-issue-button:hover,
  .feedback-issue-button:focus {
    outline: none;
    border-color: rgba(195, 31, 38, 0.4);
    box-shadow: 0 12px 28px rgba(195, 31, 38, 0.08);
  }

  .feedback-issue-button span {
    font-size: 13px;
    line-height: 1.35;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .feedback-issue-button i {
    color: var(--brand-red);
    font-size: 18px;
  }

  .feedback-selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 0;
    margin-top: 12px;
  }

  .feedback-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 999px;
    background: #fff1f2;
    color: var(--brand-red);
    border: 1px solid rgba(195, 31, 38, 0.12);
    font-size: 12px;
    line-height: 1.25;
    font-weight: 900;
  }

  .feedback-support-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #16833b;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 900;
    white-space: nowrap;
    user-select: none;
  }

  .feedback-support-toggle input {
    width: 16px;
    height: 16px;
    accent-color: var(--success);
  }

  .feedback-textarea {
    width: 100%;
    min-height: 158px;
    resize: vertical;
    border: 1px solid #e7ebf2;
    border-radius: 16px;
    background: #ffffff;
    padding: 16px 17px;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.7;
    font-family: inherit;
    outline: none;
    transition: all 0.18s ease;
  }

  .feedback-textarea::placeholder {
    color: #a0a7b5;
  }

  .feedback-textarea:focus {
    border-color: rgba(195, 31, 38, 0.45);
    box-shadow: 0 14px 30px rgba(195, 31, 38, 0.08);
  }

  .feedback-submit {
    width: 100%;
    min-height: 58px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
    color: #ffffff;
    cursor: pointer;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 900;
    box-shadow: 0 18px 34px rgba(195, 31, 38, 0.24);
    transition: all 0.18s ease;
  }

  .feedback-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(195, 31, 38, 0.3);
  }

  .feedback-submit:disabled {
    opacity: 0.72;
    cursor: not-allowed;
    transform: none;
  }

  .feedback-note {
    margin: 14px 0 0;
    color: var(--soft-muted);
    text-align: center;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 600;
  }

  .feedback-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(5px);
  }

  .feedback-overlay.show {
    display: flex;
  }

  .feedback-sheet {
    width: min(100%, 560px);
    max-height: calc(100vh - 36px);
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.26);
    animation: feedbackPop 0.2s ease both;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
  }

  @keyframes feedbackPop {
    from {
      opacity: 0;
      transform: scale(0.96) translateY(10px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  .feedback-sheet-head {
    flex: 0 0 auto;
    padding: 24px 24px 16px;
    background: #ffffff;
    border-bottom: 1px solid #eef1f6;
  }

  .feedback-sheet-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }

  .feedback-sheet-title {
    margin: 0;
    color: var(--ink);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: -0.02em;
  }

  .feedback-sheet-subtitle {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
  }

  .feedback-sheet-close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #f4f6f9;
    color: #475064;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    display: grid;
    place-items: center;
  }

  .feedback-sheet-close:hover {
    background: #fff1f2;
    color: var(--brand-red);
  }

  .feedback-issue-list {
    flex: 1 1 auto;
    overflow: auto;
    padding: 8px 0 10px;
  }

  .feedback-issue-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26px;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 0 24px;
    border-bottom: 1px solid #f0f2f6;
    color: #343b4c;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease;
  }

  .feedback-issue-row:hover {
    background: #fff8f8;
  }

  .feedback-check {
    width: 22px;
    height: 22px;
    border: 2px solid #cbd2df;
    border-radius: 6px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
  }

  .feedback-issue-row.active .feedback-check {
    border-color: var(--brand-red);
    background: var(--brand-red);
  }

  .feedback-issue-row.is-other .feedback-check {
    border: 0;
    color: #9aa1ad;
    background: transparent;
    font-size: 24px;
  }

  .feedback-sheet-foot {
    flex: 0 0 auto;
    padding: 22px 24px 24px;
    background: #ffffff;
  }

  .feedback-done {
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 999px;
    background: var(--brand-red);
    color: #ffffff;
    cursor: pointer;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 14px 28px rgba(195, 31, 38, 0.2);
  }

  .feedback-other-box {
    padding: 22px 24px 24px;
  }

  .feedback-other-input {
    width: 100%;
    height: 54px;
    border: 1px solid #e7ebf2;
    border-radius: 14px;
    background: #ffffff;
    padding: 0 15px;
    color: var(--ink);
    outline: 0;
    font-size: 14px;
    font-family: inherit;
  }

  .feedback-other-input:focus {
    border-color: rgba(195, 31, 38, 0.45);
    box-shadow: 0 12px 26px rgba(195, 31, 38, 0.08);
  }

  /* Premium Result Modal */
  .feedback-dialog {
    position: relative;
    width: min(100%, 520px);
    overflow: hidden;
    border-radius: 30px;
    background: #ffffff;
    text-align: center;
    box-shadow:
      0 40px 110px rgba(15, 23, 42, 0.38),
      0 0 0 1px rgba(255, 255, 255, 0.9) inset;
    animation: feedbackPop 0.22s ease both;
  }

  .feedback-dialog-top {
    position: relative;
    padding: 34px 28px 72px;
    background:
      radial-gradient(circle at 20% 10%, rgba(255,255,255,0.38), transparent 28%),
      linear-gradient(135deg, #c31f26 0%, #9f121b 62%, #72101a 100%);
  }

  .feedback-dialog-top::before,
  .feedback-dialog-top::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
  }

  .feedback-dialog-top::before {
    width: 180px;
    height: 180px;
    left: -70px;
    top: -80px;
    background: rgba(255,255,255,0.13);
  }

  .feedback-dialog-top::after {
    width: 130px;
    height: 130px;
    right: -48px;
    bottom: -54px;
    background: rgba(247,183,51,0.18);
  }

  .feedback-result-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.22);
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
  }

  .feedback-result-content {
    position: relative;
    z-index: 2;
    padding: 0 32px 32px;
    margin-top: -48px;
  }

  .feedback-result-icon {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 42px;
    background: #ffffff;
    box-shadow:
      0 20px 45px rgba(15, 23, 42, 0.16),
      0 0 0 10px rgba(255, 255, 255, 0.34);
  }

  .feedback-result-icon.success {
    color: #16a34a;
  }

  .feedback-result-icon.error {
    color: #c31f26;
  }

  .feedback-result-icon.success::after,
  .feedback-result-icon.error::after {
    content: "";
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    z-index: -1;
  }

  .feedback-result-icon.success::after {
    background: #ecfdf3;
  }

  .feedback-result-icon.error::after {
    background: #fff1f2;
  }

  .feedback-result-title {
    margin: 0;
    color: #172033;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 950;
    letter-spacing: -0.04em;
  }

  .feedback-result-text {
    margin: 11px auto 24px;
    max-width: 390px;
    color: #687385;
    font-size: 14px;
    line-height: 1.75;
    font-weight: 500;
  }

  .feedback-result-summary {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: center;
    margin: 0 0 24px;
    padding: 14px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    text-align: left;
  }

  .feedback-result-summary-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #fff1f2;
    color: #c31f26;
    font-size: 20px;
  }

  .feedback-result-summary-title {
    margin: 0 0 3px;
    color: #263044;
    font-size: 13px;
    font-weight: 900;
  }

  .feedback-result-summary-text {
    margin: 0;
    color: #7a8495;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 600;
  }

  .feedback-result-btn {
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #c31f26, #9f121b);
    color: #ffffff;
    cursor: pointer;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 18px 34px rgba(195, 31, 38, 0.26);
    transition: all 0.18s ease;
  }

  .feedback-result-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 44px rgba(195, 31, 38, 0.34);
  }

  .feedback-result-small {
    margin: 14px 0 0;
    color: #9ca3af;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 700;
  }

  @media (max-width: 991px) {
    .feedback-layout {
      grid-template-columns: 1fr;
    }

    .feedback-info-card {
      min-height: auto;
    }
  }

  @media (max-width: 575px) {
    .feedback-page {
      padding: 16px 0 34px;
    }

    .feedback-container {
      width: 100%;
      padding: 0 12px;
    }

    .feedback-info-card {
      display: none;
    }

    .feedback-form-card {
      border-radius: 24px;
      box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
    }

    .feedback-form-header {
      padding: 24px 18px 18px;
    }

    .feedback-form-title {
      font-size: 23px;
    }

    .feedback-form-body {
      padding: 22px 18px 24px;
    }

    .feedback-rating {
      gap: 8px;
    }

    .feedback-rate-btn {
      min-height: 64px;
      border-radius: 15px;
    }

    .feedback-rate-emoji {
      font-size: 25px;
    }

    .feedback-rate-text {
      font-size: 10px;
    }

    .feedback-label-row {
      align-items: flex-start;
      flex-direction: column;
      gap: 7px;
    }

    .feedback-support-toggle {
      white-space: normal;
    }

    .feedback-overlay {
      padding: 14px;
      align-items: center;
    }

    .feedback-sheet,
    .feedback-dialog {
      width: 100%;
      max-height: calc(100vh - 28px);
      border-radius: 24px;
    }

    .feedback-sheet-head {
      padding: 22px 22px 14px;
    }

    .feedback-sheet-foot {
      padding: 20px 22px 22px;
    }

    .feedback-issue-row {
      padding: 0 22px;
    }

    .feedback-dialog-top {
      padding: 30px 22px 66px;
    }

    .feedback-result-content {
      padding: 0 22px 28px;
    }

    .feedback-result-icon {
      width: 88px;
      height: 88px;
      font-size: 38px;
    }

    .feedback-result-title {
      font-size: 25px;
    }
  }


/* ================= compare_items.html style block 1 ================= */
.compare-page {
    padding: 38px 0 64px;
    background: linear-gradient(180deg, #fff7f7 0%, #ffffff 215px);
    font-family: inherit;
  }

  .compare-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 24px;
    padding: 26px 28px;
    border: 1px solid #f1d9dc;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(17, 24, 39, .055);
    overflow: hidden;
  }

  .compare-hero::before {
    content: "";
    position: absolute;
    right: -82px;
    top: -92px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: rgba(195, 31, 38, .08);
    pointer-events: none;
  }

  .compare-hero::after {
    content: "";
    position: absolute;
    right: 82px;
    bottom: -122px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: rgba(17, 24, 39, .035);
    pointer-events: none;
  }

  .compare-hero-left,
  .compare-head-actions {
    position: relative;
    z-index: 1;
  }

  .compare-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #c31f26;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .45px;
  }

  .compare-kicker i {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #f3c7ca;
    background: #fff5f5;
    color: #c31f26;
    font-size: 16px;
  }

  .compare-hero h1 {
    margin: 0;
    color: #111827;
    font-size: 34px;
    line-height: 1.12;
    font-weight: 720;
    letter-spacing: -0.8px;
  }

  .compare-hero p {
    max-width: 560px;
    margin: 10px 0 0;
    color: #6b7280;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
  }

  .compare-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
  }

  .compare-shop-btn,
  .compare-clear-btn,
  .compare-empty a {
    height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition: all .18s ease;
    white-space: nowrap;
  }

  .compare-shop-btn,
  .compare-empty a {
    border: 1px solid #c31f26;
    background: #c31f26;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(195, 31, 38, .18);
  }

  .compare-shop-btn:hover,
  .compare-empty a:hover {
    transform: translateY(-1px);
    background: #a7191f;
    border-color: #a7191f;
    color: #ffffff;
  }

  .compare-clear-btn {
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #5b6474;
  }

  .compare-clear-btn:hover {
    border-color: #f2c5c7;
    background: #fff5f5;
    color: #c31f26;
  }

  .compare-empty,
  .compare-loading {
    min-height: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid #edf0f4;
    border-radius: 22px;
    background: #ffffff;
    color: #6b7280;
    box-shadow: 0 12px 30px rgba(17, 24, 39, .04);
  }

  .compare-empty-card,
  .compare-loader-card {
    width: min(440px, 92%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 24px;
  }

  .compare-empty-icon {
    width: 74px;
    height: 74px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border-radius: 50%;
    border: 1px solid #f1d9dc;
    background: #fff7f7;
    color: #c31f26;
    font-size: 32px;
  }

  .compare-empty h2,
  .compare-loader-card strong {
    margin: 0 0 9px;
    color: #111827;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;
  }

  .compare-empty p,
  .compare-loader-card p {
    margin: 0 0 20px;
    color: #6b7280;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
  }

  .compare-loader {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: 50%;
    border: 4px solid #f3d5d7;
    border-top-color: #c31f26;
    animation: compareSpin .8s linear infinite;
  }

  @keyframes compareSpin {
    to { transform: rotate(360deg); }
  }

  .compare-wrap {
    border: 1px solid #edf0f4;
    border-radius: 22px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 16px 42px rgba(17, 24, 39, .06);
  }

  .compare-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #edf0f4;
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%);
  }

  .compare-toolbar h2,
  .compare-details-head h2 {
    margin: 0;
    color: #111827;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
  }

  .compare-toolbar p,
  .compare-details-head p {
    margin: 5px 0 0;
    color: #7b8495;
    font-size: 13px;
    line-height: 1.45;
  }

  .compare-limit-badge {
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid #f1d9dc;
    border-radius: 999px;
    background: #fff7f7;
    color: #c31f26;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }

  .compare-products-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 18px 18px 22px;
    scrollbar-width: thin;
  }

  .compare-products-scroll::-webkit-scrollbar,
  .compare-scroll::-webkit-scrollbar {
    height: 8px;
  }

  .compare-products-scroll::-webkit-scrollbar-track,
  .compare-scroll::-webkit-scrollbar-track {
    background: #f5f6f8;
  }

  .compare-products-scroll::-webkit-scrollbar-thumb,
  .compare-scroll::-webkit-scrollbar-thumb {
    background: #d6dbe4;
    border-radius: 999px;
  }

  .compare-products-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 66px) / 4);
    grid-template-rows: 1fr;
    gap: 22px;
    min-width: 100%;
    align-items: stretch;
  }

  .compare-card {
    position: relative;
    min-width: 282px;
    height: 100%;
    min-height: 452px;
    display: flex;
    flex-direction: column;
    padding: 16px;
    border: 1px solid #f0d6da;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 2px 7px rgba(17, 24, 39, 0.035);
    overflow: hidden;
    transition: all .18s ease;
  }

  .compare-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(17, 24, 39, .08);
  }

  .compare-card-remove {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(229, 231, 235, .9);
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    color: #6b7280;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(17, 24, 39, .08);
    transition: all .18s ease;
  }

  .compare-card-remove:hover {
    transform: translateY(-1px);
    color: #c31f26;
    border-color: #f2c5c7;
    background: #fff5f5;
  }

  .compare-card-img {
    display: block;
    width: 100%;
    height: 215px;
    margin: 0 0 17px;
    border-radius: 8px;
    overflow: hidden;
    background: #f8fafc;
    object-fit: cover;
  }

  .compare-card-name {
    min-height: 50px;
    max-height: 50px;
    margin: 0 0 18px;
    color: #061434;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 500;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .compare-card-name a {
    color: inherit;
    text-decoration: none;
  }

  .compare-card-name a:hover {
    color: #c31f26;
  }

  .compare-card-sold {
    min-height: 20px;
    margin-top: auto;
    color: #728198;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
  }

  .compare-card-sold strong {
    color: #627089;
    font-size: 16px;
    font-weight: 750;
  }

  .compare-card-price {
    min-height: 28px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 6px;
  }

  .compare-card-price del {
    color: #a6adba;
    font-size: 14px;
    font-weight: 500;
    text-decoration: line-through;
  }

  .compare-card-price strong {
    color: #061434;
    font-size: 22px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.4px;
  }

  .compare-card-price span {
    color: #5f6b7e;
    font-size: 14px;
    font-weight: 500;
  }

  .compare-card-actions {
    margin-top: 54px;
  }

  .compare-add-cart {
    width: 100%;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border: 1px solid #e6eaf1;
    border-radius: 10px;
    background: #f9fafc;
    color: #061434;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: none;
    transition: all .18s ease;
  }

  .compare-add-cart:hover {
    transform: translateY(-1px);
    background: #ffffff;
    border-color: #d9dee8;
    color: #111827;
  }

  .compare-add-cart:disabled {
    cursor: not-allowed;
    opacity: .7;
    transform: none;
  }

  .compare-add-cart i {
    font-size: 18px;
    vertical-align: -2px;
  }

  .compare-details-card {
    margin: 0 18px 18px;
    border: 1px solid #edf0f4;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(17, 24, 39, .035);
  }

  .compare-details-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 20px;
    border-bottom: 1px solid #edf0f4;
    background: #ffffff;
  }

  .compare-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .compare-table {
    width: 100%;
    min-width: 820px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
  }

  .compare-table th,
  .compare-table td {
    padding: 17px 18px;
    border-right: 1px solid #edf0f4;
    border-bottom: 1px solid #edf0f4;
    vertical-align: top;
  }

  .compare-table tr:last-child th,
  .compare-table tr:last-child td {
    border-bottom: 0;
  }

  .compare-table th:last-child,
  .compare-table td:last-child {
    border-right: 0;
  }

  .compare-table tr:nth-child(even) .compare-row-label,
  .compare-table tr:nth-child(even) .compare-product-cell {
    background: #fcfcfd;
  }

  .compare-row-label {
    position: sticky;
    left: 0;
    z-index: 3;
    width: 185px;
    background: #ffffff;
    color: #061434;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 700;
    box-shadow: 8px 0 16px rgba(17, 24, 39, .025);
  }

  .compare-product-cell {
    min-width: 250px;
    background: #ffffff;
  }

  .compare-value {
    color: #334155;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
  }

  .compare-value strong {
    color: #061434;
    font-weight: 750;
  }

  .compare-pill-value {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #f7f8fa;
    color: #4b5563;
    font-size: 13px;
    font-weight: 650;
  }

  .compare-pill-value.is-red {
    background: #fff5f5;
    color: #c31f26;
  }

  .compare-pill-value.is-green {
    background: #f0fdf4;
    color: #15803d;
  }

  .compare-rating {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #6b7280;
    font-size: 14px;
    font-weight: 600;
  }

  .compare-stars-wrap {
    position: relative;
    display: inline-block;
    width: 78px;
    min-width: 78px;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    letter-spacing: 1px;
    overflow: hidden;
  }

  .compare-stars-empty,
  .compare-stars-fill {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 16px;
  }

  .compare-stars-empty {
    color: #d8dde6;
  }

  .compare-stars-fill {
    color: #f5a623;
    overflow: hidden;
  }

  .compare-spec-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .compare-spec-list li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed #e5e7eb;
    color: #334155;
    font-size: 13px;
    line-height: 1.45;
  }

  .compare-spec-list li:last-child {
    border-bottom: 0;
  }

  .compare-spec-list li strong {
    color: #061434;
    font-weight: 700;
  }

  @media (max-width: 1200px) {
    .compare-products-grid {
      grid-auto-columns: 310px;
    }
  }

  @media (max-width: 991px) {
    .compare-hero {
      align-items: flex-start;
      flex-direction: column;
      padding: 24px;
    }

    .compare-head-actions {
      width: 100%;
    }

    .compare-shop-btn,
    .compare-clear-btn {
      flex: 1;
    }

    .compare-products-grid {
      grid-auto-columns: 300px;
    }

    .compare-details-head {
      align-items: flex-start;
      flex-direction: column;
      gap: 4px;
    }
  }

  @media (max-width: 767px) {
    .compare-page {
      padding: 26px 0 48px;
    }

    .compare-hero {
      border-radius: 18px;
      padding: 20px;
    }

    .compare-hero h1 {
      font-size: 28px;
    }

    .compare-hero p {
      font-size: 14px;
    }

    .compare-head-actions {
      display: grid;
      grid-template-columns: 1fr;
    }

    .compare-toolbar {
      align-items: flex-start;
      flex-direction: column;
    }

    .compare-products-scroll {
      padding: 14px 14px 18px;
    }

    .compare-products-grid {
      grid-auto-columns: 302px;
      gap: 14px;
    }

    .compare-card {
      min-width: 302px;
      min-height: 452px;
    }

    .compare-row-label {
      width: 145px;
      min-width: 145px;
    }

    .compare-product-cell {
      min-width: 235px;
    }

    .compare-details-card {
      margin: 0 14px 14px;
    }
  }

/* =========================================================
   Wishlist page styles
   Source: wishlist.html
========================================================= */
/* Wishlist page only */
  .wishlist-page .ilist-card {
    display: flex;
    flex-direction: column;
  }

  .wishlist-page .ilist-price {
    margin-bottom: 18px;
  }

  .wishlist-page .wishlist-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 6px;
  }

  .wishlist-page .ilist-btn {
    width: 100%;
    min-height: 44px;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
  }

  .wishlist-page .js-add-cart {
    background: #f3f4f6;
    color: #111827 !important;
  }

  .wishlist-page .js-add-cart:hover {
    background: #e5e7eb;
    color: #111827 !important;
  }

  .wishlist-page .js-remove-wishlist {
    background: #111827;
    color: #ffffff !important;
  }

  .wishlist-page .js-remove-wishlist:hover {
    background: #c31f26;
    color: #ffffff !important;
  }

  .wishlist-page .ilist-btn i {
    color: inherit;
    font-size: 16px;
  }

  /* Login required box */
  .wishlist-page .wishlist-login-required {
    padding: 55px 20px;
    text-align: center;
  }

  .wishlist-page .wishlist-login-required h2 {
    margin: 0 0 10px;
    color: #111827;
    font-size: 26px;
    font-weight: 700;
  }

  .wishlist-page .wishlist-login-required p {
    margin: 0 0 24px;
    color: #6b7280;
    font-size: 15px;
    font-weight: 400;
  }

  .wishlist-page .wishlist-login-btn {
    min-width: 150px;
    min-height: 44px;
    padding: 0 26px;
    border-radius: 999px;
    background: #c31f26;
    color: #ffffff !important;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
  }

  .wishlist-page .wishlist-login-btn:hover {
    background: #a71920;
    color: #ffffff !important;
    transform: translateY(-1px);
  }

  .wishlist-page .wishlist-login-btn i {
    font-size: 16px;
    color: inherit;
  }

  /* Dynamic rating design */
  .wishlist-page .product-rating-ui {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 8px 0 18px;
    padding-bottom: 10px;
    border-bottom: 3px solid #eef2f7;
    font-size: 13px;
    line-height: 1.4;
  }

  .wishlist-page .rating-stars-wrap {
    position: relative;
    display: inline-block;
    color: #d1d5db;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 1;
    white-space: nowrap;
  }

  .wishlist-page .rating-stars-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    overflow: hidden;
    color: #f5a623;
    white-space: nowrap;
  }

  .wishlist-page .rating-label {
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
  }

  .wishlist-page .rating-divider {
    color: #c4c4c4;
    font-weight: 400;
  }

  .wishlist-page .rating-reviews {
    color: #5f6f8a;
    white-space: nowrap;
  }

  .wishlist-page .ilist-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .wishlist-page .ilist-card:hover {
    transform: translateY(-2px);
  }


  .wishlist-page .wishlist-empty-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
  }

  .wishlist-page .wishlist-product-link {
    color: inherit;
    text-decoration: none;
  }


/* =========================================================
   Why choose us page styles
   Source: why_choose_us.html
========================================================= */
:root{
    --ag-red:#c31f26;
    --ag-red-dark:#98141b;
    --ag-ink:#151821;
    --ag-text:#4f5968;
    --ag-muted:#7b8494;
    --ag-line:#e9edf3;
    --ag-bg:#fbfbfc;
    --ag-soft:#fff4f5;
    --ag-white:#ffffff;
    --ag-gold:#d8a33a;
  }

  .gift-why,
  .gift-why *{
    box-sizing:border-box;
  }

  .gift-why{
    font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
    color:var(--ag-ink);
    background:#fff;
    overflow:hidden;
  }

  .gift-why svg{
    width:20px;
    height:20px;
    display:inline-block;
    fill:none;
    stroke:currentColor;
    stroke-width:2.15;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex:0 0 auto;
  }

  .gift-why__wrap{
    width:90%;
    max-width:1380px;
    margin:0 auto;
  }

  .gift-why__hero{
    position:relative;
    padding:58px 0 74px;
    background:
      linear-gradient(90deg,rgba(195,31,38,.06) 1px,transparent 1px),
      linear-gradient(180deg,#fff 0%,#fff8f8 100%);
    background-size:38px 38px,auto;
  }

  .gift-why__hero::before{
    content:"";
    position:absolute;
    right:-170px;
    top:-160px;
    width:430px;
    height:430px;
    border-radius:50%;
    background:rgba(195,31,38,.08);
  }

  .gift-why__hero::after{
    content:"";
    position:absolute;
    left:-210px;
    bottom:-230px;
    width:470px;
    height:470px;
    border-radius:50%;
    background:rgba(216,163,58,.10);
  }

  .gift-why__hero-inner{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1fr) 430px;
    gap:48px;
    align-items:center;
  }

  .gift-why__label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 15px;
    border-radius:999px;
    background:#fff;
    border:1px solid rgba(195,31,38,.14);
    color:var(--ag-red);
    font-size:13px;
    line-height:1;
    font-weight:850;
    box-shadow:0 12px 34px rgba(195,31,38,.07);
  }

  .gift-why__title{
    margin:24px 0 0;
    max-width:880px;
    color:var(--ag-ink);
    font-size:clamp(36px,5.1vw,78px);
    line-height:.98;
    letter-spacing:-.065em;
    font-weight:850;
  }

  .gift-why__title span{
    color:var(--ag-red);
  }

  .gift-why__lead{
    margin:24px 0 0;
    max-width:820px;
    color:var(--ag-text);
    font-size:17px;
    line-height:1.9;
    font-weight:400;
  }

  .gift-why__actions{
    margin-top:34px;
    display:flex;
    align-items:center;
    gap:13px;
    flex-wrap:wrap;
  }

  .gift-why__btn{
    min-height:52px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:14px 23px;
    border-radius:999px;
    text-decoration:none;
    font-size:14px;
    line-height:1;
    font-weight:900;
    transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
  }

  .gift-why__btn--red{
    background:var(--ag-red);
    color:#fff !important;
    border:1px solid var(--ag-red);
    box-shadow:0 18px 34px rgba(195,31,38,.22);
  }

  .gift-why__btn--red:hover,
  .gift-why__btn--red:focus{
    background:var(--ag-red-dark);
    border-color:var(--ag-red-dark);
    color:#fff !important;
    transform:translateY(-2px);
    text-decoration:none;
    outline:none;
  }

  .gift-why__btn--white{
    background:#fff;
    color:var(--ag-red) !important;
    border:1px solid rgba(195,31,38,.16);
  }

  .gift-why__btn--white:hover,
  .gift-why__btn--white:focus{
    background:var(--ag-soft);
    color:var(--ag-red-dark) !important;
    transform:translateY(-2px);
    text-decoration:none;
    outline:none;
  }

  .gift-why__visual{
    position:relative;
    min-height:430px;
    display:grid;
    place-items:center;
  }

  .gift-why__visual::before{
    content:"";
    position:absolute;
    width:330px;
    height:330px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 35px 90px rgba(21,24,33,.10);
  }

  .gift-why__visual-ring{
    position:absolute;
    width:380px;
    height:380px;
    border-radius:50%;
    border:1px solid rgba(195,31,38,.15);
  }

  .gift-why__visual-ring::before,
  .gift-why__visual-ring::after{
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--ag-red);
  }

  .gift-why__visual-ring::before{
    left:45px;
    top:42px;
  }

  .gift-why__visual-ring::after{
    right:48px;
    bottom:48px;
    background:var(--ag-gold);
  }

  .gift-why__gift{
    position:relative;
    z-index:2;
    width:210px;
    height:170px;
    border-radius:25px 25px 32px 32px;
    background:linear-gradient(135deg,var(--ag-red),var(--ag-red-dark));
    box-shadow:0 32px 65px rgba(195,31,38,.28);
  }

  .gift-why__gift::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-50%);
    width:34px;
    height:100%;
    background:#fff;
  }

  .gift-why__gift::after{
    content:"";
    position:absolute;
    left:-18px;
    top:40px;
    width:246px;
    height:34px;
    border-radius:14px;
    background:#fff;
    box-shadow:0 16px 28px rgba(21,24,33,.13);
  }

  .gift-why__bow{
    position:absolute;
    left:50%;
    top:-42px;
    transform:translateX(-50%);
    width:88px;
    height:58px;
    z-index:3;
  }

  .gift-why__bow::before,
  .gift-why__bow::after{
    content:"";
    position:absolute;
    top:8px;
    width:46px;
    height:42px;
    background:#fff;
    border-radius:50% 50% 50% 14px;
    box-shadow:0 12px 22px rgba(21,24,33,.12);
  }

  .gift-why__bow::before{
    left:0;
    transform:rotate(-24deg);
  }

  .gift-why__bow::after{
    right:0;
    transform:rotate(24deg) scaleX(-1);
  }

  .gift-why__bow span{
    position:absolute;
    left:50%;
    top:21px;
    transform:translateX(-50%);
    width:24px;
    height:24px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 10px 20px rgba(21,24,33,.12);
  }

  .gift-why__floating{
    position:absolute;
    z-index:4;
    display:flex;
    align-items:center;
    gap:10px;
    background:#fff;
    border:1px solid var(--ag-line);
    border-radius:999px;
    padding:11px 15px;
    color:var(--ag-ink);
    font-size:13px;
    font-weight:850;
    box-shadow:0 18px 42px rgba(21,24,33,.10);
  }

  .gift-why__floating svg{
    color:var(--ag-red);
  }

  .gift-why__floating--one{
    left:0;
    top:52px;
  }

  .gift-why__floating--two{
    right:0;
    bottom:70px;
  }

  .gift-why__bar{
    position:relative;
    z-index:2;
    margin-top:-35px;
  }

  .gift-why__bar-inner{
    background:#151821;
    color:#fff;
    border-radius:999px;
    padding:18px 26px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    box-shadow:0 22px 55px rgba(21,24,33,.18);
  }

  .gift-why__bar strong{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    line-height:1.4;
    font-weight:900;
  }

  .gift-why__bar span{
    color:rgba(255,255,255,.72);
    font-size:13.5px;
    line-height:1.5;
  }

  .gift-why__section{
    padding:76px 0;
  }

  .gift-why__section--light{
    background:var(--ag-bg);
  }

  .gift-why__split{
    display:grid;
    grid-template-columns:410px minmax(0,1fr);
    gap:70px;
    align-items:start;
  }

  .gift-why__side-title{
    position:sticky;
    top:24px;
  }

  .gift-why__kicker{
    margin:0;
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--ag-red);
    font-size:13px;
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
  }

  .gift-why__heading{
    margin:18px 0 0;
    color:var(--ag-ink);
    font-size:clamp(30px,3vw,46px);
    line-height:1.08;
    letter-spacing:-.055em;
    font-weight:950;
  }

  .gift-why__desc{
    margin:18px 0 0;
    color:var(--ag-muted);
    font-size:15px;
    line-height:1.85;
  }

  .gift-why__line-list{
    border-top:1px solid var(--ag-line);
  }

  .gift-why__line-item{
    display:grid;
    grid-template-columns:72px 1fr;
    gap:24px;
    padding:30px 0;
    border-bottom:1px solid var(--ag-line);
  }

  .gift-why__line-icon{
    width:58px;
    height:58px;
    border-radius:999px;
    display:grid;
    place-items:center;
    background:var(--ag-soft);
    color:var(--ag-red);
    border:1px solid rgba(195,31,38,.12);
  }

  .gift-why__line-icon svg{
    width:27px;
    height:27px;
  }

  .gift-why__line-item h3{
    margin:0;
    color:var(--ag-ink);
    font-size:21px;
    line-height:1.28;
    letter-spacing:-.035em;
    font-weight:950;
  }

  .gift-why__line-item p{
    margin:9px 0 0;
    color:var(--ag-muted);
    font-size:14.5px;
    line-height:1.82;
  }

  .gift-why__statement{
    position:relative;
    background:
      radial-gradient(circle at 90% 14%,rgba(255,255,255,.13),transparent 30%),
      linear-gradient(135deg,var(--ag-red),var(--ag-red-dark));
    color:#fff;
    padding:78px 0;
    overflow:hidden;
  }

  .gift-why__statement::before{
    content:"";
    position:absolute;
    right:-160px;
    top:-180px;
    width:420px;
    height:420px;
    border-radius:50%;
    border:70px solid rgba(255,255,255,.08);
  }

  .gift-why__statement-inner{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr 360px;
    gap:55px;
    align-items:end;
  }

  .gift-why__statement h2{
    margin:0;
    max-width:920px;
    color:#fff;
    font-size:clamp(32px,4vw,62px);
    line-height:1.03;
    letter-spacing:-.06em;
    font-weight:900;
  }

  .gift-why__statement p{
    margin:0;
    color:rgba(255,255,255,.80);
    font-size:15px;
    line-height:1.85;
  }

  .gift-why__process{
    counter-reset:giftStep;
  }

  .gift-why__process-row{
    counter-increment:giftStep;
    display:grid;
    grid-template-columns:180px 1fr;
    gap:46px;
    padding:34px 0;
    border-bottom:1px solid var(--ag-line);
  }

  .gift-why__process-row:first-child{
    border-top:1px solid var(--ag-line);
  }

  .gift-why__process-number{
    display:flex;
    align-items:flex-start;
    gap:12px;
    color:var(--ag-red);
    font-size:14px;
    line-height:1;
    font-weight:950;
  }

  .gift-why__process-number::before{
    content:counter(giftStep, decimal-leading-zero);
    font-size:42px;
    line-height:.9;
    letter-spacing:-.05em;
    font-weight:950;
  }

  .gift-why__process-row h3{
    margin:0;
    color:var(--ag-ink);
    font-size:24px;
    line-height:1.25;
    letter-spacing:-.04em;
    font-weight:950;
  }

  .gift-why__process-row p{
    margin:10px 0 0;
    max-width:780px;
    color:var(--ag-muted);
    font-size:14.5px;
    line-height:1.82;
  }

  .gift-why__occasions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:30px;
  }

  .gift-why__tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 15px;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--ag-line);
    color:var(--ag-text);
    font-size:13px;
    line-height:1;
    font-weight:850;
  }

  .gift-why__tag svg{
    width:17px;
    height:17px;
    color:var(--ag-red);
  }

  .gift-why__final{
    padding:72px 0 82px;
    background:#fff;
  }

  .gift-why__final-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:34px;
    align-items:center;
    border-top:1px solid var(--ag-line);
    border-bottom:1px solid var(--ag-line);
    padding:38px 0;
  }

  .gift-why__final h2{
    margin:0;
    color:var(--ag-ink);
    font-size:clamp(30px,3.5vw,52px);
    line-height:1.08;
    letter-spacing:-.055em;
    font-weight:950;
  }

  .gift-why__final p{
    margin:13px 0 0;
    max-width:800px;
    color:var(--ag-muted);
    font-size:15px;
    line-height:1.85;
  }

  .gift-why__final-action{
    display:flex;
    justify-content:flex-end;
  }

  @media (max-width:1120px){
    .gift-why__hero-inner,
    .gift-why__split,
    .gift-why__statement-inner,
    .gift-why__final-inner{
      grid-template-columns:1fr;
    }

    .gift-why__side-title{
      position:static;
    }

    .gift-why__final-action{
      justify-content:flex-start;
    }
  }

  @media (max-width:760px){
    .gift-why__wrap{
      width:94%;
    }

    .gift-why__hero{
      padding:38px 0 58px;
    }

    .gift-why__hero-inner{
      gap:28px;
    }

    .gift-why__visual{
      min-height:340px;
    }

    .gift-why__visual::before{
      width:270px;
      height:270px;
    }

    .gift-why__visual-ring{
      width:310px;
      height:310px;
    }

    .gift-why__floating{
      position:relative;
      left:auto;
      right:auto;
      top:auto;
      bottom:auto;
      margin-top:12px;
      justify-content:center;
    }

    .gift-why__bar{
      margin-top:0;
      padding-top:18px;
    }

    .gift-why__bar-inner{
      border-radius:24px;
      align-items:flex-start;
      flex-direction:column;
    }

    .gift-why__section,
    .gift-why__statement,
    .gift-why__final{
      padding:54px 0;
    }

    .gift-why__line-item{
      grid-template-columns:1fr;
      gap:15px;
    }

    .gift-why__process-row{
      grid-template-columns:1fr;
      gap:16px;
    }

    .gift-why__actions{
      flex-direction:column;
      align-items:stretch;
    }

    .gift-why__btn{
      width:100%;
    }
  }

  @media (prefers-reduced-motion:reduce){
    *{
      transition:none !important;
      scroll-behavior:auto !important;
    }
  }

  .gift-why__desc--wide {
    margin-top: 0;
    max-width: 850px;
  }


/* =========================================================
   Latest news blog details page styles
   Source: latest_news_blog_details.html
========================================================= */
:root {
    --ag-red: #c31f26;
    --ag-red-dark: #99161d;
    --ag-red-soft: rgba(195, 31, 38, 0.09);
    --ag-gold: #d9a441;
    --ag-ink: #141416;
    --ag-title: #17171a;
    --ag-text: #45454d;
    --ag-muted: #74747f;
    --ag-soft: #f6f3ef;
    --ag-soft-2: #fbfaf8;
    --ag-border: #ebe7e2;
    --ag-white: #ffffff;
    --ag-cream: #f8f4ef;
    --ag-shadow: 0 24px 70px rgba(148, 145, 140, 0.1);
    --ag-shadow-soft: 0 24px 70px rgba(148, 145, 140, 0.1);
    --ag-radius-lg: 30px;
    --ag-radius-md: 22px;
    --ag-radius-sm: 16px;
  }

  body {
    margin: 0;
  }

  .ag-news-detail,
  .ag-news-detail * {
    box-sizing: border-box;
  }

  .ag-news-detail a {
    text-decoration: none;
  }

  .ag-news-detail {
    width: 100%;
    min-height: 100vh;
    padding: 34px 0 86px;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--ag-text);
  }

  .ag-news-container {
    width: 75%;
    max-width: none;
    margin: 0 auto;
  }

  .ag-news-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 28px;
  }

  .ag-news-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 6px 16px 6px 7px;
    color: var(--ag-title);
    border: 1px solid rgba(235, 231, 226, 0.95);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    font-size: 14px;
    font-weight: 800;
    transition: 0.22s ease;
  }

  .ag-news-back i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ag-red);
    color: #ffffff;
    font-size: 17px;
  }

  .ag-news-back:hover {
    color: var(--ag-red);
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(28, 24, 20, 0.09);
  }

  .ag-news-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ag-title);
    font-size: 13px;
    font-weight: 850;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(235, 231, 226, 0.95);
    padding: 12px 16px;
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(28, 24, 20, 0.055);
    backdrop-filter: blur(12px);
  }

  .ag-news-label i {
    color: var(--ag-red);
    font-size: 17px;
  }

  .ag-news-shell {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 356px;
    gap: 30px;
    align-items: start;
  }

  .ag-news-main {
    min-width: 0;
  }

  .ag-news-article {
    border-radius: var(--ag-radius-lg);
    box-shadow: var(--ag-shadow);
    overflow: hidden;
  }

  .ag-news-cover {
    position: relative;
    width: 100%;
    height: 470px;
    background: linear-gradient(135deg, #f2ede7, #ffffff);
    overflow: hidden;
  }

  .ag-news-cover img,
  .ag-news-cover video,
  .ag-news-cover iframe {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border: 0;
  }

  .ag-news-cover::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 48%;
    background: linear-gradient(180deg, transparent, rgba(12, 12, 14, 0.46));
    pointer-events: none;
  }

  .ag-news-content-box {
    position: relative;
    padding: 48px 54px 56px;
  }

  .ag-news-content-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 54px;
    right: 54px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(195, 31, 38, 0.35), transparent);
  }

  .ag-news-category {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 19px;
    color: var(--ag-red);
    background: var(--ag-red-soft);
    border: 1px solid rgba(195, 31, 38, 0.14);
    padding: 9px 13px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.13em;
  }

  .ag-news-category::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ag-red);
    box-shadow: 0 0 0 5px rgba(195, 31, 38, 0.12);
  }

  .ag-news-title {
    max-width: 900px;
    margin: 0;
    color: var(--ag-title);
    font-size: clamp(25px, 2.3vw, 56px);
    line-height: 1.08;
    font-weight: 850;
    letter-spacing: -0.048em;
  }

  .ag-news-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0 0;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--ag-border);
    color: var(--ag-muted);
    font-size: 14px;
    font-weight: 700;
  }

  .ag-news-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 13px;
    background: var(--ag-soft-2);
    border: 1px solid var(--ag-border);
    border-radius: 999px;
  }

  .ag-news-meta i {
    color: var(--ag-red);
    font-size: 16px;
  }

  .ag-news-short {
    position: relative;
    margin: 32px 0;
    padding: 24px 26px 24px 30px;
    border: 1px solid rgba(195, 31, 38, 0.16);
    border-left: 5px solid var(--ag-red);
    border-radius: 0 var(--ag-radius-md) var(--ag-radius-md) 0;
    background: linear-gradient(135deg, rgba(195, 31, 38, 0.055), rgba(217, 164, 65, 0.07));
    color: #242428;
    font-size: 19px;
    line-height: 1.75;
    font-weight: 560;
    letter-spacing: -0.012em;
  }

  .ag-news-description {
    color: var(--ag-text);
    font-size: 16px;
    line-height: 2.05;
    font-weight: 430;
    white-space: pre-line;
  }

  .ag-news-sidebar {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .ag-premium-card {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at 16% 0%, rgba(195, 31, 38, 0.42), transparent 36%),
      linear-gradient(145deg, #171719, #0d0d0f);
    color: #ffffff;
    padding: 30px;
    border-radius: var(--ag-radius-lg);
    box-shadow: var(--ag-shadow);
  }

  .ag-premium-card::after {
    content: "";
    position: absolute;
    right: -54px;
    bottom: -54px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(217, 164, 65, 0.16);
    pointer-events: none;
  }

  .ag-premium-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    background: #ffffff;
    color: var(--ag-red);
    border-radius: 18px;
    font-size: 26px;
    margin-bottom: 22px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
    position: relative;
    z-index: 1;
  }

  .ag-premium-icon svg {
    width: 31px;
    height: 31px;
    display: block;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }

  .ag-premium-card h3 {
    position: relative;
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 23px;
    line-height: 1.25;
    font-weight: 850;
    letter-spacing: -0.035em;
    z-index: 1;
  }

  .ag-premium-card p {
    position: relative;
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 14px;
    line-height: 1.78;
    font-weight: 430;
    z-index: 1;
  }

  .ag-premium-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    background: #ffffff;
    color: var(--ag-ink);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 900;
    transition: 0.22s ease;
    z-index: 1;
  }

  .ag-premium-btn:hover {
    background: var(--ag-red);
    color: #ffffff;
    transform: translateY(-1px);
  }

  .ag-info-card {
    background: rgba(255, 255, 255, 0.93);
    border-radius: var(--ag-radius-lg);
    padding: 26px;
    box-shadow: var(--ag-shadow-soft);
  }

  .ag-info-card h4 {
    margin: 0 0 18px;
    color: var(--ag-title);
    font-size: 18px;
    font-weight: 850;
    letter-spacing: -0.025em;
  }

  .ag-info-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .ag-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    color: var(--ag-muted);
    background: var(--ag-soft-2);
    border: 1px solid var(--ag-border);
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 600;
  }

  .ag-info-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--ag-red);
    background: linear-gradient(145deg, rgba(195, 31, 38, 0.11), rgba(217, 164, 65, 0.09));
    border: 1px solid rgba(195, 31, 38, 0.12);
    border-radius: 14px;
    margin-top: 1px;
  }

  .ag-info-icon svg {
    width: 21px;
    height: 21px;
    display: block;
    stroke: currentColor;
    stroke-width: 2.15;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }

  .ag-related-section,
  .ag-comments-section {
    margin-top: 34px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: var(--ag-radius-lg);
    padding: 34px;
    box-shadow: var(--ag-shadow-soft);
  }

  .ag-related-top,
  .ag-comments-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 22px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--ag-border);
  }

  .ag-related-top h2,
  .ag-comments-head h2 {
    margin: 0;
    color: var(--ag-title);
    font-size: 30px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: -0.04em;
  }

  .ag-related-top p,
  .ag-comments-head p {
    margin: 7px 0 0;
    color: var(--ag-muted);
    font-size: 14px;
    line-height: 1.65;
    font-weight: 520;
  }

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

  .ag-related-card {
    position: relative;
    min-height: 180px;
    padding: 22px;
    background: linear-gradient(180deg, #ffffff, #fbfaf8);
    color: inherit;
    border: 1px solid var(--ag-border);
    border-radius: 22px;
    transition: 0.24s ease;
    overflow: hidden;
  }

  .ag-related-card::after {
    content: "";
    position: absolute;
    inset: auto 18px 18px auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ag-red-soft);
    transition: 0.24s ease;
  }

  .ag-related-card:hover {
    transform: translateY(-4px);
    border-color: rgba(195, 31, 38, 0.23);
    box-shadow: 0 18px 34px rgba(28, 24, 20, 0.08);
  }

  .ag-related-card:hover::after {
    background: rgba(195, 31, 38, 0.16);
    transform: scale(1.2);
  }

  .ag-related-card span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    color: var(--ag-red);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.09em;
  }

  .ag-related-card h3 {
    position: relative;
    margin: 0;
    color: var(--ag-title);
    font-size: 18px;
    line-height: 1.45;
    font-weight: 820;
    letter-spacing: -0.025em;
    z-index: 1;
  }

  .ag-not-found {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radius-lg);
    box-shadow: var(--ag-shadow);
    padding: 76px 30px;
    text-align: center;
  }

  .ag-not-found-icon {
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    margin: 0 auto 22px;
    background: var(--ag-ink);
    color: #ffffff;
    border-radius: 26px;
    font-size: 36px;
  }

  .ag-not-found h1 {
    margin: 0 0 10px;
    color: var(--ag-title);
    font-size: 38px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: -0.04em;
  }

  .ag-not-found p {
    max-width: 540px;
    margin: 0 auto 22px;
    color: var(--ag-muted);
    font-size: 15px;
    line-height: 1.7;
  }

  .ag-comments-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 11px 15px;
    border: 1px solid var(--ag-border);
    background: var(--ag-soft-2);
    color: var(--ag-title);
    font-size: 13px;
    font-weight: 900;
    border-radius: 999px;
  }

  .ag-comments-count i {
    color: var(--ag-red);
    font-size: 16px;
  }

  .ag-comment-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 24px;
    margin-bottom: 26px;
    background: linear-gradient(180deg, #fffdfb, #fbfaf8);
    border: 1px solid var(--ag-border);
    border-radius: 24px;
  }

  .ag-comment-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

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

  .ag-comment-field label {
    color: var(--ag-title);
    font-size: 13px;
    font-weight: 850;
  }

  .ag-comment-field input,
  .ag-comment-field textarea {
    width: 100%;
    border: 1px solid var(--ag-border);
    background: var(--ag-white);
    color: var(--ag-title);
    outline: none;
    border-radius: 15px;
    padding: 14px 15px;
    font-size: 14px;
    font-weight: 560;
    transition: 0.2s ease;
    font-family: inherit;
  }

  .ag-comment-field textarea {
    min-height: 126px;
    resize: vertical;
    line-height: 1.7;
  }

  .ag-comment-field input:focus,
  .ag-comment-field textarea:focus {
    border-color: rgba(195, 31, 38, 0.55);
    box-shadow: 0 0 0 4px rgba(195, 31, 38, 0.085);
  }

  .ag-comment-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .ag-comment-message {
    color: var(--ag-muted);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 650;
  }

  .ag-comment-submit {
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    background: var(--ag-red);
    color: #ffffff;
    padding: 0 24px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 900;
    transition: 0.22s ease;
    font-family: inherit;
    box-shadow: 0 14px 28px rgba(195, 31, 38, 0.20);
  }

  .ag-comment-submit:hover {
    background: var(--ag-red-dark);
    transform: translateY(-1px);
  }

  .ag-comment-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
  }

  .ag-comments-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .ag-comment-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 15px;
    padding: 18px;
    border: 1px solid var(--ag-border);
    border-radius: 22px;
    background: #ffffff;
    transition: 0.22s ease;
  }

  .ag-comment-card:hover {
    border-color: rgba(195, 31, 38, 0.18);
    box-shadow: 0 14px 30px rgba(28, 24, 20, 0.055);
  }

  .ag-comment-avatar {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--ag-ink), #343438);
    color: #ffffff;
    border-radius: 17px;
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .ag-comment-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
  }

  .ag-comment-name {
    color: var(--ag-title);
    font-size: 15px;
    font-weight: 850;
  }

  .ag-comment-date {
    color: var(--ag-muted);
    background: var(--ag-soft-2);
    border: 1px solid var(--ag-border);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
  }

  .ag-comment-text {
    margin: 0;
    color: var(--ag-text);
    font-size: 14px;
    line-height: 1.78;
    font-weight: 450;
    white-space: pre-line;
  }

  .ag-no-comments {
    padding: 24px;
    border: 1px dashed rgba(195, 31, 38, 0.22);
    border-radius: 22px;
    background: linear-gradient(180deg, #fffdfb, #fbfaf8);
    color: var(--ag-muted);
    font-size: 14px;
    line-height: 1.7;
    font-weight: 650;
    text-align: center;
  }

  @media (max-width: 1100px) {
    .ag-news-shell {
      grid-template-columns: 1fr;
    }

    .ag-news-sidebar {
      position: relative;
      top: auto;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ag-news-cover {
      height: 400px;
    }
  }

  @media (max-width: 860px) {
    .ag-news-detail {
      padding: 24px 0 64px;
    }

    .ag-news-container {
      width: 75%;
    }

    .ag-news-breadcrumb {
      flex-direction: column;
      align-items: stretch;
    }

    .ag-news-back,
    .ag-news-label {
      width: 100%;
      justify-content: center;
    }

    .ag-news-cover {
      height: 310px;
    }

    .ag-news-content-box {
      padding: 34px 24px 38px;
    }

    .ag-news-content-box::before {
      left: 24px;
      right: 24px;
    }

    .ag-news-title {
      font-size: 32px;
    }

    .ag-news-short {
      font-size: 17px;
      line-height: 1.75;
      padding: 20px;
    }

    .ag-news-description {
      font-size: 15px;
      line-height: 1.9;
    }

    .ag-news-sidebar {
      grid-template-columns: 1fr;
    }

    .ag-related-section,
    .ag-comments-section {
      padding: 24px;
    }

    .ag-related-top,
    .ag-comments-head,
    .ag-comment-actions,
    .ag-comment-name-row {
      align-items: flex-start;
      flex-direction: column;
    }

    .ag-comment-form {
      grid-template-columns: 1fr;
      padding: 18px;
    }

    .ag-related-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 430px) {
    .ag-news-cover {
      height: 238px;
    }

    .ag-news-content-box {
      padding: 30px 20px 34px;
    }

    .ag-news-content-box::before {
      left: 20px;
      right: 20px;
    }

    .ag-news-title {
      font-size: 28px;
      letter-spacing: -0.035em;
    }

    .ag-news-meta {
      font-size: 13px;
    }

    .ag-premium-card,
    .ag-info-card,
    .ag-related-section,
    .ag-comments-section {
      padding: 22px;
    }

    .ag-comment-card {
      grid-template-columns: 1fr;
    }
  }

  .ag-comment-optional {
    color: var(--ag-muted);
    font-weight: 650;
  }

  .ag-news-back--not-found {
    margin-top: 12px;
    justify-content: center;
  }


/* =========================================================
   Latest news blog page styles
   Source: latest_news_blog.html
========================================================= */
:root {
    --ag-primary: #c31f26;
    --ag-primary-dark: #9f151b;
    --ag-dark: #15171f;
    --ag-text: #344054;
    --ag-muted: #667085;
    --ag-border: #eaecf0;
    --ag-soft: #fff7f7;
    --ag-white: #ffffff;
    --ag-shadow: 0 18px 45px rgba(16, 24, 40, 0.08);
    --ag-shadow-hover: 0 24px 60px rgba(16, 24, 40, 0.12);
  }

  .ag-blog-page {
    background:
      radial-gradient(circle at top left, rgba(195, 31, 38, 0.07), transparent 34%),
      linear-gradient(180deg, #ffffff 0%, #fffafa 45%, #ffffff 100%);
    padding: 34px 0 78px;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--ag-dark);
  }

  .ag-blog-container {
    width: 90%;
    max-width: 1380px;
    margin: 0 auto;
  }

  .ag-blog-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(236, 185, 188, 0.12);
    border-radius: 28px;
    padding: 42px 42px 38px;
    margin-bottom: 28px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 247, 247, 0.94)),
      radial-gradient(circle at 92% 12%, rgba(195, 31, 38, 0.16), transparent 26%);
    
  }

  .ag-blog-hero::before {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(195, 31, 38, 0.08);
  }

  .ag-blog-hero::after {
    content: "";
    position: absolute;
    right: 56px;
    bottom: -65px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border: 28px solid rgba(195, 31, 38, 0.06);
  }

  .ag-blog-hero-content {
    position: relative;
    z-index: 2;
    max-width: 880px;
  }

  .ag-blog-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border-radius: 999px;
    color: var(--ag-primary);
    font-size: 13px;
    font-weight: 700;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(195, 31, 38, 0.08);
  }

  .ag-blog-kicker i {
    font-size: 17px;
  }

  .ag-blog-title {
    font-size: clamp(25px, 2.5vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.04em;
    margin: 17px 0 12px;
    font-weight: 700;
    color: var(--ag-dark);
  }

  .ag-blog-lead {
    max-width: 790px;
    color: var(--ag-muted);
    font-size: 16px;
    line-height: 1.75;
    margin: 0;
    font-weight: 400;
  }

  .ag-blog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 20px;
  }

  .ag-blog-section-title {
    margin: 0;
  }

  .ag-blog-section-title h2 {
    margin: 0 0 5px;
    font-size: 25px;
    line-height: 1.25;
    letter-spacing: -0.025em;
    font-weight: 700;
    color: var(--ag-dark);
  }

  .ag-blog-section-title p {
    margin: 0;
    font-size: 14px;
    color: var(--ag-muted);
    line-height: 1.6;
  }

  .ag-blog-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--ag-border);
    color: var(--ag-text);
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.05);
  }

  .ag-blog-count i {
    color: var(--ag-primary);
    font-size: 17px;
  }

  .ag-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .ag-blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--ag-border);
    border-radius: 24px;
    background: var(--ag-white);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .ag-blog-card:hover {
    transform: translateY(-6px);
    border-color: rgba(195, 31, 38, 0.24);
    box-shadow: var(--ag-shadow-hover);
    color: inherit;
    text-decoration: none;
  }

  .ag-blog-media {
    position: relative;
    height: 266px;
    overflow: hidden;
    background:
      linear-gradient(135deg, #fff4f4, #ffffff);
  }

  .ag-blog-media img,
  .ag-blog-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform 0.35s ease;
  }

  .ag-blog-card:hover .ag-blog-media img,
  .ag-blog-card:hover .ag-blog-media video {
    transform: scale(1.045);
  }

  .ag-blog-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.24));
    pointer-events: none;
  }

  .ag-blog-empty {
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--ag-primary);
    font-weight: 800;
    font-size: 48px;
  }

  .ag-blog-badge {
    position: absolute;
    left: 16px;
    top: 16px;
    z-index: 2;
    max-width: calc(100% - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.96);
    color: var(--ag-primary);
    border: 1px solid rgba(195, 31, 38, 0.14);
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.12);
  }

  .ag-blog-body {
    padding: 20px 20px 19px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    flex: 1;
  }

  .ag-blog-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: #7b8494;
    font-size: 13px;
    font-weight: 600;
  }

  .ag-blog-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .ag-blog-meta i {
    color: var(--ag-primary);
    font-size: 15px;
  }

  .ag-blog-card h3 {
    font-size: 20px;
    line-height: 1.36;
    margin: 0;
    font-weight: 760;
    color: var(--ag-dark);
    letter-spacing: -0.025em;
  }

  .ag-blog-card p {
    margin: 0;
    color: var(--ag-muted);
    font-size: 14px;
    line-height: 1.72;
    font-weight: 400;
  }

  .ag-blog-read {
    margin-top: auto;
    padding-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ag-primary);
    font-weight: 800;
    font-size: 14px;
  }

  .ag-blog-read i {
    font-size: 17px;
    transition: transform 0.22s ease;
  }

  .ag-blog-card:hover .ag-blog-read i {
    transform: translateX(4px);
  }

  .ag-blog-empty-state {
    border: 1px dashed rgba(195, 31, 38, 0.30);
    border-radius: 26px;
    padding: 50px 28px;
    text-align: center;
    background:
      radial-gradient(circle at top, rgba(195, 31, 38, 0.08), transparent 36%),
      #ffffff;
    box-shadow: 0 14px 35px rgba(16, 24, 40, 0.055);
  }

  .ag-blog-empty-icon {
    width: 74px;
    height: 74px;
    border-radius: 22px;
    display: inline-grid;
    place-items: center;
    background: var(--ag-soft);
    color: var(--ag-primary);
    margin-bottom: 18px;
    font-size: 34px;
  }

  .ag-blog-empty-state h3 {
    font-size: 25px;
    line-height: 1.25;
    margin: 0 0 8px;
    font-weight: 780;
    color: var(--ag-dark);
  }

  .ag-blog-empty-state p {
    color: var(--ag-muted);
    margin: 0 auto;
    max-width: 540px;
    line-height: 1.7;
    font-size: 15px;
  }

  @media (max-width: 1100px) {
    .ag-blog-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ag-blog-hero {
      padding: 34px;
    }
  }

  @media (max-width: 760px) {
    .ag-blog-page {
      padding: 24px 0 58px;
    }

    .ag-blog-container {
      width: 92%;
    }

    .ag-blog-hero {
      border-radius: 24px;
      padding: 28px 22px;
      margin-bottom: 24px;
    }

    .ag-blog-toolbar {
      align-items: flex-start;
      flex-direction: column;
    }

    .ag-blog-count {
      width: 100%;
      justify-content: center;
    }

    .ag-blog-grid {
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .ag-blog-media {
      height: 215px;
    }

    .ag-blog-card h3 {
      font-size: 18px;
    }
  }

  @media (max-width: 420px) {
    .ag-blog-hero {
      padding: 24px 18px;
    }

    .ag-blog-title {
      font-size: 31px;
    }

    .ag-blog-lead {
      font-size: 15px;
    }

    .ag-blog-body {
      padding: 18px;
    }
  }