/*
 * Copyright (c) 2026 Company Name. All Rights Reserved.
 * Proprietary and Confidential. Unauthorized use prohibited.
 */
* { caret-color:transparent; }

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

html, body {
  width:100%; height:100%; overflow:hidden;
}
body {
  background-color:#936fff;
  display:flex;
  /* flex-start prevents children stretching to full body height */
  align-items:flex-start;
  justify-content:center;
}

#screenCanvas {
  position:fixed; left:0; top:0;
  width:100vw; height:100vh;
  z-index:100; pointer-events:none;
}

/* ── Main page ── */
.page-wrap {
  position:relative;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  /* margin:auto centers vertically when body uses flex-start */
  margin:auto;
  flex-shrink:0;
  height:auto !important;
  background:transparent;
  transform-origin:center center;
  overflow:visible;
}

#mainCanvas {
  position:absolute; left:0; top:0;
  z-index:2; pointer-events:none; display:block;
}

.logo-wrap {
  position:relative; flex-shrink:0; z-index:3; overflow:visible;
}
.logo-wrap img#logoImg {
  display:block; width:100%; height:100%;
  object-fit:contain; position:relative; z-index:4;
}
.logo-wrap img#splashImg {
  position:absolute; left:50%; top:50%;
  width:100%; height:auto;
  transform:translate(-50%,-50%) scale(0.5);
  transform-origin:center top;
  opacity:0; z-index:2; pointer-events:none; display:block;
}
#splatCanvas {
  position:absolute; left:0; top:0;
  z-index:2; pointer-events:none; display:block;
}

.sticker-wrap {
  position:relative; flex-shrink:0;
  transform:rotate(-2.8deg);
  transform-origin:center center;
  filter:drop-shadow(4px 8px 18px rgba(0,0,0,0.55));
  z-index:5; margin-top:1.5vh;
}
.design-container {
  position:relative; width:100%; overflow:hidden;
  padding-bottom:4%;
  outline:3px solid rgba(255,255,255,0.18);
}

/* ── Sub pages ── */
.sub-wrap {
  position:fixed; left:0; top:0;
  width:100vw; height:100vh;
  display:flex; align-items:center; justify-content:center;
  z-index:10; background:transparent;
}

/* Store page — column layout so controls sit above cards */
#storePage {
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  overflow-y:auto;
  overflow-x:hidden;
}
.sub-sticker-wrap {
  position:relative; transform:rotate(2.2deg);
  transform-origin:center center;
  filter:drop-shadow(4px 8px 18px rgba(0,0,0,0.55));
  z-index:5;
}
/* Store item page gets taller card */
#storeItemPage .sub-sticker-wrap {
  width:min(92vw, 680px) !important;
}
#storeItemPage .sub-design-container {
  min-height:55vh;
  max-height:72vh;
  margin-bottom:clamp(80px,14vh,120px);
  display:flex;
  flex-direction:column;
  overflow-y:hidden;
  height:auto;
}
#storeItemPage .sub-content {
  flex:1;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
  min-height:0;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
#storeItemPage .sub-design-container::-webkit-scrollbar {
  display:none;
  width:0;
  height:0;
}
#storeItemPage .sub-img-wrap {
  flex-shrink:0;
  min-height:clamp(160px,25vh,280px);
  max-width:75%;
  margin-left:auto;
  margin-right:auto;
}
#storeItemPage .store-item-body {
  margin-top:clamp(8px,2vh,24px);
  margin-bottom:clamp(8px,2vh,24px);
  flex-shrink:0;
}
.sub-design-container {
  position:relative; width:100%; overflow:hidden;
  padding-bottom:5%;
  outline:3px solid rgba(255,255,255,0.18);
}
.sub-content {
  position:relative; z-index:5;
  padding:clamp(12px,2.5vh,48px) 7% clamp(12px,2.5vh,48px);
  text-align:center;
}
.sub-title {
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  font-size:clamp(32px,5vw,110px);
  font-weight:900;
  letter-spacing:0.02em; color:inherit; line-height:0.9;
  margin-bottom:0.2em; text-shadow:2px 3px 8px rgba(0,0,0,0.40);
  width:100%; overflow:visible; text-overflow:ellipsis; white-space:nowrap;
}
@media (pointer:fine) {
  .sub-title {
    line-height:1.1;
  }
}
.sub-body {
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(24px,2.2vw,28px); font-weight:300;
  color:rgba(0, 0, 0, 0.92); line-height:1.6;
  letter-spacing:0.03em; max-width:480px; margin:0 auto 0.8em;
  text-shadow:0 2px 8px rgba(0,0,0,0.55);
}
.sub-link {
  display:inline-block; font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(11px,1.5vw,18px); font-weight:700;
  letter-spacing:0.16em; color:rgba(255,255,255,0.70);
  text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.30);
  padding-bottom:2px; margin-bottom:0.8em;
  transition:color 0.2s,border-color 0.2s;
}
.sub-link:hover{color:#fff;border-color:rgba(255,255,255,0.7);}
.sub-img-wrap {
  width:100%; margin-top:0.8em; margin-bottom:1.25em; border-radius:12px; overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,0.45),0 2px 8px rgba(0,0,0,0.25);
  position:relative;
}
.sub-img{display:block;width:100%;height:auto;border-radius:12px;}
.sub-back-btn {
  font-family:'Barlow Condensed','Arial Narrow',sans-serif !important;
  font-size:clamp(20px,3.5vw,48px) !important;
  font-weight:900 !important; letter-spacing:0.18em !important;
  text-decoration:none; cursor:pointer; transition:opacity 0.2s;
  position:relative;z-index:2;
  color:rgba(255,255,255,0.92) !important;
  text-shadow:0 1px 8px rgba(0,0,0,0.40) !important;
}
.sub-back-btn:hover{opacity:0.65;}
.sub-bar-top-large{height:clamp(40px,6vw,72px) !important;}

/* ── Shared sticker internals ── */
@keyframes sheenSlide {
  0%   { background-position: -200% 0; }
  100% { background-position: 40% 0; }
}
.sheen {
  position:absolute;inset:0;
  background:linear-gradient(118deg,
    rgba(255,255,255,0) 0%,rgba(255,255,255,0) 28%,
    rgba(255,255,255,0.09) 38%,rgba(255,255,255,0.18) 44%,
    rgba(255,255,255,0.09) 50%,rgba(255,255,255,0) 60%,
    rgba(255,255,255,0) 100%);
  background-size:200% 100%;
  background-position:-200% 0;
  z-index:20;pointer-events:none;
  animation:sheenSlide 1.2s cubic-bezier(0.25,0.1,0.1,1.0) 1 forwards;
}
.bar-left  {position:absolute;left:0;top:0;bottom:0;width:1.2%;background:rgba(37,22,46,0.55);z-index:10;}
.bar-right {position:absolute;right:0;top:0;bottom:0;width:1.2%;background:rgba(37,22,46,0.22);z-index:10;}
.bar-top {
  position:relative;width:100%;height:clamp(26px,3.8vw,52px);
  background:rgba(37,22,46,0.52);z-index:10;
  display:flex;align-items:center;justify-content:space-between;padding:0 5.3%;
}
.bar-top .brand {
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  font-size:clamp(9px,2vw,28px);font-weight:900;opacity:0.95;
}
.bar-top .zone {
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(24px,1.1vw,16px);font-weight:300;
  letter-spacing:0.18em;color:#ffffff;opacity:0.40;
  position:relative;z-index:2;
}
.nav-section {
  position:relative;z-index:5;
  padding:clamp(8px,2vh,36px) 5.3% clamp(8px,2vh,36px);
}
.nav-item {
  display:block;width:100%;text-align:center;
  text-decoration:none;cursor:pointer;transition:opacity 0.2s;
}
.nav-item:hover{opacity:0.75;}
.nav-store {
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  font-size:clamp(60px,7vw,110px);font-weight:900;
  letter-spacing:0.01em;line-height:0.92;padding:0.28em 0;
}
.nav-separator{width:100%;border:none;border-top:2px solid rgba(37,22,46,0.30);margin:0;}
.nav-contact {
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  font-size:clamp(40px,5vw,80px);font-weight:700;
  letter-spacing:0.10em;line-height:1;padding:0.28em 0;
}
.nav-about {
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  font-size:clamp(40px,5vw,80px);font-weight:300;
  letter-spacing:0.22em;line-height:1;padding:0.28em 0;
}
.bar-bottom {
  position:relative;width:100%;height:clamp(36px,4.5vw,64px);
  background:rgba(37,22,46,0.52);z-index:10;
  display:flex;align-items:center;justify-content:center;
  overflow:visible;gap:4%;
}
.copy-lines {
  position:absolute;left:5%;right:5%;top:50%;
  height:4px;background:rgba(147,111,255,0.35);
}
.bar-bottom .copy-text {
  position:absolute;z-index:2;
  font-family:'Permanent Marker',cursive;
  font-size:clamp(12px,3vw,20px);white-space:nowrap;line-height:1;
  transform:rotate(-1.5deg);text-shadow:1px 2px 4px rgba(0,0,0,0.30);
  letter-spacing:0.04em;
}
.copy-small {
  position:absolute;left:5.3%;top:50%;transform:translateY(-50%);
  font-family:'Space Grotesk',sans-serif;opacity:0.40;
  font-size:clamp(12px,1.1vw,15px);font-weight:400;letter-spacing:0.16em;z-index:2;
}
.peel-wrap {
  position:absolute;bottom:0;
  width:clamp(28px,4.5vw,70px);height:clamp(28px,4.5vw,70px);
  z-index:30;pointer-events:none;
}
.peel-left{left:0;} .peel-right{right:0;}
.peel-wrap svg{width:100%;height:100%;}

/* ── Loader ── */
#loaderOverlay {
  position:fixed;left:0;top:0;width:100vw;height:100vh;
  z-index:200;display:flex;align-items:center;justify-content:center;
}
#loaderCanvas{position:absolute;left:0;top:0;width:100%;height:100%;}

/* ── Store page ── */
.store-row {
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:clamp(8px,2vw,24px);width:100%;
  padding:clamp(80px,12vh,120px) clamp(8px,2vw,24px) 0;position:relative;z-index:5;
}
.store-card-wrap {
  flex:1;min-width:0;max-width:320px;cursor:pointer;
  filter:drop-shadow(4px 8px 18px rgba(0,0,0,0.55));
  transition:filter 0.2s ease;
}
.store-card-wrap:hover{filter:drop-shadow(6px 12px 24px rgba(0,0,0,0.70));}
.store-card-inner {
  position:relative;width:100%;overflow:hidden;
  padding-bottom:8%;
  outline:3px solid rgba(255,255,255,0.18);
}
.store-card-content {
  position:relative;z-index:5;
  padding:clamp(8px,2vh,32px) 7% clamp(8px,2vh,32px);
  text-align:center;
}
.store-card-title {
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  font-size:clamp(18px,4.5vw,48px);font-weight:900;
  letter-spacing:0.02em;line-height:0.9;margin-bottom:0.15em;
  text-shadow:2px 3px 8px rgba(0,0,0,0.40);
  overflow:hidden;text-overflow:ellipsis;width:100%;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.store-card-body {
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(18px,1.6vw,18px);font-weight:300;
  color:inherit;line-height:1.4;letter-spacing:0.03em;
  text-shadow:0 1px 6px rgba(0,0,0,0.50);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* ── Store card slideshow ── */
.store-card-slideshow {
  position:relative;width:100%;aspect-ratio:1/1;
  overflow:hidden;border-radius:10px;margin-top:0.6em;
  box-shadow:0 6px 24px rgba(0,0,0,0.40);
}
.store-slide-img {
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:10px;
  animation:none !important;  /* no pulse — crossfade only */
}
.store-slide-img-a{z-index:2;} .store-slide-img-b{z-index:1;}
.store-skeleton-placeholder {
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:center;justify-content:center;border-radius:10px;
}
.store-skeleton-text {
  font-size:clamp(14px,3vw,28px);font-weight:400;
  letter-spacing:0.12em;transform:rotate(-1.5deg);
  pointer-events:none;user-select:none;
}

/* ── Store canvas — behind cards ── */
#storeCanvas{position:fixed;left:0;top:0;z-index:4;pointer-events:none;display:block;}

/* ── Store back button ── */
.store-back-row {
  position:fixed;bottom:clamp(28px,5vh,64px);left:50%;transform:translateX(-50%);
  z-index:20;display:flex;align-items:center;justify-content:center;
  min-width:160px;min-height:56px;
}
.store-back-btn {
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  font-size:clamp(16px,3vw,38px);font-weight:900;
  letter-spacing:0.20em;color:rgba(255,255,255,0.92);
  text-decoration:none;cursor:pointer;position:relative;z-index:2;
  white-space:nowrap;text-shadow:0 2px 8px rgba(0,0,0,0.50);transition:opacity 0.2s;
}
.store-back-btn:hover{opacity:0.70;}
.store-back-splats {
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:1px;height:1px;z-index:1;pointer-events:none;
}

/* ── Store grid modes ── */
.store-row.store-grid {
  display:grid;gap:clamp(10px,2vw,28px);
  justify-content:center;align-items:start;
  padding:0 clamp(8px,2vw,24px) clamp(8px,2vw,24px);
}
.store-row.store-grid .store-card-wrap{
  max-width:none;
  width:100%;
  flex:none;
}

/* ── Portrait ── */
@media (orientation:portrait),(max-aspect-ratio:3/4){
  .sub-wrap.store-page-wrap {
    align-items:flex-start;
    overflow-y:auto;
  }
  /* In portrait/narrow, top-align storePage so cards stack + scroll */
  #storePage { align-items:flex-start; }
  .store-card-wrap{width:min(92%,420px);max-width:none;flex:none;}
  .store-row{
    align-items:center;
    gap:clamp(32px,5vh,64px);
    overflow-y:visible;
    padding:clamp(140px,14vh,160px) clamp(8px,2vw,24px);
    position:relative;
    z-index:6;
    width:100%;
  }
}
/* ── Store grid controls (mobile only) ── */
#storeGridControls {
  width:100%;
  flex-shrink:0;
  justify-content:space-evenly;
  align-items:center;
  padding:clamp(12px,3vh,28px) clamp(8px,2vw,24px) clamp(64px,5vh,100px);
  position:relative;
  z-index:6;
  flex-shrink:0;
  top:0;
  left:0;
  z-index:15;
  overflow:visible;
}
.grid-ctrl-btn {
  background:transparent;
  border:none;
  padding:6px;
  cursor:pointer;
  transition:opacity 0.2s;
  position:relative;
  width:auto;
  min-width:36px;
  height:44px;
  flex:none;
  margin:0 clamp(4px,1vw,10px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}
.grid-ctrl-btn.active {
  opacity:1.0;
}
.grid-ctrl-btn:not(.active) {
  opacity:0.55;
}
.grid-ctrl-btn:hover {
  opacity:0.80;
}
.grid-ctrl-grid {
  display:grid;
  gap:2px;
  width:auto;
  height:100%;
  aspect-ratio:auto;
}
.grid-ctrl-sq {
  width:10px;
  height:10px;
  border-radius:2px;
  background:rgba(255,255,255,0.70);
  flex-shrink:0;
}
.grid-ctrl-btn.active .grid-ctrl-sq {
  background:rgba(255,255,255,1.0);
}
.grid-ctrl-arrow {
  font-size:8px;
  color:rgba(37,22,46,0.70);
  margin-left:3px;
  line-height:1;
  align-self:center;
  flex-shrink:0;
}
.grid-ctrl-btn.active .grid-ctrl-arrow {
  color:rgba(37,22,46,0.95);
}
/* ── Action bar buttons ── */
.bar-bottom {
  gap:0;
  justify-content:space-evenly;
  padding:0 clamp(8px,3vw,24px);
}
.action-btn {
  position:relative;
  width:clamp(64px,14vw,88px);
  height:clamp(64px,14vw,88px);
  background:transparent;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  transition:opacity 0.2s;
  flex-shrink:0;
}
.action-btn:hover { opacity:0.75; }
.action-btn:active { opacity:1.0; transform:scale(0.92); }
/* ── Store item navigation arrows ── */
#storeItemNav {
  position:fixed;
  bottom:clamp(8px,2vh,20px);
  left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  padding:0 clamp(32px,8vw,96px);
  z-index:20;
  pointer-events:none;
  transition:opacity 0.6s ease;
}
.store-nav-btn {
  pointer-events:all;
  background:transparent;
  border:none;
  cursor:pointer;
  transform:scaleX(1.25);
  transform-origin:center center;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,0.70));
  transition:opacity 0.2s, transform 0.15s, filter 0.2s;
  border-radius:8px;
  padding:8px 12px;
  line-height:1;
}
.store-nav-btn:hover {
  opacity:0.75;
  transform:scaleX(1.25) scale(1.15);
  filter:drop-shadow(0 6px 20px rgba(0,0,0,0.85));
}
.store-nav-btn:hover {
  opacity:0.75;
  transform:scaleX(1.25) scale(1.15);
}
.store-nav-btn:active {
  transform:scaleX(1.25) scale(0.92);
}
.store-nav-home {
  position:relative;
  width:clamp(64px,14vw,88px);
  height:clamp(64px,14vw,88px);
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:scaleX(1.0) !important;
}
.store-nav-home:hover {
  transform:scale(1.15) !important;
}
.store-nav-home:active {
  transform:scale(0.92) !important;
}
/* Utility pages — wider cards */
#accountPage .sub-sticker-wrap,
#cartPage .sub-sticker-wrap {
  width:min(94vw, 720px) !important;
}
#settingsPage .sub-sticker-wrap,
#supportPage .sub-sticker-wrap {
  width:min(94vw, 620px) !important;
}

/* All utility pages — taller */
#accountPage .sub-design-container,
#cartPage .sub-design-container,
#settingsPage .sub-design-container,
#supportPage .sub-design-container {
  min-height:75vh;
  max-height:85vh;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}
#accountPage .sub-content,
#cartPage .sub-content,
#settingsPage .sub-content,
#supportPage .sub-content {
  flex:1;
  display:flex;
  flex-direction:column;
}
#accountPage .bar-bottom,
#cartPage .bar-bottom,
#settingsPage .bar-bottom,
#supportPage .bar-bottom,
#storeItemPage .bar-bottom,
#subPage .bar-bottom {
  height:auto !important;
  min-height:clamp(64px,10vw,88px);
  padding:0 clamp(8px,3vw,24px);
  flex-wrap:nowrap;
  gap:0;
  justify-content:space-evenly;
  align-items:center;
}
/* Cart page list items */
.cart-item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:clamp(8px,1.5vh,16px) 0;
  border-bottom:1px solid rgba(255,255,255,0.15);
  gap:12px;
  flex-shrink:0;
}
.cart-item-thumb {
  width:clamp(40px,8vw,64px);
  height:clamp(40px,8vw,64px);
  border-radius:6px;
  background:rgba(255,255,255,0.12);
  flex-shrink:0;
}
.cart-item-info {
  flex:1;
  text-align:left;
}
.cart-item-title {
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  font-size:clamp(14px,2.5vw,22px);
  font-weight:700;
  letter-spacing:0.06em;
  color:rgba(20,10,30,0.92);
  display:block;
}
.cart-item-price {
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(11px,1.8vw,16px);
  font-weight:300;
  color:rgba(255,255,255,0.70);
  letter-spacing:0.08em;
}
.cart-item-remove {
  background:transparent;
  border:none;
  color:rgba(20,10,30,0.65);
  font-size:clamp(16px,2.5vw,22px);
  cursor:pointer;
  padding:4px 8px;
  transition:color 0.2s;
  flex-shrink:0;
}
.cart-item-remove:hover { color:rgba(255,255,255,0.90); }
.cart-items-list {
  width:100%;
  display:flex;
  flex-direction:column;
  margin:clamp(8px,2vh,20px) 0;
}
.cart-empty {
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(13px,2vw,18px);
  font-weight:300;
  color:rgba(255,255,255,0.50);
  letter-spacing:0.10em;
  text-align:center;
  margin:clamp(16px,4vh,40px) 0;
}
button:focus,
button:focus-visible,
.action-btn:focus,
.action-btn:focus-visible,
.grid-ctrl-btn:focus,
.grid-ctrl-btn:focus-visible,
.store-nav-btn:focus,
.store-nav-btn:focus-visible,
.sub-back-btn:focus,
.sub-back-btn:focus-visible,
.store-back-btn:focus,
.store-back-btn:focus-visible {
  outline:none;
  caret-color:transparent;
}
#storeLoaderOverlay {
  position:fixed;left:0;top:0;width:100vw;height:100vh;
  z-index:150;display:flex;align-items:center;justify-content:center;
  transition:opacity 0.5s ease;
}
#storeLoaderCanvas {
  position:absolute;left:0;top:0;width:100%;height:100%;
}
/* ── Cart badge ── */
.cart-badge {
  position:absolute;
  top:-4px;
  right:-4px;
  background:rgba(255,255,255,0.95);
  color:rgba(20,10,30,0.92);
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  font-weight:900;
  letter-spacing:0.05em;
  width:18px;
  height:18px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  pointer-events:none;
}
.cart-lock-badge {
  font-size:14px;
  width:22px;
  height:22px;
  background:rgba(37,22,46,0.85);
  animation:lockBadgePop 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes lockBadgePop {
  0%   { transform:scale(0); }
  100% { transform:scale(1); }
}
/* ── Cart item backer ── */
.cart-item {
  position:relative;
}
.cart-item-backer {
  position:absolute;
  left:-10px;
  right:-10px;
  top:-10px;
  bottom:-10px;
  pointer-events:none;
  overflow:visible;
  z-index:0;
}
.cart-item > * {
  position:relative;
  z-index:1;
}

/* ── Cart thumbnail slideshow ── */
.cart-item-thumb {
  position:relative;
  width:clamp(56px,10vw,80px);
  height:clamp(56px,10vw,80px);
  border-radius:8px;
  overflow:hidden;
  flex-shrink:0;
  background:rgba(255,255,255,0.08);
  box-shadow:0 8px 24px rgba(0,0,0,0.60),
             0 3px 8px rgba(0,0,0,0.45),
             0 1px 3px rgba(0,0,0,0.30);
}
.cart-thumb-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:8px;
}
.cart-thumb-a { z-index:2; }
.cart-thumb-b { z-index:1; }

/* ── Cart separator and total ── */
.cart-separator {
  width:100%;
  height:2px;
  background:rgba(255,255,255,0.20);
  margin:clamp(8px,2vh,16px) 0;
  flex-shrink:0;
}
.cart-total {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:clamp(4px,1vh,8px) 0;
  flex-shrink:0;
}
.cart-total-label {
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  font-size:clamp(16px,3vw,24px);
  font-weight:900;
  letter-spacing:0.12em;
  color:rgba(20,10,30,0.85);
}
.cart-total-amount {
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(16px,3vw,24px);
  font-weight:400;
  color:rgba(20,10,30,0.85);
  letter-spacing:0.06em;
}

/* ── Payment icons ── */
.cart-payment-icons {
  display:flex;
  gap:clamp(8px,2vw,16px);
  justify-content:center;
  align-items:center;
  padding:clamp(8px,2vh,16px) 0;
  flex-shrink:0;
}
.pay-icon {
  height:clamp(18px,3vw,28px);
  width:auto;
  opacity:0.75;
  color:rgba(20,10,30,0.85);
}
/* ── Reload / new color button ── */
#reloadBtn {
  position:absolute;
  bottom:clamp(8px,2vh,20px);
  right:clamp(8px,2vw,20px);
  width:clamp(32px,4vw,48px);
  height:clamp(32px,4vw,48px);
  background:transparent;
  border:none;
  cursor:pointer;
  z-index:6;
  opacity:0.55;
  color:#ffffff;
  transition:opacity 0.2s, transform 0.2s;
  padding:4px;
}
#reloadBtn:hover {
  opacity:0.80;
  transform:scale(1.15) rotate(-15deg);
}
#reloadBtn:active {
  transform:scale(0.90) rotate(-30deg);
}
#reloadBtn svg {
  width:100%;
  height:100%;
}