/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.7.1773775806
Updated: 2026-03-17 19:30:06

*/

/* Front-page hero overlay.
   The front-page header bars are position:fixed and Elementor reserves their space
   with .elementor-sticky__spacer, whose inline height tracks the logo (max-width:60%)
   and so changes with the viewport. The hero used to compensate with margin-top:-200px,
   which only lined up around 1440px wide and cut the top off the hero on smaller
   screens. Collapsing the spacer on the home page lets the hero sit flush at y=0 at
   every width, with the transparent header floating over it. Inline height, so
   !important is required. */
body.home .elementor-location-header .elementor-sticky__spacer {
    height: 0 !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
}

/* e60c364 holds nothing but an absolutely-positioned HTML widget containing the
   menu-colour <script> — no visual content, yet it still occupies 20px of flow and
   showed as a white strip above the hero once the spacers were collapsed. The script
   executes regardless of the container's height. Desktop-only element, hence no
   mobile equivalent. */
body.home .elementor-location-header .elementor-element-e60c364 {
    height: 0 !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Applied by the #newsletter anchor handler in functions.php: the footer signup field
   is a bare underlined input, so a focus ring alone is easy to miss when the jump
   barely moves the page. Pulse it once, then let the normal focus style take over. */
.dc-newsletter-focus {
    animation: dc-newsletter-pulse 1.8s ease-out;
}

@keyframes dc-newsletter-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
    20%  { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25); }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .dc-newsletter-focus {
        animation: none;
    }
}


/* ============================================================================
   Inner-page header (Header Inner templates 219 / 5093, both languages).
   The bar is position:fixed with a transparent background, so page content
   scrolls underneath it. A 400x150 near-black logo sat on top of the products.
   Shrink it and drop it back to roughly the weight of the 200-weight nav text
   beside it. !important because Elementor's own per-template rule
   (.elementor-219 .elementor-element.elementor-element-8f26785 img) outranks
   anything the child stylesheet can say without it.
   ========================================================================== */
/* Never crop the logo (client report, Sept 2026: "χάνεται η πάνω γραμμή").

   All four logo widgets - 8f26785 and bddbc8b in the inner header, 07c3076 and
   ab94fa5 on the front page, each shared by the EL and EN templates - are set in
   Elementor to `object-fit: cover` with `height: 100%` at the laptop breakpoint,
   and this kit puts viewport_laptop at 1440, so that is every laptop rather than
   an edge case. The artwork is 1006x403 (2.496:1) with only an 8px transparent
   margin, while the boxes come out at 2.667:1, so cover scaled to width and then
   shaved ~3px off the top - against a margin worth 1.9px at that scale, taking
   about 1.2px of the hairline that closes the diamond. Same on the bottom.

   `contain` cannot crop at any width or container size, which is why the fix sits
   here rather than in eight Elementor settings that a template re-save could undo.
   !important throughout: Elementor's per-template CSS outranks the child sheet. */
.elementor-location-header .elementor-element-8f26785 img,
.elementor-location-header .elementor-element-bddbc8b img,
.elementor-location-header .elementor-element-07c3076 img,
.elementor-location-header .elementor-element-ab94fa5 img {
    object-fit: contain !important;
    object-position: center center;
}

@media (min-width: 1025px) {
    .elementor-location-header .elementor-element-8f26785 img {
        max-width: 240px !important;
        /* auto, not a fixed 96px: the width then sets the height at the artwork's
           own ratio, so `contain` fills the box exactly with no letterboxing, and
           it stays correct if the logo file is ever replaced. */
        height: auto !important;
    }
}

.elementor-location-header .elementor-element-8f26785 img,
.elementor-location-header .elementor-element-bddbc8b img {
    opacity: 0.5;
    transition: opacity 0.3s, filter 0.3s;
}

/* When the Shop mega-menu is open the bar sits on a dark photo and every label
   turns white (.menu-change-color.is-active *). The logo is a raster PNG, so
   colour does not reach it - flatten it to pure white instead. Scoped to the
   two inner-header logo elements; the front-page logo is already white. */
body.dc-menu-open .elementor-location-header .elementor-element-8f26785 img,
body.dc-menu-open .elementor-location-header .elementor-element-bddbc8b img {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}

/* Checkout, Cart and My Account: the same transparent fixed bar let the form
   fields scroll through the logo, which read as the header coming apart. Give
   it a solid ground so content passes cleanly behind it. Lifted while the
   mega-menu is open, since that state deliberately shows the photo through.
   Same on catalog/search and product pages (2026-10-16): product photos slid
   behind the logo while scrolling. c9c8977 = tablet+ bar, b9e4b12 = phone bar. */
body.woocommerce-checkout:not(.dc-menu-open) .elementor-location-header .elementor-element-c9c8977,
body.woocommerce-cart:not(.dc-menu-open) .elementor-location-header .elementor-element-c9c8977,
body.woocommerce-account:not(.dc-menu-open) .elementor-location-header .elementor-element-c9c8977,
body.archive:not(.dc-menu-open) .elementor-location-header .elementor-element-c9c8977,
body.search:not(.dc-menu-open) .elementor-location-header .elementor-element-c9c8977,
body.single-product:not(.dc-menu-open) .elementor-location-header .elementor-element-c9c8977,
body.woocommerce-checkout:not(.dc-menu-open) .elementor-location-header .elementor-element-b9e4b12,
body.woocommerce-cart:not(.dc-menu-open) .elementor-location-header .elementor-element-b9e4b12,
body.woocommerce-account:not(.dc-menu-open) .elementor-location-header .elementor-element-b9e4b12,
body.archive:not(.dc-menu-open) .elementor-location-header .elementor-element-b9e4b12,
body.search:not(.dc-menu-open) .elementor-location-header .elementor-element-b9e4b12,
body.single-product:not(.dc-menu-open) .elementor-location-header .elementor-element-b9e4b12 {
    background-color: #ffffff !important;
    box-shadow: 0 1px 0 rgba(46, 44, 31, 0.08);
}

/* Product tabs start collapsed (see dc_ui_tweaks_script). Hide the panels until
   the script has closed them, otherwise the first one flashes open on load. */
.elementor-widget-n-tabs:not(.dc-acc-ready) .e-n-tabs-content > * {
    display: none !important;
}

/* ============================================================================
   Shop filter bar (FacetWP).

   The filter row is a flex row whose columns take their width from their
   content, so the size column collapsed to the width of its own "Μέγεθος"
   heading - 76px. Checkbox facets are laid out two-per-row via
   flex-basis: calc(50% - 3px), which inside 76px produced 35px boxes; "M-L"
   and "S-M" then broke across two lines *inside* the box, leaving boxes of two
   different heights in a ragged stack. Widen the column so the row has space,
   and let each box size to its own label instead of half the row.
   ========================================================================== */
/* Desktop only: the filter row is flex-wrap:nowrap, so a non-shrinking column
   must not be imposed at widths where the columns still have to give way. */
@media (min-width: 1025px) {
    .e-con.e-child:has(.facetwp-facet-megethos) {
        min-width: 220px;
        flex-shrink: 0;
    }
}

/* !important: the 50%-basis rule ships from Elementor's generated CSS, which
   outranks anything the child stylesheet can say by specificity alone. */
.facetwp-facet-megethos .facetwp-checkbox {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 54px;
    padding: 0 10px;
}

.facetwp-facet-megethos .facetwp-checkbox,
.facetwp-facet-megethos .facetwp-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    line-height: 1;
    white-space: nowrap;
}

/* A facet with no terms still renders its heading, leaving a labelled but empty
   column in the row - product_tag ("Κατηγορία") has three terms and not one
   product on any of them. Collapse the column while the facet is empty; it
   returns on its own as soon as the facet has something to show. */
.e-con.e-child:has(> .elementor-widget-facetwp-facet .facetwp-facet:empty) {
    display: none;
}

/* The colour facet's "See more" cap is applied by FacetWP as .facetwp-hidden on
   the swatch dot, but inc/filters.php wraps each dot in a .swatch-wrap alongside
   a text label. Hiding the dot alone left the label behind, so every colour past
   the 20th rendered as a dotless text pill and the "See N more" toggle appeared
   to do nothing. Let the wrapper follow its dot; FacetWP's own toggle stays the
   thing that adds and removes the class. */
.facetwp-facet-chroma .swatch-wrap:has(> .facetwp-color.facetwp-hidden) {
    display: none;
}

/* The "See N more" toggle renders at the theme's 16px body size next to 11px
   swatch labels, and sits inline on the last row. Give it its own line and the
   label's type so it reads as part of the facet. */
/* :not(.facetwp-hidden) matters: FacetWP renders BOTH toggles and hides the
   inactive one with .facetwp-hidden, so a bare display:block here showed
   "See 34 more" and "See less" side by side. */
.facetwp-facet-chroma .facetwp-toggle:not(.facetwp-hidden) {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    text-decoration: underline;
    cursor: pointer;
}

/* The toggles sit inside .facetwp-toggle-wrap, which is the actual flex item, so
   the full-row rule belongs there - on the link itself it just shrank back
   inline beside the last swatch. */
.facetwp-facet-chroma .facetwp-toggle-wrap {
    flex: 0 0 100%;
}


/* ============================================================================
   Product size guide table (see inc/size-guide.php).

   Restyled Sept 2026 to the client's reference chart. The previous version
   reproduced the OpenCart /megethologio page verbatim - #e9d5d3 ground, #765751
   bold text - which was the wrong reference: the client wants the sample chart's
   look, carried into the shop's own colours and face. So: no fill, shop ink on
   the page ground, Geologica at the site's weights, wide tracking on the size
   headings, and the unit set smaller than the numbers.

   The old padding (10px 30px) plus nowrap made the three columns wider than the
   tab panel, so the wrapper's overflow-x kicked in on desktop and hid the LARGE
   column behind a scrollbar - it was only ever meant to catch phones. The values
   are short enough to keep nowrap; the padding is what had to give.
   ========================================================================== */
.dc-size-guide {
    overflow-x: auto;
    max-width: 100%;
    font-family: "Geologica", sans-serif;
    color: #2E2C1F;
}

.dc-size-guide__table {
    margin: 0 auto;
    border-collapse: collapse;
    border: none;
    background: transparent;
    color: #2E2C1F;
    text-align: center;
}

/* !important on the ground and the rules: the theme paints tbody cells with a
   grey wash and a hairline that outrank a plain child-theme selector. */
.dc-size-guide__table th,
.dc-size-guide__table td {
    border: none !important;
    background: transparent !important;
    color: #2E2C1F;
    padding: 14px 18px;
    text-align: center;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 300;
    font-variant-numeric: tabular-nums;
}

/* SMALL / MEDIUM / LARGE - the tracking is what makes the chart read as the
   sample rather than as a data table. */
.dc-size-guide__table thead th {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.22em;
    padding-bottom: 22px;
}

/* ΣΤΗΘΟΣ / ΜΕΣΗ / ΓΟΦΟΙ sit left, against the centred columns. */
.dc-size-guide__table tbody th {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-align: left;
    padding-left: 0;
    padding-right: 28px;
}

/* "cm" a step down from the number it follows, as in the reference. */
.dc-size-guide__unit {
    font-size: 0.72em;
    font-weight: 300;
    letter-spacing: 0.02em;
    margin-left: 1px;
}

.dc-size-guide__note {
    margin: 22px 0 0;
    font-family: "Geologica", sans-serif;
    font-size: 11px;
    font-weight: 200;
    color: #6E6B58;
    white-space: normal;
    text-align: center;
}

/* Narrow phones only - the desktop table now fits its panel, so this is the
   fallback it was always meant to be. */
@media (max-width: 560px) {
    .dc-size-guide__table th,
    .dc-size-guide__table td {
        padding: 10px 9px;
        font-size: 13px;
    }

    .dc-size-guide__table thead th {
        font-size: 11px;
        letter-spacing: 0.14em;
        padding-bottom: 14px;
    }

    .dc-size-guide__table tbody th {
        font-size: 11px;
        padding-right: 12px;
    }
}

/* The tab panel is the scroll container's parent; without this the table's
   width can stretch the panel instead of scrolling inside it. */.elementor-widget-n-tabs .e-n-tabs-content .dc-size-guide {
    width: 100%;
}

/* ============================================================================
   Availability tab (see inc/availability.php). Never shows unit counts - the
   inline WooCommerce line is blanked for exactly that reason in stock-display.php.
   ========================================================================== */
.dc-availability {
    font-family: "Geologica", sans-serif;
    font-size: 12px;
    font-weight: 200;
    color: #2E2C1F;
}

.dc-availability__status {
    margin: 0 0 8px;
    font-weight: 400;
    letter-spacing: 0.04em;
}

.dc-availability__status.is-out {
    color: #9e1b32;
}

.dc-availability__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dc-availability__list li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(46, 44, 31, 0.12);
}

.dc-availability__list li:last-child {
    border-bottom: none;
}

.dc-availability__list li.is-out .dc-availability__state {
    color: rgba(46, 44, 31, 0.45);
}


/* ============================================================================
   Product tab strip: all four titles on ONE row at every width (client
   instruction, Sept 2026 - "στην ίδια γραμμή με τις άλλες επιλογές, να μη μπει
   καθόλου"). The fourth tab, ΔΙΑΘΕΣΙΜΟΤΗΤΑ, was wrapping to a second row, which
   read as a separate section rather than part of the bar.

   A fixed gap cannot solve this, because the strip is the product column and the
   column's share of the viewport jumps at the 1440 laptop breakpoint - it gets
   NARROWER above it. Measured on the Greek page (the tight case; the English
   labels are shorter), against 416px of title text:

     viewport    strip   widest gap that still fits
     768- 992    678+    stacked column, no constraint
     1024        437     7px
     1100        469     17px
     1200-1440   505-570 29-51px
     1441        428     4px      <- narrowest strip of any width
     1600        476     20px
     1920        572     52px

   So the fix is to stop specifying the gap and let the row distribute whatever
   space it has: space-between gives ~52px at 1920, which is what the original
   50px setting was reaching for, and closes down to 4px at 1441 instead of
   wrapping. nowrap plus flex-shrink:0 keeps the titles on one line and stops
   them shrinking into two-line text boxes, which is the other way this widget
   fails. The widget's own gap is zeroed so it cannot fight space-between.

   The margin at the tightest width is 12px (416px of text in a 428px strip), so
   RENAMING A TAB TO SOMETHING LONGER IS WHAT WILL BREAK THIS. overflow-x is the
   safety net if that happens: the strip scrolls rather than silently wrapping.
   ========================================================================== */
/* Elementor drives both of these through custom properties on the widget wrapper
   (--n-tabs-heading-justify-content comes out as flex-start from the widget's own
   "align left" setting, --n-tabs-title-gap from the space-between control), and
   its generated per-element selector outranks anything this stylesheet can say.
   Redeclaring the properties HERE wins regardless of specificity, because the
   heading is a different element from the wrapper they are set on - so the
   variables resolve from this rule for the heading and everything inside it. */
.elementor-widget-n-tabs .e-n-tabs-heading {
    --n-tabs-heading-justify-content: space-between;
    --n-tabs-title-gap: 0px;
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
}

.elementor-widget-n-tabs .e-n-tabs-heading::-webkit-scrollbar {
    display: none;
}

.elementor-widget-n-tabs .e-n-tab-title {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ==========================================================================
   Mobile photos (client report, 14 Oct 2026: "στο κινητό δεν προσαρμόζονται
   οι φωτογραφίες"):

   1. Product cards. The Product Loop Item template (113, element 498ad64)
      gives the card image a fixed height - 400px up to 768px, 34vw above -
      with object-fit: cover. The photos are 3:4, so a 371px wide phone card
      needs ~495px and lost ~100px top and bottom (heads cut off); on laptops
      34vw cropped them too (0.66-0.72 instead of 0.75, worst in the related
      products row). Let the height follow the 3:4 shape instead, at every
      width (extended to laptops and tablets on client request, same day).
      The related-products grid on product pages (widget c49ad84) shrinks to
      its content up to 768px, so its columns were only as wide as the
      fixed-height images; freeing the height alone collapsed the cards.
      Stretch that widget to the full row there so the columns have a width
      of their own.

   2. The inner header container (b9e4b12) carries margin-bottom: -150px up
      to 768px, so the page starts under the fixed header. Normal
      pages (cart, account, favorites...) were built with that offset in
      mind, but product and category pages were not: the main product photo
      started 46-65px above the top of the screen and the category
      breadcrumb was hidden. Only there, start the content below the header.
   ========================================================================== */
body.archive .elementor .elementor-element.elementor-element-498ad64 img,
body.search .elementor .elementor-element.elementor-element-498ad64 img,
body.single-product .elementor .elementor-element.elementor-element-498ad64 img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
}

/* Product photos come in several shapes (600x800, 600x815, 600x938...); "cover"
   in the 3:4 card cut up to 15% off heads and hems. Show the whole photo. */
.elementor .e-loop-item .elementor-element.elementor-element-498ad64 img {
    object-fit: contain;
}

@media (max-width: 768px) {
    body.single-product .elementor-element.elementor-element-c49ad84 {
        width: 100%;
        max-width: 100%;
        align-self: stretch;
    }

    body.single-product .elementor-location-header .elementor-element.elementor-element-b9e4b12,
    body.archive .elementor-location-header .elementor-element.elementor-element-b9e4b12,
    body.search .elementor-location-header .elementor-element.elementor-element-b9e4b12 {
        --margin-bottom: 0px;
    }
}

/* ==========================================================================
   Product cards on touch screens / phones (client request 2026-10-16)
   Additional CSS hides .loop-product-info (name, colours, sizes, price) and
   slides it over the photo on :hover. Phones cannot hover, so cards showed a
   bare photo. There, show the info in normal flow under the photo instead.
   ========================================================================== */
@media (hover: none), (max-width: 767px) {
    .loop-product-item .loop-product-info {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
    }
}