/* Yellow Bell - 2026 layer. Loads last; no logic or layout rules removed. */
:root{--y26-gold:#e8a713;--y26-glow:#ffd45e;--y26-forest:#234a2e;--y26-ease:cubic-bezier(.16,1,.3,1)}
html{scroll-padding-top:96px;color-scheme:light}
::selection{background:var(--y26-glow);color:#241a00}
html{scrollbar-width:thin;scrollbar-color:rgba(232,167,19,.6) transparent}
a:focus-visible,button:focus-visible,[role=button]:focus-visible{outline:2px solid var(--y26-gold);outline-offset:3px}
input:focus,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none!important}
h1,h2,h3,.yx-h2,.yb-product-title{text-wrap:balance}

/* Ambient light: soft gold/forest aurora + fine film grain */
.y26-aurora{position:fixed;inset:-12vmax;z-index:-1;will-change:transform;animation:y26-drift 30s ease-in-out infinite alternate;pointer-events:none;background:radial-gradient(38vmax 30vmax at 18% 22%,rgba(255,212,94,.32),transparent 70%),radial-gradient(34vmax 28vmax at 84% 72%,rgba(79,140,92,.2),transparent 70%),radial-gradient(30vmax 24vmax at 62% 8%,rgba(255,238,176,.3),transparent 70%)}

/* Signature: golden thread (scroll progress) + bell chime (tap ripple) */
.y26-thread{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--y26-gold),var(--y26-glow),#fff6cf);box-shadow:0 0 14px 1px rgba(255,212,94,.85);will-change:transform}
.y26-chime{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;z-index:9998;border:1.5px solid rgba(232,167,19,.95);box-shadow:0 0 18px rgba(255,212,94,.75),inset 0 0 8px rgba(255,255,255,.85);animation:y26-chime .95s var(--y26-ease) forwards}
@keyframes y26-chime{from{transform:translate3d(var(--x),var(--y),0) scale(.4);opacity:.95}to{transform:translate3d(var(--x),var(--y),0) scale(9);opacity:0}}

/* Liquid-glass navigation */
.navbar{background:linear-gradient(180deg,rgba(255,253,240,.8),rgba(255,249,224,.56))!important;-webkit-backdrop-filter:blur(16px) saturate(150%)!important;backdrop-filter:blur(16px) saturate(150%)!important;border-bottom:1px solid transparent!important;box-shadow:inset 0 -1px 0 rgba(255,255,255,.75),0 1px 0 rgba(232,167,19,.16),0 14px 40px -22px rgba(35,74,46,.35)!important}
.yx-bottomnav{left:12px!important;right:12px!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;padding:6px!important;border-radius:26px;border:1px solid rgba(255,255,255,.8)!important;background:rgba(255,252,238,.7)!important;-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);box-shadow:0 18px 40px -14px rgba(35,74,46,.5),inset 0 1px 0 rgba(255,255,255,.95)!important}

/* Product cards: glass rim, lit by the cursor like light on silk (PC) */
.group .relative.aspect-\[4\/5\]{border-radius:28px!important;box-shadow:0 22px 50px -24px rgba(35,74,46,.5),0 0 0 1px rgba(255,255,255,.7),inset 0 1px 0 rgba(255,255,255,.9)!important}
.yb-related-img{border-radius:20px!important}

/* Glass pills and refined buttons (hover states untouched) */
.yx-viewall,.yx-arrows button,.product-badge{background:rgba(255,252,238,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 #fff,0 10px 22px -12px rgba(35,74,46,.45)}
.yx-btn-yellow,.yb-main-action:not(.yb-main-action-light){border-radius:999px;background:linear-gradient(180deg,#ffd45e,#e8a713);color:#2a1d00;box-shadow:0 16px 34px -12px rgba(232,167,19,.8),inset 0 1px 0 rgba(255,255,255,.75)}
.yx-btn-green{border-radius:999px;background:linear-gradient(180deg,#2f6a3f,#1d4b29);box-shadow:0 14px 30px -12px rgba(35,74,46,.65),inset 0 1px 0 rgba(255,255,255,.3)}


@media(prefers-reduced-motion:reduce){.y26-aurora,.yx-h2{animation:none!important}.y26-chime{display:none}.y26-thread{transition:none}}
.yx-h2{letter-spacing:-.02em}
@supports (animation-timeline:scroll()){.y26-thread{animation:y26-th linear both;animation-timeline:scroll(root)}}
@keyframes y26-th{to{transform:scaleX(1)}}
/* Restored effects, rebuilt on transform/opacity only (compositor = smooth) */
@keyframes y26-drift{to{transform:translate3d(5vmax,-4vmax,0) scale(1.06)}}
.y26-grain{position:fixed;inset:0;z-index:2147483000;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1 0 0 0 0 .13 0 0 0 0 .05 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.y26-chime{will-change:transform,opacity}
.y26-chime.b{border-color:rgba(255,255,255,.95);animation-delay:.12s;opacity:0}
.navbar::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;box-shadow:0 1px 0 rgba(232,167,19,.3),0 18px 46px -18px rgba(35,74,46,.5);opacity:0;transition:opacity .4s var(--y26-ease)}
.navbar.y26-scrolled::after{opacity:1}
@supports (animation-timeline:view()){.yx-h2{transform-origin:0 50%;animation:y26-type linear both;animation-timeline:view();animation-range:entry 5% entry 70%}}
@keyframes y26-type{from{opacity:0;filter:blur(6px);transform:translateY(14px) scaleX(1.08)}to{opacity:1;filter:blur(0);transform:none}}
.group .relative.aspect-\[4\/5\]::after{content:"";position:absolute;left:0;top:0;width:200%;height:200%;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(closest-side,rgba(255,238,176,.5),rgba(255,238,176,.16) 45%,transparent);transform:translate3d(calc(var(--mx,25%) - 50%),calc(var(--my,25%) - 50%),0);transition:opacity .5s var(--y26-ease)}
.group:hover .relative.aspect-\[4\/5\]::after{opacity:1}