/* ==========================================================================
   KVIST – design tokens
   Ljust läge. Vit header (för logotypskompatibilitet).
   ========================================================================== */

:root{
  color-scheme: var(--color-scheme, light);
  --paper:      #FBF9F4;
  --paper-dim:  #F3EFE5;
  --ink:        #24231F;
  --ink-soft:   #57554C;
  --ink-faint:  #9C978A;
  --moss:       #3F4C39;
  --moss-deep:  #2E3729;
  --slate:      #5C6B73;
  --sand:       #E7DFCC;
  --sand-line:  #D9CFB6;
  --white:      #FFFFFF;
  --danger:     #A3402F;
  --danger-bg:  #F7E7E2;
  --danger-border: #E9C6BC;
  --success:      #2E3729;
  --success-bg:   #E7EDE3;
  --success-border: #CBDABF;
  --star:       #C9932E;
  --info:       #2E4C7A;
  --info-bg:    #E3EAF5;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --radius: 2px;

  /* Sidfoten har EGNA tokens (inte bara --ink återanvänt) - annars
     skulle ett genuint mörkt tema (där --ink blir LJUS istället för
     mörk) göra sidfoten bakvänd: en ljus platta mitt i en mörk sida.
     Varm-temats värden här matchar EXAKT de tidigare hårdkodade
     färgerna, för att inte ändra något visuellt för standardtemat. */
  --footer-bg:          #24231F;
  --footer-heading:     #FFFFFF;
  --footer-text:        #C9C6BC;
  --footer-text-hover:  #FFFFFF;
  --footer-accent:      #9BB08B;
  --footer-border:      #3A3A34;
  --footer-muted:       #8C8A80;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  background: var(--paper);
  /* Rutmönster - MEDVETET via variabler med säkra fallback-värden
     (none/auto) så bara teman som uttryckligen sätter dessa två
     tokens (just nu bara "Grafisk") faktiskt visar något - övriga
     teman påverkas inte alls, ren no-op. */
  background-image: var(--body-bg-image, none);
  background-size: var(--body-bg-size, auto);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }

.container-xl{
  max-width: 1240px;
  /* Bootstraps EGNA regler för padding/bredd/centrering på den här
     klassen kommer via deras CDN - om den av någon anledning inte
     hinner ladda (långsam mobilanslutning, en annonsblockerare, ett
     tillfälligt nätverksstrul) skulle HELA layouten falla ihop utan
     dessa, eftersom .row:s inbyggda negativa marginaler (också från
     Bootstrap) då inte längre matchas av någon kompenserande padding
     här - resultatet blir precis den horisontella scroll-buggen på
     mobil som annars är mycket svår att felsöka. Definierar dem
     alltså SJÄLVA här också, som en garanterad, CDN-oberoende bas -
     Bootstraps egna regler (om de laddar) har exakt samma
     specificitet och skriver bara över samma värden, ingen konflikt.
  */
  width: 100%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  margin-left: auto;
  margin-right: auto;
}

/* Extra säkerhetsnät mot horisontell scroll på mobil, oavsett orsak -
   en oskalad bild (t.ex. en produktbild med stor originalupplösning)
   är annars den vanligaste boven. */
img, svg, video{ max-width: 100%; height: auto; }
html, body{ overflow-x: hidden; max-width: 100vw; }

/* ---------- Eyebrow / utility label ---------- */
.eyebrow{
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}
.eyebrow.on-moss{ color: var(--paper); }

/* ---------- Signature: handstitch underline ---------- */
.stitch{
  display: inline-block;
  margin-top: 10px;
}
.stitch svg{ display:block; }

h1,h2,h3,.font-display{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.section-heading{
  margin-bottom: 2.5rem;
}
.section-heading h2{
  font-size: clamp(1.7rem, 2.2vw, 2.3rem);
  margin: 0.35rem 0 0;
}
.section-heading p{
  color: var(--ink-soft);
  max-width: 46ch;
  margin-top: 0.6rem;
}

/* ---------- Header (VIT bakgrund) ---------- */
.site-header{
  background: var(--white);
  border-bottom: 1px solid var(--sand-line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-topbar{
  background: var(--moss);
  color: var(--paper);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}
.header-topbar .container-xl{
  padding-top: 6px;
  padding-bottom: 6px;
}

.brandmark{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.55rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.brandmark .dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--moss);
  display: inline-block;
}

.main-nav{
  font-size: 0.92rem;
  font-weight: 500;
}
.main-nav .nav-link{
  color: var(--ink);
  padding: 0.4rem 0.9rem;
  position: relative;
}
.main-nav .nav-link.active{ color: var(--moss); }
.main-nav .nav-link:hover{ color: var(--moss); }

/* ---------- Undermenyer (dropdown) - Menu-modulens huvudpunkter med
   barn ---------- */
.dropdown-menu{
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius);
  box-shadow: 0 10px 24px -12px rgba(0,0,0,0.14);
  padding: 0.4rem;
  /* INGET margin-top här (var 0.3rem tidigare) - ett mellanrum mellan
     "Ramar" och undermenyn under skapar en "död zon" musen måste
     korsa. Så fort musen lämnar BÅDE länken och rutan (även för en
     bråkdel av en sekund i det tomma mellanrummet) förlorar
     .dropdown:hover sitt hover-tillstånd och menyn stängs för tidigt -
     precis det som rapporterades. Bootstraps eget top:100% (ingen
     lucka) håller menyn "fastklistrad" direkt under knappen istället. */
}
.dropdown-item{
  color: var(--ink);
  font-size: 0.9rem;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius);
}
.dropdown-item:hover, .dropdown-item:focus{ background: var(--paper-dim); color: var(--moss); }
.dropdown-item.active{ background: var(--sand); color: var(--ink); font-weight: 600; }
/* Bootstraps egen ▼-markör ärver INTE currentColor per default i alla
   lägen - säkerställer att den alltid matchar textfärgen istället för
   att bli en avvikande grå/svart nyans mot vår varma palett. */
.main-nav .dropdown-toggle::after{ vertical-align: 0.15em; }

/* Utfällning vid hover på desktop (mer naturligt i en butik än att
   behöva klicka) - Bootstraps egen klick-baserade JS-växling (som
   fortfarande behövs på mobil, där hover inte är meningsfullt) rörs
   inte, det här är bara ett extra, rent visuellt lager ovanpå. */
@media (min-width: 992px){
  .main-nav .dropdown:hover > .dropdown-menu{
    display: block;
  }
}

.header-icons a{
  color: var(--ink);
  margin-left: 1.1rem;
  position: relative;
}
.header-icons{
  /* .header-icons är redan en flex-behållare (Bootstraps d-flex-klass)
     som spänner FULLA bredden på mobil, eftersom .navbar/.container-xl
     själva är display:block där (Bootstraps navbar blir bara flex vid
     lg-brytpunkten och uppåt - på mobil staplas allt istället). Utan
     justify-content klumpar ikonerna (sök/konto/varukorg/hamburger)
     ihop sig till vänster INUTI den fullbreda boxen. flex-end tvingar
     dem hela vägen till höger, oavsett om menyn är öppen/stängd eller
     hur många ikoner som råkar vara synliga. */
  justify-content: flex-end;
  /* KRITISKT, upptäckt via riktiga skärmdumpar från en användare:
     .navbar-collapse har flex-basis:100% (Bootstraps eget sätt att
     tvinga fram en egen rad åt menylänkarna när den är öppen). När
     den raden aktiveras radbryts .header-icons ner till en HELT EGEN,
     tredje rad - och ENSAM på sin rad gör varken justify-content på
     föräldern eller på sig själv någon skillnad (inget att fördela
     mellanrum MOT). margin-left:auto är den enda pålitliga lösningen -
     den trycker ALLTID elementet så långt det går åt höger på sin egen
     rad, oavsett hur många syskon som råkar dela raden med den. */
  margin-left: auto;
}
.header-icons .navbar-toggler{
  margin-left: 1.1rem;
  padding: 0.25rem 0.4rem;
}

/* ---------- Sökrutan (överlägg som fälls ut från header-ikonerna) ---------- */
.search-overlay{
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--white);
  border-bottom: 1px solid var(--sand-line);
  box-shadow: 0 8px 16px -8px rgba(0,0,0,0.08);
  z-index: 20;
  padding: 1rem 0;
}
.navbar{ position: relative; }
.search-overlay-form{
  display: flex;
  gap: 0.6rem;
  max-width: 560px;
  margin: 0 auto;
}
.search-overlay-form input[type="search"]{
  flex: 1;
  /* KRITISKT för att fältet faktiskt ska kunna krympa på smala
     skärmar - flex-objekt har annars min-width:auto som standard,
     vilket vägrar krympa fältet under dess "naturliga"
     innehållsbredd. Utan den här raden trycks knapparna bredvid
     (särskilt stäng-knappen längst till höger) ut utanför synligt
     område på mobil, precis den bugg som rapporterades. */
  min-width: 0;
  border: 1px solid var(--sand-line);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  font-size: 0.95rem;
  font-family: var(--font-body);
  background: var(--white);
  color: var(--ink);
}
.search-overlay-form input[type="search"]:focus{
  outline: 2px solid var(--moss);
  outline-offset: 1px;
  border-color: var(--moss);
}
.search-overlay-form button[type="submit"]{
  background: var(--moss);
  color: var(--paper);
  border: none;
  border-radius: var(--radius);
  padding: 0 1.1rem;
  cursor: pointer;
  font-size: 1rem;
  flex-shrink: 0;
}
.search-overlay-form button[type="submit"]:hover{ background: var(--moss-deep); }
.search-overlay-form button[data-search-close]{
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius);
  padding: 0 0.9rem;
  cursor: pointer;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.search-overlay-form button[data-search-close]:hover{ border-color: var(--ink); color: var(--ink); }
.cart-count{
  position: absolute;
  top: -7px; right: -11px;
  background: var(--moss);
  color: var(--paper);
  font-size: 0.62rem;
  width: 17px; height: 17px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
}

/* ---------- Buttons ---------- */
.btn-moss{
  background: var(--moss);
  border: 1px solid var(--moss);
  color: var(--paper);
  border-radius: var(--radius);
  padding: 0.68rem 1.5rem;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  transition: background .15s ease, transform .15s ease;
}
.btn-moss:hover{ background: var(--moss-deep); color:var(--paper); }

.btn-outline-ink{
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 0.66rem 1.4rem;
  font-weight: 600;
  font-size: 0.88rem;
}
.btn-outline-ink:hover{ background: var(--ink); color: var(--paper); }

.btn-ghost-sm{
  background: var(--white);
  border: 1px solid var(--ink);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 0.42rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
}
.btn-ghost-sm:hover{ background: var(--ink); color: var(--paper); }
.btn-ghost-sm.danger{ border-color: var(--danger); color: var(--danger); }
.btn-ghost-sm.danger:hover{ background: var(--danger); color: var(--paper); }

/* ---------- Badge, tabell, tomt tillstånd (kontosidor) ---------- */
.badge{
  display:inline-block; padding:0.2rem 0.6rem; border-radius:12px;
  font-size:0.72rem; font-weight:700; letter-spacing:0.02em;
}
.badge-active{ background:var(--success-bg); color:var(--success); }
.badge-inactive{ background:var(--paper-dim); color:var(--ink-soft); }
.table-responsive{ overflow-x:auto; }
.data-table{ width:100%; border-collapse:collapse; font-size:0.88rem; }
.data-table th{
  text-align:left; font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:700; padding:0.6rem 0.5rem; border-bottom:1px solid var(--sand-line);
}
.data-table td{ padding:0.7rem 0.5rem; border-bottom:1px solid var(--sand-line); }
.empty-state{ text-align:center; padding:2.5rem 1rem; color:var(--ink-soft); font-size:0.9rem; }

/* ---------- Hero ---------- */
.hero{
  padding: 4.5rem 0 4rem;
  border-bottom: 1px solid var(--sand-line);
}
.hero h1{
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1.06;
}
.hero .lede{
  font-size: 1.08rem;
  color: var(--ink-soft);
  max-width: 42ch;
  margin: 1.3rem 0 2rem;
}
.hero-media{
  position: relative;
}
.hero-media img{
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: var(--radius);
}
.hero-media .price-tag{
  position: absolute;
  bottom: -22px; left: -22px;
  background: var(--white);
  border: 1px solid var(--sand-line);
  padding: 14px 18px;
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(36,35,31,0.08);
}
.hero-media .price-tag .name{ font-size: 0.82rem; font-weight: 600; }
.hero-media .price-tag .price{ font-family: var(--font-display); font-size: 1.2rem; color: var(--moss); }

/* Category strip - BORTTAGET härifrån (var föräldralös, dubblerad
   CSS): både home.php och home-catalog.php har sin egen KOMPLETTA
   .cat-card/.cat-strip-stil i respektive fils eget inline <style>-
   block, ingendera behövde den här kopian. Läckte dessutom in
   oönskade egenskaper (t.ex. height:250px, display:block) i
   home-catalog.php:s nyare, runda kortdesign - CSS slås samman
   EGENSKAP FÖR EGENSKAP, inte block för block, så en till synes
   "överskriven" gammal regel kan ändå läcka in enstaka egenskaper
   som aldrig uttryckligen skrevs över i den nya. */

/* ---------- Product grid ---------- */
.products{ padding: 1rem 0 4.5rem; }
.product-card{
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
  transition: box-shadow .18s ease, transform .18s ease;
}
.product-card:hover{
  box-shadow: 0 16px 34px rgba(36,35,31,0.08);
  transform: translateY(-3px);
}
.product-thumb{
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--paper-dim);
  overflow: hidden;
  /* Litet andrum runt bilden istället för att den fyller hela rutan
     kant i kant - särskilt märkbart (och trångt) i tvåkolumnsvyn på
     mobil. box-sizing:border-box (satt globalt) gör att padding här
     bevarar den kvadratiska proportionen (aspect-ratio) även efter
     att paddingen dras av på alla fyra sidor lika mycket. */
  padding: 0.6rem;
}
.product-thumb img{
  width: 100%; height: 100%; object-fit: cover;
  border-radius: calc(var(--radius) + 2px);
}
.product-badge{
  position: absolute; top: 10px; left: 10px;
  background: var(--moss);
  color: var(--paper);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--radius);
}

/* ---------- Diagonal hörnbanderoll (NYHET / SLUTSÅLD) ---------- */
.product-ribbon{
  position: absolute; top: 18px; right: -34px;
  width: 130px;
  padding: 4px 0;
  text-align: center;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  transform: rotate(45deg);
  box-shadow: 0 2px 5px rgba(0,0,0,0.18);
  z-index: 2;
  pointer-events: none;
}
.product-ribbon.ribbon-new{ background: var(--moss); }
.product-ribbon.ribbon-sold-out{ background: var(--danger); }
.product-quickadd{
  position: absolute; right: 10px; bottom: 10px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}
.product-card:hover .product-quickadd{ opacity: 1; transform: translateY(0); }

.product-body{ padding: 1rem 1.1rem 1.15rem; }
.product-body .cat{
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 700;
}
.product-body .name{
  font-family: var(--font-display);
  font-size: 1.06rem;
  margin: 0.25rem 0 0.4rem;
}
.product-body .price-row{
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.product-body .price{
  font-weight: 700;
}
.product-body .price-old{
  text-decoration: line-through;
  color: var(--ink-faint);
  font-size: 0.85rem;
}

/* ---------- Value props ---------- */
.value-props{
  background: var(--sand);
  padding: 3.2rem 0;
}
.value-item .num{
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--moss);
}
.value-item h6{
  font-weight: 700;
  margin: 0.5rem 0 0.35rem;
}
.value-item p{
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: 0;
}

/* ---------- Newsletter ---------- */
.newsletter{
  padding: 4rem 0;
  text-align: center;
}
.newsletter h2{ font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.newsletter-form{
  max-width: 420px;
  margin: 1.6rem auto 0;
  display: flex;
  gap: 0;
}
.newsletter-form input{
  flex: 1;
  border: 1px solid var(--ink);
  border-right: none;
  padding: 0.7rem 1rem;
  background: var(--white);
  color: var(--ink);
  font-size: 0.9rem;
  border-radius: var(--radius) 0 0 var(--radius);
}
.newsletter-form input:focus{ outline: none; }
.newsletter-form button{
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ---------- Footer ---------- */
.site-footer{
  background: var(--footer-bg);
  /* Samma valfria mönster-mekanik som body{} - tom/no-op för alla
     teman utom de som uttryckligen sätter dessa två tokens. */
  background-image: var(--footer-bg-image, none);
  background-size: var(--footer-bg-size, auto);
  color: var(--footer-text);
  padding: 1.8rem 0 1.6rem;
  font-size: 0.9rem;
  border-top: 1px solid var(--footer-border);
}
.site-footer .brandmark{ color: var(--footer-heading); }
.site-footer .brandmark .dot{ background: var(--footer-accent); }
.site-footer h6{
  color: var(--footer-heading);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.site-footer a{ color: var(--footer-text); }
.site-footer a:hover{ color: var(--footer-text-hover); }
.site-footer ul{ list-style: none; padding: 0; margin: 0; }
.site-footer li{ margin-bottom: 0.55rem; }
.footer-bottom{
  border-top: 1px solid var(--footer-border);
  margin-top: 0;
  padding-top: 1.2rem;
  font-size: 0.8rem;
  color: var(--footer-muted);
}

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 2px solid var(--moss);
  outline-offset: 2px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 991px){
  .hero-media{ margin-top: 2.5rem; }
  .hero-media .price-tag{ left: 12px; bottom: -18px; }
}

/* ---------- Delade formulärstilar ----------
   Ursprungligen bara definierade lokalt i checkout.php, men återanvänds
   nu av fler sidor (kundkonto, inloggning, registrering) - flyttade hit
   så ALLA sidor som behöver dem faktiskt får dem, istället för att varje
   ny sida behöver komma ihåg att duplicera samma <style>-block. */
.checkout-field{ margin-bottom: 1rem; }
.checkout-field label{ display:block; font-size:0.8rem; font-weight:600; margin-bottom:0.35rem; }
.checkout-field input, .checkout-field textarea, .checkout-field select{
  width:100%; border:1px solid var(--sand-line); border-radius:var(--radius);
  padding:0.62rem 0.8rem; font-size:0.92rem; font-family:var(--font-body); background:var(--white); color:var(--ink);
}
.checkout-field input:focus, .checkout-field textarea:focus, .checkout-field select:focus{
  outline:2px solid var(--moss); outline-offset:1px; border-color:var(--moss);
}
.checkout-field select option{ background:var(--white); color:var(--ink); }
.checkout-row{ display:flex; gap:1rem; flex-wrap:wrap; }
.checkout-row > .checkout-field{ flex:1; min-width:160px; }

/* ---------- Produktfilter (produktlistans "Pris från/till, Sortera,
   Lagerstatus"-rad) - hade ALDRIG någon CSS alls tidigare (varken här
   eller i någon annan stilmall) - rena webbläsarstandardfält. Såg av
   ren tur hjälpligt ut på ljusa teman, men blev uppenbart trasigt på
   ett mörkt tema (vita rutor utan struktur på en mörk botten). ---------- */
.filter-bar{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:1.2rem;
  background:var(--white); border:1px solid var(--sand-line); border-radius:var(--radius);
  padding:1.4rem; margin-bottom:2rem;
}
.filter-field{ display:flex; flex-direction:column; gap:0.35rem; }
.filter-field label, .filter-heading{
  font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em;
  font-weight:700; color:var(--ink-soft);
}
.filter-field input, .filter-field select{
  border:1px solid var(--sand-line); border-radius:var(--radius);
  padding:0.55rem 0.75rem; font-size:0.9rem; font-family:var(--font-body);
  background:var(--white); color:var(--ink); min-width:140px;
}
.filter-field select option{ background:var(--white); color:var(--ink); }
.filter-field input:focus, .filter-field select:focus{
  outline:2px solid var(--moss); outline-offset:1px; border-color:var(--moss);
}
.checkbox-field{ justify-content:flex-end; }
.switch-field{
  display:flex; align-items:center; gap:0.6rem; cursor:pointer;
  font-size:0.88rem; color:var(--ink); user-select:none;
}
.switch{ position:relative; width:38px; height:22px; flex-shrink:0; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch-track{
  position:absolute; inset:0; background:var(--sand-line); border-radius:999px; transition:background 0.15s ease;
}
.switch-track::before{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
  background:var(--white); border-radius:50%; transition:transform 0.15s ease;
  box-shadow:0 1px 3px rgba(0,0,0,0.25);
}
.switch input:checked ~ .switch-track{ background:var(--moss); }
.switch input:checked ~ .switch-track::before{ transform:translateX(16px); }
.switch input:focus-visible ~ .switch-track{ outline:2px solid var(--moss); outline-offset:2px; }
.filter-actions{ display:flex; align-items:center; gap:1rem; margin-left:auto; }
.btn-clear{ font-size:0.85rem; text-decoration:underline; text-underline-offset:2px; }

/* ---------- Kontosidor (inloggning, registrering, Mina sidor) ---------- */
.account-page{ padding: 2.5rem 0 5rem; }
.account-card{
  background: var(--white); border:1px solid var(--sand-line); border-radius: var(--radius); padding:1.6rem;
}
.account-nav{ display:flex; flex-direction:column; gap:0.3rem; }
.account-nav a{
  display:block; padding:0.6rem 0.9rem; border-radius:var(--radius);
  color: var(--ink); font-size:0.92rem; text-decoration:none;
}
.account-nav a:hover{ background: var(--paper-dim); }
.account-nav a.active{ background: var(--sand); font-weight:600; }

/* ---------- Meddelanden & hjälptext (saknades helt i butiken sedan
   tidigare - påverkade redan felmeddelanden i kundvagn/kassa, inte bara
   de nya kontosidorna) ---------- */
.alert{
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  margin-bottom: 1.2rem;
}
.alert-danger{ background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }
.alert-success{ background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.module-desc{ color: var(--ink-soft); font-size: 0.85rem; margin: 0.15rem 0 0; }

/* ---------- Summeringsrader (kundvagn & kassa) ---------- */
.sum-row{ display:flex; justify-content:space-between; font-size:0.94rem; margin-bottom:0.7rem; color: var(--ink-soft); }
.sum-row.total{ color: var(--ink); font-weight:700; font-size:1.1rem; border-top:1px solid var(--sand-line); padding-top:0.9rem; margin-top:0.4rem; }

/* ---------- Mobilt sidhuvud: centrerad logga/butiksnamn, hamburgare
   fast till höger på SAMMA rad, meny och ikoner var sin egen rad under
   ----------
   Löser två saker på en gång:
   1) Breda loggor (t.ex. en bred textlogga) fick tidigare aldrig plats
      snyggt bredvid butiksnamnet/hamburgaren på smala skärmar.
   2) Menylänkarna (kategorier) och ikonraden (sök/konto/varukorg)
      hamnar nu tydligt "mellan" logga+hamburgare och varandra, i den
      ordning som efterfrågades: logga+hamburgare → meny → ikoner.

   CSS Grid med grid-template-columns: 1fr auto 1fr är ett etablerat
   knep för att TRUE-centrera ett mittenelement (loggan) oavsett hur
   brett höger-elementet (hamburgaren) råkar vara - kolumn 1 och 3 är
   alltid exakt lika breda (båda 1fr), vilket garanterar att kolumn 2
   hamnar i den geometriska mitten av HELA raden, inte bara mitten av
   ledigt utrymme efter hamburgaren. */
@media (max-width: 991.98px){
  .navbar > .container-xl{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    row-gap: 0.9rem;
  }
  .navbar > .container-xl > .brandmark{
    grid-column: 2;
    justify-self: center;
  }
  .navbar > .container-xl > .navbar-toggler{
    grid-column: 3;
    justify-self: end;
  }
  .navbar > .container-xl > .navbar-collapse{
    grid-column: 1 / -1;
  }
  .navbar > .container-xl > .header-icons{
    grid-column: 1 / -1;
    /* Centrerade på mobil istället för höger-justerade (som på
       desktop) - dessa två regler skriver MEDVETET över
       justify-content:flex-end / margin-left:auto som sattes tidigare
       för att lösa hamburgarens position. Gäller bara i det här
       media-blocket, desktop-beteendet är helt orört. */
    justify-content: center !important;
    margin-left: 0 !important;
  }
  .main-nav.mx-auto{
    justify-content: center;
  }
}

/* Topprads-texten ("Fri frakt över...", "Välkommen till...") -
   centreras på mobil istället för vänsterjusterad. Höger sidans
   innehåll (sociala ikoner/kundservicetext) är redan dolt under
   md-brytpunkten (768px) via d-none d-md-*, så topbar-raden har bara
   ETT synligt element kvar där - justify-content:space-between gör då
   ingenting (samma bakomliggande orsak som hamburgar-buggen), texten
   måste centreras uttryckligen istället. */
@media (max-width: 767.98px){
  .header-topbar .container-xl{
    /* !important krävs - Bootstraps egen .justify-content-between-
       utility (satt inline i HTML:en) har !important i sin kompilerade
       CSS, en vanlig regel utan !important skrivs annars tyst över
       trots att den står senare i filen och/eller är mer specifik. */
    justify-content: center !important;
    text-align: center;
  }
}

/* Återanvändbar vit innehållsruta - samma stil som redan används i
   måttkalkylatorns kort (.frame-calc) och recensionsformuläret
   (.review-form-card) i Reviews-modulen. Skapad för att kunna
   återanvändas generellt (produktbeskrivning, recensionsinnehåll m.m.)
   utan att duplicera samma fem CSS-rader varje gång. */
.content-card{
  background: var(--white);
  border: 1px solid var(--sand-line);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
}

/* ============================================================
   Marginal-utilities (mt-1...mt-4, mb-2, mb-3) - se admin.css för
   bakgrund. Samma tillägg här eftersom klasserna används genomgående
   i butikens kundvända vyer också (t.ex. produktsidan).
   ============================================================ */
.mt-1{ margin-top: 0.25rem; }
.mt-2{ margin-top: 0.5rem; }
.mt-3{ margin-top: 1rem; }
.mt-4{ margin-top: 1.5rem; }
.mb-2{ margin-bottom: 0.5rem; }
.mb-3{ margin-bottom: 1rem; }