/*
 * Custom style goes here.
 * A template should always ship with an empty custom.css
 */

/* g-online: horizontal product filter (FILTER button on category pages).
   The installed Promokit style.css sets only "flex-wrap: wrap", so the ".flex-column"
   class keeps the facets stacked vertically. The Alysum demo uses "flex-flow: wrap",
   which also resets the direction - restore that: facets side by side in columns. */
.pk-productfilter-pk-horizontal #search_filters {
    flex-direction: row;
    gap: 0; /* the demo has no gap: 5 columns of 20% fit in one row */
    justify-content: flex-start; /* partial last row lines up under the first row */
}

/* g-online: compact filter panel - text sizes in line with category links (13.5px)
   and product names (14px), shorter lists, less spacing, so the open panel does
   not push the products far down. */
.pk-productfilter-pk-horizontal #search_filters {
    padding: 15px 0 25px;
}
.pk-productfilter-pk-horizontal #search_filters .facet-title {
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 10px !important;
    padding-bottom: 8px;
}
.pk-productfilter-pk-horizontal #search_filters .facet-title .title-text {
    font-size: 15px;
    line-height: 20px;
}
.pk-productfilter-pk-horizontal #search_filters .facet ul {
    max-height: 180px;
}
.pk-productfilter-pk-horizontal #search_filters .facet ul li,
.pk-productfilter-pk-horizontal #search_filters .facet ul li label,
.pk-productfilter-pk-horizontal #search_filters .facet ul li a {
    font-size: 13.5px;
    line-height: 18px;
}
.pk-productfilter-pk-horizontal #search_filters .facet ul {
    gap: 6px;            /* theme default 14.4px */
}
.pk-productfilter-pk-horizontal #search_filters .facet ul li {
    margin-bottom: 0;
}
.pk-productfilter-pk-horizontal #search_filters > section {
    margin-bottom: 15px;
}
.pk-productfilter-pk-horizontal #search_filters > section {
    gap: 0;              /* removes the extra ~22px between a group title and its list */
}
/* "Aktív szűrők" (active filters) box above the groups: smaller and tighter */
.pk-productfilter-pk-horizontal #js-active-search-filters {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.pk-productfilter-pk-horizontal #js-active-search-filters .active-filter-title {
    font-size: 15px;
}

/* g-online: brand grid in the "Shop" mega menu (pkbrands widget) */
.elementor-widget-pkbrands .g-brand-placeholder {
    display: block;
    width: 100%;
    background: #f4f4f4;
    border-radius: 4px;
}
.elementor-widget-pkbrands figure { margin: 0; }
.elementor-widget-pkbrands figcaption {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 18px;
}
.elementor-widget-pkbrands figcaption a { color: #333; }
.elementor-widget-pkbrands figcaption a:hover { text-decoration: underline; }
/* compact logos in the Shop mega menu only (template menu-4); the homepage brand block keeps its size */
.elementor-4010000 .elementor-widget-pkbrands img,
.elementor-4010000 .elementor-widget-pkbrands .g-brand-placeholder {
    height: 80px !important;
    width: 100%;
    aspect-ratio: auto !important;
    object-fit: contain;
}
.elementor-4010000 .elementor-widget-pkbrands .pk-ce-widget.pk-grid { row-gap: 18px !important; }

/* g-online: Alysum 9.4.1 hides ".hidden" with !important ("body .hidden {display:none !important}"),
   which overrides the Creative Elements "Filter Button: Show" rule of the product list widget.
   Show the FILTER button again - only on pages that have the filter panel. */
body:has(#search_filters_wrapper) #main-content .pk-filter-button.hidden {
    display: inline-block !important;
}

/* g-online: Beauty Capsule logo (220x50) + 4 menu items must fit on laptop screens
   (desktop header is used from 1025px). Smaller logo and menu spacing between 1025 and 1366px. */
@media (min-width: 1025px) and (max-width: 1366px) {
    .elementor-15010000 .elementor-element.elementor-element-320e8cc2 .pk-nav-ul { column-gap: 36px !important; }
    .elementor-15010000 .header_logo_img img.logo {
        width: 190px !important; min-width: 190px !important; height: 43px !important;
    }
}
@media (min-width: 1025px) and (max-width: 1240px) {
    .elementor-15010000 .elementor-element.elementor-element-320e8cc2 .pk-nav-ul { column-gap: 16px !important; }
    .elementor-15010000 .elementor-element-320e8cc2 .pk-nav-ul > li .pk-nav-link { white-space: nowrap; font-size: 12px; }
    .elementor-15010000 .header_logo_img img.logo {
        width: 170px !important; min-width: 170px !important; height: 39px !important;
    }
}

/* g-online: language-specific page-builder elements (CSS class gonline-lang-hu / gonline-lang-en).
   Used for the header tagline (header template 15). */
body:not(.lang-hu) .gonline-lang-hu,
body:not(.lang-en) .gonline-lang-en { display: none !important; }

/* g-online: reassurance boxes (cart, checkout, product page) – title and text in the same size,
   icon on the left, title above its description instead of both glued on one line. */
.blockreassurance_product > div { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; align-items: center; text-align: left; }
.blockreassurance_product > div > .item-product { grid-column: 1; grid-row: 1 / span 2; }
.blockreassurance_product > div > .block-title,
.blockreassurance_product > div > p { grid-column: 2; font-size: 15px !important; line-height: 1.4 !important; margin: 0 !important; }
.blockreassurance_product > div > .block-title { align-self: end; font-weight: 600; }
.blockreassurance_product > div > p { align-self: start; }

/* g-online: checkout – space between the terms checkbox and the "Rendelés leadása" button */
#checkout #conditions-to-approve { margin-bottom: 22px; }

/* g-online: header top bar (template 15, section 50e1319d) – tagline on one line, aligned with
   the first main menu item, and tagline + right-hand links vertically centred in the bar. */
.elementor-15010000 .elementor-element-50e1319d > .elementor-container > .elementor-row { align-items: center; }
.elementor-15010000 .elementor-element-50e1319d > .elementor-container > .elementor-row > .elementor-column > .elementor-column-wrap { display: flex; align-items: center; }
.elementor-15010000 .elementor-element-50e1319d .gonline-lang-hu .elementor-heading-title,
.elementor-15010000 .elementor-element-50e1319d .gonline-lang-en .elementor-heading-title { white-space: nowrap; text-align: left; line-height: 1.4; padding-left: 9px; }
.elementor-15010000 .elementor-element-50e1319d .elementor-element.gonline-lang-hu,
.elementor-15010000 .elementor-element-50e1319d .elementor-element.gonline-lang-en { margin-bottom: 0 !important; }
@media (max-width: 1080px) {
    .elementor-15010000 .elementor-element-50e1319d .gonline-lang-hu .elementor-heading-title,
    .elementor-15010000 .elementor-element-50e1319d .gonline-lang-en .elementor-heading-title { white-space: normal; }
}

/* g-online: on phones a home-page product carousel is ~50px wider than the screen, which made the whole
   page scroll sideways (and pushed the CIB logos partly off-screen). clip keeps sticky elements working. */
@media (max-width: 767px) { html, body { overflow-x: clip; } }

/* g-online: product image viewer (PhotoSwipe) – Alysum's original dark overlay, with a white
   background only behind the image itself (the product photos have transparent backgrounds). */
.pswp .pswp__img { background: #ffffff; }

/* g-online: filter column (search results, categories, new products) – tighter rows
   (Alysum default gap 14px between the filter items). */
#search_filters .facet ul { row-gap: 4px; }
#search_filters .facet ul li .facet-label,
#search_filters .facet ul li .facet-label a,
#search_filters .facet ul li .facet-label span { font-size: 14px; line-height: 18px; }
/* …but not in the horizontal filter panel of the category pages (keeps its compact 13.5px) */
.pk-productfilter-pk-horizontal #search_filters .facet ul li .facet-label,
.pk-productfilter-pk-horizontal #search_filters .facet ul li .facet-label a,
.pk-productfilter-pk-horizontal #search_filters .facet ul li .facet-label span { font-size: 13.5px; line-height: 18px; }

/* g-online: mobile header (Creative Elements template "mobile-header") – black menu bar:
   menu icon on the left (the "Menü" text is hidden, it opened the same menu as the icon),
   language switch "EN | HU" (widget fa99c192) on the right. */
.elementor-element-64e63cdc > .elementor-column-wrap > .elementor-widget-wrap { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; width: 90%; margin: 0 auto; }
.elementor-element-25b9a749 { width: auto; max-width: none; margin: 0 !important; }
.elementor-element-25b9a749 .pk-menu-icon > span { display: none; }
/* the menu list itself is only shown in the slide-in menu panel, not in the bar */
.elementor-element-25b9a749 .pk-nav > .pk-nav-ul { display: none !important; }
.elementor-element-fa99c192 { width: auto; margin: 0 !important; }
.elementor-element-fa99c192 .pk-languages .current-item { display: none; }
.elementor-element-fa99c192 .pk-languages .opt-list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; position: static; opacity: 1; visibility: visible; background: none; box-shadow: none; }
.elementor-element-fa99c192 .pk-languages .opt-list li { padding: 0; }
.elementor-element-fa99c192 .pk-languages .opt-list li::after { content: none; }
.elementor-element-fa99c192 .pk-languages .opt-list li + li::before { content: "|"; color: #777777; margin: 0 8px; }
.elementor-element-fa99c192 .pk-languages .opt-list a { display: inline; padding: 0; font-size: 14px; line-height: 20px; color: #aaaaaa; text-transform: uppercase; letter-spacing: 1px; }
.elementor-element-fa99c192 .pk-languages .opt-list a.active { color: #ffffff; font-weight: 700; }

/* g-online: home page main slider (widget 74b605c5, HU and EN) on phones. The slider is only ~200 px high
   there and the text box 30 % wide, so the title was pushed above the top edge and the button text
   ("SHOP NOW") wrapped below the bottom edge. Wider, more compact text box; button on one line. */
@media (max-width: 767px) {
    .elementor-element-74b605c5 .pk-slide-content { width: 42% !important; max-width: 42% !important; }
    .elementor-element-74b605c5 .pk-slide-title { font-size: 11px !important; line-height: 1.2 !important; margin: 0 0 4px !important; }
    .elementor-element-74b605c5 .pk-slide-description { margin: 0 0 8px !important; font-size: 11px !important; line-height: 1.25 !important; }
    .elementor-element-74b605c5 .pk-slide-description > div > div:first-child { font-size: 15px !important; margin-bottom: 5px !important; line-height: 1.1 !important; }
    .elementor-element-74b605c5 .pk-slide-description > div > div + div { line-height: 1.25 !important; }
    .elementor-element-74b605c5 .pk-slide-button { padding: 6px 12px !important; font-size: 10px !important; letter-spacing: 1px !important; white-space: nowrap; align-self: flex-end; }
}

/* g-online: loyalty points box (myprestaloyalty) on product page and cart - gift icon size */
#loyalty_product .loyalty-icon, #loyalty_cart .loyalty-icon { width: 28px; height: 28px; margin-bottom: 4px; }
/* same text size as the product description (16px / 23px) */
#loyalty_product, #loyalty_product b, #loyalty_cart, #loyalty_cart b { font-size: 16px; line-height: 23px; }