/* Parlor: what the CMS adds on top of the template's own stylesheets (vendors, style, responsive, pizza-parlor). */
/* The palette and fonts stay the template's (--base-color red, --alt-font Antonio); only the accent colour setting in the layout may override --base-color. */

/* Chinese, Japanese and Korean fall back to the system's own fonts for their characters. */
:lang(zh){--primary-font:'Schibsted Grotesk','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC',sans-serif;--alt-font:'Antonio','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC',sans-serif}
:lang(ja){--primary-font:'Schibsted Grotesk','Hiragino Sans','Yu Gothic','Meiryo','Noto Sans CJK JP',sans-serif;--alt-font:'Antonio','Hiragino Sans','Yu Gothic','Meiryo','Noto Sans CJK JP',sans-serif}
:lang(ko){--primary-font:'Schibsted Grotesk','Apple SD Gothic Neo','Malgun Gothic','Noto Sans CJK KR',sans-serif;--alt-font:'Antonio','Apple SD Gothic Neo','Malgun Gothic','Noto Sans CJK KR',sans-serif}

/* Inline SVG icons (the template's own icon fonts were not shipped): sit on the text like a glyph. */
.ti{display:inline-block;vertical-align:-.125em;flex:none}
.ti.icon-medium{font-size:40px}
.feather-shadow .ti{vertical-align:middle}

/* Brand text where no logo has been uploaded */
.brand-text{font-family:var(--alt-font);font-size:34px;line-height:1;letter-spacing:1px;text-transform:uppercase;color:#fff;white-space:nowrap}
.sticky-active .header-transparent .brand-text,.header-light .brand-text{color:var(--dark-gray)}
.center-logo .navbar-brand .brand-text{display:block;font-size:17px;line-height:1.1;max-width:130px;text-align:center;white-space:normal;margin:0 auto}
.footer-logo .brand-text{font-size:30px}

/* Inner pages */
.page-banner{background:var(--dark-gray) center/cover no-repeat;color:#fff;padding:190px 0 90px;text-align:center}
/* Inner pages: a photo under a cinematic shade (dark at the top for the menu bar and at the bottom, a vignette), slowly settling in. */
.page-banner-cinematic{position:relative;overflow:hidden;isolation:isolate;min-height:420px;display:flex;align-items:flex-end;justify-content:center;padding:200px 0 80px;background:var(--base-color)}
.page-banner-media{position:absolute;inset:-3%;z-index:-2;background-size:cover;background-position:center;animation:parlor-banner-settle 16s cubic-bezier(.2,.6,.2,1) both}
.page-banner-media.is-fallback{background-size:min(1100px,140%) auto;background-repeat:no-repeat;background-position:center 60%;filter:saturate(1.05) blur(1.5px);opacity:.6}
.page-banner-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,8,8,.78) 0%,rgba(10,8,8,.25) 42%,rgba(10,8,8,.35) 62%,rgba(10,8,8,.82) 100%),radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(0,0,0,.5) 100%)}
.page-banner-cinematic h1{font-size:clamp(44px,7vw,92px);line-height:1;letter-spacing:-1px;text-transform:uppercase;text-shadow:0 6px 30px rgba(0,0,0,.45);animation:parlor-banner-title 1.1s .15s cubic-bezier(.2,.7,.2,1) both}
.page-banner-cinematic p{max-width:720px;margin:16px auto 0;text-shadow:0 2px 14px rgba(0,0,0,.5);animation:parlor-banner-title 1.1s .35s cubic-bezier(.2,.7,.2,1) both}
@keyframes parlor-banner-settle{from{transform:scale(1.1)}to{transform:scale(1)}}
@keyframes parlor-banner-title{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (max-width:767px){.page-banner-cinematic{min-height:300px;padding:130px 0 50px}}
@media (prefers-reduced-motion:reduce){.page-banner-media,.page-banner-cinematic h1,.page-banner-cinematic p{animation:none}}
/* The menu bar stays at the top while scrolling, on a solid background once the page moves. */
header.sticky nav.navbar.fixed-header .navbar-brand{padding-top:5px!important;padding-bottom:5px!important}
header.sticky nav.navbar.fixed-header .navbar-brand img{height:70px!important;max-height:70px!important}
@media (max-width:991px){header.sticky nav.navbar.fixed-header .navbar-brand img{height:56px!important;max-height:56px!important}}
header.sticky nav.navbar.fixed-header{background:rgba(24,22,22,.96)!important;box-shadow:0 10px 30px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.page-banner h1{color:#fff;margin:0}
.page-banner p{opacity:.85;margin:15px 0 0}
.inner-content{padding:80px 0}
.inner-content img{max-width:100%;height:auto}
.menu-page{padding:80px 0}
.menu-section{margin-bottom:60px}

/* Forms, notices, opening hours and dish tags */
.form-control{border:1px solid #d9d9d9;background:#fff}
.parlor-form .form-control{width:100%}
.form-note{margin-top:15px}
.form-hp{position:absolute;left:-9999px}
.form-error{color:var(--red);font-size:14px;margin:4px 0 0}
.alert-soft{padding:16px 20px;border-radius:6px;background:#eef7f1;border:1px solid #cfe5d6}
.alert-soft.error{background:#fdeeee;border-color:#f3c9c9;color:#9b1c1c}
.hours-list{list-style:none;padding:0;margin:0}
.hours-list li{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.hours-list strong{text-transform:capitalize}
.dish-tags{margin-top:6px}
.dish-tags span{display:inline-block;border:1px solid rgba(0,0,0,.15);border-radius:20px;padding:0 10px;margin-right:5px;font-size:13px;line-height:24px}

/* Header: the right side holds the language links and the booking button */
header .header-button .btn span,header .header-button .btn .btn-double-text{white-space:nowrap}
/* Language switcher: the current flag and code in the menu, a white list with flag, code and name. */
.flag{width:20px;height:14px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.15);flex:0 0 auto}
.lang-switch>.nav-link{display:inline-flex!important;align-items:center;gap:8px;white-space:nowrap}
.navbar .navbar-nav .lang-switch .lang-menu{min-width:210px;padding:8px;background:#fff;border-radius:6px;box-shadow:0 20px 44px rgba(0,0,0,.22);left:auto;right:0}
.navbar .navbar-nav .lang-switch .lang-menu li{display:block;margin:0;padding:0}
.navbar .navbar-nav .lang-switch .lang-menu a{display:flex!important;align-items:center;gap:12px;padding:9px 12px;border-radius:4px;color:var(--dark-gray);font-family:var(--primary-font);font-size:15px;line-height:1.2;text-transform:none;letter-spacing:0;white-space:nowrap}
.navbar .navbar-nav .lang-switch .lang-menu a:hover,.navbar .navbar-nav .lang-switch .lang-menu a:focus-visible{background:var(--very-light-gray);color:var(--dark-gray)}
.lang-menu .iso{width:26px;font-size:12px;font-weight:600;letter-spacing:.1em}
.lang-menu .name{flex:1}
.lang-menu a[aria-current]{color:var(--base-color)!important;font-weight:600}
.lang-menu a[aria-current]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--base-color)}
.menu-logo .widget-text a{white-space:nowrap}
@media (max-width:991px){
 .navbar .navbar-nav .lang-switch .lang-menu{box-shadow:none;background:transparent;padding:0 0 10px;min-width:0}
 .navbar .navbar-nav .lang-switch .lang-menu a{display:flex!important;color:#fff;padding:8px 15px}
 .navbar .navbar-nav .lang-switch .lang-menu a:hover{background:transparent;color:#fff;opacity:.8}
 .lang-menu a[aria-current]{color:#fff!important}
 .lang-menu a[aria-current]::after{background:#fff}
}
.theme-demos,.buy-theme{display:none!important}

/* Below the desktop breakpoint the template pushes the first section under the header, so the header needs a background of its own. */
@media (max-width:1199px){
  header .navbar.header-transparent{background-color:var(--dark-gray)!important}
}

/* Homepage: the round "explore the menu" button is its own block, so the section after it gives up its top padding, as the template's menu section did. */
@media (min-width:768px){
  .menu-overlap+section{padding-top:0}
}

/* The promo cards were the footer's first row in the template; as their own section they sit above the footer's curved background. */
.promo-cards{position:relative;z-index:2}
.promo-cards img{pointer-events:none}
/* Header: the logo fills the bar's height; the language list opens right under its switcher. */
header .navbar .navbar-brand{padding-top:6px!important;padding-bottom:6px!important}
header .navbar .navbar-brand img{height:86px!important;max-height:86px!important}
.navbar .navbar-nav .nav-item.lang-switch{position:relative!important}
.navbar .navbar-nav .lang-switch>.lang-menu{top:100%!important;right:0!important;left:auto!important;margin-top:0!important}
@media (max-width:991px){
 header .navbar .navbar-brand{padding-top:4px!important;padding-bottom:4px!important}
 header .navbar .navbar-brand img{height:62px!important;max-height:62px!important}
}
/* "From our menu" icons: always one row; on narrow screens the icons, counts and names shrink to fit. */
.category-icons-row>.col{min-width:0;padding-left:6px;padding-right:6px}
.category-icons-row .categories-box img{width:clamp(34px,10vw,65px)!important;height:auto}
.category-icons-row .categories-box>a{display:block;font-size:clamp(12px,3.2vw,20px)!important;line-height:1.2;overflow-wrap:anywhere}
@media (max-width:575px){
 .category-icons-row .count-circle{width:24px!important;height:24px!important;font-size:11px!important}
}
/* Footer on phones: a bigger logo across its column; the phone right under the address. */
@media (max-width:575px){
 footer .footer-logo img{width:min(200px,60vw)!important;height:auto!important;max-height:none!important}
 footer .footer-visit .footer-address{margin:0 auto 4px!important;width:100%!important}
}
/* The footer's curved top overlaps the page: room under the menu's notes and allergen legend. */
.menu-notes{margin-bottom:110px!important}
@media (max-width:767px){.menu-notes{margin-bottom:70px!important}}
/* The phone at the left of the bar stays on one line inside the content width. */
.menu-logo .widget-text{white-space:nowrap}
@media (min-width:992px) and (max-width:1399px){
 .menu-logo .widget-text{font-size:16px!important}
 .menu-logo .widget-text>span{width:38px!important;height:38px!important;line-height:36px!important;font-size:14px!important;margin-right:6px!important}
}

/* The animated hero takes no height until its script lays it out, so on a slow connection everything below it
   jumped down (layout shift 1.0 on desktop). Until then, reserve its height with the same grids as its start-up
   in layouts/app: 1240×1276 (at most 1276 px), 1024×1000 below 1024 px, 778×960 below 778, 480×720 below 480. */
#pizza-parlor-slider:not(.revslider-initialised){aspect-ratio:1240/1276;max-height:1276px;overflow:hidden}
@media (max-width:1023px){#pizza-parlor-slider:not(.revslider-initialised){aspect-ratio:1024/1000}}
@media (max-width:777px){#pizza-parlor-slider:not(.revslider-initialised){aspect-ratio:778/960}}
@media (max-width:479px){#pizza-parlor-slider:not(.revslider-initialised){aspect-ratio:480/720}}

/* The hero on phones (blocks/pizza_hero, .ph-lite): the slider's picture in plain HTML and CSS, painted with the page
   instead of after Slider Revolution's scripts. Sizes are those of the slider on a 375 px phone (--u = 1px there),
   growing with the screen up to 480 px; above 777 px the animated slider is shown instead. */
.ph-lite{display:none;--u:calc(min(100vw,480px)/375);position:relative;overflow:hidden;height:calc(563*var(--u));background:var(--ph-bg)}
.ph-lite>*{position:absolute}
.ph-lite-bg{inset:0;width:100%;height:100%;object-fit:cover}
.ph-lite-bottom{z-index:1;left:0;right:0;bottom:0;height:calc(150*var(--u));background:#fff no-repeat center center;background-size:cover}
.ph-lite-ring{z-index:2;left:50%;top:calc(410*var(--u));width:calc(141*var(--u));height:calc(141*var(--u));margin-left:calc(-70.5*var(--u));border-radius:50%;background:#f5c124}
.ph-lite-slide{z-index:3;inset:0;overflow:hidden;background:var(--ph-bg);clip-path:ellipse(130% 88% at 50% 0%)}
.ph-lite-slide>*{position:absolute}
@media (min-width:401px){.ph-lite-slide{clip-path:ellipse(130% 90% at 50% 0%)}}
.ph-lite-lines{z-index:1;left:50%;top:calc(-84*var(--u));width:calc(1500*var(--u));height:calc(898*var(--u));max-width:none;transform:translateX(-50%);object-fit:cover;opacity:.06;mix-blend-mode:multiply}
.ph-lite-stripes{background:repeating-linear-gradient(90deg,#000 0 calc(19.75*var(--u)),#fff calc(19.75*var(--u)) calc(39.5*var(--u)));-webkit-mask-image:radial-gradient(ellipse 58% 100% at 50% 100%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 58% 100% at 50% 100%,#000 62%,transparent 100%)}
.ph-lite-pizza{z-index:2;left:50%;top:calc(238*var(--u));width:calc(550*var(--u));margin-left:calc(-275*var(--u));animation:ph-lite-in 1.2s .1s ease-out both}
.ph-lite-pizza img{display:block;width:100%;height:auto;max-width:none;animation:ph-lite-spin 100s linear infinite}
.ph-lite-text{z-index:3;inset:0;pointer-events:none}
.ph-lite-kicker,.ph-lite-title{position:absolute;left:calc(12*var(--u));right:calc(12*var(--u));margin:0;text-align:center;animation:ph-lite-rise .9s ease-out both}
.ph-lite-kicker{top:calc(125*var(--u));font-size:calc(14*var(--u));line-height:calc(17*var(--u));color:#f5c124}
.ph-lite-title{top:calc(164*var(--u));font-size:calc(38*var(--u));line-height:calc(41*var(--u));font-weight:700;color:#fff;animation-delay:.15s}
.ph-lite-kicker-img,.ph-lite-title-img{position:absolute;left:10%;width:80%;height:auto}
.ph-lite-kicker-img{top:calc(118*var(--u))}
.ph-lite-title-img{top:calc(160*var(--u))}
.ph-lite-button{z-index:6;left:50%;top:calc(426*var(--u));width:calc(109*var(--u));height:calc(109*var(--u));margin-left:calc(-54.5*var(--u));display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:#232323;text-align:center;font-size:calc(23*var(--u));line-height:calc(23*var(--u));letter-spacing:-1px;font-weight:700;text-decoration:none;box-shadow:0 0 40px -8px rgba(0,0,0,.4)}
.ph-lite-button>span:last-child{display:block;max-width:calc(80*var(--u))}
.ph-lite-button:hover,.ph-lite-button:focus{color:#232323}
.ph-lite-arrow{position:absolute;left:50%;top:calc(-15*var(--u));width:calc(34*var(--u));height:calc(34*var(--u));margin-left:calc(-17*var(--u));display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--base-color);color:#fff;font-size:calc(14*var(--u))}
@keyframes ph-lite-spin{to{transform:rotate(360deg)}}
/* Movement only, no fade: a picture or title that starts invisible would count as painted only when the fade ends. */
@keyframes ph-lite-in{from{transform:scale(.94)}to{transform:none}}
@keyframes ph-lite-rise{from{transform:translateY(calc(24*var(--u)))}to{transform:none}}
@media (max-width:777px){.ph-lite{display:block}#pizza-parlor_wrapper{display:none!important}}
@media (prefers-reduced-motion:reduce){.ph-lite *{animation:none!important}}