/*
Theme Name: Görverk
Theme URI: https://github.com/patrykszczepaniks1-cloud/gorverk-child
Template: astra
Author: Görverk
Author URI: https://linmadgross.se
Description: Görverks designlager ovanpå Astra — ordentligt, sakligt B2B/grossisttema med sektionsbibliotek och WooCommerce-polering. Byt namn och färger per kund.
Version: 3.32.2
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gorverk-child
*/
/* =========================================================
Designtokens
========================================================= */
/* Färgerna är butikens egen palett — samma värden som ligger i Astras
globala palett (`astra-settings` → global-color-palette) sedan tidigare
temat. Rubin-röd (#d90f44) är utbytt mot butiksröd #d00f10, som är
logotypens röda. Ändra här, inte på enskilda ställen. */
:root {
--gv-ink: #010101; /* rubriker — Astra "Heading Color" */
--gv-text: #2b2b2b; /* brödtext — Astra "Text Color" */
--gv-muted: #6b7280; /* sekundär text (palettens #9ca3af är för ljus mot vitt) */
--gv-accent: #d00f10; /* CTA / varumärke — Astra "Theme Color" */
--gv-accent-dark: #a80c0e; /* Astra "Link Hover Color" */
--gv-accent-rgb: 208, 15, 16;
--gv-bar: #010101; /* toppbar */
--gv-snow: #f3f4f6; /* svag yta — Astra "Extra Color 1" */
--gv-soft: #f7f8fa; /* ännu svagare yta — Astra "Extra Color 3" */
--gv-white: #ffffff;
--gv-line: #e2e5e9; /* ramar — Astra "Extra Color 2" */
--gv-radius: 8px;
--gv-radius-sm: 6px;
--gv-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
/* Innehållsbredd — samma mått som butiksarkivet (shop-archive-max-width).
Sidhuvud, sektioner och kontosidor linjerar mot den här. */
--gv-wide: 1360px;
}
/* =========================================================
Bas & typografi
========================================================= */
body {
font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
color: var(--gv-text);
}
h1, h2, h3, h4 {
color: var(--gv-ink);
letter-spacing: -0.01em;
overflow-wrap: break-word;
}
.entry-content h2 {
font-size: clamp(1.5rem, 2.4vw, 1.9rem);
font-weight: 700;
}
.entry-content h3 {
font-size: 1.15rem;
font-weight: 700;
}
/* Astra versaliserar knapptext — behåll skriven form. */
.wp-block-button__link,
.ast-custom-button,
.gv-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.gv-orderform button,
.gk-sf-submit,
button[type="submit"],
input[type="submit"] {
text-transform: none !important;
letter-spacing: 0;
}
::selection {
background: rgba(var(--gv-accent-rgb), 0.14);
}
/* Sidrubriker i bläck, inte accentfärg */
.woocommerce-products-header__title.page-title,
.ast-404-layout-1 .page-title,
.entry-title,
h1.page-title {
color: var(--gv-ink) !important;
font-size: clamp(1.7rem, 3vw, 2.2rem) !important;
margin-bottom: 0.5rem;
}
/* =========================================================
Sidhuvud — en rad: logotyp, meny, varukorg, knappar
========================================================= */
/* Hela sidhuvudet klistras — på mobil följer båda raderna med.
Sticky måste sitta på masthead: de inre omslagen är exakt lika höga
som sitt föräldraelement och får då ingen sträcka att klistra längs. */
.site-header {
position: sticky !important;
top: 0;
z-index: 99;
}
.admin-bar .site-header {
top: 32px;
}
@media (max-width: 782px) {
.admin-bar .site-header {
top: 46px;
}
}
/* Diskret skugga när sidan scrollats förbi sidhuvudet */
.ast-mobile-header-wrap,
.main-header-bar-wrap {
box-shadow: 0 1px 0 rgba(1, 1, 1, 0.06);
}
.main-header-bar,
.ast-mobile-header-wrap .main-header-bar,
.ast-primary-header-bar {
border-bottom: 1px solid var(--gv-line) !important;
background: var(--gv-white) !important;
}
/* Logotypen i sidhuvudet är mörk — aldrig inverterad här. */
.site-header .custom-logo {
filter: none !important;
}
/* Menylänkar */
.main-header-menu > .menu-item > .menu-link {
font-weight: 500;
color: var(--gv-ink);
}
.main-header-menu > .menu-item > .menu-link:hover {
color: var(--gv-accent);
}
/* Knappar i sidhuvudet */
.ast-header-button-1 .ast-custom-button {
border-radius: var(--gv-radius-sm);
font-weight: 600;
padding: 0.55em 1.1em;
}
/* Varukorgen: beloppet får aldrig radbrytas */
.ast-header-woo-cart .ast-woo-header-cart-info-wrap,
.ast-header-woo-cart .ast-woo-header-cart-total,
.ast-header-woo-cart .woocommerce-Price-amount {
white-space: nowrap;
}
/* =========================================================
Mobil: andra raden — hamburgare + sök till vänster,
varukorg till höger (som i B2B-referensen).
========================================================= */
.ast-below-header-bar,
.site-below-header-wrap .ast-builder-grid-row-container-inner {
background: var(--gv-snow);
}
.ast-below-header-bar {
border-bottom: 1px solid var(--gv-line);
}
.site-below-header-wrap .site-header-section {
gap: 0.35rem;
}
/* Hamburgaren — ren ikon, vänsterkant i linje med logotypen */
.ast-below-header-bar .ast-button-wrap .menu-toggle,
.ast-below-header-bar .ast-mobile-menu-trigger-minimal,
.ast-below-header-bar .ast-mobile-menu-trigger-fill {
background: transparent !important;
border: 0 !important;
color: var(--gv-ink) !important;
padding: 0.5rem 0.6rem 0.5rem 0 !important;
}
.ast-below-header-bar .ast-mobile-menu-trigger-minimal svg,
.ast-below-header-bar .menu-toggle svg {
width: 24px;
height: 24px;
fill: var(--gv-ink) !important;
color: var(--gv-ink) !important;
opacity: 1 !important;
}
/* Sökikonen i samma rad */
.ast-below-header-bar .ast-search-menu-icon .slide-search {
right: 0;
}
.ast-below-header-bar .astra-search-icon {
color: var(--gv-ink) !important;
padding: 0.5rem 0.6rem;
}
/* Alla sidhuvudsikoner ska ha samma tyngd — inte blekta */
.site-header .astra-search-icon,
.site-header .ast-icon,
.site-header .astra-icon,
.site-header .ast-addon-cart-wrap,
.site-header .ast-mobile-menu-trigger-minimal {
color: var(--gv-ink) !important;
opacity: 1 !important;
}
.site-header .astra-search-icon svg,
.site-header .ast-icon svg,
.site-header .astra-icon svg,
.site-header .ast-addon-cart-wrap svg {
fill: var(--gv-ink) !important;
opacity: 1 !important;
}
.site-header .astra-search-icon:hover,
.site-header .ast-mobile-menu-trigger-minimal:hover {
color: var(--gv-accent) !important;
}
/* Varukorgen till höger, med belopp */
.ast-below-header-bar .ast-header-woo-cart {
margin-left: auto;
}
.ast-below-header-bar .ast-addon-cart-wrap {
color: var(--gv-ink);
font-weight: 600;
font-size: 0.9375rem;
}
/* =========================================================
Sparade artiklar (hjärtat)
========================================================= */
/* Hjärtikonen i sidhuvudet */
.gv-wish-link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
color: var(--gv-ink) !important;
text-decoration: none !important;
transition: color 0.15s ease;
}
.gv-wish-link svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linejoin: round;
}
.gv-wish-link:hover {
color: var(--gv-accent) !important;
}
.gv-wish-count {
position: absolute;
top: 1px;
right: 0;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 999px;
background: var(--gv-accent);
color: #ffffff;
font-size: 0.6875rem;
font-weight: 700;
line-height: 17px;
text-align: center;
}
/* Hjärtknapp på produktkortet — uppe i hörnet */
.woocommerce ul.products li.product .gv-wish {
position: absolute;
top: 0.55rem;
right: 0.55rem;
z-index: 3;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: rgba(255, 255, 255, 0.94);
border: 1px solid var(--gv-line);
border-radius: 50%;
cursor: pointer;
color: var(--gv-muted);
transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.gv-wish svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linejoin: round;
pointer-events: none;
}
.gv-wish:hover {
color: var(--gv-accent);
border-color: var(--gv-accent);
}
.gv-wish.is-saved {
color: var(--gv-accent);
border-color: var(--gv-accent);
}
.gv-wish.is-saved svg {
fill: var(--gv-accent);
}
/* Hjärtknapp på produktsidan — bredvid köpknappen */
.gv-wish-single {
display: inline-flex;
align-items: center;
gap: 0.5rem;
height: auto;
padding: 0.6em 1.1em;
background: transparent;
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius-sm);
color: var(--gv-ink);
font-weight: 600;
font-size: 0.9375rem;
cursor: pointer;
position: static;
width: auto;
}
.gv-wish-single:hover,
.gv-wish-single.is-saved {
color: var(--gv-accent);
border-color: var(--gv-accent);
}
/* Sidan "Sparade artiklar" */
.gv-wish-empty {
color: var(--gv-muted);
margin-bottom: 1rem;
}
/* =========================================================
Butikssidans sidopanel
På mobil hamnar den under produkterna i full bredd och blir
rörig — den göms där. Sök och kategorier finns i sidhuvudet.
Bara panelen i innehållet: sidfotens widgetytor heter också
.widget-area, och de tog med sig CTA-kortet i fallet.
========================================================= */
@media (max-width: 921px) {
.woocommerce-page #secondary,
.woocommerce-page .site-content .widget-area,
.archive.post-type-archive-product #secondary {
display: none !important;
}
}
/* Kategoriwidgetens platshållarbilder bort */
.widget_product_categories img,
.wc-block-product-categories img,
.widget_product_categories .wp-post-image {
display: none !important;
}
.widget_product_categories li {
padding: 0.35rem 0;
}
/* Onödigt tomrum efter produktrutnätet */
.woocommerce-page .site-main > .ast-woocommerce-container > .woocommerce > .clear,
.woocommerce ul.products + .clear {
display: none;
}
/* =========================================================
Innehållsytor — inga grå plattor bakom sidinnehåll
========================================================= */
.ast-plain-container .site-content .ast-container,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-separate-container #primary,
.ast-woocommerce-container {
background: transparent !important;
box-shadow: none !important;
}
/* =========================================================
Sökruta som dialogruta (i stället för Astras skjutande fält)
========================================================= */
/* Astras egen glidande sökpanel stängs av — vi öppnar en dialog. */
.ast-search-menu-icon .search-form,
.ast-search-menu-icon.slide-search .search-form {
display: none !important;
}
.gv-search-modal[hidden] {
display: none;
}
.gv-search-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: flex-start;
justify-content: center;
padding: clamp(1rem, 12vh, 7rem) 1.25rem 1.25rem;
}
.gv-search-backdrop {
position: absolute;
inset: 0;
background: rgba(1, 1, 1, 0.55);
opacity: 0;
transition: opacity 0.2s ease;
}
.gv-search-modal.gv-in .gv-search-backdrop {
opacity: 1;
}
.gv-search-box {
position: relative;
width: 100%;
max-width: 620px;
background: var(--gv-white);
border-radius: var(--gv-radius);
box-shadow: 0 20px 50px rgba(1, 1, 1, 0.28);
padding: 1.25rem;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.gv-search-modal.gv-in .gv-search-box {
opacity: 1;
transform: translateY(0);
}
.gv-search-title {
display: block;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--gv-muted);
margin-bottom: 0.7rem;
}
.gv-search-form {
display: flex;
gap: 0.5rem;
}
.gv-search-form input[type="search"] {
flex: 1 1 auto;
min-width: 0;
font-size: 1rem;
padding: 0.7em 0.9em;
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius-sm);
background: var(--gv-white);
color: var(--gv-ink);
}
.gv-search-form input[type="search"]:focus {
outline: none;
border-color: var(--gv-ink);
box-shadow: 0 0 0 1px var(--gv-ink);
}
.gv-search-form button {
flex: 0 0 auto;
background: var(--gv-accent);
color: #ffffff;
border: 0;
border-radius: var(--gv-radius-sm);
font-weight: 600;
padding: 0.7em 1.35em;
cursor: pointer;
}
.gv-search-form button:hover {
background: var(--gv-accent-dark);
}
.gv-search-close {
position: absolute;
top: 0.5rem;
right: 0.6rem;
width: 32px;
height: 32px;
border: 0;
background: transparent;
color: var(--gv-muted);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
border-radius: var(--gv-radius-sm);
}
.gv-search-close:hover {
background: var(--gv-snow);
color: var(--gv-ink);
}
.gv-search-hint {
margin: 0.7rem 0 0;
font-size: 0.8125rem;
color: var(--gv-muted);
}
@media (prefers-reduced-motion: reduce) {
.gv-search-backdrop,
.gv-search-box {
transition: none;
}
}
/* =========================================================
Ansökningssidan — enkel sidhjälte
========================================================= */
.gv-pagehero {
background: var(--gv-snow);
border-bottom: 1px solid var(--gv-line);
padding: 2.5rem 1.25rem 2.25rem;
margin-bottom: 2.25rem;
}
.gv-pagehero-inner {
max-width: var(--gv-wide);
margin: 0 auto;
}
.gv-pagehero .gv-eyebrow {
display: inline-block;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gv-accent);
margin-bottom: 0.4rem;
}
.gv-pagehero h1 {
font-size: clamp(1.7rem, 3.4vw, 2.4rem);
font-weight: 700;
margin: 0 0 0.6rem;
}
.gv-pagehero p {
color: var(--gv-muted);
max-width: 56ch;
margin: 0;
}
.gv-pagehero-points {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
margin: 1.25rem 0 0;
padding: 0;
list-style: none;
}
.gv-pagehero-points li {
position: relative;
padding-left: 1.5rem;
font-size: 0.9375rem;
font-weight: 600;
color: var(--gv-ink);
}
.gv-pagehero-points li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--gv-accent);
}
/* =========================================================
Upp till toppen — mjuk in- och uttoning
========================================================= */
#ast-scroll-top.gv-scrolltop {
display: flex !important;
align-items: center;
justify-content: center;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(10px) !important;
transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s !important;
border-radius: var(--gv-radius-sm);
pointer-events: none;
}
#ast-scroll-top.gv-scrolltop.gv-in {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
#ast-scroll-top.gv-scrolltop {
transition: none;
transform: none;
}
}
/* ── Knappkluster i sidhuvudet ([gv_header_actions]) ────── */
.gv-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* "Logga in" — kontur, ikon + text */
.gv-act-login {
display: inline-flex;
align-items: center;
gap: 0.45rem;
border: 1px solid var(--gv-line);
color: var(--gv-ink) !important;
background: transparent;
border-radius: var(--gv-radius-sm);
font-weight: 600;
font-size: 0.9375rem;
line-height: 1.2;
padding: 0.55em 1em;
text-decoration: none !important;
white-space: nowrap;
transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.gv-act-login svg {
width: 17px;
height: 17px;
stroke: currentColor;
fill: none;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}
.gv-act-login:hover {
border-color: var(--gv-ink);
color: var(--gv-ink) !important;
background: var(--gv-snow);
}
/* "Bli kund" — fylld */
.gv-act-cta {
display: inline-flex;
align-items: center;
background: var(--gv-accent);
color: #ffffff !important;
border: 1px solid var(--gv-accent);
border-radius: var(--gv-radius-sm);
font-weight: 600;
font-size: 0.9375rem;
line-height: 1.2;
padding: 0.55em 1.1em;
text-decoration: none !important;
white-space: nowrap;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.gv-act-cta:hover {
background: var(--gv-accent-dark);
border-color: var(--gv-accent-dark);
color: #ffffff !important;
}
/* Inloggad — kontoikon */
.gv-act-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid var(--gv-line);
border-radius: 50%;
color: var(--gv-ink) !important;
text-decoration: none !important;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.gv-act-avatar svg {
width: 19px;
height: 19px;
stroke: currentColor;
fill: none;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.gv-act-avatar:hover {
border-color: var(--gv-accent);
background: var(--gv-snow);
color: var(--gv-accent) !important;
}
/* Mobil: "Logga in" som ren textlänk, "Bli kund" kompakt knapp.
(Andra raden bär hamburgare, sök och varukorg.) */
@media (max-width: 921px) {
.gv-actions {
gap: 0.5rem;
}
.gv-act-login {
border-color: transparent;
background: transparent;
padding: 0.4em 0.3em;
}
.gv-act-login:hover {
background: transparent;
border-color: transparent;
color: var(--gv-accent) !important;
}
.gv-act-cta {
font-size: 0.875rem;
padding: 0.55em 0.95em;
}
}
@media (max-width: 420px) {
.gv-act-login svg {
display: none;
}
.gv-act-login {
font-size: 0.875rem;
}
.gv-act-cta {
font-size: 0.8125rem;
padding: 0.55em 0.8em;
}
}
/* =========================================================
Knappar (block)
========================================================= */
/* En enda knappform i hela temat. Astra sätter egen radie, egen ram och
krymper texten till ~11 px på mobil — allt nedan måste därför vinna. */
.wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px; /* träffyta på mobil */
padding: 0.75rem 1.35rem !important;
border-radius: var(--gv-radius) !important;
border-width: 1px !important;
border-style: solid !important;
font-size: 15px !important; /* px, inte rem — Astra krymper rotstorleken
till 14,6 px på mobil */
line-height: 1.2 !important;
font-weight: 600;
text-align: center;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
border-color: transparent !important;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
background-color: var(--gv-accent-dark) !important;
color: #ffffff !important;
}
/* Astras is-style-outline--1 målar ramen svart — tvinga tillbaka den. */
.wp-block-button.is-style-outline .wp-block-button__link {
border-color: currentColor !important;
background: transparent !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
background: var(--gv-ink) !important;
border-color: var(--gv-ink) !important;
color: #ffffff !important;
}
/* =========================================================
Sektionsramar
Sektionerna sätter sitt eget utrymme med padding — nollställ
blockflödets marginaler så att inga oväntade luckor uppstår.
========================================================= */
.entry-content > .wp-block-group {
margin-block-start: 0 !important;
margin-block-end: 0 !important;
}
.gv-section {
padding-top: 2.75rem !important;
padding-bottom: 2.75rem !important;
}
.gv-section-tight {
padding-top: 1.5rem !important;
padding-bottom: 1.25rem !important;
}
.gv-section-flush-top {
padding-top: 0 !important;
}
.gv-bg-snow {
background: var(--gv-snow);
}
/* Villkorliga sektioner (Köp igen, Kampanjer) renderar ingenting när de
inte har något att visa. Utan det här blir omslaget kvar som en tom
färgad remsa med full sektionspadding. */
.gv-section:not(:has(*)),
.gv-section-tight:not(:has(*)) {
display: none !important;
}
/* Sektionshuvud: rubrik med chevron + underrubrik */
.gv-sechead {
margin-bottom: 1.25rem;
}
.gv-sechead h2 {
margin: 0;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.gv-sechead h2 a {
color: var(--gv-ink);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.gv-sechead h2 a::after {
content: "›";
color: var(--gv-accent);
font-size: 1.4em;
line-height: 1;
font-weight: 400;
transform: translateY(-2px);
}
.gv-sechead h2 a:hover {
color: var(--gv-accent);
}
.gv-sechead p {
margin: 0.4rem 0 0;
color: var(--gv-muted);
font-size: 0.95rem;
}
/* =========================================================
Hero-banner (inramad, inte helskärm)
========================================================= */
/* Texten ligger aldrig direkt på fotot. Övertoningen går från genomskinlig
över bilden till helt tät bakom texten, så kontrasten är densamma oavsett
vilken bild kunden lägger in. Blockmarkeringen är orörd — bild, rubrik och
knappar redigeras som vanligt i Gutenberg. */
.gv-banner {
border-radius: var(--gv-radius);
overflow: hidden;
min-height: 340px;
padding: 0 !important; /* blockets egen padding sitter på panelen */
display: flex;
}
.gv-banner > .wp-block-cover__background {
opacity: 1 !important;
}
.gv-banner .wp-block-cover__inner-container {
width: 100%;
}
.gv-banner h1 {
color: #ffffff !important;
font-size: clamp(1.75rem, 3.4vw, 2.75rem);
line-height: 1.15;
font-weight: 700;
max-width: 18ch;
margin: 0;
text-wrap: balance;
}
.gv-banner p {
color: #cfd2d8 !important;
max-width: 42ch;
margin: 0.75rem 0 0;
font-size: 1rem;
line-height: 1.55;
}
.gv-banner .wp-block-buttons {
margin-top: 1.5rem;
gap: 0.625rem !important;
}
/* Konturknappen ligger på mörkt underlag — vit ram, inte svart. */
.gv-banner .wp-block-button.is-style-outline .wp-block-button__link {
border-color: rgba(255, 255, 255, 0.55) !important;
}
.gv-banner .wp-block-button.is-style-outline .wp-block-button__link:hover {
background: #ffffff !important;
border-color: #ffffff !important;
color: var(--gv-ink) !important;
}
/* Desktop: delat kort — text på tät panel till vänster, foto till höger. */
@media (min-width: 783px) {
.gv-banner {
align-items: stretch;
}
.gv-banner > .wp-block-cover__background {
background: linear-gradient(
90deg,
#010101 0%,
#010101 52%,
rgba(1, 1, 1, 0.85) 63%,
rgba(1, 1, 1, 0.3) 84%,
rgba(1, 1, 1, 0.12) 100%
) !important;
}
.gv-banner .wp-block-cover__inner-container {
width: 56%;
align-self: center;
padding: 3rem 2.5rem;
/* Cover-blocket centrerar sitt innehåll — panelen ska ligga vänster,
annars hamnar texten mitt på fotot i stället för på den täta ytan. */
margin-left: 0 !important;
margin-right: auto !important;
}
}
/* Mobil: foto överst, texten på tät botten — ingen text över bildbruset. */
@media (max-width: 782px) {
.gv-banner {
min-height: 0;
align-items: flex-end;
}
/* Stoppen är satta i px, inte procent: den täta ytan måste börja exakt
där fotoremsan slutar (120 px). I procent flyttar sig brytpunkten med
textens längd, och första rubrikraden hamnar på halvgenomskinligt foto. */
.gv-banner > .wp-block-cover__background {
background: linear-gradient(
180deg,
rgba(1, 1, 1, 0.12) 0px,
rgba(1, 1, 1, 0.4) 68px,
rgba(1, 1, 1, 0.95) 114px,
#010101 136px
) !important;
}
.gv-banner .wp-block-cover__inner-container {
padding: 120px 1.35rem 1.6rem; /* toppen = synlig del av fotot */
}
.gv-banner h1 {
max-width: none;
}
.gv-banner p {
max-width: none;
font-size: 0.9375rem;
}
/* Två lika breda knappar i stället för en bred och en smal. */
.gv-banner .wp-block-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 1.25rem;
}
.gv-banner .wp-block-button,
.gv-banner .wp-block-button__link {
width: 100%;
}
.gv-banner .wp-block-button__link {
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
}
}
/* =========================================================
Nyheter & kampanjer — helbredds bildspel
Tre sorters slides, för butikens bilder är av två helt olika
slag: breda foton och pack shots på vit botten. Ett pack shot i
en fylld ruta ser ut som en bild slängd i en låda — på ljus
platta multipliceras den vita bottnen bort i stället.
========================================================= */
.gv-slider {
position: relative;
}
.gv-slides {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
border-radius: var(--gv-radius);
background: var(--gv-snow);
}
.gv-slides::-webkit-scrollbar {
display: none;
}
.gv-slide {
position: relative;
display: flex;
align-items: center;
min-height: 360px;
overflow: hidden;
scroll-snap-align: start;
}
.gv-slide-inner {
position: relative;
z-index: 2;
width: 100%;
max-width: 620px;
padding: 2.5rem 3rem;
}
/* Kickern får samma röda streck som hjältens etikett. */
.gv-slide-kicker {
display: flex;
align-items: center;
gap: 0.65rem;
margin: 0 0 0.85rem;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.gv-slide-kicker::before {
content: "";
flex: none;
width: 26px;
height: 2px;
background: var(--gv-accent);
}
/* TVÅ klasser krävs: Astras `.entry-content h3` (1,15rem) är mer specifik
än en ensam klass och krympte rubriken till 18 px. Och storlekarna står
i px — Astra sätter rotstorleken till 14,6 px på mobil, så rem-mått
krymper med den. */
.gv-slide .gv-slide-title {
margin: 0;
color: inherit !important;
font-size: clamp(26px, 3.2vw, 38px);
line-height: 1.08;
letter-spacing: -0.02em;
font-weight: 700;
text-wrap: balance;
}
.gv-slide-text {
margin: 0.7rem 0 0;
max-width: 46ch;
font-size: 16px;
line-height: 1.55;
opacity: 0.75;
}
.gv-slide-cta {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-top: 1.4rem;
padding: 0 1.4rem;
border-radius: var(--gv-radius);
background: var(--gv-accent);
color: #ffffff !important;
font-size: 15px;
font-weight: 600;
text-decoration: none !important;
transition: background-color 0.15s ease;
}
.gv-slide-cta:hover {
background: var(--gv-accent-dark);
}
/* Hela sliden klickbar utan att bädda in länkar i länkar. */
.gv-slide-cta::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
}
/* — Fotoslide: bilden fyller bandet, texten står på en ramp — */
.gv-slide--foto {
background: var(--gv-ink);
color: #ffffff;
}
.gv-slide-bg {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 45%;
}
.gv-slide--foto::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
90deg,
rgba(1, 1, 1, 0.93) 0%,
rgba(1, 1, 1, 0.88) 38%,
rgba(1, 1, 1, 0.6) 66%,
rgba(1, 1, 1, 0.28) 100%
);
}
.gv-slide--foto .gv-slide-kicker {
color: rgba(255, 255, 255, 0.7);
}
/* — Produktslide: alltid ljus, för multiply behöver ljus botten — */
.gv-slide--produkt {
background: var(--gv-snow);
color: var(--gv-ink);
}
.gv-slide--produkt .gv-slide-inner {
max-width: 58%;
}
.gv-slide--produkt .gv-slide-kicker {
color: var(--gv-muted);
}
/* Produkten faller ut över kanten i stället för att sitta i en ruta.
multiply släcker den vita studiobottnen mot den ljusa plattan —
därför får den här sliden aldrig bli mörk eller röd. */
.gv-slide-object {
position: absolute;
right: 2.5%;
bottom: -6%;
z-index: 1;
height: 116%;
width: auto;
max-width: 44%;
object-fit: contain;
mix-blend-mode: multiply;
}
/* — Textslide: ingen bild, då får typografin bära — */
.gv-slide--text[data-tone="ink"] {
background: #14161a;
color: #ffffff;
}
.gv-slide--text[data-tone="accent"] {
background: var(--gv-accent);
color: #ffffff;
}
.gv-slide--text[data-tone="soft"] {
background: var(--gv-snow);
color: var(--gv-ink);
}
.gv-slide--text[data-tone="ink"] .gv-slide-kicker,
.gv-slide--text[data-tone="accent"] .gv-slide-kicker {
color: rgba(255, 255, 255, 0.7);
}
.gv-slide--text[data-tone="accent"] .gv-slide-kicker::before {
background: #ffffff;
}
.gv-slide--text[data-tone="accent"] .gv-slide-cta {
background: #ffffff;
color: var(--gv-ink) !important;
}
.gv-slide--text[data-tone="accent"] .gv-slide-cta:hover {
background: rgba(255, 255, 255, 0.88);
}
.gv-slide--text .gv-slide-title {
font-size: clamp(28px, 3.7vw, 44px);
}
/* — Reglage —
Pilarna står bredvid rubriken, inte ovanpå sliden: över bilden låg de
i vägen för brödtexten och tvingade fram en platta bakom sig. */
.gv-slider-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 1.25rem;
}
.gv-slider-head .gv-sechead {
margin-bottom: 0;
}
.gv-slider-arrows {
display: flex;
flex: none;
gap: 8px;
padding-bottom: 0.35rem;
}
.gv-slider-nav {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
padding: 0;
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
background: var(--gv-white);
color: var(--gv-ink);
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
}
/* Riktiga chevroner — ‹ drogs ut och satt snett i knappen. */
.gv-slider-nav svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.gv-slider-nav:hover {
border-color: var(--gv-accent);
color: var(--gv-accent);
}
/* — Prickarna räknar ner till nästa slide — */
.gv-slider-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 0.6rem;
}
.gv-dot {
display: flex;
align-items: center;
padding: 6px 0;
border: 0;
background: none;
cursor: pointer;
}
/* Den aktiva pillen växer — 34 px streck under ett 1329 px band syntes
inte, och då hjälper det inte att nedräkningen tekniskt fungerar. */
.gv-dot-track {
display: block;
width: 30px;
height: 5px;
overflow: hidden;
border-radius: 3px;
background: var(--gv-line);
transition: width 0.35s ease;
}
.gv-dot.is-on .gv-dot-track {
width: 84px;
}
.gv-dot:hover .gv-dot-track {
background: #d5d9df;
}
.gv-dot-fill {
display: block;
width: 0;
height: 100%;
background: var(--gv-accent);
}
.gv-dot.is-on .gv-dot-fill {
animation: gv-dot-tick 7s linear forwards;
}
.gv-slider.is-paused .gv-dot-fill {
animation-play-state: paused;
}
@keyframes gv-dot-tick {
from { width: 0; }
to { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.gv-dot.is-on .gv-dot-fill {
animation: none;
width: 100%;
}
}
@media (max-width: 782px) {
.gv-slide {
min-height: 0;
align-items: stretch;
}
.gv-slide-inner {
max-width: none;
padding: 1.6rem 1.25rem 1.75rem;
}
/* Produktsliden staplar: bilden får en egen höjd överst i stället för
att ligga bakom texten på 375 px. */
.gv-slide--produkt {
display: block;
padding-top: 170px;
}
.gv-slide--produkt .gv-slide-inner {
max-width: none;
}
.gv-slide-object {
right: 50%;
bottom: auto;
top: 12px;
height: 155px;
max-width: 62%;
transform: translateX(50%);
}
.gv-slide--foto::after {
background: linear-gradient(
180deg,
rgba(1, 1, 1, 0.72) 0%,
rgba(1, 1, 1, 0.9) 65%
);
}
.gv-slide--foto .gv-slide-inner {
padding-top: 5.5rem;
}
/* Pilarna kräver hovring och stjäl bredd — svep i stället. */
.gv-slider-arrows {
display: none;
}
}
/* =========================================================
Nyheter & kampanjer — dragspel
Paneler i bredd, en öppen i taget. Färgen kommer från kampanjens
tone-fält, inte från bilden: två av tre kampanjbilder är urklippta
produkter på vit botten och duger inte som helbredds bakgrund.
========================================================= */
.gv-acc {
display: flex;
gap: 12px;
height: 400px;
}
.gv-acc-panel {
flex: 1 1 0;
min-width: 0;
border-radius: var(--gv-radius);
overflow: hidden;
transition: flex-grow 0.45s ease;
}
/* Den öppna panelen tar tre gånger så stor plats som en hopfälld. */
.gv-acc-panel.is-open {
flex-grow: 3;
}
.gv-acc-link {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 1.4rem 1.5rem;
text-decoration: none !important;
color: inherit;
}
/* Tonerna — samma tre som kampanjbrickorna använder. */
.gv-acc-panel[data-tone="ink"] {
background: #14161a;
color: #ffffff;
}
.gv-acc-panel[data-tone="accent"] {
background: var(--gv-accent);
color: #ffffff;
}
.gv-acc-panel[data-tone="soft"] {
background: var(--gv-snow);
color: var(--gv-ink);
box-shadow: inset 0 0 0 1px var(--gv-line);
}
/* Bilden ligger i en vit bricka — en urklippt produkt på vit botten blir
annars en vit fyrkant mitt på den färgade panelen. */
.gv-acc-media {
flex: 1 1 auto;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.1rem;
padding: 0.75rem;
background: var(--gv-white);
border-radius: var(--gv-radius-sm);
}
.gv-acc-media img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.gv-acc-body {
display: block;
flex: none;
}
.gv-acc-badge {
display: inline-block;
margin-bottom: 0.6rem;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
background: rgba(255, 255, 255, 0.16);
color: inherit;
}
.gv-acc-panel[data-tone="soft"] .gv-acc-badge {
background: var(--gv-white);
box-shadow: inset 0 0 0 1px var(--gv-line);
color: var(--gv-muted);
}
/* Två klasser av samma skäl som slidens rubrik — Astras `.entry-content h3`
vinner annars över en ensam klass. */
.gv-acc-panel .gv-acc-title {
margin: 0;
color: inherit !important;
font-size: 19px;
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.01em;
}
/* Text och länketikett viks in när panelen är hopfälld. Rubriken står
kvar vågrätt och radbryter — roterad text är svårare att läsa. */
.gv-acc-fold {
display: block;
overflow: hidden;
max-height: 8rem;
opacity: 1;
transition: opacity 0.25s ease, max-height 0.35s ease, margin-top 0.35s ease;
}
/* Bara ovanför brytpunkten — på mobil är alla paneler utfällda. */
@media (min-width: 783px) {
.gv-acc-panel:not(.is-open) .gv-acc-fold {
max-height: 0;
opacity: 0;
margin-top: 0;
}
}
.gv-acc-text {
margin-top: 0.5rem;
font-size: 0.9375rem;
line-height: 1.5;
opacity: 0.72;
}
.gv-acc-cta {
margin-top: 0.9rem;
font-size: 0.9375rem;
font-weight: 600;
width: fit-content;
padding-bottom: 2px;
border-bottom: 2px solid var(--gv-accent);
}
.gv-acc-panel[data-tone="accent"] .gv-acc-cta {
border-bottom-color: #ffffff;
}
/* Tidslinjen för autoplay — visar att panelen byts av sig själv. */
.gv-acc-progress {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: var(--gv-accent);
}
.gv-acc-panel[data-tone="accent"] .gv-acc-progress {
background: #ffffff;
}
.gv-acc-panel.is-open .gv-acc-progress {
animation: gv-acc-tick 7s linear forwards;
}
.gv-acc.is-paused .gv-acc-progress {
animation-play-state: paused;
}
/* Har besökaren tagit över växlingen har linjen inget att visa. */
.gv-acc.is-stopped .gv-acc-progress {
display: none;
}
@keyframes gv-acc-tick {
from { width: 0; }
to { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.gv-acc-panel,
.gv-acc-fold {
transition: none;
}
.gv-acc-panel.is-open .gv-acc-progress {
animation: none;
}
}
/* Under 782 px finns ingen hovring och ingen bredd att fälla ut — då är
det staplade kort med allt innehåll synligt. */
@media (max-width: 782px) {
.gv-acc {
display: grid;
grid-auto-flow: row;
gap: 0.85rem;
height: auto;
}
.gv-acc-panel,
.gv-acc-panel.is-open {
flex: none;
}
.gv-acc-link {
padding: 1.1rem 1.2rem 1.25rem;
}
.gv-acc-media {
height: 150px;
flex: none;
}
.gv-acc-progress {
display: none;
}
}
/* =========================================================
Nyheter & kampanjer (karusell)
Korten kommer från WholesaleKit → Kampanjer. Ingen automatisk
rotation — besökaren swajpar eller klickar sig fram själv.
========================================================= */
.gv-rail-wrap {
position: relative;
}
.gv-rail {
display: grid;
grid-auto-flow: column;
/* Fast spårbredd, inte minmax(0, …) — med en nedre gräns på 0 krymper
grid korten så att de får plats i raden i stället för att låta den
scrolla, och tre kort blev 103 px breda. */
grid-auto-columns: 300px;
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
padding-bottom: 0.25rem;
overscroll-behavior-x: contain;
}
.gv-rail::-webkit-scrollbar {
display: none;
}
/* Bildkort: fotot fyller kortet, texten ligger ovanpå en tät botten.
Övertoningen sitter på textblocket — inte på kortet — så den täta ytan
följer med när rubriken blir längre i stället för att hamna fel. */
.gv-kampanj {
scroll-snap-align: start;
position: relative;
aspect-ratio: 4 / 5;
background: var(--gv-ink);
border-radius: var(--gv-radius);
overflow: hidden;
display: flex;
}
.gv-kampanj > * {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
text-decoration: none;
color: inherit;
}
.gv-kampanj-media {
position: absolute;
inset: 0;
overflow: hidden;
}
.gv-kampanj-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.gv-kampanj a:hover .gv-kampanj-media img {
transform: scale(1.05);
}
.gv-kampanj-badge {
position: absolute;
top: 0.75rem;
left: 0.75rem;
z-index: 2;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.3rem 0.5rem;
border-radius: 4px;
}
/* Utan bild sitter brickan i flödet i stället för över fotot. */
.gv-kampanj-body > .gv-kampanj-badge {
position: static;
align-self: flex-start;
margin-bottom: 0.6rem;
}
.gv-tone-accent { background: var(--gv-accent); color: #ffffff; }
.gv-tone-ink { background: #ffffff; color: var(--gv-ink); }
.gv-tone-soft { background: #fdeaef; color: #8f0b2d; }
.gv-kampanj-body {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
padding: 3.5rem 1.1rem 1.15rem;
background: linear-gradient(
180deg,
rgba(1, 1, 1, 0) 0%,
rgba(1, 1, 1, 0.72) 30%,
rgba(1, 1, 1, 0.94) 62%,
#010101 100%
);
}
/* Kort utan foto: centrera texten så kortet inte blir tomt upptill. */
.gv-kampanj--noimage > * {
justify-content: center;
}
.gv-kampanj--noimage .gv-kampanj-body {
background: none;
padding-top: 1.15rem;
border-left: 3px solid var(--gv-accent);
}
.gv-kampanj-body h3 {
margin: 0;
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.3;
color: #ffffff;
text-wrap: balance;
}
.gv-kampanj-body p {
margin: 0.4rem 0 0;
font-size: 0.875rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.82);
}
.gv-kampanj-cta {
margin-top: 0.85rem;
font-size: 0.875rem;
font-weight: 600;
color: #ffffff;
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.gv-kampanj-cta::after {
content: "›";
font-size: 1.25em;
line-height: 1;
transform: translateY(-1px);
transition: transform 0.15s ease;
}
.gv-kampanj a:hover .gv-kampanj-cta::after {
transform: translate(3px, -1px);
}
/* Pilar — bara på pekdonsskärmar, mobilen swajpar. */
.gv-rail-nav {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--gv-line);
background: var(--gv-white);
color: var(--gv-ink);
box-shadow: 0 2px 8px rgba(1, 1, 1, 0.12);
cursor: pointer;
align-items: center;
justify-content: center;
font-size: 1.35rem;
line-height: 1;
padding: 0;
transition: opacity 0.15s ease, background 0.15s ease;
z-index: 2;
}
.gv-rail-nav:hover {
background: var(--gv-snow);
}
.gv-rail-nav[disabled] {
opacity: 0;
pointer-events: none;
}
/* Raden får plats som den är — inga pilar alls. */
.gv-rail-static .gv-rail-nav {
display: none !important;
}
.gv-rail-prev { left: -18px; }
.gv-rail-next { right: -18px; }
@media (min-width: 783px) and (hover: hover) {
.gv-rail-nav {
display: flex;
}
}
@media (max-width: 782px) {
.gv-rail {
grid-auto-columns: 78vw;
gap: 0.75rem;
/* Kort nummer två ska titta fram i kanten — visar att raden går att dra. */
margin-inline: -1.25rem;
padding-inline: 1.25rem;
}
}
/* =========================================================
Snabblänksrad (segmentremsa)
========================================================= */
.gv-quick {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: var(--gv-white);
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
box-shadow: var(--gv-shadow);
overflow: hidden;
}
.gv-quick a {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 1rem 1.15rem;
color: var(--gv-ink);
text-decoration: none;
font-weight: 600;
font-size: 0.9375rem;
border-right: 1px solid var(--gv-line);
transition: background-color 0.15s ease;
}
.gv-quick a:last-child {
border-right: 0;
}
.gv-quick a:hover {
background: var(--gv-snow);
color: var(--gv-ink);
}
.gv-quick svg {
width: 22px;
height: 22px;
flex-shrink: 0;
stroke: var(--gv-accent);
fill: none;
stroke-width: 1.6;
}
.gv-quick .gv-chev {
margin-left: auto;
color: var(--gv-muted);
font-size: 1.1rem;
line-height: 1;
}
@media (max-width: 900px) {
.gv-quick {
grid-template-columns: repeat(2, 1fr);
}
.gv-quick a:nth-child(2) {
border-right: 0;
}
.gv-quick a:nth-child(1),
.gv-quick a:nth-child(2) {
border-bottom: 1px solid var(--gv-line);
}
}
@media (max-width: 520px) {
.gv-quick {
grid-template-columns: 1fr;
}
.gv-quick a {
border-right: 0;
border-bottom: 1px solid var(--gv-line);
}
.gv-quick a:last-child {
border-bottom: 0;
}
}
/* =========================================================
Kategorikort (bild + versalt namn)
========================================================= */
/* minmax(0, 1fr) — inte bara 1fr. Ett långt sammansatt kategorinamn
("Salladsförpackningar") gör kortets min-content bredare än skärmen,
och en vanlig 1fr-kolumn krymper aldrig under min-content. Det gav
vågrät sidscroll på mobil. */
.gv-cats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
@media (max-width: 700px) {
.gv-cats {
grid-template-columns: minmax(0, 1fr);
}
}
.gv-catcard {
display: flex;
align-items: center;
min-width: 0;
gap: 1.1rem;
background: var(--gv-white);
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
box-shadow: var(--gv-shadow);
padding: 1.1rem 1.35rem;
min-height: 132px;
text-decoration: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gv-catcard:hover {
border-color: #c8ccd3;
box-shadow: 0 2px 10px rgba(1, 1, 1, 0.08);
}
.gv-catcard img {
width: 120px;
height: 96px;
object-fit: contain;
flex-shrink: 0;
}
.gv-catcard-body {
border-left: 2px solid var(--gv-accent);
padding-left: 1.1rem;
min-width: 0;
overflow-wrap: anywhere;
}
.gv-catcard-name {
display: block;
font-size: clamp(1.05rem, 1.6vw, 1.3rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.01em;
color: var(--gv-ink);
line-height: 1.25;
/* sidan är lang="sv-SE", så långa ord avstavas snyggt i stället för
att brytas var som helst — anywhere finns kvar som sista utväg */
hyphens: auto;
overflow-wrap: anywhere;
}
.gv-catcard-meta {
display: block;
margin-top: 0.3rem;
font-size: 0.875rem;
color: var(--gv-muted);
font-weight: 400;
}
/* Mindre bild på liten skärm — namnet får plats på färre rader */
@media (max-width: 480px) {
.gv-catcard {
gap: 0.85rem;
padding: 1rem 1.1rem;
}
.gv-catcard img {
width: 84px;
height: 72px;
}
.gv-catcard-body {
padding-left: 0.85rem;
}
}
/* =========================================================
Fördelar / faktarad
========================================================= */
.gv-facts {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
@media (max-width: 900px) {
.gv-facts {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 520px) {
.gv-facts {
grid-template-columns: 1fr;
}
}
.gv-fact {
background: var(--gv-white);
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
padding: 1.15rem 1.25rem;
}
.gv-fact strong {
display: block;
font-size: 0.9375rem;
color: var(--gv-ink);
margin-bottom: 0.2rem;
}
.gv-fact span {
font-size: 0.875rem;
color: var(--gv-muted);
}
/* Nyckeltal på mörk platta */
.gv-kpi {
background: var(--gv-bar);
border-radius: var(--gv-radius);
padding: 1.75rem 1.5rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
text-align: center;
}
@media (max-width: 700px) {
.gv-kpi {
grid-template-columns: repeat(2, 1fr);
}
}
.gv-kpi b {
display: block;
color: #ffffff;
font-size: clamp(1.4rem, 2.6vw, 1.9rem);
font-weight: 700;
line-height: 1.2;
}
.gv-kpi span {
color: #a9adb6;
font-size: 0.875rem;
}
/* =========================================================
Info-/textblock
========================================================= */
.gv-split {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 2.5rem;
align-items: center;
}
@media (max-width: 800px) {
.gv-split {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.gv-check {
list-style: none;
padding-left: 0;
margin: 1rem 0 0;
}
.gv-check li {
position: relative;
padding-left: 1.6rem;
margin-bottom: 0.5rem;
}
.gv-check li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--gv-accent);
font-weight: 700;
}
.gv-muted {
color: var(--gv-muted);
}
/* =========================================================
Formdelare (valfria, ingår i mönsterbiblioteket)
========================================================= */
.gv-div {
height: clamp(40px, 6vw, 80px);
margin-top: calc(clamp(40px, 6vw, 80px) * -1);
margin-bottom: -1px;
position: relative;
z-index: 2;
pointer-events: none;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.gv-div-wave {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.gv-div-slant {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.gv-fill-white { background-color: var(--gv-white); }
.gv-fill-snow { background-color: var(--gv-snow); }
.gv-fill-dark { background-color: var(--gv-bar); }
/* Cover-bilden målas som bakgrund (se render_block-filtret) */
.wp-block-cover > img.wp-block-cover__image-background {
display: none;
}
/* =========================================================
Orderformulär
========================================================= */
.gv-orderform {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.9rem;
}
.gv-orderform p {
margin: 0;
}
.gv-orderform .gv-field-full {
grid-column: 1 / -1;
}
.gv-orderform label {
display: block;
font-size: 0.8125rem;
font-weight: 600;
color: var(--gv-ink);
margin-bottom: 0.3rem;
}
.gv-orderform input,
.gv-orderform textarea {
width: 100%;
font: inherit;
color: var(--gv-ink);
background: var(--gv-white);
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius-sm);
padding: 0.55em 0.85em;
}
.gv-orderform input:focus,
.gv-orderform textarea:focus {
outline: none;
border-color: var(--gv-ink);
box-shadow: 0 0 0 1px var(--gv-ink);
}
.gv-orderform textarea {
min-height: 120px;
resize: vertical;
}
.gv-orderform button {
background: var(--gv-accent);
color: #ffffff;
font: inherit;
font-weight: 600;
border: 0;
border-radius: var(--gv-radius-sm);
padding: 0.65rem 1.4rem;
cursor: pointer;
}
.gv-orderform button:hover {
background: var(--gv-accent-dark);
}
.gv-hp {
position: absolute !important;
left: -9999px !important;
}
.gv-form-notice {
grid-column: 1 / -1;
background: var(--gv-snow);
border: 1px solid var(--gv-line);
border-left: 3px solid var(--gv-accent);
border-radius: var(--gv-radius-sm);
padding: 0.75rem 1rem;
font-weight: 600;
color: var(--gv-ink);
}
@media (max-width: 640px) {
.gv-orderform {
grid-template-columns: 1fr;
}
}
/* Globala formulärfält */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
border-radius: var(--gv-radius-sm);
border: 1px solid var(--gv-line);
}
/* =========================================================
FAQ
========================================================= */
.gv-faq details {
background: var(--gv-white);
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
padding: 0.95rem 1.15rem;
margin-bottom: 0.5rem;
}
.gv-faq summary {
font-weight: 600;
color: var(--gv-ink);
cursor: pointer;
}
/* =========================================================
WooCommerce
========================================================= */
.woocommerce-products-header {
margin-bottom: 0.5rem;
}
.ast-woocommerce-container {
background: transparent !important;
}
.ast-woocommerce-container > .woocommerce-breadcrumb {
display: none;
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
margin-bottom: 1.15rem;
color: var(--gv-muted);
}
/* Produktrutnät — lika höga kort */
.woocommerce ul.products,
.woocommerce-page ul.products {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
margin: 0 !important;
padding: 0;
list-style: none;
}
.woocommerce ul.products.columns-3,
.woocommerce-page ul.products.columns-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) {
.woocommerce ul.products,
.woocommerce-page ul.products {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 782px) {
.woocommerce ul.products,
.woocommerce-page ul.products,
.woocommerce ul.products.columns-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 480px) {
.woocommerce ul.products,
.woocommerce-page ul.products,
.woocommerce ul.products.columns-3 {
grid-template-columns: 1fr;
}
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
display: none !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
float: none !important;
width: auto !important;
margin: 0 !important;
padding: 0.7rem;
background: var(--gv-white);
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
box-shadow: var(--gv-shadow);
display: flex;
flex-direction: column;
text-align: left;
position: relative;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce ul.products li.product:hover {
border-color: #c8ccd3;
box-shadow: 0 2px 10px rgba(1, 1, 1, 0.08);
}
/* Bilden: ingen ram, ingen platta — större motiv, bara luft runt om */
.woocommerce ul.products li.product a img {
width: 100%;
aspect-ratio: 1;
object-fit: contain;
background: transparent;
border: 0;
border-radius: var(--gv-radius-sm);
margin: 0 0 0.6rem !important;
padding: 0;
}
.woocommerce ul.products li.product .ast-woo-product-category {
font-size: 0.75rem;
color: var(--gv-muted);
margin-bottom: 0.15rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 0.925rem !important;
font-weight: 600;
line-height: 1.4;
color: var(--gv-ink);
padding: 0 !important;
margin: 0 0 0.3rem;
}
/* Astra lägger innehållet i en egen wrap — gör den till en flexkolumn så att
pris/inloggningsbricka och knapp alltid hamnar i kortets nederkant. */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
flex: 0 0 auto;
}
.woocommerce ul.products li.product .astra-shop-summary-wrap {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.woocommerce ul.products li.product .price {
font-weight: 700;
font-size: 1rem;
color: var(--gv-ink);
margin: auto 0 0 !important;
padding-top: 0.4rem;
display: block;
}
.woocommerce ul.products li.product .gk-price-hidden,
.woocommerce ul.products li.product .price-hidden-msg {
display: block;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
margin-top: 0.65rem !important;
width: 100%;
text-align: center;
}
.woocommerce ul.products li.product span.onsale {
position: absolute;
top: 1.2rem;
left: 1.2rem;
margin: 0;
z-index: 2;
}
.woocommerce span.onsale {
background: var(--gv-accent);
border-radius: var(--gv-radius-sm);
font-weight: 600;
font-size: 0.8125rem;
padding: 0.4em 0.65em;
min-height: 0;
min-width: 0;
line-height: 1;
}
/* Woo-knappar */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
background: var(--gv-accent);
color: #ffffff;
border-radius: var(--gv-radius-sm);
font-weight: 600;
padding: 0.6em 1.2em;
transition: background-color 0.15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
background: var(--gv-accent-dark);
color: #ffffff;
}
/* Dolt pris — neutral bricka */
.price-hidden-msg,
.gk-price-hidden {
font-size: 0.8125rem !important;
color: var(--gv-muted) !important;
background: var(--gv-snow) !important;
border: 1px solid var(--gv-line) !important;
border-radius: var(--gv-radius-sm) !important;
padding: 0.45em 0.65em !important;
line-height: 1.4;
}
.price-hidden-msg a,
.gk-price-hidden a {
color: var(--gv-accent) !important;
font-weight: 600;
text-decoration: none;
}
/* Kortkodens .woocommerce-omslag ska följa sektionens innehållsbredd */
.entry-content .is-layout-constrained > .woocommerce {
max-width: var(--wp--style--global--content-size, var(--gv-wide));
margin-left: auto;
margin-right: auto;
}
/* Paginering */
.woocommerce nav.woocommerce-pagination ul {
border: 0;
display: flex;
gap: 0.3rem;
justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li {
border: 0;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius-sm);
padding: 0.45em 0.85em;
color: var(--gv-ink);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
background: var(--gv-ink);
border-color: var(--gv-ink);
color: #ffffff;
}
/* Mitt konto */
.woocommerce-MyAccount-navigation ul {
list-style: none;
padding: 0.35rem;
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
background: var(--gv-white);
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
}
.woocommerce-MyAccount-navigation ul li {
margin: 0;
}
.woocommerce-MyAccount-navigation ul li a {
display: block;
padding: 0.5em 0.8em;
border-radius: var(--gv-radius-sm);
color: var(--gv-ink);
text-decoration: none;
font-size: 0.9375rem;
}
.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
background: var(--gv-snow);
font-weight: 600;
}
.gv-kundgrupp {
display: inline-flex;
align-items: center;
gap: 0.5em;
background: var(--gv-snow);
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius-sm);
padding: 0.35em 0.85em;
font-weight: 600;
font-size: 0.9375rem;
color: var(--gv-ink);
margin-bottom: 1rem;
}
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password {
background: var(--gv-white);
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
padding: 1.6rem;
max-width: 440px;
}
/* Produktsida */
.woocommerce div.product .product_title {
font-weight: 700;
font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}
.woocommerce div.product p.price {
color: var(--gv-ink);
font-size: 1.35rem;
font-weight: 700;
}
.woocommerce div.product div.images img {
border-radius: var(--gv-radius);
border: 1px solid var(--gv-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
border: 0;
border-bottom: 1px solid var(--gv-line);
padding: 0 !important;
margin: 0 0 1.15rem !important;
display: flex;
gap: 0.25rem;
flex-wrap: wrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
display: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
margin: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
padding: 0.55em 0.95em;
font-weight: 600;
color: var(--gv-muted);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
border-bottom-color: var(--gv-ink);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--gv-ink);
}
.woocommerce table.shop_table {
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
.woocommerce table.shop_table th {
background: var(--gv-snow);
}
/* =========================================================
Sidfot
Svart botten med butikens logotyp som svag vattenstämpel.
========================================================= */
.site-footer,
.site-below-footer-wrap,
.site-primary-footer-wrap {
background: var(--gv-footer-bg, #0f1014) !important;
color: #b9bcc4;
}
.site-primary-footer-wrap {
position: relative;
overflow: visible; /* CTA-kortet får sticka upp ovanför sidfoten */
padding-top: 0 !important;
}
/* =========================================================
CTA-kort som ligger omlott över sidfotens överkant
========================================================= */
/* Sista sektionen på sidan får extra luft så kortet alltid flyter
över ljus yta i stället för att smälta ihop med en mörk sektion. */
.entry-content > .wp-block-group:last-child {
padding-bottom: 8.5rem !important;
}
/* Sidor utan blocksektioner — butik, produktsida, kassa, konto, sökträffar —
har ingen sådan sista sektion, och då la sig kortet ovanpå produktkorten.
De får luften på innehållsytan i stället. Sidor som redan har en sista
sektion nollas här, annars räknas utrymmet två gånger. */
.site-content {
padding-bottom: 8.5rem;
}
.site-content:has(> .ast-container .entry-content > .wp-block-group:last-child) {
padding-bottom: 0;
}
.gv-cta-card {
position: relative;
z-index: 2;
margin-top: -5rem;
margin-bottom: 3rem;
background: #1b1e25;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 14px;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
overflow: hidden;
display: grid;
grid-template-columns: 1.25fr 1fr;
align-items: center;
min-height: 210px;
}
.gv-cta-card::after {
content: "";
position: absolute;
inset: 0 0 0 auto;
width: 46%;
background-image: var(--gv-cta-image);
background-size: cover;
background-position: center;
opacity: 0.55;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
pointer-events: none;
}
.gv-cta-body {
position: relative;
z-index: 1;
padding: 2.25rem 2.5rem;
grid-column: 1;
}
.gv-cta-body h2 {
color: #ffffff;
font-size: clamp(1.4rem, 2.4vw, 1.85rem);
font-weight: 700;
line-height: 1.2;
margin: 0 0 0.5rem;
max-width: 20ch;
}
.gv-cta-body p {
color: #b4b8c0;
font-size: 0.9375rem;
margin: 0 0 1.25rem;
max-width: 42ch;
}
/* Knapp till ansökningssidan */
.gv-cta-btn {
display: inline-block;
background: var(--gv-accent);
color: #ffffff !important;
border-radius: var(--gv-radius-sm);
font-weight: 600;
font-size: 0.9375rem;
padding: 0.7em 1.5em;
text-decoration: none !important;
transition: background-color 0.15s ease;
}
.gv-cta-btn:hover {
background: var(--gv-accent-dark);
color: #ffffff !important;
}
.gv-cta-note {
margin: 0.75rem 0 0 !important;
font-size: 0.8125rem !important;
color: #8b8f98 !important;
}
.gv-cta-note a {
color: #c4c7cd;
text-decoration: underline;
}
@media (max-width: 860px) {
/* Kortet lyfts bara 3rem i mobil, så luften nedanför innehållet krymper med. */
.site-content {
padding-bottom: 6rem;
}
.gv-cta-card {
grid-template-columns: 1fr;
margin-top: -3rem;
margin-bottom: 2.25rem;
min-height: 0;
}
.gv-cta-card::after {
width: 100%;
opacity: 0.18;
-webkit-mask-image: none;
mask-image: none;
}
.gv-cta-body {
padding: 1.75rem 1.5rem;
}
}
@media (max-width: 560px) {
.gv-cta-form input[type="email"],
.gv-cta-form button {
flex: 1 1 100%;
}
}
.gv-footer {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.7fr 1fr 1fr 1.15fr;
gap: 3rem 2.5rem;
padding: 0 0 2.75rem;
align-items: start;
}
/* ── Sidfot: surfplatta ────────────────────────────────── */
@media (max-width: 900px) {
.gv-footer {
grid-template-columns: 1fr 1fr;
gap: 2.25rem 2rem;
}
.gv-footer-brand {
grid-column: 1 / -1;
}
}
/* ── Sidfot: mobil ─────────────────────────────────────── */
@media (max-width: 600px) {
.gv-footer {
grid-template-columns: 1fr;
gap: 0;
padding-bottom: 2rem;
}
/* Varumärkesblocket centreras — logotyp, text och sociala ikoner */
.gv-footer-brand {
padding-bottom: 1.75rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 1.5rem;
text-align: center;
}
.gv-footer-brand p {
max-width: none;
}
.gv-footer-logo {
margin-left: auto;
margin-right: auto;
}
.gv-social {
justify-content: center;
}
.gv-footer-contact li {
justify-content: center;
}
/* Länkkolumnerna blir kompakta rader med linje emellan */
.gv-footer > div:not(.gv-footer-brand) {
padding-bottom: 1.25rem;
margin-bottom: 1.25rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.gv-footer > div:last-child {
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.gv-footer h3 {
margin-bottom: 0.75rem;
}
/* Sortiment + Företaget i två spalter, kontakt i en */
.gv-footer ul:not(.gv-footer-contact) {
columns: 2;
column-gap: 1.25rem;
}
.gv-footer ul:not(.gv-footer-contact) li {
break-inside: avoid;
}
}
/* Sociala ikoner under varumärkestexten */
.gv-social {
display: flex;
gap: 0.5rem;
margin-top: 1.25rem;
}
.gv-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--gv-radius-sm);
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.gv-social a:hover {
background: var(--gv-accent);
border-color: var(--gv-accent);
}
.gv-social svg {
width: 16px;
height: 16px;
stroke: #c4c7cd;
fill: none;
stroke-width: 1.7;
}
.gv-social a:hover svg {
stroke: #ffffff;
}
/* Logotypen är mörk — vänd den till vit så den syns på svart botten.
Har kunden en ljus logotypversion: ta bort filtret. */
.gv-footer-logo {
display: block;
max-width: 170px;
height: auto;
margin-bottom: 1.1rem;
filter: brightness(0) invert(1);
opacity: 0.92;
}
.gv-footer-brand p {
color: #9ca0a9;
font-size: 0.9375rem;
line-height: 1.6;
margin: 0 0 1rem;
max-width: 38ch;
}
.gv-footer h3 {
color: #ffffff;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 0.9rem;
}
.gv-footer ul {
list-style: none;
margin: 0;
padding: 0;
}
.gv-footer li {
margin: 0 0 0.5rem;
}
.gv-footer a {
color: #b9bcc4;
text-decoration: none;
font-size: 0.9375rem;
transition: color 0.15s ease;
}
.gv-footer a:hover {
color: #ffffff;
}
.gv-footer-contact li {
display: flex;
gap: 0.6rem;
align-items: flex-start;
color: #b9bcc4;
font-size: 0.9375rem;
}
.gv-footer-contact svg {
width: 17px;
height: 17px;
flex-shrink: 0;
margin-top: 0.2rem;
stroke: var(--gv-accent);
fill: none;
stroke-width: 1.7;
}
.gv-footer-cta {
display: inline-block;
margin-top: 0.4rem;
background: var(--gv-accent);
color: #ffffff !important;
font-weight: 600;
font-size: 0.9375rem;
border-radius: var(--gv-radius-sm);
padding: 0.55em 1.1em;
}
.gv-footer-cta:hover {
background: var(--gv-accent-dark);
color: #ffffff !important;
}
/* Nedre raden: copyright + småtext */
.site-below-footer-wrap .ast-builder-grid-row {
padding-top: 1rem;
padding-bottom: 1rem;
}
@media (max-width: 600px) {
.site-below-footer-wrap,
.site-below-footer-wrap .ast-footer-copyright {
text-align: center;
}
}
.site-below-footer-wrap {
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #9ca0a9 !important;
font-size: 0.8125rem;
}
.site-below-footer-wrap .ast-builder-html-element,
.site-below-footer-wrap .ast-footer-copyright,
.site-below-footer-wrap p {
color: #9ca0a9 !important;
}
.site-below-footer-wrap a {
color: #c4c7cd !important;
text-decoration: none;
}
.site-below-footer-wrap a:hover {
color: #ffffff;
}
.ast-footer-copyright p {
margin: 0;
}
/* =========================================================
Reducerad rörelse
========================================================= */
@media (prefers-reduced-motion: reduce) {
.gv-catcard,
.gv-quick a,
.woocommerce ul.products li.product {
transition: none;
}
}
/* =========================================================
Hjälte — sökrutan först
B2B-kunder som varit här förut vet vad de ska ha. Hjälten är
medvetet låg: en rad rubrik, sökruta, kategorigenvägar.
========================================================= */
.gv-hero {
position: relative;
display: flex;
align-items: center;
min-height: 380px;
border-radius: var(--gv-radius);
overflow: hidden;
background: var(--gv-ink);
isolation: isolate;
}
.gv-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background-image: var(--gv-hero-image);
background-size: cover;
background-position: center 42%;
}
/* Scrimmen är en ramp, inte ett lock: textsidan ligger nästan solid så
rubriken aldrig kämpar mot fotot, medan högra tredjedelen får synas —
annars är bilden bortkastad. Andra lagret är en svag topp-vinjett så
överkanten inte blir ljusare än sidhuvudet ovanför. */
.gv-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(
90deg,
rgba(1, 1, 1, 0.95) 0%,
rgba(1, 1, 1, 0.92) 36%,
rgba(1, 1, 1, 0.7) 64%,
rgba(1, 1, 1, 0.4) 100%
),
linear-gradient(
180deg,
rgba(1, 1, 1, 0.35) 0%,
rgba(1, 1, 1, 0) 45%
);
}
.gv-hero--plain::before {
display: none;
}
.gv-hero-inner {
position: relative;
width: 100%;
max-width: 680px;
padding: 3.25rem 3rem;
}
.gv-hero-eyebrow {
display: flex;
align-items: center;
gap: 0.65rem;
margin: 0 0 0.85rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.66);
}
/* Samma röda streck som står före etiketterna på inloggningssidan. */
.gv-hero-eyebrow::before {
content: "";
flex: none;
width: 26px;
height: 2px;
background: var(--gv-accent);
}
.gv-hero-title {
margin: 0 0 1.6rem;
color: #ffffff;
font-size: clamp(1.75rem, 3.6vw, 2.75rem);
line-height: 1.08;
letter-spacing: -0.02em;
font-weight: 700;
text-wrap: balance;
}
/* Sökrutan — ETT fält, inte tre delar. Skalet är vitt med 6 px luft,
förstoringsglaset leder, knappen ligger infälld i skalet. */
.gv-hero-search {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 6px;
background: var(--gv-white);
border-radius: 10px;
box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.75);
transition: box-shadow 0.15s ease;
}
.gv-hero-search:focus-within {
box-shadow:
0 0 0 3px rgba(var(--gv-accent-rgb), 0.35),
0 18px 40px -18px rgba(0, 0, 0, 0.75);
}
.gv-hero-search-icon {
flex: none;
width: 20px;
height: 20px;
margin: 0 0.15rem 0 0.75rem;
fill: none;
stroke: var(--gv-muted);
stroke-width: 2;
stroke-linecap: round;
}
.gv-hero-search input[type="search"] {
flex: 1;
min-width: 0;
height: 46px;
border: 0 !important;
background: transparent;
padding: 0 0.4rem;
font-size: 16px; /* under 16 px zoomar iOS in vid fokus */
color: var(--gv-ink);
box-shadow: none !important;
border-radius: 0;
appearance: none;
}
/* Webkit ritar ett eget kryss i type="search" — utan detta står två. */
.gv-hero-search input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
.gv-hero-search input[type="search"]:focus {
outline: none;
box-shadow: none !important;
}
.gv-hero-search input::placeholder {
color: var(--gv-muted);
}
/* Kryssknappen finns bara när något är skrivet (klassen sätts i theme.js). */
.gv-hero-clear {
flex: none;
display: none;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--gv-snow);
color: var(--gv-muted);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.gv-hero-search.has-value .gv-hero-clear {
display: inline-flex;
}
.gv-hero-clear:hover {
background: var(--gv-line);
color: var(--gv-ink);
}
.gv-hero-clear svg {
width: 13px;
height: 13px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
}
.gv-hero-search button[type="submit"] {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
height: 46px;
min-width: 112px;
border: 0;
border-radius: var(--gv-radius);
background: var(--gv-accent);
color: #ffffff;
font-size: 0.9375rem;
font-weight: 600;
padding: 0 1.4rem;
cursor: pointer;
transition: background-color 0.15s ease;
}
.gv-hero-search button[type="submit"]:hover {
background: var(--gv-accent-dark);
}
/* Ikonen i knappen är reserv för mobil — på desktop leder redan
förstoringsglaset i fältet, två glas i samma ruta är brus. */
.gv-hero-search button[type="submit"] svg {
display: none;
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
flex: none;
}
/* Kategorigenvägar */
.gv-hero-cats {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-top: 1.4rem;
}
.gv-hero-cats-label {
margin-right: 0.2rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.gv-hero-cats a {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 0.95rem;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
color: rgba(255, 255, 255, 0.92);
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gv-hero-cats a:hover {
background: #ffffff;
border-color: #ffffff;
color: var(--gv-ink);
}
@media (max-width: 782px) {
.gv-hero {
min-height: 0;
}
.gv-hero-inner {
padding: 1.85rem 1.25rem 1.6rem;
max-width: none;
}
.gv-hero::after {
background: linear-gradient(
180deg,
rgba(1, 1, 1, 0.82) 0%,
rgba(1, 1, 1, 0.92) 100%
);
}
.gv-hero-title {
margin-bottom: 1.25rem;
}
/* Fältet behöver bredden mer än den ledande ikonen — den röda
knappen bär förstoringsglaset här i stället. */
.gv-hero-search {
padding: 5px;
gap: 0.3rem;
}
.gv-hero-search-icon {
display: none;
}
.gv-hero-search input[type="search"] {
height: 44px;
padding-left: 0.75rem;
}
.gv-hero-search button[type="submit"] {
height: 44px;
min-width: 0;
padding: 0 0.95rem;
}
.gv-hero-search button[type="submit"] span {
display: none;
}
.gv-hero-search button[type="submit"] svg {
display: block;
}
/* Genvägarna scrollar i sidled i stället för att radbryta till tre rader. */
.gv-hero-cats {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
margin-inline: -1.25rem;
padding-inline: 1.25rem;
}
.gv-hero-cats::-webkit-scrollbar {
display: none;
}
.gv-hero-cats a,
.gv-hero-cats-label {
flex: none;
}
}
/* =========================================================
Köp igen — en rad, inte ett kvitto
Kunden vet vad hen beställde förra veckan; artikelraderna tog
390 px av startsidan för uppgifter som ändå står på ordern.
========================================================= */
.gv-again {
display: flex;
align-items: center;
gap: 1.1rem;
background: var(--gv-white);
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
box-shadow: var(--gv-shadow);
padding: 0.85rem 1rem;
}
/* Miniatyrerna ligger omlott — igenkänning, inte en produktlista. */
.gv-again-thumbs {
display: flex;
flex: none;
}
.gv-again-thumbs:empty {
display: none;
}
.gv-again-thumbs img,
.gv-again-rest {
width: 38px;
height: 38px;
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius-sm);
background: var(--gv-white);
object-fit: contain;
display: block;
}
.gv-again-thumbs > * + * {
margin-left: -12px;
}
.gv-again-rest {
display: flex;
align-items: center;
justify-content: center;
background: var(--gv-snow);
font-size: 0.8125rem;
font-weight: 600;
color: var(--gv-muted);
}
.gv-again-meta {
flex: 1 1 auto;
min-width: 0;
}
.gv-again-title {
display: block;
font-size: 0.9375rem;
font-weight: 700;
color: var(--gv-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-again-order {
font-weight: 500;
color: var(--gv-muted);
}
.gv-again-sub {
display: block;
margin-top: 0.1rem;
font-size: 0.875rem;
color: var(--gv-muted);
}
.gv-again-btn {
flex: none;
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 1.35rem;
border-radius: var(--gv-radius);
background: var(--gv-accent);
color: #ffffff !important;
font-weight: 600;
font-size: 15px;
text-decoration: none !important;
transition: background-color 0.15s ease;
}
.gv-again-btn:hover {
background: var(--gv-accent-dark);
}
/* =========================================================
Mitt konto — orderkort
========================================================= */
.gv-orders {
display: grid;
gap: 0.75rem;
}
.gv-order {
background: var(--gv-white);
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
box-shadow: var(--gv-shadow);
padding: 0.95rem 1.1rem 1.1rem;
}
.gv-order-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--gv-line);
}
.gv-order-nr {
font-weight: 700;
font-size: 1rem;
color: var(--gv-ink) !important;
text-decoration: none !important;
}
.gv-order-nr:hover {
color: var(--gv-accent) !important;
}
.gv-order-status {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.02em;
padding: 0.3rem 0.6rem;
border-radius: 999px;
white-space: nowrap;
}
/* Tonerna följer WholesaleKits pipeline-färger. */
.gv-order-status--slate { background: #eef0f3; color: #2b2b2b; }
.gv-order-status--blue { background: #e6f0fd; color: #1b4fa0; }
.gv-order-status--indigo { background: #ebe9fd; color: #4032a8; }
.gv-order-status--amber { background: #fdf3e0; color: #8a5a06; }
.gv-order-status--teal { background: #e0f5f1; color: #0d6257; }
.gv-order-status--orange { background: #fdeee2; color: #99460a; }
.gv-order-status--green { background: #e6f6ea; color: #146633; }
.gv-order-meta {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
margin: 0.85rem 0 0;
}
.gv-order-meta dt {
margin: 0;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--gv-muted);
}
.gv-order-meta dd {
margin: 0.2rem 0 0;
font-size: 0.9375rem;
color: var(--gv-text);
}
.gv-order-meta .gv-order-total {
font-weight: 700;
color: var(--gv-ink);
}
.gv-order-actions {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
}
.gv-order-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 1rem;
border: 1px solid var(--gv-accent);
border-radius: var(--gv-radius);
background: var(--gv-accent);
color: #ffffff !important;
font-size: 15px;
font-weight: 600;
text-decoration: none !important;
transition: background-color 0.15s ease, color 0.15s ease;
}
.gv-order-btn:hover {
background: var(--gv-accent-dark);
border-color: var(--gv-accent-dark);
}
.gv-order-btn--ghost {
background: transparent;
color: var(--gv-ink) !important;
border-color: var(--gv-line);
}
.gv-order-btn--ghost:hover {
background: var(--gv-snow);
border-color: #cdd3da;
color: var(--gv-ink) !important;
}
.gv-orders-pager {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
}
.gv-orders-empty {
background: var(--gv-white);
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
padding: 2rem 1.25rem;
text-align: center;
}
.gv-orders-empty h3 {
margin: 0 0 0.4rem;
font-size: 1.1rem;
}
.gv-orders-empty p {
margin: 0 auto 1.25rem;
max-width: 42ch;
color: var(--gv-muted);
font-size: 0.9375rem;
}
.gv-orders-empty .gv-order-btn {
flex: none;
display: inline-flex;
}
/* =========================================================
Mitt konto — kontomenyn
========================================================= */
.gv-account-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.4rem;
}
.gv-account-nav li {
margin: 0;
}
.gv-account-nav a {
display: flex;
align-items: center;
gap: 0.75rem;
min-height: 48px;
padding: 0 0.9rem;
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
background: var(--gv-white);
color: var(--gv-ink) !important;
font-weight: 500;
text-decoration: none !important;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.gv-account-nav a:hover {
border-color: var(--gv-accent);
background: var(--gv-snow);
}
.gv-account-nav .is-active a {
border-color: var(--gv-accent);
background: var(--gv-accent);
color: #ffffff !important;
}
.gv-account-icon {
display: inline-flex;
flex: none;
}
.gv-account-icon svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.gv-account-nav .is-active .gv-account-icon svg {
stroke: #ffffff;
}
@media (max-width: 782px) {
.gv-account-nav ul {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gv-account-nav a {
font-size: 0.875rem;
padding: 0 0.7rem;
gap: 0.5rem;
}
.gv-order-meta {
gap: 0.35rem;
}
.gv-order-meta dt {
font-size: 0.6875rem;
}
.gv-order-meta dd {
font-size: 0.875rem;
}
}
/* =========================================================
Mobilpolering
========================================================= */
/* Astra lägger 58 px toppadding på innehållsytan plus 22 px på artikeln.
På en telefon ligger redan 173 px sidhuvud och brödsmula ovanför — då
blir det ett tomt fält innan rubriken ens syns. */
@media (max-width: 782px) {
.ast-container > .content-area,
.content-area.primary,
.ast-separate-container .content-area {
padding-top: 1.25rem !important;
}
.site-main > article,
.ast-article-single,
.ast-article-post {
padding-top: 0 !important;
}
/* Brödsmulan blir en tunn rad i stället för en egen remsa. */
.ast-header-breadcrumb {
padding-block: 0.35rem !important;
}
}
/* Fokusmarkering: webbläsarens egen ring dyker upp vid tryck på mobil och
ser ut som ett fel. Tangentbordsfokus ska däremot alltid synas. */
.gv-wish,
.gv-wish-link,
.gv-rail-nav,
.gv-search-close,
.gv-hero-cats a,
.gv-order-btn,
.gv-again-btn,
.gv-account-nav a {
-webkit-tap-highlight-color: transparent;
}
.gv-wish:focus,
.gv-wish-link:focus,
.gv-rail-nav:focus,
.gv-search-close:focus,
.gv-hero-cats a:focus,
.gv-order-btn:focus,
.gv-again-btn:focus,
.gv-account-nav a:focus {
outline: none !important;
}
.gv-wish:focus-visible,
.gv-wish-link:focus-visible,
.gv-rail-nav:focus-visible,
.gv-search-close:focus-visible,
.gv-hero-cats a:focus-visible,
.gv-order-btn:focus-visible,
.gv-again-btn:focus-visible,
.gv-account-nav a:focus-visible {
outline: 2px solid var(--gv-accent) !important;
outline-offset: 2px;
}
/* Upp-till-toppen låg över "Visa"-knappen i orderlistan. */
@media (max-width: 782px) {
#ast-scroll-top.gv-scrolltop {
width: 38px !important;
height: 38px !important;
line-height: 38px !important;
right: 12px !important;
bottom: 76px !important;
}
}
/* =========================================================
Mitt konto — kontoöversikt
========================================================= */
.gv-dash {
display: grid;
gap: 1.25rem;
}
.gv-dash-hello {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.gv-dash-hello h2 {
margin: 0;
font-size: clamp(1.25rem, 2.4vw, 1.6rem);
line-height: 1.2;
}
.gv-dash-firma {
margin: 0.2rem 0 0;
color: var(--gv-muted);
font-size: 0.9375rem;
}
/* Nivåbrickan ligger under "Kundnivåer" längre ner — en gemensam
palett i stället för en svart platta. */
/* Nyckeltalen */
.gv-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem;
}
.gv-stat {
display: flex;
flex-direction: column;
gap: 0.15rem;
background: var(--gv-white);
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
box-shadow: var(--gv-shadow);
padding: 0.9rem 1rem 1rem;
}
.gv-stat-label {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--gv-muted);
}
.gv-stat-value {
font-size: clamp(1.15rem, 2.2vw, 1.5rem);
font-weight: 700;
color: var(--gv-ink);
line-height: 1.2;
}
/* WooCommerce lägger in och valutasymbol — håll dem i samma stil. */
.gv-stat-value .woocommerce-Price-amount,
.gv-stat-value bdi {
font: inherit;
color: inherit;
}
.gv-stat-note {
font-size: 0.8125rem;
color: var(--gv-muted);
}
/* Block med rubrik */
.gv-dash-block h3 {
margin: 0 0 0.75rem;
font-size: 1.05rem;
font-weight: 700;
color: var(--gv-ink);
}
/* Mest köpta artiklar */
.gv-top {
list-style: none;
margin: 0;
padding: 0;
background: var(--gv-white);
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
box-shadow: var(--gv-shadow);
overflow: hidden;
}
.gv-top-row {
display: grid;
grid-template-columns: 46px minmax(0, 1fr) auto;
align-items: center;
gap: 0.85rem;
padding: 0.7rem 1rem;
border-bottom: 1px solid var(--gv-line);
margin: 0;
}
.gv-top-row:last-child {
border-bottom: 0;
}
.gv-top-thumb img {
width: 46px;
height: 46px;
object-fit: contain;
border-radius: 4px;
display: block;
}
.gv-top-body {
display: flex;
flex-direction: column;
gap: 0.35rem;
min-width: 0;
}
.gv-top-name {
font-size: 0.9375rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-top-name a {
color: var(--gv-ink);
text-decoration: none;
}
.gv-top-name a:hover {
color: var(--gv-accent);
}
/* Stapeln visar hur artikeln ligger till mot den mest köpta. */
.gv-top-bar {
display: block;
height: 5px;
border-radius: 999px;
background: var(--gv-snow);
overflow: hidden;
}
.gv-top-bar i {
display: block;
height: 100%;
border-radius: 999px;
background: var(--gv-accent);
}
.gv-top-qty {
font-size: 0.875rem;
font-weight: 700;
color: var(--gv-ink);
white-space: nowrap;
}
/* Genvägar längst ner */
.gv-dash-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.gv-dash-links a {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 0.9rem;
border: 1px solid var(--gv-line);
border-radius: 999px;
background: var(--gv-white);
color: var(--gv-ink) !important;
font-size: 0.875rem;
font-weight: 500;
text-decoration: none !important;
}
.gv-dash-links a:hover {
border-color: var(--gv-accent);
color: var(--gv-accent) !important;
}
@media (max-width: 782px) {
.gv-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gv-dash-hello h2 {
font-size: 1.25rem;
}
.gv-top-row {
grid-template-columns: 40px minmax(0, 1fr) auto;
gap: 0.7rem;
padding: 0.65rem 0.85rem;
}
.gv-top-thumb img {
width: 40px;
height: 40px;
}
}
/* =========================================================
Kontomenyn — rättning
Astra ritar egna ramar på listan och färgar den aktiva posten,
vilket gjorde den aktiva texten vit på ljus platta.
========================================================= */
.woocommerce-MyAccount-navigation.gv-account-nav,
.gv-account-nav ul,
.gv-account-nav li {
border: 0 !important;
background: none !important;
box-shadow: none !important;
list-style: none !important;
}
.gv-account-nav li::before,
.gv-account-nav li::after {
display: none !important;
}
.gv-account-nav a {
flex-wrap: nowrap !important;
background: var(--gv-white) !important;
border: 1px solid var(--gv-line) !important;
color: var(--gv-ink) !important;
}
.gv-account-nav a:hover {
border-color: var(--gv-accent) !important;
background: var(--gv-snow) !important;
}
.gv-account-nav li.is-active a,
.gv-account-nav li.woocommerce-MyAccount-navigation-link--is-active a {
background: var(--gv-accent) !important;
border-color: var(--gv-accent) !important;
color: #ffffff !important;
}
.gv-account-nav .gv-account-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* WholesaleKits kundgruppsbricka, om ett annat tema slår på den igen. */
.gk-account-group {
margin-top: 1rem;
padding: 0.75rem 1rem;
background: var(--gv-snow);
border-left: 4px solid var(--gv-accent);
border-radius: 0 var(--gv-radius) var(--gv-radius) 0;
font-size: 0.9375rem;
}
@media (max-width: 782px) {
/* En rad som scrollar i sidled — sju staplade rutor åt gången
tryckte ner själva innehållet under vikningen. */
.gv-account-nav ul {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: max-content;
overflow-x: auto;
scrollbar-width: none;
gap: 0.4rem;
margin-inline: -1.25rem;
padding-inline: 1.25rem;
padding-bottom: 0.15rem;
}
.gv-account-nav ul::-webkit-scrollbar {
display: none;
}
.gv-account-nav a {
min-height: 40px;
border-radius: 999px !important;
white-space: nowrap;
}
}
/* Priser radbryter aldrig mitt i beloppet — tusentalsavgränsaren är ett
mellanslag ("1 200,00 kr"), och utan det här hamnar "200,00 kr" på egen rad. */
.woocommerce-Price-amount,
.gv-stat-value,
.gv-order-total {
white-space: nowrap;
}
/* =========================================================
Kundnivåer — grundvärden
Bas, Silver och Guld är samma värden som WholesaleKits
--wk-tier-* och Hubbens groupMeta (agency-brand/02-palette.md).
VIP avviker sedan 2026-07-30: butiken visar grafit med
silverskimrande text i stället för lila. Ändras det tillbaka
räcker det att byta här och i .gv-tier--vip längre ner.
Utseendet ligger i "Kundnivåbrickan" — här bara färgerna.
========================================================= */
:root {
--gv-tier-bas-bg: #eef1f5;
--gv-tier-bas-fg: #48525f;
--gv-tier-bas-bd: #d5dbe3;
--gv-tier-silver-bg: #dde3ea;
--gv-tier-silver-fg: #2c3542;
--gv-tier-silver-bd: #b9c3cf;
--gv-tier-guld-bg: #f3e0a8;
--gv-tier-guld-fg: #54400a;
--gv-tier-guld-bd: #d9bb5e;
--gv-tier-vip-bg: #1b1f25;
--gv-tier-vip-fg: #dbe2ea;
--gv-tier-vip-bd: #5a626d;
}
/* =========================================================
Mitt konto — luft och rytm
Menyraden satt direkt mot innehållet på varje sida. Allt
nedan handlar om att ge sidan andrum utan att sprida ut den.
========================================================= */
/* Menyn måste släppa innehållet under sig. */
.woocommerce-MyAccount-navigation.gv-account-nav {
margin-bottom: 2rem !important;
}
.woocommerce-MyAccount-content {
margin-top: 0 !important;
}
/* Rubriken på kontosidan får luft ner till menyn. */
.woocommerce-account .entry-title,
.woocommerce-account h1.page-title {
margin-bottom: 1.5rem !important;
}
/* Översikten */
.gv-dash {
gap: 2rem;
}
.gv-dash-hello {
gap: 1.25rem;
}
.gv-dash-hello h2 {
line-height: 1.25;
}
.gv-dash-firma {
margin-top: 0.35rem;
}
/* Nyckeltalen */
.gv-stats {
gap: 0.9rem;
}
.gv-stat {
gap: 0.3rem;
padding: 1.15rem 1.25rem 1.25rem;
}
.gv-stat-label {
margin-bottom: 0.15rem;
}
.gv-stat-note {
margin-top: 0.1rem;
}
/* Block */
.gv-dash-block h3 {
margin-bottom: 1rem;
font-size: 1.1rem;
}
/* Orderkort */
.gv-order {
padding: 1.2rem 1.3rem 1.3rem;
}
.gv-order-head {
padding-bottom: 1rem;
}
.gv-order-meta {
margin-top: 1.1rem;
gap: 0.75rem;
}
.gv-order-meta dd {
margin-top: 0.35rem;
}
.gv-order-actions {
margin-top: 1.3rem;
gap: 0.65rem;
}
.gv-orders {
gap: 1rem;
}
/* Mest köpta */
.gv-top-row {
padding: 0.95rem 1.2rem;
gap: 1rem;
}
.gv-top-body {
gap: 0.5rem;
}
/* Genvägar */
.gv-dash-links {
gap: 0.6rem;
margin-top: 0.25rem;
}
.gv-dash-links a {
min-height: 44px;
padding: 0 1.1rem;
}
/* Köp igen: miniatyrer + text på första raden, knappen i full bredd under —
på 375 px får inte knappen och texten trängas på samma rad.
(Reglerna omkring här ligger på toppnivå trots att de ser ut som
mobilputs — därför en egen media-fråga i stället för att lita på den.) */
@media (max-width: 782px) {
.gv-again {
flex-wrap: wrap;
gap: 0.85rem;
padding: 0.9rem 1rem 1rem;
}
.gv-again-meta {
flex: 1 1 140px;
}
.gv-again-btn {
flex: 1 0 100%;
}
}
/* =========================================================
Kontomenyn — ikonerna i linje
Ikonspannet saknade fast storlek, så svg:n drog i baslinjen
och låg ett par pixlar för högt bredvid texten.
========================================================= */
.gv-account-icon {
width: 20px;
height: 20px;
align-items: center;
justify-content: center;
line-height: 0;
}
.gv-account-icon svg {
display: block;
width: 18px;
height: 18px;
}
/* Astra sätter display:block på kontomenyns länkar med högre specificitet.
Följden: ankaret var aldrig en flexbox, gap gjorde ingenting, och den
20 px höga ikonen hamnade på textens baslinje — fyra pixlar för högt. */
.gv-account-nav a {
display: flex !important;
align-items: center !important;
gap: 0.6rem;
padding: 0 1.05rem;
}
@media (max-width: 782px) {
.woocommerce-MyAccount-navigation.gv-account-nav {
margin-bottom: 1.75rem !important;
}
.gv-account-nav a {
min-height: 42px;
padding: 0 1rem;
font-size: 0.9375rem;
}
/* Raden scrollar — en tonad kant visar att det finns mer åt höger. */
.gv-account-nav {
position: relative;
}
.gv-account-nav::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: -1.25rem;
width: 2rem;
pointer-events: none;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--gv-white));
}
.gv-dash {
gap: 1.6rem;
}
.gv-stats {
gap: 0.75rem;
}
.gv-stat {
padding: 1rem 1.05rem 1.1rem;
}
.gv-order {
padding: 1.1rem 1.15rem 1.2rem;
}
.gv-top-row {
padding: 0.85rem 1rem;
gap: 0.85rem;
}
}
/* =========================================================
Kontoformulären (Kontouppgifter, Adresser)
Astras standardfält är tunna gråa rutor utan rytm.
========================================================= */
.woocommerce-account .woocommerce-form-row,
.woocommerce-account .form-row {
margin-bottom: 1.15rem;
}
.woocommerce-account .woocommerce-EditAccountForm label,
.woocommerce-account .woocommerce-address-fields label,
.woocommerce-account .woocommerce-form label {
display: block;
margin-bottom: 0.4rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--gv-ink);
}
.woocommerce-account .woocommerce-form input[type="text"],
.woocommerce-account .woocommerce-form input[type="email"],
.woocommerce-account .woocommerce-form input[type="tel"],
.woocommerce-account .woocommerce-form input[type="password"],
.woocommerce-account .woocommerce-address-fields input[type="text"],
.woocommerce-account .woocommerce-address-fields input[type="tel"],
.woocommerce-account .woocommerce-address-fields select {
width: 100%;
min-height: 46px;
padding: 0.6rem 0.85rem;
border: 1px solid var(--gv-line) !important;
border-radius: var(--gv-radius) !important;
background: var(--gv-white);
font-size: 16px; /* iOS zoomar in under 16 px */
color: var(--gv-ink);
}
.woocommerce-account .woocommerce-form input:focus,
.woocommerce-account .woocommerce-address-fields input:focus,
.woocommerce-account .woocommerce-address-fields select:focus {
border-color: var(--gv-accent) !important;
outline: none;
box-shadow: 0 0 0 3px rgba(var(--gv-accent-rgb), 0.12);
}
.woocommerce-account .woocommerce-form .required {
color: var(--gv-accent);
text-decoration: none;
}
/* "Ändra lösenord" är en egen avdelning, inte en rubrik i luften. */
.woocommerce-account fieldset {
margin-top: 1.75rem;
padding: 1.25rem 0 0;
border: 0;
border-top: 1px solid var(--gv-line);
}
.woocommerce-account fieldset legend {
padding: 0;
font-size: 1.05rem;
font-weight: 700;
color: var(--gv-ink);
}
.woocommerce-account .woocommerce-form em,
.woocommerce-account .woocommerce-form span.description {
display: block;
margin-top: 0.4rem;
font-size: 0.8125rem;
font-style: normal;
color: var(--gv-muted);
}
.woocommerce-account .woocommerce-Button,
.woocommerce-account button[type="submit"].woocommerce-Button {
min-height: 46px;
padding: 0 1.5rem;
border-radius: var(--gv-radius) !important;
background: var(--gv-accent) !important;
color: #ffffff !important;
border: 0 !important;
font-size: 15px;
font-weight: 600;
margin-top: 0.5rem;
}
.woocommerce-account .woocommerce-Button:hover {
background: var(--gv-accent-dark) !important;
}
/* Artikelnummer på produktkorten */
.gv-sku {
display: block;
margin: 0.15rem 0 0.35rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--gv-muted);
font-variant-numeric: tabular-nums;
}
/* =========================================================
Mitt konto — desktoplayout
Kontomenyn låg som ett brett block ovanför innehållet och sidan
såg ut som en mobilsida uppförstorad. På desktop är det i stället
två spalter: menyn står kvar i vänsterkanten medan innehållet
scrollar.
========================================================= */
@media (min-width: 783px) {
/* :has()-vakten gör att inloggningssidan (som saknar meny) inte
dras in i rutnätet. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
display: grid;
grid-template-columns: 272px minmax(0, 1fr);
align-items: start;
gap: 3rem;
}
/* Woos clearfix (`.woocommerce::before`) blir ett eget rutnätsobjekt och
la beslag på första cellen — menyn hamnade i högerspalten och
innehållet i en ny rad, 272 px brett. Döda pseudoelementen och placera
spalterna uttryckligen. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::before,
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::after {
content: none !important;
display: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
grid-column: 1;
grid-row: 1;
}
.woocommerce-account .woocommerce-MyAccount-content {
grid-column: 2;
grid-row: 1;
}
/* Finns en avisering (fel lösenord, sparad adress …) lägger den sig
över båda spalterna och skjuter ner dem en rad. */
.woocommerce-account .woocommerce:has(.woocommerce-notices-wrapper) .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce:has(.woocommerce-notices-wrapper) .woocommerce-MyAccount-content {
grid-row: 2;
}
.woocommerce-account .woocommerce-notices-wrapper {
grid-column: 1 / -1;
grid-row: 1;
}
/* WooCommerce flytar spalterna och sätter procentbredder — i ett
rutnät ignoreras float, men bredderna måste nollställas. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
float: none !important;
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation.gv-account-nav {
margin-bottom: 0 !important;
position: sticky;
top: 7.5rem; /* klistrigt sidhuvud + luft */
}
.admin-bar .woocommerce-account .woocommerce-MyAccount-navigation.gv-account-nav {
top: 9.5rem;
}
.gv-account-nav a {
min-height: 46px;
font-size: 0.9375rem;
}
/* Innehållet får samma andrum som spaltbredden bjuder på. */
.woocommerce-account .woocommerce-MyAccount-content {
min-width: 0;
}
.gv-dash {
gap: 2.25rem;
}
.gv-stats {
gap: 1rem;
}
.gv-stat {
padding: 1.35rem 1.4rem 1.4rem;
}
.gv-order {
padding: 1.4rem 1.5rem 1.5rem;
}
/* Två knappar i full bredd ser tomt ut på en bred yta. */
.gv-order-actions .gv-order-btn {
flex: 0 1 auto;
min-width: 12rem;
}
.gv-top-row {
padding: 1.05rem 1.4rem;
}
/* Formulären ska inte sträcka ut sig i oändlighet. */
.woocommerce-account .woocommerce-MyAccount-content > form {
max-width: 46rem;
}
}
/* =========================================================
Logga ut — avskild och röd
Posten låg mitt i menyn och såg ut som vilken sida som helst.
Nu är den avdelad med en linje och röd i konturform: syns
tydligt, men fylls först vid hovring så den inte träffas av
misstag.
========================================================= */
.gv-account-nav a.gv-logout,
.gv-dash-links a.gv-logout {
color: var(--gv-accent) !important;
border-color: rgba(var(--gv-accent-rgb), 0.4) !important;
background: var(--gv-white) !important;
font-weight: 600;
}
.gv-account-nav a.gv-logout:hover,
.gv-dash-links a.gv-logout:hover {
background: var(--gv-accent) !important;
border-color: var(--gv-accent) !important;
color: #ffffff !important;
}
.gv-account-nav a.gv-logout .gv-account-icon svg {
stroke: currentColor;
}
@media (min-width: 783px) {
.gv-account-nav .gv-account-logout {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--gv-line);
}
}
@media (max-width: 782px) {
/* Menyn är en scrollande pillerrad — där blir en linje fel.
Ett mellanrum räcker för att skilja posten från de andra. */
.gv-account-nav .gv-account-logout {
margin-left: 0.6rem;
}
}
/* =========================================================
Inloggning — två spalter på desktop
Woos standardsida är ett smalt formulär i en tom yta. Formuläret
ligger nu i ett kort med panelen "Inte kund ännu?" bredvid.
========================================================= */
.gv-login {
display: grid;
gap: 1.5rem;
max-width: 1060px;
margin: 0 auto;
align-items: start;
}
@media (min-width: 783px) {
.gv-login {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: 2.5rem;
}
}
.gv-login-card,
.gv-login-aside {
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
padding: 1.75rem 1.5rem 1.6rem;
}
.gv-login-card {
background: var(--gv-white);
box-shadow: var(--gv-shadow);
}
.gv-login-aside {
background: var(--gv-snow);
}
@media (min-width: 783px) {
.gv-login-card,
.gv-login-aside {
padding: 2.25rem 2.25rem 2rem;
}
}
.gv-login h2 {
margin: 0 0 0.5rem;
font-size: 1.35rem;
font-weight: 700;
}
.gv-login-lead {
margin: 0 0 1.5rem;
color: var(--gv-muted);
font-size: 0.9375rem;
max-width: 46ch;
}
.gv-login .woocommerce-form-row {
margin-bottom: 1.15rem;
}
/* Kom ihåg mig och glömt lösenord står på samma rad — inte staplade
med formulärets radmarginal emellan. */
.gv-login-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
margin: 0.25rem 0 1.35rem;
}
.gv-login-row label {
display: inline-flex !important;
align-items: center;
gap: 0.5rem;
margin: 0 !important;
font-weight: 500 !important;
font-size: 0.9375rem !important;
color: var(--gv-text) !important;
cursor: pointer;
}
.gv-login-row input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--gv-accent);
}
.gv-login-row .woocommerce-LostPassword {
margin: 0;
font-size: 0.9375rem;
font-weight: 500;
color: var(--gv-accent);
text-decoration: none;
}
.gv-login-row .woocommerce-LostPassword:hover {
text-decoration: underline;
}
.gv-login-submit {
margin: 0 !important;
}
.gv-login-submit button {
width: 100%;
min-height: 48px;
padding: 0 1.5rem;
border: 0 !important;
border-radius: var(--gv-radius) !important;
background: var(--gv-accent) !important;
color: #ffffff !important;
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
.gv-login-submit button:hover {
background: var(--gv-accent-dark) !important;
}
/* Panelen för den som inte är kund */
.gv-login-usp {
list-style: none;
margin: 0 0 1.75rem;
padding: 0;
display: grid;
gap: 0.7rem;
}
.gv-login-usp li {
position: relative;
padding-left: 1.75rem;
font-size: 0.9375rem;
color: var(--gv-text);
}
.gv-login-usp li::before {
content: "";
position: absolute;
left: 0;
top: 0.35em;
width: 0.75rem;
height: 0.42rem;
border-left: 2px solid var(--gv-accent);
border-bottom: 2px solid var(--gv-accent);
transform: rotate(-45deg);
}
.gv-login-apply {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 1.5rem;
border: 1px solid var(--gv-ink);
border-radius: var(--gv-radius);
background: var(--gv-ink);
color: #ffffff !important;
font-size: 15px;
font-weight: 600;
text-decoration: none !important;
}
.gv-login-apply:hover {
background: var(--gv-accent);
border-color: var(--gv-accent);
}
.gv-login-help {
margin: 1.25rem 0 0;
font-size: 0.875rem;
color: var(--gv-muted);
}
/* Aviseringen på inloggningssidan följer korten, inte sidbredden. */
body:not(.logged-in).woocommerce-account .woocommerce-notices-wrapper {
max-width: 1060px;
margin: 0 auto 1.25rem;
}
/* =========================================================
Toppluft på desktop
Astra la 64 px marginal på innehållsytan plus 85 px padding på
artikeln — 150 px tomt fält mellan brödsmulan och sidrubriken.
Mobilen är redan trimmad längre upp; det här är desktopmotsvarigheten.
========================================================= */
@media (min-width: 783px) {
.ast-container > .content-area,
.content-area.primary,
.ast-separate-container .content-area {
margin-top: 0 !important;
}
.site-main > article,
.ast-article-single,
.ast-article-post {
padding-top: 3rem !important;
}
}
/* Inloggningssidan är centrerad — då ska rubriken vara det med, annars
står "Mitt konto" i vänsterkanten medan korten ligger mitt på sidan. */
@media (min-width: 783px) {
body:not(.logged-in).woocommerce-account .entry-header,
body:not(.logged-in).woocommerce-account .entry-title {
text-align: center;
}
body:not(.logged-in).woocommerce-account .entry-title {
margin-bottom: 2rem !important;
}
}
/* =========================================================
Kundnivåbrickan — en trappa i material, inte i färgstyrka
Bas är avsiktligt platt. Silver får en svag metallövertoning,
guld en varmare med glöd, och VIP är den enda mörka: grafit
med silverskimrande text. Ingen dekor, inga ikoner — nivån
ska kännas exklusiv, inte som ett spelmärke.
========================================================= */
.gv-tier {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
padding: 0.6rem 1.05rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
border-radius: 999px;
border: 1px solid transparent;
white-space: nowrap;
isolation: isolate;
}
.gv-tier-name {
display: block;
line-height: 1;
}
/* ── Bas: platt. Inget skimmer, ingen skugga. ───────────── */
.gv-tier--bas {
background: var(--gv-tier-bas-bg);
color: var(--gv-tier-bas-fg);
border-color: var(--gv-tier-bas-bd);
}
/* ── Silver: en aning metall, inte mer. ─────────────────── */
.gv-tier--silver {
background: linear-gradient(180deg, #f6f9fc 0%, var(--gv-tier-silver-bg) 55%, #cdd6e0 100%);
color: var(--gv-tier-silver-fg);
border-color: var(--gv-tier-silver-bd);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
/* ── Guld: varm övertoning, tunn glöd, inget glitter. ───── */
.gv-tier--guld {
background: linear-gradient(180deg, #fdf4d6 0%, var(--gv-tier-guld-bg) 42%, #dfba5f 100%);
color: var(--gv-tier-guld-fg);
border-color: var(--gv-tier-guld-bd);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 1px 6px rgba(158, 120, 20, 0.22);
}
/* ── VIP: grafit med silverskimrande text. ──────────────── */
.gv-tier--vip {
background: linear-gradient(150deg, #3a4048 0%, #1b1f25 45%, #0a0c0f 100%);
border-color: #5a626d;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.16),
0 2px 10px rgba(0, 0, 0, 0.32);
}
/* Texten är övertoningen — därför background-clip på namnet och inte
på brickan, som redan bär grafiten. */
.gv-tier--vip .gv-tier-name {
background: linear-gradient(180deg, #ffffff 0%, #dbe2ea 42%, #97a2b0 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Ingen background-clip (äldre webbläsare) → vanlig ljus text i stället
för en osynlig etikett. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
.gv-tier--vip .gv-tier-name {
background: none;
color: #eef2f7;
}
}
/* =========================================================
Mitt konto — jämna kort
Alla plattor i kontot delar ram, radie, skugga och padding.
Ligger de på rad blir de dessutom lika höga.
========================================================= */
.gv-stat,
.gv-order,
.gv-address-card,
.gv-export-row,
.gv-top {
background: var(--gv-white);
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
box-shadow: var(--gv-shadow);
}
.gv-stats,
.gv-address-grid {
align-items: stretch;
}
.gv-stat {
justify-content: flex-start;
}
/* Nyckeltalens etikett får två rader utan att värdet hoppar ur linje. */
.gv-stat-label {
min-height: 2.1em;
display: flex;
align-items: flex-start;
}
.gv-stat-value {
margin-top: auto;
}
/* =========================================================
Adresser
Woos mall lägger rubriken i en egen platta och adressen i en
ruta inuti kortet — låda i låda i låda. Nu ett kort per adress,
lika höga, med knappen i botten.
========================================================= */
.gv-address-lead {
margin: 0 0 1.5rem;
color: var(--gv-muted);
font-size: 0.9375rem;
}
.gv-address-grid {
display: grid;
gap: 1.25rem;
grid-template-columns: minmax(0, 1fr);
max-width: 46rem;
}
/* Woos clearfix blir ett rutnätsobjekt och skjuter korten ur led. */
.gv-address-grid::before,
.gv-address-grid::after {
content: none !important;
display: none !important;
}
@media (min-width: 783px) {
.gv-address-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}
}
.gv-address-card {
float: none !important;
width: auto !important;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.9rem;
padding: 1.4rem 1.5rem 1.5rem;
}
.gv-address-title {
margin: 0 !important;
font-size: 1.05rem !important;
font-weight: 700;
color: var(--gv-ink);
}
/* Astra ritar en 1 px grå ram med 15 px padding runt själva adressen —
en ruta inuti kortet. Kräver !important, Astras selektor väger mer. */
.gv-address-card address,
.gv-address-body {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
font-style: normal;
font-size: 0.9375rem;
line-height: 1.65;
color: var(--gv-text);
}
.gv-address-empty {
margin: 0;
color: var(--gv-muted);
font-size: 0.9375rem;
}
.gv-address-edit {
flex: none;
margin-top: auto;
min-width: 9rem;
}
/* Rubrikplattan från Woos standardmall, om något plugin ritar den ändå. */
.woocommerce-Address-title {
background: none !important;
border: 0 !important;
padding: 0 !important;
}
/* =========================================================
Visa fler beställningar
========================================================= */
.gv-orders-more {
display: flex;
justify-content: center;
margin-top: 1.25rem;
}
.gv-orders-more-btn {
flex: none;
min-width: 16rem;
}
.gv-orders-more-btn.is-loading {
opacity: 0.6;
pointer-events: none;
}
/* =========================================================
Nedladdningar — export av egen historik
========================================================= */
.gv-export {
display: grid;
gap: 0.85rem;
max-width: 46rem;
}
.gv-export-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
padding: 1.15rem 1.35rem;
}
.gv-export-text {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.gv-export-name {
font-weight: 700;
color: var(--gv-ink);
}
.gv-export-note {
font-size: 0.875rem;
color: var(--gv-muted);
}
.gv-export-row .gv-order-btn {
flex: none;
min-width: 10rem;
}
.gv-export-help {
margin: 1rem 0 0;
font-size: 0.875rem;
color: var(--gv-muted);
max-width: 46rem;
}
@media (max-width: 520px) {
.gv-export-row .gv-order-btn {
width: 100%;
}
}
/* =========================================================
Kundnivån i översiktens rubrik
Brickan låg ensam till höger utan att säga vad den var, och
flöt inte i linje med hälsningen. Nu en liten etikett över
brickan, båda högerställda och toppjusterade mot rubriken.
========================================================= */
.gv-dash-hello {
align-items: flex-start;
}
.gv-tier-wrap {
flex: none;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.4rem;
padding-top: 0.15rem; /* optisk linje mot rubrikens versalhöjd */
}
.gv-tier-label {
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--gv-muted);
line-height: 1;
}
@media (max-width: 560px) {
.gv-dash-hello {
flex-direction: column;
gap: 0.9rem;
}
.gv-tier-wrap {
align-items: flex-start;
padding-top: 0;
}
}
/* =========================================================
Mitt konto — Dokument
En rad per order, filerna som klickbara plattor under.
========================================================= */
.gv-docs {
display: grid;
gap: 1rem;
max-width: 46rem;
}
.gv-doc {
background: var(--gv-white);
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
box-shadow: var(--gv-shadow);
padding: 1.15rem 1.25rem 1.25rem;
}
.gv-doc-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding-bottom: 0.9rem;
border-bottom: 1px solid var(--gv-line);
}
.gv-doc-order {
font-weight: 700;
font-size: 1rem;
color: var(--gv-ink) !important;
text-decoration: none !important;
}
.gv-doc-order:hover {
color: var(--gv-accent) !important;
}
.gv-doc-date {
font-size: 0.875rem;
color: var(--gv-muted);
white-space: nowrap;
}
.gv-doc-files {
display: grid;
gap: 0.5rem;
margin-top: 0.9rem;
}
.gv-doc-file {
display: flex;
align-items: center;
gap: 0.85rem;
min-height: 56px;
padding: 0.55rem 0.9rem;
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
background: var(--gv-soft);
color: var(--gv-ink) !important;
text-decoration: none !important;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.gv-doc-file:hover {
border-color: var(--gv-accent);
background: var(--gv-white);
}
.gv-doc-icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--gv-radius-sm);
background: var(--gv-white);
border: 1px solid var(--gv-line);
color: var(--gv-muted);
}
.gv-doc-file:hover .gv-doc-icon {
color: var(--gv-accent);
border-color: var(--gv-accent);
}
.gv-doc-icon svg {
width: 18px;
height: 18px;
display: block;
}
/* Fakturan är det dokument folk letar efter — den får accentfärgad ikon. */
.gv-doc-file--faktura .gv-doc-icon {
color: var(--gv-accent);
}
.gv-doc-text {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
flex: 1;
}
.gv-doc-name {
font-weight: 600;
font-size: 0.9375rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-doc-note {
font-size: 0.8125rem;
color: var(--gv-muted);
}
.gv-doc-ext {
flex: none;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--gv-muted);
border: 1px solid var(--gv-line);
border-radius: 999px;
padding: 0.2rem 0.55rem;
background: var(--gv-white);
}
@media (max-width: 520px) {
.gv-doc-note {
display: none;
}
.gv-doc-file {
min-height: 50px;
gap: 0.7rem;
}
}
/* =========================================================
Dokument — ihopfällda rader
Varje order är en . Ihopfälld visar den vad som
finns att öppna ("1 faktura · 1 följesedel"), så listan går
att skumma utan att fällas ut.
========================================================= */
.gv-doc {
padding: 0;
overflow: hidden;
}
.gv-doc-head {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 1rem 1.25rem;
border-bottom: 0;
cursor: pointer;
list-style: none;
-webkit-tap-highlight-color: transparent;
}
/* Safari ritar en egen triangel som inte går att styla. */
.gv-doc-head::-webkit-details-marker {
display: none;
}
.gv-doc-head:hover {
background: var(--gv-soft);
}
.gv-doc[open] .gv-doc-head {
border-bottom: 1px solid var(--gv-line);
}
.gv-doc-caret {
flex: none;
display: inline-flex;
width: 18px;
height: 18px;
color: var(--gv-muted);
transition: transform 0.15s ease;
}
.gv-doc-caret svg {
width: 18px;
height: 18px;
display: block;
}
.gv-doc[open] .gv-doc-caret {
transform: rotate(90deg);
}
.gv-doc-order {
flex: none;
font-weight: 700;
font-size: 1rem;
color: var(--gv-ink);
}
/* Sammanfattningen tar mellanrummet och trycker datumet till kanten. */
.gv-doc-sum {
flex: 1;
min-width: 0;
font-size: 0.875rem;
color: var(--gv-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gv-doc-files {
display: grid;
gap: 0.5rem;
margin-top: 0;
padding: 1rem 1.25rem 1.25rem;
}
.gv-doc-order-link {
justify-self: start;
margin-top: 0.25rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--gv-accent) !important;
text-decoration: none !important;
}
.gv-doc-order-link:hover {
text-decoration: underline !important;
}
.gv-doc-head:focus-visible {
outline: 2px solid var(--gv-accent);
outline-offset: -2px;
}
@media (max-width: 560px) {
/* Sammanfattningen får egen rad — annars trängs den med datumet. */
.gv-doc-head {
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
padding: 0.9rem 1rem;
}
.gv-doc-sum {
flex: 1 0 100%;
order: 3;
padding-left: calc(18px + 0.85rem);
}
.gv-doc-date {
margin-left: auto;
}
.gv-doc-files {
padding: 0.9rem 1rem 1rem;
}
}
/* Sektionerna i kontot behöver luft mellan sig — annars klistrar nästa
rubrik direkt mot föregående lista. */
.woocommerce-MyAccount-content .gv-dash-block + .gv-dash-block {
margin-top: 2.75rem;
}
@media (max-width: 782px) {
.woocommerce-MyAccount-content .gv-dash-block + .gv-dash-block {
margin-top: 2.25rem;
}
}
/* =========================================================
Produktsidan
Grossistsida: artikelnummer, kartongfakta och pris överst,
hela specifikationen utskriven under. Inga flikar.
========================================================= */
.single-product div.product {
margin-bottom: 3.5rem;
}
/* Bilden får inte bli en tapet — sammanfattningen är kort, och då
gapar det bredvid en meterhög produktbild. */
.single-product .woocommerce-product-gallery__image img {
max-height: 30rem;
object-fit: contain;
}
/* Kategorilänken över rubriken */
.single-product .product .ast-woo-product-category {
margin-bottom: 0.35rem;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--gv-muted);
}
.single-product .product .ast-woo-product-category a {
color: inherit;
text-decoration: none;
}
.single-product .product .ast-woo-product-category a:hover {
color: var(--gv-accent);
}
.single-product .product .entry-title,
.single-product .product .product_title {
margin: 0 0 0.55rem;
font-size: clamp(1.5rem, 2.4vw, 2rem);
line-height: 1.2;
letter-spacing: -0.025em;
}
/* ── Artikelnummer ────────────────────────────────────────── */
.gv-pdp-sku {
display: flex;
align-items: center;
gap: 0.55rem;
margin: 0 0 1.35rem;
font-size: 0.9375rem;
color: var(--gv-text);
}
.gv-pdp-sku-label {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gv-muted);
}
.gv-pdp-sku-value {
font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
font-size: 0.9375rem;
letter-spacing: 0.01em;
color: var(--gv-ink);
}
.gv-copy {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.9rem;
height: 1.9rem;
padding: 0;
border: 1px solid var(--gv-line);
border-radius: 6px;
background: var(--gv-white);
color: var(--gv-muted);
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
}
.gv-copy:hover {
border-color: var(--gv-ink);
color: var(--gv-ink);
}
.gv-copy-done {
position: absolute;
left: 50%;
bottom: calc(100% + 0.4rem);
transform: translateX(-50%);
padding: 0.2rem 0.5rem;
border-radius: 5px;
background: var(--gv-ink);
color: #ffffff;
font-size: 0.75rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}
.gv-copy.is-done .gv-copy-done {
opacity: 1;
}
/* ── Pris ─────────────────────────────────────────────────── */
.single-product .product .price {
display: block;
margin: 0 0 1.35rem;
font-size: 1.6rem;
font-weight: 700;
color: var(--gv-ink);
letter-spacing: -0.02em;
}
.single-product .product .price del {
font-size: 1rem;
font-weight: 500;
color: var(--gv-muted);
}
.single-product .product .price ins {
text-decoration: none;
}
/* Dolt pris för utloggade (WholesaleKit) — en panel, inte en textrad. */
.single-product .gk-price-hidden {
display: block;
padding: 1rem 1.15rem;
border: 1px solid var(--gv-line);
border-left: 3px solid var(--gv-accent);
border-radius: var(--gv-radius);
background: var(--gv-soft);
font-size: 0.9375rem;
font-weight: 500;
color: var(--gv-text);
line-height: 1.6;
}
.single-product .gk-price-hidden a {
color: var(--gv-accent);
font-weight: 600;
text-decoration: none;
}
.single-product .gk-price-hidden a:hover {
text-decoration: underline;
}
/* ── Snabbfakta ───────────────────────────────────────────── */
.gv-pdp-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
gap: 1px;
margin: 0 0 1.5rem;
padding: 0;
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
background: var(--gv-line);
overflow: hidden;
}
.gv-pdp-facts > div {
margin: 0;
padding: 0.85rem 1rem;
background: var(--gv-white);
}
.gv-pdp-facts dt {
margin: 0 0 0.25rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--gv-muted);
}
.gv-pdp-facts dd {
margin: 0;
font-size: 0.9375rem;
font-weight: 600;
color: var(--gv-ink);
line-height: 1.35;
}
/* ── Köpraden ─────────────────────────────────────────────── */
.single-product form.cart {
display: flex;
align-items: stretch;
flex-wrap: wrap;
gap: 0.75rem;
margin: 0 0 1.35rem;
}
.single-product form.cart .quantity {
display: flex;
margin: 0;
}
.single-product form.cart .quantity input.qty {
width: 5.5rem;
height: 50px;
padding: 0 0.5rem;
border: 1px solid var(--gv-line) !important;
border-radius: var(--gv-radius) !important;
background: var(--gv-white);
font-size: 16px;
font-weight: 600;
color: var(--gv-ink);
text-align: center;
}
.single-product form.cart .quantity input.qty:focus {
outline: none;
border-color: var(--gv-accent) !important;
box-shadow: 0 0 0 3px rgba(var(--gv-accent-rgb), 0.12);
}
.single-product form.cart button[type="submit"],
.single-product form.cart .single_add_to_cart_button {
flex: 1 1 12rem;
min-height: 50px;
padding: 0 1.75rem;
border: 0 !important;
border-radius: var(--gv-radius) !important;
background: var(--gv-accent) !important;
color: #ffffff !important;
font-size: 15px;
font-weight: 600;
text-transform: none !important;
box-shadow: none !important;
cursor: pointer;
transition: background 0.15s ease;
}
.single-product form.cart button[type="submit"]:hover,
.single-product form.cart .single_add_to_cart_button:hover {
background: var(--gv-accent-dark) !important;
}
/* ── Leverans, betalning, lager ───────────────────────────── */
.gv-pdp-assurance {
list-style: none;
margin: 0 0 1.1rem;
padding: 1.1rem 0 0;
border-top: 1px solid var(--gv-line);
display: grid;
gap: 0.6rem;
}
.gv-pdp-assurance li {
position: relative;
padding-left: 1.6rem;
font-size: 0.9375rem;
color: var(--gv-text);
}
.gv-pdp-assurance li::before {
content: "";
position: absolute;
left: 0;
top: 0.42em;
width: 0.6rem;
height: 0.32rem;
border-left: 1.6px solid var(--gv-accent);
border-bottom: 1.6px solid var(--gv-accent);
transform: rotate(-45deg);
}
/* Slut i lager markeras med ord och form, inte bara färg. */
.gv-pdp-assurance .gv-pdp-stock.is-out {
color: var(--gv-accent-dark);
font-weight: 600;
}
.gv-pdp-assurance .gv-pdp-stock.is-out::before {
border-color: var(--gv-accent-dark);
transform: rotate(45deg);
}
.gv-pdp-help {
margin: 0;
font-size: 0.875rem;
color: var(--gv-muted);
line-height: 1.6;
}
.gv-pdp-help a {
color: var(--gv-accent);
font-weight: 600;
text-decoration: none;
}
.gv-pdp-help a:hover {
text-decoration: underline;
}
/* ── Flikarna under sammanfattningen ──────────────────────── */
.woocommerce div.product .woocommerce-tabs {
margin: 2.5rem 0 3rem;
}
.woocommerce div.product .woocommerce-tabs .panel {
max-width: 52rem;
margin: 0;
padding: 0;
border: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
display: inline-block;
font-size: 0.9375rem;
}
/* Tangentbordsfokus måste synas — flikarna byts med piltangenterna. */
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus-visible {
outline: 2px solid var(--gv-accent);
outline-offset: 2px;
border-radius: 4px;
}
.gv-pdp-spec table {
width: 100%;
margin: 0;
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
.gv-pdp-spec th,
.gv-pdp-spec td {
padding: 0.85rem 1.1rem;
border: 0;
border-bottom: 1px solid var(--gv-line);
font-size: 0.9375rem;
line-height: 1.5;
text-align: left;
vertical-align: top;
}
.gv-pdp-spec tr:last-child th,
.gv-pdp-spec tr:last-child td {
border-bottom: 0;
}
.gv-pdp-spec th {
width: 42%;
background: var(--gv-soft);
font-weight: 600;
color: var(--gv-text);
}
.gv-pdp-spec td {
background: var(--gv-white);
font-weight: 600;
color: var(--gv-ink);
}
.gv-pdp-prose p {
margin: 0 0 1rem;
font-size: 0.9375rem;
line-height: 1.7;
color: var(--gv-text);
}
.gv-pdp-prose p:last-child {
margin-bottom: 0;
}
/* Relaterade artiklar */
.single-product .related > h2,
.single-product .up-sells > h2 {
margin: 0 0 1.35rem;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.02em;
}
@media (max-width: 782px) {
.gv-pdp-facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.single-product form.cart .single_add_to_cart_button {
flex: 1 1 100%;
}
.gv-pdp-spec th {
width: 45%;
}
.gv-pdp-section {
margin-bottom: 2.25rem;
}
}
/* =========================================================
Brödsmulor
Astras rad ligger direkt under sidhuvudet och är den enda på
sidan (Woos egen är avregistrerad i functions.php). Astra ritar
den med » som avdelare och accentfärgade länkar — här blir den
en tunn, tyst rad: grå länkar, chevron mellan stegen och sidans
eget namn i bläck.
========================================================= */
.ast-header-breadcrumb {
background: var(--gv-white);
border-bottom: 1px solid var(--gv-line);
padding: 0;
min-height: 0;
}
/* På startsidan står det bara "Hem" — då är raden bara i vägen. */
.home .ast-header-breadcrumb {
display: none;
}
.ast-header-breadcrumb .ast-container {
max-width: var(--gv-wide);
}
.ast-breadcrumbs-wrapper {
padding: 0.8rem 0;
}
.ast-breadcrumbs .trail-items {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
overflow-x: auto;
scrollbar-width: none;
}
.ast-breadcrumbs .trail-items::-webkit-scrollbar {
display: none;
}
.ast-breadcrumbs .trail-items li {
display: inline-flex;
align-items: center;
margin: 0;
font-size: 13px;
line-height: 1.45;
color: var(--gv-muted);
white-space: nowrap;
}
.ast-breadcrumbs .trail-items li a {
color: var(--gv-muted);
text-decoration: none;
transition: color 0.15s ease;
}
.ast-breadcrumbs .trail-items li a:hover {
color: var(--gv-accent);
}
/* Astras » ritas med ::after i temats dynamiska CSS — släck den och
sätt en chevron före varje steg utom det första i stället. */
.ast-breadcrumbs .trail-items li::after {
content: none !important;
padding: 0 !important;
}
.ast-breadcrumbs .trail-items li + li::before {
content: "";
flex: none;
width: 0.32rem;
height: 0.32rem;
margin: 0 0.6rem;
border-top: 1.4px solid #c7ccd4;
border-right: 1.4px solid #c7ccd4;
transform: rotate(45deg);
}
.ast-breadcrumbs .trail-items .trail-end {
color: var(--gv-ink);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 782px) {
.ast-breadcrumbs-wrapper {
padding: 0.7rem 0;
}
.ast-breadcrumbs .trail-items li {
font-size: 12.5px;
}
/* Långa artikelnamn får inte trycka ut raden — de klipps av. */
.ast-breadcrumbs .trail-items .trail-end {
max-width: 55vw;
}
}
/* =========================================================
Helskärmsläge — inloggning, glömt lösenord och ansökan
Egen sida utan sidhuvud och sidfot (templates/auth.php).
Ingen ruta mitt på skärmen: vänster halva är vit och bär
formuläret, höger halva är en hel mörk yta med draperiet
(assets/img/drape.svg) — 46 trådar där en är röd.
Inga övertoningar bakom texten, inga färgade skuggor.
========================================================= */
:root {
--gv-auth-panel: #101216; /* panelens yta — platt, ingen övertoning */
}
body.gv-auth-page {
background: var(--gv-white) !important;
margin: 0;
}
.gv-auth {
display: flex;
min-height: 100vh;
min-height: 100dvh;
}
.gv-auth-card {
flex: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
min-height: 100vh;
min-height: 100dvh;
}
/* Ansökningsformuläret är tvåspaltigt — då behöver vänsterspalten mer plats. */
.gv-auth-page--apply .gv-auth-card {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
/* ── Vänsterspalten ───────────────────────────────────────── */
/* Logotypraden är en egen rad i rutnätet, inte en del av formulär-
spalten — annars går den inte att lägga ovanför panelen på mobil. */
.gv-auth-top {
grid-column: 1;
grid-row: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding: clamp(1.5rem, 3.4vh, 2.75rem) clamp(1.5rem, 4.5vw, 4.5rem) 0;
box-sizing: border-box;
}
.gv-auth-main {
grid-column: 1;
grid-row: 2;
display: flex;
flex-direction: column;
padding: 0 clamp(1.5rem, 4.5vw, 4.5rem) clamp(1.5rem, 3.4vh, 2.75rem);
box-sizing: border-box;
}
.gv-auth-logo {
display: inline-flex;
align-items: center;
text-decoration: none;
}
.gv-auth-logo-img {
display: block;
width: auto;
height: auto;
max-height: 36px;
max-width: 200px;
}
.gv-auth-logo-text {
font-size: 1.1rem;
font-weight: 700;
color: var(--gv-ink);
letter-spacing: -0.01em;
}
.gv-auth-back {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--gv-muted);
text-decoration: none;
}
.gv-auth-back::before {
content: "";
width: 0.4rem;
height: 0.4rem;
border-left: 1.6px solid currentColor;
border-bottom: 1.6px solid currentColor;
transform: rotate(45deg);
}
.gv-auth-back:hover {
color: var(--gv-accent);
}
.gv-auth-body {
flex: 1;
width: 100%;
max-width: 25rem;
margin: 0 auto;
padding: clamp(2rem, 6vh, 4rem) 0 2rem;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
}
.gv-auth-page--apply .gv-auth-body {
max-width: 34rem;
}
.gv-auth-fine {
margin: 0;
font-size: 0.8125rem;
color: #9aa1ac;
}
/* ── Rubriker och ledtext ─────────────────────────────────── */
/* Samma korta röda streck som i panelen — det är den röda tråden
i draperiet, inte en dekoration till. */
.gv-auth-kicker {
display: flex;
align-items: center;
gap: 0.7rem;
margin-bottom: 0.9rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gv-muted);
}
.gv-auth-kicker::before {
content: "";
width: 1.75rem;
height: 1px;
background: var(--gv-accent);
}
.gv-auth-body .gv-auth-title {
margin: 0 0 0.5rem;
font-size: clamp(1.7rem, 2.6vw, 2.15rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.12;
}
.gv-auth-body .gv-auth-lead {
margin: 0 0 1.85rem;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--gv-muted);
max-width: 42ch;
}
.gv-auth-body .gv-auth-lead--back {
margin: 1.5rem 0 0;
}
.gv-auth-body .gv-auth-lead a {
color: var(--gv-accent);
font-weight: 500;
text-decoration: none;
}
.gv-auth-body .gv-auth-lead a:hover {
text-decoration: underline;
}
/* ── Fält ─────────────────────────────────────────────────── */
.gv-auth-body .form-row,
.gv-auth-body .woocommerce-form-row {
display: block;
margin: 0 0 1.15rem;
padding: 0;
}
.gv-auth-body label {
display: block;
margin-bottom: 0.4rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--gv-ink);
text-transform: none;
letter-spacing: 0;
}
.gv-auth-body input[type="text"],
.gv-auth-body input[type="email"],
.gv-auth-body input[type="tel"],
.gv-auth-body input[type="password"],
.gv-auth-body select,
.gv-auth-body textarea,
.gv-auth-body .gk-sf-field input,
.gv-auth-body .gk-sf-field select,
.gv-auth-body .gk-sf-field textarea {
width: 100%;
box-sizing: border-box;
height: 48px;
padding: 0 0.95rem !important;
/* Kontosidornas fältstil är satt med !important — den måste slås här. */
border: 1px solid var(--gv-line) !important;
border-radius: 10px !important;
background: var(--gv-white);
color: var(--gv-text);
font-size: 16px;
font-family: inherit;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Kontosidornas fältregel (.woocommerce-account .woocommerce-form input)
är mer specifik OCH satt med !important — radien behöver body-prefix
för att vinna, annars får inloggningen kontosidornas 8 px. */
body.gv-auth-page .gv-auth-body input[type="text"],
body.gv-auth-page .gv-auth-body input[type="email"],
body.gv-auth-page .gv-auth-body input[type="tel"],
body.gv-auth-page .gv-auth-body input[type="password"],
body.gv-auth-page .gv-auth-body select,
body.gv-auth-page .gv-auth-body textarea {
border-radius: 10px !important;
}
.gv-auth-body textarea,
.gv-auth-body .gk-sf-field textarea {
height: auto;
min-height: 104px;
padding: 0.8rem 0.95rem !important;
line-height: 1.55;
resize: vertical;
}
.gv-auth-body input:focus,
.gv-auth-body select:focus,
.gv-auth-body textarea:focus,
.gv-auth-body .gk-sf-field input:focus,
.gv-auth-body .gk-sf-field textarea:focus {
outline: none;
border-color: var(--gv-accent) !important;
box-shadow: 0 0 0 3px rgba(var(--gv-accent-rgb), 0.12);
}
.gv-auth-body input::placeholder,
.gv-auth-body textarea::placeholder {
color: #a8aeb8;
}
/* Visa lösenord — knappen är Woos egen (.show-password-input), den
läggs dit med JS. Bygg aldrig en till här: då sitter det två ögon. */
.gv-auth-body .password-input {
position: relative;
display: block;
}
.gv-auth-body .password-input input {
padding-right: 3rem !important;
}
.gv-auth-body .show-password-input {
/* Sträck knappen över hela fältets höjd i stället för top:50% +
translate — Woos egen regel bråkar annars om positioneringen. */
position: absolute;
top: 0;
bottom: 0;
right: 0;
transform: none;
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: auto;
margin: 0;
padding: 0;
border: 0;
background: none;
color: #98a0ab;
font-size: 1.05rem;
line-height: 1;
cursor: pointer;
}
.gv-auth-body .show-password-input:hover {
color: var(--gv-ink);
}
.gv-auth-body .show-password-input.display-password {
color: var(--gv-accent);
}
/* ── Knappar — platta, inga färgade skuggor ───────────────── */
.gv-auth-body .gv-login-submit {
margin: 0.35rem 0 0 !important;
}
.gv-auth-body button[type="submit"],
.gv-auth-body .gk-sf-submit,
.gv-auth-submit-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 50px;
padding: 0 1.5rem;
border: 0 !important;
border-radius: 10px !important;
background: var(--gv-accent) !important;
color: #ffffff !important;
font-size: 15px;
font-weight: 600;
font-family: inherit;
text-decoration: none !important;
text-transform: none !important;
box-shadow: none !important;
cursor: pointer;
transition: background 0.15s ease;
}
.gv-auth-body button[type="submit"]:hover,
.gv-auth-body .gk-sf-submit:hover,
.gv-auth-submit-link:hover {
background: var(--gv-accent-dark) !important;
transform: none;
opacity: 1;
}
.gv-auth-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0 1.35rem;
border: 1px solid var(--gv-line);
border-radius: 10px;
color: var(--gv-ink) !important;
font-size: 15px;
font-weight: 600;
text-decoration: none !important;
background: var(--gv-white);
}
.gv-auth-ghost:hover {
border-color: var(--gv-ink);
}
/* Woo ritar en egen ram med padding runt form.login/form.register —
i helskärmsläget ska formuläret ligga fritt på den vita ytan. */
.gv-auth-body form.login,
.gv-auth-body form.register {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
}
/* Kom ihåg mig + glömt lösenord */
.gv-auth-body .gv-login-row {
margin: 0 0 1.35rem;
}
/* Ansökningsformuläret (WholesaleKit) i helskärmsläge */
.gv-auth-body .gk-sf-grid {
gap: 1.1rem 1.25rem;
margin-bottom: 1.35rem;
}
.gv-auth-body .gk-sf-field {
gap: 0.4rem;
}
.gv-auth-body .gk-sf-field label {
margin: 0;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--gv-ink);
}
.gv-auth-body .gk-sf-checkbox {
align-items: center;
margin-bottom: 1.35rem;
padding: 0.9rem 1rem;
border: 1px solid var(--gv-line);
border-radius: 10px;
background: var(--gv-soft);
}
.gv-auth-body .gk-sf-checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--gv-accent);
}
.gv-auth-body .gk-sf-checkbox label {
margin: 0;
font-size: 0.9375rem;
font-weight: 500;
}
.gv-auth-body .gk-phone {
display: flex;
gap: 0.5rem;
}
.gv-auth-body .gk-phone-cc {
flex: 0 0 7.5rem;
}
/* Woos aviseringar (fel vid inloggning) */
.gv-auth-body .woocommerce-notices-wrapper ul,
.gv-auth-body .woocommerce-error,
.gv-auth-body .woocommerce-message,
.gv-auth-body .woocommerce-info {
margin: 0 0 1.5rem;
padding: 0.9rem 1.1rem;
list-style: none;
border: 1px solid var(--gv-line);
border-left: 3px solid var(--gv-accent);
border-radius: 8px;
background: var(--gv-soft);
color: var(--gv-text);
font-size: 0.9375rem;
}
.gv-auth-body .woocommerce-error::before,
.gv-auth-body .woocommerce-message::before,
.gv-auth-body .woocommerce-info::before {
display: none;
}
.gv-auth-body .woocommerce-message,
.gv-auth-body .woocommerce-info {
border-left-color: #16a34a;
}
/* Länk till ansökan under formuläret (mobil ser panelen först då) */
.gv-auth-switch {
margin: 1.75rem 0 0;
padding-top: 1.35rem;
border-top: 1px solid var(--gv-line);
font-size: 0.9375rem;
color: var(--gv-muted);
}
.gv-auth-switch a {
color: var(--gv-accent);
font-weight: 600;
text-decoration: none;
}
.gv-auth-switch a:hover {
text-decoration: underline;
}
.gv-auth-alt {
margin-top: 2rem;
padding-top: 1.75rem;
border-top: 1px solid var(--gv-line);
}
.gv-auth-alt h2 {
margin: 0 0 1.25rem;
font-size: 1.15rem;
}
/* ── Kvitto-/felläge efter ansökan ────────────────────────── */
.gv-auth-status h1 {
margin: 0 0 0.6rem;
font-size: clamp(1.6rem, 2.4vw, 2rem);
letter-spacing: -0.03em;
line-height: 1.12;
}
.gv-auth-status p {
margin: 0;
color: var(--gv-muted);
font-size: 0.9375rem;
line-height: 1.6;
max-width: 44ch;
}
.gv-auth-status-mark {
display: block;
width: 42px;
height: 42px;
margin-bottom: 1.35rem;
border: 1.5px solid #16a34a;
border-radius: 50%;
position: relative;
}
.gv-auth-status-mark::after {
content: "";
position: absolute;
left: 13px;
top: 12px;
width: 15px;
height: 7px;
border-left: 2px solid #16a34a;
border-bottom: 2px solid #16a34a;
transform: rotate(-45deg);
}
.gv-auth-status-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.85rem;
}
.gv-auth-status-actions .gv-auth-submit-link {
width: auto;
}
/* ── Varumärkespanelen ────────────────────────────────────── */
/* Draperiet ligger som bakgrundsbild — 46 trådar ritade i
assets/img/drape.svg, en av dem röd. Ytan under är helt platt. */
.gv-auth-brand {
grid-column: 2;
grid-row: 1 / -1;
position: relative;
display: flex;
align-items: center;
padding: clamp(2rem, 3.6vw, 4rem);
color: #ffffff;
background-color: var(--gv-auth-panel);
background-image: url("assets/img/drape.svg");
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
}
.gv-auth-brand-inner {
position: relative;
width: 100%;
max-width: 28rem;
}
.gv-auth-eyebrow {
display: flex;
align-items: center;
gap: 0.7rem;
margin: 0 0 1.1rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
}
.gv-auth-eyebrow::before {
content: "";
width: 1.75rem;
height: 1px;
background: var(--gv-accent);
flex: none;
}
.gv-auth-brand .gv-auth-hl {
margin: 0 0 1.1rem;
color: #ffffff;
font-size: clamp(1.9rem, 3.1vw, 2.85rem);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.035em;
text-wrap: balance;
}
.gv-auth-sub {
margin: 0 0 2rem;
font-size: 0.9375rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.66);
max-width: 38ch;
}
.gv-auth-usp {
list-style: none;
margin: 0 0 2.25rem;
padding: 0;
display: grid;
gap: 0.9rem;
}
.gv-auth-usp li {
position: relative;
padding-left: 1.85rem;
font-size: 0.9375rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.88);
}
/* Bara bocken — ingen platta, ingen ring, ingen glöd. */
.gv-auth-usp li::before {
content: "";
position: absolute;
left: 0.1rem;
top: 0.42em;
width: 0.62rem;
height: 0.32rem;
border-left: 1.5px solid var(--gv-accent);
border-bottom: 1.5px solid var(--gv-accent);
transform: rotate(-45deg);
}
/* Panelens knapp */
.gv-auth-cta {
display: flex;
align-items: center;
gap: 1.1rem;
flex-wrap: wrap;
}
.gv-auth-cta span {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.5);
}
.gv-auth-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0 1.7rem;
border-radius: 10px;
background: #ffffff;
color: var(--gv-ink) !important;
font-size: 15px;
font-weight: 600;
text-decoration: none !important;
transition: background 0.15s ease, color 0.15s ease;
}
.gv-auth-btn:hover {
background: var(--gv-accent);
color: #ffffff !important;
}
/* Stegen i ansökningsläget */
.gv-auth-steps {
list-style: none;
counter-reset: gvsteg;
margin: 1.9rem 0 2.25rem;
padding: 0;
display: grid;
gap: 1.4rem;
}
.gv-auth-steps li {
counter-increment: gvsteg;
position: relative;
padding-left: 3.1rem;
}
.gv-auth-steps li::before {
content: counter(gvsteg);
position: absolute;
left: 0;
top: -0.15rem;
display: flex;
align-items: center;
justify-content: center;
width: 2.1rem;
height: 2.1rem;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 50%;
font-size: 0.875rem;
font-weight: 700;
color: #ffffff;
}
.gv-auth-steps strong {
display: block;
margin-bottom: 0.25rem;
font-size: 1rem;
color: #ffffff;
}
.gv-auth-steps span {
font-size: 0.9375rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.6);
}
.gv-auth-brand-foot {
margin: 0;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.14);
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.6);
}
.gv-auth-brand-foot a {
color: #ffffff;
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.gv-auth-brand-foot a:hover {
border-bottom-color: #ffffff;
}
/* ── Mobil: panelen är en remsa mellan logotypen och formuläret ──
Inte två staplade sidor. Logotypraden ligger kvar överst på vitt,
sedan kommer draperiet med rubriken som en varumärkesremsa, och
direkt under den börjar formuläret. Panelens säljdelar döljs —
länken "Inte kund ännu?" under formuläret gör samma jobb. */
@media (max-width: 960px) {
.gv-auth {
display: block;
min-height: 0;
}
.gv-auth-card {
display: flex;
flex-direction: column;
min-height: 0;
}
.gv-auth-top {
order: -1;
padding: 1.35rem 1.35rem 1.15rem;
}
.gv-auth-brand {
order: 0;
padding: 1.6rem 1.35rem 1.8rem;
background-position: center;
}
.gv-auth-main {
order: 1;
padding: 0 1.35rem 2rem;
}
.gv-auth-brand-inner {
max-width: 27rem;
margin: 0 auto;
}
.gv-auth-eyebrow {
margin-bottom: 0.7rem;
}
/* px, inte rem — Astra sätter rotstorleken till 14,6 px på mobil. */
.gv-auth-brand .gv-auth-hl {
margin: 0;
font-size: 26px;
}
.gv-auth-sub,
.gv-auth-usp,
.gv-auth-cta {
display: none;
}
/* Stegen får plats i remsan om de bara är rubriker. */
.gv-auth-steps {
margin: 1.2rem 0 0;
gap: 0.55rem;
}
.gv-auth-steps li {
padding-left: 2.4rem;
}
.gv-auth-steps li::before {
width: 1.65rem;
height: 1.65rem;
top: -0.05rem;
font-size: 0.75rem;
}
.gv-auth-steps strong {
margin: 0;
font-size: 0.9375rem;
}
.gv-auth-steps span {
display: none;
}
.gv-auth-brand-foot {
margin-top: 1.3rem;
padding-top: 1.1rem;
}
.gv-auth-body {
max-width: 27rem;
padding: 2rem 0 1.5rem;
}
}
@media (max-width: 600px) {
.gv-auth-body .gk-sf-grid {
grid-template-columns: minmax(0, 1fr);
}
.gv-auth-status-actions .gv-auth-submit-link,
.gv-auth-status-actions .gv-auth-ghost {
width: 100%;
}
}
/* =========================================================
Kontaktsidan — uppgifter, formulär och karta
Uppgifterna till vänster är tre klickbara rader (ringa, mejla, hitta),
formuläret ett kort till höger. Rubrikerna får TVÅ klasser eller en
förälder i väljaren: `.entry-content h2/h3` (0,1,1) vinner annars över
en ensam komponentklass — samma fälla som i bildspelet.
========================================================= */
.gv-kontakt {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: 2.5rem;
align-items: start;
max-width: var(--gv-wide);
margin: 0 auto;
}
.gv-kontakt .gv-kontakt-rubrik {
margin: 0 0 0.5rem;
font-size: clamp(1.35rem, 2.4vw, 1.6rem);
font-weight: 700;
color: var(--gv-ink);
}
.gv-kontakt-ingress {
margin: 0 0 1.5rem;
color: var(--gv-muted);
max-width: 44ch;
}
/* Raderna ligger i ETT kort med linjer emellan — tre separata kort blir
ett rutnät till, och sidan har redan formuläret som tyngdpunkt. */
.gv-kontakt-kort {
background: var(--gv-white);
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
overflow: hidden;
}
.gv-kontakt-rad {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 1rem;
align-items: start;
padding: 1.15rem 1.25rem;
border-top: 1px solid var(--gv-line);
text-decoration: none;
color: inherit;
transition: background 0.18s ease;
}
.gv-kontakt-rad:first-child {
border-top: 0;
}
.gv-kontakt-rad:hover,
.gv-kontakt-rad:focus-visible {
background: var(--gv-soft);
outline: none;
}
.gv-kontakt-rad:focus-visible {
box-shadow: inset 0 0 0 2px rgba(var(--gv-accent-rgb), 0.35);
}
.gv-kontakt-ikon {
width: 44px;
height: 44px;
border-radius: var(--gv-radius-sm);
background: rgba(var(--gv-accent-rgb), 0.08);
display: grid;
place-items: center;
}
.gv-kontakt-ikon svg {
width: 19px;
height: 19px;
fill: none;
stroke: var(--gv-accent);
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.gv-kontakt-etikett {
display: block;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gv-muted);
margin-bottom: 0.2rem;
}
.gv-kontakt-varde {
display: block;
font-size: 1.0625rem;
font-weight: 700;
color: var(--gv-ink);
line-height: 1.4;
transition: color 0.18s ease;
}
.gv-kontakt-rad:hover .gv-kontakt-varde {
color: var(--gv-accent);
}
.gv-kontakt-not {
display: block;
font-size: 0.8125rem;
color: var(--gv-muted);
margin-top: 0.25rem;
}
.gv-kontakt-oppet {
margin-top: 1.25rem;
background: var(--gv-soft);
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
padding: 1.15rem 1.25rem;
}
.gv-kontakt .gv-kontakt-oppet h3 {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.75rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gv-muted);
}
.gv-kontakt-oppet h3 svg {
width: 16px;
height: 16px;
fill: none;
stroke: var(--gv-accent);
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.gv-kontakt-oppet dl {
margin: 0;
}
.gv-kontakt-oppet dl > div {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.3rem 0;
font-size: 0.9375rem;
}
.gv-kontakt-oppet dt {
color: var(--gv-muted);
font-weight: 400;
}
.gv-kontakt-oppet dd {
margin: 0;
color: var(--gv-ink);
font-weight: 600;
white-space: nowrap;
}
.gv-kontakt-hint {
margin: 1.25rem 0 0;
font-size: 0.9rem;
color: var(--gv-muted);
}
.gv-kontakt-hint a {
color: var(--gv-accent);
font-weight: 600;
}
/* Formulärkortet */
.gv-form-kort {
background: var(--gv-white);
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
box-shadow: var(--gv-shadow);
padding: 2rem;
}
.gv-form-kort .gv-form-titel {
margin: 0 0 0.35rem;
font-size: clamp(1.35rem, 2.4vw, 1.6rem);
font-weight: 700;
color: var(--gv-ink);
}
.gv-form-text {
margin: 0 0 1.5rem;
color: var(--gv-muted);
}
.gv-form-larm {
margin: 0 0 1.25rem;
background: rgba(var(--gv-accent-rgb), 0.05);
border: 1px solid rgba(var(--gv-accent-rgb), 0.25);
border-left: 3px solid var(--gv-accent);
border-radius: var(--gv-radius-sm);
padding: 0.75rem 1rem;
font-size: 0.9375rem;
font-weight: 600;
color: var(--gv-ink);
}
.gv-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem 1.15rem;
margin: 0;
}
.gv-form p {
margin: 0;
}
.gv-form-full {
grid-column: 1 / -1;
}
.gv-form label {
display: block;
font-size: 0.8125rem;
font-weight: 600;
color: var(--gv-ink);
margin-bottom: 0.35rem;
}
.gv-form-krav {
color: var(--gv-accent);
}
/* 16 px i px — under det zoomar iOS in när fältet får fokus. */
.gv-form input,
.gv-form select,
.gv-form textarea {
width: 100%;
font: inherit;
font-size: 16px;
line-height: 1.4;
color: var(--gv-ink);
background: var(--gv-white);
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius-sm);
padding: 0.7rem 0.85rem;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gv-form select {
appearance: none;
-webkit-appearance: none;
padding-right: 2.5rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' 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 0.85rem center;
background-size: 16px 16px;
}
.gv-form input:focus,
.gv-form select:focus,
.gv-form textarea:focus {
outline: none;
border-color: var(--gv-accent);
box-shadow: 0 0 0 3px rgba(var(--gv-accent-rgb), 0.15);
}
.gv-form textarea {
min-height: 150px;
resize: vertical;
}
.gv-har-fel input,
.gv-har-fel textarea {
border-color: var(--gv-accent);
}
.gv-form-fel {
display: block;
margin-top: 0.35rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--gv-accent);
}
.gv-form-fot {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
margin-top: 0.35rem;
padding-top: 1.25rem;
border-top: 1px solid var(--gv-line);
}
.gv-form-fot button {
height: 46px;
padding: 0 1.6rem;
background: var(--gv-accent);
color: #ffffff;
font: inherit;
font-size: 15px;
font-weight: 600;
border: 0;
border-radius: var(--gv-radius);
cursor: pointer;
transition: background 0.18s ease;
}
.gv-form-fot button:hover {
background: var(--gv-accent-dark);
}
.gv-form-fot button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(var(--gv-accent-rgb), 0.3);
}
.gv-form-fot span {
font-size: 0.8125rem;
color: var(--gv-muted);
max-width: 34ch;
}
/* Kvittot ersätter formuläret — kortet ska inte krympa när det gör det. */
.gv-form-klar {
min-height: 18rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.gv-form-bock {
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(var(--gv-accent-rgb), 0.08);
display: grid;
place-items: center;
margin-bottom: 1.1rem;
}
.gv-form-bock svg {
width: 24px;
height: 24px;
fill: none;
stroke: var(--gv-accent);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.gv-form-kort .gv-form-klar h2 {
margin: 0 0 0.6rem;
font-size: clamp(1.35rem, 2.4vw, 1.6rem);
font-weight: 700;
color: var(--gv-ink);
}
.gv-form-klar p {
margin: 0;
color: var(--gv-muted);
}
.gv-form-klar p a {
color: var(--gv-accent);
font-weight: 600;
}
.gv-form-klar-mer {
margin-top: 1.25rem !important;
padding-top: 1.25rem;
border-top: 1px solid var(--gv-line);
font-size: 0.9375rem;
}
/* =========================================================
Kartan
Google Maps ritar redan adressbubbla och vägbeskrivning inuti kartan.
Ramen är allt den behöver — ett eget kort ovanpå var samma uppgift en
tredje gång (Patryk 2026-08-03).
========================================================= */
.gv-karta {
max-width: var(--gv-wide);
margin: 0 auto;
}
.gv-karta-ram {
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
overflow: hidden;
background: var(--gv-snow);
box-shadow: var(--gv-shadow);
}
/* Lätt avmättnad — kartan ska inte skrika starkare än butikens egen röda. */
.gv-karta-map {
display: block;
width: 100%;
height: 460px;
border: 0;
filter: saturate(0.9) contrast(1.02);
}
@media (max-width: 1024px) {
.gv-kontakt {
grid-template-columns: minmax(0, 1fr);
gap: 2rem;
}
.gv-kontakt-ingress {
max-width: none;
}
}
@media (max-width: 782px) {
.gv-form-kort {
padding: 1.4rem 1.25rem 1.5rem;
}
.gv-karta-map {
height: 300px;
}
}
@media (max-width: 600px) {
.gv-form {
grid-template-columns: minmax(0, 1fr);
}
.gv-form-fot button {
width: 100%;
}
}
/* =========================================================
Om oss
Brödtext till vänster, faktaruta som följer med till höger. Rutan är
sidans nytta: adress, leverans, betalning och vägen till ett konto —
det en inköpare letar efter på en Om oss-sida.
========================================================= */
.gv-om-intro.wp-block-columns {
gap: 3rem;
align-items: flex-start;
margin-bottom: 0;
}
.gv-om-intro .gv-om-text > * {
max-width: 62ch;
}
.gv-om-intro .gv-om-text h2 {
font-size: clamp(1.5rem, 3vw, 2.05rem);
font-weight: 700;
line-height: 1.2;
margin: 0 0 1rem;
color: var(--gv-ink);
}
.gv-om-intro .gv-om-text p {
font-size: 1.0625rem;
line-height: 1.7;
color: var(--gv-text);
margin: 0 0 1rem;
}
.gv-om-intro .gv-om-text p:last-child {
margin-bottom: 0;
}
/* Rutan är själv ~680 px hög — det är BRÖDTEXTENS spalt som sträcks till
samma höjd (den är flexobjektet, rutan är ett vanligt block i den).
align-self står kvar som skydd om spalten någon gång blir flex. */
.gv-om-kort {
align-self: flex-start;
position: sticky;
top: 6.5rem;
background: var(--gv-white);
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
box-shadow: var(--gv-shadow);
padding: 1.5rem 1.6rem 1.6rem;
}
.gv-om-kort-etikett {
margin: 0 0 1rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gv-accent);
}
.gv-om-kort-lista {
margin: 0;
}
.gv-om-kort-lista > div {
padding: 0.8rem 0;
border-top: 1px solid var(--gv-line);
}
.gv-om-kort-lista > div:first-child {
border-top: 0;
padding-top: 0;
}
.gv-om-kort-lista dt {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gv-muted);
margin-bottom: 0.25rem;
}
.gv-om-kort-lista dd {
margin: 0;
font-size: 0.9375rem;
font-weight: 600;
color: var(--gv-ink);
line-height: 1.45;
}
.gv-om-kort-fot {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.7rem;
margin-top: 1.35rem;
padding-top: 1.35rem;
border-top: 1px solid var(--gv-line);
}
.gv-om-knapp {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 46px;
padding: 0 1.4rem;
background: var(--gv-accent);
color: #ffffff;
border-radius: var(--gv-radius);
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: background 0.18s ease;
}
.gv-om-knapp:hover,
.gv-om-knapp:focus {
background: var(--gv-accent-dark);
color: #ffffff;
}
.gv-om-lank {
font-size: 0.875rem;
font-weight: 600;
color: var(--gv-muted);
text-decoration: none;
border-bottom: 1px solid var(--gv-line);
padding-bottom: 1px;
}
.gv-om-lank:hover {
color: var(--gv-accent);
border-bottom-color: currentColor;
}
/* Punktlistan: vad kontot faktiskt ger. Bocken är accentens enda jobb här. */
.gv-om-lista {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.gv-om-punkt {
background: var(--gv-white);
border: 1px solid var(--gv-line);
border-radius: var(--gv-radius);
padding: 1.35rem 1.4rem;
}
.gv-om-punkt svg {
width: 20px;
height: 20px;
fill: none;
stroke: var(--gv-accent);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
margin-bottom: 0.7rem;
}
.gv-om-punkt strong {
display: block;
font-size: 1rem;
color: var(--gv-ink);
margin-bottom: 0.3rem;
}
.gv-om-punkt span {
font-size: 0.9375rem;
line-height: 1.55;
color: var(--gv-muted);
}
/* Kortet till hela sortimentet har ingen bild — då ska texten fylla ytan
i stället för att stå kvar i en tom bildspalt. */
.gv-catcard--alla .gv-catcard-body {
flex: 1;
}
/* Rutan var nästan dubbelt så hög som brödtexten bredvid (678 mot ~370 px),
vilket lämnade ett tomt fält under texten. Två kolumner i listan, med
verksamhetsraden över hela bredden, jämnar ut spalterna. */
@media (min-width: 783px) {
.gv-om-kort-lista {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 1.5rem;
}
.gv-om-kort-lista > div:first-child {
grid-column: 1 / -1;
}
}
@media (max-width: 1024px) {
.gv-om-lista {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 781px) {
/* Gutenberg staplar spalterna här — då ska rutan sluta vara klistrig,
annars ligger den och skuggar brödtexten på väg upp. */
.gv-om-intro.wp-block-columns {
gap: 2rem;
}
.gv-om-kort {
position: static;
}
}
@media (max-width: 560px) {
.gv-om-lista {
grid-template-columns: minmax(0, 1fr);
}
}