/**
 * QPC Modal v9.1.0 — V28 Prototype_8 Implementation
 * +10% scaled · Breathable spacing · Portrait cards
 * Charcoal #363030 · Lime #C1E53E · Coral #E63946 · Blue #2D7FF9 · Gold #FFC633
 */

:root {
  /* ── V28 Core Palette ── */
  --qpc-primary:        #363030;
  --qpc-primary-light:  #4a4444;
  --qpc-primary-dark:   #252020;
  --qpc-secondary:      #C1E53E;
  --qpc-secondary-hover:#aed02e;
  --qpc-blue:           #2D7FF9;
  --qpc-coral:          #E63946;
  --qpc-coral-soft:     #D32F3F;
  --qpc-gold:           #FFC633;
  --qpc-gold-soft:      #FFD666;
  --qpc-accent:         #FFB74D;

  /* ── V28 Neutrals ── */
  --qpc-ink:            #363030;
  --qpc-ink-soft:       #4a4545;
  --qpc-ink-muted:      #7a7575;
  --qpc-white:          #fff;
  --qpc-paper:          #fafafa;
  --qpc-paper-warm:     #f5f4f4;
  --qpc-border:         #e0dede;
  --qpc-border-light:   #eeecec;

  /* ── V28 Tokens ── */
  --qpc-radius:         10px;
  --qpc-radius-sm:      8px;
  --qpc-radius-lg:      20px;
  --qpc-radius-btn:     6px;
  --qpc-shadow-sm:      0 1px 3px rgba(54,48,48,.06), 0 1px 2px rgba(54,48,48,.04);
  --qpc-shadow-md:      0 4px 12px rgba(54,48,48,.08), 0 2px 4px rgba(54,48,48,.04);
  --qpc-shadow-lg:      0 12px 40px rgba(54,48,48,.1), 0 4px 12px rgba(54,48,48,.06);
  --qpc-shadow-xl:      0 24px 60px rgba(54,48,48,.12);
  --qpc-transition:     .25s cubic-bezier(.4,0,.2,1);

  /* ── Spacing scale (breathable) ── */
  --qpc-sp-xs:          6px;
  --qpc-sp-sm:          10px;
  --qpc-sp-md:          16px;
  --qpc-sp-lg:          22px;
  --qpc-sp-xl:          28px;
  --qpc-section-gap:    18px;
  --qpc-inner-gap:      10px;

  /* ── Legacy aliases ── */
  --qpc-charcoal:       var(--qpc-primary);
  --qpc-lime:           var(--qpc-secondary);
  --qpc-ink2:           var(--qpc-ink-muted);
  --qpc-font:           'Outfit', system-ui, -apple-system, sans-serif;
  --qpc-mono:           'JetBrains Mono', ui-monospace, monospace;
  --qpc-shadow:         var(--qpc-shadow-xl);
}

/* ── Reset isolation ── */
.qpc-overlay *, .qpc-inline * {
  box-sizing: border-box; margin: 0; padding: 0;
}
.qpc-overlay button, .qpc-inline button {
  cursor: pointer; border: none; background: none;
  font-family: var(--qpc-font);
}

/* ══════════════════════════════
   OVERLAY + MODAL
══════════════════════════════ */
.qpc-overlay {
  position: fixed; inset: 0; z-index: 999999;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}
.qpc-overlay.open {
  opacity: 1; visibility: visible;
}

.qpc-modal-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%; max-width: 1100px;
  max-height: calc(100vh - 24px);
  transform: translateY(16px) scale(.97);
  opacity: 0;
  transition: transform .26s cubic-bezier(.4,0,.2,1), opacity .22s ease;
  position: relative;
}
.qpc-overlay.open .qpc-modal-wrap {
  transform: translateY(0) scale(1); opacity: 1;
}

.qpc-modal {
  flex: 1;
  background: var(--qpc-white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  /* ★ Content-hugging: only max-height as ceiling, no fixed height */
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  transition: max-height .3s ease;
}

/* ── Close button — inside modal top-right ── */
.qpc-close {
  position: absolute; top: 6px; right: 6px; z-index: 10;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none !important;
  background: transparent !important;
  color: var(--qpc-coral) !important;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: none;
  font-size: 15px; line-height: 1;
  margin: 0; padding: 0;
  flex-shrink: 0;
}
.qpc-close:hover,
.qpc-close:focus,
.qpc-close:active,
.qpc-close:focus-visible {
  background: transparent !important;
  color: var(--qpc-coral) !important;
  transform: none;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── Two-column body ── */
.qpc-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* ── Image column ── */
.qpc-img-col {
  background: var(--qpc-paper-warm);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  overflow: hidden;
  min-height: 0;
}
.qpc-img-wrap {
  position: relative;
  width: 100%; max-width: 504px;
  display: flex; align-items: center; justify-content: center;
}
.qpc-img-wrap img {
  max-width: 100%;
  max-height: calc(100vh - 80px);
  object-fit: contain; border-radius: 8px;
  transition: opacity .25s ease;
}
.qpc-img-wrap img.fading { opacity: 0; }
.qpc-img-placeholder {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  color: var(--qpc-ink-muted); font-family: var(--qpc-font);
  font-size: 14px; opacity: .5;
}

/* ── Config column — scrollable ── */
.qpc-config-col {
  padding: 26px 28px 22px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: var(--qpc-section-gap);
  min-height: 0;
}

/* Slim scrollbar */
.qpc-config-col::-webkit-scrollbar { width: 5px; }
.qpc-config-col::-webkit-scrollbar-track { background: transparent; }
.qpc-config-col::-webkit-scrollbar-thumb { background: var(--qpc-border); border-radius: 3px; }
.qpc-config-col::-webkit-scrollbar-thumb:hover { background: #ccc; }
.qpc-config-col { scrollbar-width: thin; scrollbar-color: var(--qpc-border) transparent; }

/* ══════════════════════════════
   INLINE VERSION
══════════════════════════════ */
.qpc-inline {
  display: flex; flex-direction: column;
  gap: var(--qpc-section-gap);
  font-family: var(--qpc-font);
  max-width: 540px;
}

/* ══════════════════════════════
   HERO — name + meta + price left, Try-On right centered
══════════════════════════════ */
.qpc-hero {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.qpc-hero-left {
  flex: 1; min-width: 0;
}
.qpc-hero .qpc-wear-btn {
  flex-shrink: 0; align-self: flex-end; margin-bottom: 9px;
}

.qpc-title {
  font-family: var(--qpc-font) !important;
  font-size: 22px !important; font-weight: 800 !important;
  color: var(--qpc-primary) !important;
  line-height: 1.2 !important;
}
.qpc-meta {
  font-family: var(--qpc-font);
  font-size: 13px; color: var(--qpc-ink-muted);
  margin-top: 2px; margin-bottom: 6px;
}
/* Modal-scoped: beat theme h2 overrides */
.qpc-overlay .qpc-modal h2.qpc-title {
  font-size: 20px !important;
  line-height: 1.2 !important;
}
.qpc-overlay .qpc-modal .qpc-meta {
  font-size: 12px !important;
  line-height: 1.2 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Price row */
.qpc-price-row {
  display: flex; align-items: center; gap: 10px;
}
.qpc-price {
  font-family: var(--qpc-font);
  font-size: 24px; font-weight: 800;
  color: var(--qpc-primary);
  transition: color .2s;
}
.qpc-price.flash { color: var(--qpc-coral); }
.qpc-express-badge {
  font-family: var(--qpc-mono);
  font-size: 10px; font-weight: 700;
  background: var(--qpc-gold);
  color: var(--qpc-primary);
  padding: 2px 7px; border-radius: 20px;
  letter-spacing: .5px;
  white-space: nowrap; flex-shrink: 0;
  display: inline-flex; align-items: center;
  line-height: 1.2;
}

/* ══════════════════════════════
   SECTIONS + LABELS — breathable
══════════════════════════════ */
.qpc-section {
  display: flex; flex-direction: column;
  gap: var(--qpc-inner-gap);
}
.qpc-section-head {
  display: flex; align-items: center;
  justify-content: space-between;
}
.qpc-label {
  font-family: var(--qpc-mono);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--qpc-ink-soft);
}
.qpc-color-name {
  font-family: var(--qpc-font);
  font-size: 13px; color: var(--qpc-ink-soft);
  font-weight: 600;
}

/* ══════════════════════════════
   DEPARTMENT TABS — pill capsule (+10%)
══════════════════════════════ */
.qpc-tabs {
  display: inline-flex; gap: 2px; align-items: center;
  background: var(--qpc-paper-warm);
  border: 1.5px solid var(--qpc-border-light);
  border-radius: 50px;
  padding: 3px;
}
.qpc-tab {
  font-family: var(--qpc-font) !important;
  font-size: 14px !important; font-weight: 500 !important;
  padding: 8px 20px; border-radius: 50px;
  color: var(--qpc-ink-muted) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: all .2s;
}
.qpc-tab:hover {
  color: var(--qpc-primary) !important;
}
.qpc-tab.active {
  background: var(--qpc-white) !important;
  color: var(--qpc-primary) !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  box-shadow: 0 2px 8px rgba(54,48,48,.12);
}

/* ══════════════════════════════
   GARMENT CARDS — PORTRAIT (+10%)
   110px wide × auto tall (portrait ratio)
══════════════════════════════ */
.qpc-cards {
  display: flex; flex-wrap: nowrap;
  gap: 10px; overflow-x: auto; padding-bottom: 4px;
  margin-top: 3px; padding-top: 3px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch; touch-action: auto;
}
.qpc-cards::-webkit-scrollbar { display: none; }

.qpc-pcard {
  flex: 0 0 auto; width: 100px; border-radius: 12px;
  border: 1.5px solid transparent;
  padding: 8px 8px 6px;
  cursor: pointer; transition: all .2s;
  background: var(--qpc-paper-warm); text-align: center;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: 3px; position: relative;
}
.qpc-pcard:hover {
  background: var(--qpc-paper);
  box-shadow: var(--qpc-shadow-sm);
}
.qpc-pcard.selected {
  border-color: var(--qpc-primary) !important;
  background: var(--qpc-white);
  box-shadow: var(--qpc-shadow-md);
}
.qpc-pcard.selected::after {
  content: '';
  position: absolute; bottom: -1px; left: 10px; right: 10px;
  height: 3px; border-radius: 3px 3px 0 0;
  background: var(--qpc-secondary);
}
.qpc-pcard-img {
  width: 56px; height: 46px; margin: 0 auto 2px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: 6px;
}
.qpc-pcard-img img { width: 100%; height: 100%; object-fit: cover; }
.qpc-pcard-name {
  font-family: var(--qpc-font);
  font-size: 11px; font-weight: 600; color: var(--qpc-ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; line-height: 1.2;
}
.qpc-pcard.selected .qpc-pcard-name {
  color: var(--qpc-primary); font-weight: 800;
}
.qpc-pcard-price {
  font-family: var(--qpc-font);
  font-size: 12px; font-weight: 600;
  color: var(--qpc-ink-muted); margin-top: 0;
}
.qpc-pcard.selected .qpc-pcard-price {
  color: var(--qpc-primary);
}

/* ══════════════════════════════
   COLOR SWATCHES — 32px (+10%)
══════════════════════════════ */
.qpc-swatches { display: flex; flex-wrap: wrap; gap: 8px; padding: 3px; }
.qpc-swatch {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
  transition: all .2s; position: relative; flex-shrink: 0;
}
.qpc-swatch:hover { transform: scale(1.1); }
.qpc-swatch.selected {
  border-color: var(--qpc-primary) !important;
  box-shadow: 0 0 0 2px var(--qpc-secondary), inset 0 0 0 1px rgba(0,0,0,.1);
  transform: scale(1.1);
}
.qpc-swatch.light.selected {
  border-color: var(--qpc-primary) !important;
}
.qpc-swatch.disabled { opacity: .3; cursor: not-allowed; transform: none; }

/* ══════════════════════════════
   SIZE GUIDE — coral accent (+10%)
══════════════════════════════ */
.qpc-size-guide {
  font-family: var(--qpc-font);
  font-size: 13px; font-weight: 600;
  color: var(--qpc-coral);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color .2s;
  cursor: pointer;
}
.qpc-size-guide:hover {
  color: var(--qpc-primary); text-decoration: underline;
}

/* ══════════════════════════════
   SIZE BUTTONS — 40×40 (+10%)
══════════════════════════════ */
.qpc-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.qpc-size-btn {
  font-family: var(--qpc-font) !important;
  font-size: 13px !important; font-weight: 600 !important;
  min-width: 38px; height: 38px; padding: 0 10px;
  border-radius: var(--qpc-radius-btn) !important;
  border: 1.5px solid var(--qpc-border) !important;
  color: var(--qpc-ink) !important; background: var(--qpc-white) !important;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.qpc-size-btn:hover:not(.disabled) {
  border-color: var(--qpc-primary) !important;
  color: var(--qpc-primary) !important;
}
.qpc-size-btn.selected {
  background: var(--qpc-primary) !important;
  border-color: var(--qpc-primary) !important;
  color: var(--qpc-white) !important;
}
.qpc-size-btn.disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

/* ══════════════════════════════
   EXPRESS CARD — prototype_8 (+10%)
══════════════════════════════ */
.qpc-express-wrap {
  overflow: visible;
  /* ★ Visible by default — add .qpc-express-hidden to collapse */
  max-height: 120px; opacity: 1;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, margin .3s ease;
  margin-top: 0; margin-bottom: 0;
}
.qpc-express-wrap.qpc-express-hidden {
  overflow: hidden;
  max-height: 0; opacity: 0;
  margin: 0;
}

.qpc-express {
  border-radius: var(--qpc-radius);
  overflow: visible; width: 100%;
  border: 1.5px solid var(--qpc-border);
  background: var(--qpc-paper);
  transition: all .2s;
}
.qpc-express.active {
  background: linear-gradient(135deg, #fff0f0, #fff5eb);
  border-color: var(--qpc-coral);
}
.qpc-express-row {
  display: flex; align-items: center;
  padding: 10px 12px; gap: 8px;
  width: 100%; overflow: hidden;
}
.qpc-express-left {
  display: flex; align-items: center;
  gap: 8px; flex: 1 1 0%; min-width: 0; overflow: hidden;
}
.qpc-express-icon {
  font-size: 15px; width: 32px; height: 32px;
  border-radius: 8px; display: flex;
  align-items: center; justify-content: center;
  background: rgba(230,57,70,.1); flex-shrink: 0;
}
.qpc-express.active .qpc-express-icon {
  background: var(--qpc-coral); color: var(--qpc-white);
}
.qpc-express-info { flex: 1 1 0%; min-width: 0; overflow: hidden; }
.qpc-express-label { display: none; }
.qpc-express-title {
  font-family: var(--qpc-font); font-size: 12px; font-weight: 700;
  color: var(--qpc-ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; display: block;
}
.qpc-express-desc {
  font-family: var(--qpc-mono);
  font-size: 10px; color: var(--qpc-ink-muted);
  white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; display: block;
}
.qpc-express.active .qpc-express-desc { color: var(--qpc-coral); }

/* Express unavailable state — greyed out with diagonal pattern */
.qpc-express.qpc-express-unavailable {
  opacity: .5;
  border-style: dashed;
}
.qpc-express.qpc-express-unavailable .qpc-express-icon {
  background: rgba(0,0,0,.05);
}
.qpc-express.qpc-express-unavailable .qpc-express-desc {
  color: var(--qpc-ink-muted);
  font-style: italic;
}
.qpc-express.qpc-express-unavailable .qpc-toggle-track {
  opacity: .4;
  cursor: not-allowed;
}

.qpc-express-right {
  display: flex !important; align-items: center;
  gap: 8px; flex: 0 0 auto; white-space: nowrap;
}
.qpc-express-fee {
  font-family: var(--qpc-mono);
  font-size: 13px; font-weight: 800;
  color: var(--qpc-ink-muted); white-space: nowrap;
}
.qpc-express.active .qpc-express-fee { color: var(--qpc-coral); }

/* Toggle — coral, 42×24 (+10%) */
.qpc-toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.qpc-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.qpc-toggle-track {
  position: absolute; inset: 0; background: var(--qpc-border);
  border-radius: 24px; transition: background .3s; cursor: pointer;
}
.qpc-toggle-track::before {
  content: ''; position: absolute;
  width: 18px; height: 18px; left: 3px; top: 3px;
  background: var(--qpc-white); border-radius: 50%;
  transition: transform .3s; box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.qpc-toggle input:checked + .qpc-toggle-track { background: var(--qpc-coral); }
.qpc-toggle input:checked + .qpc-toggle-track::before { transform: translateX(18px); }

/* ══════════════════════════════
   ACTION BAR — QTY 40×40, ATC 44px (+10%)
══════════════════════════════ */
.qpc-action-bar {
  display: flex; align-items: center;
  gap: 10px; margin-top: 6px;
}

/* Qty — locked dimensions, theme-proof */
.qpc-modal .qpc-qty,
.qpc-inline .qpc-qty {
  display: flex !important; align-items: center !important;
  flex: 0 0 auto !important; width: auto !important;
  max-width: 120px !important;
}
.qpc-modal .qpc-qty-btn,
.qpc-inline .qpc-qty-btn {
  width: 40px !important; min-width: 40px !important; max-width: 40px !important;
  height: 40px !important; min-height: 40px !important; max-height: 40px !important;
  border: 1.5px solid var(--qpc-border) !important;
  background: var(--qpc-paper) !important;
  font-family: var(--qpc-font) !important;
  font-size: 16px !important; font-weight: 700 !important;
  color: var(--qpc-ink-soft) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: all .2s;
  padding: 0 !important; margin: 0 !important;
  flex: 0 0 40px !important; box-sizing: border-box !important;
  line-height: 1 !important;
}
.qpc-modal .qpc-qty-btn:first-child,
.qpc-inline .qpc-qty-btn:first-child {
  border-radius: var(--qpc-radius-btn) 0 0 var(--qpc-radius-btn) !important;
}
.qpc-modal .qpc-qty-btn:last-child,
.qpc-inline .qpc-qty-btn:last-child {
  border-radius: 0 var(--qpc-radius-btn) var(--qpc-radius-btn) 0 !important;
}
.qpc-qty-btn:hover {
  border-color: var(--qpc-primary) !important;
  color: var(--qpc-primary) !important;
  background: var(--qpc-paper-warm) !important;
}
.qpc-modal input.qpc-qty-val,
.qpc-inline input.qpc-qty-val,
input#qpcQty {
  width: 40px !important; min-width: 40px !important; max-width: 40px !important;
  height: 40px !important; min-height: 40px !important; max-height: 40px !important;
  text-align: center !important;
  font-family: var(--qpc-font) !important;
  font-size: 14px !important; font-weight: 700 !important;
  color: var(--qpc-ink) !important;
  border: none !important;
  border-top: 1.5px solid var(--qpc-border) !important;
  border-bottom: 1.5px solid var(--qpc-border) !important;
  border-left: 0 !important; border-right: 0 !important;
  background: var(--qpc-white) !important; outline: none !important;
  border-radius: 0 !important;
  -moz-appearance: textfield !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  padding: 0 !important; margin: 0 !important;
  flex: 0 0 40px !important; box-sizing: border-box !important;
  line-height: 1 !important;
}
input#qpcQty::-webkit-outer-spin-button,
input#qpcQty::-webkit-inner-spin-button {
  -webkit-appearance: none !important; margin: 0 !important; display: none !important;
}

/* ══════════════════════════════
   ADD TO CART — green gradient, 44px (+10%)
══════════════════════════════ */
.qpc-add-btn {
  flex: 1; height: 48px !important; min-height: 48px !important; max-height: 48px !important;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  color: var(--qpc-white) !important;
  border-radius: var(--qpc-radius) !important;
  border: none !important;
  font-family: var(--qpc-font) !important;
  font-size: 20px !important; font-weight: 700 !important;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 16px rgba(22,163,74,.3);
  letter-spacing: .3px;
  transition: all .25s ease; min-width: 0;
  padding: 0 16px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
.qpc-add-btn:hover:not(:disabled) {
  box-shadow: 0 8px 32px rgba(22,163,74,.45);
  transform: translateY(-1px);
}
.qpc-add-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(22,163,74,.3);
}
.qpc-add-btn:disabled { opacity: .45; cursor: not-allowed; }
.qpc-add-btn.success {
  background: linear-gradient(135deg, #16a34a, #0d7a3a) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  animation: qpcSuccessPulse 0.4s ease;
}
@keyframes qpcSuccessPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ══════════════════════════════
   WEAR IT / TRY-ON — coral outline
══════════════════════════════ */
.qpc-wear-btn {
  height: 44px; padding: 0 20px;
  border-radius: var(--qpc-radius) !important;
  border: none !important;
  /* ★ Only image+size get !important — position must stay unlocked for animation */
  background-color: transparent;
  background-image: linear-gradient(135deg, #E63946 0%, #ff6b81 50%, #FFC633 100%) !important;
  background-size: 200% 200% !important;
  background-repeat: no-repeat;
  background-position: 0% 50%;
  animation-name: qpcWearShimmer !important;
  animation-duration: 3s !important;
  animation-timing-function: ease !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
  animation-fill-mode: none !important;
  -webkit-animation-name: qpcWearShimmer !important;
  -webkit-animation-duration: 3s !important;
  -webkit-animation-timing-function: ease !important;
  -webkit-animation-iteration-count: infinite !important;
  -webkit-animation-play-state: running !important;
  color: var(--qpc-white) !important;
  font-family: var(--qpc-font) !important;
  font-size: 14px !important; font-weight: 700 !important;
  display: flex; align-items: center; gap: 0;
  white-space: nowrap;
  position: relative; overflow: hidden;
  letter-spacing: .3px;
  box-shadow: 0 2px 12px rgba(230,57,70,.35) !important;
  transition: transform .2s, box-shadow .2s !important;
  -webkit-transition: transform .2s, box-shadow .2s !important;
  cursor: pointer;
}
.qpc-wear-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(230,57,70,.45) !important;
}
.qpc-wear-btn:active {
  transform: translateY(0);
}
/* Hide icon */
.qpc-wear-btn svg { display: none !important; }

/* Shimmer sweep overlay */
.qpc-wear-btn::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%) !important;
  animation: qpcWearSweep 2.5s ease-in-out infinite !important;
  pointer-events: none;
}

/* Progress bar — hidden by default, only shows during tryon loading */
.qpc-wear-btn::before {
  content: ''; position: absolute; inset: 0;
  width: 0; height: 100%;
  background: linear-gradient(135deg, var(--qpc-primary) 0%, var(--qpc-primary-dark) 100%);
  border-radius: inherit; transition: none;
  opacity: 0;
}
.qpc-wear-btn.tryon-loading {
  animation-name: none !important;
  -webkit-animation-name: none !important;
  background-color: var(--qpc-coral) !important; background-image: none !important; background-size: 100% 100% !important;
  color: var(--qpc-white) !important;
  box-shadow: 0 4px 16px rgba(54,48,48,.3) !important;
}
.qpc-wear-btn.tryon-loading::after { animation-name: none !important; opacity: 0; }
.qpc-wear-btn.tryon-loading::before {
  opacity: 1;
  animation: qpcTryonBar 1.2s cubic-bezier(.25,.46,.45,.94) forwards;
}
.qpc-wear-btn.tryon-done {
  animation-name: none !important;
  -webkit-animation-name: none !important;
  background-color: var(--qpc-primary) !important; background-image: none !important; background-size: 100% 100% !important;
  color: var(--qpc-white) !important;
  box-shadow: 0 4px 16px rgba(54,48,48,.3) !important;
}
.qpc-wear-btn.tryon-done::after { animation-name: none !important; opacity: 0; }
.qpc-wear-btn.tryon-done::before { width: 100%; opacity: 1; }
.qpc-wear-btn.tryon-reset::before {
  opacity: 1;
  animation: qpcTryonBarOut .5s ease forwards;
}
.qpc-wear-btn.tryon-reset::after { animation: qpcWearSweep 2.5s ease-in-out infinite !important; opacity: 1; }
.qpc-wear-btn.tryon-reset {
  animation-name: qpcWearShimmer !important;
  animation-duration: 3s !important;
  animation-timing-function: ease !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
}

@keyframes qpcWearShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes qpcWearSweep {
  0%   { left: -100%; opacity: 0; }
  20%  { opacity: 1; }
  100% { left: 140%; opacity: 0; }
}
@keyframes qpcTryonBar { 0% { width: 0 } 100% { width: 100% } }
@keyframes qpcTryonBarOut { 0% { width: 100%; opacity: 1 } 100% { width: 100%; opacity: 0 } }

/* ★ High-specificity shimmer lock — beats any theme overrides */
.qpc-overlay .qpc-wear-btn,
.qpc-inline .qpc-wear-btn,
.qpc-overlay .qpc-modal .qpc-wear-btn {
  background-color: transparent;
  background-image: linear-gradient(135deg, #E63946 0%, #ff6b81 50%, #FFC633 100%) !important;
  background-size: 200% 200% !important;
  background-repeat: no-repeat;
  background-position: 0% 50%;
  animation-name: qpcWearShimmer !important;
  animation-duration: 3s !important;
  animation-timing-function: ease !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
  animation-fill-mode: none !important;
  border: none !important;
  border-radius: var(--qpc-radius) !important;
  transition: transform .2s, box-shadow .2s !important;
  -webkit-transition: transform .2s, box-shadow .2s !important;
}
.qpc-overlay .qpc-wear-btn::after,
.qpc-inline .qpc-wear-btn::after {
  content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important;
  width: 60% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%) !important;
  animation: qpcWearSweep 2.5s ease-in-out infinite !important;
}
.qpc-overlay .qpc-wear-btn.tryon-loading,
.qpc-overlay .qpc-wear-btn.tryon-done {
  animation-name: none !important;
  -webkit-animation-name: none !important;
  background-size: 100% 100% !important;
}
.qpc-overlay .qpc-wear-btn.tryon-loading::after,
.qpc-overlay .qpc-wear-btn.tryon-done::after {
  animation: none !important; opacity: 0 !important;
}

/* ══════════════════════════════
   SPINNER + ANIMATIONS
══════════════════════════════ */
.qpc-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--qpc-border); border-top-color: var(--qpc-primary);
  border-radius: 50%; animation: qpcSpin .7s linear infinite;
}
.qpc-spinner-sm {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: var(--qpc-white);
  border-radius: 50%; animation: qpcSpin .7s linear infinite;
}
@keyframes qpcSpin { to { transform: rotate(360deg); } }

/* ── Shake validation ── */
@keyframes qpcShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}
.qpc-shake {
    animation: qpcShake 0.5s ease-in-out;
    border-color: var(--qpc-coral) !important;
    box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.35) !important;
}
.qpc-shake.qpc-swatch {
    outline: 3px solid var(--qpc-coral) !important;
    outline-offset: 1px;
    box-shadow: 0 0 0 5px rgba(230, 57, 70, 0.2) !important;
}
.qpc-shake.qpc-size-btn {
    border-color: var(--qpc-coral) !important;
    color: var(--qpc-coral) !important;
    box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.35) !important;
}
.qpc-shake.qpc-pcard {
    border-color: var(--qpc-coral) !important;
    box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.35) !important;
}

.qpc-loading {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 24px 0;
}
.qpc-empty { font-size: 14px; color: var(--qpc-ink-muted); padding: 20px 0; text-align: center; width: 100%; }

/* Feedback */
.qpc-feedback {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-radius: var(--qpc-radius); background: #f0fdf4; border: 1.5px solid #86efac;
  font-family: var(--qpc-font); font-size: 14px; animation: qpcSlideIn .2s ease;
}
.qpc-feedback--warn { background: #fef2f2; border-color: #fca5a5; }
.qpc-feedback-icon { font-size: 16px; font-weight: 700; flex-shrink: 0; }
.qpc-feedback-msg { flex: 1; color: var(--qpc-ink); }
.qpc-feedback-link { font-size: 13px; font-weight: 700; color: var(--qpc-primary); text-decoration: underline; white-space: nowrap; }
.qpc-feedback-dismiss { font-size: 16px; color: var(--qpc-ink-muted); flex-shrink: 0; padding: 0 4px; }
.qpc-feedback-dismiss:hover { color: var(--qpc-ink); }
@keyframes qpcSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Utilities */
.qpc-hidden { display: none !important; }

/* ══════════════════════════════
   PRODUCT CARD (shop/archive)
══════════════════════════════ */
.qpc-card-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 8px;
}
.qpc-card-price {
  font-family: var(--qpc-mono); font-size: 14px; font-weight: 700;
  color: var(--qpc-primary);
}
.qpc-card-wear {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--qpc-font) !important;
  font-size: 11px !important; font-weight: 700 !important;
  padding: 5px 10px;
  background: var(--qpc-secondary) !important;
  color: var(--qpc-primary) !important;
  border-radius: 20px; cursor: pointer;
  transition: background .15s; white-space: nowrap; border: none;
}
.qpc-card-wear:hover { background: var(--qpc-secondary-hover) !important; }

/* ══════════════════════════════
   RESPONSIVE — Adaptive
══════════════════════════════ */

/* Large screens */
@media (min-height: 900px) {
  .qpc-modal-wrap { max-height: calc(100vh - 24px); }
  .qpc-modal      { max-height: calc(100vh - 24px); }
}

/* Medium screens */
@media (min-height: 700px) and (max-height: 899px) {
  .qpc-modal-wrap { max-height: calc(100vh - 20px); }
  .qpc-modal      { max-height: calc(100vh - 20px); }
  .qpc-config-col { padding: 22px 24px 18px; gap: 14px; }
  .qpc-pcard { width: 90px; padding: 14px 8px 10px; }
  .qpc-pcard-img { width: 50px; height: 62px; }
  .qpc-tab { padding: 7px 16px; font-size: 13px !important; }
}

/* Shorter screens */
@media (max-height: 699px) {
  .qpc-overlay    { padding: 8px; }
  .qpc-modal-wrap { max-height: calc(100vh - 16px); }
  .qpc-modal      { max-height: calc(100vh - 16px); }
  .qpc-config-col { padding: 18px 20px 14px; gap: 12px; }
  .qpc-img-col    { padding: 16px; }
  .qpc-title      { font-size: 19px !important; }
  .qpc-price      { font-size: 22px; }
  .qpc-pcard { width: 84px; padding: 12px 6px 8px; }
  .qpc-pcard-img { width: 46px; height: 56px; }
  .qpc-pcard-name { font-size: 10px; }
  .qpc-pcard-price { font-size: 10px; }
  .qpc-swatch { width: 28px; height: 28px; }
  .qpc-size-btn { min-width: 34px; height: 34px; font-size: 12px !important; }
  .qpc-modal .qpc-qty-btn,
  .qpc-inline .qpc-qty-btn { width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; font-size: 14px !important; flex: 0 0 34px !important; }
  .qpc-modal input.qpc-qty-val,
  .qpc-inline input.qpc-qty-val,
  input#qpcQty { width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; font-size: 13px !important; flex: 0 0 34px !important; }
  .qpc-add-btn { height: 42px !important; font-size: 17px !important; }
  .qpc-tab { padding: 6px 14px; font-size: 12px !important; }
  .qpc-express-row { padding: 8px 10px; }
  .qpc-express-icon { width: 28px; height: 28px; font-size: 13px; }
}

/* ══════════════════════════════
   MOBILE — full-screen scrollable product page
   Big square image → config flows below → user scrolls everything
══════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --qpc-section-gap: 16px;
    --qpc-inner-gap: 10px;
  }

  /* Overlay: full screen, no padding */
  .qpc-overlay { align-items: stretch; padding: 0; }

  /* Wrap: full viewport, no max-height constraint */
  .qpc-modal-wrap {
    flex-direction: column; align-items: stretch; gap: 0;
    width: 100%; height: 100vh; height: 100dvh;
    max-height: none;
  }

  /* Close: float on top of image */
  .qpc-close {
    position: fixed; top: 10px; right: 10px; z-index: 10001;
    background: rgba(0,0,0,.45) !important;
    color: var(--qpc-white);
    width: 36px; height: 36px;
  }

  /* Modal: full screen, scrolls as one page */
  .qpc-modal {
    border-radius: 0;
    height: 100vh; height: 100dvh;
    max-height: none;
    display: flex; flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Body: single column, natural flow (NO overflow hidden) */
  .qpc-body {
    display: flex;
    flex-direction: column;
    flex: none;
    overflow: visible;
  }

  /* ── IMAGE: big square, full width ── */
  .qpc-img-col {
    display: flex !important;
    align-items: center; justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 16px;
    background: var(--qpc-paper-warm);
    flex-shrink: 0;
    overflow: hidden;
  }
  .qpc-img-wrap {
    max-width: 100%; max-height: 100%;
    display: flex; align-items: center; justify-content: center;
  }
  .qpc-img-wrap img {
    max-width: 92%; max-height: 92%;
    object-fit: contain; border-radius: 8px;
  }

  /* ── CONFIG: natural flow, no independent scroll ── */
  .qpc-config-col {
    padding: 18px 20px 28px;
    overflow: visible;
    gap: var(--qpc-section-gap);
    flex: none;
  }

  /* Action bar: static in flow */
  .qpc-action-bar {
    flex-wrap: nowrap !important;
    position: static;
    background: var(--qpc-white);
    margin: 0;
    padding: 14px 0 0;
    box-shadow: none;
  }

  /* Sizing */
  .qpc-modal .qpc-qty { max-width: 108px !important; }
  .qpc-modal .qpc-qty-btn,
  .qpc-inline .qpc-qty-btn { width: 36px !important; min-width: 36px !important; max-width: 36px !important; height: 38px !important; font-size: 15px !important; flex: 0 0 36px !important; }
  .qpc-modal input.qpc-qty-val,
  .qpc-inline input.qpc-qty-val,
  input#qpcQty { width: 36px !important; min-width: 36px !important; max-width: 36px !important; height: 38px !important; font-size: 14px !important; flex: 0 0 36px !important; }
  .qpc-add-btn { flex: 1 !important; height: 48px; font-size: 20px !important; border-radius: var(--qpc-radius) !important; min-width: 0 !important; }
  .qpc-express-badge { font-size: 9px !important; padding: 2px 5px !important; }
  .qpc-title { font-size: 22px !important; }
  .qpc-price { font-size: 24px; }
  .qpc-label { font-size: 12px !important; }
  .qpc-color-name { font-size: 14px !important; }
  .qpc-swatch { width: 36px; height: 36px; }
  .qpc-swatches { gap: 10px; }
  .qpc-size-btn { min-width: 44px; height: 44px; font-size: 14px !important; border-radius: var(--qpc-radius-btn) !important; }
  .qpc-sizes { gap: 8px; }
  .qpc-size-guide { font-size: 14px !important; }
  .qpc-tab { padding: 8px 16px; font-size: 14px !important; }
  .qpc-pcard { width: 100px; padding: 14px 8px 10px; }
  .qpc-pcard-img { width: 52px; height: 64px; }
  .qpc-pcard-name { font-size: 11px; }
  .qpc-pcard-price { font-size: 11px; }
  .qpc-express-row { padding: 12px 14px; gap: 10px; }
  .qpc-express-icon { width: 34px; height: 34px; font-size: 16px; }
  .qpc-express-title { font-size: 13px; }
  .qpc-express-desc { font-size: 11px; }
  .qpc-express-fee { font-size: 14px; }
  .qpc-express-right { display: flex !important; flex: 0 0 auto; }
  .qpc-toggle { width: 44px; height: 26px; }
  .qpc-toggle-track::before { width: 20px; height: 20px; }
  .qpc-toggle input:checked + .qpc-toggle-track::before { transform: translateX(18px); }
  .qpc-wear-btn { font-size: 14px !important; padding: 0 16px; }
}

/* ── Phone small (≤480px) ── */
@media (max-width: 480px) {
  .qpc-hero .qpc-wear-btn span { display: none; }
  .qpc-hero .qpc-wear-btn { padding: 0 12px; }
  .qpc-config-col { padding: 16px 16px 24px; }
  .qpc-action-bar { padding: 12px 0 0; }
  .qpc-modal .qpc-qty { max-width: 96px !important; }
  .qpc-modal .qpc-qty-btn,
  .qpc-inline .qpc-qty-btn { width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 36px !important; flex: 0 0 32px !important; }
  .qpc-modal input.qpc-qty-val,
  .qpc-inline input.qpc-qty-val,
  input#qpcQty { width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 36px !important; flex: 0 0 32px !important; }
  .qpc-add-btn { height: 44px !important; font-size: 18px !important; }
}