/* Inline <style> blocks from the live page /ourbrands (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;
}
}
section.ob-banner-section {
    margin-bottom: 60px;
}
div.banner-header-main {
    position: absolute;
    top: 35%;
    left: 15%;
}
h1.ob-banner-txt {
    background-color: var(--wd-color-brand-red);
    color: #fff;
    font-size: 6em;
    padding: 12px 24px;
    border-radius: 12px;
}
@media (max-width: 991px) and (min-width: 768px) {
    div.banner-header-main {
        top: 25%;
    }
    h1.ob-banner-txt {
        font-size: 1.875em;
    }
}
@media (max-width: 767px) {
    h1.ob-banner-txt {
        font-size: 1.875em;
        padding: 12px;
    }
div.banner-header-main {
    left: 5%;
top: 15%;
}
}
* {

    padding: 0;

    }

    body {

    background:#fff !important;

    overflow-x: hidden;

    }

    h3 {

    font-family: var(--wd-font-body);

    font-size: 2.25em;

    font-weight: bold;

    font-stretch: normal;

    font-style: normal;

    line-height: normal;

    letter-spacing: -.59px;

    color: var(--wd-color-brand-red);

    margin-top: 50px;

    margin-bottom: 20px;

    }

    h4 {

    font-family: var(--wd-font-body);

    font-size: 1.375em;

    font-weight: bold;

    font-stretch: normal;

    font-style: normal;

    line-height: 1.18;

    letter-spacing: -.25px;

    color: var(--wd-color-brand-red);

    }

    p {

    font-family: var(--wd-font-body);

    font-size: 1em;

    font-weight: normal;

    font-stretch: normal;

    font-style: normal;

    line-height: 1.38;

    letter-spacing: -.25px;

    color: var(--wd-color-text);

    margin-bottom: 10px;

    }

    .BrdCrmbTbl.hidden-xs.hidden-sm {

    display: none;

    }

    .learnmore {

    display:none;

    }

    .card-block__link  {

    display:none !Important;

    }

    .full-width {

    left: 50%;

    margin-left: -50vw;

    margin-right: -50vw;

    max-width: 100vw !important;

    position: relative;

    right: 50%;

    width: 100vw

    }

    section.container-fluid.wd-trending.p-0 {

    left: 50%;

    margin-left: -50vw;

    margin-right: -50vw;

    max-width: 100vw !important;

    position: relative;

    right: 50%;

    width: 100vw;

    }

    img.collage-img {

    padding: 0 10px;

    margin-top: 85px;

    }

    /* app-wd-global.css's ".container-fluid__full .container" carries THREE unscoped/width-tiered
       rules (0,2,0 specificity each): a base "{padding-right:22px;padding-left:22px}" active at
       every width, plus "{width:970px;padding:15px}"/"{width:750px;padding:15px}"/
       "{width:1170px;padding:15px}" that only add a width at 768/992/1200px (Bootstrap-3-style
       tiers) without ever un-setting that base 22px padding. Live's own ".promo_main_container"
       measures 0px padding at every desktop/tablet width and exactly 12px at <=767px instead
       (confirmed via direct getComputedStyle reads against live at both 1440px and 390px
       viewports) — a mismatch that cascades into every child of both ".promo_main_container"
       instances on this page (the "Swap the label" promo block and the "Our Brands" brand-card
       grid alike), since 22px/base-rule beats this file's own ".px-12" mobile rule (0,1,0) on
       specificity regardless of source order. No equivalent override exists in this app's own
       bundles for ".promo_main_container" itself (grepped app-wd.min.css/app-wd.css/
       refresh.min.css/WDMarketing.css — none define it), so it's pinned here instead, matching
       the winning rule's own compound-selector shape plus this page's own class (0,3,0 total) to
       unambiguously outrank it at every width — split by the same >=768px floor the width tiers
       above use, so the two values (0 desktop/tablet, 12px mobile) apply exactly where live's own
       do, with no gap or overlap between them. */
    @media (min-width: 768px) {
        .container-fluid__full .container.promo_main_container {
            padding-left: 0;
            padding-right: 0;
        }
    }
    @media (max-width: 767px) {
        .container-fluid__full .container.promo_main_container {
            padding-left: 12px;
            padding-right: 12px;
        }
    }

    /* Same app-wd-global.css rule's WIDTH half, not just its padding: its 992–1199px tier sets
       width:970px (the standard Bootstrap "md" container width) — but live's own
       .promo_main_container doesn't follow the 3-tier 750/970/1170 system at all here. Measured
       directly against live by binary-searching the actual transition points (not assumed from
       Bootstrap docs): computed width:992px/max-width:1170px at a 992px viewport — i.e. no
       tier-locked width in this range at all, just 100% of the ambient column capped at 1170px,
       same pattern as the "know & love" image below. Confirmed via getBoundingClientRect: without
       this, local rendered 970px/970px-tier-shaped here against live's actual full-width-until-
       1170px column, a ~22–65px cascading offset through the whole page below it depending on
       viewport that a 1440px/390px-only check never caught. The 768–991px tier (750px) and the
       >=1200px tier (1170px) already match live unmodified; only this one tier is wrong. */
    @media (min-width: 992px) and (max-width: 1199px) {
        .container-fluid__full .container.promo_main_container {
            width: 100%;
            max-width: 1170px;
        }
    }

    /* The "ob-brands" legacy_html fragment's leading <img> (the "know & love" banner) carries no
       container class of its own in the CMS's raw pagetext — live still renders it centered at
       ~1170px, which on live comes from an ambient wrapper this app has no equivalent of (a
       generic Sitecore placeholder container div that isn't part of the CMS field's own HTML
       string, so it can't be reproduced by rendering that field verbatim). Without this the
       image stretches to the full 1440px viewport instead (confirmed via getBoundingClientRect:
       w=1440 vs live's 1170, height overshooting by the same ~57px this pushed every section
       below it down by). Selects on the adjacent-sibling relationship rather than adding a
       wrapper <div> this app's markup doesn't have — safe since .promo_main_container only
       exists on /ourbrands.
       max-width, not width — the CMS's own inline "width:100%" still does the stretching within
       this cap, so if a future asset naturally renders at less than 1170px, this rule doesn't
       force it wider than intended (matching .img-responsive's own max-width-only reasoning
       everywhere else on this page).
       NOT a plain 3-tier Bootstrap .container (750/970/1170) — measured directly against live at
       every breakpoint (binary-searched the exact transition points, not assumed): full viewport
       width below 768px, a hard 750px cap from exactly 768–991px, back to full viewport width
       from 992px up to 1169px, then capped at 1170px from 1170px up. There is no 970px tier at
       all — confirmed live renders full-width (not 970px) at 992–1169px. A flat max-width:1170px
       alone reproduces everything except the 768–991px range (which is narrower than 1170, so
       the cap never engages there) — confirmed via getBoundingClientRect: local rendered full
       991px width there instead of live's 750px, a ~50px cascading offset through every section
       below it that a 1440px/390px-only pixel check never caught. */
    img.img-responsive:has(+ .promo_main_container) {
        width: 100%;
        max-width: 1170px;
        margin: 0 auto;
        display: block;
    }
    @media (min-width: 768px) and (max-width: 991px) {
        img.img-responsive:has(+ .promo_main_container) {
            max-width: 750px;
        }
    }

    .promo_main_container .promo_container img {

    width: 100%;

    height: auto;

    min-height: 170px;

    }

    .promo_main_container .promo_container {

    background-color: #fff;

    padding: 0 15px;

    }

    .padding-40 {

    padding:40px 0px;

    }

    .row.margin_0_15 {

    margin-left: -15px;

    margin-right: -15px;

    }

    .container .promo_main_container , .container .whats-new-trending {

    max-width:1170px;

    }

    .logoblock-p{

    margin-top:10px;

    }

    .wd-trending .whats-new-trending .wd-dealtext p {

    margin-bottom: 39px;

    }

    .wd-trending .whats-new-trending .whats-new-promo .bx-wrapper .bxSlider__card .card-block .card-block__text {

    max-height: 110px;

    }

    @media (max-width: 767px) and (min-width: 100px){

    .promo_container {

    margin-bottom: 25px;

    }

    .px-12 {

    padding: 0 12px;

    }

    .container .promo_main_container , .container .whats-new-trending {

    padding: 0 12px;

    }

    h3 {

    margin-top: 30px;

    margin-bottom: 20px;

    }

    img.collage-img {

    padding: 0 12px;

    }

    }

    /* .seg {background:#333;}

    .pres {background:#000;}

    .nb {background:#E8E6DF;}

    .ess {background:#FFF000;} */
.search-section {
      flex-direction: row !important;
  }
  .pharmacy-search-section .pro-inner .d-lg-flex .pro-inner-info {
      width: fit-content;
  }
  section#pharmacysearch {
      width: fit-content;
      padding: 0 18px;
      margin: 32px auto;
  }
  @media (max-width: 767px) {
      .search-section {
          flex-direction: column !important;
      }
  }
.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;
		}