.elementor-71 .elementor-element.elementor-element-26cde04{--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-71 .elementor-element.elementor-element-e44e175{--display:flex;--min-height:350px;--overlay-opacity:0;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-71 .elementor-element.elementor-element-e44e175:not(.elementor-motion-effects-element-type-background), .elementor-71 .elementor-element.elementor-element-e44e175 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://hockeytown.co.za/wp-content/uploads/2025/08/Lifestyle3-scaled.jpg");background-position:center center;background-size:cover;}.elementor-71 .elementor-element.elementor-element-e44e175::before, .elementor-71 .elementor-element.elementor-element-e44e175 > .elementor-background-video-container::before, .elementor-71 .elementor-element.elementor-element-e44e175 > .e-con-inner > .elementor-background-video-container::before, .elementor-71 .elementor-element.elementor-element-e44e175 > .elementor-background-slideshow::before, .elementor-71 .elementor-element.elementor-element-e44e175 > .e-con-inner > .elementor-background-slideshow::before, .elementor-71 .elementor-element.elementor-element-e44e175 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#FFFFFF;--background-overlay:'';}.elementor-71 .elementor-element.elementor-element-e0f0642{margin:226px 0px calc(var(--kit-widget-spacing, 0px) + 0px) -205px;padding:0px 0px 0px 0px;}.elementor-71 .elementor-element.elementor-element-e0f0642.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-71 .elementor-element.elementor-element-e0f0642 .elementor-heading-title{font-size:55px;font-weight:900;letter-spacing:8.55px;color:var( --e-global-color-blocksy_palette_11 );}.elementor-71 .elementor-element.elementor-element-203a0d7{--display:flex;--align-items:stretch;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overflow:auto;}.elementor-71 .elementor-element.elementor-element-203a0d7.e-con{--align-self:stretch;--flex-grow:1;--flex-shrink:0;}.elementor-71 .elementor-element.elementor-element-519afc5.elementor-element{--align-self:stretch;--flex-grow:1;--flex-shrink:0;}.elementor-71 .elementor-element.elementor-element-519afc5.xpro-widget-bg-overlay:before{transition:background 0.3s;}@media(max-width:1024px){.elementor-71 .elementor-element.elementor-element-e44e175{--min-height:300px;}.elementor-71 .elementor-element.elementor-element-e0f0642{margin:200px 0px calc(var(--kit-widget-spacing, 0px) + 0px) -140px;}.elementor-71 .elementor-element.elementor-element-e0f0642 .elementor-heading-title{font-size:45px;}}@media(min-width:768px){.elementor-71 .elementor-element.elementor-element-e44e175{--width:790px;}}@media(max-width:1024px) and (min-width:768px){.elementor-71 .elementor-element.elementor-element-e44e175{--width:600px;}}@media(max-width:767px){.elementor-71 .elementor-element.elementor-element-e44e175{--width:250px;--overlay-opacity:0.2;--margin-top:0px;--margin-bottom:0px;--margin-left:60px;--margin-right:0px;}.elementor-71 .elementor-element.elementor-element-e44e175:not(.elementor-motion-effects-element-type-background), .elementor-71 .elementor-element.elementor-element-e44e175 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:bottom center;}.elementor-71 .elementor-element.elementor-element-e0f0642{margin:174px 0px calc(var(--kit-widget-spacing, 0px) + 0px) -80px;}.elementor-71 .elementor-element.elementor-element-e0f0642 .elementor-heading-title{font-size:33px;}.elementor-71 .elementor-element.elementor-element-203a0d7{--align-items:stretch;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-71 .elementor-element.elementor-element-203a0d7.e-con{--align-self:stretch;--flex-grow:1;--flex-shrink:0;}.elementor-71 .elementor-element.elementor-element-519afc5.elementor-element{--align-self:center;}}/* Start custom CSS for html, class: .elementor-element-519afc5 */.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 */