/* =========================================================================
   SWEET MOMENTS BAKERY — REFINEMENTS LAYER
   Load order: main.css -> dark-mode.css -> (special-pages.css) -> refinements.css

   main.css was merged from several page stylesheets and carries many
   duplicated, unscoped rules. Rather than edit 9k lines in place, this file
   is loaded LAST and defines the shared system every page now follows:

     1. Layout tokens: one container width, one gutter, one section rhythm
     2. Header: readable wordmark + tagline, RTL toggle, mobile drawer
     3. Buttons: one primary (filled) + one secondary (outline) + text link
     4. Key-offering tags (Daily special / Bestseller / Signature /
        Seasonal / Featured) and matching section markers
     5. Split heroes (Home 01 / Home 02) and inner-page banners
     6. Image / content proportions per section
     7. Shared closing CTA panel
     8. Section-before-footer spacing
     9. RTL support
    10. Responsive fixes
========================================================================= */

/* -------------------------------------------------------------------------
   1. LAYOUT TOKENS
------------------------------------------------------------------------- */
:root {
  --site-max: 1240px;           /* content width inside the gutters */
  --gutter: 20px;               /* left/right page padding          */
  --section-space: 56px;        /* vertical rhythm between sections */
  --header-h: 72px;
  --btn-h: 52px;
  --btn-radius: 999px;

  /* key-offering colours: fixed so they read the same on photos in both themes */
  --tag-daily: #7D562D;
  --tag-bestseller: #26170C;
  --tag-signature: #4A1F22;
  --tag-seasonal: #8A4B24;
  --tag-featured: #FEF9EF;
  --tag-gold: #F0BD8B;
}
@media (min-width: 576px) { :root { --gutter: 32px; --section-space: 72px; } }
@media (min-width: 992px) { :root { --gutter: 48px; --section-space: 96px; --header-h: 80px; } }

/* Every container on every page (incl. header, footer, banner) shares the
   same max width and the same left/right padding. This replaces the old
   edge-to-edge "full-width layout" block at the end of main.css. */
.container-custom,
.container,
.content-container,
.bakery-container,
.section-container,
.main-header .container-custom,
.site-footer .container-custom,
.page-banner .container-custom {
  width: 100% !important;
  max-width: calc(var(--site-max) + (2 * var(--gutter))) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}

/* Contact wraps its sections in an extra box with its own margin — neutralise */
.contact-main {
  margin: 0 !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-radius: 0 !important;
}
.contact-main .vertical-text { display: none; }

main { padding-top: var(--header-h) !important; }

/* One vertical rhythm for every content section on every page */
.section-padding,
.pricing-section,
.custom-factors,
.event-packages,
.custom-hero,
.delivery-page > .hero-section,
.zones-section,
.options-section,
.details-section,
.contact-section,
.map-section,
.products-main {
  padding-top: var(--section-space) !important;
  padding-bottom: var(--section-space) !important;
}
.urgent-section {
  padding-top: calc(var(--section-space) * .6) !important;
  padding-bottom: calc(var(--section-space) * .6) !important;
}

/* products page sub-sections: consistent internal spacing */
.page-products .products-main > .container-custom > section + section { margin-top: var(--section-space) !important; padding-top: 0 !important; }
.page-products .products-main .filter-section { margin-top: calc(var(--section-space) * .75) !important; }
.page-products .products-main .product-grid { margin-top: 32px !important; }

/* consistent section heads */
.section-head { margin-bottom: 40px; }
.section-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
}
.section-head--split > div { max-width: 640px; }
.section-head .section-title,
.section-head .heading-lg { margin: 14px 0 0; }
.section-head .section-description { margin: 12px 0 0; max-width: 60ch; }

/* -------------------------------------------------------------------------
   2. HEADER
------------------------------------------------------------------------- */
/* main.css fixes the header at 80px tall, which clipped the open drawer */
.main-header {
  height: auto !important;
  background: rgba(254, 249, 239, .97) !important;
}
body.dark-mode .main-header { background: rgba(33, 26, 21, .97) !important; }
.main-header .mobile-menu {
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* legacy page stylesheets hide/restyle a .brand-name class; keep ours visible */
.main-header .brand .brand-name { display: block !important; margin: 0 !important; color: var(--primary) !important; }
.main-header .brand .brand-kind { color: var(--secondary) !important; -webkit-text-fill-color: currentColor; }
/* main.css paints .brand-name as gradient-clipped text (dark in both themes) — reset it */
.main-header .brand .brand-name {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  font-weight: 700 !important;
}
.main-header .brand .brand-tagline { color: var(--on-surface-variant) !important; }
.main-header .brand .brand-tagline { display: block !important; }
/* Order Now stays in the header at every width (compact on phones) */
.main-header .btn-header { flex-shrink: 0; }
@media (max-width: 767.98px) {
  .main-header .btn-header {
    min-height: 40px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }
  .main-header .header-inner { gap: 10px !important; }
  .main-header .header-actions { gap: 6px; }
}
/* small phones: size the brand, Order Now and menu icon so the row fits
   inside the 20px gutters (checked at 320, 360, 375 and 414px) */
@media (max-width: 399.98px) {
  .main-header .header-inner { gap: 6px !important; }
  .main-header .brand { gap: 8px; }
  .main-header .brand .brand-kind { display: none; }
  .main-header .brand-mark { width: 30px; }
  .main-header .brand .brand-name { font-size: 16px !important; }
  .main-header .brand .brand-tagline { font-size: 9.5px; margin-top: 2px; }
  .main-header .header-actions { gap: 4px; }
  .main-header .btn-header { padding: 0 12px !important; font-size: 12.5px !important; min-height: 38px !important; }
  .main-header .navbar-toggler { width: 38px !important; height: 38px !important; padding: 0 !important; }
}
@media (max-width: 349.98px) {
  .main-header .brand-mark { width: 26px; }
  .main-header .brand .brand-name { font-size: 15px !important; }
  .main-header .brand .brand-tagline { font-size: 9px; }
  .main-header .btn-header { padding: 0 10px !important; font-size: 12px !important; }
  .main-header .navbar-toggler { width: 34px !important; }
}

.main-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h) !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  color: var(--primary);
  flex-shrink: 0;
}
.brand-mark { width: 40px; height: auto; flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.main-header .brand-name {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.005em;
  color: var(--primary);
  white-space: nowrap;
}
.brand-kind { font-weight: 500; font-style: italic; color: var(--secondary); }
.brand-tagline {
  margin-top: 3px;
  font-family: "Montserrat", sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--on-surface-variant);
  white-space: nowrap;
}
.brand:focus-visible { outline: 2px solid var(--secondary); outline-offset: 4px; border-radius: 8px; }

.main-header .desktop-nav { height: var(--header-h); gap: 26px !important; }
.main-header .desktop-nav a.label-lg { font-size: 15px; font-weight: 500; letter-spacing: .01em; }
/* Home dropdown also opens on hover / keyboard focus on desktop */
.main-header .desktop-nav .dropdown:hover > .dropdown-menu,
.main-header .desktop-nav .dropdown:focus-within > .dropdown-menu {
  display: block;
  margin-top: 0;
  top: 100%;
}
.main-header .desktop-nav .dropdown-item.active,
.main-header .desktop-nav .dropdown-item:active {
  background: var(--surface-container);
  color: var(--secondary);
  font-weight: 600;
}

.header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
@media (min-width: 768px) { .header-actions { gap: 10px; } }

/* RTL / LTR text toggle (replaces the icon) — shows the direction it switches to */
.dir-toggle {
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 36px;
  padding: 0 10px;
  border: 1.5px solid var(--outline-variant);
  border-radius: 999px;
  background: transparent;
  color: var(--primary);
  font-family: "Montserrat", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.dir-toggle:hover { border-color: var(--primary); background: var(--surface-container); }
.dir-toggle[aria-pressed="true"] { border-color: var(--secondary); color: var(--secondary); }
.dir-toggle:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.mobile-tool .dir-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1.5px solid var(--secondary);
  color: var(--secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}
.header-icon-btn[aria-pressed="true"] { background: var(--surface-container); color: var(--secondary); }
.header-icon-btn:focus-visible,
.navbar-toggler:focus-visible,
.mobile-tool:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

@media (min-width: 1200px) and (max-width: 1339.98px) {
  .main-header .desktop-nav { gap: 18px !important; }
  .main-header .desktop-nav a.label-lg { font-size: 14px; }
  .main-header .brand-name { font-size: 19px; }
}

/* ---- mobile / tablet drawer ---- */
.main-header .mobile-menu { border-top: 1px solid var(--outline-variant); }
.main-header .mobile-menu nav { display: flex; flex-direction: column; padding: 12px 0 24px; }
.main-header .mobile-menu a.mobile-link {
  display: block;
  padding: 13px 2px;
  border-bottom: 1px solid var(--outline-variant);
  color: var(--on-surface-variant);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.main-header .mobile-menu a.mobile-link.active { color: var(--secondary); font-weight: 600; }

.mobile-home-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px 12px;
  border-bottom: 1px solid var(--outline-variant);
}
.mobile-group-label { font-size: 15px; font-weight: 500; color: var(--on-surface-variant); }
.mobile-home-links { display: flex; gap: 8px; }
.main-header .mobile-menu a.mobile-home-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--outline-variant);
  border-bottom: 1px solid var(--outline-variant);
  border-radius: 999px;
  color: var(--on-surface);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.main-header .mobile-menu a.mobile-home-link.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.mobile-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.mobile-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--outline-variant);
  border-radius: 12px;
  background: transparent;
  color: var(--on-surface);
  font-size: 14px;
  font-weight: 500;
}
.mobile-tool .material-symbols-outlined { font-size: 20px; color: var(--secondary); }
.mobile-tool[aria-pressed="true"] { background: var(--surface-container); }


@media (max-width: 575.98px) {
  .brand-mark { width: 34px; }
  .main-header .brand-name { font-size: 18px; }
  .brand-tagline { font-size: 10.5px; }
}
@media (max-width: 359.98px) { .brand-kind { display: none; } }

/* -------------------------------------------------------------------------
   3. BUTTONS — one primary, one secondary, one text link
------------------------------------------------------------------------- */
.btn-primary-custom, .btn-brown, .primary-cta-btn, .primary-btn, .consult-btn,
.cta-btn, .card-btn, .package-btn, .submit-order-btn, .send-btn, .start-order-btn,
.check-btn, .add-btn, .error-cta,
.btn-secondary-custom, .btn-light-custom, .btn-light-bakery, .secondary-cta-btn,
.portfolio-btn, .load-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-h);
  padding: 0 28px !important;
  border-radius: var(--btn-radius) !important;
  border: 1.5px solid transparent;
  font-family: "Montserrat", sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-align: center;
  white-space: nowrap;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Primary: filled espresso (parchment in dark mode) */
.btn-primary-custom, .btn-brown, .primary-cta-btn, .primary-btn, .consult-btn,
.cta-btn, .card-btn, .package-btn, .submit-order-btn, .send-btn, .start-order-btn,
.check-btn, .add-btn, .error-cta {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--on-primary) !important;
}
.btn-primary-custom:hover, .btn-brown:hover, .primary-cta-btn:hover, .primary-btn:hover,
.consult-btn:hover, .cta-btn:hover, .card-btn:hover, .package-btn:hover,
.submit-order-btn:hover, .send-btn:hover, .start-order-btn:hover, .check-btn:hover,
.add-btn:hover, .error-cta:hover {
  background: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: var(--on-secondary) !important;
}

/* Secondary: outline */
.btn-secondary-custom, .btn-light-custom, .btn-light-bakery, .secondary-cta-btn,
.portfolio-btn, .load-more-btn {
  background: transparent !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.btn-secondary-custom:hover, .btn-light-custom:hover, .btn-light-bakery:hover,
.secondary-cta-btn:hover, .portfolio-btn:hover, .load-more-btn:hover {
  background: var(--primary) !important;
  color: var(--on-primary) !important;
}

/* focus ring for every button style */
.btn:focus-visible, .btn-brown:focus-visible, .btn-light-bakery:focus-visible,
.primary-cta-btn:focus-visible, .secondary-cta-btn:focus-visible, .primary-btn:focus-visible,
.consult-btn:focus-visible, .portfolio-btn:focus-visible, .cta-btn:focus-visible,
.card-btn:focus-visible, .package-btn:focus-visible, .submit-order-btn:focus-visible,
.send-btn:focus-visible, .start-order-btn:focus-visible, .check-btn:focus-visible,
.add-btn:focus-visible, .load-more-btn:focus-visible, .link-arrow:focus-visible {
  outline: 3px solid var(--secondary) !important;
  outline-offset: 3px;
}

/* sizes */
.btn-header { min-height: 44px !important; padding: 0 22px !important; font-size: 14px !important; }
.btn-compact, .add-btn, .card-btn, .package-btn {
  min-height: 44px !important;
  padding: 0 20px !important;
  font-size: 14px !important;
}
.card-btn, .package-btn, .submit-order-btn, .send-btn, .check-btn { width: 100%; }
.add-btn .material-symbols-outlined { font-size: 18px; }
.pricing-card > a.card-btn { margin-top: auto; }

/* On dark branded panels the primary inverts to cream and the outline turns cream */
.custom-order-card .btn-primary-custom,
.closing-cta-panel .btn-primary-custom,
.pricing-card.featured .card-btn {
  background: #FEF9EF !important;
  border-color: #FEF9EF !important;
  color: #26170C !important;
}
.custom-order-card .btn-primary-custom:hover,
.closing-cta-panel .btn-primary-custom:hover,
.pricing-card.featured .card-btn:hover {
  background: var(--tag-gold) !important;
  border-color: var(--tag-gold) !important;
  color: #26170C !important;
}
.custom-order-card .btn-secondary-custom,
.closing-cta-panel .btn-secondary-custom,
.site-footer .btn-secondary-custom {
  background: transparent !important;
  border-color: rgba(254, 249, 239, .7) !important;
  color: #FEF9EF !important;
}
.custom-order-card .btn-secondary-custom:hover,
.closing-cta-panel .btn-secondary-custom:hover,
.site-footer .btn-secondary-custom:hover {
  background: #FEF9EF !important;
  border-color: #FEF9EF !important;
  color: #26170C !important;
}

/* Tertiary: text link with arrow (View all, View gallery, Order this design…) */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--secondary);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.link-arrow .material-symbols-outlined { font-size: 20px; transition: transform .2s ease; }
.link-arrow:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
.link-arrow:hover .material-symbols-outlined { transform: translateX(3px); }

.hero-buttons, .custom-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* -------------------------------------------------------------------------
   4. KEY-OFFERING TAGS
   Daily special / Bestseller / Signature / Seasonal / Featured each have a
   fixed colour + icon, used both on product cards (.offer-tag) and beside
   the matching section heading (.offer-marker), so the key selections read
   as products rather than as general content.
------------------------------------------------------------------------- */
.offer-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px 6px 9px;
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  color: #FEF9EF;
  box-shadow: 0 6px 16px rgba(38, 23, 12, .22);
}
.offer-tag .material-symbols-outlined { font-size: 15px; font-variation-settings: "FILL" 1; }
.offer-tag--daily      { background: var(--tag-daily); }
.offer-tag--bestseller { background: var(--tag-bestseller); }
.offer-tag--bestseller .material-symbols-outlined,
.offer-tag--signature .material-symbols-outlined { color: var(--tag-gold); }
.offer-tag--signature  { background: var(--tag-signature); }
.offer-tag--seasonal   { background: var(--tag-seasonal); }
.offer-tag--featured   { background: var(--tag-featured); color: #26170C; }
.offer-tag--featured .material-symbols-outlined { color: var(--tag-daily); }

/* tags inside flowing content (hero card, pricing card) sit inline */
.hero-showcase-card .offer-tag,
.pricing-tag { position: static; align-self: flex-start; box-shadow: none; }
.pricing-card.featured .pricing-tag { margin-bottom: 14px; background: #FEF9EF; color: #4A1F22; }
.pricing-card.featured .pricing-tag .material-symbols-outlined { color: #7D562D; }

/* the old per-page badges are replaced by the tag system */
.signature-badge, .limited-badge, .seasonal-badge, .product-badge { display: none !important; }

/* neutral dietary chip — deliberately NOT styled as an offering tag */
.diet-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(254, 249, 239, .95);
  border: 1px solid #D2C4BC;
  color: #4F453F;
  font-size: 12px;
  font-weight: 600;
}

/* section marker that matches the card tags */
.offer-marker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid currentColor;
}
.offer-marker .material-symbols-outlined { font-size: 17px; font-variation-settings: "FILL" 1; }
.offer-marker--daily      { color: #7D562D; background: rgba(125, 86, 45, .08); }
.offer-marker--bestseller { color: var(--primary); background: rgba(38, 23, 12, .05); }
.offer-marker--signature  { color: #4A1F22; background: rgba(74, 31, 34, .06); }
.offer-marker--seasonal   { color: #8A4B24; background: rgba(138, 75, 36, .08); }
.offer-marker--featured   { color: #7D562D; background: rgba(125, 86, 45, .08); }
body.dark-mode .offer-marker--daily,
body.dark-mode .offer-marker--signature,
body.dark-mode .offer-marker--seasonal,
body.dark-mode .offer-marker--featured { color: var(--secondary); background: rgba(217, 155, 98, .1); }
.text-center > .offer-marker { margin-bottom: 4px; }

/* key-offer cards: thin warm keyline so they read as a product set */
.special-card.key-offer,
.seasonal-card.key-offer,
.product-card.key-offer,
.designer-card.key-offer {
  border: 1px solid var(--outline-variant) !important;
  background: var(--surface-container-lowest) !important;
  overflow: hidden;
}
.special-card.key-offer:hover,
.seasonal-card.key-offer:hover,
.product-card.key-offer:hover,
.designer-card.key-offer:hover { border-color: var(--secondary) !important; }
.special-card-image, .seasonal-image, .designer-image, .product-image,
.product-card, .collection-card, .featured-item { position: relative; }

.special-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--outline-variant);
}


/* -------------------------------------------------------------------------
   5. HEROES
------------------------------------------------------------------------- */
.hero-split { min-height: 0 !important; display: block !important; padding: 0 !important; }
.hero-split .hero-content {
  padding-top: clamp(48px, 7vw, 88px) !important;
  padding-bottom: clamp(56px, 7vw, 96px) !important;
}
.hero-split .hero-overlay {
  background: linear-gradient(90deg, rgba(254, 249, 239, .97) 0%, rgba(254, 249, 239, .93) 50%, rgba(254, 249, 239, .82) 100%) !important;
}
body.dark-mode .hero-split .hero-overlay {
  background: linear-gradient(90deg, rgba(24, 18, 14, .96) 0%, rgba(24, 18, 14, .92) 50%, rgba(24, 18, 14, .8) 100%) !important;
}
.hero-split::after { display: none; }

.hero-kicker { margin: 0 0 16px; color: var(--secondary); font-size: 15px; font-weight: 600; }
.hero-split .hero-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(38px, 5.2vw, 64px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.015em;
  font-weight: 700;
  margin: 0 0 20px !important;
  max-width: 13ch;
  color: var(--on-surface) !important;
}
.hero-split .hero-title .hero-happiness,
.hero-split .hero-title .italic { font-style: italic; font-weight: 500; color: var(--secondary) !important; }
.hero-split .hero-description {
  max-width: 52ch;
  margin: 0 0 32px !important;
  font-size: 18px;
  line-height: 1.6;
  color: var(--on-surface-variant);
}
.hero-split .social-proof {
  margin-top: 36px !important;
  padding-top: 28px !important;
  border-top: 1px solid var(--outline-variant);
}
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 32px 0 0;
  padding: 28px 0 0;
  list-style: none;
  border-top: 1px solid var(--outline-variant);
}
.page-home2 .hero-split .hero-title { max-width: none; font-size: clamp(38px, 4.6vw, 58px) !important; }
.site-footer .footer-bottom { padding-left: 0 !important; padding-right: 0 !important; }
.hero-points li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--on-surface-variant); }
.hero-points .material-symbols-outlined { color: var(--secondary); font-size: 20px; }

/* right-hand showcase: image + product card (fills the previously empty side) */
.hero-showcase { position: relative; margin-left: auto; max-width: 540px; padding-bottom: 56px; }
.hero-showcase-image {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 30px 60px rgba(38, 23, 12, .22);
}
.page-home2 .hero-showcase-image { aspect-ratio: 1 / 1; object-position: center 35%; }
.hero-showcase-card {
  position: absolute;
  left: -32px;
  right: 56px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  border-radius: 20px;
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  box-shadow: 0 18px 40px rgba(38, 23, 12, .16);
}
.hero-showcase-title {
  margin: 4px 0 0;
  font-family: "Playfair Display", serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--on-surface);
}
.hero-showcase-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--on-surface-variant); }
.hero-showcase-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.hero-showcase-meta .price { font-family: "Playfair Display", serif; font-size: 22px; font-weight: 700; color: var(--primary); }
.hero-showcase .fresh-badge { position: absolute; top: 20px; right: -14px; left: auto; bottom: auto; transform: rotate(4deg); }

/* ---- inner-page banners: title + lede on the left, key facts on the right ---- */
.page-banner { min-height: 0 !important; }
.page-banner-content {
  padding-top: clamp(40px, 5vw, 64px) !important;
  padding-bottom: clamp(40px, 5vw, 64px) !important;
}
.page-banner-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px 56px;
}
.page-banner-title { font-size: clamp(34px, 4.4vw, 52px) !important; margin-bottom: 12px !important; }
.page-banner-lede { max-width: 46ch; margin: 0; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.page-banner-facts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.page-banner-facts li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(254, 249, 239, .1);
  border: 1px solid rgba(254, 249, 239, .2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.banner-fact-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FEF9EF;
  color: #7D562D;
  font-size: 20px;
}
.page-banner-facts strong { display: block; color: #fff; font-size: 15px; font-weight: 600; }
.page-banner-facts small { display: block; margin-top: 2px; color: rgba(255, 255, 255, .72); font-size: 13px; }
.page-banner .breadcrumb-sep { font-size: 14px !important; }

/* -------------------------------------------------------------------------
   6. IMAGE / CONTENT PROPORTIONS
------------------------------------------------------------------------- */
/* Home 01 — daily specials */
.page-home1 .large-special-image { height: 260px !important; }
.page-home1 .small-special-image { height: 168px !important; padding: 0 !important; }
.page-home1 .small-special-image img { border-radius: 0 !important; }
.page-home1 .small-card-body { padding: 18px 20px 20px; }
.page-home1 .seasonal-image { height: 190px !important; }

/* Home 01 — custom order + masterclass: narrower image column, capped height */
.page-home1 .custom-order-card { padding: clamp(24px, 4vw, 56px) !important; }
.page-home1 .custom-order-image { aspect-ratio: 4 / 5 !important; max-height: 460px; }
.page-home1 .masterclass-image { aspect-ratio: 4 / 3 !important; max-height: 400px; }

/* Home 02 */
.page-home2 .collection-card { margin-top: 0 !important; aspect-ratio: 3 / 4; min-height: 0 !important; height: auto !important; }
.page-home2 .collection-card .offer-tag { top: 16px; left: 16px; }
.page-home2 .designer-card { border-radius: var(--radius-lg); text-align: start !important; height: 100%; display: flex; flex-direction: column; }
.page-home2 .designer-image { aspect-ratio: 4 / 3 !important; margin-bottom: 0 !important; border-radius: 0 !important; }
.page-home2 .designer-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.page-home2 .designer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.page-home2 .designer-price { font-weight: 700; color: var(--secondary); white-space: nowrap; font-size: 15px; }
.page-home2 .designer-text { margin: 0; color: var(--on-surface-variant); font-size: 15px; line-height: 1.55; }
.page-home2 .designer-body .link-arrow { margin-top: auto; }

@media (min-width: 768px) { .page-home2 .featured-grid { grid-auto-rows: 220px !important; } }
.page-home2 .featured-item.large { min-height: 0 !important; }
.page-home2 .featured-item.small { min-height: 220px; }
/* text is always visible (hover-only text is invisible on touch screens) */
.page-home2 .featured-overlay { opacity: 1 !important; background: linear-gradient(to top, rgba(38, 23, 12, .82), transparent 60%) !important; }
.page-home2 .featured-info { opacity: 1 !important; transform: none !important; padding: 24px !important; }
.page-home2 .featured-info p { color: rgba(255, 255, 255, .82); font-size: 14px; }
.page-home2 .featured-item.small .heading-md { font-size: 20px; }
.page-home2 .chef-image { width: min(100%, 360px) !important; }

/* About — "The Birth of a Bakery": photo matches the text column exactly
   (top aligns with the "Our Story" line, bottom with the last paragraph) */
.page-about .story-image-bg { display: none; }           /* rotated shape that peeked out on the right */
.page-about .story-row > [class*="col-"] > p:last-child { margin-bottom: 0; }
.page-about .story-image-box { height: 340px !important; margin-top: 0 !important; }
@media (min-width: 992px) {
  .page-about .story-row { align-items: stretch !important; }
  .page-about .story-image-wrapper { height: 100%; }
  .page-about .story-image-box { height: 100% !important; min-height: 380px; }
}
.page-about .baker-image { aspect-ratio: 1 / 1 !important; }

/* Pricing — "Custom factors": photo matches the card column exactly
   (top aligns with the "Custom Factors" label, bottom with the last card) */
.page-pricing .factors-row > [class*="col-"] > .factor-card:last-child { margin-bottom: 0 !important; }
.page-pricing .custom-factors .custom-image { height: 320px !important; }
@media (min-width: 992px) {
  .page-pricing .factors-row { align-items: stretch !important; }
  .page-pricing .factors-media { height: 100%; }
  .page-pricing .custom-factors .custom-image { height: 100% !important; min-height: 380px; }
}
.page-pricing .package-image { height: 220px !important; }

/* Products */
.page-products .category-image { aspect-ratio: 1 / 1 !important; height: auto !important; }
.page-products .product-image { height: 200px !important; }
.page-products .product-card .offer-tag,
.page-products .product-card .diet-chip { top: 12px; left: 12px; }

/* Custom orders */
.page-custom .custom-hero .hero-image,
.page-custom .custom-hero .hero-image img { max-height: 460px; }
.page-custom .custom-hero .hero-image img { object-fit: cover; }

/* -------------------------------------------------------------------------
   7. SHARED CLOSING CTA (Home 01, Home 02, About, Products, Pricing)
------------------------------------------------------------------------- */
.closing-cta { padding-top: var(--section-space); padding-bottom: var(--section-space); background: transparent; }
.closing-cta-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px 56px;
  padding: clamp(32px, 5vw, 64px);
  border-radius: 32px;
  background: var(--panel-gradient);
  color: #FEF9EF;
  box-shadow: 0 24px 60px rgba(38, 23, 12, .22);
}
.closing-cta-panel::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(240, 189, 139, .28);
  border-radius: 24px;
  pointer-events: none;
}
.closing-cta-mark {
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 260px;
  opacity: .08;
  filter: grayscale(1) brightness(3);
  pointer-events: none;
}
.closing-cta-copy, .closing-cta-actions { position: relative; z-index: 1; }
.closing-cta-title {
  margin: 0 0 14px;
  font-family: "Playfair Display", serif;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.12;
  font-weight: 700;
  color: #FEF9EF !important;
}
.closing-cta-text { max-width: 54ch; margin: 0; font-size: 17px; line-height: 1.6; color: rgba(254, 249, 239, .82); }
.closing-cta-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 24px 0 0; padding: 0; list-style: none; }
.closing-cta-facts li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: rgba(254, 249, 239, .9); }
.closing-cta-facts .material-symbols-outlined { font-size: 20px; color: var(--tag-gold); }
.closing-cta-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.closing-cta-actions .btn { width: 100%; }
.closing-cta-note { margin: 4px 0 0; text-align: center; font-size: 13px; color: rgba(254, 249, 239, .68); }

/* -------------------------------------------------------------------------
   8. SPACE ABOVE THE FOOTER
   main.css gave the footer margin-top:80px on top of the last section's own
   bottom padding (a 176–196px gap). The footer now follows the last section
   directly, keeping the same rhythm as every other section.
------------------------------------------------------------------------- */
.site-footer, footer.site-footer { margin-top: 0 !important; }
main > :last-child { margin-bottom: 0 !important; }

/* -------------------------------------------------------------------------
   9. RTL
------------------------------------------------------------------------- */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .icon-directional { transform: scaleX(-1); display: inline-block; }
[dir="rtl"] .link-arrow:hover .material-symbols-outlined { transform: scaleX(-1) translateX(3px); }

[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .text-end { text-align: left !important; }
@media (min-width: 768px) {
  [dir="rtl"] .text-md-start { text-align: right !important; }
  [dir="rtl"] .text-md-end { text-align: left !important; }
}
@media (min-width: 992px) {
  [dir="rtl"] .text-lg-start { text-align: right !important; }
  [dir="rtl"] .text-lg-end { text-align: left !important; }
}
[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }
[dir="rtl"] .ms-1, [dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: .5rem !important; }
[dir="rtl"] .me-1, [dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: .5rem !important; }

[dir="rtl"] .dropdown-menu { text-align: right; }
[dir="rtl"] .hero-split .hero-overlay { transform: scaleX(-1); }
[dir="rtl"] .hero-showcase { margin-left: 0; margin-right: auto; }
[dir="rtl"] .hero-showcase-card { left: 56px; right: -32px; }
[dir="rtl"] .hero-showcase .fresh-badge { right: auto; left: -14px; transform: rotate(-4deg); }
[dir="rtl"] .offer-tag, [dir="rtl"] .diet-chip { left: auto; right: 14px; }
[dir="rtl"] .offer-tag { padding: 6px 9px 6px 12px; }
[dir="rtl"] .hero-showcase-card .offer-tag, [dir="rtl"] .pricing-tag { right: auto; }
[dir="rtl"] .rating-badge { right: auto !important; left: 16px !important; }
[dir="rtl"] .closing-cta-mark { right: auto; left: -40px; }
[dir="rtl"] .chef-quote { padding-left: 0 !important; padding-right: 24px; border-left: 0 !important; border-right: 4px solid var(--gold); }

/* -------------------------------------------------------------------------
   10. RESPONSIVE
------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .hero-showcase-card { left: -16px; right: 32px; }
}

@media (max-width: 991.98px) {
  .hero-showcase { margin: 8px auto 0; max-width: 560px; padding-bottom: 72px; }
  .hero-showcase-card, [dir="rtl"] .hero-showcase-card { left: 16px; right: 16px; }
  .hero-showcase .fresh-badge { right: 12px; }
  .hero-split .hero-title { max-width: 16ch; }

  .page-banner-grid { grid-template-columns: 1fr; gap: 24px; }
  .page-banner-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-banner-facts li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }

  .closing-cta-panel { grid-template-columns: 1fr; }
  .closing-cta-actions { flex-direction: row; flex-wrap: wrap; }
  .closing-cta-actions .btn { width: auto; flex: 1 1 200px; }
  .closing-cta-note { flex-basis: 100%; text-align: start; }

  .page-home1 .custom-order-image { aspect-ratio: 16 / 10 !important; max-height: 360px; }
  .page-home1 .masterclass-image { max-height: 340px; }
}

@media (max-width: 767.98px) {
  .page-banner-facts { grid-template-columns: 1fr; }
  .page-banner-facts li { flex-direction: row; align-items: center; padding: 12px 14px; }
  .page-banner-facts li:nth-child(n+3) { display: none; }
  .page-home2 .collection-card { aspect-ratio: 4 / 3; }
  .page-home2 .featured-item.large { min-height: 320px !important; }
  .page-home1 .large-special-image { height: 220px !important; }
  .page-home1 .small-special-image { height: 180px !important; }
}

@media (max-width: 575.98px) {
  .g-5, .gx-5 { --bs-gutter-x: 2.5rem; }
  .hero-split .hero-content { padding-top: 36px !important; padding-bottom: 48px !important; }
  .hero-kicker { font-size: 14px; }
  .hero-split .hero-description { font-size: 16px; margin-bottom: 24px !important; }
  .hero-buttons > .btn, .hero-buttons > a { flex: 1 1 100%; }
  .hero-showcase { padding-bottom: 104px; }
  .hero-showcase-image { border-radius: 20px; }
  .hero-showcase-card, [dir="rtl"] .hero-showcase-card { left: 12px; right: 12px; padding: 18px; }
  .hero-showcase .fresh-badge { display: none; }

  .section-head { margin-bottom: 28px; }
  .section-head--split { align-items: flex-start; }

  .closing-cta-panel { border-radius: 24px; padding: 32px 22px; }
  .closing-cta-panel::before { inset: 8px; border-radius: 18px; }
  .closing-cta-actions .btn { flex-basis: 100%; }

  .btn-primary-custom, .btn-secondary-custom { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .link-arrow .material-symbols-outlined { transition: none !important; }
}

/* dark mode: the cupcake mark is dark brown, so give it a small cream disc */
body.dark-mode .main-header .brand-mark {
  background: #FEF9EF;
  border-radius: 50%;
  padding: 3px;
}

/* coming-soon sits on a dark photo: outline button uses the on-dark variant */
.page-coming-soon main .btn-secondary-custom {
  background: transparent !important;
  border-color: rgba(254, 249, 239, .8) !important;
  color: #FEF9EF !important;
}
.page-coming-soon main .btn-secondary-custom:hover {
  background: #FEF9EF !important;
  color: #26170C !important;
}

/* =========================================================================
   HOME 02 — tablet fixes (Designer's Choice, Sweet Legacy, How it works)
========================================================================= */

/* Alternate section backgrounds so each section has a visible edge;
   before, every section was the same cream, so two sections' padding
   read as one large empty gap */
.page-home2 main > section.bg-surface { background-color: var(--surface-container) !important; }

/* trailing paragraph margins added dead space at the bottom of these blocks */
.page-home2 .legacy-item p,
.page-home2 .process-item p { margin-bottom: 0; }

/* ---- Designer's Choice ------------------------------------------------ */
/* price never clips: title wraps, price keeps its own width */
.page-home2 .designer-head { flex-wrap: wrap; row-gap: 4px; }
.page-home2 .designer-head .heading-md { min-width: 0; }
.page-home2 .designer-price { flex-shrink: 0; }

/* 768–991px: three 219px cards were too narrow, so each card becomes a
   full-width row (photo left, details right) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .page-home2 #designers-choice .row > .col-md-4 { flex: 0 0 100%; max-width: 100%; }
  .page-home2 #designers-choice .designer-card { flex-direction: row; }
  .page-home2 #designers-choice .designer-image {
    flex: 0 0 42%;
    aspect-ratio: auto !important;
    min-height: 230px;
  }
  .page-home2 #designers-choice .designer-image img { position: absolute; inset: 0; }
  .page-home2 #designers-choice .designer-body { padding: 28px 32px; justify-content: center; }
  .page-home2 #designers-choice .designer-head .heading-md { font-size: 26px; }
}

/* ---- Sweet Legacy ----------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .page-home2 .legacy-item { padding: 0 6px; }
  .page-home2 .legacy-year { font-size: 26px; }
  .page-home2 .legacy-title { font-size: 12px; letter-spacing: .08em; }
}

/* ---- From Vision to Masterpiece (5 steps) ----------------------------- */
/* below 992px five 122px columns were unreadable: switch to a vertical
   timeline (number on the left, title + text on the right) */
@media (max-width: 991.98px) {
  .page-home2 .process-wrapper { max-width: 600px; margin-left: auto; margin-right: auto; }
  .page-home2 .process-wrapper .process-line { display: none; }
  .page-home2 .process-wrapper .row { --bs-gutter-y: 0; }
  .page-home2 .process-wrapper .row > .col-md { flex: 0 0 100%; max-width: 100%; }
  .page-home2 .process-wrapper .process-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 20px;
    align-items: start;
    text-align: start;
    margin: 0 !important;
    padding-bottom: 28px;
  }
  .page-home2 .process-wrapper .process-number {
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
    margin: 0 !important;
    font-size: 24px;
  }
  .page-home2 .process-wrapper .process-item h4 { margin: 4px 0 6px; font-size: 20px; }
  .page-home2 .process-wrapper .process-item p { font-size: 15px; line-height: 1.55; }
  /* connector between numbers */
  .page-home2 .process-wrapper .process-item::before {
    content: "";
    position: absolute;
    inset-inline-start: 27px;
    top: 62px;
    bottom: 6px;
    width: 2px;
    background: var(--outline-variant);
  }
  .page-home2 .process-wrapper .col-md:last-child .process-item { padding-bottom: 0; }
  .page-home2 .process-wrapper .col-md:last-child .process-item::before { display: none; }
}

/* =========================================================================
   CARD ROWS — keep content on the same lines
   1. Cards no longer lift on hover (a hovered card sat a few px higher than
      its neighbours, knocking its image, title and text out of line);
      hover is shown with the border colour and shadow instead.
   2. Seasonal cards: title and description sit on fixed lines — the
      description always occupies exactly 3 lines, so every card's text
      starts and ends at the same height.
========================================================================= */
.key-offer:hover,
.seasonal-card:hover,
.special-card:hover,
.product-card:hover,
.designer-card:hover,
.pricing-card:hover,
.package-card:hover,
.value-card:hover,
.zone-card:hover,
.option-card:hover {
  transform: none !important;
}
.seasonal-card.key-offer:hover,
.special-card.key-offer:hover,
.product-card.key-offer:hover,
.designer-card.key-offer:hover {
  box-shadow: 0 14px 30px rgba(38, 23, 12, .12) !important;
}

.page-home1 .seasonal-section .row > [class*="col-"] { display: flex; }
.page-home1 .seasonal-card { display: flex; flex-direction: column; width: 100%; }
.page-home1 .seasonal-card-body { display: flex; flex-direction: column; flex: 1; }
.page-home1 .seasonal-card-title {
  margin: 0 0 10px !important;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page-home1 .seasonal-card-body .section-description {
  --desc-lh: 1.6em;
  line-height: var(--desc-lh) !important;
  min-height: calc(var(--desc-lh) * 3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* =========================================================================
   SECTION BACKGROUNDS — no two neighbouring sections share a colour
   When two sections had the same background, one section's bottom padding
   plus the next one's top padding read as one ~190px empty band.
   Neighbours now alternate cream (--background) and warm grey
   (--surface-container), so every gap has a visible edge.
========================================================================= */
/* Home 01: specials (cream) > seasonal (grey) > occasions (cream) >
   process (grey) > custom order (dark) > masterclass (grey) > CTA (cream) */
.page-home1 .specials-section   { background-color: var(--background) !important; }
.page-home1 .seasonal-section   { background-color: var(--surface-container) !important; }
.page-home1 .categories-section { background-color: var(--background) !important; }
.page-home1 .process-section    { background-color: var(--surface-container) !important; }

/* About: story (cream) > mission (grey) > values (cream) > bakers (grey) > CTA */
.page-about .mission-section { background-color: var(--surface-container) !important; }
.page-about .values-section  { background-color: var(--background) !important; }
.page-about .bakers-section  { background-color: var(--surface-container) !important; }

/* Custom Orders: hero (cream) > how it works (grey) > order form (cream) */
.page-custom .process-section { background-color: var(--surface-container) !important; }

/* Closing CTA panel: when the section before it is the same colour, its own
   top padding would double the gap — the previous section's bottom padding
   already provides the space */
.page-products .closing-cta,
.page-pricing .closing-cta { padding-top: 0 !important; }

/* Delivery: intro (cream) > coverage zones (grey) > options (dark) > details (cream) */
.page-delivery .delivery-page > .hero-section { background-color: var(--background) !important; }


/* =========================================================================
   CLIENT QA ROUND 2
   1. Footer brand matches the header brand
   2. Footer social icons (real brand marks)
   3. Home 02 "A Sweet Legacy" connector lines
   4. Dark mode: date-picker calendar icon
   5. Dark mode: page-banner (hero) fact icons
   6. Pricing: Signature tag sits on the top edge of its card
   7. Dark mode: form labels + placeholders
   8. Type weights: headings 600, paragraphs 400-550
========================================================================= */

/* ---- 1. Footer brand = header brand (same mark, wordmark and tagline) ---- */
.site-footer .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
}
.site-footer .footer-brand-mark {
  width: 44px;
  height: auto;
  flex: 0 0 auto;
  background: #FEF9EF;        /* the mark is dark brown: sits on a cream disc on the dark panel */
  border-radius: 50%;
  padding: 3px;
}
.site-footer .footer-brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.site-footer .footer-brand-name {
  font-family: "Playfair Display", serif;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: #FEF9EF;
  white-space: nowrap;
}
.site-footer .footer-brand-kind { font-weight: 500; font-style: italic; color: var(--tag-gold, #D99B62); }
.site-footer .footer-brand-tagline {
  margin-top: 3px;
  font-family: "Montserrat", sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(254, 249, 239, .75);
  white-space: nowrap;
}
.site-footer .footer-brand:focus-visible { outline: 3px solid var(--tag-gold, #D99B62); outline-offset: 4px; border-radius: 12px; }
@media (max-width: 399.98px) {
  .site-footer .footer-brand-name { font-size: 19px; }
  .site-footer .footer-brand-tagline { font-size: 10.5px; }
}

/* ---- 2. Footer social icons ---- */
.site-footer .social-icons a,
.coming-soon-social a {
  color: #fff;
}
.site-footer .social-icons a .social-svg,
.coming-soon-social a .social-svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}
.site-footer .social-icons a:hover,
.site-footer .social-icons a:focus-visible { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.site-footer .social-icons a:focus-visible { outline: 3px solid #FEF9EF; outline-offset: 3px; }
.site-footer .footer-contact li a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.site-footer .footer-contact li a:hover { color: var(--secondary-fixed, #FFDCBD); text-decoration: underline; }

/* ---- 3. Home 02 "A Sweet Legacy": connectors run BETWEEN the icons ---- */
/* The old single line sat above the icon centres and ran behind the first
   and last icon. Each column now draws its own short segment, aligned to
   the icon centre, stopping 16px short of the icon on both sides. */
.legacy-wrapper .legacy-line { display: none; }
@media (min-width: 768px) {
  .legacy-wrapper .row > [class*="col-"] { position: relative; }
  .legacy-wrapper .row > [class*="col-"]:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 23px;                                   /* icon is 48px tall: centre = 24px */
    inset-inline-start: calc(50% + 40px);        /* half icon (24) + 16px gap */
    width: calc(100% - 80px);                    /* up to 16px before the next icon */
    height: 2px;
    border-radius: 2px;
    background: var(--outline-variant, #CFC4B8);
    pointer-events: none;
  }
}

/* ---- 4. Dark mode: native date-picker icon was dark-on-dark ---- */
body.dark-mode input[type="date"],
body.dark-mode input[type="time"],
body.dark-mode input[type="datetime-local"] { color-scheme: dark; }
body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator,
body.dark-mode input[type="time"]::-webkit-calendar-picker-indicator,
body.dark-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 1;
  cursor: pointer;
  filter: none;
}
body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator:focus-visible { outline: 2px solid var(--secondary); outline-offset: 3px; border-radius: 4px; }

/* ---- 5. Dark mode: hero / page-banner fact icons ----
   dark-mode.css forces every icon to `color: inherit`, which turned these
   cream-disc icons cream-on-cream. Pin glyph colour to the disc contrast. */
body.dark-mode .banner-fact-icon,
body.dark-mode .page-banner .banner-fact-icon {
  background: #FEF9EF;
  color: #5A3A1B;
  font-variation-settings: "FILL" 1, "wght" 500;
}
/* the small text lines in those cards stay readable on the photo */
body.dark-mode .page-banner-facts small { color: rgba(255, 255, 255, .86); }
body.dark-mode .page-banner-facts li { background: rgba(24, 18, 14, .55); border-color: rgba(254, 249, 239, .28); }

/* ---- 6. Pricing: Signature tag on the top edge, so every card's icon,
        title and price start on the same line ---- */
.pricing-card.featured { padding-top: 32px; }
.pricing-card.featured .pricing-tag {
  position: absolute;
  top: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  margin: 0;
  align-self: auto;
  padding: 7px 16px 8px;
  border-radius: 0 0 14px 14px;
  z-index: 4;
  background: #FEF9EF;
  color: #4A1F22;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
[dir="rtl"] .pricing-card.featured .pricing-tag { transform: translateX(50%); }

/* ---- 7. Dark mode: form labels and placeholders ---- */
body.dark-mode ::placeholder,
body.dark-mode .form-control::placeholder,
body.dark-mode .custom-input::placeholder,
body.dark-mode .custom-textarea::placeholder,
body.dark-mode .postal-input::placeholder,
body.dark-mode .newsletter-input::placeholder {
  color: #B9AB9F !important;       /* 7:1 on the dark input fill */
  opacity: 1;
}
body.dark-mode .site-footer .newsletter-input::placeholder { color: rgba(255, 255, 255, .72) !important; }
body.dark-mode .custom-label,
body.dark-mode .form-label,
body.dark-mode label,
body.dark-mode .postal-field label {
  color: #EADFD5 !important;
}
body.dark-mode .postal-field label { background: var(--surface-container-low); font-weight: 600; }
body.dark-mode .postal-input,
body.dark-mode .custom-input,
body.dark-mode .custom-select,
body.dark-mode .custom-textarea,
body.dark-mode .form-control,
body.dark-mode .form-select { border-color: #7A6A5E !important; }  /* visible 3:1 field edge */
body.dark-mode select option { background: #211A15; color: #F5EEE7; }

/* ---- 8. Type weights: headings 600, paragraphs 400-550 ---- */
h1, h2, h3, h4, h5, h6,
[class*="heading-"],
.display-title, .display-lg,
.hero-title, .hero-showcase-title,
.page-banner-title, .section-title, .closing-cta-title,
.card-title, .footer-heading, .contact-title, .details-title, .map-title,
.options-title, .urgent-title, .form-main-title, .form-section-title,
.process-title, .seasonal-card-title, .special-card-title, .small-card-title,
.detail-heading, .option-title, .coming-soon-title, .error-title,
.main-header .brand .brand-name, .site-footer .footer-brand-name {
  font-weight: 600 !important;
}
/* paragraph-level text that was heavier than 550 */
.zone-list li, li.closed, .quote-box p, .baker-role, .hero-kicker { font-weight: 500 !important; }
.error-code { font-weight: 500; }           /* decorative "404" figure is a <p>: keep within 400-550 */

/* email line in the footer contact list needs a little more room than the 260px cap */
.site-footer .footer-contact li { max-width: 320px; }
.site-footer .footer-contact li a { font-size: inherit; }

/* Home 1 – "From Grain to Oven": run the dashed line through the vertical center of the step images
   (image is 128px tall -> centre at 64px) and span from first to last image centre. */
.process-section .process-wrapper .process-line {
  top: 63px;
  left: calc(16.666% - 16px);
  right: calc(16.666% - 16px);
  height: 0;
  background: none;
  border-top: 2px dashed rgba(129, 117, 110, .35);
}
@media (max-width: 767.98px) {
  .process-section .process-wrapper .process-line { display: none; }
}

/* Bootstrap's .row.g-5 has a -3rem top margin that leaks out of the wrapper and shifts the images
   48px below the wrapper's top edge; contain it so the line's 64px offset equals the image centre. */
.process-section .process-wrapper { display: flow-root; }