/* components.css — кнопки, карточки, модалка, корзина, чекаут */
@layer components {

  /* ------------------------------------------------------------ кнопки */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 46px; padding: 0 24px; border-radius: var(--r-pill);
    font-size: .93rem; font-weight: 600; letter-spacing: .01em;
    border: 1px solid transparent; position: relative; overflow: hidden;
    transition: transform var(--t-fast) var(--ease), background var(--t-base) var(--ease),
                color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  }
  .btn:active { transform: translateY(1px); }
  .btn--primary { background: var(--bark); color: var(--on-dark); }
  .btn--primary:hover { background: var(--stem); }
  .btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
  .btn--ghost:hover { border-color: var(--stem); background: rgba(76,107,79,.06); }
  .btn--petal { background: var(--petal-deep); color: #fff; }
  .btn--petal:hover { background: var(--berry); }
  .btn--sm { min-height: 42px; padding: 0 16px; font-size: .84rem; }
  .btn--block { width: 100%; }
  .btn[disabled] { opacity: .45; pointer-events: none; }
  .btn.is-done { background: var(--stem); color: #fff; }

  .lang {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
    border: 1px solid var(--line); border-radius: var(--r-pill);
    font-size: .82rem; letter-spacing: .04em; color: var(--ink-soft);
    transition: color var(--t-fast), border-color var(--t-fast);
  }
  .lang__short { display: none; letter-spacing: .1em; font-weight: 600; }
  .lang:hover { color: var(--ink); border-color: var(--stem); }

  .cartbtn {
    position: relative; display: inline-flex; align-items: center; gap: 9px;
    min-height: 44px; padding: 0 18px; border-radius: var(--r-pill);
    border: 1px solid var(--line); background: var(--paper-card);
    font-size: .88rem; transition: border-color var(--t-fast), background var(--t-fast);
  }
  .cartbtn:hover { border-color: var(--stem); }
  .cartbtn__count {
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill);
    background: var(--petal-deep); color: #fff; font-size: .72rem; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .cartbtn__count.is-bump { animation: bump 620ms var(--ease); }

  /* ------------------------------------------------------------ чипсы */
  .chip {
    min-height: 40px; padding: 0 16px; border-radius: var(--r-pill);
    border: 1px solid var(--line); background: var(--paper-card);
    font-size: .84rem; color: var(--ink-soft);
    transition: all var(--t-fast) var(--ease);
  }
  .chip:hover { border-color: var(--stem); color: var(--ink); }
  .chip[aria-pressed="true"] { background: var(--bark); border-color: var(--bark); color: var(--on-dark); }

  /* ------------------------------------------------------------ карточка */
  .card {
    position: relative; display: flex; flex-direction: column;
    background: var(--paper-card); border: 1px solid var(--line-soft);
    border-radius: var(--r-s); overflow: hidden; cursor: pointer;
    transition: scale var(--t-base) var(--ease), translate var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
  }
  /* карточка «надувается» на hover: scale и translate заданы отдельными
     свойствами, поэтому не конфликтуют с анимацией .reveal.is-in (transform).
     @media (hover: hover) — чтобы на тач-устройствах карточка не «залипала» */
  @media (hover: hover) {
    .card:hover, .pkg:hover, .flower:hover {
      translate: 0 -6px; scale: 1.018;
      box-shadow: var(--shadow-l); border-color: var(--line);
    }
    .card:hover .artphoto, .pkg:hover .artphoto, .flower:hover .artphoto { scale: 1.06; }
    .card:hover .card__title, .pkg:hover .pkg__name { color: var(--petal-deep); }
  }
  .card:focus-within, .pkg:focus-within {
    translate: 0 -6px; scale: 1.018; box-shadow: var(--shadow-l); border-color: var(--line);
  }
  .card:focus-within .artphoto, .pkg:focus-within .artphoto { scale: 1.06; }
  .card:focus-visible { outline: 2px solid var(--stem); outline-offset: 3px; }
  .card:active { scale: .995; translate: 0 -2px; }
  .card__title, .pkg__name { transition: color var(--t-fast) var(--ease); }

  /* фото позиции поверх процедурной графики */
  .artwrap { position: relative; }
  .artwrap .art { display: block; }
  .artphoto {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center 45%;
    transition: scale var(--t-slow) var(--ease);
  }
  .artwrap--none .artphoto { display: none; }
  .modal__media .artwrap { width: 100%; }
  .modal__media .artphoto { border-radius: var(--r-s); }

  .card__media {
    position: relative; background: linear-gradient(180deg, #FFFDFA, #F0E8DC);
    aspect-ratio: 4 / 3; overflow: hidden; flex: none;
  }
  .card__media .art { width: 100%; height: 100%; }
  .card__tag {
    position: absolute; left: 12px; top: 12px; z-index: 2;
    background: var(--bark); color: var(--on-dark);
    font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
    padding: 6px 10px; border-radius: var(--r-xs);
  }
  .card__tag--new { background: var(--stem); }
  .card__tag--fast { background: var(--berry); }
  .card__body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
  /* заголовок и подзаголовок всегда занимают одну и ту же высоту:
     2 строки + 1 строка, поэтому все карточки в ряду совпадают по высоте */
  .card__title {
    font-size: 1.55rem; font-family: var(--font-display); line-height: 1.22;
  }
  .card__sub {
    font-size: .92rem; color: var(--ink-soft); font-style: italic; font-family: var(--font-display);
    margin-top: 4px;
  }
  .card__price { display: flex; align-items: baseline; gap: 6px; margin-top: auto; }
  .card__price b { font-size: 1.3rem; font-weight: 600; }
  .card__price span { font-size: .8rem; color: var(--ink-faint); }

  /* плашка состава — визитная карточка проекта */
  .comp {
    border-top: 1px solid var(--line-soft); padding-top: 14px;
    font-size: .8rem; color: var(--ink-soft); line-height: 1.5;
  }
  .comp__row { display: flex; gap: 8px; align-items: baseline; }
  .comp__key { flex: none; width: 82px; color: var(--ink-faint); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
  .comp__val { flex: 1; }
  .comp__dot { color: var(--petal-deep); }

  /* ------------------------------------------------------------ каталог цветов */
  .flower {
    display: flex; flex-direction: column; text-align: left;
    background: var(--paper-card); border: 1px solid var(--line-soft);
    border-radius: var(--r-s); overflow: hidden; width: 100%; height: 100%;
    transition: scale var(--t-base) var(--ease), translate var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
  }
  .flower .artwrap { flex: none; }
  .flower__body { padding: 14px 16px 18px; display: flex; flex-direction: column; flex: 1; }
  .flower__name {
    font-family: var(--font-display); font-size: 1.22rem; line-height: 1.25;
  }
  .flower__latin { font-size: .74rem; font-style: italic; color: var(--ink-faint); }
  .flower__meaning {
    font-size: .82rem; line-height: 1.45; color: var(--ink-soft); margin-top: 8px;
  }

  /* ------------------------------------------------------------ поводы */
  .occ {
    display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
    padding: 18px 16px; min-height: 116px; justify-content: space-between;
    background: var(--paper-card); border: 1px solid var(--line-soft); border-radius: var(--r-s);
    color: var(--ink); transition: all var(--t-base) var(--ease);
  }
  .occ:hover { border-color: var(--stem); transform: translateY(-3px); }
  .occ[aria-pressed="true"] { background: var(--bark); color: var(--on-dark); border-color: var(--bark); }
  .occ__label { font-family: var(--font-display); font-size: 1.14rem; }

  /* ------------------------------------------------------------ добавки */
  .addon {
    display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center;
    padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: var(--r-s);
    background: var(--paper-card); transition: border-color var(--t-fast), background var(--t-fast);
    height: 100%;
  }
  .addon:hover { border-color: var(--line); }
  .addon.is-picked { border-color: var(--stem); background: rgba(76,107,79,.05); }
  .addon__icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--paper-deep); color: var(--stem);
    display: grid; place-items: center;
  }
  .addon__name { font-weight: 600; font-size: .95rem; line-height: 1.3; }
  .addon__lead {
    font-size: .8rem; color: var(--ink-soft); margin-top: 2px;
  }
  .addon__weight { font-size: .72rem; color: var(--ink-faint); letter-spacing: .06em; text-transform: uppercase; }
  .addon__price { font-weight: 600; font-size: .95rem; white-space: nowrap; }

  /* компактная сетка добавок в модалке: 2 колонки, без длинного списка */
  .addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .addons .addon {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px; align-items: center;
    padding: 9px 12px; text-align: left;
  }
  .addons .addon__icon { width: 34px; height: 34px; }
  .addons .addon__icon .ico { width: 20px; height: 20px; }
  .addons .addon__name {
    font-size: .84rem; font-weight: 500; line-height: 1.25;
  }
  .addons .addon__price { font-size: .84rem; color: var(--ink-soft); }
  .addons .addon.is-picked .addon__price { color: var(--stem); }
  @media (max-width: 900px) { .addons { grid-template-columns: minmax(0, 1fr); } }

  .qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
  .qty button { width: 42px; height: 42px; display: grid; place-items: center; font-size: 1.05rem; color: var(--ink-soft); }
  .qty button:hover { background: var(--paper-deep); color: var(--ink); }
  .qty span { min-width: 34px; text-align: center; font-size: .9rem; font-weight: 600; }

  .sizes { display: flex; gap: 6px; flex-wrap: wrap; }
  .size {
    min-width: 52px; min-height: 42px; border-radius: var(--r-xs);
    border: 1px solid var(--line); font-size: .84rem; font-weight: 600;
    color: var(--ink-soft); transition: all var(--t-fast);
  }
  .size small {
    display: block; font-size: .62rem; font-weight: 500; line-height: 1.2;
    letter-spacing: .01em; opacity: .75; margin-top: 2px;
  }
  .size:hover { border-color: var(--stem); }
  .size[aria-pressed="true"] { background: var(--bark); border-color: var(--bark); color: var(--on-dark); }

  /* ------------------------------------------------------------ пакеты */
  .pkg {
    border: 1px solid var(--line-soft); border-radius: var(--r-m); overflow: hidden; background: var(--paper-card);
    display: flex; flex-direction: column; cursor: pointer;
    transition: scale var(--t-base) var(--ease), translate var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
  }
  .pkg:hover, .pkg:focus-within { translate: 0 -6px; scale: 1.018; box-shadow: var(--shadow-l); border-color: var(--line); }
  .pkg:focus-visible { outline: 2px solid var(--stem); outline-offset: 3px; }
  .pkg:hover .pkg__name { color: var(--petal-deep); }
  .pkg__name { transition: color var(--t-fast) var(--ease); }
  .pkg__head { padding: 26px 24px 20px; background: var(--paper-deep); position: relative; }
  .pkg__media { position: relative; aspect-ratio: 4 / 3; background: var(--paper-deep); overflow: hidden; }
  .pkg__media .artwrap { position: absolute; inset: 0; }
  .pkg__media .artphoto { border-radius: 0; }
  .pkg__badge {
    position: absolute; right: 18px; top: 18px; font-size: .62rem; letter-spacing: .16em;
    text-transform: uppercase; background: var(--stem); color: #fff; padding: 5px 9px; border-radius: var(--r-xs);
  }
  .pkg__badge--new { background: var(--berry); }
  .pkg__badge--fast { background: var(--petal-deep); }
  .pkg__name {
    font-size: 1.9rem; font-family: var(--font-display); line-height: 1.2;
  }
  .pkg__line {
    font-size: .92rem; line-height: 1.4; color: var(--ink-soft); margin-top: 4px;
  }
  .pkg__list { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
  .pkg__body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
  .pkg__item { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--ink-soft); border: 1px solid var(--line-soft); border-radius: var(--r-pill); padding: 5px 11px; }
  .pkg__item .ico { width: 14px; height: 14px; color: var(--stem); }

  /* ------------------------------------------------------------ модалка */
  .modal { position: fixed; inset: 0; z-index: 120; display: none; }
  .modal.is-open { display: block; }
  .modal__backdrop { position: absolute; inset: 0; background: rgba(31,38,33,.42); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--t-base) var(--ease); }
  .modal.is-visible .modal__backdrop { opacity: 1; }
  .modal__panel {
    position: relative; margin: clamp(0px, 4vh, 40px) auto; width: min(1000px, 94vw);
    max-height: min(92vh, 900px); overflow: auto;
    background: var(--paper); border-radius: var(--r-l);
    box-shadow: var(--shadow-l);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    transform: translateY(18px) scale(.99); opacity: 0;
    transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
  }
  .modal.is-visible .modal__panel { transform: none; opacity: 1; }
  .modal__media { background: linear-gradient(180deg, #FFFDFA, #EFE6D8); display: grid; place-items: center; padding: 20px; }
  .modal__body { padding: clamp(22px, 3vw, 38px); display: flex; flex-direction: column; gap: 18px; }
  .modal__close {
    position: absolute; right: 14px; top: 14px; z-index: 3;
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    background: var(--paper-card); color: var(--ink); box-shadow: var(--shadow-s);
  }
  .modal__close:hover { background: var(--bark); color: var(--on-dark); }
  .modal__title { font-size: clamp(2rem, 4vw, 2.9rem); }
  .modal__foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }

  .fieldset { display: flex; flex-direction: column; gap: 10px; }
  .fieldset__legend { font-size: .74rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--ink-soft); }

  /* ------------------------------------------------------------ отзывы */
  .rev { border-top: 1px solid var(--line-soft); padding-top: 18px; display: flex; flex-direction: column; gap: 14px; }
  .rev__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .rev__score { display: flex; align-items: baseline; gap: 6px; }
  .rev__score b { font-size: 1.9rem; font-family: var(--font-display); font-weight: 600; line-height: 1; }
  .rev__score span { font-size: .8rem; color: var(--ink-faint); }
  .rev__stars { display: inline-flex; gap: 3px; color: var(--petal-deep); line-height: 0; }
  .rev__stars .ico { width: 16px; height: 16px; }
  .rev__count { font-size: .82rem; color: var(--ink-soft); }
  .rev__badge {
    display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--stem);
  }
  .rev__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--stem); }
  .rev__list { display: grid; gap: 12px; }
  .rev__item { background: var(--paper-deep); border: 1px solid var(--line-soft); border-radius: var(--r-s); padding: 14px 16px; }
  .rev__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
  .rev__who { font-weight: 600; font-size: .9rem; }
  .rev__date { font-size: .76rem; color: var(--ink-faint); }
  .rev__size {
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
    border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 9px; color: var(--ink-soft);
  }
  .rev__text { font-size: .92rem; line-height: 1.6; color: var(--ink-soft); }
  .rev__text + .rev__text { margin-top: 6px; }
  .rev__more {
    align-self: flex-start; background: none; border: none; padding: 0;
    font-size: .82rem; color: var(--stem); text-decoration: underline; text-underline-offset: 3px;
  }
  /* спрятанные отзывы: показываем по требованию */
  .rev__item--more { display: none; }
  .rev--all .rev__item--more { display: block; }
  /* компактная плашка рейтинга на карточке */
  .revchip { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--ink-faint); }
  .revchip:hover { color: var(--ink); }
  .revchip .rev__stars { gap: 1px; }
  .revchip .ico { width: 12px; height: 12px; }

  /* ------------------------------------------------------------ корзина */
  .drawer { position: fixed; inset: 0; z-index: 130; display: none; }
  .drawer.is-open { display: block; }
  .drawer__backdrop { position: absolute; inset: 0; background: rgba(31,38,33,.42); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--t-base) var(--ease); }
  .drawer.is-visible .drawer__backdrop { opacity: 1; }
  .drawer__panel {
    position: absolute; right: 0; top: 0; bottom: 0; width: min(430px, 100vw);
    background: var(--paper); box-shadow: var(--shadow-l);
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform var(--t-base) var(--ease);
  }
  .drawer.is-visible .drawer__panel { transform: none; }
  .drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line-soft); }
  .drawer__title { font-family: var(--font-display); font-size: 1.6rem; }
  .drawer__body { flex: 1; overflow: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
  .drawer__foot { padding: 18px 22px 24px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 12px; background: var(--paper-card); }

  .line { display: grid; grid-template-columns: 66px 1fr auto; gap: 12px; align-items: center; }
  .line__art { position: relative; width: 66px; height: 76px; border-radius: var(--r-xs); overflow: hidden; background: var(--paper-deep); display: grid; place-items: center; }
  .line__art .artwrap { position: absolute; inset: 0; }
  .line__art .artwrap .art { width: 100%; height: 100%; }
  .line__art .ico { width: 26px; height: 26px; color: var(--stem); }
  .line__title { font-size: .92rem; font-weight: 600; line-height: 1.3; }
  .line__meta { font-size: .76rem; color: var(--ink-faint); }
  .line__price { font-size: .92rem; font-weight: 600; white-space: nowrap; }
  .line__controls { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
  .linkbtn { font-size: .76rem; color: var(--ink-faint); text-decoration: underline; text-underline-offset: 3px; }
  .linkbtn:hover { color: var(--berry); }

  .promo { display: flex; gap: 8px; }
  .promo input {
    flex: 1; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill);
    border: 1px solid var(--line); background: var(--paper); outline: none; text-transform: uppercase;
  }
  .promo input:focus { border-color: var(--stem); }
  .note { font-size: .8rem; }
  .note--ok { color: var(--stem); }
  .note--bad { color: var(--berry); }

  .totals { display: flex; flex-direction: column; gap: 8px; font-size: .9rem; }
  .totals__row { display: flex; justify-content: space-between; gap: 12px; }
  .totals__row--total { font-size: 1.22rem; font-weight: 600; padding-top: 10px; border-top: 1px solid var(--line-soft); }
  .totals__free { color: var(--stem); }

  .empty { text-align: center; padding: 44px 16px; color: var(--ink-soft); display: flex; flex-direction: column; gap: 14px; align-items: center; }
  .empty h3 { font-size: 1.5rem; color: var(--ink); }
  .empty p { font-size: .92rem; max-width: 34ch; }

  /* ------------------------------------------------------------ формы */
  .field { display: flex; flex-direction: column; gap: 6px; }
  .field > label { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
  .field input, .field select, .field textarea {
    min-height: 46px; padding: 10px 14px; border-radius: var(--r-xs);
    border: 1px solid var(--line); background: var(--paper-card); outline: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
  }
  .field textarea { min-height: 84px; resize: vertical; }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--stem); box-shadow: 0 0 0 3px rgba(76,107,79,.12); }
  .field[aria-invalid="true"] input, .field[aria-invalid="true"] select { border-color: var(--berry); }
  .field__err { font-size: .78rem; color: var(--berry); min-height: 1em; }
  .check { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--ink-soft); cursor: pointer; }
  .check input { width: 20px; height: 20px; min-height: 20px; accent-color: var(--stem); }

  /* ------------------------------------------------------------ чекаут */
  .checkout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 44px); }
  .checkout__form { display: flex; flex-direction: column; gap: 16px; }
  .checkout__form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .summary { background: var(--paper-card); border: 1px solid var(--line-soft); border-radius: var(--r-s); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
  .summary__list { display: flex; flex-direction: column; gap: 10px; font-size: .88rem; max-height: 240px; overflow: auto; }
  .summary__list li { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-soft); }

  /* ------------------------------------------------------------ мобильная панель */
  .mobilebar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: none; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 5vw calc(12px + env(safe-area-inset-bottom));
    background: var(--bark); color: var(--on-dark);
  }
  .mobilebar .btn { min-height: 44px; }

  /* ------------------------------------------------------------ тост */
  .toast {
    position: fixed; left: 50%; bottom: 26px; z-index: 200;
    transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
    background: var(--bark); color: var(--on-dark);
    padding: 12px 20px; border-radius: var(--r-pill); font-size: .88rem;
    box-shadow: var(--shadow-l); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
    display: flex; align-items: center; gap: 8px; max-width: min(92vw, 420px);
  }
  .toast.is-on { opacity: 1; transform: translate(-50%, 0); }

  /* кольцо от кнопки «в корзину» */
  .ripple {
    position: absolute; width: 12px; height: 12px; border-radius: 50%;
    border: 1.5px solid currentColor; opacity: .6; pointer-events: none;
    animation: rippleOut 620ms var(--ease) forwards;
  }

  @media (max-width: 900px) {
    .modal__panel { grid-template-columns: 1fr; }
    .modal__media { max-height: 300px; overflow: hidden; }
    .checkout { grid-template-columns: 1fr; }
  }
  @media (max-width: 760px) {
    .mobilebar { display: flex; }
    .drawer__panel { width: 100vw; }
    body { padding-bottom: 68px; }
  }
  @media (max-width: 620px) {
    .header__tools { gap: 6px; }
    .lang { padding: 0 12px; }
    .lang__full { display: none; }
    .lang__short { display: inline; }
    .cartbtn__label { display: none; }
    .cartbtn { padding: 0 12px; }
  }
}