/*
 * Jogise Storefront — frontend styles (Track B).
 *
 * B1.9 — category navigation bar. The 10 product categories live in the
 * Astra Header Builder "below" header row (their own full-width row, so
 * they no longer wrap around the logo). This styles that row as a tidy,
 * centred nav bar with a subtle background and button-like hover.
 *
 * B1.7 — product grid: every card is made the same shape (clamped
 * 2-line title + fixed-height image box) so prices and add-to-cart
 * buttons line up across the whole grid, independent of title length.
 */

/* --- B1.9 category navigation bar (Astra HB "below" row) --- */
/* The grey band lives on the INNER `.ast-below-header-bar` (Astra dynamic
   CSS paints `background-color:#eeeeee` there, NOT on the outer -wrap), so
   the override must target the bar. `.site-header` ancestor gives 0,2,0
   specificity to beat Astra's single-class inline rule regardless of load
   order — transparent band, thin bottom border only. */
.ast-below-header-wrap {
    border-top: 0;
}
.site-header .ast-below-header-bar {
    background-color: transparent;
    border-bottom: 1px solid #ececec;
}

/* Compact the row itself — drop Astra's forced row height so the bar
   hugs the menu instead of leaving tall empty bands above/below. */
.ast-below-header-wrap .ast-builder-grid-row {
    min-height: 0;
    padding-top: 3px;
    padding-bottom: 3px;
}

.ast-below-header-wrap .ast-builder-menu-1 .main-header-menu {
    flex-wrap: wrap;
    justify-content: center;
}

/* The link must size to its text (height:auto) — by default the Astra
   header menu <a> stretches to the full row height, so the hover
   background looked like an oversized button. */
.ast-below-header-wrap .ast-builder-menu-1 .main-header-menu > .menu-item > a {
    height: auto;
    line-height: 1.25;
    font-size: 0.92rem;
    padding: 6px 12px;
    margin: 3px 1px;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Current category — black, bold, with a blue underline marker so the
   visitor can see which category they are browsing. */
.ast-below-header-wrap .ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-item > a,
.ast-below-header-wrap .ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-ancestor > a {
    color: #000000;
    font-weight: 700;
    box-shadow: inset 0 -2px 0 #1a73e8;
}

/* Hover — solid blue fill, white text. The current-item selectors are
   listed here too, so white text wins specificity over the current-
   category rule above (it was previously blue-on-blue and unreadable). */
.ast-below-header-wrap .ast-builder-menu-1 .main-header-menu > .menu-item > a:hover,
.ast-below-header-wrap .ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-item > a:hover,
.ast-below-header-wrap .ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-ancestor > a:hover {
    background-color: #1a73e8;
    color: #ffffff;
}

/* --- B1.7 product grid — uniform cards --- */

/* Grid items already default to stretch; this just guarantees it.
   NEVER set `display` on ul.products — that kills Astra's grid. */
.woocommerce ul.products {
    align-items: stretch;
}

/* Clamp the loop title to exactly 2 lines: -webkit-line-clamp caps long
   titles (full title still shows on the product page) and the matching
   min-height lifts 1-line titles to the same height. Every card's title
   block is then identical, so prices + buttons line up regardless of
   whether the grid stretches the cards. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    min-height: 2.8em;
}

/* Pin the add-to-cart button to the bottom of the card. */
.woocommerce ul.products li.product a.button {
    margin-top: auto;
}

/* --- B2.4 product documents ("Na stiahnutie") --- */
.jogise-documents {
    margin: 1.2em 0 0.4em;
    padding-top: 1em;
    border-top: 1px solid #e6e6e6;
}

.jogise-documents__title {
    font-size: 1rem;
    margin: 0 0 0.5em;
}

.jogise-documents__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jogise-documents__list li {
    margin: 0 0 0.35em;
}

.jogise-document {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45em;
}

.jogise-document::before {
    content: "\1F4C4"; /* page-facing-up */
}

/* --- B2.7 product attributes table ("Ďalšie informácie") --- */

/* Tidier "Additional information" table: clean borders, a shaded label
   column, zebra rows. (SK label text — Wattage->Príkon etc. — is a
   separate re-sync package; this is the visual styling only.) */
.woocommerce .woocommerce-product-attributes {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5em;
}

.woocommerce .woocommerce-product-attributes th,
.woocommerce .woocommerce-product-attributes td {
    padding: 0.6em 0.9em;
    border: 1px solid #e6e6e6;
    text-align: left;
    vertical-align: top;
}

.woocommerce .woocommerce-product-attributes th.woocommerce-product-attributes-item__label {
    width: 38%;
    background-color: #fafafa;
    font-weight: 600;
}

.woocommerce .woocommerce-product-attributes-item:nth-child(even) td {
    background-color: #fcfcfc;
}

/* WooCommerce wraps taxonomy attribute values in <p> — drop its margin
   so the value sits centred in the row. */
.woocommerce .woocommerce-product-attributes-item__value p {
    margin: 0;
}

/* --- B1.7 product images — uniform, centred box --- */

/* Fixed-height box + object-fit:contain: every product photo occupies
   the same area and is shown whole, centred. Thumbnails are generated
   uncropped (woocommerce_thumbnail_cropping = uncropped) so portrait
   and landscape products keep their full shape inside this box.
   The selector includes a.woocommerce-loop-product__link so it beats
   Astra's own `ul.products li.product a img` rule. */
.woocommerce ul.products li.product a.woocommerce-loop-product__link img {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: contain;
    margin: 0 auto 0.8em;
}

/* --- B2.1 variant selector --- */

/* When our selector is present (per-axis dropdowns or the combined
   fallback), hide WooCommerce's native per-attribute dropdowns and the
   reset link — our control is the single point of choice. Single-axis
   products carry neither, so their native dropdown is left untouched. */
form.variations_form:has(.jogise-variant-axes) table.variations,
form.variations_form:has(.jogise-variant-select) table.variations {
    display: none;
}

form.variations_form:has(.jogise-variant-axes) .reset_variations,
form.variations_form:has(.jogise-variant-select) .reset_variations {
    display: none !important;
}

.jogise-variant-select-wrap,
.jogise-variant-axes {
    margin: 0 0 1.3em;
}

.jogise-axis {
    margin-bottom: 0.9em;
}

.jogise-variant-select__label,
.jogise-axis__label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4em;
}

.jogise-variant-select,
.jogise-axis-select {
    width: 100%;
    max-width: 460px;
    padding: 0.6em 0.7em;
    font-size: 1em;
    line-height: 1.3;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    background-color: #fff;
}

.jogise-variant-axes__note {
    margin: 0.2em 0 0;
    color: #b3261e;
    font-size: 0.92em;
}

/* --- B2.2a product gallery layout --- */

/* Main image: a fixed-height contain box so tall portrait product
   shots (e.g. 600x899) no longer stretch the page; the picture is
   shown whole, centred — same approach as the B1.7 grid thumbnails. */
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
    height: 500px;
    width: 100%;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 768px) {
    .woocommerce-product-gallery .woocommerce-product-gallery__image img {
        height: 340px;
    }
}

/* Thumbnails: one horizontal scroll strip instead of a tall multi-row
   grid — a Lucide variable product's parent gallery can carry 60+
   images (per-variation filtering follows in B2.2b). A slim, always-
   visible scrollbar makes the strip readably scrollable.
   FlexSlider's default `.flex-control-thumbs li { width: 25%; float: left }`
   means 4 thumbs fill the row exactly (4 × 25% = 100%) → no overflow → no
   scroll appearance, even with our flex-nowrap. We force fixed-px width
   + float:none with !important so flex layout actually overflows
   horizontally and the scrollbar engages. */
.woocommerce-product-gallery ol.flex-control-thumbs,
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100%;
    max-width: 100%;
    margin: 12px 0 0;
    padding: 0 0 8px 0;
    list-style: none;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: #1a73e8 #eaeaea;
}

.woocommerce-product-gallery ol.flex-control-thumbs::-webkit-scrollbar,
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
    height: 10px;
}

.woocommerce-product-gallery ol.flex-control-thumbs::-webkit-scrollbar-track,
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs::-webkit-scrollbar-track {
    background: #eaeaea;
    border-radius: 5px;
}

.woocommerce-product-gallery ol.flex-control-thumbs::-webkit-scrollbar-thumb,
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs::-webkit-scrollbar-thumb {
    background: #1a73e8;
    border-radius: 5px;
}

.woocommerce-product-gallery ol.flex-control-thumbs li,
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li {
    flex: 0 0 58px !important;
    width: 58px !important;
    height: 58px;
    margin: 0 !important;
    padding: 0;
    float: none !important;
    display: block;
    scroll-snap-align: start;
}

.woocommerce-product-gallery ol.flex-control-thumbs li img,
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    cursor: pointer;
    opacity: 1;
    display: block;
}

.woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery ol.flex-control-thumbs li img:hover,
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li img:hover {
    border-color: #2b6cb0;
}

/* --- B2.2c energy-class badge --- */

.jogise-energy {
    margin: 0 0 1.3em;
}

.jogise-energy__title {
    display: block;
    font-weight: 600;
    font-size: 0.95em;
    margin-bottom: 0.45em;
}

.jogise-energy__scale {
    display: flex;
    align-items: center;
    gap: 3px;
}

.jogise-energy__step {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85em;
    color: #fff;
    border-radius: 3px;
    opacity: 0.38;
}

/* The product's own class — full colour, enlarged, outlined. */
.jogise-energy__step.is-active {
    opacity: 1;
    width: 36px;
    height: 36px;
    font-size: 1.1em;
    outline: 2px solid #1a1a1a;
    outline-offset: 1px;
}

/* EU 2021 A–G label colours. */
.jogise-energy__step--a { background-color: #00a651; }
.jogise-energy__step--b { background-color: #50b848; }
.jogise-energy__step--c { background-color: #bfd730; color: #1a1a1a; }
.jogise-energy__step--d { background-color: #fff200; color: #1a1a1a; }
.jogise-energy__step--e { background-color: #fdb913; color: #1a1a1a; }
.jogise-energy__step--f { background-color: #f37021; }
.jogise-energy__step--g { background-color: #ed1c24; }

/* ============================================================================
   B1.5 F-3 — Sidebar filter widget
   ============================================================================ */

/* Two-column layout on shop / category archive: filters on the left, products
   on the right. On mobile the sidebar lifts off into an off-canvas drawer
   (F-4) so the grid collapses to a single column for the product list. */
.jogise-shop-with-filters {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}
@media (max-width: 880px) {
    .jogise-shop-with-filters {
        grid-template-columns: 1fr;
    }
}
.jogise-shop-filters {
    min-width: 0;
}
.jogise-shop-main {
    min-width: 0;
}

/* F-4 sticky desktop sidebar: stays in view as the customer scrolls the
   product grid. `top` offset clears Astra's primary header (sticky
   header ~80 px when present; benign extra gap when not). The internal
   scroll on a tall facet list prevents the sidebar from exceeding the
   viewport — content scrolls inside the panel, not the page. */
@media (min-width: 881px) {
    .jogise-shop-filters {
        position: sticky;
        top: 80px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
}

/* Widget wrap — borderless (owner pref): no box outline, flush-left list. */
.jogise-filter-widget-wrap {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0 16px 0 0;
    font-size: 14px;
}
/* "FILTROVAŤ" sidebar heading removed — it read as a facet and duplicated
   the per-facet titles below. The mobile drawer trigger keeps its own label. */
.jogise-filter-widget-title {
    display: none;
}

/* Per-facet collapsible section */
.jogise-filter-facet {
    border-top: 1px solid #eee;
    padding: 8px 0;
}
.jogise-filter-facet:first-child {
    border-top: 0;
    padding-top: 0;
}
.jogise-filter-facet__title {
    cursor: pointer;
    font-weight: 600;
    color: #1a1a1a;
    padding: 4px 0;
    list-style: none;
    position: relative;
    padding-right: 20px;
}
.jogise-filter-facet__title::-webkit-details-marker { display: none; }
.jogise-filter-facet__title::after {
    content: '▾';
    position: absolute;
    right: 0;
    top: 4px;
    font-size: 11px;
    color: #888;
    transition: transform 0.15s ease;
}
.jogise-filter-facet[open] > .jogise-filter-facet__title::after {
    transform: rotate(180deg);
}
.jogise-filter-facet__active {
    font-weight: 400;
    color: #1a73e8;
    margin-left: 4px;
}

/* Term checkbox list */
.jogise-filter-facet__list {
    list-style: none;
    margin: 8px 0 4px 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
}
.jogise-filter-term {
    margin: 0;
    padding: 0;
}
.jogise-filter-term a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
}
.jogise-filter-term a:hover {
    color: #1a73e8;
}
.jogise-filter-term__checkbox {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1;
    color: #888;
}
.jogise-filter-term.is-active .jogise-filter-term__checkbox {
    color: #1a73e8;
}
.jogise-filter-term.is-active a {
    color: #1a73e8;
    font-weight: 600;
}
.jogise-filter-term__label {
    flex: 1 1 auto;
    min-width: 0;
}
.jogise-filter-term__count {
    flex: 0 0 auto;
    color: #888;
    font-size: 12px;
}

/* Range facets (wattage / CCT / diameter / energy) as a row of pills. */
.jogise-filter-facet--pills .jogise-filter-facet__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: none;
    overflow: visible;
}
.jogise-filter-facet--pills .jogise-filter-term {
    margin: 0;
}
.jogise-filter-facet--pills .jogise-filter-term a {
    display: inline-block;
    padding: 5px 12px;
    gap: 0;
    border: 1px solid #dcdfe3;
    border-radius: 999px;
    background: #fff;
    color: #333;
    font-size: 12.5px;
    line-height: 1.3;
}
.jogise-filter-facet--pills .jogise-filter-term a:hover {
    border-color: #1a73e8;
    color: #1a73e8;
}
.jogise-filter-facet--pills .jogise-filter-term.is-active a {
    background: #1a73e8;
    border-color: #1a73e8;
    color: #fff;
    font-weight: 600;
}

/* Reset all */
.jogise-filter-reset {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 12px;
    background: #f4f4f4;
    color: #333;
    text-decoration: none;
    font-size: 12px;
    border-radius: 3px;
    border: 1px solid #ddd;
}
.jogise-filter-reset:hover {
    background: #ebebeb;
    color: #1a73e8;
}

/* ============================================================================
   B1.5 F-4 — Active-filters chip bar, mobile trigger + drawer
   ============================================================================ */

/* Chip bar: row of small "Attr: <Value> ×" pills above the product grid.
   Always visible on every viewport when at least one filter is active —
   gives a single place to remove individual filters even when the side
   drawer is closed on mobile. */
.jogise-active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px 0;
    padding: 10px 12px;
    background: #f7f9fb;
    border: 1px solid #e1e6ec;
    border-radius: 4px;
    font-size: 13px;
}
.jogise-active-filters__label {
    font-weight: 600;
    color: #555;
    margin-right: 4px;
}
.jogise-active-filters__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.jogise-active-filters__chip a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #c7d2e0;
    border-radius: 999px;
    color: #1a1a1a;
    text-decoration: none;
    line-height: 1.3;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.jogise-active-filters__chip a:hover {
    background: #eef3f9;
    border-color: #1a73e8;
    color: #1a73e8;
}
.jogise-active-filters__chip-x {
    font-size: 16px;
    line-height: 1;
    color: #888;
    font-weight: 700;
}
.jogise-active-filters__chip a:hover .jogise-active-filters__chip-x {
    color: #1a73e8;
}
.jogise-active-filters__chip--reset a {
    background: #1a73e8;
    color: #fff;
    border-color: #1a73e8;
    font-weight: 600;
}
.jogise-active-filters__chip--reset a:hover {
    background: #155bbd;
    border-color: #155bbd;
    color: #fff;
}

/* Mobile trigger button: hidden on desktop, full-width on mobile. The
   sticky sidebar covers desktop; on mobile customers open the drawer. */
.jogise-filter-trigger {
    display: none;
    width: 100%;
    margin: 0 0 12px 0;
    padding: 10px 14px;
    background: #1a73e8;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}
.jogise-filter-trigger:hover {
    background: #155bbd;
}
.jogise-filter-trigger__count {
    font-weight: 700;
    margin-left: 2px;
}

@media (max-width: 880px) {
    .jogise-filter-trigger {
        display: inline-block;
    }
}

/* Mobile drawer behaviour: at <= 880 px the sidebar is hoisted out of
   normal flow into a fixed-position slide-from-left panel that the JS
   reveals by adding `jogise-drawer-open` to <body>. Closed state =
   off-screen via translateX(-100%); open state = slid in. The backdrop
   sits behind the panel and absorbs clicks for close. */
@media (max-width: 880px) {
    .jogise-shop-filters {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(86vw, 340px);
        max-width: 340px;
        z-index: 100000;
        background: #fff;
        box-shadow: 2px 0 18px rgba(0, 0, 0, 0.15);
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        overflow-y: auto;
        padding: 56px 16px 24px 16px;
    }
    body.jogise-drawer-open .jogise-shop-filters {
        transform: translateX(0);
    }
    .jogise-drawer-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 99999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }
    body.jogise-drawer-open .jogise-drawer-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    .jogise-drawer-close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        background: transparent;
        border: none;
        font-size: 28px;
        line-height: 1;
        color: #555;
        cursor: pointer;
    }
    .jogise-drawer-close:hover {
        color: #1a73e8;
    }
}

/* The drawer chrome (× close button + backdrop) is JS-injected; hide on
   desktop where the drawer behaviour is disabled. */
@media (min-width: 881px) {
    .jogise-drawer-close,
    .jogise-drawer-backdrop {
        display: none;
    }
}

/* =====================================================================
   B1.6b — search-input autocomplete dropdown
   ===================================================================== */

.jogise-autocomplete-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}

.jogise-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    max-height: 70vh;
    overflow-y: auto;
    min-width: 320px;
}

.jogise-autocomplete-loading,
.jogise-autocomplete-empty {
    padding: 12px 14px;
    color: #6b7280;
    font-size: 14px;
}

.jogise-autocomplete-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jogise-autocomplete-item {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #f3f4f6;
}

.jogise-autocomplete-item:last-child {
    border-bottom: 0;
}

.jogise-autocomplete-item.is-highlighted {
    background: #f0f6ff;
}

.jogise-autocomplete-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: inherit;
    text-decoration: none;
}

.jogise-autocomplete-link:hover {
    text-decoration: none;
    color: inherit;
}

.jogise-autocomplete-thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border-radius: 3px;
    overflow: hidden;
}

.jogise-autocomplete-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.jogise-autocomplete-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jogise-autocomplete-title {
    font-size: 14px;
    line-height: 1.3;
    color: #111;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.jogise-autocomplete-meta {
    font-size: 12px;
    color: #6b7280;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.jogise-autocomplete-price {
    font-size: 13px;
    color: #1a73e8;
    font-weight: 600;
}

.jogise-autocomplete-price del {
    color: #9ca3af;
    font-weight: 400;
    margin-right: 4px;
}

.jogise-autocomplete-all {
    display: block;
    padding: 10px 14px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    color: #1a73e8;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
}

.jogise-autocomplete-all:hover {
    background: #f0f6ff;
    color: #1557b0;
    text-decoration: none;
}

/* ====================================================================
 * B1.3d — Checkout (kontrola objednávky)
 *
 * Owner-feedback (2026-05-25): WC default accent blues feel different
 * from the site's primary #1a73e8; product names in the order review
 * table wrap because the left column is too narrow. These rules:
 *   - retag every blue accent to #1a73e8 (links, focus rings, headings)
 *   - widen the product column (50% → 60%) so 1-line names don't wrap
 *   - shrink the order-review font slightly so longer names still fit
 * ==================================================================== */

/* Form field focus + active borders — site blue everywhere */
.woocommerce-checkout input[type="text"]:focus,
.woocommerce-checkout input[type="email"]:focus,
.woocommerce-checkout input[type="tel"]:focus,
.woocommerce-checkout input[type="number"]:focus,
.woocommerce-checkout input[type="password"]:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout .select2-container--focus .select2-selection,
.woocommerce-checkout .select2-container--open .select2-selection {
    border-color: #1a73e8 !important;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.18) !important;
    outline: none !important;
}

/* Section headings ("Fakturačné údaje", "Doručenie", "Vaša objednávka") */
.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout #order_review_heading {
    color: #1a73e8;
}

/* Links inside checkout — coupon expand, "Click here to login",
 * "Click here to enter your code", VOP/GDPR consent links */
.woocommerce-checkout a,
.woocommerce-info a,
.woocommerce-form-coupon-toggle a,
.woocommerce-form-login-toggle a {
    color: #1a73e8;
}
.woocommerce-checkout a:hover,
.woocommerce-info a:hover {
    color: #1557b0;
}

/* WC "info" notice strip (the coupon/login prompt at top) */
.woocommerce-checkout .woocommerce-info {
    border-top-color: #1a73e8;
}
.woocommerce-checkout .woocommerce-info::before {
    color: #1a73e8;
}

/* Primary buttons: Apply coupon, Place order */
.woocommerce-checkout button.button,
.woocommerce-checkout input.button,
.woocommerce-checkout #place_order {
    background-color: #1a73e8;
    border-color: #1a73e8;
    color: #ffffff;
}
.woocommerce-checkout button.button:hover,
.woocommerce-checkout input.button:hover,
.woocommerce-checkout #place_order:hover {
    background-color: #1557b0;
    border-color: #1557b0;
}

/* Order review table — base font + padding tweaks. */
.woocommerce-checkout-review-order-table {
    font-size: 13px;
    width: 100% !important;
    max-width: 100%;
}
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th {
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 10px 6px;
    vertical-align: top;
}
/* Totals labels (Medzisúčet / Doprava / Cena spolu / Daň) are short —
 * never let them collapse to one-letter-per-line when the label column
 * is narrow. `anywhere` above caused exactly that on the checkout. */
.woocommerce-checkout-review-order-table tfoot th {
    white-space: nowrap;
}

/* Hide the table header row — with the 2-row card layout below,
 * "Produkt / Medzisúčet" labels are redundant */
.woocommerce-checkout-review-order-table thead {
    display: none;
}

/* Per-product layout — paired with WC template override at
 * jogise-storefront/woocommerce/checkout/review-order.php. Each cart
 * item is a 2-column row: a left info cell (product name / variation
 * meta / "qty ks × unit price") and a right-aligned, top-aligned line
 * total. Scales cleanly to many products in the narrow checkout
 * sidebar without the price column collapsing. */
.woocommerce-checkout-review-order-table tr.jogise-cart-item td {
    padding: 12px 6px;
    border-top: 1px solid #e5e7eb;
    vertical-align: top;
}
.jogise-cart-item-info {
    width: 99%;
}
.jogise-cart-item-total {
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
    color: #1d2327;
    font-size: 14px;
}
.jogise-cart-item-name {
    font-weight: 500;
    line-height: 1.4;
    color: #1d2327;
}
.jogise-cart-item-name a {
    color: #1d2327;
    text-decoration: none;
}
.jogise-cart-item-name a:hover {
    color: #1a73e8;
}
.jogise-cart-item-meta {
    color: #6b7280;
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.5;
}
/* WC wraps variation data in <dl class="variation"> (dt label + dd
 * value, value inside a <p>). Flatten to compact "Label: value" lines,
 * one attribute per line. */
.jogise-cart-item-meta dl.variation {
    margin: 0;
}
.jogise-cart-item-meta dl.variation dt,
.jogise-cart-item-meta dl.variation dd {
    display: inline;
    margin: 0;
    font-weight: inherit;
}
.jogise-cart-item-meta dl.variation dt {
    font-weight: 600;
}
.jogise-cart-item-meta dl.variation dd p {
    display: inline;
    margin: 0;
}
.jogise-cart-item-meta dl.variation dd::after {
    content: "\A";
    white-space: pre;
}
.jogise-cart-item-qtyline {
    color: #6b7280;
    font-size: 12px;
    margin-top: 5px;
}

/* ====================================================================
 * B2.6 — Delivery estimate on single product page
 * ==================================================================== */
.jogise-delivery-estimate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 18px;
    padding: 10px 14px;
    background: #f0f6ff;
    border-left: 3px solid #1a73e8;
    border-radius: 4px;
    font-size: 14px;
    color: #1d2327;
    line-height: 1.4;
}
.jogise-delivery-icon {
    font-size: 18px;
    line-height: 1;
}
.jogise-delivery-label {
    color: #6b7280;
}
.jogise-delivery-value {
    font-weight: 600;
    color: #1a73e8;
}

/* Keep standard tfoot rows (Medzisúčet, Doprava, Cena spolu) as
 * 2-col table-rows with price on the right. */
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
    padding: 10px 6px;
}
.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal td,
.woocommerce-checkout-review-order-table tfoot tr.shipping td,
.woocommerce-checkout-review-order-table tfoot tr.order-total td {
    text-align: right;
    white-space: nowrap;
}

/* Our 2-disclaimer rows (price + delivery) span the full width via
 * colspan=2 and contain wrapping prose — explicitly allow wrap and
 * suppress the right-aligned tfoot rule from clobbering them. */
.woocommerce-checkout-review-order-table tr.jogise-price-disclaimer td,
.woocommerce-checkout-review-order-table tr.jogise-delivery-disclaimer td {
    white-space: normal !important;
    text-align: right;
}

/* Our two disclaimer rows from Checkout_Consents — soft, unobtrusive */
.jogise-price-disclaimer small,
.jogise-delivery-disclaimer small {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.4;
    display: block;
    padding: 4px 0;
}

/* Required asterisk on the consent checkbox — keep red so it reads as
 * "mandatory" (UX convention) but the rest of the label is body color */
.woocommerce-terms-and-conditions-wrapper .required {
    color: #b91c1c;
}

/* Task E — category nav icons (inherit link colour via currentColor) */
.jogise-cat-ico { display:inline-flex; align-items:center; vertical-align:middle; margin-right:7px; line-height:0; }
.jogise-cat-ico svg { width:18px; height:18px; display:block; }

/* Task D — "Značka" (brand) in the product-meta block */
.jogise-brand { display:inline-block; }
.jogise-brand__value { font-weight:600; }

/* --- #8 EU right-of-withdrawal form (Odstúpenie od zmluvy) --- */
.jogise-withdrawal { max-width: 560px; }
.jogise-withdrawal-form .jogise-wf-field { margin: 0 0 14px; }
.jogise-withdrawal-form label { display: block; font-weight: 600; margin-bottom: 4px; }
.jogise-withdrawal-form input[type="text"],
.jogise-withdrawal-form input[type="email"],
.jogise-withdrawal-form textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    font-size: 15px;
    box-sizing: border-box;
}
.jogise-withdrawal-form .jogise-wf-intro { margin-bottom: 16px; }
.jogise-withdrawal-form .jogise-wf-actions { margin-top: 8px; }
.jogise-wf-submit, .jogise-wf-confirm {
    background: #1a73e8; color: #fff; border: 0; border-radius: 4px;
    padding: 10px 20px; font-size: 15px; cursor: pointer;
}
.jogise-wf-submit:hover, .jogise-wf-confirm:hover { background: #1559b3; }
/* Honeypot — visually hidden, kept in the layout for bots. */
.jogise-wf-honeypot {
    position: absolute !important; left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}
.jogise-wf-summary { list-style: none; margin: 14px 0; padding: 0; }
.jogise-wf-summary li { padding: 6px 0; border-bottom: 1px solid #eee; }
.jogise-withdrawal-notice {
    padding: 12px 14px; border-radius: 4px; margin-bottom: 16px; font-size: 14px;
}
.jogise-withdrawal-notice ul { margin: 0; padding-left: 18px; }
.jogise-withdrawal-notice--error   { background: #fdecea; border: 1px solid #f5c2bd; color: #8a1f12; }
.jogise-withdrawal-notice--info    { background: #e8f0fe; border: 1px solid #c2d6f5; color: #14458a; }
.jogise-withdrawal-notice--success { background: #e7f6ec; border: 1px solid #b6e0c4; color: #14672e; }