/* ===========================================================
   Angela's clone-fix — Pizarro shell, Angela's content.
   Reliable scroll "sticker pop" reveals + menu + mobile polish.
   Loads LAST.
   =========================================================== */

/* photo STICKER POP — scale up + slight rotate with overshoot; animates the
   inner <img> so the parent keeps its scattered tilt/position */
.cf-ph{opacity:0;transform:translateY(28px) scale(.62) rotate(-4deg);
  transition:opacity .3s ease, transform .55s cubic-bezier(.34,1.56,.64,1);will-change:opacity,transform}
.cf-ph.cf-in{opacity:1;transform:none}

/* text / heading / menu-row pop */
.cf-t{opacity:0;transform:translateY(24px) scale(.96);
  transition:opacity .35s ease, transform .55s cubic-bezier(.34,1.56,.64,1)}
.cf-t.cf-in{opacity:1;transform:none}

/* WALL PHOTOS — slide in from their own side on scroll (left column from the left,
   right column from the right), with a polaroid tilt that settles straight. This is the
   desktop "pictures load in from right / middle / left" motion, brought to mobile. */
.cf-slide{opacity:0;transition:opacity .5s ease, transform .85s cubic-bezier(.18,1,.32,1);will-change:opacity,transform}
.cf-slide.cf-L{transform:translate(-34px,24px) rotate(-5deg)}
.cf-slide.cf-R{transform:translate(34px,24px) rotate(5deg)}
.cf-slide.cf-in{opacity:1 !important;transform:translate(0,0) rotate(0) !important}

/* per-word reveal spans — pre-footer headline loads in word by word */
.cf-word{display:inline-block}

/* hero CTAs pop in like stickers on load (applied + staggered in JS) */
@keyframes cfpop{0%{opacity:0;transform:scale(.3) rotate(-8deg)}60%{opacity:1;transform:scale(1.08) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.cf-heropop{animation:cfpop .6s cubic-bezier(.34,1.56,.64,1) both}

@media (prefers-reduced-motion:reduce){
  .cf-ph,.cf-t,.cf-slide{opacity:1!important;transform:none!important;transition:none!important}
  .cf-heropop{animation:none!important}
}

/* no JOBS — client doesn't have a jobs page; keep only what she has */
.elementor-element-eff6158{display:none !important}

/* loader = her official logo ONLY — taglines removed per request */
.preloader-wrap .pre_text_wrapper,
.preloader-wrap .pre_text_1,
.preloader-wrap .pre_text_2,
.preloader-wrap .pre_text_3{ display:none !important }

/* ---------- kill tiled PIZARRO watermarks ---------- */
/* LIGHT halftone where text/photos are dark (collage, menu) */
.elementor-element-84a61c6,   /* collage section */
.elementor-element-d5e0724 {  /* menu section    */
  background-image:
    radial-gradient(rgba(217,39,22,.10) 1.5px, transparent 1.6px),
    radial-gradient(rgba(217,39,22,.06) 1.5px, transparent 1.6px),
    linear-gradient(180deg, #ffffff 0%, #fdecea 100%) !important;   /* soft white gradient */
  background-size: 22px 22px, 22px 22px, 100% 100% !important;
  background-position: 0 0, 11px 11px, 0 0 !important;
  background-repeat: repeat, repeat, no-repeat !important;
  background-color: #fff !important;
}
/* REVIEWS — gray bg so the white quotes pop (like Pizarro) */
.elementor-element-2b3289f {
  background-image:
    radial-gradient(rgba(255,255,255,.09) 1.5px, transparent 1.6px),
    radial-gradient(rgba(0,0,0,.10) 1.5px, transparent 1.6px) !important;
  background-size: 22px 22px, 22px 22px !important;
  background-position: 0 0, 11px 11px !important;
  background-repeat: repeat !important;
  background-color: #3a3736 !important;          /* warm dark gray */
}
/* MARQUEE STRIPS — keep the red torn-band DNA (white text on red) */
.elementor-element-fd4bcb9,
.elementor-element-2a542a2 {
  background-image:
    radial-gradient(rgba(255,255,255,.12) 1.5px, transparent 1.6px),
    radial-gradient(rgba(0,0,0,.05) 1.5px, transparent 1.6px) !important;
  background-size: 22px 22px, 22px 22px !important;
  background-position: 0 0, 11px 11px !important;
  background-repeat: repeat !important;
  background-color: #d92716 !important;
}

/* ---------- HERO: split — pizza (left) | her storefront (right), red dots over the WHOLE hero ---------- */
.elementor-element-f444d05 {
  position: relative;
  background-image: url("/assets/img/IMG_2027-scaled.jpeg") !important;  /* pizza (left) */
  background-size: cover !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  background-color: #1a1110 !important;
}
.elementor-element-f444d05::after {        /* her storefront (right half) */
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 50%; z-index: 0;
  background-image: url("/assets/img/IMG_4010.jpg"); background-size: cover; background-position: center;
  pointer-events: none;
}
/* even red polka dots over the ENTIRE hero (override Elementor's left-heavy overlay) */
.elementor-element-f444d05::before {
  background-image: radial-gradient(rgba(217,39,22,.34) 2.1px, transparent 2.5px) !important;
  background-size: 18px 18px !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
  inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 1 !important; z-index: 1 !important;
}
.elementor-element-d50f4d5 { background-image: none !important; }   /* drop the uneven fade overlay */
.elementor-element-f444d05 > * { position: relative; z-index: 2; }  /* wordmark/logo/CTAs above the dots */

/* hero + footer use the clean cropped wordmark. Display at natural aspect
   (width + height:auto) — no object-fit/aspect-ratio so it can't clip and
   renders identically in Safari/WebKit. The image is the full wordmark. */
.cf-herologo{ width: min(1120px, 88%) !important; height: auto !important; aspect-ratio: auto !important; object-fit: fill !important; display: block !important; margin: 4vh auto 0 !important; }
.cf-footlogo{ width: min(760px, 80%) !important; height: auto !important; aspect-ratio: auto !important; object-fit: fill !important; display: block !important; margin: 0 auto !important; }

/* loading screen: her official white logo + tagline words (smaller, spaced) */
/* loader = her WHOLE official logo, dead-center of the screen (fixed + translate
   bypasses the Elementor flex chain that kept pinning it to the top) */
.cf-prelogo{
  position: fixed !important; top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(660px, 86vw) !important; height: auto !important;
  aspect-ratio: auto !important; object-fit: fill !important;
  margin: 0 !important; z-index: 10 !important;
}
/* loader logo dead-center. Root cause of it sitting at top: the logo's container
   (ec6b64) is a full-height flex column with justify-content:space-between + a
   spacer below, which pins the logo to the top. Override that. */
.preloader-wrap{ display:flex !important; align-items:center !important; justify-content:center !important; }
.preloader-wrap > .e-con-inner{ margin:auto !important; }
.preloader-wrap .elementor-element-ec6b64{ justify-content:center !important; min-height:0 !important; }
.preloader-wrap .elementor-element-33cd4ab{ display:none !important; }   /* old spacer below the logo */
.preloader-wrap .sitelogo{ width:100% !important; align-items:center !important; justify-content:center !important; }
@media (max-width:767px){ .cf-prelogo{ max-width:90% !important; width:90% !important } }
.preloader-wrap .pre_text_1 .elementor-heading-title,
.preloader-wrap .pre_text_2 .elementor-heading-title,
.preloader-wrap .pre_text_3 .elementor-heading-title{
  font-size: clamp(30px, 4.4vw, 54px) !important;
  letter-spacing: .05em !important; line-height: 1.05 !important; white-space: nowrap;
}

/* footer cover photo -> Angela's shot */
.elementor-element-2790735 {  /* "EAT IN OR TAKE OUT / Just order the best pizza" section */
  background-image: linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)), url("/assets/img/slices2.webp") !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* order-popup CTAs (replaced the foreign delivery logos with her real channels) */
.cf-orderbtn{display:flex;align-items:center;justify-content:center;text-align:center;
  background:#d92716;color:#fff;font-family:Offset,sans-serif;text-transform:uppercase;
  letter-spacing:.02em;font-size:17px;line-height:1.05;padding:16px 18px;border-radius:10px;
  text-decoration:none;min-height:62px;transition:transform .15s ease,background .15s ease}
.cf-orderbtn:hover{background:#b81f12;transform:translateY(-2px);color:#fff}

/* ---------- real menu block (font-matched: Offset display) — card pop ---------- */
.cf-menu{max-width:1120px;margin:0 auto;padding:40px 46px 36px;color:#1a1110;
  background:#fff;border-radius:18px;border:2px solid rgba(217,39,22,.14);
  box-shadow:0 36px 80px -34px rgba(217,39,22,.30), 0 2px 0 rgba(0,0,0,.04)}
.cf-menu__head{text-align:center;margin:0 0 30px}
.cf-menu__head::before{content:"";display:block;height:16px;width:132px;margin:0 auto 16px;
  background:repeating-conic-gradient(#d92716 0 25%, #1a1110 0 50%) 0 0/16px 16px;border-radius:2px}
.cf-menu__eyebrow{font-family:Hawkins,sans-serif;letter-spacing:.18em;font-size:14px;color:#d92716;text-transform:uppercase;margin:0 0 6px}
.cf-menu__title{font-family:Offset,sans-serif;text-transform:uppercase;font-size:clamp(34px,6vw,64px);line-height:.92;margin:0;color:#1a1110}
.cf-menu__cols{display:grid;grid-template-columns:1fr 1fr;gap:30px 56px}
.cf-menu__cat h3{font-family:Offset,sans-serif;text-transform:uppercase;font-size:24px;letter-spacing:.01em;margin:0 0 12px;color:#d92716;display:flex;align-items:baseline;gap:10px}
.cf-menu__cat h3 small{font-family:Hawkins,sans-serif;font-size:12px;letter-spacing:.14em;color:#9a8f8d;text-transform:uppercase}
.cf-menu__cat ul{list-style:none;margin:0 0 6px;padding:0}
.cf-menu__row{display:flex;align-items:baseline;gap:8px;padding:7px 0;border-bottom:1px solid rgba(26,17,16,.07)}
.cf-menu__row .i{font-family:Offset,sans-serif;text-transform:uppercase;font-size:17px;letter-spacing:.01em;white-space:nowrap}
.cf-menu__row .dots{flex:1;border-bottom:2px dotted rgba(26,17,16,.22);transform:translateY(-4px)}
.cf-menu__row .p{font-family:Offset,sans-serif;font-size:17px;color:#d92716;white-space:nowrap}
.cf-menu__row .desc{font-family:Hawkins,sans-serif;font-size:12px;letter-spacing:.06em;color:#7d7370;text-transform:uppercase;flex-basis:100%;margin-top:-2px}
.cf-menu__note{font-family:Hawkins,sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:14px;text-align:center;margin:26px 0 4px;color:#1a1110}
.cf-menu__note a{color:#d92716;text-decoration:underline;text-underline-offset:3px}
.cf-menu__sub{font-family:Hawkins,sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:#8a7f7c;margin:8px 0 0}
/* squared-off menu sections (cards) */
.cf-menu__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px}
.cf-menu__card{background:#fff;border:1.5px solid rgba(217,39,22,.18);border-radius:14px;padding:22px 26px;
  box-shadow:0 14px 36px -20px rgba(217,39,22,.28)}
.cf-menu__card--wide{grid-column:1 / -1}
.cf-menu__cat-t{font-family:Offset,sans-serif;text-transform:uppercase;font-size:23px;color:#d92716;margin:0 0 12px;
  display:flex;align-items:baseline;gap:10px;border-bottom:2px solid rgba(26,17,16,.10);padding-bottom:9px}
.cf-menu__cat-t small{font-family:Hawkins,sans-serif;font-size:11px;letter-spacing:.12em;color:#9a8f8d;text-transform:uppercase}
.cf-menu__card ul{list-style:none;margin:0;padding:0}
.cf-menu__two{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}

/* About + reviews bigger (fill the section) */
.elementor-element-d1f94fb > .e-con-inner{grid-template-columns:1.12fr 0.88fr !important;gap:60px !important;max-width:1240px !important}
.cf-about__media{flex:0 0 47% !important}
.cf-about__eyebrow{font-size:15px !important;letter-spacing:.22em !important}
.cf-about__title{font-size:clamp(50px,5.6vw,82px) !important;line-height:.9 !important;margin-bottom:18px !important}
.cf-about__body{font-size:18px !important;line-height:1.62 !important;max-width:46ch !important}
.cf-about__cta{font-size:16px !important;padding:15px 30px !important}
/* colored buzzwords in the story */
.cf-hl{color:#ff7a5c;font-weight:700}
/* reviews bigger */
.elementor-element-d1f94fb .elementor-element-0ff24d8{font-size:32px !important;line-height:1.3 !important}
/* menu rows keep their flex layout while popping in */
.cf-menu__row.cf-t{display:flex}

/* ---------- ABOUT (left) + reviews (right), inside the gray reviews section ---------- */
.elementor-element-d1f94fb > .e-con-inner{
  display:grid !important; grid-template-columns:1.05fr 0.9fr; gap:54px;
  align-items:center; max-width:1180px; margin:0 auto; width:100%;
}
.cf-about{ display:flex; gap:26px; align-items:center; text-align:left;
  opacity:0; transform:translateX(-30px); transition:opacity .7s ease, transform .85s cubic-bezier(.2,.7,.2,1) }
.cf-about.cf-in{ opacity:1; transform:none }
.cf-about__media{ flex:0 0 43% }
.cf-about__media img{ width:100%; border-radius:16px; display:block;
  box-shadow:0 26px 64px -26px rgba(0,0,0,.6); border:3px solid rgba(255,255,255,.92) }
.cf-about__copy{ color:#fff }
.cf-about__eyebrow{ font-family:Hawkins,sans-serif; letter-spacing:.2em; font-size:13px; color:#ff7063; text-transform:uppercase; margin:0 0 8px }
.cf-about__title{ font-family:Offset,sans-serif; text-transform:uppercase; font-size:clamp(32px,3.6vw,50px); line-height:.92; margin:0 0 14px; color:#fff }
.cf-about__body{ font-family:-apple-system,system-ui,sans-serif; font-size:15px; line-height:1.62; color:rgba(255,255,255,.85); margin:0 0 20px; max-width:44ch }
.cf-about__cta{ display:inline-block; background:#d92716; color:#fff; font-family:Offset,sans-serif; text-transform:uppercase; letter-spacing:.02em; font-size:15px; padding:13px 26px; border-radius:10px; text-decoration:none; transition:transform .15s ease, background .15s ease }
.cf-about__cta:hover{ background:#b81f12; transform:translateY(-2px); color:#fff }
/* reviews in the right column — bigger + nudged down so they don't sit too high */
.elementor-element-d1f94fb .elementor-element-0ff24d8{ font-size:42px !important; line-height:1.26 !important }
.elementor-element-fb667b0{ margin-top:90px !important; align-self:start !important }
/* slick fade slides were overlapping in the narrow column — show only the active one */
.elementor-element-d1f94fb .jet-listing-grid__slider .slick-slide{ opacity:0 !important; transition:opacity .45s ease }
.elementor-element-d1f94fb .jet-listing-grid__slider .slick-slide.slick-active,
.elementor-element-d1f94fb .jet-listing-grid__slider .slick-slide.slick-current{ opacity:1 !important }
.elementor-element-d1f94fb .jet-listing-grid__slider{ min-height:230px }

/* ---------- MOBILE POLISH (<=767px) ---------- */
@media (max-width:767px){
  html,body{overflow-x:hidden}
  /* drop the hero wordmark lower on phones (desktop keeps margin:4vh) */
  .cf-herologo{margin-top:15vh !important;width:min(680px,90%) !important}
  /* hero's decorative "for private events" line collided with the floating ORDER button */
  .elementor-element-f444d05 .elementor-widget-icon-list{display:none !important}
  .cf-ph{transform:translateY(22px) scale(.66) rotate(-3deg)}  /* gentler pop on small screens */
  .cf-menu{padding:24px 16px}
  .cf-menu__cols{grid-template-columns:1fr;gap:22px}
  .cf-menu__grid{grid-template-columns:1fr;gap:16px}
  .cf-menu__two{grid-template-columns:1fr}
  .cf-menu__card{padding:18px 18px}
  .cf-menu__row .i,.cf-menu__row .p{font-size:16px}
  .elementor-element-84a61c6,.elementor-element-2b3289f{background-size:16px 16px,16px 16px !important}
  /* about + reviews stack on phones */
  .elementor-element-d1f94fb > .e-con-inner{grid-template-columns:1fr !important;gap:28px;padding-top:16px !important}
  .cf-about{flex-direction:column;text-align:center;gap:16px}
  .cf-about__media{flex:0 0 auto;max-width:260px;margin:0 auto}
  .cf-about__body{margin-left:auto;margin-right:auto}

  /* --- PHOTO WALL = masonry reflow. The wall is THREE scatter containers:
     be2d343 + eddb1ff (under the hero) AND 73b0352 (holds the ORDER NOW / CHEESE / OR
     stickers — it was un-masonry'd before, so it collapsed and ORDER NOW went missing).
     Target the 3 containers directly so all photos + stickers reflow & show. Pre-footer
     CTA section (2790735) is deliberately NOT in this list (keeps its text intact). --- */
  /* SCATTER, not grid: photos are absolutely positioned — overlapping + tilted like the
     desktop, coords set in JS (mobileScatterPhotos). Absolute is deterministic on iOS
     (column-count wasn't). 73b0352 is HIDDEN — its pizzas bled into the gray reviews
     section, which should be Meet-Angela + reviews only. */
  .elementor-element-73b0352{display:none !important}
  /* kill the white void under the wall photos: (a) a 150px empty spacer widget sat below
     eddb1ff, (b) 665ddfd had margin-top:-200 + padding-top:170 to clear the (now hidden)
     73b0352 scatter. Drop both so the wall flows straight into the gray Meet-Angela section. */
  .elementor-element-e788976{display:none !important}
  /* 84a61c6 is a flex column with justify-content:space-between + min-height — that
     spreads the two scatters apart and pads the bottom. Make it a plain block that
     hugs its content. */
  .elementor-element-84a61c6{display:block !important;min-height:0 !important;height:auto !important}
  .elementor-element-665ddfd{margin-top:0 !important;padding-top:18px !important}
  /* the gray Meet-Angela/reviews section had margin-top:-60 (overlapped + CLIPPED the
     bottom wall photos). Zero it so the photos show fully with a small clean gap. */
  .elementor-element-2b3289f{margin-top:0 !important}
  .elementor-element-be2d343, .elementor-element-eddb1ff{
    position:relative !important;display:block !important;width:100% !important;
    margin:0 auto !important;padding:0 !important;min-height:0 !important;overflow:visible !important}
  :is(.elementor-element-be2d343,.elementor-element-eddb1ff) > [class*="foto"]{
    position:absolute !important;margin:0 !important;visibility:visible !important}
  :is(.elementor-element-be2d343,.elementor-element-eddb1ff) [class*="foto"] img{
    width:100% !important;height:auto !important;aspect-ratio:4/5 !important;display:block;border-radius:9px !important;
    box-shadow:0 8px 20px rgba(0,0,0,.30) !important;object-fit:cover !important}
  /* STICKERS OVERLAY the photo grid (like the desktop scatter) — absolute, lifted out
     of the grid flow so the photos stay a clean tight grid and the stickers float on
     top at scattered corners. Position + rotation set per-sticker in JS (mobileScatter). */
  .elementor-element-be2d343, .elementor-element-eddb1ff, .elementor-element-73b0352{position:relative !important}
  :is(.elementor-element-be2d343,.elementor-element-eddb1ff,.elementor-element-73b0352) [class*="sticker"]{
    position:absolute !important;z-index:30 !important;margin:0 !important;background:transparent !important;
    box-shadow:none !important;filter:drop-shadow(0 3px 7px rgba(0,0,0,.28))}
  :is(.elementor-element-be2d343,.elementor-element-eddb1ff,.elementor-element-73b0352) [class*="sticker"] img{
    width:100% !important;height:auto !important;max-width:none !important;max-height:none !important;margin:0 !important;
    border-radius:0 !important;box-shadow:none !important;background:transparent !important;object-fit:contain !important}
  /* CTA stickers (ORDER NOW + EAT IN) = full clickable target */
  :is(.elementor-element-be2d343,.elementor-element-eddb1ff,.elementor-element-73b0352) a:has(> img){display:block;cursor:pointer}
  /* sticker reveal = pop in place (scale+fade); rotation lives on the parent so the
     scatter tilt survives the reveal */
  .cf-stick{opacity:0;transform:scale(.45);transition:opacity .4s ease, transform .6s cubic-bezier(.34,1.56,.64,1);will-change:opacity,transform}
  .cf-stick.cf-in{opacity:1;transform:scale(1)}

  /* ENGRAVE every collage photo + sticker: kill iOS long-press save/share, drag,
     selection — they read as part of the design, not grabbable images. (Taps still
     work, so an <a>-wrapped CTA sticker still fires.) */
  [class*="foto"] img, [class*="sticker"] img{
    -webkit-touch-callout:none !important; -webkit-user-select:none !important;
    user-select:none !important; -webkit-user-drag:none !important; -khtml-user-drag:none !important;}

  /* --- hero CTA row: ORDER NOW + map-pin icon overflowed. Stack full-width. --- */
  .elementor-element-f444d05 .e-con-inner,
  .elementor-element-f444d05 .elementor-widget-wrap{flex-direction:column !important;align-items:stretch !important;gap:10px !important}
  .elementor-element-f444d05 .elementor-widget-button,
  .elementor-element-f444d05 .elementor-button-wrapper,
  .elementor-element-f444d05 .elementor-button{width:100% !important}

  /* --- floating SkyTab "ORDER" FAB: fixed with a desktop right-offset → off-screen
     on narrow phones. Pin it to the bottom-right thumb zone. --- */
  .elementor-element-2dac0c1{position:fixed !important;right:14px !important;left:auto !important;
    bottom:16px !important;top:auto !important;width:auto !important;z-index:95 !important}
  .elementor-element-2dac0c1 .elementor-button{box-shadow:0 8px 22px rgba(0,0,0,.3) !important}
}