:root{--red:#a9091e;--deep:#710a17;--yellow:#ffd13c;--paper:#fff8ec;--ink:#2d1514;--line:#ead8c6}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.55 system-ui,sans-serif}
header{background:var(--deep);border-bottom:5px solid var(--yellow);color:white}
.top,main,footer>div{max-width:1150px;margin:auto;padding:1rem}
.top,.heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-size:1.6rem;font-weight:900;letter-spacing:.1em;color:var(--yellow)}
.brand img{object-fit:contain;background:white;border-radius:50%}
nav,.inline,.tabs{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
nav form{margin:0}
header a,header .link{color:white;text-decoration:none}
main{min-height:70vh;padding-bottom:3rem}
a{color:var(--deep)}
.hero{background:linear-gradient(120deg,var(--deep),#cf1629);color:white;padding:clamp(1.5rem,6vw,5rem);border-radius:1.5rem;margin:1rem 0 2rem}
.hero h1{font-size:clamp(2.2rem,7vw,5rem);line-height:1.02;margin:.45em 0 .2em}
.hero .button,.pill{background:var(--yellow);color:#321910}
.pill{display:inline-block;border-radius:2rem;padding:.3rem .75rem;font-size:.83rem;font-weight:750}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(235px,100%),1fr));gap:1rem}
.card,.panel{background:white;border:1px solid var(--line);border-radius:1rem}
.card{overflow:hidden}
.card>img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff2d8;display:block}
.cardbody,.panel{padding:1.15rem}
.panel{margin:1rem 0;max-width:800px}
.card h3{line-height:1.25}
.price{font-size:1.25rem;font-weight:800;color:var(--deep)}
del{color:#755d54;font-weight:500;font-size:.95rem}
button,.button{display:inline-block;font:inherit;font-weight:700;border:0;border-radius:.55rem;padding:.55rem .95rem;cursor:pointer;background:var(--red);color:white;text-decoration:none}
button:hover,.button:hover{filter:brightness(.9)}
.link{background:none;padding:0;font-weight:500}
.stack{display:grid;gap:.9rem}
.stack>button{justify-self:start}
label{display:grid;gap:.28rem;font-weight:650}
input,select,textarea{font:inherit;color:inherit;padding:.55rem;border:1px solid #b99b87;border-radius:.5rem;background:white;max-width:100%}
textarea{width:100%}
.check{display:flex;align-items:center;gap:.5rem}
input[type=number]{max-width:9rem}
:focus-visible{outline:3px solid #267ec3;outline-offset:3px}
.notice,.error{padding:.8rem 1rem;border-radius:.5rem;background:#fff0b7;color:#402900}
.error{background:#ffe0e0;color:#711}
.scroll{overflow:auto;margin:1rem 0}
table{width:100%;border-collapse:collapse;background:white}
td,th{padding:.65rem;text-align:left;border-bottom:1px solid var(--line)}
.tabs{margin:1rem 0}
.tabs a{background:#ffe7a5;border-radius:.5rem;padding:.4rem .7rem}
.thumb{width:120px;height:120px;object-fit:contain}
details{margin-top:.75rem}
footer{background:var(--deep);color:white}
footer a{color:var(--yellow)}
body{background:#f5f5f5}
.announcement{background:#570717;color:#ffe9a1;text-align:center;font-size:12px;padding:6px 12px;letter-spacing:.04em}
header{background:linear-gradient(110deg,#8b081e,#b30e27);position:sticky;top:0;z-index:20;border-bottom:0;box-shadow:0 2px 15px #53051522}
.top{padding:16px;max-width:1200px}
.header-search{max-width:1168px;margin:0 auto;padding:0 0 16px;display:flex;gap:6px}
.header-search input{flex:1;min-width:0;border:0;border-radius:5px;background:white}
.header-search button{background:var(--yellow);color:var(--deep);min-width:85px}
main{max-width:1200px}
.hero{position:relative;overflow:hidden;border-radius:8px;padding:45px 48px;background:linear-gradient(100deg,#790818,#bd1229);min-height:340px;margin:12px 0}
.hero h1{font-size:clamp(32px,4.5vw,56px);max-width:60%}
.hero p{max-width:52%;font-size:15px;color:#ffe4d6}
.hero-art{position:absolute;right:4%;top:30px;width:31%;display:grid;justify-items:center;transform:rotate(4deg)}
.hero-art img{height:205px;width:100%;object-fit:contain;background:#fff5d5;border:8px solid #ffd13c;border-radius:22px;box-shadow:12px 18px 0 #65061555}
.hero-art span{margin-top:12px;text-align:center;color:#ffe291;font-weight:800}
.benefits{display:flex;justify-content:space-around;gap:15px;background:white;border-radius:7px;padding:18px;font-size:14px;color:#710a17}
.categories{padding:20px 0;gap:10px}
.categories a{padding:10px 22px;background:#fff;border:1px solid #eddfcf;border-radius:30px;text-decoration:none;font-weight:700;font-size:14px}
.categories a:hover{background:#fff0b7}
.heading{background:white;border-bottom:3px solid #a9091e;padding:12px 16px;margin-bottom:15px}
.heading h2{font-size:20px;margin:0;color:#a9091e}
.heading .inline{display:none}
.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.card{border-radius:6px;border:1px solid #eee;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 5px 15px #65061518;border-color:#b90d27}
.card>a{display:block;background:#fff7e8}
.card>a>img{width:100%;aspect-ratio:1;object-fit:contain}
.cardbody{padding:12px}
.card h3{font-size:15px;line-height:1.5;margin:8px 0;min-height:45px}
.card h3 a{text-decoration:none;color:#2d1514}
.card-description{display:none}
.card button{width:100%;font-size:13px}
.card .price{margin:9px 0}
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:35px;background:white;padding:25px;border-radius:10px}
.gallery>img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff8ec;border-radius:8px}
.gallery-thumbs{display:flex;gap:8px;overflow:auto;margin-top:10px}
.gallery-thumbs button{padding:3px;background:white;border:1px solid #ddd;flex-shrink:0}
.gallery-thumbs button[aria-pressed=true]{border:2px solid #a9091e}
.gallery-thumbs img{width:65px;height:65px;object-fit:contain}
.product-info h1{font-size:28px;line-height:1.3}
.detail-price{background:#fff4ec;padding:18px;display:flex;align-items:center;gap:15px}
.detail-price strong{color:#a9091e;font-size:32px}
.purchase{display:flex;gap:20px;align-items:end;margin:25px 0}
.delivery-note{border-top:1px solid #eee;padding-top:20px;color:#68564b;font-size:14px}
.breadcrumb{font-size:13px}
.mobile-nav{display:none}
@media(max-width:700px){
.top{padding:12px}.brand{font-size:22px}.brand img{width:32px;height:32px}
.top nav{font-size:12px;gap:12px}.header-search{padding:0 12px 12px}
main{padding:10px 10px 30px}.hero{padding:24px 18px;min-height:260px}
.hero h1{font-size:32px;max-width:65%}.hero p{font-size:12px;max-width:58%}
.hero-art{right:2%;top:55px;width:32%}.hero-art img{height:125px;border-width:4px}.hero-art span{font-size:11px}
.hero .pill{font-size:10px}.hero .button{font-size:13px}
.benefits{font-size:10px;padding:12px 6px;gap:8px}
.categories{flex-wrap:nowrap;overflow:auto;padding:15px 0}.categories a{white-space:nowrap;font-size:12px;padding:8px 14px}
.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.card h3{font-size:13px}.cardbody{padding:9px}.card .price{font-size:18px}.card del{font-size:12px}
.product-detail{grid-template-columns:1fr;padding:14px;gap:15px}.product-info h1{font-size:24px}
.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:white;border-top:1px solid #ddd;z-index:30;justify-content:space-around;padding:7px 0 max(7px,env(safe-area-inset-bottom))}
.mobile-nav a{display:grid;text-align:center;text-decoration:none;color:#a9091e;font-size:22px;line-height:1.2}.mobile-nav span{font-size:11px;margin-top:4px}
body{padding-bottom:70px}footer{font-size:12px}
}