/* Inline <style> blocks from the live page /about/contact (winndixie.com), extracted verbatim.
   The live site ships these inside the CMS-authored HTML; the Contentstack entries hold
   only structured content, so they are re-attached here per page. */

/* Un-caps the shared page shell for THIS ROUTE ONLY. _app-wd-legacy-content.scss:15325 caps
   .container-fluid__full at max-width:1170px on purpose — live's own rule there sets only
   background-color, and the cap compensates for ~18 page templates that render straight from
   that wrapper without the nested .container live uses to constrain width. See that rule's own
   comment; it must not be removed globally.
   /about/contact is not one of those pages: live renders it full-viewport-width (live's own
   #Contacts measures 1512px at a 1512px viewport, its wrapper chain being
   .container-fluid topBg padding_0 → .container padding_0 → .container padding_0 usehd, all at
   100%). This page also never saw the cap until /bundles/css/app-wd.css was added to its
   PageCssMap entry for the "Find a Store" modal — adding the bundle activated a rule the route
   had never carried, narrowing every container inside it from 1512px to 1170px, which is what the
   two #Contacts/#aboutContactFormSection overrides below were then powerless to fix (their
   width:100% resolved against a 1170px parent). Scoped here because about_contact.css is loaded
   on this route alone, so the other ~18 shells keep the cap. */
.container-fluid__full {
  max-width: 100%;
}

/* Live's #Contacts.container isn't nested inside a .container-fluid__full ancestor (its actual
   page template differs from DynamicPage.razor's generic wrapper), so only the page's own
   ".container{width:100%}" rule (contactUs-wd.scss) applies, making it full-width. Our version IS
   nested inside .container-fluid__full, so the higher-specificity ".container-fluid__full
   .container{width:1170px}" rule (app-wd.min.css) wins instead, narrowing it. This ID-scoped
   override restores the full-width behavior without touching the shared DynamicPage wrapper. */
#Contacts.container {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Same fix as #Contacts above, applied to the contact-form section's own .container wrapper
   (also nested inside .container-fluid__full, also picking up the higher-specificity
   1170px rule live's version never encounters). */
#aboutContactFormSection.container {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
@media screen and (min-width: 1200px) {
.recipes-details .image-slider .image {
min-height: 850px !important;
}
}
.font-bold, .pt-10 li {
        font-size: 18px;
    }

    .ContactUs-HeaderImage {
        padding: 0;
    }

       @media (min-width: 768px) and (max-width: 991px) {
        .ContactUs-heading h2 {
            width: 75%;
            margin: 0;
            margin-top: 0;
            padding-bottom: 16px;
        }
    }

	.ContactUs-heading .holiday {
        font-weight: bold;
        margin-top: 16px;
	}

	@media only screen and (max-width: 767px) {
		.ContactUs-Header {
			display: inline-block !important;
		}
	}
.container-div.Location-Section {
    margin: 0 auto;
    float: none;
    }
    .contactus-section .Location-Section h3.title_h3{
    color: var(--wd-color-brand-red);
    }
    .container-div.Location-Section .description {
    font-family: var(--wd-font-body);
    font-size: 1.125em;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: 24px;
    letter-spacing: -.22px;
    color: var(--wd-color-text);
    }
    .container-div.Location-Section .description a {
    font-family: var(--wd-font-body);
    font-size: 1.125em;
    font-weight: 400;
    font-stretch: normal;
    font-style: normal;
    line-height: 24px;
    letter-spacing: -.22px;
    color: var(--wd-color-brand-red);
    text-decoration: underline;
    }
@media (min-width: 992px) {
		.contactus_bottom_section {
			margin-top: 170px;
		}

			.contactus_bottom_section .container .contactus-address {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				align-content: space-around;
			}
	}

	@media (min-width: 768px) and (max-width: 991px) {
		.contactus_bottom_section {
			margin-top: 86px;
		}
	}
.contactus_bottom_section .container .contactus-address {
    padding: 0;
}
.contactus_bottom_section .container .contactus-call-section {
    padding: 0;
}
	
@media screen and (min-width: 992px) {
    .contactus_bottom_section .container .contactus-address :nth-child(3) {
        margin-top:24px !important;
    }
}
:root {
    --wd-red: #cc0000;
    --wd-dark: #2c2c2c;
    --wd-light: #ffffff;
    --wd-shadow: rgba(0, 0, 0, 0.15);
  }

 #chat-prompt {
    position: fixed;
    bottom: 137px;
    right: 51px;
    background: var(--wd-light);
    border-left: 5px solid var(--wd-color-brand-red);
border-bottom: 2px solid var(--wd-color-brand-red);
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    font-family: var(--wd-font-body);
display: flex !important;
  }
#chat-prompt:before {
    border: none;
    font-family: "Font Awesome 5 Free";
    content: "";
    display: inline-block;
    vertical-align: middle;
    font-weight: 900;
    color: var(--wd-color-brand-red);
    position: absolute;
    bottom: -4px;
    right: 35px;
    margin: 0 auto;
    z-index: 100;
    line-height: 0;
    font-size: 26px;
}

  .chat-pubble-content {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: pulse 2s infinite;
  }

  .chat-emoji {
    font-size: 30px;
    display: inline-block;
    animation: robotBounce 2s ease-in-out infinite;
  }

  .chat-title {
    font-weight: bold;
    font-size: 16px;
    color: var(--wd-dark);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .chat-subtext {
    font-size: 13px;
    color: #666;
  }

  .chat-close {
    background: none;
    border: none;
    font-size: 16px;
    margin-left: 10px;
    cursor: pointer;
    color: var(--wd-dark);
  }

  .chat-alert-dot {
    font-size: 12px;
    animation: blink 1s infinite, glow 1.5s infinite;
  }

  #chat-prompt.show {
    opacity: 1;
    transform: translateY(0);
  }

  @keyframes floatIn {
    0% { transform: translateY(40px); opacity: 0; }
    60% { transform: translateY(-10px); opacity: 1; }
    80% { transform: translateY(5px); }
    100% { transform: translateY(0); }
  }

  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
  }

  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }

  @keyframes glow {
    0% { text-shadow: 0 0 5px var(--wd-red); }
    50% { text-shadow: 0 0 12px var(--wd-red); }
    100% { text-shadow: 0 0 5px var(--wd-red); }
  }

  @keyframes robotBounce {
    0% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-2px) rotate(-3deg); }
    50% { transform: translateY(2px) rotate(3deg); }
    75% { transform: translateY(-2px) rotate(-2deg); }
    100% { transform: translateY(0) rotate(0deg); }
  }

#webchat a {
    color: #337ab7;
    cursor: pointer;
    white-space: nowrap;
}
                /* Chatbot header font */
                #webchat-banner h1 {
                    color: #FFFFFF;
                    font-family: var(--wd-font-body);
                    font-weight: bold;
                    font-size: 16px;
                    line-height: 22px;
                    letter-spacing: -0.22px;
                    margin: 0;
                }

                #webchat-banner .header-content-close-btn {
                    background-color: inherit;
                    border-radius: 50%;
                    overflow: hidden;
                    padding: 3px;
                    width: 28px;
                    height: 28px;
                    border: none;
                    display: flex;
                    align-items: center;
                    justify-content: center
                }

                    #webchat-banner .header-content-close-btn:hover {
                        background-color: #ff0000;
                    }

                #webchat-banner .chatClosebtn:hover {
                    background-color: #ff0000;
                }

                /* Chatbot header box */
                #webchat-banner {
                    align-items: center;
                    background-color: var(--wd-color-brand-red);
                    display: flex;
                    height: 50px;
                    padding: 0 20px;
                    justify-content: space-between;
                    border-radius: 15px 15px 0 0;
                }

                /* Controls display of chat window */
                #webchat {
                    height: calc(100% - 50px); /* Leave room for the banner header */
                    overflow: hidden;
                    position: absolute;
                    top: 50px; /* Display below the banner header */
                    width: 100%;
                    border-radius: 0 0 15px 15px;
                    box-shadow: rgba(0, 0, 0, 0.05) 0px 41px 20px 0px, rgba(0, 0, 0, 0.05) 0px 0px 20px 0px;
                }

                    /* Controls styling of webchat text elements */
                    #webchat p, #webchat span, #webchat ol, #webchat ol li, #webchat input {
                        font-family: var(--wd-font-body);
                        font-size: 14px;
                        line-height: 20px;
                        letter-spacing: -0.23px;
                        color: var(--wd-color-text);
                    }

                    /* Timestamp */
                    #webchat .webchat__stacked-layout__status span {
                        font-size: 12px;
                        line-height: 18px;
                        letter-spacing: -0.17px;
                        /* --wd-color-text-muted, not --wd-color-text: the timestamp is one of the
                           two roles that token was added for (see _wd-colors.scss's text-muted
                           comment). That token's default is also the exact gray live authors
                           here, so --wd-color-text was a real mismatch against live, not just a
                           token choice. Same fix in ChatbotWidget.razor.css, which now owns these
                           rules for both of the widget's routes. */
                        color: var(--wd-color-text-muted);
                    }

                    /* Suggested actions */
                    #webchat span.webchat__suggested-actions__button-text {
                        color: var(--wd-color-brand-red);
                        font-weight: bold;
                    }

                    /* Prevents parent page input/button color style from applying */
                    #webchat input, #webchat button {
                        outline: none !important;
                    }

                    /* Override parent header style */
                    #webchat header {
                        position: static;
                    }

                    /* Override parent page ordered list style */
                    #webchat ol, #webchat ol li {
                        list-style-type: decimal;
                        margin-left: 10px;
                    }

                    /* Login Button */
                    #webchat .ac-pushButton {
                        background-color: var(--wd-color-brand-red);
                        color: #FFFFFF;
                        font-weight: bold;
                        border-radius: 6px;
                        border: 1px solid var(--wd-color-brand-red);
                    }

                    /* Input placeholder text */
                    #webchat ::placeholder {
                        font-family: var(--wd-font-body);
                        font-size: 14px;
                        line-height: 20px;
                        letter-spacing: -0.23px;
                        /* The send-box placeholder is the other --wd-color-text-muted role. */
                        color: var(--wd-color-text-muted);
                    }

                    /* Arrow icon for suggested options */
                    #webchat .react-film__flipper__body {
                        background-color: var(--wd-color-brand-red);
                    }

                .chatbotModel {
                    position: absolute !important;
                    z-index: 6000;
                    height: 100%;
                    width: 100%;
                    align-items: center;
                    justify-content: center;
                    border-radius: 15px;
                    background-color: var(--modal-overlay-bgcolor);
                    -webkit-backdrop-filter: blur(15px);
                    backdrop-filter: blur(15px);
                    opacity: inherit;
                }

                    .chatbotModel .chatInitial {
                        position: absolute !important;
                        z-index: 6000;
                        height: 100%;
                        width: 100%;
                        display: flex !important;
                        align-items: center;
                        justify-content: center;
                        border-radius: inherit;
                        background-color: var(--modal-overlay-bgcolor);
                        -webkit-backdrop-filter: blur(15px);
                        backdrop-filter: blur(15px);
                    }

                .chatDialog {
                    border-radius: 10px;
                    background-color: #ffffff;
                    z-index: 6001;
                    position: relative;
                    /* margin: 25px; */
                    box-shadow: #63636333 0 2px 8px;
                    /* padding: 10px 8px; */
                    text-align: center;
                    width: 225px !important;
                    color: var(--modal-title-color,var(--color-typography-dark))
                }

                .chatbotModel .modal-header {
                    border-bottom: none !important;
                }

                .chatbotModel .modal-content {
                    background: #ffffff;
                }

                /* Live's own declarations for this modal's content, copied verbatim from its
                   .clsdivContactUsHolder .modal-content rule (already in this repo at
                   _app-wd-legacy-content.scss:2293) and re-scoped to this modal's id — on live
                   #myModal sits INSIDE .clsdivContactUsHolder, whereas here
                   #contactFindStoreModal is a sibling of that wrapper, so the rule never reached
                   it. Both declarations matter:
                     background:#fff — WDMarketing.css's bare .modal-content{background:
                       var(--wd-color-brand-red)} otherwise wins on every modal on the site;
                     height:92% — the definite height that .ClsModalBody's own height:90% needs
                       to resolve against. Without it the body had no definite parent, fell back
                       to auto, grew to its full content height and never scrolled.
                   Together with .Popdvmodal{height:100%} and .ClsModalBody{height:90%;
                   overflow:auto} (both already in the app-wd.css bundle) this is live's complete
                   sizing chain: dialog 100% of viewport, content 92% of that, body 90% of that
                   and scrolling. live's third declaration — its text color forced to the
                   retired #333 gray via !important — is the one thing not carried over: the
                   2026-08-21 rebrand retired that gray for var(--wd-color-text), which the
                   repo's own copy of the rule already uses. */
                #contactFindStoreModal .modal-content {
                    background: #fff;
                    height: 92%;
                }

                /* The sitewide sticky header (.sticky-header-group, z-index:9999) renders above
                   this modal's z-index:1050, cutting off "Find a Store" behind the red bar.
                   Rather than just out-z-indexing it (which would still leave the header
                   occupying the same visual space underneath), hide it outright while this
                   modal is open so the modal genuinely starts at the very top of the viewport —
                   scoped to THIS modal specifically (via :has()) so other modals on the site
                   (which don't hide the header) are unaffected. */
                body:has(#contactFindStoreModal.in) .sticky-header-group {
                    display: none;
                }

                /* _app-wd-legacy-content.scss's red .StoreBorderBottom rule is scoped to
                   .clsdivContactUsHolder (the inline form's own wrapper) — #contactFindStoreModal
                   is a sibling of that div, not a descendant, so it only picks up the OTHER,
                   unscoped .StrFind_Main .StoreBorderBottom{border-bottom:2px solid #fff} rule
                   (invisible on this modal's white background). Overridden here to match live's
                   visible red divider under "Cancel" without moving the modal into that wrapper
                   (which would also pull in that div's own box-shadow/border/padding).
                   Live still serves its own pre-rebrand red literal here, but this uses the token
                   deliberately: the 2026-08-21 rebrand swept that literal into
                   var(--wd-color-brand-red), and this repo's copy of the very rule being mirrored
                   (_app-wd-legacy-content.scss:2313) already carries the token. Reintroducing the
                   literal would contradict that rule and leave lint-brand-tokens.sh permanently
                   red on a line that's expected to be red — which is how a guardrail stops being
                   read (PR #111 review). The shade delta from live is imperceptible. */
                #contactFindStoreModal .StoreBorderBottom {
                    border-bottom: 2px solid var(--wd-color-brand-red);
                }

                /* Live's own inner inset for this modal's content (its .ClsModalsdiv computes to
                   padding-left:18px / padding-right:1px — verified via CDP 2026-08-25). Without
                   it every row inside started 18px further left than live's and the whole inner
                   block measured 948px wide against live's 929px, which cascaded into wider
                   result/map columns. Asymmetric because that's genuinely what live renders. */
                #contactFindStoreModal .ClsModalsdiv {
                    padding-left: 18px;
                    padding-right: 1px;
                }

                /* Live's Search/Cancel buttons in this modal use the pre-rebrand red; the token is
                   used instead for the same reason as the divider above — that literal is on the
                   rebrand's retired list, and hardcoding it here would keep lint-brand-tokens.sh
                   red by design (PR #111 review). With the token this rule now matches what
                   .StrFind_Main .ContctBtnSearch already resolves to in contactUs-wd.scss, so
                   it's kept only as an explicit statement of intent for this modal rather than
                   because it changes anything today. */
                #contactFindStoreModal .ContctBtnSearch {
                    background-color: var(--wd-color-brand-red);
                    border-color: var(--wd-color-brand-red);
                }

                /* .ContctBtnSearch's shared 10px margin-left (_app-wd-legacy-content.scss) is
                   correct on its own, but this column's inherited text-center (from the shared
                   .StrFind_Main search-row markup) then ALSO centers the button within its
                   col-md-2 — the button (~113px) is narrower than the column (~158px), so
                   centering added ~17px of blank space on top of the 10px margin, opening a much
                   bigger gap than live's own ~10px between the zip box and Search (confirmed via
                   CDP 2026-08-25). Left-aligning here removes just the extra centering, leaving
                   the shared 10px margin as the only gap, matching live. */
                #contactFindStoreModal .col-md-2.text-center {
                    text-align: left;
                }

                /* Live's own .str-dtl-mar15 wrapper spacing around the "Store Results" summary
                   line and the Prev/1/2/3/Next pager — 15px above and below each, measured off
                   live's computed styles (2026-08-25). */
                #contactFindStoreModal .str-dtl-mar15 {
                    margin-top: 15px;
                    margin-bottom: 15px;
                }

                /* Live's "Store Results" label is NOT bold (getComputedStyle on
                   winndixie.com/about/contact's own .clsStrReslbl reads font-weight:400) —
                   confirmed via CDP 2026-08-25, the 700 here was never actually matching live. */
                .store-results-label {
                    font-weight: 400;
                }

                .store-select-hint-col {
                    text-align: right;
                }

                /* The hint's colour/size/weight are NOT set here: .Contact-error (the class live
                   puts on this wrapper, already in this repo's contactUs-wd.css) supplies
                   color:#be3a31, font-weight:700, font-size:.875em and line-height:20px, and the
                   span inherits all four — exactly live's cascade.
                   The one thing that must be undone is that same rule's margin-bottom:-15px
                   (with a -12px companion). It's there for the inline form, where .Contact-error
                   is a validation message that should sit tight under its field. In this modal
                   the next sibling is the 350px map, so the negative margin dragged the map UP
                   over the hint and clipped the text in half. Live computes margin-bottom:0px on
                   this wrapper, which is what's restored. */
                #contactFindStoreModal .Contact-error {
                    margin-bottom: 0;
                }

                /* Live's numbered result rows read as plain clickable text (number + store code +
                   address), not a bordered/buttoned box. The leading number is rendered as an
                   explicit span (contactForm.js), not the <ol>'s native marker — a sitewide
                   ul,li,ol{list-style:none} reset applies directly to <li> (surviving even a
                   higher-specificity list-style-type override), and separately, a block-level,
                   multi-line <button> as the li's sole child anchors the native marker to its
                   LAST line instead of its first. An explicit span sidesteps both. */
                .contact-store-results-list {
                    list-style: none;
                    padding-left: 0;
                    margin: 8px 0;
                }

                /* gap/margin measured off live: its number cell and address text sit ~17px apart
                   and consecutive rows butt directly together (no gap between rows at all — each
                   row's own 4×17px line box provides the visual separation). */
                .contact-store-results-list li {
                    display: flex;
                    align-items: flex-start;
                    gap: 17px;
                    margin-bottom: 0;
                }

                /* Color comes from .font-clr-gray (_app-wd-legacy-content.scss, already loaded via
                   the app-wd.css bundle) applied directly on these elements in contactForm.js —
                   the same class live's own markup uses on both the number span and the store
                   link, confirmed against live's DOM. Not redeclared here to avoid a second,
                   possibly-drifting source of truth for that color. */
                .contact-store-num {
                    flex: 0 0 auto;
                    font-family: var(--wd-font-body);
                    font-size: 1em;
                }

                /* font-weight:700 and line-height:17px both come straight off live's own computed
                   styles for these result links (2026-08-25) — the address block there is bold and
                   set tight, which is most of why the untouched version read as a different, looser
                   list than live's. */
                .contact-store-results-list li button {
                    display: block;
                    flex: 1 1 auto;
                    background: none;
                    border: none;
                    padding: 0;
                    margin: 0;
                    text-align: left;
                    font-family: var(--wd-font-body);
                    font-size: 1em;
                    font-weight: 700;
                    cursor: pointer;
                    line-height: 17px;
                    /* 4×17px of line boxes = 68px, but live's row measures 72px: its result text
                       is an inline <a>, whose box picks up the font's full ascent/descent past the
                       line-height, where this block-level <button> doesn't. Made up explicitly so
                       the row pitch (and therefore where every row after the first lands) matches
                       live rather than drifting 4px per row down the list. */
                    padding-bottom: 4px;
                }

                .contact-store-pager {
                    margin-bottom: 15px;
                }

                .contact-store-pager button {
                    background: none;
                    border: none;
                    padding: 4px 8px;
                    font-family: var(--wd-font-body);
                    color: var(--wd-color-text);
                    cursor: pointer;
                }

                .contact-store-pager button:disabled {
                    color: var(--wd-color-border);
                    cursor: default;
                }


                .chatbotModel .modal-footer {
                    display: flex !important;
                    justify-content: space-between;
                }

                button.chatClosebtn {
                    background-color: inherit;
                    border-radius: 50%;
                    overflow: hidden;
                    padding: 3px;
                    width: 28px;
                    height: 28px;
                    border: none;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .chatbotModel .chatBtn {
                    width: 80px;
                    font-family: var(--wd-font-body);
                    font-size: 1.0em;
                    font-weight: bold;
                    font-stretch: normal;
                    font-style: normal;
                    line-height: 1.22;
                    letter-spacing: -.25px;
                    text-align: center;
                    float: right;
                    right: 0;
                    color: #fff;
                    background-color: var(--wd-color-brand-red);
                    border: 1px solid var(--wd-color-brand-red);
                    border-radius: 6px;
                    -webkit-transition: background-color .2s ease-out;
                    -moz-transition: background-color .2s ease-out;
                    -o-transition: background-color .2s ease-out;
                    transition: background-color .2s ease-out;
                }

                    .chatbotModel .chatBtn:hover {
                        background-color: var(--wd-color-primary-hover) !important;
                        border: 1px solid var(--wd-color-primary-hover);
                        color: #fff;
                    }
.z-banner {
        z-index: 55555 !important;
    }

    .ps-fixed {
        position: fixed !important;
    }

    .bg-yellow-700 {
        background-color: #F8EC74;
        opacity: .92;
    }

    .fc-black {
        color: #000;
    }

    .wmx8 {
        max-width: 64.8205128rem;
    }

    .mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

    .grid {
        display: flex;
    }

    .jc-center {
        justify-content: center;
    }

    .mr12 {
        margin-right: 10%;
        font-size : 1em;
    }

    #cookieBar a {
        cursor: pointer;
        text-decoration: underline;
    }
 #cookieBar p {
    margin-bottom : 0px;
  }
    .svgClose {
        float: right;
        margin-top: -21px;
        margin-right: 33px;
    }

    .paddingBar {
        padding: 20px;
        right: 0px;
        left: 0px;
        bottom: 0px;
    }


    .s-link {
        color: #000 !important;
    }

      @media screen and (min-width:100px) and (max-width:992px) {
        .paddingBar {
            right: -27px;
        }
    }
@media screen and (min-width:320px) and (max-width:568px) {
.svgClose {
    float: right;
    margin-top: -43px;
    margin-right: 20px;
}
.mx-auto {
    margin-left: -7px;
}
}
@media screen and (min-width:375px) and (max-width:667px) {
.mr12 {
    margin-right: 31px;
}
.svgClose {
    margin-top: -30px;
}
}
.async-hide {
			opacity: 0 !important;
		}