.hce-wrap{display:flex;justify-content:flex-start;width:100%;}
.hce-stack{display:flex;flex-direction:column;align-items:center;max-width:100%;}

.hce-deck{
  --hce-wf:251px;--hce-wb:231px;--hce-offx:270px;--hce-offy:25px;--hce-bop:1;
  --hce-front-bg:rgba(255,255,255,.88);--hce-back-bg:rgba(206,210,222,.74);
  --hce-sans:Inter,Arial,sans-serif;--hce-serif:'Source Serif 4','Source Serif Pro',Georgia,serif;
  position:relative;box-sizing:border-box;height:340px;max-width:100%;
  width:max(var(--hce-wf),calc(var(--hce-offx) + var(--hce-wb)));
  font-family:var(--hce-sans);
}

/* ---------- card base = FRONT state (251 x ~334) ---------- */
.hce-card{
  position:absolute;left:0;top:0;box-sizing:border-box;display:block;text-decoration:none;color:#222;
  width:var(--hce-wf);padding:22px;border-radius:2px;
  background:var(--hce-front-bg);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transform-origin:top left;user-select:none;-webkit-user-select:none;touch-action:pan-y;
  transition-property:transform,opacity,width,padding,background-color;
  transition-duration:var(--hce-speed,.7s);transition-timing-function:ease;
}
.hce-card[data-pos="0"]{transform:none;opacity:1;z-index:3;cursor:grab;}
.hce-card[data-pos="1"],.hce-card[data-pos="h"]{
  width:var(--hce-wb);padding:18px 16px 16px;background:var(--hce-back-bg);
  transform:translate(var(--hce-offx),var(--hce-offy));opacity:var(--hce-bop,1);z-index:2;cursor:pointer;
}
.hce-card[data-pos="h"]{opacity:0;z-index:1;pointer-events:none;}
.hce-card.hce-dragging{transition:none;cursor:grabbing;z-index:20;box-shadow:0 18px 40px rgba(0,0,0,.3);}
.hce-deck.hce-nodrag .hce-card[data-pos="0"]{cursor:default;}

/* shared transitions for inner parts so front <-> back morphs smoothly */
.hce-card .hce-label,.hce-card .hce-rank,.hce-card .hce-title,.hce-card .hce-price,
.hce-card .hce-bullets,.hce-card .hce-bullets li,.hce-card .hce-footer,.hce-card .hce-ficon,.hce-card .hce-ftext{
  transition-property:font-size,line-height,margin,padding,gap,color,width,height,letter-spacing;
  transition-duration:var(--hce-speed,.7s);transition-timing-function:ease;
}

/* front typography */
.hce-label{font-family:var(--hce-sans);font-size:12px;line-height:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;margin:0 0 22px;}
.hce-rank{font-family:var(--hce-serif);font-size:46px;line-height:46px;font-weight:400;font-variant-numeric:lining-nums;margin:0 0 18px;}
.hce-title{font-family:var(--hce-serif);font-size:19px;line-height:25px;font-weight:600;margin:0 0 16px;color:#1a1a1a;}
.hce-price{font-family:var(--hce-serif);font-size:29px;line-height:32px;font-weight:400;font-variant-numeric:lining-nums;margin:0 0 15px;color:#1a1a1a;}
.hce-bullets{list-style:none;margin:0 0 10px;padding:0;font-family:var(--hce-sans);font-size:13px;line-height:20px;color:#555;}
.hce-bullets li{position:relative;margin:0;padding:0 0 0 16px;list-style:none;}
.hce-bullets li::before{content:"";position:absolute;left:3px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:currentColor;}
.hce-footer{display:flex;align-items:center;gap:16px;border-top:1px solid rgba(0,0,0,.12);padding-top:11px;}
.hce-ficon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;font-size:26px;line-height:1;}
.hce-ficon svg{width:1em;height:1em;}
.hce-ficon i{font-size:inherit;}
.hce-ftext{font-family:var(--hce-sans);font-size:14px;line-height:20px;color:#555;}

/* back typography (231 x ~283) */
.hce-card:not([data-pos="0"]) .hce-label{font-size:11px;line-height:13px;letter-spacing:.09em;}
.hce-card:not([data-pos="0"]) .hce-rank{font-size:36px;line-height:36px;margin-bottom:17px;}
.hce-card:not([data-pos="0"]) .hce-title{font-size:17px;line-height:22px;margin-bottom:14px;}
.hce-card:not([data-pos="0"]) .hce-price{font-size:23px;line-height:25px;margin-bottom:17px;}
.hce-card:not([data-pos="0"]) .hce-bullets{font-size:11px;margin-bottom:8px;}
.hce-card:not([data-pos="0"]) .hce-footer{gap:12px;padding-top:9px;}
.hce-card:not([data-pos="0"]) .hce-ficon{width:20px;height:20px;font-size:19px;}
.hce-card:not([data-pos="0"]) .hce-ftext{font-size:11px;line-height:13px;}

.hce-dots{display:flex;gap:8px;justify-content:center;margin-top:14px;}
.hce-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(120,120,120,.45);cursor:pointer;}
.hce-dot.is-active{background:#fff;}