.lkc {
--lkc-gap: 20px;
--lkc-pv: 1.15;  --lkc-ov-from: rgba(46, 96, 255, .50);
--lkc-ov-to:   rgba(0, 32, 159, .62);
position: relative;
isolation: isolate;
padding: 48px 16px 56px;
overflow: hidden;
background: linear-gradient(150deg, var(--lk-bg-alt, #EEF0F8) 0%, #E6EAF6 100%);
font-family: var(--lk-font-body, 'DM Sans', system-ui, sans-serif);
} .lkc--plain { background: #F6F8FC; }
html[data-theme="dark"] .lkc {
background: linear-gradient(150deg, #0F172A 0%, #1A2438 100%);
}
html[data-theme="dark"] .lkc--plain { background: #0F172A; } .lkc::before,
.lkc::after {
content: '';
position: absolute;
z-index: -1;
border-radius: 50%;
pointer-events: none;
}
.lkc::before {
top: -100px;
right: -100px;
width: 320px;
height: 320px;
background: rgba(0, 32, 159, .05);
}
.lkc::after {
bottom: -60px;
left: -60px;
width: 200px;
height: 200px;
background: rgba(210, 16, 52, .04);
}
html[data-theme="dark"] .lkc::before { background: rgba(59, 130, 246, .08); }
html[data-theme="dark"] .lkc::after  { background: rgba(239, 68, 68, .06); }
@media (min-width: 560px)  { .lkc { --lkc-pv: 2; } }
@media (min-width: 860px)  { .lkc { --lkc-pv: 3; padding: 64px 24px 72px; } }
@media (min-width: 1120px) { .lkc { --lkc-pv: 4; } }
.lkc-wrap {
position: relative;
max-width: 1200px;
margin: 0 auto;
} .lkc-head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 12px 24px;
}
.lkc .lkc-eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 8px;
color: var(--lk-red, #D21034);
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.lkc .lkc-eyebrow::before {
content: '';
width: 24px;
height: 2px;
background: currentColor;
border-radius: 2px;
}
html[data-theme="dark"] .lkc .lkc-eyebrow { color: var(--lk-gold, #FBBF24); }
.lkc .lkc-title {
margin: 0;
padding: 0;
color: var(--lk-blue, #00209F);
font-family: var(--lk-font-title, 'Fraunces', Georgia, serif);
font-size: clamp(26px, 3.4vw, 36px);
font-weight: 700;
line-height: 1.15;
}
html[data-theme="dark"] .lkc .lkc-title { color: #E2E8F0; }
.lkc .lkc-sub {
max-width: 58ch;
margin: 10px 0 0;
color: var(--lk-muted, #5B6579);
font-size: 16px;
line-height: 1.6;
}
html[data-theme="dark"] .lkc .lkc-sub { color: #94A3B8; } html body .lkc a.lkc-more {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--lk-blue, #00209F) !important;
font-size: 15px;
font-weight: 700;
text-decoration: none !important;
border-bottom: 2px solid transparent;
transition: color .25s ease, gap .3s ease, border-color .25s ease;
}
html body .lkc a.lkc-more:hover {
gap: 14px;
color: var(--lk-red, #D21034) !important;
border-bottom-color: currentColor;
}
html[data-theme="dark"] body .lkc a.lkc-more,
html[data-theme="dark"] .lkc a.lkc-more { color: #60A5FA !important; }
html[data-theme="dark"] body .lkc a.lkc-more:hover,
html[data-theme="dark"] .lkc a.lkc-more:hover { color: #FBBF24 !important; } .lkc:not([data-scrollable]) .lkc-progress { display: none; }
.lkc-progress {
position: relative;
height: 3px;
margin-top: 22px;
overflow: hidden;
background: rgba(0, 32, 159, .12);
border-radius: 3px;
}
html[data-theme="dark"] .lkc-progress { background: rgba(255, 255, 255, .12); }
.lkc-progress span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 30%;
background: linear-gradient(90deg, var(--lk-blue, #00209F), var(--lk-red, #D21034));
border-radius: 3px;
transition: left .15s linear, width .15s linear;
} .lkc-stage { position: relative; }
.lkc:not([data-scrollable]) .lkc-btn { display: none !important; }
html body .lkc .lkc-btn {
position: absolute;
top: calc(50% - 24px);
z-index: 4;
display: none;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
color: var(--lk-text, #0F172A) !important;
background: #FFFFFF !important;
border: 1px solid rgba(15, 23, 42, .09) !important;
border-radius: 50%;
box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .35);
cursor: pointer;
transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
html body .lkc .lkc-prev { left: -14px; }
html body .lkc .lkc-next { right: -14px; }
@media (min-width: 900px) and (hover: hover) {
html body .lkc .lkc-btn { display: flex; }
}
html body .lkc .lkc-btn:hover {
color: #FFFFFF !important;
background: var(--lk-blue, #00209F) !important;
box-shadow: 0 14px 30px -10px rgba(0, 32, 159, .55);
transform: scale(1.08);
}
html body .lkc .lkc-btn:active { transform: scale(.95); }
html[data-theme="dark"] body .lkc .lkc-btn,
html[data-theme="dark"] .lkc .lkc-btn {
color: #E2E8F0 !important;
background: #1A2438 !important;
border-color: rgba(148, 163, 184, .2) !important;
box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
}
html[data-theme="dark"] body .lkc .lkc-btn:hover,
html[data-theme="dark"] .lkc .lkc-btn:hover {
color: #FFFFFF !important;
background: var(--lk-blue, #00209F) !important;
} .lkc-track {
display: flex;
gap: var(--lkc-gap);
margin: 0 -6px;
padding: 24px 6px 32px; overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: 6px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
outline: none;
}
.lkc-track::-webkit-scrollbar { display: none; }
.lkc-track:focus-visible {
outline: 2px solid var(--lk-gold, #F5A623);
outline-offset: 3px;
}
.lkc-slide {
display: flex;
flex: 0 0 calc((100% - (var(--lkc-pv) - 1) * var(--lkc-gap)) / var(--lkc-pv));
min-width: 0;
scroll-snap-align: start;
} .lkc-slide:first-child { margin-left: auto; }
.lkc-slide:last-child  { margin-right: auto; } .lkc-card {
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
color: var(--lk-text, #1A1A1A);
background: var(--lk-white, #FFFFFF);
border: 1px solid transparent;
border-radius: var(--lk-radius-lg, 12px);
box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 28px -14px rgba(0, 32, 159, .25);
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
html[data-theme="dark"] .lkc-card {
background: #1E293B;
border-color: rgba(255, 255, 255, .05);
box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .6);
}
.lkc-card:hover {
transform: translateY(-8px);
border-color: rgba(0, 32, 159, .1);
box-shadow: 0 20px 40px rgba(0, 32, 159, .18);
}
html[data-theme="dark"] .lkc-card:hover {
border-color: rgba(59, 130, 246, .2);
box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
} .lkc-media {
position: relative;
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--lk-bg-alt, #EEF0F8);
text-decoration: none !important;
}
.lkc .lkc-media .lkc-img {
display: block;
width: 100%;
height: 100%;
padding: 0;
object-fit: cover; object-position: center 30%; transition: transform .6s ease;
}
.lkc-card:hover .lkc-img { transform: scale(1.06); } .lkc-media::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
z-index: 1;
height: 72px;
background: linear-gradient(rgba(0, 0, 0, .28), transparent);
pointer-events: none;
} .lkc-media::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(160deg, var(--lkc-ov-from), var(--lkc-ov-to));
opacity: 0;
transition: opacity .3s ease;
pointer-events: none;
}
.lkc-peek {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
padding: 12px 28px;
color: var(--lk-blue, #00209F);
background: #FFFFFF;
border-radius: 999px;
box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
font-size: 13px;
font-weight: 700;
letter-spacing: .3px;
white-space: nowrap;
opacity: 0;
transform: translate(-50%, -30%);
transition: opacity .3s ease, transform .3s ease;
pointer-events: none;
}
@media (hover: hover) {
.lkc-card:hover .lkc-media::after { opacity: 1; }
.lkc-card:hover .lkc-peek {
opacity: 1;
transform: translate(-50%, -50%);
}
} .lkc-ph {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: rgba(0, 32, 159, .35);
background: linear-gradient(135deg, var(--lk-blue-lt, #E6EBFF), var(--lk-bg-alt, #EEF0F8));
}
.lkc-ph svg { width: 56px; height: 56px; } .lkc-badges {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
display: flex;
gap: 6px;
}
.lkc-badge {
padding: 5px 12px;
color: var(--lk-on-accent, #FFFFFF);
border-radius: 999px;
box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
font-size: 11px;
font-weight: 800;
letter-spacing: .6px;
line-height: 1.2;
text-transform: uppercase;
}
.lkc-badge--sale { background: var(--lk-red, #D21034); }
.lkc-badge--new  { background: var(--lk-blue, #00209F); }
.lkc-off {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
padding: 5px 10px;
color: #5C3B00;
background: var(--lk-gold, #F5A623);
border-radius: var(--lk-radius-md, 8px);
box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
font-size: 11px;
font-weight: 800;
} .lkc-body {
display: flex;
flex: 1;
flex-direction: column;
gap: 6px;
padding: 16px 18px 18px;
}
.lkc-cat {
color: var(--lk-muted, #666666);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.lkc .lkc-name {
display: -webkit-box;
margin: 0;
padding: 0;
min-height: calc(2 * 1.45em);
overflow: hidden;
color: var(--lk-text, #1A1A1A);
font-family: var(--lk-font-body, 'DM Sans', sans-serif);
font-size: 14px;
font-weight: 600;
line-height: 1.45;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
html[data-theme="dark"] .lkc .lkc-name { color: #E2E8F0; }
.lkc .lkc-name a {
color: inherit !important;
text-decoration: none !important;
transition: color .2s;
}
.lkc .lkc-name a:hover { color: var(--lk-blue, #00209F) !important; }
html[data-theme="dark"] .lkc .lkc-name a:hover { color: #60A5FA !important; }
.lkc-vendor {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
color: var(--lk-muted, #666666);
font-size: 14px;
}
.lkc-vendor a {
color: var(--lk-red, #D21034) !important;
font-weight: 700;
text-decoration: none !important;
}
.lkc-vendor a:hover { text-decoration: underline !important; }
html[data-theme="dark"] .lkc-vendor a { color: var(--lk-gold, #FBBF24) !important; }
.lkc-stars {
display: flex;
align-items: center;
gap: 2px;
color: var(--lk-gold, #F5A623);
font-size: 13px;
}
.lkc-star-off { color: #D1D5DB; }
html[data-theme="dark"] .lkc-star-off { color: #475569; }
.lkc-count {
margin-left: 4px;
color: var(--lk-muted, #666666);
font-size: 11px;
}
.lkc-excerpt {
display: none;
margin: 4px 0 0;
color: var(--lk-muted, #666666);
font-size: 14px;
line-height: 1.65;
} .lkc-buy {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--lk-border, #E0E0E0);
}
html[data-theme="dark"] .lkc-buy { border-top-color: rgba(255, 255, 255, .08); }
.lkc-prices {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 8px;
color: var(--lk-blue, #00209F);
font-size: 19px;
font-weight: 800;
line-height: 1.25;
font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .lkc-prices { color: #60A5FA; }
.lkc-prices .lkc-sale { color: var(--lk-red, #D21034); }
html[data-theme="dark"] .lkc-prices .lkc-sale { color: var(--lk-gold, #FBBF24); }
.lkc-prices .lkc-old {
color: var(--lk-muted, #666666);
font-size: 13px;
font-weight: 400;
text-decoration: line-through;
}
.lkc-prices del { color: var(--lk-muted, #666666); font-size: .7em; font-weight: 400; }
.lkc-prices ins { text-decoration: none; } html body .lkc a.lkc-add {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 16px;
box-sizing: border-box;
color: var(--lk-on-accent, #FFFFFF) !important;
background: var(--lk-blue, #00209F) !important;
border: 2px solid var(--lk-blue, #00209F);
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 32, 159, .2);
font-family: var(--lk-font-body, 'DM Sans', sans-serif);
font-size: 13px;
font-weight: 700;
line-height: 1.2;
text-align: center;
text-decoration: none !important;
cursor: pointer;
transition: background .25s ease, border-color .25s ease, transform .15s ease, box-shadow .25s ease;
}
html body .lkc a.lkc-add:hover {
background: var(--lk-red, #D21034) !important;
border-color: var(--lk-red, #D21034);
box-shadow: 0 8px 20px rgba(210, 16, 52, .3);
transform: translateY(-2px);
} html body .lkc a.lkc-add--ghost {
color: var(--lk-blue, #00209F) !important;
background: transparent !important;
box-shadow: none;
}
html body .lkc a.lkc-add--ghost:hover {
color: var(--lk-on-accent, #FFFFFF) !important;
background: var(--lk-blue, #00209F) !important;
border-color: var(--lk-blue, #00209F);
box-shadow: 0 8px 20px rgba(0, 32, 159, .3);
}
html[data-theme="dark"] body .lkc a.lkc-add--ghost,
html[data-theme="dark"] .lkc a.lkc-add--ghost {
color: #60A5FA !important;
border-color: #60A5FA;
}
html[data-theme="dark"] body .lkc a.lkc-add--ghost:hover,
html[data-theme="dark"] .lkc a.lkc-add--ghost:hover {
color: #FFFFFF !important;
background: var(--lk-blue, #00209F) !important;
border-color: var(--lk-blue, #00209F);
}
.lkc-add svg { flex-shrink: 0; }
.lkc-add .lkc-ico-check { display: none; } html body .lkc a.lkc-add.loading {
cursor: progress;
opacity: .85;
pointer-events: none;
}
.lkc-add.loading .lkc-ico-cart { display: none; }
.lkc-add.loading::before {
content: '';
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, .4);
border-top-color: #FFFFFF;
border-radius: 50%;
animation: lkc-spin .7s linear infinite;
}
html body .lkc a.lkc-add.added {
background: var(--lk-green, #2E7D32) !important;
border-color: var(--lk-green, #2E7D32);
box-shadow: 0 2px 8px rgba(46, 125, 50, .3);
}
.lkc-add.added .lkc-ico-cart  { display: none; }
.lkc-add.added .lkc-ico-check { display: block; } html body .lkc .lkc-buy a.added_to_cart {
display: flex !important;
align-items: center;
justify-content: center;
gap: 0;
width: 100%;
margin: -2px 0 0 !important;
padding: 10px 16px !important;
box-sizing: border-box;
color: var(--lk-blue, #00209F) !important;
background: transparent !important;
border: 2px solid var(--lk-border, #E0E0E0) !important;
border-radius: 10px !important;
box-shadow: none !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.2;
text-align: center;
text-decoration: none !important;
transform: none !important;
transition: color .2s ease, background .2s ease, border-color .2s ease !important;
}
html body .lkc .lkc-buy a.added_to_cart:hover {
color: var(--lk-on-accent, #FFFFFF) !important;
background: var(--lk-green, #2E7D32) !important;
border-color: var(--lk-green, #2E7D32) !important;
}
html[data-theme="dark"] .lkc .lkc-buy a.added_to_cart {
color: #60A5FA !important;
border-color: rgba(255, 255, 255, .14) !important;
}
html[data-theme="dark"] .lkc .lkc-buy a.added_to_cart:hover { color: #FFFFFF !important; }
.lkc .lkc-buy a.added_to_cart i,
.lkc .lkc-buy a.added_to_cart svg { display: none !important; }
.lkc .lkc-buy a.added_to_cart span {
display: inline !important;
font-size: 0 !important; }
.lkc .lkc-buy a.added_to_cart span::before {
content: 'Gade panye';
font-size: 13px;
}
@keyframes lkc-spin { to { transform: rotate(360deg); } } .lkc[data-count="1"] .lkc-slide {
flex: 0 1 940px;
margin-inline: auto;
}
.lkc[data-count="1"] .lkc-card { flex-direction: row; }
.lkc[data-count="1"] .lkc-media {
flex: 0 0 46%;
aspect-ratio: auto;
min-height: 420px;
}
.lkc[data-count="1"] .lkc-body {
justify-content: center;
gap: 12px;
padding: 36px 40px;
}
.lkc[data-count="1"] .lkc-name {
display: block;
min-height: 0;
font-family: var(--lk-font-title, 'Fraunces', Georgia, serif);
font-size: clamp(22px, 3vw, 30px);
line-height: 1.2;
-webkit-line-clamp: unset;
line-clamp: unset;
}
.lkc[data-count="1"] .lkc-excerpt { display: block; }
.lkc[data-count="1"] .lkc-buy     { margin-top: 12px; max-width: 360px; }
.lkc[data-count="1"] .lkc-prices  { font-size: 28px; }
@media (max-width: 720px) {
.lkc[data-count="1"] .lkc-card  { flex-direction: column; }
.lkc[data-count="1"] .lkc-media { flex: none; aspect-ratio: 1 / 1; min-height: 0; }
.lkc[data-count="1"] .lkc-body  { padding: 20px 18px 22px; }
.lkc[data-count="1"] .lkc-buy   { max-width: none; }
} .lkc-admin-note {
max-width: 1200px;
margin: 24px auto;
padding: 16px 20px;
color: var(--lk-text, #1A1A1A);
background: var(--lk-gold-lt, #FFF3CD);
border-left: 4px solid var(--lk-gold, #F5A623);
border-radius: 0 8px 8px 0;
font-family: var(--lk-font-body, 'DM Sans', sans-serif);
font-size: 14px;
}
html[data-theme="dark"] .lkc-admin-note { color: var(--lk-gold-text, #FDE68A); background: rgba(245, 166, 35, .12); } @media (max-width: 559px) {
.lkc-body   { padding: 14px 14px 16px; }
.lkc-prices { font-size: 18px; }
} @media (prefers-reduced-motion: reduce) {
.lkc-card,
.lkc-img,
.lkc-peek,
.lkc-media::after,
.lkc-progress span,
html body .lkc a.lkc-add,
html body .lkc .lkc-btn {
transition-duration: .01ms !important;
}
.lkc-card:hover,
.lkc-card:hover .lkc-img { transform: none; }
} html body .lkc .lkc-btn:focus { outline: none !important; }
html body .lkc .lkc-btn:focus-visible {
outline: 2px solid var(--lk-gold, #F5A623) !important;
outline-offset: 3px !important;
}