:root {
  --bg: #f6f3ee;
  --surface: #ffffff;
  --surface-2: #f4f0e8;
  --text: #1c1c23;
  --muted: #666773;
  --primary: #111217;
  --primary-2: #2a2b35;
  --accent: #c6a36a;
  --danger: #d94c4c;
  --border: #e5dfd3;
  --shadow-sm: 0 10px 24px rgba(24, 20, 14, 0.08);
  --shadow-lg: 0 26px 70px rgba(24, 20, 14, 0.14);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --container: 1240px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Sora", "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(198, 163, 106, 0.2), transparent 32%),
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.65), transparent 30%),
    linear-gradient(180deg, #fbfaf7 0%, #f6f3ee 100%);
  line-height: 1.6;
}

body.no-scroll {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.container {
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}

.section {
  padding: 42px 0;
}

.section-title {
  margin: 0 0 8px;
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.2;
}

.section-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  border: 1px solid #343744;
  box-shadow: 0 14px 30px rgba(21, 21, 27, 0.2);
}

.btn-ghost {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-dark {
  background: #101116;
  color: #fff;
  border: 1px solid #2b2d37;
}

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

.promo-topbar {
  background: linear-gradient(90deg, #07080b, #151722);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #eceef5;
  overflow: hidden;
}

.promo-marquee {
  max-width: var(--container);
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
}

.promo-track {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-left: 8px;
  animation: promo-scroll 28s linear infinite;
}

.promo-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #e2e5ef;
  font-size: 0.83rem;
  font-weight: 600;
  padding-right: 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.promo-item i {
  color: #d2966e;
  font-size: 0.7rem;
}

@keyframes promo-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 120;
  backdrop-filter: blur(10px);
  background: rgba(250, 248, 243, 0.88);
  border-bottom: 1px solid rgba(223, 215, 200, 0.9);
}

.topline {
  background: linear-gradient(90deg, #050507, #16171d);
  color: #b7bac5;
  font-size: 0.82rem;
}

.topline .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
}

.topline .quick-links {
  display: flex;
  gap: 14px;
}

.mainnav {
  min-height: 74px;
}

.mainnav .container {
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #14141a;
  text-shadow: 0 0 14px rgba(198, 163, 106, 0.18);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  margin-right: 8px;
}

.nav-links > a,
.nav-item > a {
  font-weight: 600;
  color: #2a2b33;
  padding: 8px 10px;
  border-radius: 8px;
}

.nav-links > a:hover,
.nav-links > a.active,
.nav-item > a:hover,
.nav-item > a.active {
  background: #f2ece1;
  color: #111217;
}

.nav-item {
  position: relative;
}

.nav-mega,
.nav-dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 12px);
  min-width: 310px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 10px;
  display: none;
  z-index: 40;
}

.nav-mega {
  width: 390px;
}

.nav-mega a,
.nav-dropdown a {
  display: block;
  border-radius: 10px;
  padding: 10px 12px;
  color: #2d2f3a;
}

.nav-mega a + a,
.nav-dropdown a + a {
  margin-top: 6px;
}

.nav-mega a strong {
  display: block;
  font-size: 0.94rem;
}

.nav-mega a span {
  display: block;
  margin-top: 2px;
  color: #787b87;
  font-size: 0.82rem;
}

.nav-mega a:hover,
.nav-dropdown a:hover {
  background: #f5efe4;
}

.nav-item.has-menu:hover .nav-mega,
.nav-item.has-menu:hover .nav-dropdown {
  display: block;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: #1f2028;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.badge-count {
  position: absolute;
  right: -4px;
  top: -4px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

.menu-toggle {
  display: none;
}

.mobile-panel {
  display: none;
}

.header-trustline {
  border-top: 1px solid #e9e0d0;
  background: #fffdf9;
}

.header-trustline .container {
  min-height: 42px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  font-size: 0.8rem;
  color: #5f6068;
}

.header-trustline span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.header-trustline i {
  color: var(--accent);
}

.section-head {
  margin-bottom: 16px;
}

.section-kicker {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: #8b6f41;
  margin-bottom: 8px;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.showcase-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(135deg, #fffdf8, #f9f3e7);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 12px;
  align-items: center;
}

.showcase-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #1a1b22;
  color: #fff;
  padding: 5px 11px;
  font-size: 0.72rem;
  font-weight: 700;
}

.showcase-card h3 {
  margin: 10px 0 8px;
  font-size: 1.15rem;
  line-height: 1.25;
}

.showcase-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.showcase-rating small {
  color: #6c6f7c;
  font-size: 0.78rem;
}

.showcase-price {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-top: 10px;
}

.showcase-price strong {
  font-size: 1.42rem;
}

.showcase-price span {
  color: #7f8492;
  text-decoration: line-through;
}

.showcase-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.showcase-actions .btn {
  padding: 10px 14px;
}

.showcase-media {
  position: relative;
}

.showcase-media img {
  max-height: 150px;
  object-fit: contain;
  margin-left: auto;
}

.showcase-discount {
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 999px;
  background: #d94c4c;
  color: #fff;
  font-size: 0.72rem;
  padding: 4px 9px;
  font-weight: 700;
}

.products-grid-rich {
  margin-top: 14px;
}

.product-card-rich {
  gap: 2px;
}

.product-meta-row {
  margin: 2px 0 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.product-benefits {
  margin-top: 10px;
  margin-bottom: 4px;
  display: grid;
  gap: 5px;
}

.product-benefits span {
  color: #666978;
  font-size: 0.79rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.product-benefits i {
  color: var(--accent);
}

.trust-strip-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.trust-strip-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.trust-strip-item i {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #1a1b23;
  background: #f4ead8;
}

.trust-strip-item strong {
  display: block;
  font-size: 0.85rem;
}

.trust-strip-item small {
  color: #747784;
  font-size: 0.74rem;
}

.review-section {
  padding-top: 20px;
}

.review-shell-card {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: linear-gradient(150deg, #ffffff, #f8f4ec);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}

.review-shell-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 16px;
  align-items: start;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.review-shell-kicker {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6f5331;
  background: #f4e7d3;
}

.review-shell-copy h3 {
  margin: 10px 0 6px;
  font-size: clamp(1.25rem, 2.3vw, 1.6rem);
  line-height: 1.25;
}

.review-shell-copy p {
  margin: 0;
  color: #636775;
  max-width: 60ch;
}

.review-shell-media {
  margin: 0;
  justify-self: end;
  width: min(220px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 12px 24px rgba(30, 22, 13, 0.14);
}

.review-shell-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.review-overview {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 16px;
}

.review-score-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  padding: 20px;
}

.review-score-value {
  font-size: 3rem;
  line-height: 1;
  font-weight: 800;
  color: #1a1b23;
}

.review-stars-large {
  font-size: 1rem;
  margin-top: 8px;
}

.review-score-card p {
  margin: 8px 0 0;
  color: #6d707d;
  font-size: 0.9rem;
}

.rating-bands {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.rating-band {
  display: grid;
  grid-template-columns: 34px 1fr 36px;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #616471;
}

.rating-band-track {
  height: 7px;
  border-radius: 999px;
  background: #eee7da;
  overflow: hidden;
}

.rating-band-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #d7b47b, #c29a5f);
}

.rating-band b {
  text-align: right;
  color: #353742;
}

.review-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.review-kpi-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(135deg, #fffdf8, #f7f2e8);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.review-kpi-card strong {
  display: block;
  font-size: 1.35rem;
  margin-bottom: 2px;
}

.review-kpi-card span {
  color: #676a77;
  font-size: 0.85rem;
}

.review-carousel {
  margin-top: 16px;
  --rv-gap: 14px;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}

.review-carousel-viewport {
  overflow: hidden;
}

.review-carousel-track {
  display: flex;
  gap: var(--rv-gap);
  transition: transform 0.46s cubic-bezier(0.2, 0.65, 0.2, 1);
  will-change: transform;
}

.review-slide {
  flex: 0 0 calc((100% - (var(--rv-gap) * 2)) / 3);
}

.review-carousel-nav {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: #262732;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.review-carousel-nav:hover {
  transform: translateY(-1px);
}

.review-carousel-nav:disabled {
  opacity: 0.36;
  cursor: not-allowed;
  transform: none;
}

.review-carousel-dots {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 7px;
}

.review-carousel-dots button {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 0;
  background: #d2d4dd;
  cursor: pointer;
}

.review-carousel-dots button.active {
  background: var(--accent);
}

.review-card-rich {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  padding: 15px;
}

.review-card-featured {
  background: linear-gradient(135deg, #fffdf8, #f6efdf);
}

.review-card-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 9px;
  align-items: center;
}

.review-avatar {
  background: #eceff5;
  color: #fff;
  overflow: hidden;
  border: 1px solid #d7dce7;
}

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

.review-badge {
  border-radius: 999px;
  background: #f3e7cf;
  color: #6b4f23;
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 700;
}

.review-linked-product {
  margin-top: 11px;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 9px;
  align-items: center;
}

.review-linked-product img {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  object-fit: contain;
  border: 1px solid var(--border);
  background: #f8f2e5;
}

.review-card-rich p {
  margin: 11px 0 0;
  color: #4a4d59;
  font-size: 0.9rem;
  line-height: 1.62;
}

.review-footer-row {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.review-footer-row span {
  font-size: 0.74rem;
  color: #717483;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.review-mini-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  color: #9a7445;
  flex: 0 0 14px;
}

.review-mini-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hero {
  margin-top: 18px;
}

.hero-card {
  position: relative;
  min-height: clamp(460px, 62vh, 620px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0a0a0d;
  box-shadow: var(--shadow-lg);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg-image, none);
  background-size: cover;
  background-position: center;
  transition: background-image 0.35s ease;
}

@media (max-width: 860px) {
  .hero-bg {
    background-image: var(--hero-bg-mobile-image, var(--hero-bg-image, none));
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(6, 6, 8, 0.9) 0%, rgba(10, 10, 12, 0.62) 55%, rgba(10, 10, 12, 0.42) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 30px;
  min-height: inherit;
  padding: 36px;
}

.hero-kicker {
  display: inline-block;
  color: #ebcd97;
  border: 1px solid rgba(214, 178, 115, 0.6);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-title {
  margin: 14px 0 8px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.45rem);
  line-height: 1.08;
}

.hero-subtitle {
  margin: 0;
  color: #c8cbd6;
  max-width: 560px;
}

.hero-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-product {
  justify-self: end;
  width: min(460px, 100%);
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.35));
}

.hero-dots {
  position: absolute;
  left: 36px;
  bottom: 28px;
  z-index: 3;
  display: flex;
  gap: 8px;
}

.hero-dot {
  width: 28px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(198, 163, 106, 0.45);
  cursor: pointer;
}

.hero-dot.active {
  background: #f4d59c;
}

.strip-showcase {
  margin-top: 8px;
  border-radius: 18px;
  padding: 12px;
  background: linear-gradient(145deg, #131a25 0%, #1f2a3b 100%);
  border: 1px solid #303d55;
  box-shadow:
    0 18px 34px rgba(9, 13, 20, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.strip-headline {
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid rgba(212, 220, 236, 0.2);
}

.strip-headline-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff8b27 0%, #ff5e2f 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(255, 112, 40, 0.3);
}

.strip-headline-badge i {
  font-size: 0.82rem;
}

.strip-showcase-calc .strip-headline-badge {
  background: linear-gradient(135deg, #14b8a6 0%, #16a34a 100%);
  box-shadow: 0 10px 22px rgba(22, 163, 74, 0.28);
}

.strip-showcase-calc {
  margin-top: 14px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(6, 31, 20, 0.86) 0%, rgba(8, 42, 28, 0.54) 28%, rgba(8, 42, 28, 0) 52%),
    radial-gradient(circle at 12% 16%, rgba(167, 255, 201, 0.26) 0%, rgba(167, 255, 201, 0) 42%),
    radial-gradient(circle at 88% 84%, rgba(76, 221, 154, 0.34) 0%, rgba(76, 221, 154, 0) 48%),
    linear-gradient(145deg, #0e3325 0%, #156246 52%, #1f8c5f 100%);
  border-color: #2f7c5c;
  box-shadow:
    0 18px 34px rgba(8, 35, 24, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(123, 255, 182, 0.08);
}

.strip-showcase-calc::before,
.strip-showcase-calc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.strip-showcase-calc::before {
  background:
    repeating-linear-gradient(60deg, rgba(224, 255, 236, 0.07) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(-60deg, rgba(173, 250, 209, 0.06) 0 1px, transparent 1px 22px);
  opacity: 0.34;
  animation: slimCalcPatternDrift 18s linear infinite;
}

.strip-showcase-calc::after {
  background:
    radial-gradient(circle, rgba(208, 255, 225, 0.22) 0 2px, transparent 2.6px) 0 0 / 110px 110px,
    radial-gradient(circle, rgba(158, 249, 198, 0.18) 0 1.8px, transparent 2.4px) 48px 30px / 88px 88px;
  opacity: 0.38;
  animation: slimCalcSymbolFloat 24s linear infinite;
}

.strip-showcase-calc > * {
  position: relative;
  z-index: 1;
}

.strip-showcase-calc .strip-headline {
  border-bottom: 1px solid rgba(216, 246, 228, 0.28);
}

.strip-showcase-calc .strip-headline p {
  color: #e2f6e9;
}

@keyframes slimCalcPatternDrift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -22px, 0);
  }
}

@keyframes slimCalcSymbolFloat {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-18px, -14px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.strip-headline p {
  margin: 0;
  color: #d4dced;
  font-size: 0.84rem;
  font-weight: 500;
  text-align: right;
}

.strip-headline-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #ffb56f;
  background: rgba(255, 255, 255, 0.04);
  color: #ffcc95;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow:
    0 8px 18px rgba(255, 124, 45, 0.14),
    inset 0 1px 0 rgba(255, 223, 187, 0.22);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, color 0.22s ease, background-color 0.22s ease;
}

.strip-headline-action i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  color: #ffb066;
  border: 1px solid rgba(255, 176, 102, 0.52);
  background: rgba(255, 176, 102, 0.1);
}

.strip-headline-action:hover {
  transform: translateY(-1px);
  color: #ffe2be;
  border-color: #ffce97;
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 12px 24px rgba(255, 124, 45, 0.2),
    0 0 0 1px rgba(255, 180, 110, 0.2);
}

.strip-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.strip-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  min-height: 240px;
  box-shadow: var(--shadow-sm);
}

.strip-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.01);
}

.strip-layer {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 8, 10, 0.12), rgba(8, 8, 10, 0.78));
}

.strip-content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
}

.strip-content h3 {
  margin: 0 0 6px;
  font-size: 1.2rem;
}

.strip-content p {
  margin: 0;
  font-size: 0.9rem;
  color: #d5d9e6;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
}

.product-card:hover {
  border-color: #434451;
}

.product-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
}

.product-media {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: #f8f4ec;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.product-media img {
  max-height: 85%;
  object-fit: contain;
}

.product-title {
  margin: 0 0 8px;
  font-size: 1rem;
  min-height: 52px;
}

.product-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
}

.product-price-current {
  font-size: 1.25rem;
  font-weight: 800;
}

.product-price-old {
  text-decoration: line-through;
  color: #878b97;
  font-size: 0.92rem;
}

.product-card .btn {
  margin-top: 12px;
  width: 100%;
}

.highlight-panel {
  background: linear-gradient(130deg, #09090b, #181920);
  border-radius: var(--radius-lg);
  color: #fff;
  padding: 30px;
  box-shadow: var(--shadow-lg);
  border: 1px solid #2f3039;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.icon-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
}

.icon-card i {
  font-size: 1.4rem;
  color: var(--accent);
  margin-bottom: 8px;
}

.icon-card h4 {
  margin: 0 0 6px;
  font-size: 0.98rem;
}

.icon-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.testimonial-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.testimonial-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #20212a;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #eceef4;
}

.stars {
  color: #e2bf82;
  font-size: 12px;
  letter-spacing: 2px;
}

.site-footer {
  margin-top: 50px;
  background: #060607;
  color: #cbced9;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-top {
  padding: 36px 0 30px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 24px;
}

.footer-title {
  font-size: 0.95rem;
  color: #fff;
  margin: 0 0 12px;
}

.footer-col p,
.footer-col li,
.footer-col a {
  color: #a9adbb;
  font-size: 0.9rem;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 16px 0;
  font-size: 0.82rem;
  color: #8d92a0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.page-hero {
  padding: 32px 0 26px;
}

.page-hero-card {
  background: linear-gradient(120deg, #17171d, #2b2d37);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 34px;
  box-shadow: var(--shadow-lg);
  border: 1px solid #2f3039;
}

.page-hero-card h1 {
  margin: 0 0 10px;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.page-hero-card p {
  margin: 0;
  color: #c2c7d4;
}

.page-hero-card.page-hero-card-fail {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(130% 120% at 0% 0%, rgba(255, 122, 122, 0.3), rgba(255, 122, 122, 0) 42%),
    radial-gradient(120% 120% at 100% 100%, rgba(255, 188, 111, 0.22), rgba(255, 188, 111, 0) 38%),
    linear-gradient(132deg, #3b1212 0%, #621b1b 45%, #7d2424 100%);
  border-color: #8d3a3a;
  box-shadow: 0 22px 44px rgba(70, 17, 17, 0.35);
}

.page-hero-card.page-hero-card-fail::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid rgba(255, 214, 214, 0.24);
}

.order-fail-kicker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.order-fail-kicker {
  background: linear-gradient(140deg, #ffb9b9, #ffe0e0);
  border-color: #ffb2b2;
  color: #7d1212;
  font-weight: 800;
}

.order-fail-kicker i {
  color: #c62222;
}

.order-fail-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  min-height: 26px;
  padding: 0 10px;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  font-weight: 800;
  text-transform: uppercase;
  color: #ffe7e7;
  border: 1px solid rgba(255, 210, 210, 0.34);
  background: rgba(60, 8, 8, 0.26);
}

.order-fail-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5f5f;
  box-shadow: 0 0 0 0 rgba(255, 95, 95, 0.6);
  animation: orderFailPulse 1.5s ease-out infinite;
}

.page-hero-card.page-hero-card-fail h1 i {
  color: #ffd0d0;
}

.order-fail-hero-meta {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.order-fail-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  min-height: 26px;
  padding: 0 10px;
  font-size: 0.73rem;
  color: #ffecec;
  border: 1px solid rgba(255, 222, 222, 0.3);
  background: rgba(75, 12, 12, 0.26);
}

.order-fail-hero-meta .order-fail-id {
  font-weight: 800;
  color: #fff4f4;
  border-color: rgba(255, 227, 227, 0.45);
}

.order-fail-shell {
  border-color: #f1c0c0;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 208, 208, 0.24), rgba(255, 208, 208, 0) 42%),
    linear-gradient(170deg, #fffefe 0%, #fff8f8 100%);
}

.order-fail-summary {
  display: grid;
  gap: 8px;
}

.order-fail-summary .summary-row span i {
  margin-right: 5px;
  color: #c53030;
}

.order-fail-error {
  border-color: #eea8a8;
  background:
    radial-gradient(circle at 0 0, rgba(254, 226, 226, 0.9), rgba(254, 226, 226, 0) 46%),
    #fff6f6;
  color: #5f1414;
  box-shadow: inset 0 0 0 1px rgba(255, 225, 225, 0.72);
}

.order-fail-error strong {
  color: #8b1717;
}

.order-fail-actions .btn.btn-primary {
  background: linear-gradient(145deg, #c62f2f, #9b1e1e);
  border-color: #8e1717;
  box-shadow: 0 10px 20px rgba(148, 22, 22, 0.24);
}

.order-fail-actions .btn.btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

@keyframes orderFailPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 95, 95, 0.6);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 95, 95, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 95, 95, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .order-fail-live i {
    animation: none;
  }

  .order-fail-actions .btn.btn-primary:hover {
    transform: none;
  }
}

.page-hero.page-hero-product {
  padding: 10px 0 0;
}

.page-hero-card.page-hero-card-product {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255, 178, 93, 0.24), rgba(255, 178, 93, 0) 44%),
    radial-gradient(120% 120% at 0% 100%, rgba(102, 209, 160, 0.2), rgba(102, 209, 160, 0) 42%),
    linear-gradient(140deg, #223043 0%, #314861 58%, #3d5a76 100%);
  border: 1px solid #4c627d;
  box-shadow: none;
  color: #f5f8ff;
  border-radius: 14px 14px 0 0;
  padding: 12px 16px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.page-hero.page-hero-product + .detail-main-section {
  padding-top: 0;
  margin-top: 0;
}

.page-hero.page-hero-product + .detail-main-section > .container {
  border: 1px solid #d7dde7;
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background:
    radial-gradient(120% 110% at 100% 0%, rgba(249, 182, 78, 0.08), rgba(249, 182, 78, 0) 45%),
    radial-gradient(120% 110% at 0% 100%, rgba(92, 185, 143, 0.08), rgba(92, 185, 143, 0) 40%),
    #ffffff;
  box-shadow: 0 10px 22px rgba(18, 23, 32, 0.08);
  padding: 14px 14px 18px;
}

.page-hero.page-hero-product + .detail-main-section .detail-layout {
  gap: 16px;
}

.page-hero-card.page-hero-card-product h1 {
  margin: 0 0 6px;
  font-size: clamp(1.08rem, 1.8vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.page-hero-card.page-hero-card-product p {
  margin: 4px 0 0;
  font-size: 0.83rem;
  color: #d9e3f2;
}

.page-hero-product-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.page-hero-product-badge,
.page-hero-product-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 6px 9px;
  border: 1px solid transparent;
}

.page-hero-product-badge {
  background: linear-gradient(160deg, #ffb25d, #ff8f39);
  color: #fff;
  border-color: #ef8130;
  box-shadow: 0 7px 16px rgba(255, 143, 57, 0.24);
}

.page-hero-product-chip {
  background: rgba(255, 255, 255, 0.18);
  color: #f7fbff;
  border-color: rgba(255, 255, 255, 0.34);
}

.page-hero-product-chip i {
  color: #9cf0c8;
}

.searchbar {
  margin-top: 16px;
  display: flex;
  gap: 10px;
}

.searchbar input,
.searchbar select,
.field,
textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  color: var(--text);
  font: inherit;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  outline: 0;
  border-color: #74603b;
  box-shadow: 0 0 0 3px rgba(214, 178, 115, 0.16);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 18px;
}

.blog-grid,
.campaign-grid,
.faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.blog-card,
.campaign-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.blog-cover,
.campaign-cover {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}

.blog-body,
.campaign-body {
  padding: 16px;
}

.blog-meta,
.small-muted {
  color: var(--muted);
  font-size: 0.82rem;
}

.home-blog-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}

.home-blog-all {
  white-space: nowrap;
}

.home-blog-section {
  padding-top: 24px;
  padding-bottom: 24px;
}

.home-blog-head .section-title {
  margin-bottom: 4px;
  font-size: clamp(1.2rem, 1.45vw, 1.45rem);
}

.home-blog-head .section-subtitle {
  font-size: 0.84rem;
}

.home-blog-grid {
  gap: 12px;
  margin-top: 12px;
}

.home-blog-card {
  border-radius: 13px;
}

.home-blog-card .blog-cover {
  aspect-ratio: 16 / 7.2;
}

.home-blog-card .blog-body {
  padding: 11px 12px 12px;
}

.home-blog-card .blog-meta {
  font-size: 0.74rem;
}

.home-blog-card .blog-title {
  margin: 4px 0 6px;
  font-size: 0.95rem;
  line-height: 1.24;
}

.home-blog-excerpt {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-title,
.campaign-title {
  margin: 6px 0 8px;
  font-size: 1.1rem;
  line-height: 1.3;
}

.blog-read-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1f2937;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease;
}

.blog-read-link::after {
  content: "→";
  font-size: 0.92em;
  transform: translateX(0);
  transition: transform 0.2s ease;
}

.blog-read-link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: #cbd5e1;
  transform: scaleX(0.58);
  transform-origin: left;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.blog-read-link:hover {
  color: #0f172a;
}

.blog-read-link:hover::after {
  transform: translateX(3px);
}

.blog-read-link:hover::before {
  transform: scaleX(1);
  background: #94a3b8;
}

@media (max-width: 860px) {
  .home-blog-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-blog-card .blog-cover {
    aspect-ratio: 16 / 8.5;
  }
}

.pagination {
  margin-top: 24px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.pagination a,
.pagination span {
  min-width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  font-weight: 700;
}

.pagination .active {
  background: #d6b273;
  color: #121215;
  border-color: #d6b273;
}

.detail-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
}

.gallery-main {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.gallery-main img {
  width: 100%;
  max-height: 480px;
  object-fit: contain;
}

.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.gallery-thumbs button {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 6px;
  cursor: pointer;
}

.gallery-thumbs button img {
  display: block;
  width: 100%;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
}

.gallery-thumbs button.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(255, 138, 42, 0.22);
}

.price-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 16px;
}

.price-main {
  font-size: 2rem;
  font-weight: 800;
}

.qty-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.qty-box {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.qty-box button,
.qty-box span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
}

.qty-box button {
  border: 0;
  background: #f3ede2;
  font-size: 18px;
  cursor: pointer;
  color: #1d1e25;
}

.tabs {
  margin-top: 20px;
}

.detail-desc-block {
  margin-top: 16px;
}

.detail-desc-title {
  margin: 0 0 10px;
  font-size: 1.08rem;
  color: #1c2738;
}

.tab-head {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tab-head button {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
}

.tab-head button.active {
  background: #d6b273;
  color: #121215;
  border-color: #d6b273;
}

.tab-panel {
  margin-top: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}

.cart-layout-new {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
}

.cart-item {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.cart-item + .cart-item {
  margin-top: 10px;
}

.checkout-box {
  position: sticky;
  top: 90px;
}

.notice {
  padding: 12px 14px;
  border-radius: 10px;
  margin: 10px 0;
  font-size: 0.9rem;
}

.notice.success {
  background: #102319;
  color: #8fe8b9;
  border: 1px solid #275438;
}

.notice.error {
  background: #2b1214;
  color: #f1b1b7;
  border: 1px solid #613239;
}

.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  max-width: 360px;
  background: #0d0d11;
  color: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 12px 14px;
  transform: translateY(15px);
  opacity: 0;
  pointer-events: none;
  transition: 0.25s ease;
  z-index: 200;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.stack {
  display: grid;
  gap: 14px;
}

.muted {
  color: var(--muted);
}

.kicker {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #c3b49a;
  color: #6d5b3f;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 18px;
}

.article-main {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.article-cover {
  aspect-ratio: 16 / 8;
  background-size: cover;
  background-position: center;
}

.article-body {
  padding: 24px;
}

.article-body h1 {
  margin: 8px 0 10px;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.15;
}

.article-content {
  font-size: 1rem;
  line-height: 1.8;
  color: #393a44;
}

.article-content h2,
.article-content h3 {
  color: #1d1e25;
  line-height: 1.35;
}

.article-content img {
  border-radius: 12px;
  margin: 16px 0;
}

.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
}

.article-content table td,
.article-content table th {
  border: 1px solid #2f313a;
  padding: 8px 10px;
}

.article-side {
  display: grid;
  gap: 14px;
  align-content: start;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-chip {
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  padding: 7px 12px;
  font-size: 0.85rem;
  font-weight: 600;
}

.tag-chip:hover {
  background: #1e2028;
}

.blog-mini-list {
  display: grid;
  gap: 12px;
}

.blog-mini-item {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  align-items: center;
}

.blog-mini-cover {
  width: 92px;
  height: 68px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
}

.blog-mini-title {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.35;
}

.contact-grid-new {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
}

.contact-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.contact-meta-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px;
}

.contact-meta-item h4 {
  margin: 0 0 6px;
}

.map-frame {
  border: 0;
  width: 100%;
  min-height: 320px;
  border-radius: 14px;
}

.faq-toolbar {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.faq-toolbar .btn {
  padding: 8px 14px;
}

.faq-item-new {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.faq-question {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 16px;
  font: inherit;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.faq-answer {
  display: none;
  padding: 0 16px 16px;
  color: var(--muted);
}

.faq-item-new.open .faq-answer {
  display: block;
}

.auth-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 16px;
}

.auth-side {
  border-radius: 18px;
  background: linear-gradient(145deg, #15161c, #2c2f3c);
  color: #fff;
  padding: 24px;
  box-shadow: var(--shadow-lg);
  border: 1px solid #32333d;
}

.auth-side h1 {
  margin: 8px 0 10px;
  line-height: 1.15;
  font-size: clamp(1.7rem, 2.5vw, 2.3rem);
}

.auth-side ul {
  margin: 0;
  padding-left: 18px;
  color: #c8ccda;
}

.auth-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: 22px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.auth-tabs button {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 9px 10px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.auth-tabs button.active {
  background: #0f1013;
  border-color: #343641;
  color: #fff;
}

.auth-form {
  display: none;
}

.auth-form.active {
  display: block;
}

.profile-head {
  background: linear-gradient(130deg, #16181f, #303341);
  color: #fff;
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow-lg);
  border: 1px solid #32343e;
}

.profile-tabs {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-tabs button {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.profile-tabs button.active {
  background: #d6b273;
  color: #111115;
}

.profile-panels {
  margin-top: 16px;
}

.profile-panel {
  display: none;
}

.profile-panel.active {
  display: block;
}

.order-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}

.order-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  padding: 14px;
  align-items: center;
  background: #f4efe6;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.status-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65);
}

.status-orange {
  background: #fff1e4;
  color: #a75920;
  border-color: #f7c79d;
}

.status-blue {
  background: #eaf3ff;
  color: #1f5da9;
  border-color: #b9d5f7;
}

.status-green {
  background: #e9fbee;
  color: #197a43;
  border-color: #98dfb4;
}

.status-red {
  background: #ffe9ed;
  color: #ba2743;
  border-color: #f2a5b5;
}

.status-gray {
  background: #eef2f6;
  color: #4f5f73;
  border-color: #c8d3df;
}

.order-body {
  padding: 14px;
}

.order-product {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  padding: 8px 0;
}

.order-product img {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--border);
}

.cart-page-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
}

.page-hero.page-hero-cart {
  padding: 14px 0 10px;
}

.page-hero-card.page-hero-card-cart {
  position: relative;
  overflow: hidden;
  padding: 16px 18px;
  border-radius: 14px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 177, 84, 0.22), transparent 46%),
    radial-gradient(140% 130% at 0% 100%, rgba(103, 192, 149, 0.18), transparent 44%),
    linear-gradient(140deg, #1b2738 0%, #2e435c 58%, #3d5a76 100%);
  border: 1px solid #4e6785;
  box-shadow: 0 12px 24px rgba(16, 24, 36, 0.18);
}

.page-hero-card.page-hero-card-cart::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 38%, transparent 72%);
}

.page-hero-card.page-hero-card-cart h1 {
  margin: 8px 0 6px;
  font-size: clamp(1.28rem, 1.9vw, 1.72rem);
  line-height: 1.2;
}

.page-hero-card.page-hero-card-cart p {
  margin: 0;
  max-width: 760px;
  color: #d6deea;
  font-size: 0.9rem;
  line-height: 1.5;
}

.cart-hero-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.cart-hero-kicker {
  margin: 0;
  padding: 5px 10px;
  font-size: 0.71rem;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  color: #f2f6ff;
}

.cart-hero-flags,
.cart-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cart-hero-flags span,
.cart-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.1);
  color: #eef4ff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.cart-hero-flags span i,
.cart-hero-meta span i {
  color: #ffc277;
}

.cart-hero-meta {
  margin-top: 10px;
}

.cart-hero-meta span {
  background: rgba(10, 18, 31, 0.4);
  border-color: rgba(166, 193, 231, 0.34);
}

.cart-shipping-notice {
  margin-top: 0;
  background: linear-gradient(155deg, #eef6fb 0%, #e6f1fb 100%);
  border: 1px solid #c4d7e6;
  color: #1d2f45;
}

.cart-shipping-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.cart-shipping-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0f6f4c;
  border: 1px solid rgba(15, 111, 76, 0.34);
  background: rgba(206, 248, 229, 0.62);
}

.cart-shipping-loader,
.cart-shipping-progress {
  margin-top: 10px;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: #d8e6ef;
  position: relative;
}

.cart-shipping-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.03));
}

.cart-shipping-loader span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #10b981 0%, #0f766e 50%, #10b981 100%);
  background-size: 200% 100%;
  box-shadow:
    0 0 8px rgba(16, 185, 129, 0.2),
    0 0 14px rgba(16, 185, 129, 0.1);
  animation: cartFreeShipGlow 4.6s ease-in-out infinite;
}

.cart-shipping-progress-value {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #10b981, #0f766e);
}

.cart-shipping-notice.is-free {
  background: linear-gradient(155deg, #e8fbf3 0%, #dff7ee 100%);
  border-color: #a9dfc9;
}

.cart-savings-notice {
  margin-top: 10px;
  border: 1px solid #b9dfc9;
  background: linear-gradient(155deg, #effcf4 0%, #e8f8ef 100%);
  color: #194931;
}

.cart-savings-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
}

.cart-savings-main i {
  color: #0d8f5a;
}

.cart-savings-note {
  margin-top: 4px;
  font-size: 0.76rem;
  color: #476655;
}

@keyframes cartFreeShipGlow {
  0% {
    background-position: 0% 50%;
    opacity: 0.9;
    filter: brightness(0.98);
  }
  50% {
    background-position: 70% 50%;
    opacity: 0.98;
    filter: brightness(1.02);
  }
  100% {
    background-position: 100% 50%;
    opacity: 0.92;
    filter: brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-shipping-loader span {
    animation: none;
    background-position: 50% 50%;
  }

  .cart-offer-section--after-list.is-animated,
  .cart-offer-section--after-list.is-animated::after,
  .cart-offer-section--after-list.is-animated .cart-offer-card,
  .cart-offer-section--after-list.is-animated .cart-offer-kicker i {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

.cart-offer-section {
  margin: 14px 0 16px;
  padding: 12px;
  border: 1px solid #d9e4f2;
  border-radius: 14px;
  background: linear-gradient(160deg, #f8fbff 0%, #f2f7fd 100%);
}

.cart-offer-wrap-lower {
  margin-top: 18px;
  padding-top: 6px;
}

.cart-offer-wrap-lower .cart-offer-section--after-list {
  margin-top: 0;
}

.cart-offer-section--after-list {
  position: relative;
  margin-top: 16px;
  padding: 14px;
  border-color: #f2cc8f;
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 220, 160, 0.34) 0%, rgba(255, 220, 160, 0) 45%),
    linear-gradient(156deg, #fff8ec 0%, #fffdf8 46%, #f7fbff 100%);
  box-shadow:
    0 16px 30px rgba(22, 31, 46, 0.08),
    inset 0 0 0 1px rgba(255, 232, 194, 0.75);
  overflow: hidden;
}

.cart-offer-section--after-list::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  border: 1px solid rgba(255, 183, 74, 0.34);
  pointer-events: none;
}

.cart-offer-section--after-list.is-animated {
  animation: cartOfferSectionReveal 0.58s cubic-bezier(0.2, 0.9, 0.28, 1) both;
}

.cart-offer-section--after-list.is-animated::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -24%;
  width: 38%;
  height: 180%;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
  transform: translateX(0) rotate(13deg);
  animation: cartOfferShine 3.8s ease-in-out infinite;
}

.cart-offer-head-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cart-offer-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #7e4d05;
  border: 1px solid #f2cb84;
  background: #fff2d8;
}

.cart-offer-section--after-list.is-animated .cart-offer-kicker i {
  animation: cartOfferBolt 1.5s ease-in-out infinite;
}

.cart-offer-head h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
}

.cart-offer-head p {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: #5f6f85;
}

.cart-offer-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cart-offer-card {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 10px;
  border: 1px solid #d8e4f2;
  border-radius: 12px;
  padding: 9px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.cart-offer-section--after-list.is-animated .cart-offer-card {
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  animation: cartOfferCardRise 0.46s cubic-bezier(0.2, 0.9, 0.28, 1) forwards;
}

.cart-offer-section--after-list.is-animated .cart-offer-card:nth-child(1) { animation-delay: 0.08s; }
.cart-offer-section--after-list.is-animated .cart-offer-card:nth-child(2) { animation-delay: 0.16s; }
.cart-offer-section--after-list.is-animated .cart-offer-card:nth-child(3) { animation-delay: 0.24s; }
.cart-offer-section--after-list.is-animated .cart-offer-card:nth-child(4) { animation-delay: 0.32s; }
.cart-offer-section--after-list.is-animated .cart-offer-card:nth-child(5) { animation-delay: 0.4s; }
.cart-offer-section--after-list.is-animated .cart-offer-card:nth-child(6) { animation-delay: 0.48s; }

.cart-offer-card:hover {
  border-color: #b9cee7;
  box-shadow: 0 10px 20px rgba(16, 24, 36, 0.08);
  transform: translateY(-1px);
}

.cart-offer-card.is-in-cart {
  border-color: #a8cfba;
  background: linear-gradient(160deg, #ffffff 0%, #f2faf6 100%);
}

.cart-offer-media {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #dee6f2;
  background: #f5f8fc;
}

.cart-offer-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-offer-info {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.cart-offer-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cart-offer-badge,
.cart-offer-discount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.cart-offer-badge {
  color: #16548d;
  border: 1px solid #b9d4f0;
  background: #edf5ff;
}

.cart-offer-discount {
  color: #0d6a46;
  border: 1px solid #a3d6bf;
  background: #e9f8f0;
}

.cart-offer-title {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1f2d42;
}

.cart-offer-title:hover {
  color: #0b5ca8;
}

.cart-offer-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.cart-offer-price-row del {
  font-size: 0.74rem;
  color: #8b96a7;
}

.cart-offer-price-row strong {
  font-size: 0.94rem;
  color: #0f1e33;
}

.cart-offer-in-cart {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: #0f704b;
  font-weight: 700;
}

.cart-offer-btn {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 0.74rem;
  letter-spacing: 0.01em;
}

@keyframes cartOfferSectionReveal {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cartOfferCardRise {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cartOfferShine {
  0% {
    transform: translateX(0) rotate(13deg);
    opacity: 0;
  }
  22% {
    opacity: 0.9;
  }
  55% {
    opacity: 0;
  }
  100% {
    transform: translateX(360%) rotate(13deg);
    opacity: 0;
  }
}

@keyframes cartOfferBolt {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 0 rgba(255, 167, 38, 0));
  }
  40% {
    transform: translateY(-1px) scale(1.08);
    filter: drop-shadow(0 0 5px rgba(255, 167, 38, 0.45));
  }
}

.cart-list {
  background: linear-gradient(165deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid #dce4ef;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 16px;
}

.cart-row {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 12px;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(155deg, #ffffff 0%, #f4f8fd 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 16px rgba(16, 24, 36, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.cart-row:hover {
  border-color: #c2d3ea;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 20px rgba(16, 24, 36, 0.09);
  transform: translateY(-1px);
}

.cart-row + .cart-row {
  margin-top: 10px;
}

.cart-row img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.cart-row-prices,
.cart-row-total {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

.cart-row-prices del,
.cart-row-total del {
  font-size: 0.75rem;
  color: #8a96a9;
  text-decoration-thickness: 1.5px;
}

.cart-row-prices strong,
.cart-row-total strong {
  font-size: 0.95rem;
  color: #10253c;
}

.cart-row-prices span {
  font-size: 0.72rem;
  color: #6a7688;
}

.cart-row-advantage {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.69rem;
  font-weight: 700;
  color: #0f6d4a;
  border: 1px solid #b5dcca;
  background: #edf9f2;
}

.cart-qty {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.cart-qty a,
.cart-qty span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
}

.cart-qty a {
  background: #edf3fa;
  font-weight: 700;
}

.cart-side {
  background: linear-gradient(170deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #dce4ef;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 16px;
  position: sticky;
  top: 92px;
}

.checkout-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

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

.summary-list {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 10px;
  border: 1px solid #dfe7f2;
  border-radius: 12px;
  background: linear-gradient(160deg, #f8fbff 0%, #f1f6fc 100%);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.94rem;
}

.summary-row.total {
  border-top: 1px solid #d5e0ee;
  padding-top: 10px;
  margin-top: 2px;
  font-size: 1.12rem;
  font-weight: 800;
}

.summary-row.savings span {
  color: #456178;
}

.summary-row.savings strong {
  color: #0f6e4c;
  font-weight: 800;
}

.pay-choices {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.pay-choice {
  border: 1px solid #d8e2ef;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: #f8fbff;
}

.pay-choice.active {
  border-color: #9fbde0;
  background: linear-gradient(150deg, #edf4ff 0%, #e8f2ff 100%);
  box-shadow: 0 8px 16px rgba(64, 104, 156, 0.12);
}

.coupon-row {
  display: flex;
  gap: 8px;
}

.coupon-row .btn {
  padding: 11px 14px;
}

.cart-empty {
  text-align: center;
  color: var(--muted);
  padding: 28px 8px;
}

@media (max-width: 1080px) {
  .products-grid,
  .icon-grid,
  .testimonial-grid,
  .blog-grid,
  .campaign-grid,
  .faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-slide {
    flex-basis: calc((100% - var(--rv-gap)) / 2);
  }

  .showcase-grid,
  .review-overview {
    grid-template-columns: 1fr;
  }

  .review-shell-head {
    grid-template-columns: minmax(0, 1fr) 180px;
  }

  .trust-strip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .detail-layout,
  .cart-layout-new,
  .article-layout,
  .contact-grid-new,
  .auth-layout,
  .cart-page-grid {
    grid-template-columns: 1fr;
  }

  .checkout-box,
  .cart-side {
    position: static;
  }

  .page-hero.page-hero-cart {
    padding: 11px 0 8px;
  }

  .page-hero-card.page-hero-card-cart {
    padding: 13px 14px;
  }

  .page-hero-card.page-hero-card-cart h1 {
    font-size: clamp(1.1rem, 3.8vw, 1.35rem);
  }

  .cart-hero-flags span,
  .cart-hero-meta span {
    min-height: 24px;
    padding: 0 8px;
    font-size: 0.68rem;
  }

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

  .checkout-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-meta-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .nav-links,
  .header-actions .btn,
  .header-trustline {
    display: none;
  }

  .promo-track {
    min-height: 34px;
    gap: 10px;
    animation-duration: 22s;
  }

  .promo-item {
    font-size: 0.75rem;
    padding-right: 10px;
    gap: 6px;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .review-shell-card {
    padding: 16px;
    border-radius: 18px;
  }

  .review-shell-head {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
  }

  .review-shell-media {
    justify-self: start;
    width: 120px;
  }

  .mobile-panel {
    display: none;
    border-top: 1px solid var(--border);
    background: #fdfcf9;
    padding: 12px 20px 16px;
  }

  .mobile-panel.open {
    display: grid;
    gap: 8px;
  }

  .mobile-panel a {
    padding: 10px 12px;
    border-radius: 10px;
    background: #f3ede2;
    font-weight: 600;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    padding: 26px;
  }

  .hero-product {
    justify-self: center;
    max-width: 320px;
  }

  .strip-showcase {
    padding: 10px;
    border-radius: 16px;
  }

  .strip-headline {
    flex-direction: column;
    align-items: flex-start;
    padding: 2px 2px 8px;
  }

  .strip-headline p {
    text-align: left;
    font-size: 0.8rem;
  }

  .strip-headline-action {
    align-self: flex-start;
  }

  .strip-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .blog-grid,
  .campaign-grid,
  .products-grid,
  .icon-grid,
  .testimonial-grid,
  .faq-grid,
  .trust-strip-grid,
  .review-kpi-grid,
  .showcase-grid {
    grid-template-columns: 1fr;
  }

  .review-carousel {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .review-slide {
    flex-basis: 100%;
  }

  .review-carousel-nav {
    display: none;
  }

  .showcase-card {
    grid-template-columns: 1fr;
  }

  .showcase-media img {
    margin: 0 auto;
  }

  .container {
    width: calc(100% - 26px);
  }
}

@media (max-width: 640px) {
  .page-hero-card.page-hero-card-product {
    padding: 11px 12px;
    border-radius: 12px 12px 0 0;
  }

  .page-hero.page-hero-product + .detail-main-section {
    padding-top: 0;
  }

  .page-hero.page-hero-product + .detail-main-section > .container {
    border-radius: 0 0 12px 12px;
    padding: 10px 10px 14px;
  }

  .page-hero-card.page-hero-card-product h1 {
    font-size: 1rem;
  }

  .page-hero-card.page-hero-card-product p {
    font-size: 0.8rem;
  }
}

/* === Theme Refresh V3: Ivory + Noir + Copper === */
:root {
  --bg: #f7f4ef;
  --surface: #ffffff;
  --surface-2: #f4efe7;
  --text: #22222a;
  --muted: #6f707a;
  --primary: #101116;
  --primary-2: #282935;
  --accent: #c88252;
  --danger: #d25555;
  --border: #e4ddd1;
  --shadow-sm: 0 12px 26px rgba(28, 23, 17, 0.08);
  --shadow-lg: 0 30px 72px rgba(28, 23, 17, 0.15);
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(200, 130, 82, 0.14), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(16, 17, 22, 0.08), transparent 28%),
    linear-gradient(180deg, #fcfbf8 0%, #f7f4ef 100%);
  color: var(--text);
}

.btn {
  border-radius: 14px;
}

.btn-primary {
  background: linear-gradient(135deg, #101116, #282935);
  border: 1px solid #333542;
  box-shadow: 0 14px 28px rgba(16, 17, 22, 0.24);
}

.btn-dark {
  background: linear-gradient(135deg, #c88252, #da976a);
  border-color: #bc7750;
  color: #fff;
}

.btn-ghost {
  background: #fff;
  border: 1px solid var(--border);
  color: #2f2f39;
}

.site-header {
  background: rgba(10, 10, 13, 0.94);
  border-bottom: 1px solid #2e303a;
}

.topline {
  background: linear-gradient(90deg, #050507, #16171d);
  color: #bcc0cc;
}

.brand {
  color: #f7f8fb;
  text-shadow: 0 0 12px rgba(200, 130, 82, 0.2);
}

.nav-links > a,
.nav-item > a {
  color: #d6d8e1;
  border-radius: 999px;
  padding: 9px 13px;
}

.nav-links > a:hover,
.nav-links > a.active,
.nav-item > a:hover,
.nav-item > a.active {
  background: #1f212a;
  color: #fff;
}

.nav-mega,
.nav-dropdown {
  border: 1px solid #dcd4c8;
  border-radius: 16px;
  box-shadow: 0 22px 46px rgba(25, 20, 14, 0.15);
}

.nav-mega a:hover,
.nav-dropdown a:hover {
  background: #f5eee4;
}

.icon-btn {
  background: #171820;
  color: #f2f3f7;
  border-color: #353845;
}

.site-header .btn-ghost {
  background: #1a1b23;
  border-color: #363846;
  color: #f0f1f6;
}

.header-trustline {
  border-top: 1px solid #2d2f39;
  background: #111218;
}

.header-trustline .container {
  color: #b4b8c4;
}

.header-trustline i {
  color: #d2966e;
}

.hero-card {
  background: linear-gradient(130deg, #111218, #232632);
  border: 1px solid #353948;
}

.hero-overlay {
  background:
    radial-gradient(circle at 85% 18%, rgba(200, 130, 82, 0.28), transparent 30%),
    linear-gradient(100deg, rgba(8, 8, 10, 0.72) 0%, rgba(18, 20, 27, 0.44) 58%, rgba(18, 20, 27, 0.2) 100%);
}

.hero-kicker {
  color: #ffe5d2;
  border-color: rgba(255, 229, 210, 0.6);
}

.hero-subtitle {
  color: #d8dbe4;
}

.hero-dot {
  background: rgba(255, 255, 255, 0.36);
}

.hero-dot.active {
  background: #fff;
}

.section-kicker {
  color: #ad6940;
}

.showcase-card {
  background: linear-gradient(135deg, #ffffff, #f7f2ea);
  border: 1px solid #e2dbcf;
}

.showcase-tag {
  background: #14151b;
}

.showcase-media img {
  filter: drop-shadow(0 16px 24px rgba(17, 18, 24, 0.2));
}

.showcase-discount {
  background: #c88252;
}

.products-grid {
  gap: 20px;
}

.product-card {
  border-radius: 20px;
  border: 1px solid #e3dccf;
  box-shadow: 0 12px 24px rgba(25, 20, 14, 0.08);
}

.product-card:hover {
  border-color: #c9b091;
  transform: translateY(-3px);
}

.product-media {
  background: linear-gradient(135deg, #fdfaf5, #f5eee2);
}

.product-badge {
  background: linear-gradient(135deg, #c88252, #dc9b71);
}

.product-benefits i {
  color: #be7a4f;
}

.trust-strip-item {
  border-color: #e2dbcf;
  background: #fff;
}

.trust-strip-item i {
  background: #f5e8dc;
  color: #8c5a36;
}

.strip-layer {
  background: linear-gradient(180deg, rgba(24, 24, 30, 0.08), rgba(24, 24, 30, 0.72));
}

.highlight-panel {
  background: linear-gradient(130deg, #121318, #242733);
  border-color: #393d4b;
}

.review-score-card,
.review-kpi-card,
.review-card-rich {
  border: 1px solid #e2dbcf;
  background: #fff;
}

.review-kpi-card {
  background: linear-gradient(135deg, #ffffff, #f8f2e8);
}

.review-card-featured {
  background: linear-gradient(135deg, #fff9f3, #f8efe4);
}

.review-badge {
  background: #f7e6d9;
  color: #93572f;
}

.review-linked-product img {
  background: #f8f1e7;
}

.stars {
  color: #d18a59;
}

.page-hero-card {
  background: linear-gradient(120deg, #14151b, #292c37);
  border-color: #3b3f4e;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #bf7a4f;
  box-shadow: 0 0 0 3px rgba(200, 130, 82, 0.2);
}

.pagination .active,
.tab-head button.active,
.auth-tabs button.active,
.profile-tabs button.active {
  background: #101116;
  border-color: #101116;
  color: #fff;
}

.faq-item-new,
.card,
.blog-card,
.campaign-card,
.gallery-main,
.auth-box,
.order-card,
.cart-list,
.cart-side,
.article-main,
.contact-meta-item {
  border-color: #e3dccf;
}

.site-footer {
  background: linear-gradient(135deg, #09090c, #171921);
  color: #d0d3de;
}

.footer-col p,
.footer-col li,
.footer-col a {
  color: #babfcd;
}

.footer-bottom {
  color: #9ea4b5;
  border-top-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 860px) {
  .mobile-panel {
    background: #12131a;
    border-top-color: #2f323d;
  }

  .mobile-panel a {
    background: #1d1f28;
    color: #e7e9f1;
  }
}

/* === Theme Refresh V4: Pearl + Noir + Sapphire === */
:root {
  --bg: #eef3f9;
  --surface: #ffffff;
  --surface-2: #f2f6fc;
  --text: #1b2430;
  --muted: #637085;
  --primary: #0f1520;
  --primary-2: #283447;
  --accent: #2f6dbe;
  --danger: #d14e5b;
  --border: #d8e1ef;
  --shadow-sm: 0 12px 26px rgba(20, 30, 48, 0.09);
  --shadow-lg: 0 30px 72px rgba(20, 30, 48, 0.15);
}

body {
  background:
    radial-gradient(circle at 8% 0%, rgba(47, 109, 190, 0.14), transparent 34%),
    radial-gradient(circle at 92% 4%, rgba(15, 21, 32, 0.08), transparent 28%),
    linear-gradient(180deg, #f9fbff 0%, #eef3f9 100%);
  color: var(--text);
}

.btn {
  border-radius: 14px;
}

.btn-primary {
  background: linear-gradient(135deg, #0f1520, #283447);
  border: 1px solid #34465f;
  color: #fff;
  box-shadow: 0 14px 28px rgba(15, 21, 32, 0.24);
}

.btn-dark {
  background: linear-gradient(135deg, #2f6dbe, #4e8cd9);
  border-color: #376fb3;
  color: #fff;
  box-shadow: 0 12px 24px rgba(47, 109, 190, 0.24);
}

.btn-ghost {
  background: #fff;
  border: 1px solid var(--border);
  color: #2b3648;
}

.promo-item i {
  color: #8cb8ff;
}

.section-kicker {
  color: #3f6498;
}

.nav-mega a:hover,
.nav-dropdown a:hover {
  background: #eef3fb;
}

.showcase-card {
  background: linear-gradient(135deg, #ffffff, #f3f7fe);
  border: 1px solid #d9e2f0;
}

.showcase-discount {
  background: #3b6ead;
}

.product-card {
  border-color: #d9e2f0;
}

.product-card:hover {
  border-color: #9fb5d7;
}

.product-media {
  background: linear-gradient(135deg, #f9fbff, #edf3fd);
}

.product-badge {
  background: linear-gradient(135deg, #2f6dbe, #4d87d2);
}

.product-benefits i {
  color: #3f6ea8;
}

.trust-strip-item {
  border-color: #d9e2f0;
}

.trust-strip-item i {
  background: #eaf1fd;
  color: #3a6298;
}

.review-kpi-card {
  background: linear-gradient(135deg, #ffffff, #f3f7fe);
}

.review-card-featured {
  background: linear-gradient(135deg, #fbfdff, #eef3fb);
}

.review-badge {
  background: #e7effc;
  color: #3d5f8f;
}

.review-linked-product img {
  background: #edf3fd;
}

.review-shell-card {
  border-color: #d9e2f0;
  background: linear-gradient(150deg, #ffffff, #f2f7ff);
  box-shadow: 0 18px 34px rgba(30, 51, 79, 0.08);
}

.review-shell-head {
  border-bottom-color: #d5dfef;
}

.review-shell-kicker {
  background: #eaf1fd;
  color: #355f96;
}

.review-shell-copy p {
  color: #5f7087;
}

.review-shell-media {
  border-color: #c8d7ec;
  box-shadow: 0 12px 24px rgba(23, 45, 76, 0.16);
}

.hero-dot.active {
  background: #bfd7ff;
}

.add-to-cart-btn {
  font-weight: 700;
  border-radius: 12px;
  letter-spacing: 0.01em;
}

.add-to-cart-btn.btn-primary {
  background: linear-gradient(135deg, #0f1520, #304664);
  border-color: #3a5272;
}

.add-to-cart-btn.btn-dark,
button.add-to-cart-btn:not(.btn),
.rec-card .add-to-cart-btn {
  background: linear-gradient(135deg, #2f6dbe, #4e8cd9);
  border: 1px solid #376fb3;
  color: #fff;
  box-shadow: 0 10px 22px rgba(47, 109, 190, 0.25);
}

.add-to-cart-btn:hover {
  transform: translateY(-2px);
}

.welcome-modal {
  border-color: #d8e1ef;
  background: linear-gradient(145deg, #ffffff, #f2f6fd);
}

.welcome-form input {
  border-color: #c8d5e8;
}

.welcome-code-box {
  border-color: #91b3de;
  background: #f3f7ff;
}

.welcome-code-box small {
  color: #4a6b95;
}

/* Footer Pattern + Welcome Popup */
.site-footer {
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 100%),
    radial-gradient(circle at 78% 66%, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 100%),
    linear-gradient(125deg, rgba(200, 130, 82, 0.1), transparent 34%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 14px);
  background-size: 130px 130px, 170px 170px, 100% 100%, 24px 24px;
  opacity: 0.9;
  pointer-events: none;
}

.site-footer::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(200, 130, 82, 0.18), transparent 70%);
  pointer-events: none;
}

.footer-top,
.footer-bottom {
  position: relative;
  z-index: 1;
}

.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 280;
  background: rgba(8, 8, 10, 0.5);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: 14px;
}

.welcome-overlay[hidden] {
  display: none !important;
}

.welcome-modal {
  width: min(520px, 100%);
  border-radius: 20px;
  border: 1px solid #ded6c8;
  background: linear-gradient(145deg, #fffdfa, #f7f0e5);
  box-shadow: 0 24px 72px rgba(20, 16, 12, 0.28);
  padding: 22px;
  position: relative;
}

.welcome-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #d9cfbf;
  background: #fff;
  color: #2d2d36;
  cursor: pointer;
}

.welcome-kicker {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #121319;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  margin-bottom: 8px;
}

.welcome-modal h3 {
  margin: 0;
  font-size: clamp(1.45rem, 2.2vw, 1.8rem);
  line-height: 1.2;
  color: #1f2129;
}

.welcome-modal p {
  margin: 8px 0 14px;
  color: #666a77;
}

.welcome-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.welcome-form input {
  border-radius: 12px;
  border: 1px solid #d7cbb6;
  background: #fff;
  color: #23242d;
  padding: 12px 14px;
}

.welcome-msg {
  margin-top: 10px;
  min-height: 20px;
  font-size: 0.88rem;
  color: #535665;
}

.welcome-msg.success {
  color: #226043;
}

.welcome-msg.error {
  color: #9d3040;
}

.welcome-code-box {
  margin-top: 12px;
  border: 1px dashed #c89b74;
  border-radius: 12px;
  background: #fff8ef;
  padding: 12px;
}

.welcome-code-box small {
  display: block;
  color: #8b6644;
  margin-bottom: 6px;
}

.welcome-code-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.welcome-code-row strong {
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: #1b1c24;
}

.welcome-code-row .btn {
  padding: 8px 12px;
}

@media (max-width: 860px) {
  .welcome-form {
    grid-template-columns: 1fr;
  }

  .welcome-code-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* === Theme Refresh V5: Noir + Ember Glow === */
:root {
  --bg: #f6f2eb;
  --surface: #ffffff;
  --surface-2: #f8f3ea;
  --text: #1a1d25;
  --muted: #646977;
  --primary: #0d1016;
  --primary-2: #232734;
  --accent: #ff8c24;
  --danger: #d14e5b;
  --border: #e5dccf;
  --shadow-sm: 0 14px 28px rgba(22, 17, 12, 0.08);
  --shadow-lg: 0 34px 80px rgba(22, 17, 12, 0.16);
}

body {
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 140, 36, 0.16), transparent 34%),
    radial-gradient(circle at 92% 5%, rgba(13, 16, 22, 0.08), transparent 30%),
    linear-gradient(180deg, #fbf8f3 0%, #f6f2eb 100%);
  color: var(--text);
}

.hero-overlay {
  background: transparent !important;
}

.hero-inner > div {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 14px 30px rgba(18, 13, 9, 0.16);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hero-kicker {
  color: #8f531a;
  border-color: rgba(255, 166, 78, 0.6);
  background: rgba(255, 255, 255, 0.82);
}

.hero-title {
  color: #171b23;
  text-shadow: none;
}

.hero-subtitle {
  color: #3d4555;
}

.btn-primary {
  background: linear-gradient(135deg, #0d1016, #242a37);
  border-color: #303746;
  box-shadow:
    0 14px 30px rgba(13, 16, 22, 0.28),
    0 0 0 1px rgba(255, 158, 64, 0.18);
}

.btn-dark {
  background: linear-gradient(135deg, #ff8c24, #ffb347);
  border-color: #e98724;
  color: #181b22;
  box-shadow:
    0 14px 30px rgba(255, 140, 36, 0.38),
    0 0 20px rgba(255, 158, 64, 0.35);
}

.btn-dark:hover {
  box-shadow:
    0 16px 34px rgba(255, 140, 36, 0.42),
    0 0 26px rgba(255, 158, 64, 0.45);
}

.promo-item i,
.product-benefits i,
.review-mini-icon {
  color: #ff972f;
}

.section-kicker {
  color: #b56719;
}

.nav-mega a:hover,
.nav-dropdown a:hover {
  background: #f9efe0;
}

.showcase-card {
  background: linear-gradient(135deg, #ffffff, #fbf3e7);
  border-color: #e6dccf;
}

.showcase-discount {
  background: linear-gradient(135deg, #ff8d24, #ffb54a);
  box-shadow: 0 10px 24px rgba(255, 140, 36, 0.35);
}

.product-card {
  border-color: #e6dccf;
}

.product-card:hover {
  border-color: #d9b181;
  box-shadow: 0 18px 34px rgba(31, 24, 16, 0.13);
}

.product-media {
  background: linear-gradient(135deg, #fffdf9, #f8efe2);
}

.product-badge {
  background: linear-gradient(135deg, #ff8c24, #ffb54a);
  box-shadow: 0 10px 24px rgba(255, 140, 36, 0.35);
}

.trust-strip-item,
.review-shell-card {
  border-color: #e6dccf;
}

.trust-strip-item i {
  background: #fff2df;
  color: #b96b1f;
}

.review-kpi-card {
  background: linear-gradient(135deg, #ffffff, #f9f2e7);
}

.review-card-featured {
  background: linear-gradient(135deg, #fffdf9, #f9f0e3);
}

.review-badge {
  background: #fff0de;
  color: #9d5d1d;
}

.review-linked-product img {
  background: #f8efe1;
}

.review-shell-card {
  background: linear-gradient(150deg, #ffffff, #fbf3e7);
  box-shadow: 0 18px 36px rgba(27, 20, 13, 0.12);
}

.review-shell-head {
  border-bottom-color: #e2d7c8;
}

.review-shell-kicker {
  background: #fff0de;
  color: #a15f1f;
}

.review-shell-copy p {
  color: #676d7b;
}

.review-shell-media {
  border-color: #e0d2bf;
  box-shadow:
    0 14px 28px rgba(30, 22, 13, 0.18),
    0 0 20px rgba(255, 147, 44, 0.2);
}

.hero-dot.active {
  background: #ffbe67;
  box-shadow: 0 0 14px rgba(255, 170, 73, 0.7);
}

.add-to-cart-btn.btn-primary {
  background: linear-gradient(135deg, #0d1016, #2a313f);
  border-color: #384252;
  box-shadow:
    0 14px 28px rgba(13, 16, 22, 0.28),
    0 0 0 1px rgba(255, 158, 64, 0.18);
}

.add-to-cart-btn.btn-dark,
button.add-to-cart-btn:not(.btn),
.rec-card .add-to-cart-btn {
  background: linear-gradient(135deg, #ff8c24, #ffb347);
  border-color: #e98724;
  color: #181b22;
  box-shadow:
    0 14px 28px rgba(255, 140, 36, 0.4),
    0 0 22px rgba(255, 158, 64, 0.42);
}

input:focus,
textarea:focus,
select:focus {
  border-color: #f39a3d;
  box-shadow: 0 0 0 3px rgba(255, 158, 64, 0.24);
}

.welcome-modal {
  border-color: #e2d7c8;
  background: linear-gradient(145deg, #ffffff, #faf1e5);
}

.welcome-form input {
  border-color: #ddccb6;
}

.welcome-code-box {
  border-color: #e29a4a;
  background: #fff3e4;
  box-shadow: 0 10px 20px rgba(255, 143, 37, 0.15);
}

.welcome-code-box small {
  color: #8e5726;
}

@media (max-width: 860px) {
  .hero-inner > div {
    padding: 16px 16px;
    border-radius: 14px;
  }
}

/* === Theme Refresh V6: Bahs-Inspired Contrast === */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7ecdd;
  --text: #141820;
  --muted: #5f6674;
  --primary: #0b0f16;
  --primary-2: #252c3b;
  --accent: #ff6d00;
  --danger: #d94a3a;
  --border: #dfceb9;
  --shadow-sm: 0 14px 30px rgba(23, 17, 11, 0.1);
  --shadow-lg: 0 36px 84px rgba(23, 17, 11, 0.18);
}

body {
  background:
    radial-gradient(circle at 12% -8%, rgba(28, 36, 52, 0.05), transparent 36%),
    radial-gradient(circle at 88% -10%, rgba(28, 36, 52, 0.035), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8fafd 100%);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 220;
  background: linear-gradient(180deg, #ffffff 0%, #f3f6fa 58%, #e9eef4 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid #d3dbe6;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -1px 0 rgba(190, 202, 218, 0.5),
    0 10px 22px rgba(16, 24, 36, 0.13),
    0 20px 24px -22px rgba(0, 0, 0, 0.46);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0.3) 18%, rgba(255, 255, 255, 0.04) 42%, transparent 72%);
  pointer-events: none;
}

.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(208, 218, 231, 0.2), rgba(255, 255, 255, 0) 28%, rgba(208, 218, 231, 0.12) 58%, rgba(255, 255, 255, 0) 100%);
  opacity: 0.55;
  pointer-events: none;
}

.promo-topbar {
  position: relative;
  background: linear-gradient(180deg, #111318 0%, #090b0f 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid #212630;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 6px 12px rgba(8, 12, 18, 0.28),
    0 10px 12px -12px rgba(0, 0, 0, 0.64);
}

.promo-topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 24%, transparent 60%);
  pointer-events: none;
}

.promo-topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 2px, rgba(0, 0, 0, 0.02) 2px 4px);
  opacity: 0.16;
  pointer-events: none;
}

.promo-item {
  color: #e9edf6;
  border-right-color: rgba(212, 220, 233, 0.24);
}

.mainnav {
  min-height: 92px;
}

.mainnav .container {
  min-height: 92px;
  gap: 20px;
}

.brand {
  font-family: "Outfit", "Plus Jakarta Sans", "Sora", "Segoe UI", sans-serif;
  font-size: clamp(2rem, 2.9vw, 2.45rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  color: #1e2836;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.nav-links {
  gap: 18px;
  margin-left: 0;
  margin-right: 0;
  flex: 1 1 auto;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.nav-links > a,
.nav-item > a {
  font-family: "Outfit", "Plus Jakarta Sans", "Sora", "Segoe UI", sans-serif;
  color: #2c3442;
  padding: 8px 2px;
  border-radius: 0;
  border: 0;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.015em;
  text-shadow: none;
  box-shadow: none;
  position: relative;
  background: transparent;
}

.nav-links > a:hover,
.nav-links > a.active,
.nav-item > a:hover,
.nav-item > a.active {
  background: transparent;
  border-color: transparent;
  color: #121b28;
}

.nav-links > a::after,
.nav-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #8d98aa, #4f5b6f);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}

.nav-links > a:hover::after,
.nav-links > a.active::after,
.nav-item > a:hover::after,
.nav-item > a.active::after {
  transform: scaleX(1);
}

.live-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1.05;
}

.nav-item.has-live > a.live-stack {
  padding-top: 4px;
  padding-bottom: 4px;
}

.nav-item.has-live > a.live-stack > span:last-child {
  white-space: nowrap;
}

.nav-live-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  background: linear-gradient(135deg, #ff3f2f, #ff7a2f);
  box-shadow:
    0 6px 12px rgba(255, 92, 44, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.46);
  line-height: 1;
  animation: live-badge-blink 1.15s ease-in-out infinite;
}

.nav-item.has-live > a:hover .nav-live-badge,
.nav-item.has-live > a.active .nav-live-badge {
  animation-duration: 0.9s;
  box-shadow:
    0 8px 14px rgba(255, 92, 44, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.58);
}

@keyframes live-badge-blink {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.97);
    box-shadow:
      0 4px 10px rgba(255, 92, 44, 0.24),
      0 0 0 1px rgba(255, 255, 255, 0.36);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
    box-shadow:
      0 10px 20px rgba(255, 92, 44, 0.5),
      0 0 16px rgba(255, 116, 48, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.62);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-live-badge {
    animation: none;
  }
}

.nav-mega,
.nav-dropdown {
  top: calc(100% + 10px);
  border: 1px solid #d7e0ec;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 16px 30px rgba(16, 24, 36, 0.14);
  padding: 10px;
}

.nav-mega a,
.nav-dropdown a {
  font-family: "Outfit", "Plus Jakarta Sans", "Sora", "Segoe UI", sans-serif;
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 10px 12px;
  color: #2a3444;
}

.nav-mega a span {
  color: #687587;
}

.nav-mega a:hover,
.nav-dropdown a:hover {
  background: #f3f7fc;
  border-color: transparent;
}

.header-actions {
  gap: 10px;
}

.icon-btn {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #edf2f9);
  color: #253040;
  border-color: #c9d5e6;
  box-shadow:
    0 8px 16px rgba(16, 24, 36, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.support-btn {
  width: auto;
  min-width: 182px;
  padding: 0 14px;
  justify-content: flex-start;
  gap: 8px;
  font-family: "Outfit", "Plus Jakarta Sans", "Sora", "Segoe UI", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-color: #24b75a;
  background: linear-gradient(180deg, #ffffff, #eafaf1);
  box-shadow:
    0 10px 18px rgba(16, 24, 36, 0.15),
    0 0 0 1px rgba(36, 183, 90, 0.44),
    0 0 18px rgba(36, 183, 90, 0.28);
  animation: support-btn-pulse 1.9s ease-in-out infinite;
}

.support-btn i {
  font-size: 0.9rem;
  color: #168344;
}

.support-btn span {
  white-space: nowrap;
  color: #212a38;
}

.support-btn::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 16px;
  border: 1px solid rgba(36, 183, 90, 0.56);
  pointer-events: none;
  opacity: 0.48;
  animation: support-btn-ring 1.9s ease-in-out infinite;
}

.support-btn:hover,
.support-btn.active {
  border-color: #1ca24e;
  background: linear-gradient(180deg, #ffffff, #ddf5e8);
  box-shadow:
    0 14px 24px rgba(16, 24, 36, 0.2),
    0 0 0 1px rgba(36, 183, 90, 0.62),
    0 0 24px rgba(36, 183, 90, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

@keyframes support-btn-pulse {
  0%,
  100% {
    border-color: rgba(36, 183, 90, 0.8);
    box-shadow:
      0 9px 16px rgba(16, 24, 36, 0.13),
      0 0 0 1px rgba(36, 183, 90, 0.36),
      0 0 14px rgba(36, 183, 90, 0.22);
  }

  50% {
    border-color: rgba(29, 166, 79, 0.98);
    box-shadow:
      0 12px 22px rgba(16, 24, 36, 0.19),
      0 0 0 1px rgba(36, 183, 90, 0.58),
      0 0 26px rgba(36, 183, 90, 0.36);
  }
}

@keyframes support-btn-ring {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.985);
  }

  50% {
    opacity: 0.75;
    transform: scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-btn,
  .support-btn::after {
    animation: none;
  }
}

.mobile-panel .nav-live-badge {
  margin-left: 0;
  height: 18px;
  padding: 0 7px;
}

.mobile-panel a.live-stack {
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.hero-actions .btn-ghost.live-stack {
  gap: 5px;
}

.hero-actions .btn-ghost.live-stack .nav-live-badge {
  height: 18px;
  padding: 0 7px;
  font-size: 0.58rem;
}

@media (max-width: 860px) {
  .header-actions .support-btn {
    display: none;
  }
}

.hero-overlay {
  background: transparent !important;
}

.hero-inner > div {
  background: rgba(11, 15, 23, 0.52);
  border: 1px solid rgba(255, 155, 72, 0.42);
  width: min(560px, 100%);
  justify-self: start;
  box-shadow:
    0 16px 34px rgba(6, 8, 12, 0.35),
    0 0 24px rgba(255, 126, 34, 0.2);
}

.hero-kicker {
  color: #ffd39d;
  border-color: rgba(255, 165, 82, 0.58);
  background: rgba(255, 117, 21, 0.16);
}

.hero-title {
  color: #ffffff;
}

.hero-subtitle {
  color: #dbe3ef;
}

.btn-primary {
  background: linear-gradient(135deg, #0b0f16, #272f40);
  border-color: #374155;
  box-shadow:
    0 14px 30px rgba(11, 15, 23, 0.3),
    0 0 0 1px rgba(255, 142, 52, 0.2);
}

.btn-dark {
  background: linear-gradient(135deg, #ff6d00, #ff3f1f);
  border-color: #ec5b18;
  color: #fff7ee;
  box-shadow:
    0 14px 30px rgba(255, 96, 18, 0.42),
    0 0 24px rgba(255, 110, 32, 0.36);
}

.btn-dark:hover {
  box-shadow:
    0 18px 36px rgba(255, 98, 18, 0.48),
    0 0 30px rgba(255, 116, 36, 0.46);
}

.promo-item i,
.product-benefits i,
.review-mini-icon {
  color: #ff7d12;
}

.section-kicker {
  color: #b55318;
}

.showcase-card {
  background: linear-gradient(135deg, #ffffff, #f8ecdc);
  border-color: #e1d1bd;
}

.showcase-discount,
.product-badge {
  background: linear-gradient(135deg, #ff6d00, #ff411e);
  box-shadow: 0 10px 24px rgba(255, 94, 16, 0.4);
}

.product-card {
  background: #ffffff;
  border-color: #d6dde7;
  box-shadow:
    0 14px 30px rgba(16, 20, 28, 0.11),
    0 0 0 1px rgba(214, 221, 231, 0.95),
    0 1px 0 rgba(255, 255, 255, 0.92) inset;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.product-card:hover {
  border-color: #b8c5d7;
  transform: translateY(-3px);
  box-shadow:
    0 20px 40px rgba(16, 20, 28, 0.17),
    0 0 0 1px rgba(184, 197, 215, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.95) inset;
}

.product-media {
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}

.trust-strip-item,
.review-shell-card {
  border-color: #e1d1bd;
}

.trust-strip-item i {
  background: #fff1de;
  color: #b95f1f;
}

.review-kpi-card {
  background: linear-gradient(135deg, #ffffff, #f3f5f8);
}

.review-card-rich {
  background: #ffffff;
}

.review-card-featured {
  background: #ffffff;
}

.review-badge {
  background: #edf1f5;
  color: #566173;
}

.review-linked-product img {
  background: #f1f4f7;
}

.review-shell-card {
  background: linear-gradient(150deg, #ffffff, #f3f5f8);
  box-shadow: 0 20px 38px rgba(20, 24, 32, 0.12);
}

.review-shell-kicker {
  background: #edf1f5;
  color: #515d6e;
}

.review-shell-media {
  border-color: #d7dde6;
  box-shadow: 0 14px 28px rgba(20, 24, 32, 0.18);
}

.stars,
.review-stars-large {
  color: #c9963f;
  background: linear-gradient(135deg, #a97526 0%, #d6a64c 34%, #f3dd9f 58%, #c89038 80%, #8d641f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rating-band-track {
  background: linear-gradient(180deg, #eceff3 0%, #e1e6ed 100%);
}

.rating-band-track i {
  background: linear-gradient(90deg, #96681f 0%, #c9923b 26%, #e1b45d 45%, #f6df9f 62%, #c68f37 84%, #7c5418 100%);
  box-shadow: 0 0 8px rgba(198, 146, 52, 0.35);
}

.hero-dot.active {
  background: #ff9c40;
  box-shadow: 0 0 14px rgba(255, 136, 30, 0.68);
}

.add-to-cart-btn.btn-primary {
  background: linear-gradient(135deg, #0a0e15, #202836);
  border-color: #313b4b;
  color: #f4f7fb;
  box-shadow: 0 10px 22px rgba(14, 18, 26, 0.24);
}

.add-to-cart-btn.btn-dark,
button.add-to-cart-btn:not(.btn),
.rec-card .add-to-cart-btn {
  background: linear-gradient(135deg, #0a0e15, #202836);
  border-color: #313b4b;
  color: #f4f7fb;
  box-shadow: 0 10px 22px rgba(14, 18, 26, 0.24);
}

.add-to-cart-btn.btn-primary:hover,
.add-to-cart-btn.btn-dark:hover,
button.add-to-cart-btn:not(.btn):hover,
.rec-card .add-to-cart-btn:hover,
.add-to-cart-btn.btn-primary:focus-visible,
.add-to-cart-btn.btn-dark:focus-visible,
button.add-to-cart-btn:not(.btn):focus-visible,
.rec-card .add-to-cart-btn:focus-visible {
  border-color: #ff8a2a;
  box-shadow:
    0 14px 28px rgba(14, 18, 26, 0.34),
    0 0 0 1px rgba(255, 138, 42, 0.45),
    0 0 16px rgba(255, 138, 42, 0.28);
}

input:focus,
textarea:focus,
select:focus {
  border-color: #f08c35;
  box-shadow: 0 0 0 3px rgba(255, 138, 41, 0.24);
}

.welcome-modal {
  border-color: #dfceb9;
  background: linear-gradient(145deg, #ffffff, #faecdc);
}

.welcome-form input {
  border-color: #dcc7af;
}

.welcome-code-box {
  border-color: #e2903e;
  background: #fff1de;
  box-shadow: 0 10px 20px rgba(255, 119, 20, 0.17);
}

.welcome-code-box small {
  color: #8d5220;
}

/* Subtle depth and floating feel for cards */
.strip-card,
.showcase-card,
.trust-strip-item,
.review-shell-card,
.review-score-card,
.review-kpi-card,
.review-card-rich {
  border-color: #d6dde7;
  box-shadow:
    0 10px 24px rgba(17, 23, 34, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.strip-card:hover,
.showcase-card:hover,
.trust-strip-item:hover,
.review-shell-card:hover,
.review-score-card:hover,
.review-kpi-card:hover,
.review-card-rich:hover {
  border-color: #ff8a2a;
  transform: translateY(-2px);
  box-shadow:
    0 16px 34px rgba(17, 23, 34, 0.15),
    0 0 0 1px rgba(255, 138, 42, 0.55),
    0 0 18px rgba(255, 138, 42, 0.2),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

/* Keep the main customer satisfaction shell static on hover */
.review-shell-card:hover {
  border-color: #d6dde7;
  transform: none;
  box-shadow:
    0 10px 24px rgba(17, 23, 34, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

/* Add top breathing room so review cards are not clipped on hover lift */
.review-carousel-viewport {
  padding-top: 8px;
}

/* Hero altindaki 3 kampanya kartini daha "floating" goster */
.strip-card {
  border: 1px solid #ff8a2a;
  box-shadow:
    0 14px 30px rgba(15, 21, 32, 0.14),
    0 28px 32px -26px rgba(0, 0, 0, 0.75),
    0 1px 0 rgba(255, 255, 255, 0.92) inset;
}

.strip-card:hover {
  border-color: #ff8a2a;
  transform: translateY(-4px);
  box-shadow:
    0 20px 40px rgba(15, 21, 32, 0.2),
    0 32px 36px -26px rgba(0, 0, 0, 0.82),
    0 0 0 1px rgba(255, 138, 42, 0.5),
    0 0 18px rgba(255, 138, 42, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.94) inset;
}

/* Fullscreen slider */
.hero.section {
  margin-top: 0;
  padding: 0;
}

.hero.section > .container {
  width: 100%;
  max-width: none;
  margin: 0;
}

.hero-card {
  min-height: 60vh;
  min-height: 60svh;
  border-radius: 0;
}

/* Boy-Yas-Kilo hesaplama araci */
.goal-tool-section {
  padding-top: 18px;
}

.goal-tool-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 28px;
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 140, 36, 0.14), transparent 42%),
    linear-gradient(140deg, #0f131b 0%, #1d2532 100%);
  border: 1px solid #384257;
  box-shadow:
    0 24px 48px rgba(9, 14, 23, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.goal-tool-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.12) 1px, transparent 1.3px),
    linear-gradient(120deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 42%);
  background-size: 22px 22px, 100% 100%;
  opacity: 0.34;
  pointer-events: none;
  z-index: 0;
}

.goal-tool-panel > * {
  position: relative;
  z-index: 1;
}

.goal-tool-head .section-title {
  color: #f3f7ff;
}

.goal-tool-head .section-subtitle {
  color: #ced7e7;
}

.goal-tool-layout {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.goal-input-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.goal-tool-form {
  border: 1px solid #3a455b;
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(20, 27, 39, 0.95), rgba(15, 21, 31, 0.92));
  box-shadow:
    0 14px 24px rgba(7, 10, 16, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.goal-input-row {
  display: grid;
  gap: 7px;
  margin-bottom: 0;
}

.goal-input-row span {
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #dde4f2;
}

.goal-input-row input,
.goal-input-row select {
  width: 100%;
  height: 44px;
  border: 1px solid #47546c;
  border-radius: 12px;
  padding: 0 12px;
  background: linear-gradient(180deg, #fdfefe, #e8edf5);
  color: #1f2a39;
  font-size: 0.92rem;
  font-weight: 600;
}

.goal-input-row input:focus,
.goal-input-row select:focus {
  border-color: #ff9a4a;
  box-shadow:
    0 0 0 3px rgba(255, 152, 70, 0.24),
    0 6px 16px rgba(8, 12, 20, 0.18);
  outline: none;
}

.goal-tool-form .btn {
  width: 100%;
  margin-top: 4px;
}

.goal-disclaimer {
  margin: 10px 2px 0;
  color: #aeb8cc;
  font-size: 0.72rem;
}

.goal-form-msg {
  margin: 10px 2px 0;
  min-height: 18px;
  font-size: 0.78rem;
  color: #b7c1d5;
}

.goal-form-msg.error {
  color: #ff9e9e;
}

.goal-form-msg.success {
  color: #a7f0bb;
}

.goal-result-card {
  border: 1px solid #d4dce8;
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%);
  box-shadow:
    0 14px 28px rgba(16, 22, 34, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.goal-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.goal-res-box {
  border: 1px solid #d7dfeb;
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5fb 100%);
}

.goal-res-box-ideal {
  border-color: #bfe6cb;
  background: linear-gradient(180deg, #f7fff9 0%, #ebf9ef 100%);
}

.goal-res-label {
  font-size: 0.72rem;
  color: #66748a;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}

.goal-res-value {
  margin-top: 6px;
  font-size: clamp(1.7rem, 3.2vw, 2.1rem);
  line-height: 1;
  font-weight: 900;
  color: #1d2a3a;
}

.goal-res-box-ideal .goal-res-label,
.goal-res-box-ideal .goal-res-value {
  color: #1f8e4a;
}

.goal-status-pill {
  margin-top: 12px;
  border: 1px solid #d7deeb;
  border-radius: 10px;
  padding: 7px 10px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: #455267;
  background: #f1f5fb;
}

.goal-bmi-gauge {
  margin-top: 12px;
  position: relative;
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, #3498db 0%, #2ecc71 35%, #f1c40f 65%, #e74c3c 100%);
}

.goal-bmi-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid #2ecc71;
  background: #ffffff;
  transform: translate(-50%, -50%);
  transition: left 0.55s ease, border-color 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.26);
}

.goal-recommend {
  margin-top: 12px;
  border: 1px solid #c8ebd2;
  border-radius: 12px;
  padding: 13px 14px;
  background: #f1fdf5;
  color: #2e3a4a;
  font-size: 0.9rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
}

.goal-recommend i {
  margin-top: 2px;
  color: #18934c;
  font-size: 1.05rem;
}

.goal-recommend strong {
  color: #165f34;
}

.goal-result-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.goal-result-actions .btn {
  flex: 1 1 220px;
}

.goal-result-actions .goal-support-link {
  border-color: #2db468;
  color: #1f8f53;
}

.goal-result-actions .goal-support-link:hover {
  border-color: #249853;
  color: #ffffff;
  background: #29a35a;
}

.goal-result-card[data-tier="low"] [data-goal-bmi] {
  color: #2478cc;
}

.goal-result-card[data-tier="fit"] [data-goal-bmi] {
  color: #2ecc71;
}

.goal-result-card[data-tier="mid"] [data-goal-bmi] {
  color: #d89a15;
}

.goal-result-card[data-tier="high"] [data-goal-bmi] {
  color: #e74c3c;
}

@media (max-width: 1080px) {
  .goal-tool-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .goal-tool-panel {
    padding: 18px;
  }

  .goal-input-grid,
  .goal-result-grid {
    grid-template-columns: 1fr;
  }

  .goal-result-actions .btn {
    width: 100%;
    flex-basis: 100%;
  }
}

/* Slider alti hizmet kutulari - premium refresh */
.trust-strip-section {
  padding-top: 18px;
  padding-bottom: 8px;
}

.trust-strip-section .trust-strip-grid {
  gap: 14px;
}

.trust-strip-section .trust-strip-item {
  position: relative;
  overflow: hidden;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 13px;
  border-radius: 16px;
  border: 1px solid #d4dde9;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  box-shadow:
    0 14px 26px rgba(14, 20, 31, 0.12),
    0 24px 24px -24px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.trust-strip-section .trust-strip-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 44%);
  pointer-events: none;
}

.trust-strip-section .trust-strip-item::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 138, 42, 0), rgba(255, 138, 42, 0.72), rgba(255, 138, 42, 0));
  opacity: 0.9;
}

.trust-strip-section .trust-strip-item i {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  font-size: 0.98rem;
  color: #273244;
  background: linear-gradient(180deg, #ffffff 0%, #e9eff7 100%);
  border: 1px solid #ccd7e5;
  box-shadow:
    0 8px 16px rgba(15, 22, 34, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  position: relative;
  z-index: 1;
}

.trust-strip-section .trust-strip-copy {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.trust-strip-section .trust-strip-item strong {
  display: block;
  margin-bottom: 3px;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #202a39;
}

.trust-strip-section .trust-strip-item small {
  display: block;
  font-size: 0.74rem;
  line-height: 1.35;
  color: #637084;
}

.trust-strip-section .trust-strip-item:hover {
  transform: translateY(-4px);
  border-color: #f08d38;
  box-shadow:
    0 20px 36px rgba(14, 20, 31, 0.18),
    0 26px 30px -24px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(240, 141, 56, 0.44),
    0 0 20px rgba(240, 141, 56, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.trust-strip-section .trust-strip-item:hover i {
  border-color: #f0b074;
  background: linear-gradient(180deg, #ffffff 0%, #fff3e6 100%);
}

@media (max-width: 1180px) {
  .trust-strip-section .trust-strip-grid {
    gap: 12px;
  }

  .trust-strip-section .trust-strip-item {
    padding: 13px 12px;
  }
}

/* Goal Tool Visual Refresh V2 */
.goal-tool-section {
  padding-top: 22px;
}

.goal-tool-panel {
  border-radius: 24px;
  padding: 30px;
  background:
    linear-gradient(145deg, rgba(15, 21, 31, 0.95) 0%, rgba(28, 38, 53, 0.96) 100%);
  border: 1px solid #45526c;
  box-shadow:
    0 26px 56px rgba(8, 13, 21, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24);
}

.goal-tool-panel::before {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.14) 1px, transparent 1.3px),
    repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(255, 255, 255, 0) 1px 14px),
    linear-gradient(110deg, rgba(255, 175, 92, 0.08) 0%, rgba(255, 175, 92, 0) 42%);
  background-size: 20px 20px, 100% 100%, 100% 100%;
  opacity: 0.55;
}

.goal-tool-panel::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  top: -170px;
  right: -150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 146, 58, 0.18) 0%, rgba(255, 146, 58, 0) 72%);
  pointer-events: none;
  z-index: 0;
}

.goal-tool-head {
  margin-bottom: 2px;
}

.goal-tool-head .section-title {
  font-size: clamp(1.55rem, 2.8vw, 2.1rem);
  letter-spacing: -0.01em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
}

.goal-tool-head .section-subtitle {
  max-width: 72ch;
  line-height: 1.5;
}

.goal-tool-form,
.goal-result-card {
  border-radius: 20px;
}

.goal-tool-form {
  border-color: rgba(185, 199, 224, 0.26);
  background: linear-gradient(180deg, rgba(22, 30, 43, 0.93), rgba(13, 19, 30, 0.93));
  box-shadow:
    0 16px 30px rgba(7, 11, 18, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.goal-input-grid {
  gap: 12px;
  margin-bottom: 12px;
}

.goal-input-row span {
  font-size: 0.77rem;
  color: #e5ecf8;
}

.goal-input-row input,
.goal-input-row select {
  border-color: #5f708d;
  background: linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.goal-input-row input:focus,
.goal-input-row select:focus {
  border-color: #ff9847;
  box-shadow:
    0 0 0 3px rgba(255, 152, 71, 0.24),
    0 10px 16px rgba(9, 14, 24, 0.2);
}

.goal-result-card {
  border-color: #c7d4e5;
  background:
    linear-gradient(180deg, #ffffff 0%, #f5f8fd 100%);
  box-shadow:
    0 18px 34px rgba(12, 19, 30, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.goal-status-pill {
  border-width: 1px;
  border-style: solid;
  border-color: #ccd6e6;
}

.goal-recommend {
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

.goal-result-actions .btn {
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.goal-result-actions .goal-support-link {
  background: linear-gradient(180deg, #f6fffa 0%, #eaf9f0 100%);
  box-shadow:
    0 8px 16px rgba(20, 132, 72, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.goal-result-actions .goal-support-link:hover {
  box-shadow:
    0 12px 20px rgba(20, 132, 72, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

@media (max-width: 860px) {
  .goal-tool-panel {
    padding: 20px;
    border-radius: 20px;
  }
}

/* Goal Tool UI Polish V3 */
.goal-tool-head {
  position: relative;
  margin-bottom: 0;
  padding: 18px 20px 22px;
  border-radius: 18px;
  border: 1px solid rgba(238, 244, 255, 0.2);
  background:
    radial-gradient(circle at 84% -35%, rgba(255, 153, 76, 0.28), transparent 60%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 11px);
  box-shadow:
    0 14px 28px rgba(9, 13, 22, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.goal-tool-head::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 144, 58, 0) 0%,
    rgba(255, 144, 58, 0.88) 22%,
    rgba(255, 255, 255, 0.82) 52%,
    rgba(255, 144, 58, 0.88) 78%,
    rgba(255, 144, 58, 0) 100%
  );
  box-shadow: 0 0 14px rgba(255, 148, 72, 0.38);
}

.goal-tool-head .section-title {
  margin-bottom: 8px;
}

.goal-tool-layout {
  position: relative;
  margin-top: 14px;
  padding-top: 16px;
}

.goal-tool-layout::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(162, 179, 206, 0.72) 20%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(162, 179, 206, 0.72) 80%,
    rgba(255, 255, 255, 0) 100%
  );
}

.goal-tool-form {
  padding: 20px;
  border: 1px solid rgba(204, 216, 238, 0.32);
  background: linear-gradient(180deg, rgba(22, 30, 43, 0.96), rgba(12, 18, 28, 0.96));
  box-shadow:
    0 18px 32px rgba(7, 11, 18, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.goal-input-row span {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e9f0ff;
}

.goal-input-row input,
.goal-input-row select {
  height: 48px;
  border-radius: 14px;
  border: 1px solid #6b7d99;
  background: linear-gradient(180deg, #ffffff 0%, #edf2fa 100%);
  color: #1c293b;
  font-weight: 700;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.goal-input-row input::placeholder {
  color: #8896ab;
  font-weight: 600;
}

.goal-input-row input:hover,
.goal-input-row select:hover {
  border-color: #8394b1;
  transform: translateY(-1px);
}

.goal-input-row input:focus,
.goal-input-row select:focus {
  border-color: #ff9850;
  box-shadow:
    0 0 0 3px rgba(255, 152, 80, 0.24),
    0 12px 20px rgba(9, 14, 24, 0.2);
  transform: translateY(-1px);
}

.goal-tool-form .btn.btn-primary {
  height: 50px;
  border-radius: 14px;
  border: 1px solid #ff9654;
  background: linear-gradient(135deg, #ff7f26 0%, #ff522e 100%);
  box-shadow:
    0 14px 26px rgba(255, 110, 42, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.goal-tool-form .btn.btn-primary:hover {
  border-color: #ffa263;
  background: linear-gradient(135deg, #ff8a32 0%, #ff5a35 100%);
  box-shadow:
    0 18px 30px rgba(255, 110, 42, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.goal-side-stack {
  display: grid;
  gap: 12px;
}

.goal-placeholder-card {
  position: relative;
  border: 1px solid #d6deec;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% -18%, rgba(255, 145, 56, 0.22), transparent 44%),
    linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  box-shadow:
    0 18px 34px rgba(11, 18, 30, 0.14),
    0 4px 12px rgba(11, 18, 30, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.goal-placeholder-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff7f26 0%, #ff602f 55%, #ff9f53 100%);
}

.goal-placeholder-card::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -122px;
  bottom: -124px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61, 89, 138, 0.14) 0%, rgba(61, 89, 138, 0) 72%);
  pointer-events: none;
}

.goal-placeholder-media {
  margin: 14px 14px 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(181, 196, 220, 0.64);
  background:
    linear-gradient(180deg, #f0f5fc 0%, #e2eaf6 100%);
}

.goal-placeholder-media img {
  width: 100%;
  height: 182px;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
}

.goal-placeholder-body {
  position: relative;
  z-index: 1;
  padding: 14px 16px 17px;
}

.goal-placeholder-body h3 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: #1c2b3e;
}

.goal-placeholder-body p {
  margin: 7px 0 0;
  color: #556680;
  font-size: 0.89rem;
  line-height: 1.52;
}

.goal-placeholder-points {
  list-style: none;
  margin: 13px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.goal-placeholder-points li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid #d4dfef;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
  color: #25344a;
  font-size: 0.83rem;
  font-weight: 600;
  box-shadow:
    0 6px 12px rgba(15, 23, 38, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.goal-placeholder-points i {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ff6d1b;
  font-size: 0.9rem;
  background: linear-gradient(180deg, #fff2e8 0%, #ffe4d1 100%);
  border: 1px solid #ffd4b6;
}

.goal-result-actions .btn {
  min-height: 48px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: 0.015em;
}

.goal-result-actions .goal-result-link {
  border: 1px solid #3f4f66;
  background: linear-gradient(135deg, #1c2533 0%, #29364a 100%);
  box-shadow:
    0 10px 20px rgba(9, 13, 21, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.goal-result-actions .goal-result-link:hover {
  border-color: #586b86;
  background: linear-gradient(135deg, #232f41 0%, #33445d 100%);
}

.goal-result-actions .goal-support-link {
  border: 1px solid #31b768;
  color: #1a9352;
  background: linear-gradient(180deg, #fbfffd 0%, #e9f9f0 100%);
  box-shadow:
    0 10px 20px rgba(20, 132, 72, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.goal-result-actions .goal-support-link:hover {
  border-color: #279955;
  color: #ffffff;
  background: linear-gradient(135deg, #2bb261 0%, #1f964f 100%);
  box-shadow:
    0 14px 24px rgba(20, 132, 72, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

@media (max-width: 860px) {
  .goal-tool-head {
    padding: 16px 14px 18px;
  }

  .goal-tool-layout {
    padding-top: 14px;
  }

  .goal-tool-form {
    padding: 16px;
  }

  .goal-placeholder-media img {
    height: 158px;
  }
}

/* Slider alti kampanya kartlari: gorsel ustunde desen/opacity katmani yok */
.strip-grid .strip-layer {
  display: none;
}

/* Goal Tool: Compact Inner Layout (outer panel preserved) */

.goal-tool-layout {
  margin-top: 0;
  padding-top: 0;
  grid-template-columns: minmax(0, 250px) minmax(0, 330px) minmax(0, 1fr);
  grid-template-areas: "intro form side";
  gap: 12px;
  align-items: stretch;
}

.goal-intro-card {
  grid-area: intro;
  border: 1px solid #d7dfed;
  border-radius: 16px;
  padding: 14px 13px;
  background:
    radial-gradient(circle at 102% -20%, rgba(255, 145, 56, 0.17), transparent 48%),
    linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  box-shadow: 0 10px 20px rgba(14, 22, 35, 0.09);
}

.goal-intro-title {
  margin: 0;
  font-size: clamp(1.12rem, 2vw, 1.34rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #1f2d40;
}

.goal-intro-subtitle {
  margin: 8px 0 0;
  color: #51627b;
  font-size: 0.82rem;
  line-height: 1.5;
}

.goal-intro-points {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.goal-intro-mini-grid {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.goal-intro-mini-card {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08));
  color: #eaf1fb;
  font-size: 0.75rem;
  font-weight: 700;
}

.goal-intro-mini-card i {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffb066;
  font-size: 0.76rem;
  background: rgba(255, 255, 255, 0.14);
}

.goal-intro-points li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid #dde5f3;
  background: linear-gradient(180deg, #ffffff 0%, #f3f7fe 100%);
  color: #28384f;
  font-size: 0.74rem;
  font-weight: 700;
}

.goal-intro-points i {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ff6f1d;
  font-size: 0.76rem;
  background: linear-gradient(180deg, #fff2e8 0%, #ffe5d3 100%);
  border: 1px solid #ffd6ba;
}

.goal-tool-form {
  grid-area: form;
}

.goal-side-stack {
  grid-area: side;
  height: 100%;
}

.goal-intro-card,
.goal-tool-form,
.goal-side-stack > .goal-placeholder-card,
.goal-side-stack > .goal-result-card {
  height: 100%;
}

.goal-tool-form,
.goal-result-card,
.goal-placeholder-card {
  border-radius: 16px;
}

.goal-placeholder-card {
  box-shadow:
    0 16px 30px rgba(11, 18, 30, 0.12),
    0 4px 12px rgba(11, 18, 30, 0.06);
}

.goal-tool-form {
  padding: 14px;
  box-shadow: 0 18px 32px rgba(7, 11, 18, 0.3);
}

.goal-input-grid {
  gap: 8px;
  margin-bottom: 8px;
}

.goal-input-row span {
  font-size: 0.7rem;
}

.goal-input-row input,
.goal-input-row select {
  height: 42px;
  border-radius: 11px;
  font-size: 0.88rem;
}

.goal-tool-form .btn.btn-primary {
  height: 44px;
  border-radius: 12px;
  margin-top: 2px;
}

.goal-disclaimer {
  margin-top: 8px;
  font-size: 0.68rem;
}

.goal-form-msg {
  margin-top: 6px;
  min-height: 16px;
  font-size: 0.74rem;
}

.goal-placeholder-media {
  margin: 10px 10px 0;
}

.goal-placeholder-media img {
  height: 144px;
}

.goal-placeholder-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 11px 12px 12px;
}

.goal-placeholder-body h3 {
  font-size: 0.98rem;
}

.goal-placeholder-body p {
  margin-top: 5px;
  font-size: 0.82rem;
  line-height: 1.45;
}

.goal-placeholder-points {
  margin-top: auto;
  gap: 7px;
}

.goal-placeholder-points li {
  min-height: 36px;
  padding: 6px 8px;
  font-size: 0.76rem;
  border-radius: 10px;
  box-shadow: 0 6px 12px rgba(15, 23, 38, 0.08);
}

.goal-placeholder-points i {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 0.8rem;
}

.goal-result-card {
  padding: 13px;
  box-shadow: 0 14px 28px rgba(12, 19, 30, 0.14);
}

.goal-result-grid {
  gap: 8px;
}

.goal-res-box {
  border-radius: 10px;
  padding: 9px 10px;
}

.goal-res-label {
  font-size: 0.64rem;
}

.goal-res-value {
  margin-top: 4px;
  font-size: clamp(1.35rem, 2.2vw, 1.72rem);
}

.goal-status-pill {
  margin-top: 9px;
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 0.83rem;
}

.goal-bmi-gauge {
  margin-top: 9px;
  height: 9px;
}

.goal-bmi-marker {
  width: 15px;
  height: 15px;
}

.goal-recommend {
  margin-top: 9px;
  padding: 10px;
  border-radius: 10px;
  font-size: 0.81rem;
  gap: 8px;
}

.goal-recommend i {
  font-size: 0.95rem;
}

.goal-result-actions {
  margin-top: auto;
  padding-top: 10px;
  gap: 8px;
}

.goal-result-actions .btn {
  min-height: 42px;
  border-radius: 11px;
  font-size: 0.83rem;
}

@media (max-width: 1200px) {
  .goal-tool-layout {
    grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
    grid-template-areas:
      "intro form"
      "side side";
  }
}

@media (max-width: 980px) {
  .goal-tool-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "form"
      "side";
  }

  .goal-intro-card,
  .goal-tool-form,
  .goal-side-stack > .goal-placeholder-card,
  .goal-side-stack > .goal-result-card {
    height: auto;
  }

  .goal-intro-card {
    padding: 12px;
  }

  .goal-intro-subtitle {
    font-size: 0.8rem;
  }

  .goal-intro-points li {
    font-size: 0.72rem;
  }
}

@media (max-width: 860px) {
  .goal-tool-form,
  .goal-result-card {
    padding: 11px;
  }

  .goal-placeholder-media img {
    height: 136px;
  }

  .goal-result-actions .btn {
    min-height: 40px;
    font-size: 0.8rem;
  }
}

/* Review footer labels: short text + colored icons */
.review-footer-row .review-note {
  color: #6f7583;
}

.review-footer-row .review-note .review-mini-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.review-footer-row .review-note-helpful .review-mini-icon {
  color: #ff8a2a;
}

.review-footer-row .review-note-delivery .review-mini-icon {
  color: #2f8dff;
}

.review-footer-row .review-note-secure .review-mini-icon {
  color: #1ea964;
}

/* Goal tool kutu borderlarini kaldir */
.goal-intro-card,
.goal-tool-form,
.goal-placeholder-card,
.goal-result-card,
.goal-intro-points li,
.goal-intro-points i,
.goal-placeholder-points li,
.goal-res-box,
.goal-status-pill,
.goal-recommend {
  border: 0 !important;
}

/* Hesaplama araci ustundeki beyaz/gri ayirici cizgiyi kaldir */
.goal-tool-head::after,
.goal-tool-layout::before {
  content: none !important;
  display: none !important;
}

/* Hesaplama alanindaki beyaz kutulari farkli tona cek */
.goal-intro-card,
.goal-tool-form,
.goal-placeholder-card,
.goal-result-card {
  background: linear-gradient(180deg, #eef2f8 0%, #e7edf7 100%) !important;
}

.goal-intro-points li,
.goal-placeholder-points li,
.goal-res-box,
.goal-status-pill {
  background: linear-gradient(180deg, #e9effa 0%, #e2e9f6 100%) !important;
}

.goal-input-row input,
.goal-input-row select {
  background: #f1f5fc !important;
}

/* "Kisisel Analizine Hazirlan" kartindaki ust turuncu seridi kaldir */
.goal-placeholder-card::before {
  content: none !important;
  display: none !important;
}

/* "Kisisel Analizine Hazirlan" kartini koyu tema yap */
.goal-placeholder-card {
  background: linear-gradient(180deg, #1f2937 0%, #111827 100%) !important;
}

.goal-placeholder-body h3 {
  color: #f3f6fc;
}

.goal-placeholder-body p {
  color: #c7d1e2;
}

.goal-placeholder-points li {
  background: linear-gradient(180deg, #2a3648 0%, #1b2535 100%) !important;
  color: #e5edf9;
}

/* Ideal kilo hesaplama: sade ve kompakt yerlesim */
.strip-grid-goal {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.strip-grid-goal .strip-goal-box {
  min-height: 0;
  border-radius: 12px;
  border: 1px solid #d8deea;
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
  box-shadow: 0 10px 20px rgba(11, 18, 30, 0.1);
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.strip-goal-form {
  gap: 6px;
}

.strip-goal-inline {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: end;
}

.strip-goal-field {
  display: grid;
  gap: 5px;
}

.strip-goal-field span {
  color: #49566d;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.strip-goal-field input,
.strip-goal-field select {
  height: 40px;
  border-radius: 9px;
  border: 1px solid #c9d2e3;
  background: #ffffff;
  color: #1f2a3a;
  padding: 0 10px;
  font-size: 0.86rem;
  font-weight: 600;
}

.strip-goal-field input:focus,
.strip-goal-field select:focus {
  outline: none;
  border-color: #ff8a2a;
  box-shadow: 0 0 0 3px rgba(255, 138, 42, 0.2);
}

.strip-showcase-calc .strip-goal-submit.btn.btn-primary {
  width: 128px;
  min-height: 40px;
  margin-top: 0;
  border-radius: 10px;
  border: 1px solid #1f2a3a;
  background: linear-gradient(180deg, #1f2a3a 0%, #131b27 100%);
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 8px 16px rgba(7, 12, 20, 0.2);
}

.strip-showcase-calc .strip-goal-submit.btn.btn-primary:hover {
  border-color: #ff8a2a;
  background: linear-gradient(180deg, #ff9b42 0%, #ff7d29 100%);
  box-shadow:
    0 12px 20px rgba(255, 125, 41, 0.26),
    0 0 0 1px rgba(255, 138, 42, 0.25);
}

.strip-goal-disclaimer {
  display: none;
}

.strip-goal-form-msg {
  min-height: 15px;
  margin: 0;
  font-size: 0.74rem;
}

.strip-goal-output {
  position: relative;
}

.strip-goal-placeholder,
.strip-goal-result {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.strip-goal-placeholder[hidden],
.strip-goal-result[hidden] {
  display: none !important;
}

.strip-goal-placeholder-simple {
  justify-content: center;
}

.strip-goal-placeholder-compact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  border: 1px solid #d8e2f1;
  background: linear-gradient(180deg, #ffffff 0%, #f3f7fd 100%);
  padding: 10px 12px;
  color: #2c3950;
  font-size: 0.8rem;
  font-weight: 600;
}

.strip-goal-placeholder-compact i {
  color: #1f8c5f;
}

.strip-goal-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.strip-goal-metric {
  border-radius: 10px;
  border: 1px solid #d8e1ef;
  background: linear-gradient(180deg, #ffffff 0%, #f3f7fd 100%);
  padding: 9px 10px;
}

.strip-goal-metric-ideal {
  border-color: #c9e3d5;
  background: linear-gradient(180deg, #f3fdf7 0%, #e8f7ee 100%);
}

.strip-goal-metric-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #607089;
  font-weight: 700;
}

.strip-goal-metric-value {
  margin-top: 4px;
  font-size: 1.34rem;
  line-height: 1.08;
  font-weight: 800;
  color: #1f2a3a;
}

.strip-goal-status {
  margin-top: 8px;
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px solid #ced9ea;
  background: #f2f6fd;
  color: #394962;
  font-size: 0.78rem;
  font-weight: 700;
}

.strip-goal-gauge {
  position: relative;
  height: 8px;
  border-radius: 999px;
  margin-top: 8px;
  background: linear-gradient(90deg, #3d9df7 0%, #28ba67 35%, #ffd45e 68%, #ef5b52 100%);
}

.strip-goal-marker {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  background: #ffffff;
  transform: translateX(-50%);
  transition: left 0.35s ease;
  box-shadow: 0 3px 8px rgba(8, 13, 22, 0.24);
}

.strip-goal-recommend {
  margin-top: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid #dbe4f2;
  background: linear-gradient(180deg, #ffffff 0%, #f3f7fd 100%);
  color: #2b3850;
  font-size: 0.78rem;
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.strip-goal-recommend i {
  margin-top: 1px;
  color: #ff8a2a;
}

.strip-goal-actions {
  margin-top: auto;
  padding-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.strip-goal-actions .btn {
  min-height: 38px;
  border-radius: 10px;
  justify-content: center;
}

.strip-goal-actions .goal-result-link {
  border-color: #1f2a3a;
  background: linear-gradient(180deg, #1f2a3a 0%, #131b27 100%);
}

.strip-goal-actions .goal-result-link:hover {
  border-color: #ff8a2a;
  background: linear-gradient(180deg, #ff9b42 0%, #ff7d29 100%);
}

.strip-goal-support-link {
  border: 1px solid #9ad7b2;
  background: #effaf4;
  color: #147d46;
}

.strip-goal-support-link:hover {
  border-color: #24b663;
  background: #def6e8;
  color: #0f6939;
}

@media (max-width: 1080px) {
  .strip-goal-inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .strip-showcase-calc .strip-goal-submit.btn.btn-primary {
    width: 100%;
  }
}

@media (max-width: 860px) {
  .strip-goal-inline {
    grid-template-columns: 1fr;
  }

  .strip-grid-goal .strip-goal-box {
    min-height: auto;
  }

  .strip-goal-actions {
    grid-template-columns: 1fr;
  }
}

/* Urunler: baslik + ustteki 2 kutu site diliyle uyumlu */
#urunler .section-head {
  position: relative;
  margin-bottom: 20px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid #d6dde7;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  box-shadow:
    0 12px 26px rgba(15, 21, 32, 0.09),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
  overflow: hidden;
}

#urunler .section-head::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 138, 42, 0.95) 0%, rgba(255, 138, 42, 0.35) 55%, rgba(255, 138, 42, 0) 100%);
}

#urunler .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #ffbe84;
  background: linear-gradient(135deg, #ff9b42 0%, #ff7e29 100%);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

#urunler .section-title {
  margin: 0;
  color: #1d2737;
  font-size: clamp(1.38rem, 2.2vw, 1.82rem);
  letter-spacing: -0.01em;
}

#urunler .section-subtitle {
  margin: 8px 0 0;
  color: #5d6a81;
  font-size: 0.92rem;
  max-width: 760px;
}

#urunler .showcase-grid {
  gap: 18px;
  margin-bottom: 20px;
}

#urunler .showcase-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid #d6dde7;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafe 100%);
  box-shadow:
    0 14px 30px rgba(15, 21, 32, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

#urunler .showcase-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #ff8a2a 0%, #ffb257 55%, rgba(255, 178, 87, 0) 100%);
}

#urunler .showcase-card:hover {
  border-color: #ff8a2a;
  transform: translateY(-2px);
  box-shadow:
    0 18px 34px rgba(15, 21, 32, 0.14),
    0 0 0 1px rgba(255, 138, 42, 0.45),
    0 0 16px rgba(255, 138, 42, 0.16);
}

#urunler .showcase-tag {
  border: 1px solid #2b374c;
  background: linear-gradient(135deg, #1f2a3a, #111926);
  color: #edf2fb;
}

#urunler .showcase-card h3 {
  color: #1c2637;
}

#urunler .showcase-rating small {
  color: #63718b;
}

#urunler .showcase-price strong {
  color: #101826;
}

#urunler .showcase-price span {
  color: #7a869c;
}

#urunler .showcase-media {
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fd 100%);
  border: 1px solid #e1e8f3;
  padding: 10px;
}

#urunler .showcase-media img {
  width: 100%;
  max-height: 160px;
  margin: 0 auto;
}

#urunler .showcase-discount {
  right: 8px;
  top: 8px;
  background: linear-gradient(135deg, #ff8a2a, #ff5e2f);
  color: #ffffff;
}

#urunler .showcase-actions {
  flex-wrap: wrap;
}

#urunler .showcase-actions .btn {
  flex: 1 1 140px;
}

/* Alt urun kartlari: baslik-yildiz arasi daha kompakt */
#urunler .products-grid-rich .product-title {
  margin: 0 0 2px;
  min-height: 0;
}

#urunler .products-grid-rich .product-meta-row {
  margin: 0 0 8px;
}

@media (max-width: 980px) {
  #urunler .section-head {
    padding: 16px;
  }

  #urunler .showcase-grid {
    grid-template-columns: 1fr;
  }

  #urunler .showcase-card {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Gunun kampanyasi: dikkat cekici, siparise yonlendiren blok */
.daily-campaign {
  position: relative;
  margin-top: 0;
  margin-bottom: 22px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid #d7deea;
  background:
    radial-gradient(circle at 16% -10%, rgba(255, 170, 102, 0.26), rgba(255, 170, 102, 0) 42%),
    radial-gradient(circle at 88% 122%, rgba(255, 134, 41, 0.3), rgba(255, 134, 41, 0) 38%),
    linear-gradient(145deg, #1a2434 0%, #223249 50%, #2d4563 100%);
  box-shadow:
    0 22px 40px rgba(15, 22, 34, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.daily-campaign::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(125deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(-125deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 24px);
  opacity: 0.28;
}

.daily-campaign > * {
  position: relative;
  z-index: 1;
}

.daily-campaign-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 20px;
  align-items: end;
  margin-bottom: 14px;
}

.daily-campaign-kicker {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 186, 122, 0.72);
  background: linear-gradient(135deg, #ff9b42 0%, #ff762d 100%);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 12px 24px rgba(255, 125, 40, 0.32);
}

.daily-campaign-head h3 {
  margin: 0;
  color: #f2f6ff;
  font-size: clamp(1.2rem, 2.2vw, 1.56rem);
  letter-spacing: -0.01em;
}

.daily-campaign-head p {
  grid-column: 1 / 2;
  margin: 0;
  color: #d2dced;
  font-size: 0.88rem;
  line-height: 1.5;
  max-width: 640px;
}

.daily-campaign-timer-wrap {
  grid-column: 2 / 3;
  grid-row: 2 / span 2;
  min-width: 170px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 196, 141, 0.42);
  background: rgba(15, 22, 34, 0.45);
  box-shadow:
    0 10px 22px rgba(10, 14, 23, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: center;
}

.daily-campaign-timer-label {
  display: block;
  margin-bottom: 4px;
  color: #ffd7b0;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

.daily-campaign-timer {
  display: block;
  color: #ffffff;
  font-size: clamp(1.22rem, 2vw, 1.52rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 14px rgba(255, 159, 88, 0.42);
}

.daily-campaign-progress {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.daily-campaign-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffd27b 0%, #ff9844 52%, #ff6828 100%);
  box-shadow: 0 0 18px rgba(255, 139, 42, 0.42);
  transition: width 0.8s linear;
}

.daily-campaign-social-proof {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.daily-proof-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  border-radius: 11px;
  border: 1px solid rgba(255, 203, 153, 0.34);
  background: rgba(10, 18, 30, 0.38);
  padding: 8px 10px;
  box-shadow:
    0 10px 18px rgba(8, 12, 20, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.daily-proof-item i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffbe7a;
  font-size: 0.86rem;
  background: rgba(255, 170, 104, 0.14);
  border: 1px solid rgba(255, 190, 122, 0.48);
  flex: 0 0 28px;
}

.daily-proof-item span {
  color: #e6edf9;
  font-size: 0.79rem;
  line-height: 1.4;
}

.daily-proof-item strong {
  color: #ffffff;
  font-size: 0.96rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  margin-right: 3px;
  font-variant-numeric: tabular-nums;
}

.daily-campaign-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.daily-campaign-card {
  border-radius: 16px;
  border: 1px solid #d8e0ec;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%);
  box-shadow:
    0 14px 28px rgba(15, 22, 34, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.88) inset;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  padding: 14px;
  min-height: 440px;
  min-width: 0;
}

.daily-campaign-media {
  position: relative;
  border-radius: 12px;
  border: 1px solid #e0e7f3;
  background: linear-gradient(180deg, #ffffff 0%, #f3f7fd 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 220px;
  padding: 10px;
}

.daily-campaign-media img {
  width: 100%;
  max-height: 210px;
  object-fit: contain;
}

.daily-campaign-discount {
  position: absolute;
  left: 8px;
  top: 8px;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #ff7f2c, #ff5a27);
  box-shadow: 0 8px 16px rgba(255, 108, 35, 0.3);
}

.daily-campaign-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.daily-campaign-content h4 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.34;
  min-height: 2.72em;
}

.daily-campaign-content h4 a {
  color: #1a2536;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.daily-campaign-rating {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
}

.daily-campaign-rating small {
  color: #687793;
  font-size: 0.76rem;
  line-height: 1.35;
  flex: 1 1 100%;
}

.daily-campaign-price {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.daily-campaign-price strong {
  color: #101826;
  font-size: 1.3rem;
}

.daily-campaign-price span {
  color: #7b889e;
  font-size: 0.9rem;
  text-decoration: line-through;
}

.daily-campaign-advantage {
  margin-top: 8px;
  padding: 10px 11px;
  border-radius: 11px;
  border: 1px solid #ffd8b8;
  background:
    radial-gradient(circle at 100% -10%, rgba(255, 180, 120, 0.34), rgba(255, 180, 120, 0) 44%),
    linear-gradient(135deg, #fff8f0 0%, #ffefdf 100%);
  box-shadow: 0 10px 18px rgba(255, 116, 36, 0.14);
  display: grid;
  gap: 2px;
}

.daily-campaign-advantage-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid #ffca9a;
  background: rgba(255, 145, 72, 0.14);
  color: #ad4d1d;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
}

.daily-campaign-advantage strong {
  color: #9f3a13;
  font-size: clamp(1.24rem, 2vw, 1.46rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.daily-campaign-advantage small {
  color: #8d4d2b;
  font-size: 0.72rem;
  line-height: 1.35;
}

.daily-campaign-actions {
  margin-top: auto;
  padding-top: 10px;
  display: block;
}

.daily-campaign-actions .btn {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  font-size: 0.82rem;
  gap: 7px;
  white-space: nowrap;
}

.daily-campaign-actions .btn.btn-primary {
  background: linear-gradient(120deg, #ff7c22 0%, #ffa13a 45%, #ff5c2b 100%);
  background-size: 220% 220%;
  border-color: #f66f22;
  color: #fff7ee;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 12px 24px rgba(255, 102, 26, 0.3),
    0 0 0 1px rgba(255, 182, 116, 0.24);
  transform: translateY(0);
  transition: transform 0.24s ease, box-shadow 0.24s ease, filter 0.24s ease, border-color 0.24s ease;
  animation: dailyCampaignCtaFlow 5.8s ease infinite;
}

.daily-campaign-actions .btn.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -32%;
  width: 24%;
  height: 100%;
  border-radius: 16px;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 245, 228, 0.52) 48%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-18deg);
  animation: dailyCampaignCtaSweep 3.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.daily-campaign-actions .btn.btn-primary::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.02) 46%, rgba(0, 0, 0, 0.08) 100%);
  opacity: 0.56;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.24s ease;
}

.daily-campaign-actions .btn.btn-primary > * {
  position: relative;
  z-index: 1;
}

.daily-campaign-actions .btn.btn-primary i {
  transition: transform 0.24s ease;
}

.daily-campaign-actions .btn.btn-primary:hover {
  transform: translateY(-2px) scale(1.01);
  filter: brightness(1.03) saturate(1.06);
  border-color: #ffc184;
  box-shadow:
    0 18px 32px rgba(255, 102, 26, 0.36),
    0 0 0 1px rgba(255, 193, 132, 0.42),
    0 0 22px rgba(255, 141, 56, 0.28);
}

.daily-campaign-actions .btn.btn-primary:hover::after {
  opacity: 0.68;
}

.daily-campaign-actions .btn.btn-primary:hover i {
  transform: translateX(1px) scale(1.08);
}

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

@media (max-width: 900px) {
  .daily-campaign-grid {
    grid-template-columns: 1fr;
  }
}

@keyframes dailyCampaignCtaFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes dailyCampaignCtaSweep {
  0% {
    left: -34%;
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  48% {
    left: 112%;
    opacity: 1;
  }
  62% {
    opacity: 0;
  }
  100% {
    left: 112%;
    opacity: 0;
  }
}

@media (max-width: 860px) {
  .daily-campaign {
    padding: 14px;
  }

  .daily-campaign-head {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .daily-campaign-head p,
  .daily-campaign-timer-wrap {
    grid-column: auto;
    grid-row: auto;
  }

  .daily-campaign-social-proof {
    grid-template-columns: 1fr;
  }

  .daily-campaign-timer-wrap {
    width: 100%;
  }

  .daily-campaign-card {
    min-height: auto;
  }

  .daily-campaign-media img {
    max-height: 170px;
  }

}

/* Yorum karti ust alani: header gorunumu + renkli desen */
.review-shell-head {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid #2f415b;
  padding: 16px;
  margin-bottom: 18px;
  border-bottom: 0;
  background:
    radial-gradient(circle at 10% 18%, rgba(255, 164, 94, 0.22), rgba(255, 164, 94, 0) 38%),
    radial-gradient(circle at 90% 84%, rgba(82, 146, 232, 0.24), rgba(82, 146, 232, 0) 40%),
    linear-gradient(145deg, #162233 0%, #21354d 52%, #294564 100%);
  box-shadow:
    0 16px 30px rgba(12, 18, 27, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.review-shell-head::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(125deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(-125deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 22px);
  opacity: 0.3;
}

.review-shell-head::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 164, 94, 0.95) 0%, rgba(255, 164, 94, 0.38) 52%, rgba(255, 164, 94, 0) 100%);
}

.review-shell-head > * {
  position: relative;
  z-index: 1;
}

.review-shell-kicker {
  background: linear-gradient(135deg, #ff9c48, #ff752f);
  border: 1px solid rgba(255, 197, 148, 0.52);
  color: #fff;
  box-shadow: 0 8px 18px rgba(255, 124, 45, 0.28);
}

.review-shell-copy h3 {
  color: #f4f8ff;
}

.review-shell-copy p {
  color: #d0dced;
}

.review-shell-copy .review-head-kpi-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 920px;
}

.review-shell-copy .review-head-kpi-grid .review-kpi-card {
  border: 1px solid rgba(201, 220, 246, 0.36);
  border-radius: 12px;
  padding: 10px 11px;
  min-height: 64px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.08) 100%);
  box-shadow:
    0 10px 18px rgba(9, 14, 22, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.review-shell-copy .review-head-kpi-grid .review-kpi-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  font-size: 0.92rem;
}

.review-shell-copy .review-head-kpi-grid .review-kpi-text {
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
}

.review-shell-copy .review-head-kpi-grid .review-kpi-text strong {
  color: #ffffff;
  font-size: 1.04rem;
  margin-bottom: 0;
  line-height: 1.1;
  white-space: nowrap;
}

.review-shell-copy .review-head-kpi-grid .review-kpi-text span {
  color: #d8e6f8;
  font-size: 0.71rem;
  line-height: 1.32;
  white-space: nowrap;
}

.review-shell-copy .review-head-kpi-grid .review-kpi-card-satisfaction {
  border-color: rgba(84, 206, 143, 0.52);
  background: linear-gradient(180deg, rgba(82, 201, 136, 0.28) 0%, rgba(43, 103, 78, 0.2) 100%);
}

.review-shell-copy .review-head-kpi-grid .review-kpi-card-satisfaction .review-kpi-icon {
  color: #ddffed;
  background: rgba(30, 122, 82, 0.42);
  border: 1px solid rgba(153, 248, 205, 0.45);
}

.review-shell-copy .review-head-kpi-grid .review-kpi-card-support {
  border-color: rgba(106, 166, 255, 0.5);
  background: linear-gradient(180deg, rgba(99, 150, 243, 0.3) 0%, rgba(47, 74, 122, 0.22) 100%);
}

.review-shell-copy .review-head-kpi-grid .review-kpi-card-support .review-kpi-icon {
  color: #e5f1ff;
  background: rgba(49, 89, 167, 0.44);
  border: 1px solid rgba(168, 207, 255, 0.42);
}

.review-shell-copy .review-head-kpi-grid .review-kpi-card-shipping {
  border-color: rgba(255, 169, 96, 0.58);
  background: linear-gradient(180deg, rgba(255, 167, 86, 0.3) 0%, rgba(139, 86, 38, 0.22) 100%);
}

.review-shell-copy .review-head-kpi-grid .review-kpi-card-shipping .review-kpi-icon {
  color: #fff0de;
  background: rgba(177, 100, 36, 0.44);
  border: 1px solid rgba(255, 210, 160, 0.4);
}

.review-shell-media {
  border-color: rgba(203, 219, 240, 0.46);
  box-shadow: 0 14px 28px rgba(10, 16, 25, 0.34);
}

@media (max-width: 860px) {
  .review-shell-head {
    padding: 14px;
  }

  .review-shell-copy .review-head-kpi-grid {
    grid-template-columns: repeat(3, minmax(210px, 1fr));
    max-width: none;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
}

/* Review overview: daha kompakt ve tek satira yakin yerlesim */
.review-overview {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.review-score-card {
  padding: 12px;
  border-radius: 14px;
}

.review-score-value {
  font-size: 2.2rem;
}

.review-stars-large {
  margin-top: 4px;
  font-size: 0.9rem;
}

.review-score-card p {
  margin: 5px 0 0;
  font-size: 0.8rem;
}

.rating-bands {
  margin-top: 10px;
  gap: 6px;
}

.rating-band {
  grid-template-columns: 30px 1fr 32px;
  gap: 7px;
  font-size: 0.74rem;
}

.rating-band-track {
  height: 6px;
}

.review-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.review-kpi-card {
  padding: 11px 10px;
  border-radius: 12px;
  min-height: 82px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.review-kpi-card strong {
  font-size: 1.1rem;
  margin-bottom: 1px;
}

.review-kpi-card span {
  font-size: 0.76rem;
  line-height: 1.3;
}

@media (max-width: 1180px) {
  .review-overview {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 860px) {
  .review-score-card,
  .review-kpi-card {
    padding: 10px;
  }

  .review-kpi-grid {
    gap: 7px;
  }
}

/* Yorum kutulari icin renkli kapsayici */
.review-comments-wrap {
  position: relative;
  margin-top: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #d4deed;
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 165, 96, 0.18), rgba(255, 165, 96, 0) 36%),
    radial-gradient(circle at 90% 82%, rgba(120, 165, 230, 0.2), rgba(120, 165, 230, 0) 40%),
    linear-gradient(160deg, #f3f7ff 0%, #eef3fb 52%, #f6f9ff 100%);
  box-shadow:
    0 14px 28px rgba(16, 24, 36, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.review-comments-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(-120deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 22px);
  opacity: 0.45;
}

.review-comments-wrap > * {
  position: relative;
  z-index: 1;
}

.review-comments-wrap .review-carousel {
  margin-top: 0;
}

.review-comments-wrap .review-card-rich {
  border-color: #d6e0ef;
  background: linear-gradient(180deg, #ffffff 0%, #f3f7ff 100%);
  box-shadow:
    0 10px 22px rgba(18, 27, 40, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.review-comments-wrap .review-card-featured {
  border-color: #e5d3be;
  background: linear-gradient(180deg, #ffffff 0%, #f8efe1 100%);
}

.review-comments-wrap .review-card-rich:hover {
  border-color: #ff8a2a;
  box-shadow:
    0 16px 30px rgba(18, 27, 40, 0.14),
    0 0 0 1px rgba(255, 138, 42, 0.42),
    0 0 16px rgba(255, 138, 42, 0.16);
}

.review-comments-wrap .review-carousel-nav {
  border-color: #cfd9ea;
  background: #ffffff;
}

.review-comments-wrap .review-carousel-dots button {
  background: #b9c7de;
}

.review-comments-wrap .review-carousel-dots button.active {
  background: #ff8a2a;
}

@media (max-width: 860px) {
  .review-comments-wrap {
    padding: 10px;
  }
}

/* Review lower section: top KPI stili ile uyumlu modern vurgular */
.review-overview-modern {
  align-items: stretch;
}

.review-score-card-modern {
  border: 1px solid #d6e2f4;
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 169, 96, 0.2), rgba(255, 169, 96, 0) 34%),
    radial-gradient(circle at 92% 86%, rgba(96, 148, 235, 0.18), rgba(96, 148, 235, 0) 38%),
    linear-gradient(165deg, #f8fbff 0%, #f1f6ff 52%, #f7fbff 100%);
  box-shadow:
    0 14px 28px rgba(18, 28, 43, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.review-score-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.review-score-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid #ffc68f;
  color: #8a4b1f;
  background: linear-gradient(135deg, #ffe7cf 0%, #ffd7ae 100%);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.review-score-tag i {
  font-size: 0.66rem;
}

.review-score-tag-soft {
  border-color: #b8d5ff;
  color: #24538a;
  background: linear-gradient(135deg, #e8f2ff 0%, #d9e9ff 100%);
}

.review-score-card-modern .review-score-value {
  color: #121c2b;
  text-shadow: 0 8px 20px rgba(59, 98, 161, 0.16);
}

.review-score-card-modern .review-stars-large {
  color: #ff8b2a;
  letter-spacing: 0.03em;
}

.review-score-card-modern p {
  color: #4f5f78;
  font-weight: 600;
}

.review-score-card-modern .rating-band {
  color: #52627b;
}

.review-score-card-modern .rating-band-track {
  height: 7px;
  background: #dbe7f8;
}

.review-score-card-modern .rating-band-track i {
  background: linear-gradient(90deg, #ffb054 0%, #ff7b2f 56%, #5a8fe4 100%);
}

.review-score-notes {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.review-score-notes span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #c8d9f1;
  background: rgba(255, 255, 255, 0.78);
  color: #38506f;
  font-size: 0.7rem;
  font-weight: 700;
}

.review-score-notes span i {
  color: #1f7acc;
}

.review-comments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #d3def0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(238, 246, 255, 0.92) 100%);
}

.review-comments-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1d304b;
}

.review-comments-title i {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffd1a7;
  color: #d26b21;
  background: linear-gradient(135deg, #ffecd8 0%, #ffd3a8 100%);
  font-size: 0.74rem;
}

.review-comments-title strong {
  font-size: 0.84rem;
  letter-spacing: 0.01em;
}

.review-comments-head span {
  color: #516684;
  font-size: 0.76rem;
  font-weight: 700;
}

.review-comments-wrap .review-card-rich {
  border-color: #d3e0f2;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}

.review-comments-wrap .review-card-featured {
  border-color: #f0cfab;
  background: linear-gradient(180deg, #ffffff 0%, #fff5e8 100%);
}

.review-comments-wrap .review-carousel-nav {
  border-color: #c8d6ed;
  color: #2b4c78;
  background: linear-gradient(180deg, #ffffff 0%, #edf4ff 100%);
}

.review-comments-wrap .review-carousel-nav:hover {
  border-color: #ffb77b;
  color: #c6611d;
  background: linear-gradient(180deg, #fff8ef 0%, #ffe6cb 100%);
}

@media (max-width: 860px) {
  .review-score-headline {
    flex-direction: column;
    align-items: flex-start;
  }

  .review-comments-head {
    padding: 9px 10px;
  }
}

/* Mini Cart Drawer */
.mini-cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  pointer-events: none;
}

.mini-cart-overlay[hidden] {
  display: none !important;
}

.mini-cart-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(10, 11, 16, 0.42);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}

.mini-cart-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(420px, 100vw);
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: linear-gradient(180deg, #ffffff 0%, #f7f4ef 100%);
  border-left: 1px solid #ddd4c6;
  box-shadow: -24px 0 60px rgba(12, 13, 18, 0.26);
  transform: translateX(104%);
  transition: transform 0.26s cubic-bezier(0.22, 0.72, 0.26, 1);
}

.mini-cart-overlay.open {
  pointer-events: auto;
}

.mini-cart-overlay.open .mini-cart-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.mini-cart-overlay.open .mini-cart-panel {
  transform: translateX(0);
}

.mini-cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #e2d9cb;
  background: linear-gradient(180deg, #ffffff 0%, #f8f3ea 100%);
}

.mini-cart-head-text strong {
  display: block;
  font-size: 1.03rem;
  line-height: 1.2;
  color: #171923;
}

.mini-cart-head-text small {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: #687184;
}

.mini-cart-close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid #d9cfbe;
  background: #fff;
  color: #21222b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mini-cart-body {
  overflow: auto;
  padding: 14px 16px 12px;
}

.mini-cart-empty {
  border: 1px dashed #d9cfbe;
  border-radius: 12px;
  padding: 14px;
  font-size: 0.86rem;
  color: #666f81;
  background: #fff;
}

.mini-cart-items {
  display: grid;
  gap: 10px;
}

.mini-cart-item {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  padding: 9px;
  border-radius: 12px;
  border: 1px solid #ded5c8;
  background: #fff;
}

.mini-cart-item img {
  width: 74px;
  height: 74px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #ece2d3;
  background: #f9f6f1;
}

.mini-cart-item h4 {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.35;
  color: #171a24;
}

.mini-cart-item-meta {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.mini-cart-item-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.76rem;
  color: #6f7586;
}

.mini-cart-item-sub strong {
  color: #1f2433;
  font-size: 0.82rem;
}

.mini-cart-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mini-cart-qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d8d0c4;
  border-radius: 999px;
  overflow: hidden;
  background: #faf7f2;
}

.mini-cart-qty-btn {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #1b1f2a;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}

.mini-cart-qty-btn:hover {
  background: #ece4d8;
}

.mini-cart-qty-value {
  min-width: 26px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #273042;
}

.mini-cart-remove-btn {
  border: 1px solid #e2c9cb;
  background: #fff;
  color: #a0333f;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
}

.mini-cart-remove-btn:hover {
  background: #ffeef0;
}

.mini-cart-qty-btn:disabled,
.mini-cart-remove-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.mini-cart-items.is-busy {
  opacity: 0.72;
}

.mini-cart-foot {
  padding: 12px 16px 16px;
  border-top: 1px solid #e2d9cb;
  background: linear-gradient(180deg, #fcfaf6 0%, #f5f1e9 100%);
  display: grid;
  gap: 10px;
}

.mini-cart-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.87rem;
  color: #545d72;
}

.mini-cart-total-row strong {
  font-size: 1rem;
  color: #131620;
}

.mini-cart-go {
  width: 100%;
}

/* Product detail page: keep surface tones pure white */
.detail-layout,
.detail-desc-block {
  --surface: #ffffff;
  --surface-2: #ffffff;
}

.detail-layout .card,
.detail-layout .gallery-main {
  background: #ffffff;
}

.tabs.detail-desc-block {
  margin-top: 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 18px 18px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.tabs.detail-desc-block .detail-desc-title {
  margin: 0 0 10px;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #0f172a;
}

.tabs.detail-desc-block .tab-head {
  display: flex;
  gap: 16px;
  flex-wrap: nowrap;
  padding: 0 2px;
  margin-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
  background: transparent;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs.detail-desc-block .tab-head::-webkit-scrollbar {
  display: none;
}

.tabs.detail-desc-block .tab-head button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 10px 0 12px;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  color: #6b7280;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease, transform 0.2s ease;
}

.tabs.detail-desc-block .tab-head button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff7a1a 0%, #ffb347 100%);
  opacity: 0;
  transform: scaleX(0.35);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.tabs.detail-desc-block .tab-head button:not(.active):hover {
  color: #111827;
}

.tabs.detail-desc-block .tab-head button.active {
  background: transparent;
  border-color: transparent;
  color: #0f172a;
  font-weight: 800;
  box-shadow: none;
}

.tabs.detail-desc-block .tab-head button.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.tabs.detail-desc-block .tab-panel {
  margin-top: 0;
  border: 1px solid #e7ecf3;
  border-radius: 12px;
  padding: 18px;
  background: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  color: #1f2937;
}

.tabs.detail-desc-block .tab-panel p,
.tabs.detail-desc-block .tab-panel li {
  color: #374151;
  line-height: 1.75;
}

.tabs.detail-desc-block .tab-panel * {
  background-color: transparent !important;
}

@media (max-width: 700px) {
  .tabs.detail-desc-block {
    padding: 14px;
  }

  .tabs.detail-desc-block .tab-head button {
    font-size: 0.88rem;
    padding-bottom: 11px;
  }
}

.ingredients-image-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background: #ffffff;
}

.ingredients-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: contain;
}

/* Homepage spacing rhythm: keep consistent block gaps */
.hero.section {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 20px;
}

.trust-strip-section {
  padding-top: 22px;
  padding-bottom: 14px;
}

section[aria-label="Kampanya Banners"] {
  padding-top: 12px;
  padding-bottom: 12px;
}

section[aria-label="Kampanya Banners"] > .container {
  display: grid;
  gap: 24px;
}

section[aria-label="Kampanya Banners"] .daily-campaign,
section[aria-label="Kampanya Banners"] .strip-showcase,
section[aria-label="Kampanya Banners"] .strip-showcase-calc {
  margin: 0;
}

#urunler.section {
  padding-top: 12px;
  padding-bottom: 12px;
}

.review-section {
  padding-top: 12px;
  padding-bottom: 12px;
}

.review-section .review-shell-card {
  margin-top: 0;
}

.home-blog-section {
  padding-top: 12px;
  padding-bottom: 16px;
}

@media (max-width: 860px) {
  .hero.section {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 14px;
  }

  .trust-strip-section {
    padding-top: 14px;
    padding-bottom: 8px;
  }

  section[aria-label="Kampanya Banners"] {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  section[aria-label="Kampanya Banners"] > .container {
    gap: 14px;
  }

  #urunler.section {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .review-section {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .home-blog-section {
    padding-top: 8px;
    padding-bottom: 10px;
  }
}

/* Conversion, trust and SEO enhancements */
.product-trust-inline {
  margin: 8px 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.78rem;
  color: #5f6270;
}

.product-trust-inline span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.product-trust-inline i {
  color: #1f2937;
}

.detail-stock-inline {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5f6c80;
  font-size: 0.76rem;
  font-weight: 600;
}

.detail-stock-inline i {
  font-size: 0.5rem;
  color: #1ea964;
}

.detail-stock-inline.is-outstock i {
  color: #e85a5a;
}

.detail-stock-inline.is-outstock {
  color: #7c5454;
}

.detail-assurance-shell {
  margin-top: 10px;
  border: 1px solid #dbe4f1;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%);
  box-shadow: 0 10px 20px rgba(15, 21, 32, 0.06);
  padding: 11px;
}

.detail-assurance-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e6edf7;
}

.detail-assurance-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid #d6e1f0;
  background: #edf3fa;
  color: #3c4d66;
  font-size: 0.64rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 800;
  white-space: nowrap;
}

.detail-assurance-head p {
  margin: 0;
  color: #5b697d;
  font-size: 0.72rem;
  text-align: right;
}

.detail-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0 0 8px;
}

.detail-trust-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 9px;
  border-radius: 10px;
  border: 1px solid #e1e9f5;
  background: #ffffff;
  color: #2f3f56;
  box-shadow: 0 4px 10px rgba(15, 21, 32, 0.04);
}

.detail-trust-chip i {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: #f0f5fc;
  color: #2d4058;
  font-size: 0.68rem;
  flex: 0 0 auto;
  line-height: 1;
  text-align: center;
}

.detail-trust-chip i::before {
  display: block;
  line-height: 1;
}

.detail-trust-chip strong {
  font-size: 0.72rem;
  line-height: 1.2;
  color: #273548;
  font-weight: 700;
}

.detail-social-proof {
  margin-top: 10px;
  border-radius: 12px;
  border: 1px solid #dbe7f4;
  background: linear-gradient(135deg, #f8fbff 0%, #eef5fc 100%);
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.detail-proof-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #2f3947;
}

.detail-proof-item i {
  color: #0f172a;
}

.detail-proof-item strong {
  font-weight: 800;
}

.detail-cta-row {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.detail-cta-whatsapp {
  border-color: #7dc89a;
  color: #0f7a3d;
  background: #f2fff6;
}

.detail-cta-whatsapp:hover {
  border-color: #26b363;
  color: #065f36;
}

.detail-extra-seo {
  margin-top: 16px;
}

.detail-seo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.detail-seo-card {
  border: 1px solid #e1e6ef;
  border-radius: 14px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 12px 24px rgba(17, 24, 39, 0.06);
}

.detail-seo-card h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.detail-seo-card ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: #374151;
  font-size: 0.88rem;
}

.detail-faq-mini {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.detail-faq-mini-item {
  border: 1px solid #e6ebf4;
  border-radius: 10px;
  overflow: hidden;
  background: #fbfdff;
}

.detail-faq-mini-question {
  width: 100%;
  border: 0;
  background: transparent;
  color: #1f2937;
  font-weight: 700;
  font-size: 0.86rem;
  text-align: left;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

.detail-faq-mini-answer {
  display: none;
  padding: 0 12px 12px;
}

.detail-faq-mini-answer p {
  margin: 0;
  color: #4b5563;
  font-size: 0.84rem;
  line-height: 1.6;
}

.detail-faq-mini-item.open .detail-faq-mini-answer {
  display: block;
}

.detail-faq-mini-item.open .detail-faq-mini-question i {
  transform: rotate(45deg);
}

.cart-recovery-card {
  margin-top: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: linear-gradient(135deg, #fbfcff, #f4f7fb);
  padding: 12px;
}

.cart-recovery-card strong {
  display: block;
  font-size: 0.95rem;
  color: #111827;
}

.cart-recovery-card p {
  margin: 5px 0 10px;
  font-size: 0.82rem;
  color: #556070;
}

@media (max-width: 980px) {
  .detail-seo-grid {
    grid-template-columns: 1fr;
  }

  .detail-assurance-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .detail-assurance-head p {
    text-align: left;
  }

  .detail-trust-grid {
    grid-template-columns: 1fr;
  }

  .detail-trust-note {
    grid-template-columns: 1fr;
  }
}

/* Content blocks: comparison, story cards, detail conversion */
.review-story-rows {
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
}

.review-story-row {
  border: 1px solid #e0e7f2;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  padding: 8px 10px;
}

.review-story-row span {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4b5b73;
}

.review-story-row p {
  margin: 4px 0 0;
  font-size: 0.83rem;
  color: #253042;
  line-height: 1.5;
}

.compare-banner {
  margin: 16px 0 18px;
}

.compare-banner-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #ffb673;
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 16%, rgba(255, 160, 84, 0.22), rgba(255, 160, 84, 0) 52%),
    linear-gradient(130deg, #ffffff 0%, #f8f1e7 58%, #eef3fa 100%);
  box-shadow:
    0 18px 34px rgba(15, 21, 32, 0.13),
    0 0 0 1px rgba(255, 165, 92, 0.3);
  padding: 18px 22px;
  text-decoration: none;
}

.compare-banner-shine {
  position: absolute;
  top: -40%;
  left: -25%;
  width: 48%;
  height: 180%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0));
  animation: compare-shine 3.4s ease-in-out infinite;
  pointer-events: none;
}

.compare-banner-kicker {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #131a27, #1e2a3e);
  color: #f7fafc;
  border: 1px solid #31445e;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  box-shadow: 0 8px 16px rgba(15, 21, 32, 0.24);
}

.compare-banner-copy h3 {
  position: relative;
  z-index: 2;
  margin: 10px 0 4px;
  font-size: 1.24rem;
  color: #1c2737;
}

.compare-banner-copy p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #5c6b80;
  font-size: 0.92rem;
}

.compare-banner-points {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.compare-banner-points span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #e0cdb8;
  background: rgba(255, 255, 255, 0.84);
  color: #384a61;
  font-size: 0.74rem;
  font-weight: 700;
}

.compare-banner-points i {
  color: #ff7e24;
}

.compare-banner-side {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: end;
  gap: 8px;
}

.compare-banner-side-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid #ffd4a6;
  background: linear-gradient(180deg, #fff3e4, #ffe5c8);
  color: #965210;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.compare-banner-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid #ff8a2a;
  background: linear-gradient(120deg, #ff7c22 0%, #ff9a35 48%, #ff5c2b 100%);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 12px 24px rgba(255, 120, 32, 0.34);
  animation: compare-cta-pulse 1.8s ease-in-out infinite;
}

.compare-banner-cta i {
  transition: transform 0.2s ease;
}

.compare-banner-card:hover .compare-banner-cta {
  transform: translateY(-1px);
  box-shadow:
    0 16px 28px rgba(255, 120, 32, 0.45),
    0 0 0 1px rgba(255, 138, 42, 0.55),
    0 0 18px rgba(255, 138, 42, 0.34);
}

.compare-banner-card:hover .compare-banner-cta i {
  transform: translateX(2px);
}

.compare-banner-card:hover {
  border-color: #ff942f;
  box-shadow:
    0 22px 38px rgba(15, 21, 32, 0.16),
    0 0 0 1px rgba(255, 146, 52, 0.38);
}

@keyframes compare-shine {
  0% { transform: translateX(-120%) rotate(18deg); }
  55% { transform: translateX(230%) rotate(18deg); }
  100% { transform: translateX(230%) rotate(18deg); }
}

@keyframes compare-cta-pulse {
  0%, 100% {
    box-shadow: 0 10px 20px rgba(255, 120, 32, 0.3);
  }
  50% {
    box-shadow:
      0 14px 28px rgba(255, 120, 32, 0.44),
      0 0 16px rgba(255, 138, 42, 0.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .compare-banner-shine,
  .compare-banner-cta {
    animation: none;
  }
}

.campaign-compare {
  margin: 16px 0 18px;
  border: 1px solid #d6dee9;
  border-radius: 18px;
  background: linear-gradient(150deg, #ffffff 0%, #f4f7fb 100%);
  box-shadow: 0 14px 28px rgba(15, 21, 32, 0.1);
  padding: 16px;
}

.campaign-compare-head {
  margin-bottom: 12px;
}

.campaign-compare-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef3fa;
  color: #3b4a61;
  border: 1px solid #d7e0ed;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.campaign-compare-head h3 {
  margin: 10px 0 4px;
  font-size: 1.1rem;
}

.campaign-compare-head p {
  margin: 0;
  color: #58677d;
  font-size: 0.88rem;
}

.campaign-compare-wrap {
  overflow-x: auto;
}

.campaign-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 860px;
}

.campaign-compare-table th,
.campaign-compare-table td {
  border: 1px solid #dee6f2;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
  background: #fff;
}

.campaign-compare-table thead th {
  background: linear-gradient(180deg, #f9fbff 0%, #edf2f9 100%);
}

.campaign-compare-table tbody th {
  width: 140px;
  text-align: left;
  font-size: 0.8rem;
  color: #48576f;
  background: #f7faff;
}

.campaign-compare-product {
  display: grid;
  gap: 8px;
  color: #1f2937;
  text-decoration: none;
}

.campaign-compare-product img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin: 0 auto;
}

.campaign-compare-product span {
  font-size: 0.8rem;
  line-height: 1.35;
}

.campaign-compare-table td strong {
  display: block;
  font-size: 1rem;
  color: #121926;
}

.campaign-compare-table td small {
  display: block;
  margin-top: 2px;
  color: #6b7280;
  font-size: 0.72rem;
}

.campaign-compare-stars {
  display: block;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  color: #c9963f;
}

.campaign-compare-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #2f3a4a;
  background: #101721;
  color: #fff;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
}

.campaign-compare-cta:hover {
  border-color: #ff8a2a;
  box-shadow: 0 0 0 1px rgba(255, 138, 42, 0.45), 0 0 14px rgba(255, 138, 42, 0.25);
}

.campaign-compare-page {
  margin-top: 0;
}

.detail-trust-note {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.detail-trust-note-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e1e9f5;
  border-radius: 10px;
  background: #fff;
  padding: 8px 9px;
  box-shadow: 0 4px 10px rgba(15, 21, 32, 0.04);
}

.detail-trust-note-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  border: 1px solid #e0e8f4;
  background: #f3f7fd;
  color: #324760;
  flex: 0 0 auto;
  font-size: 0.68rem;
  line-height: 1;
  text-align: center;
}

.detail-trust-note-icon i {
  display: block;
  line-height: 1;
}

.detail-trust-note-copy {
  display: grid;
  gap: 3px;
}

.detail-trust-note-item strong {
  display: block;
  font-size: 0.73rem;
  color: #253345;
  line-height: 1.2;
}

.detail-trust-note-item span {
  display: block;
  margin-top: 0;
  font-size: 0.7rem;
  color: #627085;
  line-height: 1.3;
}

.detail-wa-quick {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.detail-wa-quick-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dce4ef;
  border-radius: 10px;
  background: #ffffff;
  min-height: 38px;
  padding: 0 12px;
  color: #1f2d40;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
}

.detail-wa-quick-link i {
  color: #1da44e;
}

.detail-wa-quick-link:hover {
  border-color: #1da44e;
  background: #f3fff7;
}

.detail-outcome-block {
  margin-top: 16px;
  border: 1px solid #d8e1ee;
  border-radius: 16px;
  background: linear-gradient(160deg, #ffffff 0%, #f4f7fb 100%);
  padding: 14px;
}

.detail-outcome-head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.detail-outcome-head p {
  margin: 6px 0 0;
  color: #5f6f85;
  font-size: 0.84rem;
}

.detail-outcome-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.detail-outcome-card {
  border: 1px solid #dee6f2;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}

.detail-outcome-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.detail-outcome-meta strong {
  font-size: 0.82rem;
}

.detail-outcome-meta .stars {
  font-size: 0.8rem;
}

.detail-outcome-row + .detail-outcome-row {
  margin-top: 7px;
}

.detail-outcome-row span {
  display: inline-flex;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4f5f76;
  font-weight: 800;
}

.detail-outcome-row p {
  margin: 3px 0 0;
  font-size: 0.8rem;
  color: #2c3a4d;
  line-height: 1.45;
}

.detail-seo-grid.detail-seo-grid-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.detail-plan-wrap {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 10px;
}

.detail-plan-card,
.detail-progress-card {
  border: 1px solid #dce4ef;
  border-radius: 14px;
  background: #fff;
  padding: 12px;
}

.detail-plan-card h3,
.detail-progress-card h3 {
  margin: 0 0 10px;
  font-size: 0.98rem;
}

.detail-plan-table {
  display: grid;
  gap: 6px;
}

.detail-plan-head,
.detail-plan-row {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.detail-plan-head span,
.detail-plan-row span {
  border: 1px solid #e4ebf5;
  border-radius: 8px;
  padding: 8px;
  font-size: 0.76rem;
  color: #324357;
  background: #fff;
}

.detail-plan-head span {
  background: #f4f8ff;
  color: #465a77;
  font-weight: 700;
}

.detail-progress-grid {
  display: grid;
  gap: 8px;
}

.detail-progress-item {
  border: 1px solid #e3eaf4;
  border-radius: 10px;
  background: #f9fbff;
  padding: 10px;
}

.detail-progress-item span {
  display: block;
  font-size: 0.78rem;
  color: #5a6b81;
}

.detail-progress-item strong {
  display: block;
  margin-top: 3px;
  font-size: 1rem;
  color: #121a27;
}

.detail-progress-card p {
  margin: 10px 0 0;
  color: #6a778b;
  font-size: 0.74rem;
  line-height: 1.5;
}

.article-inline-offer {
  margin-top: 18px;
  border: 1px solid #d8e1ee;
  border-radius: 16px;
  background: linear-gradient(150deg, #ffffff 0%, #f3f7fd 100%);
  box-shadow: 0 14px 28px rgba(15, 21, 32, 0.1);
  padding: 14px;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
}

.article-inline-offer-media img {
  width: 100%;
  height: 140px;
  object-fit: contain;
}

.article-inline-offer-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef3fa;
  color: #3a4a62;
  border: 1px solid #d7e0ed;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
}

.article-inline-offer-content h3 {
  margin: 8px 0 4px;
  font-size: 1.05rem;
}

.article-inline-offer-content h3 a {
  color: #1f2937;
  text-decoration: none;
}

.article-inline-offer-content p {
  margin: 0;
  color: #5f6d82;
  font-size: 0.86rem;
  line-height: 1.55;
}

.article-inline-offer-price {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.article-inline-offer-price strong {
  font-size: 1.08rem;
  color: #111827;
}

.article-inline-offer-price span {
  color: #8b95a5;
  text-decoration: line-through;
  font-size: 0.83rem;
}

.article-inline-offer-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 1100px) {
  .detail-seo-grid.detail-seo-grid-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .detail-outcome-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .compare-banner-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px;
  }

  .compare-banner-points {
    width: 100%;
  }

  .compare-banner-side {
    width: 100%;
    justify-items: stretch;
  }

  .compare-banner-side-badge {
    justify-self: flex-start;
  }

  .compare-banner-cta {
    width: 100%;
    justify-content: center;
  }

  .campaign-compare {
    padding: 12px;
  }

  .campaign-compare-table {
    min-width: 760px;
  }

  .detail-trust-note {
    grid-template-columns: 1fr;
  }

  .article-inline-offer {
    grid-template-columns: 1fr;
  }

  .article-inline-offer-media img {
    height: 180px;
  }
}

/* Review card head: compact and aligned */
.review-card-head {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.review-head-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.review-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.review-author-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
  color: #1f2937;
}

.review-card-head .review-badge {
  flex: 0 0 auto;
  padding: 3px 8px;
  font-size: 0.66rem;
  line-height: 1.2;
  white-space: nowrap;
}

.review-head-sub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 18px;
  min-width: 0;
  max-width: 100%;
  font-size: 0.64rem;
  line-height: 1.1;
  color: #6b7280;
  white-space: nowrap;
  flex-wrap: nowrap;
  overflow: hidden;
}

.review-head-sub i {
  font-size: 0.62rem;
  color: #1ea964;
}

.review-head-sub span {
  white-space: nowrap;
}

.review-head-dot {
  color: #9aa3b2;
}

@media (max-width: 860px) {
  .review-head-top {
    gap: 6px;
  }

  .review-card-head .review-badge {
    font-size: 0.62rem;
    padding: 3px 7px;
  }

  .review-head-sub {
    font-size: 0.61rem;
  }
}

/* Product detail buy panel: cleaner hierarchy and tighter spacing */
.detail-buy-card {
  border-color: #d7e1ee;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 14px 30px rgba(15, 21, 32, 0.08);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.detail-buy-card .notice.success {
  margin: 0;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.76rem;
}

.detail-buy-card .detail-campaign-note {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 11px;
  border: 1px solid #ffd7ad;
  background: linear-gradient(135deg, #fff9f2 0%, #fff2e6 100%);
  box-shadow: 0 10px 18px rgba(255, 132, 48, 0.12);
}

.detail-buy-card .detail-campaign-pill {
  width: fit-content;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #ffb772;
  background: linear-gradient(135deg, #ff8b35, #ff5f2c);
  color: #fffaf2;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.detail-buy-card .detail-campaign-copy {
  display: grid;
  gap: 2px;
}

.detail-buy-card .detail-campaign-copy strong {
  color: #a13f14;
  font-size: 0.85rem;
  line-height: 1.3;
}

.detail-buy-card .detail-campaign-copy span {
  color: #8a4c2a;
  font-size: 0.68rem;
  line-height: 1.4;
}

.detail-buy-card .price-block {
  margin: 0;
  display: flex;
  align-items: flex-end;
  gap: 8px 12px;
  flex-wrap: wrap;
}

.detail-buy-card .price-main {
  font-size: clamp(1.7rem, 2.4vw, 2.05rem);
  line-height: 1;
  color: #101827;
}

.detail-buy-card .product-price-old {
  font-size: 0.88rem;
  color: #8a95a7;
}

.detail-buy-card .detail-stock-inline {
  margin-top: 0;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid #d8e5d4;
  background: #f5fbf6;
  color: #406353;
  font-size: 0.68rem;
  letter-spacing: 0.01em;
}

.detail-buy-card .detail-stock-inline.is-outstock {
  border-color: #f0d5d5;
  background: #fff4f4;
  color: #875e5e;
}

.detail-buy-card .detail-assurance-shell {
  margin-top: 0;
  border: 1px solid #e2e9f3;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f8fe 100%);
  box-shadow: none;
  padding: 10px;
}

.detail-buy-card .detail-assurance-head {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #d4dfed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  flex-wrap: wrap;
}

.detail-buy-card .detail-assurance-kicker {
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid #d2ddee;
  background: #ecf3fd;
  color: #32465f;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.detail-buy-card .detail-assurance-kicker i {
  color: #2d4d74;
  font-size: 0.66rem;
}

.detail-buy-card .detail-assurance-mini {
  color: #5f718a;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.detail-buy-card .detail-trust-grid {
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.detail-buy-card .detail-trust-chip {
  min-height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid #e2e9f3;
  background: #ffffff;
  box-shadow: none;
  gap: 6px;
  justify-content: center;
  text-align: center;
  min-width: 140px;
}

.detail-buy-card .detail-trust-chip i {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: #edf4fd;
  color: #3b4f69;
  font-size: 0.58rem;
}

.detail-buy-card .detail-trust-chip strong {
  font-size: 0.66rem;
  line-height: 1.2;
  color: #2a3d57;
}

.detail-buy-card .detail-trust-note {
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.detail-buy-card .detail-trust-note-item {
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: none;
  padding: 7px 8px;
  gap: 8px;
}

.detail-buy-card .detail-trust-note-icon {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid #dce5f2;
  background: #edf4fd;
  color: #3b4f69;
  font-size: 0.58rem;
}

.detail-buy-card .detail-trust-note-copy {
  gap: 2px;
}

.detail-buy-card .detail-trust-note-item strong {
  font-size: 0.69rem;
  color: #21344f;
}

.detail-buy-card .detail-trust-note-item span {
  font-size: 0.64rem;
  color: #65788e;
  line-height: 1.35;
}

.detail-buy-card .qty-row {
  gap: 8px;
}

.detail-buy-card .qty-box {
  border-color: #d7e1ee;
  border-radius: 12px;
  background: #f8fbff;
}

.detail-buy-card .qty-box button,
.detail-buy-card .qty-box span {
  width: 36px;
  height: 40px;
}

.detail-buy-card .qty-box button {
  background: transparent;
  color: #172236;
  font-size: 1rem;
}

.detail-buy-card .add-to-cart-btn {
  flex: 1 1 auto;
  min-height: 40px;
  border-radius: 12px;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
}

.detail-buy-card .detail-cta-row {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.detail-buy-card .detail-cta-row .btn {
  min-height: 38px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0 8px;
  justify-content: center;
}

.detail-buy-card .detail-cta-whatsapp {
  border-color: #97d3ab;
  color: #14693a;
  background: #f2fff6;
}

.detail-buy-card .detail-cta-whatsapp:hover {
  border-color: #2bb564;
  color: #0f5f34;
  background: #e9fff1;
}

.detail-buy-card .detail-social-proof {
  margin-top: 0;
  border-radius: 10px;
  border: 1px solid #e2eaf5;
  background: #f8fbff;
  padding: 9px 10px;
  display: grid;
  gap: 6px;
}

.detail-buy-card .detail-proof-item {
  gap: 7px;
  font-size: 0.74rem;
  color: #2b3c52;
}

.detail-buy-card .detail-proof-item i {
  width: 16px;
  text-align: center;
  color: #4a607f;
  font-size: 0.72rem;
}

.detail-buy-card .detail-proof-item strong {
  color: #15243a;
}

.detail-buy-card .detail-wa-quick {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.detail-buy-card .detail-wa-quick-link {
  min-height: 32px;
  border-radius: 999px;
  border: 1px solid #cfe3d8;
  background: #f3fff8;
  color: #1a4f34;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0 10px;
  gap: 6px;
}

.detail-buy-card .detail-wa-quick-link i {
  color: #169a4a;
  font-size: 0.7rem;
}

.detail-buy-card .detail-wa-quick-link:hover {
  border-color: #1faa57;
  background: #edfff4;
}

@media (max-width: 980px) {
  .detail-buy-card .detail-trust-grid {
    justify-content: center;
  }

  .detail-buy-card .detail-cta-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .detail-buy-card {
    padding: 14px;
    gap: 10px;
  }

  .detail-buy-card .detail-trust-grid {
    justify-content: center;
    gap: 6px;
  }

  .detail-buy-card .detail-trust-chip {
    width: 100%;
    max-width: 240px;
  }

  .detail-buy-card .detail-assurance-head {
    align-items: flex-start;
  }

  .detail-buy-card .detail-proof-item {
    font-size: 0.72rem;
  }
}

/* Footer refresh: premium, cleaner and conversion-focused */
.site-footer.footer-elite {
  margin-top: 42px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 6%, rgba(255, 145, 52, 0.12), transparent 34%),
    radial-gradient(circle at 88% 94%, rgba(67, 92, 136, 0.22), transparent 42%),
    linear-gradient(140deg, #080b12 0%, #111722 48%, #191f2b 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #c7d0de;
}

.site-footer.footer-elite::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.06), transparent 38%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 16px);
  opacity: 0.9;
}

.site-footer.footer-elite::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  right: -120px;
  top: -120px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 150, 66, 0.24), transparent 72%);
  pointer-events: none;
}

.site-footer.footer-elite .footer-top,
.site-footer.footer-elite .footer-bottom {
  position: relative;
  z-index: 1;
}

.site-footer.footer-elite .footer-top {
  padding: 28px 0 18px;
}

.footer-elite-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.footer-elite-trust-item {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 11px;
  border: 1px solid rgba(240, 176, 98, 0.5);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  color: #e5ebf6;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(240, 176, 98, 0.2),
    0 0 16px rgba(240, 176, 98, 0.18),
    0 10px 22px rgba(5, 8, 14, 0.28);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.footer-elite-trust-item i {
  color: #f0b062;
  font-size: 0.78rem;
}

.footer-elite-trust-item:hover {
  border-color: rgba(255, 198, 128, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 0 1px rgba(255, 198, 128, 0.36),
    0 0 24px rgba(255, 174, 84, 0.32),
    0 12px 24px rgba(5, 8, 14, 0.34);
  transform: translateY(-1px);
}

.footer-elite-grid {
  grid-template-columns: 1.55fr 1fr 1fr 1.2fr;
  gap: 22px;
}

.footer-brand-logo {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  color: #f5f8fd;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.footer-brand-col p {
  margin: 12px 0 0;
  color: #b7c0cf;
  font-size: 0.84rem;
  line-height: 1.65;
}

.footer-brand-meta {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.footer-brand-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d2d9e6;
  font-size: 0.76rem;
}

.footer-brand-meta i {
  color: #f0b062;
}

.footer-socials {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-socials a {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #eff4fd;
  text-decoration: none;
  display: grid;
  place-items: center;
  transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.footer-socials a:hover {
  border-color: rgba(255, 173, 92, 0.72);
  background: rgba(255, 173, 92, 0.14);
  transform: translateY(-1px);
}

.site-footer.footer-elite .footer-title {
  margin: 1px 0 10px;
  font-size: 0.84rem;
  color: #f4f7fc;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.site-footer.footer-elite .footer-col ul {
  gap: 7px;
}

.site-footer.footer-elite .footer-col p,
.site-footer.footer-elite .footer-col li,
.site-footer.footer-elite .footer-col a {
  color: #bcc5d4;
  font-size: 0.83rem;
  line-height: 1.45;
  text-decoration: none;
}

.site-footer.footer-elite .footer-col a:hover {
  color: #f3f7ff;
}

.footer-contact-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-contact-list i {
  width: 14px;
  text-align: center;
  color: #f0b062;
}

.footer-wa-btn {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid #2db86a;
  background: linear-gradient(135deg, #0f8a43 0%, #1fb661 100%);
  color: #f5fffb;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 10px 24px rgba(16, 130, 64, 0.28),
    0 0 0 1px rgba(64, 219, 132, 0.34);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: footer-wa-pulse 2.1s ease-in-out infinite;
}

.site-footer.footer-elite .footer-contact-col .footer-wa-btn,
.site-footer.footer-elite .footer-contact-col .footer-wa-btn:hover,
.site-footer.footer-elite .footer-contact-col .footer-wa-btn:focus {
  color: #ffffff;
}

.site-footer.footer-elite .footer-contact-col .footer-wa-btn i {
  color: #ffffff;
}

.footer-wa-btn > * {
  position: relative;
  z-index: 1;
}

.footer-wa-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.3), transparent 44%);
  opacity: 0.55;
}

.footer-wa-btn::after {
  content: "";
  position: absolute;
  top: -120%;
  left: -48%;
  width: 40%;
  height: 280%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.36) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(24deg) translateX(-240%);
  animation: footer-wa-shine 2.8s ease-in-out infinite;
}

.footer-wa-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 28px rgba(16, 130, 64, 0.36),
    0 0 0 1px rgba(61, 209, 121, 0.56),
    0 0 24px rgba(61, 209, 121, 0.3);
  animation-duration: 1.55s;
}

.footer-wa-btn:hover::after {
  animation-duration: 1.95s;
}

@keyframes footer-wa-pulse {
  0%,
  100% {
    box-shadow:
      0 10px 24px rgba(16, 130, 64, 0.26),
      0 0 0 1px rgba(64, 219, 132, 0.32),
      0 0 0 rgba(56, 194, 118, 0);
  }

  50% {
    box-shadow:
      0 14px 30px rgba(16, 130, 64, 0.38),
      0 0 0 1px rgba(64, 219, 132, 0.5),
      0 0 22px rgba(56, 194, 118, 0.34);
  }
}

@keyframes footer-wa-shine {
  0% {
    transform: rotate(24deg) translateX(-240%);
    opacity: 0;
  }

  18% {
    opacity: 1;
  }

  42% {
    transform: rotate(24deg) translateX(320%);
    opacity: 0;
  }

  100% {
    transform: rotate(24deg) translateX(320%);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-wa-btn,
  .footer-wa-btn::after {
    animation: none;
  }
}

.site-footer.footer-elite .footer-bottom {
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-bottom-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: #a9b3c4;
  font-size: 0.76rem;
}

.footer-bottom-badges {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-bottom-badges span {
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.footer-bottom-badges i {
  color: #f0b062;
}

@media (max-width: 1040px) {
  .footer-elite-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 680px) {
  .site-footer.footer-elite .footer-top {
    padding: 22px 0 14px;
  }

  .footer-elite-trust {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 16px;
  }

  .footer-elite-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .footer-socials a {
    width: 32px;
    height: 32px;
  }

  .footer-bottom-wrap {
    font-size: 0.74rem;
  }

  .footer-bottom-badges span {
    min-height: 24px;
    font-size: 0.71rem;
  }
}

/* Campaign page refresh */
.campaign-page-hero .campaign-hero-card {
  background:
    radial-gradient(circle at 82% 16%, rgba(255, 152, 68, 0.24), transparent 32%),
    linear-gradient(128deg, #131a28 0%, #202b3f 54%, #2b3a55 100%);
  border-color: #364660;
  box-shadow: 0 20px 44px rgba(16, 24, 38, 0.32);
}

.campaign-hero-points {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.campaign-hero-points span {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #eaf1ff;
  font-size: 0.74rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.campaign-hero-points i {
  color: #ffb56e;
}

.campaign-list-section .notice {
  margin-top: 0;
}

.campaign-list-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.campaign-item-card {
  border: 1px solid #d8e2ef;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(170deg, #ffffff 0%, #f5f8fd 100%);
  box-shadow: 0 14px 30px rgba(20, 28, 44, 0.1);
  display: flex;
  flex-direction: column;
}

.campaign-item-media {
  display: block;
  background: linear-gradient(140deg, #f4f8ff 0%, #edf3fc 100%);
  border-bottom: 1px solid #dbe5f2;
}

.campaign-item-media img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.campaign-item-body {
  padding: 12px;
  display: grid;
  gap: 10px;
  flex: 1;
}

.campaign-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.campaign-item-kicker {
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid #d7e2f1;
  background: #eef4fd;
  color: #334a69;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

.campaign-item-live {
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid #ffd3ab;
  background: #fff2e3;
  color: #9a5619;
  font-size: 0.68rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.campaign-item-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.32;
  color: #182436;
}

.campaign-item-desc {
  margin: 0;
  color: #5b6980;
  font-size: 0.84rem;
  line-height: 1.55;
}

.campaign-item-timer {
  border: 1px dashed #b9cae1;
  border-radius: 11px;
  background: #f5f9ff;
  padding: 9px 10px;
  display: grid;
  gap: 4px;
}

.campaign-item-timer strong {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.72rem;
  color: #3a506f;
}

.campaign-item-timer span {
  font-size: 0.83rem;
  color: #1f2d42;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.campaign-item-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.campaign-item-btn {
  min-height: 38px;
  border-radius: 11px;
  font-size: 0.8rem;
  padding: 0 12px;
}

.campaign-item-text-link {
  color: #2a3c58;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid #b8c7db;
  line-height: 1.2;
}

.campaign-item-text-link:hover {
  color: #16263a;
  border-bottom-color: #8199b6;
}

.campaign-empty-card {
  padding: 20px;
}

.campaign-empty-card p {
  margin: 8px 0 0;
  color: #5f6d81;
}

.campaign-subscribe-card {
  border: 1px solid #d7e2ef;
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 14%, rgba(255, 153, 66, 0.18), transparent 34%),
    linear-gradient(140deg, #ffffff 0%, #f5f8fd 100%);
  box-shadow: 0 14px 28px rgba(20, 28, 44, 0.1);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.campaign-subscribe-kicker {
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid #d6e2f2;
  background: #edf4fd;
  color: #365072;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
}

.campaign-subscribe-copy h2 {
  margin: 8px 0 4px;
  font-size: 1.18rem;
  color: #1a283b;
}

.campaign-subscribe-copy p {
  margin: 0;
  color: #5d6d83;
  font-size: 0.84rem;
}

.campaign-subscribe-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
}

.campaign-subscribe-form input {
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid #cedbeb;
  background: #ffffff;
}

.campaign-subscribe-form .btn {
  min-height: 42px;
  border-radius: 12px;
  padding: 0 16px;
}

@media (max-width: 1080px) {
  .campaign-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .campaign-list-grid {
    grid-template-columns: 1fr;
  }

  .campaign-item-media img {
    height: 210px;
  }

  .campaign-subscribe-form {
    grid-template-columns: 1fr;
  }

  .campaign-item-actions {
    justify-content: space-between;
  }
}

/* Campaign page v2: stronger visual hierarchy */
.campaign-list-section {
  position: relative;
}

.campaign-featured-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid #32435f;
  background:
    radial-gradient(circle at 84% 12%, rgba(255, 146, 46, 0.3), transparent 34%),
    linear-gradient(130deg, #0f1624 0%, #1a263b 46%, #263757 100%);
  box-shadow:
    0 28px 56px rgba(10, 16, 28, 0.34),
    0 0 0 1px rgba(79, 108, 154, 0.22);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 18px;
}

.campaign-featured-card::before {
  content: "";
  position: absolute;
  top: -42%;
  left: -20%;
  width: 42%;
  height: 190%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0));
  animation: campaign-featured-shine 4.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes campaign-featured-shine {
  0% { transform: translateX(-130%) rotate(18deg); }
  46% { transform: translateX(250%) rotate(18deg); }
  100% { transform: translateX(250%) rotate(18deg); }
}

.campaign-featured-media {
  min-height: 320px;
  background: linear-gradient(150deg, #0c1220, #1a2942);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.campaign-featured-media img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}

.campaign-featured-content {
  padding: 20px;
  display: grid;
  gap: 12px;
  color: #e8effc;
}

.campaign-featured-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.campaign-featured-kicker {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.11);
  color: #f6f9ff;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.campaign-featured-kicker i {
  color: #ffb063;
}

.campaign-featured-live {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(82, 229, 138, 0.44);
  background: rgba(31, 197, 108, 0.16);
  color: #b8ffd8;
  font-size: 0.72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.campaign-featured-live i {
  font-size: 0.54rem;
}

.campaign-featured-title {
  margin: 0;
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  line-height: 1.2;
  color: #ffffff;
}

.campaign-featured-desc {
  margin: 0;
  color: #c8d5eb;
  font-size: 0.92rem;
  line-height: 1.65;
}

.campaign-featured-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.campaign-featured-points span {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #edf4ff;
  font-size: 0.71rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.campaign-featured-points i {
  color: #ffbf7e;
}

.campaign-featured-timer {
  border: 1px dashed rgba(255, 198, 137, 0.5);
  border-radius: 12px;
  background: rgba(255, 169, 87, 0.12);
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.campaign-featured-timer strong {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  color: #ffdcb4;
}

.campaign-featured-timer span {
  font-size: 1.02rem;
  letter-spacing: 0.03em;
  color: #ffffff;
  font-weight: 800;
}

.campaign-featured-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.campaign-featured-btn {
  min-height: 42px;
  border-radius: 12px;
  padding: 0 16px;
  font-size: 0.84rem;
  border-color: #ff9a44;
  background: linear-gradient(135deg, #ff7a24 0%, #ff9e3d 50%, #ff6a2a 100%);
  color: #fff8ef;
  box-shadow: 0 16px 30px rgba(255, 126, 44, 0.34);
}

.campaign-featured-btn:hover {
  box-shadow:
    0 20px 34px rgba(255, 126, 44, 0.42),
    0 0 0 1px rgba(255, 174, 96, 0.5),
    0 0 18px rgba(255, 152, 64, 0.3);
}

.campaign-featured-link {
  color: #e7f0ff;
  text-decoration: none;
  border-bottom: 1px solid rgba(230, 240, 255, 0.52);
  font-size: 0.82rem;
  font-weight: 700;
}

.campaign-featured-link:hover {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.82);
}

.campaign-list-head {
  margin: 2px 0 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.campaign-list-head h3 {
  margin: 0;
  color: #1a273a;
  font-size: 1.14rem;
}

.campaign-list-head p {
  margin: 0;
  color: #60718b;
  font-size: 0.82rem;
}

.campaign-list-grid {
  gap: 16px;
}

.campaign-item-card {
  border: 1px solid #d3deef;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 154, 63, 0.14), transparent 34%),
    linear-gradient(170deg, #ffffff 0%, #f4f8ff 100%);
  box-shadow: 0 16px 30px rgba(17, 27, 42, 0.12);
  transform: translateY(0);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.campaign-item-card:hover {
  transform: translateY(-4px);
  border-color: #b9cbe3;
  box-shadow:
    0 22px 36px rgba(17, 27, 42, 0.16),
    0 0 0 1px rgba(255, 149, 58, 0.22);
}

.campaign-item-media img {
  height: 228px;
}

.campaign-item-kicker {
  border-color: #cad8ec;
  background: linear-gradient(180deg, #f1f6ff, #e5efff);
  color: #36517a;
}

.campaign-item-live {
  border-color: #ffcf9f;
  background: #fff1e0;
  color: #a45d1f;
}

.campaign-item-timer {
  border-color: #c0d0e7;
  background: #f2f7ff;
}

.campaign-item-btn {
  border-color: #2f435f;
  background: linear-gradient(135deg, #111a28, #27364d);
  color: #f3f7ff;
}

.campaign-item-btn:hover {
  border-color: #ff8d2b;
  box-shadow:
    0 12px 24px rgba(14, 22, 34, 0.3),
    0 0 0 1px rgba(255, 141, 43, 0.48),
    0 0 14px rgba(255, 141, 43, 0.28);
}

.campaign-subscribe-card {
  border-radius: 18px;
  border-color: #cfdced;
  background:
    radial-gradient(circle at 12% 86%, rgba(76, 119, 183, 0.16), transparent 38%),
    radial-gradient(circle at 88% 18%, rgba(255, 157, 74, 0.2), transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #f4f8ff 100%);
  box-shadow: 0 16px 32px rgba(20, 29, 45, 0.12);
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 16px;
}

.campaign-subscribe-form {
  margin-left: auto;
  width: 100%;
}

@media (max-width: 1080px) {
  .campaign-featured-card {
    grid-template-columns: 1fr;
  }

  .campaign-featured-media {
    min-height: 260px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .campaign-featured-media img {
    min-height: 260px;
  }
}

@media (max-width: 860px) {
  .campaign-subscribe-card {
    grid-template-columns: 1fr;
  }

  .campaign-list-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .campaign-featured-content {
    padding: 14px;
    gap: 10px;
  }

  .campaign-featured-title {
    font-size: 1.22rem;
  }

  .campaign-featured-timer span {
    font-size: 0.9rem;
  }

  .campaign-item-media img {
    height: 208px;
  }

  .campaign-featured-actions {
    width: 100%;
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  .campaign-featured-card::before {
    animation: none;
  }
}

/* Campaign page alternative: lighter premium editorial look */
.campaign-page-hero .campaign-hero-card {
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 158, 76, 0.22), transparent 33%),
    radial-gradient(circle at 12% 88%, rgba(95, 128, 178, 0.14), transparent 40%),
    linear-gradient(140deg, #ffffff 0%, #f5f8fd 52%, #edf2fa 100%);
  border-color: #d4deec;
  box-shadow: 0 20px 40px rgba(23, 33, 48, 0.1);
  color: #1a2738;
}

.campaign-page-hero .campaign-hero-card .kicker {
  background: linear-gradient(180deg, #101722, #25334a);
  border-color: #334962;
  color: #f2f7ff;
}

.campaign-page-hero .campaign-hero-card h1 {
  color: #152237;
}

.campaign-page-hero .campaign-hero-card p {
  color: #586980;
}

.campaign-hero-points span {
  border-color: #d4deec;
  background: #ffffff;
  color: #30455f;
  box-shadow: 0 8px 16px rgba(22, 32, 48, 0.06);
}

.campaign-hero-points i {
  color: #e98229;
}

.campaign-featured-card {
  border: 1px solid #d8e2ef;
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% 12%, rgba(255, 170, 92, 0.16), transparent 34%),
    linear-gradient(155deg, #ffffff 0%, #f7f9fc 100%);
  box-shadow: 0 22px 46px rgba(21, 31, 47, 0.11);
}

.campaign-featured-card::before {
  display: none;
}

.campaign-featured-media {
  min-height: 320px;
  border-right: 1px solid #dee7f3;
  background: linear-gradient(140deg, #edf2fa, #f7f9fc);
}

.campaign-featured-content {
  color: #1c2a3c;
}

.campaign-featured-kicker {
  border-color: #ffd8b0;
  background: linear-gradient(180deg, #fff5e7, #ffedd8);
  color: #8d4f1b;
}

.campaign-featured-kicker i {
  color: #e57f27;
}

.campaign-featured-live {
  border-color: #bde9cc;
  background: #ecfff3;
  color: #167342;
}

.campaign-featured-title {
  color: #111f33;
}

.campaign-featured-desc {
  color: #566a84;
}

.campaign-featured-points span {
  border-color: #d8e3f1;
  background: #ffffff;
  color: #2f4662;
}

.campaign-featured-points i {
  color: #d67f31;
}

.campaign-featured-timer {
  border-color: #d4dfef;
  background: #f4f8ff;
}

.campaign-featured-timer strong {
  color: #425873;
}

.campaign-featured-timer span {
  color: #192a41;
}

.campaign-featured-btn {
  border-color: #202d40;
  background: linear-gradient(135deg, #101822, #24364f);
  color: #f1f6ff;
  box-shadow: 0 14px 30px rgba(16, 24, 36, 0.2);
}

.campaign-featured-btn:hover {
  border-color: #f08b32;
  box-shadow:
    0 18px 32px rgba(16, 24, 36, 0.25),
    0 0 0 1px rgba(240, 139, 50, 0.44),
    0 0 16px rgba(240, 139, 50, 0.22);
}

.campaign-featured-link {
  color: #30465f;
  border-bottom-color: #a9bad0;
}

.campaign-featured-link:hover {
  color: #1a2d45;
  border-bottom-color: #728daa;
}

.campaign-list-head h3 {
  color: #16263a;
}

.campaign-list-head p {
  color: #5b6f8a;
}

.campaign-item-card {
  position: relative;
  border: 1px solid #d8e2ef;
  border-radius: 18px;
  background: linear-gradient(160deg, #ffffff 0%, #f6f9fe 100%);
  box-shadow: 0 14px 28px rgba(18, 28, 42, 0.09);
}

.campaign-item-card::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff8a2b, #ffc17e, #7f99bf);
  opacity: 0.95;
}

.campaign-item-card:hover {
  border-color: #becde1;
  box-shadow:
    0 20px 34px rgba(18, 28, 42, 0.14),
    0 0 0 1px rgba(255, 150, 61, 0.22);
}

.campaign-item-media {
  background: linear-gradient(135deg, #ecf2fb, #f8fafd);
}

.campaign-item-media img {
  height: 224px;
}

.campaign-item-kicker {
  border-color: #ffd8b3;
  background: #fff4e7;
  color: #8f521f;
}

.campaign-item-live {
  border-color: #c6e9d3;
  background: #effcf4;
  color: #1b7f4b;
}

.campaign-item-title {
  color: #1b2b42;
}

.campaign-item-desc {
  color: #5e7088;
}

.campaign-item-timer {
  border-color: #d2deee;
  background: #f5f9ff;
}

.campaign-item-timer strong {
  color: #465f7d;
}

.campaign-item-timer span {
  color: #22344b;
}

.campaign-item-btn {
  border-color: #25364d;
  background: linear-gradient(135deg, #101822, #263951);
  color: #eef4ff;
}

.campaign-item-btn:hover {
  border-color: #f08a31;
  box-shadow:
    0 12px 24px rgba(16, 24, 36, 0.26),
    0 0 0 1px rgba(240, 138, 49, 0.42),
    0 0 14px rgba(240, 138, 49, 0.24);
}

.campaign-item-text-link {
  color: #334a68;
  border-bottom-color: #adc0d8;
}

.campaign-item-text-link:hover {
  color: #1f3550;
  border-bottom-color: #6f8bab;
}

.campaign-subscribe-card {
  border: 1px solid #d8e3f0;
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 162, 84, 0.18), transparent 35%),
    linear-gradient(145deg, #ffffff 0%, #f4f8ff 100%);
  box-shadow: 0 16px 30px rgba(18, 28, 42, 0.1);
}

.campaign-subscribe-kicker {
  border-color: #ffd7ae;
  background: #fff3e4;
  color: #8d531f;
}

.campaign-subscribe-copy h2 {
  color: #1d2e45;
}

.campaign-subscribe-copy p {
  color: #607389;
}

.campaign-subscribe-form input {
  border-color: #cedced;
  background: #ffffff;
}

.campaign-subscribe-form .btn {
  border-color: #25364d;
  background: linear-gradient(135deg, #111a25, #273951);
  color: #f3f7ff;
}

@media (max-width: 1080px) {
  .campaign-featured-media {
    border-right: 0;
    border-bottom: 1px solid #dee7f3;
  }
}

@media (max-width: 720px) {
  .campaign-featured-content {
    padding: 14px;
  }

  .campaign-featured-actions {
    gap: 8px;
  }

  .campaign-item-media img {
    height: 206px;
  }
}

/* Campaign page alternative v3: bold premium */
.campaign-page-hero .campaign-hero-card {
  background:
    radial-gradient(circle at 84% 14%, rgba(255, 144, 48, 0.26), transparent 34%),
    radial-gradient(circle at 16% 88%, rgba(83, 108, 153, 0.18), transparent 40%),
    linear-gradient(140deg, #0e131d 0%, #171f2e 54%, #232f45 100%);
  border-color: #2f3a4f;
  box-shadow: 0 24px 46px rgba(9, 14, 22, 0.38);
  color: #edf2fb;
}

.campaign-page-hero .campaign-hero-card .kicker {
  background: linear-gradient(135deg, #ff8a2a, #ffad54);
  border-color: #ffb56a;
  color: #26170a;
}

.campaign-page-hero .campaign-hero-card h1 {
  color: #ffffff;
}

.campaign-page-hero .campaign-hero-card p {
  color: #c1cbe0;
}

.campaign-hero-points span {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #f0f5ff;
  box-shadow: none;
}

.campaign-hero-points i {
  color: #ffb56e;
}

.campaign-featured-card {
  border: 1px solid #2e3c55;
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 152, 62, 0.22), transparent 34%),
    linear-gradient(135deg, #0d131f 0%, #172338 48%, #20304b 100%);
  box-shadow:
    0 28px 54px rgba(8, 12, 20, 0.44),
    0 0 0 1px rgba(64, 84, 118, 0.22);
}

.campaign-featured-card::before {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 16px),
    linear-gradient(110deg, rgba(255, 255, 255, 0.08), transparent 28%);
}

.campaign-featured-media {
  min-height: 330px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: #0e1523;
}

.campaign-featured-media img {
  min-height: 330px;
  filter: saturate(1.04) contrast(1.06);
}

.campaign-featured-content {
  position: relative;
  z-index: 1;
  color: #eaf0fb;
}

.campaign-featured-kicker {
  border-color: rgba(255, 191, 130, 0.55);
  background: rgba(255, 174, 99, 0.14);
  color: #ffdcb8;
}

.campaign-featured-kicker i {
  color: #ffae66;
}

.campaign-featured-live {
  border-color: rgba(87, 232, 150, 0.45);
  background: rgba(23, 182, 103, 0.18);
  color: #bff7d8;
}

.campaign-featured-title {
  color: #ffffff;
}

.campaign-featured-desc {
  color: #c4cee2;
}

.campaign-featured-points span {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #edf3ff;
}

.campaign-featured-points i {
  color: #ffb978;
}

.campaign-featured-timer {
  border-color: rgba(255, 190, 132, 0.4);
  background: rgba(255, 166, 85, 0.14);
}

.campaign-featured-timer strong {
  color: #ffdcb8;
}

.campaign-featured-timer span {
  color: #ffffff;
}

.campaign-featured-btn {
  border-color: #ffa24f;
  background: linear-gradient(135deg, #ff7f22 0%, #ff9e3f 52%, #ff6c2a 100%);
  color: #fff8ef;
  box-shadow: 0 16px 32px rgba(255, 127, 34, 0.34);
  animation: campaign-featured-btn-pulse 2.1s ease-in-out infinite;
}

.campaign-featured-btn:hover {
  border-color: #ffb266;
  box-shadow:
    0 20px 34px rgba(255, 127, 34, 0.44),
    0 0 0 1px rgba(255, 178, 102, 0.55),
    0 0 16px rgba(255, 145, 58, 0.34);
}

.campaign-featured-link {
  color: #e6eeff;
  border-bottom-color: rgba(230, 238, 255, 0.5);
}

.campaign-featured-link:hover {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.88);
}

.campaign-list-head h3 {
  color: #17253a;
}

.campaign-list-head p {
  color: #5f728c;
}

.campaign-item-card {
  border: 1px solid #2f3e59;
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 12%, rgba(255, 150, 58, 0.2), transparent 36%),
    linear-gradient(158deg, #101827 0%, #182438 100%);
  box-shadow: 0 18px 34px rgba(10, 16, 26, 0.28);
}

.campaign-item-card::after {
  background: linear-gradient(90deg, #ff8b2b, #ffc07a, #7c9ccf);
}

.campaign-item-card:hover {
  border-color: #42577a;
  box-shadow:
    0 24px 38px rgba(10, 16, 26, 0.34),
    0 0 0 1px rgba(255, 141, 45, 0.35);
}

.campaign-item-media {
  background: linear-gradient(145deg, #0f1726, #1d2a41);
}

.campaign-item-title {
  color: #f5f8ff;
}

.campaign-item-desc {
  color: #bdc8dd;
}

.campaign-item-kicker {
  border-color: rgba(255, 187, 120, 0.45);
  background: rgba(255, 167, 90, 0.14);
  color: #ffd8af;
}

.campaign-item-live {
  border-color: rgba(99, 230, 158, 0.4);
  background: rgba(27, 186, 107, 0.14);
  color: #c6f8de;
}

.campaign-item-timer {
  border-color: rgba(165, 186, 216, 0.38);
  background: rgba(113, 143, 192, 0.12);
}

.campaign-item-timer strong {
  color: #d9e5fb;
}

.campaign-item-timer span {
  color: #ffffff;
}

.campaign-item-btn {
  border-color: #ff9d4b;
  background: linear-gradient(135deg, #ff8125, #ff9f40);
  color: #fff7ec;
}

.campaign-item-btn:hover {
  border-color: #ffb768;
  box-shadow:
    0 12px 24px rgba(255, 129, 37, 0.32),
    0 0 0 1px rgba(255, 183, 104, 0.44),
    0 0 14px rgba(255, 150, 66, 0.28);
}

.campaign-item-text-link {
  color: #d9e6ff;
  border-bottom-color: rgba(217, 230, 255, 0.45);
}

.campaign-item-text-link:hover {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.8);
}

.campaign-subscribe-card {
  border: 1px solid #31425e;
  background:
    radial-gradient(circle at 86% 18%, rgba(255, 156, 72, 0.2), transparent 34%),
    linear-gradient(145deg, #0f1726 0%, #1b2940 100%);
  box-shadow: 0 18px 34px rgba(10, 16, 26, 0.32);
}

.campaign-subscribe-kicker {
  border-color: rgba(255, 185, 120, 0.52);
  background: rgba(255, 172, 96, 0.14);
  color: #ffd8af;
}

.campaign-subscribe-copy h2 {
  color: #f5f8ff;
}

.campaign-subscribe-copy p {
  color: #c5d0e5;
}

.campaign-subscribe-form input {
  border-color: #3a4b66;
  background: #0f1724;
  color: #e7eefc;
}

.campaign-subscribe-form input::placeholder {
  color: #93a3be;
}

.campaign-subscribe-form .btn {
  border-color: #ff9d4d;
  background: linear-gradient(135deg, #ff8125, #ff9f40);
  color: #fff7ec;
}

@keyframes campaign-featured-btn-pulse {
  0%, 100% {
    box-shadow: 0 14px 28px rgba(255, 127, 34, 0.28);
  }
  50% {
    box-shadow:
      0 20px 34px rgba(255, 127, 34, 0.42),
      0 0 14px rgba(255, 150, 66, 0.28);
  }
}

@media (max-width: 1080px) {
  .campaign-featured-media {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
}

@media (max-width: 720px) {
  .campaign-featured-btn,
  .campaign-item-btn,
  .campaign-subscribe-form .btn {
    animation: none;
  }
}

/* Campaign list fix: always 3-up on desktop + full image visibility */
.campaign-list-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.campaign-item-media {
  background: linear-gradient(145deg, #0f1726, #1d2a41);
  display: grid;
  place-items: center;
  padding: 10px;
}

.campaign-item-media img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 900px) {
  .campaign-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .campaign-list-grid {
    grid-template-columns: 1fr;
  }
}

/* Profile orders: accordion layout */
.order-accordion {
  border-radius: 14px;
  overflow: hidden;
}

.order-accordion .order-head {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  align-items: center;
}

.order-accordion .order-head::-webkit-details-marker {
  display: none;
}

.order-accordion .order-head::marker {
  content: "";
}

.order-head-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.order-head-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}

.order-chevron {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid #d2dbea;
  background: #ffffff;
  color: #3c4f68;
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.order-chevron i {
  font-size: 0.72rem;
}

.order-accordion[open] .order-chevron {
  transform: rotate(180deg);
  border-color: #ff9a46;
  color: #a25821;
  background: #fff3e4;
}

.order-accordion .order-body {
  border-top: 1px solid #dde5f1;
  background: #ffffff;
}

@media (max-width: 860px) {
  .order-accordion .order-head {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .order-accordion .order-head .status-pill {
    justify-self: end;
  }

  .order-accordion .order-head > strong {
    justify-self: end;
  }

  .order-chevron {
    grid-column: 3;
  }
}

@media (max-width: 620px) {
  .order-accordion .order-head {
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 12px;
  }

  .order-accordion .order-head .status-pill,
  .order-accordion .order-head > strong {
    grid-column: 1;
    justify-self: start;
  }

  .order-chevron {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }

  .order-head-meta {
    font-size: 0.72rem;
  }
}

/* Urunler: sidebar category filter + list sort */
.catalog-hero {
  padding: 22px 0 16px;
}

.catalog-hero-card {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255, 164, 74, 0.14), rgba(255, 164, 74, 0) 42%),
    radial-gradient(120% 120% at 0% 100%, rgba(98, 157, 228, 0.12), rgba(98, 157, 228, 0) 40%),
    linear-gradient(160deg, #ffffff, #f6f9ff);
  border: 1px solid #d7e0ef;
  border-radius: 18px;
  box-shadow: 0 16px 32px rgba(15, 22, 34, 0.08);
  color: #1c2738;
  padding: 20px 22px;
}

.catalog-hero-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.catalog-hero-kicker,
.catalog-hero-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 6px 11px;
}

.catalog-hero-kicker {
  background: linear-gradient(160deg, #ffab58, #ff8f3a);
  border: 1px solid #eb8031;
  color: #ffffff;
}

.catalog-hero-count {
  background: #eff4fc;
  border: 1px solid #d7e1ef;
  color: #395170;
}

.catalog-hero-card h1 {
  margin: 0 0 6px;
  font-size: clamp(1.42rem, 2.25vw, 2rem);
  color: #162033;
  letter-spacing: -0.01em;
}

.catalog-hero-card p {
  margin: 0;
  max-width: 65ch;
  color: #5a667b;
  font-size: 0.94rem;
  line-height: 1.55;
}

.catalog-hero-search {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.catalog-hero-search input {
  border: 1px solid #cfd9e8;
  border-radius: 12px;
  background: #ffffff;
}

.catalog-hero-search input:focus {
  border-color: #ff9c4a;
  box-shadow: 0 0 0 3px rgba(255, 156, 74, 0.18);
}

.catalog-hero-search-btn {
  min-width: 114px;
  border-radius: 12px;
  background: linear-gradient(160deg, #151a25, #202a3d);
  box-shadow: 0 10px 18px rgba(20, 30, 48, 0.2);
}

.catalog-hero-search-btn:hover {
  transform: translateY(-1px);
}

.catalog-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.catalog-sidebar {
  position: sticky;
  top: 124px;
  display: grid;
  gap: 10px;
}

.catalog-filter-card {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #d9e2f0;
  box-shadow: 0 10px 22px rgba(16, 21, 31, 0.07);
}

.catalog-filter-card h3 {
  margin: 0 0 10px;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #263447;
}

.catalog-cat-list {
  display: grid;
  gap: 8px;
}

.catalog-cat-link {
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
  color: #2a394e;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.catalog-cat-link span {
  font-size: 0.84rem;
  line-height: 1.25;
}

.catalog-cat-link b {
  min-width: 32px;
  text-align: center;
  font-size: 0.73rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 4px 8px;
  background: #f1f6fd;
  color: #375071;
}

.catalog-cat-link:hover {
  border-color: #b9c9df;
  transform: translateY(-1px);
}

.catalog-cat-link.active {
  border-color: #ff8e37;
  box-shadow: 0 0 0 2px rgba(255, 142, 55, 0.16);
}

.catalog-cat-link.active b {
  background: #fff0e3;
  color: #a75a21;
}

.catalog-clear-btn {
  width: 100%;
}

.catalog-advanced-card {
  padding: 14px;
}

.catalog-advanced-form {
  display: grid;
  gap: 10px;
}

.catalog-advanced-form label {
  display: grid;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #344a68;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.catalog-advanced-form input[type="number"],
.catalog-advanced-form select {
  height: 38px;
  border-radius: 10px;
  border: 1px solid #d5dfed;
  background: #ffffff;
  color: #22344f;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0 10px;
}

.catalog-advanced-form input[type="number"]:focus,
.catalog-advanced-form select:focus {
  outline: none;
  border-color: #ff9a46;
  box-shadow: 0 0 0 3px rgba(255, 154, 70, 0.14);
}

.catalog-range-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.catalog-checkline {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.8rem !important;
  color: #3b4e68 !important;
  font-weight: 600 !important;
}

.catalog-checkline input {
  width: 16px;
  height: 16px;
  accent-color: #ff8f39;
}

.catalog-filter-submit {
  width: 100%;
  border-radius: 10px;
}

.catalog-inline-reset {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  font-size: 0.78rem;
  color: #5b6f8d;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.catalog-content {
  min-width: 0;
}

.catalog-toolbar {
  margin-bottom: 14px;
  border: 1px solid #d9e2f0;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(16, 21, 31, 0.07);
  background: linear-gradient(160deg, #ffffff, #f7faff);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.catalog-toolbar-count {
  font-size: 0.9rem;
  color: #4d5b70;
}

.catalog-toolbar-count strong {
  color: #172133;
  font-size: 1rem;
}

.catalog-sort-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.catalog-sort-form label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #2e425f;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.catalog-sort-form select {
  min-width: 180px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #cfdaea;
  background: #ffffff;
  color: #1d2c42;
  font-weight: 600;
  padding: 0 12px;
}

.catalog-products-grid {
  margin-top: 0;
}

.product-rating-inline {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.product-rating-inline .stars {
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  color: #d6a73b;
}

.product-rating-inline small {
  color: #66748a;
  font-size: 0.76rem;
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .catalog-layout {
    grid-template-columns: 1fr;
  }

  .catalog-sidebar {
    position: static;
  }

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

  .catalog-range-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .catalog-hero-card {
    padding: 16px 14px;
    border-radius: 14px;
  }

  .catalog-hero-search {
    grid-template-columns: 1fr;
  }

  .catalog-hero-search-btn {
    width: 100%;
  }

  .catalog-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .catalog-sort-form {
    justify-content: space-between;
  }

  .catalog-sort-form select {
    min-width: 0;
    width: 100%;
  }

  .catalog-cat-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .catalog-sidebar {
    display: none;
  }

  .catalog-sort-form {
    display: none;
  }

  .catalog-toolbar {
    justify-content: center;
    padding: 10px 12px;
  }

  .catalog-toolbar-count {
    width: 100%;
    text-align: center;
  }
}