/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 29 2025 | 15:04:04 */
.wd-header-search .wd-tools-icon::after {
  
  font-size: 20px!important;
 
}
.wd-search-full-screen .searchform {
 
  --wd-form-height: 50px!important;
  border-radius: 0px!important;
}

.products-bordered-grid-ins :is(.wd-cat-wrap, .product-wrapper) {
  border: 3px solid transparent!important;
}
.wd-cat-wrap {
  padding: 1px!important; 
}
/* ====================================================================== */
/* 1. CSS HOUDINI @property RULE (MUST BE AT THE TOP OF YOUR CSS)          */
/* This is REQUIRED to enable smooth animation of the gradient's angle.    */
/* ====================================================================== */
@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 90.07deg;
  inherits: false;
}

/* ====================================================================== */
/* 2. KEYFRAME ANIMATION                                                  */
/* Defines the 360-degree rotation of the gradient angle.                 */
/* ====================================================================== */
@keyframes rotate-border {
  /* Rotates the angle from 90.07deg to 450.07deg (360 degrees more) */
  to {
    --gradient-angle: 450.07deg;
  }
}

/* ====================================================================== */
/* 3. INITIAL STYLES (THE ELEMENT ITSELF)                                 */
/* Sets the default look and pauses the rotation animation.               */
/* ====================================================================== */
.wd-cat-wrap {
  position: relative;
  border: 1px solid transparent;
  border-radius: 12px;
  
  /* Initial (Lighter, Subtle) Gradient, using the animatable variable */
  background-image: linear-gradient(#fff, #fff), 
                    linear-gradient(var(--gradient-angle), 
                      rgba(231, 0, 104, 0.6) 0%,   /* Pink (60% opacity) */
                      rgba(207, 161, 0, 0.6) 50%,   /* Gold (60% opacity) */
                      rgba(0, 149, 211, 0.6) 89%);  /* Blue (60% opacity) */
  
  background-origin: border-box;
  background-clip: content-box, border-box;
  
  /* Transition for a smooth hover on other properties (like scale or box-shadow) */
  transition: all 0.3s ease;
  
  /* Apply the rotation animation, but set it to PAUSED */
  animation: rotate-border 3s linear infinite paused; 
}

/* ====================================================================== */
/* 4. HOVER STYLES                                                        */
/* Starts the rotation and applies the visible, wide, dark gradient.      */
/* ====================================================================== */
.wd-cat-wrap:hover {
  /* 1. START ROTATION: Change the play state from 'paused' to 'running' */
  animation-play-state: running;
  
  /* 2. WIDER, DARKER GRADIENT: Override the background-image */
  background-image: linear-gradient(#fff, #fff), 
                    linear-gradient(var(--gradient-angle), 
                      rgba(231, 0, 104, 1) 0%,      /* Pink (100% opacity) */
                      rgba(207, 161, 0, 1) 30%,      /* Gold START (100% opacity) */
                      rgba(207, 161, 0, 1) 70%,      /* Gold END (100% opacity) */
                      rgba(0, 149, 211, 1) 100%);     /* Blue (100% opacity) */
  
  /* Ensure the switch from light to dark gradient is also smooth */
  transition: background-image 0.4s ease-out, all 0.3s ease;
}




/* ====================================================================== */
/* GLOBAL ANIMATION SETUP (MUST BE AT THE TOP OF YOUR CSS)                */
/* This block remains unchanged and is required for both elements.        */
/* ====================================================================== */
@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 90.07deg;
  inherits: false;
}

@keyframes rotate-border {
  to {
    --gradient-angle: 450.07deg;
  }
}

.cat-design-alt .wd-cat-thumb {
  margin-inline: auto;
  max-width: var(--wd-cat-img-width);
  margin-top: 10px;
}