/* ONECOM / UniShop2 — Graphite Glass v2.0
 * Scope: product grids, UniShop2 modules and ONECOM Brand Showcase. Load LAST in <head>.
 * No layout, typography, DOM, events or product data changes.
 * Higher specificity + !important override existing custom/generated styles.
 */
body :is(#product-category .product-layout.grid-view, .product-layout.grid-view, .uni-module, .obs) .product-thumb.uni-item {
  --oc-glow: 147, 190, 231;
  --oc-edge: 176, 201, 225;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(var(--oc-glow), .10), transparent 58%),
    linear-gradient(155deg, rgba(43, 53, 64, .66), rgba(13, 18, 25, .86) 48%, rgba(9, 13, 19, .92)) !important;
  border-color: rgba(var(--oc-edge), .26) !important;
  border-radius: 16px !important;
  /* Inset edges do not change card dimensions, even when the theme has border:none. */
  box-shadow:
    inset 0 0 0 1px rgba(var(--oc-edge), .24),
    inset 0 1px 0 rgba(235, 245, 255, .12),
    0 8px 20px rgba(0, 0, 0, .20) !important;
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
  animation: none !important;
  transform: none !important;
  transition: box-shadow .2s ease, border-color .2s ease !important;
}

/* The glow is painted behind existing image children. No overlays intercept clicks,
 * cover carousel strips or interfere with additional-image swapping. */
body :is(#product-category .product-layout.grid-view, .product-layout.grid-view, .uni-module, .obs) .product-thumb.uni-item .product-thumb__image {
  background:
    radial-gradient(ellipse 39% 37% at 50% 41%, rgba(var(--oc-glow), .48) 0%, rgba(var(--oc-glow), .17) 49%, rgba(var(--oc-glow), 0) 100%),
    radial-gradient(ellipse 39% 9% at 50% 76%, rgba(var(--oc-glow), .20) 0%, rgba(var(--oc-glow), 0) 100%) !important;
  border-radius: 12px !important;
}

body :is(#product-category .product-layout.grid-view, .product-layout.grid-view, .uni-module, .obs) .product-thumb.uni-item .product-thumb__image > a,
body :is(#product-category .product-layout.grid-view, .product-layout.grid-view, .uni-module, .obs) .product-thumb.uni-item .product-thumb__image img,
body :is(#product-category .product-layout.grid-view, .product-layout.grid-view, .uni-module, .obs) .product-thumb.uni-item .product-thumb__caption {
  background: transparent !important;
}

/* Existing dimensions, font sizes and row counts remain controlled by UniShop2. */
body :is(#product-category .product-layout.grid-view, .product-layout.grid-view, .uni-module, .obs) .product-thumb.uni-item .product-thumb__name {
  color: #f1f5fa !important;
}

body :is(#product-category .product-layout.grid-view, .product-layout.grid-view, .uni-module, .obs) .product-thumb.uni-item .onecom-card-specs {
  --onecom-spec-label-color: #a6afbc;
  --onecom-spec-value-color: #edf2f7;
  --onecom-spec-line: rgba(190, 209, 229, .10);
  --onecom-spec-accent: rgba(147, 190, 231, .22);
}

/* Only the surface of purchase buttons; status colors/icons and disabled states stay. */
body :is(#product-category .product-layout.grid-view, .product-layout.grid-view, .uni-module, .obs) .product-thumb.uni-item .product-thumb__cart .btn:not(:disabled):not(.disabled):not(.disabled2):not(.in-cart) {
  background-image: linear-gradient(155deg, rgba(197, 216, 237, .10), rgba(197, 216, 237, 0) 65%) !important;
  border-color: rgba(var(--oc-edge), .32) !important;
  box-shadow: inset 0 1px 0 rgba(235, 245, 255, .09) !important;
}

@media (hover: hover) and (pointer: fine) {
  body :is(#product-category .product-layout.grid-view, .product-layout.grid-view, .uni-module, .obs) .product-thumb.uni-item:hover {
    border-color: rgba(var(--oc-edge), .44) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--oc-edge), .42), inset 0 1px 0 rgba(235, 245, 255, .17), 0 10px 24px rgba(0, 0, 0, .25) !important;
    transform: none !important;
  }
}

@media (max-width: 767px) {
  body :is(#product-category .product-layout.grid-view, .product-layout.grid-view, .uni-module, .obs) .product-thumb.uni-item {
    border-radius: 12px !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* Same glass shading; omit expensive backdrop blur on small screens. */
  }
  body :is(#product-category .product-layout.grid-view, .product-layout.grid-view, .uni-module, .obs) .product-thumb.uni-item .product-thumb__image {
    border-radius: 9px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body :is(#product-category .product-layout.grid-view, .product-layout.grid-view, .uni-module, .obs) .product-thumb.uni-item {
    transition: none !important;
  }
}