/*
 * ════════════════════════════════════════════════════════════════════════════
 * LAG 1 — DS-TOKENS (kopi — flyttes til digital2-childtheme/css/d2-tokens.css)
 * ════════════════════════════════════════════════════════════════════════════
 */

:root {
    --d2-orange:        #fc8902;
    --d2-orange-hover:  #e57a00;
    --d2-orange-tint:   rgba(252,137,2,.12);
    --d2-orange-soft:   rgba(252,137,2,.06);
    --d2-red-link:      #990000;
    --d2-ink-strong:    #1a1a1a;
    --d2-ink:           #222222;
    --d2-ink-body:      #292929;
    --d2-ink-muted:     #444444;
    --d2-ink-faint:     #666666;
    --d2-surface:       #ffffff;
    --d2-surface-alt:   #f7f7f7;
    --d2-line:          #e8e8e8;
    --d2-line-strong:   #d8d8d8;
    --d2-font-display:  'Montserrat', Arial, Helvetica, sans-serif;
    --d2-font-body:     Arial, Helvetica, sans-serif;
    --d2-radius-sm:     4px;
    --d2-radius-md:     6px;
    --d2-radius-lg:     12px;
    --d2-radius-xl:     16px;
    --d2-ease:          cubic-bezier(0.2, 0.8, 0.2, 1);
}

/*
 * ════════════════════════════════════════════════════════════════════════════
 * LAG 2 — PLUGIN-SPECIFIKT  (.d2sf-* og .d2pt-sf-*)
 * Komponent: d2-shop-front  |  Plugin: d2-product-table  |  v3.0.7
 * ════════════════════════════════════════════════════════════════════════════
 */

/* ── Wrap ───────────────────────────────────────────────────────────────── */
.d2sf-wrap {
    font-family: var(--d2-font-body);
    max-width:   1100px;
    margin:      40px auto 0;
}

/* ── Zone 1: Hero modifier (DS .d2-hero-split base + .d2pt-sf-hero) ─────── */
/* Annuller DS fullbleed fuldt ud — shop-template har egen max-width container (.d2sf-wrap).
   v3.0.7 fix: margin-right og max-width var ikke tidligere annulleret, så basens
   negative margin-right (calc 50% minus 50vw) overlevede og pressede hero ud til
   viewport-right uden venstre-balance. Symptom: hero forskudt mod højre med ca.
   25 procent venstre-gutter og ingen højre-gutter paa 1920px viewport. */
.d2pt-sf-hero.d2-hero-split {
    width:         auto;
    margin-left:   0;
    margin-right:  0;
    max-width:     100%;
    margin-bottom: 56px;
    border-radius: var(--d2-radius-xl);
    background:    var(--d2-ink-strong);
    color:         #fff;
    padding:       0;
}

.d2pt-sf-hero .d2-hero-split__inner {
    max-width:             100%;
    padding:               56px 48px;
    border-radius:         var(--d2-radius-xl);
    display:               grid;
    grid-template-columns: 1.15fr 1fr;
    gap:                   50px;
    align-items:           center;
}

.d2pt-sf-hero .d2-hero-split__content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.d2pt-sf-hero__stats {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    width:          100%;
}

.d2pt-sf-stat {
    background:    rgba(255,255,255,.06);
    border:        1px solid rgba(255,255,255,.12);
    border-radius: var(--d2-radius-md);
    padding:       18px 20px;
    text-align:    center;
}

.d2pt-sf-stat__number {
    display:       block;
    font-family:   var(--d2-font-display);
    font-size:     32px;
    font-weight:   800;
    color:         var(--d2-orange);
    line-height:   1;
    margin-bottom: 6px;
}

.d2pt-sf-stat__icon        { font-size: 28px; }
.d2pt-sf-stat__number--small { font-size: 18px !important; letter-spacing: .04em; }

.d2pt-sf-stat__label {
    display:        block;
    font-size:      11px;
    font-weight:    700;
    color:          rgba(255,255,255,.55);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ── Zone 2: Brand-logoer ───────────────────────────────────────────────── */
.d2sf-brands { display: none; margin-bottom: 56px; text-align: center; }

.d2sf-brands__label {
    font-family:    var(--d2-font-display);
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color:          var(--d2-ink-faint);
    margin-bottom:  24px;
}

.d2sf-brands__track {
    display:         flex;
    flex-wrap:       wrap;
    gap:             8px 4px;
    justify-content: center;
    align-items:     center;
}

.d2sf-brands__logo {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         12px 16px;
    border-radius:   var(--d2-radius-md);
    transition:      all .18s var(--d2-ease);
    opacity:         .8;
    gap:             8px;
    text-decoration: none;
}

.d2sf-brands__logo:hover    { opacity: 1; background: var(--d2-surface-alt); text-decoration: none; }
.d2sf-brands__logo img      { height: 64px; width: auto; max-width: 160px; object-fit: contain; display: block; }

.d2sf-brands__logo-name {
    display:        block;
    font-family:    var(--d2-font-display);
    font-size:      11px;
    font-weight:    600;
    color:          var(--d2-ink-faint);
    text-align:     center;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height:    1.2;
}

/* ── Zone 2b: Featured produkter ───────────────────────────────────────── */
.d2sf-featured             { margin-bottom: 56px; }

.d2sf-featured__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   24px;
    flex-wrap:       wrap;
    gap:             8px;
}

.d2sf-featured__see-all {
    font-family:     var(--d2-font-display);
    font-size:       13px;
    font-weight:     700;
    color:           var(--d2-orange);
    text-decoration: none;
}
.d2sf-featured__see-all:hover { text-decoration: underline; color: var(--d2-orange-hover); }

.d2sf-featured__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   14px;
}

.d2sf-featured__card {
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         14px 16px;
    background:      var(--d2-surface);
    border:          1px solid var(--d2-line);
    border-radius:   var(--d2-radius-lg);
    text-decoration: none;
    color:           inherit;
    transition:      all .18s var(--d2-ease);
}

.d2sf-featured__card:hover {
    border-color:    var(--d2-orange);
    box-shadow:      0 4px 12px rgba(0,0,0,.07);
    transform:       translateY(-2px);
    text-decoration: none;
}

.d2sf-featured__img {
    flex-shrink:     0;
    width:           52px;
    height:          52px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   var(--d2-radius-sm);
    overflow:        hidden;
    background:      var(--d2-surface-alt);
}

.d2sf-featured__img img     { width: 100%; height: 100%; object-fit: contain; }
.d2sf-featured__initial     { font-family: var(--d2-font-display); font-size: 22px; font-weight: 800; color: var(--d2-orange); }

.d2sf-featured__info        { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.d2sf-featured__name {
    font-size:          13px;
    font-weight:        600;
    color:              var(--d2-ink);
    line-height:        1.3;
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

.d2sf-featured__price       { font-size: 12px; color: var(--d2-orange); font-weight: 700; }

/* ── Zone 3: Segmenter ──────────────────────────────────────────────────── */
.d2sf-segments              { margin-bottom: 56px; }

.d2sf-segments__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   14px;
}

.d2sf-segment {
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    gap:             6px;
    padding:         20px 22px;
    background:      var(--d2-surface);
    border:          1px solid var(--d2-line);
    border-radius:   var(--d2-radius-lg);
    text-decoration: none;
    transition:      all .18s var(--d2-ease);
}

.d2sf-segment:hover         { border-color: var(--d2-orange-tint); box-shadow: 0 4px 16px rgba(0,0,0,.07); transform: translateY(-2px); text-decoration: none; }
.d2sf-segment__icon         { font-size: 28px; line-height: 1; margin-bottom: 4px; }
.d2sf-segment__label        { font-family: var(--d2-font-display); font-size: 16px; font-weight: 700; color: var(--d2-ink); line-height: 1.2; }
.d2sf-segment__sub          { font-size: 13px; color: var(--d2-ink-faint); line-height: 1.4; }

/* ── Zone 5: Vis alle produkter ─────────────────────────────────────────── */
.d2sf-all-products          { margin-bottom: 56px; }

.d2sf-all-products__toggle {
    display:       flex;
    align-items:   center;
    gap:           12px;
    width:         100%;
    padding:       16px 22px;
    background:    var(--d2-surface-alt);
    border:        1px solid var(--d2-line);
    border-radius: var(--d2-radius-lg);
    font-family:   var(--d2-font-display);
    font-size:     15px;
    font-weight:   700;
    color:         var(--d2-ink);
    cursor:        pointer;
    text-align:    left;
    transition:    all .18s var(--d2-ease);
}

.d2sf-all-products__toggle:hover  { border-color: var(--d2-orange); color: var(--d2-orange); }
.d2sf-all-products__count         { font-weight: 400; color: var(--d2-ink-faint); font-size: 13px; }
.d2sf-all-products__arrow         { margin-left: auto; color: var(--d2-ink-faint); }
.d2sf-all-products__panel         { margin-top: 16px; }

/* ── Section-titel ──────────────────────────────────────────────────────── */
.d2pt-section-title {
    font-family:    var(--d2-font-display);
    font-size:      28px;
    font-weight:    800;
    letter-spacing: -.015em;
    color:          var(--d2-ink);
    margin:         0 0 28px;
    padding:        0;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .d2sf-featured__grid    { grid-template-columns: repeat(2, 1fr); }
    .d2sf-segments__grid    { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .d2pt-sf-hero__stats              { display: none; }
    .d2pt-sf-hero.d2-hero-split       { margin-top: 0; border-radius: 0; }
    .d2pt-sf-hero .d2-hero-split__inner { padding: 0 24px 40px !important; border-radius: 0 !important; }
    .d2-hero-split__ctas              { flex-direction: column; gap: 16px; }
    .d2-btn                           { text-align: center; }
    .d2pt-section-title               { padding-left: 16px; padding-right: 16px; }
    .d2sf-featured, .d2sf-segments, .d2sf-all-products { padding: 0 16px; }
    .d2sf-wrap                        { margin-top: 0; }
    .d2sf-brands__logo img            { height: 40px; max-width: 110px; }
}

@media (max-width: 480px) {
    .d2sf-featured__grid    { grid-template-columns: 1fr; }
    .d2sf-segments__grid    { grid-template-columns: 1fr; }
}

/* ── Hero visual — brands billede ──────────────────────────────────────── */
.d2pt-sf-hero__brands-img {
    width:         100%;
    max-width:     420px;
    height:        auto;
    border-radius: var(--d2-radius-lg);
    display:       block;
    margin:        0 auto;
}

/* ── Inline søgefelt ────────────────────────────────────────────────────── */
.d2pt-sf-search-bar {
    background:    var(--d2-ink-strong);
    padding:       24px 32px 28px;
    margin-bottom: 56px;
    border-radius: var(--d2-radius-xl);
}

.d2pt-sf-search-bar__inner {
    display:     flex;
    align-items: center;
    gap:         12px;
    max-width:   720px;
    margin:      0 auto;
    padding:     0 24px;
}

.d2pt-sf-search-bar__input {
    flex:          1;
    padding:       14px 18px;
    font-family:   var(--d2-font-body);
    font-size:     16px;
    color:         var(--d2-ink);
    background:    var(--d2-surface);
    border:        2px solid var(--d2-line);
    border-radius: var(--d2-radius-md);
    outline:       none;
    transition:    border-color .18s;
}

.d2pt-sf-search-bar__input:focus {
    border-color: var(--d2-orange);
}

.d2pt-sf-search-bar__close {
    flex-shrink:   0;
    width:         40px;
    height:        40px;
    background:    rgba(255,255,255,.1);
    border:        1px solid rgba(255,255,255,.2);
    border-radius: var(--d2-radius-md);
    color:         #fff;
    font-size:     16px;
    cursor:        pointer;
    transition:    background .18s;
}

.d2pt-sf-search-bar__close:hover { background: rgba(255,255,255,.2); }

.d2pt-sf-search-bar__results {
    max-width:  720px;
    margin:     12px auto 0;
    padding:    0 24px;
}

.d2pt-sf-search-bar__result {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 14px;
    background:      var(--d2-surface);
    border:          1px solid var(--d2-line);
    border-radius:   var(--d2-radius-md);
    margin-bottom:   6px;
    text-decoration: none;
    transition:      border-color .18s;
}

.d2pt-sf-search-bar__result:hover { border-color: var(--d2-orange); text-decoration: none; }
.d2pt-sf-search-bar__result-name  { font-size: 14px; font-weight: 600; color: var(--d2-ink); }
.d2pt-sf-search-bar__result-price { font-size: 13px; color: var(--d2-orange); font-weight: 700; white-space: nowrap; }
.d2pt-sf-search-bar__loading,
.d2pt-sf-search-bar__empty        { font-size: 13px; color: rgba(255,255,255,.6); padding: 8px 0; }

/* ── Brand-kort (bruger d2ci-card base, ingen override nødvendig) ───────── */
.d2sf-brands__track--cards {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
    justify-content: center;
}

.d2sf-brand-card {
    flex: 0 0 auto;
}