/* IMAGE OVERLAY */
.se-section-image-overlay .editContent,
.se-section-image-overlay .content-block-column {
 position: relative;
}

.se-section-image-overlay .content-block-column::before {
 content: '';
 background-color: rgba(0,0,0,0.10);
 width: 100%;
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
}
.bff-image-container {
 max-width: 600px;
 margin-left: 150px;
 padding: 50px;
}

.bff-image {
 max-width: 100%;
 display: block;
 margin: 0;
}

@media (max-width: 600px) {
 .bff-image-container {
 margin: 0 auto;
 padding: 10px;
max-width: 300px;
 }
}

/* ==== Carousel "card" styling ==== */
.custom-carousel .slick-slide > div > div {
 background-color: #fff !important; /* white card */
 border-radius: 8px !important; /* rounded corners */
 overflow: hidden !important; /* crop overflow to curve */
 box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important; /* subtle lift */
 transition: transform 0.2s ease !important; /* add transition */
 margin-top: 5px !important; /* add small top margin to prevent clipping */
}

/* Add hover effect to carousel cards */
.custom-carousel .slick-slide > div > div:hover {
 transform: scale(1.02) !important;
}

/* ==== 4) Add top/bottom padding to the text block ==== */
.custom-carousel .seImgFrame + div {
 padding-top: 1rem !important;
 padding-bottom: 1rem !important;
}

/* ==== Carousel "View More" button styling ==== */
.custom-carousel .seContentSectionLink a.btn,
.custom-carousel .seContentSectionLink a.btn-primary {
 display: inline-block !important;
 margin: -1% auto 2% auto !important;
 padding: 0.75rem 3.5rem !important;
 border: none !important;
 background-color: #00263a !important;
 color: #fff !important;
 font-weight: bold !important;
 font-size: clamp(14px, 3.2vw, 18px) !important;
 text-decoration: none !important;
 border-radius: 9999px !important;
 transition: background-color 0.3s ease !important;
}

.custom-carousel .seContentSectionLink a.btn:hover,
.custom-carousel .seContentSectionLink a.btn-primary:hover {
 background-color: #ffa400 !important;
 color: #00263a !important;
}

/* hide the price when "hide-price" is present */
.hide-price .seProductPrice {
 display: none !important;
}

/* page background image */
/* Apply background to a parent container that wraps all content */
body,
html {
 background-image: url('https://www.sefiles.net/merchant/3303/images/site/TexturedRidleysBlueBGLong.jpg');
 background-repeat: repeat;
 background-size: auto;
 background-position: center;
 background-attachment: scroll; /* KEY: This keeps the background stationary */
}

/* Unified Image Link Hover Styling */
.inline-hover-img,
.nav-grid-4 img,
.nav-grid-3 img {
 transition: transform 0.2s ease;
 display: block;
}
.inline-hover-img:hover,
.nav-grid-4 img:hover,
.nav-grid-3 img:hover {
 transform: scale(1.02);
}
/* 4-column Grid (scales to 2 on mobile) */
.nav-grid-4 {
 display: grid;
 grid-template-columns: repeat(4, 0.67fr);
 gap: 2%;
 padding: 1% 0;
}
.nav-grid-4 a {
 display: block;
 text-decoration: none;
}
.nav-grid-4 img {
 width: 100%;
 height: auto;
 display: block;
}
/* 3-column Grid (scales to 2 on mobile) */
.nav-grid-3 {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 2%;
 padding: 1% 0;
}
.nav-grid-3 a {
 display: block;
 text-decoration: none;
}
.nav-grid-3 img {
 width: 100%;
 height: auto;
 display: block;
}
/* Mobile: both grids switch to 2 columns */
@media (max-width: 768px) {
 .nav-grid-4,
 .nav-grid-3 {
 grid-template-columns: repeat(2, 1fr);
 }
}
/* ============ 2-column Grid ============ */
/* 2-column layout that centers items vertically */
.nav-grid-2 {
 display: flex;
 justify-content: center;
 align-items: center; /* THIS vertically centers the shorter image */
 gap: 2%;
 padding: 1% 0;
}

/* Images stay responsive */
.nav-grid-2 img {
 max-width: 100%;
 height: auto;
 display: block;
}

/* Mobile: stack into a single centered column */
@media (max-width: 768px) {
 .nav-grid-2 {
 flex-direction: column;
 }
}