(wp:post-excerpt renderar p inuti div) */ .laxen-pc__desc { margin: 0 0 12px !important; max-height: calc(18px * 2 + 4px) !important; /* fallback: 2 rader */ overflow: hidden !important; } /* Primär target:
*/
.laxen-pc__desc .wp-block-post-excerpt__excerpt,
/* Fallback om WooCommerce renderar annan struktur */
.laxen-pc__desc p {
font-size: 14px !important;
font-weight: 400 !important;
line-height: 18px !important;
letter-spacing: 0.28px !important;
color: var(--c-muted) !important;
margin: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* Dölj "Läs mer"-länk inuti produktkortet */
.laxen-pc__desc .wp-block-post-excerpt__more-text {
display: none !important;
}
.laxen-pc__price {
margin-left: 0 !important;
margin-top: auto !important;
}
/* Pris – reapris OVANFÖR, ord. pris NEDANFÖR */
.laxen-pc__price .wc-block-components-product-price__value {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 2px !important;
}
.laxen-pc__price ins { order: 1 !important; }
.laxen-pc__price del { order: 2 !important; }
.laxen-pc__price .woocommerce-Price-amount {
font-family: var(--f-heading) !important;
font-size: 24px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
color: var(--c-dark) !important;
}
.laxen-pc__price ins .woocommerce-Price-amount {
color: var(--c-sale) !important;
}
.laxen-pc__price del {
display: block !important;
text-decoration: none !important;
opacity: 1 !important;
}
.laxen-pc__price del::before {
content: "Ord.\00a0pris\00a0";
font-family: var(--f-body);
font-size: 13px;
font-weight: 400;
color: var(--c-muted);
}
.laxen-pc__price del .woocommerce-Price-amount {
font-family: var(--f-body) !important;
font-size: 13px !important;
font-weight: 400 !important;
color: var(--c-muted) !important;
}
/* ══════════════════════════════════════════════
KATEGORISIDA – Titel, Pills, Beskrivning, Controls, Filter
══════════════════════════════════════════════ */
/* ── Sidtitel ── */
.shop-title {
font-family: var(--f-heading) !important;
font-size: 48px !important;
font-weight: 500 !important;
line-height: 56px !important;
color: var(--c-dark) !important;
margin: 0 0 24px !important;
}
/* ── Underkategori-pills ── */
.cat-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px;
max-width: 949px;
margin-left: 0px!important;
}
.cat-pill {
display: inline-flex !important;
align-items: center !important;
height: 36px !important;
min-width: max-content !important;
padding: 0 16px !important;
background: #F4EFE4 !important;
color: var(--c-dark) !important;
border: none !important;
border-radius: 4px !important;
font-family: var(--f-body) !important;
font-size: 16px !important;
font-weight: 500 !important;
letter-spacing: 0.48px !important;
text-decoration: none !important;
transition: background var(--transition), color var(--transition);
white-space: nowrap !important;
line-height: 1 !important;
}
.cat-pill:hover {
background: var(--c-primary) !important;
color: #fff !important;
}
.cat-pill--active {
background: var(--c-primary) !important;
color: #fff !important;
}
/* ── Kategori-beskrivning med CSS-only "Läs mer" ── */
.cat-desc-wrap {
margin-bottom: 32px;
max-width: 949px;
margin-left: 0px!important;
}
/* Dold checkbox – styr expand via :has() */
.cat-desc-toggle {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
/* Texten – klämd till 5 rader som standard */
.cat-desc-text {
position: relative;
max-height: calc(1.6em * 5); /* 5 rader */
overflow: hidden;
font-size: 15px;
line-height: 1.6;
color: var(--c-muted);
}
/* Toningsgradient nedtill för naturlig avklippning */
.cat-desc-text::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0.5em;
background: linear-gradient(transparent, var(--c-bg));
pointer-events: none;
}
/* Text-styling inuti beskrivningen */
.cat-desc-text p { margin: 0 0 12px; }
.cat-desc-text ul,
.cat-desc-text ol { margin: 0 0 12px; padding-left: 20px; }
.cat-desc-text li { margin-bottom: 4px; }
.cat-desc-text p:last-child { margin-bottom: 0; }
/* "Läs mer"-knapp */
.cat-desc-label {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: var(--c-secondary);
text-decoration: underline;
text-underline-offset: 3px;
}
.cat-desc-label::after {
content: "Läs mer";
}
/* Expanderat läge – :has() kräver ingen JS */
.cat-desc-wrap:has(.cat-desc-toggle:checked) .cat-desc-text {
max-height: none;
overflow: visible;
}
.cat-desc-wrap:has(.cat-desc-toggle:checked) .cat-desc-text::after {
display: none;
}
.cat-desc-wrap:has(.cat-desc-toggle:checked) .cat-desc-label::after {
content: "Läs mindre";
}
/* Kort beskrivning – ingen toggle behövs */
.cat-desc-wrap--short .cat-desc-text {
max-height: none;
overflow: visible;
}
.cat-desc-wrap--short .cat-desc-text::after {
display: none;
}
/* ── Kontrollrad: Resultat | Filter | Sortering ── */
.shop-controls {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 12px !important;
margin-bottom: 16px !important;
padding-top: 16px !important;
border-top: 1px solid var(--c-surface) !important;
}
.shop-controls__right {
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
/* Resultattext */
.shop-controls .woocommerce-result-count {
font-size: 16px;
color: var(--c-muted);
margin: 0;
}
/* Filter-knapp */
.shop-filter-btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 16px;
background: #001111;
color: #FFFEFC;
border: none;
border-radius: 40px;
font-family: var(--f-body);
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: opacity var(--transition);
white-space: nowrap;
}
.shop-filter-btn:hover {
opacity: 0.85;
}
.shop-filter-btn--active {
background: var(--c-secondary);
color: #FFFEFC;
}
.shop-filter-btn__count {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background: var(--c-secondary);
color: #fff;
border-radius: 50%;
font-size: 11px;
font-weight: 600;
}
.shop-filter-btn__count:empty {
display: none;
}
.shop-filters .wc-block-product-filter-checkbox-list__items {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.shop-filters .wc-block-product-filter-checkbox-list__item {
padding-right: 10px;
}
.wc-block-product-filter-clear-button {
max-width: fit-content !important;
}
/* Sortering – etikett via ::before */
.shop-sort .woocommerce-ordering,
.woocommerce-ordering {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.woocommerce-ordering::before {
content: "Sortera efter";
font-size: 16px;
color: var(--c-dark);
white-space: nowrap;
}
.woocommerce-ordering select {
height: 40px;
padding: 0 36px 0 12px;
border: none;
outline: 1px solid #001111;
border-radius: 40px;
background: var(--c-bg);
font-family: var(--f-body);
font-size: 16px;
color: var(--c-dark);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23001111' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}
/* ── Filterpanel ── */
/* !important krävs för att slå WooCommerce's egna display-regler på .wc-block-product-filters */
.wc-block-product-filters.shop-filters {
display: none !important;
background: var(--c-surface);
border-radius: 8px;
padding: 24px;
margin-bottom: 24px;
}
.wc-block-product-filters.shop-filters.is-open {
display: block !important;
}
.shop-filters__inner {
display: flex !important;
flex-wrap: wrap !important;
gap: 32px !important;
}
/* Aktiva filter / Rensa */
.wc-block-active-filters {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #D5D2CF;
}
.wc-block-active-filters__clear-all {
font-family: var(--f-body);
font-size: 16px;
font-weight: 500;
color: #001111 !important;
text-decoration: underline;
cursor: pointer;
}
/* ── "Visa resultat"-knapp (apply filters) ── */
.shop-filter-apply-wrap {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #D5D2CF;
}
.shop-filter-apply {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 32px;
background: var(--wp--preset--color--primary, #00646F);
color: #fff;
border: none;
border-radius: 40px;
font-family: var(--f-body);
font-size: 15px;
font-weight: 500;
letter-spacing: 0.3px;
cursor: pointer;
transition: background var(--transition, 0.15s ease);
}
.shop-filter-apply:hover {
background: var(--wp--preset--color--darkest, #003D44);
}
/* ── AJAX-filter: laddningsindikator ── */
.product-grid.is-loading {
opacity: 0.4;
pointer-events: none;
transition: opacity 0.15s ease;
}
/* ── Dold paginering (används av JS) ── */
.shop-pagination-hidden {
display: none !important;
}
/* ── Ladda in fler-knapp ── */
.load-more-wrap {
display: flex;
justify-content: center;
margin-top: 48px;
}
.load-more-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 0 40px;
background: #CFEEF2;
color: #001111;
border: none;
border-radius: 40px;
font-family: var(--f-body);
font-size: 16px;
font-weight: 500;
letter-spacing: 0.48px;
cursor: pointer;
transition: background var(--transition);
}
.load-more-btn:hover {
background: #b5e6ec;
}
.load-more-btn:disabled,
.load-more-btn.is-loading {
opacity: 0.6;
cursor: default;
}
.load-more-wrap.is-hidden {
display: none !important;
}
/* ══════════════════════════════════════════════
WOOCOMMERCE – PRODUKTSIDA (single)
══════════════════════════════════════════════ */
/* ── Kolumner: galleri vänster, info höger ──
Figma: 909px galleri + 32px gap + 499px info = 1440px (63.125% / 34.653%)
Gallerikolumnen (DOM-ordning 2) får order: -1 → visually VÄNSTER på desktop */
.product-layout.wp-block-columns {
align-items: flex-start !important;
gap: 32px !important;
padding-bottom: 80px;
}
.product-gallery-col.wp-block-column {
order: -1 !important;
flex: 0 1 63.125% !important; /* 909/1440 – åsidosätter inline style="flex-basis:60%" */
}
.product-info-col.wp-block-column {
flex: 0 1 34.653% !important; /* 499/1440 – åsidosätter inline style="flex-basis:40%" */
}
.product-gallery-col.wp-block-column .wp-block-woocommerce-product-gallery {
gap: 16px !important;
}
/* ── Info-kolumn: flex column med 24px mellanrum ── */
.product-info-col.wp-block-column {
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
justify-content: center !important;
}
/* Desktop-ordning: titel → sku → beskrivning → pris → cart → usps → meta */
.product-info-col .product-title-heading,
.product-info-col .wp-block-post-title { order: 1; }
.product-info-col .product-sku-text,
.product-info-col .wp-block-woocommerce-product-sku { order: 2; }
.product-info-col .product-excerpt-block,
.product-info-col .wp-block-post-excerpt { order: 3; }
.product-info-col .product-price-block,
.product-info-col .wp-block-woocommerce-product-price { order: 4; }
.product-info-col .wp-block-woocommerce-add-to-cart-form,
.product-info-col .wc-block-add-to-cart-form { order: 5; }
.product-info-col .product-usps { order: 6; }
.product-info-col .wp-block-woocommerce-product-meta { order: 7; }
/* ── Titel ── */
.product-info-col .product-title-heading,
.site-main--product .product_title {
font-family: var(--f-heading) !important;
font-size: 48px !important;
font-weight: 500 !important;
line-height: 56px !important;
color: #001111 !important;
margin: 0 !important;
padding: 0 !important;
}
/* ── SKU / Artikelnummer ── */
.product-info-col .product-sku-text,
.product-info-col .wp-block-woocommerce-product-sku,
.site-main--product .sku_wrapper,
.site-main--product .sku {
font-family: var(--f-body) !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 18px !important;
letter-spacing: 0.28px !important;
color: #001111 !important;
margin: 0 !important;
}
/* ── Kort beskrivning ── */
.product-info-col .product-excerpt-block,
.product-info-col .wp-block-post-excerpt,
.site-main--product .woocommerce-product-details__short-description {
font-family: var(--f-body) !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 24px !important;
color: #3D3C3B !important;
margin: 0 !important;
}
.product-info-col .wp-block-post-excerpt p,
.product-info-col .wp-block-post-excerpt__excerpt {
margin: 0 !important;
font-size: 16px !important;
line-height: 24px !important;
color: #3D3C3B !important;
}
/* Dölj "Läs mer"-länken i excerpt */
.product-info-col .wp-block-post-excerpt__more-text {
display: none !important;
}
/* ── Pris ── */
/* Faktisk container: .wc-block-components-product-price (block-versionen) */
/* Layout: flex column → del (ord.pris) ovanför, ins (rea) nedanför */
.product-info-col .wc-block-components-product-price {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 4px !important;
margin: 0 !important;
}
/* Normalpris (ingen rea): 64px Doumbar svart */
.product-info-col .wc-block-components-product-price > .woocommerce-Price-amount,
.product-info-col .wc-block-components-product-price .price > .woocommerce-Price-amount {
font-family: var(--f-heading) !important;
font-size: 64px !important;
font-weight: 500 !important;
line-height: 64px !important;
color: #001111 !important;
}
/* Reapris (ins): 64px Doumbar röd */
.product-info-col .wc-block-components-product-price ins {
order: 2 !important;
text-decoration: none !important;
}
.product-info-col .wc-block-components-product-price ins .woocommerce-Price-amount {
font-family: var(--f-heading) !important;
font-size: 64px !important;
font-weight: 500 !important;
line-height: 64px !important;
color: var(--c-sale) !important;
}
/* Ord.pris (del): 14px Urbanist grå, ingen genomstrykning, prefix "Ord. pris " */
.product-info-col .wc-block-components-product-price del {
order: 1 !important;
text-decoration: none !important;
font-family: var(--f-body) !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 18px !important;
letter-spacing: 0.28px !important;
color: #3D3C3B !important;
}
.product-info-col .wc-block-components-product-price del::before {
content: "Ord.\00a0pris\00a0";
}
.product-info-col .wc-block-components-product-price del .woocommerce-Price-amount {
font-family: var(--f-body) !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 18px !important;
color: #3D3C3B !important;
}
/* "exkl. moms"-suffix */
.product-info-col .woocommerce-price-suffix,
.product-info-col .wc-block-components-product-price .tax-label {
display: block !important;
font-family: var(--f-body) !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 18px !important;
letter-spacing: 0.28px !important;
color: #001111 !important;
margin-top: 4px !important;
}
/* ── Variationsväljare ── */
.single-product table.variations {
display: block !important;
width: 100% !important;
background: #F4EFE4 !important;
border-radius: 4px !important;
padding: 16px !important;
border: none !important;
border-spacing: 0 !important;
margin-bottom: 16px !important;
}
.single-product table.variations tbody {
display: block !important;
}
.single-product table.variations tr {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
}
.single-product table.variations tr + tr {
margin-top: 24px !important;
}
.single-product table.variations th.label {
display: block !important;
padding: 0 !important;
text-align: left !important;
width: auto !important;
}
.single-product table.variations th.label label {
font-family: var(--f-body) !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 24px !important;
color: #001111 !important;
letter-spacing: 0 !important;
}
.single-product table.variations td.value {
display: block !important;
padding: 0 !important;
}
.single-product table.variations select {
-webkit-appearance: none !important;
appearance: none !important;
width: 100% !important;
background-color: #FFFEFC !important;
border: none !important;
border-radius: 20px !important;
padding: 8px 40px 8px 12px !important;
font-family: var(--f-body) !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 24px !important;
color: #001111 !important;
cursor: pointer !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23001111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 16px 16px !important;
box-shadow: none !important;
outline: none !important;
}
.single-product table.variations select:focus {
outline: 2px solid #00646F !important;
outline-offset: 2px !important;
}
/* WooCommerce JS sätter display:inline + visibility:visible som inline-styles – tvinga bort båda */
.single-product table.variations .reset_variations {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
position: absolute !important;
}
/* Dölj SKU i product-meta (visas redan fristående ovanför) */
.wp-block-woocommerce-product-meta .wp-block-woocommerce-product-sku {
display: none !important;
}
/* ── Add-to-cart formulär ── */
.site-main--product form.cart,
.site-main--product .wc-block-add-to-cart-form {
display: flex !important;
align-items: center !important;
gap: 16px !important;
flex-wrap: wrap !important;
margin: 0 !important;
}
/* Kvantitetsstepper: outline pill med − och + */
.site-main--product .quantity,
.site-main--product .wc-block-components-quantity-selector {
display: inline-flex !important;
align-items: center !important;
height: 40px !important;
padding: 0 !important;
outline: 1px solid #001111 !important;
outline-offset: -1px !important;
border-radius: 20px !important;
background: #FFFEFC !important;
overflow: hidden !important;
gap: 0 !important;
}
/* Stepper-knappar (WC Blocks) */
.site-main--product .wc-block-components-quantity-selector__button {
width: 40px !important;
height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
font-size: 18px !important;
color: #001111 !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
/* Kvantitetsinput */
.site-main--product .qty,
.site-main--product .wc-block-components-quantity-selector__input {
width: 32px !important;
text-align: center !important;
background: transparent !important;
border: none !important;
outline: none !important;
font-family: var(--f-body) !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 20px !important;
letter-spacing: 0.48px !important;
color: #001111 !important;
padding: 0 !important;
-moz-appearance: textfield !important;
}
.site-main--product .qty::-webkit-outer-spin-button,
.site-main--product .qty::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
/* "Lägg i varukorgen"-knapp */
.site-main--product .single_add_to_cart_button,
.site-main--product .wc-block-components-product-add-to-cart .wp-element-button {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 10px 16px 10px 20px !important;
background: var(--c-secondary) !important;
color: #FFFEFC !important;
border: none !important;
border-radius: 20px !important;
font-family: var(--f-body) !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 20px !important;
letter-spacing: 0.48px !important;
cursor: pointer !important;
transition: background var(--transition) !important;
white-space: nowrap !important;
}
.site-main--product .single_add_to_cart_button::after,
.site-main--product .wc-block-components-product-add-to-cart .wp-element-button::after {
content: '' !important;
display: block !important;
width: 20px !important;
height: 20px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23FFFEFC' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 14px 14px !important;
flex-shrink: 0 !important;
}
.site-main--product .single_add_to_cart_button:hover {
background: var(--c-primary) !important;
}
/* ── USP-lista ── */
.product-usps {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.product-usp {
display: flex !important;
align-items: center !important;
gap: 16px !important;
}
.product-usp__icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 23px !important;
height: 23px !important;
background: #F4EFE4 !important;
border-radius: 14px !important;
flex-shrink: 0 !important;
}
.product-usp {
font-family: var(--f-body) !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 18px !important;
letter-spacing: 0.28px !important;
color: #001111 !important;
}
/* ── Produktgalleri ──────────────────────────────────────
Layout: stor huvudbild + thumbnails under (horisontell rad).
Vi rör INTE flexsliders interna layout (undviker vit bild vid klick).
Gallerikolumnen (.product-gallery-col) har order:-1 → visually VÄNSTER.
──────────────────────────────────────────────────────── */
.site-main--product .woocommerce-product-gallery {
display: block !important;
position: relative !important;
width: 100% !important;
}
/* Flexslider viewport: full bredd, rundat hörn */
.site-main--product .woocommerce-product-gallery .flex-viewport {
width: 100% !important;
border-radius: 4px !important;
overflow: hidden !important;
background: #F5F4F2 !important;
}
/* Slides-wrappern + bilderna */
.site-main--product .woocommerce-product-gallery__wrapper {
width: 100% !important;
}
.site-main--product .woocommerce-product-gallery__image img {
width: 100% !important;
height: auto !important;
display: block !important;
}
/* ── Thumbnails: horisontell rad under huvudbilden, max 4 synliga ── */
.site-main--product .flex-control-nav.flex-control-thumbs {
display: flex !important;
flex-direction: row !important;
gap: 8px !important;
margin: 8px 0 0 !important;
padding: 0 !important;
list-style: none !important;
flex-wrap: nowrap !important;
}
/* Dölj thumbnail nr 5 och uppåt */
.site-main--product .flex-control-thumbs li:nth-child(n+5) {
display: none !important;
}
.site-main--product .flex-control-thumbs li {
flex: 0 0 calc(25% - 6px) !important;
aspect-ratio: 1 !important;
overflow: hidden !important;
border-radius: 4px !important;
background: #F5F4F2 !important;
cursor: pointer !important;
}
.site-main--product .flex-control-thumbs li img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
opacity: 0.6 !important;
transition: opacity var(--transition) !important;
}
.site-main--product .flex-control-thumbs li img:hover,
.site-main--product .flex-control-thumbs .flex-active img {
opacity: 1 !important;
}
/* Sale / rea-badge: VÄNSTER så zoom-ikonen får plats till HÖGER */
.site-main--product .wc-block-components-product-sale-badge,
.site-main--product .onsale {
left: 0 !important;
right: auto !important;
top: 0 !important;
position: absolute !important;
z-index: 10 !important;
}
/* Zoom-ikon */
.site-main--product .woocommerce-product-gallery__trigger {
position: absolute !important;
top: 24px !important;
right: 24px !important;
width: 32px !important;
height: 32px !important;
background: #FFFEFC !important;
border-radius: 27px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 10 !important;
text-decoration: none !important;
font-size: 0 !important;
}
/* Dölj dot-navigation på desktop (bara för thumbs) */
.site-main--product .flex-control-nav:not(.flex-control-thumbs) {
display: none !important;
}
/* ── Variantväljare ── */
.site-main--product .variations select {
border: 1px solid var(--c-placeholder);
border-radius: 8px;
padding: 10px 16px;
font-family: var(--f-body);
font-size: 15px;
color: var(--c-dark);
background: var(--c-bg);
appearance: none;
cursor: pointer;
}
.site-main--product .variations select:focus {
border-color: var(--c-secondary);
outline: none;
}
/* ── MOBIL: produktsida ── */
@media (max-width: 1024px) {
/* ──────────────────────────────────────────────────────────────────
Mobil layout: titel → artnr → galleri → pris → form → cart → desc → usps
Teknik: display:contents på info-col gör att dess barn och galleri-col
delar samma flex-kontext och kan ordnas med CSS order.
────────────────────────────────────────────────────────────────── */
/* Kolumner: flex column, 24px gap mellan alla direkta barn */
.product-layout.wp-block-columns {
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
padding-bottom: 40px;
}
/* Info-kolumn: display:contents → dess barn blir direkta flex-barn */
.product-info-col.wp-block-column {
display: contents !important;
}
/* Ordning: titel + artnr (1) → galleri (2) → pris (3) → form (4) → desc (5) → usps (6) → meta (7) */
.product-info-col .product-title-heading,
.product-info-col .wp-block-post-title { order: 1; }
.product-info-col .product-sku-text,
.product-info-col .wp-block-woocommerce-product-sku {
order: 1;
margin-top: calc(-24px + 4px) !important; /* 4px gap mot titel istf. 24px */
}
.product-gallery-col.wp-block-column { order: 2 !important; }
.product-info-col .product-price-block,
.product-info-col .wp-block-woocommerce-product-price { order: 3 !important; }
.product-info-col .wp-block-woocommerce-add-to-cart-form,
.product-info-col .wc-block-add-to-cart-form { order: 4 !important; }
.product-info-col .product-excerpt-block,
.product-info-col .wp-block-post-excerpt { order: 5 !important; }
.product-info-col .product-usps { order: 6 !important; }
.product-info-col .wp-block-woocommerce-product-meta { order: 7 !important; }
/* Galleri-kolumn: full bredd */
.product-gallery-col.wp-block-column {
width: 100% !important;
flex-basis: 100% !important;
}
/* Titel: 32px på mobil */
.product-info-col .product-title-heading,
.site-main--product .product_title {
font-size: 32px !important;
line-height: 32px !important;
}
/* Pris: 40px på mobil */
.product-info-col .product-price-block,
.site-main--product .price,
.product-info-col .woocommerce-Price-amount {
font-size: 40px !important;
line-height: 40px !important;
}
/* Galleri mobil: thumbnails döljs, dots visas */
.site-main--product .flex-control-nav.flex-control-thumbs {
display: none !important;
}
/* Dot-navigation: visa på mobil */
.site-main--product .flex-control-nav:not(.flex-control-thumbs) {
display: flex !important;
justify-content: center !important;
gap: 8px !important;
list-style: none !important;
padding: 0 !important;
margin: 8px 0 0 !important;
}
.site-main--product .flex-control-nav:not(.flex-control-thumbs) li a {
display: block !important;
width: 12px !important;
height: 4px !important;
background: #D5D2CF !important;
border-radius: 2px !important;
text-indent: -9999px !important;
overflow: hidden !important;
transition: background var(--transition) !important;
}
.site-main--product .flex-control-nav:not(.flex-control-thumbs) li a.flex-active {
width: 12px !important;
background: #001111 !important;
}
/* Galleri-zoom-ikon: 400px maxhöjd */
.site-main--product .woocommerce-product-gallery__wrapper {
background: #D5D2CF !important;
max-height: 400px !important;
overflow: hidden !important;
}
.site-main--product .woocommerce-product-gallery__image {
height: 400px !important;
overflow: hidden !important;
}
.site-main--product .woocommerce-product-gallery__image img {
height: 100% !important;
object-fit: cover !important;
}
}
/* Produktflikar */
.woocommerce-tabs .wc-tabs {
display: flex;
gap: 0;
border-bottom: 2px solid var(--c-surface);
margin-bottom: 24px;
padding: 0;
list-style: none;
}
.woocommerce-tabs .wc-tabs li a {
display: block;
padding: 12px 24px;
font-size: 15px;
font-weight: 500;
color: var(--c-muted);
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: color var(--transition), border-color var(--transition);
}
.woocommerce-tabs .wc-tabs li.active a,
.woocommerce-tabs .wc-tabs li a:hover {
color: var(--c-primary);
border-bottom-color: var(--c-primary);
}
/* ══════════════════════════════════════════════
FORMULÄR
══════════════════════════════════════════════ */
.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
font-family: var(--f-body);
font-size: 15px;
color: var(--c-dark);
background: var(--c-bg);
border: 1px solid var(--c-placeholder);
border-radius: 8px;
padding: 10px 14px;
width: 100%;
transition: border-color var(--transition), box-shadow var(--transition);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--c-secondary);
box-shadow: 0 0 0 3px rgba(0, 100, 111, 0.12);
}
/* ── Footer nyhetsbrev – fullbredd-rad under de 4 kolumnerna ── */
.footer-newsletter {
border-top: 1px solid rgba(255, 254, 252, 0.08);
margin-top: 32px;
padding-top: 32px;
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
}
.footer-newsletter__title {
margin: 0 !important;
color: #FFFEFC;
}
.footer-newsletter__desc {
margin: 0 !important;
color: #FFFEFC;
}
.footer-newsletter__consent {
margin: 0 !important;
color: #FFFEFC;
font-size: 14px;
line-height: 1.286;
letter-spacing: 0.28px;
}
/* ── GravityForms i footer ── */
.footer-newsletter .gform_wrapper {
margin: 0 !important;
max-width: 100%;
}
/* Dölj "obligatoriska fält"-text och etiketter */
.footer-newsletter .gform_heading,
.footer-newsletter .gform_required_legend,
.footer-newsletter .gfield_label {
display: none !important;
}
/* Nollställ GF:s egna tema-variabel för border-radius */
.footer-newsletter .gform_wrapper {
--gf-radius: 20px !important;
--gf-ctrl-border-color: transparent !important;
}
/* Formuläret: input + knapp sida vid sida (flex-rad) */
.footer-newsletter .gform_wrapper form {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 15px !important;
margin: 0 !important;
padding: 0 !important;
}
/* gform-body stretchar ut och tar plats (inputfältet) */
.footer-newsletter .gform-body,
.footer-newsletter .gform_body {
flex: 1 1 auto !important;
margin: 0 !important;
padding: 0 !important;
min-width: 0 !important;
}
.footer-newsletter .gform_fields {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.footer-newsletter .gfield {
margin: 0 !important;
padding: 0 !important;
}
.footer-newsletter .ginput_container {
margin: 0 !important;
}
/* Email-input: pill-form */
.footer-newsletter .ginput_container input[type="email"],
.footer-newsletter .ginput_container input[type="text"] {
width: 100% !important;
padding: 10px 16px !important;
background: #F5F4F2 !important;
border: none !important;
border-radius: 20px !important;
font-family: var(--f-body) !important;
font-size: 16px !important;
font-weight: 400 !important;
color: #001111 !important;
line-height: 1.5 !important;
height: auto !important;
outline: none !important;
box-shadow: none !important;
transition: box-shadow var(--transition) !important;
}
.footer-newsletter .ginput_container input[type="email"]::placeholder,
.footer-newsletter .ginput_container input[type="text"]::placeholder {
color: #5A5856 !important;
opacity: 1 !important;
}
.footer-newsletter .ginput_container input[type="email"]:focus,
.footer-newsletter .ginput_container input[type="text"]:focus {
box-shadow: 0 0 0 2px rgba(0, 100, 111, 0.35) !important;
}
/* Knapp-wrapper: ingen flex-grow */
.footer-newsletter .gform-footer,
.footer-newsletter .gform_footer,
.footer-newsletter .gform_page_footer {
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
}
/* Skicka-knapp: teal pill */
.footer-newsletter .gform_button,
.footer-newsletter input[type="submit"].gform_button {
display: inline-flex !important;
align-items: center !important;
padding: 10px 20px !important;
background: #00646F !important;
border: none !important;
border-radius: 20px !important;
font-family: var(--f-body) !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #FFFEFC !important;
letter-spacing: 0.48px !important;
cursor: pointer !important;
white-space: nowrap !important;
line-height: 1.25 !important;
height: auto !important;
width: auto !important;
min-width: 0 !important;
text-transform: none !important;
box-shadow: none !important;
appearance: none !important;
-webkit-appearance: none !important;
transition: background var(--transition) !important;
}
.footer-newsletter .gform_button:hover,
.footer-newsletter input[type="submit"].gform_button:hover {
background: #00505A !important;
color: #FFFEFC !important;
}
/* Dölj valideringsfel-rubrik */
.footer-newsletter .gform_validation_errors {
display: none !important;
}
/* Felmarkering på input */
.footer-newsletter .gfield_error .ginput_container input {
box-shadow: 0 0 0 2px rgba(222, 49, 49, 0.45) !important;
}
/* Feltext */
.footer-newsletter .gfield_validation_message,
.footer-newsletter .validation_message {
color: #DE3131;
font-size: 12px;
margin-top: 6px;
padding-left: 16px;
}
/* Bekräftelse efter inskick */
.footer-newsletter .gform_confirmation_message {
color: #FFFEFC;
font-size: 14px;
line-height: 1.5;
}
/* ── Mobil: stapla input ovanför knapp ── */
@media (max-width: 768px) {
.footer-newsletter {
align-items: center !important;
text-align: center !important;
}
.footer-newsletter__title,
.footer-newsletter__desc,
.footer-newsletter__consent {
text-align: center;
}
.footer-newsletter .gform_wrapper {
width: 100%;
}
.footer-newsletter .gform_wrapper form {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
.footer-newsletter .gform-body,
.footer-newsletter .gform_body {
width: 100% !important;
}
.footer-newsletter .ginput_container input[type="email"],
.footer-newsletter .ginput_container input[type="text"] {
background: #FFFEFC !important;
text-align: center !important;
}
.footer-newsletter .gform-footer,
.footer-newsletter .gform_footer {
width: 100% !important;
}
.footer-newsletter .gform_button,
.footer-newsletter input[type="submit"].gform_button {
width: 100% !important;
justify-content: center !important;
}
}
/* ══════════════════════════════════════════════
FOOTER
══════════════════════════════════════════════ */
.site-footer {
margin-top: 0;
}
/* Trustbar */
.footer-trustbar {
background: var(--wp--preset--color--primary);
padding: 20px 16px;
}
.footer-trustbar__inner {
max-width: var(--max-w);
margin: 0 auto;
/* padding: 0 var(--side-pad); */
}
.trustbar__rating {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 254, 252, 0.85);
font-size: 14px;
}
.trustbar__stars {
color: var(--wp--preset--color--star, #FFCE3D);
font-size: 16px;
letter-spacing: 2px;
}
/* Betalsätt */
.trustbar__payments {
display: flex;
align-items: center;
}
.trustbar__payment-logos {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.trustbar__payment-logos li {
display: flex;
align-items: center;
}
/* Logotyp-bilder – konsekvent höjd, bredd auto */
.payment-logo {
height: 22px;
width: auto;
display: block;
object-fit: contain;
opacity: 0.9;
transition: opacity var(--transition);
}
.payment-logo:hover {
opacity: 1;
}
/* Swish: ikon + textlogo i rad */
.payment-logo-swish {
display: flex;
align-items: center;
gap: 5px;
}
.payment-logo-swish img {
height: 22px;
width: auto;
display: block;
object-fit: contain;
opacity: 0.9;
transition: opacity var(--transition);
}
.payment-logo-swish:hover img {
opacity: 1;
}
/* Huvudfooter */
.footer-main {
background: var(--wp--preset--color--footer-bg);
padding: 40px 16px 80px;
margin-top: 0;
}
.footer-main__inner {
max-width: var(--max-w);
margin: 0 auto;
/* padding: 0 var(--side-pad); */
}
/* Yttre 2-kolumns rad: varumärke (35%) + höger sektion (65%) */
.footer-main__row {
gap: 0 120px !important;
}
.footer-main__row > .wp-block-column.footer-col--brand {
padding-right: 0 !important;
max-width: 459px;
}
.footer-main__row > .wp-block-column.footer-col--right {
padding-left: 0 !important;
}
/* 4 nav-kolumner i höger sektion */
.footer-nav-cols {
padding-top: 36px !important;
gap: 24px !important;
}
/* Footer kolumn-titlar */
.footer-col__title {
color: #FFFEFC !important;
font-family: var(--f-body) !important;
font-size: 16px !important;
font-weight: 600 !important;
letter-spacing: 0.48px !important;
text-transform: none !important;
margin-top: 0 !important;
margin-bottom: 16px !important;
}
/* Footer-logotyp */
.footer-logo {
margin-bottom: 32px !important;
}
.footer-logo img {
max-height: 48px;
width: auto;
filter: brightness(0) invert(1);
opacity: 0.9;
}
/* Footer-text */
.footer-about {
color: #FFFEFC !important;
font-size: 14px !important;
line-height: 1.286 !important;
letter-spacing: 0.28px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* "Följ oss" rubrik */
.footer-social__label {
color: #FFFEFC !important;
font-size: 16px !important;
font-weight: 600 !important;
letter-spacing: 0.48px !important;
margin-top: 32px !important;
margin-bottom: 16px !important;
}
/* Footer-nav (Villkor & Om Laxen) */
.footer-nav .wp-block-navigation__container {
gap: 0 !important;
}
.footer-nav .wp-block-navigation-item__content {
color: #FFFEFC !important;
font-size: 16px !important;
line-height: 24px !important;
padding: 0 !important;
display: block;
transition: opacity var(--transition);
}
.footer-nav .wp-block-navigation-item__content:hover {
opacity: 0.7;
text-decoration: underline !important;
}
/* Social media-knappar */
.footer-social {
display: flex;
gap: 16px;
margin-top: 0;
}
.footer-social__link {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background: transparent;
border: none;
border-radius: 0;
color: rgba(255, 254, 252, 0.85);
padding: 0;
transition: color var(--transition), opacity var(--transition);
}
.footer-social__link:hover {
background: transparent;
color: #FFFEFC;
opacity: 1;
}
/* Kontaktlista */
.footer-contact__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-contact__item {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 16px;
line-height: 24px;
}
.footer-contact__item svg {
flex-shrink: 0;
margin-top: 4px;
}
.footer-contact__item a {
color: #FFFEFC;
text-decoration: underline;
font-size: 16px;
line-height: 24px;
transition: opacity var(--transition);
}
.footer-contact__item address {
color: #FFFEFC;
text-decoration: none;
font-size: 16px;
line-height: 24px;
font-style: normal;
transition: opacity var(--transition);
}
.footer-contact__item a:hover,
.footer-contact__item address:hover {
opacity: 0.7;
}
/* Öppettider */
.footer-hours__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-hours__item {
display: flex;
flex-direction: column;
}
.footer-hours__day {
color: #FFFEFC;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.footer-hours__time {
color: #FFFEFC;
font-size: 16px;
font-weight: 600;
line-height: 24px;
}
/* Copyright */
.footer-copyright {
background: var(--wp--preset--color--footer-bg);
border-top: 1px solid rgba(255, 254, 252, 0.08);
padding: 24px 0;
margin-top: 0;
}
.footer-copyright__inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--side-pad);
}
.footer-copyright__text {
color: #FFFEFC !important;
font-size: 14px !important;
font-weight: 400 !important;
letter-spacing: 0.28px !important;
margin: 0 !important;
}
/* ══════════════════════════════════════════════
STJÄRNBETYG (WooCommerce)
══════════════════════════════════════════════ */
.star-rating span::before,
.star-rating::before {
color: var(--wp--preset--color--star, #FFCE3D) !important;
}
.woocommerce-review-link {
font-size: 13px;
color: var(--c-muted);
}
/* ══════════════════════════════════════════════
BREADCRUMB
══════════════════════════════════════════════ */
.woocommerce-breadcrumb {
font-size: 13px;
color: var(--c-muted);
}
.woocommerce-breadcrumb a {
color: var(--c-muted);
text-decoration: none;
}
.woocommerce-breadcrumb a:hover {
color: var(--c-secondary);
}
/* ══════════════════════════════════════════════
BLOCK-SPECIFIKA STILAR
(tidigare i theme.json styles.blocks — flyttat hit
för att undvika WP 6.6 variations-bug)
══════════════════════════════════════════════ */
/* Doumbar på inläggstitel och arkivtitel */
.wp-block-post-title,
.wp-block-query-title {
font-family: var(--wp--preset--font-family--doumbar, 'Urbanist', sans-serif) !important;
}
/* Navigation */
.wp-block-navigation {
font-family: var(--wp--preset--font-family--urbanist, 'Urbanist', sans-serif);
font-size: var(--wp--preset--font-size--base, 16px);
font-weight: 500;
}
/* Separatorer */
.wp-block-separator {
border-color: var(--wp--preset--color--surface, #F4EFE4);
color: var(--wp--preset--color--surface, #F4EFE4);
}
/* Sökblock */
.wp-block-search .wp-block-search__inside-wrapper {
border-radius: 20px;
}
header .dgwt-wcas-search-wrapp {
max-width: 400px;
}
header .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp {
background-color: #ffffff00;
}
header .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
padding: 8px 16px 8px 16px;
}
header .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
left: auto;
right: 16px;
top: 15px;
}
/* header .dgwt-wcas-style-pirx background override removed – handled av .header-search .dgwt-wcas-sf-wrapp */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
color: #000000!important;
margin-right: 1.25em!important;
}
/* ══════════════════════════════════════════════
BILDPLATSHÅLLARE
══════════════════════════════════════════════ */
.wp-block-post-featured-image:empty,
.woocommerce-product-gallery:empty {
background: var(--c-placeholder);
aspect-ratio: 1;
border-radius: var(--radius-card);
}
/* ══════════════════════════════════════════════
AVSNITTSSTILAR (sektioner med beige bakgrund)
══════════════════════════════════════════════ */
.section-surface {
background: var(--c-surface);
padding: 80px 0;
}
.section-white {
background: var(--c-bg);
padding: 80px 0;
}
/* ══════════════════════════════════════════════
TILLGÄNGLIGHET
══════════════════════════════════════════════ */
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Hoppa-till-innehåll-länk */
.skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-link:focus {
position: fixed;
top: 8px;
left: 8px;
width: auto;
height: auto;
background: var(--c-secondary);
color: #fff;
padding: 12px 20px;
border-radius: var(--radius-button);
z-index: 100000;
font-size: 14px;
font-weight: 600;
}
/* ══════════════════════════════════════════════
RESPONSIV – TABLET (< 1280px)
══════════════════════════════════════════════ */
@media (max-width: 1280px) {
:root {
--side-pad: 40px;
}
.header-search {
flex: 0 1 280px;
}
.topbar__usps {
gap: 16px;
}
}
@media (max-width: 1200px) {
:root {
--side-pad: 60px;
}
}
@media (max-width: 1024px) {
:root {
--side-pad: 40px;
}
/* Dölj USPs i topbar på tablet – visa bara betyg */
.topbar__usps,
.topbar__icons {
display: none;
}
/* Topbar komprimerad – centrerat betyg */
.topbar__inner {
justify-content: center;
height: 32px;
}
.topbar__rating-score {
font-size: 12px;
letter-spacing: 0.36px;
}
/* Byt topbar-text på mobil: dölj desktop-varianten, visa mobil-varianten */
.topbar__rating-text--desktop {
display: none;
}
.topbar__rating-text--mobile {
display: inline;
font-size: 12px;
letter-spacing: 0.48px;
}
/* Om live-versionen bara har .topbar__rating-text (utan variant): byt innehåll via data-attr */
.topbar__rating-text[data-mobile] {
font-size: 0; /* dölj desktop-texten */
}
.topbar__rating-text[data-mobile]::after {
content: attr(data-mobile);
font-size: 12px;
letter-spacing: 0.48px;
}
/* Lite mindre stjärnor på mobil */
.topbar__stars svg {
width: 12px;
height: 12px;
}
}
/* ══════════════════════════════════════════════
RESPONSIV – MOBIL (≤ 1024px) – Mobilheader
══════════════════════════════════════════════ */
@media (max-width: 1024px) {
/* ── Byt till vit mobilheader ── */
.main-header {
background: #FFFEFC !important;
}
.main-header__inner {
height: 56px;
padding: 0 16px;
gap: 0;
position: relative;
}
/* Dölj desktop-sökfält (öppnas via sök-knapp) */
.header-search {
display: none;
}
/* Dölj konto-knapp på mobil (hamnar i mobilmenyn) */
.header-btn--account,
.logga-in-header {
display: none !important;
}
/* Desktop-logotyp: dölj på mobil */
.site-header__logo--desktop {
display: none !important;
}
/* Mobil-logotyp: absolut centrerad */
.logo-mobile {
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
line-height: 0;
z-index: 1;
}
.logo-mobile img {
height: 24px;
width: auto;
}
/* Varukorg: mörk ikon på vit bg */
.header-btn--cart {
padding: 8px;
color: #001111;
}
.header-btn--cart:hover {
background: transparent;
opacity: 0.7;
}
.cart-count {
background: #00646F; /* primary på mobil */
color: #FFFEFC;
}
/* Visa hamburger och sök-toggle */
.mobile-menu-toggle,
.mobile-search-toggle {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
padding: 8px;
cursor: pointer;
color: #001111;
}
/* Kategoribar: dölj på mobil */
.category-nav {
display: none;
}
}
/* ══════════════════════════════════════════════
RESPONSIV – MOBIL (< 768px)
══════════════════════════════════════════════ */
@media (max-width: 768px) {
:root {
--side-pad: 16px;
}
/* Kategorisida: titel 32px på mobil */
.shop-title {
font-size: 32px !important;
line-height: 40px !important;
}
/* Kategori-pills: 2 per rad på mobil */
.cat-pills {
gap: 8px !important;
}
.cat-pill {
font-size: 14px !important;
height: 32px !important;
padding: 0 12px !important;
}
/* Produktgrid: 2 kolumner */
.product-grid .wc-block-product-template,
.product-grid ul.wc-block-product-template,
.product-grid .wp-block-post-template,
.product-grid ul.wp-block-post-template,
.woocommerce ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
}
/* Footer: stack yttre 2-kolumns layout */
.footer-main__row {
flex-direction: column !important;
gap: 0 !important;
}
.footer-main__row > .wp-block-column.footer-col--brand {
width: 100% !important;
padding-right: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
/* Dölj om-texten på mobil */
.footer-col--brand .footer-about {
display: none !important;
}
/* Logo lite större på mobil */
.footer-logo img {
max-height: 56px !important;
}
/* Centrera "Följ oss" rubrik och ikoner */
.footer-social__label {
text-align: center !important;
width: 100% !important;
}
.footer-social {
justify-content: center !important;
}
.footer-main__row > .wp-block-column.footer-col--right {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
}
/* Nyhetsbrev: flytta ovanför nav-kolumnerna */
.footer-newsletter {
order: -1 !important;
border-top: none !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Footer nav-kolumner: enkel kolumn på mobil med avdelare */
.footer-nav-cols {
order: 1 !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
padding-top: 40px !important;
gap: 40px 0 !important;
border-top: 1px solid rgba(255, 254, 252, 0.08);
margin-top: 32px;
}
.footer-nav-cols > .wp-block-column {
flex: 1 1 100% !important;
width: 100% !important;
text-align: center !important;
}
/* Centrera nav-titlar och länktexter */
.footer-col__title {
text-align: center !important;
}
.footer-nav .wp-block-navigation__container {
align-items: center !important;
}
/* Kontaktlista centrerad */
.footer-contact__list {
align-items: center !important;
}
.footer-contact__item {
justify-content: center !important;
}
/* Öppettider centrerade */
.footer-hours__item {
align-items: center !important;
}
.footer-hours__day,
.footer-hours__time {
text-align: center !important;
}
/* Copyright centrerat */
.footer-copyright__inner {
text-align: center;
}
.footer-copyright__text {
text-align: center !important;
}
.footer-trustbar__inner {
flex-direction: column;
gap: 16px;
text-align: center;
}
.trustbar__payment-logos {
flex-wrap: wrap;
justify-content: center;
}
}
/* ══════════════════════════════════════════════
RESPONSIV – LITEN MOBIL (< 480px)
══════════════════════════════════════════════ */
@media (max-width: 480px) {
/* Produktgrid: 1 kolumn */
.product-grid .wc-block-product-template,
.product-grid ul.wc-block-product-template,
.product-grid .wp-block-post-template,
.product-grid ul.wp-block-post-template,
.woocommerce ul.products {
grid-template-columns: repeat(1, 1fr) !important;
}
/* Produktsida: justera rubriken */
.site-main--product .product_title {
font-size: 28px;
}
}
/* ══════════════════════════════════════════════
STARTSIDA – GEMENSAMMA KOMPONENTER
══════════════════════════════════════════════ */
/* Sektionsavstånd */
.site-main--front > section,
.site-main--front > .wp-block-group {
padding-top: 80px;
padding-bottom: 80px;
}
.about-section {
background: var(--wp--preset--color--surface); /* beige */
}
/* Sektion-rubrik */
.section-title {
font-family: var(--f-heading);
font-size: 40px;
font-weight: 500;
color: var(--c-primary);
line-height: 1.2;
margin: 0 0 24px;
}
/* Sektion-header (rubrik + länk/kontroller) */
.section-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.section-header__left {
display: flex;
flex-direction: column;
gap: 12px;
}
.section-header__controls {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
padding-top: 6px;
}
.section-header .section-title {
margin-bottom: 0;
}
/* Kategori-taggar i sektion-header */
.section-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* ══════════════════════════════════════════════
STARTSIDA – TAGGAR
══════════════════════════════════════════════ */
.tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: var(--wp--preset--color--surface); /* beige */
color: var(--c-dark);
font-size: 14px;
font-weight: 500;
border-radius: 4px;
text-decoration: none;
transition: background var(--transition), color var(--transition);
white-space: nowrap;
}
.tag:hover {
background: var(--c-secondary);
color: #FFFEFC;
}
.tag svg {
flex-shrink: 0;
}
/* ══════════════════════════════════════════════
STARTSIDA – KNAPPAR
══════════════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
font-family: var(--f-body);
font-size: 16px;
font-weight: 500;
border-radius: 20px;
text-decoration: none;
cursor: pointer;
border: none;
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn svg {
flex-shrink: 0;
transition: transform var(--transition);
}
.btn:hover svg {
transform: translateX(3px);
}
/* Primär – teal fill */
.btn--primary {
background: var(--c-secondary);
color: #FFFEFC;
}
.btn--primary:hover {
background: var(--c-primary);
color: #FFFEFC;
}
/* Ljus – vit/transparent fill (på mörk bakgrund) */
.btn--light {
background: rgba(255, 254, 252, 0.15);
color: #FFFEFC;
border: 1px solid rgba(255, 254, 252, 0.4);
backdrop-filter: blur(4px);
}
.btn--light:hover {
background: rgba(255, 254, 252, 0.25);
color: #FFFEFC;
}
/* Outline – border only */
.btn--outline {
background: transparent;
color: var(--c-primary);
border: 1.5px solid var(--c-primary);
}
.btn--outline:hover {
background: var(--c-primary);
color: #FFFEFC;
}
/* Rund (ikon-knapp) */
.btn--round {
padding: 8px;
border-radius: 50%;
width: 40px;
height: 40px;
justify-content: center;
}
/* ══════════════════════════════════════════════
STARTSIDA – PRODUKTKORT
══════════════════════════════════════════════ */
.product-card {
background: #FFFEFC;
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: box-shadow var(--transition);
}
.product-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}
/* Bild-wrapper */
.product-card__image {
position: relative;
aspect-ratio: 1 / 1;
background: var(--c-placeholder);
overflow: hidden;
}
.product-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.product-card:hover .product-card__image img {
transform: scale(1.03);
}
/* Badge: hjärta (favorit) – top right */
.product-card__badge-fav {
position: absolute;
top: 8px;
right: 8px;
width: 32px;
height: 32px;
border-radius: 50%;
background: #FFFEFC;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
cursor: pointer;
color: var(--c-muted);
transition: color var(--transition);
}
.product-card__badge-fav:hover {
color: var(--c-sale);
}
/* Badge: REA (%) – bottom left */
.product-card__badge-sale {
position: absolute;
bottom: 8px;
left: 8px;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--c-sale);
color: #FFFEFC;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
/* Tag: kan måttbeställas – bottom right */
.product-card__tag {
position: absolute;
bottom: 8px;
right: 8px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background: var(--wp--preset--color--surface);
color: var(--c-dark);
font-size: 11px;
font-weight: 500;
border-radius: 4px;
z-index: 2;
white-space: nowrap;
}
/* Info-del */
.product-card__info {
padding: 12px 12px 16px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.product-card__name {
font-family: var(--f-body);
font-size: 15px;
font-weight: 600;
color: var(--c-dark);
line-height: 1.3;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-card__desc {
font-size: 13px;
color: var(--c-muted);
line-height: 1.4;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-card__pricing {
margin-top: auto;
padding-top: 6px;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
}
.product-card__price {
font-family: var(--f-heading);
font-size: 20px;
font-weight: 500;
color: var(--c-primary);
line-height: 1;
}
.product-card__price--sale {
color: var(--c-sale);
}
.product-card__price-original {
font-size: 13px;
color: var(--c-muted);
text-decoration: line-through;
}
/* ══════════════════════════════════════════════
STARTSIDA – 1. HERO
══════════════════════════════════════════════ */
.hero {
padding-top: 64px;
padding-bottom: 64px;
}
.hero__content {
max-width: 700px;
}
.hero__title {
font-family: var(--f-heading);
font-size: 48px;
font-weight: 500;
color: var(--c-primary);
line-height: 1.1;
margin: 0 0 16px;
}
.hero__subtitle {
font-size: 18px;
color: var(--c-muted);
line-height: 1.5;
margin: 0 0 28px;
}
.hero__tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* ══════════════════════════════════════════════
STARTSIDA – 2. BENTO
══════════════════════════════════════════════ */
.bento-section {
padding-top: 0 !important;
padding-bottom: 80px !important;
}
/* Fullbredd-kampanjbanner */
.campaign-banner {
position: relative;
border-radius: 8px;
overflow: hidden;
margin-bottom: 16px;
}
.campaign-banner img {
width: 100%;
height: 320px;
object-fit: cover;
display: block;
}
.campaign-banner__cta {
position: absolute;
bottom: 32px;
left: 32px;
}
/* Bento-grid */
.bento {
display: grid;
grid-template-columns: 720fr 600fr;
gap: 16px;
align-items: stretch;
}
.bento__large {
position: relative;
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.bento__large .bento__card {
flex: 1;
}
.bento__small-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 16px;
}
.bento__small-grid > div {
position: relative;
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.bento__card {
border-radius: 8px;
overflow: hidden;
position: relative;
flex: 1;
}
.bento__card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bento__card-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 16px 20px;
background: linear-gradient(to top, rgba(0, 17, 17, 0.7) 0%, transparent 100%);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.bento__card-title {
font-family: var(--f-body);
font-size: 16px;
font-weight: 600;
color: #FFFEFC;
}
/* Textkort (teal) i bento */
.bento__text-card {
background: var(--c-secondary);
border-radius: 8px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 0;
min-height: 160px;
}
.bento__text-card-title {
font-family: var(--f-heading);
font-size: 32px;
font-weight: 500;
color: #FFFEFC;
}
/* ══════════════════════════════════════════════
STARTSIDA – 3 & 5. DUAL PROMO (KAMPANJ-CAROUSEL)
══════════════════════════════════════════════ */
.dual-promo-section {
padding-top: 0 !important;
padding-bottom: 80px !important;
}
.dual-promo {
display: grid;
grid-template-columns: 464px 1fr;
gap: 24px;
align-items: start;
}
.dual-promo--reversed {
grid-template-columns: 1fr 464px;
}
.dual-promo--reversed .dual-promo__content {
order: 1;
}
.dual-promo--reversed .dual-promo__image {
order: 2;
}
/* Kampanjbild */
.dual-promo__image {
position: relative;
border-radius: 8px;
overflow: hidden;
}
.dual-promo__image img {
width: 100%;
height: 520px;
object-fit: cover;
display: block;
}
.dual-promo__image .btn {
position: absolute;
bottom: 24px;
left: 24px;
}
/* Produkt-kolumn */
.dual-promo__content {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Carousel-header (rubrik + nav-knappar) */
.carousel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.carousel-header__left {
flex: 1;
}
.carousel-controls {
display: flex;
gap: 8px;
flex-shrink: 0;
}
/* 4-kolumns produktgrid (inuti dual-promo) */
.product-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
/* ══════════════════════════════════════════════
STARTSIDA – 4 & 7. PRODUKT-GRID SEKTIONER
══════════════════════════════════════════════ */
/* 5-kolumns produktgrid */
.product-grid-5 {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
/* ══════════════════════════════════════════════
STARTSIDA – 6. FULL-BANNER (GRILL & RÖK)
══════════════════════════════════════════════ */
.full-banner-section {
padding-top: 0 !important;
padding-bottom: 80px !important;
}
.full-banner {
position: relative;
border-radius: 8px;
overflow: hidden;
}
.full-banner img {
width: 100%;
height: 480px;
object-fit: cover;
display: block;
}
.full-banner__content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 48px;
background: linear-gradient(to top, rgba(0, 17, 17, 0.75) 0%, rgba(0, 17, 17, 0.15) 60%, transparent 100%);
}
.full-banner__title {
font-family: var(--f-heading);
font-size: 48px;
font-weight: 500;
color: #FFFEFC;
margin: 0 0 8px;
line-height: 1.1;
}
.full-banner__text {
font-size: 16px;
color: rgba(255, 254, 252, 0.85);
margin: 0 0 24px;
max-width: 480px;
}
/* ══════════════════════════════════════════════
STARTSIDA – 8. OM LAXEN
══════════════════════════════════════════════ */
.about-section {
padding-top: 80px !important;
padding-bottom: 80px !important;
}
.about__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.about__content {
display: flex;
flex-direction: column;
gap: 16px;
}
.about__title {
font-family: var(--f-heading);
font-size: 40px;
font-weight: 500;
color: var(--c-primary);
line-height: 1.15;
margin: 0;
}
.about__text {
font-size: 16px;
color: var(--c-muted);
line-height: 1.6;
margin: 0;
}
.about__content .btn {
align-self: flex-start;
margin-top: 8px;
}
.about__image {
border-radius: 8px;
overflow: hidden;
}
.about__image img {
width: 100%;
height: auto;
display: block;
}
/* ══════════════════════════════════════════════
STARTSIDA – RESPONSIV (≤ 1200px)
══════════════════════════════════════════════ */
@media (max-width: 1200px) {
.product-grid-5 {
grid-template-columns: repeat(4, 1fr);
}
.product-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.dual-promo {
grid-template-columns: 360px 1fr;
}
.dual-promo--reversed {
grid-template-columns: 1fr 360px;
}
.bento {
grid-template-columns: 1fr 1fr;
}
}
/* ══════════════════════════════════════════════
STARTSIDA – RESPONSIV MOBIL (≤ 1024px)
══════════════════════════════════════════════ */
@media (max-width: 1024px) {
.site-main--front > section,
.site-main--front > .wp-block-group {
padding-top: 40px;
padding-bottom: 40px;
}
.bento-section,
.dual-promo-section,
.full-banner-section {
padding-bottom: 40px !important;
}
.hero {
padding-top: 40px;
padding-bottom: 40px;
}
.hero__title {
font-size: 36px;
}
.section-title {
font-size: 28px;
}
/* Bento: stacks till kolumn */
.bento {
grid-template-columns: 1fr;
}
.bento__small-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.bento__large .bento__card {
height: 280px;
}
/* Dual promo: stacks */
.dual-promo,
.dual-promo--reversed {
grid-template-columns: 1fr;
}
.dual-promo--reversed .dual-promo__content {
order: 2;
}
.dual-promo--reversed .dual-promo__image {
order: 1;
}
.dual-promo__image img {
height: 280px;
}
/* Product grids */
.product-grid-5,
.product-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
/* About */
.about__inner {
grid-template-columns: 1fr;
gap: 32px;
}
.about__image {
order: -1;
}
.about__title {
font-size: 28px;
}
/* Full banner */
.full-banner img {
height: 320px;
}
.full-banner__title {
font-size: 32px;
}
.full-banner__content {
padding: 24px;
}
}
/* ══════════════════════════════════════════════
STARTSIDA – RESPONSIV LITEN MOBIL (≤ 768px)
══════════════════════════════════════════════ */
@media (max-width: 768px) {
.hero__title {
font-size: 28px;
}
.hero__subtitle {
font-size: 15px;
}
.bento__small-grid {
grid-template-columns: 1fr;
}
.product-grid-5,
.product-grid-4 {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.section-header {
flex-direction: column;
align-items: flex-start;
}
.campaign-banner img {
height: 200px;
}
.full-banner img {
height: 260px;
}
.full-banner__title {
font-size: 24px;
}
}
/* ══════════════════════════════════════════════
BREADCRUMBS
══════════════════════════════════════════════ */
/* Dölj på startsidan */
.home .laxen-breadcrumbs {
display: none !important;
}
.laxen-breadcrumbs {
background: var(--wp--preset--color--background);
/* border-bottom: 1px solid var(--wp--preset--color--surface); */
/* padding: 10px var(--side-pad); */
padding: 20px 12px 0px 12px;
}
/* Rank Math breadcrumb-lista */
.laxen-breadcrumbs .rank-math-breadcrumb,
.laxen-breadcrumbs .rank-math-breadcrumb p {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
margin: 0;
padding: 0;
font-size: 13px;
color: var(--c-muted);
line-height: 1.4;
}
/* Länkar */
.laxen-breadcrumbs .rank-math-breadcrumb a {
color: var(--c-muted);
text-decoration: none;
transition: color var(--transition);
}
.laxen-breadcrumbs .rank-math-breadcrumb a:hover {
color: var(--c-secondary);
}
/* Separator (↗ Rank Math renderar span.separator) */
.laxen-breadcrumbs .rank-math-breadcrumb .separator {
color: var(--c-muted);
opacity: 0.5;
margin: 0 2px;
}
/* Aktuell sida (sista elementet) */
.laxen-breadcrumbs .rank-math-breadcrumb .last {
color: var(--c-dark);
font-weight: 500;
}
@media (max-width: 768px) {
.laxen-breadcrumbs {
margin-bottom: 12px;
}
.laxen-breadcrumbs .rank-math-breadcrumb,
.laxen-breadcrumbs .rank-math-breadcrumb p {
font-size: 12px;
}
}
/* ══════════════════════════════════════════════
PATTERN – HERO SECTION
══════════════════════════════════════════════ */
/* Fullbredd padding via CSS-variabel (inline-padding borttagen från block) */
.hero-cover.wp-block-cover {
padding: 80px var(--side-pad) !important;
}
/* Eyebrow-etikett: small caps ovanför rubrik */
.hero-eyebrow {
color: rgba(255, 254, 252, 0.7) !important;
font-weight: 500 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
margin: 0 0 16px !important;
}
/* Hero H1 – responsive storlek, vit färg via textColor:"background" token */
.hero-cover .wp-block-heading {
font-size: clamp(36px, 5vw, 56px) !important;
line-height: 1.1 !important;
margin: 0 0 20px !important;
}
/* Beskrivningstext – 18px lead-ton, något transparent */
.hero-desc {
line-height: 1.6 !important;
color: rgba(255, 254, 252, 0.85) !important;
margin: 0 0 40px !important;
}
/* CTA-knapprad */
.hero-ctas.wp-block-buttons {
gap: 12px !important;
}
/* Primär hero-CTA: djupare padding än global btn-primary */
.hero-ctas .btn-primary .wp-block-button__link {
padding: 14px 28px !important;
}
/* Ghost/outline-knapp på mörk bakgrund */
.btn-ghost-light .wp-block-button__link {
background: transparent !important;
color: var(--wp--preset--color--background) !important;
border: 1px solid rgba(255, 254, 252, 0.5) !important;
border-radius: var(--radius-button) !important;
padding: 14px 28px !important;
font-size: var(--wp--preset--font-size--base) !important;
font-weight: 500 !important;
letter-spacing: 0.48px !important;
transition: background var(--transition), border-color var(--transition) !important;
}
.btn-ghost-light .wp-block-button__link:hover {
background: rgba(255, 254, 252, 0.1) !important;
border-color: rgba(255, 254, 252, 0.8) !important;
color: var(--wp--preset--color--background) !important;
transform: none !important;
}
@media (max-width: 1024px) {
.hero-cover.wp-block-cover {
padding: 60px var(--side-pad) !important;
}
.hero-cover .wp-block-heading {
font-size: clamp(28px, 6vw, 40px) !important;
}
}
@media (max-width: 768px) {
.hero-cover.wp-block-cover {
padding: 48px var(--side-pad) !important;
}
.hero-desc {
font-size: var(--wp--preset--font-size--base) !important;
}
}
/* ══════════════════════════════════════════════
PATTERN – FEATURED CATEGORIES
══════════════════════════════════════════════ */
/* Sektion: padding via CSS-variabel */
.featured-categories.wp-block-group {
padding: 80px var(--side-pad) !important;
}
/* Sektionshuvud: rubrik + "Visa alla"-länk i rad */
.fc-header {
margin-bottom: 40px !important;
}
/* Kategori-grid: kolumnavstånd (gap-attribut borttaget från blocket) */
.category-grid.wp-block-columns {
gap: 24px !important;
}
/* Kategori-kort */
.category-card.wp-block-group {
border-radius: var(--radius-card) !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
transition: box-shadow var(--transition), transform var(--transition);
}
.category-card.wp-block-group:hover {
box-shadow: 0 8px 24px rgba(0, 17, 17, 0.1) !important;
transform: translateY(-2px);
}
/* Kortbild – border-radius överst, platt nedtill */
.category-card__img.wp-block-image {
margin: 0 !important;
}
.category-card__img img {
border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
display: block !important;
}
/* Kortinnehåll */
.category-card__body {
padding: 16px 16px 20px !important;
flex: 1;
display: flex;
flex-direction: column;
}
/* Korttitel – override theme.json h3 (24px → 18px lead för kompakta kort) */
.category-card__title.wp-block-heading {
font-weight: 600 !important;
line-height: 1.3 !important;
margin: 0 0 8px !important;
color: var(--wp--preset--color--dark) !important;
}
/* Kortbeskrivning – kompakt brödtext, färg via textColor:"text-muted" token */
.category-card__desc {
font-size: 13px !important;
line-height: 1.45 !important;
margin: 0 0 16px !important;
flex: 1;
}
/* "Utforska"-knapp: mindre padding i kortkontext */
.category-card__body .wp-block-button__link {
padding: 8px 16px !important;
font-size: var(--wp--preset--font-size--small) !important;
margin-top: auto;
}
/* Responsiv: 3 kolumner vid tablet */
@media (max-width: 1024px) {
.featured-categories.wp-block-group {
padding: 60px var(--side-pad) !important;
}
.category-grid.wp-block-columns {
flex-wrap: wrap !important;
gap: 16px !important;
}
.category-grid.wp-block-columns > .wp-block-column {
flex: 0 0 calc(33.333% - 12px) !important;
min-width: 0 !important;
}
}
/* 2 kolumner vid mobil */
@media (max-width: 640px) {
.category-grid.wp-block-columns > .wp-block-column {
flex: 0 0 calc(50% - 8px) !important;
}
}
/* 1 kolumn vid liten mobil */
@media (max-width: 400px) {
.category-grid.wp-block-columns > .wp-block-column {
flex: 0 0 100% !important;
}
}
/* ══════════════════════════════════════════════
OM SEKTIONEN
══════════════════════════════════════════════ */
.about-section {
padding: 80px 0 !important;
background-color: #F4EFE4 !important;
width: calc(100% + 32px) !important;
max-width: calc(100% + 32px) !important;
box-sizing: border-box !important;
margin: 0 -16px!important;
}
/* Tvåkolumnslayout */
.about-inner {
align-items: center !important;
gap: 32px !important;
max-width: 1440px !important;
}
/* Desktop: bild höger, text vänster via row-reverse (bild är DOM-ordning 1) */
@media (min-width: 769px) {
.about-inner {
flex-direction: row-reverse !important;
}
.about-col--image {
flex: 0 0 58% !important;
max-width: 58% !important;
}
.about-col--text {
flex: 1 !important;
max-width: unset !important;
}
}
@media (max-width: 1600px) {
.about-section { padding: 80px 120px !important; }
}
@media (max-width: 1200px) {
.about-section { padding: 80px 60px !important; }
}
/* Bildkolumn */
.about-col--image {
overflow: hidden !important;
border-radius: 8px !important;
}
.about__img {
margin: 0 !important;
height: 480px !important;
}
.about__img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 8px !important;
}
/* Textkolumn */
.about-col--text {
display: flex !important;
flex-direction: column !important;
gap: 32px !important;
}
.about__title {
font-family: var(--f-heading) !important;
font-size: 40px !important;
font-weight: 500 !important;
line-height: 48px !important;
color: var(--c-dark) !important;
margin: 0 !important;
}
.about__body {
font-size: 16px !important;
font-weight: 400 !important;
line-height: 24px !important;
color: var(--c-text) !important;
margin: 0 !important;
}
/* Knapp */
.btn-about .wp-block-button__link {
background: var(--c-primary) !important;
color: #FFFEFC !important;
border-radius: 20px !important;
padding: 10px 16px 10px 20px !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 20px !important;
letter-spacing: 0.48px !important;
border: none !important;
}
.btn-about .wp-block-button__link:hover {
background: var(--c-primary) !important;
transform: none !important;
}
/* Mobil */
@media (max-width: 768px) {
.about-section {
padding: 40px 16px !important;
}
.about__img {
height: 240px !important;
}
.about__title {
font-size: 28px !important;
line-height: 28px !important;
}
.about-col--text {
gap: 24px !important;
}
}
/* ══════════════════════════════════════════════
PRODUKTER FEED
══════════════════════════════════════════════ */
.product-feed-section {
padding: 80px 0;
}
/* Rubrik */
.product-feed__title {
font-family: var(--f-heading) !important;
font-size: 40px !important;
font-weight: 500 !important;
line-height: 48px !important;
color: var(--c-dark) !important;
margin: 0 auto 32px !important;
}
/* 5 kolumner (åsidosätter det globala 4-kolumns-griden) */
.product-feed-section .woocommerce ul.products {
grid-template-columns: repeat(5, 1fr) !important;
column-gap: 24px !important;
row-gap: 32px !important;
}
/* Mobil: 2 kolumner */
@media (max-width: 768px) {
.product-feed-section {
padding: 40px 0;
}
.product-feed__title {
font-size: 28px !important;
line-height: 28px !important;
margin-bottom: 24px !important;
}
.product-feed-section .woocommerce ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
}
}
/* ══════════════════════════════════════════════
HELSIDA BANNER
══════════════════════════════════════════════ */
.full-banner-section {
padding: 80px 0;
}
/* Rubrik */
.full-banner__title {
font-family: var(--f-heading) !important;
font-size: 40px !important;
font-weight: 500 !important;
line-height: 48px !important;
color: var(--c-dark) !important;
margin: 0 auto 24px !important;
}
/* Bannerbild */
.full-banner__cover {
height: 480px !important;
min-height: 480px !important;
border-radius: 8px !important;
overflow: hidden !important;
}
/* Inner container – knapp längst ner till höger */
.full-banner__cover .wp-block-cover__inner-container {
width: 100% !important;
display: flex !important;
justify-content: flex-end !important;
align-items: flex-end !important;
padding: 0 24px 24px !important;
align-self: flex-end !important;
}
.full-banner__btn {
margin: 0 !important;
}
/* Pill-knapp: teal bakgrund, vit text */
.btn-full-banner .wp-block-button__link {
background: var(--c-primary) !important;
color: #FFFEFC !important;
border-radius: 20px !important;
padding: 10px 16px 10px 20px !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 20px !important;
letter-spacing: 0.48px !important;
border: none !important;
}
.btn-full-banner .wp-block-button__link:hover {
background: var(--c-primary) !important;
transform: none !important;
}
/* Mobil */
@media (max-width: 768px) {
.full-banner-section {
padding: 40px 0;
}
.full-banner__title {
font-size: 28px !important;
line-height: 28px !important;
}
.full-banner__cover {
height: 240px !important;
min-height: 240px !important;
}
}
/* ══════════════════════════════════════════════
KAMPANJPRODUKTER – bild höger (--right variant)
══════════════════════════════════════════════ */
/* Desktop: vänd kolumnordningen så bilden hamnar till höger */
@media (min-width: 769px) {
.campaign-products-section--right .campaign-products-inner {
flex-direction: row-reverse !important;
}
}
/* Mobil: bild visas överst (naturlig DOM-ordning) → knapp uppe till höger */
@media (max-width: 768px) {
.campaign-products-section--right .campaign-products__cover-btn {
top: 16px !important;
bottom: auto !important;
}
}
/* ══════════════════════════════════════════════
PRODUKTER & KATEGORIER
══════════════════════════════════════════════ */
.cat-products-section {
padding: 80px 0;
}
.single-product .cat-products-section {
padding-bottom: 0;
}
/* Rubrik – Doumbar 40px centrerad */
.cat-products__title {
font-family: var(--f-heading) !important;
font-size: 40px !important;
font-weight: 500 !important;
line-height: 48px !important;
color: var(--c-dark) !important;
text-align: center !important;
margin: 0 auto 8px !important;
}
.single-product .cat-products__title {
margin: 0 0 8px !important;
}
/* Kategoriknappar */
.cat-products__tags {
justify-content: center !important;
gap: 16px !important;
flex-wrap: wrap !important;
margin-bottom: 8px !important;
}
.cat-tag-btn .wp-block-button__link {
background: #F4EFE4 !important;
color: #001111 !important;
border: none !important;
border-radius: 4px !important;
padding: 10px 20px !important;
font-family: var(--f-body) !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 20px !important;
letter-spacing: 0.48px !important;
transition: background var(--transition), color var(--transition) !important;
}
.cat-tag-btn .wp-block-button__link:hover {
background: #003D44 !important;
color: #FFFEFC !important;
transform: none !important;
}
/* Karusell-header: rubrik (vänster) + pil-knappar (höger) */
.cat-products__header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 32px;
}
.cat-products__title {
font-family: var(--f-heading);
font-size: 40px;
font-weight: 500;
line-height: 48px;
color: var(--c-near-black);
margin: 0;
}
/* Pil-knappar: cirkel-design (Figma: 32×32, border-radius 20px, border #001111) */
.cat-products__nav {
display: flex;
gap: 8px;
flex-shrink: 0;
align-self: flex-end;
}
.cat-products__nav-btn {
width: 32px;
height: 32px;
border-radius: 20px;
border: 1px solid var(--c-near-black);
background: #FFFEFC;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: opacity 0.2s;
}
.cat-products__nav-btn.is-disabled {
opacity: 0.35;
cursor: default;
pointer-events: none;
}
/* Produktkarousel-wrapper */
.cat-products__scroll-wrap {
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
width: 100% !important;
}
/* Produktkarousel – horisontell scroll, åsidosätter det globala grid */
.cat-products__scroll-wrap .woocommerce ul.products,
.cat-products__scroll-wrap section.related ul.products {
display: flex !important;
grid-template-columns: unset !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
gap: 24px !important;
padding-bottom: 4px !important;
width: 100% !important;
margin: 0 !important;
}
.cat-products__scroll-wrap .woocommerce ul.products::-webkit-scrollbar,
.cat-products__scroll-wrap section.related ul.products::-webkit-scrollbar {
display: none;
}
/* Desktop: 5 kort synliga åt gången */
.cat-products__scroll-wrap .woocommerce ul.products li.product,
.cat-products__scroll-wrap section.related ul.products li.product {
flex: 0 0 calc(20% - 20px) !important;
min-width: 0 !important;
scroll-snap-align: start !important;
}
/* Produktnamn: 16px (Figma-spec för denna sektion) */
.woocommerce div.product .laxen-carousel-shortcode .related.products {
margin-top: 0;
}
/* Mobil */
@media (max-width: 768px) {
.cat-products-section {
padding: 40px 0;
}
.cat-products__title {
font-size: 28px !important;
line-height: 28px !important;
text-align: left !important;
}
.cat-products__tags {
justify-content: flex-start !important;
}
.cat-products__scroll-wrap .woocommerce ul.products li.product,
.cat-products__scroll-wrap section.related ul.products li.product {
flex: 0 0 176px !important;
}
.cat-products__nav {
display: none !important;
}
}
/* ══════════════════════════════════════════════
SKRIV-UTT (print)
══════════════════════════════════════════════ */
@media print {
.site-header,
.site-footer,
.header-actions,
.category-nav {
display: none !important;
}
}
/*Bredden på kontaktsidan - för fullbredd sektion*/
.page-id-205 .page-content,
.page-id-205 .page-content .entry-content {
max-width: 100% !important;
}
/* ══════════════════════════════════════════════
KONTAKTA OSS – SEKTION
══════════════════════════════════════════════ */
.contact-section {
padding: 80px 0;
}
/* ── Sidtitel ── */
.contact-section__heading {
font-family: var(--f-heading) !important;
font-size: 48px !important;
font-weight: 500 !important;
line-height: 56px !important;
color: #001111 !important;
margin: 0 0 60px !important;
padding: 0 !important;
}
/* ── Kolumner ── */
.contact-section__cols.wp-block-columns {
align-items: flex-start !important;
gap: 32px !important;
}
/* ── Vänsterkolumn – Kontaktinfo ── */
.contact-info-col.wp-block-column {
display: flex !important;
flex-direction: column !important;
gap: 40px !important;
}
.contact-info__title {
font-family: var(--f-heading) !important;
font-size: 40px !important;
font-weight: 500 !important;
line-height: 48px !important;
color: #001111 !important;
margin: 0 !important;
padding: 0 !important;
}
.contact-info__intro {
font-family: var(--f-body) !important;
font-size: 20px !important;
font-weight: 400 !important;
line-height: 30px !important;
color: #3D3C3B !important;
margin: 0 !important;
}
/* Lista med kontaktuppgifter */
.contact-info__list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 32px !important;
}
.contact-info__item {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.contact-info__label {
display: flex !important;
align-items: center !important;
gap: 8px !important;
font-family: var(--f-body) !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 20px !important;
letter-spacing: 0.48px !important;
color: #001111 !important;
}
.contact-info__icon {
flex-shrink: 0 !important;
}
.contact-info__value {
display: block !important;
padding-left: 28px !important; /* justeras under label-texten, inte ikonen */
font-family: var(--f-heading) !important;
font-size: 32px !important;
font-weight: 400 !important;
line-height: 40px !important;
color: #001111 !important;
text-decoration: none !important;
font-style: normal !important; /* address-elementets default */
}
.contact-info__value:hover {
text-decoration: underline !important;
}
/* ── Högerkolumn – Formulärkortet ── */
.contact-form__card {
background: #F4EFE4 !important;
border-radius: 8px !important;
padding: 40px !important;
display: flex !important;
flex-direction: column !important;
gap: 32px !important;
}
.contact-form__title {
font-family: var(--f-heading) !important;
font-size: 32px !important;
font-weight: 400 !important;
line-height: 40px !important;
color: #001111 !important;
margin: 0 !important;
padding: 0 !important;
}
/* ── Gravity Forms – fältstilar ── */
.gform_heading {
display: none !important;
}
/* Radera GF:s egna marginaler på wrappern */
.contact-form__card .gform_wrapper {
margin: 0 !important;
padding: 0 !important;
}
.contact-form__card .gform_body {
margin: 0 !important;
}
/* Fältlista */
.contact-form__card .gform_fields {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Enskilt fält */
.contact-form__card .gfield {
margin: 0 !important;
padding: 0 !important;
}
/* Label */
.contact-form__card .gfield_label {
font-family: var(--f-body) !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 20px !important;
letter-spacing: 0.48px !important;
color: #001111 !important;
margin: 0 0 8px !important;
display: block !important;
}
/* Obligatoriskt-stjärna */
.contact-form__card .gfield_required {
color: #DE3131 !important;
font-weight: 500 !important;
}
/* Input & Select */
.contact-form__card input[type="text"],
.contact-form__card input[type="email"],
.contact-form__card input[type="tel"],
.contact-form__card input[type="number"],
.contact-form__card select {
width: 100% !important;
background: #FFFEFC !important;
border: none !important;
border-radius: 0 !important;
padding: 8px 12px !important;
font-family: var(--f-body) !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 24px !important;
color: #001111 !important;
outline: none !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
/* Textarea / Meddelande */
.contact-form__card textarea {
width: 100% !important;
height: 120px !important;
background: #FFFEFC !important;
border: none !important;
border-radius: 0 !important;
padding: 8px 12px !important;
font-family: var(--f-body) !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 24px !important;
color: #001111 !important;
resize: vertical !important;
outline: none !important;
box-sizing: border-box !important;
}
/* Placeholder */
.contact-form__card input::placeholder,
.contact-form__card textarea::placeholder {
color: #5A5856 !important;
opacity: 1 !important;
}
/* Fokus */
.contact-form__card input:focus,
.contact-form__card textarea:focus {
outline: 2px solid #00646F !important;
outline-offset: -2px !important;
}
/* Tvåkolumns-fält (Telefon + E-post på desktop) */
.contact-form__card .gform_fields .gfield--width-half {
width: calc(50% - 8px) !important;
}
/* GF lägger ibland ut fält i en ul/li-grid – se till att halv-bredd-fält sitter rätt */
.contact-form__card .gform_fields.top_label {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 16px !important;
}
.contact-form__card .gform_fields.top_label .gfield--width-full {
grid-column: 1 / -1 !important;
}
/* GDPR/Samtyckeskryssruta */
.contact-form__card .gfield--type-consent .ginput_container_consent,
.contact-form__card .gchoice {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.contact-form__card .gfield--type-consent input[type="checkbox"],
.contact-form__card .gchoice input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
accent-color: #00646F !important;
flex-shrink: 0 !important;
}
.contact-form__card .gfield--type-consent label,
.contact-form__card .gchoice label {
font-family: var(--f-body) !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
color: #001111 !important;
margin: 0 !important;
}
/* Skicka-knapp */
.contact-form__card .gform_footer,
.contact-form__card .gform_page_footer {
margin: 0 !important;
padding: 0 !important;
}
.contact-form__card input[type="submit"],
.contact-form__card button[type="submit"] {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 10px 16px 10px 20px !important;
background: #00646F !important;
color: #FFFEFC !important;
border: none !important;
border-radius: 20px !important;
font-family: var(--f-body) !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 20px !important;
letter-spacing: 0.48px !important;
cursor: pointer !important;
transition: background var(--transition) !important;
}
.contact-form__card input[type="submit"]::after,
.contact-form__card button[type="submit"]::after {
content: '→' !important;
font-size: 16px !important;
}
.contact-form__card input[type="submit"]:hover,
.contact-form__card button[type="submit"]:hover {
background: #003D44 !important;
}
/* Bekräftelsemeddelande efter inskickning */
.contact-form__card .gform_confirmation_message {
font-family: var(--f-body) !important;
font-size: 16px !important;
line-height: 24px !important;
color: #001111 !important;
}
/* Valideringsfel */
.contact-form__card .gfield_error input,
.contact-form__card .gfield_error textarea {
outline: 2px solid #DE3131 !important;
}
.contact-form__card .validation_message {
font-family: var(--f-body) !important;
font-size: 13px !important;
color: #DE3131 !important;
margin-top: 4px !important;
}
/* ── MOBIL: kontaktsida ── */
@media (max-width: 1024px) {
.contact-section {
padding: 40px 0;
}
.contact-section__heading {
font-size: 32px !important;
line-height: 32px !important;
margin-bottom: 24px !important;
}
.contact-info__title {
font-size: 28px !important;
line-height: 28px !important;
}
.contact-info__intro {
font-size: 16px !important;
line-height: 24px !important;
}
.contact-info__value {
font-size: 24px !important;
line-height: 28px !important;
}
.contact-form__card {
padding: 24px !important;
}
.contact-form__title {
font-size: 24px !important;
line-height: 28px !important;
}
/* Tvåkolumns-fält → en kolumn på mobil */
.contact-form__card .gform_fields.top_label {
grid-template-columns: 1fr !important;
}
}
/* ============================================================
BILD OCH TEXT-SEKTION
============================================================ */
.image-text-section {
padding: 80px 0;
background: #FFFEFC;
}
.image-text-section__cols {
align-items: center !important;
}
.image-text-img-col {
flex: 0 0 auto !important;
width: calc(50% - 16px) !important;
}
.image-text__img {
margin: 0 !important;
display: block;
}
.image-text__img img {
width: 100%;
height: 480px;
object-fit: cover;
object-position: center;
display: block;
border-radius: 8px;
}
.image-text-content-col {
flex: 1 1 0 !important;
}
.image-text__heading {
font-family: 'Doumbar', Georgia, serif !important;
font-size: 40px !important;
font-weight: 500 !important;
line-height: 48px !important;
color: #001111 !important;
margin-bottom: 32px !important;
}
.image-text__body {
font-family: 'Urbanist', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 24px !important;
color: #3D3C3B !important;
margin-bottom: 16px !important;
}
.image-text__body:last-child {
margin-bottom: 0 !important;
}
@media (max-width: 1600px) {
.image-text-section { padding: 80px 0px; }
}
@media (max-width: 1200px) {
.image-text-section { padding: 80px 0px; }
}
@media (max-width: 1024px) {
.image-text-section { padding: 40px 0px; }
/* .image-text-img-col {
width: 100% !important;
flex-basis: 100% !important;
} */
.image-text__img img {
height: 240px;
}
.image-text__heading {
font-size: 28px !important;
line-height: 28px !important;
margin-bottom: 16px !important;
}
}
/* ============================================================
HITTA OSS-SEKTION
============================================================ */
.find-us-section {
padding: 80px 0;
background: #FFFEFC;
}
.find-us-section__heading {
/* font-family: 'Doumbar', Georgia, serif !important;
font-size: 40px !important;
font-weight: 500 !important;
line-height: 48px !important; */
color: #001111 !important;
margin-bottom: 32px !important;
}
.find-us-section__cols {
align-items: stretch !important;
}
/* Karta */
.find-us-map-col {
flex: 1 1 0 !important;
}
.find-us-map__wrapper {
width: 100%;
height: 380px;
border-radius: 8px;
overflow: hidden;
}
.find-us-map__wrapper iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* Öppettider */
.find-us-hours-col {
flex: 1 1 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
.find-us-hours__title {
font-family: 'Doumbar', Georgia, serif !important;
font-size: 32px !important;
font-weight: 400 !important;
line-height: 40px !important;
color: #001111 !important;
margin-bottom: 24px !important;
}
.find-us-hours__intro {
font-family: 'Urbanist', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 24px !important;
color: #3D3C3B !important;
margin-bottom: 24px !important;
}
.find-us-hours__list {
display: flex;
flex-direction: column;
gap: 24px;
}
.find-us-hours__item {
display: flex;
flex-direction: column;
gap: 4px;
}
.find-us-hours__day {
font-family: 'Urbanist', sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 20px;
letter-spacing: 0.48px;
color: #001111;
}
.find-us-hours__time {
font-family: 'Doumbar', Georgia, serif;
font-size: 32px;
font-weight: 400;
line-height: 40px;
color: #001111;
}
/* Responsiv */
@media (max-width: 1600px) {
.find-us-section { padding: 80px 120px; }
}
@media (max-width: 1200px) {
.find-us-section { padding: 80px 60px; }
}
@media (max-width: 1024px) {
.find-us-section { padding: 40px 16px; }
.find-us-section__heading {
font-size: 28px !important;
line-height: 28px !important;
}
.find-us-map__wrapper {
height: 320px;
}
.find-us-hours__title {
font-size: 24px !important;
line-height: 28px !important;
}
.find-us-hours__time {
font-size: 24px;
line-height: 28px;
}
}
/* ============================================================
OM OSS - SIDA
============================================================ */
/*only on om-oss page*/
.page-id-244 .about-page {
padding: 80px 240px;
}
.about-page {
padding: 80px 180px;
background: #FFFEFC;
box-sizing: border-box;
}
/* Sidtitel */
.about-page__title {
font-family: 'Doumbar', Georgia, serif !important;
font-size: 48px !important;
font-weight: 500 !important;
line-height: 56px !important;
color: #001111 !important;
text-align: center !important;
margin-bottom: 60px !important;
}
/* Bannerbild */
.about-page__banner {
margin-bottom: 60px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.about-page__banner img {
width: 100% !important;
height: 256px !important;
object-fit: cover !important;
object-position: center !important;
border-radius: 8px !important;
display: block !important;
}
/* Intro-block */
.about-page__intro {
margin-bottom: 60px !important;
}
.about-page__intro-heading {
font-family: 'Doumbar', Georgia, serif !important;
font-size: 40px !important;
font-weight: 500 !important;
line-height: 48px !important;
color: #001111 !important;
margin-bottom: 32px !important;
}
.about-page__intro-text {
font-family: 'Urbanist', sans-serif !important;
font-size: 20px !important;
font-weight: 400 !important;
line-height: 30px !important;
color: #3D3C3B !important;
margin: 0 !important;
}
/* Tidslinje */
.about-page__timeline {
display: flex !important;
flex-direction: column !important;
gap: 60px !important;
margin-bottom: 60px !important;
}
.timeline__item {
display: flex !important;
flex-direction: row !important;
gap: 32px !important;
align-items: flex-start !important;
max-width: 100% !important;
}
/*only on om-oss page*/
.page-id-244 .timeline__year {
font-family: 'Doumbar', Georgia, serif !important;
font-size: 40px !important;
font-weight: 500 !important;
line-height: 48px !important;
color: #00646F !important;
margin: 0 !important;
flex: 0 0 90px !important;
min-width: 90px !important;
text-align: right !important;
}
.timeline__year {
font-family: 'Doumbar', Georgia, serif !important;
margin: 0 !important;
flex: 0 0 270px !important;
min-width: 90px !important;
text-align: right !important;
color: #001111;
font-size: 32px;
font-weight: 400;
line-height: 40px;
word-wrap: break-word
}
.timeline__text {
font-family: 'Urbanist', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 24px !important;
color: #3D3C3B !important;
margin: 0 !important;
flex: 1 !important;
padding-top: 12px;
}
/* Mittenbild */
.about-page__mid-image {
margin: 0 0 60px !important;
}
.about-page__mid-image img {
width: 100% !important;
height: 420px !important;
object-fit: cover !important;
object-position: center !important;
border-radius: 8px !important;
display: block !important;
}
/* Logotypblock */
.about-page__logo-block {
border-radius: 8px !important;
height: 420px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
.about-page__logo-img {
margin: 0 !important;
}
.about-page__logo-img img {
max-width: 480px !important;
height: auto !important;
display: block !important;
}
/* Responsiv */
@media (max-width: 1600px) {
.about-page { padding: 80px 120px!important; }
}
@media (max-width: 1200px) {
.about-page { padding: 80px 60px!important; }
}
@media (max-width: 1024px) {
.about-page { padding: 40px 16px!important; }
.page-id-244 .about-page__timeline {
display: flex !important;
flex-direction: column !important;
gap: 32px !important;
margin-bottom: 40px !important;
}
.about-page__timeline {
gap: 32px !important;
margin-bottom: 40px !important;
}
.page-id-244 .timeline__item {
display: flex !important;
flex-direction: row !important;
gap: 32px !important;
align-items: flex-start !important;
max-width: 100% !important;
}
.timeline__item {
flex-direction: column !important;
gap: 16px !important;
}
.about-page__title {
font-size: 32px !important;
line-height: 32px !important;
margin-bottom: 32px !important;
}
.about-page__banner img {
height: 120px !important;
}
.about-page__intro-heading {
font-size: 28px !important;
line-height: 28px !important;
}
.page-id-244 .timeline__year {
font-size: 28px !important;
line-height: 28px !important;
flex: 0 0 60px !important;
min-width: 60px !important;
}
.timeline__year {
font-size: 28px !important;
line-height: 28px !important;
flex: 0 0 100% !important;
min-width: 60px !important;
text-align: center !important;
}
.timeline__text {
padding-top: 4px;
}
.about-page__mid-image img {
height: 240px !important;
}
.about-page__logo-block {
height: 240px !important;
}
.about-page__logo-img img {
max-width: 300px !important;
}
}
/* ============================================================
FLER FRÅGOR-SEKTION
============================================================ */
.faq-cta-section_wrapper {
padding: 80px 16px;
background: #CFEEF2;
width: 100%;
box-sizing: border-box;
}
.faq-cta-section {
max-width: 1440px;
margin: auto;
}
.faq-cta__row {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 32px !important;
width: 100% !important;
max-width: 100% !important;
}
.faq-cta__left {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 32px !important;
flex: 1 1 0 !important;
}
.faq-cta__heading {
font-family: 'Doumbar', Georgia, serif !important;
font-size: 40px !important;
font-weight: 500 !important;
line-height: 48px !important;
color: #001111 !important;
margin: 0 !important;
white-space: nowrap;
}
.faq-cta__body {
font-family: 'Urbanist', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 24px !important;
color: #3D3C3B !important;
margin: 0 !important;
flex: 1 1 0;
}
.faq-cta__btn-wrap {
flex-shrink: 0 !important;
}
.btn-faq-cta .wp-block-button__link {
background: #00646F !important;
color: #FFFEFC !important;
border-radius: 20px !important;
padding: 10px 16px 10px 20px !important;
font-family: 'Urbanist', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 20px !important;
letter-spacing: 0.48px !important;
border: none !important;
white-space: nowrap;
}
.btn-faq-cta .wp-block-button__link:hover {
background: #003D44 !important;
}
/* @media (max-width: 1600px) {
.faq-cta-section { padding: 80px 120px; }
}
@media (max-width: 1200px) {
.faq-cta-section { padding: 80px 60px; }
} */
@media (max-width: 1024px) {
/* .faq-cta-section { padding: 40px 16px; } */
.faq-cta__row {
flex-direction: column !important;
align-items: flex-start !important;
}
.faq-cta__left {
flex-direction: column !important;
align-items: flex-start !important;
gap: 32px !important;
}
.faq-cta__heading {
font-size: 28px !important;
line-height: 28px !important;
white-space: normal;
}
}
/* ============================================================
INFOTEXT - SIDA (villkor, leverans, etc.)
============================================================ */
.infotext-page {
padding: 80px 240px;
background: #FFFEFC;
box-sizing: border-box;
}
.infotext-page__title {
font-family: 'Doumbar', Georgia, serif !important;
font-size: 48px !important;
font-weight: 500 !important;
line-height: 56px !important;
color: #001111 !important;
text-align: center !important;
margin-bottom: 60px !important;
}
.infotext-page__sections {
display: flex !important;
flex-direction: column !important;
gap: 60px !important;
}
/* Varje sektion: rubrik vänster + innehåll höger */
.infotext__item {
display: flex !important;
flex-direction: row !important;
gap: 32px !important;
align-items: flex-start !important;
}
.infotext__label {
font-family: 'Doumbar', Georgia, serif !important;
font-size: 32px !important;
font-weight: 400 !important;
line-height: 40px !important;
color: #001111 !important;
text-align: right !important;
margin: 0 !important;
flex: 0 0 230px !important;
min-width: 230px !important;
}
.infotext__content {
flex: 1 !important;
}
.infotext__content p {
font-family: 'Urbanist', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 24px !important;
color: #3D3C3B !important;
margin-bottom: 16px !important;
}
.infotext__content p:last-child {
margin-bottom: 0 !important;
}
/* Sub-rubriker (Företagsfaktura från Svea etc.) */
.infotext__sub-heading {
font-family: 'Urbanist', sans-serif !important;
font-size: 24px !important;
font-weight: 600 !important;
line-height: 32px !important;
color: #3D3C3B !important;
margin-top: 16px !important;
margin-bottom: 8px !important;
}
/* Sub-labels (Kreditprövning, Betalningsvillkor etc.) */
.infotext__sub-label {
font-family: 'Urbanist', sans-serif !important;
font-size: 20px !important;
font-weight: 500 !important;
line-height: 28px !important;
color: #3D3C3B !important;
margin-top: 8px !important;
margin-bottom: 4px !important;
}
@media (max-width: 1600px) {
.infotext-page { padding: 80px 120px; }
}
@media (max-width: 1200px) {
.infotext-page { padding: 80px 60px; }
}
@media (max-width: 1024px) {
.infotext-page { padding: 40px 16px; }
.infotext-page__title {
font-size: 32px !important;
line-height: 32px !important;
margin-bottom: 32px !important;
}
.infotext-page__sections {
gap: 32px !important;
}
/* Mobil: staplad layout */
.infotext__item {
flex-direction: column !important;
gap: 16px !important;
}
.infotext__label {
flex: none !important;
min-width: unset !important;
text-align: left !important;
font-size: 24px !important;
line-height: 28px !important;
}
}
/* ============================================================
LOGIN DRAWER
============================================================ */
/* Overlay */
.login-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(0, 17, 17, 0.4);
z-index: 9998;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.login-drawer-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
/* Drawer */
.login-drawer {
position: fixed;
top: 0;
right: 0;
width: 400px;
height: 100%;
background: #FFFEFC;
z-index: 9999;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
overflow-y: auto;
}
.login-drawer.is-open {
transform: translateX(0);
}
/* Stäng-rad */
.login-drawer__close-bar {
flex-shrink: 0;
background: #001111;
padding: 6px 8px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.login-drawer__close {
background: none;
border: none;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #FFFEFC;
line-height: 1;
}
.login-drawer__close:hover {
opacity: 0.7;
}
/* Innehåll */
.login-drawer__content {
flex: 1;
padding: 36px 60px;
display: flex;
flex-direction: column;
gap: 32px;
}
.login-drawer__title {
font-family: 'Doumbar', Georgia, serif;
font-size: 40px;
font-weight: 500;
line-height: 48px;
color: #001111;
margin: 0;
}
.login-drawer__desc {
font-family: 'Urbanist', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #001111;
margin: 0;
}
/* Formulär */
.login-drawer__form {
display: flex;
flex-direction: column;
gap: 32px;
}
.login-drawer__field {
display: flex;
flex-direction: column;
gap: 8px;
}
.login-drawer__label {
font-family: 'Urbanist', sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 20px;
letter-spacing: 0.48px;
color: #001111;
}
.login-drawer__input {
width: 100%;
padding: 12px 16px;
background: #F5F4F2;
border: none;
border-radius: 8px;
font-family: 'Urbanist', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #001111;
box-sizing: border-box;
outline: none;
transition: box-shadow 0.2s;
}
.login-drawer__input::placeholder {
color: #5A5856;
}
.login-drawer__input:focus {
box-shadow: 0 0 0 2px #00646F;
}
.login-drawer__submit {
width: 100%;
padding: 10px 20px;
background: #00646F;
color: #FFFEFC;
border: none;
border-radius: 20px;
font-family: 'Urbanist', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0.48px;
cursor: pointer;
transition: background 0.2s;
}
.login-drawer__submit:hover {
background: #003D44;
text-decoration: underline;
}
/* Footer-länkar */
.login-drawer__footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.login-drawer__footer-link {
font-family: 'Urbanist', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.48px;
color: #001111;
text-decoration: underline;
}
.login-drawer__footer-link:hover {
opacity: 0.7;
}
/* Förhindra scroll på body när drawer är öppen */
body.login-drawer-open {
overflow: hidden;
}
/* Mobil: full bredd */
@media (max-width: 768px) {
.login-drawer {
width: 100%;
}
.login-drawer__content {
padding: 40px 16px;
}
.login-drawer__title {
font-size: 28px;
line-height: 28px;
}
}
/* ============================================================
VARUKORG-DRAWER
============================================================ */
.cart-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(0, 17, 17, 0.4);
z-index: 9998;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.cart-drawer-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.cart-drawer {
position: fixed;
top: 0;
right: 0;
width: 500px;
height: 100%;
background: #FFFEFC;
z-index: 9999;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.10);
}
.cart-drawer.is-open {
transform: translateX(0);
}
body.cart-drawer-open {
overflow: hidden;
}
/* ── Stäng-rad ── */
.cart-drawer__close-bar {
flex-shrink: 0;
background: #001111;
padding: 6px 8px;
display: flex;
align-items: center;
}
.cart-drawer__close {
background: none;
border: none;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #FFFEFC;
line-height: 1;
}
.cart-drawer__close:hover { opacity: 0.7; }
/* ── Inner layout ── */
.cart-drawer__inner {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.cart-drawer__header {
flex-shrink: 0;
padding: 40px 60px 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.cart-drawer__title {
font-family: 'Doumbar', Georgia, serif;
font-size: 40px;
font-weight: 500;
line-height: 48px;
color: #001111;
margin: 0;
}
.cart-drawer__subtitle {
font-family: 'Urbanist', sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 28px;
color: #001111;
margin: 0;
display: flex;
gap: 8px;
}
/* ── Items (scrollable) ── */
.cart-drawer__items-wrap {
flex: 1;
overflow-y: auto;
padding: 32px 60px 0;
display: flex;
flex-direction: column;
gap: 0;
}
.cart-drawer__items-wrap.is-loading {
opacity: 0.5;
pointer-events: none;
}
.cart-drawer__empty {
font-family: 'Urbanist', sans-serif;
font-size: 16px;
color: #5A5856;
margin: 0;
}
/* ── Enkelt produktobjekt ── */
.cart-drawer__item {
display: flex;
gap: 16px;
align-items: flex-start;
padding-bottom: 24px;
}
.cart-drawer__item-divider {
border: none;
border-top: 1px solid #D5D2CF;
margin: 0 0 24px;
}
.cart-drawer__item-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.cart-drawer__item-meta {
display: flex;
flex-direction: column;
gap: 4px;
}
.cart-drawer__item-name {
font-family: 'Urbanist', sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 28px;
color: #001111;
margin: 0;
}
.cart-drawer__item-desc {
font-family: 'Urbanist', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0.28px;
color: #3D3C3B;
margin: 0;
}
.cart-drawer__item-actions {
display: flex;
flex-direction: column;
gap: 16px;
}
.cart-drawer__qty-row {
display: flex;
align-items: center;
gap: 16px;
}
.cart-drawer__qty-label {
font-family: 'Urbanist', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #001111;
}
.cart-drawer__stepper {
display: inline-flex;
align-items: center;
border: 1px solid #001111;
border-radius: 13px;
overflow: hidden;
}
.cart-drawer__step {
background: none;
border: none;
padding: 4px 10px;
cursor: pointer;
font-size: 16px;
line-height: 1;
color: #001111;
display: flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 26px;
transition: background 0.15s;
}
.cart-drawer__step:hover { background: #F4EFE4; }
.cart-drawer__step:first-child { border-right: 1px solid #001111; }
.cart-drawer__price-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.cart-drawer__price {
font-family: 'Urbanist', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #001111;
}
.cart-drawer__remove {
background: none;
border: none;
padding: 0;
cursor: pointer;
font-family: 'Urbanist', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.42px;
color: #001111;
text-decoration: underline;
white-space: nowrap;
}
.cart-drawer__remove:hover { opacity: 0.6; }
.cart-drawer__item-img {
flex-shrink: 0;
width: 160px;
height: 160px;
background: #D5D2CF;
border-radius: 4px;
overflow: hidden;
}
.cart-drawer__item-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ── Footer (fast botten) ── */
.cart-drawer__footer {
flex-shrink: 0;
padding: 24px 60px 40px;
display: flex;
flex-direction: column;
gap: 16px;
}
.cart-drawer__shipping-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-drawer__shipping-label {
font-family: 'Urbanist', sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 20px;
letter-spacing: 0.48px;
color: #001111;
}
.cart-drawer__shipping-value {
font-family: 'Doumbar', Georgia, serif;
font-size: 24px;
font-weight: 500;
color: #5A5856;
line-height: 20px;
}
.cart-drawer__shipping-method {
font-family: 'Urbanist', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #3D3C3B;
margin: 4px 0 0;
}
/* Fri frakt-bar */
.cart-drawer__free-shipping {
background: #FFE436;
color: #001111;
border-radius: 4px;
padding: 12px 20px;
font-family: 'Urbanist', sans-serif;
font-size: 15px;
font-weight: 500;
line-height: 20px;
text-align: center;
}
.cart-drawer__free-shipping-amount {
font-weight: 700;
}
.cart-drawer__footer-divider {
border: none;
border-top: 1px solid #D5D2CF;
margin: 0;
}
.cart-drawer__total-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-drawer__total-label {
font-family: 'Urbanist', sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 20px;
letter-spacing: 0.48px;
color: #001111;
margin: 0;
}
.cart-drawer__total-sub {
font-family: 'Urbanist', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #3D3C3B;
margin: 2px 0 0;
}
.cart-drawer__total-value {
font-family: 'Doumbar', Georgia, serif;
font-size: 24px;
font-weight: 500;
line-height: 20px;
color: #001111;
}
.cart-drawer__checkout {
display: block;
width: 100%;
padding: 10px 20px;
background: #001111;
color: #FFFEFC;
border-radius: 20px;
font-family: 'Urbanist', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0.48px;
text-align: center;
text-decoration: none;
transition: background 0.2s;
box-sizing: border-box;
}
.cart-drawer__checkout:hover:not(.cart-drawer__checkout--disabled) {
background: #003D44;
}
.cart-drawer__checkout--disabled {
background: #D5D2CF;
color: #FFFEFC;
cursor: not-allowed;
pointer-events: none;
}
/* ── Mobil: full bredd ── */
@media (max-width: 768px) {
.cart-drawer {
width: 100%;
}
.cart-drawer__header {
padding: 32px 16px 0;
}
.cart-drawer__items-wrap {
padding: 24px 16px 0;
}
.cart-drawer__footer {
padding: 20px 16px 32px;
}
.cart-drawer__title {
font-size: 32px;
line-height: 40px;
}
.cart-drawer__item-img {
width: 100px;
height: 100px;
}
}
/* ============================================================
INFOBOXAR – SEKTION
============================================================ */
.infoboxar-section {
padding: 80px 0;
background: #FFFEFC;
}
/* Kategorigrupp-rubrik */
.infobox-group__heading {
font-family: 'Doumbar', Georgia, serif !important;
font-size: 40px !important;
font-weight: 500 !important;
line-height: 48px !important;
color: #001111 !important;
margin: 0 !important;
padding-bottom: 32px;
}
/* Kolumngrid – override WP columns gap */
.infobox-card-grid.wp-block-columns {
gap: 32px !important;
}
/* Kort */
.infobox-card {
background: #F4EFE4;
border: 1px solid #D5D2CF;
border-radius: 8px;
padding: 24px !important;
height: 100%;
box-sizing: border-box;
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
}
/* Kortets övre del (tag + titel) */
.infobox-card__header {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
/* Typ-pill */
.infobox__tag {
display: inline-block !important;
background: #FFFEFC;
border-radius: 33px;
padding: 4px 12px !important;
font-family: 'Urbanist', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
letter-spacing: 0.42px !important;
color: #001111 !important;
margin: 0 !important;
width: fit-content;
}
/* Titel */
.infobox__title {
font-family: 'Urbanist', sans-serif !important;
font-size: 20px !important;
font-weight: 500 !important;
line-height: 28px !important;
color: #001111 !important;
margin: 0 !important;
}
/* Beskrivning (valfri) */
.infobox__desc {
font-family: 'Urbanist', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #001111;
margin: 0;
}
/* Knappar */
.infobox__buttons {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
margin-top: auto;
}
.infobox-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px 10px 20px;
border-radius: 20px;
font-family: 'Urbanist', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0.48px;
text-decoration: none;
transition: opacity 0.2s ease;
white-space: nowrap;
}
.infobox-btn:hover { opacity: 0.85; }
.infobox-btn--download {
background: #00646F;
color: #FFFEFC;
}
.infobox-btn--product {
background: #FFFEFC;
color: #001111;
outline: 1px solid #001111;
outline-offset: -1px;
}
/* Mobil */
@media (max-width: 1600px) {
.infoboxar-section { padding: 80px 120px; }
}
@media (max-width: 1200px) {
.infoboxar-section { padding: 80px 60px; }
}
@media (max-width: 768px) {
.infoboxar-section { padding: 40px 16px; }
.infobox-card-grid.wp-block-columns {
flex-direction: column !important;
}
.infobox-card-grid.wp-block-columns > .wp-block-column {
flex-basis: 100% !important;
min-width: 100% !important;
}
.infobox-group__heading {
font-size: 28px !important;
line-height: 36px !important;
}
}
/* ============================================================
GUIDER – LANDNINGSSIDA & ARKIV
============================================================ */
/* Intro-block på landningssidan */
.guides-landing__intro {
text-align: left;
}
.guides-landing__title {
font-family: 'Doumbar', Georgia, serif !important;
font-size: 48px !important;
font-weight: 500 !important;
line-height: 56px !important;
color: #001111 !important;
margin: 0 0 16px !important;
}
.guides-landing__subtitle {
font-family: 'Urbanist', sans-serif !important;
font-size: 18px !important;
font-weight: 400 !important;
line-height: 28px !important;
color: #3D3C3B !important;
margin: 0 !important;
}
/* Arkivhuvud (taxonomi-sida) */
.guide-archive__header {
padding-bottom: 48px;
}
.guide-archive__title.wp-block-query-title {
font-family: 'Doumbar', Georgia, serif !important;
font-size: 48px !important;
font-weight: 500 !important;
line-height: 56px !important;
color: #001111 !important;
margin: 0 0 12px !important;
}
.guide-archive__desc {
font-family: 'Urbanist', sans-serif !important;
font-size: 18px !important;
font-weight: 400 !important;
line-height: 28px !important;
color: #3D3C3B !important;
margin: 0 !important;
}
/* Query loop: 3-kolumns grid */
.guide-grid.wp-block-post-template {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 32px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* ── Taggfilter ── */
.guide-filter-wrap {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0 0 32px;
}
.guide-filter-pill {
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 16px;
background: #F4EFE4;
color: #001111;
border: none;
border-radius: 4px;
font-family: 'Urbanist', sans-serif;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
}
.guide-filter-pill:hover {
background: #003D44;
color: #FFFEFC;
}
.guide-filter-pill.is-active {
background: #00646F;
color: #FFFEFC;
}
/* Laddar-tillstånd under filtrering */
.guide-grid-outer.is-loading {
opacity: 0.5;
pointer-events: none;
transition: opacity 0.2s;
}
/* Grid renderat av JS */
.guide-grid.guide-grid--js {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 32px !important;
}
.guide-no-results {
text-align: center;
padding: 40px 0;
color: #5A5856;
font-family: 'Urbanist', sans-serif;
font-size: 16px;
}
/* ── Guidekort ── */
.guide-card {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
/* Bild – 240px fast höjd, rundade hörn på alla sidor */
.guide-card__image {
display: block;
height: 240px;
overflow: hidden;
background: #D5D2CF;
border-radius: 8px !important;
margin: 0 !important;
flex-shrink: 0;
}
/* Block-genererat: */
.guide-card__image a {
display: block;
height: 100%;
}
.guide-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 8px !important;
transition: transform 0.3s ease;
}
.guide-card:hover .guide-card__image img {
transform: scale(1.03);
}
/* Kortets textdel – CSS grid: text (1fr) | cirkelknapp (32px) */
.guide-card__body {
display: grid !important;
grid-template-columns: 1fr 32px !important;
grid-template-rows: auto auto !important;
gap: 4px 16px !important;
padding: 0 !important;
align-items: start !important;
}
/* Dölj taggar i kortet */
.guide-card__cat {
display: none !important;
}
/* Guidetitel – rad 1, kolumn 1 */
.guide-card__title,
.guide-card__title.wp-block-post-title {
grid-column: 1 !important;
grid-row: 1 !important;
font-family: 'Urbanist', sans-serif !important;
font-size: 20px !important;
font-weight: 500 !important;
line-height: 28px !important;
color: #001111 !important;
margin: 0 !important;
}
.guide-card__title a {
color: inherit !important;
text-decoration: none !important;
}
.guide-card__title a:hover {
color: #00646F !important;
}
/* Utdrag – rad 2, kolumn 1 */
.guide-card__excerpt {
grid-column: 1 !important;
grid-row: 2 !important;
}
.guide-card__excerpt .wp-block-post-excerpt__excerpt,
.guide-card__excerpt p {
font-family: 'Urbanist', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 24px !important;
color: #3D3C3B !important;
margin: 0 !important;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Dölj "Läs mer"-länk från excerpt-blocket */
.guide-card__excerpt .wp-block-post-excerpt__more-link {
display: none !important;
}
/* Teal cirkelknapp – kolumn 2, sträcker över båda raderna */
.guide-card__arrow,
.guide-card__arrow.wp-block-read-more {
grid-column: 2 !important;
grid-row: 1 / 3 !important;
align-self: center !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
background: #00646F !important;
color: #FFFEFC !important;
font-size: 16px !important;
line-height: 1 !important;
text-decoration: none !important;
transition: background 0.2s ease !important;
flex-shrink: 0;
}
.guide-card__arrow:hover,
.guide-card__arrow.wp-block-read-more:hover {
background: #003D44 !important;
}
/* ── Enskild guide-sida ── */
.site-main--guide {
padding-bottom: 0;
padding-top: 40px;
}
/* Kategori-pill ovanför titeln */
.guide-hero__cat .wp-block-post-terms__items {
display: flex;
gap: 8px;
}
.guide-hero__cat a {
display: inline-block;
padding: 4px 12px;
background: #F4EFE4;
border-radius: 4px;
font-family: 'Urbanist', sans-serif;
font-size: 14px;
font-weight: 500;
color: #001111;
text-decoration: none;
}
.guide-hero__cat a:hover {
background: #00646F;
color: #FFFEFC;
}
/* H1 */
.guide-hero__title.wp-block-post-title {
font-family: 'Doumbar', Georgia, serif !important;
font-size: 48px !important;
font-weight: 500 !important;
line-height: 56px !important;
color: #001111 !important;
margin: 0 0 32px !important;
}
/* Ingress */
.guide-hero__excerpt .wp-block-post-excerpt__excerpt {
font-family: 'Urbanist', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 24px !important;
color: #3D3C3B !important;
margin: 0 !important;
}
.guide-hero__excerpt .wp-block-post-excerpt__more-link {
display: none !important;
}
/* Omslagsbild */
.guide-hero__image.wp-block-post-featured-image {
margin: 0 !important;
}
.guide-hero__image img {
width: 100%;
object-fit: cover;
display: block;
}
/* Innehåll */
.guide-content .wp-block-post-content {
font-family: 'Urbanist', sans-serif;
font-size: 16px;
line-height: 26px;
color: #3D3C3B;
}
.guide-content .wp-block-post-content h2 {
font-family: 'Doumbar', Georgia, serif;
font-size: 32px;
font-weight: 500;
line-height: 40px;
color: #001111;
margin: 48px 0 16px;
}
.guide-content .wp-block-post-content h3 {
font-family: 'Urbanist', sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 30px;
color: #001111;
margin: 32px 0 12px;
}
.guide-content .wp-block-post-content p {
margin: 0 0 20px;
}
/* ── Mobil: guider ── */
@media (max-width: 1024px) {
.guides-landing__title,
.guide-archive__title.wp-block-query-title,
.guide-hero__title.wp-block-post-title {
font-size: 32px !important;
line-height: 40px !important;
}
.guides-landing__subtitle,
.guide-archive__desc {
font-size: 16px !important;
line-height: 24px !important;
}
.guide-hero__excerpt .wp-block-post-excerpt__excerpt {
font-size: 16px !important;
line-height: 24px !important;
}
}
@media (max-width: 768px) {
/* 1-kolumns grid med 32px gap (Figma-spec) */
.guide-grid.wp-block-post-template,
.guide-grid.guide-grid--js {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
/* Titel: 16px/20px på mobil */
.guide-card__title,
.guide-card__title.wp-block-post-title {
font-size: 16px !important;
line-height: 20px !important;
}
/* Filter-pills lite mindre */
.guide-filter-pill {
font-size: 14px !important;
height: 32px !important;
padding: 0 12px !important;
}
}
/* ══════════════════════════════════════════════
PRODUKTBESKRIVNING & SPECIFIKATIONER
══════════════════════════════════════════════ */
.product-tabs {padding-top: 40px;}
/* Two-column layout: 909px content / empty right */
.product-tabs__columns.wp-block-columns {
align-items: flex-start !important;
gap: 32px !important;
}
.product-tabs__left.wp-block-column {
flex: 0 1 63.125% !important;
min-width: 0;
}
.product-tabs__right.wp-block-column {
flex: 0 1 34.653% !important;
min-width: 0;
}
/* Section headings: "Produktbeskrivning", "Specifikationer" */
.product-tabs__left h2 {
font-family: 'Doumbar', Georgia, serif;
font-weight: 400;
font-size: 32px;
line-height: 40px;
color: #001111;
margin: 48px 0 16px;
}
.product-tabs__left h2:first-child {
margin-top: 0;
}
/* Body text */
.product-tabs__left p {
font-family: 'Urbanist', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #001111;
margin: 0 0 16px;
}
.product-tabs__left p:last-child {
margin-bottom: 0;
}
/* Specifications table */
.product-tabs__left table {
width: 100%;
border-collapse: collapse;
margin: 0;
}
.product-tabs__left table tr:first-child td,
.product-tabs__left table tr:first-child th {
border-top: 1px solid #D5D2CF;
}
.product-tabs__left table td,
.product-tabs__left table th {
padding: 12px 0;
font-family: 'Urbanist', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #001111;
border-bottom: 1px solid #D5D2CF;
vertical-align: top;
background: none !important;
}
/* Label column: muted color, fixed 160px width */
.product-tabs__left table td:first-child,
.product-tabs__left table th:first-child {
width: 160px;
min-width: 160px;
color: #5A5856;
padding-right: 16px;
}
/* WooCommerce product-details block: dölj flik-navigation, visa allt som sektioner */
.product-tabs .wc-tabs,
.product-tabs .woocommerce-tabs .tabs,
.product-tabs .woocommerce-tabs ul.tabs {
display: none !important;
}
.product-tabs .woocommerce-tabs .panel,
.product-tabs .woocommerce-tabs .woocommerce-Tabs-panel {
display: block !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Dölj recensioner i denna sektion */
.product-tabs #tab-reviews {
display: none !important;
}
/* Mellanrum mellan sektioner (Produktbeskrivning → Ytterligare information) */
.product-tabs .woocommerce-tabs .panel + .panel {
margin-top: 32px !important;
}
/* WooCommerce auto-genererade rubriker: "Produktbeskrivning", "Ytterligare information" */
.product-tabs .woocommerce-tabs .panel > h2:first-child {
margin-top: 0 !important;
}
/* WooCommerce attributes-tabell (Ytterligare information) */
.product-tabs .shop_attributes {
width: 100% !important;
border-collapse: collapse !important;
margin: 0 !important;
}
.product-tabs .shop_attributes tr:first-child td,
.product-tabs .shop_attributes tr:first-child th {
border-top: 1px solid #D5D2CF !important;
}
.product-tabs .shop_attributes td,
.product-tabs .shop_attributes th {
padding: 12px 0 !important;
font-family: 'Urbanist', sans-serif !important;
font-weight: 400 !important;
font-size: 16px !important;
line-height: 24px !important;
color: #001111 !important;
border-bottom: 1px solid #D5D2CF !important;
vertical-align: top !important;
background: none !important;
text-align: left;
font-style: normal!important;
}
.product-tabs .shop_attributes .woocommerce-product-attributes-item__label {
width: 160px !important;
min-width: 160px !important;
/* color: #5A5856 !important; */
padding-right: 16px !important;
font-weight: 400 !important;
}
/* ══════════════════════════════════════════════
GALLERI – wc-block-product-gallery
══════════════════════════════════════════════ */
/* Desktop: thumbnail-strip 169px */
.product-gallery-col .wc-block-product-gallery-thumbnails {
width: 169px !important;
min-width: 169px !important;
}
/* Aktiv thumbnail: primary-ram */
.product-gallery-col .wc-block-product-gallery-thumbnails__thumbnail__image--is-active {
outline: 2px solid var(--wp--preset--color--primary) !important;
outline-offset: -2px;
}
/* ── Mobil: product-tabs + galleri ── */
@media (max-width: 1024px) {
.product-tabs__columns.wp-block-columns {
flex-direction: column !important;
gap: 0 !important;
}
.product-tabs__left.wp-block-column,
.product-tabs__right.wp-block-column {
flex: none !important;
width: 100% !important;
max-width: 100% !important;
}
.product-tabs__left h2 {
font-size: 24px;
line-height: 32px;
margin: 40px 0 12px;
}
.product-tabs__left h2:first-child {
margin-top: 0;
}
/* Galleri: stapla vertikalt, thumbnails under */
.product-gallery-col .wc-block-product-gallery.is-horizontal {
flex-direction: column !important;
}
.product-gallery-col .wc-block-product-gallery-thumbnails {
order: 1 !important;
width: auto !important;
min-width: unset !important;
height: auto !important;
}
/* Thumbnail-rad → pagination-dots */
.product-gallery-col .wc-block-product-gallery-thumbnails__scrollable {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
gap: 8px !important;
overflow: visible !important;
height: auto !important;
padding: 4px 0 !important;
}
/* Varje thumbnail-div = dot */
.product-gallery-col .wc-block-product-gallery-thumbnails__thumbnail {
position: relative !important;
width: 4px !important;
height: 4px !important;
min-width: 4px !important;
border-radius: 2px !important;
background: #D5D2CF !important;
flex-shrink: 0 !important;
overflow: visible !important;
transition: width 0.15s ease, background 0.15s ease;
}
/* Aktiv dot: pill */
.product-gallery-col .wc-block-product-gallery-thumbnails__thumbnail:has(
.wc-block-product-gallery-thumbnails__thumbnail__image--is-active
) {
width: 12px !important;
background: #001111 !important;
}
/* Thumbnail-bild: osynlig men klickbar (expanded touch target) */
.product-gallery-col .wc-block-product-gallery-thumbnails__thumbnail__image {
position: absolute !important;
top: -8px !important;
left: -8px !important;
width: calc(100% + 16px) !important;
height: calc(100% + 16px) !important;
opacity: 0 !important;
cursor: pointer !important;
}
.product-gallery-col .wc-block-product-gallery-thumbnails__thumbnail__image--is-active {
outline: none !important;
}
/* Produktsida: 24px padding-top på mobil (override inline 40px) */
.site-main--product > .wp-block-group {
padding-top: 24px !important;
}
}
/* ══════════════════════════════════════════════
CROSS-SELLS – Tillhörande produkter (produktsida, höger kolumn)
══════════════════════════════════════════════ */
/* Dölj högerkolumnen + expandera vänster om inga cross-sells finns */
/* .product-tabs__right:not(:has(.cross-sells)) {
display: none !important;
} */
.product-tabs__columns:not(:has(.cross-sells)) .product-tabs__left {
flex-basis: 100% !important;
max-width: 100%;
}
.cross-sells {
display: flex;
flex-direction: column;
gap: 16px;
}
.cross-sells__title {
font-family: 'Doumbar', Georgia, serif;
font-size: 32px;
font-weight: 400;
line-height: 40px;
color: #001111;
margin: 0;
}
/* Grid: 2 kolumner, scroll om fler än ~2 rader */
.cross-sells__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-height: 760px;
overflow-y: auto;
padding-right: 12px;
scrollbar-width: thin;
scrollbar-color: #D5D2CF #F5F4F2;
}
.cross-sells__grid::-webkit-scrollbar {
width: 8px;
}
.cross-sells__grid::-webkit-scrollbar-track {
background: #F5F4F2;
border-radius: 4px;
}
.cross-sells__grid::-webkit-scrollbar-thumb {
background: #D5D2CF;
border-radius: 4px;
}
.cross-sells__card {
display: flex;
flex-direction: column;
/* gap: 16px; */
}
.cross-sells__card p {margin: 0;}
.cross-sells__img-wrap {
display: block;
aspect-ratio: 1;
overflow: hidden;
border-radius: 4px;
/* background: #D5D2CF; */
margin-bottom: 16px;
max-height: 200px;
}
.cross-sells__img {
width: 100%;
height: 100%!important;
object-fit: contain;
display: block;
}
.cross-sells__img-placeholder {
width: 100%;
aspect-ratio: 1;
background: #D5D2CF;
}
.cross-sells__info {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.cross-sells__name {
font-family: 'Urbanist', sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 20px;
letter-spacing: 0.48px;
color: #001111;
text-decoration: none;
}
.cross-sells__name:hover {
text-decoration: underline;
}
.cross-sells__desc {
font-family: 'Urbanist', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0.28px;
color: #3D3C3B;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cross-sells__footer {
display: flex;
align-items: center;
gap: 16px;
margin-top: auto;
padding-top: 10px;
}
.cross-sells__price {
flex: 1;
font-family: 'Doumbar', Georgia, serif;
font-size: 24px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0.48px;
color: #001111;
}
.cross-sells__price ins {
text-decoration: none;
}
.cross-sells__price del {
font-size: 14px;
color: #5A5856;
}
.cross-sells__add-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px 10px 20px;
background: #FFFEFC;
color: #001111;
border: 1px solid #001111;
border-radius: 20px;
font-family: 'Urbanist', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0.48px;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s ease;
}
.cross-sells__add-btn:hover {
background: #f0eeeb;
}
.cross-sells__add-btn.loading {
opacity: 0.6;
pointer-events: none;
}
/* Progress bar (visas bara på mobil via CSS) */
.cross-sells__progress {
display: none;
height: 3px;
background: #F5F4F2;
border-radius: 2px;
overflow: hidden;
}
.cross-sells__progress-bar {
height: 100%;
width: 0%;
background: #D5D2CF;
border-radius: 2px;
transition: width 0.1s linear;
}
/* Mobil: horisontell swipe-karusell, 2 kort i bredd */
@media (max-width: 1024px) {
.cross-sells__title {
font-size: 24px;
line-height: 32px;
}
.cross-sells__progress {
display: block;
margin-top: 12px;
}
.cross-sells__grid {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 12px;
max-height: none;
padding-right: 0;
}
.cross-sells__grid::-webkit-scrollbar {
display: none;
}
.cross-sells__card {
flex: 0 0 calc(50% - 6px);
scroll-snap-align: start;
min-width: 0;
}
}
/*bundle products bredd*/
.bundle-products {
margin: 0 -16px!important;
}
.woocommerce-checkout main .woocommerce {
margin-left: auto;
margin-right: auto
}
#order_review table.shop_table {
border-collapse: separate;
width: 100%;
margin-right: 0;
}
#order_review table.shop_table th {
vertical-align: top;
}
#order_review input[type=radio] {
--size: 1.8em;
--bullet-offset: .3em;
--foreground-color: #111;
appearance: none;
width: var(--size);
height: var(--size);
border-radius: 50%;
border: 2px solid var(--foreground-color);
display: inline-flex;
cursor: pointer;
margin: 0 .5rem 0 0 !important;
vertical-align: middle;
position: relative;
top: -1px;
}
#order_review input[type=radio]::after {
content: '';
position: absolute;
top: var(--bullet-offset);
left: var(--bullet-offset);
right: var(--bullet-offset);
bottom: var(--bullet-offset);
background: var(--foreground-color);
border-radius: 50%;
transition: opactiy .4s;
}
#order_review input[type=radio]:not(:checked)::after {
opacity: 0;
}
ul#shipping_method li p {
font-weight: normal;
margin-top: 0;
grid-column: 2;
}
ul#shipping_method li p:last-child {
margin-bottom: 0;
}
ul#shipping_method li {
padding: 1em;
border: 1px solid transparent;
border-radius: 5px;
position: relative;
display: grid;
grid-template-columns: 1.8em 1fr;
column-gap: .4em;
}
ul#shipping_method li:has(input[type=radio].shipping_method:checked) {
border-color: color-mix(in srgb,currentColor 20%,transparent);
background: color-mix(in srgb,currentColor 5%,transparent);
}
ul#shipping_method li label {
cursor: pointer;
}
ul#shipping_method li label::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
}
#sco-change-payment {
margin-bottom: 2em;
}