/* Clerk.io embeds + powerstep — Aura design language.
   HAND-MAINTAINED asset (no SCSS source, not in the build); loaded only when
   the Clerk integration is on and the visitor has given MARKETING consent
   ({if $general.clerk} in index.tpl), after
   theme.css, so all --aura-*/--craft-* tokens resolve.

   Clerk selectors verified against the production shop's rendered designs
   (2026-07-21): span.clerk > .clerk-slider with .clerk-slider-item cards
   (.clerk-design-product-name / -price), h2 section heading, and
   .clerk-slider-nav prev/next arrows. The hashed .clerk-design-component-*
   classes are per-design and NOT targeted. Clerk injects its own inline
   <style> after ours, so brand-critical overrides carry !important. */

/* ── Section wrapper + heading ─────────────────────────── */
span.clerk {
    display: block;
    margin: var(--craft-space-lg) 0;
}

/* Same as the theme's own section titles ("Relaterede produkter", "Kunder der har
   koebt ..."): 900, uppercase, -0.01em, the page-title clamp from
   _head-titles-upright.scss. Upright everywhere; on the front page the theme's
   italic title rule applies on its own. Colour is the headline token, not
   --aura-black, which stays black in the dark theme. (1 Oct 2026) */
span.clerk h2 {
    font-family: var(--aura-font-primary) !important;
    font-size: clamp(1.375rem, 2.2vw, 1.75rem) !important;
    font-weight: var(--aura-font-weight-black) !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
    color: var(--aura-font-color-headline) !important;
    margin: 0 0 18px !important;
}

body:not(.frontpage) span.clerk h2 {
    font-style: normal !important;
}

/* ── Product cards ─────────────────────────────────────────
   Follows the PLP card (varekort B, _head-plp-varekort.scss +
   _products-responsive.scss, measured on staging 1 Oct 2026): an open card with
   no box or border, the image on the card tile with button rounding, the name at
   15/500 and the price at 14/700 in the headline colour. Clerk draws the image as
   a background-image on a hashed div, so it is found via its inline style; the
   blend mode lets the white photo backdrop sink into the tile, as mix-blend-mode
   does on the theme's <img>. */
span.clerk .clerk-slider-item {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

span.clerk .clerk-slider-item [style*="background-image"] {
    border-radius: var(--craft-radius-btn, 4px);
    background-color: var(--aura-card-tile) !important;
    background-blend-mode: multiply;
}

span.clerk .clerk-design-product-name {
    font-family: var(--aura-font-primary) !important;
    font-size: 15px !important;
    font-weight: var(--aura-font-weight-medium, 500) !important;
    font-style: normal !important;
    text-transform: none !important;
    line-height: 1.4 !important;
    color: var(--aura-font-color-headline) !important;
    padding: 10px 0 0 !important;
}

span.clerk .clerk-design-product-price {
    font-family: var(--aura-font-primary) !important;
    font-size: 14px !important;
    font-weight: var(--aura-font-weight-bold) !important;
    font-style: normal !important;
    color: var(--aura-font-color-headline) !important;
    padding: 4px 0 0 !important;
    white-space: nowrap;
}

span.clerk .clerk-design-product-price::after {
    content: " DKK";
}

/* ── Slider nav arrows (Clerk default: yellow rounded — off-brand) ── */
span.clerk .clerk-slider-nav {
    background: var(--aura-black) !important;
    color: var(--aura-white, #fff) !important;
    border-radius: var(--aura-border-radius, 0) !important;
    box-shadow: none !important;
    transition: background var(--aura-duration-fast) var(--aura-easing) !important;
}

span.clerk .clerk-slider-nav:hover {
    background: var(--aura-red) !important;
}

span.clerk .clerk-slider-nav-prev::after,
span.clerk .clerk-slider-nav-next::after {
    text-shadow: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ── Powerstep (added-to-basket) ───────────────────────────
   Migrated off the undefined --bp-* tokens (they resolved to nothing,
   leaving the overlay unstyled) onto the Aura token set. Structure kept
   from the original file. */
section.powerstep .powerstep-info {
    position: relative;
    padding: 1em;
    margin-bottom: 1em;
    background-color: var(--aura-box-bg);
    border: 1px solid var(--aura-border-color);
    border-radius: var(--aura-border-radius, 0);
}
section.powerstep .added-to-basket {
    margin-bottom: 1.2em;
    text-align: center;
}
section.powerstep .added-to-basket span {
    display: inline-block;
    position: relative;
    padding: 10px 0 10px 30px;
    line-height: 1.2;
    font-family: var(--aura-font-primary);
    font-size: 16px;
    font-weight: var(--aura-font-weight-black);
    text-transform: uppercase;
    letter-spacing: var(--craft-tracking-caps);
    color: var(--aura-black);
}
section.powerstep .added-to-basket span:before {
    display: inline-block;
    position: absolute;
    top: 3px;
    left: 0;
    content: "\f00c";
    font-family: FontAwesome;
    font-size: 1.5em;
    color: var(--aura-red);
}
section.powerstep .product {
    max-width: 290px;
    margin: 0 auto 2em;
}
section.powerstep .powerstep-info:before,
section.powerstep .powerstep-info:after {
    content: "";
    display: table;
}
section.powerstep .powerstep-info:after {
    clear: both;
}
section.powerstep .product a.img {
    display: block;
    float: left;
    border: 1px solid var(--aura-border-color);
    border-radius: var(--aura-border-radius, 0);
}
section.powerstep .product a.img img {
    margin: 0;
}
section.powerstep .product .details {
    margin-left: 83px;
    line-height: 1.1;
    font-size: 12px;
}
section.powerstep .product .details,
section.powerstep .product .details a,
section.powerstep .product .details s {
    color: var(--aura-font-color-primary);
}
section.powerstep .product .details .product-title {
    font-weight: 700;
}
section.powerstep .product .details a {
    display: block;
    margin-bottom: 0.3em;
    transition: color var(--aura-duration-fast) var(--aura-easing);
}
section.powerstep .product .details a:hover {
    color: var(--aura-red);
}
section.powerstep .product .details s {
    display: inline-block;
    margin-left: 8px;
    color: var(--aura-zinc-400);
}
section.powerstep .buttons {
    text-align: right;
}
section.powerstep .buttons a.shop-more {
    background-color: var(--aura-box-bg);
    border: 1px solid var(--aura-border-color);
    border-radius: var(--aura-border-radius, 0);
    color: var(--aura-black);
    transition:
        background var(--aura-duration-fast) var(--aura-easing),
        border-color var(--aura-duration-fast) var(--aura-easing);
}
section.powerstep .buttons a.shop-more:hover {
    border-color: var(--aura-black);
}
section.powerstep .buttons a {
    display: inline-block;
    width: auto;
    margin-top: 8px;
    border-radius: var(--aura-border-radius, 0);
}
section.powerstep .buttons a + a {
    margin-left: 5px;
}
section.powerstep .button-primary {
    font-size: .875em !important;
}

@media (min-width: 768px) {
    section.powerstep .container {
        position: relative;
    }
    section.powerstep .added-to-basket {
        max-width: 275px;
        float: left;
        margin: 0;
        padding: 1.5em 1.5em 1.5em 1em;
        border-right: 1px solid var(--aura-border-color);
        text-align: left;
    }
    section.powerstep .added-to-basket span {
        font-size: 14px;
    }
    section.powerstep .product {
        max-width: 270px;
        float: left;
        margin: 0.5em 0 0 1.5em;
    }
    section.powerstep .buttons a {
        position: absolute;
        right: 15px;
        margin-top: 0;
    }
    section.powerstep .buttons .shop-more {
        bottom: 1em;
    }
    section.powerstep .buttons .to-cart {
        top: 1em;
        padding: 12px 15px;
    }
}

@media (min-width: 960px) {
    section.powerstep .added-to-basket {
        max-width: 385px;
        padding-right: 2em;
    }
    section.powerstep .added-to-basket span {
        padding-left: 40px;
        font-size: 18px;
    }
    section.powerstep .product {
        margin-left: 2em;
    }
    section.powerstep .buttons .to-cart {
        padding-right: 25px;
        padding-left: 25px;
    }
}

@media (min-width: 1280px) {
    section.powerstep .powerstep-info {
        padding-left: 10em;
    }
    section.powerstep .added-to-basket {
        max-width: 100%;
        padding-right: 10em;
    }
    section.powerstep .buttons a {
        right: 70px;
    }
}