/**
 * QPC Modal v9.1.0 — V28 Design System
 * Charcoal #363030 · Lime #C1E53E · Coral #E63946 · Blue #2D7FF9 · Gold #FFC633
 */

:root {
  --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-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;
  --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);
  --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;
  --qpc-font:           'Outfit', system-ui, -apple-system, sans-serif;
  --qpc-mono:           'JetBrains Mono', ui-monospace, monospace;
}

.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); }

.qpc-overlay {
  position: fixed; inset: 0; z-index: 999999;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
  will-change: opacity;
}
@supports (backdrop-filter: blur(2px)) {
  .qpc-overlay { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
}
.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;
  will-change: transform, opacity;
}
.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);
  max-height: calc(100vh - 24px);
  display: flex; flex-direction: column;
  transition: max-height .3s ease;
}

.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; 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;
}

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

.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;
}

.qpc-config-col {
  padding: 26px 28px 22px; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--qpc-section-gap); min-height: 0;
}
.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; }

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

.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: 4px;
}
.qpc-short-desc {
  font-family: var(--qpc-font); font-size: 13px; color: var(--qpc-ink-muted);
  line-height: 1.5; margin-bottom: 6px;
}
.qpc-short-desc:empty { display: none; }

.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: 0 !important; }

.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;
}

.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; }
.qpc-sku-tag {
  font-family: var(--qpc-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .5px; color: var(--qpc-ink-muted);
  background: var(--qpc-paper-warm); padding: 2px 7px;
  border-radius: 4px; margin-left: 8px; vertical-align: middle;
  display: inline-block;
}

.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);
}

.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); }
.qpc-pcard.selected .qpc-pcard-price { color: var(--qpc-primary); }

.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; }

.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; }

.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; }

.qpc-express-wrap {
  overflow: visible; max-height: 120px; opacity: 1;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, margin .3s ease;
}
.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-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); }
.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); }

.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); }

.qpc-action-bar { display: flex; align-items: center; gap: 10px; margin-top: 6px; }

.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; }

.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); } }

.qpc-wear-btn {
  height: 44px; padding: 0 20px;
  border-radius: var(--qpc-radius) !important; border: none !important;
  background-image: linear-gradient(135deg, #E63946 0%, #ff6b81 50%, #FFC633 100%) !important;
  background-size: 200% 200% !important; background-color: transparent;
  animation: qpcWearShimmer 3s ease infinite !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;
  cursor: pointer;
}
.qpc-wear-btn svg { display: none !important; }
.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); }

.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;
}

.qpc-wear-btn[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: #363030; color: #fff;
  font-size: 11px; font-family: var(--qpc-font); white-space: nowrap;
  padding: 4px 10px; border-radius: 6px;
  pointer-events: none; opacity: 0; transition: opacity .15s ease;
  animation: none !important; width: auto; height: auto;
  border: none; box-shadow: none;
}
.qpc-wear-btn[data-tooltip]:hover::before { opacity: 1; }

.qpc-wear-btn.tryon-loading {
  animation: none !important; background-color: var(--qpc-coral) !important; background-image: none !important;
  background-size: 100% 100% !important; color: var(--qpc-white) !important;
}
.qpc-wear-btn.tryon-loading::after { animation: none !important; opacity: 0; }
.qpc-wear-btn.tryon-done {
  animation: none !important; background-color: var(--qpc-primary) !important; background-image: none !important;
  background-size: 100% 100% !important; color: var(--qpc-white) !important;
}
.qpc-wear-btn.tryon-done::after { animation: none !important; opacity: 0; }

.qpc-overlay .qpc-wear-btn, .qpc-inline .qpc-wear-btn {
  background-image: linear-gradient(135deg, #E63946 0%, #ff6b81 50%, #FFC633 100%) !important;
  background-size: 200% 200% !important;
  animation: qpcWearShimmer 3s ease infinite !important;
  border: none !important; border-radius: var(--qpc-radius) !important;
}
.qpc-overlay .qpc-wear-btn.tryon-loading, .qpc-overlay .qpc-wear-btn.tryon-done,
.qpc-inline .qpc-wear-btn.tryon-loading,  .qpc-inline .qpc-wear-btn.tryon-done {
  animation: none !important; background-size: 100% 100% !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; } }

.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); } }

@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,.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,.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,.35) !important; }
.qpc-shake.qpc-pcard { border-color: var(--qpc-coral) !important; box-shadow: 0 0 0 2px rgba(230,57,70,.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%; }

.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); } }

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

.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; }

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

@media (min-height: 700px) and (max-height: 899px) {
  .qpc-modal-wrap, .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; }
}

@media (max-height: 699px) {
  .qpc-overlay { padding: 8px; }
  .qpc-modal-wrap, .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, .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; }
}

@media (max-width: 768px) {
  :root { --qpc-section-gap: 16px; --qpc-inner-gap: 10px; }
  .qpc-overlay { align-items: stretch; padding: 0; }
  .qpc-modal-wrap { flex-direction: column; align-items: stretch; gap: 0; width: 100%; height: 100vh; height: 100dvh; max-height: none; }
  .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; }
  .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; }
  .qpc-body { display: flex; flex-direction: column; flex: none; overflow: visible; }
  .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; }
  .qpc-config-col { padding: 18px 20px 28px; overflow: visible; gap: var(--qpc-section-gap); flex: none; }
  .qpc-action-bar { flex-wrap: nowrap !important; position: static; background: var(--qpc-white); margin: 0; padding: 14px 0 0; box-shadow: none; }
  .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-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, .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-express-badge { font-size: 9px !important; padding: 2px 5px !important; }
  .qpc-wear-btn { font-size: 14px !important; padding: 0 16px; }
}

@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; }
}


/* ── SP page: title full-width + short-desc compact ── */
#qpcTitle {
    font-size: clamp(16px, 2.2vw, 24px);
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
    width: 100%;
}
.qpc-hero-left .woocommerce-product-details__short-description,
.qpc-hero-left .woocommerce-product-details__short-description * {
    font-size: 13px !important;
    line-height: 1.35 !important;
}
.qpc-hero-left .woocommerce-product-details__short-description ul {
    margin: 2px 0 6px !important;
    padding-left: 14px !important;
}
.qpc-hero-left .woocommerce-product-details__short-description li {
    margin-bottom: 1px !important;
}
@media (max-width: 768px) {
    #qpcInline { zoom: 1 !important; }
    .qpc-hero { flex-wrap: wrap !important; gap: 4px !important; }
    .qpc-hero-left { width: 100% !important; min-width: 0 !important; flex: 1 1 100% !important; }
    #qpcTitle { font-size: 18px !important; line-height: 1.2 !important; }
    .qpc-hero-left .woocommerce-product-details__short-description,
    .qpc-hero-left .woocommerce-product-details__short-description * {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
}

.qpc-section-head { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 8px; }

/* ── SP page: short-desc + title layout (desktop + mobile) ── */
/* 2-column bullet grid, lime dots */
#qpcInline .woocommerce-product-details__short-description ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3px 12px !important;
    margin: 4px 0 8px !important;
    padding-left: 0 !important;
    list-style: none !important;
}
#qpcInline .woocommerce-product-details__short-description li {
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    padding-left: 12px !important;
    position: relative !important;
}
#qpcInline .woocommerce-product-details__short-description li::before {
    content: '•' !important;
    position: absolute !important;
    left: 0 !important;
    color: #C1E53E !important;
    font-size: 10px !important;
    top: 3px !important;
}

/* ── Gallery: restore thumbs, fill column ── */
.woocommerce-product-gallery {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}
.woocommerce-product-gallery .flex-viewport {
    width: 100% !important;
}
.woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    max-height: 560px !important;
    object-fit: contain !important;
}
.woocommerce-product-gallery ol.flex-control-thumbs,
.woocommerce-product-gallery .flex-control-nav {
    display: flex !important;
    gap: 6px !important;
    margin-top: 10px !important;
    padding: 0 !important;
    list-style: none !important;
    flex-wrap: wrap !important;
}
.woocommerce-product-gallery ol.flex-control-thumbs li {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    flex: 0 0 64px !important;
    float: none !important;
}
.woocommerce-product-gallery ol.flex-control-thumbs li img {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 2px solid #e0ddd9 !important;
    cursor: pointer !important;
    display: block !important;
    transition: border-color .2s !important;
}
.woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active {
    border-color: #C1E53E !important;
}

/* ── Long description + Related products ── */
.woocommerce-tabs { display: block !important; margin-top: 40px !important; }
.woocommerce-tabs ul.tabs { display: flex !important; gap: 4px !important; border-bottom: 2px solid #e0ddd9 !important; margin: 0 0 24px !important; padding: 0 !important; list-style: none !important; }
.woocommerce-tabs ul.tabs li { padding: 8px 20px !important; font-family: var(--qpc-font) !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; border-radius: 6px 6px 0 0 !important; }
.woocommerce-tabs ul.tabs li.active { background: #363030 !important; color: #fff !important; }
.woocommerce-tabs .panel { padding: 16px 0 !important; }
.related.products { display: block !important; margin-top: 48px !important; padding-top: 32px !important; border-top: 2px solid #f0eeeb !important; }
.related.products h2 { font-family: var(--qpc-font) !important; font-size: 22px !important; font-weight: 700 !important; color: #363030 !important; margin-bottom: 20px !important; }
.related.products ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; list-style: none !important; padding: 0 !important; }

/* ── SP page mobile fixes ── qpc-sp-mobile-fixes */
@media (max-width: 768px) {
    #qpcInline { zoom: 1 !important; }
    .qpc-hero { flex-wrap: wrap !important; gap: 4px !important; }
    .qpc-hero-left { width: 100% !important; flex: 1 1 100% !important; min-width: 0 !important; }
    #qpcTitle { font-size: 18px !important; line-height: 1.25 !important; white-space: normal !important; word-break: break-word !important; margin-bottom: 6px !important; }
    #qpcInline .woocommerce-product-details__short-description li { font-size: 13px !important; }
    /* Price + wear btn inline on mobile */
    .qpc-price-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; flex-wrap: nowrap !important; }
    #qpcWearBtnMobile { display: inline-flex !important; flex-shrink: 0 !important; font-size: 13px !important; padding: 8px 14px !important; }
    .qpc-hero > #qpcWearBtn { display: none !important; }
    /* Gallery mobile: smaller thumbs + less margin to reduce gap */
    .woocommerce-product-gallery ol.flex-control-thumbs { margin-top: 4px !important; }
    .woocommerce-product-gallery ol.flex-control-thumbs li { width: 44px !important; min-width: 44px !important; flex: 0 0 44px !important; }
    .woocommerce-product-gallery ol.flex-control-thumbs li img { width: 44px !important; height: 44px !important; min-width: 44px !important; }
    /* Related: 2-col on mobile */
    .related.products ul.products { grid-template-columns: repeat(2, 1fr) !important; }
    /* Reduce gap between gallery and product panel on mobile */
    .woocommerce-product-gallery { margin-bottom: 0 !important; }
    .elementor-element-ae5c1c1 { margin-top: 0 !important; }
}

/* Desktop: hide the mobile wear btn clone — inside min-width so mobile @media wins */
@media (min-width: 769px) {
    #qpcWearBtnMobile { display: none !important; }
    .qpc-hero > #qpcWearBtn { display: inline-flex !important; }
}