/* Accessibility focus and skip link */
.skip-link {
    position: absolute;
    top: -999px;
    right: 0;
    background: #1C1917;
    color: #ffffff;
    padding: 12px 20px;
    z-index: 100;
    font-weight: 700;
    border-radius: 0 0 0 12px;
    border: 2px solid #EAA81F;
}

.skip-link:focus {
    top: 0;
}

:focus-visible {
    outline: 3px solid #EAA81F !important;
    outline-offset: 2px !important;
}

/* Sticky Category Filter Bar */
.sticky-filter-wrapper {
    position: sticky;
    top: 80px;
    z-index: 30;
    background-color: rgba(248, 249, 250, 0.95);
    backdrop-filter: blur(8px);
    padding: 8px 0;
}

/* Visual Swipe Overflow Gradient for Mobile Filter */
@media (max-width: 768px) {
    .sticky-filter-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 24px;
        background: linear-gradient(to right, rgba(248, 249, 250, 1), transparent);
        pointer-events: none;
        z-index: 35;
    }
}

.category-scroll-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.category-scroll-bar::-webkit-scrollbar {
    display: none;
}

/* Active Category Tab */
.active-tab {
    background-color: #2F5A20 !important;
    color: #ffffff !important;
    border-color: #2F5A20 !important;
    box-shadow: 0 4px 14px rgba(47, 90, 32, 0.35);
}

/* Hero Background Vector Pattern */
.peppers-line-pattern {
    background-color: #4F8A38;
    background-image:
        radial-gradient(ellipse at center bottom, rgba(234, 168, 31, 0.35) 0%, transparent 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' opacity='0.16'%3E%3Cpath d='M25,18 C25,14 28,11 31,11 C32,11 33,12 33,13 C31,14 30,17 30,19 M22,19 C18,20 14,23 14,29 C14,37 18,46 22,48 C24,49 27,49 29,48 C32,46 36,37 36,29 C36,23 32,20 28,19 C26,19 24,19 22,19 Z M21,22 C21,29 23,45 25,47 M29,22 C29,29 27,45 25,47' transform='rotate(-15 25 30)'/%3E%3Cpath d='M70,63 C70,59 73,56 76,56 C77,56 78,57 78,58 C76,59 75,62 75,64 M67,64 C63,65 59,68 59,74 C59,82 63,91 67,93 C69,94 72,94 74,93 C77,91 81,82 81,74 C81,68 77,65 73,64 C71,64 69,64 67,64 Z M66,67 C66,74 68,90 70,92 M74,67 C74,74 72,90 70,92' transform='rotate(25 70 75)'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* 3D Tilted Card */
.hero-card-tilt {
    transform: perspective(1000px) rotate(-2deg) rotateY(3deg);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-card-tilt:hover {
    transform: perspective(1000px) rotate(0deg) scale(1.02) translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
}

/* Subtle Floating Animations */
.floating-badge {
    animation: float 4s ease-in-out infinite;
}

.floating-badge-delayed {
    animation: float 4s ease-in-out 2s infinite;
}

.pulse-subtle {
    animation: pulseSoft 2.5s infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-7px); }
}

@keyframes pulseSoft {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.03); }
}

/* Custom Swiper Controls */
.swiper-button-next-custom, .swiper-button-prev-custom {
    width: 48px;
    height: 48px;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    transition: all 0.2s;
}

.swiper-button-next-custom:hover, .swiper-button-prev-custom:hover {
    background: #2F5A20;
    color: #ffffff;
    border-color: #2F5A20;
}

/* Fix mobile footer background match when cookie banner is active */
@media (max-width: 768px) {
    body:has(#cookie-banner:not(.hidden)) {
        padding-bottom: 110px;
        background-color: #EAA81F; /* Matches the yellow footer background */
    }
}