/* ==========================================================================
   custom-brand.css  -  CUB palette

   Client direction: red is for offers and discount prices only. Category
   headings, section bars and solid blocks stay calm - black or dark navy.

     Offer red        #e30613   prices, discount badges, savings
     Navy             #16304d   headings, section bars, accents
     Navy dark        #0f2036   hover and pressed states
     Navy soft        #5c7ea6   secondary accents
     Tints            #e9eef4 / #dbe4ee

   phase6-branding.css points --primary-color at the logo red, which is what
   spread red across headings and section bars. The variable overrides at the
   end of this file pull that back to navy, then hand red back to the specific
   price and discount selectors that should keep it.

   Generated from the theme's own selectors: a rule is given red only when its
   selector names a price, discount or deal badge. 2 of 60 remapped
   declarations qualified.
   ========================================================================== */

.phase1-home .pdf1-hero .banner-six-card {
    color: #0f0f0f !important;
}

.phase1-home .pdf1-hero .banner-six-title,
.phase1-home .pdf1-hero .banner-six-subtitle {
    color: #0f0f0f !important;
}

.phase1-home .pdf1-promo-card:focus-visible {
    outline: 2px solid #5c7ea6 !important;
}

.pdf2-scroll-track:focus-visible {
    outline: 2px solid #16304d !important;
}

.pdf2-scroll-btn {
    color: #1e1e1e !important;
}

.pdf2-scroll-btn:hover:not(:disabled),
.pdf2-scroll-btn:focus-visible:not(:disabled) {
    color: #16304d !important;
}

.pdf2-scroll-btn:focus-visible {
    outline: 2px solid #16304d !important;
}

.pdf2-category-item {
    color: #171717 !important;
}

.pdf2-category-item:hover .pdf2-category-image-wrap,
.pdf2-category-item:focus-visible .pdf2-category-image-wrap {
    border-color: #dbe4ee !important;
}

.pdf2-category-name {
    color: #1f1f1f !important;
}

.pdf2-quick-deal-panel {
    border: 1px solid #16304d !important;
}

.pdf2-quick-deal-titlebar {
    background: #16304d !important;
}

.pdf2-deal-tab {
    color: #1c1c1c !important;
}

.pdf2-deal-tab:hover,
.pdf2-deal-tab:focus-visible {
    background: #e9eef4 !important;
    color: #0f2036 !important;
}

.pdf2-deal-tab.is-active,
.pdf2-deal-tab.is-active:hover,
.pdf2-deal-tab.is-active:focus-visible {
    background: #0f2036 !important;
    box-shadow: inset 0 3px 0 #0f2036 !important;
}

.pdf2-deal-tab:focus-visible {
    outline: 2px solid #16304d !important;
}

.pdf2-deal-empty-icon {
    color: #16304d !important;
}

.pdf2-product-link:focus-visible {
    outline: 2px solid #16304d !important;
}

.pdf2-price-row strong {
    color: #e30613 !important;
}

.pdf3-section-head h2::before,
.pdf3-section-head-plain h2::before {
    background: #16304d !important;
}

.pdf3-view-all {
    border: 1px solid #16304d !important;
    color: #0f2036 !important;
}

.pdf3-view-all:hover,
.pdf3-view-all:focus-visible {
    border-color: #0f2036 !important;
    background: #16304d !important;
}

.pdf3-scroll-track:focus-visible {
    outline: 2px solid #16304d !important;
}

.pdf3-scroll-btn {
    color: #262626 !important;
}

.pdf3-scroll-btn:hover:not(:disabled),
.pdf3-scroll-btn:focus-visible:not(:disabled) {
    background: #16304d !important;
}

.pdf3-product-link:hover,
.pdf3-product-link:focus-visible {
    border-color: #dbe4ee !important;
}

.pdf3-price-row strong {
    color: #e30613 !important;
}

.pdf3-explore-group h3 {
    color: #1e1e1e !important;
}

.pdf3-explore-item-title {
    color: #333333 !important;
}

.pdf3-see-more {
    color: #16304d !important;
}

.pdf3-rail-title {
    border: 1px solid #16304d !important;
    background: #16304d !important;
}

.pdf3-rail-title:hover,
.pdf3-rail-title:focus-visible {
    background: #0f2036 !important;
    border-color: #0f2036 !important;
}

.pdf3-rail-image-wrap {
    background: #e9eef4 !important;
}

.pdf3-rail-item:nth-child(5n) .pdf3-rail-image-wrap {
    background: #e9eef4 !important;
}

.pdf3-rail-item-title {
    color: #363636 !important;
}

.pdf3-spotlight-title {
    border: 1px solid #16304d !important;
    background: #16304d !important;
}

.pdf3-spotlight-title:hover,
.pdf3-spotlight-title:focus-visible {
    background: #0f2036 !important;
    border-color: #0f2036 !important;
}

.phase1-home .pdf4-testimonials {
    color: var(--pdf4-section-text, #1a1a1a) !important;
}

.phase1-home .pdf4-section-heading h2::after {
    background: #16304d !important;
    background: linear-gradient(90deg, #16304d, #5c7ea6) !important;
}

.phase1-home .pdf4-testimonial-quote {
    color: #383838 !important;
}

.phase1-home .pdf4-testimonial-author-copy strong {
    color: #1a1a1a !important;
}

.phase1-home a.pdf4-partner-card:hover,
.phase1-home a.pdf4-partner-card:focus-visible {
    border-color: #dbe4ee !important;
}

.phase1-home .pdf2-section-heading::before {
    background: #16304d !important;
}

.phase1-home .pdf2-section-heading h2 {
    color: #141414 !important;
}

.phase1-home .pdf4-section-heading h2 {
    color: #141414 !important;
}

.phase1-home .pdf4-testimonial-card::after {
    background: linear-gradient(90deg, #16304d, #5c7ea6) !important;
}

.phase1-storefront {
    --stx-dark: #0a0a0a !important;
    --stx-dark-2: #080808 !important;
}

@media (max-width: 575.98px) {
    .phase1-home .pdf3-explore-group h3::before {
        background: #16304d !important;
    }

}


/* Phase 3: each page banner follows the ratio published in MediaSpecs. */
.phase1-storefront .common-banner--product-detail {
    min-height: clamp(170px, 18.23vw, 350px) !important;
    padding: clamp(38px, 5vw, 68px) 0 !important;
}

.phase1-storefront .common-banner--large {
    min-height: clamp(210px, 26.04vw, 500px) !important;
}

.phase1-storefront .common-banner--standard {
    min-height: clamp(190px, 23.44vw, 450px) !important;
}

.phase1-storefront .common-banner--legal {
    min-height: clamp(180px, 20.83vw, 400px) !important;
}

/* Phase 3: functional footer subscription states and motion. */
.phase1-storefront .cub-newsletter-form {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.phase1-storefront .cub-newsletter-form:focus-within {
    border-color: rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .16);
    transform: translateY(-1px);
}

.phase1-storefront .cub-newsletter-form input {
    min-width: 0;
    color: #fff !important;
    background: transparent !important;
}

.phase1-storefront .cub-newsletter-form input::placeholder {
    color: rgba(255, 255, 255, .72) !important;
}

.phase1-storefront .cub-newsletter-form button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 126px;
    border: 0;
    background: var(--cub-navy-dark) !important;
    transition: background-color .2s ease, transform .2s ease, opacity .2s ease;
}

.phase1-storefront .cub-newsletter-form button:hover,
.phase1-storefront .cub-newsletter-form button:focus-visible {
    background: #091827 !important;
    transform: translateX(2px);
}

.phase1-storefront .cub-newsletter-form button.is-loading {
    cursor: wait;
    opacity: .7;
}

.phase1-storefront .cub-newsletter-form button.is-loading i {
    animation: cub-newsletter-spin .8s linear infinite;
}

.phase1-storefront .cub-newsletter-form.is-success {
    animation: cub-newsletter-success .7s ease;
}

.phase1-storefront .cub-newsletter-message {
    min-height: 20px;
    margin-top: 6px;
    padding-left: 12px;
    color: rgba(255, 255, 255, .86);
    font-size: 12px;
    line-height: 1.35;
}

.phase1-storefront .cub-newsletter-message.is-success { color: #c9f7d7; }
.phase1-storefront .cub-newsletter-message.is-error { color: #ffd1d5; }

@keyframes cub-newsletter-spin {
    to { transform: rotate(360deg); }
}

@keyframes cub-newsletter-success {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 247, 215, 0); }
    50% { box-shadow: 0 0 0 6px rgba(201, 247, 215, .22); }
}

@media (prefers-reduced-motion: reduce) {
    .phase1-storefront .cub-newsletter-form,
    .phase1-storefront .cub-newsletter-form button,
    .phase1-storefront .cub-newsletter-form button i {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 575.98px) {
    .phase1-storefront .common-banner--large,
    .phase1-storefront .common-banner--standard,
    .phase1-storefront .common-banner--legal,
    .phase1-storefront .common-banner--product-detail {
        min-height: 170px !important;
        padding: 40px 0 !important;
    }

    .phase1-storefront .cub-newsletter-form button {
        min-width: 108px;
        padding-inline: 14px !important;
    }
}


/* ==========================================================================
   VARIABLE OVERRIDES  -  pull the theme back from red to navy

   phase6-branding.css sets --primary-color to the logo red with !important.
   That is what tinted headings, category title bars and section blocks red.
   Re-pointing it at navy calms the whole storefront in one move; the block
   after this hands red back to prices and discount badges.
   ========================================================================== */

:root,
.phase1-storefront,
.phase1-home {
    --primary-color: #16304d !important;
    --tertiary-color: #16304d !important;
    --quaternary-color: #0f2036 !important;
    --hover-color: #0f2036 !important;
    --theme-color: #16304d !important;
    --p1-primary: #16304d !important;

    /* secondary stays black, matching the logo wordmark */
    --secondary-color: #000000 !important;
    --title-color: #101418 !important;

    /* available where an offer accent is wanted */
    --cub-offer-red: #e30613;
    --cub-offer-red-dark: #c00511;
}


/* ==========================================================================
   RED BELONGS TO OFFERS ONLY
   Prices, discounts and savings keep the logo red. Nothing else does.
   ========================================================================== */

.pdf2-price-now,
.pdf3-price-now,
.pdf2-price-row strong,
.pdf3-price-row strong,
.pdf2-product-card .pdf2-price-row strong,
.pdf3-product-card .pdf3-price-row strong,
.main-price-container,
.price-display-value,
.price-value,
.phase1-storefront .phase3-product-price .main-price-container,
.phase5-mobile-buybar-price,
.phase5-sticky-price,
.b2b-card-price,
.event-eight-price {
    color: #e30613 !important;
}

/* Discount and deal badges stay red so savings stand out at a glance. */
.pdf2-deal-badge,
.pdf2-deal-badge-wide,
.pdf3-discount-badge,
.phase2-discount-badge,
.phase3-discount-badge,
.pdf3-product-discount-badge {
    background: #e30613 !important;
    border-color: #fff !important;
    color: #fff !important;
}


/* ==========================================================================
   PHASE 2 BRAND SURFACES

   One coordinated palette owns every large solid surface. Navy is the brand
   anchor, the page body uses its light tint, and red remains reserved for
   prices/discounts. These rules load last and therefore also normalize older
   theme layers that used unrelated black/blue footer colours.
   ========================================================================== */

:root,
.phase1-storefront,
.phase1-home {
    --cub-navy: #16304d;
    --cub-navy-dark: #0f2036;
    --cub-navy-soft: #5c7ea6;
    --cub-page-bg: #f4f7fa;
    --cub-surface: #ffffff;
    --cub-border: #dbe4ee;
}

body.theme2-storefront,
.theme2-storefront .page-wrapper {
    background-color: var(--cub-page-bg) !important;
}

.phase1-storefront .stx-mainbar {
    background: var(--cub-navy) !important;
}

.phase1-storefront .stx-logo__surface {
    width: 124px;
    height: 56px;
    padding: 5px 8px;
    background: transparent !important;
    box-shadow: none !important;
}

.phase1-storefront .stx-logo img {
    width: auto;
    max-width: 100%;
    max-height: 46px;
    object-fit: contain;
}

.phase1-storefront .stx-categorybar,
.phase1-storefront .stx-categorybar__mobile {
    border-color: var(--cub-border) !important;
    background: var(--cub-surface) !important;
}

.phase1-storefront footer.footer-two.footer-six-area.footer-eight-area,
.phase1-home footer.footer-two.footer-six-area.footer-eight-area {
    background: var(--cub-navy) !important;
    border-color: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
    box-shadow: 0 12px 34px rgba(15, 32, 54, .20) !important;
}

.phase1-storefront .footer-two__copyright,
.phase1-home .footer-two__copyright.footer-six-copyright {
    background: var(--cub-navy-dark) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}

.phase1-storefront .footer-two__widget-logo img {
    width: auto !important;
    min-width: 0;
    max-width: 150px !important;
    height: 52px !important;
    object-fit: contain;
}

.phase1-storefront .vl-offcanvas-header {
    background: var(--cub-navy) !important;
}

.phase1-storefront .vl-offcanvas-logo img {
    width: auto;
    max-width: 128px !important;
    height: 48px;
    object-fit: contain;
}

.phase1-storefront .vl-offcanvas-close-toggle {
    color: #fff !important;
}

@media (max-width: 575.98px) {
    .phase1-storefront .stx-logo__surface {
        width: 82px;
        height: 42px;
        padding: 3px 4px;
    }

    .phase1-storefront .stx-logo img {
        max-height: 36px;
    }

    .phase1-storefront .footer-two__widget-logo img {
        max-width: 132px !important;
        height: 46px !important;
    }
}

/* Struck-through original prices stay muted grey, not red. */
.pdf2-price-row del,
.pdf3-price-row del,
.phase1-storefront .phase3-product-price del,
.price-row del {
    color: #97a0a8 !important;
}


/* ==========================================================================
   CATEGORY AND SECTION HEADINGS  -  navy, never a solid red block
   This is the specific thing the client called out: the filled bar behind
   category names such as Toys or Lifestyle.
   ========================================================================== */

/* Section heading colours are owned entirely by custom-home.css, which puts
   them on a dark navy band with white text. A dark-text rule here was
   overriding that and leaving the titles unreadable on the band. */

/* Theme 2 branding hotfix: keep the CUB mark fully visible and optically centered. */
.phase1-storefront .stx-logo,
.phase1-storefront .stx-logo__surface {
    overflow: visible !important;
}

.phase1-storefront .stx-logo__surface {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.phase1-storefront .stx-logo img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 108px !important;
    max-height: 50px !important;
    object-fit: contain !important;
    object-position: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.phase1-storefront .footer-two__widget-logo img,
.phase1-storefront .vl-offcanvas-logo img {
    object-fit: contain !important;
    object-position: center !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 575.98px) {
    .phase1-storefront .stx-logo img {
        max-width: 76px !important;
        max-height: 38px !important;
    }
}