/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/* ═══════════════════════════════════════════════════════════════════════════
   0. TOKENS · se assets/tokens.css
   Hela det semantiska tokenlagret (--ink*, --bg*, --line*, --green*, --photo-bg,
   lagerstatus) ligger i assets/tokens.css, som till skillnad från den här filen
   laddas även i Bricks byggare. Lägg nya tokens där, inte här.
   ═══════════════════════════════════════════════════════════════════════════ */

html, body {
  background-color: var(--bg-page);
  color: var(--ink);
}

strong {
	font-weight: 500;
}

/* ── Scrollbar, hela sajten ────────────────────────────────────────────────
   Webbläsarens standardlist är bred och ljus och skriker mot mörka ytor —
   värst i modaler och drawers, men den gäller överallt.

   TVÅ SYNTAXER BEHÖVS, och de är inte utbytbara:
   · scrollbar-width/-color är standarden (Firefox, Chrome 121+). Båda ÄRVS,
     så det räcker att sätta dem på :root — de kaskaderar till varje
     scrollande element utan en `*`-selektor.
   · ::-webkit-scrollbar-* är den gamla WebKit-vägen och behövs fortfarande
     för Safari. Utan elementprefix träffar den alla element. Den ignoreras
     av webbläsare som redan förstår standarden, så de krockar inte.

   Färgerna är tokens och vänder därför med färgläget. Hårdkodat grått hade
   blivit svart list på vitt papper i ljust läge.

   Tummen ritas med border + background-clip: content-box i stället för med
   padding — pseudo-elementet har ingen egen box att padda, så det är enda
   sättet att få luft runt tummen. `background-clip` MÅSTE upprepas i
   :hover, annars faller den tillbaka till border-box och tummen växer till
   full bredd när man pekar på den. */
:root {
  scrollbar-width: thin;
  scrollbar-color: var(--ink-4) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ink-4);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ink-3);
  background-clip: content-box;
}


/* ═══════════════════════════════════════════════════════════════════════════
   1. ELEMENT-OVERRIDES (page-/post-specifika synlighetsregler)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero-videon i "ferdig maskin"-rutan på startsidan. Filmen är 1331×720
   (1,85:1) och rutan 3/2, så webbläsarens default object-fit: contain gav
   svarta band över och under. Bricks video-element exponerar ingen
   object-fit-kontroll, och elementets egen _cssCustom slår inte igenom. */
#brxe-ttofjw video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mediarutan går numera ända upp i toppen, alltså bakom den transparenta
   headern. Menyn ligger då på filmen och tappar kontrast när en ljus bildruta
   passerar. En kort scrim i toppen håller länkarna läsbara utan att synas som
   en tonad kant — den slutar långt innan bildens motiv. */
/* Brandgrön ton över filmen. Footaget är gråskala, så blend-läget `color`
   byter kulör men behåller ljusheten — bilden blir grön i stället för att få
   en grön hinna över sig som plattar ut kontrasten. Opaciteten är ratten:
   .45 = nästan gråskala, 1 = full duoton. Gäller alla breakpoints, till
   skillnad från scrimen nedan som bara behövs där headern ligger över. */
#brxe-euqvfz::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--green);
  mix-blend-mode: color;
  opacity: .62;
  pointer-events: none;
  z-index: 1;
}

@media (min-width: 992px) {
  #brxe-euqvfz::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 140px;
    background: linear-gradient(to bottom, rgba(10, 10, 10, .72), transparent);
    pointer-events: none;
    z-index: 1;
  }
}

/* ── Hero-chips ───────────────────────────────────────────────────────────
   Tre trust-chips under prisraden. Checken ritas av CSS, inte av tecken i
   texten: samma grepp som .pcb-dock-trust, så den gröna färgen sitter på
   ikonen och inte på etiketten. Ingen font-family här — chipsen ärver
   designsystemets typografi.

   OBS leveranstiden: samma intervall som DELIVERY_MIN/MAX_DAYS i
   components/pc-builder/pc-builder.php och FAQ:n. Ändras det ska alla tre
   ändras — sajten hade fyra olika tal innan de slogs ihop. */
.hero-chips {
  /* flex-direction måste stå här: Bricks .brxe-block sätter column som default,
     och båda selektorerna väger lika mycket. */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  line-height: 1;
  color: var(--ink-2);
  background: var(--bg-ultra-dark);
  /* border: 1px solid var(--line-strong); */
  border-radius: var(--radius-s);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-chip::before {
  content: "✓";
  color: var(--green-ink);
  font-size: 1.05em;
  line-height: 1;
}

/* Sekundär-CTA:n i hero:n är en textlänk, inte en knapp: den gröna knappen
   ska vara ensam om att se klickbar-som-yta ut. Klassen nollar knapputseendet
   som ACSS annars ger .brxe-button. Ingen font-family — länken ärver sin
   typografi från designsystemet. */
.hero-textlink {
  padding: 0;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
  text-decoration-color: var(--line-strong);
  transition: color .2s ease, text-decoration-color .2s ease;
}

.hero-textlink:hover,
.hero-textlink:focus-visible {
  color: var(--green-ink);
  text-decoration-color: currentColor;
}

/* Visa Bricks-elementet brxe-fdeywf endast på produkt med post ID 14 */
#brxe-fdeywf                       { display: none  !important; }
body.postid-14 #brxe-fdeywf        { display: block !important; }

.cky-btn-reject,
.cky-btn-accept {
	color: var(--text-dark) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. UI · Pulse-bekräftelse på knappar (en gång, inte loop)
   ═══════════════════════════════════════════════════════════════════════════ */

[class*="btn--"],
.pulse {
  transition: background-color .2s var(--ease-out),
              border-color     .2s var(--ease-out),
              color            .2s var(--ease-out),
              box-shadow       .2s var(--ease-out);
}

/* Hover-motion bara på enheter med riktig pekare — på touch fastnar :hover
   kvar efter tap. */
@media (hover: hover) and (pointer: fine) {
  [class*="btn--"]:hover,
  .pulse:hover {
    animation: pulse .6s var(--ease-out) 1;
  }
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0   var(--white-trans-20); }
  100% { box-shadow: 0 0 0 1em transparent; }
}

/* Tryckrespons: knappen trycks in en aning. ACSS äger knapparnas transition
   via var(--btn-transition, var(--transition)) och vinner över regeln ovan,
   så scale läggs TILL i den listan i stället för att skriva över den.
   Egenskapen scale (inte transform) krockar inte med transforms knappar
   redan har. .pcb-btn-primary har en egen motsvarighet i pc-builder.css. */
:root {
  --btn-transition: var(--transition), scale 160ms var(--ease-out);
}
[class*="btn--"]:where(:not(.btn--none, .wp-block-button)):active:not(:disabled, [aria-disabled="true"]) {
  scale: .97;
}

@media (prefers-reduced-motion: reduce) {
  [class*="btn--"],
  .pulse          { transition: none; }
  [class*="btn--"]:hover,
  .pulse:hover    { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   2b. ACCESSIBILITY-FIX · target-size för mailto/tel-länkar
   ═══════════════════════════════════════════════════════════════════════════ */

/* WCAG 2.5.8 kräver minst 24×24px klickyta. Footer-länkar (mailto:, tel:)
   ligger ofta som ren text utan padding — gör dem inline-block med min-höjd.

   Gäller BARA nakna textlänkar. Stylade Bricks-knappar (.brxe-button/.btn--*)
   och länkar som innehåller en ikon undantas — de har redan klickyta nog, och
   attributselektorn (0,1,1) väger annars tyngre än en enkel knappklass (0,1,0)
   och skriver över display:flex/line-height → ikonen tappar centreringen. */
a[href^="mailto:"]:not(.brxe-button):not([class*="btn"]):not(:has(svg, img)),
a[href^="tel:"]:not(.brxe-button):not([class*="btn"]):not(:has(svg, img)) {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
  padding: 2px 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. WOOCOMMERCE · generella overrides
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dölj autocomplete add-to-cart-form (FiboSearch e.l.) */
.dgwt-wcas-pd-addtc-form           { display: none; }

/* ── Knappar på Mina sidor ───────────────────────────────────────────────────
   WooCommerce renderar sina egna <button class="button"> utan .bricks-button,
   och det är den klassen som bär knapptypografin i Bricks temastil. Knapparna
   fick därför brödtextens Field Gothic. Temastilen har ingen Woo-knappkontroll
   och ACSS ingen font-variabel, så familjen skrivs här med SAMMA värde som
   temastilens button.typography — samma väg som kundvagnens kassaknapp.
   Resten (vikt, versaler, storlek) läses från ACSS knapp-tokens / .btn--s.
   #brx-content håller headerns mini-cart utanför. */
body.woocommerce-account #brx-content .woocommerce .button {
  font-family: "Chakra Petch", sans-serif;
  font-weight: var(--btn-font-weight);
  font-size: var(--text-s);
  line-height: var(--btn-line-height);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: var(--btn-text-transform);
}
/* Formulärens spara-knappar som primärknapp. "Lagre adresse" hade ingen
   fyllning alls (vit text på sidans bakgrund) — den adressklassen i Frames
   saknar knappinställningar, till skillnad från konto-/login-formulären. */
body.woocommerce-account #brx-content .woocommerce form .button[type="submit"] {
  background-color: var(--primary);
  color: var(--on-green);
  border: var(--btn-border-width) solid var(--primary);
  border-radius: var(--btn-border-radius);
  padding: var(--btn-padding-block) var(--btn-padding-inline);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
body.woocommerce-account #brx-content .woocommerce form .button[type="submit"]:hover {
  background-color: var(--green-deep);
  border-color: var(--green-deep);
  color: var(--on-green);
}

/* ── Mini-cart drawer (Bricks off-canvas + WC widget) ────────────────────────
   Standard-layouten lämnar Delsum "svävande" mitt i drawern medan knapparna
   sitter längst ner. Vi vill ha Delsum + knappar dockade tillsammans nere.
*/
.cart-detail.off-canvas .widget_shopping_cart_content {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Produktlistan tar all flexutrymme + scrollar om för många items */
.cart-detail.off-canvas .widget_shopping_cart_content ul.cart_list,
.cart-detail.off-canvas .widget_shopping_cart_content ul.woocommerce-mini-cart {
  flex: 0 1 auto;
  overflow-y: auto;
  margin-bottom: 0;
}

/* Delsum ankrar sig i botten — knappar följer naturligt under */
.cart-detail.off-canvas .widget_shopping_cart_content .woocommerce-mini-cart__total,
.cart-detail.off-canvas .widget_shopping_cart_content > p.total {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--neutral-trans-10, rgba(0,0,0,.1));
  color: var(--text-dark);
}

.cart-detail.off-canvas .widget_shopping_cart_content .woocommerce-mini-cart__total .amount,
.cart-detail.off-canvas .widget_shopping_cart_content .woocommerce-mini-cart__total bdi {
  color: var(--text-dark);
}

/* Cart-sida — dölj WC:s inbyggda coupon-form.
   Sedan aug 2026 tas den bort server-side i mu-plugins/gameify-checkout-coupon.php
   (undviker dubblett-id="coupon_code"); reglerna står kvar som skydd om filtret
   någon gång inte hinner köra. Vår egen ruta är .gameify-checkout-coupon och
   träffas inte av selektorerna nedan. */
.woocommerce-cart .coupon,
.woocommerce-cart form.woocommerce-cart-form .actions .coupon,
body.woocommerce-cart .cart-collaterals .coupon {
  display: none !important;
}

/* Cart-sida — matcha rabattkods-raden med övriga totals (Delsum/Totalt) */
.woocommerce-cart .cart_totals .cart-discount th,
.woocommerce-cart .cart_totals tr.cart-discount th {
  font-size: inherit !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.woocommerce-cart .cart_totals tr.cart-discount td,
.woocommerce-cart .cart_totals .cart-discount td {
  font-weight: 400;
  font-size: inherit;
}
.woocommerce-cart .cart_totals tr.cart-discount .woocommerce-remove-coupon {
  font-size: 12px;
  color: var(--ink-3);
  text-decoration: underline;
  margin-left: 6px;
}

/* Cart totals — generellt: label-kolumnen smalare, värdet bredare + naturliga radbrytningar */
.woocommerce-cart .cart_totals table.shop_table { table-layout: auto; }
.woocommerce-cart .cart_totals table.shop_table th { width: 110px; vertical-align: top; }
.woocommerce-cart .cart_totals table.shop_table td {
  vertical-align: top;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* Cart totals — säkerställ ljus färg på ALLA labels och värden (mörk bg) */
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td,
.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals th,
.woocommerce-cart .cart_totals table.shop_table tr.shipping th {
  color: var(--text-light) !important;
}

/* Cart totals — shipping-rad: vänsterställ texten + bättre kontrast */
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td,
.woocommerce-cart .cart_totals tr.shipping td {
  text-align: left;
}
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals p,
.woocommerce-cart .cart_totals tr.shipping p {
  font-size: 13px;
  color: var(--text-light);
  margin: 4px 0 0;
  line-height: 1.4;
}
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals .shipping-calculator-button,
.woocommerce-cart .cart_totals tr.shipping .shipping-calculator-button {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
}
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals ul.woocommerce-shipping-methods,
.woocommerce-cart .cart_totals tr.shipping ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals ul li {
  margin: 2px 0;
  font-size: 14px;
  color: var(--text-light);
}

/* Knapprad sitter direkt under Delsum, inget eget auto-skutt */
.cart-detail.off-canvas .widget_shopping_cart_content .woocommerce-mini-cart__buttons,
.cart-detail.off-canvas .widget_shopping_cart_content > p.buttons {
  margin-top: 12px;
  margin-bottom: 0;

  /* Stapla knapparna vertikalt, full bredd */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-detail.off-canvas .widget_shopping_cart_content .woocommerce-mini-cart__buttons .button,
.cart-detail.off-canvas .widget_shopping_cart_content > p.buttons .button {
  width: 100%;
  text-align: center;
  margin: 0;
}

/* Produkt-rader — tydlig separation + bättre layout */
.cart-detail.off-canvas .widget_shopping_cart_content .woocommerce-mini-cart-item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  grid-template-areas:
    "img info remove"
    "img qty  remove";
  gap: 4px 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--neutral-trans-10, var(--line));
  list-style: none;
}

.cart-detail.off-canvas .widget_shopping_cart_content .woocommerce-mini-cart-item:last-child {
  border-bottom: none;
}

/* Produktlänken innehåller bild + titel — vi separerar dem visuellt via grid */
.cart-detail.off-canvas .widget_shopping_cart_content .woocommerce-mini-cart-item > a:not(.remove) {
  grid-area: info;
  display: contents; /* låt bild och text placera sig i grid-områdena */
}

.cart-detail.off-canvas .widget_shopping_cart_content .woocommerce-mini-cart-item img {
  grid-area: img;
  width: 60px;
  height: 60px;
  padding: 7px;
  box-sizing: border-box;
  object-fit: contain;
  border-radius: var(--radius-m);
  background: var(--photo-bg);
}

.cart-detail.off-canvas .widget_shopping_cart_content .woocommerce-mini-cart-item .quantity {
  grid-area: qty;
  font-size: 13px;
  color: var(--ink-3);
}

.cart-detail.off-canvas .widget_shopping_cart_content .woocommerce-mini-cart-item .remove {
  grid-area: remove;
  align-self: start;
  font-size: 18px;
  text-decoration: none;
  color: var(--ink-3);
  opacity: .6;
  transition: opacity .15s ease, color .15s ease;
}
.cart-detail.off-canvas .widget_shopping_cart_content .woocommerce-mini-cart-item .remove:hover {
  opacity: 1;
  color: var(--danger);
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. COMPOSITE PRODUCTS  (dark layout · "Custom Gaming PC"-konfigurator v1)
   --------------------------------------------------------------------------
   Alla regler scoped till .cart_group.composite_form.full_width.
   Mörkt tema som matchar resten av sajten. Brand-grön (var(--green)) som accent
   på vald komponent.
   ═══════════════════════════════════════════════════════════════════════════ */

.cart_group.composite_form.full_width {
  --cf-fg:        var(--text-light);
  --cf-fg-muted:  var(--ink-3);
  --cf-bg:        var(--bg-elev);
  --cf-bg-sunk:   var(--bg);
  --cf-border:    var(--line);
  --cf-border-hi: rgba(255, 255, 255, .18);
  --cf-green:     var(--green);

  /* Force block-flöde — vid placering inom .ghero__cta eller andra flex-containrar
     vill vi inte att komponentsektionerna lays out som kolumner */
  display: block !important;
  width: 100%;
}

.cart_group.composite_form.full_width .composite_components {
  display: block;
  width: 100%;
}

/* ── 4a. Komponent-sektioner ─────────────────────────────────────────────── */

.cart_group.composite_form.full_width .composite_component {
  display: block;       /* tvinga block så de stackar vertikalt */
  width: 100%;
  padding: var(--space-l) 0;
  border-bottom: 1px solid var(--cf-border);
}

.cart_group.composite_form.full_width .composite_component:last-of-type {
  border-bottom: none;
}

.cart_group.composite_form.full_width .component_title {
  margin: 0 0 6px;
  font-size: var(--h4, 1.25rem);
  font-weight: 700;
  color: var(--cf-fg);
}

.cart_group.composite_form.full_width .component_description_wrapper {
  margin-bottom: var(--space-s);
  font-size: var(--text-s);
  color: var(--cf-fg-muted);
}

/* Dölj default-label "Tillgängliga alternativ:" */
.cart_group.composite_form.full_width .select_label {
  display: none;
}


/* ── 4b. Option-kort (radio-knappar som kort) ────────────────────────────── */

.cart_group.composite_form.full_width .component_option_radio_buttons_container {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart_group.composite_form.full_width .component_option_radio_button_container {
  margin: 0;
}

.cart_group.composite_form.full_width .component_option_radio_button {
  position: relative;
  padding: 14px 18px;
  border: 1px solid var(--cf-border);
  background: var(--cf-bg);
  border-radius: var(--radius-s);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}

/* Dölj native radio-input (label nedan tar över interaktionen) */
.cart_group.composite_form.full_width .component_option_radio_button input[type="radio"] {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

/* Label fyller hela kortet → hela kortet är klickbart */
.cart_group.composite_form.full_width .component_option_radio_button .radio_button_input label {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.cart_group.composite_form.full_width .component_option_radio_button .radio_button_description {
  position: relative;
  z-index: 1;
  flex: 1;
}

.cart_group.composite_form.full_width .component_option_radio_button .radio_button_title {
  margin: 0;
  font-size: var(--text-m);
  color: var(--cf-fg);
}

.cart_group.composite_form.full_width .component_option_radio_button .radio_button_price {
  white-space: nowrap;
  font-size: var(--text-m);
  color: var(--cf-fg);
}

/* Pris-typografi inuti option-korten */
.woocommerce ul.component_option_radio_buttons_container
  li.component_option_radio_button_container
  .radio_button_description .price {
  margin-bottom: 0 !important;
  font-weight: 700;
  color: var(--cf-fg);
}

/* Hover */
.cart_group.composite_form.full_width .component_option_radio_button:hover {
  border-color: var(--cf-border-hi);
  background: color-mix(in oklab, var(--cf-bg) 80%, white 1%);
}

/* Selected */
.cart_group.composite_form.full_width .component_option_radio_button.selected,
.cart_group.composite_form.full_width .component_option_radio_button.selected:focus-within {
  border-color: var(--cf-green);
  background: color-mix(in oklab, var(--cf-bg) 80%, var(--green) 8%);
}


/* ── 4c. Component summary  ("Ditt val"-kortet) ──────────────────────────── */

.cart_group.composite_form.full_width .component_summary {
  margin-top: var(--space-m);
}

.cart_group.composite_form.full_width .component_summary .summary_content {
  display: flex;
  gap: var(--space-m);
  align-items: flex-start;
  padding: var(--space-m) var(--space-l);
  border: 1px solid var(--cf-border);
  border-radius: var(--radius-s);
  background: var(--cf-bg);
}

/* Bild till vänster */
.cart_group.composite_form.full_width .component_summary .composited_product_images {
  flex: 0 0 96px;
  max-width: 96px;
  background: var(--photo-bg);
  border-radius: var(--radius-s);
  padding: 8px;
}

.cart_group.composite_form.full_width .component_summary .composited_product_images img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xxl);
  display: block;
}

/* Detaljsida (text + select) till höger */
.cart_group.composite_form_full_width,
.cart_group.composite_form.full_width .component_summary .details.component_data {
  flex: 1;
  color: var(--cf-fg);
}

/* Variations-tabellen → form-känsla istället för tabell-känsla */
.cart_group.composite_form.full_width .component_summary table.variations {
  border-collapse: collapse;
  width: 100%;
}

.cart_group.composite_form.full_width .component_summary table.variations td {
  border: 0;
  padding: 0;
}

/* Label ovanför select */
.cart_group.composite_form.full_width .component_summary .variations .label label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cf-fg-muted);
}

/* Variation-select */
.cart_group.composite_form.full_width .component_summary .variations .value select {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  border: 1px solid var(--cf-border);
  background-color: var(--cf-bg-sunk);
  color: var(--cf-fg);
  font: inherit;
  font-size: var(--text-m);
  transition: border-color .2s ease, background-color .2s ease;
}

.cart_group.composite_form.full_width .component_summary .variations .value select:focus {
  outline: none;
  border-color:    var(--cf-green);
  background-color: color-mix(in oklab, var(--cf-bg-sunk) 80%, var(--green) 8%);
}

/* "Rensa val" under select */
.cart_group.composite_form.full_width .component_summary .reset_variations_wrapper_fixed {
  margin-top: 6px;
}

.cart_group.composite_form.full_width .component_summary .reset_variations_wrapper_fixed .reset_variations {
  font-size: var(--text-s);
  color: var(--cf-fg-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cart_group.composite_form.full_width .component_summary .reset_variations_wrapper_fixed .reset_variations:hover {
  color: var(--cf-green);
}

/* "Ditt val"-rubriken */
.cart_group.composite_form.full_width .component_summary .component_section_title {
  margin-bottom: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cf-fg-muted);
}


/* ── 4d. Composited product (vald komponent i listan) ────────────────────── */

.component .composited_product_title_wrapper {
  padding-top: 0 !important;
}

.composited_product_title_wrapper,
.composited_product_details_wrapper {
  width: 100%;
  color: var(--cf-fg, var(--ink));
}

.component_content .details p {
  font-size: var(--text-s);
  color: var(--cf-fg-muted, var(--ink-3));
}


/* ── 5. wp-block-table (bloggartikler) ───────────────────────────────────── */

.wp-block-table {
  /* Luft på båda sidor — tidigare bara margin-top, vilket lät tabellen
     kollidera med nästa stycke direkt under.
     Bricks kärntemas reset (frontend-light-layer.min.css) sätter
     `figure { margin: 1em 40px }`. Fysiska margin-top/-bottom i stället
     för margin-block: den logiska shorthanden förlorade mot elementväljaren
     trots lägre specificitet (margin-block-start/-end tävlar separat mot
     den fysiska margin-shorthanden i cascaden, inte som en enhet) — verifierat
     i webbläsaren, inte en gissning. */
  margin-top: var(--space-xl, 3rem) !important;
  margin-bottom: var(--space-xl, 3rem) !important;
}

.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-s, .875rem);
  /* Grön kant + mjuk ambient glow i stället för den neutrala vita kanten —
     samma --primary-ton som knapparnas hover-glow (pc-builder.css), men
     mycket lägre opacitet/spridning: det här är en vilande tabell i
     brödtext, inte ett interaktivt element. Enhetlig kant på alla sidor,
     ingen border-left-accent. */
  border: 1px solid rgba(var(--primary-rgb), .28);
  border-radius: var(--radius-xxl);
  box-shadow: 0 0 36px rgba(var(--primary-rgb), .07), 0 0 1px rgba(var(--primary-rgb), .3);
  overflow: hidden;
}

.wp-block-table thead th {
  padding: var(--space-s, .75rem) var(--space-m, 1rem);
  background: rgba(255, 255, 255, .06);
  border: none !important;
  border-bottom: 2px solid rgba(255, 255, 255, .12) !important;
  font-weight: 600;
  text-align: left;
}

.wp-block-table tbody td {
  padding: var(--space-s, .75rem) var(--space-m, 1rem);
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
  vertical-align: top;
}

.wp-block-table tbody tr:last-child td {
  border-bottom: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Typografiske korrigeringer over ACSS
   ───────────────────────────────────────────────────────────────────────────── */

/*
 * Skip-link: ACSS setter line-height lik font-size (ratio 1.0) inne i overflow:hidden,
 * så underlengdene i «Hopp til hovedinnhold» klippes hver gang lenken får fokus.
 * Dette er nettstedets første tastaturaffordans — den må være hel.
 */
/* body-prefiks fordi ACSS laster etter barnetemaet og ellers vinner på lik spesifisitet.
   Satt tilstandsuavhengig — lenken skal aldri kunne klippes, uansett fokus. */
body .skip-link,
body .link--skip,
body .skip-link:focus,
body .link--skip:focus {
  line-height: 1.3;
  overflow: visible;
}

/*
 * Lesbar linjelengde. Begge blokkene kjørte containerdrevet på 82–90 tegn per linje;
 * målet er 45–75.
 *
 * NB: ch-enheten måler bredden på «0», som i Geist er merkbart bredere enn snittet
 * av gemene bokstaver — 62ch ga ~90 faktiske tegn. 46ch er kalibrert mot reell
 * teksbredde og lander på ~67–70 tegn for begge blokkene.
 */
.footer__description p,
.gameify-cta__description {
  max-width: 46ch;
}

/*
 * Hvit tekst arves fra det mørke temaet inn i WooCommerce-panelene som har hvit
 * bakgrunn — tom handlekurv ble hvitt på hvitt (1,0:1, altså usynlig).
 * Dropdown-containeren reddes i dag bare av at barna omdeklarerer sin egen farge.
 */
.cart-detail.off-canvas,
ul.brx-dropdown-content {
  color: var(--bg-page);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Inkluderte tjenester i varukorgen (mu-plugins/gameify-inkludert-tjenester.php)
   ───────────────────────────────────────────────────────────────────────────── */

.gameify-inkludert-badge {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 2px 8px;
  background: rgba(var(--primary-rgb), .12);
  border: 1px solid rgba(var(--primary-rgb), .4);
  border-radius: var(--radius-s);
  color: var(--green-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

/* Överstruket ordinarie pris + grönt 0 kr. Opaciteten höjd från .5 → .72:
   vid .5 lästes "det ordinarie priset" knappt alls, vilket gjorde värdet
   av tjänsten otydligt istället för tydligt struket. */
.woocommerce-cart-form del .amount,
.cart-detail del .amount {
  color: rgba(255, 255, 255, .72);
  font-weight: 500;
}
.gameify-inkludert .amount {
  color: var(--green-ink);
  font-weight: 700;
}

/* Låst kvantitet — matcha steppervärdets typografi utan kontroller */
.gameify-inkludert-qty {
  display: inline-block;
  min-width: 3ch;
  text-align: center;
  font-weight: 600;
}

/* "Inkludert verdi"-raden i totals (cart + checkout) */
tr.gameify-inkludert-verdi th,
tr.gameify-inkludert-verdi td {
  color: rgba(255, 255, 255, .8);
}
tr.gameify-inkludert-verdi del .amount {
  color: rgba(255, 255, 255, .72);
}

/* Mini-cart (mörk off-canvas) — panelen är ljus, dämpa mot mörk text i stället */
.cart-detail.off-canvas del .amount {
  color: rgba(0, 0, 0, .6);
}
.cart-detail.off-canvas .gameify-inkludert .amount {
  color: var(--secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   "Legg til i bygget" — CTA på produktarkivets kort
   ═══════════════════════════════════════════════════════════════════════════ */

/* Kortet använder ACSS clickable-parent: titel-länken lägger ett osynligt
   overlay över HELA kortet så att ytan blir klickbar. Utan egen stacking hamnar
   CTA:n under det overlayet — klicket gick då till produktsidan i stället för
   byggaren. relative + z-index lyfter knappen över overlayet. */
.gameify-build-cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: var(--space-s, .75rem);
  text-align: center;
  text-decoration: none;
}

@media (max-width: 980px) {
  body:has(.pcb-dock) .cky-btn-revisit-wrapper {
    bottom: calc(var(--pcb-dock-h, 0px) + 15px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDFOTENS AVDELARE · BORTTAGNA 2026-09-15

   Här stod en regel på .footer .brxe-divider .line som försökte dämpa två
   streck i sidfoten. Den matchade ALDRIG något: sidfoten innehåller inga
   divider-element. De två strecken var blocken #brxe-dkqyzw och #brxe-wgevku,
   vanliga block med border-bottom: 1px var(--white-trans-10) och min-height 10
   — alltså avståndshållare som råkade ha en kant.

   Båda blocken är borttagna ur mallen när sidfoten byggdes om efter skissen,
   som inte har några avdelare alls. Ingen CSS behövs; det här är en
   anteckning så att nästa som letar efter "strecken i sidfoten" inte börjar
   söka bland divider-element igen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   Djuplänkad dragspelsfråga (/tjenester/#filer, /tjenester/#service-tid …)
   Bricks fäller ut posten vars id matchar URL-hashen; :target är samma post, så
   markeringen behöver ingen JS. Ringen landar från 10 px ut till 3 px och tonar
   in på ~0,9 s, sedan ligger den kvar som orientering. outline (inte box-shadow):
   ljust läge sätter redan box-shadow på posten, och outline följer hörnradien.
   Specificiteten (0,3,0) slår ljust läges (0,2,1). Ingen font-family här:
   posten ärver typografin från Bricks/ACSS.
   ───────────────────────────────────────────────────────────────────────────── */
.gameify-faq__accordion .gameify-faq__item:target {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  animation: gmfy-target-ring .9s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes gmfy-target-ring {
  from { outline-offset: 10px; outline-color: transparent; }
  to   { outline-offset: 3px;  outline-color: var(--green); }
}
@media (prefers-reduced-motion: reduce) {
  .gameify-faq__accordion .gameify-faq__item:target { animation: none; }
}