/* =========================================================
   CROWN THEORY
   GLOBAL RESPONSIVE STYLES

   Breakpoints:
   1100px - Small Desktop / Large Tablet
   950px  - Tablet / Mobile Navigation
   850px  - Tablet
   750px  - Small Tablet
   650px  - Mobile
   600px  - Small Mobile Layouts
   420px  - Small Phones
   ========================================================= */


/* =========================================================
   1. GENERAL RESPONSIVE PROTECTION
   ========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}


/* =========================================================
   2. LARGE TABLET / SMALL DESKTOP
   ========================================================= */

@media screen and (max-width: 1100px) {

    /* -----------------------------------------------------
       GLOBAL
    ----------------------------------------------------- */

    .container {
        width: 92%;
    }

    .section-spacing {
        padding-top: 80px;
        padding-bottom: 80px;
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .nav-container {
        gap: 18px;
    }

    .nav-links {
        gap: 18px;
    }

    .header-search input {
        width: 130px;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

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


    /* =====================================================
       HOMEPAGE
    ===================================================== */

    .hero-grid {
        gap: 44px;
    }

    .hero-content h1 {
        font-size: 50px;
    }

    .shop-needs-grid,
    .needs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hair-type-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .routine-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .community-grid {
        gap: 36px;
    }

    .ingredients-grid {
        gap: 36px;
    }

    .story-grid {
        gap: 44px;
    }


    /* =====================================================
       COLLECTION PAGE
    ===================================================== */

    .collection-layout {
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 30px;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* =====================================================
       PRODUCT PAGE
    ===================================================== */

    .product-detail-grid,
    .product-details-grid {
        gap: 40px;
    }

    .product-info-cards,
    .product-benefit-grid,
    .product-details-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .recommended-products-grid,
    .recommendation-grid {
        grid-template-columns: repeat(3, 1fr);
    }


    /* =====================================================
       ACCOUNT PAGE
    ===================================================== */

    .account-layout,
    .account-grid {
        gap: 40px;
    }


    /* =====================================================
       STORY PAGE
    ===================================================== */

    .story-hero-grid,
    .story-beginning-grid,
    .story-texture-grid,
    .texture-story-grid,
    .story-community-grid {
        gap: 44px;
    }

    .story-values-grid,
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* =====================================================
       INGREDIENTS PAGE
    ===================================================== */

    .ingredients-hero-grid {
        gap: 44px;
    }

    .ingredient-library-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ingredient-routine-grid {
        gap: 20px;
    }


    /* =====================================================
       TEXTURE GUIDE
    ===================================================== */

    .texture-guide-hero-grid,
    .porosity-grid,
    .wash-day-grid,
    .protective-guide-grid {
        gap: 40px;
    }

    .texture-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .mistakes-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .texture-guide-hero-content h1 {
        font-size: 48px;
    }


    /* =====================================================
       FAQ PAGE
    ===================================================== */

    .faq-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .faq-layout {
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 40px;
    }


    /* =====================================================
       RETURNS PAGE
    ===================================================== */

    .return-summary-grid,
    .return-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .return-policy-layout {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 48px;
    }

    .start-return-grid,
    .return-faq-layout {
        gap: 40px;
    }


    /* =====================================================
       SHIPPING PAGE
    ===================================================== */

    .shipping-hero-grid,
    .tracking-help-grid {
        gap: 40px;
    }

    .shipping-summary-grid,
    .order-journey-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .shipping-details-layout {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 48px;
    }

    .shipping-hero-content h1 {
        font-size: 48px;
    }


    /* =====================================================
       SUPPORT PAGE
    ===================================================== */

    .support-quick-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .support-info-grid,
    .contact-support-grid {
        gap: 40px;
    }

    .self-service-grid {
        grid-template-columns: repeat(2, 1fr);
    }


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

    .contact-hero-grid,
    .contact-form-grid,
    .contact-community-grid {
        gap: 40px;
    }

    .contact-options-grid,
    .contact-help-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-hero-content h1 {
        font-size: 48px;
    }


    /* =====================================================
       PRIVACY
    ===================================================== */

    .privacy-layout {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 48px;
    }

    .privacy-hero h1 {
        font-size: 48px;
    }


    /* =====================================================
       TERMS
    ===================================================== */

    .terms-layout {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 48px;
    }

    .terms-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .terms-hero h1 {
        font-size: 48px;
    }


    /* =====================================================
       ACCESSIBILITY
    ===================================================== */

    .accessibility-layout {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 48px;
    }

    .accessibility-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .accessibility-hero h1 {
        font-size: 48px;
    }

}


/* =========================================================
   3. TABLET NAVIGATION
   ========================================================= */

@media screen and (max-width: 950px) {

    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .site-header {
        width: 100%;
    }

    .nav-container {
        min-height: 72px;

        display: flex;

        align-items: center;

        gap: 14px;
    }


    /* Hide Desktop Navigation */

    .desktop-navigation {
        display: none;
    }


    /* Show Hamburger */

    .mobile-menu-button {
        display: flex;

        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 5px;

        flex-shrink: 0;
    }

    .hamburger-line {
        display: block;

        width: 22px;
        height: 2px;
    }


    /* Logo */

    .brand-logo {
        flex-shrink: 0;
    }


    /* Header Actions */

    .header-actions {
        margin-left: auto;

        gap: 8px;
    }

    .header-search {
        display: none;
    }

    .desktop-action-text {
        display: none;
    }

    .account-button,
    .cart-button {
        min-width: 42px;
        min-height: 42px;
    }


    /* -----------------------------------------------------
       MOBILE DRAWER
    ----------------------------------------------------- */

    .mobile-navigation-drawer {
        width: 360px;
        max-width: 88%;
    }

    .mobile-navigation-links {
        width: 100%;
    }

    .mobile-navigation-links > a,
    .mobile-submenu-button {
        width: 100%;
    }


    /* -----------------------------------------------------
       CART DRAWER
    ----------------------------------------------------- */

    .cart-drawer {
        width: 400px;
        max-width: 92%;
    }


    /* =====================================================
       ACCOUNT
    ===================================================== */

    .account-layout,
    .account-grid {
        grid-template-columns: 1fr 1fr;
    }

}


/* =========================================================
   4. TABLET
   ========================================================= */

@media screen and (max-width: 850px) {

    /* -----------------------------------------------------
       GLOBAL
    ----------------------------------------------------- */

    .section-spacing {
        padding-top: 72px;
        padding-bottom: 72px;
    }


    /* -----------------------------------------------------
       NEWSLETTER
    ----------------------------------------------------- */

    .newsletter-container {
        grid-template-columns: 1fr;

        gap: 32px;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 40px 28px;
    }


    /* =====================================================
       HOMEPAGE
    ===================================================== */

    .hero-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

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

    .hero-image,
    .hero-media {
        width: 100%;
    }

    .community-grid,
    .ingredients-grid,
    .story-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .routine-grid {
        grid-template-columns: 1fr;
    }


    /* =====================================================
       COLLECTION
    ===================================================== */

    .collection-layout {
        display: block;
    }

    .collection-filters {
        display: none;

        margin-bottom: 30px;
    }

    .collection-filters.is-open,
    .collection-filters.active {
        display: block;
    }

    .collection-toolbar {
        flex-wrap: wrap;

        gap: 14px;
    }

    .mobile-filter-toggle,
    .filter-toggle {
        display: inline-flex;
    }


    /* =====================================================
       PRODUCT
    ===================================================== */

    .product-detail-grid,
    .product-details-grid {
        grid-template-columns: 1fr;

        gap: 42px;
    }

    .product-gallery {
        max-width: 700px;

        margin-left: auto;
        margin-right: auto;
    }

    .product-info {
        max-width: 700px;
    }

    .product-ingredient-grid,
    .ingredient-spotlight-grid {
        grid-template-columns: 1fr;

        gap: 36px;
    }

    .recommended-products-grid,
    .recommendation-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* =====================================================
       ACCOUNT
    ===================================================== */

    .account-layout,
    .account-grid {
        grid-template-columns: 1fr;
    }

    .account-section {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .account-support-grid,
    .support-card-grid {
        grid-template-columns: 1fr;
    }


    /* =====================================================
       STORY
    ===================================================== */

    .story-hero-grid,
    .story-beginning-grid,
    .story-texture-grid,
    .texture-story-grid,
    .story-community-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .story-routine-grid {
        grid-template-columns: 1fr;
    }


    /* =====================================================
       INGREDIENTS
    ===================================================== */

    .ingredients-hero-grid,
    .ingredient-philosophy-grid,
    .ingredient-priority-grid,
    .ingredient-education-grid,
    .ingredient-shop-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .ingredient-routine-grid {
        grid-template-columns: 1fr;
    }


    /* =====================================================
       TEXTURE GUIDE
    ===================================================== */

    .texture-guide-hero-grid,
    .texture-intro-grid,
    .porosity-grid,
    .wash-day-grid,
    .protective-guide-grid,
    .texture-guide-cta-grid {
        grid-template-columns: 1fr;
    }

    .texture-guide-hero-content,
    .porosity-intro,
    .wash-day-content,
    .protective-guide-content {
        max-width: 100%;
    }

    .texture-guide-hero-image {
        height: 540px;
    }

    .texture-routine-grid {
        grid-template-columns: 1fr;
    }

    .wash-day-image,
    .protective-guide-image {
        height: 520px;
    }


    /* =====================================================
       FAQ
    ===================================================== */

    .faq-layout {
        display: block;
    }

    .faq-sidebar {
        position: static;

        margin-bottom: 48px;
    }

    .faq-sidebar nav {
        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 0 20px;
    }

    .faq-category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .faq-support-grid {
        grid-template-columns: 1fr;

        gap: 28px;
    }


    /* =====================================================
       RETURNS
    ===================================================== */

    .return-policy-layout,
    .start-return-grid,
    .return-faq-layout,
    .return-support-grid {
        grid-template-columns: 1fr;
    }

    .return-policy-sidebar {
        position: static;
    }

    .return-policy-sidebar nav {
        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 0 20px;
    }

    .start-return-content {
        max-width: 100%;
    }

    .return-support-grid {
        gap: 30px;
    }


    /* =====================================================
       SHIPPING
    ===================================================== */

    .shipping-hero-grid,
    .shipping-details-layout,
    .tracking-help-grid,
    .shipping-faq-layout,
    .shipping-support-grid {
        grid-template-columns: 1fr;
    }

    .shipping-sidebar {
        position: static;
    }

    .shipping-sidebar nav {
        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 0 20px;
    }

    .shipping-hero-content,
    .tracking-help-content {
        max-width: 100%;
    }

    .shipping-hero-image {
        height: 520px;
    }

    .shipping-support-grid {
        gap: 30px;
    }


    /* =====================================================
       SUPPORT
    ===================================================== */

    .support-info-grid,
    .contact-support-grid,
    .support-faq-layout {
        grid-template-columns: 1fr;
    }

    .support-info-content,
    .contact-support-content,
    .support-faq-heading {
        max-width: 100%;
    }

    .support-faq-layout {
        gap: 40px;
    }


    /* =====================================================
       CONTACT
    ===================================================== */

    .contact-hero-grid,
    .contact-form-grid,
    .contact-community-grid {
        grid-template-columns: 1fr;
    }

    .contact-hero-content,
    .contact-form-content,
    .contact-community-content {
        max-width: 100%;
    }

    .contact-hero-image {
        height: 520px;
    }

    .business-contact-grid {
        grid-template-columns: 1fr;
    }


    /* =====================================================
       PRIVACY
    ===================================================== */

    .privacy-layout,
    .privacy-help-grid {
        grid-template-columns: 1fr;
    }

    .privacy-sidebar {
        position: static;
    }

    .privacy-sidebar nav {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 0 20px;
    }

    .privacy-summary-grid {
        grid-template-columns: 1fr;
    }

    .privacy-help-grid {
        gap: 28px;
    }


    /* =====================================================
       TERMS
    ===================================================== */

    .terms-layout,
    .terms-help-grid {
        grid-template-columns: 1fr;
    }

    .terms-sidebar {
        position: static;
    }

    .terms-sidebar nav {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 0 20px;
    }

    .terms-summary-grid {
        grid-template-columns: 1fr;
    }

    .terms-help-grid {
        gap: 28px;
    }


    /* =====================================================
       ACCESSIBILITY
    ===================================================== */

    .accessibility-layout,
    .accessibility-help-grid {
        grid-template-columns: 1fr;
    }

    .accessibility-sidebar {
        position: static;
    }

    .accessibility-sidebar nav {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 0 20px;
    }

    .accessibility-summary-grid {
        grid-template-columns: 1fr;
    }

    .accessibility-help-grid {
        gap: 28px;
    }

}


/* =========================================================
   5. SMALL TABLET
   ========================================================= */

@media screen and (max-width: 750px) {

    /* -----------------------------------------------------
       GLOBAL
    ----------------------------------------------------- */

    .container {
        width: 90%;
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .nav-container {
        min-height: 66px;
    }

    .brand-logo {
        font-size: 21px;
    }


    /* -----------------------------------------------------
       BUTTONS
    ----------------------------------------------------- */

    .button {
        min-height: 46px;

        padding-left: 20px;
        padding-right: 20px;
    }


    /* -----------------------------------------------------
       NEWSLETTER
    ----------------------------------------------------- */

    .newsletter-input-group {
        display: flex;

        flex-direction: column;

        gap: 10px;
    }

    .newsletter-input-group input,
    .newsletter-input-group .button {
        width: 100%;
    }


    /* -----------------------------------------------------
       PRODUCT PAGE
    ----------------------------------------------------- */

    .product-info-cards,
    .product-benefit-grid,
    .product-details-cards {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------------------
       ACCOUNT PAGE
    ----------------------------------------------------- */

    .register-form-row,
    .account-form-row {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   6. MOBILE
   ========================================================= */

@media screen and (max-width: 650px) {

    /* -----------------------------------------------------
       GLOBAL
    ----------------------------------------------------- */

    .container {
        width: 90%;
    }

    .section-spacing {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    h1 {
        line-height: 1.1;
    }

    h2 {
        line-height: 1.2;
    }


    /* -----------------------------------------------------
       ANNOUNCEMENT BAR
    ----------------------------------------------------- */

    .announcement-bar {
        min-height: auto;
    }

    .announcement-inner {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .announcement-inner p {
        font-size: 11px;

        line-height: 1.4;

        text-align: center;
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .nav-container {
        width: 94%;

        min-height: 64px;

        gap: 8px;
    }

    .brand-logo {
        font-size: 19px;
    }

    .header-actions {
        gap: 4px;
    }

    .account-button,
    .cart-button,
    .mobile-menu-button {
        min-width: 40px;
        min-height: 40px;
    }

    .cart-count {
        font-size: 10px;
    }


    /* -----------------------------------------------------
       MOBILE NAVIGATION
    ----------------------------------------------------- */

    .mobile-navigation-drawer {
        width: 330px;
        max-width: 90%;
    }

    .drawer-header {
        padding: 20px;
    }

    .mobile-navigation-links {
        padding-left: 20px;
        padding-right: 20px;
    }

    .mobile-drawer-footer {
        padding-left: 20px;
        padding-right: 20px;
    }


    /* -----------------------------------------------------
       CART
    ----------------------------------------------------- */

    .cart-drawer {
        width: 100%;
        max-width: 94%;
    }

    .cart-items,
    .cart-drawer-footer {
        padding-left: 20px;
        padding-right: 20px;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .footer-grid {
        grid-template-columns: 1fr;

        gap: 34px;
    }

    .footer-brand {
        max-width: 500px;
    }

    .footer-bottom {
        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 14px;
    }

    .legal-links {
        display: flex;

        flex-wrap: wrap;

        gap: 14px;
    }


    /* =====================================================
       HOMEPAGE
    ===================================================== */

    .hero {
        padding-top: 48px;
        padding-bottom: 64px;
    }

    .hero-content h1 {
        font-size: 39px;
    }

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

    .hero-actions {
        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 14px;
    }

    .hero-image,
    .hero-media {
        min-height: 400px;
    }

    .shop-needs-grid,
    .needs-grid,
    .hair-type-grid {
        grid-template-columns: 1fr;
    }

    .community-grid,
    .ingredients-grid,
    .story-grid {
        gap: 30px;
    }

    .community-image,
    .story-image {
        min-height: 400px;
    }


    /* =====================================================
       COLLECTION
    ===================================================== */

    .collection-section {
        padding-top: 54px;
        padding-bottom: 72px;
    }

    .collection-hero {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .collection-toolbar {
        align-items: stretch;

        flex-direction: column;
    }

    .collection-toolbar select {
        width: 100%;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .collection-filters {
        width: 100%;
    }


    /* =====================================================
       PRODUCT
    ===================================================== */

    .product-main-section,
    .product-section {
        padding-top: 48px;
        padding-bottom: 64px;
    }

    .product-gallery {
        width: 100%;
    }

    .main-product-image,
    .product-main-image {
        height: 440px;
    }

    .product-thumbnails,
    .thumbnail-list {
        overflow-x: auto;

        display: flex;

        flex-direction: row;
    }

    .product-thumbnail,
    .thumbnail-button {
        flex-shrink: 0;
    }

    .product-info h1,
    #product-name {
        font-size: 34px;
    }

    .product-options,
    .size-options {
        flex-wrap: wrap;
    }

    .product-purchase-row,
    .purchase-actions {
        flex-direction: column;

        align-items: stretch;
    }

    .product-add-to-cart,
    #product-add-to-cart {
        width: 100%;
    }

    .recommended-products-grid,
    .recommendation-grid {
        grid-template-columns: 1fr;
    }


    /* =====================================================
       ACCOUNT
    ===================================================== */

    .account-hero {
        padding-top: 48px;
        padding-bottom: 52px;
    }

    .account-hero h1 {
        font-size: 38px;
    }

    .account-section,
    .register-section,
    .password-reset-section {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .account-card,
    .login-card,
    .register-card,
    .password-reset-card {
        padding: 24px;
    }


    /* =====================================================
       STORY
    ===================================================== */

    .story-hero {
        padding-top: 48px;
        padding-bottom: 64px;
    }

    .story-hero h1 {
        font-size: 39px;
    }

    .story-hero-image {
        height: 450px;
    }

    .story-beginning-section,
    .story-values-section,
    .story-texture-section,
    .story-routine-section,
    .story-community-section {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .story-values-grid,
    .values-grid {
        grid-template-columns: 1fr;
    }


    /* =====================================================
       INGREDIENTS
    ===================================================== */

    .ingredients-hero {
        padding-top: 48px;
        padding-bottom: 64px;
    }

    .ingredients-hero h1 {
        font-size: 39px;
    }

    .ingredients-hero-image {
        height: 430px;
    }

    .ingredient-library-grid {
        grid-template-columns: 1fr;
    }

    .ingredient-library-image {
        height: 330px;
    }

    .ingredient-philosophy-section,
    .ingredient-library-section,
    .ingredient-routine-section,
    .ingredient-priority-section,
    .ingredient-education-section,
    .ingredient-shop-section {
        padding-top: 72px;
        padding-bottom: 72px;
    }


    /* =====================================================
       TEXTURE GUIDE
    ===================================================== */

    .texture-guide-hero {
        padding: 48px 0 64px;
    }

    .texture-guide-hero-content h1 {
        font-size: 39px;
    }

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

    .texture-hero-actions {
        align-items: flex-start;

        flex-direction: column;
    }

    .texture-guide-hero-image {
        height: 430px;
    }

    .texture-intro-section,
    .porosity-section,
    .wash-day-section,
    .routine-mistakes-section {
        padding: 72px 0;
    }

    .texture-intro-section h2,
    .texture-section-heading h2,
    .porosity-intro h2,
    .wash-day-content h2,
    .protective-guide-content h2 {
        font-size: 35px;
    }

    .texture-type-grid {
        grid-template-columns: 1fr;
    }

    .texture-type-image {
        height: 350px;
    }

    .mistakes-grid {
        grid-template-columns: 1fr;
    }

    .wash-day-image,
    .protective-guide-image {
        height: 440px;
    }

    .texture-guide-cta {
        padding: 64px 0;
    }

    .texture-guide-cta h2 {
        font-size: 35px;
    }

    .texture-guide-cta-actions {
        align-items: flex-start;

        flex-direction: column;
    }


    /* =====================================================
       FAQ
    ===================================================== */

    .faq-hero {
        padding: 48px 0 56px;
    }

    .faq-hero h1 {
        font-size: 39px;
    }

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

    .faq-search-form {
        flex-direction: column;
    }

    .faq-search-form .button {
        width: 100%;
    }

    .faq-category-section {
        padding: 36px 0;
    }

    .faq-category-grid {
        grid-template-columns: 1fr 1fr;
    }

    .faq-category-card {
        min-height: 130px;

        padding: 18px;
    }

    .faq-main-section {
        padding: 64px 0;
    }

    .faq-sidebar nav {
        grid-template-columns: 1fr;
    }

    .faq-group {
        margin-bottom: 64px;
    }

    .faq-group-header h2 {
        font-size: 32px;
    }

    .faq-item summary {
        padding-top: 20px;
        padding-bottom: 20px;

        font-size: 14px;
    }

    .faq-support-section {
        padding: 64px 0;
    }

    .faq-support-grid h2 {
        font-size: 35px;
    }

    .faq-support-actions {
        align-items: flex-start;

        flex-direction: column;
    }


    /* =====================================================
       RETURNS
    ===================================================== */

    .returns-hero {
        padding: 48px 0 56px;
    }

    .returns-hero h1 {
        font-size: 38px;
    }

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

    .returns-hero-actions {
        flex-direction: column;

        gap: 18px;
    }

    .return-summary-grid,
    .return-process-grid {
        grid-template-columns: 1fr;
    }

    .return-policy-section,
    .start-return-section {
        padding: 72px 0;
    }

    .return-policy-sidebar nav {
        grid-template-columns: 1fr;
    }

    .return-policy-block h2,
    .returns-section-heading h2,
    .start-return-content h2 {
        font-size: 34px;
    }

    .return-form-card {
        padding: 26px;
    }

    .return-form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .return-faq-heading h2 {
        font-size: 32px;
    }

    .return-support-section {
        padding: 64px 0;
    }

    .return-support-grid h2 {
        font-size: 35px;
    }

    .return-support-actions {
        align-items: flex-start;

        flex-direction: column;
    }


    /* =====================================================
       SHIPPING
    ===================================================== */

    .shipping-hero {
        padding: 48px 0 64px;
    }

    .shipping-hero-content h1 {
        font-size: 39px;
    }

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

    .shipping-hero-actions {
        align-items: flex-start;

        flex-direction: column;
    }

    .shipping-hero-image {
        height: 420px;
    }

    .shipping-summary-grid,
    .order-journey-grid,
    .shipping-issues-grid {
        grid-template-columns: 1fr;
    }

    .shipping-details-section,
    .tracking-help-section,
    .shipping-faq-section {
        padding: 72px 0;
    }

    .shipping-sidebar nav {
        grid-template-columns: 1fr;
    }

    .shipping-policy-block h2,
    .shipping-section-heading h2,
    .tracking-help-content h2 {
        font-size: 34px;
    }

    .delivery-table-wrapper {
        width: 100%;

        overflow-x: auto;
    }

    .delivery-table {
        min-width: 620px;
    }

    .delivery-table th,
    .delivery-table td {
        min-width: 170px;

        padding: 14px;
    }

    .tracking-tips {
        grid-template-columns: 1fr;
    }

    .tracking-card {
        padding: 26px;
    }

    .shipping-faq-heading h2 {
        font-size: 32px;
    }

    .shipping-support-section {
        padding: 64px 0;
    }

    .shipping-support-grid h2 {
        font-size: 35px;
    }

    .shipping-support-actions {
        align-items: flex-start;

        flex-direction: column;
    }


    /* =====================================================
       SUPPORT
    ===================================================== */

    .support-hero {
        padding: 48px 0 56px;
    }

    .support-hero h1 {
        font-size: 39px;
    }

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

    .support-hero-actions {
        flex-direction: column;

        gap: 18px;
    }

    .support-quick-grid {
        grid-template-columns: 1fr;
    }

    .support-info-section,
    .contact-support-section,
    .support-faq-section,
    .self-service-section {
        padding: 72px 0;
    }

    .support-info-content h2,
    .contact-support-content h2,
    .support-section-heading h2 {
        font-size: 35px;
    }

    .support-form-card {
        padding: 26px;
    }

    .support-form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .support-faq-heading h2 {
        font-size: 32px;
    }

    .self-service-grid {
        grid-template-columns: 1fr;
    }

    .support-final-section {
        padding: 64px 0;
    }

    .support-final-section h2 {
        font-size: 36px;
    }

    .support-final-actions {
        flex-direction: column;
    }


    /* =====================================================
       CONTACT
    ===================================================== */

    .contact-hero {
        padding: 48px 0 64px;
    }

    .contact-hero-content h1 {
        font-size: 39px;
    }

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

    .contact-hero-actions {
        flex-direction: column;

        align-items: flex-start;
    }

    .contact-hero-image {
        height: 420px;
    }

    .contact-options-grid,
    .contact-help-grid {
        grid-template-columns: 1fr;
    }

    .contact-form-section,
    .contact-help-section {
        padding: 72px 0;
    }

    .contact-form-content h2,
    .contact-section-heading h2,
    .contact-community-content h2 {
        font-size: 35px;
    }

    .contact-form-card {
        padding: 26px;
    }

    .contact-form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .contact-community-section {
        padding: 72px 0;
    }

    .contact-social-grid {
        grid-template-columns: 1fr;
    }

    .contact-final-section {
        padding: 64px 0;
    }

    .contact-final-section h2 {
        font-size: 36px;
    }

    .contact-final-actions {
        flex-direction: column;
    }


    /* =====================================================
       PRIVACY
    ===================================================== */

    .privacy-hero {
        padding: 48px 0 56px;
    }

    .privacy-hero h1 {
        font-size: 39px;
    }

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

    .privacy-updated {
        align-items: flex-start;

        flex-direction: column;

        gap: 3px;
    }

    .privacy-content-section {
        padding: 72px 0;
    }

    .privacy-sidebar nav {
        grid-template-columns: 1fr;
    }

    .privacy-policy-block {
        margin-bottom: 48px;

        padding-bottom: 48px;
    }

    .privacy-policy-block h2 {
        font-size: 32px;
    }

    .privacy-service-grid {
        grid-template-columns: 1fr;
    }

    .privacy-help-section {
        padding: 64px 0;
    }

    .privacy-help-grid h2 {
        font-size: 35px;
    }

    .privacy-help-actions {
        align-items: flex-start;

        flex-direction: column;
    }


    /* =====================================================
       TERMS
    ===================================================== */

    .terms-hero {
        padding: 48px 0 56px;
    }

    .terms-hero h1 {
        font-size: 39px;
    }

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

    .terms-updated {
        flex-direction: column;

        align-items: flex-start;

        gap: 3px;
    }

    .terms-content-section {
        padding: 72px 0;
    }

    .terms-sidebar nav {
        grid-template-columns: 1fr;
    }

    .terms-policy-block {
        margin-bottom: 48px;

        padding-bottom: 48px;
    }

    .terms-policy-block h2 {
        font-size: 32px;
    }

    .terms-related-section {
        padding: 72px 0;
    }

    .terms-related-heading h2 {
        font-size: 35px;
    }

    .terms-related-grid {
        grid-template-columns: 1fr;
    }

    .terms-help-section {
        padding: 64px 0;
    }

    .terms-help-grid h2 {
        font-size: 35px;
    }

    .terms-help-actions {
        flex-direction: column;

        align-items: flex-start;
    }


    /* =====================================================
       ACCESSIBILITY
    ===================================================== */

    .accessibility-hero {
        padding: 48px 0 56px;
    }

    .accessibility-hero h1 {
        font-size: 38px;
    }

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

    .accessibility-updated {
        flex-direction: column;

        align-items: flex-start;

        gap: 3px;
    }

    .accessibility-content-section {
        padding: 72px 0;
    }

    .accessibility-sidebar nav {
        grid-template-columns: 1fr;
    }

    .accessibility-policy-block {
        margin-bottom: 48px;

        padding-bottom: 48px;
    }

    .accessibility-policy-block h2 {
        font-size: 32px;
    }

    .accessibility-feature-grid {
        grid-template-columns: 1fr;
    }

    .accessibility-help-section {
        padding: 64px 0;
    }

    .accessibility-help-grid h2 {
        font-size: 35px;
    }

    .accessibility-help-actions {
        flex-direction: column;

        align-items: flex-start;
    }

    .accessibility-related-section {
        padding: 72px 0;
    }

    .accessibility-related-heading h2 {
        font-size: 35px;
    }

    .accessibility-related-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   7. SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 600px) {

    /* -----------------------------------------------------
       GLOBAL
    ----------------------------------------------------- */

    .container {
        width: 91%;
    }


    /* -----------------------------------------------------
       BUTTONS
    ----------------------------------------------------- */

    .button {
        font-size: 13px;
    }


    /* -----------------------------------------------------
       HOMEPAGE
    ----------------------------------------------------- */

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

    .hero-image,
    .hero-media {
        min-height: 350px;
    }


    /* -----------------------------------------------------
       COLLECTION
    ----------------------------------------------------- */

    .product-grid {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------------------
       PRODUCT
    ----------------------------------------------------- */

    .main-product-image,
    .product-main-image {
        height: 390px;
    }


    /* -----------------------------------------------------
       FAQ
    ----------------------------------------------------- */

    .faq-category-grid {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------------------
       NEWSLETTER
    ----------------------------------------------------- */

    .newsletter-copy h2 {
        font-size: 30px;
    }

}


/* =========================================================
   8. SMALL PHONES
   ========================================================= */

@media screen and (max-width: 420px) {

    /* -----------------------------------------------------
       GLOBAL
    ----------------------------------------------------- */

    .container {
        width: 92%;
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .nav-container {
        width: 96%;
    }

    .brand-logo {
        font-size: 17px;
    }

    .account-button {
        display: none;
    }

    .cart-button,
    .mobile-menu-button {
        min-width: 38px;
        min-height: 38px;
    }


    /* -----------------------------------------------------
       MOBILE DRAWERS
    ----------------------------------------------------- */

    .mobile-navigation-drawer,
    .cart-drawer {
        max-width: 96%;
    }


    /* -----------------------------------------------------
       HOMEPAGE
    ----------------------------------------------------- */

    .hero {
        padding-top: 40px;
        padding-bottom: 52px;
    }

    .hero-content h1 {
        font-size: 33px;
    }

    .hero-image,
    .hero-media {
        min-height: 320px;
    }

    .community-image,
    .story-image {
        min-height: 330px;
    }


    /* =====================================================
       PRODUCT
    ===================================================== */

    .main-product-image,
    .product-main-image {
        height: 340px;
    }

    .product-info h1,
    #product-name {
        font-size: 30px;
    }

    .product-info,
    .product-details-card,
    .product-benefit-card {
        padding-left: 0;
        padding-right: 0;
    }


    /* =====================================================
       ACCOUNT
    ===================================================== */

    .account-hero h1 {
        font-size: 33px;
    }

    .account-card,
    .login-card,
    .register-card,
    .password-reset-card {
        padding: 20px 18px;
    }


    /* =====================================================
       STORY
    ===================================================== */

    .story-hero h1 {
        font-size: 33px;
    }

    .story-hero-image {
        height: 370px;
    }


    /* =====================================================
       INGREDIENTS
    ===================================================== */

    .ingredients-hero h1 {
        font-size: 34px;
    }

    .ingredients-hero-image {
        height: 370px;
    }

    .ingredient-library-image {
        height: 290px;
    }

    .ingredient-library-content,
    .ingredient-routine-card {
        padding: 22px;
    }


    /* =====================================================
       TEXTURE GUIDE
    ===================================================== */

    .texture-guide-hero-content h1 {
        font-size: 34px;
    }

    .texture-guide-hero-image {
        height: 370px;
    }

    .texture-type-image {
        height: 300px;
    }

    .texture-type-content,
    .texture-routine-card,
    .mistake-card {
        padding: 22px;
    }

    .wash-day-image,
    .protective-guide-image {
        height: 370px;
    }


    /* =====================================================
       FAQ
    ===================================================== */

    .faq-hero h1 {
        font-size: 34px;
    }

    .faq-category-grid {
        grid-template-columns: 1fr;
    }

    .faq-category-card {
        min-height: auto;
    }

    .faq-sidebar {
        padding: 20px;
    }

    .faq-item summary {
        padding-right: 44px;
    }

    .faq-answer {
        padding-right: 12px;
    }


    /* =====================================================
       RETURNS
    ===================================================== */

    .returns-hero h1 {
        font-size: 33px;
    }

    .return-summary-card,
    .return-process-card {
        padding: 22px;
    }

    .return-form-card {
        padding: 22px 18px;
    }

    .return-faq-item summary {
        padding-right: 44px;

        font-size: 14px;
    }

    .return-faq-item > div {
        padding-right: 12px;
    }


    /* =====================================================
       SHIPPING
    ===================================================== */

    .shipping-hero-content h1 {
        font-size: 34px;
    }

    .shipping-hero-image {
        height: 360px;
    }

    .shipping-summary-card,
    .order-journey-card,
    .shipping-issue-card {
        padding: 22px;
    }

    .tracking-card {
        padding: 22px 18px;
    }

    .shipping-faq-item summary {
        padding-right: 44px;

        font-size: 14px;
    }

    .shipping-faq-item > div {
        padding-right: 12px;
    }


    /* =====================================================
       SUPPORT
    ===================================================== */

    .support-hero h1 {
        font-size: 34px;
    }

    .support-quick-card,
    .self-service-card {
        padding: 22px;
    }

    .support-info-item {
        gap: 14px;
    }

    .support-form-card {
        padding: 22px 18px;
    }

    .support-faq-item summary {
        padding-right: 44px;

        font-size: 14px;
    }

    .support-faq-item > div {
        padding-right: 12px;
    }

    .support-final-section h2 {
        font-size: 32px;
    }


    /* =====================================================
       CONTACT
    ===================================================== */

    .contact-hero-content h1 {
        font-size: 34px;
    }

    .contact-hero-image {
        height: 360px;
    }

    .contact-option-card,
    .business-contact-card,
    .contact-help-card {
        padding: 22px;
    }

    .contact-form-card {
        padding: 22px 18px;
    }

    .contact-social-card {
        min-height: 110px;
    }

    .contact-final-section h2 {
        font-size: 32px;
    }


    /* =====================================================
       PRIVACY
    ===================================================== */

    .privacy-hero h1 {
        font-size: 34px;
    }

    .privacy-summary-card {
        padding: 22px;
    }

    .privacy-sidebar {
        padding: 20px;
    }

    .privacy-policy-block h2 {
        font-size: 29px;
    }

    .privacy-note-box,
    .privacy-contact-box {
        padding: 20px;
    }


    /* =====================================================
       TERMS
    ===================================================== */

    .terms-hero h1 {
        font-size: 34px;
    }

    .terms-summary-card,
    .terms-related-card {
        padding: 22px;
    }

    .terms-sidebar {
        padding: 20px;
    }

    .terms-policy-block h2 {
        font-size: 29px;
    }

    .terms-note-box,
    .terms-important-box,
    .terms-contact-box {
        padding: 20px;
    }


    /* =====================================================
       ACCESSIBILITY
    ===================================================== */

    .accessibility-hero h1 {
        font-size: 33px;
    }

    .accessibility-summary-card,
    .accessibility-related-card {
        padding: 22px;
    }

    .accessibility-sidebar {
        padding: 20px;
    }

    .accessibility-policy-block h2 {
        font-size: 29px;
    }

    .accessibility-note-box,
    .accessibility-important-box,
    .accessibility-contact-box {
        padding: 20px;
    }

}


/* =========================================================
   9. VERY SMALL SCREENS
   ========================================================= */

@media screen and (max-width: 360px) {

    .container {
        width: 94%;
    }

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

    .hero-content h1,
    .story-hero h1,
    .ingredients-hero h1,
    .texture-guide-hero-content h1,
    .faq-hero h1,
    .returns-hero h1,
    .shipping-hero-content h1,
    .support-hero h1,
    .contact-hero-content h1,
    .privacy-hero h1,
    .terms-hero h1,
    .accessibility-hero h1 {
        font-size: 30px;
    }

    .button {
        width: 100%;

        text-align: center;
    }

    .hero-actions,
    .returns-hero-actions,
    .shipping-hero-actions,
    .support-hero-actions,
    .contact-hero-actions,
    .texture-hero-actions,
    .privacy-help-actions,
    .terms-help-actions,
    .accessibility-help-actions {
        width: 100%;
    }

}


/* =========================================================
   CART DRAWER RESPONSIVE FIXES
   ========================================================= */

@media screen and (max-width: 650px) {

    .cart-drawer {
        width: 390px;
        max-width: 94%;
    }

    .cart-drawer .drawer-header {
        padding: 20px;
    }

    .cart-items {
        padding: 20px;
    }

    .cart-drawer-footer {
        padding: 18px 20px 22px;
    }

    .cart-item {
        grid-template-columns: 82px 1fr;

        gap: 14px;
    }

    .cart-item-image {
        width: 82px;
        height: 100px;
    }

    .cart-item-details h3 {
        font-size: 17px;
    }

}


@media screen and (max-width: 420px) {

    .cart-drawer {
        width: 100%;
        max-width: 100%;
    }

    .cart-drawer .drawer-header {
        padding: 18px;
    }

    .cart-items {
        padding: 18px;
    }

    .cart-drawer-footer {
        padding: 18px;
    }

    .cart-item {
        grid-template-columns: 76px 1fr;

        gap: 12px;

        padding: 18px 0;
    }

    .cart-item-image {
        width: 76px;
        height: 92px;
    }

    .cart-item-details h3 {
        font-size: 16px;
    }

    .cart-item-controls {
        align-items: flex-start;

        flex-direction: column;
    }

    .cart-item-quantity button {
        width: 32px;
        height: 32px;
    }

    .cart-item-quantity span {
        min-width: 30px;
    }

}