:root {
  --techeng-violet: #6d2cff;
  --techeng-violet-soft: rgba(109,44,255, 0.3);
  --techeng-gold: #d4af37;
  --techeng-gold-soft: rgba(212, 175, 55, 0.34);
}

.product-visual,
.fr-media,
.customizer-stage {
  isolation: isolate;
  overflow: hidden;
}

.product-visual::before,
.fr-media::before,
.customizer-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 12%;
  right: 12%;
  bottom: 3%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--techeng-gold-soft) 0%, var(--techeng-violet-soft) 42%, transparent 74%);
  filter: blur(18px);
  pointer-events: none;
}

.product-visual::after,
.fr-media::after,
.customizer-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 23%;
  right: 23%;
  bottom: 10%;
  height: 3px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, var(--techeng-violet), var(--techeng-gold), var(--techeng-violet), transparent);
  box-shadow: 0 0 16px var(--techeng-violet), 0 0 30px rgba(212, 175, 55, 0.62);
  pointer-events: none;
}

.catalog-photo,
.fr-media img,
.customizer-stage #productImage {
  position: relative;
  z-index: 1;
  object-fit: contain;
  filter: drop-shadow(0 18px 16px rgba(0, 0, 0, 0.52));
}

.catalog-photo {
  width: 100%;
  height: 100%;
  padding: 14px 16px 18px;
}

.catalog-photo.concept-visual {
  padding: 12px 14px 20px;
  object-fit: contain;
  filter: saturate(1.02) contrast(1.02) drop-shadow(0 18px 16px rgba(0, 0, 0, 0.52));
}

.concept-visual-label {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: 10px;
  padding: 5px 7px;
  border: 1px solid rgba(212, 175, 55, 0.72);
  border-radius: 2px;
  background: rgba(5, 8, 12, 0.88);
  color: #f4e7b2;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.product-card:hover .catalog-photo {
  transform: translateY(-3px) scale(1.035);
  filter: saturate(1.04) contrast(1.02) drop-shadow(0 22px 18px rgba(0, 0, 0, 0.58));
}

.product-card:hover .catalog-photo.concept-visual {
  transform: translateY(-3px) scale(1.035);
  filter: saturate(1.05) contrast(1.03) drop-shadow(0 22px 18px rgba(0, 0, 0, 0.58));
}

.product-fallback {
  width: 68%;
  height: 68%;
  margin: auto;
  padding: 0;
  opacity: 0.72;
  object-fit: contain;
  filter: grayscale(1) brightness(1.28) drop-shadow(0 14px 16px rgba(0, 0, 0, 0.4));
}

.fr-media img {
  width: 100%;
  height: 100%;
  padding: 12px 14px 16px;
}

.product-view-button img {
  object-fit: contain;
  padding: 7px;
}

.customizer-stage #productImage {
  padding: 24px 28px 38px;
}

.customizer-stage .preview-layer,
.customizer-stage .design-text {
  z-index: 2;
}

.bento-media,
.gallery-item,
.shop-collection {
  background-color: #071024;
  background-image: radial-gradient(ellipse at 50% 72%, rgba(212, 175, 55, 0.3), rgba(109,44,255, 0.19) 36%, transparent 68%);
}

.bento-media img,
.gallery-item img,
.shop-collection img,
.craft-showcase .gallery-item img {
  object-fit: contain;
  padding: 14px;
  filter: drop-shadow(0 18px 16px rgba(0, 0, 0, 0.52));
}

.bento-card:hover .bento-media img,
.gallery-item:hover img,
.shop-collection:hover img {
  transform: translateY(-2px) scale(1.035);
  filter: saturate(1.04) contrast(1.02) drop-shadow(0 22px 18px rgba(0, 0, 0, 0.58));
}

html[data-theme="light"] .product-visual::before,
html[data-theme="light"] .fr-media::before,
html[data-theme="light"] .customizer-stage::before {
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.28) 0%, rgba(174,128,35, 0.18) 44%, transparent 74%);
}

html[data-theme="light"] .product-visual::after,
html[data-theme="light"] .fr-media::after,
html[data-theme="light"] .customizer-stage::after {
  box-shadow: 0 0 12px rgba(174,128,35, 0.58), 0 0 24px rgba(212, 175, 55, 0.46);
}

html[data-theme="light"] .concept-visual-label {
  background: rgba(255, 255, 255, 0.93);
  color: #16233a;
}

html[data-theme="light"] .bento-media,
html[data-theme="light"] .gallery-item,
html[data-theme="light"] .shop-collection {
  background-color: #e9eef8;
  background-image: radial-gradient(ellipse at 50% 72%, rgba(212, 175, 55, 0.24), rgba(174,128,35, 0.14) 38%, transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
  .product-card:hover .catalog-photo { transform: none; }
}

/* ---------- stock status ---------- */
.stock-tag{
  position:absolute;left:12px;top:12px;z-index:3;
  padding:5px 11px;border-radius:20px;white-space:nowrap;
  font:700 10px Orbitron,sans-serif;letter-spacing:.09em;text-transform:uppercase;
  backdrop-filter:blur(6px);border:1px solid transparent;
}
.stock-tag.is-low{background:rgba(212,175,55,.92);color:#1a1400;border-color:rgba(212,175,55,.5)}
.stock-tag.is-out{background:rgba(20,20,24,.88);color:#ff9daa;border-color:rgba(255,107,129,.55)}
.stock-tag.is-made{background:rgba(109,44,255,.9);color:#eaf2ff;border-color:rgba(109,44,255,.5)}
.badge + .stock-tag{top:46px}          /* sit below an existing badge */
.price-muted{opacity:.55;text-decoration:line-through}
.product-card[data-stock="Out of stock"] .catalog-photo,
.product-card[data-stock="Discontinued"] .catalog-photo{filter:grayscale(.75) opacity(.7)}

html[data-theme="light"] .stock-tag.is-out{background:rgba(255,255,255,.95);color:#a01633;border-color:rgba(185,28,58,.4)}
html[data-theme="light"] .stock-tag.is-made{background:rgba(174,128,35,.14);color:#4c1d95;border-color:rgba(174,128,35,.4)}

/* ============================================================
   Easing the load on phones.

   Frosted-glass backdrops and large blurs are handled by the GPU and
   are among the most expensive things a mobile browser does. With a
   full catalogue on screen they were enough to make Safari give up and
   reload the page. The look survives on a desktop, where there is
   headroom for it.
   ============================================================ */
@media (max-width: 900px) {
  .product-visual::before,
  .fr-media::before,
  .customizer-stage::before { filter: blur(10px); opacity: .8; }

  /* Frosted panels fall back to a solid tint, which looks near enough
     and costs almost nothing. */
  .ps-list, .co-sticky, .stock-tag, .fr-play {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .ps-list { background: #101014; }
  html[data-theme="light"] .ps-list { background: #fff; }
  .co-sticky { background: #0d0d0d; }
  html[data-theme="light"] .co-sticky { background: #fff; }

  /* Card hover lift and tilt do nothing useful on a touch screen. */
  .product-card, .fr-card { will-change: auto; }
  .tilt-surface { transform: none !important; }
}

/* Bound images to the card instead of the grid's intrinsic image height. */
.product-card .product-visual{position:relative}
.product-card .product-visual > .catalog-photo{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;padding:18px 22px 24px}

/* ---------- product-type chips and catalog states ---------- */
.filters{scroll-margin-top:110px}
.category-chips-wrap{margin-top:6px}
.category-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border:1px solid rgba(212,175,55,.38);border-radius:999px;background:rgba(255,255,255,.04);color:inherit;font:600 .86rem Inter,system-ui,sans-serif;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.chip small{opacity:.62;font-size:.74rem}
.chip:hover{border-color:var(--techeng-gold);transform:translateY(-1px)}
.chip.active{background:linear-gradient(135deg,#d4af37,#a9862a);border-color:transparent;color:#1a1400}
.chip.active small{opacity:.75}
.chip:focus-visible{outline:2px solid var(--techeng-gold);outline-offset:3px}
html[data-theme="light"] .chip{background:#fff;border-color:rgba(122,90,20,.35)}
html[data-theme="light"] .chip.active{color:#2a1e00}
.active-collection #clearFilters{margin-left:10px;vertical-align:middle}
.catalog-empty{grid-column:1/-1;padding:44px 20px;text-align:center;border:1px dashed rgba(212,175,55,.4);border-radius:16px}
.catalog-empty b{display:block;margin-bottom:6px;font-size:1.05rem}
.catalog-empty p{margin:0;opacity:.75}

/* Long, thin pieces (bracelets, chains, knives) were shrunk to a sliver by the
   card's side padding. They now use the full width of the card. */
.product-card .product-visual > .catalog-photo.is-wide{padding:24px 6px 30px}

/* A thin rim of light so black and very dark pieces (coasters, black bracelets,
   the black gift box) read against the dark card instead of disappearing. */
html:not([data-theme="light"]) .product-card .product-visual > .catalog-photo:not(.product-fallback){
  filter:drop-shadow(0 0 1.2px rgba(255,255,255,.34)) drop-shadow(0 18px 16px rgba(0,0,0,.52));
}
html:not([data-theme="light"]) .product-card:hover .product-visual > .catalog-photo:not(.product-fallback){
  filter:drop-shadow(0 0 1.2px rgba(255,255,255,.4)) drop-shadow(0 22px 18px rgba(0,0,0,.58));
}

/* The results heading is focused by script after a category is chosen, so the
   page reads it out; it does not need a ring drawn round it. */
#collectionResults:focus{outline:none}