/* BERRYVINES.COM /home.css */

/* ********** CAROUSEL ********** */
.bkgd-carousel {position: relative; width: 100%; aspect-ratio: 32/9; overflow: hidden;}
@media screen and (max-width: 1200px) {.bkgd-carousel {aspect-ratio: 16 / 9;}}
@media screen and (max-width: 600px) {.bkgd-carousel {aspect-ratio: 3 / 2;}}
.carousel-itm {position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out; z-index: 0;}
.carousel-itm.active {opacity: 1; z-index: 1;}
.carousel-itm picture, .carousel-itm img {display: block; width: 100%; height: 100%; object-fit: cover;}

/* burgundy btn */
.carousel-itm a {position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: inline-block;
background-color: rgba(107,82,94, .9); padding: 6px 10px; border-radius: 5px; cursor: pointer; text-decoration: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); text-align: center; white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.5);
color: #fff; transition: all 0.3s ease; overflow: hidden;}
.carousel-itm a:hover {background-color: rgba(107,82,94, 1); border-color: rgba(255, 255, 255, 0.8); transform: translateX(-50%) translateY(-2px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);}
.carousel-itm a::before {content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
background: linear-gradient(to right,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.5) 50%,
rgba(255,255,255,0) 100%);
transform: rotate(45deg); opacity: 0; transition: opacity 0.1s ease;}
.carousel-itm a:active::before, .carousel-itm a:focus::before {animation: sparkle 1.75s ease-out;}
@keyframes sparkle {0% {opacity: 1; transform: rotate(45deg) translateX(-100%);}
20% {opacity: 1;} 80% {opacity: 0.8;}100% {opacity: 0; transform: rotate(45deg) translateX(100%);}}
@media screen and (max-width: 480px) {.carousel-itm a {bottom: 8px; background-color: rgba(107,82,94, 1); font-weight: bold;}}
@media screen and (max-width: 639px) {.carousel-itm a {font-size: 1.125rem; padding: 0.625em 1em;}}
@media screen and (min-width: 640px) and (max-width: 1023px) {.carousel-itm a {font-size: 1.25rem; padding: .625em 1em;}}
@media screen and (min-width: 1024px) {.carousel-itm a {font-size: 1.375rem; padding: .625em 1em;}}


/* ********** CATEGORY GRID ********** */
.category-grid {margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 20px 0; border-top: 1px solid #8ba997; border-right: none; border-bottom: 1px solid #8ba997; border-left: none; background-color: rgba(255,255,255,.25);}
.cat-item {width: 340px; height: 340px; position: relative; overflow: hidden; border-radius: 3px; transition: all 0.3s ease; border: 0 solid transparent;}
.cat-item img.scalable {width: 100%; height: auto; display: block; border-radius: 3px;}
 @media screen and (min-width: 1600px) {.cat-item img.scalable {width: 100%; height: auto; display: block; border-radius: 3px;}}
.cat-item::after {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 0 solid rgba(255, 255, 255, 0); transition: all 0.3s ease;}
.cat-item:hover::after, .cat-item:active::after {border: 1px solid rgba(255, 255, 255, 0.6); margin: 8px; border-radius: 3px;}
.cat-item::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(55, 10, 30, 0.4); transition: all 0.3s ease; z-index: 1;}
.cat-item:hover::before {background: rgba(55, 10, 30, 0.1);}
.cat-item__overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; text-decoration: none; z-index: 2;}
.cat-item__title {color: white; font-size: 2rem; letter-spacing: -.05em; line-height: 1.125; font-weight: bold; text-align: center; margin: 0; position: relative; z-index: 2; transform: translateY(0); transition: all 0.4s ease; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);}
.cat-item__title:hover {text-shadow: 0 2px 3px rgba(0, 0, 0, .65);}
.cat-item__title a {text-decoration: none; color: white;}


/* ********** NEW PRODUCTS ********** */
#new {max-width: 1650px; margin: 0 auto; padding: 25px 20px 20px;}
@media screen and (max-width: 1600px) {#new {max-width: none; padding: 20px 0;}}
.swiper-slide img {width: 250px; height: 250px;}
@media (min-width: 515px) {
.img-hover-wrap {position: relative; display: inline-block;}
.img-hover-wrap img {display: block; width: 250px; height: 250px; transition: filter 0.3s ease, transform 0.3s ease;}
.img-hover-wrap:hover img {filter: brightness(120%); transform: scale(1.02); cursor: pointer;}
.img-hover-text {position: absolute; top: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.6); color: #fff;
  padding: 4px 8px; font-size: 0.85rem; border-radius: 4px; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; white-space: nowrap;}
.img-hover-wrap:hover .img-hover-text {opacity: 1;}
}


/* ********** NEW PRODUCTS POPUP ********** */
#img-popup-overlay {display: none; position: fixed; z-index: 9999; inset: 0; background: rgba(65, 73, 79, .85);
  align-items: center; justify-content: center; flex-direction: column; padding: 20px;}
/* Close on click */
#img-popup-overlay.active {display: flex; animation: fadeIn 0.3s ease-in-out;}
@keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}
/* Wrapper inside overlay to control image positioning */
.img-popup-inner {position: relative; text-align: center; max-width: 90vw; max-height: 90vh;}
/* Image itself */
.img-popup-inner img {max-width: 100%; max-height: 80vh; border-radius: 4px; box-shadow: 5px 5px 15px rgba(0,0,0,0.5);}
/* Close button anchored to image */
#img-popup-close {position: absolute; top: -20px; right: -20px; background: #41494f; color: #fff; border: none; border-radius: 50%; 
width: 40px; height: 40px; font-size: 2.25rem; line-height: 1; cursor: pointer;  display: flex; align-items: center; justify-content: center; 
z-index: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);}
#img-popup-close:hover {background: #5a636a;}