/* =====================================================================
   CDIC — css/cdic-site.css · the house style of the whole site
   Paper, ink and the four process colours (cyan, magenta, yellow, black).
   Loaded on every page after css/tailwind.css.
   ===================================================================== */
/* =====================================================================
   CDIC — shared layout layer (every class is prefixed cx- so nothing
   collides with css/style.css, navbar.php or Tailwind)
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.cx-intro { overflow: hidden; }
body { overflow-x: hidden; margin: 0; }
img, video { max-width: 100%; height: auto; }
* { min-width: 0; }

.cx-top, .cx-main, .cx-foot, .cx-modal, .cx-intro-stage {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.cx-top *, .cx-main *, .cx-foot *, .cx-modal *, .cx-intro-stage * { box-sizing: border-box; }
.cx-main { background: var(--page); color: var(--ink); position: relative; }
.cx-main a, .cx-foot a, .cx-top a { text-decoration: none; }
.cx-main button, .cx-top button, .cx-foot button, .cx-modal button { font-family: inherit; cursor: pointer; }
.cx-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.cx-wrap--wide { max-width: 1600px; }
@media (min-width: 1900px) { .cx-wrap { max-width: 1500px; } }

.cx-main a:focus-visible, .cx-main button:focus-visible, .cx-main input:focus-visible,
.cx-main textarea:focus-visible, .cx-main label:focus-within,
.cx-top a:focus-visible, .cx-top button:focus-visible,
.cx-foot a:focus-visible, .cx-foot button:focus-visible, .cx-foot input:focus-visible,
.cx-modal button:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}

/* ---------- Opening animation shell (plays on every load) ---------- */
.cx-intro-stage {
  position: fixed; inset: 0; z-index: 100000; overflow: hidden;
  /* safety net: never leave the page covered if a script fails */
  animation: cxIntroFailsafe 0s linear 8s forwards;
}
@keyframes cxIntroFailsafe { to { visibility: hidden; pointer-events: none; } }
.cx-intro-skip {
  position: absolute; right: 20px; bottom: 20px; z-index: 5;
  background: none; border: 0; padding: 10px 14px; cursor: pointer;
  font: 600 12px/1 var(--font-body); letter-spacing: .08em; opacity: .55;
  color: inherit; transition: opacity .2s;
}
.cx-intro-skip:hover { opacity: 1; }

/* ---------- Scroll reveal (3D tilt-up) ---------- */
html.cx-js [data-rv] {
  opacity: 0;
  transform: perspective(1000px) rotateX(16deg) translateY(46px);
  transform-origin: 50% 100%;
  transition: opacity .9s var(--ease), transform 1s var(--ease);
  transition-delay: var(--rv-d, 0s);
}
html.cx-js [data-rv].is-in { opacity: 1; transform: none; }
@keyframes cxPop {
  from { opacity: 0; transform: perspective(900px) rotateY(-28deg) translateY(30px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Top contact bar ---------- */
.cx-top { position: relative; z-index: 9999; }
.cx-top__bar { display: none; background: var(--brown); color: #fff; border-bottom: 1px solid rgba(245,215,161,.1); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.cx-top__in { max-width: 1280px; margin: 0 auto; padding: 10px 24px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.cx-top__grp { display: flex; align-items: center; gap: 28px; }
.cx-top__lnk { background: none; border: 0; padding: 6px 0; color: #fff; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; transition: color .25s; }
.cx-top__lnk i { color: var(--sand); font-size: 12px; }
.cx-top__lnk:hover { color: var(--sand); }
@media (min-width: 768px) { .cx-top__bar { display: block; } }

/* Contact popup */
.cx-pop { display: none; position: fixed; left: 16px; right: 16px; bottom: 104px; z-index: 9999; }
.cx-pop.is-open { display: block; animation: cxPopUp .4s var(--ease) both; }
.cx-pop.is-closing { animation: cxPopDown .3s var(--ease) both; }
@keyframes cxPopUp { from { opacity: 0; transform: perspective(700px) rotateX(-14deg) translateY(22px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes cxPopDown { to { opacity: 0; transform: translateY(20px) scale(.95); } }
@media (min-width: 768px) { .cx-pop { left: auto; right: 32px; top: 96px; bottom: auto; width: 340px; } }
.cx-pop__card { position: relative; background: var(--brown); border: 1px solid rgba(245,215,161,.4); color: var(--sand); border-radius: 28px; padding: 30px 28px; box-shadow: 0 25px 60px rgba(0,0,0,.6); text-align: center; }
.cx-pop__x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; background: none; border: 0; color: rgba(245,215,161,.55); font-size: 20px; }
.cx-pop__x:hover { color: #fff; }
.cx-pop__ico { width: 62px; height: 62px; border-radius: 50%; background: rgba(245,215,161,.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 22px; }
.cx-pop h3 { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.cx-pop__sub { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 12px; }
.cx-pop__val { color: #fff; font-size: 15px; margin: 0 0 16px; line-height: 1.6; }
.cx-pop__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cx-pop__tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; transition: background .25s, color .25s, transform .25s; }
.cx-pop__tile i { color: var(--sand); font-size: 16px; }
.cx-pop__tile:hover { background: #fff; color: var(--brown); transform: translateY(-3px); }
.cx-pop__tile:hover i { color: var(--brown); }
.cx-pop__tile--wa { background: rgba(37,211,102,.1); border-color: rgba(37,211,102,.25); }
.cx-pop__tile--wa i { color: #25D366; }
.cx-pop__tile--wa:hover { background: #25D366; color: #fff; }
.cx-pop__tile--wa:hover i { color: #fff; }
.cx-pop__note { margin: 14px 0 0; font-size: 11px; color: rgba(255,255,255,.45); font-style: italic; }

/* Mobile dock */
.cx-dock { position: fixed; left: 20px; right: 20px; bottom: 22px; z-index: 9999; display: flex; align-items: center; justify-content: space-between; background: rgba(44,27,19,.95); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 8px; box-shadow: 0 20px 40px rgba(0,0,0,.4); }
.cx-dock__i { width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.06); color: var(--sand); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.cx-dock__i--wa { color: #25D366; font-size: 20px; }
.cx-dock__i--main { width: 58px; height: 58px; background: var(--sand); color: var(--brown); font-size: 20px; transform: translateY(-12px); box-shadow: 0 6px 0 #b9975c, 0 0 25px rgba(245,215,161,.5); }
.cx-dock__i--main:active { transform: translateY(-7px); box-shadow: 0 1px 0 #b9975c; }
@media (min-width: 768px) { .cx-dock { display: none; } }

/* ---------- Section scaffolding ---------- */
.cx-sec { padding: clamp(56px, 8vw, 104px) 0; position: relative; overflow: hidden; }
.cx-sec--band { background: var(--band); color: var(--band-ink); }
.cx-sec--alt { background: var(--page-2); }
.cx-title { font-family: var(--title-font); font-weight: var(--title-weight); font-style: var(--title-style, normal); letter-spacing: var(--title-track, -.01em); font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.08; margin: 0; color: var(--title-ink); }
.cx-sec--band .cx-title { color: var(--band-title); }
.cx-kicker { display: block; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; }
.cx-sec--band .cx-kicker { color: var(--band-muted); }
.cx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 52px); flex-wrap: wrap; }
.cx-head--center { justify-content: center; text-align: center; }
.cx-head__tools { display: flex; align-items: center; gap: 14px; }

/* Feature chips (hero) */
.cx-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cx-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; background: var(--chip); border: 1px solid var(--chip-line); color: var(--chip-ink); }
.cx-chips i { font-size: 13px; color: var(--gold); }
.cx-hero { position: relative; overflow: hidden; }
.cx-hero__nav { display: flex; align-items: center; justify-content: center; gap: 18px; }
.cx-btn { display: inline-flex; border: 0; padding: 0; background: none; position: relative; cursor: pointer; font-family: var(--font-body); -webkit-tap-highlight-color: transparent; }
.cx-btn__f i, .cx-btn__b i { margin: 0 4px; }
.cx-btn--block { display: flex; width: 100%; }
.cx-btn--block .cx-btn__in { width: 100%; text-align: center; }
.cx-sec--dark { background: var(--brown); }

/* Stacked hero texts: one visible at a time, lines stagger in */
.hx-texts { display: grid; position: relative; z-index: 2; }
.hx-text { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; visibility: hidden; pointer-events: none; }
.hx-text.is-on, .hx-text.is-out { visibility: visible; }
.hx-text.is-on { pointer-events: auto; }
.hx-text h2 { font-family: var(--title-font); font-weight: var(--title-weight); font-style: var(--title-style, normal); letter-spacing: var(--title-track, -.01em); font-size: clamp(1.9rem, 3.7vw, 3.3rem); line-height: 1.1; margin: 0; color: var(--hero-title, var(--title-ink)); text-wrap: balance; }
.hx-text p { font-size: clamp(.98rem, 1.25vw, 1.08rem); line-height: 1.7; margin: 0; color: var(--muted); max-width: 54ch; }
.hx-text > * { opacity: 0; transform: translateY(26px); }
.hx-text.is-on > * { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .9s var(--ease); }
.hx-text.is-on > :nth-child(1) { transition-delay: .12s; }
.hx-text.is-on > :nth-child(2) { transition-delay: .22s; }
.hx-text.is-on > :nth-child(3) { transition-delay: .32s; }
.hx-text.is-on > :nth-child(4) { transition-delay: .42s; }
.hx-text.is-out > * { transition: opacity .25s, transform .3s; }
@media (max-width: 899px) {
  .hx-text { align-items: center; text-align: center; }
  .hx-text p { display: none; }
  .cx-hero .cx-chips { justify-content: center; }
  .cx-hero .cx-chips li { font-size: 13px; padding: 8px 12px; }
}

/* Round 3D arrow buttons */
.cx-round { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }

/* Dots */
.cx-dots { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cx-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 10px; background: var(--dot); transition: width .35s var(--ease), background .35s; position: relative; }
.cx-dot::before { content: ''; position: absolute; inset: -12px -4px; }
.cx-dot.is-on { width: 30px; background: var(--dot-on); }

/* ---------- Best sellers ---------- */
#products-grid:empty { min-height: 320px; }
.cx-grid { display: grid; grid-template-columns: 1fr; gap: 32px; justify-items: center; }
@media (min-width: 640px) { .cx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .cx-grid { grid-template-columns: repeat(4, 1fr); } }
.cx-grid__msg { grid-column: 1 / -1; text-align: center; padding: 40px 0; margin: 0; opacity: .7; }
.cx-center { text-align: center; margin-top: 44px; }

/* ---------- About ---------- */
.cx-about { min-height: 92vh; display: flex; align-items: center; text-align: center; }
.cx-about__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cx-about__in { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; }
.cx-about__logo { width: clamp(132px, 16vw, 196px); aspect-ratio: 1; margin: 0 auto 36px; border-radius: 50%; padding: 5px; background: linear-gradient(135deg, var(--gold), #fff 70%); box-shadow: 0 30px 60px rgba(44,27,19,.25); transform-style: preserve-3d; animation: cxCoin 9s ease-in-out infinite; }
.cx-about__logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 8px solid #fff; display: block; background: #fff; }
@keyframes cxCoin { 0%, 100% { transform: perspective(700px) rotateY(-16deg) rotateX(6deg); } 50% { transform: perspective(700px) rotateY(16deg) rotateX(-4deg); } }
.cx-about h1 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(2.2rem, 7vw, 5.6rem); line-height: 1.05; margin: 0 0 28px; color: var(--title-ink); }
.cx-about h1 strong { display: block; font-family: var(--font-body); font-style: normal; font-weight: 800; letter-spacing: -.03em; }
.cx-about__rule { width: 80px; height: 4px; background: var(--gold); margin: 0 auto 32px; border: 0; }
.cx-about__lead { font-size: clamp(1.05rem, 2vw, 1.45rem); font-weight: 300; line-height: 1.65; max-width: 46ch; margin: 0 auto 40px; color: var(--muted); }
.cx-about__lead em { font-weight: 600; }
.cx-about__cta { display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* ---------- Product rails ---------- */
.cx-rail { position: relative; }
.cx-rail__view { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 26px 0 46px; margin: -26px -12px -46px; perspective: 1400px; }
.cx-rail__view::-webkit-scrollbar { display: none; }
.cx-rail__item { flex: 0 0 100%; padding: 0 12px; scroll-snap-align: start; }
@media (min-width: 640px) { .cx-rail__item { flex-basis: 50%; } }
@media (min-width: 1024px) { .cx-rail__item { flex-basis: 33.3333%; } }
.cx-rail__msg { padding: 30px 12px; margin: 0; opacity: .65; }
.cx-rail__dots { margin-top: 30px; }

.cx-card { height: 100%; display: flex; flex-direction: column; background: var(--card); color: var(--card-ink); border: 1px solid var(--card-line); border-radius: var(--radius-card); padding: 26px; box-shadow: var(--shadow-card);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--lift, 0px));
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s; }
.cx-card.is-tilting { transition: box-shadow .5s var(--ease), border-color .4s; }
.cx-card:hover { --lift: 18px; box-shadow: var(--shadow-card-hover); border-color: var(--gold); }
.cx-card__img { height: 220px; border-radius: calc(var(--radius-card) - 8px); background: var(--card-well); margin-bottom: 22px; overflow: hidden; transform: translateZ(34px); }
.cx-card__img img { width: 100%; height: 100%; object-fit: contain; padding: 16px; display: block; transition: transform .8s var(--ease); }
.cx-card:hover .cx-card__img img { transform: scale(1.09) rotate(-2deg); }
.cx-card__name { font-size: 1.3rem; font-weight: 800; line-height: 1.2; margin: 0 0 6px; color: var(--card-ink); transform: translateZ(22px); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cx-card__sub { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--card-muted); margin: 0; }
.cx-card__foot { margin-top: auto; padding-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; transform: translateZ(28px); }
.cx-card__lbl { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--card-muted); }
.cx-card__price { font-size: 1.25rem; font-weight: 800; color: var(--price); white-space: nowrap; }
.cx-card__price small { font-size: .7em; }

/* ---------- Special projects form ---------- */
.cx-quote { display: flex; flex-direction: column; max-width: 920px; margin: 0 auto; border-radius: 40px; overflow: hidden; background: #fff; box-shadow: 0 50px 100px rgba(0,0,0,.4); }
.cx-quote__side { background: var(--brown-2); color: #fff; padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.cx-quote__side h2 { font-family: var(--title-font); font-weight: var(--title-weight); font-size: 2rem; line-height: 1.15; margin: 0 0 18px; color: #fff; }
.cx-quote__side p { color: rgba(255,255,255,.65); font-size: 14px; line-height: 1.7; margin: 0 0 28px; }
.cx-quote__side i.cx-bar { display: block; width: 48px; height: 4px; background: var(--gold); }
.cx-quote__form { padding: 44px 32px; flex: 1; display: flex; flex-direction: column; gap: 34px; color: var(--brown); }
@media (min-width: 768px) { .cx-quote { flex-direction: row; } .cx-quote__side { width: 36%; } .cx-quote__form { padding: 60px 56px; } }
.cx-field { position: relative; }
.cx-input { width: 100%; padding: 12px 0; background: transparent; border: 0; border-bottom: 2px solid #ECE7E1; font: 700 16px var(--font-body); color: var(--brown); outline: none; transition: border-color .3s; border-radius: 0; }
.cx-input:focus { border-color: var(--gold); }
textarea.cx-input { resize: none; display: block; }
.cx-label { position: absolute; left: 0; top: 14px; color: #8b8178; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; pointer-events: none; transition: transform .3s, color .3s, font-size .3s; transform-origin: left; }
.cx-input:focus ~ .cx-label, .cx-input:not(:placeholder-shown) ~ .cx-label { transform: translateY(-26px); color: var(--gold-deep); font-size: 10px; }
.cx-drop { display: block; border: 2px dashed #E4DDD4; border-radius: 18px; padding: 22px; text-align: center; cursor: pointer; background: #FAF9F6; color: #7b7068; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; transition: border-color .3s, transform .3s; }
.cx-drop:hover, .cx-drop.has-file { border-color: var(--gold); }
.cx-drop i { display: block; font-size: 18px; color: var(--gold); margin-bottom: 8px; }
.cx-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cx-drop b { color: var(--brown); font-weight: 800; text-transform: none; letter-spacing: 0; font-size: 13px; word-break: break-all; }
.cx-form-err { margin: -18px 0 0; text-align: center; color: #c0392b; font-size: 12px; font-weight: 700; }
.cx-form-err[hidden] { display: none; }

/* Success modal */
.cx-modal { position: fixed; inset: 0; z-index: 99990; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .45s; perspective: 1000px; }
.cx-modal.is-open { opacity: 1; pointer-events: auto; }
.cx-modal__card { background: #fff; color: var(--brown); border-radius: 40px; padding: 40px; max-width: 380px; text-align: center; box-shadow: 0 40px 90px rgba(0,0,0,.45); transform: rotateX(-50deg) scale(.8); transition: transform .7s var(--ease); }
.cx-modal.is-open .cx-modal__card { transform: none; }
.cx-modal__ico { width: 80px; height: 80px; border-radius: 50%; background: var(--brown-2); color: var(--gold); font-size: 30px; display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; box-shadow: 0 8px 0 #1c110b, 0 20px 30px rgba(0,0,0,.25); }
.cx-modal h3 { font-size: 1.6rem; font-weight: 800; margin: 0 0 10px; }
.cx-modal p { color: #7b7068; font-size: 14px; line-height: 1.7; margin: 0 0 28px; }

/* ---------- Blog ---------- */
.cx-blogs { display: grid; grid-template-columns: 1fr; gap: 36px; perspective: 1400px; }
@media (min-width: 640px) { .cx-blogs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cx-blogs { grid-template-columns: repeat(3, 1fr); } }
.cx-blogs__msg { grid-column: 1 / -1; text-align: center; margin: 0; opacity: .7; }
.cx-post { background: var(--card); color: var(--card-ink); border: 1px solid var(--card-line); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease), box-shadow .5s var(--ease); animation: cxPop .9s var(--ease) backwards; }
.cx-post.is-tilting { transition: box-shadow .5s var(--ease); }
.cx-post:hover { box-shadow: var(--shadow-card-hover); }
.cx-post img { width: 100%; height: 240px; object-fit: cover; display: block; }
.cx-post__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.cx-post h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.3; margin: 0 0 10px; color: var(--card-ink); }
.cx-post p { color: var(--card-muted); line-height: 1.6; margin: 0 0 16px; font-size: 15px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.cx-post a { margin-top: auto; color: var(--price); font-weight: 700; font-size: 14px; display: inline-flex; gap: 8px; align-items: center; }
.cx-post a i { transition: transform .3s var(--ease); font-size: 12px; }
.cx-post a:hover i { transform: translateX(6px); }

/* ---------- Footer ---------- */
.cx-foot { position: relative; background: var(--brown); color: #FAF9F6; padding: 88px 0 120px; overflow: hidden; }
@media (min-width: 768px) { .cx-foot { padding-bottom: 44px; } }
.cx-foot__glow { position: absolute; top: 0; left: 20%; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(212,175,55,.09), transparent 65%); pointer-events: none; }
.cx-foot__top { position: relative; display: grid; gap: 44px; padding-bottom: 64px; border-bottom: 1px solid rgba(212,175,55,.12); }
@media (min-width: 1024px) { .cx-foot__top { grid-template-columns: 5fr 7fr; align-items: center; } }
.cx-foot__logo { height: 112px; width: auto; display: block; margin-bottom: 18px; }
.cx-foot__quote { color: rgba(255,255,255,.65); font-size: 18px; line-height: 1.6; font-style: italic; font-weight: 300; margin: 0 0 22px; max-width: 28em; }
.cx-foot__quote span { display: block; margin-top: 6px; color: var(--gold); font-style: normal; font-weight: 500; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.cx-foot__soc { display: flex; gap: 14px; }
.cx-foot__soc a { width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: 0 5px 0 rgba(0,0,0,.35); transition: transform .25s var(--ease), box-shadow .25s, background .3s, color .3s; }
.cx-foot__soc a:hover { background: var(--gold); color: var(--brown); transform: translateY(-3px); box-shadow: 0 8px 0 #8a6d14; }
.cx-foot__soc a:active { transform: translateY(4px); box-shadow: 0 1px 0 #8a6d14; }
.cx-news { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 32px; padding: 32px; display: grid; gap: 22px; }
@media (min-width: 768px) { .cx-news { grid-template-columns: 1fr 1fr; align-items: center; padding: 38px; } }
.cx-news h3 { font-size: 1.5rem; font-weight: 800; margin: 0 0 6px; color: #fff; }
.cx-news p { color: rgba(255,255,255,.5); font-size: 14px; margin: 0; }
.cx-news form { display: flex; gap: 8px; background: var(--brown); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 7px; }
.cx-news form:focus-within { border-color: var(--gold); }
.cx-news input { flex: 1; background: none; border: 0; color: #fff; padding: 10px 12px; font: 400 14px var(--font-body); outline: none; }
.cx-news input::placeholder { color: rgba(255,255,255,.4); }
.cx-foot__cols { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 28px; padding: 64px 0; }
@media (min-width: 768px) { .cx-foot__cols { grid-template-columns: repeat(4, 1fr); } }
.cx-foot__cols h4 { color: var(--gold); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .24em; margin: 0 0 26px; }
.cx-foot__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-size: 14px; font-weight: 500; }
.cx-foot__cols li { position: relative; width: fit-content; }
.cx-foot__cols li a { color: rgba(255,255,255,.55); transition: color .3s; }
.cx-foot__cols li a:hover { color: #fff; }
.cx-foot__cols li::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--gold); transition: width .3s ease; }
.cx-foot__cols li:hover::after { width: 100%; }
.cx-foot__addr { display: grid; gap: 18px; font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.6; }
.cx-foot__addr p { margin: 0; display: flex; gap: 14px; align-items: flex-start; }
.cx-foot__addr i { color: var(--gold); margin-top: 4px; }
.cx-foot__end { position: relative; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; gap: 18px; align-items: center; justify-content: space-between; }
@media (min-width: 768px) { .cx-foot__end { flex-direction: row; } }
.cx-foot__end p { margin: 0; color: rgba(255,255,255,.35); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cx-foot__end img { height: 20px; width: auto; opacity: .3; filter: grayscale(1); }

@media (hover: none) and (pointer: coarse) {
  .cx-btn, .cx-round { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cx-intro-stage { display: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html.cx-js [data-rv] { opacity: 1; transform: none; }
}

:root {
  --gold: #d4af37; --gold-deep: #8f7216; --sand: #F5D7A1; --brown: #2C1B13; --brown-2: #43291F; --clay: #6E594E;
  --cyan: #00AEEF; --magenta: #EC008C; --yellow: #FFD400;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font-body: 'Montserrat', system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --page: #FBFAF7; --page-2: #F1EEE7; --ink: #2C1B13; --muted: #5d5049;
  --band: #2C1B13; --band-ink: #fff; --band-title: #fff; --band-muted: rgba(255,255,255,.65);
  --title-font: var(--font-body); --title-weight: 800; --title-track: -.035em; --title-ink: #2C1B13;
  --card: #fff; --card-ink: #2C1B13; --card-muted: #7b7068; --card-line: #2C1B13; --card-well: #F6F3EE;
  --radius-card: 12px; --price: #8f7216;
  --shadow-card: 7px 7px 0 rgba(44,27,19,.12);
  --shadow-card-hover: 4px 4px 0 var(--cyan), 8px 8px 0 var(--magenta), 12px 12px 0 var(--yellow);
  --chip: #fff; --chip-line: #2C1B13; --chip-ink: #2C1B13;
  --dot: #cfc8bf; --dot-on: #2C1B13; --dust: 44,27,19;
}
.cx-sec--band { --dot: rgba(255,255,255,.3); --dot-on: var(--gold); --shadow-card: 7px 7px 0 rgba(0,0,0,.45); }
.cx-sec--dark { background: var(--clay); }
.cx-sec--blog { background: var(--page); }
.cx-chips li { border-radius: 6px; }
.cx-dot, .cx-dot.is-on { border-radius: 2px; }
.cx-kicker { color: var(--ink); letter-spacing: .16em; display: flex; align-items: center; }
.cx-kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 12px 0 0 var(--magenta), 24px 0 0 var(--yellow), 36px 0 0 var(--ink); margin-right: 48px; flex: none; }
.cx-sec--band .cx-kicker, .cx-quote__side .cx-kicker { color: #fff; }
.cx-sec--band .cx-kicker::before, .cx-quote__side .cx-kicker::before { box-shadow: 12px 0 0 var(--magenta), 24px 0 0 var(--yellow), 36px 0 0 #fff; }
.cx-about .cx-kicker { justify-content: center; }
.cx-about h1 { font-style: normal; font-family: var(--font-body); font-weight: 300; letter-spacing: -.03em; }
.cx-about__rule { background: linear-gradient(90deg, var(--cyan) 25%, var(--magenta) 25% 50%, var(--yellow) 50% 75%, var(--ink) 75%); width: 96px; }
.cx-quote { border-radius: 14px; box-shadow: 5px 5px 0 var(--cyan), 10px 10px 0 var(--magenta), 15px 15px 0 var(--yellow); }
.cx-modal__card, .cx-news { border-radius: 14px; }
.cx-drop, .cx-news form { border-radius: 10px; }
/* ink gauge down the left edge: fills as you scroll */
.p2-gauge { position: fixed; left: 0; top: 0; bottom: 0; width: 7px; z-index: 9998; pointer-events: none; transform-origin: 50% 0; transform: scaleY(var(--sp, 0));
  background: linear-gradient(180deg, var(--cyan) 25%, var(--magenta) 25% 50%, var(--yellow) 50% 75%, var(--ink) 75%); }


/* ---------- 3D buttons: a block that rolls over, resting on three ink plates ---------- */
.cx-btn { --h: 56px; --o: 3px; --k: var(--brown); height: var(--h); perspective: 700px; font-weight: 800; font-size: 15px; border-radius: 9px;
  box-shadow: var(--o) var(--o) 0 var(--cyan), calc(var(--o) * 2) calc(var(--o) * 2) 0 var(--magenta), calc(var(--o) * 3) calc(var(--o) * 3) 0 var(--k);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.cx-btn:hover { --o: 5px; transform: translate(-4px, -4px); }
.cx-btn:active { --o: 0px; transform: translate(9px, 9px); }
.cx-sec--band .cx-btn, .cx-sec--dark .cx-btn, .cx-top .cx-btn, .cx-foot .cx-btn, .cx-pop .cx-btn { --k: var(--yellow); }
.cx-card .cx-btn, .cx-quote .cx-btn { --k: var(--yellow); }
.cx-btn__in { display: block; position: relative; height: 100%; transform-style: preserve-3d; transform: translateZ(calc(var(--h) / -2)); transition: transform .55s var(--ease); }
.cx-btn__f, .cx-btn__b { display: flex; align-items: center; justify-content: center; gap: 6px; height: var(--h); padding: 0 34px; border-radius: 9px; white-space: nowrap; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cx-btn__f { background: var(--gold); color: var(--brown); transform: translateZ(calc(var(--h) / 2)); box-shadow: inset 0 0 0 2px var(--brown); }
.cx-btn__b { position: absolute; inset: 0; background: var(--brown); color: #fff; transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); box-shadow: inset 0 0 0 2px var(--gold); }
.cx-btn:hover .cx-btn__in, .cx-btn:focus-visible .cx-btn__in { transform: translateZ(calc(var(--h) / -2)) rotateX(90deg); }
.cx-btn--dark .cx-btn__f { background: var(--brown); color: #fff; box-shadow: none; }
.cx-btn--dark .cx-btn__b { background: var(--gold); color: var(--brown); box-shadow: inset 0 0 0 2px var(--brown); }
.cx-btn--line .cx-btn__f { background: transparent; color: var(--brown); }
.cx-btn--line .cx-btn__b { background: var(--brown); color: #fff; box-shadow: none; }
.cx-btn--sm { --h: 42px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.cx-btn--sm .cx-btn__f, .cx-btn--sm .cx-btn__b { padding: 0 18px; border-radius: 7px; }
.cx-btn.is-less .cx-btn__f { background: #a39c95; color: #fff; }
.cx-btn[disabled] .cx-btn__in { transform: translateZ(calc(var(--h) / -2)); }
.cx-btn--sm { --o: 2px; border-radius: 7px; }
.cx-btn--sm:hover { --o: 3px; transform: translate(-2px, -2px); }
.cx-btn--sm:active { --o: 0px; transform: translate(6px, 6px); }
.cx-btn--line .cx-btn__f { background: #fff; }

.cx-round { border-radius: 10px; border: 2px solid var(--ink); background: #fff; color: var(--ink); box-shadow: 3px 3px 0 var(--cyan), 6px 6px 0 var(--magenta); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.cx-round:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--cyan), 10px 10px 0 var(--magenta); }
.cx-round:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--cyan), 0 0 0 var(--magenta); }
.cx-sec--band .cx-round { border-color: #fff; }

/* ---------- Madame Cédic, perched around the page ---------- */
.og-perch { --w: 150px; position: absolute; z-index: 6; width: var(--w); height: var(--w); padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.og-perch__b { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.og-perch img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 14px 12px rgba(44,27,19,.28)); transform-origin: 50% 100%; }
html.cx-js .og-perch img { opacity: 0; }
.og-perch.is-in img { opacity: 1; animation: ogLand 1s cubic-bezier(.3, 1.5, .5, 1) both, ogBob 5s ease-in-out 1s infinite; }
@keyframes ogLand { 0% { opacity: 0; transform: translate(90px, -140px) rotate(28deg) scale(.45); } 70% { transform: translate(0, 4px) scale(1.06, .92); } 100% { opacity: 1; transform: none; } }
@keyframes ogBob { 50% { transform: translateY(-6px) rotate(-1.5deg); } }
.og-perch:hover .og-perch__b, .og-perch:focus-visible .og-perch__b { transform: translateY(-10px) rotate(-5deg) scale(1.05); }
.og-perch:active .og-perch__b { transform: scale(.94); }
.og-perch:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 12px; }
.og-say { position: absolute; right: 78%; bottom: 82%; width: max-content; max-width: 210px; padding: 9px 13px; border-radius: 14px 14px 3px 14px; background: #fff; color: #2C1B13; border: 2px solid #2C1B13; box-shadow: 3px 3px 0 var(--gold);
  font: 700 13px/1.35 var(--font-body); text-align: left; opacity: 0; transform: scale(.5) translateY(10px); transform-origin: 100% 100%; transition: opacity .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; }
.og-perch:hover .og-say, .og-perch:focus-visible .og-say, .og-perch.is-talk .og-say { opacity: 1; transform: none; }
.og-perch--left .og-say { right: auto; left: 78%; border-radius: 14px 14px 14px 3px; transform-origin: 0 100%; }
/* success and error moments */
.cx-modal__ico.og-ico { width: 150px; height: 150px; background: none; box-shadow: none; margin-top: -110px; }
.cx-modal__ico.og-ico img { width: 100%; height: 100%; filter: drop-shadow(0 16px 16px rgba(0,0,0,.3)); }
.cx-modal.is-open .og-ico img { animation: ogLand .9s cubic-bezier(.3, 1.5, .5, 1) .15s both; }
.cx-form-err { display: flex; align-items: center; justify-content: center; gap: 8px; }
.cx-form-err img { width: 44px; height: 44px; flex: none; }
@media (prefers-reduced-motion: reduce) { html.cx-js .og-perch img { opacity: 1; animation: none !important; } }
/* =====================================================================
   SITE-WIDE ADDITIONS (inner pages, navbar, footer, transitions)
   ===================================================================== */
html body.cx-body { background: var(--page); color: var(--ink); font-family: var(--font-body); margin: 0; -webkit-font-smoothing: antialiased; }
body.cx-body.is-locked { overflow: hidden; }
.cx-skip { position: absolute; left: 12px; top: -60px; z-index: 100010; background: var(--brown); color: #fff; padding: 10px 16px; border-radius: 8px; font: 700 14px var(--font-body); transition: top .2s; }
.cx-skip:focus { top: 12px; }

/* ---------- Footer (shared) ---------- */
.cx-foot { padding-top: 130px; }
.cx-news { position: relative; }
.og-perch--foot { --w: 124px; right: 26px; top: -112px; }
.cx-news__msg { grid-column: 1 / -1; margin: -6px 0 0; font-size: 13px; font-weight: 600; color: var(--sand); min-height: 1em; }
.cx-news__msg.is-err { color: #ff9b8a; }
.cx-foot__cols li a[aria-current="page"] { color: #fff; }
.cx-foot__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; }
.cx-foot__legal a { color: rgba(255,255,255,.4); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cx-foot__legal a:hover { color: #fff; }

/* ---------- Navbar ---------- */
.cx-nav { position: sticky; top: 0; z-index: 9990; font-family: var(--font-body); background: #FBFAF7; border-bottom: 2px solid var(--ink); transition: box-shadow .2s; contain: layout style; }
.cx-nav *, .cx-drawer * { box-sizing: border-box; }
.cx-nav a, .cx-drawer a { text-decoration: none; color: inherit; }
.cx-nav button, .cx-drawer button { font-family: inherit; cursor: pointer; }
.cx-nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 4px; pointer-events: none;
  background: linear-gradient(90deg, var(--cyan) 25%, var(--magenta) 25% 50%, var(--yellow) 50% 75%, var(--ink) 75%); transform-origin: 0 50%; transform: scaleX(0); transition: transform .5s var(--ease); }
.cx-nav.is-stuck { box-shadow: 0 12px 30px rgba(44,27,19,.10); }
.cx-nav.is-stuck::after { transform: scaleX(1); }
.cx-nav__bar { display: flex; align-items: center; gap: 18px; height: 84px; transition: height .2s ease; }
.cx-nav.is-stuck .cx-nav__bar { height: 68px; }
.cx-nav__logo { flex: none; display: flex; align-items: center; height: 100%; }
.cx-nav__logo img { height: 52px; width: auto; display: block; transition: transform .4s var(--ease), height .3s var(--ease); }
.cx-nav.is-stuck .cx-nav__logo img { height: 42px; }
.cx-nav__logo:hover img { transform: rotate(-4deg) scale(1.05); }
.cx-nav__menu { flex: 1; display: none; justify-content: center; height: 100%; }
.cx-nav__menu > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 2px; height: 100%; }
.cx-nav__item { position: static; display: flex; align-items: center; }
.cx-nav__lnk { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 13px; border: 0; background: none; border-radius: 8px; color: var(--ink); font: 700 14px/1 var(--font-body); letter-spacing: -.01em; white-space: nowrap; transition: background .2s, color .2s; }
.cx-nav__lnk i { font-size: 10px; transition: transform .3s var(--ease); }
.cx-nav__lnk:hover, .cx-nav__item.is-open > .cx-nav__lnk { background: var(--ink); color: #fff; }
.cx-nav__item.is-open > .cx-nav__lnk i { transform: rotate(180deg); }
.cx-nav__lnk[aria-current="page"]::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 3px; background: linear-gradient(90deg, var(--cyan) 33%, var(--magenta) 33% 66%, var(--yellow) 66%); }
.cx-nav__lnk--hot { color: var(--gold-deep); }
.cx-nav__lnk--hot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 0 0 rgba(236,0,140,.6); animation: cxPing 1.8s infinite; }
@keyframes cxPing { 70% { box-shadow: 0 0 0 8px rgba(236,0,140,0); } 100% { box-shadow: 0 0 0 0 rgba(236,0,140,0); } }

/* Mega panels */
.cx-mega { position: absolute; left: 0; right: 0; top: 100%; padding-top: 2px; visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .14s ease, transform .18s ease, visibility 0s .18s; pointer-events: none; will-change: opacity, transform; }
.cx-mega::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 16px; }
.cx-nav__item.is-open > .cx-mega { visibility: visible; opacity: 1; transform: none; transition: opacity .14s ease, transform .18s ease, visibility 0s; pointer-events: auto; }
.cx-mega__in { background: #fff; border: 2px solid var(--ink); border-top: 0; border-radius: 0 0 16px 16px; box-shadow: 6px 6px 0 var(--cyan), 12px 12px 0 var(--magenta), 18px 18px 0 var(--yellow), 0 40px 60px rgba(44,27,19,.18); padding: 28px; display: grid; grid-template-columns: 1fr 300px; gap: 28px; max-width: 1180px; margin: 0 auto; }
.cx-mega__links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; align-content: start; }
.cx-mega__a { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; color: var(--ink); transition: background .2s, transform .25s var(--ease); }
.cx-mega__a:hover, .cx-mega__a:focus-visible { background: var(--page-2); transform: translateX(4px); }
.cx-mega__ico { flex: none; width: 42px; height: 42px; border-radius: 10px; border: 2px solid var(--ink); background: var(--page); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--ink); box-shadow: 3px 3px 0 var(--c, var(--cyan)); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.cx-mega__a:nth-child(3n+2) .cx-mega__ico { --c: var(--magenta); }
.cx-mega__a:nth-child(3n) .cx-mega__ico { --c: var(--yellow); }
.cx-mega__a:hover .cx-mega__ico { transform: translate(-2px, -2px) rotate(-6deg); box-shadow: 5px 5px 0 var(--c, var(--cyan)); }
.cx-mega__a b { display: block; font-size: 14px; font-weight: 800; line-height: 1.2; }
.cx-mega__a small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.cx-mega__tag { display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 4px; background: var(--magenta); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; }
.cx-mega__feat { position: relative; overflow: hidden; border-radius: 12px; background: var(--brown); color: #fff; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 260px; isolation: isolate; }
.cx-mega__feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .55; transition: transform 1.2s var(--ease); }
.cx-mega__feat::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(44,27,19,0) 20%, rgba(44,27,19,.92)); }
.cx-mega__feat:hover img { transform: scale(1.08); }
.cx-mega__feat .cx-kicker { color: #fff; margin-bottom: 8px; }
.cx-mega__feat .cx-kicker::before { box-shadow: 12px 0 0 var(--magenta), 24px 0 0 var(--yellow), 36px 0 0 #fff; }
.cx-mega__feat h3 { margin: 0 0 6px; font-size: 21px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.cx-mega__feat p { margin: 0 0 16px; font-size: 13px; color: rgba(255,255,255,.75); line-height: 1.5; }

/* Tools on the right */
.cx-nav__tools { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.cx-ico { position: relative; width: 44px; height: 44px; border-radius: 10px; border: 2px solid var(--ink); background: #fff; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 3px 3px 0 var(--cyan); transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .2s, color .2s; }
.cx-ico:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--magenta); }
.cx-ico:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--cyan); }
.cx-ico[aria-expanded="true"] { background: var(--ink); color: #fff; }
.cx-ico__dot { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%; background: #25D366; border: 2px solid #fff; }
.cx-nav__cta { display: none; }
.cx-burger { display: inline-flex; }
.cx-burger span { position: relative; width: 18px; height: 2px; background: currentColor; transition: background .2s; }
.cx-burger span::before, .cx-burger span::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
.cx-burger span::before { top: -6px; } .cx-burger span::after { top: 6px; }
@media (min-width: 1180px) {
  .cx-nav__menu { display: flex; }
  .cx-burger { display: none; }
}
@media (min-width: 640px) { .cx-nav__cta { display: inline-flex; } }
@media (max-width: 639px) {
  .cx-nav__bar { height: 70px; gap: 10px; }
  .cx-nav__logo img { height: 42px; }
  .cx-nav.is-stuck .cx-nav__bar { height: 62px; }
  .cx-nav.is-stuck .cx-nav__logo img { height: 36px; }
  .cx-ico { width: 42px; height: 42px; }
}

/* Search panel */
.cx-search { position: absolute; left: 0; right: 0; top: 100%; padding: 0 16px; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .3s var(--ease), visibility 0s .3s; }
.cx-search.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .3s var(--ease); }
.cx-search__box { max-width: 760px; margin: 14px auto 0; background: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 6px 6px 0 var(--cyan), 12px 12px 0 var(--magenta), 18px 18px 0 var(--yellow), 0 30px 60px rgba(44,27,19,.2); overflow: hidden; }
.cx-search form { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-bottom: 2px solid var(--ink); }
.cx-search form > i { color: var(--muted); }
.cx-search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; padding: 12px 0; font: 700 17px var(--font-body); color: var(--ink); }
.cx-search input::placeholder { color: #a39c95; font-weight: 500; }
.cx-search__res { max-height: min(60vh, 460px); overflow-y: auto; padding: 8px; }
.cx-search__res:empty { display: none; }
.cx-search__grp { padding: 10px 12px 4px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cx-search__hit { display: flex; align-items: center; gap: 14px; padding: 9px 12px; border-radius: 10px; color: var(--ink); }
.cx-search__hit:hover, .cx-search__hit.is-on { background: var(--page-2); }
.cx-search__hit img, .cx-search__hit .cx-search__i { flex: none; width: 44px; height: 44px; border-radius: 8px; object-fit: contain; background: var(--page-2); border: 1px solid #e4ddd4; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.cx-search__hit b { display: block; font-size: 14px; font-weight: 700; }
.cx-search__hit small { display: block; font-size: 12px; color: var(--muted); }
.cx-search__hit mark { background: var(--yellow); color: inherit; padding: 0 1px; }
.cx-search__price { margin-left: auto; font-weight: 800; font-size: 13px; color: var(--price); white-space: nowrap; }
.cx-search__empty { padding: 18px 14px; font-size: 14px; color: var(--muted); }
.cx-search__empty button { border: 0; background: none; color: var(--gold-deep); font: 700 14px var(--font-body); text-decoration: underline; padding: 0; }
.cx-search__quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 12px 12px; }
.cx-search__quick a { padding: 7px 12px; border-radius: 6px; border: 1.5px solid var(--ink); font-size: 13px; font-weight: 700; color: var(--ink); background: #fff; transition: background .2s, color .2s; }
.cx-search__quick a:hover { background: var(--ink); color: #fff; }

/* Mobile drawer */
.cx-drawer { position: fixed; inset: 0; z-index: 100005; visibility: hidden; font-family: var(--font-body); transition: visibility 0s .45s; }
.cx-drawer.is-open { visibility: visible; transition: none; }
.cx-drawer__veil { position: absolute; inset: 0; background: rgba(44,27,19,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .35s; }
.cx-drawer.is-open .cx-drawer__veil { opacity: 1; }
.cx-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--page); border-left: 2px solid var(--ink); display: flex; flex-direction: column; transform: translateX(104%); transition: transform .45s var(--ease); }
.cx-drawer.is-open .cx-drawer__panel { transform: none; }
.cx-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 2px solid var(--ink); }
.cx-drawer__head img { height: 40px; width: auto; }
.cx-drawer__body { flex: 1; overflow-y: auto; padding: 10px 18px 24px; -webkit-overflow-scrolling: touch; }
.cx-drawer__grp { border-bottom: 1px solid #e4ddd4; }
.cx-drawer__t { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 2px; border: 0; background: none; color: var(--ink); font: 800 17px var(--font-body); letter-spacing: -.01em; text-align: left; }
.cx-drawer__t i { transition: transform .3s var(--ease); font-size: 12px; }
.cx-drawer__t[aria-expanded="true"] i { transform: rotate(180deg); }
.cx-drawer__list { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.cx-drawer__t[aria-expanded="true"] + .cx-drawer__list { grid-template-rows: 1fr; }
.cx-drawer__list > div { overflow: hidden; }
.cx-drawer__list a { display: flex; align-items: center; gap: 12px; padding: 11px 4px; font-size: 15px; font-weight: 600; color: var(--ink); border-radius: 8px; }
.cx-drawer__list a:last-child { margin-bottom: 12px; }
.cx-drawer__list a i { width: 32px; height: 32px; flex: none; border-radius: 8px; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 13px; background: #fff; }
.cx-drawer__list a:active { background: var(--page-2); }
.cx-drawer__solo { display: flex; align-items: center; justify-content: space-between; padding: 17px 2px; font-weight: 800; font-size: 17px; border-bottom: 1px solid #e4ddd4; color: var(--ink); }
.cx-drawer__foot { padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); border-top: 2px solid var(--ink); background: #fff; display: grid; gap: 12px; }
.cx-drawer__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cx-drawer__tiles a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border: 1.5px solid var(--ink); border-radius: 10px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); background: var(--page); }
.cx-drawer__tiles a i { font-size: 17px; }
.cx-drawer__tiles a.is-wa i { color: #25D366; }

/* ---------- Inner page hero ---------- */
.cx-phero { position: relative; overflow: hidden; background: var(--page); border-bottom: 2px solid var(--ink); padding: clamp(34px, 6vw, 72px) 0 clamp(30px, 5vw, 58px); }
.cx-phero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background: linear-gradient(rgba(67,41,31,.06) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(67,41,31,.06) 1px, transparent 1px) 0 0 / 32px 32px;
  -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 85%); mask-image: linear-gradient(90deg, #000 30%, transparent 85%); }
.cx-phero__in { position: relative; display: grid; gap: 26px; align-items: center; }
@media (min-width: 900px) { .cx-phero__in { grid-template-columns: minmax(0, 1fr) auto; } }
.cx-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cx-crumbs a { color: var(--muted); } .cx-crumbs a:hover { color: var(--ink); }
.cx-crumbs li + li::before { content: '/'; margin-right: 10px; color: #c9c0b6; }
.cx-phero h1 { margin: 0; font-family: var(--font-body); font-weight: 800; letter-spacing: -.045em; line-height: .98; font-size: clamp(2.3rem, 6.4vw, 5rem); color: var(--ink); text-wrap: balance; }
.cx-phero h1 em { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: -.02em; }
.cx-phero__sub { margin: 18px 0 0; max-width: 60ch; font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.65; color: var(--muted); }
.cx-phero .cx-chips { margin-top: 22px; }
.cx-phero__mark { display: none; position: relative; width: 230px; height: 230px; }
@media (min-width: 900px) { .cx-phero__mark { display: block; } }
.cx-phero__mark .og-perch { position: absolute; inset: 0; --w: 230px; }
.cx-phero__mark .og-say { right: 70%; bottom: 80%; }
/* the title prints itself: three ink passes wipe off it */
html.cx-js .cx-phero h1 { position: relative; }
html.cx-js .cx-phero h1 .cx-ink { position: absolute; inset: -4px -8px; mix-blend-mode: lighten; pointer-events: none; transform-origin: 100% 50%; animation: cxWipe .7s cubic-bezier(.6, 0, .3, 1) forwards; }
.cx-ink--1 { background: #fff; animation-delay: .35s !important; }
.cx-ink--2 { background: #0ff; animation-delay: .5s !important; }
.cx-ink--3 { background: #00f; animation-delay: .65s !important; }
@keyframes cxWipe { to { transform: scaleX(0); } }
.cx-phero .cx-reg { opacity: .35; animation: none; color: var(--ink); }
.cx-phero .cx-reg--tr { right: 24px; top: 24px; left: auto; }
.cx-phero .cx-reg--bl { left: 24px; bottom: 24px; top: auto; }

/* ---------- Page transition: a quick ink pass on arrival ---------- */
.cx-pass { position: fixed; inset: 0; z-index: 100000; pointer-events: none; }
html.cx-seen .cx-pass { display: none; }
.cx-pass i { position: absolute; inset: 0; mix-blend-mode: lighten; animation: mxRun .62s cubic-bezier(.45, 0, .3, 1) both; }
.cx-pass i:nth-child(1) { background: #fff; animation-delay: .04s; }
.cx-pass i:nth-child(2) { background: #0ff; animation-delay: .16s; }
.cx-pass i:nth-child(3) { background: #00f; animation-delay: .28s; }
.cx-pass b { position: absolute; left: 0; right: 0; top: -30px; height: 34px; animation: mxRoll .62s cubic-bezier(.45, 0, .3, 1) both;
  background: linear-gradient(180deg, #2a2a2a, #8d8d8d 22%, #f4f4f4 42%, #9a9a9a 62%, #333 88%, #111); box-shadow: 0 12px 20px rgba(0,0,0,.25); }
.cx-pass b::before { content: ''; position: absolute; left: 0; right: 0; top: 13px; height: 8px; background: var(--c); }
.cx-pass b:nth-of-type(1) { --c: var(--cyan); animation-delay: .04s; }
.cx-pass b:nth-of-type(2) { --c: var(--magenta); animation-delay: .16s; }
.cx-pass b:nth-of-type(3) { --c: var(--yellow); animation-delay: .28s; }
.cx-pass.is-done { display: none; }
/* leaving a page: a sheet slides over before the next one prints */
.cx-leave { position: fixed; inset: 0; z-index: 100001; pointer-events: none; background: #fff; transform: translateY(-101%); }
.cx-leave.is-on { transform: none; transition: transform .26s cubic-bezier(.6, 0, .8, .4); }

/* ---------- Toast ---------- */
.cx-toast { position: fixed; left: 50%; bottom: 110px; z-index: 100008; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 12px 18px; background: var(--ink); color: #fff; border-radius: 10px; font: 600 14px/1.4 var(--font-body); box-shadow: 4px 4px 0 var(--cyan), 8px 8px 0 var(--magenta); transition: opacity .3s, transform .4s var(--ease); }
.cx-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 768px) { .cx-toast { bottom: 32px; } }

/* ---------- Back to top ---------- */
.cx-up { position: fixed; right: 22px; bottom: 116px; z-index: 9980; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .3s, transform .3s var(--ease); }
.cx-up.is-on { opacity: 1; pointer-events: auto; transform: none; }
@media (min-width: 768px) { .cx-up { bottom: 120px; right: 30px; } }

/* =====================================================================
   THEME LAYER for the existing page content (Tailwind markup).
   Gives every configurator, form and card the printed look of the home page
   without touching the page's own logic.
   ===================================================================== */
.cx-page { font-family: var(--font-body); }
.cx-page h1, .cx-page h2, .cx-page h3 { letter-spacing: -.025em; }
.cx-page h1:not([class*="text-"]), .cx-page h2:not([class*="text-"]) { color: var(--ink); }
.cx-page .font-black, .cx-page .font-extrabold { letter-spacing: -.02em; }
.cx-page [class*="font-serif"] { font-family: var(--font-display); }

/* Big white panels become printed sheets */
.cx-page .bg-white.shadow-2xl,
.cx-page .bg-white.shadow-xl.rounded-3xl,
.cx-page .bg-white[class*="rounded-[2"],
.cx-page .bg-white[class*="rounded-[3"],
.cx-page .cx-sheet {
  border: 2px solid var(--ink) !important;
  border-radius: 16px !important;
  box-shadow: 6px 6px 0 var(--cyan), 12px 12px 0 var(--magenta), 18px 18px 0 var(--yellow) !important;
}
.cx-page .bg-white.shadow-lg, .cx-page .bg-white.shadow-md, .cx-page .bg-white.shadow, .cx-page .bg-white.shadow-sm {
  border: 1.5px solid var(--ink);
  box-shadow: 5px 5px 0 rgba(44,27,19,.12) !important;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.cx-page a.bg-white.shadow-lg:hover, .cx-page a.bg-white.shadow-md:hover, .cx-page a.bg-white.shadow:hover,
.cx-page .group.bg-white:hover {
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0 var(--cyan), 8px 8px 0 var(--magenta), 12px 12px 0 var(--yellow) !important;
}
/* Price boxes */
.cx-page [id*="price" i][class*="text-4xl"], .cx-page [id*="price" i][class*="text-5xl"], .cx-page [id*="total" i][class*="text-4xl"] { font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.cx-page .bg-\[\#2C1B13\].rounded-2xl, .cx-page .bg-\[\#2C1B13\].rounded-3xl { border-radius: 14px; box-shadow: 5px 5px 0 var(--cyan), 10px 10px 0 var(--magenta), 15px 15px 0 var(--yellow); }

/* Form controls: crisp, inked, with a gold focus */
.cx-page select, .cx-page input[type="text"], .cx-page input[type="tel"], .cx-page input[type="email"], .cx-page input[type="number"],
.cx-page input[type="date"], .cx-page input[type="time"], .cx-page input[type="password"], .cx-page input[type="url"], .cx-page input:not([type]), .cx-page textarea {
  border: 1.5px solid #d9d1c7 !important;
  background-color: #fff !important;
  color: var(--ink);
  font-family: var(--font-body);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cx-page select:hover, .cx-page input:hover, .cx-page textarea:hover { border-color: #b7aca0 !important; }
.cx-page select:focus, .cx-page input:focus, .cx-page textarea:focus {
  outline: none !important;
  border-color: var(--ink) !important;
  box-shadow: 3px 3px 0 var(--cyan), 6px 6px 0 var(--magenta) !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}
.cx-page select { -webkit-appearance: none; appearance: none; padding-right: 42px !important; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232C1B13' stroke-width='2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 16px center !important; }
.cx-page input[type="file"] { border-style: dashed !important; border-width: 2px !important; cursor: pointer; background: var(--page) !important; }
.cx-page input[type="file"]::file-selector-button { margin-right: 14px; padding: 9px 16px; border: 2px solid var(--ink); border-radius: 8px; background: var(--gold); color: var(--ink); font: 800 12px var(--font-body); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
.cx-page input[type="file"]::file-selector-button:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.cx-page input[type="radio"], .cx-page input[type="checkbox"] { accent-color: var(--ink); }
.cx-page label { color: inherit; }

/* Primary buttons: the ink-plate press */
.cx-page button[class*="bg-[#2C1B13]"], .cx-page a[class*="bg-[#2C1B13]"],
.cx-page button[class*="bg-[#8B5E3C]"], .cx-page a[class*="bg-[#8B5E3C]"],
.cx-page button[class*="bg-[#6E594E]"], .cx-page a[class*="bg-[#6E594E]"],
.cx-page button[class*="bg-[#D5A151]"], .cx-page a[class*="bg-[#D5A151]"],
.cx-page button[class*="bg-[#d4af37]"], .cx-page a[class*="bg-[#d4af37]"],
.cx-page button[class*="bg-cdic"], .cx-page a[class*="bg-cdic"],
.cx-page button[type="submit"]:not(.cx-btn):not([class*="bg-transparent"]) {
  border: 2px solid var(--ink) !important;
  border-radius: 12px !important;
  box-shadow: 3px 3px 0 var(--cyan), 6px 6px 0 var(--magenta), 9px 9px 0 var(--yellow) !important;
  transform: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .2s, color .2s !important;
}
.cx-page button[class*="bg-[#2C1B13]"]:hover, .cx-page a[class*="bg-[#2C1B13]"]:hover,
.cx-page button[class*="bg-[#8B5E3C]"]:hover, .cx-page a[class*="bg-[#8B5E3C]"]:hover,
.cx-page button[class*="bg-[#6E594E]"]:hover, .cx-page a[class*="bg-[#6E594E]"]:hover,
.cx-page button[class*="bg-[#D5A151]"]:hover, .cx-page a[class*="bg-[#D5A151]"]:hover,
.cx-page button[class*="bg-[#d4af37]"]:hover, .cx-page a[class*="bg-[#d4af37]"]:hover,
.cx-page button[class*="bg-cdic"]:hover, .cx-page a[class*="bg-cdic"]:hover,
.cx-page button[type="submit"]:not(.cx-btn):not([class*="bg-transparent"]):hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 5px 5px 0 var(--cyan), 10px 10px 0 var(--magenta), 15px 15px 0 var(--yellow) !important;
}
.cx-page button[class*="bg-[#2C1B13]"]:active, .cx-page a[class*="bg-[#2C1B13]"]:active,
.cx-page button[class*="bg-[#8B5E3C]"]:active, .cx-page button[class*="bg-[#6E594E]"]:active,
.cx-page button[class*="bg-[#D5A151]"]:active, .cx-page button[class*="bg-[#d4af37]"]:active, .cx-page button[class*="bg-cdic"]:active,
.cx-page button[type="submit"]:not(.cx-btn):not([class*="bg-transparent"]):active {
  transform: translate(8px, 8px) !important;
  box-shadow: 0 0 0 var(--cyan), 0 0 0 var(--magenta), 1px 1px 0 var(--yellow) !important;
}
.cx-page button[disabled] { opacity: .65; cursor: wait; }

/* Choice tiles used by the configurators (format, finish, delivery…) */
.cx-page .delivery-btn, .cx-page [class*="option-card"], .cx-page [class*="opt-btn"], .cx-page [data-option], .cx-page label.cursor-pointer.border, .cx-page label.cursor-pointer.border-2 {
  border-radius: 12px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s, background .2s;
}
.cx-page .delivery-btn:hover, .cx-page label.cursor-pointer.border:hover, .cx-page label.cursor-pointer.border-2:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--cyan); }
.cx-page .delivery-btn.active, .cx-page label.cursor-pointer:has(input:checked) { border-color: var(--ink) !important; box-shadow: 3px 3px 0 var(--cyan), 6px 6px 0 var(--magenta) !important; }

/* Product imagery */
.cx-page img.rounded-2xl, .cx-page img.rounded-3xl { border-radius: 12px; }
.cx-page #previewImage, .cx-page [id*="preview" i] img { transition: opacity .3s, transform .6s var(--ease); }

/* Modals opened by the pages */
.cx-page .fixed.inset-0 > .bg-white, .cx-page .fixed.inset-0 > div > .bg-white {
  border: 2px solid var(--ink) !important; border-radius: 16px !important;
  box-shadow: 6px 6px 0 var(--cyan), 12px 12px 0 var(--magenta), 18px 18px 0 var(--yellow) !important;
  animation: cxModalIn .5s var(--ease) both;
}
@keyframes cxModalIn { from { opacity: 0; transform: perspective(900px) rotateX(-18deg) translateY(30px) scale(.96); } }

/* SweetAlert2 (used by the order pages) */
.swal2-container { z-index: 100020 !important; }
.swal2-popup { font-family: var(--font-body) !important; border: 2px solid var(--ink) !important; border-radius: 16px !important; box-shadow: 6px 6px 0 var(--cyan), 12px 12px 0 var(--magenta), 18px 18px 0 var(--yellow) !important; padding-bottom: 1.6em !important; }
.swal2-title { color: var(--ink) !important; font-weight: 800 !important; letter-spacing: -.02em; }
.swal2-html-container { color: var(--muted) !important; }
.swal2-styled.swal2-confirm, .swal2-styled.swal2-cancel, .swal2-styled.swal2-deny { border: 2px solid var(--ink) !important; border-radius: 10px !important; font-weight: 800 !important; padding: .75em 1.6em !important; box-shadow: 3px 3px 0 var(--cyan), 6px 6px 0 var(--magenta) !important; transition: transform .15s, box-shadow .15s !important; }
.swal2-styled.swal2-confirm { background: var(--gold) !important; color: var(--ink) !important; }
.swal2-styled.swal2-cancel { background: #fff !important; color: var(--ink) !important; }
.swal2-styled:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--cyan), 10px 10px 0 var(--magenta) !important; }
.swal2-styled:focus { box-shadow: 3px 3px 0 var(--cyan), 6px 6px 0 var(--magenta) !important; }
.swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--ink) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(212,175,55,.5) !important; }

/* Order confirmation (shown instead of reloading the page) */
.cx-done { position: fixed; inset: 0; z-index: 100015; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(44,27,19,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: cxFade .3s both; }
@keyframes cxFade { from { opacity: 0; } }
.cx-done__card { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 18px; padding: 96px 30px 30px; text-align: center; box-shadow: 6px 6px 0 var(--cyan), 12px 12px 0 var(--magenta), 18px 18px 0 var(--yellow); animation: cxModalIn .6s var(--ease) both; margin-top: 60px; }
.cx-done__owl { position: absolute; left: 50%; top: -84px; width: 170px; height: 170px; transform: translateX(-50%); filter: drop-shadow(0 16px 16px rgba(0,0,0,.3)); animation: ogLand .9s cubic-bezier(.3, 1.5, .5, 1) .15s both; }
.cx-done h3 { margin: 0 0 8px; font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; }
.cx-done p { margin: 0 0 18px; color: var(--muted); line-height: 1.6; font-size: 15px; }
.cx-done__code { display: inline-block; margin: 0 0 20px; padding: 10px 16px; border: 2px dashed var(--ink); border-radius: 10px; font: 800 18px var(--font-body); letter-spacing: .06em; background: var(--page); }
.cx-done__acts { display: grid; gap: 14px; justify-items: center; }
.cx-done__close { border: 0; background: none; color: var(--muted); font: 700 13px var(--font-body); text-decoration: underline; cursor: pointer; padding: 6px; }

/* Long pages: comfortable reading */
.cx-page p { text-wrap: pretty; }
.cx-page ::selection, .cx-main ::selection { background: var(--yellow); color: var(--ink); }

/* Reveal for inner page blocks added by cdic.js */
html.cx-js .cx-page [data-rv-auto] { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: var(--rv-d, 0s); }
html.cx-js .cx-page [data-rv-auto].is-in { opacity: 1; transform: none; }

/* Mobile comfort for every page */
@media (max-width: 767px) {
  .cx-page { padding-bottom: 96px; }               /* room above the contact dock */
  .cx-page .p-10, .cx-page .p-12, .cx-page .p-16, .cx-page .md\:p-12 { padding: 1.4rem; }
  .cx-page .px-10, .cx-page .px-12 { padding-left: 1.4rem; padding-right: 1.4rem; }
  .cx-page .p-8 { padding: 1.25rem; }
  .cx-page .text-5xl { font-size: 2.3rem; line-height: 1.1; }
  .cx-page .text-6xl, .cx-page .text-7xl { font-size: 2.6rem; line-height: 1.05; }
  .cx-page .bg-white.shadow-2xl, .cx-page .cx-sheet { box-shadow: 4px 4px 0 var(--cyan), 8px 8px 0 var(--magenta), 12px 12px 0 var(--yellow) !important; }
  .cx-page select, .cx-page input, .cx-page textarea { font-size: 16px !important; }   /* no zoom on iPhone */
  .cx-page .sticky.top-10 { position: static; }
  .cx-page table { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-pass, .cx-leave { display: none !important; }
  html.cx-js .cx-phero h1 .cx-ink { display: none; }
  html.cx-js .cx-page [data-rv-auto] { opacity: 1; transform: none; }
}
@media print {
  .cx-top, .cx-nav, .cx-foot, .cx-dock, .cx-pass, .p2-gauge, .cx-phero__mark, #cedic-root, .cx-up { display: none !important; }
  .cx-page .bg-white.shadow-2xl { box-shadow: none !important; }
}

/* small-screen footer fixes */
.cx-foot__addr a, .cx-foot__addr span { overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .og-perch--foot { --w: 96px; right: 8px; top: -86px; }
  .cx-foot__cols { grid-template-columns: 1fr 1fr; }
  .cx-foot__cols > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .cx-phero .cx-chips { gap: 8px; }
  .cx-phero .cx-chips li { font-size: 12.5px; padding: 7px 11px; }
  .cx-phero__sub { font-size: .98rem; }
}
html, body.cx-body { overflow-x: hidden; }
@supports (overflow: clip) { html, body.cx-body { overflow-x: clip; } }
/* images that are missing on the server get a printed-sheet placeholder (cdic.js) */
img.cx-missing { object-fit: contain !important; background: var(--page-2); }
.cx-search input::-webkit-search-cancel-button { display: none; }

/* ---------- Announcement bar (admin → Promotions) ---------- */
.cx-annonce { position: relative; z-index: 10000; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; padding: 10px 16px; background: linear-gradient(90deg, #00AEEF 0 25%, #EC008C 25% 50%, #FFD400 50% 75%, #2C1B13 75%) bottom / 100% 3px no-repeat, #2C1B13; color: #fff; font: 600 14px/1.4 var(--font-body); text-align: center; }
.cx-annonce a { color: var(--yellow); font-weight: 800; text-decoration: none; white-space: nowrap; }
.cx-annonce a:hover { color: #fff; }