/* Page transition, Champagne pages. A diamond opens from the centre and covers the page; the next page keeps it covered from its very first paint, then the diamond closes.
   Only transforms are animated (compositor only), so it stays smooth. The old lux.js wipe is disabled on these pages. */
body.cz .kf-wipe{display:none!important}
body.cz.page-in main{animation:none}
#czw{position:fixed;inset:0;z-index:300;pointer-events:none;overflow:hidden;visibility:hidden;contain:strict}
#czw.on,#czw.cov{visibility:visible}
#czw.on{pointer-events:auto}
#czw i{position:absolute;left:50%;top:50%;width:140vmax;height:140vmax;margin:-70vmax 0 0 -70vmax;transform:rotate(45deg) scale(0);will-change:transform;backface-visibility:hidden}
#czw .g{background:linear-gradient(135deg,#e8c56a,#b07a28)}
#czw .f{background:linear-gradient(135deg,#f7d7b5 0%,#f1c4a6 46%,#f4bdc0 100%)}
#czw.cov .f{transform:rotate(45deg) scale(1)}
#czw.cov .g{transform:rotate(45deg) scale(1.05)}
#czw .lg{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:22px;opacity:0;will-change:opacity}
#czw.cov .lg{opacity:1}
#czw .lg img{height:clamp(70px,12vw,110px);filter:brightness(.55) saturate(1.7) contrast(1.1);display:block}
#czw .lg b{width:12px;height:12px;background:#b07a28;transform:rotate(45deg);box-shadow:0 0 0 7px rgba(176,122,40,.18),0 0 0 8px rgba(176,122,40,.45)}
@media(prefers-reduced-motion:reduce){#czw{display:none}}
/* phone menu: fills the whole screen, behind the header bar */
@media(max-width:860px){
  body.menu-open{overflow:hidden}
  .sheet{inset:0;z-index:55;background:linear-gradient(160deg,#f7d7b5 0%,#f1c4a6 48%,#f4bdc0 100%);padding:calc(var(--nav) + 24px) var(--gut) calc(env(safe-area-inset-bottom,0px) + 32px);gap:0;justify-content:center;align-items:flex-start;overflow-y:auto}
  body.cz .sheet{background:linear-gradient(160deg,#f7d7b5 0%,#f1c4a6 48%,#f4bdc0 100%)}
  .sheet::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(45deg,transparent 0 46px,rgba(176,122,40,.13) 46px 47px),repeating-linear-gradient(-45deg,transparent 0 46px,rgba(176,122,40,.13) 46px 47px)}
  .sheet a{position:relative;font-size:clamp(2.6rem,13vw,4rem);font-weight:200;letter-spacing:-.03em;line-height:1.1;padding:12px 0;color:#3a2412;display:block;width:100%;border-bottom:1px solid rgba(58,36,18,.18)}
  html[lang=ar] .sheet a{font-weight:500;letter-spacing:0;line-height:1.35}
  .sheet a.cur{color:#8a5a14}
  .sheet .shw{margin-top:28px;border:0;width:auto;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;background:#e8c56a;color:#2a1706;padding:16px 26px;box-shadow:inset 0 0 0 1px rgba(138,90,20,.35)}
  html[lang=ar] .sheet .shw{letter-spacing:0;font-size:1rem}
  .menu-open .sheet{display:flex;animation:czmenu .45s cubic-bezier(.23,1,.32,1)}
  .menu-open .sheet a{animation:czmenua .6s cubic-bezier(.23,1,.32,1) both}
  .menu-open .sheet a:nth-child(2){animation-delay:.06s}.menu-open .sheet a:nth-child(3){animation-delay:.12s}.menu-open .sheet a:nth-child(4){animation-delay:.18s}
  @keyframes czmenu{from{opacity:0}to{opacity:1}}
  @keyframes czmenua{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  /* the header stays above the menu: readable dark logo and icons while it is open, even over the transparent hero */
  body.menu-open .hd{background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  body.cz.menu-open .mark img{filter:brightness(.55) saturate(1.7) contrast(1.1)!important}
  body.cz.menu-open .lang,body.cz.menu-open .cartb{color:#3a2412!important;box-shadow:inset 0 0 0 1px rgba(90,30,40,.45)!important;text-shadow:none!important}
  body.cz.menu-open .cartb b{color:#6b1a14!important}
  body.cz.menu-open .burger i{background:#3a2412!important}
}
@media(prefers-reduced-motion:reduce){.menu-open .sheet,.menu-open .sheet a{animation:none}}