/* =====================================================
   BUTIK OCH PRODUKTKORT – Uppsala Vitvaror
   ===================================================== */

/* === Tom kundvagn – cart-empty.php === */
.uv-cart-page-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--uv-spacing-3xl) var(--uv-spacing-md);
    max-width: 480px;
    margin: 0 auto;
}

.uv-cart-page-empty__icon {
    width: 72px;
    height: 72px;
    color: var(--uv-color-muted);
    margin-bottom: var(--uv-spacing-lg);
}

.uv-cart-page-empty__svg {
    width: 100%;
    height: 100%;
}

.uv-cart-page-empty__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--uv-color-dark);
    margin-bottom: var(--uv-spacing-sm);
}

.uv-cart-page-empty__text {
    color: var(--uv-color-muted);
    font-size: var(--uv-font-size-base);
    margin-bottom: var(--uv-spacing-xl);
    line-height: 1.6;
}

/* === Brödsmulor (breadcrumbs) === */
.uv-breadcrumbs-wrapper {
    padding-top: var(--uv-spacing-sm);
    /* Kompenserar sticky header: breadcrumbs täcks ej av headern vid sidladdning */
    scroll-margin-top: calc( var(--uv-header-height, 70px) + var(--uv-spacing-sm) );
}

.uv-breadcrumbs {
    margin-bottom: var(--uv-spacing-md);
}

.woocommerce-breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--uv-font-size-sm);
    color: var(--uv-color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.woocommerce-breadcrumb a {
    color: var(--uv-color-muted);
    text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
    color: var(--uv-color-primary);
    text-decoration: underline;
}

.uv-breadcrumbs-sep {
    color: var(--uv-color-border);
}

/* Butikssida: extra padding-top för att kompensera sticky header på mobil */
@media (max-width: 768px) {
    .uv-wc-main {
        padding-top: calc( var(--uv-header-height, 70px) + var(--uv-spacing-sm) );
    }
}

/* === Butikssida layout === */
.uv-wc-main {
    padding-top: var(--uv-spacing-lg);
    padding-bottom: var(--uv-spacing-3xl);
}

.uv-shop-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--uv-spacing-xl);
    align-items: start;
}

@media (max-width: 1024px) {
    .uv-shop-layout { grid-template-columns: 1fr; }
}

/* Grid-barn får min-width:0 – annars kan innehållet (produktkort, långa
   titlar) tvinga ut kolumnen utanför viewporten på mobil (v1.5.0, punkt 7) */
.uv-shop-content,
.uv-shop-sidebar {
    min-width: 0;
}

/* Sidopanelens filter – off-canvas på mobil/surfplatta (Bug 3.4) */
@media (max-width: 1024px) {
    .uv-shop-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(85vw, 360px);
        max-width: 360px;
        z-index: 9995;
        background: var(--uv-color-white);
        transform: translateX(-100%);
        transition: transform var(--uv-transition-slow, 0.3s ease);
        box-shadow: var(--uv-shadow-lg, 0 10px 40px rgba(0, 0, 0, 0.2));
    }

    .uv-shop-sidebar.is-open {
        transform: translateX(0);
    }

    .uv-shop-sidebar .uv-filter-panel {
        height: 100%;
    }
}

/* Filterkolumnen är alltid inline (sticky) på desktop */
@media (min-width: 1025px) {
    .uv-shop-sidebar {
        position: sticky;
        top: calc(var(--uv-header-height, 70px) + var(--uv-spacing-md));
    }

    /* v1.6.4 (punkt 4): panelen får aldrig bli högre än synliga ytan –
       blir innehållet högre visas en intern rullningslist så att alla
       filteralternativ kan nås utan att panelen kapas. Mushjul,
       styrplatta och tangentbord fungerar via nativ overflow-scroll;
       overscroll-behavior hindrar att sidan bakom börjar rulla. */
    .uv-shop-sidebar .uv-filter-panel {
        max-height: calc(100vh - var(--uv-header-height, 70px) - var(--uv-spacing-md) * 2);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
    }

    /* Stängknappen hör bara hemma i off-canvas-läget (v1.5.0, punkt 12) */
    .uv-filter-toggle-close {
        display: none;
    }
}

/* === Sidhuvud för arkiv === */
.uv-archive-header {
    margin-bottom: var(--uv-spacing-lg);
}

.uv-archive-header__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--uv-color-dark);
    margin-bottom: var(--uv-spacing-sm);
}

.uv-archive-header__desc {
    color: var(--uv-color-muted);
    font-size: var(--uv-font-size-base);
    margin-bottom: var(--uv-spacing-md);
}

/* === Verktygsfält === */
.uv-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--uv-spacing-sm);
    margin-bottom: var(--uv-spacing-lg);
    padding-bottom: var(--uv-spacing-md);
    border-bottom: 1px solid var(--uv-color-border);
}

.uv-shop-toolbar__left,
.uv-shop-toolbar__right {
    display: flex;
    align-items: center;
    gap: var(--uv-spacing-md);
}

/* Mobil: filterknapp till vänster, produktantal till höger, vertikalt
   centrerade med jämna yttermarginaler; sorteringen på egen rad (punkt 8) */
@media (max-width: 768px) {
    .uv-shop-toolbar {
        row-gap: var(--uv-spacing-sm);
    }
    .uv-shop-toolbar__left {
        flex: 1 1 100%;
        justify-content: space-between;
        align-items: center;
    }
    .uv-shop-toolbar__left .woocommerce-result-count {
        margin: 0;
        text-align: right;
    }
    .uv-shop-toolbar__right {
        flex: 1 1 100%;
        justify-content: flex-start;
        margin-top: var(--uv-spacing-sm);
    }
    /* Sorteringen fyller hela bredden på mobil */
    .uv-shop-toolbar__right .woocommerce-ordering {
        width: 100%;
        margin: 0;
    }
    .uv-shop-toolbar__right .woocommerce-ordering select {
        width: 100%;
        min-height: 44px;
        font-size: var(--uv-font-size-base);
    }
    /* Skydd mot dubbla sorteringsinstanser (t.ex. plugin/tema-krock) */
    .uv-shop-toolbar__right .woocommerce-ordering ~ .woocommerce-ordering {
        display: none;
    }
}

.woocommerce-result-count {
    font-size: var(--uv-font-size-sm);
    color: var(--uv-color-muted);
    margin: 0;
}

.woocommerce-ordering select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1.5px solid var(--uv-color-border);
    border-radius: var(--uv-radius-md);
    font-size: var(--uv-font-size-sm);
    font-family: var(--uv-font-family);
    background-color: var(--uv-color-white);
    color: var(--uv-color-text);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23697174' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    min-height: 40px;
    transition: border-color var(--uv-transition-fast);
}

.woocommerce-ordering select:focus {
    outline: none;
    border-color: var(--uv-color-primary);
    box-shadow: 0 0 0 3px rgba(230, 102, 12, 0.15);
}

/* Visningsläge-knappar */
.uv-view-toggle {
    display: flex;
    border: 1.5px solid var(--uv-color-border);
    border-radius: var(--uv-radius-md);
    overflow: hidden;
}

.uv-view-toggle-btn {
    background: none;
    border: none;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    color: var(--uv-color-muted);
    display: flex;
    align-items: center;
    min-height: 40px;
    transition: background-color var(--uv-transition-fast), color var(--uv-transition-fast);
}

.uv-view-toggle-btn svg { width: 18px; height: 18px; }

.uv-view-toggle-btn.is-active,
.uv-view-toggle-btn:hover {
    background-color: var(--uv-color-light-background);
    color: var(--uv-color-primary);
}

/* === Aktiva filter chips === */
.uv-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uv-spacing-xs);
    margin-bottom: var(--uv-spacing-md);
}

/* Chips: orange bakgrund kräver VIT text/ikon – även hover/fokus (punkt 13) */
.uv-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--uv-spacing-xs);
    padding: 0.375rem 0.75rem;
    background: var(--uv-color-primary);
    color: var(--uv-color-white);
    border: 1px solid var(--uv-color-primary);
    border-radius: var(--uv-radius-full);
    font-size: var(--uv-font-size-xs);
    font-weight: 600;
}

.uv-filter-chip:hover,
.uv-filter-chip:focus-within {
    color: var(--uv-color-white);
}

.uv-filter-chip__remove {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: inherit;
    padding: 0;
    margin-left: 2px;
    opacity: 0.7;
    transition: opacity var(--uv-transition-fast);
}

.uv-filter-chip__remove:hover,
.uv-filter-chip__remove:focus-visible { opacity: 1; color: var(--uv-color-white); }
.uv-filter-chip__remove svg { width: 12px; height: 12px; }

.uv-filter-clear-all {
    font-size: var(--uv-font-size-xs);
    font-weight: 600;
    color: var(--uv-color-error);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.375rem 0.5rem;
    text-decoration: underline;
}

/* Avstånd: WooCommerce sortering/resultatantal → produktgrid */
.woocommerce-ordering,
.woocommerce-result-count {
    margin-bottom: var(--uv-spacing-md);
}

/* === Produktgrid === */
.uv-products-grid {
    display: grid;
    gap: var(--uv-spacing-lg);
    margin-top: var(--uv-spacing-lg);
}

.uv-products-grid--compact {
    grid-template-columns: repeat(4, 1fr);
}

.uv-products-grid--spacious {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1280px) {
    .uv-products-grid--compact { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .uv-products-grid--compact  { grid-template-columns: repeat(2, 1fr); }
    .uv-products-grid--spacious { grid-template-columns: 1fr; }
    .uv-products-grid { gap: var(--uv-spacing-md); }
}

@media (max-width: 360px) {
    .uv-products-grid--compact { grid-template-columns: 1fr; }
}

/* Kort får aldrig tvinga ut gridkolumner utanför skärmen (punkt 7) */
.uv-products-grid > *,
ul.products > li {
    min-width: 0;
}

/* WooCommerce loop fallback */
ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--uv-spacing-lg);
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: var(--uv-spacing-lg) !important;
}

@media (max-width: 1024px) {
    ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--uv-spacing-md); }
}

/* === Produktkort === */
.uv-product-card {
    background: var(--uv-color-white);
    border: 1.5px solid var(--uv-color-border);
    border-radius: var(--uv-radius-lg);
    overflow: hidden;
    transition: box-shadow var(--uv-transition-base), transform var(--uv-transition-base), border-color var(--uv-transition-base);
    position: relative;
    display: flex;
    flex-direction: column;
}

.uv-product-card:hover {
    box-shadow: var(--uv-shadow-md);
    border-color: rgba(230, 102, 12, 0.2);
    transform: translateY(-2px);
}

.uv-product-card__media {
    position: relative;
    overflow: hidden;
    background: var(--uv-color-light-background);
    aspect-ratio: 1 / 1;
}

.uv-product-card__image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.uv-product-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity var(--uv-transition-slow), transform var(--uv-transition-slow);
}

.uv-product-card__img--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
}

@media (hover: hover) {
    .uv-product-card:hover .uv-product-card__img--primary {
        opacity: 0;
    }
    .uv-product-card:hover .uv-product-card__img--hover {
        opacity: 1;
    }
}

/* Garantimärke */
.uv-product-card__warranty-badge {
    position: static;
    background: rgba(36, 43, 45, 0.85);
    color: var(--uv-color-white);
    border-radius: var(--uv-radius-sm);
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 3px;
    backdrop-filter: blur(4px);
    /* v1.6.1 (punkt 3): utnyttja hela tillgängliga bredden innan trunkering */
    max-width: 100%;
    min-width: 0;
}

.uv-product-card__warranty-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.uv-product-card__warranty-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Reabadge */
.uv-product-card__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--uv-color-error);
    color: var(--uv-color-white);
    border-radius: var(--uv-radius-sm);
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
}

/* Favoritknapp på kortet */
.uv-product-card__favorite {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--uv-color-white);
    border: 1.5px solid var(--uv-color-border);
    border-radius: var(--uv-radius-full);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--uv-transition-fast), border-color var(--uv-transition-fast), color var(--uv-transition-fast);
    color: var(--uv-color-muted);
    padding: 0;
    box-shadow: var(--uv-shadow-sm);
}

.uv-product-card__favorite:hover,
.uv-product-card__favorite.is-favorite {
    background-color: #fff0e8;
    border-color: var(--uv-color-primary);
    color: var(--uv-color-primary);
}

.uv-product-card__favorite svg { width: 18px; height: 18px; }

.uv-product-card__favorite.is-favorite .uv-heart-icon {
    fill: var(--uv-color-primary);
}

/* Kortets textinnehåll */
.uv-product-card__body {
    padding: var(--uv-spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--uv-spacing-xs);
    flex: 1;
    min-width: 0;
}

.uv-product-card__cat {
    display: block;
    font-size: var(--uv-font-size-xs);
    color: var(--uv-color-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Titel: exakt EN rad med ellipsis – ger lika höga kort (v1.5.0, punkt 11) */
/* Varumärkesrad (v1.6.2, punkt 7) – reserverad höjd, en rad */
.uv-product-card__brand {
    font-size: var(--uv-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--uv-color-muted);
    line-height: 1.2rem;
    min-height: 1.2rem;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.125rem;
}

.uv-product-card__title {
    font-size: var(--uv-font-size-base);
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    min-width: 0;
}

.uv-product-card__title-link {
    color: var(--uv-color-text);
    text-decoration: none;
    transition: color var(--uv-transition-fast);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uv-product-card__title-link:hover {
    color: var(--uv-color-primary);
}

/* Pris: komplett WooCommerce-data bevaras, men kortets synliga prisrad hålls
   till en rad. Ovanligt långa enkla priser, intervall och reapriser klipps
   endast visuellt med ellipsis; produktsidan visar alltid hela priset. */
.uv-product-card__price {
    font-size: clamp(0.75rem, calc(0.6rem + 0.35vw), var(--uv-font-size-base));
    font-weight: 700;
    color: var(--uv-color-text);
    display: block;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.5em;
}

.uv-product-card__price .price {
    display: inline;
    max-width: 100%;
    white-space: inherit;
}

.uv-product-card__price del,
.uv-product-card__price ins {
    display: inline;
    white-space: inherit;
}

.uv-product-card__price .woocommerce-Price-amount {
    white-space: inherit;
}

.uv-product-card__price del {
    color: var(--uv-color-muted);
    font-weight: 400;
    font-size: var(--uv-font-size-sm);
    text-decoration: line-through;
}

.uv-product-card__price ins {
    color: var(--uv-color-error);
    text-decoration: none;
}

.uv-product-card__stock {
    font-size: var(--uv-font-size-xs);
    font-weight: 600;
    min-height: 1.2em;
}

/* Nedre knappzon fäst i botten → jämn kort-höjd i hela gridden (punkt 11) */
.uv-product-card__footer {
    margin-top: auto;
    padding-top: var(--uv-spacing-xs);
}

.uv-stock--in    { color: var(--uv-color-success); }
.uv-stock--low   { color: #b45309; }
.uv-stock--out   { color: var(--uv-color-error); }
.uv-stock--backorder { color: var(--uv-color-muted); }

/* === Sidopanelens filter === */
.uv-filter-panel__title {
    font-size: var(--uv-font-size-lg);
    font-weight: 700;
    margin-bottom: var(--uv-spacing-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.uv-filter-section {
    border-bottom: 1px solid var(--uv-color-border);
}

.uv-filter-section__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: var(--uv-spacing-md) 0;
    font-size: var(--uv-font-size-sm);
    font-weight: 700;
    color: var(--uv-color-text);
    cursor: pointer;
    text-align: left;
}

.uv-filter-section__trigger:hover {
    color: var(--uv-color-primary);
}

.uv-filter-section__icon {
    transition: transform var(--uv-transition-base);
    flex-shrink: 0;
}

.uv-filter-section__trigger[aria-expanded="true"] .uv-filter-section__icon {
    transform: rotate(180deg);
}

.uv-filter-section__body {
    padding-bottom: var(--uv-spacing-md);
}

.uv-filter-section__body[hidden] { display: none; }

.uv-filter-option {
    display: flex;
    align-items: center;
    gap: var(--uv-spacing-sm);
    padding: 0.375rem 0;
    cursor: pointer;
    font-size: var(--uv-font-size-sm);
}

.uv-filter-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--uv-color-border);
    border-radius: 3px;
    cursor: pointer;
    accent-color: var(--uv-color-primary);
    flex-shrink: 0;
}

.uv-filter-option__count {
    color: var(--uv-color-muted);
    font-size: var(--uv-font-size-xs);
    margin-left: auto;
}

/* Prisslider */
.uv-price-range {
    display: flex;
    align-items: center;
    gap: var(--uv-spacing-sm);
    flex-wrap: wrap;
}

.uv-price-input {
    width: 80px;
    padding: 0.375rem 0.5rem;
    border: 1.5px solid var(--uv-color-border);
    border-radius: var(--uv-radius-sm);
    font-size: var(--uv-font-size-sm);
    font-family: var(--uv-font-family);
    text-align: center;
    min-height: 36px;
}

.uv-price-input:focus {
    outline: none;
    border-color: var(--uv-color-primary);
}

/* Mobilfilterknapp */
.uv-filter-toggle-btn {
    display: none;
}

@media (max-width: 1024px) {
    .uv-filter-toggle-btn {
        display: inline-flex;
    }
}

/* Mobilfilterpanel */
.uv-mobile-filter-panel {
    position: fixed;
    inset: 0;
    background: var(--uv-color-white);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform var(--uv-transition-slow);
}

.uv-mobile-filter-panel.is-open {
    transform: translateX(0);
}

.uv-mobile-filter-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--uv-spacing-md) var(--uv-spacing-lg);
    border-bottom: 1px solid var(--uv-color-border);
    position: sticky;
    top: 0;
    background: var(--uv-color-white);
    z-index: 1;
}

.uv-mobile-filter-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--uv-spacing-lg);
}

.uv-mobile-filter-panel__footer {
    position: sticky;
    bottom: 0;
    background: var(--uv-color-white);
    border-top: 1px solid var(--uv-color-border);
    padding: var(--uv-spacing-md) var(--uv-spacing-lg);
    display: flex;
    gap: var(--uv-spacing-sm);
}


/* =====================================================
   Paginering
   ===================================================== */
.woocommerce-pagination {
    display: flex;
    justify-content: center;
    margin-top: var(--uv-spacing-2xl);
    margin-bottom: var(--uv-spacing-xl);
}

.woocommerce-pagination ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-pagination ul li { display: flex; }

.woocommerce-pagination ul .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.75rem;
    border: 1.5px solid var(--uv-color-border);
    border-radius: var(--uv-radius-sm);
    font-size: var(--uv-font-size-sm);
    font-weight: 500;
    color: var(--uv-color-text);
    text-decoration: none;
    background: var(--uv-color-white);
    transition: border-color var(--uv-transition-fast), color var(--uv-transition-fast), background var(--uv-transition-fast);
    white-space: nowrap;
}

.woocommerce-pagination ul .page-numbers:hover {
    border-color: var(--uv-color-primary);
    color: var(--uv-color-primary);
}

.woocommerce-pagination ul .page-numbers.current {
    background: var(--uv-color-primary);
    border-color: var(--uv-color-primary);
    color: var(--uv-color-white);
    pointer-events: none;
    font-weight: 700;
}

.woocommerce-pagination ul .page-numbers.dots {
    border-color: transparent;
    pointer-events: none;
    color: var(--uv-color-muted);
    min-width: 24px;
}

.woocommerce-pagination ul .page-numbers.prev,
.woocommerce-pagination ul .page-numbers.next {
    font-size: 1.25rem;
    font-weight: 400;
}

/* === Laddningsindikator === */
.uv-shop-loading {
    position: relative;
}

.uv-shop-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uv-products-grid.is-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity var(--uv-transition-base);
}

/* =====================================================
   Filterpanel – design som matchar temat
   ===================================================== */
.uv-filter-panel {
    background: var(--uv-color-white);
    border-right: 1px solid var(--uv-color-border);
    height: 100%;
    overflow-y: auto;
}

.uv-filter-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--uv-spacing-lg);
    border-bottom: 1px solid var(--uv-color-border);
    position: sticky;
    top: 0;
    background: var(--uv-color-white);
    z-index: 1;
}

.uv-filter-panel__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--uv-color-dark);
    margin: 0;
}

/* Filtersektion (accordion) */
.uv-filter-section {
    border-bottom: 1px solid var(--uv-color-border);
}

.uv-filter-section__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--uv-spacing-md) var(--uv-spacing-lg);
    background: none;
    border: none;
    font-size: var(--uv-font-size-sm);
    font-weight: 600;
    color: var(--uv-color-dark);
    font-family: var(--uv-font-family);
    cursor: pointer;
    text-align: left;
    transition: background var(--uv-transition-fast);
}

.uv-filter-section__toggle:hover {
    background: var(--uv-color-light-background);
}

.uv-filter-section__chevron {
    flex-shrink: 0;
    transition: transform var(--uv-transition-fast);
}

.uv-filter-section__toggle[aria-expanded="false"] .uv-filter-section__chevron {
    transform: rotate(-90deg);
}

.uv-filter-section__body {
    padding: var(--uv-spacing-sm) var(--uv-spacing-lg) var(--uv-spacing-md);
}

.uv-filter-section__toggle[aria-expanded="false"] + .uv-filter-section__body {
    display: none;
}

/* Filteralternativ – checkboxar */
.uv-filter-options {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.uv-filter-option {
    display: flex;
}

.uv-filter-option label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--uv-font-size-sm);
    color: var(--uv-color-text);
    cursor: pointer;
    line-height: 1.4;
    width: 100%;
}

.uv-filter-option input[type="checkbox"],
.uv-filter-checkbox {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--uv-color-primary);
    cursor: pointer;
}

.uv-filter-option__count {
    color: var(--uv-color-muted);
    font-size: 0.75rem;
}

/* Prisfilter */
.uv-filter-price__inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.uv-filter-price__inputs .uv-input {
    /* v1.7.9 (punkt 6.1): flexibel bredd i stället för fast 80px – även
       fyrsiffriga belopp (t.ex. 9999) får plats utan att spilla över. */
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 110px;
    padding: 0.375rem 0.5rem;
    border: 1.5px solid var(--uv-color-border);
    border-radius: var(--uv-radius-sm);
    font-size: var(--uv-font-size-sm);
    font-family: var(--uv-font-family);
    color: var(--uv-color-text);
    background: var(--uv-color-white);
    text-align: right;
    -moz-appearance: textfield;
}

.uv-filter-price__inputs .uv-input::-webkit-outer-spin-button,
.uv-filter-price__inputs .uv-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.uv-filter-price__inputs .uv-input:focus {
    outline: none;
    border-color: var(--uv-color-primary);
    box-shadow: 0 0 0 3px rgba(230, 102, 12, 0.15);
}

.uv-filter-price__sep {
    color: var(--uv-color-muted);
    font-size: var(--uv-font-size-sm);
}

/* Aktiva filter-chips – reserverar ingen plats när baren är tom (punkt 14) */
.uv-active-filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: var(--uv-spacing-md) 0;
}

.uv-active-filters-bar:empty {
    display: none;
    padding: 0;
}

.uv-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    background: var(--uv-color-primary);
    color: var(--uv-color-white);
    border-radius: var(--uv-radius-full);
    font-size: 0.75rem;
    font-weight: 500;
}

.uv-filter-chip__remove {
    display: flex;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}



/* =====================================================
   Staplade overlay-märken (energiklass + garanti) på produktbilden
   Föräldern .uv-product-card__overlay-badges positioneras absolut
   nere till vänster i .uv-product-card__media (position:relative)
   och staplar sina barn i en kolumn (Bug 1.3 / 2.1 – riktig fix,
   tidigare fanns bara kommentarer men ingen faktisk positionerings-CSS).
   ===================================================== */
.uv-product-card__overlay-badges {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px; /* v1.6.1 (punkt 3): ge märkena hela kortbredden */
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    max-width: calc(100% - 16px);
    pointer-events: none;
}

.uv-product-card__energy-overlay {
    display: inline-flex;
}

/* =====================================================
   Energiklass-emblem – dekorerat badge (Bug 2.1)
   Används av UV_Core_Product_Meta::get_energy_class_html()
   CSS-variablerna --ec-bg / --ec-color sätts inline av PHP.
   ===================================================== */
.uv-energy-class {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    background: var(--ec-bg, #24A651);
    color: var(--ec-color, #ffffff);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    font-family: var(--uv-font-family);
    text-decoration: none;
}

/* =====================================================
   Produktkort – jämn höjd inom en rad (Bug 2.3)
   ===================================================== */
.uv-products-grid .uv-product-card,
ul.products li.product .uv-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.uv-product-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.uv-product-card__footer {
    margin-top: auto;
    padding-top: var(--uv-spacing-sm, 0.75rem);
    min-height: 44px; /* Reserverar alltid utrymme för knappområdet */
}

.uv-product-card__footer-placeholder {
    min-height: 36px;
}

/* =====================================================
   Snabb-lägg-i-varukorg-knapp (Bug 2.2)
   Diskret, inline knapp med ikon + text som matchar temats
   övriga knappsystem (.uv-btn-secondary) i stället för att sakna
   styling helt.
   ===================================================== */
.uv-quick-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 1rem;
    background-color: transparent;
    color: var(--uv-color-primary);
    border: 1.5px solid var(--uv-color-primary);
    border-radius: var(--uv-radius-md);
    font-size: var(--uv-font-size-sm);
    font-weight: 600;
    font-family: var(--uv-font-family);
    line-height: 1;
    min-height: 40px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--uv-transition-fast), color var(--uv-transition-fast), border-color var(--uv-transition-fast);
}

.uv-quick-add-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.uv-quick-add-btn:hover:not(:disabled) {
    background-color: var(--uv-color-primary);
    color: var(--uv-color-white);
}

.uv-quick-add-btn:disabled {
    background-color: transparent;
    color: var(--uv-color-muted);
    border-color: var(--uv-color-border);
    cursor: not-allowed;
}

.uv-quick-add-btn--variable {
    background-color: transparent;
    color: var(--uv-color-text);
    border-color: var(--uv-color-border);
}

.uv-quick-add-btn--variable:hover {
    background-color: var(--uv-color-light-background);
    border-color: var(--uv-color-muted);
    color: var(--uv-color-text);
}

.uv-quick-add-btn.is-loading {
    pointer-events: none;
    opacity: 0.75;
}

.uv-quick-add-btn .uv-spin {
    animation: uv-spin 0.6s linear infinite;
}

/* === Favoritsidan (v1.6.0) === */
.uv-favorites-intro {
    font-size: var(--uv-font-size-base);
    color: var(--uv-color-muted);
    margin: 0 0 var(--uv-spacing-lg);
    text-align: left;
}

/* Tomt läge – v1.6.1 (punkt 10.1): centrerat block med ikon, text och knapp.
   (Populerat läge förblir vänsterställt via .uv-favorites-intro ovan.) */
.uv-favorites-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--uv-spacing-md);
    text-align: center;
    padding: var(--uv-spacing-3xl) var(--uv-spacing-lg);
    margin: 0 auto;
    max-width: 420px;
}

.uv-favorites-empty__icon {
    color: var(--uv-color-muted);
    display: inline-flex;
}

.uv-favorites-empty__icon svg {
    width: 48px;
    height: 48px;
}

.uv-favorites-empty p {
    margin: 0;
    color: var(--uv-color-text);
    font-size: var(--uv-font-size-base);
    font-weight: 600;
}

.uv-favorites-empty .uv-btn {
    align-self: center;
}

/* Favoritsidans produktgrid använder samma .uv-products-grid--compact som
   butiken och ärver därmed identisk tvåkolumnslayout och mellanrum på mobil. */

/* =====================================================
   v1.6.1 – Punkt 10.4: favoritsidan under den fasta headern
   (alla skärmstorlekar)
   ===================================================== */
body.uv-favorites-body .uv-page-content {
    padding-top: calc(var(--uv-header-height, 70px) + var(--uv-spacing-sm));
}

/* =====================================================
   v1.6.1 – Punkt 7: varukorgssidan i temats stil
   ===================================================== */
/* v1.6.2 (punkt 10): tydlig struktur – luft mellan brödsmulor,
   rubrik och varukorgens innehåll */
body.woocommerce-cart .uv-breadcrumbs {
    margin-bottom: var(--uv-spacing-md);
}

body.woocommerce-cart .uv-page-article__header {
    margin-bottom: var(--uv-spacing-xl);
}

body.woocommerce-cart .uv-page-content {
    padding-top: calc(var(--uv-header-height, 70px) + var(--uv-spacing-sm));
}

body.woocommerce-cart .woocommerce {
    max-width: 100%;
    overflow-x: hidden;
}

/* Tabell */
body.woocommerce-cart table.shop_table {
    width: 100%;
    border-collapse: collapse;
    border: none;
    font-family: var(--uv-font-family);
}

body.woocommerce-cart table.shop_table th,
body.woocommerce-cart table.shop_table td {
    padding: var(--uv-spacing-sm) var(--uv-spacing-md);
    border-bottom: 1px solid var(--uv-color-border);
    text-align: left;
    font-size: var(--uv-font-size-sm);
}

body.woocommerce-cart table.shop_table th {
    font-weight: 700;
    color: var(--uv-color-dark);
}

body.woocommerce-cart .product-name a {
    color: var(--uv-color-dark);
    text-decoration: none;
    font-weight: 600;
}

body.woocommerce-cart .product-name a:hover {
    color: var(--uv-color-primary);
}

/* Fält och knappar i temats stil */
body.woocommerce-cart .woocommerce input.input-text,
body.woocommerce-cart .woocommerce #coupon_code {
    border: 1.5px solid var(--uv-color-border);
    border-radius: var(--uv-radius-md);
    padding: 0.625rem 0.875rem;
    font-family: var(--uv-font-family);
    font-size: 16px; /* v1.6.1: ≥16px hindrar iOS-zoom */
    min-height: 44px;
}

body.woocommerce-cart .woocommerce button.button,
body.woocommerce-cart .woocommerce a.checkout-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--uv-color-primary);
    color: var(--uv-color-white);
    border: 1.5px solid var(--uv-color-primary);
    border-radius: var(--uv-radius-md);
    padding: 0.625rem 1.25rem;
    font-family: var(--uv-font-family);
    font-size: var(--uv-font-size-sm);
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    text-decoration: none;
    transition: background-color var(--uv-transition-fast), border-color var(--uv-transition-fast);
}

body.woocommerce-cart .woocommerce button.button:hover,
body.woocommerce-cart .woocommerce a.checkout-button:hover {
    background: var(--uv-color-dark);
    border-color: var(--uv-color-dark);
    color: var(--uv-color-white);
}

body.woocommerce-cart .woocommerce button.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

body.woocommerce-cart .cart-collaterals .cart_totals {
    /* v1.7.6 (punkt 1.6): i staplat läge (under tvåkolumnsbrytpunkten)
       tar summeringen hela bredden i stället för en högerställd
       480px-kolumn – cart-collaterals blir width: 100 %. */
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    float: none;
}

/* Mobil: staplad varukorg utan horisontell overflow */
@media (max-width: 768px) {
    body.woocommerce-cart table.shop_table.cart,
    body.woocommerce-cart table.shop_table.cart tbody,
    body.woocommerce-cart table.shop_table.cart tr {
        display: block;
        width: 100%;
    }

    body.woocommerce-cart table.shop_table.cart thead {
        display: none;
    }

    body.woocommerce-cart table.shop_table.cart tr {
        border: 1.5px solid var(--uv-color-border);
        border-radius: var(--uv-radius-md);
        margin-bottom: var(--uv-spacing-md);
        padding: var(--uv-spacing-sm);
    }

    body.woocommerce-cart table.shop_table.cart td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--uv-spacing-sm);
        border-bottom: 1px solid var(--uv-color-light-background);
        padding: 0.5rem 0.25rem;
    }

    body.woocommerce-cart table.shop_table.cart td::before {
        content: attr(data-title);
        font-weight: 700;
        color: var(--uv-color-dark);
    }

    body.woocommerce-cart table.shop_table.cart td.product-remove::before,
    body.woocommerce-cart table.shop_table.cart td.actions::before {
        content: none;
    }

    body.woocommerce-cart table.shop_table.cart td.actions {
        display: block;
    }

    body.woocommerce-cart .woocommerce #coupon_code {
        width: 100%;
        margin-bottom: var(--uv-spacing-sm);
    }

    body.woocommerce-cart .cart-collaterals .cart_totals {
        max-width: 100%;
    }
}

/* =====================================================
   v1.6.3 (punkt 6.1): varukorg med produkter – fler element
   i temats stil (bilder, knappar, kvantitet, kupong, summering)
   ===================================================== */
/* Produktbild */
body.woocommerce-cart table.shop_table td.product-thumbnail img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border: 1.5px solid var(--uv-color-border);
    border-radius: var(--uv-radius-md);
    background: var(--uv-color-white);
}

/* Ta bort-krysset som en rund, tydlig knapp */
body.woocommerce-cart table.shop_table td.product-remove a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--uv-color-border);
    color: var(--uv-color-muted) !important;
    background: var(--uv-color-white);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: color var(--uv-transition-fast), border-color var(--uv-transition-fast),
                background var(--uv-transition-fast);
}

body.woocommerce-cart table.shop_table td.product-remove a.remove:hover {
    color: #fff !important;
    background: #d63638;
    border-color: #d63638;
}

/* Kvantitetsfält */
body.woocommerce-cart .quantity .qty {
    border: 1.5px solid var(--uv-color-border);
    border-radius: var(--uv-radius-md);
    padding: 0.5rem 0.25rem 0.5rem 0.75rem;
    font-family: var(--uv-font-family);
    font-size: 16px;
    min-height: 44px;
    width: 4.5rem;
    text-align: center;
}

body.woocommerce-cart .quantity .qty:focus {
    outline: none;
    border-color: var(--uv-color-primary);
    box-shadow: 0 0 0 3px rgba(230, 102, 12, 0.15);
}

/* Kupong */
body.woocommerce-cart td.actions .coupon {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uv-spacing-sm);
    align-items: center;
}

body.woocommerce-cart td.actions .coupon label { display: none; }

/* Priser */
body.woocommerce-cart .woocommerce-Price-amount {
    font-weight: 600;
    color: var(--uv-color-dark);
}

/* Summeringsruta */
body.woocommerce-cart .cart-collaterals .cart_totals {
    background: var(--uv-color-light-background);
    border: 1.5px solid var(--uv-color-border);
    border-radius: var(--uv-radius-lg);
    padding: var(--uv-spacing-lg);
    margin-top: var(--uv-spacing-lg);
}

body.woocommerce-cart .cart_totals h2 {
    font-size: var(--uv-font-size-lg);
    margin: 0 0 var(--uv-spacing-md);
}

body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td {
    padding: var(--uv-spacing-sm) 0;
    background: transparent;
}

body.woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount {
    font-size: var(--uv-font-size-lg);
    font-weight: 700;
    color: var(--uv-color-primary);
}

/* Gå till kassan – primärknapp i full bredd med tydliga lägen */
body.woocommerce-cart .wc-proceed-to-checkout {
    padding: var(--uv-spacing-md) 0 0;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    display: flex;
    width: 100%;
    font-size: var(--uv-font-size-base);
    font-weight: 700;
    min-height: 52px;
}

body.woocommerce-cart .woocommerce button.button:focus-visible,
body.woocommerce-cart .woocommerce a.checkout-button:focus-visible {
    outline: 2px solid var(--uv-color-primary);
    outline-offset: 2px;
}

/* "Uppdatera varukorg" är avstängd tills något ändrats */
body.woocommerce-cart .woocommerce button.button[name="update_cart"]:disabled,
body.woocommerce-cart .woocommerce button.button[name="update_cart"]:disabled:hover {
    background: var(--uv-color-light-background);
    border-color: var(--uv-color-border);
    color: var(--uv-color-muted);
    opacity: 1;
    cursor: not-allowed;
}

/* =====================================================
   v1.6.4 (punkt 2): tom varukorg – endast ikon, rubrik, text och
   knapp får visas. Skulle sidinnehållet på varukorgssidan innehålla
   extra sektioner (t.ex. "Nytt i butik" med föreslagna produkter)
   döljs allt som följer efter WooCommerce-blocket när varukorgen är
   tom (body-klassen uv-cart-is-empty sätts av temat).
   ===================================================== */
body.woocommerce-cart.uv-cart-is-empty .uv-page-article__body .woocommerce ~ * {
    display: none;
}

/* =====================================================
   v1.6.6 (punkt 1): varukorgssidans layout
   ===================================================== */

/* 1.2.1 – mer luft mellan produktraderna och kupong/åtgärdsraden */
body.woocommerce-cart table.shop_table.cart td.actions {
    padding-top: var(--uv-spacing-xl);
    border-bottom: none;
}

/* 1.2 – "Tillämpa rabattkod" som sekundär/kontur-knapp (temat),
   "Uppdatera varukorgen" behåller primärfärgen. Båda med egna
   hover-, fokus- och inaktiverade lägen. */
body.woocommerce-cart .woocommerce button.button[name="apply_coupon"] {
    background: var(--uv-color-white);
    color: var(--uv-color-primary);
    border-color: var(--uv-color-primary);
}

body.woocommerce-cart .woocommerce button.button[name="apply_coupon"]:hover {
    background: rgba(230, 102, 12, 0.08);
    color: var(--uv-color-primary);
    border-color: var(--uv-color-primary);
}

body.woocommerce-cart .woocommerce button.button[name="apply_coupon"]:disabled,
body.woocommerce-cart .woocommerce button.button[name="apply_coupon"]:disabled:hover {
    background: var(--uv-color-light-background);
    border-color: var(--uv-color-border);
    color: var(--uv-color-muted);
    opacity: 1;
    cursor: not-allowed;
}

/* 1.2 – kupongfält + båda knapparna på EN rad (desktop).
   v1.7.1 (punkt 1): ROTORSAKEN till att åtgärdsraden blev smal och
   hoptryckt hittad. display: flex direkt på td.actions tar cellen UR
   tabellayouten – webbläsaren skapar en anonym cell runt den och
   colspan="6" ignoreras, så hela raden klämdes till en enda kolumns
   bredd i den fasta tabellen nedan. Därför hjälpte en manuell bredd på
   td:n vid felsökning.
   Lösningen: td.actions FÖRBLIR en riktig tabellcell (colspan gäller →
   cellen spänner över tabellens hela bredd) och flexraden läggs i ett
   inre omslag, .uv-cart-actions-row, som skapas av
   assets/js/cart-actions.js och återskapas efter WooCommerce
   AJAX-uppdateringar. Därinne: [fält][Tillämpa][Uppdatera] med jämna
   mellanrum, fältet tar den flexibla ytan, knapparna sin naturliga
   bredd. Kupongmeddelanden hamnar utanför omslaget som blockelement i
   cellen och får automatiskt hela radens bredd på en egen rad. På
   mobil löses omslaget upp med display: contents (regel längre ned) så
   den fungerande mobillayouten förblir helt orörd. Utan JS faller
   layouten tillbaka till inline-flex på .coupon + knapp på samma rad. */
@media (min-width: 769px) {
    body.woocommerce-cart table.shop_table.cart td.actions {
        display: table-cell;
    }

    body.woocommerce-cart td.actions .uv-cart-actions-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--uv-spacing-sm);
        width: 100%;
    }

    body.woocommerce-cart td.actions .uv-cart-actions-row .coupon {
        display: contents;
    }

    /* Reserv utan JS-omslaget: kontrollerna på en rad ändå. */
    body.woocommerce-cart td.actions > .coupon {
        display: inline-flex;
        align-items: center;
        gap: var(--uv-spacing-sm);
        vertical-align: middle;
        margin-right: var(--uv-spacing-sm);
    }

    body.woocommerce-cart .woocommerce td.actions #coupon_code,
    body.woocommerce-cart .woocommerce td.actions button.button[name="apply_coupon"],
    body.woocommerce-cart .woocommerce td.actions button.button[name="update_cart"] {
        float: none !important;
        position: static !important;
        margin: 0;
    }

    /* v1.7.1 (punkt 1.1): fältet får radens hela flexibla yta med en
       rejäl minsta bredd – det får aldrig kollapsa till ett pyttefält. */
    body.woocommerce-cart .woocommerce td.actions #coupon_code {
        flex: 1 1 auto;
        min-width: 240px;
        width: auto !important;
        max-width: none;
    }

    body.woocommerce-cart td.actions button[name="update_cart"] {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* v1.6.7 (punkt 3.2): kupongfältet och båda knapparna i samma höjd,
       med hel text (ingen radbrytning) och rimlig padding. */
    body.woocommerce-cart .woocommerce td.actions #coupon_code,
    body.woocommerce-cart .woocommerce td.actions button.button[name="apply_coupon"],
    body.woocommerce-cart .woocommerce td.actions button.button[name="update_cart"] {
        min-height: var(--uv-control-height, 48px);
    }

    body.woocommerce-cart .woocommerce td.actions button.button[name="apply_coupon"],
    body.woocommerce-cart .woocommerce td.actions button.button[name="update_cart"] {
        white-space: nowrap;
        padding: 0.625rem 1.25rem;
        flex: 0 0 auto;
    }

    /* v1.6.8 (punkt 1.2): strukturerad desktoptabell med FASTA kolumnbredder.
       table-layout: fixed gör att bredderna nedan alltid respekteras, oavsett
       vilka regler som annars skulle låta product-remove växa: krysset blir
       extremt kompakt, bilden får en garanterad kolumn (kan aldrig kollapsa
       till noll), produktnamnet tar den flexibla ytan och pris/antal/summa
       hålls kompakta men läsbara.
       Konceptuellt: Kryss | Bild | Produkt | Pris | Antal | Summa. */
    body.woocommerce-cart table.shop_table.cart {
        table-layout: fixed;
        width: 100%;
    }

    body.woocommerce-cart table.shop_table.cart th.product-remove,
    body.woocommerce-cart table.shop_table.cart td.product-remove {
        width: 48px;
        padding-left: var(--uv-spacing-xs);
        padding-right: var(--uv-spacing-xs);
        text-align: center;
    }

    body.woocommerce-cart table.shop_table.cart th.product-thumbnail,
    body.woocommerce-cart table.shop_table.cart td.product-thumbnail {
        width: 104px;
    }

    body.woocommerce-cart table.shop_table.cart th.product-name,
    body.woocommerce-cart table.shop_table.cart td.product-name {
        width: auto;
    }

    body.woocommerce-cart table.shop_table.cart th.product-price,
    body.woocommerce-cart table.shop_table.cart td.product-price,
    body.woocommerce-cart table.shop_table.cart th.product-subtotal,
    body.woocommerce-cart table.shop_table.cart td.product-subtotal {
        width: 110px;
        white-space: nowrap;
    }

    body.woocommerce-cart table.shop_table.cart th.product-quantity,
    body.woocommerce-cart table.shop_table.cart td.product-quantity {
        width: 120px;
        white-space: nowrap;
    }

    /* Bilden: alltid synlig, behåller proportioner, temats radie. */
    body.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
        display: block;
        width: 80px;
        max-width: 100%;
        height: 80px;
    }
}

/* 1.1 – desktop: produkttabell till vänster, frakt/summering till höger.
   :has() säkerställer att layouten bara gäller när varukorgen har innehåll
   (formuläret finns) – tom-läget centreras som vanligt, även direkt efter
   att sista produkten tagits bort via panelen (utan omladdning).
   v1.7.6 (punkt 1.6): brytpunkten höjd 992px → 1160px. Strax över 992px
   blev produkttabellen för hoptryckt bredvid summeringskolumnen
   (340–420px + spalt); nu aktiveras tvåkolumnslayouten först när
   tabellen verkligen får plats. Under 1160px staplas sektionerna med
   full bredd – samma redan beprövade läge som tidigare gällde
   769–991px. */
@media (min-width: 1160px) {
    body.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
        /* v1.6.7 (punkt 3.1): tydligt mellanrum mellan produkttabellen och
           summeringskortet – kolumnerna får aldrig ligga dikt an. */
        column-gap: var(--uv-spacing-2xl);
        row-gap: var(--uv-spacing-xl);
        align-items: start;
    }

    body.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form) > .woocommerce-notices-wrapper {
        grid-column: 1 / -1;
    }

    body.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form) > form.woocommerce-cart-form {
        grid-column: 1;
        min-width: 0;
    }

    body.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form) > .cart-collaterals {
        grid-column: 2;
        position: sticky;
        top: calc(var(--uv-header-height, 70px) + var(--uv-spacing-md));
    }

    body.woocommerce-cart .woocommerce:has(> form.woocommerce-cart-form) .cart-collaterals .cart_totals {
        max-width: 100%;
        margin-left: 0;
    }
}

/* 1.3 – fraktberäknarens fält i temats formulärstil */
body.woocommerce-cart .shipping-calculator-form {
    padding-top: var(--uv-spacing-sm);
}

body.woocommerce-cart .shipping-calculator-form .form-row {
    margin: 0 0 var(--uv-spacing-sm);
}

body.woocommerce-cart .shipping-calculator-form select,
body.woocommerce-cart .shipping-calculator-form input.input-text {
    width: 100%;
    border: 1.5px solid var(--uv-color-border);
    border-radius: var(--uv-radius-md);
    padding: 0.625rem 0.875rem;
    min-height: 44px;
    font-family: var(--uv-font-family);
    font-size: 16px; /* ≥16px hindrar iOS-zoom */
    color: var(--uv-color-dark);
    background-color: var(--uv-color-white);
    transition: border-color var(--uv-transition-fast), box-shadow var(--uv-transition-fast);
}

/* Select-element: egen chevron i stället för webbläsarens standardpil */
body.woocommerce-cart .shipping-calculator-form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23697174' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    cursor: pointer;
}

body.woocommerce-cart .shipping-calculator-form select:hover,
body.woocommerce-cart .shipping-calculator-form input.input-text:hover {
    border-color: var(--uv-color-muted);
}

body.woocommerce-cart .shipping-calculator-form select:focus,
body.woocommerce-cart .shipping-calculator-form input.input-text:focus {
    outline: none;
    border-color: var(--uv-color-primary);
    box-shadow: 0 0 0 3px rgba(230, 102, 12, 0.15);
}

/* Felstatus (WooCommerce sätter .woocommerce-invalid på raden) */
body.woocommerce-cart .shipping-calculator-form .woocommerce-invalid select,
body.woocommerce-cart .shipping-calculator-form .woocommerce-invalid input.input-text {
    border-color: #d63638;
    box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.12);
}

/* Select2 (WooCommerce landsväljare) i samma stil som övriga fält */
body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection--single {
    min-height: 44px;
    height: auto;
    border: 1.5px solid var(--uv-color-border);
    border-radius: var(--uv-radius-md);
    background: var(--uv-color-white);
    transition: border-color var(--uv-transition-fast), box-shadow var(--uv-transition-fast);
}

body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 41px;
    padding-left: 0.875rem;
    padding-right: 2.25rem;
    color: var(--uv-color-dark);
    font-family: var(--uv-font-family);
    font-size: 16px;
}

body.woocommerce-cart .shipping-calculator-form .select2-container .select2-selection--single .select2-selection__arrow {
    height: 41px;
    right: 0.5rem;
}

body.woocommerce-cart .shipping-calculator-form .select2-container--focus .select2-selection--single,
body.woocommerce-cart .shipping-calculator-form .select2-container--open .select2-selection--single {
    border-color: var(--uv-color-primary);
    box-shadow: 0 0 0 3px rgba(230, 102, 12, 0.15);
}

/* Själva rullgardinsmenyn (läggs av select2 direkt i body) */
body.woocommerce-cart .select2-dropdown {
    border: 1.5px solid var(--uv-color-border);
    border-radius: var(--uv-radius-md);
    font-family: var(--uv-font-family);
    overflow: hidden;
}

body.woocommerce-cart .select2-dropdown .select2-search__field {
    border: 1.5px solid var(--uv-color-border);
    border-radius: var(--uv-radius-sm);
    padding: 0.375rem 0.625rem;
    font-family: var(--uv-font-family);
}

body.woocommerce-cart .select2-results__option--highlighted[aria-selected],
body.woocommerce-cart .select2-results__option--highlighted[data-selected] {
    background: var(--uv-color-primary);
    color: var(--uv-color-white);
}

/* =====================================================
   v1.6.8 (punkt 1): varukorgssidans layout
   ===================================================== */

/* 1.1 – mobil: rabattkodsfältet på egen rad, därunder "Tillämpa
   rabattkod" och "Uppdatera varukorg" SIDA VID SIDA i en icke-
   radbrytande flexrad som krymper (fontstorlek, padding, bredd,
   gap) i stället för att staplas. display: contents låter knappen
   inne i .coupon-omslaget dela rad med uppdatera-knappen. */
@media (max-width: 768px) {
    body.woocommerce-cart table.shop_table.cart td.actions {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: var(--uv-spacing-sm);
    }

    body.woocommerce-cart td.actions .coupon {
        display: contents;
    }

    body.woocommerce-cart .woocommerce td.actions #coupon_code {
        flex: 1 1 100%;
        width: 100%;
        margin-bottom: 0;
    }

    body.woocommerce-cart .woocommerce td.actions button.button[name="apply_coupon"],
    body.woocommerce-cart .woocommerce td.actions button.button[name="update_cart"] {
        flex: 1 1 0;
        min-width: 0;
        min-height: 44px;
        white-space: nowrap;
        padding: 0.625rem 0.5rem;
        font-size: var(--uv-font-size-sm);
        margin: 0;
    }
}

/* Mycket smala enheter: något mindre text och tätare padding/gap så
   att båda knapparna alltid ryms i viewporten utan overflow. */
@media (max-width: 400px) {
    body.woocommerce-cart table.shop_table.cart td.actions {
        gap: var(--uv-spacing-xs);
    }

    body.woocommerce-cart .woocommerce td.actions button.button[name="apply_coupon"],
    body.woocommerce-cart .woocommerce td.actions button.button[name="update_cart"] {
        font-size: 0.8125rem;
        padding: 0.5rem 0.375rem;
    }
}

/* 1.3 – reserv för äldre webbläsare utan :has(): tvåkolumnslayouten kan
   då inte aktiveras, sektionerna staplas i stället – ge dem ett tydligt
   vertikalt mellanrum så att de aldrig rör vid varandra. */
@supports not selector(a:has(b)) {
    body.woocommerce-cart .cart-collaterals {
        margin-top: var(--uv-spacing-2xl);
    }
}

/* =====================================================
   v1.6.9 (punkt 1 + 3 + 5): varukorgs-UX, produktkort på mobil,
   varumärkesgrid
   ===================================================== */

/* 1.1 – på varukorgssidan är "Visa varukorg"-länken i meddelandet om
   tillagd produkt meningslös (kunden ÄR redan i varukorgen). Själva
   meddelandet behålls, endast åtgärdslänken döljs. */
body.woocommerce-cart .woocommerce-message a.button.wc-forward {
    display: none;
}

/* 1.2 – produktbilden i varukorgstabellen: a-omslaget blir en ren
   temakvadrat med radie och klippning; bilden fyller hela ytan med
   bibehållna proportioner (object-fit: cover) – inga omatchade hörn
   eller tomma ytor mellan bild och container. */
@media (min-width: 769px) {
    body.woocommerce-cart table.shop_table.cart td.product-thumbnail a {
        display: block;
        width: 80px;
        height: 80px;
        border-radius: var(--uv-radius-md);
        overflow: hidden;
    }

    body.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        object-fit: cover;
        border: 0;
        border-radius: 0; /* radien ligger på det klippande omslaget */
    }
}

/* 1.4 – "Delsumma:" med tydligt (men inte överdrivet) avstånd till
   beloppet på desktop. Beloppet påverkas inte. */
body.woocommerce-cart .cart_totals .cart-subtotal th::after {
    content: ':';
}

/* v1.7.7 (punkt 4.0/4.0.1): konsekvent avstånd mellan etikett (th) och
   värde (td) för ALLA rader i summeringstabellen – Delsumma,
   Installation, Frakt, Moms och Totalt – på både desktop och mobil.
   Endast vänster-padding på värdecellen; ingen befintlig
   högerjustering eller radbrytning påverkas. */
body.woocommerce-cart .cart_totals table.shop_table td {
    padding-left: var(--uv-spacing-md);
}

/* 3.1 – produkttitlar på mobil: max TVÅ rader med ellipsis, och samma
   reserverade titelhöjd på alla kort så att korten förblir lika höga
   oavsett om titeln tar en eller två rader. Gäller alla produktkort
   (butik, kategorier, favoriter, relaterade, slider-shortcoden). */
@media (max-width: 600px) {
    .uv-product-card__title {
        min-height: calc(2 * 1.3em);
    }

    .uv-product-card__title-link {
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }

    /* v1.8.12: återställd, läsbar v1.8.9-skala. Enradig ellipsis ovan
       hanterar extrema priser utan att komprimera normal typografi. */
    .uv-product-card__price {
        font-size: clamp(0.75rem, 3.2vw, var(--uv-font-size-sm));
    }

    .uv-product-card__price del {
        font-size: var(--uv-font-size-xs);
    }
}

/* 5 – varumärkesgrid ([uv_brand_grid]): minimala, klickbara temakort
   med varumärkesnamnet centrerat. Desktop 4 per rad (styrbart via
   columns-attributet), tablet/mobil alltid 2 per rad. */
.uv-brand-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--uv-spacing-md);
}

.uv-brand-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uv-brand-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uv-brand-grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.uv-brand-grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.uv-brand-grid__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: var(--uv-spacing-md);
    background: var(--uv-color-white);
    border: 1.5px solid var(--uv-color-border);
    border-radius: var(--uv-radius-md);
    color: var(--uv-color-text);
    font-family: var(--uv-font-family);
    font-size: var(--uv-font-size-base);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: border-color var(--uv-transition-fast),
                box-shadow var(--uv-transition-fast),
                color var(--uv-transition-fast);
}

.uv-brand-grid__item:hover {
    border-color: var(--uv-color-primary);
    color: var(--uv-color-primary);
    box-shadow: var(--uv-shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.08));
}

.uv-brand-grid__item:focus-visible {
    outline: 2px solid var(--uv-color-primary);
    outline-offset: 2px;
}

.uv-brand-grid__name {
    overflow-wrap: anywhere;
}

/* Tablet/mobil: alltid 2 per rad, oavsett columns-attribut (regeln
   ligger efter varianterna och vinner därför på ordning). */
@media (max-width: 1024px) {
    .uv-brand-grid,
    .uv-brand-grid--cols-2,
    .uv-brand-grid--cols-3,
    .uv-brand-grid--cols-5,
    .uv-brand-grid--cols-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =====================================================
   v1.7.0 (punkt 3.2 + 4.3): kupongmeddelanden på egen rad +
   färgswatchar i filterpanelen
   ===================================================== */

/* 3.2/3.2.1 – WooCommerce svar på rabattkod (giltig/ogiltig) ska ALDRIG
   ligga i samma rad som kontrollerna, varken på mobil eller desktop.
   td.actions är en flexrad med wrap på alla brytpunkter, så meddelandet
   får full bredd, hamnar sist (order) och bryter till en egen rad under
   kontrollerna, i normalt dokumentflöde och med temats notisutseende. */
body.woocommerce-cart table.shop_table.cart td.actions .woocommerce-error,
body.woocommerce-cart table.shop_table.cart td.actions .woocommerce-message,
body.woocommerce-cart table.shop_table.cart td.actions .woocommerce-info,
body.woocommerce-cart table.shop_table.cart td.actions .wc-block-components-notice-banner,
body.woocommerce-cart table.shop_table.cart td.actions .coupon-error-notice {
    flex: 1 1 100%;
    width: 100%;
    order: 99;
    margin: var(--uv-spacing-xs) 0 0;
    float: none !important;
    position: static !important;
    text-align: left;
}

/* Fältets felmarkering (WooCommerce lägger klassen på inputen). */
body.woocommerce-cart .woocommerce td.actions #coupon_code.has-error {
    border-color: #d63638;
}

/* 4.3 – färgfiltret: rund swatch med sparat HEX-värde + alltid synligt
   färgnamn (färg är aldrig enda bäraren av informationen). Ljusa färger
   (vit m.fl.) får en tydlig kant via border + inre skugga. */
.uv-filter-swatch {
    flex: 0 0 auto;
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #e2e2e2;
    border: 1px solid var(--uv-color-border);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* =====================================================
   v1.7.1 (punkt 1): mobilen ska inte påverkas av JS-omslaget –
   .uv-cart-actions-row löses upp så att mobillayouten (v1.6.8) ser
   exakt samma struktur som tidigare.
   ===================================================== */
@media (max-width: 768px) {
    body.woocommerce-cart td.actions .uv-cart-actions-row {
        display: contents;
    }
}

/* =====================================================
   Tack för ditt köp / Order mottagen (v1.7.3, punkt 3)
   Kortbaserad, luftig orderbekräftelse i temats formspråk.
   Standard-WooCommerce-markupen (orderöversikt, ordertabell,
   kunduppgifter) stylas via .uv-thankyou-omslaget så att alla
   krokar – inkl. Installation/Bortforsling – följer med.
   ===================================================== */
.uv-thankyou {
    /* v1.7.8 (punkt 1.1): ytterligare något bredare på desktop (1040 →
       1200px) så att korten i orderöversikten (ordernummer/datum/
       e-post/totalt/betalningsmetod) rymmer vanliga värden som
       info@uppsalavitvaror.se på EN rad. Sidan förblir centrerad och
       mobil/surfplatta påverkas inte (max-width slår bara i på breda
       skärmar). */
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--uv-spacing-lg, 24px) 0 var(--uv-spacing-xl, 40px);
}

/* Order received är en WooCommerce-endpoint på den vanliga kassasidan.
   Sidrubriken renderas därför av page.php före själva orderbekräftelsen. */
body.woocommerce-order-received .uv-page-content {
    padding-top: calc(var(--uv-header-height, 70px) + var(--uv-spacing-lg, 24px));
}

body.woocommerce-order-received .uv-page-article__header {
    text-align: center;
}

.uv-thankyou__header {
    text-align: center;
    margin-bottom: var(--uv-spacing-lg, 24px);
}

.uv-thankyou__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--uv-color-success-bg, #e6f4ea);
    color: var(--uv-color-success, #1e7e34);
    margin-bottom: var(--uv-spacing-sm, 12px);
}

.uv-thankyou__icon--failed {
    background: #fdeaea;
    color: #b32d2e;
}

.uv-thankyou__title {
    margin: 0 0 4px;
    font-size: 1.75rem;
    line-height: 1.25;
}

.uv-thankyou__lead {
    margin: 0;
    color: var(--uv-color-text-muted, #5a6672);
    font-size: 1.05rem;
}

.uv-thankyou__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--uv-spacing-md, 16px);
}

/* Ordersammanfattning – kortgrid i stället för kommaseparerad rad. */
.uv-thankyou ul.woocommerce-order-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0 0 var(--uv-spacing-lg, 24px);
    padding: 0;
}

.uv-thankyou ul.woocommerce-order-overview li {
    background: var(--uv-color-surface, #f7f8fa);
    border: 1px solid var(--uv-color-border, #e3e7eb);
    border-radius: var(--uv-radius-md, 10px);
    padding: 14px 16px;
    margin: 0;
    border-right-width: 1px !important; /* WooCommerce-standard sätter avdelare */
    font-size: 0.85rem;
    min-width: 0;
}

.uv-thankyou__overview-label {
    display: block;
    color: var(--uv-color-text-muted, #5a6672);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
    margin-bottom: 4px;
}

.uv-thankyou ul.woocommerce-order-overview li strong {
    display: block;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

/* Sektioner (Beställningsöversikt, Kunduppgifter) som kort. */
.uv-thankyou__details section.woocommerce-order-details,
.uv-thankyou__details section.woocommerce-customer-details,
.uv-thankyou__details .uvc-removal-order-info {
    background: #fff;
    border: 1px solid var(--uv-color-border, #e3e7eb);
    border-radius: var(--uv-radius-md, 10px);
    padding: var(--uv-spacing-md, 16px) var(--uv-spacing-lg, 24px);
    margin-bottom: var(--uv-spacing-lg, 24px);
}

.uv-thankyou__details .woocommerce-order-details__title,
.uv-thankyou__details .woocommerce-column__title,
.uv-thankyou__details .uvc-removal-order-info h2 {
    font-size: 1.15rem;
    margin: 0 0 var(--uv-spacing-sm, 12px);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--uv-color-border, #e3e7eb);
}

/* Ordertabellen. */
.uv-thankyou table.woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    margin: 0;
}

.uv-thankyou table.woocommerce-table--order-details th,
.uv-thankyou table.woocommerce-table--order-details td {
    border: 0;
    border-bottom: 1px solid var(--uv-color-border, #e3e7eb);
    padding: 10px 8px;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.uv-thankyou table.woocommerce-table--order-details tfoot th {
    font-weight: 500;
    color: var(--uv-color-text-muted, #5a6672);
    white-space: nowrap;
}

.uv-thankyou table.woocommerce-table--order-details tfoot tr:last-child th,
.uv-thankyou table.woocommerce-table--order-details tfoot tr:last-child td {
    border-bottom: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--uv-color-text, #1f2933);
}

.uv-thankyou table.woocommerce-table--order-details td.woocommerce-table__product-total,
.uv-thankyou table.woocommerce-table--order-details tfoot td {
    text-align: right;
}

/* Adresser sida vid sida på desktop. */
.uv-thankyou .woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--uv-spacing-lg, 24px);
}

.uv-thankyou .woocommerce-columns--addresses .woocommerce-column {
    width: 100%;
    float: none;
    min-width: 0;
}

.uv-thankyou .woocommerce-customer-details address {
    border: 0;
    padding: 0;
    margin: 0;
    font-style: normal;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.uv-thankyou .woocommerce-customer-details--phone,
.uv-thankyou .woocommerce-customer-details--email {
    margin: 6px 0 0;
    padding-left: 0;
}

/* Surfplatta/mobil. */
@media (max-width: 768px) {
    body.woocommerce-order-received .uv-page-article__header {
        /* v1.8.4: "Beställning mottagen" centreras även på mobil. */
        text-align: center;
    }

    .uv-thankyou {
        /* v1.7.9 (punkt 4.1): mer luft mellan headern och "Tack för din
           beställning!" på mobil (tidigare 16px). Desktop opåverkad. */
        padding-top: calc( var(--uv-spacing-md, 16px) * 2 );
    }

    .uv-thankyou__title {
        font-size: 1.4rem;
    }

    .uv-thankyou ul.woocommerce-order-overview {
        grid-template-columns: 1fr 1fr;
    }

    .uv-thankyou .woocommerce-columns--addresses {
        grid-template-columns: 1fr;
        gap: var(--uv-spacing-md, 16px);
    }

    .uv-thankyou__details section.woocommerce-order-details,
    .uv-thankyou__details section.woocommerce-customer-details,
    .uv-thankyou__details .uvc-removal-order-info {
        padding: var(--uv-spacing-md, 16px);
    }

    .uv-thankyou table.woocommerce-table--order-details th,
    .uv-thankyou table.woocommerce-table--order-details td {
        padding: 8px 6px;
        font-size: 0.92rem;
    }

    /* v1.7.9 (punkt 4.2): etiketter som "Betalningsmetod:" ska aldrig
       radbrytas mitt i (kolonet hamnade på egen rad). Något mindre
       teckenstorlek så att raden ryms – värdet i högerkolumnen får
       radbrytas i stället. Ordernotis-raden (th utan scope, v1.7.7)
       behåller white-space: normal via sin egen senare regel. */
    .uv-thankyou table.woocommerce-table--order-details tfoot th {
        white-space: nowrap;
        font-size: 0.88rem;
    }

    .uv-thankyou table.woocommerce-table--order-details tfoot td {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 480px) {
    .uv-thankyou ul.woocommerce-order-overview {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   Tacksidan v1.7.4 – kompaktare ordermeta på desktop
   (punkt 2.1) och mer luft mellan adresserna på mobil
   (punkt 2.4).
   ===================================================== */
@media (min-width: 769px) {
    .uv-thankyou ul.woocommerce-order-overview li {
        padding: 10px 14px;
    }

    .uv-thankyou__overview-label {
        font-size: 0.68rem;
        margin-bottom: 2px;
    }

    .uv-thankyou ul.woocommerce-order-overview li strong {
        font-size: 0.92rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Långa e-postadresser får fortfarande radbrytas vid behov. */
    .uv-thankyou ul.woocommerce-order-overview li.email strong {
        white-space: normal;
        overflow: visible;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 768px) {
    /* Tydlig separation mellan Faktureringsadress och Leveransadress. */
    .uv-thankyou .woocommerce-columns--addresses {
        gap: var(--uv-spacing-lg, 28px);
    }

    .uv-thankyou .woocommerce-columns--addresses .woocommerce-column + .woocommerce-column {
        padding-top: var(--uv-spacing-md, 16px);
        border-top: 1px solid var(--uv-color-border, #e3e7eb);
    }
}

/* =====================================================
   v1.7.6 – Varukorgens fraktsektion och tacksidans Totalt
   ===================================================== */

/* 1.3 – tydligare vertikalt mellanrum mellan fraktmetoderna i
   summeringsrutan. Radioknapp och etikett hålls ihop på samma rad
   (flex), hela etiketten förblir klickbar och typografin är orörd. */
body.woocommerce-cart .cart_totals ul#shipping_method {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.woocommerce-cart .cart_totals ul#shipping_method li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

body.woocommerce-cart .cart_totals ul#shipping_method li:last-child {
    margin-bottom: 0;
}

body.woocommerce-cart .cart_totals ul#shipping_method li input[type="radio"] {
    flex: 0 0 auto;
    margin: 0.3em 0 0; /* i linje med etikettens första textrad */
}

body.woocommerce-cart .cart_totals ul#shipping_method li label {
    margin: 0;
    cursor: pointer;
    line-height: 1.45;
}

/* 1.5 – rubrikcellen "Frakt" ligger kvar i överkant när
   fraktberäknaren ("Ändra adress") expanderar – innehållet växer
   nedåt i värdecellen utan att rubriken vertikalcentreras. */
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th,
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td {
    vertical-align: top;
}

body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th {
    padding-top: calc(var(--uv-spacing-sm) + 0.3em); /* i linje med första fraktradens etikett */
}

/* 2.1 – (v1.7.6) högerställde "Totalt:"-etiketten; UTGICK i v1.7.8
   (punkt 1.0): ALLA radetiketter i tfoot – Delsumma, Frakt, Moms,
   Betalningsmetod och Totalt – ska börja på exakt samma vänsterposition.
   Se normaliseringsregeln i v1.7.8-sektionen längst ned. */

/* 1.2 – diskret notis under installationsavgiftens belopp som
   förtydligar att beloppet redan ingår i delsumman ovanför. */
body.woocommerce-cart .cart_totals small.uv-fee-included-note {
    display: block;
    font-size: var(--uv-font-size-xs);
    font-weight: 400;
    color: var(--uv-color-muted);
    white-space: nowrap;
}

/* =====================================================
   v1.7.7 – Kassan (Checkout Blocks) och tacksidan
   ===================================================== */

/* 1.0 – korta ned långa korta produktbeskrivningar i kassans
   produktsammanfattning: max 2 rader med ellipsis. Endast visning –
   produktens sparade beskrivning påverkas inte. Klampen ligger på
   omslaget och fungerar med paragrafmarkupen inuti (margin nollas så
   att inget klipps fel); overflow är dolt. */
.wc-block-components-product-metadata__description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.wc-block-components-product-metadata__description p {
    margin: 0;
}

/* 1.1 – framhäv installationsinformationen i kassans produktsammanfattning
   (Installation / Utförs av) med font-weight 600 så att den skiljer sig
   från den dämpade korta beskrivningen. Selektorn träffar ENBART
   installationsrelaterade rader via radens namnbaserade blocksklass
   (wc-block-components-product-details__installation resp. __utfors-av)
   – övrig produktmetadata påverkas inte. */
.wc-block-components-product-details li[class*="product-details__installation"],
.wc-block-components-product-details li[class*="product-details__utfors"] {
    font-weight: 600;
}

/* 3.1 – tacksidans ordertabell: kolumnrubriken "Totalt" högerställs så
   att den linjerar med beloppen under (Produkt förblir vänsterställd).
   Scopad klassregel i stället för global th-regel. */
.uv-thankyou table.woocommerce-table--order-details thead th.product-total {
    text-align: right;
}

/* 3.2 – "Observera"-raden (kundens ordernotering) i tfoot är beskrivande
   information, inte en summeringsrad. WooCommerce ger summeringsradernas
   th scope="row", medan noteringsradens th saknar scope – det används
   här för att skilja raderna åt. Etiketten vänsterställs och den ärvda
   Totalt-betoningen (fetstil/storlek) neutraliseras för både etikett
   och värde. */
.uv-thankyou table.woocommerce-table--order-details tfoot tr:last-child th:not([scope="row"]) {
    text-align: left;
    font-size: var(--uv-font-size-base, 1rem);
    font-weight: 500;
    color: var(--uv-color-text-muted, #5a6672);
    white-space: normal;
}

.uv-thankyou table.woocommerce-table--order-details tfoot tr:last-child th:not([scope="row"]) + td {
    font-size: var(--uv-font-size-base, 1rem);
    font-weight: 400;
}

/* 3.2 (följd): när Observera-raden är sist är Totalt-raden näst sist –
   den ska behålla sin betoning. Träffar raden direkt före
   noteringsraden. (Högerställningen av etiketten utgick i v1.7.8 –
   alla etiketter vänsterställs.) */
.uv-thankyou table.woocommerce-table--order-details tfoot tr:has(+ tr > th:not([scope="row"])) th[scope="row"],
.uv-thankyou table.woocommerce-table--order-details tfoot tr:has(+ tr > th:not([scope="row"])) td {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--uv-color-text, #1f2933);
}

/* =====================================================
   v1.7.8 – Tacksidan: enhetliga radetiketter och
   Bortforsling-rubrik i temats stil
   ===================================================== */

/* 1.0 – ALLA etiketter i summeringen (Delsumma, Frakt, Moms,
   Betalningsmetod, Totalt) börjar på exakt samma vänsterposition:
   vänsterställda, utan extra indrag/marginal, med samma vänster-
   padding som tabellens grundregel (8px desktop, 6px mobil).
   Neutraliserar även eventuella regler från andra stilmallar med
   lägre/lika specificitet. Värdena i högerkolumnen påverkas inte. */
.uv-thankyou table.woocommerce-table--order-details tfoot tr > th:first-child {
    text-align: left;
    text-indent: 0;
    margin: 0;
    padding-left: 8px;
}

@media (max-width: 768px) {
    .uv-thankyou table.woocommerce-table--order-details tfoot tr > th:first-child {
        padding-left: 6px;
    }
}

/* 2.3 – Bortforsling-blockets rubrik och text utan inline-stilar
   (v1.7.8) ärver nu kortrubriksregeln ovan (samma uttryck som
   "Faktureringsadress"). Stycket får tät radhöjd utan extra marginal. */
.uv-thankyou__details .uvc-removal-order-info p {
    margin: 0;
    line-height: 1.6;
}

/* 1.1 (följd) – ge varje översiktskort lite mer minsta bredd på desktop
   så att e-postkortet normalt rymmer info@uppsalavitvaror.se på en rad
   även med fem kort i raden. */
@media (min-width: 769px) {
    .uv-thankyou ul.woocommerce-order-overview {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }
}

/* =====================================================
   v1.7.9 – Brödsmulor, varukorg och prisfilter
   ===================================================== */

/* 2.1 – Brödsmulor på mobil: hela sökvägen visas och radbryts naturligt
   (ca 2 rader vid långa produktnamn) i stället för att klippas med
   ellipsis. Desktop behåller en rad med ellipsis. */
@media (max-width: 768px) {
    .woocommerce-breadcrumb {
        flex-wrap: wrap;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        row-gap: 2px;
        line-height: 1.5;
    }

    .woocommerce-breadcrumb a {
        min-width: 0;
    }
}

/* 3.1 – Varukorg på mobil: produktnamn och Installation-information
   staplas vertikalt i stället för att trängas på samma rad.
   Etiketten ("Produkt med moms"), produktnamnet och varje
   installationsrad får varsin egen rad. Endast layout – inga
   beräkningar eller data påverkas. Desktop oförändrad. */
@media (max-width: 768px) {
    body.woocommerce-cart table.shop_table.cart td.product-name {
        display: block;
    }

    body.woocommerce-cart table.shop_table.cart td.product-name::before {
        display: block;
        margin-bottom: 4px;
    }

    body.woocommerce-cart table.shop_table.cart td.product-name a {
        display: block;
        line-height: 1.45;
    }

    body.woocommerce-cart table.shop_table.cart td.product-name dl.variation {
        display: block;
        margin: 6px 0 0;
        font-size: var(--uv-font-size-sm);
        line-height: 1.5;
    }

    body.woocommerce-cart table.shop_table.cart td.product-name dl.variation dt,
    body.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd {
        float: none;
        display: inline;
        margin: 0;
        padding: 0;
    }

    body.woocommerce-cart table.shop_table.cart td.product-name dl.variation dt {
        font-weight: 600;
        margin-right: 4px;
    }

    /* Radbrytning efter varje värde → "Installation: Ja" och
       "Utförs av: …" hamnar på varsin egen rad. */
    body.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd::after {
        content: "";
        display: block;
        margin-bottom: 2px;
    }

    body.woocommerce-cart table.shop_table.cart td.product-name dl.variation dd p {
        display: inline;
        margin: 0;
    }
}

/* 3.2 – Mobil: luft mellan bekräftelsemeddelandet ("… har lagts till i
   din varukorg.") och varukortets innehåll under. */
@media (max-width: 768px) {
    body.woocommerce-cart .woocommerce-message {
        margin-bottom: var(--uv-spacing-md, 16px);
    }
}

/* =========================================================
   v1.8.0 – Kontextmedvetna filter & kategorihierarki
   ========================================================= */

/* Punkt 1.1 (justerad i v1.8.1): hierarkisk kategorilista.
   .uv-filter-option är display:flex – därför måste grenens <li> vara
   display:block, annars lägger sig barnlistan BREDVID etiketten i stället
   för under den (buggen i v1.8.0). Raden (checkbox + namn + pil) är den
   enda flex-behållaren; barnlistan ligger vertikalt under med ett litet,
   kontrollerat indrag. */
.uv-filter-option--branch {
    display: block;
}

.uv-filter-option--branch > .uv-filter-option__row {
    display: flex;
    align-items: center;
    gap: var(--uv-spacing-sm);
}

.uv-filter-option--branch > .uv-filter-option__row label {
    flex: 1 1 auto;
    min-width: 0; /* låter långa kategorinamn radbrytas utan overflow */
}

/* Pil längst till höger – styr endast utfällning, samma ikonstil som
   sektionsrubrikernas chevron men mindre. */
.uv-filter-branch-toggle {
    flex-shrink: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--uv-color-muted);
    cursor: pointer;
}

.uv-filter-branch-toggle:hover {
    color: var(--uv-color-dark);
}

.uv-filter-branch-toggle svg {
    transition: transform 0.2s ease;
}

.uv-filter-branch-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Barnlista: vertikalt UNDER föräldern.
   v1.8.2 (punkt 1.1): mer kompakt indrag än v1.8.1 – ger långa
   underkategorinamn mer användbar bredd men behåller en tydlig
   förälder/barn-relation. Ingen negativ/absolut positionering. */
.uv-filter-options--children {
    margin: var(--uv-spacing-xs) 0 0 0;
    padding-left: 0.875rem;
    list-style: none;
}

.uv-filter-options--children .uv-filter-option {
    margin-top: var(--uv-spacing-xs);
}

/* v1.8.2 (punkt 1.2): underkategorier något mindre text än föräldern –
   subtil typografisk hierarki som samtidigt frigör bredd. Checkboxen
   har fasta mått och krymper INTE med texten (bekväm träffyta kvar). */
.uv-filter-options--children .uv-filter-option,
.uv-filter-options--children .uv-filter-option label {
    font-size: calc(var(--uv-font-size-sm) - 1px);
    line-height: 1.4;
}

/* Bekväm touchyta för pilen på mobil/surfplatta (1.2.10). */
@media (max-width: 1024px) {
    .uv-filter-branch-toggle {
        width: 36px;
        height: 36px;
    }
}

/* Punkt 7: förenklat verktygsfält vid noll träffar – bara filterknappen,
   så att chips-raden och "Rensa alla filter" fortfarande går att nå. */
.uv-shop-toolbar--empty {
    border-bottom: none;
    padding-bottom: 0;
}

/* v1.8.4: återhämtningsyta när en produktkategori är tom. Filterknapp och
   aktiva filter ligger kvar ovanför så kunden kan ändra sin filtrering.
   Innehållet ligger direkt i arkivytan, utan kort/border, och delar vänsterkant
   med kategoriintroduktionen ovanför. */
.uv-empty-archive {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 680px;
    margin: var(--uv-spacing-lg) 0 0;
    padding: clamp(28px, 5vw, 52px) 0;
    text-align: left;
}

.uv-empty-archive__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--uv-spacing-md);
    color: var(--uv-color-primary);
    background: var(--uv-color-light-background);
    border-radius: 50%;
}

.uv-empty-archive__icon svg {
    width: 26px;
    height: 26px;
}

.uv-empty-archive__title {
    margin: 0 0 var(--uv-spacing-sm);
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    line-height: 1.25;
}

.uv-empty-archive__text {
    max-width: 52ch;
    margin: 0 0 var(--uv-spacing-lg);
    color: var(--uv-color-muted);
}

.uv-empty-archive__button {
    min-width: 150px;
}

/* Punkt 5: kategorirubrik – lite tajtare på mobil. */
@media (max-width: 768px) {
    .uv-empty-archive {
        padding: var(--uv-spacing-lg) 0;
    }

    .uv-archive-header {
        margin-bottom: var(--uv-spacing-md);
    }
    .uv-archive-header__desc {
        margin-bottom: 0;
    }
}