/* ===========================================================================
   Elementor layer: structure guards, section tones, and the widget vocabulary
   (kicker / title / lede / buttons / lists / plates).

   The PHP fallback templates emit Elementor-shaped markup inside `.elementor`,
   so every rule here serves the builder page and the fallback alike.

   Specificity: Elementor's kit styles headings, text and buttons at (0,3,0)
   and, inside the editor iframe, loads AFTER the theme. `body .elementor …`
   reaches (0,3,1): enough to beat the kit, not enough to beat the client's own
   per-widget style controls at (0,4,0). Never !important here — it would
   silently break those controls.

   Elementor 4 ("optimized markup") drops `.elementor-widget-container`, so no
   rule below depends on it: measures and alignment sit on the heading / the
   paragraphs / the button wrapper themselves, which exist in both versions.
   =========================================================================== */

/* ---------------------------------------------------------- structure */

/* Sections and columns stay `relative`: the editor gives every section an
   absolutely-positioned .elementor-background-overlay, and releasing those to
   the .elementor wrapper stacks invisible sheets over the page. */
body .elementor .elementor-section{position:relative}
body .elementor .elementor-column{position:relative}
body .elementor .elementor-section.elementor-section-boxed > .elementor-container{
  max-width:var(--container);
  padding-inline:var(--gutter);
  position:relative;z-index:2;
}
body .elementor .elementor-section.elementor-section-full_width > .elementor-container{max-width:none}
body .elementor .elementor-column > .elementor-widget-wrap{padding:0;align-content:flex-start}
body .elementor .elementor-widget:not(:last-child){margin-bottom:1.25rem}
/* The text-editor wrapper exists only in the editor; on the live page the
   HTML is the widget's direct child. Never put layout on the widget itself. */
body .elementor .elementor-widget-text-editor{display:block}

/* column helpers (re-applied on the widget-wrap, never `width:auto` on the column) */
body .elementor .col-center > .elementor-widget-wrap{justify-content:center;text-align:center}
body .elementor .col-middle > .elementor-widget-wrap{align-content:center;height:100%}

/* gutters between side-by-side columns. The container gives back what the
   columns take, so the outer edges still line up with every other band —
   `.elementor-section.cols-gap` so it outranks the boxed-container rule above. */
body .elementor .cols-gap > .elementor-container > .elementor-column{padding-inline:calc(var(--pbg-gap) / 2)}
body .elementor .elementor-section.cols-gap > .elementor-container{
  padding-inline:calc(var(--gutter) - var(--pbg-gap) / 2);
}
body .elementor .cols-gap-lg > .elementor-container > .elementor-column{padding-inline:clamp(1rem, 2.4vw, 2.5rem)}
body .elementor .elementor-section.cols-gap-lg > .elementor-container{padding-inline:calc(var(--gutter) - clamp(1rem, 2.4vw, 2.5rem))}

/* ---------------------------------------------------------- sections */

body .elementor .sec{padding-block:var(--section-y)}
body .elementor .sec-tight{padding-block:var(--section-y-tight)}
body .elementor .sec-flush-top{padding-top:0}

body .elementor .sec-cream{background-color:var(--cream);background-image:var(--pat-topo),var(--pat-grain);color:var(--text)}
body .elementor .sec-paper{background-color:var(--paper);color:var(--text)}
body .elementor .sec-red{background-color:var(--red);background-image:var(--pat-doodle);color:var(--white)}
body .elementor .sec-ink{background-color:var(--ink);background-image:var(--pat-grid),var(--glow-ink);color:var(--on-dark)}
body .elementor .sec-green{background-color:var(--green);background-image:var(--pat-waves);color:var(--on-dark)}
/* Two cream bands in a row share one field of contour lines: the first is
   tiled up from its bottom edge, so a tile boundary falls on the seam and
   the lines run straight on into the band below. */
body .elementor .sec-cream:has(+ .sec-cream){background-position:left bottom}

/* A soft curve where a coloured band hands over to the next one: the band's
   own colour and pattern hang over the section below. The pattern is tiled
   from the band's bottom edge, so it runs on into the curve without a seam.
   (The class keeps its first name because it lives in the page data.) */
body .elementor .sec-scallop{z-index:3;background-position:left bottom}
body .elementor .sec-scallop::after{
  content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:var(--edge-h);z-index:4;pointer-events:none;
  background-position:left 0 top 1px;
  -webkit-mask:var(--edge-curve) 0 0 / 100% 100% no-repeat;mask:var(--edge-curve) 0 0 / 100% 100% no-repeat;
}
body .elementor .sec-red.sec-scallop::after{background-color:var(--red);background-image:var(--pat-doodle)}
body .elementor .sec-green.sec-scallop::after{background-color:var(--green);background-image:var(--pat-waves)}
body .elementor .sec-ink.sec-scallop::after{background-color:var(--ink);background-image:var(--pat-grid)}

/* -------------------------------------------------------- typography */

body .elementor .elementor-widget-heading .elementor-heading-title{
  font-family:var(--font-display);font-weight:400;
  line-height:var(--lh-display);letter-spacing:.005em;
  color:var(--red);margin:0;
}
/* (0,3,1): Elementor's kit sets text-widget colour AND font family (Roboto by
   default) — the font must be restated here or the kit's wins over inheritance. */
body .elementor .elementor-widget.elementor-widget-text-editor{
  color:var(--text);font-family:var(--font-text);font-size:var(--fs-body);font-weight:400;line-height:1.68;
}
body .elementor .elementor-widget-text-editor p{text-wrap:pretty}          /* no one-word last lines */
body .elementor .elementor-widget-text-editor p:last-child{margin-bottom:0}
body .elementor .elementor-widget-text-editor a{color:var(--red-deep);font-weight:600}
body .elementor .elementor-widget-text-editor a:hover{color:var(--red)}
body .elementor .elementor-widget-text-editor strong{color:var(--ink)}

/* the script line above a title — Giordano's "The Italian" */
body .elementor .kicker .elementor-heading-title{
  font-family:var(--font-script);font-size:var(--fs-kicker);line-height:1.05;
  color:var(--green);letter-spacing:0;
}
body .elementor .elementor-widget.kicker{margin-bottom:.35rem}


body .elementor .title .elementor-heading-title{font-size:var(--fs-h2)}
body .elementor .title-xl .elementor-heading-title{font-size:var(--fs-hero);line-height:.94}
body .elementor .title-page .elementor-heading-title{font-size:var(--fs-h1);line-height:.95}
body .elementor .title-sm .elementor-heading-title{font-size:var(--fs-h3);line-height:1.08}
/* a title beside a form sits in a narrow column: one step down */
body .elementor .sec-form .title .elementor-heading-title{font-size:clamp(1.9rem, 1.3rem + 1.6vw, 2.8rem)}
body .elementor .title .elementor-heading-title,
body .elementor .title-xl .elementor-heading-title,
body .elementor .title-page .elementor-heading-title{max-width:18ch;text-wrap:balance}
body .elementor .elementor-widget.title{margin-bottom:1rem}

body .elementor .lede{font-size:var(--fs-lede);line-height:1.55}
body .elementor .lede p{max-width:56ch}
body .elementor .body p{max-width:min(64ch,100%)}
body .elementor .elementor-widget.lede{margin-bottom:2rem}

/* centring works on the heading/paragraphs, so it survives Elementor 4 */
body .elementor .center{text-align:center}
body .elementor .center .elementor-heading-title{margin-inline:auto}
body .elementor .center p{margin-inline:auto}
body .elementor .center .elementor-button-wrapper{text-align:center}

/* tones: everything a dark/red ground changes */
body .elementor .sec-red .elementor-heading-title,
body .elementor .sec-green .elementor-heading-title,
body .elementor .sec-ink .elementor-heading-title{color:var(--white)}
body .elementor .sec-green .kicker .elementor-heading-title,
body .elementor .sec-ink .kicker .elementor-heading-title{color:var(--saffron)}
body .elementor .sec-red .kicker .elementor-heading-title{color:var(--saffron-light)}
body .elementor .sec-red .elementor-widget-text-editor,
body .elementor .sec-green .elementor-widget-text-editor,
body .elementor .sec-ink .elementor-widget-text-editor{color:var(--on-dark)}
body .elementor .sec-red .elementor-widget-text-editor strong,
body .elementor .sec-green .elementor-widget-text-editor strong,
body .elementor .sec-ink .elementor-widget-text-editor strong{color:var(--white)}
body .elementor .sec-green .elementor-widget-text-editor a,
body .elementor .sec-ink .elementor-widget-text-editor a{color:var(--saffron)}
body .elementor .sec-red .elementor-widget-text-editor a{color:var(--white)}
body .elementor .sec-cream .title .elementor-heading-title,
body .elementor .sec-paper .title .elementor-heading-title{color:var(--red)}

/* ----------------------------------------------------------- buttons */

body .elementor .elementor-widget-button .elementor-button{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.85rem 1.5rem;
  border:2px solid transparent;border-radius:var(--r-sm);
  background:var(--red);color:var(--white);
  font-family:var(--font-cond);font-size:1.05rem;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;line-height:1;
  text-decoration:none;
  box-shadow:var(--shadow-red);
  transition:transform .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
body .elementor .elementor-widget-button .elementor-button:hover{background:var(--red-hot);color:var(--white);transform:translateY(-2px)}
body .elementor .elementor-button .elementor-button-text{display:inline-flex;align-items:center;gap:.5rem}
body .elementor .elementor-button .elementor-button-text::after{
  content:"";width:1em;height:1em;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition:transform .2s var(--ease);
}
body .elementor .elementor-button:hover .elementor-button-text::after{transform:translateX(3px)}

body .elementor .btnw-white .elementor-button{background:var(--white);color:var(--red-deep);box-shadow:0 10px 24px -12px rgba(60,10,4,.7)}
body .elementor .btnw-white .elementor-button:hover{background:var(--paper);color:var(--red)}
/* btnw-red is the default look above; the class names it in the editor panel */
body .elementor .btnw-red .elementor-button{background:var(--red);color:var(--white)}
body .elementor .btnw-ghost .elementor-button{background:transparent;color:var(--ink);border-color:var(--line-strong);box-shadow:none}
body .elementor .btnw-ghost .elementor-button:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
body .elementor .btnw-ghost-light .elementor-button{background:transparent;color:var(--white);border-color:rgba(255,246,227,.6);box-shadow:none}
body .elementor .btnw-ghost-light .elementor-button:hover{background:rgba(255,255,255,.08);border-color:var(--white);color:var(--white)}

/* Side-by-side buttons: these widgets are flex items meant to share a row. */
body .elementor .elementor-widget.btnw{width:auto;max-width:100%;margin:0 .75rem .75rem 0}
body .elementor .elementor-widget.btnw:last-child{margin-right:0}
body .elementor .col-center .elementor-widget.btnw{margin-inline:.375rem}
/* a lone button centred under a centred heading group */
body .elementor .elementor-widget.btnw.btnw-center{width:100%;margin:2.5rem 0 0;display:flex;justify-content:center}

/* ------------------------------------------------------------ lists */

/* `ticks`: a checklist with red check discs. The kit colours the <i> directly,
   so the glyph is replaced on the <i> itself — and drawn as a mask so it
   never depends on an icon font loading. */
body .elementor .ticks .elementor-icon-list-items{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
body .elementor .ticks .elementor-icon-list-item{
  display:flex;align-items:flex-start;gap:.85rem;
  font-size:var(--fs-body);line-height:1.45;color:inherit;
}
/* the check is the disc's own background image — crisp at any zoom, and the
   same whether Elementor prints an icon font <i> or an inline <svg> (hidden) */
body .elementor .ticks .elementor-icon-list-icon{
  flex:none;width:28px;height:28px;border-radius:50%;margin-top:-.05rem;
  background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
}
body .elementor .ticks .elementor-icon-list-icon i,
body .elementor .ticks .elementor-icon-list-icon svg{display:none}
body .elementor .ticks .elementor-icon-list-text{color:inherit;font-weight:500;font-family:var(--font-text)}
body .elementor .sec-red .ticks .elementor-icon-list-icon,
body .elementor .sec-green .ticks .elementor-icon-list-icon,
body .elementor .sec-ink .ticks .elementor-icon-list-icon{background:var(--saffron) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1A14' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px 15px no-repeat}
/* Elementor's inline-SVG icons paint their own glyph: the pills draw a dot instead */
body .elementor .pills .elementor-icon-list-icon svg *{fill:transparent;stroke:none}
body .elementor .elementor-widget.ticks{margin-bottom:2rem}

/* `pills`: the same widget drawn as a row of chips (Dine-in · Carry-out …) */
body .elementor .pills .elementor-icon-list-items{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
body .elementor .pills .elementor-icon-list-item{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.45rem .85rem;border-radius:var(--pill);
  background:var(--white);border:1.5px solid var(--line);
  font-family:var(--font-cond);font-weight:600;font-size:.88rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink);
}
body .elementor .pills .elementor-icon-list-icon{display:inline-grid;place-items:center}
body .elementor .pills .elementor-icon-list-icon i,
body .elementor .pills .elementor-icon-list-icon svg{
  display:block;width:8px;height:8px;border-radius:50%;background:var(--red);font-size:0;color:transparent;
}
body .elementor .pills .elementor-icon-list-icon i::before{content:none}
body .elementor .pills .elementor-icon-list-text{color:inherit;font-family:var(--font-cond)}

/* -------------------------------------------------------------- FAQ */

body .elementor .faq .elementor-toggle-item{
  background:var(--white);border-radius:var(--r);margin-bottom:.75rem;
  box-shadow:var(--shadow-1);overflow:hidden;border:0;
}
body .elementor .faq .elementor-tab-title{
  display:flex;align-items:center;gap:1rem;justify-content:space-between;
  padding:1.15rem 1.35rem;cursor:pointer;border:0;
  font-family:var(--font-cond);font-weight:600;font-size:1.15rem;letter-spacing:.02em;color:var(--ink);
}
body .elementor .faq .elementor-toggle-title{order:1;flex:1;color:inherit;text-decoration:none}
body .elementor .faq .elementor-toggle-icon{order:2;flex:none;color:var(--red);width:auto}
body .elementor .faq .elementor-tab-content{padding:0 1.35rem 1.25rem;border:0;color:var(--text)}

/* ----------------------------------------------------------- images */

body .elementor .elementor-widget-image img{display:block;max-width:100%;height:auto}

/* plate: a photograph cut round, on a cream rim, like a pie on its tray.
   Prefixed `body .elementor` because Elementor's frontend resets
   `.elementor img{border-radius:0;box-shadow:none}` at equal weight. */
body .elementor .plate{position:relative;isolation:isolate;max-width:var(--plate-max, 520px);margin-inline:auto;width:100%}
body .elementor .plate img{
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;
  border:clamp(8px, 1.1vw, 14px) solid var(--paper);
  box-shadow:0 0 0 2px var(--line), var(--shadow-2);
}
body .elementor .plate-sm{--plate-max:260px}

/* frame: rounded photo with a lift */
body .elementor .frame img{
  width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow-2);
  object-fit:cover;
}
body .elementor .frame-tilt img{transform:rotate(-2deg)}

/* ------------------------------------------------- shortcode wrappers */

body .elementor .elementor-widget-shortcode{width:100%}
body .elementor .plugmatrix-form-embed{width:100%}

/* ------------------------------------------- Theme Builder header/footer */

/* When Elementor Pro's Theme Builder owns the chrome, the flex row that lived
   on .header-in has to be restated on Elementor's own container. */
body .elementor .pbg-el-header{background:var(--red);color:var(--white)}
body .elementor .pbg-el-header > .elementor-container{min-height:var(--header-h);align-items:center}
body .elementor .pbg-el-header .elementor-widget-wrap{align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:1rem}
body .elementor .pbg-el-header .elementor-column:first-child .elementor-widget-wrap{justify-content:flex-start}
body .elementor .pbg-el-header .elementor-widget:not(:last-child){margin-bottom:0}
body .elementor .pbg-el-header .elementor-widget{width:auto}
body .elementor .pbg-el-header .elementor-widget-image img{width:150px;background:var(--paper);border-radius:0 0 20px 20px;padding:10px}
body.elementor-editor-active .elementor .pbg-el-header{position:relative}
body .elementor .pbg-el-footer{background-color:var(--ink);background-image:var(--pat-grid),var(--glow-ink);color:var(--on-dark-2);padding:clamp(3rem, 2rem + 3vw, 4.5rem) 0 2rem}
body .elementor .pbg-el-footer.pbg-el-footer-bottom{padding:1.2rem 0 1.6rem;border-top:1px solid rgba(255,246,227,.14);background-image:var(--pat-grid)}
body .elementor .pbg-el-footer a{color:var(--on-dark);text-decoration:none}
body .elementor .pbg-el-footer a:hover{color:var(--white);text-decoration:underline}
body .elementor .pbg-el-links .elementor-icon-list-icon{display:none}
body .elementor .pbg-el-links .elementor-icon-list-items{display:grid;gap:.55rem}
body .elementor .pbg-el-footer .open-status{color:var(--on-dark)}
body .elementor .pbg-el-logo-dark img{width:min(240px,100%)}
body .elementor .pbg-el-credit > .elementor-widget-wrap{justify-content:flex-end}
body .elementor .pbg-el-credit{text-align:right}
body .elementor .pbg-el-nav > .elementor-widget-wrap{justify-content:center}
body .elementor .pbg-el-header .mega{position:fixed;top:var(--sticky-top, var(--header-h))}
body .elementor .pbg-el-logo img{display:block}
body .elementor .pbg-el-act > .elementor-widget-wrap{justify-content:flex-end}
body .elementor .pbg-el-promo{padding:0}
.elementor-location-header{position:sticky;top:0;z-index:100}
body .elementor .pbg-el-footer .elementor-heading-title{color:var(--saffron);font-family:var(--font-cond);font-size:.95rem;letter-spacing:.14em;text-transform:uppercase}
body .elementor .pbg-el-footer .elementor-icon-list-text{color:var(--on-dark)}
body .elementor .pbg-el-footer .elementor-widget-text-editor{color:var(--on-dark-2)}

/* ------------------------------------------------------ semantic hooks */

/* Classes with no look of their own: they give the client a stable handle in
   Elementor's Advanced tab and let page rules reach a band by name. */
body .elementor .sec-tiles,body .elementor .sec-favs,body .elementor .sec-deals,
body .elementor .sec-deals-all,body .elementor .sec-crust,body .elementor .sec-trio,
body .elementor .sec-ways,body .elementor .sec-duo,body .elementor .sec-visit,
body .elementor .sec-offer,body .elementor .sec-story,body .elementor .sec-stats,
body .elementor .sec-redeem,body .elementor .sec-form{position:relative}
body .elementor .hero-main > .elementor-widget-wrap{padding-right:clamp(0rem, 2vw, 2.5rem)}
body .elementor .visit-map > .elementor-widget-wrap{height:100%;align-content:stretch}
body .elementor .visit-map .elementor-widget-shortcode{height:100%}
.pbg-page{display:block}