/* SHOP PGS - BerryVines.com */

h1 {font-size: calc(18px + 1.5vw); margin-top: .5em; margin-bottom: .375em; color: #5b2e47; text-wrap: balance;}
@media (min-width: 768px) and (max-width: 1200px) {h1 {font-size: calc(18px + 2vw);}}
@media (min-width: 0px) and (max-width: 767px) {h1 {font-size: calc(18px + 3.25vw);}}

@media only screen and (min-width: 701px) {main {padding-top: 0;}}

.flex-container {display: flex; flex-direction: row; gap: 20px; flex-wrap: nowrap; margin: 0 auto; max-width: 1600px;}
@media only screen and (min-width: 1360px) and (max-width: 1599px) {.flex-container { max-width: 1300px; }}
@media only screen and (min-width: 661px) and (max-width: 1359px) {.flex-container { max-width: 980px; }}
#shop.flex-container .flex-colm-lft {flex: 0 0 325px; background-color: rgba(255,255,255,.25); border-right: 1px solid #8ba997; padding: 0 15px; height: 100vh;}
#shop.flex-container .flex-colm-rgt {flex: 1 1 auto;  min-width: 0;}

/* 1 column (up to 767px) */
@media only screen and (max-width: 767px) {.grid-sizer, .grid-item {width: 100%;}}
/* 2 columns (768px–1359px): 1 gutter total */
@media only screen and (min-width: 768px) and (max-width: 1359px) {.grid-sizer, .grid-item {width: calc((100% - var(--gutter)) / 2);}}
/* 3 columns (1360px–1599px): 2 gutters total */
@media only screen and (min-width: 1360px) and (max-width: 1599px) {.grid-sizer, grid-item { width: calc((100% - (2 * var(--gutter))) / 3);}}
/* 4 columns (1600px+): 3 gutters */
@media only screen and (min-width: 1600px) {.grid-sizer, .grid-item {width: calc((100% - (3 * var(--gutter))) / 4);}}

@media only screen and (max-width: 660px) {
.flex-container {flex-direction: column; flex-wrap: wrap; gap: 10px; align-items: center;}
#shop.flex-container .flex-colm-lft, #shop.flex-container .flex-colm-rgt {flex: 0 0 100%; background-color: transparent; border: none; height: auto;}
.grid-sizer, .grid-item {position: static !important; width: 100%; margin: 0 auto; position:relative;}
.grid-item img {width: 100%; max-width: 300px; height:auto;}
}

#shop ul, #shop ol {list-style-type: none; text-align: center;}
#shop ul li, #shop ol li {margin-bottom: .25em; line-height: 1.125; margin-bottom: .625em; text-wrap: balance;}
#shop p {text-align: center; line-height: 1.125; margin-bottom: .625em; text-wrap: balance;} 

/* PHOTOS: Grid + Masonry Setup */
:root {--gutter: 10px;}
.grid {margin: 0 auto; position: relative; opacity: 0; transition: opacity 0.5s ease-out;}
.grid::after {content: ""; display: table; clear: both;}
.grid--loaded {opacity: 1;}
.grid-item {padding-right: var(--gutter); /*padding-bottom: var(--gutter);*/ padding-bottom: 20px; max-width: 300px;}

/* make the images fluid inside each tile */
.grid-item img {width: 100%; height: auto; display: block; border-radius: 3px; margin: 0 auto; border: 1px solid #8ba997; }

@media print {
.flex-container {flex-direction: column; flex-wrap: wrap; gap: 10px; align-items: center;}
#shop.flex-container .flex-colm-lft, #shop.flex-container .flex-colm-rgt {flex: 0 0 100%; background-color: transparent; border: none;}
/* 1) Reset the grid container so it flows normally */
.grid, .grid--loaded {display: block !important; width: auto !important; position: static !important; transform: none !important; opacity: 1 !important; visibility: visible !important;}

/* Float each real item, 300px wide, gutter on right */
.grid-item {position: static !important; float: left !important;
width: 300px !important; height: auto !important; margin: 5px 5px 5px 0 !important; transform: none !important;}
.grid-sizer {display: none !important; float: none !important;}
/* Ensure the img itself fills its box */
.grid-item img {display: block !important; width: 100% !important; height: auto !important;}
}