/*
 * cri-one All-in-One Conveyor — standalone stylesheet
 *
 * Use this INSTEAD of the inline <style> block in conveyor-block.html if your
 * storefront's Content-Security-Policy blocks inline styles (Magento 2.4+ strict mode).
 *
 * Install:
 *   1. Copy this file to:
 *        app/design/frontend/<Vendor>/<theme>/web/css/conveyor.css
 *   2. Reference it from your theme's default_head_blocks.xml:
 *        app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml
 *        <head><css src="css/conveyor.css"/></head>
 *   3. Deploy:
 *        bin/magento setup:static-content:deploy -f
 *        bin/magento cache:flush
 *   4. Remove the <style> block from conveyor-block.html — keep only the <section>.
 */

:root{
  --conv-bg:#ffffff;
  --conv-ink:#0a0a0c;
  --conv-muted:#6b6f78;
  --conv-accent:#7b3ff2;
  --conv-accent-2:#4338ca;     /* deep indigo — was royal blue, toned down */
  --conv-card:#ffffff;
  --conv-card-2:#f4f5f8;
  --conv-rail:#e6e8ee;
  --conv-line:#d9dce3;
}

.conveyor{font:16px/1.5 Arial,Helvetica,sans-serif;color:var(--conv-ink)}

.conveyor .stage{
  position:relative;height:420px;margin:32px 0;
  overflow:visible;            /* let popovers spill below the rail */
  /* NO perspective — true isometric is orthographic, parallel lines stay parallel */
}
.conveyor .rail{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  /* True isometric ground plane: tilt forward 55°, swing -30° so X recedes diagonally. */
  transform:rotateX(25deg) rotateZ(-12deg);
}
.conveyor .rail::before{
  content:"";
  position:absolute;left:-10vw;right:-10vw;top:55%;
  height:120px;
  background:linear-gradient(180deg,transparent,var(--conv-rail) 30%,var(--conv-rail) 70%,transparent);
  transform:translateZ(-40px);
}
.conveyor .track{
  position:absolute;top:18%;left:0;
  display:flex;gap:28px;padding:0 4vw;
  transform-style:preserve-3d;     /* preserve the iso 3D context for the card billboards */
  animation:conv-slide 38s linear infinite;
  will-change:transform;
}
.conveyor .stage:hover .track{animation-play-state:paused}
@keyframes conv-slide{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}

.conveyor .card{
  flex:0 0 240px;height:240px;
  border-radius:2px;
  background:linear-gradient(160deg,var(--conv-card),var(--conv-card-2));
  border:1px solid var(--conv-line);
  box-shadow:0 18px 30px -18px rgba(20,22,40,.18),0 1px 0 rgba(255,255,255,.6) inset;
  padding:18px 18px 14px;
  display:flex;flex-direction:column;justify-content:space-between;
  color:inherit;text-decoration:none;
  /* Counter-rotate to cancel the rail's iso transform — card face is a billboard toward the camera. */
  transform:rotateZ(12deg) rotateX(-25deg);
  transform-origin:center bottom;
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;
  position:relative;
}
.conveyor .card:hover,
.conveyor .card:focus-visible{
  /* Lift along the card's local Z (post-counter-rotate) — pops toward the camera. */
  transform:rotateZ(12deg) rotateX(-25deg) translateZ(36px) scale(1.05);
  box-shadow:0 32px 48px -20px rgba(67,56,202,.28),0 0 0 1px var(--conv-accent) inset;
  border-color:var(--conv-accent);
  z-index:5;outline:none;
}

.conveyor .thumb{
  height:130px;border-radius:1px;
  background:linear-gradient(135deg,var(--conv-accent) 0%,var(--conv-accent-2) 100%);
  overflow:hidden;display:grid;place-items:center;
}
.conveyor .thumb img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}

.conveyor .meta{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.conveyor .name{font-size:14px;font-weight:600;line-height:1.25;margin:0;color:var(--conv-ink)}
.conveyor .price{font-size:13px;color:var(--conv-accent-2);font-weight:600;white-space:nowrap}
.conveyor .price .price{font-size:13px;color:var(--conv-accent-2)}

.conveyor .badge{
  position:absolute;top:10px;right:10px;
  background:linear-gradient(135deg,var(--conv-accent),var(--conv-accent-2));
  color:#fff;
  font-size:10px;font-weight:700;text-transform:uppercase;
  padding:3px 7px;border-radius:1px;
  letter-spacing:.6px;
  box-shadow:0 4px 10px -3px rgba(123,63,242,.5);
  z-index:2;
}

/* deep description popover — drops below the card on hover, holds up to 4 paragraphs */
.conveyor .desc{
  position:absolute;
  top:calc(100% + 18px);
  left:50%;
  width:340px;
  background:#fff;
  border:1px solid var(--conv-line);
  border-top:3px solid transparent;
  border-image:linear-gradient(90deg,var(--conv-accent),var(--conv-accent-2)) 1;
  box-shadow:0 28px 60px -22px rgba(20,22,40,.45),0 8px 18px -10px rgba(67,56,202,.15);
  padding:18px 20px 16px;
  text-align:left;
  color:var(--conv-ink);
  font-size:12.5px;line-height:1.55;
  transform:translateX(-50%) translateY(10px);
  opacity:0;visibility:hidden;
  pointer-events:none;
  transition:opacity .35s cubic-bezier(.2,.7,.2,1),transform .35s cubic-bezier(.2,.7,.2,1),visibility .35s;
  z-index:10;
}
.conveyor .desc-title{
  font-size:13px;font-weight:700;color:var(--conv-ink);
  margin:0 0 10px;padding-bottom:8px;
  border-bottom:1px solid var(--conv-line);
  letter-spacing:.2px;
}
.conveyor .desc-body{
  max-height:260px;overflow:hidden;
  position:relative;color:var(--conv-muted);
}
.conveyor .desc-body p{margin:0 0 9px}
.conveyor .desc-body p:last-child{margin-bottom:0}
.conveyor .desc-body::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:36px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff);
  pointer-events:none;
}
.conveyor .desc-cta{
  margin-top:12px;padding-top:10px;
  border-top:1px solid var(--conv-line);
  display:flex;justify-content:space-between;align-items:center;
  color:var(--conv-accent);
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;
}
.conveyor .desc-cta::after{content:"→";color:var(--conv-accent-2);font-size:14px}
.conveyor .card:hover .desc,
.conveyor .card:focus-visible .desc{
  opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0);
}

/* "Recently acquired" social-proof panel, pinned lower-left of the stage */
.conveyor .acquired{
  position:absolute;left:24px;bottom:18px;
  width:280px;background:#fff;
  border:1px solid var(--conv-line);
  border-left:3px solid transparent;
  border-image:linear-gradient(180deg,var(--conv-accent),var(--conv-accent-2)) 1;
  box-shadow:0 18px 32px -18px rgba(20,22,40,.28);
  padding:12px 14px;z-index:8;
  font-size:11px;color:var(--conv-ink);
}
.conveyor .acquired h4{
  margin:0 0 8px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.7px;
  color:var(--conv-accent);
}
.conveyor .acquired ul{list-style:none;margin:0;padding:0}
.conveyor .acquired li{
  display:flex;align-items:center;gap:8px;
  padding:5px 0;border-top:1px solid #f0f1f5;
}
.conveyor .acquired li:first-child{border-top:0}
.conveyor .acquired .dot{
  flex:0 0 8px;width:8px;height:8px;
  background:linear-gradient(135deg,var(--conv-accent),var(--conv-accent-2));
  border-radius:50%;
}
.conveyor .acquired .body{flex:1;min-width:0}
.conveyor .acquired .row1{
  display:flex;justify-content:space-between;gap:8px;
  font-weight:600;color:var(--conv-ink);line-height:1.2;
}
.conveyor .acquired .row1 .p{color:var(--conv-accent-2)}
.conveyor .acquired .row2{color:var(--conv-muted);font-size:10.5px;margin-top:2px}
.conveyor .acquired .row2 b{color:var(--conv-ink);font-weight:600}

/* "unowned" row variant — rarity framing instead of social proof */
.conveyor .acquired li.unowned .dot{
  background:transparent;
  border:1.5px solid var(--conv-accent);
  box-shadow:0 0 0 2px rgba(123,63,242,.12);
}
.conveyor .acquired li.unowned .row2{color:var(--conv-accent);font-weight:500}
.conveyor .acquired li.unowned .row2 b{
  color:var(--conv-accent-2);font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;font-size:9.5px;
  margin-right:2px;
}

@media (max-width:768px){
  .conveyor .stage{height:auto;margin:16px 0}
  .conveyor .rail{transform:none;position:static}
  .conveyor .rail::before{display:none}
  .conveyor .track{position:static;animation:none;flex-direction:column;padding:0 16px;gap:14px}
  .conveyor .card{flex:0 0 auto;width:100%;transform:none}
  .conveyor .card:hover{transform:translateY(-4px) scale(1.01)}
  .conveyor .desc{
    position:static;width:auto;
    transform:none;opacity:1;visibility:visible;
    margin-top:12px;box-shadow:none;border-top-width:2px;
  }
  .conveyor .desc-body{max-height:none}
  .conveyor .desc-body::after{display:none}
  .conveyor .acquired{position:static;width:auto;margin:14px 16px 0}
}

@media (prefers-reduced-motion:reduce){
  .conveyor .track{animation:none}
}

/* ============================================================
   Conveyor controls bar — search, category, shuffle, pause
   ============================================================ */
.conveyor-controls{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:12px 18px;margin:24px 0 0;
  background:var(--conv-card-2);
  border:1px solid var(--conv-line);
  border-radius:2px;
  font:13px Arial,Helvetica,sans-serif;
  position:relative;z-index:60;
}
.conveyor-search{
  flex:1 1 200px;min-width:160px;
  padding:8px 12px;
  font:inherit;
  background:#fff;
  color:var(--conv-ink);
  border:1px solid var(--conv-line);
  border-radius:1px;
  -webkit-appearance:none;appearance:none;
}
.conveyor-search:focus{
  outline:none;
  border-color:var(--conv-accent);
  box-shadow:0 0 0 3px rgba(123,63,242,.18);
}
.conveyor-category{
  flex:0 0 auto;
  padding:8px 28px 8px 12px;
  font:inherit;
  background:#fff;
  color:var(--conv-ink);
  border:1px solid var(--conv-line);
  border-radius:1px;
  cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--conv-accent) 50%),linear-gradient(135deg,var(--conv-accent) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
.conveyor-shuffle,.conveyor-pause,.conveyor-submit{
  flex:0 0 auto;
  padding:8px 14px;
  font:inherit;font-weight:700;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.6px;
  color:#fff;
  background:linear-gradient(135deg,var(--conv-accent),var(--conv-accent-2));
  border:0;border-radius:1px;
  cursor:pointer;
  box-shadow:0 4px 10px -3px rgba(123,63,242,.5);
  transition:transform .15s,box-shadow .15s,filter .15s;
}
.conveyor-shuffle:hover,.conveyor-pause:hover,.conveyor-submit:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px -3px rgba(123,63,242,.6);
}
.conveyor-shuffle:active,.conveyor-pause:active,.conveyor-submit:active{transform:translateY(0)}
.conveyor-pause[data-paused="true"]{filter:saturate(0.6) brightness(1.1)}
.conveyor-submit{
  background:linear-gradient(135deg,var(--conv-accent-2),var(--conv-accent));
}

/* Filtered-out cards: hide without breaking the flex layout entirely */
.conveyor .card.filtered-out{display:none}

@media (max-width:768px){
  .conveyor-controls{padding:10px 14px;margin:14px 16px 0}
  .conveyor-shuffle,.conveyor-pause,.conveyor-submit{flex:1 1 calc(33.33% - 7px)}
}
