:root{
  --bg:#fff; --fg:#0a0a0a; --muted:#f5f5f5; --muted-fg:#666;
  --border:#e5e5e5; --primary:#0a0a0a; --primary-fg:#fff;
  --accent:#f5c518; --accent-fg:#000; --price:#0a0a0a; --success:#16a34a;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{font-family:"DM Sans",Arial,Helvetica,sans-serif;color:var(--fg);background:var(--bg);line-height:1.5;overflow-x:hidden;max-width:100vw}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 1rem}

/* Topbar */
.topbar{background:var(--primary);color:var(--primary-fg);text-align:center;font-size:.85rem;padding:.5rem 1rem;font-weight:500;letter-spacing:.05em}
.topbar-accent{color:#7DD3FC;font-weight:700}

/* Header */
.site-header{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--border);z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4.5rem}
.menu-btn{display:none;padding:.5rem;padding-left:0;margin-left:-.25rem}
.logo{display:flex;align-items:center;gap:.15rem;flex-shrink:0}
.logo-text{font-weight:900;font-size:1.5rem;letter-spacing:-.02em}
.logo-accent{font-weight:900;font-size:1.5rem;color:var(--accent)}
.logo-img{height:3rem;max-height:3rem;width:auto;max-width:200px;display:block;object-fit:contain}
.logo-img-footer{height:2.25rem;max-height:2.25rem;max-width:150px}
@media(max-width:640px){.logo-img{height:2.6rem;max-height:2.6rem;max-width:170px}}
.main-nav{display:flex;gap:2rem;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.main-nav a:hover{color:var(--accent)}
.header-actions{display:flex;align-items:center;gap:1rem}
.icon-btn{padding:.25rem}
.icon-btn:hover{color:var(--accent)}
.cart-btn{position:relative;padding:.25rem;display:inline-flex}
.cart-btn:hover{color:var(--accent)}
.cart-badge{position:absolute;top:-4px;right:-4px;background:var(--accent);color:var(--accent-fg);font-size:10px;font-weight:700;border-radius:9999px;height:18px;min-width:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.mobile-nav{border-top:1px solid var(--border);padding:1rem;display:none;flex-direction:column;gap:.5rem;font-weight:600;text-transform:uppercase;font-size:.85rem}
.mobile-nav.open{display:flex}
[hidden]{display:none!important}

@media(max-width:768px){
  .menu-btn{display:inline-flex}
  .main-nav{display:none}
  .header-inner{display:grid;grid-template-columns:1fr auto 1fr;gap:.5rem}
  .header-inner .menu-btn{justify-self:start}
  .header-inner .logo{justify-self:center}
  .header-inner .header-actions{justify-self:end}
}

/* Hero */
.hero img{width:100%;display:block}

/* Section / grid */
.section{padding:2.5rem 1rem}
.section-title{font-size:1.5rem;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:1.5rem;text-align:center}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
@media(min-width:768px){.grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(4,1fr)}}

/* Product card */
.product-card{display:block;background:var(--bg);border:1px solid var(--border);border-radius:.5rem;overflow:hidden;transition:all .2s}
.product-card:hover{border-color:rgba(0,0,0,.3);box-shadow:0 10px 25px -5px rgba(0,0,0,.1)}
.product-card-image{position:relative;aspect-ratio:1;background:var(--muted);overflow:hidden}
.product-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.product-card:hover .product-card-image img{transform:scale(1.05)}
.discount-tag{position:absolute;top:.75rem;left:.75rem;background:var(--primary);color:var(--primary-fg);font-size:.7rem;font-weight:700;padding:.25rem .5rem;border-radius:.25rem}
.product-card-info{padding:.75rem}
.product-card-info h3{font-family:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:.82rem;font-weight:600;line-height:1.3;margin-bottom:.4rem;display:block;white-space:normal;overflow:visible;word-break:break-word;overflow-wrap:anywhere;min-height:auto;max-height:none;-webkit-line-clamp:none;-webkit-box-orient:initial;text-overflow:clip}
.prices{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap}
.old-price{font-size:.58rem;color:var(--muted-fg);text-decoration:line-through}
.price{font-size:.74rem;font-weight:700;color:var(--price)}
.installment{font-size:.68rem;color:var(--muted-fg);margin-top:.2rem}
.free-shipping{display:inline-block;font-size:.62rem;font-weight:700;text-transform:uppercase;background:rgba(22,163,74,.15);color:var(--success);padding:.15rem .4rem;border-radius:.25rem;margin-top:.35rem}
@media(max-width:640px){.product-card-info{padding:.6rem}.product-card-info h3{font-size:.78rem}.price{font-size:.66rem}.old-price{font-size:.54rem}}

/* Breadcrumb / page title */
.breadcrumb{font-size:.85rem;color:var(--muted-fg);margin-bottom:1rem}
.breadcrumb a:hover{color:var(--fg)}
.breadcrumb span{color:var(--fg);font-weight:500}
.page-title{font-size:2rem;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;margin-bottom:1.5rem}
.empty-state{padding:5rem 0;text-align:center;color:var(--muted-fg)}

/* Product page */
.product-page{padding:1.5rem 1rem 3rem}
.product-grid{display:grid;gap:2rem}
@media(min-width:1024px){.product-grid{grid-template-columns:1fr 1fr;gap:3rem}}
.main-image{background:var(--muted);border-radius:.5rem;overflow:hidden;aspect-ratio:1}
.main-image img{width:100%;height:100%;object-fit:cover}
.thumbnails{display:flex;gap:.5rem;overflow-x:auto;margin-top:.75rem}
.thumb{flex:0 0 auto;width:5rem;height:5rem;border-radius:.375rem;overflow:hidden;border:2px solid var(--border)}
.thumb.is-selected{border-color:var(--primary)}
.thumb img{width:100%;height:100%;object-fit:cover}
.product-info{display:flex;flex-direction:column;gap:1.25rem}
.product-name{font-family:"DM Sans",Arial,Helvetica,sans-serif;font-size:1.75rem;font-weight:800;line-height:1.2;letter-spacing:0}
.rating-row{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted-fg)}
.stars{color:var(--accent);letter-spacing:1px}
.price-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.price-row .discount-tag{position:static;display:inline-flex;align-items:center;width:max-content;font-size:.72rem;line-height:1;padding:.35rem .55rem;border-radius:.25rem}
.old-price-lg{font-size:1rem;color:var(--muted-fg);text-decoration:line-through}
.price-lg{font-size:2.25rem;font-weight:900;color:var(--price)}
.installment-row{font-size:.9rem}
.shipping-pill{display:inline-flex;align-items:center;gap:.5rem;background:rgba(22,163,74,.1);color:var(--success);padding:.5rem .75rem;border-radius:.375rem;font-size:.85rem;width:fit-content}
.shipping-pill .check{font-weight:700}
.variant-group{display:flex;flex-direction:column;gap:.5rem}
.variant-label{font-size:.85rem;font-weight:600}
.variant-options{display:flex;flex-wrap:wrap;gap:.5rem}
.variant-btn{padding:0 1rem;height:2.75rem;min-width:3rem;border:2px solid var(--border);background:var(--bg);border-radius:.375rem;font-weight:600;font-size:.85rem;transition:all .15s}
.variant-btn:hover{border-color:var(--accent)}
.variant-btn.is-selected{border-color:var(--accent);background:rgba(245,197,24,.15);color:var(--fg)}
.color-note{display:inline-block;padding:.5rem 1rem;border:2px solid var(--accent);color:var(--accent);border-radius:.375rem;font-weight:500;font-size:.85rem}
.qty-buy{display:flex;gap:.75rem}
.qty-control{display:inline-flex;align-items:center;border:2px solid var(--border);border-radius:.375rem;height:3rem}
.qty-control button{padding:0 .85rem;height:100%;font-weight:700}
.qty-control button:hover{background:var(--muted)}
.qty-control span{width:2.5rem;text-align:center;font-weight:600}
.buy-btn{flex:1;height:3rem;background:var(--primary);color:var(--primary-fg);font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:.375rem;transition:opacity .15s}
.buy-btn:hover{opacity:.9}
.benefits{display:flex;flex-direction:column;gap:.75rem;padding-top:1rem;border-top:1px solid var(--border)}
.benefit{display:flex;gap:.75rem;align-items:flex-start}
.b-icon{background:rgba(22,163,74,.15);color:var(--success);padding:.5rem;border-radius:9999px;width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.benefit strong{display:block;font-size:.85rem}
.benefit small{font-size:.75rem;color:var(--muted-fg)}

/* Sections (description/reviews) */
.product-section{margin-top:3rem}
.product-section h2{font-family:"DM Sans",Arial,Helvetica,sans-serif;font-size:1.5rem;font-weight:800;margin-bottom:1.25rem;letter-spacing:0}
.desc-box{background:var(--muted);border-radius:.5rem;padding:2rem;display:flex;flex-direction:column;align-items:center;gap:1.5rem;font-size:.9rem;overflow:hidden}
.desc-image{display:block;width:100%;max-width:48rem;height:auto;margin:0 auto;border-radius:.375rem;object-fit:contain}
.desc-text{max-width:48rem;margin:0 auto;line-height:1.7}

.reviews-summary{display:grid;gap:1.5rem;align-items:center}
@media(min-width:640px){.reviews-summary{grid-template-columns:200px 1fr}}
.reviews-score{text-align:center}
.score-num{font-size:3rem;font-weight:900;line-height:1}
.score-meta{font-size:.75rem;color:var(--muted-fg);margin-top:.25rem}
.reviews-bars{display:flex;flex-direction:column;gap:.5rem}
.bar-row{display:flex;align-items:center;gap:.75rem;font-size:.85rem}
.bar-row>span:first-child{width:.75rem;font-weight:600}
.bar{flex:1;height:.5rem;background:var(--muted);border-radius:9999px;overflow:hidden}
.bar-fill{height:100%;background:var(--accent)}
.bar-row>span:last-child{width:2rem;text-align:right;color:var(--muted-fg)}
.reviews-list{margin-top:2rem;display:flex;flex-direction:column;gap:1rem}
.review-item{border:1px solid var(--border);border-radius:.5rem;padding:1rem}
.review-head{display:flex;justify-content:space-between;margin-bottom:.25rem;font-size:.85rem}
.review-name{font-weight:600}
.verified{color:var(--success);font-size:.75rem;margin-left:.25rem}
.review-date{font-size:.75rem;color:var(--muted-fg)}
.review-stars{color:var(--accent);font-size:.85rem;margin-bottom:.5rem}
.review-text{font-size:.85rem;color:var(--muted-fg)}
.pagination{margin-top:1.5rem;display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap}
.pagination button{height:2.25rem;min-width:2.25rem;padding:0 .75rem;border:1px solid var(--border);border-radius:.375rem;font-weight:600;font-size:.85rem;background:var(--bg)}
.pagination button:hover:not(:disabled){background:var(--muted)}
.pagination button:disabled{opacity:.4;cursor:not-allowed}
.pagination button.is-active{border-color:var(--accent);background:var(--accent);color:var(--accent-fg)}
.pagination .ellipsis{padding:0 .5rem;color:var(--muted-fg)}

/* Cart page (full screen, no header/footer) */
body.cart-page{background:var(--bg)}
.cart-page-header{position:relative;display:flex;align-items:center;justify-content:center;height:3.5rem;border-bottom:1px solid var(--border);padding:0 1rem}
.cart-page-header h1{font-size:1rem;font-weight:700;letter-spacing:.05em}
.cart-page-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%)}
.cart-close{position:absolute;right:1rem;top:50%;transform:translateY(-50%);padding:.25rem}
.cart-close:hover{color:var(--accent)}
.cart-container{max-width:42rem;margin:0 auto;padding:1rem;display:flex;flex-direction:column;min-height:calc(100vh - 3.5rem - 1px)}
.cart-empty{text-align:center;padding:5rem 1rem}
.cart-empty-icon{width:5rem;height:5rem;border-radius:9999px;background:var(--muted);display:inline-flex;align-items:center;justify-content:center;margin-bottom:1rem;color:var(--muted-fg)}
.cart-empty p{font-weight:600;margin-bottom:.5rem;font-size:1.1rem}
.cart-empty small{display:block;color:var(--muted-fg);margin-bottom:1.5rem}
.cart-empty a{display:inline-block;padding:0 1.5rem;height:3rem;line-height:3rem;border-radius:9999px;border:2px solid var(--primary);color:var(--primary);font-weight:700;text-transform:uppercase;font-size:.85rem}
.cart-empty a:hover{background:var(--muted)}
.cart-items{display:flex;flex-direction:column;gap:.75rem;flex:1}
.cart-item{background:rgba(245,245,245,.5);border-radius:.5rem;padding:.75rem;display:flex;gap:.75rem}
.cart-item-img{flex-shrink:0;width:5rem;height:5rem;background:var(--muted);border-radius:.25rem;overflow:hidden}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-info{flex:1;min-width:0;font-size:.85rem}
.cart-item-top{display:flex;justify-content:space-between;gap:.5rem}
.cart-item-name{font-weight:700;line-height:1.2}
.cart-item-remove{color:var(--muted-fg);flex-shrink:0}
.cart-item-remove:hover{color:#dc2626}
.cart-item-meta{font-size:.75rem;font-weight:600;margin-top:.15rem}
.cart-item-qty{font-size:.75rem;color:var(--muted-fg);margin-top:.15rem}
.cart-item-prices{margin-top:.4rem;display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;font-size:.75rem;align-items:end}
.cart-item-prices .label{color:var(--muted-fg)}
.cart-item-prices .strike{color:var(--muted-fg);text-decoration:line-through}
.cart-item-prices .item-price{font-weight:700;font-size:.9rem}
.cart-item-prices .saved{color:var(--accent);font-weight:700;text-align:center;line-height:1.2}
.cart-item-prices .total{font-weight:700;font-size:.9rem;text-align:right}
.cart-footer{border-top:1px solid var(--border);background:var(--bg);padding-top:1rem;margin-top:1rem;display:flex;flex-direction:column;gap:.75rem}
.cart-savings{display:flex;justify-content:space-between;font-size:.85rem}
.cart-savings .label{color:var(--accent);font-weight:600;text-decoration:underline}
.cart-savings .value{color:var(--accent);font-weight:700}
.cart-subtotal{display:flex;justify-content:space-between;font-size:1.1rem}
.cart-subtotal strong{font-weight:700}
.cart-continue{height:3rem;border-radius:9999px;border:2px solid var(--primary);font-weight:500;font-size:.85rem;background:var(--bg)}
.cart-continue:hover{background:var(--muted)}
.cart-checkout{height:3rem;background:var(--primary);color:var(--primary-fg);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.85rem;border-radius:0}
.cart-checkout:hover{opacity:.9}


/* Mobile product/cart fixes */
@media(max-width:640px){
  .container{padding:0 1.5rem}
  .topbar{font-size:.72rem;padding:.42rem .5rem;line-height:1.25}
  .header-inner{height:4rem;gap:.5rem}
  .logo-text,.logo-accent{font-size:1.25rem}
  .header-actions{gap:.55rem}
  .icon-btn{display:none}
  .mobile-nav{padding:.75rem;font-size:.8rem}
  .hero{overflow:hidden}
  .hero img{width:100%;height:auto;min-height:0;object-fit:contain;object-position:center}
  .section{padding:1.35rem 0}
  .container.section{padding-left:1.25rem;padding-right:1.25rem}
  .section-title,.page-title{font-size:1.08rem;margin-bottom:.9rem;line-height:1.2;padding:0 .1rem;text-align:center}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;min-width:0}
  .product-card{min-width:0;border-radius:.4rem}
  .product-card-image{aspect-ratio:1/1}
  .product-card-info{padding:.52rem}
  .product-card-info h3{font-size:.72rem;line-height:1.22;margin-bottom:.32rem;min-height:auto;max-height:none;overflow:visible;overflow-wrap:anywhere;word-break:break-word;white-space:normal;display:block;-webkit-line-clamp:none;-webkit-box-orient:initial;text-overflow:clip}
  .prices{gap:.25rem;line-height:1.1}
  .old-price{font-size:.6rem}
  .price{font-size:.74rem;line-height:1.1}
  .installment{font-size:.6rem;line-height:1.25;margin-top:.16rem}
  .free-shipping{font-size:.55rem;padding:.12rem .32rem;margin-top:.28rem}
  .discount-tag{top:.45rem;left:.45rem;font-size:.58rem;padding:.18rem .36rem}
  .product-page{padding:1rem .75rem 2rem}
  .breadcrumb{font-size:.75rem;margin-bottom:.75rem;line-height:1.35;white-space:normal;overflow-wrap:anywhere}
  .product-grid{gap:1.25rem;min-width:0}
  .product-gallery,.product-info{min-width:0}
  .main-image{aspect-ratio:1;max-height:75vh;border-radius:.375rem}
  .main-image img{width:100%;height:100%;object-fit:cover}
  .thumbnails{gap:.4rem;margin-top:.55rem;padding-bottom:.15rem}
  .thumb{width:4rem;height:4rem}
  .product-info{gap:.9rem}
  .product-name{font-size:1.25rem;line-height:1.25;overflow-wrap:anywhere}
  .rating-row{font-size:.78rem;gap:.35rem;flex-wrap:wrap}
  .price-row{gap:.5rem;align-items:baseline;position:relative}
  .price-row .discount-tag{position:static;font-size:.65rem;padding:.2rem .45rem}
  .old-price-lg{font-size:.85rem}
  .price-lg{font-size:1.65rem;line-height:1.05}
  .installment-row{font-size:.82rem;line-height:1.35}
  .shipping-pill{width:100%;font-size:.78rem;line-height:1.3;padding:.5rem .6rem;align-items:flex-start}
  .variant-group{gap:.4rem}
  .variant-options{gap:.4rem}
  .variant-btn{height:2.35rem;min-width:2.55rem;padding:0 .65rem;font-size:.78rem}
  .color-note{font-size:.8rem;padding:.45rem .7rem}
  .qty-buy{gap:.5rem;align-items:stretch}
  .qty-control{height:2.75rem;flex-shrink:0}
  .qty-control button{padding:0 .7rem}
  .qty-control span{width:2rem}
  .buy-btn{height:2.75rem;font-size:.8rem;letter-spacing:.03em;min-width:0}
  .benefits{gap:.6rem;padding-top:.75rem}
  .benefit{gap:.55rem}
  .benefit strong{font-size:.8rem;line-height:1.25}
  .benefit small{font-size:.72rem;line-height:1.25}
  .product-section{margin-top:2rem}
  .product-section h2{font-size:1.2rem;margin-bottom:.8rem}
  .desc-box{padding:1rem;border-radius:.375rem;gap:1rem;font-size:.84rem}
  .desc-image{width:100%;max-width:100%;margin:0 auto;border-radius:.25rem}
  .desc-text{max-width:100%;line-height:1.55}
  .reviews-summary{gap:1rem}
  .score-num{font-size:2.4rem}
  .bar-row{gap:.5rem;font-size:.8rem}
  .review-item{padding:.8rem}
  .review-head{display:block;font-size:.8rem}
  .verified{display:inline-block;margin-left:.25rem}
  .review-date{display:block;margin-top:.15rem}
  .pagination{gap:.3rem}
  .pagination button{height:2rem;min-width:2rem;padding:0 .55rem;font-size:.78rem}
  .site-footer{margin-top:2rem}
  .footer-grid{padding:2rem .75rem 1.25rem;gap:1.75rem}
  .footer-bottom{padding:1rem .75rem;font-size:.7rem}
  .cart-page-header{height:3.25rem;padding:0 .75rem}
  .cart-page-header h1{font-size:.92rem}
  .cart-page-icon{left:.75rem}
  .cart-close{right:.75rem}
  .cart-container{width:100%;max-width:100%;padding:.75rem;min-height:calc(100vh - 3.25rem - 1px)}
  .cart-items{gap:.65rem}
  .cart-item{gap:.6rem;padding:.6rem;border-radius:.45rem;align-items:flex-start;width:100%;min-width:0}
  .cart-item-img{width:4.2rem;height:4.2rem;border-radius:.22rem}
  .cart-item-info{font-size:.78rem;min-width:0;overflow:hidden}
  .cart-item-top{gap:.35rem;align-items:flex-start}
  .cart-item-name{font-size:.78rem;line-height:1.22;overflow-wrap:anywhere;word-break:normal}
  .cart-item-meta{font-size:.68rem;line-height:1.25;overflow-wrap:anywhere}
  .cart-item-qty{font-size:.68rem}
  .cart-item-prices{grid-template-columns:1fr 1fr;gap:.35rem .5rem;font-size:.68rem;width:100%;align-items:start}
  .cart-item-prices .item-price{font-size:.78rem}
  .cart-item-prices .saved{text-align:left;font-size:.68rem}
  .cart-item-prices .total{grid-column:1 / -1;text-align:right;font-size:.82rem;padding-top:.15rem;border-top:1px solid var(--border)}
  .cart-footer{position:sticky;bottom:0;margin:.75rem -.75rem 0;padding:.75rem;background:var(--bg);box-shadow:0 -8px 18px rgba(0,0,0,.06)}
  .cart-savings{gap:.75rem;font-size:.76rem;line-height:1.25;align-items:flex-start}
  .cart-savings .label{max-width:68%}
  .cart-subtotal{font-size:1rem}
  .cart-checkout,.cart-continue{height:2.8rem;font-size:.74rem;line-height:1.1;padding:0 .5rem}
}

/* Footer */
.site-footer{margin-top:4rem;border-top:1px solid var(--border);background:var(--bg)}
.footer-grid{padding:3rem 1rem 2rem;display:grid;gap:2.5rem}
@media(min-width:768px){.footer-grid{grid-template-columns:repeat(3,1fr)}}
.footer-title{font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem;border-left:4px solid var(--accent);padding-left:.5rem}
.footer-list{list-style:none;display:flex;flex-direction:column;gap:.75rem;font-size:.85rem;color:var(--muted-fg)}
.footer-list a:hover{color:var(--fg)}
.badges{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.badges img{height:2.5rem;width:auto;object-fit:contain}
.footer-bottom{border-top:1px solid var(--border);padding:1.5rem 1rem;text-align:center;font-size:.75rem;color:var(--muted-fg);display:flex;flex-direction:column;gap:.25rem}
.footer-bottom strong{color:var(--fg);font-weight:700}

/* Toast */
.toast{position:fixed;top:1rem;left:50%;transform:translateX(-50%);background:var(--success);color:#fff;padding:.75rem 1.25rem;border-radius:.375rem;font-size:.9rem;font-weight:600;box-shadow:0 10px 25px -5px rgba(0,0,0,.2);z-index:100}