/* ==========================================================================
   COMMERCE HEADER (Strict Semantic Tokens & Visual Harmony)
   ========================================================================== */
.wsdt-commerce-header {
  transition: padding var(--transition-fast),
    background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.wsdt-commerce-header .wsdt-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-height);
  transition: height var(--transition-fast);
}

/* ==========================================================================
   FLEXBOX LAYOUT BOUNDARIES
   ========================================================================== */
.wsdt-commerce-header .wsdt-header-left {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  align-items: center;
}

.wsdt-commerce-header .wsdt-site-logo {
  display: block;
  max-width: 100%;
}

.wsdt-commerce-header .wsdt-site-logo img {
  height: calc(var(--header-logo-height) * 0.7);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  transition: height var(--transition-fast);
}

.wsdt-commerce-header .wsdt-header-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0; /* Τα Touch Targets δημιουργούν τον δικό τους αέρα στα κινητά */
}

@media all and (min-width: 768px) {
  .wsdt-commerce-header .wsdt-site-logo img {
    height: var(--header-logo-height);
  }
  .wsdt-commerce-header .wsdt-header-right {
    gap: var(
      --space-xs
    ); /* Ελάχιστο κενό μεταξύ των groups στο Tablet/Desktop */
  }
}

/* ==========================================================================
   SCROLLED STATE
   ========================================================================== */
.wsdt-commerce-header.is-scrolled .wsdt-header-inner {
  height: calc(var(--header-height) * 0.7);
}

.wsdt-commerce-header.is-scrolled .wsdt-site-logo img {
  height: calc(var(--header-logo-height) * 0.5);
}

@media all and (min-width: 768px) {
  .wsdt-commerce-header.is-scrolled .wsdt-site-logo img {
    height: calc(var(--header-logo-height) * 0.7);
  }
}

.wsdt-commerce-header.is-scrolled {
  box-shadow: var(--shadow-card-idle);
}

/* ==========================================================================
   E-COMMERCE ACTIONS & BURGER HARMONIZATION (Touch Targets)
   ========================================================================== */
.wsdt-commerce-actions {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: 0;
}

@media all and (min-width: 768px) {
  .wsdt-commerce-actions {
    gap: var(--space-xs);
    margin-left: var(--space-md);
  }
}

/* 1. Κοινός κανόνας για τέλεια τετράγωνα Touch Targets (40x40) */
.wsdt-action-icon,
.wsdt-burger-wrapper {
  width: calc(var(--unit-base) * 8); /* 40px */
  height: calc(var(--unit-base) * 8); /* 40px */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0; /* Καταργούμε τα τυχαία paddings, κεντράρουμε απόλυτα με flex */
}

/* 2. Στοίχιση των Action Icons */
.wsdt-action-icon {
  color: var(--text-body);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.wsdt-action-icon svg {
  width: var(--icon-size-faq); /* 24px */
  height: var(--icon-size-faq); /* 24px */
}

.wsdt-action-icon:hover {
  color: var(--color-secondary);
  transform: translateY(var(--interaction-lift));
}

/* 3. LOCAL VARIABLE OVERRIDE: Συρρίκνωση του Burger για να μοιάζει με 24px εικονίδιο */
.wsdt-burger-wrapper {
  --burger-width: calc(24 * var(--unit-px));
  --burger-height: calc(18 * var(--unit-px));
  --burger-line-height: calc(2 * var(--unit-px));
}

/* 4. Επανατοποθέτηση του Badge στο νέο 40x40 box */
.wsdt-header-badge {
  position: absolute;
  top: calc(var(--space-xs) * 1.5);
  right: calc(var(--space-xs) * 1.5);
  background-color: var(--color-secondary);
  color: var(--text-on-dark);
  font-size: calc(var(--font-size-sm) * 0.8);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-circle);
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   UTILITIES & OVERRIDES
   ========================================================================== */
@media all and (max-width: 1023px) {
  .hidden-on-mobile {
    display: none !important;
  }
}

@media all and (min-width: 1024px) {
  .hidden-on-desktop {
    display: none !important;
  }
}

.wsdt-burger-wrapper,
.wsdt-burger-wrapper .wsdt-burger-menu-container {
  display: block !important;
}

.wsdt-burger-wrapper .wsdt-header-menu-container {
  display: none !important;
}

/* 5. Επαναφορά του Burger Menu στο Flexbox Flow (Ακύρωση Base Theme Absolute Position) */
.wsdt-burger-wrapper .wsdt-main-menu-wrapper,
.wsdt-burger-wrapper .wsdt-burger-menu-container {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wsdt-burger-wrapper .wsdt-burger-toggle {
  position: relative !important; /* Ακυρώνει το absolute */
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important; /* Ακυρώνει πιθανά translateY(-50%) */
  margin: 0 !important;
}