/* ==========================================================================
   Kakle – handlekurv-skuffen
   WooCommerce Side Cart Premium skriver markupen (xoo-wsc-*). Her gis den
   temaets formsprak. Vi overstyrer pluginens egen CSS, derfor en del
   !important - pluginen skriver inline-stiler fra innstillingssiden.
   ========================================================================== */

/* Den flytende kurv-knappen er overflodig: handlekurven i headeren apner
   skuffen selv. To kurv-knapper paa samme skjerm er bare forvirrende. */
.xoo-wsc-basket { display: none !important; }

/* --- Bakteppe --- */
.xoo-wsc-opac {
    background: rgba(20, 20, 52, .45) !important;
    backdrop-filter: blur(3px);
}

/* --- Selve skuffen --- */
/* MERK: bredden roeres ikke.
   Pluginen bruker 350 px tre steder - bredden, skjulingen (right: -350px)
   og posisjonen til kurv-knappen. Endrer man bare bredden, blir
   differansen staaende synlig paa skjermen. Det var feilen her: jeg satte
   430 px, og 80 piksler ble liggende igjen. Skal bredden endres, maa alle
   tre folge med. Her styler vi bare utseendet. */
.xoo-wsc-container {
    background: var(--krem) !important;
    box-shadow: -24px 0 60px -20px rgba(20, 20, 52, .35) !important;
    font-family: var(--ui) !important;
    display: flex !important;
    flex-direction: column !important;
}

/* --- Topp --- */
.xoo-wsc-header {
    background: var(--hvit) !important;
    border-bottom: 1px solid var(--kant) !important;
    padding: var(--r5) var(--r5) var(--r4) !important;
    min-height: 0 !important;
}
.xoo-wsc-header .xoo-wsch-top,
.xoo-wsc-header > span:first-child {
    font-family: var(--display) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    letter-spacing: -.01em;
}
.xoo-wsc-items-count {
    display: inline-grid !important;
    place-items: center;
    min-width: 22px; height: 22px; padding: 0 7px;
    background: var(--gronn) !important;
    color: var(--navy) !important;
    border-radius: 100px !important;
    font-size: .74rem !important;
    font-weight: 700 !important;
}
.xoo-wsc-cart-close,
.xoo-wsch-close {
    color: var(--navy) !important;
    opacity: .6;
    transition: opacity var(--fart), transform var(--fart);
}
.xoo-wsc-cart-close:hover { opacity: 1; transform: rotate(90deg); }

/* --- Varelista --- */
.xoo-wsc-body { background: var(--krem) !important; padding: var(--r3) !important; }

.xoo-wsc-product {
    background: var(--hvit) !important;
    border: 1px solid var(--kant) !important;
    border-radius: var(--radius-l) !important;
    padding: var(--r3) !important;
    margin-bottom: var(--r3) !important;
    gap: var(--r3) !important;
    transition: border-color var(--fart), box-shadow var(--fart);
}
.xoo-wsc-product:hover { border-color: var(--kant-sterk) !important; box-shadow: var(--skygge-s); }

.xoo-wsc-img-col {
    width: 82px !important;
    flex: none !important;
    border-radius: var(--radius-m) !important;
    overflow: hidden;
    background: var(--sand);
}
.xoo-wsc-img-col img { border-radius: var(--radius-m) !important; mix-blend-mode: multiply; }

.xoo-wsc-pname,
.xoo-wsc-pname a {
    font-family: var(--ui) !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: var(--navy) !important;
}
.xoo-wsc-pname a:hover { color: var(--gronn-dyp) !important; }

.xoo-wsc-pprice,
.xoo-wsc-smr-ptotal {
    font-family: var(--display) !important;
    font-size: 1.02rem !important;
    font-weight: 900 !important;
    color: var(--navy) !important;
}
.xoo-wsc-sm-info { font-size: .8rem !important; color: var(--tekst-svak) !important; }

/* Antallsvelger - samme form som paa produktsiden */
.xoo-wsc-qty-box {
    border: 1.5px solid var(--kant) !important;
    border-radius: 100px !important;
    overflow: hidden;
    background: var(--hvit) !important;
    height: 40px !important;
}
.xoo-wsc-qty-box input,
.xoo-wsc-qty {
    border: 0 !important;
    background: none !important;
    font-family: var(--ui) !important;
    font-weight: 600 !important;
    color: var(--navy) !important;
    width: 38px !important;
    text-align: center !important;
}
.xoo-wsc-chng,
.xoo-wsc-plus,
.xoo-wsc-minus {
    background: none !important;
    border: 0 !important;
    color: var(--navy) !important;
    width: 34px !important;
    font-size: 1.05rem !important;
    transition: color var(--fart), background var(--fart);
}
.xoo-wsc-chng:hover { color: var(--gronn-dyp) !important; background: var(--gronn-lys) !important; }

.xoo-wsc-smr-del {
    color: var(--tekst-svak) !important;
    opacity: .65;
    transition: color var(--fart), opacity var(--fart);
}
.xoo-wsc-smr-del:hover { color: var(--rod) !important; opacity: 1; }

/* --- Tom kurv --- */
.xoo-wsc-empty-cart {
    display: grid !important;
    place-items: center;
    gap: var(--r4);
    padding: var(--r9) var(--r5) !important;
    text-align: center;
    font-size: 1rem !important;
    color: var(--tekst-svak) !important;
}
.xoo-wsc-empty-cart::after {
    content: attr(data-hint);
    font-size: .85rem;
}

/* --- Bunn --- */
.xoo-wsc-footer {
    background: var(--hvit) !important;
    border-top: 1px solid var(--kant) !important;
    padding: var(--r4) var(--r5) var(--r5) !important;
    box-shadow: 0 -8px 24px -12px rgba(20, 20, 52, .12);
}

.xoo-wsc-ftx-row,
.xoo-wsc-ft-extras {
    font-size: .88rem !important;
    color: var(--tekst-svak) !important;
    border-color: var(--kant) !important;
}
.xoo-wsc-ftx-icon { color: var(--gronn-dyp) !important; }

.xoo-wsc-ft-totals { border-top: 1px solid var(--kant) !important; padding-top: var(--r3) !important; }
.xoo-wsc-ft-amt { padding: var(--r2) 0 !important; }
.xoo-wsc-ft-amt-label { font-size: .92rem !important; color: var(--tekst-svak) !important; }
.xoo-wsc-ft-amt-value {
    font-family: var(--display) !important;
    font-size: 1.45rem !important;
    font-weight: 900 !important;
    color: var(--navy) !important;
}

/* Knappene */
.xoo-wsc-ft-buttons-cont { display: grid !important; gap: var(--r2) !important; margin-top: var(--r3) !important; }
.xoo-wsc-ft-btn {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    min-height: 52px !important;
    padding: 14px 24px !important;
    border-radius: 100px !important;
    border: 1.5px solid transparent !important;
    font-family: var(--ui) !important;
    font-size: .98rem !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
    transition: background var(--fart), color var(--fart), border-color var(--fart);
}

/* Til kassen = hovedhandlingen */
.xoo-wsc-ft-btn-checkout {
    background: var(--gronn) !important;
    color: var(--navy) !important;
    box-shadow: 0 4px 14px rgba(151, 174, 50, .3);
    order: 1;
}
.xoo-wsc-ft-btn-checkout:hover { background: var(--gronn-hover) !important; }

/* Se handlekurv = sekundaer */
.xoo-wsc-ft-btn-cart {
    background: var(--hvit) !important;
    color: var(--navy) !important;
    border-color: var(--kant-sterk) !important;
    order: 2;
}
.xoo-wsc-ft-btn-cart:hover { border-color: var(--navy) !important; background: var(--sand) !important; }

/* Fortsett handelen = lenke, ikke knapp */
.xoo-wsc-ft-btn-continue {
    background: none !important;
    border: 0 !important;
    color: var(--tekst-svak) !important;
    min-height: 0 !important;
    padding: var(--r2) !important;
    font-size: .88rem !important;
    text-decoration: underline;
    text-underline-offset: 4px;
    order: 3;
}
.xoo-wsc-ft-btn-continue:hover { color: var(--navy) !important; }

.xoo-wsc-payment-btns { margin-top: var(--r3) !important; }

/* --- Kryssalg nederst --- */
.xoo-wsc-sl-heading {
    font-family: var(--ui) !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tekst-svak) !important;
}

/* --- Fri frakt-stripa fra barnetemaet --- */
.xoo-wsc-body .free-shipping-progress-bar,
.xoo-wsc-header .free-shipping-progress-bar { margin-bottom: var(--r3); }

@media (max-width: 480px) {
    .xoo-wsc-img-col { width: 68px !important; }
}


/* ==========================================================================
   Tom handlekurv
   Pluginens egen tom-tilstand er et bilde og en knapp. Vi skjuler den og
   bygger vaar egen paa hooken xoo_wsc_empty_cart_content.
   ========================================================================== */
.xoo-wsc-empty-cart { display: none !important; }

.kurv-tom {
    display: grid;
    justify-items: center;
    gap: var(--r3);
    padding: var(--r8) var(--r5) var(--r6);
    text-align: center;
}
.kurv-tom__ikon {
    display: grid; place-items: center;
    width: 76px; height: 76px;
    border-radius: 50%;
    background: var(--gronn-lys);
    color: var(--gronn-dyp);
    margin-bottom: var(--r2);
}
.kurv-tom__ikon svg { width: 34px; height: 34px; stroke-width: 1.5; }

.kurv-tom h3 {
    font-family: var(--display); font-size: 1.3rem; font-weight: 700;
    color: var(--navy); margin: 0;
}
.kurv-tom > p { font-size: .9rem; color: var(--tekst-svak); margin: 0; max-width: 32ch; }

.kurv-tom__snarveier {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--r2);
    margin-top: var(--r2);
}
.kurv-tom__snarveier a {
    background: var(--hvit);
    border: 1px solid var(--kant);
    border-radius: 100px;
    padding: 7px 16px;
    font-size: .85rem; font-weight: 500; color: var(--navy);
    transition: border-color var(--fart), background var(--fart);
}
.kurv-tom__snarveier a:hover { border-color: var(--gronn); background: var(--gronn-lys); color: var(--gronn-dyp); }

.kurv-tom .knapp--primar { margin-top: var(--r3); }

/* --- Forslag --- */
.kurv-tom__forslag {
    width: 100%;
    margin-top: var(--r6);
    padding-top: var(--r5);
    border-top: 1px solid var(--kant);
    display: grid; gap: var(--r2);
}
.kurv-tom__tittel {
    font-size: .68rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--tekst-svak);
    margin: 0 0 var(--r2);
    text-align: left;
}
.kurv-forslag {
    display: flex; align-items: center; gap: var(--r3);
    background: var(--hvit);
    border: 1px solid var(--kant);
    border-radius: var(--radius-m);
    padding: var(--r2);
    text-align: left;
    transition: border-color var(--fart), transform var(--fart);
}
.kurv-forslag:hover { border-color: var(--gronn); transform: translateX(2px); }
.kurv-forslag img {
    width: 52px; height: 52px; flex: none;
    object-fit: contain;
    background: var(--sand);
    border-radius: var(--radius-s);
    mix-blend-mode: multiply;
}
.kurv-forslag span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.kurv-forslag strong {
    font-size: .88rem; font-weight: 600; color: var(--navy);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kurv-forslag em {
    font-style: normal;
    font-family: var(--display); font-size: .95rem; font-weight: 900; color: var(--navy);
}
.kurv-forslag em del { display: none; }
.kurv-forslag em ins { text-decoration: none; }
.kurv-forslag > svg { width: 18px; height: 18px; flex: none; color: var(--tekst-svak); }

/* --- Rettelser paa forslagskortene --- */

/* Prisen brakk mellom tallet og ",-". Woo deler beloep og valutategn i
   hver sin span, saa linjebrudd maa sperres paa hele prisen. */
.kurv-forslag em,
.kurv-forslag em * { white-space: nowrap; }

.kurv-forslag {
    gap: var(--r3);
    padding: var(--r3);
    align-items: center;
}
.kurv-forslag img { width: 56px; height: 56px; }

/* Navnet faar to linjer i stedet for aa kuttes midt i et ord */
.kurv-forslag strong {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    font-size: .86rem;
}
.kurv-forslag em { font-size: 1rem; margin-top: 2px; }
.kurv-forslag em del { display: inline; font-size: .78rem; font-weight: 400; color: var(--tekst-svak); margin-right: 5px; }
.kurv-forslag > svg { opacity: .45; transition: transform var(--fart), opacity var(--fart); }
.kurv-forslag:hover > svg { opacity: 1; transform: translateX(3px); }
.kurv-forslag:hover { border-color: var(--gronn); transform: none; background: var(--gronn-lys); }

/* "Fortsett handelen" er en lenke, ikke en knapp - pluginens
   hover-bakgrunn maa derfor slaas av, ikke bare overstyres i hviletilstand. */
.xoo-wsc-ft-btn-continue,
.xoo-wsc-ft-btn-continue:hover,
.xoo-wsc-ft-btn-continue:focus,
.xoo-wsc-ft-btn-continue:active {
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.xoo-wsc-ft-btn-continue:hover { color: var(--navy) !important; }

/* ==========================================================================
   Bredere skuff, og sperre mot overflyt
   MERK: bredden finnes tre steder hos pluginen - bredden, skjulingen og
   kurv-knappens posisjon. Alle tre maa settes sammen, ellers blir en
   differanse staaende synlig paa skjermen.
   ========================================================================== */
:root { --kurv-bredde: 420px; }

.xoo-wsc-container,
.xoo-wsc-slider {
    width: var(--kurv-bredde) !important;
    max-width: 100vw !important;
    right: calc(var(--kurv-bredde) * -1) !important;
}
.xoo-wsc-cart-active .xoo-wsc-container,
.xoo-wsc-slider-active .xoo-wsc-slider { right: 0 !important; }
.xoo-wsc-cart-active .xoo-wsc-basket { right: var(--kurv-bredde) !important; }

@media (max-width: 420px) {
    :root { --kurv-bredde: 100vw; }
}

/* Ingenting inni skuffen faar presse den bredere enn den er. Det var det
   som gjorde "Fortsett handelen" til en loddrett pille: knappen havnet i
   en kolonne paa noen faa piksler. */
/* MERK: .xoo-wsc-container skal IKKE vaere med her. Den har sin egen
   bredde over, og width: 100% her overstyrte den - skuffen ble like bred
   som vinduet. Bare innmaten skal folge containeren. */
.xoo-wsc-body,
.xoo-wsc-footer,
.xoo-wsc-header { box-sizing: border-box; width: 100% !important; min-width: 0 !important; }
.xoo-wsc-container { box-sizing: border-box; }
.xoo-wsc-body { overflow-x: hidden !important; }
.xoo-wsc-container > * { max-width: 100%; }

/* --- Footerknappene --- */
.xoo-wsc-ft-buttons-cont {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--r2) !important;
    width: 100% !important;
}
.xoo-wsc-ft-btn {
    width: 100% !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    text-orientation: initial !important;
}

/* "Fortsett handelen" er en lenke. Den arver .button og .btn fra
   WooCommerce, saa bakgrunnen maa slaas av i alle tilstander. */
.xoo-wsc-footer a.xoo-wsc-ft-btn-continue,
.xoo-wsc-footer a.xoo-wsc-ft-btn-continue:hover,
.xoo-wsc-footer a.xoo-wsc-ft-btn-continue:focus,
.xoo-wsc-footer a.xoo-wsc-ft-btn-continue:active,
.xoo-wsc-ft-buttons-cont a.button.xoo-wsc-ft-btn-continue {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--tekst-svak) !important;
    min-height: 0 !important;
    padding: var(--r3) !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.xoo-wsc-footer a.xoo-wsc-ft-btn-continue:hover { color: var(--navy) !important; }

/* --- Forslagskortene --- */
.kurv-forslag {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) 18px;
    align-items: center;
    gap: var(--r3);
}
.kurv-forslag img { width: 56px; height: 56px; margin: 0; }
.kurv-forslag span { min-width: 0; }

/* Prisen: Woo deler beloep og valutategn i hver sin span, og del/ins i
   hver sin blokk. Alt maa ligge paa en linje. */
.kurv-forslag em {
    display: flex !important;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    white-space: nowrap;
}
.kurv-forslag em del,
.kurv-forslag em ins,
.kurv-forslag em .woocommerce-Price-amount,
.kurv-forslag em .woocommerce-Price-currencySymbol {
    white-space: nowrap !important;
    display: inline !important;
}
.kurv-forslag em .screen-reader-text { display: none !important; }

/* ==========================================================================
   Footerknappene - siste ord
   Her har jeg hatt flere konkurrerende regelsett i samme fil, og
   "Fortsett handelen" endte som en loddrett stripe fordi knappen laa i en
   grid-kolonne som var smal. Denne blokken staar sist og bruker block i
   stedet for grid, saa bredden ikke kan bli tolket.
   ========================================================================== */
.xoo-wsc-modal .xoo-wsc-footer .xoo-wsc-ft-buttons-cont {
    display: block !important;
    width: 100% !important;
    margin-top: var(--r3) !important;
}

.xoo-wsc-modal .xoo-wsc-footer .xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    padding: 15px 24px !important;
    margin: 0 0 var(--r2) !important;
    border-radius: 100px !important;
    text-align: center !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    line-height: 1.2 !important;
    font-family: var(--ui) !important;
    font-size: .98rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    letter-spacing: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* Til kassen - hovedhandlingen */
.xoo-wsc-modal .xoo-wsc-footer a.xoo-wsc-ft-btn-checkout {
    background: var(--gronn) !important;
    color: var(--navy) !important;
    border: 1.5px solid var(--gronn) !important;
}
.xoo-wsc-modal .xoo-wsc-footer a.xoo-wsc-ft-btn-checkout:hover {
    background: var(--gronn-hover) !important;
    border-color: var(--gronn-hover) !important;
}

/* Se handlekurv - sekundaer */
.xoo-wsc-modal .xoo-wsc-footer a.xoo-wsc-ft-btn-cart {
    background: var(--hvit) !important;
    color: var(--navy) !important;
    border: 1.5px solid var(--kant-sterk) !important;
}
.xoo-wsc-modal .xoo-wsc-footer a.xoo-wsc-ft-btn-cart:hover {
    background: var(--sand) !important;
    border-color: var(--navy) !important;
}

/* Fortsett handelen - ogsaa en knapp, men den roligste av dem */
.xoo-wsc-modal .xoo-wsc-footer a.xoo-wsc-ft-btn-continue,
.xoo-wsc-modal .xoo-wsc-footer a.xoo-wsc-ft-btn-continue:link,
.xoo-wsc-modal .xoo-wsc-footer a.xoo-wsc-ft-btn-continue:visited {
    background: var(--hvit) !important;
    background-image: none !important;
    color: var(--navy) !important;
    border: 1.5px solid var(--kant-sterk) !important;
    margin-bottom: 0 !important;
}
.xoo-wsc-modal .xoo-wsc-footer a.xoo-wsc-ft-btn-continue:hover,
.xoo-wsc-modal .xoo-wsc-footer a.xoo-wsc-ft-btn-continue:focus,
.xoo-wsc-modal .xoo-wsc-footer a.xoo-wsc-ft-btn-continue:active {
    background: var(--sand) !important;
    background-image: none !important;
    color: var(--navy) !important;
    border-color: var(--navy) !important;
}