@font-face {
    font-family: "wbCurrency";
    src: url(../fonts/wbCurrency.woff);
    font-weight: 600;
    font-style: normal;
}

:root{
  --bg: #F3F4F6;
  --white: #fff;
  --text: #111827;
  --muted: #6B7280;
  --border: #E5E7EB;

  --purple: #C94284;
  --red: #E64545;
  --blue: #4A9FDE;
  --yellow: #F8C545;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 10px 20px rgba(0,0,0,0.08);
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
    height: 100%;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
}

body.site{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site__main{
  flex: 1 1 auto;
    /*max-width: 1240px;*/
    /*margin: 0 auto;*/
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* layout container */
.container{
  /*max-width:100%;*/
  margin:0 auto;
  padding: 0 16px;
    max-width: 1140px;
}

/* brand colors (helpers) */
.c-purple{ color: var(--purple); }
.c-red{ color: var(--red); }
.c-blue{ color: var(--blue); }
.c-yellow{ color: var(--yellow); }

/* separators / helpers */
.hr{ height:1px; background: #F3F4F6; margin: 12px 0; }

/* icon button */
.icon-btn{
  width:40px; height:40px;
  border-radius:999px;
  border: none;
  background:#F3F4F6;
  color:#374151;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background .15s ease, transform .15s ease;
}
.icon-btn:hover{ background:#E5E7EB; }

/* -------------------------
   Header (partials/header.html)
   ------------------------- */
.header{
  height:64px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  top:0;
  z-index:20;
}
.header__inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
    padding: 30px 16px;
}

/* logo */
.logo{ display:flex; align-items:center; gap:10px; min-width:0; }
.logo__img{
  width:56px; height:56px;
  border-radius:999px;
  overflow:hidden;
  flex: 0 0 auto;
}
.logo__img img{ width:100%; height:100%; object-fit:cover; }
.logo__text{ min-width:0; }
.logo__brand{
  margin:0;
  font-family:"Comfortaa", cursive;
  font-size:22px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.logo__tagline{
  margin:6px 0 0;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#6B7280;
}

/* nav */
.nav{
  display:none;
  gap:28px;
  font-weight:600;
  color:#374151;
}
.nav a:hover{ color: var(--purple); }
.nav__blue:hover{ color: var(--blue) !important; }
.nav__yellow:hover{ color: var(--yellow) !important; }
.nav__red{ color: var(--red); }
@media (min-width: 768px){ .nav{ display:flex; } }

/* actions */
.actions{
  display:flex;
  align-items:center;
  gap: 5px;
  color:#4B5563;
}
.actions__burger{ display:inline-flex; }
@media (min-width:868px){ .actions__burger{ display:none; } }

.actions__hide-xs{ display:none; }
@media (min-width: 868px){ .actions__hide-xs{ display:inline-flex; } }

.actions__hide-sm{ display:none; }
@media (min-width: 640px){ .actions__hide-sm{ display:flex; } }

/* cart + login (shown on desktop in your current design) */
.cart{
  position:relative;
  font-size:18px;
  color:#4B5563;
  width:40px; height:40px;
  display:none;
  align-items:center;
  justify-content:center;
}
.cart:hover{ color: var(--purple); }
.cart__badge{
  position:absolute;
  top: 2px;
  right: 2px;
  width:16px;
  height:16px;
  border-radius:999px;
  background: var(--red);
  color: #fff;
  font-size:10px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}

.login{
  display:none;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  padding-left:14px;
  border-left:1px solid var(--border);
}
.login:hover{ color: var(--purple); }

.login__name{
  font-size:13px;
  font-weight:600;
}

@media (min-width: 868px) {
  .login, .cart { display:flex; }
}

/* drawer specific (mobile menu top items) */
.drawer-login{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:16px;
  font-weight:700;
  padding:12px;
}

/* -------------------------
   Footer (partials/footer.html)
   ------------------------- */
.footer{
  margin-top:auto;
  background:#111827;
  color:#fff;
  font-size: 12px;
  padding: 12px 0;
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  flex-wrap:wrap;
}
.footer__links{
  display:flex;
  gap: 16px;
  flex-wrap:wrap;
  opacity:.75;
}
.footer__links a:hover{ opacity:1; text-decoration: underline; }
.footer__social{
  display:flex;
  gap: 12px;
  font-size: 18px;
}
.footer__social a:hover{ color: var(--blue); }

/* -------------------------
   Mobile menu overlay + drawer (partials/mobile_menu.html)
   ------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 260ms cubic-bezier(.2,.9,.2,1), visibility 0ms linear 260ms;
}

.overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 260ms cubic-bezier(.2,.9,.2,1), visibility 0ms linear 0ms;
}

.overlay.is-closing {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.drawer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;              /* ensure full height */
  height: 100vh;          /* explicit full viewport height */
  width: min(86vw, 360px);
  background: #fff;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  transform: translateX(-110%);
  transition: transform 260ms cubic-bezier(.2,.9,.2,1);
  display: flex;
  flex-direction: column;
  will-change: transform;
  overflow-y: auto;                 /* enable vertical scrolling inside drawer */
  -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
}

.overlay.is-open .drawer,
.drawer.is-open {
  transform: translateX(0);
}

.drawer.is-closing {
  transform: translateX(-110%);
}

.drawer * { touch-action: manipulation; }

.drawer :focus { outline-offset: 2px; }

.drawer__header{
  height: 64px;
  padding: 0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
}

.drawer__body{
  padding: 16px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.drawer__section{
  font-size: 11px;
  color:#9CA3AF;
  text-transform:uppercase;
  letter-spacing:.18em;
  margin: 2px 0 6px;
}

.drawer__link{
  padding: 12px 12px;
  border-radius: 10px;
  font-weight: 700;
  color:#374151;
  display:flex;
  align-items:center;
  justify-content:space-between;
  transition: background .15s ease, color .15s ease;
}
.drawer__link i{ font-size: 11px; opacity:.55; }
.drawer__link:hover{ background:#FCE7F3; color: var(--purple); }
.drawer__link--blue:hover{ background:#EFF6FF; color: var(--blue); }
.drawer__link--yellow:hover{ background:#FFFBEB; color: #C28B00; }
.drawer__link--red{ color: var(--red); }
.drawer__link--red:hover{ background:#FEF2F2; }

.drawer__simple{
  padding: 8px 10px;
  border-radius: 10px;
  color:#374151;
}
.drawer__simple:hover{ background:#F9FAFB; }

.drawer__footer{
  margin-top:auto;
  padding: 14px 16px;
  border-top:1px solid var(--border);
  font-size: 12px;
  color:#6B7280;
}
.drawer__footer i{ margin-right: 6px; }

/* lock scroll when menu open */
body.menu-open{ overflow:hidden; }

.by-currency span {
    font-family: 'wbCurrency';
  font-weight: 900;
  font-size: 24px;
}

.by-currency-buble {
    font-family: 'wbCurrency';
  font-weight: 900;
  font-size: 18px;
}

.by-currency-old {
    font-family: 'wbCurrency';
  font-weight: 600;
  font-size: 12px;
}

.by-currency {
    font-family: 'wbCurrency';
  font-weight: 900;
  font-size: 16px;
}

/* =========================
   Product modal (centered)
   + open/close animations
   ========================= */

/* ВАЖНО: тут НЕТ display:none — иначе закрытие не анимируется */
.p-modal{
  position: fixed;
  inset: 0;
  z-index: 80;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 180ms ease, visibility 0ms linear 180ms;
}

.p-modal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition: opacity 180ms ease, visibility 0ms;
}

/* затемнение */
.p-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(17,24,39,0.55);
  opacity: 0;
  transition: opacity 180ms ease;
}

.p-modal.is-open .p-modal__backdrop{
  opacity: 1;
}

/* Центрируем модалку */
.p-modal__panel{
  position: relative;
  width: min(92vw, 980px);
  max-height: min(86vh, 720px);
  margin: 15vh auto 0;
  background:#fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);

  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: transform 200ms ease, opacity 200ms ease;
  will-change: transform, opacity;
}

.p-modal.is-open .p-modal__panel{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Кнопка закрытия внутри панели */
.p-modal__close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  cursor:pointer;
  z-index: 2;
}

/* Контент скроллится внутри модалки */
.p-modal__body{
  height: 100%;
  overflow: auto;
  padding: 56px 16px 16px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}

@media (min-width: 768px){
  .p-modal__body{
    padding: 56px 20px 20px;
    flex-direction: row;
    gap: 18px;
  }
}

.p-modal__img{
  background:#f3f4f6;
  border-radius: 16px;
  overflow:hidden;
  flex: 0 0 auto;
}

.p-modal__img img{
  width: 100%;
  height: 280px;
  object-fit: cover;
  display:block;
}

@media (min-width: 768px){
  .p-modal__img{ width: 48%; }
  .p-modal__img img{ height: 520px; }
}

.p-modal__info{
  flex:1;
  min-width: 0;
}

.p-modal__brand{
  margin:0 0 8px;
  font-size: 12px;
  color:#9ca3af;
  text-transform:uppercase;
  font-weight: 900;
  letter-spacing:.08em;
}

.p-modal__name{
  margin:0 0 12px;
  font-size: 20px;
  font-weight: 900;
  color:#111827;
}

.p-modal__sizes{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.p-modal__size{
  background:#f3f4f6;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800;
  font-size: 13px;
  color:#4b5563;
}

.p-modal__prices{
  display:flex;
  align-items:baseline;
  gap: 10px;
}

.p-modal__price-old{
  color:#9ca3af;
  text-decoration: line-through;
  font-weight: 800;
}

.p-modal__price{
  font-size: 24px;
  font-weight: 900;
  color:#111827;
}

.p-modal__actions{
  margin-top: 16px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

.p-modal__btn{
  border: 1px solid #e5e7eb;
  background:#fff;
  color:#111827;
  font-weight: 900;
  padding: 12px 14px;
  border-radius: 14px;
  cursor:pointer;
}

.p-modal__btn--primary{
  background: var(--yellow);
  border-color: var(--yellow);
  color:#000;
}

/* --- Close animation state (нужен JS: is-leaving + timeout) --- */
.p-modal.is-leaving{
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 0ms linear 180ms;
}

.p-modal.is-leaving .p-modal__backdrop{
  opacity: 0;
}

.p-modal.is-leaving .p-modal__panel{
  opacity: 0;
  transform: translateY(10px) scale(0.98);
}

/* уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .p-modal,
  .p-modal__backdrop,
  .p-modal__panel{
    transition: none !important;
  }
}


.p-card{
  background:#fff;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: box-shadow .2s ease, transform .2s ease;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height: 270px;
}
.p-card:hover{
  box-shadow: 0 14px 26px rgba(0,0,0,0.12);
    cursor: pointer;
}
.p-card__badges{
  position:absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 900;
}
.badge--green{ background:#dcfce7; color:#15803d; }
.badge--red{ background: var(--red); color:#fff; }

.p-card__fav{
  position:absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  width: 26px;
  height: 26px;
  border-radius:999px;
  border:none;
  background:#fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  color:#9ca3af;
  cursor:pointer;
  opacity:1;
  transition: opacity .2s ease, color .2s ease;
}
.p-card:hover .p-card__fav{ opacity:1; }
.p-card__fav:hover{ color: var(--red); }

.p-card__img{
  height: 160px;
  background:#f3f4f6;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.p-card__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform .5s ease;
}
.p-card:hover .p-card__img img{ transform: scale(1.05); }

.p-card__body{
  padding: 12px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.p-card__brand{
  margin:0 0 6px;
  font-size: 10px;
  color:#9ca3af;
  text-transform:uppercase;
  font-weight: 900;
  letter-spacing:.08em;
}
.p-card__name{
  margin:0 0 8px;
  font-size: 13px;
  font-weight: 800;
  color:#1f2937;
  line-height: 1.2;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.p-card__meta{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  margin-top:auto;
  margin-bottom: 10px;
}
.meta-pill{
  background:#f3f4f6;
  color:#4b5563;
  font-size: 12px;
  border-radius: 6px;
  padding: 3px 6px;
}

.p-card__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.p-card__price{ display:flex; flex-direction:column; }
.price-old{ font-size: 10px; color:#9ca3af; text-decoration: line-through; }
.price-new{ font-size: 16px; font-weight: 900; color:#111827; }
.price-new--red{ color: var(--red); }

.p-card__cart{
  width: 28px;
  height: 28px;
  border-radius:999px;
  border:none;
  background: var(--yellow);
  color:#fff;
  cursor:pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: background .15s ease;
}
.p-card__cart:hover{ background: var(--purple); }

/* cart button active state */
.p-card__cart.is-in-cart{
  background: var(--purple);
}
.p-card__cart.is-in-cart:hover{
  background: var(--purple);
  opacity: .92;
}


/* Центрирование иконок в круглых кнопках карточки товара */
.p-card__fav,
.p-card__cart {
  /* размеры круга — подбери под свой дизайн */
  width: 36px;
  height: 36px;

  /* делаем ровный круг и центрируем содержимое через flex */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;

  /* сбрасываем внутренние отступы, чтобы не было сдвигов */
  padding: 0;
  margin: 0;

  /* гарантия, что box-sizing не добавит неожиданных размеров */
  box-sizing: border-box;

  /* отключаем границы/фон по умолчанию, если они были заданы иначе */
  /*border: none;*/
  /*background: transparent;*/
}

/* Иконка внутри — делаем block и убираем line-height/смещения */
.p-card__fav i,
.p-card__cart i {
  display: block;          /* убирает inline-особенности */
  line-height: 1;          /* гарантирует вертикальную центровку */
  font-size: 18px;         /* подбери желаемый размер */
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  text-align: center;
  -webkit-font-smoothing: antialiased; /* улучшает рендер на iOS */
  -moz-osx-font-smoothing: grayscale;
}

/* Если у иконки есть псевдоэлементы, убедимся, что они не влияют */
.p-card__fav i::before,
.p-card__cart i::before {
  display: inline-block;
  transform: none;
  margin: 0;
  padding: 0;
}

/* Небольшая корректировка для старых WebKit (если всё ещё видно мелкое смещение) */
@supports (-webkit-overflow-scrolling: touch) {
  .p-card__fav i,
  .p-card__cart i {
    /* тонкая подстройка по вертикали/горизонтали при необходимости:
       попробуй сначала без transform; если смещение осталось — раскомментируй. */
    /* transform: translateY(-0.2px) translateX(0); */
  }
}

/* фиксированный header: всегда прижат к верху экрана */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* при необходимости увеличь */
  /* оставляем визуальные свойства */
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

/* переменная --header-height будет устанавливаться скриптом (fallback 64px) */
:root {
  --header-height: 64px;
}

/* main получает отступ сверху равный высоте header, чтобы контент не скрывался */
.site__main {
  padding-top: var(--header-height);
}


/* Footer layout & styles */
.site-footer {
  /*background: #fff;*/
  border-top: 1px solid #e6e6e6;
  color: #1f2937;
  font-weight: 700;
  font-size: 13px;
  margin-top: 28px;
  padding: 18px 0 12px;
}

.site-footer__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 16px;
}

.site-footer__top {
  display:flex;
  justify-content:flex-start;
  margin-bottom: 8px;
}

.footer-nav {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  font-weight:800;
}
.footer-nav a {
  color: #1f2937;
  text-decoration:none;
}
.site-footer__sep {
  border: none;
  border-top: 1px solid #ddd;
  margin: 8px 0;
}

/* three-column grid */
.site-footer__grid {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 6px;
  margin-bottom: 12px;
}

/* columns */
.footer-col { flex: 1 1 0; min-width: 220px; }
.footer-col--left { flex: 1.2; }
.footer-col--center { flex: 1; }
.footer-col--right { flex: 0 0 240px; text-align: right; }

/* left column */
.company-name { font-weight:900; font-size:15px; margin-bottom:6px; }
.company-line { color: #374151; margin: 6px 0; }
.company-label { color: #6b7280; font-weight:800; margin-right:6px; }
.company-reg { color: #6b7280; font-weight:700; margin-top:6px; }

/* center */
.company-legal .company-label { color:#6b7280; font-weight:800; }
.company-legal .company-value { color:#374151; font-weight:900; margin-top:4px; }

/* right column */
.contacts { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.contacts a { color:#1f2937; text-decoration:none; font-weight:900; }
.footer-links { margin-top:8px; display:flex; gap:12px; flex-direction: column-reverse; justify-content:flex-end; }
.footer-links a { color:#4a5568; text-decoration:underline; font-weight:700; }

/* payment icons row */
.site-footer__payments { border-top: 0; margin-top: 8px; padding-top: 10px; display:flex; justify-content:center; }
.payments-inner { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.pay-icon { display:inline-block; opacity:0.95; }

/* responsiveness */
@media (max-width: 880px) {
  .site-footer__grid { flex-direction:column; gap:12px; }
  .footer-col--right { text-align:left; min-width: auto; flex: none; }
  .contacts { align-items:flex-start; }
  .footer-links { justify-content:flex-start; }
  .site-footer__top { display:block; margin-bottom:12px; }
}

/* cookie */
/* compact cookie styles — используем ваши переменные */
.cc-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 11000;
  display:flex;
  justify-content:center;
  pointer-events:auto;
}
.cc-banner__inner {
  background: rgba(182, 26, 73, 0.4);
    backdrop-filter: blur(10px); /* темная плашка — можно заменить на var(--purple) или #111827 */
  color: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  display:flex;
  gap:12px;
  align-items:center;
  max-width: 820px;
  width: calc(100% - 36px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.18);
}
.cc-banner__text { font-weight:800; }
.cc-banner__link { color: #fff; text-decoration: underline; font-weight:900; margin-left:6px; }
.cc-banner__actions { margin-left:auto; display:flex; gap:8px; align-items:center; }
.btn { padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:900; background:var(--white); color:#111827; border:none; }
.btn--ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.12); }

/* page switches */
.switch { position: relative; display:inline-block; width:46px; height:26px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#e5e7eb; transition:.2s; border-radius:16px; }
.slider:before { position:absolute; content:""; height:18px; width:18px; left:4px; top:4px; background:white; transition:.2s; border-radius:50%; }
.switch input:checked + .slider { background: var(--purple); }
.switch input:checked + .slider:before { transform: translateX(20px); }

/* page details */
.setting-row { display:flex; align-items:center; gap:12px; justify-content:space-between; }
.setting-label { font-weight:900; }
.setting-desc { color:var(--muted); font-weight:700; margin-left:8px; }

/* responsive */
@media (max-width:600px) {
  .cc-banner__inner { flex-direction:column; align-items:flex-start; gap:8px; padding:12px; }
  .cc-banner__actions { margin-left:0; width:100%; justify-content:flex-start; }
}

/* Force-render hints + transitions for mobile repaint issues */
.p-card, .cart-item, [data-cart-item], .p-modal__panel {
  will-change: background-color, transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: background-color .22s ease, opacity .22s ease, transform .22s ease;
}

/* in-cart container highlight */
.p-card.is-in-cart,
.cart-item.is-in-cart,
[data-cart-item].is-in-cart,
.p-modal__panel.is-in-cart {
  background-color: #FFF6FB; /* pink highlight */
  border-left: 4px solid rgba(201,66,132,0.14);
}
.p-modal__btn--primary.is-in-cart {
  background: var(--purple);
  border-color: var(--purple);
  color:#fff;
}


/* ensure cart button color follows container state */
.p-card.is-in-cart .p-card__cart,
.cart-item.is-in-cart .p-card__cart,
[data-cart-item].is-in-cart .p-card__cart {
  background: var(--purple) !important;
}

/* default (not in-cart) cart button color (explicit) */
.p-card .p-card__cart,
.cart-item .p-card__cart,
[data-cart-item] .p-card__cart {
  background: var(--yellow);
}

/* removed flash */
.p-card.is-removed,
.cart-item.is-removed,
[data-cart-item].is-removed {
  background-color: rgba(17,24,39,0.03) !important;
  opacity: 0.66;
  transform: translateX(6px);
}