/* ==========================================================================
   BP Custom Overrides
   ==========================================================================
   This stylesheet is loaded AFTER theme.css (which is generated from
   template.theme.scss by the platform, including all TorqueUI rules).
   Any rule here wins by CSS source-order, or use !important for
   high-specificity platform selectors.

   STRUCTURE — mirrors the TorqueUI / theme imports:
     1. CSS Custom Properties  (design tokens for runtime theming)
     2. TorqueUI Settings      (buttons, forms, badges, panels, nav, tables)
     3. TorqueUI Colors        (colour overrides for all components)
     4. Base                   (body, typography, memento, selling-points)
     5. Layout                 (corporate bar, header, navigation, footer)
     6. Modules                (product list/entity, cart, checkout, calendar)
     7. Libs                   (select2, fancybox, rzslider, accordion, switch)
     8. Widgets                (search, cookie, slider, logo)

   HOW TO USE
   ----------
   Uncomment any block below and adjust values to override what TorqueUI
   generates.  Prefer changing _vars.scss first (those SCSS variables feed
   into TorqueUI at compile time).  Use this file for anything _vars.scss
   cannot reach.

   Source SCSS files live in:
     source/scss/theme/overrides/

   ========================================================================== */


/* ==========================================================================
   1. CSS Custom Properties — Design Tokens
   ========================================================================== */

/*
:root {
  --bp-dark:          #323239;
  --bp-accent:        #BDA95F;
  --bp-soft:          #606578;
  --bp-bg:            #fafbfc;
  --bp-light:         #f0f3f7;
  --bp-border:        #e0e7ef;
  --bp-accent-dark:   #A6934D;
  --bp-accent-light:  #F7F0DF;
  --bp-success:       #11b725;
  --bp-highlight:     #FFE066;
  --bp-active-text:   #fff;
}
*/


/* ==========================================================================
   2. TorqueUI Settings Overrides
   ==========================================================================
   Source: torqueui/theme_settings + torqueui/custom_theme_settings
   SCSS:   source/scss/theme/overrides/_override_torqueui_settings.scss
   ========================================================================== */

/* -- Buttons -- */
/*
.button,
.button:visited {
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
*/

/* -- Forms -- */
/*
.form-input,
.form-label.input-group-main {
  border-radius: 3px;
}

.form-input:focus,
.form-label.input-group-main:focus {
  box-shadow: 0 0 0 2px rgba(161, 4, 19, .15);
}
*/

/* -- Badges -- */
/*
.badge {
  font-size: 0.75rem;
  border-radius: 2px;
}
*/

/* -- Panels / Cards -- */
/*
.panel-border {
  border-radius: 4px;
}

.panel-rounded {
  border-radius: 8px;
}
*/

/* -- Navigation -- */
/*
.nav-pills > li.active > a {
  border-radius: 4px;
}

.nav-tabs li.active > a {
  border-bottom-width: 2px;
}
*/

/* -- Pagination -- */
/*
.pagination > li a {
  border-radius: 3px;
}
*/


/* ==========================================================================
   3. TorqueUI Color Overrides
   ==========================================================================
   Source: torqueui/theme_colors + torqueui/custom_theme_colors
   SCSS:   source/scss/theme/overrides/_override_torqueui_colors.scss
   ========================================================================== */

/* -- Links -- */
/*
a:visited, a        { color: #606578; }
a:hover             { color: #4a4e65; }
*/

/* -- Headings -- */
/*
h1, .h1, h2, .h2, h3, .h3,
h4, .h4, h5, .h5, h6, .h6  { color: #323239; }
*/

/* -- Buttons -- */
/*
.button, .button:visited                        { background-color: #f0f3f7; color: #323239; }
.button:hover, .button:focus                    { background-color: #e2e7ee; }
.button-primary, .button-primary:visited        { background-color: #BDA95F; color: #fff; }
.button-primary:hover, .button-primary:focus    { background-color: #A6934D; }
*/

/* -- Badges -- */
/*
.badge.badge-succes  { background-color: #11b725; color: #fff; }
.badge.badge-warning { background-color: #f2ea09; color: #000; }
.badge.badge-danger  { background-color: #BDA95F; color: #fff; }
*/

/* -- Panels -- */
/*
.panel-success  { background-color: #e8f9ea; }
.panel-warning  { background-color: #f0f3f7; }
.panel-danger   { background-color: #fde8ea; }
.panel-info     { background-color: #fae7e7; }
.panel-default  { border-color: #e0e7ef; }
*/

/* -- Forms -- */
/*
.form-input { border-color: #e0e7ef; color: #606578; }
*/


/* ==========================================================================
   4. Base Overrides
   ==========================================================================
   Source: theme/base/base, type, memento, form
   SCSS:   source/scss/theme/overrides/_override_base.scss
   ========================================================================== */

/* -- Body & wrapper -- */
/*
body {
  font-family: "Open Sans", sans-serif;
  color: #606578;
  background-color: #fafbfc;
}

.site-wrapper {
  background-color: #fafbfc;
}
*/

/* -- Typography -- */
/*
h1, .h1, h2, .h2, h3, .h3,
h4, .h4, h5, .h5, h6, .h6 {
  font-family: "Open Sans", sans-serif;
}

hr {
  border-color: #e0e7ef;
}
*/

/* -- Memento / frontpage boxes -- */
/*
a.frontpage_box.one   { background-color: #323239; color: #fff; }
a.frontpage_box.two   { background-color: #BDA95F; color: #fff; }
a.frontpage_box.three { background-color: #606578; color: #fff; }
*/

/* -- Selling-points bar -- */
/*
.sellingspoints {
  background-color: #323239;
  border-color: #e0e7ef;
  color: #f0f3f7;
}
*/


/* ==========================================================================
   5. Layout Overrides
   ==========================================================================
   Source: theme/base + torqueui (layout selectors)
   SCSS:   source/scss/theme/overrides/_override_layout.scss
   ========================================================================== */

/* -- Corporate bar -- */
/*
.site-corporate {
  background: #323239;
  color: #fff;
}

.site-corporate a,
.site-corporate .nav-default li a {
  color: rgba(255, 255, 255, .85);
}

.site-corporate a:hover,
.site-corporate .nav-default li a:hover {
  color: #fff;
}
*/

/* -- Header -- */
/*
.site-header {
  background-color: #323239;
}

.site-header .h1.brand {
  color: #323239;
}
*/

/* -- Search widget -- */
/*
.w-search input       { border-color: #e0e7ef; }
.w-search input:hover { border-color: #c8d0db; }
*/

/* -- Cart widget -- */
/*
.quick-cart-link       { color: #323239; }
.quick-cart-link:hover { color: #BDA95F; }
*/

/* -- Main navigation -- */
/*
.site-navigation,
.navigation {
  background-color: #323239;
}

.navigation .navbar a span {
  color: #fff;
}

.navigation ul.nav li:hover span,
.navigation ul.nav li.active span {
  color: #fff;
}

.navigation .dropdown-menu ul li a       { color: #fff; }
.navigation .dropdown-menu ul li a:hover { color: #fff; }
*/

/* -- Footer -- */
/*
.site-footer {
  background-color: #323239;
  color: #fff;
}

.site-footer h4 {
  color: #fff;
}

.footer-social a,
.footer-social .social i {
  color: #fff;
}
*/


/* ==========================================================================
   6. Module Overrides
   ==========================================================================
   Source: theme/modules/*
   SCSS:   source/scss/theme/overrides/_override_modules.scss
   ========================================================================== */

/* -- Product list -- */
/*
.productItem .m-productlist-price    { color: #BDA95F; }
.productItem .m-productlist-discount { color: #BDA95F; }
.productItem .m-productlist-figure   { border-color: #e0e7ef; }
.productItem .m-productlist-item:hover .m-productlist-figure { border-color: #BDA95F; }
*/

/* -- Product entity (detail page) -- */
/*
.m-product-title.page-title { color: #323239; }
.m-product-price             { color: #BDA95F; }
.m-reviews-stars             { color: #BDA95F; }

.m-product-additional-info-tabs li.active a {
  border-bottom-color: #BDA95F;
}

.m-product-transaction-button button.button-primary {
  background-color: #BDA95F;
  color: #fff;
}
*/

/* -- Product filter & sort -- */
/*
.productfilter .multiple_select .checkbox input[type=checkbox]:checked ~ .checkbox-checkmark {
  background-color: #BDA95F;
}
*/

/* -- Cart -- */
/*
.m-cart-salesline-title { color: #323239; }
*/

/* -- Checkout -- */
/*
.m-checkout--stacked .form-input { border-color: #e0e7ef; }
*/

/* -- Calendar -- */
/*
.m-calendar-list .day:hover { background-color: #fae7e7; }
.b-calendar .event > article { border-color: #e0e7ef; }
*/

/* -- Hero slider -- */
/*
.hero-slider-theme .item-caption p.h2 { color: #fff; }
.hero-slider-theme .item-caption p.h4 { color: #fff; }
*/

/* -- Breadcrumbs -- */
/*
.m-breadcrumb a, .m-print a       { color: #606578; }
.m-breadcrumb a:hover, .m-print a:hover { color: #4a4e65; }
*/

/* -- Category sidebar -- */
/*
.b-productcategories-list li > a:hover  { color: #BDA95F; }
.b-productcategories-list li.active > a { color: #BDA95F; font-weight: 600; }
*/


/* ==========================================================================
   7. Library Overrides
   ==========================================================================
   Source: theme/libs/* (select2, fancybox, rzslider, accordion, switch)
   SCSS:   source/scss/theme/overrides/_override_libs.scss
   ========================================================================== */

/* -- Select2 -- */
/*
.select2-container .select2-choice       { border-color: #e0e7ef; }
.select2-container .select2-choice:hover { border-color: #c8d0db; }
.select2-container .select2-choice:focus { border-color: #BDA95F; }
*/

/* -- Fancybox -- */
/*
.fancybox-skin .fancybox-close:hover { color: #BDA95F; }
*/

/* -- Range slider -- */
/*
.rzslider.rzslider .rz-selection { background-color: #BDA95F; }
.rzslider.rzslider .rz-pointer   { background-color: #BDA95F; }
*/

/* -- Accordion -- */
/*
.accordion-btn:hover { color: #BDA95F; }
*/

/* -- Switch toggle -- */
/*
input:checked + .switch-rail { background-color: #BDA95F; }
*/

/* -- Owl Carousel -- */
/*
.owl-page.active span,
.clickable .owl-page:hover span {
  background-color: #BDA95F;
}
*/


/* ==========================================================================
   8. Widget Overrides
   ==========================================================================
   Source: theme/modules/widgets/*
   SCSS:   source/scss/theme/overrides/_override_modules.scss (widgets section)
   ========================================================================== */

/* -- Cookie consent -- */
/*
.w-cookie-form {
  background-color: #323239;
  color: #fff;
}
*/

/* -- Logo -- */
/*
.brand, .brand:hover, .brand:visited, .brand:focus {
  color: #323239;
}
*/


/* ==========================================================================
   9. Checkout — Shopify-style UX
   ==========================================================================
   Goals:
     • Zero-distraction: nav/search/footer hidden on checkout (top.tpl +
       CSS :has() fallback for the footer)
     • Shopify 2-column grid: form left, sticky summary right
     • Flat sections — no nested card boxes, clean section dividers
     • Inline validation: green ✓ on valid filled inputs
     • Compact delivery + payment lists with carrier logos
   DOM: .checkoutFrame.m-checkout > .row > form.checkoutForm
          .stepColumn.column1  (step1 customer info + step3 gift wrap)
          .stepColumn.column2  (step2 delivery      + step4 payment)
          .stepColumn.column3  (step5 order summary)
   ========================================================================== */

/* ─── 9a. Zero-distraction — hide footer/chrome on checkout ─── */
/* Note: nav/search/corporate bar hidden via top.tpl conditionals.
   This is a CSS fallback for the footer and any residual elements. */
body:has(.checkoutFrame.m-checkout) .site-footer,
body:has(.checkoutFrame.m-checkout) footer,
body:has(.checkoutFrame.m-checkout) .m-footer,
body:has(.checkoutFrame.m-checkout) .m-breadcrumb {
  display: none !important;
}

/* Minimal checkout header — just the logo, bordered bottom */
.checkout-header {
  border-bottom: 1px solid var(--bp-light) !important;
  padding: 12px 0 !important;
  background: #fff;
  box-shadow: none !important;
  text-align: center;
}

/* ─── 9b. Checkout page shell ─── */
body:has(.checkoutFrame.m-checkout) {
  background: var(--bp-bg);
}

.checkoutFrame.m-checkout {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 20px;
}

/* ─── 9c. 2-column Shopify-style grid (desktop) ─── */
@media (min-width: 960px) {
  .checkoutFrame.m-checkout .checkoutForm {
    display: grid !important;
    grid-template-columns: 1fr 360px;
    grid-template-rows: auto auto;
    gap: 0 40px;
    align-items: start;
    align-content: start; /* Rows sized by content only — prevents sidebar height from creating gaps */
  }

  .checkoutFrame.m-checkout .stepColumn.column1 {
    width: auto !important;
    float: none !important;
    grid-column: 1;
    grid-row: 1;
  }

  .checkoutFrame.m-checkout .stepColumn.column2 {
    width: auto !important;
    float: none !important;
    display: block !important;
    grid-column: 1;
    grid-row: 2;
  }

  /* Order summary: sticky right sidebar */
  .checkoutFrame.m-checkout .stepColumn.column3 {
    width: auto !important;
    float: none !important;
    grid-column: 2;
    grid-row: 1 / 3;
    position: sticky;
    top: 16px;
  }
}

/* ─── 9d. Flat step sections — no nested card boxes ─── */
.checkoutFrame.m-checkout .panel-border {
  border: none !important;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
  border-bottom: 1px solid var(--bp-light) !important;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 0;
}

/* Order summary sidebar: stays as a card with generous breathing room */
.checkoutFrame.m-checkout .stepColumn.column3 .panel-border {
  border: 1px solid var(--bp-dark) !important;
  border-radius: 10px;
  background: var(--bp-bg);
  padding: 28px 24px;
}

/* Make the order lines list scrollable when there are many products */
.checkoutFrame.m-checkout .stepColumn.column3 #orderLines {
  max-height: 50vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ─── 9e. Step headings ─── */
.checkoutFrame.m-checkout .stepHeader .title {
  margin-bottom: 4px;
}

.checkoutFrame.m-checkout .stepHeader .title .h5 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--bp-dark);
  margin: 0;
  letter-spacing: -0.01em;
}

.checkoutFrame.m-checkout .stepHeader hr {
  margin: 6px 0 16px;
  border-top: 1px solid var(--bp-light);
  border-bottom: none;
}

/* ─── 9f. Form inputs + inline validation ─── */
.checkoutFrame.m-checkout .form-input,
.checkoutFrame.m-checkout .form-select,
.checkoutFrame.m-checkout select {
  border-radius: 6px;
  font-size: 0.938rem;
  color: var(--bp-dark);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background-color: #fff;
}

.checkoutFrame.m-checkout .form-input:focus,
.checkoutFrame.m-checkout .form-select:focus {
  border-color: var(--bp-accent) !important;
  box-shadow: 0 0 0 3px var(--bp-accent-light);
  outline: none;
}

/* Green checkmark on valid, non-empty text inputs (not selects/hidden) */
.checkoutFrame.m-checkout .form-input:not(select):not([type="hidden"]):not(:placeholder-shown):valid {
  border-color: var(--bp-success) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%2311b725'/%3E%3Cpolyline points='4.5%2C8.5 7%2C11 11.5%2C5.5' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 36px;
}

/* Red border on invalid, touched text inputs */
.checkoutFrame.m-checkout .form-input:not(select):not([type="hidden"]):not(:placeholder-shown):invalid {
  border-color: #e53935 !important;
}

/* Required field asterisk — always visible in red */
.checkoutFrame.m-checkout .form-required {
  color: #e53935;
  font-weight: 700;
  margin-left: 2px;
}

/* JS-applied invalid highlight (used by submit validation) */
.checkoutFrame.m-checkout .form-input.bp-invalid,
.checkoutFrame.m-checkout .form-select.bp-invalid {
  border-color: #e53935 !important;
  box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.15) !important;
}

/* Validation error banner — shown above the Approve button */
.checkoutFrame.m-checkout .bp-validation-banner {
  display: block;
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  background: #fde8e8;
  border: 1px solid #e53935;
  color: #b71c1c;
  font-size: 0.875rem;
  font-weight: 600;
}

/* ─── 9g. Primary CTA — full-width, prominent ─── */
.checkoutFrame.m-checkout .button-primary,
.checkoutFrame.m-checkout button[type="submit"].button-primary {
  width: 100%;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 6px;
  background-color: var(--bp-accent);
  color: var(--bp-active-text);
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.checkoutFrame.m-checkout .button-primary:hover {
  background-color: var(--bp-accent-dark);
  transform: translateY(-1px);
}

.checkoutFrame.m-checkout .button-primary:active {
  transform: translateY(0);
}

/* ─── 9h. Delivery options — single outer border, compact rows ─── */
.checkoutFrame.m-checkout .deliveryMethodContainerMain {
  border: 1px solid var(--bp-light);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}

.checkoutFrame.m-checkout .deliveryMethodContainer {
  border: none;
  border-bottom: 1px solid var(--bp-light);
  border-radius: 0;
  padding: 8px 12px;
  margin-bottom: 0;
  background: transparent;
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.checkoutFrame.m-checkout .deliveryMethodContainer:last-child {
  border-bottom: none;
}

.checkoutFrame.m-checkout .deliveryMethodContainer:hover {
  background-color: var(--bp-accent-light);
}

/* Remove default fieldset borders inside options */
.checkoutFrame.m-checkout .deliveryMethodContainer fieldset,
.checkoutFrame.m-checkout .paymentMethodContainer fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

/* Name + price inline */
.checkoutFrame.m-checkout .deliveryMethodContainer .input-group-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
}

.checkoutFrame.m-checkout .deliveryMethodName {
  font-weight: 600;
  color: var(--bp-dark);
  flex: 1;
}

.checkoutFrame.m-checkout .deliveryMethodContainer .error_text {
  display: inline-block !important;
  font-size: 0.82rem;
  color: var(--bp-soft);
  white-space: nowrap;
}

.checkoutFrame.m-checkout .deliveryMethodDescription {
  flex-basis: 100%;
  font-size: 0.78rem;
  color: var(--bp-soft);
  line-height: 1.3;
  margin-top: 1px;
}

/* ─── 9i. Payment options — same grouped border approach ─── */
.checkoutFrame.m-checkout .paymentMethodContainerMain {
  border: 1px solid var(--bp-light);
  border-radius: 8px;
  overflow: hidden;
}

.checkoutFrame.m-checkout .paymentMethodContainer {
  border: none;
  border-bottom: 1px solid var(--bp-light);
  border-radius: 0;
  padding: 8px 12px;
  margin-bottom: 0;
  background: transparent;
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.checkoutFrame.m-checkout .paymentMethodContainer:last-child {
  border-bottom: none;
}

.checkoutFrame.m-checkout .paymentMethodContainer:hover {
  background-color: var(--bp-accent-light);
}

/* ─── 9j. Order summary sidebar ─── */
/* Comfortable spacing on each product line */
.checkoutFrame.m-checkout .orderSummary .orderLine {
  border-bottom: 1px solid var(--bp-light);
  padding: 12px 0;
}

.checkoutFrame.m-checkout .orderSummary .orderLine article {
  margin: 0;
}

/* Override theme's responsive col-* grid inside the sidebar — use flexbox for clean layout */
.checkoutFrame.m-checkout .orderSummary .orderLineTitle > .row {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 6px;
}

/* Quantity: compact, fixed-width, muted */
.checkoutFrame.m-checkout .orderSummary .orderLineTitle .col-s-1 {
  flex: 0 0 auto;
  width: auto !important;
  padding: 0 !important;
  color: var(--bp-soft);
  font-size: 0.85rem;
  min-width: 28px;
}

/* Content wrapper: fills remaining space */
.checkoutFrame.m-checkout .orderSummary .orderLineTitle .col-s-3 {
  flex: 1 1 0;
  width: auto !important;
  min-width: 0;
  padding: 0 !important;
}

/* Inner row (title + price): flex with title growing, price to right */
.checkoutFrame.m-checkout .orderSummary .orderLineTitle .col-s-3 > .row {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 6px;
}

/* Title: grows, wraps text gracefully */
.checkoutFrame.m-checkout .orderSummary .orderLineTitle .col-s-3 .col-s-4:first-child {
  flex: 1 1 0;
  width: auto !important;
  min-width: 0;
  padding: 0 !important;
  line-height: 1.4;
  font-size: 0.875rem;
}

/* Price: compact, right-aligned, no shrink */
.checkoutFrame.m-checkout .orderSummary .orderLineTitle .col-s-3 .col-s-4:last-child {
  flex: 0 0 auto;
  width: auto !important;
  padding: 0 !important;
  text-align: right;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* Pull-right inside price: reset for flexbox */
.checkoutFrame.m-checkout .orderSummary .cart-total-value.pull-right {
  float: none !important;
  display: block;
  text-align: right;
}

/* Totals table: comfortable row height */
.checkoutFrame.m-checkout .orderSummary table.table {
  margin-top: 16px;
  width: 100%;
  table-layout: fixed;
}

.checkoutFrame.m-checkout .orderSummary table.table td {
  padding: 6px 0;
  vertical-align: middle;
}

/* First column: label — takes remaining space */
.checkoutFrame.m-checkout .orderSummary table.table td:first-child {
  width: 60%;
}

/* Second column: amount — right-aligned, no wrap.
   Target both .text-right (totals table) and :last-child (any table) */
.checkoutFrame.m-checkout .orderSummary table.table td.text-right,
.checkoutFrame.m-checkout .orderSummary table.table td:last-child {
  text-align: right !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Packet product – stepped selection on product page ── */
.m-packet-product .m-packet-step.is-locked .m-packet-option-btn {
  cursor: default;
}
/* Hide any Select2 that the platform JS may inject inside our custom UI */
.m-packet-product .select2-container {
  display: none !important;
}

/* Bundle / packet product sub-list ("Produkter i pakken").
   The platform renders these as a <table> with inline padding:0;border:0 on <td>.
   Override those inline styles to give the sub-items breathing room. */
.checkoutFrame.m-checkout .orderSummary .orderLineTitle table td {
  padding: 2px 4px !important;
  border: 0 !important;
  font-size: 0.8rem;
  color: var(--bp-soft);
  vertical-align: top;
}

.checkoutFrame.m-checkout .orderSummary .orderLineTitle table td:first-child {
  width: auto !important;
  padding-right: 8px !important;
  font-weight: 600;
  color: var(--bp-dark);
  white-space: nowrap;
}

.checkoutFrame.m-checkout .orderSummary .orderLineTitle table td:not(:first-child) {
  white-space: normal;
}

/* Indent the entire bundle sub-list under its parent product */
.checkoutFrame.m-checkout .orderSummary .orderLineTitle table {
  width: 100%;
  margin-top: 6px;
  border-left: 2px solid var(--bp-light);
  padding-left: 6px;
  table-layout: auto;
}

.checkoutFrame.m-checkout .orderSummary .orderLineSum td {
  font-size: 1.05rem;
  border-top: 2px solid var(--bp-dark);
  padding-top: 12px;
  color: var(--bp-dark);
  font-weight: 700;
}

.checkoutFrame.m-checkout .orderSummary .orderLineDelivery td,
.checkoutFrame.m-checkout .orderSummary .orderLineSubTotal td,
.checkoutFrame.m-checkout .orderSummary .orderLineVat td,
.checkoutFrame.m-checkout .orderSummary .orderLinePayment td {
  color: var(--bp-soft);
  font-size: 0.875rem;
}

/* Heading inside summary sidebar */
.checkoutFrame.m-checkout .stepColumn.column3 .stepHeader {
  margin-bottom: 16px;
}

.checkoutFrame.m-checkout .stepColumn.column3 .stepHeader .title .h5 {
  font-size: 1rem;
}

/* ─── 9k. Carrier logos — text-detection (via JS .carrier-* classes) ─── */
/* JS in bodyBottom.js.tpl adds .carrier-gls / .carrier-postnord etc.
   CSS :has() selectors are kept as a fallback for browsers that support it. */

/* Shared pseudo-element base */
.checkoutFrame.m-checkout .carrier-gls .deliveryMethodName::after,
.checkoutFrame.m-checkout .carrier-postnord .deliveryMethodName::after,
.checkoutFrame.m-checkout .carrier-klikhent .deliveryMethodName::after,
.checkoutFrame.m-checkout .deliveryMethodContainer:has(.deliveryMethodRadio.gls) .deliveryMethodName::after,
.checkoutFrame.m-checkout .deliveryMethodContainer:has(.deliveryMethodRadio.postdk) .deliveryMethodName::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  height: 18px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* GLS: yellow badge */
.checkoutFrame.m-checkout .carrier-gls .deliveryMethodName::after,
.checkoutFrame.m-checkout .deliveryMethodContainer:has(.deliveryMethodRadio.gls) .deliveryMethodName::after {
  width: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 18'%3E%3Crect width='44' height='18' rx='2' fill='%23FFB900'/%3E%3Ctext x='22' y='13' font-family='Arial%2Csans-serif' font-size='10' font-weight='900' fill='%23003087' text-anchor='middle'%3EGLS%3C/text%3E%3C/svg%3E") no-repeat center / contain;
}

/* PostNord: blue badge */
.checkoutFrame.m-checkout .carrier-postnord .deliveryMethodName::after,
.checkoutFrame.m-checkout .deliveryMethodContainer:has(.deliveryMethodRadio.postdk) .deliveryMethodName::after {
  width: 72px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 18'%3E%3Crect width='72' height='18' rx='2' fill='%23005DA8'/%3E%3Ctext x='36' y='13' font-family='Arial%2Csans-serif' font-size='8' font-weight='700' fill='%23fff' text-anchor='middle'%3EPostNord%3C/text%3E%3C/svg%3E") no-repeat center / contain;
}

/* Klik & Hent (Click & Collect): green badge */
.checkoutFrame.m-checkout .carrier-klikhent .deliveryMethodName::after {
  width: 72px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 18'%3E%3Crect width='72' height='18' rx='2' fill='%2311b725'/%3E%3Ctext x='36' y='13' font-family='Arial%2Csans-serif' font-size='7' font-weight='700' fill='%23fff' text-anchor='middle'%3EKLIK%20%26%20HENT%3C/text%3E%3C/svg%3E") no-repeat center / contain;
}

/* ─── 9l. Carrier accordion groups (injected by JS) ─── */
.checkoutFrame.m-checkout .bp-carrier-group {
  border: 1px solid var(--bp-dark);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}

.checkoutFrame.m-checkout .bp-carrier-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  background: var(--bp-bg);
  list-style: none;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--bp-dark);
  border-bottom: 1px solid transparent;
  transition: background-color 0.15s ease;
  user-select: none;
}

.checkoutFrame.m-checkout .bp-carrier-group > summary::-webkit-details-marker {
  display: none;
}

.checkoutFrame.m-checkout .bp-carrier-group[open] > summary {
  border-bottom-color: var(--bp-dark);
  background: #fff;
}

.checkoutFrame.m-checkout .bp-carrier-group > summary:hover {
  background-color: var(--bp-accent-light);
}

/* Carrier logo in group header */
.checkoutFrame.m-checkout .bp-carrier-group-header .bp-carrier-name::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  height: 18px;
  border-radius: 2px;
  flex-shrink: 0;
}

.checkoutFrame.m-checkout .bp-carrier-group--gls .bp-carrier-name::after {
  width: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 18'%3E%3Crect width='44' height='18' rx='2' fill='%23FFB900'/%3E%3Ctext x='22' y='13' font-family='Arial%2Csans-serif' font-size='10' font-weight='900' fill='%23003087' text-anchor='middle'%3EGLS%3C/text%3E%3C/svg%3E") no-repeat center / contain;
}

.checkoutFrame.m-checkout .bp-carrier-group--postnord .bp-carrier-name::after {
  width: 72px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 18'%3E%3Crect width='72' height='18' rx='2' fill='%23005DA8'/%3E%3Ctext x='36' y='13' font-family='Arial%2Csans-serif' font-size='8' font-weight='700' fill='%23fff' text-anchor='middle'%3EPostNord%3C/text%3E%3C/svg%3E") no-repeat center / contain;
}

.checkoutFrame.m-checkout .bp-carrier-group--klikhent .bp-carrier-name::after {
  width: 72px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 18'%3E%3Crect width='72' height='18' rx='2' fill='%2311b725'/%3E%3Ctext x='36' y='13' font-family='Arial%2Csans-serif' font-size='7' font-weight='700' fill='%23fff' text-anchor='middle'%3EKLIK%20%26%20HENT%3C/text%3E%3C/svg%3E") no-repeat center / contain;
}

/* Note: .bp-carrier-chevron and .bp-step-chevron share a single CSS rule in 9p */

/* Methods wrapper inside group: no extra outer border */
.checkoutFrame.m-checkout .bp-carrier-methods {
  background: #fff;
}

.checkoutFrame.m-checkout .bp-carrier-methods .deliveryMethodContainer {
  border-left: none;
  border-right: none;
  border-radius: 0;
}

.checkoutFrame.m-checkout .bp-carrier-methods .deliveryMethodContainer:first-child {
  border-top: none;
}

.checkoutFrame.m-checkout .bp-carrier-methods .deliveryMethodContainer:last-child {
  border-bottom: none;
}

/* ─── 9m. Confirmation page ─── */
.checkoutApproved {
  background: #fff;
  min-height: 60vh;
  padding: 40px 16px 80px;
}

.m-checkout-approved {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

/* Success icon ring — SVG checkmark for cross-browser reliability */
.m-checkout-approved-header::before {
  content: '';
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--bp-success);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 42px 42px;
  margin: 0 auto 20px;
}

.m-checkout-approved-headline {
  color: var(--bp-dark);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

/* Confirmation text below headline */
.m-checkout-approved.text {
  color: var(--bp-soft);
  font-size: 0.95rem;
  margin-bottom: 28px;
  line-height: 1.6;
}

/* Order detail area — no card, no border, no shadow */
.m-checkout-approved .m-order {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 28px 0;
  text-align: left;
  margin-bottom: 0;
}

/* Undo any platform card styles on nested order elements */
.m-checkout-approved [class*="order"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Order tables inside the confirmation section */
.m-checkout-approved table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  table-layout: auto;
}

.m-checkout-approved table th,
.m-checkout-approved table td {
  padding: 10px 4px;
  border: none;
  vertical-align: middle;
  color: var(--bp-dark);
  text-align: left;
}

.m-checkout-approved table th {
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bp-soft);
  padding-bottom: 10px;
}

/* Amount/price column — right-aligned, no-wrap, fixed min-width */
.m-checkout-approved table td:last-child,
.m-checkout-approved table th:last-child {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 80px;
}

/* Grand total row: bold + extra top spacing only — no border */
.m-checkout-approved table tfoot td,
.m-checkout-approved table tr.total td,
.m-checkout-approved table tr.grandTotal td {
  font-weight: 700;
  font-size: 1rem;
  border: none;
  padding-top: 18px;
}

/* Continue shopping button */
.m-checkout-approved .button,
.m-checkout-approved a.button {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 32px;
  background: var(--bp-accent);
  color: #fff;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.15s;
}

.m-checkout-approved .button:hover,
.m-checkout-approved a.button:hover {
  background: var(--bp-accent-dark);
}

/* ─── 9n. Trust bar ─── */
.bp-checkout-trust {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 12px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--bp-light);
}

.bp-checkout-trust span {
  color: var(--bp-soft);
  font-size: 0.82rem;
  white-space: nowrap;
}

.bp-checkout-trust i {
  margin-right: 5px;
  color: var(--bp-accent);
}

@media (max-width: 600px) {
  .bp-checkout-trust {
    flex-wrap: wrap;
    gap: 6px 16px;
    justify-content: center;
  }
}

/* ─── 9o. Mobile responsive ─── */
@media (max-width: 959px) {
  .checkoutFrame.m-checkout {
    padding: 12px 8px;
  }

  .checkoutFrame.m-checkout .stepColumn.column1,
  .checkoutFrame.m-checkout .stepColumn.column2,
  .checkoutFrame.m-checkout .stepColumn.column3 {
    width: 100% !important;
    float: none !important;
  }

  /* Stack order summary above the form on mobile */
  .checkoutFrame.m-checkout .checkoutForm {
    display: flex !important;
    flex-direction: column !important;
  }

  .checkoutFrame.m-checkout .stepColumn.column3 {
    /* Summary renders last in mobile (after form steps) */
    order: 3;
    margin-top: 16px;
  }

  /* Sticky approve button at viewport bottom on mobile */
  .checkoutFrame.m-checkout .buttonContainer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: #fff;
    padding: 12px 16px;
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.12);
    border-top: 1px solid var(--bp-light);
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .checkoutFrame.m-checkout .buttonContainer .button-primary {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  /* Back link stays compact — only as wide as its text */
  .checkoutFrame.m-checkout .buttonContainer a.button {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Add bottom padding so the sticky bar does not cover content */
  .checkoutFrame.m-checkout .checkoutForm {
    padding-bottom: 80px !important;
  }
}

/* ─── 9p. Step accordions (JS-injected <details> wrappers) ─── */
.checkoutFrame.m-checkout .bp-step-accordion {
  border: 1px solid var(--bp-dark);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}

/* Strip all panel padding/margin when inside an accordion (accordion handles spacing) */
.checkoutFrame.m-checkout .bp-step-accordion > .panel-border {
  border: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.checkoutFrame.m-checkout .bp-step-accordion > summary.bp-step-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  cursor: pointer;
  background: var(--bp-bg);
  font-weight: 700;
  font-size: 1rem;
  color: var(--bp-dark);
  letter-spacing: -0.01em;
  user-select: none;
}

/* Remove the default triangle marker in all browsers */
.checkoutFrame.m-checkout .bp-step-accordion > summary.bp-step-summary::-webkit-details-marker {
  display: none;
}

.checkoutFrame.m-checkout .bp-step-accordion > summary.bp-step-summary::marker {
  display: none;
}

.checkoutFrame.m-checkout .bp-step-accordion[open] > summary.bp-step-summary {
  background: #fff;
  border-bottom: 1px solid var(--bp-dark);
}

.checkoutFrame.m-checkout .bp-step-accordion > summary.bp-step-summary:hover {
  background-color: var(--bp-accent-light);
}

/* CSS border-based chevron — works on all browsers/fonts */
.checkoutFrame.m-checkout .bp-step-chevron,
.checkoutFrame.m-checkout .bp-carrier-chevron {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--bp-dark);
  border-bottom: 2px solid var(--bp-dark);
  transform: rotate(45deg); /* points down = can expand */
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-bottom: 3px; /* optical vertical centering */
}

/* When open: rotate to point upward = can collapse */
.checkoutFrame.m-checkout .bp-step-accordion[open] > summary.bp-step-summary .bp-step-chevron,
.checkoutFrame.m-checkout .bp-carrier-group[open] > summary .bp-carrier-chevron {
  transform: rotate(-135deg);
  margin-bottom: -3px;
}


/* ==========================================================================
   7b. Product stock — JS-rendered variant info (entity-js-infopanels.tpl)
   ==========================================================================
   When a variant is selected the platform replaces the info-panel content
   via jsRender using these classes.  The server-side entity-stock.tpl uses
   m-product-* classes which are already styled in theme.css; these rules
   cover the client-side equivalents so stock status displays correctly
   after variant selection.
   ========================================================================== */

/* Panel-danger inside variant info panel — match the panel-success override
   (transparent bg, no border) so the out-of-stock state looks consistent. */
.variantInfoPanel .panel-danger,
.m-product-information .panel-danger {
  background: transparent;
  border: 0;
}

.variantInfoPanel .panel-danger .panel-body,
.m-product-information .panel-danger .panel-body {
  padding: 0;
  text-align: right;
  color: #3d3d38;
}

/* --- Stock icon (onStock / noStock) --- */
.product-stock-icon.selected-stock-icon {
  display: inline;
  margin-right: 2px;
}

.product-stock-icon.selected-stock-icon.onStock {
  color: var(--bp-success, #11b725);
}

.product-stock-icon.selected-stock-icon.noStock {
  color: var(--bp-accent, #BDA95F);
}

/* --- Stock value (count) --- */
.product-stock-value.selected-stock-value {
  margin-right: 2px;
}

/* --- Stock / delivery text --- */
.product-stock-text.selected-stock-text {
  display: inline;
}

/* The platform noStock <span> is not closed before the text span, so the
   text ends up nested inside .noStock.  Ensure it stays readable. */
.product-stock-icon.selected-stock-icon.noStock .product-stock-text {
  color: #3d3d38;
}