/* TOPPER.EE visual system — UI/UX Pro Max adapted to existing blue / pink brand */
:root{--ink:#151920;--muted:#5d6570;--blue:#176fff;--pink:#ef347a;--cream:#fff9f6;--border:#e2e6eb;--radius:22px;--ui-speed:220ms}
body{font-family:"Nunito Sans",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand,.product-name,.price-band strong,.product-price,.modal-price{font-family:"Rubik","Nunito Sans",sans-serif}
:focus-visible{outline:3px solid #1168ee!important;outline-offset:4px!important}
button,a,select,input{touch-action:manipulation}
button{min-height:44px}
:where(.header,.category-nav,.product,.btn,.iconbutton,.gallery-thumbs button){transition:background-color var(--ui-speed) ease,border-color var(--ui-speed) ease,box-shadow var(--ui-speed) ease,transform var(--ui-speed) ease}
.hero-copy{background:#fbeef2}
.hero h1{font-weight:800;letter-spacing:-.065em}
.hero h1 em{color:#176fff}
.hero-photos{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.hero-photo{border:2px solid #fff;box-shadow:0 14px 32px #1a183713}
.hero-meta{margin-top:auto}
.kicker{color:#b21d5c}
.product{border-color:#e7e9ef;background:#fff}
.product-photo{background:#f1edf0}
.product-photo img{object-fit:cover}
.product-price{color:#075acb}
.product:hover{box-shadow:0 15px 35px #23283d17;transform:translateY(-3px)}
.product-photo img{transition:transform .28s ease}
.product:hover .product-photo img{transform:scale(1.045)}
.product-tag{background:#fffdfa;font-size:10px}
.product-name{font-weight:750}
.add{color:#075acb;border-color:#b2d2ff;background:#eaf2ff;min-height:44px}
.add:hover{background:#d8e8ff}
.product-fav{min-height:36px}
.wholesale{background:#eaf2ff}
.wholesale .kicker{color:#1257b4}
.wholesale .btn{box-shadow:0 8px 18px #1057c028}
#catalog{scroll-margin-top:190px}
#featured,#how-it-works,#wholesale{scroll-margin-top:170px}
.edit-feature{margin:32px 0 77px}
.edit-head{max-width:740px;margin:0 0 25px}
.edit-h2{font-size:clamp(31px,4vw,49px);letter-spacing:-.052em;line-height:1.12;margin:12px 0 8px;font-weight:850}
.edit-sub{font-size:16px;color:#5e6771;line-height:1.6}
.featured-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.feature-card{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);border-radius:24px;overflow:hidden;background:#fff;border:1px solid var(--border);min-height:285px}
.feature-picture{padding:0;background:#f5e8ed;border:0;display:block;height:100%;width:100%;min-height:285px;overflow:hidden;position:relative}
.feature-picture img{height:100%;width:100%;object-fit:cover;transition:transform .3s ease}
.feature-picture:hover img{transform:scale(1.04)}
.feature-cat .feature-picture{background:#ece7ec}
.feature-copy{padding:26px 22px;display:flex;align-items:flex-start;flex-direction:column;justify-content:center}
.feature-copy h3{font-size:clamp(22px,2.4vw,31px);letter-spacing:-.04em;line-height:1.13;margin:14px 0}
.feature-copy p{font-size:14px;line-height:1.55;color:#58636e}
.feature-action{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.feature-action b{font-family:"Rubik",sans-serif;color:#075acb;font-size:24px}
.feature-buy{background:#151a27;color:#fff;border-radius:12px;padding:12px 14px}
.feature-buy:hover{background:#095bd7}
.coffee-how{margin:90px 0 56px}
.coffee-how-header{max-width:690px;margin:0 0 28px}
.coffee-how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.how-step{background:#fff;border:1px solid var(--border);border-radius:22px;padding:26px;position:relative;min-height:235px}
.how-n{color:#aab0bd;font-family:"Rubik",sans-serif;font-size:12px;font-weight:800;letter-spacing:.12em}
.how-symbol{position:absolute;right:26px;top:22px;font-size:28px;color:var(--pink)}
.how-step h3{margin:43px 0 12px;font-size:22px;letter-spacing:-.035em}
.how-step p{margin:0;color:#53606b;line-height:1.55;font-size:14px;max-width:310px}
.how-footer{margin:15px 0 0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:17px 21px;background:#f5f5f7;border-radius:15px;color:#525b69;font-size:13px}
.how-footer a{color:#075acb;font-weight:900}
.mobile-quick-shop{display:none}
@media(max-width:1100px){.feature-card{grid-template-columns:1fr}.feature-picture{min-height:240px;max-height:270px}.feature-copy{padding:19px}.feature-action{margin-top:4px}}
@media(max-width:730px){
 .hero-copy{background:#fbeef2}
 .hero h1{font-size:clamp(39px,11vw,49px)}
 .edit-feature{margin:26px 0 53px}
 .edit-h2{font-size:31px}
 .featured-grid{grid-template-columns:1fr;gap:12px}
 .feature-card{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);min-height:215px}
 .feature-picture{min-height:210px;max-height:none;height:100%}
 .feature-copy{padding:14px;justify-content:center}
 .feature-copy h3{font-size:20px;margin:9px 0}
 .feature-copy p{font-size:12px;margin-bottom:6px}
 .feature-action{gap:7px}
 .feature-action b{font-size:21px}
 .feature-buy{padding:10px;font-size:11px}
 .coffee-how{margin:51px 0 27px}
 .coffee-how-grid{grid-template-columns:1fr}
 .how-step{min-height:150px;padding:17px}
 .how-step h3{margin:18px 0 6px}
 .how-symbol{top:14px;right:17px}
 .how-footer{display:block;line-height:1.6;padding:13px}
 .how-footer a{display:block;margin-top:8px}
 .mobile-quick-shop{position:fixed;z-index:25;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 11px 11px 18px;background:#121824;color:#fff;border-radius:17px;box-shadow:0 12px 50px #14192475;transform:translateY(140%);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
 .mobile-quick-shop.is-visible{transform:none;opacity:1;pointer-events:auto}
 .mobile-quick-shop b{display:block;font-size:13px}
 .mobile-quick-shop small{display:block;font-size:10px;letter-spacing:.1em;color:#e2a4bd}
 .mobile-quick-shop a{background:#fff;border-radius:12px;color:#0c3e94;padding:12px;font-size:12px;font-weight:900;white-space:nowrap}
 body:has(.modal-wrap:not(.hidden)) .mobile-quick-shop,body:has(.drawer:not(.hidden)) .mobile-quick-shop{display:none}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .product:hover,.feature-picture:hover img{transform:none!important}
}