.elementor-75 .elementor-element.elementor-element-c18a869{--display:flex;--min-height:300px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:60px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}.elementor-75 .elementor-element.elementor-element-a6cb9a3{--display:flex;--min-height:350px;--overlay-opacity:0.1;box-shadow:0px 0px 3px 0px rgba(0,0,0,0.5);--margin-top:0px;--margin-bottom:0px;--margin-left:118px;--margin-right:0px;}.elementor-75 .elementor-element.elementor-element-a6cb9a3:not(.elementor-motion-effects-element-type-background), .elementor-75 .elementor-element.elementor-element-a6cb9a3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://hockeytown.co.za/wp-content/uploads/2025/09/Lifestyle6-copy-scaled-e1759212579118.jpg");background-position:center center;background-size:cover;}.elementor-75 .elementor-element.elementor-element-a6cb9a3::before, .elementor-75 .elementor-element.elementor-element-a6cb9a3 > .elementor-background-video-container::before, .elementor-75 .elementor-element.elementor-element-a6cb9a3 > .e-con-inner > .elementor-background-video-container::before, .elementor-75 .elementor-element.elementor-element-a6cb9a3 > .elementor-background-slideshow::before, .elementor-75 .elementor-element.elementor-element-a6cb9a3 > .e-con-inner > .elementor-background-slideshow::before, .elementor-75 .elementor-element.elementor-element-a6cb9a3 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#FFFFFF;--background-overlay:'';}.elementor-75 .elementor-element.elementor-element-c32849d{margin:-370px 0px calc(var(--kit-widget-spacing, 0px) + 0px) -692px;padding:0px 0px 400px 0px;}.elementor-75 .elementor-element.elementor-element-c32849d.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-75 .elementor-element.elementor-element-c32849d .elementor-heading-title{font-size:55px;font-weight:900;letter-spacing:8.55px;color:var( --e-global-color-blocksy_palette_11 );}.elementor-75 .elementor-element.elementor-element-8e671fd{--display:flex;--align-items:stretch;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overflow:auto;}.elementor-75 .elementor-element.elementor-element-8e671fd.e-con{--align-self:stretch;--flex-grow:1;--flex-shrink:0;}.elementor-75 .elementor-element.elementor-element-962de47.elementor-element{--align-self:stretch;--flex-grow:1;--flex-shrink:0;}.elementor-75 .elementor-element.elementor-element-962de47.xpro-widget-bg-overlay:before{transition:background 0.3s;}@media(max-width:1024px){.elementor-75 .elementor-element.elementor-element-a6cb9a3{--min-height:300px;}.elementor-75 .elementor-element.elementor-element-c32849d{margin:-150px 0px calc(var(--kit-widget-spacing, 0px) + 0px) -250px;}.elementor-75 .elementor-element.elementor-element-c32849d .elementor-heading-title{font-size:45px;}}@media(min-width:768px){.elementor-75 .elementor-element.elementor-element-a6cb9a3{--width:790px;}}@media(max-width:1024px) and (min-width:768px){.elementor-75 .elementor-element.elementor-element-a6cb9a3{--width:600px;}}@media(max-width:767px){.elementor-75 .elementor-element.elementor-element-a6cb9a3{--width:250px;--overlay-opacity:0.2;--margin-top:0px;--margin-bottom:0px;--margin-left:60px;--margin-right:0px;}.elementor-75 .elementor-element.elementor-element-a6cb9a3:not(.elementor-motion-effects-element-type-background), .elementor-75 .elementor-element.elementor-element-a6cb9a3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:bottom center;}.elementor-75 .elementor-element.elementor-element-c32849d{margin:-100px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-75 .elementor-element.elementor-element-c32849d .elementor-heading-title{font-size:31px;}.elementor-75 .elementor-element.elementor-element-8e671fd{--align-items:stretch;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-75 .elementor-element.elementor-element-8e671fd.e-con{--align-self:stretch;--flex-grow:1;--flex-shrink:0;}.elementor-75 .elementor-element.elementor-element-962de47.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:0;}}/* Start custom CSS for html, class: .elementor-element-962de47 */.ht-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin: 40px 0;
}

.ht-card {
    position: relative;
    text-decoration: none;
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s;
}

.ht-card:hover {
    transform: translateY(-5px);
}

.ht-card-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.ht-card-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
    top: 0;
    left: 0;
}

/* Hide hover image by default */
.img-hover {
    opacity: 0;
}

/* Only apply hover effect if the card has hover image */
.ht-card.has-hover-img:hover .img-hover {
    opacity: 1;
}

.ht-card.has-hover-img:hover .img-front {
    opacity: 0;
}

.ht-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(100, 100, 100, 0.1);
    opacity: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 20px;
    transition: opacity 0.3s;
}

.ht-card:hover .ht-card-overlay {
    opacity: 1;
}

.ht-view-button {
    background-color: #50A586;
    color: white;
    padding: 8px 20px;
    font-weight: 600;
    border-radius: 20px;
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

.ht-card:hover .ht-view-button {
    transform: translateY(0);
}

.ht-card-title {
    padding: 15px;
    font-weight: 600;
    color: #222;
    text-align: center;
}/* End custom CSS */