@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  /* ════════════════════════════════════════════════
     DESIGN TOKENS
     ════════════════════════════════════════════════ */
  :root {
    /* ── Χρώματα ── */
    --clr-bg:            #0a0a0a;    /* φόντο σελίδας */
    --clr-text:          #f3ede4;    /* κύριο κείμενο */
    --clr-green-bright:  #296e3e;    /* πράσινος accent (active, cta, logo) */
    --clr-green:         #1b5d2f;    /* πράσινος accent (brand span) */
    --clr-wood:          #5c4129;    /* χρώμα divider / ξύλο */
    --menu-open:         rgba(180, 150, 110, 0.05);
    --clr-muted-1:       #5c4129;    /* brand subtitle */
    --clr-muted-2:       #131313;    /* placeholders, section subtitles */
    --clr-muted-3:       #4a4a4a;    /* section titles, hints, rotate hint */
    --clr-muted-4:       #999999;    /* card descriptions */
    --clr-muted-5:       #999999;    /* part pills */
    --clr-muted-6:       #999999;    /* icons, info values */
    --clr-muted-7:       #444444;    /* info labels, top bar hint */
    --clr-muted-8:       #333333;    /* footer text */
    --clr-border:        rgba(27,93,47, 1); /* βάση για borders (χρησιμοποιείται με opacity) */
    --clr-panel-bg-a:    rgba(255, 255, 255, 0.983);  /* panel / tab background top */
    --clr-panel-bg-b:    rgba(255, 255, 255, 0.89); /* panel / tab background bottom */
    --clr-card-bg:       rgba(255,255,255,.06);   /* card background */
    --clr-info-bg:       rgba(255,255,255,.03);   /* info strip background */
    --clr-border-gray: rgba(180,150,110,.06);

    /* ── Layout / motion ── */
    --panel-w:    520px;                          /* side panel width — also drives panel-tab anchoring */
    --panel-ease: cubic-bezier(.16, 1, .3, 1);    /* shared easing for panel + tab so they travel together */
    --panel-dur:  .55s;                           /* shared duration for panel + tab */

    /* ── Font sizes ── */
    --fs-h1:    clamp(30px, 5vw, 44px); /* brand heading */
    --fs-h2:    22px;   /* card headings */
    --fs-h3:    20px;   /* panel header title */
    --fs-logo:  19px;   /* top bar logo */
    --fs-body:  16px;   /* brand subtitle */
    --fs-base:  15px;   /* card descriptions, inputs, home-btn */
    --fs-small: 14px;   /* pills, card-cta, info values, panel-tab */
    --fs-xs:    13px;   /* section titles, hints, cam-btn, footer */
    --fs-xxs:   12px;   /* category tabs */
    --fs-micro: 11px;   /* info labels */
    --fs-nano:  10px;   /* swatch names */
  }

  /* ── Reset ── */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* ── Base ── */
  body {
    font-family: 'Manrope', 'Fira Sans', sans-serif;
    background: var(--clr-bg);
    color: var(--clr-text);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    scrollbar-highlight-color: #000000;
  }

  /* Select Color */
  ::selection {
    color: var(--clr-text);
    background-color: var(--clr-muted-3); 
  }
  /* ── Screens ── */
  .screen {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    inset: 0;
  }

  .screen.active {
    display: flex;
  }
/* ── loader ── */
  .loader {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    background: #ffffff;
    z-index: 10000;
    opacity: 1;
    transition: opacity 1s ease;
  }

  .loader.hiding {
    opacity: 0;
    pointer-events: none;
  }

  .loader img {
    width: clamp(180px, 26vw, 320px);
    height: auto;
    display: block;
    animation: pulse 2s ease infinite;
    will-change: opacity;
  }

  /* gentle, smooth fade — close opacity values so the color shift is subtle */
  @keyframes pulse {
      0% { opacity: 0.45; }
     50% { opacity: 0.85; }
    100% { opacity: 0.45; }
  }

  @media (prefers-reduced-motion: reduce) {
    .loader img { animation: none; opacity: .8; }
  }

  /* ── Landing screen (v3 split-hero, light) ──────────────── */
  #landingScreen.active {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    padding: 0;
    background: #ffffff;
    flex-direction: initial;
    align-items: initial;
    justify-content: initial;
  }

  .landing-panel {
    padding: 48px 60px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    overflow-y: auto;
  }
  .landing-panel .panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .landing-panel .panel-top img {
    height: 62px;
  }
  .landing-panel .help {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #999;
    text-transform: uppercase;
    font-weight: 700;
  }
  .landing-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 0;
  }
  .landing-content .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #2D6A3F;
    margin-bottom: 18px;
  }
  .landing-content .eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b4352d;
  }
  .landing-content h1 {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1.05;
    color: #1a1a1a;
  }
  .landing-content h1 .accent { color: #2D6A3F; }
  .landing-content .sub {
    font-size: 16px;
    color: #666;
    margin-top: 16px;
    line-height: 1.65;
    max-width: 440px;
  }

  /* Card list (replaces the old grid) */
  .cards {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 100%;
  }
  .card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    background: #FAF8F5;
    border: 1.5px solid transparent;
    border-left: 4px solid #2D6A3F;
    cursor: pointer;
    transition: all .25s ease;
    border-radius: 0;
    backdrop-filter: none;
    animation: none;
    color: inherit;
  }
  .card:nth-child(2) { border-left-color: #b4352d; }
  .card:hover {
    border-color: #d9d2c2;
    background: #fff;
    transform: translateX(4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.07);
  }
  .card-visual {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: #fff;
    border: 1.5px solid #ece6dc;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    overflow: visible;
  }
  .card-visual svg { width: 28px; height: 28px; }
  .card-body { flex: 1; padding: 0; }
  .card-body h2 {
    font-size: 18px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0;
  }
  .card-body p {
    font-size: 13px;
    color: #888;
    margin: 4px 0 0;
    line-height: 1.45;
  }
  .card-cta {
    width: 38px;
    height: 38px;
    background: #2D6A3F;
    color: #fff;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .25s;
    margin-left: auto;
    font-size: 0;
    gap: 0;
  }
  .card:nth-child(2) .card-cta { background: #b4352d; }
  .card:hover .card-cta { transform: translateX(4px) scale(1.08); }
  .card-cta svg { width: 18px; height: 18px; }

  .landing-foot {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #ece6dc;
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #aaa;
    text-transform: uppercase;
    font-weight: 700;
  }

  @media (max-width: 900px) {
    #landingScreen.active { grid-template-columns: 1fr; }
    #landingScreen .split-image { display: none; }
    .landing-panel { padding: 30px 20px; }
    .landing-content h1 { font-size: 34px; }
  }

  /* ── Screensaver (idle power saver) ──────────────────────────────
     Full-black overlay; the WebGL loop is stopped before it appears,
     so the only cost is one slowly-drifting logo (GPU-cheap transform).
     The drift keeps the logo from burning into one spot. */
  #screenSaver {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: none;
  }
  #screenSaver.active { display: block; }
  /* Position is driven by JS (translate3d) for a true edge-to-edge bounce —
     see the screensaver loop in the bottom script. */
  #screenSaver .saver-logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    max-width: 38vw;
    will-change: transform;
  }
  @keyframes saverPulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.9; }
  }
  #screenSaver .saver-hint {
    position: absolute;
    bottom: 38px;
    left: 0; right: 0;
    text-align: center;
    color: var(--clr-bg);
    font-size: 14px;
    letter-spacing: 0.05em;
    animation: saverPulse 7s ease-in-out infinite;
  }

  /* ── Canvas ── */
  #canvas-container {
    position: fixed;
    inset: 0;
    z-index: 0;
  }

  /* ── Side panel ── */
  .panel {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: var(--panel-w);
    z-index: 10;
    background: linear-gradient(160deg, var(--clr-panel-bg-a) 0%, var(--clr-panel-bg-b) 100%);
    backdrop-filter: blur(40px);
    border-left: 1px solid rgba(180,150,110,.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideIn .7s var(--panel-ease) both;
    /* Shared with .panel-tab so they travel as one unit. */
    transition: transform var(--panel-dur) var(--panel-ease);
  }

  @keyframes slideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }

  @media (max-width: 768px) {
    .panel {
      width: 100%;
      top: auto;
      bottom: 0;
      height: 55vh;
      border-left: none;
      border-top: 1px solid rgba(180,150,110,.08);
      border-radius: 20px 20px 0 0;
    }
  }

  .panel-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .panel-scroll::-webkit-scrollbar { width: 3px; }
  .panel-scroll::-webkit-scrollbar-thumb {
    background: rgba(180,150,110,.15);
    border-radius: 3px;
  }

  /* ── Panel header ── */
  .panel-header {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid rgba(180,150,110,.06);
    flex-shrink: 0;
  }

  .back-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(180,150,110,.15);
    background: rgba(180,150,110,.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s;
    flex-shrink: 0;
  }

  .back-btn:hover {
    background: rgba(180,150,110,.12);
    border-color: rgba(180,150,110,.3);
  }

  .close-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(180,150,110,.15);
    background: rgba(180,150,110,.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s;
    flex-shrink: 0;
    margin-left: auto;
  }
  .close-btn:hover {
    background: rgba(180,150,110,.12);
    border-color: rgba(180,150,110,.3);
  }
  .close-btn svg {
    width: 18px;
    height: 18px;
    stroke: var(--clr-muted-6);
    fill: none;
  }

  /* ── Panel collapsed state ── */
  .panel.collapsed {
    transform: translateX(100%);
  }
  @media (max-width: 768px) {
    .panel.collapsed {
      transform: translateY(100%);
    }
  }
  .top-bar.panel-collapsed {
    right: 0;
    transition: transform 0.3s ease-in-out;
  }

  /* ── Panel reopen tab ── */
  /* Anchored at the panel's left edge (right: var(--panel-w)). When the panel
     collapses, the tab translates by the same amount (var(--panel-w)) using
     the same duration + easing, so it rides with the panel as one unit and
     lands at the screen's right edge. */
  .panel-tab {
    position: fixed;
    right: var(--panel-w);
    top: 50%;
    transform: translateY(-50%);
    z-index: 11;
    background: #fff;
    border: 1px solid rgba(180,150,110,.15);
    border-right: none;
    border-radius: 10px 0 0 10px;
    padding: 14px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: transform var(--panel-dur) var(--panel-ease), opacity .1s ease;
  }

  .panel-tab:hover > svg{
      rotate: 180deg;
    }

  .panel-tab svg {
    width: 16px;
    height: 16px;
    stroke: var(--clr-muted-6);
    fill: none;
    stroke-linecap: round;
  }
  .panel-tab span {
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--clr-muted-3);
    writing-mode: sideways-lr;
    text-orientation: mixed;
  }

  .panel-tab.visible {
    transform: translateY(-50%) translateX(var(--panel-w));
    opacity: 1;
    pointer-events: auto;
  }

  @media (max-width: 768px) {
    /* Mobile panel slides DOWN by its own height (55vh). Anchor the tab
       above the panel's top edge and translate it down by the same amount. */
    .panel-tab {
      right: 12px;
      top: auto;
      bottom: 55vh;
      transform: translateY(0);
    }
    .panel-tab.visible {
      transform: translateY(55vh);
    }
  }

  /* ── Compact camera-view panel (bottom-right, only while panel collapsed) ── */
  .cam-mini {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 11;
    background: #fff;
    border: 1px solid rgba(180,150,110,.15);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 10px 32px rgba(0,0,0,.20);
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-width: min(320px, calc(100vw - 36px));
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .cam-mini.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .cam-mini-title {
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--clr-muted-3);
  }

  @media (max-width: 768px) {
    /* Sit just above the collapsed mobile panel's resting edge. */
    .cam-mini { right: 12px; bottom: 12px; }
  }

  /* ── Home button in top bar ── */
  .home-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid var(--clr-border-gray);
    border-radius: 8px;
    padding: 7px 14px 7px 10px;
    color: var(--clr-bg);
    font-size: var(--fs-base);
    cursor: pointer;
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
  }
  .home-btn:hover {
    background: var(--clr-green);
    color: var(--clr-text);
  }
  .home-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }

  .back-btn svg {
    width: 18px;
    height: 18px;
    stroke: var(--clr-muted-6);
    fill: none;
  }

  .panel-header-text h2 {
    font-size: var(--fs-h2);
    font-weight: 700;
    color: var(--clr-bg);
  }

  .panel-header-text p {
    font-size: var(--fs-xs);
    color: var(--clr-muted-2);
    margin-top: 2px;
  }

  /* ── Sections ── */
  .section {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(180,150,110,.06);
  }

  .section-title {
    font-size: var(--fs-h2);
    color: var(--clr-muted-3);
    margin-bottom: 6px;
    font-weight: 700;
  }
  .section-title.accordion-title {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    margin-bottom: 0 !important;
    padding: 10px 6px;
    border-left: 4px solid #2D6A3F;
    transition: background .15s;
    margin-bottom: 0;
  }
  .section-title.accordion-title:hover,.open{ background: var(--menu-open) }
  .accordion-chevron {
    display: inline-block;
    font-size: 11px;
    opacity: .55;
    transition: transform .22s ease;
    margin-left: 6px;
  }
  .section-title.accordion-title.open .accordion-chevron { transform: rotate(180deg); }
  .accordion-body { overflow: hidden; }

  /* Subcategory header above the per-tier "Ειδικές Παραλλαγές" zones */
  .kitchen-subcategory-title {
    font-size: var(--fs-h2);
    font-weight: 700;
    color: var(--clr-muted-3);
    margin: 18px 0 6px;
    padding-top: 12px;
    border-top: 1px solid var(--menu-open, rgba(255,255,255,.12));
  }

  /* Home page: 2 big category cards */
  .kitchen-home-title {
    font-size: var(--fs-h2);
    font-weight: 700;
    color: var(--clr-muted-3);
    margin-bottom: 12px;
  }
  .kitchen-home-grid {
    display: grid;
    grid-template-columns: repeat(1fr, 2);
    gap: 10px;
  }
  .kitchen-home-card {
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .18s, transform .15s, box-shadow .18s;
    background: rgba(255,255,255,.04);
  }
  .kitchen-home-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.22);
  }
  .kitchen-home-card.active {
    border-color: var(--clr-green-bright, var(--clr-green));
  }
  .kitchen-home-img {
    object-fit: contain;
    width: 100%;
    height: auto;
    filter: grayscale(0.1) opacity(0.9);
  }
  .kitchen-home-label {
    padding: 9px 8px 10px;
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--clr-bg);
    text-align: center;
    line-height: 1.25;
    letter-spacing: .01em;
  }

  /* Category page back button */
  .kitchen-back-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--clr-green-bright, #4a9c5e);
    font-family: inherit;
    font-size: var(--fs-small);
    font-weight: 600;
    padding: 0 0 12px 0;
    transition: opacity .15s;
  }
  .kitchen-back-btn:hover { opacity: .75; }
  .kitchen-back-btn svg { flex-shrink: 0; }

  /* ── Part pills ── */
  .part-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .part-pill {
    padding: 7px 16px;
    border-radius: 8px;
    border: 1px solid rgba(180,150,110,.15);
    background: transparent;
    color: var(--clr-bg);
    font-size: var(--fs-small);
    font-weight: 500;
    cursor: pointer;
    transition: all .3s;
  }

  .part-pill:hover { background: rgba(180,150,110,.08); color: var(--); }

  .part-pill.active {
    background: var(--clr-green);
    border-color: var(--clr-muted-2);
    color: var(--clr-text);
  }

  /* ── Search ── */
  .search-box {
    position: relative;
    margin-bottom: 14px;
  }

  .search-box input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border-radius: 10px;
    border: 1px solid var(--clr-muted-4);
    color: var(--clr-bg);
    font-size: var(--fs-base);
    outline: none;
    transition: border-color .3s;
  }

  .search-box input::placeholder { color: var(--clr-muted-2); }
  .search-box input:focus { border-color: rgba(196,164,107,.3); }

  .search-box svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    stroke: var(--clr-muted-2);
    fill: none;
  }

  /* ── Category tabs ── */
  .cat-tabs {
    display: flex;
    gap: 1px;
    margin-bottom: 14px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(180,150,110,.1);
  }
  .cat-tab{
    flex: 1;
    padding: 7px 16px;
    font-size: var(--fs-small);
    font-weight: 500;
    text-align: center;
    border: none;
    background: transparent;
    color: var(--clr-bg);
    cursor: pointer;
    transition: all .2s;
  }

  .cat-tab:hover { color: var(--clr-green); }
  .cat-tab.active { background: var(--clr-green); color: var(--clr-text); }

  /* ── Cabinet target toggle (Top / Bottom / Both) ── */
  .target-toggle {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 5px 5px 8px 5px;
  }
  .target-btn {
    appearance: none;
    background: transparent;
    border: 1.5px solid var(--clr-border-gray);
    color: var(--clr-muted-7);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .target-btn:hover { color: var(--clr-green); border-color: var(--clr-green); }
  .target-btn.active {
    background: var(--clr-green);
    color: var(--clr-text);
    border-color: var(--clr-green);
  }

  /* ── Swatch grid ── */
  .swatch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-height: fit-content;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 8px 6px 6px;
    border: 2px solid var(--clr-border-gray);
    margin: 5px;
  }

  .swatch-grid::-webkit-scrollbar { width: 2px; transition: width 0.2s; }
  .swatch-grid::-webkit-scrollbar-thumb {
    background: rgba(60, 60, 60, 0.397);
    border-radius: 2px;
  }
  .swatch-grid:hover::-webkit-scrollbar-thumb {
    background: rgba(60, 60, 60, 0.6);
  }

  .swatch {
    position: relative;
    aspect-ratio: 1;
    cursor: pointer;
    border: 2px solid;
    transition: all .3s cubic-bezier(.16,1,.3,1);
  }

  .swatch:hover {
    z-index: 2;
    box-shadow: 0 6px 20px rgba(0,0,0,.4);
    border-color: var(--clr-green);
  }

  .swatch.active {
    border: 3px solid var(--clr-border);
    box-shadow: 0 6px 20px rgba(0,0,0,.4);
  }

  .swatch-fill {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .swatch-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(85deg, transparent 0px, rgba(0,0,0,.05) 1px, transparent 2px, transparent 5px);
  }

  .swatch-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3px 5px;
    font-size: var(--fs-small);
    font-weight: 400;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.8);
    background: linear-gradient(transparent, rgba(0,0,0,.5));
    line-height: 1.2;
  }

  /* ── Cabinet zone controls (color + texture per zone) ── */
  .cabinet-zones { display: flex; flex-direction: column; gap: 8px; }
  .cabinet-zone-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(0,0,0,.2);
    flex-shrink: 0;
  }
  .cabinet-zone-label {
    flex: 1;
    font-size: var(--fs-small);
    color: var(--clr-muted-2);
    font-weight: 500;
  }
  .cabinet-zone-color {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
  }
  .cabinet-zone-color::-webkit-color-swatch-wrapper { padding: 0; }
  .cabinet-zone-color::-webkit-color-swatch { border: none; border-radius: 5px; }
  .cabinet-zone-file-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 6px;
    cursor: pointer;
    color: var(--clr-muted-3);
    background: rgba(255,255,255,.4);
    transition: all .2s;
  }
  .cabinet-zone-file-btn:hover {
    color: var(--clr-green-bright);
    border-color: var(--clr-green-bright);
    background: rgba(255,255,255,.6);
  }
  .kronospan-mini {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: transform .15s, border-color .15s;
    flex-shrink: 0;
  }
  .kronospan-mini:hover {
    border-color: var(--clr-green-bright);
    transform: scale(1.08);
  }

  /* Kitchen mode toggle (Σύρτες/Ντουλάπια vs Πάνω/Κάτω) */
  .kitchen-mode-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    padding: 4px;
    background: rgba(0,0,0,.04);
    border-radius: 8px;
  }
  .kitchen-mode-toggle .mode-btn {
    flex: 1;
    padding: 8px 10px;
    font-family: inherit;
    font-size: var(--fs-xs);
    color: var(--clr-muted-3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
  }
  .kitchen-mode-toggle .mode-btn:hover {
    color: var(--clr-green);
    border-color: var(--clr-green);
  }
  .kitchen-mode-toggle .mode-btn.active {
    color: #fff;
    background: var(--clr-green-bright);
    border-color: var(--clr-green-bright);
    font-weight: 500;
  }

  /* ── Zone product picker (kitchen zone category tabs + swatch grid) ── */
  .zone-swatch-area {
    background: var(--menu-open);
    margin-bottom: 10px;
    padding: 4px;
    border-bottom: 1px solid rgba(180,150,110,.18);
    border-left: 4px solid #2D6A3F;
    
  }
  .zone-swatch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    max-height: 467px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
    border: 1px solid var(--clr-border-gray);
  }
  .zone-swatch-grid::-webkit-scrollbar { width: 2px; }
  .zone-swatch-grid::-webkit-scrollbar-thumb {
    background: rgba(60, 60, 60, .4);
    border-radius: 2px;
  }
  .zone-swatch {
    position: relative;
    aspect-ratio: 1;
    cursor: pointer;
    border: 2px solid rgba(180,150,110,.2);
    background-color: #fff;
    background-size: cover;
    background-position: center;
    padding: 0;
    transition: all .3s cubic-bezier(.16,1,.3,1);
  }
  .zone-swatch:hover {
    z-index: 2;
    border-color: var(--clr-green);
    box-shadow: 0 6px 20px rgba(0,0,0,.4);
  }
  .zone-swatch.active {
    border: 3px solid var(--clr-border);
    box-shadow: 0 6px 20px rgba(0,0,0,.4);
  }
  .zone-swatch-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2px 4px;
    font-size: var(--fs-xxs);
    color: #fff;
    text-align: left;
    text-shadow: 0 1px 3px rgba(0,0,0,.8);
    background: linear-gradient(transparent, rgba(0,0,0,.55));
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .zone-swatch-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--clr-muted-3);
    font-size: var(--fs-xs);
    padding: 14px 8px;
  }
  .zone-category-divider {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px 6px;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--clr-muted-3);
    letter-spacing: .08em;
  }
  .zone-category-divider:first-child { padding-top: 4px; }
  .zone-category-divider::before,
  .zone-category-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(180,150,110,.28);
  }
  .zone-swatch-skeleton {
    aspect-ratio: 1;
    border: 2px solid rgba(180,150,110,.18);
    background: linear-gradient(
      90deg,
      rgba(180,150,110,.06) 0%,
      rgba(180,150,110,.22) 50%,
      rgba(180,150,110,.06) 100%
    );
    background-size: 200% 100%;
    animation: zone-swatch-shimmer 1.2s linear infinite;
  }
  @keyframes zone-swatch-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  .zone-swatch-error {
    grid-column: 1 / -1;
    text-align: center;
    color: #a04040;
    font-size: var(--fs-xs);
    padding: 12px 8px;
    line-height: 1.4;
  }

  /* ── Zone selected product display ── */
  .zone-selected-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px 2px;
    font-size: var(--fs-xs);
    min-width: 0;
  }
  .zone-selected-label {
    color: var(--clr-muted-3);
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 500;
  }
  .zone-selected-name {
    font-weight: 700;
    color: var(--clr-green);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* ── Zone brand filter row ── */
  .zone-brand-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
    min-height: 0;
  }
  .zone-brand-btn {
    padding: 6px 10px;
    font-family: inherit;
    font-size: var(--fs-xxs);
    font-weight: 500;
    color: var(--clr-muted-3);
    background: transparent;
    border: 1px solid var(--clr-border-gray);
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
  }
  .zone-brand-btn:hover {
    color: var(--clr-green);
    border-color: var(--clr-green);
  }
  .zone-brand-btn.active {
    color: #fff;
    background: var(--clr-green-bright);
    border-color: var(--clr-green-bright);
  }

  /* ── Zone search box ── */
  .zone-search-box {
    position: relative;
    margin-bottom: 6px;
  }
  .zone-search-box input {
    width: 100%;
    padding: 7px 10px 7px 28px;
    border: 1px solid var(--clr-border-gray);
    border-radius: 6px;
    font-family: inherit;
    font-size: var(--fs-xs);
    color: var(--clr-bg);
    background: rgba(255,255,255,.75);
    outline: none;
    transition: border-color .2s;
  }
  .zone-search-box input:focus {
    border-color: var(--clr-green);
  }
  .zone-search-box input::placeholder {
    color: var(--clr-muted-3);
  }
  .zone-search-box .zone-search-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    stroke: var(--clr-muted-3);
    fill: none;
    pointer-events: none;
  }

  /* ── Catalog footer (timestamp + manual refresh) ── */
  .catalog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px 14px;
    margin-top: 6px;
    border-top: 1px dashed rgba(180,150,110,.18);
    font-size: var(--fs-xs);
    color: var(--clr-muted-3);
  }
  .catalog-timestamp {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .catalog-refresh-btn {
    padding: 5px 10px;
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--clr-green);
    background: transparent;
    border: 1px solid var(--clr-border-gray);
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
  }
  .catalog-refresh-btn:hover:not(:disabled) {
    color: #fff;
    background: var(--clr-green-bright);
    border-color: var(--clr-green-bright);
  }
  .catalog-refresh-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
  }

  /* ── Camera buttons ── */
  .cam-grid {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }

  .cam-btn {
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid rgba(180,150,110,.12);
    background: transparent;
    color: var(--clr-bg);
    font-size: var(--fs-small);
    cursor: pointer;
    transition: all .3s;
    font-weight: 500;
  }

  .cam-btn:hover,
  .cam-btn.active {
    background: var(--clr-green);
    color: var(--clr-text);
    border-color: var(--clr-muted-2);
  }

  /* ── Info strip ── */
  .info-strip {
    flex-shrink: 0;
    padding: 14px 24px;
    background: var(--clr-info-bg);
    border-top: 1px solid rgba(180,150,110,.06);
    display: flex;
    gap: 20px;
  }

  .info-col { flex: 1; }

  .info-col .label {
    font-size: var(--fs-xs);
    color: var(--clr-muted-7);
    margin-bottom: 2px;
  }

  .info-col .value {
    font-size: var(--fs-small);
    color: var(--clr-green);
    font-weight: 500;
  }

  .print-btn{
    display: block;
    width: 100%;
    padding: 13px;
    background-color: var(--clr-green);
    color: var(--clr-text);
    font-size: var(--fs-body);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
  }
  .print-btn:hover{
    background-color: var(--clr-green-bright);
  }



  /* ── Top bar ── */
  .top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 390px;
    z-index: 5;
    padding: 20px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to bottom, rgba(12,11,10,.85) 0%, transparent 100%);
    
  }

  @media (max-width: 768px) {
    .top-bar { right: 0; }
  }

  .top-bar .logo {
    font-size: var(--fs-logo);
    font-weight: 600;
    color: var(--clr-gold);
  }

  .top-bar .logo span {
    color: #ffffff;
    font-weight: 400;
  }

  .top-bar .hint {
    font-size: var(--fs-xs);
    color: var(--clr-muted-3);
  }

  /* ── Rotate hint ── */
  .rotate-hint {
    position: fixed;
    bottom: 24px;
    left: calc((100% - 360px) / 2);
    transform: translateX(-50%);
    z-index: 5;
    padding: 8px 16px;
    background: rgba(24,21,18,.8);
    border: 1px solid rgba(180,150,110,.1);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    font-size: var(--fs-xs);
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .rotate-hint svg {
    width: 16px;
    height: 16px;
    stroke: var(--clr-muted-3);
    fill: none;
    animation: spin 4s ease-in-out infinite;
  }

  @keyframes spin {
    0%, 100% { transform: rotate(-10deg); }
    50%       { transform: rotate(10deg); }
  }

  @media (max-width: 768px) {
    .rotate-hint {
      left: 50%;
      bottom: 57vh;
    }
  }

  /* ── Login overlay (v3 split-hero, light) ───────────────── */
  #loginOverlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #ffffff;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
  }
  #loginOverlay.hidden { display: none; }

  /* Left atmospheric image panel (shared with landing) */
  .split-image {
    position: relative;
    background: #1a1208;
    overflow: hidden;
    color: #fff;
  }
  .split-image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    z-index: 0;
    filter: brightness(0.6) saturate(0.85);
  }
  .split-image-content {
    position: absolute;
    inset: 0;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 2;
  }
  .split-image-content .badge {
    align-self: flex-start;
    background: #fff;
    color: #1a1a1a;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .split-image-content .badge .red { color: #b4352d; }
  .split-image-quote {
    border-left: 4px solid #b4352d;
    padding: 8px 0 8px 22px;
    max-width: 460px;
  }
  .split-image-quote .t {
    font-size: 12px;
    letter-spacing: 2.5px;
    color: #d9b88a;
    font-weight: 800;
    text-transform: uppercase;
  }
  .split-image-quote h3 {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    margin-top: 10px;
    letter-spacing: -.3px;
    line-height: 1.3;
  }
  .split-image-quote p {
    font-size: 14px;
    color: rgba(255,255,255,.65);
    margin-top: 12px;
    line-height: 1.55;
  }
  .split-image .floating-card {
    position: absolute;
    left: 48px;
    bottom: 200px;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(6px);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 320px;
    box-shadow: 0 20px 40px rgba(0,0,0,.3);
    z-index: 2;
  }
  .split-image .floating-card .icon {
    width: 38px;
    height: 38px;
    background: #2D6A3F;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
  }
  .split-image .floating-card .t {
    font-size: 10px;
    letter-spacing: 1.5px;
    font-weight: 800;
    color: #b4352d;
    text-transform: uppercase;
  }
  .split-image .floating-card .h {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 2px;
  }

  /* Right form panel */
  .login-panel {
    padding: 56px 70px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
  }
  .login-panel .panel-top {
    display: flex;
    align-items: center;
  }
  .login-panel .panel-top img {
    height: 62px;
  }
  .login-panel .panel-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 420px;
    width: 100%;
  }
  .login-panel .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #2D6A3F;
    margin-bottom: 18px;
  }
  .login-panel .eyebrow .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b4352d;
  }
  .login-panel h1 {
    font-size: 38px;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -.8px;
    line-height: 1.15;
  }
  .login-panel h1 .accent { color: #2D6A3F; }
  .login-panel .sub {
    font-size: 14px;
    color: #888;
    margin-top: 14px;
    line-height: 1.5;
  }
  .login-form {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .login-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .login-field label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #999;
    text-transform: uppercase;
  }
  .login-field input {
    width: 100%;
    background: #fff;
    border: none;
    border-bottom: 1.5px solid #ddd;
    padding: 12px 0;
    font-family: inherit;
    font-size: 15px;
    color: #1a1a1a;
    outline: none;
    transition: border-color .2s;
    border-radius: 0;
  }
  .login-field input:focus { border-bottom-color: #2D6A3F; }
  .login-error {
    font-size: 13px;
    color: #b4352d;
    min-height: 18px;
    margin-top: 2px;
  }
  .login-btn {
    margin-top: 6px;
    width: 100%;
    background: #2D6A3F;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 17px;
    border: none;
    cursor: pointer;
    border-radius: 0;
    transition: all .25s ease;
  }
  .login-btn:hover {
    background: #1F5230;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(45,106,63,.28);
  }
  .login-panel .panel-foot {
    margin-top: 24px;
    font-size: 11px;
    color: #aaa;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
  }

  /* Mobile fallback: hide image panel, single column */
  @media (max-width: 900px) {
    #loginOverlay { grid-template-columns: 1fr; }
    #loginOverlay .split-image { display: none; }
    .login-panel { padding: 30px 24px; }
  }

  .spectraweb {
    position: fixed;
    bottom: 14px;
    left: 14px;
    z-index: 5;
    padding: 8px 16px;
    font-size: var(--fs-micro);
    display: flex;
    align-items: center;
  }

  .spectraweb a {
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
  }

  .spectraweb:hover a {
    color: rgba(255,255,255,0.9);
  }

  .spectraweb.on-light a {
    color: rgba(0,0,0,0.4);
  }

  .spectraweb.on-light:hover a {
    color: rgba(0,0,0,0.75);
  }

  /* ════════════════════════════════════════════════════════════════════════
     Menu: logout link + gray "Ρυθμίσεις" card (same shape as the kitchen /
     wardrobe cards, neutral gray instead of green / red).
     ════════════════════════════════════════════════════════════════════════ */
  .menu-nav { display: flex; align-items: center; gap: 10px; }

  .card.card-settings { border-left-color: #8a8580; }
  .card.card-settings .card-cta { background: #8a8580; }
  .card.card-settings:hover .card-cta { background: #6f6a64; }

  /* ════════════════════════════════════════════════════════════════════════
     Settings page (/settings) — styled like the configurator: white panels,
     warm hairline borders, green accents, Manrope, the font-size tokens.
     ════════════════════════════════════════════════════════════════════════ */
  body.settings-body {
    background: #FAF8F5;
    color: var(--clr-bg);
    overflow-y: auto;        /* override global body{overflow:hidden;height:100vh} */
    height: auto;
    min-height: 100vh;
  }

  .settings-body .set-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
    background: #fff;
    border-bottom: 1px solid rgba(180,150,110,.15);
  }
  .settings-body .set-bar h1 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--clr-muted-3);
  }
  .settings-body .set-bar nav { display: flex; align-items: center; gap: 12px; }

  .settings-body .set-wrap {
    max-width: 880px;
    margin: 28px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .settings-body .card-sec {
    background: #fff;
    border: 1px solid rgba(180,150,110,.15);
    border-left: 4px solid #2D6A3F;
    padding: 22px 24px;
    box-shadow: 0 12px 28px rgba(0,0,0,.05);
  }
  .settings-body .card-sec h2 {
    margin: 0 0 4px;
    font-size: var(--fs-h2);
    font-weight: 700;
    color: var(--clr-muted-3);
  }
  .settings-body .card-sec .hint {
    margin: 0 0 16px;
    font-size: var(--fs-xs);
    color: var(--clr-muted-3);
    line-height: 1.5;
  }

  .settings-body table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
  .settings-body th,
  .settings-body td {
    text-align: left;
    padding: 9px 10px;
    border-bottom: 1px solid rgba(180,150,110,.12);
    vertical-align: middle;
  }
  .settings-body th {
    color: var(--clr-muted-3);
    font-weight: 700;
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: .05em;
  }

  .settings-body .row-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-top: 16px;
  }
  .settings-body .fld { display: flex; flex-direction: column; gap: 4px; }
  .settings-body .fld label { font-size: var(--fs-micro); color: var(--clr-muted-3); font-weight: 600; }
  .settings-body .fld input {
    padding: 9px 11px;
    border: 1px solid var(--clr-border-gray);
    background: #fff;
    color: var(--clr-bg);
    font: inherit;
    font-size: var(--fs-base);
  }
  .settings-body .fld input:focus { outline: none; border-color: var(--clr-green); }

  /* Primary button = green (like .cat-tab.active); link button = subtle / red. */
  .settings-body .btn {
    padding: 9px 18px;
    border: 1px solid var(--clr-green);
    background: var(--clr-green);
    color: var(--clr-text);
    font: inherit;
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s;
  }
  .settings-body .btn:hover { opacity: .88; }
  .settings-body .btn.link {
    background: none;
    border: none;
    padding: 4px 8px;
    font-weight: 600;
    color: #b4352d;
    cursor: pointer;
  }
  .settings-body .btn.link.edit { color: var(--clr-green); }
  .settings-body .btn.link:hover { text-decoration: underline; }

  .settings-body .msg { display: none; padding: 10px 14px; margin-bottom: 14px; font-size: var(--fs-base); }
  .settings-body .msg.err { display: block; background: rgba(180,53,45,.08); color: #b4352d; }
  .settings-body .msg.ok  { display: block; background: rgba(27,93,47,.10);  color: var(--clr-green); }

  .settings-body .muted { color: var(--clr-muted-6); }

  .settings-body .info {
    background: rgba(180,150,110,.07);
    border: 1px solid rgba(180,150,110,.18);
    padding: 14px 16px;
    color: var(--clr-muted-3);
    font-size: var(--fs-base);
    line-height: 1.55;
  }
  .settings-body .info code { background: rgba(180,150,110,.16); padding: 2px 6px; border-radius: 4px; }