/* ==========================================================================
   Krepšelio peržiūra (šoninis skydelis)

   Skydelį piešia XStore Elementor valdiklis „Cart" (elementor-widget-theme-
   etheme_cart) — trečiosios šalies kodas, todėl viskas daroma tik CSS'u
   (CLAUDE.md §2).

   Sandara:
     .elementor-widget-theme-etheme_cart
       .etheme-elementor-off-canvas__main            (fiksuotas skydelis)
         .etheme-elementor-off-canvas__close-button
         .etheme-elementor-off-canvas_content-head   „🛒 Krepšelis"
         .etheme-elementor-off-canvas_content        (slenkanti sritis)
           … .woocommerce-mini-cart > ul.cart-widget-products
                li.mini_cart_item
                  a.remove                      (absoliuti, viršuje dešinėje)
                  a.product-mini-image          (float: left temoje)
                  .product-item-right
                    h4.product-title > a
                    .descr-box
                      dl.variation              (konfigūratoriaus laukai)
                      .quantity-wrapper
                        div.quantity            („−  1  +")
                        span.quantity           („× 348,00 € su PVM")
         .etheme-elementor-off-canvas_content-footer
           .cart-popup-footer
             .cart-widget-subtotal > span.small-h + span.big-coast
             p.buttons.mini-cart-buttons

   Dizaino šaltinis — krepšelio puslapis (cart.css, blue-family.css „Suvestinė"),
   Figma kUL7BdxOYlVy2RU9iaI7Z0. Perimta: Lexend 600 pavadinimams, URW Geometric
   aprašymams, Config Rounded 600 sumoms, #372747 tekstas, #9684A7 blankus,
   #EBE9ED skirtukai, #F6F5F7 fonas, 10px apvalinimas.

   PASTABA: `div.quantity` (skaitiklis) ir `span.quantity` (kaina) turi TĄ PAČIĄ
   klasę, todėl visur būtina rašyti su žyma — `div.quantity` / `span.quantity`.
   ========================================================================== */

/* ==========================================================================
   1. Skydelis
   ========================================================================== */

/* Buvo 370px, o aprašymo stulpeliui likdavo 199px — į jį netilpo nei prekės
   pavadinimas, nei konfigūratoriaus reikšmės (abu buvo nukertami daugtaškiu).
   420px duoda 276px aprašymui, ir dauguma eilučių telpa be lūžio.

   Plotį tema ima iš savo kintamosios (width: var(--off-canvas-width, 370px)),
   todėl užtenka pakeisti kintamąją — jokio !important ir jokios kovos su
   temos taisykle. max-width: 100% tema jau turi, todėl telefone skydelis
   toliau užima visą ekraną.

   Taikomasi į .elementor-widget-theme-etheme_cart, nes tą pačią off-canvas
   sandarą naudoja ir paskyros bei mobilaus meniu valdikliai — jų liesti
   nereikia. */
.elementor-widget-theme-etheme_cart .etheme-elementor-off-canvas__main {
    --off-canvas-width: 420px;
    padding: 20px 24px;
}

/* Antraštė „Krepšelis": dizaine skydelių antraštės — COCOGOOSE (kaip
   „Suvestinė" krepšelio puslapyje, blue-family.css). Šriftas be skaitmenų,
   bet čia jų ir nėra (CLAUDE.md §6). Buvo Lexend 600 16px.
   Skirtuko liniją (#EBE9ED) tema jau piešia — jos neliečiame. */
.elementor-widget-theme-etheme_cart .etheme-elementor-off-canvas_content-head {
    padding-bottom: 16px;
}

.elementor-widget-theme-etheme_cart .etheme-elementor-off-canvas_content-head-label {
    font-family: "COCOGOOSE", sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: var(--372747);
}

.elementor-widget-theme-etheme_cart .etheme-elementor-off-canvas_content-head-icon svg {
    color: var(--372747);
}

/* ==========================================================================
   2. Prekės eilutė
   ========================================================================== */

/* Temoje nuotrauka plaukia (float: left), o tekstas apiplaukia ją iš dešinės.
   Su flex'u aprašymo stulpelis gauna aiškų plotį (min-width: 0 leidžia ilgoms
   eilutėms laužtis, o ne platinti eilutę), todėl nieko nebereikia kirpti.

   Taikomasi į li.mini_cart_item, o ne į bet kurį li: tuščio krepšelio
   pranešimas yra atskiras <li> be šios klasės ir flex'o jam nereikia
   (CLAUDE.md §4 — patikrinta ir su tuščiu krepšeliu). */
.woocommerce-mini-cart li.mini_cart_item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--ebe9ed);
}

.woocommerce-mini-cart li.mini_cart_item:last-child {
    border-bottom: 0;
}

/* Dizaine prekės nuotrauka — 10px apvalinimu (krepšelio puslapyje 150x150,
   čia 80x80). float nuimamas, nes eilutė dabar flex. */
.woocommerce-mini-cart li.mini_cart_item a.product-mini-image {
    flex: 0 0 80px;
    width: 80px;
    margin: 0;
    float: none;
}

.woocommerce-mini-cart li.mini_cart_item a.product-mini-image img {
    display: block;
    width: 80px;
    max-width: 80px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--f6f5f7);
}

/* min-width: 0 — be jo flex elementas nesileidžia siauresnis už savo turinį
   ir ilgos eilutės išstumtų skydelio kraštą. */
.woocommerce-mini-cart li.mini_cart_item .product-item-right {
    flex: 1 1 auto;
    min-width: 0;
}

/* --- Prekės pavadinimas -------------------------------------------------- */

/* Buvo `white-space: nowrap; text-overflow: ellipsis` — pavadinimai
   nusikirsdavo („Lenkta tekstilinė sienel…"). Dabar laužiasi į kelias eilutes.

   Šriftas toks pat kaip krepšelio lentelėje (cart.css): Lexend 600, tik 15px
   vietoj 18px — skydelis siauresnis. COCOGOOSE čia netinka, nes
   pavadinimuose būna skaitmenų ir kabučių (CLAUDE.md §6).

   padding-right palieka vietos šiukšliadėžei, kuri yra absoliuti. */
.woocommerce-mini-cart li.mini_cart_item h4.product-title {
    margin: 0;
    padding-right: 28px;
}

.woocommerce-mini-cart li.mini_cart_item h4.product-title a {
    display: block;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    font-family: "Lexend", sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    color: var(--372747);
}

/* --- Konfigūratoriaus laukai -------------------------------------------- */

/* Tas pats sprendimas kaip krepšelio lentelėje (cart.css): temos dviejų
   stulpelių grid/flex išjungiamas, dt ir dd tampa inline, o eilutę užbaigia
   dd::after block'as. Taip kiekviena pora atrodo „Laukas: reikšmė" ir užima
   vieną eilutę vietoj dviejų — anksčiau kiekvienas laukas ėmė 34px (dt 20px +
   dd 14px), dabar 19px.

   Reikšmėms buvo `white-space: nowrap; text-overflow: ellipsis`, todėl
   „Konstrukcija su audiniu (vienpusė spauda)" virsdavo „…(vie…". Dabar
   laužiasi natūraliai. */
.woocommerce-mini-cart li.mini_cart_item dl.variation {
    display: block;
    height: auto;
    max-height: none;
    overflow: visible;
    margin: 10px 0 0;
}

.woocommerce-mini-cart li.mini_cart_item dl.variation dt,
.woocommerce-mini-cart li.mini_cart_item dl.variation dd,
.woocommerce-mini-cart li.mini_cart_item dl.variation dd p {
    display: inline;
    float: none;
    margin: 0;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    font-family: "URW Geometric", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 19px;
    color: var(--372747);
}

/* Krepšelio lentelėje laukas ir reikšmė yra vienodos spalvos, bet ten stulpelis
   platus ir poros gerai matomos. Siaurame skydelyje penkios vienodo tono
   eilutės susilieja, todėl lauko pavadinimas gauna blankią dizaino spalvą
   (--9684a7) — pora perskaitoma iš karto, o paletė lieka ta pati. */
.woocommerce-mini-cart li.mini_cart_item dl.variation dt {
    margin-right: 4px;
    color: var(--9684a7);
}

/* Eilutės pabaiga: content: "" su display: block inline elemento viduje
   priverčia eilutės lūžį (tas pats būdas kaip cart.css). */
.woocommerce-mini-cart li.mini_cart_item dl.variation dd::after {
    content: "";
    display: block;
}

/* --- Pristatymo terminas ------------------------------------------------ */

/* Skydelyje pristatymo termino nerodome (užsakovo sprendimas 2026-08-26):
   peržiūros paskirtis — greitai pamatyti, kas krepšelyje ir už kiek, o
   terminas lieka krepšelio puslapyje ir atsiskaitymo suvestinėje.

   Eilutę prideda optimized/blue-cart-delivery.php per woocommerce_get_item_data
   — tas pats kabliukas maitina krepšelį, peržiūrą ir atsiskaitymą, todėl
   atskirti galima tik čia, CSS'u. PHP pusėje mini krepšelio atpažinti nėra iš
   ko: XStore šablonas kviečia tą pačią wc_get_formatted_cart_item_data().

   dd::after taip pat paslepiamas — kitaip liktų tuščias eilutės lūžis.
   Gamybos eilutė („Paruošimas", spalvotareklama-b2b-system) NELIEČIAMA: tai
   kitas laukas ir užsakovas jo neminėjo.

   PASTABA: jei „Pristatymas" kada nors turėtų dingti visur, teisingesnė vieta
   būtų blue-cart-delivery.php, o ne ši taisyklė. */
.woocommerce-mini-cart li.mini_cart_item dl.variation dt.variation-Pristatymas,
.woocommerce-mini-cart li.mini_cart_item dl.variation dd.variation-Pristatymas,
.woocommerce-mini-cart li.mini_cart_item dl.variation dd.variation-Pristatymas::after {
    display: none;
}

/* --- Kiekis ir kaina ---------------------------------------------------- */

/* Temoje .quantity-wrapper yra 110px pločio inline-flex, o į jį dedami ir
   skaitiklis (74px), ir kaina (200px) — kaina išlįsdavo už skydelio krašto
   („×348,00 €su PVM28…"). Dabar tai per visą plotį išskleista eilutė:
   skaitiklis kairėje, kaina dešinėje. */
.woocommerce-mini-cart li.mini_cart_item .quantity-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    width: 100%;
    max-width: none;
    margin-top: 12px;
}

/* Dėžutė turi prasidėti lygiai ten, kur ir aprašymo tekstas.
   Trukdė du temos dalykai:

   1) .quantity-wrapper.size-sm { max-width: 110px } (woocommerce-all.css,
      svoris (0,2,0)) — dėl jo `width: 100%` neveikė, o vaikai išlįsdavo už
      dėžutės ribų. Persveriama aukščiau esančiu max-width: none.

   2) Klasė .clearfix duoda ::before ir ::after su `display: table`. Flex
      konteineryje jie tampa pilnaverčiais flex elementais, todėl priekyje
      atsirasdavo tuščias narys + 12px gap ir skaitiklis stovėdavo 12px
      dešiniau už tekstą. Flex'e clearfix nieko nedaro, todėl nuimamas. */
.woocommerce-mini-cart li.mini_cart_item .quantity-wrapper::before,
.woocommerce-mini-cart li.mini_cart_item .quantity-wrapper::after {
    display: none;
}

/* Skaitiklio dėžutė — kaip krepšelio puslapyje (1px #E1E1E1, 5px apvalinimas),
   tik 34px aukščio vietoj 48px. Vidiniai „−"/„+" rėmeliai nuimami, kad liktų
   vienas rėmelis ant visos dėžutės. */
.woocommerce-mini-cart li.mini_cart_item .quantity-wrapper div.quantity {
    flex: 0 0 74px;
    width: 74px;
    height: 34px;
    margin: 0;
    border: 1px solid #E1E1E1;
    border-radius: 5px;
    overflow: hidden;
}

.woocommerce-mini-cart li.mini_cart_item .quantity-wrapper div.quantity .minus,
.woocommerce-mini-cart li.mini_cart_item .quantity-wrapper div.quantity .plus {
    flex: 0 0 20px;
    height: 100%;
    border: 0;
    color: var(--372747);
}

.woocommerce-mini-cart li.mini_cart_item .quantity-wrapper div.quantity input.qty {
    flex: 1 1 auto;
    width: auto;
    height: 100%;
    border: 0;
    font-family: "URW Geometric", sans-serif;
    font-size: 14px;
    color: var(--372747);
}

/* Kaina: Config Rounded 600, kaip visos sumos dizaine (cart.css
   td.product-price). Krepšelio puslapyje 19px, čia 16px.

   Kaina stovi iškart po skaitikliu (16px tarpas), o ne prispausta prie
   dešinio krašto: su `justify-content: space-between` ji nubėgdavo per visą
   243px stulpelį ir su kiekiu nebesisiejo. flex: 0 1 auto leidžia jai
   susitraukti ir laužtis, jei suma labai ilga. */
.woocommerce-mini-cart li.mini_cart_item .quantity-wrapper span.quantity {
    display: block;
    flex: 0 1 auto;
    width: auto;
    margin: 0;
    text-align: left;
    font-family: "Config Rounded", "URW Geometric", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: var(--372747);
}

.woocommerce-mini-cart li.mini_cart_item .quantity-wrapper span.quantity .amount,
.woocommerce-mini-cart li.mini_cart_item .quantity-wrapper span.quantity .woocommerce-Price-currencySymbol {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* PVM variantai. blue-vat-toggle.php paslepia nereikalingą variantą taisykle
   `.bj-vat-excl { display: none }` — vienos klasės svoris (0,1,0). Čia jį
   persverdavo temos `.quantity-wrapper span { display: inline-flex }` (0,1,1),
   todėl skydelyje matėsi ABI kainos iš karto: „×348,00 €su PVM287,60 €su PVM".
   Klasė kartojama du kartus, kad svoris taptų (0,3,0) ir laimėtų be
   !important (CLAUDE.md §5). Kitur šios problemos nėra — .quantity-wrapper
   krepšelio lentelėje kainų neapima. */
.woocommerce-mini-cart li.mini_cart_item .bj-vat-excl.bj-vat-excl {
    display: none;
}

.woocommerce-mini-cart li.mini_cart_item .bj-vat-incl.bj-vat-incl {
    display: inline;
}

html.bj-no-vat .woocommerce-mini-cart li.mini_cart_item .bj-vat-incl.bj-vat-incl {
    display: none;
}

html.bj-no-vat .woocommerce-mini-cart li.mini_cart_item .bj-vat-excl.bj-vat-excl {
    display: inline;
}

/* „su PVM" / „be PVM" priesagą blue-vat-toggle.php atskiria <br> žyma. Čia
   eilutės aukštis brangus, o vietos dešinėje užtenka, todėl priesaga rašoma
   šalia sumos. Jos šriftą (Config Rounded 300, 0.8em) nustato inline stilius
   toje pačioje funkcijoje — jo neliečiame, keičiame tik išdėstymą. */
.woocommerce-mini-cart li.mini_cart_item .quantity-wrapper span.quantity br {
    display: none;
}

.woocommerce-mini-cart li.mini_cart_item small.vat-toggle-suffix {
    display: inline;
    margin-left: 4px;
}

/* --- Šalinimo mygtukas -------------------------------------------------- */

/* Dizaine šiukšliadėžė yra #9684A7 (cart.css, ten 24px). Temoje buvo 15px
   ir #222. Pozicija absoliuti — ją nustato tema, keičiame tik dydį, spalvą ir
   viršutinę paraštę, kad sutaptų su pavadinimo eilute. */
.woocommerce-mini-cart li.mini_cart_item a.remove {
    top: 20px;
    right: 0;
    margin: 0;
    color: var(--9684a7);
}

.woocommerce-mini-cart li.mini_cart_item a.remove .et-icon {
    font-size: 20px;
    line-height: 20px;
    color: var(--9684a7);
}

.woocommerce-mini-cart li.mini_cart_item a.remove:hover .et-icon {
    color: var(--e5175b);
}

/* ==========================================================================
   3. Apačia: tarpinė suma ir mygtukai
   ========================================================================== */

/* Skirtukas virš sumos — ta pati #EBE9ED linija kaip visur skydelyje. */
.elementor-widget-theme-etheme_cart .etheme-elementor-off-canvas_content-footer {
    padding-top: 0;
    border-top: 1px solid var(--ebe9ed);
}

.elementor-widget-theme-etheme_cart .cart-widget-subtotal {
    padding: 18px 0;
}

/* „Tarpinė suma:" — kaip suvestinės eilučių pavadinimai krepšelio puslapyje
   (blue-family.css: URW Geometric 700 16px #372747). */
.elementor-widget-theme-etheme_cart .cart-widget-subtotal .small-h {
    font-family: "URW Geometric", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: var(--372747);
}

/* Suma — Config Rounded, kaip „Viso (su PVM)" eilutė (ten 23px). */
.elementor-widget-theme-etheme_cart .cart-widget-subtotal .big-coast,
.elementor-widget-theme-etheme_cart .cart-widget-subtotal .amount,
.elementor-widget-theme-etheme_cart .cart-widget-subtotal .woocommerce-Price-currencySymbol {
    font-family: "Config Rounded", "URW Geometric", sans-serif;
    font-weight: 600;
    font-size: 21px;
    line-height: 28px;
    color: var(--372747);
    white-space: nowrap;
}

.elementor-widget-theme-etheme_cart p.mini-cart-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

/* Mygtukai dizaine 48px aukščio, per visą plotį, COCOGOOSE 15px — tas pats
   dydis kaip „PEREITI PRIE APMOKĖJIMO" krepšelio puslapyje (blue-family.css).
   Apvalinimą (10px) ir rožinę spalvą tema jau turi teisingus. */
.elementor-widget-theme-etheme_cart p.mini-cart-buttons a.button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 10px 20px;
    font-family: "COCOGOOSE", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
}

/* Antrinis mygtukas („Krepšelis") — dizaino šviesus fonas #F6F5F7 vietoj temos
   pilko #F2F2F2, tekstas #372747 vietoj #222. */
.elementor-widget-theme-etheme_cart p.mini-cart-buttons a.button:not(.btn-checkout) {
    background: var(--f6f5f7);
    color: var(--372747);
}

.elementor-widget-theme-etheme_cart p.mini-cart-buttons a.button:not(.btn-checkout):hover {
    background: var(--ebe9ed);
    color: var(--372747);
}

.elementor-widget-theme-etheme_cart p.mini-cart-buttons a.button.btn-checkout {
    background: var(--e5175b);
    color: #fff;
}

.elementor-widget-theme-etheme_cart p.mini-cart-buttons a.button.btn-checkout:hover {
    background: var(--e5175b-hover);
    color: #fff;
}

/* ==========================================================================
   4. Telefonas
   ==========================================================================
   Iki 480px skydelis užima visą ekraną (tema turi max-width: 100%), todėl
   420px kintamoji nebeturi reikšmės — mažinama tik nuotrauka ir paraštės,
   kad aprašymui liktų kuo daugiau vietos. */

@media only screen and (max-width: 480px) {

    .elementor-widget-theme-etheme_cart .etheme-elementor-off-canvas__main {
        padding: 20px 16px;
    }

    .woocommerce-mini-cart li.mini_cart_item {
        gap: 12px;
        padding: 16px 0;
    }

    .woocommerce-mini-cart li.mini_cart_item a.product-mini-image {
        flex: 0 0 64px;
        width: 64px;
    }

    .woocommerce-mini-cart li.mini_cart_item a.product-mini-image img {
        width: 64px;
        max-width: 64px;
        height: 64px;
    }

    .woocommerce-mini-cart li.mini_cart_item a.remove {
        top: 16px;
    }
}

/* ==========================================================================
   5. Pataisos, susijusios su pasiekiamumu
   ========================================================================== */

/* Šiukšliadėžė buvo matoma tik užvedus pelę (opacity: 0 be :hover), todėl
   telefone ir planšetėje prekės iš peržiūros išvis nebuvo kaip pašalinti.
   Krepšelio puslapyje ji matoma visada — čia daroma taip pat.

   Selektorius ilgas sąmoningai: temos taisyklė
     .etheme-elementor-off-canvas .product_list_widget:not(.swiper-wrapper)
       li:not(:hover) .remove
   sveria (0,5,1) — abu :not() skaičiuojami klasių stulpelyje (CLAUDE.md §5).
   Šis sveria (0,5,3) ir laimi be !important. */
.etheme-elementor-off-canvas .woocommerce-mini-cart ul.cart-widget-products li.mini_cart_item a.remove {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Plaukiojantys mygtukai („Užsakyti maketą" ir kt., optimized/blue-side-buttons.php)
   yra fixed right: 30px; z-index: 9999 ir uždengdavo „Tarpinė suma" sumą, kai
   atidarytas šoninis skydelis. Skydelio z-index nepakelsime — jo konteineris
   sėdi header'io steke, todėl reikšmė nieko nekeičia.

   Kai skydelis atidarytas, XStore uždeda ant <body> klasę
   .etheme-elementor-off-canvas--shown; ji galioja visiems dešininiams
   skydeliams (krepšelis, paskyra, meniu) — jiems visiems mygtukai kliūva
   vienodai. Skydelį uždarius klasė dingsta ir mygtukai grįžta. */
body.etheme-elementor-off-canvas--shown .sr-side-buttons {
    display: none;
}