:root {
  --catalog-bg: #10131a;
  --catalog-panel: #181d27;
  --catalog-panel-2: #202737;
  --catalog-text: #f3f6fb;
  --catalog-muted: #9ca8ba;
  --catalog-green: #63d471;
  --catalog-blue: #66a6ff;
  --catalog-red: #ff6b6b;
  --catalog-yellow: #ffd166;
  --catalog-shadow: #0009;
  --catalog-overlay: #0008;
  --catalog-border: #ffffff20;
  --catalog-button-text: #07101d;
  --catalog-confirm-text: #06120a;
  --catalog-ease: cubic-bezier(.2, .9, .2, 1);
}

:root[data-theme="light"] {
  --catalog-bg: #f4f6fb;
  --catalog-panel: #ffffff;
  --catalog-panel-2: #eaf0f8;
  --catalog-text: #111827;
  --catalog-muted: #64748b;
  --catalog-green: #168a33;
  --catalog-blue: #2166d2;
  --catalog-red: #d12e2e;
  --catalog-yellow: #b77900;
  --catalog-shadow: #17203322;
  --catalog-overlay: #fff8;
  --catalog-border: #0f172a20;
  --catalog-button-text: #fff;
  --catalog-confirm-text: #fff;
}

.catalog-svg-icon {
  display: block;
  width: 1.35em;
  height: 1.35em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.catalog-controls { position: sticky; top: 0; z-index: 12; display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin: 0 0 .85rem; padding: .45rem 0 .55rem; background: transparent; isolation: isolate; }
.catalog-filter-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  flex: 0 0 auto;
  min-height: 3.25rem;
  border: 1px solid var(--catalog-border);
  border-radius: 1rem;
  padding: .65rem .9rem;
  color: var(--catalog-text);
  background: var(--catalog-panel);
  font-weight: 1000;
}
.catalog-filter-toggle.active { border-color: transparent; color: var(--catalog-button-text); background: var(--catalog-blue); }
.catalog-filter-wrap { position: relative; min-width: 14rem; flex: 1 1 18rem; }
.catalog-filter-wrap input,
.catalog-controls select {
  width: 100%;
  min-height: 3.25rem;
  border: 1px solid var(--catalog-border);
  border-radius: 1rem;
  padding: .8rem 2.8rem .8rem 1rem;
  color: var(--catalog-text);
  background-color: var(--catalog-panel);
  font-weight: 800;
  line-height: 1.1;
}
.catalog-controls select {
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 1rem) 50%,
    calc(100% - .7rem) 50%;
  background-repeat: no-repeat;
  background-size: .35rem .35rem, .35rem .35rem;
}
.catalog-clear-filter {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 0;
  border-radius: .7rem;
  color: var(--catalog-muted);
  background: transparent;
}
.catalog-filter-panel { display: none; flex: 1 1 100%; align-items: center; flex-wrap: wrap; gap: .55rem; padding: .15rem 0 0; }
.catalog-controls-expanded .catalog-filter-panel { display: flex; }
.catalog-category-buttons { display: flex; gap: .45rem; flex-wrap: wrap; }
.catalog-category-buttons button {
  min-height: 3.25rem;
  border: 1px solid var(--catalog-border);
  border-radius: 1rem;
  padding: .75rem 1rem;
  color: var(--catalog-text);
  background: var(--catalog-panel);
  font-weight: 900;
}
.catalog-category-buttons button.active { background: var(--catalog-blue); color: var(--catalog-button-text); border-color: transparent; }
.catalog-sort-select { flex: 0 0 clamp(12.75rem, 18vw, 15rem); min-width: 12.75rem; }

.catalog-grid { --catalog-grid-min: 15.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--catalog-grid-min)), 1fr)); gap: clamp(.75rem, 1vw, 1.25rem); }
.catalog-card {
  position: relative;
  border: 1px solid var(--catalog-border);
  border-radius: 1.35rem;
  background: var(--catalog-panel);
  color: var(--catalog-text);
  box-shadow: 0 .8rem 2rem var(--catalog-shadow);
  overflow: hidden;
}
.catalog-item-card {
  width: 4cm;
  height: 8cm;
  min-height: 0;
  padding: .28cm;
  display: grid;
  grid-template-areas:
    "picture picture"
    "name name"
    "price size"
    "unit unit";
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  gap: .11cm .18cm;
  text-align: left;
  isolation: isolate;
  background: linear-gradient(to bottom, rgba(var(--catalog-accent-rgb), .40), rgba(var(--catalog-accent-rgb), .50)), var(--catalog-panel);
  border-radius: .28cm;
}
.catalog-item-body-button { position: absolute; inset: 0; border: 0; background: transparent; color: inherit; z-index: 1; }
.catalog-picture-frame {
  grid-area: picture;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  align-self: stretch;
  border-radius: .2cm;
  background: transparent;
  overflow: visible;
  z-index: 2;
}
.catalog-product-picture { width: 100%; height: 100%; min-height: 0; object-fit: contain; filter: drop-shadow(0 .12cm .16cm var(--catalog-shadow)); }
.catalog-product-placeholder { color: var(--catalog-muted); line-height: 1; filter: drop-shadow(0 .12cm .16cm var(--catalog-shadow)); }
.catalog-product-placeholder .catalog-svg-icon { width: 1.7cm; height: 1.7cm; stroke-width: 1.7; }
.catalog-item-name {
  grid-area: name;
  z-index: 2;
  min-width: 0;
  overflow: hidden;
  color: var(--catalog-text);
  font-size: .4cm;
  font-weight: 1000;
  line-height: 1.05;
  overflow-wrap: anywhere;
  hyphens: auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.catalog-price { grid-area: price; z-index: 2; min-width: 0; overflow: hidden; color: var(--catalog-text); font-size: .4cm; font-weight: 1000; line-height: 1; white-space: nowrap; text-overflow: ellipsis; }
.catalog-unit-price { grid-area: unit; z-index: 2; min-width: 0; overflow: hidden; color: var(--catalog-muted); font-size: .3cm; line-height: 1.1; font-weight: 800; overflow-wrap: anywhere; }
.catalog-size { grid-area: size; z-index: 2; min-width: max-content; color: var(--catalog-text); font-size: .4cm; line-height: 1; font-weight: 900; text-align: right; white-space: nowrap; }
.catalog-info-button,
.catalog-check-button { pointer-events: auto; z-index: 4; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.catalog-info-button {
  position: absolute;
  top: .06cm;
  right: .06cm;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: .95cm;
  height: .95cm;
  border: 0;
  border-radius: 50%;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  outline: 0;
  color: var(--catalog-text);
  background: transparent;
}
.catalog-info-button::before {
  content: "";
  grid-area: 1 / 1;
  width: .58cm;
  height: .58cm;
  border: .05cm solid var(--catalog-text);
  border-radius: 50%;
  background: var(--catalog-bg);
  box-shadow: 0 .06cm .16cm var(--catalog-shadow);
}
.catalog-info-glyph {
  grid-area: 1 / 1;
  position: relative;
  display: block;
  width: .15cm;
  height: .29cm;
  z-index: 1;
}
.catalog-info-glyph::before,
.catalog-info-glyph::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: currentColor;
}
.catalog-info-glyph::before { top: 0; width: .11cm; height: .11cm; border-radius: 50%; }
.catalog-info-glyph::after { bottom: 0; width: .09cm; height: .15cm; border-radius: 999px; }
.catalog-info-button.active { color: var(--catalog-button-text); }
.catalog-info-button.active::before { border-color: var(--catalog-blue); background: var(--catalog-blue); }
.catalog-info-button:focus-visible::before { outline: 3px solid var(--catalog-blue); outline-offset: 2px; }
.catalog-check-button {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: start;
  box-sizing: border-box;
  width: .95cm;
  height: .95cm;
  border: 0;
  margin: 0;
  padding: .21cm;
  appearance: none;
  outline: 0;
  background: transparent;
}
.catalog-info-button:focus,
.catalog-check-button:focus { outline: 0; }
.catalog-info-button:focus:not(:focus-visible)::before,
.catalog-check-button:focus:not(:focus-visible) .catalog-checkbox-shape { outline: 0; }
.catalog-check-button:focus-visible .catalog-checkbox-shape { outline: 3px solid var(--catalog-blue); outline-offset: 2px; }
.catalog-checkbox-shape {
  display: grid;
  place-items: center;
  width: .44cm;
  height: .44cm;
  border-radius: .08cm;
  border: .05cm solid var(--catalog-text);
  background: var(--catalog-bg);
  box-shadow: 0 .06cm .16cm var(--catalog-shadow);
}
.catalog-checkbox-icon { width: .34cm; height: .34cm; opacity: 0; stroke-width: 3; }
.catalog-checkbox-icon.catalog-svg-icon { width: .34cm; height: .34cm; stroke-width: 3; }
.catalog-item-card.selected .catalog-checkbox-shape { background: var(--catalog-green); border-color: var(--catalog-green); }
.catalog-item-card.selected .catalog-checkbox-icon { opacity: 1; color: #06120a; }
.catalog-info-overlay,
.catalog-qty-control { position: absolute; z-index: 3; pointer-events: auto; }
.catalog-info-overlay { inset: .15cm; display: grid; align-content: center; gap: .08cm; padding: .16cm; border: 1px solid var(--catalog-border); border-radius: .18cm; background: var(--catalog-overlay); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--catalog-text); text-align: center; font-weight: 900; overflow-y: auto; overflow-wrap: anywhere; hyphens: auto; }
.catalog-info-overlay strong { display: block; max-width: 100%; font-size: .4cm; line-height: 1.05; }
.catalog-info-overlay small { display: block; max-width: 100%; color: var(--catalog-muted); font-size: .3cm; line-height: 1.1; font-weight: 800; }
.catalog-qty-control { left: 0; right: 0; bottom: .15cm; display: grid; grid-template-columns: 1.05cm minmax(0, 1fr) 1.05cm; gap: .12cm; align-items: center; padding: 0; }
.catalog-qty-control button { min-width: 0; height: .93cm; display: grid; place-items: center; box-sizing: border-box; border: 0; border-radius: .18cm; margin: 0; padding: 0; -webkit-appearance: none; appearance: none; color: var(--catalog-button-text); background: var(--catalog-blue); font-size: .54cm; line-height: 0; font-weight: 1000; text-align: center; }
.catalog-qty-control button .catalog-svg-icon { width: .63cm; height: .63cm; stroke-width: 2.6; }
.catalog-qty-control button:first-child { background: var(--catalog-red); color: #fff; }
.catalog-qty-control input { min-width: 0; width: 100%; height: .93cm; box-sizing: border-box; border: 1px solid var(--catalog-border); border-radius: .18cm; margin: 0; padding: 0 .075cm; -webkit-appearance: none; -moz-appearance: textfield; appearance: textfield; color: var(--catalog-text); background: var(--catalog-panel); text-align: center; font-size: .51cm; line-height: .87cm; font-weight: 1000; }
.catalog-qty-control input::-webkit-inner-spin-button,
.catalog-qty-control input::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

.catalog-notification-stage { position: fixed; inset: 0; z-index: 50; pointer-events: none; display: grid; place-items: center; }
.catalog-notification {
  --catalog-notification-accent: var(--catalog-green);
  position: relative;
  width: min(42rem, calc(100vw - 2rem));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--catalog-notification-accent) 60%, var(--catalog-border));
  border-radius: 1rem;
  padding: 1.2rem 1.25rem 1.2rem 1.55rem;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--catalog-notification-accent) 22%, transparent), transparent 42%),
    color-mix(in srgb, var(--catalog-panel) 94%, transparent);
  color: var(--catalog-text);
  box-shadow: 0 1rem 2.6rem -.55rem var(--catalog-shadow), inset .45rem 0 0 var(--catalog-notification-accent);
  pointer-events: auto;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.catalog-notification.big { animation: catalog-pop-in .25s var(--catalog-ease); }
.catalog-notification.compact { width: min(25rem, calc(100vw - 2rem)); padding: .9rem 1rem .9rem 1.25rem; border-radius: .85rem; }
.catalog-notification.success { --catalog-notification-accent: var(--catalog-green); }
.catalog-notification.info,
.catalog-notification.debug { --catalog-notification-accent: var(--catalog-blue); }
.catalog-notification.error,
.catalog-notification.danger,
.catalog-notification.retrying { --catalog-notification-accent: var(--catalog-red); }
.catalog-notification.warning,
.catalog-notification.loading { --catalog-notification-accent: var(--catalog-yellow); }
.catalog-notification h3 { margin: 0 3.4rem .35rem 0; font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.05; font-weight: 1000; }
.catalog-notification p { margin: .25rem 0; color: var(--catalog-text); font-weight: 800; }
.catalog-notification .muted { color: var(--catalog-muted); font-size: .95rem; font-weight: 800; }
.catalog-notification-close {
  position: absolute;
  top: .45rem;
  right: .45rem;
  z-index: 2;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--catalog-border);
  border-radius: 999px;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  background: color-mix(in srgb, var(--catalog-panel-2) 92%, transparent);
  color: var(--catalog-text);
  line-height: 1;
  font-weight: 1000;
  box-shadow: 0 .35rem 1rem -.45rem var(--catalog-shadow);
}
.catalog-notification-close .catalog-svg-icon { display: block; width: 1.15rem; height: 1.15rem; }
.catalog-notification-close:hover,
.catalog-notification-close:focus-visible { border-color: var(--catalog-notification-accent); color: var(--catalog-notification-accent); }
.catalog-notification-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .7rem; }
.catalog-link-button { border: 1px solid var(--catalog-border); border-radius: .75rem; padding: .55rem .75rem; color: var(--catalog-text); background: var(--catalog-panel-2); font-weight: 1000; }
.catalog-purchase-detail-lines { display: grid; gap: .45rem; max-height: min(26vh, 13rem); margin: .75rem 0 .45rem; overflow: auto; overscroll-behavior: contain; }
.catalog-purchase-detail-line { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr) auto auto; align-items: center; gap: .6rem; min-height: 3.4rem; padding: .42rem .55rem; border-radius: .7rem; background: var(--catalog-panel-2); }
.catalog-purchase-detail-line img,
.catalog-purchase-detail-placeholder { width: 2.75rem; height: 2.75rem; border-radius: .55rem; object-fit: contain; background: var(--catalog-bg); }
.catalog-purchase-detail-placeholder { display: grid; place-items: center; color: var(--catalog-muted); font-weight: 1000; }
.catalog-purchase-detail-placeholder .catalog-svg-icon { width: 1.8rem; height: 1.8rem; }
.catalog-purchase-detail-name { min-width: 0; color: var(--catalog-text); font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.05; font-weight: 1000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-purchase-detail-qty { min-width: 2.4rem; color: var(--catalog-muted); font-size: 1.1rem; font-weight: 1000; text-align: right; }
.catalog-purchase-detail-line strong { color: var(--catalog-text); font-size: 1.1rem; white-space: nowrap; }
.catalog-notification.compact .catalog-purchase-detail-lines { max-height: 8rem; margin-top: .6rem; }
.catalog-notification.compact .catalog-purchase-detail-line { grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: .45rem; min-height: 2.75rem; padding: .35rem .45rem; }
.catalog-notification.compact .catalog-purchase-detail-line img,
.catalog-notification.compact .catalog-purchase-detail-placeholder { width: 2.1rem; height: 2.1rem; }
.catalog-notification.compact .catalog-purchase-detail-line strong { grid-column: 2 / -1; justify-self: end; font-size: .95rem; }
.catalog-notification.compact .catalog-purchase-detail-name { font-size: .95rem; }
.catalog-notification.compact .catalog-purchase-detail-qty { min-width: 1.8rem; font-size: .95rem; }
.catalog-purchase-question { margin: .2rem 0 1rem; color: var(--catalog-text); font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.2; font-weight: 900; }
.catalog-checkout-confirm-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: .9rem; align-items: stretch; }
.catalog-confirm-payer-panel,
.catalog-confirm-items-panel { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: .65rem; padding: .85rem; border: 1px solid var(--catalog-border); border-radius: .95rem; background: var(--catalog-panel-2); overflow: hidden; }
.catalog-confirm-items-panel { grid-template-rows: auto minmax(0, 1fr) auto; }
.catalog-confirm-payer-panel h3,
.catalog-confirm-items-panel h3 { margin: 0; color: var(--catalog-muted); font-size: 1rem; font-weight: 1000; text-transform: uppercase; }
.catalog-confirm-payer-card { min-height: 12rem; display: grid; align-content: center; justify-items: center; gap: .45rem; text-align: center; }
.catalog-confirm-payer-avatar { width: min(6.8rem, 34vw); height: min(6.8rem, 34vw); border-radius: 50%; object-fit: cover; background: var(--catalog-bg); box-shadow: 0 .45rem 1.2rem var(--catalog-shadow); }
.catalog-confirm-payer-card strong { max-width: 100%; overflow: hidden; color: var(--catalog-text); font-size: clamp(1.2rem, 2.4vw, 1.75rem); line-height: 1.05; overflow-wrap: anywhere; }
.catalog-confirm-payer-card span:not(.catalog-badge):not(.kiosk-badge) { max-width: 100%; overflow: hidden; color: var(--catalog-muted); font-size: 1.05rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.catalog-confirm-single-item { min-height: 12rem; display: grid; grid-template-rows: minmax(0, 8.5rem) auto auto auto auto; align-content: center; justify-items: center; gap: .35rem; text-align: center; overflow: hidden; }
.catalog-confirm-item-picture-wrap { position: relative; display: grid; place-items: center; width: min(100%, clamp(8rem, 42vw, 10rem)); height: auto; aspect-ratio: 20 / 17; border-radius: 1rem; background: var(--catalog-bg); box-shadow: inset 0 0 0 1px var(--catalog-border); overflow: hidden; }
.catalog-confirm-item-picture { position: absolute; inset: 0; box-sizing: border-box; display: block; width: 100%; height: 100%; padding: .45rem; object-fit: contain; object-position: center; filter: drop-shadow(0 .35rem .55rem var(--catalog-shadow)); }
.catalog-confirm-item-placeholder { display: grid; place-items: center; color: var(--catalog-muted); }
.catalog-confirm-item-placeholder .catalog-svg-icon { width: 4rem; height: 4rem; }
.catalog-confirm-item-picture-wrap .catalog-qty-badge { position: absolute; right: .6rem; bottom: .6rem; display: grid; place-items: center; min-width: 2rem; height: 2rem; border-radius: 999px; padding: 0 .45rem; color: var(--catalog-button-text); background: var(--catalog-blue); font-size: 1rem; font-weight: 1000; }
.catalog-confirm-single-item strong { max-width: 100%; overflow: hidden; color: var(--catalog-text); font-size: clamp(1.2rem, 2.4vw, 1.7rem); line-height: 1.05; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.catalog-confirm-single-item span:not(.catalog-qty-badge) { color: var(--catalog-text); font-size: 1.25rem; font-weight: 1000; }
.catalog-confirm-single-item small { color: var(--catalog-muted); font-size: 1rem; font-weight: 900; }
.catalog-confirm-item-list { min-height: 0; display: grid; gap: .55rem; max-height: min(52vh, 24rem); overflow: auto; overscroll-behavior: contain; }
.catalog-confirm-item-line { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .65rem; align-items: center; min-height: 4.5rem; padding: .45rem .55rem; border-radius: .75rem; background: var(--catalog-panel); }
.catalog-confirm-item-line img,
.catalog-confirm-item-line-placeholder { width: 3.6rem; height: 3.6rem; border-radius: .65rem; object-fit: contain; background: var(--catalog-bg); }
.catalog-confirm-item-line-placeholder { display: grid; place-items: center; color: var(--catalog-muted); }
.catalog-confirm-item-line-placeholder .catalog-svg-icon { width: 2.2rem; height: 2.2rem; }
.catalog-confirm-item-line-text { min-width: 0; display: grid; gap: .18rem; }
.catalog-confirm-item-line-text strong { overflow: hidden; color: var(--catalog-text); font-size: 1.15rem; line-height: 1.05; font-weight: 1000; text-overflow: ellipsis; white-space: nowrap; }
.catalog-confirm-item-line-text small { color: var(--catalog-muted); font-size: .98rem; line-height: 1.1; font-weight: 900; }
.catalog-confirm-item-line-text small strong { overflow: visible; color: var(--catalog-text); font-size: inherit; line-height: inherit; font-weight: 1000; text-overflow: clip; white-space: inherit; }
.catalog-confirm-quantity { margin-top: .75rem; }
.catalog-confirm-quantity .catalog-qty-control,
.catalog-confirm-item-line-quantity .catalog-qty-control { position: static; transform: none; justify-content: center; width: min(100%, 12rem); margin-inline: auto; }
.catalog-confirm-item-line-quantity { grid-column: 1 / -1; margin-top: .2rem; }
.catalog-confirm-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .9rem; border-top: 1px solid var(--catalog-border); padding-top: .85rem; color: var(--catalog-muted); font-weight: 900; }
.catalog-confirm-total strong { color: var(--catalog-green); font-size: 1.6rem; white-space: nowrap; }

.catalog-notification-placeholder { visibility: hidden; pointer-events: none; }
.catalog-notification.big.catalog-shrink-to-compact { transform-origin: top left; animation: catalog-shrink-to-compact 1s var(--catalog-ease) forwards; }
.catalog-compact-notifications .catalog-notification { pointer-events: auto; animation: catalog-slide-in .25s var(--catalog-ease); }
.catalog-compact-notifications .catalog-notification.catalog-fly-away { transform-origin: top left; animation: catalog-fly-to-target 1s var(--catalog-ease) forwards; }

.catalog-popup-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 1rem; background: #0008; }
.catalog-popup { width: min(46rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; border: 1px solid var(--catalog-border); border-radius: 1.3rem; padding: 1.2rem; background: var(--catalog-panel); color: var(--catalog-text); box-shadow: 0 1rem 3rem var(--catalog-shadow); }
.catalog-popup-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.catalog-popup h2 { margin: 0 0 .8rem; font-size: 1.8rem; }
button.catalog-confirm-close-button { display: grid; place-items: center; flex: 0 0 auto; width: 2.55rem; height: 2.55rem; min-height: 2.55rem; border: 1px solid var(--catalog-border); border-radius: 999px; padding: 0; color: var(--catalog-text); background: var(--catalog-panel-2); }
button.catalog-confirm-close-button .catalog-svg-icon { width: 1.45rem; height: 1.45rem; }
.catalog-popup-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.catalog-popup-actions.split { justify-content: space-between; }
.catalog-confirm-popup { display: flex; flex-direction: column; overflow: hidden; }
.catalog-confirm-summary { min-height: 0; flex: 1 1 auto; overflow: hidden; }
.catalog-confirm-summary .catalog-purchase-confirm { min-height: 0; height: 100%; display: flex; flex-direction: column; }
.catalog-confirm-summary .catalog-checkout-confirm-body { min-height: 0; flex: 1 1 auto; overflow: hidden; padding-right: .15rem; }
.catalog-confirm-popup .catalog-popup-actions { flex: 0 0 auto; }
.catalog-primary-button,
.catalog-secondary-button,
.catalog-danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  border: 0;
  border-radius: .9rem;
  padding: .8rem 1rem;
  font-weight: 1000;
  line-height: 1.1;
  text-align: center;
}
.catalog-primary-button { background: var(--catalog-blue); color: var(--catalog-button-text); }
.catalog-secondary-button { background: var(--catalog-panel-2); color: var(--catalog-text); border: 1px solid var(--catalog-border); }
.catalog-danger-button { background: var(--catalog-red); color: var(--catalog-button-text); }
.catalog-confirm-button { background: var(--catalog-green); color: var(--catalog-confirm-text); }
.catalog-primary-button:disabled,
.catalog-secondary-button:disabled,
.catalog-danger-button:disabled,
.catalog-action-button:disabled { opacity: .48; cursor: not-allowed; }

.catalog-form-control {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--catalog-blue) 32%, var(--catalog-border));
  border-radius: .9rem;
  padding: .8rem;
  color: var(--catalog-text);
  background: color-mix(in srgb, var(--catalog-panel) 86%, var(--catalog-bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--catalog-text) 10%, transparent);
  font: inherit;
  font-weight: 800;
}
.catalog-form-control:focus-visible {
  border-color: var(--catalog-blue);
  outline: 3px solid color-mix(in srgb, var(--catalog-blue) 38%, transparent);
  outline-offset: 2px;
}
.catalog-form-control::placeholder { color: var(--catalog-muted); opacity: 1; }

.catalog-modify-summary {
  margin: .85rem 0;
  border-radius: .9rem;
  padding: .8rem;
  background: var(--catalog-panel-2);
  color: var(--catalog-text);
  font-weight: 900;
}
.catalog-modify-lines { display: grid; gap: .65rem; margin-bottom: .8rem; }
.catalog-modify-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  border: 1px solid var(--catalog-border);
  border-radius: .9rem;
  padding: .7rem;
  background: var(--catalog-panel-2);
}
.catalog-modify-line-name { display: grid; gap: .2rem; min-width: 0; color: var(--catalog-text); font-weight: 1000; }
.catalog-modify-line-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-modify-line-name small { color: var(--catalog-muted); font-size: .85rem; font-weight: 900; }
.catalog-modify-qty-control {
  display: grid;
  grid-template-columns: 2.45rem 3.2rem 2.45rem;
  gap: .35rem;
  align-items: center;
}
.catalog-modify-qty-control button {
  display: grid;
  place-items: center;
  height: 2.45rem;
  border: 0;
  border-radius: .7rem;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  color: var(--catalog-button-text);
  background: var(--catalog-blue);
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 1000;
}
.catalog-modify-qty-control button:first-child { background: var(--catalog-red); color: #fff; }
.catalog-modify-qty-control button .catalog-svg-icon { width: 1.35rem; height: 1.35rem; stroke-width: 2.4; }
.catalog-modify-qty-control input {
  min-width: 0;
  width: 100%;
  height: 2.45rem;
  border: 1px solid color-mix(in srgb, var(--catalog-blue) 32%, var(--catalog-border));
  border-radius: .7rem;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: textfield;
  color: var(--catalog-text);
  background: color-mix(in srgb, var(--catalog-panel) 86%, var(--catalog-bg));
  text-align: center;
  font: inherit;
  font-weight: 1000;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--catalog-text) 10%, transparent);
}
.catalog-modify-qty-control input:focus-visible {
  border-color: var(--catalog-blue);
  outline: 3px solid color-mix(in srgb, var(--catalog-blue) 38%, transparent);
  outline-offset: 2px;
}
.catalog-modify-qty-control input::-webkit-inner-spin-button,
.catalog-modify-qty-control input::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

.catalog-action-button {
  position: fixed;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(21.5rem, calc((100vw - 2.5rem) / 2));
  min-width: 9.2rem;
  height: clamp(4.15rem, 8vw, 6.45rem);
  border: 0;
  border-radius: clamp(1rem, 1.6vw, 1.3rem);
  padding: .45rem .75rem;
  color: var(--catalog-button-text);
  background: var(--catalog-blue);
  box-shadow: 0 .7rem 2rem var(--catalog-shadow);
  overflow: hidden;
  font-weight: 1000;
  line-height: 1;
}
.catalog-action-button.is-danger { background: var(--catalog-red); }
.catalog-action-button.is-confirm { background: var(--catalog-green); color: var(--catalog-confirm-text); }
.catalog-action-fill { position: absolute; inset-block: 0; left: 0; width: var(--progress, 0%); background: #fff5; transition: width .12s linear; }
.catalog-action-fill.reverse { left: auto; right: 0; }
.catalog-action-content {
  position: relative;
  z-index: 1;
  max-width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  color: inherit;
  line-height: 1;
  font-weight: 1000;
  text-align: center;
  text-shadow: 0 .1rem .25rem #0004;
  white-space: nowrap;
}
.catalog-action-content span:not([aria-hidden]) { display: inline-block; line-height: 1; }

@media (max-width: 400px) {
  .catalog-popup-backdrop { padding: .5rem; }
  .catalog-popup { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); padding: .7rem; border-radius: 1rem; }
  .catalog-popup h2 { margin-bottom: .45rem; font-size: 1.35rem; line-height: 1.05; }
  body[data-is-kiosk="true"] .catalog-confirm-popup h2 { margin-bottom: .45rem; font-size: 1.35rem; line-height: 1.05; }
  .catalog-purchase-question { margin: .05rem 0 .5rem; font-size: .95rem; line-height: 1.12; }
  .catalog-checkout-confirm-body { grid-template-rows: auto minmax(0, 1fr); gap: .45rem; }
  .catalog-confirm-payer-panel,
  .catalog-confirm-items-panel { gap: .35rem; padding: .5rem; border-radius: .8rem; }
  .catalog-confirm-payer-panel { grid-template-rows: auto auto; align-self: start; }
  .catalog-confirm-payer-panel h3,
  .catalog-confirm-items-panel h3 { font-size: .86rem; }
  .catalog-confirm-payer-card {
    min-height: 0;
    grid-template-columns: 1fr;
    align-content: center;
    justify-items: center;
    gap: .18rem;
    text-align: center;
  }
  .catalog-confirm-payer-avatar { width: 2.8rem; height: 2.8rem; }
  .catalog-confirm-payer-card strong { font-size: 1rem; }
  .catalog-confirm-payer-card span:not(.catalog-badge):not(.kiosk-badge) { font-size: .82rem; }
  .catalog-confirm-item-list { gap: .4rem; max-height: min(22vh, 8.5rem); }
  .catalog-confirm-item-line { grid-template-columns: 3.1rem minmax(0, 1fr); gap: .45rem; min-height: 3.55rem; padding: .35rem .4rem; border-radius: .65rem; }
  .catalog-confirm-item-line img,
  .catalog-confirm-item-line-placeholder { width: 2.8rem; height: 2.8rem; border-radius: .55rem; }
  .catalog-confirm-item-line-text strong { font-size: 1rem; }
  .catalog-confirm-item-line-text small { font-size: .86rem; }
  .catalog-confirm-total { margin-top: .5rem; padding-top: .5rem; }
  .catalog-confirm-total strong { font-size: 1.2rem; }
  .catalog-popup-actions { gap: .5rem; margin-top: .55rem; }
  .catalog-primary-button,
  .catalog-secondary-button,
  .catalog-danger-button { min-height: 2.55rem; padding: .65rem .8rem; border-radius: .75rem; }
  body[data-is-kiosk="true"] .catalog-confirm-popup .catalog-popup-actions { flex-wrap: nowrap; gap: .55rem; margin-top: .55rem; padding-top: .55rem; }
  body[data-is-kiosk="true"] .catalog-confirm-popup .catalog-popup-actions .catalog-secondary-button { flex: 0 1 auto; }
  body[data-is-kiosk="true"] .catalog-confirm-popup .catalog-confirm-button { flex: 1 1 0; max-width: none; min-width: 0; min-height: 3.05rem; }
}
.catalog-action-content .catalog-svg-icon { flex: 0 0 auto; }

@keyframes catalog-pop-in { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes catalog-shrink-to-compact {
  to {
    transform:
      translate(var(--catalog-notification-target-x, calc(50vw - 14rem)), var(--catalog-notification-target-y, calc(-50vh + 7rem)))
      scale(var(--catalog-notification-scale-x, .58), var(--catalog-notification-scale-y, .58));
    opacity: var(--catalog-notification-target-opacity, .92);
  }
}
@keyframes catalog-slide-in { from { transform: translateX(1.5rem); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes catalog-fly-to-target {
  to {
    transform:
      translate(var(--catalog-notification-target-x, 8rem), var(--catalog-notification-target-y, -3.5rem))
      scale(var(--catalog-notification-scale-x, .08), var(--catalog-notification-scale-y, .08));
    opacity: var(--catalog-notification-target-opacity, 0);
  }
}