/* Doritos native Fabricator blocks — self-contained, on-brand styling.
   Mirrors the original theme (black #090909, white text, red #f30006 accent,
   centred 1180px container) without depending on per-page body classes, so
   every block renders correctly on any page. */

/* --- Restore the Doritos content width ---
   Tailwind's utility build (loaded just before this file) defines its own
   `.container` with breakpoint max-widths (e.g. 64rem/1024px) and no centring,
   which narrows and left-aligns the theme's 1180px centred container. Re-assert
   the theme value here (this file loads last). More specific theme rules such as
   `.home-slides > .container { max-width: 100% }` still win where they apply. */
.container {
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}

/* --- Home product carousel images ---
   The carousel is driven natively by app.min.js (items:5, centre, loop) exactly
   as on the live site, using the same `_thumb` crops. owl sets
   `.owl-item img{width:100%}`, which — combined with the theme's
   `max-height:220px` — squashes the taller portrait bags to the item width.
   Force natural aspect instead (width follows the image, capped by the theme's
   max-width/height) so bags and square salsas keep their proportions. */
#products .thumbnails-slider .thumbnail .img {
    width: auto;
}

/* owl's `.owl-stage-outer` clips with overflow:hidden, which crops the top and
   bottom off the enlarged centre pack shot. Let the row overflow vertically —
   `#products { overflow:hidden }` still clips the off-stage items horizontally,
   and the added padding gives the scaled centre item somewhere to grow into. */
#products .thumbnails-slider {
    padding-top: 70px;
    padding-bottom: 40px;
}

#products .thumbnails-slider .owl-stage-outer {
    overflow: visible;
}

/* Enlarge the centred pack shot and sit it on a soft white radial spotlight,
   matching the live site (the theme's own `.owl-item.center .img { scale(1.3) }`
   is too subtle against these thumbnails). */
#products .thumbnails-slider .owl-item.center {
    background: radial-gradient(ellipse 45% 55% at 50% 50%,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.12) 45%,
        rgba(255, 255, 255, 0) 70%);
}

#products .thumbnails-slider .owl-item.center .img {
    transform: scale(1.45);
}

/* --- Home hero slide ---
   owl.carousel.css hides `.owl-carousel` until JS adds `.owl-loaded`, but
   app.min.js only initialises the hero when there is MORE than one slide.
   With a single slide (the current live state) owl never runs, so force the
   container visible — it then shows the one slide as a static banner.
   Harmless when owl does initialise (multiple slides), since `.owl-loaded`
   is display:block too. */
.home-slides .slides-container.owl-carousel {
    display: block;
}

/* Black button variant (theme's `.btn` uses buttons_red.png; the home Videos
   band's "Watch More Videos" button is black). */
.btn.btn-black {
    background: url(/images/default-source/main/buttons_black.png) no-repeat center center;
    background-size: cover;
    color: #fff;
}

/* --- Shared "GET SOCIAL" band ---
   Reuses the theme's `.getsocial` / `.title` / `.social-footer` classes (white
   textured background, black uppercase heading + red underline, centred). Adds
   the bits the live JS widget supplied at runtime: the red "Follow us" line and
   the row of red social icons (cropped from the theme sprite). */
.db-getsocial {
    padding: 40px 0 45px;
    background-size: cover;
    background-position: center;
}

.db-getsocial .followUsSection {
    color: #f30006;
    font-size: 22px;
    text-transform: uppercase;
    margin: 40px 0 24px;
    position: relative;
}

/* Thin divider line behind the centred "Follow us" text, as on live. */
.db-getsocial .footer-message {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
}

.db-getsocial .footer-message::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid #d8d8d8;
    z-index: 0;
}

.db-getsocial .followUsSection {
    display: inline-block;
    padding: 0 22px;
    background: #fff;
    z-index: 1;
}

/* Facebook post gallery (populated server-side from the Graph API). A centred
   row of image tiles, each linking to its post — mirrors live's `.photosContainer`. */
.db-getsocial__feed {
    list-style: none;
    margin: 24px auto 8px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.db-getsocial__feed .imageBox {
    width: 168px;
    height: 168px;
}

.db-getsocial__feed .imageBox a {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform .25s ease, filter .25s ease;
}

.db-getsocial__feed .imageBox a:hover,
.db-getsocial__feed .imageBox a:focus {
    filter: brightness(1.08);
    transform: scale(1.02);
}

.db-getsocial__srt {
    position: absolute;
    left: -9999px;
}

@media (max-width: 767px) {
    .db-getsocial__feed .imageBox {
        width: 30%;
        height: 28vw;
    }
}

.db-getsocial__icons {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    text-align: center;
}

.db-getsocial__icons li {
    display: inline-block;
    margin: 0 12px;
}

.db-getsocial__icons a {
    display: block;
    transition: transform .25s ease, filter .25s ease;
}

.db-getsocial__icons img {
    display: block;
    width: 34px;
    height: 34px;
}

.db-getsocial__icons a:hover,
.db-getsocial__icons a:focus {
    transform: translateY(-3px);
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(243, 0, 6, 0.5));
}

/* --- Theme `.grid` vs Tailwind `.grid` collision ---
   The theme uses `.grid` as a FLOAT-based layout primitive (e.g. the product
   detail `.grid.row35-65` splits into floated 35%/65% columns). Tailwind's
   utility build defines `.grid{display:grid}` with the same class name, which
   turns the container into a grid and makes its children ignore `float` —
   collapsing the two columns into one. Restore block flow for the theme's grid
   variants (they always carry a `rowNN` modifier, so a bare Tailwind `.grid`
   is unaffected). `overflow` contains the floated children. */
.grid.row35-65,
.grid.row50 {
    display: block;
    overflow: hidden;
}

/* --- Product detail nutrition table ---
   The theme's per-cell alignment lives in an un-ported Sitefinity bundle, so the
   servings rows and column headers inherit the global `.container` centring.
   Left-align them to match live (SERVINGS PER PACKAGE / SERVING SIZE label+value
   sit together on the left; column headers left too), and centre the Health Star
   Rating image (a block img under Tailwind's preflight, which text-align can't
   touch). */
.performance-facts th.info-header div,
.performance-facts .bodyHeading {
    text-align: left;
}

.performance-facts > img {
    display: block;
    margin: 15px auto 0;
}

/* --- Footer logo centring ---
   The theme centres the footer logo via `text-align:center` on the container
   (the logo `<img>` is inline). Tailwind's preflight forces `img{display:block}`,
   and a block image ignores text-align, so it fell hard-left. Restore inline
   layout so it centres like live. */
.footer-logos a,
.footer-logos img {
    display: inline-block;
}

/* --- Header right cluster (desktop) ---
   The theme lays the nav / social icons / search out with a fragile mix of
   floats + inline-block; under Tailwind's preflight the desktop search icon
   wraps onto a second line and the social icons sit slightly high. Lay the
   cluster out with flexbox instead so nav, social icons and the search icon
   sit on ONE row, vertically centred — as on the live site. `row-reverse` on
   the inner container keeps the theme's visual order (nav, then social) despite
   the social icons coming first in source. Scoped to desktop (≥981px); the
   mobile overlay menu is untouched. */
@media (min-width: 981px) {
    .top-header-container .menu-right {
        display: flex;
        align-items: center;
    }

    .top-header-container .menu-right .menu-mobile-container {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }

    /* Mobile-only blocks inside the container — keep them out of the desktop
       flex row (the footer's copyright was leaking in under the nav). */
    .top-header-container .menu-mobile-container .menu-mobile-footer,
    .top-header-container .menu-mobile-container .to-search-collapsed {
        display: none;
    }

    .top-header-container .menu-mobile-container .sfNavWrp,
    .top-header-container .social-icons.social-icons-desktop,
    .top-header-container .to-search {
        float: none;
        margin-top: 0;
    }

    /* Social icons: their own centred flex row so all four sit on one line at a
       uniform height (the source `<a><img></a>` are inline imgs of differing
       widths that otherwise align on the text baseline). */
    .top-header-container .social-icons.social-icons-desktop {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .top-header-container .social-icons.social-icons-desktop a {
        display: flex;
        align-items: center;
    }

    .top-header-container .social-icons.social-icons-desktop img {
        height: 20px;
        width: auto;
    }

    /* Search icon: drop the theme's -4px nudge and centre it so the magnifier
       lines up with the social icons and nav text. `.menu-right .to-search`
       matches the theme's `display:inline-block` specificity (so flex wins). */
    .top-header-container .menu-right .to-search {
        display: flex;
        align-items: center;
    }

    .top-header-container .to-search .to-open-close-search {
        top: 0;
        display: flex;
        align-items: center;
    }

    .top-header-container .to-search .to-open-close-search img {
        height: 20px;
        width: auto;
    }
}

/* Search field text must be dark — the input background is white, so the
   theme's inherited white body text was invisible. */
.top-header-container .to-search input,
.top-header-container .to-search-collapsed input {
    color: #090909;
}

/* --- Search results page (Doritos theme; replaces the old Tailwind view) --- */
.search-page {
    padding: 30px 0 70px;
    min-height: 45vh;
}

.search-page .container {
    max-width: 820px;
    text-align: left;
}

.search-page .title {
    text-align: center;
}

.search-page__form {
    display: flex;
    gap: 12px;
    margin: 10px 0 6px;
}

.search-page__input {
    flex: 1 1 auto;
    padding: 12px 16px;
    border: 1px solid #333;
    border-radius: 2px;
    background: #fff;
    color: #090909;
    font-size: 18px;
}

.search-page__form .btn {
    flex: 0 0 auto;
}

.search-page__meta {
    color: #bbb;
    font-size: 16px;
    margin: 22px 0 14px;
}

.search-page__results {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-page__result {
    background: #151515;
    border: 1px solid #262626;
    border-radius: 4px;
    padding: 18px 22px;
    margin-bottom: 14px;
}

.search-page__type {
    display: inline-block;
    color: #f30006;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.search-page__result-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
}

.search-page__result-title a {
    color: #fff;
    text-decoration: none;
}

.search-page__result-title a:hover,
.search-page__result-title a:focus {
    color: #f30006;
    text-decoration: underline;
}

.search-page__excerpt {
    color: #ccc;
    font-size: 16px;
    line-height: 1.4;
    margin: 6px 0 0;
}

/* --- Feature (text + image), mirrors the original .about-us section --- */
.db-feature {
    padding: 40px 0 20px;
    overflow: hidden;
}

.db-feature .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.db-feature.db-feature--side .container {
    flex-direction: row;
    text-align: left;
    gap: 40px;
}

.db-feature.db-feature--side.db-feature--img-left .container {
    flex-direction: row-reverse;
}

.db-feature .db-feature__text {
    width: 549px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.db-feature.db-feature--side .db-feature__text {
    flex: 1 1 auto;
    margin: 0;
}

.db-feature .db-feature__heading {
    margin-bottom: 24px;
}

.db-feature .db-feature__text p {
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 26px;
}

.db-feature .db-feature__text p:last-child {
    margin-bottom: 0;
}

.db-feature .db-feature__image {
    text-align: center;
}

.db-feature.db-feature--side .db-feature__image {
    flex: 0 0 40%;
}

.db-feature .db-feature__image img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .db-feature.db-feature--side .container {
        flex-direction: column;
        text-align: center;
    }
}

/* --- Prose (rich text) — legible left-aligned copy on the dark theme --- */
.db-prose {
    padding: 30px 0;
}

.db-prose .container {
    max-width: 820px;
    text-align: left;
}

.db-prose__body {
    color: #fff;
    font-size: 18px;
    line-height: 1.6;
}

.db-prose__body h1,
.db-prose__body h2,
.db-prose__body h3,
.db-prose__body h4 {
    color: #ed1f24;
    margin: 1.2em 0 0.5em;
    line-height: 1.2;
}

.db-prose__body p {
    margin-bottom: 1em;
}

.db-prose__body a {
    color: #f30006;
    text-decoration: underline;
}

.db-prose__body ul,
.db-prose__body ol {
    margin: 0 0 1em 1.4em;
    list-style: revert;
}

.db-prose__body li {
    margin-bottom: 0.5em;
}

.db-prose__body strong {
    font-weight: 700;
}

.db-prose__body img {
    max-width: 100%;
    height: auto;
}

/* --- Standalone image block --- */
.db-image {
    padding: 20px 0;
    text-align: center;
}

.db-image img {
    max-width: 100%;
    height: auto;
}

.db-image--full img {
    width: 100%;
}

.db-image figcaption {
    margin-top: 10px;
    font-size: 14px;
    color: #bbb;
}

/* --- Video list (embedded YouTube cards), mirrors the meal-hacks .ytVideo:
       full-bleed red band, 3-up on desktop, white mixed-case titles. --- */
.db-videos {
    background-color: #f30006;
    padding: 40px 0 45px;
    text-align: center;
}

/* Live's `.ytVideo` is NOT constrained to the 1180px content column — the cards
   are ~30% of the full page width, so the grid spans nearly the whole viewport.
   Break the video block out of the centred `.container` to match. */
.db-videos .container {
    max-width: 100%;
    padding: 0 3%;
}

.db-videos__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 2%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.db-videos__item {
    width: 31%;
    text-align: center;
}

.db-videos__item h2 {
    color: #fff;
    font-size: 24px;
    padding: 15px 0 10px;
}

.db-videos__item p {
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    min-height: 100px;
    margin-bottom: 15px;
}

.db-videos__frame {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
}

.db-videos__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 1000px) {
    .db-videos__item {
        width: 47%;
    }

    .db-videos__item p {
        min-height: 0;
    }
}

@media (max-width: 767px) {
    .db-videos__item {
        width: 100%;
    }
}