/* Premium surfaces share the existing action/state engine and theme radius. */
html body .yl-cart-menu.yl-card-fan[data-cart-premium] {
  --premium-accent: var(--palette-light, #65e8e5);
  --premium-ink: var(--palette-dark, #123c53);
  background: radial-gradient(ellipse at center, rgba(12,28,46,calc(.25 * var(--cart-menu-opacity,1))), transparent 75%);
}
html body .yl-cart-menu[data-cart-premium] .yl-card-fan__stage { isolation: isolate; }
html body .yl-cart-menu[data-cart-premium] .yl-card-fan__stage::before,
html body .yl-cart-menu[data-cart-premium] .yl-card-fan__stage::after {
  content: ''; position: absolute; pointer-events: none; z-index: -1;
  opacity: var(--cart-menu-opacity,1); border-radius: var(--cart-radius);
}
html body .yl-cart-menu.yl-card-fan[data-cart-premium] .yl-card-fan__button {
  --w: 22%; --h: 22%; --radius: var(--cart-radius);
  border-width: .6cqw; border-color: #ffffffa6;
  font-size: 4cqw; box-shadow: inset 0 1px 0 #ffffff65, 0 3px 10px #020b2160;
  transform: translate(-50%,-50%) translate(var(--enter-x,0px),var(--enter-y,14px)) rotate(var(--enter-turn,0deg)) scale(var(--enter-scale,.65));
}
html body .yl-fan-open .yl-cart-menu.yl-card-fan[data-cart-premium] .yl-card-fan__button { transform: translate(-50%,-50%); }
html body .yl-cart-menu.yl-card-fan[data-cart-premium] .yl-card-fan__button:not(.yl-card-fan__button--cart) span { display: none; }
html body .yl-cart-menu.yl-card-fan[data-cart-premium] .yl-card-fan__button i { font-size: 9cqw; }
html body .yl-cart-menu.yl-card-fan[data-cart-premium] .yl-card-fan__button--cart {
  --w: 38%; --h: 38%; font-size: 5cqw; gap: 2cqw;
  background: linear-gradient(145deg,#fff,#daefef); color: #122d3c; border-color: var(--premium-accent);
}
html body .yl-cart-menu.yl-card-fan[data-cart-premium] .yl-card-fan__button--cart i { font-size: 15cqw; }

/* 11 — orbital instruments: small satellites, double orbit, central core. */
html body .yl-cart-menu[data-cart-model="orbit"] .yl-card-fan__stage::before { inset: 11%; border-radius: 50%; border: 1px solid var(--premium-accent); box-shadow: 0 0 12px #4ce5ed60,inset 0 0 15px #4ce5ed25; }
html body .yl-cart-menu[data-cart-model="orbit"] .yl-card-fan__stage::after { inset: 22%; border-radius: 50%; border: 1px dashed #b3faff99; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="orbit"] .yl-card-fan__button { --radius: 50%; --enter-turn: -65deg; --enter-scale: .3; --enter-y: 0px; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="orbit"] .yl-card-fan__button--cart { --w: 36%; --h: 36%; background: #081f35; color: #e9ffff; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="orbit"] .yl-card-fan__button--cart i { color: #82f8d1; }

/* 12 — cut gemstone keys around a faceted purchase prism. */
html body .yl-cart-menu[data-cart-model="crystal"] .yl-card-fan__stage::before { inset: 3%; background: linear-gradient(135deg,#eefaff55,transparent 45%,#86eaff33); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
html body .yl-cart-menu.yl-card-fan[data-cart-model="crystal"] .yl-card-fan__button { --w: 29%; --h: 29%; --radius: 0; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); --enter-turn: 90deg; --enter-y: 0px; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="crystal"] .yl-card-fan__button--cart { --w: 90%; --h: 28%; flex-direction: row; clip-path: polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%); }

/* 13 — numbered command terminal, tall but deliberate independent purchase column. */
html body .yl-cart-menu[data-cart-model="console"] .yl-card-fan__stage::before { inset: 1%; background: #071725; border: 1px solid var(--premium-accent); box-shadow: inset 0 0 22px #188ca733; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="console"] .yl-card-fan__button { --w: 57%; --h: 12%; --enter-x: -22px; --enter-y: 0px; --enter-scale: 1; flex-direction: row; justify-content: flex-start; gap: 2cqw; padding: 1cqw 2cqw; border: 0; border-bottom: 1px solid #b8faff55; background: #143746; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="console"] .yl-card-fan__button:not(.yl-card-fan__button--cart) span { display: block; font-size: 3.8cqw; }
html body .yl-cart-menu[data-cart-model="console"] .yl-card-fan__button:not(.yl-card-fan__button--cart)::before { content: attr(data-premium-number); color: #95d9e2; font: 3cqw monospace; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="console"] .yl-card-fan__button i { font-size: 6cqw; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="console"] .yl-card-fan__button--cart { --w: 26%; --h: 82%; flex-direction: column; justify-content: center; border: 1px solid var(--premium-accent); font-size: 5cqw; background: linear-gradient(160deg,#e4ffff,#96c7d1); color: #102c38; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="console"] .yl-card-fan__button--cart i { font-size: 16cqw; }

/* 14 — staggered luminous steps, not a rectangular toolbar. */
html body .yl-cart-menu[data-cart-model="steps"] .yl-card-fan__stage::before { inset: 5%; background: linear-gradient(35deg,transparent 46%,#5ce5f455 47%,#5ce5f455 49%,transparent 50%); }
html body .yl-cart-menu.yl-card-fan[data-cart-model="steps"] .yl-card-fan__button { --w: 28%; --h: 12%; --enter-x: -25px; --enter-y: -12px; --enter-scale: .8; border-bottom: 2px solid var(--premium-accent); box-shadow: 0 3px 0 #071e3a99,0 6px 10px #0003; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="steps"] .yl-card-fan__button--cart { --w: 34%; --h: 22%; flex-direction: row; font-size: 4cqw; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="steps"] .yl-card-fan__button--cart i { font-size: 10cqw; }

/* 15 — asymmetric glass dashboard: different cell sizes surround the purchase tile. */
html body .yl-cart-menu[data-cart-model="bento"] .yl-card-fan__stage::before { inset: 1%; background: linear-gradient(140deg,#e8fbffad,#6e90a033); border: 1px solid #ffffffa3; backdrop-filter: blur(7px); }
html body .yl-cart-menu.yl-card-fan[data-cart-model="bento"] .yl-card-fan__button { --w: 30%; --h: 24%; --enter-y: 20px; --enter-scale: .9; box-shadow: inset 0 0 0 1px #ffffff55,0 5px 10px #102c3733; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="bento"] [data-premium-slot="2"] { --w: 24%; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="bento"] :is([data-premium-slot="3"],[data-premium-slot="4"]) { --w: 24%; --h: 32%; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="bento"] [data-premium-slot="5"] { --w: 90%; --h: 20%; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="bento"] [data-premium-slot="5"] span { display: block; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="bento"] .yl-card-fan__button--cart { --w: 38%; --h: 34%; background: #f5ffff; }

/* 16 — brushed wings reveal from opposite sides of a central fuselage. */
html body .yl-cart-menu[data-cart-model="wings"] .yl-card-fan__stage::before { inset: 8% 31%; background: linear-gradient(90deg,#071725,#456472,#071725); border: 1px solid #9ad7df; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="wings"] .yl-card-fan__button { --w: 30%; --h: 24%; --enter-x: -30px; --enter-y: 0px; --enter-scale: .7; clip-path: polygon(0 0,85% 12%,100% 88%,15% 100%); border-radius: 0; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="wings"] :is([data-premium-slot="3"],[data-premium-slot="4"],[data-premium-slot="5"]) { --enter-x: 30px; clip-path: polygon(15% 12%,100% 0,85% 100%,0 88%); }
html body .yl-cart-menu.yl-card-fan[data-cart-model="wings"] .yl-card-fan__button--cart { --w: 32%; --h: 52%; clip-path: none; border-radius: var(--cart-radius); background: linear-gradient(90deg,#edfafa,#b3d2d9,#f6ffff); }

/* 17 — paired circuit nodes on a neon backbone. */
html body .yl-cart-menu[data-cart-model="spine"] .yl-card-fan__stage::before { inset: 5% 48% 12%; background: var(--premium-accent); box-shadow: 0 0 12px var(--premium-accent); }
html body .yl-cart-menu[data-cart-model="spine"] .yl-card-fan__stage::after { inset: 15% 20% 23%; background: repeating-linear-gradient(transparent 0 31%,#73eaf0aa 32% 33%); }
html body .yl-cart-menu.yl-card-fan[data-cart-model="spine"] .yl-card-fan__button { --w: 23%; --h: 23%; --enter-turn: -25deg; --enter-scale: .2; border: 1px solid var(--premium-accent); background: #071d2e; box-shadow: inset 0 0 8px #43ffff44,0 0 5px var(--premium-accent); }
html body .yl-cart-menu.yl-card-fan[data-cart-model="spine"] .yl-card-fan__button--cart { --w: 88%; --h: 18%; flex-direction: row; background: #0b253c; color: #d5ffff; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="spine"] .yl-card-fan__button--cart i { font-size: 10cqw; color: #82f8d1; }

/* 18 — radar reticle keys on concentric scan lines. */
html body .yl-cart-menu[data-cart-model="radar"] .yl-card-fan__stage::before { inset: 2% 8% 18%; border-radius: 50%; background: repeating-radial-gradient(circle,transparent 0 13%,#5df9bb55 14% 15%),conic-gradient(from 20deg,#2affa022,transparent 45%); border: 1px solid var(--premium-accent); }
html body .yl-cart-menu.yl-card-fan[data-cart-model="radar"] .yl-card-fan__button { --w: 19%; --h: 19%; --enter-scale: .1; --enter-y: 0px; border-radius: 0; border: 0; background: #09283b; outline: 1px dashed var(--premium-accent); outline-offset: 2px; box-shadow: 0 0 10px #62ffbd44; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="radar"] .yl-card-fan__button--cart { --w: 72%; --h: 18%; flex-direction: row; border-radius: var(--cart-radius); outline: none; background: #efffff; color: #123340; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="radar"] .yl-card-fan__button--cart i { font-size: 10cqw; }

/* 19 — linked directional strips with a broad landing ramp. */
html body .yl-cart-menu[data-cart-model="flow"] .yl-card-fan__stage::before { inset: 12% 2% 35%; border: 1px solid #c6f8ff88; border-left: 0; border-right: 0; transform: skewY(-7deg); }
html body .yl-cart-menu.yl-card-fan[data-cart-model="flow"] .yl-card-fan__button { --w: 32%; --h: 24%; --enter-x: -28px; --enter-y: 0px; --enter-scale: 1; clip-path: polygon(0 0,85% 0,100% 50%,85% 100%,0 100%,12% 50%); border-radius: 0; padding-left: 3cqw; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="flow"] :is([data-premium-slot="3"],[data-premium-slot="4"],[data-premium-slot="5"]) { --enter-x: 28px; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="flow"] .yl-card-fan__button--cart { --w: 96%; --h: 26%; clip-path: polygon(6% 0,94% 0,100% 100%,0 100%); flex-direction: row; }

/* 20 — illuminated portal frame, separated command keys and floating core. */
html body .yl-cart-menu[data-cart-model="portal"] .yl-card-fan__stage::before { inset: 7% 6%; border: 2px solid var(--premium-accent); border-radius: var(--cart-radius); box-shadow: inset 0 0 18px #729eff55,0 0 12px #729eff77; background: linear-gradient(130deg,#0c1036aa,#122c4744); }
html body .yl-cart-menu[data-cart-model="portal"] .yl-card-fan__stage::after { inset: 29% 16%; border-top: 1px solid #c4f8ff88; border-bottom: 1px solid #c4f8ff88; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="portal"] .yl-card-fan__button { --w: 23%; --h: 20%; --enter-y: -25px; --enter-scale: .5; border-color: #d4eaff; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="portal"] :is([data-premium-slot="3"],[data-premium-slot="4"],[data-premium-slot="5"]) { --enter-y: 25px; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="portal"] .yl-card-fan__button--cart { --w: 44%; --h: 40%; background: linear-gradient(145deg,#efffffdd,#accef5bb); border: 1px solid #e2ffff; backdrop-filter: blur(5px); }

/* 21–25 — the requested single icon row above a full-width purchase button. */
html body .yl-cart-menu.yl-card-fan[data-cart-dock] { background: linear-gradient(transparent 35%,rgba(13,32,48,calc(.45 * var(--cart-menu-opacity,1)))) ; }
html body .yl-cart-menu.yl-card-fan[data-cart-dock] .yl-card-fan__button { --w: 14%; --h: 14%; --radius: var(--cart-radius); padding: .7cqw; }
html body .yl-cart-menu.yl-card-fan[data-cart-dock] .yl-card-fan__button i { font-size: 8cqw; }
html body .yl-cart-menu.yl-card-fan[data-cart-dock] .yl-card-fan__button--cart { --w: 96%; --h: 23%; flex-direction: row; gap: 3cqw; font-size: 5cqw; }
html body .yl-cart-menu.yl-card-fan[data-cart-dock] .yl-card-fan__button--cart i { font-size: 13cqw; }

/* Neon Omurga's circuit treatment, rearranged into the horizontal dock. */
html body .yl-cart-menu[data-cart-model="dock_neon"] .yl-card-fan__stage::before { left: 3%; right: 3%; top: 63%; height: 1%; background: var(--premium-accent); box-shadow: 0 0 12px var(--premium-accent); }
html body .yl-cart-menu.yl-card-fan[data-cart-model="dock_neon"] .yl-card-fan__button { --enter-x: -18px; --enter-y: 0px; border: 1px solid var(--premium-accent); background: #071d2e; box-shadow: inset 0 0 8px #43ffff44,0 0 6px var(--premium-accent); }
html body .yl-cart-menu.yl-card-fan[data-cart-model="dock_neon"] .yl-card-fan__button--cart { background: #0b253c; color: #d5ffff; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="dock_neon"] .yl-card-fan__button--cart i { color: #82f8d1; }

/* Frosted glass with a reflective upper edge and a luminous white purchase slab. */
html body .yl-cart-menu[data-cart-model="dock_glass"] .yl-card-fan__stage::before { inset: 53% 0 0; background: linear-gradient(135deg,#ffffff48,#d7fcff15); border: 1px solid #ffffff75; backdrop-filter: blur(5px); }
html body .yl-cart-menu.yl-card-fan[data-cart-model="dock_glass"] .yl-card-fan__button { --enter-y: 20px; --enter-scale: .9; border: 1px solid #ffffffc9; box-shadow: inset 0 2px 0 #ffffffb0,inset 0 -3px 8px #ffffff22,0 3px 7px #08273b40; }
html body .yl-cart-menu[data-cart-model="dock_glass"] .yl-card-fan__button::after { content: ''; position: absolute; inset: 1px; border-radius: inherit; background: linear-gradient(135deg,#ffffff66,transparent 55%); pointer-events: none; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="dock_glass"] .yl-card-fan__button--cart { background: linear-gradient(135deg,#ffffffeb,#d9f5f5b8); color: #163642; backdrop-filter: blur(6px); border-color: #fff; }

/* Machined metallic keys, visible bevels and a brushed titanium purchase bar. */
html body .yl-cart-menu.yl-card-fan[data-cart-model="dock_chrome"] .yl-card-fan__button { --enter-y: -14px; --enter-turn: -8deg; border: 1px solid #e4f1f9; box-shadow: inset 0 2px 0 #fff,inset 0 -3px 0 #081b3f70,0 3px 0 #233c52,0 6px 10px #0005; }
html body .yl-cart-menu[data-cart-model="dock_chrome"] .yl-card-fan__button::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(170deg,#ffffff88,transparent 42%,#00000020 50%,transparent 65%); }
html body .yl-cart-menu.yl-card-fan[data-cart-model="dock_chrome"] .yl-card-fan__button--cart { background: repeating-linear-gradient(0deg,#ffffff22 0 1px,transparent 1px 3px),linear-gradient(#f8fbff,#afc1d1 48%,#e5eef7 52%,#c0d0df); border-color: #f4fcff; color: #172f43; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="dock_chrome"] .yl-card-fan__button--cart i { color: #26465d; }

/* Holographic wireframe: an iridescent rail underneath transparent scan lines. */
html body .yl-cart-menu[data-cart-model="dock_holo"] .yl-card-fan__stage::before { inset: 53% 0 0; border: 1px solid var(--premium-accent); background: repeating-linear-gradient(0deg,transparent 0 6px,#b7faff22 6px 7px); box-shadow: inset 0 0 18px #7b6bff40; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="dock_holo"] .yl-card-fan__button { --enter-y: 0px; --enter-scale: .15; border: 1px solid #bceeff; box-shadow: -2px 0 0 #ec7dff66,2px 0 0 #65fff188,0 0 10px #6c72ff33; }
html body .yl-cart-menu[data-cart-model="dock_holo"] .yl-card-fan__button::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg,#dd98ff55,transparent 45%,#81fff34d); }
html body .yl-cart-menu.yl-card-fan[data-cart-model="dock_holo"] .yl-card-fan__button--cart { background: linear-gradient(110deg,#18314c,#36336b,#15505d); color: #f0fcff; border-color: #b5e8ff; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="dock_holo"] .yl-card-fan__button--cart i { color: #acfff1; }

/* Carbon instrument panel with individual colored key feet and a crisp purchase edge. */
html body .yl-cart-menu[data-cart-model="dock_carbon"] .yl-card-fan__stage::before { inset: 53% 0 0; border: 1px solid #68788b; background: repeating-linear-gradient(135deg,#101d2b 0 3px,#192a3b 3px 5px); box-shadow: 0 7px 16px #0005; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="dock_carbon"] .yl-card-fan__button { --enter-x: 15px; --enter-y: 0px; --enter-scale: 1; background: #142438; border: 1px solid #72879b; border-bottom: 3px solid var(--color); box-shadow: inset 0 1px 0 #ffffff25,0 2px 5px #0006; }
html body .yl-cart-menu.yl-card-fan[data-cart-model="dock_carbon"] .yl-card-fan__button--cart { background: linear-gradient(90deg,#172d42,#254158); color: #f3fbff; border-bottom: 3px solid var(--premium-accent); }
html body .yl-cart-menu.yl-card-fan[data-cart-model="dock_carbon"] .yl-card-fan__button--cart i { color: #a8f2df; }

/* Palette and selection stay authoritative for every premium surface. */
html body .yl-cart-menu.yl-card-fan[data-cart-premium][data-cart-palette]:not([data-cart-palette="rainbow"]) .yl-card-fan__button:not(.is-selected) { background: linear-gradient(145deg,var(--palette-light),var(--palette-dark)); color: #fff; }
html body .yl-cart-menu.yl-card-fan[data-cart-premium][data-cart-palette]:not([data-cart-palette="rainbow"]) .yl-card-fan__button--cart { background: #f3fcff; color: var(--palette-dark); }
html body .yl-cart-menu.yl-card-fan[data-cart-premium][data-cart-palette]:not([data-cart-palette="rainbow"]) .yl-card-fan__button--cart i { color: var(--palette-dark); }
html body .yl-cart-menu.yl-card-fan[data-cart-premium] .yl-card-fan__button.is-selected { background: #ffe3ee; color: #b91046; border: 2px solid #e82e70; }
html body .yl-cart-menu.yl-card-fan[data-cart-premium] [data-fan-action="compare"].is-selected { background: #d7f8e3; color: #126333; border-color: #18914b; }
@media (prefers-reduced-motion: reduce) {
  html body .yl-cart-menu.yl-card-fan[data-cart-premium] .yl-card-fan__button { transition: none !important; }
}
