/**
 * KS Produkt Single — frontend styles
 * Forslag B buy box, right-aligned summary, USP band, FAQ, aligned cards,
 * new gallery + lightbox. All colors/sizes come from CSS variables printed
 * by KSPRS_Frontend::print_dynamic_css (id="ksprs-dynamic").
 *
 * NOTE: wc-qd ships its own frontend CSS (quantity-discount.css) with many
 * !important rules. The LIVE version is v1.3.3, which pins its containers with
 * position:absolute + top/right offsets and a fixed 320px width (NOT the
 * flexbox/order system of v1.2.9). We override those with element-prefixed,
 * high-specificity selectors so our horizontal Forslag B band wins the cascade.
 */

/* ============================ Layout ============================ */
.ksprs-product { font-family: var(--ksprs-font, 'Poppins', sans-serif); color: var(--ksprs-text, #2D2A2E); }
.ksprs-container { max-width: var(--ksprs-container, 1500px); margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.ksprs-product * { box-sizing: border-box; }

/* Hide the THEME's own breadcrumb that prints above our product layout (the
   large highlighted "Forside / Buesjækkel / ..." line). We render our own small,
   tidy breadcrumb inside .ksprs-breadcrumb, so the theme's is redundant. The
   theme outputs it in the page header / title area (common WooCommerce + Orchid
   Store wrappers), which sits OUTSIDE our .ksprs-product, so these selectors
   target the theme wrappers, never our own .ksprs-breadcrumb. */
.woocommerce-breadcrumb:not(.ksprs-breadcrumb-inner),
.page-header .woocommerce-breadcrumb,
.entry-header .woocommerce-breadcrumb,
.product-navigation .woocommerce-breadcrumb,
nav.woocommerce-breadcrumb:not(.ksprs-breadcrumb-inner),
.orchid-store-breadcrumb,
.breadcrumb-area,
.page-title-bar .woocommerce-breadcrumb {
    display: none !important;
}
/* Our own breadcrumb stays visible (it lives inside .ksprs-product). */
.ksprs-product .ksprs-breadcrumb,
.ksprs-product .ksprs-breadcrumb .woocommerce-breadcrumb {
    display: block !important;
}

.ksprs-breadcrumb { font-size: var(--ksprs-size-small, 13px); color: var(--ksprs-text-muted, #6B7280); margin: 14px 0 18px; }
.ksprs-breadcrumb a { color: var(--ksprs-primary, #E74C3C); text-decoration: none; }
.ksprs-breadcrumb a:hover { text-decoration: underline; }

.ksprs-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; align-items: start; }

/* thin separators between sections, full container width */
.ksprs-sep { height: 0; border-bottom: var(--ksprs-line-thickness, 1.5px) solid var(--ksprs-line, #e2e8f0); margin: 28px 0; }

/* ============================ Gallery ============================ */
.ksprs-gallery { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: start; }
.ksprs-gallery.ksprs-gallery--single,
.ksprs-gallery--empty { grid-template-columns: 1fr; }
.ksprs-gallery-thumbs { display: flex; flex-direction: column; gap: 8px; }
.ksprs-gallery-thumb {
    border: var(--ksprs-frame-thickness, 1.5px) solid var(--ksprs-line, #e2e8f0);
    border-radius: 8px; padding: 4px; background: #fff; cursor: pointer; line-height: 0;
    transition: border-color .15s ease;
}
.ksprs-gallery-thumb img { width: 100%; height: auto; border-radius: 5px; display: block; }
.ksprs-gallery-thumb.is-active,
.ksprs-gallery-thumb:hover { border-color: var(--ksprs-primary, #E74C3C); }

.ksprs-gallery-main {
    position: relative; border: var(--ksprs-frame-thickness, 1.5px) solid var(--ksprs-line, #e2e8f0);
    border-radius: var(--ksprs-card-radius, 10px); background: #fff; padding: 18px;
    display: flex; align-items: center; justify-content: center; min-height: 340px;
}
.ksprs-gallery-main-img { max-width: 100%; max-height: 460px; height: auto; display: block; cursor: zoom-in; }

/* Zoom button — built from scratch with PURE CSS (no SVG). The previous inline
   SVG collapsed to 0px width because the theme forces a width rule on `svg`.
   A CSS circle + pseudo-element handle cannot be zeroed, so it always shows.
   High specificity + !important on the box so the theme's global `button {}`
   rule can't repaint or resize it. */
.ksprs-gallery-main button.ksprs-gallery-zoom,
.ksprs-gallery-main button.ksprs-gallery-zoom:hover,
.ksprs-gallery-main button.ksprs-gallery-zoom:focus {
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    background-image: none !important;
    border: var(--ksprs-frame-thickness, 1.5px) solid var(--ksprs-line, #e2e8f0) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background .15s ease, border-color .15s ease !important;
    text-transform: none !important;
    line-height: 1 !important;
}
.ksprs-gallery-main button.ksprs-gallery-zoom:hover {
    background: var(--ksprs-primary, #E74C3C) !important;
    border-color: var(--ksprs-primary, #E74C3C) !important;
}
/* The magnifier glass: a ring (the lens) drawn with border-radius, and an
   ::after handle drawn as a short thick bar starting at the lens's lower-right
   edge (45deg) and pointing outward — like a real magnifier.
   Geometry: lens is 14x14, centre (7,7), radius 7. The 45deg edge point is at
   ~ (7 + 7*cos45, 7 + 7*sin45) = (12, 12). The handle starts there with
   transform-origin: top left and is rotated 45deg so it extends down-right.
   Border width is forced with !important so the theme's button/svg/box rules
   can't thin or recolour it; size is fixed in px so it can never collapse. */
.ksprs-gallery-main .ksprs-zoom-glass {
    position: relative !important;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    border: 2.5px solid var(--ksprs-text, #2D2A2E) !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-sizing: border-box !important;
    transition: border-color .15s ease !important;
    /* nudge up-left so the angled handle has room at bottom-right */
    margin: -4px -4px 0 0 !important;
    flex: 0 0 auto !important;
}
.ksprs-gallery-main .ksprs-zoom-glass::after {
    content: "" !important;
    position: absolute !important;
    top: 11px !important;
    left: 11px !important;
    width: 8px !important;
    height: 2.5px !important;
    background: var(--ksprs-text, #2D2A2E) !important;
    border-radius: 2px !important;
    transform: rotate(45deg) !important;
    transform-origin: top left !important;
    transition: background .15s ease !important;
}
.ksprs-gallery-main button.ksprs-gallery-zoom:hover .ksprs-zoom-glass {
    border-color: #fff !important;
}
.ksprs-gallery-main button.ksprs-gallery-zoom:hover .ksprs-zoom-glass::after {
    background: #fff !important;
}

/* ============================ Summary (right column) ============================ */
.ksprs-title { font-size: var(--ksprs-size-title, 26px); font-weight: 600; line-height: 1.2; margin: 0 0 10px; color: var(--ksprs-text, #2D2A2E); }

.ksprs-trustpilot { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; }
.ksprs-stars { color: var(--ksprs-trustpilot, #1D9E75); letter-spacing: 2px; font-size: 15px; }
.ksprs-trustpilot-text { font-size: var(--ksprs-size-small, 13px); color: var(--ksprs-text-muted, #6B7280); }

.ksprs-price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; }
.ksprs-price-amount { font-size: var(--ksprs-size-price, 24px); font-weight: 600; color: var(--ksprs-text, #2D2A2E); }
.ksprs-price-amount .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; }
.ksprs-price-tax { font-size: var(--ksprs-size-small, 13px); color: var(--ksprs-text-muted, #6B7280); }

.ksprs-sku { font-size: var(--ksprs-size-small, 13px); color: var(--ksprs-text-muted, #6B7280); margin: 0 0 4px; }

.ksprs-stock { display: flex; align-items: center; gap: 6px; font-size: var(--ksprs-size-small, 13px); margin: 4px 0 12px; }
.ksprs-stock--in { color: var(--ksprs-instock, #0F6E56); }
.ksprs-stock--out { color: var(--ksprs-warning, #A32D2D); }

.ksprs-intro { font-size: var(--ksprs-size-small, 13px); color: var(--ksprs-text-muted, #6B7280); line-height: 1.55; margin: 0 0 12px; }

.ksprs-warning { display: flex; align-items: center; gap: 6px; font-size: var(--ksprs-size-small, 13px); color: var(--ksprs-warning, #A32D2D); margin: 0 0 14px; font-weight: 500; }

/* attribute table — own rendering (icon | name | value rows) */
.ksprs-attributes { margin: 0 0 14px; }
.ksprs-attr-table { width: 100%; border-collapse: collapse; }
.ksprs-attr-trow { border-bottom: 1px solid var(--ksprs-line, #e2e8f0); }
.ksprs-attr-trow:last-child { border-bottom: none; }
.ksprs-attr-icon-cell {
    width: 48px; padding: 10px 8px 10px 0; vertical-align: middle;
    color: var(--ksprs-text, #2D2A2E);
}
.ksprs-attr-icon-cell svg { display: block; }
.ksprs-attr-name-cell {
    padding: 10px 12px 10px 0; vertical-align: middle;
    font-size: var(--ksprs-size-small, 13px); font-weight: 600; color: var(--ksprs-text, #2D2A2E);
    white-space: nowrap;
}
.ksprs-attr-value-cell {
    padding: 10px 0; vertical-align: middle; text-align: right;
    font-size: var(--ksprs-size-small, 13px); color: var(--ksprs-text-muted, #6B7280);
}

/* ============================================================== */
/* Prismatch + Datasheet buttons — IDENTICAL design.             */
/* Both: full-width, grey outline, BLACK text, icon left +        */
/* chevron right, and on hover the OUTLINE turns orange (text     */
/* stays black). The prismatch button mirrors the datasheet one   */
/* exactly per request.                                           */
/* ============================================================== */
.ksprs-prismatch { margin: 0 0 14px; }

.ksprs-prismatch-btn,
.ksprs-datasheet-btn {
    display: flex; align-items: center; gap: 10px; width: 100%;
    border: var(--ksprs-frame-thickness, 1.5px) solid var(--ksprs-line, #e2e8f0);
    border-radius: 8px; padding: 12px 14px; text-decoration: none;
    color: var(--ksprs-text, #2D2A2E); background: #fff;
    font-size: var(--ksprs-size-small, 13px);
    transition: border-color .15s ease;
}
.ksprs-prismatch-btn:hover,
.ksprs-datasheet-btn:hover {
    border-color: var(--ksprs-primary, #E74C3C);
    color: var(--ksprs-text, #2D2A2E);
}
/* left icon — orange accent (same as datasheet) */
.ksprs-prismatch-icon,
.ksprs-datasheet-icon { color: var(--ksprs-primary, #E74C3C); display: flex; flex: 0 0 auto; }
/* label fills the middle, black text */
.ksprs-prismatch-label,
.ksprs-datasheet-label { flex: 1; font-weight: 500; color: var(--ksprs-text, #2D2A2E); }
/* right chevron — muted */
.ksprs-prismatch-chevron,
.ksprs-datasheet-chevron { color: var(--ksprs-text-muted, #6B7280); display: flex; flex: 0 0 auto; }

/* ============================================================== */
/* Buy box — OVERRIDE wc-qd v1.3.3's own CSS.                     */
/* ============================================================== */
.ksprs-buybox {
    background: transparent;
    border: none;
    border-radius: 0; padding: 0;
    display: block; width: 100%;
    position: relative; /* contain any absolutely-positioned children */
}

/* CRITICAL: wc-qd v1.3.3 pins its containers with position:absolute + top/right
   (var(--qd-spacing-*)) and a fixed var(--qd-box-width) 320px width, using
   selectors like `.wc-qd-inline-container` and `body.single-product .wc-qd-...`
   (specificity up to 0,2,1). To pull them back into normal flow inside OUR card
   we must beat that with element-prefixed selectors `html body div.ksprs-buybox
   .wc-qd-...` (0,2,3). Verified live in the browser against v1.3.3. */
html body div.ksprs-buybox .wc-qd-inline-container,
html body div.ksprs-buybox .wc-qd-discount-box,
html body div.ksprs-buybox .wc-qd-action-buttons-container,
html body div.ksprs-buybox .wc-qd-action-buttons,
html body div.ksprs-buybox .wc-qd-radio-options,
html body div.ksprs-buybox .wc-qd-custom-section {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    z-index: auto !important;
    inset: auto !important;
    margin: 0 !important;
}
html body div.ksprs-buybox .wc-qd-action-buttons-container { margin-top: 13px !important; }
/* Keep the radio dot anchored in each package card corner */
html body div.ksprs-buybox .wc-qd-radio-row { position: relative !important; }

/* Kill wc-qd's fixed-width / order / float so our container is full width */
.ksprs-buybox .wc-qd-inline-container {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    order: 0 !important;
    margin: 0 !important;
    float: none !important;
    display: block !important;
}

/* Discount box: strip wc-qd's white card (our .ksprs-buybox is the card) */
.ksprs-buybox .wc-qd-discount-box {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: block !important;
}

/* Hide wc-qd "Mængderabat" heading (not needed in the band) */
.ksprs-buybox .wc-qd-title { display: none !important; }

/* Package rows -> HORIZONTAL band (override wc-qd column flex) */
.ksprs-buybox .wc-qd-radio-options {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 0 4px 0 !important;
    align-items: stretch !important;
}

/* Each package = a compact card with the qty field inside it */
.ksprs-buybox .wc-qd-radio-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    flex: 1 1 0 !important;
    min-width: 120px !important;
    max-width: none !important;
    width: auto !important;
    border: 1px solid var(--ksprs-line, #e2e8f0) !important;
    border-radius: 8px !important;
    padding: 10px 10px 8px !important;
    background: #fff !important;
    text-align: center !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: visible !important;
}
.ksprs-buybox .wc-qd-radio-row input[type="radio"] {
    position: absolute !important;
    top: 8px !important; left: 8px !important;
    width: 16px !important; height: 16px !important; min-width: 16px !important;
    margin: 0 !important; z-index: 2 !important;
}
/* Package label */
.ksprs-buybox label.wc-qd-package-text {
    order: 1 !important;
    flex: none !important;
    min-width: 0 !important; max-width: none !important; width: auto !important;
    font-size: 12px !important; font-weight: 600 !important; color: var(--ksprs-text, #2D2A2E) !important;
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
    margin: 0 !important; padding: 0 14px 0 0 !important; text-align: center !important;
    cursor: pointer !important;
}
.ksprs-buybox .wc-qd-inline-label { display: block !important; font-weight: 400 !important; font-style: normal !important; color: var(--ksprs-text-muted, #6B7280) !important; margin: 0 !important; }
/* Savings badge GREEN */
.ksprs-buybox span.wc-qd-savings-badge {
    order: 2 !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    margin: 0 !important; text-align: center !important;
    font-size: 11px !important; font-weight: 600 !important; color: var(--ksprs-savings, #3B6D11) !important;
}
/* Per-package qty field = number of PACKAGES */
.ksprs-buybox input.wc-qd-quantity-input {
    order: 3 !important;
    width: 58px !important; height: 30px !important;
    padding: 4px 6px !important; margin: 4px 0 0 0 !important;
    text-align: center !important; font-size: 13px !important;
    border: 1px solid var(--ksprs-line, #e2e8f0) !important; border-radius: 5px !important;
    color: var(--ksprs-text, #2D2A2E) !important; font-weight: 500 !important; background: #fff !important;
}
.ksprs-buybox .ksprs-unit-hint { order: 4 !important; display: block !important; font-size: 10px !important; color: var(--ksprs-text-muted, #6B7280) !important; margin-top: 2px !important; }

/* "eller" separator between packages and custom-amount */
.ksprs-buybox .wc-qd-separator {
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex: 0 0 auto !important; padding: 0 4px !important;
    font-size: 10px !important; letter-spacing: 1px !important; text-transform: uppercase !important;
    color: var(--ksprs-text-muted, #6B7280) !important; align-self: center !important;
}
.ksprs-buybox .wc-qd-custom-section {
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    gap: 4px !important; flex: 1 1 0 !important; min-width: 120px !important;
    border: 1px dashed var(--ksprs-line, #e2e8f0) !important; border-radius: 8px !important; padding: 10px !important;
}
.ksprs-buybox .wc-qd-custom-title { font-size: 12px !important; font-weight: 600 !important; color: var(--ksprs-text, #2D2A2E) !important; text-align: center !important; }
.ksprs-buybox .wc-qd-custom-row { display: flex !important; align-items: center !important; gap: 6px !important; justify-content: center !important; }
.ksprs-buybox input.wc-qd-custom-input { width: 64px !important; height: 30px !important; text-align: center !important; border: 1px solid var(--ksprs-line, #e2e8f0) !important; border-radius: 5px !important; font-size: 13px !important; }
.ksprs-buybox .wc-qd-custom-unit { font-size: 12px !important; color: var(--ksprs-text-muted, #6B7280) !important; }

/* price summary -> right aligned (accounting style), folds out under */
.ksprs-buybox .wc-qd-price-summary {
    display: none;
    margin: 11px 0 0 0 !important; padding: 11px 0 0 0 !important;
    border-top: 1px solid var(--ksprs-line, #e2e8f0) !important;
    background: transparent !important; border-radius: 0 !important;
    text-align: right !important; box-shadow: none !important;
}
.ksprs-buybox .wc-qd-price-summary.visible { display: block !important; }
.ksprs-buybox .wc-qd-price-summary-title { display: inline !important; font-size: 12px !important; color: var(--ksprs-text-muted, #6B7280) !important; margin: 0 6px 0 0 !important; }
.ksprs-buybox .wc-qd-price-amount { display: inline !important; font-weight: 600 !important; color: var(--ksprs-primary-dark, #C0392B) !important; font-size: 18px !important; margin: 0 !important; }
.ksprs-buybox .wc-qd-price-details { display: block !important; font-size: 11px !important; color: var(--ksprs-text-muted, #6B7280) !important; margin-top: 2px !important; }

/* action buttons (orange) — override wc-qd full-width column + order */
.ksprs-buybox .wc-qd-action-buttons-container {
    flex: 1 1 100% !important;
    width: 100% !important;
    order: 0 !important;
    margin-top: 13px !important;
    float: none !important; clear: both !important;
}
.ksprs-buybox .wc-qd-action-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    max-width: none !important;
}
.ksprs-buybox .wc-qd-btn,
.ksprs-buybox button.wc-qd-btn-add,
.ksprs-buybox button.wc-qd-btn-checkout,
.ksprs-buybox button.wc-qd-btn-continue {
    flex: 1 1 0 !important;
    width: auto !important;
    background: var(--ksprs-primary, #E74C3C) !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    font-family: inherit !important; font-size: 12px !important; font-weight: 600 !important;
    padding: 12px 10px !important;
    border-radius: 6px !important; cursor: pointer !important;
    text-align: center !important; line-height: 1.3 !important;
    box-shadow: none !important; text-transform: none !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important;
    transition: filter .15s ease !important;
}
.ksprs-buybox .wc-qd-btn:hover,
.ksprs-buybox button.wc-qd-btn-add:hover,
.ksprs-buybox button.wc-qd-btn-checkout:hover,
.ksprs-buybox button.wc-qd-btn-continue:hover {
    filter: brightness(0.94) !important; transform: none !important; box-shadow: none !important;
}
.ksprs-buybox .wc-qd-btn.loading { opacity: .7 !important; pointer-events: none !important; }

/* Hide the small icons inside the 3 action buttons ("Tilføj til kurv",
   "Gå til kassen", "Fortsæt indkøb"). At this button size the icons are too
   small to read and just add noise — text-only is cleaner. We target the
   icon markup wc-qd renders (svg / i / .dashicons / img / [class*="icon"])
   inside the action buttons only, so it never affects icons elsewhere. */
.ksprs-buybox .wc-qd-btn svg,
.ksprs-buybox .wc-qd-btn i,
.ksprs-buybox .wc-qd-btn img,
.ksprs-buybox .wc-qd-btn .dashicons,
.ksprs-buybox .wc-qd-btn [class*="icon"],
.ksprs-buybox button.wc-qd-btn-add svg,
.ksprs-buybox button.wc-qd-btn-add i,
.ksprs-buybox button.wc-qd-btn-add .dashicons,
.ksprs-buybox button.wc-qd-btn-checkout svg,
.ksprs-buybox button.wc-qd-btn-checkout i,
.ksprs-buybox button.wc-qd-btn-checkout .dashicons,
.ksprs-buybox button.wc-qd-btn-continue svg,
.ksprs-buybox button.wc-qd-btn-continue i,
.ksprs-buybox button.wc-qd-btn-continue .dashicons {
    display: none !important;
}

.ksprs-buybox .wc-qd-button-notice,
.ksprs-buybox .wc-qd-notice { margin-top: 8px !important; font-size: 12px !important; text-align: left !important; background: transparent !important; border: none !important; padding: 0 !important; }
.ksprs-buybox .wc-qd-button-notice.success,
.ksprs-buybox .wc-qd-notice.success { color: var(--ksprs-instock, #0F6E56) !important; background: transparent !important; border: none !important; }
.ksprs-buybox .wc-qd-button-notice.error,
.ksprs-buybox .wc-qd-notice.error { color: var(--ksprs-warning, #A32D2D) !important; background: transparent !important; border: none !important; }

/* Simple buy box (no discount) — Variant 1: qty + 3 buttons + total ALL ON ONE ROW */
.ksprs-buybox .ksprs-simple {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap; width: 100%;
}
/* qty group: compact, no bottom margin (it's on the row now) */
.ksprs-buybox .ksprs-simple .ksprs-qty { margin: 0; flex: 0 0 auto; gap: 6px; }
.ksprs-qty { display: flex; align-items: center; gap: 6px; }
.ksprs-qty-label { font-size: 12px; color: var(--ksprs-text-muted, #6B7280); }
.ksprs-qty-control { display: flex; align-items: center; border: 1px solid var(--ksprs-line, #e2e8f0); border-radius: 6px; overflow: hidden; }
/* +/- buttons: ALWAYS visible (dark glyph, transparent bg), centered, no hover,
   no border. High specificity (.ksprs-qty-control button.ksprs-qty-btn) plus
   !important is required to beat the theme's global inline `button {...}` rule
   that otherwise paints them white-on-grey (invisible). */
.ksprs-qty-control button.ksprs-qty-btn,
.ksprs-qty-control button.ksprs-qty-btn:hover,
.ksprs-qty-control button.ksprs-qty-btn:focus,
.ksprs-qty-control button.ksprs-qty-btn:active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--ksprs-text, #2D2A2E) !important;
    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    text-transform: none !important;
    transition: color .15s ease !important;
    transform: none !important;
    min-width: 0 !important;
}
.ksprs-qty-control button.ksprs-qty-btn:hover {
    color: var(--ksprs-primary, #E74C3C) !important;
}
.ksprs-qty-input { width: 40px; height: 34px; text-align: center; border: none; font-size: 13px; -moz-appearance: textfield; }
.ksprs-qty-input::-webkit-outer-spin-button,
.ksprs-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* buttons take the flexible middle, in a row, NOT full width */
html body div.ksprs-buybox .ksprs-simple .wc-qd-action-buttons {
    flex: 1 1 auto !important; width: auto !important; margin: 0 !important;
    display: flex !important; flex-direction: row !important; gap: 8px !important;
}
.ksprs-buybox .ksprs-simple .wc-qd-btn { flex: 1 1 0 !important; padding: 10px 10px !important; font-size: 12px !important; }
/* total on the right, no top border (it's inline on the row) */
.ksprs-buybox .ksprs-simple .ksprs-simple-total {
    flex: 0 0 auto; margin: 0; padding: 0; border: none;
    white-space: nowrap; text-align: right; font-size: 12px; color: var(--ksprs-text-muted, #6B7280);
}
.ksprs-simple-total .ksprs-simple-total-label { margin-left: 8px; }
.ksprs-simple-total .ksprs-simple-total-amount { font-weight: 600; color: var(--ksprs-primary-dark, #C0392B); font-size: 18px; margin-left: 6px; }

/* ============================ USP band ============================ */
.ksprs-usp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: center; }
.ksprs-usp-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; }
.ksprs-usp-item:not(:last-child) { border-right: 1px solid var(--ksprs-line, #e2e8f0); }
.ksprs-usp-icon { color: var(--ksprs-instock, #0F6E56); margin-bottom: 4px; }
.ksprs-usp-title { font-size: var(--ksprs-size-small, 13px); font-weight: 600; }
.ksprs-usp-sub { font-size: 12px; color: var(--ksprs-text-muted, #6B7280); }

/* ============================ Sections ============================ */
.ksprs-section { background: var(--ksprs-card-bg, #fff); border: var(--ksprs-frame-thickness, 1.5px) solid var(--ksprs-line, #e2e8f0); border-radius: var(--ksprs-card-radius, 10px); padding: 20px 22px; }
.ksprs-section-title { font-size: var(--ksprs-size-section, 20px); font-weight: 600; margin: 0 0 12px; color: var(--ksprs-text, #2D2A2E); }
.ksprs-description-body { font-size: var(--ksprs-size-body, 15px); color: var(--ksprs-text, #2D2A2E); line-height: 1.7; }
.ksprs-description-body ul { padding-left: 20px; }
.ksprs-description-body li { margin: 4px 0; }

/* ============================ FAQ ============================ */
.ksprs-faq-items { display: flex; flex-direction: column; }
.ksprs-faq-item { border-bottom: 1px solid var(--ksprs-line, #e2e8f0); }
.ksprs-faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: none; border: none; cursor: pointer; padding: 14px 0; text-align: left;
    font-family: inherit; font-size: var(--ksprs-size-body, 15px); font-weight: 500; color: var(--ksprs-text, #2D2A2E);
}
.ksprs-faq-toggle { font-size: 20px; line-height: 1; color: var(--ksprs-text-muted, #6B7280); flex: 0 0 auto; }
.ksprs-faq-a { display: none; padding: 0 0 14px; font-size: var(--ksprs-size-small, 13px); color: var(--ksprs-text-muted, #6B7280); line-height: 1.6; }
.ksprs-faq-item.is-open .ksprs-faq-a { display: block; }
.ksprs-faq-item.is-open .ksprs-faq-toggle { color: var(--ksprs-primary, #E74C3C); }

/* ============================ Cross / up-sells ============================ */
.ksprs-related-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ksprs-related { background: var(--ksprs-card-bg, #fff); border: var(--ksprs-frame-thickness, 1.5px) solid var(--ksprs-line, #e2e8f0); border-radius: var(--ksprs-card-radius, 10px); padding: 18px; }
.ksprs-cards { display: grid; grid-template-columns: repeat(var(--ksprs-cards-cols, 3), 1fr); gap: 10px; align-items: stretch; }
.ksprs-card {
    display: flex; flex-direction: column; border: 1px solid var(--ksprs-line, #e2e8f0);
    border-radius: 8px; padding: 10px; text-align: center; background: #fff;
}
.ksprs-card-img { display: block; margin-bottom: 6px; line-height: 0; }
.ksprs-card-img img { width: 100%; height: auto; border-radius: 5px; }
.ksprs-card-name {
    flex: 1; display: flex; align-items: center; justify-content: center; min-height: 34px;
    font-size: 12px; line-height: 1.3; color: var(--ksprs-text, #2D2A2E); text-decoration: none; margin-bottom: 6px;
}
.ksprs-card-name:hover { color: var(--ksprs-primary, #E74C3C); }
.ksprs-card-price { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.ksprs-card-price .woocommerce-Price-amount { font-size: inherit; }
.ksprs-card-add {
    display: block; background: var(--ksprs-primary, #E74C3C); color: #fff; text-decoration: none;
    font-size: 12px; padding: 8px; border-radius: 5px; transition: filter .15s ease; margin-top: auto;
}
/* The theme's global inline rule `button, .button, input[type=submit] {...}`
   paints these add-to-cart links near-black (rgb(10,0,0)) because the WooCommerce
   `add_to_cart_button` class collides with it. Beat it with a class-chained,
   element-prefixed selector + !important. Verified live in the browser. */
.ksprs-cards a.ksprs-card-add,
.ksprs-cards a.ksprs-card-add.add_to_cart_button,
.ksprs-cards a.ksprs-card-add.added {
    background: var(--ksprs-primary, #E74C3C) !important;
    background-color: var(--ksprs-primary, #E74C3C) !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
}
.ksprs-cards a.ksprs-card-add:hover,
.ksprs-cards a.ksprs-card-add.add_to_cart_button:hover {
    background: var(--ksprs-primary, #E74C3C) !important;
    background-color: var(--ksprs-primary, #E74C3C) !important;
    color: #fff !important;
    filter: brightness(0.94);
}
.ksprs-card-add.added { opacity: .85; }

/* ============================ Lightbox ============================ */
.ksprs-lightbox {
    position: fixed; inset: 0; background: rgba(0,0,0,0.82); z-index: 99999;
    display: none; align-items: center; justify-content: center; padding: 30px;
}
.ksprs-lightbox.is-open { display: flex; }
.ksprs-lightbox-img { max-width: 92vw; max-height: 88vh; border-radius: 6px; background: #fff; }
.ksprs-lightbox-close {
    position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,0.15); color: #fff; border: none; cursor: pointer; font-size: 22px; line-height: 1;
}
.ksprs-lightbox-close:hover { background: rgba(255,255,255,0.28); }
.ksprs-lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,255,255,0.15); color: #fff; border: none; cursor: pointer; font-size: 24px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.ksprs-lightbox-nav:hover { background: rgba(255,255,255,0.28); }
.ksprs-lightbox-prev { left: 18px; }
.ksprs-lightbox-next { right: 18px; }

/* ============================ Responsive ============================ */
@media (max-width: 992px) {
    .ksprs-top { grid-template-columns: 1fr; gap: 24px; }
    .ksprs-related-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ksprs-gallery { grid-template-columns: 70px 1fr; }
    .ksprs-cards { grid-template-columns: repeat(2, 1fr); }

    /* ============================================================== */
    /* v1.2.2 Mobile quantity-discount: ONE box per row, full width.  */
    /* Replaces the old 2-column layout that overlapped because wc-qd */
    /* could not fit package-text + qty input + badge into ~162px.    */
    /* Each row becomes a clean horizontal line: radio + label (flex)  */
    /* pushing qty + badge to the right. (Vej A)                      */
    /* ============================================================== */
    html body div.ksprs-buybox .wc-qd-radio-options {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }
    html body div.ksprs-buybox .wc-qd-radio-row {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        min-width: 100% !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        text-align: left !important;
        padding: 10px 12px 10px 32px !important; /* left room for radio dot */
    }
    /* Package label takes remaining space, pushing qty+badge right */
    html body div.ksprs-buybox label.wc-qd-package-text {
        order: 1 !important;
        flex: 1 1 auto !important;
        text-align: left !important;
        padding: 0 !important;
        font-size: 14px !important;
    }
    /* Savings badge: compact pill on the line (not a 109px tall block) */
    html body div.ksprs-buybox span.wc-qd-savings-badge {
        order: 2 !important;
        flex: 0 0 auto !important;
        align-self: center !important;
        height: auto !important;
        white-space: nowrap !important;
        padding: 3px 8px !important;
        background: var(--ksprs-savings-bg, #EAF3DE) !important;
        border-radius: 6px !important;
    }
    /* Qty input stays compact on the right */
    html body div.ksprs-buybox input.wc-qd-quantity-input {
        order: 3 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }
    html body div.ksprs-buybox .ksprs-unit-hint {
        order: 4 !important;
        flex: 0 0 auto !important;
        margin: 0 0 0 2px !important;
    }
    /* Radio dot stays pinned top-left, vertically centered on the row */
    html body div.ksprs-buybox .wc-qd-radio-row input[type="radio"] {
        top: 50% !important;
        transform: translateY(-50%) !important;
        left: 10px !important;
    }
    /* "eller" separator + custom-amount section: full width, own line */
    html body div.ksprs-buybox .wc-qd-separator {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        padding: 4px 0 !important;
    }
    html body div.ksprs-buybox .wc-qd-custom-section {
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }

    .ksprs-buybox .wc-qd-action-buttons { flex-direction: column !important; }
    /* simple row stacks on mobile */
    .ksprs-buybox .ksprs-simple { flex-direction: column; align-items: stretch; gap: 10px; }
    html body div.ksprs-buybox .ksprs-simple .wc-qd-action-buttons { flex-direction: column !important; }
    .ksprs-buybox .ksprs-simple .ksprs-simple-total { text-align: left; }
    .ksprs-usp { gap: 8px; }
    .ksprs-usp-item:not(:last-child) { border-right: none; }
}