/* ===========================================
   MOBILE RESPONSIVE STYLES
   Comprehensive mobile audit fixes (375px - 428px)
   Goal: Make mobile feel as spacious and premium as desktop
   =========================================== */

/* ===========================================
   GLOBAL MOBILE UTILITIES
   =========================================== */

/* Prevent horizontal overflow */
html,
body {
    overflow-x: hidden;
}

/* Smooth scrolling with touch support */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Text rendering optimization */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Safe area insets for notched phones */
@supports (padding: max(0px)) {
    .section:first-of-type {
        padding-top: max(var(--space-3xl), env(safe-area-inset-top));
    }

    .footer {
        padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom));
    }
}

/* Minimum tap target sizes */
@media (max-width: 768px) {

    button,
    a,
    [role="button"],
    .accordion__trigger,
    .accordion summary,
    .carousel-arrow,
    .nav-arrow,
    .btn,
    .qty-btn {
        min-height: 44px;
    }

    /* Links in navigation need width too */
    .site-header__link,
    .footer__links a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ===========================================
   BASE CONTAINER PADDING
   Content sits too close to screen edges - fix with generous padding
   =========================================== */

@media (max-width: 768px) {

    .container,
    .section>.container,
    [class*="container"] {
        padding-left: var(--space-lg);
        /* 24px minimum from edges */
        padding-right: var(--space-lg);
    }

    /* Extra breathing room for main content areas */
    .hero__content,
    .section-content,
    .legal-page,
    .checkout-main {
        padding-left: var(--space-lg);
        padding-right: var(--space-lg);
    }
}

@media (max-width: 428px) {

    .container,
    .section>.container,
    [class*="container"] {
        padding-left: 1.25rem;
        /* 20px minimum */
        padding-right: 1.25rem;
    }

    .hero__content,
    .section-content,
    .legal-page,
    .checkout-main {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* ===========================================
   SECTION VERTICAL SPACING
   Sections feel stacked on top of each other - add breathing room
   =========================================== */

@media (max-width: 768px) {
    .section {
        padding-top: var(--space-3xl);
        /* 64px */
        padding-bottom: var(--space-3xl);
    }

    .section--tight {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }

    .section--spacious {
        padding-top: var(--space-4xl);
        padding-bottom: var(--space-4xl);
    }

    .section__header {
        margin-bottom: var(--space-xl);
    }
}

/* ===========================================
   TYPOGRAPHY SCALING
   Refined mobile type scale for readability
   =========================================== */

@media (max-width: 768px) {

    h1,
    .hero__title {
        font-size: clamp(2rem, 8vw, 2.75rem);
        line-height: 1.15;
        letter-spacing: -0.02em;
    }

    h2,
    .section__title {
        font-size: clamp(1.75rem, 6vw, 2.25rem);
        line-height: 1.2;
    }

    h3 {
        font-size: clamp(1.25rem, 4vw, 1.5rem);
        line-height: 1.25;
    }

    p,
    .body-text {
        font-size: 1rem;
        line-height: 1.7;
    }

    .text-sm,
    .caption,
    .text-small {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .lead,
    .lead-statement {
        font-size: var(--text-lg);
        line-height: 1.5;
    }
}

/* ===========================================
   HERO SECTION (index.html)
   =========================================== */

@media (max-width: 768px) {
    .hero {
        min-height: 100svh;
        /* Use svh for mobile viewport */
        padding-top: var(--space-3xl);
        /* Clear nav + breathing room */
        padding-bottom: var(--space-xl);
    }

    .hero__content {
        text-align: center;
        padding: 0 var(--space-md);
    }

    .hero__title {
        margin-bottom: var(--space-lg);
    }

    .hero__subtitle {
        max-width: 32ch;
        margin: 0 auto var(--space-xl);
        font-size: var(--text-base);
    }

    .hero__divider {
        margin: var(--space-lg) auto;
    }

    .hero__scroll {
        position: absolute;
        bottom: var(--space-xl);
        left: 50%;
        transform: translateX(-50%);
    }

    /* Legacy scroll indicator */
    .scroll-indicator {
        position: absolute;
        bottom: var(--space-xl);
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ===========================================
   COMPARISON SECTION (index.html)
   Two-panel comparison stacks with proper spacing
   =========================================== */

@media (max-width: 768px) {
    .label-comparison {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
    }

    .label-panel {
        padding: var(--space-lg);
        margin: 0;
    }

    .label-panel__title {
        margin-bottom: var(--space-md);
        font-size: var(--text-sm);
    }

    .label-panel .supplement-facts {
        padding: var(--space-md);
    }

    .label-panel .supplement-facts__row {
        padding: var(--space-sm) 0;
        font-size: var(--text-sm);
    }

    .label-caption {
        margin-top: var(--space-md);
        font-size: var(--text-sm);
    }
}

/* ===========================================
   70% STAT SECTION (index.html)
   Large number needs proper scaling and padding
   =========================================== */

@media (max-width: 768px) {
    .stat-callout {
        padding: var(--space-2xl) var(--space-lg) !important;
        margin: var(--space-xl) 0 !important;
    }

    .stat-callout__number {
        font-size: clamp(4rem, 18vw, 7rem) !important;
    }

    .stat-callout__label {
        font-size: var(--text-base) !important;
        padding: 0 var(--space-md);
        max-width: 30ch !important;
        margin: var(--space-md) auto 0 !important;
    }

    /* Closing thought text */
    .section--loophole .closing-thought {
        padding: 0 var(--space-lg);
        max-width: 40ch;
        margin: var(--space-lg) auto 0;
    }
}

/* ===========================================
   DOSE COMPARISON BARS (index.html)
   =========================================== */

@media (max-width: 768px) {
    .dose-comparison {
        margin-top: var(--space-lg);
    }

    .dose-bar {
        margin-bottom: var(--space-md);
    }

    .dose-bar__label {
        font-size: var(--text-sm);
        margin-bottom: var(--space-sm);
    }

    .dose-bar__track {
        height: 28px;
    }

    .dose-bar__fill {
        font-size: var(--text-xs);
        padding-left: var(--space-sm);
    }
}

/* ===========================================
   STANDARD LIST / CHECKLIST (index.html)
   =========================================== */

@media (max-width: 768px) {
    .standard-list {
        padding: 0 var(--space-md);
        margin: var(--space-lg) auto;
    }

    .standard-list li {
        padding: var(--space-md) 0;
        font-size: var(--text-base);
        gap: var(--space-md);
    }

    .checklist-container {
        padding: 0 var(--space-md);
    }
}

/* ===========================================
   CTA SECTIONS
   =========================================== */

@media (max-width: 768px) {
    .cta-section {
        padding: var(--space-2xl) var(--space-lg);
    }

    .cta-tight {
        padding: var(--space-lg);
        margin-top: var(--space-lg);
    }

    .closing-line {
        font-size: clamp(1.5rem, 5vw, 2rem);
        margin-bottom: var(--space-md);
    }

    .btn--primary,
    .btn--secondary {
        padding: var(--space-md) var(--space-xl);
        width: 100%;
        max-width: 300px;
    }
}

/* ===========================================
   PRODUCTS PAGE - HERO
   =========================================== */

@media (max-width: 768px) {
    .products-hero {
        padding: var(--space-xl) var(--space-lg) var(--space-3xl);
    }

    .products-hero .page-title {
        font-size: clamp(2.5rem, 10vw, 4rem);
        margin-bottom: var(--space-md);
    }

    .hero__title--monumental {
        font-size: clamp(3rem, 12vw, 5rem);
    }

    .tagline--spaced {
        letter-spacing: 0.15em;
        font-size: var(--text-xs);
    }

    .subheadline--editorial {
        max-width: 100%;
        font-size: var(--text-base);
        padding: 0 var(--space-sm);
    }
}

/* ===========================================
   PRODUCT CARDS (products.html)
   =========================================== */

@media (max-width: 768px) {
    .product-card {
        padding: var(--space-lg);
        margin-bottom: var(--space-lg);
    }

    .product-card__claim {
        font-size: clamp(2rem, 8vw, 2.5rem);
    }

    .product-card .card__title {
        font-size: var(--text-lg);
    }

    .product-card__format {
        font-size: var(--text-xs);
        margin-bottom: var(--space-lg);
    }

    .product-card__hero-ingredient {
        padding: var(--space-md);
        margin-bottom: var(--space-lg);
    }

    .product-card__ingredients {
        margin-bottom: var(--space-xl);
    }

    .product-card__ingredients li {
        padding: var(--space-sm) 0;
        padding-left: var(--space-lg);
    }

    .product-card .card__footer {
        flex-direction: column;
        gap: var(--space-md);
        align-items: stretch;
    }

    .product-card__price {
        text-align: center;
    }

    .product-card .btn {
        width: 100%;
    }
}

/* ===========================================
   FORMULA FACTS CAROUSEL (products.html)
   =========================================== */

@media (max-width: 768px) {
    .formula-carousel-section {
        padding: var(--space-3xl) 0;
    }

    .carousel-wrapper {
        padding: 0 var(--space-md);
    }

    .formula-card,
    .supplement-facts.formula-card {
        padding: var(--space-lg);
        max-width: 100%;
    }

    .formula-card .supplement-facts__header,
    .supplement-facts.formula-card .supplement-facts__header {
        padding: var(--space-md) var(--space-lg);
        font-size: var(--text-lg);
    }

    /* Ingredient table rows */
    .formula-facts-showcase .supplement-facts__row {
        padding: var(--space-md) var(--space-md);
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: var(--space-sm);
        align-items: baseline;
    }

    .supplement-facts__name {
        font-size: var(--text-sm);
        line-height: 1.4;
        padding-right: var(--space-sm);
    }

    .supplement-facts__amount {
        font-size: var(--text-sm);
        text-align: right;
        white-space: nowrap;
    }

    .supplement-facts__dv {
        font-size: var(--text-xs);
        text-align: right;
        min-width: 40px;
    }

    /* Carousel navigation */
    .nav-arrow {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .nav-prev {
        left: var(--space-xs);
    }

    .nav-next {
        right: var(--space-xs);
    }

    /* Progress indicator */
    .carousel-progress {
        margin-top: var(--space-lg);
        font-size: var(--text-sm);
        gap: var(--space-sm);
    }

    .carousel-dots {
        gap: var(--space-md);
        margin-top: var(--space-lg);
    }

    .carousel-dot {
        width: 10px;
        height: 10px;
    }
}

/* ===========================================
   INGREDIENT ACCORDION (products.html)
   =========================================== */

@media (max-width: 768px) {
    .ingredient-accordion-section {
        margin-top: var(--space-2xl);
        padding: 0 var(--space-lg);
    }

    .ingredient-accordion-section .section-subhead {
        font-size: var(--text-xs);
        margin-bottom: var(--space-lg);
    }

    .accordion {
        max-width: 100%;
        gap: var(--space-md);
    }

    .accordion__item,
    .accordion details {
        margin-bottom: var(--space-md);
        border-radius: var(--radius-sm);
    }

    .accordion__trigger,
    .accordion summary {
        padding: var(--space-lg);
        font-size: var(--text-base);
        gap: var(--space-md);
        min-height: 56px;
    }

    .accordion__trigger-text {
        flex: 1;
        line-height: 1.4;
    }

    .accordion__icon,
    .accordion summary::after {
        flex-shrink: 0;
        font-size: var(--text-xl);
    }

    .accordion__content {
        padding: 0 var(--space-lg) var(--space-lg);
    }

    .accordion__content p,
    .accordion details p {
        margin-bottom: var(--space-md);
        font-size: var(--text-sm);
        line-height: 1.6;
    }

    .accordion__content dt {
        font-weight: 600;
        margin-top: var(--space-md);
        margin-bottom: var(--space-sm);
    }

    .accordion__content dd {
        margin-left: 0;
    }

    .ingredient-detail {
        margin-bottom: var(--space-lg);
    }
}

/* ===========================================
   FOUNDER SECTION (products.html)
   =========================================== */

@media (max-width: 768px) {
    .founder-section {
        padding: var(--space-3xl) var(--space-lg);
        text-align: center;
    }

    .founder__image {
        width: 160px;
        height: 160px;
        margin: 0 auto var(--space-xl);
    }

    .founder__image--large {
        max-width: 280px;
        margin: 0 auto var(--space-xl);
    }

    .founder__title {
        font-size: var(--text-2xl);
        margin-bottom: var(--space-lg);
    }

    .founder__text {
        font-size: var(--text-base);
        line-height: 1.8;
        max-width: 36ch;
        margin: 0 auto var(--space-md);
    }

    .founder__text em {
        display: block;
        margin-top: var(--space-md);
    }

    .founder__signature {
        margin-top: var(--space-lg);
        font-size: var(--text-base);
    }
}

/* ===========================================
   ORDER PAGE - PRODUCT SELECTION
   =========================================== */

@media (max-width: 768px) {
    .checkout-main {
        padding: var(--space-xl) var(--space-lg);
    }

    .checkout-layout {
        gap: var(--space-xl);
    }

    .product-cards {
        gap: var(--space-md);
    }

    .checkout-product-card {
        grid-template-columns: auto auto 1fr;
        gap: var(--space-md);
        padding: var(--space-lg);
    }

    .product-glyph {
        width: 56px;
        height: 56px;
        font-size: 1.25rem;
    }

    .product-info {
        gap: var(--space-xs);
    }

    .product-info__name {
        font-size: var(--text-base);
    }

    .product-info__description {
        font-size: var(--text-sm);
        line-height: 1.4;
    }

    .product-price-area {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: var(--space-sm);
        padding-top: var(--space-sm);
        border-top: 1px solid var(--travertine);
    }

    .product-price {
        font-size: var(--text-lg);
    }

    .quantity-control {
        margin-top: 0;
    }

    .qty-btn {
        width: 44px;
        height: 44px;
    }
}

/* ===========================================
   ORDER PAGE - FORM INPUTS
   =========================================== */

@media (max-width: 768px) {
    .order-form {
        gap: var(--space-xl);
    }

    .form-section {
        gap: var(--space-md);
    }

    .form-section h2 {
        font-size: var(--text-lg);
        margin-bottom: var(--space-md);
    }

    .form-group {
        margin-bottom: var(--space-lg);
    }

    .input-label {
        display: block;
        margin-bottom: var(--space-sm);
        font-size: var(--text-sm);
        font-weight: 500;
    }

    .input,
    .select {
        width: 100%;
        padding: var(--space-md);
        font-size: 16px;
        /* Prevents iOS zoom */
        border-radius: var(--radius-sm);
    }

    .input:focus,
    .select:focus {
        outline: none;
        border-color: var(--accent-clay);
        box-shadow: 0 0 0 3px rgba(180, 140, 100, 0.1);
    }

    .input-row {
        gap: var(--space-md);
    }

    .input-row--two-col,
    .input-row--three-col {
        grid-template-columns: 1fr;
    }

    .step-number {
        width: 24px;
        height: 24px;
        font-size: var(--text-xs);
    }
}

/* ===========================================
   ORDER PAGE - SUBMIT AND SUMMARY
   =========================================== */

@media (max-width: 768px) {
    .submit-btn {
        padding: var(--space-lg);
        font-size: var(--text-base);
    }

    .order-summary {
        padding: var(--space-lg);
    }

    .order-summary h2 {
        font-size: var(--text-lg);
        margin-bottom: var(--space-lg);
    }

    .summary-item {
        font-size: var(--text-sm);
    }

    .summary-row--total {
        font-size: var(--text-lg);
    }

    .trust-elements {
        gap: var(--space-md);
    }

    .trust-item {
        font-size: var(--text-sm);
    }
}

/* ===========================================
   ORDER PAGE - MOBILE SUMMARY TOGGLE
   =========================================== */

@media (max-width: 899px) {
    .mobile-summary-toggle {
        padding: var(--space-md) var(--space-lg);
        padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
    }

    .mobile-total {
        font-size: var(--text-lg);
    }

    .checkout-main {
        padding-bottom: 120px;
        /* Space for fixed bottom bar */
    }
}

/* ===========================================
   CONFIRMATION PAGE
   =========================================== */

@media (max-width: 768px) {
    .confirmation-hero {
        padding: var(--space-3xl) var(--space-lg) var(--space-2xl);
        min-height: 40vh;
    }

    .confirmation-hero h1 {
        font-size: clamp(3rem, 12vw, 5rem);
    }

    .confirmation-icon {
        width: 56px;
        height: 56px;
        margin-bottom: var(--space-lg);
    }

    .confirmation-icon svg {
        width: 28px;
        height: 28px;
    }

    .confirmation-content {
        padding: var(--space-lg);
    }

    .confirmation-section {
        padding: var(--space-lg);
        margin-bottom: var(--space-lg);
    }

    .confirmation-section h3 {
        font-size: var(--text-sm);
        margin-bottom: var(--space-md);
    }

    .timeline-item {
        gap: var(--space-md);
    }

    .timeline-title {
        font-size: var(--text-base);
    }

    .timeline-description {
        font-size: var(--text-sm);
    }

    .confirmation-actions {
        flex-direction: column;
        gap: var(--space-md);
    }

    .confirmation-actions .btn {
        width: 100%;
        min-width: auto;
    }
}

/* ===========================================
   FOOTER - MOBILE
   =========================================== */

@media (max-width: 768px) {
    .footer {
        padding: var(--space-2xl) var(--space-lg);
    }

    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        text-align: center;
    }

    .footer__brand {
        align-items: center;
    }

    .footer__logo {
        font-size: var(--text-lg);
    }

    .footer__tagline {
        font-size: var(--text-sm);
    }

    .footer__links {
        flex-direction: column;
        gap: var(--space-md);
    }

    .footer__links a {
        padding: var(--space-sm) 0;
    }

    .footer__contact a {
        font-size: var(--text-sm);
    }

    .footer__bottom {
        padding-top: var(--space-lg);
    }

    .fda-disclaimer {
        font-size: var(--text-xs);
        line-height: 1.5;
        padding: 0 var(--space-sm);
    }

    .footer__copyright {
        font-size: var(--text-xs);
    }
}

/* ===========================================
   SITE HEADER - MOBILE
   =========================================== */

@media (max-width: 768px) {
    .site-header {
        padding: var(--space-md) var(--space-lg);
    }

    .site-header__wordmark {
        font-size: 1.5rem;
    }

    .site-header__nav {
        gap: var(--space-md);
    }

    .site-header__link {
        font-size: var(--text-sm);
        padding: var(--space-sm);
    }
}

/* ===========================================
   LEGAL PAGES - MOBILE
   =========================================== */

@media (max-width: 768px) {
    .legal-page {
        padding: var(--space-2xl) var(--space-lg);
    }

    .legal-page h1 {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
        margin-bottom: var(--space-sm);
    }

    .legal-page__updated {
        margin-bottom: var(--space-xl);
    }

    .legal-section {
        margin-bottom: var(--space-xl);
    }

    .legal-section h2 {
        font-size: var(--text-lg);
        margin-bottom: var(--space-md);
    }

    .legal-section h3 {
        font-size: var(--text-base);
    }

    .legal-section p,
    .legal-section li {
        font-size: var(--text-sm);
        line-height: 1.7;
    }

    .legal-section ul,
    .legal-section ol {
        padding-left: var(--space-lg);
    }

    .shipping-table th,
    .shipping-table td {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--text-sm);
    }
}

/* ===========================================
   CARDS - MOBILE
   =========================================== */

@media (max-width: 768px) {
    .card {
        padding: var(--space-lg);
    }

    .card__title {
        font-size: var(--text-lg);
    }

    .card__footer {
        margin-top: var(--space-lg);
        padding-top: var(--space-md);
    }
}

/* ===========================================
   BUTTONS - MOBILE
   =========================================== */

@media (max-width: 768px) {
    .btn {
        padding: var(--space-md) var(--space-lg);
        font-size: var(--text-sm);
    }

    .btn--large {
        padding: var(--space-lg) var(--space-xl);
        font-size: var(--text-base);
    }

    .btn--full {
        width: 100%;
    }
}

/* ===========================================
   IMAGES - MOBILE
   =========================================== */

@media (max-width: 768px) {

    img,
    .hero__image,
    .product-card__image,
    .lifestyle__image {
        max-width: 100%;
        height: auto;
    }

    .hero__image {
        margin: var(--space-lg) auto;
    }
}

/* ===========================================
   VERY SMALL SCREENS (375px and below)
   Extra adjustments for smallest viewports
   =========================================== */

@media (max-width: 375px) {

    .container,
    .section>.container,
    [class*="container"] {
        padding-left: 1rem;
        /* 16px absolute minimum */
        padding-right: 1rem;
    }

    h1,
    .hero__title {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .stat-callout__number {
        font-size: 3.5rem !important;
    }

    .hero__title--monumental,
    .products-hero .page-title {
        font-size: 2.5rem;
    }

    .confirmation-hero h1 {
        font-size: 2.5rem;
    }
}

/* ===========================================
   ISSUE 1: SCROLL INDICATOR CENTERING FIX
   Ensuring scroll indicator is perfectly centered
   =========================================== */

@media (max-width: 768px) {

    .hero__scroll,
    .scroll-indicator {
        position: absolute !important;
        bottom: 48px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .hero__scroll span,
    .scroll-indicator span {
        text-align: center !important;
    }
}

/* ===========================================
   ISSUE 2: FOUNDER SECTION CENTERING FIX
   Ryan photo and text must be centered on mobile
   =========================================== */

@media (max-width: 768px) {

    .founder-section,
    .founder,
    [class*="founder"] {
        text-align: center !important;
    }

    .founder-section .container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .founder__image,
    .founder img,
    .founder-section img,
    .founder-photo {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 160px !important;
        height: 160px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    .founder__content,
    .founder-content,
    .founder-section>*,
    .founder-section .container>* {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .founder__name,
    .founder-signature {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .founder-section .lead,
    .founder-section p {
        max-width: 36ch !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ===========================================
   ISSUE 3: FORMULA FACTS TABLE - FULL WIDTH FIX
   Force all containers to be full width
   =========================================== */

@media (max-width: 768px) {

    /* FORCE ALL PARENT CONTAINERS TO FULL WIDTH */
    .section--formula-facts,
    .section--formula-facts .container,
    .section--formula-facts .container--full,
    .carousel-wrapper,
    .formula-facts-scroll-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* FORMULA CARD: FULL WIDTH with small side margins */
    .formula-card,
    .supplement-facts.formula-card,
    .supplement-facts {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        margin: 0 12px !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }

    /* Header styling */
    .supplement-facts__header {
        padding: 14px 16px !important;
        font-size: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .supplement-facts__subheader {
        padding: 12px 16px !important;
        font-size: 13px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* HEADER ROW: Use flexbox to push labels to the right */
    .supplement-facts__row--header {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 8px 16px !important;
        border-bottom: 2px solid #1a1a18 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Hide empty name in header row */
    .supplement-facts__row--header .supplement-facts__name {
        display: none !important;
    }

    /* Header labels styling */
    .supplement-facts__row--header .supplement-facts__amount,
    .supplement-facts__row--header .supplement-facts__dv {
        font-size: 10px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        color: #1a1a18 !important;
        white-space: nowrap !important;
    }

    /* DATA ROWS: CSS GRID - ingredient gets ALL remaining space */
    .supplement-facts__row:not(.supplement-facts__row--header) {
        display: grid !important;
        grid-template-columns: 1fr 75px 45px !important;
        gap: 6px !important;
        padding: 10px 16px !important;
        align-items: start !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Ingredient name - fills remaining space */
    .supplement-facts__name {
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        color: #1a1a18 !important;
        text-align: left !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    /* Amount column */
    .supplement-facts__amount {
        font-size: 13px !important;
        font-weight: 600 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    /* DV column */
    .supplement-facts__dv {
        font-size: 12px !important;
        text-align: right !important;
        white-space: nowrap !important;
        color: #666 !important;
    }

    /* Note section */
    .supplement-facts__note {
        padding: 12px 16px !important;
        font-size: 11px !important;
    }

    /* Simple nav row: ← 01——03 → */
    .carousel-nav-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        margin-top: 20px !important;
        padding: 0 16px !important;
    }

    .carousel-nav-row .nav-arrow {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        cursor: pointer !important;
    }

    .carousel-nav-row .carousel-progress {
        flex: 1 !important;
        max-width: 200px !important;
    }
}


/* ===========================================
   ISSUE 4: CAROUSEL NAVIGATION CENTERING FIX
   Progress indicator and arrows must be centered
   =========================================== */

@media (max-width: 768px) {
    .carousel-wrapper {
        position: relative !important;
    }

    .carousel-progress,
    .carousel-indicator,
    [class*="carousel"] .progress {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 24px auto 0 !important;
    }

    /* Position arrows below carousel on mobile instead of sides */
    .nav-arrow,
    .carousel-arrow {
        position: static !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .carousel-nav,
    .carousel-controls {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 16px !important;
        width: 100% !important;
        margin: 24px auto 0 !important;
    }

    .progress-bar {
        flex: 1 !important;
        max-width: 120px !important;
    }
}

/* ===========================================
   ISSUE 5: GENERAL SECTION CENTERING AUDIT
   Ensure all sections are properly centered
   =========================================== */

@media (max-width: 768px) {

    section,
    .section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    section>.container,
    .section>.container,
    .section__content {
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Center all section headers */
    .section__header,
    .section__title,
    section h2,
    .section h2 {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Ensure text-center class works properly */
    .text-center {
        text-align: center !important;
    }

    .text-center>* {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Fix any mx-auto issues */
    .mx-auto {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}