/* Gekkon Hygiena brand layer — MUST be the last stylesheet in inc_header.jsp.
   The theme (style/demo2) and custom.min.css both hardcode colours, several with
   !important, so this file wins by load order rather than by specificity.

   Palette is taken from gekkonhygiene.com (assets/css/styles.css):
     --brand-primary       #4BC7D0  turquoise — the identity colour: header, accents
     --brand-primary-dark  #2FA8B2  hover tone
     --brand-primary-light #C4FBFF  tints / soft backgrounds
     --brand-ink           #171717  dark from the logo
     --brand-red           #DC2626  CTA colour (.btn--red on the brand site)
     --brand-red-dark      #B91C1C  CTA hover

   Two contrast rules follow from that palette:
   - White text on #4BC7D0 measures 2.0:1. The brand site accepts that in its own
     header, so the header keeps white text + the white logo; everywhere else a
     turquoise fill carries ink text instead.
   - Turquoise AS text on white is also 2.0:1, so links and highlights use
     #1E7A82 — a darkened tint of the same hue (5.1:1 on white). */

:root {
    --brand-primary: #4BC7D0;
    --brand-primary-dark: #2FA8B2;
    --brand-primary-light: #C4FBFF;
    --brand-ink: #171717;
    --brand-text: #1E7A82;
    --brand-red: #DC2626;
    --brand-red-dark: #B91C1C;

    /* Shopping-cart glyph used as a mask by .minicart-icon (see the bottom of
       this file). Stroke colour is irrelevant — only the alpha is used. */
    --cart-icon-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.6'/%3E%3Ccircle cx='18' cy='20' r='1.6'/%3E%3Cpath d='M1.5 2h3.2l2.6 12.1a1.8 1.8 0 0 0 1.8 1.4h9a1.8 1.8 0 0 0 1.8-1.4L22.5 6H5.5'/%3E%3C/svg%3E");
}

/* ============================================================
   HEADER / TOP MENU — the brand colour
   ============================================================ */

/* The theme gives .header-bottom (the nav strip) its own white background, which
   would leave the white nav links invisible. On gekkonhygiene.com the nav is part
   of one continuous turquoise header, so all three rows carry the brand colour. */
.header,
.header-bottom,
.sticky-header.fixed {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.header-top,
.header-bottom {
    border-bottom-color: rgba(255, 255, 255, 0.25) !important;
}

/* demo2 hardcodes the separator to its own blue (#0e95d8), which reads as a stray
   colour on the turquoise bar. Match the header's divider above. */
.header-top .separator,
.header-bottom .separator {
    border-left-color: rgba(255, 255, 255, 0.25);
}

.header-bottom .header-right,
.header-bottom .header-right a,
.header-bottom .header-right i {
    color: #fff;
}

.header .top-message,
.header-dropdown a,
.header-menu ul li a,
.header-contact h6,
.header-contact h6 a,
.social-icons a,
.header-icon,
.header-icon i,
.header .cart-toggle,
.header .header-left a strong {
    color: #fff;
}

.header-dropdown a:hover,
.header-contact h6 a:hover,
.header-icon:hover,
.header-icon:hover i,
.header .cart-toggle:hover {
    color: var(--brand-ink);
}

/* The header dropdown panel is a white card — keep its links dark. */
.header .header-menu {
    background-color: #fff;
}

.header .header-menu ul li a {
    color: var(--brand-ink);
}

/* ...except the top-bar menu, which is never a card: above 992px the theme makes
   .dropdown-expanded render inline and transparent, so the two rules above were
   painting a white block with dark text straight onto the turquoise bar. */
@media (min-width: 992px) {
    .header-top .dropdown-expanded .header-menu {
        background-color: transparent;
    }

    .header-top .dropdown-expanded .header-menu ul li a {
        color: #fff;
    }

    .header-top .dropdown-expanded .header-menu ul li a:hover {
        color: var(--brand-ink);
    }
}

.header-logo {
    max-height: 56px;
}

/* Main nav: white on turquoise, ink on hover/active (as on gekkonhygiene.com). */
.main-nav .menu > li > a {
    color: #fff;
}

.main-nav .menu > li.active > a,
.main-nav .menu > li.show > a,
.main-nav .menu > li:hover > a,
.main-nav .menu > li > a:hover,
.main-nav .menu > li.float-right > a:hover {
    color: var(--brand-ink);
    border-top-color: var(--brand-ink) !important;
}

/* Megamenu / submenu panels are white cards — dark text inside. */
.main-nav .menu .megamenu,
.main-nav .menu ul {
    color: var(--brand-ink);
}

.main-nav .menu .megamenu a,
.main-nav .menu ul li a {
    color: var(--brand-ink);
}

.main-nav .menu .megamenu a:hover,
.main-nav .menu ul li a:hover {
    color: var(--brand-text);
}

/* Cart / wishlist counters sit on turquoise — invert them to ink. */
.header .badge-circle,
.header .cart-count {
    background-color: var(--brand-ink);
    color: #fff;
}

/* ============================================================
   BUTTONS — red, as on gekkonhygiene.com (.btn--red)
   ============================================================ */

/* Round all buttons + pagination to match the rounded card system.
   The theme squares .btn (border-radius:0); this rounds them to 8px. */
.btn,
.page-link {
    border-radius: 8px !important;
}

/* Preserve intentionally-circular buttons/badges. */
.btn-icon,
.btn-remove,
.btn-circle,
.badge-circle {
    border-radius: 50% !important;
}

/* The globe and the B2B button are both inline-flex, so they align on their text
   baselines and sit at different heights. Centre them against each other instead. */
.header-top .social-icons {
    display: inline-flex;
    align-items: center;
}

/* B2B button in the header-top bar. Sized to the 26px globe icon beside it rather
   than .btn's default padding, so the red stays a small accent on a bar that is
   otherwise plain white text. */
.header-top .social-icons .header-b2b {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 6px !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
}

.header-top .social-icons .header-b2b:hover,
.header-top .social-icons .header-b2b:focus {
    color: #fff;
}

/* The header search button is attached to the (pill-shaped) search input, so
   keep its right side fully rounded to match the input — not the 8px .btn rule. */
.header-search-category .btn {
    border-radius: 0 5rem 5rem 0 !important;
}

/* Newsletter subscribe buttons are attached to pill inputs — keep their
   right-side pill so they don't mismatch the input (same as the search box). */
.newsletter-popup-content .btn {
    border-radius: 0 3rem 3rem 0 !important;
}
.footer .widget-newsletter .btn {
    border-radius: 0 5rem 5rem 0 !important;
}

/* ---- Form inputs — round to 8px, matching the buttons ---- */
.form-control {
    border-radius: 8px !important;
}

/* Preserve the pill-shaped header search inputs (attached to their buttons)
   and the newsletter popup's attached input. */
.header-search:not(.header-search-category) .form-control {
    border-radius: 5rem !important;
}
.header-search-category .form-control {
    border-radius: 5rem 0 0 5rem !important;
}
.newsletter-popup-content .form-control {
    border-radius: 3rem 0 0 3rem !important;
}
.footer .widget-newsletter .form-control {
    border-radius: 5rem 0 0 5rem !important;
}

/* ---- Filter chips (listing sidebar) — pills, matching the sidebar hover pills ---- */
.filter-property-inactive,
.filter-property-active,
.filter-property-disabled {
    border-radius: 50rem;
}

.btn-primary,
a.btn-primary,
.btn-primary.text-white {
    background-color: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
a.btn-primary:hover,
a.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle,
.add-cart-box .btn-actions .btn-primary:focus,
.add-cart-box .btn-actions .btn-primary:active,
.add-cart-box .btn-actions .btn-primary:active:focus {
    background-color: var(--brand-red-dark) !important;
    border-color: var(--brand-red-dark) !important;
    color: #fff !important;
}

.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
    color: #fff !important;
    opacity: 0.55;
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.3);
}

/* Outline variant of the CTA. */
.btn-outline.btn-primary,
.btn-outline-primary {
    background-color: transparent !important;
    border-color: var(--brand-red) !important;
    color: var(--brand-red) !important;
}

.btn-outline.btn-primary:hover,
.btn-outline-primary:hover {
    background-color: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
    color: #fff !important;
}

/* ============================================================
   ACCENTS — turquoise everywhere the theme highlights something
   ============================================================ */

/* Turquoise as text fails contrast on white; use the darkened tint. */
a,
.product_name_href,
.product-default a,
.breadcrumb-item a,
.breadcrumb-item.active {
    color: var(--brand-text);
}

a:hover,
a:focus,
.breadcrumb-item a:hover {
    color: var(--brand-primary-dark);
}

.text-primary {
    color: var(--brand-text) !important;
}

/* Turquoise fills carry ink text, never white. */
.bg-primary,
.badge-primary,
.bg-primary.text-white,
.footer-ribbon.bg-primary,
.footer-ribbon.bg-primary.text-white {
    background-color: var(--brand-primary) !important;
    color: var(--brand-ink) !important;
}

/* Section titles get the brand underline the theme draws in primary. */
.section-title,
.side-menu-title {
    border-color: var(--brand-primary);
}

.side-menu-title {
    background-color: var(--brand-primary);
    color: #fff;
}

/* ============================================================
   CATEGORY CARDS — mirrors the .product-card on gekkonhygiene.com
   Used by category_list.jsp. Colours map to the brand palette above;
   radius / spacing / shadow / gradient are inlined from the brand site.
   The title hover uses --brand-text (the darkened tint) rather than the
   raw turquoise, for the same contrast reason noted at the top of this file.
   ============================================================ */
.product-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px;
    transition: all 200ms ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    min-height: 220px;
    /* Fill the Bootstrap column so every card in a row ends up the same height,
       aj ked ma kategoria dlhsi nazov na dva riadky. */
    height: 100%;
    position: relative;
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-4px);
    border-color: var(--brand-primary);
    box-shadow: 0 4px 12px rgba(15, 20, 25, 0.06), 0 2px 4px rgba(15, 20, 25, 0.04);
}

.product-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 200ms ease;
}

.product-card:hover::after {
    transform: scaleX(1);
}

/* The wrap is a flex item of the column card, so its default min-height:auto lets a tall
   image push it past the 1/1 aspect-ratio and make the whole card taller than its neighbours.
   min-height:0 + flex-shrink:0 keep the square, overflow:hidden is the safety net. */
.product-card__image-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: #fff;
}

.product-card__image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 200ms ease;
}

.product-card:hover .product-card__image {
    transform: scale(1.05);
}

.product-card__title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
    color: var(--brand-ink);
    line-height: 1.3;
    flex-grow: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.product-card:hover .product-card__title {
    color: var(--brand-text);
}

/* In list.jsp the card sits inside the theme's <a>, which underlines on hover.
   Keep the card and its title free of that underline. */
.product-card,
.product-card:hover,
a:hover .product-card,
a:hover .product-card__title {
    text-decoration: none;
}

@media (max-width: 575px) {
    .product-card {
        min-height: 180px;
    }

    .product-card__title {
        font-size: 12px;
    }
}

/* ============================================================
   SEARCH AUTOCOMPLETE — matched categories as a grid on top,
   products as rows underneath. Section labels divide the two.
   ============================================================ */
/* Kill the blue Bootstrap flash on click/tap of a dropdown result. */
.autocomplete-results .dropdown-item,
.autocomplete-results .ac-cat-card {
    -webkit-tap-highlight-color: transparent;
}

.autocomplete-results .dropdown-item:active,
.autocomplete-results .dropdown-item:focus,
.autocomplete-results .dropdown-item.active,
.autocomplete-results .dropdown-item:active:focus {
    background-color: #f6f9fa !important;
    color: inherit !important;
}

.autocomplete-results .ac-cat-card:active,
.autocomplete-results .ac-cat-card:focus {
    background-color: #fff;
    color: inherit;
}

.autocomplete-results .ac-section-label {
    padding: 10px 10px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-text);
}

.autocomplete-results .ac-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    padding: 2px 8px 8px;
    border-bottom: 1px solid #eee;
}

.autocomplete-results .ac-cat-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 5px 3px;
    background: #fff;
    border: 1px solid var(--card-border, #E5E7EB);
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.autocomplete-results .ac-cat-card:hover {
    border-color: var(--brand-primary);
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(15, 20, 25, 0.06), 0 2px 4px rgba(15, 20, 25, 0.04);
    background: #fff;
}

/* Same gradient underline the .product-card draws on hover. */
.autocomplete-results .ac-cat-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 200ms ease;
}

.autocomplete-results .ac-cat-card:hover::after {
    transform: scaleX(1);
}

.autocomplete-results .ac-cat-card .ac-cat-img {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* More specific than the global `.autocomplete-results img { width:65px }` rule. */
.autocomplete-results .ac-cat-card .ac-cat-img img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 40px;
    object-fit: contain;
    background: #fff;
    border-radius: 5px;
    transition: transform 200ms ease;
}

.autocomplete-results .ac-cat-card:hover .ac-cat-img img {
    transform: scale(1.05);
}

.autocomplete-results .ac-cat-card .ac-cat-name {
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--brand-ink);
    transition: color 200ms ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.autocomplete-results .ac-cat-card:hover .ac-cat-name {
    color: var(--brand-text);
}

@media (max-width: 575px) {
    .autocomplete-results .ac-cat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================
   CATEGORY SIDE MENU — rounded to match the rounded product cards.
   ============================================================ */

/* Homepage categories box (index.jsp .side-menu-wrapper): round the whole
   bordered box; overflow:hidden makes the turquoise title header follow the
   radius at the top corners. */
.side-menu-wrapper {
    border-radius: 12px;
    overflow: hidden;
}

/* Sidebar card (.sidebar-box): kategórie + filtre as one rounded bordered card,
   matching the homepage box. The card lives on this inner box, NOT on
   .sidebar-wrapper — the wrapper also holds the newsletter widget, which is its
   own card and must stay outside this border. The wrapper itself has to remain
   the outermost element because the sticky-sidebar JS measures it (and writes an
   inline `border-bottom: 0` onto it, hence the !important here). */
.sidebar-box {
    border: 1px solid var(--card-border, #E5E7EB) !important;
    border-radius: 12px;
    overflow: hidden;
    padding: 0.5rem 1.5rem;
    background: #fff;
}

/* The box is the only card border now. The theme draws a border-bottom
   between widgets which, next to the rounded box, reads as a second
   (squared) border — remove the widgets' own borders and re-add just a light
   inset divider between filled sections. */
.sidebar-box .widget {
    border: 0 !important;
}

.sidebar-box .widget:not(:last-child) {
    border-bottom: 1px solid #eee !important;
}

/* Keep the "Kategórie" heading identical on the homepage and the listing page. */
.sidebar-box .widget-title {
    color: var(--brand-ink);
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Category items inside it: rounded pills with a tint hover instead of the
   theme's divider lines + underline hover. */
#catalogue-menu .side-menu {
    margin-bottom: 0;
}

#catalogue-menu .side-menu > li:first-child {
    margin-top: 0;
}

#catalogue-menu .side-menu li > a {
    height: auto;
    padding: 9px 12px;
    border-bottom: 0;
    border-radius: 8px;
    transition: background-color 150ms ease, color 150ms ease;
}

#catalogue-menu .side-menu li:hover > a {
    background-color: var(--brand-primary-light);
    color: var(--brand-ink);
    text-decoration: none;
}

/* The "clearance"/sale button under the list, kept consistent. */
#catalogue-menu .btn {
    border-radius: 8px;
    margin-top: 6px;
}

/* ============================================================
   PRODUCT GRID — rounded outline that also highlights the corner on hover.
   The container clips the shape + content (overflow:hidden); the four CORNER
   tiles get matching border-radius so their own (teal-on-hover) border follows
   the round. The bottom-left tile is selected as "a row-start that is also in
   the last row" (:nth-child(Cn+1):nth-last-child(-n+C)) so it stays correct
   even when the last row is NOT full. Columns: 2 / 3 / 4 by breakpoint.
   ============================================================ */
#product_list > .row {
    border-radius: 12px;
    overflow: hidden;
}

/* Tile hover uses the brand turquoise, matching the category-card hover
   (was #1E7A82, the darker text tint). */
.product-hover:hover {
    border-color: var(--brand-primary) !important;
}

/* 2 columns (default) */
#product_list > .row > [class*="col-"]:first-child {
    border-top-left-radius: 12px;
}
#product_list > .row > [class*="col-"]:nth-child(2),
#product_list > .row > [class*="col-"]:last-child:nth-child(-n+2) {
    border-top-right-radius: 12px;
}
#product_list > .row > [class*="col-"]:last-child {
    border-bottom-right-radius: 12px;
}
#product_list > .row > [class*="col-"]:nth-child(2n+1):nth-last-child(-n+2) {
    border-bottom-left-radius: 12px;
}

/* 3 columns */
@media (min-width: 768px) {
    #product_list > .row > [class*="col-"]:nth-child(2),
    #product_list > .row > [class*="col-"]:last-child:nth-child(-n+2) {
        border-top-right-radius: 0;
    }
    #product_list > .row > [class*="col-"]:nth-child(2n+1):nth-last-child(-n+2) {
        border-bottom-left-radius: 0;
    }
    #product_list > .row > [class*="col-"]:nth-child(3),
    #product_list > .row > [class*="col-"]:last-child:nth-child(-n+3) {
        border-top-right-radius: 12px;
    }
    #product_list > .row > [class*="col-"]:nth-child(3n+1):nth-last-child(-n+3) {
        border-bottom-left-radius: 12px;
    }
}

/* 4 columns */
@media (min-width: 1200px) {
    #product_list > .row > [class*="col-"]:nth-child(3),
    #product_list > .row > [class*="col-"]:last-child:nth-child(-n+3) {
        border-top-right-radius: 0;
    }
    #product_list > .row > [class*="col-"]:nth-child(3n+1):nth-last-child(-n+3) {
        border-bottom-left-radius: 0;
    }
    #product_list > .row > [class*="col-"]:nth-child(4),
    #product_list > .row > [class*="col-"]:last-child:nth-child(-n+4) {
        border-top-right-radius: 12px;
    }
    #product_list > .row > [class*="col-"]:nth-child(4n+1):nth-last-child(-n+4) {
        border-bottom-left-radius: 12px;
    }
}

/* ---------------------------------------------------------------------------
   Cart icon — the theme draws a shopping BAG out of borders (.minicart-icon in
   style.css: a rounded box + a ::before handle). Replace it with a real trolley
   by masking an inline SVG. background-color: currentColor makes it follow the
   surrounding text colour: white in the header (.cart-toggle is coloured with
   the other header icons above) and white on the red .btn-primary "add to cart"
   button in product cards.
   Covers all three usages: inc_header.jsp (desktop + mobile) and Product.java. */
.minicart-icon {
    width: 26px;
    height: 26px;
    margin: 0 3px;
    border: none;
    border-radius: 0;
    background-color: currentColor;
    -webkit-mask: var(--cart-icon-svg) no-repeat center / contain;
    mask: var(--cart-icon-svg) no-repeat center / contain;
}

.minicart-icon::before {
    content: none;
}

@media (max-width: 991px) {
    .minicart-icon {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 767px) {
    .minicart-icon {
        width: 22px;
        height: 22px;
    }
}

/* ---------------------------------------------------------------------------
   Pomenovane zoznamy (sablony objednavok) — prepinac zoznamov.
   Zalozky, nie tlacidla: myaccount/dashboard.jsp uz nav-tabs pouziva, takze to
   na stranke posobi domacky. Bootstrap kresli .nav-tabs ramcekom dokola, tu
   staci spodna linka. */
/* Pozor na rem: tema ma html { font-size: 62.5% }, takze 1rem = 10px a body 1.4rem.
   Hodnoty nizsie su preto vacsie, nez by clovek cakal. */

/* zalozky zacinaju tesne pod bannerom, potrebuju vzduch nad sebou */
.wishlist-table-container {
    padding-top: 3.5rem;
}

.wishlist-tabs,
.documents-tabs {
    flex-wrap: wrap;
    border-bottom: 1px solid #e4e4e4;
}

.wishlist-tabs .nav-link,
.documents-tabs .nav-link {
    padding: 1rem 1.6rem;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background-color: transparent;
    color: var(--brand-ink);
    font-size: 1.5rem;
    font-weight: 500;
    /* aby zalozka pri prepnuti na tucne pismo neposkakovala */
    white-space: nowrap;
}

.wishlist-tabs .nav-link:hover,
.wishlist-tabs .nav-link:focus,
.documents-tabs .nav-link:hover,
.documents-tabs .nav-link:focus {
    border-color: transparent;
    border-bottom-color: var(--brand-primary-light);
    background-color: transparent;
    color: var(--brand-text);
}

.wishlist-tabs .nav-link.active,
.documents-tabs .nav-link.active {
    border-color: transparent;
    border-bottom-color: var(--brand-primary);
    background-color: transparent;
    color: var(--brand-text);
    font-weight: 700;
}

/* pocet poloziek v zalozke */
.wishlist-tab-count {
    display: inline-block;
    min-width: 24px;
    margin-left: 0.6rem;
    padding: 0 0.6rem;
    border-radius: 12px;
    background-color: #f0f0f0;
    color: #6b6b6b;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.7;
    text-align: center;
}

.wishlist-tabs .nav-link.active .wishlist-tab-count {
    background-color: var(--brand-primary);
    color: var(--brand-ink);
}

.wishlist-new-tab .nav-link {
    color: var(--brand-text);
    font-weight: 600;
}

/* nazov vybraneho zoznamu a jeho akcie pod zalozkami */
.wishlist-selected-name {
    font-size: 2.4rem;
}

/* ikonky premenovania/zmazania vedla nazvu zoznamu */
.wishlist-list-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: 1.2rem;
    border-radius: 50%;
    color: #9a9a9a;
    font-size: 1.4rem;
}

/* ikony patria k sebe, medzeru drzim len medzi nazvom a prvou z nich */
.wishlist-list-action + .wishlist-list-action {
    margin-left: 0;
}

.wishlist-list-action:hover {
    background-color: #f2f2f2;
    color: var(--brand-text);
}

.wishlist-list-action-danger:hover {
    background-color: rgba(220, 38, 38, 0.1);
    color: var(--brand-red);
}

/* Male dialogy (premenovanie, potvrdenie zmazania) beru vzhlad z .newsletter-popup,
   ktory je ale stavany na formular: 740px siroky a 64px odsadenie dokola. */
.wishlist-dialog {
    max-width: 440px;
    padding: 3.5rem;
    border-radius: 12px;
    background-color: #fff;
}

.wishlist-dialog h2 {
    margin-bottom: 2rem;
    font-size: 2.2rem;
}

.wishlist-dialog .btn {
    margin-bottom: 0;
}

.wishlist-new-menu {
    min-width: 260px;
    border-radius: 12px;
}

/* Potvrdzovacie tlacidlo ma vyplnit sirku okienka. Nespolieham sa na .btn-block:
   tema definuje .btn az za bootstrapom, takze mu prebije display: block. */
.wishlist-new-menu .btn,
.wishlist-picker-new .btn {
    display: block;
    width: 100%;
}

.wishlist-new-plus {
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1;
}

.wishlist-new-toggle-link {
    display: inline-block;
    font-weight: 600;
    color: var(--brand-text);
}

.wishlist-new-toggle-link:hover {
    color: var(--brand-primary-dark);
}

/* ---------------------------------------------------------------------------
   Import objednavky z XLSX (cart.jsp). Dialog berie vzhlad z .newsletter-popup,
   ktory je stavany na formular (740px, 64px odsadenie) - tu staci uzsi. */
.cart-import-dialog {
    max-width: 560px;
    padding: 3.5rem;
    border-radius: 12px;
    background-color: #fff;
}

.cart-import-dialog h2 {
    margin-bottom: 2rem;
    font-size: 2.2rem;
}

.cart-import-dialog .btn {
    margin-bottom: 0;
}

.cart-import-template {
    font-weight: 600;
    color: var(--brand-text);
}

.cart-import-template:hover {
    color: var(--brand-primary-dark);
}

/* Povodny <input type="file"> sa neda rozumne nastylovat, tak je schovany
   a kliká sa naň cez tlacidlo vedla. */
.cart-import-picker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 1.6rem;
    border: 1px dashed #d6d6d6;
    border-radius: 8px;
    background-color: #fafafa;
}

.cart-import-picker input[type="file"] {
    display: none;
}

.cart-import-filename {
    margin-left: 1.2rem;
    color: #9a9a9a;
    font-size: 1.3rem;
    word-break: break-all;
}

.cart-import-filename-set {
    color: var(--brand-ink);
    font-weight: 600;
}

/* vysledok importu moze byt dlhy zoznam chybnych riadkov */
#cart-import-result {
    max-height: 260px;
    overflow-y: auto;
}

/* ==========================================================================
   MOJE DOKUMENTY - filter dokladov
   Tema drzi .form-control-sm na 4.6rem (46px), takze policka prevysovali
   male tlacidlo FILTER (~29px) - tu sa vsetky ovladace zrovnaju na jeho vysku.
   ========================================================================== */
.documents-filter .form-control,
.documents-filter select.form-control:not([size]):not([multiple]) {
    height: 2.9rem;
    padding: 0.3rem 1rem;
    font-size: 1.2rem;
}

.documents-filter label {
    font-size: 1.2rem;
}

/* checkbox "Len nevyfakturovane" - zvisle vycentrovany na vysku ovladacov filtra */
.documents-filter #doc_filter_uninvoiced_group label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.9rem;
    margin: 0;
}

/* --------------------------------------------------------------------------
   MOJE DOKUMENTY - detail dokladu ako karta
   Fragment z ajax_document_detail.jsp; lezi v bunke tabulky zoznamu
   (.order-table-container je text-center, preto text-align: left).
   -------------------------------------------------------------------------- */
.document-detail-card {
    margin: 1rem 0 1.5rem;
    padding: 2rem 2.4rem;
    border: 1px solid #e7e7e7;
    border-radius: 12px;
    background: #fff;
    text-align: left;
}

.document-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #ededed;
}

.document-detail-title {
    color: var(--brand-ink);
    font-size: 1.8rem;
    font-weight: 600;
}

.document-detail-meta {
    margin-top: 0.4rem;
    color: #777;
    font-size: 1.3rem;
}

/* bodky medzi udajmi v meta riadku */
.document-detail-meta span + span::before {
    content: "\00b7";
    margin: 0 0.7rem;
    color: #bbb;
}

.document-detail-pdf {
    white-space: nowrap;
}

.document-detail-section {
    margin: 2rem 0 1rem;
    color: #999;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.document-detail-items {
    margin-bottom: 0;
}

.document-detail-items thead th {
    border-top: none;
    white-space: nowrap;
}

/* nadpisove / poznamkove riadky poloziek */
.document-detail-caption td {
    background: #fafafa;
}

.document-detail-total td {
    border-top: 2px solid #e7e7e7;
    font-size: 1.4rem;
}

.document-detail-description {
    margin: 1.5rem 0 0;
}

.document-detail-payment {
    padding: 1.5rem 2rem;
    border-radius: 8px;
    background: #f7f7f7;
}

.document-detail-payment-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 2.4rem;
}

.document-detail-payment-list dt {
    margin: 0;
    color: #777;
    font-weight: 400;
}

.document-detail-payment-list dd {
    margin: 0;
    color: var(--brand-ink);
}

.document-detail-related {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.document-detail-related-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.2rem;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    color: var(--brand-text);
}

.document-detail-related-chip:hover {
    border-color: var(--brand-primary);
    color: var(--brand-text);
    text-decoration: none !important;
}

.document-detail-items .document-detail-item-code {
    width: 14rem;
    white-space: nowrap;
}

/* dlhe popisy produktov z Offerisu - zrazene na dva riadky */
.document-detail-item-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #999;
    font-size: 1.2rem;
}

/* mnozstvo v kosiku: stepper a vyber jednotky (ks / karton / paleta) v jednom riadku,
   prepocet na zakladne jednotky ako poznamka pod nimi */
.cart-qty-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.cart-qty-group .product-single-qty {
    margin: 0;
}

/* :not() kvoli specificite - tema ma select.form-control:not([size]):not([multiple]) s height 6rem */
select.form-control.cart-unit-select:not([size]):not([multiple]) {
    width: auto;
    max-width: 14rem;
    height: 4.2rem;
    margin: 0;
    padding: 0 0.6rem;
    font-size: 1.2rem;
}

.cart-qty-note {
    margin-top: 0.4rem;
    color: #999;
    font-size: 1.1rem;
    text-align: center;
}

/* stepper mnozstva (- | input | +) ako jedna suvisla input-group:
   globalne 8px zaoblenie .btn/.form-control nechavalo obluciky aj na vnutornych stykoch */
/* !important kvoli globalnemu .btn / .form-control { border-radius: 8px !important } vyssie */
.bootstrap-touchspin .bootstrap-touchspin-down {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.bootstrap-touchspin .bootstrap-touchspin-up {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.bootstrap-touchspin .horizontal-quantity.form-control {
    border-radius: 0 !important;
}