/* NewHome 2026 — design overrides
   Läggs in efter main3.css. Rör inte Bootstrap-grunden.
   -------------------------------------------------------- */

/* ── 1. Design tokens ─────────────────────────────────── */
:root {
  --nh-red:        #c0392b;
  --nh-red-dark:   #a93226;
  --nh-red-light:  #e74c3c;
  --nh-dark:       #1a1a1a;
  --nh-gray-100:   #f8f8f8;
  --nh-gray-200:   #ebebeb;
  --nh-gray-500:   #888;
  --nh-text:       #222;
  --nh-radius:     8px;
  --nh-radius-sm:  4px;
  --nh-shadow-sm:  0 1px 4px rgba(0,0,0,.08);
  --nh-shadow-md:  0 4px 16px rgba(0,0,0,.10);
  --nh-shadow-lg:  0 8px 28px rgba(0,0,0,.13);
  --nh-transition: .18s ease;
  --nh-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── 2. Typsnitt ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
  font-family: var(--nh-font);
  color: var(--nh-text);
  background: #fff;
}

/* ── 3. Topbar ────────────────────────────────────────── */
#toplinks {
  background: var(--nh-gray-100);
  border-bottom: 1px solid var(--nh-gray-200);
  font-size: .8rem;
  color: var(--nh-gray-500);
}

/* ── 4. Header / logo-rad ─────────────────────────────── */
#header {
  background: #fff;
  border-bottom: 1px solid var(--nh-gray-200);
  box-shadow: var(--nh-shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Sökfält */
#search input[type="text"] {
  border: 1.5px solid var(--nh-gray-200);
  border-radius: var(--nh-radius-sm);
  padding: 8px 14px;
  font-size: .9rem;
  transition: border-color var(--nh-transition);
}
#search input[type="text"]:focus {
  outline: none;
  border-color: var(--nh-red);
  box-shadow: 0 0 0 3px rgba(192,57,43,.12);
}

/* Varukorg-knapp */
#cart > button {
  background: var(--nh-red);
  border: none;
  border-radius: var(--nh-radius-sm);
  color: #fff;
  font-weight: 600;
  padding: 8px 16px;
  transition: background var(--nh-transition);
}
#cart > button:hover {
  background: var(--nh-red-dark);
}

/* ── 5. Navbar ────────────────────────────────────────── */
div.bg-menu {
  background: var(--nh-dark);
}
nav#menu {
  padding: 0;
}
nav#menu .nav-item,
nav#menu span.nav-item {
  display: inline-flex;
  align-items: center;
}
nav#menu .nav-link,
nav#menu a.nav-link {
  color: rgba(255,255,255,.88) !important;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 10px 14px !important;
  transition: color var(--nh-transition), background var(--nh-transition);
}
nav#menu .nav-link:hover,
nav#menu a.nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.1);
  text-decoration: none;
}

/* ── 6. Produktkort ───────────────────────────────────── */
.product-card {
  background: #fff;
  border: 1px solid var(--nh-gray-200);
  border-radius: var(--nh-radius);
  overflow: visible; /* måste vara visible så ribbon inte klipps vid hover */
  transition: box-shadow var(--nh-transition), transform var(--nh-transition);
  height: 100%;
  position: relative;
}
.product-card:hover {
  box-shadow: var(--nh-shadow-lg);
  transform: translateY(-3px);
}

/* Ribbon alltid ovanpå bilden */
.product-card .r-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  pointer-events: none;
}

.product-image {
  background: var(--nh-gray-100);
  overflow: hidden;
  border-radius: var(--nh-radius) var(--nh-radius) 0 0;
}
.product-image img {
  transition: transform .25s ease;
}
.product-card:hover .product-image img {
  transform: scale(1.04);
}

/* Produkttitel — normal case istället för ALL CAPS */
.card-title,
.card-title a,
.h5.card-title,
.h5.card-title a {
  text-transform: none !important;
  font-size: .88rem;
  font-weight: 600;
  color: var(--nh-text);
  line-height: 1.35;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}
.card-title a:hover {
  color: var(--nh-red);
  text-decoration: none;
}

/* Pris */
.price-wrap {
  padding: 4px 12px 0;
}
.price-new {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--nh-text);
}
.price-new.rabatt {
  color: var(--nh-red);
}
.price-old {
  font-size: .82rem;
  color: var(--nh-gray-500);
  text-decoration: line-through;
  margin-left: 6px;
}

/* Köp-knapp */
.product-card .btn-outline-secondary {
  background: var(--nh-red);
  border: none;
  border-radius: var(--nh-radius-sm);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 8px 12px;
  transition: background var(--nh-transition);
}
.product-card .btn-outline-secondary:hover {
  background: var(--nh-red-dark);
  color: #fff;
}

/* Ribbon (Kampanj / Nyhet) */
.ribbon {
  background: var(--nh-red);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 0 0 var(--nh-radius-sm) 0;
}

/* ── 7. Sektionsrubriker ──────────────────────────────── */
h3.section-title,
.content-area h3:not(.modal-title) {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--nh-text);
  letter-spacing: .02em;
  margin-bottom: 1rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--nh-red);
  display: inline-block;
}

/* ── 8. Footer ────────────────────────────────────────── */
footer#footer {
  background: var(--nh-dark);
  color: rgba(255,255,255,.7);
  font-size: .82rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
}
footer#footer h3 {
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
footer#footer a {
  color: rgba(255,255,255,.6);
  transition: color var(--nh-transition);
}
footer#footer a:hover {
  color: #fff;
  text-decoration: none;
}

/* ── 9. Cookie-banner — mindre aggressiv ──────────────── */
#cookie-bar,
.cookie-bar,
[id*="cookie"] .modal-dialog,
.modal-backdrop {
  /* Dölj overlay-bakgrunden om det är cookie-modal */
}
/* Specifikt för newhome cookie-implementationen */
#cookieconsent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto !important;
  background: rgba(26,26,26,.96);
  color: rgba(255,255,255,.85);
  font-size: .82rem;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 9999;
  box-shadow: 0 -2px 12px rgba(0,0,0,.2);
}

/* ── 10. Breadcrumb ───────────────────────────────────── */
.breadcrumb {
  background: transparent;
  padding: 8px 0;
  font-size: .8rem;
  color: var(--nh-gray-500);
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--nh-gray-500);
}
.breadcrumb-item a {
  color: var(--nh-gray-500);
}
.breadcrumb-item.active {
  color: var(--nh-text);
}

/* ── 11. Knappar globalt ──────────────────────────────── */
.btn-primary {
  background: var(--nh-red);
  border-color: var(--nh-red);
  border-radius: var(--nh-radius-sm);
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--nh-red-dark);
  border-color: var(--nh-red-dark);
}

/* ── 12. Produktsida ──────────────────────────────────── */
#product h1 {
  font-size: 1.4rem;
  font-weight: 700;
}
#product .price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nh-red);
}