/* ── Design tokens ─────────────────────────────────────────────────── */
:root {
  --gap:             20px;
  --note-bg:         #87d2ff;          /* light-pink note background        */
  --note-bg-border:  #40a4ff;          /* light-pink note background        */
  --cab-color:       #ffffff;          /* current door colour (overwritten) */
  --brand-red:       #d0112b;
  --text-light:      #ffffff;
  --font-main:       system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ── Reset / layout basics ─────────────────────────────────────────── */
*     { box-sizing:border-box; }
html,
body  { margin:0; padding:0; font-family:var(--font-main); background:#fafafa; color:#222; }

/* Each “view” (home / catalogue) takes the full screen; only one is .active */
.view          { display:none; }
.view.active   { display:block; }
.view        { background:#fafafa; color:#222; }
/* ── Home background now uses the hero photo and overlays for legibility ── */
#home{
  position:relative;
  min-height:100vh;
  color:var(--text-light);
  /* the photo itself */
  background-image:url("background.jpg");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:scroll;
}
/* vignette on the very edges (below content) */
#home::before{
  content:"";
  position:absolute; inset:0;
  z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 58%, rgba(0,0,0,0.40) 100%);
}
/* top scrim to make logo + headings pop (fades out downward) */
#home::after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:42vh; min-height:260px;
  z-index:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
}
/* lift actual content above the overlays */
#home > *{ position:relative; z-index:1; }
#home .btn,
#home .category-list button { color:var(--brand-red); border-color:rgba(255,255,255,.5); }
#home .btn.small            { border-color:transparent; }

#home .topbar,
#catalogue .topbar { background:var(--brand-red); color:var(--brand-red); }

#home .topbar .btn,
#home .topbar .icon-btn,
#home .topbar .select,
#catalogue .topbar .btn,
#catalogue .topbar .icon-btn,
#catalogue .topbar .select{
  color:var(--text-light);
  border-color:rgba(255,255,255,.5);
  background:transparent;          /* no white pills on red */
}
/* ── Top bar ───────────────────────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;gap:var(--gap);
  padding:10px;
  /* remove the old background:#fff; so it inherits */
  background:inherit;
  box-shadow:0 2px 4px rgba(0,0,0,.05);
  position:sticky;top:0;z-index:5;
}
/* ── Hamburger button ────────────────────────*/
#menuBtn{font-size:1.6rem;border:none;background:transparent; position: absolute; left: 50%; transform:translateX(-50%)}

/* ── Slide-down filter panel — hidden by default ─────────────────── */
.panel{
  display:none;                 /* shown when JS adds .show        */
  position:fixed;               /* fixed to viewport               */
  left:0; right:0; top:56px;    /* 56 px = .topbar height (10 px pad + 36 px btn) */
  background:var(--brand-red);
  color:var(--text-light);
  padding:var(--gap);
  gap:var(--gap);
  z-index:100;                  /* above cards but below top-bar   */
  flex-wrap:wrap; justify-content:space-between;
}
.panel.show{display:flex;}
.panel-title{margin:0 0 6px 0;font-size:1rem;font-weight:600;}
.col{flex:1 1 120px;min-width:120px;}

/* option buttons */
.opt-btn{
  display:inline-block;margin:4px 4px 4px 0;padding:6px 10px;
  border:1px solid #fff;border-radius:6px;background:transparent;
  color:#fff;font-size:.9rem;cursor:pointer;
}
.opt-btn.active{background:#fff;color:var(--brand-red);}
.option-list{display:flex;flex-wrap:wrap;}
/* ── Buttons / selects ─────────────────────────────────────────────── */
.btn,
.select,
.icon-btn{
  border:1px solid #ccc; background:#fff;
  border-radius:8px; padding:6px 12px; font-size:1rem;
}
.btn.small      { font-size:.9rem; padding:4px 8px; }
.icon-btn       { width:38px; height:38px; padding:0; font-size:1.5rem; display:flex; justify-content:center; align-items:center; }
.btn.primary    { background:var(--brand-red); color:var(--text-light); border-color:var(--brand-red); }

/* ── Home view ─────────────────────────────────────────────────────── */
.logo-wrap      { display:flex; justify-content:center; margin:40px 0; }
/* inline SVG logo gets a soft shadow for contrast */
.logo-wrap svg{ filter:drop-shadow(0 3px 10px rgba(0,0,0,.45)); }
.logo           { width:60%; max-width:200px; height:auto; }
/* subtle halo for headings over bright spots */
.tagline   { 
  text-align:center; margin-top:10px; font-size:1.7rem; font-weight:500; margin-bottom:50px;
  text-shadow: 0 2px 8px rgba(0,0,0,.8), 0 0 1px rgba(0,0,0,.7);
}
/* distributor line uses the same halo (it already has class="tagline") */

.category-list  { display:flex; flex-direction:column; align-items:center; gap:var(--gap); padding-bottom:60px; }
.category-list button{
  width:80%; padding:14px 20px; font-size:1.2rem;
  border:1px solid #ccc; border-radius:8px; background:#fffb;
}

/* ── Catalogue grid ────────────────────────────────────────────────── */
.cab-grid {
  display:flex; flex-wrap:wrap; gap:var(--gap);
  padding:var(--gap); justify-content:center;
}

/* Card */
.cab-card{
  flex:1 1 260px;      /* phone: 1 per row; desktop: 3-4 per row */
  max-width:320px; min-width:240px;
  display:flex; flex-direction:column; background:#fff;
  border:1px solid #ddd; border-radius:12px; padding:var(--gap);
}
.cab-card img,
.cab-card svg { width:100%; height:auto; }

/* Text blocks */
.cab-desc { margin-top:10px; font-weight:500; text-align:center; }
.cab-note {
  margin-top:10px; padding:8px;
  background:var(--note-bg); border:1px solid var(--note-bg-border); border-radius:8px;
  font-size:.9rem;
}
.cab-dims { margin-top:10px; font-size:.9rem; text-align:center; }

/* ── Door / colour tweaks set by JS ────────────────────────────────── */
body.slab      .shakerLines { display:none !important; }           /* hide Shaker details */
.shakerLines { display:none !important; }           /* hide Shaker details */
.cabColor      { fill:var(--cab-color) !important; }               /* override SVG fill */

#backBtn {
	border:none;

}
#langToggleHome,
#langToggleCat{ margin-left:auto; }

/* ── new elements ─────────────────────────────────────── */
.counter-info{
  flex: 0 0 100%;          /* always consumes the whole row */
  width: 100%;
  margin: var(--gap) 0;
  padding: 0;              /* no side-padding here */
}
.counter-inner{
  max-width: 700px;        /* cap at 700 on desktop */
  padding: 0 var(--gap);   /* restore the side inset */
  margin: 0 auto;          /* centre it */
  font-size: .95rem;
  line-height: 1.4;
}
.finish-grid{display:flex;flex-wrap:wrap;gap:10px;margin:var(--gap);}
.finish-grid img{width:calc(33.333% - 10px);height:auto;border:1px solid #ddd;}

.profile-list{display:flex;flex-direction:column;gap:20px;margin:var(--gap);}
.profile-list img{width:100%;max-width:800px;height:auto;border:1px solid #ddd;
                  align-self:center;}
.cab-price{margin-top:10px;text-align:center;font-weight:600;}
.cab-price .suffix{display:block;font-size:.8rem;font-weight:400;}
/* section headings */
.counter-h3{font-weight:700;margin:20px 0px 10px;}

/* finish tiles with caption */
.finish-item{display:inline-block;width:calc(33.333% - 10px);}
.finish-item img{width:100%;height:auto;display:block;border:1px solid #ddd;}
.finish-code{
  background:#444;color:#fff;font-size:.75rem;text-align:center;
  padding:2px 0;margin-top:-1px;           /* “touch” the image */
  border:1px solid #444;border-top:none;   /* seamless look */
}

/* ── Responsive tweaks ─────────────────────────────────────────────── */
@media (min-width:600px) { .cab-card{ flex:1 1 200px; } }
@media (min-width:900px) { .cab-card{ flex:1 1 180px; } }

/* ── variant block: dimensions ABOVE, then buy row ────────────────── */
.variant-block{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.variant-dims{ text-align:center; font-size:.9rem; opacity:.85; }
.buy-row{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.add-btn{
  width:32px; height:32px; border-radius:8px;
  border:1px solid #ddd; background:#fff; cursor:pointer;
}
.qty{ width:64px; padding:.25rem .5rem; }
.price-block{ text-align:center; min-width:80px; }
.price-block .price{ font-weight:600; display:block; }
.price-block .suffix{ display:block; font-size:.8rem; opacity:.8; }

/* ── toast ────────────────────────────────────────────────────────── */
#toastRoot{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:8px; align-items:center;
  z-index:9999; pointer-events:none;
}
.toast{
  background:rgba(0,0,0,.9); color:#fff; padding:8px 12px;
  border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.3);
  font-size:.9rem; pointer-events:auto; animation:toast-in .15s ease-out;
}
@keyframes toast-in{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:translateY(0)}
}
/* ── Home (category list) background image + vignette ─────────────── */
/* Only the main menu uses the background image; product and other views keep their own backgrounds. */
#home{
  /* make sure the background fills the viewport and scrolls with content */
  min-height:100vh;
  /* layer 1: vignette, layer 2: your photo */
  background-image:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 58%, rgba(0,0,0,0.40) 100%),
    url("background.jpg");
  /* crop gracefully on any aspect ratio */
  background-size: cover, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  /* image should scroll with the list (no parallax) */
  background-attachment: scroll, scroll;
}


/* ── Cart view ─────────────────────────────────────────────────────── */
.cart-list{ padding: var(--gap); display:flex; flex-direction:column; gap:12px; }
.cart-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#fff; border:1px solid #ddd; border-radius:10px; padding:10px 12px;
}
.cart-left{ min-width:0; }
.cart-title{ font-weight:600; }
.cart-meta{ font-size:.9rem; opacity:.8; }
.cart-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.qty-input{ width:72px; padding:.25rem .5rem; }
.line-total{ min-width:80px; text-align:right; font-weight:600; }
.del-btn{ border:1px solid #ccc; background:#fff; border-radius:8px; padding:6px 10px; cursor:pointer; }

.cart-item.discount{ background:#f6fff6; border-color:#cfe8cf; }
.cart-item.discount .cart-title{ color:#1b5e20; }

.cart-summary{
  padding: 0 var(--gap) var(--gap);
  display:flex; flex-direction:column; gap:8px;
}
.cart-summary .totals{
  display:flex; justify-content:space-between; align-items:center;
  background:#fff; border:1px solid #ddd; border-radius:10px; padding:10px 12px;
  font-size:1.05rem;
}
.cart-summary .tax-note{ font-size:.9rem; opacity:.8; }
.discount-hint{ font-size:.95rem; color:#1b5e20; margin-top:4px; }
/* ── Checkout form ────────────────────────────────────────────────── */
.form-grid{
  padding: var(--gap);
  display:grid; grid-template-columns: 1fr; gap:12px;
  max-width: 720px; margin: 0 auto;
}
.form-grid h2{ margin:0 0 6px 0; }
.form-grid label{ display:flex; flex-direction:column; gap:6px; }
.form-grid input{ border:1px solid #ccc; border-radius:8px; padding:8px 10px; font-size:1rem; background:#fff; }
@media (min-width:700px){
  .form-grid{ grid-template-columns: 1fr 1fr; }
  .form-grid h2{ grid-column: 1 / -1; }
  #submitOrderBtn{ grid-column: 1 / -1; justify-self:end; }
}

/* Due-diligence checklist */
#dueHdr{ grid-column:1 / -1; margin:6px 0 0 0; }
.checklist{
  grid-column:1 / -1;
  background:#fff; border:1px solid #ddd; border-radius:10px;
  padding:12px; display:flex; flex-direction:column; gap:8px;
}
.checklist label{
  display:flex;
  flex-direction:row;        /* override .form-grid label column layout */
  align-items:center;        /* checkbox and text on same baseline */
  gap:8px;
}
.checklist input[type="checkbox"]{ margin-top:2px; }
.checklist label span{ line-height:1.3; }   /* nicer vertical rhythm */
.form-warn{
  grid-column:1 / -1;
  display:none; padding:8px 10px;
  background:#ffecec; border:1px solid #f5c2c7; color:#a40000;
  border-radius:8px;
}

/* Fine print (policy note) */
.fineprint{
  grid-column:1 / -1;
  margin:6px 0 6px 0;
  font-size:.95rem; line-height:1.35;
  color:#555;
}

.confirm-paper{
  background:#fff;
  max-width: 960px;
  margin: 16px auto;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.06);
}
.confirm-msg{ color:#333; }
.confirm-section{ margin-top: 18px; }
.confirm-actions{
  max-width: 960px; margin: 10px auto 32px;
  display:flex; gap:10px; justify-content:flex-end; padding: 0 4px;
}
.summary-table{
  width:100%; border-collapse:collapse; font-size: 0.95rem;
}
.summary-table th,
.summary-table td{
  border-bottom: 1px solid #eee; padding: 8px 6px; text-align:left;
}
.summary-table th{ border-bottom:1px solid #ddd; }
.summary-table td.num, .summary-table th.num{ text-align:right; }
.summary-table tfoot td{ border-top:1px solid #ddd; font-weight:600; }

@media print{
  .topbar, .confirm-actions { display:none !important; }
  body, #app, #confirm { background:#fff; }
  .confirm-paper { box-shadow:none; padding:0; margin:0 auto; }
}

/* ── Entry modal ─────────────────────────────────────────────────── */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:none; align-items:center; justify-content:center; z-index:2000;
}
.modal{ background:#fff0; color:#222; border-radius:12px; max-width:560px; width:92%;
  padding:18px; box-shadow:0 10px 40px rgba(0,0,0,.25); }
.modal h3{ margin:0 0 8px; }
.modal p{ margin:0 0 12px; line-height:1.35; }
.modal .btn-row{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }
.modal .btn-row .btn{ padding:8px 14px; }

/* Image choices */
#entryModal .modal{
  /* allow two cards side-by-side; still constrained by viewport */
  max-width:96vw;
}
.entry-choices{
  display:grid; gap:14px; margin-top:12px;
  grid-template-columns: 1fr;
  justify-items:center;
}
.entry-card{
  position:relative; border:0; padding:0; background:transparent;
  border-radius:12px; overflow:hidden; cursor:pointer;
  /* identical proportion for both cards */
  aspect-ratio: 4 / 3;
  /* width rules: stacked (mobile) ≤ 80% of doc width */
  width:min(80vw, 560px);
  isolation:isolate;
}
@media (min-width: 900px){
  .entry-choices{ grid-template-columns: auto auto; }
  /* side-by-side: each card ≤ 30% of doc width */
  .entry-card{ width:min(30vw, 520px); }
}
.entry-card img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
  z-index:0;
}
.entry-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
  opacity:.65; transition:opacity .2s ease;
  z-index:1;            /* sous le texte */
}
.entry-card:hover::after{ opacity:.8; }
.entry-card:focus-visible{ outline:3px solid var(--brand-red); outline-offset:2px; }
.entry-label{
  position:absolute; left:50%; top:85%; transform:translate(-50%,-50%);
  color:#fff; font-weight:700; text-align:center;
  font-size:clamp(18px, 2.4vw, 28px);
  line-height:1.15;
  text-shadow: 0 2px 8px rgba(0,0,0,.8), 0 0 1px rgba(0,0,0,.7);
  z-index:2;            /* par-dessus l’overlay */
  pointer-events:none;  /* évite de bloquer le clic du bouton */
}
/* ── Design service view ─────────────────────────────────────────── */
.design-wrap{ padding: var(--gap); max-width: 900px; margin: 0 auto; }
.design-hero{ background:#fff; border:1px solid #ddd; border-radius:12px; padding:16px; }
.design-hero h2{ margin:6px 0 10px; }
.design-cols{ display:grid; grid-template-columns: 1fr; gap:14px; margin-top:14px; }
.design-card{ background:#fff; border:1px solid #eee; border-radius:10px; padding:12px; }
.design-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
@media (min-width:800px){ .design-cols{ grid-template-columns: 1.1fr .9fr; } }

/* thanks view */
.design-thanks{ padding: var(--gap); max-width: 760px; margin: 0 auto; }