/* ==========================================================================
   theme.css — Clas Ohlson (www.clasohlson.com/se)
   Kundens tema. Alla värden kommer från brand_brief.json (Mark).
   daisyUI standardtema används INTE — data-theme="clasohlson" åsidosätter allt.
   ========================================================================== */

/* --- Custom daisyUI theme: clasohlson ------------------------------------ */
[data-theme="clasohlson"] {
  color-scheme: light;

  /* primary  = #78D7FA (signaturblå, header/footer) */
  --p: 84.19% 0.0888 218.5;
  --pc: 0% 0 0;                 /* svart text på blått */

  /* secondary = #000000 (svart — dominerande kontrast/knappfärg) */
  --s: 0% 0 0;
  --sc: 100% 0 0;

  /* accent   = #B20000 (rea-/reapris-rött) */
  --a: 45.17% 0.1876 29.2;
  --ac: 100% 0 0;

  /* neutral  = svart (knappar: button_bg #000000 / button_text #FFFFFF) */
  --n: 0% 0 0;
  --nc: 100% 0 0;

  /* base: bg #FFFFFF, surface #F7F7F7, text #000000, border #000000 */
  --b1: 100% 0 0;
  --b2: 97.15% 0 0;
  --b3: 92% 0 0;
  --bc: 0% 0 0;

  --in: 84.19% 0.0888 218.5;
  --inc: 0% 0 0;
  --su: 45.17% 0.1876 29.2;     /* colors.success = MISSING → se build-report.md */
  --suc: 100% 0 0;
  --wa: 84.19% 0.0888 218.5;
  --wac: 0% 0 0;
  --er: 45.17% 0.1876 29.2;
  --erc: 100% 0 0;

  /* buttons: radius_px 3, style fill, uppercase false */
  --rounded-box: 3px;
  --rounded-btn: 3px;
  --rounded-badge: 3px;
  --animation-btn: 0s;
  --animation-input: 0s;
  --btn-focus-scale: 1;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 3px;
}

/* --- Rå brief-tokens (för OpenCart-konvertering) ------------------------- */
:root {
  --co-primary: #78D7FA;
  --co-secondary: #000000;
  --co-accent: #B20000;
  --co-bg: #FFFFFF;
  --co-surface: #F7F7F7;
  --co-text: #000000;
  --co-border: #000000;
  --co-header-bg: #78D7FA;
  --co-footer-bg: #78D7FA;
  --co-utility-bar-bg: #000000; /* color_notes.utility_bar_bg — promo_bar_bg = MISSING */
  --co-button-bg: #000000;
  --co-button-text: #FFFFFF;
  --co-radius-btn: 3px;

  --co-font-heading: "Clas Ohlson Sans Web", "Open Sans", Arial, sans-serif;
  --co-font-body: "Clas Ohlson Sans Web", "Open Sans", Arial, sans-serif;
}

/* --- Typografi ----------------------------------------------------------
   fonts.google_fonts_url = MISSING (självhostad webfont hos referensen).
   Fallback-stacken från briefen används tills fontfilerna levereras.
   ------------------------------------------------------------------------ */
html,
body {
  font-family: var(--co-font-body);
  background: var(--co-bg);
  color: var(--co-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.co-heading {
  font-family: var(--co-font-heading);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* --- Knappar (fill, svart, 3px, sentence case) --------------------------- */
.btn {
  text-transform: none;
  font-weight: 400;
}
.btn-co {
  background: var(--co-button-bg);
  color: var(--co-button-text);
  border: 1px solid var(--co-button-bg);
  border-radius: var(--co-radius-btn);
  text-transform: none;
  font-weight: 400;
}
.btn-co:hover {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: var(--co-button-text);
}
.btn-co-outline {
  background: transparent;
  color: var(--co-text);
  border: 1px solid var(--co-border);
  border-radius: var(--co-radius-btn);
  text-transform: none;
  font-weight: 400;
}
.btn-co-outline:hover {
  background: var(--co-button-bg);
  color: var(--co-button-text);
}

/* daisyUI .btn-primary has no --p/--pc fallback in this build (--fallback-p is only
   defined inside an @supports-not-oklch block), so text and background collapse to
   the same color. Force it to the site's standard black/white button. */
.btn-primary {
  background-color: var(--co-button-bg);
  color: var(--co-button-text);
  border-color: var(--co-button-bg);
}
.btn-primary:hover {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
  color: var(--co-button-text);
}

/* daisyUI's own dialog-style ".modal"/".modal-backdrop" components share a class name
   with Bootstrap's modal (checkout.js uses Bootstrap modals for the shipping/payment
   method picker), and daisyui.css loads after bootstrap.css — its opacity:0/display:grid/
   pointer-events:none/transparent-backdrop rules silently win the cascade, so the
   Bootstrap modal is appended to the DOM and marked "show" by JS but stays invisible
   and unclickable. No daisyUI dialog component is used anywhere in this theme, so it's
   safe to force plain Bootstrap semantics back here (theme.css loads last). */
.modal.show {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background-color: transparent !important;
  z-index: 1055 !important;
  /* daisyUI's ".modal" also declares transition-property:transform,opacity —
     harmless for the small shipping/payment popups, but for a lightbox with a
     large raster (webp) image the transitioning/compositing layer can get stuck
     mid-transition in some Chromium builds, leaving the image unpainted even
     though layout/opacity report as finished. Skip the transition entirely. */
  transition: none !important;
  transform: none !important;
}
.modal:not(.show) {
  display: none !important;
}
.modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1050 !important;
  background-color: #000 !important;
}
.modal-backdrop.show {
  opacity: 0.5 !important;
}

/* Same daisyUI/.alert vs Bootstrap/.alert class-name collision as the .modal issue
   above: daisyUI's ".alert{width:100%;display:grid}" wins the cascade and turns the
   "Added to cart" toast (appended into the fixed #alert corner container) into a
   full-width bar that shoves page content down. Scoped to #alert only — the
   intentional full-width inline page banners (cart/gdpr/compare notices) must stay
   untouched. */
#alert {
  width: 380px;
  max-width: 380px;
}
#alert .alert {
  display: block;
  width: 100%;
  min-width: 0 !important; /* core stylesheet.css sets #alert .alert{min-width:400px} */
  box-sizing: border-box;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
}
@media (max-width: 576px) {
  #alert {
    left: 0.75rem;
    right: 0.75rem;
    max-width: none;
  }
}

/* Lägg-i-varukorg-knapp under produktkort: rundad endast nedtill (0 0 3px 3px) */
.btn-card-cart {
  border-radius: 0 0 3px 3px;
  background: var(--co-button-bg);
  color: var(--co-button-text);
  border: 0;
  width: 100%;
  font-weight: 400;
  text-transform: none;
}
.btn-card-cart:hover { background: #1a1a1a; color: #fff; }

/* --- Barer -------------------------------------------------------------- */
.co-utility-bar {
  background: var(--co-utility-bar-bg);
  color: #ffffff;
  font-size: 0.8125rem;
}
.co-utility-bar a { color: #ffffff; }
.co-header { background: var(--co-header-bg); color: var(--co-text); }
.co-footer { background: var(--co-footer-bg); color: var(--co-text); }
.co-footer a { color: var(--co-text); }
.co-footer a:hover { text-decoration: underline; }

/* --- Produktkort -------------------------------------------------------- */
.co-card {
  background: var(--co-surface);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Kvadratisk mediaruta. Bilden positioneras absolut mot padding-boxen så att
   höga produktbilder inte kan tänja kortet och spräcka rutnätet. */
.co-card-media {
  position: relative;
  background: var(--co-surface);
  aspect-ratio: 1 / 1;
  display: block;
  min-height: 0;
  padding: 1rem;
  /* mix-blend-mode below needs its own stacking context, otherwise its blend
     backdrop can bleed through unrelated higher layers (e.g. a lightbox modal
     opened above it) in Chromium's compositor. */
  isolation: isolate;
}
.co-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
/* Rating row: fixed height reserved on every card (with or without reviews) so cards
   in the same row line up regardless of whether a product has reviews yet. */
.co-card-rating {
  height: 1rem;
  line-height: 1;
  color: var(--co-accent);
}
.co-card-rating .bi-star {
  color: var(--co-border);
  opacity: 0.4;
}

/* Interactive 5-star review rating input (replaces stock Bad...Good radio row). */
.co-star-rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.co-star-rating-item {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--co-accent);
}
.co-star-rating-item .bi-star {
  color: var(--co-border);
  opacity: 0.4;
}

/* Cart page: theme font/colors + quantity stepper (replaces input + separate
   "Update" button). */
.co-cart-table {
  font-family: var(--co-font-body);
  color: var(--co-text);
}
.co-cart-table thead td {
  font-weight: 700;
  background: var(--co-surface);
}
.co-qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--co-border);
  border-radius: var(--co-radius-btn);
  overflow: hidden;
}
.co-qty-btn {
  background: var(--co-surface);
  border: 0;
  width: 2.25rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.co-qty-btn:hover {
  background: var(--co-button-bg);
  color: #fff;
}
.co-qty-input {
  width: 2.75rem;
  border: 0;
  border-left: 1px solid var(--co-border);
  border-right: 1px solid var(--co-border);
  text-align: center;
}
.co-qty-remove {
  margin-left: 0.5rem;
  border-radius: var(--co-radius-btn);
}

/* Site map: nested category/account link lists. */
.co-sitemap ul {
  list-style: disc;
  margin: 0.25rem 0 0.5rem 1.25rem;
}
.co-sitemap > ul {
  margin-left: 0;
}
.co-sitemap li {
  margin-bottom: 0.25rem;
}

.co-price-new { color: var(--co-accent); font-weight: 700; }
.co-price { color: var(--co-text); font-weight: 700; }
.co-price-old { text-decoration: line-through; opacity: 0.7; font-weight: 400; }
/* Old (struck-through) price must never spill past the card edge on narrow cards:
   let the price wrap onto its own line instead of overflowing with nowrap. */
.co-card-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
}
@media (max-width: 576px) {
  .co-price-old { font-size: 0.75rem; }
}
.co-badge-discount {
  background: var(--co-accent);
  color: #fff;
  font-weight: 700;
  border-radius: 3px;
  padding: 0.125rem 0.375rem;
  font-size: 0.75rem;
  line-height: 1.4;
}

/* --- Kampanjplattor ----------------------------------------------------- */
.co-tile {
  position: relative;
  display: block;
  border-radius: 3px;
  overflow: hidden;
  background: var(--co-surface);
}
.co-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.co-tile:hover img { transform: scale(1.03); }
.co-tile-cap {
  padding: 0.75rem 0.25rem 0;
  font-weight: 500;
}

/* Saknad bild (se image-prompts.md) */
.co-img-missing {
  background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 10px, #e4e4e4 10px, #e4e4e4 20px);
}

/* --- Mobil drawer: höger sida, INTE halv skärm -------------------------- */
.co-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 82vw;
  max-width: 340px;
  background: var(--co-bg);
  transform: translateX(100%);
  transition: transform 0.28s ease;
  z-index: 60;
  overflow-y: auto;
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.18);
}
#co-nav-toggle:checked ~ .co-drawer { transform: translateX(0); }
.co-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease;
  z-index: 55;
}
#co-nav-toggle:checked ~ .co-drawer-overlay { opacity: 1; visibility: visible; }
#co-nav-toggle { display: none; }

/* --- Cookie-banner ------------------------------------------------------ */
.co-cookiebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: var(--co-bg);
  border-top: 1px solid var(--co-border);
  padding: 1rem;
}
.co-cookiebar[hidden] { display: none; }

/* --- Diverse ------------------------------------------------------------ */
.co-usp-strip { border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.co-link-underline:hover { text-decoration: underline; }
.co-prose p { margin-bottom: 1rem; line-height: 1.65; }
.co-prose h2 { margin: 2rem 0 0.75rem; font-size: 1.5rem; }
.co-prose h3 { margin: 1.5rem 0 0.5rem; font-size: 1.125rem; font-weight: 700; }
.co-prose ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1rem; }
.co-prose ul li { margin-bottom: 0.35rem; }
.co-missing {
  background: #fff3cd;
  border: 1px dashed var(--co-accent);
  color: var(--co-accent);
  padding: 0.125rem 0.375rem;
  font-family: monospace;
  font-size: 0.875rem;
}
.co-container { max-width: 1440px; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 1024px) {
  .co-container { padding-left: 2rem; padding-right: 2rem; }
}

/* --- Carusell för produktwidgets (bästsäljare, nyheter, rekommenderat,
   liknande produkter) — horisontell scroll-snap, exakt ett kort per klick,
   ingen "peek" av nästa kort. ------------------------------------------- */
.co-carousel {
  position: relative;
  padding: 0 2.75rem;
}
.co-carousel-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.co-carousel-track::-webkit-scrollbar { display: none; }
.co-carousel-item {
  scroll-snap-align: start;
  flex: 0 0 calc(50% - 0.5rem);
  min-width: 0;
}
@media (min-width: 768px) {
  .co-carousel-item { flex-basis: calc(33.333% - 0.667rem); }
}
@media (min-width: 1024px) {
  .co-carousel-item { flex-basis: calc(25% - 0.75rem); }
}
.co-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--co-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.co-carousel-btn:hover { background: var(--co-button-bg); color: #fff; }
.co-carousel-prev { left: 0; }
.co-carousel-next { right: 0; }
.co-carousel-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

/* --- Checkout address summary card (shown after "Fortsätt") ------------- */
.co-summary-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--co-surface);
  border: 1px solid var(--co-border);
  border-radius: 3px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.co-summary-check { color: #1a7f37; font-size: 1.25rem; margin-top: 0.15rem; }
.co-summary-text { flex: 1; font-size: 0.9rem; line-height: 1.5; }
.co-summary-edit { margin-left: auto; white-space: nowrap; }

/* --- Account sidebar menu (replaces bare Bootstrap list-group) ---------- */
.co-account-menu {
  display: flex;
  flex-direction: column;
  background: var(--co-surface);
  border: 1px solid var(--co-border);
  border-radius: 3px;
  overflow: hidden;
}
.co-account-menu-item {
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--co-border);
}
.co-account-menu-item:last-child { border-bottom: 0; }
.co-account-menu-item:hover { background: rgba(0, 0, 0, 0.04); }
.co-account-menu-logout { color: #b3261e; font-weight: 600; }

/* --- Filter-sidebar (kategori + sök, samma komponent) -------------------- */
.co-filters {
  width: 100%;
  background: var(--co-surface);
  border: 1px solid var(--co-border);
  border-radius: 3px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}
@media (min-width: 768px) {
  .co-filters { max-width: 260px; }
}
.co-filter-group {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.co-filter-group:first-of-type { padding-top: 0; }
.co-filter-group:last-of-type { border-bottom: 0; }
.co-filter-brand-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.co-filter-brand-item .co-filter-count { color: var(--co-text); opacity: 0.6; margin-left: auto; }
.btn-sm { height: 2rem; font-size: 0.8125rem; padding: 0 0.75rem; }

/* --- Sökrutans autokomplettering (fix 10) -------------------------------- */
.co-search-wrap { position: relative; }
.co-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  border: 1px solid var(--co-border);
  border-top: 0;
  border-radius: 0 0 3px 3px;
  max-height: 70vh;
  overflow-y: auto;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.co-autocomplete-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  color: var(--co-text);
  cursor: pointer;
}
.co-autocomplete-item img {
  width: 45px;
  height: 45px;
  object-fit: contain;
  mix-blend-mode: multiply;
  flex-shrink: 0;
}
.co-autocomplete-item-name { font-size: 0.875rem; flex: 1; }
.co-autocomplete-item-price { font-size: 0.875rem; font-weight: 700; white-space: nowrap; }
.co-autocomplete-item.active,
.co-autocomplete-item:hover { background: var(--co-surface); }
.co-autocomplete-empty { padding: 0.75rem; font-size: 0.875rem; color: var(--co-text); opacity: 0.7; }