/* ------------------------------------------------------------------------
   Pampy's overrides for the Arome kit.
   The kit's own layout, type and palette are untouched; these rules only
   swap in Pampy's photography and make room for a square logo where the
   template used a wide wordmark.
   ------------------------------------------------------------------------ */

/* --- HERO ---------------------------------------------------------------
   The kit points its hero at its own photo from an external stylesheet, so
   the swap has to happen here. Pampy's shot is busy on the left where the
   headline sits, hence the teal scrim. */
.elementor-1732 .elementor-element.elementor-element-6c498fda:not(.elementor-motion-effects-element-type-background),
.elementor-1732 .elementor-element.elementor-element-6c498fda > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url("../images/hero-cubano.jpg");
  background-position: right center;
  background-size: cover;
}
.elementor-1732 .elementor-element.elementor-element-6c498fda > .e-con-inner {
  position: relative;
  z-index: 1;
}
.elementor-1732 .elementor-element.elementor-element-6c498fda::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(10, 73, 84, .92) 0%,
    rgba(10, 73, 84, .82) 32%,
    rgba(10, 73, 84, .45) 58%,
    rgba(10, 73, 84, .12) 100%
  );
}
@media (max-width: 767px) {
  .elementor-1732 .elementor-element.elementor-element-6c498fda::after {
    background: rgba(10, 73, 84, .72);
  }
}

/* --- STICKY HEADER ------------------------------------------------------
   The kit parks the header over the hero and lets it scroll away. Keeping it
   on screen means the menu is always reachable; #masthead is a direct child
   of #page, so sticky costs no layout shift at all. */
/* header-footer-elementor pins this with .ehf-header #masthead{position:relative},
   so the override has to carry at least as much specificity. */
body.ehf-header #masthead {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: #0A4954;
}
/* The kit pulls the hero up 100px so it runs under a transparent header.
   That overlap is what makes a persistent bar impossible: the hero paints
   over the header band. Drop the pull and the header becomes a real bar. */
#masthead .elementor-element-1bef142 { --margin-bottom: 0px; }
/* Both knobs are custom properties the scroll handler writes on <body>. */
#masthead .elementor-element-1bef142 {
  --padding-top: var(--pampys-bar-pad, 16px);
  --padding-bottom: var(--pampys-bar-pad, 16px);
  transition: padding .28s ease;
}
/* Off the photo the cream nav needs a ground of its own. That ground is
   written as inline style by the scroll handler at the end of the page:
   the header/footer plugin rewrites both #masthead’s and <html>’s class
   attribute at runtime, so a state class there does not survive. */
#masthead { transition: box-shadow .28s ease; }

/* --- LOGO ---------------------------------------------------------------
   Pampy's mark is a round badge, not a wide wordmark, so constrain it by
   height instead of width or the header grows by 90px. It rides large over
   the hero and shrinks once the bar becomes a slim sticky strip. */
.elementor-element-a9d16fe img {
  width: auto !important;
  height: var(--pampys-logo-h, 104px) !important;
  transition: height .28s ease;
}

@media (max-width: 1024px) {
  #masthead { --pampys-logo-h: 76px; }
}
.elementskit-nav-logo img      { width: auto !important; height: 56px !important; }
.elementor-element-2dc4f06 img,
.elementor-widget-image img[src$="logo-teal.png"] { width: auto !important; max-height: 96px; }

/* --- MENU CARDS ---------------------------------------------------------
   Pampy's photos come in mixed aspect ratios; the kit's cards assume square. */
.e-n-tabs-content .elementor-widget-image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* --- SHOWCASE (repurposed testimonial slider) --------------------------- */
.elementskit-commentor-image.ekit-testimonial--avatar img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* --- ABOUT / LOCATION ART ----------------------------------------------
   Two slots were illustrations in the kit and are photographs here. */
.elementor-element-e816632 img { border-radius: 12px; }

/* The kit's cards assume an 800px-wide photo. Several of Pampy's originals
   are smaller, and an intrinsically-narrow image lets the flex row put the
   title beside it instead of under it — so pin the widget to full width. */
.e-n-tabs-content .elementor-widget-image { width: 100%; flex: 0 0 100%; }

/* --- CTA BAND -----------------------------------------------------------
   Another kit photo set from its own stylesheet; the storefront at dusk
   sits better under the cream headline. */
.elementor-1732 .elementor-element.elementor-element-1506cb29:not(.elementor-motion-effects-element-type-background),
.elementor-1732 .elementor-element.elementor-element-1506cb29 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-image: url("../images/order-band.jpg");
  background-position: center center;
}

/* Footer: the order note under the button that replaced the WP form. */
.pampys-order-note { margin: 14px 0 0; font-size: 14px; opacity: .8; }

/* ========================================================================
   Round two: typeface, Pampy's own orange, ivory hero accents,
   a brown Find Us band and the custom-cake section.
   ======================================================================== */

/* --- TYPEFACE -----------------------------------------------------------
   Times New Roman throughout, in place of the kit's Teko/Rubik pairing.
   Both kit faces are condensed and carry negative tracking; Times is neither,
   so the tracking is reset and the two display sizes are pulled back to stop
   the big headings running out of their columns. */
.elementor-kit-7,
.elementor-kit-7 .elementor-widget-heading,
body {
  --e-global-typography-primary-font-family: "Times New Roman";
  --e-global-typography-secondary-font-family: "Times New Roman";
  --e-global-typography-text-font-family: "Times New Roman";
  --e-global-typography-accent-font-family: "Times New Roman";
  --e-global-typography-7a02aa3-font-family: "Times New Roman";
  --e-global-typography-7cafe9b-font-family: "Times New Roman";
  --e-global-typography-24d7f69-font-family: "Times New Roman";
  --e-global-typography-184bcdf-font-family: "Times New Roman";
  --e-global-typography-5890434-font-family: "Times New Roman";
  --e-global-typography-1fe47b5-font-family: "Times New Roman";
  --e-global-typography-12da21c-font-family: "Times New Roman";
}
body, button, input, select, textarea, a,
h1, h2, h3, h4, h5, h6, p, li, span, strong, em,
.elementor-button, .elementor-heading-title,
.elementskit-navbar-nav a, .elementskit-author-name, .elementskit-author-des {
  font-family: "Times New Roman", Times, Georgia, serif !important;
}
h1, h2, h3, h4, h5, h6, .elementor-heading-title, .elementor-button {
  letter-spacing: normal !important;
}
/* Times sets wider than Teko; give the two display sizes some room back. */
.elementor-element-5052be34 .elementor-heading-title { font-size: clamp(54px, 8.5vw, 168px) !important; }
.elementor-widget-heading h2.elementor-heading-title { word-spacing: .02em; }

/* --- PAMPY'S ORANGE -----------------------------------------------------
   #DB7D29 is the orange the bakery's own site is built on. It joins the
   kit's teal as the accent rather than replacing it. */
:root { --pampys-orange: #DB7D29; --pampys-orange-dark: #B96319; --pampys-ivory: #FFFDF5; }

/* Prices, eyebrows and the quote marks pick up the orange. */
.e-n-tabs-content .elementor-widget-heading:nth-of-type(2) .elementor-heading-title,
.pampys-cake-price { color: var(--pampys-orange) !important; }
.elementskit-watermark-icon .icon-quote { color: var(--pampys-orange) !important; }

/* Primary buttons in orange; the kit's teal stays on the quiet ones. */
.elementor-button:not(.elementor-button-link):not([href^="tel"]),
.e-n-tabs-content .elementor-button,
.elementor-widget-button .elementor-button[href*="fromtherestaurant"] {
  background-color: var(--pampys-orange) !important;
  color: #fff !important;
  border-color: var(--pampys-orange) !important;
}
.elementor-widget-button .elementor-button[href*="fromtherestaurant"]:hover,
.e-n-tabs-content .elementor-button:hover {
  background-color: var(--pampys-orange-dark) !important;
}
/* Selected menu tab. */
.e-n-tab-title[aria-selected="true"] {
  background-color: var(--pampys-orange) !important;
  color: #fff !important;
}
.e-n-tab-title[aria-selected="true"] .e-n-tab-title-text { color: #fff !important; }

/* --- HERO: IVORY + WHITE ------------------------------------------------ */
.elementor-element-5052be34 .elementor-heading-title {
  color: var(--pampys-ivory) !important;
  text-shadow: 0 2px 26px rgba(10, 73, 84, .45);
}
/* A thin ivory rule and ivory feature row under the headline. */
.elementor-element-1a925c6f .elementor-icon-list-items {
  border-top: 1px solid rgba(255, 253, 245, .38);
  padding-top: 14px;
}
.elementor-element-1a925c6f .elementor-icon-list-text {
  color: var(--pampys-ivory) !important;
  letter-spacing: .06em;
}
.elementor-element-42caa801 p { color: #fff !important; }
/* The hero's two buttons: one ivory, one outlined white. */
.elementor-element-5c0234e6 .elementor-button {
  background-color: var(--pampys-ivory) !important;
  color: #0A4954 !important;
  border: 1px solid var(--pampys-ivory) !important;
  border-radius: 999px;
  padding: 13px 26px !important;
}
.elementor-element-7c49600c .elementor-button {
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .7) !important;
  border-radius: 999px;
  padding: 13px 26px !important;
}
.elementor-element-7c49600c .elementor-button:hover {
  background-color: rgba(255, 255, 255, .14) !important;
}
/* Ivory ring behind the round badge so it reads off the photo. */
.elementor-element-262f6578 img {
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(255, 253, 245, .85), 0 10px 34px rgba(0, 0, 0, .28);
}

/* --- CUSTOM CAKES ------------------------------------------------------- */
.pampys-cakes {
  background-color: var(--pampys-ivory);
  padding: 96px 20px;
}
.pampys-cakes-inner {
  max-width: 1140px;
  margin: 0 auto;
  width: 100%;
}
.pampys-cakes-head { max-width: 760px; margin-bottom: 48px; }
.pampys-cakes-eyebrow {
  margin: 0 0 10px;
  color: var(--pampys-orange);
  font-size: 15px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.pampys-cakes-title {
  margin: 0 0 16px;
  color: #0A4954;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.15;
}
.pampys-cakes-lede { margin: 0; color: #4A3426; font-size: 19px; line-height: 1.6; }

.pampys-cakes-body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: start;
}
.pampys-cakes-photo { margin: 0; }
.pampys-cakes-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid rgba(10, 73, 84, .18);
}
.pampys-cakes-sub {
  margin: 0 0 18px;
  color: #0A4954;
  font-size: 26px;
}
.pampys-cake-sizes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 34px;
}
.pampys-cake-size {
  border: 1px solid rgba(10, 73, 84, .28);
  padding: 18px 10px;
  text-align: center;
  background: #fff;
}
.pampys-cake-in { display: block; color: #0A4954; font-size: 26px; }
.pampys-cake-price { display: block; margin-top: 4px; font-size: 24px; }

.pampys-cake-opts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 24px 0;
  border-top: 1px solid rgba(10, 73, 84, .18);
  border-bottom: 1px solid rgba(10, 73, 84, .18);
  margin-bottom: 30px;
}
.pampys-cake-opts h4 {
  margin: 0 0 6px;
  color: var(--pampys-orange);
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pampys-cake-opts p { margin: 0; color: #0A4954; font-size: 18px; }

.pampys-cake-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.pampys-cake-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--pampys-orange);
  color: #fff !important;
  font-size: 18px;
  text-decoration: none;
  border: 1px solid var(--pampys-orange);
}
.pampys-cake-btn:hover { background: var(--pampys-orange-dark); border-color: var(--pampys-orange-dark); }
.pampys-cake-btn-quiet {
  background: transparent;
  color: #0A4954 !important;
  border-color: rgba(10, 73, 84, .45);
}
.pampys-cake-btn-quiet:hover { background: rgba(10, 73, 84, .07); }

@media (max-width: 900px) {
  .pampys-cakes { padding: 64px 20px; }
  .pampys-cakes-body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pampys-cake-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pampys-cake-opts { grid-template-columns: minmax(0, 1fr); }
}

/* Times sets much wider than the kit's condensed Teko, so the menu card's
   flex row now wraps the price onto its own line. Pin each part of the card
   to a row of its own instead of letting it reflow. */
.e-n-tabs-content .elementor-widget-heading { flex: 1 1 auto; min-width: 0; }
.e-n-tabs-content .elementor-widget-heading + .elementor-widget-heading {
  flex: 0 0 auto;
  text-align: right;
}
.e-n-tabs-content .elementor-widget-divider,
.e-n-tabs-content .elementor-widget-text-editor,
.e-n-tabs-content .elementor-widget-button {
  flex: 0 0 100%;
  width: 100%;
}
.e-n-tabs-content .elementor-heading-title { font-size: 25px !important; line-height: 1.2; }

/* The cake shot is portrait; a 1:1 crop loses the tray. */
.pampys-cakes-photo img { aspect-ratio: 4 / 5; }

/* The blanket orange-button rule above also catches the cake section's quiet
   button (it is a mailto, not a tel), so pin both cake buttons explicitly. */
.pampys-cake-cta .pampys-cake-btn {
  background-color: var(--pampys-orange) !important;
  color: #fff !important;
  border-color: var(--pampys-orange) !important;
}
.pampys-cake-cta .pampys-cake-btn:hover {
  background-color: var(--pampys-orange-dark) !important;
  border-color: var(--pampys-orange-dark) !important;
}
.pampys-cake-cta .pampys-cake-btn-quiet {
  background-color: transparent !important;
  color: #0A4954 !important;
  border-color: rgba(10, 73, 84, .45) !important;
}
.pampys-cake-cta .pampys-cake-btn-quiet:hover {
  background-color: rgba(10, 73, 84, .07) !important;
}

/* Times runs far larger on the page than the kit's condensed Teko at the same
   pixel size, so the two section-heading steps come down to match. */
.elementor-kit-7, body {
  --e-global-typography-secondary-font-size: 56px;
  --e-global-typography-7a02aa3-font-size: 44px;
}
@media (max-width: 1024px) {
  .elementor-kit-7, body {
    --e-global-typography-secondary-font-size: 40px;
    --e-global-typography-7a02aa3-font-size: 32px;
  }
}

/* Both cake buttons carry .pampys-cake-btn, so the quiet variant needs to
   outrank it rather than merely follow it. */
.pampys-cakes .pampys-cake-cta a.pampys-cake-btn-quiet {
  background-color: transparent !important;
  color: #0A4954 !important;
  border-color: rgba(10, 73, 84, .45) !important;
}
.pampys-cakes .pampys-cake-cta a.pampys-cake-btn-quiet:hover {
  background-color: rgba(10, 73, 84, .07) !important;
}

/* ========================================================================
   PHONE APP SHELL
   A fixed bottom action bar on phones only — Call, Cater, Menu, Order.
   Above 900px the page keeps its ordinary header nav and the bar is gone.
   ======================================================================== */
.pampys-appbar { display: none; }

@media (max-width: 900px) {
  .pampys-appbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background: #0A4954;
    border-top: 1px solid rgba(255, 253, 245, .16);
    /* clear the iPhone home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -6px 22px rgba(10, 73, 84, .28);
  }
  .pampys-appbar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 4px 9px;
    min-height: 58px;
    color: var(--pampys-ivory, #FFFDF5) !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  .pampys-appbar-btn svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* The handset is a solid glyph; the other three are strokes. */
  .pampys-appbar-btn:first-child svg { fill: currentColor; stroke: none; }
  .pampys-appbar-btn span {
    font-size: 12px;
    letter-spacing: .04em;
    line-height: 1;
  }
  /* Order is the one that earns the accent. */
  .pampys-appbar-btn:last-child { color: #fff !important; }
  .pampys-appbar-btn:last-child svg { stroke: var(--pampys-orange, #DB7D29); stroke-width: 2; }
  .pampys-appbar-btn:active { background: rgba(255, 253, 245, .12); }

  /* Nothing at the foot of the page should hide behind the bar. */
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* ========================================================================
   SIDE GUTTERS
   The kit's container is a flat 1440px, so on a 1440px display the content
   touches both edges and on a 1512px laptop it clears them by 36px. Cap the
   inner width against the viewport as well as the fixed measure, so there is
   always a margin down each side. Above ~1730px the 1440px cap wins again
   and nothing changes.
   ======================================================================== */
:root {
  --pampys-gutter: clamp(28px, 6vw, 210px);
  /* The kit measures 1440px, which fills a laptop screen to the edges. A
     1200px column is the ordinary width for a page like this and leaves a
     clear margin either side at every screen size. */
  --pampys-measure: 1200px;
}

@media (min-width: 901px) {
  .e-con-boxed > .e-con-inner,
  .pampys-cakes-inner {
    max-width: min(var(--pampys-measure), calc(100% - 2 * var(--pampys-gutter))) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* The cake section was set to a narrower 1140px measure of its own; match
     it to the rest of the page so one column edge runs down the whole site.
     Its own side padding goes too, or it sits 20px inside everything else. */
  .pampys-cakes-inner { --container-max-width: var(--pampys-measure); }
  .pampys-cakes { padding-inline: 0; }
}

/* ========================================================================
   PHONE TOP BAR
   On phones the bar goes orange and drops its Order Now button — ordering
   already has a permanent home in the bottom action bar, so the top bar is
   left as just the mark and the menu.
   ======================================================================== */
@media (max-width: 900px) {
  body.ehf-header #masthead { background-color: var(--pampys-orange, #DB7D29); }
  #masthead .elementor-element-e8a3edc { display: none !important; }
  /* Mark and hamburger stay ivory, which still carries on the orange. */
  #masthead .ekit-menu-icon,
  #masthead .elementskit-menu-hamburger .ekit-menu-icon { color: var(--pampys-ivory, #FFFDF5); }
}

/* ========================================================================
   PHONE TOP BAR — second pass
   Brown rather than orange, a larger mark, and no Call Us / Order Now up
   top: both of those already have a permanent slot in the bottom bar.
   ======================================================================== */
@media (max-width: 900px) {
  /* A lighter brown than the Find Us band, so the bar reads as its own
     surface; cream on it still clears AA at about 6:1. */
  body.ehf-header #masthead { background-color: #7B5840; }

  /* Larger mark on the phone. It still slims when the bar sticks, so the
     shrink has its own variable — the desktop one is a different size. */
  .elementor-element-a9d16fe img {
    height: var(--pampys-logo-h-phone, 98px) !important;
  }

  /* Order Now (header) and Call Us (hero) come out; Our Menu stays. */
  #masthead .elementor-element-e8a3edc,
  .elementor-element-7c49600c {
    display: none !important;
  }
}

/* ========================================================================
   MENU HEADER OVERLAP
   The kit pulls the tab block up by -70px so it tucks alongside a one-line
   Teko heading. In Times the same heading runs to two lines, so the tabs
   land on top of it. Let the tabs sit below the heading instead.
   ======================================================================== */
@media (min-width: 901px) {
  #menu .elementor-element-2b496863 { margin-top: 28px !important; }
}

/* The kit sets that header as a row: heading left, "Our Menu" label right.
   That only reads when the heading is short. Stack it the way every other
   section on the page is built — label above, heading beneath, both left. */
@media (min-width: 901px) {
  #menu .elementor-element-5ffc4bdd {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px;
  }
  #menu .elementor-element-5ffc4bdd > *:last-child { order: -1; }
  #menu .elementor-element-5ffc4bdd > * { width: auto !important; text-align: left !important; }
}

/* Times wraps long headings with a single orphaned word on the last line.
   Balance them where the browser supports it. */
h2.elementor-heading-title,
.pampys-cakes-title { text-wrap: balance; }

/* ========================================================================
   HERO — SPLIT LAYOUT (desktop)
   Teal panel on the left carrying the type, the pastry photo bleeding off
   the right edge, with a soft blend between the two. The photo itself is
   unchanged; only the framing and the stacking order are new.
   Phones keep the layout tuned in the earlier rounds.
   ======================================================================== */
@media (min-width: 901px) {
  /* Photo sits right; the scrim is solid teal across the left panel and
     clears away before the pastries. */
  .elementor-1732 .elementor-element.elementor-element-6c498fda::after {
    background: linear-gradient(
      90deg,
      #0A4954 0%,
      #0A4954 34%,
      rgba(10, 73, 84, .90) 44%,
      rgba(10, 73, 84, .45) 56%,
      rgba(10, 73, 84, .06) 70%,
      rgba(10, 73, 84, 0) 80%
    );
  }

  /* One left-hand column, everything stacked and left-aligned. */
  #home .elementor-element-9b66064 {
    flex-direction: column !important;
    align-items: flex-start !important;
    max-width: 52%;
    gap: 0;
  }
  #home .elementor-element-2e6c3387,
  #home .elementor-element-4c555e14 {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 0;
  }
  /* lede above the buttons; buttons above the strapline */
  #home .elementor-element-6780c548 { order: -1; width: 100% !important; }
  #home .elementor-element-265dd6b0 { order: 1; }
  #home .elementor-element-27c88426 { order: 2; width: 100% !important; }

  /* The round badge is redundant beside the wordmark in the bar. */
  #home .elementor-element-5d5d8ec5 { display: none !important; }

  #home .elementor-element-5052be34 .elementor-heading-title {
    font-size: clamp(56px, 5.4vw, 92px) !important;
    line-height: 1.04;
    margin: 0 0 22px;
    text-wrap: initial;
  }
  #home .elementor-element-42caa801 {
    max-width: 30rem;
    margin-bottom: 34px;
  }
  #home .elementor-element-42caa801 p {
    font-size: 20px;
    line-height: 1.55;
  }
  #home .elementor-element-265dd6b0 { gap: 16px; margin-bottom: 46px; }

  /* Strapline sits under a hairline at the foot of the panel. */
  #home .elementor-element-1a925c6f .elementor-icon-list-items {
    border-top: 1px solid rgba(255, 253, 245, .30);
    padding-top: 18px;
    gap: 0;
  }
  #home .elementor-element-1a925c6f .elementor-icon-list-item + .elementor-icon-list-item::before {
    content: "·";
    margin: 0 12px;
    color: rgba(255, 253, 245, .55);
  }
  #home .elementor-element-1a925c6f .elementor-icon-list-text {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: .14em;
  }
}

/* Eyebrow above the headline, both sizes. */
.pampys-hero-eyebrow {
  margin: 0 0 16px;
  color: #E9C48A;
  font-size: 15px;
  letter-spacing: .24em;
  text-transform: uppercase;
}

/* Hero buttons: filled orange primary, outlined cream secondary. */
#home .elementor-element-5c0234e6 .elementor-button {
  background-color: var(--pampys-orange) !important;
  color: #fff !important;
  border: 1px solid var(--pampys-orange) !important;
}
#home .elementor-element-5c0234e6 .elementor-button:hover {
  background-color: var(--pampys-orange-dark) !important;
  border-color: var(--pampys-orange-dark) !important;
}

/* Current page marked in the nav, as in the layout. */
#masthead .elementskit-navbar-nav > li.current-menu-item > a {
  color: var(--pampys-orange) !important;
  border-bottom: 2px solid var(--pampys-orange);
  padding-bottom: 4px;
}

/* Headline and eyebrow hug the left edge of the panel, and the solid part of
   the scrim runs wide enough to sit the whole headline on flat teal. */
@media (min-width: 901px) {
  .elementor-1732 .elementor-element.elementor-element-6c498fda::after {
    background: linear-gradient(
      90deg,
      #0A4954 0%,
      #0A4954 44%,
      rgba(10, 73, 84, .88) 53%,
      rgba(10, 73, 84, .38) 64%,
      rgba(10, 73, 84, .05) 76%,
      rgba(10, 73, 84, 0) 84%
    );
  }
  #home .elementor-element-9b66064 { max-width: 48%; }
  #home .elementor-element-7e19e357,
  #home .elementor-element-5052be34,
  #home .elementor-element-5052be34 .elementor-heading-title,
  .pampys-hero-eyebrow {
    text-align: left !important;
    width: 100%;
  }
  #home .elementor-element-5052be34 .elementor-heading-title {
    font-size: clamp(52px, 4.8vw, 80px) !important;
  }
  #home .elementor-element-1a925c6f .elementor-icon-list-item + .elementor-icon-list-item::before {
    margin: 0 2px 0 0;
  }
}

/* ========================================================================
   PHONE TOP BANNER — orange, with a ridged lower edge
   The zigzag is a masked strip hung off the bottom of the bar rather than a
   mask on the bar itself, which would interfere with its sticky behaviour.
   ======================================================================== */
@media (max-width: 900px) {
  body.ehf-header #masthead { background-color: var(--pampys-orange); }
  #masthead::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 13px;
    background: var(--pampys-orange);
    pointer-events: none;
    /* Scalloped ripple rather than a hard zigzag: a row of half-circles
       hanging off the bottom edge. */
    -webkit-mask: radial-gradient(13px at 50% 0, #000 98%, #0000 100%) 0 0 / 26px 100% repeat-x;
            mask: radial-gradient(13px at 50% 0, #000 98%, #0000 100%) 0 0 / 26px 100% repeat-x;
  }
}

/* The kit bottom-aligns the hero column, which leaves the strapline hard
   against the foot of the section. Centre it and give the rule some air. */
@media (min-width: 901px) {
  #home > .e-con-inner { justify-content: center !important; }
  #home .elementor-element-1a925c6f { padding-bottom: 8px; }
  #home .elementor-element-1a925c6f .elementor-icon-list-item + .elementor-icon-list-item::before {
    margin: 0 10px 0 2px;
  }
}

/* Lift the left edge of the hero panel: a lighter teal at the far left that
   eases back to the brand teal before the photo blend begins. Held at
   #237B8A rather than a full 60% lift so the cream type stays at ~4.8:1. */
@media (min-width: 901px) {
  .elementor-1732 .elementor-element.elementor-element-6c498fda::after {
    background: linear-gradient(
      90deg,
      #237B8A 0%,
      #1A6C7A 14%,
      #125C68 28%,
      #0A4954 44%,
      rgba(10, 73, 84, .88) 53%,
      rgba(10, 73, 84, .38) 64%,
      rgba(10, 73, 84, .05) 76%,
      rgba(10, 73, 84, 0) 84%
    );
  }
}

/* ========================================================================
   CENTRED PAGE
   Every section below the hero centres its type and its buttons. The hero
   keeps the split layout from the supplied mockup.
   ======================================================================== */
#about, #menu, #cakes, #visit, #faq,
.elementor-element-63a67886, .elementor-element-1506cb29, .elementor-element-fe01fe1,
.pampys-cakes {
  text-align: center;
}

/* Flex children need centring explicitly — text-align alone won't move them. */
#about .e-con, #menu .e-con, #visit .e-con, #faq .e-con,
.elementor-element-63a67886 .e-con, .elementor-element-1506cb29 .e-con,
#about .e-con-inner, #menu .e-con-inner, #visit .e-con-inner,
#faq .e-con-inner, .elementor-element-1506cb29 .e-con-inner {
  align-items: center;
}

/* Buttons and their rows. */
#about .elementor-widget-button, #menu .elementor-widget-button,
#cakes .elementor-widget-button, #visit .elementor-widget-button,
#faq .elementor-widget-button, .elementor-element-63a67886 .elementor-widget-button,
.elementor-element-1506cb29 .elementor-widget-button,
.elementor-element-fe01fe1 .elementor-widget-button {
  text-align: center !important;
  width: 100%;
}
.elementor-element-1506cb29 .e-con[class*="elementor-element"] { justify-content: center; }

/* Menu section: title block, tab pills and each card. */
@media (min-width: 901px) {
  #menu .elementor-element-5ffc4bdd { align-items: center !important; }
  #menu .elementor-element-5ffc4bdd > * { text-align: center !important; }
}
#menu .elementor-element-36af106b { --n-tabs-heading-justify-content: center; }
.e-n-tabs-content .elementor-widget-heading + .elementor-widget-heading { text-align: center; }
.e-n-tabs-content .e-con[class*="elementor-element"] { align-items: center; }
.e-n-tabs-content .elementor-widget-text-editor { text-align: center; }

/* Custom cakes. */
.pampys-cakes-head { margin-left: auto; margin-right: auto; }
.pampys-cakes-lede { margin-left: auto; margin-right: auto; max-width: 46rem; }
.pampys-cake-cta { justify-content: center; }
.pampys-cakes-body { align-items: center; }

/* Find Us and the icon lists that carry the address, hours and links. */
#visit .elementor-icon-list-items,
.elementor-element-fe01fe1 .elementor-icon-list-items {
  align-items: center;
}
#visit .elementor-icon-list-item,
.elementor-element-fe01fe1 .elementor-icon-list-item {
  justify-content: center;
}
.elementor-element-fe01fe1 .e-con-inner { align-items: center; }

/* Showcase cards. */
.elementskit-commentor-bio, .elementkit-commentor-details { justify-content: center; }
.elementskit-single-testimonial-slider { text-align: center; }

/* ========================================================================
   HERO — LIGHT FADED-GREEN WASH (desktop)
   The left side becomes a pale, see-through green so the photo reads
   through it. Cream type cannot survive that, so the hero's words and its
   outlined button flip to the dark brand teal.
   ======================================================================== */
@media (min-width: 901px) {
  .elementor-1732 .elementor-element.elementor-element-6c498fda::after {
    background: linear-gradient(
      90deg,
      rgba(203, 226, 208, .82) 0%,
      rgba(203, 226, 208, .74) 24%,
      rgba(203, 226, 208, .58) 42%,
      rgba(203, 226, 208, .34) 58%,
      rgba(203, 226, 208, .12) 72%,
      rgba(203, 226, 208, 0) 84%
    );
  }

  /* Type flips dark so it reads on the pale wash. */
  #home .elementor-element-5052be34 .elementor-heading-title {
    color: #0A4954 !important;
    text-shadow: 0 1px 18px rgba(255, 255, 255, .55);
  }
  #home .pampys-hero-eyebrow { color: #A85A12 !important; }
  #home .elementor-element-42caa801 p { color: #14343C !important; }
  #home .elementor-element-1a925c6f .elementor-icon-list-text { color: #14343C !important; }
  #home .elementor-element-1a925c6f .elementor-icon-list-items {
    border-top-color: rgba(10, 73, 84, .28);
  }
  #home .elementor-element-1a925c6f .elementor-icon-list-item + .elementor-icon-list-item::before {
    color: rgba(10, 73, 84, .5);
  }

  /* Outlined button follows the type. */
  #home .elementor-element-7c49600c .elementor-button {
    color: #0A4954 !important;
    border-color: rgba(10, 73, 84, .55) !important;
  }
  #home .elementor-element-7c49600c .elementor-button:hover {
    background-color: rgba(10, 73, 84, .08) !important;
  }
}

/* Centring corrections.
   1. The section heading sits two levels below the block I centred.
   2. `align-items: center` on the card GRID centres each card vertically and
      staggers the row — grids must stay stretched; only the card's own
      contents centre. */
#menu .elementor-heading-title,
#menu .pampys-cakes-eyebrow,
#about .elementor-heading-title,
#visit .elementor-heading-title,
#faq .elementor-heading-title,
.elementor-element-63a67886 .elementor-heading-title,
.elementor-element-1506cb29 .elementor-heading-title {
  text-align: center !important;
}
.e-n-tabs-content .e-con.e-grid,
#visit .e-con.e-grid,
.e-grid { align-items: stretch !important; }

/* Centred menu cards: name and price each take their own centred row, which
   also stops the longest name wrapping under its price. Cards themselves
   stretch to a common height so the row does not stagger. */
.e-n-tabs-content .elementor-widget-heading,
.e-n-tabs-content .elementor-widget-heading + .elementor-widget-heading {
  flex: 0 0 100% !important;
  width: 100% !important;
  text-align: center !important;
}
.e-n-tabs-content .e-con.e-grid > .e-con,
.e-n-tabs-content .e-con.e-grid > div {
  align-self: stretch !important;
}
.e-n-tabs-content .e-con.e-grid { align-content: start !important; }

/* The cards sit inside the grid's own .e-con-inner, which the centring block
   above was aligning to centre — that is what staggered the row. */
#menu .e-con.e-grid > .e-con-inner,
#visit .e-con.e-grid > .e-con-inner,
.e-n-tabs-content .e-con.e-grid > .e-con-inner {
  align-items: stretch !important;
}

/* The Order Now button sat higher than the nav row; centre every part of the
   header bar on one line. Desktop only — on phones this button is hidden,
   and an unscoped display rule here would bring it back. */
@media (min-width: 901px) {
  #masthead .elementor-element-1bef142,
  #masthead .elementor-element-1bef142 > .e-con-inner,
  #masthead .elementor-element-4457f19,
  #masthead .elementor-element-e8a3edc {
    align-items: center !important;
  }
  #masthead .elementor-element-e8a3edc {
    align-self: center !important;
    display: flex !important;
    justify-content: flex-end;
  }
}
/* The selected item's 2px rule would otherwise nudge that link down. */
/* Every link carries the underline slot so the selected one does not shift.
   The matching padding-top keeps the text optically centred against the
   Order Now pill — without it the labels ride ~3px high. */
#masthead .elementskit-navbar-nav > li > a {
  padding-top: 6px;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}

/* ========================================================================
   HERO TINT — matched to the supplied reference
   A deep green-teal that is heaviest at the left edge and clears by the
   right, with the photo reading through it the whole way. Everything else
   about the banner is unchanged; the type returns to cream because the
   reference carries cream type over exactly this weight of tint.
   ======================================================================== */
@media (min-width: 901px) {
  .elementor-1732 .elementor-element.elementor-element-6c498fda::after {
    background: linear-gradient(
      90deg,
      rgba(16, 81, 76, .90) 0%,
      rgba(16, 81, 76, .84) 20%,
      rgba(16, 81, 76, .68) 38%,
      rgba(16, 81, 76, .46) 52%,
      rgba(16, 81, 76, .24) 66%,
      rgba(16, 81, 76, .08) 78%,
      rgba(16, 81, 76, 0) 88%
    );
  }

  /* Type back to cream over the darker tint. */
  #home .elementor-element-5052be34 .elementor-heading-title {
    color: var(--pampys-ivory) !important;
    text-shadow: 0 2px 26px rgba(8, 48, 45, .45);
  }
  #home .pampys-hero-eyebrow { color: #E9C48A !important; }
  #home .elementor-element-42caa801 p { color: #fff !important; }
  #home .elementor-element-1a925c6f .elementor-icon-list-text { color: var(--pampys-ivory) !important; }
  #home .elementor-element-1a925c6f .elementor-icon-list-items {
    border-top-color: rgba(255, 253, 245, .32);
  }
  #home .elementor-element-1a925c6f .elementor-icon-list-item + .elementor-icon-list-item::before {
    color: rgba(255, 253, 245, .55);
  }
  #home .elementor-element-7c49600c .elementor-button {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .7) !important;
  }
  #home .elementor-element-7c49600c .elementor-button:hover {
    background-color: rgba(255, 255, 255, .14) !important;
  }
}

/* ========================================================================
   DESKTOP TOP BANNER — rippled lower edge
   The same scalloped cut the phone banner carries, in the bar's own teal.
   Nothing else about the bar changes: colours, type and layout are as they
   were; this only shapes the edge where the bar meets the hero.
   ======================================================================== */
@media (min-width: 901px) {
  #masthead::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 13px;
    background: #0A4954;
    pointer-events: none;
    -webkit-mask: radial-gradient(13px at 50% 0, #000 98%, #0000 100%) 0 0 / 26px 100% repeat-x;
            mask: radial-gradient(13px at 50% 0, #000 98%, #0000 100%) 0 0 / 26px 100% repeat-x;
  }
}

/* Anchor targets clear the sticky bar, so clicking a menu item lands on the
   section heading rather than tucking it behind the banner. */
#home, #about, #menu, #cakes, #visit, #faq { scroll-margin-top: 150px; }
html { scroll-behavior: smooth; }
@media (max-width: 900px) {
  #home, #about, #menu, #cakes, #visit, #faq { scroll-margin-top: 108px; }
}

/* ========================================================================
   FOOTER
   One continuous cream ground, teal type and rules, orange CTA, the map as
   the focal point. No dark band, no scalloped edge.
   ======================================================================== */
.pampys-footer {
  --pf-cream: #F6F0E5;
  --pf-teal: #034F5A;
  --pf-orange: #E78022;
  background: var(--pf-cream);
  color: var(--pf-teal);
  padding: 84px 20px 40px;
}
.pf-inner { max-width: 1200px; margin: 0 auto; }

.pf-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.25fr 1fr;
  gap: 56px 44px;
  align-items: start;
  text-align: left;
}
.pf-col { min-width: 0; }

/* Headings keep the site's editorial serif; supporting copy is set in a
   clean sans for contrast at small sizes. */
.pf-h {
  margin: 0 0 18px;
  font-size: 26px;
  line-height: 1.2;
  color: var(--pf-teal);
  letter-spacing: normal;
}
.pampys-footer p,
.pampys-footer address,
.pampys-footer .pf-link,
.pampys-footer .pf-copy,
.pampys-footer .pf-cta {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
}

/* --- Brand --- */
.pf-logo { width: 104px; height: auto; display: block; margin-bottom: 18px; }
.pf-blurb {
  margin: 0 0 20px;
  max-width: 30ch;
  font-size: 15px;
  line-height: 1.65;
  color: #24525A;
}
.pf-social { display: flex; gap: 12px; }
.pf-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(3, 79, 90, .30);
  border-radius: 50%;
  color: var(--pf-teal);
  transition: background-color .18s ease, border-color .18s ease;
}
.pf-social-link svg { width: 18px; height: 18px; fill: currentColor; }
.pf-social-link:hover { background: rgba(3, 79, 90, .08); border-color: rgba(3, 79, 90, .55); }

/* --- Links --- */
.pampys-footer .pf-link {
  color: var(--pf-teal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}
.pampys-footer .pf-link:hover { border-bottom-color: rgba(3, 79, 90, .55); }
.pampys-footer a:focus-visible,
.pampys-footer .pf-cta:focus-visible {
  outline: 2px solid var(--pf-orange);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- Visit --- */
.pf-address { font-style: normal; display: grid; gap: 12px; justify-items: start; font-size: 16px; line-height: 1.6; }

/* --- Map --- */
.pf-map-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(3, 79, 90, .22);
  background: #E7E0D2;
}
.pf-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.pf-maplink { display: inline-block; margin-top: 14px; font-size: 15px; }

/* --- Hours + CTA --- */
.pf-hours-line { margin: 0 0 6px; font-size: 16px; line-height: 1.6; }
.pf-muted { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(3, 79, 90, .72); }
.pf-cta {
  display: inline-block;
  margin: 20px 0 12px;
  padding: 14px 30px;
  border-radius: 999px;
  background: var(--pf-orange);
  color: #fff !important;
  font-size: 16px;
  text-decoration: none;
  transition: background-color .18s ease;
}
.pf-cta:hover { background: #C96A15; }

/* --- Bottom row --- */
.pf-bottom {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(3, 79, 90, .22);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
}
.pf-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pf-nav .pf-link { font-size: 15px; }
.pf-copy { margin: 0; font-size: 14px; color: rgba(3, 79, 90, .72); }

/* --- Responsive: brand, hours/CTA, map, visit, then nav --- */
@media (max-width: 1024px) {
  .pf-grid { grid-template-columns: 1fr 1fr; gap: 44px 36px; }
}
@media (max-width: 720px) {
  .pampys-footer { padding: 60px 20px 32px; }
  .pf-grid { grid-template-columns: 1fr; gap: 38px; }
  .pf-brand { order: 1; }
  .pf-hours { order: 2; }
  .pf-map   { order: 3; }
  .pf-visit { order: 4; }
  .pf-bottom { margin-top: 44px; flex-direction: column; align-items: flex-start; }
}

/* The kit's global h2 sizing outranks the footer heading rule. */
.pampys-footer .pf-h { font-size: 26px !important; line-height: 1.2 !important; }
@media (max-width: 720px) { .pampys-footer .pf-h { font-size: 24px !important; } }

/* ========================================================================
   ABOUT CAROUSEL
   The four photos are 1.50, 1.62, 0.75 (portrait) and 1.40 — so the
   portrait one stretched its slide tall while the landscapes left dead
   space beside and below them. One shared ratio, cover-cropped, gives an
   even row that fills every slide.
   ======================================================================== */
#about .elementor-image-carousel .swiper-slide { height: auto; display: flex; }
#about .elementor-image-carousel .swiper-slide-inner {
  display: block;
  margin: 0;
  width: 100%;
}
#about .elementor-image-carousel .swiper-slide-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

/* ========================================================================
   SECTION EYEBROWS AS COLOUR BLOCKS
   About Us / Our Menu / Custom Cakes / Find Us — and the three that match
   them (From The Case, Come See Us, FAQs) so the page stays consistent —
   become solid orange chips instead of faint small caps.
   #C26A14 rather than the lighter brand orange: white sits at ~3.9:1 on it,
   which clears AA for text this size, and it still reads on the brown band.
   ======================================================================== */
#about .elementor-element-640f013a .elementor-heading-title,
#menu .elementor-element-3b77ee57 .elementor-heading-title,
#visit .elementor-element-7a7f1b73 .elementor-heading-title,
#faq .elementor-element-22e79735 .elementor-heading-title,
.elementor-element-2cb61c01 .elementor-heading-title,
.elementor-element-764beb03 .elementor-heading-title,
.pampys-cakes .pampys-cakes-eyebrow {
  display: inline-block;
  background: #C26A14;
  color: #FFFFFF !important;
  font-size: 20px !important;
  font-weight: 700;
  line-height: 1.25 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  padding: 11px 28px;
  border-radius: 999px;
  margin: 0 0 22px;
  box-shadow: 0 6px 18px rgba(10, 73, 84, .14);
}

/* The chips sit in centred blocks, so centre the wrapper rather than the
   inline-block itself. */
#about .elementor-element-640f013a,
#menu .elementor-element-3b77ee57,
#visit .elementor-element-7a7f1b73,
#faq .elementor-element-22e79735,
.elementor-element-2cb61c01,
.elementor-element-764beb03 { text-align: center; }
.pampys-cakes-head { text-align: center; }

@media (max-width: 720px) {
  #about .elementor-element-640f013a .elementor-heading-title,
  #menu .elementor-element-3b77ee57 .elementor-heading-title,
  #visit .elementor-element-7a7f1b73 .elementor-heading-title,
  #faq .elementor-element-22e79735 .elementor-heading-title,
  .elementor-element-2cb61c01 .elementor-heading-title,
  .elementor-element-764beb03 .elementor-heading-title,
  .pampys-cakes .pampys-cakes-eyebrow {
    font-size: 17px !important;
    padding: 9px 22px;
    letter-spacing: .13em !important;
  }
}

/* ========================================================================
   MARQUEE
   Scrolling band of shop facts under the hero. The track carries the list
   twice and travels exactly -50%, so it loops with no seam and no JS.
   ======================================================================== */
.pampys-marquee {
  background: #0A4954;
  overflow: hidden;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 253, 245, .12);
  border-bottom: 1px solid rgba(255, 253, 245, .12);
}
.pm-track {
  display: flex;
  width: max-content;
  animation: pm-scroll 46s linear infinite;
}
.pampys-marquee:hover .pm-track { animation-play-state: paused; }
.pm-run { display: flex; align-items: center; }
.pm-item {
  color: var(--pampys-ivory, #FFFDF5);
  font-size: 19px;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pm-sep {
  color: #E7962F;
  font-size: 13px;
  margin: 0 30px;
  position: relative;
  top: -1px;
}
@keyframes pm-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Honour a reduced-motion preference: hold the band still and let it scroll
   by hand instead of animating. */
@media (prefers-reduced-motion: reduce) {
  .pm-track { animation: none; }
  .pampys-marquee { overflow-x: auto; }
}

@media (max-width: 900px) {
  .pampys-marquee { padding: 13px 0; }
  .pm-item { font-size: 15px; letter-spacing: .11em; }
  .pm-sep { margin: 0 20px; }
}

/* ========================================================================
   VISIT SECTION
   Cream ground, photo-left / copy-right hero, three light action cards and
   one hours strip. Replaces the brown band.
   ======================================================================== */
#visit.pv {
  --pv-teal: #07515A;
  --pv-brown: #4A3023;
  --pv-cream: #FBF3E6;
  --pv-orange: #D97820;
  --pv-card: #FFFDF8;
  background: var(--pv-cream);
  padding: 104px 20px;
  text-align: left;
}
#visit .pv-inner { max-width: 1240px; margin: 0 auto; }

/* Body copy in a clean sans; headings keep the site's editorial serif. */
#visit .pv-lede, #visit .pv-card-body, #visit .pv-btn,
#visit .pv-eyebrow, #visit .pv-strip {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
}

/* --- Hero --- */
#visit .pv-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 76px;
}
#visit .pv-photo { margin: 0; }
#visit .pv-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 16px 38px rgba(74, 48, 35, .16);
}
#visit .pv-eyebrow {
  margin: 0 0 14px;
  color: var(--pv-orange);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
#visit .pv-title {
  margin: 0 0 22px;
  color: var(--pv-brown) !important;
  font-size: clamp(42px, 4.6vw, 68px) !important;
  line-height: 1.08 !important;
  letter-spacing: normal !important;
  text-align: left !important;
  text-wrap: initial;
}
#visit .pv-lede {
  margin: 0;
  max-width: 44ch;
  color: #5A4335;
  font-size: 18px;
  line-height: 1.66;
}

/* --- Cards --- */
#visit .pv-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
}
#visit .pv-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--pv-card);
  border: 1px solid rgba(7, 81, 90, .18);
  border-radius: 16px;
  padding: 24px;
  transition: box-shadow .2s ease, transform .2s ease;
}
#visit .pv-card:hover {
  box-shadow: 0 10px 26px rgba(74, 48, 35, .12);
  transform: translateY(-2px);
}
#visit .pv-icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--pv-teal);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 14px;
}
#visit .pv-card-title {
  margin: 0 0 10px;
  color: var(--pv-brown) !important;
  font-size: 25px !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
}
#visit .pv-card-body {
  margin: 0 0 20px;
  color: #5A4335;
  font-size: 16px;
  line-height: 1.6;
  flex: 1 1 auto;
}
#visit .pv-card-body p { margin: 0 0 8px; }
#visit .pv-card-body p:last-child { margin-bottom: 0; }
#visit .pv-inline { color: #5A4335; text-decoration: none; border-bottom: 1px solid rgba(7, 81, 90, .28); }
#visit .pv-inline:hover { border-bottom-color: var(--pv-teal); }

#visit .pv-btn {
  display: inline-block;
  align-self: stretch;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--pv-orange);
  color: #fff !important;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
#visit .pv-btn:hover { background: #E8891F; transform: translateY(-1px); }
#visit a:focus-visible {
  outline: 2px solid var(--pv-teal);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- Hours strip --- */
#visit .pv-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 54px 0 0;
  padding-top: 26px;
  border-top: 1px solid rgba(7, 81, 90, .20);
  color: var(--pv-teal);
  font-size: 16px;
}
#visit .pv-strip .pv-icon { width: 22px; height: 22px; margin: 0; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  #visit.pv { padding: 76px 20px; }
  #visit .pv-hero { gap: 44px; margin-bottom: 56px; }
  #visit .pv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #visit.pv { padding: 60px 20px; }
  #visit .pv-hero { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-bottom: 40px; }
  #visit .pv-cards { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  #visit .pv-strip { flex-direction: row; text-align: center; font-size: 15px; }
}

/* The kit capitalises every word in an h2 ("Visit The Bakery"); this
   section is written in sentence case and should stay that way. */
#visit .pv-title, #visit .pv-card-title { text-transform: none !important; }

/* ---- MENU: a lone card on the last row (e.g. Arabic Coffee, 7th in Cuban
   Coffee) sits in the middle column, not hard left. Desktop 3-col grid only. */
@media (min-width: 1025px) {
  #menu .e-n-tabs-content .e-grid > .e-con-inner > .e-child:last-child:nth-child(3n+1) { grid-column: 2; }
}

/* ---- VISIT, brown (2026-10-09): owner asked for Find Us in a brownish tone
   again. Same layout as the mockup; ground, cards and type re-inked. */
#visit.pv { background: #4A3426; }
#visit .pv-eyebrow { color: #F0A65A; }
#visit .pv-title, #visit .pv-card-title { color: #FFFDF5 !important; }
#visit .pv-lede, #visit .pv-card-body, #visit .pv-inline { color: #EADBC8; }
#visit .pv-inline { border-bottom-color: rgba(234, 219, 200, .4); }
#visit .pv-inline:hover { border-bottom-color: #FFFDF5; }
#visit .pv-card { background: #5C4333; border-color: rgba(255, 253, 245, .14); }
#visit .pv-card:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }
#visit .pv-icon { stroke: #E9C48A; }
#visit .pv-photo img { box-shadow: 0 16px 38px rgba(0, 0, 0, .35); }
#visit .pv-strip { color: #FFFDF5; border-top-color: rgba(255, 253, 245, .22); }
#visit .pv-btn { background: #C26A14; }
#visit .pv-btn:hover { background: #D97820; }
#visit a:focus-visible { outline-color: #FFFDF5; }

/* ---- HERO photo (2026-10-09): Cuban sandwich. On a tall phone crop, frame
   the cut face (right of centre) rather than the bread end. */
@media (max-width: 900px) {
  .elementor-1732 .elementor-element.elementor-element-6c498fda:not(.elementor-motion-effects-element-type-background),
  .elementor-1732 .elementor-element.elementor-element-6c498fda > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-position: 68% center !important;
  }
}

/* ========================================================================
   PAMPY'S COFFEE PAGE (coffee.html, markup in coffee.js)
   Home page palette: teal ground, cream, Pampy's orange chips, brown band,
   ivory type. Times throughout, like the rest of the site.
   ======================================================================== */
.pc {
  --pc-teal: #0A4954;
  --pc-cream: #F9F2E5;
  --pc-sand: #DDD8CD;
  --pc-ivory: #FFFDF5;
  --pc-orange: #DB7D29;
  --pc-chip: #C26A14;
  --pc-brown: #4A3426;
  --pc-gold: #E9C48A;
  font-family: "Times New Roman", Times, serif;
  color: var(--pc-teal);
  background: var(--pc-cream);
  text-align: center;
}
.pc *, .pc h1, .pc h2, .pc h3, .pc h4 { font-family: "Times New Roman", Times, serif !important; letter-spacing: normal; }
.pc h1, .pc h2, .pc h3, .pc h4 { text-transform: none !important; text-wrap: balance; }
.pc p { margin: 0 0 14px; line-height: 1.65; font-size: 18px; }
.pc section { scroll-margin-top: 150px; }
.pc-inner { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }
.pc-sec { padding: clamp(64px, 8vw, 104px) 0; }
.pc-head { max-width: 760px; margin: 0 auto 48px; }

.pc-chip {
  display: inline-block;
  margin: 0 0 18px !important;
  padding: 8px 22px;
  border-radius: 999px;
  background: var(--pc-chip);
  color: #fff;
  font-size: 18px !important;
  font-weight: 700;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  line-height: 1.3 !important;
}
.pc-title {
  margin: 0 0 18px;
  color: var(--pc-teal) !important;
  font-size: clamp(34px, 4vw, 52px) !important;
  line-height: 1.12 !important;
  font-weight: 400 !important;
}
.pc-lede { font-size: 19px !important; }
.pc-sub { margin: 64px 0 24px; font-size: 30px !important; font-weight: 400 !important; color: var(--pc-teal) !important; }

.pc-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 26px; }
.pc-btn {
  display: inline-block;
  padding: 13px 30px;
  border-radius: 999px;
  border: 2px solid var(--pc-orange);
  background: var(--pc-orange);
  color: #fff !important;
  font-size: 17px;
  text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
.pc-btn:hover { background: #E8891F; border-color: #E8891F; transform: translateY(-1px); }
.pc-btn-ghost { background: transparent; border-color: currentColor; color: inherit !important; }
.pc-btn-ghost:hover { background: rgba(255, 253, 245, .12); border-color: currentColor; }

/* Hero: teal panel, ivory type, photo right — same family as the home hero. */
.pc-hero { background: linear-gradient(100deg, #10514C 0%, var(--pc-teal) 60%); color: var(--pc-ivory); padding: clamp(56px, 7vw, 96px) 0; text-align: left; }
.pc-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.pc-hero-eyebrow { color: var(--pc-gold); text-transform: uppercase; letter-spacing: .2em !important; font-size: 15px !important; margin-bottom: 18px !important; }
.pc-hero-title { margin: 0 0 22px; color: var(--pc-ivory) !important; font-size: clamp(42px, 5.4vw, 74px) !important; line-height: 1.04 !important; font-weight: 400 !important; }
.pc-hero-lede { color: #EDE4D3; font-size: 19px !important; max-width: 46ch; }
.pc-hero .pc-btns { justify-content: flex-start; }
.pc-hero .pc-btn-ghost { color: var(--pc-ivory) !important; }
.pc-hero-photo { margin: 0; }
.pc-hero-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; box-shadow: 0 20px 44px rgba(0, 0, 0, .3); }

/* Four features */
.pc-features { background: var(--pc-cream); }
.pc-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pc-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.pc-feature { padding: 8px 6px; }
.pc-num { display: block; color: var(--pc-orange); font-size: 46px; line-height: 1; margin-bottom: 12px; }
.pc-feature h3, .pc-note h4, .pc-drink-card h3, .pc-brew-item h3 { margin: 0 0 10px; color: var(--pc-teal) !important; font-size: 25px !important; font-weight: 400 !important; line-height: 1.2 !important; }
.pc-feature p { font-size: 17px; }

/* Story split */
.pc-story { background: var(--pc-ivory); }
.pc-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.pc-photo { margin: 0; }
.pc-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; box-shadow: 0 16px 38px rgba(74, 52, 38, .16); }
.pc-checks { list-style: none; padding: 0; margin: 22px auto 0; display: inline-grid; gap: 10px; text-align: left; }
.pc-checks li { position: relative; padding-left: 32px; font-size: 18px; }
.pc-checks li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--pc-orange); font-weight: 700; }

/* Bags */
.pc-bags { background: var(--pc-cream); }
.pc-bag { display: flex; flex-direction: column; align-items: center; padding: 20px 20px 26px; border: 1px solid var(--pc-teal); background: var(--pc-cream); }
.pc-bag img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: 18px; }
.pc-bag h3 { margin: 0; color: var(--pc-orange) !important; font-size: 26px !important; font-weight: 400 !important; }
.pc-size { margin: 4px 0 2px !important; text-transform: uppercase; letter-spacing: .14em !important; font-size: 14px !important; }
.pc-price { margin: 0 0 12px !important; padding-bottom: 12px; width: 100%; border-bottom: 1px solid var(--pc-teal); font-size: 30px !important; }
.pc-bag p:not(.pc-size):not(.pc-price) { flex: 1 1 auto; }
.pc-note { padding: 22px 18px; background: var(--pc-ivory); border-radius: 16px; border: 1px solid rgba(10, 73, 84, .14); }
.pc-note p { font-size: 17px; margin: 0; }

/* Pours: menu-board list on the menu section's sand ground */
.pc-pours { background: var(--pc-sand); }
.pc-pour-list { max-width: 820px; margin: 0 auto; display: grid; gap: 22px; text-align: left; }
.pc-pour-row { display: flex; align-items: baseline; gap: 12px; }
.pc-pour-name { color: var(--pc-orange); font-size: 26px; }
.pc-pour-dots { flex: 1 1 auto; border-bottom: 2px dotted rgba(10, 73, 84, .4); transform: translateY(-6px); }
.pc-pour-price { font-size: 24px; white-space: nowrap; }
.pc-pour p { margin: 4px 0 0; font-size: 17px; }

/* How to drink it */
.pc-drink { background: var(--pc-cream); }
.pc-drink-card { padding: 28px 22px; background: var(--pc-ivory); border-radius: 16px; border-top: 4px solid var(--pc-orange); box-shadow: 0 10px 26px rgba(74, 52, 38, .08); }
.pc-kicker { color: var(--pc-chip); text-transform: uppercase; letter-spacing: .14em !important; font-size: 13px !important; margin-bottom: 8px !important; }
.pc-drink-card p:last-child { font-size: 16.5px; margin: 0; }

/* The roast: brown band, like Find Us */
.pc-roast { background: linear-gradient(rgba(74, 52, 38, .9), rgba(74, 52, 38, .9)), url("../images/coffee/bags-black.jpg") center / cover; color: #EADBC8; }
.pc-roast-inner { max-width: 820px; }
.pc-roast .pc-title { color: var(--pc-ivory) !important; }
.pc-roast p:not(.pc-chip) { font-size: 19px; }

/* Brewing notes */
.pc-brew { background: var(--pc-ivory); }
.pc-brew-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
.pc-brew-item { padding: 24px 20px; border: 1px solid rgba(10, 73, 84, .18); border-radius: 16px; background: var(--pc-cream); }
.pc-brew-item p { font-size: 16.5px; margin: 0; }

/* Closing CTA */
.pc-cta { background: var(--pc-teal); color: #EDE4D3; }
.pc-cta .pc-title { color: var(--pc-ivory) !important; }
.pc-cta a:not(.pc-btn) { color: var(--pc-gold); }
.pc-cta .pc-btn-ghost { color: var(--pc-ivory) !important; }

@media (max-width: 1024px) {
  .pc-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pc-hero { text-align: center; }
  .pc-hero-grid, .pc-split { grid-template-columns: minmax(0, 1fr); }
  .pc-hero .pc-btns { justify-content: center; }
  .pc-hero-lede { margin-left: auto; margin-right: auto; }
  .pc-grid3, .pc-grid4 { grid-template-columns: minmax(0, 1fr); }
  .pc-photo img { aspect-ratio: 4 / 3; }
  .pc section { scroll-margin-top: 108px; }
  .pc-pour-name { font-size: 22px; }
}
/* Five brewing notes: one row of five on wide screens, centred rows below. */
.pc-brew-list { display: flex !important; flex-wrap: wrap; justify-content: center; }
.pc-brew-item { flex: 0 1 calc((100% - 4 * 22px) / 5); min-width: 0; }
@media (max-width: 1100px) { .pc-brew-item { flex-basis: calc((100% - 2 * 22px) / 3); } }
@media (max-width: 760px)  { .pc-brew-item { flex-basis: 100%; } }

/* ---- Coffee banner: background video (same clip as pampys-coffee.surge.sh).
   Teal wash from the left keeps the ivory type readable; the still photo
   sits underneath until the player starts or if YouTube is blocked. */
.pc-hero-video { position: relative; overflow: hidden; min-height: clamp(560px, 72vh, 760px); display: flex; align-items: center;
  background: #0A4954 url("../images/coffee/bags-wood.jpg") center / cover; }
.pc-video { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.pc-video.is-playing { opacity: 1; }
.pc-video iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0; width: 100%; height: 100%; }
.pc-hero-video::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(10, 73, 84, .94) 0%, rgba(10, 73, 84, .82) 38%, rgba(10, 73, 84, .45) 70%, rgba(10, 73, 84, .25) 100%); }
.pc-hero-video > .pc-inner { position: relative; z-index: 2; width: 100%; }
.pc-hero-video .pc-hero-grid { grid-template-columns: minmax(0, 640px); }
@media (max-width: 760px) {
  .pc-hero-video::after { background: rgba(10, 73, 84, .78); }
}

/* ==================================================================
   PAMPY'S APP — COMING SOON (appsoon.js, build.js step 8c)
   Card after Custom Cakes, modelled on craftycrustfl.com's app band.
   ================================================================== */
.pampys-app {
  background: #F6F0E5;
  padding: 96px 20px;
  scroll-margin-top: 150px;
}
.pampys-app-card {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 48px;
  background: #fff;
  border-radius: 40px;
  padding: 56px 64px;
  box-shadow: 0 30px 70px -40px rgba(10, 73, 84, .35), 0 2px 10px rgba(74, 52, 38, .05);
  overflow: hidden;
  position: relative;
}
.pampys-app-card::after {          /* soft copper glow behind the phone */
  content: "";
  position: absolute;
  right: -120px; top: 50%;
  width: 520px; height: 520px;
  transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(219, 125, 41, .16), rgba(219, 125, 41, 0));
  pointer-events: none;
}
.pampys-app-logos { display: flex; align-items: center; gap: 14px; }
.pampys-app-logos img { display: block; width: auto; }
.pampys-app-logo-p { height: 92px; margin: -14px -10px -14px -16px; }   /* logo PNG has a wide transparent margin */
.pampys-app-logo-h { height: 64px; }
.pampys-app-x { color: #9a8a7c; font-size: 26px; font-weight: 300; line-height: 1; }
.pampys-app-eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 26px 0 0;
  color: var(--pampys-orange);
  font-size: 15px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.pampys-app-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--pampys-orange);
  box-shadow: 0 0 0 0 rgba(219, 125, 41, .55);
  animation: pampysAppPulse 2.2s ease-out infinite;
}
@keyframes pampysAppPulse {
  0%   { box-shadow: 0 0 0 0 rgba(219, 125, 41, .55); }
  70%  { box-shadow: 0 0 0 12px rgba(219, 125, 41, 0); }
  100% { box-shadow: 0 0 0 0 rgba(219, 125, 41, 0); }
}
.pampys-app-title {
  margin: 12px 0 0;
  color: #0A4954;
  font-family: inherit;
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 400;
  line-height: 1.05;
}
.pampys-app-title em { display: block; color: var(--pampys-orange); font-style: italic; }
.pampys-app-lede { margin: 20px 0 0; max-width: 470px; color: #4A3426; font-size: 19px; line-height: 1.6; }
.pampys-app-badges { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.pampys-app-badge {
  position: relative;
  display: block;
  border-radius: 12px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pampys-app-badge img { display: block; height: 56px; width: auto; }
.pampys-app-badge:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .45); }
.pampys-app-badge:focus-visible { outline: 3px solid var(--pampys-orange); outline-offset: 3px; }
.pampys-app-soon {
  position: absolute; top: -9px; right: -8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--pampys-orange);
  color: #fff;
  font: 600 11px/1.3 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 4px 10px -4px rgba(185, 99, 25, .8);
}
.pampys-app-notify {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px;
  color: #0A4954 !important;
  font-size: 17px;
  text-decoration: underline;
  text-decoration-color: rgba(10, 73, 84, .3);
  text-underline-offset: 5px;
}
.pampys-app-notify:hover { color: var(--pampys-orange-dark) !important; text-decoration-color: currentColor; }

/* ---- phone mockup (decorative, aria-hidden) ---- */
.pampys-app-visual { position: relative; z-index: 1; display: flex; justify-content: center; padding-top: 18px; }
.pampys-app-ribbon {
  position: absolute; top: -8px; left: 50%; z-index: 2;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 7px 16px;
  border-radius: 999px;
  background: #0A4954;
  color: #FFFDF5;
  font: 600 12px/1.2 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .06em;
  box-shadow: 0 10px 22px -12px rgba(10, 73, 84, .9);
}
.pa-phone {
  position: relative;
  width: 284px; height: 580px;
  border-radius: 46px;
  background: #111;
  padding: 11px;
  box-shadow: 0 40px 70px -30px rgba(10, 73, 84, .55), inset 0 0 0 2px #2b2b2b;
  transform: rotate(-3deg);
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
.pa-notch { position: absolute; top: 19px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 20px; background: #111; z-index: 2; }
.pa-screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: #FBF7F0; padding: 14px 14px 0; }
.pa-status { display: flex; justify-content: space-between; align-items: center; padding: 2px 10px 0; color: #111; font-size: 12px; font-weight: 600; }
.pa-status-r { display: flex; gap: 3px; }
.pa-status-r i { width: 4px; height: 9px; border-radius: 1px; background: #111; }
.pa-status-r i:nth-child(1) { height: 5px; margin-top: 4px; }
.pa-status-r i:nth-child(2) { height: 7px; margin-top: 2px; }
.pa-top { display: flex; align-items: center; gap: 7px; margin: 18px 0 8px; }
.pa-top img { height: 26px !important; width: 26px !important; }
.pa-top span { font-size: 14px; font-weight: 700; letter-spacing: .2em; color: #1d1d1f; }
.pa-hi { margin: 0; color: #0A4954; font-size: 15px; font-weight: 700; }
.pa-q { margin: 1px 0 10px; color: #6e6259; font-size: 11px; }
.pa-hero { position: relative; height: 92px; border-radius: 14px; overflow: hidden; }
.pa-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; display: block; }
.pa-hero span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 10px 7px;
  background: linear-gradient(transparent, rgba(10, 73, 84, .88));
  color: #fff; font-size: 12px; font-weight: 700;
}
.pa-h { margin: 12px 0 6px; color: #1d1d1f; font-size: 12px; font-weight: 700; }
.pa-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.pa-row { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(74, 52, 38, .1); }
.pa-row img { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; flex: none; }
.pa-row-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.pa-row-txt b { color: #1d1d1f; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-row-txt small { color: #8a7d72; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-row-txt i { color: #0A4954; font-size: 11px; font-style: normal; font-weight: 700; margin-top: 2px; }
.pa-add { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--pampys-orange); color: #fff; font-size: 16px; line-height: 22px; text-align: center; font-weight: 600; }
.pa-tabs {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-around;
  padding: 10px 6px 18px;
  background: #fff;
  border-top: 1px solid #efe7dc;
  color: #a39488; font-size: 9px; font-weight: 600;
}
.pa-tabs span::before { content: ""; display: block; width: 16px; height: 16px; margin: 0 auto 3px; border-radius: 5px; background: currentColor; opacity: .35; }
.pa-tabs .on { color: var(--pampys-orange); }
.pa-tabs .on::before { opacity: 1; }

@media (max-width: 900px) {
  .pampys-app { padding: 64px 16px; scroll-margin-top: 108px; }
  .pampys-app-card { grid-template-columns: 1fr; gap: 36px; padding: 36px 24px 44px; border-radius: 28px; text-align: center; }
  .pampys-app-card::after { right: 50%; top: auto; bottom: -160px; transform: translateX(50%); }
  .pampys-app-logos, .pampys-app-eyebrow, .pampys-app-badges { justify-content: center; }
  .pampys-app-logo-p { height: 78px; }
  .pampys-app-logo-h { height: 52px; }
  .pampys-app-lede { margin-left: auto; margin-right: auto; font-size: 17px; }
  .pampys-app-badge img { height: 50px; }
  .pa-phone { transform: none; width: 262px; height: 536px; }
}
@media (max-width: 380px) {
  .pampys-app-badge img { height: 44px; }
}

/* The kit styles img/h2/p/span globally (auto heights, Title Case, serif);
   pin this block's own values. */
.pampys-app img, .pampys-notify img { max-width: none !important; }
.pampys-app .pampys-app-logo-p { height: 116px !important; width: auto !important; margin: -24px -16px -24px -22px; }
.pampys-app .pampys-app-logo-h { height: 64px !important; width: auto !important; }
.pampys-app .pampys-app-badge img { height: 56px !important; width: auto !important; }
.pampys-app .pa-row img { width: 46px !important; height: 46px !important; }
.pampys-app .pa-hero img { width: 100% !important; height: 100% !important; }
.pampys-app-title, .pampys-notify-title, .pampys-notify-done-h { text-transform: none !important; }
.pa-phone, .pa-phone *, .pampys-app-ribbon, .pampys-app-soon { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important; }
.pampys-notify .pampys-notify-logos img { height: 66px !important; width: auto !important; }
.pampys-notify .pampys-notify-logos img + span + img { height: 50px !important; }
@media (max-width: 900px) {
  .pampys-app .pampys-app-logo-p { height: 100px !important; margin: -20px -14px; }
  .pampys-app .pampys-app-logo-h { height: 52px !important; }
  .pampys-app .pampys-app-badge img { height: 50px !important; }
}
@media (max-width: 380px) { .pampys-app .pampys-app-badge img { height: 44px !important; } }

/* ---- notify-me pop-up ---- */
html.pampys-notify-open { overflow: hidden; }
.pampys-notify {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .2s ease;
}
.pampys-notify[hidden] { display: none; }
.pampys-notify.is-in { opacity: 1; }
.pampys-notify-backdrop { position: absolute; inset: 0; background: rgba(23, 33, 36, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.pampys-notify-box {
  position: relative;
  width: 100%; max-width: 440px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 34px 34px 28px;
  border-radius: 28px;
  background: #FFFDF5;
  text-align: center;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55);
  transform: translateY(14px) scale(.97);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.pampys-notify.is-in .pampys-notify-box { transform: none; }
.pampys-notify-x {
  position: absolute; top: 12px; right: 12px;
  width: 38px; height: 38px;
  border: 0 !important; border-radius: 50% !important;
  background: rgba(10, 73, 84, .08) !important;
  color: #0A4954 !important;
  font: 400 26px/38px -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
  padding: 0 !important;
  text-align: center;
  cursor: pointer;
}
.pampys-notify-x:hover { background: rgba(10, 73, 84, .16) !important; }
.pampys-notify-logos { display: flex; align-items: center; justify-content: center; gap: 8px; color: #9a8a7c; font-size: 20px; }
.pampys-notify-logos img { display: block; height: 66px; width: auto; }
.pampys-notify-logos img + span + img { height: 50px; }
.pampys-notify-eyebrow { margin: 6px 0 0; color: var(--pampys-orange); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; }
.pampys-notify-title { margin: 6px 0 0; color: #0A4954; font-family: inherit; font-size: 40px; font-weight: 400; line-height: 1.1; }
.pampys-notify-text { margin: 12px 0 0; color: #4A3426; font-size: 17px; line-height: 1.55; }
.pampys-notify-form { display: flex; gap: 8px; margin-top: 22px; }
.pampys-notify .pampys-notify-form input[type="email"] {
  flex: 1; min-width: 0;
  height: 52px;
  margin: 0;
  padding: 0 18px !important;
  border: 1.5px solid #d9cbb8 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #1d1d1f !important;
  font: 16px/1.2 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
  box-shadow: none !important;
}
.pampys-notify .pampys-notify-form input[type="email"]:focus { outline: none; border-color: #0A4954 !important; box-shadow: 0 0 0 3px rgba(10, 73, 84, .15) !important; }
.pampys-notify .pampys-notify-form button,
.pampys-notify .pampys-notify-ok {
  flex: none;
  height: 52px;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--pampys-orange) !important;
  color: #fff !important;
  font: 600 16px/52px -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
  transition: background-color .2s ease;
}
.pampys-notify .pampys-notify-form button:hover,
.pampys-notify .pampys-notify-ok:hover { background: var(--pampys-orange-dark) !important; }
.pampys-notify .pampys-notify-form button:disabled { opacity: .7; cursor: default; }
.pampys-notify-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.pampys-notify-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pampys-notify-msg { min-height: 1.4em; margin: 10px 0 0; color: #B3261E; font-size: 14px; }
.pampys-notify-msg:empty { min-height: 0; margin: 0; }
.pampys-notify-fine { margin: 12px 0 0; color: #8a7d72; font-size: 13px; }
.pampys-notify-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-top: 16px;
  border-radius: 50%;
  background: #0A4954; color: #FFFDF5;
  font-size: 28px;
}
.pampys-notify-done-h { margin: 12px 0 0; color: #0A4954; font-size: 24px; }
.pampys-notify .pampys-notify-ok { margin-top: 20px; min-width: 140px; }
@media (max-width: 480px) {
  .pampys-notify-box { padding: 30px 20px 22px; border-radius: 24px; }
  .pampys-notify-form { flex-direction: column; }
  .pampys-notify .pampys-notify-form input[type="email"] { flex: none; width: 100%; }
  .pampys-notify .pampys-notify-form button { width: 100%; }
  .pampys-notify-title { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .pampys-app-dot { animation: none; }
  .pampys-notify, .pampys-notify-box, .pampys-app-badge { transition: none; }
}