/* ==========================================================================
   Brand Overrides — applied globally to all consumer pages
   Replaces legacy colors with UnboundPrint brand tokens.
   Color + font overrides only — no layout, no JS-dependent class changes.
   ========================================================================== */

/* ── TYPOGRAPHY ─────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
}

/* Section titles and page titles get Rammetto One to match homepage */
.section-title,
.category-hero__title,
.category-subgroup__title,
.cart-page__title,
.cms-page__title {
    font-family: 'Rammetto One', serif;
    color: var(--ub-navy, #00293D);
}

/* ── PRODUCT CARD V2 ────────────────────────────────────────────────────────── */


.product-card-v2__price {
    color: var(--ub-navy, #00293D);
}

.product-card-v2__button {
    background: var(--ub-magenta, #CE2984);
    border-radius: 8px;
}
.product-card-v2__button:hover {
    background: var(--ub-magenta-dark, #a82070);
    box-shadow: 0 2px 8px rgba(206, 41, 132, 0.3);
}

.product-card-v2__slideshow-arrow {
    color: var(--ub-navy, #00293D);
}
.product-card-v2__slideshow-arrow:hover {
    background-color: var(--ub-navy, #00293D);
}

.product-card-v2__color-count,
.product-card-v2__color-name {
    background-color: rgba(0, 41, 61, 0.85);
}

/* ── PRODUCT GRID SECTION ───────────────────────────────────────────────────── */

.view-all-link,
.category-subgroup__view-all {
    color: var(--ub-magenta, #CE2984);
}
.view-all-link:hover,
.category-subgroup__view-all:hover {
    color: var(--ub-magenta-dark, #a82070);
}

/* ── CATEGORY PAGE ──────────────────────────────────────────────────────────── */

/* Tiles: hover/active → navy instead of black */
.category-tile:hover,
.category-tile.active {
    border-color: var(--ub-navy, #00293D);
    background: var(--ub-navy, #00293D);
}

/* Breadcrumb active */
.breadcrumb-item.active,
.breadcrumb-item a:hover {
    color: var(--ub-navy, #00293D);
}

/* Pagination buttons → navy */
.category-pagination__btn:hover {
    border-color: var(--ub-navy, #00293D);
    background: var(--ub-navy, #00293D);
}

/* Sort select focus → navy */
.category-sort-bar__select:focus {
    border-color: var(--ub-navy, #00293D);
    box-shadow: 0 0 0 2px rgba(0, 41, 61, 0.15);
}

/* ── CATALOG FILTERS (SIDEBAR) ──────────────────────────────────────────────── */

/* Filter toggle button → navy */
.filter-toggle {
    background: var(--ub-navy, #00293D);
}
.filter-toggle:hover {
    background: var(--ub-navy-light, #00446a);
}

/* Apply filter button → magenta */
.filter-apply {
    background: var(--ub-magenta, #CE2984);
}
.filter-apply:hover {
    background: var(--ub-magenta-dark, #a82070);
}

/* Input focus → navy */
.filter-input:focus,
.filter-select:focus {
    border-color: var(--ub-navy, #00293D);
    box-shadow: 0 0 0 3px rgba(0, 41, 61, 0.1);
}

/* Checkbox accent → magenta */
.taxonomy-item__label input[type="checkbox"] {
    accent-color: var(--ub-magenta, #CE2984);
}

/* Taxonomy toggle hover → navy */
.taxonomy-section__toggle:hover {
    color: var(--ub-navy, #00293D);
}

/* ── CATALOG PAGE (simple filter) ───────────────────────────────────────────── */

.index-page__submit {
    background-color: var(--ub-magenta, #CE2984);
    font-family: 'Mulish', sans-serif;
    font-weight: 600;
    border-radius: 8px;
}
.index-page__submit:hover {
    background-color: var(--ub-magenta-dark, #a82070);
}

.index-page__input:focus,
.index-page__select:focus {
    border-color: var(--ub-navy, #00293D);
    box-shadow: 0 0 0 0.2rem rgba(0, 41, 61, 0.15);
}

.index-page__pagination-current {
    background-color: var(--ub-navy, #00293D);
}

.index-page__pagination-link {
    color: var(--ub-navy, #00293D);
}

.infinite-scroll-loading__spinner {
    color: var(--ub-magenta, #CE2984);
}

/* ── PRODUCT PAGE ───────────────────────────────────────────────────────────── */

/* Price display → navy */
.product-page__price-currency,
.product-page__price-amount {
    color: var(--ub-navy, #00293D);
}

/* Eyebrow → bright blue */
.product-page__eyebrow {
    color: var(--ub-bright-blue, #00AAFF);
}
.product-page__eyebrow-pipe {
    color: rgba(0, 170, 255, 0.4);
}

/* Thumbnail active border → navy */
.product-page__thumbnail:hover,
.product-page__thumbnail--active {
    border-color: var(--ub-navy, #00293D);
}

/* Size button active → navy */
.product-page__size-button--active {
    border-color: var(--ub-navy, #00293D);
    background-color: rgba(0, 41, 61, 0.06);
}

/* Size badge → magenta */
.product-page__size-badge {
    background-color: var(--ub-magenta, #CE2984);
}

/* Size guide link → navy */
.product-page__size-guide {
    color: var(--ub-navy, #00293D);
}

/* Add to cart → magenta (primary CTA) */
.product-page__add-to-cart {
    background-color: var(--ub-magenta, #CE2984);
    border-radius: 10px;
    font-family: 'Mulish', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.01em;
}
.product-page__add-to-cart:hover {
    background-color: var(--ub-magenta-dark, #a82070);
}
.product-page__add-to-cart:disabled {
    background-color: rgba(206, 41, 132, 0.35);
}

/* Order summary accent → navy */
.order-summary__subtotal-row,
.order-summary__total-row {
    border-top-color: var(--ub-navy, #00293D);
}

/* Discount info → navy */
.product-page__discount-info {
    color: var(--ub-navy, #00293D);
}

/* Final price box → navy tints */
.product-page__final-price {
    background-color: rgba(0, 41, 61, 0.04);
    border-color: rgba(0, 41, 61, 0.12);
}
.product-page__final-price-label {
    color: var(--ub-navy, #00293D);
}
.product-page__final-price-value {
    color: var(--ub-navy, #00293D);
}

/* Accordion header → subtle navy bg */
.product-page__accordion-header {
    background-color: var(--ub-surface-alt, #F0F4F8);
    color: var(--ub-navy, #00293D);
}
.product-page__accordion {
    border-color: #d1d9e0;
}
.product-page__accordion-content {
    background-color: #fafbfc;
}

/* ── PRODUCT PRICE (grid/table legacy) ──────────────────────────────────────── */

.product-card__price-amount,
.product-table__price-amount {
    color: var(--ub-navy, #00293D);
}

/* ── CART PAGE ──────────────────────────────────────────────────────────────── */

/* Empty cart CTA → magenta */
.cart-empty__button {
    background-color: var(--ub-magenta, #CE2984);
}
.cart-empty__button:hover {
    background-color: var(--ub-magenta-dark, #a82070);
}

/* Print options accent → bright blue */
.cart-item__print-options {
    color: var(--ub-bright-blue, #00AAFF);
}

/* PDF modal focus → navy */
.pdf-modal__input:focus {
    border-color: var(--ub-navy, #00293D);
}

/* ── CMS PAGE ───────────────────────────────────────────────────────────────── */

/* Blockquote / callout border → navy */
.cms-page__content blockquote,
[class*="content-block"] blockquote {
    border-left-color: var(--ub-navy, #00293D);
}

/* CMS primary buttons → magenta */
.cms-page .btn,
.content-block a.btn,
.page-content .btn {
    background-color: var(--ub-magenta, #CE2984);
    border-color: var(--ub-magenta, #CE2984);
}

/* ── BOOTSTRAP OVERRIDES ────────────────────────────────────────────────────── */

.btn-primary {
    background-color: var(--ub-magenta, #CE2984);
    border-color: var(--ub-magenta, #CE2984);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--ub-magenta-dark, #a82070) !important;
    border-color: var(--ub-magenta-dark, #a82070) !important;
    box-shadow: 0 0 0 0.2rem rgba(206, 41, 132, 0.3) !important;
}

/* ── NAVIGATION IMPROVEMENTS ────────────────────────────────────────────────── */

/* Topbar links — override any generic <a> rules from later-loading CSS */
.header-top a {
    color: #a8d8f0;
    text-decoration: none;
}
.header-top a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Mega-menu active/hover accent → magenta */
.nav-link.active,
.nav-item:hover > .nav-link {
    color: var(--ub-magenta, #CE2984) !important;
}

/* ── RESPONSIVE — catalog & category pages ──────────────────────────────────── */

@media (max-width: 768px) {
    .index-page { padding: 16px; }
    .index-page__title { font-size: 1.5rem; }
    .index-page__pagination { gap: 6px; }
    .index-page__pagination-link,
    .index-page__pagination-current { padding: 4px 8px; font-size: 13px; }

    .category-page { padding: var(--section-margin-top, 40px) 0 var(--section-margin-bottom, 40px); }
    .category-hero { margin-bottom: 20px; }
}

@media (max-width: 480px) {
    .index-page__filter-form { padding: 14px; }
    .index-page__form-group--buttons { flex-direction: column; }
    .index-page__submit,
    .index-page__reset-button { width: 100%; text-align: center; }

    .category-tiles { gap: 6px; }
    .category-tile { font-size: 12px; padding: 6px 12px; }

    .product-page__add-to-cart { font-size: 0.95rem; padding: 14px; }
}

/* ── Floating WhatsApp button (site-wide) ───────────────────────────────── */
.wa-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
}
.wa-float:hover,
.wa-float:focus {
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(37, 211, 102, 0.5);
    color: #fff;
}
.wa-float i {
    color: inherit;
}
@media (max-width: 768px) {
    .wa-float { bottom: 16px; right: 16px; width: 52px; height: 52px; font-size: 26px; }
}
@media (max-width: 480px) {
    .wa-float { bottom: 12px; right: 12px; width: 48px; height: 48px; font-size: 24px; }
}
/* Hide in embed mode (CMS preview iframe) */
body.cms-embed .wa-float { display: none !important; }