@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0-modified | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  line-height: 150%;
}

/* make sure to set some focus styles for accessibility */
:focus {
  outline: 0;
}

a {
  text-decoration: none;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

input[type=search] {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */
audio,
canvas,
video {
  display: inline-block;
  display: inline;
  zoom: 1;
  max-width: 100%;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */
[hidden] {
  display: none;
}

/**
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-size: 100%; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -ms-text-size-adjust: 100%; /* 2 */
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/**
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improve image quality when scaled in IE 7.
 */
img {
  border: 0; /* 1 */
  -ms-interpolation-mode: bicubic; /* 2 */
}

/**
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */
figure {
  margin: 0;
}

/**
 * Correct margin displayed oddly in IE 6/7.
 */
form {
  margin: 0;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct color not being inherited in IE 6/7/8/9.
 * 2. Correct text not wrapping in Firefox 3.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */
legend {
  border: 0; /* 1 */
  padding: 0;
  white-space: normal; /* 2 */
  margin-left: -7px; /* 3 */
}

/**
 * 1. Correct font size not being inherited in all browsers.
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improve appearance and consistency in all browsers.
 */
button,
input,
select,
textarea {
  font-size: 100%; /* 1 */
  margin: 0; /* 2 */
  vertical-align: baseline; /* 3 */
  vertical-align: middle; /* 3 */
}

/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  cursor: pointer; /* 3 */
  overflow: visible; /* 4 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
  height: 13px; /* 3 */
  width: 13px; /* 3 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type=search] {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 3+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
  overflow: auto; /* 1 */
  vertical-align: top; /* 2 */
}

/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

html,
button,
input,
select,
textarea {
  color: #222;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

img {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* Golos Text – обычное начертание */
@font-face {
    font-family: 'Golos';
    src: url('../fonts/golos-400.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Golos Text – полужирное начертание */
@font-face {
    font-family: 'Golos';
    src: url('../fonts/golos-500.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

.none {
  display: none !important; 
}

html {
  font-size: 62.5%;
}

body {
  background-color: #ffffff;
  font-size: 1.4rem;
  color: black;
  line-height: 150%;
  font-family: 'Golos', sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

.oF-hidden {
  overflow: hidden;
}

.show-sidebar .page {
  position: relative;
}
.show-sidebar .page:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.9;
  z-index: 3;
  top: 51.5px;
  left: 0;
}

b {
  font-weight: bold;
}

main {
  flex: 1 0 auto;
}

.wrapper {
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header-mobile {
  width: 100%;
}
@media (min-width: 992px) {
  .header-mobile {
    display: none;
  }
}

.container-mobile {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.show-sidebar .container-mobile {
  margin-left: 270px;
}

.header-mobile {
  background-color: #181b1e;
}

.logo-mobile {
  display: flex;
  padding: 10px 0;
}
.logo-mobile img {
  width: 140px;
}

.header-top-mobile {
  display: block;
}

.header-block-mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.burger {
  width: 30px;
  height: 2px;
  border: none;
  background: none;
  position: relative;
  top: -50%;
  display: block;
}
.burger:after, .burger:before,
.burger span {
  width: 28px;
  height: 2px;
  display: block;
  font-size: 0;
  color: transparent;
  background: #fff;
  position: relative;
  top: 50%;
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
}
.burger:after, .burger:before {
  content: "";
}
.burger:after {
  top: -10px;
}
.burger:before {
  top: 10px;
}
.show-sidebar .burger span {
  opacity: 0;
}
.show-sidebar .burger:before {
  transform: rotate(45deg);
  top: 2px;
}
.show-sidebar .burger:after {
  transform: rotate(-45deg);
  top: -2px;
}

.header-call-mobile {
  display: block;
}
.header-call-mobile svg {
  fill: #fff;
  height: 30px;
  width: 30px;
}

.header-call-mobile:hover svg {
  fill: #d2d2d2;
}

.nav-mobile {
  position: fixed;
  z-index: 100;
  width: 280px;
  height: 100vh;
  background-color: #181b1e;
  display: none;
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
}
@media (max-width: 991px) {
  .nav-mobile {
    display: block;
    transform: translateX(-100%);
  }
  .show-sidebar .nav-mobile {
    transform: translateX(0%);
    overflow: auto;
  }
}

.sidebar-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo-sidebar {
  margin: 20px;
}

.sidebar-info {
  font-size: 20px;
  font-weight: 600;
}
.sidebar-info a {
  color: #fff;
}
.sidebar-info a:hover {
  color: #d2d2d2;
}

.sidebar-body {
  display: flex;
  flex-direction: column;
}
.sidebar-body .sidebar-nav {
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  padding: 18px 0;
  margin: 0px 40px;
  border-bottom: solid 1px #2f2f2f;
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
}
.sidebar-body .sidebar-nav:hover {
  color: #c331f4;
}

.sidebar-body {
  padding-top: 20px;
}

.sidebar-list-inlain-item {
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  padding: 5px 0;
  margin: 0px 40px;
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
}
.sidebar-list-inlain-item a {
  color: #b9b9b9;
}

.sidebar-list-inlain {
  padding-top: 25px;
  padding-bottom: 130px;
}

.header {
  width: 100%;
  color: white;
}
@media (max-width: 991px) {
  .header {
    display: none;
  }
}

.header-top {
  background-color: #181b1e;
}

.logo {
  padding: 30px 5px 30px 0;
}

.container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.header-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-button {
  font-size: 16px;
  color: #acacac;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
}

.header-block-info {
  font-size: 17px;
  color: rgb(255, 255, 255);
}

.header-item-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 17px;
}

.header-item-ul {
  display: flex;
  align-items: center;
}

.cart-button {
  color: white;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
}

.cart-button:hover {
  color: #c331f4;
}

.header-button:hover {
  color: #c331f4;
}

.button-li-item:hover {
  color: #c331f4;
}

.nav-item {
  padding: 1rem 1.5rem;
}

.header-bottom {
  background-color: #212529;
}

.button-li-item {
  color: white;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
}

.landing-shop {
  max-height: 50rem;
  position: relative;
}

.landing-shop-photo {
  max-height: 50rem;
  height: 100%;
  width: 100%;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #202326;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: saturate(150%) blur(15px);
  backdrop-filter: saturate(150%) blur(15px);
}

.skrollabel {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 3vw;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  color: #fff;
}
@media (max-width: 800px) {
  .skrollabel {
    font-size: 5vw;
  }
}

.smaller-landing-h {
  font-size: 2.6vw;
}
@media (max-width: 800px) {
  .smaller-landing-h {
    font-size: 4.4vw;
  }
}

.txt-my-plus {
  color: #c331f4 !important;
  font-weight: 1000 !important;
}

.my-plus {
  max-width: 570px;
  font-weight: 100;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.check-list {
  position: relative;
  z-index: 2;
}

.check-list li {
  position: relative;
  margin-bottom: 8px;
  display: flex;
  display: -ms-flexbox;
  font-size: 19px;
}
@media (max-width: 800px) {
  .check-list li {
    font-size: 14px;
  }
}

.check-list li::before {
  content: "✔";
  font-family: grona_templates;
  font-size: 15px;
  margin-right: 10px;
  line-height: 1;
  margin-top: 7px;
}

.welcome-block {
  background: radial-gradient(100px circle at 10% 110px, #ffffff 50%, transparent 51%), radial-gradient(100px circle at 5% 600px, #ffffff 50%, transparent 51%), radial-gradient(120px circle at 7% 1020px, #ffffff 50%, transparent 51%), radial-gradient(60px circle at 90% 100px, #ffffff 50%, transparent 51%), radial-gradient(140px circle at 94% 400px, #ffffff 50%, transparent 51%), radial-gradient(120px circle at 94% 800px, #ffffff 50%, transparent 51%), radial-gradient(100px circle at 96% 1170px, #ffffff 50%, transparent 51%);
  background-color: rgba(0, 0, 0, 0);
  background-color: #3f3f3f;
}

.welcome-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  padding: 20px 4px;
  margin: 20px auto;
  margin-top: 20px;
}

.welcome-title {
  text-align: center;
  font-size: 5rem;
  font-weight: 500;
  color: white;
  padding: 30px 54px 40px;
}
@media (max-width: 991px) {
  .welcome-title {
    font-size: 4rem;
  }
}
@media (max-width: 373px) {
  .welcome-title {
    font-size: 3rem;
  }
}

.item-card {
  display: flex;
  flex-direction: column;
  width: 30.5%;
  max-width: 370px;
  max-height: 350px;
  text-align: center;
  border-radius: 5%;
  overflow: hidden;
  margin: 10px;
  color: black;
}
@media (max-width: 732px) {
  .item-card {
    width: 48.5%;
    margin: 10px 0;
  }
}

.item-img {
  background-color: #fff;
}

.card-content {
  background-color: #fff;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 40px 0 20px 0;
}

.card-img {
  max-width: 200px;
  padding: 30px 44px 0px 44px;
}

.card-title {
  color: inherit;
  font-size: 20px;
  font-weight: 700;
}

.card-smoll-title {
  color: inherit;
  font-size: 16px;
  font-weight: 100;
}

.price {
  color: #444444;
  font-size: 14px;
  font-weight: 100;
}

.welcome-feetback {
  color: #181b1e;
  font-size: 4rem;
  text-align: center;
  font-weight: 800;
}
@media (max-width: 800px) {
  .welcome-feetback {
    font-size: 3rem;
  }
}

.flamp {
  background-image: url(data:image/png;base64,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bS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVRYXRlPSIyMDIxLTA3LTI4VDIwOjA2OjUzKzAzOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIxLTA3LTI4VDIwOjA2OjUzKzAzOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0wNy0yOFQyMDowNjo1MyswMzowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyOWY1MDMwMi1lMjU4LTRjY2MtOGYyYi01ZjAwNWUwYjNhYjgiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo1NmM4NDc2MC0zMzdjLWQ4NGQtYjc3Ny1iOTlmZmY1MTY5MjAiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozM2MzZjk0Yy0xYjZhLTRiNjYtYWEzNC04MjYzMzM3NjVlYjYiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0iRGlzcGxheSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MzNjM2Y5NGMtMWI2YS00YjY2LWFhMzQtODI2MzMzNzY1ZWI2IiBzdEV2dDp3aGVuPSIyMDIxLTA3LTI4VDIwOjA2OjUzKzAzOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMiAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MjlmNTAzMDItZTI1OC00Y2NjLThmMmItNWYwMDVlMGIzYWI4IiBzdEV2dDp3aGVuPSIyMDIxLTA3LTI4VDIwOjA2OjUzKzAzOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMiAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz624rxvAAAEkUlEQVRYw72Ye2wURRzHT6NR2goSRUkgtdZH5CGvQpMK8Q8To/6hLSCliMG2SIHWlqQmxsZgJEZRExUSgcZGfABREqQgiCT4SCA2YmoJqFEJtbt7u1du73q9Xund7fWuX38ze4vt3W67e+31j08mt7s385mZ3zxdC+sUl0PuI6qJPcT3xL9EKIlA/EQ0EzXEHKf5O/m4lDhGwCHfERUTKfQocT4DkVQuEU+MV+jdCRBJpTkToRuTsYAs0U5McyLUkUUZgy4ix47QuUmQMbg4ltB7kyhjcMBKaJGdDBbUKnh4q3Pms7TWMt/HzIT+Nvt40UsKltQrKKiSkbtSwtTVIu5YKzmnXMTsDW4UNZgKyalCj1vJLKA0b5WIxXVuNH2m4uCPAXzTFsSxtj60/hy0zalfQ3j7KxX5L0i8xUzKWz9c6IypUJ0HuaskVL6vQA2GAQwS8WTqFKDjch+mlwuYt8VU6A9DaLZV60x7VkL5Tg9lFeMimhZFNBpFfDCCeCwKLar/1onw3zH6RjOBSZ1u78WMdRKPJ4tYWsiEXjR7OZdqcdc6AX92hSizBMLhCC9Yry0T1HhBkYj+nKWGuHkLDaH9H9ZCowo1uZJTedrLmevdeGaHQhmRxJDGa56IazhyLoDSHR7UfnQVvt4wEokYb5lEPIaT53vpuYo3DvjTeOvLHtTsVvHARpmPVAuhr11WS8RtNJpq96q8domYXvuevgEK8C64SgQSFqGoYf5c4y0Xx8stXriWdSJvtZRG7koRd1MllzZ4KDatJ0omJJq9vLPCjbXvdPOuGUpoiFPraDENTZ+quH2NRFOBjG5/itDHV+EquoIcKtxgSqnAh/2Seg+PyzHmuW4m1G/28sFNCgqrRbi913hhLIZYLPWGwtQ6AuZuHinEhH+4EMT2L3zY1dqDD4ldrQHsOdGDV/d7KT95tNgx6GdC16xG2ZQyEa99rnIRI2DZnHLDUwKf4Ayh9KAeDiCr/Zj1vICHauwJuc3nIAVzNiuYvkZE8yn/9ZFSs5u65UkRxdtGCpkT4VK//NWP/A0iz28MIS8TOmv1AVsy7t+oIKdMQMO+bpzpCKKkUaa5RMayFCG9S+NcWm9RA0DxDdhtod+ZUMtoHy2u1xdFNn/MqBAwv1YmyXSh+KCGs5f6aHnwY++3AexjnAzgk9O9eP2gSjEk2Ymh40xoi92rwryt+mp/b9VIof+HPXXn0is0xIXrsNZ1MMq2M6FCp3sYc6FB7DzsQw4txOPYGxVntEscTSg3c6HLw1f7p538uaBS5qNsIBxNBnKMB/MHR/24tSxjoU2pGzTR7p8Lq2UUbZPRqYQwEAkjQEtKmNI3D3lpyZEykfERN6UKLbebgbE4ljS6sbxRwiPEikaR1ik3jUhPJkKlVpv8FjsZGKOloEpBfqWCeyr1lM0zbO5yKHNirGPQxUk8cQh2zmV5yUNctmV6iJl2T65Tid+yKMOG+KxMLhv2Z0HmCHHLeK5jSpMngvGKdBLPTeSFFbs1a8tAhHV9HXHzRN+gGRQTrxCHk4XJw670FOJCsluaiBVO8/8PqLN3YevGdOcAAAAASUVORK5CYII=);
}

.review-avatar {
  margin: 3px 12px 0 0;
  width: 36px;
  height: 36px;
  background-size: 36px;
  background-repeat: no-repeat;
  background-position: 50%;
  border-radius: 50%;
}

.avatar1{
    background-image: url('/catalog/Vitalina.jpg');
}
.avatar2{
    background-image: url('/catalog/malcev.jpg');
}
.avatar3{
    background-image: url('/catalog/marina.jpg');
}

.icon-star-filled::before {
  content: "★";
  color: #ffb300;
}

.review-feature-block {
  display: flex;
  align-items: center;
  padding: 50px;
}
@media (max-width: 800px) {
  .review-feature-block {
    flex-direction: column;
  }
}

.review {
  padding: 30px;
  border-radius: 24px 24px 24px 0;
  background: #e6e6e6;
  background: #fff;
  width: 62%;
}
@media (max-width: 800px) {
  .review {
    width: 100%;
  }
}

.feature {
  text-align: center;
  font-size: 3rem;
  font-weight: 600;
  padding: 30px;
  max-width: 400px;
}
@media (max-width: 800px) {
  .feature {
    max-width: 100%;
    font-size: 2.5rem;
  }
}

.review-header {
  display: flex;
  align-items: center;
}

.review-author-name {
  font-size: 17px;
}

.review-body {
  padding-top: 20px;
}

.container-review {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.review-body p {
  font-size: 17px;
  font-weight: 100;
}
@media (max-width: 800px) {
  .review-body p {
    font-size: 14px;
  }
}

.review-button {
  padding-top: 10px;
}

.reviev-btn {
  padding-top: 10px;
  position: relative;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  color: #8f8f8f;
}

.reviev-btn:hover {
  margin-right: 10px;
  color: #000000;
}

.arrou-right::before {
  content: "➔";
  margin-left: 10px;
  color: #4e4e4e;
}

.zoom-hover:hover {
  transform: scale(1.05);
  box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.5);
  color: #c331f4;
}

.zoom-hover {
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
}

.footer {
  background-color: #181b1e;
  flex: 0 0 auto;
}

.footer-contacts {
  display: flex;
  justify-content: space-evenly;
  padding-top: 50px;
  color: white;
  font-size: 2.5rem;
  flex-wrap: wrap;
}

.footer-block-info {
  font-size: 20px;
  color: white;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
}

.footer-info {
  margin-left: 15px;
}

.tel {
  display: flex;
  align-items: normal;
}

.tel::before {
  content: "☎";
  width: 30px;
  height: 60px;
  color: red;
}

.geo {
  display: flex;
  align-items: normal;
}

.geo::before {
  content: "📍";
  width: 30px;
  height: 30px;
}

svg {
  width: 40px;
  height: 40px;
  color: beige;
}

.footer-contacts-social {
  display: flex;
  color: #fff;
  max-width: 1000px;
  margin: 5px auto;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.contact-social-media {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 501;
  color: #fff;
  cursor: pointer;
  padding: 15px 3%;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
}

.contact-social-media:hover {
  color: #AAA;
}

.footer-info a:hover {
  color: #AAA;
}

.social {
  padding-left: 10px;
}

.list-inlain {
  display: flex;
  justify-content: center;
  font-size: 20px;
  flex-wrap: wrap;
}

.footer-list {
  padding: 30px;
}

.list-inlain-item a {
  color: #919191;
  padding-left: 15px;
}

.after::after {
  content: "";
  width: 1px;
  height: 20px;
  background: hsla(0, 0%, 100%, 0.5);
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

.hover:hover {
  color: #5e5e5e;
}

.hover {
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
}

.title-simple {
  padding-top: 40px;
  font-size: 3rem;
  font-weight: bold;
}

.title-simple::after {
  width: 30px;
  height: 4px;
  border-radius: 4px;
  content: "";
  background: linear-gradient(90deg, #c331f4, rgba(226, 9, 154, 0.961));
  box-shadow: 0 1px 6px rgba(218, 17, 85, 0.3);
  display: block;
  margin: 5px 0 20px;
}

.children-links {
  display: flex;
  flex-wrap: wrap;
}

.children-card {
  text-align: left;
  padding: 9px 14px;
  margin: 7px;
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  background-color: #fefefe;
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.15);
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  color: #000;
}

.children-card:hover {
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0);
  background-color: #f2f2f2;
  opacity: 0.9;
  color: #646464;
}

.card-text {
  color: inherit;
  font-size: inherit;
}

.card-preview {
  height: 26px;
  margin-right: 11px;
}

.popular-item-name {
  display: -webkit-box;
  text-align: center;
  color: #000;
  font-size: 17px;
  padding: 20px 10px 0 10px;
  -webkit-line-clamp: 2;        /* количество строк, можно изменить */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4em;            /* подберите под ваш дизайн */
}

.popular-item-img, .popular-item-price {
  padding-top: 20px;
}

.popular-item-img img{
  width: 100%;
}
.before-price {
  font-size: 12px;
  text-decoration: line-through;
  color: #666;
  font-weight: 400;
}

.after-price {
  font-size: 15px;
  font-weight: 600;
}

.popular-item {
  width: 31.5%;
  max-width: 312px;
  min-width: 152px;
  margin: 5px;
  padding-bottom: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  background-color: #fff;
}
@media (max-width: 785px) {
  .popular-item {
    width: 47%;
  }
}
@media (max-width: 600px) {
  .popular-item {
    width: 100%;
  }
}

.popular-card-footer {
  width: 70%;
  text-align: center;
  margin: 15px;
}

.popular-card-btn {
  border: none;
  width: 100%;
  height: 100%;
  padding: 15px;
  background-color: #9400bd;
  border-radius: 10px;
  color: white;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}

.popular-card-btn:hover {
  background-color: #740097;
}

.popular-item:hover {
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.04);
  transform: scale(0.95);
}

.popular {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 50px;
}
@media (max-width: 732px) {
  .popular {
    justify-content: space-around;
  }
}

.popular-header {
  text-align: center;
  font-size: 3rem;
  font-weight: 1000;
  margin-top: 30px;
}

.product-top-img {
  width: 51%;
  max-width: 600px;
  position: relative;
  vertical-align: top;
  box-sizing: border-box;
}
@media (max-width: 780px) {
  .product-top-img {
    width: 100%;
    margin: 0 auto;
  }
}

.product-img {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
}

.product-img-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.product-img-wrapper img {
  width: 100%;
  height: 100%;
}

.carousel-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
}

.product-img-thumbs {
  margin: 18px 6px 14px;
}

.selected {
  margin: 3px 7px;
}

.selected a {
  padding: 7px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 55px;
  height: 55px;
  float: left;
  overflow: hidden;
  box-sizing: content-box;
}

.selected a:focus {
  padding: 5px;
  border: 2px solid #bebebe;
}

.product-title {
  color: #1a1c1f;
  font-size: 2.5rem;
  font-weight: 700;
}

.product-single-top {
  display: flex;
  flex-wrap: wrap;
}
@media (max-width: 780px) {
  .product-single-top {
    flex-direction: column;
  }
}

.product-single-summary {
  width: 49%;
  box-sizing: border-box;
  padding-left: 4%;
}
@media (max-width: 780px) {
  .product-single-summary {
    width: 100%;
  }
}

.icon-Apple::before {
  content: "\f8ff";
}

.product-content-body {
  margin: 0 0;
  display: flex;
  align-items: center;
}

.product-content-body svg {
  width: 20px;
  height: 20px;
}

.product-color-name img {
  height: 40px;
  margin-right: 14px;
}

.product-color-name {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-radius: 4px;
  font-size: 16px;
  color: black;
}

.product-celect-color {
  display: flex;
  flex-wrap: wrap;
  margin-top: 5px;
}

.h5 {
  margin-top: 18px;
  font-size: 20px;
}

.product-celect-color-item {
  margin: 0 10px 10px 0;
  border: 1px solid #eee;
  border-radius: 10px;
}

.product-celect-color-item:active {
  border: 1px solid #b7b7b7;
}

.old-price {
  font-size: 20px;
  text-decoration: line-through;
  color: #919191;
  margin-left: 15px;
  position: relative;
  font-weight: 500;
}

.main-price {
  font-size: 35px;
  font-weight: bold;
}

.cash-price-tip {
  font-size: 14px;
}

.product-price {
  background: #f7f7f7;
  margin: 20px 0 8px;
  border-radius: 12px;
  padding: 20px 5.5% 15px 6.5% !important;
  width: 100%;
  max-width: 342px;
  box-sizing: border-box;
}
@media (max-width: 780px) {
  .product-price {
    width: 100%;
    margin: 20px auto;
  }
}

.product-btn-pay {
  margin-top: 20px;
  width: 100%;
  height: 56px;
  padding: 0;
  background-position: 28px 13px;
  background-size: 24px;
  line-height: 26px;
  font-size: 22px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  background: #00bf6f;
  border-color: #00bf6f;
  border-radius: 12px;
  color: #000;
  font-weight: 500;
}

.product-btn-pay:hover {
  background: #009154;
  border-color: #00bf6f;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
}

.product-price__delivery {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin-bottom: 15px;
}

.delivery-icon-item {
  padding-right: 10px;
}

.header-delivery {
  font-size: 16px;
  font-weight: bolder;
}

.footer-delivery {
  opacity: 0.5;
}

.svg-del {
  width: 30px;
  margin-left: 10px;
}

.bottom-breif {
  line-height: 20px;
  font-weight: 600;
  max-width: 1010px;
  box-sizing: content-box;
  text-align: center;
  width: 92%;
  margin: 35px auto 10px;
  padding: 0 4%;
  border-radius: 10px;
  font-size: 18px;
  white-space: pre-wrap;
  opacity: 0.6;
}
@media (max-width: 780px) {
  .bottom-breif {
    font-size: 15px;
    line-height: 15px;
  }
}

.contact-header-phones {
  margin-bottom: 60px;
  display: flex;
  gap: 40px;
  margin-top: 60px;
  align-items: center;
}
@media (max-width: 870px) {
  .contact-header-phones {
    flex-direction: column;
    gap: 10px;
  }
}

.contact-header-phone {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  padding-right: 40px;
  border-right: 2px solid #d9d9d9;
}
@media (max-width: 870px) {
  .contact-header-phone {
    border-bottom: 2px solid #d9d9d9;
    border-right: none;
    padding: 0 0 20px 0;
  }
}

.svg-contact-phone {
  color: #c331f4;
  margin-right: 15px;
}

.contact-header-phone-number {
  color: black;
  font-size: 24px;
  font-weight: 501;
}

.contact-header-phone-text {
  opacity: 0.6;
  color: black;
  font-size: 16px;
}

.contact-header-phones-title {
  font-weight: 500;
  font-size: 18px;
  opacity: 0.7;
}

.contact-social-hr {
  height: auto;
  width: 7px;
  margin: 0px;
  background-image: url(../images/dots-vert.svg);
  background-repeat: repeat-y;
  background-size: 100% auto;
  padding: 0 4px;
  opacity: 1;
}
@media (max-width: 870px) {
  .contact-social-hr {
    background-image: url(../images/dots-gor.svg);
    background-repeat: repeat-x;
    height: 7px;
    width: auto;
    border: none;
    background-size: auto 100%;
  }
}

.contact-header-social {
  display: flex;
  border-radius: 20px;
  background: #f3f3f3;
  margin-bottom: 20px;
}
@media (max-width: 870px) {
  .contact-header-social {
    flex-direction: column;
  }
}

.contact-social-list {
  padding-top: 20px;
  justify-content: space-around;
  display: flex;
  flex-wrap: wrap;
}

.font-black {
  color: #000;
}

.contact-social-title {
  font-size: 17px;
  padding-bottom: 5px;
  font-weight: 501;
}

.contact-social-col {
  padding: 40px 30px;
}

.contact-social-media {
  flex-wrap: nowrap;
}

.nowrap {
  white-space: nowrap;
}

.contact-header {
  margin-bottom: 50px;
}

.contact-social-text {
  font-size: 14px;
  font-weight: 50;
  opacity: 0.7;
}

.treidIn-ol {
  max-width: 700px;
  list-style: auto;
  font-weight: 500;
  margin: 35px 0 0 20px;
}

.treidIn-ol li::marker {
  font-size: 14px;
}

.treidIn-ol li ul {
  list-style: inside;
  margin-top: 5px;
}

.treidIn-ol li {
  margin-bottom: 15px;
}

.treidIn-ol li ul li {
  margin-bottom: 5px;
}

.delivery-block {
  display: flex;
  margin-top: 50px;
  border: double;
  border-color: #c331f4;
  padding: 20px;
}

.delivery-title {
  font-size: 30px;
  margin-bottom: 20px;
}

.delivery-plus-title {
  font-size: 18px;
}

.delivery-plus {
  margin-bottom: 20px;
}

.delivery-plus p {
  opacity: 0.7;
}

.modal-block {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.show-modal .modal-block {
  display: flex;
}

@media (max-width: 482px) {
  .social {
    padding-bottom: 20px;
  }
}

.modal-content {
  display: block;
  min-width: 200px;
  max-width: 800px;
  max-height: 600px;
  background-color: #212529;
  margin: 10px 20px;
}

.modal-breif {
  color: rgba(242, 242, 242, 0.368627451);
  text-align: center;
  margin: 10px 20px;
  font-size: 11px;
  border: dotted 3px rgba(195, 49, 244, 0.368627451);
}

.modal-contact {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding-top: 25px;
}

.modal-txt {
  color: #f2f2f2;
  text-align: center;
  margin: 10px 20px;
  font-size: 20px;
}

.modal-svg {
  color: #f2f2f2;
  font-size: 20px;
  margin-right: 15px;
}
.modal-svg svg {
  width: 30px;
}

.modal-social-flex {
  display: flex;
}

.social-button {
  display: flex;
}
.social-button :hover {
  color: #adadad;
}

.social-txt {
  color: #f2f2f2;
}

.modal-btn-close {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-btn-close button {
  border: none;
  background-color: #c331f4;
  font-size: 20px;
  padding: 20px 80px;
  margin: 20px;
  border-radius: 10px;
}
@media (max-width: 340px) {
  .modal-btn-close button {
    padding: 20px 40px;
  }
}

.modal-btn-close button:hover {
  background-color: rgba(195, 49, 244, 0.568627451);
}

/* Корзина в шапке */
.cart-container {
  position: relative;
  display: inline-block;
  margin-left: 20px;
}

.cart-icon-link {
  position: relative;
  display: inline-block;
  color: #fff; /* цвет иконки – подстрой под свою шапку */
  text-decoration: none;
}

.cart-icon {
  width: 28px;
  height: 28px;
  display: block;
}

.cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background-color: #c331f4; /* фиолетовый акцент */
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  padding: 0 2px;
}

.cart-total-text {
  font-size: 12px;
  color: #fff;
  margin-top: 2px;
  text-align: center;
  line-height: 1.2;
}

/* Выделение выбранной опции (цвет, память и т.д.) */
.product-celect-color-item input:checked + .product-color-name {
    border: 2px solid #c331f4;
    box-shadow: 0 0 5px rgba(195, 49, 244, 0.5);
    border-radius: 10px; /* если нужно скругление как у плиток */
}

/* Для чекбоксов (если используются) */
.product-celect-color-item input[type="checkbox"]:checked + .product-color-name {
    border: 2px solid #c331f4;
    box-shadow: 0 0 5px rgba(195, 49, 244, 0.5);
}

.popular-item-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    justify-content: center;
}
.after-price {
    font-size: 18px; /* чуть крупнее */
    font-weight: 700;
    color: #000;
}
.before-price {
    font-size: 14px;
    font-weight: 400;
    color: #666;
    text-decoration: line-through;
}

/* Убираем вертикальный скролл у карточки на странице корзины */
.cart-page .card.mb-4,
.cart-page .card-body,
.cart-page .table-responsive {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

/* Стили для страницы корзины с flex-строками */
.cart-page .table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #dee2e6;
    background-color: #fff;
}

/* Все ячейки */
.cart-page .table tbody tr td {
    flex: 1 1 auto;
    padding: 8px;
    border: none;
    background: inherit;
}

/* Колонка изображения (фиксированная ширина) */
.cart-page .table tbody tr td:nth-child(1) {
    flex: 0 0 70px;
    text-align: center;
}

/* Колонка названия товара */
.cart-page .table tbody tr td:nth-child(2) {
    flex: 4 1 250px;
}

/* Колонка количества и кнопок */
.cart-page .table tbody tr td:nth-child(3) {
    flex: 2 1 200px;
    text-align: center;
}

/* Колонка итоговой суммы */
.cart-page .table tbody tr td:nth-child(4) {
    flex: 1 1 100px;
    text-align: right;
    font-weight: bold;
}

/* Пустая ячейка (не используется) */
.cart-page .table tbody tr td:nth-child(5) {
    display: none;
}

/* Ховер для всей строки */
.cart-page .table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.075);
    transition: background-color 0.2s;
}

/* Отключаем Bootstrap-переменную ховера */
.cart-page .table {
    --bs-table-hover-bg: transparent !important;
}
.table-hover > tbody > tr:hover > * {
    background-color: transparent !important;
}

/* Мобильная версия корзины */
@media (max-width: 768px) {
    /* Строка – flex с переносом */
    .cart-page .table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 15px 0;
        border-bottom: 1px solid #dee2e6;
    }

    /* Все ячейки сбрасываем стандартные отступы */
    .cart-page .table tbody tr td {
        padding: 5px 0;
        border: none;
        background: inherit;
        box-sizing: border-box;
    }

    /* Изображение – занимает всю ширину, центрировано */
    .cart-page .table tbody tr td:nth-child(1) {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
    .cart-page .table tbody tr td:nth-child(1) img {
        max-width: 250px;      /* чуть крупнее, можно увеличить до 300px */
        width: 100%;
        height: auto;
        border-radius: 8px;
    }

    /* Название – всю ширину, без нижнего отступа */
    .cart-page .table tbody tr td:nth-child(2) {
        width: 100%;
        font-size: 1.2rem;
        font-weight: 600;
        text-align: center;
        margin-bottom: 5px;    /* минимальный отступ, можно убрать совсем */
    }

    /* Блок количества и кнопок – занимает левую половину */
    .cart-page .table tbody tr td:nth-child(3) {
        width: 50%;
        text-align: left;
        padding-right: 5px;
    }
    .cart-page .table tbody tr td:nth-child(3) .d-flex {
        justify-content: flex-start;
        gap: 5px;
    }
    /* Поле ввода и кнопки адаптируем под мобильные */
    .cart-page .table tbody tr td:nth-child(3) input {
        max-width: 60px;
    }

    /* Итоговая цена – занимает правую половину, выравнивание вправо */
    .cart-page .table tbody tr td:nth-child(4) {
        width: 50%;
        text-align: right;
        font-size: 1.2rem;
        font-weight: 700;
        padding-left: 5px;
    }

    /* Пустая ячейка скрыта */
    .cart-page .table tbody tr td:nth-child(5) {
        display: none;
    }
}

/* Сбрасываем Bootstrap-переменную, отвечающую за ховер */
.cart-page .table {
    --bs-table-hover-bg: transparent !important;
}

/* На случай, если Bootstrap применяет фон напрямую к ячейкам */
.cart-page .table-hover > tbody > tr:hover > * {
    background-color: transparent !important;
}

/* Ваш собственный ховер для всей строки */
.cart-page .table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.075) ;
}
/* Полное отключение ховера для таблицы итогов */
.table-totals,
.table-totals tbody,
.table-totals tbody tr,
.table-totals tbody tr:hover,
.table-totals tbody tr td,
.table-totals tbody tr td:hover,
.table-totals tbody tr th,
.table-totals tbody tr th:hover,
.table-totals *,
.table-totals *:hover {
    background-color: transparent !important;
    --bs-table-hover-bg: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    transition: none !important;
}

/* Фиксируем цвета текста, если нужно (опционально) */
.table-totals,
.table-totals td,
.table-totals th {
    color: inherit !important;
}

/* === Блок бонусных баллов в корзине === */
.cart-page .card .input-group {
    max-width: 300px;
}

.cart-page .card .help-block {
    font-size: 12px;
    color: #6c757d;
    margin-top: 5px;
}

.cart-page .card .btn-primary {
    background-color: #c331f4;
    border-color: #c331f4;
}

.cart-page .card .btn-primary:hover {
    background-color: #a020f0;
    border-color: #a020f0;
}

/* Адаптация для мобильных устройств */
@media (max-width: 576px) {
    .cart-page .card .input-group {
        max-width: 100%;
    }
}

/* Стили для пустой корзины */
.empty-cart {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    border: 1px solid #e0e0e0;        
    border-radius: 15px;               
    padding: 25px;                     
    background-color: #fff;            
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); 
}
.empty-cart img {
    max-width: 200px;
    height: auto;
    margin-bottom: 1.5rem;
}
.empty-cart .title-simple {
    font-size: 2rem;
    margin-bottom: 1rem;
}
.empty-cart p {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 2rem;
    

}
.empty-cart .btn-primary {
    background-color: #c331f4;
    border-color: #c331f4;
    padding: 12px 30px;
    font-size: 1.2rem;
    border-radius: 15px;
}
.empty-cart .btn-primary:hover {
    background-color: #a020f0;
    border-color: #a020f0;
}
.empty-cart .title-simple::after {
    display: none !important;
}

/* ========== Стили для современной корзины ========== */

.cart-title {
  font-size: 40px;
  font-weight: 500;
  line-height: 48px;
  margin-bottom: 48px;
}
.cart-title::after {
  display: none;
}

/* Карточка товара */
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cart-item {
  background-color: #fff;
  border-radius: 32px;
  padding: 32px;
  display: grid;
  grid-template-columns: 144px 1fr auto auto;
  align-items: center;
  gap: 32px;
  transition: box-shadow 0.2s;
}
.cart-item:hover {
  box-shadow: 0 8px 24px rgba(0,32,51,0.12);
}
.cart-item__image {
  width: 144px;
  height: 144px;
}
.cart-item__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cart-item__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cart-item__name {
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: #1b1b1b;
  transition: color 0.2s;
}
.cart-item__name:hover {
  color: #9400bd;
}
.cart-item__options {
  font-size: 13px;
  color: #6b7983;
}
.cart-item__actions {
  width: 100%;
  display: flex;
  align-items: center;
}
.quantity-control {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  width: 100%;
}
.quantity-input {
  width: 70px;
  height: 40px;
  border: 1px solid rgba(107,121,131,0.3);
  border-radius: 24px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
}
.quantity-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.quantity-update,
.quantity-remove {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #ececf1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}
.quantity-update:hover {
  background-color: #e0e0e7;
}
.quantity-remove:hover {
  background-color: #9400bd;
  color: #fff;
}
.cart-item__total {
  font-size: 22px;
  font-weight: 500;
  line-height: 30px;
  color: #1b1b1b;
}

/* Подарочная упаковка */
.gift-card {
  background: linear-gradient(180deg, #f5f5f7, #c3c3cb);
  border-radius: 32px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.gift-card__content {
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
  z-index: 2;
}
.gift-card__icon {
  font-size: 48px;
  line-height: 1;
}
.gift-card__text h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
  color: #1b1b1b;
}
.gift-card__text p {
  font-size: 14px;
  line-height: 22px;
  color: #6b7983;
}
.gift-card__checkbox {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.3);
  backdrop-filter: blur(8px);
  border-radius: 56px;
  padding: 8px 16px;
}
.gift-card__checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid #d6d9df;
  appearance: none;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.2s;
}
.gift-card__checkbox input[type="checkbox"]:checked {
  background-color: #9400bd;
  border-color: #9400bd;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.53694 0.764135C9.88814 1.1159 9.8876 1.68575 9.53587 2.03693L4.22707 7.33694C3.87574 7.68767 3.30667 7.68767 2.95532 7.33694L0.264135 4.6502C-0.0876313 4.299 -0.0881048 3.7292 0.263075 3.3774C0.614255 3.02567 1.18411 3.0252 1.53587 3.37634L3.59119 5.42827L8.26414 0.763075C8.61587 0.411895 9.18574 0.412369 9.53694 0.764135Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.gift-card__checkbox label {
  font-size: 14px;
  font-weight: 500;
  color: #1b1b1b;
  cursor: pointer;
}

/* Современные карточки разделов */
.modern-card {
    background-color: #fff;
    border-radius: 32px;
    padding: 32px;
    box-shadow: 0 8px 24px rgba(0,32,51,0.08);
}
.modern-card:hover {
    box-shadow: 0 12px 32px rgba(0,32,51,0.12);
}

.section-title {
    font-size: 28px;
    font-weight: 500;
    line-height: 36px;
    margin-bottom: 24px;
    color: #1b1b1b;
}
.section-title::after {
    display: none;
}

/* Способы оплаты */
.payment-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.payment-option {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.payment-option input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.payment-option__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border: 1px solid rgba(107,121,131,0.3);
  border-radius: 24px;
  transition: all 0.2s;
  width: 100%;
}
.payment-option input[type="radio"]:checked + .payment-option__inner {
  border-color: #9400bd;
  background-color: rgba(255,43,0,0.05);
}
.payment-option__title {
  font-size: 16px;
  font-weight: 500;
}
.payment-option__subtitle {
  font-size: 14px;
  color: #6b7983;
}

/* Текстовое поле комментария */
.modern-textarea {
  border: 1px solid rgba(107,121,131,0.3);
  border-radius: 16px;
  padding: 16px;
  font-size: 15px;
  line-height: 24px;
  resize: vertical;
}
.modern-textarea:focus {
  border-color: #9400bd;
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,43,0,0.1);
}

/* Блок бонусов */
.bonus-input-group p {
  margin-bottom: 8px;
  font-size: 16px;
}
.bonus-input-group .input-group {
  display: flex;
  max-width: 400px;
}
.bonus-input-group .input-group input {
  flex: 1;
  border: 1px solid rgba(107,121,131,0.3);
  border-radius: 24px 0 0 24px;
  padding: 12px 16px;
  font-size: 16px;
}
.bonus-input-group .input-group button {
  background-color: #9400bd;
  border: none;
  border-radius: 0 24px 24px 0;
  padding: 12px 24px;
  color: #fff;
  font-weight: 500;
  transition: background-color 0.2s;
}
.bonus-input-group .input-group button:hover {
  background-color: #740097;
}
.help-block {
  font-size: 13px;
  color: #6b7983;
  margin-top: 8px;
  display: block;
}

/* Таблица итогов */
.totals-card {
  background-color: #fff;
  border-radius: 32px;
  padding: 32px;
  margin-bottom: 24px;
}
.totals-table {
  width: 100%;
  border-collapse: collapse;
}
.totals-table tr {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(107,121,131,0.3);
}
.totals-table tr:last-child {
  border-bottom: none;
  font-weight: 700;
  font-size: 22px;
}
.totals-table td {
  font-size: 17px;
  line-height: 26px;
  color: #1b1b1b;
}

/* Кнопки действий */
.cart-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.cart-actions .btn {
  border-radius: 16px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.cart-actions .btn-primary {
  background-color: #9400bd;
  border: none;
  color: #f5f5f7;
}
.cart-actions .btn-primary:hover {
  background-color: #740097;
}
.cart-actions .btn-outline-secondary {
  border: 1px solid rgba(27,27,27,0.3);
  color: #1b1b1b;
  background: transparent;
}
.cart-actions .btn-outline-secondary:hover {
  border-color: #9400bd;
  color: #9400bd;
}

/* Пустая корзина */
.empty-cart-modern {
  background-color: #fff;
  border-radius: 32px;
  padding: 70px 32px;
  text-align: center;
}
.empty-cart__emoji {
  font-size: 80px;
  line-height: 1;
  margin-bottom: 24px;
}
.empty-cart__title {
  font-size: 40px;
  font-weight: 500;
  line-height: 48px;
  margin-bottom: 16px;
  color: #1b1b1b;
}
.empty-cart__text {
  font-size: 16px;
  line-height: 24px;
  color: #6b7983;
  margin-bottom: 32px;
}
.empty-cart-modern .btn-primary {
  background-color: #9400bd;
  border: none;
  border-radius: 16px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 500;
  color: #f5f5f7;
}
.empty-cart-modern .btn-primary:hover {
  background-color: #740097;
}

/* Адаптивность */
@media (max-width: 976px) {
  .cart-page {
    padding: 24px;
  }
  .cart-title {
    font-size: 26px;
    line-height: 34px;
    margin-bottom: 24px;
  }
  .cart-item {
    grid-template-columns: 88px 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
    padding: 16px;
  }
  .cart-item__image {
    width: 88px;
    height: 88px;
    grid-row: span 2;
  }
  .cart-item__info {
    grid-column: 2;
    grid-row: 1;
  }
  .cart-item__actions {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
  }
  .cart-item__total {
    grid-column: 1 / -1;
    text-align: right;
    font-size: 18px;
  }
  .gift-card__content {
    flex-wrap: wrap;
    gap: 16px;
  }
  .gift-card__checkbox {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
  .modern-card {
    padding: 24px;
  }
  .section-title {
    font-size: 18px;
    line-height: 26px;
  }
  .payment-option__inner {
    padding: 12px;
  }
  .totals-card {
    padding: 24px;
  }
  .cart-actions {
    flex-direction: column;
  }
  .cart-actions .btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 576px) {
  .cart-page {
    padding: 16px;
    border-radius: 24px;
  }
  .cart-item__info {
    font-size: 13px;
  }
  .cart-item__name {
    font-size: 13px;
    line-height: 22px;
  }
  .quantity-input {
    width: 50px;
    height: 36px;
  }
  .gift-card {
    padding: 16px;
  }
  .gift-card__icon {
    font-size: 32px;
  }
  .gift-card__text h3 {
    font-size: 15px;
  }
  .gift-card__text p {
    font-size: 12px;
    line-height: 18px;
  }
}

/* Стили для кнопок + и - */
.quantity-increase,
.quantity-decrease {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #ececf1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s;
  border: none;
  cursor: pointer;
}
.quantity-increase:hover {
  background-color: #b1b1b6;
}
.quantity-decrease:hover {
  background-color: #b225d8cb;
  color: #fff;
}
.quantity-increase svg,
.quantity-decrease svg {
  width: 16px;
  height: 16px;
  color: #000;

}

/* Поля ввода в современном стиле */
.modern-input {
    border: 1px solid rgba(107,121,131,0.3);
    border-radius: 16px;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 24px;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #fff;
}
.modern-input:focus {
    border-color: #9400bd;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255,43,0,0.1);
}

/* Группа инпута с кнопкой */
.input-group .modern-input {
    border-radius: 16px 0 0 16px;
}
.input-group .btn-outline-secondary {
    border-radius: 0 16px 16px 0;
    border: 1px solid rgba(107,121,131,0.3);
    background-color: #fff;
    padding: 0 16px;
    color: #6b7983;
    transition: all 0.2s;
}
.input-group .btn-outline-secondary:hover {
    background-color: #f5f5f7;
    border-color: #9400bd;
    color: #9400bd;
}

/* Кнопка очистки (крестик) */
#clear-contact {
    display: flex;
    align-items: center;
    justify-content: center;
}
#clear-contact svg {
    width: 20px;
    height: 20px;
}

/* Основная кнопка отправки */
.btn-primary {
    background-color: #9400bd;
    border: none;
    border-radius: 16px;
    font-weight: 500;
    font-size: 16px;
    transition: background-color 0.2s;
}
.btn-primary:hover {
    background-color: #740097;
}
.btn-primary:disabled {
    background-color: rgba(255,43,0,0.5);
    cursor: not-allowed;
}

/* Кнопка подтверждения (зелёная) */
.btn-success {
    background-color: #00a86b;
    border: none;
    border-radius: 16px;
    font-weight: 500;
    font-size: 16px;
}
.btn-success:hover {
    background-color: #008c56;
}

/* Alert'ы (можно стилизовать под дизайн) */
.alert {
    border-radius: 16px;
    padding: 16px 20px;
    border: none;
}
.alert-danger {
    background-color: rgba(255,43,0,0.1);
    color: #740097;
}
.alert-success {
    background-color: rgba(0,168,107,0.1);
    color: #008c56;
}

/* ========== ДОБАВЛЕНО: Стили для OTP и личного кабинета ========== */
.badge.bg-secondary {
  background-color: #6b7983 !important;
  border-radius: 100px;
  padding: 4px 12px;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: #fff;
  display: inline-block;
}

.alert-modern {
  border-radius: 24px;
  padding: 20px 24px;
  border: none;
  background-color: #f5f5f7;
  color: #1b1b1b;
}
.alert-modern.alert-info {
  background-color: rgba(0,168,107,0.1);
  color: #008c56;
}
.alert-modern i {
  font-size: 20px;
  vertical-align: middle;
  margin-right: 8px;
}

.btn-link {
  color: #9400bd;
  font-weight: 500;
  text-decoration: none;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 16px;
  transition: color 0.2s;
}
.btn-link:hover {
  color: #740097;
  text-decoration: underline;
}

.profile-info strong {
  font-weight: 500;
  color: #1b1b1b;
  width: 100px;
  display: inline-block;
}
.profile-info .mb-3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 576px) {
  .profile-info .mb-3 {
    flex-direction: column;
    align-items: flex-start;
  }
  .profile-info strong {
    width: auto;
  }
}

/* ========== ОБЪЕДИНЁННЫЕ СТИЛИ .cart-page (последнее определение) ========== */
.cart-page {
  background-color: #f5f5f7;
  border: none;
  border-radius: 32px;
  padding: 32px;
  box-shadow: none;
  margin-top: 20px;
  margin-bottom: 30px;
}

/* ========== ДОБАВЛЕНО: Стили для OTP и личного кабинета ========== */
.badge.bg-secondary {
  background-color: #6b7983 !important;
  border-radius: 100px;
  padding: 4px 12px;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: #fff;
  display: inline-block;
}

.alert-modern {
  border-radius: 24px;
  padding: 20px 24px;
  border: none;
  background-color: #f5f5f7;
  color: #1b1b1b;
}
.alert-modern.alert-info {
  background-color: rgba(0,168,107,0.1);
  color: #008c56;
}
.alert-modern i {
  font-size: 20px;
  vertical-align: middle;
  margin-right: 8px;
}

.btn-link {
  color: #9400bd;
  font-weight: 500;
  text-decoration: none;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 16px;
  transition: color 0.2s;
}
.btn-link:hover {
  color: #740097;
  text-decoration: underline;
}

.profile-info strong {
  font-weight: 500;
  color: #1b1b1b;
  width: 100px;
  display: inline-block;
}
.profile-info .mb-3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 576px) {
  .profile-info .mb-3 {
    flex-direction: column;
    align-items: flex-start;
  }
  .profile-info strong {
    width: auto;
  }
}

/* ========== ССЫЛКИ В БЛОКЕ КОРЗИНЫ НА СТРАНИЦЕ ОФОРМЛЕНИЯ ========== */
#cart-module a {
  color: #1b1b1b;
  text-decoration: none;
  transition: color 0.2s;
}
#cart-module a:hover {
  color: #9400bd;
}

/* ========== ОБЪЕДИНЁННЫЕ СТИЛИ .cart-page (последнее определение) ========== */
.cart-page {
  background-color: #f5f5f7;
  border: none;
  border-radius: 32px;
  padding: 32px;
  box-shadow: none;
  margin-top: 20px;
  margin-bottom: 30px;
}
/* Увеличенные отступы в основных кнопках для лучшей читаемости */
.btn-primary,
.btn-success,
.btn-outline-secondary {
  padding: 14px 32px;
}

.btn-sm {
  padding: 8px 20px;
  font-size: 14px;
}

.btn-lg {
  padding: 18px 40px;
  font-size: 18px;
}

/* На мобильных устройствах уменьшаем отступы до стандартных, чтобы не вылезали */
@media (max-width: 576px) {
  .btn-primary,
  .btn-success,
  .btn-outline-secondary {
    padding: 12px 24px;
  }
  
  .btn-lg {
    padding: 16px 32px;
    font-size: 16px;
  }
}

/* ========== КАРТОЧКИ КАТЕГОРИЙ (очищено, единый стиль) ========== */
.original-devices__content {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 24px;
}

.original-devices-card {
  background-color: #f4f4f4;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  height: 400px;
  justify-content: space-between;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.original-devices-card:hover {
  box-shadow: 0 8px 24px rgba(0,32,51,0.12);
}
.original-devices-card:hover .original-devices-card__name,
.original-devices-card:hover .original-devices-card__price {
  color: #9400bd;
}
.original-devices-card__name {
  color: #1b1b1b;
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
  position: relative;
  transition: color 0.25s;
  z-index: 2;
}
.original-devices-card__img {
  position: absolute;
  bottom: 140px;
  left: 32px;
  right: 32px;
  top: 72px;
  display: flex;
  justify-content: center;
  z-index: 0;
}
.original-devices-card__img img {
  object-fit: contain;
  width: 100%;
  max-height: 100%;
}
.original-devices-card__link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.original-devices-card__price {
  position: absolute;
  top: 34px;
  right: 34px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  transition: color 0.25s;
  z-index: 2;
}
.original-devices-card__price svg {
  color: #9400bd;
}

/* Широкая карточка (занимает 2 колонки) */
.original-devices-card--big {
  grid-column: span 2;
}

/* Адаптивность */
@media (max-width: 976px) {
  .original-devices-card {
    height: 350px;
    padding: 24px;
  }
  .original-devices-card__name {
    font-size: 22px;
    line-height: 30px;
  }
  .original-devices-card__img {
    bottom: 100px;
    left: 24px;
    right: 24px;
    top: 80px;
  }
}
@media (max-width: 576px) {
  .original-devices__content {
    grid-template-columns: 1fr; /* на мобильных одна колонка */
  }
  .original-devices-card--big {
    grid-column: span 1; /* убираем широкие на мобильных */
  }
  .original-devices-card {
    height: 300px;
  }
  .original-devices-card__price {
    top: 24px;
    right: 24px;
  }
}
/* ______________________________________ */

/* ========== КАРТОЧКИ КАТЕГОРИЙ — НОВЫЙ ДИЗАЙН ========== */
.original-devices__content {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 24px;
}

.original-devices-card {
  background-color: transparent; /* фоном будет изображение */
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  height: 400px;
  justify-content: space-between;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s;
  color: #fff; /* базовый цвет текста */
}
.original-devices-card:hover {
  box-shadow: 0 8px 24px rgba(0,32,51,0.12);
}
.original-devices-card:hover .original-devices-card__name,
.original-devices-card:hover .original-devices-card__price {
  color: #9400bd; /* акцентный цвет при наведении */
}
.original-devices-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgb(0, 0, 0) 1000%);
  z-index: 1;
  pointer-events: none;
}
.original-devices-card__name {
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
  position: relative;
  transition: color 0.25s;
  z-index: 2;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.original-devices-card__img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}
.original-devices-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.original-devices-card__link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.original-devices-card__price {
  position: absolute;
  top: 34px;
  right: 34px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  transition: color 0.25s;
  z-index: 2;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.original-devices-card__price svg {
  color: #9400bd;
}

/* Широкая карточка (занимает 2 колонки) */
.original-devices-card--big {
  grid-column: span 2;
}

/* Адаптивность */
@media (max-width: 976px) {
  .original-devices-card {
    height: 350px;
    padding: 24px;
  }
  .original-devices-card__name {
    font-size: 22px;
    line-height: 30px;
  }
}
@media (max-width: 576px) {
  .original-devices__content {
    grid-template-columns: 1fr; /* на мобильных одна колонка */
  }
  .original-devices-card--big {
    grid-column: span 1;
  }
  .original-devices-card {
    height: 300px;
  }
  .original-devices-card__price {
    top: 24px;
    right: 24px;
  }
}

/* ========== КАРТОЧКИ КАТЕГОРИЙ — ЭФФЕКТ ЗУМА ========== */
.original-devices__content {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 24px;
}

.original-devices-card {
  background-color: transparent;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  height: 400px;
  justify-content: space-between;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s; /* добавили transform */
  color: #fff;
  transform-origin: center; /* центр масштабирования */
}
.original-devices-card:hover {
  transform: scale(1.05);  /* зум при наведении */
  box-shadow: 0 8px 24px rgba(0,32,51,0.12);
}
.original-devices-card:hover .original-devices-card__name,
.original-devices-card:hover .original-devices-card__price {
  color: #9400bd;
}
.original-devices-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%);
  z-index: 1;
  pointer-events: none;
}
.original-devices-card__name {
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
  position: relative;
  transition: color 0.25s;
  z-index: 2;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.original-devices-card__img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}
.original-devices-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.original-devices-card__link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.original-devices-card__price {
  position: absolute;
  top: 34px;
  right: 34px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  transition: color 0.25s;
  z-index: 2;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.original-devices-card__price svg {
  color: #9400bd;
}

/* Широкая карточка (занимает 2 колонки) */
.original-devices-card--big {
  grid-column: span 2;
}

/* Адаптивность */
@media (max-width: 976px) {
  .original-devices-card {
    height: 350px;
    padding: 24px;
  }
  .original-devices-card__name {
    font-size: 22px;
    line-height: 30px;
  }
}
@media (max-width: 576px) {
  .original-devices__content {
    grid-template-columns: 1fr;
  }
  .original-devices-card--big {
    grid-column: span 1;
  }
  .original-devices-card {
    height: 300px;
  }
  .original-devices-card__price {
    top: 24px;
    right: 24px;
  }
  
}

/* ========== КАРТОЧКИ КАТЕГОРИЙ — ЦЕНА ВНИЗУ ========== */
.original-devices__content {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 24px;
}

.original-devices-card {
  background-color: #f4f4f4;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  height: 400px;
  justify-content: space-between;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  color: #fff;
  transform-origin: center;
}
.original-devices-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0,32,51,0.12);
}
.original-devices-card:hover .original-devices-card__name,
.original-devices-card:hover .original-devices-card__price {
  color: #9400bd;
}
.original-devices-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgb(0, 0, 0) 1000%);
  z-index: 1;
  pointer-events: none;
}
.original-devices-card__name {
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
  position: relative;
  transition: color 0.25s;
  z-index: 2;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}


.original-devices-card__link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.original-devices-card__price {
  position: absolute;
  bottom: 32px;
  right: 32px;
  display: flex;
  align-items: end;
  gap: 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  transition: color 0.25s;
  z-index: 2;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.original-devices-card__price svg {
  color: #9400bd;
}

/* Широкая карточка (занимает 2 колонки) */
.original-devices-card--big {
  grid-column: span 2;
}

/* Адаптивность */
@media (max-width: 976px) {
  .original-devices-card {
    height: 350px;
    padding: 24px;
  }
  .original-devices-card__name {
    font-size: 22px;
    line-height: 30px;
  }
  .original-devices-card__price {
    bottom: 24px;
    right: 24px;
  }
}
@media (max-width: 576px) {
  .original-devices__content {
    grid-template-columns: 1fr;
  }
  .original-devices-card--big {
    grid-column: span 1;
  }
  .original-devices-card {
    height: 300px;
  }
  .original-devices-card__price {
    bottom: 20px;
    right: 20px;
  }
}

/* Универсальная кнопка пользователя в шапке */
.header-user-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 24px;
  background-color: rgba(255,255,255,0.1);
  transition: background-color 0.2s;
  color: #fff;
  text-decoration: none;
}
.header-user-link:hover {
  background-color: rgba(255,255,255,0.2);
  color: #fff;
}
.header-user-name {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}
.header-user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #c331f4;
  color: #fff;
}
.header-user-avatar svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Кнопка в мобильном меню */
.mobile-user-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  background-color: #222 !important;
  border-radius: 24px !important;
  margin: 10px 40px !important;
  color: #fff !important;
  text-decoration: none !important;
}
.mobile-user-name {
  font-size: 16px;
  font-weight: 500;
}
.mobile-user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #c331f4;
  color: #fff;
}
.mobile-user-avatar svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Компактная кнопка пользователя */
.header-user-link {
  padding: 6px 12px; /* немного уменьшил отступы */
  gap: 6px;
}

.header-user-name {
  max-width: 100px;          /* при необходимости ширину можно увеличить */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;           /* чуть уменьшил шрифт */
}

.header-user-avatar {
  width: 28px;               /* уменьшил аватар */
  height: 28px;
}

.header-user-avatar svg {
  width: 16px;
  height: 16px;
}

/* Аналогично для мобильной кнопки */
.mobile-user-link {
  padding: 8px 16px !important;
  gap: 6px !important;
}

.mobile-user-name {
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

.mobile-user-avatar {
  width: 28px;
  height: 28px;
}

.mobile-user-avatar svg {
  width: 16px;
  height: 16px;
}

/* Улучшенная корзина в шапке */
.header-cart-wrapper {
  display: flex;
  align-items: center;
}

.header-cart-wrapper .cart-container {
  margin-left: 0; /* убираем отступ, если был */
}

.header-cart-wrapper .cart-icon {
  width: 32px;
  height: 32px;
  transition: transform 0.2s;
}

.header-cart-wrapper .cart-icon:hover {
  transform: scale(1.05);
}

.header-cart-wrapper .cart-badge {
  background-color: #9400bd;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 50%;
  position: absolute;
  top: -6px;
  right: -8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  padding: 0 2px;
  text-align: center;
}

.header-cart-wrapper .cart-total-text {
  font-size: 12px;
  color: #f5f5f7;
  margin-top: 4px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-align: center;
  white-space: nowrap;
}

/* Улучшенная корзина в шапке */
.header-cart-wrapper .cart-container {
  margin-left: 0;
}

.header-cart-wrapper .cart-icon-link {
  position: relative;
  display: inline-block;
  color: #fff;
}

.header-cart-wrapper .cart-icon {
  width: 32px;
  height: 32px;
  transition: transform 0.2s;
}

.header-cart-wrapper .cart-icon:hover {
  transform: scale(1.05);
}

.header-cart-wrapper .cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background-color: #9400bd;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 50%;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  padding: 0 2px;
}

.header-cart-wrapper .cart-total-text {
  font-size: 12px;
  color: #f5f5f7;
  margin-top: 4px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-align: center;
  white-space: nowrap;
}
/* Корзина в шапке (улучшенный вид) */
.header-cart-wrapper .cart-container {
  margin-left: 0;
}

.header-cart-wrapper .cart-icon-link {
  position: relative;
  display: inline-block;
  color: #fff;
}

.header-cart-wrapper .cart-icon {
  width: 32px;
  height: 32px;
  transition: transform 0.2s;
}

.header-cart-wrapper .cart-icon:hover {
  transform: scale(1.05);
}

.header-cart-wrapper .cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background-color: #9400bd;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 50%;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  padding: 0 2px;
}

.header-cart-wrapper .cart-total-text {
  font-size: 12px;
  color: #f5f5f7;
  margin-top: 4px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-align: center;
  white-space: nowrap;
}

/* Корзина в шапке — финальные стили с принудительным переопределением */
.header-cart-wrapper .cart-container .cart-badge {
  position: absolute !important;
  top: 0px !important;
  right: -8px !important;
  background-color: #9400bd !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: bold !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  border-radius: 50% !important;
  text-align: center !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
  padding: 0 2px !important;
  display: inline-block !important;
  z-index: 10 !important;
}

/* Убедимся, что родительский элемент позиционирован правильно */
.header-cart-wrapper .cart-icon-link {
  position: relative !important;
  display: inline-block !important;
}

.original-devices__content > :nth-last-child(1):nth-child(odd),
.original-devices__content > :nth-last-child(2):nth-child(odd) ~ * {
  margin-bottom: 50px;
}

/* Мобильный хедер: аватар и корзина */
.header-mobile-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-user-avatar-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.1);
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s;
}
.mobile-user-avatar-link:hover {
  background-color: rgba(255,255,255,0.2);
}
.mobile-user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  color: #fff;
}
.mobile-user-avatar svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Корзина в мобильном хедере (уменьшенная) */
.mobile-cart .cart-container {
  margin-left: 0;
}
.mobile-cart .cart-icon {
  width: 28px;
  height: 28px;
}
.mobile-cart .cart-total-text {
  font-size: 11px;
  margin-top: 2px;
}

/* Страница бонусных баллов */
.balance-card .balance-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 18px;
}
.balance-label {
  font-weight: 500;
  color: #6b7983;
}
.balance-value {
  font-size: 32px;
  font-weight: 700;
  color: #9400bd;
}

.rewards-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.reward-item {
  display: flex;
  flex-direction: column;
  padding: 20px;
  transition: box-shadow 0.2s;
}
.reward-item:hover {
  box-shadow: 0 8px 24px rgba(0,32,51,0.12);
}
.reward-date {
  font-size: 13px;
  color: #6b7983;
  margin-bottom: 8px;
}
.reward-description {
  font-size: 16px;
  font-weight: 500;
  color: #1b1b1b;
  margin-bottom: 12px;
  line-height: 1.4;
}
.reward-points {
  align-self: flex-end;
  font-size: 20px;
  font-weight: 700;
}
.reward-points.positive {
  color: #00a86b;
}
.reward-points.negative {
  color: #d32300;
}

.pagination-wrapper {
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.results-text {
  font-size: 14px;
  color: #6b7983;
}

/* Страница бонусных баллов */
.balance-card .balance-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 18px;
}
.balance-label {
  font-weight: 500;
  color: #6b7983;
}
.balance-value {
  font-size: 32px;
  font-weight: 700;
  color: #9400bd;
}

.rewards-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.reward-item {
  display: flex;
  flex-direction: column;
  padding: 20px;
  transition: box-shadow 0.2s;
}
.reward-item:hover {
  box-shadow: 0 8px 24px rgba(0,32,51,0.12);
}
.reward-date {
  font-size: 13px;
  color: #6b7983;
  margin-bottom: 8px;
}
.reward-description {
  font-size: 16px;
  font-weight: 500;
  color: #1b1b1b;
  margin-bottom: 12px;
  line-height: 1.4;
}
.reward-points {
  align-self: flex-end;
  font-size: 20px;
  font-weight: 700;
}
.reward-points.positive {
  color: #00a86b;
}
.reward-points.negative {
  color: #d32300;
}

.pagination-wrapper {
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.results-text {
  font-size: 14px;
  color: #6b7983;
}

/* Отступ заголовка (если нужно зафиксировать в CSS, а не инлайн-стилем) */
.section-title {
  margin-top: 30px; /* добавляем отступ сверху */
}

/* ========== СОВРЕМЕННЫЙ БЛОК ПРЕИМУЩЕСТВ ========== */
.advantages-section {
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.advantages-title {
  text-align: center;
  font-size: 2.8rem;
  font-weight: 600;
  margin-bottom: 40px;
  color: #1a1c1f;
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

@media (max-width: 992px) {
  .advantages-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .advantages-grid {
    grid-template-columns: 1fr;
  }
}

.advantage-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 32px 24px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 20px 30px rgba(195, 49, 244, 0.1);
  border-color: rgba(195, 49, 244, 0.2);
}

.advantage-card:hover {
  transform: translateY(-6px);
 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.advantage-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c331f4; /* сплошной фиолетовый */
  border-radius: 50%;
  color: #ffffff; /* белая иконка */
  transition: background 0.3s ease, color 0.3s ease;
}

.advantage-card:hover .advantage-icon {
  background: rgba(195, 49, 244, 0.1); /* прозрачный фон */
  color: #c331f4; /* фиолетовая иконка */
}

.advantage-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #1a1c1f;
}

.advantage-text {
  font-size: 1.5rem;
  line-height: 1.5;
  color: #6b7983;
  margin: 0;
}

/* Адаптивность для мобильных (дополнительно) */
@media (max-width: 768px) {
  .advantages-section {
    padding: 40px 15px;
  }
  .advantages-title {
    font-size: 2.2rem;
  }
  .advantage-card {
    padding: 24px 16px;
  }
}

.product-celect-color-item.active {
    border: 2px solid #c331f4;
    box-shadow: 0 0 5px rgba(195, 49, 244, 0.5);
}
.product-celect-color-item {
    display: inline-block;
    margin: 0 10px 10px 0;
    border: 1px solid #eee;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
}
.product-celect-color-item:hover {
    border-color: #c331f4;
}
.product-celect-color-item.active {
    border: 2px solid #c331f4;
    box-shadow: 0 0 5px rgba(195, 49, 244, 0.5);
}
.product-celect-color-item {
    display: inline-block;
    margin: 0 10px 10px 0;
    border: 1px solid #eee;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
}
.product-celect-color-item:hover {
    border-color: #c331f4;
}

/* Анимация корзины */
@keyframes cartShake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}
.cart-animation {
    animation: cartShake 0.4s ease-in-out;
}

/* Анимация появления тоста */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Современное уведомление (snackbar) */
.snackbar {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #fff;
    border-radius: 48px;
    padding: 12px 20px 12px 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    max-width: 400px;
    min-width: 240px;
}
.snackbar.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.snackbar-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    flex-shrink: 0;
}
.snackbar-message {
    font-size: 14px;
    line-height: 1.4;
    color: #1b1b1b;
    font-weight: 500;
}
@media (max-width: 576px) {
    .snackbar {
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: none;
    }
}