/* =========================================
   WESHAH - SELIA PREMIUM PRODUCT CARDS
   Luxury Shadow + Animated Silver Border
   ========================================= */

:root {
  --luxury-radius: 18px;

  /* Silver Metallic Colors */
  --selia-metal-base: #c7cdd4;
  --selia-metal-dark: #81909e;
  --selia-metal-shine: #ffffff;

  /* Default Border */
  --luxury-border: rgba(40, 45, 55, 0.09);

  /* Premium Shadow */
  --luxury-shadow:
    0 3px 8px rgba(20, 25, 35, 0.025),
    0 10px 28px rgba(20, 25, 35, 0.065),
    0 24px 48px rgba(20, 25, 35, 0.025);
}

/* =========================================
   1. PRODUCT CARD BASE DESIGN
========================================= */

:is(
  .s-product-card-entry,
  .product-entry,
  .product-card
) {
  position: relative;

  box-sizing: border-box;

  background: #ffffff !important;

  border: 2px solid var(--luxury-border)
    !important;

  border-radius: var(--luxury-radius)
    !important;

  box-shadow: var(--luxury-shadow)
    !important;

  transition:
    transform 0.35s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

/* =========================================
   2. ANIMATED SILVER GRADIENT
========================================= */

@property --selia-ring-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes selia-silver-rotation {
  from {
    --selia-ring-angle: 0deg;
  }

  to {
    --selia-ring-angle: 360deg;
  }
}

/* =========================================
   3. PREMIUM HOVER EFFECT
========================================= */

@media (hover: hover) and (pointer: fine) {

  :is(
    .s-product-card-entry,
    .product-entry,
    .product-card
  ):hover {

    /* Floating Effect */
    transform: translateY(-5px);

    /* Transparent Border For Gradient */
    border: 2px solid transparent
      !important;

    /* Moving Silver Border */
    background:
      linear-gradient(
        #ffffff,
        #ffffff
      ) padding-box,

      conic-gradient(
        from var(--selia-ring-angle),

        var(--selia-metal-base) 0deg,
        var(--selia-metal-base) 225deg,
        var(--selia-metal-dark) 260deg,
        var(--selia-metal-shine) 290deg,
        var(--selia-metal-dark) 320deg,
        var(--selia-metal-base) 350deg,
        var(--selia-metal-base) 360deg

      ) border-box !important;

    /* Luxury Floating Shadow */
    box-shadow:
      0 8px 20px rgba(20, 25, 35, 0.055),
      0 20px 44px rgba(20, 25, 35, 0.11),
      0 35px 65px rgba(20, 25, 35, 0.045),
      0 0 18px rgba(190, 200, 215, 0.13)
      !important;

    /* Continuous Silver Animation */
    animation:
      selia-silver-rotation
      2.8s linear infinite;
  }
}

/* =========================================
   4. MOBILE DESIGN
========================================= */

@media (max-width: 767px) {

  :is(
    .s-product-card-entry,
    .product-entry,
    .product-card
  ) {

    border-radius: 15px !important;

    box-shadow:
      0 3px 12px rgba(20, 25, 35, 0.055),
      0 10px 24px rgba(20, 25, 35, 0.035)
      !important;

    transform: none;
  }
}

/* =========================================
   5. ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

  :is(
    .s-product-card-entry,
    .product-entry,
    .product-card
  ) {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}