/*
Theme Name: GlisterFoodUK
Theme URI: https://glisterfood.co.uk/
Author: Kishan
Author URI: https://glisterfood.co.uk/
Description: A modern, animated theme for glister food Peanut Butter brand. Features a hero slider, product grids, testimonial carousels, and WhatsApp integration.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: glisterfood-theme
*/

/* ---------------------------------------------------- */
/* BASE & CUSTOM STYLES                                 */
/* ---------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Montserrat', sans-serif;
    background: #FFF8F0;
    color: #2D1B0E;
}

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f0fdf4;
}
::-webkit-scrollbar-thumb {
    background: #16a34a;
    border-radius: 4px;
}

.glass-card{
    background:rgba(255,255,255,0.90);
    border:1px solid rgba(0,0,0,.06);
    backdrop-filter:blur(10px);
    transition:all .5s cubic-bezier(.23,1,.32,1)
}
.no-scroll {
    overflow: hidden;
}

/* Reveal Animations */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1), transform 0.8s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}
.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}
.reveal-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* Product Cards */
.product-card {
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1), box-shadow 0.5s ease;
}
.product-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 60px rgba(22,163,74,0.15);
}
.product-card .product-img {
    transition: transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.product-card:hover .product-img {
    transform: scale(1.08) rotate(-2deg);
}
.product-card .add-btn {
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s ease;
}
.product-card:hover .add-btn {
    transform: translateY(0);
    opacity: 1;
}

/* Marquees */
.marquee-wrapper {
    width: 100%;
    overflow: hidden;
}

.marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: marquee 25s linear infinite;
    will-change: transform;
}

.marquee-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    font-weight: 500;
}

.marquee-separator {
    flex-shrink: 0;
    margin: 0 2rem;
    color: rgb(251 191 36);
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
    }
}


/* FAQ */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1), padding 0.5s ease;
}
.faq-item.open .faq-answer {
    max-height: 300px;
}
.faq-item .faq-icon {
    transition: transform 0.4s ease;
}
.faq-item.open .faq-icon {
    transform: rotate(45deg);
}

/* WhatsApp & Nav */
@keyframes bounceWhatsApp {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-8px) scale(1.05);
    }
}
.whatsapp-float {
    animation: bounceWhatsApp 2s ease-in-out infinite;
}
.nav-scrolled {
    background: rgba(255,255,255,0.95) !important;
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px rgba(0,0,0,0.08);
}
.gradient-text {
    background: linear-gradient(135deg, #15803d, #22c55e, #86efac);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Certificates */
.cert-logo {
    filter: grayscale(100%) opacity(0.5);
    transition: all 0.4s ease;
}
.cert-logo:hover {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.1);
}

/* Dot Nav */
.dot-nav button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    transition: all 0.4s ease;
    border: 2px solid transparent;
}
.dot-nav button.active {
    background: #22c55e;
    width: 36px;
    border-radius: 6px;
    border-color: rgba(255,255,255,0.8);
}

/* Blob */
.blob {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation: morphBlob 8s ease-in-out infinite;
}
@keyframes morphBlob {
    0%, 100% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
    25% {
        border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
    }
    50% {
        border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
    }
    75% {
        border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
    }
}
@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(3deg);
    }
}
.float {
    animation: float 6s ease-in-out infinite;
}
.float-delay {
    animation: float 6s ease-in-out 2s infinite;
}
.float-delay-2 {
    animation: float 6s ease-in-out 4s infinite;
}
@keyframes spinSlow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.spin-slow {
    animation: spinSlow 20s linear infinite;
}
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(34,197,94,0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(34,197,94,0.6);
    }
}
.pulse-glow {
    animation: pulseGlow 3s ease-in-out infinite;
}

.footer-stroke {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    /*animation: drawText 5s ease forwards;*/
    fill: #fff;
}

@keyframes drawText {
    to {
        stroke-dashoffset: 0;
    }
}

.footer-vertical-text{
    font-size: 90px;
    line-height: 0.8;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,.2);
    opacity: .08;
    text-align: center;
    user-select: none;
}

@keyframes testimonials-scroll {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }
}

.testimonials-scroll {
    animation: testimonials-scroll 15s linear infinite;
}

.testimonials-scroll-slow {
    animation: testimonials-scroll 19s linear infinite;
}

.testimonials-scroll-medium {
    animation: testimonials-scroll 17s linear infinite;
}


#products .ic-wrap {
    --ic-gap: 6px;
    --ic-speed: 900ms;
    --ic-expand: 2.4;
    --ic-height: clamp(420px, 42vw, 620px);
    --ic-overlay: 0.45;
    box-sizing: border-box;
}

#products .ic-row {
    display: flex;
    gap: var(--ic-gap);
    height: var(--ic-height);
}

#products .ic-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: #fff;
    transition: flex-grow var(--ic-speed) cubic-bezier(0.19, 1, 0.22, 1);
    border-radius: 8px; /* Optional: matches rounded aesthetic */
}

#products .ic-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: -150px; /* Changed to center for WP images */
}

/* Dim veil for non-active cards */
#products .ic-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    z-index: 1;
    transition: opacity var(--ic-speed) ease;
    pointer-events: none;
}
/* Bottom gradient so text stays legible */
#products .ic-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 55%);
    z-index: 2;
    pointer-events: none;
}

#products .ic-content {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    padding: 32px 24px;
    max-width: 92%;
    transition: opacity var(--ic-speed) ease;
}
#products .ic-title {
    margin: 0;
    font-family: "Baskerville", Georgia, serif;
    font-weight: 400;
    font-size: clamp(20px, 1.7vw, 30px);
    line-height: 1.2;
}
/* Description panel */
#products .ic-hover-desc {
    position: absolute;
    top: 40%;
    right: 0px;
    transform: translateY(-40%);
    width: 450px;
    padding: 15px;
    border-radius: 20px 0 0 20px;
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0,0,0,0.25);
    border-right: unset;
    color: #000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    height: 95%;
    overflow-y: scroll;
}
#products .ic-hover-desc table{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: none;
}
#products .ic-sub {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.45;
    max-width: 55ch;
    opacity: 0;
    max-height: 0;
    transform: translateY(10px);
    overflow: hidden;
    transition: opacity var(--ic-speed) ease,
        transform var(--ic-speed) cubic-bezier(0.19, 1, 0.22, 1),
        max-height var(--ic-speed) ease;
}
#products .ic-link {
    display: inline-block;
    margin-top: 18px;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: #fff;
}

.ic-hover-desc .wp-block-table {
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,0.1);
}

.ic-hover-desc .wp-block-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 16px;
    overflow: hidden;
}

.ic-hover-desc .wp-block-table {
    border-radius: 16px;
    overflow: hidden;

    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255,255,255,0.2);
}

.ic-hover-desc table tr:first-child th:first-child,
.ic-hover-desc table tr:first-child td:first-child {
    border-top-left-radius: 16px;
}

.ic-hover-desc table tr:first-child th:last-child,
.ic-hover-desc table tr:first-child td:last-child {
    border-top-right-radius: 16px;
}

.ic-hover-desc table tr:last-child td:first-child {
    border-bottom-left-radius: 16px;
}

.ic-hover-desc table tr:last-child td:last-child {
    border-bottom-right-radius: 16px;
}

/* Hover behaviour */
@media (hover: hover) and (min-width: 750px) {
    #products .ic-card:hover {
        flex-grow: var(--ic-expand);
    }
    #products .ic-row:hover .ic-card::before {
        opacity: var(--ic-overlay);
    }
    #products .ic-row:hover .ic-card .ic-content {
        opacity: 0.65;
    }
    #products .ic-row:hover .ic-card:hover::before {
        opacity: 0;
    }
    #products .ic-row:hover .ic-card:hover .ic-content {
        opacity: 1;
    }
    #products .ic-card:hover .ic-sub {
        opacity: 1;
        max-height: 16em;
        transform: translateY(0);
    }
    #products .ic-card:hover .ic-hover-desc {
        opacity: 1;
        visibility: visible;
    }

}

.breadcrumb {
    font-size: 14px;
    margin-bottom: 20px;
}

.breadcrumb a {
    color: #0073aa;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}




/* landing page products*/

.details-item{
    height: fit-content;
    opacity:0;
    visibility:hidden;
    transition:all .5s ease;
}

.details-item.active{
    opacity:1;
    visibility:visible;
}


.feature-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin:25px 0;
}

.feature{
    display:flex;
    align-items:center;
    gap:5px;
    padding:15px 15px;
    background:#f7f7f7;
    border-radius:14px;
}

.feature i{
    font-size:22px;
}

.feature span{
    margin:0;
    font-weight:600;
}

/* Images */
.image-item{
    position:absolute;
    top:50%;
    width:50%;
    height:70%;
    display:flex;
    justify-content:center;
    align-items:center;
    left:-15%;
    opacity:0;
    pointer-events:none;
    transform:translateY(-50%) scale(.25);
    transition:all .6s cubic-bezier(.25,1,.5,1);
}

.image-item img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

/* Desktop */
.is-center{
    left:165px;
    transform:translateY(-50%) scale(1);
    opacity:1;
    z-index:5;
    pointer-events:auto;
}

.is-right{
    left:395px;
    transform:translateY(-50%) scale(.25);
    opacity:.6;
}

.is-left{
    left:-60px;
    transform:translateY(-50%) scale(.25);
    opacity:.6;
    z-index:2;
}

.is-off-right{
    left:-55%;
    opacity:0;
}

.is-off-left{
    left:-55%;
    opacity:0;
}

.peanut-smear {
    position: relative;
}

.peanut-smear::before {
    content: "";
    position: absolute;
    left: -65px;
    top: 60%;
    transform: translateY(-50%) rotate(5deg);
    width: 150px;
    height: 150px; /* Set an appropriate height */
    background-image: url("assets/images/peanut-butter.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: -1;
    opacity: 0.95;
    pointer-events: none;
}

.peanutButterSpoonBefore::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    width: 330px;
    height: 250px;
    background-image: url(assets/images/peanut-butter-spoon.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 0;
    opacity: 1;
    pointer-events: none;
}

.peanutButterSpoonAfter::after {
    content: "";
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    width: 330px;
    height: 250px;
    background-image: url(assets/images/peanut-butter-spoon.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 0;
    opacity: 1;
    pointer-events: none;
}

.peanutSeamless::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("assets/images/peanut-seamless.png");
     background-size: 300px 300px;
    background-repeat: repeat;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

.peanutGrpImg::after {
    content: "";
    position: absolute;
    right: 0px;
    top: 200px;
    transform: translateY(-50%) rotate(0deg);
    width: 330px;
    height: 250px;
    background-image: url(assets/images/peanutGrp.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 0;
    opacity: 1;
    pointer-events: none;
}

.peanutGrpBlackImg::before {
    content: "";
    position: absolute;
    left: 0px;
    bottom:0px;
    transform: translateY(-50%);
    width: 330px;
    height: 250px;
    background-image: url(assets/images/peanutGrp-Black.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 0;
    opacity: 1;
    pointer-events: none;
}

.peanutBudyImg::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -198px;
    transform: translateY(-50%);
    width: 190px;
    height: 280px;
    background-image: url(assets/images/peanut-budy.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 0;
    opacity: 1;
    pointer-events: none;

    animation: peanutMove 8s linear infinite;
}

@keyframes peanutMove {
    0% {left: -100px;}
    10%{bottom: -185px; }
    20%{bottom: -198px; }
    40%{bottom: -198px; }
    50%{bottom: -185px; }
    60%{bottom: -198px; }
    80%{bottom: -198px; }
    90%{bottom: -185px; }
    100% {bottom: -198px;left:100%;}
}


/* Tablet */
@media (max-width:1024px){

    .image-item{
        width:70%;
        height:70%;
    }

    .is-center{
        left:15%;
    }
    .is-right{
        left:50%;
        transform:translateY(-50%) scale(.25);
        opacity:.6;
    }

    .is-left{
        left:-21%;
        transform:translateY(-50%) scale(.25);
        opacity:.6;
        z-index:2;
    }
    .peanutBudyImg::before {height: 200px;bottom: -141px;animation: peanutMoveTab 8s linear infinite;}
    @keyframes peanutMoveTab {
        0% {left: -100px;}
        10%{bottom: -130px; }
        20%{bottom: -141px; }
        40%{bottom: -141px; }
        50%{bottom: -130px; }
        60%{bottom: -141px; }
        80%{bottom: -141px; }
        90%{bottom: -130px; }
        100% {bottom: -141px;left:100%;}
    }

}

/* Mobile */
@media (max-width:769px){

    .image-item{
        width:80%;
        height:75%;
    }

    .is-center{
        left:10%;
        transform:translateY(-50%) scale(.9);
    }
    
    .is-right{
        right:0;
        transform:translateY(-50%) scale(.25);
        opacity:.6;
    }

    .is-left{
        left:0%;
        transform:translateY(-50%) scale(.25);
        opacity:.6;
        z-index:2;
    }
    .peanutBudyImg::before {height: 180px;bottom: -127px;animation: peanutMoveTab2 8s linear infinite;}
    @keyframes peanutMoveTab2 {
        0% {left: -100px;}
        10%{bottom: -120px; }
        20%{bottom: -127px; }
        40%{bottom: -127px; }
        50%{bottom: -120px; }
        60%{bottom: -127px; }
        80%{bottom: -127px; }
        90%{bottom: -120px; }
        100% {bottom: -127px;left:100%;}
    }

}

/* Mobile adjustments */
@media (max-width: 749px) {
    #products .ic-hover-desc{
        opacity: 1;
        visibility: visible;
        width: calc(100% - 250px);
    }
    #products .ic-row {
        flex-direction: column;
        height: auto;
        gap: 16px;
    }
    #products .ic-card {
        flex: 0 0 auto;
        height: 450px;
    }
    #products .ic-sub {
        display: block;
        opacity: 1;
        max-height: none;
        transform: none;
    }
}
/* Mobile adjustments */
@media (max-width: 560px) {
    #products .ic-hover-desc{
        opacity: 0;
        visibility: hidden;
    }
    
    .feature-list{
        grid-template-columns:none;
        gap:10px;
        margin:10px 0;
    }

    .feature{
        gap:10px;
        padding:10px 10px;
    }
    .peanutBudyImg::before {height: 150px;bottom: -105px;animation: peanutMoveMob 8s linear infinite;}
    @keyframes peanutMoveMob {
        0% {left: -100px;}
        10%{bottom: -99px; }
        20%{bottom: -105px; }
        40%{bottom: -105px; }
        50%{bottom: -99px; }
        60%{bottom: -105px; }
        80%{bottom: -105px; }
        90%{bottom: -99px; }
        100% {bottom: -105px;left:100%;}
    }
}