/* ==========================================================================
   Produktside + Sammenlign
   ========================================================================== */

.c-pdp { padding-top: 24px; }
.c-pdp__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(380px, 5fr); gap: 48px; margin-top: 20px; align-items: start; }

/* Gallery */
.c-gallery { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.c-gallery__main { position: relative; aspect-ratio: 1 / 1; max-height: 720px; width: 100%; border-radius: var(--r-lg); background: var(--tile); overflow: hidden; }
.c-gallery__slide { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; cursor: zoom-in; display: block; }
.c-gallery__slide[hidden] { display: none; }
.c-gallery__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12%; mix-blend-mode: multiply; }
.c-gallery__slide--ghost { display: flex; align-items: center; justify-content: center; color: var(--ghost); cursor: default; }
.c-gallery__slide--dims { cursor: default; display: flex; align-items: center; justify-content: center; color: var(--dark); padding: 10%; }
.c-gallery__slide--dims[hidden] { display: none; }
.c-dims { width: 100%; height: auto; max-height: 100%; }
.c-gallery__energy { position: absolute; top: 20px; left: 20px; z-index: 2; }
.c-gallery__thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.c-gallery__thumb { width: 84px; height: 84px; border-radius: var(--r-md); border: 2px solid transparent; background: var(--tile); padding: 0; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ghost); }
.c-gallery__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.c-gallery__thumb[aria-selected="true"] { border-color: var(--dark); color: var(--dark); }
.c-gallery__thumb--icon span { font-size: 11px; font-weight: 600; color: var(--dark-2); }

/* Buy box */
.c-buy { position: sticky; top: 176px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.admin-bar .c-buy { top: 208px; }
.c-buy__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.c-buy__brand { font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.c-buy__ean { font-size: 12px; color: var(--muted); }
.c-sku { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: var(--r-sm); padding: 2px 8px; font: 500 12px var(--ff-mono); color: var(--dark-2); cursor: copy; }
.c-sku .c-icon { color: var(--muted); }
.c-buy h1 { font-size: 36px; line-height: 1.12; letter-spacing: -0.02em; }
.c-specchips { display: flex; flex-wrap: wrap; gap: 6px; }
.c-specchips span { height: 32px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; font: 500 13px var(--ff-mono); }
.c-buy__energy { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.c-buy__price { padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.c-buy__price .c-price { gap: 10px; }
.c-buy__stock { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.c-buy__stock .c-stock { font-size: 15px; font-weight: 600; }
.c-buy__stock .c-stock::before { width: 9px; height: 9px; }
.c-buy__stocksub { font-size: 14px; padding-left: 17px; }
.c-buy__add { display: flex; gap: 10px; }
.c-buy__cta { flex: 1; font-size: 17px; }
.c-buy__tools { display: flex; gap: 8px; }
.c-buy__tools .c-btn { flex: 1; font-size: 14px; padding: 0 8px; }
.c-buy__tools .c-icon { color: var(--dark); }
.c-buy__tools [aria-pressed="true"] { border-color: var(--dark); }
.c-ecost { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.c-ecost__head { font-size: 15px; }
.c-ecost__head b { font: 700 22px var(--ff-display); }
.c-ecost__bar { height: 6px; border-radius: 999px; background: var(--tile); overflow: hidden; }
.c-ecost__bar span { display: block; height: 100%; background: var(--dark-2); transition: width var(--t); }
.c-ecost__rate { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.c-ecost__rate input { width: 56px; height: 28px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 6px; font-size: 12px; text-align: right; }
.c-trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; font-size: 14px; }
.c-trust li { display: flex; gap: 8px; align-items: center; }
.c-trust .c-icon { color: var(--dark-2); }

/* Sticky section tabs */
.c-tabs { position: sticky; top: 128px; z-index: 20; margin-top: 72px; background: var(--bg); border-bottom: 1px solid var(--line); display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.is-scrolled .c-tabs { top: 112px; }
.admin-bar .c-tabs { top: 160px; }
.admin-bar.is-scrolled .c-tabs { top: 144px; }
.c-tabs::-webkit-scrollbar { display: none; }
.c-tabs a { padding: 16px 18px; font-size: 15px; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.c-tabs a:hover { color: var(--ink); }
.c-tabs a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.c-pdp__sec { padding-top: 56px; scroll-margin-top: 220px; }
.c-pdp__sec h2 { font-size: 28px; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 20px; }
.c-pdp__desc { max-width: 70ch; }
.c-pdp__desc h2 { margin-bottom: 16px; }
.c-prose p { font-size: 17px; line-height: 1.65; margin: 0 0 14px; }
.c-prose ul { padding-left: 22px; }
.c-pdp__desc > p { font-size: 16px; margin: 0 0 8px; }

.c-specgroups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); gap: 20px; position: relative; }
.c-specgroups.is-collapsed { max-height: 760px; overflow: hidden; }
.c-specgroups.is-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(rgba(248, 244, 238, 0), var(--bg)); }
.c-specgroup { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 6px 20px 10px; align-self: start; }
.c-specgroup h3 { margin: 12px 0 6px; font: 600 16px var(--ff-display); letter-spacing: 0; }
.c-specrow { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--tile); font-size: 14px; }
.c-specrow .mono { font-size: 13px; text-align: right; }
.c-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.c-doc { display: flex; align-items: center; gap: 14px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); text-decoration: none; transition: border-color var(--t-fast); }
.c-doc:hover { border-color: var(--dark); color: var(--ink); }
.c-doc__icon { width: 44px; height: 52px; border-radius: var(--r-sm); background: var(--accent-100); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font: 600 10px var(--ff-mono); color: var(--dark-2); flex: none; }
.c-doc__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-doc__text b { font-weight: 600; font-size: 15px; }
.c-doc__text span { font-size: 12px; color: var(--muted); }

/* Similar table */
.c-pdp__similar { padding-top: 80px; }
.c-simtable { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow-x: auto; }
.c-simtable table { width: 100%; font-size: 14px; min-width: 860px; table-layout: fixed; }
.c-simtable th { padding: 16px; text-align: left; vertical-align: top; font-weight: 400; }
.c-simtable__label { width: 180px; color: var(--muted); padding: 12px 16px !important; }
.c-simtable td { padding: 12px 16px; border-top: 1px solid var(--tile); font-size: 13px; }
.c-simtable .is-self { background: var(--accent-50); }
.c-simtable .is-diff { background: var(--accent-100); }
.c-simtable__prod { display: flex; flex-direction: column; gap: 8px; color: var(--ink); text-decoration: none; }
.c-simtable__img { aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--tile); position: relative; overflow: hidden; }
.c-simtable__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; }
.c-simtable__name { font-weight: 600; line-height: 1.35; }
.c-simtable__tag { display: block; margin-top: 4px; font-size: 12px; color: var(--dark-2); font-weight: 600; }
.c-pdp__rail { padding-top: 80px; }

/* Mini buy bar */
.c-minibar { position: fixed; top: 128px; left: 0; right: 0; z-index: 55; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 12px 40px rgba(43, 33, 24, .08); transform: translateY(-120%); visibility: hidden; transition: transform var(--t) ease-out, visibility var(--t); }
.is-scrolled .c-minibar { top: 112px; }
.admin-bar .c-minibar { top: 160px; }
.c-minibar.is-on { transform: none; visibility: visible; }
.c-minibar__in { padding-top: 10px; padding-bottom: 10px; display: flex; align-items: center; gap: 16px; }
.c-minibar__thumb { width: 44px; height: 44px; border-radius: var(--r); background: var(--tile); position: relative; overflow: hidden; flex: none; }
.c-minibar__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.c-minibar__name { font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-minibar .c-price__amount { font-size: 20px; }

@media (max-width: 1100px) { .c-pdp__top { grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr); gap: 28px; } .c-buy h1 { font-size: 30px; } }
@media (max-width: 900px) {
	.c-pdp__top { grid-template-columns: 1fr; gap: 20px; margin-top: 12px; }
	.c-buy { position: static; gap: 14px; }
	.c-buy h1 { font-size: 26px; }
	.c-price--lg .c-price__amount { font-size: 34px; }
	.c-gallery__main { aspect-ratio: 1 / 1; }
	.c-gallery__thumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.c-gallery__thumb { width: 64px; height: 64px; flex: none; }
	.c-buy__tools .c-btn { font-size: 12px; height: 44px; flex-direction: column; gap: 2px; }
	.c-trust { grid-template-columns: 1fr; }
	.c-tabs, .is-scrolled .c-tabs, .admin-bar .c-tabs, .admin-bar.is-scrolled .c-tabs { top: var(--sticky-top); }
	.c-tabs { margin-top: 40px; transition: top var(--t) var(--ease); }
	.c-pdp__sec { padding-top: 40px; scroll-margin-top: 120px; }
	.c-pdp__sec h2 { font-size: 22px; }
	.c-prose p { font-size: 16px; }
	.c-specgroup { padding: 4px 14px 8px; }
	.c-minibar, .is-scrolled .c-minibar, .admin-bar .c-minibar { top: auto; bottom: 64px; }
	.c-minibar { border-top: 1px solid var(--line); border-bottom: 0; transform: translateY(120%); box-shadow: 0 -8px 24px rgba(43, 33, 24, .08); }
	.c-minibar__in { gap: 10px; }
	.c-minibar__thumb, .c-minibar__name { display: none; }
	.c-minibar .c-price { flex: 1; }
	.c-pdp__similar, .c-pdp__rail { padding-top: 56px; }
}

/* ---------- Compare page ---------- */
.c-cmp { padding-top: 24px; padding-bottom: 96px; }
.c-cmp__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 16px 0 24px; }
.c-cmp__head h1 { font-size: 44px; line-height: 1.1; }
.c-cmp__head p { margin: 6px 0 0; font-size: 16px; }
.c-cmp__diff { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; cursor: pointer; }
.c-cmp__table { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow-x: auto; }
.c-cmp__grid { display: grid; grid-template-columns: 220px repeat(4, minmax(180px, 1fr)); min-width: 940px; }
.c-cmp__sticky { position: sticky; top: 0; z-index: 3; background: #fff; border-bottom: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.c-cmp__corner { padding: 20px; font-size: 13px; color: var(--muted); display: flex; align-items: flex-end; }
.c-cmp__col { padding: 16px; border-left: 1px solid var(--tile); display: flex; flex-direction: column; gap: 8px; position: relative; }
.c-cmp__rm { position: absolute; top: 10px; right: 10px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; }
.c-cmp__img { aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--tile); position: relative; overflow: hidden; display: block; }
.c-cmp__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; }
.c-cmp__name { font-weight: 600; line-height: 1.35; color: var(--ink); text-decoration: none; min-height: 42px; }
.c-cmp__empty { padding: 16px; border-left: 1px solid var(--tile); display: flex; flex-direction: column; gap: 10px; }
.c-cmp__add { aspect-ratio: 4 / 3; border-radius: var(--r-md); border: 1px dashed var(--line-2); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--dark-2); }
.c-cmp__hits button { text-align: left; border: 0; background: transparent; padding: 6px 4px; border-radius: var(--r-sm); font-size: 13px; width: 100%; }
.c-cmp__hits button:hover { background: var(--bg); }
.c-cmp__group { padding: 14px 20px; background: var(--bg); font: 600 15px var(--ff-display); border-bottom: 1px solid var(--tile); grid-column: 1 / -1; }
.c-cmp__label { padding: 12px 20px; color: var(--muted); font-size: 14px; border-bottom: 1px solid var(--tile); }
.c-cmp__cell { padding: 12px 16px; border-left: 1px solid var(--tile); border-bottom: 1px solid var(--tile); font: 500 13px var(--ff-mono); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.c-cmp__cell.is-best { background: var(--accent-100); }
.c-cmp__best { font: 600 11px var(--ff-ui); color: var(--ok); background: #fff; border: 1px solid #CFE3D6; border-radius: 999px; padding: 1px 8px; }
.c-cmp__row.is-same { }
.c-cmp.is-diff-only .c-cmp__row.is-same { display: none; }
.c-cmp__row { display: contents; }
.c-cmp__group.c-cmp__row { display: block; }
.c-cmp__corner { border-top-left-radius: var(--r-lg); }
@media (min-width: 1100px) {
	/* The grid fits, so the header row can stick under the site header. */
	.c-cmp__table { overflow: visible; }
	.c-cmp__sticky > * { position: sticky; top: var(--sticky-top); z-index: 3; background: #fff; border-bottom: 1px solid var(--line); }
	.c-cmp__sticky > *:last-child { border-top-right-radius: var(--r-lg); }
	.admin-bar .c-cmp__sticky > * { top: calc(var(--sticky-top) + 32px); }
}
@media (max-width: 767px) { .c-cmp__head h1 { font-size: 30px; } .c-cmp__grid { grid-template-columns: 120px repeat(4, minmax(150px, 1fr)); } }