/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (max-width: 1400px) {

  html {
    font-size: 8px;
  }

}

@media (min-width: 1600px) {

  html {
    font-size: 11px;
  }

}

@media (min-width: 1800px) {

  html {
    font-size: 12px;
  }

}

@media (min-width: 2200px) {

  html {
    font-size: 13px;
  }

}


/* =========================================================
   TABLET / SMALL DESKTOP
========================================================= */

@media (max-width: 1100px) {

  /* GENERAL */

  .container {
    padding: 0 3rem;
  }


  /* =====================================================
     HEADER - MOBILE MODE STARTS HERE
  ===================================================== */

  .header {
    padding: 1.5rem 3rem;
  }

  .navbar {
    border-radius: 999rem;
  }

  .navbar-inner {
    padding: 1.4rem 2.5rem;
  }

  .navbar .navbar-inner .logo {
    width: 16rem;
  }

  /* HIDE DESKTOP NAV */

  .nav {
    display: none;
  }

  /* SHOW MOBILE CONTROLS */

  .menu-toggle,
  .mobile-home {
    display: block;
  }

  /* HIDE DESKTOP SEARCH + LANGUAGE */

  .search-btn,
  .lang-select {
    display: none;
  }

  /* SHOW MOBILE SEARCH */

  .icon-mobile-search {
    display: block;
  }

  /* SCROLLED */

  .header.scrolled .navbar {
    width: 100%;
  }

  .header.scrolled .navbar .navbar-inner {
    padding: 1.2rem 2rem;
  }

  .header.scrolled .navbar .navbar-inner .logo {
    width: 14rem;
  }


  /* =====================================================
     SIDE MENU
  ===================================================== */

  .side-inner {
    padding: 3rem;
  }

  .side-top {
    margin-bottom: 5rem;
  }

  .side-top img {
    width: 16rem;
  }

  .side-nav {
    gap: 2.5rem;
  }

  .side-nav a {
    font-size: 2.2rem;
    line-height: 2.8rem;
  }


  /* =====================================================
     MOBILE PRODUCT ACCORDION
  ===================================================== */

  .side-accordion {
    width: 100%;
  }

  .side-accordion-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0;

    border: 0;
    background: transparent;

    font-family: var(--font-general);
    font-size: 2.4rem;
    line-height: 3rem;
    font-weight: 600;

    color: var(--dark);

    text-align: left;
    cursor: pointer;
  }

  .side-accordion-arrow {
    width: 1rem;
    height: 1rem;

    border-right: .2rem solid var(--dark);
    border-bottom: .2rem solid var(--dark);

    transform: rotate(45deg);
    transition: transform .3s ease;
  }

  .side-accordion.open .side-accordion-arrow {
    transform: rotate(-135deg);
  }

  .side-accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
  }

  .side-accordion-inner {
    overflow: hidden;

    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    padding-left: 2rem;
  }

  .side-accordion.open .side-accordion-content {
    grid-template-rows: 1fr;
  }

  .side-accordion.open .side-accordion-inner {
    padding-top: 2rem;
  }

  .side-accordion-inner a {
    font-size: 1.8rem;
    line-height: 2.4rem;
    font-weight: 400;

    color: var(--dark);
    text-decoration: none;
  }


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

  .hero {
    min-height: 75dvh;
  }

  .hero-int {
    min-height: 45rem;
  }

  .hero-content {
    width: 65%;
    padding: 5rem 3rem;
  }

  .hero-content h1 {
    font-size: 4.2rem;
    line-height: 4.4rem;
  }


  /* =====================================================
     ABOUT HOME
  ===================================================== */

  .split-section {
    gap: 3rem;
  }

  .intro .about-box h2 {
    font-size: 6rem;
    line-height: 5.4rem;
  }

  .intro .about-box h3 {
    font-size: 3.8rem;
    line-height: 3.4rem;
  }


  /* =====================================================
     PARTNERS
  ===================================================== */

  .partners-grid {
    gap: 3rem;
  }

  .partner-card {
    padding: 3rem;
  }

  .partner-content h2 {
    font-size: 3.4rem;
    line-height: 3.2rem;
  }


  /* =====================================================
     BRANDS
  ===================================================== */

  .brands-box {
    padding: 5rem 4rem;
  }

  .brands-grid {
    gap: 3rem;
  }


  /* =====================================================
     BLOG
  ===================================================== */

  .news-grid {
    gap: 2.5rem;
  }


  /* =====================================================
     ANDINA SELECTION
  ===================================================== */

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


  /* =====================================================
     CATEGORIES
  ===================================================== */

  .categories-grid {
    gap: 2.5rem;
  }


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

  .product-detail {
    gap: 4rem;
  }


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

  .footer-top {
    flex-wrap: wrap;
  }

  .footer-left {
    gap: 5rem;
    flex-wrap: wrap;
  }

  .footer-right {
    width: 100%;
    margin-left: 0;
    text-align: right;
  }
  
  /* =====================================================
     SEARCH
  ===================================================== */
  
  .search-panel {
    width: calc(100% - 6rem);
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  /* ABOUT */

  .split-section {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .intro .about-box h2 {
    font-size: 5rem;
    line-height: 4.6rem;
  }

  .intro .about-box h3 {
    font-size: 3rem;
    line-height: 3rem;
  }


  /* PARTNERS */

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

  .partner-card {
    min-height: 32rem;
  }

  .partner-content {
    max-width: 45rem;
  }


  /* BRANDS */

  .brands-grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }


  /* BLOG */

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


  /* CATEGORIES */

  .categories-grid {
    grid-template-columns: 1fr;
    gap: 5rem;
  }

  .category-image {
    max-width: 55rem;
    margin-left: auto;
    margin-right: auto;
  }


  /* PRODUCT FILTERS */

  .product-filters {
    max-width: 60rem;
  }


  /* PRODUCT DETAIL */

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

  .product-detail-image {
    min-height: 34rem;
  }

  .product-detail-info h1 {
    margin-top: 1rem;
  }

  .product-specs {
    margin-top: 4rem;
  }


  /* FOOTER */

  .footer-left {
    width: 100%;
    justify-content: space-between;
  }
  
  /* FILTER */
  
.filter-panel {
    width: 50rem;
  }

  .filter-panel-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  html {
    font-size: 9px;
  }


  /* =====================================================
     GENERAL
  ===================================================== */

  .container {
    padding: 0 2rem;
  }


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

  .header {
    padding: 1.2rem 2rem;
  }

  .navbar-inner {
    padding: 1.3rem 2rem;
  }

  .navbar .navbar-inner .logo {
    width: 15rem;
  }

  .header.scrolled .navbar .navbar-inner {
    padding: 1.2rem 2rem;
  }

  .header.scrolled .navbar .navbar-inner .logo {
    width: 13rem;
  }


  /* =====================================================
     SIDE MENU
  ===================================================== */

  .side-inner {
    padding: 3rem 2rem;
  }

  .side-top img {
    width: 15rem;
  }


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

  .hero {
    min-height: 75dvh;
  }

  .hero-int {
    min-height: 38rem;
  }

  .hero-content {
    width: 100%;
    padding: 10rem 2rem 5rem;
  }

  .hero-content h1 {
    font-size: 3.2rem;
    line-height: 3.5rem;
  }

  .hero-content p {
    font-size: 1.7rem;
    line-height: 2.5rem;
  }

  .shadow {
    background: linear-gradient(
      0deg,
      var(--dark) 0%,
      color-mix(in srgb, var(--dark) 0%, transparent) 100%
    );
  }


  /* =====================================================
     BUTTON
  ===================================================== */

  .btn-primary {
    height: 4.6rem;
    font-size: 1.4rem;
  }


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

  .intro::before,
  .intro::after {
    height: 6rem;
  }

  .intro::before {
    top: -6rem;
  }

  .intro::after {
    bottom: -6rem;
  }

  .intro .about-box h2 {
    font-size: 4.8rem;
    line-height: 4.3rem;
  }

  .intro .about-box h3 {
    font-size: 2.8rem;
    line-height: 2.8rem;
  }


  /* =====================================================
     PARTNERS
  ===================================================== */

  .partners {
    padding: 6rem 0 4rem;
  }

  .partner-card {
    min-height: auto;
    padding: 4rem 3rem;
  }

  .partner-content h2 {
    font-size: 3rem;
    line-height: 2.9rem;
  }

  .partner-content p {
    font-size: 1.5rem;
    line-height: 2.1rem;
  }


  /* =====================================================
     BRANDS
  ===================================================== */

  .brands {
    padding: 4rem 0;
  }

  .brands-box {
    padding: 4rem 2rem;
  }

  .brands-header {
    margin-bottom: 4rem;
  }

  .brands-header h2 {
    font-size: 3rem;
  }

  .brand-item {
    min-height: auto;
  }


  /* =====================================================
     BLOG
  ===================================================== */

  .news {
    padding: 5rem 0;
  }

  .news-header {
    margin-bottom: 4rem;
  }

  .news-header h2 {
    font-size: 3rem;
  }

  .news-content h3 {
    font-size: 1.6rem;
    line-height: 2.1rem;
  }


  /* =====================================================
     SELECTION
  ===================================================== */

  .selection {
    padding: 5rem 0;
  }

  .selection-header h2 {
    font-size: 3rem;
    line-height: 3rem;
  }

  .selection-header p {
    font-size: 1.4rem;
    line-height: 2rem;
  }

  .selection-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .product-card {
    min-height: auto;
  }

  .product-image {
    height: 20rem;
  }


  /* =====================================================
     CATEGORIES
  ===================================================== */

  .categories {
    padding: 10rem 0 5rem;
  }

  .categories-header {
    margin-bottom: 4rem;
  }

  .categories-header h2 {
    font-size: 3rem;
    line-height: 3.2rem;
  }

  .category-item h3 {
    font-size: 2.4rem;
  }

  .category-item p {
    font-size: 1.5rem;
    line-height: 2.1rem;
  }


  /* =====================================================
     PATTERN
  ===================================================== */

  .pattern-strip {
    height: 8rem;
    background-size: auto 6rem;
  }


  /* =====================================================
     INTERIOR
  ===================================================== */

  .interior {
    padding-top: 14rem;
    padding-bottom: 5rem;
    background-size: auto 25rem;
  }

  .interior-header h2 {
    font-size: 3rem;
  }

  .interior-header p {
    font-size: 1.4rem;
  }


  /* =====================================================
     SELL CTA
  ===================================================== */

  .sell-cta {
    padding: 4rem 0;
  }

  .sell-icons {
    gap: 3rem;
    margin-bottom: 3rem;
  }

  .sell-icons img {
    width: 3.5rem;
  }

  .sell-cta h2 {
    font-size: 3rem;
    line-height: 3.2rem;
    margin-bottom: 3rem;
  }


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

  .product-filters {
    grid-template-columns: 1fr;
    max-width: 45rem;
    gap: 1rem;
  }


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

  .product-detail-image {
    min-height: 30rem;
    padding: 3rem;
  }

  .product-detail-image img {
    max-width: 80%;
    max-height: 26rem;
  }

  .product-detail-info h1 {
    font-size: 3rem;
    line-height: 3.2rem;
    margin-bottom: 3rem;
  }

  .product-detail-description {
    font-size: 1.5rem;
    line-height: 2.2rem;
  }

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


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

  .product-story {
    padding: 5rem 0;
  }

  .product-story-inner h3 {
    font-size: 1.7rem;
    line-height: 2.3rem;
    margin: 3rem 0;
  }

  .product-story-inner p {
    font-size: 1.5rem;
    line-height: 2.2rem;
  }


  /* =====================================================
     PARTNERS INFO
  ===================================================== */

  .partners-info h3 {
    font-size: 2.4rem;
    line-height: 2.8rem;
  }

  .partners-info h2 {
    font-size: 3rem;
    line-height: 3.2rem;
  }

  .partners-info p {
    font-size: 1.5rem;
    line-height: 2.2rem;
  }

  .partners-andina {
    padding: 3rem 2rem;
  }

  .partners-andina h2 {
    font-size: 2.6rem;
    line-height: 3rem;
  }

  .partners-andina-box {
    grid-template-columns: 1fr;
    gap: 3rem;
  }


  /* =====================================================
     SLOGAN
  ===================================================== */

  .slogan h1 {
    margin: 8rem 0 4rem;
    font-size: 3.2rem;
    line-height: 3.5rem;
  }


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

  .cta {
    min-height: 22rem;
    padding: 4rem 2rem;
  }

  .cta h2 {
    font-size: 3rem;
    line-height: 3.4rem;
  }


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

  .footer {
    padding-top: 4rem;
  }

  .footer-top {
    flex-direction: column;
    align-items: center;
    gap: 4rem;
  }

  .footer-left {
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }

  .footer-col-logo img {
    width: 15rem;
  }

  .footer-col {
    padding-left: 0;
    text-align: center;
    align-items: center;
  }

  .footer-col::before {
    position: relative;
    top: auto;
    left: auto;
    margin-bottom: 1rem;
  }

  .footer-right {
    width: 100%;
    text-align: center;
  }

  .footer-right a {
    font-size: 2rem;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-texture {
    padding: 0 2rem;
    margin-top: 4rem;
  }
  
  
  /* =====================================================
     SEARCH
  ===================================================== */
  .search-panel {
    width: calc(100% - 4rem);
    padding: 1.5rem;
  }

  .search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .search-field {
    width: 100%;
    height: 6rem;
    min-height: 6rem;
    flex: 0 0 6rem;
    padding: 0 2rem;
  }

  .search-input {
    height: 100%;
    font-size: 1.6rem;
  }

  .search-submit {
    width: 100%;
    height: 5.6rem;
    min-height: 5.6rem;
    flex-shrink: 0;
    font-size: 2rem;
  }

  /* =====================================================
     FILTER
  ===================================================== */

    .filter-panel {
    width: calc(100vw - 4rem);
    max-width: none;
    padding: 2rem;
  }

  .filter-panel-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .filter-actions {
    flex-direction: column;
  }

  .filter-clear,
  .filter-apply {
    width: 100%;
  }
  
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  html {
    font-size: 8px;
  }


  /* HEADER */

  .header {
    padding: 1rem;
  }

  .navbar-inner {
    padding: 1.2rem 1.8rem;
  }

  .navbar .navbar-inner .logo {
    width: 13rem;
  }


  /* HERO */

  .hero {
    min-height: 70dvh;
  }

  .hero-int {
    min-height: 34rem;
  }

  .hero-content {
    padding: 9rem 2rem 5rem;
  }

  .hero-content h1 {
    font-size: 2.8rem;
    line-height: 3.1rem;
  }


  /* ABOUT */

  .intro .about-box h2 {
    font-size: 4.2rem;
    line-height: 3.8rem;
  }

  .intro .about-box h3 {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }


  /* PARTNERS */

  .partner-content h2 {
    font-size: 2.7rem;
    line-height: 2.7rem;
  }


  /* BRANDS */

  .brands-header h2 {
    font-size: 2.7rem;
  }


  /* CATEGORIES */

  .categories-header h2 {
    font-size: 2.7rem;
    line-height: 3rem;
  }


  /* PRODUCT DETAIL */

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


  /* SLOGAN */

  .slogan h1 {
    font-size: 2.8rem;
    line-height: 3.1rem;
  }


  /* CTA */

  .cta h2 {
    font-size: 2.7rem;
    line-height: 3rem;
  }


  /* FOOTER */

  .footer-right a {
    font-size: 1.8rem;
    white-space: normal;
  }

}