/* ==========================================================================
   Palette-A tokens (skydetid revamp). Mirrors the theme's :root values in
   assets/css/main.css so the plugin's cards/sliders match the site exactly.
   Scoped to the plugin's own containers so we never fight the theme, and we
   fall back to var(--wp--preset--*) when the theme's tokens are present, or a
   hard-coded literal (same value) when the plugin renders outside the theme
   (editor iframe, REST block preview, etc.).
   ========================================================================== */
.apr-container,
.apr-slider-container,
.apr-related-container,
.apr-product-single-container,
.apr-compare-container {
    --apr-surface: var(--wp--preset--color--surface, #FFFFFF);
    --apr-base:    var(--wp--preset--color--base, #F5F2ED);
    --apr-subtle:  var(--wp--preset--color--subtle, #EDE9E2);
    --apr-line:    var(--wp--preset--color--line, #DED8CE);
    --apr-ink:     var(--wp--preset--color--ink, #1A1C1A);
    --apr-ink-soft:var(--wp--preset--color--ink-soft, #5A5F57);
    --apr-accent:  var(--wp--preset--color--accent, #274A2B);
    --apr-accent-ink: var(--wp--preset--color--accent-ink, #FCFDFB);
    --apr-danger:  var(--wp--preset--color--danger, #7A2E2E);
    --apr-brass:   var(--wp--preset--color--brass, #9A7B3F);
    --apr-accent-hover: #1d3a22; /* forest, one step darker */
    --apr-gunmetal:var(--wp--preset--color--gunmetal, #1F2421);
    --apr-shadow-sm: 0 1px 2px rgba(20,24,20,.05), 0 8px 20px -14px rgba(20,24,20,.28);
    --apr-shadow-btn: 0 2px 6px -1px rgba(20,24,20,.18), 0 1px 2px rgba(20,24,20,.08);
    --apr-r: 12px;
    --apr-r-sm: 8px;
}

/* Generel container for grid og loader */
.apr-container {
    font-family: var(--wp--preset--font-family--sans, "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    margin: 2em 0;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* Border-box for EVERY grid descendant. Without this the grid's CTA
   (.apr-card-button: width:100% + padding) overflowed its card by ~7px on
   every viewport ("knap sejler"). The slider/related/single containers already
   reset box-sizing on *; the grid container did not — this closes that gap. */
.apr-container *,
.apr-container *::before,
.apr-container *::after {
    box-sizing: border-box;
}

/* Selve produkt-griddet.
   auto-fill + minmax keeps even gutters and CLS-safe columns; on phones a
   single 250px floor guarantees the card (and its CTA) never overflows the
   viewport. Matches the front-page .post-grid / .sd-linkcards rhythm. */
.apr-grid .apr-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
    gap: 24px;
    width: 100%;
    max-width: 100%;
}

/* Styling for hvert produktkort.
   Mirrors the theme's front-page cards (.post-grid li / .sd-lc-card): surface
   fill, 1px line border, 12px radius, clipped, with a soft resting shadow so the
   grid reads as tidy elevated tiles. min-width:0 lets long titles wrap instead
   of forcing the grid track wider (a subtle overflow source). */
.apr-card {
    background: var(--apr-surface, #fff);
    border: 1px solid var(--apr-line, #DED8CE);
    border-radius: var(--apr-r, 12px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
    position: relative;
    height: 100%;
    min-width: 0;
    max-width: 100%;
    box-shadow: var(--apr-shadow-sm, 0 1px 2px rgba(20,24,20,.05), 0 8px 20px -14px rgba(20,24,20,.28));
}

.apr-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(20,24,20,.06), 0 16px 34px -18px rgba(20,24,20,.32);
    border-color: color-mix(in srgb, var(--apr-accent, #274A2B) 32%, var(--apr-line, #DED8CE));
}

.apr-card-link-wrapper {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.apr-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: var(--apr-accent, #274A2B);
    color: var(--apr-accent-ink, #FCFDFB);
    padding: .32em .6em;
    border-radius: 6px;
    font-family: var(--wp--preset--font-family--mono, "IBM Plex Mono", ui-monospace, monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    z-index: 2;
}

.apr-card-image {
    aspect-ratio: 1 / 1;
    background-color: var(--apr-base, #F5F2ED);
    overflow: hidden;
}
/* Slider-/related-kort: KOMPAKT, premium billed-ramme (grid-kort forbliver
   kvadratiske). Ejer: "sliders er stadig lidt for høje" + "skal shine".
   - Med 3,5 kort/viewport er kortene smallere (~311px), så 4/3 giver nu et
     balanceret, lidt højere billede (~233px) uden at løbe løbsk; en HÅRD
     max-height fanger stadig ekstra brede breakout-kort på desktop.
   - Chalk-tonet ramme med et blødt top-highlight + en fin indre hairline,
     så letterboxing af produktfotos (skudt på hvid) læses som en bevidst
     ramme og ikke som død plads. */
.apr-slider-container .apr-card-image,
.apr-related-container .apr-card-image {
    aspect-ratio: 4 / 3;
    max-height: 240px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--apr-surface, #fff) 55%, var(--apr-base, #F5F2ED)) 0%,
            var(--apr-base, #F5F2ED) 42%,
            color-mix(in srgb, var(--apr-base, #F5F2ED) 88%, var(--apr-line, #DED8CE)) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--apr-line, #DED8CE) 55%, transparent);
    position: relative;
}
/* Fin lys kant øverst i rammen — giver dybde uden en tung streg. */
.apr-slider-container .apr-card-image::after,
.apr-related-container .apr-card-image::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: color-mix(in srgb, var(--apr-surface, #fff) 70%, transparent);
    pointer-events: none;
}
.apr-slider-container .apr-card-image img,
.apr-related-container .apr-card-image img {
    padding: 6px 10px;
}

.apr-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
    padding: 8px;
    box-sizing: border-box;
}

.apr-card:hover .apr-card-image img {
    transform: scale(1.05);
}

/* ==========================================================================
   SLIDER / RELATED — kompakt, horisontalt-effektivt kort (palette A).
   Kun scoped til slider+related, så grid-kortene beholder deres roomier
   rytme. Formål: mærkbart LAVERE kort uden at det virker klemt — kortere
   billed-ramme (ovenfor) + strammere indhold + lidt mindre men læsbar
   pris/CTA. Bygger oven på det eksisterende v2-kort (brand → titel → "På
   lager" → pris/Spar → "Se pris hos {forhandler}" → Reklamelink).
   ========================================================================== */
.apr-slider-container .apr-card-content,
.apr-related-container .apr-card-content {
    padding: 12px 14px 10px;
    gap: 0;
}
/* Brand-versal tættere på titlen. */
.apr-slider-container .apr-card-brand,
.apr-related-container .apr-card-brand {
    margin-bottom: 3px;
    font-size: 10px;
}
/* Titel: samme 2-linjers clamp, men lidt strammere så kortet sparer højde. */
.apr-slider-container .apr-card-title,
.apr-related-container .apr-card-title {
    font-size: 14.5px;
    line-height: 1.32;
    margin: 0 0 6px 0;
    min-height: calc(1.32em * 2);
}
/* "På lager"-chip: mindre luft under, så pris rykker op. */
.apr-slider-container .apr-card-v2 .apr-meta-stock,
.apr-related-container .apr-card-v2 .apr-meta-stock {
    font-size: 12px;
    margin-bottom: 6px;
}
/* Pris: forest, tydelig, men en anelse mindre end grid for kompakthed. */
.apr-slider-container .apr-card-price,
.apr-related-container .apr-card-price {
    font-size: 16.5px;
    gap: 2px 8px;
}
.apr-slider-container .apr-card .old-price,
.apr-related-container .apr-card .old-price {
    font-size: 13px;
}
/* "hos {forhandler}" — mindre og tættere, egen linje. */
.apr-slider-container .apr-card-v2 .apr-price-seller,
.apr-related-container .apr-card-v2 .apr-price-seller {
    font-size: 11.5px;
    margin-top: 1px;
}
/* Footer + CTA: strammere og lidt lavere knap; pilen giver klar affordance. */
.apr-slider-container .apr-card-footer,
.apr-related-container .apr-card-footer {
    padding: 0 14px 12px;
}
.apr-slider-container .apr-card-button,
.apr-related-container .apr-card-button {
    padding: 10px 14px;
    font-size: 14.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}
/* Pil-ikon efter CTA-teksten (ren CSS, ingen markup-ændring på ankeret). */
.apr-slider-container .apr-card-button::after,
.apr-related-container .apr-card-button::after {
    content: "";
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>');
    mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>');
    transition: transform .18s ease;
}
.apr-slider-container .apr-card:hover .apr-card-button::after,
.apr-related-container .apr-card:hover .apr-card-button::after {
    transform: translateX(3px);
}
/* Lidt stærkere hover-løft på slider-kort, så de "shiner". */
.apr-slider-container .apr-card:hover,
.apr-related-container .apr-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(20,24,20,.07), 0 20px 38px -20px rgba(20,24,20,.38);
}
/* "Reklamelink"/annonce: kompakt. */
.apr-slider-container .apr-card-annonce,
.apr-related-container .apr-card-annonce {
    font-size: 10px;
    margin-top: 5px;
}

/* ==========================================================================
   Image placeholder (products with no feed image). Palette-A tinted box with a
   centered forest reticle/kaliber icon + optional brand/name initial. Rendered
   by APR_Products::product_image_html() (PHP) and aprProductImage() (JS) so we
   NEVER emit <img src="">. CLS-safe: fills the same box as a real card image
   (the wrapper's aspect-ratio + the inline aspect-ratio on the placeholder keep
   width/height identical to the <img> it replaces).
   ========================================================================== */
.apr-card-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    /* Subtle chalk gradient so it reads as an intentional empty state, not a
       broken tile. Sits on the card-image's --apr-base fill. */
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--apr-subtle, #EDE9E2) 70%, var(--apr-surface, #fff)),
            var(--apr-subtle, #EDE9E2));
    color: color-mix(in srgb, var(--apr-accent, #274A2B) 55%, var(--apr-line, #DED8CE));
    box-sizing: border-box;
    padding: 8px;
    overflow: hidden;
}
.apr-card-image-placeholder .apr-ph-icon {
    width: clamp(28px, 34%, 52px);
    height: auto;
    opacity: .85;
    flex-shrink: 0;
}
.apr-card-image-placeholder .apr-ph-initial {
    font-family: var(--wp--preset--font-family--mono, "IBM Plex Mono", ui-monospace, monospace);
    font-size: clamp(11px, 12%, 16px);
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--apr-ink-soft, #5A5F57);
}
/* No hover scale on the placeholder (there's no image to zoom). */
.apr-card:hover .apr-card-image-placeholder { transform: none; }

/* Single-product gallery placeholder: the gallery centers its child and sizes
   with max-height, so give the placeholder a comfortable square that matches
   the real image footprint at every container-query breakpoint. */
.apr-product-single-gallery .apr-card-image-placeholder {
    width: 100%;
    max-width: 260px;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
}
.apr-product-single-gallery .apr-card-image-placeholder .apr-ph-icon {
    width: clamp(48px, 40%, 96px);
}

/* Compare-table thumbnail placeholder: fills the 56x56 thumb cell. */
.apr-compare-thumb .apr-card-image-placeholder {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    padding: 4px;
    gap: 0;
    border-radius: 8px;
}
.apr-compare-thumb .apr-card-image-placeholder .apr-ph-icon { width: 60%; }
.apr-compare-thumb .apr-card-image-placeholder .apr-ph-initial { display: none; }

/* Custom-template card image placeholder: the custom card centers images and
   caps them at 200px; keep the placeholder square within that. */
.apr-custom-card .apr-card-image-placeholder {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 8px;
    margin: 0 auto;
}

.apr-card-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.apr-card-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--apr-ink, #1A1C1A);
    margin: 0 0 10px 0;
    /* Reserve exactly two lines and clamp longer names to two, so every card in
       a row keeps the same height (kills the tall-card outliers) while still
       wrapping — never overflowing. */
    min-height: calc(1.4em * 2);
    overflow-wrap: break-word;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.apr-card-price {
    margin-top: auto;
    font-size: 18px;
    font-weight: 700;
    /* Old price + new price on the baseline; "hos {forhandler}" flows to its own
       line. flex-wrap guarantees no horizontal overflow when prices are long. */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

.apr-card .old-price {
    text-decoration: line-through;
    color: var(--apr-ink-soft, #5A5F57);
    font-size: 14px;
    font-weight: 600;
    margin-right: 0;
}

.apr-card .new-price {
    color: var(--apr-accent, #274A2B);
}

/* "Spar X kr. (−Y%)" savings marker. Shown only for a genuine feed-verified
   sale (glpris > nypris). Mono pill in danger red so it reads as a discount
   without competing with the forest CTA/price. Wraps to its own line on narrow
   cards (never forces horizontal overflow). */
.apr-price-save {
    display: inline-flex;
    align-items: center;
    font-family: var(--wp--preset--font-family--mono, "IBM Plex Mono", ui-monospace, monospace);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
    color: var(--apr-danger, #7A2E2E);
    background: color-mix(in srgb, #7A2E2E 8%, transparent);
    padding: .18em .5em;
    border-radius: 6px;
    white-space: nowrap;
}

/* "hos {forhandler}" — own line under the price, muted, never overflows. */
.apr-card-v2 .apr-card-price .apr-price-seller {
    flex-basis: 100%;
    margin-top: 2px;
}

.apr-card-footer {
    padding: 0 16px 16px 16px;
}

.apr-card-button {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    background-color: var(--apr-accent, #274A2B);
    color: var(--apr-accent-ink, #FCFDFB);
    padding: 12px 14px;
    border-radius: var(--apr-r-sm, 8px);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .01em;
    /* Long retailer names ("Se pris hos …") wrap inside the button instead of
       pushing it past the card edge. Belt-and-braces alongside border-box. */
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    transition: background-color 0.2s ease;
}

.apr-card-button:hover {
    background-color: var(--apr-accent-hover, #1d3a22);
    color: var(--apr-accent-ink, #FCFDFB);
}

.apr-card-annonce {
    display: block;
    text-align: center;
    font-size: 10px;
    color: var(--apr-ink-soft, #5A5F57);
    margin-top: 6px;
    font-style: italic;
}

.apr-loader-wrap {
    text-align: center;
    padding: 2em;
}

.apr-loader {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 3px solid rgba(20,24,20,0.1);
    border-radius: 50%;
    border-top-color: var(--apr-accent, #274A2B);
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.apr-loader[hidden],
.apr-loader-wrap[hidden] {
    display: none;
}

/* ==========================================================================
   === Enkelt Produkt Kort (inline i blogindlæg) — palette-A polish ===
   Reworked to trygtireden-level finish (babynest .bn-product): warm palette-A
   line + soft radius, subtle hover lift, 1:1 chalk-tinted image frame (no cold
   grey panel / heavy divider), tightened type hierarchy, tidy spec chips.
   Compliance UNCHANGED: no stars/ratings; before→after price + "Spar X"; the
   "Reklamelink"/annonce disclosure; image placeholder for missing images.
   The .apr-affiliate-link markup + its 6 GA4 data-* attributes are untouched.
   ========================================================================== */
.apr-product-single-container, .apr-product-single-container * { box-sizing: border-box; }
.apr-product-single-container {
  font-family: var(--wp--preset--font-family--sans, "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  color: var(--apr-ink, #1A1C1A);
  background: var(--apr-surface, #fff);
  margin: 1.75em 0;
  border: 1px solid var(--apr-line, #DED8CE);
  border-radius: var(--apr-r, 12px);
  overflow: hidden;
  width: 100%;
  container-type: inline-size;
  container-name: product-card;
  box-shadow: var(--apr-shadow-sm, 0 1px 2px rgba(20,24,20,.05), 0 8px 20px -14px rgba(20,24,20,.28));
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.apr-product-single-container:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(20,24,20,.06), 0 16px 34px -18px rgba(20,24,20,.32);
  border-color: color-mix(in srgb, var(--apr-accent, #274A2B) 28%, var(--apr-line, #DED8CE));
}

/* Base layout: stacked (single column, works at any width) */
.apr-product-single {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.apr-product-single img { max-width: 100%; height: auto; display: block; }

/* Image frame: soft chalk tint (not the old cold #f9fafb), 1:1 so the product
   is always centred with even breathing room. object-fit:contain keeps the
   whole product visible. Borrowed from babynest .bn-product__media. */
.apr-product-single-gallery {
  position: relative;
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--apr-base, #F5F2ED) 55%, var(--apr-surface, #fff)),
      var(--apr-base, #F5F2ED));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.1em, 4cqi, 1.75em);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.apr-product-single-gallery img {
  border-radius: var(--apr-r-sm, 8px);
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply; /* melts a white product cutout into the chalk frame */
}

.apr-product-single-details {
  padding: clamp(1.15em, 4cqi, 1.5em);
  display: flex;
  flex-direction: column;
  /* consistent vertical rhythm between brand → title → price → chips → CTA */
  gap: .6em;
}

.apr-product-single-brand {
  font-family: var(--wp--preset--font-family--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--apr-ink-soft, #5A5F57);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  display: block;
  margin: 0;
}

.apr-product-single-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--apr-ink, #1A1C1A);
  margin: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

.apr-product-single-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
}
.apr-product-single-price .old-price { font-size: 15px; font-weight: 600; text-decoration: line-through; color: var(--apr-ink-soft, #5A5F57); }
.apr-product-single-price .new-price { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--apr-accent, #274A2B); }
.apr-product-single-price .apr-price-save { font-size: 12px; align-self: center; }
.apr-product-single-price .apr-price-seller { flex-basis: 100%; margin: 0; }

/* Spec chips: stock + delivery as tidy pills on a subtle chalk fill. Replaces
   the old bordered meta strip. */
.apr-product-single-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: .15em 0 .35em;
}
.apr-spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--apr-subtle, #EDE9E2);
  border: 1px solid color-mix(in srgb, var(--apr-line, #DED8CE) 70%, transparent);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--apr-ink-soft, #5A5F57);
  white-space: nowrap;
}
.apr-spec-chip .apr-spec-ico { flex-shrink: 0; opacity: .8; }
.apr-product-single-specs .apr-meta-stock { margin: 0; }
.apr-product-single-specs .apr-meta-stock.in-stock {
  color: var(--apr-accent, #274A2B);
  background: color-mix(in srgb, var(--apr-accent, #274A2B) 9%, var(--apr-surface, #fff));
  border-color: color-mix(in srgb, var(--apr-accent, #274A2B) 22%, transparent);
}
.apr-product-single-specs .apr-meta-stock.out-of-stock {
  color: #b4433f;
  background: color-mix(in srgb, #b4433f 8%, var(--apr-surface, #fff));
  border-color: color-mix(in srgb, #b4433f 20%, transparent);
}

.apr-product-single-actions { display: flex; flex-direction: column; gap: 0.6em; margin-top: .35em; }
.apr-product-single-button {
  display: block;
  width: 100%;
  text-align: center;
  background-color: var(--apr-accent, #274A2B);
  color: var(--apr-accent-ink, #FCFDFB);
  padding: 13px 18px;
  border-radius: var(--apr-r-sm, 8px);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.3;
  box-shadow: var(--apr-shadow-btn, 0 2px 6px -1px rgba(20,24,20,.18), 0 1px 2px rgba(20,24,20,.08));
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.apr-product-single-button:hover {
  background-color: var(--apr-accent-hover, #1d3a22);
  color: var(--apr-accent-ink, #FCFDFB);
  box-shadow: 0 6px 16px -4px rgba(20,24,20,.32);
  transform: translateY(-1px);
}
.apr-product-single-button:focus-visible {
  outline: 2px solid var(--apr-accent, #274A2B);
  outline-offset: 2px;
}

.apr-product-single-logo { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--apr-ink-soft, #5A5F57); }
.apr-product-single-logo span { flex-shrink: 0; white-space: nowrap; }
.apr-product-single-logo img { max-height: 18px; width: auto; flex-shrink: 0; opacity: .9; }

/* Container query: 2-kolonne layout når kortet er bredt nok */
@container product-card (min-width: 550px) {
  .apr-product-single {
    grid-template-columns: 210px 1fr;
    align-items: stretch;
  }
  .apr-product-single-gallery {
    aspect-ratio: auto;
    /* subtle warm hairline instead of the old heavy #f3f4f6 slab divider */
    border-right: 1px solid color-mix(in srgb, var(--apr-line, #DED8CE) 65%, transparent);
  }
  .apr-product-single-title { font-size: 21px; }
  .apr-product-single-price .new-price { font-size: 28px; }
}

@container product-card (min-width: 700px) {
  .apr-product-single {
    grid-template-columns: 270px 1fr;
  }
  .apr-product-single-title { font-size: 23px; }
  .apr-product-single-brand { font-size: 12.5px; }
}

/* Beskrivelse (bruges sjældent i inline-kort) */
.apr-product-single-description h3 { font-size: 16px; margin-bottom: 0.5em; border-bottom: 2px solid var(--apr-accent, #274A2B); padding-bottom: 0.25em; display: inline-block; }
.apr-product-single-description .prose { line-height: 1.6; color: #4b5563; word-break: break-word; overflow-wrap: break-word; max-width: 100%; }
.apr-product-single-description .prose * { max-width: 100%; }
.apr-product-single-description .prose table { display: block; overflow-x: auto; white-space: nowrap; border-collapse: collapse; width: 100%; }

/* Disclaimer */
.apr-disclaimer { font-size: 11px; color: #9ca3af; margin-top: 0.75em; font-style: italic; }
.apr-container .apr-disclaimer,
.apr-slider-container .apr-disclaimer { text-align: center; margin-top: 1.5em; }

/* ==========================================================================
   === Glider Slider (skydetid revamp — palette A, contained arrows) ===
   The old arrows sat at left:-12px / right:-12px (outside .glider-contain),
   so they "sejlede ud over siden" and could clip the viewport at mobile/wide.
   Fix: reserve gutter INSIDE the container with side padding, then pin the
   arrows into that gutter (left/right ~4px) so they are always within the
   slider bounds AND the viewport. No negative offsets, no track margin hacks.
   ========================================================================== */
.apr-slider-container {
    margin: 2em 0;
    font-family: var(--wp--preset--font-family--sans, "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    box-sizing: border-box;
    /* Standalone-safety net so the slider never overflows on its own (editor
       preview, REST render, non-theme context). The theme MAY widen this via a
       scoped breakout inside guide content (main.css → .entry-content sliders),
       which sets max-width:none and its own centered width — that override wins,
       so this default does not block the breakout. */
    max-width: 100%;
}
.apr-slider-container *, .apr-related-container * { box-sizing: border-box; }

/* Positioning context + symmetric side gutters that HOLD the arrows.
   52px each side comfortably fits a 40px button with breathing room and keeps
   it clear of the cards. */
.apr-slider-container .glider-contain,
.apr-related-container .glider-contain {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 0 52px;
    overflow: hidden; /* belt-and-braces: never let a mid-scroll track bleed out */
}
.apr-slider-container .glider,
.apr-related-container .glider {
    padding: 4px 0; /* room for card hover-lift + focus ring, no side padding */
    overflow: hidden;
}
.glider-track { display: flex; gap: 16px; align-items: stretch; margin: 0; }
.glider.draggable { cursor: grab; }
.glider.draggable:active,
.glider.drag { cursor: grabbing; }

.glider .apr-card {
    /* Matches itemWidth (230) set in apr-frontend.js. */
    min-width: 230px;
    width: 230px;
    height: auto;
}

/* --- Palette-A circular arrow buttons, contained in the gutter --- */
.apr-slider-container .glider-prev,
.apr-slider-container .glider-next,
.apr-related-container .glider-prev,
.apr-related-container .glider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--apr-surface, #fff);
    border: 1px solid var(--apr-line, #DED8CE);
    border-radius: 50%;
    color: var(--apr-accent, #274A2B);
    box-shadow: var(--apr-shadow-btn, 0 2px 6px -1px rgba(20,24,20,.18), 0 1px 2px rgba(20,24,20,.08));
    cursor: pointer;
    opacity: 1;
    z-index: 6;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
    -webkit-appearance: none;
    appearance: none;
    font-size: 0; /* neutralise Glider's inherited 40px glyph size */
    line-height: 0;
}
/* Pin inside the reserved gutter — 6px from the container edge, never outside. */
.apr-slider-container .glider-prev,
.apr-related-container .glider-prev { left: 6px; right: auto; }
.apr-slider-container .glider-next,
.apr-related-container .glider-next { right: 6px; left: auto; }

.apr-slider-container .glider-prev:hover,
.apr-slider-container .glider-next:hover,
.apr-related-container .glider-prev:hover,
.apr-related-container .glider-next:hover {
    background: var(--apr-accent, #274A2B);
    border-color: var(--apr-accent, #274A2B);
    color: var(--apr-accent-ink, #FCFDFB);
    box-shadow: 0 4px 12px -2px rgba(20,24,20,.30);
    transform: translateY(-50%) scale(1.06);
}
.apr-slider-container .glider-prev:focus-visible,
.apr-slider-container .glider-next:focus-visible,
.apr-related-container .glider-prev:focus-visible,
.apr-related-container .glider-next:focus-visible {
    outline: 2px solid var(--apr-accent, #274A2B);
    outline-offset: 2px;
}
.apr-slider-container .glider-prev.disabled,
.apr-slider-container .glider-next.disabled,
.apr-related-container .glider-prev.disabled,
.apr-related-container .glider-next.disabled {
    opacity: 0;
    pointer-events: none;
    cursor: default;
}
.apr-slider-container .glider-prev svg,
.apr-slider-container .glider-next svg,
.apr-related-container .glider-prev svg,
.apr-related-container .glider-next svg {
    width: 20px;
    height: 20px;
    display: block;
    pointer-events: none;
}

/* --- Dots, palette A --- */
.apr-slider-container .glider-dots,
.apr-related-container .glider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 16px auto 0;
    padding: 0;
}
.apr-slider-container .glider-dot,
.apr-related-container .glider-dot {
    width: 8px;
    height: 8px;
    margin: 0;
    border-radius: 999px;
    background: var(--apr-line, #DED8CE);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
}
.apr-slider-container .glider-dot:hover,
.apr-related-container .glider-dot:hover {
    background: var(--apr-ink-soft, #5A5F57);
}
.apr-slider-container .glider-dot.active,
.apr-related-container .glider-dot.active {
    background: var(--apr-accent, #274A2B);
    transform: scale(1.15);
}

/* On very narrow phones, shrink the arrows a touch (for the rare non-touch /
   mouse-at-≤480px case — on touch they're hidden by the mobile-glider block
   below). The old side-gutter reservation here was removed: the mobile-glider
   block (≤768px) sets .glider-contain padding to 0 so the swipeable track uses
   the full width with a peeking next card. */
@media (max-width: 480px) {
    .apr-slider-container .glider-prev,
    .apr-slider-container .glider-next,
    .apr-related-container .glider-prev,
    .apr-related-container .glider-next { width: 36px; height: 36px; }
    .apr-slider-container .glider-prev,
    .apr-related-container .glider-prev { left: 4px; }
    .apr-slider-container .glider-next,
    .apr-related-container .glider-next { right: 4px; }
}

/* ==========================================================================
   MOBILE GLIDER FEEL (≤768px) — "på telefon skal sliders virke som en glider"
   Goal: a smooth, swipeable, snap-to-card carousel with a PEEKING next card so
   it's obvious the row scrolls. Two layers cooperate:
     1) A native scroll-snap fallback (works even BEFORE Glider hydrates / if JS
        fails): scroll-snap-type on the track + scroll-snap-align on each card,
        momentum via -webkit-overflow-scrolling. Glider then enhances this with
        drag + programmatic snap (scrollLock).
     2) Fractional card widths so the next card peeks (~1.25 cards in view).
   Applies to catalog-slider (.apr-slider), related (.apr-related-slider), hub.
   Desktop (>768px) is untouched: contained circular arrows + dots as before.
   ========================================================================== */
@media (max-width: 768px) {
    /* Kill the desktop side gutter that reserved room for the arrows — on touch
       the swipe is primary, so the track can use the full width (with a small
       inset) and the peeking card sits flush to the edge. overflow-x:hidden on
       the contain wrapper still clips the track => 0 horizontal PAGE overflow. */
    .apr-slider-container .glider-contain,
    .apr-related-container .glider-contain {
        padding: 0;
    }

    /* The track becomes a real horizontal scroller with mandatory snap. Glider
       1.7.8 does NOT JS-drive touch drag (it only binds mouse drag + relies on
       the element's OWN native overflow scroll for fingers). The plugin's base
       rule sets .glider{overflow:hidden}, which KILLS that native touch scroll —
       the root cause of the "static/janky on phone" feel. Re-enable it here:
       overflow-x:auto makes the finger swipe scroll the track; touch-action +
       -webkit-overflow-scrolling give momentum; scroll-snap snaps to a card.
       (.glider-contain keeps overflow:hidden so the PAGE never gains x-overflow.) */
    .apr-slider-container .glider,
    .apr-related-container .glider {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        overscroll-behavior-x: contain;
        scroll-padding-left: 16px;
        padding: 4px 0;
        /* Hide the horizontal scrollbar (the peek is the affordance, not a bar). */
        scrollbar-width: none;
    }
    .apr-slider-container .glider::-webkit-scrollbar,
    .apr-related-container .glider::-webkit-scrollbar {
        display: none;
        height: 0;
    }

    .apr-slider-container .glider-track,
    .apr-related-container .glider-track {
        /* Inset the whole track so card 1 isn't glued to the viewport edge and
           the peek of the next card is visible on the right. */
        padding: 0 16px;
        gap: 14px;
    }

    /* Fractional card width => the NEXT card peeks. min() keeps a sensible floor
       on very small phones and a cap so it never balloons on large phones.
       Glider may also set inline widths for numeric slidesToShow; this is the
       CSS-fallback / pre-JS width and cooperates with it. */
    .apr-slider-container .glider .apr-card,
    .apr-related-container .glider .apr-card,
    .apr-slider-container .glider-slide,
    .apr-related-container .glider-slide {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .apr-slider-container .glider .apr-card,
    .apr-related-container .glider .apr-card {
        min-width: min(78%, 300px);
        width: min(78%, 300px);
        flex: 0 0 auto;
    }

    /* On touch, the swipe is the primary control — hide the arrows (they were
       overlapping the peeking card anyway). Keep the dots as the position cue.
       hover:none + pointer:coarse == touch device; a mouse user at ≤768px still
       gets the arrows. */
    @media (hover: none) and (pointer: coarse) {
        .apr-slider-container .glider-prev,
        .apr-slider-container .glider-next,
        .apr-related-container .glider-prev,
        .apr-related-container .glider-next {
            display: none;
        }
    }

    /* Dots stay centred and a touch larger for thumbs. */
    .apr-slider-container .glider-dots,
    .apr-related-container .glider-dots {
        margin-top: 14px;
    }

    /* Mobil-kompaktering: related-kortet fik nu FULD v2-info (brand + "På
       lager" + "hos {forhandler}"), så selv med et lavere billede kunne det
       på telefon ende en anelse højere end det gamle bare kort. Stram den
       vertikale rytme her, så kortet igen er mærkbart lavere end før — uden
       at klemme (pris + CTA forbliver de tydelige elementer). */
    .apr-slider-container .apr-card-content,
    .apr-related-container .apr-card-content {
        padding: 10px 12px 8px;
    }
    .apr-slider-container .apr-card-title,
    .apr-related-container .apr-card-title {
        font-size: 14px;
        margin-bottom: 4px;
    }
    .apr-slider-container .apr-card-v2 .apr-meta-stock,
    .apr-related-container .apr-card-v2 .apr-meta-stock {
        margin-bottom: 4px;
    }
    .apr-slider-container .apr-card-footer,
    .apr-related-container .apr-card-footer {
        padding: 0 12px 10px;
    }
    .apr-slider-container .apr-card-button,
    .apr-related-container .apr-card-button {
        padding: 9px 12px;
    }
}

/* Styling for CTA-kort */
.apr-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--apr-subtle, #EDE9E2);
    padding: 20px;
    box-sizing: border-box;
}
.apr-card-cta-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05em;
    color: var(--apr-accent, #274A2B);
    border: 2px dashed var(--apr-line, #DED8CE);
    border-radius: 10px;
    width: 100%;
    height: 100%;
    transition: all 0.2s ease;
}
.apr-card-cta-link:hover {
    background: var(--apr-surface, #fff);
    border-color: var(--apr-accent, #274A2B);
    color: var(--apr-accent-hover, #1d3a22);
}
/* Custom Template Card Styles */
.apr-custom-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    gap: 10px;
}

.apr-custom-card .apr-card-image {
    margin: 0;
    padding: 0;
    background: transparent;
}

.apr-custom-card .apr-card-image img {
    max-height: 200px;
    width: 100%;
    object-fit: contain;
}

.apr-custom-card .apr-card-brand {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.apr-custom-card .apr-card-desc {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.apr-custom-card .apr-card-meta {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Custom Template Layout Support */
.apr-custom-card {
    display: flex;
    flex-direction: row; /* Allow columns */
    flex-wrap: wrap;     /* Allow columns */
    align-items: flex-start;
    align-content: flex-start;
    height: 100%;
    padding: 16px;
    gap: 0; /* Gap handled by internal element widths/padding if needed, but usually 0 for grid logic */
    box-sizing: border-box;
}

.apr-custom-card > div,
.apr-custom-card > h3,
.apr-custom-card > a {
    box-sizing: border-box;
    /* Default to 100% width unless overridden inline */
    flex-basis: 100%;
    max-width: 100%;
}

/* Ensure images scale correctly within columns */
.apr-custom-card .apr-card-image {
    width: 100%;
    display: flex;
    justify-content: center; /* Center image in its column */
    padding: 4px;
}
.apr-custom-card .apr-card-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Ensure text content respects alignment */
.apr-custom-card .apr-card-title,
.apr-custom-card .apr-card-price,
.apr-custom-card .apr-card-meta,
.apr-custom-card .apr-card-desc,
.apr-custom-card .apr-card-brand {
    padding: 4px 8px; /* Add some breathing room */
}

/* Badge specific for custom layout */
.apr-custom-badge-wrapper {
    padding: 8px;
    display: flex;
    /* Alignment will be set by inline style */
}
.apr-card-badge-static {
    background-color: var(--apr-accent, #274A2B);
    color: var(--apr-accent-ink, #FCFDFB);
    padding: .32em .6em;
    border-radius: 6px;
    font-family: var(--wp--preset--font-family--mono, "IBM Plex Mono", ui-monospace, monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* === Filter Bar === */
.apr-filter-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding: 10px 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    color: #374151;
}

.apr-filter-sale {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
}

.apr-filter-sale-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--apr-accent, #274A2B);
    cursor: pointer;
}

/* === Pagination Controls === */
.apr-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 24px;
    padding: 16px 0;
    flex-wrap: wrap;
}

.apr-page-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    line-height: 1;
}

.apr-page-btn:hover:not(:disabled):not(.apr-page-active) {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.apr-page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.apr-page-btn.apr-page-active {
    background: #37512b;
    color: #fff;
    border-color: #37512b;
}

.apr-page-prev,
.apr-page-next {
    font-weight: 600;
}

.apr-page-prev svg,
.apr-page-next svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.apr-page-ellipsis {
    padding: 8px 6px;
    color: #9ca3af;
    font-size: 14px;
    user-select: none;
}

.apr-no-results {
    text-align: center;
    color: #6b7280;
    padding: 3em 1em;
    font-size: 15px;
}

@media (max-width: 480px) {
    .apr-pagination {
        gap: 6px;
    }
    .apr-page-btn {
        padding: 8px 10px;
        font-size: 13px;
    }
}

/* Related products slider */
.apr-related-container {
    margin: 2em 0;
    /* Same standalone-safety net as .apr-slider-container; the theme's guide
       breakout (main.css) overrides max-width when it widens the related slider. */
    max-width: 100%;
    box-sizing: border-box;
}
.apr-related-title {
    margin-bottom: 0.75em;
    font-size: 1.2em;
    font-weight: 600;
}

/* === Mobile catalog collapse: first 3 products + "Vis alle (N)" button === */
.apr-show-all-btn {
    display: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 16px 0 0;
    padding: 14px 20px;
    background: var(--apr-surface, #fff);
    border: 2px solid var(--apr-accent, #274A2B);
    border-radius: var(--apr-r-sm, 8px);
    color: var(--apr-accent, #274A2B);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.apr-show-all-btn:hover,
.apr-show-all-btn:focus-visible {
    background: color-mix(in srgb, var(--apr-accent, #274A2B) 8%, var(--apr-surface, #fff));
    outline: none;
}
.apr-show-all-btn:active {
    background: color-mix(in srgb, var(--apr-accent, #274A2B) 14%, var(--apr-surface, #fff));
}
.apr-show-all-count {
    margin: 0 4px;
}

@media (max-width: 768px) {
    .apr-container.apr-collapsible .apr-items > .apr-card:nth-child(n+4) {
        display: none;
    }
    .apr-container.apr-collapsible .apr-show-all-btn {
        display: block;
    }
    .apr-container.apr-collapsible .apr-pagination {
        display: none;
    }
}

/* ==========================================================================
   Produktkort v2 + sammenlign-tabel + auto-disclosure (skydetid revamp)
   NB: .sd-badge er ejet af temaet (theme agent leverer den rigtige styling).
   Reglerne herunder er kun STRUKTUR + et neutralt fallback, så kortet ikke
   ser i stykker ud, hvis temaets .sd-badge endnu ikke er deployet. Temaet må
   frit overskrive .sd-badge.
   ========================================================================== */

/* Palette-A fallback for editor-/data-badges (theme .sd-badge may override).
   Mono-uppercase pill matching the theme's guide badges (main.css .sd-badge). */
.sd-badge {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .32em .6em;
    border-radius: 6px;
    font-family: var(--wp--preset--font-family--mono, "IBM Plex Mono", ui-monospace, monospace);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--apr-gunmetal, #1F2421);
    color: #ECEFE9;
    white-space: nowrap;
    border: 1px solid transparent;
}
.sd-badge--sale { background: var(--apr-accent, #274A2B); color: var(--apr-accent-ink, #FCFDFB); }
.sd-badge--drop { background: var(--apr-accent, #274A2B); color: var(--apr-accent-ink, #FCFDFB); }
.sd-badge--pick { background: var(--apr-gunmetal, #1F2421); color: #ECEFE9; }

/* Badges sat oven på kortets billede. */
.apr-card-v2 .apr-card-image { position: relative; }
.apr-card-v2 .apr-card-image .sd-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}
.apr-card-v2 .apr-card-image .sd-badge + .sd-badge {
    top: 44px;
}

/* Brand (lille versal) over titlen. */
.apr-card-brand {
    display: block;
    font-family: var(--wp--preset--font-family--mono, "IBM Plex Mono", ui-monospace, monospace);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--apr-ink-soft, #5A5F57);
    margin-bottom: 4px;
}

/* "På lager"-indikator med prik. */
.apr-card-v2 .apr-meta-stock,
.apr-product-v2 .apr-meta-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
}
.apr-meta-stock.in-stock { color: var(--apr-accent, #274A2B); }
.apr-meta-stock.out-of-stock { color: #dc2626; }
.apr-stock-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
    flex-shrink: 0;
}

/* "hos {forhandler}" ved prisen. */
.apr-price-seller {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--apr-ink-soft, #5A5F57);
    margin-top: 2px;
}

/* Forest CTA + per-link "Reklamelink"-label (markedsføringsloven). */
.apr-card-v2 .apr-card-button {
    background-color: var(--apr-accent, #274A2B);
    color: var(--apr-accent-ink, #FCFDFB);
    letter-spacing: .01em;
}
.apr-card-v2 .apr-card-button:hover {
    background-color: var(--apr-accent-hover, #1d3a22);
    color: var(--apr-accent-ink, #FCFDFB);
}
.apr-cta-annoncelink {
    display: block;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--apr-ink-soft, #5A5F57);
    margin-top: 6px;
    letter-spacing: .02em;
}

/* Single-produkt v2: badges over galleriet + grøn CTA. */
.apr-product-v2 .apr-product-single-gallery { position: relative; }
.apr-product-v2 .apr-product-single-gallery .sd-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}
.apr-product-v2 .apr-product-single-gallery .sd-badge + .sd-badge { top: 44px; }
.apr-product-v2 .apr-product-single-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.apr-product-v2 .apr-price-seller { width: 100%; margin-top: 0; }
.apr-product-v2 .apr-product-single-button { background-color: var(--apr-accent, #274A2B); color: var(--apr-accent-ink, #FCFDFB); }
.apr-product-v2 .apr-product-single-button:hover { background-color: var(--apr-accent-hover, #1d3a22); color: var(--apr-accent-ink, #FCFDFB); }
.apr-product-single-updated {
    font-size: 11px;
    color: #9ca3af;
    margin-top: .75em;
    font-style: italic;
}

/* --- "Sammenlign hurtigt" tabel --- */
.apr-compare-wrap { width: 100%; overflow-x: auto; }
table.apr-compare {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    background: #fff;
}
.apr-compare thead th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    padding: 10px 12px;
    border-bottom: 2px solid #e5e7eb;
}
.apr-compare-th-price, .apr-compare-th-cta { text-align: right; }
.apr-compare-row td {
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}
.apr-compare-product { display: flex; align-items: center; gap: 12px; }
.apr-compare-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: #f3f4f6;
    overflow: hidden;
    display: block;
}
.apr-compare-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.apr-compare-name { display: flex; flex-direction: column; gap: 4px; }
.apr-compare-name a { color: #1f2937; text-decoration: none; font-weight: 600; line-height: 1.35; }
.apr-compare-name a:hover { text-decoration: underline; }
.apr-compare-seller { color: #4b5563; white-space: nowrap; }
.apr-compare-price { text-align: right; white-space: nowrap; }
.apr-compare-price .old-price { display: block; text-decoration: line-through; color: var(--apr-ink-soft, #5A5F57); font-size: 13px; }
.apr-compare-price .new-price { color: var(--apr-accent, #274A2B); font-weight: 700; }
.apr-compare-price .apr-price-save { display: inline-flex; margin-top: 3px; font-size: 10.5px; }
.apr-compare-cta { text-align: right; }
.apr-compare-btn {
    display: inline-block;
    width: auto;
    padding: 8px 16px;
    background: var(--apr-accent, #274A2B);
    color: var(--apr-accent-ink, #FCFDFB);
    border-radius: var(--apr-r-sm, 8px);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}
.apr-compare-btn:hover { background: var(--apr-accent-hover, #1d3a22); color: var(--apr-accent-ink, #FCFDFB); }

@media (max-width: 600px) {
    .apr-compare thead { display: none; }
    .apr-compare, .apr-compare tbody, .apr-compare-row, .apr-compare-row td { display: block; width: 100%; }
    .apr-compare-row { border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 12px; padding: 8px; }
    .apr-compare-row td { border: 0; padding: 6px 8px; }
    .apr-compare-price, .apr-compare-cta, .apr-compare-seller { text-align: left; }
}

/* --- Auto affiliate-disclosure box (the_content, prioritet 999) --- */
.apr-disclosure {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #f8f7f2;
    border: 1px solid #e6e2d3;
    border-left: 4px solid #37512b;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 1.5em 0;
    font-size: 14px;
    line-height: 1.5;
    color: #4b4b45;
}
.apr-disclosure__tag {
    flex-shrink: 0;
    background: #37512b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 9px;
    border-radius: 999px;
}
.apr-disclosure__link { color: #37512b; font-weight: 600; }