/* ========================================================================== Energy drink vertical — design tokens and structural CSS. Intent-specific colour overrides are applied via data-intent on . Full component styling is added in the design sprint (UX-2+). ========================================================================== */ /* -------------------------------------------------------------------------- Root tokens -------------------------------------------------------------------------- */ :root { --energy-cyan: #06B6D4; --energy-blue: #2563EB; --energy-lime: #A3E635; --energy-orange: #F97316; --energy-yellow: #FACC15; --energy-red: #EF4444; --text-main: #0F172A; --text-muted: #64748B; --text-soft: #94A3B8; --line: #E2E8F0; --surface: #FFFFFF; --surface-soft: #F8FAFC; --page-bg: #F8FAFC; --page-bg-warm: #EEF6FA; /* Surface / card tokens */ --card-bg: #FFFFFF; --border: #E2E8F0; --sale-color: #DC2626; --sale-bg: #FEF2F2; /* Intent colour (RGB triplet — consumed with rgba() or rgb()) */ --intent-primary: 6 182 212; --intent-soft: 207 250 254; --page-glow: 6 182 212; /* Hero gradient stops */ --hero-surface-start: 255 255 255; --hero-surface-mid: 207 250 254; --hero-surface-end: 186 230 253; --hero-accent-strong: 6 182 212; --hero-accent-soft: 186 230 253; --ink: #101827; --muted: #7B8496; --hero-media-start: 240 249 255; --hero-media-end: 240 253 255; --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* -------------------------------------------------------------------------- Intent overrides — each commercial page gets its own colour identity -------------------------------------------------------------------------- */ [data-intent="basta-energidrycken"] { --intent-primary: 6 182 212; --intent-soft: 207 250 254; --page-glow: 6 182 212; --hero-surface-mid: 207 250 254; --hero-surface-end: 186 230 253; --hero-accent-strong: 6 182 212; --hero-accent-soft: 186 230 253; } [data-intent="energidryck-billigast"] { --intent-primary: 249 115 22; --intent-soft: 255 237 213; --page-glow: 249 115 22; --hero-surface-mid: 255 237 213; --hero-surface-end: 254 215 170; --hero-accent-strong: 249 115 22; --hero-accent-soft: 254 215 170; } [data-intent="energidryck-rea"] { --intent-primary: 239 68 68; --intent-soft: 254 226 226; --page-glow: 239 68 68; --hero-surface-mid: 254 226 226; --hero-surface-end: 254 202 202; --hero-accent-strong: 239 68 68; --hero-accent-soft: 254 202 202; } [data-intent="energidryck-sockerfri"] { --intent-primary: 132 204 22; --intent-soft: 236 252 203; --page-glow: 132 204 22; --hero-surface-mid: 236 252 203; --hero-surface-end: 217 249 157; --hero-accent-strong: 132 204 22; --hero-accent-soft: 217 249 157; } [data-intent="energidryck-flak"] { --intent-primary: 37 99 235; --intent-soft: 219 234 254; --page-glow: 37 99 235; --hero-surface-mid: 219 234 254; --hero-surface-end: 191 219 254; --hero-accent-strong: 37 99 235; --hero-accent-soft: 191 219 254; } [data-intent="energidryck-mest-koffein"] { --intent-primary: 250 204 21; /* Yellow-400 — bright, high energy */ --intent-soft: 254 249 195; --page-glow: 250 204 21; --hero-surface-mid: 254 249 195; --hero-surface-end: 253 224 71; --hero-accent-strong: 202 138 4; --hero-accent-soft: 253 224 71; } [data-intent="energidryck-koffein-per-krona"] { --intent-primary: 245 158 11; /* Amber-400 — warm, value/efficiency */ --intent-soft: 254 243 199; --page-glow: 245 158 11; --hero-surface-mid: 253 230 138; --hero-surface-end: 252 211 77; --hero-accent-strong: 217 119 6; --hero-accent-soft: 252 211 77; } [data-intent="energidryck-shots"] { --intent-primary: 168 85 247; --intent-soft: 243 232 255; --page-glow: 168 85 247; --hero-surface-mid: 243 232 255; --hero-surface-end: 233 213 255; --hero-accent-strong: 168 85 247; --hero-accent-soft: 233 213 255; } /* -------------------------------------------------------------------------- CTA contrast overrides All ratios calculated against WCAG 1.4.3 (15px/800 = normal text, 4.5:1 required) Intent | bg | L bg | text | ratio Bästa | #06B6D4 cyan | 0.382 | #1C1917 | 7.20:1 dark text Billigast | #F97316 orange | 0.325 | #1C1917 | 6.24:1 dark text Rea | #DC2626 red-600 | 0.167 | #FFFFFF | 4.83:1 darkened bg Sockerfri | #84CC16 lime | 0.481 | #14532D | 4.61:1 dark text Flak | #2563EB blue | 0.153 | #FFFFFF | 5.17:1 ✓ no change Hög koffein | #FACC15 yellow | 0.636 | #1C1917 | 11.42:1 dark text Koffein/krona | #F59E0B amber | 0.439 | #1C1917 | 8.14:1 dark text Shots | #9333EA vio-600 | 0.145 | #FFFFFF | 5.38:1 darkened bg -------------------------------------------------------------------------- */ /* Dark text on bright backgrounds */ [data-intent="basta-energidrycken"] .energy-cta, [data-intent="basta-energidrycken"] .btn-primary { color: #1C1917; } [data-intent="energidryck-billigast"] .energy-cta, [data-intent="energidryck-billigast"] .btn-primary { color: #1C1917; } [data-intent="energidryck-sockerfri"] .energy-cta, [data-intent="energidryck-sockerfri"] .btn-primary { color: #14532D; } [data-intent="energidryck-mest-koffein"] .energy-cta, [data-intent="energidryck-koffein-per-krona"] .energy-cta, [data-intent="energidryck-mest-koffein"] .btn-primary, [data-intent="energidryck-koffein-per-krona"] .btn-primary { color: #1C1917; } /* Darkened bg — intent colour too light for white text */ [data-intent="energidryck-rea"] .energy-cta, [data-intent="energidryck-rea"] .btn-primary { background: #DC2626; box-shadow: 0 14px 28px rgba(220, 38, 38, 0.24); } [data-intent="energidryck-shots"] .energy-cta, [data-intent="energidryck-shots"] .btn-primary { background: #9333EA; box-shadow: 0 14px 28px rgba(147, 51, 234, 0.24); } /* Active chip text — intent colour on white background */ [data-intent="energidryck-mest-koffein"] .ranking-tab.is-active, [data-intent="energidryck-koffein-per-krona"] .ranking-tab.is-active { color: #854D0E; } [data-intent="energidryck-sockerfri"] .ranking-tab.is-active { color: #365314; } /* -------------------------------------------------------------------------- Global base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; font-family: var(--font-family); color: var(--text-main); background: radial-gradient(circle at 10% -6%, rgba(var(--page-glow), 0.08), transparent 28rem), radial-gradient(circle at 92% 0%, rgba(15, 23, 42, 0.03), transparent 26rem), linear-gradient(180deg, var(--page-bg) 0%, var(--page-bg-warm) 42rem, #F2F5F9 100%); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; } :focus-visible { outline: 2px solid rgb(var(--intent-primary)); outline-offset: 2px; border-radius: inherit; } /* -------------------------------------------------------------------------- Layout shell -------------------------------------------------------------------------- */ .page-shell { width: min(1080px, calc(100% - 72px)); margin: 0 auto; } @media (max-width: 820px) { .page-shell { width: min(100%, calc(100% - 40px)); } } @media (max-width: 480px) { .page-shell { width: calc(100% - 32px); } } /* -------------------------------------------------------------------------- Site header -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .site-header__inner { width: min(1080px, calc(100% - 72px)); margin: 0 auto; display: flex; align-items: center; gap: 24px; height: 56px; } @media (max-width: 820px) { .site-header__inner { width: min(100%, calc(100% - 40px)); } } .site-header__logo { font-size: 17px; font-weight: 800; color: var(--text-main); text-decoration: none; letter-spacing: -0.04em; white-space: nowrap; flex-shrink: 0; } .site-header__logo span { color: rgb(var(--intent-primary)); } /* Hamburger (mobile only) */ .site-header__hamburger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: none; background: transparent; color: var(--text-main); cursor: pointer; flex-shrink: 0; margin-left: auto; transition: background 0.15s ease; } .site-header__hamburger:hover { background: var(--surface-soft); } @media (max-width: 768px) { .site-nav { display: none; } .site-header__hamburger { display: inline-flex; } } /* -------------------------------------------------------------------------- Site nav -------------------------------------------------------------------------- */ .site-nav { flex: 1; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .site-nav::-webkit-scrollbar { display: none; } .site-nav__items { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; } .site-nav__link { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); text-decoration: none; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .site-nav__link:hover { background: rgba(var(--intent-primary), 0.08); color: var(--text-main); } .site-nav__link.is-active { background: rgba(var(--intent-primary), 0.12); color: rgb(var(--intent-primary)); font-weight: 700; } /* -------------------------------------------------------------------------- Ranking tabs (intent switcher on landing pages) -------------------------------------------------------------------------- */ .ranking-tabs { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .ranking-tabs::-webkit-scrollbar { display: none; } .ranking-tabs-inner { width: 100%; display: flex; gap: 4px; padding: 10px 0; } .ranking-tabs-inner-wrap { width: min(1080px, calc(100% - 72px)); margin: 0 auto; padding: 8px 0; } .ranking-tabs__label { margin: 0 0 8px; font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } @media (max-width: 820px) { .ranking-tabs-inner-wrap { width: auto; min-width: 100%; padding: 8px 20px; } .ranking-tabs-inner { width: auto; min-width: 100%; padding: 0; } } @media (max-width: 480px) { .ranking-tabs-inner-wrap { padding: 8px 16px; } .ranking-tabs-inner { padding: 0; } } .ranking-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--text-muted); font-size: 15px; font-weight: 700; white-space: nowrap; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .ranking-tab:hover { border-color: rgba(var(--intent-primary), 0.5); color: var(--text-main); } .ranking-tab.is-active { border-color: rgb(var(--intent-primary)); background: rgba(var(--intent-primary), 0.09); color: rgb(var(--intent-primary)); font-weight: 800; } /* -------------------------------------------------------------------------- Trust row -------------------------------------------------------------------------- */ .trust-row { display: inline-flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding: 7px 14px; margin: 8px 0; border-radius: 999px; background: rgba(var(--intent-primary), 0.05); border: 1px solid rgba(var(--intent-primary), 0.14); font-size: 12px; font-weight: 600; color: var(--text-muted); } .trust-row__item { display: flex; align-items: center; gap: 5px; } .trust-row__dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--intent-primary)); flex-shrink: 0; } /* -------------------------------------------------------------------------- Page section + headlines -------------------------------------------------------------------------- */ .page-section { padding-top: 32px; padding-bottom: 32px; } .section-headline h2 { margin: 0 0 4px; font-size: clamp(24px, 4vw, 32px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; color: var(--text-main); } .section-headline p { margin: 0; color: var(--text-muted); font-size: 14px; } /* -------------------------------------------------------------------------- Intent-card grid (used on homepage) -------------------------------------------------------------------------- */ .intent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .intent-grid--brands { grid-template-columns: repeat(3, 1fr); } .intent-grid--brands .intent-card { padding: 16px 18px; } @media (max-width: 640px) { .intent-grid--brands { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 360px) { .intent-grid--brands { grid-template-columns: 1fr; } } .intent-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 18px; border: 1.5px solid var(--line); border-radius: 20px; background: var(--surface); text-decoration: none; color: var(--text-main); transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .intent-card:hover { border-color: rgba(var(--intent-primary), 0.45); box-shadow: 0 10px 32px rgba(var(--intent-primary), 0.10); transform: translateY(-2px); } .intent-card__label { font-size: 14px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-main); } .intent-card__desc { font-size: 13px; color: var(--text-muted); line-height: 1.45; } .intent-card__arrow { margin-top: 6px; font-size: 13px; font-weight: 700; color: rgb(var(--intent-primary)); } /* -------------------------------------------------------------------------- Product list wrapper -------------------------------------------------------------------------- */ .product-list { border: 1px solid var(--line); border-radius: 22px; background: var(--surface); overflow: hidden; box-shadow: 0 18px 42px rgba(15, 23, 42, 0.05); } .product-list--home { width: 100%; } .product-list__row { border-top: 1px solid var(--line); } .product-list__row:first-child { border-top: none; } /* -------------------------------------------------------------------------- Badges -------------------------------------------------------------------------- */ .energy-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; line-height: 1; } .energy-badge--cheapest { background: #CFFAFE; color: #0E7490; } .energy-badge--sugar-free { background: #DCFCE7; color: #166534; } .energy-badge--sale { background: #FEE2E2; color: #991B1B; } .energy-badge--multipack { background: #DBEAFE; color: #1D4ED8; } .energy-badge--high-caffeine { background: #FEF9C3; color: #854D0E; } .energy-badge--shot { background: #F3E8FF; color: #7E22CE; } .energy-badge--default { background: var(--surface-soft); color: var(--text-muted); } /* -------------------------------------------------------------------------- CTA button (intent-coloured) -------------------------------------------------------------------------- */ .energy-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: 999px; background: rgb(var(--intent-primary)); color: #FFFFFF; font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap; box-shadow: 0 14px 28px rgba(var(--intent-primary), 0.24); transition: transform 0.18s ease, box-shadow 0.18s ease; } .energy-cta:hover { transform: translateY(-1px); box-shadow: 0 18px 36px rgba(var(--intent-primary), 0.32); } /* Full-size primary CTA — used in product hero and standalone CTAs */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 999px; background: rgb(var(--intent-primary)); color: #FFFFFF; font-size: 16px; font-weight: 800; text-decoration: none; white-space: nowrap; box-shadow: 0 14px 28px rgba(var(--intent-primary), 0.24); transition: transform 0.18s ease, box-shadow 0.18s ease; } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 36px rgba(var(--intent-primary), 0.32); } /* -------------------------------------------------------------------------- FAQ -------------------------------------------------------------------------- */ .faq-item { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 16px 20px; } .faq-item__q { font-size: 14px; font-weight: 700; color: var(--text-main); margin: 0 0 6px; } .faq-item__a { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.55; } /* Accordion — applied when faq-item is a
element */ details.faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; user-select: none; margin: 0; font-size: 14px; font-weight: 700; color: var(--text-main); } details.faq-item > summary::-webkit-details-marker { display: none; } details.faq-item > summary::after { content: '+'; flex-shrink: 0; font-size: 18px; font-weight: 400; color: var(--text-soft); line-height: 1; transition: opacity 0.12s; } details.faq-item[open] > summary::after { content: '−'; } details.faq-item > .faq-item__a { margin-top: 8px; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { margin-top: 64px; border-top: 1px solid var(--line); background: var(--surface); padding: 36px 0 32px; } .site-footer__inner { width: min(1080px, calc(100% - 72px)); margin: 0 auto; text-align: center; } @media (max-width: 820px) { .site-footer__inner { width: min(100%, calc(100% - 40px)); } } @media (max-width: 480px) { .site-footer__inner { width: calc(100% - 32px); } } .site-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; list-style: none; margin: 0; padding: 0; } .site-footer__nav a { font-size: 13px; font-weight: 700; color: var(--text-muted); text-decoration: none; transition: color 0.1s; } .site-footer__nav a:hover { color: var(--text-main); } .site-footer__nav--legal { margin-top: 16px; gap: 4px 16px; } .site-footer__nav--legal a { font-size: 12px; font-weight: 600; color: var(--text-soft); } .site-footer__nav--legal a:hover { color: var(--text-muted); } .site-footer__disclaimer { max-width: 640px; margin: 20px auto 0; font-size: 12px; color: var(--text-soft); line-height: 1.6; } .site-footer__disclaimer a { color: var(--text-muted); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .site-footer__disclaimer a:hover { color: var(--text-main); } /* -------------------------------------------------------------------------- Product row — list variant for comparison pages -------------------------------------------------------------------------- */ .product-row { display: grid; grid-template-columns: 44px 84px minmax(0, 1fr) 220px; align-items: center; gap: 0 16px; padding: 14px 16px; background: var(--surface); transition: background 0.12s ease, box-shadow 0.12s ease; } .product-row:hover { background: rgba(var(--intent-primary), 0.025); } .product-row--out-of-stock { opacity: 0.38; } .product-row__rank { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: rgba(var(--intent-primary), 0.10); color: rgb(var(--intent-primary)); font-size: 14px; font-weight: 900; letter-spacing: -0.03em; } .product-row__image { flex-shrink: 0; width: 84px; height: 84px; border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, rgb(var(--hero-media-start)) 0%, rgb(var(--hero-media-end)) 100%); display: flex; align-items: center; justify-content: center; } .product-row__image img { width: 100%; height: 100%; object-fit: contain; padding: 10px; } .product-row__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .product-row__brand { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--intent-primary)); line-height: 1.2; } .product-row__name { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-main); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-row__specs { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.45; } .product-row__badges { display: flex; flex-wrap: wrap; gap: 3px; } .product-row__reason { margin: 1px 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.4; } .product-row__reason-label { font-weight: 700; color: var(--text-main); } .product-row__pricing { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding-left: 16px; border-left: 1px solid var(--line); } .product-row__price { margin: 0; font-size: 22px; font-weight: 800; color: var(--text-main); letter-spacing: -0.04em; white-space: nowrap; line-height: 1.1; } .product-row__price-meta { margin: 0; font-size: 11px; color: var(--text-soft); white-space: nowrap; } .product-row__discount { display: inline-flex; align-self: flex-start; margin: 0 0 2px; padding: 2px 7px; border-radius: 999px; background: #FEE2E2; color: #991B1B; font-size: 11px; font-weight: 700; white-space: nowrap; } .product-row__store { margin: 0; font-size: 11px; color: var(--text-muted); white-space: nowrap; } .product-row__stock-out { margin: 0; font-size: 11px; color: var(--text-soft); } .product-row__stock-out-link { display: none; text-decoration: none; font-size: 13px; font-weight: 700; color: rgb(var(--intent-primary)); text-align: center; } .product-row__cta { margin-top: 8px; width: 100%; font-size: 14px; min-height: 42px; padding: 0 16px; } @media (max-width: 640px) { .product-row { grid-template-columns: 40px 68px minmax(0, 1fr); grid-template-areas: "rank image body" "pricing pricing pricing"; align-items: start; padding: 14px 14px 16px; gap: 10px 12px; } .product-row__rank { grid-area: rank; width: 30px; height: 30px; font-size: 13px; } .product-row__image { grid-area: image; width: 68px; height: 68px; border-radius: 14px; } .product-row__body { grid-area: body; } .product-row__pricing { grid-area: pricing; align-items: flex-start; gap: 2px; padding-left: 0; padding-top: 10px; border-left: none; border-top: 1px solid var(--line); } .product-row__badges { gap: 4px; } .product-row__price { font-size: 20px; } .product-row__cta, .product-row__stock-out-link { width: 100%; justify-content: center; text-align: center; } } /* -------------------------------------------------------------------------- Deal row — 4-column deal list (homepage Billigast just nu) -------------------------------------------------------------------------- */ .deal-row { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 0 16px; align-items: center; padding: 11px 16px; background: var(--surface); transition: background 0.12s ease; } .deal-row:hover { background: rgba(var(--intent-primary), 0.025); } .deal-row--out-of-stock { opacity: 0.38; } .deal-row__image { width: 68px; height: 68px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, rgb(var(--hero-media-start)) 0%, rgb(var(--hero-media-end)) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .deal-row__image img { width: 100%; height: 100%; object-fit: contain; padding: 8px; } .deal-row__info { min-width: 0; } .deal-row__brand { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--intent-primary)); line-height: 1.2; } .deal-row__name { margin: 2px 0 2px; font-size: 14px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-main); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .deal-row__specs { margin: 0 0 5px; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .deal-row__badges { display: flex; flex-wrap: wrap; gap: 4px; } .deal-row__right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding-left: 20px; border-left: 1px solid var(--line); } .deal-row__pricing { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 140px; } .deal-row__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .deal-row__discount { display: inline-flex; padding: 2px 7px; border-radius: 999px; background: #FEE2E2; color: #991B1B; font-size: 11px; font-weight: 700; white-space: nowrap; margin-bottom: 2px; } .deal-row__price { margin: 0; font-size: 18px; font-weight: 800; color: var(--text-main); letter-spacing: -0.04em; white-space: nowrap; line-height: 1.1; } .deal-row__price-meta { margin: 0; font-size: 11px; color: var(--text-soft); white-space: nowrap; } .deal-row__store { margin: 2px 0 0; font-size: 11px; color: var(--text-muted); white-space: nowrap; } .deal-row__stock-out { margin: 0; font-size: 12px; color: var(--text-soft); } .deal-row__cta-col { display: flex; align-items: center; width: 144px; flex-shrink: 0; } .deal-row__cta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; font-size: 13px; border-radius: 999px; } @media (max-width: 740px) { .deal-row { grid-template-columns: 60px 1fr; grid-template-areas: "img info" "rght rght"; gap: 10px 12px; padding: 12px; } .deal-row__image { grid-area: img; width: 60px; height: 60px; border-radius: 10px; } .deal-row__info { grid-area: info; } .deal-row__right { grid-area: rght; flex-direction: column; align-items: stretch; border-left: none; padding-left: 0; gap: 10px; } .deal-row__pricing { flex-direction: row; align-items: flex-start; flex-wrap: wrap; gap: 4px 10px; min-width: 0; } .deal-row__discount { margin-bottom: 0; } .deal-row__meta { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 0; } .deal-row__meta > * { display: inline-flex; align-items: center; margin: 0; white-space: nowrap; } .deal-row__meta > * + *::before { content: '·'; margin: 0 6px; color: var(--text-soft); } .deal-row__cta-col { width: 100%; } .deal-row__cta { width: 100%; min-height: 44px; font-size: 14px; } } /* -------------------------------------------------------------------------- Product card — grid variant for homepage sections -------------------------------------------------------------------------- */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; } .product-grid.product-grid--home { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .product-grid.product-grid--home { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .product-grid { grid-template-columns: 1fr 1fr; gap: 10px; } } @media (max-width: 360px) { .product-grid { grid-template-columns: 1fr; } } .product-card { display: flex; flex-direction: column; border: 1.5px solid var(--line); border-radius: 20px; background: var(--surface); overflow: hidden; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03); transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .product-card:hover { border-color: rgba(var(--intent-primary), 0.32); box-shadow: 0 16px 40px rgba(var(--intent-primary), 0.11), 0 4px 12px rgba(15, 23, 42, 0.07); transform: translateY(-3px); } .product-card--out-of-stock { opacity: 0.38; } .product-card__image { width: 100%; aspect-ratio: 1; max-height: 88px; background: linear-gradient(135deg, rgb(var(--hero-media-start)) 0%, rgb(var(--hero-media-end)) 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid rgba(var(--intent-primary), 0.08); } .product-card__image img { width: 100%; height: 100%; object-fit: contain; padding: 10px; } .product-card__image-placeholder { width: 40px; height: 40px; border-radius: 8px; background: rgba(var(--intent-primary), 0.10); } .product-card__body { flex: 1; padding: 10px 12px 6px; display: flex; flex-direction: column; gap: 2px; } .product-card__brand { margin: 0; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--intent-primary)); line-height: 1.2; } .product-card__name { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-main); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-card__specs { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.35; } .product-card__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .product-card__pricing { margin-top: auto; padding: 0 12px 8px; display: flex; flex-direction: column; gap: 1px; } .product-card__price { margin: 0; font-size: 18px; font-weight: 800; color: var(--text-main); letter-spacing: -0.04em; line-height: 1.1; } .product-card__price-meta { margin: 0; font-size: 11px; color: var(--text-soft); } .product-card__discount { display: inline-flex; align-self: flex-start; margin: 0 0 2px; padding: 2px 8px; border-radius: 999px; background: #FEE2E2; color: #991B1B; font-size: 11px; font-weight: 700; } .product-card__store { margin: 0; font-size: 11px; color: var(--text-muted); } .product-card__stock-out { display: block; margin: 0 14px 14px; font-size: 12px; color: var(--text-soft); text-align: center; text-decoration: none; } .product-card__stock-out--link { color: rgb(var(--intent-primary)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .product-card__stock-out--link:hover { text-decoration: none; } .product-card__cta { display: flex; align-items: center; justify-content: center; margin: 0 12px 12px; min-height: 40px; border-radius: 999px; font-size: 14px; } /* -------------------------------------------------------------------------- Quick-filter pills (homepage snabbfilter) -------------------------------------------------------------------------- */ .quick-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .quick-filter__pill { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--text-main); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: border-color 0.15s ease, background 0.15s ease; } .quick-filter__pill:hover { border-color: rgba(var(--intent-primary), 0.5); background: rgba(var(--intent-primary), 0.05); color: var(--text-main); } /* Pills inside hero panel get a glass tint */ .home-hero__filters .quick-filter__pill { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(4px); border-color: rgba(var(--intent-primary), 0.18); } .home-hero__filters .quick-filter__pill:hover { background: rgba(255, 255, 255, 0.92); border-color: rgba(var(--intent-primary), 0.45); } /* -------------------------------------------------------------------------- Home sections -------------------------------------------------------------------------- */ .home-section { padding-top: 56px; padding-bottom: 0; } .home-section--tight { padding-top: 40px; } .home-section--spacious { padding-top: 56px; } .home-section--duo { padding-top: 40px; } .home-section--last { padding-bottom: 16px; } .faq-list { display: grid; gap: 8px; } .faq-list.faq-list--compact { width: 100%; } .faq-list.faq-list--compact .faq-item { padding: 12px 16px; } .section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .section-header h2 { margin: 0; font-size: clamp(24px, 4vw, 32px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; color: var(--text-main); } .section-header p { margin: 0; font-size: 13px; color: var(--text-muted); } .section-see-all { flex-shrink: 0; font-size: 13px; font-weight: 700; color: rgb(var(--intent-primary)); text-decoration: none; white-space: nowrap; } .section-see-all:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- Duo grid — 2 equal-width intent cards side by side -------------------------------------------------------------------------- */ .duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 480px) { .duo-grid { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- Compare chips — 6-up quick navigation row -------------------------------------------------------------------------- */ .compare-chips { display: flex; flex-wrap: wrap; gap: 10px; } .compare-chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 700; color: var(--text-main); text-decoration: none; transition: border-color 0.12s, box-shadow 0.12s; } .compare-chip:hover { border-color: var(--text-muted); box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .compare-chip:visited { color: var(--text-main); } .compare-chip::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .compare-chip--orange::before { background: #F97316; } .compare-chip--blue::before { background: #3B82F6; } .compare-chip--green::before { background: #22C55E; } .compare-chip--red::before { background: #EF4444; } .compare-chip--yellow::before { background: #EAB308; } .compare-chip--purple::before { background: #A855F7; } /* -------------------------------------------------------------------------- Guide card (köpguide) -------------------------------------------------------------------------- */ .guide-block { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; } .guide-block__title { margin: 0 0 10px; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; color: var(--text-main); } .guide-block__body { margin: 0 0 16px; font-size: 14px; color: var(--text-muted); line-height: 1.65; } .guide-block__links { display: flex; flex-wrap: wrap; gap: 8px; } /* -------------------------------------------------------------------------- Breadcrumb -------------------------------------------------------------------------- */ .breadcrumb { margin-bottom: 14px; } .breadcrumb__list { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; } .breadcrumb__item { display: flex; align-items: center; font-size: 12px; color: var(--text-muted); } .breadcrumb__item + .breadcrumb__item::before { content: '/'; margin-right: 4px; color: var(--text-soft); } .breadcrumb__link { color: var(--text-muted); text-decoration: none; font-weight: 600; } .breadcrumb__link:hover { color: var(--text-main); } .breadcrumb__item--current { color: var(--text-main); font-weight: 700; } /* -------------------------------------------------------------------------- Landing page H1 + intro -------------------------------------------------------------------------- */ .landing-h1 { margin: 0 0 8px; font-size: clamp(34px, 6vw, 56px); font-weight: 800; letter-spacing: -0.05em; color: var(--text-main); line-height: 1.02; } .landing-intro { margin: 0 0 12px; color: var(--text-muted); font-size: 15px; line-height: 1.6; max-width: 640px; } .landing-note { margin: -2px 0 14px; font-size: 13px; color: var(--text-soft); max-width: 640px; } /* -------------------------------------------------------------------------- Rank explain — sorting/ranking callout below H1 -------------------------------------------------------------------------- */ .rank-explain { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 16px; padding: 8px 12px; border-radius: 999px; background: rgba(var(--intent-primary), 0.05); border: 1px solid rgba(var(--intent-primary), 0.14); font-size: 12px; line-height: 1.5; } .rank-explain__label { font-weight: 800; color: rgb(var(--intent-primary)); white-space: nowrap; } .rank-explain__text { color: var(--text-muted); } /* -------------------------------------------------------------------------- Methodology (Så här räknar vi) -------------------------------------------------------------------------- */ .methodology { border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); padding: 20px 24px; } .methodology__title { margin: 0 0 14px; font-size: 15px; font-weight: 800; color: var(--text-main); letter-spacing: -0.02em; } .methodology__list { display: grid; gap: 14px; margin: 0; padding: 0; } .methodology__item { display: grid; gap: 3px; } .methodology__term { font-size: 13px; font-weight: 700; color: var(--text-main); } .methodology__desc { font-size: 12px; color: var(--text-muted); line-height: 1.55; margin: 0; } .methodology__code { display: inline; font-family: ui-monospace, monospace; font-size: 11px; background: var(--line); border-radius: 4px; padding: 1px 5px; color: var(--text-main); } .methodology__note { margin: 14px 0 0; font-size: 11px; color: var(--text-soft); line-height: 1.5; } /* -------------------------------------------------------------------------- Related links -------------------------------------------------------------------------- */ .related-links-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .related-links__heading { margin: 0 0 10px; font-size: 14px; font-weight: 800; color: var(--text-main); letter-spacing: -0.02em; } .related-links__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .related-links__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: rgb(var(--intent-primary)); text-decoration: none; transition: color 0.12s ease; } .related-links__item:hover { color: var(--text-main); } .related-links__item:last-child { border-bottom: none; } .related-links__arrow { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.5; } /* -------------------------------------------------------------------------- Filter bar shell — wraps the filter form between ranking-tabs and header -------------------------------------------------------------------------- */ .filter-bar-shell { background: var(--surface); position: sticky; top: 56px; z-index: 30; padding: 10px 0; } /* -------------------------------------------------------------------------- Filter bar (form) -------------------------------------------------------------------------- */ .filter-bar { position: relative; width: min(1080px, calc(100% - 72px)); margin: 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; } @media (max-width: 820px) { .filter-bar { width: min(100%, calc(100% - 40px)); } } .filter-bar__desktop { display: flex; } .filter-bar__mobile { display: none; } .filter-bar__mobile-row { display: none; } @media (max-width: 768px) { .filter-bar__desktop { display: none; } .filter-bar__mobile { display: flex; } .filter-bar__mobile-row { display: flex; } } /* Sort group */ .filter-bar__sort { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .filter-bar__desktop-wrap { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; } .filter-bar__label { font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .filter-bar__select { height: 36px; padding: 0 32px 0 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-main); font-size: 13px; font-weight: 700; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color 0.15s ease; } .filter-bar__select:focus { outline: none; border-color: rgb(var(--intent-primary)); box-shadow: 0 0 0 3px rgba(var(--intent-primary), 0.12); } /* Filter toggle groups */ .filter-bar__group { display: flex; align-items: center; gap: 5px; flex-shrink: 0; } .filter-bar__group--flags { gap: 4px; } .filter-bar__group--stack { align-items: flex-start; flex-direction: column; gap: 8px; } .filter-bar__pills { display: flex; flex-wrap: wrap; gap: 4px; } /* Filter pill (checkbox label) */ .filter-pill { display: inline-flex; align-items: center; gap: 4px; height: 31px; padding: 0 11px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--text-muted); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease; user-select: none; } .filter-bar__advanced { flex-shrink: 0; min-width: auto; } .filter-bar__advanced[open] { width: auto; } .filter-bar__advanced-toggle { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--text-main); font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; user-select: none; transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .filter-bar__advanced-toggle::-webkit-details-marker { display: none; } .filter-bar__advanced-toggle::after { content: '▾'; font-size: 12px; color: var(--text-soft); } .filter-bar__advanced-toggle:hover { border-color: rgba(var(--intent-primary), 0.35); color: var(--text-main); } .filter-bar__advanced-toggle:focus-visible { outline: none; border-color: rgb(var(--intent-primary)); box-shadow: 0 0 0 3px rgba(var(--intent-primary), 0.12); } .filter-bar__advanced[open] .filter-bar__advanced-toggle::after { content: '▴'; } .filter-bar__advanced-panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); } .filter-bar__advanced-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px 20px; } .filter-bar__range-row { display: flex; align-items: center; gap: 8px; } .filter-bar__number { width: 100%; height: 40px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text-main); font-size: 14px; font-weight: 600; } .filter-bar__number:focus { outline: none; border-color: rgb(var(--intent-primary)); box-shadow: 0 0 0 3px rgba(var(--intent-primary), 0.12); } .filter-bar__advanced-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); } .filter-bar__apply { min-height: 42px; padding: 0 18px; font-size: 14px; } .filter-pill input[type="checkbox"] { display: none; } .filter-pill:hover { border-color: rgba(var(--intent-primary), 0.5); color: var(--text-main); } .filter-pill--active { border-color: rgb(var(--intent-primary)); background: rgba(var(--intent-primary), 0.09); color: rgb(var(--intent-primary)); } .filter-pill--active::before { content: ''; display: inline-block; width: 14px; height: 14px; flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 7l3 3 6-6' stroke='%2306B6D4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } /* Clear link */ .filter-bar__clear { font-size: 12px; font-weight: 600; color: var(--text-muted); text-decoration: none; white-space: nowrap; flex-shrink: 0; } .filter-bar__clear:hover { color: var(--text-main); text-decoration: underline; } /* Mobile row */ .filter-bar__mobile-row { align-items: center; gap: 8px; padding: 2px 0; } .filter-bar__mobile-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--text-main); font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; } .filter-bar__mobile-btn--active { border-color: rgb(var(--intent-primary)); background: rgba(var(--intent-primary), 0.09); color: rgb(var(--intent-primary)); } .filter-bar__badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgb(var(--intent-primary)); color: #fff; font-size: 10px; font-weight: 800; } /* -------------------------------------------------------------------------- Mobile filter sheet (dialog) -------------------------------------------------------------------------- */ .filter-sheet { position: fixed; bottom: 0; left: 0; right: 0; top: auto; width: 100%; max-width: 100%; max-height: 85vh; margin: 0; padding: 0; border: none; border-radius: 20px 20px 0 0; background: var(--surface); box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.14); overflow: hidden; display: flex; flex-direction: column; } .filter-sheet::backdrop { background: rgba(0, 0, 0, 0.45); } .filter-sheet:not([open]) { display: none; } .filter-sheet__form { display: flex; flex-direction: column; max-height: 85vh; overflow: hidden; } .filter-sheet__header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .filter-sheet__title { font-size: 15px; font-weight: 800; color: var(--text-main); letter-spacing: -0.02em; } .filter-sheet__close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--surface-soft); color: var(--text-muted); font-size: 18px; cursor: pointer; } .filter-sheet__body { flex: 1; overflow-y: auto; padding: 8px 0; } .filter-sheet__section { padding: 14px 20px; border-bottom: 1px solid var(--line); } .filter-sheet__section:last-child { border-bottom: none; } .filter-sheet__heading { margin: 0 0 10px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .filter-sheet__radios { display: grid; gap: 2px; } .filter-sheet__radio-label, .filter-sheet__check-label { display: flex; align-items: center; gap: 12px; padding: 11px 8px; margin: 0 -8px; font-size: 14px; font-weight: 600; color: var(--text-main); cursor: pointer; border-radius: 8px; transition: background 0.1s ease; } .filter-sheet__radio-label:hover, .filter-sheet__check-label:hover { background: var(--surface-soft); } .filter-sheet__radio-label:has(input:checked), .filter-sheet__check-label:has(input:checked) { color: rgb(var(--intent-primary)); font-weight: 700; background: rgba(var(--intent-primary), 0.05); } .filter-sheet__radio-label input, .filter-sheet__check-label input { width: 18px; height: 18px; accent-color: rgb(var(--intent-primary)); flex-shrink: 0; } .filter-sheet__range-row { display: flex; align-items: center; gap: 8px; } .filter-sheet__number { width: 100px; height: 40px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text-main); font-size: 14px; font-weight: 600; } .filter-sheet__number:focus { outline: none; border-color: rgb(var(--intent-primary)); } .filter-sheet__range-unit { font-size: 13px; color: var(--text-muted); } .filter-sheet__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--line); flex-shrink: 0; background: var(--surface); } .filter-sheet__reset { font-size: 13px; font-weight: 600; color: var(--text-muted); text-decoration: none; } .filter-sheet__reset:hover { color: var(--text-main); text-decoration: underline; } .filter-sheet__apply { flex: 1; max-width: 220px; justify-content: center; min-height: 48px; font-size: 15px; font-weight: 800; } /* -------------------------------------------------------------------------- Ghost button — outline CTA for tables and secondary actions -------------------------------------------------------------------------- */ .btn-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid rgba(var(--intent-primary), 0.35); background: transparent; color: rgb(var(--intent-primary)); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .btn-ghost:hover { background: rgba(var(--intent-primary), 0.07); border-color: rgb(var(--intent-primary)); transform: translateY(-1px); } /* ============================================================ Product hero (product family page) ============================================================ */ .product-hero { margin-bottom: 0; } .product-hero__inner { display: flex; gap: 20px; align-items: flex-start; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 20px; } .product-hero__image { flex-shrink: 0; width: 120px; height: 120px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, rgb(var(--hero-media-start)) 0%, rgb(var(--hero-media-end)) 100%); display: flex; align-items: center; justify-content: center; } .product-hero__image img { width: 100%; height: 100%; object-fit: contain; } .product-hero__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .product-hero__brand { margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(var(--intent-primary)); } .product-hero__name { margin: 0; font-size: 18px; font-weight: 700; color: var(--text-main); line-height: 1.3; } .product-hero__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .product-hero__pricing { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 8px; } .product-hero__price { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; color: var(--text-main); margin: 0; line-height: 1.1; } .product-hero__per-unit { font-size: 13px; color: var(--text-muted); margin: 0; } .product-hero__discount { display: inline-flex; align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: #FEE2E2; color: #991B1B; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; margin-bottom: 4px; } .product-hero__cta { display: inline-block; margin-top: 8px; align-self: flex-start; } @media (max-width: 480px) { .product-hero__inner { flex-direction: column; } .product-hero__image { width: 80px; height: 80px; } .product-hero__cta { width: 100%; text-align: center; } } /* ============================================================ Price table (store comparison) ============================================================ */ .price-table { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .price-table__row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; padding: 14px 18px; background: var(--card-bg); transition: background 0.12s ease; } .price-table__row:hover { background: rgba(var(--intent-primary), 0.025); } .price-table__row--best { background: rgba(var(--intent-primary), 0.04); border-left: 3px solid rgb(var(--intent-primary)); padding-left: 15px; /* compensate for border */ } .price-table__row--best:hover { background: rgba(var(--intent-primary), 0.07); } .price-table__store-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .price-table__best-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: rgb(var(--intent-primary)); } .price-table__store { font-size: 14px; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .price-table__price-col { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .price-table__price { font-size: 16px; font-weight: 800; color: var(--text-main); white-space: nowrap; letter-spacing: -0.03em; } .price-table__per-unit { font-size: 11px; color: var(--text-muted); white-space: nowrap; } .price-table__discount { display: inline-flex; padding: 2px 6px; border-radius: 999px; background: #FEE2E2; color: #991B1B; font-size: 11px; font-weight: 700; white-space: nowrap; } .price-table__cta { white-space: nowrap; } @media (max-width: 560px) { .price-table__row { grid-template-columns: 1fr auto; gap: 12px; padding: 12px 16px; } .price-table__row--best { padding-left: 13px; } .price-table__price-col { align-items: flex-end; } .price-table__cta { grid-column: 1 / -1; justify-content: center; width: 100%; } } /* ============================================================ Product facts table ============================================================ */ .product-facts { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; margin: 0; padding: 0; } .product-facts__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 18px; background: var(--card-bg); } .product-facts__row:nth-child(even) { background: rgba(var(--intent-primary), 0.018); } .product-facts__term { font-size: 14px; color: var(--text-muted); margin: 0; font-weight: 500; } .product-facts__value { font-size: 14px; font-weight: 700; color: var(--text-main); margin: 0; text-align: right; letter-spacing: -0.01em; } .product-facts__value--highlight { color: rgb(var(--intent-primary)); } .product-facts__value--positive { color: #166534; background: #DCFCE7; padding: 2px 8px; border-radius: 999px; font-size: 12px; } .caffeine-notice { margin: 10px 0 0; padding: 8px 12px; font-size: 11px; line-height: 1.55; color: var(--text-soft); background: rgba(var(--intent-primary), 0.04); border-left: 2px solid rgba(var(--intent-primary), 0.22); border-radius: 0 6px 6px 0; } /* ============================================================ Brand eyebrow label ============================================================ */ .brand-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(var(--intent-primary)); } /* ============================================================ Brand summary stat cards ============================================================ */ .brand-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 0; } .brand-stats__item { padding: 9px 13px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; } .brand-stats__label { margin: 0 0 2px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-soft); } .brand-stats__value { margin: 0; font-size: 15px; font-weight: 800; color: var(--text-main); line-height: 1.25; letter-spacing: -0.01em; } .brand-stats__value--accent { color: rgb(var(--intent-primary)); } @media (max-width: 640px) { .brand-stats { grid-template-columns: 1fr 1fr; } } @media (max-width: 400px) { .brand-stats { grid-template-columns: 1fr; } } /* ============================================================ Brand listing section heading ============================================================ */ .brand-listing-heading { margin: 0 0 12px; font-size: 17px; font-weight: 800; color: var(--text-main); letter-spacing: -0.02em; } /* ============================================================ Affiliate disclosure ============================================================ */ .affiliate-disclosure { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-soft); font-size: 12px; line-height: 1.55; color: var(--text-muted); } /* Intent surface — unified header+tabs+filter panel on ranking/landing pages */ .intent-surface { max-width: min(1080px, calc(100% - 72px)); margin: 28px auto 0; padding: 36px 40px 28px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(203, 213, 225, 0.75); border-radius: 28px; box-shadow: 0 24px 70px rgba(15, 23, 42, 0.06); } /* Elements inside the surface inherit its width — no nested constraints */ .intent-surface .filter-bar { width: 100%; margin: 20px 0 0; } .intent-surface .ranking-tabs--landing { margin: 20px 0 0; padding: 0; background: transparent; } .intent-surface .ranking-tabs-inner { width: 100%; } @media (max-width: 820px) { .intent-surface { max-width: min(100%, calc(100% - 40px)); padding: 28px 28px 24px; border-radius: 22px; } } @media (max-width: 600px) { .intent-surface { max-width: calc(100% - 32px); padding: 22px 20px 20px; border-radius: 18px; margin-top: 16px; } } .landing-page-shell { padding-top: 24px; padding-bottom: 20px; } .landing-disclosure { margin-top: 8px; } .ranking-tabs--landing { border-top: none; } .ranking-tabs--landing .ranking-tabs-inner-wrap { padding-top: 4px; padding-bottom: 6px; } .ranking-tabs--landing .ranking-tabs-inner { gap: 6px; } .ranking-tabs--landing .ranking-tab { min-height: 38px; padding: 0 13px; font-size: 14px; } .trust-row--landing { margin-top: 0; } .landing-results-shell { padding-top: 18px; padding-bottom: 0; } .landing-results-section { margin-bottom: 40px; } .listing-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .listing-summary__count { margin: 0; font-size: 14px; font-weight: 800; color: var(--text-main); letter-spacing: -0.02em; } .listing-summary__meta, .listing-summary__filters { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.45; } .listing-summary__meta-part { display: inline; } .listing-summary__filters { margin: 0; white-space: nowrap; } .product-listing-footer { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 0 4px; } .product-listing-footer__status { margin: 0; font-size: 13px; color: var(--text-muted); text-align: center; } .product-listing-footer__button { min-height: 42px; padding: 0 20px; border-color: rgba(var(--intent-primary), 0.22); color: rgb(var(--intent-primary)); background: var(--surface); } .product-listing-footer__button:hover { background: rgba(var(--intent-primary), 0.06); border-color: rgba(var(--intent-primary), 0.4); } .affiliate-disclosure__icon { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; color: var(--text-soft); } .affiliate-disclosure__label { font-weight: 700; margin-right: 3px; color: var(--text-main); } /* ============================================================ Article / guide page Two-level layout: - .page-shell is the outer container (matches the rest of the site). - .article-shell is the inner reading column, ~780px, left-aligned with page-shell so all article elements (breadcrumb, H1, body, FAQ, CTA, disclosure) share the same left edge and width. ============================================================ */ .article-shell { max-width: 780px; } .article-header { margin-bottom: 20px; } .article-h1 { font-size: clamp(24px, 5vw, 36px); font-weight: 800; letter-spacing: -0.03em; color: var(--text-main); line-height: 1.15; margin: 0 0 10px; } .article-meta { margin: 0; font-size: 12px; color: var(--text-muted); } .article-lead { font-size: 17px; line-height: 1.6; color: var(--text-main); margin: 0 0 28px; } .article-body { margin-bottom: 36px; font-size: 16px; line-height: 1.75; color: var(--text-main); } .article-body a { color: rgb(var(--intent-primary)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .article-body a:hover { text-decoration: none; } .article-body h2 { font-size: 20px; font-weight: 700; margin: 28px 0 12px; color: var(--text-main); } .article-body h3 { font-size: 17px; font-weight: 700; margin: 24px 0 10px; color: var(--text-main); } .article-body p { margin: 0 0 14px; } .article-body ul, .article-body ol { margin: 0 0 14px; padding-left: 20px; } .article-body li { margin-bottom: 6px; } .article-placeholder { padding: 20px; border: 1px dashed var(--border); border-radius: 8px; font-size: 13px; color: var(--text-muted); margin-bottom: 28px; } .legal-page-shell { padding-top: 24px; padding-bottom: 56px; } .article-cta-block { background: rgba(var(--intent-primary), 0.03); border: 1px solid rgba(var(--intent-primary), 0.18); border-radius: 14px; padding: 18px 22px; } /* ---- Se även at the end of a guide article ---- Scoped chip styling — slightly tighter and more typographic than the default .compare-chip used on brand pages, so the section reads as a secondary nav rather than a primary CTA. */ .article-see-also { margin-top: 28px; margin-bottom: 48px; } .article-see-also__label { margin: 0 0 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); } .article-see-also .compare-chip { min-height: 36px; padding: 7px 14px; font-size: 14px; font-weight: 700; } .article-see-also__chips { gap: 8px 10px; } .article-cta-block__heading { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(var(--intent-primary)); margin: 0 0 12px; } /* ============================================================ Guide card ============================================================ */ .guide-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; color: inherit; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; } .guide-card:hover { border-color: rgba(var(--intent-primary), 0.35); box-shadow: 0 4px 16px rgba(var(--intent-primary), 0.08); transform: translateY(-1px); } .guide-card__eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgb(var(--intent-primary)); } .guide-card__title { font-size: 14px; font-weight: 700; color: var(--text-main); line-height: 1.3; letter-spacing: -0.01em; } .guide-card__desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } .guide-card__cta { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: rgb(var(--intent-primary)); margin-top: 6px; } .guide-card__cta-arrow { width: 14px; height: 14px; transition: transform 0.15s ease; } .guide-card:hover .guide-card__cta-arrow { transform: translateX(3px); } /* ============================================================ Guide grid ============================================================ */ .guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .guide-grid--compact { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } @media (max-width: 560px) { .guide-grid, .guide-grid--compact { grid-template-columns: 1fr; } } /* ============================================================ Mobile navigation overlay ============================================================ */ .mobile-nav { position: fixed; inset: 0; z-index: 200; pointer-events: none; visibility: hidden; } .mobile-nav.is-open { pointer-events: all; visibility: visible; } .mobile-nav__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); opacity: 0; transition: opacity 0.25s ease; } .mobile-nav.is-open .mobile-nav__backdrop { opacity: 1; } .mobile-nav__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 88vw); background: var(--surface); display: flex; flex-direction: column; box-shadow: -8px 0 48px rgba(15, 23, 42, 0.14); transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94); overflow-y: auto; } .mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); } .mobile-nav__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); flex-shrink: 0; position: sticky; top: 0; background: var(--surface); z-index: 1; } .mobile-nav__logo { font-size: 18px; font-weight: 800; letter-spacing: -0.04em; color: var(--text-main); text-decoration: none; } .mobile-nav__logo span { color: rgb(var(--intent-primary)); } .mobile-nav__close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: none; background: var(--surface-soft); color: var(--text-muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .mobile-nav__close:hover { background: var(--line); color: var(--text-main); } .mobile-nav__body { flex: 1; display: flex; flex-direction: column; padding: 8px 0 24px; } .mobile-nav__link { display: flex; align-items: center; padding: 14px 20px; font-size: 16px; font-weight: 600; color: var(--text-main); text-decoration: none; border-left: 3px solid transparent; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .mobile-nav__link:hover { background: rgba(var(--intent-primary), 0.05); color: rgb(var(--intent-primary)); } .mobile-nav__link.is-active { border-left-color: rgb(var(--intent-primary)); background: rgba(var(--intent-primary), 0.06); color: rgb(var(--intent-primary)); font-weight: 700; } .mobile-nav__divider { height: 1px; background: var(--line); margin: 8px 20px; } /* ============================================================ Home hero ============================================================ */ .home-hero { padding: 32px 0 0; } .home-hero__panel { border-radius: 32px; background: radial-gradient(circle at 82% 18%, rgba(var(--intent-primary), 0.16), transparent 28rem), radial-gradient(circle at 10% 90%, rgba(163, 230, 53, 0.07), transparent 24rem), linear-gradient(135deg, rgb(var(--hero-surface-start)) 0%, rgb(var(--hero-surface-mid)) 52%, rgb(var(--hero-surface-end)) 100%); border: 1px solid rgba(var(--intent-primary), 0.18); box-shadow: 0 24px 72px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.90); padding: 32px 44px; display: grid; grid-template-columns: 1fr 280px; gap: 36px; align-items: center; } .home-hero__content { display: flex; flex-direction: column; gap: 14px; } .home-hero__intro { margin: 0; font-size: 17px; color: var(--text-muted); line-height: 1.65; max-width: 520px; } .home-hero__cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .home-hero__secondary-cta { font-size: 14px; font-weight: 600; color: rgb(var(--intent-primary)); text-decoration: none; white-space: nowrap; } .home-hero__secondary-cta:hover { text-decoration: underline; } .home-hero__filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } /* Media column */ .home-hero__media { align-self: stretch; display: flex; align-items: center; } /* Hero deal card */ .hero-deal { width: 100%; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(var(--intent-primary), 0.16); border-radius: 24px; padding: 16px; box-shadow: 0 4px 24px rgba(var(--intent-primary), 0.09), 0 1px 4px rgba(15, 23, 42, 0.04); display: flex; flex-direction: column; gap: 12px; } .hero-deal__eyebrow { margin: 0; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: rgb(var(--intent-primary)); } .hero-deal__main { display: flex; gap: 12px; align-items: flex-start; } .hero-deal__image { flex-shrink: 0; width: 60px; height: 60px; border-radius: 12px; background: linear-gradient(135deg, rgb(var(--hero-media-start)) 0%, rgb(var(--hero-media-end)) 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero-deal__image img { width: 100%; height: 100%; object-fit: contain; padding: 6px; } .hero-deal__body { flex: 1; min-width: 0; } .hero-deal__brand { margin: 0 0 2px; font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: rgb(var(--intent-primary)); } .hero-deal__name { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-main); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hero-deal__pricing { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; } .hero-deal__price { font-size: 20px; font-weight: 800; letter-spacing: -0.04em; color: var(--text-main); } .hero-deal__per-unit { font-size: 12px; color: var(--text-muted); } .hero-deal__discount { display: inline-flex; align-self: flex-start; font-size: 11px; font-weight: 700; color: #991B1B; background: #FEE2E2; padding: 2px 8px; border-radius: 999px; } .hero-deal__store { margin: 5px 0 0; font-size: 11px; color: var(--text-muted); } /* CTA — full-width within the card */ .hero-deal .energy-cta { display: flex; width: 100%; justify-content: center; font-size: 14px; min-height: 44px; } /* Responsive hero */ @media (max-width: 900px) { .home-hero__panel { grid-template-columns: 1fr; gap: 28px; padding: 40px 40px 36px; } .home-hero__media { align-self: auto; } .hero-deal { flex-direction: row; align-items: center; gap: 16px; } .hero-deal__eyebrow { display: none; } .hero-deal .energy-cta { width: auto; flex-shrink: 0; font-size: 13px; min-height: 40px; } } @media (max-width: 600px) { .home-hero { padding: 20px 0 0; } .home-hero__panel { border-radius: 22px; padding: 24px 22px 20px; gap: 18px; } .home-hero__content { gap: 10px; } .home-hero__intro { font-size: 15px; } .home-hero__cta-row { gap: 12px; } .home-hero .trust-row { padding-top: 2px; } .home-hero__media { display: none; } } @media (max-width: 480px) { .home-hero__panel { border-radius: 18px; padding: 22px 18px 18px; } } /* -------------------------------------------------------------------------- Mobile polish — homepage sections -------------------------------------------------------------------------- */ @media (max-width: 640px) { .home-section { padding-top: 40px; } .home-section--tight { padding-top: 24px; } .home-section--spacious { padding-top: 40px; } .compare-chips { gap: 8px; } .compare-chip { min-height: 42px; max-width: 100%; padding: 9px 13px; line-height: 1.25; } .product-card__body { padding: 10px 10px 4px; gap: 1px; } .product-card__badges { gap: 3px; } .product-card__pricing { padding: 0 10px 8px; } .product-card .energy-badge { min-height: 20px; padding: 2px 8px; font-size: 10px; } .intent-grid--brands { grid-template-columns: 1fr 1fr; gap: 10px; } .intent-card { padding: 14px 14px 13px; } .intent-card__arrow { margin-top: auto; padding-top: 4px; } .guide-card { padding: 12px 14px; gap: 5px; } .faq-list.faq-list--compact .faq-item { padding: 10px 14px; } } @media (max-width: 600px) { .landing-page-shell { padding-top: 16px; padding-bottom: 16px; } .trust-row { border-radius: 12px; gap: 8px 14px; } .landing-h1 { line-height: 1.08; } .rank-explain { display: flex; border-radius: 14px; } .listing-summary { align-items: flex-start; flex-direction: column; margin-bottom: 12px; } .listing-summary__meta { display: flex; flex-direction: column; gap: 2px; } .listing-summary__meta-part { display: block; } .product-listing-footer { padding-top: 16px; } details.faq-item > summary { min-height: 44px; align-items: flex-start; } details.faq-item > summary::after { margin-top: 1px; } .faq-item__a, .faq-item__a a { overflow-wrap: anywhere; word-break: break-word; } } @media (max-width: 920px) { .filter-bar__select { max-width: 200px; } } @media (max-width: 768px) { .filter-bar { padding: 10px 14px; } .filter-bar__mobile-row { gap: 8px; } .filter-bar__mobile-btn { flex: 1; justify-content: center; } } @media (max-width: 480px) { .filter-bar { width: calc(100% - 32px); } } @media (max-width: 640px) { .ranking-tabs--landing .ranking-tabs-inner { gap: 8px; } .ranking-tabs--landing .ranking-tab { min-height: 40px; padding: 0 14px; font-size: 14px; } } @media (max-width: 400px) { .home-hero__cta-row { flex-direction: column; align-items: stretch; gap: 10px; } .home-hero__cta-row .btn-primary { text-align: center; justify-content: center; } } @media (max-width: 389px) { .product-grid.product-grid--home { grid-template-columns: 1fr; } } /* ========================================================================== Brand hub /varumarken ========================================================================== */ /* -------------------------------------------------------------------------- Brand cards grid -------------------------------------------------------------------------- */ .brand-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 12px; } .brand-hub-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; text-decoration: none; color: inherit; transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .brand-hub-card:hover { border-color: #CBD5E1; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); transform: translateY(-2px); } .brand-hub-card__top { flex: 1; } .brand-hub-card__name { font-size: 17px; font-weight: 700; color: var(--text-main); margin: 0 0 4px; line-height: 1.2; } .brand-hub-card__tagline { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.4; } .brand-hub-card__stats { font-size: 13px; color: var(--text-muted); margin: 0; } .brand-hub-card__badges { display: flex; flex-wrap: wrap; gap: 6px; } .brand-hub-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; line-height: 1; } .brand-hub-badge--sugar-free { background: #DCFCE7; color: #15803D; } .brand-hub-badge--multipack { background: #DBEAFE; color: #1D4ED8; } .brand-hub-card__footer { margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line); } .brand-hub-card__cta { font-size: 13px; font-weight: 600; color: rgb(var(--intent-primary)); } /* -------------------------------------------------------------------------- Cheapest brands list -------------------------------------------------------------------------- */ .brand-hub-cheapest { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin-top: 12px; } .brand-hub-cheapest__row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 14px 20px; text-decoration: none; color: inherit; background: var(--surface); border-bottom: 1px solid var(--line); transition: background 0.1s ease; } .brand-hub-cheapest__row:last-child { border-bottom: none; } .brand-hub-cheapest__row:hover { background: var(--surface-soft); } .brand-hub-cheapest__rank { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 50%; font-size: 13px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; } .brand-hub-cheapest__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .brand-hub-cheapest__name { font-size: 15px; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-hub-cheapest__product { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-hub-cheapest__right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; } .brand-hub-cheapest__price { font-size: 15px; font-weight: 700; color: var(--text-main); white-space: nowrap; } .brand-hub-cheapest__cta { font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; } /* -------------------------------------------------------------------------- All brands compact grid -------------------------------------------------------------------------- */ .brand-hub-all-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; } .brand-hub-all-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: inherit; transition: box-shadow 0.12s ease, border-color 0.12s ease; } .brand-hub-all-card:hover { border-color: #CBD5E1; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07); } .brand-hub-all-card__name { font-size: 14px; font-weight: 700; color: var(--text-main); line-height: 1.2; } .brand-hub-all-card__meta { font-size: 12px; color: var(--text-muted); line-height: 1.3; } .brand-hub-all-card__cta { font-size: 12px; font-weight: 600; color: var(--text-soft); margin-top: 2px; } /* -------------------------------------------------------------------------- Brand hub responsive -------------------------------------------------------------------------- */ @media (max-width: 900px) { .brand-hub-grid { grid-template-columns: repeat(2, 1fr); } .brand-hub-all-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .brand-hub-all-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } } @media (max-width: 540px) { .brand-hub-grid { grid-template-columns: 1fr; gap: 12px; } .brand-hub-cheapest__row { grid-template-columns: 28px 1fr auto; gap: 10px; padding: 12px 16px; } } @media (max-width: 400px) { .brand-hub-all-grid { grid-template-columns: 1fr; } .brand-hub-cheapest__row { grid-template-columns: 28px 1fr; grid-template-areas: "rank info" ". price"; align-items: start; } .brand-hub-cheapest__info { grid-area: info; } .brand-hub-cheapest__right { grid-area: price; display: flex; flex-direction: row; align-items: center; gap: 8px; padding-top: 3px; } }