@import url("https://db.onlinewebfonts.com/c/88ec722aea6da3c9f67189591d5f3a6e?family=Batangas");

:root {
  color-scheme: dark;
  --bg: #07101c;
  --panel: #081726;
  --panel-2: #06111d;
  --surface: #0a1d2e;
  --surface-soft: #0d2636;
  --line: #1b2d3e;
  --line-strong: #273a4c;
  --text: #e8f0fb;
  --muted: #9cb2c6;
  --dim: #6f879c;
  --cyan: #13bfd7;
  --cyan-2: #08a9c2;
  --cyan-deep: #073845;
  --gold: #f5b74b;
  --coral: #f07365;
  --mint: #76d6b2;
  --violet: #a88bff;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
  --radius: 8px;
  --max: 1570px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(19, 191, 215, 0.06), transparent 22rem),
    linear-gradient(180deg, #07101c 0%, #07111d 42%, #080f1b 100%);
  color: var(--text);
}

html:has(body.menu-locked),
body.menu-locked {
  overflow: hidden;
  touch-action: none;
}

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

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr;
  padding: 0;
  border-bottom: 1px solid rgba(156, 178, 198, 0.14);
  background:
    radial-gradient(circle at 3% 18%, rgba(19, 191, 215, 0.12), transparent 26%),
    linear-gradient(90deg, rgba(3, 9, 16, 0.98), rgba(12, 17, 27, 0.98) 58%, rgba(16, 13, 31, 0.98));
  backdrop-filter: blur(16px);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.site-header.nav-scrolled {
  background:
    radial-gradient(circle at 3% 18%, rgba(19, 191, 215, 0.1), transparent 24%),
    linear-gradient(90deg, rgba(3, 8, 14, 0.99), rgba(9, 15, 24, 0.99) 58%, rgba(13, 11, 25, 0.99));
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22);
}

@media (min-width: 1101px) {
  .site-header {
    max-height: 260px;
    overflow: hidden;
    transition:
      max-height 430ms cubic-bezier(0.22, 0.74, 0.22, 1),
      opacity 300ms ease,
      background 220ms ease,
      border-color 220ms ease,
      box-shadow 220ms ease;
  }

  .site-header.nav-hidden {
    max-height: 0;
    opacity: 0;
    border-bottom-color: transparent;
    pointer-events: none;
    box-shadow: none;
  }
}

.top-marquee {
  overflow: hidden;
  border-bottom: 1px solid rgba(156, 178, 198, 0.11);
  background: rgba(2, 7, 13, 0.74);
  color: var(--muted);
}

.top-marquee-track {
  width: max-content;
  display: flex;
  align-items: center;
  animation: marquee-slide 28s linear infinite;
}

.top-marquee-group {
  display: flex;
  align-items: center;
  gap: clamp(28px, 6vw, 78px);
  flex: 0 0 auto;
  padding: 0 clamp(20px, 4vw, 64px);
}

.top-marquee-link {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 820;
  white-space: nowrap;
}

.top-marquee-link:hover {
  color: var(--cyan);
}

.top-marquee-link .icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
}

@keyframes marquee-slide {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.header-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(260px, 420px);
  align-items: center;
  gap: clamp(14px, 1.5vw, 30px);
  min-width: 0;
  width: 100%;
  min-height: 72px;
  padding: 0 clamp(18px, 2.2vw, 46px);
  transition: min-height 260ms ease, padding 260ms ease;
}

.site-header.nav-scrolled .header-main {
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
  color: var(--text);
  font-size: clamp(1.05rem, 1.08vw, 1.28rem);
  font-weight: 800;
  letter-spacing: 0;
}

.brand-text {
  font-family: "Batangas", Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 900;
}

.brand-gem {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(19, 191, 215, 0.44);
  border-radius: 13px 20px 14px 20px;
  background:
    conic-gradient(from 210deg, #13bfd7, #76d6b2, #2b6cff, #a88bff, #13bfd7);
  box-shadow: 0 0 22px rgba(19, 191, 215, 0.24), inset 0 0 20px rgba(255, 255, 255, 0.16);
  transform: skewX(-8deg);
}

.brand-gem .icon {
  width: 24px;
  height: 24px;
  color: #eefaff;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  transform: skewX(8deg);
}

.icon {
  width: 1.18em;
  height: 1.18em;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.motion-icon {
  position: relative;
  width: 1.95em;
  height: 1.95em;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.motion-icon dotlottie-wc {
  position: absolute;
  inset: -0.36em;
  width: calc(100% + 0.72em);
  height: calc(100% + 0.72em);
  opacity: 0.86;
  pointer-events: none;
}

.motion-icon-fallback {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}

.motion-icon-fallback .icon {
  width: 1.05em;
  height: 1.05em;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: nowrap;
  min-width: 0;
  justify-self: center;
  height: auto;
  padding: 5px;
  border: 1px solid rgba(156, 178, 198, 0.16);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(5, 14, 23, 0.64);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.018), 0 10px 30px rgba(0, 0, 0, 0.24);
}

.header-menu,
.header-menu-inner {
  display: contents;
}

.drawer-head {
  display: none;
}

.menu-scrim {
  display: none;
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(5, 14, 23, 0.76);
  color: var(--text);
  transition: opacity 180ms ease, transform 180ms ease, border-color 160ms ease, background 160ms ease;
}

.menu-toggle span {
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.site-header.menu-open .menu-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header.menu-open .menu-toggle span:nth-child(2) {
  opacity: 0;
}

.site-header.menu-open .menu-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-header.menu-open .menu-toggle {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
}

.nav-pill,
.cart-pill,
.icon-button,
.chip,
.pager a,
.pager button,
.field-shell,
.select-shell,
.filter-option,
.primary-action,
.secondary-action,
.quantity-button,
.tab-button {
  border: 1px solid var(--line);
  background: rgba(5, 14, 23, 0.76);
  color: var(--text);
  border-radius: var(--radius);
}

.nav-pill,
.cart-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  font-size: clamp(0.9rem, 0.95vw, 1.05rem);
  font-weight: 640;
  white-space: nowrap;
}

.site-header .nav-pill {
  position: relative;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(232, 240, 251, 0.74);
  font-family: "Batangas", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.96rem;
  font-weight: 880;
  transition: color 160ms ease, background 160ms ease;
}

.site-header .nav-pill .icon {
  width: 1.13em;
  height: 1.13em;
  color: rgba(156, 178, 198, 0.96);
}

.site-header .nav-pill::after,
.nav-more-button::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--mint));
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 160ms ease, transform 180ms ease;
}

.nav-pill.active,
.nav-pill:hover,
.nav-icon-link.active,
.nav-icon-link:hover,
.icon-button:hover,
.secondary-action:hover,
.pager a:hover,
.pager button:hover,
.tab-button:hover {
  border-color: var(--line-strong);
  background: rgba(13, 38, 54, 0.82);
}

.site-header .nav-pill.active,
.site-header .nav-pill:hover {
  color: var(--text);
  border-color: transparent;
  background: rgba(13, 38, 54, 0.9);
}

.site-header .nav-pill.active::after,
.site-header .nav-pill:hover::after,
.nav-more.active .nav-more-button::after,
.nav-more[open] .nav-more-button::after,
.nav-more-button:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.nav-more {
  position: relative;
  height: 100%;
}

.nav-more-button {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(232, 240, 251, 0.76);
  font-family: "Batangas", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.96rem;
  font-weight: 880;
  list-style: none;
  cursor: pointer;
}

.nav-more-button::-webkit-details-marker {
  display: none;
}

.nav-more-button .icon {
  width: 1em;
  height: 1em;
  color: rgba(156, 178, 198, 0.96);
  transition: transform 160ms ease;
}

.nav-more[open] .nav-more-button .icon {
  transform: rotate(180deg);
}

.nav-more-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 20;
  width: 230px;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(156, 178, 198, 0.16);
  border-radius: var(--radius);
  background: rgba(6, 17, 29, 0.98);
  box-shadow: var(--shadow);
}

.nav-more-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius);
  color: rgba(232, 240, 251, 0.78);
  font-weight: 760;
}

.nav-more-link .icon {
  width: 1.05em;
  height: 1.05em;
  color: var(--muted);
}

.nav-more-link.active,
.nav-more-link:hover {
  background: rgba(13, 38, 54, 0.82);
  color: var(--text);
}

.site-actions {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 10px;
  justify-self: end;
  min-width: 0;
}

.site-header .field-shell {
  min-height: 52px;
  padding: 0 16px;
  border-color: rgba(156, 178, 198, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.site-header .field-shell:focus-within {
  border-color: rgba(19, 191, 215, 0.62);
  box-shadow: 0 0 0 3px rgba(19, 191, 215, 0.1);
}

.nav-icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(5, 14, 23, 0.76);
  color: var(--text);
}

.nav-icon-link::after {
  content: attr(data-label);
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(5, 14, 23, 0.98);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 760;
  white-space: nowrap;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.nav-icon-link:hover::after,
.nav-icon-link:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.mobile-product-search {
  display: none;
}

.global-search,
.shop-search {
  min-width: 0;
}

.field-shell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
}

.field-shell input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.field-shell input::placeholder {
  color: #b8c9d8;
}

.search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.search-submit:hover {
  color: var(--text);
}

.cart-pill {
  border-color: transparent;
  background: var(--cyan);
  color: #021018;
}

.compact-cart {
  min-height: 52px;
  padding: 0 15px;
  gap: 8px;
  font-weight: 820;
  border-radius: 999px;
}

.cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(2, 16, 24, 0.92);
  color: var(--cyan);
  font-size: 0.82rem;
}

.cart-pill:hover {
  background: #2bd1e4;
}

.page-band {
  border-bottom: 1px solid var(--line);
  background: rgba(8, 15, 27, 0.58);
}

.page-band-inner,
.main-content,
.footer-inner {
  width: min(var(--max), calc(100% - clamp(28px, 7vw, 120px)));
  margin: 0 auto;
  min-width: 0;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 94px;
  color: var(--muted);
  font-size: clamp(0.98rem, 1.1vw, 1.18rem);
}

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

.breadcrumb strong {
  color: var(--text);
}

.main-content {
  padding: clamp(42px, 6vw, 90px) 0 48px;
}

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
  gap: 26px;
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
}

.home-grid > * {
  min-width: 0;
}

.home-intro {
  min-height: 420px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 28px;
  padding-right: 0;
  text-align: center;
}

.home-intro h1 {
  width: min(100%, 950px);
  max-width: none;
  font-family: "Batangas", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 4.65rem;
  line-height: 0.96;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
}

.home-intro .lede {
  margin: 0 auto;
  text-align: center;
}

.home-intro .action-row {
  justify-content: center;
}

.eyebrow {
  color: var(--cyan);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  max-width: 780px;
  font-size: clamp(2.7rem, 5vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: 0;
}

h2 {
  font-size: clamp(1.55rem, 2.1vw, 2.35rem);
  letter-spacing: 0;
}

h3 {
  font-size: 1.04rem;
  letter-spacing: 0;
}

.lede {
  max-width: 690px;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.5;
}

.action-row,
.toolbar,
.section-head,
.result-meta,
.card-actions,
.summary-line,
.detail-actions,
.form-row,
.quick-links {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.primary-action,
.secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  font-weight: 780;
}

.primary-action {
  border-color: transparent;
  background: var(--cyan);
  color: #041018;
}

.primary-action:hover {
  background: #2bd1e4;
}

.secondary-action {
  color: var(--text);
}

.secondary-action.active {
  border-color: transparent;
  background: var(--cyan);
  color: #041018;
}

.home-feature {
  min-width: 0;
  min-height: 420px;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.home-feature .visual-large {
  min-height: 100%;
  border: 0;
  border-radius: 0;
}

.feature-caption {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
}

.feature-caption p,
.muted {
  color: var(--muted);
}

.shop-heading {
  display: grid;
  gap: 22px;
  margin-bottom: 52px;
}

.shop-heading h1 {
  font-size: clamp(2.15rem, 3.4vw, 3.25rem);
}

.toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(240px, 0.9fr) auto auto;
  gap: 18px;
  align-items: center;
}

.select-shell {
  position: relative;
  min-height: 52px;
  overflow: hidden;
}

.select-shell select {
  width: 100%;
  min-height: 52px;
  padding: 0 48px 0 18px;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  appearance: none;
}

.select-shell .icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 18px;
  color: var(--muted);
  white-space: nowrap;
}

.shop-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  border-top: 1px solid var(--line);
  background: rgba(6, 17, 29, 0.34);
}

.filter-panel {
  padding: 36px 28px 44px;
  border-right: 1px solid var(--line);
  background: rgba(4, 20, 35, 0.42);
}

.filter-panel h2 {
  margin: 0 0 18px;
  font-size: 1.1rem;
}

.filter-group {
  display: grid;
  gap: 12px;
  margin-bottom: 30px;
}

.filter-title {
  margin-bottom: 6px;
  font-weight: 800;
  font-size: 1.05rem;
}

.filter-option {
  display: grid;
  grid-template-columns: 1fr 20px;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  color: var(--text);
}

.filter-option input {
  width: 20px;
  height: 20px;
  accent-color: var(--cyan);
}

.price-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.price-row input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: 0;
  background: rgba(5, 14, 23, 0.76);
  color: var(--text);
}

.results-panel {
  min-width: 0;
  padding: 36px clamp(18px, 3vw, 36px) 0;
}

.result-meta {
  justify-content: space-between;
  margin-bottom: 34px;
}

.pill-label {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--radius);
  background: var(--cyan-deep);
  color: var(--muted);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 244px), 1fr));
  gap: clamp(18px, 1.35vw, 24px);
}

.product-card,
.marketplace-product-card,
.info-card,
.category-card,
.cart-row,
.checkout-panel,
.account-panel,
.order-row,
.collection-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(7, 20, 34, 0.86);
}

.product-card,
.marketplace-product-card {
  overflow: hidden;
  display: grid;
  min-height: 356px;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.product-card:hover,
.marketplace-product-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background: rgba(8, 24, 40, 0.94);
}

.card-link {
  display: grid;
  grid-template-rows: clamp(188px, 15vw, 242px) auto;
  min-width: 0;
}

.marketplace-feed {
  display: grid;
  gap: 24px;
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.marketplace-feed-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.marketplace-feed-head > div:first-child {
  display: grid;
  gap: 8px;
}

.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: clamp(16px, 1.2vw, 20px);
}

.marketplace-product-card {
  min-height: 304px;
}

.marketplace-card-link {
  display: grid;
  grid-template-rows: clamp(160px, 13vw, 204px) auto;
  min-width: 0;
}

.marketplace-card-visual {
  min-height: clamp(160px, 13vw, 204px);
}

.marketplace-card-body {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.marketplace-card-body p {
  color: var(--muted);
  line-height: 1.35;
}

.marketplace-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px 16px;
  align-self: end;
}

.marketplace-card-actions .primary-action,
.marketplace-card-actions .secondary-action {
  min-height: 42px;
  padding: 0 12px;
}

.feed-loader {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
}

.feed-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(156, 178, 198, 0.18);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: feed-spin 820ms linear infinite;
}

.feed-loader.loading {
  color: var(--text);
}

@keyframes feed-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .product-card[data-motion-card],
  .marketplace-product-card[data-motion-card] {
    opacity: 0.48;
    transform: translateY(28px) scale(0.965);
    filter: saturate(0.72) brightness(0.9);
    transition:
      opacity 420ms ease,
      transform 560ms cubic-bezier(0.2, 0.8, 0.2, 1),
      filter 560ms ease,
      border-color 160ms ease,
      background 160ms ease;
    transition-delay: calc(var(--motion-index, 0) * 28ms);
  }

  .product-card[data-motion-card].in-view,
  .marketplace-product-card[data-motion-card].in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: saturate(1.08) brightness(1);
  }

  .product-card[data-motion-card].in-view:hover,
  .marketplace-product-card[data-motion-card].in-view:hover {
    transform: translateY(-7px) scale(1.012);
  }

  .product-card[data-motion-card] .art-visual img,
  .marketplace-product-card[data-motion-card] .art-visual img {
    transition: transform 700ms ease, filter 700ms ease;
  }

  .product-card[data-motion-card].in-view:hover .art-visual img,
  .marketplace-product-card[data-motion-card].in-view:hover .art-visual img {
    transform: scale(1.045);
    filter: contrast(1.04) saturate(1.08);
  }

  html.is-scrolling.scrolling-down .product-card[data-motion-card].in-view,
  html.is-scrolling.scrolling-down .marketplace-product-card[data-motion-card].in-view {
    transform: translateY(-5px) scale(1.006);
  }

  html.is-scrolling.scrolling-up .product-card[data-motion-card].in-view,
  html.is-scrolling.scrolling-up .marketplace-product-card[data-motion-card].in-view {
    transform: translateY(5px) scale(0.998);
  }

  html.is-scrolling.scrolling-down .product-card[data-motion-card].in-view .art-visual img,
  html.is-scrolling.scrolling-down .marketplace-product-card[data-motion-card].in-view .art-visual img {
    transform: scale(1.032) translateY(-7px);
  }

  html.is-scrolling.scrolling-up .product-card[data-motion-card].in-view .art-visual img,
  html.is-scrolling.scrolling-up .marketplace-product-card[data-motion-card].in-view .art-visual img {
    transform: scale(1.032) translateY(7px);
  }
}

.art-visual {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #122235;
}

.art-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

[data-protected-image] {
  user-select: none;
  -webkit-touch-callout: none;
}

.art-visual::before,
.art-visual::after,
.art-visual span,
.art-visual b,
.art-visual i {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
}

.art-visual.has-image::before,
.art-visual.has-image::after,
.art-visual.has-image span,
.art-visual.has-image b,
.art-visual.has-image i {
  display: none;
}

.visual-large {
  min-height: clamp(360px, 48vw, 640px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.visual-strata {
  background:
    linear-gradient(135deg, rgba(246, 181, 68, 0.94), rgba(255, 116, 92, 0.72) 32%, rgba(255, 75, 157, 0.92) 58%, rgba(21, 165, 212, 0.68)),
    linear-gradient(90deg, #f7c45b, #f36b62);
}

.visual-strata::before {
  inset: 12% 4% 22% 12%;
  border-radius: 52% 48% 64% 36%;
  background: rgba(255, 209, 104, 0.66);
  filter: blur(10px);
  transform: rotate(-12deg);
}

.visual-strata::after {
  width: 70%;
  height: 18%;
  left: 10%;
  bottom: 20%;
  border-radius: 999px;
  background: rgba(121, 60, 25, 0.46);
  transform: rotate(-22deg);
}

.visual-veil {
  background: linear-gradient(180deg, #b8cbc8, #758e8b 58%, #354b52);
}

.visual-veil::before {
  left: 49%;
  bottom: -6%;
  width: 12px;
  height: 48%;
  border-radius: 8px;
  background: #c4b393;
  transform: rotate(-9deg);
}

.visual-veil::after {
  left: 43%;
  bottom: 24%;
  width: 90px;
  height: 8px;
  border-radius: 999px;
  background: #c4b393;
  transform: rotate(-35deg);
}

.visual-ceramic {
  background: radial-gradient(circle at 50% 78%, rgba(0, 0, 0, 0.25), transparent 19%), linear-gradient(180deg, #d9d2bf, #efe7d7);
}

.visual-ceramic::before,
.visual-ceramic::after,
.visual-ceramic span {
  bottom: 18%;
  border-radius: 48% 48% 12% 12%;
  background: linear-gradient(180deg, #d5a14f, #9b6c32);
  box-shadow: inset 0 13px 18px rgba(255, 255, 255, 0.23);
}

.visual-ceramic::before {
  left: 28%;
  width: 20%;
  height: 44%;
}

.visual-ceramic::after {
  left: 55%;
  width: 20%;
  height: 52%;
  background: linear-gradient(180deg, #d8b46c, #b78243);
}

.visual-ceramic span {
  left: 43%;
  width: 17%;
  height: 33%;
  background: linear-gradient(180deg, #b86d3e, #784322);
}

.visual-blocks {
  background:
    linear-gradient(90deg, #fb1717 0 22%, transparent 22%),
    linear-gradient(180deg, #f5cb25 0 31%, #0438a6 31% 65%, #f0661e 65%);
}

.visual-blocks::before {
  left: 9%;
  top: 35%;
  width: 66%;
  height: 28%;
  background: #0c79d3;
  transform: skewY(-11deg);
  box-shadow: 0 38px 0 #ed5b19;
}

.visual-vector {
  background:
    linear-gradient(90deg, transparent 31%, #f5f2e9 31% 36%, transparent 36% 64%, #f5f2e9 64% 69%, transparent 69%),
    linear-gradient(180deg, transparent 31%, #f5f2e9 31% 36%, transparent 36% 64%, #f5f2e9 64% 69%, transparent 69%),
    repeating-linear-gradient(45deg, #263333 0 20px, #d9dfd6 20px 39px, #ef4c3f 39px 50px, #7c8c84 50px 66px);
}

.visual-landscape {
  background: linear-gradient(180deg, #ffad8e 0%, #ee7f7b 35%, #6743a2 36%, #192b78 70%, #081f4a 100%);
}

.visual-landscape::before,
.visual-landscape::after {
  left: -8%;
  right: -8%;
  height: 30%;
  bottom: 10%;
  border-radius: 50% 50% 0 0;
  background: rgba(25, 36, 98, 0.88);
}

.visual-landscape::after {
  bottom: 26%;
  background: rgba(94, 67, 148, 0.74);
  transform: translateX(18%);
}

.visual-rain {
  background: linear-gradient(180deg, #0a0e16, #111c25 42%, #06121f);
}

.visual-rain::before {
  inset: 0;
  background:
    radial-gradient(circle at 52% 57%, rgba(255, 255, 255, 0.95), transparent 3%),
    radial-gradient(circle at 60% 57%, rgba(255, 255, 255, 0.78), transparent 4%),
    linear-gradient(90deg, transparent 0 45%, rgba(170, 215, 255, 0.55) 46% 48%, transparent 49%),
    repeating-linear-gradient(105deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 16px);
  filter: blur(0.2px);
}

.visual-rain::after {
  left: 36%;
  bottom: 0;
  width: 32%;
  height: 38%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), transparent);
  filter: blur(11px);
}

.visual-elm {
  background: linear-gradient(180deg, #c8b185, #e0cc9a 50%, #a9895e);
}

.visual-elm::before,
.visual-elm::after,
.visual-elm span {
  bottom: 4%;
  width: 11%;
  height: 78%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7b3f23, #b27145, #63341d);
}

.visual-elm::before {
  left: 29%;
}

.visual-elm::after {
  left: 50%;
  height: 66%;
  transform: rotate(-18deg);
}

.visual-elm span {
  left: 39%;
  height: 54%;
  transform: rotate(18deg);
}

.visual-saturated {
  background:
    radial-gradient(circle at 20% 70%, #f8d926, transparent 22%),
    radial-gradient(circle at 78% 22%, #f44933, transparent 24%),
    radial-gradient(circle at 48% 46%, #109dd1, transparent 25%),
    linear-gradient(135deg, #5b0b1a, #f8aa1c 36%, #d52037 60%, #098ba7);
}

.visual-saturated::before {
  inset: 0;
  background: repeating-linear-gradient(18deg, rgba(255, 255, 255, 0.19) 0 3px, transparent 3px 18px);
  mix-blend-mode: overlay;
}

.visual-aurora {
  background:
    radial-gradient(circle at 68% 22%, rgba(118, 214, 178, 0.72), transparent 26%),
    radial-gradient(circle at 28% 36%, rgba(168, 139, 255, 0.75), transparent 28%),
    linear-gradient(150deg, #0c2343, #153b5c 44%, #401f5c);
}

.visual-aurora::before {
  left: 8%;
  top: 50%;
  width: 92%;
  height: 18%;
  border-radius: 999px;
  background: rgba(19, 191, 215, 0.5);
  transform: rotate(-9deg);
  filter: blur(7px);
}

.visual-paper {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0 7%, transparent 7%),
    repeating-linear-gradient(135deg, #f1eee5 0 24px, #222f35 24px 44px, #ed6c55 44px 56px, #c4cbbb 56px 72px);
}

.visual-paper::before {
  left: 16%;
  top: 14%;
  width: 64%;
  height: 66%;
  border: 10px solid rgba(255, 255, 255, 0.78);
}

.visual-ink {
  background: #e6dccd;
}

.visual-ink::before {
  inset: 16%;
  border-radius: 49% 51% 43% 57%;
  background:
    radial-gradient(circle at 58% 42%, transparent 0 16%, #0b141f 17% 19%, transparent 20%),
    conic-gradient(from 120deg, #111926, #284c58, #f07365, #111926);
}

.visual-ink::after {
  inset: 32%;
  border-radius: 50%;
  background: #e6dccd;
}

.visual-lightbox {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 36%),
    repeating-linear-gradient(90deg, #08223b 0 18px, #143452 18px 36px, #f5b74b 36px 46px, #0c1a2a 46px 62px);
}

.visual-lightbox::before {
  left: 18%;
  top: 18%;
  width: 64%;
  height: 64%;
  border: 2px solid rgba(255, 255, 255, 0.62);
}

.visual-collage {
  background: linear-gradient(135deg, #f4d06f, #e75b77 45%, #0f95ba);
}

.visual-collage::before {
  left: 9%;
  top: 11%;
  width: 42%;
  height: 52%;
  background: #f5f2e9;
  transform: rotate(-7deg);
  box-shadow: 115px 48px 0 #172536;
}

.visual-collage::after {
  right: 10%;
  top: 14%;
  width: 38%;
  height: 44%;
  background: #f07365;
  transform: rotate(11deg);
  opacity: 0.92;
}

.visual-nocturne {
  background:
    radial-gradient(circle at 70% 20%, #f4f1dc 0 8%, transparent 9%),
    linear-gradient(180deg, #121a3f, #060b1b 63%, #07101c);
}

.visual-nocturne::before {
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 42%;
  background: repeating-linear-gradient(90deg, #151922 0 32px, #1f2834 32px 44px);
  transform: skewY(-5deg);
}

.visual-plaster {
  background: linear-gradient(180deg, #dfd8ca, #bbab9b);
}

.visual-plaster::before {
  left: 28%;
  top: 13%;
  width: 42%;
  height: 74%;
  border-radius: 44% 48% 30% 32%;
  background: linear-gradient(90deg, #ece2d5, #a7917a);
  box-shadow: inset -18px 0 20px rgba(67, 54, 44, 0.26);
}

.visual-plaster::after {
  left: 39%;
  top: 12%;
  width: 25%;
  height: 26%;
  border-radius: 50%;
  background: #e9dfd2;
}

.card-body {
  display: grid;
  gap: 10px;
  padding: 16px 15px 15px;
  min-width: 0;
}

.title-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
}

.title-price h3,
.title-price strong {
  font-size: clamp(1.02rem, 1.25vw, 1.25rem);
  line-height: 1.2;
}

.title-price h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.title-price strong {
  white-space: nowrap;
}

.product-card p {
  color: var(--muted);
  line-height: 1.35;
}

.card-actions {
  padding: 0 15px 15px;
  align-self: end;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
}

.icon-button.active {
  color: #07101c;
  border-color: transparent;
  background: var(--cyan);
}

.pager-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 48px;
  padding: 26px 0 34px;
  border-top: 1px solid var(--line);
}

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

.pager a,
.pager button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 46px;
  padding: 0 16px;
  font-weight: 740;
}

.pager .active {
  border-color: transparent;
  background: var(--cyan-deep);
  color: var(--cyan);
}

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 32px;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 0 42px;
  color: var(--muted);
}

.footer-links,
.socials {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-links a:hover,
.socials a:hover {
  color: var(--text);
}

.section-stack {
  display: grid;
  gap: 44px;
}

.section-head {
  justify-content: space-between;
  margin-bottom: 20px;
}

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

.artist-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 18px;
}

.artist-directory-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 104px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(7, 20, 34, 0.86);
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.artist-directory-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background: rgba(8, 24, 40, 0.94);
}

.artist-card-visual {
  width: 74px;
  height: 74px;
  min-height: 74px;
  border-radius: 50%;
  border: 1px solid var(--line);
}

.artist-directory-card span {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.artist-directory-card strong,
.artist-directory-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artist-directory-card small {
  color: var(--muted);
}

.category-card,
.collection-card,
.info-card {
  display: grid;
  gap: 16px;
  padding: 20px;
  min-height: 170px;
}

.category-card:hover,
.collection-card:hover {
  border-color: var(--line-strong);
  background: rgba(8, 24, 40, 0.94);
}

.category-swatch {
  height: 70px;
  border-radius: var(--radius);
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 520px);
  gap: 34px;
  align-items: start;
}

.detail-panel,
.cart-panel,
.checkout-grid,
.account-grid {
  display: grid;
  gap: 22px;
}

.detail-card {
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(7, 20, 34, 0.86);
}

.detail-card h1 {
  font-size: clamp(2rem, 3vw, 3.5rem);
}

.detail-price {
  font-size: clamp(1.8rem, 2.4vw, 2.8rem);
  font-weight: 850;
}

.detail-list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
  color: var(--muted);
}

.detail-list strong {
  color: var(--text);
}

.offer-panel {
  display: grid;
  gap: 15px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(19, 191, 215, 0.18);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(19, 191, 215, 0.06), transparent),
    rgba(5, 14, 23, 0.58);
}

.offer-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.offer-panel h2 {
  font-size: 1.12rem;
  line-height: 1.2;
}

.offer-deadline {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--radius);
  background: rgba(245, 183, 75, 0.16);
  color: var(--gold);
  font-size: 0.86rem;
  font-weight: 820;
}

.frame-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
}

.frame-row strong {
  color: var(--text);
}

.frame-row span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(8, 24, 40, 0.74);
}

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

.size-offer {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
  min-height: 78px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(5, 14, 23, 0.7);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.size-offer:hover,
.size-offer:has(input:checked) {
  border-color: rgba(19, 191, 215, 0.7);
  background: rgba(7, 56, 69, 0.74);
  transform: translateY(-1px);
}

.size-offer input {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--cyan);
}

.size-offer span {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.size-offer strong {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.25;
}

.size-offer strong b {
  color: var(--cyan);
  font-size: 0.95em;
}

.size-offer small {
  color: var(--muted);
  line-height: 1.35;
}

.offer-assist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(19, 191, 215, 0.34);
  border-radius: var(--radius);
  background: rgba(7, 56, 69, 0.62);
  color: var(--cyan);
  font-weight: 820;
}

.offer-assist:hover {
  border-color: rgba(19, 191, 215, 0.72);
  background: rgba(7, 56, 69, 0.86);
  color: var(--text);
}

.cart-list {
  display: grid;
  gap: 16px;
}

.cart-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px;
}

.cart-row .art-visual {
  height: 96px;
  border-radius: var(--radius);
}

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

.quantity-button {
  width: 36px;
  height: 36px;
  color: var(--text);
}

.summary-card,
.checkout-panel,
.account-panel {
  padding: 22px;
}

.summary-card {
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(13, 38, 54, 0.52);
}

.summary-line {
  justify-content: space-between;
}

.shipping-choice {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(19, 191, 215, 0.17);
  border-radius: var(--radius);
  background: rgba(5, 14, 23, 0.5);
}

.shipping-choice legend {
  padding: 0 7px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 820;
}

.shipping-choice label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(5, 14, 23, 0.68);
  cursor: pointer;
}

.shipping-choice label:has(input:checked) {
  border-color: rgba(19, 191, 215, 0.72);
  background: rgba(7, 56, 69, 0.72);
}

.shipping-choice input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--cyan);
}

.shipping-choice span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.shipping-choice small {
  color: var(--muted);
  line-height: 1.35;
}

.checkout-grid {
  grid-template-columns: minmax(0, 1fr) 360px;
}

.form-grid {
  display: grid;
  gap: 16px;
}

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

.form-field {
  display: grid;
  gap: 8px;
}

.form-field label {
  color: var(--muted);
  font-weight: 700;
}

.form-field input {
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: 0;
  background: rgba(5, 14, 23, 0.76);
  color: var(--text);
}

.account-grid {
  grid-template-columns: 260px minmax(0, 1fr);
}

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

.tab-button {
  min-height: 46px;
  padding: 0 14px;
  text-align: left;
  color: var(--text);
}

.tab-button.active {
  background: var(--cyan-deep);
  color: var(--cyan);
}

.order-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  padding: 16px;
  color: var(--muted);
}

.empty-state {
  display: grid;
  gap: 16px;
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(7, 20, 34, 0.86);
  text-align: center;
}

.notice {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  max-width: 360px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #092638;
  color: var(--text);
  box-shadow: var(--shadow);
}

.mobile-bottom-nav {
  display: none;
}

.engagement-stack {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 85;
  display: grid;
  gap: 10px;
}

.float-contact {
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(8, 24, 40, 0.96);
  color: var(--text);
  box-shadow: var(--shadow);
  animation: contact-vibrate 2.9s ease-in-out infinite;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.float-contact::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(19, 191, 215, 0.28), transparent 68%);
  opacity: 0;
  transform: scale(0.78);
  animation: contact-ring 2.9s ease-out infinite;
}

.float-contact > .motion-icon {
  z-index: 1;
}

.float-contact .icon {
  width: 26px;
  height: 26px;
  stroke-width: 2;
}

.whatsapp-float {
  width: 64px;
  height: 64px;
  border-color: transparent;
  background: #18c45c;
  color: #021208;
  animation: whatsapp-vibrate 2.4s ease-in-out infinite;
}

.whatsapp-float::before {
  background: radial-gradient(circle, rgba(24, 196, 92, 0.4), transparent 70%);
}

.call-float:hover,
.float-contact:focus-visible {
  border-color: var(--cyan);
  background: rgba(10, 34, 52, 0.98);
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  background: #28dc70;
}

.float-contact:hover,
.float-contact:focus-visible {
  animation-play-state: paused;
  transform: translateY(-2px);
}

.float-contact::after {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translate(4px, -50%);
  opacity: 0;
  pointer-events: none;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(5, 14, 23, 0.96);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 760;
  white-space: nowrap;
  transition: opacity 140ms ease, transform 140ms ease;
}

.float-contact:hover::after,
.float-contact:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

@keyframes contact-vibrate {
  0%,
  66%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  70% {
    transform: translate3d(-1px, 0, 0) rotate(-4deg);
  }

  74% {
    transform: translate3d(1px, 0, 0) rotate(4deg);
  }

  78% {
    transform: translate3d(-1px, 0, 0) rotate(-3deg);
  }

  82% {
    transform: translate3d(1px, 0, 0) rotate(3deg);
  }
}

@keyframes whatsapp-vibrate {
  0%,
  56%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }

  62% {
    transform: translate3d(-1px, 0, 0) rotate(-5deg) scale(1.04);
  }

  68% {
    transform: translate3d(1px, 0, 0) rotate(5deg) scale(1.05);
  }

  74% {
    transform: translate3d(-1px, 0, 0) rotate(-3deg) scale(1.02);
  }
}

@keyframes contact-ring {
  0%,
  58% {
    opacity: 0;
    transform: scale(0.78);
  }

  68% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.48);
  }
}

.float-contact:focus-visible,
.purchase-pop-close:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.purchase-pop {
  position: fixed;
  left: 24px;
  right: auto;
  bottom: 24px;
  z-index: 86;
  width: min(420px, calc(100vw - 32px));
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-10px, 16px, 0) scale(0.98);
  transition: opacity 220ms ease, transform 220ms ease;
}

.purchase-pop.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

.purchase-pop-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 96px;
  padding: 12px 44px 12px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(8, 24, 40, 0.98);
  box-shadow: var(--shadow);
}

.purchase-pop-card:hover {
  border-color: var(--cyan);
  background: rgba(10, 31, 48, 0.98);
}

.purchase-pop-art {
  width: 74px;
  height: 66px;
  min-height: 66px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.purchase-pop-card span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.purchase-pop-card strong,
.purchase-pop-card em,
.purchase-pop-card small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.purchase-pop-card strong {
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.25;
}

.purchase-pop-card em {
  color: var(--cyan);
  font-style: normal;
  font-weight: 760;
}

.purchase-pop-card small {
  color: var(--muted);
  line-height: 1.3;
}

.purchase-pop-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(5, 14, 23, 0.88);
  color: var(--muted);
}

.purchase-pop-close:hover {
  color: var(--text);
  border-color: var(--line-strong);
}

.not-found {
  min-height: 50vh;
  display: grid;
  place-items: center;
  text-align: center;
}

.standalone-shell {
  min-height: 100vh;
  background: #03070d;
}

.catalog-heading {
  margin-bottom: 44px;
}

.about-hero,
.compare-hero {
  display: grid;
  gap: 18px;
  padding-bottom: 52px;
  border-bottom: 1px solid var(--line);
}

.about-hero h1,
.compare-hero h1 {
  max-width: 1260px;
  font-size: clamp(2.05rem, 3vw, 3.1rem);
  line-height: 1.08;
}

.compact-hero {
  padding-bottom: 44px;
}

.tag-row,
.filter-chips,
.split-checks,
.upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.gold-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 14px;
  border-radius: var(--radius);
  background: var(--gold);
  color: #07101c;
  font-weight: 850;
}

.about-story-grid,
.contact-grid,
.product-detail-pro,
.reviews-layout,
.returns-grid {
  display: grid;
  gap: 28px;
  margin-top: 48px;
}

.about-story-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 1fr);
}

.contact-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
}

.feature-card,
.value-card,
.team-card,
.cta-strip,
.review-row,
.review-modal,
.subscribe-card,
.checkout-modal,
.share-box,
.museum-panel,
.small-art-card,
.compare-attrs,
.compare-column {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(7, 20, 34, 0.86);
}

.feature-card,
.value-card,
.team-card,
.cta-strip {
  padding: 24px;
}

.feature-card {
  display: grid;
  gap: 16px;
}

.museum-panel {
  overflow: hidden;
}

.about-photo-visual {
  min-height: 350px;
  border: 0;
  border-radius: 0;
}

.stat-grid,
.value-grid,
.team-grid,
.small-art-grid {
  display: grid;
  gap: 18px;
}

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

.stat-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 20px;
}

.stat-box {
  min-height: 88px;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(5, 14, 23, 0.72);
  text-align: center;
}

.stat-box strong {
  font-size: 1.35rem;
}

.stat-box span {
  color: var(--muted);
}

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

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

.value-card,
.team-card {
  display: grid;
  gap: 10px;
}

.team-card {
  justify-items: center;
  text-align: center;
}

.avatar {
  display: inline-block;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: var(--surface-soft);
  background-size: cover;
}

.timeline,
.step-list {
  display: grid;
  gap: 16px;
}

.timeline-item {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(8, 24, 40, 0.72);
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 22px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
}

.timeline-item span {
  color: var(--muted);
}

.cta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.contact-form,
.contact-details,
.link-stack {
  display: grid;
  gap: 16px;
}

.input-shell,
.bare-input {
  display: grid;
  gap: 8px;
  color: var(--muted);
}

.input-shell input,
.input-shell textarea,
.bare-input input,
.select-button,
.full-check {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: 0;
  background: rgba(5, 14, 23, 0.8);
  color: var(--text);
}

.input-shell textarea {
  min-height: 150px;
  padding: 16px;
  resize: vertical;
}

.check-line,
.full-check {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.check-line input,
.split-checks input,
.full-check input {
  width: 20px;
  height: 20px;
  accent-color: var(--cyan);
}

.hours-bar {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
}

.hours-bar strong {
  display: block;
  padding: 6px 12px;
  border-radius: var(--radius);
  background: var(--gold);
  color: #06101c;
}

.mock-map {
  position: relative;
  height: 230px;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(7, 16, 28, 0.12) 0 48%, rgba(19, 191, 215, 0.22) 48% 50%, transparent 50%),
    repeating-linear-gradient(0deg, #edf4f3 0 22px, #dcebe9 22px 24px),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(92, 128, 140, 0.28) 34px 36px);
}

.mock-map span,
.mock-map b,
.mock-map i {
  position: absolute;
  display: block;
  border-radius: 999px;
}

.mock-map span {
  background: rgba(61, 174, 125, 0.24);
}

.mock-map span:nth-child(1) {
  left: 14%;
  top: 28%;
  width: 150px;
  height: 54px;
}

.mock-map span:nth-child(2) {
  right: 10%;
  top: 20%;
  width: 120px;
  height: 70px;
}

.mock-map span:nth-child(3) {
  left: 38%;
  bottom: 16%;
  width: 170px;
  height: 60px;
}

.mock-map b {
  left: 54%;
  top: 42%;
  width: 18px;
  height: 18px;
  background: #f07365;
}

.mock-map i {
  left: 10%;
  right: 12%;
  top: 52%;
  height: 7px;
  background: rgba(92, 128, 140, 0.48);
  transform: rotate(-11deg);
}

.link-stack a,
.footer-grid a {
  color: var(--cyan);
}

.compare-toolbar,
.compare-footer-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.compare-footer-bar {
  margin-top: 28px;
  border-top: 1px solid var(--line);
}

.toolbar-spacer {
  flex: 1;
}

.compare-grid {
  display: grid;
  grid-template-columns: 360px repeat(3, minmax(220px, 1fr));
  gap: 22px;
  margin-top: 32px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.compare-attrs,
.compare-column {
  min-width: 260px;
  overflow: hidden;
}

.compare-attrs strong,
.compare-attrs span,
.compare-cell {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.compare-card-head {
  display: grid;
  gap: 14px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.compare-card-head .art-visual {
  height: 260px;
  border-radius: var(--radius);
}

.checkout-screen,
.modal-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(28px, 7vw, 120px) 20px;
  background: #03070d;
}

.checkout-modal {
  width: min(1480px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
  overflow: hidden;
}

.checkout-left,
.order-summary {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: clamp(26px, 4vw, 44px);
  background: rgba(8, 24, 40, 0.94);
}

.checkout-left {
  border-right: 1px solid var(--line);
}

.checkout-title-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.checkout-title-row h1,
.modal-head h1,
.subscribe-card h1 {
  font-size: clamp(1.8rem, 3vw, 2.45rem);
  line-height: 1.1;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
}

.stepper b {
  display: inline-flex;
  color: var(--muted);
}

.active-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cyan);
}

.shipping-method,
.checkout-note,
.summary-art,
.review-product-strip {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(5, 14, 23, 0.58);
}

.shipping-method,
.summary-art,
.review-product-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px;
}

.shipping-method {
  grid-template-columns: 1fr auto;
}

.shipping-method strong,
.checkout-note strong {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--radius);
  background: var(--gold);
  color: #07101c;
}

.checkout-note {
  display: grid;
  gap: 10px;
  padding: 20px;
}

.checkout-note a,
.order-summary a {
  color: var(--cyan);
}

.checkout-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.pay-options,
.promo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.promo-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.summary-art .art-visual {
  width: 110px;
  height: 92px;
  min-height: 92px;
  border-radius: var(--radius);
}

.total-line {
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 1.18rem;
}

.full-check {
  justify-content: space-between;
}

.product-detail-pro {
  grid-template-columns: minmax(420px, 1.08fr) minmax(340px, 0.92fr);
  align-items: start;
}

.gallery-panel,
.purchase-panel {
  display: grid;
  gap: 18px;
}

.gallery-panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(7, 20, 34, 0.86);
}

.gallery-main {
  min-height: min(58vw, 590px);
}

.thumb-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.gallery-thumb {
  min-height: 82px;
  border-radius: var(--radius);
}

.purchase-panel h1 {
  font-size: clamp(2rem, 3vw, 2.7rem);
}

.spec-table {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 1.4fr;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(7, 20, 34, 0.86);
}

.spec-table span {
  color: var(--muted);
}

.spec-table strong {
  text-align: right;
}

.product-extra {
  margin-top: 54px;
}

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

.small-art-card {
  overflow: hidden;
}

.small-art-card .art-visual {
  height: 220px;
}

.small-art-card div:last-child {
  padding: 16px;
}

.testimonial-stage {
  position: relative;
  min-height: 530px;
  margin-top: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(7, 20, 34, 0.68);
}

.floating-review {
  position: absolute;
  width: min(310px, 42%);
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(7, 20, 34, 0.96);
}

.review-person,
.review-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.review-person .avatar {
  width: 48px;
  height: 48px;
}

.review-person p,
.review-title span,
.star-line {
  color: var(--muted);
}

.pos-a {
  left: 4%;
  top: 8%;
}

.pos-b {
  left: 16%;
  top: 38%;
}

.pos-c {
  left: 7%;
  bottom: 9%;
}

.pos-d {
  right: 6%;
  top: 5%;
}

.pos-e {
  right: 13%;
  top: 30%;
}

.pos-f {
  right: 9%;
  bottom: 7%;
}

.voices-card {
  margin-top: 70px;
}

.reviews-layout {
  grid-template-columns: 340px minmax(0, 1fr);
}

.reviews-filter {
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.share-box {
  display: grid;
  gap: 12px;
  padding: 18px;
  margin-top: 20px;
}

.reviews-list-panel,
.reviews-list {
  display: grid;
  gap: 18px;
}

.review-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 20px;
}

.review-row > .avatar {
  width: 56px;
  height: 56px;
}

.review-main {
  display: grid;
  gap: 14px;
}

.review-product-strip.slim {
  grid-template-columns: 76px minmax(0, 1fr);
  padding: 10px;
}

.review-product-strip.slim .art-visual {
  width: 76px;
  height: 50px;
  min-height: 50px;
  border-radius: var(--radius);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  min-height: 92px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--cyan-deep);
  color: var(--muted);
  text-align: center;
}

.reviews-pager {
  justify-content: center;
  margin-top: 18px;
}

.modal-screen {
  align-items: start;
}

.review-modal,
.subscribe-card {
  width: min(1080px, 100%);
  overflow: hidden;
  background: rgba(8, 24, 40, 0.98);
}

.modal-head,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 28px 34px;
  border-bottom: 1px solid var(--line);
}

.modal-actions {
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.modal-body {
  display: grid;
  gap: 24px;
  padding: 34px;
}

.review-product-strip .art-visual {
  width: 118px;
  height: 92px;
  min-height: 92px;
  border-radius: var(--radius);
}

.rating-row {
  display: grid;
  gap: 12px;
  color: var(--muted);
}

.confirmation-copy {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 34px;
}

.success-mark {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #19a84b;
}

.confirmation-art {
  min-height: 650px;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

.subscribe-card {
  display: grid;
  gap: 24px;
  padding: clamp(28px, 4vw, 48px);
}

.confirm-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.check-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 2rem;
}

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

.choice-tile {
  min-height: 80px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(5, 14, 23, 0.72);
  color: var(--muted);
  text-align: left;
  font-size: 1.35rem;
}

.choice-tile:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

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

.site-footer {
  background: rgba(7, 16, 28, 0.72);
}

.footer-inner {
  display: grid;
  gap: 30px;
  padding: 52px 0 28px;
}

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

.footer-grid > div,
.newsletter-form {
  display: grid;
  align-content: start;
  gap: 12px;
}

.footer-location {
  display: grid;
  gap: 5px;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.4;
}

.footer-location strong {
  color: var(--text);
}

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

.newsletter-row input {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(5, 14, 23, 0.72);
  color: var(--text);
}

.footer-bottom {
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

@media (max-width: 1280px) {
  .header-main {
    grid-template-columns: auto minmax(0, 1fr) minmax(210px, 340px);
    gap: 12px;
  }

  .header-menu {
    display: contents;
    grid-column: auto;
  }

  .header-menu-inner {
    display: contents;
  }

  .brand-text {
    display: inline;
  }

  .brand {
    font-size: 1.02rem;
  }

  .brand-gem {
    width: 38px;
    height: 38px;
  }

  .nav-bar {
    justify-content: center;
    gap: 2px;
  }

  .site-header .nav-pill,
  .nav-more-button {
    padding-left: 9px;
    padding-right: 9px;
    font-size: 0.84rem;
  }

  .site-actions {
    grid-template-columns: minmax(190px, 1fr) auto;
    justify-content: end;
  }

  .home-intro h1 {
    font-size: 3.85rem;
  }

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

  .category-grid,
  .artist-directory-grid,
  .collection-grid,
  .info-grid,
  .team-grid,
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-grid,
  .marketplace-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  }
}

@media (max-width: 1100px) {
  .header-main {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 68px;
    padding: 14px clamp(12px, 4vw, 24px);
  }

  .site-header.nav-scrolled .header-main {
    min-height: 64px;
  }

  .brand-text {
    display: inline;
  }

  .brand-gem {
    width: 36px;
    height: 36px;
  }

  .brand-gem .icon {
    width: 21px;
    height: 21px;
  }

  .site-header {
    overflow: visible;
    max-height: none;
    /* Fixed navigation must use the viewport as its containing block. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-header.menu-open {
    z-index: 1000;
  }

  .site-header.menu-open .menu-toggle {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.9);
  }

  .site-header.nav-hidden {
    max-height: none;
    opacity: 1;
    border-bottom-color: rgba(156, 178, 198, 0.14);
    pointer-events: auto;
  }

  .mobile-product-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px clamp(10px, 3vw, 18px);
    border-bottom: 1px solid var(--line);
    background: rgba(7, 16, 28, 0.96);
  }

  .mobile-product-search .field-shell {
    min-width: 0;
    min-height: 50px;
    padding: 0 12px;
  }

  .mobile-product-search .primary-action {
    min-height: 50px;
    padding: 0 14px;
  }

  .home-grid {
    overflow: visible;
  }

  .home-intro {
    min-height: auto;
    gap: 22px;
    padding: 8px 0 0;
  }

  .home-intro h1 {
    width: min(100%, 760px);
    font-size: clamp(2.55rem, 7.6vw, 4rem);
    line-height: 1;
  }

  .menu-toggle {
    display: inline-flex;
    position: relative;
    z-index: 1004;
  }

  .menu-scrim {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: block;
    padding: 0;
    border: 0;
    background: rgba(2, 7, 13, 0.62);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
  }

  .site-header.menu-open .menu-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .header-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1002;
    width: min(420px, 100%);
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    display: block;
    overflow: auto;
    overscroll-behavior: contain;
    border-left: 1px solid var(--line-strong);
    background: linear-gradient(180deg, rgba(8, 24, 40, 0.99), rgba(5, 14, 23, 0.99));
    box-shadow: -28px 0 70px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    /* Reveal within the viewport without creating offscreen overflow. */
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
    transition:
      opacity 220ms ease,
      clip-path 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
      visibility 0s linear 320ms;
    will-change: clip-path;
  }

  .site-header.menu-open .header-menu {
    opacity: 1;
    pointer-events: auto;
    clip-path: inset(0);
    visibility: visible;
    transition-delay: 0s;
  }

  .drawer-head {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 14px 12px 18px;
    border-bottom: 1px solid var(--line);
    background: rgba(8, 24, 40, 0.98);
    backdrop-filter: blur(16px);
  }

  .drawer-head span {
    color: var(--cyan);
    font-weight: 880;
    text-transform: uppercase;
    font-size: 0.8rem;
  }

  .drawer-close {
    width: 50px;
    height: 50px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: rgba(5, 14, 23, 0.72);
    color: var(--text);
    font-size: 2rem;
    line-height: 1;
  }

  .header-menu-inner {
    display: grid;
    gap: 14px;
    align-content: start;
    min-height: calc(100% - 78px);
    padding: 16px 14px 28px;
    overflow: visible;
    opacity: 0.44;
    transform: translateX(28px);
    transition:
      opacity 260ms ease 80ms,
      transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1) 40ms;
  }

  .site-header.menu-open .header-menu-inner {
    opacity: 1;
    transform: translateX(0);
  }

  .nav-bar {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: start;
    height: auto;
    width: 100%;
    padding: 8px;
    border-color: rgba(19, 191, 215, 0.16);
    background: rgba(4, 20, 35, 0.48);
  }

  .nav-more {
    width: 100%;
    height: auto;
  }

  .nav-more-menu {
    position: static;
    width: 100%;
    margin-top: 8px;
    border-color: rgba(19, 191, 215, 0.14);
    background: rgba(5, 14, 23, 0.54);
    box-shadow: none;
  }

  .site-actions {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .nav-pill,
  .nav-more-button,
  .nav-icon-link,
  .cart-pill {
    width: 100%;
    justify-content: flex-start;
  }

  .site-header .nav-pill,
  .nav-more-button,
  .nav-icon-link,
  .compact-cart {
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(5, 14, 23, 0.78);
    color: var(--text);
  }

  .site-header .nav-pill::after,
  .nav-more-button::after {
    display: none;
  }

  .nav-more-button {
    justify-content: space-between;
  }

  .nav-more-link {
    min-height: 46px;
  }

  .nav-icon-link::after {
    position: static;
    opacity: 1;
    transform: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 0.95rem;
  }
}

@media (max-width: 880px) {
  .site-shell {
    padding-bottom: 90px;
  }

  .standalone-shell {
    padding-bottom: 0;
  }

  .header-main {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 18px 12px;
  }

  .brand-text {
    display: inline;
  }

  .brand-gem {
    width: 36px;
    height: 36px;
  }

  .brand-gem .icon {
    width: 21px;
    height: 21px;
  }

  .site-header {
    overflow: visible;
    max-height: none;
    /* Fixed navigation must use the viewport as its containing block. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .site-header.menu-open {
    z-index: 1000;
  }

  .site-header.menu-open .menu-toggle {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.9);
  }

  .site-header.nav-hidden {
    max-height: none;
    opacity: 1;
  }

  .mobile-product-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--line);
    background: rgba(7, 16, 28, 0.96);
  }

  .mobile-product-search .field-shell {
    min-width: 0;
    min-height: 50px;
    padding: 0 12px;
  }

  .mobile-product-search .primary-action {
    min-height: 50px;
    padding: 0 14px;
  }

  .menu-toggle {
    display: inline-flex;
    position: relative;
    z-index: 1004;
  }

  .menu-scrim {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: block;
    padding: 0;
    border: 0;
    background: rgba(2, 7, 13, 0.56);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
  }

  .site-header.menu-open .menu-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .header-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1002;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    display: block;
    overflow: auto;
    overscroll-behavior: contain;
    border-left: 0;
    background: linear-gradient(180deg, rgba(8, 24, 40, 0.99), rgba(5, 14, 23, 0.99));
    box-shadow: -28px 0 70px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    /* Reveal within the viewport without creating offscreen overflow. */
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
    transition:
      opacity 220ms ease,
      clip-path 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
      visibility 0s linear 320ms;
    will-change: clip-path;
  }

  .site-header.menu-open .header-menu {
    opacity: 1;
    pointer-events: auto;
    clip-path: inset(0);
    visibility: visible;
    transition-delay: 0s;
  }

  .drawer-head {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 14px 12px 18px;
    border-bottom: 1px solid var(--line);
    background: rgba(8, 24, 40, 0.98);
    backdrop-filter: blur(16px);
  }

  .drawer-head span {
    color: var(--cyan);
    font-weight: 880;
    text-transform: uppercase;
    font-size: 0.8rem;
  }

  .drawer-close {
    width: 50px;
    height: 50px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: rgba(5, 14, 23, 0.72);
    color: var(--text);
    font-size: 2rem;
    line-height: 1;
  }

  .header-menu-inner {
    display: grid;
    gap: 14px;
    align-content: start;
    min-height: calc(100% - 78px);
    padding: 16px 14px 28px;
    overflow: visible;
    opacity: 0.44;
    transform: translateX(28px);
    transition:
      opacity 260ms ease 80ms,
      transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1) 40ms;
  }

  .site-header.menu-open .header-menu-inner {
    padding: 16px 14px 28px;
    opacity: 1;
    transform: translateX(0);
  }

  .nav-bar {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: start;
    height: auto;
    width: 100%;
    padding: 8px;
    border-color: rgba(19, 191, 215, 0.16);
    background: rgba(4, 20, 35, 0.48);
  }

  .nav-more {
    width: 100%;
    height: auto;
  }

  .nav-more-menu {
    position: static;
    width: 100%;
    margin-top: 8px;
    border-color: rgba(19, 191, 215, 0.14);
    background: rgba(5, 14, 23, 0.54);
    box-shadow: none;
  }

  .site-actions {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .nav-pill,
  .nav-more-button,
  .nav-icon-link,
  .cart-pill {
    width: 100%;
    justify-content: flex-start;
  }

  .site-header .nav-pill,
  .nav-more-button,
  .nav-icon-link,
  .compact-cart {
    min-height: 50px;
    padding: 0 14px;
    border-color: var(--line);
    background: rgba(5, 14, 23, 0.78);
    color: var(--text);
  }

  .site-header .nav-pill::after,
  .nav-more-button::after {
    display: none;
  }

  .nav-more-button {
    border-radius: var(--radius);
    justify-content: space-between;
  }

  .nav-more-link {
    min-height: 46px;
  }

  .nav-icon-link::after {
    position: static;
    opacity: 1;
    transform: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 0.95rem;
  }

  .home-grid,
  .shop-layout,
  .detail-grid,
  .checkout-grid,
  .account-grid,
  .about-story-grid,
  .contact-grid,
  .checkout-modal,
  .product-detail-pro,
  .reviews-layout,
  .returns-grid {
    grid-template-columns: 1fr;
  }

  .home-grid {
    gap: 18px;
    overflow: visible;
  }

  .home-intro {
    min-height: auto;
    gap: 20px;
    padding: 6px 0 0;
  }

  .home-intro h1 {
    width: min(100%, 680px);
    font-size: clamp(2.25rem, 10.2vw, 3.15rem);
    line-height: 1;
  }

  .home-intro .lede {
    font-size: 1rem;
  }

  .home-feature {
    min-height: auto;
  }

  .home-feature .visual-large {
    min-height: clamp(230px, 70vw, 370px);
  }

  .filter-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .toolbar,
  .form-row {
    grid-template-columns: 1fr;
  }

  .product-grid,
  .marketplace-grid,
  .category-grid,
  .artist-directory-grid,
  .collection-grid,
  .info-grid,
  .value-grid,
  .team-grid,
  .small-art-grid,
  .stat-grid,
  .stat-row,
  .footer-grid,
  .choice-grid {
    grid-template-columns: 1fr;
  }

  .marketplace-feed-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .marketplace-card-link {
    grid-template-rows: 230px auto;
  }

  .cta-strip,
  .checkout-title-row,
  .compare-toolbar,
  .compare-footer-bar,
  .modal-head,
  .modal-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .checkout-left {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .checkout-actions,
  .pay-options,
  .size-offer-grid,
  .promo-row,
  .newsletter-row {
    grid-template-columns: 1fr;
  }

  .compare-grid {
    grid-template-columns: 280px repeat(3, 280px);
  }

  .testimonial-stage {
    min-height: auto;
    display: grid;
    gap: 16px;
    padding: 16px;
  }

  .floating-review {
    position: static;
    width: 100%;
  }

  .review-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .status-badge {
    grid-column: 1 / -1;
    min-height: 52px;
  }

  .cart-row {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .cart-row .summary-line {
    grid-column: 1 / -1;
  }

  .pager-wrap,
  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  h1 {
    font-size: clamp(2.2rem, 12vw, 3.5rem);
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 82;
    display: flex;
    justify-content: center;
    padding: 0;
    pointer-events: none;
  }

  .mobile-bottom-card {
    width: 100%;
    min-height: 86px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 0;
    padding: 8px 8px max(8px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    background:
      linear-gradient(180deg, rgba(13, 38, 54, 0.98), rgba(7, 20, 34, 0.98) 48%, rgba(5, 14, 23, 0.99)),
      rgba(7, 20, 34, 0.98);
    color: var(--muted);
    box-shadow: 0 -22px 56px rgba(0, 0, 0, 0.52), 0 -1px 0 rgba(19, 191, 215, 0.2);
    backdrop-filter: blur(16px);
    pointer-events: auto;
  }

  .mobile-bottom-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    box-shadow: 0 0 22px rgba(19, 191, 215, 0.45);
  }

  .mobile-bottom-link {
    min-width: 0;
    min-height: 64px;
    position: relative;
    display: grid;
    place-items: center;
    gap: 4px;
    border-radius: var(--radius);
    font-size: 0.76rem;
    font-weight: 820;
    isolation: isolate;
    overflow: hidden;
  }

  .mobile-bottom-link > span:not(.motion-icon) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-bottom-link .motion-icon {
    width: 34px;
    height: 34px;
  }

  .mobile-bottom-link .icon {
    width: 27px;
    height: 27px;
    stroke-width: 2.35;
  }

  .mobile-bottom-link.active {
    color: var(--cyan);
    background: rgba(7, 56, 69, 0.86);
    box-shadow: inset 0 0 0 1px rgba(19, 191, 215, 0.18), 0 10px 24px rgba(0, 0, 0, 0.28);
  }

  .mobile-cart-count {
    position: absolute;
    top: 7px;
    right: clamp(7px, 2vw, 14px);
    z-index: 2;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--gold);
    color: #07101c;
    font-size: 0.68rem;
    font-weight: 900;
    box-shadow: 0 0 18px rgba(245, 183, 75, 0.34);
  }

  .product-card {
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
  }

  .engagement-stack {
    right: 20px;
    bottom: 102px;
  }

  .purchase-pop {
    left: 12px;
    right: auto;
    bottom: calc(env(safe-area-inset-bottom) + 96px);
  }

  .notice {
    right: 96px;
    bottom: 102px;
  }
}

@media (max-width: 560px) {
  .page-band-inner,
  .main-content,
  .footer-inner {
    width: calc(100% - 16px);
  }

  .header-main {
    padding: 14px 8px;
  }

  .mobile-product-search {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 8px;
  }

  .mobile-product-search .primary-action {
    min-width: 92px;
    padding: 0 10px;
  }

  .mobile-product-search .primary-action .icon {
    width: 18px;
    height: 18px;
  }

  .brand {
    max-width: calc(100vw - 88px);
    font-size: 1.08rem;
  }

  .brand-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-pill,
  .cart-pill {
    min-height: 44px;
    padding: 0 14px;
  }

  .global-search {
    grid-column: auto;
  }

  .home-intro {
    gap: 18px;
  }

  .home-intro h1 {
    font-size: clamp(1.9rem, 9.4vw, 2.5rem);
    line-height: 1.02;
  }

  .home-feature .visual-large {
    min-height: clamp(220px, 68vw, 300px);
  }

  .card-link {
    grid-template-rows: 220px auto;
  }

  .marketplace-card-link {
    grid-template-rows: 220px auto;
  }

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

  .offer-panel,
  .shipping-choice {
    padding: 12px;
  }

  .filter-panel,
  .results-panel {
    padding-left: 14px;
    padding-right: 14px;
  }

  .engagement-stack {
    right: 18px;
    bottom: 100px;
    gap: 8px;
  }

  .float-contact {
    width: 50px;
    height: 50px;
  }

  .whatsapp-float {
    width: 62px;
    height: 62px;
  }

  .mobile-bottom-card {
    min-height: 78px;
    padding: 6px 4px max(6px, env(safe-area-inset-bottom));
  }

  .mobile-bottom-link {
    min-height: 60px;
    gap: 2px;
    font-size: clamp(0.58rem, 2.5vw, 0.72rem);
  }

  .mobile-bottom-link .motion-icon {
    width: 30px;
    height: 30px;
  }

  .mobile-bottom-link .icon {
    width: 24px;
    height: 24px;
  }

  .float-contact::after {
    display: none;
  }

  .purchase-pop {
    left: 8px;
    right: auto;
    bottom: calc(env(safe-area-inset-bottom) + 92px);
    width: min(360px, calc(100vw - 16px));
  }

  .purchase-pop-card {
    grid-template-columns: 60px minmax(0, 1fr);
    min-height: 88px;
    padding: 10px 40px 10px 10px;
  }

  .purchase-pop-art {
    width: 60px;
    height: 56px;
    min-height: 56px;
  }

  .purchase-pop-card strong {
    font-size: 0.9rem;
  }

  .notice {
    left: 14px;
    right: 92px;
    bottom: 100px;
    max-width: none;
  }
}

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Shared image-saving deterrents, including newly added galleries. */
img, picture, [data-protected-image] {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.fa-icon { width: 1.25em; height: 1.25em; fill: currentColor; stroke: none; flex-shrink: 0; }
.home-slider { min-width: 0; align-self: center; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }
.slider-stage { position: relative; aspect-ratio: 1; touch-action: pan-y; background: #07101c; }
.hero-slide { width: 100%; height: 100%; }
.hero-slide[hidden] { display: none; }
.hero-slide img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 48px; border-radius: 12px; border: 1px solid #ffffff66; background: #07101ce6; color: white; font: 32px/1 Arial,sans-serif; }
.slider-prev { left: 12px; }
.slider-next { right: 12px; }
.slider-controls { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 6px 12px; font-family: 'Manrope',sans-serif; }
.slider-dots { display: flex; align-items: center; margin-right: auto; }
.slider-dots button { display: grid; place-items: center; width: 28px; height: 44px; padding: 0; background: transparent; border: 0; }
.slider-dots button::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #738697; }
.slider-dots button[aria-pressed='true']::before { width: 18px; border-radius: 8px; background: var(--cyan); }
.slider-count { color: #bfd1e0; white-space: nowrap; font-size: 14px; }
.slider-pause { min-height: 44px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; color: var(--text); font: 600 14px 'Manrope',sans-serif; }
.home-slider button:focus-visible, .mobile-bottom-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: -3px; }
.whatsapp-float { background: #128c4a; color: #fff; border: 2px solid #ffffffc9; box-shadow: 0 6px 22px #0005; animation: none; }
.whatsapp-float .fa-icon { width: 34px; height: 34px; position: relative; z-index: 1; }
.whatsapp-float::before { animation: none; }
.whatsapp-float:hover, .whatsapp-float:focus-visible { background: #08763b; }
@media (max-width: 880px) {
  .mobile-bottom-card { min-height: 82px; padding: 6px 4px max(8px,env(safe-area-inset-bottom)); background: #091725; box-shadow: 0 -5px 24px #0004; }
  .mobile-bottom-card::before { display: none; }
  .mobile-bottom-link { min-height: 64px; align-content: center; gap: 7px; font-family: 'Manrope',system-ui,sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.2; color: #b7c8d8; }
  .mobile-bottom-link .fa-icon { width: 23px; height: 23px; }
  .mobile-bottom-link.active { color: #48dded; background: #123142; box-shadow: none; }
  .mobile-cart-count { top: 1px; right: 9px; font-family: 'Manrope',sans-serif; font-size: 11px; }
}
@media (max-width: 360px) {
  .slider-controls { gap: 6px; padding: 6px; }
  .slider-dots button { width: 25px; }
  .slider-arrow { width: 40px; }
}

/* Preserve the full uploaded framed-art photographs. */
.art-visual.has-image { background: #eee9e0; }
.art-visual.has-image img { object-fit: contain; }

/* Readable hero typography and sliding photograph carousel. */

.home-slider { position: relative; }
.slider-stage { overflow: hidden; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transform: translateX(100%); transition: transform 850ms cubic-bezier(.22,.61,.36,1), opacity 850ms ease; }
.hero-slide.is-active { opacity: 1; transform: translateX(0); z-index: 1; }
.hero-slide.is-exiting { opacity: 0; transform: translateX(-100%); }
.slider-controls { position: absolute; z-index: 3; bottom: 10px; left: 62px; right: 62px; min-height: 44px; padding: 0 8px; border-radius: 30px; background: #07101cdd; justify-content: center; }
.slider-dots { margin-right: 0; }
.slider-count { font-size: 12px; }
.slider-arrow { z-index: 4; top: auto; bottom: 10px; transform: none; height: 44px; }
@media(prefers-reduced-motion:reduce) { .hero-slide { transition: none; } }

/* Full-width responsive hero with readable copy over the photographs. */
.home-grid { position: relative; display: grid; grid-template-columns: minmax(0,1fr); gap: 0; overflow: hidden; border-radius: 18px; isolation: isolate; }
.home-grid > .home-slider { grid-area: 1 / 1; width: 100%; align-self: stretch; border: 0; border-radius: 0; box-shadow: none; }
.home-grid .slider-stage { height: clamp(620px, 78svh, 920px); aspect-ratio: auto; }
.home-grid .hero-slide img { object-fit: cover; object-position: center; }
.home-grid > .home-intro { grid-area: 1 / 1; z-index: 2; align-self: start; min-height: 0; padding: clamp(28px, 4vw, 64px) 24px 90px; gap: 20px; background: linear-gradient(180deg,rgba(3,12,22,.93) 0%,rgba(3,12,22,.78) 65%,transparent 100%); pointer-events: none; }
.home-grid .home-intro h1 { color: #fff; text-shadow: 0 2px 12px #0009; }
.home-grid .home-intro .lede { max-width: 760px; color: #fff; text-shadow: 0 1px 6px #000; }
.home-grid .home-intro .action-row { pointer-events: auto; }
.home-grid .home-intro .secondary-action { background: #07101cee; color: #fff; border-color: #ffffff80; }
.home-grid .slider-controls { left: 70px; right: 70px; bottom: 18px; width: fit-content; max-width: calc(100% - 140px); margin-inline: auto; }
.home-grid .slider-arrow { bottom: 18px; }
@media(max-width: 700px) {
 .home-grid .slider-stage { height: clamp(580px, 82svh, 800px); }
 .home-grid > .home-intro { padding: 28px 18px 70px; gap: 16px; }
 .home-grid .home-intro .lede { font-size: .95rem; }
 .home-grid .home-intro .action-row { gap: 10px; }
 .home-grid .home-intro .action-row a { padding: 12px 14px; font-size: .9rem; }
}
/* Let homepage artwork reach the viewport edges. */
.main-content:has(> .home-grid) { width: 100%; max-width: none; padding-top: 0; }
.main-content > .home-grid { width: 100%; border-radius: 0; }
.main-content:has(> .home-grid) > .section-stack { width: min(var(--max), calc(100% - clamp(28px, 7vw, 120px))); margin-inline: auto; }
@media(max-width:560px) { .main-content:has(> .home-grid) > .section-stack { width: calc(100% - 16px); } }

/* Clear centered hero copy, with simple dot navigation. */
.home-grid > .home-intro { align-self: center; background: none; padding: 32px 24px 80px; }
.home-grid .home-intro h1 { font-family: 'Manrope', Arial, sans-serif; text-transform: none; letter-spacing: -.035em; line-height: 1.12; text-shadow: 0 2px 5px #000, 0 0 18px #000; }
.home-grid .home-intro .lede { text-shadow: 0 1px 4px #000, 0 0 10px #000; font-family: 'Manrope', Arial, sans-serif; font-weight: 600; }
.home-grid .slider-controls { background: none; padding: 0; left: 0; right: 0; max-width: 100%; }
.slider-dots button::before { background: #fff; box-shadow: 0 1px 5px #000; }
.hero-slide { opacity: 1; transition: transform 850ms cubic-bezier(.22,.61,.36,1); }
.hero-slide.is-exiting { opacity: 1; }
@media(max-width:1100px) {
 .header-menu, .header-menu-inner, .header-menu .nav-bar, .drawer-head { border: 0; box-shadow: none; }
 .header-menu::before, .header-menu::after, .header-menu .nav-bar::before, .header-menu .nav-bar::after { display: none; }
}
@media(prefers-reduced-motion:reduce) { .hero-slide { transition: none; } }

/* Rounded, horizontally scrolling artwork collection cards. */
.home-grid { display:block; background:#f5f5f7; color:#1d1d1f; }
.home-grid > .home-intro { position:relative; padding:42px 24px 24px; max-width:1000px; margin:auto; gap:18px; }
.home-grid .home-intro h1 { font:750 clamp(2rem,4vw,3.6rem)/1.08 'Manrope',Arial,sans-serif; color:#1d1d1f; text-shadow:none; }
.home-grid .home-intro .lede { color:#515155; text-shadow:none; font-weight:400; }
.art-card-carousel { position:relative; padding-bottom:24px; }
.art-card-track { display:flex; gap:24px; overflow-x:auto; padding:16px max(24px,5vw) 32px; scroll-padding-inline:max(24px,5vw); scroll-snap-type:x mandatory; scrollbar-width:none; }
.art-card-track::-webkit-scrollbar { display:none; }
.art-showcase-card { flex:0 0 clamp(340px,32vw,560px); min-width:0; border-radius:28px; overflow:hidden; scroll-snap-align:start; box-shadow:0 8px 24px #00000012; display:flex; flex-direction:column; background:#080808; color:#fff; }
.art-showcase-card.light-card { background:#fff; color:#1d1d1f; }
.art-showcase-copy { padding:32px 30px 26px; min-height:250px; }
.art-showcase-copy span { color:#e56800; text-transform:uppercase; font:700 12px 'Manrope',Arial,sans-serif; letter-spacing:.045em; }
.art-showcase-copy h2 { font:750 clamp(1.6rem,2.2vw,2.4rem)/1.1 'Manrope',Arial,sans-serif; margin:14px 0 12px; letter-spacing:-.035em; color:inherit; }
.art-showcase-copy p { font:500 16px/1.4 'Manrope',Arial,sans-serif; margin:0 0 12px; }
.art-showcase-copy a { color:#2997ff; font:600 14px 'Manrope',Arial,sans-serif; }
.art-showcase-card img { width:100%; height:auto; aspect-ratio:1; object-fit:cover; display:block; margin-top:auto; }
.art-carousel-arrow { position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border:0; border-radius:50%; background:#e8e8eddd; color:#343436; font:42px/1 Arial,sans-serif; z-index:4; box-shadow:0 2px 12px #0002; }
.art-carousel-arrow.previous { left:12px; }.art-carousel-arrow.next { right:12px; }
.art-carousel-arrow:disabled { opacity:0; pointer-events:none; }
.art-card-track:focus-visible { outline:2px solid #0071e3; outline-offset:-4px; }
@media(max-width:600px) {
.home-grid > .home-intro { padding:30px 20px 18px; }
.art-card-track { gap:16px; padding:12px 20px 24px; scroll-padding-inline:20px; }
.art-showcase-card { flex-basis:84%; border-radius:22px; }
.art-showcase-copy { padding:26px 24px 22px; min-height:230px; }
.art-carousel-arrow { width:40px; height:40px; font-size:32px; }
}

/* Dark seamless discovery carousel and natural image proportions. */
.home-grid { background:var(--bg,#07121e); color:var(--text); }
.art-showcase-card, .art-showcase-card.light-card { background:#0b1c2b; color:#f3f7ff; border:1px solid #203344; }
.art-card-track { scroll-snap-type:none; }
.art-showcase-card { scroll-snap-align:none; }
.card-link, .marketplace-card-link { grid-template-rows:auto auto!important; }
.art-visual.has-image { min-height:0; height:auto; background:transparent; }
.art-visual.has-image img { width:100%; height:auto; object-fit:contain; }
.category-card .category-swatch { height:auto; min-height:0; }
.category-card .category-swatch img { height:auto; width:100%; }
.scroll-art-item[hidden], .feed-loader[hidden] { display:none; }
.revealed-art { animation:revealArtwork .5s ease both; }
@keyframes revealArtwork { from {opacity:0;transform:translateY(22px);} to {opacity:1;transform:none;} }
@media(max-width:700px) {
 .category-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .category-card { display:flex; flex-direction:column; min-width:0; padding:10px; }
 .category-card .category-swatch { width:100%; }
 .category-card h3 { font-size:1rem; }
 .category-card p { font-size:.8rem; }
}
@media(max-width:350px) { .category-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .revealed-art { animation:none; } }

.seo-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* Compact desktop category cards; retain the existing mobile layout. */
@media (min-width: 701px) {
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
  .category-card { grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px; min-height: 116px; }
  .category-card .category-swatch { width: 88px; height: auto; min-height: 0; }
  .category-card h3 { margin: 0 0 6px; font-size: 1rem; line-height: 1.25; }
  .category-card p { margin: 0; font-size: .85rem; line-height: 1.4; }
}
@media (min-width: 1400px) { .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.setup-home-link { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:24px; padding:24px; border:1px solid var(--line); border-radius:16px; background:#0b1c2b; }
.setup-home-link h3 { margin:8px 0; }.setup-home-link p { color:var(--muted); margin:0; }
.setup-page { display:grid; gap:32px; }.setup-heading { max-width:800px; }
.setup-media-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; }
.setup-media-card { margin:0; overflow:hidden; background:#0b1c2b; border:1px solid var(--line); border-radius:16px; }
.setup-media-card video,.setup-media-card img { display:block; width:100%; max-height:75vh; object-fit:contain; background:#000; }
.setup-media-card h2,.setup-media-card figcaption { padding:18px; margin:0; font:600 1.1rem 'Manrope',sans-serif; }
.setup-empty { color:var(--muted); padding:32px; border:1px solid var(--line); border-radius:16px; }
@media(max-width:700px) {.setup-media-grid {grid-template-columns:1fr;}.setup-home-link {flex-direction:column;align-items:flex-start;}}

/* Supplied brand mark and immersive collection covers. */
.brand-gem { border-radius:50%; transform:none; background:#000; box-shadow:none; border:1px solid #ffffff28; flex-shrink:0; }
.brand-gem img { width:100%; height:100%; object-fit:contain; display:block; border-radius:50%; }
.art-showcase-card { position:relative; isolation:isolate; min-height:520px; aspect-ratio:4/5; }
.art-showcase-card img { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; object-fit:cover; margin:0; z-index:-2; }
.art-showcase-card::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#0001 15%,#0005 40%,#000e 100%); }
.art-showcase-copy { margin-top:auto; min-height:0; padding:32px; color:#fff; }
.art-showcase-copy span { color:#ffd89b; font-size:14px; }
.art-showcase-copy h2 { font-size:clamp(1.8rem,2.6vw,2.65rem); text-shadow:0 2px 14px #0009; }
.art-showcase-copy p { color:#f3f3f3; max-width:32ch; }
.art-showcase-copy a { display:inline-flex; padding:12px 18px; border-radius:30px; background:#fff; color:#07121e; margin-top:6px; }
.video-page { max-width:1100px; margin:30px auto; display:grid; grid-template-columns:1fr minmax(300px,440px); gap:64px; align-items:center; padding:0 24px; }
.video-intro { display:grid; justify-items:start; gap:20px; }.video-intro h1 { font-size:clamp(2.2rem,5vw,4.5rem); line-height:1.05; margin:0; letter-spacing:-.04em; }.video-intro p { max-width:34ch; font-size:1rem; line-height:1.6; margin:0; }.video-intro .eyebrow{color:#65d9e6;}.video-hint { color:var(--muted); }
.video-navigation { display:flex; align-items:center; gap:16px; }.video-navigation button { width:48px; height:48px; border-radius:50%; background:#203344; color:white; border:1px solid #476173; font-size:24px; }
.video-feed { height:min(780px,78dvh); min-height:460px; overflow-y:auto; scroll-snap-type:y mandatory; overscroll-behavior-y:contain; border-radius:24px; background:#000; scrollbar-width:none; }.video-feed::-webkit-scrollbar{display:none;}
.work-reel { position:relative; height:100%; scroll-snap-align:start; scroll-snap-stop:always; isolation:isolate; background:#000; }.work-reel video { width:100%; height:100%; display:block; object-fit:contain; }
.reel-top { position:absolute; top:16px; left:16px; right:16px; display:flex; justify-content:space-between; align-items:center; pointer-events:none; }.reel-top span,.reel-top button { color:white; background:#0009; border:1px solid #ffffff40; border-radius:30px; padding:8px 12px; font-size:14px; }.reel-top button{pointer-events:auto;}
.reel-caption { position:absolute; bottom:62px; left:0; right:0; padding:40px 20px 12px; background:linear-gradient(transparent,#000d); pointer-events:none; color:white; }.reel-caption a,.reel-caption button {pointer-events:auto;}.reel-brand{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;}.reel-brand img{border-radius:50%;}.reel-caption h2 { font-size:1.2rem; margin:12px 0; }.reel-actions{display:flex;gap:10px;flex-wrap:wrap;}.reel-actions a,.reel-actions button{border:1px solid #fff5;padding:11px 14px;border-radius:24px;background:#fff;color:#081a22;font-size:14px;font-weight:700;}.reel-actions button{background:#18222ccc;color:white;}.reel-status{font-size:14px;margin:8px 0 0;overflow-wrap:anywhere;}.reel-status:empty{display:none;}
body:has(.video-page) .engagement-stack,body:has(.video-page) .purchase-pop{display:none;}
@media(max-width:700px){.art-showcase-card{min-height:500px;}.art-showcase-copy{padding:26px 24px;}.video-page{display:flex;flex-direction:column;gap:18px;padding:0 8px;margin:12px auto;}.video-intro{width:100%;gap:10px;padding:0 12px;}.video-intro h1{font-size:1.8rem;}.video-intro h1 br{display:none;}.video-intro>p,.video-intro>.eyebrow,.video-intro>.primary-action{display:none;}.video-navigation{position:absolute;right:20px;gap:8px;}.video-navigation button{width:38px;height:38px;}.video-navigation span{font-size:14px;}.video-feed{width:100%;max-width:440px;height:72dvh;min-height:450px;border-radius:18px;}.reel-caption{padding-inline:16px;}}
body:has(.video-page) .mobile-product-search,body:has(.video-page) .top-marquee,body:has(.video-page) footer{display:none;}
@media(max-width:700px){.video-feed{height:calc(100dvh - 220px);min-height:300px;}.video-intro h1{font-size:1.65rem;}.video-page{margin-bottom:88px;}.reel-caption{bottom:48px;padding-top:24px;}.reel-caption h2{margin:8px 0;font-size:1rem;}}