/* ==========================================================================
   Giassaris — Reusable Components
   ========================================================================== */

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding-inline: 28px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 8px;
  border: 1.5px solid transparent;
  transition:
    background var(--t),
    color var(--t),
    border-color var(--t);
  white-space: nowrap;
}
.btn--primary {
  background: var(--c-black);
  color: var(--c-white);
}
.btn--primary:hover {
  background: var(--c-accent);
  color: var(--c-white);
}
.btn--accent {
  background: var(--c-accent);
  color: var(--c-white);
}
.btn--accent:hover {
  background: var(--c-accent-hover);
  color: var(--c-white);
}
/* Shared empty state (empty cart, 404, and other empty pages) */
.empty-state {
  max-width: 520px;
  margin-inline: auto;
  padding-block: 80px;
  text-align: center;
}
.empty-state h1 {
  margin-bottom: 12px;
}
.empty-state p {
  color: var(--c-text-muted);
  margin-bottom: 28px;
}
@media (max-width: 767px) {
  .empty-state {
    padding-block: 48px;
    padding-inline: 16px;
  }
  .empty-state h1 {
    font-size: 24px;
  }
  .empty-state p {
    font-size: var(--fs-sm);
  }
}
.btn--outline {
  background: transparent;
  color: var(--c-black);
  border-color: var(--c-black);
}
.btn--outline:hover {
  background: var(--c-black);
  color: var(--c-white);
}
.btn--light {
  background: var(--c-white);
  color: var(--c-black);
}
.btn--light:hover {
  background: var(--c-accent);
  color: var(--c-white);
  fill: var(--c-white);
}
.btn :is(svg, path) {
  transition: 0.3s ease all;
}
.btn--light:hover :is(svg, path) {
  fill: var(--c-white);
}
/* Frosted-glass button — transparent white → solid orange on hover.
   Use on dark/photo backgrounds (hero, banners, multimedia). */
.btn--glass {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-color: transparent;
  backdrop-filter: blur(6px);
}
.btn--glass:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.btn:hover svg {
  transform: translateX(5px);
}
/* Angle-right icon nudges right on hover (light + glass CTAs) */
.btn--light .icon,
.btn--glass .icon,
.btn--primary .icon {
  transition: transform var(--t-fast);
}
.btn--light:hover .icon,
.btn--glass:hover .icon,
.btn--primary:hover .icon {
  transform: translateX(5px);
}
.btn--lg {
  height: 60px;
  padding-inline: 36px;
  font-size: var(--fs-base);
}
.btn--block {
  width: 100%;
}
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--c-accent);
  padding-bottom: 3px;
}
.btn-link:hover {
  gap: 12px;
}

/* Round slider arrow — shared by the home product sliders (.pslider__nav) and the
   PDP gallery (.gallery__nav). Lives here, not home.css, because catalog pages
   don't load home.css. */
.pslider__btn,
.gallery__btn {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--c-border);
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  color: #808080;
  transition: var(--t);
}
.pslider__btn:hover,
.gallery__btn:hover {
  background-color: var(--c-border);
  color: var(--c-black);
}
.pslider__btn.swiper-button-disabled {
  opacity: .35;
  cursor: default;
}

/* ---- Form fields ---- */
.field {
  position: relative;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  height: 60px;
  padding: 18px 16px 8px;
  background: var(--c-white);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-sm);
  outline: none;
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast);
}
.field textarea {
  height: auto;
  min-height: 120px;
  padding-top: 22px;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--c-black);
}
.field label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--c-grey-500);
  pointer-events: none;
  transition: top var(--t-fast), transform var(--t-fast), font-size var(--t-fast);
}
/* textarea resting label: near the top (not vertically centred like inputs) */
.field textarea + label {
  top: 18px;
  transform: none;
}
/* floated: input/textarea focused or has a value */
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field label.is-floated {
  top: 10px;
  transform: none;
  font-size: 11px;
}
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--c-accent);
}
/* Agree/terms: long label + inline link — flow as one wrapping paragraph next to
   the box (the plain .checkbox flex splits text and link into two columns). */
.checkbox--agree { align-items: flex-start; }
.checkbox--agree input { flex: none; margin-top: 2px; }
.checkbox--agree > span { min-width: 0; }

/* Agree/terms popup (native <dialog> built by common.js's .agree handler).
   margin:auto restores the centering the global reset zeroes out. */
.agree-modal {
  width: min(720px, 92vw);
  max-height: 85vh;
  margin: auto;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.agree-modal::backdrop { background: rgba(0, 0, 0, 0.5); }
.agree-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--c-border);
}
.agree-modal__title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); }
.agree-modal__close {
  flex: none;
  background: none;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--c-text-muted);
  cursor: pointer;
}
.agree-modal__close:hover { color: var(--c-black); }
.agree-modal__body {
  padding: 20px 24px;
  overflow-y: auto;
  max-height: calc(85vh - 65px);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
/* smaller headings on mobile — the policy H1/H2/H3 are oversized on a phone */
@media (max-width: 767px) {
  .agree-modal__title { font-size: 14px; }
  .agree-modal__body h1 { font-size: 19px; }
  .agree-modal__body h2 { font-size: 17px; }
  .agree-modal__body h3 { font-size: 16px; }
  .agree-modal__body h4 { font-size: 15px; }
}

/* ==========================================================================
   Top bars + Header
   ========================================================================== */
.klarna-bar {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--c-black);
  color: var(--c-white);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
}
.klarna-bar b {
  font-weight: var(--fw-bold);
}
.klarna-bar__logo {
  height: 18px;
  width: auto;
  display: block;
  border-radius: 4px;
}
.klarna-bar__more {
  color: var(--c-white);
  background: rgba(255, 255, 255, 0.16);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.klarna-bar__more:hover {
  background: rgba(255, 255, 255, 0.28);
}
.preheader {
  background: #ebebeb;
  font-size: var(--fs-xs);
  position: relative;
  z-index: 60;
}
.preheader__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
}
@media (max-width: 1200px) {
  .preheader {
    display: none;
  }
}

/* preheader dropdowns */
.phdrop {
  position: relative;
  height: 50px;
}
.phdrop__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
}
.phdrop__trigger svg {
  transition: transform var(--t-fast);
}
.phdrop:hover .phdrop__trigger {
  color: var(--c-black);
}
.phdrop:hover .phdrop__trigger svg {
  transform: rotate(180deg);
}
.phdrop__panel {
  position: absolute;
  top: 100%;
  width: 285px;
  background: #fff;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: var(--t);
  z-index: 70;
}
.phdrop__panel--left {
  left: 0;
}
.phdrop__panel--right {
  right: 0;
}
.phdrop:hover .phdrop__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.phdrop__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-black);
  margin-bottom: 14px;
}
.phdrop__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--c-text-muted);
  margin-bottom: 8px;
}
.phdrop__addr {
  font-size: var(--fs-xs);
  color: var(--c-grey-500);
  margin-bottom: 6px;
}
.phdrop__text {
  font-size: 13px;
  color: var(--c-grey-500);
  line-height: 1.5;
  margin-bottom: 16px;
}
.phpill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 106, 0, 0.1);
  color: var(--c-accent) !important;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.phpill:hover {
  background: rgba(255, 106, 0, 0.18);
}
.phdrop__sublink {
  display: block;
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--c-black) !important;
  margin-top: 12px;
}
.phdrop__sublink:hover {
  color: var(--c-accent) !important;
}

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-white);
}
/* Divider under the header on every page except home (the hero sits flush there).
   page_class comes from the route — home is `common_home`. Mobile already has the
   border at all widths via catalog.css. */
body:not(.common_home) .header {
  border-bottom: 1px solid var(--c-border);
}
.header__inner { position: relative; }  /* anchor for the full-width mega dropdown */
.header__inner {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.header__logo img {
  height: 38px;
  width: auto;
}
/* category nav (single row) */
.header__nav {
  display: flex;
  /* stretch (not center) so each .header__cat-item fills the header height —
     that's what puts the hover bar on the header's bottom edge instead of
     right under the text. The link inside stays vertically centred. */
  align-items: stretch;
  align-self: stretch;
  gap: 10px;
  flex: 1;
  flex-wrap: wrap;
}
.header__cat {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  letter-spacing: var(--ls-tight);
  text-transform: none;
}
/* Hover bar: drawn on the (full-height) item so it lands on the header's bottom
   edge, inset 10px to match the link's padding. It's a background gradient, not
   an ::after — .header__cat-item must stay position:static for the mega's
   containing block (see below), so an absolute pseudo here would anchor to
   .header__inner instead. background-size animates the same left→right grow. */
.header__cat-item {
  background-image: linear-gradient(var(--c-accent), var(--c-accent));
  background-repeat: no-repeat;
  background-position: 10px 100%;
  background-size: 0 2px;
  transition: background-size 0.22s ease;
}
.header__cat-item:hover,
.header__cat-item.is-open {
  background-size: calc(100% - 20px) 2px;
}
/* Invisible hover bridge — keeps the mega open while the cursor travels
   from the link down to the panel (helmi's .nav-link::before gimmick). */
.header__cat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  display: block;
  pointer-events: none;
}
.header__cat:hover::before {
  pointer-events: all;
}
.header__cat:hover {
  color: var(--c-accent);
  z-index: 5;   /* lift so the hover bridge wins over later-in-DOM nav links */
}
.header__cat--sales {
  color: var(--c-accent);
  font-weight: var(--fw-bold);
  background: rgba(255, 106, 0, 0.1);
}
.header__cat--sales:hover {
  background: rgba(255, 106, 0, 0.18);
}

/* ---- Highlighted category (admin "Category Class" = highlighted) ---- */
.header__cat-item.highlighted .header__cat {
  background: rgba(255, 106, 0, 0.1);
  color: #e8590c;
  transition: background 0.2s ease, color 0.2s ease;
}
.header__cat-item.highlighted { background-image: none; } /* no underline bar on the pill */
.header__cat-item.highlighted .header__cat:hover {
  background: #e8590c;
  color: var(--c-white);
}

/* ---- Desktop mega dropdown (hidden <1024 with .header__nav) ---- */
.header__cat-item {
  position: static;          /* mega's containing block = .header__inner (full-width) */
  display: flex;
  align-items: center;
}
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--c-white);
  border-top: 1px solid var(--c-border);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.10);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  /* cap at 80vh but never below the fold: the panel opens ~195px down at page
     top, so also clamp to the space under the sticky header. Scrolls internally
     when a category still overflows. */
  max-height: min(80vh, calc(100vh - 200px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.header__cat-item.has-mega.is-open > .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mega__inner {
  padding: 28px 60px 32px;
}
.mega__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.mega__head-icon { font-size: 32px; line-height: 1; color: var(--c-accent); }
.mega__head-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  text-transform: none;
}
.mega__body {
  display: flex;
  gap: 40px;
}
.mega__links { flex: 1 1 60%; min-width: 0; }
/* Non-category menu items render no banner cards: single-column link list */
.mega--links-only .mega__groups { columns: 1; }
.mega__groups {
  columns: 220px 4;          /* groups auto-balanced across up to 4 columns; long lists gain a column instead of scrolling */
  column-gap: 32px;
}
.mega__group {
  break-inside: avoid;       /* never split a group across two columns */
  margin-bottom: 24px;
}
/* When a category contains a group with many children (>15, flagged in
   menu.twig), switch the group layout from balanced multicol to a grid so the
   oversized group can span 2 tracks and its siblings flow to the right of it
   (multicol only allows spanning ALL columns, which pushes siblings below). */
.mega__groups:has(.mega__group--split) {
  columns: unset;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0 32px;
  align-items: start;
}
.mega__group--split {
  grid-column: span 2;
}
.mega__group--split .mega__sublist {
  columns: 2;
  column-gap: 32px;
}
.mega__group-title {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  text-transform: none;
  transition: color 0.12s;
}
.mega__group-title:hover { color: var(--c-accent); }
.mega__group-icon { margin-right: 8px; font-size: 15px; color: var(--c-accent); }
img.mega__group-icon { display: inline-block; width: 28px; height: 28px; object-fit: contain; vertical-align: middle; }
img.mega__head-icon { display: inline-block; width: 32px; height: 32px; object-fit: contain; }
.mega__sublist { list-style: none; margin: 0; padding: 0; }
/* Placeholder banner cards (static gradients until real banner data exists) */
.mega__images {
  flex: 0 0 34%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-content: start;
}
.mega__img-card {
  position: relative;
  display: block;
  aspect-ratio: 6 / 7;   /* keep in sync with the resize in model/design/menu.php (440x513) */
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(135deg, var(--c-grey-700), var(--c-ink));
}
.mega__img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
/* Orange wash that slides up from the bottom on hover. Pseudo sits before the
   label in DOM order, so the label keeps painting on top without a z-index. */
.mega__img-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--c-accent) 0%, rgba(255, 106, 0, 0.85) 15%, rgba(255, 106, 0, 0) 42%);
  opacity: 0;
  transform: translateY(20%);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  /* the img's zoom transform makes it paint like a positioned element, i.e. above
     this pseudo (later in DOM order) — z-index puts the wash back on top */
  z-index: 1;
}
/* Hover effects only on banners that actually link somewhere — the card is always
   an <a>, but href is empty when no banner link and no category url is set. */
.mega__img-card[href]:not([href='']):hover::before {
  opacity: 1;
  transform: none;
}
.mega__img-card[href]:not([href='']):hover img {
  transform: scale(1.06);
}
.mega__img-label {
  position: absolute;
  z-index: 2;   /* above the hover wash */
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.mega__img-arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.2s, transform 0.2s;
}
.mega__img-card:hover .mega__img-arrow {
  background: rgba(255, 255, 255, 0.35);
  transform: translateX(4px);
}
.mega__link {
  display: block;
  padding: 4px 0;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  text-transform: none;
  transition: color 0.12s;
}
.mega__link:hover { color: var(--c-accent); }
.mega__see-all {
  display: flex;             /* full-width divider above the link */
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  transition: gap 0.2s;
}
.mega__see-all:hover { gap: 12px; color: var(--c-accent); }

.header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header__actions .search__btn i {
  top: 50%;
  transform: translateY(-50%);
}
.icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
}
.icon-btn--circle {
  background: var(--c-grey-150);
}
.icon-btn--circle:hover {
  background: var(--c-grey-300);
}
.icon-btn .badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  background: var(--c-accent);
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-bold);
  border-radius: var(--radius-pill);
}
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 130px;
  height: 40px;
  padding: 0 16px;
  background: var(--c-grey-150);
  border: 1px solid #ededed;
  border-radius: var(--radius-pill);
  color: var(--c-grey-500);
  position: relative;
}
.search input {
  flex: 1;
  min-width: 0; /* allow the input to shrink inside the flex parent (default is auto -> overflows) */
  width: 100%;
  background: none;
  border: none;
  outline: none;
  font-size: var(--fs-xs);
  color: var(--c-text);
}
.search i {
  font-size: 13px;
  position: absolute;
  right: 0.8rem;
  color: var(--c-text);
}
.search:hover {
  background: #fff;
}
.search:hover i {
  color: var(--c-accent);
}
.header__actions .icon-btn {
  border-radius: 0;
}
/* vertical divider between the search field and the account/wishlist/cart icons.
   Pseudo-element so the 38px icon box keeps its size. Spacing is measured to the
   *glyph*, not the box: the 38px box centres an ~16px icon, so ~11px of the
   right-hand gap is already inside it — hence the extra margin + negative left. */
.header__actions .account {
  margin-left: 12px;
}
.header__actions .account::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 28px;
  background: var(--c-border);
}
.header__actions .icon-btn:hover i {
  color: var(--c-accent);
}
/* below 1200px hide inline categories (would need burger — mobile pass) */
@media (max-width: 1200px) {
  .header__nav {
    display: none;
  }
}

/* burger + mobile search icon are desktop-hidden by default */
.header__burger { display: none; }
.header__search-toggle { display: none; }

@media (max-width: 1200px) {
  .header__inner {
    position: relative;
    min-height: 70px;
    height: 70px;
    gap: 0;
    justify-content: space-between;
  }
  .header__burger {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    /* cancel the container gutter so the cell sits flush to the header edge and
       the icon centres within the full cell (edge -> divider), not just its box */
    margin-left: calc(-1 * var(--gutter));
    font-size: 20px;
    color: var(--c-text);
    border-right: 1px solid var(--c-border);
  }
  /* logo centered absolutely between burger (left) and actions (right) */
  .header__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .header__logo img { height: 30px; }
  .search { display: none; }
  /* search lives only in the bottom nav on mobile */
  .header__search-toggle { display: none; }
  .header__action--hide-mobile { display: none; }
  /* burger (left) + cart (right) framed with full-height side dividers; the cart
     cell mirrors the burger — flush to the right edge, icon centred */
  .header__actions { width: 70px; height: 70px; justify-content: center; align-items: center; gap: 0; margin-right: calc(-1 * var(--gutter)); border-left: 1px solid var(--c-border); }
}

/* ==========================================================================
   Search modal — dark overlay with a centred search bar near the top
   ========================================================================== */
/* the header search box + toggle act as triggers; clicking opens the modal */
.search { cursor: pointer; }
.search input { pointer-events: none; }

.search-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  padding: clamp(64px, 12vh, 130px) 24px 0;
  background: #0d0d0d;
}
.search-modal.is-open { display: block; }
.search-modal__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
}
.search-modal__field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 18px;
  background: #fff;
  border-radius: 14px;
}
.search-modal__field > i { font-size: 16px; color: var(--c-grey-500); flex: none; }
.search-modal__field input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-size: 15px;
  color: var(--c-text);
}
.search-modal__tool {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--c-ink);
  background: transparent;
  border: 1.5px solid var(--c-border);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.search-modal__tool:hover { color: var(--c-accent); border-color: var(--c-accent); }
.search-modal__tool i { font-size: 14px; }
.search-modal__close {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  transition: background var(--t-fast);
}
.search-modal__close:hover { background: rgba(255, 255, 255, 0.26); }
.search-modal__close i { font-size: 14px; }

/* Mobile: opened from the bottom-nav search; no close button (tap backdrop or
   Esc to dismiss), and a rounder full-width bar to match the mobile design. */
@media (max-width: 1200px) {
  .search-modal { padding: 16px 12px 0; }
  .search-modal__close { display: none; }
  .search-modal__field { border-radius: 10px; height: 70px; padding: 0 12px 0 18px; }
}

/* --- Live-search dropdown (results injected by initSearchModal) --- */
.search-modal__results {
  width: 100%;
  max-width: 980px;
  margin: 18px auto 0;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.search-modal__results.is-loading { position: relative; min-height: 60px; }
.search-modal__results.is-loading::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: search-spin 0.7s linear infinite;
}
@keyframes search-spin { to { transform: rotate(360deg); } }
.live-search__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.live-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--c-text);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.live-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); }
.live-card__media { display: block; aspect-ratio: 1 / 1; background: #f5f5f5; }
.live-card__media img { width: 100%; height: 100%; object-fit: contain; }
.live-card__body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 14px; }
.live-card__name {
  font-size: 13px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.live-card__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.live-card__price del { color: var(--c-grey-500); font-size: 12px; }
.live-card__now { color: var(--c-accent); font-weight: 700; font-size: 14px; }
.live-search__all { text-align: center; margin: 18px 0 24px; }
.live-search__all .btn { display: inline-flex; align-items: center; gap: 8px; }
.live-search__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 16px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
}
.live-search__empty i { font-size: 18px; }
@media (max-width: 1023px) {
  .search-modal__results { margin-top: 12px; max-height: calc(100vh - 110px); }
  .live-search__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* ==========================================================================
   Mobile menu — Bootstrap offcanvas drill-down (mobile/tablet, <= 1200px)
   ========================================================================== */
/* The theme loads Bootstrap's JS bundle but NOT its CSS, so the offcanvas base
   behaviour (hide / fixed / slide / backdrop) is defined here, scoped to the
   mobile menu. Applied at all widths so #mmenu stays hidden on desktop too. */
.mmenu.offcanvas-start {
  position: fixed;
  top: 70px;
  left: 0;
  /* Subtract the header offset. At a flat 100vh the panel started 70px down and
     ran 70px PAST the bottom of the screen — and because .mmenu-panel is inset:0
     inside it, the panel's scrollHeight matched its clientHeight exactly, so it
     considered itself un-scrollable and refused to move. Long category lists
     (Είδη αναβάτη > Ένδυση) simply ended off-screen with no way to reach them.
     dvh so the height follows the mobile URL bar collapsing; the vh line above
     is the fallback for browsers without it. */
  height: calc(100vh - 70px);
  height: calc(100dvh - 70px);
  width: 100%;
  max-width: 460px;
  background: white;
  border: 0;
  box-shadow: 0 35px 30px rgba(0, 0, 0, 0.16);
  z-index: 1000001; /* match helmi: above bottom-nav + third-party widgets */
  visibility: hidden;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.mmenu.offcanvas-start.showing,
.mmenu.offcanvas-start.hiding,
.mmenu.offcanvas-start.show { visibility: visible; }
.mmenu.offcanvas-start.show:not(.hiding),
.mmenu.offcanvas-start.showing { transform: none; }
.mmenu .offcanvas-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
.offcanvas-backdrop {
  position: fixed;
  /* must match .mmenu's top — the header's own height. At 64px the backdrop
     started 6px above the header's bottom edge, so it dimmed a strip of the
     header itself whenever the header was taller than expected (Klarna bar). */
  top: 70px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000000; /* match helmi: backdrop just below #mmenu */
  background: #000;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.offcanvas-backdrop.show { opacity: 0.5; }

@media (max-width: 1200px) {
  /* burger → 3 morphing lines (the header cell layout is set above) */
  .header__burger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background var(--t-fast);
  }
  .header__burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--c-text);
    transition: transform 0.25s, opacity 0.2s, background 0.2s;
  }
  /* open state: orange cell, white lines morphed into an X */
  body:has(#mmenu.show) .header__burger,
  body:has(#mmenu.showing) .header__burger { background: var(--c-accent); }
  body:has(#mmenu.show) .header__burger span,
  body:has(#mmenu.showing) .header__burger span { background: #fff; }
  body:has(#mmenu.show) .header__burger span:nth-child(1),
  body:has(#mmenu.showing) .header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body:has(#mmenu.show) .header__burger span:nth-child(2),
  body:has(#mmenu.showing) .header__burger span:nth-child(2) { opacity: 0; }
  body:has(#mmenu.show) .header__burger span:nth-child(3),
  body:has(#mmenu.showing) .header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* collapse the Klarna promo bar so the header pins to the top and the menu
     sits flush under it at any scroll position */
  /* Collapse is deliberately INSTANT, not transitioned. #mmenu and the backdrop
     are pinned at a hardcoded top: 70px = the header's height with the bar gone.
     While the bar is still animating away, the header is 45px taller than that,
     so the menu opens tucked behind it and the backdrop dims the header's lower
     half — for the whole duration of the transition, and much longer than 0.3s
     on a phone that's still loading the page. Snapping avoids the mismatch. */
  .klarna-bar { overflow: hidden; }
  /* height:0 alone never collapsed anything — the base rule below sets its own
     min-height:45px + vertical padding, and those are separate properties from
     height, so they always won regardless of this rule's higher :has() specificity.
     Zero out every property that contributes to the rendered box height. */
  body:has(#mmenu.show) .klarna-bar,
  body:has(#mmenu.showing) .klarna-bar { height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; }
  .klarna-bar { height: auto; min-height: 45px; padding: 6px 12px; gap: 8px; font-size: 11px; }
  .klarna-bar__logo { height: 15px; }
  .klarna-bar__more { padding: 4px 10px; font-size: 11px; }

  /* header casts a shadow while the menu is open — lifted above the backdrop
     (1000000) and panel (1000001) so the shadow is visible, but only while the
     menu is open (globally raising it would sit over the search modal) */
  .header { transition: box-shadow var(--t); }
  body:has(#mmenu.show) .header,
  body:has(#mmenu.showing) .header {
    z-index: 1000002;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }

  /* ---- scroll area = positioning context for the slide panels ---- */
  .mmenu-nav {
    position: relative;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .mmenu-nav ul { list-style: none; margin: 0; padding: 0; }
  .mmenu-nav li { position: static; }
  .mmenu-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 16px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    text-transform: none;
    letter-spacing: 0.03em;
    color: var(--c-text);
    text-decoration: none;
    border-bottom: 1px solid var(--c-border);
  }
  .mmenu-nav a:hover { color: var(--c-accent); }
  /* arrow is the drill affordance (name navigates) — pad it out to a full-height
     tap zone reaching the row's true right edge (negative margin cancels the
     link's own padding there), but with a fixed-width icon slot + matching
     16px padding so the glyph itself sits at the same inset as the link's
     left padding, instead of being squeezed/centered by font-glyph quirks. */
  .mmenu-arrow {
    flex: 0 0 auto;
    /* border-box: 32px total = 16px content slot for the glyph + 16px
       padding-right, so the glyph sits with a true 16px gap from the row's
       right edge (matching the link's own 16px left padding) */
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--c-text-muted);
    padding: 15px 16px 15px 0;
    margin: -15px -16px -15px 0;
  }

  /* ---- slide panels (any nested level) ---- */
  .mmenu-panel {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 10px 12px 24px;
    background: var(--c-white);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 2;
  }
  .mmenu-panel.is-active { transform: translateX(0); }
  /* lock parent scroll while a child panel is open */
  #mmenu.mmenu--deep .mmenu-nav { overflow: hidden; }
  .mmenu-panel:has(> .mmenu-panel.is-active),
  .mmenu-panel:has(.mmenu-panel.is-active) { overflow: hidden; }

  /* ---- back row (white pill: current category | ‹ in a rounded grey box) ---- */
  .mmenu-back {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin-bottom: 8px;
    border: 0;
    background: var(--c-white);
    padding: 12px 12px 12px 16px;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-transform: none;
    letter-spacing: 0.03em;
    color: var(--c-text);
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  }
  .mmenu-back i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 43px;
    height: 26px;
    border-radius: 13px;
    background: var(--c-grey-300);
    color: var(--c-text);
    font-size: 13px;
  }

  /* ---- promo banner cards at the bottom of a drill-down panel ---- */
  .mmenu-banners {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 16px 16px 40px;
  }
  .mmenu-nav a.mmenu-banner {
    position: relative;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
    aspect-ratio: 6 / 7;   /* same source images as .mega__img-card (440x513) */
    padding: 12px;
    border-bottom: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: linear-gradient(135deg, var(--c-grey-700), var(--c-ink));
    background-size: cover;
    background-position: center;
    color: #fff;
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  .mmenu-nav a.mmenu-banner:hover { color: #fff; }
  .mmenu-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 55%);
  }
  .mmenu-banner span {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
}

/* ==========================================================================
   Mobile bottom navigation (fixed) — mobile only
   ========================================================================== */
.bottom-nav { display: none; }
.bottom-nav-blur { display: none; }
@media (max-width: 1200px) {
  /* frosted strip behind the floating pill bar — separate fixed element (not a
     ::before on .bottom-nav) because the bar has overflow:hidden for its own
     active-cell fill, which would clip a pseudo-element trying to bleed past it */
  .bottom-nav-blur {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    height: calc(96px + env(safe-area-inset-bottom, 0px));
    z-index: 1000; /* just under .bottom-nav (1001) */
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    /* fades the blur itself (not just a color overlay) — solid at the bottom,
       fully transparent at the top edge, so it tapers into the page instead of
       cutting off as a hard-edged blurred block */
    mask-image: linear-gradient(to top, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
    pointer-events: none;
  }
  body.menu-open .bottom-nav-blur { display: none; }
  .bottom-nav {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    /* above the search overlay (1000) so it stays visible like helmi's bottom bar,
       but below the menu backdrop (1000000) so it's dimmed when the menu is open */
    z-index: 1001;
    display: flex;
    align-items: center;
    height: 60px;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden; /* clip the active cell's fill to the bar's rounded corners */
  }
  .bottom-nav__item {
    flex: 1;
    display: grid;
    place-items: center;
    height: 100%;
    color: var(--c-text);
    font-size: 20px;
    transition: color var(--t-fast);
  }
  /* light-gray divider between items */
  .bottom-nav__item + .bottom-nav__item {
    border-left: 1px solid var(--c-border);
  }
  .bottom-nav__item:hover,
  .bottom-nav__item.is-active {
    color: var(--c-accent);
  }
  /* search cell highlights orange while the search overlay is open */
  body:has(.search-modal.is-open) .bottom-nav__search {
    background: var(--c-accent);
    color: #fff;
  }
  /* keep page content clear of the fixed bar */
  body {
    padding-bottom: 92px;
  }
  /* hide the bar (and its blur strip) while the slide-in menu is open. Was
     keyed on body.menu-open, a class nothing in main.js ever sets — dead
     rule, so both stayed rendered (with .bottom-nav-blur's backdrop-filter
     still compositing) underneath the open mmenu. Match the real state the
     rest of the header already uses (:has(#mmenu.show/.showing)). */
  body:has(#mmenu.show) .bottom-nav,
  body:has(#mmenu.showing) .bottom-nav,
  body:has(#mmenu.show) .bottom-nav-blur,
  body:has(#mmenu.showing) .bottom-nav-blur {
    display: none;
  }
}

/* ==========================================================================
   USP strip
   ========================================================================== */
.usps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
/* transparent on tablet/desktop so .usp stays a direct grid item of .usps —
   only becomes the real flex marquee track on phone (media query below) */
.usps__track { display: contents; }
.usp {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 40px;
  background-color: var(--c-grey-100);
  border-radius: 1rem;
}
.usp__icon {
  width: 40px;
  height: 40px;
  flex: none;
  color: var(--c-accent);
}
.usp__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
}
.usp__text {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
/* Tablet: 2×2 grid of cards (keep the desktop card style, just 2 columns). */
@media (min-width: 768px) and (max-width: 1023px) {
  .usps {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* .usp--dup only exists for the phone marquee loop below */
.usp--dup { display: none; }
/* Phone: bare items, auto-scrolling marquee (no swipe/snap — it just loops).
   .usps renders the item list twice back-to-back (see benefits.twig); animating
   translateX(-50%) over that doubled track is what makes the loop seamless. */
@media (max-width: 767px) {
  /* .usps is the clipping viewport (full width, whatever section it's dropped
     into — home's benefits module and the PDP's own USP block both reuse this
     markup); .usps__track is the actual max-content row that gets animated.
     Splitting the two is what makes the clip work regardless of the parent
     section's class, instead of the previous fragile :has() reaching outward. */
  .usps {
    overflow: hidden;
    border-top: 1px solid var(--c-border);
    padding-top: 16px;
  }
  .usps__track {
    display: flex;
    gap: 48px;
    width: max-content;
    animation: usps-marquee 22s linear infinite;
  }
  .usp,
  .usp--dup {
    display: flex;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 4px;
    background: none;
    border-radius: 0;
  }
  .usp__title,
  .usp__text {
    white-space: nowrap;
  }
  .usps .usp i.usp__icon {
    font-size: 24px;
  }
  @keyframes usps-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
}

/* ==========================================================================
   Banner card (3-up promo banners)
   ========================================================================== */
.banner {
  position: relative;
  min-height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 28px;
  color: #fff;
  background: var(--c-ink);
}
.banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0.65) 100%
  );
}
.banner > * {
  position: relative;
  z-index: 1;
}
.banner__title {
  font-size: 18px;
  font-weight: var(--fw-bold);
}

/* ==========================================================================
   Product card
   ========================================================================== */
.product-card {
  background: var(--c-white);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow var(--t);
}
.product-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.20);
}
.product-card__media {
  position: relative;
  aspect-ratio: 1/1;
  background: var(--c-grey-150);
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}
/* Second image (first additional image) cross-fades in on hover. Only rendered
   when the product actually has one, so cards without it just don't swap. */
.product-card__img--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.product-card:hover .product-card__img--hover {
  opacity: 1;
}
.product-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: var(--c-accent);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: 4px 10px;
  border-radius: 3px;
}
.product-card__wish {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}
.product-card__body {
  padding: 16px;
}
.product-card__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  margin-top: 4px;
  min-height: 40px;
}
.product-card__price {
  margin-top: 20px;
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
}
.product-card__price del {
  color: var(--c-grey-500);
  font-weight: var(--fw-book);
  font-size: var(--fs-sm);
  margin-right: 6px;
}

/* ==========================================================================
   Horizontal slider (generic)
   ========================================================================== */
.slider {
  position: relative;
}
.slider__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.slider__track::-webkit-scrollbar {
  display: none;
}
.slider__track > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}
.slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  z-index: 2;
}
.slider__nav--prev {
  left: -10px;
}
.slider__nav--next {
  right: -10px;
}
section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  position: relative;
  background: var(--c-white);
  color: var(--c-text-muted);
  padding-top: 120px;
  border-top: 1px solid var(--c-grey-300);
}
.footer__accent {
  position: absolute;
  top: 0;
  left: 64px;
  width: 130px;
  height: 90px;
  clip-path: polygon(20px -2px, 91% 0px, 0% 100%, 0px 100%);
  background-color: var(--c-accent);
}
.footer a {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}
.footer a:hover {
  color: var(--c-accent);
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 290px));
  justify-content: space-between;
  gap: 40px;
}
/* Columns are flex so the newsletter can fill its column and pin the button bottom */
.footer__col {
  display: flex;
  flex-direction: column;
}
/* Location / email pills size to their content instead of stretching the column */
.footer__col > .pill {
  align-self: flex-start;
}
.footer__col h4 {
  position: relative;
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--c-black);
  margin-bottom: 16px;
  padding-bottom: 12px;
}
.footer__col h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 2px;
  background: var(--c-accent);
}
.footer__sub {
  font-size: 15px;
  font-weight: var(--fw-bold);
  margin: 28px 0 4px;
}
.footer__sub:first-of-type {
  margin-top: 0;
}
.footer__sub--accent {
  color: var(--c-accent);
}
.footer a.pill {
  font-size: 12px;
}
.footer__addr {
  font-size: var(--fs-sm);
  margin-bottom: 4px;
}
.footer__muted {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin-top: 8px;
}
.footer__link-strong {
  font-weight: var(--fw-bold);
  color: var(--c-black) !important;
  transition: color var(--t-fast);
}
.footer__link-strong:hover {
  color: var(--c-accent) !important;
}
.footer__link-arrow {
  display: inline-block;
  transition: transform var(--t-fast);
}
.footer__link-strong:hover .footer__link-arrow {
  transform: translateX(4px);
}
.footer__phones {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-grey-150);
  /* transparent (not none) so the hover border doesn't shift the layout */
  border: 1px solid transparent;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  margin-top: 6px;
}
.footer .pill:hover {
  background: #fff;
  border-color: var(--c-border);
}
.footer__links {
  display: grid;
  gap: 12px;
}
.footer__links a {
  line-height: 1.4;
}
/* workdays */
.workdays {
  display: grid;
}
.workdays li {
  display: flex;
  justify-content: space-between;
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #454545;
}
.workdays li:nth-child(odd) {
  background: var(--c-grey-100);
}
.workdays li span:first-child {
  font-weight: var(--fw-bold);
  color: #454545;
}
/* newsletter */
/* Stack fields so the register button drops below the checkbox, left-aligned */
.newsletter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: auto; /* push the whole newsletter block to the bottom of the column */
  margin-bottom: 0;
}
.newsletter h4 {
  border: none;
  padding: 0;
  margin-bottom: 6px;
}
.newsletter h4::after {
  display: none;
}
.newsletter__input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  background: var(--c-grey-150);
  border: none;
  border-radius: var(--radius);
  margin-top: 12px;
  outline: none;
}
/* .btn ships 14px / 28px inline padding — too big for this narrow column */
.newsletter .btn {
  font-size: 12px;
  padding-inline: 16px;
  border-radius: 10px;
}
.newsletter .btn .icon {
  width: 8px;
  height: 8px;
}
.newsletter .checkbox {
  font-size: 12px;
}
/* social + payments */
.footer__mid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.footer__social {
  display: flex;
  gap: 10px;
  margin-top: 48px;
}
.footer__social a {
  width: 80px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-grey-150);
  color: #454545;
  display: grid;
  place-items: center;
}
.footer__social a:hover {
  background: var(--c-accent);
  color: #fff;
}
.footer__pay {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.footer__pay img {
  max-width: 100%;
  height: auto;
  display: block;
}
.pay {
  display: inline-grid;
  place-items: center;
  height: 30px;
  padding: 0 10px;
  background: var(--c-grey-150);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--c-grey-700);
}
.footer__bottom {
  margin-top: 40px;
  padding-block: 24px;
  border-top: 1px solid var(--c-border);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 16px;
  font-size: var(--fs-xs);
  color: var(--c-grey-500);
}
.footer__bottom > :nth-child(1) { text-align: left; }
.footer__bottom > :nth-child(2) { text-align: center; }
.footer__bottom > :nth-child(3) { text-align: right; }
/* Accordion chevron: mobile-only — hidden on tablet/desktop (panels always open) */
.footer__acc-chev { display: none; }

@media (max-width: 1023px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer__bottom {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .footer__bottom > :nth-child(1),
  .footer__bottom > :nth-child(2),
  .footer__bottom > :nth-child(3) { text-align: center; }
  /* Smaller accent + tighter top spacing from tablet down (not only phone). */
  .footer {
    padding-top: 36px;
  }
  .footer__accent {
    left: 14px;
    width: 48px;
    height: 30px;
    clip-path: polygon(10px -2px, 87% 0px, 0% 100%, 0px 100%);
  }
  /* Newsletter sits under the "Χρήσιμα Αρχεία" links in the 2-col layout —
     give it breathing room from the list above. */
  .newsletter {
    margin-top: 30px;
  }
}
@media (max-width: 560px) {
  .footer .container {
    /* use the standard responsive gutter (was a one-off 8px) */
    padding-inline: var(--gutter);
  }
  .footer__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
  }
  /* Flatten the three accordion columns so their heads/panels become direct
     flex items of the grid, then reorder: hours → info → useful files, with
     social icons + newsletter dropped below the cards. Desktop is untouched. */
  .footer__col:not(:first-child) {
    display: contents;
  }
  .footer__col:nth-child(2) > .footer__acc-head,
  .footer__col:nth-child(2) > .footer__acc-panel { order: 1; }
  .footer__col:nth-child(4) > .footer__acc-head,
  .footer__col:nth-child(4) > .footer__acc-panel { order: 2; }
  .footer__col:nth-child(3) > .footer__acc-head,
  .footer__col:nth-child(3) > .footer__acc-panel { order: 3; }
  .footer__social { order: 4; }
  .newsletter { order: 5; }
  /* Center each column's content horizontally on mobile */
  .footer__col {
    align-items: center;
    text-align: center;
  }
  .footer__col h4::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .footer__col > .pill {
    align-self: center;
  }
  .footer__phones,
  .footer__pay {
    justify-content: center;
  }
  .footer__phones {
    margin-bottom: 24px;
    gap: 4px;
  }
  .footer__muted a {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 3pxs;
  }
  .footer__links,
  .workdays {
    width: 100%;
  }
  .newsletter {
    align-items: center;
  }
  .newsletter__input {
    font-size: var(--fs-xs);
    max-width: 344px;
    width: 100%;
    text-align: center;
  }
  .newsletter label {
    font-size: var(--fs-xs);
  }
  .newsletter .btn {
    font-size: var(--fs-xs);
    margin-top: 10px;
  }
  .footer__social {
    justify-content: center;
    margin-top: 28px;
  }
  .footer__col h4 {
    margin-bottom: 0;
  }
  /* --- Collapsible sections (Ωράριο / Χρήσιμα Αρχεία / Πληροφορίες) --- */
  /* .footer__col prefix needed to out-specify the base `.footer__col h4`
     margin/padding/underline rules */
  .footer__col .footer__acc-head {
    align-self: stretch;
    position: relative;
    margin: 4px 0 0;
    height: 62px;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-grey-150);
    border-radius: var(--radius-sm);
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    user-select: none;
  }
  /* No orange underline on the accordion card heads */
  .footer__col .footer__acc-head::after { display: none; }
  .footer__acc-chev {
    display: block;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-grey-500);
    font-size: 14px;
    transition: transform var(--t);
  }
  .footer__acc-head.is-open .footer__acc-chev {
    transform: translateY(-50%) rotate(180deg);
  }
  .footer__acc-panel {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    transition: max-height var(--t);
  }
  /* Breathing room above the panel content once expanded */
  .footer__acc-head.is-open + .footer__acc-panel {
    margin-top: 14px;
  }
}

/* ==========================================================================
   Custom checkboxes & radios (global)
   ========================================================================== */
input[type='checkbox'],
input[type='radio'] {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  flex: none;
  cursor: pointer;
  position: relative;
  transition:
    background var(--t-fast),
    border-color var(--t-fast);
}
/* Checkbox — off: λευκό + γκρι border · on: πορτοκαλί + λευκό check */
input[type='checkbox'] {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: #fff;
  border: 1.5px solid var(--c-grey-300);
}
input[type='checkbox']:hover {
  border-color: var(--c-grey-500);
}
input[type='checkbox']:checked {
  background: var(--c-accent);
  border-color: var(--c-accent);
}
input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* Radio — off: γκρι γεμάτο · on: πορτοκαλί + λευκός κύκλος στο κέντρο */
input[type='radio'] {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e4e4e4;
  border: 1.5px solid transparent;
}
input[type='radio']:hover {
  background: #d8d8d8;
}
input[type='radio']:checked {
  background: var(--c-accent);
}
input[type='radio']:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

/* Toggle switch */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: var(--fs-sm);
}
.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.switch__track {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: var(--c-grey-300);
  position: relative;
  transition: var(--t);
  flex: none;
}
.switch__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: var(--t);
}
.switch input:checked + .switch__track {
  background: var(--c-accent);
}
.switch input:checked + .switch__track::after {
  transform: translateX(20px);
}

/* ==========================================================================
   Font Awesome icon sizing (per context)
   ========================================================================== */
.icon-btn i { font-size: 18px; line-height: 1; }
.search i { font-size: 15px; }
.phdrop__trigger i { font-size: 10px; }
.phpill i { width: 14px; text-align: center; }
.footer__social a i { font-size: 18px; }
.pill i { width: 14px; text-align: center; }
.acc-nav a i { font-size: 17px; width: 22px; text-align: center; }

.usp i.usp__icon { font-size: 28px; width: auto; height: auto; }

/* ==========================================================================
   Global alerts — the theme injects/renders .alert--success / .alert--danger
   (PDP add-to-cart toast, account pages, contact); the -single-dash variants
   cover OC-core markup that may still surface.
   ========================================================================== */
.alert {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.alert--success, .alert-success { background: #eaf6ee; color: #17663a; border: 1px solid #bfe3cc; }
.alert--danger, .alert-danger { background: #fdecec; color: #b3261e; border: 1px solid #f3c2c0; }
.alert a { font-weight: var(--fw-bold); color: inherit; }
.alert .close { margin-left: auto; background: none; border: 0; font-size: 20px; line-height: 1; color: inherit; opacity: .55; cursor: pointer; }
.alert .close:hover { opacity: 1; }
/* Mobile: the injected toasts (text + product-name link) break as separate flex
   items and look cramped — flow them as normal wrapping text, tighter + smaller,
   with breathing room from the header. Icon/close kept in place via floats for the
   dismissible core-OC variants. */
@media (max-width: 767px) {
  .alert {
    display: block;
    position: relative;
    margin-top: 14px;
    padding: 10px 14px;
    font-size: 13px;
  }
  .alert > i { float: left; margin: 2px 8px 0 0; }
  /* leave room for the × and pin it to the top-right (float would drop it below) */
  .alert:has(.close) { padding-right: 34px; }
  .alert .close { position: absolute; top: 8px; right: 10px; margin: 0; }
}

/* ==========================================================================
   Breadcrumbs (moved from catalog.css — account pages need them too and
   their header loads only tokens/base/components/account stylesheets)
   ========================================================================== */
.breadcrumbs { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: -0.02em; color: #808080; padding-block: 18px; }
.breadcrumbs a:hover { color: var(--c-accent); }
.breadcrumbs .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--c-accent); }
.breadcrumbs .current { color: var(--c-black); font-weight: var(--fw-bold); }

/* ==========================================================================
   OC default-template fallback: pages without a theme override (affiliate,
   downloads, transactions, vouchers, sitemap, gdpr, ...) render Bootstrap-ish
   markup inside #content — an id the theme's own templates never use, so
   everything here is scoped to fallback pages only.
   ========================================================================== */
ul.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 18px 0; font-size: var(--fs-xs); color: var(--c-text-muted); }
ul.breadcrumb li + li::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--c-accent); margin-right: 10px; vertical-align: middle; }
ul.breadcrumb a { color: inherit; }
ul.breadcrumb a:hover { color: var(--c-accent); }

#content h1 { font-size: 26px; margin: 10px 0 14px; }
#content h2 { font-size: 20px; margin: 24px 0 10px; }
#content p { line-height: 1.6; margin-bottom: 10px; color: var(--c-text-muted); font-size: var(--fs-sm); }
#content fieldset { border: none; margin: 0 0 10px; }
#content legend { width: 100%; font-size: var(--fs-md, 18px); font-weight: var(--fw-bold); padding-bottom: 10px; margin-bottom: 16px; border-bottom: 1px solid var(--c-border); }

#content .form-group { margin-bottom: 14px; }
#content .form-group label, #content .control-label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-bottom: 6px; }
#content .form-control { width: 100%; max-width: 440px; height: 44px; border: 1.5px solid var(--c-border); border-radius: var(--radius-sm); padding: 0 14px; background: #fff; outline: none; font-size: var(--fs-sm); transition: border-color var(--t-fast); }
#content .form-control:focus { border-color: var(--c-black); }
#content textarea.form-control { height: auto; min-height: 110px; padding-block: 10px; }
#content .radio, #content .checkbox { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); margin-bottom: 6px; }
#content .radio input, #content .checkbox input { accent-color: var(--c-accent); }
#content .radio-inline, #content .checkbox-inline { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); margin-right: 14px; }

#content .btn-primary { background: var(--c-black); color: #fff; border-color: transparent; cursor: pointer; }
#content .btn-primary:hover { background: var(--c-accent); color: #fff; }
#content .btn-default { background: #fff; color: var(--c-black); border-color: var(--c-border); cursor: pointer; }
#content .btn-default:hover { border-color: var(--c-black); }
#content .buttons { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0; }
#content .buttons .pull-right { margin-left: auto; }

#content .well { background: var(--c-grey-100); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; }
#content .table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-bottom: 16px; }
#content .table td, #content .table th { border: 1px solid var(--c-border); padding: 10px 12px; text-align: left; }
#content .table thead td, #content .table th { background: var(--c-grey-100); font-weight: var(--fw-bold); }

/* account sidebar module (column_right list-group) on fallback pages */
#column-right .list-group, #column-left .list-group { border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; margin-top: 18px; }
#column-right .list-group-item, #column-left .list-group-item { display: block; padding: 12px 16px; font-size: var(--fs-sm); border-bottom: 1px solid var(--c-border); }
#column-right .list-group-item:last-child, #column-left .list-group-item:last-child { border-bottom: none; }
#column-right .list-group-item:hover, #column-left .list-group-item:hover { background: var(--c-grey-100); color: var(--c-accent); }
/* fallback nested lists (e.g. sitemap): restore hierarchy the global reset removed */
#content ul ul { padding-left: 20px; margin: 4px 0 10px; }
#content ul li { line-height: 1.9; font-size: var(--fs-sm); }
#content ul a:hover { color: var(--c-accent); }
/* links right after an input (e.g. "forgotten password") drop below the field */
#content .form-group .form-control + a { display: block; margin-top: 8px; font-size: var(--fs-xs); color: var(--c-text-muted); }
#content .form-group .form-control + a:hover { color: var(--c-accent); }