/*
Theme Name: TruckParts
Theme URI: https://truckparts.local
Description: TruckParts storefront theme (Kategoriside Lys design). Child of Twenty Twenty-Five.
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Requires PHP: 8.2
Author: TruckParts
Text Domain: truckparts
*/

/* === Base ============================================= */
:root {
  /* Animated logo mark (as in the transition loader) — SVG mask; color is set by background. */
  --tp-mark-loader: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 380 427'%3E%3Cstyle%3E.t%7Bfill:none;stroke:%23000;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:28 72;animation:t 1.1s linear infinite%7D.c%7Btransform-box:fill-box;transform-origin:center;animation:c 1.1s ease-in-out infinite%7D%40keyframes t%7Bto%7Bstroke-dashoffset:-100%7D%7D%40keyframes c%7B0%25,100%25%7Btransform:scale(.78);opacity:.85%7D50%25%7Btransform:scale(.84);opacity:1%7D%7D%40media (prefers-reduced-motion:reduce)%7B.t%7Banimation:none;stroke-dasharray:none;opacity:.25%7D.c%7Banimation:none;transform:scale(.8)%7D%7D%3C/style%3E%3Cpath class='t' pathLength='100' d='M177 12L72 48 13 71 12 134 13 170 18 211 22 227 31 252 46 280 67 308 95 335 135 365 178 390 218 365 263 331 294 300 317 266 332 230 340 196 343 157 343 72 275 45Z'/%3E%3Cpath class='c' fill-rule='evenodd' d='M177 12L72 48 13 71 12 134 13 170 18 211 22 227 31 252 46 280 67 308 95 335 135 365 178 390 218 365 263 331 294 300 317 266 332 230 340 196 343 157 343 72 275 45ZM286 159L277 152 263 149 173 150 133 300 176 300 176 296 178 292 182 273 190 247 198 213 202 202 204 191 207 185 239 184 244 187 245 192 240 209 236 214 230 216 205 216 196 251 238 251 239 250 246 250 259 246 269 239 276 228 288 183 289 168ZM213 102L81 102 80 103 70 140 115 140 116 141 99 208 90 236 87 251 131 251 138 224 140 220 143 205 156 162 160 142 162 140 203 140Z'/%3E%3C/svg%3E");
  /* Grid and layout lines — own color (Customizer → Färger → Ramar/linjer). */
  --tp-line: #e8e8e8;
  --tp-border: 1px solid var(--tp-line);
  /* One border width across the whole site — 1px. Variable kept for selector compatibility. */
  --tp-border-2: 1px solid var(--tp-line);
  /* Borders of controls (inputs, outlined buttons, checkboxes) — always the text
     color, so they stay visible (WCAG 1.4.11) even with light grid lines. */
  --tp-border-ui: 1px solid var(--wp--preset--color--ink);
  /* Gutters between the site frame and the screen edge: on a laptop the frame would
     otherwise hit the edges (on screens wider than 1440px max-width provides them). */
  --tp-gutter: 0px;
  --tp-frame-max: 1360px;
  --tp-frame-w: min(var(--tp-frame-max), calc(100% - 2 * var(--tp-gutter)));
}
@media (min-width: 1024px) { :root { --tp-gutter: 24px; } }
@media (min-width: 1440px) { :root { --tp-gutter: 40px; } }
body { margin: 0; }
/* Focus — a single 1px line over the element's own border (offset -1px), no doubling with border. */
:focus-visible { outline: 1px solid var(--wp--preset--color--accent); outline-offset: -1px; }
/* WP global styles apply :where(.wp-site-blocks :focus) { outline: 2px solid } to mouse focus too
   (e.g. JS moves focus to the ✕ of an open panel) — a second border over its own. Keyboard focus only. */
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--wp--preset--color--accent); color: #fff; }
input[type="checkbox"] { accent-color: var(--wp--preset--color--accent); }
.tp-scroll-x { overflow-x: auto; scrollbar-width: none; }
.tp-scroll-x::-webkit-scrollbar { display: none; }
.tp-mono { font-family: var(--wp--preset--font-family--mono); letter-spacing: 0.08em; }
/* Sticky footer: the page takes at least the screen height, main grows,
   the footer always sticks to the bottom edge even with short content. */
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.wp-site-blocks > main { flex: 1 0 auto; width: 100%; }
.wp-site-blocks > .wp-block-template-part:has(> .tp-footer),
.wp-site-blocks > footer.wp-block-template-part { margin-top: auto; }

/* Layout sections butt up against each other — WP's global blockGap (1.2rem
   margin-block-start on every child) breaks the continuous borders. */
.wp-site-blocks > * { margin-block-start: 0; }
main.tp-frame > * { margin-block-start: 0; }
/* The shared product-listing part adds a .wp-block-template-part wrapper —
   reset blockGap for its children too, like for direct children of .tp-frame. */
main.tp-frame > .wp-block-template-part > * { margin-block-start: 0; }

/* Site "on a tablet": side borders on desktop */
.tp-frame { max-width: var(--tp-frame-w); box-sizing: border-box; margin: 0 auto; background: var(--wp--preset--color--paper); }
@media (min-width: 760px) { .tp-frame { border-left: var(--tp-border-2); border-right: var(--tp-border-2); } }

/* === Header =========================================== */
[hidden] { display: none !important; }
.tp-trust { display: flex; align-items: stretch; height: 40px; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--sand); border-bottom: var(--tp-border); }
.tp-trust span { flex: none; display: flex; align-items: center; gap: 9px; padding: 11px 14px; font-family: var(--wp--preset--font-family--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; border-right: 1px solid #33322d; white-space: nowrap; }
.tp-trust span:last-child { border-right: 0; }
.tp-trust i { color: var(--wp--preset--color--signal); font-style: normal; }

/* Sticky travel lives on the template-part WRAPPER, not on .tp-headerbar.
   The wrapper is <header class="wp-block-template-part"> (parts/header.html),
   containing .tp-trust then .tp-headerbar as its first two children with
   nothing after them but the (position:fixed, viewport-independent) mobile
   menu markup — so a `position: sticky` on .tp-headerbar itself has zero
   room to travel inside that wrapper and is a no-op (verified live,
   Playwright, both / and /product-category/snoploger-spredere/: bar sat at
   getBoundingClientRect().top === -1220 at scrollY 1200 before this fix).
   Making the WRAPPER sticky with top equal to the negative of .tp-trust's
   fixed height means: once scrolled past the trust strip, the wrapper pins
   with its top edge that far above the viewport, which puts .tp-headerbar
   (the wrapper's next 56/58px of content) flush at viewport top 0 while the
   trust strip scrolls out of view above it. .tp-trust needs a fixed,
   breakpoint-independent height (not one implied by font metrics) so this
   top offset is exact at both the mobile and >=760px type scales. */
header.wp-block-template-part:has(> .tp-headerbar) { position: sticky; top: -40px; z-index: 30; }
/* Info strip disabled in Customizer — the header sticks right from the top. */
header.wp-block-template-part:has(> .tp-headerbar):not(:has(.tp-trust)) { top: 0; }
/* Header — full screen width, no side borders; the bottom line also runs edge to edge.
   Content (.tp-headerbar, the mega menu and live search are positioned from it) — container
   width, like .tp-frame. Footer — likewise full width (see .tp-footer). */
header.wp-block-template-part:has(> .tp-headerbar) { width: 100%; max-width: none; margin-left: 0; margin-right: 0; background: var(--wp--preset--color--paper); box-sizing: border-box; border-bottom: var(--tp-border-2); }
.tp-headerbar { display: flex; align-items: stretch; gap: 0 !important; min-height: 56px; max-width: var(--tp-frame-w); margin-left: auto; margin-right: auto; background: var(--wp--preset--color--paper); }
/* Info strip full width, content within the container. */
header.wp-block-template-part:has(> .tp-headerbar) .tp-trust { padding-inline: max(0px, calc((100% - var(--tp-frame-w)) / 2)); }
/* Hide the WHOLE sticky wrapper (as in the mockup): a transform on the inner bar
   would leave an empty white wrapper (z-30) on screen, covering the filter panel. */
header.wp-block-template-part:has(> .tp-headerbar) { transition: transform 0.25s ease; }
.tp-header--hidden header.wp-block-template-part:has(> .tp-headerbar) { transform: translateY(-105%); }

/* === Page transitions (cross-document View Transitions) ==========
   The browser itself animates the page swap on normal in-site navigation;
   where the API is missing (old browsers) — a plain transition. Content briefly fades out
   and in; the header is a separate group without animation, so it stays in place
   (if it was hidden by scrolling on the old page — it slides in smoothly).
   Footer and listing toolbar are not named: their position differs between pages,
   and they would "travel" across the screen. Reduced motion — transitions disabled. */
@view-transition { navigation: auto; }
header.wp-block-template-part:has(> .tp-headerbar) { view-transition-name: tp-header; }
::view-transition-old(root) { animation: tp-vt-out 0.14s ease-in both; }
::view-transition-new(root) { animation: tp-vt-in 0.2s ease-out both; }
::view-transition-group(tp-header) { animation-duration: 0.2s; }
::view-transition-old(tp-header) { display: none; }
::view-transition-new(tp-header) { animation: none; }
/* Product photo "flies" card ↔ product page (name set by a script in <head>, inc/setup.php).
   Header sits above it so the photo flies underneath. */
::view-transition-group(tp-product-img) { animation-duration: 0.32s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
/* Aspect ratios differ (square card ↔ mosaic of several photos): snapshots are fitted
   centered in the group instead of stretching to width from the top edge. */
::view-transition-old(tp-product-img), ::view-transition-new(tp-product-img) { height: 100%; object-fit: contain; }
/* Content differs (single card photo ↔ mosaic of several): the old snapshot fades out fast, the new
   one fades in fast — the frame moves, not two different semi-transparent snapshots on top of each other. */
::view-transition-old(tp-product-img) { animation: tp-vt-out 0.1s ease-in both; }
::view-transition-new(tp-product-img) { animation: tp-vt-in 0.16s ease-out both; }
::view-transition-group(tp-header) { z-index: 2; }
@keyframes tp-vt-out { to { opacity: 0; } }
@keyframes tp-vt-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

.tp-burger { display: grid; place-items: center; width: 56px; min-height: 56px; flex: none; border: none; border-right: var(--tp-border); background: none; color: var(--wp--preset--color--ink); cursor: pointer; }
.tp-burger:hover { background: var(--wp--preset--color--sand); }

.tp-brand { display: flex; align-items: center; flex: 1; padding: 0 16px; text-decoration: none; color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--heading); font-size: 18px; white-space: nowrap; }
.tp-brand span { color: var(--wp--preset--color--accent); }
/* Logo (SVG, assets/img): 30/38px tall in the header, light version in the footer */
.tp-logo { display: block; width: auto; height: 30px; }
.tp-brand--menu .tp-logo { height: 26px; }
.tp-footer__logo .tp-logo { height: 48px; }
@media (min-width: 760px) { .tp-footer__logo .tp-logo { height: 56px; } }
@media (min-width: 760px) { .tp-headerbar .tp-brand .tp-logo { height: 38px; } .tp-cheader .tp-logo { height: 38px; } }
.tp-brand:hover { background: var(--wp--preset--color--sand); }

.tp-navlinks { display: none; }

/* "Produkter" mega menu: button in the header + panel spanning the bar width.
   Shown on desktop only (≥1120px); on mobile the burger is used. */
.tp-mega { display: none; }
.tp-mega__toggle { display: flex; align-items: center; gap: 12px; padding: 0 clamp(16px, 1.8vw, 28px); background: none; color: var(--wp--preset--color--ink); border: none; border-right: var(--tp-border-2); font-family: var(--wp--preset--font-family--heading); font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; }
.tp-mega__toggle:hover, .tp-mega__toggle.is-open { background: var(--wp--preset--color--ink); color: #fff; }
.tp-mega__caret { font-size: 11px; transition: transform 0.15s ease; }
.tp-mega__toggle.is-open .tp-mega__caret { transform: rotate(180deg); }
/* top: 100% is computed from the header's padding-box, so the panel covered its bottom
   border — shift by 1px and add its own top line. */
.tp-mega__panel { position: absolute; top: calc(100% + 1px); left: 0; right: 0; z-index: 40; display: block; background: #fff; border-bottom: var(--tp-border-2); box-shadow: 0 24px 48px rgba(20, 28, 44, 0.16); }
/* display:grid/flex overrides the UA [hidden] style — restore it explicitly */
.tp-mega__panel[hidden], .tp-mega__pane[hidden] { display: none; }
.tp-mega__panel { overflow-y: auto; overscroll-behavior: contain; } /* max-height — theme.js 4a */
/* Open navigation (mega menu, burger menu) — the page beneath doesn't scroll (theme.js 2, 4a) */
html.tp-nav-open, html.tp-nav-open body { overflow: hidden; }
/* Backdrop under the open mega menu: below the sticky header (z 30), above content. */
.tp-mega__backdrop { position: fixed; inset: 0; z-index: 29; background: rgba(20, 28, 44, 0.55); }
/* The shortcode block's wpautop inserts an empty <p> after the panel heading link — hide it. */
.tp-mega__pane > p:empty, .tp-mega > p:empty { display: none; }
/* Horizontal group tabs */
.tp-mega__groups { display: flex; flex-direction: row; align-items: stretch; overflow-x: auto; scrollbar-width: none; box-sizing: border-box; border-bottom: var(--tp-border); background: var(--wp--preset--color--sand); }
.tp-mega__groups::-webkit-scrollbar { display: none; }
.tp-mega__label { display: none; }
.tp-mega__group { display: flex; align-items: center; gap: 10px; min-height: 52px; box-sizing: border-box; padding: 0 20px; white-space: nowrap; background: none; border: 0; border-right: var(--tp-border); border-radius: 0; cursor: pointer; color: var(--wp--preset--color--ink); font: 700 13px/1 var(--wp--preset--font-family--body); letter-spacing: 0.04em; text-transform: uppercase; }
.tp-mega__group span { font-family: var(--wp--preset--font-family--mono); font-size: 12px; font-weight: 400; opacity: 0.72; }
.tp-mega__group:hover { background: #fff; color: var(--wp--preset--color--ink); }
/* Active tab — accent, to differ from the ink "Produkter" button in the header. */
.tp-mega__group.is-active, .tp-mega__group.is-active:hover { background: var(--wp--preset--color--accent); color: #fff; }
.tp-mega__group.is-active span { opacity: 0.85; }
.tp-mega__content { display: flex; flex-direction: column; }
.tp-mega__pane { display: flex; flex-direction: column; flex: 1; }
.tp-mega__pane-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 46px; box-sizing: border-box; padding: 0 32px; border-bottom: 1px solid var(--tp-line); text-decoration: none; color: var(--wp--preset--color--ink); }
.tp-mega__pane-head em { margin-left: auto; font: 700 12px/1 var(--wp--preset--font-family--body); font-style: normal; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp--preset--color--accent); }
.tp-mega__pane-head:hover strong { color: var(--wp--preset--color--accent); }
.tp-mega__pane-head strong { font-family: var(--wp--preset--font-family--heading); font-size: 17px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; }
.tp-mega__pane-head span { font-size: 14px; color: #3e4656; }
/* Subgroups flow by column (top to bottom, then the next column); row count
   is --tp-rows from tp_mega_rows(). Stripes under even columns span the full
   grid height — columns are easier to read. */
.tp-mega__subs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(var(--tp-rows, 5), auto); grid-auto-flow: column; align-content: start; min-height: 280px; padding: 10px 0 14px; background: linear-gradient(90deg, transparent 0 25%, var(--wp--preset--color--mist) 25% 50%, transparent 50% 75%, var(--wp--preset--color--mist) 75% 100%); }
.tp-mega__subs a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; box-sizing: border-box; padding: 0 32px; text-decoration: none; color: var(--wp--preset--color--ink); font-size: 15px; }
.tp-mega__subs a span { font-family: var(--wp--preset--font-family--mono); font-size: 12px; color: var(--wp--preset--color--stone); }
.tp-mega__subs a:hover { background: var(--wp--preset--color--ink); color: #fff; }
.tp-mega__subs a:hover span { color: var(--wp--preset--color--signal); }
/* Group with headings (Customizer → "Meny: Produkter"): "heading + subgroups" blocks
   in 4 columns (CSS columns, no gap — background stripes line up with columns).
   A short block (.is-compact, ≤ 8 items) doesn't break; a long one may
   continue in the next column (otherwise one column is long, the rest empty),
   but the heading never separates from the first item (__lead), and items aren't split.
   Chrome ignores break-after: avoid in columns — hence the wrapper. */
.tp-mega__subs.is-grouped { display: block; columns: 4; column-gap: 0; }
.tp-mega__block { padding-bottom: 10px; }
.tp-mega__block.is-compact, .tp-mega__lead, .tp-mega__block a { break-inside: avoid; }
/* wpautop (shortcode block) wraps links after a block heading in <p> — remove its box. */
.tp-mega__block > p, .tp-mega__lead > p { display: contents; }
.tp-mega__heading, .tp-mnav__heading-in { display: flex; align-items: center; gap: 10px; font: 400 13px/1.25 var(--wp--preset--font-family--heading); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.tp-mega__heading { min-height: 34px; box-sizing: border-box; padding: 12px 32px 2px; }
.tp-mega__heading img, .tp-mnav__heading-in img { flex: none; width: 20px; height: 20px; object-fit: contain; }
.tp-mega__cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; min-height: 52px; box-sizing: border-box; margin-top: auto; padding: 8px 32px; border-top: 1px solid var(--tp-line); background: var(--wp--preset--color--sand); }
.tp-mega__cta-label { font-family: var(--wp--preset--font-family--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--wp--preset--color--accent); }
.tp-mega__cta a { font-weight: 700; font-size: 14px; letter-spacing: 0.03em; text-decoration: none; color: var(--wp--preset--color--accent); }

/* Header search field: on desktop (≥1120) — always visible; below that the same
   form (with live search) is opened by the "Sök" icon over the header bar
   (.tp-headerbar.is-search-open, theme.js §2b). */
.tp-hsearch { display: none; }
.tp-hsearch label { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 0 22px; color: var(--wp--preset--color--stone); }
.tp-hsearch input { flex: 1; min-width: 0; height: 100%; border: none; background: none; font-size: 15px; color: var(--wp--preset--color--ink); }
.tp-hsearch input:focus { outline: none; }
.tp-hsearch button { flex: none; padding: 0 22px; background: none; color: var(--wp--preset--color--ink); border: none; border-left: 1px solid var(--tp-line); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.tp-hsearch button:hover { background: var(--wp--preset--color--mist); }
.tp-hsearch button:disabled { color: var(--wp--preset--color--stone); background: none; cursor: default; }
.tp-hsearch .tp-hsearch__close { display: none; }
@media (max-width: 1119.98px) {
  .tp-headerbar.is-search-open .tp-hsearch { display: flex; align-items: stretch; position: absolute; inset: 0; z-index: 45; background: var(--wp--preset--color--paper); }
  .tp-headerbar.is-search-open .tp-hsearch label { padding: 0 12px 0 16px; }
  .tp-headerbar.is-search-open .tp-hsearch input { font-size: 16px; } /* < 16px — iOS zooms the page on focus */
  .tp-headerbar.is-search-open .tp-hsearch button[type="submit"] { padding: 0 16px; }
  .tp-headerbar.is-search-open .tp-hsearch .tp-hsearch__close { display: grid; place-items: center; width: 56px; padding: 0; border-left: var(--tp-border); }
}

.tp-iconlink { display: flex; align-items: center; justify-content: center; gap: 11px; min-width: 56px; min-height: 56px; padding: 0; color: var(--wp--preset--color--ink); border-left: var(--tp-border); text-decoration: none; font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.tp-iconlink:hover { background: var(--wp--preset--color--sand); color: var(--wp--preset--color--ink); }
.tp-iconlink--search span { display: none; }
button.tp-iconlink { background: none; border: 0; border-left: var(--tp-border); border-radius: 0; font-family: inherit; cursor: pointer; }
.tp-iconlink--account { display: none; }
/* The plugin's auth menu in the header — like the SÖK/cart icons; on mobile, login is via the menu. */
.tp-auth { display: none; position: relative; }
.tp-auth .auth-menu__button, .tp-auth .auth-menu__trigger { width: 56px; height: 56px; display: grid; place-items: center; border: 0; border-left: var(--tp-border); background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); cursor: pointer; border-radius: 0; padding: 0; }
.tp-auth .auth-menu__button:hover, .tp-auth .auth-menu__trigger:hover { background: var(--wp--preset--color--sand); }
/* Logged-in state renders .auth-menu__trigger (icon + name + chevron) instead of the guest button —
   on mobile a 56×56 square with the icon only; the plugin's chevron is white and just breaks the width. */
.tp-auth .auth-menu__trigger .auth-menu__icon--chevron, .tp-auth .auth-menu__trigger .auth-menu__text { display: none; }
/* Labels next to header icons — desktop only (≥1024px): "Kundtjänst" by contact
   and the logged-in customer's name by account (shows they're signed in). On mobile — icons only. */
.tp-iconlink__text { display: none; }
@media (min-width: 1024px) {
  .tp-contact-btn { gap: 10px; padding: 0 18px; }
  .tp-contact-btn .tp-iconlink__text { display: inline; }
  .tp-auth .auth-menu__trigger { width: auto; display: flex; align-items: center; gap: 10px; padding: 0 18px; }
  .tp-auth .auth-menu__trigger .auth-menu__text { display: block; max-width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 13px/1 var(--wp--preset--font-family--body); letter-spacing: 0.02em; color: var(--wp--preset--color--ink); }
  .tp-auth .auth-menu__trigger .auth-menu__text:empty { display: none; }
}
.tp-auth .auth-menu__dropdown { position: absolute; right: 0; top: 100%; min-width: 220px; background: var(--wp--preset--color--paper); border: var(--tp-border-2); border-radius: 0 !important; box-shadow: none !important; z-index: 40; }
.tp-auth .auth-menu__list { margin: 0; padding: 0; list-style: none; }
.tp-auth .auth-menu__item button, .tp-auth .auth-menu__item a { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 16px; border: 0; background: none; text-align: left; font: 600 13px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; color: inherit; cursor: pointer; text-decoration: none; border-radius: 0; }
.tp-auth .auth-menu__item + .auth-menu__item { border-top: var(--tp-border); }
.tp-auth .auth-menu__item button:hover, .tp-auth .auth-menu__item a:hover { background: var(--wp--preset--color--sand); }
.tp-auth .auth-menu__separator { height: 0; border-top: var(--tp-border); margin: 0; }
.tp-auth .auth-menu__link--price-toggle { justify-content: space-between; }
.tp-auth .auth-menu__toggle-label { font-family: var(--wp--preset--font-family--mono); font-size: 12px; text-transform: none; letter-spacing: 0; }
.tp-auth .auth-menu__toggle-switch { border-radius: 0 !important; background: var(--wp--preset--color--hairline) !important; border: var(--tp-border-ui); box-sizing: border-box; }
.tp-auth .auth-menu__toggle-switch--on { background: var(--wp--preset--color--accent) !important; border-color: var(--wp--preset--color--accent); }
.tp-auth .auth-menu__toggle-thumb { border-radius: 0 !important; background: #fff !important; }
/* Account menu: attached to the bottom of the header (no gap), thin border + shadow like the search panel;
   52px rows, gray icons; "Priser inkl. moms" — a regular list row (label as mono kicker), ink toggle. */
.tp-auth .auth-menu__dropdown { top: calc(100% + 1px) !important; margin: 0 !important; min-width: 264px; border: 1px solid var(--wp--preset--color--hairline) !important; border-top: 0 !important; box-shadow: 0 16px 32px rgb(20 28 44 / 0.12) !important; overflow: hidden; }
.tp-auth .auth-menu__item button, .tp-auth .auth-menu__item a { gap: 14px; min-height: 52px; padding: 0 20px; color: var(--wp--preset--color--ink); transition: background-color 0.15s ease; }
.tp-auth .auth-menu__item svg { flex: none; width: 20px; height: 20px; color: var(--wp--preset--color--stone); transition: color 0.15s ease; }
.tp-auth .auth-menu__item button:hover svg, .tp-auth .auth-menu__item a:hover svg { color: var(--wp--preset--color--ink); }
.tp-auth .auth-menu__separator { border-top-color: var(--wp--preset--color--hairline); }
.tp-auth .auth-menu__item--toggle .auth-menu__link--price-toggle { background: var(--wp--preset--color--mist); }
.tp-auth .auth-menu__item--toggle .auth-menu__link--price-toggle:hover { background: var(--wp--preset--color--sand); }
.tp-auth .auth-menu__toggle-label { font: 400 11px/1 var(--wp--preset--font-family--mono) !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--wp--preset--color--stone); }
.tp-auth .auth-menu__toggle-switch { position: relative; flex: none; width: 36px !important; height: 20px !important; border: 0 !important; background: #c3cad6 !important; transition: background-color 0.2s ease; }
.tp-auth .auth-menu__toggle-switch--on { background: var(--wp--preset--color--ink) !important; }
.tp-auth .auth-menu__toggle-thumb { position: absolute !important; top: 3px !important; left: 3px !important; width: 14px !important; height: 14px !important; transform: none !important; transition: left 0.2s ease; }
.tp-auth .auth-menu__toggle-switch--on .auth-menu__toggle-thumb { left: 19px !important; }
@media (prefers-reduced-motion: reduce) { .tp-auth .auth-menu__toggle-switch, .tp-auth .auth-menu__toggle-thumb { transition: none; } }

/* Mobile menu */
.tp-mobile-menu__overlay { position: fixed; inset: 0; z-index: 60; background: rgba(20, 28, 44, 0.55); }
/* Mobile menu at full screen width: more room for long category names and counters. */
.tp-mobile-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 61; width: 100%; display: flex; flex-direction: column; overflow-y: auto; background: var(--wp--preset--color--paper); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.tp-mobile-menu__top { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: var(--tp-border-2); }
.tp-brand--menu { flex: none; padding: 0; }
.tp-mobile-menu__close { display: grid; place-items: center; width: 44px; height: 44px; border: none; background: none; color: var(--wp--preset--color--ink); cursor: pointer; }
.tp-mobile-menu > a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 20px; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: var(--wp--preset--color--ink); border-bottom: 1px solid var(--wp--preset--color--hairline); }
.tp-mobile-menu > a:hover { background: var(--wp--preset--color--mist); }
.tp-mobile-menu > a span { color: var(--wp--preset--color--stone); font-size: 18px; }
.tp-mobile-menu__account { margin-top: auto; border-top: var(--tp-border-2); }
.tp-mobile-menu { overscroll-behavior: contain; }
/* Menu navigation ([tp_mobile_menu_nav]): "Välj fordon" / selected car, then
   main groups as an accordion — "Visa alla i …" as the first item of each group. */
.tp-mnav__car a { display: flex; align-items: center; gap: 14px; min-height: 64px; box-sizing: border-box; padding: 12px 20px; background: var(--wp--preset--color--accent); color: #fff; text-decoration: none; border-bottom: var(--tp-border-2); }
.tp-mnav__car a:hover { background: var(--wp--preset--color--accent-deep); color: #fff; }
.tp-mnav__car-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; }
.tp-mnav__car small { font: 400 11px/1.3 var(--wp--preset--font-family--mono); letter-spacing: 0.06em; opacity: 0.85; }
.tp-mnav__car em { flex: none; font-style: normal; font-size: 18px; }
.tp-mnav__car.is-set a { background: var(--wp--preset--color--sand); color: var(--wp--preset--color--ink); }
.tp-mnav__car.is-set a:hover { background: var(--wp--preset--color--mist); }
.tp-mnav__car.is-set small { order: -1; color: var(--wp--preset--color--stone); opacity: 1; text-transform: uppercase; }
.tp-mnav__car.is-set em { font: 700 13px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--accent); text-decoration: underline; }
.tp-mnav__list, .tp-mnav__subs { margin: 0; padding: 0; list-style: none; }
.tp-mnav__link { display: flex; align-items: center; gap: 12px; min-height: 56px; box-sizing: border-box; padding: 0 20px; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: var(--wp--preset--color--ink); border-bottom: 1px solid var(--wp--preset--color--hairline); cursor: pointer; list-style: none; }
.tp-mnav__link::-webkit-details-marker { display: none; }
.tp-mnav__link:hover { background: var(--wp--preset--color--mist); color: var(--wp--preset--color--ink); }
.tp-mnav__link span { margin-left: auto; font: 400 12px/1 var(--wp--preset--font-family--mono); letter-spacing: 0; color: var(--wp--preset--color--stone); }
.tp-mnav__link--all span { font: inherit; font-size: 18px; font-weight: 400; }
.tp-mnav__link i { margin-left: auto; } /* product counts removed from the menu — the "+" icon sits alone on the right */
.tp-mnav__link i { flex: none; width: 20px; text-align: center; font-style: normal; }
.tp-mnav__link i::before { content: "+"; font-family: var(--wp--preset--font-family--mono); font-size: 18px; }
.tp-mnav__group[open] > .tp-mnav__link { background: var(--wp--preset--color--ink); color: #fff; border-bottom-color: var(--wp--preset--color--ink); }
.tp-mnav__group[open] > .tp-mnav__link span { color: var(--wp--preset--color--signal); }
.tp-mnav__group[open] > .tp-mnav__link i::before { content: "−"; }
.tp-mnav__subs { background: var(--wp--preset--color--mist); border-bottom: var(--tp-border); }
.tp-mnav__subs a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; box-sizing: border-box; padding: 8px 20px 8px 32px; font-size: 15px; line-height: 1.3; color: var(--wp--preset--color--ink); text-decoration: none; border-bottom: 1px solid var(--wp--preset--color--hairline); }
.tp-mnav__subs li:last-child a { border-bottom: 0; }
.tp-mnav__subs a span { flex: none; font: 400 12px/1 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--stone); }
.tp-mnav__subs a:hover { background: var(--wp--preset--color--ink); color: #fff; }
.tp-mnav__subs a:hover span { color: var(--wp--preset--color--signal); }
.tp-mnav__heading-in { padding: 18px 20px 6px 32px; }
.tp-mnav__subs .tp-mnav__viewall { font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--accent); }

@media (min-width: 760px) {
  .tp-trust span { flex: 1; justify-content: center; font-size: 12px; padding: 11px 16px; }
  .tp-brand { flex: none; padding: 0 24px; font-size: 23px; }
  .tp-iconlink--search { padding: 0 20px; }
  .tp-iconlink--search span { display: inline; }
  .tp-iconlink--account { display: flex; }
  .tp-auth { display: block; }
}
@media (min-width: 1120px) {
  .tp-burger { display: none; }
  .tp-headerbar { position: relative; }
  .tp-brand { flex: none; border-right: var(--tp-border-2); padding: 0 24px; }
  .tp-mega { display: flex; align-items: stretch; }
  .tp-hsearch { display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; } /* no border-left: the 2px border of the "Produkter" button already acts as a divider */
  /* The search field replaces the icon link on desktop */
  .tp-iconlink--search { display: none; }
  .tp-headerbar .qcom-minicart__trigger { padding: 0 18px; }
}

/* === Footer =========================================== */
.tp-footer { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--sand); border-top: var(--tp-border-2); margin-top: 0; }
.tp-footer__grid { display: grid; gap: 32px; padding: 36px 16px; }
.tp-footer__logo { font-family: var(--wp--preset--font-family--heading); font-size: 22px; color: #fff; }
.tp-footer__logo span { color: var(--wp--preset--color--signal); }
.tp-footer__brand p { margin: 10px 0 0; font-size: 14px; color: var(--wp--preset--color--hairline); max-width: 34ch; }
.tp-footer__col { display: flex; flex-direction: column; }
.tp-footer__head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; border: 0; background: none; font-family: var(--wp--preset--font-family--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--wp--preset--color--hairline); text-align: left; margin-bottom: 6px; }
.tp-footer__links { display: flex; flex-direction: column; }
/* Phone: columns are an accordion, collapsed by default (theme.js §20). Heading is a full-width
   button with "+"/"−"; without JS everything is expanded. */
@media (max-width: 759px) {
  .tp-footer__grid { gap: 0; }
  .tp-footer__brand { padding-bottom: 24px; }
  .tp-footer__col { border-top: 1px solid rgb(255 255 255 / 0.12); }
  .tp-footer__col:last-child { border-bottom: 1px solid rgb(255 255 255 / 0.12); }
  .tp-footer__head { min-height: 52px; margin: 0; cursor: pointer; }
  .tp-footer__head::after { content: "+"; font-size: 18px; line-height: 1; color: #fff; }
  .tp-footer__head[aria-expanded="true"]::after { content: "−"; }
  .tp-footer__head:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
  .tp-footer__head[aria-expanded="false"] + .tp-footer__links { display: none; }
  .tp-footer__links { padding-bottom: 12px; }
  /* Contacts in the first column — same "KONTAKT" collapse; logo and description stay visible. */
  .tp-footer__head--contact { margin-top: 24px; border-top: 1px solid rgb(255 255 255 / 0.12); }
  .tp-footer__brand { padding-bottom: 0; }
  .tp-footer__links--contact .tp-footer__contact { margin-top: 0; }
  /* Legal line — centered column, "Cookieinställningar" on its own line. */
  .tp-footer__legal { flex-direction: column; align-items: center; gap: 14px; padding: 22px 16px 26px; text-align: center; line-height: 1.7; }
  .tp-footer__ids { display: flex; flex-direction: column; align-items: center; }
}
@media (min-width: 760px) {
  .tp-footer__head { pointer-events: none; }
  .tp-footer__head--contact { display: none; }
  .tp-footer__ids > span + span::before { content: " · "; }
}
.tp-footer__col a, .tp-footer__links a { min-height: 44px; display: flex; align-items: center; color: var(--wp--preset--color--sand); text-decoration: none; font-size: 14px; }
.tp-footer__col a:hover { color: #fff; text-decoration: underline; }
.tp-footer__col a span { display: none; }
.tp-catlinks { display: contents; }
.tp-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding: 16px; border-top: 1px solid #33322d; font-family: var(--wp--preset--font-family--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--wp--preset--color--hairline); }
/* Contacts under the logo (Customizer → Store Info) — for customers and Google Merchant Center. */
.tp-footer__contact { display: flex; flex-direction: column; margin-top: 16px; font-style: normal; font-size: 14px; line-height: 1.5; color: var(--wp--preset--color--sand); }
.tp-footer__contact a { min-height: 44px; display: flex; align-items: center; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.tp-footer__contact a:hover { text-decoration: underline; }
.tp-footer__contact span { padding: 4px 0; color: var(--wp--preset--color--hairline); }
@media (min-width: 760px) {
  /* Footer background is full width, while content aligns with the site frame:
     side padding = gutter outside the frame + 32px. */
  .tp-footer { --tp-footer-pad: calc((100% - var(--tp-frame-w)) / 2 + 32px); }
  .tp-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; padding: 48px var(--tp-footer-pad); }
  .tp-footer__legal { padding: 16px var(--tp-footer-pad); }
}

/* === Category banner ================================== */
/* Fallback without a category image — gradient on an ink base. */
/* The banner grows with the text (long description): photo is an absolute background,
   overlay is in flow with min-height, otherwise content crept up under the "Ditt fordon" chip. */
.tp-cat-banner { position: relative; min-height: 150px; overflow: hidden; border-bottom: var(--tp-border-2); background: linear-gradient(120deg, #2a3449 0%, var(--wp--preset--color--ink) 65%); }
/* The category-image block sets an inline height (maxHeight) on figure and img —
   override so the image fills the banner exactly and centered. */
.tp-cat-banner .qc-category-image { position: absolute; inset: 0; }
.tp-cat-banner .qc-category-image figure,
.tp-cat-banner .qc-category-image img { width: 100%; height: 100% !important; margin: 0; object-fit: cover; display: block; }
/* margin-block-start: 0 cancels WP blockGap (the overlay is the banner group's second
   child), otherwise the gradient shifts down and a bare strip of photo shows on top. */
.tp-cat-banner > .tp-cat-banner__overlay { position: relative; z-index: 1; min-height: 150px; box-sizing: border-box; margin-block-start: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; background: linear-gradient(90deg, rgba(20,28,44,0.82) 0%, rgba(20,28,44,0.45) 60%, rgba(20,28,44,0.15) 100%); }
.tp-breadcrumbs, .tp-breadcrumbs a { font-family: var(--wp--preset--font-family--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--wp--preset--color--hairline) !important; }
.tp-breadcrumbs a:hover { color: #fff !important; }
.tp-cat-title { margin: 6px 0 0; font-family: var(--wp--preset--font-family--heading); font-size: clamp(30px, 4vw, 46px); text-transform: uppercase; color: #fff; }
.tp-cat-desc { display: none; margin: 6px 0 0; font-size: 15px; color: #e6e9ef; max-width: 60ch; }
@media (min-width: 760px) {
  .tp-cat-banner { min-height: 210px; }
  .tp-cat-banner > .tp-cat-banner__overlay { min-height: 210px; padding: 20px 32px 22px; }
  .tp-cat-desc { display: block; }
}

/* Banner without photo (model/brand/tag/search/all products) */
.tp-cat-banner--plain { background: var(--wp--preset--color--ink); min-height: 150px; }
.tp-cat-banner--plain .tp-cat-banner__overlay { position: static; background: none; }
@media (min-width: 760px) { .tp-cat-banner--plain { min-height: 210px; } }
/* Banner without photo (category without image, search): light gradient with a Glow
   in the top-right corner and dark text; the overlay for text legibility on photos
   isn't needed here. Colors follow the Customizer. */
:root { --tp-banner-end: #e9edf3; } /* bottom tone of the light banner = toolbar background below it */
.tp-cat-banner:not(:has(img)) { color: var(--wp--preset--color--ink); background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--glow) 32%, transparent) 0%, transparent 55%), linear-gradient(180deg, #f3f5f9 0%, var(--tp-banner-end) 100%); }
/* Toolbar under the light banner continues the banner: same tone; the line between them stays. */
/* :has() can't be nested, so two cases: the category banner is a sibling of the toolbar part in <main>;
   the model/brand/search banner (parts/term-banner, .tp-cat-banner--plain, no photo) is in its own template-part wrapper. */
.tp-cat-banner:not(:has(img)) ~ * .tp-toolbar, :has(> .tp-cat-banner--plain) ~ * .tp-toolbar,
.tp-cat-banner:not(:has(img)) ~ * .tp-activecar, :has(> .tp-cat-banner--plain) ~ * .tp-activecar { background: var(--tp-banner-end); } /* the "Visar delar för …" row — also continues the banner */
@media (min-width: 1024px) {
  .tp-cat-banner:not(:has(img)) ~ * .tp-toolbar:has(.tp-toolbar__model .facetwp-facet:not(.is-empty)),
  :has(> .tp-cat-banner--plain) ~ * .tp-toolbar:has(.tp-toolbar__model .facetwp-facet:not(.is-empty)) { --tp-vehicle-bg: var(--tp-banner-end); }
}
.tp-cat-banner:not(:has(img)) > .tp-cat-banner__overlay { background: none; }
/* Light banner: dark title, description and breadcrumbs (they stay white on photos). */
.tp-cat-banner:not(:has(img)) .tp-cat-title { color: var(--wp--preset--color--ink); }
.tp-cat-banner:not(:has(img)) .tp-cat-desc { color: #4a5263; }
.tp-cat-banner:not(:has(img)) .tp-breadcrumbs, .tp-cat-banner:not(:has(img)) .tp-breadcrumbs a { color: var(--wp--preset--color--stone) !important; }
.tp-cat-banner:not(:has(img)) .tp-breadcrumbs a:hover { color: var(--wp--preset--color--ink) !important; }
/* Title and description appear on load — one after another, bottom up (breadcrumbs not animated). */
/* Breadcrumbs always at the top of the banner, title and description at the bottom (also with no description, as on the model page). */
.tp-cat-banner__overlay > .qcom-breadcrumbs + * { margin-top: auto; } /* free space goes between breadcrumbs and title */
.tp-cat-banner__overlay > :not(.qcom-breadcrumbs) { animation: tp-banner-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.tp-cat-banner__overlay > :not(.qcom-breadcrumbs) ~ :not(.qcom-breadcrumbs) { animation-delay: 0.1s; }
@keyframes tp-banner-rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .tp-cat-banner__overlay > * { animation: none; } }

/* === Toolbar ========================================== */
/* top: 0 (unchanged) is correct with the header fix above: the toolbar sits
   below the category banner, so by the time normal down-scrolling brings it
   to the top of the viewport, scrollY is already past the header's y > 220
   hide threshold (assets/js/theme.js) and .tp-header--hidden has already
   slid the header bar away — the toolbar sticks flush at the top, matching
   the mockup. Only on scroll-up does the header bar reappear; z-index 30
   (header wrapper) vs 20 (here) makes it overlay above the toolbar rather
   than push it down, which is the intended transient behaviour. Verified
   live at 1440x900 and 375x812. */
/* The bar sticks BELOW the visible header (top = header height from a JS variable) and smoothly
   rises to 0 when the header hides on scroll down — mockup behavior. */
.tp-toolbar { position: sticky; top: var(--tp-header-h, 57px); z-index: 20; gap: 12px; --tp-toolbar-h: 64px; padding: 0; min-height: var(--tp-toolbar-h); align-items: stretch; border-bottom: var(--tp-border); background: var(--wp--preset--color--paper); transition: top 0.25s ease; }
body.tp-header--hidden .tp-toolbar { top: 0; }
/* The shortcode block wraps the counter in a <p>, which is the toolbar's flex child — center it. */
/* The "Filter" button comes first on the left (product count removed from the toolbar); wpautop wraps it in <p>. */
.tp-toolbar > p:has(> .tp-filter-btn) { margin: 0; flex: 0 0 auto; min-width: 0; display: flex; align-items: stretch; }
.tp-toolbar > p > .tp-filter-btn { border-left: 0; border-right: 0; padding: 0 16px; } /* as on desktop: no background or vertical lines */
.tp-toolbar .tp-sort { border-left: 0; }
.tp-count { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: baseline; gap: 6px; align-self: center; font-family: var(--wp--preset--font-family--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--stone); }
.tp-count strong { font-family: var(--wp--preset--font-family--heading); font-size: 18px; letter-spacing: 0; color: var(--wp--preset--color--ink); margin-right: 4px; }
/* Vehicle facet in the toolbar (desktop only). At ≥1280 the toolbar is a grid with the same
   5 columns as the product list: [counter + "Fordon"] [märke] [modell]
   [årsmodell] [Filter + Sortera]; lines between cells match the card
   lines. At 1024–1279 (4 columns) the selects take 2–3, the buttons 4. */
.tp-toolbar > p:has(> .tp-toolbar__model) { display: contents; }
.tp-toolbar__model > p, .tp-toolbar > p:empty { display: none; } /* an empty <p> from wpautop became a second grid row */
.tp-toolbar__model { display: none; }
@media (min-width: 1024px) {
  .tp-toolbar:has(.tp-toolbar__model .facetwp-facet:not(.is-empty)) { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 0 !important; padding: 0 !important; }
  .tp-toolbar:has(.tp-toolbar__model) > p:has(> .tp-filter-btn) { grid-column: 1; grid-row: 1; justify-self: start; align-self: stretch; }
  .tp-toolbar:has(.tp-toolbar__model) > p > .tp-filter-btn { border-right: 0; padding: 0 20px 0 24px; } /* the cell line is on the "Ditt fordon" label to the right */
  .tp-toolbar__model { display: contents; }
  .tp-toolbar__model:has(.facetwp-facet.is-empty) { display: none; }
  .tp-toolbar__model-label { grid-column: 1; grid-row: 1; justify-self: end; align-self: stretch; display: flex; align-items: center; padding: 0 16px; font-size: 11px; letter-spacing: 0.1em; color: var(--wp--preset--color--stone); pointer-events: none; }
  .tp-toolbar__model .facetwp-facet { grid-column: 2 / span 2; grid-row: 1; display: flex; min-width: 0; margin: 0 !important; }
  .tp-toolbar:has(.tp-toolbar__model) .tp-toolbar__actions { grid-column: 4; grid-row: 1; } /* vehicle zone without side lines */
  .tp-toolbar:has(.tp-toolbar__model) .tp-toolbar__actions .tp-filter-btn { border-left: 0; }
  .tp-toolbar:has(.tp-toolbar__model) .tp-sort { flex: 1 1 auto; justify-content: flex-end; border-left: 0; }
  /* Sorting — compact, right-aligned in its cell: "SORTERA" + current value, the field doesn't stretch to full width. */
  .tp-toolbar:has(.tp-toolbar__model) .tp-sort .tp-mono { display: inline; flex: none; }
  .tp-toolbar:has(.tp-toolbar__model) .tp-sort .facetwp-facet { flex: 0 1 auto; }
  .tp-toolbar:has(.tp-toolbar__model) .tp-sort select { width: auto; field-sizing: content; max-width: 100%; }
  .tp-toolbar__model .facetwp-hierarchy_select { flex: 1 1 0; min-width: 0; height: var(--tp-toolbar-h); margin: 0; border: 0; border-right: var(--tp-border); border-radius: 0; background: var(--wp--preset--color--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141c2c' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; -webkit-appearance: none; appearance: none; padding: 0 40px 0 16px; font: 600 13px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.02em; color: var(--wp--preset--color--ink); cursor: pointer; text-overflow: ellipsis; }
  .tp-toolbar__model .facetwp-hierarchy_select:last-child { border-right: 0; }
  /* The select is a grid cell (cell line uses the line color), while the field itself is a
     text-colored border inside it (outline with negative offset), so the field reads
     as a field even with light grid lines (Customizer → Färger). */
  .tp-toolbar__model .facetwp-hierarchy_select { border-right: 0; outline: var(--tp-border-ui); outline-offset: -9px; padding: 0 44px 0 24px; background-position: right 22px center; }
  .tp-toolbar__model .facetwp-hierarchy_select:disabled, .tp-toolbar__model .facetwp-hierarchy_select.is-disabled { outline-color: #a3aab7; }
  .tp-toolbar__model .facetwp-hierarchy_select:hover { background-color: var(--wp--preset--color--sand); }
  /* The vehicle zone is the listing's main action: light background with accent (follows Customizer),
     label with icon in accent color. The field inside the select stays white
     (an inset shadow paints the background only around the border). */
  /* Background spans the whole toolbar row (counter, vehicle, Filter, Sortera), not just the vehicle zone. */
  .tp-toolbar:has(.tp-toolbar__model .facetwp-facet:not(.is-empty)) { --tp-vehicle-bg: var(--wp--preset--color--mist); background: var(--tp-vehicle-bg); }
  .tp-toolbar:has(.tp-toolbar__model .facetwp-facet:not(.is-empty)) .tp-filter-btn { background: transparent; }
  .tp-toolbar__model-label { gap: 10px; font: 700 12px/1.15 var(--wp--preset--font-family--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
  .tp-toolbar__model .facetwp-hierarchy_select { box-shadow: inset 0 0 0 8px var(--tp-vehicle-bg); }
  /* Next step — the first available empty field: 2px accent border */
  .tp-toolbar__model .facetwp-hierarchy_select:not(:disabled, .is-disabled):has(> option:checked[value=""]) { outline: 2px solid var(--wp--preset--color--accent); }
  .tp-toolbar__model .facetwp-hierarchy_select:disabled, .tp-toolbar__model .facetwp-hierarchy_select.is-disabled { color: var(--wp--preset--color--stone); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3aab7' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); cursor: default; }
}
@media (min-width: 1280px) {
  .tp-toolbar:has(.tp-toolbar__model .facetwp-facet:not(.is-empty)) { grid-template-columns: repeat(5, 1fr); }
  /* Selects are separate grid cells (2, 3, 4), each under its own card column */
  .tp-toolbar__model .facetwp-facet { display: contents; }
  .tp-toolbar__model .facetwp-hierarchy_select { grid-row: 1; border-left: 0; border-right: 0; } /* no lines between fields or on the sides of the vehicle zone */
  .tp-toolbar__model .facetwp-hierarchy_select:nth-of-type(1) { grid-column: 2; }
  .tp-toolbar__model .facetwp-hierarchy_select:nth-of-type(2) { grid-column: 3; }
  .tp-toolbar__model .facetwp-hierarchy_select:nth-of-type(3) { grid-column: 4; }
  .tp-toolbar:has(.tp-toolbar__model) .tp-toolbar__actions { grid-column: 5; }
}
.tp-toolbar__actions { gap: 0 !important; align-items: stretch; flex: 0 1 auto; min-width: 0; }
.tp-toolbar__actions > * { min-width: 0; }
/* wpautop wraps the Filter button in <p>: the <p> became the flex item (min-width: 0),
   it shrank, and the button spilled onto the sort block (~26px overlap at 1440).
   display: contents makes the button itself the flex item — then flex: none works. */
.tp-toolbar__actions > p { display: contents; }
.tp-toolbar__actions .tp-filter-btn { flex: none; }
@media (min-width: 1024px) {
  /* The "Filter + Sortera" grid cell is a container: content adapts to the
     column width (1fr) instead of stretching it (size containment → min-content 0,
     columns stay equal and line up with the cards). */
  .tp-toolbar:has(.tp-toolbar__model .facetwp-facet:not(.is-empty)) .tp-toolbar__actions { container: tp-actions / inline-size; }
  /* Extra toolbar content without an explicit grid position (e.g. the active-vehicle
     row) — a separate full-width row instead of someone else's cell. :where has zero
     specificity, so explicit placement from other rules overrides it. */
  .tp-toolbar > :where(:not(p:has(> .tp-filter-btn), .tp-toolbar__model, .tp-toolbar__actions)) { grid-column: 1 / -1; }
}
/* Narrow cell (1440 → ~270px, 1024–1439 → ~245px): tighter padding; with active
   filters the counter badge replaces the icon, and at the narrowest also the word "Filter"
   (font-size 0 is visual only: the button's accessible name stays "Filter N"). */
@container tp-actions (max-width: 330px) {
  .tp-filter-btn { padding: 0 14px; gap: 6px; }
  .tp-filter-btn:has(.tp-filter-btn__count:not([hidden])) > svg { display: none; }
  .tp-sort { padding: 0 12px; }
  .tp-sort select { font-size: 12px; letter-spacing: 0.02em; }
}
/* The "Sortera" label gives way to the value only in a very narrow cell. */
@container tp-actions (max-width: 230px) {
  .tp-toolbar:has(.tp-toolbar__model) .tp-sort .tp-mono { display: none; }
}
@container tp-actions (max-width: 270px) {
  .tp-filter-btn > svg { display: none; }
  .tp-filter-btn:has(.tp-filter-btn__count:not([hidden])) { font-size: 0; gap: 8px; }
  .tp-filter-btn:has(.tp-filter-btn__count:not([hidden])) > svg { display: block; }
}
.tp-filter-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 18px; background: transparent; border: 0; border-left: var(--tp-border); font: 600 13px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; color: inherit; }
/* Hover without fill (a white/gray block clashed with the toolbar) — just underline the label. */
.tp-filter-btn:hover { background: transparent; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.tp-filter-btn__count { font-family: var(--wp--preset--font-family--mono); background: var(--wp--preset--color--accent); color: #fff; padding: 3px 6px; font-size: 11px; }
.tp-sort { display: inline-flex; align-items: center; gap: 12px; border-left: var(--tp-border); padding: 0 8px; min-width: 0; }
.tp-sort .tp-mono { display: none; font-family: var(--wp--preset--font-family--mono); font-size: 12px; color: var(--wp--preset--color--stone); }
.tp-sort .facetwp-facet { margin: 0; min-width: 0; flex: 1 1 auto; }
/* Custom chevron (as in the vehicle selects): the native arrow with padding took more room and clipped "Rekommenderat". */
.tp-sort select { width: 100%; max-width: 150px; text-overflow: ellipsis; border: 0; border-radius: 0; font: 600 13px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; padding: 12px 22px 12px 0; cursor: pointer; color: var(--wp--preset--color--ink); -webkit-appearance: none; appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141c2c' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center / 14px; }
/* Options list: the native Chrome/Edge popup on Windows ignores padding on <option> and
   takes the select's zero left padding — text hugged the border. Where customizable select
   exists (Chrome/Edge 135+), we draw the list ourselves in the toolbar style; other browsers — native. */
@supports (appearance: base-select) {
  .tp-sort select, .tp-sort select::picker(select) { appearance: base-select; }
  .tp-sort select::picker-icon { display: none; } /* chevron is a background SVG, as before */
  .tp-sort select::picker(select) { margin-top: 4px; padding: 4px 0; min-width: 180px; border: var(--tp-border-ui); border-radius: 0; background: var(--wp--preset--color--paper); box-shadow: 0 8px 24px rgb(20 28 44 / 0.12); position-area: block-end span-inline-start; }
  .tp-sort select option { padding: 10px 16px; font: 600 13px/1.2 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--ink); background: none; cursor: pointer; }
  .tp-sort select option::checkmark { display: none; }
  .tp-sort select option:hover, .tp-sort select option:focus-visible { background: var(--wp--preset--color--sand); outline: 0; }
  .tp-sort select option:checked { background: var(--wp--preset--color--ink); color: #fff; }
}
@media (min-width: 760px) { .tp-sort { padding: 0 16px; } .tp-sort .tp-mono { display: inline; } .tp-sort select { max-width: none; } .tp-toolbar > p > .tp-filter-btn { padding: 0 24px; } }

/* Active filter chips */
.tp-selections:not(:has(.facetwp-selection-value)) { display: none; }
.tp-selections { padding: 8px 16px; border-bottom: var(--tp-border); }
.tp-selections .facetwp-selections ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tp-selections .facetwp-selections li { display: contents; }
.tp-selections .facetwp-selection-label { display: none; }
.tp-selections .facetwp-selection-value { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: var(--tp-border-ui); font: 500 13px/1 var(--wp--preset--font-family--body); cursor: pointer; background: var(--wp--preset--color--paper); }
.tp-selections .facetwp-selection-value::after { content: "✕"; font-family: var(--wp--preset--font-family--mono); }
.tp-selections .facetwp-selection-value:hover { background: var(--wp--preset--color--sand); }
@media (min-width: 760px) { .tp-selections { padding: 8px 24px; } }
/* "Visar delar för Toyota Hilux 2016 · Visa alla fordon" — row below the toolbar ([tp_active_car]). */
.tp-activecar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px 16px; border-bottom: var(--tp-border); background: var(--wp--preset--color--mist); font-size: 14px; }
.tp-activecar[hidden] { display: none; }
.tp-activecar__label { margin-right: auto; } /* "Byt fordon" and "Visa alla fordon" — on the right */
.tp-activecar__change { padding: 4px 0; margin-right: 12px; font-weight: 600; color: var(--wp--preset--color--accent); text-decoration: underline; text-underline-offset: 3px; }
.tp-activecar__change:hover { color: var(--wp--preset--color--accent-deep); }
.tp-activecar__clear { padding: 4px 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--wp--preset--color--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tp-activecar__clear:hover { color: var(--wp--preset--color--accent-deep); }
@media (min-width: 760px) { .tp-activecar { padding: 10px 24px; } }

/* === Filter drawer ===================================== */
.tp-drawer__overlay { position: fixed; inset: 0 calc(-1 * var(--tp-sbw, 0px)) 0 0; background: rgba(20, 28, 44, 0.55); z-index: 90; opacity: 0; transition: opacity 0.25s ease; }
.tp-drawer__overlay.is-open { opacity: 1; }
/* Slide: from the bottom on mobile, from the right at ≥760px; [hidden] keeps the panel out of the DOM flow for AT. */
.tp-drawer { position: fixed; z-index: 91; inset: auto calc(-1 * var(--tp-sbw, 0px)) 0 0; max-height: 92vh; background: var(--wp--preset--color--paper); display: flex; flex-direction: column; border-top: var(--tp-border-2); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: transform; }
.tp-drawer.is-open { transform: none; }
@media (prefers-reduced-motion: reduce) { .tp-drawer, .tp-drawer__overlay { transition: none; } }
.tp-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; min-height: 56px; border-bottom: var(--tp-border); }
.tp-drawer__head h2, .tp-drawer__title { margin: 0; font: 400 22px/1 var(--wp--preset--font-family--heading); text-transform: uppercase; }
.tp-drawer__close { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: var(--tp-border-ui); cursor: pointer; color: inherit; }
.tp-drawer__body { overflow: auto; flex: 1; }
/* The vehicle is already selected in the toolbar (≥1024px, facet not empty) — don't duplicate the section in the drawer.
   Same condition that enables the toolbar grid with selects. */
@media (min-width: 1024px) {
  body:has(.tp-toolbar__model .facetwp-facet:not(.is-empty)) .tp-drawer .tp-facet[data-tp-facet="qcom_model_hierarchy"] { display: none; }
}
.tp-facet { border-bottom: var(--tp-border); }
/* Facet with no values for the current list (FacetWP sets .is-empty: no categories,
   brands, same price for all products, etc.) — don't show the drawer section. */
.tp-facet:has(.facetwp-facet.is-empty) { display: none; }
.tp-facet summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 16px; cursor: pointer; font: 600 13px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; }
.tp-facet summary::-webkit-details-marker { display: none; }
.tp-facet summary i::before { content: "+"; font-family: var(--wp--preset--font-family--mono); font-size: 18px; }
.tp-facet[open] summary i::before { content: "−"; }
.tp-facet__body { padding: 0 16px 16px; }
.tp-drawer__foot { display: grid; grid-template-columns: 1fr auto; border-top: var(--tp-border-2); }
.tp-drawer__apply, .tp-drawer__reset { min-height: 56px; border: 0; cursor: pointer; font: 700 13px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; }
.tp-drawer__apply { background: var(--wp--preset--color--ink); color: #fff; }
.tp-drawer__apply:hover { background: var(--wp--preset--color--accent); }
.tp-drawer__reset { background: var(--wp--preset--color--paper); padding: 0 20px; border-left: var(--tp-border); color: inherit; }
@media (min-width: 760px) {
  .tp-drawer { inset: 0 calc(-1 * var(--tp-sbw, 0px)) 0 auto; width: calc(400px + var(--tp-sbw, 0px)); padding-right: var(--tp-sbw, 0px); box-sizing: border-box; max-height: none; border-top: 0; border-left: var(--tp-border-2); transform: translateX(100%); }
  .tp-drawer.is-open { transform: none; }
  /* Filter on the left (the usual side for catalogs); contact stays on the right.
     On the left the scrollbar isn't covered, so no --tp-sbw compensation is needed. */
  #tp-filter-drawer { inset: 0 auto 0 0; width: 400px; padding-right: 0; border-left: 0; border-right: var(--tp-border-2); transform: translateX(-100%); }
  #tp-filter-drawer.is-open { transform: none; }
}

/* FacetWP controls in the design language (front.css disabled) */
.facetwp-facet { margin-bottom: 0; }
.facetwp-checkbox { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding-left: 0; background: none !important; cursor: pointer; font: 400 15px/1.2 var(--wp--preset--font-family--body); }
.facetwp-checkbox::before { content: ""; width: 20px; height: 20px; border: var(--tp-border-ui); flex: none; background: var(--wp--preset--color--paper); }
.facetwp-checkbox.checked::before { background: var(--wp--preset--color--ink); box-shadow: inset 0 0 0 4px var(--wp--preset--color--paper); }
.facetwp-checkbox .facetwp-counter { margin-left: auto; font-family: var(--wp--preset--font-family--mono); font-size: 12px; color: var(--wp--preset--color--stone); }
.facetwp-checkbox.disabled { opacity: 0.45; }
.facetwp-depth { padding-left: 32px; }
/* Subcategories (Kategori): collapsed under a chevron right of the counter; FacetWP
   (front.js) toggles .visible and expands the branch with the selected item itself. The
   "[+]/[-]" text is hidden, button state is aria-expanded (theme.js 5e). */
.facetwp-type-checkboxes .facetwp-depth { display: none; }
.facetwp-type-checkboxes .facetwp-depth.visible { display: block; }
.facetwp-checkbox .facetwp-expand { display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; margin: 0 -8px 0 -4px; font-size: 0; color: var(--wp--preset--color--ink); cursor: pointer; }
.facetwp-checkbox .facetwp-expand::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%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' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 0.15s; }
.facetwp-checkbox .facetwp-expand[aria-expanded="true"]::after { transform: rotate(180deg); }
/* Rows without subcategories — an empty slot in place of the chevron so counters line up in one column. */
.facetwp-facet:has(.facetwp-expand) .facetwp-checkbox:not(:has(.facetwp-expand))::after { content: ""; width: 24px; flex: none; }
.facetwp-checkbox .facetwp-expand:hover { background: var(--wp--preset--color--sand); }
.facetwp-checkbox .facetwp-expand:focus-visible { outline: 1px solid var(--wp--preset--color--accent); outline-offset: -1px; }
@media (prefers-reduced-motion: reduce) { .facetwp-checkbox .facetwp-expand::after { transition: none; } }
.facetwp-toggle { display: block; margin-top: 8px; font: 600 13px/1 var(--wp--preset--font-family--body); text-transform: uppercase; color: var(--wp--preset--color--accent); cursor: pointer; }
/* "Kategori": first 10 groups, the rest behind a button (theme.js §19). */
.tp-cat-hidden { display: none !important; }
.tp-cat-more { display: inline-block; margin: 10px 0 0; padding: 0; border: 0; background: none; font: 400 12px/1.5 var(--wp--preset--font-family--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.tp-cat-more:hover { color: var(--wp--preset--color--stone); }
.tp-cat-more:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 3px; }
.tp-drawer .facetwp-hierarchy_select { width: 100%; min-height: 44px; margin-bottom: 8px; border: var(--tp-border-ui); border-radius: 0; background: var(--wp--preset--color--paper); padding: 0 40px 0 12px; font: 500 15px/1 var(--wp--preset--font-family--body); color: var(--wp--preset--color--ink); }
/* Price slider (FacetWP + noUiSlider). Selectors with .facetwp-type-slider are more specific
   than the plugin's nouislider.css, which loads after the theme. Thin line, square handles with
   a text-colored border, values in mono under the line, "Återställ" as a text link. */
.facetwp-slider-wrap { padding: 14px 11px 0; }
.facetwp-type-slider .noUi-target { height: 2px; border: 0; border-radius: 0; box-shadow: none; background: var(--wp--preset--color--hairline); }
.facetwp-type-slider .noUi-connect { background: var(--wp--preset--color--ink); }
.facetwp-type-slider .noUi-horizontal .noUi-handle, .facetwp-type-slider .noUi-handle { width: 22px; height: 22px; top: -10px; right: -11px; border: 2px solid var(--wp--preset--color--ink); border-radius: 0; background: var(--wp--preset--color--paper); box-shadow: none; cursor: grab; transition: background-color 0.15s ease; }
.facetwp-type-slider .noUi-handle:hover, .facetwp-type-slider .noUi-active { background: var(--wp--preset--color--ink); }
.facetwp-type-slider .noUi-active { cursor: grabbing; }
.facetwp-type-slider .noUi-handle:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 3px; }
.facetwp-type-slider .noUi-handle::before, .facetwp-type-slider .noUi-handle::after { display: none; }
.facetwp-slider-label { display: block; margin-top: 22px; font: 500 14px/1.2 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--ink); font-variant-numeric: tabular-nums; }
.facetwp-type-slider .facetwp-slider-reset { display: inline-block; margin: 12px 0 0; padding: 0; border: 0; background: none; font: 400 12px/1.5 var(--wp--preset--font-family--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--stone); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.facetwp-type-slider .facetwp-slider-reset:hover { color: var(--wp--preset--color--ink); }
.facetwp-type-slider .facetwp-slider-reset.facetwp-hidden { display: none; }

/* Empty result */
.tp-empty { text-align: center; padding: 64px 16px; }
/* The empty listing renders inside the .facetwp-template grid (inc/facets.php) — full width. */
.tp-grid > li.tp-grid__empty { grid-column: 1 / -1; display: block; }
.tp-empty__title { font: 400 24px/1.2 var(--wp--preset--font-family--heading); text-transform: uppercase; margin: 0 0 8px; }
.tp-empty__hint { color: var(--wp--preset--color--stone); margin: 0 0 24px; }
.tp-empty__reset { min-height: 44px; padding: 0 24px; background: var(--wp--preset--color--ink); color: #fff; border: 0; font: 700 14px/1 var(--wp--preset--font-family--body); text-transform: uppercase; cursor: pointer; }
/* Empty search: popular categories as chips + phone. */
.tp-empty__label { margin: 0 0 12px; font-family: var(--wp--preset--font-family--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp--preset--color--stone); }
.tp-empty__cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 24px; padding: 0; max-width: 720px; list-style: none; }
.tp-empty__cats a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: var(--tp-border-ui); color: inherit; text-decoration: none; font-weight: 600; font-size: 14px; }
.tp-empty__cats a:hover { background: var(--wp--preset--color--sand); }
.tp-empty__contact { margin: 0 0 24px; }
.tp-empty__contact a { color: inherit; font-weight: 700; }

/* === Product grid ===================================== */
.tp-products { overflow: hidden; }
/* The compound selector ul.tp-grid.wp-block-post-template (0,2,1) is needed to override
   the plugin's post-template-responsive.css (.wp-block-post-template.qcom-post-template-responsive,
   0,2,0), which otherwise forces fixed 4 columns and a gap on desktop. */
.tp-grid, ul.tp-grid.wp-block-post-template { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; width: 100%; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px)  { .tp-grid, ul.tp-grid.wp-block-post-template { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .tp-grid, ul.tp-grid.wp-block-post-template { grid-template-columns: repeat(4, 1fr); } }
.tp-grid > li { margin: 0; display: flex; flex-direction: column; }

/* === Product card ===================================== */
.tp-card { position: relative; display: flex; flex-direction: column; flex: 1; border-right: var(--tp-border); border-bottom: var(--tp-border); background: var(--wp--preset--color--paper); }
.tp-card:hover { background: var(--wp--preset--color--mist); }
/* The plate keeps its square even without a photo (media not synced yet / no image). */
.tp-card__media { position: relative; margin: 16px 16px 0; aspect-ratio: 1 / 1; background: #f7f8fa; border: 1px solid var(--wp--preset--color--hairline); }
.tp-card__media .wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; }
.tp-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* "Bild saknas" placeholder — shared by the card and product gallery (PDP):
   desaturated brand shield mark on a #f7f8fa plate; caption only in the product gallery, not on the card. */
/* Card photo slider (inc/product.php + theme.js §22): horizontal scrolling with
   snap (swipe / touchpad), dots at the bottom always visible (they show there are several photos). */
.tp-slides { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.tp-slides::-webkit-scrollbar { display: none; }
.tp-slides > img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; scroll-snap-align: start; scroll-snap-stop: always; }
.tp-dots { position: absolute; left: 50%; bottom: 10px; z-index: 3; display: flex; align-items: center; gap: 5px; padding: 5px 8px; transform: translateX(-50%); background: rgb(255 255 255 / 0.92); border-radius: 999px; box-shadow: 0 1px 4px rgb(20 28 44 / 0.12); }
.tp-dots__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: #c3c9d4; cursor: pointer; transition: width 0.2s ease, background-color 0.2s ease; }
.tp-dots__dot:hover { background: var(--wp--preset--color--stone); }
.tp-dots__dot.is-active { width: 20px; background: var(--wp--preset--color--ink); }
.tp-dots__dot:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 2px; }
.tp-card__media figure { position: relative; }
/* Photo with slider sits above the card's link overlay, otherwise swipe/scroll and dots get no
   events. The photo itself is a link to the product anyway (figure > a). */
.tp-card__media:has([data-tp-slides]) { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .tp-dots__dot { transition: none; } }
.tp-card__media:not(:has(img)), .tp-product__gallery:not(:has(.qc-product-gallery)) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.tp-card__media:not(:has(img))::before, .tp-product__gallery:not(:has(.qc-product-gallery))::before { content: ""; width: 28%; max-width: 128px; aspect-ratio: 356 / 403; background: url("assets/img/logo-mark.svg?v=2") no-repeat center / contain; filter: grayscale(1); opacity: 0.18; }
.tp-product__gallery:not(:has(.qc-product-gallery))::after { content: "Bild saknas"; font: 400 11px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--stone); }
.tp-product__gallery:not(:has(.qc-product-gallery)) { aspect-ratio: 1 / 1; background: #f7f8fa; }
.tp-product__gallery:not(:has(.qc-product-gallery))::after { font-size: 13px; }
.tp-card__badge { position: absolute; top: 0; left: 0; z-index: 2; display: grid; place-items: center; min-width: 48px; min-height: 48px; background: var(--wp--preset--color--sale); color: #fff; font-family: var(--wp--preset--font-family--heading); font-size: 15px; border-radius: 0; }
.tp-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 16px; }
.tp-card__body > * { margin-block: 0; } /* WP block spacing (1.2rem) was added to the gap — keep only the gap */
.tp-card__brand { font-family: var(--wp--preset--font-family--mono); font-size: 13px; letter-spacing: 0.04em; color: var(--wp--preset--color--stone); }
.tp-card__brand img { display: block; max-height: 22px; width: auto; }
.tp-card__title { margin: 0; font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 16px; line-height: 1.35; text-transform: none; letter-spacing: 0; } /* title in normal case (not caps) */
.tp-card__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
/* The whole card is a link: the title's ::after stretches over .tp-card (position: relative).
   The plugin's stretched-link doesn't work — it expects the is-qcom-product-card-link class on the grid.
   Buttons and other links are raised above the overlay; the sale badge lets clicks pass through to it. */
.tp-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tp-card__title a:focus-visible { outline: none; }
.tp-card__title a:focus-visible::after { outline: 1px solid var(--wp--preset--color--accent); outline-offset: -1px; }
.tp-card__actions, .tp-card__brand a { position: relative; z-index: 2; }
.tp-card__badge { pointer-events: none; }
.tp-card__code, .tp-card__stock { font-family: var(--wp--preset--font-family--mono); font-size: 12px; color: var(--wp--preset--color--stone); }
.tp-card__stock { margin-top: auto; display: flex; align-items: center; gap: 6px; }
.tp-card__stock[data-qcom-stock-status-type="1"], .tp-card__stock[data-qcom-stock-status-type="2"] { color: var(--wp--preset--color--stock); }
.tp-card__price-now { font-weight: 600; font-size: 22px; letter-spacing: -0.01em; color: var(--wp--preset--color--ink); }
.tp-card__price-was { font-family: var(--wp--preset--font-family--mono); font-size: 13px; color: var(--wp--preset--color--stone); text-decoration: line-through; }
/* Discounted price — Sale color (only when a struck-through old price is shown next to it). */
.tp-card__price:has(.tp-card__price-was:not(:empty)) .tp-card__price-now { color: var(--wp--preset--color--sale); }
.tp-card__vat { margin: 0; font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--wp--preset--color--stone); }
.tp-card__actions { border-top: var(--tp-border); gap: 0 !important; margin-top: 0; }
.tp-card__buy { flex: 1; }
.tp-card__buy .wp-block-button__link, .tp-card__buy .qcom-add-to-cart-button__btn, .tp-card__buy button, .tp-card__buy a { display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 16px; border: none; border-radius: 0; background: none; color: var(--wp--preset--color--ink); font-weight: 700; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
/* Hover on the whole card: the accent background "slides" into the buy button from below.
   Direction is controlled by the transform below: translateY(101%) — from below, translateX(-101%) — from the left. */
.tp-card__buy .wp-block-button__link, .tp-card__buy .qcom-add-to-cart-button__btn, .tp-card__buy button, .tp-card__buy a { position: relative; isolation: isolate; overflow: hidden; transition: color 0.22s ease; }
.tp-card__buy .wp-block-button__link::before, .tp-card__buy .qcom-add-to-cart-button__btn::before, .tp-card__buy button::before, .tp-card__buy a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wp--preset--color--accent); transform: translateY(101%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
.tp-card:hover .tp-card__buy .wp-block-button__link, .tp-card:hover .tp-card__buy .qcom-add-to-cart-button__btn, .tp-card:hover .tp-card__buy button, .tp-card:hover .tp-card__buy a,
.tp-card__buy .wp-block-button__link:hover, .tp-card__buy .qcom-add-to-cart-button__btn:hover, .tp-card__buy button:hover, .tp-card__buy a:hover,
.tp-card__buy .wp-block-button__link:focus-visible, .tp-card__buy .qcom-add-to-cart-button__btn:focus-visible, .tp-card__buy button:focus-visible, .tp-card__buy a:focus-visible { color: #fff; }
.tp-card:hover .tp-card__buy .wp-block-button__link::before, .tp-card:hover .tp-card__buy .qcom-add-to-cart-button__btn::before, .tp-card:hover .tp-card__buy button::before, .tp-card:hover .tp-card__buy a::before,
.tp-card__buy .wp-block-button__link:hover::before, .tp-card__buy .qcom-add-to-cart-button__btn:hover::before, .tp-card__buy button:hover::before, .tp-card__buy a:hover::before,
.tp-card__buy .wp-block-button__link:focus-visible::before, .tp-card__buy .qcom-add-to-cart-button__btn:focus-visible::before, .tp-card__buy button:focus-visible::before, .tp-card__buy a:focus-visible::before { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tp-card__buy .wp-block-button__link, .tp-card__buy .qcom-add-to-cart-button__btn, .tp-card__buy button, .tp-card__buy a,
  .tp-card__buy .wp-block-button__link::before, .tp-card__buy .qcom-add-to-cart-button__btn::before, .tp-card__buy button::before, .tp-card__buy a::before { transition: none; }
}
/* Touch screens (no hover): "Köp" has a background right away (light tonal), otherwise it's not clear
   it's a button; press — a slightly darker tone. */
@media (hover: none) {
  .tp-card__buy .wp-block-button__link, .tp-card__buy .qcom-add-to-cart-button__btn, .tp-card__buy button, .tp-card__buy a { color: var(--wp--preset--color--ink); }
  .tp-card__buy .wp-block-button__link::before, .tp-card__buy .qcom-add-to-cart-button__btn::before, .tp-card__buy button::before, .tp-card__buy a::before { transform: none; background: #eef1f6; } /* light tonal background instead of dark */
  .tp-card__buy :is(.wp-block-button__link, .qcom-add-to-cart-button__btn, button, a):active::before { background: #e4e7ed; }
  /* "Add to wishlist" — white (no background) to differ from the main "Köp" action; press — light tone */
  .tp-card .tp-card__wish :is(button, .qcom-wishlist__add-button):active, .tp-card .tp-card__wish-fallback:active { background: #eef1f6; }
}
.tp-card__wish { flex: none; }
.tp-card__wish button, .tp-card__wish .qcom-wishlist__add-button { display: grid; place-items: center; width: 56px; min-height: 56px; border: none; border-left: var(--tp-border); border-radius: 0; background: none; color: var(--wp--preset--color--ink); cursor: pointer; }
/* "+" on the right of the buy button, as in the mockup (LEGG I KURV … +) */
.tp-card__buy .qcom-add-to-cart-button__btn::after { content: "+"; font-size: 20px; font-weight: 400; line-height: 1; }
/* Fallback heart (link to /account/): the plugin's wishlist block renders for everyone
   with inline display:none, and only its view.js shows the button (display: inline-flex) for
   a logged-in customer linked to the ERP. So the fallback is hidden only when the plugin's
   button is actually visible — keyed on its inline style, no theme JS. */
.tp-card__wish-fallback { display: grid; place-items: center; width: 56px; min-height: 56px; flex: none; border-left: var(--tp-border); color: var(--wp--preset--color--ink); }
/* Phone (2 columns of ~180px): denser card — smaller padding, title and price,
   narrower heart; "Köp +" stays on one line. */
@media (max-width: 499px) {
  .tp-card__media { margin: 10px 10px 0; }
  .tp-card__body { gap: 6px; padding: 10px 10px 12px; }
  /* title — max 2 lines with "…" (h3 is not positioned, so the a::after link overlay isn't clipped) */
  .tp-card__title.wp-block-post-title { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; } /* WP sets display: flow-root */
  .tp-card__title.wp-block-post-title a { display: inline; } /* inline-block breaks line clamping */
  .tp-card__price-now { font-size: 18px; }
  .tp-card__price .tp-card__price-now .qcom-price-amount__label { display: none; } /* "(inkl. moms)" hidden on phone — saves card height */
  .tp-card__code, .tp-card__stock, .tp-fits.is-compact { font-size: 11px; }
  .tp-card__buy .qcom-add-to-cart-button__btn, .tp-card__buy button, .tp-card__buy a { min-height: 48px; padding: 0 10px; font-size: 13px; }
  .tp-card__actions .tp-card__wish, .tp-card__actions .tp-card__wish-fallback { display: none !important; } /* "wishlist" hidden in the grid on phone — "Köp" full width; wishlisting is available on the product page */
  /* "Köp" — compact 44×44 square button with a cart "+" icon to the right of the price (instead of a full-width bar).
     The "Köp"/"Välj" text stays for screen readers; products with variants get an arrow (leads to the product page). */
  .tp-card__actions { position: absolute; right: 10px; bottom: 12px; z-index: 2; width: auto; border-top: 0; }
  .tp-card__price { min-height: 44px; padding-right: 52px; justify-content: flex-end; }
  .tp-card__buy .qcom-add-to-cart-button__btn { justify-content: center; width: 44px; min-height: 44px; height: 44px; padding: 0; }
  .tp-card__buy .qcom-add-to-cart-button__btn > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .tp-card__buy .qcom-add-to-cart-button__btn::before { transform: none; background: #eef1f6; }
  .tp-card__buy .qcom-add-to-cart-button__btn::after { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M3 4h2.5l2.2 10.5h10.6L20.5 8H7'/%3E%3Ccircle cx='9.5' cy='19' r='1.5'/%3E%3Ccircle cx='17' cy='19' r='1.5'/%3E%3Cpath d='M14 2.5v5M11.5 5h5'/%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' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M3 4h2.5l2.2 10.5h10.6L20.5 8H7'/%3E%3Ccircle cx='9.5' cy='19' r='1.5'/%3E%3Ccircle cx='17' cy='19' r='1.5'/%3E%3Cpath d='M14 2.5v5M11.5 5h5'/%3E%3C/svg%3E") center / contain no-repeat; }
  .tp-card__buy[data-qcom-has-variants="1"] .qcom-add-to-cart-button__btn::after { width: 18px; height: 18px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }
  .tp-card__buy .qcom-add-to-cart-button__btn, .tp-card:hover .tp-card__buy .qcom-add-to-cart-button__btn, .tp-card__buy .qcom-add-to-cart-button__btn:hover { color: var(--wp--preset--color--ink); }
  .tp-card__buy .qcom-add-to-cart-button__btn:active::before { background: #e4e7ed; }
  .tp-fits__tip { max-width: 180px; }
}
/* Card hover — the same "fill from below" as the buy button, but dark (ink):
   accent is already taken by buying. A wishlisted heart stays accent — visible on ink. */
.tp-card__wish button, .tp-card__wish-fallback { position: relative; isolation: isolate; overflow: hidden; transition: color 0.22s ease; }
.tp-card__wish button::before, .tp-card__wish-fallback::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wp--preset--color--ink); transform: translateY(101%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
.tp-card:hover .tp-card__wish button, .tp-card:hover .tp-card__wish-fallback,
.tp-card__wish button:focus-visible, .tp-card__wish-fallback:focus-visible { color: #fff; }
.tp-card:hover .tp-card__wish button::before, .tp-card:hover .tp-card__wish-fallback::before,
.tp-card__wish button:focus-visible::before, .tp-card__wish-fallback:focus-visible::before { transform: none; }
.tp-card:hover .tp-card__wish .qcom-wishlist__add-button--added { color: var(--wp--preset--color--accent); }
/* Touch screens: "sticky" hover after tapping a card — don't fill the heart dark or turn the "Köp" text
   white (hover rules above; this block comes after them to override) */
@media (hover: none) {
  .tp-card:hover .tp-card__wish button:not(.qcom-wishlist__add-button--added), .tp-card:hover .tp-card__wish-fallback { color: var(--wp--preset--color--ink); } /* a wishlisted item keeps its color */
  .tp-card:hover .tp-card__wish button::before, .tp-card:hover .tp-card__wish-fallback::before { transform: translateY(101%); }
  .tp-card:hover .tp-card__buy :is(.wp-block-button__link, .qcom-add-to-cart-button__btn, button, a), .tp-card__buy :is(.wp-block-button__link, .qcom-add-to-cart-button__btn, button, a):hover { color: var(--wp--preset--color--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .tp-card__wish button, .tp-card__wish-fallback, .tp-card__wish button::before, .tp-card__wish-fallback::before { transition: none; }
}
.tp-card__actions:has(.qcom-wishlist-button-component:not([style*="display: none"]):not([style*="display:none"])) .tp-card__wish-fallback { display: none; }
/* The block's inline styling (white bordered circle, padding 8px) — into the card's language. */
.tp-card__wish.qcom-wishlist-button-component { align-items: stretch !important; background: none !important; border: 0 !important; border-radius: 0 !important; }
.tp-card__wish .qcom-wishlist__add-button { padding: 0 !important; }
.tp-card__wish .qcom-wishlist__icon { width: 19px; height: 19px; }
.qcom-wishlist__add-button--added { color: var(--wp--preset--color--accent); }
/* Desktop card sizes per the mockup (cardPad 24, name 18, price 24, badge 56) */
@media (min-width: 760px) {
  .tp-card__media { margin: 24px 24px 0; }
  .tp-card__body { padding: 18px 24px; }
  .tp-card__title { font-size: 18px; }
  .tp-card__price-now { font-size: 24px; }
  .tp-card__badge { min-width: 56px; min-height: 56px; }
  .tp-card__buy .wp-block-button__link, .tp-card__buy .qcom-add-to-cart-button__btn, .tp-card__buy button, .tp-card__buy a { padding: 0 24px; }
}

/* === Load more / pagination =========================== */
.tp-loadmore { padding: 32px 16px 44px; gap: 14px; }
.tp-loadmore .qcom-button, .tp-loadmore .wp-block-button__link, .tp-loadmore .facetwp-load-more { border-radius: 0; background: var(--wp--preset--color--ink); color: #fff; font-family: var(--wp--preset--font-family--heading); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; min-height: 54px; padding: 0 44px; border: none; cursor: pointer; }
.tp-loadmore .qcom-button:hover, .tp-loadmore .wp-block-button__link:hover, .tp-loadmore .facetwp-load-more:hover { background: var(--wp--preset--color--accent); }
/* We don't load FacetWP's front.css (inc/facets.php), and it uses this class to hide
   "Visa fler" on the last page and overflow/"See less" in soft limit. */
.facetwp-hidden { display: none !important; }
.tp-progress { width: min(100%, 320px); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tp-progress__text { margin: 0; font-family: var(--wp--preset--font-family--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--stone); }
.tp-progress__text span { color: var(--wp--preset--color--ink); font-weight: 700; }
.tp-progress__bar { width: 100%; height: 4px; background: var(--wp--preset--color--hairline); overflow: hidden; }
.tp-progress__bar span { display: block; height: 100%; background: var(--wp--preset--color--ink); transition: width 0.3s ease; }
@media (prefers-reduced-motion: reduce) { .tp-progress__bar span { transition: none; } }
.tp-pagination a, .tp-pagination .page-numbers { color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--mono); }

/* === Cart button (header) ==============================
   Real DOM (verified live, Playwright, http://truckparts.local/):
   QuickCommerce's view.js strips the `.qcom-minicart` class from the mount
   wrapper right after hydration (same behaviour documented in Task 3), so
   the wrapper is targeted positionally as the last child of .tp-headerbar
   (confirmed against parts/header.html: <!-- wp:quickcommerce/cart /--> is
   the final block inside .tp-headerbar). The hydrated button is
   button.qcom-minicart__trigger (not "button:first-child" / [role=button]
   as the brief guessed); its icon+count wrapper is
   .qcom-minicart__trigger-wrap; the count pill is .qcom-minicart__badge
   (not .qcom-badge as the brief guessed). */
.tp-headerbar > div:last-child { flex: none; display: flex; align-items: stretch; }
.tp-headerbar .qcom-minicart__trigger { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 56px; min-height: 56px; padding: 0 16px; background: var(--wp--preset--color--accent); color: #fff; border: none; border-left: var(--tp-border); border-radius: 0; cursor: pointer; }
.tp-headerbar .qcom-minicart__trigger:hover { background: var(--wp--preset--color--accent-deep); }
.tp-headerbar .qcom-minicart__badge { background: var(--wp--preset--color--signal); color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--mono); font-weight: 600; border-radius: 0; }
@media (min-width: 760px) { .tp-headerbar .qcom-minicart__trigger { padding: 0 28px; } }

/* === Cart drawer =======================================
   Real DOM (verified live, drawer opened via the trigger above):
   .qcom-drawer__content also carries qcom-drawer__content--right and
   qcom-minicart__drawer (radix dialog, role="dialog"); its border-radius
   is already 0px from the plugin's own styles, so no !important override
   was needed there. There is no .qcom-button--default / .qcom-button--outline
   anywhere in this drawer (the brief's guess) — the single primary CTA is
   button.qcom-minicart__checkout-btn ("Proceed to Checkout"); there is no
   secondary/outline button in the drawer to style. Item rows are
   div.qcom-cart-item__row > div.qcom-cart-item (both real .qcom-cart-item
   as guessed, plus a .qcom-cart-item__row animation wrapper the brief
   didn't know about — the hairline separator is applied to the row so
   spacing/border are on the same box). */
.qcom-drawer__content { border-left: var(--tp-border-2); border-radius: 0; }
/* The plugin's own CSS-in-JS (#quickcommerce-cart-style-inline-css) sets
   background-color/font-family on .qcom-minicart__checkout-btn with
   !important (confirmed by inspecting the injected <style> tag's cssText),
   so a higher-specificity theme selector alone is not enough for those two
   properties — !important is used here as the documented last resort.
   border-radius and text-transform are NOT !important in the plugin's CSS,
   so those apply from specificity alone. */
.qcom-drawer__content .qcom-minicart__checkout-btn { background: var(--wp--preset--color--accent) !important; border-radius: 0; text-transform: uppercase; font-family: var(--wp--preset--font-family--heading) !important; letter-spacing: 0.04em; }
.qcom-drawer__content .qcom-minicart__checkout-btn:hover { background: var(--wp--preset--color--accent-deep) !important; }
.qcom-drawer__title { font-family: var(--wp--preset--font-family--heading); text-transform: uppercase; font-size: 15px; letter-spacing: 0.04em; color: var(--wp--preset--color--ink); }
.qcom-cart-item__row { border-bottom: 1px solid var(--wp--preset--color--hairline); padding-bottom: 20px; margin-bottom: 20px; }
.qcom-cart-item__row:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
/* Square corners throughout the drawer's interactive controls, consistent
   with the theme's no-radius language used elsewhere (.tp-card, .tp-iconlink). */
.qcom-drawer__content .qcom-cart-qty__btn,
.qcom-drawer__content .qcom-cart-item__delete,
.qcom-drawer__content .qcom-drawer__close { border-radius: 0; }
/* Plugin's default close button renders at 40x40px; bump to the 44px
   minimum tap target without touching its icon/position (absolute,
   top:24px right:16px, set by the plugin). */
.qcom-drawer__close { min-width: 44px; min-height: 44px; }
/* Mobile: no extra rule needed — the plugin's own inline style already sets
   max-width: min(640px, 100vw) on .qcom-drawer__content, so the drawer is
   already full-width below 640px viewports. Verified live at 375px. */

/* === Forside (front-page.html) ================================= */
.tp-fp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px 20px; flex-wrap: wrap; padding: 20px 16px; border-bottom: var(--tp-border); }
/* wpautop wraps the subheading in a <p> with theme margins — the heading became ~150px tall. */
.tp-fp-head p { margin: 0; }
@media (min-width: 760px) { .tp-fp-head { padding: 24px 48px; } }
.tp-fp-head h2 { margin: 0 0 2px; font-family: var(--wp--preset--font-family--heading); font-size: clamp(24px, 2.4vw, 32px); text-transform: uppercase; letter-spacing: 0.01em; }
.tp-fp-sub { font-size: 15px; color: var(--wp--preset--color--stone); }
/* Phone: heading and arrows/"Se alla" on one line, more compact spacing and font. */
@media (max-width: 759px) {
	.tp-fp-head { flex-wrap: nowrap; gap: 12px; padding: 14px 16px; }
	.tp-fp-head > div:first-child { min-width: 0; }
	.tp-fp-head h2 { font-size: clamp(14px, 4.5vw, 22px); line-height: 1.15; white-space: nowrap; }
	.tp-fp-sub { display: block; margin-top: 2px; font-size: 13px; line-height: 1.3; }
	.tp-fp-head > :last-child:not(:first-child) { flex: none; }
	.tp-fp-head .tp-car-arrows button { width: 30px; height: 30px; font-size: 13px; line-height: 1; padding: 0; }
	.tp-fp-head > a, .tp-fp-head > :last-child a { font-size: 11px; letter-spacing: 0.08em; white-space: nowrap; }
}
.tp-fp-kicker { font-family: var(--wp--preset--font-family--mono); font-size: 13px; letter-spacing: 0.12em; color: var(--wp--preset--color--accent); text-transform: uppercase; }
.tp-fp-link { font-family: var(--wp--preset--font-family--mono); font-size: 14px; letter-spacing: 0.08em; text-decoration: none; white-space: nowrap; color: var(--wp--preset--color--ink); }
.tp-fp-link:hover { color: var(--wp--preset--color--accent); }
/* Section dividers — 1px, like the inner lines of the category page. */
.tp-fp-section { border-bottom: var(--tp-border); }
/* WP blockGap (margin-block-start on flow-group children) breaks continuous
   borders inside sections — reset it, spacing here comes from padding. */
.tp-fp-section > * { margin-block-start: 0; }
/* Sections whose last row is a card grid with its own bottom borders:
   no section border-bottom, otherwise the line doubles. */
.tp-fp-section:has(.tp-brands__row), .tp-fp-section:has(.tp-products), .tp-fp-section.tp-cta-blue { border-bottom: none; }

/* Custom home page sections (home-* template parts, Customizer → Startsida → Ordning) */
.tp-part--padded { padding: 32px 16px; }
@media (min-width: 760px) { .tp-part--padded { padding: 32px 48px; } }
.tp-sec-part > .wp-block-template-part > :first-child { margin-block-start: 0; }
.tp-sec-part > .wp-block-template-part > :last-child { margin-block-end: 0; }

/* Sections appear on scroll (Customizer → Startsida → Animation; theme.js, 13).
   .is-anim-pending is set only by JS and only on sections below the fold — without JS everything is visible. */
.tp-anim .tp-fp-section { transition: opacity var(--tp-anim-dur, 600ms) ease-out, transform var(--tp-anim-dur, 600ms) cubic-bezier(0.2, 0.7, 0.2, 1); }
.tp-anim .tp-fp-section.is-anim-pending { opacity: 0; }
.tp-anim--up .tp-fp-section.is-anim-pending { transform: translateY(24px); }
.tp-anim--zoom .tp-fp-section.is-anim-pending { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .tp-anim .tp-fp-section { transition: none; }
  .tp-anim .tp-fp-section.is-anim-pending { opacity: 1; transform: none; }
}

/* Fordonsval */
/* Until sync links products to models, the facet is empty — hide the vehicle
   selector and "Din bil" sections so bare headings don't show. */
.tp-vs:has(.facetwp-facet-qcom_model_hierarchy.is-empty):not(:has([data-tp-vs-current])) { display: none; }
.tp-models:not(:has(.tp-mcard, .tp-orbit__item)) { display: none; }
.tp-vs { background: #fff; }
.tp-vs__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--tp-line); }
@media (min-width: 760px) { .tp-vs__head { padding: 14px 48px; } }
.tp-vs__head h2 { margin: 0; font-family: var(--wp--preset--font-family--heading); font-size: 19px; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.01em; }
.tp-vs__dot { width: 10px; height: 10px; background: var(--wp--preset--color--accent); flex: none; }
.tp-vs__row { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; padding: 18px 16px 20px; }
.tp-vs__row > * { margin-block: 0 !important; } /* is-layout-flow block gap pushed the button down relative to the selects */
@media (min-width: 760px) { .tp-vs__row { padding: 18px 48px 20px; } }
.tp-vs .qcom-model-filter { flex: 1 1 0; min-width: min(480px, 100%); display: flex; align-items: stretch; }
.tp-vs .qcom-model-filter > * { flex: 1; }
.tp-vs .facetwp-facet { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 !important; }
.tp-vs .facetwp-hierarchy_select { flex: 1 1 150px; min-width: 150px; height: 54px; box-sizing: border-box; border: 1px solid var(--wp--preset--color--ink); border-radius: 0; background: #fff; font-size: 16px; font-weight: 600; padding: 0 48px 0 18px; color: var(--wp--preset--color--ink); cursor: pointer; }
/* Custom chevron instead of the native one (which sits flush against the right border) */
.tp-vs .facetwp-hierarchy_select, .tp-drawer .facetwp-hierarchy_select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141c2c' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 18px; }
.tp-vs .facetwp-hierarchy_select.is-disabled, .tp-vs .facetwp-hierarchy_select:disabled { opacity: 1; color: var(--wp--preset--color--stone); border-color: var(--wp--preset--color--hairline); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3aab7' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
/* Vehicle selector while loading (theme.js 5d + placeholder in facets.php): FacetWP's
   semi-transparent .is-loading is disabled — the selects are disabled anyway, and the level being filled
   shows a spinner in place of the chevron. */
.facetwp-facet-qcom_model_hierarchy.is-loading { opacity: 1; }
.facetwp-facet-qcom_model_hierarchy .facetwp-hierarchy_select:disabled { cursor: default; }
.tp-drawer .facetwp-hierarchy_select:disabled { color: var(--wp--preset--color--stone); border-color: var(--wp--preset--color--hairline); }
.facetwp-facet-qcom_model_hierarchy .facetwp-hierarchy_select.tp-hs-pending { cursor: progress; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='2.5'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23e4e7ed'/%3E%3Cpath d='M21 12a9 9 0 0 0-9-9' stroke='%23141c2c'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") !important; }
@media (prefers-reduced-motion: reduce) {
  .facetwp-facet-qcom_model_hierarchy .facetwp-hierarchy_select.tp-hs-pending { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23141c2c'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E") !important; }
}
/* Search panel in the vehicle select (theme.js 5f): opens below the select, lives in <body>. */
.tp-combo { position: fixed; z-index: 1000; display: flex; flex-direction: column; max-height: min(360px, 60vh); box-sizing: border-box; border: var(--tp-border-ui); background: var(--wp--preset--color--paper); box-shadow: 0 8px 24px rgb(20 28 44 / 0.12); }
.tp-combo.is-above { flex-direction: column-reverse; }
.tp-combo__search { flex: none; width: 100%; height: 44px; box-sizing: border-box; margin: 0; border: 0; border-bottom: 1px solid var(--wp--preset--color--hairline); border-radius: 0; padding: 0 12px 0 38px; background: var(--wp--preset--color--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141c2c' stroke-width='2' stroke-linecap='square'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 12px center / 16px; font: 500 15px/1 var(--wp--preset--font-family--body); color: var(--wp--preset--color--ink); }
.tp-combo.is-above .tp-combo__search { border-bottom: 0; border-top: 1px solid var(--wp--preset--color--hairline); }
.tp-combo__search:focus { outline: none; }
.tp-combo__search::placeholder { color: var(--wp--preset--color--stone); }
.tp-combo__list { flex: 1 1 auto; min-height: 0; margin: 0; padding: 4px 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.tp-combo__opt { display: flex; align-items: center; min-height: 36px; padding: 0 12px; font: 500 14px/1.2 var(--wp--preset--font-family--body); color: var(--wp--preset--color--ink); cursor: pointer; }
.tp-combo__opt[hidden] { display: none; }
.tp-combo__opt.is-placeholder { color: var(--wp--preset--color--stone); }
.tp-combo__opt.is-active { background: var(--wp--preset--color--sand); }
.tp-combo__opt[aria-selected="true"] { font-weight: 700; box-shadow: inset 3px 0 0 var(--wp--preset--color--accent); }
.tp-combo__empty { margin: 0; padding: 12px; font: 400 14px/1.3 var(--wp--preset--font-family--body); color: var(--wp--preset--color--stone); }
/* The "Visa passande delar" button sits in one row with the selects (theme.js: "Min bil"). */
.tp-vs .tp-vs__submit { height: 54px; min-height: 54px; box-sizing: border-box; padding: 0 clamp(16px, 2vw, 30px); border: 1px solid var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--heading); font-weight: 400; font-size: clamp(13px, 1.1vw, 15px); }
.tp-vs .tp-vs__submit:disabled { border-color: var(--wp--preset--color--hairline); }
/* Phone: heading on one line, selects and button stacked full width. */
@media (max-width: 759px) {
	.tp-vs__head { flex-wrap: nowrap; gap: 10px; }
	.tp-vs__head h2 { white-space: nowrap; font-size: clamp(11px, 3.6vw, 19px); }
	.tp-vs__row { flex-direction: column; align-items: stretch; gap: 10px; }
	.tp-vs .qcom-model-filter { min-width: 0; flex: none; width: 100%; }
	.tp-vs .qcom-model-filter.is-horizontal .facetwp-facet { flex-direction: column; gap: 10px; }
	.tp-vs .qcom-model-filter.is-horizontal .facetwp-hierarchy_select { flex: none; width: 100%; min-width: 0; }
	.tp-vs .tp-vs__submit { width: 100%; }
}

/* Hero */
.tp-hero { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .tp-hero { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.tp-hero__content { display: flex; flex-direction: column; justify-content: space-between; padding: 32px 16px 28px; }
@media (min-width: 760px) { .tp-hero__content { padding: 32px 48px 28px; } }
@media (min-width: 900px) { .tp-hero__content { border-right: var(--tp-border); } }
.tp-hero__kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-family: var(--wp--preset--font-family--mono); font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; }
.tp-hero__kicker::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--wp--preset--color--accent); }
.tp-hero__slogan { margin: 0; font-family: var(--wp--preset--font-family--heading); font-size: clamp(32px, 4.4vw, 64px); line-height: 0.94; letter-spacing: -0.01em; text-transform: uppercase; }
.tp-hero__slogan em { font-style: normal; color: var(--wp--preset--color--accent); }
.tp-hero__lead { margin: 18px 0 0; font-size: clamp(14px, 1.2vw, 17px); line-height: 1.5; max-width: 40ch; color: #3e4656; }
.tp-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.tp-hero__cta a { display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; text-decoration: none; font-size: 14px; letter-spacing: 0.03em; border: 1px solid var(--wp--preset--color--ink); white-space: nowrap; }
.tp-hero__cta a.is-primary { background: var(--wp--preset--color--accent); color: #fff; font-family: var(--wp--preset--font-family--heading); }
.tp-hero__cta a.is-primary:hover { background: var(--wp--preset--color--accent-deep); }
.tp-hero__cta a.is-secondary { color: var(--wp--preset--color--ink); font-weight: 700; }
.tp-hero__cta a.is-secondary:hover { background: var(--wp--preset--color--mist); }
.tp-hero__media { position: relative; min-height: 300px; }
.tp-hero__media figure { position: absolute; inset: 0; margin: 0; }
.tp-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; }
/* Dark Hero background (Customizer → Bakgrundsfärg) — light text */
.tp-hero__content.is-dark { color: #fff; }
.tp-hero__content.is-dark .tp-hero__slogan em { color: var(--wp--preset--color--signal); }
.tp-hero__content.is-dark .tp-hero__lead { color: rgb(255 255 255 / 0.82); }
.tp-hero__content.is-dark .tp-hero__cta a { border-color: #fff; }
.tp-hero__content.is-dark .tp-hero__cta a.is-secondary { color: #fff; }
.tp-hero__content.is-dark .tp-hero__cta a.is-secondary:hover { background: rgb(255 255 255 / 0.12); }
.tp-hero__content.is-dark .tp-hero__kicker::before { background: currentColor; }
/* No banner (Customizer → Hero) — text full width */
.tp-hero__media:not(:has(img, video)) { display: none; }
@media (min-width: 900px) { .tp-hero:not(:has(.tp-hero__media img)) { grid-template-columns: 1fr; } .tp-hero:not(:has(.tp-hero__media img)) .tp-hero__content { border-right: 0; } }

/* Hero: rörlig (Customizer → Hero → "Rörlig hero", markup — tp_hero_stage_html,
   logic — theme.js §22). Film fills the frame, text over a dark gradient on the left
   (from 900px) or below the frame (mobile). The film fades in over the poster banner. */
.tp-hero:has(.tp-hero__stage) { grid-template-columns: 1fr; background: var(--wp--preset--color--ink); color: #fff; }
.tp-hero:has(.tp-hero__stage) .tp-hero__media { order: -1; min-height: 0; height: clamp(340px, 112vw, 72svh); }
.tp-hero:has(.tp-hero__stage) .tp-hero__content { border-right: 0; }
.tp-hero__stage { position: absolute; inset: 0; overflow: hidden; background: var(--wp--preset--color--ink); }
.tp-hero__stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgb(20 28 44 / 0.5), rgb(20 28 44 / 0) 30%); }
.tp-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; }
.tp-hero__stage.is-video .tp-hero__video { opacity: 1; }
@media (min-width: 900px) {
	.tp-hero:has(.tp-hero__stage) > * { grid-area: 1 / 1; }
	/* As in car brand videos — frame at screen height below the header (--tp-header-h — theme.js §1b). */
	.tp-hero:has(.tp-hero__stage) .tp-hero__media { height: auto; min-height: clamp(560px, calc(100svh - var(--tp-header-h, 88px)), 1000px); }
	.tp-hero:has(.tp-hero__stage) .tp-hero__content { position: relative; z-index: 2; max-width: min(48%, 660px); padding: 56px 48px 44px; pointer-events: none; }
	.tp-hero:has(.tp-hero__stage) .tp-hero__content a { pointer-events: auto; }
	/* The frame is rarely exactly 16:9 — crop more on the left (text is there); the right part with details and captions baked into the film stays visible. */
	.tp-hero__stage :is(img, .tp-hero__video) { object-position: 72% 50%; }
	.tp-hero__stage::before { background: linear-gradient(rgb(20 28 44 / 0.2), rgb(20 28 44 / 0.2)), linear-gradient(90deg, rgb(20 28 44 / 0.85) 0%, rgb(20 28 44 / 0.6) 30%, rgb(20 28 44 / 0) 56%), linear-gradient(to top, rgb(20 28 44 / 0.45), rgb(20 28 44 / 0) 30%); }
}
/* Phone: film fills the screen below the header, text and buttons over it at the bottom.
   Mobile film 1:2: sharp frame with the car in the top ~55 %, below — a blurred continuation under the text. */
@media (max-width: 759px) {
	.tp-hero:has(.tp-hero__stage) > * { grid-area: 1 / 1; }
	.tp-hero:has(.tp-hero__stage) .tp-hero__media { height: calc(100svh - var(--tp-header-h, 56px)); min-height: 560px; max-height: 960px; }
	.tp-hero:has(.tp-hero__stage) .tp-hero__content { position: relative; z-index: 2; align-self: end; padding-bottom: 32px; pointer-events: none; }
	.tp-hero:has(.tp-hero__stage) .tp-hero__content a { pointer-events: auto; }
	.tp-hero:has(.tp-hero__stage) .tp-hero__cta { flex-wrap: nowrap; gap: 10px; margin-top: 20px; }
	.tp-hero:has(.tp-hero__stage) .tp-hero__cta a { flex: 1 1 0; min-width: 0; justify-content: center; padding: 14px 8px; font-size: clamp(11px, 3.4vw, 13px); letter-spacing: 0.02em; }
	.tp-hero__stage :is(img, .tp-hero__video) { object-position: 50% 0; }
	.tp-hero__stage::before { background: linear-gradient(to top, rgb(20 28 44 / 0.94) 0%, rgb(20 28 44 / 0.8) 28%, rgb(20 28 44 / 0) 52%); }
}

/* Laptop/desktop: the hero breaks out of the frame to full window width, but no wider than 1920px
   (the film and banner size — wider they'd stretch and blur). Text stays
   on the frame line: --tp-hero-off — distance from the hero edge to the frame edge.
   --tp-vw — window width without the scrollbar (theme.js §4b); before JS — 100vw. */
@media (min-width: 1024px) {
	.tp-hero {
		--tp-hero-w: min(1920px, var(--tp-vw, 100vw));
		--tp-hero-off: calc((var(--tp-hero-w) - min(var(--tp-frame-max), var(--tp-vw, 100vw) - 2 * var(--tp-gutter))) / 2);
		box-sizing: border-box; width: var(--tp-hero-w); max-width: none; margin-inline: calc(50% - var(--tp-hero-w) / 2);
	}
	.tp-hero__content { padding-left: calc(var(--tp-hero-off) + 48px); }
	.tp-hero:has(.tp-hero__stage) .tp-hero__content { max-width: calc(var(--tp-hero-off) + min(44%, 660px)); padding-left: calc(var(--tp-hero-off) + 48px); }
}
.wp-site-blocks { overflow-x: clip; } /* before JS, 100vw in Firefox includes the scrollbar — no horizontal scroll */

/* Without a film — slow camera zoom-in on the banner. */
@keyframes tp-hero-kb { to { transform: scale(1.06); } }
.tp-hero__stage.is-virtual img { animation: tp-hero-kb var(--tp-hero-dur, 12s) ease-in-out infinite alternate; }
.tp-hero__stage.is-paused img { animation-play-state: paused !important; }

.tp-hero__progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 2px; background: rgb(255 255 255 / 0.18); pointer-events: none; }
.tp-hero__progress::before { content: ""; position: absolute; inset: 0; background: rgb(255 255 255 / 0.85); transform: scaleX(var(--tp-hero-p, 0)); transform-origin: left; }
.tp-hero__stage:not(.is-live) .tp-hero__progress { display: none; }

.tp-hero__toggle { position: absolute; right: 12px; top: 12px; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgb(255 255 255 / 0.4); border-radius: 50%; background: rgb(20 28 44 / 0.55); color: #fff; cursor: pointer; }
@media (min-width: 900px) { .tp-hero__toggle { top: 20px; right: 20px; } }
.tp-hero__toggle::before { content: ""; width: 10px; height: 12px; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.tp-hero__toggle[aria-pressed="true"]::before { width: 11px; margin-left: 3px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.tp-hero__toggle:hover, .tp-hero__toggle:focus-visible { background: #fff; color: var(--wp--preset--color--ink); }

/* The moving Hero's two-line slogan — looser line height than the condensed 4-line block. */
.tp-hero:has(.tp-hero__stage) .tp-hero__slogan { line-height: 1.08; }
.tp-hero:has(.tp-hero__stage) .tp-hero__lead { margin-top: 22px; }
@media (max-width: 759px) {
	/* Kicker — on one line even at 320px. */
	.tp-hero:has(.tp-hero__stage) .tp-hero__kicker { white-space: nowrap; font-size: clamp(9px, 2.85vw, 13px); letter-spacing: 0.06em; gap: 8px; }
	.tp-hero:has(.tp-hero__stage) .tp-hero__kicker::before { width: 8px; height: 8px; }
	/* "ÄG TERRÄNGEN." fits on one line even at 320px. */
	.tp-hero:has(.tp-hero__stage) .tp-hero__slogan { font-size: clamp(27px, 8.6vw, 36px); }
}

/* The moving Hero's text appears in a staggered cascade on load. */
@keyframes tp-hero-in { from { opacity: 0; transform: translateY(18px); } }
.tp-hero:has(.tp-hero__stage) :is(.tp-hero__kicker, .tp-hero__slogan, .tp-hero__lead, .tp-hero__cta) { animation: tp-hero-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.tp-hero:has(.tp-hero__stage) .tp-hero__slogan { animation-delay: 0.12s; }
.tp-hero:has(.tp-hero__stage) .tp-hero__lead { animation-delay: 0.28s; }
.tp-hero:has(.tp-hero__stage) .tp-hero__cta { animation-delay: 0.42s; }

@media (prefers-reduced-motion: reduce) {
	.tp-hero:has(.tp-hero__stage) :is(.tp-hero__kicker, .tp-hero__slogan, .tp-hero__lead, .tp-hero__cta),
	.tp-hero__stage.is-virtual img { animation: none !important; }
}

/* Home: "Artiklar" (tp_home_articles) — 2×2 from 900px, a list below that. Photo on the left,
   on the right category chips, title, ingress, "Läs artikeln". The whole card is a link
   (the title's ::after). With no posts the shortcode is empty — hide the section. */
.tp-articles { background: #fff; }
.tp-articles:not(:has(.tp-art)) { display: none; }
.tp-articles__grid { display: grid; grid-template-columns: 1fr; }
.tp-art { position: relative; display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 16px; padding: 16px; border-bottom: var(--tp-border); }
.tp-articles__grid > .tp-art:last-child { border-bottom: 0; }
.tp-art__media { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--wp--preset--color--sand); }
.tp-art__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
.tp-art:hover .tp-art__img { transform: scale(1.04); }
.tp-art__ph { display: block; width: 100%; height: 100%; background: var(--wp--preset--color--sand) url("/wp-content/themes/truckparts/assets/img/logo-mark.svg") no-repeat center / 34%; opacity: 0.35; }
.tp-art__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.tp-art__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-art__chip { padding: 5px 9px; background: var(--wp--preset--color--sand); font-family: var(--wp--preset--font-family--mono); font-size: 11px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--ink); }
.tp-art__title { margin: 0; font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: clamp(16px, 1.6vw, 22px); line-height: 1.22; letter-spacing: -0.005em; }
.tp-art__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.tp-art__title a::after { content: ""; position: absolute; inset: 0; }
.tp-art:hover .tp-art__title a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tp-art__title a:focus-visible { outline: none; }
.tp-art:has(.tp-art__title a:focus-visible) { outline: 2px solid var(--wp--preset--color--ink); outline-offset: -2px; }
.tp-art__excerpt { margin: 0; font-size: 15px; line-height: 1.55; color: var(--wp--preset--color--stone); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tp-art__more { margin-top: auto; padding: 12px 18px; border: var(--tp-border-ui); font-family: var(--wp--preset--font-family--heading); font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--wp--preset--color--ink); transition: background-color 0.2s ease, color 0.2s ease; }
.tp-art:hover .tp-art__more { background: var(--wp--preset--color--accent); color: #fff; }
@media (max-width: 759px) {
	.tp-art__excerpt { font-size: 13px; -webkit-line-clamp: 2; }
	.tp-art__more { display: none; }
	.tp-art__chip { font-size: 10px; }
}
@media (min-width: 760px) { .tp-art { padding: 24px 48px; gap: 28px; } }
@media (min-width: 900px) {
	.tp-articles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tp-art { padding: 32px 40px; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
	.tp-art:nth-child(odd) { border-right: var(--tp-border); padding-left: 48px; }
	.tp-articles__grid > .tp-art:nth-last-child(-n+2):nth-child(odd), .tp-articles__grid > .tp-art:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .tp-art__img, .tp-art__more { transition: none; } .tp-art:hover .tp-art__img { transform: none; } }

/* Home: "Instagram" (inc/instagram.php). Light centered profile strip + a grid of
   squares with gaps: 5 per row on desktop, 3 per row on phone (up to two rows).
   Posts that don't fill a complete row are marked .is-xd / .is-xm and hidden. */
.tp-ig { background: #fff; }
.tp-ig:not(:has(.tp-ig__post)) { display: none; }
.tp-ig__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px 36px; padding: 28px 16px 22px; color: var(--wp--preset--color--ink); }
.tp-ig__follow { flex: none; }
.tp-ig__profile { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.tp-ig__avatar { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--wp--preset--color--mist); box-shadow: 0 0 0 1px var(--wp--preset--color--hairline); }
.tp-ig__avatar img { width: 26px; height: 26px; }
.tp-ig__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tp-ig__who strong { font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: 16px; letter-spacing: 0; }
.tp-ig__who span { font-size: 13px; color: var(--wp--preset--color--stone); }
.tp-ig__profile:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.tp-ig__follow { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; background: var(--wp--preset--color--ink); color: #fff; font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 14px; text-decoration: none; transition: background-color 0.2s ease; }
.tp-ig__follow:hover { background: var(--wp--preset--color--accent-deep); }
.tp-ig__follow .tp-ig__icon { width: 16px; height: 16px; }
.tp-ig__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0 16px 20px; list-style: none; }
.tp-ig__grid li { margin: 0; }
.tp-ig__post { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--wp--preset--color--sand); }
.tp-ig__post img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.tp-ig__post::after { content: ""; position: absolute; inset: 0; background: rgb(20 28 44 / 0.28); opacity: 0; transition: opacity 0.3s ease; }
.tp-ig__badge { position: absolute; top: 8px; right: 8px; z-index: 1; width: 18px; height: 18px; color: #fff; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.45)); }
.tp-ig__post > .tp-ig__icon { position: absolute; inset: 0; z-index: 1; width: 30px; height: 30px; margin: auto; color: #fff; opacity: 0; transform: scale(0.85); transition: opacity 0.3s ease, transform 0.3s ease; }
.tp-ig__post:hover img, .tp-ig__post:focus-visible img { transform: scale(1.04); }
.tp-ig__post:hover::after, .tp-ig__post:focus-visible::after, .tp-ig__post:hover > .tp-ig__icon, .tp-ig__post:focus-visible > .tp-ig__icon { opacity: 1; transform: none; }
.tp-ig__post:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 2px; }
.tp-ig__grid .is-xm { display: none; } /* complete rows only — classes are set by tp_home_instagram */
@media (max-width: 759px) {
	.tp-ig__bar { flex-wrap: nowrap; justify-content: space-between; gap: 12px; padding: 20px 16px 16px; }
	/* On phone, the @handle serves as the heading instead of the long caption. */
	.tp-ig__who strong { display: none; }
	.tp-ig__who span { font-weight: 700; font-size: 15px; color: var(--wp--preset--color--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.tp-ig__avatar { width: 40px; height: 40px; }
	.tp-ig__avatar img { width: 22px; height: 22px; }
	.tp-ig__follow { flex: none; padding: 8px 14px; font-size: 13px; }
}
@media (min-width: 760px) {
	.tp-ig__bar { padding: 36px 48px 28px; }
	.tp-ig__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 0 48px 48px; }
	.tp-ig__grid .is-xm { display: block; }
	.tp-ig__grid .is-xd { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tp-ig__post img, .tp-ig__post::after, .tp-ig__post > .tp-ig__icon, .tp-ig__follow { transition: none; } .tp-ig__post:hover img { transform: none; } }

/* Home: "Utrustningen" showcase (tp_category_cards_html) — bento blocks of 5:
   a big 2×2 tile + 4 small; every second block is mirrored (.is-mirror). Incomplete
   block: n1 — full-width banner, n2 — two halves, n3 — big + 2 wide,
   n4 — four vertical. Phone: big at full width, small ones 2 per row. */
.tp-bento { display: flex; flex-direction: column; gap: 4px; background: #fff; } /* full frame width, no gutters */
.tp-bento__block { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 190px; gap: 4px; }
.tp-bento__tile { position: relative; display: block; overflow: hidden; color: #fff; text-decoration: none; background: var(--wp--preset--color--ink); }
.tp-bento__tile.is-big { grid-column: 1 / -1; grid-row: span 2; }
.tp-bento__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.tp-bento__tile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgb(20 28 44 / 0.86) 0%, rgb(20 28 44 / 0.15) 48%, rgb(20 28 44 / 0) 68%); transition: background-color 0.3s ease; }
.tp-bento__tile:hover .tp-bento__img, .tp-bento__tile:focus-visible .tp-bento__img { transform: scale(1.04); }
.tp-bento__tile:hover::before { background-color: rgb(20 28 44 / 0.12); }
.tp-bento__tile:focus-visible { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 2px; }
.tp-bento__body { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.tp-bento__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tp-bento__name { font-family: var(--wp--preset--font-family--heading); font-size: 15px; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.tp-bento__count { font-family: var(--wp--preset--font-family--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--wp--preset--color--hairline); }
.tp-bento__desc { font-size: 14px; line-height: 1.4; color: var(--wp--preset--color--hairline); }
.tp-bento__arrow { flex: none; font-size: 17px; transition: transform 0.3s ease; }
.tp-bento__tile:hover .tp-bento__arrow { transform: translateX(4px); }
.tp-bento__tile.is-big .tp-bento__body { left: 18px; right: 18px; bottom: 18px; }
.tp-bento__tile.is-big .tp-bento__text { gap: 6px; }
.tp-bento__tile.is-big .tp-bento__name { font-size: clamp(26px, 7vw, 44px); line-height: 1; }
.tp-bento__tile.is-big .tp-bento__count { order: -1; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--signal); }
.tp-bento__tile.is-big .tp-bento__arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #fff; font-size: 18px; transition: background-color 0.2s ease, color 0.2s ease; }
.tp-bento__tile.is-big:hover .tp-bento__arrow { transform: none; background: #fff; color: var(--wp--preset--color--ink); }
.tp-bento__block.is-n2 .tp-bento__tile.is-big { grid-column: auto; }
@media (max-width: 759px) {
	.tp-bento__block.is-n2 .tp-bento__tile.is-big { grid-column: 1 / -1; }
	.tp-bento__desc { display: none; }
	/* Small tiles on phone: no arrow and no mid-word breaks. */
	.tp-bento__tile:not(.is-big) .tp-bento__arrow { display: none; }
	.tp-bento__tile:not(.is-big) .tp-bento__name { font-size: clamp(12px, 3.7vw, 15px); overflow-wrap: normal; }
	.tp-bento__tile:not(.is-big) .tp-bento__count { font-size: 10px; }
}
@media (min-width: 760px) {
	.tp-bento { gap: 6px; }
	.tp-bento__block { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 24vw, 360px); gap: 6px; }
	.tp-bento__tile.is-big { grid-column: 1 / 3; grid-row: 1 / 3; }
	.tp-bento__block.is-mirror .tp-bento__tile.is-big { grid-column: 3 / 5; }
	.tp-bento__block.is-n3 .tp-bento__tile:not(.is-big) { grid-column: span 2; }
	.tp-bento__block.is-n4 .tp-bento__tile { grid-row: span 2; }
	.tp-bento__block.is-n2 .tp-bento__tile.is-big { grid-column: span 2; grid-row: span 2; }
	.tp-bento__block.is-n1 { grid-auto-rows: clamp(260px, 30vw, 420px); }
	.tp-bento__block.is-n1 .tp-bento__tile.is-big { grid-column: 1 / -1; grid-row: auto; }
	.tp-bento__body { left: 20px; right: 20px; bottom: 18px; }
	.tp-bento__name { font-size: 20px; }
	.tp-bento__tile.is-big .tp-bento__body { left: 32px; right: 32px; bottom: 28px; }
	.tp-bento__tile.is-big .tp-bento__arrow { width: 52px; height: 52px; font-size: 20px; }
	.tp-bento__desc { font-size: 15px; max-width: 40ch; }
}
@media (prefers-reduced-motion: reduce) { .tp-bento__img, .tp-bento__arrow, .tp-bento__tile::before { transition: none; } .tp-bento__tile:hover .tp-bento__img { transform: none; } }
/* Bento blocks appear on scroll (theme.js §13): tiles rise one by one,
   the photo "settles" from a zoom, the caption slides in after. is-reveal-pending is set
   only by JS (blocks below the fold), so without JS everything is visible. fill-mode backwards — the end
   state matches the normal one, so hover transforms work after the animation. */
.tp-bento__block.is-reveal-pending .tp-bento__tile { opacity: 0; }
.tp-bento__block.is-revealed .tp-bento__tile { animation: tp-bento-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--tp-bento-delay, 0s) backwards; }
.tp-bento__block.is-revealed .tp-bento__img { animation: tp-bento-img 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) var(--tp-bento-delay, 0s) backwards; }
.tp-bento__block.is-revealed .tp-bento__body { animation: tp-bento-body 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--tp-bento-delay, 0s) + 0.25s) backwards; }
.tp-bento__tile:nth-child(2) { --tp-bento-delay: 0.1s; }
.tp-bento__tile:nth-child(3) { --tp-bento-delay: 0.2s; }
.tp-bento__tile:nth-child(4) { --tp-bento-delay: 0.3s; }
.tp-bento__tile:nth-child(5) { --tp-bento-delay: 0.4s; }
@keyframes tp-bento-in { from { opacity: 0; transform: translateY(32px); } }
@keyframes tp-bento-img { from { transform: scale(1.15); } }
@keyframes tp-bento-body { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
	.tp-bento__block.is-reveal-pending .tp-bento__tile { opacity: 1; }
	.tp-bento__block.is-revealed :is(.tp-bento__tile, .tp-bento__img, .tp-bento__body) { animation: none; }
}

/* Home: "Populära modeller" — showcase with a circle effect (tp_models_orbit_html, theme.js §23).
   JS sets --x/--y (offset from center), --s (scale), --o (opacity) on each car.
   Model photos are studio PNG/WebP with transparent background and their own shadow under the wheels (graphite, 1600px).
   Effects: .is-ring — arc of a large circle, .is-halo — light circle behind the active one, .is-disc — podium. */
.tp-orbit__kicker { display: block; margin-bottom: 4px; font-family: var(--wp--preset--font-family--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--stone); }
/* --tp-orbit-car (active car width) is set by JS; the wheel line (--tp-orbit-base) and stage height
   derive from it, so the circle always fits above the car (halo is taller than the car), and captions and info below it. */
.tp-orbit { --tp-orbit-car: 520px; --tp-orbit-base: calc(var(--tp-orbit-car) * 0.55 + 48px); position: relative; height: max(440px, calc(var(--tp-orbit-base) + 250px)); overflow: hidden; background: var(--wp--preset--color--mist); touch-action: pan-y; }
.tp-orbit__track { margin: 0; padding: 0; list-style: none; }
.tp-orbit__item { position: absolute; left: 50%; bottom: calc(100% - var(--tp-orbit-base)); width: var(--tp-orbit-car); margin-left: calc(var(--tp-orbit-car) / -2); transform: translate(var(--x, 0), var(--y, 0)) scale(var(--s, 1)); transform-origin: 50% 100%; opacity: var(--o, 1); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease; }
.tp-orbit:not(.is-ready) .tp-orbit__item:not(:first-child) { opacity: 0; }
.tp-orbit__item.is-hidden { pointer-events: none; }
.tp-orbit__car { position: relative; display: block; color: var(--wp--preset--color--ink); text-decoration: none; -webkit-user-drag: none; user-select: none; }
.tp-orbit__img { display: block; width: 100%; height: auto; }
.tp-orbit__ph { display: grid; place-items: center; aspect-ratio: 16 / 9; font-family: var(--wp--preset--font-family--heading); font-size: 64px; color: var(--wp--preset--color--hairline); }
/* Caption under an inactive car: fades out immediately, fades in once the car has arrived. */
.tp-orbit__cap { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 10px; text-align: center; opacity: 1; transition: opacity 0.35s ease 0.5s; }
.tp-orbit__item.is-active .tp-orbit__cap, .tp-orbit__item.is-hidden .tp-orbit__cap { opacity: 0; transition: opacity 0.15s ease 0s; }
.tp-orbit__brand { font-family: var(--wp--preset--font-family--mono); font-size: 18px; letter-spacing: 0.12em; color: var(--wp--preset--color--stone); }
.tp-orbit__name { font-family: var(--wp--preset--font-family--heading); font-size: 30px; line-height: 1; text-transform: uppercase; }
.tp-orbit__item:not(.is-active):not(.is-hidden) .tp-orbit__car { cursor: pointer; }
.tp-orbit__car:focus { outline: none; }
.tp-orbit__item.is-active .tp-orbit__car:focus-visible { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 6px; }
/* Effects */
.tp-orbit__fx { position: absolute; pointer-events: none; }
.tp-orbit.is-ring .tp-orbit__fx { left: 50%; top: calc(var(--tp-orbit-base) - 40px); width: calc(var(--tp-orbit-car) * 5.8); height: calc(var(--tp-orbit-car) * 1.7); margin-left: calc(var(--tp-orbit-car) * -2.9); border: 1px solid var(--wp--preset--color--hairline); border-radius: 50%; background: radial-gradient(ellipse at 50% 0%, rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0) 42%); }
.tp-orbit.is-halo { --tp-orbit-base: calc(var(--tp-orbit-car) * 0.66 + 60px); }
.tp-orbit.is-halo .tp-orbit__fx { left: 50%; top: calc(var(--tp-orbit-base) - var(--tp-orbit-car) * 0.66); width: calc(var(--tp-orbit-car) * 0.88); aspect-ratio: 1; margin-left: calc(var(--tp-orbit-car) * -0.44); border-radius: 50%; background: radial-gradient(circle at 50% 45%, #fff 0%, #e4e9f2 55%, #d5dce8 100%); box-shadow: inset 0 0 0 1px #d5dce8, 0 0 0 28px rgb(255 255 255 / 0.55); }
.tp-orbit.is-disc .tp-orbit__fx { left: 50%; top: calc(var(--tp-orbit-base) - var(--tp-orbit-car) * 0.2); width: calc(var(--tp-orbit-car) * 1.27); height: calc(var(--tp-orbit-car) * 0.23); margin-left: calc(var(--tp-orbit-car) * -0.635); border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #fff 0%, #e9edf4 60%, #d7dde8 100%); box-shadow: 0 18px 30px rgb(20 28 44 / 0.12), inset 0 -6px 0 #cfd6e2; }
/* Active model info */
.tp-orbit__info { position: absolute; left: 16px; right: 16px; bottom: 26px; z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.tp-orbit__meta { font-family: var(--wp--preset--font-family--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--wp--preset--color--stone); }
.tp-orbit__title { font-family: var(--wp--preset--font-family--heading); font-size: clamp(26px, 3.2vw, 40px); line-height: 1; text-transform: uppercase; }
.tp-orbit__cta { margin-top: 4px; padding: 13px 20px; background: var(--wp--preset--color--ink); color: #fff; font-family: var(--wp--preset--font-family--heading); font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; }
.tp-orbit__cta:hover { background: var(--wp--preset--color--accent-deep); color: #fff; }
.tp-orbit__dots { display: flex; gap: 8px; margin-top: 6px; }
.tp-orbit__dot { display: block; width: 8px; height: 8px; border-radius: 4px; background: #c3cad6; transition: width 0.3s ease, background-color 0.3s ease; }
.tp-orbit__dot.is-active { width: 22px; background: var(--wp--preset--color--ink); }
@media (max-width: 759px) {
	.tp-orbit__cap { display: none; } /* neighbors are half off-edge — captions would be clipped */
	.tp-orbit.is-ring .tp-orbit__fx { width: 220%; margin-left: -110%; height: 60%; }
}
@media (prefers-reduced-motion: reduce) { .tp-orbit__item, .tp-orbit__cap, .tp-orbit__dot { transition: none !important; } }

/* Popular models — card slider (track and arrows shared with the category
   carousel). Shows 1.2 / 2 (≥500) / 4 (≥900) cards, the rest by scrolling. */
.tp-models .tp-fp-head { align-items: center; }
.tp-models .tp-fp-head h2 { margin-bottom: 0; }
.tp-mcard { flex: 0 0 min(330px, 84vw); display: flex; flex-direction: column; text-decoration: none; color: var(--wp--preset--color--ink); border-right: 1px solid var(--tp-line); background: var(--wp--preset--color--sand); }
@media (min-width: 500px) { .tp-mcard { flex-basis: 50%; } }
@media (min-width: 900px) { .tp-mcard { flex-basis: 25%; } }
/* Photo fills the whole cell without padding (cover), the name row sits right below it. */
.tp-mcard__media { aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; background: #fff; }
.tp-mcard__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.tp-mcard:hover .tp-mcard__img { transform: scale(1.03); }
.tp-mcard__media:has(.tp-mcard__ph) { background: var(--wp--preset--color--sand); }
/* Hover: the accent background "slides" into the row from the left (like the product card buy button, but along X). */
.tp-mcard__row { position: relative; isolation: isolate; overflow: hidden; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 20px 28px; border-top: 1px solid var(--tp-line); background: var(--wp--preset--color--sand); transition: color 0.22s ease; }
.tp-mcard__row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wp--preset--color--accent); transform: translateX(-101%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
.tp-mcard:hover .tp-mcard__row, .tp-mcard:focus-visible .tp-mcard__row { color: #fff; }
.tp-mcard:hover .tp-mcard__row::before, .tp-mcard:focus-visible .tp-mcard__row::before { transform: none; }
.tp-mcard__arrow { color: var(--wp--preset--color--accent); font-size: 17px; transition: color 0.22s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
.tp-mcard:hover .tp-mcard__arrow, .tp-mcard:focus-visible .tp-mcard__arrow { color: #fff; transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .tp-mcard__img, .tp-mcard__row, .tp-mcard__row::before, .tp-mcard__arrow { transition: none; } .tp-mcard:hover .tp-mcard__img { transform: none; } }
.tp-mcard__ph { font-family: var(--wp--preset--font-family--heading); font-size: 64px; color: var(--wp--preset--color--hairline); }
.tp-mcard__name { font-family: var(--wp--preset--font-family--heading); font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; }
/* Phone: shorter model name row. */
@media (max-width: 759px) {
	.tp-mcard__row { padding: 12px 16px; }
	.tp-mcard__name { font-size: 13px; }
	.tp-mcard__arrow { font-size: 15px; }
}

/* Category carousel */
.tp-car-arrows { display: flex; }
.tp-car-arrows button { width: 44px; height: 44px; border: 1px solid var(--wp--preset--color--ink); background: var(--wp--preset--color--sand); color: var(--wp--preset--color--ink); font-size: 18px; cursor: pointer; }
.tp-car-arrows button:hover { background: var(--wp--preset--color--ink); color: #fff; }
.tp-car-arrows button + button { border-left: none; background: var(--wp--preset--color--accent); color: #fff; }
.tp-car-arrows button + button:hover { background: var(--wp--preset--color--accent-deep); }
.tp-ccar__track { display: flex; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.tp-ccar__track::-webkit-scrollbar { display: none; }
.tp-ccard { flex: 0 0 min(330px, 84vw); display: flex; flex-direction: column; text-decoration: none; color: var(--wp--preset--color--ink); border-right: 1px solid var(--tp-line); background: var(--wp--preset--color--sand); }
.tp-ccard:hover { background: #fff; }
.tp-ccard__media { display: block; height: 250px; position: relative; border-bottom: 1px solid var(--tp-line); background: linear-gradient(120deg, #2a3449 0%, var(--wp--preset--color--ink) 65%); overflow: hidden; }
.tp-ccard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-ccard__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; }
.tp-ccard__name { display: block; font-family: var(--wp--preset--font-family--heading); font-size: 18px; letter-spacing: 0.02em; text-transform: uppercase; }
.tp-ccard__count { display: block; margin-top: 4px; font-family: var(--wp--preset--font-family--mono); font-size: 13px; color: var(--wp--preset--color--stone); }
.tp-ccard__arrow { color: var(--wp--preset--color--accent); font-size: 20px; }

/* Varumärken — brand row (empty until qcom_brand is synced → section hidden) */
.tp-brands:not(:has(.tp-brands__row)) { display: none; }
.tp-brands { background: #fff; }
/* Home: "Varumärken" — brand tiles (tp_brand_row). Tile: name / logo (has-logo) /
   own full-tile photo with name (has-photo). 2 columns on phone, 3 at 760–899px, 5 from 900px. */
.tp-brands__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--tp-line); }
/* Phone: slider (scroll-snap, 2 tiles at a time), autoscroll — theme.js §24. */
@media (max-width: 759px) {
	.tp-brands__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
	.tp-brands__row::-webkit-scrollbar { display: none; }
	.tp-brands__row .tp-brand-plate { flex: 0 0 50%; scroll-snap-align: start; }
}
@media (min-width: 760px) { .tp-brands__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .tp-brands__row { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tp-brand-plate { position: relative; box-sizing: border-box; display: grid; place-items: center; min-height: clamp(96px, 13vw, 170px); padding: 20px 16px; overflow: hidden; text-decoration: none; color: var(--wp--preset--color--ink); background: #fff; border-right: 1px solid var(--tp-line); border-bottom: 1px solid var(--tp-line); transition: background-color 0.2s ease, color 0.2s ease; }
.tp-brand-plate__name { position: relative; z-index: 2; font-family: var(--wp--preset--font-family--heading); font-size: clamp(16px, 1.7vw, 24px); line-height: 1.1; letter-spacing: 0.03em; text-transform: uppercase; text-align: center; overflow-wrap: anywhere; }
.tp-brand-plate__img { max-width: 70%; max-height: 64px; width: auto; height: auto; object-fit: contain; }
.tp-brand-plate.has-photo { color: #fff; background: var(--wp--preset--color--ink); }
.tp-brand-plate.has-photo .tp-brand-plate__img { position: absolute; inset: 0; max-width: none; max-height: none; width: 100%; height: 100%; object-fit: cover; }
.tp-brand-plate.has-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgb(20 28 44 / 0.55); transition: background-color 0.2s ease; }
.tp-brand-plate__arrow { position: absolute; right: 18px; bottom: 14px; z-index: 2; opacity: 0; transform: translateX(-6px); transition: opacity 0.2s ease, transform 0.2s ease; }
.tp-brand-plate:hover, .tp-brand-plate:focus-visible { background: var(--wp--preset--color--ink); color: #fff; }
.tp-brand-plate.has-photo:hover::before, .tp-brand-plate.has-photo:focus-visible::before { background: rgb(20 28 44 / 0.75); }
.tp-brand-plate:hover .tp-brand-plate__arrow, .tp-brand-plate:focus-visible .tp-brand-plate__arrow { opacity: 1; transform: none; }
.tp-brand-plate.has-logo:hover .tp-brand-plate__img, .tp-brand-plate.has-logo:focus-visible .tp-brand-plate__img { filter: brightness(0) invert(1); }
.tp-brand-plate:focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .tp-brand-plate, .tp-brand-plate__arrow, .tp-brand-plate.has-photo::before { transition: none; } }

/* Nyheter */
.tp-news { display: grid; grid-template-columns: 1fr; background: #fff; }
@media (min-width: 900px) { .tp-news { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.tp-news__media { position: relative; min-height: 300px; }
@media (min-width: 900px) { .tp-news__media { min-height: 440px; border-right: var(--tp-border); } }
.tp-news__media figure { position: absolute; inset: 0; margin: 0; }
.tp-news__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.tp-news__tag { display: flex; align-items: center; padding: 20px 36px; border-bottom: 1px solid var(--tp-line); }
.tp-news__tag span { background: var(--wp--preset--color--accent); color: #fff; font-family: var(--wp--preset--font-family--mono); font-size: 12px; letter-spacing: 0.12em; padding: 5px 12px; }
.tp-news__body { padding: 40px 36px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.tp-news__body h2 { margin: 0; font-family: var(--wp--preset--font-family--heading); font-size: clamp(26px, 2.6vw, 38px); line-height: 1.05; text-transform: uppercase; }
.tp-news__body p { margin: 0; font-size: 15px; line-height: 1.65; color: #3e4656; max-width: 50ch; }
.tp-news__cta { align-self: flex-start; margin-top: 8px; display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; background: var(--wp--preset--color--accent); color: #fff; text-decoration: none; font-family: var(--wp--preset--font-family--heading); font-size: 14px; letter-spacing: 0.04em; border: 1px solid var(--wp--preset--color--ink); }
.tp-news__cta:hover { background: var(--wp--preset--color--accent-deep); color: #fff; }
.tp-news__stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) auto; border-top: 1px solid var(--tp-line); }
.tp-news__stat { padding: 20px 22px; border-right: 1px solid var(--wp--preset--color--hairline); }
.tp-news__stat strong { display: block; font-family: var(--wp--preset--font-family--heading); font-size: 20px; font-weight: 400; }
.tp-news__stat span { font-family: var(--wp--preset--font-family--mono); font-size: 12px; color: var(--wp--preset--color--stone); }
.tp-news__more { display: grid; place-items: center; width: 76px; background: var(--wp--preset--color--accent); color: #fff; font-size: 22px; text-decoration: none; border-left: 0 solid var(--tp-line); }
.tp-news__more:hover { background: var(--wp--preset--color--accent-deep); color: #fff; }

/* Kundeservice poster */
.tp-cta-blue { background: var(--wp--preset--color--accent); padding: 60px 16px; }
@media (min-width: 760px) { .tp-cta-blue { padding: 60px 48px; } }
.tp-cta-blue h2 { margin: 0 0 20px; font-family: var(--wp--preset--font-family--heading); font-size: clamp(38px, 5.2vw, 70px); line-height: 0.98; text-transform: uppercase; color: #fff; letter-spacing: -0.01em; max-width: 20ch; }
.tp-cta-blue > p { margin: 0 0 36px; font-size: 18px; line-height: 1.55; color: #d7dde8; max-width: 46ch; }
.tp-cta-blue__btns { display: flex; gap: 16px; flex-wrap: wrap; }
.tp-cta-blue__btns a { display: inline-flex; align-items: center; gap: 12px; padding: 18px 32px; text-decoration: none; font-family: var(--wp--preset--font-family--heading); font-size: 15px; letter-spacing: 0.04em; border: 1px solid var(--wp--preset--color--ink); white-space: nowrap; }
.tp-cta-blue__btns a.is-yellow { background: var(--wp--preset--color--signal); color: var(--wp--preset--color--ink); }
.tp-cta-blue__btns a.is-yellow:hover { background: #ffffff; color: var(--wp--preset--color--ink); }
.tp-cta-blue__btns a.is-white { background: #fff; color: var(--wp--preset--color--accent); }
.tp-cta-blue__btns a.is-white:hover { background: var(--wp--preset--color--sand); }
.tp-cta-blue__contacts { display: flex; flex-wrap: wrap; margin-top: 40px; border: 1px solid rgba(255,255,255,0.35); }
.tp-cta-blue__contact { flex: 1; min-width: 200px; padding: 18px 24px; border-right: 1px solid rgba(255,255,255,0.35); color: #fff; text-decoration: none; }
a.tp-cta-blue__contact:hover { background: rgba(255,255,255,0.08); color: #fff; }
a.tp-cta-blue__contact:hover strong { text-decoration: underline; }
.tp-cta-blue__contact:last-child { border-right: 0; }
.tp-cta-blue__contact strong { display: block; font-family: var(--wp--preset--font-family--heading); font-size: 15px; font-weight: 400; color: #fff; text-transform: uppercase; letter-spacing: 0.03em; }
.tp-cta-blue__contact span { display: block; font-family: var(--wp--preset--font-family--mono); font-size: 13px; color: #dbe6fb; margin-top: 5px; overflow-wrap: anywhere; }

/* === Min bil =========================================== */
/* "Ditt fordon" chip below the header: icon+text on the left, "Byt" and ✕ pushed
   to the right, all vertically centered. The 40px height is included in --tp-header-h. */
.tp-mycar { display: flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 0 0 16px; background: var(--wp--preset--color--signal); border-bottom: var(--tp-border); font: 600 13px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; }
.tp-mycar__label { display: inline-flex; align-items: center; gap: 10px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-mycar__label svg { flex: none; }
.tp-mycar__prefix { font-family: var(--wp--preset--font-family--mono); font-weight: 400; }
.tp-mycar__change { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.tp-mycar__change:hover { background: rgba(20, 28, 44, 0.08); }
.tp-mycar__clear { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 40px; border: 0; border-left: var(--tp-border); background: none; cursor: pointer; color: inherit; }
.tp-mycar__clear:hover { background: var(--wp--preset--color--ink); color: #fff; }
/* The strip is the width of the site frame (like the content below), not full screen. */
@media (min-width: 760px) { .tp-mycar { box-sizing: border-box; width: 100%; max-width: var(--tp-frame-w); margin-inline: auto; padding-left: 24px; border-left: var(--tp-border-2); border-right: var(--tp-border-2); } } /* like the .tp-frame below it */
.tp-facet__note { margin: 0 0 12px; font-size: 14px; }
.tp-facet__note a { color: var(--wp--preset--color--accent); }
.tp-vs__current { display: grid; gap: 8px; padding: 16px; border-bottom: var(--tp-border); }
.tp-vs__current-label { font-family: var(--wp--preset--font-family--mono); font-size: 12px; text-transform: uppercase; color: var(--wp--preset--color--stone); }
.tp-vs__current strong { font: 400 28px/1.1 var(--wp--preset--font-family--heading); text-transform: uppercase; }
.tp-vs__go, .tp-vs__change, .tp-vs__submit { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; font: 700 14px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; text-decoration: none; }
.tp-vs__go, .tp-vs__submit { background: var(--wp--preset--color--accent); color: #fff; border: 0; }
.tp-vs__go:hover, .tp-vs__submit:not(:disabled):hover { background: var(--wp--preset--color--accent-deep); }
.tp-vs__submit:disabled { background: var(--wp--preset--color--hairline); color: var(--wp--preset--color--stone); cursor: not-allowed; }
.tp-vs__change { background: none; border: var(--tp-border-ui); color: inherit; }
@media (min-width: 760px) { .tp-vs__current { grid-template-columns: 1fr auto auto; align-items: center; padding: 16px 24px; } .tp-vs__current-label { grid-column: 1 / -1; } }

/* === Live search (SearchWP Live Ajax Search) ===========
   theme.js moves the results container into .tp-headerbar and disables
   the plugin's inline positioning — a panel across the full header width, like the mega menu,
   with the page dimmed beneath it. */
.tp-headerbar { position: relative; }
/* Search clear button (the browser × in Chrome/Edge/Safari) — styled like the header icons:
   a thin ink-colored cross, like the other line icons (stroke 1.8). */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0 0 0 12px; background: var(--wp--preset--color--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E") center / 18px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E") center / 18px no-repeat; opacity: 0.55; cursor: pointer; transition: opacity 0.15s ease; }
input[type="search"]::-webkit-search-cancel-button:hover { opacity: 1; }
.tp-headerbar .searchwp-live-search-results { position: absolute !important; left: 0 !important; right: 0 !important; top: calc(100% + 1px) !important; width: auto !important; min-width: 0 !important; max-height: none !important; z-index: 40; flex-direction: column; border: 0; border-bottom: var(--tp-border); background: var(--wp--preset--color--paper); box-shadow: none; border-radius: 0; padding: 0; overflow: hidden; }
/* Live search: inc/templates/live-search-results.php. Mobile — one column
   (Sökförslag → Produkter → other groups), from 900px — groups on the left, products on the right. */
.tp-ls { display: grid; grid-template-columns: 1fr; grid-template-areas: "suggest" "products" "groups" "all"; }
.tp-ls__suggest { grid-area: suggest; }
.tp-ls__products { grid-area: products; padding: 20px 24px 12px; }
.tp-ls__groups { grid-area: groups; display: grid; align-content: start; padding-bottom: 20px; }
.tp-ls__group { min-width: 0; padding: 20px 24px 0; } /* min-width: 0 — long names are truncated with "…" instead of spilling into the products column */
.tp-ls__title { margin: 0 0 8px; font: 400 15px/1.2 var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.02em; }
.tp-ls__list { list-style: none; margin: 0; padding: 0; }
.tp-ls__list a { display: block; padding: 3px 0; color: var(--wp--preset--color--ink); text-decoration: none; font-size: 15px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-ls__list a:hover, .tp-ls__list a:focus-visible { color: var(--wp--preset--color--accent); text-decoration: none; }
.tp-ls__list strong { font-weight: 700; }
/* "Visa alla sökresultat" — full-width strip at the bottom of the panel. */
.tp-ls__all { grid-area: all; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 0 24px; min-height: 52px; border-top: var(--tp-border); background: var(--wp--preset--color--mist); color: var(--wp--preset--color--ink); text-decoration: none; font: 700 13px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; }
.tp-ls__all:hover, .tp-ls__all:focus-visible { background: var(--wp--preset--color--ink); color: #fff; text-decoration: none; }
.searchwp-live-search-result.tp-ls__product { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: start; margin: 0 -12px; padding: 10px 12px; color: inherit; text-decoration: none; cursor: pointer; }
.tp-ls__img { width: 56px; height: 56px; border: 1px solid var(--wp--preset--color--hairline); background: #f7f8fa; display: grid; place-items: center; overflow: hidden; }
.tp-ls__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tp-ls__name { display: block; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; } /* "FLARES,FRNT,PR,TOYOTA,84-88" without spaces doesn't overlap the price */
.tp-ls__code { display: block; margin-top: 4px; font-family: var(--wp--preset--font-family--mono); font-size: 12px; color: var(--wp--preset--color--stone); }
.tp-ls__price { font: 400 17px/1.2 var(--wp--preset--font-family--heading); white-space: nowrap; }
.tp-ls__price .qcom-price-amount__label { display: none; }
/* The price loads after results are shown — a gray placeholder bar. */
.tp-ls__price-ph { display: block; width: 72px; height: 16px; margin-top: 2px; background: var(--wp--preset--color--mist); animation: tp-search-pulse 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tp-ls__price-ph { animation: none; } }
.tp-ls__empty { margin: 0; font-family: var(--wp--preset--font-family--mono); font-size: 13px; color: var(--wp--preset--color--stone); }
.searchwp-live-search-no-results { padding: 24px; font-family: var(--wp--preset--font-family--mono); font-size: 13px; color: var(--wp--preset--color--stone); }
@media (min-width: 900px) {
  .tp-ls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "suggest products" "groups products" "all all"; }
  .tp-ls__products { border-left: var(--tp-border); padding-bottom: 20px; }
}
/* Desktop: panel from the left edge of "Produkter" to the right edge of the search field with "Sök"
   (--tp-ls-left and --tp-ls-width are set by theme.js §21); border on the sides and bottom. */
@media (min-width: 1024px) {
  .tp-headerbar .searchwp-live-search-results { left: var(--tp-ls-left, 0px) !important; right: auto !important; width: var(--tp-ls-width, 100%) !important; box-sizing: border-box; border: var(--tp-border); border-top: 0; box-shadow: 0 16px 32px rgb(20 28 44 / 0.12); }
  .tp-ls { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
.searchwp-live-search-result:hover, .searchwp-live-search-result:focus, .searchwp-live-search-result.searchwp-live-search-result--focused { background: var(--wp--preset--color--sand); outline: none; }
/* "Keep typing" state (< 3 characters) and the plugin's spinner */
.tp-headerbar .searchwp-live-search-results-showing { min-height: 104px; }
/* Closed panel (SearchWP removed the -showing class) — hide completely, no leftover border. CSS only:
   the plugin doesn't remove an inline display:none, and results would never open again. */
.tp-headerbar .searchwp-live-search-results:not(.searchwp-live-search-results-showing) { display: none !important; }
.tp-headerbar .searchwp-live-search-no-min-chars::after { content: "Fortsätt skriva – minst 3 tecken" !important; display: block; padding: 40px 24px 24px !important; text-align: center; font-family: var(--wp--preset--font-family--mono); font-size: 13px; color: var(--wp--preset--color--stone); }
/* Custom search indicator instead of the plugin's spinner: a running accent bar on top + "Söker …". */
.tp-headerbar .searchwp-live-search-results .spinner { display: none !important; }
.tp-headerbar .searchwp-live-search-results-showing:not(.searchwp-live-search-no-min-chars):not(:has(.tp-ls, .searchwp-live-search-result, .searchwp-live-search-no-results)) { position: relative; }
.tp-headerbar .searchwp-live-search-results-showing:not(.searchwp-live-search-no-min-chars):not(:has(.tp-ls, .searchwp-live-search-result, .searchwp-live-search-no-results))::before { content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 28%; background: var(--wp--preset--color--accent); animation: tp-search-bar 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.tp-headerbar .searchwp-live-search-results-showing:not(.searchwp-live-search-no-min-chars):not(:has(.tp-ls, .searchwp-live-search-result, .searchwp-live-search-no-results))::after { content: "Söker …"; display: block; padding: 40px 24px 24px; text-align: center; font-family: var(--wp--preset--font-family--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--stone); animation: tp-search-pulse 1.1s ease-in-out infinite; }
@keyframes tp-search-bar { 0% { left: -28%; } 100% { left: 100%; } }
@keyframes tp-search-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tp-headerbar .searchwp-live-search-results-showing::before, .tp-headerbar .searchwp-live-search-results-showing::after { animation: none; } }
.tp-search__backdrop { position: fixed; inset: 0; z-index: 29; background: rgba(20, 28, 44, 0.55); }
/* While live search results are open (backdrop visible) — the page doesn't scroll;
   scrollbar-gutter reserves the scrollbar space so the page doesn't "jump" sideways.
   Long results scroll inside the panel. */
html:has(.tp-search__backdrop:not([hidden])) { overflow: hidden; scrollbar-gutter: stable; }
.tp-headerbar .searchwp-live-search-results-showing { max-height: calc(100dvh - var(--tp-header-h, 57px) - 16px) !important; overflow-y: auto !important; overscroll-behavior: contain; }

/* === Passar ditt fordon ================================ */
.tp-fits { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: var(--tp-border); font: 600 13px/1.2 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; }
.tp-fits.is-yes { border-color: var(--wp--preset--color--stock); color: var(--wp--preset--color--stock); }
.tp-fits.is-universal { border-color: var(--wp--preset--color--hairline); color: var(--wp--preset--color--stone); }
/* "Kontrollera årsmodell" — not an error but a warning: ink border, tinted background. */
.tp-fits.is-check { border-color: var(--wp--preset--color--ink); background: var(--wp--preset--color--sand); color: var(--wp--preset--color--ink); }
.tp-fits__icon { font-family: var(--wp--preset--font-family--mono); font-size: 16px; }
.tp-fits a { margin-left: auto; color: var(--wp--preset--color--accent); text-decoration: underline; font-weight: 600; }
/* Compact label on the card — like the stock row above it: mono 12px, icon + text, no
   fill. "Passar" — green, "Kontrollera årsmodell" — ink (boxed "!" icon), "Universell" — gray. */
.tp-fits.is-compact { display: inline-flex; gap: 6px; min-height: 0; padding: 0; border: 0; background: none; font: 400 12px/1.3 var(--wp--preset--font-family--mono); text-transform: none; letter-spacing: 0; }
.tp-fits.is-compact .tp-fits__icon { display: inline-grid; place-items: center; width: 14px; height: 14px; font-size: 11px; line-height: 1; }
.tp-fits.is-compact.is-yes { color: var(--wp--preset--color--stock); }
.tp-fits.is-compact.is-universal { color: var(--wp--preset--color--stone); }
.tp-fits.is-compact.is-check { color: var(--wp--preset--color--ink); }
.tp-fits.is-compact.is-check .tp-fits__icon { border: 1.5px solid currentColor; font-weight: 700; }
/* Label tooltip: a dark box above the label on hover or keyboard focus. */
.tp-fits.is-compact { position: relative; z-index: 2; cursor: help; } /* above the card's link overlay, otherwise hover doesn't reach it */
.tp-fits.is-compact:hover, .tp-fits.is-compact:focus-visible { z-index: 16; }
.tp-fits__tip { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 15; width: max-content; max-width: 240px; padding: 10px 12px; background: var(--wp--preset--color--ink); color: #fff; font: 400 13px/1.4 var(--wp--preset--font-family--body); text-align: left; white-space: normal; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; pointer-events: none; }
.tp-fits__tip::after { content: ""; position: absolute; left: 12px; top: 100%; border: 6px solid transparent; border-top-color: var(--wp--preset--color--ink); }
.tp-fits.is-compact:hover .tp-fits__tip, .tp-fits.is-compact:focus-visible .tp-fits__tip { opacity: 1; visibility: visible; transform: none; }
.tp-fits.is-compact:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .tp-fits__tip { transition: none; } }
.tp-card__body p:has(> .tp-fits) { margin: 6px 0 0; }

/* === Product page ====================================== */
.tp-product__crumbs { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-bottom: var(--tp-border); }
/* The plugin's nav.qcom-breadcrumbs has its own margin-bottom: 24px — remove it wherever breadcrumbs sit in a strip. */
.tp-product__crumbs .qcom-breadcrumbs { margin: 0 !important; }
.tp-cat-banner .qcom-breadcrumbs { margin: 0 0 16px !important; }
.tp-product__crumbs .tp-breadcrumbs, .tp-product__crumbs .tp-breadcrumbs a { color: var(--wp--preset--color--ink) !important; }
.tp-product__crumbs .tp-breadcrumbs a:hover { color: var(--wp--preset--color--accent) !important; }
.tp-product__crumbs .tp-breadcrumbs [aria-current] { color: var(--wp--preset--color--stone) !important; }
/* Phone: breadcrumbs on one line with horizontal scrolling (theme.js section 32 scrolls to the end —
   the nearest sections are visible — and sets edge-fade classes when there are more items there) */
@media (max-width: 759px) {
  .tp-product__crumbs > *, .tp-cat-banner__overlay > .qcom-breadcrumbs { min-width: 0; max-width: 100%; }
  .qcom-breadcrumbs { flex-wrap: nowrap; }
  /* only the innermost wrapper scrolls (the plugin nests two with this class) */
  .qcom-breadcrumbs:not(:has(.qcom-breadcrumbs)) { min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .qcom-breadcrumbs:not(:has(.qcom-breadcrumbs))::-webkit-scrollbar { display: none; }
  .qcom-breadcrumbs:has(.qcom-breadcrumbs) { position: relative; min-width: 0; overflow: visible; }
  /* Light "‹ / ›" arrow over the faded edge — shows there are more items on that side (indicator, not a button) */
  .qcom-breadcrumbs:has(.qcom-breadcrumbs.is-more-left)::before,
  .qcom-breadcrumbs:has(.qcom-breadcrumbs.is-more-right)::after { position: absolute; top: 50%; z-index: 1; transform: translateY(-50%); font: 300 18px/1 var(--wp--preset--font-family--body); color: #c3cad6; pointer-events: none; }
  .qcom-breadcrumbs:has(.qcom-breadcrumbs.is-more-left)::before { content: "‹"; left: 0; }
  .qcom-breadcrumbs:has(.qcom-breadcrumbs.is-more-right)::after { content: "›"; right: 0; }
  .qcom-breadcrumbs__list { flex-wrap: nowrap; white-space: nowrap; overflow-wrap: normal; }
  .qcom-breadcrumbs__item { flex: none; }
  .qcom-breadcrumbs.is-more-left { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 14px, #000 40px); mask-image: linear-gradient(90deg, transparent 0, transparent 14px, #000 40px); }
  .qcom-breadcrumbs.is-more-right { -webkit-mask-image: linear-gradient(270deg, transparent 0, transparent 14px, #000 40px); mask-image: linear-gradient(270deg, transparent 0, transparent 14px, #000 40px); }
  .qcom-breadcrumbs.is-more-left.is-more-right { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 14px, #000 40px, #000 calc(100% - 40px), transparent calc(100% - 14px)); mask-image: linear-gradient(90deg, transparent 0, transparent 14px, #000 40px, #000 calc(100% - 40px), transparent calc(100% - 14px)); }
}
.tp-product__top { display: grid; grid-template-columns: 1fr; }
.tp-product__gallery { position: relative; padding: 0; border-bottom: var(--tp-border); }
/* Main photo flush with the column edges; thumbnails are a line grid below it
   (no plugin gap), like the rest of the site's cards. margin-bottom: -1px hides the bottom
   line of the last row under the column edge so the line doesn't double. */
.tp-product__gallery .qc-product-gallery { max-width: none; gap: 0; }
.tp-product__gallery .qc-main-image { background: #f7f8fa; border: 0; border-radius: 0; }
/* The plugin's gallery sets an inline height: 1000px on the slide — keep the square plate. */
.tp-product__gallery .qc-main-slide { height: auto !important; max-height: none !important; aspect-ratio: 1 / 1; }
.tp-product__gallery .qc-main-slide img { object-fit: contain; border: 0 !important; border-radius: 0 !important; }
.tp-product__gallery .qc-product-gallery .qc-thumbnails { gap: 0; border-top: var(--tp-border); margin-bottom: -1px; }
.tp-product__gallery .qc-product-gallery .qc-thumbnails .qc-thumbnail { flex: 0 0 20%; width: auto; box-sizing: border-box; border: 0 !important; border-right: var(--tp-border) !important; border-bottom: var(--tp-border) !important; border-radius: 0 !important; background: #f7f8fa; }
.tp-product__gallery .qc-product-gallery .qc-thumbnails .qc-thumbnail:nth-child(5n) { border-right: 0 !important; }
.tp-product__gallery .qc-thumbnail img { border: 0 !important; border-radius: 0 !important; }
/* Phone / tablet (<1120px): no thumbnails — main photo with swipe and dots at the bottom, like the grid card
   (.tp-dots; dots and swipe are added by theme.js section 33, the plugin itself switches slides). */
@media (max-width: 1119px) {
  .tp-product__gallery .qc-product-gallery .qc-thumbnails { display: none; }
  .tp-product__gallery .qc-main-image { position: relative; overflow: hidden; touch-action: pan-y; }
  .tp-product__gallery .tp-dots { opacity: 1; }
}
.tp-product__gallery .tp-dots[hidden] { display: none; }
/* Mosaic button — desktop only (below that the slider is used). */
.tp-gallery-more { display: none; }
.tp-product__badge { top: 16px !important; left: 16px !important; }
/* "Add to wishlist" — a square after "Köp" (spacing is the row gap), with the quantity field's border.
   Fallback heart (guest / plugin button hidden) — same logic as on the card. */
.tp-product__actions > .tp-product__wish.qcom-wishlist-button-component { flex: none; align-items: stretch !important; margin: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; }
.tp-product__wish button, .tp-product__wish-fallback { display: grid; place-items: center; width: 56px; min-height: 56px; height: 100%; box-sizing: border-box; padding: 0 !important; border: var(--tp-border-ui); border-radius: 0; background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.tp-product__wish-fallback { flex: none; height: auto; }
.tp-product__wish button:hover, .tp-product__wish-fallback:hover, .tp-product__wish button:focus-visible, .tp-product__wish-fallback:focus-visible { background: var(--wp--preset--color--ink); color: #fff; }
.tp-product__wish .qcom-wishlist__add-button--added { color: var(--wp--preset--color--accent); }
.tp-product__wish .qcom-wishlist__icon { width: 20px; height: 20px; }
.tp-product__actions:has(.qcom-wishlist-button-component:not([style*="display: none"]):not([style*="display:none"])) .tp-product__wish-fallback { display: none; }
.tp-product__buy { padding: 20px 16px 28px; display: flex; flex-direction: column; gap: 14px; }
.tp-product__meta { gap: 16px !important; font-family: var(--wp--preset--font-family--mono); font-size: 12px; color: var(--wp--preset--color--stone); text-transform: uppercase; letter-spacing: 0.04em; }
.tp-product__meta .qcom-product-code__label { margin-right: 6px; }
.tp-product__brand a { color: inherit; text-decoration: none; }
/* Title in a 460–520px column: uppercase Archivo Black is wide — 28px max,
   otherwise long names take 3–4 lines and push down the price and button. */
.tp-product__title { margin: 0; font: 400 clamp(22px, 1.8vw, 28px)/1.12 var(--wp--preset--font-family--heading); text-transform: uppercase; overflow-wrap: anywhere; }
.tp-product__price-row { gap: 12px !important; }
.tp-product__price-now, .tp-product__price-range { font: 400 28px/1 var(--wp--preset--font-family--heading); }
/* The "inkl./exkl. moms" label from the price-amount block — follows the price mode toggle in the auth menu. */
.tp-product__price-now .qcom-price-amount__label, .tp-card__price-now .qcom-price-amount__label { display: block; margin-top: 6px; font: 400 12px/1 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--stone); text-transform: none; letter-spacing: 0; }
.tp-product__price-was { text-decoration: line-through; color: var(--wp--preset--color--stone); font-size: 16px; }
.tp-product__price-row:has(.tp-product__price-was:not(:empty)) .tp-product__price-now { color: var(--wp--preset--color--sale); }
.tp-product__vat { margin: 0; font-family: var(--wp--preset--font-family--mono); font-size: 12px; color: var(--wp--preset--color--stone); }
.tp-product__stock { gap: 6px !important; font-size: 14px; }
.tp-product__actions { gap: 8px !important; align-items: stretch; }
.tp-product__qty { flex: none; display: grid; grid-template-columns: 56px 44px; border: var(--tp-border-ui); }
.tp-product__qty .qcom-quantity-input__field { width: 56px; height: 56px; text-align: center; border: 0; border-radius: 0; background: var(--wp--preset--color--paper); font: 600 16px/1 var(--wp--preset--font-family--body); -moz-appearance: textfield; }
.tp-product__qty .qcom-quantity-input__field::-webkit-outer-spin-button, .tp-product__qty .qcom-quantity-input__field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tp-product__qty .qcom-quantity-input__buttons { display: grid; grid-template-rows: 1fr 1fr; border-left: var(--tp-border); }
.tp-product__qty .qcom-quantity-input__btn { width: 44px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 0; background: var(--wp--preset--color--paper); cursor: pointer; color: inherit; padding: 0; }
.tp-product__qty .qcom-quantity-input__btn:hover { background: var(--wp--preset--color--sand); }
.tp-product__qty .qcom-quantity-input__btn svg { width: 16px; height: 16px; }
.tp-product__qty .qcom-quantity-input__btn--up { border-bottom: var(--tp-border); }
.tp-product__add { flex: 1 1 auto; }
.tp-product__add .qcom-add-to-cart-button__react-root, .tp-product__add .qcom-add-to-cart-button__btn { width: 100%; height: 100%; }
.tp-product__add .qcom-add-to-cart-button__btn { min-height: 56px; border-radius: 0; background: var(--wp--preset--color--accent); color: #fff; border: 1px solid var(--wp--preset--color--accent); font: 400 15px/1 var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; }
.tp-product__add .qcom-add-to-cart-button__btn:hover { background: var(--wp--preset--color--accent-deep); border-color: var(--wp--preset--color--accent-deep); }
/* "Leverans & retur" below the buy button (roadmap 2.5): a spec table in the theme's
   language — ink lines, mono labels, no fill; the last line coincides with the block outline. */
.tp-dlv { margin: 0; border-top: var(--tp-border); }
.tp-dlv__row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--wp--preset--color--hairline); }
.tp-dlv__row:last-child { border-bottom: var(--tp-border); }
.tp-dlv dt { font-family: var(--wp--preset--font-family--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--stone); }
.tp-dlv dd { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 14px; line-height: 1.4; }
.tp-dlv dd a { font: 600 12px/1.4 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp--preset--color--accent); text-decoration: none; white-space: nowrap; }
.tp-dlv dd a:hover { text-decoration: underline; }
.tp-product__buy p:has(> .tp-dlv), .tp-product__buy p:has(> .tp-fits) { margin: 0; }
.tp-product__short { font-size: 15px; line-height: 1.5; }
/* "Inkluderade artiklar" (bundle, the plugin's product-component-items block) — in the
   "Leverans & retur" language: mono label, rows with thin lines instead of bordered, rounded
   cards, ink top and bottom lines. Quantity "×2" — mono on the right. */
.tp-product__components.wp-block-quickcommerce-product-component-items { --tp-ci-pad: 12px; margin-top: 8px; }
.tp-product__components .qcom-component-items { padding: 0; border-radius: 0; background: none; }
.tp-product__components .qcom-component-items__header { margin: 0; padding: 0 0 10px; border-bottom: var(--tp-border); }
.tp-product__components .qcom-component-items__title { font: 400 12px/1.2 var(--wp--preset--font-family--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--stone); }
.tp-product__components .qcom-component-items__stock-warn, .tp-product__components .qcom-component-items__stock-ok { padding: 0; border-radius: 0; background: none; font: 400 12px/1.2 var(--wp--preset--font-family--mono); }
.tp-product__components .qcom-component-items__stock-warn { color: var(--wp--preset--color--sale); }
.tp-product__components .qcom-component-items__stock-ok { color: var(--wp--preset--color--stock); }
.tp-product__components .qcom-component-items__grid { gap: 0; }
.tp-product__components.wp-block-quickcommerce-product-component-items .qcom-component-items__card { align-items: center; gap: 14px; padding: var(--tp-ci-pad) 0; border: 0; border-bottom: 1px solid var(--wp--preset--color--hairline); border-radius: 0; background: none; transition: background-color 0.15s ease; }
.tp-product__components.wp-block-quickcommerce-product-component-items a.qcom-component-items__card:hover { background: var(--wp--preset--color--mist); }
.tp-product__components.wp-block-quickcommerce-product-component-items .qcom-component-items__card--collapsed:not(.qcom-component-items__card--visible) { margin-top: 0; padding-top: 0; padding-bottom: 0; border-bottom-color: transparent; } /* the plugin pulls hidden rows up by −5px — the "Visa alla" button overlapped the last one */
.tp-product__components.wp-block-quickcommerce-product-component-items .qcom-component-items__card--collapsed.qcom-component-items__card--visible { max-height: 120px; padding-top: var(--tp-ci-pad); padding-bottom: var(--tp-ci-pad); border-color: var(--wp--preset--color--hairline); }
.tp-product__components .qcom-component-items__card-image { width: 56px; height: 56px; border-radius: 0; background: #f7f8fa; }
.tp-product__components .qcom-component-items__card-image img { object-fit: contain; mix-blend-mode: multiply; }
.tp-product__components .qcom-component-items__card-image--empty::before { content: ""; width: 40%; aspect-ratio: 356 / 403; background: url("assets/img/logo-mark.svg?v=2") no-repeat center / contain; filter: grayscale(1); opacity: 0.18; }
.tp-product__components .qcom-component-items__card-image--empty span { display: none; }
.tp-product__components .qcom-component-items__card-content { gap: 4px; }
.tp-product__components .qcom-component-items__card-name { font: 600 14px/1.3 var(--wp--preset--font-family--body); color: var(--wp--preset--color--ink); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tp-product__components .qcom-component-items__card-meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.tp-product__components .qcom-component-items__card-code { font: 400 12px/1.2 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--stone); }
.tp-product__components .qcom-component-items__card-meta-dot { display: none; }
.tp-product__components .qcom-component-items__card-stock { font: 400 12px/1.2 var(--wp--preset--font-family--mono); }
.tp-product__components .qcom-component-items__card-stock--in-stock { color: var(--wp--preset--color--stock); }
.tp-product__components .qcom-component-items__card-stock--out-of-stock { color: var(--wp--preset--color--sale); }
.tp-product__components .qcom-component-items__card-price { font: 600 14px/1.2 var(--wp--preset--font-family--body); color: var(--wp--preset--color--ink); }
.tp-product__components .qcom-component-items__qty-pill { min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; font: 500 13px/1 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--ink); }
.tp-product__components.wp-block-quickcommerce-product-component-items .qcom-component-items__toggle { min-height: 44px; margin: 0; padding: 0; border: 0; border-bottom: var(--tp-border); border-radius: 0; background: none; color: var(--wp--preset--color--ink); font: 600 12px/1 var(--wp--preset--font-family--body); letter-spacing: 0.06em; text-transform: uppercase; }
.tp-product__components.wp-block-quickcommerce-product-component-items .qcom-component-items__toggle:hover { background: var(--wp--preset--color--mist); }
/* Without the "Visa alla" button the bottom ink line goes under the last row. */
.tp-product__components.wp-block-quickcommerce-product-component-items .qcom-component-items:not(:has(.qcom-component-items__toggle)) .qcom-component-items__card:last-child { border-bottom: var(--tp-border); }
.tp-product__components .qcom-component-items__notice { border-radius: 0; }
/* Buy bar: pinned to the bottom once the "Köp" button is scrolled above
   the viewport (theme.js §34). Content within .tp-frame width; product name only from 760px. */
.tp-pbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; border-top: var(--tp-border-2); background: var(--wp--preset--color--paper); box-shadow: 0 -10px 24px rgb(20 28 44 / 0.08); padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateY(110%); visibility: hidden; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0.25s; }
body.tp-pbar-on .tp-pbar { transform: none; visibility: visible; }
.tp-pbar__inner { max-width: var(--tp-frame-w); box-sizing: border-box; margin: 0 auto; display: flex; align-items: center; gap: 16px; padding: 10px 16px; }
.tp-pbar__title { display: none; flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 18px/1.1 var(--wp--preset--font-family--heading); text-transform: uppercase; }
.tp-pbar__price { flex: 1 1 auto; font: 400 26px/1 var(--wp--preset--font-family--heading); white-space: nowrap; }
.tp-pbar__price.is-sale { color: var(--wp--preset--color--sale); }
.tp-pbar__btn { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 24px; border: 1px solid var(--wp--preset--color--accent); border-radius: 0; background: var(--wp--preset--color--accent); color: #fff; font: 400 15px/1 var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; }
.tp-pbar__btn:hover { background: var(--wp--preset--color--accent-deep); border-color: var(--wp--preset--color--accent-deep); }
.tp-pbar__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.tp-pbar__btn:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 2px; }
@media (min-width: 760px) {
  .tp-pbar__inner { padding: 12px 24px; gap: 24px; }
  .tp-pbar__title { display: block; }
  .tp-pbar__price { flex: none; font-size: 28px; }
  .tp-pbar__btn { min-width: 320px; padding: 0 32px; }
}
/* The footer doesn't hide under the bar; the plugin's toasts sit above it. */
body.single-qcom_product .wp-site-blocks { padding-bottom: 88px; }
body.tp-pbar-on .qcom-toast__viewport { bottom: calc(var(--tp-toast-gap) + 88px); }
/* Product info: horizontal tabs at all widths (on mobile —
   scrollable, see below). Active tab — like the active mega menu tab:
   accent background, white text. */
.tp-product__info { border-top: var(--tp-border-2); }
.tp-product__info.wp-block-quickcommerce-product-tabs .qcom-product-tabs__nav { display: flex; flex-wrap: wrap; gap: 0; padding: 0; border: 0; border-bottom: var(--tp-border); background: var(--wp--preset--color--mist); }
.tp-product__info.wp-block-quickcommerce-product-tabs .qcom-product-tabs__tab { margin: 0; padding: 0 24px; min-height: 56px; border: 0; border-right: var(--tp-border); border-radius: 0; background: none; color: inherit; font: 600 14px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; }
.tp-product__info.wp-block-quickcommerce-product-tabs .qcom-product-tabs__tab:hover { background: #fff; }
.tp-product__info.wp-block-quickcommerce-product-tabs .qcom-product-tabs__tab.is-active { background: var(--wp--preset--color--accent); color: #fff; border-bottom: 0; font-weight: 600; text-transform: uppercase; }
.tp-product__info.wp-block-quickcommerce-product-tabs .qcom-product-tabs__tab:focus-visible { outline: 1px solid var(--wp--preset--color--accent); outline-offset: -1px; }
.tp-product__info.wp-block-quickcommerce-product-tabs .qcom-product-tabs__panel { padding: 24px 16px 32px; border: 0; border-radius: 0; width: 100%; box-sizing: border-box; font-size: 15px; line-height: 1.6; animation: none; }
.tp-product__info.wp-block-quickcommerce-product-tabs .qcom-product-tabs__panel h2, .tp-product__info.wp-block-quickcommerce-product-tabs .qcom-product-tabs__panel h3, .tp-product__info.wp-block-quickcommerce-product-tabs .qcom-product-tabs__panel h4 { font: 400 20px/1.2 var(--wp--preset--font-family--heading); text-transform: uppercase; margin: 0 0 12px; }
/* Mobile: a single copy of the content (accordionOnSmallScreens disabled — otherwise the plugin
   duplicates all tabs in the DOM, and the description headings with them). Tabs are
   one horizontally scrolling row instead of an accordion. */
@media (max-width: 759px) {
  .tp-product__info.wp-block-quickcommerce-product-tabs .qcom-product-tabs__nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tp-product__info.wp-block-quickcommerce-product-tabs .qcom-product-tabs__nav::-webkit-scrollbar { display: none; }
  .tp-product__info.wp-block-quickcommerce-product-tabs .qcom-product-tabs__tab { flex: 0 0 auto; padding: 0 16px; white-space: nowrap; }
}
/* === Product description ====================================================
   Base layout for any description (Q3 provides simple HTML): comfortable text
   width, lead, section headings with a rule, checkmark lists, spec
   table, responsive video. The "Innehåll" table of contents on the right (≥1024px) is built by
   theme.js §15 from the headings when there are 3+ (class .has-toc). The plugin demotes
   description headings (h2 → h3), so styles target h2/h3.
   Blocks for hand-written descriptions: .tp-desc-stats (key figures), .tp-desc-features
   (benefits as cards), .tp-desc-cta (summary with an inquiry button). */
.tp-product__info .qcom-product-tabs__description { --tp-desc-w: 760px; font-size: 16px; line-height: 1.7; color: var(--wp--preset--color--ink); }
.tp-product__info .qcom-product-tabs__description > * { max-width: var(--tp-desc-w); }
.tp-product__info .qcom-product-tabs__description > :first-child { margin-top: 0; }
.tp-product__info .qcom-product-tabs__description > p:first-child { font-size: 18px; line-height: 1.6; }
.tp-product__info .qcom-product-tabs__description p { margin: 0 0 16px; }
.tp-product__info .qcom-product-tabs__description :is(strong, b) { font-weight: 600; }
.tp-product__info.wp-block-quickcommerce-product-tabs .qcom-product-tabs__description > :is(h2, h3) { margin: 40px 0 12px; padding-top: 28px; border-top: 1px solid var(--tp-line); font: 400 18px/1.25 var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.02em; scroll-margin-top: calc(var(--tp-header-h, 57px) + 24px); }
/* The description is text, not a showcase: headings no heavier than the product name (28px in the right column).
   H2 — display Archivo Black 18px, H3 (often duplicates the name in ERP descriptions) — Archivo 700. */
.tp-product__info.wp-block-quickcommerce-product-tabs .qcom-product-tabs__description > h3 { font: 700 18px/1.3 var(--wp--preset--font-family--body); text-transform: none; letter-spacing: 0; }
.tp-product__info.wp-block-quickcommerce-product-tabs .qcom-product-tabs__description > :is(h2, h3):first-child { padding-top: 0; border-top: 0; }
.tp-product__info.wp-block-quickcommerce-product-tabs .qcom-product-tabs__description h4 { margin: 24px 0 8px; font: 700 16px/1.3 var(--wp--preset--font-family--body); text-transform: none; }
/* Lists — accent-colored checkmarks; long ones (6+) in two columns on wide screens. */
.tp-product__info .qcom-product-tabs__description ul:not([class]) { margin: 0 0 20px; padding: 0; list-style: none; }
.tp-product__info .qcom-product-tabs__description ul:not([class]) > li { position: relative; margin: 0 0 6px; padding-left: 28px; break-inside: avoid; }
.tp-product__info .qcom-product-tabs__description ul:not([class]) > li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 16px; height: 16px; background: var(--wp--preset--color--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='m5 12 5 5 9-10'/%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' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; }
.tp-product__info .qcom-product-tabs__description ol { margin: 0 0 20px; padding-left: 22px; }
/* ERP (ChatGPT copy) wraps items in <p> — without this each item gets an extra 16px below. */
.tp-product__info .qcom-product-tabs__description li > p { margin: 0; }
@media (min-width: 1024px) {
  .tp-product__info .qcom-product-tabs__description > ul:not([class]):has(> li:nth-child(6)) { columns: 2; column-gap: 40px; }
}
/* Spec table: alternating rows, muted name; on mobile the name sits above the value. */
.tp-product__info .qcom-product-tabs__description table { width: 100%; margin: 0 0 24px; border: var(--tp-border); border-collapse: collapse; font-size: 15px; }
.tp-product__info .qcom-product-tabs__description tr:nth-child(odd) { background: var(--wp--preset--color--mist); }
.tp-product__info .qcom-product-tabs__description :is(th, td) { padding: 12px 16px; border: 0; border-bottom: 1px solid var(--wp--preset--color--hairline); text-align: left; vertical-align: top; }
.tp-product__info .qcom-product-tabs__description th { width: 36%; font-weight: 500; color: var(--wp--preset--color--stone); }
@media (max-width: 599px) {
  .tp-product__info .qcom-product-tabs__description tr { display: grid; }
  .tp-product__info .qcom-product-tabs__description th { width: auto; padding-bottom: 0; border-bottom: 0; font-size: 13px; }
  .tp-product__info .qcom-product-tabs__description td { padding-top: 2px; }
}
.tp-product__info .qcom-product-tabs__description iframe[src*="youtube"], .tp-product__info .qcom-product-tabs__description iframe[src*="vimeo"] { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0 0 24px; border: 0; }
.tp-product__info .qcom-product-tabs__description img { max-width: 100%; height: auto; }

/* "Innehåll" table of contents (theme.js §15): right column, sticky on scroll, current section highlighted. */
.tp-desc-toc { display: none; }
@media (min-width: 1024px) {
  .tp-product__info .qcom-product-tabs__description.has-toc { display: grid; grid-template-columns: minmax(0, var(--tp-desc-w)) 240px; column-gap: 64px; justify-content: start; align-items: start; }
  .tp-product__info .qcom-product-tabs__description.has-toc > :not(.tp-desc-toc) { grid-column: 1; }
  .tp-desc-toc { display: block; grid-column: 2; grid-row: 1 / span 400; position: sticky; top: calc(var(--tp-header-h, 57px) + 24px); max-width: none; }
  .tp-desc-toc__label { margin: 0 0 10px; font: 400 12px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--stone); }
  .tp-desc-toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--tp-line); }
  .tp-desc-toc a { display: block; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.35; color: var(--wp--preset--color--stone); text-decoration: none; }
  .tp-desc-toc a:hover { color: var(--wp--preset--color--ink); }
  .tp-desc-toc a[aria-current="true"] { border-left-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); font-weight: 600; }
}

/* "Key figures" block: <ul class="tp-desc-stats"><li><strong>+36 %</strong><span>mer plats</span></li>…</ul> */
.tp-product__info .qcom-product-tabs__description .tp-desc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 8px 0 32px; padding: 0; list-style: none; border: var(--tp-border); }
.tp-desc-stats li { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 20px; border-right: var(--tp-border); }
.tp-desc-stats li:last-child { border-right: 0; }
.tp-desc-stats strong { font: 400 30px/1 var(--wp--preset--font-family--heading); color: var(--wp--preset--color--accent); }
.tp-desc-stats span { font: 400 12px/1.3 var(--wp--preset--font-family--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--stone); }
@media (max-width: 599px) {
  .tp-product__info .qcom-product-tabs__description .tp-desc-stats { grid-template-columns: 1fr 1fr; }
  .tp-desc-stats li { border-bottom: var(--tp-border); }
  .tp-desc-stats li:nth-child(2n) { border-right: 0; }
}

/* "Benefits" block: <div class="tp-desc-features"><div><strong>Heading</strong><p>Text</p></div>…</div> */
.tp-product__info .qcom-product-tabs__description .tp-desc-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 8px 0 28px; border-top: var(--tp-border); border-left: var(--tp-border); }
.tp-desc-features > div { padding: 20px 22px; border-right: var(--tp-border); border-bottom: var(--tp-border); }
.tp-desc-features > div > strong { display: block; margin-bottom: 6px; font-size: 16px; }
.tp-desc-features > div > p { margin: 0; font-size: 15px; line-height: 1.6; color: #3e4656; }
@media (max-width: 599px) { .tp-product__info .qcom-product-tabs__description .tp-desc-features { grid-template-columns: 1fr; } }

/* "Summary" block: <div class="tp-desc-cta"><div><strong>…</strong><p>…</p></div><button data-tp-inquiry>…</button></div> */
.tp-product__info .qcom-product-tabs__description .tp-desc-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin: 40px 0 0; padding: 28px; background: color-mix(in srgb, var(--wp--preset--color--accent) 8%, #fff); border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 30%, #fff); }
.tp-desc-cta > div { flex: 1 1 320px; }
.tp-desc-cta > div > strong { display: block; margin-bottom: 4px; font: 400 20px/1.2 var(--wp--preset--font-family--heading); text-transform: uppercase; }
.tp-desc-cta > div > p { margin: 0; }
.tp-desc-cta__btn { flex: none; min-height: 52px; padding: 0 28px; border: 0; background: var(--wp--preset--color--accent); color: #fff; font: 700 14px/1 var(--wp--preset--font-family--body); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.tp-desc-cta__btn:hover { background: var(--wp--preset--color--accent-deep); }
.tp-product__info .qcom-product-tabs__panel :is(strong, b) { font-weight: 700; } /* something in the plugin reset the weight to 400 */
.tp-product__info table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tp-product__info td, .tp-product__info th { padding: 10px 0; border-bottom: 1px solid var(--wp--preset--color--hairline); text-align: left; }
/* Related products */
.tp-related { border-top: var(--tp-border-2); overflow: hidden; }
/* Same as .tp-fp-section: WP blockGap between the heading and grid breaks the cards' vertical lines. */
.tp-related > * { margin-block-start: 0; }
.tp-related .tp-grid, .tp-related ul.tp-grid.wp-block-post-template { margin-bottom: -1px; }
.tp-related:not(:has(.tp-card)) { display: none; }
@media (min-width: 760px) {
  .tp-product__crumbs { padding: 0 24px; }
  .tp-product__buy { padding-left: 24px; padding-right: 24px; }
  .tp-product__info.wp-block-quickcommerce-product-tabs .qcom-product-tabs__panel { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1120px) {
  /* The gallery takes the remaining width, the right (buy) column is 460–520px: on a 1360 frame
     that's ~843 / 517, at 1120px ~610 / 460. A wider column stretched the button and rows;
     narrower than ~440 makes the "Köp" button next to quantity and ♡ too cramped. */
  .tp-product__top { --tp-buy-w: clamp(460px, 38%, 520px); position: relative; grid-template-columns: minmax(0, 1fr) var(--tp-buy-w); }
  /* The line between columns spans the full row height (both columns are "sticky" and as tall as their content). */
  .tp-product__top::before { content: ""; position: absolute; top: 0; bottom: 0; right: var(--tp-buy-w); z-index: 1; border-left: var(--tp-border); pointer-events: none; } /* z-index — above the "sticky" columns */
  /* Gallery and right column are both "sticky": the shorter one stays on screen while the longer scrolls
     (2 photos next to a long "Inkluderade artiklar" leave no empty space below them). */
  .tp-product__gallery { border-bottom: 0; position: sticky; top: var(--tp-header-h, 57px); align-self: start; }
  /* Single photo: a square at full gallery width would be ~1000px tall and push the tabs
     below the first screen — cap it at the window height (photo centered in a gray field). */
  .tp-product__gallery .qc-product-gallery:not(:has(.qc-main-slide:nth-child(2))) .qc-main-slide { max-height: max(480px, calc(100svh - var(--tp-header-h, 57px) - 48px - 120px)) !important; }
  /* Single photo — the same gray card with an 8px white inset as the mosaic tiles. */
  .tp-product__gallery .qc-product-gallery:not(:has(.qc-main-slide:nth-child(2))) .qc-main-image { padding: 8px; box-sizing: border-box; background: var(--wp--preset--color--paper); }
  .tp-product__gallery .qc-product-gallery:not(:has(.qc-main-slide:nth-child(2))) .qc-main-slide { background: #f7f8fa; }
  /* No photo: the placeholder stretches to the right column's height (not a square with empty space below). */
  .tp-product__gallery:not(:has(.qc-product-gallery)) { aspect-ratio: auto; min-height: 560px; }
  /* Desktop: with more than one photo — a 2-column mosaic instead of the slider
     (8px white gaps between tiles). The plugin's slider stays in the DOM:
     reset its transform, hide thumbnails, clicking a tile opens the plugin's
     PhotoSwipe lightbox. 3 photos — the first at full width; more than 4 — 2×2 visible,
     the rest revealed by "Visa alla bilder" (theme.js). The right column is sticky, so
     it holds until the bottom of the mosaic. */
  /* Tiles are separate gray cards with 8px white gaps (and the same inset at the gallery edge). */
  .tp-product__gallery .qc-main-slider:has(> .qc-main-slide:nth-child(2)) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; box-sizing: border-box; background: var(--wp--preset--color--paper); transform: none !important; transition: none !important; }
  .tp-product__gallery .qc-product-gallery:has(.qc-main-slide:nth-child(2)) .qc-main-image { background: var(--wp--preset--color--paper); }
  /* Exactly 2 photos — a normal row of square tiles (previously stretched to the right column's height
     and with a long column became narrow strips with the photo in the middle of empty space). */
  .tp-product__gallery .qc-main-slider:has(> .qc-main-slide:nth-child(2)) > .qc-main-slide { background: #f7f8fa; overflow: hidden; cursor: zoom-in; }
  .tp-product__gallery .qc-main-slide img { mix-blend-mode: multiply; } /* white photo background → gray of the tile/gallery field */
  .tp-product__gallery .qc-main-slider:has(> :nth-child(3)):not(:has(> :nth-child(4))) > :first-child { grid-column: 1 / -1; }
  .tp-product__gallery .qc-product-gallery:not(.is-expanded) .qc-main-slide:nth-child(n+5) { display: none; }
  .tp-product__gallery .qc-product-gallery.is-expanded .qc-main-slide:nth-child(n+5):last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tp-product__gallery .qc-product-gallery:has(.qc-main-slide:nth-child(2)) .qc-thumbnails { display: none; }
  .tp-product__gallery .qc-main-slide img { transition: transform 0.3s ease; }
  .tp-product__gallery .qc-main-slider:has(> .qc-main-slide:nth-child(2)) > .qc-main-slide:hover img { transform: scale(1.03); }
  .tp-gallery-more { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin: 0; border: 0; border-top: var(--tp-border); background: #fff; color: var(--wp--preset--color--ink); font: 700 14px/1 var(--wp--preset--font-family--body); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
  .tp-gallery-more:hover { background: var(--wp--preset--color--sand); }
  .tp-product__buy { padding: 32px; position: sticky; top: calc(var(--tp-header-h, 57px) + 16px); align-self: start; }
}

/* === Checkout ========================================== */
.tp-cheader { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 0 16px; border-bottom: var(--tp-border-2); background: var(--wp--preset--color--paper); }
.tp-cheader .tp-brand { border: 0; padding: 0; }
.tp-cheader__back { font: 600 13px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; color: inherit; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.tp-cheader__back:hover { text-decoration: underline; }
.tp-cheader__secure { display: none; align-items: center; gap: 8px; font-family: var(--wp--preset--font-family--mono); font-size: 12px; color: var(--wp--preset--color--stone); }
@media (min-width: 760px) { .tp-cheader { padding: 0 24px; } .tp-cheader__secure { display: inline-flex; } }
.tp-checkout { padding: 24px 16px 48px; }
@media (min-width: 760px) { .tp-checkout { padding: 32px 24px 64px; } }
.tp-cfoot { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--sand); font-family: var(--wp--preset--font-family--mono); font-size: 12px; }
.tp-cfoot p { margin: 0; display: contents; }
.tp-cfoot__links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.tp-cfoot__links a { color: inherit; min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 760px) { .tp-cfoot { padding: 12px 24px; } }
/* === Checkout complete ================================= */
/* "Tack" page: the theme's light banner (like .tp-pbanner) across the frame, below it cells with 1px lines
   (Orderdetaljer · Leverans · Ordersammanfattning), the item list as rows,
   plugin buttons in theme style. The plugin's cards/shadows/centered column are disabled. */
.tp-complete [class*="qcom-"], .tp-complete [class*="checkout-complete__"] { border-radius: 0 !important; box-shadow: none !important; }
.tp-complete .checkout-complete__container { max-width: none; margin: 0; padding: 0; display: block; }
.tp-complete .checkout-complete__success-header { display: none; }
.tp-complete__hero { padding: 40px 16px 44px; border-bottom: var(--tp-border); background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--glow) 32%, transparent) 0%, transparent 55%), linear-gradient(180deg, #f3f5f9 0%, var(--tp-banner-end) 100%); color: var(--wp--preset--color--ink); }
.tp-complete__kicker { display: flex; align-items: center; gap: 12px; font-family: var(--wp--preset--font-family--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--wp--preset--color--stone); margin-bottom: 16px; }
.tp-complete__kicker::before { content: "✓"; display: inline-grid; place-items: center; width: 28px; height: 28px; background: #2f7d4f; color: #fff; font: 700 16px/1 var(--wp--preset--font-family--body); letter-spacing: 0; }
.tp-complete__hero h1 { margin: 0 0 12px; font: 400 clamp(28px, 4vw, 48px)/1 var(--wp--preset--font-family--heading); text-transform: uppercase; color: var(--wp--preset--color--ink); text-wrap: balance; }
.tp-complete__hero p { margin: 0; max-width: 60ch; font-size: 15px; line-height: 1.5; color: #4a5263; }
.tp-complete__cols { display: grid; gap: 0; border-bottom: var(--tp-border); }
.tp-complete__cols > * { margin-block-start: 0; }
.tp-complete__card { padding: 24px 16px; min-width: 0; }
.tp-complete__card + .tp-complete__card { border-top: var(--tp-border); }
.tp-complete__card:not(:has(.checkout-complete__card)) { display: none; } /* an empty block (e.g. no shipping) doesn't leave an empty cell */
/* Plugin card — no border or background, the heading is a mono label */
.tp-complete .checkout-complete__card { border: 0; padding: 0; margin: 0; background: none; }
.tp-complete .checkout-complete__card-header { display: block; margin: 0 0 18px; padding: 0; border: 0; }
.tp-complete .checkout-complete__card-icon, .tp-complete .checkout-complete__card-header > svg { display: none; }
.tp-complete .checkout-complete__card-title { margin: 0; font: 500 12px/1.2 var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--stone); }
/* Orderdetaljer */
.tp-complete .checkout-complete__fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.tp-complete .checkout-complete__field-label, .tp-complete .checkout-complete__address-label { margin: 0 0 4px; font: 500 11px/1.2 var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp--preset--color--stone); }
.tp-complete .checkout-complete__field-value { margin: 0; font: 600 16px/1.3 var(--wp--preset--font-family--body); color: var(--wp--preset--color--ink); font-variant-numeric: tabular-nums; }
/* Leverans */
.tp-complete .checkout-complete__delivery-content { display: grid; gap: 16px; }
.tp-complete .checkout-complete__delivery-method { margin: 0; font: 600 16px/1.3 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.02em; }
.tp-complete .checkout-complete__address-lines p { margin: 0; font-size: 15px; line-height: 1.45; }
/* Ordersammanfattning */
.tp-complete .checkout-complete__summary-rows { display: grid; gap: 10px; }
.tp-complete .checkout-complete__summary-rows[hidden] { display: none; }
.tp-complete .checkout-complete__summary-row { display: flex; justify-content: space-between; gap: 16px; font: 400 13px/1.3 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--stone); }
.tp-complete .checkout-complete__summary-value { color: var(--wp--preset--color--ink); font-variant-numeric: tabular-nums; }
.tp-complete .checkout-complete__summary-divider { margin: 16px 0; border: 0; border-top: var(--tp-border); }
.tp-complete .checkout-complete__summary-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.tp-complete .checkout-complete__total-label { font: 600 13px/1.2 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; }
.tp-complete .checkout-complete__total-value { font: 400 28px/1 var(--wp--preset--font-family--heading); font-variant-numeric: tabular-nums; }
/* Beställda artiklar — rows with lines */
.tp-complete__items { padding: 24px 16px 8px; border-bottom: var(--tp-border); }
.tp-complete__items .qcom-cart-list__items { display: grid; gap: 0; }
.tp-complete__items .qcom-cart-list__item-row { margin: 0; padding: 16px 0; border: 0; border-top: 1px solid var(--wp--preset--color--hairline); }
.tp-complete__items .qcom-checkout-cart-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.tp-complete__items .qcom-checkout-cart-item__image { width: 56px; height: 56px; border: 1px solid var(--wp--preset--color--hairline); background: #f7f8fa; overflow: hidden; }
.tp-complete__items .qcom-checkout-cart-item__image img { width: 100%; height: 100%; object-fit: contain; }
.tp-complete__items .qcom-checkout-cart-item__title { display: block; font: 600 14px/1.3 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.01em; }
.tp-complete__items .qcom-checkout-cart-item__meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font: 400 12px/1.3 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--stone); }
.tp-complete__items .qcom-checkout-cart-item__meta-divider { width: 1px; height: 12px; background: var(--wp--preset--color--hairline); }
.tp-complete__items .qcom-checkout-cart-item__stock--in-stock { color: var(--wp--preset--color--stock); }
.tp-complete__items .qcom-checkout-cart-item__total-price { font: 600 16px/1 var(--wp--preset--font-family--body); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Buttons (plugin): primary — blue, secondary — outlined */
.tp-complete .checkout-complete__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 32px 16px 48px; justify-content: flex-start; }
.tp-complete .checkout-complete__btn { box-sizing: border-box; max-width: 100%; justify-content: center; min-height: 52px; padding: 0 24px; border: 0; display: inline-flex; align-items: center; gap: 8px; font: 400 14px/1 var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; cursor: pointer; }
/* The plugin colors the primary button with its own --qcom-primary (black) at higher specificity. */
.tp-complete .checkout-complete__actions .checkout-complete__btn--primary { background: var(--wp--preset--color--accent) !important; color: #fff !important; }
.tp-complete .checkout-complete__btn--primary::after { content: "→"; }
.tp-complete .checkout-complete__actions .checkout-complete__btn--primary:hover { background: var(--wp--preset--color--accent-deep) !important; }
.tp-complete__items .qcom-checkout-cart-item__price { border: 0; padding: 0; margin: 0; }
.tp-complete .checkout-complete__btn--outline { background: #fff; color: var(--wp--preset--color--ink); border: var(--tp-border-ui); }
.tp-complete .checkout-complete__btn--outline:hover { background: var(--wp--preset--color--ink); color: #fff; }
/* Link error */
.tp-complete .checkout-complete__error { padding: 48px 16px; }
.tp-complete .checkout-complete__error-card { border: var(--tp-border-2); max-width: 560px; margin: 0 auto; padding: 32px; text-align: center; }
.tp-complete .checkout-complete__error-title { font: 400 28px/1.1 var(--wp--preset--font-family--heading); text-transform: uppercase; margin: 16px 0 8px; }
@media (min-width: 760px) {
  .tp-complete__hero, .tp-complete__card, .tp-complete__items { padding-left: 24px; padding-right: 24px; }
  .tp-complete .checkout-complete__actions { padding-left: 24px; padding-right: 24px; }
  .tp-complete__cols { grid-template-columns: 1fr 1fr; }
  .tp-complete__card + .tp-complete__card { border-top: 0; border-left: var(--tp-border); }
  .tp-complete__card--summary { grid-column: 1 / -1; border-left: 0 !important; border-top: var(--tp-border) !important; }
}
@media (min-width: 1024px) {
  .tp-complete__hero { padding: 56px 32px; }
  .tp-complete__card, .tp-complete__items { padding: 28px 32px; }
  .tp-complete .checkout-complete__actions { padding-left: 32px; padding-right: 32px; }
  .tp-complete__cols { grid-template-columns: 1fr 1fr 1fr; }
  .tp-complete__card--summary { grid-column: auto; border-left: var(--tp-border) !important; border-top: 0 !important; background: var(--wp--preset--color--mist); }
}

/* === Page banner & prose =============================== */
.tp-pbanner { padding: 32px 16px; background: var(--wp--preset--color--ink); color: #fff; border-bottom: var(--tp-border-2); }
.tp-pbanner p { margin: 0; }
.tp-pbanner__kicker { display: block; font-family: var(--wp--preset--font-family--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--wp--preset--color--signal); margin-bottom: 10px; }
.tp-pbanner__title { margin: 0; font: 400 clamp(28px, 4vw, 48px)/1 var(--wp--preset--font-family--heading); text-transform: uppercase; color: #fff; }
/* Light page banner (Mitt konto etc.) — like the category banner without a photo. */
.tp-pbanner { background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--glow) 32%, transparent) 0%, transparent 55%), linear-gradient(180deg, #f3f5f9 0%, var(--tp-banner-end) 100%); color: var(--wp--preset--color--ink); }
.tp-pbanner__kicker { color: var(--wp--preset--color--stone); }
.tp-pbanner__title { color: var(--wp--preset--color--ink); }
.tp-prose { padding: 32px 16px 64px; max-width: 72ch; font-size: 17px; line-height: 1.6; }
.tp-prose h2 { font: 400 24px/1.15 var(--wp--preset--font-family--heading); text-transform: uppercase; margin: 40px 0 12px; }
.tp-prose h2:first-child { margin-top: 0; }
.tp-prose h3 { font: 700 17px/1.3 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.03em; margin: 28px 0 8px; }
.tp-prose p, .tp-prose ul, .tp-prose ol { margin: 0 0 16px; }
.tp-prose ul { list-style: none; padding: 0; }
.tp-prose ul li { position: relative; padding-left: 20px; margin-bottom: 6px; }
.tp-prose ul li::before { content: "■"; position: absolute; left: 0; top: 0; color: var(--wp--preset--color--accent); font-size: 12px; line-height: 27px; }
.tp-prose ol { padding-left: 22px; }
.tp-prose a { color: var(--wp--preset--color--accent); }
.tp-prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 24px; }
.tp-prose td, .tp-prose th { padding: 10px 0; border-bottom: 1px solid var(--wp--preset--color--hairline); text-align: left; vertical-align: top; }
.tp-prose .tp-lead { font-size: 20px; line-height: 1.45; }
.tp-storeinfo { display: grid; gap: 16px; margin: 0 0 24px; }
.tp-storeinfo dt { font-family: var(--wp--preset--font-family--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--stone); margin-bottom: 4px; }
.tp-storeinfo dd { margin: 0; }
@media (min-width: 760px) { .tp-pbanner { padding: 48px 24px; } .tp-prose { padding: 40px 24px 80px; } .tp-storeinfo { grid-template-columns: 1fr 1fr; } }

/* === Account =========================================== */
.tp-account__body { padding: 32px 16px 64px; }
.tp-account .qcom-login-form, .tp-account .qcom-reset-password__error-container, .tp-account [class*="qcom-reset-password__form"], .tp-account .qcom-register-form { max-width: 480px; margin: 0 auto; border: var(--tp-border-2); padding: 28px 24px; background: var(--wp--preset--color--paper); box-sizing: border-box; }
.tp-account .qcom-login-form__title, .tp-account .qcom-reset-password__error-title, .tp-account .qcom-register-form__title { font: 400 26px/1 var(--wp--preset--font-family--heading); text-transform: uppercase; margin: 0 0 8px; }
.tp-account .qcom-login-form__field-label, .tp-account label { font: 600 13px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; }
.tp-account .qcom-input, .tp-account input:not([type="checkbox"]):not([type="radio"]) { min-height: 48px; border: var(--tp-border-ui); border-radius: 0 !important; padding: 0 12px; box-shadow: none; }
.tp-account .qcom-wp-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; background: var(--wp--preset--color--accent); color: #fff !important; border: 1px solid var(--wp--preset--color--accent); border-radius: 0 !important; font: 700 14px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; cursor: pointer; }
.tp-account .qcom-wp-button__link:hover { background: var(--wp--preset--color--accent-deep); border-color: var(--wp--preset--color--accent-deep); }
.tp-account .qcom-wp-button__link--link { background: none; color: var(--wp--preset--color--accent) !important; border-color: transparent; text-decoration: underline; padding: 0; min-height: 44px; }
.tp-account .qcom-wp-button__link--link:hover { background: none; }
.tp-account .qcom-wp-button--full-width .qcom-wp-button__link { width: 100%; }
.tp-account .qcom-login-form__auth-toggle { border: var(--tp-border-ui); background: var(--wp--preset--color--mist); border-radius: 0; }
.tp-account .qcom-login-form__forgot-password a { color: var(--wp--preset--color--accent); }
@media (min-width: 760px) { .tp-account__body { padding: 48px 24px 80px; } .tp-account .qcom-login-form, .tp-account .qcom-register-form { padding: 36px 32px; } }
/* --- Registration (/account/?register, customer-account block) -----------------
   Same language as the auth modal: white card on a light background, Privat/Företag tabs as
   a square ink toggle, sections as mono kickers with a rule, light fields with ink focus,
   a "Skapa konto →" button. Theme CSS only. */
.tp-account-guest .tp-account__body { background: var(--wp--preset--color--mist); }
.tp-account .qcom-account-register { width: 100%; max-width: 640px; margin: 0 auto; box-sizing: border-box; border: 1px solid var(--wp--preset--color--hairline); background: #fff; }
.tp-account .qcom-account-register__header { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 0; padding: 32px 24px 24px; margin: 0; text-align: left; }
.tp-account .qcom-account-register__title { flex: 1 0 100%; margin: 0 0 12px; font: 400 clamp(24px, 2.6vw, 30px)/1 var(--wp--preset--font-family--heading); text-transform: uppercase; color: var(--wp--preset--color--ink); }
.tp-account .qcom-account-register__login-hint { margin: 0; font-size: 14px; color: var(--wp--preset--color--stone); }
.tp-account .qcom-account-register__header p:empty { display: none; }
/* "Har du redan ett konto? Logga in här →" — one line in one font; the link is ink and underlined. */
.tp-account .qcom-account-register__header { column-gap: 6px !important; }
.tp-account .qcom-account-register__login-hint { margin: 0; font: 400 15px/1.4 var(--wp--preset--font-family--body); color: var(--wp--preset--color--stone); }
.tp-account .qcom-account-register__header .qcom-wp-button { display: inline-flex !important; margin: 0 0 0 auto !important; padding: 0 0 0 16px; }
/* Hint spans the full form width: text on the left, link on the right. */
.tp-account .qcom-account-register__login-hint { display: flex; flex: 1 0 100%; align-items: baseline; justify-content: space-between; }
/* Plugin: padding with !important and a rule via __login-hint (higher specificity) — hence !important. */
.tp-account .qcom-account-register__header .qcom-wp-button__link--link { display: inline !important; height: auto; min-height: 0 !important; padding: 0 !important; border: 0; background: none; font: 600 15px/1.4 var(--wp--preset--font-family--body) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--wp--preset--color--ink) !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px; cursor: pointer; }
.tp-account .qcom-account-register__header .qcom-wp-button__link--link::after { content: "→"; display: inline-block; margin-left: 6px; text-decoration: none; transition: transform 0.2s ease; }
.tp-account .qcom-account-register__header .qcom-wp-button__link--link:hover { color: var(--wp--preset--color--accent-deep) !important; }
.tp-account .qcom-account-register__header .qcom-wp-button__link--link:hover::after { transform: translateX(3px); }
.tp-account .qcom-account-register__tabs-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; height: auto; margin: 0 24px; padding: 0; border: 1px solid var(--wp--preset--color--ink); border-radius: 0 !important; background: #fff; }
.tp-account .qcom-account-register__tabs-list .qcom-tabs__trigger { min-height: 46px; margin: 0; padding: 0 12px; border: 0; border-radius: 0 !important; box-shadow: none !important; background: #fff; color: var(--wp--preset--color--ink); font: 600 13px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.tp-account .qcom-account-register__tabs-list .qcom-tabs__trigger + .qcom-tabs__trigger { border-left: 1px solid var(--wp--preset--color--ink); }
.tp-account .qcom-account-register__tabs-list .qcom-tabs__trigger[aria-selected="true"] { background: var(--wp--preset--color--ink); color: #fff; }
.tp-account .qcom-account-register__tabs-list .qcom-tabs__trigger[aria-selected="false"]:hover { background: var(--wp--preset--color--sand); }
.tp-account .qcom-account-register .qcom-tabs__content { margin: 0; padding: 8px 24px 32px; }
.tp-account .qcom-account-register .qcom-account-register__form-section { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.tp-account .qcom-account-register__form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; }
@media (min-width: 560px) { .tp-account .qcom-account-register__form-grid { grid-template-columns: 1fr 1fr; } }
.tp-account .qcom-account-register__section-title { margin: 16px 0 0; padding-top: 20px; border-top: 1px solid var(--wp--preset--color--hairline); font: 400 11px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--stone); }
.tp-account .qcom-account-register form > .qcom-account-register__form-section:first-child > .qcom-account-register__section-title { margin-top: 16px; padding-top: 0; border-top: 0; }
.tp-account .qcom-account-register .qcom-form-item { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.tp-account .qcom-account-register .qcom-label { margin: 0; font: 400 11px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--stone); }
.tp-account .qcom-account-register .qcom-input, .tp-account .qcom-account-register .iti__tel-input, .tp-account .qcom-account-register .qcom-select__trigger { height: 52px; min-height: 52px; border: 1px solid var(--wp--preset--color--hairline); background: var(--wp--preset--color--mist); color: var(--wp--preset--color--ink); transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; }
.tp-account .qcom-account-register .qcom-input:hover, .tp-account .qcom-account-register .iti__tel-input:hover, .tp-account .qcom-account-register .qcom-select__trigger:hover { border-color: #c3cad6; }
.tp-account .qcom-account-register .qcom-input:focus, .tp-account .qcom-account-register .iti__tel-input:focus, .tp-account .qcom-account-register .qcom-select__trigger:focus { outline: none; border-color: var(--wp--preset--color--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink); }
.tp-account .qcom-account-register .qcom-input[aria-invalid="true"] { border-color: #b42318; box-shadow: inset 0 0 0 1px #b42318; }
.tp-account .qcom-account-register .qcom-phone-input, .tp-account .qcom-account-register .iti { width: 100%; }
.tp-account .qcom-account-register .qcom-password-input__toggle { color: var(--wp--preset--color--stone); background: none; }
.tp-account .qcom-account-register .qcom-password-input__toggle:hover { color: var(--wp--preset--color--ink); background: none; }
/* "Lägg till adress" and consent checkboxes: ink square, label in regular text */
.tp-account .qcom-account-register .qcom-checkbox { flex: none; width: 20px; height: 20px; margin: 0; border: 1px solid var(--wp--preset--color--ink) !important; border-radius: 0 !important; background: #fff; }
.tp-account .qcom-account-register .qcom-checkbox[data-state="checked"] { background: var(--wp--preset--color--ink); color: #fff; }
.tp-account .qcom-account-register__checkbox-row, .tp-account .qcom-account-register form > .qcom-form-item:has(> .qcom-checkbox) { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; }
.tp-account .qcom-account-register__checkbox-label, .tp-account .qcom-account-register .qcom-form-item:has(> .qcom-checkbox) .qcom-label { margin: 0; font: 400 15px/1.4 var(--wp--preset--font-family--body); letter-spacing: 0; text-transform: none; color: var(--wp--preset--color--ink); cursor: pointer; }
.tp-account .qcom-account-register__terms-link { color: var(--wp--preset--color--ink); text-decoration: underline; text-underline-offset: 3px; }
.tp-account .qcom-account-register__required { color: #b42318; }
.tp-account .qcom-account-register form > .qcom-form-item:has(> .qcom-checkbox) { padding-top: 20px; border-top: 1px solid var(--wp--preset--color--hairline); }
/* Button */
.tp-account .qcom-account-register .qcom-wp-button { margin-top: 8px; }
.tp-account .qcom-account-register .qcom-wp-button__link:not(.qcom-wp-button__link--link) { min-height: 54px; background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); font: 400 15px/1 var(--wp--preset--font-family--heading); letter-spacing: 0.04em; }
.tp-account .qcom-account-register .qcom-wp-button__link:not(.qcom-wp-button__link--link)::after { content: "→"; margin-left: 10px; transition: transform 0.2s ease; }
.tp-account .qcom-account-register .qcom-wp-button__link:not(.qcom-wp-button__link--link):hover { background: var(--wp--preset--color--accent-deep); }
.tp-account .qcom-account-register .qcom-wp-button__link:not(.qcom-wp-button__link--link):hover::after { transform: translateX(4px); }
.tp-account .qcom-account-register .qcom-form-message { color: #b42318; }
@media (min-width: 760px) {
	.tp-account .qcom-account-register__header { padding: 40px 40px 28px; }
	.tp-account .qcom-account-register__tabs-list { margin: 0 40px; }
	.tp-account .qcom-account-register .qcom-tabs__content { padding: 8px 40px 40px; }
}
/* The plugin centers the header and gives the tabs width:100% on top of the card padding. */
.tp-account .qcom-account-register__header, .tp-account .qcom-account-register__title, .tp-account .qcom-account-register__login-hint { text-align: left !important; justify-content: flex-start !important; }
.tp-account .qcom-account-register > div[dir] { margin: 0 !important; padding: 0 !important; }
.tp-account .qcom-account-register__tabs-list { width: auto !important; box-sizing: border-box; }
.tp-account .qcom-account-register__header { padding-bottom: 4px; flex-direction: row !important; flex-wrap: wrap !important; align-items: baseline !important; }
/* Registration on desktop: two columns — a "Fördelar med konto" panel (tp_account_perks, light
   gradient like the banners, showcase car at the bottom) + the form card. Panel only with the registration form. */
.tp-perks { display: none; }
/* Account is loading (the plugin hasn't rendered React content yet — only a service <pre>):
   our loader is the animated logo mark, as in page transitions. */
/* Hide the plugin's skeletons (e.g. qcom-login-form-skeleton — even before registration): the same loader replaces them. */
.tp-account .wp-block-quickcommerce-customer-account > div > [class*="skeleton"] { display: none !important; }
.tp-account .wp-block-quickcommerce-customer-account > div:is(:has(> pre:only-child), :has(> [class*="skeleton"])) { position: relative; display: block !important; min-height: 420px; }
.tp-account .wp-block-quickcommerce-customer-account > div:is(:has(> pre:only-child), :has(> [class*="skeleton"]))::before { content: ""; position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; background: var(--wp--preset--color--accent); -webkit-mask: var(--tp-mark-loader) center / contain no-repeat; mask: var(--tp-mark-loader) center / contain no-repeat; }
/* Registration page — no "Mitt konto" banner: panel and form right below the header. */
.tp-account-guest .tp-account .tp-pbanner { display: none; }
@media (max-width: 1023px) { .tp-account-guest .tp-account__body { padding-top: 0; background: #fff; } .tp-account .qcom-account-register { border: 0; } }
@media (min-width: 1024px) {
	/* Full site frame width (no "card within a page"): panel | line | form. */
	.tp-account-guest .tp-account__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; max-width: none; margin: 0; padding: 0; box-sizing: border-box; background: #fff; }
	.tp-account-guest .tp-account__body > .wp-block-quickcommerce-customer-account, .tp-account-guest .tp-account__body .qcom-account-register { height: 100%; }
	.tp-account-guest .tp-account__body > .wp-block-quickcommerce-customer-account > div { display: block !important; height: 100%; }
	.tp-account .qcom-account-register { max-width: none; border: 0; padding: 24px 56px 64px !important; }
	.tp-account .qcom-account-register > * { max-width: 620px; }
	.tp-account-guest .tp-account__body > .wp-block-quickcommerce-customer-account, .tp-account-guest .tp-account__body > .wp-block-quickcommerce-customer-account > div { margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; }
	.tp-account-guest .tp-account__body .qcom-account-register { margin: 0 !important; min-height: 0 !important; }
	.tp-account__body:has(.tp-perks) .qcom-account-register__header { padding: 32px 0 4px; }
	.tp-account__body:has(.tp-perks) .qcom-account-register__tabs-list { margin: 0; }
	.tp-account__body:has(.tp-perks) .qcom-account-register .qcom-tabs__content { padding: 8px 0 0; }
	.tp-account-guest .tp-account__body .tp-perks { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 56px 56px 0; border: 0; border-right: 1px solid var(--wp--preset--color--hairline); background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--glow) 32%, transparent) 0%, transparent 55%), linear-gradient(180deg, #f3f5f9 0%, var(--tp-banner-end) 100%); color: var(--wp--preset--color--ink); }
}
.tp-perks__kicker { display: block; margin-bottom: 14px; font: 400 11px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--stone); }
.tp-perks__title { max-width: 14ch; margin: 0 0 32px; font: 400 clamp(28px, 2.6vw, 38px)/1.02 var(--wp--preset--font-family--heading); text-transform: uppercase; }
.tp-perks__list { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.tp-perks__item { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; line-height: 1.45; color: #4a5263; }
.tp-perks__item strong { display: block; margin-bottom: 2px; font: 600 14px/1.3 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--ink); }
.tp-perks__check { position: relative; flex: none; width: 28px; height: 28px; margin-top: -3px; background: var(--wp--preset--color--ink); }
.tp-perks__check::after { content: ""; position: absolute; left: 10px; top: 6px; width: 6px; height: 12px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tp-perks__img { display: block; width: 112%; max-width: none; height: auto; margin: auto -6% 0; padding: 32px 0 40px; box-sizing: border-box; }
@media (max-width: 559px) { .tp-account-guest .tp-account__body { padding-left: 0; padding-right: 0; } .tp-account .qcom-account-register { border-left: 0; border-right: 0; } }
/* Phone field country list (intl-tel-input) in the account: square, hairline lines;
   search gets room for the magnifier icon (the general account field rule set padding 0 12px). */
.tp-account .iti__dropdown-content, .tp-account .iti__country-selector { border: 1px solid var(--wp--preset--color--ink) !important; border-radius: 0 !important; box-shadow: 0 16px 32px rgb(20 28 44 / 0.12) !important; background: #fff; }
.tp-account .iti__search-input-wrapper { position: relative; }
.tp-account .iti__search-icon { left: 12px; color: var(--wp--preset--color--stone); }
.tp-account input.iti__search-input { height: 44px; min-height: 44px; padding: 0 12px 0 38px !important; border: 0 !important; border-bottom: 1px solid var(--wp--preset--color--hairline) !important; border-radius: 0 !important; background: #fff; font-size: 15px; box-shadow: none !important; }
.tp-account input.iti__search-input:focus { outline: none; box-shadow: inset 0 -2px 0 var(--wp--preset--color--ink) !important; }
.tp-account .iti__country { min-height: 40px; padding: 8px 12px; font-size: 15px; }
.tp-account .iti__country.iti__highlight { background: var(--wp--preset--color--sand); }
.tp-account .iti__country-check { color: var(--wp--preset--color--ink); }
/* Registration: "Skapar konto…" state — instead of the plugin's spinner (squared by the account's
   square-corners rule) our mark loader in white; the button stays ink, the arrow is hidden. */
.tp-account .qcom-account-register .qcom-wp-button__link:disabled, .tp-account .qcom-account-register .qcom-wp-button__link--disabled { background: var(--wp--preset--color--ink) !important; border-color: var(--wp--preset--color--ink) !important; opacity: 0.8; cursor: progress; }
.tp-account .qcom-account-register .qcom-wp-button__link:has(.qcom-account-register__spinner)::after { content: none; }
.tp-account .qcom-account-register__spinner { display: inline-block; flex: none; width: 22px; height: 22px; margin: 0 12px 0 0; border: 0 !important; border-radius: 0 !important; background: #fff; -webkit-mask: var(--tp-mark-loader) center / contain no-repeat; mask: var(--tp-mark-loader) center / contain no-repeat; animation: none !important; }
/* Registration error — as in the auth modal: red bar on the left, calm background, title in caps. */
.tp-account .qcom-account-register > .qcom-alert { box-sizing: border-box; margin: -16px 0 0 !important; } /* the plugin card is flex with a 32px gap; error sits closer to the button */
.tp-account .qcom-alert--error { position: relative; padding: 12px 44px 12px 14px; border: 1px solid #f0c7c3 !important; border-left: 3px solid #b42318 !important; background: #fdf4f3; box-shadow: none; }
.tp-account .qcom-alert--error .qcom-alert__title { margin: 0 0 4px; font: 400 13px/1.2 var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.02em; color: #b42318; }
.tp-account .qcom-alert--error .qcom-alert__description { display: block; font-size: 14px; line-height: 1.4; color: var(--wp--preset--color--ink); }
.tp-account .qcom-alert--error .qcom-alert__close { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: #b42318; cursor: pointer; }
.tp-account .qcom-alert--error .qcom-alert__close svg { width: 18px; height: 18px; }
.tp-account .qcom-alert--error .qcom-alert__close:hover { background: #f8e2df; }
/* --- Account login (/account/, guest) — same language as registration and the auth modal:
   heading + "Ny kund? Skapa konto →", mono labels, light fields with ink focus,
   "Glömt lösenordet?" as calm text, code toggle below a rule, ink button with an arrow. */
.tp-account-guest .tp-account .qcom-login-form { max-width: 640px; border: 0; padding: 32px 24px 48px; background: #fff; }
.tp-account .qcom-login-form__header { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 0 0 28px; text-align: left; }
.tp-account .qcom-login-form__title { margin: 0; font: 400 clamp(24px, 2.6vw, 30px)/1 var(--wp--preset--font-family--heading); text-transform: uppercase; color: var(--wp--preset--color--ink); }
.tp-account .qcom-login-form__register-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: 100%; margin: 0; }
.tp-account .qcom-login-form__register-label { font: 400 15px/1.4 var(--wp--preset--font-family--body); color: var(--wp--preset--color--stone); }
.tp-account .qcom-login-form .qcom-wp-button:not(.qcom-wp-button--full-width) { display: inline-flex !important; margin: 0 !important; padding: 0; }
.tp-account .qcom-login-form .qcom-wp-button__link--link { display: inline !important; height: auto; min-height: 0 !important; padding: 0 !important; border: 0; background: none; font: 600 15px/1.4 var(--wp--preset--font-family--body) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--wp--preset--color--ink) !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px; cursor: pointer; }
.tp-account .qcom-login-form__register-row .qcom-wp-button__link--link::after { content: "→"; display: inline-block; margin-left: 6px; text-decoration: none; transition: transform 0.2s ease; }
.tp-account .qcom-login-form__register-row .qcom-wp-button__link--link:hover::after { transform: translateX(3px); }
.tp-account .qcom-login-form .qcom-wp-button__link--link:hover { color: var(--wp--preset--color--accent-deep) !important; }
.tp-account .qcom-login-form__forgot-password .qcom-wp-button__link--link { font-weight: 400 !important; font-size: 14px !important; color: var(--wp--preset--color--stone) !important; text-decoration: none !important; }
.tp-account .qcom-login-form__forgot-password .qcom-wp-button__link--link:hover { color: var(--wp--preset--color--ink) !important; text-decoration: underline !important; }
.tp-account .qcom-login-form__forgot-password { display: flex; justify-content: flex-start; margin: 10px 0 0; padding: 0; }
.tp-account .qcom-login-form__section { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.tp-account .qcom-login-form__section > div:not([class]) { display: flex; flex-direction: column; gap: 8px; }
.tp-account .qcom-login-form__field-label { margin: 0; font: 400 11px/1 var(--wp--preset--font-family--mono) !important; letter-spacing: 0.12em !important; text-transform: uppercase; color: var(--wp--preset--color--stone); }
.tp-account .qcom-login-form .qcom-input { height: 52px; min-height: 52px; border: 1px solid var(--wp--preset--color--hairline); background: var(--wp--preset--color--mist); color: var(--wp--preset--color--ink); transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; }
.tp-account .qcom-login-form .qcom-input:hover { border-color: #c3cad6; }
.tp-account .qcom-login-form .qcom-input:focus { outline: none; border-color: var(--wp--preset--color--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink); }
.tp-account .qcom-login-form input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--wp--preset--color--mist) inset; -webkit-text-fill-color: var(--wp--preset--color--ink); }
.tp-account .qcom-login-form__auth-toggle { margin: 4px 0 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--wp--preset--color--hairline); background: none; }
.tp-account .qcom-login-form__auth-toggle-label { font-size: 14px; color: var(--wp--preset--color--ink); }
.tp-account .qcom-login-form .qcom-switch { background: #c3cad6 !important; }
.tp-account .qcom-login-form .qcom-switch[data-state="checked"] { background: var(--wp--preset--color--ink) !important; }
.tp-account .qcom-login-form .qcom-wp-button--full-width .qcom-wp-button__link { min-height: 54px; background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); font: 400 15px/1 var(--wp--preset--font-family--heading); letter-spacing: 0.04em; }
.tp-account .qcom-login-form .qcom-wp-button--full-width .qcom-wp-button__link::after { content: "→"; margin-left: 10px; transition: transform 0.2s ease; }
.tp-account .qcom-login-form .qcom-wp-button--full-width .qcom-wp-button__link:hover { background: var(--wp--preset--color--accent-deep); }
.tp-account .qcom-login-form .qcom-wp-button--full-width .qcom-wp-button__link:hover::after { transform: translateX(4px); }
.tp-account .qcom-login-form .qcom-wp-button__link:disabled { background: var(--wp--preset--color--ink) !important; opacity: 0.8; cursor: progress; }
/* Labeled field — on any login form screen (login, "Glömt lösenordet?", code): 8px between label and field. */
.tp-account .qcom-login-form div:has(> .qcom-login-form__field-label) { display: flex; flex-direction: column; gap: 8px; }
/* "Glömt lösenordet?" → "Återställ lösenord": subheading, description, field and two equal-height buttons. */
.tp-account .qcom-login-form__reset-section { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.tp-account .qcom-login-form__reset-header { margin: 0; padding-top: 20px; border-top: 1px solid var(--wp--preset--color--hairline); }
.tp-account .qcom-login-form__reset-title { margin: 0; font: 400 18px/1.2 var(--wp--preset--font-family--heading); text-transform: uppercase; color: var(--wp--preset--color--ink); }
.tp-account .qcom-login-form__reset-description { display: block; margin: -4px 0 4px; font-size: 15px; line-height: 1.5; color: var(--wp--preset--color--stone); }
.tp-account .qcom-login-form__reset-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 0; }
.tp-account .qcom-login-form__reset-actions .qcom-wp-button { display: flex; margin: 0; }
.tp-account .qcom-login-form__reset-actions .qcom-login-form__reset-submit { flex: 1 1 260px; }
.tp-account .qcom-login-form__reset-actions .qcom-wp-button__link { width: 100%; min-height: 54px; }
.tp-account .qcom-login-form__reset-submit .qcom-wp-button__link { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); font: 400 15px/1 var(--wp--preset--font-family--heading); letter-spacing: 0.04em; }
.tp-account .qcom-login-form__reset-submit .qcom-wp-button__link::after { content: "→"; margin-left: 10px; transition: transform 0.2s ease; }
.tp-account .qcom-login-form__reset-submit .qcom-wp-button__link:hover { background: var(--wp--preset--color--accent-deep); }
.tp-account .qcom-login-form__reset-submit .qcom-wp-button__link:hover::after { transform: translateX(4px); }
.tp-account .qcom-login-form__reset-actions .is-style-outline .qcom-wp-button__link { padding: 0 28px; background: #fff !important; color: var(--wp--preset--color--ink) !important; border: 1px solid var(--wp--preset--color--ink) !important; }
.tp-account .qcom-login-form__reset-actions .is-style-outline .qcom-wp-button__link:hover { background: var(--wp--preset--color--sand) !important; }
.tp-account .qcom-login-form__alert:empty { display: none; }
.tp-account .qcom-login-form__alert { margin: 16px 0 0; }
@media (min-width: 1024px) {
	.tp-account-guest .tp-account .qcom-login-form { max-width: none; height: 100%; margin: 0 !important; padding: 56px 56px 64px; box-sizing: border-box; }
	.tp-account-guest .tp-account .qcom-login-form > * { max-width: 520px; }
}
@media (max-width: 1023px) { .tp-account-guest .tp-account .qcom-login-form { margin: 0 auto; } }
/* --- Account (customer-account block) ------------------------------------------
   Language as in checkout/"Tack": 1px black lines, no radii or shadows, Archivo Black
   for headings, mono for labels, blue actions. On desktop — two columns across the frame:
   sidebar menu with a right-hand line down to the footer, content as continuous cells. */
.tp-account [class*="qcom-account"], .tp-account [class*="qcom-card"], .tp-account [class*="qcom-uncompleted"],
.tp-account [class*="qcom-order-details"], .tp-account [class*="qcom-invoice-details"], .tp-account [class*="qcom-price-block"],
.tp-account .qcom-select__trigger, .tp-account .qcom-alert, .tp-account .qcom-button, .tp-account .qcom-switch, .tp-account .qcom-switch__thumb { border-radius: 0 !important; box-shadow: none !important; }
.tp-account .qcom-account-page { min-height: 0; font-size: 15px; color: var(--wp--preset--color--ink); }
.tp-account .qcom-account-page__container, .tp-account .qcom-account-page__layout { max-width: none; width: 100%; margin: 0; box-sizing: border-box; } /* the plugin's margin:auto in a flex column centered and shrank the layout to its content */
.tp-account .qcom-account-section { gap: 24px; }
.tp-account .qcom-account-header { gap: 16px; }
.tp-account .qcom-account-title { font: 400 clamp(24px, 2.4vw, 32px)/1 var(--wp--preset--font-family--heading); text-transform: uppercase; }
.tp-account .qcom-account-subtitle { font: 400 18px/1.1 var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.01em; }
.tp-account .qcom-account-subtitle > svg { display: none; }
.tp-account label.qcom-account-settings__radio-label { font: 500 15px/1.3 var(--wp--preset--font-family--body); text-transform: none; letter-spacing: 0; }
@media (min-width: 1024px) {
  /* The sidebar line runs down to the footer: main and all wrappers down to __layout stretch in height
     (React wrappers of unknown depth — hence :has rather than a list of classes). */
  main.tp-account:has(.qcom-account-page__layout), .tp-account :is(div):has(.qcom-account-page__layout) { display: flex; flex-direction: column; flex: 1 0 auto; }
  .tp-account__body:has(.qcom-account-page__layout) { padding: 0; }
  .tp-account .qcom-account-page__layout { flex: 1 0 auto; gap: 0; align-items: stretch; }
  .tp-account .qcom-account-page__content { padding: 40px 32px 80px; }
}
/* Sidebar: black "header" with the name, items as rows with lines */
.tp-account .qcom-account-page__sidebar { align-self: stretch; width: 280px; border-right: var(--tp-border); background: var(--wp--preset--color--paper); }
.tp-account .qcom-account-page__sidebar-user { padding: 24px; border-bottom: var(--tp-border); background: var(--wp--preset--color--ink); color: #fff; }
.tp-account .qcom-account-page__sidebar-user::before { content: "Inloggad som"; display: block; margin-bottom: 10px; font: 500 11px/1 var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--wp--preset--color--signal); }
.tp-account .qcom-account-page__sidebar-user-name { font: 400 17px/1.2 var(--wp--preset--font-family--heading); text-transform: uppercase; color: #fff; }
.tp-account .qcom-account-page__sidebar-user-email { margin-top: 6px; font: 400 12px/1.3 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--hairline); }
.tp-account .qcom-account-page__sidebar-nav { gap: 0; }
.tp-account .qcom-account-page__sidebar-btn { gap: 12px; min-height: 52px; padding: 0 24px; border: 0; border-bottom: var(--tp-border); border-radius: 0; font: 600 13px/1 var(--wp--preset--font-family--body) !important; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--ink) !important; }
.tp-account .qcom-account-page__sidebar-btn:hover { background: var(--wp--preset--color--sand); color: var(--wp--preset--color--ink) !important; }
.tp-account .qcom-account-page__sidebar-btn--active, .tp-account .qcom-account-page__sidebar-btn--active:hover { background: var(--wp--preset--color--accent) !important; color: #fff !important; }
.tp-account .qcom-account-page__sidebar-btn svg { width: 18px; height: 18px; }
.tp-account .qcom-account-page__sidebar-label { font-size: inherit; }
/* Mobile bottom navigation */
.qcom-account-page__mobile-nav { border-top: var(--tp-border) !important; background: var(--wp--preset--color--paper) !important; }
.qcom-account-page__mobile-tab { gap: 5px !important; min-height: 60px; }
.qcom-account-page__mobile-tab + .qcom-account-page__mobile-tab { border-left: 1px solid var(--wp--preset--color--hairline) !important; }
.qcom-account-page__mobile-tab, .qcom-account-page__mobile-tab:not(.qcom-account-page__mobile-tab--active):hover { color: var(--wp--preset--color--ink) !important; }
.qcom-account-page__mobile-tab--active { color: #fff !important; background: var(--wp--preset--color--accent) !important; }
.qcom-account-page__mobile-tab-label { font: 500 10px/1 var(--wp--preset--font-family--mono) !important; text-transform: uppercase; letter-spacing: 0.04em; }

/* Cards → cells with 1px lines; header is a mist strip with a bottom line */
.tp-account .qcom-card { border: var(--tp-border); background: var(--wp--preset--color--paper); }
.tp-account .qcom-card__header { padding: 16px 24px; min-height: 64px; box-sizing: border-box; justify-content: center; border-bottom: var(--tp-border); background: var(--wp--preset--color--mist); }
.tp-account .qcom-card__content { padding: 24px; }
.tp-account .qcom-card__header + .qcom-card__content { padding-top: 24px; }
.tp-account .qcom-card__title { font: 400 18px/1.1 var(--wp--preset--font-family--heading); text-transform: uppercase; }
.tp-account .qcom-card__description { font-size: 14px; color: var(--wp--preset--color--stone); }
/* Profile/settings cards join into a continuous list — no gaps or double lines */
.tp-account .qcom-account-stack { gap: 0; }
.tp-account .qcom-account-divider { border-top: 0; padding-top: 0; }
.tp-account .qcom-account-stack > * + * > .qcom-card, .tp-account .qcom-account-stack > .qcom-card + .qcom-card { border-top: 0; }
/* Read-only fields: mono label + value, no gray boxes */
.tp-account .qcom-account-grid-2 { gap: 20px 24px; }
.tp-account .qcom-account-stack--sm { gap: 20px; }
.tp-account .qcom-account-form-group { gap: 6px; }
.tp-account .qcom-account-field-label, .tp-account .qcom-account-form-group > label, .tp-account .qcom-form-label, .qcom-account-page__modal-dialog label { display: flex; align-items: center; gap: 6px; margin: 0; font: 500 12px/1.2 var(--wp--preset--font-family--mono) !important; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp--preset--color--stone); }
.tp-account .qcom-account-field-label svg { width: 14px; height: 14px; }
.tp-account .qcom-account-field { padding: 0 0 10px; background: none; border: 0; border-bottom: 1px solid var(--wp--preset--color--hairline); font: 600 16px/1.35 var(--wp--preset--font-family--body); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* Plugin buttons (qcom-wp-button): primary — blue, outline — black outlined, sm — 40px */
.tp-account .wp-block-button__link, .qcom-account-page__modal-dialog .wp-block-button__link, .qcom-uncompleted-orders__dialog-actions .wp-block-button__link, .qcom-order-details__cart-dialog-actions .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px !important; background: var(--wp--preset--color--accent); color: #fff !important; border: 1px solid var(--wp--preset--color--accent); border-radius: 0 !important; font: 700 13px/1 var(--wp--preset--font-family--body) !important; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; box-shadow: none; }
.tp-account .wp-block-button__link:hover, .qcom-account-page__modal-dialog .wp-block-button__link:hover { background: var(--wp--preset--color--accent-deep); border-color: var(--wp--preset--color--accent-deep); }
.tp-account .qcom-wp-button__link--size-sm { min-height: 40px; padding: 0 14px !important; font-size: 12px !important; }
.tp-account .qcom-wp-button__link svg { width: 16px; height: 16px; }
.tp-account .is-style-outline .wp-block-button__link, .qcom-account-page__modal-dialog .is-style-outline .wp-block-button__link, .qcom-uncompleted-orders__dialog-actions .is-style-outline .wp-block-button__link, .qcom-order-details__cart-dialog-actions .is-style-outline .wp-block-button__link { background: var(--wp--preset--color--paper) !important; color: var(--wp--preset--color--ink) !important; border: var(--tp-border-ui) !important; }
.tp-account .is-style-outline .wp-block-button__link:hover, .qcom-account-page__modal-dialog .is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--ink) !important; color: #fff !important; border-color: var(--wp--preset--color--ink) !important; }
.tp-account .qcom-wp-button__link--destructive { background: #b3261e !important; border-color: #b3261e !important; }
.tp-account .qcom-wp-button__link--ghost { background: transparent !important; color: var(--wp--preset--color--ink) !important; border-color: transparent !important; }
.tp-account .qcom-button { min-height: 40px; font: 700 12px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; }
.tp-account .qcom-button--outline { border: var(--tp-border-ui); }
.tp-account .qcom-button--default { background: var(--wp--preset--color--accent); color: #fff; }
/* Form fields in edit mode */
.tp-account .qcom-input, .tp-account .iti__tel-input, .tp-account .qcom-select__trigger, .tp-account .qcom-country-input__static,
.qcom-account-page__modal-dialog .qcom-input, .qcom-account-page__modal-dialog .iti__tel-input, .qcom-account-page__modal-dialog .qcom-select__trigger, .qcom-account-page__modal-dialog .qcom-country-input__static { height: 48px; min-height: 48px; border: var(--tp-border-ui); border-radius: 0 !important; background: #fff; box-shadow: none; font-size: 15px; }
.tp-account .qcom-input:focus, .tp-account .iti__tel-input:focus, .tp-account .qcom-select__trigger:focus,
.qcom-account-page__modal-dialog .qcom-input:focus, .qcom-account-page__modal-dialog .qcom-select__trigger:focus { outline: none; border-color: var(--wp--preset--color--accent); box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent); }
.tp-account .qcom-country-input__static { background: var(--wp--preset--color--mist); }
.tp-account .qcom-form-message, .qcom-account-page__modal-dialog .qcom-form-message { font: 500 12px/1.3 var(--wp--preset--font-family--mono); }
.tp-account .qcom-alert { border-color: var(--tp-line); }
body:has(.tp-account) .qcom-select__content { border: var(--tp-border) !important; border-radius: 0 !important; box-shadow: none !important; }
body:has(.tp-account) .qcom-select__item { border-radius: 0; min-height: 40px; font-size: 14px; }
body:has(.tp-account) .qcom-select__item[data-highlighted] { background: var(--wp--preset--color--sand); color: var(--wp--preset--color--ink); }
/* --- Logged-in customer account — same language as login/registration ---------------
   No banner; the sidebar is a light gradient panel (like "Fördelar med konto"), the active item is
   a white box with an ink bar; content is separate white cards with hairlines, card headers white,
   header actions ("Redigera", "Ändra") are outlined buttons. */
.tp-account-member .tp-account .tp-pbanner { display: none; }
.tp-account-member .tp-account .tp-account__body { margin-top: 0 !important; padding-top: 0 !important; }
.tp-account .tp-account__body > .wp-block-quickcommerce-customer-account { margin-top: 0 !important; } /* WP block spacing after the hidden perks panel */
.tp-account .qcom-account-page__sidebar-user-name { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }
.tp-account .qcom-account-page__sidebar { width: 300px; border: 0 !important; border-right: 1px solid var(--wp--preset--color--hairline) !important; background: radial-gradient(140% 60% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--glow) 28%, transparent) 0%, transparent 60%), linear-gradient(180deg, #f3f5f9 0%, var(--tp-banner-end) 100%) !important; }
.tp-account .qcom-account-page__sidebar-user { padding: 48px 32px 28px; border-bottom: 1px solid var(--wp--preset--color--hairline); background: none; color: var(--wp--preset--color--ink); }
.tp-account .qcom-account-page__sidebar-user::before { margin-bottom: 12px; font: 400 11px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.14em; color: var(--wp--preset--color--stone); }
.tp-account .qcom-account-page__sidebar-user-name { margin: 0; font: 400 24px/1.05 var(--wp--preset--font-family--heading); color: var(--wp--preset--color--ink); }
.tp-account .qcom-account-page__sidebar-user-email { margin: 8px 0 0; font: 400 14px/1.3 var(--wp--preset--font-family--body); color: var(--wp--preset--color--stone); overflow-wrap: anywhere; }
.tp-account .qcom-account-page__sidebar-nav { padding: 16px 0; }
.tp-account .qcom-account-page__sidebar-btn { position: relative; min-height: 50px; padding: 0 32px; border-bottom: 0; background: transparent; color: var(--wp--preset--color--ink) !important; transition: background-color 0.15s ease; }
.tp-account .qcom-account-page__sidebar-btn svg { color: var(--wp--preset--color--stone); transition: color 0.15s ease; }
.tp-account .qcom-account-page__sidebar-btn:hover { background: rgb(255 255 255 / 0.6); }
.tp-account .qcom-account-page__sidebar-btn--active, .tp-account .qcom-account-page__sidebar-btn--active:hover { background: #fff !important; color: var(--wp--preset--color--ink) !important; box-shadow: inset 3px 0 0 var(--wp--preset--color--ink); }
.tp-account .qcom-account-page__sidebar-btn--active svg, .tp-account .qcom-account-page__sidebar-btn:hover svg { color: var(--wp--preset--color--ink); }
@media (min-width: 1024px) { .tp-account .qcom-account-page__content { padding: 56px 56px 96px; } }
.tp-account .qcom-account-title { margin-bottom: 8px; font-size: clamp(28px, 2.8vw, 38px); }
.tp-account .qcom-account-stack { gap: 24px; }
.tp-account .qcom-account-stack > * + * > .qcom-card, .tp-account .qcom-account-stack > .qcom-card + .qcom-card { border-top: 1px solid var(--wp--preset--color--hairline); }
.tp-account .qcom-card { border: 1px solid var(--wp--preset--color--hairline); background: #fff; }
.tp-account .qcom-card__header { min-height: 68px; padding: 16px 28px; border-bottom: 1px solid var(--wp--preset--color--hairline); background: #fff; }
.tp-account .qcom-card__content { padding-left: 28px; padding-right: 28px; padding-bottom: 28px; }
.tp-account .qcom-account-subtitle { font-size: 16px; letter-spacing: 0.02em; }
/* Card header actions — outlined (not primary) */
.tp-account .qcom-card__header .wp-block-button__link { min-height: 40px; padding: 0 16px; background: #fff !important; color: var(--wp--preset--color--ink) !important; border: 1px solid var(--wp--preset--color--ink) !important; transition: background-color 0.15s ease, color 0.15s ease; }
.tp-account .qcom-card__header .wp-block-button__link:hover { background: var(--wp--preset--color--ink) !important; color: #fff !important; }
.tp-account .qcom-account-field { font-weight: 500; }
@media (max-width: 1023px) { .tp-account .qcom-account-page__sidebar-user { padding: 28px 24px 20px; } .tp-account .qcom-account-page__sidebar-btn { padding: 0 24px; } }
/* Phone: spacing above the heading; bottom tabs — labels don't overflow (compact font, truncation). */
@media (max-width: 1023px) { .tp-account-member .tp-account .qcom-account-page__content { padding-top: 28px; } }
.qcom-account-page__mobile-tab { min-width: 0; overflow: hidden; padding-left: 2px !important; padding-right: 2px !important; }
.qcom-account-page__mobile-tab-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 9px/1.1 var(--wp--preset--font-family--body) !important; letter-spacing: 0 !important; }
/* --- Account tab content: one system ----------------------------------------------------
   Tab heading + action on the right, a line below. Sections with a header (Profil, Inställningar) are
   box-less rows: name and action on the left, content on the right, hairline between sections.
   Lists (Beställningar, Fakturor, Adresser, Önskelista) — no "frame within a frame": the search panel
   and table sit right under the heading. Fields — mono label above the value, no underlines. */
.tp-account-member .tp-account .qcom-account-section { gap: 0; }
.tp-account-member .tp-account .qcom-account-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0; padding-bottom: 24px; border-bottom: 1px solid var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-account-section > .qcom-account-title { margin: 0; padding-bottom: 24px; border-bottom: 1px solid var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-account-header .qcom-account-title { margin: 0; }
.tp-account-member .tp-account .qcom-account-refresh { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0; border: 0; background: none; font: 600 13px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--stone); cursor: pointer; }
.tp-account-member .tp-account .qcom-account-refresh:hover { color: var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-account-refresh svg { width: 16px; height: 16px; }

/* Sections with a header → a "name | content" row */
.tp-account-member .tp-account .qcom-account-stack { gap: 0 !important; }
.tp-account-member .tp-account .qcom-account-divider { margin: 0; padding: 0; border: 0; }
.tp-account-member .tp-account .qcom-card:has(> .qcom-card__header) { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); column-gap: 48px; border: 0 !important; border-bottom: 1px solid var(--wp--preset--color--hairline) !important; background: none; }
.tp-account-member .tp-account .qcom-card:has(> .qcom-card__header) > .qcom-card__header { display: block; min-height: 0; padding: 32px 0; border: 0; background: none; }
.tp-account-member .tp-account .qcom-card:has(> .qcom-card__header) > .qcom-card__content { display: flex; flex-direction: column; gap: 24px; padding: 32px 0 !important; }
.tp-account-member .tp-account .qcom-account-profile__section-header { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.tp-account-member .tp-account .qcom-account-subtitle, .tp-account-member .tp-account .qcom-account-settings__section-title { margin: 0; font: 400 16px/1.2 var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.02em; color: var(--wp--preset--color--ink); }
@media (max-width: 899px) {
	.tp-account-member .tp-account .qcom-card:has(> .qcom-card__header) { grid-template-columns: 1fr; }
	.tp-account-member .tp-account .qcom-card:has(> .qcom-card__header) > .qcom-card__header { padding: 24px 0 16px; }
	.tp-account-member .tp-account .qcom-card:has(> .qcom-card__header) > .qcom-card__content { padding: 0 0 24px !important; }
	.tp-account-member .tp-account .qcom-account-profile__section-header { flex-direction: row; align-items: center; justify-content: space-between; }
	.tp-account-member .tp-account .qcom-account-profile__section-header .wp-block-button__link { width: auto; }
	.tp-account-member .tp-account .qcom-account-profile__section-header > *:not(h3) { position: static !important; flex: none; width: auto !important; margin: 0 !important; }
	.tp-account-member .tp-account .qcom-account-profile__section-header .qcom-account-subtitle { flex: 1; min-width: 0; }
	.tp-account-member .tp-account .qcom-account-header { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; justify-content: space-between !important; text-align: left; }
	.tp-account-member .tp-account .qcom-account-header .qcom-account-title { flex: 1 1 auto; text-align: left; }
}

/* Fields: label above the value, no underlines; two columns */
.tp-account-member .tp-account .qcom-account-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px 40px; }
.tp-account-member .tp-account .qcom-account-form-group { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.tp-account-member .tp-account .qcom-account-field-label { font: 400 11px/1 var(--wp--preset--font-family--mono) !important; letter-spacing: 0.12em !important; color: var(--wp--preset--color--stone) !important; }
.tp-account-member .tp-account .qcom-account-field { padding: 0; border: 0; font: 500 16px/1.4 var(--wp--preset--font-family--body); color: var(--wp--preset--color--ink); }

/* Lists: no outer card */
.tp-account-member .tp-account .qcom-card:not(:has(> .qcom-card__header)) { border: 0 !important; background: none; }
.tp-account-member .tp-account .qcom-card:not(:has(> .qcom-card__header)) > .qcom-card__content { padding: 0 !important; }
.tp-account-member .tp-account .qcom-account-toolbar { display: flex; gap: 8px; margin: 0; padding: 20px 0; }
.tp-account-member .tp-account .qcom-account-search { flex: 1; }
.tp-account-member .tp-account .qcom-account-search .qcom-input, .tp-account-member .tp-account .qcom-account-toolbar .qcom-select__trigger { height: 48px; min-height: 48px; border: 1px solid var(--wp--preset--color--hairline); background: var(--wp--preset--color--mist); }
.tp-account-member .tp-account .qcom-account-search .qcom-input:focus { border-color: var(--wp--preset--color--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-account-sort-btn { min-height: 48px; padding: 0 16px; border: 1px solid var(--wp--preset--color--hairline); background: #fff; font: 400 11px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.12em; cursor: pointer; }
.tp-account-member .tp-account .qcom-account-sort-btn:hover { border-color: var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-account-orders__filters { display: flex; gap: 0; margin: 20px 0 0; border: 1px solid var(--wp--preset--color--ink); width: max-content; }
.tp-account-member .tp-account .qcom-account-orders__filter-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; background: #fff; font: 600 12px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--ink); cursor: pointer; }
.tp-account-member .tp-account .qcom-account-orders__filter-btn + .qcom-account-orders__filter-btn { border-left: 1px solid var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-account-orders__filter-btn--active { background: var(--wp--preset--color--ink); color: #fff; }
.tp-account-member .tp-account .qcom-account-orders__filter-count { font: 400 11px/1 var(--wp--preset--font-family--mono); opacity: 0.7; background: none !important; color: inherit !important; padding: 0 !important; }
/* Tables: mono header above an ink line, hairline rows, sand on hover */
.tp-account-member .tp-account .qcom-account-orders__table-head, .tp-account-member .tp-account .qcom-account-addresses__thead { padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--wp--preset--color--ink); background: none !important; font: 400 11px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--stone); }
.tp-account-member .tp-account .qcom-account-orders__table-row, .tp-account-member .tp-account .qcom-account-addresses__row { border-bottom: 1px solid var(--wp--preset--color--hairline); background: none; transition: background-color 0.15s ease; }
.tp-account-member .tp-account .qcom-account-orders__table-row:hover, .tp-account-member .tp-account .qcom-account-addresses__row:hover { background: var(--wp--preset--color--mist); }
.tp-account-member .tp-account .qcom-account-orders__cell--primary { font-weight: 600; }
.tp-account-member .tp-account .qcom-account-orders__cell--primary:empty::before { content: "—"; color: var(--wp--preset--color--stone); font-weight: 400; }
.tp-account-member .tp-account .qcom-account-orders__status-badge { border-radius: 0; font: 400 11px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.08em; padding: 5px 8px; }
.tp-account-member .tp-account .qcom-account-addresses__row--default { box-shadow: inset 3px 0 0 var(--wp--preset--color--ink); }
/* Empty states */
.tp-account-member .tp-account .qcom-account-empty, .tp-account-member .tp-account .qcom-account-wishlist__empty { margin: 24px 0 0; padding: 56px 24px; border: 1px solid var(--wp--preset--color--hairline); background: var(--wp--preset--color--mist); text-align: center; }
.tp-account-member .tp-account .qcom-account-empty svg, .tp-account-member .tp-account .qcom-account-wishlist__empty-icon-wrap { color: var(--wp--preset--color--stone); background: none !important; }
.tp-account-member .tp-account .qcom-account-empty__title, .tp-account-member .tp-account .qcom-account-wishlist__empty-title { margin: 12px 0 6px; font: 400 18px/1.2 var(--wp--preset--font-family--heading); text-transform: uppercase; color: var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-account-empty__text, .tp-account-member .tp-account .qcom-account-wishlist__empty-text { max-width: 44ch; margin: 0 auto; font-size: 15px; line-height: 1.5; color: var(--wp--preset--color--stone); }
.tp-account-member .tp-account .qcom-account-wishlist__empty .qcom-wp-button { margin-top: 20px; }
/* Prisvisning: radio — ink */
.tp-account-member .tp-account .qcom-account-settings__radio-group { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; border: 0; }
.tp-account-member .tp-account .qcom-account-settings__price-legend { margin-bottom: 4px; font: 400 11px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--stone); }
.tp-account-member .tp-account .qcom-account-settings__radio-label { display: flex; align-items: center; gap: 12px; font-size: 15px; cursor: pointer; }
.tp-account-member .tp-account .qcom-account-settings__radio-circle { border-color: var(--wp--preset--color--ink) !important; }
.tp-account-member .tp-account .qcom-account-settings__radio-dot { background: var(--wp--preset--color--ink) !important; }
/* Account: content at full width next to the panel; smaller spacing above the tab heading. */
@media (min-width: 1024px) { .tp-account-member .tp-account .qcom-account-page__content { padding: 32px 48px 96px; } }
.tp-account-member .tp-account .qcom-account-page__content > .qcom-tabs__content { max-width: none; }
.tp-account .qcom-account-page__sidebar-btn:focus { outline: none; }
.tp-account .qcom-account-page__sidebar-btn:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: -2px; }

/* Adresser: cards in a grid on desktop too (the plugin table is hidden). Street as the heading, city and
   country below it, "Fakturering" / "Standardleverans" labels (from the icons' title), actions at the bottom below a line. */
/* Adresser — list: on desktop the plugin table (account table styles above), postcode + city in bold,
   "Fakturering" / "Standardleverans" labels as text (from the icons' title); on phone — rows without cards. */
.tp-account-member .tp-account .qcom-account-addresses__row-inner { min-height: 64px; }
.tp-account-member .tp-account .qcom-account-addresses__cell { font-size: 15px; color: #4a5263; }
.tp-account-member .tp-account .qcom-account-addresses__cell:first-child { flex-wrap: wrap; gap: 6px; color: var(--wp--preset--color--ink); font-weight: 600; }
.tp-account-member .tp-account .qcom-account-addresses__cell:nth-child(2) { color: var(--wp--preset--color--ink); font-weight: 700; }
.tp-account-member .tp-account .qcom-account-addresses .qcom-account-badge, .tp-account-member .tp-account .qcom-account-addresses__cell .qcom-account-badge { display: inline-flex; align-items: center; width: auto !important; height: auto !important; min-width: 0 !important; padding: 4px 7px !important; border-radius: 0; background: var(--wp--preset--color--mist) !important; color: var(--wp--preset--color--ink) !important; white-space: nowrap; }
.tp-account-member .tp-account .qcom-account-addresses__cell .qcom-account-badge svg, .tp-account-member .tp-account .qcom-account-addresses__card .qcom-account-badge svg { display: none; }
.tp-account-member .tp-account .qcom-account-addresses__cell .qcom-account-badge::after, .tp-account-member .tp-account .qcom-account-addresses__card .qcom-account-badge::after { content: attr(title); font: 400 10px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.1em; text-transform: uppercase; }
/* Phone: list of rows */
.tp-account-member .tp-account .qcom-account-addresses__mobile { gap: 0; margin-top: 8px; }
.tp-account-member .tp-account .qcom-account-addresses__card { border: 0 !important; border-bottom: 1px solid var(--wp--preset--color--hairline) !important; border-radius: 0 !important; background: none; }
.tp-account-member .tp-account .qcom-account-addresses__card--default { box-shadow: inset 3px 0 0 var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-account-addresses__card-body { padding: 16px 0 16px 14px; }
.tp-account-member .tp-account .qcom-account-addresses__card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.tp-account-member .tp-account .qcom-account-addresses__card-title { margin: 0; font: 600 16px/1.3 var(--wp--preset--font-family--body) !important; text-transform: none !important; color: var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-account-addresses__card-top { flex-wrap: wrap; row-gap: 8px; }
.tp-account-member .tp-account .qcom-account-addresses__card-title-wrap { order: 2; flex: 1 1 0; min-width: 0; }
.tp-account-member .tp-account .qcom-account-addresses__card-actions { display: contents; }
.tp-account-member .tp-account .qcom-account-addresses__card .qcom-account-icon-btn { order: 3; }
.tp-account-member .tp-account .qcom-account-addresses__card-top::before { content: ""; order: 1; flex-basis: 100%; height: 0; } /* line break: labels as a row above the street */
.tp-account-member .tp-account .qcom-account-addresses__card .qcom-account-badge { order: 0; display: inline-flex; align-items: center; width: auto !important; height: auto !important; min-width: 0 !important; padding: 4px 7px !important; border-radius: 0; background: var(--wp--preset--color--mist) !important; color: var(--wp--preset--color--ink) !important; white-space: nowrap; }
.tp-account-member .tp-account .qcom-account-addresses__card-detail { margin: 0; font-size: 14px; line-height: 1.5; color: #4a5263; }
.tp-account-member .tp-account .qcom-account-addresses__card-detail:first-child { color: var(--wp--preset--color--ink); font-weight: 700; }
/* Country flags in the account: the plugin writes an emoji flag ("🇸🇪 Sverige"), and Windows renders it as letters.
   theme.js §26 strips the emoji from the text and sets data-tp-cc on the parent — here we draw a real flag (SVG). */
.tp-account [data-tp-cc]::before { content: ""; display: inline-block; flex: none; width: 20px; height: 14px; margin-right: 8px; vertical-align: -1px; background: #c3cad6 center / cover no-repeat; box-shadow: 0 0 0 1px rgb(20 28 44 / 0.12); }
.tp-account [data-tp-cc="SE"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Crect width='16' height='10' fill='%23006aa7'/%3E%3Crect x='5' width='2' height='10' fill='%23fecc00'/%3E%3Crect y='4' width='16' height='2' fill='%23fecc00'/%3E%3C/svg%3E"); }
.tp-account [data-tp-cc="NO"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Crect width='22' height='16' fill='%23ba0c2f'/%3E%3Crect x='6' width='4' height='16' fill='%23fff'/%3E%3Crect y='6' width='22' height='4' fill='%23fff'/%3E%3Crect x='7' width='2' height='16' fill='%2300205b'/%3E%3Crect y='7' width='22' height='2' fill='%2300205b'/%3E%3C/svg%3E"); }
.tp-account [data-tp-cc="DK"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 37 28'%3E%3Crect width='37' height='28' fill='%23c8102e'/%3E%3Crect x='12' width='4' height='28' fill='%23fff'/%3E%3Crect y='12' width='37' height='4' fill='%23fff'/%3E%3C/svg%3E"); }
.tp-account [data-tp-cc="FI"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11'%3E%3Crect width='18' height='11' fill='%23fff'/%3E%3Crect x='5' width='3' height='11' fill='%23002f6c'/%3E%3Crect y='4' width='18' height='3' fill='%23002f6c'/%3E%3C/svg%3E"); }
/* Labels above the street (desktop table); postcode and city on two lines (theme.js §26 → data attributes) */
.tp-account-member .tp-account .qcom-account-addresses__cell:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tp-account-member .tp-account .qcom-account-addresses__cell:first-child > span:first-child { order: 1; flex-basis: 100%; }
.tp-account-member .tp-account .qcom-account-addresses__cell:first-child > .qcom-account-badge { order: 0; }
.tp-account-member .tp-account [data-tp-postcode] { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px !important; font-size: 0 !important; line-height: 0 !important; }
.tp-account-member .tp-account [data-tp-postcode]::before { content: attr(data-tp-postcode); display: block; font: 700 16px/1.3 var(--wp--preset--font-family--body); color: var(--wp--preset--color--ink); }
.tp-account-member .tp-account [data-tp-postcode]::after { content: attr(data-tp-city); display: block; font: 400 15px/1.35 var(--wp--preset--font-family--body); color: #4a5263; }
/* Default address: only the left bar — no plugin/theme side borders */
.tp-account-member .tp-account .qcom-account-addresses__row--default, .tp-account-member .tp-account .qcom-account-addresses__card--default { border-left: 0 !important; border-right: 0 !important; }
@media (max-width: 767px) { .tp-account-member .tp-account .qcom-account-addresses__mobile { display: flex; flex-direction: column; } }
.tp-account-member .tp-account .qcom-account-addresses__card--default { order: -1; } /* the default one always comes first (on phone too) */
/* Address table — open, no box: horizontal lines only; the default address comes first
   (the plugin's tbody is a flex column, hence order), on a light background with an ink bar and a dark label. */
.tp-account-member .tp-account .qcom-account-addresses__table { margin-top: 0; border: 0 !important; border-radius: 0 !important; overflow: visible; }
.tp-account-member .tp-account .qcom-account-addresses__thead { padding-left: 20px; padding-right: 20px; }
.tp-account-member .tp-account .qcom-account-addresses__tbody > * + * { border-top: 0 !important; }
.tp-account-member .tp-account .qcom-account-addresses__row { border-bottom: 1px solid var(--wp--preset--color--hairline); }
.tp-account-member .tp-account .qcom-account-addresses__row--default { order: -1; background: linear-gradient(90deg, #eef1f6 0%, #f7f8fb 60%, #ffffff 100%) !important; box-shadow: inset 3px 0 0 var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-account-addresses__row-inner { min-height: 72px; padding: 16px 20px; }
.tp-account-member .tp-account .qcom-account-addresses__row:not(.qcom-account-addresses__row--default):hover { background: var(--wp--preset--color--mist); }
.tp-account-member .tp-account .qcom-account-addresses__cell:first-child { font-size: 16px; }
.tp-account-member .tp-account .qcom-account-addresses__cell:nth-child(2) { font-size: 16px; }
.tp-account-member .tp-account .qcom-account-addresses__cell:nth-child(4) { color: #a3abb8; }
.tp-account-member .tp-account .qcom-account-addresses__cell .qcom-account-badge[title="Standardleverans"], .tp-account-member .tp-account .qcom-account-addresses__card .qcom-account-badge[title="Standardleverans"] { background: var(--wp--preset--color--ink) !important; color: #fff !important; }
.tp-account-member .tp-account .qcom-account-addresses__row-actions .qcom-account-icon-btn { color: #646d7d; }
.tp-account-member .tp-account .qcom-account-addresses__row-actions .qcom-account-icon-btn:hover { color: var(--wp--preset--color--ink); }
/* Account is loading: instead of the plugin skeleton (qcom-account-skeleton__*) — an empty light panel
   (like the real sidebar) and our loader in the content; on phone — the loader only. */
.tp-account .qcom-account-page__layout > .qcom-account-skeleton__mobile-nav { display: none !important; }
.tp-account .qcom-account-page__layout > [class*="qcom-account-skeleton"] > * { visibility: hidden; }
.tp-account .qcom-account-page__layout > .qcom-account-skeleton__sidebar { flex: none; width: 300px; align-self: stretch; border: 0; border-right: 1px solid var(--wp--preset--color--hairline); border-radius: 0; background: radial-gradient(140% 60% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--glow) 28%, transparent) 0%, transparent 60%), linear-gradient(180deg, #f3f5f9 0%, var(--tp-banner-end) 100%); }
.tp-account .qcom-account-page__layout > .qcom-account-skeleton__content { position: relative; flex: 1; min-height: 60vh; }
.tp-account .qcom-account-page__layout > .qcom-account-skeleton__content::before { content: ""; position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; visibility: visible; background: var(--wp--preset--color--accent); -webkit-mask: var(--tp-mark-loader) center / contain no-repeat; mask: var(--tp-mark-loader) center / contain no-repeat; }
@media (max-width: 1023px) { .tp-account .qcom-account-page__layout > .qcom-account-skeleton__sidebar { display: none !important; } }

/* Orders on phone: filters as a square toggle, cards with a thin border, number in the site font,
   status as a mono label, "Visa detaljer →" as a text link instead of a heavy button. */
.tp-account-member .tp-account .qcom-account-orders__mobile > div:first-child { display: flex; gap: 8px; margin: 20px 0 0; }
.tp-account-member .tp-account .qcom-account-filter-toggle { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--wp--preset--color--hairline); border-radius: 0; background: #fff; color: var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-account-orders__mobile-filters { display: flex; width: max-content; max-width: 100%; margin: 16px 0; border: 1px solid var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-account-orders__mobile-card { border: 1px solid var(--wp--preset--color--hairline) !important; border-radius: 0 !important; background: #fff; box-shadow: none !important; }
.tp-account-member .tp-account .qcom-account-orders__mobile-card-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; }
.tp-account-member .tp-account .qcom-account-orders__mobile-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tp-account-member .tp-account .qcom-account-orders__mobile-card-label { display: block; font: 400 10px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--stone); }
.tp-account-member .tp-account .qcom-account-orders__mobile-card-number { display: block; margin-top: 6px; font: 400 18px/1 var(--wp--preset--font-family--heading); color: var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-account-orders__mobile-card-number:empty::before { content: "—"; color: var(--wp--preset--color--stone); }
.tp-account-member .tp-account .qcom-account-orders__mobile-card-status { border-radius: 0; font: 400 10px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.08em; padding: 5px 8px; }
.tp-account-member .tp-account .qcom-account-orders__mobile-card-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.tp-account-member .tp-account .qcom-account-orders__mobile-card-date { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: 400 12px/1 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--stone); }
.tp-account-member .tp-account .qcom-account-orders__mobile-card-date svg { width: 14px; height: 14px; }
.tp-account-member .tp-account .qcom-account-orders__mobile-card-price { margin: 0; font: 600 16px/1 var(--wp--preset--font-family--body); color: var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-account-orders__mobile-card .qcom-wp-button { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--wp--preset--color--hairline); }
.tp-account-member .tp-account .qcom-account-orders__mobile-card .wp-block-button__link { min-height: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--wp--preset--color--ink) !important; font: 600 13px/1.4 var(--wp--preset--font-family--body) !important; text-transform: uppercase; letter-spacing: 0.04em; }
.tp-account-member .tp-account .qcom-account-orders__mobile-card .wp-block-button__link::after { content: "→"; margin-left: 8px; transition: transform 0.2s ease; }
.tp-account-member .tp-account .qcom-account-orders__mobile-card .wp-block-button__link:hover::after { transform: translateX(3px); }
/* Empty states on phone — more compact */
@media (max-width: 759px) {
	.tp-account-member .tp-account .qcom-account-empty, .tp-account-member .tp-account .qcom-account-wishlist__empty { padding: 36px 20px; }
	.tp-account-member .tp-account .qcom-account-wishlist__empty-icon-wrap { border: 0 !important; }
	.tp-account-member .tp-account .qcom-account-wishlist__empty .wp-block-button__link { width: 100%; }
}
/* Account dialogs (portal in body): like the auth modal — 1px border, square ✕ */
body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) { border: var(--tp-border) !important; border-radius: 0 !important; box-shadow: none !important; padding: 28px 24px 24px; background: var(--wp--preset--color--paper); }
body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) .qcom-dialog__title { padding-right: 48px; font: 400 22px/1.1 var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0; }
body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) .qcom-dialog__description { font-size: 14px; color: var(--wp--preset--color--stone); }
body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) .qcom-dialog__header { text-align: left; }
body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) .qcom-dialog__close { top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; border: var(--tp-border-ui); border-radius: 0; background: var(--wp--preset--color--paper); opacity: 1; box-shadow: none; }
body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) .qcom-dialog__close:hover { background: var(--wp--preset--color--sand); }
body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) .qcom-dialog__close-icon { width: 20px; height: 20px; }
.qcom-uncompleted-orders__dialog-text, .qcom-order-details__cart-dialog-text { font-size: 15px; color: var(--wp--preset--color--stone); }
/* Empty states */
.tp-account .qcom-account-empty { padding: 56px 16px; border: 1px dashed var(--wp--preset--color--hairline); }
.tp-account .qcom-account-empty__icon { width: 32px; height: 32px; color: var(--wp--preset--color--stone); }
.tp-account .qcom-account-empty__title { font: 400 18px/1.1 var(--wp--preset--font-family--heading); text-transform: uppercase; }
.tp-account .qcom-account-empty__text { font-size: 14px; color: var(--wp--preset--color--stone); }
/* Profil */
.tp-account .qcom-account-profile__contact-banner { margin: 0; padding: 14px 16px; border: var(--tp-border); background: var(--wp--preset--color--mist); font-size: 14px; }
.tp-account .qcom-account-profile__contact-banner-company { font-weight: 700; }
.tp-account .qcom-account-profile__section-header { margin: 0; gap: 16px; }
.tp-account .qcom-account-profile__billing-menu { margin-top: -1px; border: var(--tp-border); background: var(--wp--preset--color--paper); }
.tp-account .qcom-account-profile__billing-option { min-height: 56px; padding: 12px 16px; border-bottom: 1px solid var(--wp--preset--color--hairline); font-size: 14px; }
.tp-account .qcom-account-profile__billing-option:hover { background: var(--wp--preset--color--sand); }
.tp-account .qcom-account-profile__billing-option--current { background: var(--wp--preset--color--mist); box-shadow: inset 3px 0 0 var(--wp--preset--color--accent) !important; }
.tp-account .qcom-account-profile__billing-option-address { font-weight: 600; }
.tp-account .qcom-account-profile__billing-option-detail { font: 400 12px/1.4 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--stone); }
.tp-account .qcom-account-profile__billing-warning { border: 1px solid var(--tp-line); border-left: 4px solid var(--wp--preset--color--signal); background: var(--wp--preset--color--mist); color: var(--wp--preset--color--ink); }
/* Badge labels (statuses, "Standard", invalid address) — square mono */
.tp-account .qcom-account-badge { width: 22px; height: 22px; }
.tp-account .qcom-account-orders__status-badge, .tp-account .qcom-account-orders__mobile-card-status, .tp-account .qcom-account-orders__on-hold,
.tp-account .qcom-order-details__status-badge, .tp-account .qcom-order-details__status-badge--small, .tp-account .qcom-order-details__hold-badge, .tp-account .qcom-order-details__hold-badge--small,
.tp-account .qcom-order-details__fulfillment-badge, .tp-account .qcom-order-details__stock-badge, .tp-account .qcom-order-details__delivery-badge { padding: 4px 8px; border: 1px solid currentColor; font: 500 11px/1 var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
/* Icon buttons (edit/delete) — 40px squares */
.tp-account .qcom-account-icon-btn { width: 40px; height: 40px; padding: 0; color: var(--wp--preset--color--ink); border: 1px solid transparent; }
.tp-account .qcom-account-icon-btn:hover { background: var(--wp--preset--color--sand); border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--ink); }
.tp-account .qcom-account-icon-btn--danger:hover { color: #b3261e; border-color: #b3261e; background: #fbeeed; }
/* Adresser */
.tp-account .qcom-account-addresses__table, .tp-account .qcom-account-addresses__card { border: var(--tp-border); }
.tp-account .qcom-account-addresses__thead, .tp-account .qcom-account-orders__table-head { padding-top: 12px; padding-bottom: 12px; background: var(--wp--preset--color--mist); border-bottom: var(--tp-border); }
.tp-account .qcom-account-addresses__thead-cols, .tp-account .qcom-account-addresses__thead-actions, .tp-account .qcom-account-orders__table-head { font: 500 11px/1.2 var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--stone); }
.tp-account .qcom-account-addresses__tbody > * + *, .tp-account .qcom-account-orders__table-rows > * + * { border-top-color: var(--wp--preset--color--hairline); }
.tp-account .qcom-account-addresses__row-inner { min-height: 64px; box-sizing: border-box; }
.tp-account .qcom-account-addresses__cell, .tp-account .qcom-account-addresses__card-detail { font-size: 14px; }
.tp-account .qcom-account-addresses__row--default { background: var(--wp--preset--color--mist); box-shadow: inset 3px 0 0 var(--wp--preset--color--accent) !important; }
.tp-account .qcom-account-addresses__row--invalid { background: #fbeeed; }
.tp-account .qcom-account-addresses__row-actions { width: 132px; gap: 4px; }
.tp-account .qcom-account-addresses__card--default { border-left: 4px solid var(--wp--preset--color--accent); }
.tp-account .qcom-account-addresses__card--invalid { border-left: 4px solid #b3261e; }
.tp-account .qcom-account-addresses__card-title { font: 600 15px/1.3 var(--wp--preset--font-family--body); text-transform: uppercase; }
.tp-account .qcom-account-addresses__confirm-overlay { background: rgba(255, 255, 255, 0.92); backdrop-filter: none; }
.tp-account .qcom-account-addresses__confirm-text { font-weight: 600; }
/* Beställningar / Fakturor */
.tp-account .qcom-account-orders__filters { gap: 0; margin-bottom: 16px; flex-wrap: wrap; }
.tp-account .qcom-account-orders__mobile-filters { gap: 0; }
.tp-account .qcom-account-orders__filter-btn { min-height: 44px; padding: 0 16px; border: var(--tp-border-ui) !important; background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); font: 600 12px/1 var(--wp--preset--font-family--body) !important; text-transform: uppercase; letter-spacing: 0.04em; }
.tp-account .qcom-account-orders__filter-btn + .qcom-account-orders__filter-btn { margin-left: -1px; }
.tp-account .qcom-account-orders__filter-btn:hover { background: var(--wp--preset--color--sand); color: var(--wp--preset--color--ink); }
.tp-account .qcom-account-orders__filter-btn--active, .tp-account .qcom-account-orders__filter-btn--active:hover { background: var(--wp--preset--color--ink) !important; color: #fff !important; }
.tp-account .qcom-account-orders__filter-count { font: 500 11px/1 var(--wp--preset--font-family--mono); padding: 3px 6px; }
.tp-account .qcom-account-orders__filter-count--active { background: var(--wp--preset--color--signal); color: var(--wp--preset--color--ink); }
.tp-account .qcom-account-orders__filter-count--inactive { background: var(--wp--preset--color--mist); color: var(--wp--preset--color--stone); }
.tp-account .qcom-account-orders__panel, .tp-account .qcom-account-orders__mobile-card { border: var(--tp-border); }
.tp-account .qcom-account-toolbar { padding: 16px; gap: 0; border-bottom: var(--tp-border); }
.tp-account .qcom-account-search .qcom-input, .tp-account .qcom-account-search input { padding-left: 40px !important; }
.tp-account .qcom-account-search__icon { left: 14px; color: var(--wp--preset--color--stone); }
.tp-account .qcom-account-toolbar .qcom-select__trigger, .tp-account .qcom-account-mobile-sort .qcom-select__trigger { margin-left: -1px; }
.tp-account .qcom-account-sort-btn, .tp-account .qcom-account-filter-toggle { height: 48px; min-width: 48px; margin-left: -1px; padding: 0 14px; border: var(--tp-border-ui); background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.tp-account .qcom-account-sort-btn:hover, .tp-account .qcom-account-filter-toggle:hover { background: var(--wp--preset--color--sand); }
.tp-account .qcom-account-sort-btn__label { font: 500 11px/1 var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.tp-account .qcom-account-refresh { min-height: 40px; font: 600 12px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--accent); }
.tp-account .qcom-account-refresh:hover { color: var(--wp--preset--color--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.tp-account .qcom-account-orders__table-row { min-height: 60px; box-sizing: border-box; }
.tp-account .qcom-account-orders__table-row:hover { background: var(--wp--preset--color--sand); }
.tp-account .qcom-account-orders__cell { font-size: 14px; font-variant-numeric: tabular-nums; }
.tp-account .qcom-account-orders__cell--primary { font: 600 14px/1.2 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--accent); }
.tp-account .qcom-account-orders__cell--muted { color: var(--wp--preset--color--stone); }
.tp-account .qcom-account-orders__cell--right { font-weight: 600; color: var(--wp--preset--color--ink); }
.tp-account .qcom-account-orders__cell--chevron { color: var(--wp--preset--color--ink); }
.tp-account .qcom-account-invoices__kid-value { font: 400 12px/1.3 var(--wp--preset--font-family--mono); background: var(--wp--preset--color--mist); color: var(--wp--preset--color--ink); border: 1px solid var(--wp--preset--color--hairline); }
.tp-account .qcom-account-invoices__kid-copied { color: var(--wp--preset--color--stock); }
.tp-account .qcom-account-orders__mobile-card-label { font: 500 11px/1.2 var(--wp--preset--font-family--mono); letter-spacing: 0.08em; color: var(--wp--preset--color--stone); }
.tp-account .qcom-account-orders__mobile-card-number { font: 400 18px/1.2 var(--wp--preset--font-family--heading); }
.tp-account .qcom-account-orders__mobile-card-date, .tp-account .qcom-account-invoices__mobile-due, .tp-account .qcom-account-invoices__mobile-kid { font: 400 12px/1.4 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--stone); }
.tp-account .qcom-account-orders__mobile-card-price { font: 700 16px/1.2 var(--wp--preset--font-family--body); font-variant-numeric: tabular-nums; }
.tp-account .qcom-account-load-more-wrap { border-top: var(--tp-border); padding: 16px; }
.tp-account .qcom-account-load-more { min-height: 48px; padding: 0 24px; border: var(--tp-border-ui); color: var(--wp--preset--color--ink); font: 700 13px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; }
.tp-account .qcom-account-load-more:hover { background: var(--wp--preset--color--ink); color: #fff; }
/* Ej slutförda ordrar */
.tp-account .qcom-uncompleted-orders__description { font-size: 14px; color: var(--wp--preset--color--stone); }
.tp-account .qcom-account-orders__row--uncompleted { margin: 0; padding: 16px; border: var(--tp-border); }
.tp-account .qcom-account-orders__row--uncompleted + .qcom-account-orders__row--uncompleted { border-top: 0; }
.tp-account .qcom-account-orders__row-number { font: 600 14px/1.2 var(--wp--preset--font-family--mono); }
.tp-account .qcom-account-orders__row-date { font: 400 12px/1.3 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--stone); }
.tp-account .qcom-account-orders__row-price { font-size: 15px; font-variant-numeric: tabular-nums; }
.tp-account .qcom-uncompleted-orders__complete-btn, .tp-account .qcom-account-orders__view-btn,
.tp-account .qcom-order-details__action-btn { min-height: 40px; padding: 0 16px; font: 700 12px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; }
.tp-account .qcom-uncompleted-orders__complete-btn, .tp-account .qcom-order-details__action-btn--complete { background: var(--wp--preset--color--accent); border: 1px solid var(--wp--preset--color--accent); color: #fff; }
.tp-account .qcom-uncompleted-orders__complete-btn:hover:not(:disabled), .tp-account .qcom-order-details__action-btn--complete:hover:not(:disabled) { opacity: 1; background: var(--wp--preset--color--accent-deep); }
.tp-account .qcom-account-orders__view-btn, .tp-account .qcom-order-details__action-btn--reorder { background: var(--wp--preset--color--paper); border: var(--tp-border-ui); color: var(--wp--preset--color--ink); }
.tp-account .qcom-account-orders__view-btn:hover, .tp-account .qcom-order-details__action-btn--reorder:hover:not(:disabled) { background: var(--wp--preset--color--ink); color: #fff; }
/* Önskelista: rows like the "Tack" item list */
.tp-account .qcom-account-section > .qcom-card:has(.qcom-account-wishlist__list) > .qcom-card__content { padding: 0; }
.tp-account .qcom-account-wishlist__list > * + * { border-top-color: var(--wp--preset--color--hairline); }
.tp-account .qcom-account-wishlist__item { gap: 16px; padding: 16px 24px; }
.tp-account .qcom-account-wishlist__item:hover { background: var(--wp--preset--color--sand); }
.tp-account .qcom-account-wishlist__img-wrap { width: 64px; height: 64px; border: 1px solid var(--wp--preset--color--hairline); background: #f7f8fa; }
.tp-account .qcom-account-wishlist__img { object-fit: contain; }
.tp-account .qcom-account-wishlist__name { font: 600 14px/1.3 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.01em; }
.tp-account .qcom-account-wishlist__info-link:hover { color: var(--wp--preset--color--accent); }
.tp-account .qcom-account-wishlist__code, .tp-account .qcom-account-wishlist__stock { margin-top: 4px; font: 400 12px/1.3 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--stone); }
.tp-account .qcom-account-wishlist__stock--in-stock { color: var(--wp--preset--color--stock); }
.tp-account .qcom-account-wishlist__stock--on-order { color: var(--wp--preset--color--accent); }
.tp-account .qcom-account-wishlist__stock--out { color: #b3261e; }
.tp-account .qcom-account-wishlist__price { font: 600 16px/1.2 var(--wp--preset--font-family--body); font-variant-numeric: tabular-nums; }
.tp-account .qcom-account-wishlist__price-link { font: 600 12px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--accent); text-decoration: underline; text-underline-offset: 3px; }
.tp-account .qcom-account-wishlist__cart-btn, .tp-account .qcom-account-wishlist__view-link { min-height: 40px; padding: 0 14px; font: 700 12px/1 var(--wp--preset--font-family--body) !important; letter-spacing: 0.04em; }
.tp-account .qcom-account-wishlist__cart-btn { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: #fff !important; }
.tp-account .qcom-account-wishlist__cart-btn:hover { opacity: 1; background: var(--wp--preset--color--accent-deep); }
.tp-account .qcom-account-wishlist__view-link { border: var(--tp-border-ui); }
.tp-account .qcom-account-wishlist__view-link:hover { background: var(--wp--preset--color--ink); color: #fff !important; border-color: var(--wp--preset--color--ink); }
.tp-account .qcom-account-wishlist__remove-btn { width: 40px; height: 40px; padding: 0; border: var(--tp-border-ui); color: var(--wp--preset--color--ink); }
.tp-account .qcom-account-wishlist__remove-btn:hover { color: #b3261e; border-color: #b3261e; background: #fbeeed; }
.tp-account .qcom-account-wishlist__empty { border: var(--tp-border); }
.tp-account .qcom-account-wishlist__empty-inner { min-height: 0; padding: 64px 24px; }
.tp-account .qcom-account-wishlist__empty-icon-wrap { width: 64px; height: 64px; background: var(--wp--preset--color--mist); border: 1px solid var(--wp--preset--color--hairline); }
.tp-account .qcom-account-wishlist__empty-icon-wrap svg { width: 28px; height: 28px; color: var(--wp--preset--color--ink); }
.tp-account .qcom-account-wishlist__empty-title { font: 400 20px/1.1 var(--wp--preset--font-family--heading); text-transform: uppercase; }
.tp-account .qcom-account-wishlist__empty-text { font-size: 15px; color: var(--wp--preset--color--stone); }
/* Inställningar */
.tp-account .qcom-account-settings__section-title, .tp-account .qcom-account-settings__password-title, .tp-account .qcom-account-settings__price-legend { font: 400 16px/1.1 var(--wp--preset--font-family--heading); text-transform: uppercase; }
.tp-account .qcom-account-settings__password-box, .tp-account .qcom-account-settings__price-box { padding: 24px; border: var(--tp-border); }
.tp-account .qcom-card .qcom-account-settings__password-box, .tp-account .qcom-card .qcom-account-settings__price-box { padding: 0; border: 0; } /* already inside a card — no second border */
.tp-account .qcom-account-settings__radio-group { gap: 0; }
.tp-account .qcom-account-settings__price-legend { margin-bottom: 12px; }
.tp-account .qcom-account-settings__radio-label { min-height: 52px; padding: 0 16px; border: var(--tp-border); box-sizing: border-box; }
.tp-account .qcom-account-settings__radio-label + .qcom-account-settings__radio-label { margin-top: -1px; }
.tp-account .qcom-account-settings__radio-label:hover { background: var(--wp--preset--color--sand); }
.tp-account .qcom-account-settings__radio-label:has(.qcom-account-settings__radio-circle--checked) { position: relative; z-index: 1; border-color: var(--wp--preset--color--accent); box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent) !important; }
.tp-account .qcom-account-settings__radio-circle { width: 18px; height: 18px; border: 1px solid var(--wp--preset--color--ink); background: #fff; box-sizing: border-box; }
.tp-account .qcom-account-settings__radio-circle--checked { border: 2px solid var(--wp--preset--color--accent); }
.tp-account .qcom-account-settings__radio-dot { width: 8px; height: 8px; background: var(--wp--preset--color--accent); }
.tp-account .qcom-account-settings__radio-input:focus-visible + .qcom-account-settings__radio-circle { outline: 1px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.tp-account .qcom-account-settings__password-actions { gap: 8px; }
.tp-account .qcom-password-input__toggle { color: var(--wp--preset--color--stone); border-radius: 0 !important; }
.tp-account .qcom-switch { background: var(--wp--preset--color--hairline); }
.tp-account .qcom-switch[data-state="checked"] { background: var(--wp--preset--color--accent); }
@media (max-width: 1023.98px) { .tp-account .qcom-account-page { padding-bottom: 76px; } }
@media (max-width: 480px) { .tp-account .qcom-card__header, .tp-account .qcom-card__content, .tp-account .qcom-account-settings__password-box, .tp-account .qcom-account-settings__price-box { padding-left: 16px; padding-right: 16px; } .tp-account .qcom-account-wishlist__item { padding: 16px; } }

/* --- Order and invoice detail pages (order-details / invoice-details) --- */
.tp-account .qcom-order-details, .tp-account .qcom-invoice-details { font-size: 15px; color: var(--wp--preset--color--ink); }
.tp-account .qcom-order-details__desktop, .tp-account .qcom-invoice-details__desktop, .tp-account .qcom-order-details__mobile, .tp-account .qcom-invoice-details__mobile, .tp-account .qcom-order-details__not-found, .tp-account .qcom-invoice-details__not-found { max-width: none; padding: 0; }
.tp-account .qcom-order-details__back-btn, .tp-account .qcom-invoice-details__back-btn, .tp-account .qcom-order-details__back-btn--mobile, .tp-account .qcom-invoice-details__back-btn--mobile,
.tp-account .qcom-order-details__not-found-btn, .tp-account .qcom-invoice-details__not-found-btn { min-height: 44px; margin-bottom: 8px; color: var(--wp--preset--color--ink); font: 600 13px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; }
.tp-account .qcom-order-details__back-label, .tp-account .qcom-invoice-details__back-label { font: inherit; }
.tp-account .qcom-order-details__back-btn:hover, .tp-account .qcom-invoice-details__back-btn:hover { color: var(--wp--preset--color--accent); }
.tp-account .qcom-order-details__back-section, .tp-account .qcom-invoice-details__back-section { margin-bottom: 24px; padding-bottom: 24px; border-bottom: var(--tp-border); }
.tp-account .qcom-order-details__title, .tp-account .qcom-invoice-details__title { font: 400 clamp(24px, 3vw, 36px)/1 var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0; }
.tp-account .qcom-order-details__grid, .tp-account .qcom-invoice-details__grid { gap: 24px; }
.tp-account .qcom-order-details__sidebar, .tp-account .qcom-invoice-details__sidebar { gap: 0; }
.tp-account .qcom-order-details__sidebar > * + *, .tp-account .qcom-invoice-details__sidebar > * + * { margin-top: -1px; }
.tp-account .qcom-order-details__card, .tp-account .qcom-invoice-details__card, .tp-account .qcom-order-details__card--mobile, .tp-account .qcom-invoice-details__card--mobile,
.tp-account .qcom-order-details__summary, .tp-account .qcom-invoice-details__summary, .tp-account .qcom-order-details__content-box, .tp-account .qcom-invoice-details__items-box,
.tp-account .qcom-order-details__consignment, .tp-account .qcom-order-details__payments-mobile { border: var(--tp-border); background: var(--wp--preset--color--paper); }
.tp-account .qcom-order-details__card-header, .tp-account .qcom-invoice-details__card-header, .tp-account .qcom-order-details__summary-header--desktop, .tp-account .qcom-invoice-details__summary-header--desktop { padding: 12px 16px; background: var(--wp--preset--color--mist); border-bottom: var(--tp-border); }
.tp-account .qcom-order-details__card-header, .tp-account .qcom-invoice-details__card-header, .tp-account .qcom-order-details__card-header--mobile, .tp-account .qcom-invoice-details__card-header--mobile,
.tp-account .qcom-order-details__summary-header, .tp-account .qcom-invoice-details__summary-header { font: 500 12px/1.2 var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--stone); }
.tp-account .qcom-order-details__card-body, .tp-account .qcom-invoice-details__card-body { padding: 16px; gap: 14px; }
.tp-account .qcom-order-details__info-label, .tp-account .qcom-invoice-details__info-label, .tp-account .qcom-order-details__kid-label, .tp-account .qcom-invoice-details__kid-label,
.tp-account .qcom-order-details__payment-field-label, .tp-account .qcom-order-details__info-label--mobile, .tp-account .qcom-invoice-details__info-label--mobile { font: 500 11px/1.2 var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp--preset--color--stone); }
.tp-account .qcom-order-details__info-value, .tp-account .qcom-invoice-details__info-value, .tp-account .qcom-order-details__payment-field-value { font: 600 15px/1.35 var(--wp--preset--font-family--body); font-variant-numeric: tabular-nums; }
.tp-account .qcom-order-details__invoice-link, .tp-account .qcom-invoice-details__source-link, .tp-account .qcom-order-details__tracking-link, .tp-account .qcom-invoice-details__shipment-tracking-link { color: var(--wp--preset--color--accent); text-decoration: underline; text-underline-offset: 3px; }
.tp-account .qcom-order-details__kid-box, .tp-account .qcom-invoice-details__kid-box { padding: 8px 10px; background: var(--wp--preset--color--mist); border: 1px solid var(--wp--preset--color--hairline); }
.tp-account .qcom-order-details__kid-code, .tp-account .qcom-invoice-details__kid-code, .tp-account .qcom-order-details__text-sm-mono, .tp-account .qcom-invoice-details__shipment-tracking-number,
.tp-account .qcom-order-details__payment-field-value--mono, .tp-account .qcom-order-details__payment-mobile-ref-value { font-family: var(--wp--preset--font-family--mono); }
.tp-account .qcom-order-details__kid-copy-btn, .tp-account .qcom-invoice-details__kid-copy-btn { color: var(--wp--preset--color--accent); }
/* Artiklar / Leverans / Betalningar tabs — segments with a line */
.tp-account .qcom-order-details__tabs, .tp-account .qcom-order-details__tabs--mobile { gap: 0; margin-bottom: 0; }
.tp-account .qcom-order-details__tab { min-height: 48px; padding: 0 18px; border: var(--tp-border-ui); background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); font: 600 12px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; }
.tp-account .qcom-order-details__tab + .qcom-order-details__tab { margin-left: -1px; }
.tp-account .qcom-order-details__tab:hover { background: var(--wp--preset--color--sand); color: var(--wp--preset--color--ink); }
.tp-account .qcom-order-details__tab--active, .tp-account .qcom-order-details__tab--active:hover { background: var(--wp--preset--color--ink); color: #fff; border-color: var(--wp--preset--color--ink); }
.tp-account .qcom-order-details__tab-icon--active { color: var(--wp--preset--color--signal); }
.tp-account .qcom-order-details__tab-count { padding: 3px 6px; font: 500 11px/1 var(--wp--preset--font-family--mono); background: var(--wp--preset--color--mist); color: var(--wp--preset--color--stone); }
.tp-account .qcom-order-details__tab-count--active { background: var(--wp--preset--color--signal); color: var(--wp--preset--color--ink); }
.tp-account .qcom-order-details__tab-content { margin-top: -1px; }
/* Item rows */
.tp-account .qcom-order-details__items > * + *, .tp-account .qcom-invoice-details__items > * + *, .tp-account .qcom-order-details__payments-entries > * + *, .tp-account .qcom-order-details__payments-mobile > * + * { border-top-color: var(--wp--preset--color--hairline); }
.tp-account .qcom-order-details__item, .tp-account .qcom-invoice-details__item { padding: 14px 16px; gap: 0 16px; }
.tp-account .qcom-order-details__item-thumb, .tp-account .qcom-invoice-details__item-thumb, .tp-account .qcom-order-details__mobile-item-thumb, .tp-account .qcom-invoice-details__mobile-item-thumb { border: 1px solid var(--wp--preset--color--hairline); background: #f7f8fa; }
.tp-account .qcom-order-details__item-img, .tp-account .qcom-invoice-details__item-img { object-fit: contain; }
.tp-account .qcom-order-details__item-title, .tp-account .qcom-invoice-details__item-title, .tp-account .qcom-order-details__mobile-item-name, .tp-account .qcom-invoice-details__mobile-item-name { font: 600 14px/1.3 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.01em; }
.tp-account .qcom-order-details__item-link:hover, .tp-account .qcom-invoice-details__item-link:hover { color: var(--wp--preset--color--accent); }
.tp-account .qcom-order-details__item-code, .tp-account .qcom-invoice-details__item-code, .tp-account .qcom-order-details__item-meta, .tp-account .qcom-order-details__item-unit-price, .tp-account .qcom-invoice-details__item-unit-price,
.tp-account .qcom-order-details__mobile-item-code, .tp-account .qcom-invoice-details__mobile-item-code, .tp-account .qcom-order-details__mobile-item-qty, .tp-account .qcom-invoice-details__mobile-item-qty { font: 400 12px/1.4 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--stone); }
.tp-account .qcom-order-details__item-stock--in, .tp-account .qcom-order-details__stock-badge--in { color: var(--wp--preset--color--stock); }
.tp-account .qcom-order-details__item-total, .tp-account .qcom-invoice-details__item-total, .tp-account .qcom-order-details__mobile-item-line-total, .tp-account .qcom-invoice-details__mobile-item-line-total { font: 600 16px/1.2 var(--wp--preset--font-family--body); font-variant-numeric: tabular-nums; }
.tp-account .qcom-order-details__block-header, .tp-account .qcom-invoice-details__block-header, .tp-account .qcom-order-details__block-header--mobile, .tp-account .qcom-invoice-details__block-header--mobile,
.tp-account .qcom-order-details__consignment-header { min-height: 44px; box-sizing: border-box; background: var(--wp--preset--color--mist); border-bottom: var(--tp-border); }
.tp-account .qcom-order-details__block-header:hover, .tp-account .qcom-order-details__block-header--mobile:hover { background: var(--wp--preset--color--sand); }
.tp-account .qcom-order-details__block-name, .tp-account .qcom-invoice-details__block-name, .tp-account .qcom-order-details__block-name--mobile, .tp-account .qcom-invoice-details__block-name--mobile, .tp-account .qcom-order-details__consignment-title { font: 600 13px/1.2 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--ink); }
.tp-account .qcom-order-details__block-price, .tp-account .qcom-order-details__block-count, .tp-account .qcom-invoice-details__block-count, .tp-account .qcom-order-details__consignment-date,
.tp-account .qcom-order-details__block-detail, .tp-account .qcom-order-details__block-detail-text, .tp-account .qcom-invoice-details__block-text { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--stone); }
.tp-account .qcom-order-details__block-subtotal { background: var(--wp--preset--color--paper); border-bottom-color: var(--wp--preset--color--hairline); }
/* Order total */
.tp-account .qcom-order-details__summary-body--desktop, .tp-account .qcom-invoice-details__summary-body--desktop { padding: 16px; gap: 10px; }
.tp-account .qcom-order-details__summary-row, .tp-account .qcom-invoice-details__summary-row { font: 400 13px/1.3 var(--wp--preset--font-family--mono); }
.tp-account .qcom-order-details__summary-label, .tp-account .qcom-invoice-details__summary-label { color: var(--wp--preset--color--stone); }
.tp-account .qcom-order-details__summary-value, .tp-account .qcom-invoice-details__summary-value { font-weight: 500; color: var(--wp--preset--color--ink); font-variant-numeric: tabular-nums; }
.tp-account .qcom-order-details__summary-row--discount, .tp-account .qcom-invoice-details__summary-row--discount { color: var(--wp--preset--color--stock); }
.tp-account .qcom-order-details__summary-divider, .tp-account .qcom-invoice-details__summary-divider { border-top: var(--tp-border); align-items: baseline; }
.tp-account .qcom-order-details__summary-total-label, .tp-account .qcom-invoice-details__summary-total-label { font: 600 13px/1.2 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; }
.tp-account .qcom-order-details__summary-total-value, .tp-account .qcom-invoice-details__summary-total-value { font: 400 24px/1 var(--wp--preset--font-family--heading); color: var(--wp--preset--color--ink); font-variant-numeric: tabular-nums; }
.tp-account .qcom-order-details__payments-summary-value--paid { color: var(--wp--preset--color--stock); }
.tp-account .qcom-order-details__delivery-empty-icon, .tp-account .qcom-order-details__payments-empty-icon, .tp-account .qcom-order-details__not-found-icon, .tp-account .qcom-invoice-details__not-found-icon { color: var(--wp--preset--color--stone); }
.tp-account .qcom-order-details__not-found-title, .tp-account .qcom-invoice-details__not-found-title { font: 400 22px/1.1 var(--wp--preset--font-family--heading); text-transform: uppercase; }
/* "Ladda ner faktura" button — full-width outlined, like the secondary "Tack" button */
.tp-account .qcom-invoice-details__download-btn { min-height: 52px; padding: 0 20px; border: var(--tp-border-ui); background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); font: 400 14px/1 var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.04em; }
.tp-account .qcom-invoice-details__download-btn:hover:not(:disabled) { background: var(--wp--preset--color--ink); color: #fff; }
@media (min-width: 1024px) { .tp-account .qcom-order-details__grid, .tp-account .qcom-invoice-details__grid { gap: 32px; } }

/* === 404 =============================================== */
.tp-404__body { padding: 32px 16px 0; max-width: 72ch; }
.tp-404__lead { font-size: 18px; line-height: 1.5; margin: 0 0 24px; }
.tp-404__search { display: flex; border: var(--tp-border-ui); margin-bottom: 32px; }
.tp-404__search input { flex: 1; min-height: 56px; border: 0; padding: 0 16px; font-size: 16px; min-width: 0; }
.tp-404__search button { min-height: 56px; padding: 0 24px; border: 0; background: var(--wp--preset--color--ink); color: #fff; font: 700 14px/1 var(--wp--preset--font-family--body); text-transform: uppercase; cursor: pointer; }
.tp-404__search button:disabled { opacity: 0.4; cursor: default; }
.tp-404__label { display: block; font-family: var(--wp--preset--font-family--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--wp--preset--color--stone); margin-bottom: 12px; }
.tp-404__cats { padding: 0 16px 64px; }
.tp-404__cats p { margin: 0; }
.tp-404__cats .tp-catlinks { display: grid; grid-template-columns: 1fr; gap: 8px; }
.tp-404__link { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 16px; border: var(--tp-border-ui); text-decoration: none; color: inherit; font: 600 14px/1.2 var(--wp--preset--font-family--body); text-transform: uppercase; }
.tp-404__link:hover { background: var(--wp--preset--color--sand); }
@media (min-width: 760px) { .tp-404__body, .tp-404__cats { padding-left: 24px; padding-right: 24px; } .tp-404__cats .tp-catlinks { grid-template-columns: repeat(3, 1fr); } }

/* === Blog ============================================== */
.tp-blog__list { overflow: hidden; }
.tp-pgrid { display: grid; grid-template-columns: 1fr; margin: 0 0 -1px; padding: 0; list-style: none; }
.tp-pgrid > li { border-bottom: var(--tp-border); }
.tp-pcard__media { aspect-ratio: 16 / 9; background: #f7f8fa; border-bottom: 1px solid var(--wp--preset--color--hairline); overflow: hidden; }
.tp-pcard__media .wp-block-post-featured-image, .tp-pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.tp-pcard__body { padding: 16px; }
.tp-pcard__body p:has(> .tp-pcard__meta) { margin: 0; }
.tp-pcard__meta { display: block; font-family: var(--wp--preset--font-family--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp--preset--color--stone); margin-bottom: 8px; }
.tp-pcard__title { margin: 0 0 8px; font: 400 22px/1.15 var(--wp--preset--font-family--heading); text-transform: uppercase; }
.tp-pcard__title a { color: inherit; text-decoration: none; }
.tp-pcard__title a:hover { color: var(--wp--preset--color--accent); }
.tp-pcard__excerpt { font-size: 15px; line-height: 1.5; color: #3e4656; }
.tp-pcard__excerpt p { margin: 0; }
.tp-pcard__excerpt .wp-block-post-excerpt__more-link { display: inline-block; margin-top: 8px; font: 700 13px/1 var(--wp--preset--font-family--body); text-transform: uppercase; color: var(--wp--preset--color--accent); text-decoration: none; }
.tp-pagination { padding: 24px 16px 48px; gap: 8px; font-family: var(--wp--preset--font-family--mono); }
.tp-pagination a, .tp-pagination .page-numbers { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: var(--tp-border-ui); color: inherit; text-decoration: none; }
.tp-pagination .current { background: var(--wp--preset--color--ink); color: #fff; }
.tp-blog__empty { padding: 48px 16px; color: var(--wp--preset--color--stone); }
.tp-post__media { max-width: 1200px; margin: 0 auto; padding: 24px 16px 0; }
.tp-post__media:not(:has(img)) { display: none; }
.tp-post__media img { width: 100%; display: block; border: 1px solid var(--wp--preset--color--hairline); }
.tp-post__more { border-top: var(--tp-border-2); }
.tp-post__more:has(.tp-pcard) { display: block; }
@media (min-width: 760px) { .tp-pgrid { grid-template-columns: repeat(2, 1fr); } .tp-pgrid > li { border-right: var(--tp-border); } .tp-pcard__body { padding: 20px 24px 24px; } }
@media (min-width: 1120px) { .tp-pgrid { grid-template-columns: repeat(3, 1fr); } .tp-pgrid > li:nth-child(3n) { border-right: 0; } }

/* Account dialogs (Redigera adress, Lägg till adress, Byt lösenord…) — like the auth modal:
   no border, shadow, rise-in entrance; light gradient header with a "Mitt konto" kicker; thin cross;
   light fields with ink focus; "Uppdatera →" + "Avbryt" on one line. */
body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) { width: calc(100% - 32px); max-width: 520px; padding: 0 !important; border: 0 !important; overflow: hidden; box-shadow: 0 30px 80px rgb(20 28 44 / 0.35) !important; animation: tp-auth-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) .qcom-dialog__header { margin: 0; padding: 28px 88px 24px 32px; border-bottom: 1px solid var(--wp--preset--color--hairline); background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--glow) 32%, transparent) 0%, transparent 55%), linear-gradient(180deg, #f3f5f9 0%, var(--tp-banner-end) 100%); text-align: left; }
body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) .qcom-dialog__header::before { content: "Mitt konto"; display: block; margin-bottom: 12px; font: 400 11px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--stone); }
body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) .qcom-dialog__title { margin: 0; padding: 0 !important; font: 400 26px/1.05 var(--wp--preset--font-family--heading) !important; text-transform: uppercase; color: var(--wp--preset--color--ink); }
body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) .qcom-dialog__description { margin: 8px 0 0; font-size: 14px; color: #4a5263; }
body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) .qcom-dialog__close { top: 20px; right: 20px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #c3cad6; border-radius: 0; background: transparent; color: var(--wp--preset--color--ink); opacity: 1; box-shadow: none; transition: background-color 0.2s ease, border-color 0.2s ease; }
body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) .qcom-dialog__close:hover { background: #fff; border-color: var(--wp--preset--color--ink); }
body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) .qcom-dialog__close svg { display: none; }
body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) .qcom-dialog__close::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%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' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Tall form (Lägg till / Redigera adress) on a short screen: the window is no taller than the screen,
   the header stays, the body scrolls (previously the bottom fields and buttons were unreachable). */
body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) > .qcom-dialog__header { flex: none; }
body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) > :not(.qcom-dialog__header):not(.qcom-dialog__close) { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* Dialog body */
body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) > form, body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) > :not(.qcom-dialog__header):not(.qcom-dialog__close):not(form) { display: flex; flex-direction: column; gap: 16px; padding: 24px 32px 32px; }
.qcom-account-page__modal-dialog .qcom-form-item { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.qcom-account-page__modal-dialog .qcom-label, .qcom-account-page__modal-dialog label { margin: 0; font: 400 11px/1 var(--wp--preset--font-family--mono) !important; letter-spacing: 0.12em !important; text-transform: uppercase; color: var(--wp--preset--color--stone) !important; }
.qcom-account-page__modal-dialog .qcom-input, .qcom-account-page__modal-dialog .iti__tel-input, .qcom-account-page__modal-dialog .qcom-select__trigger { height: 52px !important; min-height: 52px !important; border: 1px solid var(--wp--preset--color--hairline) !important; background: var(--wp--preset--color--mist) !important; color: var(--wp--preset--color--ink); box-shadow: none !important; transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; }
.qcom-account-page__modal-dialog .qcom-input:hover, .qcom-account-page__modal-dialog .qcom-select__trigger:hover { border-color: #c3cad6 !important; }
.qcom-account-page__modal-dialog .qcom-input:focus, .qcom-account-page__modal-dialog .iti__tel-input:focus, .qcom-account-page__modal-dialog .qcom-select__trigger:focus { outline: none; border-color: var(--wp--preset--color--ink) !important; background: #fff !important; box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink) !important; }
.qcom-account-page__modal-dialog .qcom-account-page__modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 479px) { .qcom-account-page__modal-dialog .qcom-account-page__modal-grid { grid-template-columns: 1fr; } }
/* Actions: "Uppdatera →" (ink, wider) + "Avbryt" (outlined) on one line */
.qcom-account-page__modal-dialog .qcom-account-page__modal-actions { display: flex; flex-direction: row-reverse; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.qcom-account-page__modal-dialog .qcom-account-page__modal-actions > .qcom-wp-button { margin: 0; }
.qcom-account-page__modal-dialog .qcom-account-page__modal-actions > .qcom-wp-button:not(.is-style-outline) { flex: 1 1 200px; }
.qcom-account-page__modal-dialog .qcom-account-page__modal-actions .wp-block-button__link { width: 100%; min-height: 54px; }
.qcom-account-page__modal-dialog .qcom-account-page__modal-actions .qcom-wp-button:not(.is-style-outline) .wp-block-button__link { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); font: 400 15px/1 var(--wp--preset--font-family--heading); letter-spacing: 0.04em; }
.qcom-account-page__modal-dialog .qcom-account-page__modal-actions .qcom-wp-button:not(.is-style-outline) .wp-block-button__link::after { content: "→"; margin-left: 10px; transition: transform 0.2s ease; }
.qcom-account-page__modal-dialog .qcom-account-page__modal-actions .qcom-wp-button:not(.is-style-outline) .wp-block-button__link:hover::after { transform: translateX(4px); }
.qcom-account-page__modal-dialog .qcom-account-page__modal-actions .is-style-outline .wp-block-button__link { padding: 0 28px; background: #fff !important; color: var(--wp--preset--color--ink) !important; border: 1px solid var(--wp--preset--color--ink) !important; }
.qcom-account-page__modal-dialog .qcom-account-page__modal-actions .is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--sand) !important; color: var(--wp--preset--color--ink) !important; }
@media (prefers-reduced-motion: reduce) { body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) { animation: none; } }

/* Beställningar / Fakturor — open table without a box (like Adresser): filters and search above the table,
   status as a colored dot + text (color groups as in the plugin: --1..3 in progress, --4/5/8 completed,
   --7/10/11 pending, --9 error, --0/6/12 cancelled/neutral), number in the site font, no number — "Utkast". */
.tp-account-member .tp-account .qcom-account-orders__panel { border: 0 !important; border-radius: 0 !important; overflow: visible; }
.tp-account-member .tp-account .qcom-account-orders__desktop .qcom-account-toolbar { padding: 16px 0 20px !important; }
.tp-account-member .tp-account .qcom-account-orders__filters { margin: 24px 0 0 !important; }
.tp-account-member .tp-account .qcom-account-orders__table-head { padding-left: 16px; padding-right: 16px; }
.tp-account-member .tp-account .qcom-account-orders__table-rows > * + * { border-top: 0 !important; }
.tp-account-member .tp-account .qcom-account-orders__table-row { min-height: 68px; padding-left: 16px; padding-right: 16px; cursor: pointer; }
.tp-account-member .tp-account .qcom-account-orders__cell--primary { font: 400 16px/1.2 var(--wp--preset--font-family--heading) !important; color: var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-account-orders__cell--primary:empty::before, .tp-account-member .tp-account .qcom-account-orders__mobile-card-number:empty::before { content: "Utkast"; font: 400 12px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #8a93a3; }
.tp-account-member .tp-account .qcom-account-orders__cell--muted { font: 400 13px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.04em; color: #646d7d; }
.tp-account-member .tp-account .qcom-account-orders__cell--right { font: 600 16px/1 var(--wp--preset--font-family--body); color: var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-account-orders__cell--chevron { color: #8a93a3; transition: transform 0.2s ease, color 0.2s ease; }
.tp-account-member .tp-account .qcom-account-orders__table-row:hover .qcom-account-orders__cell--chevron { color: var(--wp--preset--color--ink); transform: translateX(4px); }
/* Status: dot + text */
.tp-account-member .tp-account [class*="qcom-account-orders__status-badge--"] { --tp-dot: #8a93a3; display: inline-flex; align-items: center; gap: 8px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--wp--preset--color--ink) !important; font: 400 11px/1 var(--wp--preset--font-family--mono) !important; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.tp-account-member .tp-account [class*="qcom-account-orders__status-badge--"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tp-dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tp-dot) 18%, transparent); }
.tp-account-member .tp-account :is(.qcom-account-orders__status-badge--1, .qcom-account-orders__status-badge--2, .qcom-account-orders__status-badge--3) { --tp-dot: #2b3a59; }
.tp-account-member .tp-account :is(.qcom-account-orders__status-badge--4, .qcom-account-orders__status-badge--5, .qcom-account-orders__status-badge--8) { --tp-dot: #2f7d4f; }
.tp-account-member .tp-account :is(.qcom-account-orders__status-badge--7, .qcom-account-orders__status-badge--10, .qcom-account-orders__status-badge--11) { --tp-dot: #c27c0e; }
.tp-account-member .tp-account .qcom-account-orders__status-badge--9 { --tp-dot: #b42318; }
/* Phone: heading and "Uppdatera" on one line; cards without a heavy status border */
@media (max-width: 1023px) {
	.tp-account-member .tp-account .qcom-account-header { flex-wrap: nowrap !important; }
	.tp-account-member .tp-account .qcom-account-header .qcom-account-title { min-width: 0; }
	.tp-account-member .tp-account .qcom-account-refresh { flex: none; display: grid; place-items: center; width: 44px; height: 44px; min-height: 0; border: 1px solid var(--wp--preset--color--hairline); font-size: 0; letter-spacing: 0; }
	.tp-account-member .tp-account .qcom-account-refresh svg { width: 18px; height: 18px; }
}
/* Any loading account section (containing generic qcom-skeleton blocks: Önskelista,
   Profil etc.) → a single loader of ours instead of gray bars; consistent with the other account loaders. */
.tp-account .qcom-account-page__content .qcom-account-section:has(.qcom-skeleton) { position: relative; min-height: 320px; }
.tp-account .qcom-account-page__content .qcom-account-section:has(.qcom-skeleton) > * { visibility: hidden; }
.tp-account .qcom-account-page__content .qcom-account-section:has(.qcom-skeleton)::before { content: ""; position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; background: var(--wp--preset--color--accent); -webkit-mask: var(--tp-mark-loader) center / contain no-repeat; mask: var(--tp-mark-loader) center / contain no-repeat; }
.tp-account .qcom-account-page__content .qcom-account-section:has(.qcom-skeleton) .qcom-account-skeleton::before { content: none; }
/* Account list skeleton (qcom-account-skeleton) → our loader */
.tp-account .qcom-account-page__content .qcom-account-skeleton { position: relative; min-height: 320px; border: 0 !important; }
/* Skeleton of several identical blocks — only one loader: hide the other blocks, nested ones get no loader */
.tp-account .qcom-account-page__content .qcom-account-skeleton ~ .qcom-account-skeleton { display: none !important; }
.tp-account .qcom-account-page__content .qcom-account-skeleton .qcom-account-skeleton::before { content: none; }
.tp-account .qcom-account-page__content .qcom-account-skeleton > * { visibility: hidden; }
.tp-account .qcom-account-page__content .qcom-account-skeleton::before { content: ""; position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; background: var(--wp--preset--color--accent); -webkit-mask: var(--tp-mark-loader) center / contain no-repeat; mask: var(--tp-mark-loader) center / contain no-repeat; }
.tp-account-member .tp-account .qcom-account-orders__mobile-card { transition: border-color 0.15s ease; }
.tp-account-member .tp-account .qcom-account-orders__mobile-card:hover { border-color: #c3cad6 !important; }

/* Order filter (Alla / Aktiv / Ej slutförd) — underlined text tabs, no boxed toggle */
.tp-account-member .tp-account :is(.qcom-account-orders__filters, .qcom-account-orders__mobile-filters) { display: flex; flex-wrap: nowrap; gap: 28px; width: 100% !important; max-width: none !important; margin: 24px 0 0 !important; padding: 0; border: 0 !important; border-bottom: 1px solid var(--wp--preset--color--hairline) !important; overflow-x: auto; scrollbar-width: none; }
.tp-account-member .tp-account .qcom-account-orders__filter-btn { position: relative; display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; color: #646d7d !important; font: 600 13px/44px var(--wp--preset--font-family--body) !important; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.tp-account-member .tp-account .qcom-account-orders__filter-btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; transition: background-color 0.2s ease; }
.tp-account-member .tp-account .qcom-account-orders__filter-btn:hover { color: var(--wp--preset--color--ink) !important; }
.tp-account-member .tp-account .qcom-account-orders__filter-btn--active { color: var(--wp--preset--color--ink) !important; }
.tp-account-member .tp-account .qcom-account-orders__filter-btn--active::after { background: var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-account-orders__filter-count { padding: 0 !important; background: none !important; color: #8a93a3 !important; font: 400 11px/1 var(--wp--preset--font-family--mono) !important; letter-spacing: 0.06em; opacity: 1; }
.tp-account-member .tp-account .qcom-account-orders__filter-btn--active .qcom-account-orders__filter-count { color: var(--wp--preset--color--ink) !important; }
@media (max-width: 1023px) { .tp-account-member .tp-account .qcom-account-orders__mobile-filters { margin: 16px 0 !important; } }

/* --- Order page (/order-details/) — account language: no banner (tp-account-member), header with
   "← Tillbaka", a large title and a status dot; box-less left column (kickers + lines),
   KID in a light field, summary with a large total; underlined tabs; products as rows with photos. */
.tp-account-member .tp-account .tp-account__body:has(.qcom-order-details) { padding: 32px 16px 80px !important; }
@media (min-width: 1024px) { .tp-account-member .tp-account .tp-account__body:has(.qcom-order-details) { padding: 40px 48px 96px !important; } }
.tp-account-member .tp-account .qcom-order-details__back-section { margin: 0 0 32px; }
.tp-account-member .tp-account :is(.qcom-order-details__back-btn, .qcom-order-details__back-btn--mobile) { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 0; border: 0; background: none; color: #646d7d !important; font: 600 12px/1 var(--wp--preset--font-family--body) !important; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none !important; cursor: pointer; }
.tp-account-member .tp-account :is(.qcom-order-details__back-btn, .qcom-order-details__back-btn--mobile):hover { color: var(--wp--preset--color--ink) !important; }
.tp-account-member .tp-account :is(.qcom-order-details__back-btn, .qcom-order-details__back-btn--mobile) svg { width: 16px; height: 16px; }
.tp-account-member .tp-account .qcom-order-details__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-order-details__title { margin: 0; font: 400 clamp(28px, 2.8vw, 38px)/1 var(--wp--preset--font-family--heading) !important; text-transform: uppercase; color: var(--wp--preset--color--ink); }
/* Status — dot + text (color groups as in the order list) */
.tp-account-member .tp-account [class*="qcom-order-details__status--"] { --tp-dot: #8a93a3; display: inline-flex; align-items: center; gap: 8px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--wp--preset--color--ink) !important; font: 400 12px/1 var(--wp--preset--font-family--mono) !important; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.tp-account-member .tp-account [class*="qcom-order-details__status--"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tp-dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tp-dot) 18%, transparent); }
.tp-account-member .tp-account :is(.qcom-order-details__status--1, .qcom-order-details__status--2, .qcom-order-details__status--3) { --tp-dot: #2b3a59; }
.tp-account-member .tp-account :is(.qcom-order-details__status--4, .qcom-order-details__status--5, .qcom-order-details__status--8) { --tp-dot: #2f7d4f; }
.tp-account-member .tp-account :is(.qcom-order-details__status--7, .qcom-order-details__status--10, .qcom-order-details__status--11) { --tp-dot: #c27c0e; }
.tp-account-member .tp-account .qcom-order-details__status--9 { --tp-dot: #b42318; }
/* Grid: left column + main */
@media (min-width: 1024px) { .tp-account-member .tp-account .qcom-order-details__grid { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 56px; align-items: start; } }
.tp-account-member .tp-account .qcom-order-details__sidebar { display: flex; flex-direction: column; gap: 32px; }
.tp-account-member .tp-account :is(.qcom-order-details__card, .qcom-order-details__summary) { border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
.tp-account-member .tp-account :is(.qcom-order-details__card-header, .qcom-order-details__summary-header) { margin: 0; padding: 0 0 12px !important; border: 0 !important; border-bottom: 1px solid var(--wp--preset--color--hairline) !important; background: none !important; font: 400 11px/1 var(--wp--preset--font-family--mono) !important; letter-spacing: 0.14em; text-transform: uppercase; color: #646d7d !important; }
.tp-account-member .tp-account :is(.qcom-order-details__card-body, .qcom-order-details__summary-body) { display: flex; flex-direction: column; gap: 16px; padding: 16px 0 0 !important; }
.tp-account-member .tp-account :is(.qcom-order-details__info-label, .qcom-order-details__kid-label) { margin-bottom: 4px; font: 400 11px/1 var(--wp--preset--font-family--mono) !important; letter-spacing: 0.12em; text-transform: uppercase; color: #8a93a3 !important; }
.tp-account-member .tp-account .qcom-order-details__info-value { font: 500 16px/1.3 var(--wp--preset--font-family--body) !important; color: var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-order-details__kid-box { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 48px; padding: 0 6px 0 14px; border: 1px solid var(--wp--preset--color--hairline) !important; border-radius: 0 !important; background: var(--wp--preset--color--mist) !important; }
.tp-account-member .tp-account .qcom-order-details__kid-code { background: none; padding: 0; font: 400 15px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.08em; color: var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-order-details__kid-copy-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid transparent; border-radius: 0; background: none; color: #646d7d; cursor: pointer; }
.tp-account-member .tp-account .qcom-order-details__kid-copy-btn:hover { border-color: var(--wp--preset--color--hairline); background: #fff; color: var(--wp--preset--color--ink); }
/* Summary */
.tp-account-member .tp-account .qcom-order-details__summary-body { gap: 10px; }
.tp-account-member .tp-account .qcom-order-details__summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tp-account-member .tp-account .qcom-order-details__summary-label { font: 400 15px/1.4 var(--wp--preset--font-family--body) !important; letter-spacing: 0 !important; text-transform: none !important; color: #4a5263 !important; }
.tp-account-member .tp-account .qcom-order-details__summary .qcom-price-block__primary { font: 600 15px/1.2 var(--wp--preset--font-family--body) !important; letter-spacing: 0 !important; color: var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-order-details__summary-divider { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 16px !important; border-top: 1px solid var(--wp--preset--color--ink) !important; }
.tp-account-member .tp-account .qcom-order-details__summary-total-label { font: 400 13px/1.2 var(--wp--preset--font-family--heading) !important; letter-spacing: 0.02em; text-transform: uppercase; color: var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-order-details__summary-total-value .qcom-price-block__primary { font: 400 28px/1 var(--wp--preset--font-family--heading) !important; }
/* Underlined tabs */
.tp-account-member .tp-account .qcom-order-details__tabs { display: flex; flex-wrap: nowrap; gap: 28px; margin: 0; padding: 0; border: 0 !important; border-bottom: 1px solid var(--wp--preset--color--hairline) !important; background: none !important; overflow-x: auto; scrollbar-width: none; }
.tp-account-member .tp-account .qcom-order-details__tab { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: #646d7d !important; font: 600 13px/1 var(--wp--preset--font-family--body) !important; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.tp-account-member .tp-account .qcom-order-details__tab svg { width: 16px; height: 16px; color: inherit !important; stroke: currentColor !important; fill: none !important; opacity: 1 !important; }
.tp-account-member .tp-account .qcom-order-details__tab svg * { stroke: currentColor !important; opacity: 1 !important; }
.tp-account-member .tp-account .qcom-order-details__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
.tp-account-member .tp-account .qcom-order-details__tab:hover, .tp-account-member .tp-account .qcom-order-details__tab--active { color: var(--wp--preset--color--ink) !important; }
.tp-account-member .tp-account .qcom-order-details__tab--active::after { background: var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-order-details__tab-count { padding: 0 !important; border-radius: 0 !important; background: none !important; color: #8a93a3 !important; font: 400 11px/1 var(--wp--preset--font-family--mono) !important; }
.tp-account-member .tp-account .qcom-order-details__tab--active .qcom-order-details__tab-count { color: var(--wp--preset--color--ink) !important; }
/* Tab content: no boxes; products as rows */
.tp-account-member .tp-account .qcom-order-details__main .qcom-card, .tp-account-member .tp-account .qcom-order-details__content-box { border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; }
.tp-account-member .tp-account .qcom-order-details__main .qcom-card__content { padding: 0 !important; }
.tp-account-member .tp-account .qcom-order-details__items { display: flex; flex-direction: column; gap: 0; }
.tp-account-member .tp-account .qcom-order-details__item { display: flex; align-items: flex-start; gap: 18px; margin: 0; padding: 20px 0 !important; border: 0 !important; border-bottom: 1px solid var(--wp--preset--color--hairline) !important; border-radius: 0 !important; background: none !important; }
.tp-account-member .tp-account .qcom-order-details__item-thumb { flex: none; display: grid; place-items: center; width: 80px; height: 80px; border: 1px solid var(--wp--preset--color--hairline); background: #f7f8fa; overflow: hidden; }
.tp-account-member .tp-account .qcom-order-details__item-img { width: 100%; height: 100%; object-fit: contain; }
.tp-account-member .tp-account .qcom-order-details__item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tp-account-member .tp-account .qcom-order-details__item-title { margin: 0; font: 600 16px/1.35 var(--wp--preset--font-family--body) !important; text-transform: none !important; letter-spacing: 0 !important; }
.tp-account-member .tp-account .qcom-order-details__item-link { color: var(--wp--preset--color--ink) !important; text-decoration: none; }
.tp-account-member .tp-account .qcom-order-details__item-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.tp-account-member .tp-account .qcom-order-details__item-code { font: 400 12px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.06em; color: #646d7d; }
.tp-account-member .tp-account [class*="qcom-order-details__item-stock"] { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/1 var(--wp--preset--font-family--mono) !important; letter-spacing: 0.04em; }
.tp-account-member .tp-account [class*="qcom-order-details__item-stock"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tp-account-member .tp-account .qcom-order-details__item-stock--in { color: #2f7d4f !important; }
.tp-account-member .tp-account .qcom-order-details__item-prices { flex: none; text-align: right; }
.tp-account-member .tp-account .qcom-order-details__item-total .qcom-price-block__primary { font: 600 17px/1.2 var(--wp--preset--font-family--body) !important; color: var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-order-details__item-tax-label { display: block; margin-top: 4px; font: 400 11px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.06em; color: #8a93a3; }
/* The plugin's columns have grid-column: span … — pin them explicitly, otherwise the grid grows */
@media (min-width: 1024px) {
	.tp-account-member .tp-account .qcom-order-details__sidebar { grid-column: 1 !important; grid-row: 1; }
	.tp-account-member .tp-account .qcom-order-details__main { grid-column: 2 !important; grid-row: 1; min-width: 0; }
}
.tp-account-member .tp-account .qcom-order-details__back-section { padding-bottom: 0 !important; border-bottom: 0 !important; }
/* Phone: no boxes, as on desktop */
.tp-account-member .tp-account .qcom-order-details__header--mobile { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-order-details__status-row--mobile { margin-top: 12px; }
.tp-account-member .tp-account .qcom-order-details__mobile-cards { display: flex; flex-direction: column; gap: 24px; margin-bottom: 28px; }
.tp-account-member .tp-account .qcom-order-details__card--mobile { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
.tp-account-member .tp-account :is(.qcom-order-details__card-header--mobile, .qcom-order-details__summary-header--mobile) { margin: 0 0 12px; padding: 0 0 12px !important; border: 0 !important; border-bottom: 1px solid var(--wp--preset--color--hairline) !important; background: none !important; font: 400 11px/1 var(--wp--preset--font-family--mono) !important; letter-spacing: 0.14em; text-transform: uppercase; color: #646d7d !important; }
.tp-account-member .tp-account :is(.qcom-order-details__info-label--mobile, .qcom-order-details__kid-label--mobile) { margin-bottom: 4px; font: 400 11px/1 var(--wp--preset--font-family--mono) !important; letter-spacing: 0.12em; text-transform: uppercase; color: #8a93a3 !important; }
.tp-account-member .tp-account .qcom-order-details__kid-row--mobile { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 48px; padding: 0 6px 0 14px; border: 1px solid var(--wp--preset--color--hairline); background: var(--wp--preset--color--mist); }
.tp-account-member .tp-account .qcom-order-details__summary--mobile { margin-bottom: 28px; }
.tp-account-member .tp-account .qcom-order-details__summary-total-value--mobile .qcom-price-block__primary { font: 400 24px/1 var(--wp--preset--font-family--heading) !important; }
.tp-account-member .tp-account .qcom-order-details__tabs--mobile { display: flex; flex-wrap: nowrap; gap: 22px; margin: 0 0 4px; padding: 0; border: 0 !important; border-bottom: 1px solid var(--wp--preset--color--hairline) !important; background: none !important; overflow-x: auto; scrollbar-width: none; }
.tp-account-member .tp-account .qcom-order-details__tabs--mobile .qcom-order-details__tab { flex: none; }
.tp-account-member .tp-account .qcom-order-details__mobile-item { display: flex; gap: 14px; padding: 18px 0; border: 0 !important; border-bottom: 1px solid var(--wp--preset--color--hairline) !important; border-radius: 0 !important; background: none !important; }
.tp-account-member .tp-account .qcom-order-details__mobile-item-thumb { flex: none; width: 72px; height: 72px; border: 1px solid var(--wp--preset--color--hairline); background: #f7f8fa; overflow: hidden; }
.tp-account-member .tp-account .qcom-order-details__mobile-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tp-account-member .tp-account .qcom-order-details__mobile-item .qcom-order-details__item-title { font-size: 15px !important; }
.tp-account-member .tp-account .qcom-order-details__mobile-item [class*="item-stock"] { padding: 0 !important; border: 0 !important; background: none !important; text-transform: none; }
/* Order page skeleton → our loader */
.tp-account .qcom-order-details:has(> [class*="__skeleton-"]) { position: relative; min-height: 420px; }
.tp-account .qcom-order-details > [class*="__skeleton-"] { visibility: hidden; }
.tp-account .qcom-order-details:has(> [class*="__skeleton-"])::before { content: ""; position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; background: var(--wp--preset--color--accent); -webkit-mask: var(--tp-mark-loader) center / contain no-repeat; mask: var(--tp-mark-loader) center / contain no-repeat; }

/* === Account on phone (≤759px) ===========================================
   Section heading and actions always on one line: text buttons that don't fit
   ("Lägg till adress", "Redigera", "Avbryt/Spara", "DESC") become square
   44px icons. The text stays in the DOM (font-size: 0) — it's the button's accessible name. */
@media (max-width: 759px) {
	/* Bottom section bar: without uppercase the labels fit fully
	   ("Beställningar", "Inställningar"), and the dots over Ä/Ö don't merge. */
	.qcom-account-page__mobile-tab { padding-left: 0 !important; padding-right: 0 !important; }
	.qcom-account-page__mobile-tab-label { font: 600 10px/1.1 var(--wp--preset--font-family--body) !important; text-transform: none !important; letter-spacing: -0.01em !important; }

	/* Icon buttons in headers */
	.tp-account-member .tp-account .qcom-account-header .wp-block-button__link,
	.tp-account-member .tp-account .qcom-account-profile__section-header > .qcom-wp-button .wp-block-button__link,
	.tp-account-member .tp-account .qcom-account-profile__edit-actions .wp-block-button__link,
	.tp-account-member .tp-account .qcom-account-sort-btn {
		display: flex !important; align-items: center; justify-content: center; gap: 0 !important; width: 36px !important; min-width: 36px; height: 36px; min-height: 0 !important; padding: 0 !important;
		font-size: 0 !important; letter-spacing: 0 !important; line-height: 0;
	}
	.tp-account-member .tp-account .qcom-account-header .wp-block-button__link::before,
	.tp-account-member .tp-account .qcom-account-header .wp-block-button__link::after { content: none !important; }
	.tp-account-member .tp-account :is(.qcom-account-header .wp-block-button__link, .qcom-account-profile__section-header > .qcom-wp-button .wp-block-button__link, .qcom-account-profile__edit-actions .wp-block-button__link, .qcom-account-sort-btn) svg { width: 16px; height: 16px; margin: 0 !important; }
	.tp-account-member .tp-account .qcom-account-sort-btn { height: 48px; width: 48px !important; }
	.tp-account-member .tp-account .qcom-account-sort-btn__label { display: none; }
	.tp-account-member .tp-account .qcom-account-profile__edit-actions { display: flex; gap: 8px; }
	.tp-account-member .tp-account .qcom-account-profile__section-header .qcom-account-subtitle { overflow-wrap: anywhere; }
	/* Personlig information (view mode): Förnamn | Efternamn, E-post | Telefon — a 2×2 grid instead of four rows */
	.tp-account-member .tp-account .qcom-card__content:has(> [data-field="email"] > .qcom-account-field) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
	.tp-account-member .tp-account .qcom-card__content:has(> [data-field="email"] > .qcom-account-field) > .qcom-account-grid-2 { display: contents; }
	.tp-account-member .tp-account .qcom-card__content:has(> [data-field="email"] > .qcom-account-field) > .qcom-account-form-group { margin: 0 !important; min-width: 0; }
	.tp-account-member .tp-account .qcom-card__content:has(> [data-field="email"] > .qcom-account-field) .qcom-account-field { overflow-wrap: anywhere; }

	/* "Ändra" (billing address): the rule above makes the wrapper static — the menu lost
	   its reference point and appeared near the footer. The wrapper is the anchor, the menu sits below the button on the right. */
	.tp-account-member .tp-account .qcom-account-profile__section-header > .qcom-account-profile__billing-dropdown { position: relative !important; }
	.tp-account-member .tp-account .qcom-account-profile__billing-dropdown > .qcom-wp-button .wp-block-button__link { display: inline-flex; align-items: center; gap: 6px; height: 36px; min-height: 0 !important; padding: 0 10px 0 12px !important; font-size: 11px !important; }
	.tp-account-member .tp-account .qcom-account-profile__billing-dropdown > .qcom-wp-button .wp-block-button__link svg { width: 14px; height: 14px; margin: 0 !important; }
	.tp-account-member .tp-account .qcom-account-profile__billing-menu { top: 100% !important; right: 0 !important; left: auto !important; width: min(320px, calc(100vw - 32px)); }

	/* Address card: actions as a tight group of 32px icons to the right of the street (was 40px + 10px gap) */
	.tp-account-member .tp-account .qcom-account-addresses__card-top { column-gap: 0; }
	.tp-account-member .tp-account .qcom-account-addresses__card-title-wrap { margin-right: 8px; }
	.tp-account-member .tp-account .qcom-account-addresses__card .qcom-account-icon-btn { width: 32px; height: 32px; min-width: 0; margin-top: -6px; }
	.tp-account-member .tp-account .qcom-account-addresses__card .qcom-account-icon-btn svg { width: 16px; height: 16px; }
	.tp-account-member .tp-account .qcom-account-addresses__card-body { padding-right: 4px; }

	/* "Ladda fler" in lists: the plugin gives the mobile button the qcom-account-refresh class, which
	   on phone is a square icon without text (an empty square). Restore the text button. */
	.tp-account-member .tp-account .qcom-account-load-more-wrap--mobile { padding: 20px 0 0; }
	.tp-account-member .tp-account .qcom-account-load-more-wrap--mobile .qcom-account-refresh { display: flex; width: 100%; height: 48px; justify-content: center; border: var(--tp-border-ui); color: var(--wp--preset--color--ink); font: 700 13px/1 var(--wp--preset--font-family--body); letter-spacing: 0.04em; text-transform: uppercase; }

	/* Order page: tabs — the active one with a label, the others icon only (the third isn't clipped) */
	.tp-account-member .tp-account .qcom-order-details__tabs--mobile { gap: 0; }
	.tp-account-member .tp-account .qcom-order-details__tabs--mobile .qcom-order-details__tab { padding: 0 14px !important; }
	.tp-account-member .tp-account .qcom-order-details__tabs--mobile .qcom-order-details__tab:first-child { padding-left: 0 !important; }
	.tp-account-member .tp-account .qcom-order-details__tabs--mobile .qcom-order-details__tab:not(.qcom-order-details__tab--active) { min-width: 48px; justify-content: center; font-size: 0 !important; gap: 0; }
	.tp-account-member .tp-account .qcom-order-details__tabs--mobile .qcom-order-details__tab:not(.qcom-order-details__tab--active) svg { width: 18px; height: 18px; }
	.tp-account-member .tp-account .qcom-order-details__tabs--mobile .qcom-order-details__tab:not(.qcom-order-details__tab--active) .qcom-order-details__tab-count { display: none; }

	/* Order item row: name up to 2 lines, Art.nr and Antal on one line, no extra spacing */
	.tp-account-member .tp-account .qcom-order-details__mobile-item-body { flex-flow: row wrap; align-content: flex-start; gap: 4px 14px; }
	.tp-account-member .tp-account .qcom-order-details__mobile-item-top { flex: 1 0 100%; gap: 12px; margin-bottom: 2px; }
	.tp-account-member .tp-account .qcom-order-details__mobile-item-name { white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.tp-account-member .tp-account .qcom-order-details__mobile-item-name .qcom-order-details__item-link { white-space: normal !important; }
	.tp-account-member .tp-account .qcom-order-details__mobile-item :is(.qcom-order-details__mobile-item-code, .qcom-order-details__mobile-item-qty) { margin: 0 !important; }
	.tp-account-member .tp-account .qcom-order-details__mobile-item-badges { flex: 1 0 100%; margin: 2px 0 0 !important; }
}
/* Order item photo missing (no src) or failed to load (dead URL — theme.js §36 sets
   .tp-img-broken): hide the image, the tile shows a faint logo mark instead of the icon and alt text. */
.tp-account .qcom-order-details__item-img:is(:not([src]), [src=""], .tp-img-broken) { visibility: hidden; }
.tp-account :is(.qcom-order-details__item-thumb, .qcom-order-details__mobile-item-thumb):has(> :is(:not([src]), [src=""], .tp-img-broken)) { position: relative; }
.tp-account :is(.qcom-order-details__item-thumb, .qcom-order-details__mobile-item-thumb):has(> :is(:not([src]), [src=""], .tp-img-broken))::before { content: ""; position: absolute; inset: 0; background: url("assets/img/logo-mark.svg?v=2") no-repeat center / 40% auto; filter: grayscale(1); opacity: 0.18; }

/* Account confirmation dialogs ("Du har artiklar i din varukorg" etc.): text + two equal-height buttons on one line —
   primary (ink, wider, with an arrow) on the right, "Avbryt" (outlined) on the left. */
:is(.qcom-order-details__cart-dialog-text, .qcom-uncompleted-orders__dialog-text) { margin: 0; font-size: 15px; line-height: 1.55; color: #4a5263; }
:is(.qcom-order-details__cart-dialog-actions, .qcom-uncompleted-orders__dialog-actions) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: stretch; gap: 12px; margin: 8px 0 0 !important; padding: 0 !important; }
:is(.qcom-order-details__cart-dialog-actions, .qcom-uncompleted-orders__dialog-actions) > .qcom-wp-button { display: flex; margin: 0 !important; }
:is(.qcom-order-details__cart-dialog-actions, .qcom-uncompleted-orders__dialog-actions) > .qcom-wp-button:not(.is-style-outline) { order: 2; flex: 1 1 auto; }
:is(.qcom-order-details__cart-dialog-actions, .qcom-uncompleted-orders__dialog-actions) > .is-style-outline { order: 1; flex: none; }
:is(.qcom-order-details__cart-dialog-actions, .qcom-uncompleted-orders__dialog-actions) .wp-block-button__link { width: 100%; min-height: 54px; white-space: nowrap; }
:is(.qcom-order-details__cart-dialog-actions, .qcom-uncompleted-orders__dialog-actions) .qcom-wp-button:not(.is-style-outline) .wp-block-button__link { background: var(--wp--preset--color--ink) !important; border-color: var(--wp--preset--color--ink) !important; color: #fff !important; font: 400 14px/1 var(--wp--preset--font-family--heading) !important; letter-spacing: 0.04em; }
:is(.qcom-order-details__cart-dialog-actions, .qcom-uncompleted-orders__dialog-actions) .qcom-wp-button:not(.is-style-outline) .wp-block-button__link::after { content: "→"; margin-left: 10px; transition: transform 0.2s ease; }
:is(.qcom-order-details__cart-dialog-actions, .qcom-uncompleted-orders__dialog-actions) .qcom-wp-button:not(.is-style-outline) .wp-block-button__link:hover::after { transform: translateX(4px); }
:is(.qcom-order-details__cart-dialog-actions, .qcom-uncompleted-orders__dialog-actions) .is-style-outline .wp-block-button__link { padding: 0 24px; background: #fff !important; color: var(--wp--preset--color--ink) !important; border: 1px solid var(--wp--preset--color--ink) !important; }
/* Text and buttons are direct children of the window (no wrapper): own padding, buttons within the window's gutters */
body .qcom-dialog__content > :is(.qcom-order-details__cart-dialog-text, .qcom-uncompleted-orders__dialog-text) { padding: 24px 32px 0 !important; }
body .qcom-dialog__content > :is(.qcom-order-details__cart-dialog-actions, .qcom-uncompleted-orders__dialog-actions) { margin: 0 !important; padding: 24px 32px 32px !important; }
body .qcom-dialog__content :is(.qcom-order-details__cart-dialog-text, .qcom-uncompleted-orders__dialog-text) + :is(.qcom-order-details__cart-dialog-actions, .qcom-uncompleted-orders__dialog-actions) { padding-top: 24px !important; }
@media (max-width: 419px) { :is(.qcom-order-details__cart-dialog-actions, .qcom-uncompleted-orders__dialog-actions) { flex-direction: column-reverse !important; } }
@media (max-width: 599px) { body .qcom-dialog__content > :is(.qcom-order-details__cart-dialog-text, .qcom-uncompleted-orders__dialog-text) { padding: 20px 20px 0 !important; } body .qcom-dialog__content > :is(.qcom-order-details__cart-dialog-actions, .qcom-uncompleted-orders__dialog-actions) { padding: 20px 20px 24px !important; } }
@media (max-width: 599px) { body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) .qcom-dialog__title { font-size: 20px !important; } body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) .qcom-dialog__header { padding: 22px 76px 20px 20px; } body:has(.tp-account) .qcom-dialog__content:not(.auth-menu__modal) > :not(.qcom-dialog__header):not(.qcom-dialog__close) { padding-left: 20px !important; padding-right: 20px !important; } }

/* Önskelista — a list of rows in the order page language: photo | name + item number + stock | price | actions.
   No box (the plugin card is removed by the general account list rule). */
.tp-account-member .tp-account .qcom-account-wishlist__list { display: flex; flex-direction: column; gap: 0; margin-top: 8px; border: 0 !important; }
.tp-account-member .tp-account .qcom-account-wishlist__item { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; grid-template-areas: "img info price" "img info actions"; align-items: center; column-gap: 20px; row-gap: 10px; padding: 20px 0 !important; border: 0 !important; border-bottom: 1px solid var(--wp--preset--color--hairline) !important; border-radius: 0 !important; background: none !important; }
.tp-account-member .tp-account .qcom-account-wishlist__img-link { grid-area: img; align-self: start; display: block; }
.tp-account-member .tp-account .qcom-account-wishlist__img-wrap { display: grid; place-items: center; width: 88px; height: 88px; border: 1px solid var(--wp--preset--color--hairline); border-radius: 0 !important; background: #f7f8fa; overflow: hidden; transition: border-color 0.15s ease; }
.tp-account-member .tp-account .qcom-account-wishlist__img-link:hover .qcom-account-wishlist__img-wrap { border-color: #c3cad6; }
.tp-account-member .tp-account .qcom-account-wishlist__img { width: 100%; height: 100%; object-fit: contain; }
.tp-account-member .tp-account .qcom-account-wishlist__img-placeholder { color: #c3cad6; }
.tp-account-member .tp-account .qcom-account-wishlist__info { grid-area: info; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tp-account-member .tp-account .qcom-account-wishlist__info-link { color: var(--wp--preset--color--ink) !important; text-decoration: none; }
.tp-account-member .tp-account .qcom-account-wishlist__name { margin: 0; font: 600 16px/1.35 var(--wp--preset--font-family--body) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-account-wishlist__info-link:hover .qcom-account-wishlist__name { text-decoration: underline; text-underline-offset: 3px; }
.tp-account-member .tp-account .qcom-account-wishlist__code { font: 400 12px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.06em; color: #646d7d; }
.tp-account-member .tp-account .qcom-account-wishlist__stock { display: inline-flex; align-items: center; gap: 6px; padding: 0 !important; border: 0 !important; background: none !important; font: 400 12px/1 var(--wp--preset--font-family--mono) !important; letter-spacing: 0.04em; color: #646d7d; }
.tp-account-member .tp-account .qcom-account-wishlist__stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tp-account-member .tp-account .qcom-account-wishlist__stock--in-stock { color: #2f7d4f !important; }
.tp-account-member .tp-account .qcom-account-wishlist__stock--on-order { color: #c27c0e !important; }
.tp-account-member .tp-account .qcom-account-wishlist__stock--out { color: #b42318 !important; }
.tp-account-member .tp-account .qcom-account-wishlist__price-actions { display: contents; }
.tp-account-member .tp-account .qcom-account-wishlist__price, .tp-account-member .tp-account .qcom-account-wishlist__price-link { grid-area: price; justify-self: end; align-self: end; text-align: right; color: var(--wp--preset--color--ink); text-decoration: none; }
.tp-account-member .tp-account .qcom-account-wishlist__price .qcom-price-block__primary { font: 600 17px/1.2 var(--wp--preset--font-family--body) !important; color: var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-account-wishlist__actions { grid-area: actions; justify-self: end; align-self: start; display: flex; align-items: center; gap: 8px; }
.tp-account-member .tp-account :is(.qcom-account-wishlist__cart-btn, .qcom-account-wishlist__view-link) { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--wp--preset--color--ink); border-radius: 0 !important; background: var(--wp--preset--color--ink); color: #fff !important; font: 600 12px/1 var(--wp--preset--font-family--body); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease; }
.tp-account-member .tp-account :is(.qcom-account-wishlist__cart-btn, .qcom-account-wishlist__view-link):hover { background: var(--wp--preset--color--accent-deep); }
.tp-account-member .tp-account .qcom-account-wishlist__view-link { background: #fff; color: var(--wp--preset--color--ink) !important; }
.tp-account-member .tp-account .qcom-account-wishlist__view-link:hover { background: var(--wp--preset--color--sand); }
.tp-account-member .tp-account .qcom-account-wishlist__cart-btn:disabled { opacity: 0.6; cursor: progress; }
.tp-account-member .tp-account .qcom-account-wishlist__remove-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid transparent; border-radius: 0 !important; background: none; color: #646d7d; cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
.tp-account-member .tp-account .qcom-account-wishlist__remove-btn:hover { color: #b42318; background: #fdf4f3; border-color: #f0c7c3; }
@media (max-width: 599px) {
	.tp-account-member .tp-account .qcom-account-wishlist__item { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "img info" "img price" "actions actions"; column-gap: 14px; }
	.tp-account-member .tp-account .qcom-account-wishlist__img-wrap { width: 72px; height: 72px; }
	.tp-account-member .tp-account :is(.qcom-account-wishlist__price, .qcom-account-wishlist__price-link) { justify-self: start; text-align: left; }
	.tp-account-member .tp-account .qcom-account-wishlist__actions { justify-self: stretch; }
	.tp-account-member .tp-account :is(.qcom-account-wishlist__cart-btn, .qcom-account-wishlist__view-link) { flex: 1; justify-content: center; min-height: 44px; }
}
/* "Köp" as on the product page: Archivo Black, uppercase, no cart icon; action row
   height 34px. Visible text is "Köp" (as everywhere on the site); the accessible name stays "Lägg i varukorg"
   (content: … / "" doesn't add "Köp" to the name). Remove is an outlined square with ✕, like window close buttons. */
.tp-account-member .tp-account .qcom-account-wishlist__cart-btn { justify-content: center; min-width: 96px; min-height: 34px; padding: 0 16px; font-size: 0 !important; letter-spacing: 0; }
.tp-account-member .tp-account .qcom-account-wishlist__cart-btn svg { display: none; }
.tp-account-member .tp-account .qcom-account-wishlist__cart-btn::after { content: "Köp" / ""; font: 400 12px/1 var(--wp--preset--font-family--heading); letter-spacing: 0.04em; text-transform: uppercase; }
.tp-account-member .tp-account .qcom-account-wishlist__remove-btn { flex: none; width: 34px; height: 34px; border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--ink); }
.tp-account-member .tp-account .qcom-account-wishlist__remove-btn svg { display: none; }
.tp-account-member .tp-account .qcom-account-wishlist__remove-btn::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%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' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E") center / contain no-repeat; }
.tp-account-member .tp-account .qcom-account-wishlist__remove-btn:hover { color: var(--wp--preset--color--sale); border-color: var(--wp--preset--color--sale); background: #fdf4f3; }
/* Phone: ✕ in the card's top-right corner, price and "Köp" on one row below the photo and name:
   [photo] name · Art.nr · stock  [✕]
   1 885 kr                       [ KÖP ] */
@media (max-width: 599px) {
	.tp-account-member .tp-account .qcom-account-wishlist__item { grid-template-columns: 72px minmax(0, 1fr) auto 28px; grid-template-areas: "img info info remove" "price price cart cart"; align-items: start; column-gap: 14px; row-gap: 14px; }
	.tp-account-member .tp-account :is(.qcom-account-wishlist__price-actions, .qcom-account-wishlist__actions) { display: contents; }
	.tp-account-member .tp-account :is(.qcom-account-wishlist__price, .qcom-account-wishlist__price-link) { grid-area: price; align-self: center; }
	.tp-account-member .tp-account .qcom-account-wishlist__price .qcom-price-block__primary { font-size: 18px !important; }
	.tp-account-member .tp-account :is(.qcom-account-wishlist__cart-btn, .qcom-account-wishlist__view-link) { grid-area: cart; flex: none; justify-self: end; min-width: 96px; min-height: 34px; }
	.tp-account-member .tp-account .qcom-account-wishlist__remove-btn { grid-area: remove; width: 28px; height: 28px; margin: -2px 0 0; }
	.tp-account-member .tp-account .qcom-account-wishlist__remove-btn::before { width: 12px; height: 12px; }
}

/* === Auth modal (the plugin's auth-menu, portal in body) =====
   Theme CSS only (plugin code is untouched). Dark gradient header like the category banner,
   site name as a mono kicker; light fields with ink focus; "Registrera →" as the accent;
   login button in ink with an arrow. Entrance — a slight rise. */
.qcom-dialog__overlay { background: rgb(20 28 44 / 0.55) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.auth-menu__modal.qcom-dialog__content { border: 0 !important; box-shadow: 0 30px 80px rgb(20 28 44 / 0.35) !important; max-width: 460px; overflow: hidden; animation: tp-auth-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.auth-menu__modal.qcom-dialog__content { border: var(--tp-border-2) !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; max-width: 480px; width: calc(100% - 32px); background: var(--wp--preset--color--paper); }
.auth-menu__modal .qcom-dialog__close { top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; border: var(--tp-border-ui); border-radius: 0; background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); opacity: 1; cursor: pointer; }
.auth-menu__modal .qcom-dialog__close:hover { background: var(--wp--preset--color--sand); }
.auth-menu__modal .qcom-dialog__close svg { width: 20px; height: 20px; }
.auth-menu__modal .qcom-auth-modal { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
.qcom-auth-modal__header { text-align: left !important; padding: 24px 24px 20px; border-bottom: var(--tp-border-2); background: var(--wp--preset--color--ink); color: #fff; }
.qcom-auth-modal__site-name { margin: 0 0 14px !important; font: 400 18px/1 var(--wp--preset--font-family--heading) !important; text-transform: uppercase; letter-spacing: 0.02em; color: #fff !important; }
.qcom-auth-modal__title { margin: 0 0 6px !important; font: 400 28px/1 var(--wp--preset--font-family--heading) !important; text-transform: uppercase; color: #fff !important; }
.qcom-auth-modal__subtitle { margin: 0 !important; font-size: 14px !important; color: var(--wp--preset--color--hairline) !important; }
.qcom-auth-modal__content { padding: 24px !important; }
.qcom-auth-modal__field { margin-bottom: 16px; }
.qcom-auth-modal__label { display: block; margin-bottom: 6px; font: 600 12px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.06em; }
.qcom-auth-modal .qcom-input, .qcom-auth-modal input:not([type="checkbox"]) { width: 100%; min-height: 48px; border: var(--tp-border-ui); border-radius: 0 !important; padding: 0 12px; font-size: 16px; box-shadow: none; }
.qcom-auth-modal .qcom-input:focus { outline: none; border-color: var(--wp--preset--color--accent); }
.qcom-auth-modal__actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.qcom-auth-modal__link { background: none; border: 0; padding: 0; min-height: 44px; font: 600 13px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.qcom-auth-modal__toggle { border: var(--tp-border-ui); background: var(--wp--preset--color--mist); border-radius: 0; padding: 12px 14px; margin: 4px 0 16px; }
.qcom-auth-modal .qcom-switch { border-radius: 0 !important; background: var(--wp--preset--color--hairline); }
.qcom-auth-modal .qcom-switch__thumb { border-radius: 0 !important; }
.qcom-auth-modal .qcom-wp-button__link { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 0 20px; background: var(--wp--preset--color--accent) !important; color: #fff !important; border: 1px solid var(--wp--preset--color--accent) !important; border-radius: 0 !important; font: 400 15px/1 var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; }
.qcom-auth-modal .qcom-wp-button__link:hover { background: var(--wp--preset--color--accent-deep) !important; border-color: var(--wp--preset--color--accent-deep) !important; }
.qcom-auth-modal__alert { border-radius: 0 !important; }
@keyframes tp-auth-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
.auth-menu__modal .qcom-dialog__close { top: 16px; right: 16px; border: 1px solid rgb(255 255 255 / 0.28); background: transparent; color: #fff; transition: background-color 0.2s ease, border-color 0.2s ease; }
.auth-menu__modal .qcom-dialog__close:hover { background: rgb(255 255 255 / 0.1); border-color: #fff; color: #fff; }
.auth-menu__modal .qcom-dialog__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.qcom-auth-modal__header { position: relative; padding: 28px 24px 26px; border-bottom: 0; background: linear-gradient(120deg, #2a3449 0%, var(--wp--preset--color--ink) 65%); }
.qcom-auth-modal__site-name { margin: 0 0 18px !important; font: 400 12px/1 var(--wp--preset--font-family--mono) !important; letter-spacing: 0.16em; color: #c9d0dd !important; }
.qcom-auth-modal__site-name::after { content: " · Konto"; color: #c9d0dd; }
.qcom-auth-modal__title { margin: 0 0 10px !important; padding-right: 56px; font: 400 32px/1 var(--wp--preset--font-family--heading) !important; }
.qcom-auth-modal__subtitle { max-width: 34ch; font-size: 14px !important; line-height: 1.5; color: #c9d0dd !important; }
.qcom-auth-modal__label { margin-bottom: 8px; font: 400 11px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.12em; color: var(--wp--preset--color--stone); }
.qcom-auth-modal .qcom-input, .qcom-auth-modal input:not([type="checkbox"]) { min-height: 52px; padding: 0 14px; border: 1px solid var(--wp--preset--color--hairline); background: var(--wp--preset--color--mist); color: var(--wp--preset--color--ink); transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; }
.qcom-auth-modal .qcom-input:hover { border-color: #c3cad6; }
.qcom-auth-modal .qcom-input:focus { border-color: var(--wp--preset--color--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink); }
.qcom-auth-modal__actions { align-items: center; margin-top: 4px; }
.qcom-auth-modal__link { font: 400 14px/1 var(--wp--preset--font-family--body); text-transform: none; letter-spacing: 0; color: var(--wp--preset--color--stone); text-decoration: none; }
.qcom-auth-modal__link:hover { color: var(--wp--preset--color--ink); text-decoration: underline; }
.qcom-auth-modal__link--register { font: 600 13px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--ink); }
.qcom-auth-modal__link--register::after { content: "\0a0→"; }
.qcom-auth-modal__toggle { margin: 8px 0 20px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--wp--preset--color--hairline); background: none; }
.qcom-auth-modal__toggle-label { font-size: 14px; color: var(--wp--preset--color--ink); }
.qcom-auth-modal .qcom-switch { background: #c3cad6 !important; }
.qcom-auth-modal .qcom-switch[data-state="checked"] { background: var(--wp--preset--color--ink) !important; }
.qcom-auth-modal .qcom-wp-button__link { position: relative; min-height: 54px; background: var(--wp--preset--color--ink) !important; border-color: var(--wp--preset--color--ink) !important; transition: background-color 0.2s ease; }
.qcom-auth-modal .qcom-wp-button__link::after { content: "→"; margin-left: 10px; transition: transform 0.2s ease; }
.qcom-auth-modal .qcom-wp-button__link:hover::after { transform: translateX(4px); }
@media (min-width: 760px) { .qcom-auth-modal__header { padding: 32px 32px 30px; } .qcom-auth-modal__content { padding: 30px 32px 32px !important; } }
/* Close: a thin cross like in the search field instead of the plugin's circled ×. */
.auth-menu__modal .qcom-dialog__close svg { display: none; }
.auth-menu__modal .qcom-dialog__close::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%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' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E") center / contain no-repeat; }
.qcom-auth-modal__alert:empty { display: none; }
.qcom-auth-modal__field:has(.qcom-auth-modal__actions) { margin-bottom: 4px; }
/* "Använd engångskod" mode: compact spacing. "Använd telefonnummer/e-post istället" —
   a small link on the left below the field (the plugin centers it via inline style, hence !important). */
.qcom-auth-modal__form > div:has(> .qcom-auth-modal__link--identifier) { margin: -10px 0 0; text-align: left !important; }
.qcom-auth-modal__link--identifier { min-height: 0; padding: 6px 0; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
/* The plugin form is a flex column with gap: a single 16px rhythm between rows, no per-field margins. */
.qcom-auth-modal__form { gap: 16px !important; }
.qcom-auth-modal__form > .qcom-auth-modal__field, .qcom-auth-modal__form > .qcom-auth-modal__toggle { margin-top: 0; margin-bottom: 0; }
.qcom-auth-modal__form > .qcom-auth-modal__field:last-child { margin-bottom: 0; }
.qcom-auth-modal__button--send-otp { margin-top: 0 !important; }
.qcom-auth-modal .qcom-wp-button__link:disabled, .qcom-auth-modal .qcom-wp-button__link--disabled { opacity: 0.35; cursor: not-allowed; }
.qcom-auth-modal .qcom-wp-button__link:disabled::after { transform: none; }
/* Error message: right below the form, without double spacing (form padding + block margin). */
.qcom-auth-modal__content:has(+ .qcom-auth-modal__alert:not(:empty)) { padding-bottom: 16px !important; }
.qcom-auth-modal__alert { margin: 0 !important; padding: 0 24px 24px !important; }
.qcom-auth-modal .qcom-alert { position: relative; margin: 0; padding: 12px 44px 12px 14px; border: 1px solid #f0c7c3; border-left: 3px solid #b42318; border-radius: 0; background: #fdf4f3; box-shadow: none; }
.qcom-auth-modal .qcom-alert__title { margin: 0 0 4px; font: 400 13px/1.2 var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.02em; color: #b42318; }
.qcom-auth-modal .qcom-alert__description { display: block; font-size: 14px; line-height: 1.4; color: var(--wp--preset--color--ink); }
.qcom-auth-modal .qcom-alert__close { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: #b42318; cursor: pointer; }
.qcom-auth-modal .qcom-alert__close:hover { background: #f8e2df; }
@media (min-width: 760px) { .qcom-auth-modal__alert { padding: 0 32px 28px !important; } }
/* Browser autofill (blue background) — in the theme's field color. */
.qcom-auth-modal input:-webkit-autofill, .qcom-auth-modal input:-webkit-autofill:hover { -webkit-box-shadow: 0 0 0 100px var(--wp--preset--color--mist) inset; -webkit-text-fill-color: var(--wp--preset--color--ink); caret-color: var(--wp--preset--color--ink); }
.qcom-auth-modal input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 100px #fff inset, inset 0 0 0 1px var(--wp--preset--color--ink); }
/* Light header — like the category banner without a photo (.tp-cat-banner:not(:has(img))): a glow in the
   top-right corner + gradient #f3f5f9 → --tp-banner-end, ink text. */
.qcom-auth-modal__header { background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--wp--preset--color--glow) 32%, transparent) 0%, transparent 55%), linear-gradient(180deg, #f3f5f9 0%, var(--tp-banner-end) 100%); border-bottom: 1px solid var(--wp--preset--color--hairline); color: var(--wp--preset--color--ink); }
.qcom-auth-modal__site-name, .qcom-auth-modal__site-name::after { color: var(--wp--preset--color--stone) !important; }
.qcom-auth-modal__title { color: var(--wp--preset--color--ink) !important; }
.qcom-auth-modal__subtitle { color: #4a5263 !important; }
.auth-menu__modal .qcom-dialog__close { border-color: #c3cad6; color: var(--wp--preset--color--ink); }
.auth-menu__modal .qcom-dialog__close:hover { background: #fff; border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--ink); }
.auth-menu__modal .qcom-dialog__close:focus-visible { outline-color: var(--wp--preset--color--ink); }
@media (prefers-reduced-motion: reduce) { .auth-menu__modal.qcom-dialog__content { animation: none; } }

.qcom-auth-modal .qcom-switch__thumb { border-radius: 0 !important; }
.qcom-auth-modal__alert { border-radius: 0 !important; }
/* === Right border of the last column =================== */
/* Grids are exactly 100% wide; the last column's border is removed explicitly at
   each breakpoint so it doesn't double the frame border. .tp-grid columns:
   2 / 3 (≥760) / 4 (≥1024) / 5 (≥1280). */
.tp-grid > li .tp-card { border-right: var(--tp-border); }
.tp-grid > li:nth-child(2n) .tp-card { border-right: 0; }
/* Phone (2 columns): a last card alone in its row (odd count) spans full width; photo 4:3 so the card
   doesn't become twice as tall as the neighboring rows */
@media (max-width: 759px) {
  .tp-grid > li:last-child:nth-child(odd):not(.tp-grid__empty) { grid-column: 1 / -1; }
  .tp-grid > li:last-child:nth-child(odd) .tp-card { border-right: 0; }
  .tp-grid > li:last-child:nth-child(odd) .tp-card__media { aspect-ratio: 4 / 3; }
}
@media (min-width: 760px)  { .tp-grid > li:nth-child(2n) .tp-card { border-right: var(--tp-border); } .tp-grid > li:nth-child(3n) .tp-card { border-right: 0; } }
@media (min-width: 1024px) { .tp-grid > li:nth-child(3n) .tp-card { border-right: var(--tp-border); } .tp-grid > li:nth-child(4n) .tp-card { border-right: 0; } }
/* Blog: 1 / 2 (≥760) / 3 (≥1120) — the base rules above set border-right at ≥760 */
@media (min-width: 760px) and (max-width: 1119.98px) { .tp-pgrid > li:nth-child(2n) { border-right: 0; } }

/* === Cart drawer — full styling (like the auth modal) =========
   Radix portal in body; colors/radius come from the plugin's Design Tokens by default,
   here — typography, ink header, mono amounts and square controls. */
/* Cover the scrollbar gutter (scrollbar-gutter: stable in the plugin): the overlay and
   drawer extend --tp-sbw past the ICB edge, all the way to the screen edge (theme.js). */
.qcom-drawer__overlay, .qcom-dialog__overlay { right: calc(-1 * var(--tp-sbw, 0px)) !important; }
.qcom-drawer__content--right { right: calc(-1 * var(--tp-sbw, 0px)) !important; }
@media (max-width: 639.98px) { .qcom-drawer__content--right { width: calc(100% + var(--tp-sbw, 0px)) !important; } }
/* Light cart in the theme's language: header and close as in the filter drawer (.tp-drawer),
   lines in the grid color (--tp-line), photo tile and price as on the product card,
   CTA like "Köp" on the product page. Square corners, no shadows.
   Swipe to delete — theme.js §16: the card (.qcom-cart-item) slides left, revealing
   the row's red strip (.qcom-cart-item__row) with "Ta bort". */
.qcom-minicart__drawer.qcom-drawer__content { border-left: var(--tp-border-2) !important; border-radius: 0 !important; box-shadow: none !important; background: var(--wp--preset--color--paper); }
/* The drawer extends under the scrollbar gutter (right: -sbw above) — shift content and ✕ by the same width, as in the filter .tp-drawer. */
.qcom-minicart__drawer.qcom-drawer__content { padding-right: var(--tp-sbw, 0px) !important; box-sizing: border-box; }
.qcom-minicart__drawer .qcom-drawer__header.qcom-minicart__header { padding: 0 72px 0 24px !important; min-height: 64px; display: flex; flex-direction: column; justify-content: center; background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); border-bottom: var(--tp-border) !important; }
.qcom-minicart__drawer .qcom-minicart__header-row { display: flex; align-items: center; gap: 10px; }
.qcom-minicart__drawer .qcom-minicart__header-row > svg { display: none; }
.qcom-minicart__drawer .qcom-minicart__title.qcom-drawer__title { font: 400 22px/1 var(--wp--preset--font-family--heading) !important; text-transform: uppercase; letter-spacing: 0; color: var(--wp--preset--color--ink) !important; }
/* Counter — like the "Filter" button badge: a blue square with a white mono digit */
.qcom-minicart__drawer .qcom-minicart__item-count-badge { display: inline-grid; place-items: center; min-width: 22px; width: auto; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 0 !important; background: var(--wp--preset--color--accent) !important; color: #fff !important; font: 600 12px/1 var(--wp--preset--font-family--mono); }
.qcom-minicart__drawer .qcom-drawer__close { top: 10px !important; right: calc(12px + var(--tp-sbw, 0px)) !important; width: 44px; height: 44px; display: grid; place-items: center; border: var(--tp-border-ui) !important; border-radius: 0 !important; color: var(--wp--preset--color--ink) !important; background: none !important; opacity: 1 !important; transition: background-color 0.15s ease, color 0.15s ease; }
.qcom-minicart__drawer .qcom-drawer__close:hover { background: var(--wp--preset--color--ink) !important; color: #fff !important; }
/* Products */
.qcom-minicart__drawer .qcom-minicart__items { padding: 0 !important; }
.qcom-minicart__drawer .qcom-cart-item__row { position: relative; box-sizing: border-box; width: 100%; padding: 0 !important; margin: 0 !important; border: 0 !important; border-bottom: var(--tp-border) !important; overflow: hidden; animation: tp-cart-in 0.25s ease both; }
/* Red background and "Ta bort" only while the card is shifted (theme.js sets transform), otherwise it would show through as a line. */
.qcom-minicart__drawer .qcom-cart-item__row:has(> .qcom-cart-item[style*="translate"]) { background: #d92d20; }
.qcom-minicart__drawer .qcom-cart-item__row:not(:has(> .qcom-cart-item[style*="translate"]))::after { visibility: hidden; }
.qcom-minicart__drawer .qcom-cart-item__row + .qcom-cart-item__row { border-top: 0 !important; }
/* Red strip under the card (visible only while swiping) */
.qcom-minicart__drawer .qcom-cart-item__row::after { content: "Ta bort"; position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 0 24px 0 56px; color: #fff; font: 700 13px/1 var(--wp--preset--font-family--body); letter-spacing: 0.06em; text-transform: uppercase; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E") left 24px center / 20px no-repeat; transition: transform 0.15s ease; }
.qcom-minicart__drawer .qcom-cart-item__row.is-armed::after { transform: scale(1.06); }
.qcom-minicart__drawer .qcom-cart-item { position: relative; z-index: 1; display: flex; gap: 16px; align-items: flex-start; width: auto !important; padding: 20px 24px; background: var(--wp--preset--color--paper); touch-action: pan-y; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
.qcom-minicart__drawer .qcom-cart-item__row.is-swiping .qcom-cart-item { transition: none; user-select: none; cursor: grabbing; }
/* Photo tile — like .tp-card__media: light background and thin border */
.qcom-minicart__drawer .qcom-cart-item__image { flex: none; width: 84px; height: 84px !important; min-height: 0; display: grid; place-items: center; padding: 6px; box-sizing: border-box; border: 1px solid var(--wp--preset--color--hairline) !important; border-radius: 0 !important; background: #f7f8fa !important; }
.qcom-minicart__drawer .qcom-cart-item__img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; background: none !important; border: 0 !important; border-radius: 0 !important; }
/* The plugin placeholder (/assets/placeholder/cart-item.svg) doesn't resolve — hide the alt text, show a box pictogram. */
.qcom-minicart__drawer .qcom-cart-item__image:has(> img[src$="cart-item.svg"]) { background: #f7f8fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3aab7' stroke-width='1.5'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E") center / 32px no-repeat !important; }
.qcom-minicart__drawer .qcom-cart-item__img[src$="cart-item.svg"] { display: none; } /* opacity:0 would leave the alt text box, which stretched the row */
.qcom-minicart__drawer .qcom-cart-item__info { flex: 1; min-width: 0; min-height: 84px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.qcom-minicart__drawer .qcom-cart-item__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
/* Name — as on the product card (700, caps), just smaller and on two lines */
.qcom-minicart__drawer .qcom-cart-item__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 700 14px/1.3 var(--wp--preset--font-family--body) !important; text-transform: uppercase; letter-spacing: 0.01em; color: var(--wp--preset--color--ink) !important; text-decoration: none; }
.qcom-minicart__drawer .qcom-cart-item__title:hover { color: var(--wp--preset--color--accent) !important; }
.qcom-minicart__drawer .qcom-cart-item__meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; }
.qcom-minicart__drawer .qcom-cart-item__code { font-family: var(--wp--preset--font-family--mono); font-size: 12px !important; color: var(--wp--preset--color--stone) !important; }
.qcom-minicart__drawer .qcom-cart-item__stock { font-family: var(--wp--preset--font-family--mono); font-size: 12px !important; letter-spacing: 0 !important; font-weight: 500 !important; text-transform: none; }
.qcom-minicart__drawer .qcom-cart-item__stock--in-stock { color: var(--wp--preset--color--stock) !important; }
.qcom-minicart__drawer .qcom-cart-item__meta-divider { width: 1px; height: 12px; background: var(--wp--preset--color--hairline) !important; }
/* Delete — a gray trash icon (the plugin's lucide icon is hidden, mask on currentColor); red on hover. */
.qcom-minicart__drawer .qcom-cart-item__delete { flex: none; width: 32px; height: 32px; margin: -4px 0 0; display: grid; place-items: center; border: 1px solid var(--wp--preset--color--hairline) !important; border-radius: 50% !important; background: none !important; color: var(--wp--preset--color--stone) !important; cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease; }
.qcom-minicart__drawer .qcom-cart-item__delete-icon { display: none !important; }
.qcom-minicart__drawer .qcom-cart-item__delete::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%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' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat; }
.qcom-minicart__drawer .qcom-cart-item__delete:hover { color: #d92d20 !important; background: #fdeceb !important; border-color: #f4b8b3 !important; }
.qcom-minicart__drawer .qcom-cart-item__delete:focus-visible, .qcom-minicart__drawer .qcom-cart-qty__btn:focus-visible, .qcom-minicart__drawer .qcom-drawer__close:focus-visible { outline: 2px solid var(--wp--preset--color--accent) !important; outline-offset: 1px; box-shadow: none !important; }
.qcom-minicart__drawer .qcom-cart-item__meta-grid { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Quantity stepper — compact, rectangular, with a thin line (not a black border) */
.qcom-minicart__drawer .qcom-cart-qty { display: inline-flex; align-items: center; height: 30px; border: 1px solid var(--wp--preset--color--hairline) !important; border-radius: 0 !important; background: var(--wp--preset--color--paper); overflow: hidden; }
.qcom-minicart__drawer .qcom-cart-qty__btn { width: 28px; height: 100%; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--wp--preset--color--ink) !important; font-size: 15px !important; line-height: 1; cursor: pointer; transition: background-color 0.15s ease; }
.qcom-minicart__drawer .qcom-cart-qty__btn:hover:not(:disabled) { background: var(--wp--preset--color--sand) !important; }
.qcom-minicart__drawer .qcom-cart-qty__btn:disabled { color: #a3aab7 !important; }
.qcom-minicart__drawer .qcom-cart-qty__value { width: 28px; height: 100%; padding: 0 !important; border: 0 !important; border-radius: 0 !important; text-align: center; font-family: var(--wp--preset--font-family--mono) !important; font-size: 13px !important; font-weight: 600; color: var(--wp--preset--color--ink) !important; background: none !important; }
.qcom-minicart__drawer .qcom-cart-item__prices { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
/* Price — like .tp-card__price-now, smaller */
.qcom-minicart__drawer .qcom-cart-item__total-price { font: 600 17px/1.2 var(--wp--preset--font-family--body) !important; font-variant-numeric: tabular-nums; color: var(--wp--preset--color--ink) !important; letter-spacing: 0; }
.qcom-minicart__drawer .qcom-cart-item__original-price, .qcom-minicart__drawer .qcom-cart-item__unit-price { font-family: var(--wp--preset--font-family--mono); font-size: 12px !important; color: var(--wp--preset--color--stone) !important; }
.qcom-minicart__drawer .qcom-cart-item__discount-badge { border-radius: 0 !important; background: var(--wp--preset--color--sale) !important; color: #fff !important; letter-spacing: 0 !important; font-family: var(--wp--preset--font-family--mono); }
/* Bundle contents (product_type set): a compact nested block under the product.
   Nested products also have the .qcom-cart-item class — reset sizes and swipe for them. */
.qcom-minicart__drawer .qcom-cart-item__children { position: relative; z-index: 1; padding: 0 24px 20px; background: var(--wp--preset--color--paper); }
.qcom-minicart__drawer .qcom-cart-item__children-card { margin: 0 !important; border: 1px solid var(--wp--preset--color--hairline) !important; border-radius: 0 !important; background: #f7f8fa !important; overflow: hidden; }
.qcom-minicart__drawer .qcom-cart-item__children-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; margin: 0; padding: 0 14px !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--wp--preset--color--stone) !important; font: 400 11px/1 var(--wp--preset--font-family--mono) !important; letter-spacing: 0.1em !important; text-transform: uppercase; text-align: left; cursor: pointer; transition: color 0.15s ease; }
.qcom-minicart__drawer .qcom-cart-item__children-toggle:hover { color: var(--wp--preset--color--ink) !important; }
.qcom-minicart__drawer .qcom-cart-item__children-toggle:focus-visible { outline: 2px solid var(--wp--preset--color--accent) !important; outline-offset: -2px; }
.qcom-minicart__drawer .qcom-cart-item__children-chevron { flex: none; width: 14px; height: 14px; }
.qcom-minicart__drawer .qcom-cart-item__children-list { border-top: 1px solid var(--wp--preset--color--hairline); }
.qcom-minicart__drawer .qcom-cart-item--child { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: none; border-bottom: 1px solid var(--wp--preset--color--hairline); touch-action: auto; transition: none; transform: none !important; }
.qcom-minicart__drawer .qcom-cart-item--child:last-child { border-bottom: 0; }
.qcom-minicart__drawer .qcom-cart-item__children-list > * + * { border-top: 0; } /* the plugin also draws a top line — together with our bottom one it came out double */
.qcom-minicart__drawer .qcom-cart-item--child .qcom-cart-item__image { width: 40px; height: 40px !important; padding: 3px; background: var(--wp--preset--color--paper) !important; }
.qcom-minicart__drawer .qcom-cart-item--child .qcom-cart-item__image:has(> img[src$="cart-item.svg"]) { background-size: 20px !important; }
.qcom-minicart__drawer .qcom-cart-item__child-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qcom-minicart__drawer .qcom-cart-item__child-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 13px/1.3 var(--wp--preset--font-family--body) !important; color: var(--wp--preset--color--ink) !important; text-decoration: none; }
.qcom-minicart__drawer .qcom-cart-item__child-title:hover { color: var(--wp--preset--color--accent) !important; }
.qcom-minicart__drawer .qcom-cart-item__child-code { font: 400 11px/1.3 var(--wp--preset--font-family--mono) !important; color: var(--wp--preset--color--stone) !important; }
.qcom-minicart__drawer .qcom-cart-item__child-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.qcom-minicart__drawer .qcom-cart-item__child-right .qcom-cart-item__stock { font-size: 11px !important; }
.qcom-minicart__drawer .qcom-cart-item__child-qty, .qcom-minicart__drawer .qcom-cart-item__child-qty-value { font: 600 13px/1 var(--wp--preset--font-family--mono) !important; color: var(--wp--preset--color--ink) !important; }
/* Cart is still loading (the plugin sets .qcom-minicart__badge--loading on the header icon):
   instead of a false "Din varukorg är tom" with a 0 counter — the same animated mark as in the
   page transition loader (outlines and animation in the SVG mask, color is accent). Body content, counter and footer are hidden until loading finishes. */
body:has(.qcom-minicart__badge--loading) .qcom-minicart__drawer .qcom-drawer__body { position: relative; min-height: 240px; }
body:has(.qcom-minicart__badge--loading) .qcom-minicart__drawer .qcom-drawer__body > * { visibility: hidden; }
body:has(.qcom-minicart__badge--loading) .qcom-minicart__drawer :is(.qcom-minicart__item-count-badge, .qcom-minicart__footer) { visibility: hidden; }
body:has(.qcom-minicart__badge--loading) .qcom-minicart__drawer .qcom-drawer__body::before { content: ""; position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin: -56px 0 0 -36px; background: var(--wp--preset--color--accent); -webkit-mask: var(--tp-mark-loader) center / contain no-repeat; mask: var(--tp-mark-loader) center / contain no-repeat; }
body:has(.qcom-minicart__badge--loading) .qcom-minicart__drawer .qcom-drawer__body::after { content: "Laddar varukorgen…"; position: absolute; top: 50%; left: 0; right: 0; margin-top: 32px; text-align: center; font: 400 12px/1 var(--wp--preset--font-family--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--stone); }
/* Compact cart view (theme.js §17): button to the left of ✕; no photos, each product is one
   row "name/item number · quantity · total · delete". The title-row and meta-grid wrappers
   dissolve (display: contents) so their children line up in one row in the desired order. */
.tp-cart-compact-btn { position: absolute; z-index: 2; top: 10px; right: calc(12px + 44px + 8px + var(--tp-sbw, 0px)); width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: var(--tp-border-ui); border-radius: 0; background: none; color: var(--wp--preset--color--ink); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.tp-cart-compact-btn:hover, .tp-cart-compact-btn[aria-pressed="true"] { background: var(--wp--preset--color--ink); color: #fff; }
.tp-cart-compact-btn:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 1px; }
.qcom-minicart__drawer .qcom-drawer__header.qcom-minicart__header { padding-right: calc(24px + 44px + 8px + 44px + var(--tp-sbw, 0px)) !important; }
body:has(.qcom-minicart__badge--loading) .tp-cart-compact-btn { visibility: hidden; }
.tp-cart-compact .qcom-minicart__drawer .qcom-cart-item:not(.qcom-cart-item--child) { align-items: center; gap: 12px; padding: 12px 24px; }
.tp-cart-compact .qcom-minicart__drawer .qcom-cart-item:not(.qcom-cart-item--child) > .qcom-cart-item__image { display: none; }
.tp-cart-compact .qcom-minicart__drawer .qcom-cart-item:not(.qcom-cart-item--child) > .qcom-cart-item__info { flex-direction: row; align-items: center; gap: 12px; min-height: 0; }
.tp-cart-compact .qcom-minicart__drawer .qcom-cart-item__info > :is(.qcom-cart-item__title-row, .qcom-cart-item__meta-grid) { display: contents; }
.tp-cart-compact .qcom-minicart__drawer .qcom-cart-item__title-row > div { order: 0; flex: 1; min-width: 0; }
.tp-cart-compact .qcom-minicart__drawer .qcom-cart-item__title { -webkit-line-clamp: 1; font-size: 13px !important; }
.tp-cart-compact .qcom-minicart__drawer .qcom-cart-item__meta-row { margin-top: 2px; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.tp-cart-compact .qcom-minicart__drawer .qcom-cart-qty { order: 1; flex: none; }
.tp-cart-compact .qcom-minicart__drawer .qcom-cart-item__prices { order: 2; flex: none; min-width: 80px; }
.tp-cart-compact .qcom-minicart__drawer .qcom-cart-item__total-price { font-size: 14px !important; }
.tp-cart-compact .qcom-minicart__drawer .qcom-cart-item__delete { order: 3; margin: 0; }
.tp-cart-compact .qcom-minicart__drawer .qcom-cart-item__children { padding-bottom: 12px; }
.tp-cart-compact .qcom-minicart__drawer .qcom-cart-item--child { padding: 8px 14px; }
.tp-cart-compact .qcom-minicart__drawer .qcom-cart-item--child > .qcom-cart-item__image { display: none; } /* like the main products — no photo */
@media (max-width: 639px) {
  .tp-cart-compact-btn { top: 10px; right: calc(10px + 44px + 8px + var(--tp-sbw, 0px)); }
  .qcom-minicart__drawer .qcom-drawer__header.qcom-minicart__header { padding-right: calc(16px + 44px + 8px + 44px + var(--tp-sbw, 0px)) !important; }
  .tp-cart-compact .qcom-minicart__drawer .qcom-cart-item:not(.qcom-cart-item--child) { padding: 12px 16px; gap: 10px; }
  .tp-cart-compact .qcom-minicart__drawer .qcom-cart-item__meta-row .qcom-cart-item__stock, .tp-cart-compact .qcom-minicart__drawer .qcom-cart-item__meta-divider { display: none; }
  .tp-cart-compact .qcom-minicart__drawer .qcom-cart-item__prices { min-width: 64px; } /* an even quantity column despite varying price lengths */
}
/* Empty cart */
.qcom-minicart__drawer .qcom-minicart__empty-icon-wrap { border: var(--tp-border) !important; border-radius: 0 !important; background: var(--wp--preset--color--mist) !important; }
.qcom-minicart__drawer .qcom-minicart__empty-icon { color: var(--wp--preset--color--ink) !important; }
.qcom-minicart__drawer .qcom-minicart__empty-title { font: 400 22px/1.1 var(--wp--preset--font-family--heading) !important; text-transform: uppercase; }
/* Summary — a white panel below a grid line, blue CTA */
.qcom-minicart__drawer .qcom-minicart__footer.qcom-drawer__footer { padding: 20px 24px 24px !important; background: var(--wp--preset--color--paper) !important; color: var(--wp--preset--color--ink); border-top: var(--tp-border-2) !important; box-shadow: none; }
.qcom-minicart__drawer .qcom-minicart__footer .qcom-price-amount, .qcom-minicart__drawer .qcom-minicart__footer .qcom-price-block { color: var(--wp--preset--color--ink) !important; }
.qcom-minicart__drawer .qcom-minicart__summary { margin-bottom: 16px !important; }
.qcom-minicart__drawer .qcom-minicart__summary-row { font-family: var(--wp--preset--font-family--mono); font-size: 13px !important; color: var(--wp--preset--color--stone) !important; }
.qcom-minicart__drawer .qcom-minicart__total-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 16px; }
.qcom-minicart__drawer .qcom-minicart__total-row::after { content: "Frakt beräknas i kassan"; flex-basis: 100%; font: 400 12px/1.4 var(--wp--preset--font-family--mono); color: var(--wp--preset--color--stone); }
.qcom-minicart__drawer .qcom-minicart__total-label { font: 600 15px/1.4 var(--wp--preset--font-family--body) !important; text-transform: none; letter-spacing: 0; color: var(--wp--preset--color--ink) !important; }
.qcom-minicart__drawer .qcom-minicart__total-tax-label { font-family: var(--wp--preset--font-family--mono); font-size: 12px !important; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--wp--preset--color--stone) !important; }
.qcom-minicart__drawer .qcom-minicart__total-value, .qcom-minicart__drawer .qcom-minicart__total-value .qcom-price-amount { font: 600 24px/1 var(--wp--preset--font-family--body) !important; font-variant-numeric: tabular-nums; letter-spacing: 0 !important; color: var(--wp--preset--color--ink) !important; }
/* CTA — like "Köp" on the product page */
.qcom-minicart__drawer .qcom-minicart__checkout-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 24px !important; font: 400 15px/1 var(--wp--preset--font-family--heading) !important; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 0 !important; background: var(--wp--preset--color--accent) !important; color: #fff !important; border: 0 !important; transition: background-color 0.15s ease; }
.qcom-minicart__drawer .qcom-minicart__checkout-btn:hover { background: var(--wp--preset--color--accent-deep) !important; color: #fff !important; }
.qcom-minicart__drawer .qcom-minicart__checkout-btn:focus-visible { outline: 2px solid var(--wp--preset--color--accent) !important; outline-offset: 2px; }
.qcom-minicart__drawer .qcom-minicart__free-shipping { border: 1px solid var(--wp--preset--color--hairline) !important; border-radius: 0; padding: 12px 14px !important; margin: 0 0 16px !important; background: none !important; color: var(--wp--preset--color--ink) !important; }
.qcom-minicart__drawer .qcom-minicart__free-shipping-label { font-style: normal !important; font-family: var(--wp--preset--font-family--mono); font-size: 12px !important; font-weight: 500 !important; }
.qcom-minicart__drawer .qcom-minicart__free-shipping-bar, .qcom-minicart__drawer .qcom-minicart__free-shipping-bar-fill { border-radius: 0 !important; }
.qcom-minicart__drawer .qcom-minicart__free-shipping-bar { background: var(--wp--preset--color--mist) !important; }
.qcom-minicart__drawer .qcom-minicart__free-shipping-bar-fill { background: var(--wp--preset--color--accent) !important; }
/* Cross-sell in the drawer */
.qcom-minicart__drawer .qcom-cross-sell__heading { font: 600 12px/1 var(--wp--preset--font-family--body) !important; text-transform: uppercase; letter-spacing: 0.06em !important; }
.qcom-minicart__drawer .qcom-cross-sell-card__image-wrap { border: 1px solid var(--wp--preset--color--hairline); border-radius: 0 !important; background: #f7f8fa !important; }
.qcom-minicart__drawer .qcom-cross-sell-card__add-btn { border-radius: 0 !important; background: var(--wp--preset--color--accent) !important; }
@keyframes tp-cart-in { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 639px) {
  .qcom-minicart__drawer .qcom-cart-item { padding: 16px; gap: 14px; }
  .qcom-minicart__drawer .qcom-cart-item__image { width: 72px; height: 72px !important; }
  .qcom-minicart__drawer .qcom-cart-item__info { min-height: 72px; }
  .qcom-minicart__drawer .qcom-minicart__footer.qcom-drawer__footer { padding: 16px !important; }
  .qcom-minicart__drawer .qcom-drawer__header.qcom-minicart__header { padding: 0 calc(16px + 44px + 8px + 44px + var(--tp-sbw, 0px)) 0 16px !important; min-height: 64px; } /* room for ✕ and the compact view button */
  .qcom-minicart__drawer .qcom-drawer__close { top: 10px !important; right: calc(10px + var(--tp-sbw, 0px)) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .qcom-minicart__drawer .qcom-cart-item__row, .qcom-minicart__drawer .qcom-cart-item { animation: none; transition: none; }
}

/* === Toasts (the plugin's toaster: cart, wishlist, login) ===================
   The plugin renders shadcn toasts: rounded, shadowed, pastel variants. In the theme's
   language — an ink box without radius or shadow, status as a left bar (green/red),
   title Archivo 600, muted description, action as a square outlined button.
   Viewport aligned to the right edge of the site frame; on mobile — full width at the bottom. */
.qcom-toast__viewport {
  --tp-toast-gap: 16px;
  bottom: var(--tp-toast-gap); right: max(var(--tp-toast-gap), calc((var(--tp-vw, 100vw) - var(--tp-frame-w)) / 2));
  gap: 8px; margin: 0; padding: 0; list-style: none;
  width: 400px; max-width: calc(100vw - 2 * var(--tp-toast-gap)); min-width: 0;
  font-family: var(--wp--preset--font-family--body);
}
.qcom-toast__viewport .qcom-toast {
  --tp-toast-bar: rgba(255, 255, 255, 0.28);
  align-items: center; gap: 16px; margin: 0;
  padding: 16px 48px 16px 20px;
  border: 0; border-radius: 0; box-shadow: none;
  background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper);
}
.qcom-toast__viewport .qcom-toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tp-toast-bar); }
.qcom-toast__viewport .qcom-toast--success { --tp-toast-bar: #2fb36a; }
.qcom-toast__viewport .qcom-toast--destructive { --tp-toast-bar: #e5484d; }
.qcom-toast__viewport .qcom-toast--warning { --tp-toast-bar: #e0a526; }
.qcom-toast__viewport .qcom-toast--info { --tp-toast-bar: #8fa6d6; }
.qcom-toast__viewport .qcom-toast__text-group { gap: 4px; min-width: 0; }
.qcom-toast__viewport .qcom-toast__title { font: 600 15px/1.3 var(--wp--preset--font-family--body); letter-spacing: 0.01em; }
.qcom-toast__viewport .qcom-toast__description { font: 400 13px/1.45 var(--wp--preset--font-family--body); color: rgba(255, 255, 255, 0.72); opacity: 1; overflow-wrap: anywhere; }
.qcom-toast__viewport .qcom-toast__action {
  height: 40px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 0;
  background: none; color: inherit;
  font: 600 12px/1 var(--wp--preset--font-family--body); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.qcom-toast__viewport .qcom-toast__action:hover { border-color: var(--wp--preset--color--paper); background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
/* Close is always visible (touch has no hover), 40px tap target. */
.qcom-toast__viewport .qcom-toast__close {
  top: 50%; right: 4px; transform: translateY(-50%);
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 0;
  opacity: 1; color: rgba(255, 255, 255, 0.6);
}
.qcom-toast__viewport .qcom-toast__close:hover { color: var(--wp--preset--color--paper); }
.qcom-toast__viewport :is(.qcom-toast__action, .qcom-toast__close):focus { box-shadow: none; }
.qcom-toast__viewport :is(.qcom-toast__action, .qcom-toast__close):focus-visible { outline: 1px solid var(--wp--preset--color--paper); outline-offset: -4px; }
@media (max-width: 599px) {
  .qcom-toast__viewport { --tp-toast-gap: 8px; width: auto; left: var(--tp-toast-gap); right: var(--tp-toast-gap); max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .qcom-toast__viewport .qcom-toast[data-state] { animation-duration: 1ms; }
}

/* === Contact drawer (Kundtjänst) ======================= */
.tp-contact-btn { display: none; background: var(--wp--preset--color--paper); border: 0; border-left: var(--tp-border); cursor: pointer; }
@media (min-width: 760px) { .tp-contact-btn { display: flex; } }
.tp-headerbar > p:has(> .tp-contact-btn) { margin: 0; display: contents; }
.tp-contact.tp-drawer { max-height: 100vh; }
@media (min-width: 1024px) { .tp-contact.tp-drawer { width: calc(560px + var(--tp-sbw, 0px)); } }
/* Contact drawer header — light, like the filter and cart drawers. */
.tp-contact__head { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.tp-contact__head .tp-drawer__title { color: var(--wp--preset--color--ink); }
.tp-contact__head .tp-drawer__close { border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--ink); transition: background-color 0.15s ease, color 0.15s ease; }
.tp-contact__head .tp-drawer__close:hover { background: var(--wp--preset--color--ink); color: #fff; }
.tp-contact__body { padding: 24px; display: flex; flex-direction: column; gap: 24px; }
.tp-contact__lead { margin: 0; font-size: 16px; line-height: 1.5; }
/* Contacts — full-width rows with dividers; phone/e-post in large type */
.tp-contact__info { display: block; margin: 0; border-top: var(--tp-border); }
.tp-contact__info > div { display: grid; grid-template-columns: 112px 1fr; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: var(--tp-border); }
.tp-contact__info dt { margin: 0; }
.tp-contact__info dd { font-size: 16px; line-height: 1.4; }
.tp-contact__info dd a { color: var(--wp--preset--color--ink); font: 600 17px/1.3 var(--wp--preset--font-family--body); text-decoration: none; overflow-wrap: anywhere; }
.tp-contact__info dd a:hover { color: var(--wp--preset--color--accent); }
/* The map fills the rest of the drawer height */
.tp-contact__map { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 320px; border: var(--tp-border); background: var(--wp--preset--color--mist); }
.tp-contact__map iframe { display: block; flex: 1 1 auto; width: 100%; min-height: 260px; border: 0; }
.tp-contact__maplink { flex: none; display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-top: var(--tp-border); font: 600 12px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp--preset--color--accent); text-decoration: none; }
.tp-contact__maplink:hover { background: var(--wp--preset--color--sand); }
/* Map placeholder until Google Maps consent is given (inc/content.php, theme.js §9). */
.tp-contact__mapconsent { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; padding: 20px 16px; }
.tp-contact__mapconsent p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--wp--preset--color--stone); }
.tp-contact__mapbtn { min-height: 44px; padding: 0 18px; border: 1px solid var(--wp--preset--color--accent); border-radius: 0; background: var(--wp--preset--color--accent); color: #fff; font: 600 12px/1 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
.tp-contact__mapbtn:hover { background: var(--wp--preset--color--accent-deep); border-color: var(--wp--preset--color--accent-deep); }
.tp-contact__mapbtn:focus-visible { outline: 1px solid #fff; outline-offset: -4px; }
.tp-contact__foot { grid-template-columns: 1fr; }
.tp-contact__cta { display: flex; align-items: center; justify-content: center; min-height: 56px; background: var(--wp--preset--color--accent); color: #fff; text-decoration: none; font: 400 15px/1 var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.04em; }
.tp-contact__cta:hover { background: var(--wp--preset--color--accent-deep); }
@media (max-width: 759.98px) { .tp-contact.tp-drawer { max-height: 92vh; } }

/* === Focus: 1px over the plugin's borders (instead of 2px outline / inset box-shadow) === */
.qcom-model-filter .facetwp-hierarchy_select:focus,
.wp-block-quickcommerce-product-tabs .qcom-product-tabs__tab:focus-visible,
.wp-block-quickcommerce-product-tabs .qcom-product-tabs__accordion-header:focus-visible { outline: 1px solid var(--wp--preset--color--accent) !important; outline-offset: -1px !important; }
.qcom-cart-qty__value:focus { box-shadow: none !important; }

/* Cells with shared borders (own line on only some sides, the rest comes from a neighbor/container):
   the focus ring is ::after with inset -1px from the padding-box. It lands exactly on its own line
   and the neighbor's, so each side has exactly one 1px line, with no ink+accent side by side. */
.tp-brand:focus-visible, .tp-mega__toggle:focus-visible, .tp-mega__group:focus-visible,
.tp-hsearch button:focus-visible, .tp-iconlink:focus-visible, .auth-menu__button:focus-visible, .auth-menu__trigger:focus-visible,
.qcom-minicart__trigger:focus-visible, .tp-filter-btn:focus-visible,
.tp-mcard:focus-visible, .tp-ccard:focus-visible { position: relative; outline: none; }
.tp-brand:focus-visible::after, .tp-mega__toggle:focus-visible::after, .tp-mega__group:focus-visible::after,
.tp-hsearch button:focus-visible::after, .tp-iconlink:focus-visible::after, .auth-menu__button:focus-visible::after, .auth-menu__trigger:focus-visible::after,
.qcom-minicart__trigger:focus-visible::after, .tp-filter-btn:focus-visible::after,
.tp-mcard:focus-visible::after, .tp-ccard:focus-visible::after { content: ""; position: absolute; inset: -1px; z-index: 2; border: 1px solid var(--wp--preset--color--accent); pointer-events: none; }
/* <select> has no ::after: its own line becomes transparent, an outline on the outer edge covers the neighbors. */
.tp-toolbar__model .facetwp-hierarchy_select:focus-visible { position: relative; z-index: 2; outline: 2px solid var(--wp--preset--color--accent); outline-offset: -9px; background-color: var(--wp--preset--color--sand); }
/* A blue line isn't visible on an accent background — white 1px inside. */
.qcom-minicart__trigger:focus-visible::after, .tp-mega__group.is-active:focus-visible::after { inset: 2px; border-color: #fff; }

/* Visually hidden text for screen readers (e.g. an H2 "Produkter" between the listing H1 and card H3s). */
.tp-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── Cookie consent (Complianz) ─────────────────────────────────────────────
   Colors, 1px ink borders, 0 corners are in the Complianz banner settings
   (tools/complianz-config.php). Here — theme typography and equal button weight:
   "Acceptera alla" and "Avvisa alla" match in color, size and font (IMY).
   Complianz banner CSS loads after style.css — hence the #cmplz-cookiebanner-container prefix. */
#cmplz-cookiebanner-container .cmplz-cookiebanner, #cmplz-cookiebanner-container .cmplz-cookiebanner button { font-family: var(--wp--preset--font-family--body); }
#cmplz-cookiebanner-container .cmplz-cookiebanner { box-shadow: none; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-title { grid-column: 1 / span 2; justify-self: start; font: 400 17px/1.2 var(--wp--preset--font-family--heading); text-transform: uppercase; letter-spacing: 0.02em; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message { line-height: 1.5; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons { gap: 8px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { min-height: 46px; padding: 10px 12px; font: 600 13px/1.2 var(--wp--preset--font-family--body); text-transform: uppercase; letter-spacing: 0.05em; white-space: normal; }
/* Desktop: three equal-width buttons in a row (≤768px Complianz stacks them full width). */
@media (min-width: 769px) { #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { flex: 1 1 0; min-width: 0; } }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover { background-color: var(--wp--preset--color--accent-deep); border-color: var(--wp--preset--color--accent-deep); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover { background-color: var(--wp--preset--color--sand); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 2px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category { border-radius: 0; background: var(--wp--preset--color--mist); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category .cmplz-category-title { font-weight: 600; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-always-active { color: var(--wp--preset--color--stock); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links .cmplz-link { color: var(--wp--preset--color--accent); text-decoration: underline; text-underline-offset: 2px; }
/* "Cookieinställningar" link in the footer (inc/content.php, tp_footer_legal). */
.tp-footer__cookies { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tp-footer__cookies:hover { color: #fff; }

/* === Page transition loader (theme.js §14) =============================== */
.tp-loader { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: rgb(255 255 255 / 0.72); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); color: var(--wp--preset--color--accent); opacity: 0; transition: opacity 0.2s ease; }
.tp-loader[hidden] { display: none; }
/* Scrolling is locked while the loader is visible (theme.js §14 scrollLock). */
html.tp-scroll-locked { overflow: hidden; scrollbar-gutter: stable; }
html.tp-scroll-locked body { overscroll-behavior: none; }
.tp-loader.is-visible { opacity: 1; }
.tp-loader__mark { overflow: visible; }
.tp-loader__trace { fill: none; stroke: currentColor; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 28 72; animation: tp-loader-trace 1.1s linear infinite; }
.tp-loader__core { transform-box: fill-box; transform-origin: center; transform: scale(0.8); animation: tp-loader-pulse 1.1s ease-in-out infinite; }
@keyframes tp-loader-trace { to { stroke-dashoffset: -100; } }
@keyframes tp-loader-pulse { 0%, 100% { transform: scale(0.78); opacity: 0.85; } 50% { transform: scale(0.84); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .tp-loader__trace { animation: none; stroke-dasharray: none; opacity: 0.25; }
  .tp-loader__core { animation: tp-loader-fade 1.6s ease-in-out infinite; transform: scale(0.8); }
  @keyframes tp-loader-fade { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
}

/* === List refresh loader (FacetWP: facet, sorting, "Visa fler") ============
   theme.js §18 sets .tp-is-filtering on <html> for the duration of the request (after a 150 ms delay,
   so fast responses don't flicker): the grid dims and isn't clickable, in the center of
   the screen — the animated logo mark without a background, as in the page transition loader. */
.tp-grid.facetwp-template { transition: opacity 0.2s ease; }
.tp-is-filtering .tp-grid.facetwp-template { opacity: 0.25; pointer-events: none; }
.tp-filter-loader { position: fixed; z-index: 25; top: 50%; left: 50%; width: 72px; height: 72px; transform: translate(-50%, -50%); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s; pointer-events: none; }
.tp-filter-loader::before { content: ""; position: absolute; inset: 0; background: var(--wp--preset--color--accent); -webkit-mask: var(--tp-mark-loader) center / contain no-repeat; mask: var(--tp-mark-loader) center / contain no-repeat; }
.tp-is-filtering .tp-filter-loader { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .tp-grid.facetwp-template, .tp-filter-loader { transition: none; } }