/*
 * WooCommerce renders our size/materiale/tekst/... details as a plain
 * <dl class="variation"> list (woocommerce_get_item_data()), both on the
 * cart page AND inside the header mini-cart/off-canvas cart flyout. Many
 * themes style that list as one compact "/ "-separated line (fine for a
 * single variation like "Size: M"), which turns our much longer design
 * summary into an unreadable wall of text.
 *
 * This forces every field onto its own line wherever that markup shows up
 * (any page, since the mini-cart can be opened from the header on any
 * page) - loaded sitewide on purpose, kept intentionally tiny.
 */
.variation {
    display: block !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}

.variation dt,
.variation dd {
    display: block !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: both !important;
}

.variation dt::before,
.variation dt::after {
    content: none !important;
}

.variation dt {
    font-weight: 600;
    color: #1a202c;
}

.variation dd {
    color: #4a5568;
    margin-bottom: 4px !important;
}

.variation dd p {
    margin: 0 !important;
}

/*
 * The WooCommerce Cart/Checkout BLOCKS (React + Store API) render the same
 * item data through a completely different component -
 * <div class="wc-block-components-product-details"> full of
 * <span class="wc-block-components-product-details__<slug>"> entries,
 * each followed by an aria-hidden " / " separator meant for a single
 * short line (fine for "Size: M / Color: Red", not for a long design
 * summary). Style it the same way as the classic .variation list above:
 * one field per line, separators hidden.
 */
.wc-block-components-product-details {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
}

.wc-block-components-product-details > span {
    display: block;
    margin-bottom: 4px;
}

.wc-block-components-product-details > span > span[aria-hidden="true"] {
    display: none;
}

.wc-block-components-product-details__name {
    display: block !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1px;
}

.wc-block-components-product-details__value {
    display: block !important;
    color: #1e293b !important;
    text-decoration: none !important;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* The design thumbnail is the real proof of what the customer ordered -
   give it a bit more room and a subtle frame instead of the cramped
   80x80 default so the design is actually legible at a glance. */
/* Woo cart BLOCKS use a 80px image column. A landscape plate thumb
   (140px) overflowed into the product title. Give the image column
   room and keep the plate's real aspect ratio. */
.wc-block-cart-items .wc-block-cart-items__row {
    grid-template-columns: 148px minmax(0, 1fr) auto !important;
    position: relative;
}

.wc-block-cart-item__product {
    position: relative;
    padding-right: 88px !important;
}

.wc-block-cart-item__remove-link {
    position: absolute !important;
    top: 0;
    right: 0;
    z-index: 4;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 12px !important;
    margin: 0 !important;
    border: 0;
    border-radius: 8px;
    background: #f4f1ec !important;
    color: #a20401 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer;
}

.wc-block-cart-item__remove-link svg {
    width: 18px;
    height: 18px;
    pointer-events: none;
    flex: 0 0 auto;
}

.wc-block-cart-item__remove-link::after {
    content: "Slet";
}

.wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
    position: absolute !important;
}

.wc-block-cart-items .wc-block-cart-items__row:has(.visaro-cart-sides) {
    grid-template-columns: 280px minmax(0, 1fr) auto !important;
}

.wc-block-cart-item__image,
.wc-block-components-order-summary-item__image {
    flex: 0 0 auto !important;
    width: 148px !important;
    max-width: 148px !important;
    overflow: visible;
    aspect-ratio: auto !important;
    align-self: start !important;
    vertical-align: top !important;
}

.wc-block-cart-item__image:has(.visaro-cart-sides),
.wc-block-components-order-summary-item__image:has(.visaro-cart-sides) {
    width: auto !important;
    max-width: 280px !important;
}

.visaro-cart-sides {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.visaro-cart-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.visaro-cart-side em {
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img,
.visaro-cart-preview-thumb,
.woocommerce-cart table.cart img.visaro-cart-preview-thumb,
.woocommerce-checkout table.cart img.visaro-cart-preview-thumb,
#add_payment_method table.cart img.visaro-cart-preview-thumb {
    width: auto !important;
    height: auto !important;
    max-width: 140px !important;
    max-height: 110px !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px;
}

.visaro-startup-fee-product-note {
    margin: 0.6em 0 1em;
    font-size: 0.92em;
    color: #3d4a41;
}

.visaro-cart-stk {
    font-weight: 500;
    color: #5a5752;
    letter-spacing: 0.01em;
}

.woocommerce-cart .cart_totals tr.fee[hidden],
.woocommerce-checkout tr.fee[hidden] {
    display: none !important;
}

/*
 * Theme mini-cart qty is 70px with +/- overlapping the field, so 150
 * looks like 1. Leave room for four digits and keep +/- clickable above
 * the input (WCMMQO was resetting the value; CSS must not block clicks).
 */
.ts-tiny-cart-wrapper .cart-item-wrapper .quantity,
.woocommerce .ts-tiny-cart-wrapper .cart-item-wrapper .quantity {
    width: 112px !important;
    position: relative;
    z-index: 2;
}

.ts-tiny-cart-wrapper .cart-item-wrapper .quantity .number-button,
.woocommerce .ts-tiny-cart-wrapper .cart-item-wrapper .quantity .number-button {
    overflow: visible;
}

.ts-tiny-cart-wrapper .cart-item-wrapper .quantity input.qty,
.woocommerce .ts-tiny-cart-wrapper .cart-item-wrapper .quantity input.qty {
    width: 112px !important;
    padding: 0 26px !important;
    overflow: visible;
    text-align: center;
    position: relative;
    z-index: 1;
}

.ts-tiny-cart-wrapper .cart-item-wrapper .quantity .minus,
.ts-tiny-cart-wrapper .cart-item-wrapper .quantity .plus,
.woocommerce .ts-tiny-cart-wrapper .cart-item-wrapper .quantity .minus,
.woocommerce .ts-tiny-cart-wrapper .cart-item-wrapper .quantity .plus {
    width: 26px !important;
    height: 26px !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    cursor: pointer;
}

/* Header KURV: skilt + opstart so full price is readable */
.ts-tiny-cart-wrapper .visaro-mc-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
    line-height: 1.35;
}

.ts-tiny-cart-wrapper .visaro-mc-skilt,
.ts-tiny-cart-wrapper .visaro-mc-opstart {
    display: block;
    font-size: 12px;
    color: #3d4a41;
}

.ts-tiny-cart-wrapper .visaro-mc-skilt em,
.ts-tiny-cart-wrapper .visaro-mc-opstart em {
    font-style: normal;
    font-weight: 600;
    color: #64748b;
    margin-right: 4px;
}

/* WCFAD qty discount: struck original skilt unit + discounted now-price */
.visaro-skilt-unit {
    display: inline;
    white-space: nowrap;
}

.visaro-skilt-unit-was,
del.visaro-skilt-unit-was {
    text-decoration: line-through;
    opacity: 0.65;
    font-weight: 400;
    margin-right: 2px;
}

.visaro-skilt-unit-now {
    font-weight: 600;
    color: #1a202c;
}

.ts-tiny-cart-wrapper .visaro-skilt-unit-now {
    color: #3d4a41;
}

.wc-block-components-product-price .visaro-skilt-unit,
td.product-price .visaro-skilt-unit {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}

.ts-tiny-cart-wrapper .visaro-mc-opstart {
    color: #1a202c;
}

.ts-tiny-cart-wrapper .visaro-mc-subtotal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.ts-tiny-cart-wrapper .visaro-mc-subtotal-amount {
    font-weight: 600;
}

.ts-tiny-cart-wrapper .visaro-mc-subtotal-note {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

/* Header KURV: WCFAD fees/discounts above Subtotal (theme label hidden) */
.ts-tiny-cart-wrapper .dropdown-footer .total:has(.visaro-mc-footer) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.ts-tiny-cart-wrapper .dropdown-footer .total:has(.visaro-mc-footer) > .total-title {
    display: none;
}

.ts-tiny-cart-wrapper .visaro-mc-footer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.ts-tiny-cart-wrapper .visaro-mc-fee-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ts-tiny-cart-wrapper .visaro-mc-fee-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 12px;
    line-height: 1.35;
    color: #3d4a41;
}

.ts-tiny-cart-wrapper .visaro-mc-fee-label {
    flex: 1 1 auto;
    font-weight: 500;
}

.ts-tiny-cart-wrapper .visaro-mc-fee-amount {
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: 600;
}

.ts-tiny-cart-wrapper .visaro-mc-final {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-weight: 600;
    color: #1a202c;
}

.ts-tiny-cart-wrapper .visaro-mc-final-label {
    flex: 1 1 auto;
}

.ts-tiny-cart-wrapper .visaro-mc-final-amount {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Line TOTAL: skilt+opstart amount, then mængderabat note underneath */
.visaro-line-total-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    line-height: 1.35;
}

.wc-block-cart-item__total,
.wc-block-components-order-summary-item__total,
td.product-subtotal {
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 4px;
}

.wc-block-cart-item__total .wc-block-cart-item__total-price-and-sale-badge-wrapper,
.wc-block-cart-item__total .price,
.wc-block-cart-item__total .wc-block-components-product-price {
    display: block;
    width: auto;
}

.wc-block-cart-item__total .visaro-line-rabat,
.wc-block-components-order-summary-item__total .visaro-line-rabat,
.visaro-line-total-wrap .visaro-line-rabat,
.ts-tiny-cart-wrapper .visaro-line-rabat {
    display: block;
    margin-top: 0;
    max-width: 11rem;
    font-size: 12px;
    font-weight: 500;
    color: #3d4a41;
    text-align: right;
    line-height: 1.35;
}

.ts-tiny-cart-wrapper .visaro-line-total-wrap {
    align-items: flex-start;
}

.ts-tiny-cart-wrapper .visaro-line-rabat {
    text-align: left;
}

.visaro-line-rabat-label {
    font-weight: 500;
}

.visaro-line-rabat-amount {
    font-weight: 600;
    white-space: nowrap;
}

/* Product page price breakdown (shared with KURV structure) */
.summary .price .visaro-pdp-price,
.product .price .visaro-pdp-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.35;
    color: #1a202c;
}

.summary .price .visaro-pdp-price__skilt,
.summary .price .visaro-pdp-price__opstart,
.product .price .visaro-pdp-price__skilt,
.product .price .visaro-pdp-price__opstart {
    display: block;
    font-size: 0.92rem;
    font-weight: 500;
    color: #3d4a41;
}

.summary .price .visaro-pdp-price__skilt em,
.summary .price .visaro-pdp-price__opstart em,
.product .price .visaro-pdp-price__skilt em,
.product .price .visaro-pdp-price__opstart em {
    font-style: normal;
    font-weight: 600;
    color: #64748b;
    margin-right: 6px;
}

.summary .price .visaro-pdp-price__total,
.product .price .visaro-pdp-price__total {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #141414;
}

.summary .price .visaro-pdp-price__note,
.product .price .visaro-pdp-price__note {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}

.summary .price .visaro-pdp-price__rabat,
.product .price .visaro-pdp-price__rabat {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #a20401;
    text-align: left;
}