/* Page loader — visible until all images finish loading */
.page-loader { position:fixed; inset:0; z-index:9999; background:#F7F7F2; display:flex; align-items:center; justify-content:center; transition:opacity 0.5s ease, visibility 0.5s ease; }
.page-loader.loaded { opacity:0; visibility:hidden; pointer-events:none; }
.page-loader img { width:100px; height:100px; object-fit:contain; animation:loaderPulse 1.2s ease-in-out infinite; }
@keyframes loaderPulse { 0%,100%{ transform:scale(1); opacity:0.8; } 50%{ transform:scale(1.1); opacity:1; } }

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family:'Inter',sans-serif; background:#F7F7F2; overflow-x:hidden; }

::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:#F7F7F2; }
::-webkit-scrollbar-thumb { background:#C2D136; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:#A8B52E; }

/* Nav */
.nav-glass { background:rgba(247,247,242,0.85); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid rgba(194,209,54,0.15); transition:box-shadow 0.3s; }
.nav-link { position:relative; color:#5B5B50; font-weight:500; font-size:0.875rem; letter-spacing:0.05em; text-transform:uppercase; padding:0.5rem 0; cursor:pointer; transition:color 0.3s; text-decoration:none; }
.nav-link::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:#C2D136; transition:width 0.3s ease; }
.nav-link:hover { color:#C2D136; }
.nav-link:hover::after,.nav-link.active::after { width:100%; }
.nav-link.active { color:#C2D136; }

/* Logo-left nav layout */
.nav-center { display:flex; align-items:center; justify-content:space-between; position:relative; }
.nav-left, .nav-right { display:flex; align-items:center; gap:2rem; }
.nav-logo-wrap { position:relative; z-index:10; flex-shrink:0; align-self:flex-start; }
.nav-logo-wrap a { display:block; }
.nav-center-logo { width:180px; height:180px; object-fit:contain; filter:drop-shadow(0 8px 28px rgba(0,0,0,0.18)); transition:transform 0.4s cubic-bezier(0.23,1,0.32,1); margin-top:-8px; margin-bottom:-80px; }
.nav-center-logo:hover { transform:scale(1.05); }
@media(min-width:1024px) {
    .nav-glass { padding-top:0; padding-bottom:0; }
    .nav-center { padding-top:0.4rem; padding-bottom:0.4rem; }
}

/* Dropdown nav */
.nav-dropdown-wrap { position:relative; }
.nav-dropdown { position:absolute; top:calc(100% + 0.5rem); left:50%; transform:translateX(-50%) translateY(6px); min-width:220px; background:rgba(247,247,242,0.92); backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%); border:1px solid rgba(194,209,54,0.15); border-radius:1rem; box-shadow:0 15px 40px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04); padding:0.5rem; opacity:0; visibility:hidden; transition:opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; z-index:60; pointer-events:none; }
.nav-dropdown::before { content:''; position:absolute; top:-0.75rem; left:0; right:0; height:0.75rem; }
.nav-dropdown-wrap:hover .nav-dropdown,
.nav-dropdown-wrap:focus-within .nav-dropdown { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:all; }
.nav-dropdown a { display:block; padding:0.55rem 1.1rem; color:#5B5B50; font-size:0.8rem; font-weight:500; text-decoration:none; transition:color 0.2s, background 0.2s; letter-spacing:0.03em; border-radius:0.6rem; }
.nav-dropdown a:hover { color:#C2D136; background:rgba(194,209,54,0.1); }

/* Language toggle */
.lang-toggle { display:flex; align-items:center; gap:0.3rem; background:#EEEEE6; border-radius:100px; padding:0.4rem 0.8rem; border:none; font-family:'Inter',sans-serif; font-size:0.75rem; font-weight:600; }
.lang-option { color:#8A8A7E; transition:color 0.2s; cursor:pointer; }
.lang-option.active { color:#3D3D35; }
.lang-divider { color:#C2D136; }

/* Buttons */
.btn-primary { background:linear-gradient(135deg,#C2D136,#A8B52E); color:#3D3D35; font-weight:700; padding:1rem 2.5rem; border-radius:100px; border:none; cursor:pointer; font-family:'Inter',sans-serif; font-size:0.9rem; letter-spacing:0.05em; text-transform:uppercase; position:relative; overflow:hidden; transition:transform 0.3s,box-shadow 0.3s; text-decoration:none; display:inline-block; text-align:center; z-index:1; }
.btn-primary::before { content:''; position:absolute; bottom:0; left:0; width:100%; height:0; background:linear-gradient(135deg,#D4E156,#C2D136); border-radius:100px; transition:height 0.35s ease; z-index:-1; }
.btn-primary:hover::before { height:100%; }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 35px rgba(194,209,54,0.4); }
.btn-outline { background:transparent; color:#C2D136; font-weight:600; padding:1rem 2.5rem; border-radius:100px; border:2px solid #C2D136; cursor:pointer; font-family:'Inter',sans-serif; font-size:0.9rem; letter-spacing:0.05em; text-transform:uppercase; transition:all 0.3s; text-decoration:none; display:inline-block; }
.btn-outline:hover { background:#C2D136; color:#3D3D35; transform:translateY(-3px); box-shadow:0 10px 30px rgba(194,209,54,0.3); }

/* Hero Slider */
.hero-slider { position:relative; min-height:60vh; overflow:hidden; touch-action:pan-y; }
.slides-track { display:flex; transition:transform 0.6s ease; }
.slide { min-width:100%; min-height:60vh; display:flex; align-items:center; position:relative; padding:6rem 0 4rem; }
.slide-content { position:relative; z-index:2; max-width:80rem; margin:0 auto; padding:0 3rem; display:flex; align-items:center; width:100%; gap:2rem; min-height:calc(60vh - 10rem); }
.slide-text { flex:1; min-width:0; }
.slide-products { flex:1; min-width:0; position:relative; }
.slide-products img { position:absolute; object-fit:contain; transition:transform 0.5s ease; }

/* ============================================================
   Slide 1 & 2: BAGS layout (vertical products)
   Sticks fanned behind, two bags overlapping in center-front
   ============================================================ */
.slide-bg-1 .slide-products .prod-bg-left,
.slide-bg-2 .slide-products .prod-bg-left {
    height:42vh; top:50%; left:0; z-index:1; opacity:0.85;
    filter:drop-shadow(0 8px 20px rgba(0,0,0,0.15));
    transform:translateY(-55%) rotate(-14deg);
}
.slide-bg-1 .slide-products .prod-bg-right,
.slide-bg-2 .slide-products .prod-bg-right {
    height:42vh; top:50%; right:0; z-index:1; opacity:0.85;
    filter:drop-shadow(0 8px 20px rgba(0,0,0,0.15));
    transform:translateY(-55%) rotate(12deg);
}
.slide-bg-1 .slide-products .prod-mid,
.slide-bg-2 .slide-products .prod-mid {
    height:68vh; top:50%; left:50%; z-index:2;
    transform:translate(-78%,-50%) rotate(-4deg);
    filter:drop-shadow(0 15px 35px rgba(0,0,0,0.22));
}
.slide-bg-1 .slide-products .prod-front,
.slide-bg-2 .slide-products .prod-front {
    height:72vh; top:50%; left:50%; z-index:3;
    transform:translate(-22%,-50%) rotate(3deg);
    filter:drop-shadow(0 20px 50px rgba(0,0,0,0.3));
}

/* ============================================================
   Slide 3: ENERGY layout — single composite image
   ============================================================ */
.slide-bg-3 .slide-products--single {
    display:flex; align-items:center; justify-content:center;
}
.slide-bg-3 .slide-products--single img {
    position:relative; width:100%; max-width:100%; height:auto; max-height:60vh; object-fit:contain;
    filter:drop-shadow(0 20px 50px rgba(0,0,0,0.35));
}

/* ============================================================
   Slide 4: PREMIUM STICKS — horizontal row, evenly spaced
   ============================================================ */
.slide-bg-4 .slide-products {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.5rem;
}
.slide-bg-4 .slide-products img {
    position:static; width:100%; height:auto; object-fit:contain;
}

/* Slide backgrounds */
.slide-bg-1 { background:linear-gradient(135deg,#f8e8ea 0%,#fce4ec 50%,#f3e5f5 100%); }
.slide-bg-2 { background:linear-gradient(135deg,#e8f5e9 0%,#f1f8e9 50%,#fffde7 100%); }
.slide-bg-3 { background:linear-gradient(135deg,#3D3D35 0%,#5B5B50 50%,#4A4A42 100%); }
.slide-bg-3 .slide-text h2,
.slide-bg-3 .slide-text p { color:white; }
.slide-bg-3 .slide-text p { opacity:0.8; }
.slide-bg-4 { background:linear-gradient(135deg,#2C2420 0%,#3A302A 50%,#2E2622 100%); }
.slide-bg-4 .slide-text h2,
.slide-bg-4 .slide-text p { color:#F5F0E8; }
.slide-bg-4 .slide-text p { opacity:0.8; }
.slide-bg-4 .slide-text span { background:rgba(194,209,54,0.15) !important; color:#C2D136 !important; }

/* Slider controls */
.slider-arrow { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:white; border:2px solid #EEEEE6; color:#5B5B50; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10; transition:all 0.3s; box-shadow:0 4px 15px rgba(0,0,0,0.08); }
.slider-arrow:hover { background:#C2D136; border-color:#C2D136; color:#3D3D35; box-shadow:0 8px 25px rgba(194,209,54,0.3); }
.slider-arrow--prev { left:1.5rem; }
.slider-arrow--next { right:1.5rem; }
.slider-dots { display:flex; justify-content:center; gap:8px; position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:10; }
.slider-dot { width:10px; height:10px; border-radius:50%; background:rgba(0,0,0,0.2); border:none; cursor:pointer; transition:all 0.3s; padding:0; }
.slider-dot.active { background:#C2D136; transform:scale(1.3); }

/* USP Strip */
.usp-strip { display:grid; grid-template-columns:repeat(2, 1fr); gap:0.75rem 1rem; padding:1rem 0.5rem; }
.usp-strip .usp-item:nth-child(5):last-child { grid-column:span 2; }
@media(min-width:640px) { .usp-strip { grid-template-columns:repeat(3, 1fr); gap:1rem 1.25rem; padding:1rem; } .usp-strip .usp-item:nth-child(5):last-child { grid-column:auto; } }
@media(min-width:1024px) { .usp-strip { grid-template-columns:repeat(5, 1fr); gap:1.5rem; } }
.usp-item { display:flex; align-items:center; justify-content:center; gap:0.5rem; font-size:0.875rem; font-weight:500; color:#5B5B50; }
.usp-item svg { color:#C2D136; flex-shrink:0; }

/* Sections & fade-in */
.page-section { position:relative; overflow:hidden; }
.text-gradient { background:linear-gradient(135deg,#C2D136,#A8B52E); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.fade-in { opacity:0; transform:translateY(40px); transition:opacity 0.8s cubic-bezier(0.23,1,0.32,1), transform 0.8s cubic-bezier(0.23,1,0.32,1); }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* Category rows (homepage — Nordthy-inspired) */
.category-rows { display:flex; flex-direction:column; gap:1.5rem; }
.category-row { display:flex; align-items:center; border-radius:1.5rem; overflow:hidden; text-decoration:none; transition:transform 0.4s cubic-bezier(0.23,1,0.32,1), box-shadow 0.4s; min-height:260px; }
.category-row:hover { transform:translateY(-6px); box-shadow:0 25px 60px rgba(91,91,80,0.15); }
.category-row-images { flex:1.2; display:flex; align-items:center; justify-content:center; gap:0.5rem; padding:2rem 1.5rem; min-height:240px; }
.category-row-images img { height:160px; width:auto; max-width:25%; object-fit:contain; transition:transform 0.4s ease; filter:drop-shadow(0 4px 12px rgba(0,0,0,0.15)); }
.category-row:hover .category-row-images img { transform:scale(1.05); }
.category-row-text { flex:1; padding:2.5rem 3rem 2.5rem 2rem; }
.category-row--reverse { flex-direction:row-reverse; }
.category-row--reverse .category-row-text { padding:2.5rem 2rem 2.5rem 3rem; }
.category-row-images--grid { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.category-row-images--grid img { height:auto; width:100%; max-width:none; }

/* Product cards (products page) */
.product-card { background:white; border-radius:1.75rem; padding:2rem 2rem 1.5rem; text-align:center; cursor:pointer; border:2px solid transparent; transition:transform 0.45s cubic-bezier(0.23,1,0.32,1), box-shadow 0.45s cubic-bezier(0.23,1,0.32,1), border-color 0.3s ease; position:relative; overflow:hidden; }
.product-card:hover { transform:translateY(-10px) scale(1.02); box-shadow:0 30px 60px rgba(91,91,80,0.12), 0 10px 20px rgba(91,91,80,0.08); border-color:rgba(194,209,54,0.5); }
.product-card img { width:100%; height:auto; max-height:420px; object-fit:contain; margin-bottom:0.75rem; transition:transform 0.5s cubic-bezier(0.23,1,0.32,1); cursor:zoom-in; filter:drop-shadow(0 8px 24px rgba(0,0,0,0.08)); position:relative; z-index:1; }
.product-card:hover img { transform:scale(1.08); }
.product-card-label { display:block; font-size:0.95rem; font-weight:600; color:#3D3D35; margin-top:0.5rem; letter-spacing:0.02em; position:relative; z-index:1; }
.product-card::after { content:''; position:absolute; top:50%; left:50%; width:120%; height:120%; background:radial-gradient(circle, rgba(194,209,54,0.08) 0%, transparent 70%); transform:translate(-50%,-50%) scale(0); transition:transform 0.5s cubic-bezier(0.23,1,0.32,1); pointer-events:none; z-index:0; }
.product-card:hover::after { transform:translate(-50%,-50%) scale(1); }

/* Category badge */
.cat-badge { display:inline-block; color:white; font-weight:700; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; padding:0.4rem 1rem; border-radius:100px; }

/* Stick product grids — horizontal stick images need maximum width */
.stick-grid { grid-template-columns:1fr !important; }
@media(min-width:768px) { .stick-grid { grid-template-columns:repeat(2, 1fr) !important; } }
.stick-grid .product-card { padding:2rem 1.5rem 1.5rem; }
.stick-grid .product-card img { width:120%; max-width:120%; height:auto; max-height:none; margin-left:-10%; transform-origin:center; }

/* Category pills (products page sticky nav) */
.category-pills { display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem; }
.category-pill { padding:0.5rem 1.25rem; border-radius:100px; border:2px solid #EEEEE6; background:white; color:#5B5B50; font-size:0.8rem; font-weight:600; cursor:pointer; transition:all 0.3s; text-decoration:none; }
.category-pill:hover, .category-pill.active { background:#C2D136; border-color:#C2D136; color:#3D3D35; }

/* Partner logos */
.partner-logo-wrap { display:flex; align-items:center; justify-content:center; padding:1rem; }
.partner-logo { height:64px; width:auto; max-width:180px; object-fit:contain; opacity:0.35; filter:grayscale(100%); transition:all 0.4s ease; }
.partner-logo:hover { opacity:1; filter:grayscale(0%); transform:scale(1.12); }

/* Timeline */
.timeline-line { position:absolute; left:50%; top:0; bottom:0; width:2px; background:linear-gradient(to bottom,transparent,#C2D136 10%,#C2D136 90%,transparent); transform:translateX(-50%); }
.timeline-dot { width:16px; height:16px; border-radius:50%; background:#C2D136; border:3px solid #F7F7F2; box-shadow:0 0 0 3px #C2D136; position:absolute; left:50%; transform:translateX(-50%); z-index:2; }

/* Counter cards */
.counter-card { background:white; border-radius:1.5rem; padding:2rem; text-align:center; position:relative; overflow:hidden; cursor:pointer; transition:transform 0.4s cubic-bezier(0.23,1,0.32,1),box-shadow 0.4s; }
.counter-card:hover { transform:translateY(-8px) rotate(-1deg); box-shadow:0 25px 60px rgba(91,91,80,0.12); }
.counter-value { font-family:'Playfair Display',serif; font-weight:700; color:#C2D136; }
.counter-label { color:#8A8A7E; font-size:0.75rem; font-weight:600; margin-top:0.5rem; letter-spacing:0.1em; text-transform:uppercase; }
.counter-bg { position:absolute; bottom:-20px; right:-20px; width:80px; height:80px; background:#C2D136; border-radius:50%; opacity:0; transition:opacity 0.4s,transform 0.4s; transform:scale(0.5); }
.counter-card:hover .counter-bg { opacity:0.08; transform:scale(1.5); }

/* Value cards */
.value-card { background:white; border-radius:1.5rem; padding:2.5rem; position:relative; overflow:hidden; transition:transform 0.4s cubic-bezier(0.23,1,0.32,1),box-shadow 0.4s; cursor:pointer; }
.value-card:hover { transform:translateY(-8px); box-shadow:0 25px 60px rgba(91,91,80,0.12); }
.value-card-accent { position:absolute; top:0; left:0; right:0; height:4px; transition:height 0.3s; }
.value-card:hover .value-card-accent { height:6px; }
.value-icon { width:3.5rem; height:3.5rem; background:#F7F7F2; border-radius:1rem; display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; color:#C2D136; transition:background 0.3s,transform 0.3s; }
.value-card:hover .value-icon { background:#C2D136; color:#3D3D35; transform:rotate(-5deg) scale(1.1); }

/* Lightbox */
#productLightbox.active { opacity:1; pointer-events:all; }

/* Contact */
.contact-card { background:white; border-radius:1.25rem; padding:1.5rem; box-shadow:0 2px 12px rgba(0,0,0,0.04); transition:transform 0.3s; }
.contact-card:hover { transform:translateY(-4px); }
.form-label { display:block; color:#5B5B50; font-size:0.875rem; font-weight:500; margin-bottom:0.5rem; }
.form-input { background:white; border:2px solid #EEEEE6; border-radius:1rem; padding:0.875rem 1.25rem; font-family:'Inter',sans-serif; font-size:1rem; color:#2E2E28; transition:border-color 0.3s,box-shadow 0.3s; width:100%; outline:none; }
.form-input:focus { border-color:#C2D136; box-shadow:0 0 0 4px rgba(194,209,54,0.15); }

/* Mobile menu */
.mobile-menu { position:fixed; inset:0; background:rgba(61,61,53,0.98); z-index:90; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.4s; overflow-y:auto; }
.mobile-menu.open { opacity:1; pointer-events:all; }
.mobile-menu a, .mobile-menu-item { display:block; color:#F7F7F2; font-family:'Playfair Display',serif; font-size:2rem; font-weight:600; padding:0.75rem 0; text-align:center; transition:color 0.3s; cursor:pointer; text-decoration:none; }
.mobile-menu a:hover { color:#C2D136; }
.mobile-sub-toggle { cursor:pointer; }
.mobile-submenu { max-height:0; overflow:hidden; transition:max-height 0.3s ease; }
.mobile-submenu.open { max-height:300px; }
.mobile-submenu a { font-size:1.2rem; font-family:'Inter',sans-serif; font-weight:400; color:#F7F7F2; opacity:0.7; padding:0.4rem 0; }
.mobile-submenu a:hover { opacity:1; color:#C2D136; }

/* Hamburger */
.hamburger { cursor:pointer; width:28px; height:20px; position:relative; z-index:100; background:none; border:none; padding:0; display:block; }
.hamburger span { display:block; width:100%; height:2px; background:#5B5B50; position:absolute; transition:all 0.3s; }
.hamburger span:nth-child(1){top:0;} .hamburger span:nth-child(2){top:9px;} .hamburger span:nth-child(3){top:18px;}
.hamburger.open span { background:#F7F7F2; }
.hamburger.open span:nth-child(1){top:9px;transform:rotate(45deg);} .hamburger.open span:nth-child(2){opacity:0;} .hamburger.open span:nth-child(3){top:9px;transform:rotate(-45deg);}

/* Process steps (private label) */
.process-step { text-align:center; position:relative; }
.process-step-number { width:3.5rem; height:3.5rem; background:linear-gradient(135deg,#C2D136,#A8B52E); color:#3D3D35; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.25rem; margin:0 auto 1rem; }

/* ===== KIDS UNIVERSE (products page — Fruit Snacks for Kids) ===== */
.kids-section { background:linear-gradient(180deg, #FFF0F3 0%, #FFFBEB 30%, #F0FFF4 60%, #FFF5F5 100%); position:relative; }

/* Bigger product cards inside kids section */
.kids-section .product-card { background:linear-gradient(135deg, #FFF0F3, #FFF8E1); border-radius:1.5rem; border:2px solid rgba(255,180,200,0.3); }
.kids-section .product-card:hover { transform:translateY(-8px) scale(1.02); box-shadow:0 20px 48px rgba(200,100,130,0.15); border-color:rgba(255,140,170,0.5); }
.kids-section .product-card img { max-height:480px; }
.kids-section .product-card:hover img { transform:scale(1.10); }

/* Kids flavor tints — subtle background per flavor */
.kids-section .flavor-strawberry { background:linear-gradient(135deg, #FFF0F0, #FFE8E8); border-color:rgba(230,50,50,0.2); }
.kids-section .flavor-blueberry { background:linear-gradient(135deg, #F0F0FF, #E8E8FF); border-color:rgba(80,80,220,0.2); }
.kids-section .flavor-banana { background:linear-gradient(135deg, #FFFFF0, #FFF8D0); border-color:rgba(220,200,50,0.2); }
.kids-section .flavor-raspberry { background:linear-gradient(135deg, #FFF0F2, #FFE8EE); border-color:rgba(220,60,90,0.2); }
.kids-section .flavor-apple { background:linear-gradient(135deg, #F0FFF0, #E8FFE8); border-color:rgba(60,180,60,0.2); }
.kids-section .flavor-mix { background:linear-gradient(135deg, #FFF5F0, #F0F5FF); border-color:rgba(180,120,200,0.2); }
.kids-section .flavor-christmas { background:linear-gradient(135deg, #FFF0F0, #F0FFF0); border-color:rgba(180,40,40,0.15); }
.kids-section .flavor-easter { background:linear-gradient(135deg, #FFFFF0, #F5F0FF); border-color:rgba(180,150,220,0.15); }
.kids-section .flavor-summer { background:linear-gradient(135deg, #FFFFF0, #F0FFFE); border-color:rgba(220,180,50,0.15); }
.kids-section .flavor-halloween { background:linear-gradient(135deg, #FFF5EE, #F5F0FF); border-color:rgba(220,130,30,0.15); }

/* Subsection mascot header (flex: h4 + character image) */
.subsection-mascot { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.subsection-mascot h4 { margin-bottom:0; }
.subsection-mascot img { height:80px; width:auto; object-fit:contain; }

/* Edge characters — placed absolutely, peeking in from sides */
.kids-edge-char { position:absolute; pointer-events:auto; z-index:1; cursor:pointer; transition:transform 1.8s cubic-bezier(0.25,0.1,0.25,1); }
.kids-edge-char img { height:auto; }

/* Flee state — slides the whole container off screen (animation stays on img) */
.kids-edge-char--1.fled, .kids-edge-char--3.fled { transform:translateX(-250px); }
.kids-edge-char--2.fled, .kids-edge-char--4.fled { transform:translateX(250px); }

/* Individual edge character positions & sizes */
.kids-edge-char--1 { top:5%; left:0; }
.kids-edge-char--1 img { width:180px; transform:rotate(12deg) translateX(-40%); animation:kidsBobbleLeft 4s ease-in-out infinite; }

.kids-edge-char--2 { top:25%; right:0; }
.kids-edge-char--2 img { width:170px; transform:rotate(-18deg) translateX(30%); animation:kidsBobbleRight 4.5s ease-in-out 0.5s infinite; }

.kids-edge-char--3 { top:50%; left:0; }
.kids-edge-char--3 img { width:150px; transform:rotate(8deg) translateX(-45%); animation:kidsBobbleLeft 3.5s ease-in-out 1s infinite; }

.kids-edge-char--4 { top:75%; right:0; }
.kids-edge-char--4 img { width:170px; transform:rotate(-14deg) translateX(40%); animation:kidsBobbleRight 4.2s ease-in-out 0.3s infinite; }

/* Bobble animation */
@keyframes kidsBobble {
    0%, 100% { transform:translateY(0); }
    50% { transform:translateY(-12px); }
}
@keyframes kidsBobbleLeft {
    0%, 100% { transform:rotate(var(--rot, 12deg)) translateX(var(--tx, -40%)) translateY(0); }
    50% { transform:rotate(var(--rot, 12deg)) translateX(var(--tx, -40%)) translateY(-14px); }
}
@keyframes kidsBobbleRight {
    0%, 100% { transform:rotate(var(--rot, -10deg)) translateX(var(--tx, 45%)) translateY(0); }
    50% { transform:rotate(var(--rot, -10deg)) translateX(var(--tx, 45%)) translateY(-14px); }
}

/* Per-char CSS vars for animation */
.kids-edge-char--1 img { --rot:12deg; --tx:-40%; }
.kids-edge-char--2 img { --rot:-18deg; --tx:30%; }
.kids-edge-char--3 img { --rot:8deg; --tx:-45%; }
.kids-edge-char--4 img { --rot:-14deg; --tx:40%; }

/* Kids section content needs z-index above edge chars */
.kids-section > .max-w-7xl { position:relative; z-index:2; }

/* Hide edge characters on smaller screens */
@media(max-width:1024px) { .kids-edge-char { display:none; } }

/* ===== SOUR UNIVERSE (Acid Pop) ===== */
.sour-section { background:linear-gradient(180deg, #F0FFF0 0%, #F5F0FF 40%, #FFF0F8 70%, #F0FFF0 100%); position:relative; overflow:hidden; }

/* Sour splash decorations */
.sour-splash { position:absolute; border-radius:30% 70% 70% 30% / 30% 30% 70% 70%; pointer-events:none; z-index:0; }
.sour-splash--1 { width:200px; height:200px; background:rgba(180,255,50,0.12); top:5%; left:-3%; animation:sourFloat 10s ease-in-out infinite; }
.sour-splash--2 { width:150px; height:150px; background:rgba(160,80,255,0.10); top:30%; right:-2%; animation:sourFloat 12s ease-in-out 2s infinite; }
.sour-splash--3 { width:120px; height:120px; background:rgba(255,80,180,0.08); top:55%; left:10%; animation:sourFloat 8s ease-in-out 1s infinite; }
.sour-splash--4 { width:180px; height:180px; background:rgba(255,220,50,0.10); top:75%; right:8%; animation:sourFloat 11s ease-in-out 3s infinite; }

@keyframes sourFloat {
    0%, 100% { transform:rotate(0deg) scale(1); }
    33% { transform:rotate(8deg) scale(1.05); }
    66% { transform:rotate(-5deg) scale(0.95); }
}

/* Bigger sour product cards */
.sour-section .product-card { background:linear-gradient(135deg, #F5F0FF, #F0FFF4); border-radius:1.5rem; border:2px solid rgba(160,80,255,0.15); }
.sour-section .product-card:hover { transform:translateY(-8px) scale(1.02); box-shadow:0 20px 48px rgba(120,50,200,0.12); border-color:rgba(160,80,255,0.4); }
.sour-section .product-card img { max-height:480px; }
.sour-section .product-card:hover img { transform:scale(1.10); }

/* Sour flavor tints — subtle background per flavor */
.sour-section .flavor-cola { background:linear-gradient(135deg, #F5F0EE, #F0EDE8); border-color:rgba(140,90,50,0.15); }
.sour-section .flavor-bubblegum { background:linear-gradient(135deg, #FFF0F8, #F8F0FF); border-color:rgba(220,100,180,0.15); }
.sour-section .flavor-peach { background:linear-gradient(135deg, #FFF5EE, #FFF0E5); border-color:rgba(255,160,80,0.15); }
.sour-section .flavor-raspberry { background:linear-gradient(135deg, #FFF0F2, #FFE8EE); border-color:rgba(220,60,90,0.15); }
.sour-section .flavor-strawberry { background:linear-gradient(135deg, #FFF0F0, #FFE8E8); border-color:rgba(230,50,50,0.15); }
.sour-section .flavor-melon { background:linear-gradient(135deg, #F0FFF0, #E8FFE8); border-color:rgba(80,180,80,0.15); }
.sour-section .flavor-apple { background:linear-gradient(135deg, #F0FFF2, #E8FFEA); border-color:rgba(60,180,60,0.15); }
.sour-section .flavor-cherry { background:linear-gradient(135deg, #FFF0F0, #FFE5E8); border-color:rgba(200,30,50,0.15); }
.sour-section .flavor-honey-melon { background:linear-gradient(135deg, #FFFFF0, #FFF8E0); border-color:rgba(200,180,50,0.15); }

/* Sour content above splashes */
.sour-section > .max-w-7xl { position:relative; z-index:2; }

/* ===== ENERGY UNIVERSE (products page — Energy Bars & Bites) ===== */
.energy-section { background:linear-gradient(180deg, #F2F7E8 0%, #EAF0DB 30%, #F5F0E4 60%, #EEF5E0 100%); position:relative; overflow:hidden; }

/* Energy floating shapes */
.energy-orb { position:absolute; border-radius:30% 70% 70% 30% / 30% 30% 70% 70%; pointer-events:none; z-index:0; }
.energy-orb--1 { width:220px; height:220px; background:rgba(194,209,54,0.10); top:3%; right:5%; animation:energyFloat 9s ease-in-out infinite; }
.energy-orb--2 { width:160px; height:160px; background:rgba(168,181,46,0.08); top:40%; left:-2%; animation:energyFloat 11s ease-in-out 2s infinite; }
.energy-orb--3 { width:180px; height:180px; background:rgba(194,209,54,0.07); top:70%; right:8%; animation:energyFloat 10s ease-in-out 1s infinite; }

@keyframes energyFloat {
    0%, 100% { transform:rotate(0deg) scale(1); }
    33% { transform:rotate(6deg) scale(1.04); }
    66% { transform:rotate(-4deg) scale(0.96); }
}

/* Energy product cards */
.energy-section .product-card { background:linear-gradient(135deg, #F5F8ED, #EFF2E2); border:2px solid rgba(194,209,54,0.2); }
.energy-section .product-card:hover { transform:translateY(-8px) scale(1.02); box-shadow:0 20px 48px rgba(140,160,30,0.12); border-color:rgba(194,209,54,0.5); }
.energy-section .product-card:hover img { transform:scale(1.10); }

/* Energy flavor tints */
.energy-section .flavor-cacao-coconut { background:linear-gradient(135deg, #F5EDE5, #EDE5DA); border-color:rgba(140,100,60,0.2); }
.energy-section .flavor-cocoa-mint { background:linear-gradient(135deg, #EEF5EE, #E5F0E8); border-color:rgba(60,140,80,0.2); }
.energy-section .flavor-orange { background:linear-gradient(135deg, #FFF5EE, #FFF0E2); border-color:rgba(240,150,50,0.2); }
.energy-section .flavor-salt-caramel { background:linear-gradient(135deg, #FFF8EE, #FFF2DD); border-color:rgba(200,160,60,0.2); }
.energy-section .flavor-salty-liquorice { background:linear-gradient(135deg, #F0EEEE, #E8E5E5); border-color:rgba(80,80,80,0.2); }
.energy-section .flavor-sweet-liquorice { background:linear-gradient(135deg, #F5F0EE, #EDE8E2); border-color:rgba(140,110,80,0.2); }

/* Energy content above shapes */
.energy-section > .max-w-7xl { position:relative; z-index:2; }

/* ===== PREMIUM UNIVERSE (products page — Premium Date Sticks) ===== */
.premium-section { background:linear-gradient(180deg, #F5F0E8 0%, #EDE5D8 30%, #F0EBE2 60%, #F5F0E8 100%); position:relative; overflow:hidden; }

/* Premium shimmer lines */
.premium-shimmer { position:absolute; pointer-events:none; z-index:0; }
.premium-shimmer--1 { top:10%; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent 0%, rgba(180,155,110,0.12) 30%, rgba(180,155,110,0.20) 50%, rgba(180,155,110,0.12) 70%, transparent 100%); animation:premiumGlide 8s ease-in-out infinite; }
.premium-shimmer--2 { top:50%; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent 0%, rgba(180,155,110,0.10) 20%, rgba(180,155,110,0.18) 50%, rgba(180,155,110,0.10) 80%, transparent 100%); animation:premiumGlide 10s ease-in-out 3s infinite; }
.premium-shimmer--3 { top:85%; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent 0%, rgba(180,155,110,0.08) 25%, rgba(180,155,110,0.15) 50%, rgba(180,155,110,0.08) 75%, transparent 100%); animation:premiumGlide 9s ease-in-out 1.5s infinite; }

@keyframes premiumGlide {
    0%, 100% { opacity:0.4; transform:translateX(-3%); }
    50% { opacity:1; transform:translateX(3%); }
}

/* Premium product cards */
.premium-section .product-card { background:linear-gradient(135deg, #FAF6EF, #F0E9DD); border:2px solid rgba(180,155,110,0.2); }
.premium-section .product-card:hover { transform:translateY(-8px) scale(1.02); box-shadow:0 20px 48px rgba(140,115,70,0.12); border-color:rgba(180,155,110,0.45); }
.premium-section .product-card:hover img { transform:scale(1.10); }

/* Premium flavor tints */
.premium-section .flavor-salt-caramel { background:linear-gradient(135deg, #FAF3E8, #F2E8D5); border-color:rgba(180,140,60,0.2); }
.premium-section .flavor-mint { background:linear-gradient(135deg, #EEF8F0, #E2F0E8); border-color:rgba(50,150,80,0.2); }
.premium-section .flavor-coconut { background:linear-gradient(135deg, #FDFAF5, #F5F0E8); border-color:rgba(180,160,120,0.15); }
.premium-section .flavor-salty-liquorice { background:linear-gradient(135deg, #F0EEEE, #E8E4E4); border-color:rgba(80,70,70,0.2); }
.premium-section .flavor-sweet-liquorice { background:linear-gradient(135deg, #F5F0ED, #EDE5DE); border-color:rgba(140,100,70,0.2); }

/* Premium content above decorations */
.premium-section > .max-w-7xl { position:relative; z-index:2; }

/* Reduced motion */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important;}}

/* Mobile */
@media(max-width:768px){
    .timeline-line{left:2rem;} .timeline-dot{left:2rem;}

    /* Hero slider — let it size to content, no forced 60vh */
    .hero-slider { min-height:auto; }
    .slide { min-height:auto; padding:6rem 0 4.5rem; }
    .slide-content { flex-direction:column; text-align:center; gap:1.75rem; min-height:0; padding:0 1.5rem; }
    .slide-text { width:100%; }
    .slide-text h2 { font-size:clamp(1.75rem, 7vw, 2.5rem); }
    .slide-text p { margin-left:auto; margin-right:auto; }

    /* Slide products — natural-height row, reset all desktop transforms */
    .slide-products { width:100%; height:auto; min-height:0; max-height:none; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:0.75rem; padding:0 0.5rem; }
    .slide-products img { position:static; width:auto; height:auto; max-height:240px; max-width:45%; object-fit:contain; transform:none !important; opacity:1; top:auto; left:auto; right:auto; bottom:auto; }

    /* Sour (bg-2): hide thin sticks, show only 2 bags larger */
    .slide-bg-2 .slide-products .prod-bg-left,
    .slide-bg-2 .slide-products .prod-bg-right { display:none; }
    .slide-bg-2 .slide-products .prod-mid,
    .slide-bg-2 .slide-products .prod-front { max-width:45%; max-height:240px; }

    /* Kids (bg-1): 2 bags */
    .slide-bg-1 .slide-products img { max-width:45%; max-height:240px; }

    /* Energy (bg-3): single composite */
    .slide-bg-3 .slide-products--single { width:100%; }
    .slide-bg-3 .slide-products--single img { width:auto; max-width:95%; max-height:240px; }

    /* Premium (bg-4): stack 4 sticks vertically — full readable width */
    .slide-bg-4 .slide-products { flex-direction:column; align-items:center; gap:0.4rem; padding:0 1rem; }
    .slide-bg-4 .slide-products img { max-width:88%; max-height:48px; width:auto; height:auto; }

    /* Slider controls — hide arrows on mobile, rely on swipe + dots */
    .slider-arrow { display:none; }
    .slider-dots { bottom:1.5rem; gap:14px; }
    .slider-dot { padding:8px; background:transparent; position:relative; width:auto; height:auto; }
    .slider-dot::before { content:''; display:block; width:10px; height:10px; border-radius:50%; background:rgba(0,0,0,0.2); transition:all 0.3s; }
    .slider-dot.active { background:transparent; transform:none; }
    .slider-dot.active::before { background:#C2D136; transform:scale(1.3); }

    /* Nav — bigger hit areas */
    .hamburger { padding:12px; margin:-12px; box-sizing:content-box; }
    .lang-toggle { padding:0.55rem 1rem; }

    /* Mobile submenu — allow scroll if content grows */
    .mobile-submenu { max-height:0; }
    .mobile-submenu.open { max-height:60vh; overflow-y:auto; }

    /* Category rows — show only middle 2 images (the bags) for cleaner mobile look */
    .category-row, .category-row--reverse { flex-direction:column; min-height:auto; }
    .category-row-images { min-height:auto; padding:1.75rem 1rem 1rem; gap:0.5rem; }
    .category-row-images img { height:auto; width:auto; max-height:170px; max-width:46%; }
    .category-row-images img:first-child,
    .category-row-images img:last-child { display:none; }
    /* Premium row uses --grid: stack all 4 sticks vertically */
    .category-row-images--grid { display:flex; flex-direction:column; align-items:center; gap:0.45rem; padding:1.75rem 1.5rem 1rem; }
    .category-row-images--grid img,
    .category-row-images--grid img:first-child,
    .category-row-images--grid img:last-child { display:block; height:auto; width:88%; max-width:none; max-height:42px; }
    .category-row-text, .category-row--reverse .category-row-text { padding:1.25rem 2rem 2rem; text-align:center; }
    .subsection-mascot img { height:50px; }

    /* Partner logos — tighter gap */
    .partner-logo-wrap { padding:0.5rem; }
    .partner-logo { height:48px; }
}

/* Tablet — looser partner logo gap recovery handled by Tailwind gap classes */

/* Global focus-visible for keyboard users */
:focus-visible { outline:2px solid #C2D136; outline-offset:3px; border-radius:4px; }
.btn-primary:focus-visible, .btn-outline:focus-visible { outline-offset:4px; }

/* Skip to content link */
.skip-link { position:absolute; top:-60px; left:1rem; background:#C2D136; color:#3D3D35; padding:0.75rem 1.25rem; border-radius:0.5rem; font-weight:700; z-index:9999; transition:top 0.2s; text-decoration:none; }
.skip-link:focus { top:1rem; }