/* ===========================================================
   BUNDLES PAGE + PAGE SWITCH + CART
   =========================================================== */
:root{ --bundle-yellow:#ffe11a; }

/* --- nav page-switch button (yellow pill, matches the nav pill row) --- */
.nav-links a.page-switch,
.page-switch{
  appearance:none; cursor:pointer; font-family:inherit;
  padding:13px 22px; margin:20px 0;
  width:98px; flex:0 0 98px;
  border:1px solid transparent; border-radius:999px;
  font-weight:900; font-size:13px; letter-spacing:.05em; text-transform:uppercase;
  line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  background:#f6c52e;
  box-shadow:none;
  color:#241c00;
  transition:box-shadow .2s ease, filter .2s ease;
}
.page-switch:hover{ filter:brightness(1.05); }
.page-switch:active{
  background:#241c00; color:#ffe35a;
  box-shadow:inset 0 0 0 1px rgba(255,225,26,.5);
  filter:none;
}

/* --- nav cart icon --- */
.nav-cart{
  position:relative; appearance:none; cursor:pointer;
  width:46px; height:40px; flex:0 0 46px; border-radius:13px; margin:20px 0;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05); color:#f4f6f8; font-size:17px;
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, border-color .18s ease;
}
.nav-cart:hover{ background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.2); }
.nav-cart-count{
  position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 4px;
  border-radius:9px; background:var(--bundle-yellow); color:#1a1500;
  font-size:10px; font-weight:900; display:flex; align-items:center; justify-content:center;
}
.nav-cart-count[hidden]{ display:none; }

/* --- bundles page overlay + whoosh --- */
.bundles-page{
  position:fixed; inset:0; z-index:9000;
  background:#0c0c0d; color:#f4f6f8;
  overflow-y:auto; overflow-x:auto;
  transform:translateX(100%);
  transition:transform .5s cubic-bezier(.66,0,.2,1), filter .5s ease;
  pointer-events:none; filter:blur(8px);
  -webkit-overflow-scrolling:touch;
}
.bundles-page.is-open{ transform:translateX(0); pointer-events:auto; filter:blur(0); }
html.bundles-active body{ overflow:hidden; }
html.bundles-active .page{ filter:blur(6px); transition:filter .5s ease; }

.bundles-shell{
  position:relative; z-index:1;
  max-width:2480px; margin:0 auto; padding:110px 36px 90px;
}

/* --- configurable background for the Bundles page (like the main page) --- */
.bundles-page::before{
  content:""; position:fixed; inset:0; z-index:0;
  background-image: var(--bbg-image, none);
  background-size: var(--bbg-size, cover);
  background-position:center;
  background-repeat: var(--bbg-repeat, no-repeat);
  opacity: var(--bbg-opacity, 0);
  filter: brightness(var(--bbg-brightness,1)) saturate(var(--bbg-sat,1)) blur(var(--bbg-blur,0px));
  pointer-events:none;
  animation: bundlesBgDrift var(--bbg-tile-duration,30s) linear infinite;
}
.bundles-page.bbg-paused::before{ animation:none; }
@keyframes bundlesBgDrift{
  from{ background-position:0 0; }
  to{ background-position: var(--bbg-tile-x,0) var(--bbg-tile-y,0); }
}

/* --- category row --- */
.bundle-cat{ margin-bottom:54px; }
.bundle-cat:last-child{ margin-bottom:0; }
.bundle-cat-header{ display:flex; align-items:center; gap:16px; margin:0 0 20px; }
.bundle-cat-title{
  font-size:34px; font-weight:950; letter-spacing:.4px; text-transform:uppercase;
  white-space:nowrap; color:#f4f6f8;
}
.bundle-cat-title.admin-editable-title{
  cursor:pointer; border-radius:8px; padding:2px 8px; margin:-2px -8px;
  transition:background .15s, box-shadow .15s;
}
.bundle-cat-title.admin-editable-title:hover{
  background:rgba(120,170,255,.14);
  box-shadow:inset 0 0 0 1px rgba(120,170,255,.45);
}
.bundle-cat-rule{ height:1px; background:rgba(255,255,255,.16); }
.bundle-cat-rule.short{ width:48px; flex:0 0 auto; }
.bundle-cat-rule.long{ flex:1; min-width:20px; }
.bundle-cat-explore{
  font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(244,246,248,.42); white-space:nowrap;
}
/* --- sort control (right side of the category header) --- */
.bundle-cat-sort{
  flex:0 0 auto;
  display:flex; align-items:center; gap:10px;
  font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#f4f6f8; white-space:nowrap;
}
.bundle-cat-sort select{
  width:auto; min-width:150px;
  padding:9px 14px; border-radius:8px;
  border:1px solid rgba(255,225,26,.45); background:#1b1b1d;
  color:#f4f6f8; font-weight:800; cursor:pointer;
}
.bundle-cat-sort select option{ background:#1b1b1d; color:#f4f6f8; }

/* --- View all button (assets block, > 3 rows) --- */
.bundle-viewall-btn{
  width:100%; margin-top:2px; padding:12px; cursor:pointer;
  border:1px solid rgba(255,255,255,.1); border-radius:12px;
  background:rgba(255,255,255,.03); color:#f4f6f8;
  font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  transition:background .15s ease, border-color .15s ease;
}
.bundle-viewall-btn:hover{ background:rgba(255,225,26,.12); border-color:rgba(255,225,26,.4); }
/* invisible spacer in pack/bundle blocks that mirrors the viewall height,
   keeping the pack/bundle panel centered against the assets PANEL */
.bundle-viewall-spacer{ flex:none; height:0; }

/* --- three blocks: Assets | Packs | Bundles, equal gaps --- */
.bundle-cat-body{ display:flex; gap:36px; align-items:stretch; }
.bundle-block{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.bundle-block.assets{ flex:5; }
.bundle-block.packs{ flex:1; }
.bundle-block.bundles{ flex:1; }
.bundle-block-label{
  font-size:14px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  color:#f4f6f8; line-height:1;
  padding-left:11px; border-left:3px solid var(--bundle-yellow);
}
.admin-active .bundle-block.packs .bundle-block-label,
.admin-active .bundle-block.bundles .bundle-block-label{
  cursor:pointer;
  transition:color .14s ease, text-shadow .14s ease;
}
.admin-active .bundle-block.packs .bundle-block-label:hover,
.admin-active .bundle-block.bundles .bundle-block-label:hover{
  color:var(--bundle-yellow);
  text-shadow:0 0 18px rgba(255,210,31,.22);
}
.bundle-block-panel{
  flex:none; min-height:0; display:flex;
  background:rgba(255,255,255,.022);
  border:1px solid rgba(255,255,255,.055);
  border-radius:16px; padding:10px;
}
/* assets panel sits at the top — it drives the row height */
.bundle-block.assets .bundle-block-panel{ margin:0; }
/* pack stays top-aligned; bundles follows the viewport inside its category. */
.bundle-block.packs, .bundle-block.bundles{ position:relative; }
.bundle-block.packs .bundle-block-panel{
  position:relative;
  margin:0;
}
.bundle-block.bundles .bundle-block-panel{
  position:absolute;
  left:0;
  right:0;
  top:var(--bundle-panel-top, 0px);
  transform:none;
  margin:0;
}
.bundle-cat-grid{
  flex:1; min-width:0;
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:20px; align-content:start;
}
.bundle-block.packs > .bundle-block-panel{
  position:relative;
  left:auto;
  right:auto;
  top:auto;
  transform:none;
  margin:0;
}

/* --- square card (fills its grid column / carousel width) --- */
.bundle-card, .bundle-pack-card{
  position:relative; cursor:pointer;
  width:100%; aspect-ratio:1/1;
  border-radius:10px; overflow:hidden;
  background:transparent; border:0;
  transition:transform .18s ease, box-shadow .18s ease;
}
.bundle-card:hover, .bundle-pack-card:hover{
  transform:translateY(-3px);
  box-shadow:none;
}
.bundle-card img, .bundle-pack-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.bundle-card-hit{ position:absolute; inset:0; z-index:1; display:block; }
.bundle-cart-btn{
  position:absolute; top:7px; right:7px; z-index:3;
  width:32px; height:32px; border-radius:8px; border:0; cursor:pointer;
  background:rgba(12,12,13,.82); color:#fff; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(-4px);
  transition:opacity .16s ease, transform .16s ease, background .16s ease, color .16s ease;
}
.bundle-card:hover .bundle-cart-btn{ opacity:1; transform:translateY(0); }
.bundle-cart-btn:hover{ background:var(--bundle-yellow); color:#1a1500; }
.bundle-cart-btn.in-cart{ opacity:1; transform:translateY(0); background:var(--bundle-yellow); color:#1a1500; }

/* cart button on Lines asset cards */
.asset-cart-btn{
  position:absolute; top:8px; right:8px; z-index:85;
  width:34px; height:34px; border-radius:9px; border:0; cursor:pointer;
  background:rgba(12,12,13,.82); color:#fff; font-size:15px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(-4px);
  transition:opacity .16s ease, transform .16s ease, background .16s ease, color .16s ease;
}
.asset-wrap:hover .asset-cart-btn{ opacity:1; transform:translateY(0); }
.asset-cart-btn:hover{ background:var(--bundle-yellow); color:#1a1500; }
.asset-cart-btn.in-cart{ opacity:1; transform:translateY(0); background:var(--bundle-yellow); color:#1a1500; }
body.admin-active .asset-cart-btn{ display:none; }

/* --- carousel: sizes to its content; JS caps height when rotation is needed --- */
.bundle-carousel{
  flex:1;
  position:relative; overflow:hidden; border-radius:8px;
}
/* fade mask only while the carousel is actively rotating */
.bundle-carousel.is-rotating{
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
}
.bundle-carousel-track{
  position:relative;
  display:flex; flex-direction:column; gap:20px; will-change:transform;
}
.bundle-carousel-empty{
  padding:22px 8px; text-align:center; color:rgba(244,246,248,.4); font-size:11px;
  border:1px dashed rgba(255,255,255,.14); border-radius:10px;
}

/* --- admin affordances --- */
.bundle-card.admin-editable::after,
.bundle-pack-card.admin-editable::after{
  content:"EDIT"; position:absolute; left:7px; top:7px; z-index:3;
  font-size:8px; font-weight:900; letter-spacing:.1em;
  background:#e23636; color:#fff; padding:3px 6px; border-radius:3px; pointer-events:none;
}
/* hide the cart button in admin mode — admin uses the on-card controls instead */
body.admin-active .bundle-cart-btn{ display:none; }
body.admin-active .bundle-card.admin-editable,
body.admin-active .bundle-pack-card.admin-editable{
  cursor:grab;
}
body.admin-active .bundle-card.admin-editable.catalog-dragging,
body.admin-active .bundle-pack-card.admin-editable.catalog-dragging{
  opacity:.45;
  cursor:grabbing;
}
/* Shared drag-reorder insertion line (catalog page + reorder modals). */
.drag-insert-line{
  position:absolute;
  width:4px;
  border-radius:4px;
  background:var(--bundle-yellow, #ffd400);
  box-shadow:0 0 10px rgba(255,212,0,.75);
  z-index:40;
  pointer-events:none;
}
/* quick delete / duplicate controls on each card (admin, on hover) */
.bundle-card-admin{
  position:absolute; top:7px; right:7px; z-index:4;
  display:flex; gap:5px;
  opacity:0; transform:translateY(-5px); pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.bundle-card:hover .bundle-card-admin,
.bundle-pack-card:hover .bundle-card-admin{ opacity:1; transform:translateY(0); pointer-events:auto; }
.bundle-card-admin button{
  width:28px; height:28px; border-radius:7px; cursor:pointer; border:0;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:900; line-height:1;
  background:rgba(12,12,13,.88); color:#fff;
  transition:background .14s ease, color .14s ease;
}
.bundle-card-dup:hover{ background:var(--bundle-yellow); color:#1a1500; }
.bundle-card-del:hover{ background:#e23636; color:#fff; }
.bundles-empty{ color:rgba(244,246,248,.4); font-size:13px; padding:40px 0; }

/* --- cart panel --- */
.cart-backdrop{ position:fixed; inset:0; z-index:9995; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .25s ease; }
.cart-backdrop.open{ opacity:1; pointer-events:auto; }
.cart-panel{
  position:fixed; top:0; right:0; bottom:0; width:380px; max-width:92vw; z-index:9996;
  background:#121213; border-left:1px solid rgba(255,255,255,.1);
  transform:translateX(100%); transition:transform .32s cubic-bezier(.66,0,.2,1);
  display:flex; flex-direction:column;
}
.cart-panel.open{ transform:translateX(0); }
.cart-head{ padding:22px 22px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.08); }
.cart-head h3{ margin:0; font-size:18px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:#f4f6f8; }
.cart-close{ background:none; border:0; color:rgba(244,246,248,.6); font-size:24px; cursor:pointer; line-height:1; }
.cart-close:hover{ color:#f4f6f8; }
.cart-list{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.cart-empty{ color:rgba(244,246,248,.4); text-align:center; padding:46px 10px 14px; font-size:13px; }
.cart-undo{ display:block; margin:0 auto; border:1px solid rgba(255,255,255,.16); border-radius:9px; padding:10px 18px; cursor:pointer; background:transparent; color:rgba(244,246,248,.8); font-weight:800; font-size:13px; letter-spacing:.03em; transition:border-color .14s ease, color .14s ease, background .14s ease; }
.cart-undo:hover{ border-color:var(--bundle-yellow); color:var(--bundle-yellow); }
.cart-item{ display:flex; gap:12px; align-items:center; background:#191919; border:1px solid rgba(255,255,255,.06); border-radius:9px; padding:9px; }
.cart-item-thumb{ width:58px; height:58px; border-radius:7px; overflow:hidden; flex:0 0 auto; background:#0e0e0f; }
.cart-item-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.cart-item-body{ flex:1; min-width:0; }
.cart-item-label{ font-size:13px; font-weight:800; color:#f4f6f8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-item-price{ margin-top:5px; display:flex; align-items:baseline; gap:8px; }
.cart-item-best{ font-size:15px; font-weight:900; color:var(--bundle-yellow); }
.cart-item-old{ font-size:12px; color:rgba(244,246,248,.42); text-decoration:line-through; }
.cart-item-soon{ font-size:12px; color:rgba(244,246,248,.42); }
.cart-item-remove{ background:none; border:0; color:rgba(244,246,248,.4); font-size:18px; cursor:pointer; flex:0 0 auto; line-height:1; }
.cart-item-remove:hover{ color:#ff6b6b; }
.cart-foot{ padding:16px 20px 20px; border-top:1px solid rgba(255,255,255,.08); }
.cart-total-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.cart-total-label{ color:rgba(244,246,248,.6); font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.cart-total-val{ font-size:22px; font-weight:950; color:#f4f6f8; }
.cart-total-old{ font-size:13px; color:rgba(244,246,248,.42); text-decoration:line-through; margin-left:8px; }
.cart-checkout{ width:100%; border:0; border-radius:9px; padding:14px; cursor:pointer; background:var(--bundle-yellow); color:#1a1500; font-weight:950; font-size:15px; letter-spacing:.04em; text-transform:uppercase; }
.cart-checkout:hover{ filter:brightness(1.06); }
.cart-checkout:disabled{ opacity:.4; cursor:not-allowed; }
.cart-clear{ width:100%; margin-top:8px; border:1px solid rgba(255,255,255,.14); border-radius:9px; padding:11px; cursor:pointer; background:transparent; color:rgba(244,246,248,.72); font-weight:800; font-size:13px; letter-spacing:.04em; text-transform:uppercase; transition:border-color .14s ease, color .14s ease; }
.cart-clear:hover{ border-color:#ff6b6b; color:#ff6b6b; }

/* "Open at best price" modal — clickable per-item Buy links (no pop-up blocking) */
.deal-intro{ color:rgba(244,246,248,.66); font-size:13px; margin:0 0 14px; }
.deal-list{ display:flex; flex-direction:column; gap:10px; }
.deal-row{ display:flex; align-items:center; gap:12px; background:#191919; border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:10px; }
.deal-thumb{ width:54px; height:54px; border-radius:7px; overflow:hidden; flex:0 0 auto; background:#0e0e0f; }
.deal-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.deal-info{ flex:1; min-width:0; }
.deal-label{ font-size:14px; font-weight:800; color:#f4f6f8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.deal-store{ margin-top:4px; font-size:12px; color:rgba(244,246,248,.5); }
.deal-buy{ flex:0 0 auto; text-decoration:none; border:0; border-radius:8px; padding:10px 18px; background:var(--bundle-yellow); color:#1a1500; font-weight:900; font-size:13px; letter-spacing:.03em; text-transform:uppercase; transition:filter .14s ease; }
.deal-buy:hover{ filter:brightness(1.07); }
.deal-buy.disabled{ background:rgba(255,255,255,.08); color:rgba(244,246,248,.4); pointer-events:none; }

@media (max-width:1100px){
  .bundles-shell{ padding:110px 20px 70px; }
  .bundle-cat-header{
    flex-wrap:wrap;
    align-items:flex-start;
    gap:10px 14px;
  }
  .bundle-cat-rule.long{ flex-basis:100%; }
  .bundle-cat-sort{
    margin-left:0;
  }
  .bundle-cat-body{ flex-direction:column; gap:24px; }
  .bundle-block.assets, .bundle-block.packs, .bundle-block.bundles{ flex:none; }
  .bundle-cat-grid{ grid-template-columns:repeat(3,1fr); }
  .bundle-block.packs .bundle-block-panel,
  .bundle-block.bundles .bundle-block-panel{
    position:relative; left:auto; right:auto; top:auto;
    transform:none; height:360px;
  }
  .bundle-cat-title{ font-size:26px; }
}
@media (max-width:560px){
  .bundles-shell{ padding:92px 12px 56px; }
  .bundle-cat{ margin-bottom:34px; }
  .bundle-cat-header{ margin-bottom:14px; }
  .bundle-cat-title{ font-size:22px; flex-basis:100%; }
  .bundle-cat-explore{ font-size:9px; letter-spacing:.28em; }
  .bundle-cat-sort{
    width:100%;
    justify-content:space-between;
  }
  .bundle-cat-sort select{
    min-width:0;
    max-width:58vw;
  }
  .bundle-cat-grid{ grid-template-columns:repeat(2,1fr); }
  .bundle-block-panel{
    padding:7px;
    border-radius:12px;
  }
  .bundle-block.packs .bundle-block-panel,
  .bundle-block.bundles .bundle-block-panel{
    height:300px;
  }
  .bundle-carousel-track{ gap:14px; }
  .bundle-viewall-btn{ border-radius:10px; padding:10px; }
}

/* Bundles page fixed close control. Extracted first because it has no JS dependencies. */
.bundles-close-track{
  position:fixed; top:123px; left:19px; z-index:9001;
  opacity:0;
  pointer-events:none;
  transition:opacity .14s ease;
}
html.bundles-active .bundles-close-track{
  opacity:1;
  pointer-events:auto;
  transition:opacity .4s ease .5s;
}
.bundles-close{
  position:relative;
  width:27px; height:27px;
  border-radius:50%;
  background:transparent;
  border:2px solid rgba(255,255,255,.85);
  cursor:pointer; opacity:.92;
  animation: bundlesCloseBreath 2.6s ease-in-out infinite alternate;
  transition:border-color .28s ease, transform .28s ease, background .28s ease;
}
.bundles-close::before,
.bundles-close::after{
  content:""; position:absolute; left:50%; top:50%;
  width:24px; height:3px; border-radius:2px; background:#fff;
  opacity:0;
  transition:transform .28s ease, opacity .28s ease;
}
.bundles-close::before{ transform:translate(-50%,-50%) rotate(45deg) scaleX(0); }
.bundles-close::after{ transform:translate(-50%,-50%) rotate(-45deg) scaleX(0); }
.bundles-close:hover{
  opacity:1;
  border-color:transparent;
  transform:scale(.82);
}
.bundles-close:hover::before{ transform:translate(-50%,-50%) rotate(45deg) scaleX(1); opacity:1; }
.bundles-close:hover::after{ transform:translate(-50%,-50%) rotate(-45deg) scaleX(1); opacity:1; }
@keyframes bundlesCloseBreath{ from{ scale:1; } to{ scale:1.12; } }