/* ============================================================
Svetskompaniet – site styles
Scoped, token-driven CSS for what block attributes can't express
(layout grids, sticky/positioning, mega menu, mobile drawer,
pseudo-element decorations, hover/focus states).
Colours/spacing/typography that HAVE block controls live as block
attributes in the markup, not here.
Tokens come from theme.json: --wp--preset--color|font-family|...
============================================================ */
:root {
--sk-maxw: 1320px;
--sk-radius: 6px;
--sk-radius-lg: 10px;
}
/* Token shorthands used throughout this file */
:root {
--sk-arc-50: var(--wp--preset--color--primary-50);
--sk-arc-100: var(--wp--preset--color--primary-100);
--sk-arc-200: var(--wp--preset--color--primary-200);
--sk-arc-300: var(--wp--preset--color--primary-300);
--sk-arc-500: var(--wp--preset--color--primary-500);
--sk-arc-600: var(--wp--preset--color--primary-600);
--sk-arc-700: var(--wp--preset--color--primary-700);
--sk-arc-800: var(--wp--preset--color--primary-800);
--sk-steel-50: var(--wp--preset--color--gray-50);
--sk-steel-100: var(--wp--preset--color--gray-100);
--sk-steel-200: var(--wp--preset--color--gray-200);
--sk-steel-300: var(--wp--preset--color--gray-300);
--sk-steel-400: var(--wp--preset--color--gray-400);
--sk-steel-500: var(--wp--preset--color--gray-500);
--sk-steel-600: var(--wp--preset--color--gray-600);
--sk-steel-700: var(--wp--preset--color--gray-700);
--sk-ink: var(--wp--preset--color--gray-950);
--sk-display: var(--wp--preset--font-family--display);
--sk-body: var(--wp--preset--font-family--body);
--sk-mono: var(--wp--preset--font-family--mono);
--sk-success: var(--wp--preset--color--success);
--sk-bg-alt: var(--wp--preset--color--gray-50);
}
/* Inner 1320 wrapper for full-width (alignfull) sections — block-native sections use a
group with class sk-container; vertical padding stays a block attribute on the section. */
.sk-container { max-width: var(--sk-maxw); margin-inline: auto; padding-inline: 24px; width: 100%; }
/* ---------- reused block styles (registered in functions.php) ---------- */
/* Eyebrow: NO colour here — set per instance via the block's textColor so it can be
primary-500 on light sections, primary-200/300 on dark. (A colour here would
out-specify the has-*-color class and lock every eyebrow to one colour.) */
.is-style-eyebrow {
font-family: var(--sk-display);
text-transform: uppercase;
font-weight: 700;
font-size: 0.8125rem;
letter-spacing: 0.08em;
margin: 0;
}
ul.is-style-check {
list-style: none;
padding-inline-start: 0;
}
ul.is-style-check li {
position: relative;
padding-inline-start: 1.9rem;
}
ul.is-style-check li::before {
content: "";
position: absolute;
left: 0;
top: 0.35em;
width: 18px;
height: 18px;
/* check colour follows --sk-check (default green); override per context */
background: var(--sk-check, var(--wp--preset--color--success));
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* secondary + ghost button styles */
.wp-block-button.is-style-secondary .wp-block-button__link {
background: #fff;
color: var(--sk-ink);
border: 2px solid var(--sk-steel-200);
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover {
background: var(--sk-steel-50);
border-color: var(--sk-steel-300);
}
.wp-block-button.is-style-ghost-light .wp-block-button__link {
background: transparent;
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.4);
}
.wp-block-button.is-style-ghost-light .wp-block-button__link:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.7);
}
/* ============================================================
HEADER
============================================================ */
.sk-header { position: relative; z-index: 60; }
/* ---- utility row (dark, above the red topbar) = separate "utility-menu" ---- */
.sk-utilitybar-inner {
max-width: var(--sk-maxw); margin: 0 auto; padding: 8px 24px;
display: flex; justify-content: flex-end; align-items: center; width: 100%;
}
.sk-utility-nav {
display: flex; align-items: center; gap: 22px;
list-style: none; margin: 0; padding: 0; font-size: 13px;
}
.sk-utility-nav li { position: relative; margin: 0; }
.sk-utility-nav li + li::before {
content: ""; position: absolute; left: -11px; top: 50%; transform: translateY(-50%);
width: 1px; height: 13px; background: var(--sk-steel-700);
}
.sk-utility-nav a { color: var(--sk-steel-300, #adb1b7); text-decoration: none; transition: color .12s; }
.sk-utility-nav a:hover { color: #fff; }
/* the same menu also renders inside the mobile drawer — hidden on desktop */
.sk-utility-mobile { display: none; }
/* ---- topbar (red) ---- */
.sk-topbar-inner {
display: flex;
align-items: center;
gap: 28px;
max-width: var(--sk-maxw);
margin: 0 auto;
padding: 14px 24px;
width: 100%;
}
/* Logo = block style "Logotyp" (display wordmark, always on dark → white) */
.is-style-logo {
font-family: var(--sk-display);
font-weight: 800;
font-size: 30px;
line-height: 1;
text-transform: lowercase;
letter-spacing: -0.01em;
margin: 0;
white-space: nowrap;
color: #fff;
}
.is-style-logo a { color: inherit; text-decoration: none; }
/* search */
.sk-search { flex: 1; max-width: 760px; }
.sk-search .wp-block-search__inside-wrapper { position: relative; border: none; }
.sk-search .wp-block-search__input {
width: 100%;
border: none !important;
border-radius: var(--sk-radius);
padding: 15px 60px 15px 18px;
font-family: var(--sk-body);
font-size: 15px;
color: var(--sk-ink);
}
.sk-search .wp-block-search__button {
position: absolute;
right: 5px; top: 5px; bottom: 5px;
margin: 0;
width: 52px;
background: var(--sk-ink);
border: none;
border-radius: var(--sk-radius);
color: #fff;
display: flex; align-items: center; justify-content: center;
}
.sk-search .wp-block-search__button:hover { background: var(--sk-steel-700); }
.sk-top-actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.sk-phone { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.sk-phone .wp-block-outermost-icon-block { color: #fff; }
.sk-phone-num { margin: 0; font-family: var(--sk-mono); font-weight: 600; font-size: 16px; letter-spacing: 0.02em; }
.sk-phone-num a { color: #fff; text-decoration: none; }
/* account icon colour = the Icon Block's own iconColor attribute (white) — no class needed */
/* mini-cart in header — white icon on the red topbar like the phone/account icons.
NOTE: in this WC version `.wc-block-mini-cart__quantity-badge` WRAPS the icon (not just the
count bubble), so giving it a background paints a square behind the icon — don't. */
.sk-top-actions .wc-block-mini-cart__button { color: #fff; padding: 4px; background: transparent; border: none; }
/* the actual item-count bubble (when > 0): white pill, BLACK number.
WC sets the badge colours INLINE on the block (defaults to a green number), so we need
!important to win over the inline style. */
.sk-top-actions .wc-block-mini-cart__badge { background: #fff !important; color: var(--sk-ink) !important; }
/* ---- nav bar (dark, sticky) — classic WP menu rendered as a mega menu ---- */
.sk-navbar { position: sticky; top: 0; z-index: 50; }
.sk-navbar-inner {
display: flex; align-items: stretch; justify-content: space-between;
max-width: var(--sk-maxw); margin: 0 auto; padding: 0 24px; width: 100%;
}
.sk-navwrap { display: flex; align-items: stretch; flex: 1; }
.sk-hamburger { display: none; }
/* top-level menu */
ul.sk-nav { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; font-family: var(--sk-display); }
.sk-nav-item { position: static; list-style: none; margin: 0; }
.sk-nav-item > a {
display: flex; align-items: center; height: 54px; padding: 0 18px; color: #fff;
text-transform: uppercase; font-weight: 700; font-size: 15px; letter-spacing: 0.04em;
border-bottom: 3px solid transparent; transition: 0.15s; text-decoration: none;
}
.sk-nav-item:hover > a, .sk-nav-item:focus-within > a { border-bottom-color: var(--sk-arc-500); }
/* mega dropdown (CSS hover/focus, no JS on desktop) */
.sk-mega {
position: absolute; left: 0; right: 0; top: 100%;
background: #fff; border-top: 3px solid var(--sk-arc-500);
box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.4); display: none; z-index: 60;
}
/* hover/focus reveal is a DESKTOP-only interaction — never on the mobile drawer
(≤1180px), where a tap would otherwise trigger :hover and defeat the accordion) */
@media (min-width: 1181px) {
.sk-nav-item.has-mega:hover .sk-mega,
.sk-nav-item.has-mega:focus-within .sk-mega { display: block; }
}
.sk-mega-inner {
max-width: var(--sk-maxw); margin: 0 auto; padding: 34px 24px;
display: grid; grid-template-columns: 1fr; gap: 34px; align-items: start;
}
/* with a promo: links zone (flexible) + fixed promo zone — always fits the image */
.sk-mega-inner.has-promo { grid-template-columns: minmax(0, 1fr) 320px; }
/* link columns auto-fit: 2, 3, 4+ columns all work without colliding with the promo */
.sk-mega-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px 34px; }
.sk-mega-col h4 {
font-family: var(--sk-display); text-transform: uppercase; font-size: 14px; letter-spacing: 0.07em;
color: var(--sk-steel-400); padding-bottom: 12px; margin: 0 0 14px; border-bottom: 1px solid var(--sk-steel-100);
}
.sk-mega-col ul { list-style: none; margin: 0; padding: 0; }
.sk-mega-col li { margin-bottom: 11px; }
.sk-mega-col a { font-size: 15px; color: var(--sk-steel-700); text-decoration: none; }
.sk-mega-col a:hover { color: var(--sk-arc-500); }
.sk-mega-col a.sk-all { color: var(--sk-arc-500); font-weight: 600; }
.sk-mega-promo {
background: radial-gradient(120% 120% at 80% 0%, var(--sk-arc-800), var(--sk-ink) 60%);
border-radius: var(--sk-radius-lg); padding: 26px; color: #fff; align-self: start;
}
.sk-mega-promo .sk-eyebrow,
.sk-mega-promo .is-style-eyebrow { color: var(--sk-arc-200); margin: 0 0 10px; }
.sk-mega-promo .wp-block-buttons { margin: 0; }
.sk-mega-promo h3 { font-size: 28px; color: #fff; margin: 0 0 10px; }
.sk-mega-promo p { font-size: 14px; color: var(--sk-steel-300, #adb1b7); margin: 0 0 18px; text-transform: none; font-family: var(--sk-body); }
.sk-mega-promo .wp-block-button__link { background: var(--sk-arc-500); color: #fff; border-radius: var(--sk-radius); padding: 10px 18px; display: inline-block; }
/* Samma puff i kategorisidans filterkolumn: där står den under filtren
och behöver luft ovanför, till skillnad från i megamenyn. */
.sk-cat-promo { margin-top: 24px; margin-bottom: 32px; }
/* Puffar med sticky följer med vid scroll (2026-10-27) — annars är puffen borta
efter första raden produkter, på just de sidor där den ska fånga upp den
som letar. Under 783 px staplas kolumnerna och spalten blir bara så hög
som sitt innehåll, så där finns inget att fastna mot. 70 px = den fasta
navbaren (54) plus luft. */
@media (min-width: 783px) {
.sk-cat-promo.is-sticky:not(.is-alone) { position: sticky; top: 70px; }
}
/* En tom kategori har inga filter att stå under och inget rutnät bredvid.
Puffen får då hela bredden i stället för att ligga kvar i en 280 px
spalt med tomrum till höger — Svetskompaniet 2026-10-23, Industrigas
hade ännu inga produkter. */
.sk-cat-promo.is-alone {
margin: 0 auto 48px; max-width: 560px; padding: 32px;
}
.sk-cat-promo.is-alone h3 { font-size: 32px; }
.sk-cat-promo.is-alone p { font-size: 15px; }
/* CTA button styles (registered): display uppercase; filled (gas) vs outline (service) incl hover */
.wp-block-button.is-style-cta-gas .wp-block-button__link,
.wp-block-button.is-style-cta-service .wp-block-button__link {
font-family: var(--sk-display); text-transform: uppercase; font-weight: 700; font-size: 14px;
letter-spacing: 0.04em; padding: 8px 18px; border-radius: var(--sk-radius);
}
.wp-block-button.is-style-cta-gas .wp-block-button__link { background: var(--sk-arc-500); color: #fff; border: 2px solid var(--sk-arc-500); }
.wp-block-button.is-style-cta-gas .wp-block-button__link:hover { background: var(--sk-arc-600); border-color: var(--sk-arc-600); }
.wp-block-button.is-style-cta-service .wp-block-button__link { background: transparent; color: #fff; border: 2px solid var(--sk-arc-500); }
.wp-block-button.is-style-cta-service .wp-block-button__link:hover { background: var(--sk-arc-500); }
.sk-nav-cta { align-items: center; gap: 10px; flex-shrink: 0; }
/* ============================================================
MOBILE — hamburger toggles the menu (Alpine .is-open); mega stacks vertically
============================================================ */
@media (max-width: 1080px) { .sk-mega-inner.has-promo { grid-template-columns: minmax(0, 1fr) 280px; } }
/* accordion caret only matters in the mobile drawer (desktop uses hover) */
.sk-nav-caret { display: none; }
/* Sökfältet får en egen rad under logotypen i stället för att döljas —
kunderna söker på artikelnummer och hittade inte sökningen på mobilen
(Svetskompaniet 2026-10-30). 16px hindrar iOS från att zooma vid fokus. */
@media (max-width: 900px) {
.sk-phone-num { display: none; }
.sk-topbar .sk-topbar-inner { gap: 10px 12px; padding: 12px 16px; flex-wrap: wrap; }
.sk-search { order: 3; flex: 1 1 100%; max-width: none; }
.sk-search .wp-block-search__input { padding: 11px 56px 11px 14px; font-size: 16px; }
.is-style-logo { font-size: 22px; }
}
/* Menyn fälls ihop redan under 1180px: med sju rubriker och tre knappar
(Utbildningar kom till 2026-10-30) gick raden utanför skärmen från ~1150px
och "Kap och slip" bröts på tre rader. Knapparna står kvar bredvid
hamburgaren; topplänkarna flyttar in i lådan. */
@media (max-width: 1180px) {
.sk-utilitybar { display: none; }
.sk-navbar-inner { padding: 0 16px; min-height: 54px; align-items: center; gap: 12px; }
.sk-hamburger {
display: flex; align-items: center; justify-content: center; width: 42px; height: 42px;
border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: var(--sk-radius);
background: transparent; color: #fff; cursor: pointer;
}
/* ---- WHITE drawer with collapsed accordion rows ---- */
.sk-navbar-menu {
display: none; position: absolute; left: 0; right: 0; top: 100%;
background: #fff; z-index: 60; max-height: 80vh; overflow-y: auto;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}
.sk-navbar-menu.is-open { display: block; }
ul.sk-nav { flex-direction: column; }
.sk-nav-item { border-bottom: 1px solid var(--sk-steel-100); }
.sk-nav-item > a {
height: auto; padding: 16px 18px; color: var(--sk-ink); border-bottom: none;
display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 17px;
}
.sk-nav-caret { display: block; color: var(--sk-steel-400); transition: transform 0.2s; flex-shrink: 0; }
.sk-nav-item.sub-open > a .sk-nav-caret { transform: rotate(180deg); }
/* collapsed by default; only the toggled row expands */
.sk-mega { position: static; display: none; box-shadow: none; border-top: none; background: transparent; }
.sk-nav-item.sub-open .sk-mega { display: block; }
.sk-mega-inner, .sk-mega-inner.has-promo { grid-template-columns: 1fr; padding: 0 18px 14px; gap: 14px; }
.sk-mega-cols { grid-template-columns: 1fr; gap: 14px; }
.sk-mega-col h4 { color: var(--sk-steel-400); border-color: var(--sk-steel-100); }
.sk-mega-col a { color: var(--sk-steel-700); }
/* Bara puffen i menyn. Blänkarna på kategorier och sidor delar klassen
för utseendets skull och försvann annars också på mobil. */
.sk-mega .sk-mega-promo { display: none; }
/* utility links move into the drawer (white bg → dark text), below the main nav */
.sk-navbar-menu .sk-utility-mobile {
display: block; list-style: none; margin: 0; padding: 6px 0 14px;
border-top: 1px solid var(--sk-steel-200);
}
.sk-utility-mobile li { margin: 0; border-bottom: 1px solid var(--sk-steel-100); }
.sk-utility-mobile li:last-child { border-bottom: none; }
.sk-utility-mobile a {
display: block; padding: 14px 18px; color: var(--sk-ink); text-decoration: none;
font-family: var(--sk-display); text-transform: uppercase; font-size: 14px; letter-spacing: 0.04em;
}
.sk-utility-mobile a:hover { color: var(--sk-arc-500); }
}
/* Tre knappar bredvid hamburgaren får inte plats på 360px utan att krympas. */
@media (max-width: 420px) {
.sk-navbar-inner { padding: 0 12px; gap: 8px; }
.sk-nav-cta { gap: 6px; }
.sk-nav-cta .wp-block-button__link { padding: 6px 9px; font-size: 12px; letter-spacing: 0.02em; }
}
/* ============================================================
SHARED SECTION HELPERS
============================================================ */
/* section heads are now a constrained group (contentSize 680) with centre-aligned blocks — no class */
/* ============================================================
HERO
============================================================ */
/* Dark "Arc" surface — ink base + red radial glow + faint diagonal texture. This is the single
registered block style `is-style-arc-glow` (core/group); every hero AND the dark promo cards
use it as a style. The layered background + ::before can't be a block attribute, so it lives
here. */
.wp-block-group.is-style-arc-glow { position: relative; overflow: hidden; background-color: var(--sk-ink); color: #fff; }
.wp-block-group.is-style-arc-glow::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(80% 120% at 75% 10%, rgba(174, 1, 1, 0.55), transparent 55%),
repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 22px);
}
.wp-block-group.is-style-arc-glow > * { position: relative; z-index: 1; }
/* hero card styling (bg/border/radius) is block attributes now — see hero.php */
.sk-zip { display: flex; gap: 10px; }
.sk-zip input {
flex: 1; border: none; border-radius: var(--sk-radius);
padding: 13px 15px; font-family: var(--sk-body); font-size: 15px;
}
/* hero trust row: horizontal, red checkmarks */
.sk-hero-trust {
display: flex; gap: 24px; flex-wrap: wrap; margin: 34px 0 0;
--sk-check: var(--wp--preset--color--primary-300);
}
.sk-hero-trust li { margin: 0; padding-inline-start: 1.7rem; font-size: 14px; }
/* ============================================================
CATEGORY GRID — layout is the native Grid block (no CSS grid here)
============================================================ */
/* Card box (bg/border/radius/padding) = block attributes. The "Kort (hover)" block style
(is-style-card) adds only the no-control bits: hover lift + the bottom accent bar (::after). */
.wp-block-group.is-style-card { position: relative; display: block; transition: 0.18s; overflow: hidden; }
.wp-block-group.is-style-card::after {
content: ""; position: absolute; left: 0; bottom: 0;
height: 4px; width: 0; background: var(--sk-arc-500); transition: 0.25s;
}
/* In a query loop the card sits inside the , so the grid stretches the
but not the card — cards in one row ended at different heights
(Tips och guider). */
.wp-block-post-template > li > .wp-block-group.is-style-card { height: 100%; }
.wp-block-group.is-style-card:hover { box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.35); transform: translateY(-3px); }
.wp-block-group.is-style-card:hover::after { width: 100%; }
.wp-block-group.is-style-card h3 { font-size: 21px; margin: 0 0 6px; color: var(--sk-ink); }
.wp-block-group.is-style-card h3 a { color: inherit; text-decoration: none; }
/* whole card clickable: the heading link stretches over the card (card is position:relative,
one link per card → safe). Keeps the link text as the accessible label. */
.wp-block-group.is-style-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Icon chip = block style "Ikon-chip": ONLY the geometry (groups have no width control).
Background, radius and icon colour are block attributes on the group (see category-grid.php). */
.wp-block-group.is-style-icon-chip {
width: 46px; height: 46px; flex-shrink: 0; margin-bottom: 18px;
display: flex; align-items: center; justify-content: center;
}
/* ============================================================
GASOL ORDER CARD
============================================================ */
/* order-card styling (bg/border/radius/padding/shadow) is block attributes now — see gasol.php.
These rules style the form controls inside its core/html block (no core block for inputs). */
.sk-field { margin-bottom: 16px; }
.sk-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--sk-steel-700); }
.sk-field select, .sk-field input {
width: 100%; border: 1px solid var(--sk-steel-200); border-radius: var(--sk-radius);
padding: 12px 14px; font-family: var(--sk-body); font-size: 15px; background: #fff;
}
.sk-field select:focus, .sk-field input:focus {
outline: none; border-color: var(--sk-arc-500); box-shadow: 0 0 0 3px var(--sk-arc-50);
}
.sk-areas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sk-area-pill {
font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 20px;
background: var(--sk-steel-50); color: var(--sk-steel-600); border: 1px solid var(--sk-steel-100);
}
/* ============================================================
GASOL-ORT (local landing page: gasol-ort-* patterns)
============================================================ */
/* breadcrumb (block-native paragraph with links) */
.sk-breadcrumb a { color: inherit; text-decoration: none; }
.sk-breadcrumb a:hover { color: var(--sk-arc-500); }
/* order-form radio group (non-block controls in the hero order card) */
.g-radio { display: flex; gap: 10px; }
.g-radio label {
flex: 1; display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 14px;
border: 1px solid var(--sk-steel-200); border-radius: var(--sk-radius); padding: 9px 12px;
}
.g-radio input { accent-color: var(--sk-arc-500); }
/* FAQ accordion (native core/details) */
.sk-faq details { border-bottom: 1px solid var(--sk-steel-100); padding: 18px 0; }
.sk-faq summary {
font-family: var(--sk-display); font-weight: 700; font-size: 17px; cursor: pointer;
list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.sk-faq summary::-webkit-details-marker { display: none; }
.sk-faq summary::after {
content: "+"; font-family: var(--sk-body); font-weight: 400; font-size: 24px;
color: var(--sk-steel-400); line-height: 1; flex-shrink: 0;
}
.sk-faq details[open] summary { color: var(--sk-arc-500); }
.sk-faq details[open] summary::after { content: "−"; color: var(--sk-arc-500); }
.sk-faq details > p { margin: 12px 0 0; }
/* ============================================================
PRODUCT CARD — unified across homepage, catalog & related.
Styles WooCommerce Product Collection output; the fine-grained
card visuals (card chrome, image box, badge pill, foot layout)
aren't expressible as block attributes on the WC loop blocks.
============================================================ */
.wc-block-product-template {
display: grid; gap: 20px; margin: 0; padding: 0; list-style: none;
grid-template-columns: repeat(3, 1fr);
}
.wc-block-product-template.columns-2 { grid-template-columns: repeat(2, 1fr); }
.wc-block-product-template.columns-4 { grid-template-columns: repeat(4, 1fr); }
li.wc-block-product {
border: 1px solid var(--sk-steel-100);
border-radius: var(--sk-radius-lg);
overflow: hidden; background: #fff;
display: flex; flex-direction: column; padding: 0;
margin: 0 !important; width: auto !important; max-width: none !important;
transition: 0.18s;
}
li.wc-block-product:hover {
box-shadow: 0 16px 34px -20px rgba(0, 0, 0, 0.4);
border-color: var(--sk-steel-200); transform: translateY(-3px);
}
/* image = flush 4/3 light-grey box (card clips the corners) */
li.wc-block-product .wc-block-components-product-image {
margin: 0; aspect-ratio: 4 / 3; background: var(--sk-bg-alt); display: block; position: relative;
}
li.wc-block-product .wc-block-components-product-image a { display: block; height: 100%; }
li.wc-block-product .wc-block-components-product-image img {
width: 100%; height: 100%; object-fit: cover; border-radius: 0;
}
/* body padding on the non-image blocks */
li.wc-block-product > .wp-block-post-terms,
li.wc-block-product > .wp-block-post-title,
li.wc-block-product > .wp-block-woocommerce-product-price,
li.wc-block-product > .wp-block-woocommerce-product-button { padding-inline: 18px; }
li.wc-block-product > .wp-block-post-terms { padding-top: 16px; }
/* category / brand line */
li.wc-block-product .wp-block-post-terms {
font-size: 13px; color: var(--sk-steel-400); text-transform: none; margin: 0 0 2px;
}
li.wc-block-product .wp-block-post-terms a { color: inherit; text-decoration: none; }
/* title */
li.wc-block-product .wp-block-post-title,
li.wc-block-product .wp-block-post-title a {
text-align: left; font-family: var(--sk-body); font-size: 16px; font-weight: 600;
text-transform: none; line-height: 1.35; color: var(--sk-ink); text-decoration: none; margin: 0 0 4px;
}
li.wc-block-product .wp-block-post-title a:hover { color: var(--sk-arc-500); }
/* price */
li.wc-block-product .wp-block-woocommerce-product-price,
li.wc-block-product .wc-block-components-product-price {
text-align: left; font-family: var(--sk-display); font-weight: 800;
font-size: 26px; line-height: 1; color: var(--sk-ink);
}
li.wc-block-product .wc-block-components-product-price del {
font-family: var(--sk-body); font-weight: 400; font-size: 14px; color: var(--sk-steel-400); margin-right: 6px;
}
li.wc-block-product .wc-block-components-product-price ins { text-decoration: none; }
/* add-to-cart button: full-width red text button (no CSS-drawn icon) */
li.wc-block-product .wp-block-woocommerce-product-button { text-align: left; margin-top: auto; padding-top: 14px; padding-bottom: 20px; }
li.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link,
li.wc-block-product .wc-block-components-product-button .wc-block-components-product-button__button {
background: var(--sk-arc-500); color: #fff; border: none; border-radius: var(--sk-radius);
width: 100%; justify-content: center; font-family: var(--sk-body); font-weight: 600;
}
li.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link:hover,
li.wc-block-product .wc-block-components-product-button .wc-block-components-product-button__button:hover { background: var(--sk-arc-600); }
/* sale badge → red pill, top-left */
li.wc-block-product .wc-block-components-product-sale-badge {
background: var(--sk-arc-500); color: #fff; border: none; border-radius: 14px;
font-family: var(--sk-body); font-size: 11px; font-weight: 700; padding: 4px 10px; min-height: 0; margin: 12px;
}
/* --- Godsmottagarväljaren i blockkassan --------------------------------
Renderas via ExperimentalOrderMeta, alltså i ordersammanfattningen till
höger. Woos eget fält-API hade placerat den i adressektionen men sparar
aldrig värdet — se BLOCK-KASSA.md. */
.bcwc-workplace-field { margin: 16px 0 0; }
.bcwc-workplace-label {
display: block; font-weight: 600; font-size: 14px;
color: var(--sk-ink); margin-bottom: 6px;
}
.bcwc-workplace-field select {
width: 100%; box-sizing: border-box; padding: 12px 14px;
border: 1px solid var(--sk-steel-200); border-radius: var(--sk-radius);
font-family: var(--sk-body); font-size: 15px; background: #fff; color: var(--sk-ink);
}
.bcwc-workplace-field select:focus {
outline: none; border-color: var(--sk-arc-500); box-shadow: 0 0 0 3px var(--sk-arc-50);
}
/* Momsnoteringen efter priset — ska läsas som en fotnot, inte som del av
beloppet. */
.bcwc-vat-note {
font-family: var(--sk-body); font-size: 13px; font-weight: 400;
color: var(--sk-steel-400); white-space: nowrap;
}
/* --- Gästläge: "Bli företagskund" ---------------------------------------
Markupen bär Woos `button alt`, men blocktemat stylar inte de klasserna —
knappen renderades som vanlig brödtext där priset skulle stått. */
.bcwc-become-customer-wrap { margin: 0 0 var(--wp--preset--spacing--6); }
a.bcwc-become-customer {
display: inline-block; padding: 13px 26px;
background: var(--sk-arc-500); color: #fff;
border: none; border-radius: var(--sk-radius);
font-family: var(--sk-display); font-weight: 700; letter-spacing: 0.02em;
font-size: 15px; text-decoration: none; cursor: pointer;
}
a.bcwc-become-customer:hover { background: var(--sk-arc-600); color: #fff; }
/* I sökkorten ärver knappen kortets layout: full bredd, mindre text. */
.search li.wc-block-product a.bcwc-become-customer {
display: block; margin: 0 18px 14px; padding: 10px 14px;
font-size: 14px; text-align: center;
}
/* Priset är dolt för gäster — håll det diskret, det är ingen rubrik. */
.bcwc-price-hidden { color: var(--sk-steel-400); font-size: 14px; font-family: var(--sk-body); font-weight: 400; }
/* --- Sökresultatets kort ------------------------------------------------
Lägre än katalogens: en träfflista läses snabbt och ska visa fler kort
utan att scrolla. Bilden går från 4/3 till 3/2, och luften krymper på de
ställen som bara bar höjd — inte på de som bär läsbarhet. */
.search .wc-block-product-template { grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* Fast bildhöjd i stället för aspect-ratio på föräldern.
Blocket renderar ![]()
med inline `style="object-fit:cover"` och klassen
`--aspect-ratio-auto`, och båda slår en aspect-ratio satt en nivå upp — så
varje bild behöll sina egna proportioner och korten linjerade aldrig.
En explicit höjd på själva bilden går inte att överrösta inline. */
.search .wc-block-product-template li.wc-block-product .wc-block-components-product-image,
.search li.wc-block-product .wc-block-components-product-image.wc-block-components-product-image--aspect-ratio-auto {
aspect-ratio: auto; height: 200px; background: #fff; overflow: hidden;
}
.search li.wc-block-product .wc-block-components-product-image a { display: block; height: 200px; }
/* Hela bilden, inte beskuren: stående produktbilder (Geka-fat,
varningsskyltar) visade bara sin översta tredjedel. Svetskompaniet
2026-10-27. */
.search li.wc-block-product .wc-block-components-product-image img {
width: 100%; height: 200px; object-fit: contain; padding: 8px; box-sizing: border-box; display: block;
}
.search li.wc-block-product > .wp-block-post-terms { padding-top: 12px; }
.search li.wc-block-product .wp-block-post-title,
.search li.wc-block-product .wp-block-post-title a { font-size: 15px; }
/* Priset trycks nedåt så det ligger på samma rad i alla kort oavsett om
titeln tog en eller två rader. */
.search li.wc-block-product .wp-block-woocommerce-product-price { font-size: 19px; margin-top: auto; }
/* Titeln klipps till två rader. Utan det sätter den längsta titeln i raden
höjden för alla kort bredvid, vilket är varför korten såg olika höga ut. */
.search li.wc-block-product .wp-block-post-title {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; min-height: 2.7em;
}
.search li.wc-block-product .wp-block-read-more {
margin: 0 18px 14px; padding-top: 10px; display: block;
font-family: var(--sk-body); font-size: 14px; font-weight: 600;
color: var(--sk-arc-500); text-decoration: none;
}
.search li.wc-block-product .wp-block-read-more:hover { color: var(--sk-arc-600); text-decoration: underline; }
/* Egna brytpunkter: .search-regeln ovan är mer specifik än de generella och
skulle annars hålla kvar fyra kolumner hela vägen ner i mobil. */
@media (max-width: 1080px) { .search .wc-block-product-template { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .search .wc-block-product-template { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .search .wc-block-product-template { grid-template-columns: 1fr 1fr; gap: 12px; } }
/* Hela kortet klickbart — länken är kvar som synlig affordans och för
tangentbord, men ingen ska behöva träffa just den raden. */
.search li.wc-block-product { position: relative; }
.search li.wc-block-product .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
@media (max-width: 1080px) {
.wc-block-product-template, .wc-block-product-template.columns-3, .wc-block-product-template.columns-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.wc-block-product-template, .wc-block-product-template.columns-2, .wc-block-product-template.columns-3, .wc-block-product-template.columns-4 { grid-template-columns: 1fr 1fr; gap: 12px; }
}
/* ============================================================
CATALOG ARCHIVE (taxonomy-product_cat) — filter sidebar,
toolbar, pagination. These WC blocks only render on archives.
============================================================ */
.wc-block-breadcrumbs { font-size: 13px; color: var(--sk-steel-500); }
.wc-block-breadcrumbs a { color: var(--sk-steel-500); text-decoration: none; }
.wc-block-breadcrumbs a:hover { color: var(--sk-arc-500); }
/* keep filters inline in the sidebar on desktop — WC's own "hide overlay chrome"
rule uses :where() (0 specificity) and loses on source order, so the
"Filter products" button + overlay Close/Apply leak onto desktop. Hide them. */
@media (min-width: 783px) {
.wc-block-product-filters__open-overlay,
.wc-block-product-filters__overlay-header,
.wc-block-product-filters__overlay-footer { display: none !important; }
}
/* filter sidebar groups */
.wp-block-woocommerce-product-filter-price,
.wp-block-woocommerce-product-filter-attribute,
.wp-block-woocommerce-product-filter-status {
border-bottom: 1px solid var(--sk-steel-100); padding: 18px 0;
}
.wp-block-woocommerce-product-filters > *:first-child { padding-top: 0; }
.wp-block-woocommerce-product-filters h3.wp-block-heading {
font-family: var(--sk-display); text-transform: uppercase; font-size: 14px;
letter-spacing: 0.06em; margin: 0 0 14px; color: var(--sk-ink);
}
/* checkbox rows */
.wc-block-product-filter-checkbox-list__item { margin-bottom: 11px; }
.wc-block-product-filter-checkbox-list__label { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--sk-steel-700); cursor: pointer; }
.wc-block-product-filter-checkbox-list__input-wrapper { display: inline-flex; }
.wc-block-product-filter-checkbox-list__input { width: 18px; height: 18px; border: 1.5px solid var(--sk-steel-300); border-radius: 4px; accent-color: var(--sk-arc-500); }
.wc-block-product-filter-checkbox-list__count { margin-left: auto; font-family: var(--sk-mono); font-size: 12px; color: var(--sk-steel-400); }
/* price slider track */
.wc-block-product-filter-price-slider .range-bar { background: var(--sk-arc-500); }
/* keep the filter sidebar inside its 280px column — the price slider's range inputs + min/max
number boxes carry an intrinsic min-width that otherwise overflows / grows the flex column */
.sk-filter-col { min-width: 0; }
.sk-filter-col .wp-block-woocommerce-product-filters,
.sk-filter-col .wc-block-product-filter-price-slider,
.sk-filter-col .wc-block-product-filter-price-slider__content,
.sk-filter-col .wc-block-product-filter-price-slider__range { min-width: 0; max-width: 100%; width: 100%; }
.sk-filter-col .wc-block-product-filter-price-slider__range input[type="range"] { width: 100%; min-width: 0; }
.sk-filter-col .wc-block-product-filter-price-slider .text { min-width: 0; flex: 1; }
.sk-filter-col .wc-block-product-filter-price-slider .text input { width: 100%; min-width: 0; box-sizing: border-box; }
/* clear filters link */
.wc-block-product-filter-clear-button { color: var(--sk-arc-500); font-weight: 600; font-size: 13px; }
/* active filter chips */
.wc-block-product-filter-removable-chips__item {
background: var(--sk-steel-50); border: 1px solid var(--sk-steel-200); border-radius: 20px;
padding: 6px 12px; font-size: 13px; color: var(--sk-steel-700);
}
/* toolbar: results count + sorting */
.wp-block-woocommerce-product-results-count { font-size: 14px; color: var(--sk-steel-500); margin: 0; }
.wp-block-woocommerce-catalog-sorting select {
border: 1px solid var(--sk-steel-200); border-radius: var(--sk-radius);
padding: 10px 14px; font-family: var(--sk-body); font-size: 14px; background: #fff; cursor: pointer;
}
/* pagination → rounded squares, active = ink */
.wp-block-query-pagination { gap: 8px; margin-top: 44px; }
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
min-width: 42px; height: 42px; border: 1px solid var(--sk-steel-200); border-radius: var(--sk-radius);
display: inline-flex; align-items: center; justify-content: center;
font-weight: 600; color: var(--sk-steel-700); padding: 0 12px; text-decoration: none;
}
.wp-block-query-pagination .page-numbers:hover { border-color: var(--sk-steel-400); }
.wp-block-query-pagination .page-numbers.current { background: var(--sk-ink); color: #fff; border-color: var(--sk-ink); }
/* ============================================================
SINGLE PRODUCT — gallery, buy box, USPs, tabs, spec table
(.sk-gallery / .sk-summary are template region hooks, like .sk-header)
============================================================ */
.sk-gallery .wc-block-components-product-image img,
.sk-gallery .woocommerce-product-gallery__image img,
.sk-gallery img { border-radius: var(--sk-radius-lg); }
/* sale flash on the gallery → red pill, top-left (WC's default .onsale is an unstyled olive badge) */
.single-product .wp-block-woocommerce-product-image-gallery { position: relative; }
.single-product span.onsale {
position: absolute; top: 16px; left: 16px; right: auto; z-index: 2; margin: 0;
background: var(--sk-arc-500); color: #fff; border: none; border-radius: 14px;
font-family: var(--sk-body); font-size: 11px; font-weight: 700; line-height: 1.4;
padding: 4px 12px; min-width: 0; min-height: 0;
}
/* SKU + brand meta row — hide WC's "SKU:" label, show the art number red mono */
.sk-summary .wp-block-woocommerce-product-sku { font-family: var(--sk-mono); font-size: 13px; color: var(--sk-arc-500); }
.sk-summary .wp-block-woocommerce-product-sku .wp-block-post-terms__prefix { display: none; }
.sk-summary .wp-block-post-terms { font-size: 13px; color: var(--sk-steel-400); }
.sk-summary .wp-block-post-terms a { color: inherit; text-decoration: none; }
/* big price with top/bottom rule (mockup price-box) — the BOX (border+padding) goes on the
outer product-price block ONLY; the inner .wc-block-components-product-price is just the
number (no border/padding) or the rules double up into 4 lines. */
.sk-summary .wp-block-woocommerce-product-price {
margin: 0; padding: 22px 0;
border-top: 1px solid var(--sk-steel-100); border-bottom: 1px solid var(--sk-steel-100);
}
.sk-summary .wc-block-components-product-price {
font-family: var(--sk-display); font-weight: 800; font-size: 38px; line-height: 1; color: var(--sk-ink);
}
.sk-summary .wc-block-components-product-price del { font-family: var(--sk-body); font-weight: 400; font-size: 22px; color: var(--sk-steel-400); margin-right: 10px; }
.sk-summary .wc-block-components-product-price ins { text-decoration: none; }
/* USP block top rule — a divider line (kept as CSS: a top border via the block attribute makes
the group "invalid content" because this theme doesn't enable border color/width support). */
.sk-summary .sk-usp { border-top: 1px solid var(--sk-steel-200); }
/* in-stock + USP rows: red icons, dark text (override the dim footer icon-row) */
.sk-summary .is-style-icon-row p { color: var(--sk-steel-700); font-size: 14px; }
.sk-summary .is-style-icon-row .wp-block-outermost-icon-block { color: var(--sk-arc-500); }
.sk-summary .is-style-icon-row .icon-container.has-success-color { color: var(--sk-success); }
/* Tillfälligt slut ska synas: kunden kan beställa men får vänta (2026-10-29). */
.wc-block-components-product-stock-indicator--available-on-backorder,
.stock.available-on-backorder { font-weight: 700; color: oklch(0.5 0.12 65); }
/* add-to-cart form: qty stepper + red button */
.sk-summary form.cart { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.sk-summary form.cart .quantity { display: flex; border: 1px solid var(--sk-steel-200); border-radius: var(--sk-radius); overflow: hidden; }
.sk-summary form.cart .quantity input.qty { width: 60px; border: none; text-align: center; font-family: var(--sk-body); font-size: 16px; font-weight: 600; }
.sk-summary form.cart .single_add_to_cart_button,
.sk-summary .wc-block-components-product-button__button {
flex: 1; background: var(--sk-arc-500); color: #fff; border: none; border-radius: var(--sk-radius);
font-family: var(--sk-display); text-transform: uppercase; font-weight: 700; letter-spacing: 0.02em; padding: 14px 28px; cursor: pointer;
}
.sk-summary form.cart .single_add_to_cart_button:hover { background: var(--sk-arc-600); }
/* related products: WC's related template carries .is-flex-container (2 classes) which beats the
global single-class .wc-block-product-template grid → one product stretches full-width. Re-assert
the card grid at matching specificity (loaded last) so related renders as a row of cards. */
.single-product .wc-block-product-template {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
@media (max-width: 1080px) { .single-product .wc-block-product-template { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .single-product .wc-block-product-template { grid-template-columns: 1fr 1fr; gap: 12px; } }
/* tabs */
.single-product .wc-tabs, .single-product .wp-block-woocommerce-product-details .wc-tabs {
display: flex; gap: 0; border-bottom: 2px solid var(--sk-steel-100); margin: 0 0 30px; padding: 0; list-style: none;
}
.single-product .wc-tabs li { margin: 0; }
.single-product .wc-tabs li a {
display: block; font-family: var(--sk-display); text-transform: uppercase; font-weight: 700;
font-size: 16px; letter-spacing: 0.03em; padding: 14px 22px; color: var(--sk-steel-400);
border-bottom: 3px solid transparent; margin-bottom: -2px; text-decoration: none;
}
.single-product .wc-tabs li.active a { color: var(--sk-ink); border-bottom-color: var(--sk-arc-500); }
/* spec table (Additional information) */
.single-product .woocommerce-product-attributes,
.single-product .shop_attributes { width: 100%; border-collapse: collapse; font-family: var(--sk-mono); font-size: 14px; }
.single-product .woocommerce-product-attributes th { text-align: left; background: var(--sk-bg-alt); padding: 11px 16px; font-weight: 600; color: var(--sk-steel-600); border-bottom: 1px solid var(--sk-steel-100); width: 40%; }
.single-product .woocommerce-product-attributes td { padding: 11px 16px; border-bottom: 1px solid var(--sk-steel-100); }
/* SERVICE / GAS SPLIT — fully block-attribute driven (background/gradient, padding,
radius, min-height, vertical layout). No custom CSS needed. */
/* ============================================================
STORES (dark)
============================================================ */
/* store card styling (bg/border/radius/padding) is block attributes now — see stores.php.
Icon+text rows use the shared .sk-row helper below (flex line; icon inherits arc-300). */
/* "Ikon-rad" block style: flex line with a tinted icon (no flex-row control for a group line) */
.is-style-icon-row { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 9px; }
/* In a flex group, blockGap (the group's gap) is the spacer — drop the row/chip's own
bottom margin so spacing isn't doubled (and so it shows identically in the editor, which
resets flex-item margins). Flow contexts (footer/lokal/summary) keep their margins. */
.is-layout-flex > .is-style-icon-row,
.is-layout-flex > .is-style-icon-chip { margin-bottom: 0; }
.is-style-icon-row p { margin: 0; font-size: 14px; color: var(--sk-steel-300, #adb1b7); }
.is-style-icon-row p a { color: inherit; }
.is-style-icon-row .wp-block-outermost-icon-block { color: var(--sk-arc-300); flex-shrink: 0; margin-top: 2px; }
/* ============================================================
NEWSLETTER
============================================================ */
.sk-news-form { display: flex; align-items: stretch; gap: 10px; max-width: 480px; margin: 0 auto; }
/* input + button share box model so they line up at equal height */
.sk-news-form input, .sk-news-form button {
border: none; border-radius: var(--sk-radius); box-sizing: border-box;
font-family: var(--sk-body); font-size: 15px; line-height: 1.4; padding: 15px 18px;
}
.sk-news-form input { flex: 1; }
.sk-news-form button {
padding-inline: 28px; background: var(--sk-ink); color: #fff;
font-weight: 600; cursor: pointer; white-space: nowrap;
}
.sk-news-form button:hover { background: var(--sk-steel-800, #1f2124); }
/* ============================================================
FOOTER
============================================================ */
/* footer columns = native Grid layout; bottom bar = native flex (see sk-footer.php) */
.sk-footer h4 {
font-family: var(--sk-display); text-transform: uppercase;
font-size: 15px; letter-spacing: 0.06em; color: #fff; margin-bottom: 18px;
}
.sk-footer ul { list-style: none; margin: 0; padding: 0; }
.sk-footer li { margin-bottom: 11px; }
.sk-footer a { font-size: 14px; color: var(--sk-steel-300, #adb1b7); }
.sk-footer a:hover { color: #fff; }
/* footer contact rows: same "Ikon-rad" style, centred vertically */
.sk-foot-contact .is-style-icon-row { align-items: center; margin-bottom: 11px; }
.sk-footer ul.wp-block-list { list-style: none; padding: 0; margin: 0; }
.sk-footer ul.wp-block-list li { margin: 0 0 11px; }
/* foot-bottom: flex/border/padding are block attributes now; just the dim text colour + gap */
.sk-foot-bottom { gap: 12px; color: var(--sk-steel-500); }
/* ============================================================
RESPONSIVE — section grids/columns are now native (core/columns stacks on mobile,
Grid layout wraps via minimumColumnWidth). Only the footer grid + newsletter form here.
============================================================ */
@media (max-width: 600px) {
.sk-news-form { flex-direction: column; }
}
/* ============================================================
CART / CHECKOUT / ORDER CONFIRMATION
Styling the WooCommerce Cart, Checkout and Order-confirmation BLOCKS
(which live in the page content) to match the brand. Structure is WC's
own — we only brand colours, the summary card, steps and buttons. No
hardcoded markup; remove a class and the WC block still works.
============================================================ */
/* page H1 (Varukorg / Kassa) — already display via theme; give it room */
.wc-block-cart .wp-block-post-title,
.wc-block-checkout .wp-block-post-title { margin-bottom: var(--wp--preset--spacing--8); }
/* --- shared: the summary / order sidebar card (both classes live on ONE div) --- */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
background: var(--sk-steel-50); border: 1px solid var(--sk-steel-100);
border-radius: var(--sk-radius-lg); padding: 28px;
}
.wc-block-components-totals-item__label { color: var(--sk-steel-600); }
.wc-block-components-totals-footer-item { font-weight: 700; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font-family: var(--sk-display); font-size: 1.75rem; font-weight: 800;
}
/* --- primary action buttons: red fill (Till kassan / Slutför köp) --- */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-components-button.contained,
.wp-block-woocommerce-checkout .wc-block-components-button.contained {
background: var(--sk-arc-500); color: #fff; border-radius: var(--sk-radius);
font-weight: 700; font-family: var(--sk-display);
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-cart .wc-block-components-button.contained:hover,
.wp-block-woocommerce-checkout .wc-block-components-button.contained:hover { background: var(--sk-arc-600); }
/* --- CART line-items table --- */
.wc-block-cart-items__header { text-transform: uppercase; letter-spacing: 0.05em; font-size: 12px; color: var(--sk-steel-400); }
.wc-block-cart-items__row td { border-top: 1px solid var(--sk-steel-100); }
.wc-block-cart-item__image img { border: 1px solid var(--sk-steel-100); border-radius: var(--sk-radius); background: var(--sk-steel-50); }
.wc-block-cart-item__product .wc-block-components-product-name { font-weight: 700; color: var(--sk-ink); text-decoration: none; }
/* SKU / metadata shown red above the name (WC renders it as product metadata) */
.wc-block-cart-item__product .wc-block-components-product-metadata { color: var(--sk-arc-500); font-size: 12px; }
/* qty stepper: bordered box */
.wc-block-cart .wc-block-components-quantity-selector { border: 1px solid var(--sk-steel-200); border-radius: var(--sk-radius); }
.wc-block-components-totals-coupon__button.is-link,
.wc-block-components-totals-item .wc-block-components-totals-coupon-link { color: var(--sk-arc-500); }
/* trust rows / small print already styled via theme */
/* --- CHECKOUT steps: numbered circles + uppercase titles --- */
.wc-block-checkout__main { counter-reset: sk-step; }
.wc-block-components-checkout-step__title {
text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--sk-display);
font-size: 15px; display: flex; align-items: center; gap: 12px;
}
.wc-block-components-checkout-step__heading { position: relative; }
.wc-block-components-checkout-step__title::before {
counter-increment: sk-step; content: counter(sk-step);
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
background: var(--sk-ink); color: #fff; font-size: 13px; font-weight: 700;
}
/* --- CHECKOUT radio cards (shipping + payment) — selected = red border + tint --- */
.wc-block-components-radio-control__option {
border: 1px solid var(--sk-steel-200); border-radius: var(--sk-radius);
padding: 15px 18px 15px 46px; margin-bottom: 10px;
}
/* keep WC's absolutely-positioned radio dot inside the card padding */
.wc-block-components-radio-control__option .wc-block-components-radio-control__input { left: 18px; }
.wc-block-components-radio-control__option .wc-block-components-radio-control__label-group,
.wc-block-components-radio-control__option .wc-block-components-radio-control__secondary-label { color: var(--sk-ink); }
.wc-block-components-radio-control__option--checked {
border-color: var(--sk-arc-500); background: var(--sk-arc-50);
}
.wc-block-components-radio-control__input:checked { accent-color: var(--sk-arc-500); }
/* --- CHECKOUT address form: 2-col grid is WC default; just spacing --- */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-text-input { border-radius: var(--sk-radius); }
/* --- ORDER CONFIRMATION --- */
.sk-order-confirmation .wc-block-order-confirmation-status,
.wc-block-order-confirmation-status { text-align: center; }
/* "Vad händer nu?" card */
.sk-next-steps { border: 1px solid var(--sk-steel-100); border-radius: var(--sk-radius-lg); }
.sk-next-steps .sk-next-row p { margin: 0; color: var(--sk-steel-600); }
.sk-next-steps .sk-next-row p:last-child { color: var(--sk-ink); }
.sk-next-steps .sk-next-row + .sk-next-row { border-top: 1px solid var(--sk-steel-100); padding-top: 12px; }
@media (max-width: 781px) {
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-checkout__sidebar .wc-block-components-sidebar { padding: 20px; }
}
/* ============================================================
MY ACCOUNT (login/register + account dashboard)
Styling WooCommerce's shortcode My-Account page. Structure is WC's
(form-login.php, navigation.php, endpoints); we brand it with CSS and a
light dashboard.php override (the two overview cards). Page wrapper =
templates/page-my-account.html (header + breadcrumb + post-content).
============================================================ */
/* --- shared field + button look on the account page --- */
.woocommerce-account .woocommerce form .woocommerce-Input,
.woocommerce-account .woocommerce form input.input-text {
width: 100%; box-sizing: border-box; padding: 13px 14px;
border: 1px solid var(--sk-steel-200); border-radius: var(--sk-radius);
font-family: var(--sk-body); font-size: 15px; background: #fff;
}
.woocommerce-account .woocommerce form .woocommerce-Input:focus,
.woocommerce-account .woocommerce form input.input-text:focus { outline: none; border-color: var(--sk-arc-500); }
.woocommerce-account .woocommerce label { font-weight: 600; font-size: 14px; color: var(--sk-ink); margin-bottom: 6px; display: inline-block; }
.woocommerce-account .woocommerce .button,
.woocommerce-account .woocommerce button[type="submit"] {
font-family: var(--sk-display); font-weight: 700; letter-spacing: 0.02em;
padding: 13px 22px; border-radius: var(--sk-radius); border: 1px solid var(--sk-arc-500);
background: var(--sk-arc-500); color: #fff; cursor: pointer;
}
.woocommerce-account .woocommerce .button:hover,
.woocommerce-account .woocommerce button[type="submit"]:hover { background: var(--sk-arc-600); border-color: var(--sk-arc-600); }
/* --- LOGIN / REGISTER: two bordered cards side by side --- */
#customer_login.u-columns {
display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
max-width: 880px; margin-inline: auto;
}
/* WC's .col2-set / .woocommerce carry a clearfix ::before/::after; on a grid
container those become phantom grid cells that shove the real columns into
the wrong tracks. Remove them. */
#customer_login.u-columns::before, #customer_login.u-columns::after,
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::before,
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::after { content: none; }
#customer_login .u-column1,
#customer_login .u-column2 {
width: auto; float: none; margin: 0;
border: 1px solid var(--sk-steel-200); border-radius: var(--sk-radius-lg); padding: 32px;
}
#customer_login h2 { font-family: var(--sk-display); text-transform: uppercase; font-size: 24px; margin: 0 0 18px; }
/* the register column's submit button = outline (secondary action) */
#customer_login .woocommerce-form-register__submit {
background: #fff; color: var(--sk-ink); border-color: var(--sk-steel-300);
}
#customer_login .woocommerce-form-register__submit:hover { background: var(--sk-steel-50); border-color: var(--sk-steel-400); }
.woocommerce-account .woocommerce-form-login__rememberme { font-weight: 400; font-size: 14px; color: var(--sk-steel-600); }
.woocommerce-account .woocommerce-LostPassword a,
.woocommerce-account .woocommerce-privacy-policy-text a { color: var(--sk-arc-500); }
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit { width: 100%; }
/* --- DASHBOARD LAYOUT: sidebar nav + content (only when nav present) --- */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
display: grid; grid-template-columns: 240px 1fr; gap: 0 40px; align-items: start;
}
/* explicit placement so a stray (often empty) notices wrapper as first grid
child can't push the nav into column 2 */
.woocommerce-account .woocommerce .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 2; }
.woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; grid-row: 2; }
/* Woos egna stilar (woocommerce-layout/-blocktheme.css) gör menyn 30 % bred
— 72px i den här spalten, så den aktiva bakgrunden blev en liten ruta som
texten rann ur — och ger raderna 1em luft och understrykning. Samma
specificitet som Woos regler, så de vinner inte. */
.woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: auto; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { text-decoration: none; }
.woocommerce-MyAccount-navigation li a {
display: flex; align-items: center; gap: 12px; white-space: nowrap;
padding: 13px 16px; border-radius: var(--sk-radius);
color: var(--sk-steel-700); font-weight: 600; text-decoration: none;
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--sk-steel-50); color: var(--sk-ink); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--sk-arc-50); color: var(--sk-arc-500); }
/* endpoint icons drawn via mask so they inherit the link colour (red when active) */
.woocommerce-MyAccount-navigation li a::before {
content: ""; width: 20px; height: 20px; flex-shrink: 0;
background-color: currentColor;
-webkit-mask: var(--sk-acc-icon) center / contain no-repeat; mask: var(--sk-acc-icon) center / contain no-repeat;
}
.woocommerce-MyAccount-navigation-link--dashboard a { --sk-acc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--orders a { --sk-acc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2h14v20l-3-2-2 2-2-2-2 2-2-2-3 2zM8 7h8v2H8zm0 4h8v2H8z'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-address a { --sk-acc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-account a { --sk-acc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6z'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--customer-logout a { --sk-acc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2H4v20h6v-2H6V4h4zM20 12l-5-5v3H9v4h6v3z'/%3E%3C/svg%3E"); }
/* --- DASHBOARD content: greeting + overview cards --- */
.sk-account-greeting { font-family: var(--sk-display); text-transform: uppercase; font-size: 24px; margin: 0 0 6px; }
.sk-account-intro { color: var(--sk-steel-600); margin: 0 0 24px; }
.sk-account-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sk-account-card { border: 1px solid var(--sk-steel-200); border-radius: var(--sk-radius-lg); padding: 24px; }
.sk-account-card__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: var(--sk-radius);
background: var(--sk-arc-50); color: var(--sk-arc-500); margin-bottom: 14px;
}
.sk-account-card__icon svg { width: 20px; height: 20px; }
.sk-account-card__title { font-family: var(--sk-display); text-transform: uppercase; font-size: 16px; margin: 0 0 6px; }
.sk-account-card__meta { color: var(--sk-steel-600); font-size: 14px; margin: 0 0 14px; }
.sk-account-card__link { color: var(--sk-arc-500); font-weight: 600; text-decoration: none; }
.sk-account-card__link:hover { text-decoration: underline; }
@media (max-width: 781px) {
#customer_login.u-columns,
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation),
.sk-account-cards { grid-template-columns: 1fr; }
}
/* ============================================================
CONTACT FORM 7 (contact page + gasol order card)
Brand CF7's output. Shared field look; the gasol card turns the
Hämta/Leverans radios into selectable cards.
============================================================ */
.sk-contact-form .wpcf7 label,
.sk-order-card .wpcf7 label { display: block; font-weight: 600; font-size: 14px; color: var(--sk-ink); }
.sk-contact-form .wpcf7 p,
.sk-order-card .wpcf7 p { margin: 0 0 15px; }
.sk-contact-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-radio),
.sk-order-card .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-radio) {
width: 100%; box-sizing: border-box; margin-top: 6px; padding: 12px 14px;
border: 1px solid var(--sk-steel-200); border-radius: var(--sk-radius);
font-family: var(--sk-body); font-size: 15px; background: #fff; color: var(--sk-ink);
}
.sk-contact-form .wpcf7-form-control:focus,
.sk-order-card .wpcf7-form-control:focus { outline: none; border-color: var(--sk-arc-500); box-shadow: 0 0 0 3px var(--sk-arc-50); }
.sk-contact-form textarea.wpcf7-textarea { min-height: 140px; resize: vertical; }
/* submit button = red, full width */
.wpcf7-submit {
width: 100%; margin-top: 4px; padding: 14px 22px; border: none; border-radius: var(--sk-radius);
background: var(--sk-arc-500); color: #fff; font-family: var(--sk-display); font-weight: 700;
letter-spacing: 0.02em; font-size: 15px; cursor: pointer;
}
.wpcf7-submit:hover { background: var(--sk-arc-600); }
/* CF7 validation/response text */
.wpcf7 .wpcf7-not-valid-tip { color: var(--sk-arc-600); font-size: 13px; }
.wpcf7-response-output { border-radius: var(--sk-radius); font-size: 14px; margin: 14px 0 0; }
/* gasol order card: Hämta/Leverans radios as selectable cards.
CF7 renders no