/* Start:/bitrix/components/aspro/personal.section.premier/templates/.default/style.css?179029217613069*/
body {
  --personal-color--green: rgba(50, 203, 65, 1);
  --personal-color--red: rgba(255, 79, 100, 1);
  --personal-bg--green: var(--light, rgba(44, 190, 21, 0.1)) var(--dark, rgba(44, 190, 21, 0.3));
  --personal-bg--red: var(--light, rgba(255, 112, 129, 0.1)) var(--dark, rgba(255, 112, 129, 0.3));
  --personal-bg--grey: var(--darkerblack_bg_black);
}
.personal-color--green {
  color: rgba(50, 203, 65, 1);
  color: var(--personal-color--green);
}
.personal-color--red {
  color: var(--personal-color--red);
}
.font_clamp--16-14 {
  font-size: clamp(0.875rem, 1.3vw, 1rem);
}
.personal__wrapper,
.personal__block {
  position: relative;
}
.personal__wrapper .notetext {
  background: #e6f8de;
  color: #419a19;
  display: inline-block;
  padding: 10px;
  vertical-align: top;
}
.personal__wrapper .errortext {
  background: #ffeeee;
  color: #e83333;
  display: inline-block;
  padding: 10px;
  vertical-align: top;
}
.personal__wrapper .alert.alert-danger {
  color: #222228;
}
.personal__wrapper .alert.alert-success {
  color: var(--white_text_black);
  font-size: calc(1rem - 3px);
  line-height: calc(1em + 5px);
  border: 0;
}
.personal__wrapper .alert-success {
  background-color: var(--light, rgba(91, 127, 255, 0.1)) var(--dark, rgba(91, 127, 255, 0.3));
  color: var(--white_text_black);
}
.personal__top-form + .personal__top-form {
  margin-top: 16px;
}
.personal__top-form .form-body h5 {
  margin-top: 26px;
}
.personal__top-form .form-body.form-body--grid h5 {
  grid-column-start: 1;
  grid-column-end: -1;
}
.personal__top-form .half-block {
  display: flex;
  align-items: center;
  gap: 16px 20px;
  flex-wrap: wrap;
}
.personal__top-form .half-block .text_block {
  margin-top: 0;
}
@media (min-width: 1200px) {
  .personal__top-form .half-block > div {
    flex: 1;
  }
}
.form-body.form-body--grid {
  display: grid;
  gap: 0 20px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 1440px) {
  .form-body.form-body--grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}
@media (max-width: 600px) {
  .form-body.form-body--grid {
    grid-template-columns: 1fr;
  }
}
.form-body.form-body--grid .grid-column-start--1 {
  grid-column-start: 1;
}
.order__bar {
  padding: 14px clamp(16px, 2vw, 20px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  background: #fff;
  background: var(--card_bg_black);
}
.order__bar--grey {
  background-color: #f8f8f8;
  background-color: var(--personal-bg--grey);
  border: 1px solid #ededed;
  border-color: var(--stroke_black);
}
.order__bar--red {
  background-color: rgba(255, 112, 129, 0.1);
  background-color: var(--personal-bg--red);
  border: 1px solid rgba(255, 112, 129, 0.1);
  border-color: var(--personal-bg--red);
}
.order__bar--green {
  background-color: rgba(44, 190, 21, 0.1);
  background-color: var(--personal-bg--green);
  border: 1px solid rgba(44, 190, 21, 0.1);
  border-color: var(--personal-bg--green);
}
.personal__wrapper .swiper:not(.swiper-initialized) > *,
.personal__wrapper .swiper:not(.swiper-initialized) ~ .swiper-button-prev,
.personal__wrapper .swiper:not(.swiper-initialized) ~ .swiper-button-next {
  visibility: hidden;
}
/* the page of choosing products keeps a single way back above the heading, the way the page of
   making an order does — so the chain of the section is hidden there */
.page-top--wishlist-add #navigation {
  display: none;
}
/* the heading of a printed list: the logo of the shop and its phone above the name of the list.
   In the header of the site the size of the logo is set by the header itself, so outside of it the
   logo is given a size of its own — and a tall logo must not push the products to the second sheet.
   Above the logo the sheet keeps air, and the name of the list stands right under it: the heading
   of a page keeps its own indent from the header of the site, and here there is no header */
.wishlist-print-head {
  margin-top: 30px;
  margin-bottom: 40px;
}
/* the heading of a page keeps the indents it needs under the header of the site: its own padding,
   the gap left for the trail (hidden here) and the indent of the line of the heading itself. On
   the sheet the name of the list stands right under the logo, about a hundred pixels from the top */
body:has(.wishlist-print-page) .page-top {
  padding-top: 0;
  gap: 0;
}
body:has(.wishlist-print-page) .topic__heading {
  margin-top: 0;
}
.wishlist-print-head__logo :is(img, svg) {
  width: auto;
  height: auto;
  max-width: 220px;
  max-height: 44px;
}
/* the phone of the header comes in the size of the header: on paper it is the size of the text */
.wishlist-print-head__phone .phones__inner {
  font-size: 14px;
}
/* the block of the phones carries the rest of them in a dropdown, and a dropdown is opened by a
   cursor: on paper it would print every phone of the shop under the first one, and the arrow of
   the dropdown leaves together with it. The arrow is named by three classes: the rule of the
   solution that draws it weighs two and stands later */
.wishlist-print-head__phone .phones__dropdown,
.wishlist-print-head__phone .phones__inner .more-arrow {
  display: none;
}

/* the printed page of a list is a page to read from paper: the trail above the heading is a way to
   click, and on the paper there is nothing to click */
.page-top--print #navigation {
  display: none;
}
/* of the footer it keeps the contacts of the shop and nothing else. The stylesheet of the solution
   prints the footer on purpose — on paper the phone and the address of the shop are worth their
   place, and the list is printed to be taken there, — but after the products came also the form of
   the subscription, the menus of the site and a row of icons: on paper they are empty blocks with
   lines instead of text. The bottom part of the footer is taken off by the solution itself.
   The page is marked by its own node: the footer is no part of the section and cannot be reached
   from inside it */
body:has(.wishlist-print-page) footer .footer__top-part,
body:has(.wishlist-print-page) footer .footer__part--right,
body:has(.wishlist-print-page) footer .footer__main-part-inner:not(.footer-grid) {
  display: none;
}
/* the line above the footer divides the page of the site from its bottom, and on the sheet it reads
   as a line drawn under the list; the contacts themselves stand closer to the products than they
   stand on the screen — a sheet has no page around it to breathe from */
body:has(.wishlist-print-page) footer {
  border-top: 0;
}
body:has(.wishlist-print-page) footer .footer__main-part-inner {
  padding-block: 20px;
}
body:has(.wishlist-print-page) footer .footer__info {
  row-gap: 8px;
}
/* the arrow of the link lives by the rules of the basket, and its styles come with the basket */
.wishlist-add__back .basket-back__link:not(:hover) use {
  opacity: 0.48;
}
.wishlist-add__back .basket-back__link:hover {
  color: var(--white_text_black);
}
/* the notice of a link that leads nowhere, and of a shared list the catalog has nothing left of:
   the shape of the empty states of the collections — the wording in the middle, the way out under
   it. The page of a link carries no block of the buyer, so the shape is set here */
.sharewishlist-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(16px, 6vw, 32px) 16px;
  text-align: center;
}
.sharewishlist-empty__text {
  max-width: 420px;
}
/* the icon of the printing by the heading of a shared list: the same bare icon the heading of
   one's own list carries next to the sharing. The look is repeated and not shared, because the
   actions of the owner are drawn by a component of their own and its stylesheet does not reach
   the page of a link */
.sharewishlist-print {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--icon_on_card);
}
.sharewishlist-print:hover,
.sharewishlist-print:focus-visible {
  color: var(--white_text_black);
}
/* the fill of an icon of the sprite is not the colour of the text until it is told so */
.sharewishlist-print .svg *:is(svg, use) {
  fill: currentColor;
}
/* while the printed page is being fetched into its frame, the icon turns into a ring, and the place
   of the icon stays where it was. The ring is written out here again for the same reason the look of
   the icon is: the stylesheet that spins it over one's own list belongs to the component of the
   actions of the owner and does not reach the page of a link */
.sharewishlist-print.is-loading {
  pointer-events: none;
}
.sharewishlist-print.is-loading .svg {
  position: relative;
}
.sharewishlist-print.is-loading .svg svg {
  opacity: 0;
}
.sharewishlist-print.is-loading .svg:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--stroke_black);
  border-top-color: var(--white_text_black);
  border-radius: 50%;
  animation: sharewishlist-print-spin 0.7s linear infinite;
}
@keyframes sharewishlist-print-spin {
  to {
    transform: rotate(360deg);
  }
}

/* the printed version of a list: on the paper stand the name of the list, its products and
   nothing else. The frame of the site is taken away by the stylesheet of the solution itself
   (`css/print.css` — the header, the footer, the trail, the menus and the bottom panel), so what
   is left here is the products: the actions of a card, the gallery under its picture and the
   pager are things of a screen. The rules hold for a page printed by the buyer himself with the
   means of the browser as well */
@media print {
  /* the paper is always the light theme: the dark one belongs to a screen, and white letters on
     white paper are no letters at all. The theme of the solution is a pair of toggles of custom
     properties and every colour of the page comes from them, so the printing turns the toggles back
     to the light side. The mark is asked of the element of the document and not of the body: a body
     of its own would tie with the rule of the dark theme over the blocks that carry a theme of
     their own, and a tie is settled by the order of the files */
  html:has(.wishlist-print-page) body,
  html:has(.wishlist-print-page) body .theme-root {
    --light: var(--ON_toggle);
    --dark: var(--OFF_toggle);
  }
  /* the frame of the mobile template is a flex column with a scroll of its own, and a column like
     that the sheets tear apart: the contacts of the shop were printed in the middle of the list and
     the bottom of the last sheets stayed empty. On paper a page is a stack of blocks and nothing
     scrolls, so for the printing the body is told just that */
  body:has(.wishlist-print-page) {
    display: block;
    overflow: visible;
  }
  /* four or five cards in a row is a window of 1280; on a sheet they turn into thumbnails, and
     three of them fill the width of a page. The number of the columns is a variable of the
     solution, and two classes here outweigh its one-class rules of the widths without !important */
  .personal__block--wishlist-products .grid-list--items {
    --items-count: 3;
  }
  /* a card is not torn between two sheets: the picture stays with the name and the price */
  .personal__block--wishlist-products .grid-list__item {
    break-inside: avoid;
  }
  /* whatever is pressed or hovered: the icons in the corner of a picture, the stickers, the quick
     view, the row of the buttons under the card and the leafing through its pictures */
  .personal__block--wishlist-products .side-icons,
  .personal__block--wishlist-products .sticker,
  .personal__block--wishlist-products .btn-fast-view,
  .personal__block--wishlist-products .section-gallery-nav,
  .personal__block--wishlist-products .catalog-block__info-bottom,
  .personal__block--wishlist-products .module-pagination {
    display: none;
  }
  /* the icon of the printing says nothing on the paper it printed itself. The actions of the owner
     are taken away by the stylesheet of their own component: a rule of it stands later than this
     file, and one class against one class the later wins */
  .sharewishlist-print {
    display: none;
  }
  /* whatever stands over the page and not in it: the dimming a popup lays over the page. Such
     things are fixed to the window, so printed they lie over the products of every sheet, and the
     stylesheet of the solution does not take them away */
  .jqmOverlay,
  .overlay {
    display: none;
  }
  /* the same for the place where the popups of the shop stand — the notice about the cookies is one
     of them — and for the button of the open lines with its shadow. These two need the word:
     the popup carries its showing in the tag itself, and the button brings a stylesheet of its own
     that lands after this file, so one class against one class it would win */
  #body_iframe_wrapper,
  .b24-widget-button-wrapper,
  .b24-widget-button-shadow {
    display: none !important;
  }
}

/* End */


/* Start:/bitrix/components/aspro/personal.section.premier/templates/.default/aspro/wrapper.block.premier/favorite/style.css?1790292176309*/
* + .personal__block--favorite-products {
    margin: 32px 0 0 0;
}
.topic__heading {
    gap: 0 10px;
    justify-content: space-between;
    align-items: center !important;
}
.js_clear_favorits {
    cursor: pointer;
}
@media (min-width: 400px) {
    .js_clear_favorits {
        margin-left: auto;
    }
}

/* End */
/* /bitrix/components/aspro/personal.section.premier/templates/.default/style.css?179029217613069 */
/* /bitrix/components/aspro/personal.section.premier/templates/.default/aspro/wrapper.block.premier/favorite/style.css?1790292176309 */