:root {
  --FS10: calc(10 * 0.0833333333rem);
  --LH10: calc(12/10);
  --FS12: calc(12 * 0.0833333333rem);
  --LH12: calc(15/12);
  --FS15: calc(15 * 0.0833333333rem);
  --LH15: calc(18/15);
  --FS20: calc(20 * 0.0833333333rem);
  --LH20: calc(24/20);
  --FS30: calc(30 * 0.0833333333rem);
  --FS36: calc(36 * 0.0833333333rem);
}

:root {
  --FRONT_COLOR: black;
  --BACK_COLOR: white;
  --GREY_COLOR: #535151;
  --GRID_MARGIN: calc(60 * 0.0833333333rem);
  --GRID_GUTTER: calc(16 * 0.0833333333rem);
  --4: calc(4 * 0.0833333333rem);
  --6: calc(6 * 0.0833333333rem);
  --12: calc(12 * 0.0833333333rem);
  --16: calc(16 * 0.0833333333rem);
  --20: calc(20 * 0.0833333333rem);
  --24: calc(24 * 0.0833333333rem);
  --36: calc(36 * 0.0833333333rem);
  --48: calc(48 * 0.0833333333rem);
}

@media (max-width: 720px) {
  :root {
    --GRID_MARGIN: calc(16 * 0.0833333333rem);
    --GRID_GUTTER: calc(16 * 0.0833333333rem);
  }
}
@media (max-width: 720px) {
  body {
    font-size: var(--FS12);
    line-height: 1;
    color: var(--FRONT_COLOR);
    background-color: var(--BACK_COLOR);
  }
  #main-container {
    grid-column-start: 1;
    grid-column-end: span 12;
    padding-top: var(--HEADER_HEIGHT) !important;
    height: unset !important;
  }
  header {
    grid-column-end: span 12;
    width: 100%;
    left: 0;
    background-color: var(--BACK_COLOR);
    padding: var(--GRID_MARGIN);
    box-sizing: border-box;
    height: calc(84 * 0.0833333333rem);
    z-index: 1000;
  }
  header.open {
    height: 100dvh;
  }
  header #header-menu {
    padding: 0;
  }
  header #header-menu #main-logo {
    margin-bottom: calc(var(--GRID_MARGIN) * 3);
    width: fit-content;
  }
  header #header-menu #main-logo img {
    width: calc(var(--GRID_GUTTER) * 3 + var(--COLUMN_WIDTH) * 2);
  }
  header #header-menu #burger {
    display: block;
    position: absolute;
    top: calc(30 * 0.0833333333rem);
    right: var(--GRID_MARGIN);
    width: 100px;
    height: auto;
    width: calc(var(--COLUMN_WIDTH) * 1 + var(--GRID_GUTTER) * 1);
  }
  header #header-menu #nav-categories .a-products a,
  header #header-menu #nav-categories .a-menu a,
  header #header-menu .nav-menu .a-products a,
  header #header-menu .nav-menu .a-menu a {
    font-size: var(--FS20);
    line-height: var(--LH20);
  }
  header #header-menu #nav-categories .a-products .open-close svg,
  header #header-menu #nav-categories .a-menu .open-close svg,
  header #header-menu .nav-menu .a-products .open-close svg,
  header #header-menu .nav-menu .a-menu .open-close svg {
    width: var(--20);
    height: var(--20);
  }
  header #header-menu #nav-categories .categories .category,
  header #header-menu .nav-menu .categories .category {
    padding-left: calc(var(--COLUMN_WIDTH) / 1);
  }
  header #header-menu #nav-categories .categories .category .a-category,
  header #header-menu .nav-menu .categories .category .a-category {
    font-size: var(--FS15);
    line-height: var(--LH15);
  }
  header #header-menu #nav-categories .sub-categories,
  header #header-menu #nav-categories .links,
  header #header-menu .nav-menu .sub-categories,
  header #header-menu .nav-menu .links {
    padding-left: calc(var(--COLUMN_WIDTH) / 1);
    font-size: var(--FS15);
    line-height: var(--LH15);
  }
  header #header-menu #nav-categories .sub-categories .a-sub-category,
  header #header-menu #nav-categories .sub-categories .a-link,
  header #header-menu #nav-categories .links .a-sub-category,
  header #header-menu #nav-categories .links .a-link,
  header #header-menu .nav-menu .sub-categories .a-sub-category,
  header #header-menu .nav-menu .sub-categories .a-link,
  header #header-menu .nav-menu .links .a-sub-category,
  header #header-menu .nav-menu .links .a-link {
    margin-bottom: var(--6);
  }
  header #header-menu .nav-lang {
    margin-bottom: 0;
  }
  footer {
    position: relative;
    bottom: unset;
    width: 100%;
  }
  #searchbar {
    position: relative;
    top: unset;
    left: unset;
    right: unset;
    transform: none;
    top: calc(84 * 0.0833333333rem);
    width: 100%;
    grid-column-end: span 12;
    box-sizing: border-box;
    margin-bottom: var(--16);
    height: fit-content;
  }
}
@media (max-width: 720px) {
  .template-page-products .products,
  .template-page-sold .products,
  .template-category .products,
  .template-category-sub .products,
  .template-single-product .products {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: unset;
    grid-auto-flow: unset;
    padding-top: 0;
  }
  .template-page-products .products .product,
  .template-page-sold .products .product,
  .template-category .products .product,
  .template-category-sub .products .product,
  .template-single-product .products .product {
    grid-column-end: span 12;
  }
  .template-page-products .products .product:nth-child(4n+1),
  .template-page-sold .products .product:nth-child(4n+1),
  .template-category .products .product:nth-child(4n+1),
  .template-category-sub .products .product:nth-child(4n+1),
  .template-single-product .products .product:nth-child(4n+1) {
    grid-column-end: span 12;
  }
  .template-page-products .products .product picture img,
  .template-page-sold .products .product picture img,
  .template-category .products .product picture img,
  .template-category-sub .products .product picture img,
  .template-single-product .products .product picture img {
    height: auto;
  }
  .template-page-products .products .product h2,
  .template-page-sold .products .product h2,
  .template-category .products .product h2,
  .template-category-sub .products .product h2,
  .template-single-product .products .product h2 {
    position: relative;
    opacity: 1;
    top: unset;
    left: unset;
    transform: none;
    padding: var(--6) 0;
    text-align: left;
    justify-content: flex-start;
  }
  .template-page-products .products .product:hover picture,
  .template-page-sold .products .product:hover picture,
  .template-category .products .product:hover picture,
  .template-category-sub .products .product:hover picture,
  .template-single-product .products .product:hover picture {
    opacity: 1;
  }
}
@media (max-width: 720px) {
  .template-single-product #main-container {
    grid-template-columns: repeat(12, 1fr);
  }
  .template-single-product #main-container h1.mobile {
    grid-column-end: span 12;
    display: block;
    margin-top: var(--16);
    margin-bottom: var(--16);
    font-family: "PPNeueYork Medium Italic";
    font-size: var(--FS15);
    line-height: var(--LH15);
    text-transform: uppercase;
    font-style: italic;
  }
  .template-single-product #main-container:has(.sold) h1 {
    padding-right: var(--48);
  }
  .template-single-product #main-container .sold {
    display: block;
    position: absolute;
    top: var(--16);
    right: var(--GRID_MARGIN);
    font-size: var(--FS10);
    line-height: var(--LH10);
    text-transform: uppercase;
    background-color: var(--FRONT_COLOR);
    color: var(--BACK_COLOR);
    padding: var(--4);
  }
  .template-single-product #main-container .left {
    grid-column-end: span 12;
    grid-template-columns: repeat(12, 1fr);
  }
  .template-single-product #main-container .left > picture {
    grid-column-end: span 12;
  }
  .template-single-product #main-container .left > picture:first-child {
    grid-column-end: span 12;
  }
  .template-single-product #main-container .right {
    grid-column-end: span 12;
    margin-top: var(--24);
  }
  .template-single-product #main-container .right h1 {
    display: none;
  }
  .template-single-product #main-container .right .sold {
    display: none;
  }
  .template-single-product .carrousel .carrousel-inner {
    width: calc(var(--COLUMN_WIDTH) * 4 + var(--GRID_GUTTER) * 4);
  }
  .template-single-product .carrousel .carrousel-inner .carrousel-container > * {
    width: calc(var(--COLUMN_WIDTH) * 4 + var(--GRID_GUTTER) * 3);
  }
  .template-single-product .carrousel-out {
    grid-column-end: span 12;
    justify-content: center;
  }
  .template-single-product .carrousel-out.full {
    height: 100dvh;
  }
  .template-single-product .carrousel-out.full .carrousel .carrousel-inner {
    width: calc(var(--COLUMN_WIDTH) * 12 + var(--GRID_GUTTER) * 12);
  }
  .template-single-product .carrousel-out.full .carrousel .carrousel-inner .carrousel-container {
    column-gap: var(--GRID_GUTTER);
  }
  .template-single-product .carrousel-out.full .carrousel .carrousel-inner .carrousel-container > * {
    width: calc(var(--COLUMN_WIDTH) * 12 + var(--GRID_GUTTER) * 11);
  }
  .template-single-product .carrousel-out.full .arrow-left {
    top: unset;
    bottom: var(--GRID_MARGIN);
  }
  .template-single-product .carrousel-out.full .arrow-right {
    top: unset;
    bottom: var(--GRID_MARGIN);
  }
  .template-single-product .related-products {
    grid-column-end: span 12;
  }
  .template-single-product .related-products .products .product {
    grid-column-end: span 6;
  }
  .template-single-product .related-products .products .product:nth-child(4n+1) {
    grid-column-end: span 6;
  }
}
@media (max-width: 720px) {
  .template-page-general #searchbar,
  .template-page-order #searchbar,
  .template-page-about #searchbar,
  .template-page-mentions #searchbar {
    display: none;
  }
  .template-page-general .blocs,
  .template-page-order .blocs,
  .template-page-about .blocs,
  .template-page-mentions .blocs {
    padding: 0;
  }
  .template-page-general .blocs .bloc h1,
  .template-page-order .blocs .bloc h1,
  .template-page-about .blocs .bloc h1,
  .template-page-mentions .blocs .bloc h1 {
    margin-top: var(--16);
  }
}