/*
 * 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 (gonlineloyalty) on product page and cart: same text size as the product description (16px / 23px). Box and icon size are in the module's front.css. */
#loyalty_product, #loyalty_product b, #loyalty_cart, #loyalty_cart b { font-size: 16px; line-height: 23px; }

/* g-online: "accounts from the old webshop were not migrated" notice on the sign-in forms (_partials/gonline-account-notice.tpl). */
.gol-account-notice { margin: 0 0 20px; padding: 12px 16px; border-left: 4px solid #F19D76; background: #fdf1eb; color: #313537; font-size: 14px; line-height: 20px; text-align: left; }
.gol-account-notice strong { display: block; margin-bottom: 4px; }

/* g-online: Beauty Point loyalty info page (CMS 12, HU + EN). Alysum look: ink #313537, text #777,
   light panels #f8f8f8, Archivo Narrow uppercase headings, square corners. */
.gol-bp { max-width: 980px; margin: 0 auto; color: #777; font-size: 16px; line-height: 1.6; text-align: left; }
.gol-bp li, .gol-bp-example p { text-align: left; }
.gol-bp-banner { margin: 0 0 30px; }
.gol-bp-banner img { display: block; width: 100%; height: auto; }
.gol-bp-lead { font-size: 18px; line-height: 1.6; color: #313537; text-align: center; max-width: 760px; margin: 0 auto 40px; }
.gol-bp .gol-bp-h { font-family: "Archivo Narrow", sans-serif; text-transform: uppercase; letter-spacing: 2px; font-size: 22px; color: #313537; text-align: center; margin: 45px 0 20px; }
.gol-bp-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.gol-bp-tile { background: #f8f8f8; padding: 22px 15px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.gol-bp-num { font-family: "Archivo Narrow", sans-serif; font-size: 24px; font-weight: 700; color: #313537; text-transform: uppercase; letter-spacing: 1px; }
.gol-bp-steps { counter-reset: golbp; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.gol-bp-steps li { counter-increment: golbp; position: relative; padding: 14px 15px 14px 70px; border: 1px solid #e5e5e5; min-height: 56px; }
.gol-bp-steps li::before { content: counter(golbp); position: absolute; left: 0; top: 0; bottom: 0; width: 52px; background: #313537; color: #fff; font-family: "Archivo Narrow", sans-serif; font-size: 22px; display: flex; align-items: center; justify-content: center; }
.gol-bp-steps strong, .gol-bp-notes strong, .gol-bp-example strong { color: #313537; }
.gol-bp-example { background: #f8f8f8; border-left: 4px solid #313537; padding: 18px 22px; }
.gol-bp-example p { margin: 0; }
.gol-bp-notes { padding-left: 20px; margin: 0; }
.gol-bp-notes li { margin-bottom: 8px; }
.gol-bp-buttons { text-align: center; margin: 40px 0 15px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.gol-bp-buttons .btn { border-radius: 0; text-transform: uppercase; letter-spacing: 2px; padding: 12px 30px; }
.gol-bp-small { text-align: center; font-size: 14px; }
@media (max-width: 767px) {
    .gol-bp-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .gol-bp-lead { font-size: 16px; }
    .gol-bp-num { font-size: 20px; }
}

/* g-online: home slider (pkslider) - an image-only slide with a link is clickable as a whole
   (child override of pkelements/views/templates/pkslider.tpl). */
.pk-slide-link { position: absolute; inset: 0; z-index: 3; display: block; }

/* g-online: Gerovital brand store page (CMS 7), same look as the Beauty Point page (.gol-bp* above). */
.gol-st-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.gol-st-media img { display: block; width: 100%; height: auto; }
.gol-st-kicker { font-family: "Archivo Narrow", sans-serif; text-transform: uppercase; letter-spacing: 2px; font-size: 13px; color: #999; margin: 0 0 10px; }
.gol-bp .gol-st-title { font-family: "Archivo Narrow", sans-serif; text-transform: uppercase; letter-spacing: 2px; font-size: 28px; line-height: 1.25; color: #313537; margin: 0 0 18px; text-align: left; }
.gol-bp .gol-st-left { justify-content: flex-start; margin: 25px 0 0; }
.gol-st-band { background: #313537; color: #d4d4d4; padding: 50px 60px; margin: 55px 0 10px; text-align: center; }
.gol-bp .gol-st-band .gol-st-title { color: #fff; text-align: center; }
.gol-st-band .gol-st-kicker { color: #a8a8a8; }
.gol-st-band strong { color: #fff; }
.gol-st-band p { max-width: 760px; margin-left: auto; margin-right: auto; }
.gol-st-quote { font-family: "Archivo Narrow", sans-serif; font-size: 20px; letter-spacing: 1px; color: #fff; margin: 25px auto 0; padding-top: 22px; border-top: 1px solid #555; max-width: 420px !important; }
.gol-st-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.gol-st-card { background: #f8f8f8; display: flex; flex-direction: column; }
.gol-st-card img { display: block; width: 100%; height: 300px; object-fit: cover; }
.gol-st-card-body { padding: 25px 28px 28px; }
.gol-bp .gol-st-card h3 { font-family: "Archivo Narrow", sans-serif; text-transform: uppercase; letter-spacing: 1px; font-size: 19px; color: #313537; margin: 0 0 12px; }
.gol-st-card-body p:last-child { margin-bottom: 0; }
.gol-bp .gol-st-more { color: #313537; text-transform: uppercase; letter-spacing: 2px; font-size: 13px; border-bottom: 1px solid #313537; }
.gol-st-visit { align-items: start; }
.gol-st-name { font-family: "Archivo Narrow", sans-serif; font-size: 24px; text-transform: uppercase; letter-spacing: 2px; color: #313537; line-height: 1.2; }
.gol-st-name span { font-family: inherit; font-size: 14px; letter-spacing: 1px; color: #999; }
.gol-st-muted { color: #999; font-size: 14px; }
.gol-st-hours { border-collapse: collapse; margin: 0 0 18px; }
.gol-st-hours td { padding: 6px 30px 6px 0; border-bottom: 1px solid #e5e5e5; }
.gol-st-hours td:last-child { color: #313537; font-weight: 500; padding-right: 0; }
.gol-st .gol-bp-example { margin: 20px 0 0; }
.gol-st-strip { margin: 55px 0 10px; border: 1px solid #e5e5e5; padding: 22px 28px; display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.gol-st-strip p { margin: 0; flex: 1 1 360px; }
.gol-st-strip p:last-child { flex: 0 0 auto; }
.gol-st-strip .btn { border-radius: 0; text-transform: uppercase; letter-spacing: 2px; padding: 12px 30px; }
@media (max-width: 767px) {
    .gol-st-split, .gol-st-cards { grid-template-columns: 1fr; gap: 22px; }
    .gol-st-band { padding: 35px 20px; }
    .gol-bp .gol-st-title { font-size: 22px; }
    .gol-st-card img { height: 220px; }
}

/* g-online: home slider slide 2 (Márkaüzlet / Brand store, repeater item 72acd7f) sits on a dark shadow:
   light small title and a light button (the slider's colour settings are shared by all slides). */
.widget-pkslider .elementor-repeater-item-72acd7f .pk-slide-title { color: #e5e5e5; }
.widget-pkslider .elementor-repeater-item-72acd7f .pk-slide-title,
.widget-pkslider .elementor-repeater-item-72acd7f .pk-slide-description { text-shadow: 0 1px 4px rgba(0, 0, 0, .55); }
.widget-pkslider .elementor-repeater-item-72acd7f .pk-slide-button { background-color: #ffffff !important; color: #313537 !important; }
.widget-pkslider .elementor-repeater-item-72acd7f .pk-slide-button:hover { background-color: #e5e5e5 !important; color: #313537 !important; }