:root {
  --gold: #d4af37;
  --gold-soft: #f0cf73;
  --brand-accent: #6d2cff;
  --brand-accent-soft: #9a69ff;
  --sapphire: #0d1b3d;
  --chrome: #c0c0c0;
  --glass: rgba(15, 17, 25, 0.66);
  --glass-strong: rgba(12, 13, 19, 0.86);
  --glass-line: rgba(255, 255, 255, 0.12);
  --hud-line: rgba(212, 175, 55, 0.34);
  --depth-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

html { color-scheme: dark; }

.skip-link {
  position: fixed;
  z-index: 500;
  left: 14px;
  top: 10px;
  padding: 10px 14px;
  color: #0d0d0d;
  border-radius: 8px;
  background: var(--gold-soft);
  transform: translateY(-160%);
  transition: transform 0.18s ease;
  font-weight: 800;
}

.skip-link:focus { transform: translateY(0); }

/* An icon replaced the word CART, which had been shrunk to 8px (11px
   even after the phone-only bump) to fit inside this button. A glyph
   reads at a glance at any size and needs no font at all. */
.cart-link {
  width: auto;
  min-width: 54px;
  padding: 0 10px;
  gap: 7px;
}

.cart-link #cart-count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 50%;
  color: #0d0d0d;
  background: var(--gold);
  font: 800 10px Inter, sans-serif;
  letter-spacing: 0;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 82% 8%, rgba(109,44,255, 0.19), transparent 29rem),
    radial-gradient(circle at 9% 42%, rgba(212, 175, 55, 0.11), transparent 34rem),
    radial-gradient(circle at 56% 112%, rgba(13, 27, 61, 0.95), transparent 42rem),
    linear-gradient(135deg, #08090d 0%, #0d0d0f 42%, #0c1020 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(212, 175, 55, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,44,255, 0.045) 1px, transparent 1px),
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.018) 50%, transparent 70%);
  background-size: 56px 56px, 56px 56px, 200% 200%;
  mask-image: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.75) 75%, transparent 100%);
  animation: ambientSweep 18s linear infinite;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: soft-light;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, 0.08) 4px);
}

.site-ribbon {
  position: relative;
  z-index: 70;
  padding: 7px 18px;
  overflow: hidden;
  color: #0d0d0d;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font: 800 10px/1.4 Orbitron, sans-serif;
  background: linear-gradient(90deg, #8c6a13, #d4af37 35%, #f5f5f5 50%, #d4af37 65%, #7f5f10);
}

.site-ribbon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.7) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: ribbonGlint 7s ease-in-out infinite;
}

.site-header {
  top: 0;
  background: linear-gradient(180deg, rgba(8, 9, 13, 0.92), rgba(13, 13, 17, 0.7));
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.38), rgba(109,44,255, 0.35), transparent) 1;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(24px) saturate(145%);
}

.site-header::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: -1px;
  width: 22%;
  height: 1px;
  background: var(--brand-accent);
  box-shadow: 0 0 14px var(--brand-accent);
}

.brand-image {
  border: 1px solid rgba(212, 175, 55, 0.25);
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 0 20px rgba(109,44,255, 0.12), 0 0 30px rgba(212, 175, 55, 0.08);
}

.nav-links a {
  position: relative;
  padding: 10px 0;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 1px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--brand-accent));
  box-shadow: 0 0 10px var(--brand-accent);
  transition: left 0.25s ease, right 0.25s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after { left: 0; right: 0; }

.page-hero,
.hero {
  isolation: isolate;
  overflow: hidden;
}

.page-hero::before,
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 44rem;
  aspect-ratio: 1;
  right: -13rem;
  top: -25rem;
  border: 1px solid rgba(212, 175, 55, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(109,44,255, 0.025), 0 0 0 150px rgba(212, 175, 55, 0.018);
  animation: orbitalDrift 16s ease-in-out infinite;
}

.page-hero { position: relative; }

.card,
.filters,
.stats,
.toolbar,
.layers,
.chat-panel,
.payment-details,
.delivery-card,
.pay-option {
  background: linear-gradient(145deg, rgba(23, 24, 34, 0.72), rgba(8, 10, 17, 0.62));
  border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), var(--depth-shadow);
  backdrop-filter: blur(20px) saturate(135%);
}

.card,
.product-card,
.bento-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.hud-frame::before,
.bento-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 2;
  border-radius: calc(var(--radius) - 7px);
  pointer-events: none;
  opacity: 0.56;
  background:
    linear-gradient(var(--gold), var(--gold)) left top / 22px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left top / 1px 22px no-repeat,
    linear-gradient(var(--brand-accent), var(--brand-accent)) right bottom / 22px 1px no-repeat,
    linear-gradient(var(--brand-accent), var(--brand-accent)) right bottom / 1px 22px no-repeat;
  transition: opacity 0.25s ease, inset 0.25s ease;
}

.hud-frame:hover::before,
.bento-card:hover::before { inset: 6px; opacity: 1; }

.tilt-surface {
  --rx: 0deg;
  --ry: 0deg;
  --lift: 0px;
  transform: perspective(1050px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
  transition: transform 0.18s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.tilt-surface:hover {
  --lift: -7px;
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.55), 0 0 32px rgba(109,44,255, 0.15);
}

.tilt-surface > * { transform: translateZ(12px); }
.tilt-surface .product-visual,
.tilt-surface .bento-media { transform: translateZ(22px); }

.input,
.tab,
.btn {
  backdrop-filter: blur(12px);
}

.input:focus-visible,
.btn:focus-visible,
.tab:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f0d16f, #d4af37 48%, #ad861d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 10px 30px rgba(212, 175, 55, 0.14);
}

.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.6) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
}

.btn-primary:hover::before { transform: translateX(120%); }

.scroll-meter {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
}

.scroll-meter i {
  display: block;
  width: var(--scroll-progress, 0%);
  height: 100%;
  background: linear-gradient(90deg, var(--gold), #f5f5f5, var(--brand-accent));
  box-shadow: 0 0 12px var(--brand-accent);
}

.bento-products { position: relative; }

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(180px, auto);
  gap: 18px;
}

.bento-card {
  position: relative;
  min-height: 270px;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 80% 20%, rgba(109,44,255, 0.2), transparent 42%),
    linear-gradient(145deg, rgba(24, 25, 35, 0.86), rgba(7, 9, 15, 0.76));
  box-shadow: var(--depth-shadow);
  isolation: isolate;
}

.bento-card:nth-child(1) { grid-column: span 7; grid-row: span 2; min-height: 560px; }
.bento-card:nth-child(2) { grid-column: span 5; }
.bento-card:nth-child(3),
.bento-card:nth-child(4) { grid-column: span 5; }

.bento-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.bento-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 15%, rgba(7, 8, 13, 0.3) 48%, rgba(7, 8, 13, 0.97) 100%);
}

.bento-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.015);
  filter: saturate(0.82) contrast(1.08);
  transition: transform 0.65s ease, filter 0.65s ease;
}

.bento-card:hover .bento-media img { transform: scale(1.075); filter: saturate(1.1) contrast(1.08); }

.bento-content {
  position: absolute;
  z-index: 3;
  left: 28px;
  right: 28px;
  bottom: 25px;
  transform: translateZ(28px);
}

.bento-content h3 {
  margin: 8px 0 5px;
  color: #fff;
  font: 700 clamp(20px, 2.4vw, 34px)/1.05 Orbitron, sans-serif;
}

.bento-content p { max-width: 33rem; margin: 0; color: #bfc2cd; }

.bento-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border: 1px solid rgba(212, 175, 55, 0.36);
  border-radius: 999px;
  color: var(--gold-soft);
  background: rgba(4, 5, 9, 0.62);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font: 700 9px Orbitron, sans-serif;
}

.bento-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-accent-soft);
  box-shadow: 0 0 9px var(--brand-accent);
}

.catalog-bento {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 22px;
}

.catalog-orbit {
  min-height: 104px;
  padding: 18px;
  text-align: left;
  color: white;
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  background: linear-gradient(140deg, rgba(23, 24, 34, 0.76), rgba(13, 27, 61, 0.36));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
}

.catalog-orbit:first-child {
  background: radial-gradient(circle at 90% 10%, rgba(109,44,255, 0.3), transparent 45%), linear-gradient(140deg, rgba(30, 27, 34, 0.9), rgba(13, 27, 61, 0.45));
}

.catalog-orbit small { display: block; color: var(--gold); text-transform: uppercase; letter-spacing: 0.14em; }
.catalog-orbit strong { display: block; margin-top: 12px; font: 700 16px Orbitron, sans-serif; }
.catalog-orbit:hover { border-color: var(--gold); transform: translateY(-3px); }

.product-card .catalog-photo { transition: transform 0.55s ease, filter 0.55s ease; }
.product-card:hover .catalog-photo { transform: scale(1.08) translateY(-3px); filter: saturate(1.08) contrast(1.06); }

.gallery-item { overflow: hidden; padding: 0; position: relative; }
.gallery-item img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; transition: transform 0.55s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 999px;
  color: white;
  background: rgba(7, 8, 13, 0.72);
  font: 700 9px Orbitron, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.readiness-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.readiness-item { padding: 18px; border: 1px solid var(--glass-line); border-radius: 16px; background: rgba(255, 255, 255, 0.025); }
.readiness-item b { display: flex; align-items: center; gap: 8px; color: white; }
.readiness-dot { width: 8px; height: 8px; border-radius: 50%; background: #e2a52b; box-shadow: 0 0 10px #e2a52b; }
.readiness-item.ready .readiness-dot { background: #58dfa6; box-shadow: 0 0 10px #58dfa6; }
.readiness-item small { display: block; margin-top: 8px; color: var(--muted); }

.environment-note {
  margin: 16px 0;
  padding: 13px 15px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  color: #d7d0bd;
  background: rgba(212, 175, 55, 0.06);
  font-size: 12px;
}

.footer {
  background: linear-gradient(180deg, rgba(7, 9, 14, 0.88), #07080c);
  border-top-color: rgba(212, 175, 55, 0.2);
}

html[data-theme="light"] { color-scheme: light; }

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 82% 8%, rgba(174,128,35, 0.12), transparent 30rem),
    radial-gradient(circle at 8% 35%, rgba(212, 175, 55, 0.17), transparent 32rem),
    radial-gradient(circle at 50% 108%, rgba(156, 169, 204, 0.24), transparent 42rem),
    linear-gradient(135deg, #f9f7f1 0%, #eef0f7 48%, #f5f1e7 100%);
}

html[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(80,64,36, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174,128,35, 0.04) 1px, transparent 1px),
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
}

html[data-theme="light"] body::after { opacity: 0.018; }

html[data-theme="light"] .site-header {
  background: linear-gradient(180deg, rgba(250, 248, 243, 0.94), rgba(241, 242, 248, 0.78));
  box-shadow: 0 16px 42px rgba(80,64,36, 0.08);
}

html[data-theme="light"] .card,
html[data-theme="light"] .filters,
html[data-theme="light"] .stats,
html[data-theme="light"] .toolbar,
html[data-theme="light"] .layers,
html[data-theme="light"] .chat-panel,
html[data-theme="light"] .payment-details,
html[data-theme="light"] .delivery-card,
html[data-theme="light"] .pay-option {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(237, 239, 247, 0.68));
  border-color: rgba(80,64,36, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 22px 65px rgba(80,64,36, 0.1);
}

html[data-theme="light"] .bento-card {
  border-color: rgba(80,64,36, 0.14);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(226, 230, 242, 0.78));
  box-shadow: 0 24px 70px rgba(80,64,36, 0.14);
}

html[data-theme="light"] .catalog-orbit {
  color: #24221e;
  border-color: rgba(80,64,36, 0.14);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.88), rgba(225, 229, 240, 0.72));
  box-shadow: 0 18px 50px rgba(80,64,36, 0.09);
}

html[data-theme="light"] .environment-note { color: #594716; background: rgba(212, 175, 55, 0.12); }
html[data-theme="light"] .readiness-item { background: rgba(255, 255, 255, 0.55); border-color: rgba(80,64,36, 0.12); }
html[data-theme="light"] .readiness-item b { color: #24221e; }
html[data-theme="light"] .footer { background: linear-gradient(180deg, #f1eadf, #e8dece); }

@keyframes ambientSweep { to { background-position: 56px 56px, -56px 56px, -200% -200%; } }
@keyframes ribbonGlint { 0%, 72% { transform: translateX(-120%); } 88%, 100% { transform: translateX(120%); } }
@keyframes orbitalDrift { 50% { transform: translate(-30px, 24px) rotate(7deg); } }

@media (max-width: 900px) {
  .bento-card:nth-child(1) { grid-column: span 12; min-height: 480px; }
  .bento-card:nth-child(2), .bento-card:nth-child(3), .bento-card:nth-child(4) { grid-column: span 4; }
  .catalog-bento { grid-template-columns: repeat(2, 1fr); }
  .readiness-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .site-ribbon { letter-spacing: 0.09em; font-size: 8px; }
  .bento-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento-card:nth-child(n) { grid-column: 1; grid-row: auto; min-height: 330px; }
  .bento-card:nth-child(1) { min-height: 430px; }
  .bento-content { left: 20px; right: 20px; bottom: 20px; }
  .catalog-bento, .readiness-grid { grid-template-columns: 1fr; }
  .tilt-surface { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  body::before, .site-ribbon::after, .page-hero::before, .hero::before { animation: none !important; }
  .tilt-surface { transform: none !important; }
}

/* Experience refinement: explanatory process, reactive glass and product depth */
.process-section {
  position: relative;
  padding-top: 72px;
  overflow: hidden;
}

.process-section::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 35%;
  width: min(92vw, 1250px);
  height: 420px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(109,44,255, 0.13), transparent 67%);
  filter: blur(10px);
  pointer-events: none;
}

.process-intro {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  align-items: end;
  gap: 52px;
  margin-bottom: 34px;
}

.process-intro .title { max-width: 760px; margin-bottom: 0; }
.process-intro .subtitle { margin: 0 0 7px; }

.process-rail {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(24, 24, 32, 0.73), rgba(10, 11, 18, 0.68));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 34px 90px rgba(0, 0, 0, 0.42), 0 0 60px rgba(109,44,255, 0.06);
  backdrop-filter: blur(26px) saturate(145%);
  overflow: hidden;
}

.process-rail::before {
  content: "";
  position: absolute;
  z-index: 4;
  left: 6%;
  right: 6%;
  top: 84px;
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.1), var(--gold), var(--brand-accent), rgba(109,44,255, 0.1));
  box-shadow: 0 0 14px rgba(109,44,255, 0.8);
}

.process-rail::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 79px;
  left: 4%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 18px var(--gold), 0 0 34px var(--brand-accent);
  animation: processLaser 6.8s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}

.process-card {
  --pointer-x: 50%;
  --pointer-y: 50%;
  position: relative;
  min-height: 355px;
  padding: 29px 25px 25px;
  border-right: 1px solid rgba(212, 175, 55, 0.17);
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(109,44,255, 0.1), transparent 32%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.025), transparent 42%);
  transition: background 0.35s ease, box-shadow 0.35s ease;
  overflow: hidden;
}

.process-card:last-child { border-right: 0; }

.process-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  opacity: 0.45;
  background:
    linear-gradient(var(--gold), var(--gold)) left top / 18px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left top / 1px 18px no-repeat,
    linear-gradient(var(--brand-accent), var(--brand-accent)) right bottom / 18px 1px no-repeat,
    linear-gradient(var(--brand-accent), var(--brand-accent)) right bottom / 1px 18px no-repeat;
  transition: opacity 0.3s ease, inset 0.3s ease;
}

.process-card:hover,
.process-card:focus-within {
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(109,44,255, 0.2), transparent 38%),
    linear-gradient(155deg, rgba(212, 175, 55, 0.06), transparent 48%);
  box-shadow: inset 0 -2px 0 rgba(109,44,255, 0.7), inset 0 0 55px rgba(109,44,255, 0.08);
}

.process-card:hover::before,
.process-card:focus-within::before { inset: 6px; opacity: 1; }

.process-number {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  font: 800 35px/1 Orbitron, sans-serif;
  letter-spacing: -0.08em;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.12);
}

.process-node {
  position: relative;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin: 29px 0 30px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: #0d0d0f;
  box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.06), 0 0 18px rgba(212, 175, 55, 0.5);
}

.process-node::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px var(--gold);
  animation: processNode 2.2s ease-in-out infinite;
}

.process-card:nth-child(2) .process-node::after { animation-delay: 0.35s; }
.process-card:nth-child(3) .process-node::after { animation-delay: 0.7s; }
.process-card:nth-child(4) .process-node::after { animation-delay: 1.05s; }

.process-copy { position: relative; z-index: 3; }

.process-copy small {
  color: var(--gold);
  font: 700 9px Orbitron, sans-serif;
  letter-spacing: 0.16em;
}

.process-copy h3 {
  margin: 10px 0 9px;
  color: #fff;
  font: 700 18px/1.2 Orbitron, sans-serif;
}

.process-copy p {
  min-height: 78px;
  margin: 0 0 18px;
  color: #aeb1bd;
  font-size: 13px;
  line-height: 1.65;
}

.process-copy a {
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.process-copy a:hover { color: var(--gold-soft); text-shadow: 0 0 12px rgba(212, 175, 55, 0.5); }

.process-assurance {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.process-assurance span {
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  color: var(--muted);
  background: rgba(8, 9, 14, 0.42);
  font-size: 11px;
  backdrop-filter: blur(12px);
}

.process-assurance b { display: block; margin-bottom: 2px; color: #fff; }

.interactive-glass {
  --pointer-x: 50%;
  --pointer-y: 50%;
  isolation: isolate;
}

.holo-sheen {
  position: absolute !important;
  z-index: 8 !important;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.16), transparent 18%),
    linear-gradient(112deg, transparent 28%, rgba(212, 175, 55, 0.055) 42%, rgba(109,44,255, 0.095) 54%, transparent 68%);
  mix-blend-mode: screen;
  transition: opacity 0.25s ease;
}

.interactive-glass:hover > .holo-sheen,
.interactive-glass:focus-within > .holo-sheen { opacity: 1; }

.reveal-ready {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity 0.72s ease, transform 0.72s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.reveal-ready.reveal-in { opacity: 1; transform: none; }

.product-card {
  border-radius: 22px;
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(155deg, rgba(24, 25, 35, 0.82), rgba(8, 9, 15, 0.76));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 68px rgba(0, 0, 0, 0.34);
}

.product-card .product-visual {
  height: 270px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(109,44,255, 0.2), transparent 42%),
    linear-gradient(160deg, rgba(13, 27, 61, 0.58), rgba(7, 8, 13, 0.95));
}

.product-card .product-visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 20px;
  width: 66%;
  height: 22%;
  transform: translateX(-50%) rotateX(68deg);
  border: 1px solid rgba(212, 175, 55, 0.38);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(109,44,255, 0.22), transparent 65%);
  box-shadow: 0 0 26px rgba(109,44,255, 0.2), inset 0 0 18px rgba(212, 175, 55, 0.09);
  animation: productPlatform 4.8s ease-in-out infinite;
}

.product-card .catalog-photo {
  position: relative;
  z-index: 1;
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 22px 18px rgba(0, 0, 0, 0.48)) saturate(0.92) contrast(1.04);
}

.product-card .product-info {
  position: relative;
  padding: 23px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent);
}

.product-card .product-info::before {
  content: "PRODUCT // ENGRAVING READY";
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font: 700 8px Orbitron, sans-serif;
  letter-spacing: 0.14em;
}

.product-card .price {
  display: inline-flex;
  margin-top: 5px;
  padding: 6px 9px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.055);
}

.product-card .btn { width: 100%; }

.featured-products { position: relative; }
.featured-products::before {
  content: "";
  position: absolute;
  left: -12%;
  top: 15%;
  width: 38%;
  height: 70%;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.045);
  filter: blur(80px);
  pointer-events: none;
}

#featured {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch;
}

#featured .product-card:first-child { grid-column: span 6; }
#featured .product-card:nth-child(2),
#featured .product-card:nth-child(3) { grid-column: span 3; }
#featured .product-card:first-child .product-visual { height: 330px; }

.bento-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -45% auto -45% -30%;
  width: 35%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  transform: skewX(-18deg);
  will-change: transform;
  animation: bentoSweep 8.5s ease-in-out infinite;
  pointer-events: none;
}

.bento-card:nth-child(2)::after { animation-delay: 1.6s; }
.bento-card:nth-child(3)::after { animation-delay: 3.1s; }
.bento-card:nth-child(4)::after { animation-delay: 4.6s; }

.hero-machine-frame {
  transform: perspective(1200px) rotateY(-2.5deg) rotateX(1deg);
  transform-style: preserve-3d;
  box-shadow: 0 38px 100px rgba(0, 0, 0, 0.48), 0 0 50px rgba(109,44,255, 0.11);
  transition: transform 0.7s cubic-bezier(0.2, 0.75, 0.2, 1), box-shadow 0.7s ease;
}

.hero-machine-frame:hover {
  transform: perspective(1200px) rotateY(1.5deg) rotateX(-0.5deg) translateY(-5px);
  box-shadow: 0 45px 120px rgba(0, 0, 0, 0.58), 0 0 72px rgba(109,44,255, 0.17);
}

@keyframes processLaser {
  0%, 7% { left: 4%; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  93%, 100% { left: calc(96% - 12px); opacity: 0; }
}

@keyframes processNode { 50% { transform: scale(1.7); opacity: 0.5; } }
@keyframes productPlatform { 50% { transform: translateX(-50%) rotateX(68deg) scale(1.06); opacity: 0.72; } }
/* transform rather than left, for the same reason as screenScan: this
   runs on every bento card at once and each one was forcing layout.

   Two things to keep in mind if this is ever edited. The skew has to
   be repeated in every keyframe, because a transform replaces the
   element's own transform rather than adding to it, and dropping it
   turns the slanted sweep into a straight bar. And a percentage in
   translateX is a percentage of the element, not of the card: the
   sweep is 35% of the card wide and travels 155% of the card, which
   is 442.86% of itself. */
@keyframes bentoSweep {
  0%, 62% { transform: skewX(-18deg) translateX(0); opacity: 0; }
  70% { opacity: 1; }
  88%, 100% { transform: skewX(-18deg) translateX(442.86%); opacity: 0; }
}

html[data-theme="light"] .process-rail {
  border-color: rgba(80,64,36, 0.13);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(244,237,224, 0.72));
  box-shadow: inset 0 1px 0 #fff, 0 30px 75px rgba(80,64,36, 0.12);
}

html[data-theme="light"] .process-card {
  border-right-color: rgba(80,64,36, 0.11);
  background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(174,128,35, 0.08), transparent 34%);
}

html[data-theme="light"] .process-number,
html[data-theme="light"] .process-copy h3,
html[data-theme="light"] .process-copy a,
html[data-theme="light"] .process-assurance b { color: #24221e; }

html[data-theme="light"] .process-copy p { color: #696257; }
html[data-theme="light"] .process-node { background: #f7f3eb; }
html[data-theme="light"] .process-assurance span { border-color: rgba(80,64,36, 0.1); background: rgba(255, 255, 255, 0.55); }

html[data-theme="light"] .product-card {
  border-color: rgba(80,64,36, 0.13);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.9), rgba(231, 234, 244, 0.8));
  box-shadow: inset 0 1px 0 #fff, 0 24px 60px rgba(80,64,36, 0.12);
}

html[data-theme="light"] .product-card .product-visual {
  background: radial-gradient(ellipse at 50% 72%, rgba(174,128,35, 0.11), transparent 44%), linear-gradient(160deg, #f6f3ea, #e3e7f1);
}

@media (max-width: 1000px) {
  .process-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-rail::before, .process-rail::after { display: none; }
  .process-card:nth-child(2) { border-right: 0; }
  .process-card:nth-child(-n+2) { border-bottom: 1px solid rgba(212, 175, 55, 0.17); }
  #featured .product-card:first-child { grid-column: span 12; }
  #featured .product-card:nth-child(2), #featured .product-card:nth-child(3) { grid-column: span 6; }
}

@media (max-width: 700px) {
  .process-section { padding-top: 58px; }
  .process-intro { grid-template-columns: 1fr; gap: 15px; }
  .process-rail { grid-template-columns: 1fr; }
  .process-card { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(212, 175, 55, 0.17); }
  .process-card:last-child { border-bottom: 0; }
  .process-node { margin: 20px 0; }
  .process-copy p { min-height: 0; }
  .process-assurance { grid-template-columns: 1fr; }
  #featured .product-card:nth-child(n) { grid-column: span 12; }
  #featured .product-card:first-child .product-visual { height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .process-rail::after, .process-node::after, .product-card .product-visual::before, .bento-card::after { animation: none !important; }
  .reveal-ready { opacity: 1; transform: none; }
}

/* Global country, currency, guest checkout and high-visibility notifications */
.locale-trigger {
  min-width: 76px;
  gap: 8px;
  padding-inline: 10px;
}

.locale-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 8px;
  color: var(--gold-soft);
  background: rgba(212, 175, 55, 0.06);
  font: 700 7px Orbitron, sans-serif;
  letter-spacing: 0.05em;
}

.locale-trigger > span:last-child { display: grid; text-align: left; line-height: 1.05; }
.locale-trigger b { color: #fff; font: 700 10px Orbitron, sans-serif; }
.locale-trigger small { margin-top: 4px; color: var(--gold); font: 700 8px Inter, sans-serif; }

.locale-modal {
  position: fixed;
  z-index: 600;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  background: rgba(4, 5, 9, 0.82);
  backdrop-filter: blur(18px) saturate(120%);
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.locale-modal.show { visibility: visible; opacity: 1; }

.locale-panel {
  position: relative;
  width: min(760px, 100%);
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0, rgba(109,44,255, 0.22), transparent 38%),
    linear-gradient(145deg, rgba(25, 26, 36, 0.96), rgba(8, 9, 15, 0.96));
  box-shadow: 0 45px 120px rgba(0, 0, 0, 0.65), 0 0 70px rgba(109,44,255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(24px) scale(0.98);
  transition: transform 0.28s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.locale-modal.show .locale-panel { transform: none; }

.locale-panel::before {
  content: "GLOBAL COMMERCE // 250 REGIONS // 152 CURRENCIES";
  position: absolute;
  right: 22px;
  bottom: 12px;
  color: rgba(212, 175, 55, 0.22);
  font: 700 7px Orbitron, sans-serif;
  letter-spacing: 0.15em;
}

.locale-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.locale-panel h2 { margin: 6px 0 0; color: #fff; font: 700 28px Orbitron, sans-serif; }
.locale-close,
.toast-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  font-size: 21px;
}

.locale-explainer { max-width: 650px; margin: 18px 0 22px; color: #afb3c0; }
.locale-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.locale-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 12px; }
.locale-summary span { padding: 10px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 9px; color: #989dab; background: rgba(255, 255, 255, 0.025); font-size: 10px; }
.locale-summary b { color: var(--gold-soft); }
.locale-status { min-height: 22px; margin: 10px 0; color: var(--gold-soft); font-size: 12px; }
.locale-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.checkout-identity {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}

.checkout-identity legend {
  margin-bottom: 10px;
  color: var(--gold);
  font: 700 10px Orbitron, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.identity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.identity-option { position: relative; display: flex; align-items: flex-start; gap: 11px; min-height: 98px; padding: 15px; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 13px; background: rgba(255, 255, 255, 0.025); cursor: pointer; transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; }
.identity-option:has(input:checked) { border-color: var(--gold); background: linear-gradient(145deg, rgba(212, 175, 55, 0.09), rgba(109,44,255, 0.06)); box-shadow: inset 0 0 28px rgba(212, 175, 55, 0.035), 0 0 22px rgba(109,44,255, 0.08); }
.identity-option:hover { transform: translateY(-2px); }
.identity-option input { margin-top: 5px; accent-color: var(--gold); }
.identity-option b { display: block; color: #fff; }
.identity-option small { display: block; margin-top: 5px; color: var(--muted); line-height: 1.45; }
.guest-badge { display: inline-flex; margin-top: 8px; padding: 3px 7px; border-radius: 999px; color: #0d0d0d; background: var(--gold); font: 800 8px Orbitron, sans-serif; letter-spacing: 0.08em; }
.identity-signin { display: inline-block; margin-top: 8px; color: var(--gold-soft); font-size: 10px; font-weight: 800; }

.toast {
  top: 112px;
  right: 24px;
  bottom: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: min(470px, calc(100vw - 32px));
  min-height: 88px;
  padding: 17px 48px 17px 18px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.58);
  border-radius: 17px;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0, rgba(109,44,255, 0.27), transparent 42%),
    linear-gradient(145deg, rgba(24, 25, 35, 0.98), rgba(8, 9, 14, 0.98));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.62), 0 0 34px rgba(109,44,255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transform: translateX(calc(100% + 50px)) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.42s cubic-bezier(0.2, 0.85, 0.2, 1), opacity 0.3s ease;
}

.toast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), #fff, var(--brand-accent));
  box-shadow: 0 0 14px var(--brand-accent);
  transform-origin: left;
  animation: toastTimer 6.2s linear forwards;
}

.toast.show { transform: none; opacity: 1; pointer-events: auto; }
.toast.cart-toast { grid-template-columns: auto minmax(0, 1fr); border-color: var(--gold); animation: cartNoticePulse 1.1s ease 2; }
.toast-signal { display: block; width: 18px; height: 18px; border: 2px solid var(--gold); border-radius: 50%; box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.07), 0 0 22px rgba(212, 175, 55, 0.65); }
.cart-toast .toast-signal { background: var(--gold); box-shadow: 0 0 0 7px rgba(212, 175, 55, 0.1), 0 0 30px var(--gold); }
.toast-content { min-width: 0; }
.toast-content b { display: block; margin-bottom: 4px; color: #fff; font: 700 14px Orbitron, sans-serif; }
.toast-content span { display: block; color: #c7c9d2; font-size: 12px; line-height: 1.45; }
.toast-actions { grid-column: 1 / -1; display: flex; gap: 8px; padding-left: 32px; }
.toast-close { position: absolute; right: 9px; top: 9px; width: 29px; height: 29px; border-radius: 8px; font-size: 17px; }
.cart-link.cart-bump { animation: cartBump 0.65s cubic-bezier(0.2, 0.9, 0.3, 1); }

.guest-confirmation { max-width: 820px; margin: auto; }
.confirmation-mark { display: grid; place-items: center; width: 74px; height: 74px; margin-bottom: 24px; border: 1px solid var(--gold); border-radius: 22px; color: var(--gold); background: rgba(212, 175, 55, 0.07); box-shadow: 0 0 38px rgba(212, 175, 55, 0.16); font: 800 22px Orbitron, sans-serif; }
.confirmation-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }

@keyframes toastTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes cartNoticePulse { 50% { box-shadow: 0 30px 90px rgba(0, 0, 0, 0.68), 0 0 48px rgba(212, 175, 55, 0.34), 0 0 70px rgba(109,44,255, 0.18); } }
@keyframes cartBump { 35% { transform: translateY(-4px) scale(1.08); border-color: var(--gold); box-shadow: 0 0 30px rgba(212, 175, 55, 0.32); } }

html[data-theme="light"] .locale-trigger b { color: #24221e; }
html[data-theme="light"] .locale-panel { border-color: rgba(77, 52, 0, 0.24); background: radial-gradient(circle at 100% 0, rgba(174,128,35, 0.12), transparent 38%), linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244,237,224, 0.98)); box-shadow: 0 38px 100px rgba(80,64,36, 0.2); }
html[data-theme="light"] .locale-panel h2,
html[data-theme="light"] .identity-option b { color: #24221e; }
html[data-theme="light"] .locale-explainer { color: #696257; }
html[data-theme="light"] .locale-summary span,
html[data-theme="light"] .identity-option { border-color: rgba(80,64,36, 0.12); background: rgba(255, 255, 255, 0.58); }
html[data-theme="light"] .toast { color: #24221e; border-color: rgba(77, 52, 0, 0.32); background: radial-gradient(circle at 100% 0, rgba(174,128,35, 0.13), transparent 42%), linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(244,237,224, 0.99)); box-shadow: 0 28px 70px rgba(80,64,36, 0.22); }
html[data-theme="light"] .toast-content b { color: #24221e; }
html[data-theme="light"] .toast-content span { color: #635c51; }
html[data-theme="light"] .toast-close { color: #24221e; border-color: rgba(80,64,36, 0.13); }

@media (max-width: 1050px) {
  .locale-trigger > span:last-child { display: none; }
  .locale-trigger { min-width: 46px; padding: 0 8px; }
}

@media (max-width: 900px) {
  .nav-actions .locale-trigger { display: inline-flex !important; }
}

@media (max-width: 620px) {
  .locale-panel { padding: 23px 18px; border-radius: 19px; }
  .locale-grid, .locale-summary, .identity-grid { grid-template-columns: 1fr; }
  .locale-summary { gap: 6px; }
  .locale-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .toast { top: auto; right: 12px; bottom: 12px; width: calc(100vw - 24px); transform: translateY(calc(100% + 30px)) scale(0.97); }
  .toast.show { transform: none; }
  .toast-actions { padding-left: 0; display: grid; grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .toast::before, .toast.cart-toast, .cart-link.cart-bump { animation: none !important; }
}

/* Customer-first homepage and recipient-led shop */
.welcome-home { padding-top: 26px; padding-bottom: 26px; }

.welcome-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, 0.95fr);
  gap: 38px;
  align-items: center;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 0, rgba(109,44,255, 0.18), transparent 36%),
    linear-gradient(145deg, rgba(24, 25, 34, 0.78), rgba(8, 9, 14, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 28px 78px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(24px) saturate(140%);
}

.welcome-panel::before {
  content: "WELCOME // CREATE SOMETHING PERSONAL";
  position: absolute;
  right: 21px;
  top: 14px;
  color: rgba(212, 175, 55, 0.24);
  font: 700 7px Orbitron, sans-serif;
  letter-spacing: 0.16em;
}

.welcome-copy h2 {
  margin: 8px 0 10px;
  max-width: 600px;
  color: #fff;
  font: 700 clamp(22px, 3vw, 34px)/1.15 Orbitron, sans-serif;
}

.welcome-copy p { max-width: 620px; margin: 0 0 15px; color: var(--muted); }
.welcome-own-link { color: var(--gold-soft); font-weight: 800; font-size: 12px; }
.welcome-own-link:hover { color: #fff; text-shadow: 0 0 15px rgba(212, 175, 55, 0.5); }

.welcome-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.welcome-links a {
  position: relative;
  min-height: 92px;
  padding: 17px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.028);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.welcome-links a::after {
  content: "→";
  position: absolute;
  right: 15px;
  bottom: 13px;
  color: var(--gold);
  font-size: 17px;
  transition: transform 0.25s ease;
}

.welcome-links a:hover { transform: translateY(-3px); border-color: rgba(212, 175, 55, 0.5); background: rgba(212, 175, 55, 0.055); }
.welcome-links a:hover::after { transform: translateX(4px); }
.welcome-links span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }
.welcome-links b { display: block; margin-top: 8px; color: #fff; font: 700 16px Orbitron, sans-serif; }

.shop-hero .subtitle { max-width: 760px; }

.own-product-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(250px, 0.7fr);
  gap: 34px;
  align-items: center;
  min-height: 230px;
  margin: 0 0 52px;
  padding: 34px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 25px;
  background:
    radial-gradient(circle at 92% 20%, rgba(109,44,255, 0.32), transparent 38%),
    radial-gradient(circle at 10% 120%, rgba(212, 175, 55, 0.18), transparent 42%),
    linear-gradient(135deg, rgba(28, 25, 25, 0.95), rgba(10, 10, 16, 0.93));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 90px rgba(0, 0, 0, 0.46), 0 0 50px rgba(109,44,255, 0.1);
  isolation: isolate;
}

.own-product-banner::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 25%;
  top: -85%;
  width: 2px;
  height: 250%;
  transform: rotate(21deg);
  background: linear-gradient(transparent, var(--brand-accent), #fff, var(--gold), transparent);
  box-shadow: 0 0 18px var(--brand-accent), 0 0 42px rgba(212, 175, 55, 0.45);
  animation: ownItemLaser 7s ease-in-out infinite;
}

.own-product-banner::after {
  content: "BYOI // MATERIAL REVIEW REQUIRED";
  position: absolute;
  right: 22px;
  bottom: 14px;
  color: rgba(212, 175, 55, 0.33);
  font: 700 7px Orbitron, sans-serif;
  letter-spacing: 0.17em;
}

.own-product-kicker { color: var(--gold); font: 700 9px Orbitron, sans-serif; letter-spacing: 0.18em; }
.own-product-copy h2 { margin: 9px 0 10px; color: #fff; font: 700 clamp(24px, 3.2vw, 38px)/1.1 Orbitron, sans-serif; }
.own-product-copy p { max-width: 700px; margin: 0; color: #b7bac5; }
.own-product-benefits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 19px; }
.own-product-benefits span { padding: 7px 10px; border: 1px solid rgba(212, 175, 55, 0.25); border-radius: 999px; color: #d9d1bb; background: rgba(212, 175, 55, 0.045); font-size: 10px; }

.own-product-action { min-height: 80px; flex-direction: column; align-items: flex-start; padding: 16px 21px; border-radius: 15px; text-align: left; }
.own-product-action span { font: 800 13px Orbitron, sans-serif; }
.own-product-action small { color: rgba(13, 13, 13, 0.7); font-size: 10px; }

.shop-collection-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 18px; }
.shop-collection-head h2 { margin: 6px 0 0; color: #fff; font: 700 clamp(24px, 3.4vw, 38px) Orbitron, sans-serif; }

.shop-collections.catalog-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.shop-collection {
  position: relative;
  min-height: 250px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  color: #fff;
  background: #0b0c11;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.3);
  transition: transform 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease;
}

.shop-collection::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgba(7, 8, 13, 0.35) 54%, rgba(7, 8, 13, 0.96) 100%);
  pointer-events: none;
}

.shop-collection img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) contrast(1.06); transition: transform 0.55s ease, filter 0.55s ease; }
.shop-collection > span { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 17px; text-align: left; }
.shop-collection small { display: block; color: var(--gold-soft); font: 700 8px Orbitron, sans-serif; text-transform: uppercase; letter-spacing: 0.12em; }
.shop-collection strong { display: block; margin-top: 6px; color: #fff; font: 700 22px Orbitron, sans-serif; }
.shop-collection:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 30px 75px rgba(0, 0, 0, 0.44), 0 0 28px rgba(109,44,255, 0.13); }
.shop-collection:hover img { transform: scale(1.07); filter: saturate(1.08) contrast(1.08); }
.shop-collection.active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.16), 0 28px 72px rgba(0, 0, 0, 0.46), 0 0 35px rgba(109,44,255, 0.18); }
.shop-collection.active::before { content: "SELECTED"; position: absolute; z-index: 3; top: 13px; right: 13px; padding: 5px 8px; border-radius: 999px; color: #0d0d0d; background: var(--gold); font: 800 7px Orbitron, sans-serif; letter-spacing: 0.1em; }

.active-collection { min-height: 38px; margin-bottom: 14px; padding: 10px 13px; border-left: 2px solid var(--gold); color: var(--muted); background: rgba(212, 175, 55, 0.04); font-size: 11px; }

.own-product-float {
  position: fixed;
  z-index: 45;
  left: 20px;
  bottom: 22px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: center;
  min-width: 190px;
  padding: 12px 14px;
  border: 1px solid rgba(212, 175, 55, 0.58);
  border-radius: 14px;
  color: #fff;
  text-align: left;
  background: linear-gradient(145deg, rgba(25, 24, 29, 0.96), rgba(8, 9, 14, 0.96));
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.52), 0 0 28px rgba(109,44,255, 0.14);
  backdrop-filter: blur(18px);
}

.own-product-float > span { grid-row: 1 / 3; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; color: #0d0d0d; background: var(--gold); font-size: 20px; box-shadow: 0 0 20px rgba(212, 175, 55, 0.3); }
.own-product-float b { font: 700 10px Orbitron, sans-serif; }
.own-product-float small { color: var(--muted); font-size: 9px; }
.own-product-float:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 22px 65px rgba(0, 0, 0, 0.58), 0 0 36px rgba(212, 175, 55, 0.18); }

@keyframes ownItemLaser { 0%, 15% { right: 18%; opacity: 0; } 25% { opacity: 1; } 65% { opacity: 0.8; } 80%, 100% { right: 78%; opacity: 0; } }

html[data-theme="light"] .welcome-panel,
html[data-theme="light"] .own-product-banner { border-color: rgba(77, 52, 0, 0.22); background: radial-gradient(circle at 90% 0, rgba(174,128,35, 0.11), transparent 38%), linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(244,237,224, 0.8)); box-shadow: 0 26px 70px rgba(80,64,36, 0.12); }
html[data-theme="light"] .welcome-copy h2,
html[data-theme="light"] .welcome-links b,
html[data-theme="light"] .own-product-copy h2,
html[data-theme="light"] .shop-collection-head h2 { color: #24221e; }
html[data-theme="light"] .welcome-links a { border-color: rgba(80,64,36, 0.12); background: rgba(255, 255, 255, 0.55); }
html[data-theme="light"] .own-product-copy p { color: #696257; }
html[data-theme="light"] .own-product-float { color: #24221e; background: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 48px rgba(80,64,36, 0.18); }

@media (max-width: 900px) {
  .welcome-panel { grid-template-columns: 1fr; }
  .own-product-banner { grid-template-columns: 1fr; }
  .shop-collections.catalog-bento { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .welcome-panel { padding: 22px 18px; }
  .welcome-links { grid-template-columns: 1fr 1fr; }
  .own-product-banner { padding: 25px 19px; margin-bottom: 38px; }
  .own-product-action { width: 100%; }
  .shop-collection-head { align-items: flex-start; flex-direction: column; }
  .shop-collections.catalog-bento { grid-template-columns: 1fr 1fr; gap: 9px; }
  .shop-collection { min-height: 190px; }
  .shop-collection strong { font-size: 17px; }
  .own-product-float { left: 12px; bottom: 12px; min-width: 0; }
  .own-product-float b, .own-product-float small { display: none; }
  .own-product-float > span { grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .own-product-banner::before { animation: none !important; }
}

/* Homepage material showcase: reset the browser's default figure margins and
   use a stable two-column grid so cards cannot collapse into thin strips. */
.craft-showcase .split {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(34px, 5vw, 72px);
}

.craft-showcase-copy { max-width: 520px; }

.craft-showcase .gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  columns: initial;
  min-width: 0;
}

.craft-showcase .gallery-item,
.craft-showcase .gallery-item:nth-child(even) {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: clamp(210px, 20vw, 270px);
  margin: 0;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(13, 14, 21, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 54px rgba(0, 0, 0, 0.32);
}

.craft-showcase .gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

@media (max-width: 900px) {
  .craft-showcase .split { grid-template-columns: 1fr; }
  .craft-showcase-copy { max-width: 680px; }
  .craft-showcase .gallery-item,
  .craft-showcase .gallery-item:nth-child(even) { height: clamp(220px, 36vw, 330px); }
}

@media (max-width: 620px) {
  .craft-showcase .gallery { grid-template-columns: 1fr; }
  .craft-showcase .gallery-item,
  .craft-showcase .gallery-item:nth-child(even) { height: 260px; }
}

.request-card { overflow: hidden; }
.request-card .request-photo { display: block; width: calc(100% + 48px); height: 210px; margin: -24px -24px 18px; object-fit: cover; background: #f5f5f5; }