/* Inline <style> blocks from the live page /rewards-terms (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. */
@media screen and (min-width: 1200px) {
.recipes-details .image-slider .image {
min-height: 850px !important;
}
}
a:focus {
    display: initial;
    }
    #herotitle {
    display: flex;
    background: var(--wd-color-surface-alt) !important;
    align-items: center;
    justify-content: space-between;
    }
    #herotitle h1 {
    margin: 0px 5px 0px 80px;
    color: var(--wd-color-text);
    font-weight: 700;
    letter-spacing: -0.59px;
    width: 305px;
    }
    #herotitle p {
    margin: 13px 0px 0px 80px;
    color: var(--wd-color-text);
    letter-spacing: -0.22px;
    }
    .headingdescription {
    max-width: 400px;
    }
    @media (min-width:1200px) {
    #herotitle p {
    font-size: 1.125em;
    }
    .rewards__terms .card {
    font-size: 1.125em;
    }
    .rewards__terms h3 {
    font-size: 18px !important;
    }
    }
    body {
    background: #fff !important;
    margin: 0;
    }
    h2 {
    font-family: var(--wd-font-body) !important;
    font-weight: 700;
    font-size: 22px;
    color: var(--wd-color-brand-red);
    margin: 32px 0px 16px 0px;
    }
    /* "p > a" neutralized (not deleted, kept for provenance): live's own copy of this rule is
       HTML-escaped in its source <style> tag ("p &gt; a"), so the child-combinator selector is
       unreadable to any CSS parser there and NEVER actually fires on live — confirmed via a
       computed-style measurement pass showing live's mailto: link (customerresponse@segrocers.com,
       a plain <a> nested in a <p>, no explicit class) renders default link blue/normal-weight,
       not this rule's red/bold. This app's copy is a literal (non-escaped) extraction, so the
       selector is genuinely valid CSS here and WOULD fire, diverging from live — neutralized to
       reproduce live's actual (buggy) behavior rather than "fixing" a bug live itself never
       fixed. Same documented bug as JsonRte.cs's own "p > a" comment.
    p > a {
    color: var(--wd-color-brand-red) !important;
    text-decoration: none;
    font-weight: bold;
    } */
    .rewards_link {
    color: var(--wd-color-brand-red) !important;
    text-decoration: none;
    font-weight: 700;
    }
    .mobnumlink, .mobnumlink:focus {
    color: var(--wd-color-brand-red) !important;
    text-decoration: none;
    font-weight: 700;
    display: inline-table;
    }
    .clickhere {
    text-decoration: none;
    }
    .container-fluid {
    max-width: 100% !important;
    }
    .BrdCrmbTbl {
    display: none !important;
    }
    .rewards__terms .card {
    width: 100%;
    padding: 25px 80px;
    margin-left: auto;
    margin-right: auto;
    font-family: var(--wd-font-body) !important;
    margin-bottom:40px;
    }
    @media screen and (max-width: 1200px) {
    #herotitle {
    min-height: 117px;
    }
    .rewards__terms .card {
    width: 100%;
    margin-top: 0px;
    }
    .rewards__terms .card:last-child {
    margin-bottom: 48px;
    }
    }
    @media screen and (max-width: 767px) {
    #herotitle h1 {
    padding: 5px;
    width: auto;
    }
    }
    .Reward_list {
    list-style: disc;
    font-size: 1em;
    margin-left: 30px;
    color:var(--wd-color-text);
    }
    @media (min-width: 992px) {
    .mobnumlink {
    cursor: default;
    text-decoration: none;
    }
    }
    .mainContentAlign.col-md-12.col-lg-12 {
    display: none;
    }
    @media (min-width: 768px) {
    .container {
    width: 100%;
    }
    }
    @media (max-width: 767px) {
    #herotitle h1 {
    text-align: center;
    margin: 24px 50px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    #herotitle p {
    margin: 0px 24px;
    text-align: center;
    }
    .header_sec {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    }
    }
    #herotitle img {
    margin-left: auto;
    }
    #herotitle {
    display: flex;
    background: var(--wd-color-surface-alt) !important;
    align-items: center;
    justify-content: space-between;
    }
    @media (max-width:767px) {
    #herotitle h1 {
    text-align: center;
    margin: 24px;
    }
    #herotitle {
    display: flex;
    background: var(--wd-color-surface-alt) !important;
    flex-direction: column-reverse;
    }
    }
    @media (max-width: 767px) {
    .card {
    padding: 25px 24px !important;
    }
    }
    @media (min-width:768px) and (max-width: 992px) {
    .card {
    padding: 42px 32px 24px 32px !important;
    }
    }
    .rewards__terms a:hover, .rewards__terms a:focus {
    text-decoration: underline;
    }
    .rewards__terms p {
    color: var(--wd-color-text);
    }
    @media (min-width: 768px) and (max-width: 992px) {
    #herotitle h1 {
    margin: 0px 5px 0px 32px;
    }
    .headingdescription {
    margin: 16px 40px 0px 32px !important;
    }
    }
    .col-sm-12 {
    padding: 0;
    }
    @media (max-width: 767px) {
    .headingdescription {
    max-width: initial;
    }
    }
    .rewards__terms h3 {
    font-size: 16px;
    margin: 0;
    color: var(--wd-color-text);
    }
.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;
		}
/* Not part of the verbatim extract above — added locally. The entry's own pagetext blob's
   "customerresponse@segrocers.com" mailto: link carries no class at all, so with "p > a"
   correctly neutralized above (see that rule's own comment) nothing sets its text-decoration,
   and the global bundles/css/app-wd-global.css "a, a:focus, a:hover, a:visited { text-decoration:
   underline }" rule wins the cascade over bundles/css/refresh.min.css's "a { text-decoration:
   none }" (same specificity, later in load order) — underlining it, unlike live. Confirmed via
   computed-style measurement that live shows it with no underline (plain default-blue text).
   Scoped to mailto:/tel: hrefs specifically, not every link on the page — other body links here
   (e.g. #chapterN-style anchors, if any) carry their own explicit classes and are unaffected. */
a[href^="mailto:"], a[href^="tel:"] {
    text-decoration: none;
    }