/*
Theme Name: Ollie Child
Theme URI: https://olliewp.com
Description: Ollie child theme for Shuga-Me Desserts.
Author: Black Tiger Digital
Author URI: https://blacktigerdigital.com
Template:     ollie
Version: 1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ollie-child
*/

/* ============ REQUIRED CSS (only what theme.json cannot express) ============ */

/* Gravity Forms honeypot ("My URL" field). REQUIRED. Hides it from humans;
   bots fill it and are rejected by the gform_validation filter. */
.contact-url {
  visibility: hidden;
  position: absolute;
  left: -9999px;
}

/* Base inline icon (references the inlined SVG sprite via <use>). Inherits color. */
.icon {
  width: 1.25em;
  height: 1.25em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: currentColor;
}

/* ============================================================================
   SHUGA-ME DESSERTS  (migrated from LiveCanvas/PicoStrap)
   Only what theme.json cannot express. Colors reference the palette tokens
   (plum/berry/pink/rose/gold/cream/ink) so a swatch edit restyles all.
   ============================================================================ */

/* Eyebrow / kicker label above section headings. */
.shuga-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--wp--preset--color--gold-deep);
  margin-bottom: 0.75rem;
}

/* Contrast (WCAG 2.1 AA). Brand gold (#C9A227) is only 2.4:1 on our light
   bands, so eyebrow text defaults to gold-deep. Bright gold is restored on the
   dark bands where it clears 4.5:1 (5.5:1 on plum). Berry is a mid-tone where
   gold fails too, so it takes cream. Keyed off the rendered background class so
   it covers every pattern and every already-placed section. The !important is
   required to beat core's .has-gold-color preset utility. */
.shuga-eyebrow.has-gold-color {
  color: var(--wp--preset--color--gold-deep) !important;
}
.wp-block-cover .shuga-eyebrow.has-gold-color,
.has-plum-background-color .shuga-eyebrow.has-gold-color,
.has-plum-deep-background-color .shuga-eyebrow.has-gold-color,
.has-ink-background-color .shuga-eyebrow.has-gold-color {
  color: var(--wp--preset--color--gold) !important;
}
.has-berry-background-color .shuga-eyebrow.has-gold-color {
  color: var(--wp--preset--color--cream) !important;
}
/* Section eyebrows (centered) get wider tracking and a flanking rule on each
   side, matching the original brand treatment. */
.shuga-eyebrow.has-text-align-center {
  display: block;
  letter-spacing: 0.3em;
}
.shuga-eyebrow.has-text-align-center::before,
.shuga-eyebrow.has-text-align-center::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  vertical-align: middle;
  margin: 0 0.6rem;
  background: var(--wp--preset--color--plum);
  opacity: 0.3;
}
/* Specialty tiles are too narrow for the flanking lines + wide tracking, which
   wraps labels like "Banana Pudding & More". Drop the lines and tighten the
   gold eyebrow so each label sits on one line. */
.shuga-tile .shuga-eyebrow.has-text-align-center::before,
.shuga-tile .shuga-eyebrow.has-text-align-center::after {
  display: none;
}
.shuga-tile .shuga-eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* ---- Flavor Grid: sand band, white cards with a cream dot + name, hover lift,
   one signature (gradient) card. Matches the live /cupcakes/ design. ---- */
.shuga-flavor-grid {
  max-width: 960px;
  margin-inline: auto;
}
.shuga-flavor-card {
  background: #fff;
  border-radius: 14px;
  padding: 1.25rem 1rem;
  text-align: center;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.shuga-flavor-card:hover {
  transform: translateY(-4px);
  border-color: var(--wp--preset--color--gold);
  box-shadow: 0 18px 40px -20px rgba(76, 28, 72, 0.35);
}
.shuga-flavor-card__dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin: 0 auto 0.6rem !important;
  background: var(--wp--preset--color--cream);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.3s ease;
}
.shuga-flavor-card:hover .shuga-flavor-card__dot {
  transform: scale(1.1);
}
.shuga-flavor-card__name {
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1.25;
  color: var(--wp--preset--color--plum);
}
.shuga-flavor-card--signature {
  background: linear-gradient(135deg, var(--wp--preset--color--plum) 0%, var(--wp--preset--color--plum-deep) 100%);
  color: #fff;
}
.shuga-flavor-card--signature::before {
  content: "SIGNATURE";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  font-weight: 800;
  color: var(--wp--preset--color--gold);
  background: rgba(0, 0, 0, 0.2);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}
.shuga-flavor-card--signature .shuga-flavor-card__dot {
  background: rgba(201, 162, 39, 0.2);
}
.shuga-flavor-card--signature .shuga-flavor-card__name {
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .shuga-flavor-card,
  .shuga-flavor-card__dot {
    transition: none;
  }
  .shuga-flavor-card:hover,
  .shuga-flavor-card:hover .shuga-flavor-card__dot {
    transform: none;
  }
}

/* Mini + portfolio galleries: force each image to a 1:1 square with rounded
   corners. Works for any number of images the client adds. */
.shuga-mini-grid figure.wp-block-image,
.shuga-portfolio-grid figure.wp-block-image {
  border-radius: 14px;
  overflow: hidden;
  margin: 0;
}
.shuga-mini-grid figure.wp-block-image img,
.shuga-portfolio-grid figure.wp-block-image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 14px;
}

/* Hero glass-pill badge (matches the live .hero-kicker). White uppercase label
   in a frosted pill with a gold pip. Centered via fit-content + auto margins. */
.shuga-hero-badge {
  display: flex;
  width: fit-content;
  margin: 0 auto 1.75rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.shuga-hero-badge__pip {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wp--preset--color--gold);
  box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.25);
}
/* The home hero gets extra breathing room below the badge (tuned for its tall
   cover); interior heroes keep the modest default above. Scoped by the
   front-page body class so it also applies to the already-placed home hero. */
.home .shuga-hero-badge,
.front-page .shuga-hero-badge { margin-bottom: 4.25rem; }
@media (min-width: 782px) {
  .home .shuga-hero-badge,
  .front-page .shuga-hero-badge { margin-bottom: 10rem; }
}

/* Gold accents in the hero: the italic word in the headline and the trust
   stat values (4.9, 1,000+, 100+, From Scratch). Labels stay white. */
.shuga-hero-headline em {
  color: var(--wp--preset--color--gold);
  font-style: italic;
}
.shuga-hero-trust {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.shuga-hero-trust strong { color: var(--wp--preset--color--gold); }

/* Buttons. theme.json sets the filled-button padding, but core gives outline
   buttons their own higher-specificity padding, so match it here. Plus a gap
   so two buttons sitting inline never touch. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
  padding: 0.85em 2em;
}
.wp-block-buttons.is-layout-flex { gap: 0.75rem 1rem; }
/* All buttons grow slightly on hover/focus (motion-safe). */
.wp-block-button__link {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link:hover,
  .wp-block-button__link:focus-visible { transform: none; }
}

/* Short divider rule under a section intro. */
.shuga-divider {
  width: 80px;
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--gold);
  margin: 1.25rem 0;
}
.shuga-divider--center { margin-inline: auto; }
.shuga-divider--left { margin-inline: 0; }

/* Stat block: oversized number + small label. */
.shuga-stat { text-align: center; }
.shuga-stat .n {
  font-weight: 800;
  line-height: 1;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.25rem);
  color: var(--wp--preset--color--plum);
}
.shuga-stat .n small { font-size: 0.5em; color: var(--wp--preset--color--gold); }
.shuga-stat .label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wp--preset--color--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---- Event Types: equal-height cards (the columns stretch, so let each card
   fill its column height). ---- */
.wp-block-column:has(> .shuga-event-card) {
  display: flex;
}
.shuga-event-card {
  flex: 1;
}

/* ---- Trust List: white cards with a gradient badge, equal height in a grid.
   Matches the live /event-catering/ "What's Included". ---- */
.shuga-trust-grid {
  max-width: 1040px;
  margin-inline: auto;
}
.shuga-trust-card {
  height: 100%;
  padding: 1.75rem 1.5rem;
  background: #fff;
  border: 1px solid rgba(76, 28, 72, 0.08);
  border-radius: 14px;
  text-align: left;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.shuga-trust-card:hover {
  transform: translateY(-4px);
  border-color: var(--wp--preset--color--gold);
  box-shadow: 0 18px 40px -20px rgba(76, 28, 72, 0.35);
}
.shuga-trust-card__badge {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin: 0 0 0.25rem !important;
  background: linear-gradient(135deg, var(--wp--preset--color--plum), var(--wp--preset--color--plum-deep));
  color: var(--wp--preset--color--gold);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  line-height: 1;
}
.shuga-trust-card h3 {
  color: var(--wp--preset--color--plum);
  font-weight: 800;
  font-size: 1.05rem;
}
.shuga-trust-card p {
  color: var(--wp--preset--color--ink);
  font-size: 0.92rem;
  line-height: 1.55;
}
@media (max-width: 640px) {
  .shuga-trust-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 641px) and (max-width: 900px) {
  .shuga-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---- How It Works: horizontal timeline. Purple circular nodes on a gold rail,
   "when" label, title, body. Matches the live /event-catering/. The step markup
   drops its old sand-card look (overridden below). ---- */
.shuga-timeline__step {
  text-align: center;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 0.5rem !important;
}
.shuga-timeline__node {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 1.25rem !important;
  background: var(--wp--preset--color--plum);
  color: var(--wp--preset--color--gold);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1;
  border: 4px solid #fff;
  box-shadow: 0 10px 24px -10px rgba(76, 28, 72, 0.6);
  position: relative;
  z-index: 1;
}
.shuga-timeline__step h3 {
  color: var(--wp--preset--color--plum);
  font-weight: 800;
  font-size: 1.05rem;
}
.shuga-timeline__step p:not(.shuga-timeline__node) {
  color: var(--wp--preset--color--ink);
  font-size: 0.92rem;
  line-height: 1.55;
}
.shuga-timeline__when {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--gold);
  font-weight: 700;
  margin-bottom: 0.4rem;
}
/* The gold rail behind the nodes (desktop only). */
.shuga-timeline .wp-block-columns {
  position: relative;
}
@media (min-width: 782px) {
  .shuga-timeline .wp-block-columns::before {
    content: "";
    position: absolute;
    top: 32px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: var(--wp--preset--color--gold);
    z-index: 0;
  }
}

/* ---- Catering Minimums: an icon square above each item, added via ::before so
   the markup is untouched. Gold-tinted square on the plum band, emoji centered. ---- */
.shuga-minimums .wp-block-column::before {
  content: "";
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  margin: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--wp--preset--color--plum-deep), #200f1c);
  border: 1px solid rgba(201, 162, 39, 0.4);
  font-size: 1.5rem;
  line-height: 1;
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.55);
}
.shuga-minimums .wp-block-column:nth-child(1)::before { content: "\1F465"; }
.shuga-minimums .wp-block-column:nth-child(2)::before { content: "\1F4C5"; }
.shuga-minimums .wp-block-column:nth-child(3)::before { content: "\1F4CD"; }

/* ---- Event Types: boosted cards - cream card, gradient icon box, hover lift +
   gold border + corner glow, and a gold guest-count pill. Styled off the existing
   markup (emoji = first paragraph, guest count = the berry paragraph). ---- */
.shuga-event-card {
  background: var(--wp--preset--color--cream) !important;
  border-radius: 18px !important;
  text-align: center;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.shuga-event-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at top right, rgba(201, 162, 39, 0.15), transparent 70%);
  pointer-events: none;
}
.shuga-event-card:hover {
  transform: translateY(-6px);
  border-color: var(--wp--preset--color--gold);
  box-shadow: 0 22px 48px -22px rgba(76, 28, 72, 0.4);
}
.shuga-event-card > p.has-x-large-font-size {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  margin: 0 auto 1rem !important;
  background: linear-gradient(135deg, var(--wp--preset--color--plum), var(--wp--preset--color--plum-deep));
  display: grid;
  place-items: center;
  font-size: 1.7rem !important;
  transition: transform 0.3s ease;
}
.shuga-event-card:hover > p.has-x-large-font-size {
  transform: scale(1.1) rotate(-5deg);
}
.shuga-event-card h3 {
  font-weight: 900 !important;
  font-size: 1.2rem;
}
.shuga-event-card h3 a {
  color: var(--wp--preset--color--plum);
  text-decoration: none;
}
.shuga-event-card .has-berry-color {
  display: inline-block;
  color: var(--wp--preset--color--gold) !important;
  background: rgba(201, 162, 39, 0.16);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.7rem !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .shuga-event-card:hover,
  .shuga-event-card:hover > p.has-x-large-font-size {
    transform: none;
  }
}

/* ---- Local Story: two-column "our story" with a white credentials card
   (gradient top bar, numbered proof points, owner quote). ---- */
.shuga-story-title em {
  color: var(--wp--preset--color--gold);
  font-style: italic;
  font-weight: 800;
}
.shuga-creds-card {
  position: relative;
  overflow: hidden;
  padding: 2.5rem 2rem;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 26px 52px -26px rgba(76, 28, 72, 0.45);
}
.shuga-creds-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(to right, var(--wp--preset--color--gold), var(--wp--preset--color--plum), var(--wp--preset--color--gold));
}
.shuga-creds-card__title {
  font-size: 1.15rem;
  margin: 0 0 1.25rem !important;
}
.shuga-cred {
  align-items: flex-start !important;
  gap: 1rem !important;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(76, 28, 72, 0.09);
}
.shuga-creds-list > .shuga-cred:last-child {
  border-bottom: 0;
}
.shuga-cred__num {
  flex: 0 0 auto;
  min-width: 3.25rem;
  margin: 0 !important;
  color: var(--wp--preset--color--gold);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1.05;
}
.shuga-cred__text {
  flex: 1 1 auto;
}
.shuga-cred__label {
  margin: 0 !important;
  color: var(--wp--preset--color--plum);
  font-weight: 800;
  font-size: 0.98rem;
}
.shuga-cred__desc {
  margin: 0.1rem 0 0 !important;
  color: var(--wp--preset--color--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}
.shuga-creds-card__quote {
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(76, 28, 72, 0.12);
}
.shuga-creds-card__quote-text {
  margin: 0 !important;
  color: var(--wp--preset--color--plum);
  font-style: italic;
  font-weight: 600;
  line-height: 1.5;
}
.shuga-creds-card__cite {
  margin: 0.5rem 0 0 !important;
  color: var(--wp--preset--color--gold);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- Quote Builder: plum gradient band with translucent glass item cards and
   gold accents. Matches the live /event-catering/ "Build Your Dessert Table". ---- */
.shuga-builder {
  background: linear-gradient(135deg, var(--wp--preset--color--plum) 0%, var(--wp--preset--color--plum-deep) 100%) !important;
  position: relative;
  overflow: hidden;
}
.shuga-builder::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -10%;
  width: 60%;
  height: 180%;
  background: radial-gradient(closest-side, rgba(201, 162, 39, 0.2), transparent 70%);
  pointer-events: none;
}
.shuga-builder::after {
  content: "";
  position: absolute;
  bottom: -30%;
  right: -5%;
  width: 40%;
  height: 140%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.04), transparent 70%);
  pointer-events: none;
}
.shuga-builder > * {
  position: relative;
  z-index: 1;
}
.shuga-builder h2 em {
  font-style: italic;
  color: var(--wp--preset--color--gold);
  font-weight: 800;
}
.shuga-builder .shuga-lift {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 14px !important;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.shuga-builder .shuga-lift:hover {
  background: rgba(201, 162, 39, 0.2) !important;
  border-color: var(--wp--preset--color--gold);
  transform: translateY(-4px);
}
.shuga-builder .shuga-lift .has-x-large-font-size {
  font-size: 2rem !important;
}
.shuga-builder .shuga-lift h3,
.shuga-builder .shuga-lift h3 a {
  color: #fff !important;
}
.shuga-builder .shuga-lift .has-muted-color {
  color: var(--wp--preset--color--gold) !important;
}

/* ---- Box Builder: white "how it works" card with a gold/plum top bar and
   three gold-numbered steps, on a sand band. Matches the live /sweet-treats/. ---- */
/* Higher-specificity + !important padding so WP's has-global-padding utility
   (added to the constrained card group) can't override the card's own padding. */
.shuga-box .shuga-box__card {
  position: relative;
  overflow: hidden;
  max-width: 920px;
  margin-inline: auto;
  padding: 3rem 2rem !important;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 48px -24px rgba(76, 28, 72, 0.4);
}
/* Steps: exactly three even columns on desktop, single column on mobile. The
   grid group and each step drop their global padding so the row stays even. */
.shuga-box .shuga-box__steps > .wp-block-group,
.shuga-box .shuga-box__step {
  padding: 0 !important;
}
@media (max-width: 640px) {
  .shuga-box .shuga-box__steps {
    grid-template-columns: 1fr !important;
  }
}
.shuga-box__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(to right, var(--wp--preset--color--gold), var(--wp--preset--color--plum), var(--wp--preset--color--gold));
}
.shuga-box__card-title {
  color: var(--wp--preset--color--plum);
  font-weight: 900;
  font-size: 1.5rem;
}
.shuga-box__step {
  text-align: center;
}
.shuga-box__step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin: 0 auto 1rem !important;
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--plum-deep);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1;
}
.shuga-box__step h3 {
  color: var(--wp--preset--color--plum);
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 0.4rem;
}
.shuga-box__step p {
  color: var(--wp--preset--color--ink);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
}
.shuga-box__cta {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(76, 28, 72, 0.12);
}

/* ---- Occasion chips (Shuga Linked Chips): cream pill, plum text, party
   prefix, plum/gold hover lift. Matches the live /services/ design. ---- */
.wp-block-buttons:has(.shuga-chip) {
  gap: 0.6rem;
}
.shuga-chip .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background-color: var(--wp--preset--color--cream);
  color: var(--wp--preset--color--plum);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid rgba(76, 28, 72, 0.1);
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease, transform 0.2s ease;
}
.shuga-chip .wp-block-button__link::before {
  content: "🎉";
  font-size: 0.9em;
  line-height: 1;
}
.shuga-chip .wp-block-button__link:hover,
.shuga-chip .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--plum);
  color: var(--wp--preset--color--gold);
  border-color: var(--wp--preset--color--plum);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .shuga-chip .wp-block-button__link {
    transition: none;
  }
  .shuga-chip .wp-block-button__link:hover,
  .shuga-chip .wp-block-button__link:focus-visible {
    transform: none;
  }
}

/* Gutter between the left intro column and the right FAQ accordion column.
   Targets the columns that contain FAQ items, so it applies to the teaser and
   the /faq/ page, for both patterns and placed instances. */
.wp-block-columns:has(.shuga-faq-item) {
  column-gap: clamp(2.5rem, 5vw, 4.5rem) !important;
  row-gap: 2.5rem !important;
}

/* FAQ accordion (core Details block). Accessible, no JS. */
.shuga-faq-item {
  margin-bottom: 0.75rem;
  border: 1px solid rgba(76, 28, 72, 0.12);
  border-radius: 12px;
  overflow: hidden;
  background: var(--wp--preset--color--white);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.shuga-faq-item:hover {
  border-color: rgba(76, 28, 72, 0.25);
  box-shadow: 0 18px 40px -20px rgba(76, 28, 72, 0.35);
}
.shuga-faq-item > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--wp--preset--color--plum);
}
.shuga-faq-item > summary::-webkit-details-marker { display: none; }
.shuga-faq-item > summary::after {
  content: "+";
  flex: none;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--wp--preset--color--gold);
  transition: transform 0.25s ease;
}
.shuga-faq-item[open] > summary::after { transform: rotate(45deg); }
.shuga-faq-item > p {
  margin: 0;
  padding: 0 1.5rem 1.35rem;
  color: var(--wp--preset--color--body);
  font-size: 0.98rem;
  line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) {
  .shuga-faq-item > summary::after { transition: none; }
}

/* ---- Full FAQ page: sticky TOC + categorized accordion groups ---- */
.shuga-faq-toc {
  position: sticky;
  top: 100px;
  background: var(--wp--preset--color--sand);
  border: 1px solid rgba(76, 28, 72, 0.08);
  border-radius: 14px;
  padding: 1.5rem;
}
.shuga-faq-toc__label {
  display: block;
  margin: 0 0 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(76, 28, 72, 0.12);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--plum);
}
.shuga-faq-toc ul { list-style: none; margin: 0; padding: 0; }
.shuga-faq-toc li { margin: 0; }
.shuga-faq-toc a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.shuga-faq-toc a:hover,
.shuga-faq-toc a.is-active {
  color: var(--wp--preset--color--plum);
  border-left-color: var(--wp--preset--color--gold);
  background: rgba(255, 255, 255, 0.7);
}
.shuga-faq-toc__ask {
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(76, 28, 72, 0.12);
}
.shuga-faq-toc__ask a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-left: 2px solid var(--wp--preset--color--gold);
  color: var(--wp--preset--color--gold);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.shuga-faq-toc__ask a:hover {
  color: var(--wp--preset--color--plum);
  background: var(--wp--preset--color--gold);
}
@media (max-width: 991px) {
  .shuga-faq-toc { position: static; }
}

.shuga-faq-category { margin-bottom: 3rem; scroll-margin-top: 110px; }
.shuga-faq-category:last-child { margin-bottom: 0; }
.shuga-faq-category > h2 {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--wp--preset--color--gold);
  color: var(--wp--preset--color--plum);
  font-weight: 900;
  font-size: clamp(1.4rem, 2.5vw, 1.75rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.shuga-faq-category > h2 .hash {
  color: var(--wp--preset--color--gold);
  font-weight: 700;
  font-size: 0.85em;
  opacity: 0.7;
}
.shuga-faq-category .shuga-faq-item { scroll-margin-top: 110px; }
/* Gutter between the "On This Page" TOC and the questions. Matches the contact
   page's column gap. Set in CSS (with !important) so it also applies to any
   already-placed instance of the pattern, which keeps its own baked-in gap. */
.wp-block-columns:has(.shuga-faq-toc) {
  column-gap: var(--wp--preset--spacing--60) !important;
}

/* Announcement marquee (header). Pauses on hover/focus and for reduced motion. */
.shuga-marquee {
  background: var(--wp--preset--color--plum);
  color: var(--wp--preset--color--cream);
  overflow: hidden;
  padding: 0.5rem 0;
}
.shuga-marquee__track {
  display: inline-flex;
  gap: 2.5rem;
  white-space: nowrap;
  will-change: transform;
  animation: shuga-marquee 40s linear infinite;
}
.shuga-marquee:hover .shuga-marquee__track,
.shuga-marquee:focus-within .shuga-marquee__track { animation-play-state: paused; }
.shuga-marquee__item { font-size: 0.85rem; font-weight: 600; }
.shuga-marquee__item .dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--wp--preset--color--gold); vertical-align: middle;
}
@keyframes shuga-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .shuga-marquee__track { animation: none; white-space: normal; flex-wrap: wrap; }
}

/* Card hover lift, motion-safe (shared by service/occasion/gallery cards). */
.shuga-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.shuga-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(76, 28, 72, 0.15); }
@media (prefers-reduced-motion: reduce) {
  .shuga-lift, .shuga-lift:hover { transition: none; transform: none; }
}

/* Fan Favorites ("drive across town"), matched to the live site: glass cards on a
   plum gradient with a gold glow, gold uppercase CTA, whole card clickable, image
   zoom on hover. All scoped to .shuga-trio-card so it restyles the already-placed
   instance without a re-insert. */

/* Section: plum gradient band with a gold glow (live .shuga-trio). */
.wp-block-group.alignfull:has(.shuga-trio-card) {
  position: relative;
  overflow: hidden;
  background-color: var(--wp--preset--color--plum);
  background-image: linear-gradient(135deg, var(--wp--preset--color--plum) 0%, #36112f 100%);
}
.wp-block-group.alignfull:has(.shuga-trio-card)::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -10%;
  width: 60%;
  height: 180%;
  background: radial-gradient(closest-side, rgba(201, 162, 39, 0.2), transparent 70%);
  pointer-events: none;
}
.wp-block-group.alignfull:has(.shuga-trio-card) > * { position: relative; z-index: 1; }
.wp-block-group.alignfull:has(.shuga-trio-card) > .wp-block-group :is(h2, p):not(.shuga-eyebrow) { color: #fff; }
.wp-block-group.alignfull:has(.shuga-trio-card) > .wp-block-group h2 em { color: var(--wp--preset--color--gold); }

/* Card: translucent glass, equal height, whole card clickable, hover lift. */
.shuga-trio-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.shuga-trio-card:hover {
  transform: translateY(-6px);
  border-color: var(--wp--preset--color--gold) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
/* Full-bleed photo at the top (negate the card padding), zoom on hover. */
.shuga-trio-card__img {
  margin: calc(-1 * var(--wp--preset--spacing--40)) calc(-1 * var(--wp--preset--spacing--40)) 0 !important;
  overflow: hidden;
}
.shuga-trio-card__img img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0 !important;
  transition: transform 0.8s ease;
}
.shuga-trio-card:hover .shuga-trio-card__img img { transform: scale(1.06); }
/* Card text reads light on the glass; heading emphasis stays gold. */
.shuga-trio-card > h3 { color: #fff !important; }
.shuga-trio-card > h3 em { color: var(--wp--preset--color--gold) !important; font-style: italic; }
.shuga-trio-card > p:not(.shuga-eyebrow) { color: rgba(255, 255, 255, 0.8) !important; }
/* Card content is left-aligned (tag, title, description, CTA). */
.shuga-trio-card,
.shuga-trio-card > * { text-align: left !important; }
/* WP's constrained layout puts margin-inline:auto on group children, which centers
   each flex item. Reset it (but not on the full-bleed image) so content sits left. */
.shuga-trio-card > :not(.shuga-trio-card__img) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}
.shuga-trio-card > .wp-block-buttons { margin-top: auto; justify-content: flex-start !important; }
/* CTA: gold uppercase, left-aligned, with an arrow on the right. */
.shuga-trio-card .wp-block-button > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 0 !important;
  outline: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  background: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  color: var(--wp--preset--color--gold) !important;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.shuga-trio-card .wp-block-button > .wp-block-button__link::after {
  content: "\2192";
  font-size: 1.15em;
  line-height: 1;
}
.shuga-trio-card .wp-block-button > .wp-block-button__link:hover {
  color: var(--wp--preset--color--gold);
  transform: none;
}
/* Whole card clickable: stretch the CTA link over the card (via ::before so ::after stays the arrow). */
.shuga-trio-card .wp-block-button > .wp-block-button__link::before {
  content: "";
  position: absolute;
  inset: 0;
}

/* Catering spotlight preview tiles: dashed outline like the live site. The accent
   tile (+ Your Theme) inverts to plum with a gold name. */
.shuga-cater-tile { border: 1px dashed rgba(76, 28, 72, 0.18) !important; }
.shuga-cater-tile--accent { border-style: solid !important; border-color: var(--wp--preset--color--plum) !important; }
/* Quick-info rows: white rounded icon box beside the label + value. */
.shuga-cater-quick { display: flex; gap: 0.85rem; align-items: flex-start; }
.shuga-cater-quick-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px -6px rgba(76, 28, 72, 0.3);
}
.shuga-cater-quick__text { flex: 1; min-width: 0; }
.shuga-cater-quick__text > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }

/* ---- Services grid (white): live vertical link-cards, 3 across ---- */
.shuga-svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(76, 28, 72, 0.1);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.shuga-svc-card:hover {
  transform: translateY(-6px);
  border-color: var(--wp--preset--color--gold);
  box-shadow: 0 24px 48px -24px rgba(76, 28, 72, 0.4);
}
.shuga-svc-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--wp--preset--color--sand);
}
.shuga-svc-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(54, 17, 47, 0.15) 100%);
}
.shuga-svc-card__photo { margin: 0; height: 100%; }
.shuga-svc-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}
.shuga-svc-card:hover .shuga-svc-card__photo img { transform: scale(1.06); }
.shuga-svc-card__num {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--wp--preset--color--plum);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
}
.shuga-svc-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.75rem;
  padding: 1.75rem 1.5rem 1.5rem;
}
.shuga-svc-card__body > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }
.shuga-svc-card__body h3 { font-size: 1.35rem; line-height: 1.1; margin: 0; }
.shuga-svc-card__pitch { font-size: 0.96rem; line-height: 1.55; margin: 0; }
.shuga-svc-card__sig {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  background: var(--wp--preset--color--sand);
  color: var(--wp--preset--color--plum);
  padding: 0.5rem 0.85rem;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
}
.shuga-svc-card__sig b {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--gold);
  font-weight: 800;
}
.shuga-svc-card__body > .wp-block-buttons { margin-top: auto; width: 100%; }
.shuga-svc-card__cta-btn { width: 100%; }
.shuga-svc-card__cta {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.25rem 0 0 !important;
  border: 0 !important;
  outline: none !important;
  background: none !important;
  border-radius: 0 !important;
  border-top: 1px solid rgba(76, 28, 72, 0.1) !important;
  color: var(--wp--preset--color--plum) !important;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.shuga-svc-card__cta::after {
  content: "\2192";
  font-size: 1.2rem;
  color: var(--wp--preset--color--gold);
  transition: transform 0.25s ease;
}
.shuga-svc-card:hover .shuga-svc-card__cta::after { transform: translateX(4px); }
.shuga-svc-card__cta::before { content: ""; position: absolute; inset: 0; }
/* Fixed 3 across (6 cards = 3x2) on desktop; collapse to 2 then 1 on smaller screens. */
@media (max-width: 900px) {
  .shuga-svc-grid.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .shuga-svc-grid.is-layout-grid { grid-template-columns: 1fr !important; }
}

/* ---- Why block: sand band, white proof-pillar cards with gradient icons ---- */
.shuga-why-media {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 48px -24px rgba(76, 28, 72, 0.4);
}
.shuga-why-media img { width: 100%; height: auto; display: block; transition: transform 0.8s ease; }
.shuga-why-media:hover img { transform: scale(1.04); }
.shuga-why-pillar {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(76, 28, 72, 0.1);
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.shuga-why-pillar:hover {
  transform: translateY(-3px);
  border-color: var(--wp--preset--color--gold);
  box-shadow: 0 18px 40px -20px rgba(76, 28, 72, 0.35);
}
.shuga-why-pillar__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--wp--preset--color--plum), #36112f);
  color: var(--wp--preset--color--gold);
  display: grid;
  place-items: center;
}
.shuga-why-pillar__icon svg { width: 22px; height: 22px; fill: currentColor; }
.shuga-why-pillar__text { min-width: 0; }
.shuga-why-pillar__text > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }
.shuga-why-pillar h3 { font-size: 1rem; line-height: 1.2; margin: 0 0 0.2rem; letter-spacing: -0.005em; }
.shuga-why-pillar p { font-size: 0.88rem; line-height: 1.5; margin: 0; }
@media (max-width: 600px) {
  .shuga-why-pillars.is-layout-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   WooCommerce (brand the default templates)
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button {
  background: var(--wp--preset--color--berry);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.85em 2em;
  transition: transform 0.2s ease, background 0.2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover {
  background: var(--wp--preset--color--plum);
  transform: translateY(-1px);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .checkout-button { background: var(--wp--preset--color--plum); }
/* Disabled buttons: keep full opacity with a solid muted fill instead of the
   washed-out 0.5 opacity, so white text keeps its contrast. */
.woocommerce a.button.disabled,
.woocommerce a.button:disabled,
.woocommerce a.button:disabled[disabled],
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce .single_add_to_cart_button.disabled,
.wc-block-components-button:disabled {
  opacity: 1 !important;
  background: var(--wp--preset--color--muted) !important;
  color: #fff !important;
  cursor: not-allowed;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--wp--preset--color--plum);
  font-weight: 800;
}
.woocommerce div.product p.price del { color: var(--wp--preset--color--muted); font-weight: 400; }
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce span.onsale {
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--plum);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  min-height: 0;
  min-width: 0;
  padding: 0.35rem 0.8rem;
  line-height: 1;
}
.woocommerce div.product form.cart .variations select,
.woocommerce .quantity .qty {
  border: 1px solid rgba(76, 28, 72, 0.2);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  background: #fff;
}
.woocommerce div.product form.cart .variations select:focus,
.woocommerce .quantity .qty:focus {
  outline: 2px solid var(--wp--preset--color--gold);
  outline-offset: 1px;
}
.woocommerce .quantity .qty {
  width: 5rem;
  min-width: 5rem;
  text-align: center;
}

/* ---- WooCommerce Cart & Checkout blocks (wc-block-*) ---- */
/* Block buttons: Proceed to Checkout, Place Order, Apply. */
.wc-block-components-button:not(.is-link) {
  background: var(--wp--preset--color--berry) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}
.wc-block-components-button:not(.is-link):hover { background: var(--wp--preset--color--plum) !important; }
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button { background: var(--wp--preset--color--plum) !important; }
/* Totals sidebar as a branded card. */
.wc-block-cart__sidebar .wc-block-components-sidebar {
  background: var(--wp--preset--color--sand);
  border: 1px solid rgba(76, 28, 72, 0.12);
  border-radius: 16px;
  padding: 1.5rem 1.5rem 1.75rem;
}
.wc-block-cart__totals-title,
.wc-block-components-checkout-order-summary__title {
  color: var(--wp--preset--color--plum) !important;
  font-weight: 800 !important;
}
/* Item rows. */
.wc-block-cart-item__image img { border-radius: 12px; }
.wc-block-components-product-name { color: var(--wp--preset--color--plum); font-weight: 700; text-decoration: none; }
a.wc-block-components-product-name:hover { color: var(--wp--preset--color--berry); }
.wc-block-cart-items__header { color: var(--wp--preset--color--muted); text-transform: uppercase; letter-spacing: 0.08em; }
/* Totals rows: emphasize the grand total. */
.wc-block-components-totals-item__label { color: var(--wp--preset--color--body); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--wp--preset--color--plum);
  font-weight: 800;
}
/* Inputs + quantity stepper. */
.wc-block-components-text-input input:focus,
.wc-block-components-quantity-selector input:focus { outline: 2px solid var(--wp--preset--color--gold); }
.wc-block-components-quantity-selector { border-radius: 10px; }
/* Empty-cart state. */
.wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block h2 { color: var(--wp--preset--color--plum); }
/* Breathing room: gap between the items column and the totals sidebar, roomier
   rows, and page padding so the cart isn't crammed under the header. */
.wp-block-woocommerce-cart { padding-top: 2.5rem; padding-bottom: 3rem; }
@media (min-width: 701px) {
  .wc-block-cart__main { padding-inline-end: 3rem !important; }
}
@media (max-width: 700px) {
  .wc-block-cart__sidebar { margin-top: 2rem; }
}
.wc-block-cart-items .wc-block-cart-items__row td {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}
.wc-block-cart-item__image { padding-inline-end: 1.25rem; }
.wc-block-components-totals-item { padding-block: 0.4rem; }
.wc-block-cart__sidebar { align-self: flex-start; }

/* ---- Classic cart & checkout (shortcode templates) ---- */
/* Air above/below the shortcode content so WooCommerce pages (account, cart,
   checkout, and any plain shortcode page) aren't jammed under the header or on
   top of the footer. */
.woocommerce-account .woocommerce,
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
  padding-top: 3rem;
  padding-bottom: 3.5rem;
}
/* Cart totals + checkout order review as branded cards. */
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
  background: var(--wp--preset--color--sand);
  border: 1px solid rgba(76, 28, 72, 0.12);
  border-radius: 16px;
  padding: 1.5rem 1.5rem 1.75rem;
}
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3#ship-to-different-address,
.woocommerce-checkout .woocommerce-billing-fields h3 {
  color: var(--wp--preset--color--plum);
  font-weight: 800;
}
/* Tables. */
.woocommerce table.shop_table {
  border-radius: 14px;
  border-color: rgba(76, 28, 72, 0.12);
  overflow: hidden;
}
.woocommerce table.shop_table th { color: var(--wp--preset--color--plum); }
.woocommerce table.cart img,
.woocommerce .woocommerce-order-details img { border-radius: 10px; width: 72px; }
.woocommerce a.remove {
  color: var(--wp--preset--color--berry) !important;
  border: 1px solid rgba(76, 28, 72, 0.2);
}
.woocommerce a.remove:hover { background: var(--wp--preset--color--berry) !important; color: #fff !important; }
/* Form fields. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
  border: 1px solid rgba(76, 28, 72, 0.2);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  min-height: 2.75rem;
  line-height: 1.4;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: 2px solid var(--wp--preset--color--gold);
  border-color: var(--wp--preset--color--gold);
}
.woocommerce form .form-row label { font-weight: 600; color: var(--wp--preset--color--plum); }
/* Two-column checkout: gap between customer details and order review. */
@media (min-width: 769px) {
  .woocommerce-checkout #customer_details { padding-inline-end: 2.75rem; }
}
.woocommerce-cart .cart-collaterals { margin-top: 2.5rem; }
/* Coupon + proceed buttons already branded by the .button rules above. */
.woocommerce div.product form.cart .variations th { font-weight: 800; color: var(--wp--preset--color--plum); }
.woocommerce div.product .product_title {
  color: var(--wp--preset--color--plum);
  font-weight: 900;
  letter-spacing: -0.015em;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: rgba(76, 28, 72, 0.12); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--wp--preset--color--sand);
  border-color: rgba(76, 28, 72, 0.12);
  border-radius: 10px 10px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: #fff; border-bottom-color: #fff; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--wp--preset--color--plum); font-weight: 700; }
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--wp--preset--color--gold);
  background: var(--wp--preset--color--sand);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--wp--preset--color--gold); }
.woocommerce .related > h2,
.woocommerce .upsells > h2 { color: var(--wp--preset--color--plum); font-weight: 900; }

/* Pickup lead-time notice (bakery-specific). */
.shuga-lead-time {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: var(--wp--preset--color--sand);
  border: 1px solid rgba(76, 28, 72, 0.12);
  color: var(--wp--preset--color--plum);
  font-size: 0.9rem;
  font-weight: 600;
}
.shuga-lead-time strong { font-weight: 800; }
.shuga-lead-time__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wp--preset--color--gold);
}
.shuga-lead-time--today .shuga-lead-time__dot { background: #2e7d32; }

/* ---- Custom single-product layout (shuga-product template) ---- */
.shuga-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: start;
}
.shuga-product div.product::before,
.shuga-product div.product::after { content: none !important; }
.shuga-product div.product > .woocommerce-product-gallery,
.shuga-product div.product > .summary {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
.shuga-product div.product > .woocommerce-tabs,
.shuga-product div.product > .related,
.shuga-product div.product > .upsells {
  grid-column: 1 / -1;
  margin-top: 2.5rem;
}
/* Gallery */
.shuga-product .woocommerce-product-gallery__wrapper { margin: 0; }
.shuga-product .woocommerce-product-gallery .woocommerce-product-gallery__image img { border-radius: 18px; }
.shuga-product .woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
}
.shuga-product .woocommerce-product-gallery .flex-control-thumbs li { list-style: none; width: 72px; margin: 0; }
.shuga-product .woocommerce-product-gallery .flex-control-thumbs img { border-radius: 10px; }
/* Summary */
.shuga-product .summary.entry-summary { display: flex; flex-direction: column; gap: 0.35rem; }
.shuga-product .summary .product_title,
.shuga-product .summary h1.entry-title {
  font-size: clamp(1.8rem, 1.2rem + 2.5vw, 2.8rem);
  color: var(--wp--preset--color--plum);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 0.25rem;
}
.shuga-product .summary .price { font-size: 1.55rem; margin: 0.25rem 0; }
.shuga-product .summary .woocommerce-product-details__short-description {
  color: var(--wp--preset--color--body);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0.75rem 0 0.25rem;
}
.shuga-product .summary form.cart { margin: 1.25rem 0 0.5rem; }
.shuga-product .summary .single_add_to_cart_button { font-size: 1rem; padding: 1em 2.75em; }
.shuga-product .summary .quantity { margin-right: 0.75rem; }
.shuga-product .summary table.variations { margin: 0.5rem 0 1rem; }
.shuga-product .summary table.variations td,
.shuga-product .summary table.variations th { border: 0; padding: 0.4rem 0; vertical-align: middle; }
.shuga-product .summary table.variations th.label { padding-right: 1.75rem; white-space: nowrap; }
.shuga-product .summary .reset_variations { color: var(--wp--preset--color--muted); font-size: 0.85rem; }
.shuga-product .summary .product_meta { margin-top: 1rem; font-size: 0.85rem; color: var(--wp--preset--color--muted); }
.shuga-product .woocommerce-tabs .panel { padding-top: 1.25rem; }
/* Related / upsells as brand cards */
.shuga-product ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
/* WooCommerce adds clearfix ::before/::after to ul.products. In a grid those
   empty pseudo-elements become cells and shove the first product to slot 2. */
.shuga-product ul.products::before,
.shuga-product ul.products::after { content: none !important; display: none !important; }
.shuga-product ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: #fff;
  border: 1px solid rgba(76, 28, 72, 0.1);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.shuga-product ul.products li.product:hover {
  transform: translateY(-4px);
  border-color: var(--wp--preset--color--gold);
  box-shadow: 0 18px 40px -20px rgba(76, 28, 72, 0.35);
}
.shuga-product ul.products li.product img { margin: 0 !important; border-radius: 0; }
.shuga-product ul.products li.product .woocommerce-loop-product__title {
  color: var(--wp--preset--color--plum);
  font-weight: 800;
  font-size: 1.05rem;
  padding: 1rem 1rem 0;
}
.shuga-product ul.products li.product .price { padding: 0 1rem; color: var(--wp--preset--color--plum); font-weight: 800; }
.shuga-product ul.products li.product .button { margin: 0.75rem 1rem 1rem; align-self: flex-start; }
.shuga-product .related > h2,
.shuga-product .upsells > h2 { margin-bottom: 1rem; }
@media (max-width: 860px) {
  .shuga-product div.product { grid-template-columns: 1fr; }
  .shuga-product ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .shuga-product ul.products { grid-template-columns: 1fr; }
}

/* ---- WooCommerce Cart & Checkout (block) ---- */
.wc-block-components-button.contained {
  background: var(--wp--preset--color--plum);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
}
.wc-block-components-button.contained:hover { background: var(--wp--preset--color--berry); }
.wc-block-components-button.is-link { color: var(--wp--preset--color--berry); }
.wc-block-components-checkout-step__title,
.wc-block-cart-items__header { color: var(--wp--preset--color--plum); font-weight: 800; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--wp--preset--color--plum); font-weight: 800; }
.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus,
.wc-block-components-select .wc-blocks-components-select__select:focus {
  outline: 2px solid var(--wp--preset--color--gold);
  outline-offset: 1px;
}
.wc-block-components-product-badge,
.wc-block-components-chip { background: var(--wp--preset--color--sand); color: var(--wp--preset--color--plum); }

/* Service cards: white tile, image left / copy right (core Columns), two
   across on desktop, one per row on tablet, image-over-copy on mobile. */
.shuga-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wp--preset--spacing--50);
  align-items: stretch;
}
@media (max-width: 900px) {
  .shuga-cards { grid-template-columns: 1fr; }
}

/* Let the inner columns fill the full tile height (so paired cards match). */
.shuga-card {
  display: flex;
  overflow: hidden;
}
.shuga-card > .wp-block-columns {
  flex: 1;
  margin: 0;
}

/* Image column: flush to the tile edge, image fills the full card height. */
.shuga-card__imgcol {
  display: flex;
  padding: 0;
}
.shuga-card__img { margin: 0; width: 100%; }
.shuga-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* When the columns stack on mobile, give the image a fixed ratio. */
@media (max-width: 781px) {
  .shuga-card__img img { height: auto; aspect-ratio: 3 / 2; }
}

/* Copy column: stacked content with the CTA pinned to the bottom. */
.shuga-card__body {
  display: flex;
  flex-direction: column;
}
.shuga-card__body .wp-block-buttons { margin-top: auto; }

/* Gold, uppercase lead line, larger than the dessert-type heading. */
.shuga-eyebrow--lg {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  margin-bottom: 0.25rem;
}
/* Dessert type: black, bold, smaller than the gold lead line. */
.shuga-card__type {
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem);
  line-height: 1.2;
}

/* Stats bar: two-tone numbers. The trailing symbol (star / plus) is gold and a
   touch smaller. Reset the browser's default yellow <mark> background. */
.shuga-stat-n mark {
  background: transparent;
  color: var(--wp--preset--color--gold);
  font-size: 0.75em;
  font-weight: 800;
}
/* Stats bar: vertical dividers between each stat, like the live site. */
.shuga-stats-grid > .wp-block-column { position: relative; }
.shuga-stats-grid > .wp-block-column + .wp-block-column::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 58%;
  background: rgba(76, 28, 72, 0.15);
}

/* Stats bar: 2 across / 2 rows on mobile instead of one cramped row. */
@media (max-width: 781px) {
  .shuga-stats-grid.is-not-stacked-on-mobile { flex-wrap: wrap !important; }
  .shuga-stats-grid > .wp-block-column { flex: 1 1 40% !important; }
  /* On the 2-up grid only draw a divider between the two columns in each row. */
  .shuga-stats-grid > .wp-block-column + .wp-block-column::before { content: none; }
  .shuga-stats-grid > .wp-block-column:nth-child(even)::before {
    content: "";
    position: absolute;
    left: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 58%;
    background: rgba(76, 28, 72, 0.15);
  }
}

/* Horizontal snap scroller (mini galleries). Keyboard + touch friendly. */
.shuga-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
}
.shuga-scroller > * { scroll-snap-align: start; }
@media (min-width: 992px) {
  .shuga-scroller { grid-auto-columns: minmax(0, 1fr); overflow: visible; }
}

/* Specialty / category tile: one whole-card link (stretched), uniform square
   image. Single tab stop per tile; visible focus ring for keyboard users. */
.shuga-tile { position: relative; overflow: hidden; height: 100%; }
.shuga-tile .wp-block-image,
.shuga-tile .wp-block-image img { margin: 0; display: block; width: 100%; }
.shuga-tile .wp-block-image img { aspect-ratio: 1 / 1; object-fit: cover; }
.shuga-tile h3 a { color: var(--wp--preset--color--plum); text-decoration: none; }
.shuga-tile h3 a::after { content: ""; position: absolute; inset: 0; }
.shuga-tile:hover h3 a { color: var(--wp--preset--color--berry); }
.shuga-tile:focus-within {
  outline: 2px solid var(--wp--preset--color--berry);
  outline-offset: 2px;
}

/* Horizontal carousel / scroller (fan favorites). Scrolls with swipe, trackpad,
   and the scrollbar out of the box; global.js adds keyboard arrow support and a
   focus ring. Snap points keep items aligned. */
.shuga-carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--wp--preset--spacing--30, 1rem);
  padding-bottom: 0.75rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--wp--preset--color--berry) transparent;
}
.shuga-carousel > * {
  flex: 0 0 auto;
  width: clamp(180px, 42vw, 240px);
  scroll-snap-align: start;
  margin: 0;
}
.shuga-carousel img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
.shuga-carousel:focus-visible {
  outline: 2px solid var(--wp--preset--color--berry);
  outline-offset: 4px;
}
/* Autoplay variant: continuous loop scrolls smoother without snap points. */
.shuga-carousel--auto { scroll-snap-type: none; }
.shuga-carousel--auto > * { scroll-snap-align: none; }
.shuga-carousel::-webkit-scrollbar { height: 8px; }
.shuga-carousel::-webkit-scrollbar-thumb { background: var(--wp--preset--color--berry); border-radius: 999px; }
.shuga-carousel::-webkit-scrollbar-track { background: transparent; }

/* Round, framed portrait (founder photo). Square-cropped circle with a gold ring. */
.shuga-portrait img {
  width: min(340px, 80%);
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: 50%;
  border: 6px solid var(--wp--preset--color--gold);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/* Numbered step badge for the "how it works" / timeline process. */
/* Numbered step badge (timeline / box builder): inline berry circle. */
.shuga-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--wp--preset--color--berry); color: #fff;
  font-weight: 800; font-size: 1.25rem;
}

/* How It Works: cream step cards on a white section. Here the number becomes a
   plum/gold badge straddling the card's top edge, with a connector arrow
   between steps on desktop. Scoped to .shuga-step-card so the timeline and box
   builder keep the inline badge above. */
.shuga-step-card {
  position: relative;
  height: 100%;
  margin-top: 1.5rem;
}
.shuga-step-card h3 { margin-top: 1rem; }
.shuga-step-card .shuga-step-num {
  position: absolute;
  top: -22px;
  left: 1.75rem;
  margin: 0;
  width: 48px;
  height: 48px;
  background: var(--wp--preset--color--plum);
  color: var(--wp--preset--color--gold);
  font-weight: 900;
  font-size: 1.1rem;
  box-shadow: 0 10px 24px -10px rgba(76, 28, 72, 0.6);
}
@media (min-width: 992px) {
  .shuga-step-card::after {
    content: "\2192";
    position: absolute;
    top: 50%;
    right: -0.75rem;
    transform: translate(50%, -50%);
    font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    color: var(--wp--preset--color--plum);
    opacity: 0.45;
    font-size: 1.6rem;
    line-height: 1;
    pointer-events: none;
  }
  .wp-block-columns > .wp-block-column:last-child .shuga-step-card::after { content: none; }
}

/* CTA / quote band: deep plum gradient with a soft gold glow (matches the
   original .shuga-quote-band). #36112f is the darker plum gradient stop. */
.shuga-quote-band {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(135deg, var(--wp--preset--color--plum) 0%, #36112f 100%);
}
.shuga-quote-band::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -5%;
  width: 40%;
  height: 160%;
  background: radial-gradient(closest-side, rgba(201, 162, 39, 0.18), transparent 70%);
  pointer-events: none;
}
.shuga-quote-band > * { position: relative; z-index: 1; }

/* ---- Contact section: framed form card + sand details card ---- */
.shuga-contact-card {
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(76, 28, 72, 0.1);
  box-shadow: 0 20px 50px -30px rgba(76, 28, 72, 0.3);
  padding: 2rem;
}
@media (min-width: 768px) { .shuga-contact-card { padding: 2.75rem; } }

.shuga-contact-details {
  position: relative;
  overflow: hidden;
  background: var(--wp--preset--color--sand);
  border: 1px solid rgba(76, 28, 72, 0.12);
  border-radius: 20px;
  padding: 2rem;
}
@media (min-width: 768px) { .shuga-contact-details { padding: 2.5rem; } }
@media (min-width: 992px) { .shuga-contact-details { position: sticky; top: 100px; } }
.shuga-contact-details::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201, 162, 39, 0.25), transparent 70%);
  pointer-events: none;
}
.shuga-contact-details > * { position: relative; z-index: 1; }

.shuga-contact-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(76, 28, 72, 0.08);
}
.shuga-contact-row:last-of-type { border-bottom: 0; }
.shuga-contact-row__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--wp--preset--color--plum), #36112f);
  color: var(--wp--preset--color--gold);
  box-shadow: 0 8px 20px -10px rgba(76, 28, 72, 0.5);
}
.shuga-contact-row__icon svg { width: 22px; height: 22px; fill: currentColor; }
.shuga-contact-row__body { flex: 1; min-width: 0; }
.shuga-contact-row__label {
  display: block;
  margin: 0 0 0.15rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--plum);
  font-weight: 800;
}
.shuga-contact-row__body p,
.shuga-contact-row__body .bt-address {
  margin: 0;
  color: var(--wp--preset--color--ink);
  font-weight: 600;
  line-height: 1.5;
  font-style: normal;
}
.shuga-contact-row__body a {
  color: var(--wp--preset--color--plum);
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--gold);
  text-underline-offset: 3px;
  font-weight: 700;
}
.shuga-contact-row__body a:hover { color: var(--wp--preset--color--gold); }

.shuga-contact-hours {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(76, 28, 72, 0.08);
  border-radius: 12px;
}
.shuga-contact-hours .bt-hours--table { width: 100%; border-collapse: collapse; }
.shuga-contact-hours th,
.shuga-contact-hours td { padding: 0.28rem 0; font-size: 0.92rem; font-weight: 400; border: 0; text-align: left; }
.shuga-contact-hours th { color: var(--wp--preset--color--ink); }
.shuga-contact-hours td { text-align: right; color: var(--wp--preset--color--plum); font-weight: 700; white-space: nowrap; }

.shuga-social-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.shuga-social-row a {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 2px solid var(--wp--preset--color--plum);
  color: var(--wp--preset--color--plum);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.shuga-social-row a:hover { background: var(--wp--preset--color--plum); color: #fff; transform: translateY(-2px); }

.shuga-fine {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(76, 28, 72, 0.08);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--wp--preset--color--muted);
}

/* Quote form: white shadowed form card + sand estimator sidebar with a gold glow. */
.shuga-quote-card {
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(76, 28, 72, 0.1);
  box-shadow: 0 20px 50px -30px rgba(76, 28, 72, 0.3);
  padding: 2rem;
}
@media (min-width: 768px) { .shuga-quote-card { padding: 2.75rem; } }
.shuga-estimator {
  position: relative;
  overflow: hidden;
  background: var(--wp--preset--color--sand);
  border: 1px solid rgba(76, 28, 72, 0.12);
  border-radius: 20px;
  padding: 2rem;
}
@media (min-width: 768px) { .shuga-estimator { padding: 2.5rem; } }
@media (min-width: 992px) { .shuga-estimator { position: sticky; top: 110px; } }
.shuga-estimator::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201, 162, 39, 0.25), transparent 70%);
  pointer-events: none;
}
.shuga-estimator > * { position: relative; z-index: 1; }
.shuga-estimator img {
  border-radius: 14px;
  box-shadow: 0 12px 30px -14px rgba(76, 28, 72, 0.4);
}
/* Plum pill badge at the top of the estimator card. */
.shuga-estimator-badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--wp--preset--color--plum);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
}

/* Framed map (Find Us section): rounded corners, soft shadow.
   Sits on the sand section band, so the frame backing is white to stay visible. */
.shuga-map-frame {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(76, 28, 72, 0.1);
  box-shadow: 0 20px 40px -20px rgba(76, 28, 72, 0.4);
  min-height: 420px;
  background: #fff;
  position: relative;
}
.shuga-map-frame iframe,
.shuga-map-frame .wpgmza-map-container,
.shuga-map-frame .wpgmza_map {
  width: 100% !important;
  height: 100%;
  min-height: 420px;
  display: block;
  border: 0;
}

/* ---- Feature-pair helpers (service / custom-cakes feature sections) ---- */
/* Gutter between the image and copy on the feature-pair sections (Flavors,
   Ingredients, Timing, Craft). Targets the split columns via the image hook so
   it applies to both the patterns and every placed instance. Nested grids
   (flavor tiles, stat cards) don't contain the image, so they keep their own gap. */
.wp-block-columns:has(.shuga-feature-img) {
  column-gap: clamp(2.5rem, 5vw, 4.5rem) !important;
  row-gap: 2.5rem !important;
}
/* Gap between the two Timing stat cards (48hrs / 2-4wk). Scoped to the columns
   that hold the stat cards directly, so the outer image/text columns are untouched. */
.wp-block-columns:has(> .wp-block-column > .shuga-statcard) {
  column-gap: 1.5rem !important;
  row-gap: 1rem !important;
}
/* Equal-height order-size cards (1 doz / 2-3 doz / 4+ doz): let each card fill
   its column so all three match the tallest. A transparent 2px border on every
   card reserves the space the featured card's gold border takes, so the number
   headings line up across all three. The "Most Popular" label is a floating
   badge (out of flow) so it doesn't push the featured number down. */
.wp-block-column:has(> .shuga-size-card) {
  display: flex;
}
.shuga-size-card {
  flex: 1;
  position: relative;
  border: 2px solid transparent;
}
/* Equal-height Grab-or-Gift cards: fill the column so all three match the
   tallest, keeping the icons pinned to the same top-left position. */
.wp-block-column:has(> .shuga-gift-card) {
  display: flex;
}
.shuga-gift-card {
  flex: 1;
}
/* Gutter between the copy and image on the Signature Flavor feature. */
.shuga-signature-cols {
  column-gap: clamp(2.5rem, 5vw, 4.5rem) !important;
  row-gap: 2.5rem !important;
}

/* ---- Signature Flavor: plum gradient band with a gold star tag, gold-italic
   flavor name, and a gold-framed image. Matches the live /cupcakes/ design. ---- */
.shuga-signature {
  background: linear-gradient(135deg, var(--wp--preset--color--plum) 0%, var(--wp--preset--color--plum-deep) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.shuga-signature::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -10%;
  width: 60%;
  height: 180%;
  background: radial-gradient(closest-side, rgba(201, 162, 39, 0.2), transparent 70%);
  pointer-events: none;
}
.shuga-signature::after {
  content: "";
  position: absolute;
  bottom: -20%;
  right: -5%;
  width: 40%;
  height: 120%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.05), transparent 70%);
  pointer-events: none;
}
.shuga-signature > * {
  position: relative;
  z-index: 1;
}
.shuga-signature__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--plum-deep);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
}
.shuga-signature__tag::before {
  content: "\2605";
}
.shuga-signature h2 {
  color: #fff;
}
.shuga-signature h2 em {
  font-style: italic;
  color: var(--wp--preset--color--gold);
  font-weight: 800;
}
.shuga-signature__body {
  color: rgba(255, 255, 255, 0.85);
}
.shuga-signature__img {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  margin: 0;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.shuga-signature__img img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.8s ease;
}
.shuga-signature__img:hover img {
  transform: scale(1.04);
}
.shuga-signature__img::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.4);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .shuga-signature__img img {
    transition: none;
  }
  .shuga-signature__img:hover img {
    transform: none;
  }
}
/* Equal-height menu category cards (Cookies / Cheesecakes / Parfaits): fill the
   column so all three match the tallest despite different flavor-list lengths. */
.wp-block-column:has(> .shuga-cat-card) {
  display: flex;
}
.shuga-cat-card {
  flex: 1;
}

/* ---- Catering Minimums: plum band, big gold labels, white values ---- */
/* !important overrides the block color utility classes (has-sand-background,
   has-plum-color, has-body-color) baked into the placed markup. */
.shuga-minimums {
  background: linear-gradient(135deg, var(--wp--preset--color--plum) 0%, var(--wp--preset--color--plum-deep) 100%) !important;
  padding-top: var(--wp--preset--spacing--50) !important;
  padding-bottom: var(--wp--preset--spacing--50) !important;
  position: relative;
  overflow: hidden;
}
.shuga-minimums::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -5%;
  width: 45%;
  height: 180%;
  background: radial-gradient(closest-side, rgba(201, 162, 39, 0.18), transparent 70%);
  pointer-events: none;
}
.shuga-minimums > * {
  position: relative;
  z-index: 1;
}
/* Gutter between the three cards. */
.shuga-minimums .wp-block-columns {
  gap: clamp(1rem, 2.5vw, 2rem) !important;
}
/* each item is a glass card laid out like the live: icon on the left, label
   stacked over value on the right. */
.shuga-minimums .wp-block-column {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.15rem;
  padding: 1.15rem 1.5rem !important;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  text-align: left;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.shuga-minimums .wp-block-column:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 162, 39, 0.5);
  background: rgba(255, 255, 255, 0.09);
}
/* small gold uppercase label (top-right) */
.shuga-minimums h3 {
  grid-column: 2;
  grid-row: 1;
  color: var(--wp--preset--color--gold) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  text-align: left !important;
  margin: 0 !important;
}
/* bold white value (bottom-right) */
.shuga-minimums p {
  grid-column: 2;
  grid-row: 2;
  color: #fff !important;
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.15rem) !important;
  font-weight: 800 !important;
  line-height: 1.25;
  text-align: left !important;
  margin: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  .shuga-minimums .wp-block-column:hover {
    transform: none;
  }
}
.shuga-size-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0.4em 1.1em;
  border-radius: 999px;
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--plum-deep);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 16px -6px rgba(76, 28, 72, 0.5);
}
.shuga-feature-img img {
  border-radius: 18px;
  box-shadow: 0 24px 48px -24px rgba(76, 28, 72, 0.4);
  display: block;
}
/* "and many more" emphasis inside the flavor-pair card. */
.shuga-flavor-card em {
  color: var(--wp--preset--color--gold);
  font-weight: 700;
  font-style: italic;
}
/* Featured flavor in the flavor grid. Add "shuga-flavor-signature" to a card's
   Advanced -> Additional CSS class(es) to highlight it (e.g. Turtle). */
.shuga-flavor-signature {
  border: 2px solid var(--wp--preset--color--gold);
  box-shadow: 0 14px 30px -16px rgba(201, 162, 39, 0.5);
}

/* Gold italic emphasis word in a heading (e.g. "Oakland County"). */
.shuga-em-gold em {
  color: var(--wp--preset--color--gold);
  font-style: italic;
  font-weight: 800;
}

/* "Popular orders" service link cards: 2-up grid, last card spans full width.
   Whole card is clickable via the stretched heading link. */
.shuga-orders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.shuga-orders-grid .shuga-order-card--wide { grid-column: 1 / -1; }
@media (max-width: 480px) { .shuga-orders-grid { grid-template-columns: 1fr; } }
.shuga-order-card {
  position: relative;
  height: 100%;
  padding: 1.1rem 1.25rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(76, 28, 72, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.shuga-order-card:hover {
  transform: translateY(-3px);
  border-color: var(--wp--preset--color--gold);
  box-shadow: 0 18px 40px -20px rgba(76, 28, 72, 0.35);
}
.shuga-order-card h4 {
  margin: 0 0 0.2rem;
  color: var(--wp--preset--color--plum);
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.2;
}
.shuga-order-card h4 a { color: inherit; text-decoration: none; }
.shuga-order-card h4 a::after { content: ""; position: absolute; inset: 0; }
.shuga-order-card p {
  margin: 0;
  color: var(--wp--preset--color--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}
/* Gold checkmark list. */
.shuga-checklist { list-style: none; padding-left: 0; margin: 0; }
.shuga-checklist li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
.shuga-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--wp--preset--color--gold);
  font-weight: 900;
}
/* Small timing stat cards. */
.shuga-statcard { text-align: center; }
.shuga-statcard__n {
  margin: 0;
  font-weight: 900;
  line-height: 1;
  font-size: 1.9rem;
  color: var(--wp--preset--color--plum);
}
.shuga-statcard__n mark {
  background: transparent;
  color: var(--wp--preset--color--gold);
  font-size: 0.6em;
  font-weight: 800;
}
.shuga-statcard__label {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink);
  font-weight: 600;
}

/* REQUIRED (a11y): WooCommerce's mini-cart drawer keeps aria-hidden="true" while
   its Close button and "Start shopping" link stay in the tab order, so keyboard
   users tab into an invisible drawer. aria-hidden hides from screen readers but
   does NOT remove focusability. visibility:hidden does, and it flips back to
   visible the moment WooCommerce sets aria-hidden="false" to open the drawer. */
.wc-block-mini-cart__drawer[aria-hidden="true"] {
  visibility: hidden;
}

/* ============================ HEADER ============================ */
/* REQUIRED: skip link. Off-canvas until focused, then pinned top-left. */
.shuga-skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transform: translateY(-200%);
  padding: 0.75rem 1.25rem;
  background: var(--wp--preset--color--plum);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-bottom-right-radius: 10px;
}
.shuga-skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--wp--preset--color--gold);
  outline-offset: -3px;
}

/* Flatten the part wrapper and grouping so only the nav bar is a top-level
   element that can stay sticky while the marquee below scrolls away. */
.site-header,
.shuga-header { display: contents; }
/* Only this bar is sticky. No scroll-shrink, so it never resizes or shifts. */
.shuga-header__bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid rgba(76, 28, 72, 0.08);
}
/* Offset the sticky position below the WP admin bar when logged in, so the bar
   doesn't slide up under it and push the content to the viewport edge. */
.admin-bar .shuga-header__bar { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .shuga-header__bar { top: 46px; }
}
.shuga-header__inner { gap: var(--wp--preset--spacing--40); }
.shuga-header .shuga-logo { margin: 0; }
.shuga-header .shuga-logo img { height: 58px; width: auto; display: block; }

/* Nav links: uppercase plum, gold on hover. */
.shuga-header .wp-block-navigation {
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.shuga-header .wp-block-navigation a { color: var(--wp--preset--color--plum); }
.shuga-header .wp-block-navigation a:hover { color: var(--wp--preset--color--gold); }

/* ---- Services dropdown ------------------------------------------------- */
/* Ollie's core-navigation.css styles the desktop submenu with !important and a
   3-class selector (.responsive-container:not(.is-menu-open) .submenu-container),
   e.g. border:none, min-width:225px. We match that selector + a .shuga-header
   prefix (4 classes) so our card wins. We do NOT set display, so Ollie's
   open/close toggle keeps working. */
.shuga-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
  flex-direction: column !important;
  gap: 0.2rem !important;
  min-width: 250px !important;
  margin-top: 0 !important;
  padding: 0.6rem !important;
  background: #ffffff !important;
  border: 1px solid rgba(76, 28, 72, 0.08) !important;
  border-top: 3px solid var(--wp--preset--color--gold) !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 60px -26px rgba(76, 28, 72, 0.55), 0 4px 14px rgba(76, 28, 72, 0.08) !important;
}
.shuga-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.shuga-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block !important;
  width: 100% !important;
  padding: 0.7rem 1rem !important;
  border-radius: 10px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: var(--wp--preset--color--plum) !important;
  transition: background 0.18s ease, color 0.18s ease;
}
.shuga-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.shuga-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
  background: var(--wp--preset--color--cream) !important;
  color: var(--wp--preset--color--berry) !important;
}

/* Mobile menu: slide-out drawer from the LEFT with a dimmed backdrop. */
@keyframes shugaDrawerIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.shuga-header .wp-block-navigation__responsive-container.is-menu-open {
  background: rgba(20, 8, 18, 0.5) !important;
}
.shuga-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(340px, 85vw);
  margin: 0;
  padding: 2.25rem 1.5rem;
  background: #fff;
  overflow-y: auto;
  box-shadow: 8px 0 40px rgba(0, 0, 0, 0.25);
  animation: shugaDrawerIn 0.25s ease;
}
.shuga-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--wp--preset--color--plum);
  text-transform: none;
  letter-spacing: normal;
}
@media (prefers-reduced-motion: reduce) {
  .shuga-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { animation: none; }
}

/* Right cluster: status pill, phone, CTA. */
.shuga-header__right { flex-wrap: nowrap; }
.shuga-header__phone { gap: 0.4rem; align-items: center; }
.shuga-header__phone p { margin: 0; }
.shuga-header__phone a {
  color: var(--wp--preset--color--plum);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.shuga-header__phone a:hover { color: var(--wp--preset--color--plum-deep); }
.shuga-header__phone-ico {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--wp--preset--color--gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Open/closed status pill (set live by global.js). */
.shuga-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--wp--preset--color--cream);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--ink);
  white-space: nowrap;
}
.shuga-status-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wp--preset--color--muted);
}
.shuga-status-pill.is-open { color: #1a7f37; }
.shuga-status-pill.is-open .dot { background: #1a7f37; }
.shuga-status-pill.is-closed { color: #8a3d1f; }
.shuga-status-pill.is-closed .dot { background: #8a3d1f; }

/* Progressive reveal: pill needs width, phone needs a bit more. */
@media (max-width: 1199px) { .shuga-status-pill { display: none; } }
@media (max-width: 781px) { .shuga-header__phone { display: none; } }

/* ---- Mobile header: logo left, nav toggle right ------------------------- */
/* Below 782px the phone and Get a Quote CTA move to the sticky bottom bar, so
   the whole right cluster comes out of the bar. The header inner is already a
   space-between flex row, so dropping it leaves exactly two children: the logo
   (left) and the nav hamburger (right). */
@media (max-width: 781px) {
  .shuga-header__right { display: none; }
  .shuga-header .shuga-logo img { height: 46px; }
}

/* Cart and Login belong in the slide-out expander, not the desktop nav bar.
   Scoped to >=782px on purpose: core's Navigation block only collapses to the
   hamburger below 600px, so between 600 and 781px there is no expander to open.
   Hiding them there would orphan the links with no way to reach them. Above
   782px the desktop row is real, so they hide there and live in the menu. */
@media (min-width: 782px) {
  .shuga-header .wp-block-navigation__responsive-container:not(.is-menu-open) .shuga-nav-account {
    display: none;
  }
}

/* ---- Sticky mobile contact bar (phones only) ---------------------------- */
.shuga-mobile-cta { display: none; }
@media (max-width: 781px) {
  .shuga-mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid rgba(76, 28, 72, 0.1);
    box-shadow: 0 -6px 24px rgba(76, 28, 72, 0.16);
  }
  .shuga-mobile-cta__btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px; /* AA tap target */
    padding: 0.85rem 0.75rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
  }
  .shuga-mobile-cta__btn--call {
    background: #fff;
    color: var(--wp--preset--color--plum);
    border: 2px solid var(--wp--preset--color--plum);
  }
  .shuga-mobile-cta__btn--quote {
    background: var(--wp--preset--color--plum);
    color: #fff;
    border: 2px solid var(--wp--preset--color--plum);
  }
  .shuga-mobile-cta__ico {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* Keep the bar from covering the end of the footer. */
  body { padding-bottom: 76px; }
}

/* ============================ FOOTER ============================ */
.shuga-footer { position: relative; overflow: hidden; }
/* Soft gold glow behind the deep-plum body. */
.shuga-footer::before {
  content: "";
  position: absolute;
  top: 18%;
  left: -10%;
  width: 50%;
  height: 70%;
  background: radial-gradient(closest-side, rgba(201, 162, 39, 0.1), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.shuga-footer > * { position: relative; z-index: 1; }

/* Newsletter: a floating gold card with depth for punch. Capped to the same
   width as the footer columns below so their edges line up. */
.shuga-newsletter {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(135deg, #d9b23d 0%, #c9a227 55%, #b89120 100%);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.55);
}
.shuga-newsletter__kicker { margin: 0 0 0.4rem; opacity: 0.75; }
.shuga-newsletter h2 { margin: 0 0 0.35rem; }
.shuga-newsletter p { color: var(--wp--preset--color--plum-deep); }
.shuga-newsletter > .wp-block-columns { margin: 0; }
/* Style the embedded Gravity Form to sit on the gold band. */
.shuga-newsletter .gform_wrapper { margin: 0; }
.shuga-newsletter .gform_wrapper .gfield_label,
.shuga-newsletter .gform_wrapper .gform_required_legend {
  color: var(--wp--preset--color--plum-deep);
  font-weight: 700;
}
.shuga-newsletter .gform_wrapper input[type="email"],
.shuga-newsletter .gform_wrapper input[type="text"] {
  background: #fff;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 0.8rem 1.1rem;
  color: var(--wp--preset--color--ink);
}
.shuga-newsletter .gform_wrapper input:focus {
  outline: none;
  border-color: var(--wp--preset--color--plum);
}
.shuga-newsletter .gform_wrapper .gform_footer input[type="submit"],
.shuga-newsletter .gform_wrapper .gform_button {
  background: var(--wp--preset--color--plum);
  color: #fff;
  font-weight: 800;
  border: 0;
  border-radius: 999px;
  padding: 0.85rem 1.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.shuga-newsletter .gform_wrapper .gform_footer input[type="submit"]:hover,
.shuga-newsletter .gform_wrapper .gform_button:hover {
  background: var(--wp--preset--color--plum-deep);
  transform: translateY(-2px);
}

/* Birthday is a plain date field (three MM/DD/YYYY number inputs, no datepicker
   JS). GF renders them as a grid row of sub-fields, so flatten that to a tight
   inline row and give the inputs the same white pill as the email field. */
.shuga-newsletter .gform_wrapper .gfield--input-type-datefield {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.shuga-newsletter .gform_wrapper legend.gfield_label {
  padding: 0;
}
.shuga-newsletter .gform_wrapper .ginput_complex.gform-grid-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
}
.shuga-newsletter .gform_wrapper .ginput_container_date.gform-grid-col {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  max-width: none;
}
/* MM and DD hold two digits, YYYY holds four. */
.shuga-newsletter .gform_wrapper .gfield_date_month,
.shuga-newsletter .gform_wrapper .gfield_date_day { width: 4.5rem; }
.shuga-newsletter .gform_wrapper .gfield_date_year { width: 6rem; }
/* Match the email input exactly so all four boxes line up on one baseline. */
.shuga-newsletter .gform_wrapper input[type="number"] {
  width: 100%;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 0.8rem 0.6rem;
  color: var(--wp--preset--color--ink);
  font: inherit;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
/* Spinner arrows crowd a two-character box. */
.shuga-newsletter .gform_wrapper input[type="number"]::-webkit-outer-spin-button,
.shuga-newsletter .gform_wrapper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
@media (max-width: 640px) {
  .shuga-newsletter .gform_wrapper .gfield_date_month,
  .shuga-newsletter .gform_wrapper .gfield_date_day,
  .shuga-newsletter .gform_wrapper .gfield_date_year { flex: 1 1 0; width: auto; }
}

/* Footer body: gold uppercase section headings, light links that gild on hover. */
.shuga-footer__main h4 {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 800;
  margin-bottom: 1.1rem;
}
/* Kill list bullets/indent in the footer nav columns. */
.shuga-footer__main .wp-block-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.shuga-footer__main .wp-block-list li { margin-bottom: 0.5rem; }
.shuga-footer__main .wp-block-list a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: color 0.2s ease;
}
.shuga-footer__main .wp-block-list a:hover { color: var(--wp--preset--color--gold); }
/* Brand column rhythm. */
.shuga-footer__logo { margin: 0 0 1rem; }
.shuga-footer__logo img { max-width: 190px; height: auto; }
.shuga-footer__socials { margin-top: 1.25rem; }
.shuga-footer__phone { margin-bottom: 0.35rem; }
.shuga-footer__phone a { color: var(--wp--preset--color--gold); text-decoration: none; }
.shuga-footer .bt-address { font-style: normal; line-height: 1.7; display: block; margin-bottom: 0.5rem; }
/* Hours in a soft bordered box, day-left / time-right. */
.shuga-footer__hours {
  margin-top: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
}
.shuga-footer__hours .bt-hours--table { width: 100%; border-collapse: collapse; }
.shuga-footer__hours .bt-hours--table th,
.shuga-footer__hours .bt-hours--table td {
  padding: 0.22rem 0;
  font-size: 0.88rem;
  font-weight: 400;
  border: 0;
}
.shuga-footer__hours .bt-hours--table th { text-align: left; color: rgba(255, 255, 255, 0.82); }
.shuga-footer__hours .bt-hours--table td { text-align: right; color: rgba(255, 255, 255, 0.95); font-weight: 600; white-space: nowrap; }

/* Social icons as circular buttons that gild on hover. The circle is the <li>;
   the anchor fills it and centers the icon. */
.shuga-footer__socials.wp-block-social-links { gap: 0.75rem; }
.shuga-footer__socials .wp-social-link {
  margin: 0;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.shuga-footer__socials .wp-block-social-link-anchor {
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shuga-footer__socials .wp-social-link:hover {
  transform: translateY(-3px);
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--plum-deep);
  border-color: var(--wp--preset--color--gold);
}
.shuga-footer__socials .wp-social-link:hover svg { fill: var(--wp--preset--color--plum-deep); }

/* Bottom bar: a shade darker than the body, gold credit link. */
.shuga-footer__bottom {
  background: #2a0e26;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}
.shuga-footer__bottom a { color: var(--wp--preset--color--gold); text-decoration: none; }

/* Trust row: centered badges with gold dots, framed top and bottom. */
.shuga-footer__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 2.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.shuga-footer__trust span { display: inline-flex; align-items: center; gap: 0.6rem; }
.shuga-footer__trust b { color: var(--wp--preset--color--gold); font-weight: 800; }
.shuga-footer__trust .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wp--preset--color--gold);
}

/* Final CTA: deep plum gradient band with a soft gold glow. #36112f is the
   darker plum gradient stop. */
.shuga-cta {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(135deg, var(--wp--preset--color--plum) 0%, #36112f 100%);
}
.shuga-cta::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -10%;
  width: 55%;
  height: 180%;
  background: radial-gradient(closest-side, rgba(201, 162, 39, 0.18), transparent 70%);
  pointer-events: none;
}
.shuga-cta > * { position: relative; z-index: 1; }

/* Visit the Shop: deep plum gradient with a soft gold glow in the corner, and
   frosted-glass info cards. #36112f is the darker plum gradient stop. */
.shuga-visit {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(135deg, var(--wp--preset--color--plum) 0%, #36112f 100%);
}
.shuga-visit::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(closest-side, rgba(201, 162, 39, 0.18), transparent 70%);
  pointer-events: none;
}
.shuga-visit > * { position: relative; z-index: 1; }
.shuga-visit-card {
  position: relative;
  height: 100%;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
/* Gold accent bar across the top of each card. */
.shuga-visit-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--wp--preset--color--gold), rgba(201, 162, 39, 0));
}
.shuga-visit-card:hover,
.shuga-visit-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(201, 162, 39, 0.55);
  box-shadow: 0 30px 55px -24px rgba(0, 0, 0, 0.75);
}
.shuga-visit-card a {
  color: var(--wp--preset--color--gold);
  font-weight: 700;
  text-decoration: none;
}
.shuga-visit-card a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Solid gold badge with a plum icon: the strongest accent on the dark band. */
.shuga-visit-card__icon {
  display: inline-grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: 1.15rem;
  border-radius: 16px;
  background: linear-gradient(135deg, #e7c24b 0%, var(--wp--preset--color--gold) 100%);
  color: var(--wp--preset--color--plum);
  box-shadow: 0 12px 26px -10px rgba(201, 162, 39, 0.7);
}
.shuga-visit-card__icon .icon {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .shuga-visit-card { transition: none; }
  .shuga-visit-card:hover,
  .shuga-visit-card:focus-within { transform: none; }
}
/* Card headings read as headlines, not peers of the body text. The !important
   overrides WordPress's generated .has-medium-font-size preset (which itself
   ships !important) on any already-inserted instance of the pattern. */
.shuga-visit-card h3 {
  font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2rem) !important;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 0.65rem;
}
/* Multiline address: no italic, comfortable leading, white. */
.shuga-visit-card .bt-address {
  display: block;
  font-style: normal;
  line-height: 1.65;
  color: #fff;
}
/* Hours as a clean two-column list: day left, time right. */
.shuga-visit-card .bt-hours--table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.25rem 0 0;
}
.shuga-visit-card .bt-hours--table th,
.shuga-visit-card .bt-hours--table td {
  padding: 0.4rem 0;
  font-size: 0.95rem;
  font-weight: 400;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.shuga-visit-card .bt-hours--table th {
  text-align: left;
  font-weight: 600;
  color: #fff;
}
.shuga-visit-card .bt-hours--table td {
  text-align: right;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}
.shuga-visit-card .bt-hours--table tr:last-child th,
.shuga-visit-card .bt-hours--table tr:last-child td { border-bottom: 0; }

/* Occasions ("Perfect For"): white cards on a sand section, three across on
   desktop and two on smaller screens. Each emoji sits in a sand icon tile so
   even dark glyphs stay legible. Hover lifts the card and adds a gold ring. */
.shuga-occasions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--40);
}
@media (max-width: 991px) {
  .shuga-occasions-grid { grid-template-columns: repeat(2, 1fr); }
}
.shuga-occasion {
  height: 100%;
  text-align: center;
  border: 2px solid transparent;
}
.shuga-occasion:hover { border-color: var(--wp--preset--color--gold); }
.shuga-occasion__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 16px;
  background: var(--wp--preset--color--sand);
  font-size: 1.8rem;
  line-height: 1;
}
.shuga-occasion__title { font-size: 1.05rem; }
.shuga-occasion__title + p { font-size: 0.88rem; line-height: 1.5; }

/* Flavors We Bake: a sand band framed top and bottom by short gold bars, with
   gold category labels and flavor names called out in plum. */
.shuga-flavors { position: relative; }
.shuga-flavors::before,
.shuga-flavors::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 4px;
  border-radius: 4px;
  background: var(--wp--preset--color--gold);
}
.shuga-flavors::before { top: 2.5rem; }
.shuga-flavors::after { bottom: 2.5rem; }
.shuga-flavors__row {
  padding: 1.75rem 0;
  border-bottom: 1px solid rgba(76, 28, 72, 0.12);
}
.shuga-flavors__row:last-of-type { border-bottom: 0; }
.shuga-flavors__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wp--preset--color--gold);
}
.shuga-flavors__list {
  margin: 0;
  color: var(--wp--preset--color--ink);
  font-size: 1.1rem;
  line-height: 1.65;
}
.shuga-flavors__list em {
  color: var(--wp--preset--color--plum);
  font-style: normal;
  font-weight: 600;
}
.shuga-flavors__list strong {
  color: var(--wp--preset--color--plum);
  font-style: italic;
  font-weight: 700;
}

/* ============ ENTRANCE ANIMATIONS (optional, motion-safe) ============
   Add the classes below to any block (Advanced -> Additional CSS class(es)):
     shuga-animate                 base (fade in)
     shuga-animate--up / --down    slide in vertically
     shuga-animate--left / --right slide in horizontally
     shuga-animate--zoom           scale up
     shuga-delay-1 / -2 / -3       stagger (0.1s / 0.2s / 0.3s)
   Do NOT add to the hero <h1> / LCP element. Gated behind .js so content is
   visible without JavaScript; disabled under prefers-reduced-motion. */
.js .shuga-animate {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .shuga-animate.is-visible {
  opacity: 1;
  transform: none;
  transition-delay: var(--shuga-delay, 0s);
}
.js .shuga-animate--up { transform: translateY(40px); }
.js .shuga-animate--down { transform: translateY(-40px); }
.js .shuga-animate--left { transform: translateX(-40px); }
.js .shuga-animate--right { transform: translateX(40px); }
.js .shuga-animate--zoom { transform: scale(0.92); }
.js .shuga-delay-1 { --shuga-delay: 0.1s; }
.js .shuga-delay-2 { --shuga-delay: 0.2s; }
.js .shuga-delay-3 { --shuga-delay: 0.3s; }

/* Auto-stagger: add .shuga-stagger to a parent; its .shuga-animate children cascade. */
.js .shuga-stagger > .shuga-animate:nth-child(2).is-visible { --shuga-delay: 0.12s; }
.js .shuga-stagger > .shuga-animate:nth-child(3).is-visible { --shuga-delay: 0.24s; }
.js .shuga-stagger > .shuga-animate:nth-child(4).is-visible { --shuga-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  .js .shuga-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================================
   Shuga-Me Gravity Forms (.shuga-gf) - matches the forms mockup color scheme.
   The "shuga-gf" class is set on each form's CSS Class Name (form settings), so
   it lands on the <form> element inside .gform_wrapper. Selectors are prefixed
   with .gform_wrapper form.shuga-gf for enough specificity to win over the GF
   theme defaults, without touching the footer newsletter form or other forms.
   Swap the custom properties below to use the site brand tokens instead.
   ============================================================================ */
form.shuga-gf {
  --gf-cream: #fbf3ea;
  --gf-plum: #3a1240;
  --gf-plum-soft: #5e2c63;
  --gf-berry: #c13b72;
  --gf-berry-dark: #a22c5c;
  --gf-line: #e7d9e2;
  --gf-muted: #7a6480;
}
.gform_wrapper form.shuga-gf .gfield_label,
.gform_wrapper form.shuga-gf .gform_required_legend {
  color: var(--gf-plum-soft);
  font-weight: 600;
  font-size: 0.85rem;
}
.gform_wrapper form.shuga-gf input[type="text"],
.gform_wrapper form.shuga-gf input[type="email"],
.gform_wrapper form.shuga-gf input[type="tel"],
.gform_wrapper form.shuga-gf input[type="number"],
.gform_wrapper form.shuga-gf input[type="date"],
.gform_wrapper form.shuga-gf select,
.gform_wrapper form.shuga-gf textarea {
  background: var(--gf-cream);
  border: 1.5px solid var(--gf-line);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--gf-plum);
  font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.gform_wrapper form.shuga-gf textarea {
  min-height: 88px;
  line-height: 1.5;
}
.gform_wrapper form.shuga-gf input:focus,
.gform_wrapper form.shuga-gf select:focus,
.gform_wrapper form.shuga-gf textarea:focus {
  border-color: var(--gf-berry);
  box-shadow: 0 0 0 3px rgba(193, 59, 114, 0.15);
  background: #fff;
  outline: none;
}
/* Submit button: berry pill matching the mockup CTA. !important is needed to
   win over the Gravity Forms theme framework, which otherwise renders a tall,
   square, blue default button. Covers both the <input> and <button> variants. */
.gform_wrapper form.shuga-gf .gform_footer input[type="submit"],
.gform_wrapper form.shuga-gf .gform_footer button,
.gform_wrapper form.shuga-gf input.gform_button,
.gform_wrapper form.shuga-gf button.gform_button {
  background: var(--gf-berry) !important;
  color: #fff !important;
  /* Transparent 1.5px border + 12px vertical padding = same box height as the
     inputs, so the button matches their height and sits on the same line. No
     block-size/height override (that auto height was collapsing it). */
  border: 1.5px solid transparent !important;
  border-radius: 14px !important;
  padding-block: 12px !important;
  padding-inline: 26px !important;
  min-block-size: 0 !important;
  font-weight: 700 !important;
  font-size: 15.5px !important;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(193, 59, 114, 0.28);
  transition: background 0.15s ease, transform 0.12s ease;
}
.gform_wrapper form.shuga-gf .gform_footer input[type="submit"]:hover,
.gform_wrapper form.shuga-gf .gform_footer button:hover,
.gform_wrapper form.shuga-gf .gform_button:hover {
  background: var(--gf-berry-dark) !important;
  transform: translateY(-1px);
}
.gform_wrapper form.shuga-gf .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper form.shuga-gf .gform_footer button:focus-visible,
.gform_wrapper form.shuga-gf .gform_button:focus-visible {
  outline: 2px solid var(--gf-plum) !important;
  outline-offset: 2px;
}
/* Remove the (broken) jQuery UI datepicker trigger icon. The picker still opens
   on focus. calendarIconType:none in the import also prevents it on re-import. */
.gform_wrapper form.shuga-gf .ui-datepicker-trigger,
.gform_wrapper form.shuga-gf .gform-theme-datepicker__icon,
.gform_wrapper form.shuga-gf .gfield--type-date img {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .gform_wrapper form.shuga-gf .gform_footer input[type="submit"]:hover,
  .gform_wrapper form.shuga-gf .gform_footer button:hover,
  .gform_wrapper form.shuga-gf .gform_button:hover {
    transform: none !important;
  }
}

/* Horizontal newsletter (.shuga-gf--inline): email, birthday, and submit on one
   row. The email/birthday sit side by side via their half-width grid spans; the
   form is a flex row so the submit lines up beside them. Stacks on mobile. */
.gform_wrapper form.shuga-gf--inline {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px;
}
.gform_wrapper form.shuga-gf--inline .gform_body {
  flex: 1 1 320px;
  min-width: 0;
}
/* The footer stretches to the row height; align-items:flex-end drops the button
   to the bottom at its natural height (instead of stretching to the container
   and turning square), lining it up with the inputs. */
.gform_wrapper form.shuga-gf--inline .gform_footer {
  display: flex;
  align-items: flex-end;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}
.gform_wrapper form.shuga-gf--inline .gform_footer input[type="submit"] {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .gform_wrapper form.shuga-gf--inline {
    display: block;
  }
  .gform_wrapper form.shuga-gf--inline .gform_footer {
    margin-top: 14px;
  }
  .gform_wrapper form.shuga-gf--inline .gform_footer input[type="submit"] {
    width: 100%;
  }
}
/* Gravity Forms ajax + wpautop wrap the hidden inputs and the ajax iframe in
   empty <p> tags, whose default margins open a gap under the form. Collapse
   them (the hidden inputs still submit while display:none). */
.shuga-newsletter p:has(.gform_hidden),
.shuga-newsletter p:has(iframe) {
  display: none !important;
}