/* [IBP:UI] File: /assets/css/store.css | Version: 1.1.16 | Reason: Fix desktop cart/checkout performance selector so the existing blur/shadow reduction applies to real pages without requiring data-kc-store-page. */
:root {
  --kc-store-brand: #2563eb;
  --kc-store-brand-dark: #1e40af;
  --kc-store-beauty: #f43f5e;
  --kc-store-action: #f97316;
  --kc-store-action-dark: #ea580c;
  --kc-store-success: #16a34a;
  --kc-store-warning: #f59e0b;
  --kc-store-danger: #dc2626;
  --kc-store-ink: #111827;
  --kc-store-muted: #64748b;
  --kc-store-line: rgba(15, 23, 42, 0.10);
  --kc-store-soft: #fff7f3;
  --kc-store-card: #ffffff;
  --kc-store-shadow: 0 22px 70px rgba(15, 23, 42, 0.10);
  --kc-store-radius: 24px;
}

.kc-store-nav-link {
  color: inherit;
}

.kc-store-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--kc-store-action), var(--kc-store-beauty));
  color: #fff !important;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 12px 34px rgba(249, 115, 22, 0.28);
  white-space: nowrap;
  transform: translateZ(0);
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.kc-store-header-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 42px rgba(249, 115, 22, 0.34);
  filter: saturate(1.06);
}

.kc-store-header-cta:active {
  transform: translateY(0);
}

.kc-store-page {
  --kc-store-header-offset: 64px;
  --kc-store-topbar-height: 52px;
  direction: rtl;
  text-align: right;
  color: var(--kc-store-ink);
  background:
    radial-gradient(circle at top right, rgba(244, 63, 94, 0.15), transparent 34rem),
    radial-gradient(circle at 14% 10%, rgba(37, 99, 235, 0.13), transparent 28rem),
    linear-gradient(180deg, #fff7f3 0%, #f8fafc 42%, #ffffff 100%);
  min-height: 80vh;
  padding-top: var(--kc-store-topbar-height, 52px);
}

.kc-store-shell {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: 28px 0 52px;
}

.kc-store-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
  gap: 22px;
  align-items: stretch;
  margin: 8px 0 18px;
}

.kc-store-hero__content,
.kc-store-hero__card,
.kc-store-toolbar,
.kc-store-cart,
.kc-store-main,
.kc-store-modal__panel {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.74);
  box-shadow: var(--kc-store-shadow);
  backdrop-filter: blur(14px);
}

.kc-store-hero__content {
  border-radius: 32px;
  padding: clamp(24px, 5vw, 54px);
  position: relative;
  overflow: hidden;
}

.kc-store-hero__content::after {
  content: "";
  position: absolute;
  inset-inline-start: -42px;
  inset-block-end: -48px;
  width: 210px;
  height: 210px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.18), rgba(244, 63, 94, 0.16));
  pointer-events: none;
}

.kc-store-eyebrow,
.kc-store-hero__badge,
.kc-store-cart__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(37, 99, 235, 0.10);
  color: var(--kc-store-brand-dark);
  font-size: 13px;
  font-weight: 800;
}

.kc-store-hero__title {
  max-width: 760px;
  margin: 14px 0 12px;
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: #0f172a;
}

.kc-store-hero__text {
  max-width: 690px;
  margin: 0;
  color: var(--kc-store-muted);
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.95;
}

.kc-store-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  position: relative;
  z-index: 1;
}

.kc-store-hero__card {
  border-radius: 32px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.kc-store-steps {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.kc-store-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background: #f8fafc;
  color: #334155;
  font-weight: 800;
}

.kc-store-steps span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--kc-store-action), var(--kc-store-beauty));
  color: #fff;
  font-size: 13px;
}

.kc-store-hero__note {
  margin: 0;
  color: var(--kc-store-muted);
  line-height: 1.8;
}

.kc-store-btn {
  appearance: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease, opacity 200ms ease;
}

.kc-store-btn:focus-visible,
.kc-store-input:focus-visible,
.kc-store-modal__close:focus-visible,
.kc-store-modal__backdrop:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.28);
  outline-offset: 3px;
}

.kc-store-btn--primary {
  background: linear-gradient(135deg, var(--kc-store-action), var(--kc-store-beauty));
  color: #fff;
  box-shadow: 0 14px 36px rgba(249, 115, 22, 0.24);
}

.kc-store-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(249, 115, 22, 0.30);
}

.kc-store-btn--soft {
  background: rgba(37, 99, 235, 0.10);
  color: var(--kc-store-brand-dark);
}

.kc-store-btn--ghost {
  background: #fff;
  color: var(--kc-store-ink);
  border: 1px solid var(--kc-store-line);
}

.kc-store-btn[disabled],
.kc-store-btn.is-disabled,
.kc-store-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.kc-store-toolbar {
  border-radius: var(--kc-store-radius);
  padding: 16px;
  margin: 18px 0;
}

.kc-store-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 220px) auto;
  gap: 12px;
  align-items: end;
}

.kc-store-field {
  display: grid;
  gap: 7px;
}

.kc-store-field label {
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}

.kc-store-input {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 16px;
  background: #fff;
  padding: 0 14px;
  color: var(--kc-store-ink);
  font: inherit;
}

.kc-store-input:focus {
  border-color: rgba(37, 99, 235, 0.78);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
  outline: none;
}

.kc-store-status {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(37, 99, 235, 0.10);
  color: var(--kc-store-brand-dark);
  font-weight: 800;
}

.kc-store-status.is-error {
  background: rgba(220, 38, 38, 0.10);
  color: #991b1b;
}

.kc-store-status.is-success {
  background: rgba(22, 163, 74, 0.10);
  color: #166534;
}

.kc-store-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: start;
}

.kc-store-main,
.kc-store-cart {
  border-radius: var(--kc-store-radius);
  padding: 18px;
}

.kc-store-section-head,
.kc-store-cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.kc-store-section-head h2,
.kc-store-cart__head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 22px;
}

.kc-store-section-head p {
  margin: 5px 0 0;
  color: var(--kc-store-muted);
}

.kc-store-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.kc-store-product {
  background: #fff;
  border: 1px solid var(--kc-store-line);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.kc-store-product:hover {
  transform: translateY(-3px);
  border-color: rgba(249, 115, 22, 0.35);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.11);
}

.kc-store-product__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.14), rgba(37, 99, 235, 0.12));
  overflow: hidden;
}

.kc-store-product__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.kc-store-product__placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  color: #be123c;
  font-weight: 900;
}

.kc-store-product__discount {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  border-radius: 999px;
  padding: 5px 10px;
  background: rgba(244, 63, 94, 0.95);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.kc-store-product__body {
  padding: 14px;
  display: grid;
  gap: 10px;
  flex: 1;
}

.kc-store-product__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 25px;
}

.kc-store-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.kc-store-product__title {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
  line-height: 1.7;
  min-height: 54px;
}

.kc-store-product__price {
  display: grid;
  gap: 2px;
  color: #0f172a;
}

.kc-store-product__price strong {
  font-size: 17px;
}

.kc-store-product__price span {
  color: var(--kc-store-muted);
  font-size: 12px;
}

.kc-store-product__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}

.kc-store-empty {
  border: 1px dashed rgba(15, 23, 42, 0.22);
  border-radius: 22px;
  padding: 28px;
  text-align: center;
  color: var(--kc-store-muted);
}

.kc-store-empty strong {
  display: block;
  color: #0f172a;
  margin-bottom: 6px;
}

.kc-store-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

.kc-store-cart {
  position: sticky;
  top: 92px;
}

.kc-store-cart__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--kc-store-action), var(--kc-store-beauty));
  color: #fff;
  font-weight: 900;
}

.kc-store-cart__body {
  display: grid;
  gap: 8px;
  color: var(--kc-store-muted);
}

.kc-store-cart-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--kc-store-line);
}

.kc-store-cart-item strong {
  color: #0f172a;
  font-size: 14px;
}

.kc-store-cart-item span {
  color: var(--kc-store-muted);
  font-size: 12px;
}

.kc-store-cart__cta {
  width: 100%;
  margin-top: 14px;
}

.kc-store-cart__hint {
  margin: 12px 0 0;
  color: var(--kc-store-muted);
  font-size: 12px;
  line-height: 1.8;
}

.kc-store-modal[hidden] {
  display: none !important;
}

.kc-store-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
}

.kc-store-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.56);
  cursor: pointer;
}

.kc-store-modal__panel {
  position: relative;
  z-index: 1;
  width: min(900px, 100%);
  max-height: min(760px, 92vh);
  overflow: auto;
  border-radius: 28px;
  padding: 18px;
}

.kc-store-modal__close {
  position: sticky;
  top: 0;
  z-index: 2;
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--kc-store-line);
  background: #fff;
  color: var(--kc-store-ink);
  font-size: 24px;
  cursor: pointer;
}

.kc-store-detail {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 18px;
  padding-top: 6px;
}

.kc-store-detail__media {
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.14), rgba(37, 99, 235, 0.12));
  aspect-ratio: 4 / 3;
}

.kc-store-detail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kc-store-detail__body {
  display: grid;
  gap: 12px;
}

.kc-store-detail__title {
  margin: 0;
  font-size: clamp(22px, 4vw, 34px);
  line-height: 1.35;
}

.kc-store-detail__text {
  margin: 0;
  color: var(--kc-store-muted);
  line-height: 1.9;
}

.kc-store-detail__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kc-store-loading {
  display: grid;
  place-items: center;
  min-height: 220px;
  border: 1px dashed rgba(15, 23, 42, 0.18);
  border-radius: 22px;
  color: var(--kc-store-muted);
  font-weight: 800;
}

@media (max-width: 1080px) {
  .kc-store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kc-store-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .kc-store-cart {
    position: static;
  }
}

@media (max-width: 820px) {
  .kc-store-shell {
    width: min(100% - 18px, 720px);
    padding-top: 14px;
  }

  .kc-store-hero {
    grid-template-columns: 1fr;
  }

  .kc-store-search {
    grid-template-columns: 1fr;
  }

  .kc-store-search__btn,
  .kc-store-btn {
    width: 100%;
  }

  .kc-store-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .kc-store-grid {
    grid-template-columns: 1fr;
  }

  .kc-store-product__actions {
    grid-template-columns: 1fr;
  }

  .kc-store-detail {
    grid-template-columns: 1fr;
  }

  .kc-store-modal {
    padding: 10px;
    align-items: end;
  }

  .kc-store-modal__panel {
    max-height: 88vh;
    border-radius: 26px 26px 0 0;
  }

  .kc-store-header-cta {
    display: none;
  }
}

/* [IBP:UI] Storefront Iteration 1.1 overrides: compact desktop nav, sticky store bar, full-width catalog, and improved search spacing. */
@media (min-width: 821px) {
  .site-header .header-nav ul {
    gap: clamp(10px, 1vw, 18px);
  }

  .site-header .header-nav a {
    font-size: 14px;
    line-height: 1.45;
  }

  .site-header .header-actions {
    gap: 10px;
  }
}

.kc-store-header-cta {
  min-height: 36px;
  padding: 0 12px;
  font-size: 14px;
  box-shadow: 0 10px 26px rgba(249, 115, 22, 0.22);
}

.kc-store-topbar {
  position: fixed;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: var(--kc-store-header-offset, 64px);
  z-index: 99;
  border-top: 1px solid rgba(15, 23, 42, 0.05);
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.kc-store-topbar__inner {
  width: min(1240px, calc(100% - 28px));
  min-height: var(--kc-store-topbar-height, 52px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.kc-store-topbar__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0f172a;
  text-decoration: none;
  font-weight: 900;
  font-size: 15px;
  white-space: nowrap;
}

.kc-store-topbar__mark {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--kc-store-action), var(--kc-store-beauty));
  color: #fff;
  font-size: 13px;
}

.kc-store-topbar__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.kc-store-iconbtn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.kc-store-iconbtn:hover {
  transform: translateY(-1px);
  border-color: rgba(249, 115, 22, 0.35);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

.kc-store-iconbtn:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.28);
  outline-offset: 3px;
}

.kc-store-iconbtn svg {
  width: 21px;
  height: 21px;
}

.kc-store-cart-badge {
  position: absolute;
  inset-block-start: -5px;
  inset-inline-start: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--kc-store-success);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  border: 2px solid #fff;
}

.kc-store-cart-badge[hidden] {
  display: none !important;
}

.kc-store-tip {
  position: relative;
}

.kc-store-tip__bubble {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 138px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
}

.kc-store-tip:hover .kc-store-tip__bubble,
.kc-store-tip.is-open .kc-store-tip__bubble {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.kc-store-shell {
  width: min(1240px, calc(100% - 28px));
  padding-top: 18px;
}

.kc-store-buyflow {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.6fr);
  gap: 14px;
  align-items: center;
  margin: 8px 0 16px;
  padding: 14px 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.74);
  box-shadow: 0 14px 42px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
}

.kc-store-buyflow__head {
  display: grid;
  gap: 4px;
}

.kc-store-buyflow__head span {
  color: var(--kc-store-brand-dark);
  font-size: 12px;
  font-weight: 900;
}

.kc-store-buyflow__head strong {
  color: #0f172a;
  font-size: 14px;
  line-height: 1.8;
}

.kc-store-flowline {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
}

.kc-store-flowline li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 7px 8px;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 13px;
  font-weight: 900;
}

.kc-store-flowline li:nth-child(3) {
  background: rgba(244, 63, 94, 0.10);
  color: #be123c;
}

.kc-store-flowline span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--kc-store-action), var(--kc-store-beauty));
  color: #fff;
  font-size: 12px;
}

.kc-store-toolbar {
  padding: 18px 22px;
}

.kc-store-search {
  grid-template-columns: minmax(0, 1fr) minmax(170px, 220px) auto;
  gap: 14px;
}

.kc-store-field label {
  font-size: 14px;
  line-height: 1.8;
}

.kc-store-input {
  min-height: 48px;
  padding-inline: 22px;
  font-size: 14px;
}

.kc-store-layout,
.kc-store-layout--full {
  display: block;
}

.kc-store-main {
  padding: 20px;
}

.kc-store-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.kc-store-section-head h2 {
  font-size: 21px;
}

.kc-store-product__title {
  font-size: 15px;
}

.kc-store-product__price strong {
  font-size: 16px;
}

@media (max-width: 1180px) {
  .kc-store-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .kc-store-buyflow {
    grid-template-columns: 1fr;
  }

  .kc-store-flowline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .kc-store-topbar__inner {
    width: min(100% - 18px, 720px);
    min-height: 48px;
  }

  .kc-store-topbar__title {
    font-size: 12px;
  }

  .kc-store-iconbtn {
    width: 40px;
    height: 40px;
  }

  .kc-store-shell {
    width: min(100% - 18px, 720px);
    padding-top: 12px;
  }

  .kc-store-buyflow {
    padding: 12px;
    border-radius: 20px;
  }

  .kc-store-buyflow__head strong {
    font-size: 13px;
  }

  .kc-store-flowline {
    gap: 7px;
  }

  .kc-store-flowline li {
    min-height: 38px;
    font-size: 12px;
  }

  .kc-store-toolbar {
    padding: 16px;
  }

  .kc-store-search {
    grid-template-columns: 1fr;
  }

  .kc-store-input {
    padding-inline: 18px;
  }

  .kc-store-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .kc-store-page {
    --kc-store-topbar-height: 50px;
  }
}


/* [IBP:UI] Storefront Iteration 1.1.3: keep the search/sort toolbar padding visually aligned with the product list card. */
.kc-store-toolbar {
  padding-inline: 20px !important;
}

@media (max-width: 820px) {
  .kc-store-toolbar {
    padding-inline: 20px !important;
  }
}

/* [IBP:UI] Store Cart UI Iteration 2.0: mobile-first cart page, quantity controls, item selection, and checkout-ready summary. */
.kc-store-cart-shell { padding-bottom: 84px; }
.kc-store-cart-hero, .kc-store-cart-list, .kc-store-cart-summary__card { background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.74); box-shadow: var(--kc-store-shadow); backdrop-filter: blur(14px); }
.kc-store-cart-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 10px 0 18px; padding: 22px; border-radius: 28px; }
.kc-store-cart-hero h1 { margin: 10px 0 8px; color: #0f172a; font-size: clamp(24px,4vw,38px); line-height: 1.35; }
.kc-store-cart-hero p { max-width: 720px; margin: 0; color: var(--kc-store-muted); line-height: 1.9; }
.kc-store-cart-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,360px); gap: 18px; align-items: start; }
.kc-store-cart-list, .kc-store-cart-summary__card { border-radius: var(--kc-store-radius); padding: 20px; }
.kc-store-cart-items { display: grid; gap: 14px; }
.kc-store-cart-list__actions { display: grid; grid-template-columns: minmax(180px,1.2fr) minmax(160px,.9fr) minmax(150px,.8fr); gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--kc-store-line); }
.kc-store-cart-list__actions .kc-store-btn { width: 100%; min-height: 46px; }
.kc-store-cart-row { display: grid; grid-template-columns: auto 104px minmax(0,1fr) auto auto; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--kc-store-line); border-radius: 22px; background: #fff; box-shadow: 0 10px 28px rgba(15,23,42,.06); transition: opacity 180ms ease, border-color 180ms ease, transform 180ms ease; }
.kc-store-cart-row:hover { border-color: rgba(249,115,22,.28); transform: translateY(-1px); }
.kc-store-cart-row.is-muted { opacity: .62; }
.kc-store-cart-row__select { display: grid; gap: 5px; place-items: center; color: var(--kc-store-muted); font-size: 12px; font-weight: 900; cursor: pointer; }
.kc-store-cart-row__select input { width: 20px; height: 20px; accent-color: var(--kc-store-action); }
.kc-store-cart-row__media { width: 104px; aspect-ratio: 1/1; overflow: hidden; border-radius: 18px; background: linear-gradient(135deg,rgba(244,63,94,.14),rgba(37,99,235,.12)); }
.kc-store-cart-row__media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.kc-store-cart-row__placeholder { height: 100%; display: grid; place-items: center; color: #be123c; font-size: 12px; font-weight: 900; }
.kc-store-cart-row__body { display: grid; gap: 8px; }
.kc-store-cart-row__body h3 { margin: 0; color: #0f172a; font-size: 16px; line-height: 1.7; }
.kc-store-cart-row__body p { margin: 0; color: var(--kc-store-muted); font-size: 13px; line-height: 1.8; }
.kc-store-cart-row__price { display: grid; gap: 2px; }
.kc-store-cart-row__price strong { color: #0f172a; font-size: 16px; }
.kc-store-cart-row__price span { color: var(--kc-store-muted); font-size: 12px; }
.kc-store-cart-row__controls { display: inline-grid; grid-template-columns: 40px 42px 40px; align-items: center; gap: 6px; }
.kc-store-cart-row__qty { width: 40px; height: 40px; font-size: 20px; font-weight: 900; box-shadow: none; }
.kc-store-cart-row__qtyvalue { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 14px; background: #f8fafc; color: #0f172a; font-weight: 900; }
.kc-store-cart-row__remove { display: flex; flex-direction: column; gap: 8px; }
.kc-store-cart-row__remove .kc-store-btn { min-height: 38px; padding: 0 12px; font-size: 13px; }
.kc-store-cart-summary { position: sticky; top: calc(var(--kc-store-header-offset,64px) + var(--kc-store-topbar-height,52px) + 16px); }
.kc-store-cart-summary__card h2 { margin: 0 0 16px; color: #0f172a; font-size: 22px; }
.kc-store-cart-summary__card dl { display: grid; gap: 12px; margin: 0; }
.kc-store-cart-summary__card dl div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--kc-store-line); }
.kc-store-cart-summary__card dt { color: var(--kc-store-muted); font-weight: 800; }
.kc-store-cart-summary__card dd { margin: 0; color: #0f172a; font-weight: 900; }
.kc-store-cart-summary__total dd { color: #be123c; font-size: 18px; }
.kc-store-cart-summary__checkout, .kc-store-cart-summary__refresh { width: 100%; margin-top: 14px; }
.kc-store-cart-summary__hint { margin: 14px 0 0; color: var(--kc-store-muted); font-size: 12px; line-height: 1.8; }
.kc-store-cart-empty .kc-store-btn { margin-top: 12px; }
.kc-store-iconbtn.is-current { border-color: rgba(249,115,22,.45); color: var(--kc-store-action-dark); }
@media (max-width: 1080px) { .kc-store-cart-layout { grid-template-columns: 1fr; } .kc-store-cart-summary { position: static; } .kc-store-cart-row { grid-template-columns: auto 92px minmax(0,1fr); } .kc-store-cart-row__controls, .kc-store-cart-row__remove { grid-column: 3; justify-self: start; } .kc-store-cart-list__actions { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .kc-store-cart-hero { align-items: stretch; flex-direction: column; padding: 16px; border-radius: 22px; } .kc-store-cart-hero .kc-store-btn { width: 100%; } .kc-store-cart-list, .kc-store-cart-summary__card { padding: 16px; } .kc-store-cart-row { grid-template-columns: auto minmax(78px,92px) minmax(0,1fr); gap: 10px; padding: 12px; } .kc-store-cart-row__select span { display: none; } .kc-store-cart-row__media { width: 86px; border-radius: 16px; } .kc-store-cart-row__body h3 { font-size: 14px; } .kc-store-cart-row__body p { font-size: 12px; } .kc-store-cart-row__controls, .kc-store-cart-row__remove { grid-column: 1/-1; justify-self: stretch; } .kc-store-cart-row__controls { grid-template-columns: 44px 1fr 44px; } .kc-store-cart-row__remove { flex-direction: row; } .kc-store-cart-row__remove .kc-store-btn { flex: 1; } .kc-store-cart-list__actions { gap: 8px; margin-top: 14px; padding-top: 14px; } .kc-store-cart-summary__card { box-shadow: var(--kc-store-shadow); } }

/* [IBP:UI] Store Cart Iteration 2.0.1: align cart help card padding with cart content cards and make the intro card collapsible behind a question icon. */
.kc-store-cart-helpbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 12px;
}

.kc-store-help-toggle {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), rgba(244, 63, 94, 0.12));
  color: #be123c;
  font: inherit;
  font-size: 20px;
  font-weight: 1000;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, background 200ms ease;
}

.kc-store-help-toggle:hover,
.kc-store-help-toggle[aria-expanded="true"] {
  transform: translateY(-1px);
  border-color: rgba(249, 115, 22, 0.35);
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.18), rgba(244, 63, 94, 0.16));
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

.kc-store-help-toggle:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.28);
  outline-offset: 3px;
}

.kc-store-cart-helpbar__back {
  min-height: 40px;
}

.kc-store-cart-hero[hidden] {
  display: none !important;
}

.kc-store-cart-hero {
  padding: 20px;
  margin: 0 0 18px;
}

@media (min-width: 721px) {
  .kc-store-cart-hero {
    padding: 20px;
  }
}

@media (max-width: 720px) {
  .kc-store-cart-helpbar {
    margin: 8px 0 10px;
  }

  .kc-store-help-toggle {
    width: 40px;
    height: 40px;
  }

  .kc-store-cart-helpbar__back {
    width: auto;
    min-height: 40px;
    padding-inline: 14px;
  }

  .kc-store-cart-hero {
    padding: 16px;
  }
}


/* [IBP:UI] Store Cart Iteration 2.0.2: hard-fix the cart help card initial hidden state, smaller desktop typography, and padding alignment with the lower cart cards. */
.kc-store-cart-hero[data-kc-cart-help-card] {
  display: none !important;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 18px !important;
  padding: 20px !important;
  border-radius: var(--kc-store-radius) !important;
}

.kc-store-cart-hero[data-kc-cart-help-card].is-open {
  display: flex !important;
}

.kc-store-cart-hero[data-kc-cart-help-card] > div {
  min-width: 0;
}

.kc-store-cart-hero[data-kc-cart-help-card] h1 {
  margin: 8px 0 8px !important;
  font-size: clamp(18px, 2.1vw, 24px) !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

.kc-store-cart-hero[data-kc-cart-help-card] p {
  max-width: 780px;
  font-size: 14px;
  line-height: 1.95;
}

.kc-store-cart-helpbar {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 720px) {
  .kc-store-cart-hero[data-kc-cart-help-card] {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  .kc-store-cart-hero[data-kc-cart-help-card].is-open {
    display: block !important;
  }

  .kc-store-cart-hero[data-kc-cart-help-card] h1 {
    font-size: 17px !important;
  }
}


/* [IBP:UI] Store Cart Iteration 2.0.3: adjust help toggle spacing and move return-to-store action into the cart summary stack. */
.kc-store-cart-helpbar {
  justify-content: flex-start !important;
  margin: 16px 0 6px !important;
}

.kc-store-cart-summary__checkout,
.kc-store-cart-summary__refresh,
.kc-store-cart-summary__back {
  width: 100%;
  margin-top: 14px;
}

.kc-store-cart-summary__back {
  box-sizing: border-box;
}

@media (max-width: 720px) {
  .kc-store-cart-helpbar {
    margin: 14px 0 6px !important;
  }
}


/* [IBP:UI] Store Cart Iteration 2.0.4: reduce the gap between the collapsed help toggle and the cart items card without changing backend behavior. */
.kc-store-cart-helpbar {
  margin: 12px 0 -4px !important;
}

.kc-store-cart-layout {
  margin-top: 0 !important;
}

.kc-store-cart-hero[data-kc-cart-help-card].is-open {
  margin: 10px 0 14px !important;
}

@media (max-width: 720px) {
  .kc-store-cart-helpbar {
    margin: 10px 0 -4px !important;
  }

  .kc-store-cart-hero[data-kc-cart-help-card].is-open {
    margin: 8px 0 12px !important;
  }
}

/* [IBP:UI] Store Cart Iteration 2.0.5: increase the help-toggle top breathing room and reduce the cart-items card top gap. */
.kc-store-cart-helpbar {
  margin: 16px 0 -4px !important;
}

.kc-store-cart-layout {
  margin-top: -8px !important;
}

@media (max-width: 720px) {
  .kc-store-cart-helpbar {
    margin: 14px 0 -4px !important;
  }

  .kc-store-cart-layout {
    margin-top: -6px !important;
  }
}

/* [IBP:UI] Store Cart Iteration 2.0.6: apply the final help-toggle spacing adjustment specifically on mobile so the top breathing room increases and the cart-items card gap is reduced. */
@media (max-width: 720px) {
  .kc-store-cart-helpbar {
    margin: 18px 0 -6px !important;
  }

  .kc-store-cart-layout {
    margin-top: -12px !important;
  }
}


/* [IBP:UI] Store Checkout UI Iteration 3.0: wizard checkout page for cart review, address, receiver, internal test payment, and order result. */
.kc-store-checkout-shell {
  padding-bottom: 84px;
}

.kc-store-checkout-hero,
.kc-store-checkout-panel,
.kc-store-checkout-summary .kc-store-cart-summary__card,
.kc-store-checkout-steps {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.74);
  box-shadow: var(--kc-store-shadow);
  backdrop-filter: blur(14px);
}

.kc-store-checkout-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 14px 0 14px;
  padding: 20px;
  border-radius: 28px;
}

.kc-store-checkout-hero h1 {
  margin: 10px 0 8px;
  color: #0f172a;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.55;
}

.kc-store-checkout-hero p {
  max-width: 780px;
  margin: 0;
  color: var(--kc-store-muted);
  line-height: 1.9;
}

.kc-store-checkout-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 24px;
}

.kc-store-checkout-steps li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  font-weight: 900;
}

.kc-store-checkout-steps span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
}

.kc-store-checkout-steps li.is-active {
  background: rgba(249, 115, 22, 0.12);
  color: #be123c;
}

.kc-store-checkout-steps li.is-active span,
.kc-store-checkout-steps li.is-done span {
  background: linear-gradient(135deg, var(--kc-store-action), var(--kc-store-beauty));
  color: #fff;
}

.kc-store-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 18px;
  align-items: start;
}

.kc-store-checkout-panel,
.kc-store-checkout-summary .kc-store-cart-summary__card {
  border-radius: var(--kc-store-radius);
  padding: 20px;
}

.kc-store-checkout-summary {
  position: sticky;
  top: calc(var(--kc-store-header-offset, 64px) + var(--kc-store-topbar-height, 52px) + 16px);
}

.kc-store-checkout-step {
  display: none;
}

.kc-store-checkout-step.is-active {
  display: block;
}

.kc-store-checkout-items {
  display: grid;
  gap: 10px;
}

.kc-store-checkout-item {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid var(--kc-store-line);
  border-radius: 18px;
  background: #fff;
}

.kc-store-checkout-item strong {
  color: #0f172a;
  line-height: 1.7;
}

.kc-store-checkout-item span,
.kc-store-checkout-item em {
  color: var(--kc-store-muted);
  font-style: normal;
  font-size: 13px;
  line-height: 1.8;
}

.kc-store-checkout-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.kc-store-field--wide,
.kc-store-checkout-form__actions {
  grid-column: 1 / -1;
}

.kc-store-textarea {
  min-height: 104px;
  padding-block: 12px;
  resize: vertical;
}

.kc-store-checkout-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.kc-store-checkout-next {
  margin-top: 16px;
}

.kc-store-checkout-payment-note {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(244, 63, 94, 0.10);
  color: #be123c;
  line-height: 1.9;
}

.kc-store-checkout-payment-note p {
  margin: 0;
  color: #64748b;
}

.kc-store-checkout-result {
  display: grid;
  gap: 10px;
  text-align: center;
  padding: 28px 14px;
}

.kc-store-checkout-result h2 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(22px, 3vw, 30px);
}

.kc-store-checkout-result p {
  margin: 0;
  color: var(--kc-store-muted);
  line-height: 1.9;
}

.kc-store-checkout-result__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .kc-store-checkout-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kc-store-checkout-layout {
    grid-template-columns: 1fr;
  }

  .kc-store-checkout-summary {
    position: static;
  }
}

@media (max-width: 720px) {
  .kc-store-checkout-hero {
    align-items: stretch;
    flex-direction: column;
    padding: 16px;
    border-radius: 22px;
  }

  .kc-store-checkout-hero .kc-store-btn {
    width: 100%;
  }

  .kc-store-checkout-steps {
    gap: 7px;
    padding: 10px;
  }

  .kc-store-checkout-steps li {
    justify-content: flex-start;
    min-height: 38px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .kc-store-checkout-panel,
  .kc-store-checkout-summary .kc-store-cart-summary__card {
    padding: 16px;
  }

  .kc-store-checkout-form {
    grid-template-columns: 1fr;
  }

  .kc-store-checkout-form__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .kc-store-checkout-form__actions .kc-store-btn {
    width: 100%;
  }
}


.kc-store-checkout-hero {
  padding-inline: 28px !important;
}

@media (max-width: 720px) {
  .kc-store-checkout-hero {
    padding-inline: 20px !important;
  }
}


/* [IBP:UI] Store Checkout Iteration 3.0.1: merge checkout intro and stepper into one compact hero, move back-to-cart under the first CTA, and keep wizard navigation focused at the top. */
.kc-store-checkout-hero--compact {
  display: grid !important;
  grid-template-columns: minmax(220px, 0.78fr) minmax(0, 1.45fr);
  align-items: center;
  gap: 16px;
  padding: 20px 28px !important;
}

.kc-store-checkout-hero--compact .kc-store-checkout-hero__copy {
  min-width: 0;
}

.kc-store-checkout-hero--compact h1 {
  margin: 10px 0 0;
  font-size: clamp(18px, 2.2vw, 25px);
  line-height: 1.65;
}

.kc-store-checkout-steps--hero {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

.kc-store-checkout-back-cart {
  width: fit-content;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .kc-store-checkout-hero--compact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .kc-store-checkout-hero--compact {
    padding: 16px 20px !important;
  }

  .kc-store-checkout-steps--hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kc-store-checkout-back-cart {
    width: 100%;
  }
}


/* [IBP:UI] Store Coin Checkout Iteration 4.0: optional BeautyCoin card inside checkout payment step. */
.kc-store-checkout-coin-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.16);
  margin-bottom: 14px;
}

.kc-store-checkout-coin-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.kc-store-checkout-coin-card__head h3 {
  margin: 8px 0 6px;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.7;
}

.kc-store-checkout-coin-card__head p,
.kc-store-checkout-coin-result {
  margin: 0;
  color: var(--kc-store-muted);
  font-size: 13px;
  line-height: 1.9;
}

.kc-store-checkout-coin-result.is-success {
  color: #166534;
  font-weight: 900;
}

.kc-store-checkout-coin-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.kc-store-checkout-coin-body[hidden] {
  display: none !important;
}

.kc-store-checkout-coin-result {
  grid-column: 1 / -1;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.kc-store-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  color: #be123c;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid rgba(244, 63, 94, 0.18);
}

.kc-store-switch input {
  width: 18px;
  height: 18px;
  accent-color: var(--kc-store-beauty);
}

@media (max-width: 720px) {
  .kc-store-checkout-coin-card {
    padding: 14px;
    border-radius: 20px;
  }

  .kc-store-checkout-coin-card__head,
  .kc-store-checkout-coin-body {
    grid-template-columns: 1fr;
    display: grid;
  }

  .kc-store-switch,
  .kc-store-checkout-coin-body .kc-store-btn {
    width: 100%;
    justify-content: center;
  }
}

/* [IBP:UI] Store Coin Checkout Iteration 4.1: wallet-aware BeautyCoin quote defaults and payment preview. */
.kc-store-checkout-coin-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.kc-store-checkout-coin-meta div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(244, 63, 94, 0.12);
}

.kc-store-checkout-coin-meta dt {
  color: var(--kc-store-muted);
  font-size: 12px;
  font-weight: 800;
}

.kc-store-checkout-coin-meta dd {
  margin: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
}

.kc-store-checkout-coin-result.is-error {
  color: #991b1b;
  font-weight: 900;
  background: rgba(220, 38, 38, 0.08);
}

@media (max-width: 720px) {
  .kc-store-checkout-coin-meta {
    grid-template-columns: 1fr;
  }
}


/* [IBP:UI] Store Coin Checkout Iteration 4.1.2: hide BeautyCoin input controls when the user has no spendable coin balance. */
.kc-store-checkout-coin-unavailable {
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(220, 38, 38, 0.08);
  color: #991b1b;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.9;
}

.kc-store-checkout-coin-unavailable[hidden],
.kc-store-switch[hidden],
.kc-store-checkout-coin-body[hidden] {
  display: none !important;
}

/* [IBP:UI] Storefront Iteration 1.1.11: show inline quantity controls instead of the add button when a product is already in the cart. */
.kc-store-product-qty {
  min-height: 44px;
  display: grid;
  grid-template-columns: 42px minmax(38px, 1fr) 42px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  padding: 3px;
}

.kc-store-product-qty__btn {
  appearance: none;
  border: 0;
  min-width: 38px;
  min-height: 38px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.10);
  color: var(--kc-store-brand-dark);
  font: inherit;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, opacity 180ms ease;
}

.kc-store-product-qty__btn:hover {
  transform: translateY(-1px);
  background: rgba(37, 99, 235, 0.16);
}

.kc-store-product-qty__btn:active {
  transform: translateY(0);
}

.kc-store-product-qty__btn:disabled,
.kc-store-product-qty.is-busy .kc-store-product-qty__btn {
  cursor: wait;
  opacity: 0.55;
  transform: none;
}

.kc-store-product-qty__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--kc-store-ink);
  font-weight: 1000;
  font-variant-numeric: tabular-nums;
}

/* [IBP:UI] Store Checkout Iteration 3.0.2: show actionable inline field errors for receiver mobile validation. */
.kc-store-field-error {
  margin: 6px 0 0;
  color: #991b1b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.8;
}

.kc-store-field-error[hidden] {
  display: none !important;
}

.kc-store-input.is-invalid,
.kc-store-input[aria-invalid="true"] {
  border-color: rgba(220, 38, 38, 0.78);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10);
}


/* [IBP:UI] Storefront Iteration 12.5.2: desktop-only scroll performance fix for the product listing page.
   Reason: diagnostic browser test proved that backdrop-filter and shadow effects cause scroll lag on desktop; mobile remains unchanged. */
@media (min-width: 821px) {
  .kc-store-page[data-kc-store-page]:not(.kc-store-cart-page):not(.kc-store-checkout-page) .kc-store-topbar,
  .kc-store-page[data-kc-store-page]:not(.kc-store-cart-page):not(.kc-store-checkout-page) .kc-store-toolbar,
  .kc-store-page[data-kc-store-page]:not(.kc-store-cart-page):not(.kc-store-checkout-page) .kc-store-main {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  .kc-store-page[data-kc-store-page]:not(.kc-store-cart-page):not(.kc-store-checkout-page) .kc-store-topbar {
    border-top-color: rgba(15, 23, 42, 0.04);
    border-bottom-color: rgba(15, 23, 42, 0.12);
  }

  .kc-store-page[data-kc-store-page]:not(.kc-store-cart-page):not(.kc-store-checkout-page) .kc-store-iconbtn,
  .kc-store-page[data-kc-store-page]:not(.kc-store-cart-page):not(.kc-store-checkout-page) .kc-store-product {
    box-shadow: none;
  }

  .kc-store-page[data-kc-store-page]:not(.kc-store-cart-page):not(.kc-store-checkout-page) .kc-store-iconbtn:hover,
  .kc-store-page[data-kc-store-page]:not(.kc-store-cart-page):not(.kc-store-checkout-page) .kc-store-product:hover {
    box-shadow: none;
  }
}

/* [IBP:UI] Store Cart/Checkout Iteration 12.5.5: desktop-only selector fix for cart, address, receiver, payment, and order-result scroll performance.
   Reason: runtime test proved cart/checkout pages have kc-store-cart-page/kc-store-checkout-page classes but not data-kc-store-page, so the previous performance rules did not apply. */
@media (min-width: 821px) {
  .kc-store-page.kc-store-cart-page .kc-store-topbar,
  .kc-store-page.kc-store-cart-page .kc-store-cart-hero,
  .kc-store-page.kc-store-cart-page .kc-store-cart-list,
  .kc-store-page.kc-store-cart-page .kc-store-cart-summary__card,
  .kc-store-page.kc-store-cart-page .kc-store-iconbtn,
  .kc-store-page.kc-store-checkout-page .kc-store-topbar,
  .kc-store-page.kc-store-checkout-page .kc-store-checkout-hero,
  .kc-store-page.kc-store-checkout-page .kc-store-checkout-panel,
  .kc-store-page.kc-store-checkout-page .kc-store-checkout-steps,
  .kc-store-page.kc-store-checkout-page .kc-store-cart-summary__card,
  .kc-store-page.kc-store-checkout-page .kc-store-iconbtn {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  .kc-store-page.kc-store-cart-page .kc-store-topbar,
  .kc-store-page.kc-store-cart-page .kc-store-cart-hero,
  .kc-store-page.kc-store-cart-page .kc-store-cart-list,
  .kc-store-page.kc-store-cart-page .kc-store-cart-summary__card,
  .kc-store-page.kc-store-checkout-page .kc-store-topbar,
  .kc-store-page.kc-store-checkout-page .kc-store-checkout-hero,
  .kc-store-page.kc-store-checkout-page .kc-store-checkout-panel,
  .kc-store-page.kc-store-checkout-page .kc-store-checkout-steps,
  .kc-store-page.kc-store-checkout-page .kc-store-cart-summary__card {
    background: #fff;
  }

  .kc-store-page.kc-store-cart-page .kc-store-cart-row,
  .kc-store-page.kc-store-cart-page .kc-store-help-toggle,
  .kc-store-page.kc-store-checkout-page .kc-store-checkout-item,
  .kc-store-page.kc-store-checkout-page .kc-store-help-toggle {
    box-shadow: none;
  }

  .kc-store-page.kc-store-cart-page .kc-store-cart-row:hover,
  .kc-store-page.kc-store-cart-page .kc-store-help-toggle:hover,
  .kc-store-page.kc-store-cart-page .kc-store-iconbtn:hover,
  .kc-store-page.kc-store-checkout-page .kc-store-iconbtn:hover {
    box-shadow: none;
  }

  .kc-store-page.kc-store-cart-page .kc-store-topbar,
  .kc-store-page.kc-store-checkout-page .kc-store-topbar {
    border-top-color: rgba(15, 23, 42, 0.04);
    border-bottom-color: rgba(15, 23, 42, 0.12);
  }
}