/**
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE.md.
 *
 * @author    Veo by Kebes <hola@kebes.es>
 * @copyright 2025 Veo by Kebes
 * @license   https://opensource.org/licenses/AFL-3.0  Academic Free License 3.0 (AFL-3.0)
 */

/*
  Maps the --veo-* tokens (emitted in <head> by the module) onto Hummingbird.
  Loaded with priority 150: a child theme's custom.css (priority 1000) wins over it.
  No !important: Hummingbird uses @layer and unlayered rules already beat its own.
*/

/*global*/
:root {
    --bs-body-font-family: var(--veo-font-family);
    --bs-body-color: var(--veo-text);
    --bs-body-bg: var(--veo-primary);
    --bs-heading-color: var(--veo-header);
    --bs-link-color: var(--veo-brand);
    --bs-link-hover-color: var(--veo-alt-brand);
    --bs-border-color: var(--veo-border);
    --bs-primary: var(--veo-brand);
    --bs-primary-rgb: var(--veo-brand-rgb);
}

h1, h2, h3, .h1, .h2, .h3,
.section-title,
.product__name,
#js-product-list-header {
    font-family: var(--veo-font-title-family);
}

@media (width >= 1400px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: var(--veo-container-max-width);
    }
}

.veo-header-wide #header .container,
.veo-header-wide #header .container-md,
.veo-content-wide #wrapper .container,
.veo-content-wide #wrapper .container-md,
.veo-footer-wide #footer .container,
.veo-footer-wide #footer .container-md {
    max-width: none;
}

/* Side padding of the container: the layout.gutter setting on desktop, fixed values below */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    --bs-gutter-x: var(--veo-gutter);
}

@media (width <= 991px) {
    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        --bs-gutter-x: 2rem;
    }
}

@media (width <= 575px) {
    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        --bs-gutter-x: 1rem;
    }
}

/* Components Bootstrap compiles into the class: recolored through their own variables */
.btn-primary {
    --bs-btn-color: var(--veo-primary);
    --bs-btn-bg: var(--veo-brand);
    --bs-btn-border-color: var(--veo-brand);
    --bs-btn-hover-color: var(--veo-primary);
    --bs-btn-hover-bg: var(--veo-alt-brand);
    --bs-btn-hover-border-color: var(--veo-alt-brand);
    --bs-btn-active-color: var(--veo-primary);
    --bs-btn-active-bg: var(--veo-alt-brand);
    --bs-btn-active-border-color: var(--veo-alt-brand);
    --bs-btn-disabled-color: var(--veo-primary);
    --bs-btn-disabled-bg: var(--veo-brand);
    --bs-btn-disabled-border-color: var(--veo-brand);
}

.btn-outline-primary {
    --bs-btn-color: var(--veo-brand);
    --bs-btn-border-color: var(--veo-brand);
    --bs-btn-hover-color: var(--veo-primary);
    --bs-btn-hover-bg: var(--veo-brand);
    --bs-btn-hover-border-color: var(--veo-brand);
    --bs-btn-active-color: var(--veo-primary);
    --bs-btn-active-bg: var(--veo-alt-brand);
    --bs-btn-active-border-color: var(--veo-alt-brand);
    --bs-btn-disabled-color: var(--veo-brand);
    --bs-btn-disabled-border-color: var(--veo-brand);
}

.btn-link {
    --bs-btn-color: var(--veo-brand);
    --bs-btn-hover-color: var(--veo-alt-brand);
    --bs-btn-active-color: var(--veo-alt-brand);
}

.pagination {
    --bs-pagination-color: var(--veo-brand);
    --bs-pagination-hover-color: var(--veo-alt-brand);
    --bs-pagination-active-bg: var(--veo-brand);
    --bs-pagination-active-border-color: var(--veo-brand);
}

.badge {
    background-color: var(--veo-brand);
    color: var(--veo-primary);
}

.badge.discount {
    border: 1px solid var(--veo-brand);
    background-color: var(--veo-primary);
    color: var(--veo-brand);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--veo-brand);
    box-shadow: none;
}

.nav-underline .nav-link.active,
.nav-underline .nav-link:hover {
    color: var(--veo-brand);
    border-bottom-color: var(--veo-brand);
}

.accordion-item,
.accordion-button {
    background-color: transparent;
}

.accordion-button,
.accordion-button:not(.collapsed) {
    color: var(--veo-header);
}

/*header*/
.header {
    background-color: transparent;
}

#header {
    -webkit-backdrop-filter: blur(var(--veo-header-blur));
    backdrop-filter: blur(var(--veo-header-blur));
}

.header-banner {
    background: var(--veo-banner-bg);
    color: var(--veo-banner-color);
}

.header-banner p {
    margin: 0;
}

.header-banner a {
    color: var(--veo-banner-color);
    text-decoration: underline;
}

#header .header-top {
    background-color: color-mix(in srgb, var(--veo-header-top-bg) var(--veo-header-opacity), transparent);
    color: var(--veo-header-top-color);
}

#header .header-top a:not(.dropdown-item):not(.btn),
#header .header-top a:not(.dropdown-item):not(.btn) i,
#header .header-top .header-block__action-btn,
#header .header-top .header-block__action-btn i,
#header .header-top .header-block__title {
    color: var(--veo-header-top-color);
}

#header .header-top a:not(.dropdown-item):not(.btn):hover,
#header .header-top a:not(.dropdown-item):not(.btn):hover i {
    color: var(--veo-header-top-hover);
}

#header .header-bottom,
#header .header-nav-full-width {
    background-color: color-mix(in srgb, var(--veo-header-bg) var(--veo-header-opacity), transparent);
    color: var(--veo-header-color);
}

#header .header-bottom a:not(.dropdown-item):not(.btn),
#header .header-bottom a:not(.dropdown-item):not(.btn) i,
#header .header-bottom .header-block__action-btn,
#header .header-bottom .header-block__action-btn i,
#header .header-nav-full-width a:not(.dropdown-item):not(.btn),
#header .header-nav-full-width a:not(.dropdown-item):not(.btn) i {
    color: var(--veo-header-color);
}

#header .header-bottom a:not(.dropdown-item):not(.btn):hover,
#header .header-bottom a:not(.dropdown-item):not(.btn):hover i,
#header .header-nav-full-width a:not(.dropdown-item):not(.btn):hover {
    color: var(--veo-header-hover);
}

#header .header-block__action-btn,
#header .header-block__action-btn * {
    cursor: pointer;
}

#header .header-block__badge {
    background-color: var(--veo-brand);
    color: var(--veo-primary);
}

/*menu*/
.dropdown-menu {
    --bs-dropdown-bg: var(--veo-header-bg);
    --bs-dropdown-color: var(--veo-header-color);
    --bs-dropdown-link-color: var(--veo-header-color);
    --bs-dropdown-link-hover-color: var(--veo-header-hover);
    --bs-dropdown-link-hover-bg: transparent;
    --bs-dropdown-border-color: var(--veo-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.dropdown-menu .dropdown-item i.material-icons {
    color: var(--veo-header-color);
}

.offcanvas {
    --bs-offcanvas-bg: var(--veo-menu-mobile-bg);
    --bs-offcanvas-color: var(--veo-menu-mobile-color);
}

.offcanvas a {
    color: var(--veo-menu-mobile-color);
}

.offcanvas a:hover {
    color: var(--veo-menu-mobile-hover);
}

.offcanvas-header {
    background: var(--veo-header-top-bg);
    color: var(--veo-header-top-color);
}

.offcanvas .menu__list li:hover,
.offcanvas .ps-mainmenu__tree li:hover {
    background: var(--veo-bg-subtle);
}

/*search*/
.veo-search-slide #ps_searchbar,
.veo-search-slide .ps-searchbar {
    min-width: 0;
    position: relative;
    overflow: visible;
}

.veo-search-slide .ps-searchbar__input {
    position: absolute;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 2.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border: none;
    border-radius: 100rem;
    background: var(--veo-bg-subtle);
    opacity: 0;
    pointer-events: none;
    transition: width 0.3s ease, opacity 0.25s ease;
}

.veo-search-slide .ps-searchbar:hover .ps-searchbar__input,
.veo-search-slide .ps-searchbar:focus-within .ps-searchbar__input {
    width: 220px;
    opacity: 1;
    pointer-events: auto;
}

/*cart*/
.veo-cart-drawer .blockcart-modal .modal-dialog {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    max-width: 380px;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.veo-cart-drawer .blockcart-modal .modal-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
    border: none;
    border-radius: 0;
}

.veo-cart-drawer .blockcart-modal .modal-header {
    flex: 0 0 auto;
    height: 60px;
    max-height: 60px;
}

.veo-cart-drawer .blockcart-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1rem;
    overflow-x: hidden;
    overflow-y: auto;
}

/* The drawer is narrow even on desktop: product on top, summary below, never side by side */
.veo-cart-drawer .blockcart-modal .modal-body > .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

.veo-cart-drawer .blockcart-modal__product .row > :first-child {
    flex: 0 0 35%;
    max-width: 35%;
}

.veo-cart-drawer .blockcart-modal__product .row > :last-child {
    flex: 1 1 0;
    max-width: none;
}

.veo-cart-drawer .blockcart-modal__summary {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--veo-border, var(--bs-border-color));
}

.veo-cart-drawer .blockcart-modal__total {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.veo-cart-drawer .blockcart-modal__total .value {
    flex: 0 0 auto;
    text-align: right;
}

.veo-cart-drawer .blockcart-modal .modal-footer {
    flex: 0 0 auto;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    gap: .5rem;
    padding: 1rem;
}

.veo-cart-drawer .blockcart-modal .modal-footer > .btn {
    width: 100%;
    margin: 0;
}

@media (width <= 575px) {
    .veo-cart-drawer .blockcart-modal .modal-dialog {
        width: 100vw;
        max-width: 100vw;
    }
}

/*category*/
.ps-categorytree a {
    color: var(--veo-header);
}

.veo-subcategories-name-only .subcategory__thumbnail,
.veo-subcategories-name-only .subcategory__link picture {
    display: none;
}

.veo-subcategories-image-only .subcategory__name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*miniatures*/
.product-miniature .product-miniature__title {
    color: var(--veo-text);
}

.product-miniature .product-miniature__title:hover {
    color: var(--veo-brand);
}

/*product*/
.page-product .product__thumbnail.active .product__thumbnail-image {
    outline: 1px solid var(--veo-border);
}

.page-product .product__thumbnail.focus-ring:focus {
    box-shadow: none;
}

.details__list {
    background-color: transparent;
}

ul.radio-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.radio-variants li {
    padding-left: 0;
}

.radio-variants .input-radio {
    display: none;
}

.radio-variants .radio-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--veo-border);
    border-radius: 4px;
    background-color: var(--veo-primary);
    color: var(--veo-text);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.radio-variants label:hover .radio-label {
    border-color: var(--veo-brand);
}

.radio-variants .input-radio:checked + .radio-label {
    background-color: var(--veo-brand);
    border-color: var(--veo-brand);
    color: var(--veo-primary);
}

/*footer*/
/* .ps-emailsubscription.bg-body-tertiary carries !important inside a @layer, which beats any
   unlayered !important; its --bs-bg-opacity is a custom property and can be zeroed instead. */
.footer__before {
    background-color: var(--veo-footer-before-bg);
    color: var(--veo-footer-before-color);
}

.ps-emailsubscription {
    --bs-bg-opacity: 0;
}

.footer__before a,
.ps-emailsubscription a {
    color: var(--veo-brand);
}

.footer__before .block-social a {
    color: var(--veo-footer-before-color);
}

.footer__before .block-social a:hover {
    color: var(--veo-brand);
}

.footer__main {
    background-color: var(--veo-footer-bg);
    color: var(--veo-footer-color);
}

.footer__main .footer-block__title,
.footer__main .footer-block__title a {
    color: var(--veo-footer-heading-color);
}

.footer__main .footer-block a,
.footer__main .copyright a {
    color: var(--veo-footer-color);
}

.footer__main .footer-block a:hover,
.footer__main .copyright a:hover {
    color: var(--veo-footer-hover);
}