@import url("reset.css");
@import url("function.css");
@import url("stylemy.css");

:root {
    --adaptiveScreen: ((100vw - 320px) / (1920 - 320));
    --fontSize: calc(0.875em + 2 * var(--adaptiveScreen));   /* 14px = 0.875em */
    --h1Size: calc(1.8125em + 32 * var(--adaptiveScreen));   /* 29px = 1.8125em */
    --h2Size: calc(1.8125em + 19 * var(--adaptiveScreen));   /* 29px = 1.8125em */
    --h3Size: calc(1.4375em + 13 * var(--adaptiveScreen));   /* 23px = 1.4375em */
    --h4Size: calc(1.25em + 11 * var(--adaptiveScreen));     /* 20px = 1.25em */
    --smallSize: calc(0.625em + 2 * var(--adaptiveScreen));  /* 10px = 0.625em */
    --secondColor: #65b5ff;
    --mainColor: #C5C5FF;
    --blackColor: #39287C;
    --errorColor: #EC5140;
    --activeColor: #39D046;
    --greyColor: #e9e9e9;
    --whatsappColor: #6DD568;
    --telegramColor: #27a7e7;
    --youtubeColor: #E93F33;
    --rutubeColor: #12CCED;
    --vkColor: #0077FF;
    --okColor: #FF7700;
    --facebookColor: #3b5998;
    --instagramColor1: #C13584;
    --instagramColor2: #F77737;
    --tiktokColor1: #25F4EE;
    --tiktokColor2: #FE2C55;
    --borderRadius: 1rem;
    --display: display 0.1s ease-out forwards;
    --distanceSmall: 0.5rem;
    --distanceNormal: 1rem;
    --distanceLarge: 2rem;
    --distanceBig: 4rem;
    --colPx: 320px; /*минимальная ширина карточки*/
    --col: 320; /*тоже минимальная ширина карточки, нужна для формул*/
    --fontTitle: "Golos Text", sans-serif; /*шрифт заголовков*/
    --fontText: "Golos Text", sans-serif; /*шрифт текста*/
    --lineHeight: 1;
    --cols: 4;
    --cubic-bezier: cubic-bezier(0.05, 0.61, 0.41, 0.95);
    --aninate: transform 0.9s var(--cubic-bezier), 
    opacity 0.9s var(--cubic-bezier), 
    overlay 0.9s var(--cubic-bezier) allow-discrete, 
    display 0.9s var(--cubic-bezier) allow-discrete;
  }

  [data-animation] {
    transition:var(--aninate);
    opacity: 0;
  }
  
  [data-animation*="fadeindown"] {
      --transform: translateY(5rem);
      transform: var(--transform);
  }
  
  [data-animation*="fadeinup"] {
    --transform:  translateY(-5rem);
      transform: var(--transform);
  }
  
  [data-animation*="fadeinright"] {
    --transform:  translateX(5rem);
      transform: var(--transform);
  }
  
  [data-animation*="fadeinleft"] {
    --transform:  translateX(-5rem);
      transform: var(--transform);
  }

  [data-animation*="opacity"] {
    --transform: translate(0);
    transform: var(--transform);
}
[data-animation*="-display"] {
    display: none;
}

  [data-animation].show {
    opacity: 1;
    transform: translate(0%);
    transition-delay: calc(var(--nthAnimate) * 0.2s);
    display: grid;
    @starting-style { 
        opacity: 0;
        transform: var(--transform);
    }
  }

  body {
    display: grid;
    row-gap: var(--distanceNormal);
    min-height: 100vh;
    grid-auto-rows: 1fr auto 1fr;
  }
  
  * {
    box-sizing: border-box;
    font-style: normal;
    font-weight: normal;
    text-wrap: balance;
    scroll-behavior: smooth;
    scroll-margin-block: var(--distanceBig);
    margin-block-start: 0;
    margin-block-end: 0;
    transition: background-color 0.3s, color 0.3s;
  }
  
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  body:has(dialog[open]) {
    overflow: hidden;
  }

  body:has(.slider__wrapper) {
    scrollbar-gutter: stable;
  }

  main {
    display: grid;
    row-gap: var(--distanceBig);
    margin-block-start: calc(var(--distanceLarge)* 2 + var(--fontSize) + var(--distanceNormal));
  }

  main:has( > .longread__wrapper) {
    margin-block-start: calc(var(--distanceLarge)* 2 + (var(--fontSize)) / 2);
  }

  section > h2, section > h3 {
    margin-block-end: var(--distanceSmall);
    height: fit-content;
  }

  .jc_start { justify-content: start; }
  .jc_end { justify-content: end; }
  .jc_center { justify-content: center; }
  .jc_between { justify-content: space-between; }
  .jc_around { justify-content: space-around; }
  .jc_evenly { justify-content: space-evenly; }
  .jc_start { justify-content: start; }
  
  .ac_end { align-content: end; }
  .ac_center { align-content: center; }
  .ac_between { align-content: space-between; }
  .ac_around { align-content: space-around; }
  .ac_evenly { align-content: space-evenly; }
  .ac_start { align-content: start; }
  
  .ji_start { justify-items: start; }
  .ji_center { justify-items: center; }
  .ji_end { justify-items: end; }
  .ji_stretch { justify-items: stretch; }
  
  .ai_start { align-items: start; }
  .ai_center { align-items: center; }
  .ai_end { align-items: end; }
  .ai_stretch { align-items: stretch; }
  
  .as_start { align-self: start; }
  .as_center { align-self: center; }
  .as_end { align-self: end; }
  .as_stretch { align-self: stretch; }
  .as_baseline { align-self: baseline; }

.js_start { justify-self: start; }
.js_center { justify-self: center; }
.js_end { justify-self: end; }
.js_stretch { justify-self: stretch; }
.js_baseline { justify-self: baseline; }

.white { 
  color: white; 
}
.white:hover { 
  color: var(--errorColor); 
}
  
  .m_small {
margin-block-end: var(--distanceSmall);
  }

  .m_normal {
    margin-block-end: var(--distanceNormal);
  }

  .m_big {
    margin-block-end: var(--distanceBig);
  }

  .m_large {
    margin-block-end: var(--distanceLarge);
  }

  .p_small {
    padding-block-end: var(--distanceSmall);
  }

  .p_normal {
    padding-block-end: var(--distanceNormal);
  }

  .p_big {
    padding-block-end: var(--distanceBig);
  }

  .p_large {
    padding-block-end: var(--distanceLarge);
  }
  
  /*текстовое*/
  h1 {
      font-family: var(--fontTitle);
      font-size: var(--h1Size);
      font-weight: 600;
      padding-block-end: 0.7rem;
      line-height: 1.1;
  }
  
  h2 {
    font-family: var(--fontTitle);
    font-size: var(--h2Size);
    font-weight: 600;
  }
  
  h3 {
    font-family: var(--fontTitle);
    font-size: var(--h3Size);
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  
  h4 {
    font-family: var(--fontTitle);
    font-size: var(--h4Size);
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  h5 {
    font-family: var(--fontTitle);
    font-size: var(--fontSize);
    font-weight: 600;
  }
  
  strong {
    font-weight: 600; 
  }

  p,
  span,
  label,
  figcaption, time {
    font-family: var(--fontText);
    font-size: var(--fontSize);
    line-height: 1.55;
  }
  
  s {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: normal;
  }

  time {
    color: color-mix(in hsl, var(--blackColor), white 80%);
  }

  a, li {
    font-family: var(--fontText);
    font-size: var(--fontSize);
    text-decoration: none;
  }
  
header li {
    cursor: pointer;
}

p > a {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    text-decoration:underline;
    color: inherit;
}

  h1, h2, h3, h4, h5, p, span, label, small {
  color: var(--blackColor);  
  }
  
  a:hover,
  a:active, a.active, button:hover {
    text-decoration-line: underline;
  }
  
  li > a,
  textarea {
    font-family: var(--fontText);
  }
  
  small, sub, sup {
    font-family: var(--fontText);
    font-size: 0.8em;
    text-wrap: balance;
    animation: var(--fadeInAnimaion);
  }

  .price, .newprice {
    font-size: calc(26px + 6 * var(--adaptiveScreen));
    font-weight: 600;
    width: fit-content;
  }

  .price:has(.oldprice)::after {
    font-weight: normal;
  }

  .price::after, .newprice::after {
    content: ' ₽';
  }
  
  .price-kg {
    font-size: calc(26px + 6 * var(--adaptiveScreen));
    font-weight: 600;
    width: fit-content;
    margin-left: -17px;
  }

  .price-kg:has(.oldprice)::after {
    font-weight: normal;
  }

  .discount-info {
    width: fit-content;
  }
  
  footer {
    bottom: 0;
    background: var(--mainColor);
    color: white;
    padding: var(--distanceBig) 0;
    width: 100%;
  }

  .footer__info {
    display: grid;
    gap: 1rem;
  }

  .footer__fix {
    position: fixed;
    bottom: 0;
    right: var(--distanceNormal);
    z-index: 999;
    overflow: visible;
    display: flex;
    justify-content: end;
}

  address {
    display: grid;
    gap: 0.5rem;
  }
  
  /*ВРЕПЕРЫ*/
  .wrapper {
      padding-inline: calc(1rem + 140*((100% - 375px) /(1920 - 375)));
  }
  
  .wide__wrapper {
      width: calc(100% - (2* var(--distanceNormal)));
      margin: 0 auto;
  }
  
  .longread__wrapper {
    display: grid;
    column-gap: 2rem;
    grid-template-columns: 
      var(--distanceNormal)
      [aside-left] calc(var(--distanceNormal) + 300 * var(--adaptiveScreen))
      [content] 1fr 
      [aside-right] calc(var(--distanceNormal) + 300 * var(--adaptiveScreen))
      var(--distanceNormal);
  }

  .longread__wrapper p:not([class*="grid-table-"] p), .longread__wrapper span, .longread__wrapper figcaption {
    text-wrap: wrap;
    font-size: calc(18px + 2 * var(--adaptiveScreen));
    line-height: 1.6;
}

  .fullwidth {
    grid-column: 1/-1;
  }

 .longread__wrapper > *:not([class*="aside"], .fullwidth) {
    grid-column: content;
  }

  .longread__wrapper > p {
    margin-block-end: var(--distanceBig);
  }
  
  .longread__wrapper p:has(+ p) {
    margin-block-end: var(--distanceSmall);
}

  .aside-left {
    grid-column: aside-left;
  }
  
  .aside-right {
    grid-column: aside-right;
  }

.longread__wrapper img:not(.fullwidth) {
    width: 100%;
}

.longread__wrapper .img-title {
    position: relative;
    display: inherit;
    grid-template-columns: inherit;
    gap: inherit;
    height: 40vh;
    grid-column: 1/-1;
}

.img-title img {
    position: absolute;
    z-index: -1;
    height: inherit;
    object-fit: cover;
    grid-column: 1/-1;
    filter: brightness(0.3);
}

.img-title *:not(img) {
    display: grid;
    align-self: end;
    color: white;
    grid-column: content;
}

  @media screen and (max-width: 768px) {
  .longread__wrapper {
      column-gap: 0;
    }
    
  .longread__wrapper > *:not([class*="aside"], .fullwidth, .img-title) {
    grid-column: 2/-2;
  }
  
    [class*="aside"], .img-title *:not(img) {
      grid-column: 2/-2;
    }
  }
  
  /*КОЛОНКИ*/
[class*="__container1"] {
    --cols: 1;
}

[class*="__container2"] {
    --cols: 2;
}

[class*="__container3"] {
    --cols: 3;
}

[class*="__container4"] {
    --cols: 4;
}

[class*="__container5"] {
    --cols: 5;
}

[class*="__container6"] {
    --cols: 6;
}

[class*="__container7"] {
    --cols: 7;
}
  
[class*="__container8"] {
    --cols: 8;
}

[class*="__container9"] {
    --cols: 9;
}

[class*="__container10"] {
    --cols: 10;
}

[class*="__container11"] {
    --cols: 11;
}

[class*="__container12"] {
    --cols: 12;
}

 [class*="grid__container"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(100% / var(--cols) - var(--distanceNormal), var(--colPx), 100%),1fr));
    gap: var(--distanceNormal);
    container: grid-card / inline-size;
  }
  
  .grid__container {
    grid-template-columns: max-content;
    }


    [class*="flex__container"] {
        display: flex;
        flex-wrap: wrap;
        gap: var(--distanceNormal);
        container: flex / inline-size;
      }
    
    
    [class*="flex__col"] {
        min-width: var(--colPx);
    }
    
      .flex__col1 {
        flex: 1 1 calc(100% / var(--cols) - var(--distanceNormal));
      }
      
      .flex__col2 {
        flex: 2 1 calc(100%/var(--cols));
        @container flex (inline-size > 640px) {
          flex: 1 1 calc(100%/4);
        }
      }
      
      .flex__col3 {
        flex: 2 1 calc(100%/var(--cols));
        @container (width < 960px) {
          flex: 1 1 calc(100%/2);
          @container (width < 640px) {
            flex: 1 1 calc(100%/4);
          }
        }
    }
      
      .flex__col4 {
        flex: 4 1 calc(100%/var(--cols));
      }

      .flex__col5 {
        flex: 5 1 calc(100%/var(--cols));
      }

      .flex__col6 {
        flex: 6 1 calc(100%/var(--cols));
      }

      .flex__col7 {
        flex: 7 1 calc(100%/var(--cols));
      }

      .flex__col8 {
        flex: 8 1 calc(100%/var(--cols));
      }

      .flex__col9 {
        flex: 9 1 calc(100%/var(--cols));
      }

      .flex__col10 {
        flex: 10 1 calc(100%/var(--cols));
      }

      .flex__col11 {
        flex: 11 1 calc(100%/var(--cols));
      }

      .flex__col12 {
        flex: 12 1 calc(100%/var(--cols));
      }



    .button__container-r {
        display: grid;
        grid-template-columns: auto;
        grid-auto-flow: row;
        gap: var(--distanceSmall);
    }

    .button__container-c {
        display: grid;
        grid-template-columns: auto;
        grid-auto-flow: column;
        gap: var(--distanceSmall);
        align-content: center;
        align-items: center;
        margin: 0 var(--distanceNormal) var(--distanceNormal);
        touch-action: manipulation;
        width: fit-content;
    }

  /* Общие стили для колонок */
  [class^="grid__col"] {
    display: grid;
    overflow: visible;
    border-radius: var(--borderRadius);
  }

  [class^="grid__col"]:has(img) {
    grid-template-columns: subgrid;
    grid-template-rows: auto;
    overflow: hidden;
    min-height: fit-content
  }

  [class^="grid__col"] .info {
    display: grid;
    gap: var(--distanceNormal);
    grid-auto-rows: min-content;
  }
  
  .grid__col1 {
    grid-column: span 1;
  }
  
  .grid__col2 {
    grid-column: span 2;
  }
  
  .grid__col3 {
    grid-column: span 3;
  }
  
  .grid__col4 {
    grid-column: span 4;
  }
  
  .row1 {
    grid-row: span 1;
  }
  
  .row2 {
    grid-row: span 2;
  }
  
  .row3 {
    grid-row: span 3;
  }
  
  .row4 {
    grid-row: span 4;
  }
  
  .flow__col {
    grid-auto-flow: column;
  }

  .flow__dense {
    grid-auto-flow: dense;
  }

  /* Адаптивные контейнерые запросы */
  @container grid-card (inline-size < calc(290px * 4)) {
    .grid__col4 {
      grid-column: span 3;
    }
  }
  
  @container grid-card (inline-size < calc(290px * 3)) {
    .grid__col3,
    .grid__col4 {
      grid-column: span 2;
    }

    .slider {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: var(--colPx);
        grid-gap: var(--distanceNormal);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--distanceNormal);
    }

    .slider > * {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    }
  }
  
  @container grid-card (inline-size < calc(290px * 2)) {
    .grid__col2,
    .grid__col3,
    .grid__col4 {
      grid-column: span 1;
    }
  }

  .formwidth {
    max-width: 53em;
    margin: 0 auto;
  }

  /*хедер*/
  header {
      display: block;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 5;
      background: var(--mainColor);
  }

  header .flex__container {
         gap: var(--distanceSmall);
      }

  
  .content {
      display: grid;
      grid-auto-flow: column;
      width: 100%;
      grid-template-columns: 1fr;
      padding-block:var(--distanceNormal);
      overflow: hidden;
      column-gap: var(--distanceSmall);
  }
  
  .content:has(.description) {
    grid-template-columns: auto 1fr;
  }

  header .description {
      display: grid;
      gap: var(--distanceNormal);
      grid-column: 1 / -1;
      grid-auto-flow: column;
  }

  header a img {
      height: inherit;
      pointer-events: none;
      overflow: visible;
  }

  header .logo {
    display: contents;
  }

 #imgNew {
    height: 2.2em;
}

#imgOld {
    height: 1.6em;
}
  
  header nav {
      display: grid;
      grid-auto-flow: column;
      gap: calc(0.1em + 26 * var(--adaptiveScreen));
      list-style: none;
  }
  
  header nav a {
      color: var(--blackColor);
  }

  /*burger*/
  .burger__container {
    display: none;
    width: 24px;
    padding-block: 0.68em;
    z-index: 6;
    cursor: pointer;
    align-items: center;
  }
  
  #menu__toggle {
    display: none;
  }
  
  .burger,
  .burger::before,
  .burger::after {
    background: var(--blackColor);
    position: absolute;
    height: 3px;
    width: 24px;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: var(--borderRadius);
  }
  
  .burger::before {
    content: "";
    top: 8px;
  }
  
  .burger::after {
    content: "";
    bottom: 8px;
  }
  
  #menu__toggle:checked + .burger::before {
    top: 0px;
    transform: rotate(405deg);
  }
  
  #menu__toggle:checked + .burger {
    background: transparent;
  }
  
  #menu__toggle:checked + .burger::after {
    top: 0px;
    transform: rotate(-405deg);
  }
  
  @media (max-width: 760px) {
    header .content {
      grid-template-rows: auto 0fr;
      transition: grid-template-rows 0.3s;
    }
  
    .burger__container {
      display: grid;
    }
  
    header nav {
      height: 0;
      overflow: hidden;
      text-align: center;
    }

    header nav a {
        font-size: 2rem;
    }

    header:has(#menu__toggle:checked) nav {
      display: grid;
      grid-auto-flow: dense;
      height: 100vh;
      transition: height 0.3s ease;
      justify-content: center;
    }
  
    header .content:has(#menu__toggle:checked) {
      grid-template-rows: auto 1fr;
      gap: var(--distanceLarge);
    }
  }
    
  @layer base {
    button, .like__button {
        display: grid;
        background-color: var(--errorColor);
        color: white;
        font-family: var(--fontText);
        font-size: var(--fontSize);
        line-height: 1;
        border-radius: var(--borderRadius);
        border: 1px solid var(--errorColor);
        padding: var(--distanceNormal) var(--distanceLarge);
        align-self: center;
        width: fit-content;
        transition: background-color 0.3s, color 0.3s, width 0.3s;
        
        &:hover {
          color: var(--errorColor);
        }
    }
  
    }

    button.second {
        background-color: transparent;
        color: var(--mainColor);
    }
  
    button.full {
        width: 100%;
        padding: var(--distanceNormal);
    }


@layer onlyicon {
    button.withicon {
        --size: calc(1em + 3 * var(--adaptiveScreen));
        font-size: var(--size);
        padding: var(--distanceNormal);
        align-items: center;
        height: 100%;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.2rem;
    }

    .withicon svg {
        width: var(--size);
    }
    .withicon:hover svg {
        fill: var(--errorColor);
    }
  }
  
  @layer states {
    button:hover, .like__button:hover {
        color: var(--errorColor);
        background-color: white;
    }
  
    button.second:hover {
        background-color: var(--mainColor);
        color: white;
    }
  }
  
  @layer links {
    button a {
        color: currentColor;
        text-decoration: none;
    }
  
    button a:hover {
        text-decoration: none;
    }
  }

.auf__tag.whatsapp {
    background-color: var(--whatsappColor);
}

.auf__tag.whatsapp:hover {
    background-color: transparent;
    color: var(--whatsappColor);
    text-decoration: none;
  }

  .auf__tag {
    background-color: var(--mainColor);
    padding: 0.2rem var(--distanceSmall);
    border-radius: 0.4rem;
    width: fit-content;
    color: var(--blackColor);
    transition: background-color 0.3s;
  }

  /*высота карточки*/
  .h_small {
    height: var(--colPx);
  }
  
  .h__medium {
    height: calc(var(--colPx) + (var(--col) / 2) * var(--adaptiveScreen));
  }
  
  .h__full {
    height: 100dvh;
  }
  
  article {
    background: var(--mainColor);
    border-radius: var(--borderRadius);
    border: 0.3rem solid var(--mainColor);
    overflow: hidden;
    box-shadow: 0 0 0;
  }


  article .card__info {
    display: grid;
    grid-auto-rows: min-content;
    justify-content: start;
    margin: var(--distanceNormal);
    gap: var(--distanceNormal);
    & h2 {
    font-weight: 500;
    font-size: calc(16px + 5* var(--adaptiveScreen));
    }
  }

  article button:not(.withicon){
    margin: 0 var(--distanceLarge) var(--distanceLarge);
  }

  article a, [class*="__col"]:not(:has(address)) a:not([href^="./168fz/"]) {
    display: contents;
  }

  .briquettes-cards article:hover {
    box-shadow: var(--errorColor) 0px 8px 24px;
    transition: box-shadow 0.3s ease;
  }

/*видео*/
    .auf__video {
        position: relative;
        aspect-ratio: 16/9;
        cursor: pointer;
        border-radius: var(--borderRadius);
        scroll-margin-inline: calc(1rem + 140*((100vw - 375px) /(1920 - 375)));
    }
    
    .briquettes-reviews .scroll__card {
        scroll-margin-inline: calc(1rem + 140*((100vw - 375px) /(1920 - 375)));
        width: calc(20rem + 270*((100vw - 375px) /(1920 - 375)));
    }

    .video__link {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .video__media {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
    
    @layer videobutton {
    .video__button {
        position: absolute;
        height: calc(3rem + 1px);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: width 0.3s, height 0.3s;
        background-color: transparent;
        border: none;
        padding: 0;
    }
    
    .auf__video:hover .video__button {
      width: calc(3rem + 10px);
      height: calc(3rem + 11px);
    }
    
    .video__button > svg {
        width: inherit;
        height: inherit;
    }
}
    
    .video--enabled {
        cursor: pointer;
        overflow: hidden;
    }

.youtube__button {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: none;
    padding: 0;
    width: 4rem;
    height: 3rem;
    border: none!important; /*потому что layer слабее селекторая без layer*/
    background-color: transparent!important; /*потому что layer слабее селекторая без layer*/
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.youtube__button-shape {
    fill: #212121;
    fill-opacity: 0.8;
    transition: fill 0.3s;
}

.youtube__button-icon {
    fill: #ffffff;
}

.youtube__button:focus {
    outline: none;
}

.auf__video:hover .youtube__button-shape,
.youtube__button:focus .youtube__button-shape {
    fill: #ff0000;
    fill-opacity: 1;
}

.youtube--enabled {
    cursor: pointer;
}

.youtube--enabled .youtube__button {
    display: block;
}


  /*форма*/
  form, textarea {
    display: grid;
    gap: var(--distanceNormal);
    height: fit-content;
}

.auf__field {
    display: inherit;
    height: fit-content;
    position: relative;
}

.auf__field input:not(:placeholder-shown, [type="file"]):valid {
    border: 2px solid var(--activeColor);
}

.auf__field input:not(:placeholder-shown):invalid {
    border: 2px solid var(--errorColor);
}

.auf__field input:focus:invalid {
    border: 2px solid var(--greyColor);
}

.auf__field:has(input:not(:placeholder-shown, :focus):invalid) span::after{
    content: 'Введены неверные данные!';
    color: var(--errorColor);
    position: absolute;
    font-size: small;
}

.auf__field span {
margin-block-end: var(--distanceSmall);
}

input:not([type="file"]), textarea {
    border-radius: 0.5rem;
    padding: calc(var(--distanceNormal) / 2) calc(var(--distanceNormal) / 2) calc(var(--distanceNormal) / 4);
    border: 2px solid var(--greyColor);
    transition: border 0.3s;
}

input[type="file"]::file-selector-button {
    background-color: var(--errorColor);
    border: none;
    color: white;
    padding: var(--distanceSmall);
    border-radius: var(--borderRadius);
    cursor: pointer;
    transition: outline 0.3s, background-color 0.3s;
    border: none;
}

input[type="file"]::file-selector-button:hover {
    outline: 1px dashed var(--errorColor);
    outline-offset: -1px;
    background: transparent;
    color: var(--errorColor);
}

/*каруселька*/
.slider__wrapper {
    position: relative;
    width: 100%;
}

.auf__slider {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(20rem + 160*(var(--adaptiveScreen)));
    gap: var(--distanceNormal);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-snap-stop: always;
    container-type: inline-size;
    overscroll-behavior-x: contain;
    padding-inline: calc(1rem + 140*((100vw - 375px) /(1920 - 375)));
}

.scroll__card, .scroll__img {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: inherit;
    object-fit: cover;
}

.gallery__container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    width: 100%;
    gap: var(--distanceNormal);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-snap-stop: always;
    overscroll-behavior-x: contain;
    scroll-margin-inline: 0;
}

.auf__slide {
    width: 100%;
    height: 100%;
}

.auf__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

article .scroll__img {
    aspect-ratio: 4/3;
}

/*модальное окно*/
dialog {
    width: 60rem;
    border: none;
    animation: fade-in 0.3s;
    padding: calc(var(--distanceNormal) * 2);
    border-radius: var(--borderRadius);
    margin: auto;
  }
  
  dialog::before {
    content: "\00d7";
    top: 0;
    right: 0;
    position: fixed;
    margin: var(--distanceNormal);
    cursor: pointer;
    font-size: calc(var(--distanceNormal) * 2);
    z-index: 2;
    color: var(--greyColor);
    mix-blend-mode: difference;
  }
  
  dialog::backdrop {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    cursor: pointer;
  }
  
  dialog[open]:has(img) {
    max-height: 100vh;
    overflow: visible;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  dialog:has(img):focus {
    outline: none;
  }
  
  dialog:has(img) img {
    max-height: 100vh;
    max-width: 100%;
  }
  
  
  #leftbutton, #rightbutton {
    height: 2rem;
    aspect-ratio: 1/1;
    border-radius: 100%;
    border: none;
    pointer-events: auto;
    cursor: pointer;
    margin: 1rem;
    color: var(--mainColor);
    box-shadow: 0 4px 22px 0 #ffffff52;
  }
  
  .auf__navbuttons #leftbutton {
    order: 1;
    position: fixed;
    right:var(--distanceNormal)
  }
  
  #leftbutton::before {
    content: "◄";
  }
  
  #rightbutton::before {
    content: "►";
  }
  
  .auf__navbuttons #rightbutton {
    order: 2;
  }
  
  .hidden {
    display: none; 
  }

  .gallery__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    border-radius: 100%;
    border: none;
    background-color: var(--errorColor);
    &:hover {
        background-color: var(--mainColor);
    }
}

.gallery__btn_next {
    right: calc(var(--distanceNormal) + 0.4rem);
}

.gallery__btn_prev {
    left: calc(var(--distanceNormal) + 0.4rem);
}

.gallery__btn svg {
    height: inherit;
    aspect-ratio: 1/1;
    color: var(--errorColor);
    transition: color 0.3s;
        &:hover {
            color: var(--mainColor);
        }
}

.gallery__btn_prev::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffffd9' viewBox='0 0 256 256'%3E%3Cpath d='M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z'%3E%3C/path%3E%3C/svg%3E");
    position: relative;
    width: 20px;
    height: 20px;
}

.gallery__btn_next::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffffd9' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'%3E%3C/path%3E%3C/svg%3E");
    position: relative;
    width: 20px;
    height: 20px;
}

a.icon {
    width: 1.5em;
    height: 1.5em;
    border-radius: 100%;
    transition: transform 0.3s;
}

a.icon > svg {
    width: inherit;
    height: inherit;
    border-radius: 100%;
}

.play_icon {
position:absolute;
width: 4rem;
height: calc(4rem + 1px);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
transition: width 0.3s, height 0.3s;
background-color: transparent;
border: none;
border-radius: 0;
}

.play_icon > svg {
width: inherit;
height: inherit;
}

a:hover .play_icon {
    width: calc(4rem + 20px);
    height: calc(4rem + 21px);
}