/* ===== SHARED MOBILE STYLES FOR ALL PAGES ===== */

/* ===== BREADCRUMBS MOBILE ===== */
@media (max-width: 768px) {
    .breadcrumbs {
        padding: 12px 16px;
        font-size: 0.9rem;
    }

    .breadcrumbs a {
        transition: color 0.2s ease;
    }

    .breadcrumbs a:hover {
        color: var(--black, #111111);
    }
}

/* ===== GENERAL MOBILE SPACING ===== */
@media (max-width: 768px) {
    .section-wrapper {
        padding: 0 18px;
    }

    /* Hero sections */
    .contact-hero,
    .about-hero,
    .fluid-hero,
    .catalog-hero,
    .cart-hero,
    .compare-hero,
    .account-hero,
    .register-hero,
    .payment-hero,
    .delivery-hero,
    .certificates-hero,
    .articles-hero,
    .genuine-hero,
    .knowledge-hero,
    .checkout-hero,
    .return-hero {
        padding: 48px 0 56px;
    }

    /* Hero content */
    .contact-hero__content,
    .about-hero__content,
    .fluid-hero__content,
    .catalog-hero__content,
    .cart-hero__content,
    .compare-hero__content,
    .account-hero__content,
    .register-hero__content,
    .payment-hero__content,
    .delivery-hero__content,
    .certificates-hero__content,
    .articles-hero__content,
    .genuine-hero__content,
    .knowledge-hero__content,
    .checkout-hero__content,
    .return-hero__content {
        max-width: 100%;
    }

    /* Hero titles */
    .contact-hero h1,
    .about-hero h1,
    .fluid-hero h1,
    .catalog-hero h1,
    .cart-hero h1,
    .compare-hero h1,
    .account-hero h1,
    .register-hero h1,
    .payment-hero h1,
    .delivery-hero h1,
    .certificates-hero h1,
    .articles-hero h1,
    .genuine-hero h1,
    .knowledge-hero h1,
    .checkout-hero h1,
    .return-hero h1 {
        font-size: clamp(1.8rem, 4vw, 2.4rem);
        margin-bottom: 20px;
        line-height: 1.2;
    }

    /* Hero paragraphs */
    .contact-hero p,
    .about-hero p,
    .fluid-hero p,
    .catalog-hero p,
    .cart-hero p,
    .compare-hero p,
    .account-hero p,
    .register-hero p,
    .payment-hero p,
    .delivery-hero p,
    .certificates-hero p,
    .articles-hero p,
    .genuine-hero p,
    .knowledge-hero p,
    .checkout-hero p,
    .return-hero p {
        font-size: 1rem;
        margin-bottom: 24px;
        line-height: 1.5;
    }

    /* CTA buttons */
    .contact-hero__cta,
    .about-hero__cta,
    .fluid-hero__cta,
    .catalog-hero__cta,
    .cart-hero__cta,
    .compare-hero__cta,
    .account-hero__cta,
    .register-hero__cta,
    .payment-hero__cta,
    .delivery-hero__cta,
    .certificates-hero__cta,
    .articles-hero__cta,
    .genuine-hero__cta,
    .knowledge-hero__cta,
    .checkout-hero__cta,
    .return-hero__cta {
        flex-direction: column;
        gap: 12px;
    }

    /* Button styles */
    .btn {
        padding: 12px 24px;
        font-size: 0.95rem;
        width: 100%;
        text-align: center;
        border-radius: 8px;
    }

    .btn-primary {
        background: var(--accent, #FFCD11);
        color: var(--black, #111111);
        border: none;
    }

    .btn-primary:hover {
        background: var(--accent-dark, #F3C206);
    }

    .btn-secondary {
        background: transparent;
        color: var(--white, #ffffff);
        border: 2px solid var(--white, #ffffff);
    }

    .btn-secondary:hover {
        background: var(--white, #ffffff);
        color: var(--black, #111111);
    }
}

@media (max-width: 640px) {
    .section-wrapper {
        padding: 0 16px;
    }

    .breadcrumbs {
        padding: 10px 16px;
        font-size: 0.85rem;
    }

    /* Hero sections on smaller screens */
    .contact-hero,
    .about-hero,
    .fluid-hero,
    .catalog-hero,
    .cart-hero,
    .compare-hero,
    .account-hero,
    .register-hero,
    .payment-hero,
    .delivery-hero,
    .certificates-hero,
    .articles-hero,
    .genuine-hero,
    .knowledge-hero,
    .checkout-hero,
    .return-hero {
        padding: 40px 0 48px;
    }

    /* Form elements */
    .contact-form,
    .account-form,
    .register-form,
    .payment-form,
    .delivery-form,
    .checkout-form {
        padding: 20px;
    }

    .contact-form form,
    .account-form form,
    .register-form form,
    .payment-form form,
    .delivery-form form,
    .checkout-form form {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .form-field--full {
        grid-column: auto;
    }

    .contact-form button.button,
    .account-form button.button,
    .register-form button.button,
    .payment-form button.button,
    .delivery-form button.button,
    .checkout-form button.button {
        justify-self: stretch;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .section-wrapper {
        padding: 0 12px;
    }

    .breadcrumbs {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    /* Hero sections on very small screens */
    .contact-hero,
    .about-hero,
    .fluid-hero,
    .catalog-hero,
    .cart-hero,
    .compare-hero,
    .account-hero,
    .register-hero,
    .payment-hero,
    .delivery-hero,
    .certificates-hero,
    .articles-hero,
    .genuine-hero,
    .knowledge-hero,
    .checkout-hero,
    .return-hero {
        padding: 32px 0 40px;
    }

    /* Hero titles */
    .contact-hero h1,
    .about-hero h1,
    .fluid-hero h1,
    .catalog-hero h1,
    .cart-hero h1,
    .compare-hero h1,
    .account-hero h1,
    .register-hero h1,
    .payment-hero h1,
    .delivery-hero h1,
    .certificates-hero h1,
    .articles-hero h1,
    .genuine-hero h1,
    .knowledge-hero h1,
    .checkout-hero h1,
    .return-hero h1 {
        font-size: clamp(1.5rem, 4vw, 2rem);
        margin-bottom: 16px;
    }

    /* Button adjustments */
    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

@media (max-width: 360px) {
    .section-wrapper {
        padding: 0 8px;
    }

    .breadcrumbs {
        padding: 6px 8px;
        font-size: 0.75rem;
    }

    /* Hero sections on ultra-small screens */
    .contact-hero,
    .about-hero,
    .fluid-hero,
    .catalog-hero,
    .cart-hero,
    .compare-hero,
    .account-hero,
    .register-hero,
    .payment-hero,
    .delivery-hero,
    .certificates-hero,
    .articles-hero,
    .genuine-hero,
    .knowledge-hero,
    .checkout-hero,
    .return-hero {
        padding: 24px 0 32px;
    }

    /* Hero titles */
    .contact-hero h1,
    .about-hero h1,
    .fluid-hero h1,
    .catalog-hero h1,
    .cart-hero h1,
    .compare-hero h1,
    .account-hero h1,
    .register-hero h1,
    .payment-hero h1,
    .delivery-hero h1,
    .certificates-hero h1,
    .articles-hero h1,
    .genuine-hero h1,
    .knowledge-hero h1,
    .checkout-hero h1,
    .return-hero h1 {
        font-size: clamp(1.3rem, 4vw, 1.8rem);
        margin-bottom: 12px;
    }

    /* Hero paragraphs */
    .contact-hero p,
    .about-hero p,
    .fluid-hero p,
    .catalog-hero p,
    .cart-hero p,
    .compare-hero p,
    .account-hero p,
    .register-hero p,
    .payment-hero p,
    .delivery-hero p,
    .certificates-hero p,
    .articles-hero p,
    .genuine-hero p,
    .knowledge-hero p,
    .checkout-hero p,
    .return-hero p {
        font-size: 0.9rem;
        margin-bottom: 20px;
    }

    /* Button adjustments */
    .btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    /* Form adjustments */
    .contact-form,
    .account-form,
    .register-form,
    .payment-form,
    .delivery-form,
    .checkout-form {
        padding: 16px;
    }
}

/* ===== FOOTER MOBILE ===== */
@media (max-width: 768px) {
    footer {
        padding: 50px 0 34px;
    }

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

    .footer-contacts__item {
        gap: 6px;
        flex-wrap: wrap;
    }

    .footer-contacts__item--stacked {
        align-items: flex-start;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

@media (max-width: 520px) {
    footer {
        padding: 42px 0 30px;
    }

    .footer-grid {
        gap: 16px;
    }

    .footer-wrapper {
        gap: 24px;
    }
}

/* ===== GENERAL MOBILE UTILITIES ===== */
@media (max-width: 768px) {
    /* Ensure proper spacing for all content */
    main {
        padding-top: 0;
    }

    /* Responsive images */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Responsive tables */
    table {
        width: 100%;
        overflow-x: auto;
        display: block;
        white-space: nowrap;
    }

    /* Responsive grids */
    .grid,
    .features-grid,
    .stats-grid,
    .brands-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 16px;
    }

    /* Card layouts */
    .card,
    .feature-card,
    .highlight-card,
    .office-card {
        margin-bottom: 20px;
    }

    /* Text alignment */
    .text-center {
        text-align: center;
    }

    .text-left {
        text-align: left;
    }
}