/* ==========================================================================
   Tiny Maket — Shared components (loaded on every page)
   Product rails + product cards. Used by home, PLP, PDP related, search…
   ========================================================================== */

/* ════════ PRODUCT RAILS ════════ */
.rail{padding:42px 0;}
.rail.tint{background:var(--sf2);}
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;gap:14px;flex-wrap:wrap;}
.rail-head .sec-title{font-size:clamp(1.25rem,3.5vw,1.85rem);}
.rail-ctrl{display:none;gap:8px;}
@media(min-width:760px){.rail-ctrl{display:flex;}}
.rarrow{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:var(--sf);display:flex;align-items:center;justify-content:center;color:var(--ink2);transition:.2s;}
.rarrow:hover{background:var(--dark);color:#fff;border-color:var(--dark);}
.rarrow svg{width:15px;height:15px;}
.rail.tint .rarrow{background:#fff;}
.rrow{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 2px 8px;}
.rrow::-webkit-scrollbar{display:none;}

/* ════════ PRODUCT CARD ════════ */
.pcard{scroll-snap-align:start;flex:none;width:200px;background:var(--sf);border:1.5px solid var(--line);border-radius:var(--r2);padding:13px;position:relative;transition:transform .28s,box-shadow .28s,border-color .28s;}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:transparent;}
.rail.tint .pcard{border-color:transparent;}
.pcard>a.pcard-link{position:absolute;inset:0;z-index:2;}
.pstage{position:relative;aspect-ratio:1/1;border-radius:14px;background:var(--sf2);display:flex;align-items:center;justify-content:center;margin-bottom:13px;overflow:hidden;}
.rail.tint .pstage{background:#fff;}
.pstage img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;}
.pstage svg.car{width:88%;position:relative;z-index:1;}
.pglow{position:absolute;inset:0;pointer-events:none;z-index:0;}
.pglow.red{background:radial-gradient(ellipse at 50% 38%,rgba(236,28,37,.12),transparent 60%);}
.pglow.gold{background:radial-gradient(ellipse at 50% 38%,rgba(199,154,82,.16),transparent 60%);}
.pbadges{position:absolute;top:9px;right:9px;left:9px;display:flex;align-items:flex-start;justify-content:space-between;gap:6px;z-index:3;pointer-events:none;}
.pbadge{font-size:.6rem;font-weight:800;padding:4px 8px;border-radius:7px;line-height:1.3;display:inline-flex;align-items:center;gap:3px;white-space:nowrap;}
.pbadge svg{width:9px;height:9px;}
.pb-disc{background:var(--red);color:#fff;}
.pb-new{background:var(--dark);color:#fff;}
.pb-hot{background:linear-gradient(135deg,#FF8A3D,#EC1C25);color:#fff;}
.pb-tier{background:linear-gradient(135deg,var(--amber),var(--amber2));color:#fff;}
.pmaker{font-size:.66rem;font-weight:700;color:var(--ink3);margin-bottom:3px;}
.ptitle{font-size:.82rem;font-weight:700;margin-bottom:9px;min-height:36px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pscale{display:inline-flex;align-items:center;gap:4px;font-size:.62rem;font-weight:700;color:var(--ink3);background:var(--sf2);padding:3px 8px;border-radius:6px;margin-bottom:9px;}
.rail.tint .pscale{background:var(--bg);}
.pscale svg{width:10px;height:10px;}
.pprice{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
.pprice .now{font-weight:900;font-size:.94rem;color:var(--red);}
.pprice .now del{color:var(--ink3);font-weight:600;font-size:.7rem;}
.pprice .now ins{text-decoration:none;}
.pprice .old{font-size:.7rem;color:var(--ink3);text-decoration:line-through;}
.pcart{position:relative;z-index:3;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:9px;border-radius:999px;background:var(--dark);color:#fff;font-weight:800;font-size:.76rem;transition:background .2s,transform .2s;}
.pcart:hover{background:var(--red);transform:translateY(-1px);}
.pcart svg{width:15px;height:15px;}
.rdots{display:flex;justify-content:center;gap:7px;margin-top:16px;}
.rdot{width:7px;height:7px;border-radius:50%;background:var(--line2);transition:.25s;cursor:pointer;}
.rdot.active{width:22px;border-radius:5px;background:var(--red);}

/* card stagger entrance (js-gated, rails only) */
body.js-anim .rrow .pcard{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,.7,.3,1);}
body.js-anim .rrow.cards-in .pcard{opacity:1;transform:none;}
body.js-anim .rrow.cards-in .pcard:nth-child(1){transition-delay:.04s}
body.js-anim .rrow.cards-in .pcard:nth-child(2){transition-delay:.1s}
body.js-anim .rrow.cards-in .pcard:nth-child(3){transition-delay:.16s}
body.js-anim .rrow.cards-in .pcard:nth-child(4){transition-delay:.22s}
body.js-anim .rrow.cards-in .pcard:nth-child(5){transition-delay:.28s}
body.js-anim .rrow.cards-in .pcard:nth-child(6){transition-delay:.34s}
@media(prefers-reduced-motion:reduce){body.js-anim .rrow .pcard{opacity:1!important;transform:none!important;}}