/* ============================================================
   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
   (≤900px), where a tap would otherwise trigger :hover and defeat the accordion) */
@media (min-width: 901px) {
  .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; }

/* 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; }
@media (max-width: 900px) {
  .sk-search, .sk-phone-num, .sk-nav-cta, .sk-utilitybar { display: none; }
  .sk-topbar-inner { gap: 12px; padding: 12px 16px; }
  .is-style-logo { font-size: 22px; }
  .sk-navbar-inner { padding: 0 16px; min-height: 54px; align-items: center; }
  .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); }
  .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); }
}

/* ============================================================
   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;
}
.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;
}
@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); }
/* 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; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li { margin: 0; }
.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 <label> wrapper — input + .wpcf7-list-item-label sit directly in
   .wpcf7-list-item — so the item IS the card, and the (hidden) input is stretched over it
   to keep the whole card clickable + accessible. */
.sk-order-card .wpcf7-radio { display: flex; gap: 10px; margin-top: 6px; }
.sk-order-card .wpcf7-list-item {
  position: relative; flex: 1; margin: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--sk-steel-200); border-radius: var(--sk-radius); padding: 11px;
}
.sk-order-card .wpcf7-list-item:has(input:checked) { border-color: var(--sk-arc-500); background: var(--sk-arc-50); }
.sk-order-card .wpcf7-list-item-label { font-weight: 600; font-size: 14px; color: var(--sk-steel-600); }
.sk-order-card .wpcf7-list-item:has(input:checked) .wpcf7-list-item-label { color: var(--sk-arc-500); }
.sk-order-card .wpcf7-list-item input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

/* ============================================================
   CONTENT PAGES (företagskund benefits, kontakt stores/map)
   ============================================================ */
.sk-b2b-card { transition: 0.18s; }
.sk-b2b-card:hover { box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.3); transform: translateY(-3px); }
.sk-b2b-card h3 { font-size: 18px; margin: 0 0 4px; color: var(--sk-ink); }
.sk-contact-stores h3 { margin: 0 0 4px; }
.sk-map-placeholder { border: 1px dashed var(--sk-steel-200); }