.elementor-229 .elementor-element.elementor-element-d7e28e9{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-229 .elementor-element.elementor-element-2d9a0a6{--display:flex;--min-height:40vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overlay-opacity:0.3;--border-radius:25px 25px 25px 25px;--padding-top:2rem;--padding-bottom:2rem;--padding-left:2rem;--padding-right:2rem;}.elementor-229 .elementor-element.elementor-element-2d9a0a6:not(.elementor-motion-effects-element-type-background), .elementor-229 .elementor-element.elementor-element-2d9a0a6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-229 .elementor-element.elementor-element-2d9a0a6::before, .elementor-229 .elementor-element.elementor-element-2d9a0a6 > .elementor-background-video-container::before, .elementor-229 .elementor-element.elementor-element-2d9a0a6 > .e-con-inner > .elementor-background-video-container::before, .elementor-229 .elementor-element.elementor-element-2d9a0a6 > .elementor-background-slideshow::before, .elementor-229 .elementor-element.elementor-element-2d9a0a6 > .e-con-inner > .elementor-background-slideshow::before, .elementor-229 .elementor-element.elementor-element-2d9a0a6 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://rder4medistribution.com/wp-content/uploads/2026/10/cta-home-amaze-1.webp");--background-overlay:'';background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-229 .elementor-element.elementor-element-55c56cd{--display:flex;--gap:14px 14px;--row-gap:14px;--column-gap:14px;--overflow:hidden;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;color:var( --e-global-color-primary );}.elementor-229 .elementor-element.elementor-element-b2f8b9a{text-align:center;}.elementor-229 .elementor-element.elementor-element-b2f8b9a .elementor-heading-title{color:var( --e-global-color-primary );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-229 .elementor-element.elementor-element-1424558{text-align:center;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-primary );}.elementor-229 .elementor-element.elementor-element-022d86b{--display:flex;--gap:2rem 2rem;--row-gap:2rem;--column-gap:2rem;--padding-top:4rem;--padding-bottom:4rem;--padding-left:2rem;--padding-right:2rem;}.elementor-widget-wc-categories .woocommerce .woocommerce-loop-category__title{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;}.elementor-widget-wc-categories .woocommerce-loop-category__title .count{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;}.elementor-229 .elementor-element.elementor-element-c16846e .product{text-align:center;}.elementor-229 .elementor-element.elementor-element-c16846e{width:100%;max-width:100%;}.elementor-229 .elementor-element.elementor-element-c16846e.elementor-wc-products ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-229 .elementor-element.elementor-element-c16846e a > img{border-style:solid;border-width:2px 2px 2px 2px;border-color:var( --e-global-color-primary );border-radius:16px 16px 16px 16px;}.elementor-229 .elementor-element.elementor-element-c16846e .woocommerce .woocommerce-loop-category__title{font-family:"DM Sans", Sans-serif;font-size:clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);font-weight:700;line-height:1.3em;letter-spacing:-0.5px;}@media(max-width:1024px){.elementor-229 .elementor-element.elementor-element-2d9a0a6{--min-height:30vh;}.elementor-229 .elementor-element.elementor-element-55c56cd{--padding-top:0rem;--padding-bottom:0rem;--padding-left:2rem;--padding-right:2rem;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-229 .elementor-element.elementor-element-1424558{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-229 .elementor-element.elementor-element-022d86b{--padding-top:3rem;--padding-bottom:3rem;--padding-left:2rem;--padding-right:2rem;}}@media(max-width:767px){.elementor-229 .elementor-element.elementor-element-d7e28e9{--justify-content:center;}.elementor-229 .elementor-element.elementor-element-2d9a0a6{--width:98%;--padding-top:3rem;--padding-bottom:2rem;--padding-left:1rem;--padding-right:1rem;}.elementor-229 .elementor-element.elementor-element-55c56cd{--padding-top:0rem;--padding-bottom:0rem;--padding-left:0rem;--padding-right:0rem;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-229 .elementor-element.elementor-element-1424558{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-229 .elementor-element.elementor-element-022d86b{--padding-top:3rem;--padding-bottom:3rem;--padding-left:0rem;--padding-right:0rem;}}@media(min-width:768px){.elementor-229 .elementor-element.elementor-element-2d9a0a6{--width:99%;}.elementor-229 .elementor-element.elementor-element-55c56cd{--width:760px;}}/* Start custom CSS for wc-categories, class: .elementor-element-c16846e *//* ========================================================= PRODUCT CATEGORY — CIRCULAR SPOTLIGHT CARD Elementor Dynamic Colors Original working structure preserved ========================================================= */ /* ========================================================= DYNAMIC COLOR PLACEHOLDERS ========================================================= */ .elementor-kit-10 { --category-green: var(--e-global-color-accent); --category-gold: var(--e-global-color-925fd1b); --category-white: #ffffff; } .woocommerce .products ul, .woocommerce ul.products { width: 100%; } /* ========================================================= WOOCOMMERCE WRAPPER ========================================================= */ .woocommerce { display: flex; justify-content: center; align-items: center; } /* ========================================================= PRODUCT CATEGORY CARD ========================================================= */ .woocommerce ul.products li.product-category.product { position: relative; margin: 0 !important; padding: 18px 2rem !important; background: linear-gradient( 180deg, var(--category-white) 0%, color-mix(in srgb, var(--category-gold) 12%, transparent) 100% ); border: 1px solid color-mix(in srgb, var(--category-green) 8%, transparent); border-radius: 28px; overflow: hidden; box-shadow: 0 8px 20px color-mix(in srgb, var(--category-green) 5%, transparent), 0 18px 40px color-mix(in srgb, var(--category-green) 6%, transparent); transition: transform 0.45s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s ease, border-color 0.4s ease; } /* ========================================================= SOFT TOP GLOW ========================================================= */ .woocommerce ul.products li.product-category.product::before { content: ""; position: absolute; top: -60px; left: 50%; width: 150px; height: 150px; transform: translateX(-50%); background: color-mix(in srgb, var(--category-green) 12%, transparent); border-radius: 50%; filter: blur(12px); pointer-events: none; transition: transform 0.45s ease, background 0.4s ease; } /* ========================================================= CATEGORY LINK ========================================================= */ .woocommerce ul.products li.product-category.product > a { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; text-decoration: none !important; color: inherit; } /* ========================================================= CATEGORY IMAGE ========================================================= */ .woocommerce ul.products li.product-category.product img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; max-width: 300px; max-height: 300px; margin: 10px auto 24px !important; border-radius: 50%; border: 8px solid var(--category-white); outline: 1px dashed color-mix(in srgb, var(--category-green) 45%, transparent); outline-offset: 7px; box-shadow: 0 8px 22px color-mix(in srgb, var(--category-green) 8%, transparent), 0 0 0 1px color-mix(in srgb, var(--category-green) 5%, transparent); transform: scale(1); transition: transform 0.55s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s ease, border-color 0.4s ease, outline-color 0.4s ease, outline-offset 0.4s ease; } /* ========================================================= CATEGORY TITLE ========================================================= */ .woocommerce ul.products li.product-category.product .woocommerce-loop-category__title { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin: 0 !important; padding: 0 !important; color: var(--category-green); text-align: center; font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: -0.2px; transition: color 0.35s ease, transform 0.35s ease; } /* ========================================================= PRODUCT COUNT ========================================================= */ .woocommerce ul.products li.product-category.product .woocommerce-loop-category__title .count { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 28px; margin-top: 2px; padding: 0 12px; background: var(--category-white); color: var(--category-green); border: 1px solid color-mix(in srgb, var(--category-gold) 35%, transparent); border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; opacity: 1; box-shadow: 0 5px 12px color-mix(in srgb, var(--category-green) 5%, transparent); transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } /* ========================================================= CARD HOVER ========================================================= */ .woocommerce ul.products li.product-category.product:hover { transform: translateY(-10px); border-color: color-mix(in srgb, var(--category-green) 28%, transparent); box-shadow: 0 14px 28px color-mix(in srgb, var(--category-green) 8%, transparent), 0 28px 55px color-mix(in srgb, var(--category-green) 10%, transparent); } /* ========================================================= GLOW HOVER ========================================================= */ .woocommerce ul.products li.product-category.product:hover::before { transform: translateX(-50%) scale(1.12); background: color-mix(in srgb, var(--category-gold) 16%, transparent); } /* ========================================================= IMAGE HOVER ========================================================= */ .woocommerce ul.products li.product-category.product:hover img { transform: scale(1.04); border-color: var(--category-white); outline-color: var(--category-gold); box-shadow: 0 12px 28px color-mix(in srgb, var(--category-green) 10%, transparent), 0 0 0 1px color-mix(in srgb, var(--category-gold) 28%, transparent); } /* ========================================================= TITLE HOVER ========================================================= */ .woocommerce ul.products li.product-category.product:hover .woocommerce-loop-category__title { color: var(--category-gold); transform: translateY(2px); } /* ========================================================= COUNT HOVER ========================================================= */ .woocommerce ul.products li.product-category.product:hover .woocommerce-loop-category__title .count { background: var(--category-gold); color: var(--category-white); border-color: var(--category-gold); transform: scale(1.06); box-shadow: 0 6px 15px color-mix(in srgb, var(--category-gold) 20%, transparent); } /* ========================================================= LINK FOCUS ========================================================= */ .woocommerce ul.products li.product-category.product > a:focus { outline: none; } .woocommerce ul.products li.product-category.product > a:focus-visible { border-radius: 22px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--category-green) 20%, transparent); }/* End custom CSS */