/* ---------- SINCERELY BANNER: FINAL CSS ---------- */
/* Default (mobile first): show stacked mobile, hide desktop split */
.sinc-banner-desktop { display: none; }
.sinc-banner-mobile { display: block; }
/* Desktop/tablet (≥768px): show split banner, hide mobile */
@media (min-width: 768px) {
.sinc-banner-desktop {
display: block;
max-width: 1600px;
margin: 0 auto 24px;
position: relative;
}
.sinc-banner-mobile { display: none; }
}
/* Base styles */
.sinc-banner-desktop img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
pointer-events: none; /* make sure anchors get hover/click */
}
.sinc-banner-mobile img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
margin: 0 0 12px;
}
/* Clickable halves (desktop/tablet) */
@media (min-width: 768px) {
.sinc-banner-desktop .sinc-link {
position: absolute;
top: 0;
height: 100%;
width: 50%;
display: block;
z-index: 2;
border-radius: 8px;
overflow: hidden;
}
.sinc-banner-desktop .sinc-link.organics { left: 0; }
.sinc-banner-desktop .sinc-link.clean { right: 0; }
}
/* Robust hover cue using ::after (independent of theme) */
@media (hover: hover) and (pointer: fine) {
.sinc-banner-desktop .sinc-link::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0);
transition: background .2s ease;
}
.sinc-banner-desktop .sinc-link:hover::after {
background: rgba(0,0,0,0.10) !important; /* stronger + forced */
}
}
/* Safety: ensure category/product links are above any stray overlays */
.CategoryGrid a, .ProductGrid a, .ProductItem a { position: relative; z-index: 3; }
/* ---------- /END SINCERELY BANNER CSS ---------- */
