/* Storefront layer: shared commerce styling and responsive home page. */
:root { --shop-ink:#182b25; --shop-green:#234b3b; --shop-lime:#dbea8b; --shop-paper:#f5f6f2; --shop-line:#dce2da; }
html { margin:0; background:var(--shop-paper); scroll-behavior:smooth; }
body { color:var(--shop-ink); font-family:Arial,Helvetica,sans-serif; letter-spacing:0; }
body > .header { background:#fff; border-bottom:1px solid var(--shop-line); }
body > .header > .floater { max-width:1280px; }
.header #computer > .table:first-child { padding:22px 20px !important; }
.header #computer > .table ~ .table { padding:12px 0 !important; border-top:1px solid var(--shop-line); }
.header #computer a.top { font-size:14px; font-weight:700; letter-spacing:0; }
.header #search { border:1px solid var(--shop-line); border-radius:6px !important; background:var(--shop-paper); text-align:left !important; font-size:15px; padding:16px 18px; }
.shop-utility { background:var(--shop-green); color:#fff; text-align:center; padding:10px 16px; font-size:12px; letter-spacing:1px; }
.shop-home { max-width:1280px; margin:auto; padding:28px 24px 64px; }
.shop-home * { box-sizing:border-box; }
.shop-home a { text-decoration:none; color:inherit; }
.shop-hero { display:grid; grid-template-columns:1fr 1fr; min-height:430px; background:var(--shop-green); color:#fff; overflow:hidden; border-radius:10px; }
.shop-hero-copy { padding:52px 44px; align-self:center; }
.shop-eyebrow { display:block; font-size:11px; font-weight:700; letter-spacing:1.6px; line-height:1.6; }
.shop-hero .shop-eyebrow { color:var(--shop-lime); }
.shop-home h1 { font-size:clamp(36px,4.4vw,62px); line-height:1.04; letter-spacing:-2px; margin:22px 0; font-weight:700; }
.shop-home p { font-size:16px; line-height:1.7; max-width:390px; margin:0 0 28px; }
.shop-hero p { color:#dce7e0; }
.shop-home .shop-button { display:inline-flex; gap:32px; justify-content:space-between; align-items:center; padding:16px 22px; background:var(--shop-lime); color:var(--shop-ink); font-weight:700; font-size:14px; border-radius:4px; }
.shop-home .shop-button:hover { background:#edf5bf; }
.shop-hero-photo { background:linear-gradient(0deg,rgba(0,0,0,.25),transparent),url('https://images.immediate.co.uk/production/volatile/sites/21/2022/10/Best-road-bike-helmets-2022-ef7cfa9.jpeg?webp=true&quality=75&resize=1240%2C826') center/cover; display:flex; align-items:flex-end; padding:28px; }
.shop-hero-photo span { color:#fff; border:1px solid #ffffff80; padding:10px 14px; font-size:11px; letter-spacing:2px; }
.shop-benefits { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--shop-line); padding:22px 0; text-align:center; font-size:13px; font-weight:700; }
.shop-benefits span+span { border-left:1px solid var(--shop-line); }
.shop-section { padding:50px 0 0; scroll-margin-top:20px; }
.shop-section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:24px; }
.shop-section-heading > span { font-size:13px; color:#667269; }
.shop-home h2 { font-size:32px; line-height:1.15; letter-spacing:-1px; margin:9px 0 0; }
.shop-categories { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.shop-category { background:#fff; border:1px solid var(--shop-line); border-radius:7px; padding:24px; transition:border-color .15s,transform .15s; }
.shop-category:hover { border-color:var(--shop-green); transform:translateY(-3px); }
.shop-category-number { display:inline-flex; background:var(--shop-paper); width:36px; height:36px; align-items:center; justify-content:center; border-radius:50%; font-size:12px; color:#667269; }
.shop-home h3 { font-size:18px; margin:22px 0; line-height:1.35; }
.shop-category-link { display:flex; justify-content:space-between; font-size:13px; }
.shop-product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.shop-product { padding:18px; border:1px solid var(--shop-line); border-radius:7px; background:#fff; display:flex; flex-direction:column; }
.shop-product-image { aspect-ratio:1; position:relative; margin-bottom:18px; }
.shop-product-image img { width:100%; height:100%; object-fit:contain; }
.shop-product h3 { margin:8px 0 18px; font-size:16px; }
.shop-product strong { font-size:22px; margin-top:auto; }
.shop-product del { font-size:13px; color:#69726b; margin-top:6px; }
.shop-badge { position:absolute; top:0; left:0; padding:6px 10px; background:var(--shop-lime); font-size:12px; }
.shop-product-action { display:flex; justify-content:space-between; border-top:1px solid var(--shop-line); margin-top:18px; padding-top:14px; font-size:13px; font-weight:700; }
.shop-feature { margin-top:52px; display:grid; grid-template-columns:1fr 1fr; background:#e7ebdf; border-radius:8px; overflow:hidden; }
.shop-feature > div:first-child { padding:40px; }
.shop-feature h2 { margin-bottom:20px; font-size:40px; }
.shop-feature-photo { background:url('https://rollingspoke.com/live/wp-content/uploads/2020/09/bikebaskets_n28.jpg') center/cover; min-height:300px; }
.products { border:1px solid var(--shop-line); border-radius:7px; padding:16px; transition:box-shadow .15s; }
.products:hover { box-shadow:0 6px 22px #182b2512; }
a.productoverview { color:var(--shop-ink); }
.products::after { content:'Se produkt →'; display:block; padding:12px; background:var(--shop-green); color:#fff; border-radius:4px; font-size:14px; font-weight:700; }
.front-button-inv { background:var(--shop-green); color:#fff; border-color:var(--shop-green); font-family:inherit; border-radius:5px; }
.footer { background:var(--shop-ink); }
.footer .header { background:transparent; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid #a5bf39; outline-offset:4px; }
.shop-mobile-cart { display:none; }
@media(max-width:1024px) {
 .shop-mobile-cart { display:inline-block; color:var(--shop-ink); text-decoration:none; font-size:14px; font-weight:700; vertical-align:middle; margin-right:12px; }
 .shop-categories,.shop-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .shop-hero-copy { padding:32px; }
}
@media(max-width:600px) {
 .shop-home { padding:16px 16px 40px; }
 .shop-hero { grid-template-columns:1fr; }
 .shop-hero-copy { padding:30px 24px; }
 .shop-hero-photo { min-height:220px; }
 .shop-benefits { gap:8px; font-size:11px; line-height:1.5; padding:18px 0; }
 .shop-section { padding-top:34px; }
 .shop-section-heading > span { display:none; }
 .shop-home h2 { font-size:27px; }
 .shop-category { padding:18px; }
 .shop-home h3 { font-size:16px; }
 .shop-feature { grid-template-columns:1fr; margin-top:34px; }
 .shop-feature > div:first-child { padding:28px; }
 .shop-feature-photo { min-height:230px; }
 .shop-product { padding:12px; }
 .shop-product strong { font-size:19px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .shop-category { transition:none; } }