/* =========================================================
   BDAGSTORE — PREMIUM RESPONSIVE MARKETPLACE UI
   Visual layer only.
   JavaScript / wallet / catalog behavior untouched.
   ========================================================= */

:root {
  --store-ink: #071b2f;
  --store-ink-soft: #18344e;
  --store-muted: #60758a;

  --store-teal: #087f7a;
  --store-teal-dark: #05635f;
  --store-blue: #0d5bd7;
  --store-cyan: #18c7c1;

  --store-white: #ffffff;
  --store-soft: #f4f8fa;
  --store-border: rgba(7, 27, 47, .09);

  --store-radius-sm: 14px;
  --store-radius-md: 22px;
  --store-radius-lg: 30px;

  --store-shadow-sm:
    0 8px 24px rgba(7, 27, 47, .07);

  --store-shadow-md:
    0 18px 45px rgba(7, 27, 47, .10);

  --store-shadow-lg:
    0 30px 80px rgba(7, 27, 47, .13);
}

/* =========================================================
   GLOBAL / ZOOM-SAFE FOUNDATION
   ========================================================= */

html {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  overflow-x: hidden;

  color: var(--store-ink) !important;

  background:
    radial-gradient(
      circle at 85% 5%,
      rgba(24, 199, 193, .10),
      transparent 30%
    ),
    radial-gradient(
      circle at 8% 30%,
      rgba(13, 91, 215, .06),
      transparent 30%
    ),
    #f7fafb !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

button {
  max-width: 100%;
}

/* =========================================================
   MAIN CANVAS
   ========================================================= */

.site-shell {
  width: 100% !important;
  min-height: 100vh !important;
  overflow-x: clip;
}

main {
  width: min(
    1180px,
    calc(100% - clamp(24px, 6vw, 96px))
  ) !important;

  margin-inline: auto !important;

  padding:
    clamp(28px, 5vw, 64px)
    0
    clamp(48px, 7vw, 88px) !important;
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
  width: 100% !important;

  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(360px, .9fr) !important;

  align-items: center !important;

  gap: clamp(32px, 5vw, 72px) !important;

  min-height: 0 !important;

  padding:
    clamp(48px, 7vw, 82px)
    0
    clamp(44px, 6vw, 72px) !important;
}

.hero-copy {
  min-width: 0;
  position: relative;
  z-index: 2;
}

.eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;

  max-width: 100%;

  padding: 8px 14px !important;

  border:
    1px solid rgba(8, 127, 122, .18) !important;

  border-radius: 999px !important;

  background:
    rgba(8, 127, 122, .06) !important;

  color: var(--store-teal-dark) !important;

  font-size: clamp(9px, .8vw, 11px) !important;
  font-weight: 850 !important;
  letter-spacing: .10em !important;
}

.hero h1,
.hero-copy h1 {
  max-width: 760px !important;

  margin:
    clamp(16px, 2vw, 22px)
    0
    clamp(16px, 2vw, 24px) !important;

  color: var(--store-ink) !important;

  font-size:
    clamp(42px, 5.2vw, 76px) !important;

  line-height: .96 !important;
  letter-spacing: -.065em !important;
  font-weight: 900 !important;
}

.hero h1 span {
  color: var(--store-teal) !important;
}

.hero-copy > p {
  width: min(100%, 650px);

  margin: 0 !important;

  color: var(--store-muted) !important;

  font-size:
    clamp(14px, 1.25vw, 17px) !important;

  line-height: 1.65 !important;
}

.hero-stats {
  display: flex !important;
  flex-wrap: wrap !important;

  gap: 14px !important;

  margin-top:
    clamp(22px, 3vw, 32px) !important;
}

.hero-stats div {
  min-width: 145px;

  padding: 13px 15px;

  border:
    1px solid var(--store-border);

  border-radius: 15px;

  background:
    rgba(255, 255, 255, .88);

  box-shadow: var(--store-shadow-sm);
}

.hero-stats strong {
  color: var(--store-ink) !important;
}

.hero-stats span {
  color: var(--store-muted) !important;
}

/* =========================================================
   HERO NFT
   ========================================================= */

.hero-card {
  position: relative !important;

  width: 100% !important;

  min-height:
    clamp(390px, 42vw, 540px) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;

  border:
    1px solid rgba(8, 127, 122, .10) !important;

  border-radius:
    clamp(24px, 3vw, 34px) !important;

  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(24, 199, 193, .14),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.96),
      rgba(239,248,249,.88)
    ) !important;

  box-shadow: var(--store-shadow-lg) !important;
}

.hero-card-glow {
  pointer-events: none !important;
}

.hero-nft-placeholder {
  position: relative !important;

  width: 100% !important;
  height: 100% !important;

  min-height: inherit !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding:
    clamp(18px, 3vw, 34px) !important;

  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  transform: none !important;
}

.hero-nft-placeholder::before,
.hero-nft-placeholder::after {
  display: none !important;
  content: none !important;
}

.hero-nft-stage {
  width: 100% !important;
  height: 100% !important;
  min-height: inherit !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#hero-nft-image {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width:
    min(88%, 470px) !important;

  max-height:
    min(82%, 470px) !important;

  min-width: 0 !important;
  min-height: 0 !important;

  object-fit: contain !important;
  object-position: center !important;

  margin: 0 auto !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   MARKETPLACE
   ========================================================= */

.market-section {
  width: 100% !important;
  margin-top: clamp(20px, 4vw, 48px) !important;
  padding-top: 0 !important;
}

.section-heading {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 20px !important;

  margin-bottom:
    clamp(16px, 2vw, 24px) !important;
}

.section-heading h2 {
  margin: 7px 0 5px !important;

  color: var(--store-ink) !important;

  font-size:
    clamp(27px, 3vw, 38px) !important;

  font-weight: 900 !important;
  letter-spacing: -.05em !important;
}

.section-heading p {
  color: var(--store-muted) !important;
}

/* =========================================================
   CAROUSEL
   ========================================================= */

.carousel-frame {
  width: 100% !important;
  max-width: 100% !important;

  overflow-x: auto !important;
  overflow-y: visible !important;

  padding:
    8px 4px
    clamp(18px, 2vw, 26px) !important;

  scrollbar-width: thin !important;

  scroll-behavior: smooth !important;

  touch-action: pan-x pan-y !important;
}

.catalog,
#catalog {
  display: flex !important;
  align-items: stretch !important;

  width: max-content !important;
  min-width: 100% !important;

  gap:
    clamp(14px, 1.6vw, 22px) !important;
}

/* =========================================================
   COLLECTION CARDS
   ========================================================= */

.coupon {
  width:
    clamp(240px, 21vw, 286px) !important;

  min-width:
    clamp(240px, 21vw, 286px) !important;

  max-width:
    clamp(240px, 21vw, 286px) !important;

  min-height: 0 !important;

  overflow: hidden !important;

  border:
    1px solid var(--store-border) !important;

  border-radius:
    clamp(18px, 2vw, 26px) !important;

  background:
    rgba(255,255,255,.96) !important;

  box-shadow: var(--store-shadow-sm) !important;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease !important;
}

.coupon:hover {
  transform: translateY(-5px) !important;

  border-color:
    rgba(8,127,122,.28) !important;

  box-shadow:
    0 20px 44px rgba(7,27,47,.12) !important;
}

.coupon.selected {
  border:
    2px solid var(--store-teal) !important;

  box-shadow:
    0 0 0 5px rgba(8,127,122,.08),
    0 20px 46px rgba(8,127,122,.14) !important;
}

/* Artwork area: transparent, no artificial frame. */

.coupon-image-wrap {
  width: 100% !important;

  height:
    clamp(260px, 24vw, 315px) !important;

  min-height:
    clamp(260px, 24vw, 315px) !important;

  max-height:
    clamp(260px, 24vw, 315px) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding:
    clamp(12px, 1.6vw, 20px) !important;

  margin: 0 !important;

  background: transparent !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  overflow: hidden !important;
}

.coupon-image-wrap::before,
.coupon-image-wrap::after {
  display: none !important;
  content: none !important;
}

.coupon-image {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 100% !important;
  max-height: 100% !important;

  min-width: 0 !important;
  min-height: 0 !important;

  object-fit: contain !important;
  object-position: center !important;

  margin: auto !important;
  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* =========================================================
   SELECTED NFT
   ========================================================= */

#selection-panel {
  width: 100% !important;

  margin-top:
    clamp(22px, 3vw, 34px) !important;

  padding:
    clamp(18px, 2.5vw, 30px) !important;

  overflow: hidden !important;

  border:
    1px solid var(--store-border) !important;

  border-radius:
    clamp(22px, 2.5vw, 30px) !important;

  background:
    rgba(255,255,255,.94) !important;

  box-shadow: var(--store-shadow-md) !important;
}

#selection-content,
.selection-content {
  width: 100% !important;

  display: grid !important;

  grid-template-columns:
    minmax(280px, .9fr)
    minmax(0, 1.5fr) !important;

  gap:
    clamp(24px, 4vw, 50px) !important;

  align-items: center !important;
}

.selection-nft {
  min-width: 0 !important;
  min-height:
    clamp(320px, 32vw, 390px) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding:
    clamp(8px, 1.5vw, 18px) !important;

  background: transparent !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  overflow: hidden !important;
}

.selection-nft::before,
.selection-nft::after {
  display: none !important;
  content: none !important;
}

.selection-nft img,
#selection-image {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width:
    min(100%, 330px) !important;

  max-height:
    min(100%, 360px) !important;

  min-width: 0 !important;
  min-height: 0 !important;

  object-fit: contain !important;
  object-position: center !important;

  margin: auto !important;
  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#selection-code {
  font-size:
    clamp(2.3rem, 4vw, 4rem) !important;

  line-height: .95 !important;
  letter-spacing: -.055em !important;
}

#selection-discount {
  color: var(--store-teal) !important;
  font-weight: 900 !important;
}

/* =========================================================
   PURCHASE DETAILS
   ========================================================= */

.selection-details {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap:
    clamp(10px, 1.3vw, 16px) !important;
}

.price-block,
.quantity-block,
.total-block {
  min-width: 0 !important;

  padding:
    clamp(14px, 1.5vw, 18px) !important;

  border:
    1px solid var(--store-border) !important;

  border-radius: 16px !important;

  background:
    rgba(248,251,252,.92) !important;
}

.total-block {
  background:
    linear-gradient(
      135deg,
      var(--store-teal),
      #0b9993
    ) !important;

  border: 0 !important;
}

.total-block > span,
.total-block strong {
  color: #fff !important;
}

.wallet-area {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(150px, 1fr)
    minmax(150px, 1fr) !important;

  gap: 12px !important;

  margin-top:
    clamp(14px, 2vw, 20px) !important;
}

.wallet-status {
  min-width: 0 !important;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
  min-height:
    clamp(48px, 4vw, 54px) !important;

  padding:
    12px 20px !important;

  border-radius: 14px !important;

  font-weight: 850 !important;

  transition:
    transform 180ms ease,
    box-shadow 180ms ease !important;
}

.btn-primary,
.btn-mint {
  background:
    linear-gradient(
      135deg,
      var(--store-teal),
      var(--store-blue)
    ) !important;

  border: 0 !important;

  box-shadow:
    0 12px 28px rgba(8,127,122,.20) !important;
}

.btn-primary:hover:not(:disabled),
.btn-mint:hover:not(:disabled) {
  transform: translateY(-2px) !important;

  box-shadow:
    0 17px 34px rgba(8,127,122,.27) !important;
}

/* =========================================================
   SECURITY
   ========================================================= */

.security-note {
  color: var(--store-muted) !important;
}

/* =========================================================
   MODAL
   ========================================================= */

.nft-modal-card {
  width:
    min(920px, calc(100vw - 32px)) !important;

  max-height:
    calc(100dvh - 32px) !important;

  grid-template-columns:
    minmax(260px, .9fr)
    minmax(300px, 1.1fr) !important;

  gap:
    clamp(20px, 3vw, 34px) !important;

  padding:
    clamp(18px, 3vw, 30px) !important;

  border-radius:
    clamp(20px, 3vw, 30px) !important;
}

.nft-modal-image {
  min-height:
    clamp(320px, 45vw, 430px) !important;

  border-radius: 20px !important;
}

.nft-modal-image img {
  width: 100% !important;
  height: 100% !important;

  min-height: 0 !important;

  object-fit: contain !important;
}

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

@media (max-width: 1000px) {

  main {
    width:
      min(100% - 32px, 900px) !important;
  }



  .hero {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(300px, .8fr) !important;

    gap: 28px !important;
  }

  .hero h1,
  .hero-copy h1 {
    font-size:
      clamp(40px, 6vw, 62px) !important;
  }

  #selection-content,
  .selection-content {
    grid-template-columns:
      minmax(240px, .8fr)
      minmax(0, 1.2fr) !important;

    gap: 24px !important;
  }

  .selection-details {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .wallet-area {
    grid-template-columns:
      1fr 1fr !important;
  }

  .wallet-status {
    grid-column: 1 / -1;
  }
}

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

@media (max-width: 760px) {



  main {
    width:
      calc(100% - 24px) !important;

    padding-top: 28px !important;
  }

  .hero {
    grid-template-columns: 1fr !important;

    gap: 26px !important;

    padding:
      42px 0
      36px !important;
  }

  .hero-copy {
    text-align: left !important;
  }

  .hero h1,
  .hero-copy h1 {
    max-width: 680px !important;

    font-size:
      clamp(42px, 12vw, 62px) !important;
  }

  .hero-copy > p {
    font-size: 15px !important;
  }

  .hero-stats {
    gap: 10px !important;
  }

  .hero-stats div {
    flex: 1 1 140px;
    min-width: 0;
  }

  .hero-card {
    min-height:
      min(82vw, 470px) !important;

    border-radius: 26px !important;
  }

  .hero-nft-placeholder {
    min-height: inherit !important;
  }

  #hero-nft-image {
    max-width: 82% !important;
    max-height: 82% !important;
  }

  .section-heading {
    align-items: center !important;
  }

  .section-heading h2 {
    font-size:
      clamp(27px, 8vw, 34px) !important;
  }

  .carousel-frame {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  .coupon {
    width: min(78vw, 285px) !important;
    min-width: min(78vw, 285px) !important;
    max-width: min(78vw, 285px) !important;
  }

  .coupon-image-wrap {
    height: 285px !important;
    min-height: 285px !important;
    max-height: 285px !important;
  }

  #selection-panel {
    padding: 18px !important;
    border-radius: 22px !important;
  }

  #selection-content,
  .selection-content {
    grid-template-columns: 1fr !important;
  }

  .selection-nft {
    min-height:
      min(76vw, 360px) !important;
  }

  .selection-nft img,
  #selection-image {
    max-width:
      min(78vw, 300px) !important;

    max-height:
      min(78vw, 330px) !important;
  }

  .selection-details {
    grid-template-columns:
      1fr 1fr !important;
  }

  .total-block {
    grid-column: 1 / -1;
  }

  .wallet-area {
    grid-template-columns: 1fr !important;
  }

  .wallet-status {
    grid-column: auto;
  }

  .nft-modal {
    padding: 12px !important;
  }

  .nft-modal-card {
    width: 100% !important;

    max-height:
      calc(100dvh - 24px) !important;

    grid-template-columns: 1fr !important;

    overflow-y: auto !important;
  }

  .nft-modal-image {
    min-height: 300px !important;
  }
}

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

@media (max-width: 460px) {



  main {
    width:
      calc(100% - 16px) !important;
  }

  .brand-sub {
    display: none !important;
  }

  .hero {
    padding-top: 30px !important;
  }

  .hero h1,
  .hero-copy h1 {
    font-size:
      clamp(38px, 12vw, 50px) !important;
  }

  .hero-card {
    min-height:
      min(88vw, 390px) !important;
  }

  #hero-nft-image {
    max-width: 84% !important;
    max-height: 84% !important;
  }

  .coupon {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
  }

  .coupon-image-wrap {
    height: 265px !important;
    min-height: 265px !important;
    max-height: 265px !important;
  }

  .selection-details {
    grid-template-columns: 1fr !important;
  }

  .total-block {
    grid-column: auto;
  }

  #selection-code {
    font-size: 2.5rem !important;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* =========================================================
   BDAGSTORE — RESPONSIVE FOUNDATION v2
   Visual/layout only.
   JavaScript and marketplace behavior untouched.
   ========================================================= */

/* ---------- Full viewport canvas ---------- */

html,
body {
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.site-shell {
  width: 100% !important;
  min-width: 0 !important;
}

/* ---------- Full-width main canvas ---------- */

main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 80px !important;
}

/* ---------- Shared content rails ---------- */

.hero,
.market-section,
#selection-panel,
.security-note {
  width: min(1440px, calc(100% - 64px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- Premium floating header ---------- */



/* ---------- Hero ---------- */

.hero {
  min-height: clamp(560px, 72vh, 820px) !important;

  padding-top: clamp(56px, 8vh, 100px) !important;
  padding-bottom: clamp(40px, 6vh, 80px) !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(420px, .9fr) !important;

  gap: clamp(32px, 5vw, 90px) !important;
}

/* ---------- Hero typography ---------- */

.hero-copy h1 {
  font-size: clamp(3.2rem, 5.6vw, 6.4rem) !important;
  line-height: .94 !important;
  letter-spacing: -.065em !important;
  max-width: 780px !important;
}

.hero-copy p {
  max-width: 650px !important;
  font-size: clamp(1rem, 1.2vw, 1.18rem) !important;
}

/* ---------- Hero artwork ---------- */

.hero-card {
  width: 100% !important;
  min-height: clamp(440px, 55vw, 650px) !important;

  border-radius: 34px !important;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(24, 199, 193, .16),
      transparent 48%
    ),
    rgba(255, 255, 255, .78) !important;
}

.hero-nft-placeholder {
  width: 100% !important;
  min-height: 100% !important;
  padding: clamp(20px, 3vw, 48px) !important;
}

.hero-nft-stage {
  width: 100% !important;
  min-height: clamp(390px, 50vw, 600px) !important;
}

#hero-nft-image {
  width: min(100%, 520px) !important;
  max-width: min(100%, 520px) !important;
  max-height: min(70vh, 560px) !important;

  object-fit: contain !important;
}

/* ---------- Marketplace ---------- */

.market-section {
  margin-top: 24px !important;
}

.section-heading {
  margin-bottom: 24px !important;
}

.section-heading h2 {
  font-size: clamp(2rem, 3vw, 3rem) !important;
}

/* ---------- Collection viewport ---------- */

.carousel-frame {
  width: 100% !important;
  max-width: none !important;

  overflow-x: auto !important;
  overflow-y: visible !important;

  scrollbar-width: thin !important;

  overscroll-behavior-x: contain !important;
}

/* ---------- Collection cards ---------- */

#catalog {
  width: max-content !important;
  min-width: 100% !important;
  gap: clamp(16px, 1.5vw, 24px) !important;
}

.coupon {
  width: clamp(250px, 18vw, 286px) !important;
  min-width: clamp(250px, 18vw, 286px) !important;
  flex-basis: clamp(250px, 18vw, 286px) !important;
}

/* ---------- Selected NFT ---------- */

#selection-panel {
  margin-top: clamp(28px, 4vw, 54px) !important;
}

.selection-content {
  grid-template-columns:
    minmax(300px, .85fr)
    minmax(520px, 1.5fr) !important;

  gap: clamp(24px, 4vw, 56px) !important;
}

.selection-nft {
  min-width: 0 !important;
  min-height: 390px !important;
}

.selection-nft img,
#selection-image {
  max-width: min(100%, 340px) !important;
  max-height: 430px !important;
}

/* ---------- Purchase information ---------- */

.selection-details {
  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;
}

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

@media (max-width: 1100px) {

  .topbar,
  .hero,
  .market-section,
  #selection-panel,
  .security-note {
    width: min(100% - 40px, 1100px) !important;
  }

  .hero {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(340px, .8fr) !important;

    gap: 32px !important;
  }

  .hero-copy h1 {
    font-size: clamp(3rem, 6vw, 5rem) !important;
  }

  .hero-card {
    min-height: 480px !important;
  }

  .selection-content {
    grid-template-columns:
      minmax(240px, .8fr)
      minmax(420px, 1.2fr) !important;
  }
}

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

@media (max-width: 760px) {

  .topbar,
  .hero,
  .market-section,
  #selection-panel,
  .security-note {
    width: calc(100% - 24px) !important;
  }



  .hero {
    min-height: auto !important;

    grid-template-columns: 1fr !important;

    padding-top: 42px !important;
    padding-bottom: 34px !important;

    gap: 28px !important;
  }

  .hero-copy {
    text-align: left !important;
  }

  .hero-copy h1 {
    font-size: clamp(2.8rem, 12vw, 4.5rem) !important;
  }

  .hero-copy p {
    font-size: 1rem !important;
  }

  .hero-card {
    min-height: 430px !important;
    border-radius: 28px !important;
  }

  .hero-nft-stage {
    min-height: 400px !important;
  }

  #hero-nft-image {
    width: min(82vw, 390px) !important;
    max-height: 390px !important;
  }

  .market-section {
    margin-top: 18px !important;
  }

  .section-heading {
    align-items: flex-start !important;
  }

  .section-heading h2 {
    font-size: 2rem !important;
  }

  .coupon {
    width: 270px !important;
    min-width: 270px !important;
    flex-basis: 270px !important;
  }

  #selection-panel {
    margin-top: 28px !important;
  }

  .selection-content {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .selection-nft {
    min-height: 320px !important;
  }

  .selection-nft img,
  #selection-image {
    max-width: 250px !important;
    max-height: 330px !important;
  }

  .selection-details {
    grid-template-columns: 1fr !important;
  }
}

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

@media (max-width: 480px) {

  .hero-copy h1 {
    font-size: clamp(2.55rem, 13vw, 3.5rem) !important;
  }

  .hero-card {
    min-height: 350px !important;
  }

  .hero-nft-stage {
    min-height: 330px !important;
  }

  #hero-nft-image {
    width: min(78vw, 320px) !important;
    max-height: 320px !important;
  }

  .coupon {
    width: 250px !important;
    min-width: 250px !important;
    flex-basis: 250px !important;
  }
}

/* ---------- Never allow layout layers to create page overflow ---------- */

.hero,
.market-section,
#selection-panel,
.selection-content {
  max-width: 100% !important;
}


/* =========================================================
   BDAGSTORE — TRUE ZOOM RESPONSIVE LAYOUT
   Keeps the complete composition inside the CSS viewport.
   Visual/layout only.
   ========================================================= */

/* ---------- Prevent desktop columns from forcing overflow ---------- */

.hero {
  width: min(1440px, calc(100% - 48px)) !important;
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, 0.95fr) !important;
  gap: clamp(24px, 4vw, 72px) !important;
}

.hero-copy,
.hero-card {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* ---------- Hero artwork must shrink with its column ---------- */

.hero-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.hero-nft-placeholder,
.hero-nft-stage {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#hero-nft-image {
  width: auto !important;
  max-width: 82% !important;
  height: auto !important;
  max-height: 78% !important;
}

/* ---------- Typography follows viewport ---------- */

.hero-copy h1 {
  width: 100% !important;
  max-width: 760px !important;
  font-size: clamp(2.5rem, 5.2vw, 6rem) !important;
  overflow-wrap: normal !important;
}

/* ---------- Marketplace stays inside viewport ---------- */

.market-section {
  width: min(1440px, calc(100% - 48px)) !important;
  min-width: 0 !important;
  max-width: calc(100% - 24px) !important;
}

.section-heading {
  min-width: 0 !important;
}

/* ---------- Carousel itself may scroll horizontally ---------- */

.carousel-frame {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* Cards are allowed to remain fixed inside the carousel,
   because the carousel—not the page—owns horizontal scrolling. */

#catalog {
  width: max-content !important;
  min-width: max-content !important;
}

/* ---------- Selected panel must never force page width ---------- */

#selection-panel {
  width: min(1440px, calc(100% - 48px)) !important;
  min-width: 0 !important;
  max-width: calc(100% - 24px) !important;
}

#selection-content,
.selection-content {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* ---------- Purchase columns can collapse naturally ---------- */

.selection-content {
  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(0, 1.2fr) !important;
}

.selection-details,
.wallet-area {
  min-width: 0 !important;
}

/* =========================================================
   NARROW CSS VIEWPORT
   This is what makes browser zoom behave like the reference.
   ========================================================= */

@media (max-width: 1000px) {

  .hero {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 0.8fr) !important;

    gap: 28px !important;
  }

  .hero-copy h1 {
    font-size: clamp(2.6rem, 6vw, 4.5rem) !important;
  }

  .hero-card {
    min-height: 430px !important;
  }

  #hero-nft-image {
    max-width: 80% !important;
    max-height: 75% !important;
  }

  .selection-content {
    grid-template-columns:
      minmax(0, 0.75fr)
      minmax(0, 1.25fr) !important;
  }
}

/* =========================================================
   VERY NARROW CSS VIEWPORT
   Browser zoom eventually reaches this state.
   ========================================================= */

@media (max-width: 760px) {

  .topbar,
  .hero,
  .market-section,
  #selection-panel,
  .security-note {
    width: calc(100% - 24px) !important;
    max-width: none !important;
  }

  .hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .hero-copy {
    width: 100% !important;
  }

  .hero-card {
    width: 100% !important;
    min-height: 390px !important;
  }

  #hero-nft-image {
    max-width: min(78%, 360px) !important;
    max-height: 340px !important;
  }

  .selection-content {
    grid-template-columns: 1fr !important;
  }

  .selection-details {
    grid-template-columns: 1fr !important;
  }

  .wallet-area {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- At no point should the page itself scroll sideways ---------- */

html,
body,
.site-shell,
main {
  max-width: 100% !important;
  overflow-x: hidden !important;
}


/* =========================================================
   BDAGSTORE — FLUID COMPOSITION v3
   Reference-style viewport behavior.
   Visual/layout only — no marketplace logic changes.
   ========================================================= */

/* ---------- Fluid page rails ----------
   Do not cap the customer composition at 1440px.
   This is important for browser zoom levels below 100%.
   ---------- */

.topbar,
.hero,
.market-section,
#selection-panel,
.security-note {
  width: 92vw !important;
  max-width: none !important;
  min-width: 0 !important;
}



/* ---------- Hero composition ---------- */

.hero {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;

  gap: clamp(24px, 4vw, 72px) !important;
}

/* Both columns must be allowed to shrink. */

.hero-copy,
.hero-card,
.hero-nft-placeholder,
.hero-nft-stage {
  min-width: 0 !important;
}

/* ---------- Hero text ----------
   Fluid rather than fixed-size.
   ---------- */

.hero-copy h1 {
  font-size:
    clamp(2.35rem, 5.2vw, 6.5rem) !important;

  max-width: none !important;
}

.hero-copy p {
  max-width: 48vw !important;
}

/* ---------- Hero artwork ----------
   Artwork scales with its available column.
   ---------- */

.hero-card {
  min-height:
    clamp(360px, 42vw, 650px) !important;
}

.hero-nft-placeholder {
  padding: clamp(12px, 3vw, 48px) !important;
}

.hero-nft-stage {
  min-height: 0 !important;
  height: 100% !important;
}

#hero-nft-image {
  display: block !important;
  width: auto !important;
  max-width: 82% !important;
  height: auto !important;
  max-height: 82% !important;
}

/* ---------- Marketplace ----------
   Carousel owns horizontal scrolling.
   ---------- */

.market-section {
  overflow: visible !important;
}

.carousel-frame {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* ---------- Selected NFT ----------
   Never let purchase content determine page width.
   ---------- */

#selection-panel {
  overflow: hidden !important;
}

.selection-content,
.selection-details,
.wallet-area {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* ---------- Tablet / narrow CSS viewport ---------- */

@media (max-width: 900px) {

  .topbar,
  .hero,
  .market-section,
  #selection-panel,
  .security-note {
    width: 94vw !important;
  }

  .hero {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .hero-copy p {
    max-width: 680px !important;
  }

  .hero-card {
    min-height: clamp(340px, 65vw, 520px) !important;
  }

  #hero-nft-image {
    max-width: min(72%, 390px) !important;
    max-height: 82% !important;
  }

  .selection-content {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Small CSS viewport ---------- */

@media (max-width: 600px) {

  .topbar,
  .hero,
  .market-section,
  #selection-panel,
  .security-note {
    width: calc(100% - 24px) !important;
  }

  .hero {
    padding-top: 32px !important;
  }

  .hero-copy h1 {
    font-size:
      clamp(2.35rem, 12vw, 4rem) !important;
  }

  .hero-copy p {
    max-width: 100% !important;
  }

  .hero-card {
    min-height: 330px !important;
  }

  #hero-nft-image {
    max-width: 78% !important;
    max-height: 78% !important;
  }

  .coupon {
    width: 250px !important;
    min-width: 250px !important;
    flex-basis: 250px !important;
  }
}

/* ---------- Absolutely no document-level horizontal overflow ---------- */

html,
body,
.site-shell,
main {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}


/* =========================================================
   BDAGSTORE — STABLE DESKTOP COMPOSITION v4
   Browser zoom must scale the composition naturally.
   Do NOT use viewport-width typography/dimensions here.
   ========================================================= */

/* ---------- Stable content rail ---------- */

.topbar,
.hero,
.market-section,
#selection-panel,
.security-note {
  width: min(1440px, calc(100% - 64px)) !important;
  max-width: 1440px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}



/* ---------- Stable hero ---------- */

.hero {
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, 0.95fr) !important;

  gap: 64px !important;

  min-height: 640px !important;

  padding-top: 72px !important;
  padding-bottom: 64px !important;
}

/* ---------- Stable hero typography ---------- */

.hero-copy {
  min-width: 0 !important;
}

.hero-copy h1 {
  width: auto !important;
  max-width: 760px !important;

  font-size: 76px !important;
  line-height: .94 !important;
  letter-spacing: -.065em !important;
}

.hero-copy p {
  max-width: 620px !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
}

/* ---------- Stable hero artwork ---------- */

.hero-card {
  width: 100% !important;
  max-width: 620px !important;
  min-width: 0 !important;
  min-height: 560px !important;

  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-nft-placeholder {
  width: 100% !important;
  min-height: 560px !important;
  padding: 32px !important;
}

.hero-nft-stage {
  width: 100% !important;
  height: 100% !important;
  min-height: 490px !important;
}

#hero-nft-image {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 460px !important;
  max-height: 500px !important;

  object-fit: contain !important;
}

/* ---------- Marketplace ---------- */

.market-section {
  margin-top: 24px !important;
}

.section-heading {
  margin-bottom: 24px !important;
}

.section-heading h2 {
  font-size: 44px !important;
}

/* ---------- Carousel ---------- */

.carousel-frame {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#catalog {
  width: max-content !important;
  min-width: max-content !important;

  gap: 18px !important;
}

/* ---------- Stable collection cards ---------- */

.coupon {
  width: 258px !important;
  min-width: 258px !important;
  flex-basis: 258px !important;
}

/* ---------- Stable selected panel ---------- */

#selection-panel {
  margin-top: 48px !important;
  overflow: hidden !important;
}

.selection-content {
  width: 100% !important;
  min-width: 0 !important;

  grid-template-columns:
    minmax(280px, .8fr)
    minmax(0, 1.2fr) !important;

  gap: 40px !important;
}

.selection-nft {
  min-width: 0 !important;
  min-height: 390px !important;
}

.selection-nft img,
#selection-image {
  width: auto !important;
  max-width: 340px !important;
  max-height: 430px !important;
}

/* ---------- Stable purchase information ---------- */

.selection-details {
  min-width: 0 !important;
  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;
}

.wallet-area {
  min-width: 0 !important;
}

/* =========================================================
   IMPORTANT:
   Cancel viewport-based sizing introduced by v2/v3.
   Desktop composition stays fixed and browser zoom scales it.
   ========================================================= */

.hero-copy h1,
.hero-copy p,
.hero,
.hero-card,
.hero-nft-placeholder,
.hero-nft-stage,
#hero-nft-image,
.section-heading h2,
.coupon {
  box-sizing: border-box !important;
}

/* =========================================================
   REAL MOBILE ONLY
   ========================================================= */

@media (max-width: 760px) {

  .topbar,
  .hero,
  .market-section,
  #selection-panel,
  .security-note {
    width: calc(100% - 24px) !important;
    max-width: none !important;
  }

  .hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    gap: 32px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .hero-copy h1 {
    font-size: 52px !important;
    max-width: 100% !important;
  }

  .hero-copy p {
    max-width: 100% !important;
    font-size: 16px !important;
  }

  .hero-card {
    max-width: 100% !important;
    min-height: 420px !important;
  }

  .hero-nft-placeholder {
    min-height: 420px !important;
  }

  .hero-nft-stage {
    min-height: 360px !important;
  }

  #hero-nft-image {
    max-width: 320px !important;
    max-height: 360px !important;
  }

  .selection-content {
    grid-template-columns: 1fr !important;
  }

  .selection-details {
    grid-template-columns: 1fr !important;
  }

  .wallet-area {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {

  .hero-copy h1 {
    font-size: 42px !important;
  }

  .hero-card,
  .hero-nft-placeholder {
    min-height: 350px !important;
  }

  .hero-nft-stage {
    min-height: 300px !important;
  }

  #hero-nft-image {
    max-width: 270px !important;
    max-height: 300px !important;
  }

  .coupon {
    width: 250px !important;
    min-width: 250px !important;
    flex-basis: 250px !important;
  }
}

/* ---------- Never create document-level horizontal scroll ---------- */

html,
body,
.site-shell,
main {
  max-width: 100% !important;
  overflow-x: hidden !important;
}


/* =========================================================
   BDAGSTORE — HERO MEDIA / ADVERTISING SLOT
   Empty premium space for future:
   - product video
   - service advertisement
   - promotional image
   - campaign media
   ========================================================= */

.hero-ad-card {
  position: relative !important;
  overflow: hidden !important;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(24, 199, 193, .12),
      transparent 55%
    ),
    rgba(255, 255, 255, .72) !important;
}

/* Remove NFT artwork-specific presentation from the ad card. */

.hero-ad-card .hero-card-glow {
  display: none !important;
}

.hero-ad-slot {
  position: absolute !important;
  inset: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 40px !important;

  background: transparent !important;

  border: 0 !important;
  box-shadow: none !important;
}

/* Temporary empty-state presentation.
   This is intentionally subtle so future media can replace it. */

.hero-ad-placeholder {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  width: min(100%, 520px) !important;
  min-height: 260px !important;

  text-align: center !important;

  color: var(--text-muted, #6b8299) !important;
}

.hero-ad-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 72px !important;
  height: 72px !important;

  margin-bottom: 22px !important;

  border: 2px solid rgba(8, 127, 122, .55) !important;
  border-radius: 50% !important;

  color: #087f7a !important;
  font-size: 26px !important;

  padding-left: 4px !important;
}

.hero-ad-placeholder strong {
  display: block !important;

  margin-bottom: 8px !important;

  color: #087f7a !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

.hero-ad-placeholder small {
  display: block !important;

  max-width: 360px !important;

  color: #71869a !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Future media can occupy the complete slot. */

.hero-ad-slot > img,
.hero-ad-slot > video,
.hero-ad-slot > picture,
.hero-ad-slot > iframe {
  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: cover !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {

  .hero-ad-slot {
    padding: 24px !important;
  }

  .hero-ad-placeholder {
    min-height: 220px !important;
  }

  .hero-ad-icon {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 16px !important;
  }

  .hero-ad-placeholder strong {
    font-size: 17px !important;
  }

  .hero-ad-placeholder small {
    font-size: 13px !important;
  }
}


/* =========================================================
   BDAGSTORE — FINAL HERO MEDIA SLOT
   Empty premium advertising space.
   Future media may be:
   - product photo
   - product video
   - service advertisement
   - promotional campaign
   - seasonal creative
   ========================================================= */

.hero-ad-card {
  position: relative !important;
  overflow: hidden !important;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(24, 199, 193, .10),
      transparent 58%
    ),
    rgba(255, 255, 255, .78) !important;
}

/* The advertising surface itself is intentionally empty. */

.hero-ad-slot {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  display: block !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;

  border: 0 !important;
  box-shadow: none !important;
}

/* Remove all old NFT-specific hero presentation. */

.hero-ad-card .hero-card-glow,
.hero-ad-card .hero-nft-placeholder,
.hero-ad-card .hero-nft-stage,
.hero-ad-card #hero-nft-image {
  display: none !important;
}

/* Future media fills the advertising surface. */

.hero-ad-slot > img,
.hero-ad-slot > video,
.hero-ad-slot > picture,
.hero-ad-slot > iframe {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: cover !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {

  .hero-ad-slot {
    width: 100% !important;
    height: 100% !important;
  }

}

/* ============================================================
   BDAGSTORE — AUTHORITATIVE STORE HEADER
   Single presentation layer.
   Wallet / NFT / payment logic is untouched.
   ============================================================ */

.store-header {
  position: fixed !important;
  top: 10px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  width: calc(100% - 24px) !important;
  max-width: none !important;
  height: 78px !important;
  min-height: 78px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 999999 !important;

  background: rgba(255, 255, 255, 0.62) !important;

  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 35px rgba(7, 27, 47, 0.08) !important;

  backdrop-filter: blur(20px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(120%) !important;

  overflow: visible !important;
}

.store-header .topbar {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 78px !important;
  min-height: 78px !important;
  margin: 0 !important;
  padding: 10px 16px !important;

  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) max-content !important;
  align-items: center !important;
  gap: 20px !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  overflow: visible !important;
}

/* Brand */

.store-header .brand {
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 10px !important;
}

.store-header .brand-logo {
  box-sizing: border-box !important;
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.store-header .brand-logo img {
  display: block !important;
  width: 46px !important;
  height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
  object-fit: contain !important;
  margin: 0 !important;
}

.store-header .brand-copy {
  min-width: 0 !important;
  overflow: hidden !important;
}

.store-header .brand-name {
  color: #02204B !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

.store-header .brand-sub {
  margin-top: 3px !important;
  color: #158BA6 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

/* Primary navigation */

.store-header .store-main-nav {
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  gap: 5px !important;
}

.store-header .store-main-nav a {
  min-height: 42px !important;
  padding: 0 17px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;
  border-radius: 10px !important;

  color: #02204B !important;
  background: transparent !important;

  font-size: 13px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.store-header .store-main-nav a:hover {
  background: rgba(255,255,255,.12) !important;
  color: #ffffff !important;
}

.store-header .store-main-nav a:focus-visible {
  outline: 2px solid rgba(255,255,255,.9) !important;
  outline-offset: 2px !important;
}

.store-header .store-main-nav a[href="#catalog"] {
  background: rgba(255,255,255,.15) !important;
  color: #ffffff !important;
}

/* Wallet */

.store-header .header-wallet {
  grid-column: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: max-content !important;
  min-width: max-content !important;
  margin: 0 !important;
}

.store-header .header-wallet-btn,
.store-header #btn-conn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 140px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;

  padding: 0 21px !important;
  margin: 0 !important;

  border: 1px solid rgba(255,255,255,.55) !important;
  border-radius: 11px !important;

  background: rgba(255,255,255,.94) !important;
  color: #02204B !important;

  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  cursor: pointer !important;

  box-shadow: 0 6px 20px rgba(0,0,0,.12) !important;

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease !important;
}

.store-header .header-wallet-btn:hover:not(:disabled),
.store-header #btn-conn:hover:not(:disabled) {
  background: #ffffff !important;
  color: #02204B !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
}

.store-header .header-wallet-btn:active:not(:disabled),
.store-header #btn-conn:active:not(:disabled) {
  transform: translateY(0) !important;
}

.store-header .header-wallet-btn:focus-visible,
.store-header #btn-conn:focus-visible {
  outline: 2px solid rgba(255,255,255,.95) !important;
  outline-offset: 3px !important;
}

/* No secondary navigation in the current header */

.store-header .store-subnav {
  display: none !important;
}

/* Content clearance */

body {
  padding-top: 78px !important;
}

/* Narrow / zoomed viewport */

@media (max-width: 1300px) {
  .store-header {
    height: 72px !important;
  }

  .store-header .topbar {
    height: 72px !important;
    min-height: 72px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 12px !important;
  }

  .store-header .store-main-nav {
    display: none !important;
  }

  .store-header .brand {
    grid-column: 1 !important;
  }

  .store-header .header-wallet {
    grid-column: 3 !important;
  }

  body {
    padding-top: 72px !important;
  }
}

/* Mobile */

@media (max-width: 900px) {
  .store-header {
    height: 62px !important;
  }

  .store-header .topbar {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 62px !important;
    min-height: 62px !important;
    padding: 6px 10px !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  .store-header .brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  .store-header .brand-logo,
  .store-header .brand-logo img {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
  }

  .store-header .brand-logo {
    flex-basis: 34px !important;
  }

  .store-header .brand-name {
    font-size: 15px !important;
    line-height: 1 !important;
  }

  .store-header .brand-sub {
    display: none !important;
  }

  .store-header .header-wallet {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  .store-header .header-wallet-btn,
  .store-header #btn-conn {
    min-width: 0 !important;
    width: auto !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }

  body {
    padding-top: 62px !important;
  }
}

/* Very small screens */

@media (max-width: 430px) {
  .store-header {
    height: 56px !important;
  }

  .store-header .topbar {
    height: 56px !important;
    min-height: 56px !important;
    padding: 5px 8px !important;
    gap: 7px !important;
  }

  .store-header .brand-logo,
  .store-header .brand-logo img {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
  }

  .store-header .brand-logo {
    flex-basis: 30px !important;
  }

  .store-header .brand-name {
    font-size: 14px !important;
  }

  .store-header .header-wallet-btn,
  .store-header #btn-conn {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 11px !important;
    border-radius: 10px !important;
    font-size: 11.5px !important;
  }

  body {
    padding-top: 56px !important;
  }
}

/* ============================================================
   BDAGSTORE — MOBILE HEADER SIZE + ALIGNMENT
   Final mobile-only override.
   Desktop header remains unchanged.
   ============================================================ */

@media (max-width: 900px) {

    .store-header {
        position: fixed !important;
        top: 6px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;

        width: calc(100% - 12px) !important;
        height: 62px !important;
        min-height: 62px !important;
        max-height: 62px !important;
        margin: 0 !important;
        padding: 0 !important;

        border-radius: 17px !important;
        box-shadow: 0 10px 28px rgba(7, 27, 47, 0.09) !important;

        overflow: visible !important;
        z-index: 1000 !important;
    }

    .store-header .topbar {
        width: 100% !important;
        height: 62px !important;
        min-height: 62px !important;
        max-height: 62px !important;
        margin: 0 !important;
        padding: 7px 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }

    .store-header .brand {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    .store-header .brand-logo {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        flex: 0 0 34px !important;
    }

    .store-header .brand-name {
        font-size: 16px !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    .store-header .brand-sub {
        font-size: 9px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    .store-header .header-wallet-btn,
    .store-header #btn-conn {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 0 16px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 430px) {

    .store-header,
    .store-header .topbar {
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
    }

    .store-header .topbar {
        padding: 6px 10px !important;
        gap: 8px !important;
    }

    .store-header .brand {
        gap: 7px !important;
    }

    .store-header .brand-logo {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        flex-basis: 30px !important;
    }

    .store-header .brand-name {
        font-size: 15px !important;
    }

    .store-header .brand-sub {
        font-size: 8px !important;
    }

    .store-header .header-wallet-btn,
    .store-header #btn-conn {
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
        padding: 0 13px !important;
        font-size: 11px !important;
        border-radius: 11px !important;
    }
}