/* Glassmorphism theme for the seller storefront and the single product page only.
   Both templates add class "rma-glass" to <body>; every other page is untouched. */

html:has(body.rma-glass) { background: #0f172a; }

body.rma-glass {
  background:
    radial-gradient(60vmax 60vmax at 0% 0%, rgba(251, 191, 36, .45), transparent 60%),
    radial-gradient(55vmax 55vmax at 100% 20%, rgba(244, 114, 182, .40), transparent 60%),
    radial-gradient(60vmax 60vmax at 50% 100%, rgba(129, 140, 248, .40), transparent 60%),
    #f8fafc !important;
  background-attachment: fixed !important;
}
html.dark body.rma-glass {
  background:
    radial-gradient(60vmax 60vmax at 0% 0%, rgba(245, 158, 11, .25), transparent 60%),
    radial-gradient(55vmax 55vmax at 100% 20%, rgba(236, 72, 153, .22), transparent 60%),
    radial-gradient(60vmax 60vmax at 50% 100%, rgba(99, 102, 241, .25), transparent 60%),
    #0b1020 !important;
  background-attachment: fixed !important;
}

/* Background video sits behind everything; a soft tint keeps text readable. */
body.rma-glass.rma-has-video { background: transparent !important; }
.rma-bg-video { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #0f172a; pointer-events: none; }
.rma-bg-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rma-bg-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, .05), rgba(15, 23, 42, .20)); }

/* Frosted surfaces: every solid white / gray / dark panel becomes glass. */
body.rma-glass [class*="bg-white"]:not(button):not(a):not(.slide-indicator),
body.rma-glass [class*="bg-gray-50"]:not(button):not(a),
body.rma-glass [class*="bg-[#111827]"]:not(button):not(a),
body.rma-glass [class*="bg-[#151D2C]"],
body.rma-glass [class*="bg-[#090D16]"]:not(body) {
  background-color: rgba(255, 255, 255, .55) !important;
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  border-color: rgba(255, 255, 255, .55) !important;
}
html.dark body.rma-glass [class*="bg-white"]:not(button):not(a):not(.slide-indicator),
html.dark body.rma-glass [class*="bg-gray-50"]:not(button):not(a),
html.dark body.rma-glass [class*="bg-[#111827]"]:not(button):not(a),
html.dark body.rma-glass [class*="bg-[#151D2C]"],
html.dark body.rma-glass [class*="bg-[#090D16]"]:not(body) {
  background-color: rgba(15, 23, 42, .50) !important;
  border-color: rgba(255, 255, 255, .14) !important;
}

/* Main panels get a light edge and depth so they read as glass sheets. */
body.rma-glass .slot-card,
body.rma-glass .rma-seller-band,
body.rma-glass #seller-store-header,
body.rma-glass .glow-border-inner,
body.rma-glass header.sticky {
  box-shadow: 0 8px 32px rgba(15, 23, 42, .12), inset 0 1px 0 rgba(255, 255, 255, .5) !important;
}
html.dark body.rma-glass .slot-card,
html.dark body.rma-glass .rma-seller-band,
html.dark body.rma-glass #seller-store-header,
html.dark body.rma-glass .glow-border-inner,
html.dark body.rma-glass header.sticky {
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

/* Phones: product rows stay square, full-width (2px side gap), with a 2px gap between rows. */
@media (max-width: 639px) {
  body.rma-glass #slotsGrid { gap: 2px; }
}

/* Over a video: thicker frost so text stays readable, and the products area becomes one glass sheet. */
body.rma-glass.rma-has-video [class*="bg-white"]:not(button):not(a):not(.slide-indicator),
body.rma-glass.rma-has-video [class*="bg-gray-50"]:not(button):not(a),
body.rma-glass.rma-has-video [class*="bg-[#111827]"]:not(button):not(a),
body.rma-glass.rma-has-video [class*="bg-[#090D16]"]:not(body) { background-color: rgba(255, 255, 255, .10) !important; }
html.dark body.rma-glass.rma-has-video [class*="bg-white"]:not(button):not(a):not(.slide-indicator),
html.dark body.rma-glass.rma-has-video [class*="bg-gray-50"]:not(button):not(a),
html.dark body.rma-glass.rma-has-video [class*="bg-[#111827]"]:not(button):not(a),
html.dark body.rma-glass.rma-has-video [class*="bg-[#090D16]"]:not(body) { background-color: rgba(15, 23, 42, .12) !important; }
body.rma-glass.rma-has-video main#slotsSection,
body.rma-glass.rma-has-video #product-details,
body.rma-glass.rma-has-video main > section {
  background: transparent;
  -webkit-backdrop-filter: blur(4px) saturate(140%);
  backdrop-filter: blur(4px) saturate(140%);
  padding-top: 16px;
}
html.dark body.rma-glass.rma-has-video main#slotsSection,
html.dark body.rma-glass.rma-has-video #product-details,
html.dark body.rma-glass.rma-has-video main > section { background: transparent; }


/* Over a video the panels use a lighter blur so the video stays visible through them. */
body.rma-glass.rma-has-video [class*="bg-white"]:not(button):not(a),
body.rma-glass.rma-has-video [class*="bg-gray-50"]:not(button):not(a),
body.rma-glass.rma-has-video [class*="bg-[#111827]"]:not(button):not(a),
body.rma-glass.rma-has-video [class*="bg-[#090D16]"]:not(body) {
  -webkit-backdrop-filter: blur(6px) saturate(150%); backdrop-filter: blur(6px) saturate(150%);
}

/* Smooth scrolling on phones: live blur on many layers and fixed backgrounds make mobile
   browsers repaint every frame. On phones the glass is plain translucency (no blur), and the
   video gets its own GPU layer so scrolling only moves the content above it. */
.rma-bg-video { transform: translateZ(0); will-change: transform; }
.rma-bg-video video { transform: translateZ(0); }
@media (max-width: 1023px) {
  body.rma-glass,
  html.dark body.rma-glass { background-attachment: scroll !important; }
  body.rma-glass *,
  body.rma-glass *::before,
  body.rma-glass *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  body.rma-glass .slot-card,
  body.rma-glass .rma-seller-band,
  body.rma-glass #seller-store-header,
  body.rma-glass .glow-border-inner,
  body.rma-glass header.sticky { box-shadow: none !important; }
}

/* Phones: product name and price larger and crisper on the storefront rows. */
@media (max-width: 639px) {
  body.rma-glass .slot-card h3 { font-size: 19px; line-height: 24px; font-weight: 800; letter-spacing: -.01em; }
  body.rma-glass .slot-card h3 a { color: #0f172a; }
  body.rma-glass .slot-card .text-xl.font-black { font-size: 19px; line-height: 24px; font-weight: 900; color: #0f172a; }
  html.dark body.rma-glass .slot-card h3 a,
  html.dark body.rma-glass .slot-card .text-xl.font-black { color: #fff; }
}

/* Phones over video: product rows get enough frost for clear text; the sticky header is
   nearly solid so content scrolling under it doesn't clash with the store name. */
@media (max-width: 639px) {
  body.rma-glass.rma-has-video #slotsGrid > .slot-card { background-color: rgba(255, 255, 255, .55) !important; }
  html.dark body.rma-glass.rma-has-video #slotsGrid > .slot-card { background-color: rgba(15, 23, 42, .60) !important; }
  body.rma-glass.rma-has-video #seller-store-header,
  body.rma-glass.rma-has-video header.sticky { background-color: rgba(255, 255, 255, .88) !important; }
  html.dark body.rma-glass.rma-has-video #seller-store-header,
  html.dark body.rma-glass.rma-has-video header.sticky { background-color: rgba(15, 23, 42, .88) !important; }
}

/* Header scrolls away with the page (not sticky) on the storefront and product page. */
body.rma-glass #seller-store-header,
body.rma-glass header.sticky { position: relative !important; top: auto !important; }

/* Header uses the same glass as the product rows; name, price and short description share
   the same crisp dark text so all three read equally clearly. */
@media (max-width: 639px) {
  body.rma-glass.rma-has-video #seller-store-header,
  body.rma-glass.rma-has-video header.sticky { background-color: rgba(255, 255, 255, .55) !important; }
  html.dark body.rma-glass.rma-has-video #seller-store-header,
  html.dark body.rma-glass.rma-has-video header.sticky { background-color: rgba(15, 23, 42, .60) !important; }
  body.rma-glass .slot-card h3 a,
  body.rma-glass .slot-card .text-xl.font-black,
  body.rma-glass .slot-card p.text-xs { color: #0f172a !important; text-shadow: none !important; }
  body.rma-glass .slot-card p.text-xs { font-size: 13px; line-height: 18px; font-weight: 600; }
  html.dark body.rma-glass .slot-card h3 a,
  html.dark body.rma-glass .slot-card .text-xl.font-black,
  html.dark body.rma-glass .slot-card p.text-xs { color: #fff !important; }
}

/* Over video (all screen sizes): ONE glass level for the whole page (the product-row level, 55%), and all
   text in the same crisp dark style as the price. Buttons keep their own colours. */
@media all {
  body.rma-glass.rma-has-video [class*="bg-white"]:not(button):not(a):not(.slide-indicator),
  body.rma-glass.rma-has-video [class*="bg-gray-50"]:not(button):not(a),
  body.rma-glass.rma-has-video [class*="bg-[#111827]"]:not(button):not(a),
  body.rma-glass.rma-has-video [class*="bg-[#151D2C]"],
  body.rma-glass.rma-has-video [class*="bg-[#090D16]"]:not(body),
  body.rma-glass.rma-has-video [class*="from-amber-500/10"],
  body.rma-glass.rma-has-video main#slotsSection > div:first-child,
  body.rma-glass.rma-has-video main > section { background: rgba(255, 255, 255, .55) !important; }
  /* Nested panels (stat boxes inside the seller band etc.) stay clear so the level never doubles. */
  body.rma-glass.rma-has-video [class*="bg-white"] [class*="bg-gray-50"],
  body.rma-glass.rma-has-video [class*="bg-white"] [class*="bg-white"]:not(button):not(a),
  body.rma-glass.rma-has-video [class*="bg-[#111827]"] [class*="bg-gray-50"],
  body.rma-glass.rma-has-video .glow-border-inner [class*="bg-gray-50"],
  body.rma-glass.rma-has-video .glow-border-inner [class*="bg-[#151D2C]"] { background: transparent !important; }
  body.rma-glass.rma-has-video main#slotsSection > div:first-child { padding: 12px; border-radius: 0; }

  html.dark body.rma-glass.rma-has-video [class*="bg-white"]:not(button):not(a):not(.slide-indicator),
  html.dark body.rma-glass.rma-has-video [class*="bg-gray-50"]:not(button):not(a),
  html.dark body.rma-glass.rma-has-video [class*="bg-[#111827]"]:not(button):not(a),
  html.dark body.rma-glass.rma-has-video [class*="bg-[#151D2C]"],
  html.dark body.rma-glass.rma-has-video [class*="bg-[#090D16]"]:not(body),
  html.dark body.rma-glass.rma-has-video [class*="from-amber-500/10"],
  html.dark body.rma-glass.rma-has-video main#slotsSection > div:first-child,
  html.dark body.rma-glass.rma-has-video main > section { background: rgba(15, 23, 42, .60) !important; }
}

@media (max-width: 639px) {
  body.rma-glass.rma-has-video main#slotsSection > div:first-child { margin-left: -14px; margin-right: -14px; }
}

/* Buttons always keep their own text colour (the dark-text rule must not leak into them). */
body.rma-glass button, body.rma-glass button *,
body.rma-glass a[class*="bg-gradient"], body.rma-glass a[class*="bg-gradient"] *,
body.rma-glass nav, body.rma-glass nav * { -webkit-text-fill-color: currentColor !important; }
body.rma-glass [class*="bg-gray-900"] *, body.rma-glass [class*="bg-black"] *, body.rma-glass .rma-hero-box *, body.rma-glass [class*="from-amber-600"] * { -webkit-text-fill-color: currentColor !important; }
/* Product page main card: same 55% glass as everything else (never cleared as a nested panel). */
body.rma-glass.rma-has-video .glow-border-card .glow-border-inner { background: rgba(255, 255, 255, .55) !important; }
html.dark body.rma-glass.rma-has-video .glow-border-card .glow-border-inner { background: rgba(15, 23, 42, .60) !important; }

/* Single product page: no card. The rotating glow border (a constantly animating layer) is
   removed everywhere; on phones the content sits 2px from the screen edges. */
body.rma-glass .glow-border-card { border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; overflow: visible; }
body.rma-glass .glow-border-card::before { display: none !important; animation: none !important; }
body.rma-glass .glow-border-card .glow-border-inner { border-radius: 0 !important; box-shadow: none !important; }
@media (max-width: 639px) {
  body.rma-glass .glow-border-card { margin-left: -10px; margin-right: -10px; }
}

/* Product page "More from <store>" list: compact rows like the storefront list
   (photo | name, access, price | button), no stacked padding, 2px between rows. */
body.rma-glass .vertical-related { gap: 2px; }
body.rma-glass .vertical-related article {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 8px; border-radius: 0; border-width: 0 0 1px; flex-wrap: nowrap;
}
body.rma-glass .vertical-related .related-image { width: 96px; height: 96px; border-radius: 10px; object-fit: cover; }
body.rma-glass .vertical-related .related-copy { padding: 0; min-width: 0; flex: none; }
body.rma-glass .vertical-related .related-copy h3 { font-size: 16px; line-height: 20px; font-weight: 800; color: #0f172a; margin-top: 2px; }
body.rma-glass .vertical-related .related-copy p { font-size: 17px; margin-top: 4px; }
body.rma-glass .vertical-related article > a.block { margin: 0; white-space: nowrap; }
html.dark body.rma-glass .vertical-related .related-copy h3 { color: #fff; }
@media (max-width: 639px) {
  body.rma-glass .vertical-related article { grid-template-columns: 88px minmax(0, 1fr); gap: 4px 12px; }
  body.rma-glass .vertical-related .related-image { width: 88px; height: 88px; grid-row: span 2; }
  body.rma-glass .vertical-related article > a.block { grid-column: 2; justify-self: start; padding: 7px 14px; }
}

/* Phones: a thin, visible pencil line around each product row (storefront + category page). */
@media (max-width: 639px) {
  body.rma-glass #slotsGrid > .slot-card,
  #slotsGrid > .category-product > .slot-card {
    border: 1px solid rgba(15, 23, 42, .18) !important;
  }
  html.dark body.rma-glass #slotsGrid > .slot-card,
  html.dark #slotsGrid > .category-product > .slot-card { border-color: rgba(255, 255, 255, .22) !important; }
}

/* Phones: 5px gap between products and from the screen edges, with a clearly visible line. */
@media (max-width: 639px) {
  body.rma-glass #slotsGrid,
  #slotsGrid { gap: 5px !important; margin-left: -11px !important; margin-right: -11px !important; }
  body.rma-glass #slotsGrid > .slot-card,
  #slotsGrid > .category-product > .slot-card { border: 1px solid rgba(15, 23, 42, .30) !important; }
}

/* Product photos and videos a little brighter (storefront cards, hero, product page images). */
.rma-card-media img, .rma-card-media video,
body.rma-glass #sliderTrack img,
body.rma-glass #mainDisplayImg, body.rma-glass .thumbnail-btn img,
body.rma-glass .related-image { filter: brightness(1.1); }