/* MAIN  */
html
{
	font-size: 62.5%;
}

html, body {
    -webkit-text-size-adjust: none;
}

body
{
	position: relative;
	padding: 0;
	margin: 0;
	font-size: 1.6rem;
	background-color: #F2F0F1;
	font-family: 'Cera Pro', "Open Sans",Helvetica,Arial,sans-serif;
	font-weight: 400;

    min-height: 100dvh;

    min-height: -webkit-fill-available;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

	background-size: cover;

    /*padding-top: env(safe-area-inset-top);*/
    /*padding-left: env(safe-area-inset-left);*/
    /*padding-right: env(safe-area-inset-right);*/
    /*padding-bottom: env(safe-area-inset-bottom);*/
}
section
{
	position: relative;
	display: block;
}

#wrapper
{
	position: relative;
	/*margin: 30px auto 40px auto;*/
	max-width: 1100px;
	min-height: 80vh;
    /*margin: auto;*/
}
a {
	text-decoration: none;
	color: inherit;
}


@media screen and (max-width: 980px) {
	.mobile-only {
		display: block;
	}

	.desktop-only {
		display: none;
	}
}
.mobile-only
{
	display: none;
}
.desktop-only
{
	display: block;
}

/*.main_button*/
/*{*/
/*	display: block;*/
/*    width: 220px;*/
/*    padding: 12px;*/
/*    border: 0;*/
/*    border-radius: 38px;*/
/*    !*font-family: Roboto; !* TODO: поменять *!*!*/
/*    font-size: 1.6rem;*/
/*    font-weight: 400;*/
/*    color: white;*/
/*    background-color: #3E348C;*/
/*    cursor: pointer;*/
/*}*/

/* RADIO CHANGE */
input[type='radio'],
label {
  cursor: pointer;
}

input[type='radio'] {
  position: relative;
  height: 11px;
  width: 11px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
}

input[type='radio']::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border: 3px solid #3E348C;;
}
input[type='radio']:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: #3E348C;;
  transform: translate(-50%, -50%);
  visibility: visible;
}
/* RADIO CHANGE END */

/* DEL INPUT NUMBER ARROWS */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

.button
{
    text-align: center;
    border-radius: 20px;
    padding: 15px 40px;

    background-color: var(--main-obj);
    color: var(--text-main-obj);
    font-size: 2.2rem;
}
button {
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;

    -webkit-tap-highlight-color: transparent;
    background-clip: border-box;
}

button:focus,
button:active {
  outline: none !important;
  box-shadow: none !important;
}

:root {
    --main-obj: #FFC7D2;
    --text-main-obj: #64464C;
    --dark: #656565;
    --main-opacity12 : #F1E4EC;
}



/* webkit normalize */
/* 1. Убираем webkit-стили у форм */
input, textarea, select, button {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

/* 2. Убираем подсветку при тапе */
a, button {
  -webkit-tap-highlight-color: transparent;
}

/* 3. Фикс авто-зум на input (Safari увеличивает при фокусе, если <16px) */
input, textarea, select {
  font-size: 16px;
}

/* 4. Сглаживание шрифтов (iOS делает их толще) */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 5. Фикс 100vh (на iPhone адресная строка ломает высоту) */
:root {
  --app-height: 100vh;
}
@supports (-webkit-touch-callout: none) {
  :root {
    --app-height: 100svh; /* новые единицы в iOS 16+ */
  }
}
.full-height {
  height: var(--app-height);
}

/* 6. Сброс для картинок и медиа */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}



/* Index */
.welcome-block {
    position: relative;
    width: 100vw;
    height: 120svh;

    background-repeat: no-repeat;
    background-size: cover;
}
.welcome-block_title {
    position: absolute;
    margin-left: 5%;
    margin-top: 40%;
    width: 255px;
}
.welcome-block_title img{
    width: 100%;
	object-fit: cover;
}
.index_banner img {
	width: 100%;
	border-radius: 30px;
	object-fit: cover;
}
.welcome-block_goal
{
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 35px;

    width: 90%;
    margin: 0 5%;

    bottom: 30%;
}
.welcome-block_goal_text {
    color: white;
    font-size: 2.4rem;
}


/* catalog silder */
.catalog-slider-container {
    overflow: hidden;
    width: 100%;
    touch-action: pan-y;
    user-select: none;
}

/* ВАЖНО: ставим transition: none чтобы не конфликтовало с JS */
.catalog-slider-track {
    display: flex;
    will-change: transform;
    transform: translate3d(0,0,0);
    transition: none; /* JS будет управлять переходами инлайн */
}

/*.catalog-slide {*/
/*    flex: 0 0 calc(100% / 5);*/
/*    display: flex;*/
/*    flex-direction: column; !* иконка + подпись *!*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    padding: 12px 8px;*/
/*    cursor: grab;*/
/*    user-select: none;*/
/*}*/
.catalog-slide:active { cursor: grabbing; }

.catalog-icon {
    width: 62px; height: 62px;
    border-radius: 12px;
    display: flex;
    align-items: center; justify-content: center;
    font-size: 30px;
    background: #fafafa;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    margin-bottom: 6px;
    transition: box-shadow .18s, border-color .18s;
}

.catalog-label {
    font-size: 14px;
    color: #333;
    text-align: center;
}

.catalog-slide.active .catalog-icon {
    border: 2px solid #0b76ff;
    box-shadow: 0 6px 18px rgba(11,118,255,0.12);
}

@media (max-width: 520px) {
    .catalog-icon { width: 52px; height: 52px; font-size: 26px; }
}



.index_catalog {
    position: relative;
    z-index: 10;
    margin: -30px 0;
    border-radius: 25px;
    overflow: hidden;
    /*top: -40px;*/
    /*padding: 10px 0;*/
    /*border-radius: 40px;*/
    background-color: white;
}

/* =========================================== */
:root {
  --color-active: #F6C9D2;   /* R246 G201 B210 */
  --color-inactive: #C2C2C2;
}

/* ---------- basic slider styles ---------- */
.catalog-slider-container {
  overflow: hidden;
  width: 100%;
  touch-action: pan-y;
  user-select: none;
}

.catalog-slider-track {
  display: flex;
  will-change: transform;
  transform: translate3d(0,0,0);
  transition: none;
}

.catalog-slide {
  flex: 0 0 calc(100% / 5);
  display: flex;
  flex-direction: column;
  align-items: center;
  /*justify-content: center;*/
  padding: 12px 8px;
  cursor: grab;
  user-select: none;
}
.catalog-slide:active { cursor: grabbing; }

/* ---------- icon mask technique ---------- */
.catalog-icon {
  width: 62px;
  height: 62px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  --icon-fill: var(--color-inactive);
  background-color: var(--icon-fill);
  transition: background-color 240ms ease, box-shadow 180ms ease, transform 160ms ease;

  -webkit-mask-image: var(--img-url, none);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 80%;
  mask-image: var(--img-url, none);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 80%;

  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  background-clip: padding-box;
}
.catalog-icon > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
}

.catalog-slide.active .catalog-icon {
  --icon-fill: var(--color-active);
  box-shadow: 0 6px 18px rgba(11,118,255,0.12);
}

.catalog-label {
  margin-top: 6px;
  font-size: 2rem;
  color: var(--color-inactive);
  transition: color 200ms ease;
}
.catalog-slide.active .catalog-label {
  color: #000;
}

/* ---------- content area (fade-in) ---------- */
.catalog-content {
  margin-top: 20px;
  min-height: 120px;
  padding: 12px;
  border-radius: 8px;
  background: #fff;
  position: relative;
  overflow: hidden;
}

.catalog-content .category {
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, height 0.3s ease;
}

.catalog-content .category.active {
  opacity: 1;
  visibility: visible;
  height: auto;
  overflow: visible;
}



/* responsive */
@media (max-width: 520px) {
  .catalog-icon { width: 52px; height: 52px; }
  .catalog-icon { -webkit-mask-size: 56%; mask-size: 56%; }
  .catalog-label { font-size: 12px; }
}

.index_subscription {
    background-color: var(--main-obj);
    position: relative;
    z-index: 9;
    margin-bottom: -30px;
    border-radius: 0 0 25px 25px;

    min-height: 200px;
    overflow: hidden;
}

.index_mission {
    background-color: white;
    position: relative;
    z-index: 8;
    margin-bottom: -30px;
    border-radius: 25px;
    overflow: hidden;

    min-height: 200px;
}

.index_owner {
    position: relative;
    z-index: 7;
    margin-bottom: -30px;
    border-radius: 0 0 25px 25px;

    min-height: 200px;

    background-repeat: no-repeat;
    background-size: cover;

    padding: 100px 20px 50px 20px;
}

.index_review {
    background-color: white;
    position: relative;
    z-index: 6;
    margin-bottom: -30px;
    border-radius: 25px;

    min-height: 200px;

    padding: 70px 20px 30px 20px;
}


.index_subscription_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 340px;
    margin: auto;
    padding: 100px 0 0 0;
    grid-gap: 30px;
    text-align: center;
}
.index_subscription_content_title {
    font-size: 3rem;
    font-weight: 500;
    color: var(--text-main-obj);
}
.index_subscription_content_text {
    color: var(--text-main-obj);
    font-weight: 500;
    opacity: 0.6;
}
.index_subscription_content_button {
    background-color: var(--text-main-obj);
    color: var(--main-obj);
    font-size: 1.6rem;
}
.index_subscription_image {
    position: relative;
    overflow: hidden;
    top: 15px;
}
.index_subscription_image img {
    width: 100%;
	height: 100%;
	object-fit: cover;
}


.index_mission_image {
    position: absolute;
    object-fit: cover;
    overflow: hidden;
    right: -15%;
    height: 100%;
}
.index_mission_image img {
    height: 100%;
    object-fit: cover;
    /*display: none;*/
}
.index_mission_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-gap: 15px;

    padding: 80px 20px 0 20px;
}
.index_mission_content_headline {
    font-size: 2.6rem;
    font-weight: 500;
    color: var(--dark);
}
.index_mission_content_headline_text {
    font-weight: 500;
    color: var(--dark);
}
.index_mission_content_headline_button {
    background-color: var(--main-obj);
    color: var(--text-main-obj);
    font-size: 1.4rem;

    border-radius: 8px;
    padding: 6px 12px;
    width: 150px;
}
.index_mission_statistic {
    display: flex;
    grid-column-gap: 20px;

    margin-top: 40px;
    padding: 0 20px 40px 20px;
}
.index_mission_statistic_el {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.index_mission_statistic_el_number {
    color: var(--dark);
    font-weight: 500;
    font-size: 3rem;
}
.index_mission_statistic_el_text {
    color: var(--dark);
    font-weight: 500;
    font-size: 0.8rem;
}
.index_owner_content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    grid-row-gap: 150px;
}
.index_owner_content_owner {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    grid-row-gap: 3px;
}
.index_owner_content_owner_name {
    font-weight: 500;
    font-size: 1.8rem;
    color: white;
}
.index_owner_content_owner_staus {
    font-weight: 500;
    color: white;
    opacity: 60%;
}
.index_owner_content_main_title {
    font-weight: 500;
    font-size: 2.5rem;
    color: white;
}
.index_owner_content_main {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    grid-row-gap: 20px;
}

.index_owner_content_main_media {
    display: flex;
    grid-gap: 10px;
}
.index_owner_content_main_media div {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    padding: 10px 20px;
    border-radius: 13px;
    font-weight: 500;
}
.index_owner_content_main_media_instagram {
    background: rgba(68, 53, 59, 0.6);
    color: var(--main-obj);
}
.index_owner_content_main_media_telegram {
    background: rgba(142, 164, 255, 0.12);
    color: #85C0FF;
}
.index_owner_content_main_media_annotation {
    font-weight: 600;
    font-size: 1.4rem;
    color: white;
    opacity: 30%;
}


.index_review_title {
    font-size: 1.8rem;
    font-weight: 500;
    padding-bottom: 10px;
    color: black;
    opacity: 80%;
}
.index_review_container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
-ms-overflow-style: none;
    scrollbar-width: none;
    grid-column-gap: 10px;
}
.index_review_container::-webkit-scrollbar {
    display: none;
}
.index_review_container_el {
    flex: 0 0 250px;
    scroll-snap-align: start;
}
.index_review_container_el_image {
    width: 250px;
    height: 250px;

    position: relative;
    border-radius: 20px;

    background-repeat: no-repeat;
    background-size: cover;

}
.index_review_container_el_image_stars {
    position: absolute;
    bottom: 12px;
    left: 15px;

    display: flex;
    grid-column-gap: 3px;
}
.index_review_container_el_image_stars img{
    width: 12px;
}
.index_review_container_el_image_tag {
    position: absolute;
    bottom: 12px;
    right: 15px;

    font-size: 1.2rem;
    font-weight: 500;
    border-radius: 10px;
    padding: 5px 10px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    background: rgba(68, 53, 59, 0.6);
    color: var(--main-obj);
}
.index_review_container_el_review {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 1fr auto;
    grid-row-gap: 8px;

    padding: 12px;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.5rem;
}
.index_review_container_el_review_author {
    color: var(--dark);
}
.index_review_container_el_review_datetime {
    color: var(--dark);
}
.index_review_container_el_review_message {
    grid-column: 1/3;
}



.product_button_container {
    position: fixed;
    z-index: 100;
    bottom: 15px;
    text-align: center;

    width: 100svw;
    display: flex;
    justify-content: center;
}
.product_button {
    display: flex;
    justify-content: center;
    grid-column-gap: 10px;

    background-color: var(--main-obj);
    border: 0;
    border-radius: 15px;
    padding: 15px;
    width: 90svw;

    color: #64464C;
    font-weight: 500;
    font-size: 2rem;
}
.product_button_old-price {

    text-decoration: line-through;
    opacity: 36%;

    font-size: 1.7rem;
}
.product_button span{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Product image silder */

.product_image {
    height: 60svh;
}
.product-image-slider {
    position: relative;
    width: 100%;
    /*max-width: 400px;*/
    height: 100%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    touch-action: pan-y;
}
.product-slides {
    display: flex;
    height: 100%;
    transition: transform 0.35s ease;
    will-change: transform;
}
.product-slide {
    flex: 0 0 100%;
    height: 100%;
}
.product-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
}
.product-dots {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.product-dot {
    height: 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.6);
    transition: all 0.3s ease;
}
.product-dot.active {
    width: 24px;
    background: rgba(255,255,255,1);
}
.product-dot:not(.active) {
    width: 8px;
}

.product_content {
    position: relative;
    z-index: 10;
    margin: -22px 0;
    padding: 25px 20px;
    border-radius: 25px;
    overflow: hidden;
    background-color: #F2F0F1;
}
.product_content_card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-gap: 20px;
    font-weight: 500;
}
.product_content_card_availability {
    display: flex;
    grid-gap: 10px;
}
.product_content_card_availability span {
    display: flex;
    font-size: 1.4rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 13px;
}
.product_content_card_availability .available{
    background-color: rgba(34, 185, 34, 0.12);
    color: rgba(34, 185, 34, 1);
}
.product_content_card_availability .delivery{
    background-color: rgba(255, 127, 127, 0.12);
    color: rgba(255, 127, 127, 1);
    grid-gap: 5px;
}
.product_content_card_availability .unavailable{
    background-color: rgba(251, 1, 31, 0.12);
    color: rgb(255, 0, 0);
    grid-gap: 5px;
}
.product_content_card_title {
    font-size: 2.4rem;
    font-weight: 500;
    margin: 0;
}
.product_content_card_characteristic {
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-gap: 15px;
}
.product_content_card_characteristic_el {
    display: flex;
    justify-content: space-between;
}
.product_content_card_characteristic_el_size_el img {
    width: 16px;
    height: 16px;
}
.product_content_card_characteristic_el .text {
    color: var(--dark);
}
.product_content_card_characteristic_el_size {
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-gap: 10px;
}
.product_content_card_characteristic_el_size_el {
    display: flex;
}
.product_content_card_characteristic_el_description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-gap: 5px;
}




/*.product_content_card_additional {*/
/*    display: flex;*/
/*    overflow-x: auto;*/
/*    scroll-snap-type: x mandatory;*/
/*    -webkit-overflow-scrolling: touch;*/
/*    scroll-behavior: smooth;*/
/*    grid-column-gap: 10px;*/
/*    -ms-overflow-style: none;*/
/*    scrollbar-width: none;*/
/*}*/
/*.product_content_card_additional::-webkit-scrollbar {*/
/*    display: none;*/
/*}*/

/*.product_content_card_additional_el {*/
/*    flex: 0 0 80px;*/
/*    scroll-snap-align: start;*/

/*    border: 2px solid transparent;*/
/*    transition-duration: 0.5s;*/
/*    background-color: white;*/
/*    text-align: center;*/
/*    border-radius: 15px;*/
/*    padding: 22px;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    grid-row-gap: 15px;*/
/*}*/
/*.product_content_card_additional_el.active {*/

/*    border-color: var(--main-obj);*/
/*}*/

/*.product_content_card_additional_el_image {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*}*/
/*.product_content_card_additional_el_image img {*/
/*    width: 80px;*/
/*    height: 80px;*/
/*    object-fit: cover;*/
/*}*/
/*.product_content_card_additional_el_title {*/
/*    font-weight: 400;*/
/*    color: #AFAFAF;*/
/*}*/

.product_content_card_additional {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.product_content_card_additional::-webkit-scrollbar {
  display: none;
}

.product_content_card_additional_el {
    position: relative;
    /*flex: 0 0 80px;*/
    scroll-snap-align: start;
    border: 2px solid transparent;
    border-radius: 15px;
    padding: 22px;
    background-color: white;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* убираем сам чекбокс */
.product_content_card_additional_el input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.product_content_card_additional_el_image img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

.product_content_card_additional_el_title {
  font-weight: 500;
  color: #AFAFAF;
  font-size: 1.5rem;
}

.product_content_card_additional_el_footer {
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.product_content_card_additional_el_price {
  font-weight: 500;
  color: black;
  transition: opacity 0.3s ease;
}

.product_content_card_additional_el_check {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.product_content_card_additional_el_check img {
  width: 22px;
  height: 22px;
}

.product_content_card_additional_el_title, .product_content_card_additional_el_footer {
    width: 80px;
}


.product_content_card_additional_el:has(input:checked) {
  border-color: var(--main-obj);
  box-shadow: 0 0 0 2px rgba(255, 192, 203, 0.2);
}

/* прячем цену и показываем галочку */
.product_content_card_additional_el:has(input:checked) .product_content_card_additional_el_price {
  opacity: 0;
}
.product_content_card_additional_el:has(input:checked) .product_content_card_additional_el_check {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}




/* -------- PROFILE -------- */
.profile {
    font-weight: 500;
    margin: 20px;
    margin-top: 70px;
}
.profile_info {
    display: grid;
    grid-row-gap: 10px;
    justify-content: space-between;
    align-items: center;
}
.profile_info_user {
    display: flex;
    align-items: center;
    grid-column-gap: 12px;
    grid-row: span 2;

}
.profile_info_user_image {
    width: 55px;
    height: 55px;

    border-radius: 100%;
    overflow: hidden;
}
.profile_info_user_image img {
    object-fit: cover;
}
.profile_info_logout {
    justify-self: end;
    grid-row: 2;
    grid-column: 2;
}
.profile_button {
    background-color: var(--main-obj);
    color: #64464C;
    text-align: center;

    font-size: 1.4rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 8px;
}

.profile_product {
    display: flex;
    flex-direction: column;
    grid-row-gap: 10px;

    margin-top: 30px;
}
.profile_product_title {
    font-size: 2rem;
}
.profile_product_container {
    display: flex;
    flex-direction: column;
    grid-row-gap: 15px;
}
.profile_product_order {
    display: flex;
    flex-direction: column;
    grid-row-gap: 13px;

    background-color: white;
    padding: 20px;
    text-align: center;
    border-radius: 18px;
}
.profile_product_order_data {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    justify-content: space-around;
    grid-row-gap: 3px;
    text-align: left;
}
.profile_product_order_data_delivery {
    grid-column: span 2;
    grid-row:2;
}

.profile_product_order_products {
    display: flex;
    flex-direction: column;
    grid-row-gap: 10px;
}
.profile_product_order_product {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 10px;
}
.profile_product_order_product_image {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
}
.profile_product_order_product_image img {
    object-fit: cover;
}
.profile_product_order_product_content_data {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-row-gap: 5px;
     min-height: 60px;
    text-align: left;
}
.profile_product_order_product_value, .profile_product_order_product_price {
    display: flex;
    flex-direction: column;
    justify-content: end;
}
.profile_product_order_product_name {
    display: flex;
    flex-direction: column;

    grid-row: 1;
    grid-column: span 2;
}
.profile_product_order_product_addons {
    display: flex;
    flex-direction: column;
    grid-row-gap: 2px;

    font-size: 1.3rem;
    color: #C2C2C2;
}


.profile-edit {
    display: flex;
    flex-direction: column;
    align-items: center;

    font-weight: 500;
    margin: 20px;
}
.profile-edit h1 {
    text-align: center;
    margin: 60px 0 20px 0;
    font-size: 2rem;
}
.profile_edit_nav {
    display: flex;
    flex-direction: column;
    grid-row-gap: 10px;
}
.profile-edit form {
    display: flex;
    flex-direction: column;
    grid-row-gap: 15px;
}
#id_avatar {
    display: none;
}


.update-photo-link:hover {
    color: #0056b3;
}

/* Небольшие отступы для блока аватара */
.profile_avatar_block {
    text-align: center;
    margin: 0 auto 5px auto;

}
.profile_avatar_block img {
    width: 150px;
    height: 150px;
    border-radius: 100%;
    object-fit:cover;
}
.update-photo-link {
    display: inline-block;
    cursor: pointer;

    padding: 5px 12px;
    margin-top: 8px;
    border-radius: 8px;

    font-size: 1.4rem;
    background-color: #FFC7D2;
    color: #64464C;
    font-weight: 500;
}
.update-photo-link:hover {
    color: #64464C;
    font-weight: 600;
}
.profile_form_container {
    display: flex;
    flex-direction: column;
    grid-row-gap: 15px;
}
.profile_form_container_el {
    display: flex;
    flex-direction: column;
    grid-row-gap: 4px;

    text-align: center;
}
.profile_input {
    border: none;
    padding: 10px 20px;
    border-radius: 14px;
}
.repeat-order-form {
    text-align: right;
}
.repeat-button {
    background-color: initial;
    cursor: pointer;
    color: gray;
    text-decoration: underline;
}


.about_welcome {
    background-color: white;
    position: relative;
    z-index: 9;
    margin-bottom: -30px;
    border-radius: 25px;

    display: flex;
    flex-direction: column;
    grid-row-gap: 50px;

    min-height: 200px;
    overflow: hidden;
}
.about_welcome_brand {
    font-family: "Cera Pro", serif;
    font-size: 1.8rem;
    font-weight: 600;

    color: #FFC7D2;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 340px;
    margin: auto;
    padding: 130px 0 0 0;
    text-align: center;
}
.about_welcome_brand_hct {
    font-weight: 800;
    font-size: 5rem;
    line-height: 4.4rem;

    paint-order: stroke fill;
    -webkit-text-stroke: 2px black;
}
.about_welcome_brand_maksimflowers {
    font-weight: 700;
    font-size: 2.4rem;

    paint-order: stroke fill;
    -webkit-text-stroke: 1px black;
}
.about_welcome_description {
    text-align: center;
    font-weight: 500;
    font-size: 2.0rem;
}
.about_welcome_statistic {
    display: flex;
    justify-content: space-around;

    margin: 120px 0 50px 0;
}
.about_welcome_statistic_el {
    display: flex;
    flex-direction: column;
    text-align: center;

    color: #363636;
}
.about_welcome_statistic_el_number {
    font-weight: 700;
    font-size: 4.2rem;
    opacity: 0.6;
    letter-spacing: -2px;
}
.about_welcome_statistic_el_title {
    font-weight: 500;
    font-size: 1.4rem;
    opacity: 0.36;
    letter-spacing: -1px;
}
.about_first-store-map {
    position: relative;
    z-index: 6;
    margin-bottom: -30px;
    border-radius: 0 0 25px 25px;
    display: flex;
    flex-direction: column;
    grid-row-gap: 50px;
    min-height: 200px;
    overflow: hidden;
}
.about_first-store-map img {
    object-fit: cover;
}

.about_owner-professions {
    background-color: #363636;

    position: relative;
    z-index: 5;
    margin-bottom: -30px;
    border-radius: 0 0 25px 25px;
    display: flex;
    flex-direction: column;
    grid-row-gap: 50px;
    min-height: 200px;
    overflow: hidden;
}

.about_story1 {
    position: relative;
    z-index: 4;
    margin-bottom: -30px;
    border-radius: 0 0 25px 25px;
    display: flex;
    flex-direction: column;
    grid-row-gap: 50px;
    min-height: 200px;
    overflow: hidden;
}

.about_owner-professions_container {
    display: flex;
    justify-content: center;
    grid-column-gap: 10px;
    padding: 100px 0 60px 0;

    color: white;
    font-size: 2.2rem;
    font-weight: 600;
}
.about_owner-professions_container .professions {
    display: flex;
    flex-direction: column;
    width: 200px;
    grid-row-gap: 8px;
}

.professions span {
    opacity: 0.06;
    color: white;
}
.professions span:nth-child(1) {
    opacity: 1;
}
.professions span:nth-child(2) {
    opacity: 0.72;
}
.professions span:nth-child(3) {
    opacity: 0.6;
}
.professions span:nth-child(4) {
    opacity: 0.48;
}
.professions span:nth-child(5) {
    opacity: 0.36;
}
.professions span:nth-child(6) {
    opacity: 0.25;
}
.professions span:nth-child(7) {
    opacity: 0.12;
}
.professions span:nth-child(8) {
    opacity: 0.06;
}
.professions span:nth-last-child(1) {
    opacity: 1;
    color: #FFC7D2;
}
.about_story1_color {
    position: absolute;
    top: 100px;
    left: 30px;
    width: 80%;

    color: white;
    font-size: 2.3rem;
    font-weight: 500;
}

.about_story2 {
    position: relative;
    z-index: 3;
    margin-bottom: -30px;
    border-radius: 0 0 25px 25px;
    display: flex;
    flex-direction: column;
    grid-row-gap: 50px;
    min-height: 200px;
    overflow: hidden;

    background-color: white;
    padding: 80px 0 40px 0;

}
.about_story2_text {
    font-weight: 500;
    font-size: 2.2rem;
    color: #AFAFAF;

    margin: 0 30px;
}
.about_story2_image {
    display: flex;
    width: 85%;
    margin: auto;
}

.about_story3 {
    position: relative;
    z-index: 2;
    margin-bottom: -30px;
    border-radius: 0 0 25px 25px;
    display: flex;
    flex-direction: column;
    grid-row-gap: 50px;
    min-height: 200px;
    overflow: hidden;

    background-color: #363636;
    padding: 80px 0 40px 0;
}
.about_story3_container {
    display: flex;
    flex-direction: column;
    grid-row-gap: 40px;

    margin: auto;
    text-align: center;
    font-weight: bold;
    color: white;
}
.about_story3_el {
    display: flex;
    flex-direction: column;
}
.about_story3_el_headline {
    font-size: 2.2rem;
}
.about_story3_el_value {
    font-size: 5rem;
}
.about_story3_el_title {
    opacity: 0.36;
}


.about_story4 {
    position: relative;
    z-index: 1;
    margin-bottom: -30px;
    border-radius: 0 0 25px 25px;
    display: flex;
    flex-direction: column;
    grid-row-gap: 50px;
    min-height: 200px;
    overflow: hidden;
}
.about_story4_text {
    position: absolute;
    bottom: 40px;
    left: 20px;

    display: flex;
    flex-direction: column;

    font-size: 2.2rem;
    font-weight: 500;
    color: white;
}

.about_story5 {
    position: relative;
    z-index: 0;
    margin-bottom: -30px;
    border-radius: 0 0 25px 25px;
    display: flex;
    flex-direction: column;
    grid-row-gap: 50px;
    min-height: 200px;
    overflow: hidden;

    background-color: white;
    padding: 80px 0 40px 0;
}
.about_story5_text {
    font-weight: 500;
    color: #AFAFAF;

    font-size: 2.2rem;
    width: 90%;
    margin: auto;
}
.about_story5_button {
    font-weight: 500;
    padding: 20px 30px;
    background-color: #FFC7D2;
    color: #64464C;
    width: 80%;
    margin: auto;
    text-align: center;
    border-radius: 22px;
    cursor: pointer;
}


.order_title {
    text-align: center;
    margin: 80px 0 20px 0;
    font-size: 2rem;
}
.basket_container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    grid-row-gap: 50px;
    margin: 20px 0;

    min-height: 85svh;
}
.basket_product_container {
    width: 95%;
    /*margin: 20px auto;*/
    margin: 0 auto;

    display: grid;
    grid-row-gap: 15px;
}

.basket_product_el {
    display: grid;
    grid-template-columns: 75px 1fr;
    grid-column-gap: 10px;
}
.basket_product_el_image {
    width: 75px;
    height: 85px;
    border-radius: 10px;
    overflow: hidden;
}
.basket_product_el_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.basket_product_el_info {
    display: grid;
    grid-template-rows: 1fr auto;
}
.basket_product_el_info_price-and-value {
    display: flex;
    justify-content: space-between;
}

.quantity-controls {
    background-color: white;
    border-radius: 10px;
    font-weight: 500;
    padding: 8px 10px;
}
.quantity-btn {
    background-color: initial;
    color: black;
}
.quantity-input {
    width: 30px;
    height: 13px;
    border: none;
    background-color: initial;
    color: black;
    text-align: center;
    font-weight: 500;
}
.quantity-input :active, :hover, :focus {
    outline: 0;
    outline-offset: 0;
}

.basket_product_el_info_price-and-value_price {
    display: flex;
    grid-column-gap: 8px;
}
.basket_product_el_info_price-and-value_price span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: 500;
}
.current-price {
    font-size: 1.8rem;
}
.old-price {
    font-size: 1.6rem;
    color: #AFAFAF;
    text-decoration: line-through;
}


.basket_product_el_info_name {
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    font-size: 1.7rem;
}
.basket_product_el_info_name .delete-btn {
    height: 20px;
    background-color: initial;
}
.basket_product_el_info_name .delete-btn img {
    height: 100%;
    object-fit: cover;
}

.basket_addon_el {
    display: grid;
    grid-template-columns: 75px 40px 1fr;
    grid-column-gap: 10px;
}
.basket_addon_el_image {
    grid-column: 2;
}
.basket_addon_el_info {
    grid-column: 3;

    display: grid;
    grid-template-rows: auto auto;
}
.basket_addon_el_info_price {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;

    font-weight: 500;
    font-size: 1.7rem;
}

.basket_summary {
    width: 90%;
    /*margin: 40px auto 100px auto;*/
    margin: 0 auto 80px auto;
    display: grid;
    grid-row-gap: 10px;
}
.basket_summary div {
    display: flex;
    justify-content: space-between;

    font-weight: 500;
    font-size: 1.5rem;
    color: #AFAFAF;
}
.basket_summary_total {
    font-size: 1.7rem !important;
    color: black !important;
}
.empty-basket-message {
    display: flex;
    flex-direction: column;
    grid-row-gap: 6px;
    text-align: center;
    font-weight: 500;
    color: #AFAFAF;
}

.checkout form {
    display: flex;
    flex-direction: column;
    grid-row-gap: 10px;

    width: 90%;
    margin: auto;

    font-weight: 500;
}
.checkout_el input, .checkout_el textarea {
    border: none;
    border-radius: 14px;

    font-weight: 500;
}
.checkout_el input::placeholder, .checkout_el textarea::placeholder {
    color: #C2C2C2;
}
.checkout_el_input input , .checkout_not-for-me_el input, .checkout_delivery_address_el input, .checkout_delivery_address_el textarea {
    width: 100%;
    padding: 14px 20px;
}

.checkout_recipient_is_another {
    width: fit-content;

    padding: 10px 20px;
    border-radius: 14px;
    background-color: white;
    margin-top: 10px;
    /*width: auto;*/
}
.checkout_recipient_is_another:has(#recipient_is_another:checked) {
    background-color: #363636;
    color: white;
}
.animate-collapse__inner {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    grid-row-gap: 10px;
}

.checkout_select-city {
    background-color: white;
    display: flex;

    flex-direction: column;
    padding: 10px 20px;
    border-radius: 14px;
}
.checkout_select-city_title {
    color: #C2C2C2;
    font-size: 1.2rem;
}
.checkout_select-city_select {
    border: none;
    font-weight: 500;

    padding: 0;
    background-color: initial;
    color: black
}

.checkout_el_address {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
}

.animate-collapse_container {
    display: flex;
    flex-direction: column;
    grid-row-gap: 0;
}
.animate-collapse_container span:nth-of-type(1) {
    font-size: 1.2rem;
    color: #C2C2C2;
}
.animate-collapse_container span:nth-of-type(2) {
    font-size: 1.6rem;
    color: #363636;
}

.checkout_datetime {
    display: flex;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
.checkout_datetime input, .checkout_datetime select {
    color: black;
    background-color: white;
    font-weight: 500;
    border-radius: 10px;
    padding: 10px 20px;
    border: none;
}

.checkout_el_switch {
        position: relative;
        display: flex;
        background: white;
        border-radius: 14px;
        padding: 6px;
        cursor: pointer;
        width: fit-content;
    }
.checkout_el_switch .checkout_delivery-type_el {
    text-align: center;
    position: relative;
    z-index: 2;
}
.checkout_el_switch .checkout_delivery-type_el label {
    display: block;
    padding: 12px 8px;
    font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;
    font-weight: 500;
    font-size: 1.6rem;
    cursor: pointer;
    transition: color 0.25s ease;
    border-radius: 14px;
}
.checkout_el_switch input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.checkout_el_switch .slider {
    position: absolute;
    top: 6px;
    left: 6px;
    bottom: 6px;
    width: calc(50% - 6px);
    background: #363636;
    border-radius: 12px;
    transition: all 0.45s cubic-bezier(0.23, 0.98, 0.32, 1.02);
    box-shadow: 0 6px 12px -6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
    z-index: 1;
}
.checkout_el_switch .checkout_delivery-type_el.active label {
    color: white;
    font-weight: 500;
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
@media (max-width: 500px) {
    .checkout_el_switch .checkout_delivery-type_el label {
        font-size: 1.6rem;
        padding: 10px 20px;
    }
}

.animate-collapse {
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.3s ease;
    max-height: 0;
    opacity: 0;
    margin: 0 !important;
    padding: 0 !important;
}
.animate-collapse.expanded {
    max-height: 800px;
    opacity: 1;
    margin: 0 !important;
}
.animate-collapse__inner {
    padding: 1rem 0;
    margin: 0;
}
.animate-collapse.expanded {
    overflow: visible;
}
.checkout_el.animate-collapse {
    margin: 0 !important;
    padding: 0 !important;
}
.delivery-error {
    color: #d32f2f;
    font-size: 14px;
    margin-top: 5px;
    display: none;
}
.checkout_total {
    background: #f9f9f9;
    border-radius: 14px;
    padding: 15px 20px;
    margin: 20px 0;
    font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
}
.checkout_total > div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}
#order-total-row {
    margin-top: 15px;
    font-weight: 600;
    font-size: 1.8rem;
}
/*.checkout_total #order-total {*/
/*    font-weight: 700;*/
/*    color: #2c6e2c;*/
/*}*/

.payment-success_container {
    display: flex;
    flex-direction: column;
    grid-row-gap: 20px;

    text-align: center;
    width: 80%;
    margin: 130px auto 0 auto;
}
.payment-success_container h1 {
    font-size: 2.2rem;
    font-weight: 600;
    margin: 0;
}