/* =========================================================
   HEADER — two rows: (search / logo / icons) then centered nav
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:500;
  background:rgba(251,248,244,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--c-line);
}
.header-row-top{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  padding:20px 0 14px;
}
@media (max-width:900px){
  .header-row-top{ grid-template-columns:auto 1fr auto; padding:16px 0; }
}
.site-logo{ display:flex; align-items:center; justify-content:center; }
.site-logo svg{ height:34px; width:auto; }

.header-row-nav{
  border-top:1px solid var(--c-line);
  background:var(--c-cream-deep);
}
.header-row-nav .container{ display:flex; justify-content:center; }

.primary-nav{ display:none; }
@media (min-width: 1024px){
  .primary-nav{ display:flex; align-items:center; justify-content:center; gap:2px; }
}
.primary-nav > ul{ display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:wrap; }
.primary-nav > ul > li{ position:static; }
.primary-nav > ul > li > a{
  display:flex; align-items:center; gap:6px;
  padding:14px 18px;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--c-ink);
  transition:color .2s ease;
}
.primary-nav > ul > li > a:hover{ color:var(--c-denim-deep); }
.primary-nav .caret{ width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin-top:-2px; }

/* mega menu panel — filter-style columns + a large promo tile,
   spans the full header width like a dropdown "sheet" */
.mega-panel{
  position:absolute; left:0; right:0; top:100%;
  width:100%;
  background:var(--c-white);
  box-shadow:var(--shadow-card);
  border-top:2px solid var(--c-gold);
  padding:36px 0;
  display:none;
}
.menu-item-has-children{ position:static; }
.menu-item-has-children:hover .mega-panel,
.menu-item-has-children:focus-within .mega-panel{ display:block; }
.mega-panel-inner{
  max-width:var(--container); margin:0 auto; padding:0 28px;
  display:grid;
  grid-template-columns:1fr 1fr 1.1fr;
  gap:40px;
  align-items:start;
}
.mega-col{ grid-column:span 1; }
.mega-col h4{
  font-family:var(--f-body);
  font-size:.7rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--c-denim-deep);
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--c-line);
}
.mega-groups{ grid-column:span 2; max-width:420px; position:relative; }
.mega-groups > ul > li{ position:relative; }

/* depth-1 filter-group row (e.g. "Κατηγορίες", "Τύπος δέρματος") */
.mega-group > a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px;
  font-size:.9rem; font-weight:600;
  color:var(--c-ink);
  border-radius:var(--radius-sm);
  transition:background .15s ease;
}
.mega-group .mega-arrow{ font-size:1rem; color:var(--c-ink-soft); }
.mega-group:hover > a,
.mega-group:focus-within > a{ background:var(--c-blush); }

/* depth-2 flyout — leaf terms, distinct color from the rest of the panel */
.sub-menu-flyout{
  display:none;
  position:absolute; left:100%; top:0; margin-left:10px;
  min-width:230px; max-width:280px;
  background:var(--c-blush);
  padding:16px 18px;
  box-shadow:var(--shadow-card);
  z-index:5;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.mega-group:hover .sub-menu-flyout,
.mega-group:focus-within .sub-menu-flyout{ display:block; }
.sub-menu-flyout li a{
  display:block; padding:7px 0;
  font-size:.86rem; color:var(--c-ink);
}
.sub-menu-flyout li a:hover{ color:var(--c-denim-deep); }
@media (max-width:1180px){
  .sub-menu-flyout{ position:static; margin-left:0; margin-top:6px; box-shadow:none; clip-path:none; }
}

.mega-col ul li a{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding:7px 0;
  font-size:.88rem;
  color:var(--c-ink-soft);
}
.mega-col ul li a:hover{ color:var(--c-ink); }
.mega-col ul li a .mega-arrow{ font-size:.75rem; color:var(--c-line); }
.mega-promo{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}
.mega-promo img{ width:100%; height:100%; object-fit:cover; }
.mega-promo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(22,33,58,.85) 0%, rgba(22,33,58,.1) 60%);
}
.mega-promo-label{
  position:absolute; left:18px; right:18px; bottom:18px; z-index:2;
  color:var(--c-cream);
}
.mega-promo-label span{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--c-gold); }
.mega-promo-label strong{ display:block; font-family:var(--f-display); font-size:1.15rem; line-height:1.25; margin-top:.25em; }

.header-actions{ display:flex; align-items:center; justify-content:flex-end; gap:4px; }
.icon-btn{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  color:var(--c-ink);
  border-radius:50%;
  transition:background .2s ease;
}
.icon-btn:hover{ background:var(--c-cream-deep); }
.icon-btn svg{ width:20px; height:20px; }
.cart-count{
  position:absolute; top:2px; right:2px;
  min-width:16px; height:16px; padding:0 3px;
  background:var(--c-terracotta); color:var(--c-white);
  border-radius:50%;
  font-size:.62rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.menu-toggle{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px;
  border:1.5px solid var(--c-ink);
  background:transparent;
}
@media (min-width:1024px){ .menu-toggle{ display:none; } }
.header-search-mobile-toggle{ display:none; }
@media (max-width:900px){ .header-search-mobile-toggle{ display:flex; } }

.header-search{
  display:flex; align-items:center;
  border:1.5px solid var(--c-ink);
  border-radius:999px;
  padding:9px 18px;
  max-width:340px;
  justify-self:start;
}
.header-search svg{ width:16px; height:16px; flex-shrink:0; color:var(--c-ink-soft); }
.header-search input{
  border:none; background:transparent; width:100%;
  margin-left:10px;
  font-size:.88rem; color:var(--c-ink);
}
.header-search input:focus{ outline:none; }
@media (max-width:900px){ .header-search{ display:none; } }
.header-search.is-open{ display:flex; position:absolute; left:16px; right:16px; top:100%; max-width:none; background:var(--c-cream); z-index:400; margin-top:8px; }

/* mobile drawer */
.mobile-drawer{
  position:fixed; inset:0 0 0 auto;
  width:min(360px, 88vw); height:100%;
  background:var(--c-cream);
  transform:translateX(100%);
  transition:transform .3s ease;
  z-index:1000;
  overflow-y:auto;
  padding:24px;
  box-shadow:-10px 0 30px rgba(0,0,0,.15);
}
.mobile-drawer.is-open{ transform:translateX(0); }
.mobile-drawer-backdrop{
  position:fixed; inset:0; background:rgba(22,33,58,.4);
  opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:999;
}
.mobile-drawer-backdrop.is-open{ opacity:1; pointer-events:auto; }
.mobile-drawer summary{ font-weight:700; padding:14px 0; border-bottom:1px solid var(--c-line); list-style:none; display:flex; justify-content:space-between; }
.mobile-drawer details ul{ padding:6px 0 14px 12px; }
.mobile-drawer details ul li a{ display:block; padding:8px 0; color:var(--c-ink-soft); }
.mobile-drawer-close{ display:flex; justify-content:flex-end; margin-bottom:12px; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--c-ink); color:var(--c-cream); padding-top:80px; }
.footer-top{
  display:grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap:40px;
  padding-bottom:56px;
  border-bottom:1px solid rgba(251,248,244,.14);
}
@media (max-width: 860px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns:1fr; } }
.footer-brand svg{ height:34px; width:auto; margin-bottom:16px; }
.footer-brand p{ color:rgba(251,248,244,.65); max-width:32ch; }
.footer-col h4{
  font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--c-gold); margin-bottom:18px; font-family:var(--f-body); font-weight:700;
}
.footer-col ul li a{
  display:block; padding:6px 0;
  color:rgba(251,248,244,.75);
  font-size:.93rem;
}
.footer-col ul li a:hover{ color:var(--c-cream); }
.footer-social{ display:flex; gap:10px; margin-top:6px; }
.footer-social a{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(251,248,244,.3); border-radius:50%;
}
.footer-social a:hover{ background:var(--c-gold); border-color:var(--c-gold); color:var(--c-ink); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding:24px 0; font-size:.8rem; color:rgba(251,248,244,.55);
  flex-wrap:wrap; gap:12px;
}

/* =========================================================
   PAGE-LEVEL SHARED PATTERNS
   ========================================================= */
.page-hero{
  padding:72px 0 40px;
  text-align:center;
  background:var(--c-cream-deep);
  border-bottom:1px solid var(--c-line);
}
.page-hero .eyebrow{ justify-content:center; }
.page-hero .breadcrumb{
  display:flex; justify-content:center; gap:8px;
  font-size:.82rem; color:var(--c-ink-soft); margin-top:10px;
}

.prose{ max-width:76ch; margin:0 auto; }
.prose h2{ margin-top:1.6em; }
.prose ul{ list-style:disc; padding-left:1.4em; margin-bottom:1em; }
.prose ul li{ margin-bottom:.4em; color:var(--c-ink-soft); }

.breadcrumbs{ font-size:.82rem; color:var(--c-ink-soft); margin-bottom:18px; }
.breadcrumbs a:hover{ color:var(--c-denim-deep); }