/* CSS for Apple.com Navbar Clone */

:root {
    --nav-height: 44px;
    --nav-bg: rgba(251, 251, 253, 0.8);
    --nav-bg-dark: rgba(22, 22, 23, 0.8);
    --nav-text: #1d1d1f;
    --nav-text-dark: #f5f5f7;
    --nav-font-size: 12px;
    --nav-item-spacing: 30px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.noscroll {
    overflow: hidden !important;
    height: 100vh !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: #fbfbfd;
    color: #1d1d1f;
    -webkit-font-smoothing: antialiased;
}

.main, main {
    padding-top: 44px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Navbar container */
/* Ensure the navbar container is on top but doesn't block underlying content */
#app, .LayoutApp_app__HmVQW {
    position: relative !important;
    z-index: 999999 !important;
    pointer-events: none !important;
}

#app > div:first-of-type,
.LayoutApp_app__HmVQW > div:first-of-type {
    position: static !important;
    pointer-events: none !important;
}

.global-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--nav-height) !important;
    background-color: var(--nav-bg) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    z-index: 9999999 !important;
    transition: background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1) !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
}

.global-nav.nav-active {
    background-color: rgba(251, 251, 253, 1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 1000001 !important;
}

.nav-content {
    max-width: 1260px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    height: 100% !important;
    display: block !important;
}

.nav-list {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    list-style: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.nav-item {
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-link {
    color: var(--nav-text) !important;
    text-decoration: none !important;
    font-size: var(--nav-font-size) !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    opacity: 0.8 !important;
    transition: opacity 0.2s cubic-bezier(0.28, 0.11, 0.32, 1) !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    border: none !important;
    background: transparent !important;
}

.nav-link:hover {
    opacity: 1 !important;
}

.nav-item svg {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    shape-rendering: geometricPrecision !important;
}

.nav-item-apple .nav-link {
    padding-left: 0 !important;
    padding-right: 12px !important;
}

.nav-item-search .nav-link,
.nav-item-bag .nav-link {
    padding: 0 12px !important;
}

/* Dropdown styling */
.nav-dropdown {
    position: absolute !important;
    top: var(--nav-height) !important;
    left: 0 !important;
    width: 100% !important;
    background-color: #fbfbfd !important;
    height: 0;
    overflow: hidden !important;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.6, 1) !important;
    z-index: 999999999 !important;
    pointer-events: auto !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

.globalnav-curtain {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.4) !important;
    z-index: 99999998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.6, 1) !important;
    pointer-events: none !important;
}

.nav-active .globalnav-curtain {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


.dropdown-content {
    max-width: 1024px;
    margin: 0 auto;
    padding: 40px 22px;
    opacity: 0;
    transition: opacity 0.3s;
}

.dropdown-section {
    display: flex;
    gap: 80px;
}

.dropdown-column h3 {
    font-size: 12px;
    color: #86868b;
    margin-bottom: 15px;
    font-weight: 400;
}

.dropdown-column ul {
    list-style: none;
}

.dropdown-column li {
    margin-bottom: 10px;
}

.dropdown-column li a {
    color: #1d1d1f;
    text-decoration: none;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.015em;
    transition: color 0.2s;
}

.dropdown-column li a:hover {
    color: #06c;
}

/* Mobile Menu Button - Hidden on desktop */
.nav-item-menu {
    display: none !important;
}

/* Mobile Menu Overlay - Hidden on desktop */
.nav-mobile {
    display: none !important;
}

.menu-icon {
    width: 18px;
    height: 12px;
    position: relative;
    cursor: pointer;
}

.line {
    position: absolute;
    width: 100%;
    height: 1.2px;
    background-color: var(--nav-text) !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), top 0.2s, bottom 0.2s;
}

.line-1 {
    top: 0;
}

.line-2 {
    bottom: 0;
}

.global-nav.nav-open .line-1 {
    top: 5px;
    transform: rotate(45deg);
}

.global-nav.nav-open .line-2 {
    bottom: 5px;
    transform: rotate(-45deg);
}

/* Hero Section */
.hero {
    margin-top: var(--nav-height);
    background-color: #000;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    padding-top: 50px;
}

.hero-content h1 {
    font-size: 56px;
    font-weight: 600;
    margin-bottom: 6px;
}

.hero-content h2 {
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 18px;
}

.cta {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.cta .link {
    color: #2997ff;
    text-decoration: none;
    font-size: 21px;
}

.cta .link:hover {
    text-decoration: underline;
}

/* Dark mode for certain sections if needed */
.global-nav.nav-dark {
    background-color: var(--nav-bg-dark);
    --nav-text: var(--nav-text-dark);
}

@media (max-width: 834px) {
    .nav-content {
        max-width: none !important;
        padding: 0 8px !important;
        /* Tighter padding for mobile header */
    }

    .nav-list {
        display: flex !important;
        justify-content: flex-end !important;
        /* Align icons to the right */
        align-items: center !important;
        padding: 0 !important;
    }

    .nav-item-apple {
        margin-right: auto !important;
        /* Push logo to the far left */
    }

    /* Element Visibility */
    .nav-item {
        display: none !important;
    }

    .nav-item-apple,
    .nav-item-search,
    .nav-item-bag,
    .nav-item-menu {
        display: flex !important;
    }

    .nav-item-apple .nav-link,
    .nav-item-search .nav-link,
    .nav-item-bag .nav-link,
    .nav-item-menu .nav-link {
        padding: 0 12px !important;
    }

    /* Mobile Menu Overlay */
    .nav-mobile {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background-color: #ffffff !important;
        z-index: 9999 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s !important;
        padding-top: 80px !important;
    }

    .global-nav.nav-open .nav-mobile {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .nav-mobile-close {
        position: absolute !important;
        top: 15px !important;
        right: 22px !important;
        cursor: pointer !important;
        color: #1d1d1f !important;
        z-index: 10000 !important;
    }

    .nav-mobile-list {
        list-style: none !important;
        padding: 0 40px !important;
        transform: translateY(-20px) !important;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .global-nav.nav-open .nav-mobile-list {
        transform: translateY(0) !important;
    }

    .nav-mobile-item {
        border-bottom: none !important;
        overflow: hidden !important;
    }

    .nav-mobile-link {
        display: block !important;
        padding: 12px 0 !important;
        font-size: 32px !important;
        font-weight: 600 !important;
        color: #1d1d1f !important;
        text-decoration: none !important;
        opacity: 0 !important;
        transform: translateY(10px) !important;
        transition: opacity 0.4s, transform 0.4s !important;
        letter-spacing: -0.015em !important;
    }

    .global-nav.nav-open .nav-mobile-link {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* Staggered animation for links */
    .global-nav.nav-open .nav-mobile-item:nth-child(1) .nav-mobile-link {
        transition-delay: 0.1s !important;
    }

    .global-nav.nav-open .nav-mobile-item:nth-child(2) .nav-mobile-link {
        transition-delay: 0.15s !important;
    }

    .global-nav.nav-open .nav-mobile-item:nth-child(3) .nav-mobile-link {
        transition-delay: 0.2s !important;
    }

    .global-nav.nav-open .nav-mobile-item:nth-child(4) .nav-mobile-link {
        transition-delay: 0.25s !important;
    }

    .global-nav.nav-open .nav-mobile-item:nth-child(5) .nav-mobile-link {
        transition-delay: 0.3s !important;
    }

    .global-nav.nav-open .nav-mobile-item:nth-child(6) .nav-mobile-link {
        transition-delay: 0.35s !important;
    }

    .global-nav.nav-open .nav-mobile-item:nth-child(7) .nav-mobile-link {
        transition-delay: 0.4s !important;
    }

    /* Adjust navbar during open state */
    .global-nav.nav-open {
        background-color: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.noscroll {
        overflow: hidden !important;
    }
}

/* ChapterNav Vertical Spacing Overrides */
#chapternav {
    padding-top: 20px !important;
    padding-bottom: 60px !important;
}

/* ChapterNav Overrides for LipaGas Custom Icons */
.chapternav-item,
.product-wrap {
    width: auto !important;
    min-width: 140px !important;
    padding: 0 20px !important;
}

.product-image,
.product-image picture {
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    justify-content: center !important;
}

.product-image img {
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
}

/* Operating System Tagline Section */
#bulk-supply-section {
    background-color: #fff !important;
    padding-top: 0px !important;
    padding-bottom: 100px !important;
    font-family: "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    position: relative !important;
    z-index: 10 !important;
}

#bulk-supply-section .viewport-content {
    max-width: 980px !important;
    margin: 0 auto !important;
    padding: 0 22px !important;
}

#bulk-supply-section h2.index-title {
    font-size: 80px !important;
    line-height: 1.07143 !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
    color: #1d1d1f !important;
    margin: 0 !important;
}

@media (max-width: 734px) {
    #bulk-supply-section h2.index-title {
        font-size: 40px !important;
    }
}

/* Accordion Section Refinement - EXACT Apple Specs */
/* Accordion Section Refinement - EXACT Apple Specs */
.section-image-accordion .viewport-content {
    max-width: 1260px !important;
    margin-inline-start: auto !important;
    margin-inline-end: auto !important;
    width: 87.5% !important;
    padding-top: 112px !important;
    padding-bottom: 112px !important;
}

.section-image-accordion .card-container .card {
    background-color: rgb(245, 245, 247) !important;
    border-radius: 18px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.section-image-accordion .accordion {
    width: 42% !important;
    flex-shrink: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 60px 8.3333333333% 60px 8.3333333333% !important;
    z-index: 2 !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.section-image-accordion .accordion-item {
    border-top: 1px solid rgb(210, 210, 215) !important;
    width: 100% !important;
}

.section-image-accordion .accordion-item:first-child {
    border-top: none !important;
}

.section-image-accordion .accordion-button {
    font-size: 28px !important;
    line-height: 1.1428571429 !important;
    font-weight: 600 !important;
    letter-spacing: .007em !important;
    padding: 22px 0 !important;
    color: rgb(29, 29, 31) !important;
    width: 100% !important;
    text-align: left !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
}

.section-image-accordion .accordion-paragraph-text {
    font-size: 17px !important;
    line-height: 1.4705882353 !important;
    font-weight: 400 !important;
    letter-spacing: -0.022em !important;
    margin-top: 0.8em !important;
    padding-bottom: 24px !important;
    color: rgb(29, 29, 31) !important;
}

/* Apple's EXACT accordion image layout — verified from live computed styles */
/* Container: flex-grow:1, 0-height, centered, overflow:visible */
.section-image-accordion .image-container-large {
    display: flex !important;
    position: relative !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 0 !important;
    flex-grow: 1 !important;
    pointer-events: none !important;
    overflow: visible !important;
}

/* Picture: absolute, max-width:100% clamps to container width (~730px) */
.section-image-accordion .image-container-large picture {
    position: absolute !important;
    max-width: 100% !important;
    transition: opacity 200ms ease-in-out 0s !important;
    display: block !important;
}

/* Hidden pictures */
.section-image-accordion .image-container-large picture.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Img: constrained to Apple's logical display dimensions */
/* Custom images are 2× retina — must size to logical px to match Apple layout */
.section-image-accordion .image-container-large img {
    display: block !important;
}

/* Mac / screens-both: Apple logical size 1052×632px */
.section-image-accordion .image-container-large picture.overview-augment-mac img {
    width: 1052px !important;
    height: 632px !important;
}

/* Watch / holding-phone: Apple logical size 497×784px */
.section-image-accordion .image-container-large picture.overview-augment-watch img {
    width: 497px !important;
    height: 784px !important;
}

/* AirPods / rider-man-app: Apple logical size 509×784px */
.section-image-accordion .image-container-large picture.overview-augment-airpods img {
    width: 509px !important;
    height: 784px !important;
}

@media (max-width: 1068px) {
    .section-image-accordion .card-container .card {
        display: block !important;
        padding: 40px 20px !important;
    }

    .section-image-accordion .accordion {
        width: 100% !important;
    }

    .section-image-accordion .image-container-large {
        display: none !important;
    }
}