.spc-list{display:flex;flex-direction:column;gap:20px}
.spc-item{position:relative;display:flex;gap:16px;align-items:flex-start;border:1px solid #e7e7e7;padding:14px;border-radius:8px}
.spc-thumb{flex:0 0 400px;max-width:400px;position:relative}
.spc-img{width:400px;height:300px;object-fit:contain;display:block;background:transparent;border:1px solid #eee;border-radius:6px;aspect-ratio:4/3}
.spc-thumb--placeholder{width:400px;height:300px;display:flex;align-items:center;justify-content:center;background:#f9f9f9;border:1px dashed #ddd;border-radius:6px;aspect-ratio:4/3}
.spc-content{flex:1 1 auto}
.spc-title{margin:0 0 6px}
.spc-meta-inline{font-size:13px;color:#666;margin-bottom:6px;display:flex;gap:8px;flex-wrap:wrap}
.spc-price-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.spc-old-price del{opacity:.7}
.spc-price{font-weight:700;color:#111}
.spc-specs-wrap{position:relative}
.spc-specs-list{margin:0 0 12px 1.2em}
.spc-excerpt{color:#444}
.spc-request .button{background:#0073aa;border-color:#0073aa;color:#fff;padding:8px 12px;border-radius:4px;text-decoration:none;display:inline-block}

/* Circular badge - auto-resizes to fit text */
.spc-badge-circle{
  position:absolute;
  right:10px;
  top:10px;
  /* Auto-sizing based on content */
  min-width:var(--spc-badge-size,80px);
  min-height:var(--spc-badge-size,80px);
  width:auto; /* Grows with text */
  height:auto; /* Grows with text */
  border-radius:999px; /* Stays rounded */
  color:#fff;
  display:inline-flex; /* Flex for content sizing */
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:700;
  line-height:1.1;
  padding:12px 16px; /* Generous padding for text breathing */
  font-size:calc(var(--spc-badge-size,80px) * 0.25); /* 25% of min-size */
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  z-index:2;
  /* Keep text on single line */
  white-space:nowrap;
  pointer-events: none;
  flex: none !important;
  flex-shrink: 0 !important;
}

@media (max-width:768px){
  .spc-item{flex-direction:column}
  .spc-thumb{flex:0 0 auto;max-width:none}
  .spc-img,.spc-thumb--placeholder{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
  .spc-badge-circle{right:8px}
}


/* View modes */
.spc-view-cards{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.spc-view-cards .spc-item{flex-direction:column;align-items:stretch}
.spc-view-cards .spc-thumb{flex:0 0 auto;max-width:none;position:relative}
.spc-view-cards .spc-img,.spc-view-cards .spc-thumb--placeholder{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
.spc-view-cards .spc-content{padding-top:6px}
.spc-view-rows{display:flex;flex-direction:column;gap:20px}

/* Two clear info lines, then blur from line 3 */
.spc-specs-list li:nth-child(n+3){filter:blur(3px);opacity:.55}
.spc-specs-full .spc-specs-list li:nth-child(n+3){filter:none;opacity:1}

/* Modal */
.spc-modal-overlay{position:fixed;inset:0;display:none;z-index:9999}
.spc-modal-overlay.is-open{display:block}
.spc-modal-backdrop{position:absolute;inset:0;background:rgba(10,16,30,.35);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%)}
.spc-modal-wrap{position:relative;max-width:980px;margin:6vh auto 0 auto;padding:16px}
.spc-modal-card{position:relative;border-radius:18px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.58);box-shadow:0 18px 60px rgba(0,0,0,.25);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);overflow:hidden}
.spc-modal-close{
  position:absolute;
  top:-18px;
  right:-18px;
  width:52px;
  height:52px;
  border-radius:9999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.55);
  background: rgba(220,235,255,0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.95);
  z-index: 50;
}
.spc-modal-close:hover{
  background: rgba(220,235,255,0.75);
}
.spc-modal-body{display:flex;gap:16px;padding:20px 16px 32px 16px}
.spc-modal-thumb{flex:0 0 420px;max-width:420px}
.spc-img-modal{width:100%;height:420px;object-fit:contain}
.spc-modal-content{flex:1 1 auto; padding-bottom: 24px;}
.spc-request-modal{margin-top:12px}
@media (max-width: 980px){
  .spc-view-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spc-modal-body{flex-direction:column}
  .spc-modal-thumb{max-width:none}
  .spc-img-modal{height:320px}
}
@media (max-width: 640px){
  .spc-view-cards{grid-template-columns:1fr}
  .spc-thumb{flex:0 0 auto;max-width:none}
  .spc-img,.spc-thumb--placeholder{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
}


/* Dark card styling */
.spc-item{background:rgba(40,42,48,.72);border:1px solid rgba(255,255,255,.10);border-radius:16px;box-shadow:0 10px 28px rgba(0,0,0,.22);cursor:pointer}
.spc-item:hover{box-shadow:0 14px 34px rgba(0,0,0,.28)}
.spc-item .spc-title a{color:inherit;text-decoration:none}
.spc-item .spc-content{color:rgba(255,255,255,.92)}
.spc-item .spc-meta,.spc-item .spc-meta-inline{color:rgba(255,255,255,.62)}
.spc-item .spc-specs-list li{color:rgba(255,255,255,.82)}

/* Cards: make each item its own card, image on top, more square */
.spc-view-cards .spc-item{padding:14px; align-items: center;}
.spc-view-cards .spc-thumb{width:100%; display: flex; justify-content: center;}
.spc-view-cards .spc-thumb a{display:block}
.spc-view-cards .spc-img{height:auto;aspect-ratio:4/3;object-fit:contain;border-radius:14px;background:transparent; margin: 0 auto;}
.spc-view-cards .spc-specs-wrap{margin-top:10px}
.spc-view-cards .spc-content{padding-top: 0;}

.spc-modal-card, .spc-modal-card *{color:#111}
.spc-modal-close{color:#111}
.spc-modal-backdrop{background:rgba(10,16,30,.22)}



/* =========================================
   Liquid Glass UI (moved from Customizer)
   v2.9.0
   ========================================= */

/* Category buttons: blue liquid glass + centered */
.spc-cat-nav{justify-content:center}
.spc-cat-btn{
  background: rgba(70, 140, 255, 0.16) !important;
  border: 1px solid rgba(70, 140, 255, 0.28) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.10) !important;
  backdrop-filter: blur(12px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(170%) !important;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.spc-cat-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.16) !important;
  background: rgba(70, 140, 255, 0.22) !important;
}
.spc-cat-btn.is-active{
  background: rgba(70, 140, 255, 0.28) !important;
  border-color: rgba(70, 140, 255, 0.45) !important;
  font-weight: 700;
}

/* Cards: glass + readable */
.spc-view-cards .spc-item{
  background: rgba(35, 38, 50, 0.58) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.22) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  overflow: hidden;
}
.spc-view-cards .spc-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 52px rgba(0,0,0,0.28) !important;
}
.spc-item .spc-title,
.spc-item .spc-title a,
.spc-item .spc-price,
.spc-item .spc-meta,
.spc-item .spc-meta-inline{
  opacity: 1 !important;
  color: rgba(255,255,255,0.92) !important;
}

/* Price: highlight (desktop + mobile) */
.spc-item .spc-price,
.spc-modal-card .spc-price{
  font-weight: 800 !important;
  letter-spacing: .2px;
}
.spc-item .spc-price{font-size: 20px !important; margin-top: 10px !important}
.spc-modal-card .spc-price{font-size: 22px !important}
.spc-item .spc-price::before,
.spc-modal-card .spc-price::before{
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(70,140,255,.9);
  margin-right: 8px;
  vertical-align: middle;
}

/* Teaser blur: from 3rd row but still readable */
.spc-item .spc-specs-list li:nth-child(n+3){
  filter: blur(2px) !important;
  opacity: 0.70 !important;
}

/* Card image presentation */
.spc-view-cards .spc-thumb{width:100% !important}
.spc-view-cards .spc-img{
  border-radius: 16px !important;
  background: transparent !important;
}

/* Modal: liquid glass + readable */
.spc-modal-backdrop{
  background: rgba(10, 16, 30, 0.22) !important;
  backdrop-filter: blur(18px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%) !important;
}
.spc-modal-card{
  background: rgba(255,255,255,0.62) !important;
  border: 1px solid rgba(255,255,255,0.40) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.22) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
}
.spc-modal-card, .spc-modal-card *{color:#111 !important}

/* Close button: center X inside circle */
.spc-modal-close{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height: 1 !important;
  padding: 0 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.35) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  backdrop-filter: blur(10px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
}
.spc-modal-close{font-size: 22px !important}

/* Mobile: reduce gap between image and text + make card & modal ~30% smaller */
@media (max-width: 980px){
  .spc-view-cards{grid-template-columns:1fr !important; gap:14px !important}
  /* smaller cards on page */
  .spc-view-cards .spc-item{transform: scale(.7); transform-origin: top center; margin-bottom: -90px;}
  .spc-view-cards .spc-item:hover{transform: scale(.7)}
  /* ensure thumb keeps position: relative for badge positioning */
  .spc-view-cards .spc-thumb{position: relative !important}

  /* modal sizing */
  .spc-modal-wrap{max-width: 92vw !important}
  /* REMOVED: .spc-modal-card{transform: scale(.7); transform-origin: top center} - conflicts with animations */
  /* tighter modal internal spacing */
  .spc-modal-body{gap: 10px !important}
  .spc-modal-thumb{margin: 0 !important}
  .spc-modal-content{margin: 0 !important; padding-top: 0 !important}
  .spc-modal-thumb .spc-img-modal{max-height: 240px !important}
}



/* =========================================
   v2.9.1 tweaks (fresh cards + sizing)
   ========================================= */

/* Fresher card background (page, unclicked) */
.spc-view-cards .spc-item{
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(70,140,255,0.22), rgba(70,140,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06)),
    rgba(28,32,44,0.55) !important;
}

/* Desktop: make cards vertically a bit smaller */
.spc-view-cards .spc-item{padding:12px !important}
.spc-view-cards .spc-img{height:auto !important;aspect-ratio:4/3 !important;object-fit:contain !important}
.spc-view-cards .spc-specs-wrap{margin-top:8px !important}

/* Price: remove dot and make it 2 steps larger */
.spc-item .spc-price::before,
.spc-modal-card .spc-price::before{display:none !important; content:none !important}
.spc-item .spc-price{font-size: 24px !important}
.spc-modal-card .spc-price{font-size: 28px !important}

/* Page-corner fold hint (bottom-right) */
.spc-view-cards .spc-item{
  position: relative;
}
.spc-view-cards .spc-item::after{
  content:"";
  position:absolute;
  right:14px;
  bottom:14px;
  width:18px;
  height:18px;
  border-radius: 0 0 16px 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0) 48%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.08) 100%);
  box-shadow: -2px -2px 10px rgba(0,0,0,0.18);
  transform: rotate(0deg);
  opacity: 0.9;
  pointer-events:none;
}
.spc-view-cards .spc-item:hover::after{
  opacity:1;
  box-shadow: -3px -3px 14px rgba(0,0,0,0.22);
}

/* Mobile/Modal: reduce big gap between image and text and tighten padding */
@media (max-width: 980px){
  .spc-modal-body{gap: 6px !important}
  .spc-modal-card{padding: 12px !important}
  .spc-modal-thumb{margin-bottom: 6px !important}
  .spc-modal-content{padding-top: 0 !important; margin-top: 0 !important}
  .spc-modal-content h3{margin-top: 6px !important}
}



/* =========================================
   v2.9.2 hotfix: REAL mobile modal + cleaner backgrounds
   ========================================= */

/* Cleaner, less muddy card background (strong override) */
.spc-list.spc-view-cards .spc-item,
.spc-view-cards .spc-item{
  background:
    radial-gradient(900px 420px at 18% 6%, rgba(70,140,255,0.28), rgba(70,140,255,0) 62%),
    radial-gradient(700px 380px at 92% 18%, rgba(255,255,255,0.10), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)),
    rgba(18,20,28,0.60) !important;
}

/* Also improve row view background a bit (optional) */
.spc-list.spc-view-rows .spc-item,
.spc-view-rows .spc-item{
  background: rgba(18,20,28,0.55) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 16px !important;
}

/* MOBILE MODAL: remove huge blank gap by forcing a vertical stack layout */
@media (max-width: 980px){
  .spc-modal-card{
    transform: none !important;              /* remove scaling tricks */
    max-height: 86vh !important;
    overflow: auto !important;
  }
  .spc-modal-body{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .spc-modal-thumb,
  .spc-modal-content{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  .spc-modal-thumb{
    padding: 0 !important;
  }
  .spc-modal-content{
    padding: 0 0 32px 0 !important;
  }
  .spc-modal-thumb{
    margin-bottom: 6px !important;
  }
  .spc-modal-thumb .spc-img-modal{
    width: 100% !important;
    max-height: 240px !important;
    object-fit: contain !important;
  }
  .spc-modal-content h3{margin: 6px 0 4px 0 !important}
  .spc-modal-content .spc-price{margin: 8px 0 8px 0 !important}
}

/* Price emphasis: keep big but clean */
.spc-item .spc-price{font-size: 24px !important}
.spc-modal-card .spc-price{font-size: 28px !important}



/* =========================================
   v2.9.3 hotfix: disable hover scaling on touch
   ========================================= */

/* iOS Safari can "stick" :hover while scrolling.
   Disable hover transforms on touch devices. */
@media (hover: none), (pointer: coarse){
  .spc-view-cards .spc-item,
  .spc-view-rows .spc-item{
    transform: none !important;
  }
  .spc-view-cards .spc-item:hover,
  .spc-view-rows .spc-item:hover{
    transform: none !important;
    box-shadow: 0 14px 40px rgba(0,0,0,0.22) !important;
  }
  .spc-cat-btn:hover{
    transform: none !important;
  }
}



/* =========================================
   v2.9.4 fix: remove transform-based hover on touch (Safari/Firefox sticky hover)
   ========================================= */

/* Default: NEVER change size/position via transform on hover (prevents sticky hover "growing") */
.spc-view-cards .spc-item:hover,
.spc-view-rows .spc-item:hover,
.spc-cat-btn:hover{
  transform: none !important;
}

/* Only enable hover transforms on real mouse/trackpad */
@media (hover: hover) and (pointer: fine){
  .spc-view-cards .spc-item:hover{
    transform: translateY(-2px) !important;
  }
  .spc-cat-btn:hover{
    transform: translateY(-2px) !important;
  }
}

/* Mobile sizing: do NOT use scale() (causes weird growth when hover sticks) */
@media (max-width: 980px){
  .spc-view-cards .spc-item{
    transform: none !important;
    margin-bottom: 0 !important;
    padding: 10px !important;
  }
  .spc-view-cards .spc-img{
    height: auto !important;
    aspect-ratio: 4/3 !important;
    object-fit: contain !important;
  }
  .spc-item .spc-price{font-size: 22px !important}
}



/* =========================================
   v2.9.5 mobile stability: prevent "growing" while scrolling
   ========================================= */

/* On touch devices, disable ALL interactive transitions/shadow changes.
   Some browsers apply :hover/:active/:focus during scroll and animate shadows,
   which looks like the card changes size. */
@media (hover: none), (pointer: coarse){
  .spc-view-cards .spc-item,
  .spc-view-rows .spc-item,
  .spc-cat-btn{
    transition: none !important;
    will-change: auto !important;
  }

  .spc-view-cards .spc-item:hover,
  .spc-view-cards .spc-item:active,
  .spc-view-cards .spc-item:focus,
  .spc-view-cards .spc-item:focus-within,
  .spc-view-rows .spc-item:hover,
  .spc-view-rows .spc-item:active,
  .spc-view-rows .spc-item:focus,
  .spc-view-rows .spc-item:focus-within{
    transform: none !important;
    box-shadow: 0 14px 40px rgba(0,0,0,0.22) !important; /* fixed shadow */
    filter: none !important;
  }

  /* Avoid focus outlines changing layout */
  .spc-view-cards .spc-item:focus,
  .spc-view-cards .spc-item:focus-within,
  .spc-view-rows .spc-item:focus,
  .spc-view-rows .spc-item:focus-within{
    outline: none !important;
  }

  /* Reduce tap highlight */
  .spc-view-cards .spc-item,
  .spc-view-rows .spc-item,
  .spc-cat-btn{
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
}



/* =========================================
   v2.9.6 tweaks: blur strength + corner fold + mobile scroll stability
   ========================================= */

/* Teaser blur: from 3rd row but still readable */
.spc-item .spc-specs-list li:nth-child(n+3){
  filter: blur(4px) !important;
  opacity: 0.70 !important;
}

/* Page-corner fold: align to exact bottom-right corner */
.spc-view-cards .spc-item::after{
  right: 0 !important;
  bottom: 0 !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 0 0 18px 0 !important;
  box-shadow: -3px -3px 14px rgba(0,0,0,0.22) !important;
}

/* Mobile: stop "growing" effect while scrolling by disabling heavy effects on cards */
@media (hover: none), (pointer: coarse){
  .spc-view-cards .spc-item{
    transition: none !important;
    transform: none !important;
    box-shadow: 0 14px 40px rgba(0,0,0,0.22) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .spc-view-cards .spc-item:hover,
  .spc-view-cards .spc-item:active,
  .spc-view-cards .spc-item:focus,
  .spc-view-cards .spc-item:focus-within{
    transition: none !important;
    transform: none !important;
    box-shadow: 0 14px 40px rgba(0,0,0,0.22) !important;
  }
}



/* =========================================
   v2.9.7 iOS/WebKit scroll "growing" killer
   ========================================= */

/* Prevent iOS/Android text autosizing that can look like zoom while scrolling */
.spc-wrap, .spc-wrap *{
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* Ensure scrolling gesture is treated as scroll (not tap/zoom interactions) */
.spc-view-cards .spc-item,
.spc-view-rows .spc-item{
  touch-action: pan-y !important;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Contain paint/layout to reduce repaint "pumping" during scroll */
.spc-view-cards .spc-item,
.spc-view-rows .spc-item{
  contain: layout paint style;
}

/* On touch devices: remove effects that can "pulsate" during scroll on WebKit */
@media (hover: none), (pointer: coarse){
  .spc-view-cards .spc-item,
  .spc-view-rows .spc-item{
    transition: none !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* shadows are notorious for re-rasterizing; use border instead */
    box-shadow: none !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
  }
  .spc-view-cards .spc-item::after{ /* keep corner fold but no shadow */
    box-shadow: none !important;
  }
}



/* =========================================
   v2.10.0: sort bar + mobile modal squeeze
   ========================================= */

.spc-sortbar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin: 8px 0 18px 0;
}
.spc-sortlabel{
  font-weight:600;
  opacity:.85;
}
.spc-sortselect{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.60);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Mobile modal: ensure button + text visible without excessive scrolling */
@media (max-width: 980px){
  .spc-modal-card{
    max-height: 88svh !important;
  }
  .spc-modal-body{
    gap: 8px !important;
  }
  .spc-modal-thumb .spc-img-modal{
    max-height: 28svh !important;
  }
  .spc-modal-content{
    padding-bottom: 32px !important;
  }
}



/* =========================================
   v2.10.1: nicer centered sort buttons + mobile modal fit
   ========================================= */

.spc-sortbar{
  display:flex;
  justify-content:center;
  margin: 10px 0 18px 0;
}
.spc-sortgroup{
  display:inline-flex;
  gap:8px;
  padding:8px;
  border-radius:18px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.spc-sortbtn{
  appearance:none;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.22);
  color: rgba(20,22,30,0.92);
  padding:10px 12px;
  border-radius:14px;
  font-weight:700;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.spc-sortbtn.is-active{
  background: rgba(120,170,255,0.35);
  border-color: rgba(120,170,255,0.55);
  box-shadow: 0 14px 34px rgba(0,0,0,0.14);
}
@media (hover:hover) and (pointer:fine){
  .spc-sortbtn:hover{ transform: translateY(-1px); }
}
@media (max-width: 980px){
  .spc-sortgroup{ flex-wrap: wrap; justify-content:center; }
  .spc-sortbtn{ font-size:13px; padding:10px 10px; }
}

/* Mobile modal: ensure content + button fit */
@media (max-width: 980px){
  .spc-modal-card{
    max-height: 86svh !important;
    width: min(92vw, 520px) !important;
    overflow: hidden !important;
  }
  .spc-modal-body{
    height: 100% !important;
    overflow: hidden !important;
  }
  .spc-modal-content{
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 86px !important; /* space for button */
  }
  .spc-modal-content .spc-btn{
    position: sticky !important;
    bottom: 12px !important;
    display: inline-block !important;
    width: calc(100% - 24px) !important;
    margin: 10px 12px 12px 12px !important;
  }
  .spc-modal-thumb .spc-img-modal{
    max-height: 26svh !important;
  }
}



/* =========================================
   v2.10.2 fixes: restore JS, better mobile sort + modal fit
   ========================================= */

@media (max-width: 980px){
  /* keep same desktop look, allow horizontal scroll instead of wrapping */
  .spc-sortgroup{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .spc-sortgroup::-webkit-scrollbar{ display:none; }
  .spc-sortbtn{ white-space: nowrap; }
}

/* Mobile modal: ensure button fully visible + reduce top image dominance */
@media (max-width: 980px){
  .spc-modal-card{
    max-height: 92svh !important;
  }
  .spc-modal-thumb .spc-img-modal{
    max-height: 22svh !important;
  }
  .spc-modal-content{
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }
  .spc-modal-content .spc-btn{
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
}



/* =========================================
   v2.10.3: mobile spacing + close button + sort button mobile polish
   ========================================= */

/* Sort buttons: keep desktop look, mobile: smaller text + centered label */
@media (max-width: 980px){
  .spc-sortbtn{
    font-size: 12px !important;
    text-align: center !important;
  }
}

/* Modal close button: tighter to top-right + darker circle */
.spc-modal-close,
.spc-modal-x,
.spc-modal .spc-modal-close{
  top: 10px !important;
  right: 10px !important;
  background: rgba(20,22,30,0.55) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: rgba(255,255,255,0.92) !important;
}

/* Mobile modal spacing: reduce vertical gaps and line heights */
@media (max-width: 980px){
  .spc-modal-content{
    padding: 14px 14px 86px 14px !important;
  }
  .spc-modal-content h3{
    margin: 6px 0 6px 0 !important;
    line-height: 1.12 !important;
  }
  .spc-modal-meta{
    margin-bottom: 8px !important;
    line-height: 1.15 !important;
  }
  .spc-modal-content .spc-pricewrap{
    margin: 8px 0 10px 0 !important;
  }
  .spc-specs-list{
    margin-top: 8px !important;
  }
  .spc-specs-list li{
    margin: 6px 0 !important;
    line-height: 1.2 !important;
  }
  .spc-modal-thumb{
    padding: 14px !important;
  }
}


/* v2.10.5 sort btn centering */
.spc-sortbtn{display:inline-flex;align-items:center;justify-content:center;text-align:center;}



/* =========================================
   v2.10.6: mobile modal micro-spacing + typography
   ========================================= */
@media (max-width: 980px){
  /* less gap between image and title */
  .spc-modal-thumb{ padding-bottom: 8px !important; }
  .spc-modal-thumb + .spc-modal-content{ padding-top: 10px !important; }

  /* title a bit bigger + tighter */
  .spc-modal-content h3{
    font-size: 30px !important;
    margin-top: 4px !important;
    margin-bottom: 6px !important;
  }

  /* remove gap between meta line and price */
  .spc-modal-meta{ margin-bottom: 2px !important; }
  .spc-modal-content .spc-pricewrap{
    margin-top: 2px !important;
    margin-bottom: 10px !important;
  }
}



/* =========================================
   v2.10.7: modal truly centered + mobile spacing fixes (strong specificity)
   ========================================= */

/* Center modal in viewport (desktop + mobile) */
.spc-modal-overlay.is-open{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.spc-modal-wrap{
  margin: 0 !important;
  width: min(980px, 100%) !important;
  max-width: 980px !important;
  padding: 16px !important;
}

/* Mobile: keep modal centered and scroll INSIDE card if needed */
@media (max-width: 980px){
  .spc-modal-wrap{ padding: 12px !important; }
  .spc-modal-card{
    max-height: 88vh !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .spc-modal-body{ gap: 12px !important; padding: 14px 14px 28px 14px !important; }
  .spc-modal-thumb{ padding-bottom: 6px !important; }
  .spc-modal-content h3{
    font-size: 30px !important;
    line-height: 1.12 !important;
    margin: 0 0 6px 0 !important;
  }
  .spc-modal-meta{ margin: 0 0 0 0 !important; }
  /* tighten space between meta line and price */
  .spc-modal-content .spc-pricewrap,
  .spc-modal-content .spc-price-row,
  .spc-modal-content .spc-price{
    margin-top: 2px !important;
  }
  .spc-modal-content .spc-pricewrap{ margin-bottom: 10px !important; }
}

/* Close button stays pinned */
.spc-modal-close{
  position: absolute !important;
}



/* =========================================
   v2.10.8: smaller modal vertical footprint + close button half-outside + bigger X
   ========================================= */

/* Reduce top/bottom size a bit (all devices) */
.spc-modal-wrap{ padding-top: 10px !important; padding-bottom: 10px !important; }
.spc-modal-card{ border-radius: 26px !important; }

@media (max-width: 980px){
  .spc-modal-card{ max-height: 82vh !important; }
  .spc-modal-body{ padding: 12px 12px 28px 12px !important; gap: 10px !important; }
}

/* Close button: half outside top-right corner */
.spc-modal-card{ position: relative !important; }
.spc-modal-close{
  position: absolute !important;
  top: -18px !important;
  right: -18px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(20,22,30,0.65) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  color: rgba(255,255,255,0.98) !important;
  font-size: 30px !important;
  line-height: 1 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25) !important;
}

/* Make sure the glyph is perfectly centered */
.spc-modal-close span,
.spc-modal-close i,
.spc-modal-close svg{
  display: block !important;
  margin: 0 !important;
}



/* =========================================
   v2.10.9: close button true floating (half outside) + bluish glass
   ========================================= */

/* Ensure the wrapper can show the floating close button */
.spc-modal-wrap{ overflow: visible !important; }
.spc-modal-card{ position: relative !important; overflow: visible !important; }

/* keep inner card clipping for glass background if needed */
.spc-modal-card .spc-modal-body{ border-radius: 22px !important; overflow: hidden !important; }

/* Floating close button */
.spc-modal-close{
  position: absolute !important;
  top: -22px !important;
  right: -22px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 999px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(120, 170, 255, 0.22) !important;  /* bluish */
  border: 1px solid rgba(255,255,255,0.32) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.28) !important;

  backdrop-filter: blur(10px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%) !important;

  color: rgba(255,255,255,0.96) !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 9999 !important;
}

/* Make sure X is perfectly centered */
.spc-modal-close::before{
  content: "×";
  display: block;
  transform: translateY(-1px);
}

/* If plugin already prints an X inside, hide it to avoid double glyphs */
.spc-modal-close span,
.spc-modal-close i,
.spc-modal-close svg{
  display: none !important;
}



/* =========================================
   v2.10.12: Close button single X + truly round
   ========================================= */

/* Kill any pseudo-glyphs that could create a 2nd X */
.spc-modal-close::before,
.spc-modal-close::after{
  content: none !important;
}

/* Force perfect circle + consistent rendering across themes */
.spc-modal-close{
  -webkit-appearance: none !important;
  appearance: none !important;
  padding: 0 !important;
  min-width: 56px !important;
  min-height: 56px !important;
  width: 56px !important;
  height: 56px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.32) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 36px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  top: -18px !important;
  right: -18px !important;

  background: rgba(210, 225, 255, 0.42) !important; /* bluish glass */
  backdrop-filter: blur(10px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
}

/* Hide any nested icon nodes (but keep the text node "×") */
.spc-modal-close span,
.spc-modal-close i,
.spc-modal-close svg{
  display: none !important;
}


/* === SPC Pro v2.10.12 polish: modal animations, close button, dark mode === */
.spc-modal-overlay{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
.spc-modal-overlay.is-open{
  display:block; /* keep legacy behavior */
  visibility:visible;
  pointer-events:auto;
}
.spc-modal-overlay.is-open.is-visible{
  opacity:1;
  transition: opacity .18s ease;
}
/* REMOVED OLD ANIMATION - now using new animation system
.spc-modal-card{
  transform: translateY(10px) scale(.985);
  transition: transform .18s ease;
  overflow: visible !important;
}
.spc-modal-overlay.is-open.is-visible .spc-modal-card{
  transform: translateY(0) scale(1);
}
*/

/* Keep overflow visible for close button */
.spc-modal-card{
  overflow: visible !important;
}

/* Close button: perfectly round, single X, top-right corner, half outside */
.spc-modal-close{
  position:absolute !important;
  top: 0 !important;
  right: 0 !important;
  transform: translate(40%, -40%) !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  padding: 0 !important;
  background: rgba(220,235,255,.85) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
}
.spc-modal-close::before,
.spc-modal-close::after{
  content: none !important;
}

/* Dark mode (toggle adds .spc-theme-dark on <html>) */
:root.spc-theme-dark .spc-item,
:root.spc-theme-dark .spc-item-grid,
:root.spc-theme-dark .spc-modal-card{
  background: rgba(20,24,32,.72) !important;
  color: rgba(255,255,255,.92) !important;
}
:root.spc-theme-dark .spc-item .spc-title,
:root.spc-theme-dark .spc-modal-title{
  color: rgba(255,255,255,.95) !important;
}
:root.spc-theme-dark .spc-specs-list li{
  color: rgba(255,255,255,.88) !important;
}
:root.spc-theme-dark .spc-sortbtn,
:root.spc-theme-dark .spc-theme-toggle{
  background: rgba(30,36,48,.68) !important;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* Theme toggle button styling */
.spc-theme-toggle{
  margin-left: 8px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  background: rgba(255,255,255,.35) !important;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

/* Strategy A: make items clickable, prevent link navigation in JS */
.spc-item a{ text-decoration: none !important; }
.spc-item{ 
  cursor: pointer; 
  -webkit-tap-highlight-color: rgba(0,0,0,0); 
  touch-action: manipulation;
}

/* ============================================
   FINAL OVERRIDES v2.11.13 - Fix mobile scrolling
   ============================================ */

/* Desktop: Moderate bottom spacing */
.spc-modal-overlay.is-open .spc-modal-wrap .spc-modal-card .spc-modal-content{
  padding-bottom: 25px !important;
}

/* Mobile: Fix height and scrolling */
@media (max-width: 980px){
  /* Increase max-height to fit content better */
  .spc-modal-overlay.is-open .spc-modal-wrap .spc-modal-card{
    max-height: 88vh !important;
  }
  
  /* Make modal-body scrollable */
  .spc-modal-overlay.is-open .spc-modal-wrap .spc-modal-card .spc-modal-body{
    max-height: calc(88vh - 40px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Add bottom padding to modal-content */
  .spc-modal-overlay.is-open .spc-modal-wrap .spc-modal-card .spc-modal-content{
    padding-bottom: 50px !important;
  }
  
  /* Extra margin on last elements for safety */
  .spc-modal-overlay.is-open .spc-modal-wrap .spc-modal-card .spc-modal-content > *:last-child{
    margin-bottom: 30px !important;
  }
}

/* Close Button: smaller + exact corner position */
.spc-modal-overlay.is-open .spc-modal-wrap .spc-modal-card .spc-modal-close{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  transform: translate(50%, -50%) !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  font-size: 22px !important;
  border-radius: 50% !important;
  z-index: 9999 !important;
}

/* ============================================
   MODAL ANIMATIONS - v2.11.17 - MOBILE FIX
   ============================================ */

/* Override ALL existing transform rules */
.spc-modal-overlay .spc-modal-wrap .spc-modal-card{
  transition: none !important;
  transform: none !important;
}

/* Mobile: Override the scale(.7) rule */
@media (max-width: 980px){
  .spc-modal-overlay .spc-modal-wrap .spc-modal-card{
    transform: none !important;
  }
  
  /* Also override for animation states */
  .spc-modal-overlay.anim-fade .spc-modal-wrap .spc-modal-card,
  .spc-modal-overlay.anim-flip .spc-modal-wrap .spc-modal-card,
  .spc-modal-overlay.anim-zoom .spc-modal-wrap .spc-modal-card,
  .spc-modal-overlay.anim-slide .spc-modal-wrap .spc-modal-card{
    transform-origin: center center !important;
  }
}

/* Default state: hidden */
.spc-modal-overlay{
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s !important;
}

.spc-modal-overlay.is-open{
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.3s ease !important;
}

/* ===== Animation: Fade ===== */
.spc-modal-overlay.anim-fade .spc-modal-wrap .spc-modal-card{
  opacity: 0 !important;
  transform: scale(0.95) !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

.spc-modal-overlay.anim-fade.is-open.is-visible .spc-modal-wrap .spc-modal-card{
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* ===== Animation: Flip ===== */
.spc-modal-overlay.anim-flip .spc-modal-wrap .spc-modal-card{
  opacity: 0 !important;
  transform: perspective(1000px) rotateY(-90deg) !important;
  transition: opacity 0.4s ease, transform 0.4s ease !important;
}

.spc-modal-overlay.anim-flip.is-open.is-visible .spc-modal-wrap .spc-modal-card{
  opacity: 1 !important;
  transform: perspective(1000px) rotateY(0deg) !important;
}

/* ===== Animation: Zoom ===== */
.spc-modal-overlay.anim-zoom .spc-modal-wrap .spc-modal-card{
  opacity: 0 !important;
  transform: scale(0.3) !important;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
}

.spc-modal-overlay.anim-zoom.is-open.is-visible .spc-modal-wrap .spc-modal-card{
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* ===== Animation: Slide ===== */
.spc-modal-overlay.anim-slide .spc-modal-wrap .spc-modal-card{
  opacity: 0 !important;
  transform: translateY(100px) !important;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.spc-modal-overlay.anim-slide.is-open.is-visible .spc-modal-wrap .spc-modal-card{
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ===== No Animation ===== */
.spc-modal-overlay.anim-none .spc-modal-wrap .spc-modal-card{
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.spc-modal-overlay.anim-none.is-open .spc-modal-wrap .spc-modal-card{
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================
   DESKTOP CENTERING - v2.11.16
   ============================================ */

/* Desktop only: Center the entire modal-body horizontally */
@media (min-width: 981px){
  .spc-modal-overlay.is-open .spc-modal-wrap .spc-modal-card .spc-modal-body{
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
  
  /* Ensure content doesn't exceed container */
  .spc-modal-overlay.is-open .spc-modal-wrap .spc-modal-card .spc-modal-thumb,
  .spc-modal-overlay.is-open .spc-modal-wrap .spc-modal-card .spc-modal-content{
    flex-shrink: 0 !important;
    max-width: none !important;
  }
  
  /* Center modal-wrap itself */
  .spc-modal-overlay.is-open .spc-modal-wrap{
    display: flex !important;
    justify-content: center !important;
  }
  
  .spc-modal-overlay.is-open .spc-modal-wrap .spc-modal-card{
    margin: 0 auto !important;
  }
}

/* 1-Column View: Limit width and center */
.spc-view-cards.spc-cols-1 {
  max-width: 400px;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .spc-view-cards.spc-cols-1 {
    max-width: 450px;
  }
}

@media (min-width: 1024px) {
  .spc-view-cards.spc-cols-1 {
    max-width: 500px;
  }
}

/* Notiz / Hinweis Box */
.spc-note-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin: 12px 0;
  background: linear-gradient(135deg, #e3f2fd 0%, #f5f9ff 100%);
  border-left: 4px solid #2196F3;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(33, 150, 243, 0.1);
}

.spc-note-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.spc-note-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: #1565C0;
  font-weight: 500;
}

/* Notiz Box im Modal */
.spc-note-box-modal {
  margin: 16px 0;
}

/* Mobile Anpassung */
@media (max-width: 768px) {
  .spc-note-box {
    padding: 10px 12px;
    gap: 8px;
  }
  
  .spc-note-icon {
    font-size: 18px;
  }
  
  .spc-note-text {
    font-size: 13px;
  }
}

/* Fix: Modal specs should be left-aligned with normal list indentation */


/* ============================================
   MIAMI VICE GRADIENT BADGE MIT INFO-ICON
   Version 2.54.0 - Option 2 (Empfohlen)
   ============================================ */

/* BASE MIAMI VICE GRADIENT BADGE */
.spc-note-box.miami-vice {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 22px;
  margin: 14px 0;
  
  /* Miami Vice Gradient: Hot Pink → Electric Blue → Light Purple */
  background: linear-gradient(135deg, 
    #fc466b 0%,    /* Hot Pink */
    #3f5efb 50%,   /* Electric Blue */
    #c471ed 100%   /* Light Purple */
  );
  background-size: 200% 200%;
  
  border: none;
  border-radius: 50px;
  
  box-shadow: 
    0 4px 15px rgba(252, 70, 107, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.1);
  
  position: relative;
  overflow: hidden;
  
  /* Gradient Animation */
  animation: gradientShift 5s ease infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Shine Effect - Durchlaufender Glanz */
.spc-note-box.miami-vice::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  animation: shine 3s infinite;
}

@keyframes shine {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* Icon Base */
.spc-note-box.miami-vice .spc-note-icon {
  font-size: 23px;
  color: white;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  animation: iconBounce 2s ease-in-out infinite;
  z-index: 1;
  flex-shrink: 0;
}

@keyframes iconBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Text Styling */
.spc-note-box.miami-vice .spc-note-text {
  flex: 1;
  font-size: 15px;
  line-height: 1.45;
  color: white !important;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Info-Icon: Weißer Kreis mit schwarzem "i" */
.spc-note-icon.info-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  color: #1a1a1a !important;  /* Schwarz für besseren Kontrast */
  font-weight: 700;
  font-size: 16px;
  font-style: normal;
  line-height: 1;
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
  .spc-note-box.miami-vice {
    padding: 11px 18px;
    gap: 9px;
  }
  
  .spc-note-box.miami-vice .spc-note-icon {
    font-size: 20px;
  }
  
  .spc-note-box.miami-vice .spc-note-text {
    font-size: 14px;
    color: white !important;
  }
  
  .spc-note-icon.info-circle {
    width: 22px;
    height: 22px;
    font-size: 15px;
    color: #1a1a1a !important;
  }
}