/* ------------------------------------------------------------------
   Product page buy flow (spec 2026-09-23-kobsoplevelse-design.md, prototype core-v16.html).
   Loaded only on a product page that gets buy-flow data. Mobile first; one red light line,
   no stickers, no pulsing. Green and gold only where the prototype has them (--ember-bf-ok,
   --ember-bf-gold below), never on accessories. Tokens from style.css.
   ------------------------------------------------------------------ */

.ember-bf [hidden] { display: none !important; }
.ember-bf .ember-bf-muted { color: var(--ember-muted); }
/* The prototype's two accent colours, used only where it used them: green for a plus in the version
   table and the second-saber offer, gold for the included saber. Never on accessories. */
.ember-bf { --ember-bf-ok: #7fd48a; --ember-bf-gold: #f2c46d; }
.ember-bf .ember-bf-kicker { margin: 0; color: var(--ember-muted); font-size: 11px; font-weight: 800; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; }

/* Layout: the buy box without the card around it, the gallery standing still beside it. */
.ember-bf.single-product .site-content div.product.type-product > .summary { padding: 0; border: 0; background: none; box-shadow: none; }
/* On a computer the buy box has the first row to itself and the gallery stretches to its height;
   buy-flow.js wraps the gallery's contents in .ember-bf-gallery-hold, which is sticky inside that
   row only, so it stops where the buy box ends. Details, reviews and related products run full
   width below both columns, never under the gallery. Without the script nothing is sticky. */
.ember-bf-gallery-hold { display: contents; }
@media (min-width: 901px) {
	.ember-bf.single-product .site-content div.product.type-product > .summary { grid-row: 1; }
	.ember-bf.single-product .site-content div.product.type-product > .woocommerce-product-gallery { align-self: stretch; }
	.ember-bf.single-product .site-content div.product.type-product > .ember-product-sections,
	.ember-bf.single-product .site-content div.product.type-product > .ember-product-details-anchor { grid-column: 1 / -1; grid-row: auto; }
	.ember-bf .woocommerce-product-gallery > .ember-bf-gallery-hold { position: sticky; top: calc(var(--ember-bf-sticky-top, 0px) + 20px); display: block; }
}

/* "Om modellen" (buy-flow.php ember_bf_about): after the buy box in the markup, so on a phone it
   follows the buy box; wherever there are two columns it sits under the gallery instead. The buy
   box spans rows 1-2 and row 2 takes what is left (1fr), so row 1 is exactly the gallery and the
   text starts right under the photos. The gallery then scrolls with the text instead of being
   sticky, so it can never cover it. The sections and related products run full width below. */
@media (min-width: 681px) {
	.ember-bf-has-about.single-product .site-content div.product.type-product { grid-template-rows: auto 1fr; }
	.ember-bf-has-about.single-product .site-content div.product.type-product > .summary { grid-row: 1 / span 2; }
	.ember-bf-has-about.single-product .site-content div.product.type-product > .woocommerce-product-gallery { align-self: start; }
	.ember-bf-has-about.single-product .site-content div.product.type-product > .ember-bf-about { grid-column: 1; grid-row: 2; align-self: start; }
	.ember-bf-has-about.single-product .site-content div.product.type-product > .ember-product-sections,
	.ember-bf-has-about.single-product .site-content div.product.type-product > .ember-product-details-anchor { grid-column: 1 / -1; grid-row: auto; }
	.ember-bf-has-about .woocommerce-product-gallery > .ember-bf-gallery-hold { position: static; }
}
/* On a computer the text then stays in view beside the rest of a long buy box: buy-flow.js
   stretches the section over the rest of row 2 (.is-held) and the text is sticky inside it, so it
   stops where the buy box ends and never reaches the gallery above or the sections below. A text
   taller than the window gets a negative top (--ember-bf-about-room): it scrolls normally until
   its last line is in view and waits there. Without the script it simply scrolls. */
@media (min-width: 901px) {
	.ember-bf-has-about.single-product .site-content div.product.type-product > .ember-bf-about.is-held { align-self: stretch; }
	.ember-bf-about.is-held > .ember-bf-about-hold { position: sticky; top: min(calc(var(--ember-bf-sticky-top, 0px) + 24px), var(--ember-bf-about-room, 0px)); }
}
.ember-bf-about { min-width: 0; margin: 0 0 48px; scroll-margin-top: 110px; }
.ember-bf-about-hold { position: relative; padding: 28px 0 0; border-top: 1px solid var(--ember-line-soft); }
.ember-bf-about-hold::before { content: ""; position: absolute; top: -1px; left: 0; width: 96px; height: 1px; background: linear-gradient(90deg, var(--ember-glow), transparent); }
.ember-bf-about .ember-bf-about-kicker { margin-bottom: 14px; }
.ember-bf-about-body { max-width: 66ch; color: var(--ember-ink-2); font-size: 16px; line-height: 1.75; overflow-wrap: break-word; }
.ember-bf-about-body > :first-child { margin-top: 0; }
.ember-bf-about-body > :last-child { margin-bottom: 0; }
.ember-bf-about-body h2, .ember-bf-about-body h3 { color: var(--ember-ink); font-family: var(--ember-font); letter-spacing: -.02em; text-transform: none; text-wrap: balance; }
.ember-bf-about-body h2 { margin: 0 0 18px; font-size: clamp(26px, 2.3vw, 34px); font-weight: 700; line-height: 1.15; }
.ember-bf-about-body h3 { margin: 34px 0 14px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.ember-bf-about-body p { margin: 0 0 1.15em; }
.ember-bf-about-body > h2 + p { color: var(--ember-ink); font-size: 17px; }
.ember-bf-about-body ul { display: grid; gap: 10px; margin: 0 0 1.6em; padding: 18px 20px; border: 1px solid var(--ember-line-soft); border-radius: var(--ember-radius-sm); background: rgba(255, 255, 255, .02); list-style: none; }
.ember-bf-about-body li { position: relative; margin: 0; padding-left: 26px; color: var(--ember-ink); line-height: 1.55; }
.ember-bf-about-body li::before { content: ""; position: absolute; top: .78em; left: 0; width: 12px; height: 1px; background: var(--ember-glow); box-shadow: 0 0 6px rgba(255, 91, 74, .6); }
.ember-bf-about-body > p:last-child:not(:first-child) { padding-top: 18px; border-top: 1px solid var(--ember-line-soft); color: var(--ember-muted); font-size: 15px; }
/* The specifications under the description (owner, 24 Sept: "så bliver det ikke så tomt"):
   WooCommerce's own attribute table, as a quiet two-column list in the text's measure. */
.ember-bf-specs { max-width: 66ch; margin-top: 34px; scroll-margin-top: 110px; }
.ember-bf-specs .ember-bf-specs-kicker { margin-bottom: 12px; }
.ember-bf-specs .woocommerce-product-attributes { margin: 0; border-top: 1px solid var(--ember-line-soft); font-size: 14px; line-height: 1.45; }
.ember-bf-specs .woocommerce-product-attributes th, .ember-bf-specs .woocommerce-product-attributes td { padding: 11px 0; }
.ember-bf-specs .woocommerce-product-attributes th { width: 42%; padding-right: 16px; color: var(--ember-muted); font-size: 13px; font-weight: 500; letter-spacing: .01em; }
.ember-bf-specs .woocommerce-product-attributes td { color: var(--ember-ink); font-weight: 600; overflow-wrap: anywhere; }
.ember-bf-specs .woocommerce-product-attributes td p { margin: 0; }
/* "Find din elektronik" under the specifications (buy-flow.php ember_bf_about; owner, 24 Sept:
   "Kan vi få find din elektronik på venstreside under specifikationer?"). The guide is product
   content with inline styles (scripts/add-woo-electronics-guide.py), so the overrides are scoped to
   this block and carry !important; the content itself is not touched. On a phone it keeps its own
   look and its table scrolls sideways inside its box, as it always has. */
.ember-bf-guide { margin-top: 34px; scroll-margin-top: 110px; }
.ember-bf-guide > .ember-electronics-guide-v3 { margin: 0 !important; }
/* In the left column on a computer the six-column table is set compact to fit the column: small
   type, tight cells, a narrow "Funktion" column, version names on two lines and "På denne model" /
   "Andre modeller" as a small line under them. Its floor (min-width) is what still reads well; a
   narrower column (901-1279 px) scrolls inside the table's own box, never the page. */
@media (min-width: 901px) {
	.ember-bf-guide .ember-electronics-guide-v3 { padding: 22px 20px !important; }
	.ember-bf-guide .ember-electronics-guide-v3 > h2 { font-size: 24px !important; }
	.ember-bf-guide .ember-electronics-guide-v3 > p { font-size: 14px !important; }
	.ember-bf-guide .ember-electronics-guide-v3 > p:first-child { font-size: 11px !important; }
	.ember-bf-guide table { width: 100% !important; min-width: 520px !important; table-layout: fixed; font-size: 12.5px !important; line-height: 1.35 !important; }
	.ember-bf-guide caption { padding: 10px 10px !important; font-size: 12px !important; }
	.ember-bf-guide table :is(th, td) { padding: 8px 6px !important; overflow-wrap: break-word; }
	.ember-bf-guide table :is(th, td):first-child { padding-left: 10px !important; }
	.ember-bf-guide thead th { vertical-align: bottom !important; font-size: 12px !important; line-height: 1.25 !important; }
	.ember-bf-guide thead th:first-child { width: 120px !important; }
	.ember-bf-guide thead th br { display: none; }
	.ember-bf-guide thead th span { display: block; margin-top: 3px; font-size: 10px !important; line-height: 1.25 !important; }
	.ember-bf-guide tbody th { font-size: 12px !important; }
	.ember-bf-guide td span { font-size: 11px !important; line-height: 1.3 !important; }
}
/* From 1280 px the table fits the column, so the note about scrolling it sideways goes. */
@media (min-width: 1280px) {
	.ember-bf-guide .ember-electronics-guide-v3 > p:has(+ [role="region"]) { display: none !important; }
}
/* In Pro mode the guide's red turns Pro gold too (owner, 24 Sept: "Kan det her også blive guld når
   man klikker på pro version?"): the kicker, the "Du kan vælge på denne model" note, the red rule
   under the table head, the "På denne model" labels and the tint on this model's columns. The
   guide's colours are inline, so they are matched by value; the text stays as legible as before. */
.ember-bf-guide :is([style*="#ff8175"], [style*="#b62d2b"], [style*="#ffb5ac"], [style*="#302522"]) { transition: color .45s var(--ember-ease), border-color .45s var(--ember-ease), background-color .45s var(--ember-ease); }
.ember-bf-pro-mode .ember-bf-guide [style*="color:#ff8175"] { color: var(--ember-bf-pro) !important; }
.ember-bf-pro-mode .ember-bf-guide [style*="border-left:3px solid #ff8175"] { border-left-color: var(--ember-bf-pro) !important; }
.ember-bf-pro-mode .ember-bf-guide [style*="border-bottom:2px solid #b62d2b"] { border-bottom-color: var(--ember-bf-pro-deep) !important; }
.ember-bf-pro-mode .ember-bf-guide [style*="color:#ffb5ac"] { color: var(--ember-bf-pro) !important; }
.ember-bf-pro-mode .ember-bf-guide [style*="background-color:#302522"] { background-color: #2c2619 !important; }
@media (prefers-reduced-motion: reduce) {
	.ember-bf-guide :is([style*="#ff8175"], [style*="#b62d2b"], [style*="#ffb5ac"], [style*="#302522"]) { transition: none; }
}

/* With the script: the package total replaces WooCommerce's line price (stock stays), and the
   plugin's gift select gives way to the picker once the picker has written into it. */
.ember-bf-ready .ember-bf-form .woocommerce-variation-price { display: none; }
.ember-bf-ready .ember-bf-form .ember-gift.ember-bf-gift-covered { display: none; }
.ember-bf-lengths .ember-choice-delta { display: none; }
html:not(.ember-js) .ember-bf [data-ember-bf="package"] [data-ember-bf-slot="count"] { display: none; }

/* Gallery scene ------------------------------------------------------------- */
.ember-bf-stage { position: relative; }
.ember-bf-scene { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ember-bf-scene-glow { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 110px -10px rgba(255, 91, 74, .55); opacity: 0; transition: opacity .6s var(--ember-ease); }
.ember-bf-scene.is-lit .ember-bf-scene-glow { opacity: 1; }
.ember-bf-scene-chip { position: absolute; top: 14px; left: 14px; padding: 7px 12px; border: 1px solid rgba(255, 91, 74, .45); border-radius: 999px; background: rgba(15, 13, 11, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ember-ink); font-size: 13px; font-weight: 800; animation: ember-bf-drop .4s var(--ember-ease) both; }
.ember-bf-scene-cap { position: absolute; right: 14px; bottom: 14px; left: 14px; display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 9px 12px; border: 1px solid var(--ember-line); border-radius: var(--ember-radius-sm); background: rgba(15, 13, 11, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--ember-ink); font-size: 13px; line-height: 1.35; }
.ember-bf-scene-cap span { color: var(--ember-ink-2); }
/* On the video slide the line would sit on the player's own controls, so it steps aside while the film is shown. */
.ember-bf-stage:has(.ember-gallery-video.flex-active-slide) > .ember-bf-scene .ember-bf-scene-cap { visibility: hidden; opacity: 0; }
.single-product .site-content .flex-control-thumbs ~ .ember-bf-scene { display: none; }
@keyframes ember-bf-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Offer box ----------------------------------------------------------------- */
.ember-bf-offer { position: relative; margin: 4px 0 22px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--ember-radius-control); background: linear-gradient(180deg, #1a1512 0%, #120f0d 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 30px 70px -40px rgba(255, 91, 74, .55); }
.ember-bf-offer::before { content: ""; position: absolute; top: 0; right: 0; left: 0; z-index: 2; height: 1px; background: linear-gradient(90deg, transparent, var(--ember-glow) 30%, var(--ember-glow) 70%, transparent); opacity: .8; }
.ember-bf-offer p { margin: 0; }
.ember-bf-offer-hero { position: relative; min-height: 176px; }
.ember-bf-offer-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; overflow: hidden; animation: ember-bf-slide .9s var(--ember-ease) both .15s; }
.ember-bf-offer-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.ember-bf-offer-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #171311 0%, rgba(23, 19, 17, .75) 28%, rgba(23, 19, 17, 0) 70%); }
.ember-bf-offer-copy { position: relative; z-index: 1; max-width: 64%; padding: 18px 18px 16px; }
.ember-bf-offer .ember-bf-kicker { color: var(--ember-glow); }
.ember-bf-offer-head { margin: 8px 0 10px !important; color: var(--ember-ink); font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.ember-bf-offer-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ember-bf-offer-value span { color: var(--ember-muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ember-bf-offer-value b { color: var(--ember-ink); font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.045em; line-height: 1; white-space: nowrap; }
.ember-bf-offer-note { margin-top: 8px !important; color: var(--ember-ink-2); font-size: 13px; line-height: 1.4; }
.ember-bf-offer-deal { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .015); }
.ember-bf-offer-deal .ember-bf-kicker { color: var(--ember-muted); }
.ember-bf-offer-deal strong { display: block; margin-top: 4px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.ember-bf-offer-deal small { display: block; margin-top: 2px; color: var(--ember-muted); font-size: 12px; line-height: 1.35; }
.ember-bf-offer-amount { text-align: right; }
.ember-bf-offer-amount b { display: block; color: var(--ember-ink); font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
.ember-bf-offer-amount i { display: block; height: 2px; margin-top: 6px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--ember-glow)); }
.ember-bf .ember-bf-offer-cart { padding: 12px 18px; border-top: 1px solid rgba(255, 91, 74, .25); background: rgba(255, 91, 74, .07); color: var(--ember-ink); font-size: 14px; font-weight: 700; line-height: 1.4; }
.ember-bf-offer-cart:first-child { border-top: 0; }
@keyframes ember-bf-slide { from { opacity: 0; transform: translateX(14%); } to { opacity: 1; transform: none; } }

/* Step bar ------------------------------------------------------------------ */
.ember-bf-steps { position: sticky; top: var(--ember-bf-sticky-top, 0px); z-index: 20; margin: 0 -2px 4px; padding: 8px 2px; background: var(--ember-bg); }
.ember-bf-steps ol { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
/* Equal steps, except that a step never gets narrower than its word: at 390 px with all five
   showing, "Kampsværd" takes the few pixels it needs from the shorter ones instead of an ellipsis. */
.ember-bf-steps li { flex: 1 1 0; min-width: max-content; margin: 0; }
.ember-theme .ember-bf-steps button { display: block; width: 100%; min-height: 34px; margin: 0; padding: 8px 2px; overflow: hidden; border: 0; border-radius: var(--ember-radius-control); background: var(--ember-surface-2); box-shadow: none; color: var(--ember-muted); font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; transition: background-color .3s, color .3s; }
.ember-theme .ember-bf-steps li.is-done button { background: rgba(224, 70, 62, .25); color: var(--ember-ink); }
.ember-theme .ember-bf-steps li.is-now button { background: var(--ember-red); color: var(--ember-white); }

/* Step headings ------------------------------------------------------------- */
.ember-theme .ember-bf-step { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; color: var(--ember-ink); font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; scroll-margin-top: calc(var(--ember-bf-sticky-top, 0px) + 64px); }
.ember-bf-step-n { display: grid; flex: none; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--ember-surface-3); font-size: 12px; transition: background-color .3s; }
.ember-bf-step.is-done .ember-bf-step-n { background: var(--ember-red); }
.ember-bf-step-sel { margin-left: auto; color: var(--ember-muted); font-size: 13px; font-weight: 600; text-align: right; }
.ember-bf-form .variations tr:first-child .ember-bf-step:first-child { margin-top: 4px; }
.single-product .site-content div.product form.cart.ember-bf-form .variations th.label:has(.ember-label-quiet) { padding: 0; }
.single-product .site-content div.product form.cart.ember-bf-form .variations td.value:has([data-ember-bf]) { padding-bottom: 4px; }

/* Blade cards --------------------------------------------------------------- */
.ember-bf-family.ember-family-choices { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 0; }
.ember-theme .ember-bf-family button.ember-bf-card-opt { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0; padding: 14px 13px 0; overflow: hidden; border-radius: var(--ember-radius-control); background: var(--ember-surface-2); text-align: left; }
.ember-theme .ember-bf-family button.ember-bf-card-opt:active { transform: scale(.985); }
.ember-theme .ember-bf-family button.ember-bf-card-opt[aria-checked="true"] { border-color: rgba(255, 91, 74, .8); background: var(--ember-surface-2); box-shadow: inset 0 0 0 1px rgba(255, 91, 74, .1), inset 0 24px 48px -36px rgba(255, 91, 74, .6), 0 22px 44px -34px rgba(255, 91, 74, .75); }
.ember-bf-pop { align-self: flex-start; margin: 0 0 7px; padding: 3px 7px; border-radius: 2px; background: var(--ember-red); color: var(--ember-white); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ember-bf-overline { margin-bottom: 4px; color: var(--ember-muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; }
.ember-bf-family .ember-choice-name { font-size: 16px; font-weight: 700; line-height: 1.2; }
.ember-bf-family .ember-choice-delta { margin-top: 3px; color: var(--ember-ink-2); font-size: 13px; font-weight: 700; }
.ember-bf-family button[aria-checked="true"] .ember-choice-delta { color: var(--ember-ink-2); }
.ember-bf-family .ember-choice-hint { margin: 6px 0 12px; font-size: 13px; line-height: 1.4; }
.ember-bf-band { display: flex; flex-direction: column; gap: 2px; margin: auto -13px 0; padding: 8px 13px; border-top: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 91, 74, .08); color: var(--ember-ink); font-size: 12px; font-weight: 700; line-height: 1.3; }
.ember-bf-band span + span { color: var(--ember-ink-2); }
.ember-bf-band.is-plain { background: transparent; color: var(--ember-muted); font-weight: 600; }

/* Board panels -------------------------------------------------------------- */
.ember-bf-panel { position: relative; margin: 12px 0 4px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--ember-radius-control); background: linear-gradient(180deg, #1a1512, #120f0d); animation: ember-bf-in .45s var(--ember-ease) both; }
.ember-bf-panel::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--ember-glow) 30%, var(--ember-glow) 70%, transparent); opacity: .7; }
.ember-bf-panel-head { padding: 14px 16px 10px; }
.ember-bf-panel .ember-bf-kicker { color: var(--ember-glow); }
.ember-theme .ember-bf-panel h3 { margin: 4px 0 0; font-size: 17px; letter-spacing: -.02em; }
.ember-bf-math { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin: 0 16px 12px; padding: 12px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 3px; background: rgba(255, 255, 255, .03); }
.ember-bf-math > div { min-width: 0; }
.ember-bf-math span:not(.ember-bf-math-sep) { display: block; color: var(--ember-muted); font-size: 10px; font-weight: 800; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; }
.ember-bf-math b { display: block; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: 1.15; }
.ember-bf-math.is-even b { font-size: 16px; letter-spacing: -.02em; }
.ember-bf-math small { display: block; color: var(--ember-ink-2); font-size: 12px; line-height: 1.35; }
.ember-bf-math-get { text-align: right; }
.ember-bf-math-sep { color: var(--ember-glow); font-size: 18px; font-weight: 800; }
.ember-bf .ember-bf-math.is-line { display: block; color: var(--ember-ink); font-size: 14px; font-weight: 700; line-height: 1.45; }
.ember-bf .ember-bf-math-note { margin: -4px 16px 10px; color: var(--ember-ink-2); font-size: 13px; }
.ember-bf-points { margin: 0; padding: 0 16px 6px; list-style: none; }
.ember-bf-points li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; margin: 0; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .06); font-size: 14px; line-height: 1.35; }
.ember-bf-points li:first-child { border-top: 0; }
.ember-bf-points i { display: grid; width: 20px; height: 20px; margin-top: 1px; place-items: center; border-radius: 50%; background: rgba(255, 91, 74, .15); color: var(--ember-glow); font-size: 11px; font-style: normal; font-weight: 800; }
.ember-bf-points b { display: block; font-weight: 700; }
.ember-bf-points small { display: block; margin-top: 1px; color: var(--ember-muted); font-size: 12px; }
.ember-bf-panel-act { display: flex; align-items: center; gap: 12px; padding: 12px 16px 14px; border-top: 1px solid rgba(255, 255, 255, .07); }
.ember-bf-panel-act p { margin: 0; color: var(--ember-ink-2); font-size: 13px; line-height: 1.45; }
.ember-bf-panel-act strong { color: var(--ember-ink); }
.ember-theme .ember-bf-ghost { flex: none; min-height: 40px; margin: 0; padding: 9px 13px; border: 1px solid rgba(255, 91, 74, .6); border-radius: var(--ember-radius-control); background: transparent; box-shadow: none; color: var(--ember-ink); font-size: 13px; font-weight: 800; line-height: 1.2; cursor: pointer; transition: background-color .2s, border-color .2s; }
.ember-theme .ember-bf-ghost:hover { border-color: var(--ember-glow); background: rgba(255, 91, 74, .1); color: var(--ember-ink); }
@keyframes ember-bf-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Version comparison -------------------------------------------------------- */
.ember-bf-compare { overflow: hidden; border: 1px solid var(--ember-line); border-radius: var(--ember-radius-control); background: var(--ember-surface); font-size: 13px; }
.ember-bf-compare-heads, .ember-bf-compare-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); }
.ember-bf-compare-col { position: relative; padding: 10px 6px; border-left: 1px solid var(--ember-line); text-align: center; cursor: pointer; transition: background-color .2s; }
.ember-bf-compare-col:focus-visible { outline: 3px solid var(--ember-brand); outline-offset: -3px; }
.ember-bf-compare-col[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.ember-bf-compare-col b { display: block; font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; }
.ember-bf-compare-sub { display: block; margin-bottom: 3px; color: var(--ember-muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.ember-bf-compare-d { display: block; margin-top: 2px; color: var(--ember-ink-2); font-size: 12px; font-weight: 700; }
.ember-bf-radio { display: block; width: 18px; height: 18px; margin: 6px auto 0; border: 2px solid var(--ember-muted); border-radius: 50%; }
.ember-bf-compare-col[aria-checked="true"] { background: rgba(255, 91, 74, .12); box-shadow: inset 0 3px 0 var(--ember-glow); }
.ember-bf-compare-col[aria-checked="true"] .ember-bf-radio { border-color: var(--ember-glow); background: radial-gradient(circle, var(--ember-glow) 45%, transparent 50%); }
.ember-bf-compare-row { border-top: 1px solid var(--ember-line-soft); }
.ember-bf-compare-row > div { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 8px 6px; line-height: 1.35; overflow-wrap: anywhere; }
.ember-bf-compare-row > div + div { border-left: 1px solid var(--ember-line-soft); color: var(--ember-ink); text-align: center; cursor: pointer; }
.ember-bf-compare-lab { padding-left: 10px !important; color: var(--ember-ink-2); }
.ember-bf-compare-row .is-yes { color: var(--ember-bf-ok); font-weight: 800; }
.ember-bf-compare-tick { margin-right: .4em; }
.ember-bf-compare-row .is-gift { color: var(--ember-bf-gold); font-weight: 800; }
.ember-bf-compare-row .is-no { color: var(--ember-muted); }
.ember-bf-compare-row.is-hl { background: rgba(242, 196, 109, .06); }
.ember-bf-compare-row.is-who { background: rgba(255, 255, 255, .02); font-size: 12px; }
.ember-bf-compare-row.is-who > div + div { font-weight: 700; }
.ember-bf-compare-row.is-span { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); }
.ember-bf-compare-row.is-span > div + div { cursor: default; font-weight: 600; }

/* Version as two choice cards side by side (owner, 24 Sept: "mindre rodet ... nemt at se hvad man
   har valgt"; later the same day: "mere refined ... vi har ikke så mange hårde afrundet kanter.
   Tænk på vores header knapper, de er skarpere"). The header's 5 px corners, hairlines instead of
   pills, one type scale (overline, name, price). The chosen card: a red hairline frame with the
   offer box's light line on top, a faint inner glow, a filled radio and a small sharp "Valgt".
   The included saber heads the Pro card in the offer box's own style: it is the campaign. The
   row-by-row table is always open under the cards, one framed panel headed "Alle forskelle", and
   "På begge: ..." follows it (owner, 24 Sept). */
.ember-bf-compare.has-cards { overflow: visible; border: 0; border-radius: 0; background: none; }
.ember-bf-vcards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 8px; }
.ember-bf-compare-col.ember-bf-vcard { display: flex; flex-direction: column; min-width: 0; padding: 12px 11px 14px; border: 1px solid var(--ember-line); border-radius: var(--ember-radius-control); background: linear-gradient(180deg, #1b1714 0%, #151210 100%); text-align: left; transition: border-color .2s, box-shadow .3s var(--ember-ease), background-color .2s; }
.ember-bf-compare-col.ember-bf-vcard::before { content: ""; position: absolute; top: -1px; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--ember-glow) 30%, var(--ember-glow) 70%, transparent); opacity: 0; transition: opacity .3s; }
.ember-bf-compare-col.ember-bf-vcard:hover { border-color: var(--ember-line-strong); }
.ember-bf-compare-col.ember-bf-vcard[aria-checked="true"] { border-color: rgba(255, 91, 74, .8); background: linear-gradient(180deg, rgba(255, 91, 74, .075) 0%, rgba(255, 91, 74, 0) 38%), linear-gradient(180deg, #1b1714 0%, #151210 100%); box-shadow: inset 0 0 0 1px rgba(255, 91, 74, .1), inset 0 24px 48px -36px rgba(255, 91, 74, .6), 0 22px 44px -34px rgba(255, 91, 74, .75); }
.ember-bf-compare-col.ember-bf-vcard[aria-checked="true"]::before { opacity: 1; }
.ember-bf-compare-col.ember-bf-vcard:focus-visible { outline: 2px solid var(--ember-glow); outline-offset: 3px; }
.ember-bf-vcard-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 18px; margin-bottom: 12px; }
.ember-bf-vcard .ember-bf-radio { flex: none; width: 16px; height: 16px; margin: 0; border: 1px solid rgba(255, 255, 255, .32); border-radius: 50%; transition: border-color .2s, box-shadow .3s; }
.ember-bf-vcard[aria-checked="true"] .ember-bf-radio { border-color: var(--ember-glow); background: radial-gradient(circle, var(--ember-glow) 0 3.5px, transparent 4px); box-shadow: 0 0 10px -1px rgba(255, 91, 74, .6); }
.ember-bf-vcard-chosen { visibility: hidden; padding: 3px 6px 2px; border-radius: 2px; background: var(--ember-red); color: var(--ember-white); font-size: 9.5px; font-weight: 800; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; white-space: nowrap; }
.ember-bf-vcard[aria-checked="true"] .ember-bf-vcard-chosen { visibility: visible; }
.ember-bf-vcard .ember-bf-compare-sub { margin-bottom: 5px; color: var(--ember-muted); font-size: 10px; font-weight: 700; letter-spacing: .15em; line-height: 1.3; }
.ember-bf-vcard b { color: var(--ember-ink); font-size: clamp(15px, 3.9vw, 17px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; overflow-wrap: normal; }
.ember-bf-vcard .ember-bf-compare-d { margin-top: 5px; color: var(--ember-ink-2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.005em; }
.ember-bf-vcard[aria-checked="true"] .ember-bf-compare-d { color: var(--ember-ink); }
/* The deal: the offer box in small - its dark ground, its thin red light line, photo flush. */
.ember-bf-vcard-deal { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 12px; overflow: hidden; border: 1px solid rgba(255, 91, 74, .28); border-radius: 3px; background: linear-gradient(180deg, #1d1714 0%, #110e0c 100%); box-shadow: 0 18px 36px -28px rgba(255, 91, 74, .8); }
.ember-bf-vcard-deal::before { content: ""; position: absolute; top: 0; right: 0; left: 0; z-index: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--ember-glow) 25%, var(--ember-glow) 75%, transparent); }
.ember-theme .ember-bf-vcard-deal-img { display: block; width: 100%; height: 88px; object-fit: cover; object-position: center; }
.ember-bf-vcard-deal-text { display: grid; gap: 2px; padding: 9px 10px 10px; }
.ember-bf-vcard-deal-label { color: var(--ember-glow); font-size: 9.5px; font-weight: 800; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; }
.ember-bf-vcard-deal-title { margin-top: 1px; color: var(--ember-ink); font-size: 15px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.ember-bf-vcard-deal-value { margin-top: 3px; color: var(--ember-bf-gold); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Photo beside the words once the pair of cards has the room (not by the window: the buy column
   is narrow on a small laptop). */
.ember-bf-vcards { container-type: inline-size; }
@container (min-width: 440px) {
	.ember-bf-compare-col.ember-bf-vcard { padding: 14px 14px 16px; }
	.ember-bf-vcard-deal { grid-template-columns: 76px minmax(0, 1fr); align-items: stretch; }
	.ember-theme .ember-bf-vcard-deal-img { height: 100%; min-height: 84px; }
	.ember-bf-vcard-deal-text { align-content: center; padding: 10px; }
	.ember-bf-vcard-deal-label { letter-spacing: .13em; }
}
@media (min-width: 560px) {
	.ember-bf-vcards { gap: 10px; }
}
.ember-bf-vcard-for { display: block; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--ember-line-soft); color: var(--ember-ink-2); font-size: 12px; line-height: 1.45; }
.ember-bf-vcard-points { display: grid; gap: 7px; margin: 11px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.35; }
.ember-bf-vcard-points li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 7px; margin: 0; color: var(--ember-ink); font-weight: 500; overflow-wrap: anywhere; }
/* Ink lines with a green mark only: the plus is said by the check, not by a green sentence. */
.ember-bf-vcard-mark { color: var(--ember-bf-ok); font-size: 11px; font-weight: 800; line-height: 1.6; }
.ember-bf-vcard-points li.is-yes { color: var(--ember-ink); font-weight: 650; }
.ember-bf-vcard-points li.is-gift { color: var(--ember-bf-gold); font-weight: 700; }
.ember-bf-vcard-points li.is-gift .ember-bf-vcard-mark { color: var(--ember-bf-gold); }
.ember-bf .ember-bf-vshared { margin: 12px 0 0; padding: 0 2px; border-radius: 0; background: none; color: var(--ember-ink-2); font-size: 12px; line-height: 1.5; }
.ember-bf-vshared b { color: var(--ember-ink); font-weight: 700; }
.has-cards .ember-bf-vtable { margin-top: 10px; padding: 0 12px 6px; border: 1px solid var(--ember-line); border-radius: var(--ember-radius-control); }
.ember-bf-vtable-title { display: flex; align-items: center; min-height: 42px; padding: 10px 0; color: var(--ember-ink); font-size: 13px; font-weight: 700; line-height: 1.3; }
.has-cards .ember-bf-compare-row { border-top-color: var(--ember-line-soft); font-size: 12.5px; }
.has-cards .ember-bf-compare-row > div { padding: 8px 4px; }
.has-cards .ember-bf-compare-row > div + div { border-left: 0; }
.has-cards .ember-bf-compare-row.is-hl { background: none; }
.has-cards .ember-bf-compare-row.is-names { border-top: 1px solid var(--ember-line-soft); color: var(--ember-muted); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.has-cards .ember-bf-compare-lab { padding-left: 0 !important; }

/* Lengths ------------------------------------------------------------------- */
.ember-bf-lengths.ember-variation-choices { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0; }
/* One scale for every blade (owner, 24 Sept: "teksten må ikke blokere ... det ser ud som om, at 82
   cm er længere"): the price column has one fixed width on every button, so every track is equally
   long and a fill is its length over the longest; a longer word goes on its own line under the blade. */
.ember-theme .ember-bf-lengths button { display: grid; grid-template-columns: 56px minmax(0, 1fr) 88px; align-items: center; gap: 5px 12px; min-height: 54px; padding: 12px 13px; border-radius: var(--ember-radius-control); }
.ember-theme .ember-bf-lengths button[aria-pressed="true"] { border-color: rgba(255, 91, 74, .8); box-shadow: inset 0 0 0 1px rgba(255, 91, 74, .1), inset 0 24px 48px -36px rgba(255, 91, 74, .6), 0 22px 44px -34px rgba(255, 91, 74, .75); }
.ember-bf-lengths .ember-choice-name { grid-column: 1; grid-row: 1; font-size: 16px; font-weight: 700; white-space: nowrap; }
.ember-bf-track { position: relative; grid-column: 2; grid-row: 1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .07); }
.ember-bf-lengths .ember-bf-len-d { grid-column: 3; grid-row: 1; min-width: 0; }
.ember-bf-len-note { grid-column: 2 / -1; grid-row: 2; color: var(--ember-glow); font-size: 11px; font-weight: 700; letter-spacing: .01em; line-height: 1.3; }
.ember-bf-len-note:empty { display: none; }
/* "Som i filmene" under "92 cm": in the row under the name, so the track keeps its width; beside
   it the note moves to the right, under the price. */
.ember-bf-len-sub { grid-column: 1 / 3; grid-row: 2; justify-self: start; color: var(--ember-muted); font-size: 11px; font-weight: 600; letter-spacing: .01em; line-height: 1.3; white-space: nowrap; }
.ember-bf-lengths button.has-sub .ember-bf-len-note { justify-self: end; text-align: right; }
.ember-bf-len-note :is(em, small) { color: inherit; font-size: inherit; font-style: normal; font-weight: inherit; }
@media (min-width: 900px) {
	.ember-theme .ember-bf-lengths button { grid-template-columns: 60px minmax(0, 1fr) 96px; }
}
.ember-bf-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px; background: linear-gradient(90deg, #d9d2c8, #9c948a); transition: background .3s, box-shadow .3s; }
.ember-bf-lengths button[aria-pressed="true"] .ember-bf-fill { background: linear-gradient(90deg, #fff, var(--ember-glow)); box-shadow: 0 0 10px rgba(255, 91, 74, .8); }
.ember-bf-len-d { display: flex; flex-direction: column; align-items: flex-end; color: var(--ember-ink-2); font-size: 13px; font-weight: 700; line-height: 1.15; text-align: right; font-variant-numeric: tabular-nums; }
.ember-bf-len-d s { color: var(--ember-muted); font-size: 12px; font-weight: 600; }
.ember-bf-len-d em { color: var(--ember-ink); font-size: 13px; font-style: normal; font-weight: 800; }
.ember-bf-len-d.is-pro em { color: var(--ember-glow); }
.ember-bf-len-d small { margin-top: 2px; color: var(--ember-glow); font-size: 10px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.ember-bf-lenhint { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(255, 91, 74, .45); border-radius: var(--ember-radius-control); background: rgba(255, 91, 74, .07); color: var(--ember-ink-2); font-size: 13px; }
.ember-bf .ember-bf-lenhint p { margin: 0; }
.ember-bf-lenhint strong { color: var(--ember-ink); }
.ember-bf-lenhint .ember-bf-ghost { margin-left: auto; }

/* The included saber -------------------------------------------------------- */
.ember-bf-gift { margin: 4px 0 8px; }
.ember-bf-gift.is-open { animation: ember-bf-in .5s var(--ember-ease) both; }
.ember-bf .ember-bf-gift-intro { margin: -4px 0 0; color: var(--ember-ink-2); font-size: 13px; }
.ember-bf-gift-chosen { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 12px; padding: 10px; border: 1px solid rgba(255, 91, 74, .55); border-radius: var(--ember-radius-control); background: var(--ember-surface-2); box-shadow: 0 14px 40px -22px rgba(255, 91, 74, .7); }
.ember-bf-gift-img { aspect-ratio: 1; overflow: hidden; border-radius: 3px; background: var(--ember-surface-3); }
.ember-bf-gift-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ember-bf-gift-text { min-width: 0; }
.ember-bf-gift-tag { display: block; color: var(--ember-glow); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ember-bf-gift-text b { display: block; margin-top: 2px; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.ember-bf-gift-text small { display: block; color: var(--ember-muted); font-size: 12px; }
.ember-bf-gift-val { display: block; margin-top: 4px; color: var(--ember-ink); font-size: 13px; font-weight: 800; }
.ember-bf-gift-val s { margin-right: 4px; color: var(--ember-muted); font-weight: 600; }
.ember-bf-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ember-theme .ember-bf-swatch { width: 32px; height: 32px; min-height: 0; margin: 0; padding: 3px; border: 2px solid transparent; border-radius: 50%; background: none; box-shadow: none; cursor: pointer; }
.ember-bf-swatch i { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.ember-theme .ember-bf-swatch[aria-pressed="true"] { border-color: var(--ember-glow); }
.ember-bf .ember-bf-gift-grip { margin: 4px 0 0; color: var(--ember-ink-2); font-size: 12px; }
.ember-bf-gift-quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ember-theme .ember-bf-gift-quick button { position: relative; display: grid; min-height: 0; aspect-ratio: 1; margin: 0; padding: 0; place-items: center; overflow: hidden; border: 1px solid var(--ember-line); border-radius: var(--ember-radius-control); background: var(--ember-surface-2); box-shadow: none; color: var(--ember-ink); font-size: 11px; font-weight: 700; line-height: 1.2; cursor: pointer; }
.ember-bf-gift-quick img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ember-theme .ember-bf-gift-quick button[aria-pressed="true"] { border-color: var(--ember-glow); box-shadow: 0 0 0 1px var(--ember-glow); }
.ember-theme .ember-bf-gift-quick .ember-bf-gift-all { align-content: center; padding: 4px; font-size: 12px; font-weight: 800; text-align: center; }
.ember-bf-gift-all span { display: block; font-size: 17px; }
.ember-bf-gift-opts { display: grid; gap: 8px; margin-top: 12px; }
.ember-bf .ember-bf-gift-lbl { margin: 0; color: var(--ember-muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ember-bf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ember-theme .ember-bf-chips button { min-height: 36px; margin: 0; padding: 7px 12px; border: 1px solid var(--ember-line); border-radius: var(--ember-radius-control); background: var(--ember-surface-2); box-shadow: none; color: var(--ember-ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.ember-theme .ember-bf-chips button[aria-pressed="true"] { border-color: var(--ember-glow); background: rgba(255, 91, 74, .12); }
.ember-theme .ember-bf-chips button:disabled { opacity: .35; cursor: not-allowed; }
.ember-theme .ember-bf-upgrade { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 0; margin: 0; padding: 10px 12px; border: 1px solid var(--ember-line); border-radius: var(--ember-radius-control); background: var(--ember-surface); box-shadow: none; color: var(--ember-ink); text-align: left; cursor: pointer; }
.ember-bf-upgrade-box { display: grid; width: 20px; height: 20px; place-items: center; border: 2px solid var(--ember-muted); border-radius: 2px; color: transparent; font-size: 12px; font-weight: 800; }
.ember-theme .ember-bf-upgrade[aria-pressed="true"] { border-color: var(--ember-glow); }
.ember-bf-upgrade[aria-pressed="true"] .ember-bf-upgrade-box { border-color: var(--ember-glow); background: var(--ember-glow); color: var(--ember-white); }
.ember-bf-upgrade b { display: block; font-size: 14px; }
.ember-bf-upgrade small { display: block; color: var(--ember-muted); font-size: 12px; font-weight: 500; line-height: 1.35; }
.ember-bf-upgrade-price { font-size: 13px; font-weight: 800; white-space: nowrap; }
.ember-bf .ember-bf-gift-missing { margin: 10px 0 0; color: var(--ember-glow); font-size: 13px; }

/* Sheet: from below on a phone, a dialog on a computer. */
.ember-bf-sheet { position: fixed; inset: 0; z-index: 95; }
.ember-theme button.ember-bf-sheet-shade, .ember-theme button.ember-bf-sheet-shade:is(:hover, :focus, :active) { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: rgba(5, 4, 3, .6); box-shadow: none; opacity: 0; transition: opacity .3s; }
.ember-bf-sheet.is-open .ember-bf-sheet-shade { opacity: 1; }
.ember-bf-sheet-panel { position: absolute; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; max-height: 90vh; border-top: 1px solid var(--ember-line); border-radius: var(--ember-radius-xs) var(--ember-radius-xs) 0 0; background: var(--ember-surface); box-shadow: 0 -30px 80px rgba(0, 0, 0, .6); color: var(--ember-ink); transform: translateY(105%); transition: transform .45s var(--ember-ease); outline: none; }
.ember-bf-sheet.is-open .ember-bf-sheet-panel { transform: none; }
.ember-bf-sheet-grab { display: block; width: 40px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: rgba(255, 255, 255, .2); }
.ember-bf-sheet-top { display: flex; align-items: center; gap: 10px; padding: 10px 16px 8px; }
.ember-theme .ember-bf-sheet-top h2 { flex: 1; margin: 0; font-size: 18px; letter-spacing: -.02em; }
.ember-theme .ember-bf-sheet-x { display: grid; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0; place-items: center; border: 0; background: none; box-shadow: none; color: var(--ember-ink); font-size: 24px; cursor: pointer; }
.ember-bf .ember-bf-sheet-sub { margin: 0; padding: 0 16px 8px; color: var(--ember-ink-2); font-size: 13px; }
.ember-bf-sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 4px 16px calc(20px + env(safe-area-inset-bottom, 0px)); overflow: auto; overscroll-behavior: contain; list-style: none; }
.ember-bf-sheet-grid li { margin: 0; }
.ember-theme .ember-bf-sheet-item { display: block; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 6px; border: 1px solid var(--ember-line); border-radius: var(--ember-radius-control); background: var(--ember-surface-2); box-shadow: none; color: var(--ember-ink); text-align: left; cursor: pointer; }
.ember-theme .ember-bf-sheet-item[aria-pressed="true"] { border-color: var(--ember-glow); box-shadow: 0 0 0 1px var(--ember-glow); }
.ember-bf-sheet-img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 3px; background: var(--ember-surface-3); }
.ember-bf-sheet-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ember-bf-sheet-item b { display: block; margin-top: 6px; font-size: 14px; overflow-wrap: anywhere; }
.ember-bf-sheet-item small { display: block; color: var(--ember-muted); font-size: 12px; }
.ember-bf-sheet-v { display: block; margin-top: 2px; font-size: 12px; font-weight: 800; }
.ember-bf-dots { display: flex; gap: 4px; margin-top: 4px; }
.ember-bf-dots i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
body.ember-bf-sheet-open { overflow: hidden; }
@media (min-width: 900px) {
	.ember-bf-sheet-panel { top: 50%; right: auto; bottom: auto; left: 50%; width: min(880px, calc(100vw - 48px)); max-height: 84vh; border: 1px solid var(--ember-line); border-radius: var(--ember-radius-xs); opacity: 0; transform: translate(-50%, -46%) scale(.98); transition: transform .35s var(--ember-ease), opacity .35s var(--ember-ease); }
	.ember-bf-sheet.is-open .ember-bf-sheet-panel { opacity: 1; transform: translate(-50%, -50%); }
	.ember-bf-sheet-grab { display: none; }
	.ember-bf-sheet-top { padding-top: 16px; }
	.ember-bf-sheet-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Din pakke ----------------------------------------------------------------- */
.ember-bf-package { margin: 24px 0 0; padding: 14px; border: 1px solid var(--ember-line); border-radius: var(--ember-radius-control); background: var(--ember-surface); }
.ember-theme .ember-bf-package h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 6px; font-size: 17px; }
.ember-bf-package-count { color: var(--ember-muted); font-size: 13px; font-weight: 600; }
.ember-bf-package-list { margin: 0; padding: 0; list-style: none; }
.ember-bf-row { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 0; border-top: 1px solid var(--ember-line-soft); }
.ember-bf-row:first-child { border-top: 0; }
.ember-bf-row.is-new { animation: ember-bf-pop .45s var(--ember-ease) both; }
@keyframes ember-bf-pop { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.ember-bf-th { display: grid; flex: none; width: 42px; height: 42px; place-items: center; overflow: hidden; border-radius: 3px; background: var(--ember-surface-3); color: var(--ember-ink-2); font-size: 15px; }
.ember-bf-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ember-bf-row-text { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.ember-bf-row-text small { display: block; color: var(--ember-muted); font-size: 12px; }
.ember-bf-row-text small a { color: var(--ember-ink-2); }
.ember-bf-row-price { display: flex; flex-direction: column; align-items: flex-end; font-size: 13px; font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ember-bf-row-price s { color: var(--ember-muted); font-size: 11px; font-weight: 600; }
.ember-bf-row-price.is-off { color: var(--ember-bf-ok); }
/* The makkersværd's line: price paid, then the normal price struck to its right (owner, 24 Sept). */
.ember-bf-row-price.is-cut { flex-direction: row; align-items: baseline; gap: 8px; }
.ember-bf-row-price.is-cut .ember-bf-row-was { font-size: 12px; font-weight: 400; opacity: .75; text-decoration-thickness: 1.5px; }
.ember-bf-row-price.is-gift { color: var(--ember-bf-gold); }
/* Gør det komplet: accessory cards under the package, swiped on a phone and a computer alike.
   Dark and quiet like the offer box: its thin red light line on top, one red button per card. */
.ember-bf-complete { position: relative; margin: 16px 0 0; padding: 14px 0 14px 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--ember-radius-control); background: linear-gradient(180deg, #1a1512 0%, #120f0d 100%); }
.ember-bf-complete::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--ember-glow) 30%, var(--ember-glow) 70%, transparent); opacity: .6; }
.ember-theme .ember-bf-complete h3 { margin: 0; padding-right: 14px; font-size: 16px; line-height: 1.3; }
.ember-bf .ember-bf-complete > p { margin: 2px 0 0; padding-right: 14px; color: var(--ember-ink-2); font-size: 13px; }
.ember-bf-acc-card { display: flex; flex: 0 0 42%; flex-direction: column; max-width: 190px; margin: 0; padding: 6px; border: 1px solid var(--ember-line); border-radius: var(--ember-radius-control); background: var(--ember-surface-2); scroll-snap-align: start; transition: border-color .2s; }
.ember-bf-acc-card:has(.ember-bf-acc.is-in) { border-color: rgba(255, 91, 74, .55); }
.ember-bf-acc-link { display: block; flex: 1; color: var(--ember-ink); text-decoration: none; }
.ember-bf-acc-img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 3px; background: var(--ember-surface-3); }
.ember-bf-acc-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ember-ease); }
.ember-bf-acc-link:hover .ember-bf-acc-img img { transform: scale(1.04); }
.ember-bf-acc-card b { display: -webkit-box; margin-top: 8px; overflow: hidden; overflow-wrap: normal; word-break: normal; -webkit-hyphens: auto; hyphens: auto; font-size: 14px; font-weight: 700; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ember-bf-acc-card small { display: block; margin-top: 2px; color: var(--ember-muted); font-size: 12px; line-height: 1.35; }
.ember-bf-acc-price { display: block; margin-top: 6px; color: var(--ember-ink); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ember-theme .ember-bf-acc { display: block; width: 100%; min-height: 38px; margin: 6px 0 0; padding: 8px; border: 1px solid rgba(255, 91, 74, .6); border-radius: 3px; background: transparent; box-shadow: none; color: var(--ember-ink); font-size: 13px; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s; }
.ember-theme .ember-bf-acc:hover { border-color: var(--ember-glow); background: rgba(255, 91, 74, .1); color: var(--ember-ink); }
.ember-theme .ember-bf-acc.is-in { border-color: var(--ember-red); background: var(--ember-red); color: var(--ember-white); }
.ember-theme .ember-bf-acc.is-adding { opacity: .6; }
@media (min-width: 901px) {
	.ember-bf-acc-card { flex-basis: 31%; }
}

/* Sværd nr. 2 --------------------------------------------------------------- */
.ember-bf-second { margin: 24px 0 0; padding: 14px 0 14px 14px; border: 1px solid rgba(127, 212, 138, .3); border-radius: var(--ember-radius-control); background: rgba(127, 212, 138, .05); }
.ember-bf .ember-bf-ok { color: var(--ember-bf-ok); }
.ember-theme .ember-bf-second h3 { margin: 0; padding-right: 14px; font-size: 16px; line-height: 1.3; }
.ember-bf .ember-bf-second > p { margin: 2px 0 0; padding-right: 14px; color: var(--ember-ink-2); font-size: 13px; }
.ember-bf-hscroll { display: flex; gap: 10px; margin: 0; padding: 12px 14px 4px 0; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.ember-bf-hscroll::-webkit-scrollbar { display: none; }
.ember-bf-card { display: flex; flex: 0 0 44%; flex-direction: column; max-width: 190px; margin: 0; padding: 6px; border: 1px solid var(--ember-line); border-radius: var(--ember-radius-control); background: var(--ember-surface-2); scroll-snap-align: start; }
.ember-bf-card-link { display: block; flex: 1; color: var(--ember-ink); text-decoration: none; }
.ember-bf-card-img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 3px; background: var(--ember-surface-3); }
.ember-bf-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ember-bf-card-char { display: block; margin-top: 6px; color: var(--ember-bf-gold); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ember-bf-card b { display: block; margin-top: 2px; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.ember-bf-card small { display: block; color: var(--ember-muted); font-size: 12px; line-height: 1.35; }
.ember-theme .ember-bf-card-add { display: block; width: 100%; min-height: 36px; margin: 6px 0 0; padding: 7px; border: 1px solid var(--ember-bf-ok); border-radius: 3px; background: transparent; box-shadow: none; color: var(--ember-bf-ok); font-size: 13px; font-weight: 800; cursor: pointer; }
.ember-theme .ember-bf-card-add:hover { border-color: var(--ember-bf-ok); background: rgba(127, 212, 138, .1); color: var(--ember-bf-ok); }
.ember-theme .ember-bf-card-add.is-added { border-color: var(--ember-bf-ok); background: var(--ember-bf-ok); color: #0b2410; }
.ember-theme .ember-bf-card-add.is-adding { opacity: .6; }
/* "Konfigurer" under "+ Tilføj": the saber's own page, quiet so "+ Tilføj" stays the first choice. */
.ember-theme a.ember-bf-config { display: flex; align-items: center; justify-content: center; min-height: 34px; margin: 6px 0 0; padding: 6px 8px; border: 1px solid var(--ember-line-strong); border-radius: 3px; background: transparent; color: var(--ember-ink); font-size: 13px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: border-color .2s, background-color .2s; }
.ember-theme a.ember-bf-config:hover, .ember-theme a.ember-bf-config:focus-visible { border-color: var(--ember-ink-2); background: var(--ember-surface-3); color: var(--ember-ink); }
.ember-bf-drawer-second-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.ember-theme .ember-bf-drawer-second-actions a.ember-bf-config { min-height: 32px; margin: 0; padding: 5px 12px; font-size: 12px; }
@media (min-width: 901px) {
	.ember-bf-card { flex-basis: 31%; }
}

/* Package total and buy button ---------------------------------------------- */
.ember-bf .ember-bf-total { display: flex; flex-direction: column; margin: 18px 0 8px; }
.ember-bf-total b { color: var(--ember-ink); font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.1; }
.ember-bf-total small { color: var(--ember-bf-gold); font-size: 12px; font-weight: 800; }
/* With the included saber: what the package is worth, struck left of the price (owner, 24 Sept). */
.ember-bf-price-line { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 8px; min-width: 0; }
.ember-bf-was { color: var(--ember-muted); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: line-through; text-decoration-color: var(--ember-bf-gold); white-space: nowrap; }
.ember-bf-was[hidden] { display: none; }

/* Mobile bar ---------------------------------------------------------------- */
.ember-bf-bar { display: none; }
@media (max-width: 899px) {
	.ember-bf .site-content { padding-bottom: 88px; }
	.ember-bf-bar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 55; display: flex; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ember-line); background: rgba(23, 20, 17, .97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .35s var(--ember-ease), opacity .3s; }
	.ember-bf-bar.is-hidden { visibility: hidden; opacity: 0; transform: translateY(110%); pointer-events: none; }
	.ember-bf .ember-bf-bar-info { display: flex; flex-direction: column; min-width: 0; margin: 0; line-height: 1.15; }
	.ember-bf-bar-info b { color: var(--ember-ink); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
	.ember-bf-bar-info .ember-bf-was { font-size: 12px; }
	.ember-bf-bar-info .ember-bf-price-line { gap: 6px; }
	.ember-bf-bar-info small { overflow: hidden; color: var(--ember-bf-gold); font-size: 11px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
	.ember-theme .ember-bf-bar a.ember-bf-bar-button { display: inline-flex; flex: 1; align-items: center; justify-content: center; min-height: 46px; padding: 12px; border-radius: var(--ember-radius-sm); background: var(--ember-red); box-shadow: 0 14px 40px -16px rgba(224, 70, 62, .9); color: var(--ember-white); font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap; }
	.ember-bf.ember-drawer-open .ember-bf-bar { visibility: hidden; }
}

/* Cart drawer: the package lines, the gift under its saber, and from below on a phone. */
.ember-drawer-item.is-companion { margin-top: -6px; margin-left: 24px; border-color: rgba(255, 91, 74, .25); }
.ember-bf-drawer-second { margin-top: 18px !important; padding: 14px !important; border: 1px solid rgba(127, 212, 138, .3); border-radius: var(--ember-radius-control); background: rgba(127, 212, 138, .05); }
.ember-theme .ember-bf-drawer-second .ember-mini-add { border-color: var(--ember-bf-ok); color: var(--ember-bf-ok); }
.ember-theme .ember-bf-drawer-second .ember-mini-add:hover { background: rgba(127, 212, 138, .1); }
@media (max-width: 680px) {
	.ember-bf .ember-drawer-panel { top: auto; width: 100%; max-height: 88vh; border-top: 1px solid var(--ember-line); border-left: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -30px 80px rgba(0, 0, 0, .6); transform: translateY(100%); }
	.ember-bf .ember-drawer.is-open .ember-drawer-panel { transform: none; }
}

@media (min-width: 900px) {
	.ember-bf-offer-head { font-size: 22px; }
	.ember-bf-offer-value b { font-size: 42px; }
	.ember-bf-offer-hero { min-height: 200px; }
	.ember-bf-offer-copy { padding: 22px; }
	.ember-bf-offer-deal { padding: 16px 22px; }
}

/* Nothing chosen on arrival (owner decision 15, 24 Sept: "en indikation for at brugeren skal
   vælge selv") ----------------------------------------------------------------
   Refined, not loud: the blade cards stay neutral and each says it can be chosen; the step the
   buy button points to carries a short red cue on a thin light line; pressing the button while a
   choice is missing takes the customer to that step and lights it once, calmly, then lets go. */
.ember-bf-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; margin-bottom: 10px; }
.ember-bf-family .ember-bf-card-top .ember-bf-pop { margin: 0; }
.ember-bf-pick { display: inline-flex; align-items: center; gap: 7px; }
.ember-bf-family .ember-bf-radio, .ember-bf-vcard .ember-bf-pick .ember-bf-radio { flex: none; width: 16px; height: 16px; margin: 0; border: 1px solid rgba(255, 255, 255, .32); border-radius: 50%; transition: border-color .2s, box-shadow .3s; }
.ember-bf-family button[aria-checked="true"] .ember-bf-radio { border-color: var(--ember-glow); background: radial-gradient(circle, var(--ember-glow) 0 3.5px, transparent 4px); box-shadow: 0 0 10px -1px rgba(255, 91, 74, .6); }
.ember-bf-pick-off, .ember-bf-pick-on { color: var(--ember-ink-2); font-size: 10px; font-weight: 800; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; }
.ember-bf-pick-on { display: none; color: var(--ember-glow); }
.ember-bf-family button[aria-checked="true"] .ember-bf-pick-off, .ember-bf-vcard[aria-checked="true"] .ember-bf-pick-off { display: none; }
.ember-bf-family button[aria-checked="true"] .ember-bf-pick-on { display: inline; }
.ember-theme .ember-bf-family button.ember-bf-card-opt { transition: border-color .5s var(--ember-ease), box-shadow .5s var(--ember-ease), background-color .2s; }
.ember-theme .ember-bf-family button.ember-bf-card-opt:not([aria-checked="true"]):hover { border-color: var(--ember-line-strong); }
.ember-theme .ember-bf-lengths button { transition: border-color .5s var(--ember-ease), box-shadow .5s var(--ember-ease); }

.ember-bf-step-sel.is-cue { display: inline-flex; align-items: center; gap: 8px; color: var(--ember-glow); font-size: 12px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.ember-bf-step-sel.is-cue::before { content: ""; display: block; flex: none; width: 18px; height: 1px; background: linear-gradient(90deg, transparent, var(--ember-glow)); box-shadow: 0 0 6px rgba(255, 91, 74, .6); }
.ember-bf-step.is-called .ember-bf-step-n { background: var(--ember-red); color: var(--ember-white); box-shadow: 0 0 0 4px rgba(255, 91, 74, .14); }
.ember-bf-step.is-called .ember-bf-step-sel.is-cue { color: var(--ember-ink); }
.ember-theme .ember-bf-family.is-called button.ember-bf-card-opt:not([aria-checked="true"]):not(:disabled),
.ember-theme .ember-bf-lengths.is-called button:not([aria-pressed="true"]):not(:disabled),
.ember-bf-compare.is-called .ember-bf-vcard:not([aria-checked="true"]):not([aria-disabled="true"]) { border-color: rgba(255, 91, 74, .6); box-shadow: 0 0 0 1px rgba(255, 91, 74, .16), 0 18px 40px -30px rgba(255, 91, 74, .75); }
.ember-bf-step-n { transition: background-color .3s, box-shadow .5s var(--ember-ease); }

/* The buy button and the bar while a choice is missing: the dark ground and a red hairline, so it
   reads as "one step left", pressable, never as a greyed-out dead end. */
.ember-bf.single-product .site-content .single_add_to_cart_button.is-choose,
.ember-bf.single-product .site-content .single_add_to_cart_button.is-choose.disabled { opacity: 1; background: var(--ember-surface-2); box-shadow: inset 0 0 0 1px rgba(255, 91, 74, .65); color: var(--ember-ink); cursor: pointer; }
.ember-bf.single-product .site-content .single_add_to_cart_button.is-choose:hover { background: rgba(255, 91, 74, .1); box-shadow: inset 0 0 0 1px var(--ember-glow); color: var(--ember-ink); transform: none; }
.ember-bf .ember-bf-total.is-from b { color: var(--ember-ink-2); font-size: 22px; }
@media (max-width: 899px) {
	.ember-theme .ember-bf-bar a.ember-bf-bar-button.is-choose { background: var(--ember-surface-2); box-shadow: inset 0 0 0 1px rgba(255, 91, 74, .65); color: var(--ember-ink); }
}

/* The step up to Pro under the lengths (owner, 24 Sept): the offer box in small - dark ground,
   thin red light line, the gift photo flush left, one red button. Figures from the variations. */
.ember-bf-upsell { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin: 12px 0 4px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--ember-radius-control); background: linear-gradient(180deg, #1a1512 0%, #120f0d 100%); box-shadow: 0 24px 50px -40px rgba(255, 91, 74, .7); animation: ember-bf-in .45s var(--ember-ease) both; }
.ember-bf-upsell::before { content: ""; position: absolute; top: 0; right: 0; left: 0; z-index: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--ember-glow) 30%, var(--ember-glow) 70%, transparent); opacity: .8; }
.ember-bf-upsell.has-photo { grid-template-columns: 84px minmax(0, 1fr); }
.ember-bf-upsell-img { display: block; min-height: 88px; overflow: hidden; background: var(--ember-surface-3); }
.ember-theme .ember-bf-upsell-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.ember-bf-upsell-copy { min-width: 0; padding: 12px 14px 10px; }
.ember-bf-upsell .ember-bf-kicker { color: var(--ember-glow); }
.ember-bf .ember-bf-upsell-line { margin: 5px 0 0; color: var(--ember-ink); font-size: 14px; font-weight: 700; letter-spacing: -.01em; line-height: 1.4; }
.ember-bf-upsell-act { display: flex; grid-column: 1 / -1; align-items: center; gap: 12px; padding: 10px 14px 12px; border-top: 1px solid rgba(255, 255, 255, .07); }
.ember-bf .ember-bf-upsell-price { display: flex; flex: 1; flex-direction: column; min-width: 0; margin: 0; line-height: 1.2; }
.ember-bf-upsell-price b { color: var(--ember-ink); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.ember-bf-upsell-price small { overflow: hidden; color: var(--ember-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ember-theme .ember-bf-upsell-go { flex: none; min-height: 42px; margin: 0; padding: 10px 18px; border: 0; border-radius: var(--ember-radius-control); background: var(--ember-red); box-shadow: 0 12px 30px -16px rgba(224, 70, 62, .9); color: var(--ember-white); font-size: 14px; font-weight: 800; line-height: 1.2; cursor: pointer; transition: background-color .2s, box-shadow .3s; }
.ember-theme .ember-bf-upsell-go:hover { background: var(--ember-red-deep); color: var(--ember-white); }
@media (min-width: 900px) {
	.ember-bf-upsell.has-photo { grid-template-columns: 96px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.ember-bf-offer-photo, .ember-bf-scene-chip, .ember-bf-panel, .ember-bf-gift.is-open, .ember-bf-row.is-new { animation: none; }
	.ember-bf-scene-glow, .ember-bf-sheet-panel, .ember-bf-sheet-shade, .ember-bf-bar, .ember-bf-fill, .ember-theme .ember-bf-steps button { transition: none; }
	.ember-bf-compare-col.ember-bf-vcard, .ember-bf-compare-col.ember-bf-vcard::before, .ember-bf-vcard .ember-bf-radio { transition: none; }
	.ember-bf-upsell { animation: none; }
	.ember-theme .ember-bf-family button.ember-bf-card-opt, .ember-theme .ember-bf-lengths button, .ember-bf-family .ember-bf-radio, .ember-bf-step-n, .ember-theme .ember-bf-upsell-go { transition: none; }
}

/* Ember Pixel Pro™ in light gold (owner, 24 Sept: "så det føles specielt for kunden"). The Pro
   card and the Pro upgrade box swap the red accent for one pale gold; red stays the shop's own
   colour everywhere else. Setting --ember-glow locally recolours the light line, radio, labels
   and focus ring that already use it. */
.ember-bf { --ember-bf-pro: #e8cf9a; --ember-bf-pro-deep: #c9a45e; }
.ember-bf-vcard[data-board="pro"], .ember-bf-upsell { --ember-glow: var(--ember-bf-pro); }
.ember-bf-vcard[data-board="pro"] .ember-bf-compare-sub { color: var(--ember-bf-pro-deep); }
.ember-bf-compare-col.ember-bf-vcard[data-board="pro"]:hover { border-color: rgba(232, 207, 154, .35); }
.ember-bf-compare-col.ember-bf-vcard[data-board="pro"][aria-checked="true"] { border-color: rgba(232, 207, 154, .75); background: linear-gradient(180deg, rgba(232, 207, 154, .08) 0%, rgba(232, 207, 154, 0) 40%), linear-gradient(180deg, #1c1813 0%, #15120e 100%); box-shadow: inset 0 0 26px -12px rgba(232, 207, 154, .35), 0 18px 40px -30px rgba(232, 207, 154, .55); }
.ember-bf-vcard[data-board="pro"][aria-checked="true"] .ember-bf-radio { box-shadow: 0 0 10px -1px rgba(232, 207, 154, .55); }
.ember-bf-vcard[data-board="pro"] .ember-bf-vcard-chosen { background: var(--ember-bf-pro); color: #1a140b; }
.ember-bf-vcard[data-board="pro"] .ember-bf-vcard-mark { color: var(--ember-bf-pro); }
.ember-bf-vcard[data-board="pro"] .ember-bf-vcard-deal { border-color: rgba(232, 207, 154, .3); box-shadow: 0 18px 36px -28px rgba(232, 207, 154, .6); }
.ember-bf-vcard[data-board="pro"] .ember-bf-vcard-deal-value { color: var(--ember-bf-pro); }
.ember-bf-compare.is-called .ember-bf-vcard[data-board="pro"]:not([aria-checked="true"]):not([aria-disabled="true"]) { border-color: rgba(232, 207, 154, .55); box-shadow: 0 0 0 1px rgba(232, 207, 154, .14), 0 18px 40px -30px rgba(232, 207, 154, .6); }
.ember-bf-upsell { border-color: rgba(232, 207, 154, .22); }
.ember-theme .ember-bf-upsell-go { background: var(--ember-bf-pro); box-shadow: 0 12px 30px -16px rgba(232, 207, 154, .7); color: #1a140b; }
.ember-theme .ember-bf-upsell-go:hover, .ember-theme .ember-bf-upsell-go:focus-visible { background: #f1dcad; color: #1a140b; }
/* Ember Pixel™ panel reduced to its line up to Pro; the Pro button follows the Pro gold. */
.ember-bf-panel.is-slim .ember-bf-panel-act { border-top: 0; }
.ember-theme .ember-bf-ghost[data-ember-bf-go="pro"] { border-color: rgba(232, 207, 154, .6); color: var(--ember-bf-pro); }
.ember-theme .ember-bf-ghost[data-ember-bf-go="pro"]:hover, .ember-theme .ember-bf-ghost[data-ember-bf-go="pro"]:focus-visible { border-color: var(--ember-bf-pro); background: rgba(232, 207, 154, .1); color: var(--ember-bf-pro); }
/* The included saber is Pro-only, so its whole step and the "Se alle" sheet take the Pro gold
   (owner, 24 Sept). --ember-glow recolours the tag, quick picks, chips, checkbox and sheet
   selection that already use it; the rest are set here. */
.ember-bf-gift, .ember-bf-sheet { --ember-glow: var(--ember-bf-pro); }
.ember-bf-gift .ember-bf-step-n, .ember-bf-gift .ember-bf-step.is-done .ember-bf-step-n, .ember-bf-gift .ember-bf-step.is-called .ember-bf-step-n { background: var(--ember-bf-pro); color: #1a140b; }
.ember-bf-gift .ember-bf-step.is-called .ember-bf-step-n { box-shadow: 0 0 0 4px rgba(232, 207, 154, .16); }
.ember-bf-gift-chosen { border-color: rgba(232, 207, 154, .55); background: linear-gradient(180deg, rgba(232, 207, 154, .06), rgba(232, 207, 154, 0) 45%), var(--ember-surface-2); box-shadow: 0 14px 40px -22px rgba(232, 207, 154, .55); }
.ember-bf-gift-val { color: var(--ember-bf-pro); }
.ember-theme .ember-bf-gift .ember-bf-chips button[aria-pressed="true"] { background: rgba(232, 207, 154, .1); color: var(--ember-bf-pro); }
.ember-bf-gift .ember-bf-upgrade[aria-pressed="true"] .ember-bf-upgrade-box { color: #1a140b; }
.ember-bf-gift .ember-bf-upgrade-price { color: var(--ember-bf-pro); }
.ember-bf-sheet .ember-bf-sheet-v { color: var(--ember-bf-pro); }
.ember-theme .ember-bf-sheet .ember-bf-sheet-item:focus-visible, .ember-theme .ember-bf-gift button:focus-visible { outline: 2px solid var(--ember-bf-pro); outline-offset: 2px; }
.ember-theme .ember-bf-sheet :is(button, a, [tabindex]):focus, .ember-theme .ember-bf-gift :is(button, a, [tabindex]):focus { outline-color: var(--ember-bf-pro); }
/* The long blade Pro includes, in the same gold (owner, 24 Sept: "Hvis man har valgt den med pro og
   den bliver streget ud, så gør den guld i stedet for, så ser det mere eksklusivt ud"). buy-flow.js
   drawLengths puts .is-pro on the length group while Pro is chosen and .is-pro-long on the bar that
   reads "Inkluderet med Pro": a gold hairline and soft inner glow when chosen, a white-to-gold
   blade, the words in gold, the struck surcharge muted. The other bars stay red, and so does the
   whole step without Pro. The tip that offers the long blade (only ever shown with Pro) follows. */
.ember-bf-lengths.is-pro button.is-pro-long { --ember-glow: var(--ember-bf-pro); }
.ember-theme .ember-bf-lengths.is-pro button.is-pro-long[aria-pressed="true"] { border-color: rgba(232, 207, 154, .75); background: linear-gradient(180deg, rgba(232, 207, 154, .07) 0%, rgba(232, 207, 154, .02) 100%); box-shadow: inset 0 0 0 1px rgba(232, 207, 154, .12), inset 0 24px 48px -36px rgba(232, 207, 154, .5), 0 22px 44px -34px rgba(232, 207, 154, .6); }
.ember-bf-lengths.is-pro button.is-pro-long[aria-pressed="true"] .ember-bf-fill { background: linear-gradient(90deg, #fff, var(--ember-bf-pro)); box-shadow: 0 0 10px rgba(232, 207, 154, .75); }
.ember-bf-lengths.is-pro button.is-pro-long .ember-bf-len-d s { color: var(--ember-muted); }
.ember-bf-lenhint { --ember-glow: var(--ember-bf-pro); border-color: rgba(232, 207, 154, .45); background: rgba(232, 207, 154, .06); }
.ember-bf-lenhint strong { color: var(--ember-bf-pro); }
.ember-theme .ember-bf-lenhint .ember-bf-ghost { border-color: rgba(232, 207, 154, .6); color: var(--ember-bf-pro); }
.ember-theme .ember-bf-lenhint .ember-bf-ghost:hover, .ember-theme .ember-bf-lenhint .ember-bf-ghost:focus-visible { border-color: var(--ember-bf-pro); background: rgba(232, 207, 154, .1); color: var(--ember-bf-pro); }

/* Pro mode (owner, 24 Sept: "Kan vi gøre det hele guld, når man vælger Ember Pro? ... en god
   mellemting der ikke forstyrrer men brugeren kan mærke 'Premium'"). While Ember Pixel Pro™ is the
   chosen version, buy-flow.js drawProMode puts .ember-bf-pro-mode on <body> and the buy flow's accent
   turns from red to the Pro light gold: the light lines, kickers, step numbers and the current step,
   the chosen blade and length, the gallery glow, and the package's gift and worth accents. Red stays
   where it means the shop or buying: "Læg i kurven" and the bar button (with a thin gold edge), the
   accessory buttons, the header, footer and cart drawer; sværd nr. 2 stays green. Pixel and Forge
   are untouched. --ember-glow is registered as a colour so it can cross-fade: .ember-bf-pro-shift is
   on <body> for the 450 ms after a change the customer made (never on arrival), and on choosing Pro
   one gold glint runs once along the Pro card's top edge (.is-sweep, transform and opacity only). */
@property --ember-glow { syntax: '<color>'; inherits: true; initial-value: #ff5b4a; }
.ember-bf { --ember-bf-shop-glow: var(--ember-glow); }
.ember-bf-pro-mode :is(.woocommerce-product-gallery, .ember-bf-stage, .ember-bf-offer, .ember-bf-steps, .ember-bf-form, .ember-bf-package, .ember-bf-complete, .ember-bf-total, .ember-bf-bar, .ember-bf-about-hold) { --ember-glow: var(--ember-bf-pro); }
.ember-bf-pro-mode :is(.ember-bf-package, .ember-bf-total, .ember-bf-bar, .ember-bf-compare) { --ember-bf-gold: var(--ember-bf-pro); }
.ember-bf-pro-mode :is(.single_add_to_cart_button, .ember-bf-acc, .ember-bf-acc-card, .ember-bf-second) { --ember-glow: var(--ember-bf-shop-glow); }
/* Gallery scene and the offer box. */
.ember-bf-pro-mode .ember-bf-scene-glow { box-shadow: inset 0 0 110px -10px rgba(232, 207, 154, .42); }
.ember-bf-pro-mode .ember-bf-scene-chip { border-color: rgba(232, 207, 154, .5); }
.ember-bf-pro-mode .ember-bf-scene-cap { border-color: rgba(232, 207, 154, .24); }
.ember-bf-pro-mode .ember-bf-offer { border-color: rgba(232, 207, 154, .16); box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 30px 70px -40px rgba(232, 207, 154, .42); }
.ember-bf-pro-mode.ember-bf .ember-bf-offer-cart { border-top-color: rgba(232, 207, 154, .22); background: rgba(232, 207, 154, .06); }
/* Step bar and step numbers: a gold fill takes dark text. */
.ember-theme.ember-bf-pro-mode .ember-bf-steps li.is-done button { background: rgba(232, 207, 154, .2); color: var(--ember-ink); }
.ember-theme.ember-bf-pro-mode .ember-bf-steps li.is-now button { background: var(--ember-bf-pro); color: #1a140b; }
.ember-bf-pro-mode .ember-bf-step.is-done .ember-bf-step-n, .ember-bf-pro-mode .ember-bf-step.is-called .ember-bf-step-n { background: var(--ember-bf-pro); color: #1a140b; }
.ember-bf-pro-mode .ember-bf-step.is-called .ember-bf-step-n { box-shadow: 0 0 0 4px rgba(232, 207, 154, .16); }
.ember-bf-pro-mode .ember-bf-step-sel.is-cue::before { box-shadow: 0 0 6px rgba(232, 207, 154, .55); }
/* The chosen blade, length and table column in the Pro card's own gold frame. */
.ember-theme.ember-bf-pro-mode .ember-bf-family button.ember-bf-card-opt[aria-checked="true"],
.ember-theme.ember-bf-pro-mode .ember-bf-lengths button[aria-pressed="true"] { border-color: rgba(232, 207, 154, .75); box-shadow: inset 0 0 0 1px rgba(232, 207, 154, .12), inset 0 24px 48px -36px rgba(232, 207, 154, .5), 0 22px 44px -34px rgba(232, 207, 154, .6); }
.ember-bf-pro-mode .ember-bf-family button[aria-checked="true"] .ember-bf-radio { box-shadow: 0 0 10px -1px rgba(232, 207, 154, .55); }
.ember-bf-pro-mode .ember-bf-pop { background: var(--ember-bf-pro); color: #1a140b; }
.ember-bf-pro-mode .ember-bf-band:not(.is-plain) { background: rgba(232, 207, 154, .07); }
.ember-bf-pro-mode .ember-bf-lengths button[aria-pressed="true"] .ember-bf-fill { box-shadow: 0 0 10px rgba(232, 207, 154, .75); }
.ember-bf-pro-mode .ember-bf-compare-col[aria-checked="true"]:not(.ember-bf-vcard) { background: rgba(232, 207, 154, .1); }
.ember-theme.ember-bf-pro-mode .ember-bf-family.is-called button.ember-bf-card-opt:not([aria-checked="true"]):not(:disabled),
.ember-theme.ember-bf-pro-mode .ember-bf-lengths.is-called button:not([aria-pressed="true"]):not(:disabled) { border-color: rgba(232, 207, 154, .55); box-shadow: 0 0 0 1px rgba(232, 207, 154, .14), 0 18px 40px -30px rgba(232, 207, 154, .6); }
/* Panels, the package and "Gør det komplet" (its line follows --ember-glow). */
.ember-bf-pro-mode .ember-bf-points i { background: rgba(232, 207, 154, .14); }
.ember-theme.ember-bf-pro-mode .ember-bf-form .ember-bf-ghost { border-color: rgba(232, 207, 154, .6); }
.ember-theme.ember-bf-pro-mode .ember-bf-form .ember-bf-ghost:hover { background: rgba(232, 207, 154, .1); }
.ember-bf-pro-mode .ember-bf-package { border-color: rgba(232, 207, 154, .24); }
/* "Læg i kurven" stays the shop's red with a thin gold edge. */
.ember-bf-pro-mode.single-product .site-content .single_add_to_cart_button:not(.is-choose) { box-shadow: inset 0 0 0 1px rgba(232, 207, 154, .6), 0 12px 32px -18px rgba(232, 207, 154, .45); }
.ember-bf-pro-mode.single-product .site-content .single_add_to_cart_button:not(.is-choose):hover { box-shadow: inset 0 0 0 1px rgba(232, 207, 154, .7), 0 14px 34px -14px rgba(224, 70, 62, .8); }
@media (max-width: 899px) {
	.ember-theme.ember-bf-pro-mode .ember-bf-bar a.ember-bf-bar-button:not(.is-choose) { box-shadow: inset 0 0 0 1px rgba(232, 207, 154, .6), 0 14px 40px -16px rgba(224, 70, 62, .9); }
}
/* The cross-fade, only while .ember-bf-pro-shift is on. */
.ember-bf-pro-shift :is(.woocommerce-product-gallery, .ember-bf-stage, .ember-bf-offer, .ember-bf-steps, .ember-bf-form, .ember-bf-package, .ember-bf-complete, .ember-bf-total, .ember-bf-bar) { transition: --ember-glow .45s var(--ember-ease); }
html body.ember-bf-pro-shift :is(.flex-control-thumbs img, .ember-bf-scene-glow, .ember-bf-scene-chip, .ember-bf-scene-cap, .ember-bf-offer, .ember-bf-offer-cart, .ember-bf-steps button, .ember-bf-step-n, .ember-bf-family button.ember-bf-card-opt, .ember-bf-lengths button, .ember-bf-fill, .ember-bf-radio, .ember-bf-pop, .ember-bf-band, .ember-bf-points i, .ember-bf-ghost, .ember-bf-package, .single_add_to_cart_button, a.ember-bf-bar-button) { transition: color .45s var(--ember-ease), background-color .45s var(--ember-ease), border-color .45s var(--ember-ease), box-shadow .45s var(--ember-ease), opacity .6s var(--ember-ease); }
/* One gold glint along the Pro card's top edge (the offer box without cards). It travels inside
   the card (translateX up to its own width's share), so nothing overflows the page. */
.ember-bf-vcard[data-board="pro"]::after, .ember-bf-offer::after { content: ""; position: absolute; top: -1px; left: 0; z-index: 3; width: 45%; height: 2px; background: linear-gradient(90deg, rgba(255, 244, 220, 0), rgba(255, 244, 220, .95) 50%, rgba(255, 244, 220, 0)); opacity: 0; pointer-events: none; will-change: transform, opacity; }
.ember-bf-offer::after { top: 0; }
.ember-bf-vcard[data-board="pro"].is-sweep::after, .ember-bf-offer.is-sweep::after { animation: ember-bf-sweep .9s cubic-bezier(.45, 0, .25, 1) both; }
@keyframes ember-bf-sweep { 0% { opacity: 0; transform: translateX(0); } 18% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; transform: translateX(122.2%); } }
@media (prefers-reduced-motion: reduce) {
	.ember-bf-vcard[data-board="pro"].is-sweep::after, .ember-bf-offer.is-sweep::after { animation: none; }
	html body.ember-bf-pro-shift * { transition: none; }
}

/* Extras wait in the package until "Læg i kurven" (owner, 24 Sept: "Det skal bare tilføjes til den
   samlede ordre man er i gang med at bygge"). A chosen "+ Tilføj" reads "✓ Valgt" in its row's own
   filled colour (.is-in red, .is-added green, above); "Fjern" in the package is a quiet text button;
   a note says what could not come along, under the total and at the top of the drawer. */
.ember-theme .ember-bf-row-text .ember-bf-drop { display: inline; min-height: 0; margin: 0; padding: 2px 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ember-ink-2); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ember-theme .ember-bf-row-text .ember-bf-drop:hover { background: none; color: var(--ember-ink); }
.ember-theme .ember-bf-row-text .ember-bf-drop:focus-visible { outline: 2px solid var(--ember-glow); outline-offset: 2px; border-radius: 2px; }
.ember-bf-add-note { margin: 8px 0 0; padding: 10px 12px; border: 1px solid rgba(255, 91, 74, .55); border-radius: 5px; background: rgba(255, 91, 74, .08); color: var(--ember-ink); font-size: 13px; line-height: 1.4; }
.ember-bf-add-note[hidden] { display: none; }
.ember-bf-drawer-note { margin: 0 0 12px; }

/* LITE's compact buy flow (owner, 24 Sept: "mere simpel, samme agtig tema og stil"; the "Kompakt"
   layout, ember_buy_flow_compact). Step 1 is one row of the saber's own electronics: name and the
   difference from the cheapest, in the length buttons' dark surface and 5px corners. The Pro option
   and the one offer line under the row are in the Pro gold; the rest of the flow is shared. */
.ember-theme.ember-bf-lite .ember-variation-choices.ember-bf-boards { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; padding: 2px 0 6px; }
.ember-theme.ember-bf-lite .ember-bf-boards button { justify-content: center; gap: 2px; min-height: 58px; padding: 9px 12px; border-radius: 5px; background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)), var(--ember-surface-2); }
.ember-theme.ember-bf-lite .ember-bf-boards button:hover:not(:disabled) { transform: none; }
.ember-bf-lite .ember-bf-boards .ember-choice-name { font-size: 14px; font-weight: 700; line-height: 1.25; }
.ember-bf-lite .ember-bf-boards .ember-choice-head { gap: 6px; }
.ember-bf-lite .ember-bf-boards .ember-choice-delta { color: var(--ember-muted); }
.ember-bf-lite .ember-bf-boards button.is-pro-opt { --ember-glow: var(--ember-bf-pro); }
/* One mark in the row: Ember Pixel™'s "Populær" (decision 9); the Pro option says it in gold instead. */
.ember-bf-lite .ember-bf-boards button.is-pro-opt .ember-choice-badge { display: none; }
/* In Pro mode the mark follows the blade cards' "Populær" (decision 20): gold with dark text. */
.ember-bf-pro-mode.ember-bf-lite .ember-bf-boards .ember-choice-badge { background: var(--ember-bf-pro); color: #1a140b; }
.ember-bf-lite .ember-bf-boards button.is-pro-opt .ember-choice-delta { color: var(--ember-bf-pro-deep); }
.ember-theme.ember-bf-lite .ember-bf-boards button.is-pro-opt:hover:not(:disabled) { border-color: rgba(232, 207, 154, .4); }
.ember-theme.ember-bf-lite .ember-bf-boards button.is-pro-opt[aria-pressed="true"] { border-color: rgba(232, 207, 154, .75); background: linear-gradient(180deg, rgba(232, 207, 154, .08) 0%, rgba(232, 207, 154, 0) 60%), #17140f; box-shadow: inset 0 0 0 1px rgba(232, 207, 154, .12), 0 18px 40px -30px rgba(232, 207, 154, .6); }
.ember-bf-lite .ember-bf-boards button.is-pro-opt[aria-pressed="true"] .ember-choice-delta { color: var(--ember-bf-pro); }
.ember-bf-lite .ember-bf-boards button.is-pro-opt::after { content: ""; position: absolute; top: -1px; left: 0; width: 45%; height: 2px; background: linear-gradient(90deg, rgba(255, 244, 220, 0), rgba(255, 244, 220, .95) 50%, rgba(255, 244, 220, 0)); opacity: 0; pointer-events: none; }
.ember-bf-lite .ember-bf-boards button.is-pro-opt.is-sweep::after { animation: ember-bf-sweep .9s cubic-bezier(.45, 0, .25, 1) both; }
.ember-bf-lite .ember-bf-boards.is-called button:not([aria-pressed="true"]):not(:disabled) { border-color: color-mix(in srgb, var(--ember-glow) 55%, transparent); }
.ember-bf-proline { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 4px; color: var(--ember-bf-pro); font-size: 13px; font-weight: 600; line-height: 1.4; }
.ember-bf-offer.is-line { padding: 0; }
@media (max-width: 600px) {
	.ember-theme.ember-bf-lite .ember-variation-choices.ember-bf-boards { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
	.ember-theme.ember-bf-lite .ember-bf-boards button { padding: 9px 9px; }
	/* Four options (Pulse, Onyx) as two by two rather than three and one. */
	.ember-theme.ember-bf-lite .ember-variation-choices.ember-bf-boards:has(> button:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ember-bf-lite .ember-bf-boards .ember-choice-name { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
	.ember-bf-lite .ember-bf-boards button.is-pro-opt.is-sweep::after { animation: none; }
}

/* Arrows on the side-scrolling rows (buy-flow.js, the rail block at the end; owner, 24 Sept):
   square like the header buttons, over the row's edges at image height, each gone at its end. */
.ember-bf-rail { position: relative; }
.ember-theme .ember-bf-rail-btn { position: absolute; top: 34%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0; padding: 0; border: 1px solid var(--ember-line); border-radius: 5px; background: rgba(15, 13, 11, .88); color: var(--ember-ink); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .9); cursor: pointer; transform: translateY(-50%); transition: border-color .2s, color .2s; }
.ember-theme .ember-bf-rail-btn:is(:hover, :focus-visible) { border-color: var(--ember-glow); color: #fff; background: rgba(15, 13, 11, .96); }
.ember-theme .ember-bf-rail-btn[hidden] { display: none; }
.ember-bf-rail-btn.is-prev { left: 4px; }
.ember-bf-rail-btn.is-next { right: 4px; }
.ember-bf-second .ember-bf-rail-btn:is(:hover, :focus-visible) { border-color: var(--ember-bf-ok); }
.ember-theme .ember-bf-second .ember-bf-rail-btn:focus { outline-color: var(--ember-bf-ok); }

/* Focus rings (owner, 24 Sept: "når man trykker på nogen af de andre knapper end de røde, så kommer
   der en rød streg rundt om ... farven skal matche"). A click leaves no ring: Storefront's
   button:focus outline is for the keyboard only here. The keyboard ring takes the colour of what
   it sits on: the accent (Pro gold in Pro mode), green in the second-saber row. */
.ember-theme.ember-bf :is(button, a, [tabindex]):focus:not(:focus-visible) { outline: none; }
.ember-theme.ember-bf :is(button, a, [tabindex]):focus-visible { outline-color: var(--ember-glow); }
.ember-theme.ember-bf.ember-bf-pro-mode :is(.ember-bf-form, .ember-bf-steps, .ember-bf-package, .ember-bf-total, .ember-bf-bar) :is(button, a, [tabindex]):focus-visible { outline-color: var(--ember-bf-pro); }
.ember-theme.ember-bf.ember-bf-pro-mode .ember-bf-complete :is(button, a, [tabindex]):focus-visible,
.ember-theme.ember-bf .ember-bf-complete :is(button, a, [tabindex]):focus-visible { outline-color: var(--ember-bf-shop-glow, var(--ember-glow)); }
.ember-theme.ember-bf.ember-bf-pro-mode .ember-bf-second :is(button, a, [tabindex]):focus-visible,
.ember-theme.ember-bf .ember-bf-second :is(button, a, [tabindex]):focus-visible { outline-color: var(--ember-bf-ok); }
/* The makkerrabat is already used in the cart: the row says so (buy-flow.js drawPicks). */
.ember-bf-second-used { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--ember-line); border-radius: 5px; background: rgba(255, 255, 255, .03); color: var(--ember-ink); font-size: 13px; }
.ember-bf-second-used[hidden] { display: none; }
.ember-bf-second.is-used > p:not(.ember-bf-second-used) { display: none; }

/* Grebsfarve (owner, 24 Sept: "Grebsfarve kan vi godt gøre pænere"). Compact buttons in a row that
   wraps, with the header buttons' sharp 5px corners; each starts with a dot in the hilt's own tone
   (variation-choices.js hiltSwatch), split diagonally for a two-tone grip. Chosen reads like the
   length and blade cards: the accent border and a low glow, and a ring round the dot. Every accent
   is var(--ember-glow), so inside the form it turns Pro gold in Pro mode. A click leaves no ring
   (the rule above); the keyboard ring is the accent. */
.ember-theme .ember-variation-choices.is-colour { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 10px; }
.ember-theme .ember-variation-choices.is-colour button { flex: 0 1 auto; flex-direction: row; align-items: center; gap: 10px; min-width: 0; max-width: 100%; min-height: 44px; margin: 0; padding: 8px 15px 8px 10px; border: 1px solid var(--ember-line); border-radius: var(--ember-radius-control); background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0)), var(--ember-surface-2); color: var(--ember-ink-2, var(--ember-ink)); font-size: 14px; font-weight: 600; line-height: 1.2; }
.ember-theme .ember-variation-choices.is-colour button:not(.has-swatch) { padding-left: 15px; }
.ember-theme .ember-variation-choices.is-colour button:hover:not(:disabled) { border-color: var(--ember-line-strong); background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0)), var(--ember-surface-3); color: var(--ember-ink); transform: none; }
.ember-theme .ember-variation-choices.is-colour button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--ember-glow) 80%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--ember-glow) 10%, transparent), transparent 70%), var(--ember-surface-2); color: var(--ember-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ember-glow) 12%, transparent), 0 16px 34px -26px color-mix(in srgb, var(--ember-glow) 75%, transparent); }
.ember-theme .ember-variation-choices.is-colour button:focus-visible { outline: 2px solid var(--ember-glow); outline-offset: 2px; }
.ember-variation-choices.is-colour .ember-choice-name { overflow-wrap: anywhere; }
.ember-variation-choices.is-colour .ember-choice-delta { margin-left: -2px; color: var(--ember-muted); font-size: 12px; font-weight: 600; }
.ember-choice-swatch { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ember-sw-a); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 0 0 1px rgba(0, 0, 0, .55); transition: box-shadow .2s; }
.ember-choice-swatch.is-split { background: linear-gradient(135deg, var(--ember-sw-a) 0 50%, var(--ember-sw-b) 50% 100%); }
/* The sheen that makes a flat tone read as metal: light from the top left, shade to the bottom right. */
.ember-choice-swatch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, .12) 32%, rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .28) 100%); pointer-events: none; }
.ember-variation-choices.is-colour button[aria-pressed="true"] .ember-choice-swatch { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 0 0 2px var(--ember-surface-2), 0 0 0 3.5px var(--ember-glow); }
.ember-variation-choices.is-colour button:disabled .ember-choice-swatch { filter: grayscale(.7); }
@media (max-width: 480px) {
	.ember-theme .ember-variation-choices.is-colour { gap: 7px; }
	.ember-theme .ember-variation-choices.is-colour button { padding-right: 13px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.ember-choice-swatch { transition: none; }
}