/* ============================================================
   DISC AT ONCE - EGEN CSS
   Tema: Fabrikk
   Komplett version V31
   ============================================================ */


/* ============================================================
   BEFINTLIGA ANPASSNINGAR
   ============================================================ */

/* SHOW DELIVERY INFORMATION */
.tws-checkout .tws-checkout--delivery-description {
    display: block !important;
}

.tws-checkout .tws-checkout--show-delivery-description {
    display: none;
}


/* --- SHOW PAYMENT DESCRIPTIONS --- */

.tws-checkout--v2 .tws-checkout--payment-active span.fa {
    display: none !important;
}

.tws-checkout--v2 .tws-checkout--payments-expand.tws-checkout--visibility-hidden {
    visibility: visible !important;
    height: auto !important;
}

.tws-checkout--payment-description.list-group-item-text.ng-binding.ng-scope.ng-hide {
    display: block !important;
}

.tws-checkout a.list-group-item p.tws-checkout--show-payment-description > span {
    display: none;
}


.tws-article-description {
    text-align: left;
}


.menuPrisjakt iframe {
    height: 80px;
    border: 2px solid #5c6177;
    border-radius: 8px;
    max-width: 100%;
    background: #fff;
}


.tws-checkout-shortcuts--ship-to {
    font-size: 6px;
    display: none;
}


.tws-checkout-shortcuts--purchase-as {
    display: none;
}


.fabrikk--vertical-menu .fabrikk--content {
    padding: 0px 0px 0px;
}


body:not(.using-touch) .tws-vertical-menu--controls,
body:not(.using-touch) .tws-vertical-menu--custom-link a,
body:not(.using-touch) .tws-vertical-menu--articlegroup {
    padding-top: 2px;
    padding-bottom: 2px;
}


body:not(.using-touch) .tws-vertical-menu--expand-children {
    min-height: 26px;
}


/* Fäller ut så att alla betalningsmetoder visas direkt */
.tws-cart--payment-name:before,
.tws-checkout--payment-methods-list span.fa-chevron-down,
.tws-checkout--payment-methods-list span.fa-chevron-up {
    display: none;
}


.tws-checkout .tws-checkout--payments-expand {
    visibility: visible !important;
    height: auto !important;
}


/* Ändrar checkout-rubrik */
h4.tws-checkout--checkout-heading {
    font-size: 0px;
    background-color: transparent;
}


h4.tws-checkout--checkout-heading:before {
    content: " ";
    font-size: 18px;
    margin: 0 !important;
    background-color: transparent;
    padding: 0 !important;
}


/* Dölj Abicarts standardrad för leverans på produktsidan */
.slot--article-stock-shipping .col-md-12 > p {
    display: none;
}


.schema-form-fieldset label[for="name"] {
    font-size: 0;
}


.schema-form-fieldset label[for="name"]:before {
    font-size: 14px;
    content: "Företagsnamn";
}


/* Visa hela artikelbeskrivningen */
.slot--article-description .tws-article-description--text-container {
    max-height: initial;
}


.tws-article-description--show-more > button {
    display: none;
}


.checkout .tws-checkout--box.tws-checkout--delivery-address
.tws-checkout--field-type-text.tws-checkout--field-id-name span {
    font-size: 0px;
}


.checkout .tws-checkout--box.tws-checkout--delivery-address
.tws-checkout--field-type-text.tws-checkout--field-id-name span::before {
    content: "Företagsnamn";
    font-size: 14px;
}


.tws-article-pricetable--table-item--interval-head {
    text-align: left;
}


.tws-vertical-menu .tws-vertical-menu--menu {
    overflow: hidden;
}



/* ============================================================
   FABRIKK-DESIGN V31
   Allt är avgränsat till den vanliga produktsidan.
   Produktlistor och "Andra köpte också" påverkas inte.
   ============================================================ */


/* ------------------------------------------------------------
   ORDNING I HÖGERSPALTEN
   ------------------------------------------------------------ */

body.article .fabrikk--article-right-col {
    position: relative;

    display: flex;
    flex-direction: column;
}


body.article .fabrikk--article-right-col > * {
    order: 100;
}


body.article .fabrikk--article-right-col > .slot--article-name {
    order: 10;
}


body.article .fabrikk--article-right-col > .slot--article-rating {
    order: 12;
}


body.article .fabrikk--article-right-col > .slot--article-price {
    order: 20;
}


body.article .fabrikk--article-right-col > .slot--wasa-kredit-widget {
    order: 22;
}


body.article .fabrikk--article-right-col > .slot--article-favoritebutton {
    order: 24;
}


body.article .fabrikk--article-right-col > .slot--prisjakt-cheapest {
    /* Efter hela köpboxen, före leverans */
    order: 45;

    box-sizing: border-box;

    width: 100%;
    max-width: 360px;

    margin: 7px 0 8px;
    padding: 0;

    background: transparent;
    border: 0;
}


/* Prisjakt-bannern ska vara en fristående kvalitets-/prisbadge */
body.article
.fabrikk--article-right-col
> .slot--prisjakt-cheapest > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* Ingen tom yta på produkter som saknar Prisjakt-banner */
body.article
.fabrikk--article-right-col
> .slot--prisjakt-cheapest:empty {
    display: none;
}


body.article .fabrikk--article-right-col > .slot--article-package {
    order: 28;
}


body.article .fabrikk--article-right-col > .fabrikk--article-choices-wrapper {
    order: 30;
}


body.article .fabrikk--article-right-col > .fabrikk--buy-button-group {
    order: 40;
}


body.article .fabrikk--article-right-col > .slot--article-pricetable {
    order: 25;
}


body.article .fabrikk--article-right-col > .slot--unique-selling-points {
    order: 55;
}


body.article .fabrikk--article-right-col > .slot--article-introduction {
    order: 60;
    display: none !important;
}


body.article .fabrikk--article-right-col > .slot--article-klarna-osm {
    order: 70;
}


body.article .fabrikk--article-right-col > .slot--article-mylists {
    order: 72;
}


body.article .fabrikk--article-right-col > .slot--payment-widget {
    order: 74;
}


body.article .fabrikk--article-right-col > .fabrikk--article-links {
    order: 90;
}



/* ------------------------------------------------------------
   PRODUKTNAMN
   ------------------------------------------------------------ */

body.article
.fabrikk--article-right-col
.slot--article-name h1 {
    margin-top: 0;
    margin-bottom: 7px;

    padding-right: 46px;

    font-size: 26px;
    line-height: 1.3;
    font-weight: 500;
}



/* ------------------------------------------------------------
   PRIS - ENDAST PRODUKTSIDAN
   ------------------------------------------------------------ */

body.article
.fabrikk--article-right-col
> .slot--article-price {
    box-sizing: border-box;

    width: 100%;
    max-width: 360px;

    margin: 4px 0 0;
    padding: 12px 12px 8px;

    background: #fafafa;

    border: 1px solid #dddddd;
    border-bottom: 0;

    border-radius: 6px 6px 0 0;
}


body.article
.fabrikk--article-right-col
.tws-article-price--price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 9px;

    margin: 0;
}


/* Aktuellt pris */
body.article
.fabrikk--article-right-col
.tws-article-price--price .twsPriceCurrent {
    order: 1;

    font-size: 28px !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;
}


/* Reapris */
body.article
.fabrikk--article-right-col
.tws-article-price--price .tws-api--price-current-diff {
    color: #d25353;
}


/* Överstruket ordinarie pris */
body.article
.fabrikk--article-right-col
.tws-article-price--price .twsPriceRegular {
    order: 2;

    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;

    color: #888;
    text-decoration: line-through;
}



/* ============================================================
   KOMPAKT KÖPBOX
   Pris, lager och köp hålls ihop. Prisjakt ligger separat under boxen.
   ============================================================ */


/* ------------------------------------------------------------
   ÖVRE DEL: LAGER / VAL
   ------------------------------------------------------------ */

body.article
.fabrikk--article-right-col
> .fabrikk--article-choices-wrapper {
    box-sizing: border-box;

    width: 100%;
    max-width: 360px;

    margin: 0;
    padding: 4px 12px 3px;

    background: #fafafa;

    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    border-top: 0;
    border-bottom: 0;

    border-radius: 0;
}


body.article
.fabrikk--article-choices-wrapper
.tws-article-stock-shipping--wrapper .row {
    margin: 0;
}


body.article
.fabrikk--article-choices-wrapper
.tws-article-stock-shipping--wrapper .col-md-12 {
    padding: 0;
}


body.article
.fabrikk--article-choices-wrapper
.tws-article-stock-shipping--stock-message {
    margin: 0;

    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
}


/* Diskret lagerindikator */
body.article
.fabrikk--article-choices-wrapper
.tws-article-stock-shipping--stock-message::before {
    content: "";
    display: inline-block;

    width: 8px;
    height: 8px;

    margin-right: 7px;

    background: #53a34f;
    border-radius: 50%;

    vertical-align: 1px;
}


body.article
.fabrikk--article-choices-wrapper
.slot--article-choices:empty {
    display: none;
}



/* ------------------------------------------------------------
   NEDRE DEL: ANTAL + KÖP
   ------------------------------------------------------------ */

body.article
.fabrikk--article-right-col
> .fabrikk--buy-button-group {
    box-sizing: border-box;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    width: 100%;
    max-width: 360px;

    margin: 0 0 12px !important;
    padding: 3px 12px 10px !important;

    background: #fafafa;

    border: 1px solid #dddddd;
    border-top: 0;

    border-radius: 0 0 6px 6px;
}



/* ANTAL */

body.article
.fabrikk--buy-button-group
.slot--article-quantity {
    flex: 0 0 142px !important;
    width: 142px !important;
}


body.article
.fabrikk--buy-button-group
.tws-article-quantity--input-row {
    margin: 0 !important;
}


body.article
.fabrikk--buy-button-group
.tws-article-quantity--input-wrapper {
    float: none !important;

    width: 100% !important;

    padding: 0 !important;
    margin: 0 !important;
}


body.article
.fabrikk--buy-button-group
.tws-article-quantity--input-wrapper label {
    display: block !important;

    margin: 0 0 4px !important;

    font-size: 12px;
    line-height: 1.3;
    font-weight: 600;
}


/* Gör kontrollen till:  -  1  +  */
body.article
.fabrikk--buy-button-group
.tws-article-quantity .input-group {
    display: flex !important;
    align-items: stretch !important;

    width: 142px !important;
}


body.article
.fabrikk--buy-button-group
.tws-article-quantity .input-group-btn {
    display: block !important;

    float: none !important;

    width: 38px !important;
    min-width: 38px !important;
}


body.article
.fabrikk--buy-button-group
.tws-article-quantity .input-group-btn .btn {
    display: block !important;

    width: 38px !important;
    min-width: 38px !important;
    height: 44px !important;

    padding: 0 !important;

    font-size: 18px !important;
    line-height: 42px !important;

    border-color: #cccccc !important;
}


body.article
.fabrikk--buy-button-group
.tws-article-quantity input.form-control {
    position: relative !important;

    display: block !important;
    flex: 0 0 66px !important;

    width: 66px !important;
    min-width: 66px !important;
    height: 44px !important;

    padding: 5px 3px !important;

    text-align: center !important;
    font-size: 15px !important;

    border-color: #cccccc !important;
}



/* KÖP */

body.article
.fabrikk--buy-button-group
.buy-button-wrapper {
    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;

    /* Linjerar Köp-knappen visuellt bättre mot antalväljaren */
    transform: translateY(-9px);
}


body.article
.fabrikk--buy-button-group
.slot--article-buy-button,

body.article
.fabrikk--buy-button-group
.tws-article-buy-button-with-modal,

body.article
.fabrikk--buy-button-group
.tws-article-buy-button-with-modal--button {
    display: block !important;

    width: 100% !important;
}


body.article
.fabrikk--buy-button-group
.tws-article-buy-button-with-modal--buy-button {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 8px 18px !important;

    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    border-radius: 4px !important;
}


body.article
.fabrikk--buy-button-group
.tws-article-buy-button-with-modal--buy-button .fa-shopping-cart {
    margin-right: 6px;
}



/* ============================================================
   MÄNGDPRIS / STAFFELPRIS - V12
   Håll Abicarts tabell helt inne i köpboxen
   ============================================================ */

body.article
.fabrikk--article-right-col
> .slot--article-pricetable {
    box-sizing: border-box !important;

    display: block !important;

    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    float: none !important;

    width: 100% !important;
    max-width: 360px !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 1px 12px 7px !important;

    background: #fafafa !important;

    border-left: 1px solid #dddddd !important;
    border-right: 1px solid #dddddd !important;
    border-top: 0 !important;
    border-bottom: 0 !important;

    overflow: visible !important;
}


/* Ingen tom yta om artikeln saknar staffelpris */
body.article
.fabrikk--article-right-col
> .slot--article-pricetable:empty {
    display: none !important;
}


/* Liten rubrik */
body.article
.fabrikk--article-right-col
> .slot--article-pricetable:not(:empty)::before {
    content: "Mängdpris";

    display: block;

    margin: 0 0 3px;

    font-size: 11px;
    line-height: 1.25;
    font-weight: 700;

    color: #555;
}


/*
   Fabrikk placerar normalt staffelpriset med egna layoutregler.
   Nollställ därför alla positioneringsvärden innan tabellen byggs upp.
*/
body.article
.fabrikk--article-right-col
.slot--article-pricetable
.tws-article-pricetable,

body.article
.fabrikk--article-right-col
.slot--article-pricetable
.tws-article-pricetable--table,

body.article
.fabrikk--article-right-col
.slot--article-pricetable
.tws-article-pricetable--table > tbody,

body.article
.fabrikk--article-right-col
.slot--article-pricetable
.tws-article-pricetable--table-item,

body.article
.fabrikk--article-right-col
.slot--article-pricetable
.tws-article-pricetable--table-item--section {
    position: static !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    float: none !important;
    clear: none !important;

    min-width: 0 !important;
    max-width: none !important;
}


/* Wrapper */
body.article
.fabrikk--article-right-col
.slot--article-pricetable
.tws-article-pricetable {
    display: block !important;

    box-sizing: border-box !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Själva tabellen */
body.article
.fabrikk--article-right-col
.slot--article-pricetable
.tws-article-pricetable--table {
    display: table !important;

    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    table-layout: fixed !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}


/* Tbody tillbaka till normal tabellfunktion */
body.article
.fabrikk--article-right-col
.slot--article-pricetable
.tws-article-pricetable--table > tbody {
    display: table-row-group !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* En kompakt rad per prisnivå */
body.article
.fabrikk--article-right-col
.slot--article-pricetable
.tws-article-pricetable--table-item {
    display: table-row !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Gemensamt för cellerna */
body.article
.fabrikk--article-right-col
.slot--article-pricetable
.tws-article-pricetable--table-item--section {
    display: table-cell !important;

    box-sizing: border-box !important;

    margin: 0 !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;

    border: 0 !important;

    font-size: 11px !important;
    line-height: 1.3 !important;

    vertical-align: middle !important;
}


/* "1" / "10" */
body.article
.fabrikk--article-right-col
.slot--article-pricetable
.tws-article-pricetable--table-item--interval-head {
    width: 27px !important;

    padding-left: 0 !important;
    padding-right: 2px !important;

    text-align: left !important;
    white-space: nowrap !important;
}


/* "- 9" / "+" */
body.article
.fabrikk--article-right-col
.slot--article-pricetable
.tws-article-pricetable--table-item--interval-tail {
    width: auto !important;

    padding-left: 0 !important;
    padding-right: 4px !important;

    text-align: left !important;
    white-space: nowrap !important;
}


/* Priset */
body.article
.fabrikk--article-right-col
.slot--article-pricetable
.tws-article-pricetable--table-item--price {
    width: 74px !important;

    padding-left: 6px !important;
    padding-right: 0 !important;

    text-align: right !important;
    white-space: nowrap !important;
}


/* Staffelpriset använder samma generella prisklass som huvudpriset */
body.article
.fabrikk--article-right-col
.slot--article-pricetable .twsPriceCurrent {
    display: inline !important;

    position: static !important;
    transform: none !important;
    float: none !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 11px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;

    color: inherit !important;
}



/* ============================================================
   LEVERANSINFORMATION
   ============================================================ */

body.article
.fabrikk--article-right-col
> .slot--unique-selling-points {
    width: 100%;
    max-width: 440px;

    margin: 2px 0 13px;
}


body.article
.fabrikk--article-right-col
.slot--unique-selling-points
.tws-unique-selling-points--wrapper {
    padding: 9px 11px;

    background: #fafafa;

    border-left: 3px solid #53a34f;
}


body.article
.fabrikk--article-right-col
.slot--unique-selling-points ul {
    margin: 0;
}


body.article
.fabrikk--article-right-col
.slot--unique-selling-points li {
    margin: 0;
}


body.article
.fabrikk--article-right-col
.slot--unique-selling-points
.tws-unique-selling-points--text {
    font-size: 12px;
    line-height: 1.4;
}




/* ============================================================
   DELA - DISKRET OCH TYDLIG IKON
   ============================================================ */

body.article
.fabrikk--article-right-col
.slot--article-share {
    position: absolute !important;

    top: 1px;
    right: 0;

    z-index: 12;

    width: 36px;
    height: 36px;

    margin: 0 !important;
    padding: 0 !important;
}


body.article
.fabrikk--article-right-col
.fabrikk--article-links {
    position: static !important;
}



body.article
.fabrikk--article-right-col
.tws-article-social--share-button {
    width: 36px !important;
    height: 36px !important;
    overflow: visible !important;
}


body.article
.fabrikk--article-right-col
.tws-article-social--share-button label.entypo-export {
    box-sizing: border-box;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #f7f7f7 !important;
    color: #5c6177 !important;

    border: 1px solid #cfd1d8 !important;
    border-radius: 50% !important;

    cursor: pointer;
    opacity: 1 !important;
}


/* Dölj texten "DELA" */
body.article
.fabrikk--article-right-col
.tws-article-social--share-button label.entypo-export > span {
    display: none !important;
}


/*
   Använd Font Awesome som redan används av Fabrikk i butiken.
   Detta gör ikonen oberoende av Entypo-ikonens färg/definition.
*/
body.article
.fabrikk--article-right-col
.tws-article-social--share-button label.entypo-export::before {
    content: "\f1e0" !important;

    font-family: FontAwesome !important;
    font-style: normal !important;
    font-weight: normal !important;

    font-size: 15px !important;
    line-height: 1 !important;

    color: #5c6177 !important;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


body.article
.fabrikk--article-right-col
.tws-article-social--share-button label.entypo-export:hover {
    background: #eeeeef !important;
    border-color: #bfc2cb !important;
    opacity: 1 !important;
}


/* Delningsmenyn ska fortfarande kunna fällas ut */
body.article
.fabrikk--article-right-col
.tws-article-social--share-button .social {
    z-index: 20;
}





/* ============================================================
   PRODUKTBILDER - V14
   Endast presentationen ändras. Bilderna beskärs inte.
   ============================================================ */


/* Håll bilddelen ren och separerad från produktlistor */
body.article
.fabrikk--article-left-col
.slot--article-images {
    position: relative;
}


/*
   På desktop gör vi huvudbildytan ca 13 % lägre.
   Bilden använder fortfarande "contain", så hela produkten syns.
*/
@media (min-width: 992px) {

    body.article
    .fabrikk--article-left-col
    .tws-article-images--slick-big
    .tws-img--container.tws-react-img--aspect-ratio-box {
        padding-bottom: 58% !important;
    }
}


/* Lite mjukare huvudbildsram */
body.article
.fabrikk--article-left-col
.tws-article-images--current-image {
    border-radius: 4px;
}


/* ------------------------------------------------------------
   ZOOMKNAPP
   ------------------------------------------------------------ */

/* Behåll Fabrikks placering, men ge knappen samma formspråk som Dela */
body.article
.fabrikk--article-left-col
.tws-article-images--image-zoom span {
    box-sizing: border-box;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 34px !important;
    height: 34px !important;

    padding: 0 !important;

    background: rgba(255, 255, 255, 0.94) !important;
    color: #5c6177 !important;

    border: 1px solid #d4d6dc !important;
    border-radius: 50% !important;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}


body.article
.fabrikk--article-left-col
.tws-article-images--image-zoom:hover span {
    background: #ffffff !important;
    border-color: #bfc2cb !important;
    transform: scale(1.04);
}


body.article
.fabrikk--article-left-col
.tws-article-images--image-zoom .fa {
    font-size: 16px !important;
    color: #5c6177 !important;
}


/* ------------------------------------------------------------
   PILAR PÅ HUVUDBILDEN
   React Slick använder dessa när produkten har flera bilder.
   ------------------------------------------------------------ */

body.article
.fabrikk--article-left-col
.tws-article-images--slick-big .slick-prev,

body.article
.fabrikk--article-left-col
.tws-article-images--slick-big .slick-next {
    z-index: 5 !important;

    width: 34px !important;
    height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: rgba(255, 255, 255, 0.90) !important;

    border: 1px solid #d8d9de !important;
    border-radius: 50% !important;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

    opacity: 0.90;

    transition:
        background 0.15s ease,
        opacity 0.15s ease;
}


body.article
.fabrikk--article-left-col
.tws-article-images--slick-big .slick-prev:hover,

body.article
.fabrikk--article-left-col
.tws-article-images--slick-big .slick-next:hover {
    background: #ffffff !important;
    opacity: 1;
}


/* Om Slick använder pseudo-element för själva pilen */
body.article
.fabrikk--article-left-col
.tws-article-images--slick-big .slick-prev::before,

body.article
.fabrikk--article-left-col
.tws-article-images--slick-big .slick-next::before {
    color: #5c6177 !important;
    opacity: 1 !important;
}


/* ------------------------------------------------------------
   MINIATYRER
   Regeln träffar endast eventuell sekundär bildslider,
   aldrig den stora huvudbilden.
   ------------------------------------------------------------ */

body.article
.fabrikk--article-left-col
.tws-article-images
.slick-slider:not(.tws-article-images--slick-big) {
    width: 82% !important;
    max-width: 430px;

    margin-top: 7px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}


body.article
.fabrikk--article-left-col
.tws-article-images
.slick-slider:not(.tws-article-images--slick-big)
.slick-slide {
    box-sizing: border-box;

    padding: 2px !important;

    border: 1px solid transparent;

    opacity: 0.76;

    transition:
        opacity 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease;
}


body.article
.fabrikk--article-left-col
.tws-article-images
.slick-slider:not(.tws-article-images--slick-big)
.slick-slide:hover {
    opacity: 0.92;
}


body.article
.fabrikk--article-left-col
.tws-article-images
.slick-slider:not(.tws-article-images--slick-big)
.slick-slide.slick-current {
    background: #fafafa;
    border-color: #8a8e9e;
    opacity: 1;
}



body.article
.fabrikk--article-left-col
.tws-article-images
.slick-slider:not(.tws-article-images--slick-big)
.tws-img--wrapper {
    margin: 0 !important;
}


/* På små skärmar låter vi miniatyrfältet använda hela bredden */
@media (max-width: 767px) {

    body.article
    .fabrikk--article-left-col
    .tws-article-images
    .slick-slider:not(.tws-article-images--slick-big) {
        width: 100% !important;
        max-width: none;
    }


    body.article
    .fabrikk--article-right-col
    .slot--article-name h1 {
        padding-right: 42px;
    }
}


/*
   På mobil behåller vi Abicarts ursprungliga bildhöjd.
   Där är bildytan redan begränsad av skärmens bredd.
*/


/* ============================================================
   RIKTIG PRODUKTBESKRIVNING LÄNGRE NED
   ============================================================ */

body.article
.fabrikk--article-bottom
.slot--article-description {
    max-width: 880px;

    margin-left: auto;
    margin-right: auto;
}


body.article
.fabrikk--article-bottom
.tws-article-description {
    text-align: left;

    padding-top: 4px;
    padding-bottom: 6px;
}


body.article
.fabrikk--article-bottom
.tws-article-description--heading {
    margin-top: 0;
    margin-bottom: 3px;

    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
}


body.article
.fabrikk--article-bottom
.tws-article-description--article-number {
    margin-top: 0;
    margin-bottom: 14px;

    font-size: 12px;
    line-height: 1.4;

    color: #777;
}


body.article
.fabrikk--article-bottom
.tws-article-description--text {
    max-width: 820px;

    font-size: 14px;
    line-height: 1.65;
}




/* ============================================================
   PRODUKTKARUSELLER - V16
   "Andra köpte också" + "Artiklar du besökt"
   ============================================================ */


/* Avgränsa ändringen till karusellerna i produktsidans nederdel */
body.article
.slot--article-page-footer
.related-articles,

body.article
.slot--article-page-footer
.visited-articles {
    margin-top: 26px;
    margin-bottom: 20px;
}


/* Rubriker */
body.article
.slot--article-page-footer
.related-articles
.tws-articles-two--heading,

body.article
.slot--article-page-footer
.visited-articles
.tws-articles-two--heading {
    margin-bottom: 11px;
}


body.article
.slot--article-page-footer
.related-articles
.tws-articles-two--heading
.tws-util-heading--heading,

body.article
.slot--article-page-footer
.visited-articles
.tws-articles-two--heading
.tws-util-heading--heading {
    margin: 0;

    text-align: left;

    font-size: 17px;
    line-height: 1.3;
    font-weight: 500;

    color: #333;
}


/* Slick får lika höga kort utan att ändra antal produkter per rad */
body.article
.slot--article-page-footer
.related-articles
.tws-articles-two--list
.slick-track,

body.article
.slot--article-page-footer
.visited-articles
.tws-articles-two--list
.slick-track {
    display: flex !important;
}


body.article
.slot--article-page-footer
.related-articles
.tws-articles-two--list
.slick-slide,

body.article
.slot--article-page-footer
.visited-articles
.tws-articles-two--list
.slick-slide {
    height: auto !important;
}


body.article
.slot--article-page-footer
.related-articles
.tws-articles-two--list
.slick-slide > div,

body.article
.slot--article-page-footer
.visited-articles
.tws-articles-two--list
.slick-slide > div,

body.article
.slot--article-page-footer
.related-articles
.slider-wrapper,

body.article
.slot--article-page-footer
.visited-articles
.slider-wrapper,

body.article
.slot--article-page-footer
.related-articles
.tws-list--grid-item,

body.article
.slot--article-page-footer
.visited-articles
.tws-list--grid-item {
    height: 100%;
}


/* ------------------------------------------------------------
   PRODUKTKORT
   ------------------------------------------------------------ */

body.article
.slot--article-page-footer
.related-articles
.thumbnail,

body.article
.slot--article-page-footer
.visited-articles
.thumbnail {
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    height: 100%;

    margin: 0 5px 4px !important;
    padding: 8px !important;

    background: #fff;

    border: 1px solid #e2e3e7 !important;
    border-radius: 6px !important;

    box-shadow: none !important;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


body.article
.slot--article-page-footer
.related-articles
.thumbnail:hover,

body.article
.slot--article-page-footer
.visited-articles
.thumbnail:hover {
    border-color: #c7cad2 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}


/* ------------------------------------------------------------
   PRODUKTBILD
   Lite lägre än Fabrikks standardkort.
   Bilden fortsätter använda contain.
   ------------------------------------------------------------ */

body.article
.slot--article-page-footer
.related-articles
.tws-article-list--product-image
.tws-img--container,

body.article
.slot--article-page-footer
.visited-articles
.tws-article-list--product-image
.tws-img--container {
    padding-bottom: 56% !important;

    background: #fff;
}


/* ------------------------------------------------------------
   CAPTION / TEXT
   ------------------------------------------------------------ */

body.article
.slot--article-page-footer
.related-articles
.thumbnail > .caption,

body.article
.slot--article-page-footer
.visited-articles
.thumbnail > .caption {
    position: static !important;

    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;

    min-height: 128px;

    padding: 8px 3px 4px !important;

    overflow: visible !important;
}


/* Produktnamn */
body.article
.slot--article-page-footer
.related-articles
.tws-article-list--article-name,

body.article
.slot--article-page-footer
.visited-articles
.tws-article-list--article-name {
    margin: 0 0 7px !important;
}


body.article
.slot--article-page-footer
.related-articles
.tws-article-list--article-name
.tws-util-heading--heading,

body.article
.slot--article-page-footer
.visited-articles
.tws-article-list--article-name
.tws-util-heading--heading {
    min-height: 34px;

    margin: 0 !important;

    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
}


body.article
.slot--article-page-footer
.related-articles
.tws-article-list--article-name a,

body.article
.slot--article-page-footer
.visited-articles
.tws-article-list--article-name a {
    color: #333 !important;
    text-decoration: none !important;
}


body.article
.slot--article-page-footer
.related-articles
.tws-article-list--article-name a:hover,

body.article
.slot--article-page-footer
.visited-articles
.tws-article-list--article-name a:hover {
    text-decoration: underline !important;
}


/* ------------------------------------------------------------
   PRIS
   ------------------------------------------------------------ */

body.article
.slot--article-page-footer
.related-articles
.tws-article-list--price,

body.article
.slot--article-page-footer
.visited-articles
.tws-article-list--price {
    margin-top: auto;
    margin-bottom: 4px;
}


body.article
.slot--article-page-footer
.related-articles
.tws-article-list--price
.twsPriceCurrent,

body.article
.slot--article-page-footer
.visited-articles
.tws-article-list--price
.twsPriceCurrent {
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}


body.article
.slot--article-page-footer
.related-articles
.tws-article-list--price
.tws-api--price-current-diff,

body.article
.slot--article-page-footer
.visited-articles
.tws-article-list--price
.tws-api--price-current-diff {
    color: #d25353 !important;
}


body.article
.slot--article-page-footer
.related-articles
.tws-article-list--price
.twsPriceRegular,

body.article
.slot--article-page-footer
.visited-articles
.tws-article-list--price
.twsPriceRegular {
    margin-left: 5px;

    font-size: 11px !important;
    font-weight: 400 !important;

    color: #888 !important;
    text-decoration: line-through;
}


/* ------------------------------------------------------------
   LAGER
   ------------------------------------------------------------ */

body.article
.slot--article-page-footer
.related-articles
.tws-article-list--item-stock-wrap,

body.article
.slot--article-page-footer
.visited-articles
.tws-article-list--item-stock-wrap {
    position: static !important;
    float: none !important;
    clear: both !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 16px !important;

    margin: 2px 0 6px !important;
    padding: 0 !important;

    font-size: 11px !important;
    line-height: 1.35 !important;

    color: #666 !important;
}


body.article
.slot--article-page-footer
.related-articles
.tws-article-list--item-stock,

body.article
.slot--article-page-footer
.visited-articles
.tws-article-list--item-stock {
    position: static !important;
    float: none !important;

    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap;
}




body.article
.slot--article-page-footer
.related-articles
.tws-article-list--item-stock::before,

body.article
.slot--article-page-footer
.visited-articles
.tws-article-list--item-stock::before {
    content: "";

    display: inline-block;

    width: 6px;
    height: 6px;

    margin-right: 5px;

    background: #53a34f;
    border-radius: 50%;

    vertical-align: 1px;
}


/* ------------------------------------------------------------
   ANTAL + KÖP
   ------------------------------------------------------------ */

body.article
.slot--article-page-footer
.related-articles
.tws-article-list--buy-button,

body.article
.slot--article-page-footer
.visited-articles
.tws-article-list--buy-button {
    position: static !important;
    float: none !important;
    clear: both !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    height: auto !important;
    min-height: 36px !important;

    gap: 7px !important;

    margin: 0 !important;
    padding: 0 !important;
}


body.article
.slot--article-page-footer
.related-articles
.tws-article-list--quantity,

body.article
.slot--article-page-footer
.visited-articles
.tws-article-list--quantity {
    box-sizing: border-box;

    position: static !important;
    float: none !important;

    flex: 0 0 46px !important;

    width: 46px !important;
    min-width: 46px !important;
    height: 34px !important;

    margin: 0 !important;
    padding: 4px !important;

    text-align: center !important;

    font-size: 12px !important;

    border-color: #d1d3d8 !important;
    border-radius: 4px !important;
}


body.article
.slot--article-page-footer
.related-articles
.tws-article-list--buy-button
.tws-article-buy-button-with-modal--buy-button,

body.article
.slot--article-page-footer
.visited-articles
.tws-article-list--buy-button
.tws-article-buy-button-with-modal--buy-button {
    position: static !important;
    float: none !important;

    flex: 0 1 92px !important;

    width: 92px !important;
    min-width: 78px !important;
    height: 34px !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 5px 12px !important;

    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    border-radius: 4px !important;
}


/* ------------------------------------------------------------
   REAETIKETT
   ------------------------------------------------------------ */

body.article
.slot--article-page-footer
.related-articles
.tws-article-labels--label,

body.article
.slot--article-page-footer
.visited-articles
.tws-article-labels--label {
    border-radius: 4px !important;
}


body.article
.slot--article-page-footer
.related-articles
.tws-article-labels--label-text,

body.article
.slot--article-page-footer
.visited-articles
.tws-article-labels--label-text {
    font-size: 11px !important;
    font-weight: 700 !important;
}


/* ------------------------------------------------------------
   KARUSELLPILAR
   ------------------------------------------------------------ */

body.article
.slot--article-page-footer
.related-articles
.tws-articles-two--list
.slick-prev,

body.article
.slot--article-page-footer
.related-articles
.tws-articles-two--list
.slick-next,

body.article
.slot--article-page-footer
.visited-articles
.tws-articles-two--list
.slick-prev,

body.article
.slot--article-page-footer
.visited-articles
.tws-articles-two--list
.slick-next {
    z-index: 6 !important;

    width: 30px !important;
    height: 30px !important;

    background: rgba(255, 255, 255, 0.94) !important;

    border: 1px solid #d8d9de !important;
    border-radius: 50% !important;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

    opacity: 0.92;
}


body.article
.slot--article-page-footer
.related-articles
.tws-articles-two--list
.slick-prev::before,

body.article
.slot--article-page-footer
.related-articles
.tws-articles-two--list
.slick-next::before,

body.article
.slot--article-page-footer
.visited-articles
.tws-articles-two--list
.slick-prev::before,

body.article
.slot--article-page-footer
.visited-articles
.tws-articles-two--list
.slick-next::before {
    color: #5c6177 !important;
    opacity: 1 !important;
}


/* ------------------------------------------------------------
   KARUSELLPUNKTER
   ------------------------------------------------------------ */

body.article
.slot--article-page-footer
.related-articles
.slick-dots,

body.article
.slot--article-page-footer
.visited-articles
.slick-dots {
    margin-top: 6px !important;
}


body.article
.slot--article-page-footer
.related-articles
.slick-dots li,

body.article
.slot--article-page-footer
.visited-articles
.slick-dots li {
    width: 14px !important;
    height: 14px !important;
    margin: 0 1px !important;
}


body.article
.slot--article-page-footer
.related-articles
.slick-dots li button::before,

body.article
.slot--article-page-footer
.visited-articles
.slick-dots li button::before {
    font-size: 6px !important;
}


/* ------------------------------------------------------------
   MOBIL
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    body.article
    .slot--article-page-footer
    .related-articles
    .thumbnail,

    body.article
    .slot--article-page-footer
    .visited-articles
    .thumbnail {
        margin-left: 3px !important;
        margin-right: 3px !important;
        padding: 7px !important;
    }


    body.article
    .slot--article-page-footer
    .related-articles
    .tws-articles-two--heading
    .tws-util-heading--heading,

    body.article
    .slot--article-page-footer
    .visited-articles
    .tws-articles-two--heading
    .tws-util-heading--heading {
        font-size: 16px;
    }


    body.article
    .slot--article-page-footer
    .related-articles
    .tws-article-list--product-image
    .tws-img--container,

    body.article
    .slot--article-page-footer
    .visited-articles
    .tws-article-list--product-image
    .tws-img--container {
        padding-bottom: 60% !important;
    }
}




/* ============================================================
   TILLBAKA TILL TOPPEN - V18
   Behåller Abicarts befintliga scrollfunktion.
   ============================================================ */

body.article
.fabrikk--back-to-top {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    margin: 24px 0 18px !important;
    padding: 0 !important;

    text-align: center !important;
}


body.article
.fabrikk--back-to-top-link {
    box-sizing: border-box;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px;

    min-height: 38px;

    margin: 0 !important;
    padding: 8px 15px !important;

    background: #f7f7f8 !important;
    color: #5c6177 !important;

    border: 1px solid #d6d8de !important;
    border-radius: 999px !important;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

    text-decoration: none !important;

    cursor: pointer !important;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}


/* Font Awesome finns redan i Fabrikk */
body.article
.fabrikk--back-to-top-link::before {
    content: "\f062";

    font-family: FontAwesome !important;
    font-style: normal !important;
    font-weight: normal !important;

    font-size: 13px;
    line-height: 1;

    color: #5c6177;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


body.article
.fabrikk--back-to-top-link-text {
    display: inline !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;

    color: #5c6177 !important;
}


body.article
.fabrikk--back-to-top-link:hover {
    background: #ffffff !important;
    border-color: #bfc2cb !important;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);

    transform: translateY(-1px);

    text-decoration: none !important;
}


body.article
.fabrikk--back-to-top-link:focus {
    outline: 2px solid rgba(92, 97, 119, 0.25);
    outline-offset: 2px;
}


/* På mobil gör vi knappen lite lättare att träffa */
@media (max-width: 767px) {

    body.article
    .fabrikk--back-to-top {
        margin-top: 20px !important;
        margin-bottom: 16px !important;
    }


    body.article
    .fabrikk--back-to-top-link {
        min-height: 42px;

        padding: 9px 16px !important;
    }
}




/* ============================================================
   KATEGORI-/PRODUKTLISTOR - V19
   Produktsidan (body.article) påverkas inte.
   Antalet kolumner lämnas åt Fabrikk.
   ============================================================ */


/*
   Vi riktar oss mot vanliga grid-listor där produktkorten ligger
   direkt i tws-list--list. Karusellerna på produktsidan är därmed
   inte en del av denna styling.
*/
body:not(.article)
.tws-article-list--list
.tws-list--grid-item {
    box-sizing: border-box;
}


/* ------------------------------------------------------------
   PRODUKTKORT
   ------------------------------------------------------------ */

body:not(.article)
.tws-article-list--list
.tws-list--grid-item
> .thumbnail {
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    min-height: 100%;

    margin: 0 4px 12px !important;
    padding: 7px !important;

    background: #fff !important;

    border: 1px solid #e1e2e6 !important;
    border-radius: 6px !important;

    box-shadow: none !important;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}


body:not(.article)
.tws-article-list--list
.tws-list--grid-item
> .thumbnail:hover {
    border-color: #c7cad2 !important;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;

    transform: translateY(-1px);
}


/* ------------------------------------------------------------
   PRODUKTBILD
   ------------------------------------------------------------ */

body:not(.article)
.tws-article-list--list
.tws-list--grid-item
.tws-article-list--product-image
.tws-img--container {
    padding-bottom: 61% !important;

    background: #fff !important;
}


/* Bildlänken ska inte få extra luft */
body:not(.article)
.tws-article-list--list
.tws-list--grid-item
.tws-article-list--grid-item-link {
    display: block;
}


/* ------------------------------------------------------------
   CAPTION
   ------------------------------------------------------------ */

body:not(.article)
.tws-article-list--list
.tws-list--grid-item
> .thumbnail
> .caption {
    position: static !important;

    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;

    min-height: 145px;

    padding: 8px 2px 3px !important;

    overflow: visible !important;
}


/* ------------------------------------------------------------
   PRODUKTNAMN
   ------------------------------------------------------------ */

body:not(.article)
.tws-article-list--list
.tws-list--grid-item
.tws-article-list--article-name {
    margin: 0 0 7px !important;
}


body:not(.article)
.tws-article-list--list
.tws-list--grid-item
.tws-article-list--article-name
.tws-util-heading--heading {
    min-height: 50px;

    margin: 0 !important;

    font-size: 13px !important;
    line-height: 1.28 !important;
    font-weight: 500 !important;
}


body:not(.article)
.tws-article-list--list
.tws-list--grid-item
.tws-article-list--article-name a {
    color: #333 !important;

    text-decoration: none !important;
}


body:not(.article)
.tws-article-list--list
.tws-list--grid-item
.tws-article-list--article-name a:hover {
    text-decoration: underline !important;
}


/* ------------------------------------------------------------
   PRIS
   ------------------------------------------------------------ */

body:not(.article)
.tws-article-list--list
.tws-list--grid-item
.tws-article-list--price {
    min-height: 31px;

    margin-top: auto !important;
    margin-bottom: 3px !important;
}


body:not(.article)
.tws-article-list--list
.tws-list--grid-item
.tws-article-list--price
.twsPriceCurrent {
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}


/* Reapris */
body:not(.article)
.tws-article-list--list
.tws-list--grid-item
.tws-article-list--price
.tws-api--price-current-diff {
    color: #d25353 !important;
}


/* Överstruket ordinarie pris */
body:not(.article)
.tws-article-list--list
.tws-list--grid-item
.tws-article-list--price
.twsPriceRegular {
    margin-left: 5px;

    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;

    color: #888 !important;
    text-decoration: line-through !important;
}


/* ------------------------------------------------------------
   LAGER
   ------------------------------------------------------------ */

body:not(.article)
.tws-article-list--list
.tws-list--grid-item
.tws-article-list--item-stock-wrap {
    position: static !important;
    float: none !important;

    display: block !important;

    min-height: 16px;

    margin: 1px 0 6px !important;
    padding: 0 !important;

    font-size: 11px !important;
    line-height: 1.35 !important;

    color: #666 !important;
}


body:not(.article)
.tws-article-list--list
.tws-list--grid-item
.tws-article-list--item-stock {
    position: static !important;

    white-space: nowrap;
}


body:not(.article)
.tws-article-list--list
.tws-list--grid-item
.tws-article-list--item-stock::before {
    content: "";

    display: inline-block;

    width: 6px;
    height: 6px;

    margin-right: 5px;

    background: #53a34f;
    border-radius: 50%;

    vertical-align: 1px;
}


/* ------------------------------------------------------------
   ANTAL + KÖP
   ------------------------------------------------------------ */

body:not(.article)
.tws-article-list--list
.tws-list--grid-item
.tws-article-list--buy-button {
    position: static !important;
    float: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    min-height: 34px !important;

    gap: 6px !important;

    margin: 0 !important;
    padding: 0 !important;
}


body:not(.article)
.tws-article-list--list
.tws-list--grid-item
.tws-article-list--quantity {
    box-sizing: border-box;

    position: static !important;
    float: none !important;

    flex: 0 0 42px !important;

    width: 42px !important;
    min-width: 42px !important;
    height: 34px !important;

    margin: 0 !important;
    padding: 4px !important;

    text-align: center !important;

    font-size: 12px !important;

    border-color: #d1d3d8 !important;
    border-radius: 4px !important;
}


body:not(.article)
.tws-article-list--list
.tws-list--grid-item
.tws-article-list--buy-button
.tws-article-buy-button-with-modal--buy-button {
    position: static !important;
    float: none !important;

    flex: 0 0 82px !important;

    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 34px !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 5px 10px !important;

    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    border-radius: 4px !important;
}


/* ------------------------------------------------------------
   REAETIKETTER
   ------------------------------------------------------------ */

body:not(.article)
.tws-article-list--list
.tws-list--grid-item
.tws-article-labels--label {
    border-radius: 4px !important;
}


body:not(.article)
.tws-article-list--list
.tws-list--grid-item
.tws-article-labels--label-text {
    font-size: 11px !important;
    font-weight: 700 !important;
}


/* ------------------------------------------------------------
   LITE MER LUFT MELLAN PRODUKTRADER
   ------------------------------------------------------------ */

body:not(.article)
.tws-article-list--list
.tws-list--grid-item {
    margin-bottom: 5px;
}


/* ------------------------------------------------------------
   MOBIL / SMALARE SKÄRMAR
   Vi ändrar inte Fabrikks kolumnantal, bara kortens detaljer.
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    body:not(.article)
    .tws-article-list--list
    > .tws-list--list
    > .tws-list--grid-item
    > .thumbnail {
        margin-left: 3px !important;
        margin-right: 3px !important;

        padding: 6px !important;
    }


    body:not(.article)
    .tws-article-list--list
    > .tws-list--list
    > .tws-list--grid-item
    .tws-article-list--article-name
    .tws-util-heading--heading {
        min-height: 0;

        font-size: 12px !important;
    }


    body:not(.article)
    .tws-article-list--list
    > .tws-list--list
    > .tws-list--grid-item
    > .thumbnail
    > .caption {
        min-height: 0;
    }


    body:not(.article)
    .tws-article-list--list
    > .tws-list--list
    > .tws-list--grid-item
    .tws-article-list--product-image
    .tws-img--container {
        padding-bottom: 64% !important;
    }
}




/* ============================================================
   V20 - FALLBACK FÖR ABICARTS DYNAMISKA TWS-ARTICLE-LIST
   Samma kortdesign, men via själva custom-elementet.
   ============================================================ */

body:not(.article)
tws-article-list
.tws-list--grid-item
.thumbnail {
    box-sizing: border-box;

    display: flex !important;
    flex-direction: column !important;

    min-height: 100%;

    margin: 0 4px 12px !important;
    padding: 7px !important;

    background: #fff !important;

    border: 1px solid #e1e2e6 !important;
    border-radius: 6px !important;

    box-shadow: none !important;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}


body:not(.article)
tws-article-list
.tws-list--grid-item
.thumbnail:hover {
    border-color: #c7cad2 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    transform: translateY(-1px);
}


body:not(.article)
tws-article-list
.tws-list--grid-item
.tws-article-list--product-image
.tws-img--container {
    padding-bottom: 61% !important;
    background: #fff !important;
}


body:not(.article)
tws-article-list
.tws-list--grid-item
.thumbnail
.caption {
    position: static !important;

    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;

    min-height: 145px;

    padding: 8px 2px 3px !important;

    overflow: visible !important;
}


body:not(.article)
tws-article-list
.tws-list--grid-item
.tws-article-list--article-name {
    margin: 0 0 7px !important;
}


body:not(.article)
tws-article-list
.tws-list--grid-item
.tws-article-list--article-name
.tws-util-heading--heading {
    min-height: 50px;

    margin: 0 !important;

    font-size: 13px !important;
    line-height: 1.28 !important;
    font-weight: 500 !important;
}


body:not(.article)
tws-article-list
.tws-list--grid-item
.tws-article-list--article-name a {
    color: #333 !important;
    text-decoration: none !important;
}


body:not(.article)
tws-article-list
.tws-list--grid-item
.tws-article-list--article-name a:hover {
    text-decoration: underline !important;
}


body:not(.article)
tws-article-list
.tws-list--grid-item
.tws-article-list--price {
    min-height: 31px;

    margin-top: auto !important;
    margin-bottom: 3px !important;
}


body:not(.article)
tws-article-list
.tws-list--grid-item
.tws-article-list--price
.twsPriceCurrent {
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}


body:not(.article)
tws-article-list
.tws-list--grid-item
.tws-article-list--price
.tws-api--price-current-diff {
    color: #d25353 !important;
}


body:not(.article)
tws-article-list
.tws-list--grid-item
.tws-article-list--price
.twsPriceRegular {
    margin-left: 5px;

    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;

    color: #888 !important;
    text-decoration: line-through !important;
}


body:not(.article)
tws-article-list
.tws-list--grid-item
.tws-article-list--item-stock-wrap {
    position: static !important;
    float: none !important;
    clear: both !important;

    display: block !important;

    width: 100% !important;
    min-height: 16px;

    margin: 1px 0 6px !important;
    padding: 0 !important;

    font-size: 11px !important;
    line-height: 1.35 !important;

    color: #666 !important;
}


body:not(.article)
tws-article-list
.tws-list--grid-item
.tws-article-list--item-stock {
    position: static !important;
    float: none !important;

    white-space: nowrap;
}


body:not(.article)
tws-article-list
.tws-list--grid-item
.tws-article-list--item-stock::before {
    content: "";

    display: inline-block;

    width: 6px;
    height: 6px;

    margin-right: 5px;

    background: #53a34f;
    border-radius: 50%;

    vertical-align: 1px;
}


body:not(.article)
tws-article-list
.tws-list--grid-item
.tws-article-list--buy-button {
    position: static !important;
    float: none !important;
    clear: both !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    min-height: 34px !important;

    gap: 6px !important;

    margin: 0 !important;
    padding: 0 !important;
}


body:not(.article)
tws-article-list
.tws-list--grid-item
.tws-article-list--quantity {
    box-sizing: border-box;

    position: static !important;
    float: none !important;

    flex: 0 0 42px !important;

    width: 42px !important;
    min-width: 42px !important;
    height: 34px !important;

    margin: 0 !important;
    padding: 4px !important;

    text-align: center !important;

    font-size: 12px !important;

    border-color: #d1d3d8 !important;
    border-radius: 4px !important;
}


body:not(.article)
tws-article-list
.tws-list--grid-item
.tws-article-list--buy-button
.tws-article-buy-button-with-modal--buy-button {
    position: static !important;
    float: none !important;

    flex: 0 0 82px !important;

    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 34px !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 5px 10px !important;

    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    border-radius: 4px !important;
}


body:not(.article)
tws-article-list
.tws-list--grid-item
.tws-article-labels--label {
    border-radius: 4px !important;
}


body:not(.article)
tws-article-list
.tws-list--grid-item
.tws-article-labels--label-text {
    font-size: 11px !important;
    font-weight: 700 !important;
}


/* Mobil */
@media (max-width: 767px) {

    body:not(.article)
    tws-article-list
    .tws-list--grid-item
    .thumbnail {
        margin-left: 3px !important;
        margin-right: 3px !important;
        padding: 6px !important;
    }


    body:not(.article)
    tws-article-list
    .tws-list--grid-item
    .tws-article-list--article-name
    .tws-util-heading--heading {
        min-height: 0;
        font-size: 12px !important;
    }


    body:not(.article)
    tws-article-list
    .tws-list--grid-item
    .thumbnail
    .caption {
        min-height: 0;
    }


    body:not(.article)
    tws-article-list
    .tws-list--grid-item
    .tws-article-list--product-image
    .tws-img--container {
        padding-bottom: 64% !important;
    }
}




/* V21: lite smalare Köp-knapp på små skärmar */
@media (max-width: 767px) {

    body:not(.article)
    .tws-article-list--list
    .tws-list--grid-item
    .tws-article-list--buy-button
    .tws-article-buy-button-with-modal--buy-button,

    body:not(.article)
    tws-article-list
    .tws-list--grid-item
    .tws-article-list--buy-button
    .tws-article-buy-button-with-modal--buy-button {
        flex-basis: 72px !important;

        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
    }
}




/* ============================================================
   KATEGORIRUBRIK + LISTKONTROLLER - V22
   Gäller sidor som faktiskt innehåller tws-article-list.
   Produktsidan påverkas inte.
   ============================================================ */


/* ------------------------------------------------------------
   KATEGORIRUBRIK
   Vi återanvänder den aktuella breadcrumb-texten i stället för
   att hårdkoda kategorinamnet.
   ------------------------------------------------------------ */

body:not(.article):has(.tws-article-list--list)
.slot--breadcrumbs
.tws-breadcrumbs {
    padding-bottom: 5px;
}


/* Tidigare breadcrumb-delar får ligga kvar diskret på första raden */
body:not(.article):has(.tws-article-list--list)
.slot--breadcrumbs
.tws-breadcrumbs
.tws-breadcrumbs--crumb:not(.tws-breadcrumbs--current) {
    font-size: 11px;
    opacity: 0.78;
}


/* Aktuell kategori blir sidans riktiga visuella rubrik */
body:not(.article):has(.tws-article-list--list)
.slot--breadcrumbs
.tws-breadcrumbs
.tws-breadcrumbs--current {
    display: block !important;

    margin-top: 8px;

    font-size: 23px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;

    opacity: 1 !important;
}


/* Ingen ">"-spacer framför själva rubriken */
body:not(.article):has(.tws-article-list--list)
.slot--breadcrumbs
.tws-breadcrumbs
.tws-breadcrumbs--current
.tws-breadcrumbs--spacer {
    display: none !important;
}


body:not(.article):has(.tws-article-list--list)
.slot--breadcrumbs
.tws-breadcrumbs
.tws-breadcrumbs--current
.tws-breadcrumbs--text {
    color: #333 !important;
    text-decoration: none !important;

    pointer-events: none;
}


/* Lite mindre tomrum mellan rubrikområdet och produktlistan */
body:not(.article):has(.tws-article-list--list)
.fabrikk--content-wrapper {
    padding-top: 3px;
}


/* ------------------------------------------------------------
   VERKTYGSRAD / SORTERING / GRID-LIST
   Abicarts listkontroller använder vanliga btn-default-knappar.
   Köp-knapparna är btn-primary och berörs därför inte.
   ------------------------------------------------------------ */

body:not(.article)
.tws-article-list--list
.btn-default {
    box-sizing: border-box;

    min-height: 32px;

    margin: 0 !important;
    padding: 6px 10px !important;

    background: #fff !important;
    color: #5c6177 !important;

    border: 1px solid #d6d8de !important;
    border-radius: 4px !important;

    box-shadow: none !important;

    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}


body:not(.article)
.tws-article-list--list
.btn-default:hover {
    background: #f6f6f7 !important;
    border-color: #bfc2cb !important;
    color: #454a5e !important;
}


/* Aktiv list/grid-knapp */
body:not(.article)
.tws-article-list--list
.btn-default.active,

body:not(.article)
.tws-article-list--list
.btn-default:active {
    background: #5c6177 !important;
    color: #fff !important;

    border-color: #5c6177 !important;

    box-shadow: none !important;
}


/* Ikoner följer knappens färg */
body:not(.article)
.tws-article-list--list
.btn-default .fa {
    color: inherit !important;

    font-size: 12px !important;
}


/* Sammanhängande knappgrupper för list/grid */
body:not(.article)
.tws-article-list--list
.btn-group
.btn-default {
    border-radius: 0 !important;
}


body:not(.article)
.tws-article-list--list
.btn-group
.btn-default:first-child {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}


body:not(.article)
.tws-article-list--list
.btn-group
.btn-default:last-child {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}


/* Sorteringsdropdown */
body:not(.article)
.tws-article-list--list
.dropdown-toggle.btn-default {
    min-width: 92px;

    text-align: left;
}


body:not(.article)
.tws-article-list--list
.dropdown-toggle.btn-default
.caret {
    float: right;

    margin-top: 5px;
    margin-left: 8px;
}


/* Dropdown-menyn */
body:not(.article)
.tws-article-list--list
.dropdown-menu {
    margin-top: 4px !important;
    padding: 5px 0 !important;

    border: 1px solid #d6d8de !important;
    border-radius: 5px !important;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.09) !important;
}


body:not(.article)
.tws-article-list--list
.dropdown-menu > li > a {
    padding: 7px 12px !important;

    font-size: 12px !important;

    color: #444 !important;
}


body:not(.article)
.tws-article-list--list
.dropdown-menu > li > a:hover {
    background: #f5f5f6 !important;
}


/* Om Abicart använder select på någon skärmstorlek */
body:not(.article)
.tws-article-list--list
select.form-control {
    height: 32px !important;
    min-height: 32px !important;

    padding: 5px 28px 5px 9px !important;

    border-color: #d6d8de !important;
    border-radius: 4px !important;

    box-shadow: none !important;

    font-size: 12px !important;
}


/* ------------------------------------------------------------
   REAPRIS - lite tydligare separation
   ------------------------------------------------------------ */

body:not(.article)
.tws-article-list--list
.tws-list--grid-item
.tws-article-list--price
.twsPriceRegular {
    display: block !important;

    margin-top: 2px !important;
    margin-left: 0 !important;

    font-size: 10px !important;
    line-height: 1.15 !important;

    color: #999 !important;

    opacity: 0.9;
}


/* ------------------------------------------------------------
   MOBIL
   Rubriken får vara mindre och verktygsknapparna lite kompaktare.
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    body:not(.article):has(.tws-article-list--list)
    .slot--breadcrumbs
    .tws-breadcrumbs
    .tws-breadcrumbs--current {
        margin-top: 6px;

        font-size: 19px !important;
    }


    body:not(.article)
    .tws-article-list--list
    .btn-default {
        min-height: 34px;

        padding-left: 9px !important;
        padding-right: 9px !important;
    }
}




/* ============================================================
   KATEGORISIDA - V24
   Stabil V22-bas + säkrare listvy
   ============================================================ */


/* ------------------------------------------------------------
   RUBRIK
   ------------------------------------------------------------ */

/* Hemikonen behövs inte när aktuell kategori visas som stor rubrik */
body:not(.article):has(.tws-article-list--list)
.slot--breadcrumbs
.tws-breadcrumbs--home-icon {
    display: none !important;
}


/* Ingen vänsterlucka efter den borttagna hemikonen */
body:not(.article):has(.tws-article-list--list)
.slot--breadcrumbs
.tws-breadcrumbs {
    padding-left: 0 !important;
}


/* ------------------------------------------------------------
   VERKTYGSRAD
   Flytta bara kontrollerna, aldrig hela produktlistan.
   ------------------------------------------------------------ */

@media (min-width: 768px) {

    body:not(.article)
    .tws-article-list--list
    .btn-group,

    body:not(.article)
    .tws-article-list--list
    .dropdown {
        transform: translateY(-12px);
    }
}


/* ============================================================
   LISTVY
   Vi känner igen listvyn på att den första grid/list-knappen
   är aktiv. Då kan alla produktkort i listan stylas utan att
   känna till Abicarts dynamiskt genererade radklass.
   ============================================================ */

body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.thumbnail {
    box-sizing: border-box;

    position: relative;

    display: flex !important;
    align-items: center !important;

    width: calc(100% - 8px) !important;
    max-width: 1080px !important;
    min-height: 92px !important;

    margin: 0 0 8px 4px !important;
    padding: 7px 10px !important;

    background: #fff !important;

    border: 1px solid #e2e3e7 !important;
    border-radius: 6px !important;

    box-shadow: none !important;

    overflow: visible !important;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}


body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.thumbnail:hover {
    border-color: #c7cad2 !important;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.055) !important;

    transform: translateY(-1px);
}


/* ------------------------------------------------------------
   BILD
   ------------------------------------------------------------ */

body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.thumbnail
a:has(.tws-article-list--product-image) {
    box-sizing: border-box;

    flex: 0 0 82px !important;

    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;

    margin: 0 14px 0 0 !important;
    padding: 0 !important;
}


body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-article-list--product-image {
    width: 82px !important;
    max-width: 82px !important;
}


body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-article-list--product-image
.tws-img--container {
    padding-bottom: 100% !important;

    background: #fff !important;
}


/* ------------------------------------------------------------
   TEXTDEL
   ------------------------------------------------------------ */

body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.thumbnail
.caption {
    box-sizing: border-box;

    position: static !important;
    float: none !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 84px;
    grid-template-rows: auto auto;
    align-items: center;

    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;
    min-height: 72px !important;

    column-gap: 18px;
    row-gap: 5px;

    margin: 0 !important;
    padding: 3px 2px 3px 0 !important;

    overflow: visible !important;
}


/* Produktnamn */
body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-article-list--article-name {
    grid-column: 1;
    grid-row: 1;

    align-self: end;

    margin: 0 !important;
    padding: 0 !important;
}


body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-article-list--article-name
.tws-util-heading--heading {
    min-height: 0 !important;

    margin: 0 !important;

    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
}


/* Pris */
body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-article-list--price {
    grid-column: 1;
    grid-row: 2;

    align-self: start;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-article-list--price
.twsPriceCurrent {
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}


body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-article-list--price
.tws-api--price-current-diff {
    color: #d25353 !important;
}


body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-article-list--price
.twsPriceRegular {
    display: inline !important;

    margin: 0 0 0 7px !important;

    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;

    color: #999 !important;
    text-decoration: line-through !important;
}


/* ------------------------------------------------------------
   KÖP
   ------------------------------------------------------------ */

body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-article-list--buy-button {
    position: static !important;
    float: none !important;

    grid-column: 2;
    grid-row: 1 / span 2;

    align-self: center !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    width: 84px !important;
    min-width: 84px !important;

    margin: 0 !important;
    padding: 0 !important;
}


body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-article-list--buy-button
.tws-article-buy-button-with-modal--buy-button {
    box-sizing: border-box;

    position: static !important;
    float: none !important;

    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;

    height: 34px !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 5px 10px !important;

    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    border-radius: 4px !important;
}


/* Listvyn har normalt inget antalsfält, men om Abicart lägger in
   ett sådant på någon sida döljer vi det inte. */
body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-article-list--quantity {
    position: static !important;
    float: none !important;
}


/* ------------------------------------------------------------
   REAETIKETT
   ------------------------------------------------------------ */

body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.thumbnail
.tws-article-list--labels {
    position: absolute !important;

    top: 5px !important;
    left: 5px !important;

    z-index: 5;
}


body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-article-labels--label {
    border-radius: 4px !important;
}


/* ------------------------------------------------------------
   MOBIL
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    body:not(.article)
    .tws-article-list--list:has(.btn-group .btn-default:first-child.active)
    .tws-list--list
    .thumbnail {
        width: 100% !important;
        max-width: none !important;
        min-height: 82px !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding: 6px !important;
    }


    body:not(.article)
    .tws-article-list--list:has(.btn-group .btn-default:first-child.active)
    .tws-list--list
    .thumbnail
    a:has(.tws-article-list--product-image) {
        flex-basis: 68px !important;

        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;

        margin-right: 9px !important;
    }


    body:not(.article)
    .tws-article-list--list:has(.btn-group .btn-default:first-child.active)
    .tws-list--list
    .tws-article-list--product-image {
        width: 68px !important;
        max-width: 68px !important;
    }


    body:not(.article)
    .tws-article-list--list:has(.btn-group .btn-default:first-child.active)
    .tws-list--list
    .thumbnail
    .caption {
        grid-template-columns: minmax(0, 1fr) 70px;

        min-height: 66px;

        column-gap: 8px;
    }


    body:not(.article)
    .tws-article-list--list:has(.btn-group .btn-default:first-child.active)
    .tws-list--list
    .tws-article-list--article-name
    .tws-util-heading--heading {
        font-size: 12px !important;
    }


    body:not(.article)
    .tws-article-list--list:has(.btn-group .btn-default:first-child.active)
    .tws-list--list
    .tws-article-list--buy-button {
        width: 70px !important;
        min-width: 70px !important;
    }


    body:not(.article)
    .tws-article-list--list:has(.btn-group .btn-default:first-child.active)
    .tws-list--list
    .tws-article-list--buy-button
    .tws-article-buy-button-with-modal--buy-button {
        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
    }
}


/* ============================================================
   MOBIL
   ============================================================ */

@media (max-width: 767px) {

    body.article
    .fabrikk--article-right-col
    .slot--article-name h1 {
        font-size: 23px;
    }


    body.article
    .fabrikk--article-right-col
    .tws-article-price--price .twsPriceCurrent {
        font-size: 27px !important;
    }


    body.article
    .fabrikk--article-right-col
    > .slot--article-price,

    body.article
    .fabrikk--article-right-col
    > .slot--prisjakt-cheapest,

    body.article
    .fabrikk--article-right-col
    > .fabrikk--article-choices-wrapper,

    body.article
    .fabrikk--article-right-col
    > .fabrikk--buy-button-group,

    body.article
    .fabrikk--article-right-col
    > .slot--article-pricetable {
        max-width: none;
    }
}




/* Extra smala telefoner */
@media (max-width: 420px) {

    body.article
    .fabrikk--article-right-col
    > .fabrikk--buy-button-group {
        flex-direction: column !important;
        align-items: stretch !important;
    }


    body.article
    .fabrikk--buy-button-group
    .slot--article-quantity {
        flex: none !important;
        width: 142px !important;
    }


    body.article
    .fabrikk--buy-button-group
    .buy-button-wrapper {
        width: 100% !important;
        transform: none;
    }


    body.article
    .fabrikk--buy-button-group
    .tws-article-buy-button-with-modal--buy-button {
        width: 100% !important;
    }
}




/* ============================================================
   LISTVY - V26
   Bygger på verifierad HTML:
   .tws-list--list-item
     .tws-article-list--labels
     > a.tws-article-list--article-...
     > .media-body
   ============================================================ */


/* Endast när LIST-knappen är aktiv */
body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.row:has(> .tws-list--list-item) {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* Hela produktraden */
body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-list--list-item {
    box-sizing: border-box;

    position: relative !important;
    float: none !important;

    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    align-items: center !important;

    column-gap: 15px !important;

    width: calc(100% - 8px) !important;
    max-width: 1080px !important;
    min-height: 104px !important;

    margin: 0 0 9px 4px !important;
    padding: 8px 10px !important;

    background: #fff !important;

    border: 1px solid #e1e2e6 !important;
    border-radius: 6px !important;

    box-shadow: none !important;

    overflow: visible !important;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}


body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-list--list-item:hover {
    border-color: #c7cad2 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.055) !important;
    transform: translateY(-1px);
}


/* ------------------------------------------------------------
   BILD
   ------------------------------------------------------------ */

body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-list--list-item
> a[class*="tws-article-list--article-"] {
    grid-column: 1 !important;
    grid-row: 1 !important;

    display: block !important;

    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;

    margin: 0 !important;
    padding: 0 !important;

    text-decoration: none !important;
}


body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-list--list-item
> a[class*="tws-article-list--article-"]
.tws-img {
    width: 96px !important;
    max-width: 96px !important;
}


body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-list--list-item
> a[class*="tws-article-list--article-"]
.tws-img--wrapper {
    width: 96px !important;
    max-width: 96px !important;
}


/* Behåll originalbildens 3:2-proportion, men ge den riktig liststorlek */
body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-list--list-item
> a[class*="tws-article-list--article-"]
.tws-img--container {
    width: 96px !important;
    max-width: 96px !important;

    padding-bottom: 66.6667% !important;

    background: #fff !important;

    border-radius: 3px;
}


/* ------------------------------------------------------------
   TEXTDEL
   ------------------------------------------------------------ */

body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-list--list-item
> .media-body {
    box-sizing: border-box;

    grid-column: 2 !important;
    grid-row: 1 !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 86px !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;

    column-gap: 20px !important;
    row-gap: 5px !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 2px 2px 2px 0 !important;

    overflow: visible !important;
}


/* Produktnamn */
body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-list--list-item
> .media-body
.tws-article-list--article-name {
    grid-column: 1 !important;
    grid-row: 1 !important;

    align-self: end !important;

    margin: 0 !important;
    padding: 0 !important;
}


body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-list--list-item
> .media-body
.tws-article-list--article-name
.tws-util-heading--heading {
    min-height: 0 !important;

    margin: 0 !important;

    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
}


body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-list--list-item
> .media-body
.tws-article-list--article-name a {
    color: #333 !important;
    text-decoration: none !important;
}


body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-list--list-item
> .media-body
.tws-article-list--article-name a:hover {
    text-decoration: underline !important;
}


/* Pris */
body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-list--list-item
> .media-body
.tws-article-list--price {
    grid-column: 1 !important;
    grid-row: 2 !important;

    align-self: start !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-list--list-item
> .media-body
.twsPriceCurrent {
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}


body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-list--list-item
> .media-body
.tws-api--price-current-diff {
    color: #d25353 !important;
}


/* Gamla priset vid rea */
body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-list--list-item
> .media-body
.twsPriceRegular {
    display: inline !important;

    margin: 0 0 0 7px !important;

    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;

    color: #999 !important;
    text-decoration: line-through !important;
}


/* ------------------------------------------------------------
   KÖP
   ------------------------------------------------------------ */

body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-list--list-item
> .media-body
.tws-article-list--buy-button {
    position: static !important;
    float: none !important;

    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;

    align-self: center !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    width: 86px !important;
    min-width: 86px !important;

    margin: 0 !important;
    padding: 0 !important;
}


body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-list--list-item
> .media-body
.tws-article-buy-button-with-modal--buy-button {
    box-sizing: border-box;

    position: static !important;
    float: none !important;

    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;

    height: 34px !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 5px 10px !important;

    border-radius: 4px !important;

    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}


/* ------------------------------------------------------------
   REAETIKETT
   ------------------------------------------------------------ */

body:not(.article)
.tws-article-list--list:has(.btn-group .btn-default:first-child.active)
.tws-list--list
.tws-list--list-item
> .tws-article-list--labels {
    position: absolute !important;

    top: 6px !important;
    left: 6px !important;

    z-index: 5 !important;

    margin: 0 !important;
}


/* ------------------------------------------------------------
   MOBIL
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    body:not(.article)
    .tws-article-list--list:has(.btn-group .btn-default:first-child.active)
    .tws-list--list
    .tws-list--list-item {
        grid-template-columns: 72px minmax(0, 1fr) !important;

        column-gap: 10px !important;

        width: 100% !important;
        max-width: none !important;
        min-height: 86px !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding: 6px !important;
    }


    body:not(.article)
    .tws-article-list--list:has(.btn-group .btn-default:first-child.active)
    .tws-list--list
    .tws-list--list-item
    > a[class*="tws-article-list--article-"],

    body:not(.article)
    .tws-article-list--list:has(.btn-group .btn-default:first-child.active)
    .tws-list--list
    .tws-list--list-item
    > a[class*="tws-article-list--article-"]
    .tws-img,

    body:not(.article)
    .tws-article-list--list:has(.btn-group .btn-default:first-child.active)
    .tws-list--list
    .tws-list--list-item
    > a[class*="tws-article-list--article-"]
    .tws-img--wrapper,

    body:not(.article)
    .tws-article-list--list:has(.btn-group .btn-default:first-child.active)
    .tws-list--list
    .tws-list--list-item
    > a[class*="tws-article-list--article-"]
    .tws-img--container {
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
    }


    body:not(.article)
    .tws-article-list--list:has(.btn-group .btn-default:first-child.active)
    .tws-list--list
    .tws-list--list-item
    > .media-body {
        grid-template-columns: minmax(0, 1fr) 70px !important;

        column-gap: 8px !important;
    }


    body:not(.article)
    .tws-article-list--list:has(.btn-group .btn-default:first-child.active)
    .tws-list--list
    .tws-list--list-item
    > .media-body
    .tws-article-list--article-name
    .tws-util-heading--heading {
        font-size: 12px !important;
    }


    body:not(.article)
    .tws-article-list--list:has(.btn-group .btn-default:first-child.active)
    .tws-list--list
    .tws-list--list-item
    > .media-body
    .tws-article-list--buy-button {
        width: 70px !important;
        min-width: 70px !important;
    }


    body:not(.article)
    .tws-article-list--list:has(.btn-group .btn-default:first-child.active)
    .tws-list--list
    .tws-list--list-item
    > .media-body
    .tws-article-buy-button-with-modal--buy-button {
        width: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
    }
}






/* ============================================================
   SÖKRESULTATSIDA - V28
   Återanvänder V27:s produktkort/grid/list.
   Här stylas främst söksidans egen ram, rubrik och sökform.
   ============================================================ */


/* Sökresultatsidan är en egen Abicart-komponent */
body:not(.article):has(tws-article-search-page)
tws-article-search-page {
    display: block;

    width: 100%;
}


/* Undvik dubbel rubrik/breadcrumb på söksidan.
   Komponenten själv visar "Sökresultat". */
body:not(.article):has(tws-article-search-page)
.slot--breadcrumbs {
    display: none !important;
}


/* Lite mer naturlig startposition när breadcrumben är borta */
body:not(.article):has(tws-article-search-page)
.fabrikk--content-wrapper {
    padding-top: 14px !important;
}


/* ------------------------------------------------------------
   RUBRIK
   ------------------------------------------------------------ */

body:not(.article)
tws-article-search-page h1,

body:not(.article)
tws-article-search-page .h1 {
    margin-top: 0 !important;
    margin-bottom: 14px !important;

    font-size: 23px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;

    color: #333 !important;
}


/* Eventuell underrubrik/resultattext */
body:not(.article)
tws-article-search-page h2:not(.tws-util-heading--heading),

body:not(.article)
tws-article-search-page .h2:not(.tws-util-heading--heading) {
    margin-top: 0;
    margin-bottom: 10px;

    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;

    color: #555 !important;
}


/* ------------------------------------------------------------
   SÖKFORM
   Vi rör endast formulär som faktiskt innehåller ett sökfält.
   ------------------------------------------------------------ */

body:not(.article)
tws-article-search-page
form:has(input[type="search"]),

body:not(.article)
tws-article-search-page
form:has(input[name*="search" i]) {
    display: flex !important;
    align-items: center !important;

    gap: 7px !important;

    max-width: 620px;

    margin: 0 0 18px !important;
}


/* Sökfält */
body:not(.article)
tws-article-search-page
form:has(input[type="search"])
.form-control,

body:not(.article)
tws-article-search-page
form:has(input[name*="search" i])
.form-control,

body:not(.article)
tws-article-search-page
input[type="search"] {
    box-sizing: border-box;

    height: 40px !important;
    min-height: 40px !important;

    padding: 8px 12px !important;

    background: #fff !important;
    color: #333 !important;

    border: 1px solid #d3d5da !important;
    border-radius: 5px !important;

    box-shadow: none !important;

    font-size: 14px !important;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


body:not(.article)
tws-article-search-page
input[type="search"]:focus {
    border-color: #8a8e9e !important;

    box-shadow: 0 0 0 2px rgba(92, 97, 119, 0.10) !important;

    outline: none !important;
}


/* "Visa resultat"-knappen i själva sökformuläret.
   Produktkortens Köp-knappar påverkas inte eftersom de inte ligger
   i sökformuläret. */
body:not(.article)
tws-article-search-page
form:has(input[type="search"])
.btn-primary,

body:not(.article)
tws-article-search-page
form:has(input[name*="search" i])
.btn-primary {
    box-sizing: border-box;

    flex: 0 0 auto;

    height: 40px !important;
    min-height: 40px !important;

    margin: 0 !important;
    padding: 8px 16px !important;

    border-radius: 5px !important;

    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}


/* ------------------------------------------------------------
   RESULTATLISTA
   V27:s tws-article-list-regler gör jobbet.
   Här ger vi bara lite struktur mellan sökhuvud och produkter.
   ------------------------------------------------------------ */

body:not(.article)
tws-article-search-page
.tws-article-list--list {
    margin-top: 4px;
}


/* Kontrollraden ska inte få kategorisidans negativa/extra förskjutning
   om Abicart placerar sökresultaten annorlunda. */
@media (min-width: 768px) {

    body:not(.article):has(tws-article-search-page)
    .tws-article-list--list
    .btn-group,

    body:not(.article):has(tws-article-search-page)
    .tws-article-list--list
    .dropdown {
        transform: none !important;
    }
}


/* ------------------------------------------------------------
   INGA TRÄFFAR
   Exakt wrapper kan variera; detta gör vanliga tomlägen diskreta.
   ------------------------------------------------------------ */

body:not(.article)
tws-article-search-page
.alert,

body:not(.article)
tws-article-search-page
.tws-alert {
    max-width: 620px;

    margin-top: 10px;
    padding: 14px 16px !important;

    background: #f7f7f8 !important;
    color: #555 !important;

    border: 1px solid #dedfe3 !important;
    border-radius: 6px !important;

    box-shadow: none !important;
}


/* ------------------------------------------------------------
   MOBIL
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    body:not(.article):has(tws-article-search-page)
    .fabrikk--content-wrapper {
        padding-top: 10px !important;
    }


    body:not(.article)
    tws-article-search-page h1,

    body:not(.article)
    tws-article-search-page .h1 {
        margin-bottom: 11px !important;

        font-size: 20px !important;
    }


    body:not(.article)
    tws-article-search-page
    form:has(input[type="search"]),

    body:not(.article)
    tws-article-search-page
    form:has(input[name*="search" i]) {
        align-items: stretch !important;
        flex-direction: column !important;

        gap: 6px !important;

        max-width: none;
    }


    body:not(.article)
    tws-article-search-page
    form:has(input[type="search"])
    .btn-primary,

    body:not(.article)
    tws-article-search-page
    form:has(input[name*="search" i])
    .btn-primary {
        width: 100% !important;
    }
}






/* ============================================================
   SÖKRESULTAT - SLUTPUTS V29
   Rubrik vänster, verktygsrad höger, mindre tomrum.
   Produktkorten lämnas orörda.
   ============================================================ */


/* Sökresultatsidans huvudområde får fungera som positioneringsyta */
body:not(.article):has(tws-article-search-page)
tws-article-search-page {
    position: relative;
}


/* Rubriken vänsterställs och får ungefär samma vänsterkant som korten */
body:not(.article)
tws-article-search-page h1,

body:not(.article)
tws-article-search-page .h1 {
    max-width: none !important;

    margin: 0 0 8px 4px !important;

    text-align: left !important;
}


/* Verktygsraden flyttas upp så den ligger visuellt i samma rad som rubriken */
@media (min-width: 768px) {

    body:not(.article):has(tws-article-search-page)
    .tws-article-list--list
    .btn-group,

    body:not(.article):has(tws-article-search-page)
    .tws-article-list--list
    .dropdown {
        transform: translateY(-34px) !important;
    }


    /* Minska det överflödiga tomrummet under rubrik/verktygsrad */
    body:not(.article):has(tws-article-search-page)
    .tws-article-list--list {
        margin-top: -4px !important;
    }


    body:not(.article):has(tws-article-search-page)
    .tws-article-list--list
    .tws-list--list {
        padding-top: 4px !important;
    }
}


/* På mobil får rubrik och kontroller ligga på separata rader */
@media (max-width: 767px) {

    body:not(.article)
    tws-article-search-page h1,

    body:not(.article)
    tws-article-search-page .h1 {
        margin-left: 0 !important;
        margin-bottom: 10px !important;
    }


    body:not(.article):has(tws-article-search-page)
    .tws-article-list--list {
        margin-top: 0 !important;
    }
}







/* ============================================================
   SÖKRESULTAT - EXAKT STRUKTUR V30
   Verifierad HTML:
   .fabrikk--article-search-results
     .tws-article-search-page
       h2.tws-article-search-page--heading
       .tws-article-list
         .tws-list--list
           .tws-list-controls
   ============================================================ */


/* Själva söksidan */
body:not(.article)
.fabrikk--article-search-results
.tws-article-search-page {
    position: relative !important;
}


/* Exakt rubrikelement */
body:not(.article)
.fabrikk--article-search-results
.tws-article-search-page--heading {
    display: block !important;

    margin: 0 0 10px 4px !important;
    padding: 0 !important;

    text-align: left !important;

    font-size: 23px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;

    color: #333 !important;
}


/* Listans wrapper behöver inget extra stort tomrum */
body:not(.article)
.fabrikk--article-search-results
.tws-article-list--tws-list {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


body:not(.article)
.fabrikk--article-search-results
.tws-list--list {
    position: relative !important;

    padding-top: 4px !important;
}


/* Verktygsraden upp på samma visuella nivå som rubriken */
@media (min-width: 768px) {

    body:not(.article)
    .fabrikk--article-search-results
    .tws-list-controls {
        position: absolute !important;

        top: -42px !important;
        right: 0 !important;

        z-index: 5;

        margin: 0 !important;

        float: none !important;
    }


    /* Clearfixen efter toolbar ska inte skapa extra höjd */
    body:not(.article)
    .fabrikk--article-search-results
    .tws-list-controls + .clearfix {
        height: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* Första produktkortsraden lite närmare rubriken */
    body:not(.article)
    .fabrikk--article-search-results
    .tws-list--type-grid {
        margin-top: 2px !important;
    }
}


/* Mobil: rubrik och kontroller får ligga på varsin rad */
@media (max-width: 767px) {

    body:not(.article)
    .fabrikk--article-search-results
    .tws-article-search-page--heading {
        margin-left: 0 !important;
        margin-bottom: 10px !important;

        font-size: 20px !important;
    }


    body:not(.article)
    .fabrikk--article-search-results
    .tws-list-controls {
        position: static !important;

        float: none !important;

        display: flex !important;
        justify-content: flex-end !important;

        margin: 0 0 10px !important;
    }
}






/* ============================================================
   LIVE-SÖK / AUTOCOMPLETE - V31
   Verifierad HTML:
   ul.dropdown-menu
     li.tws-article-search--list-item
     li.tws-article-search--show-all
   ============================================================ */


/* Själva dropdownpanelen */
ul.dropdown-menu:has(> .tws-article-search--list-item) {
    box-sizing: border-box;

    width: min(640px, calc(100vw - 28px)) !important;
    max-width: 640px !important;
    max-height: 500px !important;

    left: 14px !important;
    right: auto !important;

    margin: 6px 0 0 !important;
    padding: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    background: #fff !important;

    border: 1px solid #d7d9de !important;
    border-radius: 7px !important;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;

    z-index: 10050 !important;
}


/* Vanlig sökträff */
ul.dropdown-menu:has(> .tws-article-search--list-item)
> .tws-article-search--list-item {
    margin: 0 !important;
    padding: 0 !important;

    background: #fff !important;

    border: 0 !important;
    border-bottom: 1px solid #ececef !important;
}


/* Klickytan över hela raden */
ul.dropdown-menu:has(> .tws-article-search--list-item)
> .tws-article-search--list-item
> a {
    box-sizing: border-box;

    display: flex !important;
    align-items: center !important;

    gap: 11px !important;

    min-height: 56px !important;

    padding: 7px 12px !important;

    color: #333 !important;
    text-decoration: none !important;

    background: transparent !important;

    transition:
        background 0.12s ease,
        color 0.12s ease;
}


/* Hover / tangentbordsfokus */
ul.dropdown-menu:has(> .tws-article-search--list-item)
> .tws-article-search--list-item
> a:hover,

ul.dropdown-menu:has(> .tws-article-search--list-item)
> .tws-article-search--list-item
> a:focus {
    background: #f5f6f8 !important;
    color: #222 !important;

    outline: none !important;
}


/* Produktbild */
ul.dropdown-menu:has(> .tws-article-search--list-item)
> .tws-article-search--list-item
> a
> img {
    box-sizing: border-box;

    flex: 0 0 42px !important;

    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;

    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    margin: 0 !important;
    padding: 2px !important;

    object-fit: contain !important;

    background: #fff !important;

    border: 1px solid #ececef !important;
    border-radius: 4px !important;
}


/* Produktnamn */
ul.dropdown-menu:has(> .tws-article-search--list-item)
> .tws-article-search--list-item
> a
> span {
    display: block !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;

    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;

    color: inherit !important;
}


/* Den sökta texten, t.ex. HDMI */
ul.dropdown-menu:has(> .tws-article-search--list-item)
> .tws-article-search--list-item
strong {
    font-weight: 700 !important;
    color: #50566f !important;
}


/* ------------------------------------------------------------
   VISA ALLA
   Sticky nederkant så länken inte försvinner när listan scrollas.
   ------------------------------------------------------------ */

ul.dropdown-menu:has(> .tws-article-search--list-item)
> .tws-article-search--show-all {
    position: sticky !important;
    bottom: 0 !important;

    z-index: 3;

    margin: 0 !important;
    padding: 0 !important;

    background: #fafafb !important;

    border-top: 1px solid #dfe1e6 !important;
}


ul.dropdown-menu:has(> .tws-article-search--list-item)
> .tws-article-search--show-all
> a {
    display: block !important;

    padding: 11px 14px !important;

    background: #fafafb !important;

    color: #50566f !important;
    text-decoration: none !important;

    cursor: pointer !important;

    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    transition:
        background 0.12s ease,
        color 0.12s ease;
}


ul.dropdown-menu:has(> .tws-article-search--list-item)
> .tws-article-search--show-all
> a:hover,

ul.dropdown-menu:has(> .tws-article-search--list-item)
> .tws-article-search--show-all
> a:focus {
    background: #f0f1f4 !important;
    color: #363b51 !important;

    outline: none !important;
}


ul.dropdown-menu:has(> .tws-article-search--list-item)
> .tws-article-search--show-all
.text-center {
    text-align: center !important;
}


/* ------------------------------------------------------------
   SCROLLBAR - diskret
   ------------------------------------------------------------ */

ul.dropdown-menu:has(> .tws-article-search--list-item) {
    scrollbar-width: thin;
    scrollbar-color: #c7cad2 transparent;
}


ul.dropdown-menu:has(> .tws-article-search--list-item)::-webkit-scrollbar {
    width: 8px;
}


ul.dropdown-menu:has(> .tws-article-search--list-item)::-webkit-scrollbar-track {
    background: transparent;
}


ul.dropdown-menu:has(> .tws-article-search--list-item)::-webkit-scrollbar-thumb {
    background: #c7cad2;
    border-radius: 8px;
    border: 2px solid #fff;
}


/* ------------------------------------------------------------
   MOBIL
   Nästan hela skärmbredden, men fortfarande som en panel.
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    ul.dropdown-menu:has(> .tws-article-search--list-item) {
        width: calc(100vw - 16px) !important;
        max-width: none !important;
        max-height: min(68vh, 520px) !important;

        left: 8px !important;
        right: 8px !important;

        margin-top: 4px !important;

        border-radius: 6px !important;
    }


    ul.dropdown-menu:has(> .tws-article-search--list-item)
    > .tws-article-search--list-item
    > a {
        min-height: 54px !important;

        gap: 9px !important;

        padding: 6px 9px !important;
    }


    ul.dropdown-menu:has(> .tws-article-search--list-item)
    > .tws-article-search--list-item
    > a
    > img {
        flex-basis: 40px !important;

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }


    ul.dropdown-menu:has(> .tws-article-search--list-item)
    > .tws-article-search--list-item
    > a
    > span {
        font-size: 12px !important;
    }
}