/*
 * Cart, Checkout and Mini-Cart presentation.
 *
 * WooCommerce blocks remain the functional layer. This file only supplies
 * Nyttedyret layout, states and responsive presentation.
 */

.nytte-commerce-masthead {
  background: rgb(246 244 236 / 96%);
  border-bottom: 1px solid var(--nytte-border);
  margin: 0;
  position: sticky;
  top: 0;
  z-index: 60;
}

.admin-bar .nytte-commerce-masthead {
  top: 32px;
}

.nytte-commerce-masthead__inner {
  align-items: center;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
  margin-inline: auto;
  max-width: var(--nytte-content);
  min-height: 5.5rem;
  padding-inline: clamp(1rem, 3vw, 1.5rem);
}

.nytte-commerce-logo {
  justify-self: start;
}

.nytte-commerce-steps ol {
  align-items: center;
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nytte-commerce-steps li {
  align-items: center;
  color: #556550;
  display: flex;
  font-size: 0.875rem;
  font-weight: 650;
  gap: 0.5rem;
  white-space: nowrap;
}

.nytte-commerce-steps li:not(:last-child)::after {
  background: #d5d2c0;
  content: "";
  height: 1px;
  margin-inline: 0.8rem;
  width: clamp(1.25rem, 3vw, 2.25rem);
}

.nytte-commerce-steps li > span,
.nytte-commerce-steps li > a > span {
  align-items: center;
  border: 1.5px solid #c9cfbf;
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 1.5rem;
  font-size: 0.75rem;
  height: 1.5rem;
  justify-content: center;
}

.nytte-commerce-steps li > a {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: 0.5rem;
  text-decoration: none;
}

.nytte-commerce-steps li.is-current,
.nytte-commerce-steps li.is-complete {
  color: var(--nytte-forest);
}

.nytte-commerce-steps li.is-current > span,
.nytte-commerce-steps li.is-complete > a > span {
  background: var(--nytte-forest);
  border-color: var(--nytte-forest);
  color: var(--nytte-white);
}

.nytte-commerce-secure {
  align-items: center;
  color: var(--nytte-forest);
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 700;
  gap: 0.5rem;
  justify-self: end;
}

.nytte-commerce-secure i {
  background: var(--nytte-leaf);
  border-radius: 50%;
  display: block;
  height: 0.5rem;
  width: 0.5rem;
}

.nytte-commerce-page {
  background: var(--nytte-cream);
  margin: 0;
  min-height: 65vh;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 1.5rem)
    clamp(4rem, 8vw, 7rem);
}

.nytte-commerce-page > * {
  box-sizing: border-box;
}

.nytte-commerce-intro,
.nytte-commerce-content,
.nytte-commerce-trust,
.nytte-checkout-assurance {
  margin-inline: auto !important;
  max-width: var(--nytte-content) !important;
  width: 100%;
}

.nytte-commerce-intro {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem) !important;
}

.nytte-commerce-intro h1 {
  color: var(--nytte-forest);
  font-size: clamp(2.375rem, 3vw, 2.5rem);
  letter-spacing: -0.055em;
  line-height: 0.98;
  margin: 0 0 0.6rem;
}

.nytte-commerce-intro p {
  color: #4a5844;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  margin: 0;
}

/* Måleren stod tidligere med en fast bredde på 610 px uanset viewport, så den
   hang løsrevet i venstre side af en 1248 px kolonne. Den følger nu sin
   container; kun den kompakte variant i minikurven beholder en øvre grænse. */
.nytte-delivery-meter {
  background: var(--nytte-white);
  border: 1px solid var(--nytte-border);
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgb(23 64 42 / 5%);
  box-sizing: border-box;
  margin-top: 1.25rem;
  /* WordPress' constrained layout klemmer ellers måleren ned til
     theme.json's contentSize på 760 px inde i en 1248 px kurvekolonne. */
  max-width: none;
  padding: 0.9rem 1rem;
  width: 100%;
}

.nytte-delivery-meter--compact {
  max-width: 36rem;
}

.nytte-delivery-meter__row {
  align-items: center;
  color: var(--nytte-forest);
  display: flex;
  font-size: 0.8125rem;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 0.55rem;
}

.nytte-delivery-meter__row strong {
  font-weight: 750;
}

.nytte-delivery-meter__row span {
  color: var(--nytte-muted);
  flex: 0 0 auto;
}

.nytte-delivery-meter__progress {
  appearance: none;
  background: #e4e8dd;
  border: 0;
  border-radius: 999px;
  display: block;
  height: 0.5rem;
  overflow: hidden;
  width: 100%;
}

.nytte-delivery-meter__progress::-webkit-progress-bar {
  background: #e4e8dd;
  border-radius: 999px;
}

.nytte-delivery-meter__progress::-webkit-progress-value {
  background: var(--nytte-leaf);
  border-radius: 999px;
}

.nytte-delivery-meter__progress::-moz-progress-bar {
  background: var(--nytte-leaf);
  border-radius: 999px;
}

.nytte-delivery-meter.is-fallback .nytte-delivery-meter__progress {
  opacity: 0.5;
}

/*
 * Shared WooCommerce block surfaces
 */
.nytte-commerce-content .wc-block-cart,
.nytte-commerce-content .wc-block-checkout {
  margin: 0;
  max-width: none;
  padding: 0;
}

.nytte-commerce-content .wc-block-components-sidebar-layout {
  align-items: flex-start;
  gap: clamp(1.5rem, 3vw, 2rem);
}

.nytte-commerce-content
  .wc-block-components-sidebar-layout
  .wc-block-components-main {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

@media (min-width: 981px) {
  .nytte-commerce-content .wc-block-components-sidebar-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 380px;
  }

  .nytte-commerce-content
    .wc-block-components-sidebar-layout
    .wc-block-components-main {
    grid-column: 1;
    grid-row: 1;
    width: auto !important;
  }

  .nytte-commerce-content .wc-block-components-sidebar {
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    width: auto !important;
  }
}

.nytte-commerce-content .wc-block-components-sidebar {
  background: var(--nytte-white);
  /* 1,5 px som mockuppens »Din ordre«-kort. */
  border: 1.5px solid var(--nytte-border);
  border-radius: 1.375rem;
  box-shadow: 0 12px 32px rgb(23 64 42 / 7%);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  position: sticky;
  top: 7.25rem;
}

.nytte-commerce-content .wc-block-components-title,
.nytte-commerce-content .wc-block-components-checkout-step__title,
.nytte-commerce-content .wc-block-components-totals-wrapper h2,
.nytte-commerce-content .wc-block-components-order-summary__button-text {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.nytte-commerce-content .wc-block-components-button {
  border: 0;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 750;
  min-height: 3.35rem;
  transition:
    background var(--nytte-transition),
    transform var(--nytte-transition);
}

.nytte-commerce-content .wc-block-components-button:hover {
  transform: translateY(-1px);
}

.nytte-commerce-content .wc-block-components-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

/* Mængdevælgerens talfelt er undtaget: det bor i en 44 px pille med egen
   ramme, og formularreglens 52 px minimumshøjde sprænger pillen. */
.nytte-commerce-content
  :where(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"]:not(.wc-block-components-quantity-selector__input),
    select,
    textarea
  ) {
  /* Mockuppens felter er hvide (Checkout.dc.html: background #FFFFFF) —
     ejeren bad 2026-08-16 om samme her; før stod de i creme #fbfaf5. */
  background: var(--nytte-white) !important;
  border: 1.5px solid #d5d2c0 !important;
  border-radius: 0.75rem !important;
  min-height: 3.25rem;
}

.nytte-commerce-content
  :where(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"]:not(.wc-block-components-quantity-selector__input),
    select,
    textarea
  ):focus {
  border-color: var(--nytte-leaf) !important;
  box-shadow: 0 0 0 2px rgb(46 107 65 / 14%) !important;
  outline: 0 !important;
}

.nytte-commerce-content .wc-block-components-text-input label,
.nytte-commerce-content .wc-block-components-combobox .components-base-control__label,
.nytte-commerce-content .wc-block-components-form .wc-block-components-checkbox__label {
  color: #4a5844;
}

.nytte-commerce-content .wc-block-components-notice-banner {
  border: 1px solid #c8d9c4;
  border-radius: 0.875rem;
}

/*
 * Filled cart
 */
.nytte-cart-page .wc-block-cart-items {
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 0.85rem !important;
  margin-top: -0.85rem;
}

/* Kolonneoverskrifterne (Produkt/Antal/I alt) skubbede det første varekort
   ~54 px ned, så venstre kolonne begyndte lavere end opsummeringskortet —
   det tomrum, ejeren meldte. Mockuppen har ingen kolonneoverskrifter;
   skærmlæsere har fortsat tabellens egen skjulte billedtekst. */
.nytte-cart-page .wc-block-cart-items thead {
  display: none;
}

.nytte-cart-page .wc-block-cart-items__row td {
  /* !important: WooCommerces cart.css nulstiller med background: none
     !important, saa kortene stod gennemsigtige paa kalkbunden. */
  background: var(--nytte-white) !important;
  border-bottom: 1px solid var(--nytte-border) !important;
  border-top: 1px solid var(--nytte-border) !important;
  padding-block: 1.25rem !important;
}

.nytte-cart-page .wc-block-cart-items__row td:first-child {
  border-left: 1px solid var(--nytte-border) !important;
  border-radius: 1.25rem 0 0 1.25rem;
  padding-left: 1.25rem !important;
}

.nytte-cart-page .wc-block-cart-items__row td:last-child {
  border-radius: 0 1.25rem 1.25rem 0;
  border-right: 1px solid var(--nytte-border) !important;
  padding-right: 1.25rem !important;
}

/* Ingen plade bag billedet: kortet er hvidt, og produktbillederne har selv
   lys baggrund. Pladen #edf3e9 gav en synlig kant om billeder med indbagt
   hvid bund. */
.nytte-cart-page .wc-block-cart-item__image {
  background: transparent;
  border-radius: 0.875rem;
  overflow: hidden;
}

.nytte-cart-page .wc-block-cart-item__image img {
  aspect-ratio: 1;
  border-radius: 14px;
  height: auto;
  max-width: 110px;
  object-fit: contain;
  width: 100%;
}

/* Skeletindlæsningen: før React hydrerer, står WooCommerces pladsholder i
   billedcellen med padding-hacket (inline `height: 0` + procent-padding,
   der beregnes af CELLENS bredde på ~466 px) — varekortene stod som
   kæmpekasser i et par sekunder. Hverken max-height eller aspect-ratio
   bider på padding-højde, så padding nulstilles, og højden sættes fast med
   `!important` mod inline-stilen. Tekstbjælkerne holdes under loftet. */
.nytte-cart-page .wc-block-cart-items .wc-block-components-skeleton__element {
  max-height: 110px;
}

.nytte-cart-page .wc-block-cart-items .wc-block-cart-item__image .wc-block-components-skeleton__element {
  border-radius: 14px;
  height: 110px !important;
  max-width: 110px;
  padding: 0 !important;
  width: 110px;
}

.nytte-cart-page .wc-block-components-product-name {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 800;
  line-height: 1.2;
}

.nytte-cart-page .wc-block-components-product-metadata,
.nytte-cart-page .wc-block-components-product-details {
  color: #4a5844;
  font-size: 0.8125rem;
}

/* CH-19: mockuppens kurvlinje viser kun linjetotalen ({{ line.sum }} kr.).
   WooCommerce renderer derudover stykprisen under produktnavnet, og uden
   mærkat kan kunden ikke skelne de to — med ét stk. er de identiske. Antal
   fremgår allerede eksplicit af antalsvælgeren. Selektoren skal slå
   WooCommerce' egen `table.wc-block-cart-items ... { display: flex }`. */
.nytte-cart-page table.wc-block-cart-items .wc-block-cart-item__prices {
  display: none;
}

.nytte-cart-page .wc-block-cart-item__prices,
.nytte-cart-page .wc-block-components-product-price {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.125rem;
  font-weight: 800;
}

/* Linjetotalen er 22 px i mockuppen. */
.nytte-cart-page .wc-block-cart-item__total .wc-block-components-product-price {
  font-size: 1.375rem;
}

/* Pillen er et flex-item, og WooCommerce lader den krympe. De to knapper har
   min-width: 2.5rem og krymper ikke, så indholdet fyldte 121 px i en 107 px
   ramme, og plusknappen lå 14 px uden for. Pillen skal aldrig være smallere
   end sit eget indhold. */
.nytte-cart-page .wc-block-components-quantity-selector {
  border: 1px solid var(--nytte-border);
  border-radius: 999px;
  flex-shrink: 0;
  height: 2.75rem;
  min-width: fit-content;
}

.nytte-cart-page .wc-block-components-quantity-selector input {
  font-weight: 750;
}

.nytte-cart-page .wc-block-components-quantity-selector button {
  min-height: 2.75rem;
  min-width: 2.5rem;
}

.nytte-cart-page .wc-block-cart-item__remove-link {
  color: var(--nytte-muted) !important;
  font-size: 0.8125rem !important;
  text-decoration: underline;
}

.nytte-cart-page .wc-block-cart__submit-button {
  background: var(--nytte-action) !important;
  color: var(--nytte-white) !important;
}

.nytte-cart-page .wc-block-cart__submit-button:hover {
  background: #a93124 !important;
}

.nytte-cart-page .wc-block-components-totals-coupon__button {
  background: var(--nytte-forest) !important;
  color: var(--nytte-white) !important;
  min-height: 2.8rem;
}

.nytte-cart-page .wc-block-components-totals-item__label,
.nytte-cart-page .wc-block-components-totals-item__value {
  color: #344431;
}

.nytte-cart-page .wc-block-components-totals-footer-item {
  border-top: 1px solid var(--nytte-border);
  margin-top: 0.5rem;
  padding-top: 1rem;
}

.nytte-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.nytte-cart-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.35rem;
  font-weight: 850;
}

.nytte-cart-page .wp-block-woocommerce-cart-cross-sells-block {
  margin-top: 2rem;
}

.nytte-cart-page .wp-block-woocommerce-cart-cross-sells-block > div > h2 {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.5rem;
}

/*
 * Empty cart
 */
.nytte-cart-page .wp-block-woocommerce-empty-cart-block {
  background: var(--nytte-white);
  border: 1px solid var(--nytte-border);
  border-radius: 1.5rem;
  box-shadow: 0 12px 32px rgb(23 64 42 / 6%);
  padding: clamp(2rem, 6vw, 4rem);
}

.nytte-cart-page .wc-block-cart__empty-cart__title {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: -0.045em;
}

.nytte-cart-page .wc-block-cart__empty-cart__title::before {
  background: #e4eddf;
  border-radius: 50%;
  color: var(--nytte-forest);
}

.nytte-cart-page .wp-block-woocommerce-empty-cart-block .is-style-dots {
  color: var(--nytte-leaf);
}

.nytte-empty-cart-rescue[hidden] {
  display: none;
}

.nytte-empty-cart-rescue {
  align-items: center;
  background: var(--nytte-forest);
  border-radius: 1.5rem;
  color: #dce9d7;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.4fr) auto;
  margin: 0 auto 1.5rem;
  max-width: var(--nytte-content);
  padding: clamp(1.4rem, 4vw, 2.25rem);
  width: 100%;
}

.nytte-empty-cart-rescue .nytte-kicker {
  background: rgb(255 255 255 / 12%);
  color: #a9d0b0;
}

.nytte-empty-cart-rescue h2 {
  color: var(--nytte-white);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0.55rem 0 0.65rem;
}

.nytte-empty-cart-rescue p:not(.nytte-kicker) {
  line-height: 1.6;
  margin: 0;
  max-width: 680px;
}

.nytte-empty-cart-rescue__actions {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 210px;
}

.nytte-empty-cart-rescue__actions .nytte-button:not(.nytte-button--action) {
  background: var(--nytte-white);
  color: var(--nytte-forest) !important;
}

.nytte-empty-cart-rescue__actions .nytte-button:not(.nytte-button--action):hover {
  background: var(--nytte-pale);
}

/*
 * Checkout
 */
.nytte-checkout-page .wc-block-components-checkout-step {
  background: var(--nytte-white);
  /* 1,5 px som mockuppens sektionskort, så kanttonen er ens hele vejen. */
  border: 1.5px solid var(--nytte-border);
  border-radius: 1.375rem;
  margin-bottom: 1rem;
  padding: clamp(1.25rem, 3vw, 1.8rem) !important;
}

.nytte-checkout-page .wc-block-components-checkout-step::after {
  display: none;
}

.nytte-checkout-page .wc-block-components-checkout-step__heading {
  margin-bottom: 1.1rem;
}

.nytte-checkout-page .wc-block-components-checkout-step__title {
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.2;
}

.nytte-checkout-page .wc-block-components-checkout-step__description {
  color: var(--nytte-muted);
  font-size: 0.875rem;
}

/* Kassens metodekort (levering + betaling) efter mockuppens samspil
   (Checkout.dc.html linje 92-116): uvalgte rækker har 1,5 px lys kant på
   hvid flade; den AKTIVE række har 2 px mørkegrøn kant, der matcher sin
   lysegrønne flade. Ejerens forløb 2026-08-16: Woos »highlight-checked«
   stablede en næsten sort inset-ring og en tvungen 1 px-kant ovenpå, så
   den aktive tilstand så brudt ud; et mellemtrin uden kanter overhovedet
   (CH-69) manglede mockuppens indramning. Nu: mockuppens kanter, og ALLE
   Woos checked-skygger/kanter overtrumfes med variant-forælderen i
   selektoren (Woos egne regler står med !important og vinder ellers som
   senere indlæst). Den gamle `min-height: 4.25rem` mødte labelens
   content-box og blev til 102 px høje bokse; højden er indholdsdrevet. */
.nytte-checkout-page .wc-block-components-radio-control__option,
.nytte-checkout-page .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option {
  background: var(--nytte-white);
  border: 1.5px solid var(--nytte-border) !important;
  border-radius: 0.875rem;
  margin-bottom: 0.75rem;
  /* Venstre inset reserverer plads til den absolut positionerede radioknap;
     uden den ligger knappen oven på labelteksten. */
  padding: 1.125rem 1.25rem 1.125rem 3.25rem !important;
}

/* Woos grupperede radio-design tegner derudover en SAMLET ramme om hele
   gruppen (::after på radio-control-containeren, absolut lag i fuld
   størrelse) og 1 px skillelinjer mellem valgene (::after på hver række,
   mørkegrøn ved 20 %). Vores design bruger separate kort med luft, så
   begge pseudo-streger fjernes — fundet via ejerens inspector
   (e19lxcc00-klassen) efter at elementscanninger intet viste, fordi
   stregerne bor i pseudo-elementer. */
.nytte-checkout-page .wc-block-components-radio-control::after,
.nytte-checkout-page .wc-block-components-radio-control--highlight-checked::after,
.nytte-checkout-page .wc-block-components-radio-control__option::after {
  content: none !important;
}

/* Aktiv tilstand: mockuppens 2 px mørkegrønne kant på den lysegrønne
   flade — kanten hører sammen med baggrunden, ingen ekstra skygger. */
.nytte-checkout-page .wc-block-components-radio-control__option-checked,
.nytte-checkout-page .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option-checked {
  background: #f1f6ee;
  border: 2px solid var(--nytte-forest) !important;
  box-shadow: none !important;
}

/* WooCommerces »highlight-checked«-variant sætter 4 px radius på det VALGTE
   kort og på betalingens accordion-wrapper (målt live), så netop de valgte
   moduler stod med næsten firkantede hjørner. Shipmondos udleveringsboks
   har samme 4 px. Alle holder temaets 14 px; `!important` mod WooCommerces
   sent-indlæste blokstilark, jf. mønstret ovenfor. Accordionen klipper sit
   indhold, så beskrivelsespanelets hjørner følger radiussen. */
.nytte-checkout-page .wc-block-components-radio-control__option,
.nytte-checkout-page .wc-block-components-radio-control-accordion-option,
.nytte-checkout-page .selected_service_point {
  border-radius: 0.875rem !important;
}

.nytte-checkout-page .wc-block-components-radio-control-accordion-option {
  overflow: hidden;
}

/* Betalingsmetoden er en accordion hos WooCommerce, og den valgte metode
   indrammes af en 1,5 px mørk inset-skygge (ikke en border), som lagde en
   fed kant om både header og beskrivelse. Ejeren har bedt om at få rammen
   helt væk (2026-08-16): headeren bærer selv den valgte tilstand, og
   beskrivelsen står frit på stepkortet. */
/* Woos ring sidder ikke på --checked men på klassen
   --checked-option-highlighted (fundet ved regelscanning i checkout.css) —
   begge klasser dækkes, og specificiteten holdes over Woos med
   variant-forælderen. */
.nytte-checkout-page .wc-block-components-radio-control-accordion-option--checked,
.nytte-checkout-page .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.nytte-checkout-page .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  box-shadow: none !important;
}

.nytte-checkout-page .wc-block-components-radio-control__input {
  accent-color: var(--nytte-forest);
}

.nytte-checkout-page .wc-block-components-radio-control__label,
.nytte-checkout-page .wc-block-components-radio-control__description {
  color: var(--nytte-forest);
}

.nytte-checkout-page .wc-block-components-radio-control__label {
  font-size: 1rem;
  font-weight: 700;
}

.nytte-checkout-page .wc-block-components-radio-control__description {
  color: #4a5844;
  font-size: 0.875rem;
}

/* Prisen i højre side: mockuppen skriver »Gratis« med grønt. WooCommerce
   sætter text-transform: uppercase på fragtens fritekst (»GRATIS«) — på det
   indre span .wc-block-checkout__shipping-option--free i valgene og på
   <strong> i fragttotalen, ikke på forældrene. Versalerne slås fra begge
   steder; den grønne klasse sættes af decorateCheckoutPage() i commerce.js. */
.nytte-checkout-page .wc-block-components-radio-control__secondary-label,
.nytte-checkout-page .wc-block-checkout__shipping-option--free,
.nytte-checkout-page .wc-block-components-totals-item__value,
.nytte-checkout-page .wc-block-components-totals-item__value strong {
  text-transform: none !important;
}

.nytte-checkout-page .wc-block-components-radio-control__secondary-label {
  font-weight: 700;
}

.nytte-price-free {
  color: #2e6b41 !important;
}

/* Shipmondos udleveringsfelt starter med rød kant og »Vælg venligst et
   udleveringssted«, før kunden har rørt formularen. Fejlen holdes neutral,
   indtil der er klikket på »Gennemfør ordre« (klassen sættes i
   decorateCheckoutPage()); derefter gælder Shipmondos egen fejlvisning. */
body:not(.nytte-checkout-attempted) .nytte-checkout-page .selected_service_point.has-error {
  border-color: var(--nytte-border) !important;
}

body:not(.nytte-checkout-attempted) .nytte-checkout-page .nytte-pickup-error {
  display: none;
}

/* Mockuppens højrekolonne er en gennemsigtig, sticky stak med 16 px luft,
   hvor det hvide »Din ordre«-kort stod som sit eget kort adskilt fra det
   grønne husk-kort (ejerens ønske 2026-08-16). Husk-kortet er fjernet igen
   i CH-141, så stakken har nu kun ét kort. Reglerne beholdes alligevel:
   kortudtrykket ligger på selve opsummeringsblokken, ikke på containeren,
   og containeren bærer den sticky-position, kolonnen stadig skal have.
   Blokkens egen 1 px mørkegrønne boks (CH-72) erstattes samtidig af
   kortets ramme. */
.nytte-checkout-page .wc-block-components-sidebar {
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0;
}

/* Betalingsmærkerne i ordreopsummeringens bund (CH-138). De står som en
   rolig afslutning på kortet, ikke som en handling: lidt luft over, en fin
   streg der adskiller dem fra beløbene, og centreret som i footeren. */
.nytte-checkout-page
  .wc-block-components-sidebar
  [data-nytte-payment-marks-clone] {
  border-top: 1px solid var(--nytte-border);
  justify-content: center;
  margin: 0.25rem 0 0;
  padding-top: 0.9rem;
}

.nytte-checkout-page .wp-block-woocommerce-checkout-order-summary-block {
  background: var(--nytte-white);
  border: 1.5px solid var(--nytte-border) !important;
  border-radius: 1.375rem;
  box-shadow: 0 12px 32px rgb(23 64 42 / 7%);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.nytte-checkout-page .wp-block-woocommerce-checkout-order-summary-coupon-form,
.nytte-checkout-page .wp-block-woocommerce-checkout-order-summary-totals-block,
.nytte-checkout-page .wc-block-components-totals-wrapper {
  border-top-color: #eae7da !important;
}

/* Kassens kolonnefordeling (ejerens ønske 2026-08-16): venstre kolonne
   ca. 10 % smallere end grundreglens 380 px-sidebar gav, og højre
   tilsvarende bredere. Kun kassen — kurvsiden beholder grundreglen. */
@media (min-width: 981px) {
  .nytte-checkout-page .wc-block-components-sidebar-layout {
    grid-template-columns: minmax(0, 1fr) 460px;
  }
}

/* Pladsholderne tones tydeligt ned, så eksempeltekster som »Mette« ikke
   kan forveksles med udfyldte værdier (ejerens ønske 2026-08-17).
   opacity: 1 fordi Firefox ellers selv dæmper oveni. */
.nytte-checkout-page .wc-block-components-text-input input::placeholder,
.nytte-firma-proxy input::placeholder {
  /* Justeret ad to omgange fra #A9B1A1 → #BCC3B4 → #CDD2C6 efter ejerens
     blik (2026-08-17). */
  color: #cdd2c6;
  opacity: 1;
}

/* Adresse-overskriften havde 46 px ned til Fornavn mod 34 px i Kontakt og
   Leveringsmåde (målt 2026-08-17): Woos margin-top på første felt sluges
   normalt af landefeltet, som vi skjuler. Nulstilles på navnerækken, så
   alle tre sektioner står med 34 px. */
.nytte-checkout-page #shipping-fields .wc-block-components-address-form__first_name,
.nytte-checkout-page #shipping-fields .wc-block-components-address-form__last_name,
.nytte-checkout-page #billing-fields .wc-block-components-address-form__first_name,
.nytte-checkout-page #billing-fields .wc-block-components-address-form__last_name {
  margin-top: 0 !important;
}

/* ── Leveringsrækkernes kolonnefordeling (CH-165) ─────────────────────────
   wc-blocks reserverer HALVDELEN af rækken til prisen (flex: 0 0 50%), så
   »GLS hjemmelevering« og beskrivelserne brød i 5-6 linjer i en ~128 px
   etiketkolonne på mobil — for at give »38,00 kr.« 128 px, den ikke bruger
   (ejerens observation 2026-08-21). Prisen dimensionerer nu sig selv:
   etiketten får resten, og selv et firecifret beløb ville blot tage sin
   naturlige bredde. !important, fordi blokkens CSS indlæses efter temaets
   med samme specificitet. */
.nytte-checkout-page #shipping-option .wc-block-components-radio-control__label {
  flex: 1 1 auto !important;
  min-width: 0;
}

.nytte-checkout-page #shipping-option .wc-block-components-radio-control__secondary-label {
  flex: 0 0 auto !important;
  margin-left: 0.75rem;
  white-space: nowrap;
}

/* CH-164: reglen ovenfor ramte OGSÅ under 425 px, hvor wc-blocks stakker
   navneparret — og så stod Efternavn med 0 px op til Fornavn, mens alle
   andre felter har 12 (ejerens observation, målt 2026-08-21). Undtagelsen
   skal matche ID-selektorens vægt (1,2,0); en klasse-selektor taber uanset
   !important. Kun Efternavn løftes — Fornavn er stadig sektionens første
   felt og skal beholde sine 0. */
@media (max-width: 424px) {
  .nytte-checkout-page #shipping-fields .wc-block-components-address-form__last_name,
  .nytte-checkout-page #billing-fields .wc-block-components-address-form__last_name {
    margin-top: 12px !important;
  }
}

/* Faste titler OVER felterne som firmanavn-proxyen (ejerens ønske
   2026-08-17): Woos flydende label inde i feltet erstattes af en lille
   titel over feltet i Kontakt- og adresseformularerne (e-mail, Mobil,
   fornavn, efternavn, adresse, postnummer, by). Labelen ligger EFTER
   inputtet i Woos markup; flex-order løfter den op. */
.nytte-checkout-page #contact-fields .wc-block-components-text-input,
.nytte-checkout-page #shipping-fields .wc-block-components-text-input,
.nytte-checkout-page #billing-fields .wc-block-components-text-input {
  display: flex;
  flex-direction: column;
}

.nytte-checkout-page #contact-fields .wc-block-components-text-input label,
.nytte-checkout-page #shipping-fields .wc-block-components-text-input label,
.nytte-checkout-page #billing-fields .wc-block-components-text-input label {
  color: var(--nytte-forest) !important;
  font-size: 0.875rem !important;
  font-weight: 600;
  margin-bottom: 0.4rem;
  order: -1;
  position: static !important;
  transform: none !important;
}

.nytte-checkout-page #contact-fields .wc-block-components-text-input input,
.nytte-checkout-page #shipping-fields .wc-block-components-text-input input,
.nytte-checkout-page #billing-fields .wc-block-components-text-input input {
  padding: 0.5rem 1rem !important;
}

/* Landefeltet skjules: butikken sælger kun til Danmark
   (woocommerce_specific_allowed_countries = [DK], kontrolleret
   2026-08-16), så feltet viser altid »Danmark« uden reelle valg, og
   mockuppens adresseformular har det heller ikke. Værdien DK sendes
   stadig med ordren. Åbnes der senere for flere lande, SKAL reglen
   fjernes igen. */
.nytte-checkout-page .wc-block-components-address-form__country {
  display: none;
}

/* Kontakt-sektionen efter mockuppen: e-mail og Mobil side om side i to
   kolonner. Mobilfeltet er et Additional Checkout Field (core-pluginets
   CheckoutContactPhone), og adressetelefonen er skjult via option.
   Woos egen margin-top på næste felt nulstilles, så kolonnerne flugter;
   gæstenoticen spænder over begge kolonner. */
@media (min-width: 700px) {
  .nytte-checkout-page #contact-fields .wc-block-components-address-form {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .nytte-checkout-page #contact-fields .wc-block-components-text-input {
    margin-top: 0 !important;
  }

  .nytte-checkout-page #contact-fields .wc-block-checkout__guest-checkout-notice {
    grid-column: 1 / -1;
    margin: 0;
  }
}

/* »Du handler i øjeblikket som gæst« er fjernet på ejerens ønske
   (2026-08-17) — kunden behøver ikke få sin gæstestatus at vide. */
.nytte-checkout-page .wc-block-checkout__guest-checkout-notice {
  display: none;
}

/* Din ordres miniaturer SKAL være kvadratiske (ejerens krav 2026-08-16).
   Wrapperen fulgte kildebilledets format, så aflange produktfotos gav
   aflange miniaturer. Låst til mockuppens 56×56 med object-fit: contain,
   så billedet aldrig beskæres eller strækkes — uanset kildeformat. */
.nytte-checkout-page .wc-block-components-order-summary-item__image {
  align-self: center;
  background: #f6f4ec;
  border-radius: 10px;
  flex: 0 0 56px;
  height: 56px !important;
  /* overflow: visible, så antal-badgen må stikke ud over hjørnet (ejerens
     ønske 2026-08-18). Klipningen var kun til de runde hjørner: billedet
     bruger object-fit: contain i en fast 56×56-boks og kan ikke flyde over.
     Radius flyttet til billedet selv nedenfor, så hjørnerne holder. */
  overflow: visible;
  /* Woo lægger bund-padding på alle varer UNDTAGEN den sidste, så
     wrapperen blev 56×72 ved flere varer i kurven (målt; CH-90). */
  padding: 0 !important;
  width: 56px !important;
}

.nytte-checkout-page .wc-block-components-order-summary-item__image img {
  border-radius: inherit;
  height: 100% !important;
  object-fit: contain;
  width: 100% !important;
}

/* »Din ordre«-titlen med samme titeludtryk som Kontakt/Adresse/
   Leveringsmåde (ejerens ønske 2026-08-16). Woos sene stylesheet sætter
   selv weight 500 på titlen, deraf !important. */
.nytte-checkout-page .wc-block-components-checkout-order-summary__title-text {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 800 !important;
  letter-spacing: -0.025em;
}

/* Det tomme notices-element øverst i sidebar-stakken åd et flex-gap og
   skubbede Din ordre 16 px ned i forhold til Kontakt-kortet (målt).
   Skjules kun, når det er tomt — fejlbeskeder vises stadig. */
.nytte-checkout-page .wc-block-components-sidebar .wc-block-components-notices:empty {
  display: none;
}

/* Firmanavn: WooCommerces eget felt i adresseformularen er ALTID skjult —
   i stedet står en proxy lige under »Levering til erhvervsadresse«
   (ejerens ønske 2026-08-16: feltet skal dukke op dér, man klikker, uden
   at scrolle op). Proxyen spejler værdien ind i det skjulte React-felt
   (ensureCompanyProxy() i commerce.js), så ordredata er uændrede. Et evt.
   indtastet firmanavn slettes ikke ved metodeskift — proxyen skjules kun. */
/* !important: label-reglerne ovenfor bruger #shipping-fields (ID) og
   vandt ellers over denne med display: flex, så feltet dukkede op igen. */
.nytte-checkout-page .wc-block-components-address-form__company {
  display: none !important;
}

/* ── Ordrekommentaren flyttes op til leveringen ───────────────────────────
   Woo lægger »Skriv en kommentar til din ordre« lige over betingelses-
   fluebenet: målt 66 px over det og 135 px over betalingsknappen. To flueben
   i stak konkurrerer, og det er det juridiske, der skal have opmærksomheden
   (ejerens observation 2026-08-19).

   Trinnene er søskende i checkoutformularen, så rækkefølgen kan ændres med
   `order` frem for at flytte noget i DOM'en — React ejer de noder, og en
   fysisk flytning ville kollidere med dens oprydning. Flex er sikkert her,
   fordi alle trin har `margin-top: 0`: der er ingen margin-sammenfald at
   miste, og afstandene er derfor uændrede.

   Kommentaren lander efter leveringsmåden, ikke under adressen, fordi en
   ordrekommentar næsten altid handler om leveringen. */
.nytte-checkout-page .wc-block-checkout__form {
  display: flex;
  flex-direction: column;
}

.nytte-checkout-page .wc-block-checkout__order-notes {
  order: 1;
}

.nytte-checkout-page .wc-block-checkout__payment-method {
  order: 2;
}

.nytte-checkout-page .wc-block-checkout__terms {
  order: 3;
}

.nytte-checkout-page .wc-block-checkout__actions {
  order: 4;
}

/* ── Mobilens slutrækkefølge (CH-164) ────────────────────────────────────
   På smalle skærme renderer WooCommerce ordreoversigten INDE i actions-
   blokken, over knappen. Med terms på order: 3 lå fluebenet dermed FØR
   oversigten: … betaling → vilkår → ordreoversigt → rød knap — og kunden
   mistede sammenhængen mellem accept og handling (ejerens observation
   2026-08-21).

   Betingelsen er ikke et brydepunkt men selve strukturen: reglerne gælder
   præcis når oversigten faktisk står i actions-blokken, uanset hvilken
   bredde WooCommerce vælger at gøre det ved. Vilkårene lægges til sidst —
   under den røde knap, som ejeren bad om — og knappen får luft op til
   oversigten, som den målt stod klods op ad (0 px). */
/* CH-171: ejeren testede CH-164-placeringen (vilkaar under knappen) og
   valgte den om: fluebenet skal staa OVER knappen som paa desktop — men
   stadig efter ordreoversigten. Oversigten og knappen er boern af samme
   actions-blok, saa et soeskende-element kan ikke laegge sig imellem dem
   med `order` alene. `display: contents` oploeser blokkens egen boks og
   goer dens boern til flex-items i formularen, saa raekkefoelgen kan
   flettes: oversigt (4) → vilkaar (5) → knap (6). */
.nytte-checkout-page
  .wc-block-checkout__form:has(.wc-block-checkout__actions .wp-block-woocommerce-checkout-order-summary-block)
  .wc-block-checkout__terms {
  /* Bundmargen 0: basisreglens 24 px plus knappens 16 gav 40 px ned til
     knappen; nu baerer knappens egen margin-top de 16 alene. */
  margin-bottom: 0;
  margin-top: 0.75rem;
  order: 5;
}

.nytte-checkout-page
  .wc-block-checkout__actions:has(.wp-block-woocommerce-checkout-order-summary-block) {
  display: contents;
}

.nytte-checkout-page
  .wc-block-checkout__actions:has(.wp-block-woocommerce-checkout-order-summary-block)
  > * {
  /* Boern af display: contents starter paa order 0 og ville ellers hoppe
     op FOER ordrenoten (1) og betalingen (2). */
  order: 4;
}

.nytte-checkout-page
  .wc-block-checkout__actions:has(.wp-block-woocommerce-checkout-order-summary-block)
  .wc-block-checkout__actions_row {
  margin-top: 1rem;
  order: 6;
}

/* Fluebenet var 20 px og svaert at ramme; linkene fylder det meste af
   etiketten, saa et forbiskud aabnede en politikside (ejerens test paa
   telefon). Kun selve boksen forstoerres — linkene aabner fortsat kun ved
   tryk paa de fede ord, og al oevrig tekst slaar fluebenet til. */
.nytte-checkout-page .wc-block-checkout__terms .wc-block-components-checkbox__input {
  flex-shrink: 0;
  height: 1.5rem;
  min-height: 1.5rem;
  min-width: 1.5rem;
  width: 1.5rem;
}

/* Fluebensmaerket sad skaevt i den forstoerrede boks: wc-blocks' svg er
   absolut positioneret med en fast margin afstemt efter den gamle boks, og
   dens positioneringskontekst er hele etiketten — auto-centrering ville
   derfor lande midt i SAETNINGEN, ikke i boksen (maalt: 156 px til hoejre).
   Svg'en droppes, og fluebenet tegnes som background-image paa selve
   boksen: `background-position: center` kan ikke sidde skaevt, uanset
   hvilken stoerrelse boksen faar. Stien er wc-blocks' egen. */
.nytte-checkout-page .wc-block-checkout__terms .wc-block-components-checkbox__mark {
  display: none;
}

.nytte-checkout-page .wc-block-checkout__terms .wc-block-components-checkbox__input:checked {
  background-color: var(--nytte-forest, #17402a);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath fill='%23ffffff' d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.05rem auto;
  border-color: var(--nytte-forest, #17402a);
}



/* Dæmpet, så den ikke konkurrerer med de rigtige valg på siden. */
.nytte-checkout-page .wc-block-checkout__add-note .wc-block-components-checkbox__label {
  color: #5d6b57;
  font-size: 0.875rem;
}

.nytte-firma-proxy {
  display: none;
  margin: 0.25rem 0 0.75rem;
}

.nytte-checkout-page.nytte-erhverv-levering .nytte-firma-proxy {
  display: block;
}

/* Fejlbeskeden ved manglende firmanavn. Samme røde som Woos egne
   feltfejl, så kassen taler med én stemme. */
.nytte-firma-proxy__fejl {
  color: var(--nytte-action);
  font-size: 0.8125rem;
  line-height: 1.4;
  margin: 0.35rem 0 0;
}

.nytte-firma-proxy input[aria-invalid="true"] {
  border-color: var(--nytte-action);
}

/* ── Antal-badgen på ordreoversigtens billeder ────────────────────────────
   WooCommerce placerer badgen med transform: translate(10px, -10px), altså
   halvt uden for billedet. Vores kvadratiske ramme har overflow: hidden for
   at beskære billedet, og den klippede badgen: kun 10 af 20 px var synlige,
   og tallet var skåret over på midten — det så ud som en sort plet i hjørnet
   (ejerens spørgsmål 2026-08-18). Badgen flyttes ind i rammen, så tallet kan
   læses, og får butikkens grønne i stedet for Woos næsten sorte. */
.nytte-checkout-page .wc-block-components-order-summary-item__quantity {
  background: var(--nytte-forest);
  /* Den hvide ring skiller badgen fra billedet, når de overlapper. */
  box-shadow: 0 0 0 2px var(--nytte-white);
  /* Badgen er 20 px. Med 6 px ud til hver side rager den ud over hjørnet
     uden at dække produktfotoet: 14 af 20 px ligger stadig inden for
     rammen. Woos egen 10 px lagde den halvt udenfor. */
  transform: translate(6px, -6px);
}

.nytte-firma-proxy label {
  color: var(--nytte-forest);
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.nytte-firma-proxy input {
  background: var(--nytte-white);
  border: 1.5px solid #d5d2c0;
  border-radius: 0.75rem;
  box-sizing: border-box;
  color: #22301f;
  font-size: 1rem;
  min-height: 3.25rem;
  padding: 0.5rem 1rem;
  width: 100%;
}

.nytte-firma-proxy input:focus {
  border-color: var(--nytte-leaf);
  box-shadow: 0 0 0 2px rgb(46 107 65 / 14%);
  outline: 0;
}

/* Varelinjens pris i Din ordre med fed (mockuppens 700; stod reelt i 400,
   selv om den så fed ud i konteksten). */
.nytte-checkout-page .wc-block-components-order-summary-item__total-price {
  font-weight: 700;
}

/* Rækkebeløbene i Din ordre med fed som varelinjernes priser, og rabatten
   i mockuppens røde (ejerens ønske 2026-08-17; mockuppens linje 179-183:
   alle rækkeværdier 600+, rabat #C63D2F). */
.nytte-checkout-page .wc-block-components-sidebar .wc-block-components-totals-item__value {
  font-weight: 700;
}

.nytte-checkout-page .wc-block-components-sidebar .wc-block-components-totals-discount .wc-block-components-totals-item__value {
  color: #c63d2f !important;
}

/* »I alt«-totalen i Din ordre efter mockuppens linje 181-184: stor, fed
   displaypris (28 px, Bricolage, -0.02em) i mørkegrøn; labelen 17 px fed.
   Nuldecimalerne fjernes af trimCartDecimals() i commerce.js — der
   afrundes aldrig (DEC-20260814-54). */
.nytte-checkout-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  color: var(--nytte-forest);
  font-size: 1.0625rem;
  font-weight: 700;
}

.nytte-checkout-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* GLS-logoet efter metodenavnet (officiel vektor i theme-assets). */
.nytte-checkout-page .nytte-metode-logo {
  display: inline-block;
  height: 0.875rem;
  margin-left: 0.5rem;
  vertical-align: -1px;
  width: auto;
}

/* Taglines under leveringsmetoderne (2026-08-16). Bor inde i den fede
   metodelabel, så vægten og størrelsen sættes ned. */
.nytte-checkout-page .nytte-metode-tagline {
  color: #4a5844;
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  margin-top: 2px;
}

/* Betingelseslinjens links står med fed; teksterne sættes med lille
   begyndelsesbogstav i decorateCheckoutPage() (ejerens ønske 2026-08-16). */
.nytte-checkout-page .wc-block-checkout__terms a {
  color: var(--nytte-forest);
  font-weight: 700;
}

/* »← Rediger kurv« nederst i opsummeringen, jf. mockuppens linje 187. */
.nytte-checkout-page .nytte-edit-cart-link {
  color: var(--nytte-forest);
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-top: 1rem;
  text-align: center;
}

/* Det moerkegroenne »Levende dyr — husk«-kort (mockuppens linje 189-196,
   indfoert i CH-63/CH-73) er fjernet fra kassen 2026-08-21 efter ejerens
   oenske: det forstyrrede flowet i det oejeblik, kunden skulle betale.
   Kortet lovede desuden »Levende-garanti paa hele ordren« paa enhver ordre,
   ogsaa en kurv med kun faelder — samme fejl som heroerne i CH-125.
   Bemaerk: CH-78 fjernede fuldbredde-banneret med den begrundelse, at netop
   dette kort daekkede adressebudskabet. Det budskab findes derfor ikke
   laengere i kassen; se CH-141 i CHANGELOG.md. */

.nytte-checkout-page .wc-block-checkout__actions_row {
  align-items: center;
  gap: 1rem;
}

.nytte-checkout-page .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
  background: var(--nytte-action) !important;
  color: var(--nytte-white) !important;
  /* 90 % centreret (ejerens ønske 2026-08-17; først 95 %, siden 90 %). */
  margin-inline: auto;
  min-width: min(90%, 20rem);
  width: 90%;
}

/* Vilkårsrækken (flueben + tekst) får samme bredde og centrering som
   CTA-knappen, så de deler venstrekant som én samlet blok (ejerens ønske
   2026-08-17). */
.nytte-checkout-page .wc-block-checkout__terms {
  margin-inline: auto;
  width: 90%;
}

.nytte-checkout-page .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover {
  background: #a93124 !important;
}

.nytte-checkout-page .wc-block-components-checkout-return-to-cart-button {
  color: var(--nytte-forest);
  font-weight: 700;
}

.nytte-checkout-page .wc-block-components-order-summary-item {
  border-bottom-color: var(--nytte-border);
  padding-block: 0.9rem;
}

.nytte-checkout-page .wc-block-components-order-summary-item__image {
  background: #edf3e9;
  border-radius: 0.75rem;
  overflow: visible;
}

.nytte-checkout-page .wc-block-components-order-summary-item__image img {
  border-radius: inherit;
  object-fit: contain;
}

.nytte-checkout-page .wc-block-components-order-summary-item__description .wc-block-components-product-name {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
}

.nytte-checkout-assurance {
  align-items: center;
  background: var(--nytte-forest);
  border-radius: 1.375rem;
  color: #bfd8c4;
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  margin-top: clamp(2rem, 5vw, 4rem) !important;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.nytte-checkout-assurance__eyebrow {
  color: #7fb88e;
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.nytte-checkout-assurance h2 {
  color: var(--nytte-white);
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0;
}

.nytte-checkout-assurance ul {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nytte-checkout-assurance li {
  align-items: flex-start;
  display: flex;
  gap: 0.65rem;
}

.nytte-checkout-assurance li::before {
  color: #7fb88e;
  content: "✓";
  font-weight: 900;
}

/* Boksen har skovgrøn baggrund, mens temaets globale linkfarve også er
   skovgrøn. Linket til vilkårene stod derfor i nøjagtig samme farve som
   fladen bag det — målt 1:1 og reelt usynligt. Understregningen sikrer, at
   linket kan ses uden kun at bero på farve. */
.nytte-checkout-assurance a {
  color: var(--nytte-white);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/*
 * Trust strip
 */
.nytte-commerce-trust {
  border-top: 1px solid var(--nytte-border);
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 6vw, 5rem) !important;
  padding-top: 1.5rem;
}

.nytte-commerce-trust > div {
  display: grid;
  gap: 0.25rem;
  padding-left: 1.35rem;
  position: relative;
}

.nytte-commerce-trust > div::before {
  background: var(--nytte-leaf);
  border-radius: 50%;
  content: "";
  height: 0.55rem;
  left: 0;
  position: absolute;
  top: 0.4rem;
  width: 0.55rem;
}

.nytte-commerce-trust strong {
  color: var(--nytte-forest);
}

.nytte-commerce-trust span {
  color: var(--nytte-muted);
  font-size: 0.875rem;
}

/*
 * Mini cart drawer
 *
 * Bredden SKAL være 30rem: WooCommerces slidein-animation flytter draweren
 * en fast distance på -30rem uanset `--drawer-width`. En tidligere udvidelse
 * til 31rem efterlod derfor draweren 16 px ud over vinduets højrekant, så al
 * højre-polstring så beskåret ud — luk-knappen havde 8 px synlig luft i
 * stedet for 24. Kun målbart i et rigtigt vindue; headless klippede ikke.
 */
.wc-block-mini-cart__drawer {
  --drawer-width: min(30rem, 100vw);
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__content {
  background: #fbfaf5;
  color: #22301f;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
  background: var(--nytte-white);
  border-bottom: 1px solid var(--nytte-border);
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.6rem;
  font-weight: 850;
  margin: 0;
  padding: 1.5rem;
}

.wc-block-mini-cart__drawer .nytte-delivery-meter--compact {
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  max-width: none;
  padding: 1rem 1.5rem;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__items {
  padding: 1rem 1.5rem;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart-items__row {
  background: var(--nytte-white);
  border: 1px solid var(--nytte-border);
  border-radius: 1rem;
  margin-bottom: 0.75rem;
  padding: 0.75rem;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart-items__row img {
  background: #edf3e9;
  border-radius: 0.75rem;
  object-fit: contain;
}

.wc-block-mini-cart__drawer .wc-block-components-product-name {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer {
  background: var(--nytte-white);
  border-top: 1px solid var(--nytte-border);
  padding: 1.25rem 1.5rem;
}

/* WooCommerces egen subtotal-række skjules i draweren.
   Vi viser vores egen opsummering lige ovenfor — Varer, Fragt og I alt —
   hentet fra Store API'et og opdateret ved hver ændring (CH-127). Woos række
   stod nedenunder med et modstridende beløb: ejeren så »I alt 236 kr.« og
   »Subtotal 0 kr.« i samme panel (2026-08-21).

   To beløb, hvoraf det ene er forkert, er værre end ét. Rækken er desuden
   overflødig: dens egen note siger, at forsendelse og moms først regnes ud i
   kassen, mens vores opsummering allerede viser fragten.

   Knapperne er søskende og røres ikke — kun totalrækken skjules. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal,
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer > .wc-block-components-totals-item {
  display: none;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions {
  display: flex !important;
  flex-direction: column;
  gap: 0.625rem;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions > * {
  box-sizing: border-box;
  margin: 0 !important;
  width: 100% !important;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout {
  background: var(--nytte-action) !important;
  color: var(--nytte-white) !important;
  font-size: 1.0625rem;
  min-height: 54px;
  order: 1;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout:hover {
  background: #a93124 !important;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart {
  background: transparent !important;
  border: 0 !important;
  color: var(--nytte-forest) !important;
  font-size: 0.9375rem;
  min-height: auto;
  order: 2;
  padding: 0.25rem 1rem !important;
  text-decoration: none;
}

/*
 * Order confirmation rendered by the Checkout Block.
 */
.nytte-checkout-page
  :where(
    .wp-block-woocommerce-order-confirmation-status,
    .wp-block-woocommerce-order-confirmation-summary,
    .wp-block-woocommerce-order-confirmation-totals-wrapper,
    .wp-block-woocommerce-order-confirmation-shipping-wrapper,
    .wp-block-woocommerce-order-confirmation-billing-wrapper
  ) {
  background: var(--nytte-white);
  border: 1px solid var(--nytte-border);
  border-radius: 1.375rem;
  margin-bottom: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.nytte-checkout-page .wp-block-woocommerce-order-confirmation-status {
  color: var(--nytte-forest);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 850;
  letter-spacing: -0.045em;
}

@media (max-width: 980px) {
  /* Tre kolonner holder helt ned til 701 px: der er plads til logo,
     trinindikator og trygheds-markøren, og »Sikker checkout« er et
     tillidselement i et betalingsflow, der ikke bør falde ud først. */
  .nytte-commerce-masthead__inner {
    grid-template-columns: auto 1fr auto;
  }

  .nytte-commerce-steps {
    justify-self: end;
  }

  .nytte-commerce-content .wc-block-components-sidebar-layout {
    display: block;
  }

  .nytte-commerce-content
    .wc-block-components-sidebar-layout
    .wc-block-components-main {
    width: 100%;
  }

  .nytte-commerce-content .wc-block-components-sidebar {
    margin-top: 1.25rem;
    position: static;
    width: 100%;
  }

}

/* CH-12: ordreoversigten forsvandt mellem 760 og 980 px.
   Den gamle regel skjulte sidebaren fra 980 px, men WooCommerce flytter
   først oversigten til sin egen mobilvisning omkring 748 px (container
   700 px, styret i JavaScript — ikke i CSS, så den kan ikke matches med en
   selector). I hullet så kunden hverken sidebar eller mobiloversigt og
   skulle godkende betaling uden at have set varelinjer, subtotal eller moms.
   740 px er valgt bevidst under WooCommerces skift: en kort overlapning med
   to oversigter er langt mindre skadelig end et vindue uden nogen. */
@media (max-width: 740px) {
  .nytte-checkout-page .wc-block-components-sidebar {
    display: none;
  }
}

@media (max-width: 782px) {
  .admin-bar .nytte-commerce-masthead {
    top: 46px;
  }
}

@media (max-width: 700px) {
  .nytte-commerce-masthead {
    position: relative;
    top: auto;
  }

  .admin-bar .nytte-commerce-masthead {
    top: auto;
  }

  .nytte-commerce-masthead__inner {
    gap: 0.75rem;
    grid-template-columns: 1fr;
    padding-block: 0.9rem;
  }

  .nytte-commerce-secure {
    display: none;
  }

  .nytte-commerce-logo,
  .nytte-commerce-steps {
    justify-self: center;
  }

  .nytte-commerce-logo {
    font-size: 1.25rem;
    grid-column: 1;
    grid-row: 1;
  }

  .nytte-commerce-steps {
    grid-column: 1;
    grid-row: 2;
  }

  .nytte-commerce-steps li {
    font-size: 0.75rem;
  }

  .nytte-commerce-steps li:not(:last-child)::after {
    margin-inline: 0.45rem;
    width: 0.8rem;
  }

  .nytte-commerce-steps li > span,
  .nytte-commerce-steps li > a > span {
    flex-basis: 1.35rem;
    height: 1.35rem;
  }

  .nytte-commerce-page {
    padding-inline: 0.75rem;
    padding-top: 1.75rem;
  }

  .nytte-commerce-intro h1 {
    font-size: clamp(1.875rem, 8vw, 2.125rem);
  }

  .nytte-delivery-meter {
    max-width: none;
  }

  .nytte-empty-cart-rescue {
    grid-template-columns: minmax(0, 1fr);
  }

  .nytte-empty-cart-rescue__actions {
    min-width: 0;
  }

  .nytte-commerce-content .wc-block-components-sidebar {
    border-radius: 1rem;
    padding: 1rem;
  }

  .nytte-cart-page .wc-block-cart-items__row td {
    border: 0 !important;
    padding: 0.75rem !important;
  }

  .nytte-cart-page .wc-block-cart-items__row td:first-child {
    border-left: 1px solid var(--nytte-border) !important;
    border-radius: 1rem 0 0 1rem;
    border-bottom: 1px solid var(--nytte-border) !important;
    border-top: 1px solid var(--nytte-border) !important;
  }

  .nytte-cart-page .wc-block-cart-items__row td:last-child {
    border-bottom: 1px solid var(--nytte-border) !important;
    border-radius: 0 1rem 1rem 0;
    border-right: 1px solid var(--nytte-border) !important;
    border-top: 1px solid var(--nytte-border) !important;
  }

  .nytte-checkout-page .wc-block-components-checkout-step {
    border-radius: 1rem;
    padding: 1rem !important;
  }

  .nytte-checkout-page .wc-block-checkout__actions_row {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .nytte-checkout-page .wc-block-checkout__actions_row .wc-block-components-button {
    width: 100%;
  }

  .nytte-checkout-assurance {
    grid-template-columns: 1fr;
  }

  .nytte-commerce-trust {
    grid-template-columns: 1fr;
  }

  .nytte-commerce-trust > div {
    border-bottom: 1px solid var(--nytte-border);
    padding-bottom: 1rem;
  }

  .nytte-commerce-trust > div:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 420px) {
  .nytte-commerce-steps li {
    gap: 0.3rem;
  }

  .nytte-commerce-steps li:not(:last-child)::after {
    margin-inline: 0.25rem;
    width: 0.4rem;
  }

  .nytte-commerce-content .wc-block-components-sidebar {
    padding: 0.8rem;
  }

  .nytte-cart-page .wc-block-cart-items__row td {
    padding-inline: 0.5rem !important;
  }

  .wc-block-mini-cart__drawer .wc-block-mini-cart__title,
  .wc-block-mini-cart__drawer .wc-block-mini-cart__items,
  .wc-block-mini-cart__drawer .wc-block-mini-cart__footer,
  .wc-block-mini-cart__drawer .nytte-delivery-meter--compact {
    padding-inline: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nytte-commerce-content .wc-block-components-button {
    transition: none;
  }
}

/* Krydssalgsgitteret i kurv og kasse bruger WooCommerce' ældre grid-blok med
   39-40 px knapper og 12,75 px skrift. Et forsøg på at hæve dem til 44 px med
   min-height fik knapperne til at vokse til 71 px, fordi gitterets egne
   flexregler strækker dem til rækkens højde. Rullet tilbage; se CH-17. */


/* ── Kurv-draweren ────────────────────────────────────────────────────────
   Efter `Nyttedyret Overlays.dc.html` (Kurv-overlay, linje 183-250): tre
   hvide bånd — header, fragtmåler og footer — på drawerens kalkbund, med
   varerne som hvide kort imellem. Målene her er mockuppens egne: 24 px
   sidepolstring, 18 px kortradius, 56 px rund lukkeknap.

   Draweren rendres af WooCommerce' React-blok, og dens stilark hentes først,
   når draweren åbnes — altså EFTER temaets. Lige specificitet taber derfor
   altid, og de omstridte egenskaber står med `!important`. */

.wc-block-components-drawer,
.wc-block-components-drawer__content,
.wc-block-mini-cart__drawer {
  background: #f6f4ec;
}

.wc-block-components-drawer__content {
  padding: 0;
}

/* Notice-regionen er tom, men dens topmargen kollapser igennem det 0 px høje
   element og skubbede hele headeren 16 px ned — kalkfarvet luft over det
   hvide bånd. */
.wc-block-mini-cart__drawer .wc-block-components-notices {
  margin: 0 !important;
}

/* Header: hvidt bånd. Titel og underlinje danner båndet sammen; lukkeknappen
   lægges oven i, lodret centreret. Højre polstring reserverer dens plads. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
  background: #fff;
  /* WooCommerces eget ark giver titlen en bundkant — den tegnede en streg
     tværs over båndet mellem titel og underlinje. Båndets kant hører til
     under underlinjen, ikke her. */
  border-bottom: 0 !important;
  /* WooCommerce maskerer titlens nederste 24 px med en fade — tænkt som
     overløbsfade, men med båndets padding lå HELE teksten i fade-zonen:
     glyfferne tonede fra mørk til væk, og masken fadede også den hvide
     baggrund, så båndet fik en synlig overgangsstreg. Målt i rå pixels:
     mørkeste glyf var rgb(47,83,63) mod skovgrøn rgb(23,64,42) nedenfor. */
  -webkit-mask-image: none !important;
  mask-image: none !important;
  color: var(--nytte-forest, #17402a);
  /* Mockuppen: displayskrift, vægt 800. Uden dem stod titlen i brødskrift
     og lignede en nedtonet overskrift. */
  font-family: var(--wp--preset--font-family--display, inherit);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  padding: 22px 96px 0 24px;
}

.wc-block-mini-cart__drawer .nytte-cart-subtitle {
  background: #fff;
  border-bottom: 1px solid #e0ddce;
  color: #6b7a63;
  font-size: 0.875rem;
  line-height: 1.4;
  margin: 0;
  padding: 2px 96px 20px 24px;
}

/* Mockuppens knap: 56 px, rund, 1,5 px kant, hvid bund. Blokken giver den
   `margin: -1em`, `opacity: .6` og skarpe hjørner — alt sammen overstyret.
   Toppen på 18 px centrerer den i headerbåndets ~92 px. */
.wc-block-mini-cart__drawer .wc-block-components-drawer__close {
  align-items: center;
  background: #fff !important;
  border: 1.5px solid #d5d2c0 !important;
  border-radius: 50% !important;
  color: var(--nytte-forest, #17402a);
  display: flex;
  height: 56px !important;
  justify-content: center;
  margin: 0 !important;
  opacity: 1 !important;
  right: 24px !important;
  top: 18px !important;
  width: 56px !important;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close svg {
  height: 24px;
  width: 24px;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer__close:hover {
  background: var(--nytte-forest, #17402a) !important;
  border-color: var(--nytte-forest, #17402a) !important;
  color: #fff !important;
}

/* Krydset er en SVG, hvis fill sættes af et sent-indlæst ark — `color` alene
   når derfor ikke ikonet. Fill'en tvinges hvid sammen med knappen. */
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:hover svg,
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:hover svg path {
  fill: #fff !important;
}

/* Fragtmåleren: hvidt bånd under headeren. */
.wc-block-mini-cart__drawer .nytte-delivery-meter--compact {
  background: #fff;
  border: 0;
  border-bottom: 1px solid #e0ddce;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  max-width: none;
  padding: 16px 24px;
}

.wc-block-mini-cart__drawer .nytte-delivery-meter--compact .nytte-delivery-meter__row {
  align-items: baseline;
  font-size: 0.9375rem;
  margin-bottom: 9px;
}

.wc-block-mini-cart__drawer .nytte-delivery-meter--compact .nytte-delivery-meter__row span {
  font-size: 0.8125rem;
}

.wc-block-mini-cart__drawer .nytte-delivery-meter--compact .nytte-delivery-meter__progress {
  background: #eae7da;
  height: 8px;
}

/* Varerne: hvide kort på kalkbunden, 18 px radius og 14 px indre luft som i
   mockuppen. Prisen får sin egen polstring, så den ikke rører kortkanten. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__items {
  padding: 18px 24px !important;
}

.wc-block-mini-cart__items .wc-block-cart-items__row {
  background: #fff;
  border: 1.5px solid #e0ddce;
  border-radius: 18px;
  margin-bottom: 14px;
  padding: 14px !important;
}

.wc-block-mini-cart__items .wc-block-cart-items__row::after,
.wc-block-mini-cart__items .wc-block-cart-items tr:not(:last-child) {
  border-bottom: 0;
}

.wc-block-mini-cart__items .wc-block-components-product-name {
  color: var(--nytte-forest, #17402a);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.wc-block-mini-cart__items .wc-block-components-product-metadata__description,
.wc-block-mini-cart__items .wc-block-components-product-metadata__description p {
  color: #6b7a63;
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Linjesummen: displayskrift som i mockuppen, med luft til kortkanten. */
.wc-block-mini-cart__items .wc-block-cart-item__total {
  padding-right: 4px;
}

.wc-block-mini-cart__items .wc-block-cart-item__total .wc-block-formatted-money-amount {
  color: var(--nytte-forest, #17402a);
  font-family: var(--wp--preset--font-family--display, inherit);
  font-size: 1.125rem;
  font-weight: 800;
}

/* Enhedsprisen under navnet skjules — linjesummen er den, kunden skal bruge.
   Ved antal 1 stod samme beløb ellers to gange over hinanden. */
.wc-block-mini-cart__items .wc-block-cart-item__prices {
  display: none !important;
}

/* Kvadratlås også i draweren (CH-90): uden aspect-ratio fulgte billedet
   kildefotoets format, så aflange produktfotos strakte varekortene. */
.wc-block-mini-cart__items .wc-block-cart-item__image img {
  aspect-ratio: 1;
  border-radius: 12px;
  height: auto;
  object-fit: contain;
  width: 100%;
}

.wc-block-mini-cart__items .wc-block-components-quantity-selector {
  border: 1.5px solid #d5d2c0 !important;
  border-radius: 999px !important;
}

/* Footer: hvidt bånd med opsummering, knapper og bundnote. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer {
  background: #fff;
  border-top: 1px solid #e0ddce !important;
  padding: 16px 24px 20px !important;
}

.nytte-cart-summary {
  border-top: 0;
  padding-top: 0;
}

.nytte-cart-summary__row {
  color: #4a5844;
  display: flex;
  font-size: 0.9375rem;
  justify-content: space-between;
  padding: 3px 0;
}

.nytte-cart-summary__row span:last-child {
  color: var(--nytte-forest, #17402a);
  font-weight: 600;
}

.nytte-cart-summary__row--discount span:last-child {
  color: var(--nytte-action, #c63d2f);
}

.nytte-cart-summary__row--free span:last-child {
  color: #2f5b33;
}

.nytte-cart-summary__total {
  align-items: baseline;
  border-top: 1px solid #eae7da;
  color: var(--nytte-forest, #17402a);
  display: flex;
  font-size: 1.0625rem;
  font-weight: 700;
  justify-content: space-between;
  margin: 10px 0 12px;
  padding-top: 12px;
}

.nytte-cart-summary__total strong {
  font-family: var(--wp--preset--font-family--display, inherit);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* »Se hele kurven« er et centreret tekstlink — rammen var en indre
   boksskygge, ikke en kant, derfor `box-shadow: none`. */
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart:hover,
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart:focus {
  background: transparent;
  border: 0;
  box-shadow: none !important;
  color: var(--nytte-forest, #17402a);
  font-size: 0.9375rem;
  font-weight: 600;
  margin-top: 10px;
  outline-offset: 2px;
  text-decoration: none;
}

.wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart:hover {
  text-decoration: underline;
}

/* Bundnoten med grøn prik. Prikken er et pseudo-element, så teksten forbliver
   ren for skærmlæsere. */
.nytte-cart-note {
  align-items: center;
  color: #4a5844;
  display: flex;
  font-size: 0.8125rem;
  gap: 9px;
  line-height: 1.5;
  margin: 12px 0 0;
}

.nytte-cart-note::before {
  background: #2e6b41;
  border-radius: 50%;
  content: "";
  flex: 0 0 auto;
  height: 6px;
  width: 6px;
}

/* ── Kurvsiden ────────────────────────────────────────────────────────────
   Efter `Nyttedyret Kurv.dc.html` (linje 47-150): varelinjerne som hvide
   kort, fragtmåleren i venstre kolonne under varerne, opsummeringen som
   kort med skygge og USP'erne som mørkegrønt kort. Rækkerne er tabelceller,
   så kortene tegnes med kantradier på første og sidste celle og lodret
   afstand via border-spacing. `!important` mod WooCommerces sent-indlæste
   blokstilark, jf. drawer-afsnittet ovenfor. */

.wc-block-cart .wc-block-cart-item__total .wc-block-cart-item__quantity {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* Fragtmåleren flyttes ned i venstre kolonne af ensureCartPageLayout() og
   får mockuppens kortudtryk dér. Falder flytningen (tom kurv, ingen JS),
   begrænses bredden, så bjælken aldrig spænder over hele sidens bredde. */
.nytte-cart-page [data-nytte-delivery-meter='page'] {
  max-width: 48rem;
}

.wc-block-cart__main [data-nytte-delivery-meter='page'] {
  border: 1.5px solid #e0ddce;
  border-radius: 20px;
  box-shadow: none;
  margin-top: 0;
  max-width: none;
  padding: 22px 24px;
}

.wc-block-cart__main .nytte-delivery-meter__row {
  font-size: 1rem;
  margin-bottom: 12px;
}

.wc-block-cart__main .nytte-delivery-meter__progress {
  background: #eae7da;
  height: 9px;
}

/* Opsummeringen har allerede kortudtryk via .wc-block-components-sidebar
   (hvid, kant, radius, skygge, sticky) — ingen ekstra kasse her. */

/* USP'erne som mørkegrønt kort med flueben, jf. mockuppens linje 128. Var
   før en tynd linje over tre kolonner med prikker, som forsvandt på siden. */
.nytte-commerce-trust {
  background: var(--nytte-forest, #17402a);
  border-radius: 22px;
  border-top: 0;
  color: #bfd8c4;
  padding: 24px 26px;
}

.nytte-commerce-trust > div {
  padding-left: 1.5rem;
}

.nytte-commerce-trust > div::before {
  background: none;
  border-radius: 0;
  color: #7fb88e;
  content: "✓";
  font-weight: 700;
  height: auto;
  top: 0;
  width: auto;
}

.nytte-commerce-trust strong {
  color: #fff;
}

.nytte-commerce-trust span {
  color: #bfd8c4;
}

/* ── UI-lint 2026-08-15: fund fra tre-viewport-gennemgangen ──────────────── */

/* Fragtlinjens beskrivelse (»Valgfrit udleveringssted«) stod med 10 px skrift
   i kurv og kasse — mikroskrift på den side, hvor kunden kontrollerer sit
   beløb. */
.wc-block-components-totals-shipping__via {
  color: #6b7a63;
  font-size: 0.8125rem !important;
}

/* Antalsfeltet stod med 13 px skrift. Under 16 px zoomer iOS automatisk ind,
   når feltet fokuseres, og layoutet hopper. Gælder også draweren. */
.wc-block-components-quantity-selector__input {
  font-size: 1rem !important;
}

@media (max-width: 900px) {
  /* Adressefelter under 16 px udløser samme iOS-zoom. Kun linje 2-feltet lå
     under grænsen; reglen dækker hele formularen, så et nyt felt ikke
     arver problemet. */
  .wc-block-components-address-form input:not([type="checkbox"]):not([type="radio"]),
  .wc-block-components-text-input input {
    font-size: 1rem !important;
  }

  /* Tap-mål under 24 px på kurv og kasse: rabatkode-panelet (18 px),
     adresselinje 2-knappen (18 px) og papirkurven (24 px). Papirkurvens
     polstring modsvares af negativ margen, så layoutet ikke flytter sig. */
  .wc-block-components-panel__button {
    padding-block: 0.75rem !important;
  }

  .wc-block-components-address-form__address_2-toggle {
    display: inline-block;
    padding-block: 0.65rem;
  }

  /* Knappen har fast 24 px-boks, så padding alene voksede den ikke.
     Eksplicit 44 px med negativ margen, så layoutet ikke flytter sig. */
  .wc-block-cart-item__remove-link {
    align-items: center;
    display: inline-flex;
    height: 44px !important;
    justify-content: center;
    margin: -10px !important;
    width: 44px !important;
  }

  /* Logoet i handelsheaderen var kun 20 px højt som tap-mål. */
  .nytte-commerce-logo {
    margin-block: -8px;
    padding-block: 8px;
  }
}

/* Linjesum over antalsvaelger i kurvens hoejrekolonne (mockuppens
   raekkefoelge). Totalcellen er selv en flex-RAEKKE hos WooCommerce, saa den
   flyttede vaelger lagde sig ved siden af prisen. Cellen SKAL forblive
   table-cell: som flexcontainer strakte den sig ikke til raekkens hoejde,
   saa kortets hoejre ende (hjoerneradier + hoejre kant) sluttede 12+ px over
   billed- og produktcellerne — et synligt trin i kortets bund. Boernene
   (priswrapper og antalsvaelger) er blokbokse og stakker selv lodret med
   prisen oeverst. `!important` mod WooCommerces sent-indlaeste cart.css. */
.wc-block-cart .wc-block-cart-item__total {
  display: table-cell !important;
  text-align: right !important;
  vertical-align: middle !important;
}

.wc-block-cart .wc-block-cart-item__total .wc-block-cart-item__total-price-and-sale-badge-wrapper {
  display: flex !important;
  justify-content: flex-end;
}

.wc-block-cart .wc-block-cart-item__total .wc-block-cart-item__quantity {
  align-items: center;
  display: flex !important;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px !important;
}

/* Betalingsmaerkerne under CTA-knapperne (produktside, kurvside og
   kurv-drawer). Basisudtrykket bor i home.css (footeren); her centreres
   raekken, og de hvide plader faar en kant, fordi de staar paa lys baggrund
   i stedet for footerens moerkegroenne. */
.nytte-payment__marks--cta {
  justify-content: center;
  margin: 0.875rem 0 0;
}

/* Seks maerker i footerens maal fylder 352 px (6 x 52 + 5 x 8). Kurvsidens
   hoejre kolonne er smallere end det, saa MobilePay faldt ned paa en anden
   raekke (ejerens oebservation 2026-08-21). Maerkerne skaleres ned i
   CTA-varianten i stedet for at goere kolonnen bredere: 6 x 44 + 5 x 6 =
   294 px, som ogsaa holder i drawerens og kassens smallere flader.
   Dobbeltklassen loefter specificiteten over gap-reglen i home.css'
   600 px-media query, saa raekken ikke bliver bredere paa mobil. */
.nytte-payment__marks.nytte-payment__marks--cta {
  /* Garantien: uanset hvor smal flanken bliver, kan raekken ikke ombryde.
     Bliver der for lidt plads, krymper pladerne i stedet. Maalt kan
     kolonnen kun anslaas herfra, fordi butikssiderne staar bag
     coming-soon for gaester. */
  flex-wrap: nowrap;
  gap: 0.375rem;
}

.nytte-payment__marks--cta .nytte-payment-mark {
  border: 1px solid var(--nytte-border);
  flex: 0 1 auto;
  height: 1.625rem;
  /* Uden min-width: 0 naegter et flex-item at krympe under sit indhold, og
     nowrap ville give overloeb i stedet for mindre plader. */
  min-width: 0;
  padding: 0.1875rem 0.3125rem;
  width: 2.75rem;
}

/* Opsummeringens miniature stak 26 px ud over sin raekke og hakkede med sin
   hvide baggrund ned over skillelinjen under den. Raekken centreres, og
   billedet holdes inde i sin 48 px-ramme med runde hjoerner. */
.wc-block-components-order-summary-item {
  align-items: center !important;
}

.wc-block-components-order-summary-item__image {
  flex-shrink: 0;
}

.wc-block-components-order-summary-item__image img {
  aspect-ratio: 1;
  border-radius: 10px;
  display: block;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain;
}