/* ═══════════════════════════════════════════════════════════════════════════
   AInsteinWP Theme Supreme — WooCommerce
   ───────────────────────────────────────────────────────────────────────────
   Design: /hiro-extcus 2026-09-03. Bärverket är /ainstein-wp:s (inc/woocommerce.php).
   Byggd på JMG/dev5 men INGENTING här är JMG-specifikt: allt utseende hämtas ur
   temats tokens, så en annan kund byter varumärke genom att byta token.

   KONCEPT — "BRICKAN".
   En mynthandlares bord: mynt ligger i runda urtag i en bricka, inte i rutor.
   Varje produkt vilar därför i en cirkulär fördjupning på varm off-white, med en
   äkta inre skugga i stället för en skuggpreset. Rutnätet förskjuts ett halvsteg
   var tredje bricka — mynt utlagda för hand, inte ett kalkylark. Det är sidans
   ENDA oregelbundenhet; lägg inte till en till.

   REGLER FÖR DEN SOM TAR ÖVER
   · Ingen literal färg utanför § 0. Byt token, inte regel.
   · Scope är `.aiwp-has-shop`. ALDRIG `.aiwp-shop` — varukorg, kassa och mitt
     konto renderas via page.php och får aldrig den klassen. Scopar du fel står
     hela kassan ostylad, vilket den gjorde i första utkastet 2026-09-03.
   · Ikoner ligger som `mask-image` med data-URI, INTE som inline-SVG i markupen.
     Skälet är inte estetiskt: pennan sveper SVG-element i DOM:en
     (ai-fe-editor.js:1827) och incident #3 var editor-UI som sparades som
     kundinnehåll. En maskad ikon finns inte i DOM:en och kan därför varken
     fångas eller sparas in i kunddata. Det håller dessutom hela den här filen
     fri från PHP — vi rör varken inc/woocommerce.php eller functions.php.
   · WooCommerce `woocommerce-layout.css` är AVREGISTRERAD — gridden är vår.
     `woocommerce.css` och `woocommerce-smallscreen.css` ligger kvar som bas.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ 0. TOKENS ═══════════════════════════════════════════════════════════════

   KONTRASTEN ÄR RÄKNAD, INTE GISSAD. Butiken bär pris, moms och köpknapp — ytor
   där fel kontrast kostar affär. Mätt mot brickans yta #faf9f6:

     navy    #18405d  → 9,9:1   text, priser, knappar        ✓ AA
     dim     #6b6360  → 5,4:1   sekundärtext, gammalt pris   ✓ AA
     guldbläck #8a5a1c → 5,6:1  guld SOM TEXT                ✓ AA
     guldkant  #b5762b → 3,5:1  guld som GRAFIK (ram, fokus) ✓ AA grafik
     guld      #cb8732 → 2,8:1  ENDAST ren dekor utan betydelse

   ⚠️ Två fällor som redan var byggda när jag räknade:
   1. Temats `--gold` (#cb8732) klarar INTE 3:1 mot off-white. Den får aldrig
      bära en fokusring, en vald flik eller en hover-kant — det är information.
      Därför finns `--shop-gold-edge`.
   2. Rea-märket var guld botten med vit text = 3,0:1. Vänt: navy botten, vit
      text = 10,7:1. Guld ligger kvar som en 2 px kantlinje, där 3,5:1 räcker. */

/* 🔴 TVÅ SELEKTORER, OCH DEN ANDRA ÄR INTE KOSMETIK.
   `.aiwp-has-shop` sitter bara på BUTIKENS ytor. Men kromet — sidolådan,
   panelerna, skärmen — renderas med flit ÄVEN på redaktionella sidor: Robert
   2026-09-03, *"skulle man lagt något i varukorgen, så syns varukorgen uppe i
   högerkanten som innan, så man inte tappar den om man väl handlar och surfar
   runt."*

   Uppmätt på dev5: `/kontakt/` har INTE `aiwp-has-shop` på body. Alla
   `--shop-*` var alltså odefinierade där, och de 40 `var(--shop-…)` som
   kromets regler använder föll till ogiltiga värden. Resultatet syntes som en
   ostylad varukorgspanel: "Till kassan" renderade som naken text i stället för
   knapp, hårlinjerna försvann, radien blev browserns.

   ⚠️ `--ico-*` låg redan i `:root` och fungerade överallt. Det var precis
   därför felet var svårt att se — kryssikonen ritades korrekt bredvid en knapp
   som inte fanns, så det såg ut som ETT fel på en knapp i stället för som ett
   helt saknat tokenlager.

   Kromet bär nu sina egna tokens dit det än renderas. */
.aiwp-has-shop,
.aiwp-chrome {
  /* Ytor */
  --shop-bg:          var(--off-white, #faf9f6);
  --shop-tray:        #f2efe9;                    /* urtaget, en aning djupare */
  --shop-ink:         var(--navy, #18405d);
  --shop-dim:         var(--text-dim, #6b6360);
  --shop-line:        var(--border, rgba(24, 64, 93, .12));

  /* Guld i tre styrkor — välj efter UPPGIFT, inte efter smak */
  --shop-gold-ink:    #8a5a1c;   /* guld som läsbar text            5,6:1 */
  --shop-gold-edge:   #b5762b;   /* guld som betydelsebärande kant  3,5:1 */
  --shop-gold-dec:    var(--gold, #cb8732);  /* ren dekor           2,8:1 */

  /* Mått.
     ⚠️ `--shop-ratio` och `--shop-thumbs` skrivs av Customizern
     (inc/woocommerce-design.php). Värdena här är fallback om PHP-lagret inte
     körts — ändra dem inte för att styra utseendet, gör det i
     Utseende › Anpassa › Webbshop. */
  --shop-ratio:       1/1;       /* 1:1 · 4/3 · 3/4 — ställs i admin */
  --shop-gap:         clamp(.9rem, 1.8vw, 1.6rem);

  /* 🔴 SSOT FÖR RADIEN — Robert 2026-09-03, ordagrant:
     *"VIKTIGT!!! SSOT hela shoppen default sätt border-radius: 3px; så vi
     kommer ifrån denna SaaS standard non-exclusive känsla."*

     Pillerformen (999px) på knappar, antalsfält och sortering VAR den känslan.
     Skriv aldrig ett radievärde i en regel nedan — använd `--shop-radius`.
     Ska hela shoppen byta form är det EN rad som ändras, här. */
  --shop-radius:      3px;
  --shop-disc:        var(--shop-radius);   /* runda ytor är avvecklade */

  /* Urtaget. Inre skugga + en ljus underkant = fräst fördjupning, inte en
     Tailwind-skugga som svävar. Skillnaden syns direkt i ögonvrån. */
  --shop-recess:
      inset 0 2px 6px rgba(24, 64, 93, .13),
      inset 0 -1px 0 rgba(255, 255, 255, .95);

  --shop-ease:        cubic-bezier(.2, 0, 0, 1);

  /* UTGÅNGEN har en EGEN kurva. Robert 2026-09-03, ordagrant:
     *"måste animeras ut snyggt med ease in känsla i avslutet, snabbt ut sakta
     in på slutet"*.

     `--shop-ease` är symmetrisk nog för en INgång, där panelen ska landa. En
     utgång som använder samma kurva rör sig lika mycket i mitten som i början
     och läser som ett drag, inte som ett släpp. Expo-ut lägger nästan hela
     sträckan i de första 120 ms och låter resten vara en lång, mjuk
     eftersläpning — panelen är visuellt borta direkt men snäpper aldrig.

     Därför är utgången också LÄNGRE än ingången (.52s mot .34s). Det låter
     bakvänt, men eftersläpningen är hela poängen: kortas den bort blir kurvan
     omätbar och man har bara en snabb panel igen. */
  --shop-ease-exit:   cubic-bezier(.16, 1, .3, 1);
}


/* ═══ 1. IKONER ══════════════════════════════════════════════════════════════
   Ritade för den här butiken, 24×24, stroke 1.6, runda ändar. Konstruktionen är
   gemensam: varje ikon är byggd på cirkeln eller dess bågar — myntets geometri.
   Därför läses de som en hand och inte som ett bibliotek.

   Sätts som mask → ikonen ärver `background-color`, alltså textfärgen. En ikon
   som inte kan byta färg med sitt sammanhang är en bild, inte en ikon. */

.aiwp-ico {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}

/* varukorg */
.aiwp-ico--cart { -webkit-mask-image: var(--ico-cart); mask-image: var(--ico-cart); }
/* mynt — tomt läge, brickans märke */
.aiwp-ico--coin { -webkit-mask-image: var(--ico-coin); mask-image: var(--ico-coin); }
/* hämta i butik */
.aiwp-ico--store { -webkit-mask-image: var(--ico-store); mask-image: var(--ico-store); }
/* säker betalning */
.aiwp-ico--lock { -webkit-mask-image: var(--ico-lock); mask-image: var(--ico-lock); }
/* äkthet / garanti */
.aiwp-ico--shield { -webkit-mask-image: var(--ico-shield); mask-image: var(--ico-shield); }
/* värdering */
.aiwp-ico--scale { -webkit-mask-image: var(--ico-scale); mask-image: var(--ico-scale); }
/* frakt */
.aiwp-ico--truck { -webkit-mask-image: var(--ico-truck); mask-image: var(--ico-truck); }
/* pil — sliderns framåtknapp. Bakåt är SAMMA glyf roterad 180°, inte en andra
   ritning: två spegelvända filer driftar isär så fort någon justerar den ena. */
.aiwp-ico--arrow { -webkit-mask-image: var(--ico-arrow); mask-image: var(--ico-arrow); }
/* lupp / granska */
.aiwp-ico--loupe { -webkit-mask-image: var(--ico-loupe); mask-image: var(--ico-loupe); }
/* klar */
.aiwp-ico--check { -webkit-mask-image: var(--ico-check); mask-image: var(--ico-check); }
/* Varukorgen. Märket är en VÄSKA, ordet är "Varukorg" — Robert 2026-09-03:
   *"Vi kör det etablerade Varukorg"*. Ikonen `--ico-cart` finns kvar om
   väskan någon gång ska bytas mot en vagn; det är ett ordbyte i CSS:en. */
.aiwp-ico--bag   { -webkit-mask-image: var(--ico-bag);   mask-image: var(--ico-bag); }
/* butiksmenyn */
.aiwp-ico--menu  { -webkit-mask-image: var(--ico-menu);  mask-image: var(--ico-menu); }
.aiwp-ico--close { -webkit-mask-image: var(--ico-close); mask-image: var(--ico-close); }
.aiwp-ico--user  { -webkit-mask-image: var(--ico-user);  mask-image: var(--ico-user); }

:root {
  --ico-cart:   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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 4.2h2.3l2.3 10.1a1.9 1.9 0 0 0 1.9 1.5h7.3a1.9 1.9 0 0 0 1.9-1.5L20 7.6H6'/%3E%3Ccircle cx='9.4' cy='19.4' r='1.4'/%3E%3Ccircle cx='17.4' cy='19.4' r='1.4'/%3E%3C/svg%3E");
  --ico-coin:   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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Ccircle cx='12' cy='12' r='5.4'/%3E%3Cpath d='M12 8.4v7.2'/%3E%3C/svg%3E");
  --ico-store:  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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 9.4h16.8M5.2 4.4h13.6l1.6 5H3.6zM5.4 9.4v10.2h13.2V9.4'/%3E%3Cpath d='M9.9 19.6v-5.2h4.2v5.2'/%3E%3C/svg%3E");
  --ico-lock:   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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.6' y='10.4' width='14.8' height='9.6' rx='2'/%3E%3Cpath d='M8.4 10.4V7.6a3.6 3.6 0 0 1 7.2 0v2.8'/%3E%3Ccircle cx='12' cy='15.2' r='1.3'/%3E%3C/svg%3E");
  --ico-shield: 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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l7 2.9v5.4c0 4.2-2.9 7.5-7 9-4.1-1.5-7-4.8-7-9V6.1z'/%3E%3Cpath d='M9.1 12.1l2 2 3.8-4'/%3E%3C/svg%3E");
  --ico-scale:  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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.4v15.2M6.6 19.6h10.8M4 8.8l8-2.2 8 2.2'/%3E%3Cpath d='M4 8.8L2.3 13a2.9 2.9 0 0 0 5.4 0zM20 8.8L18.3 13a2.9 2.9 0 0 0 5.4 0z'/%3E%3C/svg%3E");
  --ico-arrow:  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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14M12.6 6l6 6-6 6'/%3E%3C/svg%3E");
  --ico-truck:  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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 6.4h10.8v9.8H2.6zM13.4 9.8h3.9l3.1 3.1v3.3h-7z'/%3E%3Ccircle cx='7' cy='18' r='1.6'/%3E%3Ccircle cx='17.2' cy='18' r='1.6'/%3E%3C/svg%3E");
  --ico-loupe:  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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.6' cy='10.6' r='6.4'/%3E%3Cpath d='M15.4 15.4l4.6 4.6M8 10.6h5.2M10.6 8v5.2'/%3E%3C/svg%3E");
  --ico-check:  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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 12.4l4.8 4.8L19.4 6.8'/%3E%3C/svg%3E");
  /* VÄSKAN — omritad 2026-09-03. Robert: *"Inga sådana symboler utan kvalité
     svg minimalistiska snygga skall det vara med klass."*

     Den första versionen var en femkantig påse med 1,6 px streck. Vid 13 px i
     menyn blev strecken 12 % av märkets höjd och formen slog ihop till en
     klump — den läste som en emoji, inte som ett märke. Streckvikt är inte en
     smaksak vid liten storlek; den är hela skillnaden.

     Nu: rak kropp med mjukt avrundad botten och ett handtag som är en ren
     halvcirkel. Två varianter, för märket ska bära lika bra i båda lägena:
       --ico-bag       1,45 px, för 20 px i toppklustret
       --ico-bag-fine  1,05 px, för ~13 px i huvudmenyn
     Samma geometri, olika vikt — precis som ett typsnitt har en display- och
     en brödtextskärning.

     Proportionen är justerad en andra gång: kroppen var nästan kvadratisk
     (12,8 × 12) och läste som en kasse. Nu 10,6 × 12,4 — smalare än hög, med
     ett handtag som är knappt halva bredden. Det är skillnaden mellan en
     matkasse och en butikspåse, och den syns även vid 13 px. */
  --ico-bag:      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.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.7 8.4h10.6v10.4a2.1 2.1 0 0 1-2.1 2.1H8.8a2.1 2.1 0 0 1-2.1-2.1z'/%3E%3Cpath d='M9.6 8.4V6.8a2.4 2.4 0 0 1 4.8 0v1.6'/%3E%3C/svg%3E");
  --ico-bag-fine: 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.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.7 8.4h10.6v10.4a2.1 2.1 0 0 1-2.1 2.1H8.8a2.1 2.1 0 0 1-2.1-2.1z'/%3E%3Cpath d='M9.6 8.4V6.8a2.4 2.4 0 0 1 4.8 0v1.6'/%3E%3C/svg%3E");
  --ico-menu:   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.7' stroke-linecap='round'%3E%3Cpath d='M3.8 7.2h16.4M3.8 12h16.4M3.8 16.8h11.2'/%3E%3C/svg%3E");
  --ico-close:  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.7' stroke-linecap='round'%3E%3Cpath d='M6.2 6.2l11.6 11.6M17.8 6.2L6.2 17.8'/%3E%3C/svg%3E");
  --ico-user:   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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.4' r='3.8'/%3E%3Cpath d='M4.8 20.2a7.2 7.2 0 0 1 14.4 0'/%3E%3C/svg%3E");
}


/* ═══ 1b. SHOPPENS EGEN KROM ═════════════════════════════════════════════════
   Väska uppe till höger · butiksmeny som fäller ut kategorier · sidoläda som
   åker in när något lagts i · vänsterrail. Markupen ligger i
   inc/woocommerce-design.php och renderas via `wp_footer`, ALDRIG genom att
   röra header.php — den är delad temakod som varje kund använder.

   Visas bara på butiksytorna. Det är Roberts egen motivering och den är rätt:
   *"så stör man inte med JMG:s andra redaktionella sidor."* */

.aiwp-chrome { position: relative; z-index: 900; }

/* ── Toppknapparna, höger kant ── */
/* ⚠️ LIGGER UNDER HEADERRADEN, INTE I DEN — och det är ett medvetet val.
   Första versionen låg på `top: 1.05rem` och hamnade ovanpå huvudmenyn:
   uppmätt på dev5 slutade `.nav-links` på 1310 px medan klustret började på
   1195 — 115 px krock som dolde "KONTAKT".

   Frestelsen var att ge menyn en högermarginal. Det vore fel i TEMAKOD: den
   här filen körs på varje kundsajt, och vi vet inte hur många menyposter
   någon annan har. En lösning som kräver att menyn är lagom lång är ingen
   lösning — den går sönder tyst hos nästa kund. Under raden kan den aldrig
   krocka med något vi inte känner till. */
.aiwp-topbar {
  position: fixed;
  top: 5.4rem;
  right: clamp(.9rem, 3vw, 2rem);
  z-index: 902;
  display: flex;
  gap: .5rem;
}

/* ═══ 1c. WEBBUTIK I HUVUDMENYN ══════════════════════════════════════════════
   Sista posten, avskild med en lodrät linje och märkt med väskan. Avskiljaren
   säger att detta inte är ännu en redaktionell sida utan en annan sorts plats.

   Ligger utanför `.aiwp-has-shop` med flit: posten finns på VARJE sida, även
   de som inte laddar butikens body-klass. */

.aiwp-menu-shop > a {
  display: inline-flex !important;
  align-items: center;
  gap: .45rem;
  position: relative;
  padding-left: 1.1rem !important;
}

/* ⚠️ AVSKILJAREN ÄR BORTTAGEN. Robert 2026-09-03: *"ta bort divider"*.
   Den behövdes när posterna låg inne i menyraden och behövde markera att de
   var något annat. Nu står de utbrutna vid högerkanten — avståndet gör redan
   den åtskillnaden, och ett streck till blir en till gräns i en rad som
   redan har nog. */

.aiwp-menu-shop .aiwp-ico {
  width: 1.25em;
  height: 1.25em;
  /* Den fina skärningen — se motiveringen vid `--ico-bag-fine`. */
  -webkit-mask-image: var(--ico-bag-fine);
          mask-image: var(--ico-bag-fine);
  color: var(--gold, #cb8732);
  /* Optisk justering: märket sitter en hårsmån högt mot versalerna eftersom
     handtaget ligger ovanför kroppens topplinje. */
  position: relative;
  top: .5px;
}

.aiwp-menu-shop > a:hover .aiwp-ico { color: currentColor; }

/* Under 1024 px fälls menyn till mobilpanelen — där är posten en rad bland
   andra och avskiljaren blir meningslös. */
@media (max-width: 1023px) {
  .aiwp-menu-shop > a { padding-left: 0 !important; }
  .aiwp-menu-shop > a::before { content: none; }
}


/* ── Korgen och butiksmenyn SOM MENYPOSTER ──
   De satt tidigare i ett flytande kluster under headern. Robert 2026-09-03:
   *"Kundkorg-ikonen skall vara bredvid WEBBUTIK | [korgen]"*. Nu står de på
   navigationens baslinje, med samma avskiljare som Webbutik-posten.

   Knapparna nollställs helt — en `<button>` bär en egen bakgrund, ram och
   typografi som annars sticker ut mitt i en rad textlänkar. */

.aiwp-menu-bag > button,
.aiwp-menu-burger > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  border-radius: var(--shop-radius);
  transition: color .18s var(--shop-ease), background .18s var(--shop-ease);
}



.aiwp-menu-bag,
.aiwp-menu-burger { display: flex; align-items: center; }

/* ⚠️ EXAKT EN BURGARE ÅT GÅNGEN.
   Från 1200 px finns vänsterrailen och burgaren sitter överst i den — då ska
   menyradens variant bort, annars står samma knapp två gånger i samma vy.
   Under 1200 px finns ingen rail, och då är menyraden den enda vägen till
   kategoripanelen. Villkoret måste vara SAMMA brytpunkt som railens; olika
   värden ger antingen två knappar eller ingen. */
@media (min-width: 1024px) {
  /* ⚠️ NÄR RAILEN FINNS BÄR DEN KORGEN OCH BUTIKSMENYN — då ska menyradens
     varianter bort. Villkoret är `.aiwp-has-shop` och inte bara brytpunkten:
     railen renderas BARA på butiksytor, så på en redaktionell sida måste
     korgen ligga kvar i raden även på stor skärm.

     Först försökte jag lappa det trånga bandet 1024–1199 genom att krympa
     ikoner och dölja ordet. Fel angreppssätt: temats egen meny fyller redan
     raden där, och tre extra poster får inte plats hur små de än blir. Att
     låta railen börja tidigare tar bort trängseln i stället för att dölja den.

     `li.nav-item.…` (0,2,1) — temat sätter display på `.nav-links .nav-item`
     (0,2,0) och vinner annars. Fjärde gången samma sorts fälla i den här
     filen: RÄKNA specificiteten mot det du försöker överrösta. */
  /* 🔴 BARA BURGAREN DÖLJS HÄR. Robert 2026-09-03, ordagrant: *"Ta inte bort
     ikon och webbshop samt kundkorg från här MÅSTE VARA HÄR HELA TIDEN."*

     Jag hade dolt även ordet och korgen på butiksytor med motiveringen att
     railen redan bar dem. Det var ett beslut han aldrig bett om — han hade
     tvärtom bett om motsatsen. Lägg ALDRIG till en doldregel här igen utan
     att han sagt det uttryckligen. */
  .aiwp-has-shop li.nav-item.aiwp-menu-burger { display: none !important; }
}

/* Butiksmenyn överst i railen, avskild från de personliga genvägarna nedanför
   — den styr sidans innehåll, väskan och kontot är dina egna ytor. */
.aiwp-rail__btn--menu {
  margin-bottom: .4rem;
  padding-bottom: 0;
}

.aiwp-rail__btn--menu::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.35rem;
  transform: translateX(-50%);
  width: 18px;
  height: 1px;
  background: var(--shop-line);
}

/* ⚠️ UTBRUTNA UR MENYRADEN OCH FÖRANKRADE I HÖGERKANTEN.
   Robert 2026-09-03: *"måste bryta ut WEBBUTIK och ikonen och lägga till
   högerkanten, utanför den 'normala' menyn"* · *"Ikonen flyttas till
   högerkanten fast med 10px gap till kanten"* · *"WEBBUTIK har i sin tur 10px
   gap till kundkorgen"*.

   `nav.nav` är redan `position: fixed` och därmed positioneringskontext —
   uppmätt, inte antaget. Vi behöver alltså INTE lägga `position: relative`
   någonstans i temat, vilket hade varit farligt: menyns nedfällbara paneler
   är absolut positionerade och hade flyttat med.

   Absolut positionering tar dem ur menyns flöde, vilket löser trängseln på
   köpet — raden konkurrerar inte längre om bredden.

   Talen hänger ihop: korgknappen är 34 px, så WEBBUTIK hamnar på
   10 + 34 + 10 = 54 px från kanten. Ändras knappstorleken måste 54 följa med. */
@media (min-width: 1024px) {
  /* ⚠️ `li.nav-item.…` (0,2,1) — FEMTE gången samma fälla i den här filen.
     Temat sätter `position: relative` på `.nav-links .nav-item` (0,2,0) för
     sina nedfällbara paneler. Min `.aiwp-menu-shop` (0,1,0) förlorade, och
     `right: 54px` tolkades då som en förskjutning från STATISK position —
     posten flyttade 54 px åt VÄNSTER och la sig ovanpå KONTAKT.

     Ett fel som ser ut som ett layoutfel men är ett specificitetsfel. Räkna
     mot det du försöker överrösta INNAN du skriver regeln.

     (Panelerna är förankrade i `.nav-item` självt, inte i `.nav` — kontrollerat
     med `offsetParent`. Att bryta ut de här två rör dem alltså inte.) */
  li.nav-item.aiwp-menu-shop,
  li.nav-item.aiwp-menu-bag {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }

  /* Temats `.nav-item` bär egen sidopadding — utan nollningen mäts de 10 px
     från postens kant och inte från ikonens, och korgen hamnade 19 px in. */
  li.nav-item.aiwp-menu-shop,
  li.nav-item.aiwp-menu-bag { padding-left: 0; padding-right: 0; }

  li.nav-item.aiwp-menu-bag  { right: 10px; }
  li.nav-item.aiwp-menu-shop { right: 54px; }

  /* Saknas korgen — tom varukorg på en redaktionell sida — är WEBBUTIK sista
     posten och ska då själv ligga 10 px från kanten. Utan detta står den kvar
     på 54 och lämnar ett hål där korgen skulle ha varit. */
  li.nav-item.aiwp-menu-shop:last-child { right: 10px; }
}

/* Under 1024 ligger de kvar i mobilpanelens flöde som vanliga poster. */
@media (max-width: 1023px) {
  .aiwp-menu-bag { margin-left: .55rem; }
}

.aiwp-menu-bag > button:hover,
.aiwp-menu-burger > button:hover {
  background: rgba(24, 64, 93, .07);
  color: var(--navy, #18405d);
}

.aiwp-menu-bag > button:focus-visible,
.aiwp-menu-burger > button:focus-visible {
  outline: 2px solid var(--navy, #18405d);
  outline-offset: 2px;
}

.aiwp-menu-bag .aiwp-ico,
.aiwp-menu-burger .aiwp-ico { width: 18px; height: 18px; }

/* Räknaren sitter på korgen, inte bredvid — den hör till väskan. */
.aiwp-menu-bag .aiwp-bag__count {
  top: -1px;
  right: -3px;
}


/* Ordlänken till butiken i toppklustret.
   ⚠️ Behålls som klass men renderas inte längre — Robert flyttade ordet till
   huvudmenyn 2026-09-03. Tas bort helt när menyplaceringen är godkänd. */
.aiwp-topbar__link {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 .95rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--shop-ink);
  background: #fff;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  transition: background .18s var(--shop-ease), color .18s var(--shop-ease);
}

.aiwp-topbar__link:hover { background: var(--shop-ink); color: #fff; }
.aiwp-topbar__link:focus-visible { outline: 2px solid var(--shop-ink); outline-offset: 2px; }

/* Under 700 px tar ordet plats från ikonerna — då räcker väskan och menyn. */
@media (max-width: 700px) {
  .aiwp-topbar__link { display: none; }
}

.aiwp-topbar__btn,
.aiwp-rail__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;              /* träffytan, inte en ungefärlighet */
  padding: 0;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  background: #fff;
  color: var(--shop-ink);
  cursor: pointer;
  text-decoration: none;
  transition: background .18s var(--shop-ease), color .18s var(--shop-ease);
}

.aiwp-topbar__btn:hover,
.aiwp-rail__btn:hover { background: var(--shop-ink); color: #fff; }

.aiwp-topbar__btn:focus-visible,
.aiwp-rail__btn:focus-visible { outline: 2px solid var(--shop-ink); outline-offset: 2px; }

.aiwp-topbar__btn .aiwp-ico,
.aiwp-rail__btn .aiwp-ico { width: 20px; height: 20px; }

/* Räknaren. Guld på navy vore 3,6:1 — för en SIFFRA räcker inte det, så den
   bär navy text på guld i stället: 5,6:1 åt rätt håll. */
.aiwp-bag__count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--shop-radius);
  background: var(--shop-gold-ink);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 18px;
  text-align: center;
}

.aiwp-bag__count[hidden] { display: none; }

/* ── Vänsterrailen ──
   Roberts Goldsmith-referens. Från 1200 px: under det äter den bredd som
   varorna behöver bättre. */
.aiwp-rail { display: none; }

@media (min-width: 1024px) {
  .aiwp-rail {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 901;
    width: 66px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    /* 15 px till toppen — Robert: *"så själva hamburgaren ligger i linje med
       meny och logga"*. Railen började tidigare 6,5rem ned och burgaren
       hamnade under headerraden i stället för i den. */
    padding: 15px 0 1.5rem;
    border-right: 1px solid var(--shop-line);
    background: var(--shop-bg);
  }

  /* Butikens namn ställt på högkant längs railen — hämtat rakt ur referensen. */
  .aiwp-rail__word {
    margin-top: auto;
    text-decoration: none;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--shop-dim);
    transition: color .18s var(--shop-ease);
  }

  .aiwp-rail__word:hover { color: var(--shop-ink); }

  /* ⚠️ Innehållet flyttas undan railen på BODY, inte element för element.
     Första försöket räknade upp `.site-main`, `main.aiwp-shop` och
     `.breadcrumb` — och missade två saker: varukorgens main heter
     `page-content` (den renderas via page.php, inte via butiksmallen) och
     footern räknades aldrig upp alls. Resultatet var att sidfoten låg UNDER
     railen och "JOAKIMS" kapades till "OAKIMS". Uppmätt på dev5.

     Padding på body träffar allt som flödar i sidan, inklusive header och
     footer, medan railen och toppknapparna sitter `fixed` mot vyn och står
     kvar. En uppräkning av element är alltid ofullständig; en förälder är det
     aldrig. */
  .aiwp-has-shop { padding-left: 66px; }
}

/* ── Skärmen bakom panelerna ── */
.aiwp-scrim {
  position: fixed;
  inset: 0;
  z-index: 903;
  background: rgba(24, 64, 93, .38);
  animation: aiwp-fade .25s var(--shop-ease);
}

.aiwp-scrim[hidden] { display: none; }

@keyframes aiwp-fade { from { opacity: 0 } to { opacity: 1 } }

/* Skärmen tonar UT lika omsorgsfullt som den tonar in. `forwards` behövs —
   utan den snäpper opaciteten tillbaka till 1 sista bildrutan innan
   elementet döljs, och det syns som ett blink. */
/* ⚠️ Skärmen måste följa panelen UT, inte slockna före den. Var `.24s` mot
   panelens `.34s`: bakgrunden blev klar medan panelen fortfarande gled, och
   ögat läste två frikopplade händelser i stället för en. Nu samma kurva och
   nästan samma längd som utgången — de lämnar tillsammans. */
.aiwp-scrim.is-closing {
  animation: aiwp-fade-out .44s var(--shop-ease-exit) forwards;
  pointer-events: none;
}

@keyframes aiwp-fade-out { from { opacity: 1 } to { opacity: 0 } }

/* ── Panelerna ── */
.aiwp-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 904;
  width: min(380px, 88vw);
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 0 60px rgba(24, 64, 93, .22);
  transition: transform .34s var(--shop-ease);
}

/* Utgången. Klassen sätts av kromets skript i samma ögonblick `is-open` tas
   bort, och gäller BÅDA vägarna ut — kryssknappen, klick utanför och Escape
   går alla genom samma `close()`. Robert bad uttryckligen om att X och klick
   utanför ska bete sig likadant; det gör de eftersom det aldrig fanns två
   stängningsvägar, bara en med tre utlösare. */
.aiwp-panel.is-closing { transition: transform .52s var(--shop-ease-exit); }

.aiwp-panel[hidden] { display: none; }

.aiwp-panel--left  { left: 0;  transform: translateX(-100%); }
.aiwp-panel--right { right: 0; transform: translateX(100%); }
.aiwp-panel.is-open { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .aiwp-panel { transition: none; }
  .aiwp-scrim { animation: none; }
}

.aiwp-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid var(--shop-line);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--shop-ink);
}

.aiwp-panel__x {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  color: var(--shop-dim);
  cursor: pointer;
  border-radius: var(--shop-radius);
}

.aiwp-panel__x:hover { background: var(--shop-bg); color: var(--shop-ink); }
.aiwp-panel__x .aiwp-ico { width: 20px; height: 20px; }

/* ── Kategoripanelen ──
   ⚠️ VÄRDENA ÄR UPPMÄTTA PÅ TEMATS EGEN NEDFÄLLDA MENY, INTE HÄRMADE.
   Robert 2026-09-03: *"vore fint få med de snygga menyer och känslan i vår
   hamburger shopmeny så man får med den vertikala guldranden och textstorlek
   osv"*.

   Mätt på `.nav-dropdown` och `.nav-dd-item` på /kontakt/:
     panel   vit · 2px guldram #cb8732 · radie 0 0 8 8 · skugga
             rgba(24,64,93,.13) 0 8 32 · padding 8px 0
     post    13px · vikt 400 · #6b6360 · padding 10/14 · inga versaler
     hover   bakgrund #d9a346 · vit text · full bredd · indrag åt höger

   GULDRANDEN SITTER PÅ INNERKANTEN, inte till vänster som i dropdownen.
   Dropdownen hänger under sin menypost och guldet markerar dess vänsterkant.
   Vår panel glider in FRÅN vänster, så det är högerkanten som möter sidan —
   där gör randen samma sak. Att kopiera sidan bokstavligt hade lagt guldet
   mot skärmkanten där ingen ser det. */

.aiwp-panel--left { border-right: 2px solid var(--gold, #cb8732); }
.aiwp-panel--right { border-left: 2px solid var(--gold, #cb8732); }

.aiwp-panel__nav { overflow-y: auto; padding: 8px 0 1.5rem; }

.aiwp-panel__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted, #6b6360);
  text-decoration: none;
  border-left: none;
  transition: background .16s var(--shop-ease), color .16s var(--shop-ease),
              padding-left .16s var(--shop-ease);
}

/* Hovern är temats: fylld guld, vit text, och ett litet indrag som gör att
   raden känns "vald" och inte bara markerad. */
.aiwp-panel__nav a:hover,
.aiwp-panel__nav a:focus-visible {
  background: #d9a346;
  color: #fff;
  padding-left: 26px;
  outline: none;
}

.aiwp-panel__nav a span {
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--shop-dim);
}

.aiwp-panel__nav a:hover span,
.aiwp-panel__nav a:focus-visible span { color: rgba(255, 255, 255, .85); }

/* ── Kategoriikonen framför huvudkategorierna ────────────────────────────────
   Kräver markup från inc/woocommerce-design.php. Utan den syns ingenting här,
   och det är avsiktligt — CSS ska aldrig hitta på innehåll som inte finns.

   ⚠️ SPECIFICITET mot regeln precis ovanför, räknad före dessa skrevs:
     `.aiwp-panel__nav a span`                    (0,2,1)  sätter 12px/--shop-dim
     `.aiwp-panel__nav a .aiwp-panel__lbl`        (0,3,1)  vinner
   Etiketten sätter `color: inherit` och INGEN egen färg. Det är poängen: den
   följer då `<a>`-taggen av sig själv — grå i vila, vit på guldhovern — utan
   att hovern behöver skrivas en andra gång. En färg utskriven här hade tyst
   ätit upp hovern, eftersom den ligger på samma nivå men senare i filen. */
.aiwp-panel__nav a .aiwp-panel__lbl {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: 13px;
  color: inherit;
}

/* Ikonen ärver `currentColor` via `a span` ovan: #6b6360 i vila, vit på hover.
   22 px är valt mot radens 13 px text — större och ikonen börjar konkurrera
   med namnet, mindre och strecken i myntet och fickuret går ihop. */
.aiwp-panel__nav a .aiwp-panel__ico {
  width: 22px;
  height: 22px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--aiwp-cat-ico) center / contain no-repeat;
          mask: var(--aiwp-cat-ico) center / contain no-repeat;
}

/* "Alla varor" är panelens egen översiktsrad — samma roll som
   `.nav-dd-overview` i temat, och därför samma avskiljande linje under. */
.aiwp-panel__all {
  border-bottom: 1px solid var(--shop-line);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--shop-ink) !important;
  margin-bottom: 6px;
}

/* Underkategorier: indrag och lättare ton — hierarkin ska synas utan ikoner.

   ⚠️ INDRAGET FÖLJER IKONEN OCH MÅSTE RÄKNAS OM OM 22 px ÄNDRAS.
   Var 38 px, vilket fungerade så länge föräldern började på 20. Med ikonen
   börjar förälderns TEXT på 20 + 22 + 9,6 (gap .6rem) = 51,6 px — ett barn på
   38 hade då stått till VÄNSTER om sin egen förälder och vänt hierarkin upp
   och ner. 52 px lägger barnets text exakt under förälderns: ikonerna bildar
   en kolumn, texten en annan, och indraget läses som underordning i stället
   för som en slump. */
.aiwp-panel__kids a {
  padding-left: 52px;
  font-size: 12.5px;
  color: var(--shop-dim);
}

.aiwp-panel__kids a:hover { padding-left: 58px; color: #fff; }

/* ── Varukorgen ── */
.aiwp-drawer__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 1.25rem;
}

.aiwp-drawer__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  margin: auto;
  color: var(--shop-dim);
  font-size: var(--fs-sm);
}

.aiwp-drawer__empty .aiwp-ico { width: 40px; height: 40px; opacity: .4; }

.aiwp-drawer__items {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.aiwp-drawer__items li {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--shop-line);
  transition: opacity .22s var(--shop-ease), transform .22s var(--shop-ease);
}

/* Raden på väg ut. Den tonar och glider en aning åt höger — samma riktning som
   knappen sitter i, så rörelsen läser som "ut ur listan" och inte som ett fel.
   `pointer-events: none` hindrar dubbelklick medan hämtningen pågår. */
.aiwp-drawer__items li.is-leaving {
  opacity: .3;
  transform: translateX(10px);
  pointer-events: none;
}

/* ── Bortknappen ──────────────────────────────────────────────────────────────
   Robert 2026-09-04: *"ett X på ngt snyggt sätt, inte så blaffigt"*.

   Därför ingen ram och ingen fylld yta i vila — bara ett litet tecken i samma
   dova ton som prisraden. Det som växer vid beröring är kontrasten, inte
   storleken: glyfen går till guldbläck och en varm bricka tonar in bakom den.
   En knapp som ändrar storlek vid hover flyttar raden den sitter i.

   ⚠️ `margin-left: auto` och inte `justify-content: space-between` på raden:
   det senare hade skjutit isär bilden och texten också. */
.aiwp-drawer__x {
  flex: none;
  align-self: center;
  margin-left: auto;
  display: grid;
  place-items: center;
  /* 34 px synlig yta, men tumvänligt genom `padding` snarare än en stor ruta:
     träffytan blir 34 och rutan syns aldrig i vila. */
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--shop-dim);
  opacity: .55;
  text-decoration: none;
  transition: opacity .18s var(--shop-ease), color .18s var(--shop-ease),
              background .18s var(--shop-ease);
}

.aiwp-drawer__x .aiwp-ico { width: 13px; height: 13px; }

.aiwp-drawer__x:hover,
.aiwp-drawer__x:focus-visible {
  opacity: 1;
  color: var(--shop-gold-ink);        /* 5,6:1 — knappen bär en handling */
  background: var(--shop-tray);
  outline: none;
}

.aiwp-drawer__x:focus-visible { box-shadow: 0 0 0 2px var(--shop-ink); }

.aiwp-drawer__x.is-busy { opacity: .35; pointer-events: none; }

/* På pekskärm finns ingen hover att upptäcka knappen med, så den står tydligare
   från början. Uppmätt behov, inte en gissning: 0,55 opacitet är fullt läsbart
   men signalerar "vilande", och det bara fungerar när något kan väcka den. */
@media (hover: none) {
  .aiwp-drawer__x { opacity: .8; }
}

@media (prefers-reduced-motion: reduce) {
  .aiwp-drawer__items li { transition: none; }
  .aiwp-drawer__items li.is-leaving { transform: none; }
}

.aiwp-drawer__items img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--shop-radius);
  background: var(--shop-tray);
}

.aiwp-drawer__items div { display: flex; flex-direction: column; gap: .2rem; }

.aiwp-drawer__items div a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .9rem;
  color: var(--shop-ink);
  text-decoration: none;
}

.aiwp-drawer__items div span {
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--shop-dim);
}

.aiwp-drawer__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--shop-line);
  font-size: var(--fs-sm);
}

.aiwp-drawer__total strong {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  color: var(--shop-ink);
}

.aiwp-drawer__actions { display: flex; flex-direction: column; gap: .6rem; }
.aiwp-drawer__actions .button { width: 100%; }

.aiwp-drawer__link {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--shop-dim);
  text-underline-offset: 3px;
}

.aiwp-drawer__link:hover { color: var(--shop-ink); }


/* ═══ 2. SKALET ══════════════════════════════════════════════════════════════ */

/* ── BRÖDSMULAN ──────────────────────────────────────────────────────────────
   Robert 2026-09-03: *"exakt som redaktionella sidan men kanske i guld eller
   annan accentfärg så den skiljer sig lite"*.

   🔴 ROTORSAKEN VAR INTE DEN GISSADE. Föregående handoff misstänkte att
   `.aiwp-has-hero main .container.section-pad { padding-top: 0 }` dragit upp
   brödsmulan. Det kan den inte: den regeln träffar `main`, och brödsmulan
   renderas UTANFÖR main (`inc/woocommerce.php` skriver ut den före
   `<main>`, precis som page.php gör). Uppmätt i DOM:en på dev5.

   Det verkliga skälet är enklare och tystare: butiken och de redaktionella
   sidorna använder TVÅ HELT OLIKA brödsmulekomponenter.

     redaktionellt   `nav.breadcrumb-bar > .breadcrumb-inner`   (JMG:s egen,
                     `jmg_render_breadcrumb()` i dev5:s functions.php)
     butiken         `nav.breadcrumb > .container > ol.breadcrumb-list`
                     (temats, via `aiwp_shop_breadcrumb()`)

   `.breadcrumb-bar` har `margin-top: 70px` och rensar därför den fasta
   headern. `nav.breadcrumb` har ingen marginal alls — den låg inte "för
   högt", den hade aldrig fått någon höjd att börja på. Och dev5:s main.css
   ger `nav.breadcrumb` botten `#041d28`, vilket var den mörka remsan.

   ⚠️ GEOMETRIN ÄR BUTIKENS, INTE DEN REDAKTIONELLAS — och det är avsiktligt.
   Den redaktionella baren är `max-width:1320px` + 60 px luft (innehåll
   1200 px). Butikens innehåll ligger i `.container` = `min(1280px, 92vw)`.
   Hade jag kopierat 1320/60 hade brödsmulan stått 40 px innanför produkterna
   under den — samma bar, men ur linje med sidan den beskriver. Utseendet
   följer alltså den redaktionella; kanten följer butiken.

   ⚠️ SPECIFICITET, räknad före regeln skrevs. `.aiwp-has-shop` sitter på BODY
   och är alltså en FÖRFADER, inte en syskonklass (compound) — descendant är
   rätt kombinator just här:
     dev5 main.css `nav.breadcrumb`                       (0,1,1)
     client-components `.breadcrumb`                      (0,1,0)
     denna         `.aiwp-has-shop nav.breadcrumb`        (0,2,1)  vinner båda */

.aiwp-has-shop nav.breadcrumb {
  margin-top: 70px;                    /* samma tal som `.breadcrumb-bar` — samma header */
  padding: 10px 0;
  background: var(--shop-bg);
  /* Accenten. Den redaktionella baren har en neutral hårfin linje
     (`#e8e3dd`); butikens är guldtonad. Ett 1 px streck är ren dekor, så
     `--shop-gold-dec` får bära den utan kontrastkrav — och dämpad, för en
     mättad guldlinje hade läst som en överstrykning i stället för en kant. */
  border-bottom: 1px solid rgba(203, 135, 50, .42);   /* fallback: #cb8732 */
  border-bottom-color: color-mix(in srgb, var(--shop-gold-dec) 42%, transparent);
  margin-bottom: 0;                    /* nollar client-components `.breadcrumb` */
}

@media (max-width: 960px) {
  .aiwp-has-shop nav.breadcrumb { margin-top: 60px; }   /* headern är lägre här */
}

.aiwp-has-shop nav.breadcrumb .breadcrumb-list {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--shop-dim);
  letter-spacing: normal;
}

@media (max-width: 960px) {
  .aiwp-has-shop nav.breadcrumb .breadcrumb-list { font-size: 11px; }
}

.aiwp-has-shop nav.breadcrumb .breadcrumb-list a { color: var(--shop-dim); }

.aiwp-has-shop nav.breadcrumb .breadcrumb-list a:hover {
  color: var(--shop-gold-dec);         /* samma hover som `.breadcrumb-inner a` */
}

/* Sista smulan = var du står. Navy, 9,9:1 — informationen i raden ligger här
   och ska ha full läsbarhet, till skillnad från avdelarna. */
.aiwp-has-shop nav.breadcrumb .breadcrumb-list span {
  color: var(--shop-ink);
  font-weight: 500;
}

/* Avdelaren. Den redaktionella `.bc-sep` är navy 30 % — dekor, inte
   information: ordningen bär hierarkin, snedstrecket bara markerar den.
   Här är den guld av samma skäl och på samma nivå. */
.aiwp-has-shop nav.breadcrumb .breadcrumb-list li:not(:last-child)::after {
  color: rgba(203, 135, 50, .62);                                  /* fallback */
  color: color-mix(in srgb, var(--shop-gold-dec) 62%, transparent);
  margin: 0 7px;
}

.aiwp-has-shop .woocommerce-products-header { margin-bottom: .5rem; }

/* Rubriken hänger ihop med sin brödtext — därför liten marginal under, stor över. */
.aiwp-has-shop .woocommerce-products-header__title,
.aiwp-has-shop .product_title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--shop-ink);
  letter-spacing: -.012em;
  margin: 0 0 .6rem;
}

/* Butikens/kategorins egen text — ytan redaktören fyller via pennan.
   68ch är läsradens gräns, inte en smaksak: längre rader tappar läsaren. */
.aiwp-shop__intro {
  max-width: 68ch;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--shop-dim);
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.aiwp-shop__intro > :last-child { margin-bottom: 0; }


/* ═══ 3. KATEGORIBRICKOR ═════════════════════════════════════════════════════
   Samma runda urtag som produktkorten, i mindre format. Kategorierna blir en rad
   brickor att svepa längs — inte sex bildrutor som konkurrerar med produkterna. */

/* ⚠️ Brickorna var `minmax(122px,1fr)` över full bredd — sex kategorier blev
   tre enorma skivor per rad och drog blicken från varorna. Robert 2026-09-03:
   *"blaffigt"*. Nu en kompakt rad som rymmer alla sex: kategorierna är en
   VÄG till varorna, inte en utställning i sig. */
.aiwp-shop-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: clamp(.6rem, 1.6vw, 1.1rem);
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
  padding: 0;
  list-style: none;
}

/* 104 px + `nowrap`: "14 produkter" bröt på två rader vid 92 px och gjorde
   raden ojämn. Räknaren ska aldrig radbryta — den är en siffra, inte en text. */
.aiwp-shop-cats .aiwp-shop-cat { flex: 0 0 auto; width: 104px; }
.aiwp-shop-cat__count { white-space: nowrap; }

.aiwp-shop-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  text-align: center;
  text-decoration: none;
  color: var(--shop-ink);
  padding: .35rem 0 .5rem;
  border-radius: var(--shop-radius);
  transition: transform .22s var(--shop-ease);
}

/* Urtaget för kategoribilden */
.aiwp-shop-cat::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 64px;
  aspect-ratio: 1;
  border-radius: var(--shop-disc);
  background: var(--shop-tray);
  box-shadow: var(--shop-recess);
  margin-bottom: .55rem;
  transition: box-shadow .22s var(--shop-ease);
}

/* Bilden läggs ovanpå urtaget och maskas rund. Negativ marginal i stället för
   absolut positionering — då behöver brickan ingen egen positioneringskontext,
   och pennans bakgrundsförhandsvisning kan inte flytta våra referenspunkter. */
.aiwp-shop-cat img {
  width: 100%;
  max-width: 64px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--shop-disc);
  margin: calc(-64px - .55rem) 0 .55rem;
  position: relative;
  transition: transform .22s var(--shop-ease);
}

.aiwp-shop-cat__name { font-size: .8rem; }
.aiwp-shop-cat__count { font-size: .72rem; }

.aiwp-shop-cat--noimg::before { margin-bottom: .55rem; }

.aiwp-shop-cat:hover::before,
.aiwp-shop-cat:focus-visible::before {
  box-shadow: var(--shop-recess), 0 0 0 2px var(--shop-gold-edge);
}

.aiwp-shop-cat:hover img { transform: scale(1.03); }

.aiwp-shop-cat:focus-visible {
  outline: 2px solid var(--shop-ink);
  outline-offset: 3px;
}

.aiwp-shop-cat__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1.25;
  color: var(--shop-ink);
}

/* ⚠️ Var `--text-dim` i `--fs-xs` — liten OCH dämpad samtidigt. Uppgraderad till
   `--fs-sm`: 5,4:1 räcker inte om typen samtidigt är för liten att sikta på. */
.aiwp-shop-cat__count {
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--shop-dim);
}


/* ═══ 4. PRODUKTRUTNÄTET ═════════════════════════════════════════════════════ */

/* ⚠️ Kolumnantalet ägs av `loop_shop_columns` i inc/woocommerce.php och skrivs ut
   som `columns-N`. Sätt ALDRIG ett eget antal här — då finns två källor för samma
   tal och filtret börjar ljuga tyst. Mätt 2026-09-03: filtret sa 3, sidan gav 4.
   Reglen nedan är bara fallback för markup helt utan `columns-N`. */
.aiwp-has-shop ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--shop-gap);
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}

.aiwp-has-shop ul.products.columns-1 { grid-template-columns: 1fr; }
.aiwp-has-shop ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aiwp-has-shop ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aiwp-has-shop ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aiwp-has-shop ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.aiwp-has-shop ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.aiwp-has-shop ul.products::before,
.aiwp-has-shop ul.products::after { content: none; }   /* Woos clearfix */

/* Kortet har ingen ram och ingen egen bakgrund. Det som håller ihop det är
   urtaget och den gemensamma baslinjen — inte en rektangel runt om. Det är
   skillnaden mot varje annan Woo-butik. */
.aiwp-has-shop ul.products li.product {
  display: flex;
  flex-direction: column;
  width: auto;
  margin: 0;
  float: none;
  background: none;
  border: none;
  /* Vänsterställt, inte centrerat. Centrerad korttext tvingar ögat att söka
     radbörjan på nytt för varje kort; en gemensam vänsterkant gör en rad om
     fyra läsbar i ett svep. Det är halva skillnaden mellan blaffigt och lugnt. */
  text-align: left;
}

/* ⚠️ HALVSTEGET ÄR BORTTAGET 2026-09-03.
   Det var rutnätets oregelbundenhet: var tredje bricka föll 22 px. Med stora
   runda skivor på tre kolumner blev helheten tung — Robert: *"blir väldigt
   blaffigt"*. Fyra kolumner, kvadratisk bild och lugn baslinje ger den finess
   han bad om. En förskjutning till hade lagt tillbaka precis det som stökade.

   Kortet lyfter inte heller längre. På ett tätt rutnät läser lyftet som ett
   hopp; i stället skärps bilden och en hårfin linje tänds under. */

@media (prefers-reduced-motion: reduce) {
  .aiwp-has-shop ul.products li.product,
  .aiwp-has-shop ul.products li.product:hover,
  .aiwp-shop-cat, .aiwp-shop-cat img { transition: none; }
}

/* ── Bildytan ──
   Formatet kommer från admin (`--shop-ratio`), inte härifrån. 1:1 är default
   och det är WooCommerces egen standard — det enda som håller rutnätet lugnt
   när katalogen blandar mynt, klockor och frimärken. */
.aiwp-product-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--shop-ratio, 1/1);
  border-radius: var(--shop-radius);
  background: var(--shop-tray);
  margin-bottom: .85rem;
  transition: box-shadow .3s var(--shop-ease);
}

/* ⚠️ SPECIFICITETEN ÄR INTE VALFRI HÄR.
   Woos egen `.woocommerce ul.products li.product img` är (0,3,1) och sätter
   `width:100%; height:auto`. En regel på `.aiwp-product-card__media img` är
   (0,1,1) och FÖRLORAR tyst — bilden lade sig då ovanpå skivan i stället för i
   den, och det såg ut som ett renderingsfel. Uppmätt på dev5 2026-09-03.
   Selektorn nedan är (0,4,2) och vinner. Sänk den inte.

   Bilden fyller HELA urtaget och maskas rund. Det klarar båda bildtyperna JMG
   har: ett friställt mynt på vitt blir en rund plåt med myntet mitt i, och ett
   stämningsfoto av en hög blir en lupputblick ned i brickan. `contain` hade
   fungerat för den ena och lämnat den andra som en liten bricka i en stor. */
.aiwp-has-shop ul.products li.product .aiwp-product-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  margin: 0;
  padding: 0;
  border-radius: var(--shop-radius);
  transition: transform .5s var(--shop-ease);
}

.aiwp-product-card__media { overflow: hidden; }

/* Hovern: en långsam, knappt märkbar inzoomning. 1,03 över en halv sekund —
   tillräckligt för att kännas levande, för lite för att läsas som en effekt.
   Guldkanten är kvar men som 1 px, inte 2: på fyra kolumner blir 2 px en ram. */
.aiwp-has-shop ul.products li.product:hover .aiwp-product-card__media {
  box-shadow: 0 0 0 1px var(--shop-gold-edge);
}

.aiwp-has-shop ul.products li.product a:focus-visible .aiwp-product-card__media {
  box-shadow: 0 0 0 2px var(--shop-ink);
}

.aiwp-has-shop ul.products li.product:hover .aiwp-product-card__media img {
  transform: scale(1.03);
}

/* ── Texten under brickan ── */

/* Kategorietiketten. Guld SOM TEXT måste vara `--shop-gold-ink` (5,6:1);
   temats `--gold` ligger på 2,8:1 och är oläslig i den här storleken. */
.aiwp-product-card__cat {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--shop-gold-ink);
  margin-bottom: .3rem;
}

/* ⚠️ Titeln var `--fs-h4` (1,05rem) i Playfair fetstil på tre kolumner. På
   fyra blev samma grad tung och radbröt ofta i tre rader — en stor del av
   "blaffigt". Nedskalad och satt i vikt 600: den ska namnge varan, inte ropa. */
.aiwp-has-shop ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.35;
  color: var(--shop-ink);
  padding: 0;
  margin: 0 0 .3rem;
}

/* Priser i tabulära siffror. Två priser under varandra ska ha samma sifferbredd,
   annars vibrerar kolumnen — det syns även när man inte vet varför. */
.aiwp-has-shop ul.products li.product .price {
  font-size: .9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--shop-ink);
  margin: 0 0 .75rem;
}

/* "inkl. moms" ska inte väga lika mycket som talet — men aldrig under 5:1. */
.aiwp-has-shop ul.products li.product .price .woocommerce-price-suffix {
  font-size: .72rem;
  font-weight: 400;
  color: var(--shop-dim);
}

/* Köpknappen i listningen: konturknapp, inte fylld. Fyra fyllda marinblå
   block per rad blev en mur — Goldsmith-referensen har samma lösning. Den
   fylls vid hover, så köpvägen är lika tydlig när man siktar på den. */
/* Kortets knapp: samma språk, nedskalat. 28 px sidluft och 13 px versaler får
   inte plats i en fjärdedels spaltbredd — "LÄGG TILL I VARUKORG" hade brutits
   på tre rader. Proportionen behålls, måtten krymper. */
/* 🔴 VÄRDENA ÄR ROBERTS EGNA, ordagrant ur hans devtools 2026-09-03 — inte
   valda av mig. Rör dem inte utan att fråga honom.

   ⚠️ `#c18a44` med vit text är 3,0:1, alltså under AA. Det är samma MEDVETNA
   avvikelse som rabattknappen redan har och som han godkänt: sajtens EGEN
   primärknapp är `#cb8732` med vit text på samma nivå. Valet är konsekvent med
   sajten, inte ett avsteg från den. Vill någon lyfta kontrasten är det ett
   SAJTÖVERGRIPANDE beslut som börjar i de redaktionella knapparna. */
.aiwp-has-shop ul.products li.product .button {
  width: 100%;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .48px;
  padding: 11px 14px;
  background: #c18a44;
  color: #fff;
  border-color: var(--shop-line);
  border-radius: var(--shop-radius);
  text-align: center;
}

/* Hovern FÖRDJUPAR guldet i stället för att slå om till navy. Med en navy
   viloyta var omslaget till navy en naturlig mörkning; med en guld viloyta
   hade det blivit ett färgbyte mitt i en gest. `--shop-gold-ink` är dessutom
   5,6:1 mot vitt, så knappen blir MER läsbar när man siktar på den. */
.aiwp-has-shop ul.products li.product .button:hover {
  background: var(--shop-gold-ink);
  border-color: var(--shop-gold-ink);
  color: #fff;
}

/* ⚠️ Var `opacity:.55`, vilket gav ~2,9:1 på off-white. Utbytt mot en RÄKNAD
   färg: 5,4:1. Opacitet är aldrig ett kontrastbeslut — den är ett beslut man
   låter bli att fatta. */
.aiwp-has-shop ul.products li.product .price del,
.aiwp-has-shop div.product .summary .price del {
  opacity: 1;
  color: var(--shop-dim);
  font-weight: 400;
  margin-right: .45rem;
  text-decoration-thickness: 1px;
}

.aiwp-has-shop ul.products li.product .price ins,
.aiwp-has-shop div.product .summary .price ins {
  text-decoration: none;
  background: none;
  color: var(--shop-ink);
  font-weight: 700;
}

/* Knappen. `margin-top:auto` håller raden rak när titlarna är olika långa. */
.aiwp-has-shop ul.products li.product .button {
  margin: auto auto 0;
}

/* ── Rea-märket ──
   ⚠️ Guld botten + vit text var 3,0:1 och underkänt. Vänt: navy botten, vit
   text = 10,7:1, med guldkanten kvar som märkets enda guld. Sitter på urtagets
   överkant, inte i ett hörn som inte finns — brickan är rund. */
/* ⚠️ Samma fälla som bilden: Woos `.woocommerce ul.products li.product .onsale`
   är (0,4,1) och bär den olivgröna cirkeln #77a464. `.aiwp-has-shop .onsale`
   är (0,2,0) och förlorade tyst — märket stod kvar i Woos grönt, mätt på dev5.
   `span.onsale` ger (0,4,2) och vinner. */
.aiwp-has-shop ul.products li.product span.onsale,
.aiwp-has-shop div.product span.onsale,
.aiwp-has-shop .onsale {
  /* ⚠️ Var centrerat på överkanten och blev en bred banner tvärs över bilden.
     Nu ett litet märke i övre vänstra hörnet: det ska notera en rea, inte
     annonsera den över varan. */
  position: absolute;
  top: .55rem;
  left: .55rem;
  right: auto;
  transform: none;
  z-index: 2;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: .18rem .5rem;
  border: none;
  border-radius: var(--shop-radius);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.5;
  background: var(--shop-ink);
  color: #fff;
}


/* ═══ 5. KNAPPAR ═════════════════════════════════════════════════════════════

   ⚠️ `.alt`-varianten (köpknappen, "Gå till kassan") bär WooCommerce märkeslila
   #7f54b3 via `.woocommerce button.button.alt` — specificitet (0,2,1). En regel
   på `.woocommerce-page .button.alt` (0,2,0) FÖRLORAR mot den, helt tyst. Mätt
   2026-09-03: köpknappen på produktsidan var lila medan butikens var marinblå,
   samtidigt. Därför matchas elementtypen explicit. Rör inte listan. */

.aiwp-has-shop .button,
.aiwp-has-shop button.button,
.aiwp-has-shop a.button,
.aiwp-has-shop input.button,
.aiwp-has-shop .woocommerce-Button,
.aiwp-has-shop button.button.alt,
.aiwp-has-shop a.button.alt,
.aiwp-has-shop input.button.alt,
.aiwp-has-shop #respond input#submit,
.aiwp-has-shop #respond input#submit.alt,
/* ⚠️ Kromet igen. Sidolådans "Till kassan" är `<a class="button">` och
   renderas på redaktionella sidor, där `.aiwp-has-shop` inte finns — utan
   raderna nedan var den naken text. `a.button` ger (0,2,1), vilket också
   räcker mot Woos egen `.woocommerce a.button` skulle den någonsin gälla här. */
.aiwp-chrome a.button,
.aiwp-chrome button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: inherit;
  /* ⚠️ VÄRDENA ÄR UPPMÄTTA PÅ SAJTENS EGNA KNAPPAR, INTE VALDA.
     Robert 2026-09-03: *"knapparna över lag i shoppen sätter du en bra nivå
     på som redaktionella sidorna."* Mätt på `.btn-primary`, `.btn-ghost` och
     `.btn-white` på /kontakt/: 13px · 600 · 0,52px spärr · VERSALER ·
     14/28px · höjd 53.

     Han gissade själv 14px/500 och kom nära — men en gissning som ligger nära
     driftar isär vid nästa omdesign. Mät knappen, kopiera talen, notera var
     de kom ifrån.

     Radien är dock `--shop-radius` (3px) och inte redaktionella 4px: han
     satte 3 som uttrycklig SSOT för hela butiken samma dag, och skillnaden är
     en pixel. Ett tal med ett namn slår ett tal utan. */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .52px;
  text-transform: uppercase;
  line-height: 1.4;
  min-height: 44px;
  padding: 14px 28px;
  border: 1px solid var(--shop-ink);
  border-radius: var(--shop-radius);            /* knappen är brickans släkting */
  background: var(--shop-ink);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--shop-ease), border-color .2s var(--shop-ease),
              transform .12s var(--shop-ease);
}

.aiwp-has-shop .button:hover,
.aiwp-has-shop button.button.alt:hover,
.aiwp-has-shop a.button.alt:hover,
.aiwp-has-shop input.button.alt:hover,
.aiwp-has-shop #respond input#submit:hover,
.aiwp-chrome a.button:hover,
.aiwp-chrome button.button:hover {
  background: var(--shop-gold-ink);
  border-color: var(--shop-gold-ink);
}

/* Nedtryckning. 1 px räcker — knappen ska svara, inte studsa. */
.aiwp-has-shop .button:active { transform: translateY(1px); }

.aiwp-has-shop .button:focus-visible,
.aiwp-has-shop button.button:focus-visible,
.aiwp-has-shop a.button:focus-visible,
.aiwp-has-shop input.button:focus-visible {
  outline: 2px solid var(--shop-ink);
  outline-offset: 3px;
}

/* Köpknappen bär varukorgsikonen — maskad, alltså inte i DOM:en. */
.aiwp-has-shop ul.products li.product .add_to_cart_button::before,
.aiwp-has-shop .single_add_to_cart_button::before {
  content: "";
  width: 1.1em;
  height: 1.1em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--ico-cart) center / contain no-repeat;
          mask: var(--ico-cart) center / contain no-repeat;
}

/* 🔴 "VISA VARUKORG"-LÄNKEN ÄR DOLD I LISTNINGEN — och det är en LAYOUTFIX,
   inte en bantning.

   Robert 2026-09-03, annoterad skärmbild: *"Viktigt alla knapparna LÄGG I
   VARUKORG har samma horisontella linjen ihop. Denna sticker ut måste ligga i
   linje med de andra."*

   Orsaken, uppmätt: knappen ligger `margin: auto auto 0` och pressas mot
   kortets underkant. Woos `.added_to_cart` renderas som SYSKON EFTER knappen,
   så när en vara lagts till växer kortet nedåt och knappen skjuts UPP ur
   raden — 35 px, mätt på dev5. Alla andra kort stod kvar. Det såg ut som ett
   knappfel men var ett flödesfel: ett element efter knappen flyttar knappen.

   Två vägar fanns. Att reservera plats för länken på VARJE kort hade hållit
   raden rak, men lagt ~28 px tom yta under samtliga knappar för ett läge de
   flesta kort aldrig når. Att dölja den kostar ingenting, för bekräftelsen
   finns redan på två ställen: knappen bär sin egen bock när varan är lagd,
   och sidolådan glider ut med varan och delsumman i samma ögonblick.

   Länken är alltså Woos tredje kvitto på samma händelse. Ska den tillbaka är
   det EN rad — men då måste utrymmet reserveras, annars är raden krokig igen. */
.aiwp-has-shop ul.products li.product .added_to_cart { display: none; }

/* Sekundär: "Fortsätt handla", "Uppdatera varukorg" */
.aiwp-has-shop .button.wc-backward,
.aiwp-has-shop button[name="update_cart"] {
  background: transparent;
  color: var(--shop-ink);
}

.aiwp-has-shop .button.wc-backward:hover,
.aiwp-has-shop button[name="update_cart"]:hover {
  background: var(--shop-ink);
  color: #fff;
}

/* ⚠️ HÄR SATT FÄRGEN — INTE I EN BAKGRUNDSREGEL.
   Robert: *"Denna måste du få till den mörkblåa färgen, något konstigt fick
   inte till det i css själv."* Knappen VAR redan marinblå; det som bleknade
   den var `opacity: .45` på Woos inaktiverade läge, och opacitet bleker allt
   utan att synas i någon färgdeklaration. Därför gick den inte att hitta.

   Nu full färg. `.9` i stället för `1` behåller en hårsmån skillnad, och
   `not-allowed` gör att markören svarar — Woo aktiverar knappen först när ett
   antal ändrats, och en knapp som ser tänd ut men inte gör något är värre än
   en dämpad. */
/* ⚠️ ANDRA FÖRSÖKET. Det första satte rätt egenskaper men FÖRLORADE:
   uppmätt efteråt gav den `color: rgb(44,44,44)` och `opacity: 0.5`, alltså
   Woos egen avstängda regel. `.aiwp-has-shop button[name=…]:disabled` är
   (0,3,1) — exakt samma som Woos `.woocommerce button.button:disabled`, och
   vid oavgjort avgör inte vår fil utan lastordningen i just den vyn.

   `button.button[name=…]` ger (0,4,1) och vinner utan att behöva `!important`.
   Lärdomen: att skriva regeln räcker inte — MÄT att den vann. Jag hade
   rapporterat den som lagad utan att ha sett den renderad. */
.aiwp-has-shop button.button[name="update_cart"]:disabled,
.aiwp-has-shop button.button[name="update_cart"] {
  opacity: 1;
  background: var(--shop-ink);
  border-color: var(--shop-ink);
  color: #fff;
}

.aiwp-has-shop button.button[name="update_cart"]:disabled { cursor: not-allowed; }


/* ═══ 6. SORTERING OCH RESULTATRÄKNARE ═══════════════════════════════════════
   På en rad, motställda. De hör ihop och ska läsas som ett verktygsfält. */

.aiwp-has-shop .woocommerce-result-count,
.aiwp-has-shop .woocommerce-ordering {
  font-size: var(--fs-sm);
  color: var(--shop-dim);
  margin: 0 0 1.5rem;
}

.aiwp-has-shop .woocommerce-result-count {
  float: none;
  padding-top: .55rem;
  font-variant-numeric: tabular-nums;
}

.aiwp-has-shop .woocommerce-ordering { float: none; }

@media (min-width: 700px) {
  .aiwp-has-shop .woocommerce-result-count,
  .aiwp-has-shop .woocommerce-ordering {
    display: inline-block;
    vertical-align: middle;
  }
  .aiwp-has-shop .woocommerce-ordering { float: right; }
}

/* Egen pil — Woos select är osynlig på en varm bakgrund. */
.aiwp-has-shop .woocommerce-ordering select {
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--shop-ink);
  min-height: 44px;
  padding: .5rem 2.4rem .5rem .9rem;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318405d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 1em;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}


/* ═══ 7. PRODUKTSIDAN ════════════════════════════════════════════════════════

   Upplägget: myntet till vänster i ett stort urtag som FÖLJER MED vid scroll,
   och till höger en enda vertikal kolumn med tydlig rytm — etikett, namn,
   artikelnummer, linje, pris, beskrivning, köp, förtroende, meta.

   Varför sticky: en samlare tittar på myntet medan hen läser villkoren. Att låta
   bilden rulla bort är att be kunden minnas hur varan såg ut. */

.aiwp-has-shop div.product { display: block; }

.aiwp-has-shop div.product .woocommerce-product-gallery,
.aiwp-has-shop div.product .summary {
  float: none;
  width: auto;
  margin: 0;
}

@media (min-width: 861px) {
  .aiwp-has-shop div.product {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
  /* 🔴 STICKY BORTTAGEN 2026-09-04. Robert: *"Bildens överkant måste linjera
     med Produktrubriken"*.

     `position: sticky; top: 6.5rem` sköt ned galleriet **104 px redan vid
     scrollY = 0** — uppmätt: rubriken på 206, gråboxen på 310. Sticky var
     dessutom aldrig efterfrågat; det var min egen extra ("samlaren tittar på
     myntet medan hen läser villkoren"). En oombedd finess som bryter en
     uttrycklig linjering är inte en finess.

     Ska den tillbaka måste offseten lösas först — den får inte gälla i vila. */
  .aiwp-has-shop div.product .woocommerce-product-gallery { align-self: start; }
  .aiwp-has-shop div.product .woocommerce-tabs,
  .aiwp-has-shop div.product .related,
  .aiwp-has-shop div.product .upsells { grid-column: 1 / -1; }
}

/* ── Galleriet: samma bricka, i stort format ── */
/* ⚠️ Woos flexslider sätter bredd OCH transform på wrappern med inline-stil via
   JS (den bygger ett karusellspår bredare än behållaren). Utan låsningen nedan
   sköt sidan ut i sidled på 390 px och texten kapades vid högerkanten — mätt på
   dev5. `overflow:hidden` på föräldern är bältet, bredden är hängslena. */
.aiwp-has-shop div.product .woocommerce-product-gallery { overflow: hidden; }

.aiwp-has-shop div.product .woocommerce-product-gallery__wrapper {
  position: relative;
  width: 100% !important;
  max-width: 100%;
  /* 🔴 INGEN PÅTVINGAD KVOT HÄR. Var `var(--shop-ratio, 1/1)`, vilket gjorde
     boxen 616×616 medan fotot är 3:1 — 616×205 centrerat, med **205 px grå
     yta över och under**. Det var den andra halvan av att bilden inte linjerade
     med rubriken.

     Reglaget heter också "Bildformat" med beskrivningen *"gäller listningen"*.
     Att tillämpa det på produktsidans galleri var min egen övertolkning: i
     listningen håller kvoten rutnätet lugnt, på produktsidan beskär eller
     inramar den kundens enda bild av varan. En 3:1-bild beskuren till kvadrat
     hade dolt två tredjedelar av frimärksalbumet.

     Nu hugger boxen om fotot: överkanten är fotots överkant. */
  aspect-ratio: auto;
  border-radius: var(--shop-radius);
  background: var(--shop-tray);
  margin: 0;
  overflow: hidden;
  transform: none !important;
}

/* ── Miniatyrer till vänster ──
   Ställs i Utseende › Anpassa › Webbshop. `body.aiwp-thumbs-left` sätts av
   PHP-lagret; utan den ligger de kvar under bilden som WooCommerce gör.
   Ordningen vänds med `row-reverse` så miniatyrerna hamnar först visuellt
   men SIST i DOM:en — huvudbilden ska läsas först av skärmläsare och av en
   svarsmotor, oavsett var den råkar sitta på skärmen. */
@media (min-width: 861px) {
  .aiwp-thumbs-left .woocommerce-product-gallery {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 1rem;
  }
  .aiwp-thumbs-left .woocommerce-product-gallery__wrapper { flex: 1 1 auto; min-width: 0; }

  .aiwp-thumbs-left .flex-control-thumbs {
    flex: 0 0 74px;
    flex-direction: column;
    margin: 0;
    max-height: 34rem;
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* ⚠️ `static`, inte `absolute`. Det absoluta läget fanns för att fylla
   kvotboxen ovan; utan kvot finns ingen box att fylla, och en absolut ruta
   hade kollapsat wrappern till noll höjd. `place-items: center` var dessutom
   det som centrerade fotot i den grå ytan. */
.aiwp-has-shop div.product .woocommerce-product-gallery__image {
  position: static;
  display: block;
  margin: 0;
  width: 100%;
}

.aiwp-has-shop div.product .woocommerce-product-gallery__image > a {
  display: block;
  line-height: 0;                /* tar bort baslinjeglappet under bilden */
}

/* ⚠️ TREDJE gången samma fälla på en dag. Woos `.woocommerce div.product
   div.images img` är (0,3,3) — fyra klasser i selektorn nedan ger (0,4,2) och
   vinner. Räkna specificiteten INNAN du skriver en regel mot Woo; deras egen
   CSS ligger kvar (bara `woocommerce-layout` är avregistrerad). */
/* `height: auto`, inte `100%`. Den gamla raden var dessutom verkningslös:
   `height: 100%` räknas mot `<a>`, som saknar definierad höjd — så `cover`
   hade ingen yta att täcka och bilden föll tillbaka på sin egen proportion.
   En regel som ser ut att styra men inte gör det är värre än ingen regel. */
.aiwp-has-shop div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--shop-radius);
  margin: 0;
  display: block;
}

/* Woos zoom-länk lägger en lupp i hörnet. Vårt urtag är runt — flytta in den. */
.aiwp-has-shop div.product .woocommerce-product-gallery__trigger {
  top: 8%;
  right: 8%;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 0;
  border-radius: var(--shop-disc);
  border: 1px solid var(--shop-line);
  background: #fff;
  box-shadow: 0 2px 8px rgba(24, 64, 93, .10);
}

.aiwp-has-shop div.product .woocommerce-product-gallery__trigger::before,
.aiwp-has-shop div.product .woocommerce-product-gallery__trigger::after {
  content: none;                    /* Woos egen cirkel + skaft */
}

.aiwp-has-shop div.product .woocommerce-product-gallery__trigger img,
.aiwp-has-shop div.product .woocommerce-product-gallery__trigger svg { display: none; }

.aiwp-has-shop div.product .woocommerce-product-gallery__trigger {
  background-image: var(--ico-loupe);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.15rem;
}

/* Miniatyrerna — små brickor på rad, samma språk som allt annat */
.aiwp-has-shop div.product .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.aiwp-has-shop div.product .flex-control-thumbs li {
  width: 62px;
  margin: 0;
  list-style: none;
}

.aiwp-has-shop div.product .flex-control-thumbs img {
  width: 62px;
  height: 62px;
  object-fit: cover;
  padding: 0;
  border-radius: var(--shop-radius);
  background: var(--shop-tray);
  box-shadow: 0 0 0 1px var(--shop-line);
  opacity: 1;
  cursor: pointer;
  transition: box-shadow .2s var(--shop-ease);
}

@media (min-width: 861px) {
  .aiwp-thumbs-left .flex-control-thumbs li,
  .aiwp-thumbs-left .flex-control-thumbs img { width: 74px; }
  .aiwp-thumbs-left .flex-control-thumbs img { height: 74px; }
}

/* ── Kategorimärket över namnet ── */
.aiwp-shop-badge {
  display: inline-block;
  margin: 0 0 .7rem;
  padding: .28rem .7rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--shop-ink);
  border-radius: var(--shop-radius);
}

.aiwp-shop-badge:hover { background: var(--shop-gold-ink); color: #fff; }

/* ── Leveransraden under köpknappen ──
   Egen rad, inte en punkt i förtroendelistan: leveranstid är det sista en
   köpare kontrollerar innan hen trycker, och ska ligga närmast knappen. */
.aiwp-shop-delivery {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.25rem;
  padding: .8rem 1rem;
  font-size: var(--fs-sm);
  color: var(--text, #2c2c2c);
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  background: #fff;
}

.aiwp-shop-delivery .aiwp-ico { color: var(--shop-gold-ink); }

.aiwp-has-shop div.product .flex-control-thumbs img.flex-active,
.aiwp-has-shop div.product .flex-control-thumbs img:hover {
  box-shadow: var(--shop-recess), 0 0 0 2px var(--shop-gold-edge);
}

/* ── Höger kolumn: rytmen ── */

.aiwp-has-shop div.product .summary > * { margin-left: 0; margin-right: 0; }

.aiwp-has-shop div.product .product_title {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  margin: 0 0 .9rem;
}

/* Priset är sidans andra röst efter namnet. Stort, i tabulära siffror, navy. */
.aiwp-has-shop div.product .summary .price {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--shop-ink);
  line-height: 1.2;
  margin: 0 0 .35rem;
  padding: 0 0 1.35rem;
  border-bottom: 1px solid var(--shop-line);
}

/* "inkl. moms" — momsbasen ska stå explicit, annars gissar både kund och
   svarsmotor. Liten men aldrig dämpad under 5:1.

   🔴 STOD PÅ `var(--fs-sm)` OCH GJORDE INGENTING. `--fs-sm` finns i canonical
   `main.css` men INTE i JMG:s egen — dev5 kör en `main.css` från april som är
   äldre än de tokens temat införde sedan dess. `var()` utan reservvärde blir
   ogiltigt och egenskapen KASTAS, så suffixet ärvde prisets 32 px. Uppmätt:
   priset 32, suffixet 32.

   ⚠️ Samma tystnad drabbar **34 regler** i den här filen (19 × `--fs-sm`,
   7 × `--fs-body`, plus `--lh-*` och `--fs-h*`) — **noll av dem har
   reservvärde.** De är alltså inte "nästan rätt", de har aldrig kört. Se
   CHANGELOG; de tänds medvetet, inte i förbifarten.

   `.5em` i stället för ett token: Robert bad om HALVA storleken, och `em`
   räknas mot prisets egen storlek. Då är halvan halv även om priset ändras. */
.aiwp-has-shop div.product .summary .price small,
.aiwp-has-shop div.product .summary .price .woocommerce-price-suffix {
  display: inline;
  font-family: var(--font-body, inherit);
  font-size: .5em;
  font-weight: 400;
  color: var(--shop-dim);
  margin-left: .45rem;
}

.aiwp-has-shop div.product .woocommerce-product-details__short-description {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text, #2c2c2c);
  margin: 1.35rem 0 1.75rem;
}

.aiwp-has-shop div.product .woocommerce-product-details__short-description > :last-child {
  margin-bottom: 0;
}

/* ── Köpraden ── */
.aiwp-has-shop div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .75rem;
  margin: 0 0 1.75rem;
}

.aiwp-has-shop div.product form.cart::before,
.aiwp-has-shop div.product form.cart::after { content: none; }

.aiwp-has-shop .quantity {
  display: flex;
  align-items: stretch;
}

.aiwp-has-shop .quantity input[type="number"] {
  font-family: inherit;
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--shop-ink);
  width: 4.75rem;
  min-height: 44px;
  padding: .65rem .4rem;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  background: #fff;
}

.aiwp-has-shop .quantity input[type="number"]:focus-visible {
  outline: 2px solid var(--shop-ink);
  outline-offset: 2px;
}

.aiwp-has-shop div.product form.cart .single_add_to_cart_button { flex: 1 1 12rem; }

/* ── Produktsidans köpknapp: samma guld som listningens ──
   Robert 2026-09-03: *"bra även på produktsidan ha denna guldiga knapp"*.

   Det är FÄRGEN som följer med hit, inte måtten. Listningens 12 px och 11/14
   px luft är nedskalade för en fjärdedels spaltbredd; produktsidans köpknapp
   är sidans huvudhandling och behåller knappnivån som är uppmätt på sajtens
   egna knappar (13 px · 600 · 0,52 px · 14/28 · 44 px höjd).

   ⚠️ SPECIFICITET, räknad före regeln skrevs — inte efteråt:
     basregeln  `.aiwp-has-shop button.button.alt`                    (0,3,1)
     denna      `… button.button.alt.single_add_to_cart_button`       (0,4,1)  vinner
   Och hovern MÅSTE skrivas ut. Basens hover är också (0,4,1) men står 400
   rader TIDIGARE i filen — vid lika specificitet vinner den sista, så min
   viloyta hade annars ätit upp hovern helt och knappen aldrig svarat. */
.aiwp-has-shop button.button.alt.single_add_to_cart_button,
.aiwp-has-shop input.button.alt.single_add_to_cart_button,
.aiwp-has-shop a.button.alt.single_add_to_cart_button {
  background: #c18a44;
  border-color: var(--shop-line);
  color: #fff;
}

.aiwp-has-shop button.button.alt.single_add_to_cart_button:hover,
.aiwp-has-shop input.button.alt.single_add_to_cart_button:hover,
.aiwp-has-shop a.button.alt.single_add_to_cart_button:hover {
  background: var(--shop-gold-ink);
  border-color: var(--shop-gold-ink);
  color: #fff;
}

/* ── Förtroenderaden ──
   Kräver markup från inc/woocommerce-design.php. Utan den filen syns ingenting
   här, och det är avsiktligt: CSS ska aldrig hitta på innehåll som inte finns. */
.aiwp-shop-trust {
  display: grid;
  gap: .85rem;
  margin: 0 0 1.75rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--shop-line);
  border-left: 2px solid var(--shop-gold-edge);
  border-radius: var(--shop-radius);
  background: var(--shop-bg);
  list-style: none;
}

.aiwp-shop-trust li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text, #2c2c2c);
}

.aiwp-shop-trust .aiwp-ico {
  color: var(--shop-gold-ink);
  margin-top: .1em;
  width: 1.25em;
  height: 1.25em;
}

.aiwp-shop-trust strong { color: var(--shop-ink); font-weight: 600; }

/* ── Meta längst ned, tyst ── */
.aiwp-has-shop div.product .product_meta {
  font-size: var(--fs-sm);
  color: var(--shop-dim);
  padding-top: 1.25rem;
  border-top: 1px solid var(--shop-line);
}

.aiwp-has-shop div.product .product_meta > span {
  display: block;
  margin-bottom: .3rem;
}

.aiwp-has-shop div.product .product_meta .sku { font-variant-numeric: tabular-nums; }

.aiwp-has-shop div.product .product_meta a {
  color: var(--shop-ink);
  text-decoration-color: var(--shop-line);
  text-underline-offset: 3px;
}

.aiwp-has-shop div.product .product_meta a:hover { text-decoration-color: currentColor; }


/* ═══ 8. FLIKAR, RECENSIONER, RELATERAT ══════════════════════════════════════ */

/* Robert 2026-09-04: *"Flytta upp hela containern med Beskrivning tabbarna ca
   100px"*. Uppmätt före: metans underkant 980, flikarna 1169 — **189 px**.
   Av dem var 80 den här marginalen och 72 rutnätets radavstånd.
   Marginalen ned till ~16 px ger ~90, alltså precis de 100 han bad om. */
.aiwp-has-shop .woocommerce-tabs {
  margin-top: clamp(.5rem, 1.5vw, 1rem);
}

.aiwp-has-shop .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: 0;
  margin: 0 0 2rem;
  border-bottom: 1px solid var(--shop-line);
}

.aiwp-has-shop .woocommerce-tabs ul.tabs::before,
.aiwp-has-shop .woocommerce-tabs ul.tabs::after { content: none; }

/* ⚠️ Woos `.woocommerce div.product .woocommerce-tabs ul.tabs li` är (0,4,3)
   och bär en lavendelgrå pillerbakgrund med rundade hörn. Utan `div.product`
   här blir vår regel (0,3,2) och förlorar — fliken "Recensioner" stod kvar i
   Woos grå, mätt på dev5. */
.aiwp-has-shop div.product .woocommerce-tabs ul.tabs li,
.aiwp-has-shop .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
}

.aiwp-has-shop .woocommerce-tabs ul.tabs li::before,
.aiwp-has-shop .woocommerce-tabs ul.tabs li::after { content: none; }

/* Samma räkning igen: Woos `li a` är (0,4,4). Utan `div.product` blir vår
   (0,3,3) och flikarna tappade all padding — de satt ihop till en enda sträng
   "Beskrivning Recensioner (0)". Mätt på dev5. */
.aiwp-has-shop div.product .woocommerce-tabs ul.tabs li a,
.aiwp-has-shop .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: .8rem 1.15rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--shop-dim);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .18s var(--shop-ease), border-color .18s var(--shop-ease);
}

.aiwp-has-shop .woocommerce-tabs ul.tabs li a:hover { color: var(--shop-ink); }

/* Vald flik: guldkanten är BETYDELSEBÄRANDE, alltså `--shop-gold-edge` (3,5:1)
   och aldrig `--gold` (2,8:1). Färgen ensam räcker inte heller — texten byter
   samtidigt vikt och ton, så valet syns utan att man uppfattar färg. */
.aiwp-has-shop div.product .woocommerce-tabs ul.tabs li.active a,
.aiwp-has-shop .woocommerce-tabs ul.tabs li.active a {
  color: var(--shop-ink);
  border-bottom-color: var(--shop-gold-edge);
}

.aiwp-has-shop .woocommerce-tabs .panel > h2:first-child { margin-top: 0; }

.aiwp-has-shop .woocommerce-tabs table.shop_attributes th { width: 30%; }

/* Recensioner — Woos default är ostylad och drar ned hela sidan */
.aiwp-has-shop #reviews .commentlist { padding: 0; list-style: none; }

.aiwp-has-shop #reviews .comment_container {
  display: flex;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--shop-line);
}

.aiwp-has-shop #reviews .avatar {
  width: 44px; height: 44px;
  border-radius: var(--shop-disc);
  margin: 0;
  position: static;
  float: none;
}

.aiwp-has-shop #review_form .comment-form-rating label,
.aiwp-has-shop #review_form label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--shop-ink);
  display: block;
  margin-bottom: .35rem;
}

.aiwp-has-shop #review_form textarea,
.aiwp-has-shop #review_form input[type="text"],
.aiwp-has-shop #review_form input[type="email"] {
  font-family: inherit;
  font-size: var(--fs-body);
  width: 100%;
  padding: .75rem .85rem;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  background: #fff;
}

.aiwp-has-shop .related > h2,
.aiwp-has-shop .upsells > h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--shop-ink);
  margin: 0 0 1.75rem;
}

.aiwp-has-shop .related,
.aiwp-has-shop .upsells { margin-top: clamp(3rem, 7vw, 5rem); }

/* ⚠️ Relaterat ärver `columns-N` från butiken. Finns bara EN relaterad produkt
   står den ensam i en tredjedel och ser övergiven ut — mätt 2026-09-03. Här är
   auto-fit rätt: relaterat har inget filter som äger talet. */
.aiwp-has-shop .related ul.products,
.aiwp-has-shop .upsells ul.products {
  grid-template-columns: repeat(auto-fit, minmax(190px, 230px));
  justify-content: center;
}

/* …och halvsteget gäller inte här — relaterat är en fotnot, inte en utläggning. */
.aiwp-has-shop .related ul.products li.product,
.aiwp-has-shop .upsells ul.products li.product { transform: none !important; }


/* ═══ 9. VARUKORG, KASSA, MITT KONTO ═════════════════════════════════════════
   Här gäller konvention. En kassa ska vara igenkännbar — vi författar
   utförandet, aldrig mönstret. */

.aiwp-has-shop table.shop_table {
  width: 100%;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: #fff;
}

.aiwp-has-shop table.shop_table th,
.aiwp-has-shop table.shop_table td {
  padding: 1rem;
  font-size: var(--fs-sm);
  border-top: 1px solid var(--shop-line);
  vertical-align: middle;
}

/* Rubrikremsan: marinblå botten, vit text. Robert 2026-09-03 — *"Blå stripe och
   vit text i headerna på denna del alt guld vad som är snyggast, men vara
   konsekvent."* Navy valt framför guld av mätbart skäl: vitt på navy är 10,7:1,
   vitt på guld 3,0:1 och underkänt för text. Konsekvensen gäller alla tabeller
   — varukorg, kassa, mitt konto, orderhistorik. */
.aiwp-has-shop table.shop_table thead th {
  border-top: none;
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--shop-ink);
}

/* Alla belopp i tabulära siffror och högerställda — det är vad en tabell är till
   för. Utan detta går kolumnen inte att summera med ögat. */
.aiwp-has-shop table.shop_table .product-price,
.aiwp-has-shop table.shop_table .product-subtotal,
.aiwp-has-shop table.shop_table td[data-title="Summa"],
.aiwp-has-shop .cart_totals .amount,
.aiwp-has-shop .order-total .amount {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.aiwp-has-shop table.shop_table .product-thumbnail img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  padding: 6px;
  border-radius: var(--shop-disc);
  background: var(--shop-tray);
  box-shadow: var(--shop-recess);
}

.aiwp-has-shop table.shop_table .product-name a {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--shop-ink);
  text-decoration: none;
}

/* Ta bort-krysset — 44 px träffyta trots att glyfen är liten */
.aiwp-has-shop table.shop_table .product-remove a.remove {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  margin: 0 auto;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--shop-dim) !important;
  border-radius: var(--shop-disc);
  background: none;
}

.aiwp-has-shop table.shop_table .product-remove a.remove:hover {
  color: #b3261e !important;
  background: rgba(179, 38, 30, .07);
}

.aiwp-has-shop .cart_totals h2,
.aiwp-has-shop .woocommerce-checkout h3,
.aiwp-has-shop.woocommerce-checkout h3,
.aiwp-has-shop .woocommerce-billing-fields h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--shop-ink);
  margin: 0 0 1.15rem;
}

.aiwp-has-shop .cart_totals .order-total th,
.aiwp-has-shop .cart_totals .order-total td {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--shop-ink);
}

/* ── Formulär ── */
.aiwp-has-shop .form-row { margin-bottom: 1.1rem; }

.aiwp-has-shop .form-row label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--shop-ink);
  margin-bottom: .35rem;
}

.aiwp-has-shop .form-row .required {
  color: #b3261e;
  text-decoration: none;
  border: none;
}

.aiwp-has-shop .form-row input.input-text,
.aiwp-has-shop .form-row textarea,
.aiwp-has-shop .form-row select,
.aiwp-has-shop .select2-container .select2-selection {
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--text, #2c2c2c);
  width: 100%;
  min-height: 44px;
  padding: .7rem .85rem;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  background: #fff;
  transition: border-color .18s var(--shop-ease);
}

.aiwp-has-shop .form-row input.input-text:focus,
.aiwp-has-shop .form-row textarea:focus,
.aiwp-has-shop .form-row select:focus {
  border-color: var(--shop-ink);
  outline: 2px solid var(--shop-ink);
  outline-offset: 1px;
}

/* Woos felmarkering är en röd ram utan förklaring. Ramen räcker inte som enda
   signal — därför även en tydlig etikettfärg. Aldrig färg ensam. */
.aiwp-has-shop .form-row.woocommerce-invalid input.input-text,
.aiwp-has-shop .form-row.woocommerce-invalid select {
  border-color: #b3261e;
}

.aiwp-has-shop .form-row.woocommerce-invalid label { color: #b3261e; }

/* ⚠️ CLEARFIX-PSEUDOELEMENT BLIR RUTNÄTSOBJEKT.
   `.woocommerce::before` och `::after` är WooCommerce gamla clearfix. I en
   grid är de fullvärdiga objekt och lägger beslag på första cellen — menyn på
   Mitt konto hamnade i kolumn 2 och innehållet i den smala kolumn 1.

   Det lömska: `element.children` i JS räknar INTE pseudoelement. Mätningen
   visade två barn medan rutnätet hade tre objekt, och siffrorna gick inte
   ihop förrän jag slutade lita på barnlistan. Uppmätt på dev5 2026-09-03.

   Gäller varje `.woocommerce`-wrapper vi gör till grid. */
.aiwp-has-shop .woocommerce::before,
.aiwp-has-shop .woocommerce::after,
.aiwp-has-shop .woocommerce-MyAccount-navigation ul::before,
.aiwp-has-shop .woocommerce-MyAccount-navigation ul::after,
.aiwp-has-shop form.checkout::before,
.aiwp-has-shop form.checkout::after { content: none; display: none; }


/* ═══ 9b. TVÅ KOLUMNER PÅ DATOR — varukorg OCH kassa ═════════════════════════
   Robert 2026-09-03: *"På desktop för helhetssynen gillar jag bäst 2 kolumns
   med produkterna man skall köra de som ligger ovan till vänster och VARUKORG
   TOTALBELOPP … på högra sidan"* och *"Sama på kassasidan 2-kolumns på desktop
   är mer nice och inte så spretigt."*

   Summan är det kunden återvänder till mellan varje ändring. Ligger den under
   en lång varulista måste hen rulla ned för att se konsekvensen av att ha ändrat
   ett antal. Bredvid, och klistrad, är den alltid i syn. */

@media (min-width: 861px) {

  /* ⚠️ SAMMANSATT SELEKTOR, INGET MELLANSLAG.
     `woocommerce-cart` och `aiwp-has-shop` sitter på SAMMA element — body.
     `.aiwp-has-shop .woocommerce-cart` kräver att den ena ligger INUTI den
     andra och matchar därför noll element. Uppmätt i webbläsaren 2026-09-03:
     descendant 0 träffar, compound 1. Varukorgen låg full bredd trots att
     regeln såg riktig ut. Samma fälla väntar på varje body-klass Woo sätter
     (woocommerce-checkout, woocommerce-account, woocommerce-page). */

  /* ── Varukorgen ── */
  .aiwp-has-shop.woocommerce-cart.aiwp-cart-empty .woocommerce { display: block; }

  .aiwp-has-shop.woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    gap: clamp(1.5rem, 3.5vw, 2.75rem);
    align-items: start;
  }

  /* ⚠️ WooCommerce skriver ALLTID ut `<div class="woocommerce-notices-wrapper">`
     som första barn — oftast tom och osynlig. I en grid är den ändå ett
     rutnätsobjekt och lade beslag på kolumn 1: tabellen hamnade i kolumn 2 och
     rann ut över kanten, totalsumman ramlade ned till rad 2. Uppmätt på dev5.
     En osynlig nod är inte en frånvarande nod. Den ska spänna båda kolumnerna,
     precis som meddelandena den är till för att bära. */
  .aiwp-has-shop.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
  .aiwp-has-shop.woocommerce-cart .woocommerce > .woocommerce-message,
  .aiwp-has-shop.woocommerce-cart .woocommerce > .woocommerce-info,
  .aiwp-has-shop.woocommerce-cart .woocommerce > .woocommerce-error { grid-column: 1 / -1; }

  /* `min-width:0` — utan den vägrar ett rutnätsobjekt krympa under sitt
     min-content, och en tabell med fem kolumner spränger då sin spalt. */
  .aiwp-has-shop.woocommerce-cart form.woocommerce-cart-form { min-width: 0; }
  .aiwp-has-shop.woocommerce-cart form.woocommerce-cart-form table.shop_table { table-layout: fixed; }
  .aiwp-has-shop.woocommerce-cart .product-thumbnail { width: 78px; }
  .aiwp-has-shop.woocommerce-cart .product-remove { width: 44px; }

  .aiwp-has-shop.woocommerce-cart .cart-collaterals {
    width: auto;
    float: none;
    position: sticky;
    top: 6.5rem;
  }

  .aiwp-has-shop.woocommerce-cart .cart-collaterals .cart_totals {
    width: auto;
    float: none;
    padding: 1.4rem;
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    background: var(--shop-bg);
  }

  .aiwp-has-shop.woocommerce-cart .cart-collaterals .cart_totals > h2 { margin-top: 0; }

  /* Panelen har redan en ram — tabellen inuti ska inte ha en till */
  .aiwp-has-shop .cart_totals table.shop_table { border: none; background: none; }
  .aiwp-has-shop .cart_totals table.shop_table thead { display: none; }

  /* "Fortsätt till kassan" full bredd i panelen — det är sidans enda mål */
  .aiwp-has-shop .cart_totals .checkout-button { display: block; width: 100%; }

  /* ── Kassan ── */
  .aiwp-has-shop form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(1.5rem, 3.5vw, 2.75rem);
    align-items: start;
  }

  .aiwp-has-shop form.checkout > .col2-set,
  .aiwp-has-shop form.checkout > .woocommerce-additional-fields { grid-column: 1; }

  .aiwp-has-shop form.checkout > #order_review_heading,
  .aiwp-has-shop form.checkout > #order_review { grid-column: 2; }

  .aiwp-has-shop form.checkout > #order_review_heading { margin-top: 0; }

  .aiwp-has-shop form.checkout > #order_review {
    position: sticky;
    top: 6.5rem;
  }

  /* ⚠️ `.col2-set` är fakturering + leverans SIDA VID SIDA i original. Inuti en
     smalare vänsterkolumn blir de två fälten för trånga — de staplas i stället. */
  .aiwp-has-shop .woocommerce-checkout .col2-set { display: block; }
  .aiwp-has-shop .woocommerce-checkout .col2-set .col-1,
  .aiwp-has-shop.woocommerce-checkout .col2-set .col-1,
  .aiwp-has-shop .woocommerce-checkout .col2-set .col-2 {
    float: none;
    width: auto;
    margin-bottom: 1.75rem;
  }
}

/* Kassans tabell: blå linjer i stället för beige. Robert: *"blå borders
   istället för beige"*. 12 % opacitet — synlig struktur, inte ett rutnät. */
.aiwp-has-shop .woocommerce-checkout table.shop_table,
.aiwp-has-shop.woocommerce-checkout table.shop_table,
.aiwp-has-shop .woocommerce-checkout table.shop_table th,
.aiwp-has-shop.woocommerce-checkout table.shop_table th,
.aiwp-has-shop .woocommerce-checkout table.shop_table td,
.aiwp-has-shop.woocommerce-checkout table.shop_table td,
.aiwp-has-shop .cart_totals table.shop_table th,
.aiwp-has-shop .cart_totals table.shop_table td {
  border-color: rgba(24, 64, 93, .22);
}


/* ═══ 9c. RABATTKODEN ════════════════════════════════════════════════════════
   Robert: *"GULDFÄRG PÅ DENNA 'rabatt' känns bra med guld. Sekundärfärgen då"*
   och *"BLÅA FÄRGEN"* på Uppdatera varukorg.

   Det ger en ärlig hierarki: navy = gå vidare i köpet, guld = gör något extra
   med ordern. Två olika handlingar, två olika färger, och aldrig tvärtom.

   ⚠️ Guldknappen bär `--shop-gold-ink` (#8a5a1c), inte temats `--gold`.
   Vit text på #cb8732 är 3,0:1 och underkänt; på #8a5a1c är den 5,6:1. */

.aiwp-has-shop .coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .6rem;
  margin-bottom: 1.25rem;   /* luften ned till "Uppdatera varukorg" */
}

.aiwp-has-shop .coupon label { display: none; }

.aiwp-has-shop .coupon #coupon_code {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 44px;         /* samma höjd som knappen — de stod i otakt */
  font-family: inherit;
  font-size: 14px;
  padding: .6rem .85rem;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  background: #fff;
}

/* ⚠️ FÄRGEN ÄR ROBERTS, OCH DEN ÄR MÄTT.
   `#c18a44` med vit text ger **3,0:1** — under AA:s 4,5:1 för text. Jag
   bygger den han bad om; talet står här så beslutet är sett och inte glömt.
   Närmaste guld som klarar kravet är `#9c6b28` (4,6:1) och ligger optiskt
   mycket nära. Ett ord räcker för att byta. */
.aiwp-has-shop .coupon button[name="apply_coupon"] {
  flex: 0 0 auto;
  background: #c18a44;
  border-color: transparent;
  color: #fff;
}

.aiwp-has-shop .coupon button[name="apply_coupon"]:hover {
  background: var(--shop-ink);
  border-color: var(--shop-ink);
}

/* "Uppdatera varukorg" — fylld navy, inte kontur */
.aiwp-has-shop button[name="update_cart"] {
  background: var(--shop-ink);
  border-color: var(--shop-ink);
  color: #fff;
}

.aiwp-has-shop button[name="update_cart"]:hover {
  background: var(--shop-gold-ink);
  border-color: var(--shop-gold-ink);
}

.aiwp-has-shop .woocommerce-checkout #payment {
  border-radius: var(--shop-radius);
  background: var(--shop-bg);
  border: 1px solid var(--shop-line);
}

.aiwp-has-shop .woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--shop-line);
}

.aiwp-has-shop .woocommerce-checkout #payment div.form-row { padding: 1.15rem; }

/* Mitt konto — navigationen som en lodrät register i stället för Woos länklista */
.aiwp-has-shop .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  overflow: hidden;
}

.aiwp-has-shop .woocommerce-MyAccount-navigation li + li { border-top: 1px solid var(--shop-line); }

/* Robert 2026-09-03, ur hans devtools. Två tal ändrade mot mitt förslag och
   båda åt samma håll: `var(--fs-sm)` (0,85rem ≈ 13,6px) → **14px** fast, och
   vikt 600 → **500**. Kontomenyn är en LÄSLISTA man rör sig i, inte en rad
   etiketter — större och lättare gör den lugnare att bläddra i. `letter-spacing: 0`
   står utskrivet med flit så ingen ärvd spärrning kan krypa in. */
.aiwp-has-shop .woocommerce-MyAccount-navigation a {
  display: block;
  padding: .85rem 1.1rem;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--shop-ink);
  text-decoration: none;
  border-left: 2px solid transparent;
}

.aiwp-has-shop .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--shop-bg);
  border-left-color: var(--shop-gold-edge);
}

@media (min-width: 861px) {
  /* ⚠️ SAMMANSATT SELEKTOR — samma fälla som varukorgen, och jag lagade bara
     varukorgen först. `woocommerce-account` sitter på BODY, precis som
     `aiwp-has-shop`; en descendant-selektor matchar därför noll element och
     kontosidan låg kvar i en spalt med menyn ovanför texten. Uppmätt på dev5.

     Lärdomen är inte "kom ihåg kontosidan" utan: rättar du en body-klass-fälla,
     sök igenom filen efter ALLA body-klasser samtidigt. De går sönder på exakt
     samma sätt och upptäcks var för sig, en sida i taget. */
  .aiwp-has-shop.woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
  }

  /* Den tomma notisrutan är ett rutnätsobjekt även när den är osynlig — utan
     detta tar den kolumn 1 och navigationen knuffas ned till rad 2. */
  .aiwp-has-shop.woocommerce-account .woocommerce > .woocommerce-notices-wrapper,
  .aiwp-has-shop.woocommerce-account .woocommerce > .woocommerce-message,
  .aiwp-has-shop.woocommerce-account .woocommerce > .woocommerce-error { grid-column: 1 / -1; }

  .aiwp-has-shop .woocommerce-MyAccount-navigation,
  .aiwp-has-shop .woocommerce-MyAccount-content {
    float: none;
    width: auto;
    min-width: 0;
  }

  /* Innehållsytan får en egen ram så den läses som ett arbetsbord bredvid
     menyn, och kan växa nedåt utan att layouten skiftar. */
  .aiwp-has-shop .woocommerce-MyAccount-content {
    padding: 1.5rem;
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    background: #fff;
  }

  .aiwp-has-shop .woocommerce-MyAccount-content > :first-child { margin-top: 0; }
  .aiwp-has-shop .woocommerce-MyAccount-content > :last-child { margin-bottom: 0; }
}


/* ═══ 10. MEDDELANDEN ════════════════════════════════════════════════════════ */

.aiwp-has-shop .woocommerce-message,
.aiwp-has-shop .woocommerce-info,
.aiwp-has-shop .woocommerce-error {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  border: 1px solid var(--shop-line);
  border-top: none;
  border-left: 3px solid var(--shop-ink);
  border-radius: var(--shop-radius);
  background: var(--shop-bg);
  font-size: var(--fs-sm);
  color: var(--text, #2c2c2c);
  padding: 1rem 1.25rem;
  margin: 0 0 1.75rem;
  list-style: none;
}

.aiwp-has-shop .woocommerce-message::before,
.aiwp-has-shop .woocommerce-info::before,
.aiwp-has-shop .woocommerce-error::before { content: none; }

.aiwp-has-shop .woocommerce-message .button,
.aiwp-has-shop .woocommerce-info .button { margin-left: auto; }

.aiwp-has-shop .woocommerce-error { border-left-color: #b3261e; }


/* ═══ 11. TOMMA LÄGEN ════════════════════════════════════════════════════════
   Ett tomt läge är en sida av produkten, inte ett fel.

   ⚠️ FÖRSTA VERSIONEN STAPLADE PSEUDOELEMENT OCH GAV TRE MÄRKEN.
   Den satte `::before` (en bricka) OCH `::after` (ett mynt med negativ
   marginal ovanpå) på TRE selektorer samtidigt — och WooCommerce nästlar
   `.woocommerce-info.cart-empty` INUTI `.wc-empty-cart-message`, så flera av
   dem träffade samma vy. Resultatet blev en lös ruta och två cirklar.
   Uppmätt i renderat läge 2026-09-03.

   Nu: EN selektor, ETT märke, inget överlagringstrick. Woos egen ikonfont
   nollas uttryckligen — den ritar en tredje symbol som annars ligger kvar. */

.aiwp-has-shop .wc-empty-cart-message,
.aiwp-has-shop .woocommerce-no-products-found {
  display: block;
  text-align: center;
  border: none;
  background: none;
  padding: clamp(2.5rem, 7vw, 4.5rem) 1rem;
}

.aiwp-has-shop .wc-empty-cart-message::before,
.aiwp-has-shop .woocommerce-no-products-found::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 1.25rem;
  background-color: var(--shop-dim);
  opacity: .38;
  -webkit-mask: var(--ico-bag) center / contain no-repeat;
          mask: var(--ico-bag) center / contain no-repeat;
}

/* Woos egna symboler — både ikonfonten och den inre infobubblans märke. */
.aiwp-has-shop .wc-empty-cart-message::after,
.aiwp-has-shop .woocommerce-no-products-found::after,
.aiwp-has-shop .wc-empty-cart-message .woocommerce-info::before,
.aiwp-has-shop .wc-empty-cart-message .woocommerce-info::after,
.aiwp-has-shop .woocommerce-info.cart-empty::before,
.aiwp-has-shop .woocommerce-info.cart-empty::after { content: none; display: none; }

/* Återgångsknappen ligger i ett eget `.return-to-shop` UTANFÖR meddelandet —
   den ärvde därför inte centreringen och stod vänsterställd under en centrerad
   text. Centreras uttryckligen i stället för att flyttas i DOM:en. */
.aiwp-has-shop .return-to-shop { text-align: center; margin-top: 1.5rem; }

/* Den inre infobubblan ska inte bära egen ram eller botten i tomt läge. */
.aiwp-has-shop .wc-empty-cart-message .woocommerce-info,
.aiwp-has-shop .woocommerce-info.cart-empty {
  display: block;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  text-align: center;
  color: var(--shop-dim);
}


/* ═══ 12. SMÅSKÄRM ═══════════════════════════════════════════════════════════ */

/* ⚠️ Måste matcha `.columns-N`-reglernas specificitet (0,3,0). En mediafråga är
   INTE starkare än en klass — `.columns-3` (0,3,0) slår `@media … ul.products`
   (0,2,0) och mobilen fick tre kolumner, mätt 2026-09-03. Räkna om innan du
   lägger till en rad här. */
@media (max-width: 600px) {
  .aiwp-has-shop ul.products,
  .aiwp-has-shop ul.products.columns-1,
  .aiwp-has-shop ul.products.columns-2,
  .aiwp-has-shop ul.products.columns-3,
  .aiwp-has-shop ul.products.columns-4,
  .aiwp-has-shop ul.products.columns-5,
  .aiwp-has-shop ul.products.columns-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1rem;
  }

  .aiwp-has-shop ul.products li.product { transform: none; }

  /* ⚠️ Som rutnät rann kategoriraden ut till höger på 390 px — `auto-fit` med
     `minmax(88px,1fr)` plus gap gav tre spår bredare än behållaren, och tredje
     brickan kapades. Mätt på dev5. På mobil är detta en SVEPREMSA i stället:
     inget kapas, och alla sex kategorierna går att nå med tummen. */
  .aiwp-shop-cats {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(-1 * var(--shop-gap));
    margin-right: calc(-1 * var(--shop-gap));
    padding-left: var(--shop-gap);
    padding-right: var(--shop-gap);
  }
  .aiwp-shop-cats::-webkit-scrollbar { display: none; }

  .aiwp-shop-cat {
    flex: 0 0 84px;
    scroll-snap-align: start;
  }

  .aiwp-shop-cat::before,
  .aiwp-shop-cat img { max-width: 72px; }
  .aiwp-shop-cat img { margin-top: calc(-72px - .55rem); }

  /* Köpknappen bröts på TRE rader i tvåkolumnsrutnätet ("Lägg till / i /
     varukorg"). Knappen ska aldrig se sönderklippt ut — mindre typ och tightare
     luft håller den på en eller två rader utan att tappa 44 px träffyta. */
  .aiwp-has-shop ul.products li.product .button {
    width: 100%;
    font-size: var(--fs-xs);
    padding: .7rem .6rem;
    letter-spacing: 0;
  }

  .aiwp-has-shop table.shop_table th,
  .aiwp-has-shop table.shop_table td { padding: .75rem .6rem; }

  /* Köpknappen full bredd — en 44 px-knapp bredvid ett antalsfält blir för smal */
  .aiwp-has-shop div.product form.cart .single_add_to_cart_button { flex: 1 1 100%; }

  .aiwp-has-shop div.product .flex-control-thumbs li,
  .aiwp-has-shop div.product .flex-control-thumbs img { width: 52px; }
  .aiwp-has-shop div.product .flex-control-thumbs img { height: 52px; }
}

/* Mellanläget: två kolumner är rätt på surfplatta i stående, tre blir kramat */
@media (min-width: 601px) and (max-width: 860px) {
  .aiwp-has-shop ul.products.columns-3,
  .aiwp-has-shop ul.products.columns-4,
  .aiwp-has-shop ul.products.columns-5,
  .aiwp-has-shop ul.products.columns-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ═══ 13. KATEGORIHJÄLTEN ════════════════════════════════════════════════════
   Smal delad hero: solid JMG-marinblå till vänster med namn, text och
   underkategorier — kategorins egen bild till höger. Samma grepp som de
   redaktionella sidorna, så butiken känns som en del av sajten och inte som
   ett påhängt system.

   Höjden är låst med `aspect-ratio` och inte med `height`: bilden och texten
   ska hålla samma linje oavsett hur lång beskrivningen är, och en fast höjd i
   px hade spruckit vid första kategorin med två meningar mer. */

/* ⚠️ FLUSH MOT HEADERN. Uppmätt på dev5: `.container.section-pad` bar 96 px
   toppluft och sköt ned hjälten 94 px under headerns underkant. Robert:
   *"fast mot toppen … måste sitta mot toppen"*.

   Luften nollas på BEHÅLLAREN och inte med en negativ marginal på hjälten.
   En negativ marginal hade behövt känna till exakt 96 px, och det talet är
   temats — ändras det till en clamp någon gång spricker vår layout tyst. */
.aiwp-has-hero main .container.section-pad { padding-top: 0; }

/* Produktsidan har ingen hjälte och fick därför `section-pad`s fulla
   `clamp(3rem, 8vw, 6rem)` = 96 px mellan brödsmulan och rubriken.
   Robert 2026-09-04: *"Gap mellan top och content 30px, så dra ihop den hel del"*.

   ⚠️ `.aiwp-has-shop.single-product` är COMPOUND — båda klasserna sitter på
   BODY. Skrivet med mellanslag hade det matchat noll element, precis som
   `.aiwp-has-shop .woocommerce-cart` gjorde 2026-09-03. */
/* 30 → 80 px (Robert 2026-09-04, andra passet: *"dubbla gapet … så den är 80px"*).
   Trettio band ihop brödsmulan och rubriken till ett block; åttio låter rubriken
   vara sidans början igen. */
.aiwp-has-shop.single-product main .container.section-pad { padding-top: 80px; }

/* 🔴 KANT TILL KANT. Robert 2026-09-04: *"Herodelen skall vara 100% ut i
   kanterna, på startsidan och alla kategorisidorna"*.

   Hjälten renderas inuti `.container` (`--container`, alltså min(1280px, 92vw))
   och måste bryta ut ur den. Uträkningen, med `W` = ytan hjälten ska fylla:

     W          = 100vw − railen
     container  = var(--container)
     utbrottet  = (W − container) / 2   på varje sida

   `margin-left: calc(50% − 50vw + rail/2)` är exakt det talet negerat: `50%`
   räknas mot containern, alltså container/2.

   ⚠️ RAILEN MÅSTE DRAS BORT. Butiksytorna har `padding-left: 66px` på BODY för
   vänsterrailen. Utan avdraget hade hjälten glidit in UNDER railen, och railens
   ljusa botten hade lagt sig som en remsa ovanpå den navyblå hjälten.

   ⚠️ `100vw` räknar in den vertikala rullisten (~15 px). Överskottet hamnar i
   högerkanten och klipps av `body { overflow-x: hidden }`. Det är avsiktligt och
   osynligt här — hjälten är en heltäckande färgyta och en bild, inte text. */
.aiwp-cat-hero {
  --rail: 0px;
  display: grid;
  grid-template-columns: 1fr;
  /* Radien är borta: en yta som går ut i kanterna har inga hörn att runda. */
  border-radius: 0;
  overflow: hidden;
  width: calc(100vw - var(--rail));
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
  margin-left: calc(50% - 50vw + var(--rail) / 2);
  background: var(--shop-ink);
}

/* Railen finns bara på dator — samma brytpunkt som railen själv. */
@media (min-width: 1100px) {
  .aiwp-cat-hero { --rail: 66px; }
}

@media (min-width: 861px) {
  .aiwp-cat-hero {
    /* 47/53 och inte 50/50 — texten behöver mindre bredd än bilden tål, och
       en exakt halva läser som en oavsiktlig delning snarare än ett val. */
    grid-template-columns: 47fr 53fr;
    align-items: stretch;

    /* Fast höjd: 322 px uppmätt + 60 som Robert bad om = 382.
       ⚠️ `min-height` och inte `height`. Utseendet är identiskt så länge
       texten får plats, men en verkligt fast höjd hade KAPAT en kategori med
       längre beskrivning — och det syns först när någon skriver den. */
    min-height: 382px;
  }
}

/* ⚠️ TEXTEN FÅR INTE FÖLJA MED UT I KANTEN. Ytan går kant till kant, men
   rubriken ska stå kvar på sidans egen vänsterlinje — annars tappar hjälten
   kontakten med brödsmulan ovanför och innehållet under.

   Vänsterpaddingen är därför utbrottet PLUS den vanliga innerluften. Bilden
   till höger har ingen sådan kompensation: den ska nå ända ut. */
.aiwp-cat-hero__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .9rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  padding-left: calc(
    (100vw - var(--rail, 0px) - var(--container, min(1280px, 92vw))) / 2
    + clamp(1.75rem, 3.5vw, 2.75rem)
  );
  color: #fff;
}

.aiwp-cat-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: #fff;
  margin: 0;
}

/* Beskrivningen är /ainstein-wp:s `.aiwp-shop__intro`, infångad och flyttad hit.
   Den bär sina egna marginaler från temat — de nollas, hjälten äger rytmen. */
.aiwp-cat-hero .aiwp-shop__intro {
  max-width: 46ch;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  /* Bruten vit, inte ren: ren vit brödtext på mättad navy flimrar. */
  color: rgba(255, 255, 255, .82);
}

.aiwp-cat-hero .aiwp-shop__intro > :last-child { margin-bottom: 0; }
.aiwp-cat-hero .aiwp-shop__intro a { color: #fff; text-underline-offset: 3px; }

/* ── Underkategorierna ── */
.aiwp-cat-hero__subs {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.1rem, 2.5vw, 2.1rem);
  margin-top: .5rem;
}

.aiwp-cat-hero__sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  text-decoration: none;
  color: #fff;
  transition: opacity .18s var(--shop-ease);
}

.aiwp-cat-hero__sub:hover { opacity: .72; }

.aiwp-cat-hero__sub:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: var(--shop-radius);
}

/* ⚠️ Ikonerna är navyfärgad streckgrafik på TRANSPARENT botten (kontrollerat:
   PNG färgtyp 6, RGBA, hörnpixel alfa 127). Därför fungerar `invert` — den
   vänder streckets svärta till vitt och lämnar bakgrunden genomskinlig.
   Hade filerna haft en ifylld botten blivit det en vit kloss i stället, och
   då är enda vägen nya filer. Kontrollera alfakanalen innan du lägger till
   en ny kategoriikon. */
.aiwp-cat-hero__sub img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  margin-bottom: .45rem;
  filter: brightness(0) invert(1);
}

.aiwp-cat-hero__sub-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.25;
}

.aiwp-cat-hero__sub-count {
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .72);
}

/* ── Bilden ── */
.aiwp-cat-hero__media {
  position: relative;
  min-height: 200px;
}

.aiwp-cat-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}

/* Mjuk övergång mot det blå så skarven inte blir en linje. Bara på bredd —
   staplat ligger bilden ovanför texten och tonar då åt fel håll. */
@media (min-width: 861px) {
  .aiwp-cat-hero__media::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 72px;
    z-index: 2;
    background: linear-gradient(to right, var(--shop-ink), transparent);
  }
}

@media (max-width: 860px) {
  .aiwp-cat-hero { grid-template-columns: 1fr; }
  .aiwp-cat-hero__media { order: -1; aspect-ratio: 16 / 9; min-height: 0; }
}

/* ⚠️ Kategoribrickorna doldes när hjälten tog över uppgiften.
   `/ainstein-wp` renderar dem på `woocommerce_before_shop_loop` prio 15, och
   hjälten visar nu samma kategorier snyggare och högre upp. Två rader med
   samma länkar är inte en design, det är en olöst dubblering.

   ⚠️ Detta döljer dem VISUELLT — länkarna ligger kvar i HTML:en. Den rena
   fixen är en rad i deras fil som hoppar över blocket när hjälten finns.
   Överlämnas till /ainstein-wp; tills dess kostar det några dubbla länkar,
   inte dubbel prosa. */
.aiwp-has-shop .aiwp-shop-cats { display: none; }


/* ═══ 14. BUTIKENS FRAMSIDA ═══════════════════════════════════════════════════
   Kräver markup från inc/woocommerce-design.php. Utan den syns ingenting här.

   Sidan har EN oregelbundenhet och det är förtroendebandet som bryter hjältens
   underkant. Allt annat håller sin ruta. Två brott hade blivit en stil; ett är
   ett grepp.

   Rytmen är avsiktligt ojämn — sektionerna andas olika:
     band       tätt, informativt, sitter i skarven
     kategorier VITT och luftigt, sidans andrum
     ruta       navy, tyngden, sidans enda mörka yta efter hjälten
     slider     ljus igen, horisontell rörelse mot allt annat som är vertikalt
   ═══════════════════════════════════════════════════════════════════════════ */

/* Roberts värde 2026-09-03, ordagrant. Mitt var `clamp(3.5rem, 8vw, 6.5rem)`.
   Skillnaden ligger inte i taket — det är samma 6,5rem — utan i MELLANRUMMET:
   8vw slog i taket redan vid 1300 px, så nästan varje skärm fick maxluft.
   4vw ger 57,6 px vid 1440 i stället för 104, och når taket först vid 2600 px.
   Sidan blir tätare där folk faktiskt sitter, och luftig först på riktigt
   stora skärmar. Golvet 2,5rem gäller mobilen. */
.aiwp-front {
  --front-pad: clamp(2.5rem, 4vw, 6.5rem);
}

/* Gemensam avdelarrubrik: guld, spärrad, versaler, med linjer ut åt sidorna.
   Spärrningen är hög med flit (.28em) — en kort versalrad utan spärr läser som
   en etikett, med spärr läser den som en gravyr. Det är butikens ton. */
.aiwp-front-rubrik {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin: 0 0 clamp(2rem, 4vw, 3.25rem);
  font-family: var(--font-display);
  font-size: clamp(.86rem, 1.5vw, 1rem);
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  /* ⚠️ `--shop-gold-ink` (5,6:1), inte temats `--gold` (2,8:1). Det här är en
     RUBRIK och alltså information — dekorguldet får bära linjerna, aldrig
     bokstäverna. Samma regel som brödsmulans avdelare, andra hållet. */
  color: var(--shop-gold-ink);
}

/* Linjerna vid sidan om ordet. Robert 2026-09-03: *"snygg fadas från 2px guld
   i tjocklek mot transparent 150px ut från varje sida"*.

   ⚠️ En TONAD linje, inte en tonad opacitet. `opacity` på hela strecket hade
   gjort det jämngrått; en `linear-gradient` låter guldet vara fullt mättat där
   det möter ordet och lösa upp sig i ingenting utåt. Strecket ser då ut att
   VÄXA ur rubriken i stället för att ligga bredvid den.

   Fast 150px, inte `flex: 1` — annars sträcks de över hela spaltbredden och
   blir en tabellinje. Raden centreras därför i stället för att fyllas ut. */
.aiwp-front-rubrik { justify-content: center; }

.aiwp-front-rubrik::before,
.aiwp-front-rubrik::after {
  content: "";
  flex: 0 0 150px;
  max-width: 22vw;                       /* på mobil finns inte 150px att ge bort */
  height: 2px;
}

.aiwp-front-rubrik::before {
  background: linear-gradient(to right, transparent, var(--shop-gold-dec));
}

.aiwp-front-rubrik::after {
  background: linear-gradient(to left, transparent, var(--shop-gold-dec));
}


/* ── 14a. FÖRTROENDEBANDET ────────────────────────────────────────────────────
   ⚠️ ÖVERLAPPET ÄR EN NEGATIV MARGINAL, INTE `position:absolute`.
   Absolut positionering hade tagit plattan ur flödet, och då måste hjälten få
   en botten-padding som exakt matchar plattans höjd — ett tal som blir fel så
   fort någon skriver en längre underrad. Med negativ marginal flyttar sig
   sidan under av sig själv. */
.aiwp-front-usp {
  position: relative;
  z-index: 2;
  width: var(--container);
  margin: calc(-1 * clamp(2.5rem, 5vw, 4rem)) auto 0;
}

.aiwp-front-usp__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2vw, 2rem);
  list-style: none;
  background: #fff;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  /* Enda skuggan på hela framsidan. Plattan SVÄVAR över hjälten och måste
     säga det; överallt annars bär hårlinjer djupet. En skugga som används en
     gång betyder något. */
  box-shadow: 0 18px 44px rgba(24, 64, 93, .13);
}

.aiwp-front-usp__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  padding: 0 clamp(.6rem, 1.5vw, 1.25rem);
  text-align: center;
}

/* Hårlinjer MELLAN posterna, inte runt dem. `:not(:first-child)` i stället för
   `:not(:last-child)` med högerkant — då hamnar linjen alltid i skarven och
   aldrig som en lös kant längst ut. */
.aiwp-front-usp__item:not(:first-child) { border-left: 1px solid var(--shop-line); }

.aiwp-front-usp__item .aiwp-ico {
  width: 30px;
  height: 30px;
  color: var(--shop-ink);
  margin-bottom: .2rem;
}

.aiwp-front-usp__title {
  font-family: var(--font-display);
  font-size: clamp(.86rem, 1.4vw, .98rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--shop-ink);
}

.aiwp-front-usp__text {
  font-size: .78rem;
  line-height: 1.5;
  color: var(--shop-dim);
}


/* ── 14b. KATEGORIER ──────────────────────────────────────────────────────────
   *"enkelt och minimalistiskt"* — ikon och namn, ingenting annat. Ingen ram,
   ingen bricka, inget antal. Ikonerna är stora nog att bära sektionen själva,
   och det är just frånvaron av ram som gör dem stora. */
.aiwp-front-cats {
  width: var(--container);
  margin: 0 auto;
  padding: var(--front-pad) 0;
}

/* ⚠️ `stretch`, inte `start` — och det är en FÖLJD av att halvsteget togs bort.
   Med förskjutna rutor spelade olika höjd ingen roll; i ett rakt led blir två
   ramar av olika höjd genast synligt som ett slarvfel. Namnen är olika långa
   ("Frimärken" mot "Mynt") och en rubrik som radbryts hade gjort sin ruta
   högre. `stretch` ger alla ramar samma höjd oavsett text. */
.aiwp-front-cats__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: stretch;
}

/* Rutan. 1 px navy i vila — inte guld: en vilande guldram hade gjort alla tre
   kategorierna lika hett markerade, och då finns ingenting kvar att markera MED
   vid hover. Vilan ska vara tyst. */
.aiwp-front-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  padding: clamp(1.5rem, 3vw, 2.6rem) clamp(1rem, 2vw, 2rem);
  text-decoration: none;
  color: var(--shop-ink);
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  transition: border-color .3s var(--shop-ease);
}

/* ── Ramen som ritar sig ──────────────────────────────────────────────────────
   Roberts önskemål: 1 px blå i vila → 3 px guld som animeras RUNT vid hover →
   tillbaka till blå när musen lämnar.

   SVG:n ligger ovanpå rutans egen kant och täcker exakt samma rektangel.
   `preserveAspectRatio="none"` gör att 0–100-koordinaterna sträcks till rutans
   verkliga mått; `vector-effect: non-scaling-stroke` gör att strecket ändå
   förblir 3 px och inte blir ovalt av sträckningen. Utan den paret hade
   ramen varit tjockare på kortsidorna än på långsidorna. */
/* 🔴 `width` OCH `height` MÅSTE SKRIVAS UT. `inset: -1px` räcker INTE.
   En `<svg>` med `viewBox` är ett ERSATT element med ett inneboende
   bildförhållande (här 1:1), och Chrome låter förhållandet vinna över
   inset-tvånget när höjden är `auto`. Uppmätt på dev5: rutan var 389×286 men
   SVG:n blev 389×389, och banan slutade på x=308 i stället för 502 — ramen
   satt varken på rutans kant eller ens innanför den.

   Jag hade calc-raderna först, tog bort dem som "överflödiga eftersom inset
   redan sätter alla fyra sidorna", och införde felet själv. För ett ersatt
   element är de inte överflödiga. */
.aiwp-front-cat__frame {
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);        /* +2 = rutans egna 1 px kant på var sida */
  height: calc(100% + 2px);
  pointer-events: none;
  overflow: visible;              /* strecket är centrerat på banan; halva ligger utanför */
}

.aiwp-front-cat__frame path {
  fill: none;
  stroke: var(--shop-gold-dec);
  /* Robert 2026-09-04: *"blir lite för mkt, kör guldstrecket lika brett som den
     blåa tunna"*. 3 px var min tolkning av hans första skiss; med rutorna
     inramade blev tre gånger tjockleken en markering som skrek. Nu byter linjen
     bara FÄRG och RIKTNING, inte vikt — rörelsen bär markeringen ensam.
     ⚠️ Talet måste följa rutans egen `border-width`. Skiljer de sig hoppar
     ramen i tjocklek i samma ögonblick som guldet tar över. */
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  /* `round` på hörnen för att rutan har `--shop-radius` (3px) — en vass
     stroke-knut i ett rundat hörn hänger utanför kurvan. */
  stroke-linejoin: round;
  stroke-linecap: round;
  /* Banan är normerad till längden 1 av `pathLength`, så offset 1 = osynlig
     och 0 = helt uppritad — oberoende av rutans storlek. */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .38s var(--shop-ease);
}

/* "snabbt" — 380 ms för ett halvt varv. Båda halvorna ritas samtidigt från
   nederkantens mitt och möts i toppen. */
.aiwp-front-cat:hover .aiwp-front-cat__frame path,
.aiwp-front-cat:focus-visible .aiwp-front-cat__frame path { stroke-dashoffset: 0; }

/* Tillbakavägen är LÅNGSAMMARE än framvägen. Guldet ska rusa fram och släppa
   taget motvilligt — går båda lika fort känns det som en strömbrytare, och det
   var inte vad han bad om. Kurvan är utgångens, samma som sidolådans. */
.aiwp-front-cat .aiwp-front-cat__frame path {
  transition-duration: .55s;
  transition-timing-function: var(--shop-ease-exit);
}

.aiwp-front-cat:hover .aiwp-front-cat__frame path {
  transition-duration: .38s;
  transition-timing-function: var(--shop-ease);
}

/* Den blå kanten dras undan medan guldet ritas, så de aldrig ligger dubbelt. */
.aiwp-front-cat:hover { border-color: transparent; }

/* 🔴 HALVSTEGET ÄR BORTTAGET 2026-09-04. Robert: *"lägga kategorierna i linja,
   få upp den mellersta kategorin"*.

   Jag argumenterade för det två gånger — att tre linjeikoner på vit botten är
   en annan sak än tolv runda produktskivor, och att förskjutningen där ger rytm
   i stället för stök. Han såg det renderat och valde rakt led. **Det är hans
   beslut och det står över mitt resonemang.**

   Vad som ändrades med det: raden gick från `align-items: start` till `stretch`,
   se rutnätsregeln ovan. Ska halvsteget någon gång tillbaka måste den ändras
   med — annars får ett rakt led rutor av olika höjd. */

/* Ikonen är maskad, alltså färgbar — den ärver navy i vila och guld på hover.
   En `<img>` hade suttit fast i sin egen färg och hovern blivit en storleks-
   ändring i stället för en tonändring. */
.aiwp-front-cat__ico {
  width: clamp(96px, 12vw, 150px);
  height: clamp(96px, 12vw, 150px);
  background-color: currentColor;
  -webkit-mask: var(--aiwp-cat-ico) center / contain no-repeat;
          mask: var(--aiwp-cat-ico) center / contain no-repeat;
  transition: transform .32s var(--shop-ease);
}

.aiwp-front-cat__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 400;
  line-height: 1.2;
  transition: color .2s var(--shop-ease);
}

/* Hovern lyfter ikonen 6px och värmer den till guld. Namnet följer med i färg
   men står stilla — rör sig båda blir det en studs, rör sig ingen händer inget.
   `--shop-gold-ink` även här: namnet är en länktext. */
.aiwp-front-cat:hover .aiwp-front-cat__ico { transform: translateY(-6px); }
.aiwp-front-cat:hover .aiwp-front-cat__name,
.aiwp-front-cat:hover .aiwp-front-cat__ico { color: var(--shop-gold-ink); }

.aiwp-front-cat:focus-visible {
  outline: 2px solid var(--shop-ink);
  outline-offset: 6px;
  border-radius: var(--shop-radius);
}


/* ── 14c. DEN REDAKTIONELLA RUTAN ─────────────────────────────────────────────
   Sidans enda mörka yta efter hjälten, och full bredd. Att den går kant till
   kant är vad som gör den till en paus i stället för ännu ett kort. */
.aiwp-front-feature {
  background: var(--shop-ink);
  color: #fff;
  padding: var(--front-pad) 0;
}

.aiwp-front-feature__inner {
  width: var(--container);
  margin: 0 auto;
  display: grid;
  /* Asymmetriskt med flit: 5:7 i stället för 1:1. En jämn delning läser som en
     tabell, en ojämn läser som en komposition — och texten är det som ska
     läsas, alltså får den den större halvan. */
  /* 🔴 `minmax(0, …)` PÅ BÅDA SPÅREN — INTE bara `5fr 7fr`.
     Ett gridspår har `min-width: auto`, alltså minst sitt innehålls
     min-content. Bilden serveras i 1536 px bredd, så spåret vägrade krympa
     under det och sprängde hela sidan: uppmätt `scrollWidth - clientWidth`
     = **1679 px** direkt efter att jag bytt till en handskriven `<img>` med
     `width`-attribut.

     ⚠️ Bilden RENDERADES korrekt i 510 px hela tiden — det var spåret som
     blåste ut, inte bilden. Ett mått på rätt element hade sagt "allt är bra".
     Samma klass av fel som AEOCrawlers radar 2026-07-21. */
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  /* ⚠️ `stretch`, INTE `center`. Med `center` fick bildcellen bara sin egen
     höjd och bilden låg som en remsa mitt i navyn med tomrum över och under —
     Robert: *"Bra om vi kan ha en mer täckande cover bild, som täcker ytan"*.
     `stretch` ger cellen radens fulla höjd, och först DÅ har `height: 100%`
     på bilden något att räkna mot. Texten centreras separat nedan, så
     ändringen träffar bara bilden. */
  align-items: stretch;
}

/* Utan bild ska texten ta hela bredden, inte 5/12 av den med ett tomt spår
   bredvid. Ett rutnät reserverar sina kolumner även när ingenting fyller dem —
   samma fälla som Woos `::before` på Mitt konto: en frånvarande nod tar ändå
   plats om spåret är utskrivet. */
.aiwp-front-feature__inner:not(:has(.aiwp-front-feature__media)) {
  grid-template-columns: 1fr;
}

/* Bilden fyller cellen. `min-height` är ett GOLV för det fall texten är kort —
   utan det krymper raden till textens höjd och bilden blir en remsa igen, fast
   av motsatt orsak. */
.aiwp-front-feature__media {
  display: flex;
  min-width: 0;          /* bältet till hängslet ovan — flexbarn har samma auto-minimum */
  min-height: clamp(240px, 26vw, 380px);
}

.aiwp-front-feature__media img {
  width: 100%;
  max-width: 100%;       /* CAPEN, inte bara min-width — se AEOCrawler v1.59.3 */
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--shop-radius);
  /* Ramen Robert lämnade åt mig: en enda guldhårlinje. På navy behöver bilden
     en kant för att inte flyta ut i bakgrunden, men en tjock ram hade gjort
     den till ett inramat fotografi i stället för en yta. Guldet knyter den
     till förtroenderadens vänsterkant, som använder samma token. */
  border: 1px solid var(--shop-gold-edge);
}

/* Texten centreras i sin egen cell nu när raden sträcks. Utan detta hade den
   klistrats mot överkanten så fort bilden blev högre än texten. */
.aiwp-front-feature__body { align-self: center; }

.aiwp-front-feature__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: .04em;            /* spärrad, som skissen */
  color: #fff;
  margin: 0 0 1rem;
}

.aiwp-front-feature__text {
  max-width: 62ch;                  /* läsradens gräns, inte en smaksak */
  font-size: var(--fs-body);
  line-height: 1.75;
  color: rgba(255, 255, 255, .82);
  margin: 0 0 1.5rem;
}

/* Internlänkarna. Robert: *"lite internlänkar osv."* — de är inte dekor. Det
   är enda stället på framsidan där butiken pekar in i sitt eget innehåll, och
   det är precis vad en svarsmotor följer när den ska förstå vad sajten täcker.
   Därför riktiga <a> i markup, aldrig en JS-driven meny. */
.aiwp-front-feature__links {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aiwp-front-feature__links a {
  display: inline-block;
  padding: 8px 15px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--shop-radius);
  transition: background .18s var(--shop-ease), border-color .18s var(--shop-ease);
}

/* Guldet fyller på hover. `--shop-gold-dec` duger här eftersom texten blir vit
   PÅ guldet, inte guld på navy — det är samma nivå som sajtens egen
   primärknapp, den medvetna avvikelsen i §6. */
.aiwp-front-feature__links a:hover,
.aiwp-front-feature__links a:focus-visible {
  background: var(--shop-gold-dec);
  border-color: var(--shop-gold-dec);
  outline: none;
}


/* ── 14d. PRODUKTSLIDERN ──────────────────────────────────────────────────────
   Ren scroll-snap. Webbläsaren kan redan horisontell scroll — med tangentbord,
   pekskärm och rullhjul — så knapparna är en GENVÄG, inte mekaniken. Faller JS
   bort går slidern fortfarande att använda; det är hela skälet att bygga den
   så här och inte med ett bibliotek. */
.aiwp-front-slider {
  width: var(--container);
  margin: 0 auto;
  padding: var(--front-pad) 0;
}

.aiwp-front-slider__head {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Rubriken tappar sin högra linje här — knapparna tar den platsen, och två
   avslutningar på samma rad hade slagits om uppmärksamheten. */
.aiwp-front-slider__head .aiwp-front-rubrik {
  flex: 1;
  margin-bottom: 0;
  justify-content: flex-start;   /* rubriken är vänsteranslagen här, knapparna tar högerkanten */
}

.aiwp-front-slider__head .aiwp-front-rubrik::after { display: none; }

.aiwp-front-slider__nav { display: flex; gap: .5rem; flex: none; }

.aiwp-front-slider__btn {
  display: grid;
  place-items: center;
  width: 44px;                      /* 44 px = tumstorlek, inte en slump */
  height: 44px;
  background: transparent;
  border: 1px solid var(--shop-line);
  border-radius: var(--shop-radius);
  color: var(--shop-ink);
  cursor: pointer;
  transition: background .18s var(--shop-ease), color .18s var(--shop-ease),
              border-color .18s var(--shop-ease);
}

.aiwp-front-slider__btn:hover:not([disabled]) {
  background: var(--shop-ink);
  border-color: var(--shop-ink);
  color: #fff;
}

/* Slut på spåret. Nedtonad, inte borttagen — en knapp som försvinner flyttar
   den kvarvarande i sidled och gör gränssnittet ostadigt. */
.aiwp-front-slider__btn[disabled] {
  opacity: .32;
  cursor: default;
}

.aiwp-front-slider__btn.is-prev .aiwp-ico { transform: rotate(180deg); }

/* 🔴 SPÅRBREDDEN MÅSTE VARA FAST. INTE `minmax()`, INTE `1fr`.
   Uppmätt på dev5 efter första deployen: `minmax(210px, 1fr)` respektive
   `minmax(0, calc(25% …))` gav kort på **83 px** och `scrollWidth === clientWidth`
   — alltså ingen scroll alls, och båda knapparna släckta.

   Orsaken är att en grid FÖRDELAR sitt utrymme. `1fr` betyder "dela på det som
   finns", och `minmax(0, …)` säger uttryckligen att noll är ett godtagbart
   minimum. Tolv spår i en 1280 px behållare krympte därför till 83 px var i
   stället för att spilla över kanten. En slider bygger på att innehållet ÄR
   bredare än behållaren; med en flexibel spårbredd kan det aldrig bli det.

   ⚠️ Detta är inte synligt utan att mäta. Sidan såg helt rimlig ut — tolv små
   kort på en rad läser som ett designval, inte som en trasig karusell. */
.aiwp-front-slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 210px;
  gap: var(--shop-gap);
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0 0 .5rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.aiwp-front-slider__track::-webkit-scrollbar { display: none; }

.aiwp-front-slider__track:focus-visible {
  outline: 2px solid var(--shop-ink);
  outline-offset: 4px;
}

/* Fyra kort i vyn, med de tre mellanrummen avräknade — samma räkning som
   rutnätet på kategorisidorna gör, så ett kort i slidern är exakt lika brett
   som ett kort i listningen. Talet är FAST: se varningen ovan. */
@media (min-width: 900px) {
  .aiwp-front-slider__track {
    grid-auto-columns: calc((100% - 3 * var(--shop-gap)) / 4);
  }
}

.aiwp-front-slide { scroll-snap-align: start; }

.aiwp-front-slide a {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  text-decoration: none;
  color: var(--shop-ink);
}

.aiwp-front-slide__media {
  display: block;
  overflow: hidden;
  border-radius: var(--shop-radius);
  background: var(--shop-tray);
  aspect-ratio: var(--shop-ratio);
}

.aiwp-front-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--shop-ease);
}

/* Bilden andas 3 % vid hover. Kortet självt står stilla — `scale` på hela
   kortet är default-stackens enda rörelseidé och det är precis den vi inte
   ska använda. Rörelsen sitter i materialet, inte i rutan. */
.aiwp-front-slide a:hover .aiwp-front-slide__media img { transform: scale(1.03); }

.aiwp-front-slide__name {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.35;
}

.aiwp-front-slide__price {
  font-size: .9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--shop-ink);
}

.aiwp-front-slide__price del { display: none; }   /* i slidern visas gällande pris */

.aiwp-front-slide a:focus-visible {
  outline: 2px solid var(--shop-ink);
  outline-offset: 4px;
  border-radius: var(--shop-radius);
}


/* ── 14e. SMÅSKÄRM ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* Fyra poster i bredd blir fyra ordstaplar. Två och två, och hårlinjerna
     räknas om: vänsterkant på varannan, överkant på nedre raden. */
  .aiwp-front-usp__list { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0; }
  .aiwp-front-usp__item:not(:first-child) { border-left: none; }
  .aiwp-front-usp__item:nth-child(even) { border-left: 1px solid var(--shop-line); }

  .aiwp-front-feature__inner { grid-template-columns: 1fr; }
  .aiwp-front-feature__media img { max-height: 220px; }
}

@media (max-width: 560px) {
  /* Överlappet tas bort helt. På en smal skärm ligger plattan över hjältens
     TEXT i stället för dess underkant, och då döljer den innehåll i stället
     för att binda ihop två sektioner. */
  .aiwp-front-usp { margin-top: clamp(1.5rem, 5vw, 2rem); }
  .aiwp-front-usp__list { box-shadow: none; }

  .aiwp-front-rubrik { letter-spacing: .2em; }
}

/* Ingen av rörelserna ovan är informationsbärande — de kan alla stängas av
   utan att något går förlorat. Därför tas de bort helt, inte kortas ned. */
@media (prefers-reduced-motion: reduce) {
  .aiwp-front-cat__ico,
  .aiwp-front-slide__media img { transition: none; }
  .aiwp-front-cat:hover .aiwp-front-cat__ico { transform: none; }
  .aiwp-front-slide a:hover .aiwp-front-slide__media img { transform: none; }
  .aiwp-front-slider__track { scroll-behavior: auto; }
}


/* ═══ 15. KASTET MOT KORGEN ═══════════════════════════════════════════════════
   Kräver skriptet i inc/woocommerce-design.php. Klonen skapas och tas bort där;
   här står bara hur den ser ut medan den flyger.

   `position: fixed` med `left/top` satta i px från källans `getBoundingClientRect()`
   — alltså vyns koordinater, inte dokumentets. Klonen ligger utanför allt annat
   flöde och kan därför inte påverka layouten den lämnar. */
.aiwp-fly {
  position: fixed;
  z-index: 950;                 /* över panelerna (904) men under inget annat */
  margin: 0;
  padding: 0;
  object-fit: cover;
  border-radius: var(--shop-radius, 3px);
  box-shadow: 0 14px 34px rgba(24, 64, 93, .28);
  pointer-events: none;
  will-change: transform, opacity;
}

/* Korgen tar emot. En kort stöt, inte en studs — varan har landat, ikonen ska
   kvittera det och gå vidare. Skalan går till 1,22 och tillbaka på 420 ms. */
.aiwp-chrome [data-aiwp-open="bag"].is-bumped,
[data-aiwp-open="bag"].is-bumped {
  animation: aiwp-bump .42s var(--shop-ease, cubic-bezier(.2, 0, 0, 1));
}

@keyframes aiwp-bump {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* Knappen medan hämtningen pågår. Woos egen `.loading` ritar en spinner vi inte
   vill ha; det här är samma besked på butikens språk — knappen dämpas och
   slutar ta emot klick, inget mer. */
.aiwp-has-shop .single_add_to_cart_button.loading {
  opacity: .72;
  pointer-events: none;
}

.aiwp-has-shop .single_add_to_cart_button.loading::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  [data-aiwp-open="bag"].is-bumped { animation: none; }
}