@supports (inset-block-start: 7.5px) {
   .header__title,
   .buy-button,
   .buying-menu-container,
   .purchase-button,
   .products-container,
   .product-description__paragraph--absolute {
      top: auto;
   }
}

@supports (inset-inline-start: calc(50% - 20px)) {
   .purchase-button,
   .purchase-button__text,
   .container-close--products {
      left: auto;
   }
}

@supports (inset-inline-end: -25%) {
   .buy-button,
   .container-close--buying-menu,
   .products-container,
   .product-description__paragraph--absolute {
      right: auto;
   }
}

@supports (inset-block-end: -2.7rem) {
   .purchase-button__text,
   .install-app {
      bottom: auto;
   }
}

@supports (margin-block: 16px) {
   .shopping-container,
   .purchase,
   .install-app__button,
   .presentation__title {
      margin: 0;
   }
}

@supports (margin-block-start: 39px) {
   .buying-menu-shopping,
   .body-left,
   .product-description__paragraph {
      margin-top: 0;
   }
}

@supports (margin-block-end: 0.5rem) {
   .category-card {
      margin-bottom: 0;
   }
}

@supports (margin-inline: 16px) {
   .category-card,
   .p-description-buy {
      margin: 0;
   }
}

@supports (margin-inline-end: 6px) {
   .purchase__amount {
      margin-right: 0;
   }
}

@supports (padding-block-end: 9.5rem) {
   .buying-menu-body--padding {
      padding-bottom: 0;
   }
}

@supports (padding-inline: 5%) {
   footer {
      padding: 0;
   }
}

@supports (min-block-size: 198px) {
   .products-container-header {
      min-height: auto;
   }
}

@supports (block-size: var(--nav-height)) {
   .install-app,
   #presentation-container,
   .category-card-bottom,
   footer {
      height: auto;
   }
}

@supports (min-inline-size: 256px) {
   .buying-menu-body,
   .category-card,
   .product {
      min-width: auto;
   }
}

@supports (inline-size: 100%) {
   .buying-menu-picture,
   .buying-menu-picture__img,
   .buying-menu-shopping,
   .purchase-button__text,
   .purchase-info,
   .total-price,
   .body-left,
   .presentation,
   .presentation-picture,
   .presentation-picture__img,
   .category-card,
   .products-container-header,
   .products-container-header__title,
   .product,
   .product__img {
      width: auto;
   }
}

@supports (max-inline-size: 100%) {
   img,
   .buying-menu-body,
   .buying-menu-picture__img,
   .presentation-picture__img,
   #categories,
   .category-card,
   .product {
      max-width: none;
   }
}

@supports (border-block-start: 2px solid var(--c5)) {
   .product-description {
      border-top: none;
   }
}

html {
   font-size: clamp(0.6rem, 0.325rem + 1.5vw, 0.7rem);
}

body {
   overflow-block: scroll;
   overflow-inline: hidden;
}
 
img {
   block-size: auto;
   max-inline-size: 100%;
}

/***************
HEADER
****************/
    
.header__title {
   inset-block-start: 0;
   block-size: var(--nav-height);
   inline-size: 100%;
}
    
.buy-button {
   inset-block-start: 7.5px;
   inset-inline-end: -25%;
}
    
.buy-button--show {
   inset-inline-end: 5%;
}
    
.buying-menu-container {
   inset-block-start: 0;
   block-size: 0;
   inline-size: 100%;
   overflow-block: scroll;
   overflow-inline: hidden;
}
    
.buying-menu-container--show {
   block-size: 100%;
}
    
.buying-menu-header {
   block-size: var(--nav-height);
   inline-size: 100%;
}
    
.container-close--buying-menu {
   inset-inline-end: 5%;
}
    
.buying-menu-body {
   padding-block: calc(var(--nav-height) + 28px) 24px;
   padding-inline: 5%;
   min-inline-size: 256px;
   max-inline-size: 500px;
}
    
.buying-menu-body--padding {
   padding-block-end: 9.5rem;
}
    
.buying-menu-picture {
   inline-size: 88%;
}
    
.buying-menu-picture__img {
   inline-size: 88%;
   max-inline-size: 225px;
}
    
.buying-menu-shopping {
   margin-block-start: 39px;
   padding-block: 40px 12px;
   padding-inline: 12px;
   inline-size: 100%;
}
    
.purchase-button {
   inset-block-start: -20px;
   inset-inline-start: calc(50% - 20px);
}
    
.purchase-button__text {
   inset-inline-start: calc(50% - 75px);
   inset-block-end: -2.7rem;
   padding-block: 3px;
   padding-inline: 8px;
   inline-size: 150px;
}
    
.shopping-container {
   margin-block: 16px;
}
    
.purchase {
   margin-block: 10px;
}
    
.purchase-info {
   inline-size: 80%;
}
    
.purchase__amount {
   margin-inline-end: 6px;
}
    
.total-price {
   inline-size: 100%;
}
    
.install-app {
   inset-block-end: 2.0rem;
   block-size: 0;
}
    
.install-app--show {
   block-size: auto;
}
    
.install-app__button {
   margin-block: 0.5rem;
   padding-block: 6px;
   padding-inline: 9px;
}
    
.install-app__text {
   padding-block: 2px;
   padding-inline: 5px;
}
    
/***************
MAIN
****************/
    
.body-left {
   margin-block-start: var(--nav-height);
   inline-size: 100%;
}
    
/*****************
PRESENTATION
******************/
    
#presentation-container {
   padding-block: 57px 45px;
   padding-inline: 10px;
   block-size: 405px;
}
    
.presentation {
   inline-size: 80%;
}
    
.presentation-picture {
   inline-size: 93.34%;
}
    
.presentation-picture__img {
   inline-size: 93.34%;
   max-inline-size: 225px;
}
    
.presentation__title {
   margin-block: 1.7em 0.4em;
}
    
/*Productos*/
#categories {
   margin-inline: auto;
   padding-block: 40px;
   padding-inline: 5%;
   max-inline-size: 900px;
}
    
.category-card {
   margin-inline: 16px;
   margin-block-end: 24px;
   min-inline-size: 220px;
   inline-size: 100%;
   max-inline-size: 447px;
}
    
.category-card:last-child {
   margin-block-end: 0;
}
    
@media (max-width: 320px) {
   .category-card {
      max-inline-size: 220px;
   }
}
    
.category-card__title {
   padding-block: 7px;
   padding-inline: 5px;
}
    
.category-card-bottom {
   block-size: 45px;
}
    
.products-container {
   inset-block-start: 0;
   inset-inline-end: -100%;
   overflow-block: scroll;
   overflow-inline: hidden;
}
    
.products-container--show {
   inset-inline-end: 0;
}
    
.products-container-header {
   min-block-size: var(--nav-height);
   inline-size: 100%;
}
    
.container-close--products {
   inset-inline-start: 5%;
}
    
.products-container-header__title {
   inline-size: 62%;
}
    
.products-container-body {
   padding-block: calc(var(--nav-height) + 16px) 16px;
   padding-inline: 6px;
}
    
.product {
   margin-block: 8px;
   margin-inline: 6px;
   min-inline-size: 138px;
   inline-size: 45%;
   max-inline-size: 196px;
}

.product__title {
   padding-block: 6px;
   padding-inline: 4px;
}

.product__img {
   inline-size: 100%;
}
   
.product-description {
   border-block-start: 2px solid var(--c5);
}
    
.product-description__paragraph {
   margin-block-start: 0.2rem;
}
    
.product-description__paragraph--absolute {
   inset-block-start: 5px;
   inset-inline-end: 5px;
}
    
.p-description-buy {
   margin-inline: 1px;
}
    
/*****************
FOOTER
******************/
    
footer {
   padding-inline: 5%;
   block-size: 60px;
}