body {
    font-family: 'Inter', sans-serif !important;
}


/************************************************************
GLOBAL – HEADER CONTAINERS
************************************************************/

.header-rounded-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}


.header-row-1,
.header-row-2,
.top-header-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
}

/************************************************************
FIX THEME UNDERLINES / DEFAULT STYLES
************************************************************/

.header-icons a,
.header-icons a::before,
.header-icons a::after,
.icon-bubble::before,
.icon-bubble::after,
.contact-box,
.contact-box * {
    text-decoration: none !important;
    box-shadow: none !important;
}

/************************************************************
HEADER ROW 1 LAYOUT
************************************************************/

.header-row-1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;

    background: linear-gradient(
    135deg,
    rgba(0,119,182,0.92),
    rgba(0,96,155,0.92)
);
    backdrop-filter: blur(22px);
    border-radius: 0 0 28px 28px;
}

/************************************************************
LEFT SECTION — LOGO + SEARCH (FLEX)
************************************************************/

.header-left-full {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
}

.header-logo {
    width: 115px;
    height: auto;
}

/************************************************************
SEARCH AREA (FLEXIBLE WIDTH)
************************************************************/

.header-search-area {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 6px 12px;
    background: rgba(255,255,255,0.10);
    border-radius: 18px;
    border: 1px solid rgba(200,220,255,0.25);
    backdrop-filter: blur(14px);

    flex: 1;
    max-width: 900px;
    margin-left: 45px;
}
/* ROW 1 – unified box style (shape only) */
.header-search-area,
.dropdown-selected,
.search-button,
.contact-box,
.icon-bubble {
    border-radius: 22px;
    box-shadow:
        0 10px 26px rgba(0,0,0,0.14),
        inset 0 1px 0 rgba(255,255,255,0.22);
}

/************************************************************
DROPDOWN (Custom)
************************************************************/

.custom-dropdown {
    width: 185px;
    cursor: pointer;
    position: relative;
    z-index: 9999999;
}

.dropdown-selected {
    padding: 8px 12px;
    border-radius: 14px;

    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(200,220,255,0.32);
    backdrop-filter: blur(18px);

    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 46px;
    left: 0;
    width: 100%;

    background: rgba(240,245,255,0.50);
    border-radius: 14px;
    border: 1px solid rgba(200,220,255,0.35);
    backdrop-filter: blur(22px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.15);

    z-index: 2147483647 !important;

    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.dropdown-menu.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.dropdown-item {
    padding: 12px 14px;
    font-size: 15px;
    color: #0a1a3a;
    cursor: pointer;
    transition: 0.2s;
}

.dropdown-item:hover {
    background: rgba(220,235,255,0.85);
}

/************************************************************
SEARCH FORM (WordPress)
************************************************************/

.search-form {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1;
}

.search-input {
    height: 32px;
    padding: 8px 14px;
    flex: 1;

    background: rgba(255,255,255,0.18);   /* very subtle */
    border: 1px solid rgba(0,0,0,0.25);    /* clear but soft */
    border-radius: 14px;                   /* smoother */

    outline: none;

    color: #0a1a3a;
    font-size: 14px;
}
.search-input:focus {
    border-color: rgba(0,119,182,0.8);
    background: rgba(255,255,255,0.24);
}


.search-button {
    height: 32px;
    width: 32px;
    border-radius: 50%;

    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(200,220,255,0.32);
    backdrop-filter: blur(14px);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 16px;
    cursor: pointer;
    transition: 0.25s;
}

.search-button:hover {
    background: rgba(255,255,255,0.4);
}

/************************************************************
CONTACT BOX (RIGHT SIDE)
************************************************************/

.header-right-section {
    display: flex;
    align-items: center;
    gap: 18px;
}

.contact-box {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 18px;

    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 999px;

    backdrop-filter: blur(18px) saturate(140%);

    box-shadow:
        0 10px 26px rgba(0,0,0,0.14),
        inset 0 1px 0 rgba(255,255,255,0.25);

    font-size: 15px;
    color: #ffffff;
    font-weight: 600;

    transition: 0.25s ease;
}

.contact-box:hover {
    background: rgba(255,255,255,0.32);
}

.phone-icon {
    font-size: 19px;
}

/************************************************************
RIGHT-SIDE ICON BUBBLES
************************************************************/

.header-icons {
    display: flex;
    align-items: center;
    gap: 14px;
}

.icon-bubble {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 22px;
    color: #ffffff;

    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 18px;

    backdrop-filter: blur(16px) saturate(140%);

    box-shadow:
        0 8px 22px rgba(0,0,0,0.14),
        inset 0 1px 0 rgba(255,255,255,0.22);

    transition: 0.25s ease;
}


.icon-bubble:hover {
    background: rgba(255,255,255,0.32);
}

/************************************************************
ROW 2 — CATEGORY BUTTONS
************************************************************/

.header-row-2 {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 18px 0;
}

.cat-button {
    padding: 14px 26px;
    border-radius: 20px;

    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 18px;
    font-weight: 600;
    color: #222222;
    text-decoration: none;

    background: linear-gradient(
        135deg,
        rgba(205, 220, 255, 0.22) 0%,
        rgba(175, 195, 255, 0.26) 50%,
        rgba(150, 170, 240, 0.20) 100%
    );
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);

    border: none !important;

    transition: 0.25s ease;
}

.cat-button:hover {
    background: linear-gradient(
        135deg,
        rgba(210, 225, 255, 0.30) 0%,
        rgba(185, 205, 255, 0.35) 50%,
        rgba(160, 180, 250, 0.27) 100%
    );
    transform: scale(1.05);
}


/************************************************************
   MOBILE HEADER — FINAL CLEAN VERSION
************************************************************/
@media (max-width: 768px) {

    /* Μην επιτρέπει οριζόντιο scroll */
    html, body {
        overflow-x: hidden;
    }

    .header-rounded-wrapper,
    .header-row-1,
    .header-left-full,
    .header-search-area {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /***********************
     ROW 1 — ΚΥΡΙΟ HEADER
     LOGO + DROPDOWN + SEARCH ΣΕ ΜΙΑ ΓΡΑΜΜΗ
    ***********************/
    .header-row-1 {
        padding: 12px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .header-left-full {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Logo */
    .header-logo {
        width: 70px !important;
        height: auto;
        flex-shrink: 0;
    }

    /* Dropdown */
    .custom-dropdown {
        flex-shrink: 0;
        width: auto;
        min-width: 125px;  /* αρκετό για "Όλες οι κατηγορίες" */
    }

    .dropdown-selected {
        padding: 7px 10px !important;
        font-size: 13px !important;
    }

    /* SEARCH WRAPPER */
    .header-search-area {
        flex: 1;
        min-width: 0;
        max-width: 100%;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        margin-left: 0 !important;
    }

    .search-form {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: 0;
    }

    .search-input {
        flex: 1;
        min-width: 0 !important;
        width: 100% !important;
        height: 34px;
        padding: 6px 10px;
        font-size: 14px;
    }

    .search-button {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        border-radius: 10px;
    }

/* GLOBAL RESET – REMOVE WHITE BORDER AROUND PAGE */
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* ================================
   NORMALIZE & CENTER ALL HEADER ICONS
   ================================ */

/* Header right icons (phone, user, cart) */
.contact-box svg,
.header-icons svg {
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0;

    /* avoid weird scaling */
    max-width: 24px;
    max-height: 24px;
}

/* Category icons (row 2) */
.header-row-2 .cat-button svg {
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0;
    max-width: 24px;
    max-height: 24px;

    /* tiny vertical tweak so they look centered with the text */
    position: relative;
    top: 1px;
}

/* Make sure the containers actually center their content */
.header-icons,
.contact-box,
.header-row-2 .cat-button {
    display: inline-flex;
    align-items: center;
}

/* small gap between icon and text in row 2 */
.header-row-2 .cat-button {
    gap: 8px;
}

.dropdown-menu { pointer-events: auto; }
.dropdown-menu.show { pointer-events: auto; }
/* ======================================================
   MOBILE — CATEGORY BAR (HORIZONTAL SCROLL)
====================================================== */
@media (max-width: 768px) {

  .header-row-2 {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;

    gap: 12px;
    padding: 10px 12px 14px;

    overflow-x: auto;
    overflow-y: hidden;

    white-space: nowrap;
    -webkit-overflow-scrolling: touch;

    background: linear-gradient(
      135deg,
      rgba(205,220,255,0.35),
      rgba(175,195,255,0.35)
    );

    border-radius: 0 0 22px 22px;
    scrollbar-width: none; /* Firefox */
  }

  .header-row-2::-webkit-scrollbar {
    display: none; /* Chrome / Android / iOS */
  }

  .header-row-2 .cat-button {
    flex: 0 0 auto;
    padding: 10px 18px;
    font-size: 14px;
    border-radius: 16px;
    white-space: nowrap;
  }

}
}
/* === NORMAL FULL WIDTH (NO OVERFLOW) === */
.header-rounded-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0;
  left: auto;
  right: auto;
}

/* === GLOBAL HARD RESET (DESKTOP + MOBILE) === */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}

/* If the theme adds top padding/margin on wrappers */
#page, .site, .site-content, .container, .wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Make sure your custom header starts at the very top */
#custom-global-header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}