/* Mobile visual refresh for dariradosti.ru.
 * Everything in this file is deliberately isolated from desktop layouts.
 */
@media (max-width: 1199.98px) {
  :root {
    --dr-mobile-green: #08a653;
    --dr-mobile-green-dark: #078d48;
    --dr-mobile-red: #ed171c;
    --dr-mobile-ink: #081b36;
    --dr-mobile-nav-height: 78px;
  }

  body {
    padding-bottom: calc(var(--dr-mobile-nav-height) + env(safe-area-inset-bottom, 0px));
    background: #eefaff;
  }

  .header {
    background: #ffffff;
    background-image: none;
    box-shadow: 0 5px 20px rgba(2, 60, 43, 0.09);
  }

  .header-top {
    width: 100%;
    min-height: 64px;
    padding: 8px 12px;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #05ad58 0%, #03954b 100%);
  }

  .header-top__mobile,
  .header-top__mobile-burger {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-top__mobile-burger {
    top: 0;
    width: 42px;
    height: 42px;
    margin-right: 0;
    border-radius: 12px;
  }

  .header-top__mobile-burger svg {
    width: 28px;
    height: 22px;
  }

  .select-city-wrap {
    min-width: 0;
    margin-right: auto;
  }

  .select-city__block {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
  }

  span.select-city__block__text {
    display: inline-flex;
    align-items: center;
    margin: 0;
    color: #ffffff;
    line-height: 1;
  }

  span.select-city__block__text svg {
    width: 20px;
    height: 24px;
    fill: #ffffff;
  }

  span.select-city__block__text-city {
    display: block;
    min-width: 0;
    max-width: min(46vw, 230px);
    overflow: hidden;
    color: #ffffff;
    font-family: "Nunito", sans-serif;
    font-size: clamp(15px, 4.4vw, 20px);
    font-weight: 900;
    line-height: 1.1;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  span.select-city__block__text-city::after {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin: 0 0 4px 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }

  .header-top__cart {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    margin: 0;
    border-radius: 15px;
    box-shadow: 0 8px 18px rgba(0, 85, 55, 0.2);
  }

  .header-top__cart svg {
    width: 30px;
    height: 30px;
  }

  .header-top__cart span {
    top: -4px;
    right: -6px;
    min-width: 22px;
    width: auto;
    height: 22px;
    padding: 0 6px;
    border: 2px solid #ffffff;
    font-size: 12px;
    line-height: 18px;
  }

  .header-bottom {
    isolation: isolate;
    min-height: 94px;
    padding: 11px 14px 12px;
    overflow: hidden;
    background: linear-gradient(90deg, #fffdf6 0%, #fffaf0 52%, #fffdf7 100%);
  }

  .header-bottom::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 100'%3E%3Cg fill='none' stroke='%23ddb35d' stroke-width='1.15' opacity='.7'%3E%3Cpath d='M48 18v14m-7-7h14m-12-5 10 10m0-10L43 30M306 58v17m-8.5-8.5h17m-14.5-6 12 12m0-12-12 12M505 20v13m-6.5-6.5h13m-11-5 9 10m0-10-9 10'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M112 0v17M530 0v13' stroke='%23d8af58' stroke-width='1'/%3E%3Ccircle cx='112' cy='22' r='7' fill='%23e51b23'/%3E%3Ccircle cx='109.5' cy='19.5' r='2.2' fill='%23ff7777'/%3E%3Ccircle cx='530' cy='18' r='5.5' fill='%23d9141c'/%3E%3Ccircle cx='528' cy='16' r='1.7' fill='%23ff7b7b'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
  }

  .header-bottom__logo {
    flex: 1 1 auto;
    min-width: 0;
  }

  .header-bottom__logo svg {
    width: min(55vw, 235px);
    height: 70px;
  }

  .header-bottom__wrap,
  .header-bottom__cabinet,
  .header-bottom__cart {
    display: none;
  }

  .header-mobile__phone {
    display: block;
    flex: 0 0 auto;
    width: clamp(118px, 31vw, 155px);
    height: 52px;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(0, 113, 62, 0.22);
    border-bottom: 4px solid #e52a30;
    border-radius: 25px;
    background: linear-gradient(180deg, #18aa61 0%, #008349 100%);
    box-shadow: 0 8px 17px rgba(0, 113, 62, 0.22);
    text-align: center;
  }

  .header-mobile__link {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #ffffff !important;
    font-size: clamp(15px, 4vw, 20px);
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0, 74, 40, 0.28);
  }

  .header-mobile__link::before {
    content: "";
    width: 20px;
    height: 20px;
    margin-right: 9px;
    background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6.6 10.8c1.7 3.4 3.2 4.9 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.8.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.7 21 3 13.3 3 3.7c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1l-2.2 2.2Z'/%3E%3C/svg%3E");
  }

  main {
    padding-top: 158px;
  }

  .main {
    background: linear-gradient(145deg, #effbff 0%, #f7fdff 45%, #eaf8fb 100%);
  }

  .main-actions {
    margin-top: 0;
    padding: 18px 0 10px;
    background: transparent;
  }

  .main-actions > .wrap-content {
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
  }

  .main-actions__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 18px;
  }

  .main-actions__top > a:nth-of-type(-n + 3) {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: clamp(78px, 21vw, 96px);
    margin: 0;
    overflow: hidden;
    padding: 7px 20%;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 18px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 8px 18px rgba(26, 73, 88, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }

  .main-actions__top > a:nth-of-type(1) {
    background-image: url("../img/mobile-banner-parents-v2.jpg");
  }

  .main-actions__top > a:nth-of-type(2) {
    background-image: url("../img/mobile-banner-organizations-v2.jpg");
  }

  .main-actions__top > a:nth-of-type(3) {
    background-image: url("../img/mobile-banner-delivery-v2.jpg");
  }

  .main-actions__top > a:nth-of-type(-n + 3) > img {
    display: none !important;
  }

  .main-actions__top > a:nth-of-type(-n + 3) p {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin: 0;
    color: #ffffff;
    font-family: "Inglobal", Arial, sans-serif;
    font-size: clamp(20px, 5.8vw, 27px);
    font-weight: 800;
    line-height: 0.92;
    text-align: center;
    text-shadow: 0 2px 5px rgba(42, 18, 18, 0.28);
  }

  .main-actions__top > a:nth-of-type(-n + 3) p span {
    display: inline;
    width: auto;
    color: inherit;
    font: inherit;
    font-size: inherit !important;
    line-height: inherit;
  }

  .main-actions__top > a:nth-of-type(3) p {
    color: #07995b;
    font-size: clamp(19px, 5.5vw, 26px);
    line-height: 1;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
  }

  .main-actions__bottom {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 12px;
  }

  .main-actions__bottom a,
  .main-actions__bottom a:nth-child(n) {
    position: relative;
    isolation: isolate;
    grid-area: auto;
    display: block;
    aspect-ratio: 0.92;
    min-width: 0;
    overflow: hidden;
    padding: 17px 14px 8px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 19px;
    box-shadow: 0 9px 22px rgba(26, 73, 88, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.58);
    transform: translateZ(0);
  }

  .main-actions__bottom a::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: url("../img/mobile-card-winter-overlay.png") center bottom/100% 100% no-repeat;
    opacity: 0.72;
    pointer-events: none;
  }

  .main-actions__bottom a:nth-child(1) {
    background: linear-gradient(145deg, #aee9ff 0%, #77cff4 60%, #5dbce9 100%);
  }

  .main-actions__bottom a:nth-child(2) {
    background: linear-gradient(145deg, #ffd4d4 0%, #ffaaa8 58%, #ff8e8c 100%);
  }

  .main-actions__bottom a:nth-child(3) {
    background: linear-gradient(145deg, #bff7d4 0%, #77ebba 58%, #45dca2 100%);
  }

  .main-actions__bottom a:nth-child(4) {
    background: linear-gradient(145deg, #ffeaa7 0%, #ffd26c 58%, #ffc247 100%);
  }

  .main-actions__bottom a:nth-child(5) {
    background: linear-gradient(145deg, #f2c7f6 0%, #e79bec 58%, #d985df 100%);
  }

  .main-actions__bottom a:nth-child(6) {
    background: linear-gradient(145deg, #d9d0ff 0%, #b9a8ff 55%, #9781f2 100%);
  }

  .main-actions__bottom a p,
  .main-actions__bottom a:nth-child(n) p {
    position: relative;
    z-index: 5;
    width: 100%;
    margin: 0;
  }

  .main-actions__bottom .catalog-banner-copy--default {
    display: none;
  }

  .main-actions__bottom .catalog-banner-copy--mobile {
    display: block !important;
  }

  .main-actions__bottom a p span:nth-child(1) {
    display: block;
    width: 100%;
    margin: 0;
    color: var(--dr-mobile-ink);
    max-width: 96%;
    font-size: clamp(17px, 4.2vw, 22px);
    font-weight: 900;
    line-height: 1.12;
    text-align: left;
    text-transform: none;
    text-wrap: wrap;
  }

  .main-actions__bottom a p span:nth-child(2) {
    display: block;
    width: 100%;
    margin-top: 6px;
    color: #d81218;
    font-size: clamp(17px, 4.25vw, 22px);
    font-weight: 900;
    line-height: 1.08;
    text-align: left;
  }

  .main-actions__bottom a:nth-child(4) p span:nth-child(2) {
    color: #8d4c17;
    font-weight: 700;
  }

  .main-actions__bottom a img,
  .main-actions__bottom a:nth-child(n) img {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 2%;
    width: 82%;
    height: 58%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center bottom;
    transform: translateX(-50%);
  }

  .main-actions__bottom a:nth-child(4) img {
    width: 78%;
    height: 57%;
  }

  .main-actions__bottom a:nth-child(5)::before,
  .main-actions__bottom a:nth-child(6)::before {
    content: "";
    position: absolute;
    z-index: 3;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    pointer-events: none;
  }

  .main-actions__bottom a:nth-child(5)::before {
    inset: 36% 5% 1% 9%;
    background-image: url("../img/mobile-card-metal-tin-v2.png");
  }

  .main-actions__bottom a:nth-child(6)::before {
    inset: 32% 1% 0 2%;
    background-image: url("../img/mobile-card-textile-wood-v2.png");
  }

  .main-actions__bottom a:nth-child(5) img,
  .main-actions__bottom a:nth-child(6) img {
    display: none;
  }

  .main-helper {
    position: relative;
    min-height: 0;
    margin: 0 12px 28px;
    padding: 22px 18px 19px;
    overflow: hidden;
    border: 0;
    border-radius: 28px;
    background:
      radial-gradient(circle at 8% 18%, rgba(230, 184, 78, 0.28) 0 2px, transparent 2.5px),
      radial-gradient(circle at 62% 8%, rgba(230, 184, 78, 0.25) 0 2px, transparent 2.5px),
      linear-gradient(145deg, #fffefb 0%, #fff8e9 100%);
    box-shadow:
      inset 0 0 18px rgba(255, 241, 196, 0.32),
      0 10px 30px rgba(0, 118, 75, 0.18),
      0 0 24px rgba(76, 211, 163, 0.28);
  }

  .main-helper::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 42px;
    right: -18px;
    width: min(56vw, 350px);
    aspect-ratio: 1 / 1;
    background: url("../img/mobile-helper-gift-v1.png") center / contain no-repeat;
    pointer-events: none;
  }

  .main-helper::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 380'%3E%3Cg fill='%23e7b44c'%3E%3Cpath d='M0-13 3-3 13 0 3 3 0 13-3 3-13 0-3-3Z' transform='translate(38 72)'/%3E%3Cpath d='M0-10 2.5-2.5 10 0 2.5 2.5 0 10-2.5 2.5-10 0-2.5-2.5Z' transform='translate(365 34)'/%3E%3Cpath d='M0-8 2-2 8 0 2 2 0 8-2 2-8 0-2-2Z' transform='translate(335 190)'/%3E%3Cpath d='M0-11 2.5-2.5 11 0 2.5 2.5 0 11-2.5 2.5-11 0-2.5-2.5Z' transform='translate(31 314)'/%3E%3Cpath d='M0-10 2.5-2.5 10 0 2.5 2.5 0 10-2.5 2.5-10 0-2.5-2.5Z' transform='translate(433 346)'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
    pointer-events: none;
  }

  .main-helper > .wrap-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .main-helper .main-helper__desktop-copy {
    display: none;
  }

  .main-helper .main-helper__mobile-copy[hidden] {
    display: inline !important;
  }

  .main-helper h2 {
    position: relative;
    width: 56%;
    margin: 0 0 8px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 9.2vw, 58px);
    font-weight: 700;
    line-height: 0.82;
    letter-spacing: -1.8px;
    text-align: left;
    text-transform: none;
  }

  .main-helper__title-red {
    position: relative;
    color: #c71922;
    text-shadow: 0 2px 0 rgba(116, 0, 6, 0.06);
  }

  .main-helper__title-red::before {
    content: "";
    position: absolute;
    z-index: 5;
    top: -0.73em;
    left: -0.22em;
    width: 1.38em;
    height: 1.08em;
    transform: rotate(-8deg);
    transform-origin: 70% 80%;
    background: url("../img/mobile-helper-santa-hat-v1.png") center / contain no-repeat;
    pointer-events: none;
  }

  .main-helper h2::after {
    content: "♥";
    position: absolute;
    top: -0.26em;
    right: 6%;
    color: #db2933;
    font-family: Arial, sans-serif;
    font-size: 0.42em;
    line-height: 1;
  }

  .main-helper__title-green {
    position: relative;
    color: #087749;
  }

  .main-helper__title-green::before {
    content: "";
    position: absolute;
    top: 0.34em;
    left: -0.42em;
    width: 0.5em;
    height: 0.52em;
    border-top: 0.07em solid #d7a441;
    border-left: 0.07em solid #d7a441;
    border-radius: 70% 0 0 0;
    transform: rotate(-24deg);
  }

  .main-helper__gift-tag[hidden] {
    position: absolute;
    z-index: 5;
    top: 33%;
    right: 5.2%;
    display: block !important;
    width: clamp(42px, 9vw, 62px);
    transform: rotate(9deg);
    color: #ae7a26;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(7px, 1.75vw, 11px);
    font-style: italic;
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    pointer-events: none;
  }

  .main-helper__subtitle {
    display: block;
    width: 56%;
    margin: 0;
    color: #263848;
    font-size: clamp(17px, 4.5vw, 28px);
    font-weight: 500;
    line-height: 1.15;
    text-align: left;
    text-transform: none;
  }

  .main-helper__inputs {
    width: 56%;
    margin-top: 18px;
  }

  .main-helper__inputs-wrap {
    display: block;
    width: 100%;
  }

  .main-helper.is-quick-ready .main-helper__inputs-inner {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .main-helper__quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 7px;
    width: 100%;
    margin-bottom: 11px;
  }

  .main-helper__quick-option,
  .main-helper__inputs-wrap .main-helper__quick-option {
    width: 100%;
    min-width: 0;
    height: clamp(43px, 9vw, 55px);
    padding: 4px 3px;
    border: 1.5px solid #e2bb65;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 3px 8px rgba(89, 64, 18, 0.08);
    color: #087f4d;
    font-size: clamp(12px, 2.8vw, 18px);
    font-weight: 800;
    line-height: 1.05;
    text-transform: none;
  }

  .main-helper__quick-option.is-active,
  .main-helper__quick-option:focus-visible {
    border-color: #079b57;
    outline: 0;
    background: linear-gradient(135deg, #08ad61 0%, #078f4d 100%);
    box-shadow: 0 5px 12px rgba(0, 128, 73, 0.24);
    color: #ffffff;
  }

  .main-helper__inputs-wrap > button[type="submit"] {
    position: relative;
    width: 100%;
    height: clamp(52px, 10.5vw, 70px);
    margin: 0;
    padding: 0 12px 0 48px;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(180deg, #f42a2f 0%, #df1016 100%);
    box-shadow: 0 8px 16px rgba(221, 16, 22, 0.24);
    color: #ffffff;
    font-size: clamp(18px, 4.6vw, 29px);
    font-weight: 900;
    line-height: 1;
    text-transform: none;
  }

  .main-helper__inputs-wrap > button[type="submit"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: clamp(14px, 3vw, 25px);
    width: clamp(23px, 4.2vw, 34px);
    height: clamp(23px, 4.2vw, 34px);
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M2 7h20v5H2zM12 7v14M12 7H7.5a2.5 2.5 0 1 1 2.2-3.7L12 7Zm0 0h4.5a2.5 2.5 0 1 0-2.2-3.7L12 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .main-helper__inputs-wrap > button[type="submit"]:active {
    transform: translateY(1px);
    box-shadow: 0 4px 9px rgba(221, 16, 22, 0.22);
  }

  .header-bottom-menu {
    justify-content: space-around;
    height: calc(var(--dr-mobile-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
    padding: 8px 5px calc(8px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 55, 40, 0.12);
    z-index: 180;
  }

  .header-bottom-menu__item {
    flex: 1 1 20%;
    width: auto;
    max-width: 92px;
    min-width: 0;
    justify-content: center;
  }

  .header-bottom-menu__item svg {
    width: 30px;
    height: 30px;
    margin-bottom: 5px;
    fill: var(--dr-mobile-green);
  }

  .header-bottom-menu__item span {
    overflow: hidden;
    color: #777777;
    font-size: clamp(9px, 2.8vw, 13px);
    font-weight: 600;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-bottom-menu__item[href="/"] span {
    color: var(--dr-mobile-green);
    font-weight: 900;
  }

  .header-bottom-menu__item span:nth-child(3) {
    top: -2px;
    right: 8px;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    border: 2px solid #ffffff;
    font-size: 10px;
    line-height: 17px;
  }

  .b24-widget-button-position-bottom-right {
    right: 12px !important;
    bottom: calc(var(--dr-mobile-nav-height) + 10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .footer__whatsapp {
    right: 14px;
    bottom: calc(var(--dr-mobile-nav-height) + 12px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 379.98px) {
  .header-top {
    padding-right: 8px;
    padding-left: 8px;
  }

  .header-bottom {
    min-height: 88px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .header-bottom__logo svg {
    width: 51vw;
    height: 64px;
  }

  .header-mobile__phone {
    width: 116px;
    height: 46px;
  }

  .header-mobile__link {
    font-size: 15px;
  }

  main {
    padding-top: 152px;
  }

  .main-actions__bottom {
    gap: 9px;
  }

  .main-actions__bottom a,
  .main-actions__bottom a:nth-child(n) {
    padding: 14px 11px 7px;
    border-radius: 16px;
  }

  .main-actions__bottom a p span:nth-child(1),
  .main-actions__bottom a p span:nth-child(2) {
    font-size: 16px;
  }
}