/* ========================================================================== GastroOnline – design system & layout Tokens come from "Designsystem – GastroOnline.se" ========================================================================== */ :root { /* Brand – the "Grön" theme (chosen 2026-10-27; token names kept from the petrol original) */ --go-petrol: #4f8f68; --go-turkos: #8fd1a6; --go-petrol-dark: #2f6b47; --go-petrol-darker: #1f4b31; --go-marin: #1d3127; /* Neutrals & signal */ --go-bg: #f2f6f3; --go-surface: #ffffff; --go-studio: #e9efea; /* photo backdrop – a soft green-grey; photos are multiplied onto it, so keep it light */ --go-tint: #e2efe6; --go-tint-2: #f0f7f2; --go-line: #d8e3dc; --go-line-soft: #e6eee9; --go-line-input: #b8c9be; --go-line-check: #9db3a5; --go-text: #1d3127; --go-text-2: #4e6157; --go-text-3: #6d7f74; --go-on-dark: #d6e7dc; --go-on-dark-2: #9fbaa8; --go-dark-line: #2f4a3b; --go-sale: #d2491f; --go-success: #2d9a62; --go-success-text: #23774d; --go-order: #d9a21b; --go-order-text: #9a6a0a; --go-focus-ring: #cfe8d8; /* Type */ --go-font: 'Figtree', system-ui, sans-serif; --go-mono: 'IBM Plex Mono', ui-monospace, monospace; /* Layout */ --go-container: 1600px; --go-gutter: 40px; --go-radius: 4px; --go-radius-sm: 3px; --go-shadow-hover: 0 6px 20px color-mix(in srgb, var(--go-marin) 8%, transparent); --go-shadow-pop: 0 16px 40px color-mix(in srgb, var(--go-marin) 18%, transparent); } @media (max-width: 767px) { :root { --go-gutter: 16px; } } /* ---------- Base ---------- */ html { font-size: 62.5%; } body { font-family: var(--go-font); font-size: 16px; line-height: 1.5; color: var(--go-text); background: var(--go-bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--go-font); color: inherit; font-weight: 600; margin: 0; } h1 { font-size: 40px; line-height: 1.08; letter-spacing: -.012em; } h2 { font-size: 30px; line-height: 1.15; letter-spacing: -.01em; } h3 { font-size: 22px; line-height: 1.25; } p { margin: 0; } a { color: var(--go-petrol-dark); text-decoration: none; transition: color .15s, background-color .15s, border-color .15s; } a:hover { color: var(--go-petrol-darker); } :focus-visible { outline: 2px solid var(--go-petrol-dark); outline-offset: 2px; } ::selection { background: var(--go-tint); } img { max-width: 100%; height: auto; } [class^="icon-"], [class*=" icon-"] { line-height: 1; display: inline-block; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } @media (max-width: 767px) { h1 { font-size: 28px; } h2 { font-size: 22px; } } /* ---------- Layout primitives ---------- */ .go-section { width: 100%; display: block; } .go-container, .brxe-container.go-container { width: 100%; max-width: var(--go-container); margin-inline: auto; padding-inline: var(--go-gutter); box-sizing: border-box; } .go-white { background: var(--go-surface); border-bottom: 1px solid var(--go-line); } .go-dark { background: var(--go-marin); color: #fff; } .go-pad-t { padding-top: 56px; } .go-pad-b { padding-bottom: 72px; } .go-pad-y { padding-block: 32px 64px; } @media (max-width: 767px) { .go-pad-t { padding-top: 24px; } .go-pad-b { padding-bottom: 32px; } .go-pad-y { padding-block: 16px 32px; } } .go-stack { display: flex; flex-direction: column; gap: 16px; } .go-stack-sm { display: flex; flex-direction: column; gap: 8px; } .go-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .go-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; width: 100%; } .go-muted { color: var(--go-text-2); } .go-mono { font-family: var(--go-mono); font-size: 12px; color: var(--go-text-3); } .go-kicker { font-family: var(--go-mono); font-size: 12px; letter-spacing: .1em; color: var(--go-turkos); text-transform: uppercase; } .go-lead { font-size: 17px; line-height: 1.55; color: var(--go-text-2); max-width: 640px; } .go-dark .go-lead { color: var(--go-on-dark); } .go-grid-5, .go-grid-4, .go-grid-3, .go-grid-2 { display: grid; gap: 16px; width: 100%; } .go-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .go-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .go-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .go-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } @media (max-width: 1199px) { .go-grid-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 991px) { .go-grid-5, .go-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .go-grid-3 { grid-template-columns: 1fr; } } @media (max-width: 767px) { .go-grid-5, .go-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .go-grid-2 { grid-template-columns: 1fr; } } /* Product rows (.go-row-products: start page, deals, accessories) load 6 products and show as many as fill whole rows: 5 columns → 5, 4 → 4, 3 → 6, 2 → 6 */ .go-row-products > :nth-child(n+6) { display: none; } @media (max-width: 1199px) { .go-row-products > :nth-child(n+5) { display: none; } } @media (max-width: 991px) { .go-row-products > :nth-child(-n+6) { display: block; } .go-row-products > .brxe-template:nth-child(-n+6) { display: contents; } } /* Start page deals (few products qualify): 5 → 4 → 3 → 4, never a half row */ @media (max-width: 991px) { .go-row-deals > :nth-child(n+4), .go-row-deals > .brxe-template:nth-child(n+4) { display: none; } } @media (max-width: 767px) { .go-row-deals > :nth-child(4) { display: block; } .go-row-deals > .brxe-template:nth-child(4) { display: contents; } } /* ---------- Buttons ---------- */ .go-btn, .brxe-button.go-btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; box-sizing: border-box; font-family: var(--go-font); font-size: 15px; font-weight: 700; line-height: 1; border-radius: var(--go-radius); border: 2px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; } .go-btn--primary { background: var(--go-petrol-dark); color: #fff; } .go-btn--primary:hover { background: var(--go-petrol-darker); color: #fff; } .go-btn--dark { background: var(--go-marin); color: #fff; } .go-btn--dark:hover { background: var(--go-petrol-darker); color: #fff; } .go-btn--outline { background: var(--go-surface); color: var(--go-marin); border-color: var(--go-marin); } .go-btn--outline:hover { background: var(--go-tint); color: var(--go-marin); } .go-btn--turkos { background: var(--go-turkos); color: var(--go-marin); } .go-btn--turkos:hover { background: color-mix(in srgb, var(--go-turkos) 80%, #fff); color: var(--go-marin); } .go-btn--ghost-light { background: transparent; color: #fff; border-color: #fff; } .go-btn--ghost-light:hover { background: rgba(255, 255, 255, .1); color: #fff; } .go-btn--block { width: 100%; justify-content: center; } .go-btn--lg { height: 52px; font-size: 16px; } .go-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--go-petrol-dark); } .go-link:hover { gap: 9px; } /* ---------- Tags, badges, chips ---------- */ .go-badge { display: inline-block; font-size: 12px; font-weight: 700; line-height: 1.4; padding: 3px 8px; border-radius: var(--go-radius-sm); color: #fff; background: var(--go-sale); } .go-badge--new { background: var(--go-marin); } .go-badge--deal { background: var(--go-petrol-dark); } .go-badge--info { background: var(--go-tint); color: var(--go-petrol-darker); } .go-chips { display: flex; flex-wrap: wrap; gap: 8px; } .go-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--go-line); border-radius: var(--go-radius); background: var(--go-surface); color: var(--go-text); font-size: 14px; font-weight: 600; white-space: nowrap; } .go-chip span { color: var(--go-text-3); font-weight: 500; } .go-chip:hover { border-color: var(--go-petrol); color: var(--go-text); } .go-chip.is-active { background: var(--go-marin); border-color: var(--go-marin); color: #fff; } .go-chip.is-active span { color: var(--go-on-dark); } @media (max-width: 767px) { .go-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--go-gutter) * -1); padding-inline: var(--go-gutter); } .go-chips::-webkit-scrollbar { display: none; } } /* ---------- Price ---------- */ .go-price { display: flex; flex-direction: column; gap: 2px; } .go-price__row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .go-price__now { font-size: 20px; font-weight: 600; letter-spacing: -.005em; } .go-price__old { font-size: 13px; color: var(--go-text-3); text-decoration: line-through; } .go-price__ex { font-size: 12px; color: var(--go-text-2); } /* Inpris – only in the markup for administrators */ .go-price__cost { margin-top: 4px; font-family: var(--go-mono); font-size: 11px; line-height: 1.4; color: var(--go-text-2); } .go-price--single .go-price__cost { font-size: 13px; } .go-sticky-buy .go-price__cost { display: none; } .go-price--single { gap: 4px; } .go-price--single .go-price__now { font-size: 36px; font-weight: 700; letter-spacing: -.01em; } .go-price--single .go-price__old { font-size: 17px; } .go-price--single .go-price__ex { font-size: 15px; } @media (max-width: 767px) { .go-price--single .go-price__now { font-size: 30px; } } /* ---------- Placeholder imagery ---------- */ .go-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, var(--go-bg) 0 10px, color-mix(in srgb, var(--go-bg) 92%, var(--go-marin)) 10px 20px); } .go-placeholder span { font-family: var(--go-mono); font-size: 11px; color: var(--go-text-3); } .go-placeholder--dark { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--go-marin) 88%, #fff) 0 12px, color-mix(in srgb, var(--go-marin) 93%, #fff) 12px 24px); } .go-placeholder--dark span { color: var(--go-on-dark-2); } /* ---------- Product card ---------- */ .go-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--go-surface); border: 1px solid var(--go-line); border-radius: var(--go-radius); transition: border-color .15s, box-shadow .15s; box-sizing: border-box; min-width: 0; } .go-card:hover { border-color: var(--go-petrol); box-shadow: var(--go-shadow-hover); } .go-card__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-bottom: 1px solid var(--go-line-soft); border-radius: var(--go-radius) var(--go-radius) 0 0; background: var(--go-surface); /* white – the green studio tint made the grid too green */ } .go-card__media > span { display: block; width: 100%; height: 100%; } .go-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 9%; box-sizing: border-box; mix-blend-mode: multiply; /* white/off-white photo backgrounds melt into the backdrop */ transition: transform .45s ease; } .go-card:hover .go-card__media img { transform: scale(1.05); } .go-card__badge { position: absolute; top: 10px; left: 10px; z-index: 1; width: auto; max-width: calc(100% - 20px); } .go-card__badge:empty { display: none; } .go-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px 14px 16px; } .go-card__meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--go-text-2); width: 100%; } .go-card__brand { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .go-card__sku { font-family: var(--go-mono); } .go-card__title { font-size: 15px; font-weight: 600; line-height: 1.3; text-wrap: pretty; overflow-wrap: anywhere; } /* last resort for long words; "a/b" gets a break point in inc/woocommerce.php */ .go-card__title a { color: var(--go-text); } .go-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 0; } /* whole card clickable */ .go-card__spec { font-size: 13px; color: var(--go-text-2); } .go-card__price { margin-top: auto; padding-top: 10px; } .go-card__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 8px; width: 100%; } .go-card__cart, .woocommerce a.button.go-card__cart { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; padding: 0; border-radius: var(--go-radius); background: var(--go-petrol-dark); color: #fff; font-size: 18px; border: 0; } .go-card__cart:hover { background: var(--go-petrol-darker); color: #fff; } .go-card__cart.loading { opacity: .6; } .go-card__cart.added::after { display: none; } .go-card .added_to_cart { display: none; } @media (max-width: 767px) { .go-card__body { padding: 10px 10px 12px; } .go-card__title { font-size: 14px; } .go-card__spec { display: none; } .go-card__price .go-price__now { font-size: 17px; } } /* ---------- Header ---------- */ .go-topbar { background: var(--go-marin); color: var(--go-on-dark); font-size: 13px; font-weight: 500; } .go-topbar .go-container { display: flex; align-items: center; gap: 32px; height: 36px; } .go-topbar__item { display: inline-flex; align-items: center; gap: 8px; } .go-topbar__item i { color: var(--go-turkos); font-size: 15px; } .go-topbar__end { margin-left: auto; color: var(--go-on-dark); } .go-topbar__end:hover { color: #fff; } .go-topbar__tel { color: #fff; font-weight: 600; } .go-topbar__tel:hover { color: var(--go-turkos); } /* Prices incl./excl. VAT toggle (inc/vat.php) */ .go-vat { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .go-vat__label { color: var(--go-on-dark-2); } .go-vat__opts { display: inline-flex; border: 1px solid var(--go-dark-line); border-radius: 4px; overflow: hidden; } .go-vat__opt { appearance: none; background: transparent; border: 0; margin: 0; padding: 0 10px; font: inherit; font-size: 12px; line-height: 22px; color: var(--go-on-dark); cursor: pointer; } .go-vat__opt + .go-vat__opt { border-left: 1px solid var(--go-dark-line); } .go-vat__opt:hover { color: #fff; } .go-vat__opt.is-active { background: var(--go-turkos); color: var(--go-marin); font-weight: 600; cursor: default; } .go-vat__opt:focus-visible { outline: 2px solid var(--go-focus-ring); outline-offset: -2px; } .go-header { background: var(--go-surface); border-bottom: 1px solid var(--go-line); } .go-header > .go-container { display: flex; align-items: center; gap: 40px; height: 84px; } .go-logo img, .go-logo { height: 30px; width: auto; display: block; } .go-header .brxe-shortcode { flex: 1; max-width: 640px; } .go-actions { margin-left: auto; display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; } .go-action { display: inline-flex; align-items: center; gap: 8px; color: var(--go-text); } .go-action i { font-size: 20px; } .go-action:hover { color: var(--go-petrol-dark); } .go-cart-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--go-tint); padding: 10px 14px; border-radius: var(--go-radius); color: var(--go-text); } .go-cart-btn i { font-size: 20px; color: var(--go-petrol-dark); } .go-cart-btn:hover { background: color-mix(in srgb, var(--go-tint) 82%, var(--go-petrol)); color: var(--go-text); } .go-cart-count { background: var(--go-petrol-dark); color: #fff; font-size: 12px; font-weight: 700; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } .go-cart-count.is-empty { background: var(--go-line-input); } .go-catnav { background: var(--go-surface); border-bottom: 1px solid var(--go-line); } .go-catnav > .go-container { display: flex; align-items: center; gap: 28px; height: 52px; font-size: 14px; font-weight: 600; } .go-catnav__all { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px; background: var(--go-marin); color: #fff; white-space: nowrap; } .go-catnav__all:hover { background: var(--go-petrol-darker); color: #fff; } .go-catnav__all i { font-size: 18px; } .go-catnav .brxe-nav-menu { flex: 1; min-width: 0; } .go-catnav .bricks-nav-menu { display: flex; gap: 28px; flex-wrap: nowrap; overflow: hidden; } .go-catnav .bricks-nav-menu > li > a { color: var(--go-text); font-size: 14px; font-weight: 600; white-space: nowrap; line-height: 52px; padding: 0; } .go-catnav .bricks-nav-menu > li > a:hover, .go-catnav .bricks-nav-menu > li.current-menu-item > a { color: var(--go-petrol-dark); } /* Items spread over the full width, categories that don't fit wrap out of sight (see gastro.js) */ .go-catnav .bricks-nav-menu { justify-content: space-between; } .go-catnav .bricks-nav-menu > li { margin: 0; } /* Bricks adds 30px – the gap handles spacing */ /* Archive filters without any options (attribute not used in this category) are hidden */ .go-filter:has(.brxe-filter-checkbox):not(:has(input)) { display: none; } /* Start page category carousel ({go_cat_carousel}) – cards line up with the 5-column product grid */ .go-catcar { position: relative; width: 100%; --go-catcar-gap: 16px; --go-catcar-per-view: 5; } /* overflow-x also clips vertically – room for the hover lift (-3px) and shadow, cancelled by negative margins */ .go-catcar__viewport { overflow-x: auto; scrollbar-width: none; padding-block: 8px 24px; margin-block: -8px -24px; } .go-catcar__viewport::-webkit-scrollbar { display: none; } .go-catcar__track { display: flex; gap: var(--go-catcar-gap); } .go-catcar__card { flex: 0 0 calc((100% - (var(--go-catcar-per-view) - 1) * var(--go-catcar-gap)) / var(--go-catcar-per-view)); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--go-line); border-radius: var(--go-radius); color: var(--go-text); overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s; } .go-catcar__card:hover { border-color: var(--go-petrol); box-shadow: var(--go-shadow-hover); color: var(--go-text); transform: translateY(-3px); } .go-catcar__media { display: block; aspect-ratio: 4 / 3; background: #fff; overflow: hidden; border-bottom: 1px solid var(--go-line-soft); } .go-catcar__media img { width: 100%; height: 100%; object-fit: contain; padding: 16px; box-sizing: border-box; transition: transform .5s ease; } .go-catcar__card:hover .go-catcar__media img { transform: scale(1.06); } .go-catcar__body { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 16px 52px 18px 16px; } .go-catcar__icon { width: 40px; height: 40px; border-radius: var(--go-radius); background: var(--go-tint); color: var(--go-petrol-dark); display: flex; align-items: center; justify-content: center; font-size: 20px; transition: background .2s, color .2s; } .go-catcar__card:hover .go-catcar__icon { background: var(--go-petrol-dark); color: #fff; } .go-catcar__name { font-size: 16px; font-weight: 700; line-height: 1.25; } .go-catcar__go { position: absolute; right: 16px; top: 50%; transform: translate(-6px, -50%); opacity: 0; color: var(--go-petrol-dark); font-size: 18px; transition: opacity .2s, transform .2s; } .go-catcar__card:hover .go-catcar__go { opacity: 1; transform: translate(0, -50%); } .go-catcar__arrow { position: absolute; top: calc(50% - 40px); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--go-line); background: #fff; color: var(--go-text); display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; box-shadow: var(--go-shadow-hover); transition: background .2s, color .2s; } .go-catcar__arrow:hover { background: var(--go-petrol-dark); color: #fff; border-color: var(--go-petrol-dark); } .go-catcar__arrow--prev { left: 12px; } .go-catcar__arrow--next { right: 12px; } @media (max-width: 1199px) { .go-catcar { --go-catcar-per-view: 4; } } @media (max-width: 991px) { .go-catcar { --go-catcar-per-view: 3; } } @media (max-width: 767px) { .go-catcar { --go-catcar-per-view: 2.2; --go-catcar-gap: 12px; } .go-catcar__arrow { display: none; } .go-catcar__body { padding: 12px 12px 14px; grid-template-columns: 1fr; } .go-catcar__icon { display: none; } .go-catcar__name { font-size: 14px; } } /* Mega menu behind "Alla kategorier" ({go_mega_menu}) */ .go-catnav { position: relative; z-index: 50; } .go-catnav__all.is-open { background: var(--go-petrol-darker); } .go-mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--go-surface); border-bottom: 1px solid var(--go-line); box-shadow: var(--go-shadow-pop); max-height: calc(100vh - 180px); overflow-y: auto; } .go-mega[hidden] { display: none; } .go-mega__inner { padding-block: 32px 28px; } .go-mega__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 40px; } .go-mega__col { min-width: 0; } .go-mega__top { display: flex; align-items: center; gap: 10px; color: var(--go-text); font-size: 15px; font-weight: 700; margin-bottom: 10px; } .go-mega__top i { font-size: 18px; color: var(--go-petrol-dark); } .go-mega__top:hover { color: var(--go-petrol-dark); } .go-mega ul { list-style: none; margin: 0 0 8px 28px; padding: 0; } .go-mega li a { display: block; color: var(--go-text-2); font-size: 14px; font-weight: 400; line-height: 1.35; padding: 4px 0; } .go-mega li a:hover { color: var(--go-petrol-dark); } .go-mega__all { display: inline-block; margin-left: 28px; font-size: 13px; font-weight: 600; color: var(--go-petrol-dark); } .go-mega__shop { display: inline-block; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--go-line-soft); width: 100%; font-size: 14px; font-weight: 700; color: var(--go-petrol-dark); } /* Mobile hamburger menu (Bricks nav-menu with "always" mobile toggle) */ .go-burger { display: none; } .go-burger .bricks-mobile-menu-toggle { color: var(--go-text); width: 24px; } .go-burger .bricks-mobile-menu-wrapper { background: var(--go-surface); } .go-burger .bricks-mobile-menu > li > a { color: var(--go-text); font-weight: 600; font-size: 16px; padding: 14px 20px; border-bottom: 1px solid var(--go-line-soft); display: block; } .go-burger .bricks-mobile-menu-overlay { background: color-mix(in srgb, var(--go-marin) 45%, transparent); } @media (max-width: 991px) { .go-topbar__item:nth-child(n+2), .go-topbar__end { display: none; } .go-topbar .go-container { justify-content: space-between; gap: 12px; height: 34px; font-size: 12px; } .go-vat__opt { padding: 0 8px; } .go-header > .go-container { flex-wrap: wrap; height: auto; gap: 16px; padding-block: 12px; } .go-burger { display: block; order: -1; } .go-logo img, .go-logo { height: 20px; } .go-header .brxe-shortcode { order: 10; flex: 1 0 100%; max-width: none; } .go-actions { gap: 18px; } .go-action span, .go-cart-btn__label { display: none; } .go-cart-btn { background: none; padding: 0; position: relative; } .go-cart-btn i { color: var(--go-text); font-size: 22px; } .go-cart-btn .go-cart-count { position: absolute; top: -6px; right: -9px; min-width: 18px; height: 18px; font-size: 11px; } .go-catnav { display: none; } } /* ---------- Search ---------- */ .go-search { position: relative; display: flex; height: 48px; border: 2px solid var(--go-marin); border-radius: var(--go-radius); background: #fff; box-sizing: border-box; width: 100%; } .go-search.is-open { border-color: var(--go-petrol-dark); border-radius: var(--go-radius) var(--go-radius) 0 0; } .go-search__field { flex: 1; display: flex; align-items: center; gap: 12px; padding: 0 16px; min-width: 0; cursor: text; } .go-search__field i { font-size: 18px; color: var(--go-marin); } .go-search input[type="search"] { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--go-text); padding: 0; height: 100%; } .go-search input::placeholder { color: var(--go-text-3); } .go-search__submit { background: var(--go-marin); color: #fff; border: 0; font: inherit; font-weight: 700; font-size: 15px; padding: 0 22px; cursor: pointer; } .go-search__submit:hover { background: var(--go-petrol-darker); } .go-search__panel { position: absolute; top: 100%; left: -2px; right: -2px; z-index: 100; display: grid; grid-template-columns: 220px 1fr; background: #fff; border: 1px solid var(--go-line); border-top: 0; border-radius: 0 0 var(--go-radius) var(--go-radius); box-shadow: var(--go-shadow-pop); font-size: 14px; } .go-search__panel[hidden] { display: none; } .go-search__col { padding: 16px; display: flex; flex-direction: column; gap: 4px; } .go-search__col:first-child { border-right: 1px solid var(--go-line-soft); } .go-search__col > a:not(.go-search__product):not(.go-search__all) { display: flex; justify-content: space-between; color: var(--go-text); padding: 3px 0; } .go-search__label { font-size: 12px; font-weight: 700; color: var(--go-text-2); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; } .go-search__product { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 8px; border-radius: var(--go-radius); color: var(--go-text); } .go-search__product:hover { background: var(--go-bg); color: var(--go-text); } .go-search__thumb { width: 52px; height: 52px; border-radius: var(--go-radius); background: var(--go-bg); border: 1px solid var(--go-line-soft); overflow: hidden; } .go-search__thumb img { width: 100%; height: 100%; object-fit: contain; } .go-search__title { display: block; font-weight: 600; } .go-search__product .go-mono { display: block; } .go-search__all { margin-top: 8px; padding: 10px 8px; border-top: 1px solid var(--go-line-soft); font-weight: 700; display: flex; align-items: center; gap: 6px; } .go-search__empty { grid-column: 1 / -1; padding: 16px; color: var(--go-text-2); } @media (max-width: 991px) { .go-search { height: 44px; } .go-search__submit { display: none; } .go-search__panel { grid-template-columns: 1fr; } .go-search__col:first-child { border-right: 0; border-bottom: 1px solid var(--go-line-soft); } } /* ---------- Footer ---------- */ .go-footer { background: var(--go-marin); color: var(--go-on-dark); font-size: 14px; } .go-footer a { color: var(--go-on-dark); } .go-footer a:hover { color: #fff; } .go-usps { border-bottom: 1px solid var(--go-dark-line); } .go-usps > .go-container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-block: 28px; } .go-usp { display: flex; gap: 12px; align-items: center; } .go-usp > i { font-size: 24px; color: var(--go-turkos); } .go-usp strong { display: block; color: #fff; font-weight: 700; } .go-footer__cols > .go-container { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 40px; padding-block: 48px; } .go-footer__logo { align-self: flex-start; display: inline-block; line-height: 0; } .go-footer__logo img { height: 22px; width: auto; } .go-footer__about { display: flex; flex-direction: column; gap: 16px; max-width: 260px; line-height: 1.5; align-items: flex-start; } .go-footer__col { display: flex; flex-direction: column; line-height: 2; } .go-footer__title { color: #fff; font-weight: 700; margin-bottom: 6px; line-height: 1.5; font-size: 14px; } .go-footer__bottom { border-top: 1px solid var(--go-dark-line); } .go-footer__bottom > .go-container { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; padding-block: 18px; font-size: 13px; color: var(--go-on-dark-2); } .go-paylogos { display: flex; gap: 10px; flex-wrap: wrap; } .go-paylogos span { border: 1px solid #3b5966; padding: 2px 8px; border-radius: var(--go-radius-sm); } @media (max-width: 991px) { .go-usps > .go-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } .go-footer__cols > .go-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } .go-footer__about { grid-column: 1 / -1; max-width: none; } } /* ---------- Start page ---------- */ .go-hero-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; width: 100%; } .go-hero { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 440px; overflow: hidden; border-radius: var(--go-radius); background: var(--go-marin); color: #fff; } .go-hero__text { padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; gap: 20px; } .go-hero__title { font-size: 50px; line-height: 1.05; letter-spacing: -.015em; text-wrap: pretty; color: #fff; } .go-hero__lead { font-size: 17px; line-height: 1.55; color: var(--go-on-dark); max-width: 380px; } .go-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .go-hero__media { position: relative; min-height: 220px; } .go-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2); } .go-hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 24px; } .go-promo { display: grid; grid-template-columns: 1fr 130px; overflow: hidden; background: #fff; border: 1px solid var(--go-line); border-radius: var(--go-radius); color: var(--go-text); } .go-promo:hover { border-color: var(--go-petrol); color: var(--go-text); } .go-promo__text { padding: 24px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .go-promo__title { font-size: 22px; font-weight: 600; line-height: 1.2; } .go-promo .go-link { margin-top: auto; } .go-advice { background: var(--go-tint); border-radius: var(--go-radius); padding: 24px; display: flex; flex-direction: column; gap: 8px; color: var(--go-text); } .go-advice > i { font-size: 24px; color: var(--go-petrol-dark); } .go-advice .go-promo__title { color: var(--go-text); } .go-advice p { font-size: 14px; color: var(--go-petrol-darker); line-height: 1.5; } .go-advice .go-link { margin-top: auto; color: var(--go-petrol-darker); } @media (max-width: 991px) { .go-hero-grid { grid-template-columns: 1fr; } .go-hero-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .go-hero { grid-template-columns: 1fr; min-height: 0; } .go-hero__media { order: -1; height: 180px; min-height: 0; } .go-hero__text { padding: 24px 20px; gap: 14px; } .go-hero__title { font-size: 32px; line-height: 1.08; } .go-hero__lead { font-size: 15px; } .go-hero__actions .go-btn { flex: 1; justify-content: space-between; } .go-hero__actions .go-btn--ghost-light { display: none; } .go-hero-side { grid-template-columns: 1fr; } .go-hero-side .go-promo { display: none; } } /* Category tiles */ .go-cat-tile { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: #fff; border: 1px solid var(--go-line); border-radius: var(--go-radius); color: var(--go-text); height: 100%; box-sizing: border-box; } .go-cat-tile:hover { border-color: var(--go-petrol); color: var(--go-text); } .go-cat-tile__icon { width: 48px; height: 48px; border-radius: var(--go-radius); background: var(--go-tint); color: var(--go-petrol-dark); display: flex; align-items: center; justify-content: center; font-size: 24px; } .go-cat-tile__name { font-size: 16px; font-weight: 600; } .go-cat-tile__count { font-size: 13px; color: var(--go-text-2); margin-top: 2px; } @media (max-width: 767px) { .go-cat-tile { flex-direction: row; align-items: center; gap: 10px; padding: 14px; min-height: 44px; } .go-cat-tile__icon { width: auto; height: auto; background: none; font-size: 20px; } .go-cat-tile__name { font-size: 14px; } .go-cat-tile__count { display: none; } } /* Tab header */ .go-tabs-head { display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--go-line); margin-bottom: 20px; width: 100%; overflow-x: auto; } .go-tabs-head h2 { margin-right: 16px; padding-bottom: 14px; white-space: nowrap; } .go-tab { font-size: 15px; font-weight: 600; color: var(--go-text-2); padding-bottom: 14px; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; } .go-tab.is-active, .go-tab:hover { color: var(--go-text); border-bottom-color: var(--go-marin); font-weight: 700; } @media (max-width: 767px) { .go-tabs-head .go-tab { display: none; } .go-tabs-head h2 { padding-bottom: 10px; } } /* USP strip (start page) */ .go-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; border: 1px solid var(--go-line); border-radius: var(--go-radius); width: 100%; } .go-feature { padding: 32px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--go-line); } .go-feature:last-child { border-right: 0; } .go-feature > i { font-size: 24px; color: var(--go-petrol-dark); } .go-feature h3 { font-size: 18px; } .go-feature p { font-size: 15px; color: var(--go-text-2); line-height: 1.55; } @media (max-width: 991px) { .go-features { grid-template-columns: 1fr; } .go-feature { border-right: 0; border-bottom: 1px solid var(--go-line); padding: 24px; } .go-feature:last-child { border-bottom: 0; } } /* Brand wall */ .go-brands { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border-top: 1px solid var(--go-line); border-left: 1px solid var(--go-line); background: #fff; width: 100%; } .go-brand { height: 88px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--go-line); border-bottom: 1px solid var(--go-line); font-family: var(--go-mono); font-size: 12px; color: var(--go-text-3); text-align: center; padding: 0 8px; } a.go-brand:hover { color: var(--go-petrol-dark); background: var(--go-bg); } @media (max-width: 991px) { .go-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 478px) { .go-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Breadcrumbs ---------- */ .go-crumbs, .go-crumbs .woocommerce-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--go-text-2); margin: 0; } .go-crumbs a { color: var(--go-text-2); } .go-crumbs a:hover { color: var(--go-petrol-dark); } .go-crumbs .navigation { display: contents; } .go-crumbs .separator, .go-crumbs .woocommerce-breadcrumb .separator { color: var(--go-text-3); } .go-crumbs .woocommerce-breadcrumb > *:last-child, .go-crumbs [aria-current] { color: var(--go-text); font-weight: 600; } /* ---------- Archive / category ---------- */ .go-archive-head > .go-container { display: flex; flex-direction: column; gap: 14px; padding-block: 20px 28px; } .go-archive-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; width: 100%; } .go-archive-head__count { font-size: 14px; color: var(--go-text-2); white-space: nowrap; } .go-archive-head__desc { font-size: 16px; color: var(--go-text-2); max-width: 640px; line-height: 1.5; margin-top: 8px; } .go-archive-body { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; padding-block: 28px 64px; } .go-filters { display: flex; flex-direction: column; } .go-filter { border-top: 1px solid var(--go-line); padding: 16px 0; display: flex; flex-direction: column; gap: 10px; } .go-filter__title { font-size: 15px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; } .go-filters__close { display: none; } /* Bricks filter checkbox */ .go-filter .brxe-filter-checkbox { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .go-filter .brxe-filter-checkbox li { margin: 0; } .go-filter .brxe-filter-checkbox label { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; } .go-filter .brxe-filter-checkbox input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--go-line-check); border-radius: var(--go-radius-sm); background: #fff; display: grid; place-content: center; flex: none; cursor: pointer; } .go-filter .brxe-filter-checkbox input[type="checkbox"]:checked { background: var(--go-petrol-dark); border-color: var(--go-petrol-dark); } .go-filter .brxe-filter-checkbox input[type="checkbox"]:checked::before { content: '\e070'; font-family: 'lucide'; color: #fff; font-size: 13px; } .go-filter .brxe-filter-checkbox .brx-option-text { flex: 1; display: flex; justify-content: space-between; gap: 8px; } .go-filter .brxe-filter-checkbox .brx-option-count { color: var(--go-text-3); font-size: 13px; } .go-filter .brxe-filter-checkbox li.brx-option-disabled { opacity: .45; } /* Bricks range filter */ .go-filter .brxe-filter-range .min-max-wrap { display: flex; gap: 8px; } .go-filter .brxe-filter-range input[type="number"] { flex: 1; width: 100%; height: 40px; border: 1px solid var(--go-line-input); border-radius: var(--go-radius); padding: 0 10px; font: inherit; font-size: 14px; background: #fff; box-sizing: border-box; } .go-filter .brxe-filter-range .double-slider-wrap { --brx-range-bar-color: var(--go-line); --brx-range-bar-color-active: var(--go-petrol-dark); --brx-range-thumb-color: #fff; margin-bottom: 12px; } .go-filter .brxe-filter-range input[type="range"]::-webkit-slider-thumb { border: 2px solid var(--go-petrol-dark); background: #fff; } .go-filter .brxe-filter-range input[type="range"]::-moz-range-thumb { border: 2px solid var(--go-petrol-dark); background: #fff; } .go-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; width: 100%; } .go-toolbar__end { margin-left: auto; display: flex; gap: 10px; align-items: center; } .go-toolbar .brxe-filter-active-filters { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; } .go-toolbar .brxe-filter-active-filters li { margin: 0; } .go-toolbar .brxe-filter-active-filters button, .go-toolbar .brxe-filter-active-filters .brx-active-filter { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--go-tint); color: var(--go-petrol-darker); border: 0; border-radius: var(--go-radius); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .go-toolbar .brxe-filter-active-filters button::after, .go-toolbar .brxe-filter-active-filters .brx-active-filter::after { content: '\e1b2'; font-family: 'lucide'; font-size: 14px; } .go-toolbar .woocommerce-ordering, .go-toolbar .brxe-filter-select select { height: 40px; border: 1px solid var(--go-line-input); border-radius: var(--go-radius); background: #fff; font: inherit; font-size: 14px; color: var(--go-text); padding: 0 36px 0 12px; margin: 0; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230e2630' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .go-toolbar .woocommerce-ordering select { border: 0; background: transparent; font: inherit; height: 38px; appearance: none; padding: 0; color: var(--go-text); } .go-filter-toggle { display: none; } .go-results-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 32px; } .go-results-foot .brxe-query-results-summary { font-size: 14px; color: var(--go-text-2); } .go-results-foot .bricks-pagination ul { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; } .go-results-foot .bricks-pagination ul.page-numbers { border: 0; background: none; padding: 0; } /* WordPress gives the list the same class as the links */ .go-results-foot .bricks-pagination a.page-numbers, .go-results-foot .bricks-pagination span.page-numbers { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--go-line-input); border-radius: var(--go-radius); background: #fff; color: var(--go-text); font-weight: 600; font-size: 14px; padding: 0 10px; box-sizing: border-box; } .go-results-foot .bricks-pagination .page-numbers.current { background: var(--go-marin); border-color: var(--go-marin); color: #fff; } .go-category-info { border-top: 1px solid var(--go-line); margin-top: 24px; padding-top: 28px; font-size: 15px; line-height: 1.6; color: var(--go-text-2); } .go-category-info h2 { font-size: 20px; color: var(--go-text); margin-bottom: 8px; } .go-empty { display: flex; flex-direction: column; gap: 16px; max-width: 560px; padding: 24px 0; } .go-empty > i { font-size: 36px; color: var(--go-petrol); } @media (max-width: 991px) { .go-archive-body { grid-template-columns: 1fr; padding-top: 0; } .go-filters { position: fixed; inset: 0; z-index: 9999; background: #fff; padding: 0 16px 96px; overflow-y: auto; transform: translateX(-100%); transition: transform .25s ease; visibility: hidden; } body.go-filters-open .go-filters { transform: none; visibility: visible; } body.go-filters-open { overflow: hidden; } .go-filters__head { display: flex; align-items: center; justify-content: space-between; height: 60px; border-bottom: 1px solid var(--go-line); margin-inline: -16px; padding-inline: 16px; font-size: 18px; font-weight: 600; position: sticky; top: 0; background: #fff; z-index: 1; width: calc(100% + 32px); max-width: none; box-sizing: border-box; } .go-filters__close { display: inline-flex; background: none; border: 0; font-size: 24px; cursor: pointer; color: var(--go-text); padding: 0; } .go-filters__apply { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px; border-top: 1px solid var(--go-line); background: #fff; } .go-filter { border-top: 0; border-bottom: 1px solid var(--go-line); } .go-filter-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; flex: 1; background: #fff; border: 0; border-right: 1px solid var(--go-line); font: inherit; font-size: 15px; font-weight: 700; color: var(--go-text); cursor: pointer; } .go-toolbar { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--go-line); margin: 0 calc(var(--go-gutter) * -1) 12px; width: auto; gap: 0; flex-wrap: nowrap; } .go-toolbar .brxe-filter-active-filters { display: none; } .go-toolbar__end { flex: 1; margin: 0; justify-content: center; } .go-toolbar .woocommerce-ordering { border: 0; height: 48px; display: flex; align-items: center; background-position: right 50% center; font-weight: 700; } /* Full-bleed sticky bar: the negative margins need a matching width (a generic rule sets 100%) */ .go-archive-body .go-toolbar { width: calc(100% + 2 * var(--go-gutter)); max-width: none; box-sizing: border-box; } .go-toolbar .brxe-woocommerce-products-orderby { flex: 1; } .go-toolbar .woocommerce-ordering { justify-content: center; gap: 8px; padding: 0 12px; background-image: none; } .go-toolbar .woocommerce-ordering::before { content: '\e381'; font-family: 'lucide'; font-size: 18px; font-weight: 400; } .go-toolbar .woocommerce-ordering select { width: auto; font-weight: 700; font-size: 15px; text-align: center; } } @media (min-width: 992px) { .go-filters__head, .go-filters__apply { display: none; } /* Desktop: the filters as a white panel that follows the page while scrolling */ .go-filters { align-self: start; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; background: var(--go-surface); border: 1px solid var(--go-line); border-radius: var(--go-radius); padding: 4px 20px 8px; scrollbar-width: thin; } .go-filters > .go-filter:first-of-type, .go-filters__head + .go-filter { border-top: 0; } } /* Category pages already show the sub categories as chips – no "Kategori" filter there */ .tax-product_cat .go-filter:has(#brxe-gofcaf) { display: none; } .tax-product_cat .go-filters__head + .go-filter:has(#brxe-gofcaf) + .go-filter { border-top: 0; } /* Long option lists (e.g. Kategori) scroll inside their group */ .go-filter .brxe-filter-checkbox { max-height: 232px; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; } .go-filter__title::after { content: ''; } /* Back to top (created by gastro.js) */ .go-top { position: fixed; right: 24px; bottom: 24px; z-index: 95; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--go-line); background: var(--go-surface); color: var(--go-text); font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--go-shadow-pop); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s, transform .2s, visibility .2s, bottom .25s, background .15s, color .15s; } .go-top.is-visible { opacity: 1; visibility: visible; transform: none; } .go-top:hover { background: var(--go-petrol-dark); border-color: var(--go-petrol-dark); color: #fff; } .go-top.is-raised { bottom: 92px; } /* above the sticky buy bar on product pages */ @media (max-width: 767px) { .go-top { right: 16px; bottom: 16px; width: 44px; height: 44px; } .go-top.is-raised { bottom: 88px; } } /* Sort buttons ({go_sort_tabs}) – desktop; mobile keeps the WooCommerce dropdown in the sticky bar */ .go-sort { display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: var(--go-surface); border: 1px solid var(--go-line); border-radius: var(--go-radius); } .go-sort__label { font-size: 13px; color: var(--go-text-3); padding: 0 8px 0 6px; } .go-sort__opt { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--go-radius-sm); font-size: 14px; font-weight: 600; color: var(--go-text-2); white-space: nowrap; transition: background .15s, color .15s; } .go-sort__opt:hover { background: var(--go-tint); color: var(--go-text); } .go-sort__opt.is-active { background: var(--go-marin); color: #fff; } @media (min-width: 992px) { .go-toolbar .brxe-woocommerce-products-orderby { display: none; } } @media (max-width: 991px) { .go-sort { display: none; } } /* Pagination: the "…" is not a button */ .go-results-foot .bricks-pagination span.page-numbers.dots { border: 0; background: none; min-width: 24px; padding: 0; } .go-results-foot .bricks-pagination a.page-numbers:hover { border-color: var(--go-petrol-dark); color: var(--go-petrol-dark); } /* ---------- Single product ---------- */ .go-product-top > .go-container { display: flex; flex-direction: column; gap: 20px; padding-block: 20px 48px; } .go-product-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; width: 100%; } .go-gallery { position: relative; align-self: start; background: var(--go-studio); border-radius: var(--go-radius); padding: clamp(24px, 4vw, 56px); box-sizing: border-box; } .go-gallery .brxe-product-gallery, .go-gallery .woocommerce-product-gallery { width: 100%; margin: 0; } .go-gallery .woocommerce-product-gallery__image img { background: transparent; mix-blend-mode: multiply; width: 100%; max-height: 560px; object-fit: contain; } .go-gallery .flex-control-thumbs li img { border: 1px solid var(--go-line); border-radius: var(--go-radius); } .go-gallery .flex-control-thumbs li img.flex-active { border: 2px solid var(--go-marin); } .go-gallery__placeholder { position: relative; aspect-ratio: 1 / 1; border-radius: var(--go-radius); overflow: hidden; } .go-gallery__badge { position: absolute; top: 16px; left: 16px; z-index: 2; } .go-gallery__badge:empty { display: none; } .go-buybox { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .go-buybox__meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; width: 100%; } .go-buybox__brand { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--go-petrol-dark); } .go-buybox__sku { font-family: var(--go-mono); color: var(--go-text-2); } .go-buybox__title { font-size: 36px; line-height: 1.12; letter-spacing: -.012em; } .go-buybox__spec { font-size: 15px; color: var(--go-text-2); } .go-buybox__price { padding: 4px 0 0; } .go-buybox__delivery { display: flex; flex-direction: column; gap: 8px; font-size: 15px; } .go-buybox__delivery .go-row { color: var(--go-text-2); gap: 8px; } .go-buybox__delivery i { font-size: 18px; } .go-buybox .brxe-product-add-to-cart form.cart { display: flex; align-items: stretch; gap: 12px; margin: 0; } .go-buybox .brxe-product-add-to-cart form.cart .single_add_to_cart_button { margin: 0; } /* Bricks/WC add 10px on top – keeps it level with the quantity box */ .go-buybox .brxe-product-add-to-cart .stock { display: none; } .go-buybox .single_add_to_cart_button, .go-buybox .brxe-product-add-to-cart .button { flex: 1; height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--go-petrol-dark) !important; color: #fff !important; border: 0; border-radius: var(--go-radius); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; padding: 0 22px; } .go-buybox .single_add_to_cart_button::before { content: '\e160'; font-family: 'lucide'; font-weight: 400; font-size: 18px; } .go-buybox .single_add_to_cart_button:hover { background: var(--go-petrol-darker) !important; } .go-advice-bar { display: flex; gap: 14px; align-items: center; background: var(--go-tint); border-radius: var(--go-radius); padding: 16px 18px; font-size: 14px; line-height: 1.45; } .go-advice-bar > i { font-size: 24px; color: var(--go-petrol-dark); } .go-advice-bar__text { flex: 1; } .go-advice-bar__text strong { display: block; } .go-advice-bar__text span { color: var(--go-petrol-darker); } .go-advice-bar a { font-weight: 700; color: var(--go-petrol-darker); } .go-trust { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 20px; border-top: 1px solid var(--go-line-soft); font-size: 13px; color: var(--go-text-2); } .go-trust span { display: flex; gap: 8px; align-items: center; white-space: nowrap; } .go-trust i { font-size: 18px; color: var(--go-petrol-dark); } .go-product-info { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding-block: 48px 56px; } .go-product-info h2 { font-size: 22px; margin-bottom: 16px; } .go-no-description .go-product-info > .go-prose { display: none; } .go-prose { font-size: 15px; line-height: 1.55; color: var(--go-text-2); } .go-prose p { margin: 0 0 14px; } .go-prose ul { margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-direction: column; } .go-prose li { position: relative; padding: 9px 0 9px 22px; border-bottom: 1px solid var(--go-line-soft); } .go-prose li::before { content: ''; position: absolute; left: 4px; top: 17px; width: 6px; height: 6px; border-radius: 50%; background: var(--go-petrol); } .go-docs__title { font-size: 16px; font-weight: 700; margin: 28px 0 8px; } .go-docs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--go-line); font-size: 15px; } .go-docs a { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--go-line); color: var(--go-text); } .go-docs a i { color: var(--go-petrol-dark); } .go-docs__meta { margin-left: auto; font-family: var(--go-mono); font-size: 12px; color: var(--go-text-3); } .go-specs { margin: 0; background: #fff; border: 1px solid var(--go-line); border-radius: var(--go-radius); } .go-specs__row { display: grid; grid-template-columns: 1fr 1fr; padding: 11px 16px; border-bottom: 1px solid var(--go-line-soft); font-size: 14px; } .go-specs__row:last-child { border-bottom: 0; } .go-specs dt { color: var(--go-text-2); } .go-specs dd { margin: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; } .go-sticky-buy { display: none; } @media (max-width: 991px) { .go-product-grid { grid-template-columns: 1fr; gap: 24px; } .go-product-info { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 767px) { .go-buybox__title { font-size: 26px; } .go-trust { grid-template-columns: 1fr; } .go-sticky-buy { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; gap: 10px; align-items: center; background: #fff; border-top: 1px solid var(--go-line); padding: 12px 16px; box-shadow: 0 -6px 20px color-mix(in srgb, var(--go-marin) 6%, transparent); } .go-sticky-buy .go-price__ex, .go-sticky-buy .go-price__old { display: none; } .go-sticky-buy .go-price__now { font-size: 17px; font-weight: 700; } .go-sticky-buy .go-btn { flex: 1; justify-content: center; } body.single-product { padding-bottom: 76px; } /* Only once the real buy button has scrolled out of view (gastro.js toggles .is-visible) */ .go-sticky-buy { transform: translateY(110%); transition: transform .25s ease; } .go-sticky-buy.is-visible { transform: none; } /* Advice box: text on top, "Kontakta oss" below, number never split */ .go-advice-bar { flex-wrap: wrap; align-items: flex-start; } .go-advice-bar__text { flex: 1 1 calc(100% - 40px); } .go-advice-bar__text span { white-space: nowrap; } .go-advice-bar > a { flex-basis: 100%; padding-left: 38px; } } .go-prose h2 { color: var(--go-text); } /* ---------- WooCommerce forms & notices ---------- */ .woocommerce form .form-row { margin: 0 0 14px; padding: 0; } .woocommerce form .form-row label, .go-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--go-text); } .woocommerce form .form-row .required { color: var(--go-sale); text-decoration: none; } .woocommerce form .input-text, .woocommerce form select, .woocommerce-page form .input-text, .brxe-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .brxe-form select, .brxe-form textarea, .select2-container .select2-selection--single { width: 100%; height: 48px; box-sizing: border-box; border: 1px solid var(--go-line-input); border-radius: var(--go-radius); background: #fff; padding: 0 14px; font: inherit; font-size: 15px; color: var(--go-text); transition: border-color .15s, box-shadow .15s; } .woocommerce form textarea.input-text, .brxe-form textarea { height: 140px; padding: 12px 14px; } .woocommerce form .input-text:focus, .brxe-form input:focus, .brxe-form textarea:focus, .brxe-form select:focus { outline: 0; border: 2px solid var(--go-petrol-dark); box-shadow: 0 0 0 3px var(--go-focus-ring); padding-inline: 13px; } .select2-container .select2-selection--single .select2-selection__rendered { line-height: 46px; padding: 0; } .select2-container .select2-selection--single .select2-selection__arrow { height: 46px; } .woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button, .woocommerce #respond input#submit, .brxe-form button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; background: var(--go-petrol-dark); color: #fff; border: 0; border-radius: var(--go-radius); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; line-height: 1; } .woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover, .brxe-form button[type="submit"]:hover { background: var(--go-petrol-darker); color: #fff; } .woocommerce .button:disabled, .woocommerce button.button:disabled[disabled] { opacity: .45; background: var(--go-petrol-dark); color: #fff; } .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notices-wrapper > div, .brxe-woocommerce-notice .woocommerce-message { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--go-tint); color: var(--go-text); border: 0; border-left: 3px solid var(--go-petrol-dark); border-radius: var(--go-radius); padding: 12px 16px; margin: 0 0 16px; font-size: 14px; list-style: none; } .woocommerce-error { background: #fbe9e3; border-left-color: var(--go-sale); } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; } .woocommerce-message .button, .woocommerce-info .button { order: 2; margin-left: auto; height: 36px; font-size: 13px; padding: 0 14px; background: transparent; color: var(--go-petrol-dark); border: 1px solid var(--go-petrol-dark); } .woocommerce-message .button:hover { background: #fff; color: var(--go-petrol-darker); } .go-notice { display: flex; align-items: center; gap: 12px; background: var(--go-tint); border-radius: var(--go-radius); padding: 12px 16px; font-size: 14px; } .go-notice > i { font-size: 20px; color: var(--go-petrol-dark); } /* Quantity stepper */ .quantity { display: inline-flex; align-items: center; height: 52px; border: 1px solid var(--go-line-input); border-radius: var(--go-radius); background: #fff; box-sizing: border-box; } .quantity input.qty { width: 40px; height: 100%; border: 0; text-align: center; font: inherit; font-size: 16px; font-weight: 700; background: transparent; padding: 0; -moz-appearance: textfield; } .quantity input.qty::-webkit-inner-spin-button, .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .quantity .action { width: 44px; height: 100%; border: 0; background: none; cursor: pointer; color: var(--go-text); font-size: 16px; display: inline-flex; align-items: center; justify-content: center; } .quantity .action:hover { color: var(--go-petrol-dark); } .woocommerce-cart-form .quantity { height: 40px; } .woocommerce-cart-form .quantity .action { width: 36px; } /* ---------- Cart ---------- */ .go-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; } .go-cart-title { font-size: 36px; } .go-cart-title span { font-size: 18px; color: var(--go-text-3); font-weight: 500; letter-spacing: 0; } .go-panel { background: #fff; border: 1px solid var(--go-line); border-radius: var(--go-radius); } .go-panel--pad { padding: 24px; } .go-cart-items table.shop_table { border: 1px solid var(--go-line); border-radius: var(--go-radius); background: #fff; border-collapse: separate; border-spacing: 0; width: 100%; margin: 0; } .go-cart-items table.shop_table th { font-size: 13px; font-weight: 700; color: var(--go-text-2); padding: 12px 20px; border-bottom: 1px solid var(--go-line); text-align: left; background: none; text-transform: none; letter-spacing: 0; } .go-cart-items table.shop_table td { padding: 20px; border-top: 0; border-bottom: 1px solid var(--go-line-soft); vertical-align: middle; font-size: 15px; } .go-cart-items table.shop_table tr:last-child td { border-bottom: 0; } /* Square "studio" thumbnail like the product cards – the photos are not square */ .go-cart-items .product-thumbnail a { width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; padding: 8px; box-sizing: border-box; border-radius: var(--go-radius); background: var(--go-studio); } .go-cart-items .product-thumbnail img { width: 100%; height: 100%; object-fit: contain; border: 0; border-radius: 0; background: none; mix-blend-mode: multiply; } .go-cart-items .product-name a { font-weight: 600; font-size: 16px; color: var(--go-text); } .go-cart-items .product-subtotal, .go-cart-items .product-subtotal .amount { font-weight: 700; font-size: 17px; text-align: right; } .go-cart-items a.remove { font-size: 0 !important; color: var(--go-text-2) !important; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--go-radius); background: none !important; } .go-cart-items a.remove::before { content: '\e18e'; font-family: 'lucide'; font-size: 18px; } .go-cart-items a.remove:hover { color: var(--go-sale) !important; background: #fbe9e3 !important; } .go-cart-items td.actions { padding: 12px 20px; } .go-cart-items td.actions .coupon { display: none; } .go-cart-items td.actions button[name="update_cart"] { display: none; } .go-summary { display: flex; flex-direction: column; gap: 14px; } .go-summary h2 { font-size: 20px; } .go-summary .cart_totals { width: 100% !important; float: none !important; } .go-summary .cart_totals > h2 { display: none; } .go-summary .cart_totals table { width: 100%; border: 0; margin: 0 0 14px; border-collapse: collapse; } .go-summary .cart_totals th, .go-summary .cart_totals td { padding: 7px 0; border: 0; font-size: 15px; font-weight: 400; text-align: left; background: none; } .go-summary .cart_totals td { text-align: right; } .go-summary .cart_totals .order-total th, .go-summary .cart_totals .order-total td { border-top: 1px solid var(--go-line); padding-top: 14px; font-size: 17px; font-weight: 700; } .go-summary .cart_totals .order-total .amount { font-size: 26px; } .go-summary .cart_totals .includes_tax { display: block; font-size: 13px; color: var(--go-text-2); font-weight: 400; } .go-summary .woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; } .go-summary .woocommerce-shipping-destination, .go-summary .shipping-calculator-button { font-size: 12px; color: var(--go-text-2); } .go-summary .wc-proceed-to-checkout { padding: 0; } .go-summary .checkout-button { width: 100%; height: 52px !important; font-size: 16px !important; margin: 0 !important; } .go-summary .checkout-button::after { content: '\e04d'; font-family: 'lucide'; font-weight: 400; } .go-coupon form, .go-coupon .coupon { display: flex; gap: 8px; } .go-coupon input { height: 44px !important; } .go-coupon button { height: 44px !important; background: #fff !important; color: var(--go-marin) !important; border: 2px solid var(--go-marin) !important; white-space: nowrap; } @media (max-width: 991px) { .go-cart-layout { grid-template-columns: 1fr; } } @media (max-width: 767px) { .go-cart-title { font-size: 26px; } .go-cart-items table.shop_table_responsive tr { display: grid; grid-template-columns: 72px 1fr auto; gap: 4px 12px; padding: 12px; border-bottom: 1px solid var(--go-line-soft); } .go-cart-items table.shop_table_responsive tr td { display: block; padding: 0; border: 0; text-align: left !important; } .go-cart-items table.shop_table_responsive tr td::before { display: none; } .go-cart-items .product-thumbnail { display: block !important; grid-row: 1 / span 3; } .go-cart-items .product-thumbnail img { width: 100%; } .go-cart-items .product-thumbnail a { width: 72px; height: 72px; padding: 6px; } .go-cart-items .product-remove { grid-column: 3; grid-row: 1; } .go-cart-items .product-name { grid-column: 2; grid-row: 1; font-size: 14px; } .go-cart-items .product-price { display: none !important; } .go-cart-items .product-quantity { grid-column: 2; } .go-cart-items .product-subtotal { grid-column: 3; align-self: center; } } /* ---------- Checkout ---------- */ .go-checkout-header { background: #fff; border-bottom: 1px solid var(--go-line); } .go-checkout-header > .go-container { max-width: 1280px; height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .go-checkout-header .go-logo img, .go-checkout-header .go-logo { height: 28px; } .go-checkout-header__secure { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--go-text-2); } .go-checkout-header__secure i { color: var(--go-success-text); } .go-checkout-wrap { max-width: 1280px !important; padding-block: 32px 80px; } .go-checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; } .go-step { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: #fff; border: 1px solid var(--go-line); border-radius: var(--go-radius); } .go-step__head { display: flex; align-items: center; gap: 12px; } .go-step__num { width: 28px; height: 28px; border-radius: 50%; background: var(--go-marin); color: #fff; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; } .go-step__head h2 { font-size: 20px; } .go-step .woocommerce-billing-fields h3, .go-step .woocommerce-additional-fields h3 { font-size: 16px; font-weight: 700; margin-bottom: 12px; } .go-step .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .go-step .woocommerce-billing-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; } .go-step .form-row-first, .go-step .form-row-last { width: auto !important; float: none !important; } .go-checkout-grid .woocommerce-checkout-review-order-table { width: 100%; border: 0; border-collapse: collapse; margin: 0; } .go-checkout-grid .woocommerce-checkout-review-order-table th, .go-checkout-grid .woocommerce-checkout-review-order-table td { padding: 8px 0; border: 0; border-bottom: 1px solid var(--go-line-soft); font-size: 14px; background: none; text-align: left; } .go-checkout-grid .woocommerce-checkout-review-order-table td:last-child, .go-checkout-grid .woocommerce-checkout-review-order-table th:last-child { text-align: right; } .go-checkout-grid .woocommerce-checkout-review-order-table thead { display: none; } .go-checkout-grid .woocommerce-checkout-review-order-table .order-total th, .go-checkout-grid .woocommerce-checkout-review-order-table .order-total td { font-size: 17px; font-weight: 700; border-bottom: 0; padding-top: 14px; } .go-checkout-grid .woocommerce-checkout-review-order-table .order-total .amount { font-size: 26px; } .go-checkout-grid #shipping_method { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; } .go-checkout-grid .wc_payment_methods { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .go-checkout-grid .wc_payment_method { border: 1px solid var(--go-line); border-radius: var(--go-radius); padding: 14px 16px; } .go-checkout-grid .wc_payment_method:has(input:checked) { border: 2px solid var(--go-petrol-dark); background: var(--go-tint-2); } .go-checkout-grid .payment_box { font-size: 13px; color: var(--go-text-2); margin-top: 8px; background: none !important; padding: 0 !important; } .go-checkout-grid .payment_box::before { display: none; } .go-checkout-grid #place_order { width: 100%; height: 52px; font-size: 16px; } .go-checkout-grid .woocommerce-privacy-policy-text { font-size: 13px; color: var(--go-text-2); margin-bottom: 12px; } .go-secure-note { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--go-text-2); } .go-secure-note i { color: var(--go-success-text); } @media (max-width: 991px) { .go-checkout-grid { grid-template-columns: 1fr; } .go-step .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; } } /* ---------- Thank you ---------- */ .go-thanks { max-width: 880px !important; padding-block: 56px 80px; display: flex; flex-direction: column; gap: 24px; } .go-thanks__check { width: 56px; height: 56px; border-radius: 50%; background: var(--go-success); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 30px; } .go-thanks .woocommerce-order { display: flex; flex-direction: column; gap: 24px; } .go-thanks .woocommerce-thankyou-order-received { font-size: 17px; color: var(--go-text-2); background: none; border: 0; padding: 0; margin: 0; } .go-thanks .woocommerce-order-overview { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); background: #fff; border: 1px solid var(--go-line); border-radius: var(--go-radius); } .go-thanks .woocommerce-order-overview li { padding: 20px; border-right: 1px solid var(--go-line); font-size: 14px; color: var(--go-text-2); display: flex; flex-direction: column; gap: 6px; margin: 0; } .go-thanks .woocommerce-order-overview li:last-child { border-right: 0; } .go-thanks .woocommerce-order-overview li strong { color: var(--go-text); font-size: 15px; } .go-thanks .woocommerce-order-details, .go-thanks .woocommerce-customer-details { background: #fff; border: 1px solid var(--go-line); border-radius: var(--go-radius); padding: 20px; } .go-thanks h2 { font-size: 20px; margin-bottom: 12px; } .go-thanks table.shop_table { width: 100%; border: 0; border-collapse: collapse; } .go-thanks table.shop_table th, .go-thanks table.shop_table td { padding: 10px 0; border: 0; border-bottom: 1px solid var(--go-line-soft); font-size: 15px; text-align: left; background: none; } .go-thanks address { font-style: normal; line-height: 1.6; border: 0; padding: 0; } .go-thanks .woocommerce-columns--addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .go-thanks .woocommerce-column { width: auto !important; float: none !important; } /* ---------- Login / account ---------- */ .go-login-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1200px !important; padding-block: 56px 88px; } .go-login-card { padding: 32px; display: flex; flex-direction: column; gap: 16px; } .go-login-card h1, .go-login-card h2 { font-size: 28px; } .go-login-card .woocommerce-form-login, .go-login-card .woocommerce-form-register { border: 0 !important; padding: 0 !important; margin: 0 !important; } .go-login-card .woocommerce-form-login__rememberme { display: inline-flex !important; align-items: center; gap: 8px; font-weight: 400 !important; font-size: 14px !important; } .go-login-card .woocommerce-form-login__submit, .go-login-card .woocommerce-form-register__submit { width: 100%; height: 52px !important; font-size: 16px !important; margin-top: 8px !important; float: none !important; } .go-login-card .lost_password { font-size: 14px; font-weight: 700; margin: 12px 0 0; } .go-login-card--dark { background: var(--go-marin); color: #fff; border-radius: var(--go-radius); } .go-login-card--dark p { color: var(--go-on-dark); line-height: 1.55; font-size: 15px; } .go-login-card--dark label { color: #fff !important; } .go-login-card--dark .woocommerce-privacy-policy-text p { font-size: 13px; color: var(--go-on-dark-2); } .go-login-card--dark .woocommerce-privacy-policy-text a { color: var(--go-turkos); } .go-login-card--dark .woocommerce-form-register__submit { background: var(--go-turkos) !important; color: var(--go-marin) !important; } .go-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; } .go-checklist li { display: flex; gap: 10px; align-items: center; } .go-checklist li::before { content: '\e070'; font-family: 'lucide'; color: var(--go-turkos); } @media (max-width: 767px) { .go-login-grid { grid-template-columns: 1fr; padding-block: 24px 40px; } .go-login-card { padding: 20px; } } /* ---------- Content pages ---------- */ .go-page-hero > .go-container { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding-block: 72px; } .go-page-hero h1 { font-size: 48px; line-height: 1.06; letter-spacing: -.015em; color: #fff; text-wrap: pretty; } .go-page-hero__media { aspect-ratio: 4 / 3; border-radius: var(--go-radius); overflow: hidden; } .go-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-block: 64px; } .go-value { border-top: 2px solid var(--go-marin); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; } .go-value > i { font-size: 26px; color: var(--go-petrol-dark); } .go-value h2 { font-size: 20px; } .go-value p { font-size: 15px; line-height: 1.6; color: var(--go-text-2); } @media (max-width: 991px) { .go-page-hero > .go-container { grid-template-columns: 1fr; padding-block: 40px; gap: 32px; } .go-page-hero h1 { font-size: 34px; } .go-values { grid-template-columns: 1fr; padding-block: 32px; } } .go-contact { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; padding-block: 48px 80px; } .go-contact-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .go-contact-item { display: flex; gap: 14px; align-items: center; padding: 20px; background: #fff; border: 1px solid var(--go-line); border-radius: var(--go-radius); color: var(--go-text); transition: border-color .15s, box-shadow .15s; } .go-contact-item:hover { border-color: var(--go-petrol); box-shadow: var(--go-shadow-hover); color: var(--go-text); } .go-contact-item > i { flex: none; width: 44px; height: 44px; border-radius: var(--go-radius); background: var(--go-tint); color: var(--go-petrol-dark); display: flex; align-items: center; justify-content: center; font-size: 20px; } .go-help__title { font-size: 20px; margin: 16px 0 12px; } .go-help { background: #fff; border: 1px solid var(--go-line); border-radius: var(--go-radius); } .go-help__item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--go-line-soft); color: var(--go-text); } .go-help__item:last-child { border-bottom: 0; } .go-help__item > i:first-child { font-size: 18px; color: var(--go-petrol-dark); width: 20px; } .go-help__item > span { flex: 1; display: flex; flex-direction: column; } .go-help__item strong { font-size: 15px; } .go-help__item span span { font-size: 13px; color: var(--go-text-2); } .go-help__go { color: var(--go-text-3); transition: transform .15s, color .15s; } .go-help__item:hover { color: var(--go-text); background: var(--go-tint-2); } .go-help__item:hover .go-help__go { color: var(--go-petrol-dark); transform: translateX(3px); } @media (max-width: 767px) { .go-contact-list { grid-template-columns: 1fr; } } .go-contact-item strong { display: block; font-size: 17px; } .go-contact-item span { font-size: 14px; color: var(--go-text-2); } .go-map { aspect-ratio: 16 / 9; border-radius: var(--go-radius); overflow: hidden; } .go-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.3); } .go-form-card { padding: 32px; display: flex; flex-direction: column; gap: 16px; } .go-form-card h2 { font-size: 24px; } .go-form-card .brxe-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .go-form-card .brxe-form .form-group { width: 100% !important; padding: 0 !important; grid-column: 1 / -1; margin: 0; } .go-form-card .brxe-form .form-group.go-half { grid-column: auto; } .go-form-card .brxe-form .form-group label { font-size: 13px; font-weight: 600; margin-bottom: 6px; display: block; } .go-form-card .brxe-form .submit-button-wrapper { grid-column: 1 / -1; width: 100%; margin: 0; } .go-form-card .brxe-form button[type="submit"] { width: 100%; height: 52px; font-size: 16px; } @media (max-width: 991px) { .go-contact { grid-template-columns: 1fr; padding-block: 20px 32px; gap: 20px; } .go-form-card { padding: 16px; } .go-form-card .brxe-form { grid-template-columns: 1fr; } } .go-service-head > .go-container { display: flex; flex-direction: column; gap: 18px; padding-block: 48px; } .go-service-head .go-search { max-width: 640px; height: 52px; } .go-topic { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--go-line); border-radius: var(--go-radius); color: var(--go-text); background: #fff; height: 100%; box-sizing: border-box; } .go-topic:hover { border-color: var(--go-petrol); color: var(--go-text); } .go-topic > i { font-size: 24px; color: var(--go-petrol-dark); } .go-topic strong { font-size: 16px; font-weight: 600; } .go-topic span { font-size: 13px; color: var(--go-text-2); } .go-service-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; padding-block: 48px 72px; } .go-faq { background: #fff; border: 1px solid var(--go-line); border-radius: var(--go-radius); } .go-faq details { border-bottom: 1px solid var(--go-line-soft); } .go-faq details:last-child { border-bottom: 0; } .go-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 24px; font-size: 17px; font-weight: 600; } .go-faq summary::-webkit-details-marker { display: none; } .go-faq summary::after { content: '\e141'; font-family: 'lucide'; font-weight: 400; font-size: 18px; } .go-faq details[open] summary::after { content: '\e120'; } .go-faq details > div { padding: 0 24px 20px; font-size: 15px; line-height: 1.6; color: var(--go-text-2); max-width: 680px; } .go-help-card { padding: 24px; display: flex; flex-direction: column; gap: 12px; border-radius: var(--go-radius); } .go-help-card .go-promo__title { font-size: 20px; color: #fff; } .go-help-card p { color: var(--go-on-dark); font-size: 15px; } .go-help-card a:not(.go-btn) { display: flex; gap: 10px; align-items: center; font-size: 16px; font-weight: 700; color: #fff; } .go-help-card a:not(.go-btn) i { color: var(--go-turkos); } .go-quicklinks { padding: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; } .go-quicklinks a { font-weight: 600; } @media (max-width: 991px) { .go-service-body { grid-template-columns: 1fr; padding-block: 24px 40px; gap: 24px; } .go-faq summary { padding: 16px; font-size: 15px; } .go-faq details > div { padding: 0 16px 16px; } } .go-info { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; padding-block: 32px 80px; } .go-info-nav { display: flex; flex-direction: column; font-size: 15px; font-weight: 600; border-top: 1px solid var(--go-line); } .go-info-nav a { padding: 12px 0; border-bottom: 1px solid var(--go-line); color: var(--go-text); } .go-info-nav a:hover { color: var(--go-petrol-dark); } .go-info-nav a.is-active, .go-info-nav a[aria-current="page"] { padding-left: 12px; border-left: 3px solid var(--go-petrol-dark); color: var(--go-petrol-dark); } .go-article { max-width: 760px; display: flex; flex-direction: column; gap: 20px; font-size: 16px; line-height: 1.65; } .go-article h1 { line-height: 1.1; } .go-article h2 { font-size: 24px; margin-top: 12px; } .go-article p { margin: 0; } .go-article .go-lead { font-size: 18px; } .go-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--go-line); border-radius: var(--go-radius); font-size: 15px; } .go-table th { text-align: left; font-size: 13px; font-weight: 700; color: var(--go-text-2); padding: 12px 18px; border-bottom: 1px solid var(--go-line); } .go-table td { padding: 14px 18px; border-bottom: 1px solid var(--go-line-soft); } .go-table tr:last-child td { border-bottom: 0; } .go-table td:first-child { font-weight: 600; } .go-callout { background: var(--go-tint); border-radius: var(--go-radius); padding: 16px 18px; display: flex; gap: 12px; font-size: 15px; color: var(--go-petrol-darker); } .go-callout > i { font-size: 20px; color: var(--go-petrol-dark); flex: none; margin-top: 2px; } @media (max-width: 991px) { .go-info { grid-template-columns: 1fr; gap: 24px; padding-block: 20px 40px; } .go-info-nav { flex-direction: row; overflow-x: auto; gap: 16px; border: 0; border-bottom: 1px solid var(--go-line); } .go-info-nav a { border: 0; white-space: nowrap; } .go-info-nav a.is-active, .go-info-nav a[aria-current="page"] { border-left: 0; padding-left: 0; border-bottom: 2px solid var(--go-petrol-dark); } } /* Bricks builder canvas: keep loops readable */ .bricks-is-frontend .brx-query-trail { display: none; } /* Loop wrappers: let the card itself be the grid item */ .go-loop-item, .go-loop-item > .brxe-template { display: contents; } .go-grid-5 > .brxe-template, .go-grid-4 > .brxe-template { display: contents; } .go-paylogos--light { justify-content: center; font-size: 12px; color: var(--go-text-2); } .go-paylogos--light span { border-color: var(--go-line); } .go-link--back { flex-direction: row-reverse; } .go-link--back i { transform: rotate(180deg); } /* Bricks containers default to a column layout – row-based layouts need an explicit direction */ .go-topbar .go-container, .go-header > .go-container, .go-catnav > .go-container, .go-checkout-header > .go-container, .go-footer__bottom > .go-container, .go-head-row, .go-row, .go-actions, .go-action, .go-cart-btn, .go-catnav__all, .go-card__meta, .go-card__foot, .go-buybox__meta, .go-usp, .go-contact-item, .go-archive-head__row, .go-toolbar, .go-toolbar__end, .go-tabs-head, .go-step__head, .go-advice-bar, .go-link, .go-btn, .go-hero__actions, .go-search, .go-chip, .go-filters__head { flex-direction: row; } .go-container.go-hero-grid, .go-container.go-archive-body, .go-container.go-product-grid, .go-container.go-product-info, .go-container.go-cart-layout, .go-container.go-contact, .go-container.go-service-body, .go-container.go-info, .go-container.go-values, .go-container.go-login-grid { display: grid; } .go-container.go-hero-grid { padding-inline: var(--go-gutter); } .brxe-container.go-container { align-items: stretch; } .go-header .go-logo, .go-checkout-header .go-logo { flex: none; } .go-header .go-logo img, .go-checkout-header .go-logo img { height: 30px; width: auto; } .go-footer__logo .brxe-image, .go-footer__logo img { height: 28px; width: auto; display: block; } .go-topbar .go-container, .go-header > .go-container, .go-catnav > .go-container, .go-checkout-header > .go-container, .go-footer__bottom > .go-container, .go-actions, .go-row, .go-card__foot, .go-toolbar, .go-step__head, .go-advice-bar { align-items: center; } .go-usps, .go-footer__cols, .go-footer__bottom, .go-section > .brxe-div { width: 100%; } .go-hero__actions .go-btn { flex: none; } /* Cart table & totals polish */ .go-cart-layout > * { min-width: 0; } .go-cart-items table.shop_table { table-layout: auto; } .go-cart-items .product-price { display: none; } .go-cart-items .product-name { width: 100%; } .go-cart-items th.product-remove, .go-cart-items td.product-remove { width: 40px; padding-right: 0; } .go-cart-items td.product-thumbnail { width: 88px; } .go-cart-items .product-subtotal { white-space: nowrap; } .go-summary .includes_tax, .go-summary .includes_tax .amount, .go-checkout-grid .includes_tax, .go-checkout-grid .includes_tax .amount { display: block; font-size: 13px !important; font-weight: 400; color: var(--go-text-2); } .go-summary .woocommerce-shipping-methods li, .go-checkout-grid #shipping_method li { font-size: 14px; margin-bottom: 4px; } .go-summary .shipping td, .go-summary .shipping th { vertical-align: top; } /* Bricks form */ .brxe-form label { text-transform: none; letter-spacing: 0; } .brxe-form button[type="submit"], .brxe-form .bricks-button { font-family: var(--go-font); } /* WooCommerce page shells (cart, checkout, account) */ .go-wc-shell > .brxe-shortcode { width: 100%; } .go-wc-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; } .go-wc-account .woocommerce-MyAccount-navigation { background: #fff; border: 1px solid var(--go-line); border-radius: var(--go-radius); width: auto !important; float: none !important; } .go-wc-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; } .go-wc-account .woocommerce-MyAccount-navigation li { margin: 0; } .go-wc-account .woocommerce-MyAccount-navigation a { display: flex; align-items: center; gap: 12px; padding: 14px 20px 14px 17px; font-size: 15px; font-weight: 600; color: var(--go-text); border-left: 3px solid transparent; } .go-wc-account .woocommerce-MyAccount-navigation a::before { font-family: 'lucide'; font-size: 18px; color: var(--go-petrol-dark); font-weight: 400; } .go-wc-account .woocommerce-MyAccount-navigation-link--dashboard a::before { content: '\e1c1'; } .go-wc-account .woocommerce-MyAccount-navigation-link--orders a::before { content: '\e12d'; } .go-wc-account .woocommerce-MyAccount-navigation-link--edit-address a::before { content: '\e115'; } .go-wc-account .woocommerce-MyAccount-navigation-link--edit-account a::before { content: '\e346'; } .go-wc-account .woocommerce-MyAccount-navigation-link--customer-logout a::before { content: '\e112'; } .go-wc-account .woocommerce-MyAccount-navigation a:hover { background: var(--go-bg); } .go-wc-account .woocommerce-MyAccount-navigation .is-active a { border-left-color: var(--go-petrol-dark); background: var(--go-tint); } .go-wc-account .woocommerce-MyAccount-content { width: auto !important; float: none !important; min-width: 0; } .go-wc-account .woocommerce-MyAccount-content h1 { font-size: 36px; margin-bottom: 24px; } .go-wc-account table.shop_table { width: 100%; background: #fff; border: 1px solid var(--go-line); border-radius: var(--go-radius); border-collapse: separate; border-spacing: 0; } .go-wc-account table th { font-size: 13px; font-weight: 700; color: var(--go-text-2); padding: 12px 20px; border-bottom: 1px solid var(--go-line); text-align: left; } .go-wc-account table td { padding: 14px 20px; border-bottom: 1px solid var(--go-line-soft); font-size: 15px; } .go-wc-account .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .go-wc-account .woocommerce-Address { background: #fff; border: 1px solid var(--go-line); border-radius: var(--go-radius); padding: 20px; width: auto !important; float: none !important; } .go-wc-account .go-login-grid { padding-block: 24px 56px; } .go-wc-account .woocommerce:not(:has(> .woocommerce-MyAccount-navigation)) > .go-login-grid, .go-wc-account .go-login-grid { margin-inline: auto; } @media (max-width: 991px) { .go-wc-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; } .go-wc-account .woocommerce-Addresses { grid-template-columns: 1fr; } } .go-wc-account .woocommerce-MyAccount-navigation li { padding: 0 !important; border: 0 !important; height: auto !important; } .go-summary .includes_tax, .go-checkout-grid .includes_tax { display: block; } .go-summary .includes_tax .amount, .go-checkout-grid .includes_tax .amount { display: inline !important; } .go-summary .shipping td { text-align: left; } .go-summary .woocommerce-shipping-methods label { color: var(--go-text); } .go-toolbar > .brxe-text-basic:first-child { display: contents; } .go-wc-account .woocommerce-MyAccount-navigation a { line-height: 1.4; } /* Account overview cards (Konto – Översikt) */ .go-stat { padding: 20px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .go-stat__label { font-size: 13px; color: var(--go-text-2); } .go-stat__value { font-size: 24px; font-weight: 600; line-height: 1.25; } .go-stat .go-link { margin-top: 4px; } .go-wc-account .woocommerce-MyAccount-content > .brxe-div.go-stack { gap: 24px; } /* Wide screens: one more product per row in archives */ @media (min-width: 1600px) { .go-archive-body .go-grid-4 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* Product card: WooCommerce AJAX add-to-cart states (icon only, never text) */ .go-card__cart.loading i { animation: go-spin .8s linear infinite; } .go-card__cart.loading i::before { content: '\e10e'; } .go-card__cart.added i::before { content: '\e070'; } .go-card__cart.added { background: var(--go-petrol-darker); } @keyframes go-spin { to { transform: rotate(360deg); } } /* Category nav: items that don't fit wrap out of view instead of being cut mid-word */ .go-catnav .bricks-nav-menu { flex-wrap: wrap; height: 52px; column-gap: 28px; row-gap: 0; } /* Category nav drop-downs (sub categories added in inc/helpers.php). The panel is positioned against .go-catnav, outside the clipping menu list; gastro.js sets its left edge under the clicked category. */ .go-catnav > .go-container, .go-catnav .brxe-nav-menu, .go-catnav .bricks-nav-menu, .go-catnav .bricks-nav-menu > li { position: static; } .go-catnav .bricks-nav-menu .brx-submenu-toggle { display: flex; align-items: center; gap: 4px; height: 52px; } .go-catnav .bricks-nav-menu .brx-submenu-toggle > a { color: var(--go-text); font-size: 14px; font-weight: 600; white-space: nowrap; line-height: 52px; padding: 0; } .go-catnav .bricks-nav-menu .brx-submenu-toggle button { padding: 0; margin: 0; color: var(--go-text-3); line-height: 0; } .go-catnav .bricks-nav-menu .brx-submenu-toggle svg { width: 10px; height: 10px; transition: transform .15s; } .go-catnav .bricks-nav-menu > li .brx-submenu-toggle:hover > a, .go-catnav .bricks-nav-menu > li.go-open .brx-submenu-toggle > a, .go-catnav .bricks-nav-menu > li.current-menu-item .brx-submenu-toggle > a, .go-catnav .bricks-nav-menu > li.current-menu-ancestor .brx-submenu-toggle > a { color: var(--go-petrol-dark); } .go-catnav .bricks-nav-menu > li.go-open .brx-submenu-toggle svg { transform: rotate(180deg); } .go-catnav .bricks-nav-menu > li > .sub-menu { position: absolute; left: 0; right: auto; top: calc(100% - 1px); z-index: 60; display: block; width: max-content; min-width: 240px; margin: 0; list-style: none; line-height: 1.35; /* one list, sub categories indented 28px under the heading text like .go-mega ul */ padding: 22px 32px 20px 52px; background: var(--go-surface); border: 1px solid var(--go-line); border-radius: var(--go-radius); box-shadow: var(--go-shadow-pop); visibility: hidden; opacity: 0; transform: none; transition: opacity .12s, visibility 0s .12s; } /* Opened by click only (gastro.js sets .go-open). Bricks' own submenu rules (display:none!important until it has positioned the menu, pointer-events:none without its .open) would otherwise hide the panel or make its links dead. */ .go-catnav .bricks-nav-menu > li > .sub-menu { display: none !important; } .go-catnav .bricks-nav-menu > li.go-open > .sub-menu { display: block !important; pointer-events: auto; visibility: visible; opacity: 1; transition: none; } .go-catnav .bricks-nav-menu .sub-menu li { margin: 0; min-width: 0; } .go-catnav .bricks-nav-menu .sub-menu a { display: block; padding: 4px 0; color: var(--go-text-2); font-size: 14px; font-weight: 400; line-height: 1.35; white-space: normal; } .go-catnav .bricks-nav-menu .sub-menu a:hover, .go-catnav .bricks-nav-menu .sub-menu .current-menu-item > a { color: var(--go-petrol-dark); } .go-catnav .bricks-nav-menu .sub-menu .go-sub__head { margin: 0 0 10px -28px; } .go-catnav .bricks-nav-menu .sub-menu .go-sub__head > a { display: inline-flex; align-items: center; gap: 10px; padding: 0; color: var(--go-text); font-size: 15px; font-weight: 700; } .go-catnav .bricks-nav-menu .sub-menu .go-sub__head i { font-size: 18px; color: var(--go-petrol-dark); } .go-catnav .bricks-nav-menu .sub-menu .go-sub__head > a:hover { color: var(--go-petrol-dark); } .go-catnav .bricks-nav-menu .sub-menu .go-sub__all { margin-top: 8px; } .go-catnav .bricks-nav-menu .sub-menu .go-sub__all > a { display: inline-block; color: var(--go-petrol-dark); font-size: 13px; font-weight: 600; } /* Start page photos */ .go-hero__media .brxe-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% center; } .go-promo__img, .go-promo > .brxe-image { width: 100%; height: 100%; object-fit: contain; padding: 16px 12px; box-sizing: border-box; background: #fff; display: block; } /* WooCommerce notices: plain text links (Bricks gives them a green background) and no focus ring when WooCommerce moves focus to the notice for screen readers */ .woocommerce-message a:not(.button), .woocommerce-info a:not(.button), .woocommerce-error a:not(.button) { background: none !important; padding: 0 !important; color: var(--go-petrol-dark) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .woocommerce-message a:not(.button):hover, .woocommerce-info a:not(.button):hover { color: var(--go-petrol-darker) !important; } .woocommerce-message[tabindex="-1"]:focus, .woocommerce-info[tabindex="-1"]:focus, .woocommerce-error[tabindex="-1"]:focus, .woocommerce-notices-wrapper:focus, [role="alert"]:focus { outline: none; } /* ---------- Mobile menu (Bricks nav-menu, mobile mode) ---------- */ .go-burger .bricks-mobile-menu-wrapper { background: #fff; width: min(86vw, 340px); padding-top: 60px; box-shadow: var(--go-shadow-pop); } .go-burger .bricks-mobile-menu-wrapper::before { background: #fff !important; } .go-burger .bricks-mobile-menu-wrapper::after { content: 'Kategorier'; position: absolute; top: 0; left: 0; right: 0; height: 60px; display: flex; align-items: center; padding-left: 56px; font-family: var(--go-font); font-size: 18px; font-weight: 600; color: var(--go-text); border-bottom: 1px solid var(--go-line); box-sizing: border-box; } .go-burger .bricks-mobile-menu { margin: 0; padding: 0; list-style: none; } .go-burger .bricks-mobile-menu > li { border: 0 !important; background: none !important; } .go-burger .bricks-mobile-menu > li > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; line-height: 1.4 !important; padding: 15px 20px !important; font-size: 16px; font-weight: 600; color: var(--go-text) !important; border-bottom: 1px solid var(--go-line-soft); } .go-burger .bricks-mobile-menu > li > a::after { content: '\e073'; font-family: 'lucide'; font-weight: 400; color: var(--go-text-3); font-size: 18px; } /* Categories with sub categories: Bricks wraps the link and a toggle button in .brx-submenu-toggle */ .go-burger .bricks-mobile-menu > li > .brx-submenu-toggle { display: flex; align-items: stretch; border-bottom: 1px solid var(--go-line-soft); } .go-burger .bricks-mobile-menu > li > .brx-submenu-toggle > a { flex: 1; line-height: 1.4 !important; padding: 15px 20px !important; font-size: 16px; font-weight: 600; color: var(--go-text) !important; } .go-burger .bricks-mobile-menu > li > .brx-submenu-toggle > button { flex: none; width: 56px; padding: 0; margin: 0; border: 0; border-left: 1px solid var(--go-line-soft); background: none; color: var(--go-text-2); display: flex; align-items: center; justify-content: center; cursor: pointer; } .go-burger .bricks-mobile-menu > li > .brx-submenu-toggle > button svg { width: 14px; height: 14px; transition: transform .2s; } .go-burger .bricks-mobile-menu > li > .brx-submenu-toggle > button[aria-expanded="true"] svg { transform: rotate(180deg); } .go-burger .bricks-mobile-menu > li.open > .brx-submenu-toggle, .go-burger .bricks-mobile-menu > li > .brx-submenu-toggle:has(button[aria-expanded="true"]) { background: var(--go-tint-2); } .go-burger .bricks-mobile-menu .sub-menu { margin: 0; padding: 4px 0 8px; list-style: none; background: var(--go-tint-2); border-bottom: 1px solid var(--go-line-soft); } .go-burger .bricks-mobile-menu .sub-menu a { display: block; padding: 9px 20px 9px 32px !important; font-size: 15px; font-weight: 400; line-height: 1.35 !important; color: var(--go-text-2) !important; } .go-burger .bricks-mobile-menu .sub-menu a:hover { color: var(--go-petrol-dark) !important; } .go-burger .bricks-mobile-menu > li > a:hover, .go-burger .bricks-mobile-menu > li.current-menu-item > a { background: var(--go-tint); color: var(--go-text) !important; } .go-burger.show-mobile-menu .bricks-mobile-menu-toggle { position: fixed; top: 18px; left: 18px; z-index: 1002; color: var(--go-text) !important; } .go-burger .bricks-mobile-menu-toggle .bar-top, .go-burger .bricks-mobile-menu-toggle .bar-center, .go-burger .bricks-mobile-menu-toggle .bar-bottom { background-color: currentColor; } .go-burger .bricks-mobile-menu-overlay { background: color-mix(in srgb, var(--go-marin) 45%, transparent) !important; } /* Logged-in admins: keep the mobile menu below the WordPress admin bar */ body.admin-bar .go-burger .bricks-mobile-menu-wrapper { top: 32px; height: calc(100% - 32px); } body.admin-bar .go-burger.show-mobile-menu .bricks-mobile-menu-toggle { top: 50px; } @media (max-width: 782px) { body.admin-bar .go-burger .bricks-mobile-menu-wrapper { top: 46px; height: calc(100% - 46px); } body.admin-bar .go-burger.show-mobile-menu .bricks-mobile-menu-toggle { top: 64px; } } /* ---------- Mobile fixes ---------- */ @media (max-width: 767px) { /* Footer: two columns instead of one long stack */ .go-usps > .go-container { grid-template-columns: 1fr 1fr; gap: 16px; padding-block: 20px; } .go-usp { align-items: flex-start; font-size: 13px; } .go-usp > i { font-size: 20px; margin-top: 2px; } .go-footer__cols > .go-container { grid-template-columns: 1fr 1fr; gap: 28px 16px; padding-block: 32px; } .go-footer__about { grid-column: 1 / -1; } .go-footer__col { line-height: 1.9; } /* Cart: hide WooCommerce's responsive "Produkt:" labels */ .go-cart-items table.shop_table_responsive tr td::before, .woocommerce-cart-form table.shop_table_responsive tr td::before { display: none !important; content: none !important; } .go-cart-items .product-name { border: 0 !important; } /* Cart row: keep inside the card – nowrap price + "(inkl. moms)" made the auto column overflow */ .go-cart-items table.shop_table_responsive tr { grid-template-columns: 72px minmax(0, 1fr) auto; } .go-cart-items .product-subtotal { white-space: normal; text-align: right !important; justify-self: end; } .go-cart-items .product-subtotal .amount { white-space: nowrap; } .go-cart-items .product-subtotal .tax_label { display: block; font-size: 12px; font-weight: 400; color: var(--go-text-2); white-space: nowrap; } .go-cart-items .product-name a { overflow-wrap: anywhere; } /* Checkout: total on one line */ .go-checkout-grid .woocommerce-checkout-review-order-table .order-total .amount, .go-summary .cart_totals .order-total .amount { font-size: 22px; white-space: nowrap; } /* Account: content first, navigation after */ .go-wc-account .woocommerce-MyAccount-content { order: -1; } .go-wc-account .woocommerce-MyAccount-content h1 { font-size: 28px; } /* Login: avoid double side padding */ .go-wc-account .go-login-grid { padding-inline: 0; } } @media (max-width: 360px) { .go-usps > .go-container, .go-footer__cols > .go-container { grid-template-columns: 1fr; } } /* Mobile header: keep the cart badge inside the content edge (badge sticks out 9px) */ @media (max-width: 991px) { .go-cart-btn { margin-right: 9px; } } @media (max-width: 767px) { .go-cart-items table.shop_table_responsive tr th::before, .woocommerce-cart-form table.shop_table_responsive tr th::before { display: none !important; content: none !important; } .go-cart-items table.shop_table_responsive tr th.product-name { display: block; padding: 0; border: 0; text-align: left; grid-column: 2; grid-row: 1; font-size: 14px; } } /* Cart: the actions row only holds hidden fields (update/coupon live elsewhere) – keep it in the form, hide it visually */ .go-cart-items tr:has(> td.actions) { display: none !important; } @media (max-width: 767px) { .go-cart-items .product-remove { justify-self: end; align-self: start; } .go-cart-items .product-subtotal { justify-self: end; } } /* Mobile header logo: wrapper and image share one height so it centres with the burger and icons */ @media (max-width: 991px) { .go-header .go-logo, .go-header .go-logo img { height: 24px; width: auto; } .go-header .go-logo { display: flex; align-items: center; } } /* Thank-you page: big left-aligned heading, four overview cells (payment method is listed in the details) */ .go-thanks .woocommerce-thankyou-order-received { font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -.012em; color: var(--go-text); text-align: left; } .go-thanks .woocommerce-order-overview { grid-template-columns: repeat(4, minmax(0, 1fr)); } .go-thanks .woocommerce-order-overview__payment-method { display: none !important; } .go-thanks .woocommerce-order-overview li:nth-child(4) { border-right: 0; } @media (max-width: 767px) { .go-thanks { padding-block: 32px 48px; } .go-thanks .woocommerce-thankyou-order-received { font-size: 28px; } .go-thanks .woocommerce-order-overview { grid-template-columns: 1fr 1fr; } .go-thanks .woocommerce-order-overview li:nth-child(2) { border-right: 0; } .go-thanks .woocommerce-order-overview li:nth-child(-n+2) { border-bottom: 1px solid var(--go-line); } .go-thanks .woocommerce-columns--addresses { grid-template-columns: 1fr; } .go-thanks .go-row .go-btn { flex: 1 1 100%; justify-content: center; } } .go-thanks .woocommerce-thankyou-order-received { margin-bottom: 8px !important; } .go-thanks table.shop_table th, .go-thanks table.shop_table td { background: none !important; } .go-thanks table.shop_table td:last-child, .go-thanks table.shop_table tfoot td { text-align: right; } .go-thanks table.shop_table tfoot tr:last-child th, .go-thanks table.shop_table tfoot tr:last-child td { border-bottom: 0; } .go-thanks table.shop_table tr, .go-thanks table.shop_table tfoot, .go-thanks table.shop_table tbody { background: none !important; } .go-thanks .woocommerce-thankyou-order-received { margin-bottom: 16px !important; } /* ========================================================================== Consistency pass: one heading size and one top spacing for every page Page H1: 40px / 28px mobile (heroes keep their display size) First content below the header: 32px / 20px mobile ========================================================================== */ .go-cart-title, .go-buybox__title, .go-wc-account .woocommerce-MyAccount-content h1, .go-wc-account .go-stack > h1 { font-size: 40px; line-height: 1.1; letter-spacing: -.012em; } .go-cart-title span { font-size: 18px; } .go-archive-head > .go-container { padding-top: 32px; } .go-product-top > .go-container { padding-top: 32px; } .go-contact { padding-top: 32px; } .go-service-head > .go-container { padding-top: 32px; } .go-wc-account .go-login-grid { padding-top: 0; } .go-thanks { padding-top: 32px; } #brx-content > .go-section.go-pad-t:first-child { padding-top: 32px; } /* Thank-you page: full-width container like every other page, content column kept readable */ .go-thanks { max-width: var(--go-container) !important; } .go-thanks > * { max-width: 880px; width: 100%; } /* Toolbar sort select: same 40px as the other small controls */ .go-toolbar .woocommerce-ordering, .go-toolbar .woocommerce-ordering select { height: 40px; box-sizing: border-box; } @media (max-width: 767px) { .go-cart-title, .go-buybox__title, .go-wc-account .woocommerce-MyAccount-content h1, .go-wc-account .go-stack > h1, .go-thanks .woocommerce-thankyou-order-received { font-size: 28px; } .go-pad-y { padding-top: 20px; } .go-archive-head > .go-container, .go-product-top > .go-container, .go-service-head > .go-container, .go-contact, .go-info, .go-thanks, .go-checkout-wrap, .go-wc-account .go-pad-y { padding-top: 20px; } #brx-content > .go-section.go-pad-t:first-child { padding-top: 20px; } } .go-thanks > .go-thanks__check { width: 56px; flex: none; } .go-search input[type="search"] { font-weight: 400; } /* Long legal pages (Köpvillkor): table of contents + section rhythm */ .go-toc { background: #fff; border: 1px solid var(--go-line); border-radius: var(--go-radius); padding: 20px 24px; margin-bottom: 8px; } .go-toc__title { font-size: 13px; font-weight: 700; color: var(--go-text-2); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; } .go-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; font-size: 15px; line-height: 1.9; } .go-toc li { break-inside: avoid; } .go-toc a { font-weight: 600; } .go-article .brxe-text h2 { font-size: 24px; margin: 40px 0 12px; scroll-margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--go-line); } .go-article .brxe-text h2:first-of-type { margin-top: 32px; } .go-article .brxe-text h3 { font-size: 17px; font-weight: 700; margin: 24px 0 8px; } .go-article .brxe-text p { margin: 0 0 12px; } .go-article .brxe-text ul { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; } @media (max-width: 767px) { .go-toc ol { columns: 1; } .go-article .brxe-text h2 { font-size: 20px; margin-top: 32px; } } .go-article .brxe-text ol { margin: 0 0 12px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; } .go-article .brxe-text .go-table { margin: 4px 0 16px; } .go-article .brxe-text .go-callout { margin: 8px 0 16px; } .go-article .brxe-text h2 { margin-top: 28px; padding-top: 20px; } .go-article .brxe-text > :first-child { margin-top: 0; } /* Payment: Svea logo instead of text chips (footer + cart summary) */ .go-pay-svea { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--go-on-dark-2); } .go-pay-svea img { height: 20px; width: auto; display: block; } .go-pay-svea--light { justify-content: center; width: 100%; color: var(--go-text-2); } .go-pay-svea--light img { height: 18px; } .go-article .brxe-text .go-table td { vertical-align: top; } .go-article .brxe-text .go-table td:first-child { white-space: normal; } @media (max-width: 767px) { .go-article .brxe-text .go-table { display: block; overflow-x: auto; } } /* ========================================================================== One grid for every page: content runs edge to edge of the container (40 → 1400 at 1440px) ========================================================================== */ /* Text/info pages: nav | article | help aside */ .go-container.go-info { grid-template-columns: 240px minmax(0, 1fr) 320px; gap: 48px; } .go-info .go-article { max-width: none; } .go-info-aside { position: sticky; top: 24px; align-self: start; } .go-info-aside .go-help-card { margin: 0; } @media (max-width: 1199px) { .go-container.go-info { grid-template-columns: 220px minmax(0, 1fr); } .go-info-aside { grid-column: 2; position: static; } } @media (max-width: 991px) { .go-container.go-info { grid-template-columns: 1fr; } .go-info-aside { grid-column: auto; } } /* Login: full container width, two equal columns */ .go-wc-account .go-login-grid, .go-container.go-login-grid { max-width: none !important; margin-inline: 0 !important; width: 100%; } /* Checkout: same container as every other page (header + content) */ .go-checkout-header > .go-container, .go-checkout-wrap { max-width: var(--go-container) !important; } @media (min-width: 992px) { .go-checkout-grid { grid-template-columns: minmax(0, 1fr) 420px; } } /* one column below – see the 991px rule */ /* Thank-you: details and addresses side by side across the full width */ .go-thanks > * { max-width: none; } .go-thanks .woocommerce-order { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; } .go-thanks .woocommerce-order > p, .go-thanks .woocommerce-order > ul, .go-thanks .woocommerce-order > .woocommerce-notice { grid-column: 1 / -1; } .go-thanks .woocommerce-customer-details .woocommerce-columns--addresses { grid-template-columns: 1fr; } @media (max-width: 991px) { .go-thanks .woocommerce-order { grid-template-columns: 1fr; } } .go-wc-account .go-login-grid { padding-inline: 0 !important; } /* ========================================================================== Maintenance mode template ("Underhållsläge", Bricks → Settings → Maintenance) ========================================================================== */ .go-maint { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; min-height: 100vh; min-height: 100dvh; background: var(--go-marin); } /* Bricks sections default to align-items: center */ .go-maint__panel { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 48px; padding: clamp(32px, 6vw, 88px); color: var(--go-on-dark); } .go-maint__logo { height: 30px !important; width: auto !important; max-width: none; align-self: flex-start; display: block; } /* don't let the flex column stretch it */ .go-maint__body { display: flex; flex-direction: column; gap: 20px; max-width: 520px; } .go-maint__eyebrow { font-family: var(--go-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--go-turkos); display: inline-flex; align-items: center; gap: 10px; } .go-maint__eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--go-turkos); animation: go-maint-blink 1.6s ease-in-out infinite; } @keyframes go-maint-blink { 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .go-maint__eyebrow::before { animation: none; } } .go-maint__title { color: #fff; font-size: clamp(40px, 5.2vw, 72px); line-height: 1.02; letter-spacing: -.025em; margin: 0; } .go-maint__lead { font-size: 18px; line-height: 1.6; color: var(--go-on-dark); margin: 0; } .go-maint__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; } .go-maint__btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: var(--go-radius); font-size: 16px; font-weight: 700; transition: background .15s, color .15s, border-color .15s; } .go-maint__btn i { font-size: 18px; } .go-maint__btn--solid { background: var(--go-turkos); color: var(--go-marin); } .go-maint__btn--solid:hover { background: #fff; color: var(--go-marin); } .go-maint__btn--ghost { border: 1px solid var(--go-dark-line); color: #fff; } .go-maint__btn--ghost:hover { border-color: var(--go-turkos); color: #fff; } .go-maint__foot { font-size: 13px; color: var(--go-on-dark-2); margin: 0; } .go-maint__media { position: relative; overflow: hidden; } .go-maint__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--go-marin) 0%, color-mix(in srgb, var(--go-marin) 25%, transparent) 30%, transparent 60%); pointer-events: none; } .go-maint__img, .go-maint__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 900px) { .go-maint { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .go-maint__media { order: -1; height: 38vh; min-height: 220px; } .go-maint__media::after { background: linear-gradient(0deg, var(--go-marin) 0%, transparent 55%); } .go-maint__panel { padding: 0 16px 32px; margin-top: -48px; position: relative; z-index: 1; gap: 36px; } .go-maint__lead { font-size: 16px; } .go-maint__btn { flex: 1 1 100%; justify-content: center; } }