:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --line: #e5e7eb;
  --text: #111827;
  --muted: #6b7280;
  --muted-2: #94a3b8;
  --shadow: 0 8px 30px rgba(15, 23, 42, .06);
  --shadow-soft: 0 12px 24px rgba(15, 23, 42, .05);
  --container: 1280px;
  --radius-xl: 24px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

* {
  box-sizing: border-box
}

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

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
}

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

button,
input {
  font: inherit
}

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

.page-shell {
  min-height: 100vh;
  padding: 18px 0 40px;
}

.site-frame {
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.site-main {
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  padding: 22px 0 28px;
}

/* HEADER */
.site-header {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-top {
  min-height: 76px;
  display: grid;
  grid-template-columns: 180px minmax(260px, 1fr) auto auto auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.03em;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background:
    radial-gradient(circle at 30% 30%, #ffffff 0 12%, transparent 13%),
    linear-gradient(135deg, #111827, #334155);
  position: relative;
  flex: 0 0 auto;
}

.brand-mark::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 8px;
}

.search-box {
  position: relative;
  min-width: 0;
}

.search-box input {
  width: 100%;
  height: 48px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 0 18px 0 48px;
  outline: none;
}

.search-box input:focus {
  background: #fff;
  border-color: #cbd5e1;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, .12);
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  opacity: .6;
  pointer-events: none;
}

.header-link,
.header-pill {
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  transition: .18s ease;
}

.header-link:hover,
.header-pill:hover {
  background: #f8fafc;
}

.header-pill {
  border: 1px solid var(--line);
  gap: 8px;
}

.flag-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(#b91c1c 0 33%, #fff 33% 66%, #1d4ed8 66% 100%);
  flex: 0 0 auto;
}

.cart-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-left: 8px;
}

.main-nav {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.main-nav::-webkit-scrollbar {
  display: none
}

.nav-link {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
}

.nav-link:hover {
  background: #f8fafc
}

.nav-link.active {
  background: #111827;
  color: #fff;
}

.nav-link-secondary {
  color: #334155
}

/* COMMON */
.hero-section,
.popular-section,
.product-section {
  margin-bottom: 22px;
}

.section-title {
  margin: 0;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.section-subtitle {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

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

.section-head-split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}

.btn {
  height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  transition: .18s ease;
}

.btn-light {
  background: #fff;
  color: #111827;
}

.btn-ghost-light {
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  background: rgba(255, 255, 255, .06);
}

.btn-outline {
  height: 42px;
  border: 1px solid var(--line);
  background: #fff;
  color: #0f172a;
}

.btn-outline:hover {
  background: #f8fafc;
}

/* HERO */
.hero-card {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 82% 20%, rgba(59, 130, 246, .18), transparent 22%),
    radial-gradient(circle at 70% 70%, rgba(16, 185, 129, .14), transparent 24%),
    linear-gradient(135deg, #0f172a 0%, #111827 42%, #1e293b 100%);
  color: #fff;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 20px;
  padding: 28px;
  box-shadow: var(--shadow-soft);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
  margin-bottom: 14px;
}

.hero-title {
  margin: 0;
  font-size: 40px;
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 620px;
}

.hero-desc {
  margin: 14px 0 0;
  max-width: 540px;
  color: rgba(255, 255, 255, .78);
  font-size: 15px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-stack {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 160px;
}

.float-card {
  position: absolute;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
  color: #fff;
  padding: 16px;
}

.float-card-a {
  inset: 8px 110px 58px 20px;
  transform: rotate(-6deg);
}

.float-card-b {
  inset: 40px 28px 22px 150px;
  transform: rotate(8deg);
}

.float-label {
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 8px;
}

.float-value {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.float-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.float-pills span {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px;
}

/* POPULAR */
.popular-section {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--shadow-soft);
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.brand-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 14px;
  transition: .18s ease;
}

.brand-card:hover,
.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
  border-color: #d7deea;
}

.brand-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.brand-logo,
.product-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.brand-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.rating-pill {
  font-size: 12px;
  font-weight: 700;
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #dcfce7;
  padding: 6px 8px;
  border-radius: 999px;
}

.brand-name {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  min-height: 40px;
}

.brand-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: #64748b;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.chip {
  height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

.chip.active {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

/* PRODUCT SECTIONS */
.product-section {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--shadow-soft);
}

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

.product-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: .18s ease;
}

.product-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.product-logo {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  font-size: 20px;
}

.product-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.pill {
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}

.pill.rating {
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #dcfce7;
}

.pill.neutral {
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.product-name {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 8px;
  min-height: 40px;
}

.product-desc {
  font-size: 13px;
  color: #64748b;
  min-height: 36px;
  margin-bottom: 14px;
}

.product-bottom {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #eef2f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mini-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #94a3b8;
  margin-bottom: 4px;
  font-weight: 700;
}

.product-price {
  font-size: 14px;
  font-weight: 800;
}

.btn-mini {
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

/* FEATURE COVER */
.feature-cover {
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 10%, rgba(96, 165, 250, .16), transparent 18%),
    linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #fff;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  min-height: 190px;
}

.feature-copy {
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-copy h3 {
  margin: 0;
  font-size: 30px;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.feature-copy p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .76);
  font-size: 14px;
  max-width: 480px;
}

.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.feature-tags span {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .08);
  font-size: 12px;
  font-weight: 600;
}

.feature-visual {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cover-stack {
  position: relative;
  width: 100%;
  max-width: 320px;
  height: 130px;
}

.cover-tile {
  position: absolute;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

.tile-a {
  inset: 0 90px 30px 0;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  transform: rotate(-8deg);
}

.tile-b {
  inset: 18px 20px 0 110px;
  background: linear-gradient(135deg, #8b5cf6, #4f46e5);
  transform: rotate(10deg);
}

/* FOOTER */
.site-footer {
  border-top: 1px solid var(--line);
  background: #fff;
}

.footer-inner {
  padding: 26px 0 24px;
}

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

.footer-col h4 {
  margin: 0 0 12px;
  font-size: 15px;
}

.footer-col a {
  display: block;
  color: #64748b;
  font-size: 14px;
  margin: 8px 0;
}

.footer-bottom {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #64748b;
  font-size: 14px;
}

.footer-legal {
  display: flex;
  gap: 14px;
}

/* LOGO COLORS */
.logo-visa,
.p-visa {
  background: linear-gradient(135deg, #2563eb, #1d4ed8)
}

.logo-amazon,
.p-amazon {
  background: linear-gradient(135deg, #f59e0b, #ea580c)
}

.logo-doordash,
.p-doordash {
  background: linear-gradient(135deg, #ef4444, #dc2626)
}

.logo-apple,
.p-apple {
  background: linear-gradient(135deg, #111827, #334155)
}

.logo-mastercard,
.p-master {
  background: linear-gradient(135deg, #7c3aed, #4f46e5)
}

.logo-uber {
  background: linear-gradient(135deg, #059669, #10b981)
}

.p-airbnb {
  background: linear-gradient(135deg, #f43f5e, #e11d48)
}

.p-steam {
  background: linear-gradient(135deg, #0ea5e9, #1d4ed8)
}

.p-playstation {
  background: linear-gradient(135deg, #2563eb, #1e40af)
}

.p-xbox {
  background: linear-gradient(135deg, #16a34a, #15803d)
}

.p-razer {
  background: linear-gradient(135deg, #22c55e, #15803d)
}

/* RESPONSIVE */
@media (max-width:1180px) {
  .header-top {
    grid-template-columns: 170px minmax(180px, 1fr) auto auto auto auto;
  }

  .header-login {
    display: none
  }

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

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

  .hero-card,
  .feature-cover {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    justify-content: flex-start
  }
}

@media (max-width:980px) {
  .header-top {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "brand locale cart"
      "search search search";
    gap: 12px;
  }

  .brand {
    grid-area: brand
  }

  .search-box {
    grid-area: search
  }

  .header-country,
  .header-help,
  .header-login {
    display: none
  }

  .header-locale {
    grid-area: locale
  }

  .header-cart {
    grid-area: cart
  }

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

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

  .section-head-split {
    flex-direction: column;
    align-items: flex-start;
  }

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

@media (max-width:640px) {

  .container,
  .site-frame {
    width: min(var(--container), calc(100% - 16px));
  }

  .page-shell {
    padding: 10px 0 24px;
  }

  .site-frame {
    border-radius: 18px
  }

  .header-top {
    padding: 12px
  }

  .brand {
    font-size: 18px
  }

  .brand-mark {
    width: 30px;
    height: 30px
  }

  .search-box input {
    height: 44px
  }

  .header-link,
  .header-pill {
    height: 38px;
    padding: 0 12px;
    font-size: 13px
  }

  .main-nav {
    min-height: 50px;
    padding: 0 8px
  }

  .nav-link {
    height: 36px;
    padding: 0 14px;
    font-size: 13px
  }

  .site-main {
    padding: 14px 0 20px
  }

  .popular-section,
  .product-section {
    padding: 16px;
    border-radius: 18px;
  }

  .hero-card {
    min-height: auto;
    padding: 18px;
    border-radius: 18px;
  }

  .hero-title {
    font-size: 28px
  }

  .hero-desc {
    font-size: 14px
  }

  .hero-stack {
    height: 126px
  }

  .float-card-a {
    inset: 0 78px 36px 0
  }

  .float-card-b {
    inset: 34px 0 0 100px
  }

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

  .brand-name,
  .product-name,
  .product-desc {
    min-height: auto;
  }

  .feature-copy {
    padding: 18px
  }

  .feature-copy h3 {
    font-size: 24px
  }

  .section-title {
    font-size: 24px
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* TRUST STRIP */
.trust-strip {
  margin: 24px auto 22px;
  padding: 18px 20px;
  max-width: 980px;
}

.trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}

.trust-col {
  min-width: 0;
  display: flex;
  align-items: center;
}

.trust-score-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
}

.trust-score {
  font-size: 64px;
  line-height: .9;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: #022c2c;
  white-space: nowrap;
}

.trust-score span {
  font-size: .5em;
  font-weight: 800;
}

.trustpilot-meta {
  min-width: 0;
}

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

.trustpilot-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: #052e2b;
}

.tp-star {
  color: #00b67a;
  font-size: 1.1em;
  line-height: 1;
}

.tp-stars {
  display: flex;
  gap: 3px;
}

.tp-stars span {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00b67a;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  font-weight: 800;
}

.trust-note {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  color: #052e2b;
}

.trust-stats {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 0;
}

.trust-big {
  font-size: 28px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #052e2b;
}

.trust-small {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.3;
  color: #0b3a37;
}

@media (max-width:1180px) {
  .trust-strip {
    max-width: 920px;
  }
}

@media (max-width:980px) {
  .trust-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .trust-col {
    justify-content: center;
  }

  .trust-score-wrap {
    justify-content: center;
  }

  .trust-stats {
    text-align: center;
    align-items: center;
  }
}

@media (max-width:640px) {
  .trust-strip {
    margin: 20px auto;
    padding: 14px 10px;
    max-width: 100%;
  }

  .trust-score-wrap {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .trust-score {
    font-size: 52px;
  }

  .trustpilot-brand {
    font-size: 17px;
    justify-content: center;
  }

  .trustpilot-row {
    justify-content: center;
  }

  .tp-stars span {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }

  .trust-note {
    font-size: 15px;
    text-align: center;
  }

  .trust-big {
    font-size: 24px;
    text-align: center;
  }

  .trust-small {
    font-size: 15px;
    text-align: center;
  }
}

/* HOW IT WORKS */
.how-section {
  margin-bottom: 22px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--shadow-soft);
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.how-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 20px;
  min-width: 0;
}

.how-step {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111827;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 14px;
}

.how-card h3 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.how-card p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.5;
}

/* TRAVEL VARIANT */
.feature-cover-travel {
  background:
    radial-gradient(circle at 80% 10%, rgba(251, 191, 36, .18), transparent 18%),
    linear-gradient(135deg, #0f172a 0%, #1f2937 45%, #3f3f46 100%);
}

.travel-tile-a {
  inset: 0 90px 30px 0;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  transform: rotate(-8deg);
}

.travel-tile-b {
  inset: 18px 20px 0 110px;
  background: linear-gradient(135deg, #f59e0b, #ea580c);
  transform: rotate(10deg);
}

/* EXTRA LOGOS */
.p-master {
  background: linear-gradient(135deg, #8b5cf6, #4f46e5);
}

.p-starbucks {
  background: linear-gradient(135deg, #059669, #047857);
}

.p-chipotle {
  background: linear-gradient(135deg, #b91c1c, #7f1d1d);
}

@media (max-width:1180px) {
  .trust-grid {
    grid-template-columns: 1fr;
  }

  .trust-stats {
    padding-left: 0;
  }
}

@media (max-width:980px) {
  .how-grid {
    grid-template-columns: 1fr;
  }

  .trust-score {
    font-size: 72px;
  }

  .trust-big {
    font-size: 40px;
  }

  .trust-small,
  .trust-note {
    font-size: 24px;
  }
}

@media (max-width:640px) {
  .trust-strip {
    padding: 18px 4px 22px;
  }

  .trust-score-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .trust-score {
    font-size: 60px;
  }

  .trustpilot-brand {
    font-size: 20px;
  }

  .tp-stars span {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }

  .trust-note {
    font-size: 20px;
  }

  .trust-big {
    font-size: 30px;
  }

  .trust-small {
    font-size: 20px;
  }

  .how-section {
    padding: 16px;
    border-radius: 18px;
  }

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

  .how-card h3 {
    font-size: 20px;
  }
}

/* APP PROMO */
.app-promo {
  margin-bottom: 22px;
}

.app-promo-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--shadow-soft);
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 22px;
  align-items: center;
  overflow: hidden;
}

.app-promo-copy {
  min-width: 0;
}

.app-promo-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.btn-dark {
  background: #111827;
  color: #fff;
}

.btn-dark:hover {
  background: #0b1220;
}

.app-promo-visual {
  min-height: 320px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-mockup {
  position: absolute;
  width: 180px;
  height: 320px;
  border-radius: 34px;
  background: #0f172a;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
}

.phone-back {
  transform: translateX(-52px) rotate(-10deg);
  opacity: .95;
  background: linear-gradient(135deg, #1e293b, #334155);
}

.phone-front {
  transform: translateX(42px) rotate(8deg);
  background: #0b1220;
  padding: 12px;
}

.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 26px;
  background: linear-gradient(180deg, #f8fafc, #e2e8f0);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.phone-bar {
  height: 14px;
  width: 72px;
  border-radius: 999px;
  background: #0f172a;
  margin: 0 auto 4px;
  opacity: .9;
}

.phone-hero {
  height: 96px;
  border-radius: 20px;
  background: linear-gradient(135deg, #111827, #334155);
}

.phone-list {
  display: grid;
  gap: 10px;
}

.phone-list span {
  display: block;
  height: 16px;
  border-radius: 999px;
  background: #cbd5e1;
}

.phone-list span:nth-child(1) {
  width: 86%
}

.phone-list span:nth-child(2) {
  width: 72%
}

.phone-list span:nth-child(3) {
  width: 64%
}

.phone-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.phone-chips span {
  width: 58px;
  height: 28px;
  border-radius: 999px;
  background: #94a3b8;
  opacity: .8;
}

/* REFILL VARIANT */
.feature-cover-refill {
  background:
    radial-gradient(circle at 80% 10%, rgba(34, 197, 94, .18), transparent 18%),
    linear-gradient(135deg, #111827 0%, #1f2937 42%, #0f766e 100%);
}

.refill-tile-a {
  inset: 0 90px 30px 0;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  transform: rotate(-8deg);
}

.refill-tile-b {
  inset: 18px 20px 0 110px;
  background: linear-gradient(135deg, #06b6d4, #0ea5e9);
  transform: rotate(10deg);
}

/* EXTRA PRODUCT LOGOS */
.p-esim-global {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
}

.p-esim-eu {
  background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
}

.p-esim-asia {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
}

.p-esim-us {
  background: linear-gradient(135deg, #dc2626, #991b1b);
}

.p-att {
  background: linear-gradient(135deg, #2563eb, #0f172a);
}

.p-tmobile {
  background: linear-gradient(135deg, #ec4899, #be185d);
}

.p-verizon {
  background: linear-gradient(135deg, #111827, #ef4444);
}

.p-lyca {
  background: linear-gradient(135deg, #f59e0b, #ea580c);
}

@media (max-width:1180px) {
  .app-promo-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width:640px) {
  .app-promo-card {
    padding: 16px;
    border-radius: 18px;
  }

  .app-promo-visual {
    min-height: 260px;
  }

  .phone-mockup {
    width: 146px;
    height: 258px;
    border-radius: 28px;
  }

  .phone-front {
    padding: 10px;
  }

  .phone-screen {
    border-radius: 22px;
    padding: 12px;
    gap: 10px;
  }

  .phone-back {
    transform: translateX(-36px) rotate(-9deg);
  }

  .phone-front {
    transform: translateX(30px) rotate(7deg);
  }
}

/* FAQ */
.faq-section {
  margin-bottom: 22px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--shadow-soft);
}

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

.faq-item {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  transition: .18s ease;
}

.faq-item.active {
  border-color: #d6dce6;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.faq-question {
  width: 100%;
  border: 0;
  background: #fff;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  color: #111827;
  cursor: pointer;
}

.faq-question span:first-child {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.faq-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: #334155;
  transition: .18s ease;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
  background: #111827;
  color: #fff;
  border-color: #111827;
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .22s ease;
}

.faq-item.active .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer>p {
  overflow: hidden;
  margin: 0;
  padding: 0 20px 20px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}

/* NEWSLETTER */
.newsletter-section {
  margin-bottom: 22px;
}

.newsletter-card {
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 85% 20%, rgba(59, 130, 246, .12), transparent 18%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--shadow-soft);
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 20px;
  align-items: center;
}

.newsletter-copy {
  min-width: 0;
}

.newsletter-form {
  display: flex;
  gap: 12px;
  align-items: center;
}

.newsletter-form input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 0 18px;
  outline: none;
  font-size: 15px;
}

.newsletter-form input:focus {
  border-color: #cbd5e1;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, .12);
}

@media (max-width:1180px) {
  .newsletter-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width:640px) {

  .faq-section,
  .newsletter-card {
    padding: 16px;
    border-radius: 18px;
  }

  .faq-question {
    padding: 16px;
  }

  .faq-answer>p {
    padding: 0 16px 16px;
  }

  .faq-question span:first-child {
    font-size: 15px;
  }

  .newsletter-form {
    flex-direction: column;
    align-items: stretch;
  }

  .newsletter-form input,
  .newsletter-form .btn {
    width: 100%;
  }
}

/* HEADER ENHANCED */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
}

.main-nav-wrap {
  position: relative;
  background: rgba(255, 255, 255, .96);
}

.nav-item {
  position: relative;
  flex: 0 0 auto;
}

.nav-caret {
  font-size: 11px;
  opacity: .7;
  margin-left: 8px;
}

.search-box {
  position: relative;
}

.search-box input {
  padding-right: 64px;
  transition: .18s ease;
}

.search-box:hover input {
  background: #fff;
}

.search-shortcut {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  height: 28px;
  min-width: 38px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}

/* PANELS */
.mega-menu,
.mini-menu {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.mega-menu {
  top: 100%;
  padding: 10px 0 0;
}

.mini-menu {
  top: 100%;
  padding: 10px 0 0;
}

.mega-menu.open,
.mini-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mega-menu-inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr 1.2fr;
  gap: 18px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .10);
  padding: 20px;
}

.mega-col {
  min-width: 0;
}

.mega-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #94a3b8;
  font-weight: 800;
  margin-bottom: 10px;
}

.mega-link {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  transition: .16s ease;
}

.mega-link:hover {
  background: #f8fafc;
}

.mega-col-featured {
  border-left: 1px solid #eef2f7;
  padding-left: 18px;
}

.mega-brand-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 14px;
  transition: .16s ease;
}

.mega-brand-card:hover {
  background: #f8fafc;
}

.mega-brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  flex: 0 0 auto;
}

.mega-brand-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mega-brand-copy strong {
  font-size: 14px;
  line-height: 1.25;
  color: #0f172a;
}

.mega-brand-copy small {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

.mini-menu-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .10);
  padding: 14px;
}

.mini-link {
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.mini-link:hover {
  background: #f8fafc;
}

/* HEADER ACTIVE STATES */
.nav-item.menu-open>.nav-link:not(.active),
.nav-item:hover>.nav-link:not(.active) {
  background: #f8fafc;
}

.nav-link.active,
.nav-item.menu-open>.nav-link.active,
.nav-item:hover>.nav-link.active {
  background: #111827;
  color: #fff;
}

/* MOBILE */
@media (max-width:980px) {
  .search-shortcut {
    display: none;
  }

  .mega-menu,
  .mini-menu {
    position: static;
    padding: 8px 12px 10px;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .mega-menu.open,
  .mini-menu.open {
    display: block;
  }

  .mega-menu-inner {
    grid-template-columns: 1fr;
    gap: 14px;
    border-radius: 20px;
    padding: 16px;
  }

  .mega-col-featured {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid #eef2f7;
    padding-top: 14px;
  }

  .mini-menu-inner {
    border-radius: 18px;
    padding: 12px;
  }
}

@media (max-width:640px) {
  .mega-link {
    padding: 9px 10px;
    font-size: 13px;
  }

  .mini-link {
    height: 36px;
    font-size: 13px;
  }

  .mega-brand-card {
    padding: 8px;
  }

  .mega-brand-logo {
    width: 38px;
    height: 38px;
  }
}

/* HERO / QUICK RAIL TUNE */
.hero-section {
  margin-bottom: 18px;
}

.hero-card {
  min-height: 188px;
  padding: 24px;
  border-radius: 20px;
}

.hero-title {
  font-size: 36px;
  max-width: 560px;
}

.hero-desc {
  max-width: 500px;
}

.hero-actions {
  margin-top: 18px;
}

.quick-rail {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.quick-rail-item {
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
}

.quick-rail-item:hover {
  background: #f8fafc;
}

.quick-rail-item.active {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

/* POPULAR TUNE */
.popular-section {
  padding: 18px;
  margin-bottom: 22px;
}

.compact-brand-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.brand-card {
  padding: 12px;
  border-radius: 16px;
}

.brand-card-top {
  margin-bottom: 12px;
}

.brand-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.brand-name {
  font-size: 14px;
  min-height: 36px;
}

.brand-meta {
  font-size: 12px;
}

/* PRODUCT DENSITY */
.product-section {
  padding: 18px;
}

.product-grid {
  gap: 12px;
}

.product-card {
  padding: 12px;
  border-radius: 18px;
}

.product-card-top {
  margin-bottom: 12px;
}

.product-logo {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font-size: 18px;
}

.product-name {
  font-size: 15px;
  min-height: 38px;
}

.product-desc {
  font-size: 12.5px;
  min-height: 34px;
  margin-bottom: 12px;
}

.product-bottom {
  padding-top: 10px;
}

.btn-mini {
  height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

.section-title {
  font-size: 26px;
}

.section-subtitle {
  font-size: 13.5px;
}

/* FEATURE COVER DENSITY */
.feature-cover {
  min-height: 174px;
  margin-bottom: 16px;
  border-radius: 18px;
}

.feature-copy {
  padding: 20px;
}

.feature-copy h3 {
  font-size: 27px;
}

.feature-copy p {
  font-size: 13.5px;
}

.feature-tags span {
  padding: 7px 10px;
  font-size: 11.5px;
}

/* FAQ / NEWSLETTER ALIGN */
.faq-section,
.newsletter-card,
.how-section,
.app-promo-card {
  padding: 18px;
}

/* DESKTOP WIDE */
@media (min-width:1181px) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* TABLET */
@media (max-width:1180px) {
  .compact-brand-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width:980px) {
  .hero-card {
    grid-template-columns: 1fr;
  }

  .hero-title {
    font-size: 31px;
  }

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

@media (max-width:640px) {
  .hero-card {
    min-height: auto;
    padding: 18px;
    border-radius: 18px;
  }

  .hero-title {
    font-size: 27px;
  }

  .quick-rail {
    gap: 8px;
  }

  .quick-rail-item {
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }

  .popular-section,
  .product-section,
  .faq-section,
  .how-section,
  .newsletter-card,
  .app-promo-card {
    padding: 16px;
    border-radius: 18px;
  }

  .compact-brand-grid {
    grid-template-columns: 1fr;
  }

  .brand-card,
  .product-card {
    padding: 12px;
  }

  .section-title {
    font-size: 23px;
  }
}

/* SEARCH */
.search-section {
  margin-bottom: 22px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

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

.search-count {
  font-size: 13px;
  color: #64748b;
}

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

.search-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: #fff;
  transition: .18s ease;
}

.search-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(15, 23, 42, .06);
}

.search-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.search-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
}

.search-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}

.search-price {
  font-size: 13px;
  color: #64748b;
}

@media (max-width:980px) {
  .search-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:640px) {
  .search-grid {
    grid-template-columns: 1fr;
  }
}


/* PRODUCT DETAIL */
.detail-section {
  margin-bottom: 22px;
}

.detail-shell {
  position: relative;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

.detail-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: #334155;
  cursor: pointer;
  font-size: 16px;
  z-index: 2;
}

.detail-close:hover {
  background: #f8fafc;
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
}

.detail-main,
.detail-side {
  min-width: 0;
}

.detail-hero {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.detail-logo-wrap {
  flex: 0 0 auto;
}

.detail-logo {
  width: 88px;
  height: 88px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #f59e0b, #ea580c);
}

.detail-head-copy {
  min-width: 0;
  padding-top: 4px;
}

.detail-head-top {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.detail-title {
  margin: 0;
  font-size: 34px;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.detail-desc {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 15px;
  line-height: 1.55;
  max-width: 720px;
}

.detail-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  background: #fff;
}

.detail-block+.detail-block {
  margin-top: 18px;
}

.detail-label {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 10px;
}

.amount-grid,
.crypto-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.amount-btn,
.crypto-btn {
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: .18s ease;
}

.amount-btn:hover,
.crypto-btn:hover {
  background: #f8fafc;
}

.amount-btn.active,
.crypto-btn.active {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

.detail-summary-card,
.detail-info-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  padding: 18px;
}

.detail-info-card {
  margin-top: 12px;
}

.summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #eef2f7;
  font-size: 14px;
}

.summary-row:last-of-type {
  margin-bottom: 14px;
}

.summary-row span {
  color: #64748b;
}

.summary-row strong {
  color: #0f172a;
  text-align: right;
}

.buy-btn {
  width: 100%;
  height: 50px;
  border-radius: 999px;
  border: 0;
  background: #111827;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 16px;
}

.buy-btn:hover {
  background: #0b1220;
}

.detail-note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: #64748b;
}

.detail-info-card h3 {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.1;
}

.detail-info-card ul {
  margin: 0;
  padding-left: 18px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width:1180px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width:640px) {
  .detail-shell {
    border-radius: 18px;
    padding: 16px;
  }

  .detail-close {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
  }

  .detail-hero {
    flex-direction: column;
    gap: 14px;
  }

  .detail-logo {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    font-size: 26px;
  }

  .detail-title {
    font-size: 28px;
  }

  .detail-desc {
    font-size: 14px;
  }

  .detail-card,
  .detail-summary-card,
  .detail-info-card {
    padding: 16px;
    border-radius: 18px;
  }

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

  .amount-btn,
  .crypto-btn {
    height: 42px;
    font-size: 13px;
  }
}

/* ===================== */
/* PRODUCT PAGE */
/* ===================== */

.product-page {
  margin: 22px 0;
}

.product-page-shell {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 22px;
  padding: 20px;
  box-shadow: var(--shadow-soft);
}

.product-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 520px);
  gap: 24px;
  align-items: start;
}

/* LEFT */
.product-gallery {
  min-width: 0;
}

.product-gallery-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #f3f5f5;
  padding: 18px;
}

.product-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 16px;
}

.product-back-btn:hover {
  background: #f8fafc;
}

.product-art {
  min-height: 500px;
  border-radius: 18px;
  background: #e5e9e7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-art-logo {
  width: min(420px, 88%);
  height: 240px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 88px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* RIGHT */
.product-purchase {
  min-width: 0;
  padding-top: 2px;
}

.product-breadcrumb {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 12px;
  line-height: 1.4;
}

.product-page-title {
  font-size: 44px;
  line-height: 1.04;
  letter-spacing: -0.05em;
  font-weight: 800;
  color: #052e2b;
  margin: 0;
  word-break: break-word;
}

.product-page-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 16px;
  font-weight: 700;
  flex-wrap: wrap;
}

.rating-stars {
  color: #f4b400;
  letter-spacing: 1px;
}

.product-badges-row {
  margin-top: 14px;
}

.product-info-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 10px;
  background: #f7f7f7;
  border: 1px solid #e5e7eb;
  font-size: 14px;
  color: #52525b;
  max-width: 100%;
}

.product-page-desc {
  margin: 18px 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: #52525b;
}

.product-notice {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #edf3ef;
  color: #0b3a37;
  font-size: 15px;
  line-height: 1.5;
}

.product-input-block {
  margin-top: 22px;
}

.product-input-label {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #052e2b;
  margin-bottom: 10px;
}

.product-amount-input {
  width: 100%;
  max-width: 420px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 16px;
  background: #fff;
  font-size: 18px;
  color: #111827;
  outline: none;
}

.product-amount-input:focus {
  border-color: #cbd5e1;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, .12);
}

.product-action-row {
  display: flex;
  gap: 14px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.add-cart-btn {
  min-width: 260px;
  height: 56px;
  border-radius: 999px;
  border: 0;
  background: #ff0033;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  padding: 0 24px;
}

.add-cart-btn:hover {
  background: #df002d;
}

.gift-btn {
  height: 56px;
  border-radius: 999px;
  border: 0;
  padding: 0 22px;
  background: #f2f3f3;
  color: #052e2b;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.gift-btn:hover {
  background: #e7ebea;
}

.product-crypto-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #eef2f7;
}

.crypto-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.crypto-dot.btc {
  background: #f7931a
}

.crypto-dot.eth {
  background: #627eea
}

.crypto-dot.usdt {
  background: #26a17b
}

.crypto-dot.usdc {
  background: #2775ca
}

.crypto-dot.sol {
  background: linear-gradient(135deg, #14f195, #9945ff)
}

.crypto-dot.matic {
  background: #8247e5
}

.product-meta-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #eef2f7;
}

.meta-feature {
  text-align: center;
  font-size: 15px;
  color: #52525b;
}

/* ===================== */
/* TABLET */
/* ===================== */

@media (max-width:1100px) {
  .product-page-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .product-art {
    min-height: 340px;
  }

  .product-art-logo {
    width: min(340px, 86%);
    height: 180px;
    font-size: 64px;
  }

  .product-page-title {
    font-size: 36px;
  }

  .product-page-desc {
    font-size: 16px;
    margin-top: 14px;
  }

  .product-notice {
    margin-top: 14px;
    padding: 14px 16px;
    font-size: 14px;
  }

  .product-input-block {
    margin-top: 18px;
  }

  .product-amount-input {
    max-width: none;
  }

  .product-action-row {
    gap: 10px;
  }

  .add-cart-btn,
  .gift-btn {
    flex: 1 1 220px;
  }

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

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

@media (max-width:640px) {
  .product-page {
    margin: 14px 0 20px;
  }

  .product-page-shell {
    padding: 14px;
    border-radius: 18px;
  }

  .product-page-grid {
    gap: 16px;
  }

  .product-gallery-card {
    border-radius: 18px;
    padding: 12px;
  }

  .product-back-btn {
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
    margin-bottom: 12px;
  }

  .product-art {
    min-height: 220px;
    border-radius: 14px;
  }

  .product-art-logo {
    width: min(220px, 84%);
    height: 120px;
    font-size: 42px;
    border-radius: 10px;
  }

  .product-breadcrumb {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .product-page-title {
    font-size: 26px;
    line-height: 1.08;
  }

  .product-page-rating {
    margin-top: 10px;
    font-size: 14px;
    gap: 8px;
  }

  .product-info-badge {
    min-height: 30px;
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 9px;
  }

  .product-page-desc {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 14px;
  }

  .product-notice {
    font-size: 13px;
    line-height: 1.45;
    border-radius: 14px;
    padding: 12px 14px;
  }

  .product-input-label {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .product-amount-input {
    height: 46px;
    font-size: 16px;
    border-radius: 12px;
    padding: 0 14px;
  }

  .product-action-row {
    flex-direction: column;
    gap: 10px;
  }

  .add-cart-btn,
  .gift-btn {
    width: 100%;
    min-width: 0;
    height: 48px;
    font-size: 14px;
    padding: 0 16px;
  }

  .product-crypto-row {
    margin-top: 16px;
    padding-top: 14px;
    gap: 8px;
  }

  .crypto-dot {
    width: 26px;
    height: 26px;
  }

  .product-meta-features {
    grid-template-columns: 1fr;
    margin-top: 18px;
    padding-top: 14px;
    gap: 10px;
  }

  .meta-feature {
    text-align: left;
    font-size: 13px;
  }
}



/* ===================== */
/* CART PAGE */
/* ===================== */

.cart-page {
  margin: 22px 0;
}

.cart-shell {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

.cart-shell-large {
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

.cart-items {
  padding: 0 0 8px;
}

.empty-cart {
  padding: 28px;
  color: #64748b;
  font-size: 15px;
}

.cart-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 30px 32px;
  border-bottom: 1px solid #e5e7eb;
}

.cart-row-main {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
}

.cart-row-logo {
  width: 64px;
  height: 64px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  flex: 0 0 auto;
}

.cart-row-copy {
  min-width: 0;
}

.cart-row-title {
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #052e2b;
}

.cart-row-price {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 500;
  color: #575757;
}

.cart-row-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.qty-box {
  height: 54px;
  min-width: 136px;
  border: 1px solid #d8ddd9;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: #fff;
}

.qty-btn {
  width: 34px;
  height: 34px;
  border: 0;
  background: none;
  color: #40524f;
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.qty-btn:hover {
  background: #f3f5f5;
}

.qty-value {
  min-width: 30px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #4b4b4b;
}

.cart-remove-btn {
  border: 0;
  background: none;
  color: #ef4444;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.cart-total-panel {
  border-top: 1px solid #dfe5e2;
  border-bottom: 1px solid #dfe5e2;
  padding: 28px 32px;
}

.cart-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.cart-total-row span {
  font-size: 32px;
  font-weight: 800;
  color: #052e2b;
}

.cart-total-row strong {
  font-size: 32px;
  font-weight: 800;
  color: #052e2b;
}

.cart-footer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding: 24px 32px 30px;
}

.cart-pill-btn {
  height: 78px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

.cart-keep-btn {
  background: #eceeed;
  color: #052e2b;
}

.cart-checkout-btn {
  background: #ff0033;
  color: #fff;
}

.cart-checkout-btn:hover {
  background: #df002d;
}

/* CART PAGE RESPONSIVE */
@media (max-width:980px) {
  .cart-row {
    grid-template-columns: 1fr;
    padding: 24px 22px;
  }

  .cart-row-actions {
    align-items: flex-start;
  }

  .cart-total-panel {
    padding: 22px;
  }

  .cart-footer-actions {
    padding: 20px 22px 24px;
    gap: 16px;
  }

  .cart-pill-btn {
    height: 64px;
    font-size: 22px;
  }
}

@media (max-width:640px) {
  .cart-shell-large {
    border-radius: 18px;
  }

  .cart-row {
    padding: 18px 16px;
  }

  .cart-row-main {
    gap: 14px;
  }

  .cart-row-logo {
    width: 52px;
    height: 52px;
    font-size: 22px;
  }

  .cart-row-title {
    font-size: 22px;
  }

  .cart-row-price {
    font-size: 18px;
  }

  .qty-box {
    height: 46px;
    min-width: 120px;
  }

  .qty-value {
    font-size: 18px;
  }

  .cart-total-panel {
    padding: 18px 16px;
  }

  .cart-total-row span,
  .cart-total-row strong {
    font-size: 24px;
  }

  .cart-footer-actions {
    grid-template-columns: 1fr;
    padding: 18px 16px 20px;
    gap: 12px;
  }

  .cart-pill-btn {
    height: 56px;
    font-size: 18px;
  }
}


/* ===================== */
/* CART MINI PANEL */
/* ===================== */

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .12);
  opacity: 0;
  pointer-events: none;
  transition: .18s ease;
  z-index: 90;
}

.cart-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer {
  position: fixed;
  top: 118px;
  right: 24px;
  left: auto;
  width: 440px;
  max-width: calc(100vw - 24px);
  background: #fff;
  transform: translateY(-8px);
  transition: .2s ease;
  z-index: 100;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .18);
  opacity: 0;
  pointer-events: none;
  border: 1px solid #e5e7eb;
}

.cart-drawer.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.cart-drawer-head {
  display: none;
}

.cart-drawer-items {
  padding: 18px 18px 8px;
}

.drawer-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: flex-start;
  padding: 0 0 16px;
  margin-bottom: 16px;
}

.drawer-item:last-child {
  margin-bottom: 0;
}

.drawer-item-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.drawer-logo {
  width: 52px;
  height: 52px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  flex: 0 0 auto;
}

.drawer-info {
  min-width: 0;
}

.drawer-title {
  font-size: 17px;
  line-height: 1.12;
  font-weight: 800;
  color: #052e2b;
}

.drawer-price {
  margin-top: 4px;
  font-size: 14px;
  color: #575757;
  font-weight: 600;
}

.drawer-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.drawer-qty {
  height: 38px;
  min-width: 86px;
  border: 1px solid #d8ddd9;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  background: #fff;
}

.drawer-qty button {
  width: 24px;
  height: 24px;
  border: 0;
  background: none;
  color: #40524f;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-qty button:hover {
  background: #f3f5f5;
}

.drawer-qty button.active-side {
  color: #2563eb;
}

.drawer-qty span {
  min-width: 18px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #4b4b4b;
}

.cart-drawer-footer {
  border-top: 1px solid #dfe5e2;
  padding: 14px 18px 18px;
}

.cart-drawer-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.cart-drawer-total span {
  font-size: 18px;
  font-weight: 800;
  color: #052e2b;
}

.cart-drawer-total strong {
  font-size: 18px;
  font-weight: 800;
  color: #052e2b;
}

.cart-drawer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cart-drawer-keep,
.cart-drawer-checkout {
  height: 44px;
  border-radius: 999px;
  border: 0;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.cart-drawer-keep {
  background: #eceeed;
  color: #052e2b;
}

.cart-drawer-checkout {
  background: #ff0033;
  color: #fff;
}

.cart-drawer-checkout:hover {
  background: #df002d;
}

@media (max-width:980px) {
  .cart-drawer {
    top: 92px;
    right: 14px;
    width: 400px;
    max-width: calc(100vw - 20px);
  }
}

@media (max-width:640px) {
  .cart-drawer {
    top: 82px;
    right: 8px;
    width: calc(100vw - 16px);
    border-radius: 18px;
  }

  .cart-drawer-items {
    padding: 14px 14px 6px;
  }

  .drawer-item {
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 12px;
  }

  .drawer-item-main {
    gap: 12px;
  }

  .drawer-logo {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .drawer-title {
    font-size: 15px;
  }

  .drawer-price {
    font-size: 13px;
  }

  .drawer-qty {
    height: 34px;
    min-width: 78px;
  }

  .drawer-qty span {
    font-size: 14px;
  }

  .cart-drawer-footer {
    padding: 12px 14px 14px;
  }

  .cart-drawer-total span,
  .cart-drawer-total strong {
    font-size: 16px;
  }

  .cart-drawer-actions {
    gap: 10px;
  }

  .cart-drawer-keep,
  .cart-drawer-checkout {
    height: 42px;
    font-size: 14px;
  }
}










@media (max-width:640px) {
  .site-frame {
    width: min(var(--container), calc(100% - 12px));
  }

  .header-top {
    gap: 10px;
  }

  .main-nav {
    gap: 4px;
  }

  .nav-link {
    padding: 0 12px;
    font-size: 13px;
  }
}

/* FIX PRODUCT BUTTONS ON MOBILE */
.add-cart-btn,
.gift-btn {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width:640px) {
  .product-action-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .add-cart-btn,
  .gift-btn {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 18px !important;
    border-radius: 999px;
    font-size: 15px;
    flex: none !important;
  }
}

/* ===================== */
/* CHECKOUT */
/* ===================== */

.checkout {
  margin: 30px 0;
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 24px;
}

.checkout-order,
.checkout-payment {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
}

.checkout-order h2,
.checkout-payment h2 {
  margin-bottom: 18px;
  font-size: 20px;
  font-weight: 800;
}

.checkout-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.checkout-total {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 800;
}

/* PAYMENT */
.payment-box {
  text-align: center;
}

.payment-amount strong {
  font-size: 28px;
}

.payment-qr img {
  margin: 20px 0;
}

.payment-address {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.payment-address input {
  flex: 1;
  padding: 10px;
}

.payment-address button {
  padding: 10px 14px;
  cursor: pointer;
}

.payment-timer {
  margin: 12px 0;
  color: #ef4444;
}

.payment-confirm {
  width: 100%;
  height: 48px;
  border-radius: 999px;
  background: #ff0033;
  color: #fff;
  font-weight: 800;
  border: 0;
}

/* MOBILE */
@media (max-width:980px) {
  .checkout-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================== */
/* CHECKOUT - ENHANCED PAYMENT */
/* ===================== */

.coin-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 16px;
}

.coin-btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.coin-btn:hover {
  background: #f8fafc;
}

.coin-btn.active {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

.payment-status {
  margin: 14px auto 0;
  width: max-content;
  max-width: 100%;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.payment-status.detected {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.payment-status.confirming {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}

.payment-status.paid {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #15803d;
}

.payment-qr img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
}

.payment-network-row {
  margin: 12px 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: #64748b;
}

.payment-network-row strong {
  color: #111827;
}

.payment-confirm[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

@media (max-width:640px) {
  .coin-picker {
    justify-content: flex-start;
  }

  .coin-btn {
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }

  .payment-qr img {
    width: 170px;
    height: 170px;
  }
}

/* CHECKOUT POLISH */
.checkout {
  margin: 22px 0 28px;
}

.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 18px;
  align-items: start;
}

.checkout-order,
.checkout-payment {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

.checkout-order h2,
.checkout-payment h2 {
  margin: 0 0 16px;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 800;
  color: #052e2b;
}

.checkout-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #eef2f7;
  font-size: 14px;
}

.checkout-item strong {
  color: #111827;
}

.checkout-total {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #eef2f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  font-weight: 800;
  color: #052e2b;
}

.payment-box {
  text-align: center;
  border: 1px solid #eef2f7;
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}

.payment-amount {
  margin-top: 4px;
}

.payment-amount strong {
  display: block;
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  color: #052e2b;
}

.payment-amount span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #52525b;
  font-weight: 600;
}

.payment-status {
  margin: 14px auto 0;
}

.payment-qr {
  margin: 18px 0 14px;
}

.payment-qr img {
  width: 190px;
  height: 190px;
  object-fit: contain;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  padding: 8px;
}

.payment-address {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 12px;
}

.payment-address input {
  width: 100%;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 12px;
  background: #fff;
  font-size: 13px;
  color: #111827;
}

.payment-address button {
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.payment-address button:hover {
  background: #f8fafc;
}

.payment-network-row {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: #64748b;
}

.payment-network-row strong {
  color: #111827;
}

.payment-timer {
  margin: 14px 0 16px;
  color: #ef4444;
  font-size: 14px;
  font-weight: 700;
}

.payment-confirm {
  width: 100%;
  height: 48px;
  border-radius: 999px;
  background: #ff0033;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  border: 0;
  cursor: pointer;
}

.payment-confirm:hover {
  background: #df002d;
}

@media (max-width:980px) {
  .checkout-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width:640px) {
  .checkout {
    margin: 14px 0 20px;
  }

  .checkout-order,
  .checkout-payment {
    border-radius: 18px;
    padding: 16px;
  }

  .checkout-order h2,
  .checkout-payment h2 {
    font-size: 20px;
    margin-bottom: 14px;
  }

  .checkout-total {
    font-size: 18px;
  }

  .payment-box {
    border-radius: 16px;
    padding: 14px;
  }

  .payment-amount strong {
    font-size: 28px;
  }

  .payment-qr img {
    width: 160px;
    height: 160px;
  }

  .payment-address {
    grid-template-columns: 1fr;
  }

  .payment-address input,
  .payment-address button,
  .payment-confirm {
    height: 44px;
  }
}

/* ===================== */
/* CHECKOUT V2 */
/* ===================== */

.checkout-grid-single {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
}

.checkout-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 18px;
}

.checkout-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.checkout-card-head h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.08;
  font-weight: 800;
  color: #052e2b;
}

.checkout-login-link {
  color: #052e2b;
  font-size: 14px;
  font-weight: 700;
}

.checkout-muted {
  margin: 0 0 18px;
  font-size: 14px;
  color: #52525b;
}

.checkout-muted a,
.checkout-legal a {
  color: #052e2b;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.checkout-field {
  margin-bottom: 18px;
}

.checkout-field label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
  font-weight: 600;
}

.checkout-field input {
  width: 100%;
  height: 58px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 16px;
  font-size: 16px;
  outline: none;
  background: #fff;
}

.checkout-field input:focus,
.promo-row input:focus {
  border-color: #cbd5e1;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, .12);
}

.checkout-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
  cursor: pointer;
}

.checkout-checkbox-row input {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex: 0 0 auto;
}

.checkout-checkbox-row span {
  font-size: 15px;
  line-height: 1.45;
  color: #52525b;
  font-weight: 600;
}

.checkout-legal {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #52525b;
}

.checkout-primary-btn {
  width: 100%;
  height: 64px;
  border-radius: 999px;
  border: 0;
  background: #ff0033;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.checkout-primary-btn:hover {
  background: #df002d;
}

/* SUMMARY */
.summary-collapse-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.checkout-summary-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0 18px;
  border-bottom: 1px solid #eef2f7;
}

.checkout-summary-logo {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  font-weight: 800;
}

.checkout-summary-copy {
  min-width: 0;
}

.checkout-summary-title {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  color: #052e2b;
}

.checkout-summary-sub {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: #575757;
}

.checkout-summary-qty {
  height: 52px;
  min-width: 128px;
  border: 1px solid #d8ddd9;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: #fff;
}

.checkout-summary-qty button {
  width: 30px;
  height: 30px;
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  color: #052e2b;
}

.checkout-summary-qty button:hover {
  background: #f3f5f5;
}

.checkout-summary-qty span {
  min-width: 24px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}

.checkout-summary-remove {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  font-size: 16px;
}

.checkout-summary-remove:hover {
  background: #f8fafc;
}

.promo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 18px;
}

.promo-row input {
  width: 100%;
  height: 56px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 16px;
  font-size: 16px;
  outline: none;
}

.promo-row button {
  height: 56px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  color: #8a9a95;
}

.checkout-total-block {
  margin-top: 18px;
}

.checkout-total-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 22px;
  font-weight: 800;
  color: #052e2b;
}

.checkout-rate-note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #737373;
}

/* payment spacing tune */
.checkout-payment .payment-box {
  margin-top: 6px;
}

@media (max-width:980px) {
  .checkout-grid-single {
    grid-template-columns: 1fr;
  }

  .checkout-summary-item {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
  }

  .checkout-summary-qty {
    margin-top: 12px;
    width: max-content;
  }

  .checkout-summary-remove {
    margin-top: 12px;
  }
}

@media (max-width:640px) {
  .checkout-card {
    padding: 16px;
    border-radius: 18px;
    margin-bottom: 14px;
  }

  .checkout-card-head h2 {
    font-size: 20px;
  }

  .checkout-muted,
  .checkout-legal {
    font-size: 13px;
  }

  .checkout-field input {
    height: 50px;
    font-size: 15px;
  }

  .checkout-checkbox-row span {
    font-size: 14px;
  }

  .checkout-primary-btn {
    height: 52px;
    font-size: 16px;
  }

  .checkout-summary-item {
    grid-template-columns: 56px minmax(0, 1fr);
    padding: 12px 0 14px;
  }

  .checkout-summary-logo {
    width: 56px;
    height: 56px;
    font-size: 22px;
  }

  .checkout-summary-title {
    font-size: 15px;
  }

  .checkout-summary-sub {
    font-size: 13px;
  }

  .checkout-summary-qty {
    height: 44px;
    min-width: 116px;
  }

  .checkout-summary-qty span {
    font-size: 16px;
  }

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

  .promo-row input,
  .promo-row button {
    height: 48px;
    font-size: 15px;
  }

  .checkout-total-line {
    font-size: 18px;
  }
}

/* ===================== */
/* CHECKOUT FOCUS MODE */
/* ===================== */

body.checkout-focus #site-footer {
  display: none;
}

body.checkout-focus .search-box,
body.checkout-focus .main-nav-wrap {
  display: none;
}

body.checkout-focus .site-header {
  position: static;
  backdrop-filter: none;
  background: #fff;
}

body.checkout-focus .header-top {
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  min-height: 72px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

body.checkout-focus .header-help,
body.checkout-focus .header-country,
body.checkout-focus .header-login {
  display: none !important;
}

body.checkout-focus .brand {
  font-size: 18px;
}

body.checkout-focus .site-main {
  padding-top: 18px;
}

/* ===================== */
/* CHECKOUT TYPOGRAPHY REFINEMENT */
/* ===================== */

.checkout-card {
  border-radius: 20px;
  padding: 20px;
}

.checkout-card-head {
  margin-bottom: 8px;
}

.checkout-card-head h2 {
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: #052e2b;
}

.checkout-login-link {
  font-size: 13px;
  font-weight: 700;
}

.checkout-muted {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.45;
  color: #5f5f68;
}

.checkout-field label {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
}

.checkout-field input {
  height: 54px;
  border-radius: 10px;
  font-size: 15px;
}

.checkout-checkbox-row {
  gap: 12px;
  margin-bottom: 16px;
}

.checkout-checkbox-row span {
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
  color: #565c63;
}

.checkout-legal {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.6;
  color: #5f5f68;
}

.checkout-primary-btn {
  height: 56px;
  font-size: 16px;
  letter-spacing: -0.02em;
}

/* ===================== */
/* SUMMARY ITEM LAYOUT */
/* ===================== */

.checkout-summary-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0 16px;
  border-bottom: 1px solid #eef2f7;
}

.checkout-summary-logo {
  width: 72px;
  height: 72px;
  font-size: 28px;
}

.checkout-summary-title {
  font-size: 15px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: #052e2b;
}

.checkout-summary-sub {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: #666;
}

.checkout-summary-qty {
  height: 48px;
  min-width: 116px;
  padding: 0 10px;
  gap: 4px;
}

.checkout-summary-qty button {
  width: 28px;
  height: 28px;
  font-size: 20px;
}

.checkout-summary-qty span {
  min-width: 18px;
  font-size: 16px;
}

.checkout-summary-remove {
  width: 34px;
  height: 34px;
  font-size: 15px;
  color: #052e2b;
}

/* ===================== */
/* PROMO INPUT - INLINE BUTTON */
/* ===================== */

.promo-row {
  margin-top: 18px;
}

.promo-input-wrap {
  position: relative;
}

.promo-input-wrap input {
  width: 100%;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 100px 0 16px;
  font-size: 15px;
  outline: none;
  background: #fff;
}

.promo-input-wrap input:focus {
  border-color: #cbd5e1;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, .12);
}

.promo-input-wrap button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  background: #eceeed;
  color: #83908c;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.promo-input-wrap button:hover {
  background: #e4e7e6;
}

.checkout-total-line {
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.checkout-rate-note {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #7a7a7a;
}

/* ===================== */
/* MOBILE - KEEP QTY + DELETE SAME ROW */
/* ===================== */

@media (max-width:640px) {
  body.checkout-focus .header-top {
    grid-template-columns: auto 1fr auto;
    padding: 12px 14px;
  }

  body.checkout-focus .header-locale {
    display: none !important;
  }

  body.checkout-focus .header-cart {
    font-size: 15px;
  }

  .checkout-card {
    padding: 16px;
    border-radius: 18px;
    margin-bottom: 14px;
  }

  .checkout-card-head h2 {
    font-size: 20px;
  }

  .checkout-summary-item {
    grid-template-columns: 52px minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: start;
    padding: 12px 0 14px;
  }

  .checkout-summary-logo {
    width: 52px;
    height: 52px;
    font-size: 20px;
  }

  .checkout-summary-copy {
    min-width: 0;
    padding-top: 2px;
  }

  .checkout-summary-title {
    font-size: 14px;
    line-height: 1.2;
  }

  .checkout-summary-sub {
    font-size: 12px;
    margin-top: 4px;
  }

  .checkout-summary-qty {
    height: 40px;
    min-width: 92px;
    padding: 0 6px;
    margin-top: 0;
  }

  .checkout-summary-qty button {
    width: 22px;
    height: 22px;
    font-size: 18px;
  }

  .checkout-summary-qty span {
    font-size: 15px;
    min-width: 14px;
  }

  .checkout-summary-remove {
    width: 30px;
    height: 30px;
    margin-top: 5px;
    font-size: 14px;
  }

  .promo-input-wrap input {
    height: 48px;
    padding: 0 88px 0 14px;
    font-size: 14px;
  }

  .promo-input-wrap button {
    right: 6px;
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
  }

  .checkout-total-line {
    font-size: 16px;
  }

  .checkout-rate-note {
    font-size: 11.5px;
  }
}

/* ===================== */
/* CHECKOUT HEADER MODE */
/* ===================== */

body.checkout-focus .header-top {
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

body.checkout-focus .brand {
  min-width: 0;
}

body.checkout-focus .header-top>*:last-child {
  justify-self: end;
}

body.checkout-focus .header-cart {
  display: none !important;
}

body.checkout-focus .header-locale {
  display: none !important;
}

body.checkout-focus .checkout-wallet-btn {
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: #111827;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  width: auto;
  flex: 0 0 auto;
  margin-left: auto;
}

body.checkout-focus .checkout-wallet-btn:hover {
  background: #f8fafc;
}

body.checkout-focus .checkout-wallet-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
}

/* contact head no side action */
.checkout-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checkout-card-head:has(h2):not(:has(.summary-collapse-btn)) {
  justify-content: flex-start;
}

/* summary collapse only collapse item list */
.summary-items-collapsed #checkoutSummaryItems {
  display: none;
}

/* keep promo + total visible */
#checkoutSummaryBody {
  display: block;
}

/* small type refinements */
.checkout-summary-sub {
  color: #666;
}

@media (max-width:640px) {
  body.checkout-focus .header-top {
    grid-template-columns: auto 1fr auto;
    padding: 12px 14px;
  }

  body.checkout-focus .checkout-wallet-btn {
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    width: auto;
    max-width: max-content;
  }

  body.checkout-focus .checkout-wallet-icon {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }
}

/* checkout content breathing room */
.checkout {
  padding-inline: 8px;
}

.checkout-grid-single {
  max-width: 720px;
  margin: 0 auto;
}

.checkout-card {
  margin-inline: 0;
}

@media (max-width: 640px) {
  .checkout {
    padding-inline: 12px;
  }

  .checkout-card {
    padding: 18px;
  }

  .checkout-summary-item {
    padding-right: 4px;
  }

  .checkout-total-block,
  .promo-row,
  #checkoutSummaryItems {
    padding-right: 2px;
  }
}

/* ===================== */
/* FINAL CHECKOUT TUNE */
/* ===================== */

body.checkout-focus .site-frame {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

body.checkout-focus .site-main {
  padding-top: 12px;
  padding-bottom: 28px;
}

body.checkout-focus .header-top {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 12px 18px;
  border-bottom: 1px solid #e9eceb;
}

body.checkout-focus .checkout-back-btn {
  grid-column: 1;
}

body.checkout-focus .brand {
  grid-column: 2;
}

body.checkout-focus .checkout-wallet-btn {
  grid-column: 4;
}

body.checkout-focus .checkout-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #052e2b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

body.checkout-focus .checkout-back-btn:hover {
  background: #f8fafc;
}

body.checkout-focus .checkout-back-btn:hover {
  background: #f4f6f5;
}

body.checkout-focus .brand {
  gap: 8px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

body.checkout-focus .brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

body.checkout-focus .brand-mark::after {
  inset: 7px;
  border-radius: 7px;
}

body.checkout-focus .checkout-wallet-btn {
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #d9dfdc;
  background: #fff;
  color: #111827;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  width: auto;
  flex: 0 0 auto;
  margin-left: auto;
  box-shadow: none;
}

body.checkout-focus .checkout-wallet-btn:hover {
  background: #f8fafc;
}

body.checkout-focus .checkout-wallet-icon {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

/* checkout frame tighter */
.checkout {
  margin: 16px 0 22px;
  padding-inline: 10px;
}

.checkout-grid-single {
  max-width: 680px;
  margin: 0 auto;
}

.checkout-card {
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: none;
}

.checkout-card-head {
  margin-bottom: 8px;
}

.checkout-card-head h2 {
  font-size: 20px;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.checkout-muted {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
}

.checkout-field {
  margin-bottom: 16px;
}

.checkout-field label {
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #71717a;
}

.checkout-field input {
  height: 52px;
  border-radius: 10px;
  font-size: 15px;
}

.checkout-checkbox-row {
  gap: 12px;
  margin-bottom: 16px;
}

.checkout-checkbox-row span {
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
  color: #565c63;
}

.checkout-legal {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
}

.checkout-primary-btn {
  height: 54px;
  font-size: 16px;
  letter-spacing: -0.02em;
}

/* summary */
.checkout-summary-item {
  grid-template-columns: 72px minmax(0, 1fr) auto auto;
  gap: 14px;
  padding: 14px 0 16px;
}

.checkout-summary-logo {
  width: 72px;
  height: 72px;
}

.checkout-summary-title {
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.checkout-summary-sub {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.35;
  color: #666;
}

.checkout-summary-qty {
  height: 46px;
  min-width: 112px;
}

.checkout-summary-remove {
  width: 34px;
  height: 34px;
}

.promo-row {
  margin-top: 16px;
}

.promo-input-wrap input {
  height: 52px;
  padding: 0 92px 0 14px;
  font-size: 15px;
}

.promo-input-wrap button {
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.checkout-total-block {
  margin-top: 16px;
}

.checkout-total-line {
  font-size: 18px;
}

.checkout-rate-note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
}

/* payment card */
.checkout-payment {
  margin-top: 2px;
}

.checkout-payment .payment-box {
  border-radius: 16px;
  padding: 14px;
}

.payment-amount strong {
  font-size: 30px;
}

.payment-amount span {
  margin-top: 4px;
  font-size: 13px;
}

.payment-status {
  margin-top: 12px;
  font-size: 12px;
}

.payment-qr {
  margin: 16px 0 12px;
}

.payment-qr img {
  width: 172px;
  height: 172px;
  border-radius: 12px;
}

.payment-address input,
.payment-address button {
  height: 44px;
  font-size: 13px;
}

.payment-network-row {
  margin-top: 10px;
  font-size: 13px;
}

.payment-timer {
  margin: 12px 0 14px;
  font-size: 13px;
}

.payment-confirm {
  height: 46px;
  font-size: 14px;
}

/* mobile */
@media (max-width:640px) {
  body.checkout-focus .header-top {
    grid-template-columns: auto auto 1fr auto;
    gap: 10px;
    min-height: 60px;
    padding: 10px 12px;
  }

  body.checkout-focus .checkout-back-btn {
    width: 32px;
    height: 32px;
    font-size: 22px;
  }

  body.checkout-focus .brand {
    font-size: 17px;
    gap: 8px;
  }

  body.checkout-focus .brand-mark {
    width: 28px;
    height: 28px;
  }

  body.checkout-focus .checkout-wallet-btn {
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
    gap: 8px;
  }

  body.checkout-focus .checkout-wallet-icon {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .checkout {
    margin: 10px 0 18px;
    padding-inline: 8px;
  }

  .checkout-card {
    padding: 16px;
    border-radius: 16px;
    margin-bottom: 12px;
  }

  .checkout-card-head h2 {
    font-size: 18px;
  }

  .checkout-summary-item {
    grid-template-columns: 52px minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 12px 0 14px;
  }

  .checkout-summary-logo {
    width: 52px;
    height: 52px;
    font-size: 20px;
  }

  .checkout-summary-title {
    font-size: 14px;
  }

  .checkout-summary-sub {
    font-size: 12px;
  }

  .checkout-summary-qty {
    height: 40px;
    min-width: 88px;
    padding: 0 6px;
  }

  .checkout-summary-qty button {
    width: 22px;
    height: 22px;
    font-size: 18px;
  }

  .checkout-summary-qty span {
    font-size: 15px;
  }

  .checkout-summary-remove {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .promo-input-wrap input {
    height: 46px;
    padding: 0 84px 0 14px;
    font-size: 14px;
  }

  .promo-input-wrap button {
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }

  .checkout-total-line {
    font-size: 16px;
  }

  .checkout-rate-note {
    font-size: 11.5px;
  }

  .payment-amount strong {
    font-size: 26px;
  }

  .payment-qr img {
    width: 156px;
    height: 156px;
  }
}

/* ===================== */
/* CHECKOUT HEADER FINAL */
/* ===================== */

body.checkout-focus .site-header {
  position: static;
  background: #fff;
  backdrop-filter: none;
  border-bottom: 1px solid #e8ecea;
}

body.checkout-focus .header-top {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 18px;
  border-bottom: 0;
}

body.checkout-focus .checkout-back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #052e2b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

body.checkout-focus .checkout-back-btn:hover {
  background: #f3f5f4;
}

body.checkout-focus .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

body.checkout-focus .brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

body.checkout-focus .brand-mark::after {
  inset: 7px;
  border-radius: 7px;
}

body.checkout-focus .checkout-header-spacer {
  min-width: 12px;
}

body.checkout-focus .checkout-wallet-btn {
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid #d9dfdc;
  background: #fff;
  color: #111827;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  width: auto;
  flex: 0 0 auto;
  justify-self: end;
}

body.checkout-focus .checkout-wallet-btn:hover {
  background: #f8fafc;
}

body.checkout-focus .checkout-wallet-icon {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width:640px) {
  body.checkout-focus .header-top {
    grid-template-columns: auto auto 1fr auto;
    gap: 10px;
    min-height: 58px;
    padding: 10px 12px;
  }

  body.checkout-focus .checkout-back-btn {
    width: 32px;
    height: 32px;
  }

  body.checkout-focus .brand {
    gap: 8px;
    font-size: 17px;
  }

  body.checkout-focus .brand-mark {
    width: 28px;
    height: 28px;
  }

  body.checkout-focus .checkout-wallet-btn {
    height: 38px;
    padding: 0 12px;
    gap: 8px;
    font-size: 13px;
  }

  body.checkout-focus .checkout-wallet-icon {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }
}

body.checkout-focus .site-main {
  padding-top: 10px;
  padding-bottom: 24px;
}

body.checkout-focus .checkout {
  margin: 10px 0 20px;
  padding-inline: 10px;
}

body.checkout-focus .checkout-grid-single {
  max-width: 680px;
  margin: 0 auto;
}

/* ===================== */
/* SUCCESS PAGE */
/* ===================== */

.success-page {
  margin: 18px 0 26px;
  padding-inline: 10px;
}

.success-shell {
  max-width: 760px;
  margin: 0 auto;
}

.success-icon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ecfdf5;
  color: #16a34a;
  font-size: 34px;
  font-weight: 800;
  border: 1px solid #bbf7d0;
}

.success-copy {
  text-align: center;
  margin-bottom: 18px;
}

.success-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f0fdf4;
  border: 1px solid #dcfce7;
  color: #15803d;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 12px;
}

.success-title {
  margin: 0;
  font-size: 36px;
  line-height: 1.04;
  letter-spacing: -0.05em;
  color: #052e2b;
  font-weight: 800;
}

.success-desc {
  margin: 12px auto 0;
  max-width: 620px;
  font-size: 15px;
  line-height: 1.6;
  color: #5f5f68;
}

.success-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.success-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

.success-card h2 {
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 800;
  color: #052e2b;
}

.success-detail-list {
  display: grid;
  gap: 10px;
}

.success-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #eef2f7;
}

.success-detail-row:last-child {
  border-bottom: 0;
}

.success-detail-row span {
  font-size: 14px;
  color: #64748b;
}

.success-detail-row strong {
  font-size: 14px;
  color: #111827;
  text-align: right;
}

.success-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  color: #15803d !important;
  font-size: 12px !important;
  font-weight: 800;
}

.success-steps {
  display: grid;
  gap: 14px;
}

.success-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.success-step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #111827;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex: 0 0 auto;
}

.success-step strong {
  display: block;
  font-size: 14px;
  color: #111827;
}

.success-step p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #64748b;
}

.success-order-items {
  margin-bottom: 16px;
}

.success-card-head {
  margin-bottom: 10px;
}

.success-order-item {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eef2f7;
}

.success-order-item:last-child {
  border-bottom: 0;
}

.success-order-logo {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  border-radius: 0;
}

.success-order-copy {
  min-width: 0;
}

.success-order-title {
  font-size: 15px;
  font-weight: 800;
  color: #052e2b;
  line-height: 1.2;
}

.success-order-meta {
  margin-top: 4px;
  font-size: 13px;
  color: #64748b;
}

.success-order-price {
  font-size: 15px;
  font-weight: 800;
  color: #111827;
  text-align: right;
}

.success-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.success-btn {
  height: 52px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
}

.success-btn-secondary {
  background: #eceeed;
  color: #052e2b;
}

.success-btn-primary {
  background: #ff0033;
  color: #fff;
}

.success-btn-primary:hover {
  background: #df002d;
}

@media (max-width:980px) {
  .success-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width:640px) {
  .success-page {
    margin: 10px 0 18px;
    padding-inline: 8px;
  }

  .success-icon {
    width: 62px;
    height: 62px;
    font-size: 28px;
  }

  .success-title {
    font-size: 28px;
  }

  .success-desc {
    font-size: 14px;
  }

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

  .success-card h2 {
    font-size: 18px;
  }

  .success-order-item {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .success-order-logo {
    width: 52px;
    height: 52px;
    font-size: 18px;
  }

  .success-order-price {
    text-align: left;
    margin-top: 6px;
  }

  .success-actions {
    grid-template-columns: 1fr;
  }

  .success-btn {
    height: 48px;
    font-size: 14px;
  }
}

/* PAYMENT FLOW */
.payment-flow {
  display: grid;
  gap: 16px;
}

.payment-step {
  border: 1px solid #eef2f7;
  border-radius: 16px;
  background: #fff;
  padding: 14px;
}

.payment-step-label {
  font-size: 13px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 10px;
}

.payment-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.payment-hint {
  font-size: 12px;
  color: #64748b;
}

.coin-picker,
.network-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.coin-btn,
.network-btn {
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: .16s ease;
}

.coin-btn:hover,
.network-btn:hover {
  background: #f8fafc;
}

.coin-btn.active,
.network-btn.active {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

.payment-box {
  text-align: center;
  border: 1px solid #eef2f7;
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}

.payment-mini-meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #64748b;
}

.payment-mini-meta strong {
  color: #111827;
}

.payment-fee-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  color: #15803d;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width:640px) {
  .payment-step {
    padding: 12px;
    border-radius: 14px;
  }

  .payment-step-label {
    font-size: 12px;
  }

  .coin-btn,
  .network-btn {
    height: 36px;
    padding: 0 12px;
    font-size: 12px;
  }

  .payment-mini-meta {
    gap: 8px;
    font-size: 12px;
  }
}

/* ===================== */
/* PAYMENT POLISH */
/* ===================== */

.coin-btn.recommended {
  position: relative;
  padding-right: 10px;
  gap: 8px;
}

.coin-reco-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  color: #15803d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

.payment-hint strong {
  color: #111827;
}

.network-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.network-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex: 0 0 auto;
}

.network-icon.tron {
  background: #ef4444;
}

.network-icon.bnb {
  background: #f59e0b;
}

.network-icon.eth {
  background: #627eea;
}

.network-icon.polygon {
  background: #8247e5;
}

.payment-step-head {
  align-items: center;
}

.payment-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  color: #64748b;
  font-size: 11.5px;
  font-weight: 700;
}

/* ===================== */
/* SUCCESS PAGE POLISH */
/* ===================== */

.success-shell {
  max-width: 720px;
}

.success-copy {
  margin-bottom: 16px;
}

.success-kicker {
  min-height: 28px;
  padding: 5px 12px;
  font-size: 12px;
  letter-spacing: .01em;
}

.success-title {
  font-size: 32px;
}

.success-desc {
  margin-top: 10px;
  max-width: 560px;
  font-size: 14px;
  line-height: 1.55;
}

.success-grid {
  gap: 14px;
  margin-bottom: 14px;
}

.success-card {
  border-radius: 18px;
  padding: 16px;
  box-shadow: none;
}

.success-card h2 {
  margin: 0 0 12px;
  font-size: 18px;
  letter-spacing: -0.03em;
}

.success-detail-row {
  padding: 9px 0;
}

.success-detail-row span,
.success-detail-row strong {
  font-size: 13px;
}

.success-step {
  gap: 10px;
}

.success-step-num {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.success-step strong {
  font-size: 13px;
}

.success-step p {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.45;
}

.success-order-items {
  margin-bottom: 14px;
}

.success-order-item {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 10px 0;
}

.success-order-logo {
  width: 56px;
  height: 56px;
  font-size: 20px;
}

.success-order-title {
  font-size: 14px;
}

.success-order-meta {
  margin-top: 4px;
  font-size: 12px;
}

.success-order-price {
  font-size: 14px;
}

.success-actions {
  gap: 12px;
}

.success-btn {
  height: 48px;
  font-size: 14px;
}

/* mobile */
@media (max-width:640px) {
  .coin-btn.recommended {
    padding-right: 8px;
  }

  .coin-reco-badge {
    font-size: 10px;
    padding: 2px 7px;
  }

  .network-icon {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }

  .payment-hint {
    font-size: 10.5px;
    padding: 4px 8px;
  }

  .success-title {
    font-size: 26px;
  }

  .success-desc {
    font-size: 13px;
  }

  .success-card {
    padding: 14px;
    border-radius: 16px;
  }

  .success-card h2 {
    font-size: 17px;
  }

  .success-order-item {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
  }

  .success-order-logo {
    width: 48px;
    height: 48px;
    font-size: 17px;
  }

  .success-order-price {
    text-align: left;
    margin-top: 4px;
  }

  .success-btn {
    height: 46px;
    font-size: 13.5px;
  }
}

/* REALER COIN ICONS */
.coin-btn,
.network-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.coin-real-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  flex: 0 0 auto;
}

.coin-real-icon.btc {
  background: #f7931a;
}

.coin-real-icon.eth {
  background: #627eea;
  font-size: 13px;
}

.coin-real-icon.usdt {
  background: #26a17b;
}

.coin-real-icon.sol {
  background: linear-gradient(135deg, #14f195, #9945ff);
  font-size: 11px;
}

/* CHAIN ICONS */
.network-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.network-icon.tron {
  background: #ef0027;
}

.network-icon.bnb {
  background: #f3ba2f;
  color: #111827;
  font-size: 10px;
}

.network-icon.eth {
  background: #627eea;
  font-size: 12px;
}

.network-icon.polygon {
  background: #8247e5;
  font-size: 10px;
}

/* selected state keeps icons visible */
.coin-btn.active .coin-real-icon,
.network-btn.active .network-icon {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

@media (max-width:640px) {
  .coin-real-icon {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .network-icon {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }

  .network-icon.eth {
    font-size: 11px;
  }
}

/* SUCCESS / ORDER STATUS PENDING */
.success-icon.pending {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.success-kicker.pending {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #c2410c;
}

.success-status-badge.pending {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c !important;
}

.success-step-num.pending {
  background: #f59e0b;
  color: #fff;
}

.order-timeline {
  display: grid;
  gap: 14px;
}

.order-timeline-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.order-timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d1d5db;
  margin-top: 3px;
  position: relative;
}

.order-timeline-row.done .order-timeline-dot {
  background: #22c55e;
}

.order-timeline-row.current .order-timeline-dot {
  background: #f59e0b;
}

.order-timeline-row strong {
  display: block;
  font-size: 14px;
  color: #111827;
}

.order-timeline-row p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #64748b;
}

@media (max-width:640px) {
  .order-timeline-row strong {
    font-size: 13px;
  }

  .order-timeline-row p {
    font-size: 12px;
  }
}

/* ===================== */
/* HOMEPAGE POLISH V1 */
/* ===================== */

.site-main {
  background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
}

/* hero */
.hero-section {
  margin-bottom: 16px;
}

.hero-card {
  min-height: 180px;
  padding: 22px;
  border-radius: 20px;
  gap: 18px;
}

.hero-eyebrow {
  margin-bottom: 12px;
  padding: 7px 11px;
  font-size: 11px;
  letter-spacing: .07em;
}

.hero-title {
  font-size: 34px;
  line-height: 1.02;
  max-width: 520px;
}

.hero-desc {
  margin-top: 12px;
  max-width: 470px;
  font-size: 14px;
  line-height: 1.55;
}

.hero-actions {
  margin-top: 18px;
  gap: 10px;
}

.hero-btn,
.btn-light,
.btn-ghost-light {
  height: 42px;
  padding: 0 16px;
  font-size: 13px;
}

.hero-stack {
  max-width: 360px;
  height: 136px;
}

.float-card {
  padding: 14px;
  border-radius: 16px;
}

.float-card-a {
  inset: 6px 92px 42px 10px;
}

.float-card-b {
  inset: 34px 12px 10px 116px;
}

.float-label {
  font-size: 11px;
  margin-bottom: 6px;
}

.float-value {
  font-size: 17px;
}

.float-pills {
  gap: 6px;
  margin-top: 10px;
}

.float-pills span {
  padding: 6px 9px;
  font-size: 11px;
}

/* quick rail */
.quick-rail {
  margin-top: 12px;
  gap: 8px;
}

.quick-rail-item {
  height: 34px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
}

/* sections */
.popular-section,
.product-section,
.how-section,
.app-promo-card,
.faq-section,
.newsletter-card {
  border-radius: 20px;
  padding: 18px;
}

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

.section-title {
  font-size: 24px;
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.section-subtitle {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: #667085;
}

.section-kicker {
  height: 26px;
  padding: 0 9px;
  font-size: 11px;
  margin-bottom: 7px;
}

/* popular cards */
.compact-brand-grid {
  gap: 12px;
}

.brand-card {
  padding: 12px;
  border-radius: 16px;
}

.brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.rating-pill {
  font-size: 11px;
  padding: 5px 7px;
}

.brand-name {
  font-size: 14px;
  line-height: 1.25;
  min-height: 34px;
  margin-bottom: 5px;
}

.brand-meta {
  font-size: 12px;
}

.compact-chip-row {
  margin-top: 14px;
  gap: 8px;
}

.chip {
  height: 36px;
  padding: 0 13px;
  font-size: 12px;
}

/* product card */
.product-grid {
  gap: 12px;
}

.product-card {
  padding: 12px;
  border-radius: 18px;
}

.product-logo {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  font-size: 18px;
}

.product-top,
.product-card-top {
  margin-bottom: 12px;
}

.pill {
  height: 24px;
  padding: 0 8px;
  font-size: 10px;
}

.product-name {
  font-size: 15px;
  line-height: 1.22;
  min-height: 36px;
  margin-bottom: 6px;
}

.product-desc {
  font-size: 12.5px;
  line-height: 1.45;
  min-height: 34px;
  margin-bottom: 12px;
}

.mini-label {
  font-size: 10px;
  margin-bottom: 3px;
}

.product-price {
  font-size: 13px;
}

.btn-mini {
  height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

.product-bottom {
  padding-top: 10px;
}

/* feature cover */
.feature-cover {
  min-height: 166px;
  border-radius: 18px;
  margin-bottom: 16px;
}

.feature-copy {
  padding: 18px;
}

.feature-copy h3 {
  font-size: 24px;
  line-height: 1.04;
}

.feature-copy p {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.feature-tags {
  gap: 7px;
  margin-top: 14px;
}

.feature-tags span {
  padding: 7px 9px;
  font-size: 11px;
}

/* trust strip tighter */
.trust-strip {
  margin: 20px auto;
}

/* app promo */
.app-promo-card {
  grid-template-columns: 1fr 360px;
  gap: 18px;
}

.app-promo-actions {
  margin-top: 16px;
  gap: 10px;
}

.app-promo-visual {
  min-height: 280px;
}

/* faq */
.faq-list {
  gap: 10px;
}

.faq-item {
  border-radius: 16px;
}

.faq-question {
  padding: 16px 18px;
}

.faq-question span:first-child {
  font-size: 15px;
}

.faq-answer>p {
  padding: 0 18px 18px;
  font-size: 13px;
}

/* mobile tune */
@media (max-width:980px) {
  .hero-card {
    grid-template-columns: 1fr;
  }

  .hero-title {
    font-size: 30px;
  }

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

@media (max-width:640px) {
  .hero-card {
    min-height: auto;
    padding: 16px;
    border-radius: 18px;
  }

  .hero-title {
    font-size: 26px;
  }

  .hero-desc {
    font-size: 13px;
  }

  .hero-stack {
    height: 116px;
  }

  .float-card-a {
    inset: 0 72px 34px 0;
  }

  .float-card-b {
    inset: 30px 0 0 92px;
  }

  .quick-rail-item {
    height: 32px;
    padding: 0 11px;
    font-size: 11.5px;
  }

  .popular-section,
  .product-section,
  .how-section,
  .app-promo-card,
  .faq-section,
  .newsletter-card {
    padding: 16px;
    border-radius: 18px;
  }

  .section-title {
    font-size: 22px;
  }

  .product-name,
  .brand-name {
    min-height: auto;
  }

  .feature-copy {
    padding: 16px;
  }

  .feature-copy h3 {
    font-size: 22px;
  }
}

/* ===================== */
/* PRODUCT PAGE POLISH V1 */
/* ===================== */

.product-page {
  margin: 16px 0 24px;
}

.product-page-shell {
  border-radius: 20px;
  padding: 18px;
}

.product-page-grid {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 470px);
  gap: 22px;
  align-items: start;
}

.product-gallery-card {
  border-radius: 18px;
  padding: 16px;
}

.product-back-btn {
  height: 36px;
  padding: 0 13px;
  font-size: 12px;
  margin-bottom: 14px;
}

.product-art {
  min-height: 460px;
  border-radius: 16px;
}

.product-art-logo {
  width: min(380px, 86%);
  height: 210px;
  border-radius: 10px;
  font-size: 74px;
}

.product-purchase {
  padding-top: 0;
}

.product-breadcrumb {
  font-size: 13px;
  margin-bottom: 10px;
  color: #71717a;
}

.product-page-title {
  font-size: 38px;
  line-height: 1.03;
  letter-spacing: -0.05em;
}

.product-page-rating {
  margin-top: 12px;
  gap: 8px;
  font-size: 15px;
}

.product-info-badge {
  min-height: 32px;
  padding: 6px 11px;
  font-size: 13px;
  border-radius: 10px;
}

.product-page-desc {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.55;
  color: #5f5f68;
}

.product-notice {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
}

.product-input-block {
  margin-top: 18px;
}

.product-input-label {
  font-size: 14px;
  margin-bottom: 8px;
}

.product-amount-input {
  max-width: 380px;
  height: 50px;
  border-radius: 12px;
  padding: 0 14px;
  font-size: 16px;
}

.product-action-row {
  margin-top: 16px;
  gap: 10px;
}

.add-cart-btn {
  min-width: 220px;
  height: 52px;
  padding: 0 20px;
  font-size: 15px;
}

.gift-btn {
  height: 52px;
  padding: 0 18px;
  font-size: 14px;
}

.product-crypto-row {
  margin-top: 18px;
  padding-top: 14px;
  gap: 8px;
}

.crypto-dot {
  width: 28px;
  height: 28px;
}

.product-meta-features {
  margin-top: 18px;
  padding-top: 14px;
  gap: 10px;
}

.meta-feature {
  font-size: 14px;
}

/* tablet */
@media (max-width:1100px) {
  .product-page-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .product-art {
    min-height: 320px;
  }

  .product-art-logo {
    width: min(300px, 84%);
    height: 160px;
    font-size: 56px;
  }

  .product-page-title {
    font-size: 32px;
  }
}

/* mobile */
@media (max-width:640px) {
  .product-page {
    margin: 10px 0 18px;
  }

  .product-page-shell {
    padding: 14px;
    border-radius: 18px;
  }

  .product-gallery-card {
    padding: 12px;
    border-radius: 16px;
  }

  .product-art {
    min-height: 210px;
    border-radius: 14px;
  }

  .product-art-logo {
    width: min(210px, 82%);
    height: 104px;
    font-size: 36px;
  }

  .product-page-title {
    font-size: 25px;
    line-height: 1.08;
  }

  .product-page-rating {
    font-size: 14px;
    margin-top: 10px;
  }

  .product-page-desc {
    font-size: 14px;
    margin-top: 14px;
  }

  .product-notice {
    font-size: 13px;
    padding: 12px 14px;
  }

  .product-amount-input {
    height: 46px;
    font-size: 15px;
  }

  .product-action-row {
    flex-direction: column;
    gap: 10px;
  }

  .add-cart-btn,
  .gift-btn {
    width: 100%;
    min-width: 0;
    height: 48px;
    font-size: 14px;
  }

  .crypto-dot {
    width: 26px;
    height: 26px;
  }

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

  .meta-feature {
    text-align: left;
    font-size: 13px;
  }
}

/* ===================== */
/* CATEGORY PAGE */
/* ===================== */

.category-page {
  margin: 18px 0 28px;
}

.category-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.category-sidebar {
  position: sticky;
  top: 110px;
}

.category-side-nav {
  display: grid;
  gap: 6px;
}

.category-side-link {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 14px;
  color: #052e2b;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.category-side-link:hover {
  background: #f4f6f5;
}

.category-side-link.active {
  background: #e7ece9;
}

.category-content {
  min-width: 0;
}

.category-head {
  margin-bottom: 18px;
}

.category-title {
  margin: 0;
  font-size: 36px;
  line-height: 1.02;
  letter-spacing: -0.05em;
  color: #052e2b;
  font-weight: 800;
}

.category-toolbar {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.category-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.category-filter-btn,
.category-sort-btn {
  height: 50px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: #052e2b;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.category-sort {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #4b5563;
  font-size: 14px;
  font-weight: 600;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 22px;
  margin-bottom: 34px;
}

.category-card {
  display: block;
}

.category-card-image {
  position: relative;
  aspect-ratio: 1/0.72;
  border-radius: 2px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  margin-bottom: 12px;
}

.category-card-title {
  font-size: 18px;
  line-height: 1.18;
  font-weight: 800;
  color: #052e2b;
}

.category-card-price {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: #5f5f68;
}

.category-card-art {
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
}

.category-card-art.red-text {
  color: #ef4444;
}

.category-card-art.black-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #facc15;
  font-size: 22px;
}

.category-badge,
.category-stock-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.category-badge {
  background: #facc15;
  color: #111827;
}

.category-stock-badge {
  background: #f97316;
  color: #fff;
}

.image-blue {
  background: #2690c7;
}

.image-red {
  background: #ffffff;
}

.image-white {
  background: #ffffff;
}

.image-yellow {
  background: #fdf000;
}

.image-black {
  background: #000000;
}

.image-cream {
  background: #efe3d2;
}

.image-light {
  background: #f8fafc;
}

/* info section */
.category-info-section {
  margin-bottom: 34px;
}

.category-info-section h2,
.category-faq-head h2 {
  margin: 0 0 18px;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #052e2b;
  font-weight: 800;
}

.category-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.category-info-card {
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 18px;
}

.category-info-visual {
  height: 160px;
  border-radius: 16px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 800;
  color: #052e2b;
  margin-bottom: 18px;
  background: #fff;
}

.category-info-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.2;
  color: #052e2b;
  font-weight: 800;
}

.category-info-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #5f5f68;
}

/* faq */
.category-faq-section {
  margin-bottom: 12px;
}

.category-faq-head p {
  margin: 0 0 10px;
  font-size: 15px;
  color: #5f5f68;
}

.category-faq-head a {
  color: #052e2b;
  text-decoration: underline;
}

.category-faq-list {
  display: grid;
}

.category-faq-item {
  border-bottom: 1px solid #e8ecea;
}

.category-faq-question {
  width: 100%;
  min-height: 68px;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  color: #052e2b;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.category-faq-answer {
  padding: 0 0 18px;
}

.category-faq-answer p {
  margin: 0;
  max-width: 980px;
  font-size: 15px;
  line-height: 1.65;
  color: #5f5f68;
}

/* responsive */
@media (max-width:1180px) {
  .category-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .category-sidebar {
    position: static;
  }

  .category-side-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .category-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width:980px) {
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .category-title {
    font-size: 30px;
  }
}

@media (max-width:640px) {
  .category-page {
    margin: 10px 0 20px;
  }

  .category-layout {
    gap: 16px;
  }

  .category-side-nav {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .category-side-link {
    min-height: 40px;
    padding: 9px 12px;
    font-size: 14px;
    border-radius: 12px;
  }

  .category-title {
    font-size: 26px;
  }

  .category-toolbar {
    margin-top: 14px;
    gap: 12px;
  }

  .category-filters {
    gap: 8px;
  }

  .category-filter-btn,
  .category-sort-btn {
    height: 42px;
    padding: 0 13px;
    font-size: 13px;
  }

  .category-sort {
    width: 100%;
    justify-content: space-between;
    font-size: 13px;
  }

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

  .category-card-title {
    font-size: 17px;
  }

  .category-card-price {
    font-size: 13px;
  }

  .category-info-section h2,
  .category-faq-head h2 {
    font-size: 24px;
    margin-bottom: 14px;
  }

  .category-info-card {
    padding: 16px;
    border-radius: 16px;
  }

  .category-info-visual {
    height: 120px;
    font-size: 28px;
    border-radius: 14px;
    margin-bottom: 14px;
  }

  .category-info-card h3 {
    font-size: 17px;
  }

  .category-info-card p {
    font-size: 13px;
  }

  .category-faq-head p {
    font-size: 14px;
  }

  .category-faq-question {
    min-height: 58px;
    font-size: 16px;
  }

  .category-faq-answer p {
    font-size: 14px;
  }
}

/* ===================== */
/* CATEGORY PAGE POLISH V2 */
/* ===================== */

.category-page {
  margin: 16px 0 26px;
}

.category-layout {
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
}

/* sidebar */
.category-sidebar {
  top: 96px;
}

.category-side-nav {
  gap: 4px;
}

.category-side-link {
  min-height: 40px;
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  color: #052e2b;
}

.category-side-link.active {
  background: #e6ece8;
}

.category-side-link:hover {
  background: #f3f5f4;
}

/* head */
.category-head {
  margin-bottom: 16px;
}

.category-title {
  font-size: 34px;
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.category-toolbar {
  margin-top: 14px;
  gap: 14px;
}

.category-filters {
  gap: 8px;
}

.category-filter-btn,
.category-sort-btn {
  height: 46px;
  padding: 0 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.category-sort {
  gap: 10px;
  font-size: 13px;
}

/* grid */
.category-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 20px;
  margin-bottom: 30px;
}

.category-card {
  transition: .16s ease;
}

.category-card:hover {
  transform: translateY(-2px);
}

.category-card-image {
  aspect-ratio: 1/0.73;
  margin-bottom: 10px;
  border-radius: 2px;
}

.category-card-title {
  font-size: 17px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.category-card-price {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: #5f5f68;
}

.category-card-art {
  font-size: 32px;
}

.category-card-art.black-circle {
  width: 110px;
  height: 110px;
  font-size: 20px;
}

.category-badge,
.category-stock-badge {
  left: 10px;
  top: 10px;
  min-height: 26px;
  padding: 4px 9px;
  font-size: 11px;
  border-radius: 999px;
}

/* how it works */
.category-info-section {
  margin-bottom: 28px;
}

.category-info-section h2,
.category-faq-head h2 {
  margin-bottom: 16px;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.category-info-grid {
  gap: 16px;
}

.category-info-card {
  padding: 16px;
  border-radius: 18px;
}

.category-info-visual {
  height: 140px;
  margin-bottom: 16px;
  border-radius: 14px;
  font-size: 30px;
}

.category-info-card h3 {
  margin-bottom: 8px;
  font-size: 17px;
  line-height: 1.2;
}

.category-info-card p {
  font-size: 13px;
  line-height: 1.55;
}

/* faq */
.category-faq-head p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
}

.category-faq-question {
  min-height: 62px;
  font-size: 17px;
  line-height: 1.3;
}

.category-faq-answer {
  padding: 0 0 16px;
}

.category-faq-answer p {
  font-size: 14px;
  line-height: 1.65;
}

/* tablet */
@media (max-width:1180px) {
  .category-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .category-sidebar {
    position: static;
  }

  .category-side-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

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

/* mobile */
@media (max-width:980px) {
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .category-title {
    font-size: 30px;
  }
}

@media (max-width:640px) {
  .category-page {
    margin: 10px 0 20px;
  }

  .category-layout {
    gap: 16px;
  }

  .category-side-nav {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .category-side-link {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 10px;
  }

  .category-title {
    font-size: 26px;
  }

  .category-toolbar {
    margin-top: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .category-filters {
    gap: 8px;
  }

  .category-filter-btn,
  .category-sort-btn {
    height: 40px;
    padding: 0 12px;
    font-size: 12px;
  }

  .category-sort {
    justify-content: space-between;
    width: 100%;
    font-size: 12px;
  }

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

  .category-card-title {
    font-size: 16px;
  }

  .category-card-price {
    font-size: 12.5px;
  }

  .category-info-section h2,
  .category-faq-head h2 {
    font-size: 24px;
    margin-bottom: 14px;
  }

  .category-info-card {
    padding: 14px;
    border-radius: 16px;
  }

  .category-info-visual {
    height: 110px;
    font-size: 26px;
    margin-bottom: 14px;
  }

  .category-info-card h3 {
    font-size: 16px;
  }

  .category-info-card p {
    font-size: 12.5px;
  }

  .category-faq-question {
    min-height: 56px;
    font-size: 15px;
  }

  .category-faq-answer p {
    font-size: 13px;
  }
}

/* mega menu polish */
.mega-menu {
  padding-top: 8px;
}

.mega-menu-inner {
  border-radius: 22px;
  padding: 18px;
  gap: 16px;
}

.mega-title {
  font-size: 11px;
  margin-bottom: 8px;
  letter-spacing: .08em;
}

.mega-link {
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
}

.mega-col-featured {
  padding-left: 16px;
}

.mega-brand-card {
  padding: 8px;
  border-radius: 12px;
}

.mega-brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.mega-brand-copy strong {
  font-size: 14px;
}

.mega-brand-copy small {
  font-size: 12px;
}

/* homepage navigation polish */
.quick-rail-item,
.chip,
.btn-outline,
.brand-card,
.product-card {
  transition: .16s ease;
}

.quick-rail-item:hover,
.chip:hover {
  transform: translateY(-1px);
}

.section-head .btn-outline {
  white-space: nowrap;
}

.brand-card,
.product-card {
  text-decoration: none;
}

/* ===================== */
/* REAL CARD IMAGES - HOMEPAGE */
/* ===================== */

.brand-card-image,
.product-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.72;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 12px;
}

.brand-card-image img,
.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .22s ease;
}

.brand-card:hover .brand-card-image img,
.product-card:hover .product-card-image img {
  transform: scale(1.02);
}

.brand-card-top-image,
.product-card-top-image {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.brand-rating-inline,
.product-rating-inline {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #effaf1;
  border: 1px solid #cfe9d4;
  color: #16a34a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.brand-card.no-image .brand-card-image,
.product-card.no-image .product-card-image {
  display: none;
}

@media (max-width:640px) {

  .brand-card-image,
  .product-card-image {
    border-radius: 12px;
    margin-bottom: 10px;
  }

  .brand-rating-inline,
  .product-rating-inline {
    min-height: 24px;
    padding: 3px 8px;
    font-size: 11px;
  }
}

/* ===================== */
/* HOW IT WORKS - VISUAL */
/* ===================== */

.how-visual-section {
  margin: 22px auto 26px;
}

.how-visual-head {
  margin-bottom: 18px;
}

.how-visual-head h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.04;
  letter-spacing: -0.05em;
  color: #052e2b;
  font-weight: 800;
}

.how-visual-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.how-visual-card {
  min-width: 0;
}

/* HOW IT WORKS - CLEAN VERSION */

.how-visual-image {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #eef2f1;
  aspect-ratio: 282 / 141;
  margin-bottom: 16px;
}

.how-visual-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.how-visual-image img{
  transition:transform .25s ease;
}

.how-visual-card:hover img{
  transform:scale(1.03);
}


.how-visual-card h3 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #052e2b;
  font-weight: 800;
}

.how-visual-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #4b5563;
  max-width: 95%;
}

@media (max-width:980px) {
  .how-visual-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .how-visual-head h2 {
    font-size: 30px;
  }
}

@media (max-width:640px) {
  .how-visual-section {
    margin: 18px auto 20px;
  }

  .how-visual-head {
    margin-bottom: 14px;
  }

  .how-visual-head h2 {
    font-size: 26px;
  }

  .how-visual-image {
    border-radius: 16px;
    margin-bottom: 12px;
  }

  .how-visual-card h3 {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .how-visual-card p {
    font-size: 13px;
    max-width: 100%;
  }
}

.trust-strip {
  margin-bottom: 14px !important;
}

/* ===================== */
/* GLOBAL CARD IMAGE RATIO SYSTEM */
/* ===================== */

:root{
  --card-media-ratio: 282 / 141;
}

/* homepage + search + category */
.brand-card-image,
.product-card-image,
.search-card .product-card-image,
.category-card-image{
  aspect-ratio: var(--card-media-ratio) !important;
  overflow: hidden;
  background: #fff;
}

.brand-card-image img,
.product-card-image img,
.search-card .product-card-image img,
.category-card-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* homepage brand/product cards */
.brand-card,
.product-card{
  display: flex;
  flex-direction: column;
}

.brand-card-top-image,
.product-card-top-image{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.brand-name,
.product-name{
  flex: 1 1 auto;
  min-width: 0;
}

.brand-meta,
.product-desc,
.search-price,
.category-card-price{
  color:#5f5f68;
}

/* search result */
.search-card{
  text-decoration: none;
}

.search-card .product-card-image{
  border-radius: 14px;
  margin-bottom: 10px;
}

/* category cards */
.category-card{
  text-decoration: none;
}

.category-card-image{
  border-radius: 12px;
  margin-bottom: 10px;
}

.category-card-title{
  min-height: 40px;
}

.category-card-price{
  min-height: 36px;
}

/* make homepage/product cards line up better */
.brand-name{
  min-height: 42px;
}

.product-name{
  min-height: 38px;
}

.product-desc{
  min-height: 38px;
}

/* compact mobile but still consistent */
@media (max-width:640px){
  .brand-card-image,
  .product-card-image,
  .search-card .product-card-image,
  .category-card-image{
    border-radius: 12px;
  }

  .brand-name,
  .product-name,
  .category-card-title{
    min-height: auto;
  }

  .product-desc,
  .category-card-price{
    min-height: auto;
  }
}

.brand-card-image img,
.product-card-image img,
.category-card-image img{
  transition: transform .22s ease;
}

.brand-card:hover .brand-card-image img,
.product-card:hover .product-card-image img,
.category-card:hover .category-card-image img{
  transform: scale(1.02);
}

/* ===================== */
/* MOBILE HORIZONTAL 2-ROW PRODUCT RAILS - REFINED */
/* ===================== */

@media (max-width: 640px) {
  .brand-grid.compact-brand-grid,
  .product-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 174px;
    grid-template-rows: repeat(2, auto);
    gap: 16px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    padding-right: 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;

    /* hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .brand-grid.compact-brand-grid::-webkit-scrollbar,
  .product-grid::-webkit-scrollbar {
    display: none;
  }

  .brand-grid.compact-brand-grid > *,
  .product-grid > * {
    scroll-snap-align: start;
    min-width: 0;
  }

  .brand-card,
  .product-card {
    width: 174px;
    padding: 12px;
    border-radius: 16px;
  }

  .brand-card-image,
  .product-card-image {
    margin-bottom: 10px;
    border-radius: 12px;
  }

  .brand-card-top-image,
  .product-card-top-image {
    gap: 8px;
    margin-bottom: 6px;
    align-items: flex-start;
  }

  .brand-name,
  .product-name {
    font-size: 14px;
    line-height: 1.22;
    min-height: 34px;
    margin-bottom: 0;
  }

  .brand-rating-inline,
  .product-rating-inline {
    min-height: 24px;
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 999px;
    flex: 0 0 auto;
  }

  .brand-meta,
  .product-price {
    font-size: 12.5px;
    line-height: 1.4;
  }

  .brand-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }

  .product-desc {
    font-size: 12px;
    line-height: 1.45;
    min-height: 32px;
    margin-bottom: 10px;
    color: #667085;
  }

  .product-bottom {
    padding-top: 8px;
  }

  .mini-label {
    font-size: 10px;
    margin-bottom: 2px;
  }

  .btn-mini{
  min-width:78px;
  height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid #d9e1e7;
  background:#fff;
  color:#111827;
  font-size:10.5px;
  font-weight:700;
  box-shadow:none;
}
}

@media (max-width: 640px) {
  .popular-section {
    padding: 14px;
  }

  .popular-section .section-head {
    margin-bottom: 12px;
  }

  .popular-section .section-title {
    font-size: 17px;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  .popular-section .section-subtitle {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
  }

  .popular-section .brand-name {
    font-size: 13px;
    line-height: 1.2;
    min-height: 32px;
  }

  .popular-section .brand-meta {
    font-size: 12px;
  }

  .popular-section .brand-rating-inline {
    background: #f3faf4;
    border-color: #dcefe0;
    font-size: 10.5px;
  }
}

/* ===================== */
/* GLOBAL MOBILE CARD RAILS */
/* clean, no scrollbar, no edge fade */
/* ===================== */

@media (max-width:640px){
  .mobile-rail-wrap{
    position:static;
  }

  .brand-grid.compact-brand-grid,
  .product-grid{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:174px;
    grid-template-rows:repeat(2, auto);
    gap:16px 14px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 2px 2px 0;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .brand-grid.compact-brand-grid::-webkit-scrollbar,
  .product-grid::-webkit-scrollbar{
    display:none;
  }

  .brand-grid.compact-brand-grid > *,
  .product-grid > *{
    scroll-snap-align:start;
    min-width:0;
  }

  .brand-card,
  .product-card{
    width:174px;
    padding:12px;
    border-radius:16px;
    box-shadow:none;
    transform:none !important;
  }

  .brand-card:hover,
  .product-card:hover{
    transform:none;
  }

  .brand-card-image,
  .product-card-image{
    margin-bottom:10px;
    border-radius:12px;
  }

  .brand-card-top-image,
  .product-card-top-image{
    gap:8px;
    margin-bottom:6px;
    align-items:flex-start;
  }

  .brand-name,
  .product-name{
    font-size:14px;
    line-height:1.22;
    min-height:34px;
    margin-bottom:0;
  }

  .brand-rating-inline,
  .product-rating-inline{
    min-height:24px;
    padding:3px 8px;
    font-size:11px;
    border-radius:999px;
    flex:0 0 auto;
  }

  .brand-meta,
  .product-price{
    font-size:12.5px;
    line-height:1.4;
    color:#5f5f68;
  }

  .brand-meta{
    display:flex;
    justify-content:space-between;
    gap:8px;
  }

  .product-desc{
    font-size:12px;
    line-height:1.45;
    min-height:32px;
    margin-bottom:10px;
    color:#667085;
  }

  .product-bottom{
    padding-top:8px;
  }

  .mini-label{
    font-size:10px;
    margin-bottom:2px;
  }

  .btn-mini{
    height:30px;
    padding:0 10px;
    font-size:11px;
    border-radius:999px;
  }

  /* section headings */
  .popular-section .section-title,
  .product-section .section-title{
    font-size:17px;
    line-height:1.15;
    letter-spacing:-0.02em;
  }

  .popular-section .section-subtitle,
  .product-section .section-subtitle{
    margin-top:4px;
    font-size:12px;
    line-height:1.35;
  }
}
/* PRODUCT CARDS WITHOUT DESCRIPTION */
.product-card{
  display:flex;
  flex-direction:column;
}

.product-card-top-image{
  margin-bottom:10px;
}

.product-name{
  min-height:auto;
  font-size:15px;
  line-height:1.22;
  letter-spacing:-0.01em;
}

.product-bottom{
  margin-top:auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  padding-top:10px;
  border-top:1px solid #eef2f7;
}

.product-bottom > div:first-child{
  min-width:0;
}

.mini-label{
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#94a3b8;
  margin-bottom:4px;
}

.product-price{
  font-size:13px;
  line-height:1.35;
  font-weight:700;
  color:#475569;
}

.btn-mini{
  flex:0 0 auto;
  min-width:82px;
  justify-content:center;
  border:1px solid #dbe1e6;
  background:#fff;
  color:#111827;
}

/* mobile rail tighter after removing desc */
@media (max-width:640px){
  .product-card{
    padding:12px;
  }

  .product-card-image{
    margin-bottom:10px;
  }

  .product-card-top-image{
    margin-bottom:10px;
  }

  .product-name{
    font-size:14px;
    line-height:1.2;
  }

  .product-bottom{
    padding-top:8px;
    gap:8px;
  }

  .mini-label{
    font-size:9.5px;
    margin-bottom:3px;
  }

  .product-price{
    font-size:12.5px;
    line-height:1.3;
  }

  .btn-mini{
    min-width:76px;
    height:30px;
    padding:0 10px;
    font-size:11px;
  }
}

/* ===================== */
/* PRODUCT CARD MOBILE POLISH V2 */
/* ===================== */

.product-card{
  border:1px solid #dfe5ea;
  background:#fff;
}

.product-card-image{
  border-radius:12px;
  border:1px solid #e9eef2;
  background:#fff;
}

.product-card-image img{
  display:block;
}

.product-card-top-image{
  align-items:center;
  margin-bottom:10px;
}

.product-name{
  font-size:15px;
  line-height:1.18;
  font-weight:800;
  letter-spacing:-0.02em;
  color:#111827;
}

.product-rating-inline{
  min-height:24px;
  padding:3px 8px;
  border-radius:999px;
  background:#eff9f0;
  border:1px solid #d8eddc;
  color:#16a34a;
  font-size:11px;
  font-weight:800;
  flex:0 0 auto;
}

.product-bottom{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  padding-top:10px;
  border-top:1px solid #eef2f7;
}

.mini-label{
  font-size:9.5px;
  line-height:1;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#94a3b8;
  margin-bottom:5px;
}

.product-price{
  font-size:14px;
  line-height:1.25;
  font-weight:700;
  color:#475569;
}

.btn-mini{
  min-width:78px;
  height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid #d9e1e7;
  background:#fff;
  color:#111827;
  font-size:10.5px;
  font-weight:700;
  box-shadow:none;
}

/* mobile rail final */
@media (max-width:640px){
  .product-grid{
    gap:14px 12px;
  }

  .product-card{
    width:170px;
    padding:12px;
    border-radius:16px;
  }

  .product-card-image{
    margin-bottom:10px;
  }

  .product-name{
    font-size:14px;
    line-height:1.18;
  }

  .product-rating-inline{
    min-height:23px;
    padding:3px 7px;
    font-size:10.5px;
  }

  .product-bottom{
    gap:8px;
    padding-top:8px;
  }

  .mini-label{
    font-size:9px;
    margin-bottom:4px;
  }

  .product-price{
    font-size:12.5px;
    line-height:1.25;
  }

  .btn-mini{
    min-width:74px;
    height:30px;
    padding:0 10px;
    font-size:10.5px;
  }
}
.product-name,
.brand-name{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}