/* Irit Miroshnikov · second round components (25.10): zoom parallax, image trail, rotating portrait,
   the cookie button, and the square variants for sketch 2. Loads after irit.css. */

/* ---------- Zoom parallax ---------- */
.cki-zoom { position: relative; height: 300vh; height: 300svh; }
.cki-zoom__stage { --t: 1; --c: 0; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--zoom-bg, #F7F5F1); }
.cki-zoom__lay { position: absolute; inset: 0; z-index: 1; transform-origin: 50% 50%; pointer-events: none; will-change: transform; }
.cki-zoom__lay.cki-zoom__c { z-index: 0; }
.cki-zoom__pic { position: absolute; left: calc(50% + (var(--x) - var(--w) / 2) * 1%); top: calc(50% + (var(--y) - var(--h) / 2) * 1%);
  width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); overflow: hidden; border-radius: var(--zoom-r, 18px); background: #EFEBE3;
  box-shadow: 0 30px 60px -36px rgba(17,17,17,.55); }
.cki-zoom__pic img, .cki-zoom__pic video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cki-zoom__c { --x: 0; --y: 0; --w: 26; --h: 26; }
.cki-zoom__l1 { --x: -3; --y: -27; --w: 30; --h: 22; --s: 5; }
.cki-zoom__l2 { --x: 27; --y: -10; --w: 17; --h: 40; --s: 6; }
.cki-zoom__l3 { --x: -29; --y: 0; --w: 24; --h: 24; --s: 5; }
.cki-zoom__l4 { --x: -20; --y: 27; --w: 28; --h: 22; --s: 7; }
.cki-zoom__l5 { --x: 9; --y: 26; --w: 22; --h: 20; --s: 6; }
.cki-zoom__l6 { --x: 32; --y: 24; --w: 15; --h: 17; --s: 9; }
.cki-zoom__l7 { --x: -34; --y: -27; --w: 17; --h: 20; --s: 8; }
.cki-zoom__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--c);
  background: linear-gradient(to top, rgba(20,17,14,.88), rgba(20,17,14,.45) 45%, rgba(20,17,14,.1) 75%); }
.cki-zoom__cap { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(48px, 13vh, 130px); padding: 0 24px; text-align: center; color: #F7F5F1;
  opacity: var(--c); transform: translateY(calc((1 - var(--c)) * 30px)); pointer-events: none; }
.cki-zoom__eyebrow { margin: 0 0 12px; font: 500 13px/1.3 var(--ck-body); letter-spacing: .24em; color: #E9E4D8; }
.cki-zoom__title { margin: 0; font-family: var(--ck-head); font-weight: 800; font-size: clamp(40px, 6.6vw, 96px); line-height: 1; letter-spacing: -.02em; color: #F7F5F1; text-wrap: balance; }
.cki-zoom__text { margin: 18px auto 0; max-width: 640px; font: 300 clamp(16px, 1.4vw, 20px)/1.65 var(--ck-body); color: #E9E1D6; }
.cki-zoom__hint { position: absolute; z-index: 3; left: 0; right: 0; bottom: 18px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  font: 500 12px/1 var(--ck-body); letter-spacing: .22em; color: #7E650A; opacity: var(--t); pointer-events: none; }
.cki-zoom__hint i { width: 1px; height: 38px; background: linear-gradient(currentColor 50%, transparent 50%) 0 0 / 1px 200%; animation: cksHint 1.8s linear infinite; }
@media (max-width: 639px) {
  .cki-zoom__c { --w: 46; --h: 30; }
  .cki-zoom__l1 { --x: -24; --y: -29; --w: 44; --h: 22; --s: 5; }
  .cki-zoom__l2 { --x: 24; --y: -28; --w: 44; --h: 20; --s: 7; }
  .cki-zoom__l4 { --x: -23; --y: 28; --w: 44; --h: 20; --s: 6; }
  .cki-zoom__l7 { --x: 24; --y: 29; --w: 44; --h: 22; --s: 8; }
  .cki-zoom__l3, .cki-zoom__l5, .cki-zoom__l6 { display: none; }
}
.cki-zoom.is-still { height: auto; }
.cki-zoom.is-still .cki-zoom__stage { position: relative; }
.cki-zoom.is-still .cki-zoom__shade, .cki-zoom.is-still .cki-zoom__cap { --c: 1; }
.cki-zoom.is-still .cki-zoom__hint { display: none; }
/* still (reduced motion): show the end state, the film full bleed under the caption */
.cki-zoom.is-still .cki-zoom__lay:not(.cki-zoom__c) { display: none; }
.cki-zoom.is-still .cki-zoom__c { --x: 0; --y: 0; --w: 100; --h: 100; }
.cki-zoom.is-still .cki-zoom__c .cki-zoom__pic { border-radius: 0; box-shadow: none; }
/* the kit's h2 rule (.elementor-kit-10 h2) outranks a single class */
body .cki-zoom .cki-zoom__title { margin: 0; font-family: var(--ck-head); font-weight: 800; font-size: clamp(40px, 6.6vw, 96px); line-height: 1; letter-spacing: -.02em; color: #F7F5F1; }
body .cki-zoom .cki-zoom__text { color: #E9E1D6; }

/* ---------- Image trail ---------- */
.cki-trail { position: relative; isolation: isolate; overflow: hidden; min-height: 92vh; min-height: 92svh; display: flex; align-items: center; justify-content: center; cursor: default; }
.cki-trail__mid { position: relative; z-index: 2; text-align: center; padding: 70px 24px; max-width: 1100px; pointer-events: none; }
.cki-trail__eyebrow { margin: 0 0 18px; font: 500 13px/1.3 var(--ck-body); letter-spacing: .24em; color: var(--ck-gold2); }
.cki-trail__title { margin: 0; font-family: var(--ck-head); font-weight: 900; font-size: clamp(54px, 12vw, 176px); line-height: .92; letter-spacing: -.035em; color: var(--ck-dark); text-wrap: balance; }
.cki-trail__text { margin: 26px auto 0; max-width: 560px; font: 300 clamp(16px, 1.5vw, 19px)/1.7 var(--ck-body); color: var(--ck-text); }
.cki-trail__hint { margin: 26px 0 0; display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1 var(--ck-body); letter-spacing: .08em; color: var(--ck-dark); }
.cki-trail__hint i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ck-dark); }
.cki-trail__hint i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--ck-dark); opacity: 0; animation: cksRing 2.4s cubic-bezier(.2,.7,.2,1) infinite 1.2s; }
@keyframes cksRing { 0% { opacity: .7; transform: scale(.5); } 80%, 100% { opacity: 0; transform: scale(1.6); } }
.cki-trail .h-t { display: none; }
@media (hover: none) { .cki-trail .h-m { display: none; } .cki-trail .h-t { display: inline; } }
.cki-trail__layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cki-trail__ph { position: absolute; top: 0; left: 0; width: 170px; height: 212px; opacity: 0; will-change: transform, opacity; background: #fff; padding: 6px;
  box-shadow: 0 1px 2px rgba(20,17,14,.12), 0 24px 44px -20px rgba(20,17,14,.45); }
.cki-trail__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cki-trail__cur { position: absolute; top: 0; left: 0; z-index: 4; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: rgba(11,11,11,.85); box-shadow: 0 0 0 6px rgba(11,11,11,.12); opacity: 0; pointer-events: none; transition: opacity .4s; }
.cki-trail__cur.on { opacity: 1; }
body .cki-trail .cki-trail__title { margin: 0; font-family: var(--ck-head); font-weight: 900; font-size: clamp(54px, 12vw, 176px); line-height: .92; letter-spacing: -.035em; color: var(--ck-dark); }
/* still (reduced motion): three photos parked in the corners, clear of the words */
.cki-trail__ph.is-still { opacity: 1; }
.cki-trail__ph.is-still.s0 { left: 5%; top: 8%; transform: rotate(-4deg); }
.cki-trail__ph.is-still.s1 { left: auto; right: 5%; top: 6%; transform: rotate(3deg); }
.cki-trail__ph.is-still.s2 { left: auto; top: auto; right: 9%; bottom: 7%; transform: rotate(-2deg); }
@media (max-width: 640px) {
  .cki-trail__ph { width: 112px; height: 140px; padding: 4px; }
  .cki-trail { min-height: 80svh; }
  .cki-trail__ph.is-still.s0 { left: 4%; top: 2%; }
  .cki-trail__ph.is-still.s1 { right: 4%; top: auto; bottom: 2%; }
  .cki-trail__ph.is-still.s2 { display: none; }
}

/* ---------- Rotating portrait ---------- */
.cki-flip { --ms: 1100ms; position: relative; }
/* explicit width: inside a wrapping flex row the frame's aspect-ratio otherwise sizes to 0 and the text below rides over the photo (phones) */
body .e-con > .elementor-widget-cki-flip, .cki-flip, .cki-flip__frame { width: 100%; }
.cki-flip__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #EFEBE3; isolation: isolate; }
.cki-flip--arch .cki-flip__frame { border-radius: 999px 999px 18px 18px / 320px 320px 18px 18px; }
.cki-flip--rect .cki-flip__frame { border-radius: 0; }
.cki-flip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0; transform: scale(1.04); transition: opacity .22s ease, transform calc(var(--ms) + 300ms) linear; }
.cki-flip__img.is-on { opacity: 1; transform: scale(1); }
.cki-flip__bar { position: relative; height: 1px; margin-top: 14px; background: rgba(166,133,13,.35); overflow: hidden; }
.cki-flip__bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ck-dark); }
.cki-flip.tick .cki-flip__bar i { animation: cksBar var(--ms) linear forwards; }
.cki-flip.is-paused .cki-flip__bar i { animation-play-state: paused; }
@keyframes cksBar { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .cki-flip__img { transition: none; } }

/* ---------- Cookie settings button: a clean round icon (the theme button padding had squashed it into a pill) ---------- */
#ckc.ckc .ckc-fab { width: 46px !important; height: 46px !important; min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: 1px solid rgba(247,245,241,.25) !important;
  background: #111111 !important; color: #F7F5F1 !important; box-shadow: 0 10px 24px -10px rgba(20,17,14,.5) !important; display: grid !important; place-items: center; }
#ckc.ckc .ckc-fab .ckc-ico { width: 22px; height: 22px; display: block; }
#ckc.ckc .ckc-fab:hover, #ckc.ckc .ckc-fab:focus { background: #7E650A !important; color: #fff !important; }
@media (max-width: 767px) {
  #ckc.ckc .ckc-fab { width: 40px !important; height: 40px !important; left: 12px !important; bottom: calc(104px + env(safe-area-inset-bottom)) !important; opacity: .92; }
  #ckc.ckc .ckc-fab .ckc-ico { width: 19px; height: 19px; }
}
body.ir-s2 #ckc.ckc .ckc-fab { border-radius: 0 !important; background: #0B0B0B !important; }

/* ---------- Sketch 2: everything square, white and clean ---------- */
body.ir-s2 { --ck-radius: 0px; }
body.ir-s2 .cki-drawer__panel, body.ir-s2 .cki-drawer__cta, body.ir-s2 .cki-drawer__cta i, body.ir-s2 .cki-drawer__x,
body.ir-s2 .cki-pop__box, body.ir-s2 .cki-pop__cta, body.ir-s2 .cki-pop__cta i, body.ir-s2 .cki-pop__x, body.ir-s2 .cki-pop__count,
body.ir-s2 #ckw-win, body.ir-s2 .ckw-chip, body.ir-s2 .ckw-bubble, body.ir-s2 #ckw-in, body.ir-s2 #ckw-send, body.ir-s2 .ckw-cta,
body.ir-s2 .cki-sk, body.ir-s2 .cki-sk a, body.ir-s2 .cki-bbar, body.ir-s2 .cki-rev__card, body.ir-s2 .cki-rev__nav button, body.ir-s2 .cki-rev__avatar,
body.ir-s2 .cki-gal__item, body.ir-s2 .cki-gal__img, body.ir-s2 .cki-gal__filters button, body.ir-s2 .cki-gal__more,
body.ir-s2 .cki-door__btn, body.ir-s2 .cki-door__btn i, body.ir-s2 .cki-door__win { border-radius: 0 !important; }
body.ir-s2 .cki-drawer__panel { background: #FFFFFF; }
body.ir-s2 .cki-pop__box { background: #FFFFFF; }
body.ir-s2 .cki-bbar { background: rgba(255,255,255,.96); }
body.ir-s2 .cki-door { --cream: #FFFFFF; --esp: #FFFFFF; }
body.ir-s2 .cki-door__frame::before { border-radius: 0; border-color: rgba(11,11,11,.25); }
body.ir-s2 .cki-door__quote { color: #0B0B0B; }
body.ir-s2 .cki-door__plan { color: #0B0B0B; opacity: calc(.38 - var(--p) * 1.2); }
body.ir-s2 .cki-door__plan .p-w { color: #0B0B0B; }
body.ir-s2 .cki-door__hint { color: #0B0B0B; }
body.ir-s2 .cki-door__eyebrow { color: #0B0B0B; }
body.ir-s2 .cki-door__btn { background: #0B0B0B; }
@media (max-width: 1023px) {
  body.ir-s2 .cki-door { --esp: #0B0B0B; }
  /* on the phone the film sits behind the copy: a white button reads, a dark one disappears */
  body.ir-s2 .cki-door__btn { background: #FFFFFF; color: #0B0B0B !important; }
  body.ir-s2 .cki-door__btn i { background: #0B0B0B; color: #FFFFFF; }
}
/* sketch 2 keeps the review stack straight: offset and scale only, no tilt */
body.ir-s2 .cki-rev__card[data-pos="1"] { transform: translateY(18px) scale(.96); }
body.ir-s2 .cki-rev__card[data-pos="2"] { transform: translateY(34px) scale(.92); }
body.ir-s2 .cki-rev__card[data-pos="out"] { transform: translateX(-120%); }
body.ir-s2 .cki-trail__ph { padding: 0; box-shadow: 0 24px 44px -24px rgba(20,17,14,.5); }
body.ir-s2 .cki-zoom__pic { border-radius: 0; }

/* ---------- Cookie panel in Irit's colours. The component itself is theme-proof since 25.10 (fleet plugin-cookie-consent.php),
   so these are brand rules only: a cream "accept all" with dark text, taupe toggles, pill buttons (square in sketch 2). ---------- */
#ckc.ckc .ckc-btn { padding: 12px 14px; min-height: 46px; border-radius: 999px; border: 1px solid transparent; box-shadow: none; text-transform: none; letter-spacing: 0;
  font: 600 14px/1.2 var(--ck-body); color: #F7F5F1; background: #3A332D; }
#ckc.ckc .ckc-ghost { background: transparent; border-color: rgba(247,245,241,.28); color: #F7F5F1; }
#ckc.ckc .ckc-primary { background: #F7F5F1; border-color: #F7F5F1; color: #111111; }
#ckc.ckc .ckc-btn:hover, #ckc.ckc .ckc-btn:focus-visible { filter: none; background: #A6850D; border-color: #A6850D; color: #FFFFFF; }
#ckc.ckc .ckc-toggle { padding: 0; width: 46px; min-width: 46px; height: 26px; min-height: 0; border: 0; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(247,245,241,.22);
  background: rgba(247,245,241,.14); }
#ckc.ckc .ckc-toggle.on { background: #A6850D; box-shadow: none; }
#ckc.ckc .ckc-toggle:disabled { opacity: .7; }
#ckc.ckc .ckc-toggle i { top: 3px; left: 3px; width: 20px; height: 20px; }
#ckc.ckc .ckc-toggle.on i { left: 23px; }
body.ir-s2 #ckc.ckc .ckc-panel, body.ir-s2 #ckc.ckc .ckc-btn, body.ir-s2 #ckc.ckc .ckc-cat, body.ir-s2 #ckc.ckc .ckc-avatar,
body.ir-s2 #ckc.ckc .ckc-toggle, body.ir-s2 #ckc.ckc .ckc-toggle i { border-radius: 0; }
/* desktop: fleet standard, the accessibility icon is raised in its own settings (ea11y_widget_icon_settings, +52px) and the cookie
   button keeps the corner under it. The toast now lives inside #ckc and takes the banner colours; here only its shape. */
#ckc.ckc .ckc-toast { font-family: var(--ck-body); font-weight: 500; border-radius: 999px; padding: 11px 18px; box-shadow: 0 14px 30px -14px rgba(20,17,14,.6); }
body.ir-s2 #ckc.ckc .ckc-toast { background: #0B0B0B; border-radius: 0; }
@media (max-width: 767px) { #ckc.ckc .ckc-toast { bottom: calc(152px + env(safe-area-inset-bottom)); } }
