/* YELLOW BELL — polish layer (v5). Additive, transform/opacity only, loaded last. */
:root{--yb-out:cubic-bezier(.22,1,.36,1);--yb-spring:cubic-bezier(.34,1.56,.64,1)}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
a,button,[role=button],.btn,.yb-icon-link{touch-action:manipulation}
img{-webkit-user-drag:none}

/* scroll progress (GPU: scaleX only) */
.yb-progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:60;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#b8922a,#e9c349 55%,#6f8f55);will-change:transform}

/* header: glides away on scroll-down, returns on scroll-up */
.navbar{transition:transform .55s var(--yb-out),box-shadow .45s var(--yb-out)}
.navbar.yb-nav-hide{transform:translate3d(0,-102%,0)}
.navbar.yb-scrolled{box-shadow:0 14px 36px rgba(28,26,23,.09)}

/* section reveal: softer rise + settle, will-change only while it animates */
.yb-fx [data-reveal]{opacity:0;transform:translate3d(0,30px,0) scale(.985);transition:opacity .9s var(--yb-out),transform 1.05s var(--yb-out);transition-delay:var(--reveal-delay,0ms)}
.yb-fx [data-reveal].is-visible{opacity:1;transform:none}

/* images fade + settle in instead of popping (animation, so hover zoom still works after) */
.yb-fx img.yb-img{opacity:0}
.yb-fx img.yb-img.is-loaded{opacity:1;animation:yb-img-in .95s var(--yb-out) backwards}
@keyframes yb-img-in{from{opacity:0;transform:scale(1.045)}}

/* desktop: 3D card tilt + magnetic buttons (JS sets the vars) */
@media (hover:hover) and (pointer:fine){
  .yb-pcard .product-card-media{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--yb-out)}
  .yb-pcard .product-card-media.yb-tilting{transition:transform .14s linear;will-change:transform}
  .btn.yb-mag{translate:var(--tx,0px) var(--ty,0px);transition:translate .6s var(--yb-out),transform .45s var(--yb-out),box-shadow .45s var(--yb-out),background .45s var(--yb-out),color .45s var(--yb-out)}
  .btn.yb-mag.yb-near{transition:translate .12s linear,transform .45s var(--yb-out),box-shadow .45s var(--yb-out),background .45s var(--yb-out),color .45s var(--yb-out)}
}

/* touch: instant press feedback */
@media (hover:none){
  .btn:active,.yb-icon-link:active,.yx-bottomnav a:active{transform:scale(.96);transition-duration:.12s}
  .yb-pcard:active .product-card-media{transform:scale(.985);transition:transform .15s var(--yb-out)}
}

/* phone: fewer/lighter blur layers = steadier scroll */
@media (max-width:767px){
  .yb-fx [data-reveal]{transform:translate3d(0,22px,0);transition-duration:.7s,.85s}
  .navbar{-webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%)}
  .product-badge,.yb-icon-link,.glass-surface,.payment-box{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .premium-frame:before{filter:blur(3px)}
}

/* My Orders: payment line under the amount */
.yx-order-amt small{display:block;margin-top:2px;font-size:11px;font-weight:500;letter-spacing:0;color:var(--color-stone,#6b645a)}

/* =====================================================================
   HERO EDGE-LINE FIX
   The big coloured circle behind the model casts a soft 90px shadow. The stage box used to clip it
   sideways (overflow-x:clip), which drew a hard dark vertical line at the left and right edge of the
   stage. The shadow now fades out naturally; the hero section and the page still clip sideways at the
   screen edge, so nothing can scroll horizontally.
   ===================================================================== */
.yb-stage{overflow:visible}

/* =====================================================================
   PLACE ORDER — thin progress fill inside the existing busy button (transform only)
   ===================================================================== */
.yb-place-bar{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:3;pointer-events:none;background:rgba(35,74,46,.8);transform:scaleX(0);transform-origin:0 50%;animation:ybt-place 1.25s cubic-bezier(.45,.05,.25,1) forwards;will-change:transform}
@keyframes ybt-place{to{transform:scaleX(1)}}

/* confirmation page: live "saved to our order system" chip */
.yb-sync{display:inline-flex;align-items:center;gap:9px;margin:14px 0 0;padding:7px 15px 7px 13px;border-radius:999px;background:rgba(255,253,243,.9);border:1px solid var(--line);font-size:12px;line-height:1.3;color:var(--color-stone);transition:color .4s,border-color .4s,background .4s}
.yb-sync i{position:relative;flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--y1)}
.yb-sync[data-state="saving"] i:after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--y1);animation:ybt-pulse 1.5s ease-out infinite}
.yb-sync[data-state="synced"]{color:#2f6b34;border-color:rgba(79,154,74,.45);background:rgba(240,250,236,.92);animation:ybt-pop .55s cubic-bezier(.34,1.56,.64,1) both}
.yb-sync[data-state="synced"] i{background:#4f9a4a}
@keyframes ybt-pulse{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(3)}}
@keyframes ybt-pop{from{opacity:.6;transform:scale(.94)}to{opacity:1;transform:none}}

/* =====================================================================
   ORDER TRACKING — premium loader + calm result updates (transform / opacity only)
   ===================================================================== */
.btn.is-loading{cursor:progress;opacity:.9}
.ybt-load{position:relative;min-height:310px}
.ybt-top{position:absolute;left:0;right:0;top:0;height:3px;overflow:hidden;background:rgba(232,167,19,.14);z-index:2}
.ybt-top:after{content:"";position:absolute;left:0;top:0;bottom:0;width:42%;background:linear-gradient(90deg,transparent,var(--y1),var(--y2),transparent);animation:ybt-slide 1.5s cubic-bezier(.45,.05,.35,1) infinite;will-change:transform}
@keyframes ybt-slide{from{transform:translateX(-110%)}to{transform:translateX(250%)}}
.ybt-head{display:flex;align-items:center;gap:18px}
.ybt-copy{min-width:0}
.ybt-copy .eyebrow{white-space:nowrap;letter-spacing:.16em;font-size:11px}
.ybt-title{margin:4px 0 0;font-size:30px;line-height:1.05}
.ybt-emblem{position:relative;flex:0 0 auto;width:78px;height:78px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,rgba(255,253,243,.92) 58%,rgba(244,197,69,.28));box-shadow:0 8px 22px rgba(60,70,30,.14),inset 0 0 0 1px rgba(255,255,255,.9)}
.ybt-emblem img{position:relative;z-index:2;width:62px;height:62px;object-fit:contain;transform-origin:50% 14%;animation:ybt-bell 2.6s ease-in-out infinite}
.ybt-emblem>i{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;border:1.5px solid rgba(232,167,19,.6);opacity:0;pointer-events:none;animation:ybt-ring 2.4s cubic-bezier(.2,.6,.3,1) infinite}
.ybt-emblem>.ybt-r2{animation-delay:.8s}.ybt-emblem>.ybt-r3{animation-delay:1.6s}
@keyframes ybt-ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(2.2)}}
@keyframes ybt-bell{0%,55%,100%{transform:rotate(0)}10%{transform:rotate(-9deg)}20%{transform:rotate(7deg)}30%{transform:rotate(-5deg)}40%{transform:rotate(3deg)}}
.ybt-shine{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;overflow:hidden;z-index:3;pointer-events:none}
.ybt-shine:after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.8),transparent);transform:translateX(-150%) skewX(-12deg);animation:ybt-shine 2.6s ease-in-out infinite}
@keyframes ybt-shine{0%,35%{transform:translateX(-150%) skewX(-12deg)}80%,100%{transform:translateX(280%) skewX(-12deg)}}
.ybt-msg{display:flex;align-items:center;gap:7px;margin:9px 0 0;min-height:20px;font-size:13px;color:var(--color-stone)}
.ybt-msg span.in{display:inline-block;animation:ybt-msg .5s cubic-bezier(.22,1,.36,1) both}
@keyframes ybt-msg{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ybt-dots{display:inline-flex;align-items:center;gap:3px}
.ybt-dots i{width:4px;height:4px;border-radius:50%;background:var(--y1);animation:ybt-bounce 1.1s ease-in-out infinite}
.ybt-dots i:nth-child(2){animation-delay:.15s}.ybt-dots i:nth-child(3){animation-delay:.3s}
@keyframes ybt-bounce{0%,70%,100%{transform:translateY(0);opacity:.45}35%{transform:translateY(-4px);opacity:1}}
.ybt-steps{margin-top:28px}
.ybt-steps i{position:relative;z-index:0}
.ybt-steps i:after{content:"";position:absolute;left:-5px;top:-5px;right:-5px;bottom:-5px;border-radius:50%;background:var(--y1);z-index:-1;opacity:0;animation:ybt-dot 2.8s ease-in-out infinite;animation-delay:calc(var(--k,0)*.34s)}
@keyframes ybt-dot{0%,60%,100%{opacity:0;transform:scale(.5)}14%,34%{opacity:.6;transform:scale(1)}}
.ybt-rows{display:grid;gap:12px;margin-top:28px}
.ybt-rows b{position:relative;display:block;height:12px;border-radius:7px;background:rgba(35,74,46,.08);overflow:hidden}
.ybt-rows b:nth-child(1){width:62%}.ybt-rows b:nth-child(2){width:86%}.ybt-rows b:nth-child(3){width:48%}.ybt-rows b:nth-child(4){width:74%}
.ybt-rows b:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.8) 50%,transparent 80%);transform:translateX(-100%);animation:ybt-sheen 1.7s ease-in-out infinite}
.ybt-rows b:nth-child(2):after{animation-delay:.12s}.ybt-rows b:nth-child(3):after{animation-delay:.24s}.ybt-rows b:nth-child(4):after{animation-delay:.36s}
@keyframes ybt-sheen{to{transform:translateX(100%)}}

/* result: gentle entrance the first time, a small "pop" on the status pill when it changes live */
.ybt-in{animation:ybt-in .55s cubic-bezier(.22,1,.36,1) both}
@keyframes ybt-in{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
.ybt-in .yb-status-line .done i{animation:ybt-dotin .6s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--k,0)*80ms + 160ms)}
@keyframes ybt-dotin{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.ybt-upd .yb-status-pill{animation:ybt-flash .6s cubic-bezier(.34,1.56,.64,1) both}
@keyframes ybt-flash{from{opacity:.5;transform:scale(.92)}to{opacity:1;transform:none}}
.yb-live[data-state="wait"] i{background:var(--y1)}
.ybt-tag{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;background:rgba(79,154,74,.14);color:#2f6b34;font-size:11px;font-style:normal;font-weight:600;letter-spacing:.02em}
.yb-error-card{padding:20px 22px;border-radius:14px;background:rgba(255,253,243,.85);border:1px solid var(--line);color:var(--color-stone);font-size:14px;line-height:1.55}
.ybt-problem strong{display:block;margin-bottom:4px;color:var(--g1);font-size:16px}
.ybt-problem p{margin:0}
.ybt-problem .yb-copy{margin-top:12px}
@media(max-width:560px){.ybt-title{font-size:25px}.ybt-emblem{width:68px;height:68px}.ybt-emblem img{width:54px;height:54px}.ybt-head{gap:14px}}
/* Per-size availability (admin stock): only the sold-out size is disabled */
.yb-size.is-soldout,.yb-qs.is-soldout{opacity:.55!important;cursor:not-allowed!important;border-style:dashed!important;background:transparent!important;color:#7d7863!important;box-shadow:none!important}.yb-size.is-soldout:before,.yb-size.is-soldout:hover:before{display:none!important}.yb-size.is-soldout{flex-direction:column;gap:1px;line-height:1.05}.yb-so{display:block;font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700}.yb-qs.is-soldout{text-decoration:line-through}.yb-qs.is-soldout:hover{border-color:rgba(35,74,46,.25)!important}