/* Žvejybos prognozė – vieša parduotuvės dalis */

.shop-hero {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    padding: calc(var(--header-height) + var(--space-8)) 0 var(--space-8);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}
.shop-hero h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--text-primary); margin-bottom: var(--space-2); }
.shop-hero p { color: var(--text-secondary); }

.shop-page { padding-top: var(--space-10); padding-bottom: var(--space-16); }

/* Puslapiams BE .shop-hero juostos prieš save – .shop-page yra tiesiai po fiksuota
   antrašte, tad reikia pačios atsiskaityti nuo jos aukščio (kitaip pirmas turinys,
   pvz. breadcrumb, lieka po antrašte paslėptas). Puslapiams SU .shop-hero (product/
   category/search/cart/checkout/index) šio modifikatoriaus NEREIKIA – .shop-hero
   jau pati atsiskaito, o dvigubas atskaitymas sukurtų per didelį tarpą. */
.shop-page--under-header { padding-top: calc(var(--header-height) + var(--space-8)); }

.breadcrumb {
    display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
    font-size: var(--text-sm); color: var(--text-muted); padding: var(--space-4) 0;
}
.breadcrumb a { color: var(--color-primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { opacity: 0.4; }

/* Kortelės – kategorijoms/produktams */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
    justify-content: center;
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.shop-cat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-decoration: none;
    text-align: center;
    transition: border-color var(--transition-base), transform var(--transition-base);
}
.shop-cat-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.shop-cat-card-icon { font-size: 2.2rem; margin-bottom: var(--space-3); display: block; }
.shop-cat-card h3 { font-size: var(--text-base); font-weight: var(--weight-semi); color: var(--text-primary); margin: 0; }

.shop-product-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: border-color var(--transition-base), transform var(--transition-base);
}
.shop-product-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.shop-product-card-img {
    width: 100%; aspect-ratio: 1/1; object-fit: cover;
    background: var(--bg-glass);
}
.shop-product-card-img--placeholder {
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; color: var(--text-muted);
}
.shop-product-card-body { padding: var(--space-4); flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.shop-product-card h3 { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); margin: 0; line-height: 1.4; }
.shop-product-card-price { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-primary); margin-top: auto; }
.shop-product-card-oos { font-size: var(--text-xs); color: var(--color-red, #e5484d); }

.shop-empty { color: var(--text-muted); text-align: center; padding: var(--space-12) 0; }

/* Puslapiavimas – tas pats stilius/logika kaip zemelapis/index.php ežerų archyvo
   (žr. lakeArchivePageNumbers()/shopPageNumbers()): "← Ankstesni | 1 | … | prev cur next | … | last | Kiti →",
   centruota, su rodyklėmis kraštuose. */
.shop-pagination {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2);
    margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--divider);
}
.shop-pagination-link {
    display: flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 var(--space-2);
    color: var(--text-primary); font-weight: var(--weight-medium); font-size: var(--text-sm);
    text-decoration: none; border-radius: var(--radius-sm);
    background: var(--bg-glass); border: 1px solid var(--border-color);
}
.shop-pagination-link:hover { border-color: var(--color-primary); background: var(--bg-card); }
.shop-pagination-link.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.shop-pagination-nav { padding: 0 var(--space-3); font-weight: var(--weight-semi); color: var(--color-primary); }
.shop-pagination-nav.is-disabled { color: var(--text-muted); opacity: 0.5; pointer-events: none; }
.shop-pagination-ellipsis { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; color: var(--text-muted); font-size: var(--text-sm); }
.shop-pagination-status { color: var(--text-muted); font-size: var(--text-sm); text-align: center; margin-top: var(--space-3); }

/* Ilgesnis "Kam naudojami/Kokie būna/Kaip išsirinkti" turinys po produktų sąrašu – TIK
   kategorijoms su SHOP_CATEGORY_GUIDES įrašu (žr. category.php). Pilno pločio (ne šoninio
   filtro stulpelio pločio), kad skaitytis būtų patogu net turint siaurą produktų koloną.
   Nuo 2026-09-10 – sulankstomas akordeonas (žr. category.php komentarą prie markup'o), naudoja
   style.css .faq-item/.faq-question/.faq-arrow/.faq-answer/.faq-answer-inner klases (tas pats
   komponentas kaip pagrindinio puslapio DUK) – čia tik konteinerio/antraštės stiliai. */
.shop-cat-guide { grid-column: 2; margin: var(--space-10) 0 0; padding-top: var(--space-8); border-top: 1px solid var(--border-color); }
@media (max-width: 860px) { .shop-cat-guide { grid-column: 1; } }
.shop-cat-guide-title { font-size: var(--text-xl); margin: 0 0 var(--space-5); }
.shop-cat-guide-list { display: grid; gap: var(--space-4); }
/* Nuorodos FAQ atsakymuose ([tekstas](/shop/slug/), žr. category.php shopGuideAnswerHtml) –
   --diary-accent (ne --color-primary), nes pastarasis šviesioje temoje per blankus tekstui. */
.shop-cat-guide .faq-answer-inner a { color: var(--diary-accent); text-decoration: none; }
/* Atsakymas su lentele (shopGuideAnswerBlocksHtml) – bendras style.css limitas 400px lentelei per mažas */
.shop-cat-guide .faq-item.open .faq-answer { max-height: 1000px; }
.shop-cat-guide .faq-answer-inner p + .shop-guide-table-wrap,
.shop-cat-guide .faq-answer-inner .shop-guide-table-wrap + p { margin-top: var(--space-3); }
.shop-guide-table-wrap { overflow-x: auto; }
.shop-guide-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.shop-guide-table th, .shop-guide-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--divider); }
.shop-guide-table th { background: var(--bg-glass); color: var(--text-primary); font-weight: var(--weight-semi); }
.shop-guide-table td { color: var(--text-secondary); }
.shop-guide-table td:first-child { color: var(--text-primary); white-space: nowrap; }

/* Subkategorijų juosta produktų sąrašo viršuje */
.shop-subcats { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.shop-subcat-pill {
    padding: var(--space-2) var(--space-4);
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
}
.shop-subcat-pill:hover { border-color: var(--color-primary); color: var(--text-primary); }

/* Produkto puslapis */
.shop-product-nav-row { display: flex; justify-content: space-between; gap: var(--space-3); }
.shop-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-radius: 999px;
    background: var(--bg-glass);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
}
.shop-back-link:hover { color: var(--diary-accent); border-color: var(--diary-accent); text-decoration: none; }
.shop-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 420px) 1fr;
    /* 2 eilutės: 1 = galerija, 2 (1fr) = nav+kontaktai kairėje; dešinė .shop-product-info užima
       abi eilutes (turinio kortelė – iškart po stock eilute, be tuščio tarpo, 2026-10-08). */
    grid-template-rows: auto 1fr;
    column-gap: var(--space-10);
    row-gap: var(--space-4);
    margin-top: var(--space-6);
}
@media (max-width: 800px) {
    .shop-product-layout { grid-template-columns: 1fr; grid-template-rows: none; row-gap: var(--space-6); }
}
/* KRITIŠKA – be šito grid elementas (šis stulpelis) turi numatytąjį min-width:auto, kuris
   NEleidžia jam susitraukti žemiau savo VIDINIO turinio min-content pločio. Kol "Galimi
   variantai" kortelės laužydavosi į kelias eilutes (grid/wrap), tai nekliuvo. Naujoji spalvos
   miniatiūrų juostelė (.shop-swatch-strip, $hasPageSwatch) SĄMONINGAI neapvyniojama – ji
   slenka horizontaliai (overflow-x:auto) – todėl jos VISŲ miniatiūrų sudėtinis plotis tapo šio
   stulpelio min-content pločiu, ir jis pradėjo IŠSIPŪSTI virš savo 1fr grid takelio ribos
   (patikrinta: stulpelis rodė 1218px plotį 423px pločio grid takelyje), stumdamas visą
   puslapį į horizontalų persiritimą. `min-width: 0` yra standartinis šio grid/flex elgesio
   sprendimas – leidžia stulpeliui susitraukti iki takelio pločio, o vidinė juostelė tada
   patikimai slenka SAVO ribose, ne išstumia jas. */
.shop-product-info { min-width: 0; grid-column: 2; grid-row: 1 / span 2; align-self: start; }
@media (max-width: 800px) { .shop-product-info { grid-column: 1; grid-row: auto; } }
.shop-product-gallery-main {
    width: 100%; aspect-ratio: 1/1; object-fit: contain;
    border-radius: var(--radius-lg);
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    cursor: zoom-in;
}
.shop-product-gallery-thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }

/* Nuotraukos priartinimas (lightbox) – atsidaro paspaudus ant pagrindinės produkto nuotraukos,
   markup'as sukuriamas JS dinamiškai (shop.js), kad nereikėtų liesti kiekvieno produkto puslapio. */
.shop-lightbox {
    position: fixed; inset: 0; z-index: 5000;
    background: rgba(0, 0, 0, 0.9);
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-6);
    cursor: zoom-out;
}
.shop-lightbox[hidden] { display: none; }
.shop-lightbox img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    border-radius: var(--radius-md);
    cursor: default;
}
.shop-lightbox-close {
    position: fixed; top: var(--space-4); right: var(--space-4);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.12); border: none; color: #fff;
    font-size: 1.5rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.shop-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
@media (max-width: 600px) {
    .shop-lightbox { padding: var(--space-3); }
}

.shop-product-gallery-thumbs img {
    width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-md);
    border: 1px solid var(--border-color); cursor: pointer;
}
.shop-product-gallery-thumbs img.active { border-color: var(--color-primary); }

.shop-product-info h1 { font-size: var(--text-2xl); color: var(--text-primary); margin-bottom: 0; }
/* Pavadinimas + prekės ženklo logotipas/užrašas – pagal salmo.lt pavyzdį (2026-09-19,
   vartotojo pateiktas šaltinis): logotipas DOM'e eina PRIEŠ <h1>, su float:right – <h1>
   tekstas laisvai apsiveja aplink jį. Skirtingai nuo ankstesnio flex sprendimo (2026-09-02/19),
   čia TIK tos <h1> eilutės, kurios vizualiai yra šalia logotipo, susiaurėja – likusios (kai
   tekstas jau žemiau logotipo apačios) užima pilną plotį. Ilgiems (3+ eilučių) pavadinimams
   tai kompaktiškiau nei fiksuoto pločio stulpelis. $product['brand_logo'] – brands.logo_filename;
   kol konkrečiam ženklui logotipas dar neįkeltas, rodomas tekstinis pavadinimas ta pačia vieta. */
.shop-product-title-row {
    margin-bottom: var(--space-2);
}
/* Clearfix – be jo floated .shop-product-brand (jei aukštesnis už h1+SKU turinį) "ištekėtų" į
   po šio bloko einantį turinį (aprašymo nuorodą/kainą), nes float savaime neišplečia tėvinio
   elemento aukščio. */
.shop-product-title-row::after { content: ""; display: table; clear: both; }
/* "Dydis"/"Spalva" žymės (tik šiame swatch rodinyje, $hasPageSwatch) – vartotojo prašymu
   2026-09-02 sustorintos, kad aiškiau išsiskirtų nuo po jomis einančio turinio (dydžio
   pilų/spalvos pavadinimo). Kitose kategorijose (be swatch) šios žymės lieka nepakitusios
   (žr. bendrą .shop-form-row label taisyklę) – klasė uždedama tik product.php $hasPageSwatch šakoje. */
.shop-form-row-label-text { font-weight: var(--weight-semi); color: var(--text-primary); }
/* Svoris (g) – SAVO eilutė ("Svoris:"), dėžutės stiliaus kaip dydžio pilai, bet NEpaspaudžiama
   (vartotojo prašymu 2026-09-02: "svoris irgi langelyje, keičiasi tik pasirinkus Dydį" – ne
   inline tekstas šalia "Dydis:", o atskira eilutė, vizualiai suderinta su dydžio/spalvos
   pasirinkimo dėžutėmis). cursor:default ir jokio :hover efekto skiria nuo tikrų pasirenkamų pilų. */
.shop-size-pill--static { cursor: default; }
.shop-size-pill--static:hover { border-color: var(--border-color); color: var(--text-secondary); }
.shop-product-brand { float: right; margin: 0 0 var(--space-2) var(--space-4); }
.shop-product-brand-logo { max-height: 56px; max-width: 150px; object-fit: contain; border-radius: var(--radius-md, 8px); }
.shop-product-brand-text { color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; }
.shop-product-sku { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }
.shop-product-price { font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--text-primary); margin-bottom: var(--space-4); }
.shop-product-desc { color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--space-6); }
.shop-product-desc p { margin: 0 0 var(--space-4); }
.shop-product-desc p:last-child { margin-bottom: 0; }
.shop-product-desc-list { list-style: disc; margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.shop-product-desc-list li { margin-bottom: var(--space-1); }
.shop-product-desc-list:last-child { margin-bottom: 0; }
.shop-product-colors { margin-top: var(--space-5); }
.shop-product-colors h3 { font-size: var(--text-base); margin: 0 0 var(--space-2); }
.shop-product-colors ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px var(--space-4); font-size: var(--text-sm); color: var(--text-secondary); }

/* List-row layout (thumbnail + full wrapped name + price) — replaced an earlier short-label
   card-grid design; that heuristic (shortVariantLabel()) kept misfiring on edge cases across the
   catalog, so this shows the real, full variant name instead and leans on the row layout (name
   gets its own line to wrap into) to keep it readable rather than trying to shorten the text. */
.shop-variant-cards { display: flex; flex-direction: column; gap: var(--space-2); }
.shop-variant-card {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); width: 100%;
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border-color);
    background: var(--bg-glass); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.shop-variant-card:hover { border-color: var(--color-primary); }
/* BŪTINA – .shop-variant-card jau turi savo "display" reikšmę (aukščiau), kuri (ta pati
   specifiškumo lygmens klasė) nugali naršyklės numatytąjį [hidden]{display:none} – be šios
   eilutės dydžio filtras (product.php $hasSizeFilter) TIK atnaujintų JS duomenis, bet realiai
   nieko nepaslėptų vizualiai. Ta pati klaida jau buvo aptikta ir ištaisyta anksčiau .shop-lightbox/
   .shop-cart-drawer* elementams – nustatoma kiekvienam naujam elementui su savo "display", kurį
   kada nors reikia sąlygiškai slėpti su [hidden]. */
.shop-variant-card[hidden] { display: none; }
.shop-variant-card--active { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, var(--bg-glass)); }
.shop-variant-card-img {
    width: 64px; height: 64px; flex-shrink: 0; object-fit: contain; border-radius: var(--radius-sm);
    background: #fff; border: 1px solid var(--border-color);
}
.shop-variant-card-label { flex: 1; min-width: 0; font-weight: var(--weight-semi); font-size: var(--text-sm); line-height: 1.4; }
.shop-variant-card-stock { flex-shrink: 0; font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.shop-variant-card-price { flex-shrink: 0; font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-orange); white-space: nowrap; }
.shop-variant-card-oos { flex-shrink: 0; font-size: var(--text-xs); color: var(--color-red, #e5484d); }
/* Apgaubia kainą + pirkimo formą (arba "nėra sandėlyje") viename elemente – savas mažas flex
   konteineris, viduje tas pats tarpas kaip ir tarp kitų .shop-variant-card vaikų, tad darbalaukyje
   atrodo lygiai taip pat, lyg apgaubimo nebūtų. Mobiliajame šis elementas priverstinai užima visą
   plotį (flex-basis:100%), tad kortelės flex-wrap eilutė jį nuleidžia į naują eilutę po
   nuotrauka+pavadinimu – kaina/mygtukas atsiduria vienoje eilutėje, "Į krepšelį" prie krašto. */
.shop-variant-card-row2 { display: flex; align-items: center; gap: var(--space-3); }
.shop-variant-card--out { opacity: .55; }
/* Kiekvienas variantas dabar perkamas tiesiai iš savo eilutės (savas kiekio laukas + "Į krepšelį"
   mygtukas), ne bendru apatiniu mygtuku po pasirinkimo – žr. product.php pastabą prie update(). */
.shop-variant-card-buy { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
/* Fiksuotas 60x30 dydis – daug eilučių iš eilės, per didelis žingsniklis nereikalingai išplečia
   kiekvieną eilutę. 16+16 (mygtukai) + 28 (laukelis) = 60. */
.shop-variant-card-buy .shop-qty-stepper { width: 60px; height: 30px; }
.shop-variant-card-buy .shop-qty-stepper .shop-qty-step { width: 16px; height: 30px; font-size: 12px; }
.shop-variant-card-buy .shop-qty-stepper .shop-qty-stepper-input { width: 28px; height: 30px; font-size: 12px; }
.shop-variant-card-add-btn {
    padding: var(--space-2) var(--space-4); font-size: var(--text-sm); white-space: nowrap;
    display: inline-flex; align-items: center; gap: var(--space-1);
}
@media (max-width: 480px) {
    /* 2 eilučių išdėstymas: nuotrauka+pavadinimas viršuje, kaina+kiekis+mygtukas apačioje – vietoj
       vienos itin ankštos eilutės, kur viskas nespėja sutilpti į vieną liniją siaurame ekrane.
       row2 priverstinai užima visą plotį (100%), tad .shop-variant-card flex-wrap jį nuleidžia į
       naują eilutę – jokio grid/"display:contents" reikia, tik standartinis flex-wrap. */
    .shop-variant-card-img { width: 48px; height: 48px; }
    .shop-variant-card-label { font-size: var(--text-xs); }
    .shop-variant-card-row2 { flex: 1 1 100%; justify-content: space-between; gap: var(--space-2); }
    .shop-variant-card-price { font-size: var(--text-sm); }
    .shop-variant-card-buy { width: auto; }
}

.shop-product-stock-row { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.shop-product-stock { font-size: var(--text-sm); margin: 0; }
.shop-product-stock--in { color: var(--color-green); }
.shop-product-stock--out { color: var(--color-red, #e5484d); }
.shop-product-delivery { font-size: var(--text-sm); color: var(--text-muted); margin: 0; padding-left: var(--space-3); border-left: 1px solid var(--divider); }

.shop-product-desc-anchor {
    display: inline-flex; align-items: center; gap: var(--space-1);
    color: var(--color-primary); font-size: var(--text-sm); text-decoration: none;
    margin-bottom: var(--space-4);
}
.shop-product-desc-anchor:hover { text-decoration: underline; }
.shop-product-desc-anchor span { transition: transform 0.15s ease; }
.shop-product-desc-anchor:hover span { transform: translateX(2px); }

/* NAV+kontaktų kortelė (.shop-product-tabs-side, kairė) IR skirtuko TURINYS
   (.shop-product-tab-content, dešinė) – ABU savarankiški TIESIOGINIAI .shop-product-layout
   grid vaikai (ne .shop-product-info viduje) – vartotojo prašymu 2026-09-05 ("noriu kad
   jie butu isligenti tarpusavyje" – abu grid elementai TOJE PAČIOJE (auto) eilutėje, tad jų
   viršus natūraliai sutampa, be papildomo align-items/margin derinimo). Abu valdomi TA
   PAČIA JS (querySelectorAll), nepriklausomai nuo DOM medžio vietos. */
.shop-product-tabs-side { grid-column: 1; grid-row: 2; align-self: start; display: flex; flex-direction: column; gap: var(--space-4); }
/* Turinio kortelė (nuo 2026-10-08) – tas pats stilius kaip .shop-product-contact-card; yra VIDUJE
   .shop-product-info, iškart po .shop-product-stock-row. */
.shop-product-tab-content {
    margin-top: var(--space-4);
    border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    background: var(--bg-card); padding: var(--space-5);
}
@media (max-width: 800px) {
    /* Mobiliajame skirtukų nav paslėptas, o abu skyriai (aprašymas + charakteristika) rodomi
       vienas po kito – nav (kairėje, po galerija) būtų po turiniu, tad skirtukai beprasmiai. */
    .shop-product-tabs-side .shop-product-tabs-nav { display: none; }
    .shop-product-tab-panel:not([hidden]) { display: block; }
    .shop-product-tab-panel + .shop-product-tab-panel { margin-top: var(--space-6); }
    .shop-product-tabs-side { grid-row: auto; }
    /* KRITIŠKA – be šio atšaukimo, explicit grid-column:2 aukščiau VERSTŲ grid'ą
       implicitiškai sukurti antrą (auto pločio) taką net kai .shop-product-layout jau
       sutraukta į VIENĄ "1fr" – tada VISA .shop-product-info (su buybox/stock eilute)
       atsidurtų suspausta į tą siaurą implicitinę koloną, sulaužydama mobilų vaizdą (rasta
       2026-09-05, "mobili versija blogai atrodo"). Ši override BŪTINAI turi eiti PO
       aukščiau esančių bazinių taisyklių (ne faile aukščiau, prie .shop-product-layout),
       kitaip pralaimi cascade tvarkos taisyklei prieš tą pačią specifiškumą. */
    .shop-product-tabs-side { grid-column: 1; }
}
.shop-product-tab-panel-heading {
    display: flex; align-items: center; gap: var(--space-4);
    font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--text-primary);
    margin-bottom: var(--space-4);
}
.shop-product-tab-panel-heading::after { content: ''; flex: 1; height: 1px; background: var(--divider); }
.shop-product-tabs-nav {
    display: flex; flex-direction: column;
    border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    background: var(--bg-card); overflow: hidden;
}
.shop-product-tab-btn {
    background: none; border: none; border-bottom: 1px solid var(--divider); cursor: pointer; font-family: inherit;
    text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semi); letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--text-secondary); padding: var(--space-4);
}
.shop-product-tab-btn:last-child { border-bottom: none; }
.shop-product-tab-btn:hover { color: var(--text-primary); }
.shop-product-tab-btn.is-active { color: var(--color-primary); }
.shop-product-contact-card {
    border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    background: var(--bg-card); padding: var(--space-5);
}
.shop-product-contact-card h3 { font-size: var(--text-base); color: var(--text-primary); margin: 0 0 var(--space-2); }
.shop-product-contact-card p { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-3); }
.shop-product-contact-line { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-2); }
.shop-product-contact-line:last-child { margin-bottom: 0; }
.shop-product-contact-line a { color: inherit; text-decoration: none; }
.shop-product-contact-line a:hover { color: var(--color-primary); }
.shop-product-tab-panel { display: none; }
.shop-product-tab-panel.is-active { display: block; }

/* Teisinio turinio puslapis (shop/pirkimo-pardavimo-taisykles.php, 2026-09-17) –
   ta pati tipografijos konvencija kaip root/ "post-body" (apie-mus.php ir pan.), tik
   pritaikyta shop'o klasėms/kintamiesiems, kad nereikėtų puslapio inline <style> bloko
   (kitos shop puslapiai stiliaus visada laiko shop.css, ne inline). */
.shop-legal-body { max-width: 760px; }
.shop-legal-body h2 {
    font-size: var(--text-xl); font-weight: var(--weight-semi); color: var(--text-primary);
    margin: var(--space-8) 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-color);
}
.shop-legal-body h2:first-child { margin-top: 0; }
.shop-legal-body p { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.75; margin-bottom: var(--space-4); }
.shop-legal-body strong { color: var(--text-primary); font-weight: var(--weight-semi); }
.shop-legal-body a { color: var(--color-primary); }
.shop-legal-body .shop-product-contact-card { margin-bottom: var(--space-4); }
.shop-legal-body .shop-product-contact-card p { margin-bottom: var(--space-1); font-size: var(--text-sm); }

/* Kontaktų puslapis (shop/kontaktai.php, 2026-09-16) */
.shop-contacts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); margin-top: var(--space-6); max-width: 700px; }
.shop-contacts-note { margin-top: var(--space-6); font-size: var(--text-sm); color: var(--text-muted); }
.shop-contacts-note a { color: var(--color-primary); }

.shop-qty-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.shop-qty-input {
    width: 64px; text-align: center; padding: var(--space-2);
    background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md);
    color: var(--text-primary); font-size: var(--text-base);
}

/* Krepšelis */
.shop-cart-table { width: 100%; border-collapse: collapse; margin-top: var(--space-6); }
.shop-cart-table th { text-align: left; padding: var(--space-3); color: var(--text-muted); border-bottom: 1px solid var(--border-color); font-size: var(--text-sm); }
.shop-cart-table td { padding: var(--space-3); border-bottom: 1px solid var(--divider); vertical-align: middle; }
.shop-cart-row-product { display: flex; align-items: center; gap: var(--space-3); }
.shop-cart-row-product img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.shop-cart-row-product a { color: var(--text-primary); text-decoration: none; font-weight: var(--weight-medium); }
.shop-cart-row-product a:hover { text-decoration: none; }
.shop-cart-variant { color: var(--text-muted); font-size: var(--text-xs); }
.shop-cart-summary {
    margin-top: var(--space-6); display: flex; justify-content: flex-end;
}
.shop-cart-summary-box { text-align: right; }
.shop-cart-total { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--text-primary); margin-bottom: var(--space-4); }

/* Checkout */
.shop-checkout-layout { display: grid; grid-template-columns: 1fr 500px; gap: var(--space-8); margin-top: var(--space-6); align-items: start; }
/* Checkout auditas (2026-09-14), MEDIUM radinys #7 – anksčiau santrauka buvo perstumta VIRŠUN
   mobiliajame (order:1), kad klientas iškart matytų, ką perka, prieš ilgą formą. PAKEISTA, kai
   "Sutinku"/"Patvirtinti užsakymą" perkelti Į PAČIĄ santraukos kortelę (žr. checkout.php) – jei
   santrauka liktų viršuje, mygtukas atsirastų PRIEŠ laukus (Vardas/adresas ir t.t.), kuriuos jis
   siunčia, o tai klaidina. Dabar mobiliajame naudojama NATŪRALI DOM tvarka (forma → santrauka su
   mygtuku) be jokio `order` perstūmimo – vartotojas pirma užpildo duomenis, tada pasiekia
   santrauką+mygtuką jau turėdamas viską po ranka. */
@media (max-width: 800px) {
    .shop-checkout-layout { grid-template-columns: 1fr; }
    #shop-order-summary-card { margin-top: var(--space-6); }
}
.shop-form-row { margin-bottom: var(--space-4); }
.shop-form-row label { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-1); }
.shop-form-row input, .shop-form-row textarea, .shop-form-row select {
    width: 100%; padding: var(--space-3); background: var(--bg-primary);
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    color: var(--text-primary); font-size: var(--text-sm); font-family: inherit;
}

/* Du .shop-form-row viename eilutėje (pvz. checkout.php El. paštas + Telefonas) – vaikų
   .shop-form-row savas margin-bottom nuimamas (tarpą duoda pati grupė), kad neatsirastų
   dvigubo tarpo tarp grupės ir sekančio lauko. */
.shop-form-row-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.shop-form-row-pair .shop-form-row { margin-bottom: 0; }
/* Ta pati, jau kelis kartus šiame projekte pasitaikiusi CSS specifiškumo klaida (žr.
   .shop-pudo-selected[hidden]/.shop-swatch-strip-wrap[hidden] aukščiau) – .shop-form-row-pair
   savo "display:grid" turi TOKĮ PATĮ specifiškumą kaip naršyklės numatytoji [hidden]{display:none}
   taisyklė ir ją nugali, tad checkout.php "Buto nr./Pašto kodas" pora (žr. #shop-delivery-postal-row)
   LIKDAVO MATOMA net su hidden atributu pasirinkus DPD paštomatą (rado vartotojas 2026-09-14). */
.shop-form-row-pair[hidden] { display: none; }
@media (max-width: 480px) { .shop-form-row-pair { grid-template-columns: 1fr; gap: 0; } .shop-form-row-pair .shop-form-row { margin-bottom: var(--space-4); } .shop-form-row-pair .shop-form-row:last-child { margin-bottom: 0; } }

/* Checkout puslapio sekcijos ("Kontaktiniai duomenys"/"Pristatymas") – ikona+antraštė+paaiškinimas
   virš kiekvienos .shop-card sekcijos, pagal vartotojo pateiktą dizaino pavyzdį (2026-09-17). */
.shop-checkout-section { margin-bottom: var(--space-6); }
.shop-checkout-section-header { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-5); }
.shop-checkout-section-icon {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 40px; height: 40px; border-radius: var(--radius-md); font-size: 1.2rem;
    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.shop-checkout-section-title { margin: 0 0 2px; font-size: var(--text-base); font-weight: var(--weight-semi); color: var(--text-primary); }
.shop-checkout-section-sub { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.shop-checkout-subheading { margin: var(--space-5) 0 var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--text-primary); }

/* DPD pristatymo būdo pasirinkimas (checkout.php) – ta pati "aktyvi kortelė" logika kaip
   .shop-variant-card--active. Rodo kurjerio/paštomato pasirinkimą, JS toggle'ina .is-active.
   Nuo 2026-09-17 – dvi kortelės greta (grid), kiekvienoje kaina+pristatymo laikas, pagal
   vartotojo pateiktą dizaino pavyzdį. */
.shop-delivery-method-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 600px) { .shop-delivery-method-options { grid-template-columns: 1fr; } }
.shop-delivery-method-option {
    display: flex; flex-direction: column; gap: 4px; width: 100%;
    padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-color);
    background: var(--bg-glass); cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.shop-delivery-method-option:hover { border-color: var(--color-primary); }
.shop-delivery-method-option.is-active { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, var(--bg-glass)); }
.shop-delivery-method-option input[type="radio"] { width: auto; margin: 0; flex-shrink: 0; }
.shop-delivery-method-top { display: flex; align-items: center; gap: var(--space-2); }
.shop-delivery-method-icon { font-size: 1.2rem; flex-shrink: 0; }
.shop-delivery-method-title { font-weight: var(--weight-semi); color: var(--text-primary); font-size: var(--text-sm); flex: 1; min-width: 0; }
.shop-delivery-method-price { font-weight: var(--weight-semi); color: var(--text-primary); font-size: var(--text-sm); white-space: nowrap; flex-shrink: 0; }
.shop-delivery-method-sub { margin: 0; color: var(--text-muted); font-size: var(--text-xs); }
.shop-delivery-method-eta { margin: 0; color: var(--text-muted); font-size: var(--text-xs); display: flex; align-items: center; gap: 4px; }

/* DPD paštomato paieška – kompaktiškas typeahead sąrašas po įvesties lauku. */
.shop-pudo-results {
    list-style: none; margin: var(--space-1) 0 0; padding: 0; max-height: 260px; overflow-y: auto;
    border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-primary);
}
.shop-pudo-result-item { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; border-bottom: 1px solid var(--divider); }
.shop-pudo-result-item:last-child { border-bottom: none; }
.shop-pudo-result-item:hover { background: var(--bg-glass); color: var(--text-primary); }
.shop-pudo-result-item strong { color: var(--text-primary); }
.shop-pudo-selected {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 12%, var(--bg-glass)); font-size: var(--text-sm); color: var(--text-primary);
}
/* BŪTINA – ta pati specifiškumo klasė kaip .shop-variant-card[hidden] kitur šiame faile:
   .shop-pudo-selected jau turi savo "display:flex", kuris nugali [hidden]{display:none}. */
.shop-pudo-selected[hidden] { display: none; }
.shop-pudo-change-btn {
    flex-shrink: 0; background: none; border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2); font-size: var(--text-xs); color: var(--text-secondary); cursor: pointer;
}
.shop-pudo-change-btn:hover { border-color: var(--color-primary); color: var(--text-primary); }
.shop-pudo-hint { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--text-muted); }

.shop-consent-row { margin-bottom: var(--space-4); }
.shop-consent-label {
    display: flex; align-items: flex-start; gap: var(--space-2);
    font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; font-weight: normal;
}
.shop-consent-label input[type="checkbox"] { flex-shrink: 0; margin-top: 3px; accent-color: var(--diary-accent); width: 16px; height: 16px; cursor: pointer; }
.shop-consent-label a { color: var(--color-primary); }

.shop-variant-specs,
.shop-specs-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); font-size: var(--text-sm); }
.shop-variant-specs th,
.shop-specs-table th { text-align: left; font-weight: var(--weight-medium); color: var(--text-muted); padding: 4px; border-bottom: 1px solid var(--divider); white-space: nowrap; }
.shop-variant-specs td,
.shop-specs-table td { text-align: right; color: var(--text-primary); padding: 4px; border-bottom: 1px solid var(--divider); }
/* Voblerio "Tipas" – pelės užvedimo/fokuso užuomina (data-tip) */
.shop-specs-table td[data-tip] { position: relative; cursor: help; text-decoration: underline dotted var(--text-muted); text-underline-offset: 3px; }
.shop-specs-table td[data-tip]::after {
    content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20;
    width: max-content; max-width: 260px; padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); box-shadow: 0 6px 20px rgba(0,0,0,.25);
    font-size: var(--text-xs); line-height: 1.4; text-align: left; text-decoration: none; white-space: normal;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s;
}
.shop-specs-table td[data-tip]:hover::after,
.shop-specs-table td[data-tip]:focus::after { opacity: 1; visibility: visible; }
.shop-order-summary-item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); padding: var(--space-2) 0; border-bottom: 1px solid var(--divider); }
.shop-order-summary-item-info { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.shop-order-summary-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border-color); flex-shrink: 0; }
.shop-order-summary-item-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.shop-order-summary-remove {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: var(--text-sm); line-height: 1;
    padding: var(--space-1);
}
.shop-order-summary-remove:hover { color: var(--color-red, #e5484d); }
.shop-order-summary-qty-form { display: flex; align-items: center; gap: var(--space-1); margin-top: 2px; }
.shop-order-summary-qty-input {
    width: 44px; padding: 2px var(--space-1); background: var(--bg-primary);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    color: var(--text-primary); font-size: var(--text-xs); font-family: inherit;
}
.shop-order-summary-qty-btn {
    background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: var(--text-sm); padding: var(--space-1);
}
.shop-order-summary-qty-btn:hover { color: var(--diary-accent); }

/* Checkout auditas (2026-09-14), LOW radinys #11 – kiekio laukas (~18px aukščio) ir
   ↻/✕ mygtukai (~22px) buvo gerokai mažesni nei rekomenduojamas ~40px liestuko taikinys,
   nepatogu paspausti pirštu. Padidinama TIK mobiliajame (ta pati riba kaip
   .shop-checkout-layout persijungimas į vieną stulpelį, kur ši panelė tampa pagrindiniu,
   liestuku valdomu elementu) – desktop'e panelė lieka kompaktiška, nes pelė tikslumo
   problemos neturi. */
@media (max-width: 800px) {
    .shop-order-summary-qty-input { width: 52px; min-height: 40px; padding: var(--space-2); font-size: var(--text-sm); }
    .shop-order-summary-qty-btn,
    .shop-order-summary-remove {
        min-width: 40px; min-height: 40px; padding: var(--space-2);
        font-size: var(--text-base); display: inline-flex; align-items: center; justify-content: center;
    }
}

/* Prekių/pristatymo/bendros sumos eilutės checkout.php IR order-success.php santraukos
   panelėje (žr. shopCalculateShippingFee(), shop/includes/shipping-functions.php). */
.shop-order-summary-totals { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--divider); display: flex; flex-direction: column; gap: var(--space-1); }
.shop-order-summary-totals-row { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--text-secondary); }
.shop-free-shipping-note { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-primary); }

.shop-success-box { text-align: center; padding: var(--space-16) 0; }
.shop-success-box .icon { font-size: 3.5rem; margin-bottom: var(--space-4); display: block; }

.shop-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}
.shop-flash {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}
.shop-flash--success { background: rgba(52,211,153,0.1); color: var(--color-green); border: 1px solid rgba(52,211,153,0.3); }
.shop-flash--error { background: rgba(229,72,77,0.1); color: var(--color-red, #e5484d); border: 1px solid rgba(229,72,77,0.3); }

/* Mygtukai */
.shop-btn {
    display: inline-block;
    background: var(--diary-accent);
    color: #fff;
    font-weight: var(--weight-semi);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    font-size: var(--text-sm);
    text-decoration: none;
}
.shop-btn:hover { opacity: 0.85; text-decoration: none; }
.shop-btn--secondary { background: var(--bg-glass); color: var(--diary-accent); border: 1px solid var(--diary-accent); }
.shop-btn--danger { background: transparent; color: var(--color-red, #e5484d); border: 1px solid rgba(229,72,77,0.4); }

/* Krepšelio ženkliukas nav'e */
.shop-cart-link { position: relative; display: inline-flex; align-items: center; text-decoration: none; padding: var(--space-2); color: var(--text-primary); }
.shop-cart-link:hover { text-decoration: none; }
.shop-cart-badge {
    position: absolute; top: -2px; right: -2px;
    background: var(--color-primary); color: #000;
    font-size: 0.65rem; font-weight: var(--weight-bold);
    min-width: 16px; height: 16px; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* ═══════════════════════════════════════════════════════════════
   SHOP HEADER MENIU – logotipo "Parduotuvė" paantraštė + hover
   iškrentantys "Kategorijos"/"Informacija"/"Naudinga" meniu punktai
═══════════════════════════════════════════════════════════════ */

.shop-nav-logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.shop-nav-logo-sub {
    font-size: 0.65rem; font-weight: var(--weight-semi); color: var(--diary-accent);
    text-transform: uppercase; letter-spacing: 0.06em;
    text-align: right;
}

.shop-nav-dropdown { position: relative; }
.shop-nav-dropdown-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: inherit; line-height: inherit; background: none; border: none; cursor: pointer;
}
.shop-nav-dropdown-caret { transition: transform 0.15s ease; flex-shrink: 0; }
.shop-nav-dropdown:hover .shop-nav-dropdown-caret,
.shop-nav-dropdown:focus-within .shop-nav-dropdown-caret { transform: rotate(180deg); }

.shop-nav-dropdown-panel {
    display: none;
    position: absolute; top: 100%; left: 0;
    /* SOLIDUS (ne --bg-card, kuris permatomas) fonas – tas pats principas, kuris jau
       anksčiau pritaikytas --categories atmainai žemiau: plaukiojantis elementas uždengia
       KITO puslapio turinio (nuotraukų/teksto), tad permatomumas per jį prasišviečia ir
       tampa neįskaitomas (vartotojo pastebėta 2026-09-24, kartu su paieškos panelu ir
       krepšelio langu – visi trys naudojo tą pačią klaidingą --bg-card reikšmę). */
    background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    box-shadow: 0 12px 28px rgba(0,0,0,0.28);
    padding: var(--space-3); z-index: 200;
}
.shop-nav-dropdown:hover .shop-nav-dropdown-panel,
.shop-nav-dropdown:focus-within .shop-nav-dropdown-panel { display: block; }

/* "Prognozė" – atskiras, visada matomas CTA meniu juostos gale (2026-09-22, vartotojo
   pateiktas dizaino pavyzdys), ištrauktas iš "Naudinga" išskleidžiamo meniu. Šviesiai
   mėlynas fonas + mėlynas tekstas – ta pati spalva/tonas kaip .nav-link:hover kitur
   svetainėje (rgba(56,189,248,...) + var(--color-primary)), tad vizualiai nuosekliai
   atrodo kaip "jau pasirinktas/paryškintas" elementas net kai nėra hover būsenoje. */
.shop-nav-forecast-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: var(--space-2) var(--space-4) !important;
    background: rgba(56, 189, 248, 0.12);
    color: var(--color-primary) !important;
    border-radius: var(--radius-full);
    font-weight: var(--weight-semi);
}
.shop-nav-forecast-link:hover { background: rgba(56, 189, 248, 0.2); }

/* Nuo 2026-09-17 – tas pats "Shop" mega-meniu dizainas kaip includes/site-nav.php (žr.
   nav-shop-menu-* klases root style.css, jau įkeltame per shop puslapius). Perrašo bazinės
   .shop-nav-dropdown-panel display/gap/padding į flex (stulpeliai + reklaminė kortelė greta),
   PLIUS SOLIDŲ (ne rgba) foną – .shop-nav-dropdown-panel naudoja --bg-card, kuris permatomas. */
.shop-nav-dropdown-panel--categories {
    display: none; align-items: stretch; gap: var(--space-6);
    width: max-content; max-width: min(920px, calc(100vw - var(--space-8)));
    padding: var(--space-6); background: var(--bg-secondary);
}
.shop-nav-dropdown:hover .shop-nav-dropdown-panel--categories,
.shop-nav-dropdown:focus-within .shop-nav-dropdown-panel--categories { display: flex; }

.shop-nav-dropdown-link {
    display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
    color: var(--text-primary); text-decoration: none; font-size: var(--text-sm); white-space: nowrap;
}
.shop-nav-dropdown-link:hover { background: var(--bg-glass); color: var(--diary-accent); text-decoration: none; }

/* Mobiliojo meniu grupių antraštės (Kategorijos/Informacija/Naudinga) */
.mobile-menu-group-title {
    font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin: var(--space-4) 0 var(--space-1); padding: 0 var(--space-2);
}
/* ═══════════════════════════════════════════════════════════════
   PERDIZAINAS 2026-08-17 – pagrindinis + kategorijos puslapiai
═══════════════════════════════════════════════════════════════ */

/* Kategorijos spalvotas skirtukas ant produkto kortelės – 8 deterministinės
   spalvos (crc32(slug) % 8, žr. categoryBadgeClass() PHP pusėje) */
.shop-badge {
    position: absolute; top: var(--space-2); left: var(--space-2);
    font-size: var(--text-xs); font-weight: var(--weight-semi);
    padding: 3px var(--space-2); border-radius: var(--radius-full);
    color: #fff; z-index: 1; white-space: nowrap;
}
.shop-badge-0 { background: #0ea5e9; }
.shop-badge-1 { background: #22c55e; }
.shop-badge-2 { background: #f59e0b; }
.shop-badge-3 { background: #a78bfa; }
.shop-badge-4 { background: #2dd4bf; }
.shop-badge-5 { background: #f472b6; }
.shop-badge-6 { background: #fb923c; }
.shop-badge-7 { background: #818cf8; }
/* "Rekomenduojame"/"Naujiena" ženkliukas (shop-index karuselė, 2026-09-16) – rodomas VIETOJ
   kategorijos ženkliuko (žr. renderProductCard() $ribbon), pilnas didžiosiomis raidėmis. */
.shop-badge--ribbon { background: #22c55e; font-weight: var(--weight-bold); letter-spacing: .02em; }

/* ── Pagrindinis puslapis: žvejybos būdo kategorijų kortelės ──── */
.shop-method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
}
@media (max-width: 800px) { .shop-method-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .shop-method-grid { grid-template-columns: 1fr; } }
.shop-method-tile {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    text-decoration: none;
    text-align: center;
    transition: border-color var(--transition-base), transform var(--transition-base);
}
.shop-method-tile:hover { border-color: var(--color-primary); transform: translateY(-2px); text-decoration: none; }
.shop-method-tile-icon { font-size: 2.4rem; }
.shop-method-tile-photo { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-full); }
.shop-method-tile-name { font-size: var(--text-base); font-weight: var(--weight-semi); color: var(--text-primary); }
.shop-method-tile-count { font-size: var(--text-xs); color: var(--text-muted); }
.shop-icon-gift { width: 1em; height: 1em; vertical-align: -0.15em; color: var(--diary-accent); }

/* ── Pagrindinis puslapis: prognozės rinkiniai ────────────────── */
.shop-section-title { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--text-primary); margin: var(--space-12) 0 var(--space-1); }
.shop-page > .shop-section-title:first-child { margin-top: 0; }
.shop-section-title-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
    margin-bottom: var(--space-5);
}
.shop-section-title-row .shop-section-title { margin: 0; }
.shop-page > .shop-section-title-row:first-child { margin-top: 0; }
@media (max-width: 640px) {
    .shop-section-title-row { flex-direction: column; align-items: stretch; }
}
.shop-section-lead { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-5); }
.shop-bundles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-5);
}
.shop-bundle-card {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.shop-bundle-img {
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}
.shop-bundle-body {
    padding: var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-2);
    flex: 1;
}
.shop-bundle-dot {
    width: 34px; height: 34px; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
    margin-bottom: var(--space-2);
}
.shop-bundle-card h3 { font-size: var(--text-base); font-weight: var(--weight-semi); color: var(--text-primary); margin: 0; }
.shop-bundle-card p { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-2); }
.shop-bundle-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.shop-bundle-price { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text-primary); }

/* ── Pagrindinis puslapis: "Išbandyta žvejyboje" sekcija ──────── */
.shop-video-section {
    margin-top: var(--space-12);
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start;
}
@media (max-width: 700px) { .shop-video-section { grid-template-columns: 1fr; } }
.shop-video-section h2 { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--text-primary); margin: 0 0 var(--space-2); }
.shop-video-section p { color: var(--text-secondary); margin-bottom: var(--space-4); }
.shop-video-thumb {
    aspect-ratio: 16/9; border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-primary));
    border: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
.shop-video-thumb-icon {
    width: 64px; height: 64px; border-radius: var(--radius-full);
    background: rgba(255,255,255,0.15); backdrop-filter: var(--blur-sm);
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
    color: #fff;
}
.shop-video-thumb-fish { position: absolute; font-size: 5rem; opacity: 0.12; }

/* ── Pagrindinis puslapis: "Rekomenduojame"/"Naujiena" karuselė ───
   (2026-09-16, pakeitė "Išbandyta žvejyboje" – žr. index.php, ta sekcija
   liko komentaruose, ne ištrinta, "Išbandyta" tekstas gali grįžti vėliau) */
.shop-carousel-section { margin-top: var(--space-12); }
.shop-carousel-tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--border-color); margin-bottom: var(--space-6); }
.shop-carousel-tab {
    background: none; border: none; cursor: pointer; padding: var(--space-2) 0 var(--space-3);
    font-size: var(--text-xl); font-weight: var(--weight-semi); color: var(--text-muted);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.shop-carousel-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.shop-carousel-wrap { position: relative; }
.shop-carousel-track {
    display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; padding-bottom: var(--space-1);
}
.shop-carousel-track::-webkit-scrollbar { display: none; }
.shop-carousel-track[hidden] { display: none; }
/* display:flex (ne vien width) – BŪTINA, kad vidinė .shop-product-card2 (kurios pati
   footer'io margin-top:auto logika lygina aukštį .shop-grid2 grid'e) išsitemptų iki viso
   šio konteinerio aukščio ir čia, karuselėje – be šio, kortelė lieka savo turinio (skirtingo
   pilų kiekio) aukščio, ir eilutės atrodo netvarkingai (vartotojo pastebėta 2026-09-16). */
.shop-carousel-item { flex: 0 0 auto; width: 260px; scroll-snap-align: start; display: flex; }
.shop-carousel-item .shop-product-card2 { width: 100%; }
@media (max-width: 600px) { .shop-carousel-item { width: 200px; } }
.shop-carousel-arrow {
    position: absolute; top: 45%; transform: translateY(-50%); z-index: 2;
    width: 38px; height: 38px; border-radius: var(--radius-full);
    background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,.12));
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--text-primary); cursor: pointer;
}
.shop-carousel-arrow--prev { left: -18px; }
.shop-carousel-arrow--next { right: -18px; }
@media (max-width: 700px) { .shop-carousel-arrow { display: none; } }

/* Pasitikėjimo juosta (2026-09-16, prieš footerį) – PERDARYTA pagal vartotojo atsiųstą
   pavyzdį (eyebrow + antraštė + kortelė su 5 punktais ir vertikaliais skirtukais), po
   kelių ankstesnių, atmestų bandymų (žr. git istoriją, jei reikia). */
.shop-trust-bar { margin-top: var(--space-12); }
.shop-trust-intro { text-align: center; max-width: 560px; margin: 0 auto var(--space-8); }
.shop-trust-eyebrow {
    display: flex; align-items: center; gap: var(--space-3); justify-content: center;
    font-size: var(--text-xs); font-weight: var(--weight-semi); letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: var(--space-3);
}
.shop-trust-eyebrow-line { width: 40px; height: 1px; background: var(--border-color); }
.shop-trust-heading { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--text-primary); margin: 0 0 var(--space-2); }
.shop-trust-subtitle { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }

.shop-trust-card {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-6);
    display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap;
}
.shop-trust-item {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2);
    flex: 1 1 0; min-width: 150px; padding: 0 var(--space-4); border-left: 1px solid var(--divider);
}
.shop-trust-item:first-child { border-left: none; }
.shop-trust-icon {
    width: 30px; height: 30px; color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-1);
}
.shop-trust-item strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--text-primary); }
.shop-trust-item span { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.shop-trust-contact { display: inline-block; margin-top: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--color-primary); text-decoration: none; }
.shop-trust-contact:hover { text-decoration: underline; }
@media (max-width: 900px) {
    .shop-trust-card { flex-direction: column; gap: var(--space-6); }
    .shop-trust-item { border-left: none; padding: 0; width: 100%; }
}

/* ── Kategorijos puslapis: layout ──────────────────────────────── */
.shop-cat-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.shop-cat-title-row h1 { display: flex; align-items: center; gap: var(--space-3); }
.shop-cat-title-icon { font-size: 2.2rem; }
.shop-cat-title-context { font-size: var(--text-base); font-weight: var(--weight-normal); color: var(--text-muted); }
/* Kategorijos hero – vientisas dviejų stulpelių banaeris (tekstas | nuotrauka).
   NE .container viduje (kad tekstas ir nuotrauka sudarytų vieną vientisą bloką, o ne
   atrodytų kaip du atskiri "puslapiai"), bet max-width TIKSLIAI lygus .container pločiui
   ir centruotas taip pat – niekada neišlenda už bendro puslapio turinio ribų, kad ir koks
   platus būtų monitorius (ankstesnė versija leisdavo šiek tiek išlįsti/driektis iki krašto –
   vartotojas paprašė to atsisakyti visiškai). */
.shop-hero--has-photo { padding-bottom: 0; overflow: visible; }
.shop-cat-hero-banner {
    display: flex;
    align-items: stretch;
    height: 400px; /* BŪTINA fiksuota (ne min-height) reikšmė – kitaip .shop-cat-hero-media
        neturi apibrėžto aukščio, todėl jos <img height:100%> nutrūksta į "auto" ir nuotrauka
        piešiama savo pilnu vietiniu dydžiu (realios kategorijų nuotraukos – 1200×600px),
        išsipučia per visą puslapį ir užsideda ant teksto/breadcrumb/kategorijų juostos. */
    margin: var(--space-6) auto 0;
    max-width: var(--container-max);
}
.shop-cat-hero-text {
    flex: 1 1 460px;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
    background: var(--bg-secondary);
    padding: var(--space-8) var(--space-6);
    /* Fiksuota reikšmė (ne dinaminis calc() nuo 100vw) – kadangi banaeris dabar visada
       lygiai .container pločio ir centruotas taip pat, jo kairysis kraštas VISADA sutampa
       su .container turinio pradžia, tad papildomo skaičiavimo nebereikia. */
    padding-left: var(--space-6);
}
.shop-cat-hero-text h1 { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.shop-cat-hero-text .lead { color: var(--text-secondary); max-width: 48ch; margin: 0; }
.shop-cat-hero-badges {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.shop-cat-hero-badges li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.shop-cat-hero-badges strong { color: var(--text-primary); font-size: var(--text-sm); }
.shop-cat-hero-badge-icon { flex-shrink: 0; font-size: 1.1rem; line-height: 1.4; }
.shop-cat-hero-media {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
    /* Įstrižas (ne status vertikalus) kraštas tarp teksto skydelio ir nuotraukos – nuotrauka
       šiek tiek "įlenda" į teksto stulpelio erdvę (neigiama margin-left), o clip-path
       nukerpa tą įsikišusią dalį įstrižai (kaip "/"), atskleisdama teksto skydelio foną
       po tuo pjūviu. Mobiliajame (stulpelinis išdėstymas) šis efektas prasmės nebeturi
       (žr. media query žemiau) – ten tinka paprastas horizontalus perėjimas iš viršaus. */
    margin-left: -56px;
    clip-path: polygon(56px 0, 100% 0, 100% 100%, 0 100%);
}
.shop-cat-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.88) brightness(0.94); }
/* Švelnus perėjimas iš teksto skydelio į nuotrauką – vietoj griežtos linijos tarp jų,
   kairysis nuotraukos kraštas palaipsniui "ištirpsta" iš teksto fono spalvos. */
.shop-cat-hero-media::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, var(--bg-secondary) 0%, transparent 40%, transparent 90%, rgba(0, 0, 0, 0.28) 100%);
    pointer-events: none;
}
@media (max-width: 860px) {
    .shop-cat-hero-media::before { background: linear-gradient(180deg, var(--bg-secondary) 0%, transparent 40%, transparent 90%, rgba(0, 0, 0, 0.28) 100%); }
}
@media (max-width: 860px) {
    .shop-cat-hero-banner { flex-direction: column; height: auto; }
    .shop-cat-hero-text { max-width: none; padding: var(--space-6); }
    /* flex-basis:50% iš bazinės taisyklės (aukščiau) VIRŠ height:220px stulpelinio flex
       layout'o pagrindinėje ašyje (dabar vertikalioje) – vien height:220px nepakanka,
       reikia perrašyti ir patį flex, kitaip elementas vis tiek auga pagal savo turinį
       (nuotraukos natūralią proporciją), o ne laikosi nustatyto 220px aukščio. */
    .shop-cat-hero-media { flex: 0 0 160px; height: 160px; margin-left: 0; clip-path: none; }
    .shop-cat-hero-badges { gap: var(--space-4); }
}

/* Pagrindinio shop puslapio hero skaidrių juosta – kiekviena .shop-hero-slide pati yra
   .shop-cat-hero-banner (tas pats dviejų stulpelių išdėstymas/įstriža briauna/perėjimas
   kaip kategorijos hero), tad čia tereikia pridėti pačios juostos mechaniką: iš karto
   matoma tik .is-active skaidrė, rodyklės/taškeliai rodomi tik kai skaidrių daugiau nei 1. */
.shop-hero--slider { padding-bottom: 0; }
.shop-hero-slider { position: relative; }
.shop-hero-slide { display: none; }
.shop-hero-slide.is-active { display: flex; }
.shop-hero-slide-tags {
    list-style: none;
    margin: var(--space-1) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.shop-hero-slide-tags li {
    padding: var(--space-1) var(--space-3);
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.shop-hero-slide-btn { align-self: flex-start; margin-top: var(--space-2); }
.shop-hero-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 1.4rem;
    cursor: pointer;
}
.shop-hero-slider-arrow:hover { background: rgba(0, 0, 0, 0.6); }
.shop-hero-slider-arrow--prev { left: var(--space-4); }
.shop-hero-slider-arrow--next { right: var(--space-4); }
.shop-hero-slider-dots {
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: var(--space-2);
}
.shop-hero-slider-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    padding: 0;
}
.shop-hero-slider-dot.is-active { background: #fff; }
@media (max-width: 860px) {
    .shop-hero-slider-arrow { display: none; }
    .shop-hero-slide-btn { align-self: stretch; text-align: center; }
}

.shop-cat-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-8); margin-top: var(--space-6); align-items: start; }
@media (max-width: 860px) { .shop-cat-layout { grid-template-columns: 1fr; } }

.shop-sidebar-toggle {
    display: none;
    align-items: center; gap: var(--space-2);
    width: 100%; margin-top: var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md);
    color: var(--text-primary); font-size: var(--text-sm); font-weight: var(--weight-semi); font-family: inherit;
    cursor: pointer;
}

.shop-sort-select {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md);
    color: var(--text-primary); font-size: var(--text-sm); font-family: inherit;
}
.shop-products-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.shop-products-toolbar #shop-sort-form { flex-shrink: 0; }
@media (max-width: 640px) {
    .shop-products-toolbar { flex-wrap: wrap; }
}

/* Produktų paieška */
.shop-search-form { display: flex; gap: var(--space-2); flex: 1 1 auto; min-width: 0; }
.shop-search-input {
    flex: 1 1 auto; min-width: 0;
    padding: var(--space-2) var(--space-4);
    background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md);
    color: var(--text-primary); font-size: var(--text-sm); font-family: inherit;
}
.shop-search-input:focus { outline: none; border-color: var(--diary-accent); }
.shop-search-btn { flex-shrink: 0; padding: var(--space-2) var(--space-5); }
.shop-search-form--home { max-width: 420px; }
@media (max-width: 640px) {
    .shop-search-form--home { max-width: none; }
}
.shop-search-form--results { margin-bottom: var(--space-5); max-width: 640px; }

/* Headerio lupos ikona → iškrentantis paieškos laukelis (nuo 2026-09-02) – ta pati kortelės
   vizualinė kalba kaip .shop-nav-dropdown-panel (bg-card/border/shadow), bet rodoma/slepiama
   JS click-toggle'u (ne CSS :hover), nes tai vienintelis būdas patikimai veikti ir mobiliajame. */
.shop-header-search { position: relative; }
.shop-header-search-panel {
    position: absolute; top: calc(100% + 8px); right: 0;
    /* SOLIDUS fonas – ta pati 2026-09-24 pataisa kaip .shop-nav-dropdown-panel aukščiau. */
    background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    box-shadow: 0 12px 28px rgba(0,0,0,0.28);
    padding: var(--space-3); z-index: 250; width: 320px; max-width: calc(100vw - 32px);
}
.shop-search-form--header { max-width: none; }
.shop-search-form--mobile-menu { margin: 0 0 var(--space-4); }
/* Nuo 1024px pločio hamburgeris/mobile-menu paslėpti (žr. style.css .nav-hamburger), tad
   headerio lupos ikona rodoma tik iki šio pat pločio – virš jo dubliuotų mobile-menu vidinį
   paieškos lauką. Žemiau šio pločio ikona PASLĖPTA VISADA (ne tik siauriausiuose ekranuose) –
   ji su gretimais cart/theme/hamburger mygtukais nebetelpa į vieną eilutę ir stumia hamburgerį
   už matomos srities ribų (ta pati problema kaip anksčiau su .nav-login-link, žr. CLAUDE.md) –
   vietoj jos paieškos laukas įdėtas tiesiai į #mobile-menu (žr. header.php). */
@media (max-width: 1024px) {
    .shop-header-search { display: none; }
}

/* Paieškos "iškart matomi rezultatai" iškylantis langas */
.shop-search-suggest {
    position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0;
    z-index: 40;
    background: #0a1730; border: 1px solid var(--border-hover, var(--border-color)); border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    overflow: hidden;
}
[data-theme="light"] .shop-search-suggest { background: #ffffff; }
.shop-search-suggest-list { list-style: none; margin: 0; padding: var(--space-2); max-height: 60vh; overflow-y: auto; }
.shop-search-suggest-list li + li { margin-top: 2px; }
.shop-search-suggest-list a {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2); border-radius: var(--radius-md);
    color: var(--text-primary); text-decoration: none;
}
.shop-search-suggest-list a:hover, .shop-search-suggest-list a:focus { background: var(--bg-glass); }
.shop-search-suggest-list img, .shop-search-suggest-noimg {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-sm);
    object-fit: contain; background: var(--bg-primary);
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.shop-search-suggest-name { flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-search-suggest-price { flex-shrink: 0; font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--diary-accent); }
.shop-search-suggest-more {
    display: block; text-align: center; padding: var(--space-3);
    border-top: 1px solid var(--border-color);
    color: var(--diary-accent); font-size: var(--text-sm); font-weight: var(--weight-semi); text-decoration: none;
}
.shop-search-suggest-more:hover { text-decoration: underline; }
.shop-search-suggest-empty { padding: var(--space-4); margin: 0; color: var(--text-secondary); font-size: var(--text-sm); text-align: center; }

/* Šoninė juosta – span 2 grid eilutes (produktų stulpelis + "Naudinga informacija" apačioje), kad
   ilgas pokategorijų sąrašas (aukštesnis už produktų stulpelį) NEnustumtų "Naudinga informacija"
   žemyn iki savo apačios – 2-a grid eilutė turi priklausyti TIK nuo produktų stulpelio aukščio.
   Mobiliajame (žr. @media 860px žemiau) šoninė juosta ir taip paslėpta/vienoje kolonoje, tad span
   ten atšaukiamas, kad neužklotų kitų elementų, kai atidaroma per mygtuką. */
.shop-sidebar { display: flex; flex-direction: column; gap: var(--space-5); grid-row: 1 / span 2; }
.shop-sidebar-box { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-5); }
.shop-sidebar-box h3 { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 var(--space-3); }
.shop-sidebar-cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

/* "Viskas" – visada išskirtinis pilnas akcento spalvos mygtukas viršuje (ne tik kai aktyvus) */
.shop-sidebar-cat-item--all { margin-bottom: var(--space-4); }
.shop-sidebar-cat-item--all a {
    display: flex; align-items: center; gap: var(--space-2);
    background: linear-gradient(135deg, var(--diary-accent), color-mix(in srgb, var(--diary-accent) 65%, #7c3aed));
    color: #fff; font-weight: var(--weight-bold); padding: 10px;
    border-radius: var(--radius-md); font-size: var(--text-sm); text-decoration: none;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--diary-accent) 35%, transparent);
}
.shop-sidebar-cat-item--all a:hover { color: #fff; opacity: 0.92; text-decoration: none; }
.shop-sidebar-cat-item--all .shop-sidebar-cat-all-icon { flex-shrink: 0; }
.shop-sidebar-cat-item--all a > span:not(.cnt) { flex: 1; min-width: 0; }
.shop-sidebar-cat-item--all .cnt {
    background: #fff; color: var(--diary-accent);
    padding: 2px var(--space-2); border-radius: var(--radius-full); font-weight: var(--weight-semi);
}

/* Paprastos eilutės – plokščias sąrašas su plonais skirtukais, ne kortelės/pilės */
.shop-sidebar-cat-item:not(.shop-sidebar-cat-item--all) { border-bottom: 1px solid var(--divider); }
.shop-sidebar-cat-item:not(.shop-sidebar-cat-item--all):last-child { border-bottom: none; }
.shop-sidebar-cat-item:not(.shop-sidebar-cat-item--all) > a,
.shop-sidebar-cat-item:not(.shop-sidebar-cat-item--all) > .shop-sidebar-cat-row > a {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) 0; color: var(--text-primary); text-decoration: none; font-size: var(--text-sm);
}
.shop-sidebar-cat-item:not(.shop-sidebar-cat-item--all) > a > span:first-child,
.shop-sidebar-cat-item:not(.shop-sidebar-cat-item--all) > .shop-sidebar-cat-row > a > span:first-child { flex: 1; min-width: 0; }
.shop-sidebar-cat-item:not(.shop-sidebar-cat-item--all) > a:hover,
.shop-sidebar-cat-item:not(.shop-sidebar-cat-item--all) > .shop-sidebar-cat-row > a:hover { color: var(--diary-accent); text-decoration: none; }
.shop-sidebar-cat-item .cnt { color: var(--text-muted); font-size: var(--text-xs); flex-shrink: 0; }

/* Nuoroda be pokategorijų – vien dekoratyvi rodyklė į dešinę, kad atrodytų nuosekliai su išsiskleidžiančiomis eilutėmis */
.shop-sidebar-cat-item:not(.has-children):not(.shop-sidebar-cat-item--all) .shop-sidebar-cat-row > a::after {
    content: ''; flex-shrink: 0; width: 16px; height: 16px;
    background-color: var(--text-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Kategorija su pokategorijomis – aktyvi/išskleista būsena paryškinama akcento spalva */
.shop-sidebar-cat-item.has-children.expanded > .shop-sidebar-cat-row > a { color: var(--diary-accent); font-weight: var(--weight-semi); }
.shop-sidebar-cat-item.has-children.expanded > .shop-sidebar-cat-row > a .cnt {
    background: color-mix(in srgb, var(--diary-accent) 15%, transparent); color: var(--diary-accent);
    padding: 2px var(--space-2); border-radius: var(--radius-full); font-weight: var(--weight-semi);
}

/* Mygtukas VISADA absoliučiai pozicionuotas viršum nuorodos (ne šalia jos flex eilutėje) – kitaip
   jis "atimtų" vietos iš <a>, ir skaičius/rodyklė eilutėse SU pokategorijomis atsidurtų arčiau
   kairės nei eilutėse BE jų (kur rodyklė – tik dekoratyvi ::after pati nuorodoje). Su absoliučia
   pozicija abi eilutės naudoja TĄ PATĮ dešinės pusės tarpą (žr. padding-right žemiau), tad skaičiai
   visada sulygiuoti vienoje vietoje, nepriklausomai nuo to, ar eilutė išskleidžiama. */
.shop-sidebar-cat-row { position: relative; }
.shop-sidebar-cat-row a { display: flex; align-items: center; gap: var(--space-2); }
.shop-sidebar-cat-item.has-children .shop-sidebar-cat-row a { padding-right: 25px; }
.shop-sidebar-cat-expand {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; border-radius: 50%;
    border: none; background: transparent; color: var(--text-muted);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s ease, color 0.15s ease;
}
.shop-sidebar-cat-expand:hover { color: var(--diary-accent); }
.shop-sidebar-cat-item.expanded .shop-sidebar-cat-expand { transform: translateY(-50%) rotate(-90deg); color: var(--diary-accent); }

/* Pokategorijos – švelniai paryškinta dėžutė su taškeliais/jungiančia linija (timeline stilius) */
.shop-sidebar-subcat-list {
    list-style: none; margin: var(--space-2) 0 var(--space-3); padding: 10px var(--space-4) 10px 30px;
    background: color-mix(in srgb, var(--diary-accent) 7%, var(--bg-card));
    border-radius: var(--radius-md);
    position: relative;
    display: none; flex-direction: column; gap: var(--space-2);
}
.shop-sidebar-cat-item.expanded .shop-sidebar-subcat-list { display: flex; }
.shop-sidebar-subcat-list::before {
    content: ''; position: absolute; left: 16px; top: 11px; bottom: 11px; width: 2px;
    background: color-mix(in srgb, var(--diary-accent) 25%, transparent);
}
.shop-sidebar-subcat-list li { position: relative; }
.shop-sidebar-subcat-list li::before {
    content: ''; position: absolute; left: -17px; top: 50%; transform: translateY(-50%);
    width: 7px; height: 7px; border-radius: 50%; background: var(--diary-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--diary-accent) 7%, var(--bg-card));
}
.shop-sidebar-subcat-list a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    padding: 2px 0; color: var(--text-primary); text-decoration: none; font-size: var(--text-sm);
}
.shop-sidebar-subcat-list a:hover { color: var(--diary-accent); text-decoration: none; }
.shop-sidebar-subcat-list a.active { color: var(--diary-accent); font-weight: var(--weight-semi); }
.shop-sidebar-subcat-list a .cnt { color: var(--text-muted); }
.shop-sidebar-subcat-list a.active .cnt { color: var(--diary-accent); }

.shop-range-filter { display: flex; flex-direction: column; gap: var(--space-3); }
.shop-price-filter-row { display: flex; align-items: center; gap: var(--space-2); }
.shop-price-filter-row input {
    width: 100%; min-width: 0; padding: var(--space-2); text-align: center;
    background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    color: var(--text-primary); font-size: var(--text-sm);
}
.shop-price-filter-sep { color: var(--text-muted); flex-shrink: 0; }
.shop-price-filter-btn { margin-top: var(--space-5); width: 100%; text-align: center; }
/* Paieškos rezultatų (shop/search.php) "Išvalyti filtrus" nuoroda po "Filtruoti" mygtuku –
   žr. kategorijų auditas 2026-09-15, TOP 10 #6. */
.shop-filters-clear { display: block; margin-top: var(--space-3); text-align: center; font-size: var(--text-sm); color: var(--text-muted); }
.shop-filters-clear:hover { color: var(--color-primary); }

h3.shop-filter-section-title { margin-top: var(--space-5); margin-bottom: 5px; }

/* Dvigubas slankiklis (min+max) – du sudėti range inputai, matomas tik jų "thumb", takelis
   po jais piešiamas atskirai (.shop-range-track / -fill), nes native range elementas neturi
   įtaisyto dviejų rankenėlių varianto. */
.shop-range-slider { position: relative; height: 32px; padding: 0 2px; cursor: pointer; }
.shop-range-track {
    position: absolute; top: 50%; left: 2px; right: 2px; height: 4px;
    background: var(--border-color); border-radius: var(--radius-full); transform: translateY(-50%);
    pointer-events: none;
}
.shop-range-track-fill {
    position: absolute; top: 0; height: 100%;
    background: var(--diary-accent); border-radius: var(--radius-full);
}
.shop-range-slider input[type="range"] {
    position: absolute; top: 50%; left: 0; width: 100%; margin: 0; transform: translateY(-50%);
    -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.shop-range-slider input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 4px; }
.shop-range-slider input[type="range"]::-moz-range-track { background: transparent; height: 4px; border: none; }
.shop-range-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; pointer-events: auto; cursor: pointer;
    width: 22px; height: 22px; border-radius: 50%; margin-top: -9px;
    background: var(--diary-accent); border: 2px solid var(--bg-card); box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.shop-range-slider input[type="range"]::-moz-range-thumb {
    pointer-events: auto; cursor: pointer; width: 22px; height: 22px; border-radius: 50%;
    background: var(--diary-accent); border: 2px solid var(--bg-card); box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.shop-facet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.shop-facet-item label {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
    color: var(--text-secondary); font-size: var(--text-sm); cursor: pointer;
}
.shop-facet-item label:hover { background: var(--bg-glass); color: var(--text-primary); }
.shop-facet-item input[type="checkbox"] { flex-shrink: 0; accent-color: var(--diary-accent); }
.shop-facet-item label span:first-of-type { flex: 1; }
.shop-facet-item .cnt { color: var(--text-muted); font-size: var(--text-xs); }
/* Gamintojo filtras (2026-10-07): varnelė filtruoja čia pat, pavadinimas – nuoroda į gamintojo puslapį kategorijoje */
.shop-facet-item--brand { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.shop-facet-item--brand:hover { background: var(--bg-glass); }
.shop-facet-item--brand .shop-facet-check, .shop-facet-item--brand .shop-facet-check:hover { display: flex; padding: var(--space-1); background: none; cursor: pointer; }
.shop-facet-brandlink { flex: 1; color: var(--text-secondary); text-decoration: none; }
.shop-facet-brandlink:hover { color: var(--diary-accent); text-decoration: underline; }
/* Paaiškinimas užvedus pelę (arba fokusavus) ant antraštės – be nuolat rodomo teksto */
.shop-has-tip { position: relative; width: fit-content; cursor: help; text-decoration: underline dotted var(--text-muted); text-underline-offset: 3px; outline: none; }
.shop-has-tip::after {
    content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 60; width: 230px; padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    color: var(--text-primary); font-size: var(--text-xs); font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; text-decoration: none; white-space: normal;
    opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none;
}
.shop-has-tip:hover::after, .shop-has-tip:focus::after { opacity: 1; visibility: visible; }
/* Gamintojo logotipas kategorijos stiliaus hero bloke (virš H1) */
.shop-cat-hero-text .shop-brand-head-logo, .shop-cat-title-row .shop-brand-head-logo { display: block; height: 48px; margin: 0 0 var(--space-3); }
.shop-facet-toggle {
    display: block; width: 100%; text-align: left; background: none; border: none;
    padding: var(--space-1) var(--space-2); margin-top: 2px; cursor: pointer;
    color: var(--diary-accent); font-size: var(--text-sm); font-weight: var(--weight-semi);
    font-family: inherit;
}
.shop-facet-toggle:hover { text-decoration: underline; }

.shop-recommend-box p { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; margin: 0 0 var(--space-3); }
.shop-recommend-box h3 { display: flex; align-items: center; gap: var(--space-2); }
.shop-recommend-box h3 .shop-icon-gift { display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: 0; }
.shop-recommend-pack-img-link { display: block; margin: 0 0 var(--space-3); }
.shop-recommend-pack-img { display: block; width: 140px; height: 140px; max-width: 100%; object-fit: cover; border-radius: var(--radius-md, 10px); margin: 0 auto; }
.shop-recommend-video-btn { display: block; width: 100%; text-align: center; font-size: var(--text-xs); line-height: 1.4; white-space: normal; }

/* ── Nauja produkto kortelė (v2) – skirtukas/širdutė/laipteliai ── */
.shop-grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--space-4);
}
.shop-product-card2 {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    overflow: hidden; display: flex; flex-direction: column;
    transition: border-color var(--transition-base), transform var(--transition-base);
}
.shop-product-card2:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.shop-product-card2--oos { opacity: 0.6; }
.shop-product-card2-media {
    /* padding-top:100% ("padding hack") vietoj aspect-ratio:1/1 – pastarasis nepatikimai
       skaičiuodavo aukštį šiam elementui (flex stulpelio elementas su realiu <a> žymeniu),
       stačiakampėms nuotraukoms duodavo skirtingą kortelės aukštį priklausomai nuo
       nuotraukos proporcijos, nors plotis visada buvo tas pats – dėl to tinklelis
       atrodydavo netvarkingai (kortelės nevienodo dydžio). Padding hack šio nepriklauso
       nuo turinio, visada tiksliai kvadratinis. */
    position: relative; display: block; width: 100%; padding-top: 100%; height: 0;
    background: var(--bg-glass); text-decoration: none;
}
.shop-product-card2-media:hover { text-decoration: none; }
.shop-product-card2-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.shop-product-card2-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; }
.shop-wishlist-btn {
    position: absolute; top: var(--space-2); right: var(--space-2); z-index: 1;
    width: 30px; height: 30px; border-radius: var(--radius-full);
    background: rgba(255,255,255,0.85); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #64748b;
}
/* Norų sąrašo ikona headeryje + skaitiklis (kaip krepšelio ženkliukas) */
.shop-wishlist-link { position: relative; display: inline-flex; align-items: center; text-decoration: none; padding: var(--space-2); color: var(--text-primary); }
.shop-wishlist-link:hover { text-decoration: none; color: #f472b6; }
.shop-wishlist-badge {
    position: absolute; top: -2px; right: -2px;
    background: #f472b6; color: #000;
    font-size: 0.65rem; font-weight: var(--weight-bold);
    min-width: 16px; height: 16px; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.shop-wishlist-badge[hidden], #shop-wishlist-grid[hidden], #shop-wishlist-empty[hidden] { display: none; }
/* Širdutė produkto puslapyje – dešiniame viršutiniame pagrindinės nuotraukos kampe (kaip kortelėse, tik didesnė).
   Rėmelis .shop-product-gallery-frame suteikia position:relative; paspaudimas ant širdutės nepasiekia nuotraukos (lightbox). */
.shop-product-gallery-frame { position: relative; }
.shop-wishlist-btn--product { width: 40px; height: 40px; top: var(--space-3); right: var(--space-3); box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.shop-wishlist-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shop-wishlist-btn[aria-pressed="true"] { color: #f472b6; }
.shop-wishlist-btn[aria-pressed="true"] svg { fill: currentColor; }

.shop-product-card2-body { padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
/* Pavadinimas apkarpomas iki 2 eilučių (su "...") IR rezervuoja tą patį aukštį net kai
   pats tekstas trumpesnis (line-height*2) – kitaip skirtingo ilgio pavadinimai (ypač
   ilgi, pvz. "GURZA METHOD HAIR RIG (L: 9 сm/ 25lb) BOILIE SCREW...") darydavo kiekvieną
   eilutę/kortelę skirtingo aukščio, ir visas tinklelis atrodydavo netvarkingai. */
.shop-product-card2-name {
    font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary);
    text-decoration: none; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: calc(1.4em * 2);
}
.shop-product-card2-name:hover { text-decoration: none; }
.shop-product-card2-meta { min-height: calc(1.5em * 2); }
.shop-product-card2-variants { font-size: var(--text-xs); color: var(--color-primary); margin: 0; font-weight: var(--weight-medium); }
.shop-product-card2-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); min-height: 45px; }
/* Pristatymo+sandėlio eilutė kortelėje (renderProductCard() $options['showMeta'], 2026-09-16) */
.shop-product-card2-meta-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.shop-product-card2-delivery {
    display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--text-muted);
    background: var(--bg-glass); border-radius: var(--radius-full); padding: 3px var(--space-2); white-space: nowrap;
}
.shop-product-card2-stock { font-size: var(--text-xs); font-weight: var(--weight-semi); white-space: nowrap; }
.shop-product-card2-stock.is-in { color: var(--color-green); }
.shop-product-card2-stock.is-out { color: var(--color-red, #e5484d); }
.shop-product-card2-price { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--text-primary); }
.shop-product-card2-view { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); }

.shop-qty-add-form { display: flex; align-items: center; gap: var(--space-2); }
.shop-qty-stepper { display: flex; align-items: center; gap: 2px; background: var(--bg-glass); border-radius: var(--radius-sm); }
.shop-qty-step {
    width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
    background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: var(--text-sm);
}
.shop-qty-step:hover { color: var(--text-primary); }
/* Specifiškesnis nei ".shop-form-row input" (kuris uždeda width:100%/padding:12px kiekvienam
   <input> šioje sekcijoje) – be šito šis kiekio laukas išsipučia iki ~49x45px vietoj kompaktiško
   žingsniklio, ypač pastebima variantų sąrašo eilutėse (product.php), kur jų daug iš eilės. */
.shop-qty-stepper .shop-qty-stepper-input {
    width: 26px; text-align: center; border: none; background: none; color: var(--text-primary);
    font-size: var(--text-xs); padding: 0;
}
.shop-cart-add-btn {
    width: 30px; height: 30px; border-radius: var(--radius-sm); flex-shrink: 0;
    background: var(--diary-accent); color: #fff; border: none; cursor: pointer; font-size: var(--text-sm);
    display: flex; align-items: center; justify-content: center;
}
.shop-cart-add-btn:hover { opacity: 0.85; }

/* Spalvos/dydžio miniatiūrų juostelė (bandomasis rodinys, kol kas tik "Silikoniniai
   masalai" kategorijai) – žr. product-card.php shopVariantSwatchLabel() ir shop.js
   swatch handlerį. */
.shop-swatch-label {
    font-size: var(--text-xs); color: var(--text-secondary); font-weight: var(--weight-medium);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    padding: 2px var(--space-2); width: fit-content; max-width: 100%; box-sizing: border-box;
    /* Kai shopVariantSwatchLabel() nepavyksta trumpai ištraukti (netikėtas pavadinimo
       šablonas), žymė gali likti ilga – apkerpama iki 2 eilučių, kad kortelės aukštis
       nepasikeistų kaip ir kitose kortelėse. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.shop-swatch-strip-wrap { display: flex; align-items: center; gap: 2px; }
/* [hidden] turi TĄ PAČIĄ specifiškumą kaip aukščiau esanti .shop-swatch-strip-wrap klasė, tad
   pagal cascade tvarką (autoriaus stilius visada nugali UA numatytąjį [hidden]{display:none})
   "display:flex" laimėtų prieš hidden atributą – juostelė BŪTŲ toliau matoma, net kai PHP jai
   nustato hidden (žr. product.php/product-card.php $hideSwatchStrip/$hideCardSwatchStrip
   komentarus). Rasta 2026-09-05 gyvai testuojant ("Maximus Bream Master" kortelė). */
.shop-swatch-strip-wrap[hidden] { display: none !important; }
.shop-swatch-strip {
    display: flex; gap: var(--space-2); overflow-x: auto; scroll-behavior: smooth;
    padding: 2px; scrollbar-width: none;
}
/* Ta pati [hidden]-vs-display:flex specifiškumo kolizija kaip .shop-swatch-strip-wrap
   aukščiau – šis naudojamas product.php #shop-swatch-strip juostelei. */
.shop-swatch-strip[hidden] { display: none !important; }
.shop-swatch-strip::-webkit-scrollbar { display: none; }
.shop-swatch-thumb {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-sm);
    /* 1.5px, ne 2px (vartotojo prašymu 2026-09-02 – rėmelis per stipriai krito į akis,
       ta pati korekcija kaip .shop-size-pill.is-active žemiau). */
    border: 1.5px solid var(--border-color); background: var(--bg-glass); cursor: pointer;
    padding: 2px; display: flex; align-items: center; justify-content: center;
}
.shop-swatch-thumb img { width: 100%; height: 100%; object-fit: contain; }
.shop-swatch-thumb.is-active { border-color: var(--diary-accent); }
/* BŪTINA – žr. analogišką komentarą prie .shop-variant-card[hidden] aukščiau: šis elementas
   irgi turi savo "display", kuris nugalėtų naršyklės numatytąjį [hidden]{display:none}. Be
   šios eilutės dydžio pilai (product-card.php $hasSwatchSizeFilter) juostelėje TIK pažymėdavo
   [hidden] atributą, bet visos miniatiūros likdavo vizualiai matomos – dėl to atrodydavo, kad
   kortelė "sudreba" (staiga pasikeičia pagrindinė nuotrauka/kaina, bet apačioje esanti
   miniatiūrų juostelė nepasikeisdavo, sukurdama vizualų neatitikimą). */
.shop-swatch-thumb[hidden] { display: none; }
.shop-swatch-arrow {
    flex-shrink: 0; width: 20px; height: 40px; display: flex; align-items: center; justify-content: center;
    background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: var(--text-lg);
}
/* Ta pati būtina taisyklė kaip .shop-swatch-thumb[hidden]/.shop-variant-card[hidden] aukščiau –
   šis elementas irgi turi savo "display", kuris nugalėtų [hidden]{display:none}. Be jos
   "‹"/"›" rodyklės likdavo matomos net kai JS jas pažymėdavo kaip paslėptas (spalvos
   juostelės kairė rodyklė pradžioje, dydžio juostelės abi rodyklės, kai netelpa). */
.shop-swatch-arrow[hidden] { display: none; }
.shop-swatch-arrow:hover { color: var(--text-primary); }
.shop-swatch-pack-qty { font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--text-muted); }

/* Dydžio pasirinkimo mygtukai produkto puslapyje (bandomasis rodinys, žr. product.php
   $hasSizeFilter) – ta pati vizuali kalba kaip spalvos miniatiūros (aktyvaus akcentinė
   spalva), bet tekstiniai pilai, ne nuotraukos. */
.shop-size-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.shop-size-pill {
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
    border: 1px solid var(--border-color); background: var(--bg-glass); color: var(--text-secondary);
    font-size: var(--text-sm); cursor: pointer;
    /* Fonas NIEKADA nesikeičia (nei hover, nei pasirinkus) – tik rėmelis sustorėja ir
       pasikeičia spalva, vartotojo prašymu (2026-09-02): "fonas nesikeičia". */
    transition: border-color var(--transition-fast, 0.15s), border-width var(--transition-fast, 0.15s);
}
.shop-size-pill:hover { border-color: var(--diary-accent); color: var(--text-primary); }
.shop-size-pill.is-active {
    /* border-width nuo 1px iki 1.5px (ne 2px, vartotojo prašymu 2026-09-02 – 2px per
       stipriai krito į akis) – kompensuojame padding'ą per tiek pat, kad mygtuko
       išorinis dydis (ir kaimyninių elementų išsidėstymas) nepasislinktų. */
    border-color: var(--diary-accent); border-width: 1.5px; color: var(--text-primary);
    padding: calc(var(--space-2) - 0.5px) calc(var(--space-4) - 0.5px);
}
/* Kortelėje (kategorijos tinklelyje) dydžiai lygiuojami iš kairės (vartotojo prašymu
   2026-09-02, pakeista nuo pradinio centravimo), ir jei jų daugiau nei telpa – juostelė
   slenka (ne persikelia į naują eilutę), su tomis pačiomis rodyklėmis kaip spalvos
   miniatiūrų juostelė. */
.shop-size-pills--sm {
    flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
    gap: 4px; margin-bottom: var(--space-1); justify-content: flex-start; flex: 1 1 auto;
}
.shop-size-pills--sm::-webkit-scrollbar { display: none; }
.shop-size-pills--sm .shop-size-pill { flex: 0 0 auto; padding: 5px var(--space-2); font-size: 11px; }
.shop-size-pills--sm .shop-size-pill.is-active { padding: 4.5px calc(var(--space-2) - 0.5px); }
.shop-swatch-strip-wrap--sizes { margin-bottom: var(--space-1); }
.shop-swatch-strip-wrap--sizes .shop-swatch-arrow { height: 24px; }

/* Spalvos miniatiūrų juostelė PATIES PRODUKTO puslapyje (product.php $hasPageSwatch) – ta
   pati juostelė kaip kortelėje, tik didesnės miniatiūros (--lg), nes čia daugiau vietos ir
   tai pagrindinis pasirinkimo elementas, ne kortelės priedas. Vartotojo pateiktas konkurento
   ekrano nuotrauka (2026-09-02) buvo pavyzdys šiam išdėstymui. */
.shop-swatch-thumb--lg { width: 72px; height: 72px; }
@media (max-width: 480px) {
    .shop-swatch-thumb--lg { width: 60px; height: 60px; }
}
/* Puslapio dydžio juostelė NESLENKA horizontaliai (skirtingai nuo kompaktiškos kortelės
   versijos aukščiau) – vartotojo prašymu 2026-09-02 ("variantus padaryk kad juos neskrolin
   o flex box turbut geriau"), nes čia daug daugiau vietos negu siauroje kortelėje, tad visos
   miniatiūros tiesiog laužiasi į kitą eilutę (flex-wrap), be jokių rodyklių/scroll'o. */
.shop-swatch-strip--lg { flex-wrap: wrap; overflow-x: visible; }

/* "+N" perpildymo mygtukas – rodomas juostelės pabaigoje, kai spalvų daugiau nei
   SWATCH_VISIBLE_LIMIT (15, žr. product.php/shop.js), kad juostelė neišsipūstų per daug
   prieš aprašymą (vartotojo pateiktas mockupas 2026-09-02). Paspaudus – parodomos visos. */
.shop-swatch-more {
    flex: 0 0 auto; width: 72px; height: 72px; border-radius: var(--radius-sm);
    border: 1.5px dashed var(--border-color); background: var(--bg-glass); cursor: pointer;
    color: var(--text-secondary); font-weight: var(--weight-semi); font-size: var(--text-sm);
    display: flex; align-items: center; justify-content: center;
}
.shop-swatch-more:hover { border-color: var(--diary-accent); color: var(--diary-accent); }
/* BŪTINA – ta pati [hidden] specifiškumo taisyklė kaip kitur šiame faile: šis elementas
   turi savo "display", kuris nugalėtų naršyklės numatytąjį [hidden]{display:none}. */
.shop-swatch-more[hidden] { display: none; }
@media (max-width: 480px) {
    .shop-swatch-more { width: 60px; height: 60px; }
}

/* Kainos + kiekio + "Į krepšelį" dėžutė po spalvos juostele – pakeičia ankstesnį
   "Galimi variantai" kortelių tinklelį šiam bandomajam rodiniui (žr. product.php
   $hasPageSwatch). Viena paryškinta dėžutė (fonas/rėmelis kaip kitos akcentinės dėžutės
   šiame faile, pvz. .diary-lake-stats-row analogas), kaina kairėje, pirkimo valdikliai
   dešinėje – ta pati dviejų-pusių eilutė kaip vartotojo pateiktame pavyzdyje, be
   norų sąrašo širdutės (vartotojo prašymu, "širdutės nereikia"). */
.shop-product-buybox {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    background: var(--bg-glass); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    padding: var(--space-4); margin-top: 10px; margin-bottom: 10px; margin-left: auto; flex-wrap: wrap;
    /* Dešinioji produkto puslapio kolona pločio neriboja (grid-template-columns: minmax(0,420px)
       1fr, žr. .shop-product-layout) – be max-width šis flex konteineris su space-between
       ištemptų kainą ir pirkimo formą į priešingus PLAČIO ekrano kraštus, sukurdamas didelį
       tuščią tarpą tarp jų (atrodo, lyg mygtuko iš viso nebūtų). margin-left:auto stumia pačią
       dėžutę (max-width ribotą) į DEŠINĘ kolonos pusę – vartotojo prašymu 2026-09-05. */
    max-width: 480px;
}
.shop-product-buybox-price { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--text-primary); }
.shop-product-buybox-form { display: flex; align-items: center; gap: var(--space-3); }
.shop-product-buybox-form .shop-qty-stepper { height: 40px; }
.shop-product-buybox-form .shop-qty-step { width: 32px; height: 40px; font-size: var(--text-base); }
.shop-product-buybox-form .shop-qty-stepper-input { width: 34px; font-size: var(--text-sm); }
.shop-product-buybox-btn { padding: var(--space-3) var(--space-6); font-size: var(--text-base); }
/* BŪTINA – ta pati [hidden]-vs-display:flex specifiškumo kolizija kaip .shop-swatch-strip-wrap/
   .shop-swatch-strip aukščiau (žr. jų komentarą): .shop-product-buybox-form JAU turi savo
   "display:flex" (aukščiau), kuris nugali naršyklės numatytąjį [hidden]{display:none} –
   be šios eilutės "Į krepšelį" forma likdavo VIZUALIAI matoma net kai JS/PHP pažymėdavo ją
   [hidden] (rasta 2026-09-09, "Pilna Salmo stiliaus sprendimas" – produktas rodydavo IR
   pirkimo formą, IR "praneškite man" formą vienu metu). */
.shop-product-buybox-form[hidden] { display: none !important; }
@media (max-width: 480px) {
    .shop-product-buybox { flex-direction: column; align-items: stretch; margin-left: 0; max-width: none; }
    .shop-product-buybox-form { justify-content: space-between; }
    .shop-product-stock-row { justify-content: flex-start; }
}

/* Išparduotos miniatiūros/pilų perbraukimas ("Pilna Salmo stiliaus sprendimas", 2026-09-09) –
   rodoma, bet aiškiai pažymėta kaip neįsigyjama (perbraukta įstrižai + pritemdyta), o ne
   visai paslėpta – žr. product.php $sizeHasStock/(int)$v['stock']<=0 komentarus. Naudoja tą
   patį --color-red kaip .shop-variant-card-oos aukščiau, kad išparduotumo žymėjimas atrodytų
   vienodai visame puslapyje. */
.shop-swatch-thumb.is-soldout,
.shop-size-pill.is-soldout {
    opacity: .5; position: relative;
}
.shop-swatch-thumb.is-soldout::after,
.shop-size-pill.is-soldout::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(to top right,
        transparent calc(50% - 1px), var(--color-red, #e5484d) calc(50% - 1px),
        var(--color-red, #e5484d) calc(50% + 1px), transparent calc(50% + 1px));
}
.shop-size-pill.is-soldout:hover { border-color: var(--border-color); color: var(--text-secondary); }

/* "Praneškite man, kai atsiras" forma – rodoma vietoj "Į krepšelį", kai pasirinktas
   variantas (arba visas produktas) išparduotas. Dvi atmainos: --buybox (po pilna kaina/
   pirkimo dėžute) ir --inline (kompaktiška, kiekvienoje "Galimi variantai" kortelėje). */
.shop-notify-form { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.shop-notify-form[hidden] { display: none; }
.shop-notify-lead { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.shop-notify-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.shop-notify-email {
    flex: 1 1 200px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
    border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary);
    font-size: var(--text-sm); font-family: inherit;
}
.shop-notify-submit { flex-shrink: 0; white-space: nowrap; }
/* Honeypot – realiems lankytojams nematomas (CSS paslėptas), botai jį dažnai užpildo. */
.shop-notify-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.shop-notify-msg { font-size: var(--text-xs); min-height: 1em; }
.shop-notify-msg.is-ok { color: var(--color-green, #2e9e5b); }
.shop-notify-msg.is-error { color: var(--color-red, #e5484d); }

.shop-notify-form--inline {
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-2); width: auto;
}
.shop-notify-form--inline .shop-notify-email { flex: 1 1 140px; padding: 5px var(--space-2); font-size: var(--text-xs); }
.shop-notify-form--inline .shop-notify-submit { padding: 5px var(--space-3); font-size: var(--text-xs); }
.shop-notify-form--inline .shop-notify-msg { flex-basis: 100%; }

/* Foterio soc. tinklų mygtukai */
.shop-footer-social { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.shop-social-btn {
    width: 34px; height: 34px; border-radius: var(--radius-full);
    background: var(--diary-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: opacity var(--transition-fast);
}
.shop-social-btn:hover { opacity: 0.85; }

@media (max-width: 860px) {
    .shop-sidebar-toggle { display: flex; }
    .shop-sidebar { display: none; margin-top: var(--space-4); grid-row: auto; }
    .shop-sidebar.shop-sidebar--open { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════
   Krepšelio šoninis langas (drawer) – shop.js sukuria dinamiškai,
   atsidaro paspaudus "Į krepšelį" bet kuriame puslapyje.
═══════════════════════════════════════════════════════════════ */
.shop-cart-drawer-backdrop {
    position: fixed; inset: 0; z-index: 4000;
    background: rgba(0, 0, 0, 0.5);
}
.shop-cart-drawer-backdrop[hidden] { display: none; }
.shop-cart-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 4001;
    width: 380px; max-width: 90vw;
    /* SOLIDUS fonas – ta pati 2026-09-24 pataisa kaip .shop-nav-dropdown-panel aukščiau
       (visą aukštį dengiantis šoninis langas, permatomas fonas leisdavo prasišviesti
       produktų nuotraukoms/tekstui po juo). */
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.25);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transition-fast, 0.25s ease);
}
.shop-cart-drawer[hidden] { display: none; }
.shop-cart-drawer.is-open { transform: translateX(0); }
.shop-cart-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-5); border-bottom: 1px solid var(--divider);
}
.shop-cart-drawer-head h2 { margin: 0; font-size: var(--text-lg); color: var(--text-primary); }
.shop-cart-drawer-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--weight-semi);
}
.shop-cart-drawer-close:hover { color: var(--text-primary); }
.shop-cart-drawer-items { flex: 1; overflow-y: auto; padding: 0 var(--space-5); }
.shop-cart-drawer-empty { color: var(--text-muted); padding: var(--space-6) 0; text-align: center; }
.shop-cart-drawer-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4) 0; border-bottom: 1px solid var(--divider);
}
.shop-cart-drawer-item img,
.shop-cart-drawer-item-noimg {
    width: 56px; height: 56px; border-radius: var(--radius-md);
    border: 1px solid var(--border-color); object-fit: cover; flex-shrink: 0;
}
.shop-cart-drawer-item-noimg { display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: var(--bg-primary); }
.shop-cart-drawer-item-info { min-width: 0; flex: 1; }
.shop-cart-drawer-item-info a {
    color: var(--text-primary); text-decoration: none; font-weight: var(--weight-medium); font-size: var(--text-sm);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.shop-cart-drawer-item-info a:hover { color: var(--diary-accent); }
.shop-cart-drawer-item-row { color: var(--text-muted); font-size: var(--text-xs); margin-top: var(--space-2); display: flex; align-items: center; gap: var(--space-2); }
.shop-cart-drawer-item-qty-value { min-width: 16px; text-align: center; font-size: var(--text-xs); color: var(--text-primary); }
.shop-cart-drawer-item-remove {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: var(--text-sm); line-height: 1;
    padding: var(--space-1); flex-shrink: 0; align-self: flex-start;
}
.shop-cart-drawer-item-remove:hover { color: var(--color-red, #e5484d); }
.shop-cart-drawer-foot {
    padding: var(--space-5); border-top: 1px solid var(--divider);
    display: flex; flex-direction: column; gap: var(--space-2);
}
.shop-cart-drawer-total {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: var(--text-base); color: var(--text-primary); margin-bottom: var(--space-2);
}
.shop-cart-drawer-total strong { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--diary-accent); }
.shop-cart-drawer-foot .shop-btn { text-align: center; }
@media (max-width: 480px) {
    .shop-cart-drawer { width: 100vw; max-width: 100vw; }
}

/* ── Parduotuvės "Šiandienos patarimai" (shop/assets/shop-tips.js) ── */
.shop-tips { margin: var(--space-10) 0; padding: var(--space-5); background: var(--bg-glass); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.shop-tips[hidden] { display: none; }
.shop-tips-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-4); }
.shop-tips-title-wrap { display: flex; align-items: center; gap: var(--space-3); margin-right: auto; }
.shop-tips-icon { font-size: 2rem; line-height: 1; }
.shop-tips-head h2 { margin: 0; font-size: var(--text-xl); color: var(--text-primary); }
.shop-tips-head p { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.shop-tips-weather { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.shop-tips-chip { padding: var(--space-1) var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-full); font-size: var(--text-sm); color: var(--text-primary); background: var(--bg-glass); white-space: nowrap; }
.shop-tips-chip--place { font-weight: var(--weight-semi); color: var(--color-primary); }
.shop-tips-more { padding: var(--space-2) var(--space-4); border: 1px solid var(--color-primary); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--color-primary); text-decoration: none; white-space: nowrap; }
.shop-tips-more:hover { background: var(--color-primary); color: #fff; }
.shop-tips-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.shop-tips-card { position: relative; overflow: hidden; display: flex; border: 1px solid var(--border-color); border-radius: var(--radius-lg); min-height: 210px; background: var(--bg-glass); }
.shop-tips-card--white { background: linear-gradient(120deg, rgba(56,189,248,.14), rgba(56,189,248,.03)); }
.shop-tips-card--pred  { background: linear-gradient(120deg, rgba(251,146,60,.16), rgba(251,146,60,.03)); }
.shop-tips-fish { position: absolute; left: -8px; bottom: 8px; width: 140px; height: auto; opacity: .55; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent); }
.shop-tips-body { position: relative; flex: 1; padding: var(--space-4) var(--space-5) var(--space-4) 150px; display: flex; flex-direction: column; gap: var(--space-2); }
.shop-tips-body h3 { margin: 0; font-size: var(--text-lg); }
.shop-tips-card--white h3 { color: var(--color-primary); }
.shop-tips-card--pred h3 { color: var(--color-orange); }
.shop-tips-species-list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.shop-tips-species { padding: 2px var(--space-3); font-size: var(--text-xs); border-radius: var(--radius-full); background: rgba(127,127,127,.12); color: var(--text-secondary); }
.shop-tips-rows { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); color: var(--text-secondary); }
.shop-tips-rows strong { color: var(--text-primary); font-weight: var(--weight-semi); }
.shop-tips-now { font-style: normal; font-size: var(--text-xs); color: #16a34a; font-weight: var(--weight-semi); white-space: nowrap; }
.shop-tips-actions { margin-top: auto; padding-top: var(--space-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.shop-tips-btn { display: inline-block; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); color: #fff; font-weight: var(--weight-semi); font-size: var(--text-sm); text-decoration: none; }
.shop-tips-card--white .shop-tips-btn { background: var(--color-primary); }
.shop-tips-card--pred .shop-tips-btn { background: var(--color-orange); }
.shop-tips-btn:hover { filter: brightness(1.08); }
.shop-tips-link { font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none; }
.shop-tips-link:hover { color: var(--text-primary); text-decoration: underline; }
@media (max-width: 860px) {
    .shop-tips-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .shop-tips { padding: var(--space-4); }
    .shop-tips-fish { width: 110px; opacity: .3; }
    .shop-tips-body { padding: var(--space-4); }
    .shop-tips-more { order: 3; }
}
/* Tikra žuvies nuotrauka (permatomu fonu) – didesnė, užima kortelės kairę pusę */
.shop-tips-fish--photo { left: 0; top: 0; bottom: auto; width: auto; height: 100%; max-width: 62%; object-fit: cover; object-position: left center; opacity: 1; -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent); mask-image: linear-gradient(90deg, #000 60%, transparent); }
.shop-tips-card--pred .shop-tips-body { padding-left: 260px; }
@media (max-width: 860px) { .shop-tips-card--pred .shop-tips-body { padding-left: 200px; } }
@media (max-width: 520px) {
    .shop-tips-fish--photo { opacity: .35; max-width: 100%; }
    .shop-tips-card--pred .shop-tips-body { padding-left: var(--space-4); }
}
/* Nuotrauka neužeina po tekstu: fiksuotas plotis = kortelės kairysis laukas, apkarpoma aplink žuvies galvą */
.shop-tips-fish--photo { width: 250px; max-width: none; object-position: 62% center; -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
@media (max-width: 860px) { .shop-tips-fish--photo { width: 190px; } }
@media (max-width: 520px) { .shop-tips-fish--photo { width: 100%; max-width: 100%; opacity: .3; object-position: center; } }
/* Baltų žuvų kortelė: ta pati nuotraukos schema; karšio galva dešinėje, todėl kraštas nuplaunamas tik švelniai */
.shop-tips-card--white .shop-tips-body { padding-left: 260px; }
.shop-tips-card--white .shop-tips-fish--photo { object-position: 70% center; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
@media (max-width: 860px) { .shop-tips-card--white .shop-tips-body { padding-left: 200px; } }
@media (max-width: 520px) {
    .shop-tips-card--white .shop-tips-body { padding-left: var(--space-4); }
    .shop-tips-card--white .shop-tips-fish--photo { object-position: center; -webkit-mask-image: none; mask-image: none; }
}
/* Telefonas: nuotrauka – juosta kortelės viršuje (ne po tekstu), tekstas lieka ant švaraus fono */
@media (max-width: 520px) {
    .shop-tips-card { flex-direction: column; min-height: 0; }
    .shop-tips-card .shop-tips-fish--photo {
        position: relative; left: auto; top: auto; width: 100%; max-width: 100%; height: 130px;
        opacity: 1; object-fit: cover; object-position: center 35%;
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent);
    }
    .shop-tips-card .shop-tips-body { padding: var(--space-3) var(--space-4) var(--space-4); }
}
@media (max-width: 520px) {
    .shop-tips-card--white .shop-tips-fish--photo { object-position: 85% 66%; }
    .shop-tips-card--pred  .shop-tips-fish--photo { object-position: 45% 72%; }
}

/* 404 puslapis parduotuvėje (shop/includes/not-found.php) */
.shop-notfound { max-width: 560px; margin: 0 auto; padding: var(--space-16) 0; text-align: center; }
.shop-notfound-emoji { display: block; font-size: 4rem; margin-bottom: var(--space-4); }
.shop-notfound-code { font-size: var(--text-sm); font-weight: var(--weight-semi); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-3); }
.shop-notfound h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: 1.25; color: var(--text-primary); margin-bottom: var(--space-4); }
.shop-notfound p { color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--space-8); }
.shop-notfound-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.shop-notfound-actions .shop-btn { min-width: 200px; text-align: center; padding: var(--space-3) var(--space-5); }
@media (max-width: 600px) { .shop-notfound h1 { font-size: var(--text-2xl); } .shop-notfound { padding: var(--space-10) 0; } }

/* Kategorijos hero – mobiliajame 3 pliusai ANT nuotraukos (SEO/UX auditas 2026-10-02) */
.shop-cat-hero-badges-onimg { display: none; }
@media (max-width: 860px) {
    .shop-cat-hero-text .shop-cat-hero-badges { display: none; }
    /* flex-basis:460px iš bazinės taisyklės stulpeliniame (mobiliajame) išdėstyme tampa 460px AUKŠČIU – be šio perrašymo tekstas turėjo ~250px tuščios vietos */
    .shop-cat-hero-text { flex: 0 0 auto; }
    .shop-cat-hero-media { flex-basis: 190px; height: 190px; }
    .shop-cat-hero-badges-onimg {
        display: flex; flex-direction: column; gap: 4px;
        position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
        margin: 0; padding: var(--space-8) var(--space-4) var(--space-3);
        list-style: none;
        background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.72) 100%);
        color: #fff; font-size: var(--text-sm); font-weight: var(--weight-semi);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }
    .shop-cat-hero-badges-onimg li { display: flex; align-items: center; gap: var(--space-2); }
    .shop-cat-hero-badges-onimg li span { width: 1.4em; text-align: center; flex-shrink: 0; }
}

/* Poskyrių juosta virš produktų (shop/category.php) */
.shop-subcat-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); }
.shop-subcat-pill {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-full, 999px);
    color: var(--text-primary); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none;
    white-space: nowrap;
}
.shop-subcat-pill:hover { border-color: var(--diary-accent); color: var(--diary-accent); text-decoration: none; }
.shop-subcat-pill .cnt { color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-regular, 400); }
@media (max-width: 860px) {
    /* mobiliajame – viena slenkama eilutė, kad nepailgintų puslapio */
    .shop-subcat-strip { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: var(--space-1); }
    .shop-subcat-strip::-webkit-scrollbar { display: none; }
    .shop-subcat-pill { flex: 0 0 auto; }
}

/* Prekės ženklo puslapis (shop/brendas.php) */
.shop-brand-head { display: flex; align-items: center; gap: var(--space-5); }
.shop-brand-head-logo { height: 64px; width: auto; max-width: 160px; object-fit: contain; background: #fff; border-radius: var(--radius-md, 8px); padding: var(--space-2); flex-shrink: 0; }
.shop-subcat-pill.is-active { border-color: var(--diary-accent); color: var(--diary-accent); }
.shop-subcat-strip--sub .shop-subcat-pill { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); }
@media (max-width: 560px) {
    .shop-brand-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

/* Populiariausi prekių ženklai (shop/index.php) – baltos kortelės su vienodo dydžio logotipais */
.shop-brand-carousel { margin-top: var(--space-12); }
.shop-brand-carousel-title { font-size: var(--text-xl); font-weight: var(--weight-semi); color: var(--text-primary); margin: 0 0 var(--space-5); }
.shop-brand-carousel-wrap { position: relative; }
.shop-brand-carousel-track { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: var(--space-1); }
.shop-brand-carousel-track::-webkit-scrollbar { display: none; }
.shop-brand-card {
    flex: 0 0 auto; width: 160px; height: 76px; display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4); scroll-snap-align: start; transition: border-color .15s, box-shadow .15s;
}
.shop-brand-card:hover { border-color: var(--diary-accent); box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,.12)); }
.shop-brand-card img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.shop-brand-carousel-wrap .shop-carousel-arrow { top: 50%; }
@media (max-width: 600px) { .shop-brand-card { width: 132px; height: 64px; } }
/* Nuorodos į gamintojo puslapį produkto puslapyje */
.shop-product-brand-link { display: inline-block; line-height: 0; }
.shop-product-brand-link .shop-product-brand-text { line-height: 1.4; }
/* Prekių ženklų sąrašas (shop/brendai.php) */
.shop-brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.shop-brand-card--grid { width: auto; height: 96px; }
.shop-brand-card-name { color: #14304a; font-weight: var(--weight-semi); font-size: var(--text-base); text-align: center; }
@media (max-width: 600px) { .shop-brand-grid { grid-template-columns: repeat(2, 1fr); } .shop-brand-card--grid { height: 80px; } }
.shop-brand-carousel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin: 0 0 var(--space-5); }
.shop-brand-carousel-head .shop-brand-carousel-title { margin: 0; }
.shop-brand-carousel-all { font-size: var(--text-sm); color: var(--diary-accent); text-decoration: none; white-space: nowrap; }
.shop-brand-carousel-all:hover { text-decoration: underline; }

/* ── Rich-text aprašymas (HTML iš admin redaktoriaus, 2026-10-08) ── */
.shop-desc-html { overflow-x: auto; }
.shop-desc-html h2 { font-size: var(--text-xl); margin: var(--space-5) 0 var(--space-3); color: var(--text-primary); }
.shop-desc-html h3 { font-size: var(--text-lg); margin: var(--space-4) 0 var(--space-2); color: var(--text-primary); }
.shop-desc-html h4 { font-size: var(--text-base); margin: var(--space-4) 0 var(--space-2); color: var(--text-primary); }
.shop-desc-html h2:first-child, .shop-desc-html h3:first-child, .shop-desc-html h4:first-child { margin-top: 0; }
.shop-desc-html ul, .shop-desc-html ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.shop-desc-html ul { list-style: disc; }
.shop-desc-html ol { list-style: decimal; }
.shop-desc-html li { margin-bottom: var(--space-1); }
.shop-desc-html table { border-collapse: collapse; max-width: 100%; margin: 0 0 var(--space-4); }
.shop-desc-html th, .shop-desc-html td { border: 1px solid var(--border-color); padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }
.shop-desc-html th { background: var(--bg-glass, rgba(0,0,0,0.04)); color: var(--text-primary); }
.shop-desc-html img { max-width: 100%; height: auto; border-radius: var(--radius-md, 8px); }
.shop-desc-html a { color: var(--diary-accent); text-decoration: underline; }
.shop-desc-html blockquote { margin: 0 0 var(--space-4); padding-left: var(--space-4); border-left: 3px solid var(--border-color); }

/* ── Aprašymo "kortelių" blokai (rinkiniams ir pan.; naudojami per class HTML aprašyme, 2026-10-08) ── */
.shop-desc-html .desc-lead { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.7; margin: 0 0 var(--space-4); }
.shop-desc-html .desc-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); }
.shop-desc-html .desc-chip {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    color: var(--text-primary); border-radius: 999px; padding: 6px 12px;
    font-size: var(--text-sm); font-weight: var(--weight-semi); line-height: 1.3;
}
.shop-desc-html .desc-card { border: 1px solid var(--border-color); border-radius: var(--radius-md, 12px); margin: 0 0 var(--space-3); overflow: hidden; }
.shop-desc-html .desc-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: 10px 14px; background: color-mix(in srgb, var(--color-primary) 9%, transparent);
}
.shop-desc-html .desc-card-title { font-weight: var(--weight-bold); color: var(--text-primary); }
.shop-desc-html .desc-pill {
    font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 16%, transparent);
    border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}
.shop-desc-html .desc-card ul { list-style: none; margin: 0; padding: 4px 14px 8px; }
.shop-desc-html .desc-card li {
    display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3);
    padding: 8px 0; margin: 0; border-bottom: 1px solid var(--divider); font-size: var(--text-sm); color: var(--text-primary);
}
.shop-desc-html .desc-card li:last-child { border-bottom: 0; }
.shop-desc-html .desc-sub { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.shop-desc-html .desc-qty { white-space: nowrap; color: var(--text-muted); font-weight: var(--weight-semi); }

/* ── Ilgas aprašymas: sutraukimas + "Daugiau" mygtukas (2026-10-08) ── */
.shop-product-desc.shop-desc-clamped { overflow: hidden; transition: max-height 0.3s ease; margin-bottom: 0; }
.shop-product-desc.shop-desc-clamped:not(.is-open) {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent);
}
.shop-desc-more {
    display: block; margin: var(--space-3) auto 0; padding: 8px 20px; cursor: pointer;
    border: 1px solid var(--border-color); border-radius: 999px; background: var(--bg-card);
    color: var(--diary-accent); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semi);
}
.shop-desc-more:hover { border-color: var(--diary-accent); }