*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #222;
    background: #fff;
    line-height: 1.5;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ── Header ── */
header {
    background: #1a1a1a;
    color: #fff;
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
header .container { display: flex; align-items: center; gap: 16px; }
.logo { color: #fff; text-decoration: none; font-size: 1.3rem; font-weight: 700; flex-shrink: 0; }
.logo span { color: #e85d26; }

/* Desktop nav */
header nav { display: flex; gap: 16px; flex: 1; flex-wrap: wrap; }
header nav a { color: #ccc; text-decoration: none; font-size: 0.85rem; white-space: nowrap; }
header nav a:hover { color: #fff; }

/* Header search */
.header-search { display: flex; gap: 6px; flex-shrink: 0; }
.header-search input { padding: 6px 10px; border: none; border-radius: 4px; font-size: 0.85rem; width: 160px; }
.header-search button { padding: 6px 10px; background: #e85d26; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 0.85rem; }

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; margin-left: auto; }
.hamburger span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: all 0.2s; }

/* Mobile nav drawer */
.mobile-nav {
    display: none;
    flex-direction: column;
    background: #1a1a1a;
    padding: 12px 16px 16px;
    border-top: 1px solid #333;
}
.mobile-nav.open { display: flex; }
.mobile-nav a { color: #ccc; text-decoration: none; padding: 10px 0; border-bottom: 1px solid #2a2a2a; font-size: 1rem; }
.mobile-nav a:last-child { border-bottom: none; }
.mobile-search { display: flex; gap: 8px; margin-top: 12px; }
.mobile-search input { flex: 1; padding: 8px 12px; border: none; border-radius: 4px; font-size: 0.9rem; }
.mobile-search button { padding: 8px 14px; background: #e85d26; color: #fff; border: none; border-radius: 4px; cursor: pointer; }

/* ── Breadcrumb ── */
.breadcrumb { font-size: 0.82rem; color: #666; margin: 12px 0; line-height: 1.6; }
.breadcrumb a { color: #e85d26; text-decoration: none; }

/* ── Hero ── */
.hero { text-align: center; padding: 36px 0 24px; }
.hero h1 { font-size: 2rem; margin-bottom: 8px; }
.hero p { color: #555; font-size: 1rem; }

/* ── Kategori grid ── */
h2 { font-size: 1.3rem; margin: 28px 0 14px; }
.kategori-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 28px; }
.kategori-kort {
    display: flex; flex-direction: column; gap: 3px;
    padding: 14px 12px; background: #f5f5f5; border-radius: 8px;
    text-decoration: none; color: #222; font-size: 0.9rem;
    transition: background 0.15s;
}
.kategori-kort:hover { background: #ebebeb; }
.kategori-kort .antal { font-size: 0.75rem; color: #888; }

/* ── Produkt grid ── */
.produkt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}
.produkt-kort { text-decoration: none; color: #222; }
.produkt-kort .billede {
    aspect-ratio: 3/4; overflow: hidden; border-radius: 6px;
    background: #f0f0f0; margin-bottom: 8px;
}
.produkt-kort img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
.produkt-kort:hover img { transform: scale(1.03); }
.produkt-kort h3 { font-size: 0.85rem; font-weight: 500; margin-bottom: 3px; line-height: 1.4; }
.produkt-kort .pris { font-size: 0.9rem; font-weight: 700; color: #e85d26; }
.produkt-kort .forhandler { font-size: 0.72rem; color: #888; }
.antal { color: #666; font-size: 0.88rem; margin-bottom: 14px; }

/* ── Pagination ── */
.pagination { display: flex; gap: 6px; margin: 28px 0; flex-wrap: wrap; }
.pagination a { padding: 6px 11px; border: 1px solid #ddd; border-radius: 4px; text-decoration: none; color: #222; font-size: 0.9rem; }
.pagination a.aktiv { background: #e85d26; color: #fff; border-color: #e85d26; }

/* ── Produktside ── */
.produkt-side { padding: 12px 0 48px; }
.produkt-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 16px; }
.produkt-billede img { width: 100%; border-radius: 8px; }
.forhandler-label { font-size: 0.82rem; color: #888; margin-bottom: 4px; }
.produkt-detaljer h1 { font-size: 1.6rem; margin-bottom: 12px; line-height: 1.3; }
.beskrivelse { color: #555; margin-bottom: 20px; font-size: 0.92rem; }

.stoerrelse-valg h3 { font-size: 0.95rem; margin-bottom: 10px; }
.stoerrelse-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.stoerrelse-option {
    display: flex; flex-direction: column; align-items: center;
    padding: 9px 13px; border: 2px solid #ddd; border-radius: 6px;
    cursor: pointer; transition: border-color 0.15s; min-width: 86px;
}
.stoerrelse-option input { display: none; }
.stoerrelse-option:hover { border-color: #e85d26; }
.stoerrelse-option.valgt { border-color: #e85d26; background: #fff5f0; }
.stoerrelse-option .maal { font-size: 0.82rem; font-weight: 600; }
.stoerrelse-option .pris { font-size: 0.88rem; color: #e85d26; font-weight: 700; }
.stoerrelse-option .gl-pris { font-size: 0.72rem; color: #999; text-decoration: line-through; }

.kob-sektion { margin-top: 8px; }
.leveringstid, .fragt { font-size: 0.88rem; color: #555; margin-bottom: 5px; }
.fragt { color: #2a8a2a; }
.kob-knap {
    display: block; margin-top: 14px; text-align: center;
    padding: 15px 28px; background: #e85d26; color: #fff;
    text-decoration: none; border-radius: 6px; font-size: 1rem; font-weight: 600;
    transition: background 0.15s;
}
.kob-knap:hover { background: #cc4d1a; }

/* ── Se alle ── */
.se-alle { display: inline-block; margin-top: 18px; color: #e85d26; text-decoration: none; font-weight: 600; }

/* ── Footer ── */
footer { background: #1a1a1a; color: #888; padding: 24px 0; margin-top: 48px; font-size: 0.83rem; }
footer a { color: #bbb; }
footer p + p { margin-top: 6px; }

/* ── Søgeside ── */
.soeg-form { display: flex; gap: 8px; margin: 18px 0 24px; }
.soeg-form input { flex: 1; padding: 10px 14px; border: 2px solid #ddd; border-radius: 6px; font-size: 1rem; max-width: 480px; }
.soeg-form input:focus { outline: none; border-color: #e85d26; }
.soeg-form button { padding: 10px 18px; background: #e85d26; color: #fff; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; }
.ingen-resultater { color: #555; margin-top: 16px; }

/* ══════════════════════════════════════
   MOBIL  (≤ 768px)
══════════════════════════════════════ */
@media (max-width: 768px) {

    /* Header — gem desktop nav og søgefelt */
    header nav,
    .header-search { display: none; }
    .hamburger { display: flex; }

    /* Produkt grid: 2 kolonner på mobil */
    .produkt-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .produkt-kort h3 { font-size: 0.78rem; }
    .produkt-kort .pris { font-size: 0.82rem; }

    /* Kategori grid: 2 kolonner */
    .kategori-grid { grid-template-columns: repeat(2, 1fr); }

    /* Hero */
    .hero { padding: 24px 0 16px; }
    .hero h1 { font-size: 1.5rem; }

    /* Produktside: stack lodret */
    .produkt-layout { grid-template-columns: 1fr; gap: 20px; }
    .produkt-detaljer h1 { font-size: 1.3rem; }
    .kob-knap { width: 100%; }

    /* Søgefelt */
    .soeg-form { flex-direction: column; }
    .soeg-form input { max-width: 100%; }

    /* Pagination kompakt */
    .pagination a { padding: 5px 9px; font-size: 0.82rem; }

    h2 { font-size: 1.15rem; margin: 20px 0 12px; }
}

/* Lille mobil (≤ 380px) */
@media (max-width: 380px) {
    .produkt-grid { gap: 8px; }
    .produkt-kort .billede { border-radius: 4px; }
}