/* ==========================
   PHONE.CSS
   Адаптивные стили для телефонов до 420px
   Подключать после style.css и tablet.css
   ========================== */

@media (max-width: 420px) {
/* Общие отступы */
  .content,
  .header-top,
  .header-nav,
  .footer-inner,
  .footer-bottom {
    width: calc(100% - 24px);
  }

  .content {
    margin: 16px auto 36px;
  }

  .logo-text {
    font-size: 26px;
  }

  .header-actions {
    gap: 8px;
  }

  .icon-btn {
    width: 34px;
    height: 34px;
  }

  .icon-btn svg,
  .icon-btn .icon-img {
    width: 16px;
    height: 16px;
  }

  .grid,
  .products,
  .footer-cols,
  .about-home__grid,
  .stats {
    grid-template-columns: 1fr;
  }

  .hero__text,
  .hero__card,
  .week,
  .moods,
  .mood__figure,
  .moods__card,
  .spaces-hero,
  .spaces-feature,
  .spaces-gallery,
  .spaces-map,
  .policy-hero,
  .policy-layout {
    box-shadow: none;
  }

  .section-head h2 {
    font-size: 30px;
  }

  .section-head--row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Главная: галерея настроений */
  .moods {
    padding: 14px;
    background: rgba(241, 231, 214, 0.72);
  }

  .moods__grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    justify-content: stretch !important;
  }

  .mood,
  .mood__figure {
    width: 100% !important;
  }

  .mood img {
    width: 100% !important;
    height: 250px !important;
  }

  .mood__cap {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 9px 10px;
  }

  /* Слайдер */
  .week,
  .about-home {
    padding: 14px;
  }

  .carousel {
    grid-template-columns: 40px 1fr 40px;
    gap: 10px;
  }

  .carousel__btn {
    width: 40px;
    height: 40px;
  }

  .carousel__viewport {
    padding: 8px;
  }

  .slide,
  .slide__cap {
    border-radius: 18px;
  }

  .slide__cap {
    padding: 12px;
  }

  .slide__cap h3 {
    font-size: 20px;
  }

  /* Страница пространств */
  .spaces-page-head,
  .policy-hero {
    padding-left: 12px;
    padding-right: 12px;
  }

  .spaces-hero,
  .spaces-gallery,
  .spaces-map,
  .policy-layout {
    padding: 14px;
    border-radius: 22px;
  }

  .spaces-hero::before,
  .spaces-gallery::before,
  .spaces-map::before,
  .policy-layout::before {
    inset: 7px;
    border-radius: 16px;
  }

  .spaces-hero__content {
    padding: 14px;
    border-radius: 18px;
  }

  .spaces-hero h2,
  .policy-hero h1 {
    font-size: 34px;
  }

  .spaces-hero p {
    font-size: 15px;
    line-height: 1.6;
  }

  .spaces-hero__actions,
  .policy-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .spaces-hero__actions .btn,
  .policy-actions .btn {
    width: 100%;
  }

  .spaces-hero__visual {
    aspect-ratio: 1 / 0.9;
    border-radius: 18px;
  }

  .spaces-features,
  .spaces-gallery__grid,
  .spaces-map__bottom {
    grid-template-columns: 1fr;
  }

  .spaces-photo,
  .spaces-photo img {
    min-height: 240px;
  }

  .spaces-map__frame,
  .spaces-map__frame iframe {
    min-height: 320px;
  }

  .spaces-map__btn {
    width: 100%;
  }

  /* Страница согласия */
  .policy-hero {
    padding: 18px;
    border-radius: 22px;
  }

  .policy-card,
  .policy-aside {
    padding: 14px;
    border-radius: 18px;
  }

  .policy-card h2 {
    font-size: 22px;
  }

  /* Детальная страница продукта */
  .content:has(.product-detail-page) {
    width: calc(100% - 24px);
  }

  .product-detail-page {
    grid-template-columns: 1fr;
    margin-top: 18px;
    padding: 12px;
    gap: 14px;
    border-radius: 24px;
    box-shadow: none;
  }

  .product-detail-page::before {
    inset: 7px;
    border-radius: 19px;
  }

  .product-detail-page__image,
  .product-detail-page__image img {
    min-height: auto;
    aspect-ratio: 1 / 1;
  }

  .product-detail-page__content {
    padding: 16px;
    border-radius: 20px;
    gap: 12px;
  }

  .product-detail-page__title {
    font-size: 30px;
  }

  .product-detail-page__meta,
  .product-detail-page__actions {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .product-detail-page__meta span,
  .product-detail-page__price {
    width: 100%;
  }

  .product-detail-page__price {
    text-align: center;
    font-size: 26px;
  }
}

@media (max-width: 420px) {
.content{ width: calc(100% - 24px); margin: 16px auto 36px; }
  .header-top{ width: calc(100% - 24px); }
  .logo-text{ font-size: 26px; }
  .grid{ grid-template-columns: 1fr; }
  .products{ grid-template-columns: 1fr; }
  .footer-cols{ grid-template-columns: 1fr; }

  /* Иконки в шапке делаем ещё меньше на телефоне */
  .header-actions{ gap:8px; }
  .icon-btn{ width:34px; height:34px; }
  .icon-btn svg,
  .icon-btn .icon-img{ width:16px; height:16px; }
}

@media (max-width: 520px) {
.week, .about-home{ padding: 14px; }
  .carousel{ grid-template-columns: 40px 1fr 40px; gap:10px; }
  .carousel__btn{ width:40px; height:40px; }
  .carousel__viewport{ padding: 8px; }
  .slide{ border-radius: 18px; }
  .slide__cap{ padding: 12px; }
  .slide__cap h3{ font-size: 20px; }
}

@media (max-width: 420px) {
.moods{ padding: 14px; }
  .moods__grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .mood img{
    width: 100%;
    height: 260px; /* на телефоне лучше выше, чтобы не было “плитки” слишком мелкой */
  }
  .mood__figure::after{
    width:52px;
    height:52px;
  }
  .mood__cap{
    left:10px; right:10px; bottom:10px;
    padding: 9px 10px;
  }
}

@media (max-width: 420px) {
body{
    background: var(--bg);
  }
  .moods{
    background: rgba(241,231,214,.72);
  }
  .mood__figure::before{
    opacity: .75;
  }
}

@media (max-width: 420px) {
.hero__text,
  .hero__card,
  .week,
  .moods,
  .mood__figure,
  .moods__card{
    box-shadow: none;
  }
}

@media (max-width: 420px) {
.content:has(.product-detail-page) {
    width: calc(100% - 24px);
  }

  .product-detail-page {
    margin-top: 18px;
    padding: 12px;
    gap: 14px;

    border-radius: 24px;
    box-shadow: none;
  }

  .product-detail-page::before {
    inset: 7px;
    border-radius: 19px;
  }

  .product-detail-page__image {
    border-radius: 20px;
  }

  .product-detail-page__image::after {
    left: 12px;
    bottom: 12px;
    font-size: 10px;
    padding: 7px 10px;
  }

  .product-detail-page__content {
    padding: 16px;
    border-radius: 20px;
    gap: 12px;
  }

  .product-detail-page__title {
    font-size: 30px;
  }

  .product-detail-page__meta {
    flex-direction: column;
  }

  .product-detail-page__meta span {
    width: 100%;
  }

  .product-detail-page__price {
    width: 100%;
    text-align: center;
    font-size: 26px;
  }

  .product-detail-page__block h2 {
    font-size: 21px;
  }

  .product-detail-page__block p {
    font-size: 15px;
  }

  .product-detail-page__actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
.footer-cols {
    grid-template-columns: 1fr;
  }

  .moods__grid {
    max-width: 100%;
    grid-template-columns: 100% !important;
  }

  .mood img {
    height: 250px !important;
  }

  .spaces-studio-page {
    width: calc(100% - 24px);
    margin: 16px auto 36px;
  }

  .spaces-studio,
  .spaces-location,
  .policy-hero,
  .policy-layout {
    padding: 14px;
    border-radius: 22px;
    box-shadow: none;
  }

  .spaces-studio::before,
  .spaces-location::before,
  .policy-layout::before {
    inset: 7px;
    border-radius: 16px;
  }

  .spaces-studio__head h1,
  .spaces-studio__head h2,
  .spaces-location__head h2,
  .policy-hero h1 {
    font-size: 30px;
  }

  .spaces-studio__intro {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 18px;
  }

  .spaces-studio__lead,
  .spaces-studio__text p,
  .spaces-location__head p {
    font-size: 14px;
  }

  .spaces-studio__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .spaces-studio__actions .btn {
    width: 100%;
  }

  .spaces-studio__gallery {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .spaces-studio-card,
  .spaces-studio-card a,
  .spaces-studio-card img {
    min-height: 240px;
    border-radius: 20px;
  }

  .spaces-studio-card__label {
    left: 12px;
    right: 12px;
    bottom: 44px;
    font-size: 18px;
  }

  .spaces-studio-card__tag {
    left: 12px;
    right: 12px;
    bottom: 15px;
  }

  .spaces-studio__note {
    padding: 12px;
    border-radius: 16px;
  }

  .spaces-location__map {
    height: 300px;
    border-radius: 20px;
  }

  .spaces-location__bottom {
    grid-template-columns: 1fr;
  }

  .spaces-location__btn {
    width: 100%;
  }

  .policy-card {
    padding: 16px;
  }

  .policy-card h2 {
    font-size: 24px;
  }
}

@media (max-width: 420px) {
.profile__hero,
  .profile-booking,
  .profile-bookings__empty {
    padding: 14px;
    border-radius: 18px;
    box-shadow: none;
  }

  .profile__title {
    font-size: 30px;
  }

  .profile__actions,
  .profile-bookings__head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .profile__actions .btn,
  .profile-bookings__head .btn {
    width: 100%;
  }

  .profile-bookings__head h2 {
    font-size: 28px;
  }

  .profile-booking__top {
    display: grid;
    grid-template-columns: 1fr;
  }

  .profile-booking__status {
    width: fit-content;
  }

  .profile-booking__details {
    grid-template-columns: 1fr;
  }

  .profile-booking__details div {
    padding: 10px;
  }
}

/* Новый функционал — телефон 420px */
@media (max-width:420px){
  .journal-promo{padding:18px;border-radius:20px;gap:18px}
  .journal-promo h2{font-size:28px}
  .journal-promo__code{width:100%;padding:16px}
  .journal-promo__code strong{font-size:24px;word-break:break-word}
  .cart-item{display:grid;grid-template-columns:1fr;align-items:start}
  .qty{width:100%;justify-content:space-between}
  .checkout-card{padding:16px;border-radius:20px;box-shadow:none}
  .promo-input-row,.payment-grid{grid-template-columns:1fr}
  .promo-input-row .btn{width:100%}
  .payment-method{padding:10px}
  .admin-product-form{grid-template-columns:1fr}
  .admin-product-form .btn,.stock-action,.stock-action .btn,.field--compact,.admin-order-status,.admin-order-status .field,.admin-order-status .btn{width:100%}
  .admin-stock-row__actions{display:grid;grid-template-columns:1fr}
  .stock-action{display:grid;grid-template-columns:1fr}
  .profile-order__head,.admin-order-card__head,.profile-order__items>div,.profile-order__discount,.profile-order__total{display:grid;grid-template-columns:1fr}
  .profile-order__head .profile-booking__status{width:fit-content}
  .kv__row{overflow-wrap:anywhere}
}

/* Церемонии и мягкие зелёные акценты — телефон 420px */
@media (max-width:420px){
  .ceremony-slot{padding-left:14px}
  .ceremony-slot__meta{display:grid;grid-template-columns:1fr;align-items:start}
  .ceremony-format{width:fit-content}
  .journal-grid .tile::before{left:14px}
}


/* Уточнение мобильной версии после чистки декоративных рамок */
@media (max-width: 767px){
  .carousel__viewport{ padding:0; }
  .journal-grid .tile::before, .journal-promo::after, .spaces-studio::before, .spaces-location::before{ content:none; }
  .spaces-studio__head h1, .spaces-studio__head h2{ font-size:34px; }
  .spaces-location__head h2{ font-size:24px; }
}


/* Квадратные изображения товаров на телефонах */
@media (max-width: 420px) {
  .product__img {
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .product__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* Каталог на телефонах: две карточки в ряд и единая ширина с фильтром */
@media (max-width: 420px) {
  .filters,
  .products{
    width:100%;
    margin-left:auto;
    margin-right:auto;
  }
  .products{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content:stretch;
    gap:12px;
  }
  .product{
    width:100%;
    max-width:none;
  }
  .product__body{
    padding:12px;
    gap:7px;
  }
  .product__title{
    font-size:14px;
    line-height:1.25;
  }
  .product__meta{
    gap:6px;
    font-size:11px;
  }
  .product__price{
    font-size:14px;
  }
  .product__actions{
    gap:6px;
  }
  .product__actions .btn-sm{
    width:100%;
    justify-content:center;
  }
}