
.sbfl-books{--sbfl-ink:#2A1418;--sbfl-ink-soft:#4F3236;--sbfl-paper:#FFFBF2;position:relative;overflow:hidden;padding:84px 24px 96px;background:#B4DDC4;color:var(--sbfl-ink);font-family:'Quicksand',sans-serif;-webkit-font-smoothing:antialiased;}
.sbfl-books *{box-sizing:border-box;}
.sbfl-books a{color:inherit;text-decoration:none;}
.sbfl-inner{max-width:1180px;margin:0 auto;position:relative;z-index:2;}
.sbfl-deco{position:absolute;pointer-events:none;z-index:1;}
.sbfl-star-one{top:46px;left:6%;width:46px;transform:rotate(-12deg);}
.sbfl-star-two{top:120px;right:7%;width:34px;transform:rotate(14deg);}
.sbfl-cloud{top:34px;right:16%;width:96px;}
.sbfl-no-decorations .sbfl-deco{display:none;}
.sbfl-head{text-align:center;max-width:680px;margin:0 auto 56px;}
.sbfl-collection-tag{display:inline-block;background:#146B80;color:#fff;font-family:'Fredoka',sans-serif;font-weight:600;font-size:.95rem;padding:6px 20px;border-radius:999px;border:3px solid var(--sbfl-ink);box-shadow:3px 3px 0 var(--sbfl-ink);transform:rotate(-2deg);margin-bottom:20px;}
.sbfl-head h2{font-family:'Fredoka',sans-serif;font-weight:600;font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.1;margin:0;}
.sbfl-head p{margin:14px 0 0;font-size:1.12rem;font-weight:600;color:var(--sbfl-ink-soft);line-height:1.55;}
.sbfl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 34px;}
.sbfl-card{--d:calc(var(--i) * .14s);display:flex;flex-direction:column;background:var(--sbfl-paper);border:3px solid var(--sbfl-ink);border-radius:30px;overflow:hidden;box-shadow:8px 9px 0 var(--sbfl-ink);transition:transform .25s cubic-bezier(.3,1.4,.4,1),box-shadow .25s;}
.sbfl-card:hover{transform:translate(-4px,-6px);box-shadow:12px 15px 0 var(--sbfl-ink);}
.sbfl-stage{position:relative;height:344px;display:flex;align-items:center;justify-content:center;perspective:1100px;background:repeating-conic-gradient(from 0deg at 50% 60%,var(--a) 0 9deg,var(--b) 9deg 18deg);border-bottom:3px solid var(--sbfl-ink);}
.sbfl-stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 60%,rgba(255,255,255,.62) 0%,rgba(255,255,255,0) 62%);}
.sbfl-drop{position:relative;z-index:2;margin-left:20px;margin-top:10px;}
.sbfl-book{position:relative;width:172px;height:240px;transform-style:preserve-3d;transform:rotateY(-18deg) rotateX(4deg) rotate(-2deg);transition:transform .6s cubic-bezier(.3,1.35,.4,1);}
.sbfl-card:hover .sbfl-book{transform:rotateY(-5deg) rotateX(0deg) rotate(0deg) translateY(-12px) scale(1.04);}
.sbfl-cover{position:absolute;inset:0;border:3px solid var(--sbfl-ink);border-radius:8px 16px 16px 8px;background:linear-gradient(135deg,var(--lt) 0%,var(--bk) 55%,var(--dk) 100%);box-shadow:9px 11px 0 rgba(42,20,24,.22);}
.sbfl-cover::before{content:'';position:absolute;left:0;top:0;bottom:0;width:18px;border-radius:5px 0 0 5px;background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,.06) 75%,transparent);box-shadow:inset -2px 0 0 rgba(255,255,255,.35);}
.sbfl-art{position:absolute;left:24px;right:14px;top:18px;bottom:52px;border:2.5px solid var(--sbfl-ink);border-radius:6px;overflow:hidden;background:#fff;box-shadow:2px 3px 0 rgba(42,20,24,.3);}
.sbfl-art img{display:block;width:100%;height:100%;object-fit:cover;}
.sbfl-imprint{position:absolute;left:24px;right:14px;bottom:15px;text-align:center;color:var(--on);font-family:'Fredoka',sans-serif;font-weight:600;font-size:.8rem;}
.sbfl-pages{position:absolute;right:-12px;top:9px;bottom:9px;width:11px;border:2.5px solid var(--sbfl-ink);border-left:0;border-radius:0 5px 5px 0;background:repeating-linear-gradient(180deg,#FFFDF6 0 2px,#DCCFB6 2px 3px);}
.sbfl-book-shadow{position:absolute;left:6%;right:-8%;bottom:-26px;height:22px;background:radial-gradient(ellipse at center,rgba(42,20,24,.3),rgba(42,20,24,0) 70%);transition:transform .6s,opacity .6s;}
.sbfl-card:hover .sbfl-book-shadow{transform:scale(.9);opacity:.7;}
.sbfl-sticker{position:absolute;left:16px;top:16px;z-index:3;width:56px;height:56px;border-radius:50%;background:#fff;border:3px solid var(--sbfl-ink);display:grid;place-items:center;font-size:1.7rem;box-shadow:3px 3px 0 rgba(42,20,24,.3);transform:rotate(-10deg);transition:transform .3s cubic-bezier(.3,1.6,.5,1);}
.sbfl-card:hover .sbfl-sticker{transform:rotate(8deg) scale(1.12);}
.sbfl-burst{position:absolute;right:10px;top:8px;z-index:3;width:84px;height:84px;transform:rotate(12deg);transition:transform .3s cubic-bezier(.3,1.6,.5,1);}
.sbfl-card:hover .sbfl-burst{transform:rotate(-4deg) scale(1.1);}
.sbfl-burst svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.sbfl-burst span{position:absolute;inset:0;display:grid;place-items:center;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.12rem;color:var(--sbfl-ink);}
.sbfl-burst.is-free polygon{fill:#FFC73A;}
.sbfl-burst.is-price polygon{fill:#fff;}
.sbfl-ribbon{position:absolute;left:12px;bottom:14px;z-index:3;background:#FFC73A;border:3px solid var(--sbfl-ink);border-radius:8px 999px 999px 8px;padding:4px 16px 4px 12px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:.9rem;box-shadow:3px 3px 0 rgba(42,20,24,.3);transform:rotate(-4deg);}
.sbfl-ribbon.sbfl-best{background:#D6431F;color:#fff;}
.sbfl-info{display:flex;flex-direction:column;gap:12px;flex:1;padding:22px 24px 26px;}
.sbfl-chips{display:flex;gap:8px;flex-wrap:wrap;}
.sbfl-chip{font-weight:700;font-size:.8rem;padding:4px 13px;border-radius:999px;border:2px solid var(--sbfl-ink);}
.sbfl-chip.sbfl-main{background:var(--bk);color:var(--on);}
.sbfl-chip.sbfl-sub{background:var(--a);color:var(--sbfl-ink);}
.sbfl-info h3{font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.32rem;line-height:1.2;margin:0;color:var(--sbfl-ink);}
.sbfl-info p{margin:0 0 10px;font-size:.97rem;font-weight:500;line-height:1.55;color:var(--sbfl-ink-soft);}
.sbfl-buy{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--bk);color:var(--on);border:3px solid var(--sbfl-ink);border-radius:999px;padding:12px 20px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem;box-shadow:4px 4px 0 var(--sbfl-ink);transition:transform .15s,box-shadow .15s;}
.sbfl-buy:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--sbfl-ink);}
.sbfl-buy:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--sbfl-ink);}
.sbfl-buy:focus-visible,.sbfl-shop-link:focus-visible{outline:3px solid var(--sbfl-ink);outline-offset:3px;}
.sbfl-more{text-align:center;margin-top:56px;}
.sbfl-shop-link{display:inline-block;background:var(--sbfl-ink);color:#fff;border:3px solid var(--sbfl-ink);border-radius:999px;padding:14px 30px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.05rem;box-shadow:5px 5px 0 rgba(42,20,24,.28);transition:transform .15s,box-shadow .15s;}
.sbfl-shop-link:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(42,20,24,.28);}
.sbfl-grid:not(.sbfl-in-view) .sbfl-card,.sbfl-grid:not(.sbfl-in-view) .sbfl-drop,.sbfl-grid:not(.sbfl-in-view) .sbfl-burst{opacity:0;}
.sbfl-grid.sbfl-in-view .sbfl-card{animation:sbflCardIn .6s ease backwards;animation-delay:var(--d);}
.sbfl-grid.sbfl-in-view .sbfl-drop{animation:sbflDropIn .8s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(var(--d) + .25s);}
.sbfl-grid.sbfl-in-view .sbfl-burst{animation:sbflBurstPop .55s cubic-bezier(.3,1.7,.5,1) backwards;animation-delay:calc(var(--d) + .8s);}
@keyframes sbflCardIn{from{opacity:0;transform:translateY(30px);}}
@keyframes sbflDropIn{from{opacity:0;transform:translateY(-54px) rotate(-8deg);}}
@keyframes sbflBurstPop{from{opacity:0;transform:rotate(-40deg) scale(0);}}
.sbfl-books[data-animation="no"] .sbfl-grid:not(.sbfl-in-view) .sbfl-card,.sbfl-books[data-animation="no"] .sbfl-grid:not(.sbfl-in-view) .sbfl-drop,.sbfl-books[data-animation="no"] .sbfl-grid:not(.sbfl-in-view) .sbfl-burst{opacity:1;}
@media(max-width:760px){.sbfl-deco{display:none;}}
@media(max-width:520px){.sbfl-books{padding:64px 16px 76px;}.sbfl-stage{height:320px;}.sbfl-grid{grid-template-columns:1fr !important;}}
@media(prefers-reduced-motion:reduce){.sbfl-grid:not(.sbfl-in-view) .sbfl-card,.sbfl-grid:not(.sbfl-in-view) .sbfl-drop,.sbfl-grid:not(.sbfl-in-view) .sbfl-burst{opacity:1;}*,*::before,*::after{animation:none !important;transition:none !important;}}
