/* Accent color (Bootstrap 5.3 CSS variables) */
/* Primary color variables are injected dynamically via :root in templates/home.phtml */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    /* derive hover/active from brand color dynamically */
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary), black 12%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary), black 12%);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary), black 18%);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary), black 18%);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
body {
    background-color: #f9f1f4;
}
p {
    font-size:1.35em;
}

.display-7 {
    font-size:1.75em;
}

.display-8 {
    font-size:1.4em;
}
.your-impact-note {
    font-size:0.9em;
}
/* Brand: stay on accent and clean on hover/focus */
.navbar-brand.text-primary {
    color: var(--bs-primary) !important;
}
.navbar-brand.text-primary:hover,
.navbar-brand.text-primary:focus {
    color: var(--bs-primary) !important;
    text-decoration: none;
}

/* Small square text logo for navbar brand */
.brand-badge {
    text-align:center;
    width: 2.5em;
    height: 1.5em;
    font-size:1.25em;
    /*width: 28px;*/
    /*height: 28px;*/
    /*font-size: 0.9rem;*/
}

/* Tagline: very dark charcoal; bold is handled by Bootstrap's fw-bold utility */
.navbar-center-tagline {
    color: #1a1a1a;
}

/* Information section ribbon pattern background */
.ribbon-bg {
    background-image: url('/asset/img/breast-cancer-awareness-ribbon.png');
    background-size: 200px 200px;
    background-repeat: repeat;
    background-position: center center;
}
/* Add to Cart section background similar to ribbon-bg */
.cancer-society-bg {
    background-image: url('/asset/img/cancer-society-background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
/* Hero background with image and pink overlay */
.hero-bg {
    /* Top layer: semi-transparent brand pink; Bottom layer: hero image */
    background-image:
        /*linear-gradient(rgba(var(--bs-primary-rgb), 0.6), rgba(var(--bs-primary-rgb), 0.6)),*/
        /*linear-gradient(rgba(236, 60, 130, 0.6), rgba(236, 60, 130, 0.6)),*/
        url('/asset/img/front-2.jpg');
    background-repeat: no-repeat, no-repeat;
    background-position: center center, center center;
    /* Mobile-first: make the image cover the hero area */
    background-size: cover, cover;
}

/* On larger screens, cap the image width at 80% while keeping it centered */
@media (min-width: 992px) {
    .hero-bg {
        background-size: cover, 100% auto;
    }
}

.hero-bg.variant-1 {
    background-image:
            linear-gradient(rgba(var(--bs-primary-rgb), 0.4), rgba(var(--bs-primary-rgb), 0.4)),
            url('/asset/img/front-2.jpg');
}

.bg-white-80 {
    background-color: rgba(251, 249, 249, 0.80)
}

/* Buy Now: never wrap and use a subtle gradient while staying Bootstrap-native */
.buy-now-btn {
    white-space: nowrap;
}

/* Tune the button look using Bootstrap's per-button CSS vars */
.buy-now-btn.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary), black 12%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary), black 12%);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary), black 18%);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary), black 18%);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* Slightly richer gradient overlay (still via Bootstrap variable) */
.buy-now-btn.btn-primary.bg-gradient {
    --bs-gradient: linear-gradient(180deg, rgba(255,255,255,.2), rgba(0,0,0,.1));
}

.product-note {
    font-size:0.75em;
    padding:0.30em 0.75em;
}

/* Product Gallery: keep main image consistent size and prevent layout shift */
#productMainImage {
    width: 100%;                 /* fill the container width */
    aspect-ratio: 3 / 4;         /* consistent portrait frame */
    object-fit: contain;         /* fit entire image without cropping */
    background: #fff;            /* neutral background for transparent areas */
}

@media (min-width: 992px) {
    #productMainImage {
        max-height: 640px;       /* sensible upper bound on very wide screens */
    }
}

/* Ensure scrollIntoView leaves space above the cart
   so it stops ~200px before the top of the viewport */
#cartSection, #thankYouPanel {
    scroll-margin-top: 30vh;
}

/* Cart table responsive tweaks */
#cartTable th.col-qty,
#cartTable td:nth-child(4) {
    width: 120px;
}

#cartTable th.col-actions,
#cartTable td:nth-child(6) {
    width: 80px;
}

#cartTable .qty-input {
    max-width: 90px;
    margin: 0 auto;
}

@media (max-width: 576.98px) {
    #cartTable .qty-input {
        max-width: 72px;
    }
    #cartTable td:first-child img {
        width: 40px;
        height: 40px;
    }
}

/* Extra-small screens: center navbar brand and Buy Now button to avoid overlap */
@media (max-width: 379.98px) {
    nav.navbar .container {
        flex-wrap: wrap;
        justify-content: center !important;
    }
    /* Center each on its own line */
    nav.navbar .container .order-1,
    nav.navbar .container .order-2 {
        flex: 0 0 100%;
        display: flex;
        justify-content: center;
    }
    /* Remove auto left margin that pushes the button to the edge */
    nav.navbar .container .ms-auto {
        margin-left: 0 !important;
    }
    /* Slightly reduce spacing next to brand to keep it centered */
    nav.navbar .navbar-brand {
        margin-right: 0 !important;
    }
}

/* ------------------------------------------------------------
   Attention flash for the "Watch How It Works" outline button
   ------------------------------------------------------------ */
@keyframes ctb-watch-flash {
    0%, 100% {
        background-color: transparent;
        color: #fff; /* outline-light default */
    }
    50% {
        background-color: #fff;
        color: var(--bs-primary);
    }
}

/* Apply only to the white-outline button when we want attention */
.btn-outline-light.watch-flash {
    animation: ctb-watch-flash 0.8s ease-in-out 8;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .btn-outline-light.watch-flash {
        animation: none !important;
    }
}