* {
    margin: 0;
    padding: 0;
}

a:focus,
a:active,
a:focus-visible {
    outline: none !important;
}

:root {
    /* Primary Colors - Tropical Theme */
    --cream: #f1ebe1;
    --dark-green: #3e5425;
    --forest-green-dark: #2A4230;
    --sage-green: #5A7556;
    --red: #AD343E;
    --red-light: #AD343E;
    --salmon: #AD343E;
    --gold-cta: #C79745;

    /* Fruit Accent Colors */
    --pink-bugnay: #E84B8C;
    --purple-mangosteen: #9B4F96;
    --yellow-mango: #F9C74F;
    --orange-calamansi: #F4A261;
    --pink-dragonfruit: #E85D75;
    --purple-mulberry: #7B5E7B;

    /* Neutral Colors */
    --beige: #EDE7DC;
    --light-beige: #F8F5EF;
    --warm-white: #FAF8F3;
    --text-dark: #2C2420;
    --charcoal: #3D3D3D;
    --white: #F1EADE;

    /* Decorative */
    --gold-pattern: #B8A56A;
    --olive-pattern: #717C5A;
    --dark-bg: #1A1A1A;

    /* Legacy mappings for compatibility */
    --medium-green: #5A7556;
    --tropical-green: #AD343E;
    --dark-brown: #2C2420;
    --accent-gold: #AD343E;
    --gray: #EDE7DC;
    --gray-dark: #3D3D3D;
    --light-gray: #F8F5EF;
    --pattern-gold: #B8A56A;
}

/* Textured Backgrounds with Transparent Overlay Images */
.bg-green-textured {
    background-color: #3e5425;
    background-image: url("assets/backgrounds/xv.png");
}

.bg-white-textured {
    background-color: #f1ebe1;
    background-image: url("assets/backgrounds/old-wall.png");
}

.bg-black-textured {
    background-color: #1a1a1a;
    background-image: url("assets/backgrounds/mirrored-squares.png");
}

/* Apply green textured background to specific sections */
.pairing-section.bg-green-textured,
.testimonial-content.bg-green-textured,
.unforgettable.bg-green-textured {
    background-color: #3e5425;
}

/* Apply black textured background to specific sections */
.limited-releases.bg-black-textured {
    background-color: #1A1A1A;
}

body {
    font-family: 'Noto Sans', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

body.bg-white-textured {
    background-color: #f1ebe1;
    background-image: url("assets/backgrounds/old-wall.png");
}

/* Global Typography - Based on Tropical Style Guide */
h1 {
    font-family: 'Fondamento', cursive;
    font-size: 3rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h2 {
    font-family: 'Fondamento', cursive;
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.3;
}

h3 {
    font-family: 'Fondamento', cursive;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.3;
}

h4 {
    font-family: 'Fondamento', cursive;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.4;
}

/* Hide mobile-only hero fruits on desktop */
.hero-fruit-dragonfruit-2,
.hero-fruit-calamansi-1,
.hero-fruit-mulberry-2 {
    display: none;
}

/* Mobile Typography */
@media (max-width: 767px) {
    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    h4 {
        font-size: 1.25rem;
    }
}

/* Main wrapper for background patterns */
.main-wrapper {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    width: 100%;
}


/* Background Fruit Patterns - Hero Section */
/* Base styles for all fruit decorations */
.hero-fruit-mango,
.hero-fruit-bignay,
.hero-fruit-dragonfruit,
.hero-fruit-dragonfruit-2,
.hero-fruit-mangosteen,
.hero-fruit-mulberry,
.hero-fruit-mulberry-2,
.hero-fruit-calamansi,
.hero-fruit-calamansi-1 {
    position: absolute;
    z-index: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    opacity: 0.60;
    display: block;
}

/* Mango (Hero) - Converting 208.39px width ≈ 17% of 1230.22px, height 260.48px ≈ 16.28rem */
.hero-fruit-mango {
    background-image: url('assets/decorative/fruits/mango.webp');
    width: 17%;
    height: 16.3rem;
    left: 11%;
    top: -5.4rem;
    border-radius: 10rem;
    transform: rotate(14.62deg);
}

/* Bignay (Hero) - Converting 219.17px width ≈ 18%, 313.77px height ≈ 19.6rem */
.hero-fruit-bignay {
    background-image: url('assets/decorative/fruits/bugnay.webp');
    width: 18%;
    height: 19.6rem;
    left: 69%;
    top: -3.2rem;
}

/* Dragonfruit (Hero) - Converting 215.41px width ≈ 17.5%, 338.24px height ≈ 21.1rem */
.hero-fruit-dragonfruit {
    background-image: url('assets/decorative/fruits/dragonfruit.webp');
    width: 17.5%;
    height: 21.1rem;
    left: -9%;
    top: 19.5rem;
    transform: matrix(-0.95, -0.32, -0.32, 0.95, 0, 0);
}

/* Mangosteen (Hero) - Converting to percentage-based positioning */
.hero-fruit-mangosteen {
    background-image: url('assets/decorative/fruits/mangosteen.webp');
    width: 22%;
    height: 17.8rem;
    right: -8%;
    top: 9.5%;
}

/* Mulberry (Hero) - Converting 210.75px width ≈ 17%, 262.12px height ≈ 16.4rem */
.hero-fruit-mulberry {
    background-image: url('assets/decorative/fruits/mulberry.webp');
    width: 17%;
    height: 16.4rem;
    left: 87.5%;
    top: 5.5rem;
    transform: rotate(7.79deg);
}

/* Calamansi (Hero) - Converting to percentage-based positioning */
.hero-fruit-calamansi {
    background-image: url('assets/decorative/fruits/calamansi.webp');
    width: 17%;
    height: 17.5rem;
    left: -7%;
    top: 1%;
    transform: matrix(0.46, -0.89, -0.89, -0.46, 0, 0);
}

/* hero_dragonfruit_2 */
.hero-fruit-dragonfruit-2 {
    background-image: url('assets/decorative/fruits/dragonfruit.webp');
    position: absolute;
    left: 19.96rem;
    right: -0.84rem;
    top: 15.11rem;
    bottom: 362.16rem;
    z-index: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(-17.88deg);
}

/* hero_calamansi_1 */
.hero-fruit-calamansi-1 {
    background-image: url('assets/decorative/fruits/calamansi.webp');
    position: absolute;
    left: 15.02rem;
    right: 3.22rem;
    top: 45.67rem;
    bottom: 332.10rem;
    z-index: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(-21.1deg);
}

/* Hero_Mulberry_2 */
.hero-fruit-mulberry-2 {
    background-image: url('assets/decorative/fruits/mulberry.webp');
    position: absolute;
    width: 6.719rem;
    height: 8.096rem;
    left: -2.424rem;
    top: 36.103rem;
    z-index: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Header Styles */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 20px 0;
    background: rgba(245, 241, 232, 0.9);
    transition: box-shadow 0.3s ease;
}

header.scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 200px 1fr 150px;
    align-items: center;
    gap: 40px;
}

.logo-section {
    display: flex;
    align-items: center;
}

.logo-image {
    height: 50px;
    width: auto;
}

nav {
    display: flex;
    gap: 35px;
    justify-content: center;
    align-items: center;
}

nav a {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
    white-space: nowrap;
}

nav a:hover {
    color: var(--red);
}

nav a:focus,
nav a:active,
nav a:focus-visible {
    outline: none;
    box-shadow: none;
}

.header-icons {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
    align-items: center;
}

.icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.icon-link .icon-image {
    width: 24px;
    height: 24px;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 140px 40px 80px;
    overflow: visible;
}

.hero-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.hero-content {
    max-width: 700px;
    text-align: center;
}

.hero h1 {
    font-family: 'Fondamento', cursive;
    line-height: 1.2;
    color: var(--text-dark);
    margin-bottom: 20px;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.hero p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-dark);
    font-weight: 300;
    margin-bottom: 20px;
}

.hero-content .cta-button {
    margin-top: 5px;
}

/* Tropical fruit decorations - DEPRECATED (now using background patterns) */
.fruit-decoration {
    display: none;
}

.cta-button {
    display: inline-block;
    padding: 14px 32px;
    border: 2px solid var(--red);
    background: var(--red);
    color: var(--white);
    font-family: 'Fondamento', cursive;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
    border-radius: 25px;
    cursor: pointer;
    width: fit-content;
}

/* Default CTA hover - glowing red with outline */
.cta-button:hover {
    background: transparent;
    border-color: var(--red);
    color: var(--red);
    box-shadow: 0 0 20px rgba(173, 52, 62, 0.6);
}

/* Hero CTA - colorful scale effect */
.hero-content .cta-button {
    transition: all 0.6s ease;
    position: relative;
    z-index: 10;
}
.hero-content .cta-button:hover {
    transform: scale(1.1);
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
    box-shadow: 0 0 20px rgba(173, 52, 62, 0.6);
}

/* Pairing Section */
.pairing-section {
    padding: 0 0 80px 0;
    position: relative;
    z-index: 2;
}

.pairing-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 40px 0 40px;
}

.pairing-header {
    text-align: center;
    margin-bottom: 60px;
}

.pairing-header h2 {
    font-family: 'Fondamento', cursive;
    color: var(--white);
    margin-bottom: 20px;
    font-weight: 400;
}

.pairing-header p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    color: var(--white);
    margin-bottom: 30px;
    font-weight: 300;
}

.pairing-header .cta-button {
    border-color: var(--red);
    background: var(--red);
    color: var(--white);
}

.pairing-header .cta-button:hover {
    background: transparent;
    border-color: var(--white);
    color: var(--white);
    box-shadow: 0 0 20px rgb(241, 234, 222, 0.6);
}

.pairing-carousel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pairing-carousel-track {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 900px;
    position: relative;
}

.pairing-card {
    display: none;
    background-color: #f1ebe1;
    background-image:
        radial-gradient(circle at 30% 30%, rgba(237, 231, 220, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(232, 226, 215, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 50% 90%, rgba(245, 239, 228, 0.2) 0%, transparent 40%),
        repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0, 0, 0, 0.008) 3px, rgba(0, 0, 0, 0.008) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(0, 0, 0, 0.008) 3px, rgba(0, 0, 0, 0.008) 4px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(245, 241, 232, 0.2) 100%);
    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        100px 100px,
        100px 100px,
        100% 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.pairing-card.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.pairing-card-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.pairing-wine-image,
.pairing-food-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.pairing-card-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--light-gray);
}

.pairing-card-content h3 {
    font-family: 'Fondamento', cursive;
    color: var(--text-dark);
    margin-bottom: 15px;
    font-weight: 400;
}

.pairing-card-content p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    color: var(--text-dark);
    line-height: 1.6;
    margin-bottom: 25px;
    font-weight: 300;
}

.pairing-link {
    display: none;
}

.pairing-card-images {
    position: relative;
    overflow: hidden;
}

.pairing-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pairing-card:hover .pairing-card-overlay {
    opacity: 1;
    transform: translateY(0);
}

.pairing-card-overlay .cta-button {
    padding: 10px 24px;
    border: 2px solid var(--white);
    background: var(--white);
    color: var(--text-dark);
    font-family: 'Fondamento', cursive;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
    border-radius: 20px;
    cursor: pointer;
}

.pairing-card-overlay .cta-button:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
    transform: translateY(-2px);
}

/* Carousel Buttons */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--white);
    border: none;
    font-size: 24px;
    color: var(--text-dark);
    outline: solid 1px var(--gray-dark);
    cursor: pointer;
    transition: all 0.3s;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-btn.prev {
    left: -25px;
}

.carousel-btn.next {
    right: -25px;
}

.carousel-btn:hover {
    background: var(--white);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Content Sections */
.content-sections {
    padding: 100px 0;
}

.content-background-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1 !important;
    opacity: 0.8;
}

/* ImageContent Section Fruit Decorations */
.content-fruit-decoration {
    position: absolute;
    z-index: 1;
    opacity: 0.4;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

/* Calamansi (ImageContent 2) - Converting to rem/percentage */
.content-fruit-calamansi-2 {
    background-image: url('assets/decorative/fruits/calamansi.webp');
    width: 22%;
    height: 21rem;
    left: 7.6%;
    top: 76.5rem;
    transform: rotate(-128.18deg);
}

/* Mango (ImageContent) - Converting to rem/percentage */
.content-fruit-mango {
    background-image: url('assets/decorative/fruits/mango.webp');
    width: 21.5%;
    height: 20.7rem;
    left: 31.4%;
    top: 101.7rem;
    transform: rotate(-29.31deg);
}

/* Mangosteen (ImageContent 1) - Converting to rem/percentage */
.content-fruit-mangosteen {
    background-image: url('assets/decorative/fruits/mangosteen.webp');
    width: 20.5%;
    height: 20rem;
    left: 18.3%;
    top: 129.7rem;
}

/* Bignay (ImageContent 1) - Converting to rem/percentage */
.content-fruit-bugnay {
    background-image: url('assets/decorative/fruits/bugnay.webp');
    width: 21%;
    height: 23.3rem;
    left: 72.2%;
    top: 79.4rem;
}

/* Mulberry (ImageContent 1) - Converting to rem/percentage */
.content-fruit-mulberry {
    background-image: url('assets/decorative/fruits/mulberry.webp');
    width: 17.8%;
    height: 17.4rem;
    left: 84.3%;
    top: 105.5rem;
    transform: rotate(20.01deg);
}

/* Calamansi (ImageContent 1) - Converting to rem/percentage */
.content-fruit-calamansi {
    background-image: url('assets/decorative/fruits/calamansi.webp');
    width: 22%;
    height: 21rem;
    left: 66.8%;
    top: 125.9rem;
    transform: rotate(29.33deg);
}

/* Dragonfruit (ImageContent 1) - Converting to rem/percentage */
.content-fruit-dragonfruit {
    background-image: url('assets/decorative/fruits/dragonfruit.webp');
    width: 22.5%;
    height: 24.7rem;
    left: -7.8%;
    top: 103.7rem;
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

.content-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    gap: 100px;
    position: relative;
}

.content-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.content-block.left-aligned .content-image {
    grid-column: 1;
}

.content-block.left-aligned .content-text {
    grid-column: 2;
}

.content-block.right-aligned .content-text {
    grid-column: 1;
}

.content-block.right-aligned .content-image {
    grid-column: 2;
}

.content-image {
    position: relative;
}

.content-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
}

.fruits-overlay {
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 150px;
    height: auto;
    z-index: 2;
}

.content-text h3 {
    font-family: 'Fondamento', cursive;
    color: var(--text-dark);
    margin-bottom: 20px;
    font-weight: 400;
}

.content-text p {
    font-family: 'Noto Sans', sans-serif;
    color: var(--text-dark);
    line-height: 1.7;
    margin-bottom: 15px;
    font-weight: 300;
}

.content-text .cta-button {
    margin-top: 15px;
}

/* Limited Releases Section */
.limited-releases {
    padding: 200px 0;
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
    z-index: 3;
}

.limited-border {
    position: absolute;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: contain;
    z-index: 1;
    pointer-events: none;
}

.limited-border-top {
    top: 0;
}

@media (min-width: 769px) {
    .limited-releases-hero .limited-border-top {
        top: 100px;
    }
}

.limited-border-bottom {
    bottom: 0;
    transform: scaleY(-1);
}

.limited-background-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
}

.limited-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 2;
    width: fit-content !important;
}

.limited-content {
    position: relative;
}

.limited-content h2 {
    font-family: 'Fondamento', cursive;
    color: var(--white);
    font-weight: 400;
    margin-bottom: 40px;
}

.limited-content .carousel-btn {
    position: static;
    transform: none;
    margin-right: 15px;
}

.limited-content .carousel-btn:hover {
    transform: scale(1.1);
}

.limited-content .cta-button {
    background: var(--gold-cta);
    border-color: var(--gold-cta);
    color: var(--dark-bg);
}

.limited-content .cta-button:hover {
    background: transparent;
    border-color: var(--gold-cta);
    color: var(--gold-cta);
    box-shadow: 0 0 20px rgba(199, 151, 69, 0.6);
}

/* Limited Releases Grid - Homepage */
.limited-grid-home {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.limited-card {
    position: relative;
    width: 100%;
    min-height: 150px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    background: var(--white);
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.limited-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Limited Card Content Styles for Homepage Carousel */

.limited-card-content {
    padding: 20px;
    background: var(--white);
    border-radius: 0 0 8px 8px;
}

.limited-card-content h3 {
    font-family: 'Fondamento', cursive;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.limited-description {
    font-family: 'Noto Sans', sans-serif;
    font-size: 13px;
    color: var(--text-dark);
    line-height: 1.5;
    margin-bottom: 15px;
}

/* Limited Releases Grid Page Styles */
.limited-sizes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.limited-sizes-grid.single-size {
    grid-template-columns: 1fr;
}

.size-price-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.3s;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
}

.size-price-item.featured {
    border: 2px solid var(--text-dark);
    background: rgba(255, 255, 255, 0.8);
}

.size-price-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--red);
}

.size-price-item.active {
    background: var(--red);
    border-color: var(--red);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(173, 52, 62, 0.3);
}

.size-price-item.active .size-label,
.size-price-item.active .size-price {
    color: white;
}

.size-label {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.size-price {
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.size-button {
    width: 100%;
    padding: 10px;
    font-size: 12px;
}

.carousel-dots {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    margin-top: 30px;
    width: 100%;
    max-width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

.carousel-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s;
}

.carousel-dots .dot.active {
    background: var(--white);
    transform: scale(1.3);
}

.carousel-dots .dot:hover {
    background: var(--warm-white);
}

/* Testimonials Section */
.testimonials {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

/* Testimonial Carousel Buttons */
.testimonials-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.testimonials-carousel-btn.prev {
    left: -60px;
}

.testimonials-carousel-btn.next {
    right: -60px;
}

.testimonials-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}

.testimonials-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.testimonials-header h2 {
    font-family: 'Fondamento', cursive;
    color: var(--text-dark);
    margin-bottom: 15px;
    font-weight: 400;
}

.testimonials-header p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    color: var(--text-dark);
    font-weight: 300;
}

.testimonials-carousel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.testimonial-carousel-wrapper {
    position: relative;
}

.testimonial-track {
    max-width: 800px;
    position: relative;
}

.testimonial-card {
    display: none;
}

.testimonial-card.active {
    display: block;
}

.testimonial-dots {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 30px;
}

.testimonial-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(61, 95, 62, 0.4);
    cursor: pointer;
    transition: all 0.3s;
}

.testimonial-dots .dot.active {
    background: var(--dark-green);
    transform: scale(1.3);
}

.testimonial-dots .dot:hover {
    background: var(--sage-green);
}

.testimonial-content {
    padding: 60px;
    border-radius: 8px;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Testimonial Section Calamansi Decorations */
.testimonial-calamansi {
    position: absolute;
    opacity: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 1;
}

.testimonial-calamansi-1 {
    background-image: url('assets/decorative/fruits/calamansi.webp');
}

.testimonial-calamansi-2 {
    background-image: url('assets/decorative/fruits/calamansi.webp');
}

.testimonial-calamansi-3 {
    background-image: url('assets/decorative/fruits/calamansi.webp');
}

.testimonial-calamansi-4 {
    background-image: url('assets/decorative/fruits/calamansi.webp');
}

.testimonial-calamansi-5 {
    background-image: url('assets/decorative/fruits/calamansi.webp');
}

.testimonial-calamansi-6 {
    background-image: url('assets/decorative/fruits/calamansi.webp');
}

.testimonial-content blockquote {
    font-family: 'Fondamento', cursive;
    font-size: 22px;
    color: var(--white);
    line-height: 1.5;
    margin-bottom: 25px;
    font-weight: 400;
}

.testimonial-content cite {
    font-family: 'Fondamento', cursive;
    font-size: 16px;
    color: var(--white);
    font-style: normal;
    font-weight: 400;
}

/* Unforgettable Section */
.unforgettable {
    padding: 80px 0;
    position: relative;
    z-index: 4;
}

.unforgettable-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

.unforgettable-container h2 {
    font-family: 'Fondamento', cursive;
    color: var(--white);
    margin-bottom: 25px;
    font-weight: 400;
}

.unforgettable-container p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    color: var(--white);
    line-height: 1.7;
    margin-bottom: 20px;
    font-weight: 300;
}

.contact-subtitle {
    font-size: 14px;
    margin-bottom: 35px;
}

.contact-info {
    display: flex;
    gap: 60px;
    justify-content: center;
    align-items: flex-start;
}

.contact-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-item:first-child {
    text-align: right;
}

.contact-item:last-child {
    text-align: left;
}

.contact-label {
    font-family: 'Noto Sans', sans-serif;
    font-size: 12px;
    color: var(--white);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.contact-item a {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    color: var(--white);
    text-decoration: none;
    font-weight: 400;
    transition: color 0.3s;
}

.contact-item a:hover {
    color: var(--gold-cta);
}

@media (max-width: 767px) {
  .contact-item {
    text-align: center !important;
  }
}

@media (min-width: 1024px) {
  .contact-item {
    text-align: center !important;
  }
}


/* Footer */
footer {
    background-color: #f1ebe1;
    background-image: url("assets/backgrounds/old-wall.png");
    padding: 40px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2 !important;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 40px;
}

.footer-logo {
    height: 40px;
    width: auto;
}

.footer-socials {
    display: flex;
    gap: 15px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gray);
    transition: all 0.3s ease;
}

.social-link img {
    width: 20px;
    height: 20px;
}

.social-link:hover {
    background: var(--gold-cta);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(173, 52, 62, 0.3);
}

.footer-right {
    text-align: right;
}

.footer-right a {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 400;
}

.footer-right a:hover {
    color: var(--red);
}

/* Limited Releases Page Styles */
.limited-releases-hero {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 300px 40px 0px;
}

.limited-releases-hero-container {
    max-width: 900px;
    text-align: center;
}

.limited-releases-hero h1 {
    font-family: 'Fondamento', cursive;
    color: var(--cream);
    margin-bottom: 25px;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.limited-releases-hero p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: var(--cream);
    font-weight: 300;
}

.limited-release-item {
    position: relative;
    width: 100%;
    min-height: 150px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    background: var(--white);
    display: flex;
    flex-direction: column;
    padding: 10px;
    align-items: center;
}


/* Limited Releases Grid Section - Full Page */
.limited-releases-grid-section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    z-index: 3;
}

.limited-releases-grid-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px 60px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    position: relative;
    z-index: 2;
}

.limited-release-content .cta-button,
.limited-sizes-grid .size-button {
    display: none;
}

/* Contact Page Styles */
.contact-hero {
    min-height: 10vh;
    background-color: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 160px 40px 0px;
}

.contact-hero-container {
    max-width: 800px;
    text-align: left;
}

.contact-hero h1 {
    font-family: 'Fondamento', cursive;
    color: var(--text-dark);
    font-weight: 400;
    letter-spacing: 0.02em;
}

.contact-hero p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-dark);
    font-weight: 300;
}

.contact-content-section {
    padding: 80px 0;
    background-color: var(--cream);
}

.contact-content-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 80px;
}

.contact-form-wrapper h2,
.contact-info-wrapper h2 {
    font-family: 'Fondamento', cursive;
    color: var(--text-dark);
    margin-bottom: 30px;
    font-weight: 400;
}

/* Contact Form Styles */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Honeypot field - hidden from real users, visible to bots */
.honeypot-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 14px 18px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    color: var(--text-dark);
    background: var(--white);
    border: 2px solid var(--beige);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--red);
    background: var(--warm-white);
}

/* Error state for form fields */
.form-group input.error,
.form-group select.error,
.form-group textarea.error {
    border-color: #e74c3c;
    background: #fff5f5;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Form Messages Styles */
.form-messages {
    padding: 16px 20px;
    border-radius: 6px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    margin: 10px 0;
    display: none;
    animation: slideDown 0.3s ease;
}

.form-messages.success {
    background: #d4edda;
    color: #155724;
    border: 2px solid #c3e6cb;
}

.form-messages.error {
    background: #f8d7da;
    color: #721c24;
    border: 2px solid #f5c6cb;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.contact-form .cta-button {
    margin-top: 10px;
    align-self: flex-start;
}

.contact-form .cta-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Contact Info Styles */
.contact-info-wrapper {
    background: var(--white);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.contact-info-block {
    margin-bottom: 35px;
}

.contact-info-block:last-child {
    margin-bottom: 0;
}

.contact-info-block h3 {
    font-family: 'Fondamento', cursive;
    color: var(--text-dark);
    margin-bottom: 12px;
    font-weight: 400;
}

.contact-info-block p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    color: var(--text-dark);
    line-height: 1.7;
    margin-bottom: 5px;
    font-weight: 300;
}

.contact-info-block a {
    color: var(--red);
    text-decoration: none;
    transition: color 0.3s;
}

.contact-info-block a:hover {
    color: var(--dark-green);
}

.services-list,
.values-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.services-list li,
.values-list li {
    font-family: 'Noto Sans', sans-serif;
    font-size: 15px;
    color: var(--text-dark);
    line-height: 1.7;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
    font-weight: 300;
}

.services-list li:before,
.values-list li:before {
    content: '•';
    color: var(--red);
    font-size: 20px;
    position: absolute;
    left: 0;
    top: -2px;
}

.contact-socials {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

/* About Company Section */

.process-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.about-company-section {
    padding: 80px 0;
    background-color: #3e5425;
    background-image: url("assets/backgrounds/xv.png");
    background-size: auto;
    background-repeat: repeat;
    margin-top: 0;
}

.about-company-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.about-company-container h2 {
    font-family: 'Fondamento', cursive;
    color: var(--white);
    margin-bottom: 30px;
    font-weight: 400;
    text-align: center;
}

.about-content {
    background: rgba(255, 255, 255, 0.95);
    padding: 50px;
    border-radius: 8px;
}

.about-content > p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    color: var(--text-dark);
    line-height: 1.8;
    margin-bottom: 40px;
    font-weight: 300;
    text-align: center;
}

.awards-section,
.values-section {
    margin-bottom: 40px;
}

.awards-section:last-child,
.values-section:last-child {
    margin-bottom: 0;
}

.awards-section h3,
.values-section h3 {
    font-family: 'Fondamento', cursive;
    color: var(--text-dark);
    margin-bottom: 25px;
    font-weight: 400;
    text-align: center;
}

.awards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.award-item {
    text-align: center;
    padding: 30px 20px;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.award-medal {
    font-size: 48px;
    display: block;
    margin-bottom: 15px;
}

.award-item p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    color: var(--text-dark);
    line-height: 1.5;
    margin-bottom: 5px;
    font-weight: 300;
}

.award-item p strong {
    font-weight: 600;
    font-size: 16px;
}

.values-section {
    text-align: center;
}

.values-list {
    display: inline-block;
    text-align: left;
}

/* Contact Page Responsive Styles */
@media (max-width: 1024px) {
    .contact-content-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .awards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .contact-hero {
        padding: 140px 20px 0px;
        min-height: 10vh;
    }

    .contact-hero p {
        font-size: 16px;
    }

    .contact-content-section {
        padding: 60px 0;
    }

    .contact-content-container {
        padding: 0 20px;
        gap: 40px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contact-form .cta-button {
        width: 100%;
    }

    .contact-info-wrapper {
        padding: 30px 20px;
    }

    .about-content {
        padding: 30px 20px;
    }

    .about-company-section {
        padding: 60px 0;
    }

    .about-company-container {
        padding: 0 20px;
    }

    .about-company-container h2 {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .contact-hero p {
        font-size: 15px;
    }

    .award-medal {
        font-size: 36px;
    }

    .about-company-section {
        padding: 40px 0;
    }
}

/* Shop Page Styles */
.shop-hero {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 160px 40px 60px;
    position: relative;
}

.shop-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(173, 52, 62, 0.1) 0%, rgba(90, 117, 86, 0.1) 100%);
    pointer-events: none;
    z-index: 0;
}

.shop-hero-container {
    position: relative;
    z-index: 1;
}

.shop-hero-container {
    max-width: 800px;
    text-align: center;
}

.shop-hero h1 {
    font-family: 'Fondamento', cursive;
    color: var(--text-dark);
    margin-bottom: 25px;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.shop-hero p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-dark);
    font-weight: 300;
}

/* Shop Hero Border Wrapper */
.shop-hero-border-wrapper {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
}

.shop-hero-border {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
}

.shop-section {
    padding: 80px 0;
    background-color: #3e5425;
    background-image: url("assets/backgrounds/xv.png");
    background-size: auto;
    background-repeat: repeat;
    margin-top: 0;
}

.shop-section.white-wines-section {
    background: var(--light-beige);
}

.shop-section-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    gap: 40px;
}

/* Sidebar Styles */
.shop-sidebar {
    flex: 0 0 280px;
    position: sticky;
    top: 120px;
    height: fit-content;
}

.filter-section,
.sort-section {
    background: var(--white);
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.filter-section h3,
.sort-section h3 {
    font-family: 'Fondamento', cursive;
    color: var(--text-dark);
    margin-bottom: 20px;
    font-weight: 400;
    border-bottom: 2px solid var(--red);
    padding-bottom: 10px;
}

.filter-group {
    margin-bottom: 25px;
}

.filter-group:last-child {
    margin-bottom: 0;
}

.filter-group h4 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-option {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    color: var(--text-dark);
    transition: color 0.3s;
}

.filter-option:hover {
    color: var(--red);
}

.filter-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    cursor: pointer;
    accent-color: var(--red);
}

.filter-option span {
    flex: 1;
}

.sort-select {
    width: 100%;
    padding: 12px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    color: var(--text-dark);
    background: var(--cream);
    border: 2px solid var(--beige);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.3s;
}

.sort-select:focus {
    outline: none;
    border-color: var(--red);
}

.sort-select option {
    padding: 10px;
}

/* Mobile Filter Button */
.mobile-filter-btn {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--white);
    border: 2px solid var(--red);
    color: var(--red);
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    width: fit-content;
}

.mobile-filter-btn:hover {
    background: var(--red);
    color: var(--white);
}

.mobile-filter-btn svg {
    width: 20px;
    height: 20px;
}

/* Mobile Filter Header */
.mobile-filter-header {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 2px solid var(--beige);
    margin: -20px -20px 20px -20px;
    background: var(--cream);
}

.mobile-filter-header h3 {
    font-family: 'Fondamento', cursive;
    color: var(--text-dark);
    margin: 0;
    font-weight: 400;
}

.mobile-filter-close {
    background: none;
    border: none;
    color: var(--text-dark);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.mobile-filter-close:hover {
    color: var(--red);
    transform: rotate(90deg);
}

.mobile-filter-close svg {
    width: 24px;
    height: 24px;
}

/* Mobile Filter Actions */
.mobile-filter-actions {
    display: none;
    gap: 10px;
    padding: 20px 0 0;
    border-top: 2px solid var(--beige);
    margin-top: 20px;
}

.filter-action-btn {
    flex: 1;
    padding: 12px 20px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.reset-btn {
    background: transparent;
    border: 2px solid var(--text-dark);
    color: var(--text-dark);
}

.reset-btn:hover {
    background: var(--text-dark);
    color: var(--white);
}

.done-btn {
    background: var(--red);
    border: 2px solid var(--red);
    color: var(--white);
}

.done-btn:hover {
    background: var(--red-light);
    border-color: var(--red-light);
}

/* Shop Content Area */
.shop-content {
    flex: 1;
}

.shop-content h2,
.shop-content .section-title {
    font-family: 'Fondamento', cursive;
    color: var(--text-dark);
    margin-bottom: 40px;
    margin-top: 60px;
    font-weight: 400;
}

.shop-content h2:first-child {
    margin-top: 0;
}

.shop-section h2 {
    font-family: 'Fondamento', cursive;
    color: var(--text-dark);
    margin-bottom: 40px;
    font-weight: 400;
    text-align: center;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.product-card {
    position: relative;
    width: 100%;
    min-height: 150px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    background: var(--white);
    display: flex;
    flex-direction: column;
    padding: 10px;
    align-items: center;
}

.product-card img {
    width: 100%;
    object-fit: contain;
}


/* Responsive Design */
@media (max-width: 1200px) {
    .carousel-btn.prev {
        left: -20px;
    }

    .carousel-btn.next {
        right: -20px;
    }

    .limited-container {
        grid-template-columns: 250px 1fr;
        gap: 40px;
    }

    .limited-grid-home {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    .limited-releases-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .shop-sidebar {
        flex: 0 0 250px;
    }
}

@media (max-width: 1024px) {
    .header-container {
        grid-template-columns: 180px 1fr 120px;
        gap: 20px;
    }

    nav {
        gap: 25px;
    }

    nav a {
        font-size: 12px;
    }

    .hero-container {
        gap: 50px;
    }

    .hero-bottle {
        height: 260px;
    }

    .hero h1 {
        font-size: 40px;
    }

    .hero p {
        font-size: 16px;
    }

    .pairing-card.active {
        grid-template-columns: 1fr;
    }

    .pairing-card-images {
        grid-template-columns: 1fr 1fr;
    }

    .content-block {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Stack images above text - both alignments */
    .content-block.left-aligned .content-image,
    .content-block.right-aligned .content-image {
        grid-row: 1;
        grid-column: 1;
    }

    .content-block.left-aligned .content-text,
    .content-block.right-aligned .content-text {
        grid-row: 2;
        grid-column: 1;
    }

    /* Use medium-width responsive images (1024px breakpoint) */
    .content-block.left-aligned .content-image img {
        content: url('assets/images/content/bottle-with-charcuterie-1200w.webp');
    }

    .content-block.right-aligned .content-image img {
        content: url('assets/images/content/filipino-wines-with-fruit-1200w.webp');
    }

    .limited-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .limited-grid-home {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .limited-releases-grid-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .shop-section-container {
        flex-direction: column;
    }

    .shop-hero-border-wrapper {
        line-height: 0;
        height: 100px;
        overflow: hidden;
    }

    .shop-hero-border {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
    }

    .shop-sidebar {
        position: static;
        width: 100%;
        flex: none;
    }

    .filter-section,
    .sort-section {
        padding: 20px;
    }

    .shop-hero {
        padding: 140px 20px 40px;
        min-height: 40vh;
    }

    .shop-hero h1 {
        font-size: 36px;
    }

    .shop-hero p {
        font-size: 16px;
    }

    .shop-hero-border-wrapper {
        line-height: 0;
    }
}

@media (max-width: 768px) {
    /* Enable scroll snap for mobile view */
    html {
        scroll-snap-type: y proximity;
    }

    /* Make main sections snap to viewport */
    .hero,
    .pairing-section,
    .content-sections,
    .limited-releases,
    .testimonials,
    .unforgettable {
        scroll-snap-align: start;
        scroll-snap-stop: normal;
    }

    /* Enable relative positioning for content-sections in mobile view only */
    .content-sections {
        position: relative;
    }
}

    /*
     * MOBILE FRUIT POSITIONING - VIEWPORT-RESPONSIVE
     * Horizontal positioning uses vw units to scale across different viewport widths
     * Conversion: vw = (figma_rem / 24.56) * 100vw (where 24.56rem = 393px design width)
     * Vertical positioning uses original rem values from Figma specs
     */
    /* Adjust Hero fruit patterns for mobile - Updated from Figma frame (375×6320px) */
    /* Parent dimensions: 375px × 6320px */

@media (max-width: 399px) {
    /* Hero_dragonfruit_1 */
    .hero-fruit-dragonfruit {
        width: 5.44rem !important;             
        height: 8.12rem !important;            
        left: 11.92%;                              
        top: 46.24rem !important;              
        z-index: 1 !important;
        transform: matrix(-0.96, 0.28, 0.28, 0.96, 0, 0) !important;
    }

    /* hero_mango */
    .hero-fruit-mango {
        width: 6.4rem !important;              /* 100.76px / 16 */
        height: 8.21rem !important;            /* 129.11px / 16 */
        left: 81.27%;                           /* 295.89px / 375 */
        top: 36.49rem !important;               /* 566.41px / 16 */
        z-index: 1 !important;
        transform: rotate(36.99deg) !important;
    }

    /* hero_calamansi_2 (using hero-fruit-calamansi) */
    .hero-fruit-calamansi {
        width: 8.37rem!important;
        height: 13.68rem!important;
        left: -18.71% !important;
        top: 12.59rem !important;               
        z-index: 1 !important;
        transform: rotate(167.09deg) !important;
    }

    /* hero_bugnay (using hero-fruit-bignay) */
    .hero-fruit-bignay {
        height: 9.49rem;                       /* 151.79px / 16 */
        width: 7.75rem;                       /* 123.98px / 16 */
        left: 10.81% !important;
        top: 5.3rem !important;                /* 1.35% of 6320px = 85.32px / 16 */
        z-index: 1 !important;
        transform: none !important;
    }

    /* Hero_Mulberry_1 (using hero-fruit-mulberry) */
    .hero-fruit-mulberry {
        width: 6.84rem !important;             /* 109.38px / 16 */
        height: 8.24rem !important;            /* 131.78px / 16 */
        left: 64.7% !important;                /* 242.52px / 375*/
        top: 5.53rem !important;                /* 88.42px / 16 */
        z-index: 1 !important;
        transform: none !important;
    }

    /* Hide mangosteen in mobile hero as it's not in the spec */
    .hero-fruit-mangosteen {
        display: none !important;
    }

    .hero-fruit-dragonfruit-2 {
        display: block !important;
        width: 5.85rem!important;
        height: 8.7rem!important;
        left: 82.93% !important;
        top: 20.81rem !important;               
        z-index: 1 !important;
        transform: rotate(-17.88deg) !important;
    }

    .hero-fruit-calamansi-1 {
        display: block !important;
        width: 6.77rem !important;
        height: 11.03rem !important;
        left: 67.39% !important;
        top: 45.24rem !important;              
        z-index: 1 !important;
        transform: rotate(-21.1deg) !important;
    }

    .hero-fruit-mulberry-2 {
        display: block !important;
        width: 6.77rem !important;           
        height: 11.03rem !important;           
        left: -15.71% !important;               
        top: 36.78rem !important;               
        z-index: 1 !important;
        transform: none !important;
    }

    /* calamansi_content_1 */
    .content-fruit-calamansi {
        background-image: url('assets/decorative/fruits/calamansi.webp') !important;
        width: 46.6% !important;                /* 174.65px / 375 */
        height: 13.6rem !important;             /* 218.32px / 16 */
        left: 75.1% !important;                 /* 281.73px / 375 */
        top: 220.7rem !important;               /* 3530.59px / 16 */
        z-index: 1 !important;
        transform: rotate(-15.82deg) !important;
    }

    /* calamansi_content_2 */
    .content-fruit-calamansi-2 {
        background-image: url('assets/decorative/fruits/calamansi.webp') !important;
        width: 49.9% !important;                /* 187.11px / 375 */
        height: 14.6rem !important;             /* 233.89px / 16 */
        left: -5.4% !important;                 /* -20.17px / 375 */
        top: 130.5rem !important;               /* 2087.23px / 16 */
        z-index: 1 !important;
        transform: none !important;
    }

    /* Bignay_content */
    .content-fruit-bugnay {
        background-image: url('assets/decorative/fruits/bugnay.webp') !important;
        width: 51.4% !important;                /* 192.65px / 375 */
        height: 17.3rem !important;             /* 276.05px / 16 */
        left: 67.5% !important;                 /* 253.11px / 375 */
        top: 129.1rem !important;               /* 2066px / 16 */
        z-index: 1 !important;
        transform: none !important;
    }

    /* dragonfruit_content */
    .content-fruit-dragonfruit {
        background-image: url('assets/decorative/fruits/dragonfruit.webp') !important;
        width: 34.4% !important;                /* 128.95px / 375 */
        height: 11.6rem !important;             /* 184.96px / 16 */
        left: -18% !important;                  /* -67.57px / 375 */
        top: 158.6rem !important;               /* 2537.17px / 16 */
        z-index: 1 !important;
        transform: matrix(-0.96, -0.28, -0.28, 0.96, 0, 0) !important;
    }

    /* Mango_content */
    .content-fruit-mango {
        background-image: url('assets/decorative/fruits/mango.webp') !important;
        width: 53.1% !important;                /* 199.12px / 375 */
        height: 15.6rem !important;             /* 248.97px / 16 */
        left: -26.1% !important;                /* -98px / 375 */
        top: 201.7rem !important;               /* 3227.18px / 16 */
        z-index: 1 !important;
        transform: matrix(-0.93, 0.36, 0.36, 0.93, 0, 0) !important;
    }

    /* mangosteen_content */
    .content-fruit-mangosteen {
        background-image: url('assets/decorative/fruits/mangosteen.webp') !important;
        width: 57.5% !important;                /* 215.54px / 375 */
        height: 17.9rem !important;             /* 287.02px / 16 */
        left: 26.7% !important;                 /* 100.16px / 375 */
        top: 235.2rem !important;               /* 3762.64px / 16 */
        z-index: 1 !important;
        transform: none !important;
    }

    /* Mulberry_content */
    .content-fruit-mulberry {
        background-image: url('assets/decorative/fruits/mulberry.webp') !important;
        width: 10.4rem !important;               
        height: 13.2rem !important;             /* 210.75px / 16 */
        left: 55.4% !important;                 /* 207.87px / 375 */
        top: 180rem !important;                 /* 2880.31px / 16 */
        z-index: 2 !important;
        transform: rotate(21.61deg) !important;
    }

    /* Adjust Testimonial calamansi patterns for mobile */

    /* calamansi_testimonial_1 */
    .testimonial-calamansi-1 {
        width: 124.136%;              
        height: 36.37rem;
        left: -70.93%;               
        top: 382.75rem !important;         
        transform: matrix(-1, 0.04, 0.04, 1, 0, 0) !important;
    }

    /* calamansi_testimonial_2 */
    .testimonial-calamansi-2 {
        width: 68.72%;
        height: 20.13rem;
        left: 62.31%;
        top: 375.46rem;
        transform: matrix(-1, 0.04, 0.04, 1, 0, 0) !important;
    }

    /* calamansi_testimonial_3 */
    .testimonial-calamansi-3 {
        width: 78.78%;             
        height: 23.08rem;   
        left: 28.27%;               
        top: 399.69rem;               
        transform: matrix(-0.99, 0.1, 0.1, 0.99, 0, 0) !important;
    }

    /* calamansi_testimonial_5 */
    .testimonial-calamansi-5 {
        width: 81.39%;             
        height: 23.84rem;        
        left: -43.47%;    
        top: 365.75rem; 
        transform: matrix(-0.93, 0.38, 0.38, 0.93, 0, 0) !important;
    }

    /* Hide calamansi-4 and calamansi-6 on mobile (not in spec) */
    .testimonial-calamansi-4,
    .testimonial-calamansi-6 {
        display: none !important;
    }
}
@media (max-width: 768px) {
    /* Use smaller responsive images for mobile (768px breakpoint) */
    .content-block.left-aligned .content-image img {
        content: url('assets/images/content/bottle-with-charcuterie-600w.webp');
    }

    .content-block.right-aligned .content-image img {
        content: url('assets/images/content/filipino-wines-with-fruit-600w.webp');
    }

    header {
        position: relative;
    }

    .header-container {
        grid-template-columns: 1fr auto;
        gap: 15px;
        padding: 15px 20px;
        position: relative;
    }

    .logo-text {
        font-size: 16px;
    }

    .logo-image {
        height: 35px;
        width: auto;
    }

    nav {
        display: none;
    }

    .header-icons {
        display: none;
    }

    .icon-link {
        font-size: 18px;
    }

    .hero {
        padding: 100px 20px 140px;
        min-height: auto;
        z-index: 10;
    }

    .hero-container {
        gap: 40px;
    }

    .hero-bottle {
        height: 220px;
    }

    .hero p {
        font-size: 15px;
    }

    .pairing-container {
        padding: 60px 20px 0 20px;
    }

    .pairing-carousel {
        padding: 0 50px;
    }

    .content-container,
    .testimonials-container,
    .unforgettable-container {
        padding: 0 20px;
    }

    /* Limited Releases Mobile - Stacked Layout */
    .limited-releases {
        min-height: 100vh;
        display: flex;
        align-items: center;
        padding: 60px 0;
    }

    .limited-container {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 0 15px;
        align-items: center;
        width: 100%;
    }

    .limited-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
    }

    .limited-content h2 {
        margin-bottom: 15px;
        line-height: 1.2;
    }

    .limited-content .cta-button {
        font-size: 11px;
        padding: 10px 20px;
    }

    .carousel-btn.prev {
        left: 5px;
    }

    .carousel-btn.next {
        right: 5px;
    }

    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
        background: var(--white);
    }

    .pairing-card-content {
        padding: 30px;
    }

    .content-image img {
        height: 300px;
    }

    .content-block {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Limited Releases Grid - Mobile */
    .limited-grid-home {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 15px;
    }

    .testimonial-content {
        padding: 40px 30px;
    }

    .testimonial-content blockquote {
        font-size: 18px;
    }

    .contact-info {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }

    .footer-socials {
        justify-content: center;
    }

    .footer-right {
        text-align: center;
    }

    .limited-releases-hero {
        padding: 100px 20px 0px;
        min-height: 50vh;
    }

    .limited-releases-hero p {
        font-size: 15px;
    }

    .limited-releases-grid-section {
        padding: 0;
    }

    .limited-releases-grid-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .limited-release-image {
        height: 280px;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .shop-section {
        padding: 60px 0;
        min-height: auto;
    }

    .shop-section-container {
        padding: 0 20px;
        display: block;
        width: 100%;
    }

    /* Ensure no fruit patterns show on shop page mobile view */
    .shop-section .hero-fruit-mango,
    .shop-section .hero-fruit-bignay,
    .shop-section .hero-fruit-dragonfruit,
    .shop-section .hero-fruit-mangosteen,
    .shop-section .hero-fruit-mulberry,
    .shop-section .hero-fruit-calamansi {
        display: none !important;
    }

    /* Show mobile filter button */
    .mobile-filter-btn {
        display: flex;
    }

    /* Hide sidebar by default on mobile, show as overlay when active */
    .shop-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: var(--white);
        z-index: 2000;
        overflow-y: auto;
        padding: 20px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        flex: none;
        visibility: hidden;
    }

    .shop-sidebar.active {
        transform: translateX(0);
        visibility: visible;
    }

    /* Show mobile filter header on mobile */
    .shop-sidebar .mobile-filter-header {
        display: flex;
    }

    /* Hide desktop filter section title on mobile */
    .shop-sidebar .filter-section > h3 {
        display: none;
    }

    /* Show mobile filter action buttons */
    .mobile-filter-actions {
        display: flex;
    }

    .shop-content {
        width: 100%;
    }

    .shop-hero {
        padding: 80px 20px 40px;
        min-height: 35vh;
    }

    .shop-hero p {
        font-size: 15px;
    }

    .shop-hero-border-wrapper {
        line-height: 0;
        height: 80px;
        overflow: hidden;
    }

    .shop-hero-border {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
    }

    .product-card {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .product-name {
        font-size: 15px;
        min-height: 40px;
    }

    .product-price {
        font-size: 18px;
    }
}

@media (max-width: 480px) {

    .hero-bottle {
        height: 260px;
    }

    .hero p {
        font-size: 14px;
    }

    .pairing-card-images {
        grid-template-columns: 1fr;
    }

    .limited-grid-home {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0 10px;
    }

    .shop-hero {
        padding: 100px 15px 30px;
        min-height: 35vh;
    }

    .shop-hero p {
        font-size: 14px;
    }

    .shop-hero-border-wrapper {
        height: 60px;
        overflow: hidden;
    }

    .shop-hero-border {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
    }

    .product-name {
        font-size: 16px;
        min-height: 42px;
    }

    .testimonials-carousel-btn.prev {
        left: 10px;
    }

    .testimonials-carousel-btn.next {
        right: 10px;
    }
}

/* Responsive background adjustments removed - using CSS-based textures that scale automatically */

/* ============================================
   SEARCH MODAL STYLES
   ============================================ */

/* Search Modal Overlay */
.search-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.search-modal.active {
    display: block;
    opacity: 1;
}

.search-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

/* Search Modal Content */
.search-modal-content {
    position: relative;
    max-width: 800px;
    margin: 80px auto;
    padding: 40px;
    background: var(--cream);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Search Modal Close Button */
.search-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 36px;
    color: var(--text-dark);
    cursor: pointer;
    padding: 5px 10px;
    line-height: 1;
    transition: transform 0.2s ease, color 0.2s ease;
}

.search-modal-close:hover {
    transform: scale(1.1);
    color: var(--red);
}

/* Search Input Wrapper */
.search-input-wrapper {
    position: relative;
    margin-bottom: 30px;
}

.search-input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    opacity: 0.5;
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 15px 15px 15px 50px;
    font-size: 18px;
    font-family: 'Noto Sans', sans-serif;
    border: 2px solid var(--dark-green);
    border-radius: 8px;
    background: var(--warm-white);
    color: var(--text-dark);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input:focus {
    border-color: var(--gold-cta);
    box-shadow: 0 0 0 3px rgba(199, 151, 69, 0.1);
}

.search-input::placeholder {
    color: var(--charcoal);
    opacity: 0.6;
}

/* Search Results */
.search-results {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
}

/* Search Suggestions */
.search-suggestions h3 {
    font-family: 'Fondamento', serif;
    color: var(--dark-green);
    margin-bottom: 15px;
}

.search-suggestion-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.search-tag {
    padding: 10px 20px;
    background: var(--dark-green);
    color: var(--cream);
    border: none;
    border-radius: 25px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.search-tag:hover {
    background: var(--sage-green);
    transform: translateY(-2px);
}

/* Search Results List */
.search-results-list {
    margin-top: 20px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    margin-bottom: 10px;
    background: var(--warm-white);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-dark);
    transition: background 0.2s ease, transform 0.2s ease;
}

.search-result-item:hover {
    background: var(--beige);
    transform: translateX(5px);
}

.search-result-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
}

.search-result-info {
    flex: 1;
}

.search-result-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--dark-green);
    margin-bottom: 5px;
}

.search-result-category {
    font-size: 13px;
    color: var(--charcoal);
    opacity: 0.7;
}

.search-no-results {
    text-align: center;
    padding: 40px 20px;
    color: var(--charcoal);
    font-size: 16px;
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .search-modal-content {
        margin: 20px;
        padding: 30px 20px;
        max-width: calc(100% - 40px);
    }

    .search-input {
        font-size: 16px;
        padding: 12px 12px 12px 45px;
    }

    .search-tag {
        font-size: 13px;
        padding: 8px 16px;
    }

    .search-results {
        max-height: 300px;
    }

    .search-modal-close {
        font-size: 28px;
        top: 10px;
        right: 10px;
    }
}

/* ==========================================================================
   RESPONSIVE FRUIT DECORATIONS - ADDITIONAL BREAKPOINTS
   Based on Figma specifications from new_fruit_decor_positions.md

   UNIT CONVERSION STRATEGY:
   -------------------------
   Following hybrid approach for consistent responsive behavior across all breakpoints:

   1. WIDTH: Percentage (%)
      - Formula: (figma_px_width / viewport_width) × 100
      - Example: 442.88px on 375px viewport = (442.88 / 375) × 100 = 118.1%
      - Scales proportionally with viewport width

   2. HEIGHT: rem units
      - Formula: figma_px_height / 16 (16px = 1rem default)
      - Example: 553.6px = 553.6 / 16 = 34.6rem
      - Maintains consistent proportions across breakpoints

   3. HORIZONTAL POSITIONING (left only):
      - If Figma spec shows %: Keep as percentage
      - If Figma spec shows px:
        * Mobile/Desktop/Tablet: Convert to % using (px / viewport_width) × 100

   4. VERTICAL POSITIONING (top only):
      - Small values (< 1000px): Convert to rem (px / 16)
      - Large values (> 1000px): Convert to rem for document flow positioning

   5. TRANSFORM VALUES: Keep as-is (degrees for rotate, coefficients for matrix)

   BREAKPOINTS COVERED:
   --------------------
   - Mobile Small: ≤ 399px (existing styles based on 375px design)
   - Mobile Large: 400px - 767px (based on 430px design)
   - Tablet Portrait: 768px - 1023px
   - Tablet Landscape: 1024px - 1279px
   - Desktop Small: 1280px - 1439px
   - Desktop Medium: 1440px - 1919px
   - Desktop Large: 1920px - 2559px
   - Desktop XL: ≥ 2560px
   ========================================================================== */

/* Mobile Large: 430×6268px - Larger mobile devices */
@media (min-width: 400px) and (max-width: 767px) {
    /* Hero Section */
    .hero-fruit-bignay {
        width: 27.4%;              /* 135.49px / 430 */
        height: 7.8rem;           /* 209.41px / 16 */
        left: 15.6%;
        top: 4.3rem;               /* 1.35% of 6268px = 84.62px / 16 */
    }

    .hero-fruit-calamansi-1 {
        width: 25.8%;              /* 111.07px / 430 */
        height: 11.1rem;           /* 175.93px / 16 */
        left: -13%;
        top: 17.5rem;              /* 4.45% of 6268px = 278.93px / 16 */
        transform: rotate(167.09deg);
    }

    .hero-fruit-calamansi {
        width: 25.7%;              /* 110.74px / 430 */
        height: 11rem;             /* 176.22px / 16 */
        left: 61.16%;
        right: 13.1%;
        top: 46.5rem;              /* 11.85% of 6268px = 742.76px / 16 */
        transform: rotate(-21.1deg);
    }

    .hero-fruit-mango {
        width: 23.4%;              /* 100.76px / 430 */
        height: 8.1rem;            /* 129.11px / 16 */
        left: 78.9%;               /* 295.89px / 430 */
        top: 34.9rem;              /* 566.41px / 16 */
        transform: rotate(36.99deg);
    }

    .hero-fruit-dragonfruit-2 {
        width: 22.2%;              /* 95.25px / 430 */
        height: 13.3rem;           /* 212.83px / 16 */
        left: 81.28%;
        right: -3.43%;
        top: 15.3rem;              /* 3.92% of 6268px = 245.71px / 16 */
        transform: rotate(-17.88deg);
    }

    .hero-fruit-dragonfruit {
        width: 23.6%;              /* 88.54px / 430 */
        height: 8.3rem;            /* 132.25px / 16 */
        left: 10.13%;                /* calc(50% - 88.54px/2 - 117.14px) = ~27.5px / 430 */
        top: 46.8rem;              /* (6268 - 5397.87) / 16 = 870.13 / 16 */
        transform: matrix(-0.96, 0.28, 0.28, 0.96, 0, 0);
    }

    .hero-fruit-mulberry {
        width: 29.2%;              
        height: 8.2rem;           
        left: 72.9%;              
        top: 5.8rem;          
    }

    .hero-fruit-mulberry-2 {
        width: 25.4%;              /* 109.38px / 430 */
        height: 8.2rem;            /* 131.78px / 16 */
        left: -9.2%;               /* -39.45px / 430 */
        top: 36.7rem;              /* 587.7px / 16 */
    }

    .hero-fruit-mangosteen {
        display: none;
    }

    /* Content Section */
    .content-fruit-calamansi-2 {
        width: 44.3%;              /* 190.37px / 430 */
        height: 14.9rem;           /* 237.96px / 16 */
        left: -11.6%;              /* -51.16px / 430 */
        top: 125.31rem;             /* 2075px / 16 */
        transform: none;
    }

    .content-fruit-bugnay {
        width: 45.6%;              /* 196.09px / 430 */
        height: 17.5rem;           /* 280.74px / 16 */
        left: 61.1%;               /* 262.84px / 430 */
        top: 125.4rem;             /* 2054px / 16 */
    }

    .content-fruit-dragonfruit {
        width: 30.5%;              /* 131.3px / 430 */
        height: 11.8rem;           /* 188.02px / 16 */
        left: -10.4%;              /* -66.16px / 430 */
        top: 159.3rem;             /* 2549px / 16 */
        transform: matrix(-0.96, -0.28, -0.28, 0.96, 0, 0);
    }

    .content-fruit-mango {
        width: 47.1%;              /* 202.61px / 430 */
        height: 15.8rem;           /* 253.27px / 16 */
        left: -23.8%;              /* -102.35px / 430 */
        top: 200.9rem;             /* 3213.77px / 16 */
        transform: matrix(-0.93, 0.36, 0.36, 0.93, 0, 0);
    }

    .content-fruit-calamansi {
        width: 41.3%;              /* 177.69px / 430 */
        height: 13.9rem;           /* 222.12px / 16 */
        left: 66%;                 /* 283.84px / 430 */
        top: 215.4rem;             /* 3447px / 16 */
        transform: rotate(-15.82deg);
    }

    .content-fruit-mulberry {
        width: 39.3%;              /* 169.21px / 430 */
        height: 13.4rem;           /* 214.42px / 16 */
        left: 51.8%;               /* 222.84px / 430 */
        top: 178.1rem;             /* 2849px / 16 */
        transform: rotate(21.61deg);
    }

    .content-fruit-mangosteen {
        width: 51%;                /* 219.29px / 430 */
        height: 18.3rem;           /* 292.01px / 16 */
        left: 24.1%;               /* 103.84px / 430 */
        top: 229.8rem;             /* 3676px / 16 */
    }

    /* Testimonial Section */
    .testimonial-calamansi-1 {
        width: 76.1%;              /* 327.27px / 430 */
        height: 25.6rem;           /* 409.08px / 16 */
        left: -30.7%;              /* -144.15px / 430 */
        top: 369.52rem;             /* 5060.31px / 16 */
        transform: rotate(2.03deg);
    }

    .testimonial-calamansi-2 {
        width: 62.2%;              /* 267.28px / 430 */
        height: 20.9rem;           /* 334.1px / 16 */
        left: 60.43%;               /* 247.84px / 430 */
        top: 353.13rem;             /* 4798px / 16 */
        transform: matrix(-1, 0.04, 0.04, 1, 0, 0);
    }

    .testimonial-calamansi-5 {
        width: 73.6%;              /* 316.54px / 430 */
        height: 24.7rem;           /* 395.67px / 16 */
        left: -39.11%;              /* -180.16px / 430 */
        top: 343.25rem;               /* 4640px / 16 */
        transform: matrix(-1, 0.04, 0.04, 1, 0, 0);
    }

    .testimonial-calamansi-3 {
        width: 71.3%;              /* 306.39px / 430 */
        height: 23.9rem;           /* 382.99px / 16 */
        left: 33.69%;               /* 132.87px / 430 */
        top: 375.06rem;             /* 5148.91px / 16 */
        transform: matrix(-0.99, 0.1, 0.1, 0.99, 0, 0);
    }
}

/* Desktop XL: 2560×1080px - Largest screens */
@media (min-width: 2560px) {
    /* Hero Section */


    .hero-bottle {
        height: 474.75px;
    }

    .hero-fruit-mulberry-2 {
        display: none;
    }

    .hero-fruit-mango {
        width: 16.1%;              
        height: 24.2rem;           
        left: 12.3%;               
        top: -5.75rem;             
        border-radius: 14.8rem;   
        transform: rotate(14.62deg);
    }

    .hero-fruit-bignay {
        width: 16.9%;             
        height: 38.79rem;          
        left: 67.6%;           
        top: -2.5rem;
    }

    .hero-fruit-dragonfruit {
        width: 15.4%;             
        height: 38.65rem;          
        left: -6.9%;                      
        top: 35.94rem;              
        transform: matrix(-0.95, -0.32, -0.32, 0.95, 0, 0);
    }

    .hero-fruit-mangosteen {
        width: 21.06%;
        height: 28.39rem;
        left: 84.47%;
        top: 42.98rem;              
    }

    .hero-fruit-mulberry {
        width: 15.05%;             
        height: 29.95rem;           
        left: 85.96%;               
        top: 13.4rem;                      
        transform: rotate(7.79deg);
    }

    .hero-fruit-calamansi {
        width: 13.67%;              
        height: 27.4rem;
        left: -5.08%;
        top: 6.06rem;               
        transform: matrix(0.47, -0.88, -0.9, -0.44, 0, 0);
    }

    /* Content Section */
    .content-fruit-calamansi {
        display: none;
    }

    .content-fruit-calamansi-2 {
        width: 19.31%;              
        height: 38.61rem;           
        left: 1.19%;                
        top: 86.5rem;            
        transform: rotate(-128.18deg);
    }

    .content-fruit-mango {
        width: 15.9%;                /* 258.97px / 1440 */
        height: 31.84rem;           /* 323.71px / 16 */
        left: 32.36%;               
        top: 127.28rem;             /* 1858.5px / 16 */
        transform: rotate(-29.31deg);
    }

    .content-fruit-mangosteen {
        width: 16.53%;              /* 268.94px / 1440 */
        height: 33.5rem;           /* 340.79px / 16 */
        left: 12.66%;               /* 256.75px / 1440 */
        top: 158.125rem;             /* 2322px / 16 */
    }

    .content-fruit-bugnay {
        width: 21.1%;              /* 304.25px / 1440 */
        height: 27.2rem;           /* 435.58px / 16 */
        left: 72.9%;               /* 1049.88px / 1440 */
        top: 100.6rem;              /* 1522.12px / 16 */
    }

    .content-fruit-mulberry {
        width: 13.7%;              /* 222.52px / 1440 */
        height: 27.73rem;           /* 281.97px / 16 */
        left: 83.9%;               /* 1197.25px / 1440 */
        top: 136.56rem;             /* 1945.65px / 16 */
        transform: rotate(20.01deg);
    }

    .content-fruit-dragonfruit {
        width: 16.7%;              
        height: 28.63rem;          
        left: -5.1%;               
        top: 131.81rem;            
    }

    /* Testimonial Section */
    .testimonial-calamansi-1 {
        width: 35.1%;            
        height: 70.2rem;           
        left: 0%;
        top: 245rem;
        transform: rotate(2.03deg);
    }

    .testimonial-calamansi-2 {
        width: 33.04%;            
        height: 66.1rem;           
        left: 76.4%;               
        top: 229.7rem;            
        transform: matrix(-1, 0.04, 0.04, 1, 0, 0);
    }

    .testimonial-calamansi-3 {
        width: 31%;           
        height: 62rem;            
        left: 50.4%;              
        top: 245.39rem;            
        transform: rotate(-48.45deg);
    }

    .testimonial-calamansi-4 {
        width: 31.3%;              
        height: 62.55rem;           
        left: 67.5%;               
        top: 198.5rem;             
        transform: rotate(2.03deg);
    }

    .testimonial-calamansi-5 {
        width: 21.67%;           
        height: 43.3rem;          
        left: 9.6%;                
        top: 219.96rem;            
        transform: matrix(-1, 0.04, 0.04, 1, 0, 0);
    }

    .testimonial-calamansi-6 {
        width: 34.1rem;            
        height: 42.6rem;         
        left: 30%;           
        top: 255.07rem;            
        transform: rotate(2.03deg);
    }
}

/* Desktop Large: 1920×1080px - Standard large desktop (base styles) */
@media (min-width: 1920px) and (max-width: 2559px) {
    /* Hero Section */

    .hero-bottle {
        height: 420.43px;
    }

    .hero-fruit-mulberry-2 {
        display: none;
    }

    .hero-fruit-mango {
        width: 16.1%;              /* 309.14px / 1920 */
        height: 24.2rem;           /* 386.43px / 16 */
        left: 12.3%;               /* 236.57px / 1920 */
        top: -5.75rem;             /* -92px / 16 */
        border-radius: 14.8rem;    /* 237.38px / 16 */
        transform: rotate(14.62deg);
    }

    .hero-fruit-bignay {
        width: 16.9%;              /* 325.14px / 1920 */
        height: 29.1rem;           /* 465.48px / 16 */
        left: 67.6%;               /* 1298.76px / 1920 */
        top: -2.5rem;              /* -40.08px / 16 */
    }

    .hero-fruit-dragonfruit {
        width: 16.6%;              /* 319.56px / 1920 */
        height: 31.4rem;           /* 501.78px / 16 */
        left: -6.7%;               /* -128px / 1920 */
        top: 38.98rem;              /* 497.75px / 16 */
        transform: matrix(-0.95, -0.32, -0.32, 0.95, 0, 0);
    }

    .hero-fruit-mangosteen {
        width: 21.06%;
        height: 28.39rem;
        left: 84.47%;
        top: 42.98rem;              
    }

    .hero-fruit-mulberry {
        width: 16.3%;              /* 312.64px / 1920 */
        height: 24.3rem;           /* 388.85px / 16 */
        left: 86.2%;               /* 1631.06px / 1920 */
        top: 10.6rem;              /* 166.13px / 16 */
        transform: rotate(7.79deg);
    }

    .hero-fruit-calamansi {
        width: 14.8%;              
        height: 22.24rem;
        left: -4.99%;
        top: 6.32rem;               /* 1.65% of 4981px = 82.19px / 16 */
        transform: matrix(0.47, -0.88, -0.9, -0.44, 0, 0);
    }

    /* Content Section */
    .content-fruit-calamansi-2 {
        width: 19.3%;              /* 369.79px / 1920 */
        height: 28.9rem;           /* 462.23px / 16 */
        left: 6.3%;                /* 120.94px / 1920 */
        top: 97.2rem;              /* 1555px / 16 */
        transform: rotate(-128.18deg);
    }

    .content-fruit-calamansi {
        display: none;
    }

    .content-fruit-mango {
        width: 15.9%;              /* 304.89px / 1920 */
        height: 23.8rem;           /* 381.12px / 16 */
        left: 37.4%;               /* 718px / 1920 */
        top: 127.7rem;             /* 2043px / 16 */
        transform: rotate(-29.31deg);
    }

    .content-fruit-mangosteen {
        width: 16.5%;              /* 316.63px / 1920 */
        height: 25.1rem;           /* 401.23px / 16 */
        left: 21.7%;               /* 417px / 1920 */
        top: 157.3rem;             /* 2517px / 16 */
    }

    .content-fruit-bugnay {
        width: 18.7%;              /* 358.2px / 1920 */
        height: 32.1rem;           /* 512.82px / 16 */
        left: 70.2%;               /* 1348.75px / 1920 */
        top: 103.9rem;             /* 1662.28px / 16 */
    }

    .content-fruit-mulberry {
        width: 13.6%;              /* 261.98px / 1920 */
        height: 20.7rem;           /* 331.97px / 16 */
        left: 84.9%;               /* 1631px / 1920 */
        top: 134.4rem;             /* 2151px / 16 */
        transform: rotate(20.01deg);
    }

    .content-fruit-dragonfruit {
        width: 16.7%;              
        height: 28.63rem;          
        left: -5.1%;               
        top: 131.81rem;            
    }

    /* Testimonial Section */
    .testimonial-calamansi-1 {
        width: 42.1rem;            /* 674.13px / 16 */
        height: 52.7rem;           /* 842.67px / 16 */
        left: -2%;                 /* -39px / 1920 */
        top: 250.99rem;            /* 4015.84px / 16 */
        transform: rotate(2.03deg);
    }

    .testimonial-calamansi-2 {
        width: 39.7rem;            /* 634.37px / 16 */
        height: 49.6rem;           /* 792.96px / 16 */
        left: 74.4%;               /* 1427.95px / 1920 */
        top: 239.53rem;            /* 3832.45px / 16 */
        transform: matrix(-1, 0.04, 0.04, 1, 0, 0);
    }

    .testimonial-calamansi-3 {
        width: 37.2rem;            /* 594.86px / 16 */
        height: 46.5rem;           /* 743.57px / 16 */
        left: 50.4%;               /* 832.84px / 1920 */
        top: 251.29rem;            /* 4020.64px / 16 */
        transform: rotate(-48.45deg);
    }

    .testimonial-calamansi-4 {
        width: 37.5rem;            /* 600.45px / 16 */
        height: 46.9rem;           /* 750.57px / 16 */
        left: 65.5%;               /* 1256.69px / 1920 */
        top: 216.13rem;            /* 3458px / 16 */
        transform: rotate(2.03deg);
    }

    .testimonial-calamansi-5 {
        width: 35.1rem;            /* 562.28px / 16 */
        height: 43.9rem;           /* 702.85px / 16 */
        left: 4.1%;                /* 78px / 1920 */
        top: 221.44rem;            /* 3543px / 16 */
        transform: matrix(-1, 0.04, 0.04, 1, 0, 0);
    }

    .testimonial-calamansi-6 {
        width: 25.6rem;            /* 409.21px / 16 */
        height: 32rem;             /* 511.52px / 16 */
        left: 27.9%;               /* 536.14px / 1920 */
        top: 258.55rem;            /* 4136.85px / 16 */
        transform: rotate(2.03deg);
    }
}

/* Desktop Medium: 1440×900px */
@media (min-width: 1440px) and (max-width: 1919px) {
    /* Hero Section */

    .hero-bottle {
        height: 331.73px;
    }
    

    .hero-fruit-mango {
        width: 16.9%;              /* 243.92px / 1440 */
        height: 19.1rem;           /* 304.9px / 16 */
        left: 11.3%;               /* 162.65px / 1440 */
        top: -4.3rem;              /* -69px / 16 */
        border-radius: 11.7rem;    /* 187.299px / 16 */
        transform: rotate(14.62deg);
    }

    .hero-fruit-bignay {
        width: 17.8%;              /* 256.54px / 1440 */
        height: 23rem;             /* 367.28px / 16 */
        left: 69.5%;               /* 1000.75px / 1440 */
        top: -1.75rem;             /* -28.03px / 16 */
    }

    .hero-fruit-dragonfruit {
        width: 18.95%;              /* 252.14px / 1440 */
        height: 26.78rem;           /* 395.92px / 16 */
        left: -5.8%;               /* -125px / 1440 */
        top: 24.6rem;              /* 396.33px / 16 */
        transform: matrix(-0.95, -0.32, -0.32, 0.95, 0, 0);
    }

    .hero-fruit-mangosteen {
        width: 27.73%;
        height: 29.46rem;
        left: 79.39%;
        top: 30.4rem;              
    }

    .hero-fruit-mulberry {
        width: 17.1%;              /* 246.68px / 1440 */
        height: 19.2rem;           /* 306.82px / 16 */
        left: 87.7%;               /* 1262.95px / 1440 */
        top: 8.4rem;               /* 134.67px / 16 */
        transform: rotate(7.79deg);
    }
    
    .hero-fruit-mulberry-2 {
        display: none;
    }

    .hero-fruit-calamansi {
        width: 16.18%;
        height: 17rem;
        left: -2.91%;
        top: 5.5rem;              
        transform: matrix(0.45, -0.89, -0.89, -0.46, 0, 0);
    }

    /* Content Section */
    .content-fruit-calamansi {
        display: none;
    }

    .content-fruit-calamansi-2 {
        width: 21.8%;              /* 314.09px / 1440 */
        height: 24.5rem;           /* 392.61px / 16 */
        left: 7.3%;                
        top: 96.6rem;            
        transform: rotate(-128.18deg);
    }

    .content-fruit-mango {
        width: 18%;                /* 258.97px / 1440 */
        height: 20.2rem;           /* 323.71px / 16 */
        left: 40.6%;               
        top: 136.2rem;             /* 1858.5px / 16 */
        transform: rotate(-29.31deg);
    }

    .content-fruit-mangosteen {
        width: 18.7%;              /* 268.94px / 1440 */
        height: 21.3rem;           /* 340.79px / 16 */
        left: 17.8%;               /* 256.75px / 1440 */
        top: 165.1rem;             /* 2322px / 16 */
    }

    .content-fruit-bugnay {
        width: 21.1%;              /* 304.25px / 1440 */
        height: 27.2rem;           /* 435.58px / 16 */
        left: 72.9%;               /* 1049.88px / 1440 */
        top: 100.6rem;              /* 1522.12px / 16 */
    }

    .content-fruit-mulberry {
        width: 15.5%;              /* 222.52px / 1440 */
        height: 17.6rem;           /* 281.97px / 16 */
        left: 85.1%;               /* 1197.25px / 1440 */
        top: 141.6rem;             /* 1945.65px / 16 */
        transform: rotate(20.01deg);
    }

    .content-fruit-dragonfruit {
        width: 16.7%;              
        height: 28.63rem;          
        left: -5.1%;               
        top: 131.81rem;            
    }

    /* Testimonial Section */
    .testimonial-calamansi-1 {
        width: 29.4rem;            
        height: 36.8rem;           
        left: 0%;
        top: 225.06rem;            
        transform: rotate(2.03deg);
    }

    .testimonial-calamansi-2 {
        width: 32.8rem;            
        height: 41rem;             
        left: 74.49%;               
        top: 212.11rem;             
        transform: matrix(-1, 0.04, 0.04, 1, 0, 0);
    }

    .testimonial-calamansi-3 {
        width: 30.7rem;            
        height: 38.4rem;           
        left: 48.39%;               
        top: 224.28rem;            
        transform: rotate(-48.45deg);
    }

    .testimonial-calamansi-4 {
        width: 31rem;             
        height: 38.8rem;           
        left: 64.7%;              
        top: 192.69rem;
        transform: rotate(2.03deg);
    }

    .testimonial-calamansi-5 {
        width: 24.6rem;            
        height: 30.7rem;           
        left: -1.91%;               
        top: 202.53rem;             
        transform: matrix(-1, 0.04, 0.04, 1, 0, 0);
    }

    .testimonial-calamansi-6 {
        width: 21.2rem;           
        height: 26.4rem;           
        left: 20.88%;               
        top: 229.57rem;       
        transform: rotate(2.03deg);
    }
}

/* Desktop Small: 1280×4619px */
@media (min-width: 1280px) and (max-width: 1439px) {
    /* Hero Section */

    .hero-bottle {
        height: 226.25px;
    }

    .hero-fruit-mango {
        width: 16.9%;              /* 216.42px / 1280 */
        height: 16.9rem;           /* 270.53px / 16 */
        left: 15.5%;               /* 199px / 1280 */
        top: -4.4rem;              /* -71px / 16 */
        border-radius: 10.4rem;    /* 166.183px / 16 */
        transform: rotate(14.62deg);
    }

    .hero-fruit-bignay {
        width: 17.8%;              /* 227.62px / 1280 */
        height: 20.4rem;           /* 325.87px / 16 */
        left: 68.8%;               /* 880px / 1280 */
        top: -3.6rem;              /* -57px / 16 */
    }

    .hero-fruit-dragonfruit {
        width: 17.5%;              /* 223.71px / 1280 */
        height: 22rem;             /* 351.28px / 16 */
        left: -8.8%;               /* -112px / 1280 */
        top: 26.9rem;              /* 430px / 16 */
        transform: matrix(-0.95, -0.32, -0.32, 0.95, 0, 0);
    }

    .hero-fruit-mangosteen {
        width: 27.65%;
        height: 22.48rem;
        left: 86.44%;
        top: 29.5rem;             
    }

    .hero-fruit-mulberry {
        width: 17.1%;              /* 218.87px / 1280 */
        height: 17rem;             /* 272.22px / 16 */
        left: 87.5%;               /* 1120.56px / 1280 */
        top: 7.5rem;               /* 119.49px / 16 */
        transform: rotate(7.79deg);
    }

    .hero-fruit-mulberry-2 {
        display: none;
    }

    .hero-fruit-calamansi {
        width: 21.3%;              /* (1 - (-6.91% + 89.75%)) * 1280 = 272.64px / 1280 */
        height: 15rem;
        left: -6.91%;
        right: 89.75%;
        top: 5.2rem;               /* 1.81% of 4619px = 83.6px / 16 */
        transform: matrix(0.43, -0.9, -0.87, -0.49, 0, 0);
    }

    /* Content Section */
    .content-fruit-calamansi-2 {
        width: 21%;                /* 268.33px / 1280 */
        height: 21rem;             /* 335.41px / 16 */
        left: 7.3%;                /* 93.82px / 1280 */
        top: 76.6rem;              /* 1224.91px / 16 */
        transform: rotate(-128.18deg);
    }

    .content-fruit-calamansi {
        top: 145.9rem;
    }

    .content-fruit-mango {
        width: 18%;                /* 229.77px / 1280 */
        height: 18rem;             /* 287.22px / 16 */
        left: 40.6%;               /* 378.52px / 1280 */
        top: 103.1rem;             /* 1648.97px / 16 */
        transform: rotate(-29.31deg);
    }

    .content-fruit-mangosteen {
        width: 24.7%;              /* 316px / 1280 */
        height: 25.1rem;           /* 401px / 16 */
        left: 17.8%;               /* 228px / 1280 */
        top: 128.8rem;             /* 2060px / 16 */
    }

    .content-fruit-bugnay {
        width: 21.1%;              /* 269.95px / 1280 */
        height: 24.2rem;           /* 386.47px / 16 */
        left: 72.8%;               /* 931.51px / 1280 */
        top: 84.4rem;              /* 1350.52px / 16 */
    }

    .content-fruit-mulberry {
        width: 15.4%;              /* 197.43px / 1280 */
        height: 15.6rem;           /* 250.18px / 16 */
        left: 83%;                 /* 1062.27px / 1280 */
        top: 107.9rem;             /* 1726.3px / 16 */
        transform: rotate(20.01deg);
    }

    .content-fruit-dragonfruit {
        width: 22.4%;              /* 287.17px / 1280 */
        height: 25.7rem;           /* 411.23px / 16 */
        left: -8.9%;               /* -113.57px / 1280 */
        top: 103.1rem;             /* 1648.97px / 16 */
        transform: matrix(-1, 0, 0, 1, 0, 0);
    }

    /* Testimonial Section */
    .testimonial-calamansi-1 {
        width: 26.1rem;            /* 418.03px / 16 */
        height: 32.7rem;           /* 522.53px / 16 */
        left: -4.1%;               /* -53px / 1280 */
        top: 220.79rem!important;            /* 3692.59px / 16 */
        transform: rotate(2.03deg);
    }

    .testimonial-calamansi-2 {
        width: 29.1rem;            /* 465.48px / 16 */
        height: 36.4rem;           /* 581.85px / 16 */
        left: 75%;                 /* 959.93px / 1280 */
        top: 215.30rem!important;            /* 3508.75px / 16 */
        transform: matrix(-1, 0.04, 0.04, 1, 0, 0);
    }

    .testimonial-calamansi-3 {
        width: 27.3rem;            /* 436.49px / 16 */
        height: 34.1rem;           /* 545.61px / 16 */
        left: 46%;                
        top: 230.10rem!important;            /* 3681.56px / 16 */
        transform: rotate(-48.45deg);
    }

    .testimonial-calamansi-4 {
        width: 27.5rem;            /* 440.6px / 16 */
        height: 34.4rem;           /* 550.75px / 16 */
        left: 65.2%;               /* 834.92px / 1280 */
        top: 194.9rem!important;            /* 3233px / 16 */
        transform: rotate(2.03deg);
    }

    .testimonial-calamansi-5 {
        width: 21.8rem;            /* 348.67px / 16 */
        height: 27.2rem;           /* 435.83px / 16 */
        left: -1.3%;               /* -16.23px / 1280 */
        top: 200.79rem!important;            /* 3372.71px / 16 */
        transform: matrix(-1, 0.04, 0.04, 1, 0, 0);
    }

    .testimonial-calamansi-6 {
        width: 18.8rem;            /* 300.27px / 16 */
        height: 23.5rem;           /* 375.34px / 16 */
        left: 21.5%;               /* 274.99px / 1280 */
        top: 234.79rem!important;            /* 3756.58px / 16 */
        transform: rotate(2.03deg);
    }
}

/* Tablet Landscape */
@media (min-width: 1024px) and (max-width: 1279px) {
    /* Hero Section */

    .hero-bottle {
        height: 226.25px;
    }

    .hero-fruit-mango {
        width: 22.8%;              /* 233.52px / 1024 */
        height: 18.2rem;           /* 291.9px / 16 */
        left: 14.9%;               /* 152.3px / 1024 */
        top: -4.2rem;              /* -67px / 16 */
        transform: rotate(5.63deg);
    }

    .hero-fruit-bignay {
        width: 22.1%;              /* 226px / 1024 */
        height: 20.3rem;           /* 324px / 16 */
        left: 62.6%;               /* 641px / 1024 */
        top: -3.2rem;              /* -51px / 16 */
    }

    .hero-fruit-dragonfruit {
        width: 17.5%;             
        height: 17.5rem;           
        left: -3.2%;               
        top: 29.3rem;             
        transform: matrix(-0.95, -0.32, -0.32, 0.95, 0, 0);
    }

    .hero-fruit-mangosteen {
        width: 26.5%;
        height: 16rem;
        left: 82.71%;
        top: 34.2rem;            
    }

    .hero-fruit-mulberry {
        width: 18.5%;              /* 189.63px / 1024 */
        height: 14.7rem;           /* 235.85px / 16 */
        left: 83.9%;               /* 859px / 1024 */
        top: 15.4rem;              /* 247px / 16 */
        transform: rotate(7.79deg);
    }

    .hero-fruit-mulberry-2, .hero-fruit-dragonfruit-2,  .hero-fruit-calamansi-1 {
        display: none;
    }

    .hero-fruit-calamansi {
        width: 20.2%;
        height: 15.72rem;
        left: -9.18%;
        top: 9rem;                
        transform: matrix(0.45, -0.89, -0.89, -0.46, 0, 0);
    }

    /* Content Section */
    .content-fruit-calamansi-2 {
        width: 31%;                /* 317.51px / 1024 */
        height: 24.8rem;           /* 396.88px / 16 */
        left: -5.8%;               /* -59px / 1024 */
        top: 103.3rem;              
        transform: none;
    }

    .content-fruit-calamansi {
        width: 28.9%;               
        height: 23.2rem;          
        left: 74.4%;               
        top: 181.2rem;
        transform: rotate(-15.82deg);              
    }

    .content-fruit-mango {
        width: 33%;                /* 337.92px / 1024 */
        height: 26.4rem;           /* 422.41px / 16 */
        left: -16.1%;              /* -165px / 1024 */
        top: 162.6rem;             /* 2602px / 16 */
        transform: rotate(-29.31deg);
    }

    .content-fruit-mangosteen {
        width: 35.7%;              /* 365.74px / 1024 */
        height: 30.4rem;           /* 487.03px / 16 */
        left: 16.6%;               /* 170px / 1024 */
        top: 192rem;               /* 3071px / 16 */
    }

    .content-fruit-bugnay {
        width: 31.9%;              /* 327.05px / 1024 */
        height: 29.3rem;           /* 468.22px / 16 */
        left: 72.3%;               /* 740px / 1024 */
        top: 101rem;               
    }

    .content-fruit-mulberry {
        width: 23.2%;              /* 237.56px / 1024 */
        height: 18.8rem;           /* 301.03px / 16 */
        left: 72.3%;               /* 740px / 1024 */
        top: 139.7rem;             /* 2235px / 16 */
        transform: rotate(21.61deg);
    }

    .content-fruit-dragonfruit {
        width: 24.8%;              /* 253.9px / 1024 */
        height: 22.7rem;           /* 363.58px / 16 */
        left: -10.1%;              /* -103px / 1024 */
        top: 126.6rem;             /* 2025px / 16 */
        transform: matrix(-0.96, -0.28, -0.28, 0.96, 0, 0);
    }

    /* Testimonial Section */
    .testimonial-calamansi-1 {
        width: 38.31%;  
        height: 30.6rem;          
        left: -5.7%;              
        top: 314.74rem;       
        transform: rotate(2.03deg);
    }

    .testimonial-calamansi-2 {
        width: 36.31%;          
        height: 29.05rem;          
        left: 75.39%;               
        top: 310.94rem;        
        transform: matrix(-1, 0.04, 0.04, 1, 0, 0);
    }

    .testimonial-calamansi-3 {
        width: 34.05%;         
        height: 27.2rem;           /* 435.85px / 16 */
        left: 52.09%;               /* 431px / 1024 */
        top: 318.88rem;            /* 5262px / 16 */
        transform: rotate(-48.45deg);
    }

    .testimonial-calamansi-4 {
        width: 34.37%;            
        height: 27.5rem;           /* 439.95px / 16 */
        left: 71.3%;               /* 730px / 1024 */
        top: 250.44rem;            /* 4807px / 16 */
        transform: rotate(2.03deg);
    }

    .testimonial-calamansi-5 {
        width: 33.74%;           
        height: 26.99rem;             /* 431.91px / 16 */
        left: -7.1%;               /* -73px / 1024 */
        top: 261.19rem;            /* 4819px / 16 */
        transform: matrix(-1, 0.04, 0.04, 1, 0, 0);
    }

    .testimonial-calamansi-6 {
        width: 28.1%;            
        height: 22.48rem;           /* 359.71px / 16 */
        left: 22.7%;               /* 232px / 1024 */
        top: 323.19rem;            /* 5331px / 16 */
        transform: rotate(2.03deg);
    }
}

/* Tablet Portrait: 768×1024px */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Hero Section */
    .hero-fruit-mango {
        width: 28.3%;              /* 217.24px / 768 */
        height: 17rem;             /* 271.56px / 16 */
        left: 18%;                 /* 138px / 768 */
        top: -1.3rem;              /* -21px / 16 */
        border-radius: 6.4rem;     /* 102.072px / 16 */
        transform: rotate(5.63deg);
    }

    .hero-fruit-bignay {
        width: 25.9%;              /* 199px / 768 */
        height: 17.8rem;           /* 285px / 16 */
        left: 57.7%;               /* 443px / 768 */
        top: -0.4rem;              /* -6px / 16 */
    }

    .hero-fruit-dragonfruit {
        width: 19.6%;              /* 150.49px / 768 */
        height: 14.8rem;           /* 236.3px / 16 */
        left: -9.1%;               /* -70px / 768 */
        top: 27.1rem;              /* 434px / 16 */
        transform: matrix(-0.95, -0.32, -0.32, 0.95, 0, 0);
    }

    .hero-fruit-mangosteen {
        width: 24.1%;
        height: 15.3rem;
        left: 83.57%;
        top: 31.3rem;             
    }

    .hero-fruit-mulberry {
        width: 27.4%;              /* 210.17px / 768 */
        height: 16.3rem;           /* 261.4px / 16 */
        left: 79.8%;               /* 613px / 768 */
        top: 10.9rem;              /* 175px / 16 */
        transform: rotate(7.79deg);
    }

    .hero-fruit-mulberry-2, .hero-fruit-dragonfruit-2,  .hero-fruit-calamansi-1 {
        display: none;
    }


    .hero-fruit-calamansi {
        width: 20.6%;
        height: 11.8rem;
        left: -10.32%;
        right: 89.71%;
        top: 9.1rem;               /* 2.77% of 5262px = 145.76px / 16 */
        transform: matrix(0.46, -0.89, -0.89, -0.45, 0, 0);
    }

    /* Content Section */
    .content-fruit-calamansi {
        width: 31.3%;              /* 240.73px / 768 */
        height: 18.8rem;           /* 300.91px / 16 */
        left: -7.6%;               /* -58.63px / 768 */
        top: 93.9rem;              /* 1502.29px / 16 */
    }
    .content-fruit-calamansi-2 {
        width: 29.3%;              /* 240.73px / 768 */
        height: 17.6rem;           /* 300.91px / 16 */
        left: 73.4%;               /* -58.63px / 768 */
        top: 160.6rem;              /* 1502.29px / 16 */
    }

    .content-fruit-mango {
        width: 33.4%;              /* 256.21px / 768 */
        height: 20rem;             /* 320.26px / 16 */
        left: -18.1%;              /* -139px / 768 */
        top: 146.5rem;             /* 2343.88px / 16 */
        transform: matrix(-0.93, 0.36, 0.36, 0.93, 0, 0);
    }

    .content-fruit-mangosteen {
        width: 36.1%;              /* 277.3px / 768 */
        height: 23.1rem;           /* 369.26px / 16 */
        left: 15%;                 /* 114.99px / 768 */
        top: 168.7rem;             /* 2699.47px / 16 */
    }

    .content-fruit-bugnay {
        width: 32.3%;              /* 247.96px / 768 */
        height: 22.2rem;           /* 355px / 16 */
        left: 71.2%;               /* 547.16px / 768 */
        top: 92.2rem;              /* 1475px / 16 */
    }

    .content-fruit-mulberry {
        width: 23.4%;              /* 180.11px / 768 */
        height: 14.3rem;           /* 228.24px / 16 */
        left: 71.2%;               /* 547.16px / 768 */
        top: 129.1rem;             /* 2065.62px / 16 */
        transform: rotate(21.61deg);
    }

    .content-fruit-dragonfruit {
        width: 25.1%;              /* 192.5px / 768 */
        height: 17.2rem;           /* 275.66px / 16 */
        left: -12%;                /* -91.99px / 768 */
        top: 119.2rem;             /* 1906.41px / 16 */
        transform: matrix(-0.96, -0.28, -0.28, 0.96, 0, 0);
    }

    /* Testimonial Section */
    .testimonial-calamansi-1 {
        width: 44.96%;           
        height: 27rem;          
        left: -11.5%;      
        top: 329.5rem;    
        transform: rotate(2.03deg);
    }

    .testimonial-calamansi-2 {
        width: 42.6%;           
        height: 25.6rem;          
        left: 83.7%;        
        top: 326.2rem; 
        transform: matrix(-1, 0.04, 0.04, 1, 0, 0);
    }

    .testimonial-calamansi-3 {
        width: 39.96%;        
        height: 23.98rem;    
        left: 54.6%;              
        top: 333.2rem;
        transform: rotate(-48.45deg);
    }

    .testimonial-calamansi-4 {
        width: 40.34%;           
        height: 24.2rem;          
        left: 78.9%;        
        top: 308.1rem;             
        transform: rotate(2.03deg);
    }

    .testimonial-calamansi-5 {
        width: 39.6%;        
        height: 23.8rem;          
        left: -13.2%;             
        top: 308.8rem;      
        transform: matrix(-1, 0.04, 0.04, 1, 0, 0);
    }

    .testimonial-calamansi-6 {
        width: 32.98%;
        height: 19.8rem;
        left: 21.8%;
        top: 337rem;
        transform: rotate(2.03deg);
    }
}

/* ============================================
   AGE VERIFICATION MODAL
   ============================================ */
.age-verification-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.age-verification-modal.show {
    opacity: 1;
    visibility: visible;
}

.age-verification-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(8px);
}

.age-verification-content {
    position: relative;
    background-color: var(--cream);
    background-image: url("assets/backgrounds/old-wall.png");
    padding: 3rem 2.5rem;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    z-index: 10001;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.age-verification-logo {
    width: 180px;
    height: auto;
    margin: 0 auto 1.5rem;
    display: block;
}

.age-verification-content h2 {
    font-family: 'Fondamento', cursive;
    font-size: 2rem;
    color: var(--dark-green);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.age-verification-content p {
    font-size: 1rem;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.age-verification-question {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--dark-green);
}

.age-verification-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.age-btn {
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    padding: 1rem 3rem;
    border: 2px solid var(--dark-green);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 140px;
}

.age-yes {
    background-color: var(--dark-green);
    color: var(--cream);
}

.age-yes:hover {
    background-color: var(--sage-green);
    border-color: var(--sage-green);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(62, 84, 37, 0.3);
}

.age-no {
    background-color: transparent;
    color: var(--dark-green);
}

.age-no:hover {
    background-color: var(--dark-green);
    color: var(--cream);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(62, 84, 37, 0.3);
}

.age-verification-disclaimer {
    font-size: 0.75rem;
    color: var(--charcoal);
    margin-bottom: 0;
    opacity: 0.8;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .age-verification-content {
        padding: 2rem 1.5rem;
        max-width: 90%;
    }

    .age-verification-logo {
        width: 140px;
        margin-bottom: 1rem;
    }

    .age-verification-content h2 {
        font-size: 1.5rem;
    }

    .age-verification-question {
        font-size: 1.125rem;
    }

    .age-verification-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }

    .age-btn {
        font-size: 1rem;
        padding: 0.875rem 2rem;
        width: 100%;
    }
}

/* ============================================
   ABOUT HISTORY SECTION (for Contact Page)
   ============================================ */
.about-history {
    background-color: #3e5425;
    background-image: url("assets/backgrounds/xv.png");
    padding: 80px 0;
    position: relative;
}

.about-history .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.about-history .section-title {
    font-family: 'Fondamento', cursive;
    font-size: 48px;
    color: var(--cream);
    text-align: center;
    margin-bottom: 60px;
    font-weight: 400;
}

.history-content {
    display: block;
    max-width: 1000px;
    margin: 0 auto;
}

.history-text {
    text-align: left;
    margin-bottom: 40px;
}

.history-subtitle {
    font-family: 'Fondamento', cursive;
    font-size: 28px;
    color: var(--gold-cta);
    margin-bottom: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.history-description {
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px;
    line-height: 1.8;
    color: var(--cream);
    margin-bottom: 25px;
}

.history-description strong {
    color: var(--gold-cta);
    font-weight: 600;
}

/* ============================================
   AWARDS BANNER
   ============================================ */
.awards-banner {
    background: rgba(199, 151, 69, 0.15);
    border: 2px solid var(--gold-cta);
    border-radius: 12px;
    padding: 40px;
    margin: 50px auto;
    max-width: 900px;
    text-align: center;
}

.awards-title {
    font-family: 'Fondamento', cursive;
    font-size: 32px;
    color: var(--gold-cta);
    margin-bottom: 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.awards-images {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.award-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 20px;
    border-radius: 8px;
    background: rgba(241, 235, 225, 0.1);
}

.award-badge:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(199, 151, 69, 0.3);
}

.award-badge img {
    max-width: 300px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 15px;
}

.award-caption {
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    color: var(--gold-cta);
    font-weight: 600;
    text-align: center;
    margin: 0;
}

.awards-description {
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    color: var(--cream);
    font-style: italic;
    line-height: 1.6;
    margin: 0;
}

/* ============================================
   ANIMATED TIMELINE DIAGRAM
   ============================================ */
.timeline-diagram {
    position: relative;
    max-width: 1000px;
    margin: 0px;
    padding: 0px;
    min-height: 400px;
}

.timeline-line {
    position: absolute;
    top: 18%;
    left: 50px;
    right: 50px;
    height: 3px;
    background: var(--gold-cta);
}

.timeline-events {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    padding: 0 20px;
    height: 100%;
}

.timeline-event {
    position: relative;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    flex: 1;
    max-width: 190px;
    height: auto;
    min-height: 400px;
}

.timeline-event.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.timeline-event:nth-child(1).animate-in { transition-delay: 0.2s; }
.timeline-event:nth-child(2).animate-in { transition-delay: 0.4s; }
.timeline-event:nth-child(3).animate-in { transition-delay: 0.6s; }
.timeline-event:nth-child(4).animate-in { transition-delay: 0.8s; }
.timeline-event:nth-child(5).animate-in { transition-delay: 1.0s; }

/* Year positioned at top */
.timeline-year {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--gold-cta);
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba(199, 151, 69, 0.1);
    padding: 8px 12px;
    border-radius: 20px;
    border: 2px solid var(--gold-cta);
    white-space: nowrap;
}

/* Circle positioned at 18% (on the line) */
.timeline-circle {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gold-cta);
    z-index: 3;
    border: 3px solid var(--dark-green);
}

/* Content positioned below the circle */
.timeline-content {
    position: absolute;
    top: 26%;
    left: 0;
    right: 0;
    background: rgba(199, 151, 69, 0.1);
    padding: 18px 14px;
    border-radius: 20px;
    border: 2px solid rgba(199, 151, 69, 0.3);
    min-height: auto;
}

.timeline-content h4 {
    font-family: 'Noto Sans', sans-serif;
    font-size: 17px;
    color: var(--gold-cta);
    margin-bottom: 10px;
    font-weight: 600;
    line-height: 1.3;
}

.timeline-content p {
    font-family: 'Noto Sans', sans-serif;
    font-size: 13px;
    color: var(--cream);
    line-height: 1.6;
    margin: 0;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS - HISTORY SECTION
   ============================================ */
@media (max-width: 768px) {
    .about-history {
        padding: 60px 0;
    }

    .about-history .container {
        padding: 0 20px;
    }

    .about-history .section-title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .timeline-diagram {
        display: none;
    }

    /* Awards banner tablet optimization */
    .awards-banner {
        padding: 30px 20px;
        margin: 35px auto;
    }

    .awards-title {
        font-size: 26px;
        margin-bottom: 25px;
    }

    .awards-images {
        gap: 25px;
        flex-direction: column;
    }

    .award-badge img {
        max-width: 220px;
    }

    .award-caption {
        font-size: 14px;
    }

    .awards-description {
        font-size: 13px;
    }

    .history-subtitle {
        font-size: 22px;
    }

    .history-description {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .about-history .section-title {
        font-size: 28px;
    }

    .timeline-diagram {
        min-height: 350px;
    }

    .timeline-event {
        max-width: 110px;
        height: auto;
        min-height: 350px;
    }

    .timeline-year {
        font-size: 10px;
        padding: 5px 8px;
    }

    .timeline-content {
        padding: 14px 10px;
        min-height: auto;
        top: 26%;
    }

    .timeline-content h4 {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .timeline-content p {
        font-size: 10.5px;
        line-height: 1.5;
    }

    /* Awards banner mobile optimization */
    .awards-banner {
        padding: 25px 15px;
        margin: 30px auto;
    }

    .awards-title {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .awards-images {
        flex-direction: column;
        gap: 25px;
    }

    .award-badge {
        padding: 15px;
    }

    .award-badge img {
        max-width: 200px;
    }

    .award-caption {
        font-size: 13px;
    }

    .awards-description {
        font-size: 12px;
    }

    .history-subtitle {
        font-size: 18px;
    }

    .history-description {
        font-size: 14px;
    }
}

/* Small desktop / Tablet optimization (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .timeline-diagram {
        margin: 40px auto;
        padding: 30px 0;
        min-height: 380px;
    }

    .timeline-event {
        max-width: 165px;
        height: auto;
        min-height: 380px;
    }

    .timeline-year {
        font-size: 13px;
        padding: 7px 11px;
    }

    .timeline-content {
        padding: 16px 12px;
        min-height: auto;
        top: 26%;
    }

    .timeline-content h4 {
        font-size: 15px;
        margin-bottom: 9px;
    }

    .timeline-content p {
        font-size: 12.5px;
        line-height: 1.55;
    }

    .timeline-circle {
        width: 18px;
        height: 18px;
    }

    /* Awards banner small desktop optimization */
    .awards-banner {
        padding: 35px 25px;
        margin: 45px auto;
    }

    .awards-title {
        font-size: 28px;
    }

    .awards-images {
        gap: 30px;
    }

    .award-badge img {
        max-width: 250px;
    }

    .award-caption {
        font-size: 15px;
    }

    .awards-description {
        font-size: 13px;
    }
}

/*instagram grid - homepage*/
#instagram {
  padding: 4rem 0;
  margin: 30px;
}
#instagram h2 {
  margin-bottom: 2rem;
  text-align: center;
}
.ig-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.ig-grid a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}
.ig-grid img,
.ig-grid video {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
/* Hover effect */
.ig-grid a:hover img,
.ig-grid a:hover video {
  transform: scale(1.05);
}