/*
 * Responsive Styles
 * All media queries for PS Tea Industries Theme
 */

/* ==========================================================================
   RESPONSIVE ROOT VARIABLES
   ========================================================================== */

/* Responsive Font Sizes - Tablet */
@media (max-width: 1024px) {
    :root {
        --font-size-base: 15px;
        --font-size-xs: 13px;
        --font-size-sm: 16px;
        --font-size-lg: 18px;
        --font-size-xl: 22px;
        --font-size-2xl: 28px;
        --font-size-3xl: 36px;
        --font-size-4xl: 48px;
        --font-size-5xl: 54px;
		--font-size-6xl: 64px;
        --spacing-xl: 40px;
        --spacing-2xl: 48px;
        --spacing-3xl: 72px;
    }
}

/* Responsive Font Sizes - Mobile */
@media (max-width: 768px) {
    :root {
        --font-size-base: 14px;
        --font-size-xs: 12px;
        --font-size-sm: 15px;
        --font-size-lg: 16px;
        --font-size-xl: 20px;
        --font-size-2xl: 24px;
        --font-size-3xl: 28px;
        --font-size-4xl: 32px;
        --font-size-5xl: 42px;
		--font-size-6xl: 48px;
        --spacing-xl: 32px;
        --spacing-2xl: 40px;
        --spacing-3xl: 56px;
    }
}

/* Responsive Font Sizes - Small Mobile */
@media (max-width: 480px) {
    :root {
        --font-size-base: 14px;
        --font-size-xs: 12px;
        --font-size-sm: 14px;
        --font-size-lg: 15px;
        --font-size-xl: 18px;
        --font-size-2xl: 22px;
        --font-size-3xl: 24px;
        --font-size-4xl: 30px;
		--font-size-6xl: 42px;
        --spacing-xl: 24px;
        --spacing-2xl: 32px;
        --spacing-3xl: 48px;
    }
}

/* ==========================================================================
   HEADER RESPONSIVE
   ========================================================================== */

/* Header Responsive */
@media (max-width: 992px) {
    .header__menu--left,
    .header__menu--right {
        display: none;
    }

    .header__toggle {
        display: flex;
        order: 2;
    }

    .header__nav-container {
        justify-content: space-between;
    }

    .header__logo {
        order: 1;
        margin: 0;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .header__topbar-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0;
    }

    .header__topbar-item {
        width: calc(50% - var(--spacing-md));
        justify-content: center;
        padding: var(--spacing-xs) 0;
    }

    .header__topbar-item:not(:last-child)::after {
        display: none;
    }

    .header__topbar-item:nth-child(odd)::after {
        display: block;
    }
}

@media (max-width: 768px) {
    .header__topbar {
        display: none;
    }
}

/* ==========================================================================
   HERO RESPONSIVE
   ========================================================================== */

/* Hero Responsive */
@media (max-width: 992px) {
    .hero {
        min-height: 500px;
    }

    .hero__title {
        font-size: var(--font-size-3xl);
    }

    .hero__image img {
        max-height: 350px;
    }
}

@media (max-width: 768px) {
    .hero {
        min-height: auto;
        padding: var(--spacing-2xl) 0;
    }

    .hero::before {
        background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 100%);
    }

    .hero__container {
        flex-direction: column;
        text-align: center;
    }

    .hero__content {
        margin-bottom: var(--spacing-lg);
    }

    .hero__description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero__title {
        font-size: var(--font-size-6xl);
    }

    .hero__subtitle {
        font-size: var(--font-size-base);
    }

    .hero__image img {
        max-height: 280px;
    }
}

/* ==========================================================================
   FEATURES RESPONSIVE
   ========================================================================== */

/* Features Responsive */
@media (max-width: 992px) {
    .features__grid {
        flex-wrap: wrap;
    }

    .features__item {
        flex: 0 0 50%;
        padding: var(--spacing-sm);
    }

    .features__item:nth-child(2)::after {
        display: none;
    }

    .features__item:nth-child(3)::after,
    .features__item:nth-child(4)::after {
        display: none;
    }
}

@media (max-width: 576px) {
    .features__grid {
        flex-direction: column;
    }

    .features__item {
        flex: 0 0 100%;
        width: 100%;
        justify-content: flex-start;
        padding: var(--spacing-sm) 0;
        border-bottom: 1px solid var(--color-border-gray);
    }

    .features__item:not(:last-child)::after {
        display: none;
    }

    .features__item:last-child {
        border-bottom: none;
    }
}

/* ==========================================================================
   ABOUT RESPONSIVE
   ========================================================================== */

/* About Responsive */

@media (max-width: 991px) {
    .about__container, .about__container.quality {
        flex-direction: column;
    }

    .about__sidebar, .about__container.quality .about__sidebar {
        width: 100%;
        flex-direction: row;
        padding: var(--spacing-md);
        border-radius: var(--border-radius) var(--border-radius) 0 0;
        flex-direction: column;
    }


    .about__vertical-text,
    .about__vertical-subtext,
    .about__container.quality .about__vertical-text,
    .about__container.quality .about__vertical-subtext {
        text-align: center;
    }

    .about__content, .about__container.quality .about__content {
        order: 3;
        border-radius: 0 0 var(--border-radius) var(--border-radius);
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .about__decorator {
        display: none;
    }

    .about__container::before, 
    .about__container::after {
        display: none;
    }
}

@media (max-width: 768px) {
    .about {
        padding: var(--spacing-2xl) 0;
    }

    .about__title {
        font-size: var(--font-size-xl);
    }
}

@media (max-width: 576px) {
    .about {
        padding: var(--spacing-xl) 0;
    }

    .about__title {
        font-size: var(--font-size-xl);
    }

    .about__content {
        padding: var(--spacing-md) 0;
    }
}
@media (max-width: 480px) {
    .about__vertical-text {
        font-size: var(--font-size-xl);
    }
    .about__vertical-subtext {
        font-size: var(--font-size-xs);
    }
}
/* ==========================================================================
   PRODUCTS RESPONSIVE
   ========================================================================== */

/* Products Responsive */
@media (max-width: 576px) {
    .products__slider {
        padding-bottom: var(--spacing-2xl);
    }

    .products__slider .swiper-wrapper {
        margin-bottom: var(--spacing-lg);
    }

    .products__slider .swiper-pagination {
        margin-top: var(--spacing-lg);
        position: relative;
    }

    .products__slider-wrapper .swiper-button-next,
    .products__slider-wrapper .swiper-button-prev {
        width: 36px;
        height: 32px;
        border-radius: 12px;
        top: calc(var(--spacing-md) + 215px);
    }

    .products__slider-wrapper .swiper-button-prev {
        left: -18px;
    }

    .products__slider-wrapper .swiper-button-next {
        right: -18px;
    }

    .products__slider-wrapper .swiper-button-next:after,
    .products__slider-wrapper .swiper-button-prev:after {
        width: 14px;
        height: 8px;
    }
}

/* ==========================================================================
   SERVICES RESPONSIVE
   ========================================================================== */

/* Services Responsive */
@media (max-width: 768px) {
    .services__accordion {
        max-width: 100%;
    }

    .services__actions {
        flex-direction: column;
        align-items: center;
    }

    .services__btn {
        width: 100%;
        max-width: 300px;
    }
}

/* ==========================================================================
   PRINCIPLES RESPONSIVE
   ========================================================================== */

/* Principles Responsive */
@media (max-width: 992px) {
    .principles__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .principles__card {
        min-height: 350px;
    }
}

@media (max-width: 576px) {
    .principles__grid {
        grid-template-columns: 1fr;
    }

    .principles__card {
        min-height: 320px;
    }
}

/* ==========================================================================
   CTA BANNER RESPONSIVE
   ========================================================================== */

/* CTA Banner Responsive */
@media (max-width: 768px) {
    .cta-banner__container {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-md);
    }

    .cta-banner__title {
        font-size: var(--font-size-2xl);
    }

    .cta-banner__subtitle {
        font-size: var(--font-size-base);
    }

    .cta-banner__btn {
        width: 100%;
        max-width: 300px;
    }
}

/* ==========================================================================
   FOOTER RESPONSIVE
   ========================================================================== */

@media (max-width: 1280px) {
    .footer::before {
        display: none;
    }
    .footer::after {
        display: none;
    }
}

/* Footer Responsive */
@media (max-width: 992px) {
    .footer__brand {
        max-width: none;
    }
    .footer__menu-link, .footer__contact-item {
        font-size: var(--font-size-xs);
    }
}

@media (max-width: 768px) {
    .footer__container {
        grid-template-columns: 2fr 1fr;
    }
}

@media (max-width: 576px) {
    .footer__container {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   INNER BANNER RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .inner-banner {
        min-height: 250px;
        margin: var(--spacing-lg) 0;
    }

    .inner-banner__title {
        font-size: var(--font-size-3xl);
    }

    .inner-banner__breadcrumbs {
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 576px) {
    .inner-banner {
        min-height: 200px;
        border-radius: var(--border-radius);
    }

    .inner-banner__title {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--spacing-sm);
    }

    .inner-banner__breadcrumbs {
        font-size: var(--font-size-xs);
    }

    .inner-banner__decorator {
        height: 30px;
    }
}

/* ==========================================================================
   PAGE CONTENT RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .main-content {
        padding: var(--spacing-2xl) 0;
    }

    .page-content {
        padding: 0 var(--spacing-sm);
    }

    .page-content__wrapper h1 {
        font-size: var(--font-size-2xl);
    }

    .page-content__wrapper h2 {
        font-size: var(--font-size-xl);
    }

    .page-content__wrapper h3 {
        font-size: var(--font-size-lg);
    }
}

@media (max-width: 576px) {
    .main-content {
        padding: var(--spacing-xl) 0;
    }

    .page-content__wrapper {
        font-size: var(--font-size-sm);
    }

    .page-content__wrapper h1 {
        font-size: var(--font-size-xl);
    }

    .page-content__wrapper h2 {
        font-size: var(--font-size-lg);
    }

    .page-content__wrapper h3 {
        font-size: var(--font-size-base);
    }

    .page-content__wrapper table {
        font-size: var(--font-size-xs);
        display: block;
        overflow-x: auto;
    }
}

/* ==========================================================================
   IMAGE CONTENT RESPONSIVE
   ========================================================================== */

@media (max-width: 992px) {
    .image-content__wrapper {
        flex-direction: column;
    }

    .image-content__image {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .image-content__image img {
        min-height: 400px;
    }

    .image-content__content {
        padding: var(--spacing-2xl) var(--spacing-xl);
    }

    .image-content__heading {
        font-size: var(--font-size-2xl);
    }
}

@media (max-width: 768px) {
    .image-content {
        padding: var(--spacing-2xl) 0;
    }

    .image-content__wrapper {
        border-radius: var(--border-radius);
    }

    .image-content__image img {
        min-height: 300px;
    }

    .image-content__content {
        padding: var(--spacing-xl) var(--spacing-lg);
    }

    .image-content__heading {
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-md);
    }

    .image-content__description {
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 576px) {
    .image-content {
        padding: var(--spacing-xl) 0;
    }

    .image-content__wrapper {
        border-radius: var(--border-radius);
    }

    .image-content__image img {
        min-height: 250px;
    }

    .image-content__content {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .image-content__heading {
        font-size: var(--font-size-lg);
        margin-bottom: var(--spacing-sm);
    }

    .image-content__label {
        font-size: 11px;
        margin-bottom: var(--spacing-xs);
        letter-spacing: 1.5px;
    }

    .image-content__description {
        font-size: var(--font-size-sm);
        line-height: 1.6;
    }
}

/* ==========================================================================
   MISSION VISION RESPONSIVE
   ========================================================================== */

@media (max-width: 992px) {
    .mission-vision__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }

    .mission-vision__card:nth-child(3) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .mission-vision {
        padding: var(--spacing-2xl) 0;
    }

    .mission-vision__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .mission-vision__card {
        padding: var(--spacing-xl) var(--spacing-lg);
    }

    .mission-vision__icon {
        width: 70px;
        height: 70px;
        margin-bottom: var(--spacing-md);
    }

    .mission-vision__title {
        font-size: var(--font-size-lg);
    }
}

@media (max-width: 576px) {
    .mission-vision {
        padding: var(--spacing-xl) 0;
    }

    .mission-vision__card {
        padding: var(--spacing-lg) var(--spacing-md);
        border-radius: var(--border-radius);
    }

    .mission-vision__icon {
        width: 60px;
        height: 60px;
        margin-bottom: var(--spacing-sm);
    }

    .mission-vision__title {
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-sm);
    }

    .mission-vision__description {
        font-size: var(--font-size-sm);
        line-height: 1.6;
    }
}

/* ==========================================================================
   OUR CLIENTS RESPONSIVE
   ========================================================================== */

@media (max-width: 992px) {
    /* Hide grid, show slider on tablet and below */
    .our-clients__grid {
        display: none;
    }

    .our-clients__slider-wrapper {
        display: block;
        padding: var(--spacing-md) 0 0;
    }

    .our-clients__slider-wrapper .swiper-button-next,
    .our-clients__slider-wrapper .swiper-button-prev {
        top: calc(var(--spacing-md) + 75px);
    }

    .our-clients__slider-wrapper .swiper-button-prev {
        left: -18px;
    }

    .our-clients__slider-wrapper .swiper-button-next {
        right: -18px;
    }
}

@media (max-width: 768px) {
    .our-clients {
        padding: var(--spacing-2xl) 0;
    }

    .our-clients__title {
        font-size: var(--font-size-3xl);
    }

    .our-clients__slider-wrapper {
        padding: var(--spacing-md) 0 0;
    }

    .our-clients__slider-wrapper .swiper-button-next,
    .our-clients__slider-wrapper .swiper-button-prev {
        top: calc(var(--spacing-md) + 75px);
    }

    .our-clients__slider-wrapper .swiper-button-prev {
        left: -18px;
    }

    .our-clients__slider-wrapper .swiper-button-next {
        right: -18px;
    }

    .our-clients__card {
        height: 150px;
        padding: var(--spacing-lg);
    }

    .our-clients__card img {
        max-height: 100px;
    }

    .our-clients__slider-wrapper .swiper-button-next,
    .our-clients__slider-wrapper .swiper-button-prev {
        width: 36px;
        height: 36px;
    }

    .our-clients__slider-wrapper .swiper-button-next:after,
    .our-clients__slider-wrapper .swiper-button-prev:after {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .our-clients {
        padding: var(--spacing-xl) 0;
    }

    .our-clients__title {
        font-size: var(--font-size-2xl);
    }

    .our-clients__label {
        font-size: 11px;
    }

    .our-clients__slider-wrapper {
        padding: var(--spacing-md) 40px 0;
    }

    .our-clients__slider-wrapper .swiper-button-next,
    .our-clients__slider-wrapper .swiper-button-prev {
        top: calc(var(--spacing-md) + 90px);
    }

    .our-clients__card {
        height: 120px;
        padding: var(--spacing-md);
    }

    .our-clients__card img {
        max-height: 80px;
    }

    .our-clients__slider-wrapper .swiper-button-prev {
        left: 0;
        width: 32px;
        height: 32px;
    }

    .our-clients__slider-wrapper .swiper-button-next {
        right: 0;
        width: 32px;
        height: 32px;
    }

    .our-clients__slider-wrapper .swiper-button-next:after,
    .our-clients__slider-wrapper .swiper-button-prev:after {
        font-size: 12px;
    }

    .our-clients__slider .swiper-pagination {
        margin-top: var(--spacing-sm);
    }

    .our-clients__slider .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        margin: 0 6px;
        padding: 2px;
        box-sizing: content-box;
    }
}

/* ==========================================================================
   CERTIFICATES RESPONSIVE
   ========================================================================== */

@media (max-width: 992px) {
    .certificates__slider-wrapper {
        padding: var(--spacing-md) 50px 0;
    }

    .certificates__slider-wrapper .swiper-button-next,
    .certificates__slider-wrapper .swiper-button-prev {
        width: 44px;
        height: 44px;
        top: calc(var(--spacing-md) + 100px);
    }

    .certificates__slider-wrapper .swiper-button-prev {
        left: 0;
    }

    .certificates__slider-wrapper .swiper-button-next {
        right: 0;
    }
}

@media (max-width: 768px) {
    .certificates {
        padding: var(--spacing-2xl) 0;
    }

    .certificates__title {
        font-size: var(--font-size-3xl);
    }

    .certificates__slider-wrapper {
        padding: var(--spacing-md) 50px 0;
    }

    .certificates__slider-wrapper .swiper-button-next,
    .certificates__slider-wrapper .swiper-button-prev {
        width: 40px;
        height: 40px;
        top: calc(var(--spacing-md) + 100px);
    }

    .certificates__card {
        height: 180px;
        padding: var(--spacing-md);
    }

    .certificates__card img {
        max-height: 140px;
    }
}

@media (max-width: 576px) {
    .certificates {
        padding: var(--spacing-xl) 0;
    }

    .certificates__title {
        font-size: var(--font-size-2xl);
    }

    .certificates__label {
        font-size: 11px;
    }

    .certificates__slider-wrapper {
        padding: var(--spacing-md) 50px 0;
    }

    .certificates__slider-wrapper .swiper-button-next,
    .certificates__slider-wrapper .swiper-button-prev {
        width: 36px;
        height: 36px;
        top: calc(var(--spacing-md) + 90px);
    }

    .certificates__card {
        height: 150px;
        padding: var(--spacing-md);
    }

    .certificates__card img {
        max-height: 120px;
    }

    .certificates__slider .swiper-pagination {
        margin-top: var(--spacing-md);
    }

    .certificates__slider .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        margin: 0 5px;
    }
}



/* ==========================================================================
   GALLERY RESPONSIVE
   ========================================================================== */

@media (max-width: 992px) {
    .gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
}

@media (max-width: 768px) {
    .gallery {
        padding: var(--spacing-2xl) 0;
    }

    .gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .gallery__overlay svg {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 576px) {
    .gallery {
        padding: var(--spacing-xl) 0;
    }

    .gallery__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .gallery__overlay svg {
        width: 32px;
        height: 32px;
    }
}

/* ==========================================================================
   CONTACT PAGE RESPONSIVE
   ========================================================================== */

@media (max-width: 992px) {
    .contact-info__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }

    .contact-form-section__form-wrapper .wpcf7-form .wpcf7-form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .contact-info {
        padding: var(--spacing-2xl) 0;
    }

    .contact-info__header {
        margin-bottom: var(--spacing-2xl);
    }

    .contact-info__title {
        font-size: var(--font-size-2xl);
    }

    .contact-info__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .contact-info__card {
        padding: var(--spacing-xl) var(--spacing-lg);
        flex-direction: row;
        align-items: flex-start;
    }

    .contact-info__icon {
        width: 56px;
        height: 56px;
        flex-shrink: 0;
    }

    .contact-form-section {
        padding: var(--spacing-2xl) 0;
    }

    .contact-form-section__form-wrapper .contact-form-section__header {
        margin-bottom: var(--spacing-2xl);
    }

    .contact-form-section__title {
        font-size: var(--font-size-2xl);
    }

    .contact-form-section__form-wrapper {
        padding: var(--spacing-xl) var(--spacing-lg);
    }

    .contact-form-section__form-wrapper .wpcf7-form {
        gap: var(--spacing-md);
    }
}

@media (max-width: 576px) {
    .contact-info {
        padding: var(--spacing-xl) 0;
    }

    .contact-info__header {
        margin-bottom: var(--spacing-xl);
    }

    .contact-info__title {
        font-size: var(--font-size-xl);
    }

    .contact-info__icon {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }

    .contact-info__card {
        gap: var(--spacing-md);
    }

    .contact-info__card-title {
        font-size: var(--font-size-lg);
    }

    .contact-form-section {
        padding: var(--spacing-xl) 0;
    }

    .contact-form-section__form-wrapper .contact-form-section__header {
        margin-bottom: var(--spacing-xl);
    }

    .contact-form-section__title {
        font-size: var(--font-size-xl);
    }

    .contact-form-section__form-wrapper {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .contact-form-section__form-wrapper .wpcf7-form input[type="submit"] {
        width: 100%;
        min-width: auto;
    }
}

/* ==========================================================================
   PRODUCTS ARCHIVE RESPONSIVE
   ========================================================================== */

@media (max-width: 992px) {
    .products-archive__description {
        margin-bottom: var(--spacing-2xl);
    }

    .product-card__wrapper {
        flex-direction: column;
    }

    .product-card__image {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .product-card__image img {
        min-height: 300px;
    }

    .product-card__content {
        padding: var(--spacing-xl);
    }
}

@media (max-width: 768px) {
    .products-archive {
        padding: var(--spacing-2xl) 0;
    }

    .products-archive__description {
        margin-bottom: var(--spacing-xl);
        font-size: var(--font-size-sm);
    }

    .products-archive__grid {
        gap: var(--spacing-lg);
    }

    .product-card__image img {
        min-height: 250px;
    }

    .product-card__content {
        padding: var(--spacing-lg);
    }

    .product-card__title {
        font-size: var(--font-size-2xl);
    }

    .product-card__description-heading {
        font-size: var(--font-size-lg);
    }
}

@media (max-width: 576px) {
    .products-archive {
        padding: var(--spacing-xl) 0;
    }

    .products-archive__description {
        margin-bottom: var(--spacing-lg);
        font-size: var(--font-size-xs);
    }

    .product-card__image img {
        min-height: 200px;
    }

    .product-card__content {
        padding: var(--spacing-md);
    }

    .product-card__title {
        font-size: var(--font-size-xl);
    }

    .product-card__description-heading {
        font-size: var(--font-size-base);
    }

    .product-card__weight,
    .product-card__vendor {
        margin-bottom: var(--spacing-md);
    }

    .product-card__weight,
    .product-card__vendor {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   PRODUCT DETAIL RESPONSIVE
   ========================================================================== */

@media (max-width: 992px) {
    .product-detail__content {
        padding: var(--spacing-xl);
    }
}

@media (max-width: 768px) {
    .product-detail {
        padding: var(--spacing-2xl) 0;
    }

    .product-detail__content {
        padding: var(--spacing-lg);
    }

    .product-detail__title {
        font-size: var(--font-size-2xl);
    }

    .product-detail__description-heading {
        font-size: var(--font-size-xl);
    }

    .product-detail__weight,
    .product-detail__vendor {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    .product-detail {
        padding: var(--spacing-xl) 0;
    }

    .product-detail__content {
        padding: var(--spacing-md);
    }

    .product-detail__title {
        font-size: var(--font-size-xl);
    }

    .product-detail__description-heading {
        font-size: var(--font-size-lg);
    }

    .product-detail__weight,
    .product-detail__vendor {
        margin-bottom: var(--spacing-md);
    }
}

/* ==========================================================================
   STICKY BUTTONS RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {

    .sticky-buttons__item:hover {
        transform: translateX(-10px);
    }

    .sticky-buttons__text {
        font-size: var(--font-size-xs);
    }

    .sticky-buttons__icon {
        width: 16px;
        height: 16px;
    }

    .sticky-buttons__item{
        padding: 12px 8px;
    }

    .sticky-buttons__item img {
        width: 18px;
    }

    .sticky-buttons__text{
        margin-bottom:5px;
    }

}