button,input,select{font:inherit}
*{box-sizing:border-box}body{font:15px/1.5 Inter,system-ui,sans-serif;margin:0;background:#FAFAF7;color:#14143a}
header{background:#00203F;color:#fff;border-bottom:4px solid #DC1D00}h1,h2,h3{font-family:Sora,system-ui,sans-serif}header .brand,main,footer{max-width:1100px;margin:auto;padding:1rem}header h1{margin:0;font-size:1.6rem}header p{margin:.3rem 0 0;color:#d6dbe6;max-width:800px}
#controls{background:#fff;border:1px solid #e3e3ea;border-radius:8px;padding:1rem;margin-bottom:1rem;position:sticky;top:0;z-index:5;box-shadow:0 2px 6px #00203f14}
#q{width:100%;padding:.75rem 1rem;font-size:1rem;border:2px solid #e3e3ea;border-radius:8px;outline:none}#q:focus{border-color:#00203F}
.chips{margin:.45rem 0 0;display:flex;flex-wrap:wrap;gap:.35rem}.chips button{padding:.3rem .8rem;border:1px solid #e3e3ea;background:#fff;color:#00203F;border-radius:99px;cursor:pointer;font-size:.85rem}.chips button.on{background:#00203F;color:#fff;border-color:#00203F}
#count{margin:.6rem 0 0;font-size:.85rem;color:#55557a}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem}
.card{background:#fff;border:1px solid #e3e3ea;border-radius:8px;display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .15s}.card:hover{box-shadow:0 6px 18px #00203f22}
.cover{display:flex;align-items:center;justify-content:center;background:#f3f3ef;aspect-ratio:2/3;padding:.8rem;text-decoration:none}
.cover img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 2px 8px #0004;border-radius:2px}
.ph{width:78%;height:100%;border-radius:2px 6px 6px 2px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:1rem .8rem;box-shadow:inset 6px 0 0 #0003,0 2px 8px #0004;font-family:Georgia,serif}
.ph .pt{font-size:1rem;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}.ph .pa{font-size:.75rem;opacity:.85;border-top:1px solid #fff6;padding-top:.4rem}
.body{padding:.7rem .9rem 1rem;display:flex;flex-direction:column;flex:1}
.body h3{margin:0;font-size:1rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#14143a}
.by{font-size:.85rem;color:#00203F;margin-top:.15rem}.meta{font-size:.72rem;color:#55557a;margin-top:.25rem}
.desc{font-size:.84rem;color:#14143a;margin:.5rem 0;flex:1}
.buy{display:flex;align-items:center;gap:.5rem;margin:.2rem 0 .55rem}.price{font-size:.95rem;font-weight:700;color:#fff;background:#DC1D00;padding:.15rem .6rem;border-radius:4px;letter-spacing:.05em;font-family:Sora,system-ui,sans-serif}.leaf{font-size:.7rem;background:#eee;padding:.1rem .4rem;border-radius:4px}
.cta{display:block;text-align:center;background:#DC1D00;border:1px solid #DC1D00;color:#fff;font-weight:600;padding:.55rem;border-radius:99px;text-decoration:none}.cta:hover,.cta:focus{background:#b31700}
.paid{font-size:.8rem;text-align:center;margin-top:.4rem;color:#00203F}
.box{background:#fff;border:1px solid #e3e3ea;border-radius:8px;padding:1rem;margin:1.5rem 0}.box input,.box select{padding:.5rem;margin:.2rem;border:1px solid #e3e3ea;border-radius:6px}.box button{padding:.5rem 1rem;background:#00203F;color:#fff;border:1px solid #00203F;border-radius:99px;font-weight:600}.msg{color:#00203F}footer{font-size:.8rem;color:#55557a}
@media(max-width:520px){.grid{grid-template-columns:repeat(2,1fr);gap:.6rem}.body{padding:.6rem}.desc{font-size:.78rem}header h1{font-size:1.3rem}#controls{position:static}}