/* Homepage-only styles, loaded after styles.css and entry.css (moved out of
   index.html so the HTML stays small and this file can be cached). */

      body {
        margin: 0;
        color: var(--ink);
        background: var(--color-page-gradient);
        font-family: var(--font-brand);
        min-height: 100vh;
      }

      body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        opacity: 0.35;
        background-image:
          linear-gradient(rgba(18, 33, 30, 0.045) 1px, transparent 1px),
          linear-gradient(90deg, rgba(18, 33, 30, 0.045) 1px, transparent 1px);
        background-size: 42px 42px;
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 92%);
      }

      .top-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-left: auto;
        min-width: 0;
      }

      .hero {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(31, 26, 23, 0.1);
        border-radius: var(--radius-xl);
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 248, 237, 0.88)),
          linear-gradient(180deg, rgba(33, 77, 70, 0.06), transparent);
        box-shadow: var(--shadow);
        padding: 34px;
      }

      .hero::after {
        content: "";
        position: absolute;
        inset: auto -120px -140px auto;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(33, 77, 70, 0.15), transparent 70%);
        opacity: 0.72;
      }

      .hero-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 28px;
        align-items: start;
        margin-top: 18px;
      }

      .hero h1 {
        margin: 14px 0 16px;
        font-family: var(--font-brand);
        font-size: clamp(44px, 6vw, 82px);
        line-height: 0.95;
        letter-spacing: -0.04em;
        max-width: 10ch;
      }

      .hero p {
        margin: 0;
        max-width: 58ch;
        color: var(--muted);
        font-size: 17px;
        line-height: 1.7;
      }

      .hero-punchline {
        margin: 0 0 20px !important;
        color: var(--accent) !important;
        font-size: 14px !important;
        font-weight: 700;
        letter-spacing: .14em;
        line-height: 1.4 !important;
        text-transform: uppercase;
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 26px;
      }

      .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 14px 18px;
        border-radius: 999px;
        text-decoration: none;
        font-weight: 600;
        border: 1px solid transparent;
        transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
      }

      .button-primary {
        background: var(--button-primary-bg);
        color: var(--button-primary-text);
        box-shadow: 0 12px 30px var(--button-primary-shadow);
      }

      .button-primary.is-added {
        background: rgba(255, 255, 255, 0.98);
        color: var(--ink);
        border-color: rgba(31, 26, 23, 0.14);
        box-shadow: 0 10px 24px rgba(31, 26, 23, 0.08);
      }

      .button-secondary {
        background: var(--button-secondary-bg);
        color: var(--button-secondary-text);
        border-color: var(--button-secondary-border);
      }

      .hero-panel {
        display: grid;
        gap: 14px;
        padding: 18px;
        border-radius: var(--radius-lg);
        background: rgba(255, 255, 255, 0.62);
        border: 1px solid rgba(31, 26, 23, 0.08);
      }

      .stat {
        padding: 18px 18px 16px;
        border-radius: 22px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 249, 240, 0.68));
        border: 1px solid rgba(31, 26, 23, 0.08);
      }

      .stat small {
        display: block;
        color: var(--muted);
        font-size: 12px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        margin-bottom: 10px;
      }

      .stat strong {
        display: block;
        font-family: var(--font-brand);
        font-size: 28px;
        line-height: 1;
        margin-bottom: 8px;
      }

      .stat span {
        color: var(--muted);
        font-size: 14px;
        line-height: 1.5;
      }

      .section {
        margin-top: 26px;
        padding: 28px 0 0;
      }

      .section-head {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        align-items: end;
        margin-bottom: 18px;
      }

      /* Give the "Produkter" heading room to breathe below the full-bleed
         delivery ticker instead of sitting right against its bottom edge. */
      .delivery-banner + .section-head {
        margin-top: clamp(32px, 5vw, 48px);
      }

      .section-head h2 {
        margin: 0;
        font-family: var(--font-brand);
        font-size: clamp(28px, 3.3vw, 42px);
        letter-spacing: -0.03em;
      }

      .section-head p {
        margin: 0;
        max-width: 44ch;
        color: var(--muted);
        line-height: 1.6;
      }

      .section-head p,
      .card .note,
      .card-more__list,
      .accessory-card p,
      .info p,
      .info li {
        font-family: var(--font-description);
        letter-spacing: 0.01em;
      }

      .calculator-shell {
        display: grid;
        grid-template-columns: 1fr 0.85fr;
        gap: 18px;
      }

      .mini-card {
        padding: 22px;
        border-radius: var(--radius-lg);
        border: 1px solid rgba(31, 26, 23, 0.08);
        background: rgba(255, 255, 255, 0.72);
        box-shadow: 0 12px 28px rgba(31, 26, 23, 0.06);
      }

      .mini-card h3 {
        margin: 0 0 10px;
        font-family: var(--font-brand);
        font-size: 24px;
      }

      .mini-card p,
      .mini-card li,
      .mini-card label {
        color: var(--muted);
        line-height: 1.7;
      }

      .calculator-form {
        display: grid;
        gap: 14px;
      }

      .field {
        display: grid;
        gap: 8px;
      }

      .field input {
        width: 100%;
        padding: 14px 16px;
        border-radius: 16px;
        border: 1px solid rgba(31, 26, 23, 0.14);
        background: rgba(255, 255, 255, 0.9);
        color: var(--ink);
        font-size: 16px;
      }

      .field input:focus {
        outline: 2px solid #2f6d64;
        outline-offset: 2px;
      }

      .field select {
        width: 100%;
        padding: 14px 16px;
        border-radius: 16px;
        border: 1px solid rgba(31, 26, 23, 0.14);
        background: rgba(255, 255, 255, 0.9);
        color: var(--ink);
        font-size: 16px;
      }

      .field select:focus {
        outline: 2px solid #2f6d64;
        outline-offset: 2px;
      }

      .calc-results {
        display: grid;
        gap: 12px;
      }

      .calc-row {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 14px 0;
        border-top: 1px solid rgba(31, 26, 23, 0.08);
      }

      .calc-row:first-child {
        border-top: 0;
        padding-top: 0;
      }

      .faq-list {
        display: grid;
        gap: 12px;
      }

      .faq-item {
        padding: 18px 0;
        border-top: 1px solid rgba(31, 26, 23, 0.08);
      }

      .faq-item:first-child {
        border-top: 0;
        padding-top: 0;
      }

      .faq-question {
        cursor: pointer;
        list-style: none;
        display: flex;
        justify-content: space-between;
        gap: 18px;
        font-weight: 600;
      }

      .faq-question::-webkit-details-marker {
        display: none;
      }

      .faq-question::after {
        content: "+";
        color: var(--accent);
        font-weight: 700;
      }

      .faq-item[open] .faq-question::after {
        content: "–";
      }

      .faq-item p {
        margin: 10px 0 0;
        max-width: 74ch;
        line-height: 1.7;
        color: var(--muted);
      }

      .faq-topic {
        padding: 14px 18px;
        border: 1px solid rgba(35, 82, 75, 0.16);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.62);
      }

      .faq-topic > summary {
        cursor: pointer;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        font-family: var(--font-data);
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--accent);
      }

      .faq-topic > summary::-webkit-details-marker,
      .faq-topic .faq-item > summary::-webkit-details-marker {
        display: none;
      }

      .faq-topic > summary::after {
        content: "+";
        font-size: 1.1rem;
      }

      .faq-topic[open] > summary::after {
        content: "–";
      }

      .faq-topic-body {
        padding-top: 8px;
      }

      .faq-topic .faq-item {
        padding: 14px 0;
      }

      .legal-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
      }

      .legal-card h3 {
        margin: 0 0 10px;
        font-family: var(--font-brand);
        font-size: 24px;
      }

      .review-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        padding: 2px;
      }

      .review-grid[hidden],
      .review-load-more[hidden] {
        display: none;
      }

      .review-card {
        display: grid;
        align-content: start;
        gap: 16px;
        min-height: 174px;
        padding: 18px;
        border-radius: 18px;
        border: 1px solid var(--global-border);
        background: var(--global-surface-strong);
        box-shadow: none;
      }

      .review-card__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .review-card__identity {
        display: flex;
        align-items: center;
        min-width: 0;
        gap: 10px;
      }

      .review-card__avatar {
        display: inline-grid;
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        place-items: center;
        border-radius: 50%;
        background: var(--global-active);
        color: var(--ink);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.05em;
      }

      .review-card__author {
        display: grid;
        gap: 3px;
        min-width: 0;
      }

      .review-card__author strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
      }

      .review-card__verified {
        color: var(--accent);
        font-size: 11px;
        font-weight: 700;
      }

      .review-card__source {
        flex: 0 0 auto;
        color: var(--muted);
        font-size: 11px;
      }

      .review-load-more {
        display: flex;
        justify-content: center;
        margin-top: 18px;
      }

      .review-card__image {
        width: 100%;
        max-height: 200px;
        border-radius: var(--radius-md);
        object-fit: cover;
      }

      .review-card__body {
        margin: 0;
        color: var(--ink);
        font-size: 14px;
        line-height: 1.6;
      }

      .review-section-head {
        align-items: end;
      }

      .review-section-head__copy {
        display: grid;
        gap: 6px;
      }

      .review-section-head__copy p {
        max-width: 520px;
        margin: 0;
        color: var(--muted);
        font-size: 14px;
      }

      .review-section-head__actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 12px;
      }

      .review-count {
        color: var(--muted);
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
      }

      .review-empty {
        color: var(--muted);
        margin: 0;
      }

      .review-submit {
        margin-top: 22px;
      }

      .review-submit-form {
        display: grid;
        gap: 14px;
        margin-top: 16px;
        padding: 22px;
        max-width: 480px;
        border-radius: var(--radius-lg);
        border: 1px solid rgba(31, 26, 23, 0.08);
        background: rgba(255, 255, 255, 0.72);
        box-shadow: 0 12px 28px rgba(31, 26, 23, 0.06);
      }

      .review-submit-form[hidden] {
        display: none;
      }

      .field textarea {
        width: 100%;
        padding: 14px 16px;
        border-radius: 16px;
        border: 1px solid rgba(31, 26, 23, 0.14);
        background: rgba(255, 255, 255, 0.9);
        color: var(--ink);
        font-size: 16px;
        font-family: inherit;
        resize: vertical;
      }

      .field textarea:focus {
        outline: 2px solid #2f6d64;
        outline-offset: 2px;
      }

      .review-submit-status {
        margin: 0;
        min-height: 1.4em;
        color: var(--muted);
      }

      .review-submit-status[data-state="success"] { color: var(--accent); font-weight: 700; }
      .review-submit-status[data-state="error"] { color: var(--warning); font-weight: 700; }

      @media (max-width: 900px) {
        .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      }

      @media (max-width: 620px) {
        .review-section-head { align-items: start; }
        .review-section-head__actions { justify-content: flex-start; }
        .review-grid { grid-template-columns: 1fr; }
      }

      .guidance-grid {
        margin-top: 18px;
        display: grid;
        gap: 14px;
      }

      .guidance-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .guidance-meta .pill {
        text-transform: none;
        letter-spacing: 0.02em;
      }

      .guidance-card h3 {
        margin: 0 0 10px;
        font-family: var(--font-brand);
        font-size: 24px;
      }

      .guidance-card p,
      .guidance-card li {
        color: var(--muted);
        line-height: 1.7;
      }

      .catalog {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 18px;
      }

      .catalog-tabs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin: 12px 0 24px;
      }

      section[data-catalog-panel][hidden] {
        display: none;
      }

      .catalog-tab {
        min-height: 44px;
        padding: 10px 18px;
        border: 1px solid rgba(33, 77, 70, 0.18);
        border-radius: var(--radius-sm);
        background: rgba(255, 255, 255, 0.7);
        color: var(--ink);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
        transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
      }

      .catalog-tab:hover,
      .catalog-tab.is-active {
        transform: translateY(-1px);
        border-color: transparent;
        background: var(--accent-gradient);
        color: #fff9f1;
      }

      .delivery-banner {
        display: block;
        position: relative;
        left: 50%;
        width: 100vw;
        transform: translateX(-50%);
        overflow: hidden;
        margin: 0;
        padding: 13px clamp(20px, 4vw, 48px);
        border: 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        background: linear-gradient(90deg, rgba(92, 165, 154, 0.08), rgba(247, 253, 252, 0.82));
        color: var(--accent);
        font-size: 14px;
        font-weight: 700;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
      }

      .delivery-banner__track {
        display: flex;
        align-items: center;
        width: max-content;
        /* Real, guaranteed spacing between groups via flex gap (properly
           counted by width:max-content, unlike margin) plus one trailing
           gap so the 4 duplicated groups form an even repeating rhythm:
           translateX(-50%) then lands exactly on the 3rd group's start. */
        gap: var(--delivery-item-gap, 80px);
        padding-right: var(--delivery-item-gap, 80px);
        min-height: 28px;
        font-family: ui-monospace, "SF Mono", "Cascadia Code", "Consolas", "Courier New", monospace;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.05em;
        animation: delivery-banner-scroll 30s linear infinite;
        will-change: transform;
      }

      .delivery-banner__group {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 80px;
        min-width: 0;
      }

      .delivery-banner__track span {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        min-width: 0;
        font-size: 13px;
        white-space: nowrap;
      }

      @keyframes delivery-banner-scroll {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
      }

      @media (prefers-reduced-motion: reduce) {
        .delivery-banner__track {
          width: 100%;
          animation: none;
          transform: none;
        }

        .delivery-banner__group {
          flex-basis: 100%;
        }

        .delivery-banner__group:not(:first-child) {
          display: none;
        }

        .delivery-banner__track span::before {
          animation: none;
        }

        .pill.status-coming-soon {
          animation: none !important;
          background-position: 50% 50%;
        }
        .pill.status-coming-soon::after {
          animation: none !important;
          opacity: 0 !important;
        }
      }

      .accessories-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
      }

      .accessory-card {
        display: grid;
        gap: 12px;
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: rgba(255, 255, 255, 0.66);
      }

      .accessory-card h3 {
        margin: 0 0 8px;
        font-size: 22px;
      }

      .accessory-card__price {
        color: var(--accent);
        font-size: 20px;
        font-weight: 800;
      }

      .accessory-card .button {
        width: 100%;
      }

      .accessory-card p {
        margin: 0;
        color: var(--muted);
        line-height: 1.6;
      }

      .card {
        grid-column: span 4;
        position: relative;
        overflow: hidden;
        min-height: 420px;
        padding: 20px;
        border-radius: var(--radius-lg);
        border: 1px solid var(--spec-rule);
        background:
          linear-gradient(90deg, rgba(18, 33, 30, 0.035) 1px, transparent 1px),
          linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(230, 241, 238, 0.82));
        background-size: 42px 100%, auto;
        box-shadow: 0 18px 46px rgba(14, 31, 28, 0.10);
        display: flex;
        flex-direction: column;
      }

      .card::before {
        content: "";
        position: absolute;
        inset: auto -25px -25px auto;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(92, 165, 154, 0.22), transparent 68%);
      }

      .card::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.38), transparent 42%);
      }

      .card-actions {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        margin-top: auto;
        position: relative;
        z-index: 1;
      }

      .card-top {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: start;
        position: relative;
        z-index: 1;
      }

      .product-card-image,
      .card h3,
      .card .note,
      .card .meta {
        position: relative;
        z-index: 1;
      }

      .pill {
        display: inline-flex;
        align-items: center;
        padding: 8px 12px;
        border-radius: 999px;
        font-size: 12px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        border: 1px solid var(--pill-metal-border);
        background: var(--pill-metal-bg);
        color: var(--pill-metal-text);
        box-shadow: var(--pill-metal-shadow);
      }

      .card-specline {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 8px 12px;
        align-items: center;
        margin: 16px 0 0;
        padding: 9px 0;
        border-top: 1px solid var(--spec-rule);
        border-bottom: 1px solid var(--spec-rule);
        color: var(--muted);
        font-family: var(--font-data);
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .card-specline strong {
        min-width: 0;
        color: var(--ink);
        font-weight: 800;
        line-height: 1.3;
        overflow-wrap: anywhere;
        text-align: right;
      }

      .pill.status-coming-soon {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        background: var(--badge-coming-bg);
        color: var(--badge-coming-text);
        box-shadow:
          inset 0 0 0 1px var(--badge-coming-border),
          0 0 18px var(--badge-coming-glow);
      }

      .pill.status-soldout {
        background: var(--badge-soldout-bg);
        color: var(--badge-soldout-text);
        box-shadow: inset 0 0 0 1px var(--badge-soldout-border);
      }

      .variant-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 8px 0 6px;
      }

      .card > .variant-pills {
        position: relative;
        z-index: 1;
        align-items: center;
        gap: 0;
        width: 100%;
        margin: 14px 0 8px;
        padding: 8px;
        border: 1px solid var(--spec-rule);
        border-radius: 999px;
        background:
          repeating-linear-gradient(90deg, rgba(18, 33, 30, 0.16) 0 1px, transparent 1px 28px),
          linear-gradient(90deg, rgba(217, 235, 232, 0.82), rgba(248, 251, 250, 0.72));
      }

      .mg-pill {
        position: relative;
        z-index: 1;
        min-height: 38px;
        min-width: 58px;
        justify-content: center;
        cursor: pointer;
        border: 1px solid transparent;
        background: rgba(247, 252, 250, 0.72);
        color: var(--accent-3);
        font-family: var(--font-data);
        font-size: 12px;
        font-weight: 800;
        text-transform: none;
        letter-spacing: 0.04em;
        transition: transform 180ms ease, background 180ms ease, border-color 180ms ease,
          color 180ms ease, box-shadow 180ms ease;
      }

      .mg-pill.is-coming-soon,
      .mg-pill.is-coming-soon:hover,
      .mg-pill.is-coming-soon:focus-visible,
      .mg-pill.is-coming-soon.is-active,
      .card[data-product-slug]:hover .mg-pill.is-coming-soon.is-active,
      .card[data-product-slug].is-mobile-highlight .mg-pill.is-coming-soon.is-active {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        background: var(--badge-coming-bg);
        border-color: var(--badge-coming-border);
        color: var(--badge-coming-text);
        box-shadow:
          inset 0 0 0 1px var(--badge-coming-border),
          0 0 18px var(--badge-coming-glow);
      }

      .pill.status-coming-soon::after,
      .mg-pill.is-coming-soon::after {
        content: "";
        position: absolute;
        inset: -120% auto -120% -46%;
        z-index: 0;
        width: 34%;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(255, 245, 210, 0.62), transparent);
        opacity: 0;
        transform: translateX(-260%) skewX(-18deg);
        animation: coming-soon-shine 3.6s cubic-bezier(0.42, 0, 0.28, 1) infinite;
      }

      .catalog-tools {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 18px 0 12px;
      }

      .catalog-tools input,
      .catalog-tools select {
        min-height: 44px;
        padding: 0 14px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.72);
        color: var(--ink);
        transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
      }

      .catalog-tools input { flex: 1 1 240px; min-width: 180px; }
      .catalog-tools select { flex: 0 1 190px; }

      .catalog-tools input:hover,
      .catalog-tools input:focus-visible,
      .catalog-tools select:hover,
      .catalog-tools select:focus-visible {
        border-color: rgba(55, 128, 111, 0.58);
        box-shadow:
          0 0 0 1px rgba(55, 128, 111, 0.28),
          0 0 24px rgba(91, 174, 149, 0.22),
          var(--shadow);
        transform: translateY(-1px);
      }

      @media (prefers-color-scheme: dark), (prefers-color-scheme: light) {
        .catalog-tools input,
        .catalog-tools select {
          background: var(--panel-strong);
        }
      }

      @media (prefers-color-scheme: dark), (prefers-color-scheme: light) {
        body {
          color: var(--ink);
          background: var(--color-page-gradient);
        }

        body::before {
          background-image:
            linear-gradient(rgba(231, 239, 233, 0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(231, 239, 233, 0.035) 1px, transparent 1px);
        }

        .button,
        .catalog-tools input,
        .catalog-tools select,
        .mg-pill {
          background: #1a302c;
          border-color: var(--line);
          color: var(--ink);
        }

        .card > .variant-pills {
          background:
            repeating-linear-gradient(90deg, rgba(237, 247, 244, 0.18) 0 1px, transparent 1px 25px),
            linear-gradient(90deg, rgba(12, 28, 25, 0.92), rgba(27, 50, 46, 0.88));
          border-color: rgba(221, 235, 232, 0.24);
          box-shadow: inset 0 0 0 1px rgba(121, 193, 181, 0.08);
        }

        .card > .variant-pills::before {
          color: #9fe7dc;
          border-right-color: rgba(221, 235, 232, 0.24);
        }

        .button-primary {
          background: var(--button-primary-bg);
          color: var(--button-primary-text);
        }

        body .mg-pill.is-active {
          background: linear-gradient(135deg, #c79042 0%, #8a551a 100%);
          border-color: rgba(255, 214, 139, 0.58);
          color: #fff9ea;
          box-shadow:
            0 0 0 1px rgba(255, 214, 139, 0.22),
            0 0 22px rgba(199, 144, 66, 0.24),
            var(--shadow);
        }

        .hero,
        .panel,
        .card,
        .info,
        .section,
        .mini-card,
        .review-card,
        .review-submit-form {
          background: #1b2925;
          border-color: var(--line);
          color: var(--ink);
        }

        .field input,
        .field select,
        .field textarea {
          background: rgba(15, 29, 25, 0.88);
          border-color: var(--line);
          color: var(--ink);
        }

        .card h3,
        .info h3,
        .meta-row strong {
          color: var(--ink);
        }

        .card .note,
        .meta-row,
        .info p {
          color: var(--muted);
        }

        .pill {
          border-color: var(--pill-metal-border);
          background: var(--pill-metal-bg);
          color: var(--pill-metal-text);
          box-shadow: var(--pill-metal-shadow);
        }

        .pill.status-coming-soon {
          background: var(--badge-coming-bg) !important;
          color: var(--badge-coming-text) !important;
          box-shadow:
            inset 0 0 0 1px var(--badge-coming-border),
            0 0 18px var(--badge-coming-glow) !important;
        }

        .mg-pill.is-coming-soon,
        .mg-pill.is-coming-soon:hover,
        .mg-pill.is-coming-soon.is-active,
        body .card[data-product-slug]:hover .mg-pill.is-coming-soon.is-active,
        body .card[data-product-slug].is-mobile-highlight .mg-pill.is-coming-soon.is-active {
          background: var(--badge-coming-bg);
          border-color: var(--badge-coming-border);
          color: var(--badge-coming-text);
          box-shadow:
            inset 0 0 0 1px var(--badge-coming-border),
            0 0 18px var(--badge-coming-glow);
        }

        .pill.status-soldout,
        .mg-pill.is-soldout,
        .mg-pill.is-soldout:hover,
        .mg-pill.is-soldout.is-active {
          background: var(--color-status-soldout-background);
          border-color: var(--color-status-soldout-border);
          color: var(--color-status-soldout-text);
          box-shadow: none;
          animation: none;
        }
      }

      .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      .mg-pill:disabled {
        cursor: not-allowed;
        opacity: 0.58;
        transform: none;
      }

      .mg-pill:disabled:hover {
        transform: none;
        border-color: var(--dose-border);
      }

      .mg-pill.is-active {
        background: var(--dose-active-bg);
        color: var(--dose-active-text);
        border-color: transparent;
        box-shadow:
          0 0 0 1px rgba(55, 128, 111, 0.28),
          0 0 24px rgba(91, 174, 149, 0.22),
          var(--shadow);
      }

      .mg-pill.is-soldout,
      .mg-pill.is-soldout:hover,
      .mg-pill.is-soldout.is-active {
        background: var(--color-status-soldout-background);
        border-color: var(--color-status-soldout-border);
        color: var(--color-status-soldout-text);
        box-shadow: none;
      }

      @media (prefers-reduced-motion: reduce) {
        .pill.status-coming-soon,
        .mg-pill.is-coming-soon,
        .mg-pill.is-coming-soon:hover,
        .mg-pill.is-coming-soon:focus-visible,
        .mg-pill.is-coming-soon.is-active,
        .card[data-product-slug]:hover .mg-pill.is-coming-soon.is-active,
        .card[data-product-slug].is-mobile-highlight .mg-pill.is-coming-soon.is-active {
          animation: none !important;
          background-position: 50% 50%;
        }

        .pill.status-coming-soon::after,
        .mg-pill.is-coming-soon::after {
          animation: none !important;
          opacity: 0 !important;
        }
      }

      @keyframes coming-soon-shine {
        0%, 18% {
          opacity: 0;
          transform: translateX(-260%) skewX(-18deg);
        }
        36%, 66% { opacity: 0.58; }
        82%, 100% {
          opacity: 0;
          transform: translateX(520%) skewX(-18deg);
        }
      }

      .button:disabled {
        cursor: not-allowed;
        opacity: var(--button-disabled-opacity);
        transform: none;
      }

      .card h3 {
        margin: 16px 0 10px;
        font-family: var(--font-brand);
        font-size: 28px;
        line-height: 1.05;
        letter-spacing: -0.03em;
      }

      .card-actions {
        justify-content: flex-start;
        align-items: stretch;
      }

      .card-actions .button {
        min-height: 36px;
        padding: 6px 12px;
        font-size: 13px;
        white-space: nowrap;
      }

      @media (max-width: 430px) {
        .delivery-banner {
          padding-inline: 4px;
        }

        .delivery-banner__track {
          min-height: 28px;
          font-size: 13px;
          animation-duration: 20s;
        }

        .delivery-banner__track span {
          flex: 0 0 auto;
          gap: 6px;
        }

        .delivery-banner__track span::before {
          width: 5px;
          height: 5px;
        }

        .card-actions {
          flex-wrap: wrap;
        }
      }

      @media (max-width: 430px) and (prefers-reduced-motion: reduce) {
        .delivery-banner__track {
          width: 100%;
          min-height: 0;
        }

        .delivery-banner__group {
          display: grid;
          width: 100%;
          min-width: 0;
          flex-basis: 100%;
          justify-content: start;
          gap: 8px;
        }

        .delivery-banner__track span {
          flex: 0 0 auto;
          justify-content: flex-start;
        }
      }

      .card .note {
        color: var(--muted);
        line-height: 1.65;
        margin: 0 0 18px;
      }

      .meta {
        display: grid;
        gap: 10px;
        margin-top: 18px;
      }

      .meta-row {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding-top: 10px;
        border-top: 1px solid rgba(31, 26, 23, 0.08);
        color: var(--muted);
        font-size: 14px;
      }

      .meta-row strong {
        color: var(--ink);
        font-weight: 600;
      }

      .section-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
      }

      .info {
        padding: 24px;
        border-radius: var(--radius-lg);
        border: 1px solid rgba(31, 26, 23, 0.08);
        background: rgba(255, 255, 255, 0.68);
        box-shadow: 0 12px 28px rgba(31, 26, 23, 0.06);
      }

      .info h3 {
        margin: 0 0 10px;
        font-family: var(--font-brand);
        font-size: 24px;
      }

      .info p,
      .info li {
        color: var(--muted);
        line-height: 1.7;
      }

      .info ul {
        margin: 0;
        padding-left: 18px;
        display: grid;
        gap: 10px;
      }

      .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        margin-top: 26px;
        padding: 20px 0 8px;
        color: var(--muted);
        font-size: 14px;
      }

      .footer strong {
        color: var(--ink);
      }

      @media (max-width: 1220px) {
        .top-actions {
          width: 100%;
        }

        .hero-grid,
        .section-grid {
          grid-template-columns: 1fr;
        }

        .calculator-shell,
        .legal-grid,
        .checkout-grid {
          grid-template-columns: 1fr;
        }

        .accessories-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      /* Matches the .product-hub .catalog breakpoint in styles.css so the
         catalog grid switches from 3 to 2 columns at the same width on the
         homepage and on /produkter/, instead of drifting apart at 1100px. */
      @media (max-width: 980px) {
        .card {
          grid-column: span 6;
        }
      }

      @media (max-width: 700px) {
        body::before {
          display: none;
        }

        .hero::after {
          display: none;
        }

        .page {
          width: min(100% - 24px, 1200px);
        }

        .section-head,
        .footer {
          flex-direction: column;
          align-items: flex-start;
        }

        .top-actions {
          width: 100%;
          margin-left: 0;
          justify-content: space-between;
          flex-wrap: wrap;
        }

        .hero {
          padding: 22px;
        }

        .hero h1 {
          max-width: 100%;
        }

        .card {
          grid-column: span 12;
        }

        .accessories-grid {
          grid-template-columns: 1fr;
        }
      }

      /* Keep the moving delivery points readable at every viewport size. The
         spacing scales with the available platform width while the marquee
         keeps a comfortable minimum on narrow screens. */
      .delivery-banner {
        --delivery-copy-size: clamp(13.5px, 1.2vw, 16px);
        --delivery-item-gap: clamp(92px, 9vw, 148px);
        --delivery-copy-gap: clamp(8px, 0.8vw, 11px);
        padding-block: clamp(14px, 1.4vw, 18px);
      }

      .delivery-banner__track {
        min-height: clamp(30px, 3vw, 38px);
        font-size: var(--delivery-copy-size);
      }

      .delivery-banner__group {
        justify-content: center;
        gap: var(--delivery-item-gap);
      }

      .delivery-banner__track span {
        gap: var(--delivery-copy-gap);
        font-size: var(--delivery-copy-size);
        font-weight: 800;
      }

      .delivery-banner__track span::before {
        width: clamp(6px, 0.7vw, 8px);
        height: clamp(6px, 0.7vw, 8px);
      }

      @media (max-width: 760px) {
        .delivery-banner {
          --delivery-copy-size: clamp(13px, 2.2vw, 15px);
          --delivery-item-gap: clamp(42px, 8vw, 72px);
        }
      }

      @media (max-width: 430px) {
        .delivery-banner {
          --delivery-copy-size: clamp(13px, 3.6vw, 15px);
          --delivery-item-gap: clamp(34px, 10vw, 48px);
          padding-block: 13px;
        }

        .delivery-banner__track {
          min-height: 30px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .delivery-banner__track {
          min-height: 0;
        }

        .delivery-banner__group {
          justify-content: start;
          gap: 10px;
        }

        .delivery-banner__track span {
          justify-content: flex-start;
        }
      }

/* The delivery marquee pauses while hovered (no visible pause button). */
.delivery-banner__track:hover {
  animation-play-state: paused;
}

/* Review form: the field labels are visible (placeholders are only examples). */
#reviews .review-submit-form .field > label {
  font-size: 14px;
  font-weight: 700;
}

/* Bestselgere (chosen in admin, 1–12): on wide screens 4 per row when the
   count is a multiple of 4; otherwise 3 per row with a lone last card or a
   last pair centred, so the last row never looks unfinished. Phones and
   tablets already show 2 per row. */
@media (min-width: 981px) {
  #catalog-grid:has(> .card:last-child:nth-child(4n)) > .card {
    grid-column: span 3;
  }
  #catalog-grid:not(:has(> .card:last-child:nth-child(4n))) > .card:last-child:nth-child(3n + 1) {
    grid-column: 5 / span 4;
  }
  #catalog-grid:not(:has(> .card:last-child:nth-child(4n))) > .card:nth-last-child(2):nth-child(3n + 1) {
    grid-column: 3 / span 4;
  }
}