/* ============================================================
   HEADER — cart drawer (Figma 1:2328 desktop / 1:4010 mobile). Opened by
   data-action="open-cart" (js/theme.js "Header: cart drawer"). Off-canvas
   mechanics copied verbatim from .filters-panel (same 814px desktop
   width/992px breakpoint, same padding clamp, same translateX technique)
   — Figma's physical right:0 = inline-start under our real dir="rtl"
   page, same as .filters-panel/.site-nav.
   ============================================================ */
.cart-drawer{
  position:fixed;
  inset-block:0;
  inset-inline-start:0;
  z-index:120;
  width:100%;
  padding: clamp(16px, 2.07vw + 8.24px, 48px);
  background: var(--color-bg);
  display:flex;
  flex-direction:column;
  gap:16px;
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow-y:auto;
}
[dir="ltr"] .cart-drawer{ transform: translateX(-100%); }
.cart-drawer.is-open{ transform: translateX(0); }
.cart-drawer[hidden]{ display:none; }
.cart-overlay{
  position:fixed;
  inset:0;
  z-index:115;
  background: rgba(0,0,0,.8);
  opacity:0;
  transition: opacity .3s ease;
}
.cart-overlay.is-visible{ opacity:1; }
.cart-drawer__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  row-gap:12px;
  width:100%;
}
.cart-drawer__title-group{ display:flex; align-items:center; gap:8px; }
.cart-drawer__title{ font-size: var(--fs-filter-title); font-weight:600; color: var(--color-brown); }
.cart-drawer__count{ font-size: var(--fs-name); color: var(--color-brown); }
.cart-drawer__close{ width:24px; height:24px; flex-shrink:0; border:none; background:none; padding:0; cursor:pointer; }
.cart-drawer__close img{ width:100%; height:100%; display:block; }
@media (min-width:992px){
.cart-drawer__close{ width:32px; height:32px; }
}
.cart-drawer__divider{ width:100%; border:none; border-block-start:1px solid var(--color-border); }
.cart-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex:1 1 auto;
  width:100%;
}
.cart-empty[hidden]{ display:none; }
.cart-empty__body{ display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; }
.cart-empty-icon{ position:relative; width:135px; height:123px; }
@media (min-width:992px){
.cart-empty-icon{ width:222px; height:203px; }
}
.cart-empty-icon__outline{ position:absolute; inset-block-start:0; inset-inline-start:0; width:100%; height:auto; }
.cart-empty-icon__wheel{ position:absolute; inset-block-end:0; width:15%; height:auto; }
.cart-empty-icon__wheel--start{ inset-inline-start:26%; }
.cart-empty-icon__wheel--end{ inset-inline-end:26%; }
.cart-empty-icon__logo{
  position:absolute;
  inset-inline-start:33%;
  inset-block-start:22%;
  width:50%;
  height:24%;
  background: var(--color-brown);
  /* В вёрстке mask-image стоял ИНЛАЙНОМ в атрибуте style — это единственное
     место, требовавшее 'unsafe-inline' в CSP. Перенесено сюда (CLAUDE.md §9.3). */
  -webkit-mask-image:url('../images/cart-empty-logo.webp');
  mask-image:url('../images/cart-empty-logo.webp');
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
}
.cart-empty__text{ display:flex; flex-direction:column; gap:8px; width:100%; text-align:center; }
.cart-empty__heading{ width:100%; font-size: var(--fs-filter-title); font-weight:600; color:#333124; }
.cart-empty__desc{ width:100%; font-size: var(--fs-name); color: var(--color-brown); }
.cart-empty__cta{ width:100%; max-width:308px; }
.cart-recommend{ display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; }
.cart-recommend__heading{ width:100%; font-size: var(--fs-filter-title); font-weight:600; color: var(--color-brown); text-align:center; }
.cart-products{ width:100%; padding-block-end:8px; }
.cart-products .swiper-wrapper{ align-items:stretch; }
.cart-products .swiper-slide{ height:auto; }
.cart-products-pagination.swiper-pagination{ position:static; margin-block-start:12px; display:flex; justify-content:center; gap:6px; line-height:0; }
.cart-products-pagination .swiper-pagination-bullet{ background: var(--color-border-2); opacity:1; }
.cart-products-pagination .swiper-pagination-bullet-active{ background: var(--color-brown); }
.cart-product{
  display:flex;
  flex-direction:column;
  gap:8px;
  height:100%;
  padding:4px;
  background: var(--color-white);
  border:1px solid var(--color-border);
  border-radius:16px;
}
.cart-product__image{ width:100%; aspect-ratio: 460 / 430; border-radius:12px; object-fit:cover; }
.cart-product__meta{ display:flex; flex-direction:column; gap:4px; width:100%; padding-inline:4px; }
.cart-product__name{
  width:100%;
  font-size: var(--fs-tag-sm);
  font-weight:600;
  color: var(--color-brown);
  text-align:end;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cart-product__price{ width:100%; font-size: var(--fs-tag-sm); font-weight:600; color: var(--color-brown); text-align:end; }
.cart-product__buy{ width:100%; height:44px; padding-block:0; }
@media (min-width:992px){
.cart-product__buy{ height:44px; }
}
/* ---------- cart drawer — has-items state (Figma 1:2366 desktop /
   1:4059 mobile) ---------- */
.cart-items{ display:flex; flex-direction:column; gap:16px; width:100%; }
.cart-items[hidden]{ display:none; }
.cart-item-list{ display:flex; flex-direction:column; gap:8px; width:100%; }
@media (min-width:992px){
.cart-item-list{ gap:16px; }
}
.cart-item{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:16px;
  width:100%;
  padding:8px;
  background: var(--color-white);
  border:1px solid var(--color-border);
  border-radius:16px;
}
@media (min-width:992px){
.cart-item{ align-items:center; padding:16px; }
}
.cart-item__image{ width:136px; height:136px; flex-shrink:0; border-radius:14px; object-fit:cover; }
@media (min-width:992px){
.cart-item__image{ width:120px; height:120px; }
}
.cart-item__info{
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:8px;
  min-width:0;
  flex:1 1 auto;
}
@media (min-width:992px){
.cart-item__info{ gap:16px; }
}
.cart-item__name{
  width:100%;
  font-size: var(--fs-name);
  font-weight:600;
  color: var(--color-brown);
  text-align:end;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (min-width:992px){
.cart-item__name{ padding-inline-end:56px; }
}
.cart-item__name:hover{ text-decoration:underline; }
.cart-item__details{
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:8px;
  width:100%;
}
.cart-item__prices{ order:1; display:flex; flex-direction:column; gap:2px; }
.cart-item__row{ order:2; display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; }
.cart-item__unit-price,
.cart-item__total-price{ font-size: var(--fs-quote); color: var(--color-brown); white-space:nowrap; }
.cart-item__stepper{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  background: var(--color-border);
  border-radius:8px;
}
.cart-item__qty-btn{ width:24px; height:24px; flex-shrink:0; border:none; background:none; padding:0; cursor:pointer; }
.cart-item__qty-btn img{ width:100%; height:100%; display:block; }
.cart-item__qty{ width:35px; font-size: var(--fs-quote); color: var(--color-brown); text-align:center; }
.cart-item__remove{ width:24px; height:24px; flex-shrink:0; border:none; background:none; padding:0; cursor:pointer; }
.cart-item__remove img{ width:100%; height:100%; display:block; }
@media (min-width:992px){
.cart-item__details{ flex-direction:row; align-items:center; gap:14px; width:auto; }
.cart-item__prices{ order:2; gap:4px; }
.cart-item__row{ order:1; width:auto; }
.cart-item__stepper{ height:54px; padding:16px; }
.cart-item__remove{
    position:absolute;
    inset-block-start:15px;
    inset-inline-end:15px;
    width:32px; height:32px;
  }
}
.cart-totals{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  font-size: var(--fs-filter-title);
  font-weight:600;
  color: var(--color-brown);
}
.cart-items__submit{ width:100%; }
@media (min-width:992px){
.cart-drawer{ width:814px; gap:24px; }
}
/* ============================================================
   CART PAGE (/cart/) — no Figma frame of its own; assembled from the
   drawer's components per CLAUDE.md §7.1 п.2. Everything below is just the
   page container: the item list, totals and empty state reuse the rules
   above unchanged, which is why they were lifted out from under
   .cart-drawer in the first place.
   ============================================================ */
.cart-page{
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
  padding-inline: var(--gutter);
  margin-block-start:16px;
}
.cart-page__head{ display:flex; align-items:center; gap:8px; width:100%; }
.cart-page__title{ font-size: var(--fs-h2); font-weight:600; color: var(--color-brown); }
.cart-page__count{ font-size: var(--fs-name); color: var(--color-brown); }
@media (min-width:992px){
.cart-page{ gap:24px; }
}