/* ----------------------------------------------------------------
   TRADE GOTHIC — Varumärkesfont
   ---------------------------------------------------------------- */

@font-face {
  font-family: 'Trade Gothic';
  src: url('/fonts/Trade-Gothic-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Trade Gothic';
  src: url('/fonts/Trade-Gothic.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Trade Gothic';
  src: url('/fonts/Trade-Gothic-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Trade Gothic Condensed';
  src: url('/fonts/Trade-Gothic-Condensed-Eighteen.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Trade Gothic Condensed';
  src: url('/fonts/Trade-Gothic-Bold-Condensed-Twenty.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Applicera Trade Gothic på hela siten */
body,
input, button, select, textarea {
  font-family: 'Trade Gothic', 'Helvetica Neue', Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.product-name, .product-card__name,
.header-greeting, .primary-nav a,
.btn, .nav-chip, .category-heading {
  font-family: 'Trade Gothic Condensed', 'Trade Gothic', 'Helvetica Neue', Arial, sans-serif !important;
}

/* ================================================================
   MAJBRITTS LIVSMEDEL — NORDIC COLD WATER PROFESSIONAL
   ================================================================
   Varumärkestema for Majbritts Livsmedel AB.
   Fryst fisk & skaldjur grossist — Stockholm.

   Laddas EFTER frontend.css — overridar CSS-variabler och
   tillämpar varumärkesspecifik typografi, färg och layout.

   Estetisk riktning: Skandinavisk kyla, maritim precision,
   professionell B2B-e-handel.

   Uppdatera ALDRIG frontend.css direkt för Majbritts-styling.
   Alla varumärkesändringar görs här.
   ================================================================ */


/* ----------------------------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   ----------------------------------------------------------------
   Djup navy    #0B1F3A  — primär varumärkesfärg
   Ocean blue   #1A5496  — sekundär accent
   Is-vit       #EEF3F8  — sidbackground
   Ren vit      #FFFFFF  — kort/content
   Stål-silver  #8A9DB5  — muted text
   Koppar       #C07820  — premium accent (sparsamt)
   Text         #0F1C2E  — nästan svart
   Border       #C5D2DF  — subtil kant
   ---------------------------------------------------------------- */

:root {
  /* Primär navy */
  --brand-500:  #0B1F3A;
  --brand-600:  #071628;
  --brand-200:  #3A6EA5;

  /* Bakgrunder */
  --bg:     #EEF3F8;
  --bg-100: #E3EBF3;
  --bg-0:   #FFFFFF;

  /* Text */
  --text:     #0F1C2E;
  --text-900: #0F1C2E;
  --text-800: #0B1F3A;
  --muted:    #8A9DB5;

  /* Kanter */
  --border:   #C5D2DF;
  --line-200: #C5D2DF;

  /* Legacy aliases */
  --primary:      #0B1F3A;
  --primary-dark: #071628;
  --secondary:    #1A5496;
  --accent:       #1A5496;

  /* Header */
  --header-peach:    #0B1F3A;
  --header-burgundy: #E3EBF3;

  /* Pills (mot mörk bakgrund) */
  --pill-bg:     rgba(255, 255, 255, 0.08);
  --pill-border: rgba(255, 255, 255, 0.18);

  /* Accent */
  --copper:        #C07820;
  --copper-light:  rgba(192, 120, 32, 0.10);
  --copper-border: rgba(192, 120, 32, 0.25);
  --copper-glow:   rgba(192, 120, 32, 0.15);

  /* Radie — stram, professionell */
  --radius: 6px;
}


/* ----------------------------------------------------------------
   2. BODY — kall, ljus bakgrund
   ---------------------------------------------------------------- */

body {
  background-color: var(--bg);
}

/* Ta bort alla eventuella noise/grain overlays */
body::before {
  display: none !important;
}

/* Ta bort guld-stripe i toppen */
body::after {
  display: none !important;
}


/* ----------------------------------------------------------------
   3. TYPOGRAFI
   ----------------------------------------------------------------
   Barlow Condensed: rubriker, nav-chips, knappar
   Inter: brödtext, formulär, generell text
   ---------------------------------------------------------------- */

h1, h2, h3, h4, h5,
.page-title,
.section-title,
.product-name,
.product-card__name,
.catalog-title {
  font-family: 'Barlow Condensed', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-800);
}

.eyebrow {
  font-family: 'Barlow Condensed', 'Inter', system-ui, sans-serif;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--muted);
}


/* ----------------------------------------------------------------
   4. HEADER — mörk navy, ren och professionell
   ---------------------------------------------------------------- */

.site-header,
.header-wrapper,
.site-header-wrapper,
header.site-header {
  background-color: var(--brand-500) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(26, 84, 150, 0.30) !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.20) !important;
}

/* Header-main: CSS Grid — logo i vänster kolumn, nav/sök i höger */
.header-main {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto auto !important;
  align-items: stretch !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Logo-kolumn — spänner över båda raderna */
.header-branding {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 0 1.25rem 0 0 !important;
  max-width: 260px !important;
}

/* Nav-rad (knappar, länkar, varukorg) — rad 1 höger */
.header-top-row {
  grid-column: 2 !important;
  grid-row: 1 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  align-items: center !important;
}

/* Sök + leveranschip — rad 2 höger */
.header-utility-card {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 0.35rem 0 !important;
}

.header-utility-card__slot {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

.header-search--utility {
  flex: 1 !important;
  max-width: 560px !important;
}

/* Mobil: stack vertikalt */
@media (max-width: 767px) {
  .header-main {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
  }
  .header-branding {
    grid-row: 1 !important;
    padding: 0.5rem 0 !important;
  }
  .header-top-row {
    grid-row: 2 !important;
  }
  .header-utility-card {
    grid-row: 3 !important;
  }
}


/* ----------------------------------------------------------------
   5. LOGO — Officiell Majbritts-logotyp (transparent PNG)
   Cream cursive "Maj Britts" + rött HÖGSTA KVALITETS RÅVAROR-stämpel
   på transparent bakgrund — syns perfekt mot mörk navy-header.
   ---------------------------------------------------------------- */

/* Visa den officiella loggan — stor, fyller logotypkolumnen */
.site-header .brand-logo img,
.brand-logo img {
  display: block !important;
  width: auto !important;
  height: 80px !important;
  max-width: 200px !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: contain !important;
  object-position: left top !important;
}

/* Logo-länk: flex-centrering, ingen dekorativ styling */
.brand-logo {
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: none !important;
}

/* Ta bort text-logo pseudo-element */
.brand-logo::before,
.brand-logo::after {
  content: none !important;
  display: none !important;
}

/* Dölj sr-only-texten visuellt (skärmlässare läser aria-label på länken) */
.brand-logo .sr-only {
  display: none !important;
}

/* Branding-block: flex-rad med textstämpel + ansiktslogga */
.branding-block {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

/* Ansiktslogga — rund signaturstämpel med cirkulär kontur */
.brand-face-logo {
  width: 110px !important;
  height: 110px !important;
  object-fit: contain !important;
  opacity: 0.92;
  flex-shrink: 0;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}


/* ----------------------------------------------------------------
   6. HEADER — text och nav-länkar
   ---------------------------------------------------------------- */

/* Nav-länkar */
.header-nav a,
.primary-nav a,
.nav-link,
.header-link {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  transition: color 0.15s ease;
}

.primary-nav a:hover {
  color: #FFFFFF;
}

/* Hälsningstext — nu i header-top-row till vänster om nav */
.header-greeting,
.header-welcome {
  color: rgba(255, 255, 255, 0.90);
  font-size: 1.44rem;
  white-space: nowrap;
  margin-right: auto;
  padding-left: 0.25rem;
}

/* Nav-länkar centrerade i sin kolumn */
.header-top-row .primary-nav {
  justify-content: center !important;
}


/* ----------------------------------------------------------------
   7. HEADER PILLS — knappar i headern
   ---------------------------------------------------------------- */

.header-pill-base {
  border-radius: var(--radius) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* "Bli kund" CTA — koppar-accent mot navy-header; navy text ger 4.68:1 (WCAG AA) */
.header-pill--cta {
  background-color: var(--copper) !important;
  color: var(--primary) !important;
  border: 1px solid var(--copper-border) !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.header-pill--cta:hover {
  background-color: #a06818 !important;
  border-color: var(--copper) !important;
  box-shadow: 0 2px 10px var(--copper-glow) !important;
}

/* "Logga in" / "Logga ut" — ghost/outline */
.header-pill-base:not(.header-pill--cta):not(.header-pill--split) {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: rgba(255, 255, 255, 0.85);
}

.header-pill-base:not(.header-pill--cta):not(.header-pill--split):hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
}

/* Varukorg — split-pill */
.cart-link.header-pill--split {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--radius) !important;
  color: rgba(255, 255, 255, 0.85);
}

.cart-link.header-pill--split:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
}

/* Cart-pill badge */
.cart-pill {
  background-color: #1A5496 !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}

/* Dölj varukorg-räknare när tom */
.cart-pill[data-cart-count="0"],
[data-cart-pill][data-cart-count="0"] {
  display: none !important;
}

/* Varukorg-ikon */
.header-pill-label .header-icon {
  color: rgba(255, 255, 255, 0.75);
}


/* ----------------------------------------------------------------
   8. LEVERANSTID-CHIP
   ---------------------------------------------------------------- */

.stop-time-chip {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius);
  font-size: 0.78rem;
  max-width: none;
  white-space: nowrap;
  flex-wrap: nowrap;
  overflow: hidden;
}

.stop-time-chip__time {
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}

.stop-time-chip.is-critical {
  color: #ff9090;
  border-color: rgba(255, 144, 144, 0.35);
  background: rgba(255, 80, 80, 0.12);
}

.stop-time-chip.is-critical .stop-time-chip__time {
  color: #ff9090 !important;
}

.stop-time-chip.is-muted {
  color: rgba(255, 255, 255, 0.80);
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
}


/* ----------------------------------------------------------------
   9. SÖKFÄLT
   ---------------------------------------------------------------- */

.header-search--utility .search-input-wrapper {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: var(--radius) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.header-search--utility .search-input-wrapper:focus-within {
  border-color: rgba(26, 84, 150, 0.70) !important;
  box-shadow: 0 0 0 2px rgba(26, 84, 150, 0.20) !important;
}

.header-search--utility input[type="search"] {
  background: transparent;
  color: #1a2a3a;
}

.header-search--utility input[type="search"]::placeholder {
  color: rgba(11, 31, 58, 0.45);
}

/* Dölj webbläsarens inbyggda mikrofon/tal-knapp */
.header-search--utility input[type="search"]::-webkit-search-speech-button,
.header-search--utility input[type="search"]::-webkit-search-results-button,
.header-search--utility input[type="search"]::-webkit-search-cancel-button,
.header-search--utility input[type="search"]::-webkit-search-decoration {
  display: none !important;
  -webkit-appearance: none !important;
  width: 0 !important;
}
input[type="search"]::-webkit-search-speech-button {
  display: none !important;
  -webkit-appearance: none !important;
}

.header-search--utility .search-icon {
  color: rgba(11, 31, 58, 0.45);
}

/* SÖK-knapp — ocean blue */
.header-search--utility .btn {
  background-color: #1A5496 !important;
  color: #FFFFFF !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius) !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 0.72rem;
  padding: 0 1rem;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.header-search--utility .btn:hover {
  background-color: #1D5FA8 !important;
  box-shadow: 0 2px 8px rgba(26, 84, 150, 0.35);
}


/* ----------------------------------------------------------------
   10. KATEGORI-NAVIGATION — nav-chips under header
   ---------------------------------------------------------------- */

.nav-chips,
.category-nav,
.category-bar {
  background-color: #E3EBF3 !important;
  border-top: none !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Scroll-hint gradient matcha bakgrunden */
@media (max-width: 767px) {
  .nav-chips::after {
    background: linear-gradient(to right, rgba(227, 235, 243, 0), rgba(227, 235, 243, 1)) !important;
  }
}

/* Alla chips */
.nav-chip,
.category-pill {
  background: #FFFFFF;
  border: 1px solid var(--border);
  color: var(--text-800);
  border-radius: var(--radius) !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.92rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  padding: 0.45rem 1rem !important;
  min-height: 36px !important;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, box-shadow 0.15s ease;
}

.nav-chip:hover,
.category-pill:hover {
  background: #FFFFFF;
  border-color: var(--brand-500);
  color: var(--brand-500);
  box-shadow: 0 1px 4px rgba(11, 31, 58, 0.08);
}

/* Aktiv chip */
.nav-chip.active,
.category-pill--active,
.category-pill[aria-selected="true"],
.category-pill.active {
  background-color: var(--brand-500) !important;
  border-color: var(--brand-500) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 4px rgba(11, 31, 58, 0.15) !important;
}

/* Fiskelyckan-pill — matchar övriga nav-chip exakt */
.nav-chip-wrapper--smaklyckan .smaklycka-trigger {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text-800) !important;
  box-shadow: none !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 0.45rem 1rem !important;
  min-height: 36px !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nav-chip-wrapper--smaklyckan .smaklycka-trigger:hover {
  border-color: var(--brand-500) !important;
  color: var(--brand-500) !important;
  transform: none;
}

.nav-chip-wrapper--smaklyckan .smaklycka-trigger span {
  font-family: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  font-size: inherit !important;
}

.fiskelyckan-icon {
  width: 16px;
  height: 16px;
  color: var(--brand-500);
  flex-shrink: 0;
}

/* Jingle-pill */
.nav-chip--jingle {
  background: #FFFFFF !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text-800) !important;
  box-shadow: none !important;
}

.nav-chip--jingle:hover {
  border-color: var(--brand-500) !important;
  color: var(--brand-500) !important;
}

.nav-chip--jingle .jingle-icon {
  color: var(--text-800);
}

.nav-chip--jingle.is-playing {
  background: var(--brand-500) !important;
  border-color: var(--brand-500) !important;
  color: #FFFFFF !important;
  text-shadow: none;
}

.nav-chip--jingle.is-playing .jingle-icon {
  color: #FFFFFF;
}

.nav-chip--jingle.is-playing::after {
  border-color: rgba(11, 31, 58, 0.35);
}

/* Chip dropdown */
.nav-chip-menu {
  border-radius: var(--radius);
  border-color: var(--border);
  background: #FFFFFF;
}

.nav-chip-menu-link:hover {
  background-color: var(--bg-100);
  color: var(--brand-500);
}

.chip-menu-toggle {
  border-radius: var(--radius) !important;
}

/* Carousel dots */
.carousel-dot {
  background: var(--border);
  transition: background-color 0.2s ease;
}

.carousel-dot.active {
  background: var(--brand-500);
}


/* ----------------------------------------------------------------
   11. KNAPPAR
   ---------------------------------------------------------------- */

/* Primär knapp — djup navy */
.btn-primary,
.add-to-cart-btn,
.checkout-btn {
  background-color: var(--brand-500);
  border: 1px solid var(--brand-500);
  color: #FFFFFF;
  border-radius: var(--radius);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary:hover,
.add-to-cart-btn:hover,
.checkout-btn:hover {
  background-color: var(--brand-600);
  border-color: var(--brand-600);
  box-shadow: 0 2px 8px rgba(11, 31, 58, 0.20);
}

/* Outline/sekundär knapp */
.btn-outline,
.btn-secondary {
  border: 1.5px solid var(--brand-500);
  color: var(--brand-500);
  background: transparent;
  border-radius: var(--radius);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-outline:hover,
.btn-secondary:hover {
  background-color: var(--brand-500);
  color: #FFFFFF;
}


/* ----------------------------------------------------------------
   12. PRODUKTKORT
   ---------------------------------------------------------------- */

.product-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.product-card:hover {
  border-color: var(--secondary);
  box-shadow: 0 4px 20px rgba(11, 31, 58, 0.08);
  transform: translateY(-2px);
}

.product-card__name,
.product-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1.02rem;
  color: var(--text-800);
}

/* Pris */
.product-card__price,
.price-tag {
  color: var(--brand-500);
  font-weight: 700;
}

/* Ny/kampanj-badge */
.badge-new,
.product-badge {
  background-color: var(--brand-500);
  color: #FFFFFF;
  border-radius: 3px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

/* --- Produkthero/modal: Override BakeMyDay-färger → navy --- */

/* Produkttitel i hero/modal (hardkodad #2c1200 → navy) */
.product-title-hero,
.product-hero-title-row h1,
.product-hero--modal .product-hero-title-row h1 {
  color: var(--text-800) !important;
}

/* Hero info-card bakgrund (ta bort varm ton) */
.product-hero-info-card {
  background: #FFFFFF !important;
}

/* Hero/modal bakgrund */
.product-hero--modal .container,
.product-hero--modal .product-hero-inner {
  background: #FFFFFF !important;
}

/* Produktpris — navy istället för brun */
.product-price-block .price,
.product-price-block--hero .price-row,
.price-current {
  color: var(--text-800) !important;
}

/* Pris per enhet label */
.price-per-unit-label {
  color: var(--muted) !important;
}

/* Modal spec-labels */
.modal-card__spec-label {
  color: var(--muted) !important;
}

.modal-card__spec-value {
  color: var(--text-800) !important;
}

/* Alla bruna textfärger i produktkort → navy/neutral */
.product-card .product-title,
.product-card .product-preprice,
.product-card .product-preprice__item {
  color: var(--text-800) !important;
}

/* Detalj-länk */
.product-detail-link {
  color: var(--secondary) !important;
}

/* Quantity +/- knappar */
.quantity-stepper__btn,
.quantity-field button {
  color: var(--brand-500) !important;
  border-color: var(--border) !important;
}

/* Override alla hardkodade rgba(44,18,0,...) i produktkort */
.product-actions--compact {
  border-top-color: var(--border) !important;
}

/* Pris-badges */
.price-badge {
  background: var(--bg-100) !important;
  color: var(--text-800) !important;
  border-color: var(--border) !important;
}

/* Login-hint i modal (ta bort varm peach) */
.product-hero--modal .price-login-hint {
  background: var(--bg-100) !important;
  border-color: var(--border) !important;
}

.product-hero--modal .price-login-hint a {
  color: var(--secondary) !important;
}

/* Preview overlay bakgrund */
.product-preview-overlay__dialog {
  background: #FFFFFF !important;
}

/* Hero spec-grid */
.product-hero--modal .product-spec-grid--hero {
  background: #FFFFFF !important;
  border-color: var(--border) !important;
}

/* Spec-kort i modal (peach #fff4ec → cool) */
.product-hero--modal .product-spec {
  background: var(--bg-100) !important;
  border-color: rgba(11, 31, 58, 0.08) !important;
}

.product-hero--modal .product-spec__label {
  color: rgba(11, 31, 58, 0.5) !important;
}

.product-hero--modal .product-spec__value {
  color: var(--text-800) !important;
}

/* Add-to-cart label i modal */
.product-hero--modal .product-hero .add-to-cart label span {
  color: rgba(11, 31, 58, 0.65) !important;
}

/* Modal header (kompakt layout) */
.modal-header-left h1 {
  color: var(--text-800) !important;
}

.product-sku-label {
  color: rgba(11, 31, 58, 0.6) !important;
  background: rgba(11, 31, 58, 0.05) !important;
}

/* Pris-ruta i modal header (ta bort peach gradient) */
.modal-header-price {
  background: linear-gradient(135deg, #f0f4f8 0%, #e8eef4 100%) !important;
  border-color: rgba(11, 31, 58, 0.08) !important;
}

.modal-header-price .price-current--modal {
  color: var(--text-800) !important;
}

.modal-header-price .price-per-unit-label {
  color: rgba(11, 31, 58, 0.5) !important;
}

.modal-header-price .price-compare {
  color: rgba(11, 31, 58, 0.5) !important;
}

/* Pris per enhet label i hero */
.product-price-block--hero .price-per-unit-label {
  color: rgba(11, 31, 58, 0.75) !important;
}

/* Beskrivning i modal (varm bakgrund → cool) */
.product-hero--modal .description--modal {
  background: var(--bg-100) !important;
  color: var(--text-800) !important;
  border-left-color: var(--secondary) !important;
}

/* Modal sektioner (borders) */
.modal-section {
  border-color: rgba(11, 31, 58, 0.08) !important;
}

.modal-section-title {
  color: rgba(11, 31, 58, 0.5) !important;
  border-bottom-color: rgba(11, 31, 58, 0.06) !important;
}

/* Ingredienser text */
.modal-ingredients-text {
  color: rgba(11, 31, 58, 0.85) !important;
}

/* Allergener (peach bg → cool) */
.modal-allergens {
  color: var(--text-800) !important;
  background: var(--bg-100) !important;
}

/* Näringsvärde-rutor (peach → cool) */
.modal-nutrition-item {
  background: var(--bg-100) !important;
  border-color: rgba(11, 31, 58, 0.05) !important;
}

.modal-nutrition-item .nutrition-label {
  color: rgba(11, 31, 58, 0.5) !important;
}

.modal-nutrition-item .nutrition-value {
  color: var(--text-800) !important;
}

/* EAN-nummer */
.ean-number {
  color: var(--text-800) !important;
  background: var(--bg-100) !important;
}

/* Varukorg-sektion i modal (peach gradient → cool) */
.modal-cart-section {
  background: linear-gradient(135deg, var(--bg-100) 0%, #dce5ef 100%) !important;
  border-color: rgba(11, 31, 58, 0.08) !important;
}

.modal-cart-section .add-to-cart--modal label span {
  color: rgba(11, 31, 58, 0.7) !important;
}

.modal-cart-section .qty-input {
  border-color: rgba(11, 31, 58, 0.15) !important;
}

/* Produktdetalj-paneler (fullsida) */
.product-details-panels {
  background: linear-gradient(180deg, #f0f4f8 0%, #fff 70%) !important;
}

.product-details-card {
  box-shadow: 0 25px 55px rgba(11, 31, 58, 0.08) !important;
  border-color: rgba(11, 31, 58, 0.06) !important;
}

.product-details-card p {
  color: rgba(11, 31, 58, 0.8) !important;
}

/* Näringstabell */
.nutrition-intro {
  color: rgba(11, 31, 58, 0.6) !important;
}

.nutrition-table td {
  border-bottom-color: rgba(11, 31, 58, 0.08) !important;
}

.nutrition-table td:first-child {
  color: rgba(11, 31, 58, 0.7) !important;
}

.allergens-heading {
  border-top-color: rgba(11, 31, 58, 0.1) !important;
}

/* Hero media skugga */
.product-hero--modal .product-hero-media {
  box-shadow: 0 35px 60px rgba(11, 31, 58, 0.15) !important;
}

/* EAN-sektion */
.modal-ean-section {
  border-color: rgba(11, 31, 58, 0.08) !important;
}

/* --- modal-card__* (den FAKTISKA modallayouten) --- */

/* Titel: grön #4a7c59 → navy */
.modal-card__title {
  color: var(--text-800) !important;
}

/* Produktkort-bakgrund: peach gradient → cool */
.modal-card__product {
  background: linear-gradient(135deg, #f5f7fa 0%, #edf1f5 100%) !important;
  border-color: var(--border) !important;
}

/* Pris: orange fallback → navy */
.modal-card__price {
  color: var(--text-800) !important;
}

/* Kvantitets-input focus */
.modal-card__qty:focus {
  border-color: var(--brand-500) !important;
}

/* Login-hint länk */
.modal-card__login-hint a {
  color: var(--secondary) !important;
}

/* Quantity-knappar: brun → navy */
.quantity-btn,
.modal-card__cart-form .quantity-stepper--compact .quantity-btn {
  color: var(--brand-500) !important;
}

.quantity-stepper--compact .quantity-btn:hover {
  background: rgba(11, 31, 58, 0.05) !important;
}

.quantity-stepper--compact .quantity-btn:active {
  background: rgba(11, 31, 58, 0.1) !important;
}

/* Quantity stepper border */
.quantity-stepper--compact {
  border-color: rgba(11, 31, 58, 0.15) !important;
}

/* Spec-rutor: varm beige → cool */
.modal-card__spec {
  background: #f0f4f8 !important;
  border-color: var(--border) !important;
}

.modal-card__spec-label {
  color: rgba(11, 31, 58, 0.5) !important;
}

.modal-card__spec-value {
  color: var(--text-800) !important;
}

/* Nedre paneler: beige bakgrund + warm borders → cool */
.modal-card__bottom {
  background: #f5f7fa !important;
  border-top-color: var(--border) !important;
}

.modal-card__panel {
  border-color: var(--border) !important;
}

.modal-card__panel-title {
  color: var(--text-800) !important;
}

/* --- Produktkort: 1.5x textskala för bättre läsbarhet --- */

/* Artikelnummer (Art. MBF-xxx) */
.product-card__header .product-media-sku {
  font-size: 1.05rem !important;
}

/* Produkttitel */
.product-title {
  font-size: 0.72rem !important;
}

/* Pris (aktuellt) */
.price-current {
  font-size: 22px !important;
}

/* Prisblock */
.product-price-block .price {
  font-size: 1.7rem !important;
}

/* Kategori/handling-chips */
.product-card .product-chip--badge,
.product-card .handling-chip {
  font-size: 0.82rem !important;
  padding: 0.18rem 0.65rem !important;
}

/* Lagerstatus-pill */
.product-stock-pill {
  font-size: 0.75rem !important;
  height: 22px !important;
  line-height: 22px !important;
  padding: 0 0.5rem !important;
}

/* Lägg till-knapp (kompakt) */
.add-to-cart-btn--compact {
  font-size: 0.9rem !important;
  height: 30px !important;
  padding: 0 0.7rem !important;
}

/* Antal-input */
.quantity-field input[type="number"] {
  font-size: 0.9rem !important;
  height: 30px !important;
  width: 42px !important;
}

/* Produktdetalj-länk */
.product-detail-link {
  font-size: 1.1rem !important;
}

/* Prepris (per kg etc) */
.product-preprice--grid {
  font-size: 1.15rem !important;
}

/* Pris-placeholder och felmeddelande */
.price--placeholder,
.price-login-hint {
  font-size: 0.92rem !important;
}

/* Produktåtgärder info-text */
.product-actions__info {
  font-size: 1.05rem !important;
}

/* --- Produktkort & grid: Alla bruna BakeMyDay-färger → navy --- */

/* SKU-text */
.product-media-sku {
  color: var(--text-800) !important;
}

/* Tender-pill (anbud) */
.tender-pill {
  background: rgba(11, 31, 58, 0.9) !important;
}

/* Prepris-text */
.product-preprice {
  color: var(--text-800) !important;
}

/* Kampanj-pill */
.product-campaign-pill {
  background: rgba(26, 84, 150, 0.10) !important;
  color: var(--text-800) !important;
}

/* Gammalt pris */
.price-old {
  color: rgba(11, 31, 58, 0.6) !important;
}

/* Hero overlay text */
.hero-sub,
.hero-preprice-overlay {
  color: rgba(11, 31, 58, 0.75) !important;
}

.hero-packaging {
  color: var(--text-800) !important;
}

.hero-pack,
.hero-compare {
  color: rgba(11, 31, 58, 0.75) !important;
}

/* Pris per enhet / jämförpris */
.product-price-block .price-per-unit {
  color: rgba(11, 31, 58, 0.7) !important;
}

.product-price-block .price-compare {
  color: rgba(11, 31, 58, 0.6) !important;
}

/* Chips text */
.product-card .product-chip--badge,
.handling-chip {
  color: var(--text-800) !important;
}

/* Preview overlay (modal bakgrund) */
.product-preview-overlay__backdrop {
  background: rgba(11, 31, 58, 0.75) !important;
}

.product-preview-overlay__dialog {
  box-shadow: 0 45px 80px rgba(11, 31, 58, 0.35) !important;
}

.product-preview-overlay__close {
  color: var(--text-800) !important;
}

/* Footer gradient → navy */
.site-footer .container {
  background: linear-gradient(135deg, #0B1F3A 0%, #0E2647 100%) !important;
  box-shadow: 0 4px 20px rgba(11, 31, 58, 0.25) !important;
}


/* ----------------------------------------------------------------
   13. FORMULÄR
   ---------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  background-color: var(--bg-0);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--secondary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(26, 84, 150, 0.15);
}


/* ----------------------------------------------------------------
   14. KATALOG / MAIN CONTENT
   ---------------------------------------------------------------- */

.catalog-shell,
.catalog-header,
.catalog-filters,
.catalog-container,
[class*="catalog-"] {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: var(--border) !important;
}

.empty-state,
[class*="empty-state"] {
  background: rgba(255, 255, 255, 0.80) !important;
  border-color: var(--border) !important;
}

.empty-state-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* "Återställ filter"-knapp */
.btn-reset-filters,
[class*="empty-state"] a[href="/"],
[class*="catalog"] a[href="/"] {
  border: 1.5px solid var(--brand-500) !important;
  color: var(--brand-500) !important;
  background: transparent !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.6rem 1.8rem !important;
  border-radius: var(--radius) !important;
  transition: all 0.15s ease !important;
  display: inline-block !important;
}

.btn-reset-filters:hover,
[class*="empty-state"] a[href="/"]:hover,
[class*="catalog"] a[href="/"]:hover {
  background: var(--brand-500) !important;
  color: #FFFFFF !important;
}


/* ----------------------------------------------------------------
   15. FILTER-CHIPS
   ---------------------------------------------------------------- */

.filter-chip {
  border: 1px solid var(--border);
  background: #FFFFFF;
  color: var(--text-800);
  border-radius: var(--radius);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.filter-chip:hover {
  border-color: var(--brand-500);
  color: var(--brand-500);
}

.filter-chip.active,
.filter-chip[aria-selected="true"] {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #FFFFFF;
}


/* ----------------------------------------------------------------
   16. BREADCRUMBS
   ---------------------------------------------------------------- */

.breadcrumb {
  font-size: 0.80rem;
  letter-spacing: 0.02em;
}

.breadcrumb a {
  color: var(--secondary);
  transition: color 0.15s ease;
}

.breadcrumb a:hover {
  color: var(--brand-500);
}

.breadcrumb-separator {
  color: var(--muted);
}


/* ----------------------------------------------------------------
   17. FOOTER — djup navy med ljus text
   ---------------------------------------------------------------- */

.site-footer,
footer.site-footer {
  background-color: transparent !important;
  color: var(--muted);
  border-top: none;
  padding: 2rem 1.5rem 3rem;
}

/* Overrida frontend.css brun gradient */
.site-footer .container,
.site-footer .container.footer-columns {
  background: linear-gradient(135deg, #0B1F3A 0%, #0E2647 100%) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 4px 20px rgba(11, 31, 58, 0.25);
  border-top: 2px solid rgba(26, 84, 150, 0.30) !important;
}

.site-footer h3,
.site-footer h4,
.footer-heading {
  color: #FFFFFF;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.footer-columns h4,
.footer-columns h4 a {
  color: #FFFFFF !important;
}

.site-footer a,
.footer-columns a {
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.15s ease;
}

.site-footer a:hover,
.footer-columns a:hover {
  color: #FFFFFF;
}

.site-footer p,
.footer-columns p {
  color: rgba(255, 255, 255, 0.50);
}


/* ----------------------------------------------------------------
   18. AUTH-SIDOR (login, registrering)
   ---------------------------------------------------------------- */

.auth-page {
  background: linear-gradient(135deg, var(--bg) 0%, #E3EBF3 100%);
}

.auth-container {
  box-shadow: 0 15px 40px rgba(11, 31, 58, 0.10);
  border-radius: 10px;
}

.auth-card {
  background: #FFFFFF;
}

.auth-header h1 {
  color: var(--brand-500);
}

.auth-subtitle {
  color: var(--muted);
}

.auth-form .form-group label {
  color: var(--text-800);
}

.auth-form .form-group input {
  border-color: var(--border);
  border-radius: var(--radius);
}

.auth-form .form-group input:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 2px rgba(26, 84, 150, 0.15);
}

.auth-info {
  background: linear-gradient(135deg, var(--brand-500) 0%, #0E2647 100%);
  color: #FFFFFF;
}

.auth-info-content h2 {
  color: #FFFFFF;
}

.auth-info-content ul {
  color: rgba(255, 255, 255, 0.80);
}


/* ----------------------------------------------------------------
   19. DIVIDERS / SEPARATORS
   ---------------------------------------------------------------- */

hr,
.divider,
.section-divider {
  border-color: var(--border);
}


/* ----------------------------------------------------------------
   20. SCROLLBAR
   ---------------------------------------------------------------- */

* {
  scrollbar-color: var(--border) var(--bg-100);
  scrollbar-width: thin;
}

::-webkit-scrollbar-track {
  background: var(--bg-100);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}


/* ----------------------------------------------------------------
   21. DECORATED HEADINGS
   ---------------------------------------------------------------- */

.decorated-heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.decorated-heading::before,
.decorated-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--border);
}


/* ----------------------------------------------------------------
   22. MOBILE BOTTOM NAV
   ---------------------------------------------------------------- */

.mobile-bottom-nav {
  background: var(--brand-500) !important;
  border-top: 1px solid rgba(26, 84, 150, 0.30) !important;
}

.mobile-tab {
  color: rgba(255, 255, 255, 0.50) !important;
  transition: color 0.15s ease;
}

.mobile-tab.active,
.mobile-tab[aria-current="page"] {
  color: #FFFFFF !important;
}

.mobile-tab__badge {
  background: #1A5496 !important;
  color: #FFFFFF !important;
}


/* ----------------------------------------------------------------
   23. ALERTS
   ---------------------------------------------------------------- */

.alert-info {
  border-color: rgba(26, 84, 150, 0.25);
  background: rgba(26, 84, 150, 0.06);
}

.cc-switcher__button {
  border-radius: var(--radius);
}


/* ----------------------------------------------------------------
   24. TEMA-TOGGLE — dölj
   ---------------------------------------------------------------- */

.theme-toggle,
[data-theme-toggle],
[data-color-scheme],
.color-scheme-toggle,
.theme-switch,
[data-color-scheme-toggle],
button[aria-label*="theme" i],
button[aria-label*="tema" i],
button[aria-label*="mörkt" i],
button[aria-label*="ljust" i] {
  display: none !important;
}


/* ----------------------------------------------------------------
   25. CONTAINER BREDD — fullbredd
   ---------------------------------------------------------------- */

.container {
  width: calc(100% - 2rem) !important;
  max-width: none !important;
}

.site-footer .container {
  width: calc(100% - 2rem) !important;
  max-width: none !important;
}


/* ----------------------------------------------------------------
   26. PAGINATION
   ---------------------------------------------------------------- */

.pagination a {
  border-radius: var(--radius);
}

.pagination a:hover {
  background-color: var(--bg-100);
  border-color: var(--brand-500);
}

.pagination .active {
  background-color: var(--brand-500);
  color: #FFFFFF;
  border-color: var(--brand-500);
}


/* ----------------------------------------------------------------
   27. PREMIUM ACCENT — koppar (sparsamt, medvetet)
   Används bara för utvalda signatur-element.
   ---------------------------------------------------------------- */

/* Logo underline har en subtil ocean blue — inte koppar.
   Koppar reserverad för hover-glow på produktkort och
   aktiv chip-highlight om man vill lyfta det extra. */

/* Produktkort hover — subtil koppar-skimmer */
.product-card:hover {
  box-shadow:
    0 6px 24px rgba(11, 31, 58, 0.08),
    0 0 0 1px rgba(192, 120, 32, 0.10) !important;
}


/* ----------------------------------------------------------------
   28. FOCUS STATES — accessibility
   ---------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

.header-search--utility .search-input-wrapper:focus-within {
  box-shadow: 0 0 0 2px rgba(26, 84, 150, 0.20) !important;
}


/* ----------------------------------------------------------------
   29. KAMPANJSTRIP — dekorativ kampanjbild under nav-chips
   ----------------------------------------------------------------
   Användning: <div class="campaign-strip">
                  <img src="/images/svallgrund.png" alt="Kampanj">
                </div>
   Placeras direkt under nav-chips, ovanför main-content.
   ---------------------------------------------------------------- */

.campaign-strip {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  background-color: var(--bg);
}

.campaign-strip img {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 767px) {
  .campaign-strip img {
    max-height: 120px;
  }
}


/* ----------------------------------------------------------------
   31. ADMIN-TOOLBAR — scroll-hide på mobil
   ----------------------------------------------------------------
   Admin-toolbaren ligger utanför .site-header-wrapper och får
   inte med sig wrapperns translateY(-60px) vid scroll.
   Lägg till egen transition så toolbaren glider upp ur bild
   synkroniserat med headern.
   ---------------------------------------------------------------- */

@media (max-width: 767px) {
  .admin-toolbar {
    transition: transform 0.3s ease;
    will-change: transform;
  }

  body.scrolled .admin-toolbar {
    transform: translateY(-100%);
  }
}


/* ----------------------------------------------------------------
   30. ABOUT PAGE — /om-majbritts och /om-bake-my-day
   Åsidosätter hardkodade orangefärger i frontend.css about-styles.
   ---------------------------------------------------------------- */

/* Hero — byt ut orange accent-stripe mot navy/ocean */
.about-hero {
  background: linear-gradient(180deg, #EEF3F8 0%, #FFFFFF 100%) !important;
}

.about-hero::before {
  background: linear-gradient(90deg, #0B1F3A, #1A5496, #0B1F3A) !important;
}

.about-hero .tagline {
  color: #1A5496 !important;
}

/* Nyckeltal — byt gradient från orange till navy */
.stat-item .stat-value {
  background: linear-gradient(135deg, #0B1F3A 0%, #1A5496 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Tidslinje — byt linje och prickar från orange till navy/ocean */
.timeline::before {
  background: linear-gradient(to bottom, #0B1F3A 0%, #1A5496 50%, #C5D2DF 100%) !important;
}

.timeline-item::before {
  background: linear-gradient(135deg, #1A5496 0%, #0B1F3A 100%) !important;
  box-shadow: 0 3px 12px rgba(26, 84, 150, 0.30) !important;
}

.timeline-year {
  background: linear-gradient(135deg, #0B1F3A 0%, #1A5496 100%) !important;
  box-shadow: 0 2px 8px rgba(11, 31, 58, 0.25) !important;
}

/* Citatruta — byt orange border/färger */
.quote-box {
  background: linear-gradient(135deg, #EEF3F8 0%, #FFFFFF 100%) !important;
  border-left-color: #1A5496 !important;
  border-image: linear-gradient(180deg, #0B1F3A, #1A5496) 1 !important;
  box-shadow: 0 4px 20px rgba(11, 31, 58, 0.06) !important;
}

.quote-box .quote-source {
  color: #1A5496 !important;
}

.quote-box .quote-source::before {
  background: #1A5496 !important;
}

/* Sektionsrubriker — byt orange understreck */
.about-section h2::after {
  background: linear-gradient(90deg, #0B1F3A, #1A5496) !important;
}

/* Badges — navy bakgrund */
.badge-grid .badge-item {
  border-color: rgba(11, 31, 58, 0.12) !important;
}

/* CSR-grid */
.csr-grid .csr-item {
  border-left-color: #1A5496 !important;
}


/* ----------------------------------------------------------------
   32. PRODUKTGRID — fullbild med art.nr under bilden
   ----------------------------------------------------------------
   Mål:
   1. Bild fyller kortets topp kant-i-kant (overflow:hidden klipper hörnen)
   2. Art.nr-header visas under bilden via flexbox order (ingen PHP-ändring)
   3. mix-blend-mode:multiply eliminerar vita produktkanter
   4. Navy-baserade skuggor (matchar varumärket)
   5. Pall-chips overflödar inte kortets kant
   ---------------------------------------------------------------- */

/* Kort klipper sina barn via overflow:hidden */
.product-card {
  overflow: hidden !important;
}

/* media-block: flex-column för att kunna omordna header med order */
.product-card__media-block {
  display: flex !important;
  flex-direction: column !important;
}

/* Bild FÖRST (order:1) — kant-i-kant, ingen egen border-radius */
.product-media,
.product-media--compact {
  order: 1 !important;
  background: linear-gradient(180deg, #EEF3F8 0%, #E3ECF4 100%) !important;
  border: none !important;
  border-radius: 0 !important;
  height: 210px !important;
  min-height: 210px !important;
  max-height: 210px !important;
  padding: 0 !important;
  align-items: stretch !important;
  display: flex !important;
}

/* picture-elementet fyller containern */
.product-media picture {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Bild fyller hela rutan (cover beskär men ger jämn grid) */
.product-media img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 4px 12px rgba(11, 31, 58, 0.10)) !important;
}

/* Hover */
.product-card:hover .product-media img {
  filter: drop-shadow(0 10px 20px rgba(11, 31, 58, 0.18)) !important;
}

/* Placeholder: ingen blend-mode */
.product-media img[data-placeholder="true"] {
  mix-blend-mode: normal;
  opacity: 0.2;
}

/* Art.nr-header ANDRA (order:2) — slim rad under bilden */
.product-card__header {
  order: 2 !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  height: auto !important;
  background: transparent !important;
  padding: 0.3rem 0.7rem 0 !important;
  z-index: auto !important;
}

/* Artikelnummer: diskret typografi */
.product-media-sku {
  letter-spacing: 0.03em !important;
  color: var(--muted) !important;
  font-size: 0.7rem !important;
}

/* Pall-knapprad: wrapping förhindrar overflow */
.product-actions--compact {
  flex-wrap: wrap !important;
}

.product-actions--compact .add-to-cart {
  flex: 1 1 auto !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
  justify-content: flex-end !important;
}

/* Mobil */
@media (max-width: 767px) {
  .product-media,
  .product-media--compact {
    height: 175px !important;
    min-height: 175px !important;
    max-height: 175px !important;
    padding: 0 !important;
  }
}

/* ----------------------------------------------------------------
   33. PRODUKTDETALJ/MODAL — bild fyller hela ramen
   ----------------------------------------------------------------
   Rätt selektorer (verifierade med devtools):
   - Modal-container: .product-preview-overlay__dialog
   - Bildarea:        .modal-card__image-area  (display:flex, 366px bred)
   - Bild:            img.modal-card__image    (width:auto, max-height:200px ← problemet)
   ---------------------------------------------------------------- */

/* Produktkolumn: klipper bilden mot sina rundade hörn (border-radius: 10px) */
.modal-card__product {
  overflow: hidden !important;
}

/* Bildarea: full bredd, texterna i egna sektioner (ej overlay) */
.modal-card__image-area {
  position: relative !important;
  z-index: 1 !important;
  align-items: stretch !important;
  min-height: 300px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: -12px !important;
  margin-right: -12px !important;
  width: calc(100% + 24px) !important;
  overflow: hidden !important;
}

/* picture fyller image-area */
.modal-card__image-area picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* Bild: täck hela ytan med cover */
.modal-card__image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
}

/* Header/titel/köp-rad: återställ till normal flöde (ej overlay) */
.modal-card__image-header,
.modal-card__title-row,
.modal-card__buy-row {
  position: static !important;
  z-index: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* Yttre container: ta bort padding + overflow klipper hörnen */
.product-hero-media {
  padding: 0 !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #EEF3F8 0%, #E3ECF4 100%) !important;
}

/* Art.nr + produkttitel: absolut overlay (frigör bildutrymme) */
.product-hero--modal .product-modal-onsale {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
  padding: 0.6rem 0.8rem !important;
  background: linear-gradient(
    to bottom,
    rgba(238, 243, 248, 0.92) 0%,
    rgba(238, 243, 248, 0.0) 100%
  ) !important;
}

/* Bildramen: nollställ ALL padding, fast höjd */
.product-hero-media-frame,
.product-hero-media-frame--modal,
.product-hero--modal .product-hero-media-frame {
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  width: 100% !important;
  height: 340px !important;
  overflow: hidden !important;
  display: block !important;
  position: relative !important;
}

/* Zoom-knapp: absolut, täcker hela ramen */
.product-image-zoom-trigger {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  cursor: zoom-in !important;
}

/* picture fyller knappen */
.product-hero-media-frame picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* Bild: cover fyller hela ramen */
.product-hero-media-frame img,
.product-hero--modal .product-hero-media-frame img {
  border-radius: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  mix-blend-mode: normal;
}

/* Navy hover-glöd istället för orange */
.product-hero-media-frame::after {
  background: radial-gradient(
    circle,
    rgba(11, 31, 58, 0.12),
    rgba(11, 31, 58, 0.04),
    transparent 70%
  ) !important;
}