/**
 * Chanel brand space styling.
 *
 * Extracted from the legacy Chanel microsite stylesheet
 * (Druni_Microsites/view/frontend/styles/module/microsite_chanel.scss) and converted to plain
 * CSS: SCSS variables resolved ($color-black #000, $color-white #fff, $color-gray46 #757575,
 * $screen__m 768px, $font-weight__bold 700, $font-size__m 14px), nesting flattened and
 * breakpoint mixins expanded (media-breakpoint-down(md) -> max-width 767px,
 * media-breakpoint-up(lg) -> min-width 1024px).
 *
 * Loaded ONLY on the Chanel brand handle (catalog_category_view_brand_chanel), exactly like
 * the legacy microsite handle loaded it and like drunim24's Project_DynamicCategoriesBrand,
 * so it is page-scoped and never leaks elsewhere. Selectors that targeted the old Luma DOM
 * only take effect where the current Hyva DOM still exposes the same class.
 */

/* ---- Brand banner CMS blocks (chanel-product-logo / "Chanel logo footer") ----
   Rendered on the PDP via the CMS block renderer. The block markup is legacy Luma HTML
   (.category-image / .brand-logo / .only-desktop / .only-mobile), so we provide those helpers
   here, scoped to the banner wrapper, since the Hyva theme does not define them. */
.brand-cms-banner .only-mobile { display: block; }
.brand-cms-banner .only-desktop { display: none; }

@media only screen and (min-width: 768px) {
    .brand-cms-banner .only-mobile { display: none; }
    .brand-cms-banner .only-desktop { display: block; }
}

.brand-cms-banner .brand-logo {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.brand-cms-banner .category-image {
    margin: 0;
}

/* ---- Typography / general ---- */
.page-main,
.breadcrumbs,
.swatches-select-container button.dropdown-toggle {
    font-family: "Arial Regular", Arial, Helvetica, sans-serif !important;
}

.page-main .font-primary,
.page-main .product-item .price,
.page-main .product-card-description,
.page-main .product-card-title,
.page-main .btn {
    font-family: "Arial Regular", Arial, Helvetica, sans-serif;
}

.top-container {
    display: none;
}

/*
 * Legacy microsite constrained .page-main to max-width:1000px (narrow Luma layout). Dropped:
 * the Hyva brand space keeps the theme's full-width content. (Was:
 * .catalog-category-view .page-wrapper .page-main { max-width:1000px; padding:0; })
 */

.page-wrapper .block.related {
    background: #fff;
    font-family: "Arial Regular", Arial, Helvetica, sans-serif;
    display: block;
}

.catalog-category-view.category-chanel .page-title-wrapper {
    display: none;
}

.page-title-wrapper:not(.product) {
    text-align: center;
    margin-top: 50px;
}

.page-title-wrapper:not(.product) .toolbar-amount {
    display: none;
}

.filters-toolbars {
    margin: 0 -15px 20px -15px;
}

.home-text {
    width: 100%;
}

.block.related .block-title {
    font-family: "Arial Regular", Arial, Helvetica, sans-serif;
}

/* ---- Chanel categories nav ---- */
.chanel-categories {
    border: 1px solid #757575;
    border-right: 0;
    border-left: 0;
    margin: 20px 0;
    font-size: 13px;
}

.chanel-categories p {
    margin-bottom: 0;
}

.chanel-categories p a {
    display: block;
    text-align: center;
    padding: 15px 0;
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
}

.chanel-categories p a:nth-child(2),
.chanel-categories p a:nth-child(3) {
    padding-top: 0;
}

@media only screen and (min-width: 768px) {
    .chanel-categories {
        order: 2;
        display: inline-flex;
        justify-content: center;
        padding: 20px 0;
    }

    .chanel-categories p:first-child {
        text-transform: uppercase;
        color: #757575;
        text-align: center;
    }

    .chanel-categories p a {
        display: initial;
        margin-right: 20px;
    }

    .chanel-categories p a:last-child {
        margin-right: 0;
    }
}

.chanel-presentation {
    text-align: center;
    margin: 5px auto 0;
    max-width: 570px;
}

@media only screen and (min-width: 768px) {
    .chanel-presentation {
        order: 1;
        margin-top: 30px;
    }
}

/* ---- Product grid tweaks ---- */
.custom-new-grid-wrapper .products.list .product-item .product-item-description,
.custom-new-grid-wrapper .product-reviews-summary,
.custom-new-grid-wrapper .product-item-inner,
.custom-new-grid-wrapper .product-swatch-options-wrapper {
    display: none;
}

.custom-new-widget-product-custom-grid.block.widget {
    margin-bottom: 0;
}

.custom-new-widget-product-custom-grid.block.widget .block-title h3,
.custom-new-widget-product-custom-grid.block.widget .block-title h2,
.custom-new-widget-product-custom-grid.block.widget .block-title p {
    font-size: 22px;
    text-transform: uppercase;
    line-height: 1.1;
}

.custom-new-widget-product-custom-grid.block.widget .products-grid .product-items .product-item .product-item-info .product-item-details .actions-secondary.wishlist:hover .action.towishlist::before {
    color: #000;
}

.catalog-category-view .products-grid .product-items .product-item {
    border: 0 !important;
    max-width: 30%;
}

.catalog-category-view .products-grid .product-items .product-item:hover {
    box-shadow: none !important;
    border: 1px solid #d8d8d8 !important;
    transition: none !important;
}

@media only screen and (max-width: 767px) {
    .catalog-category-view .products-grid .product-items .product-item {
        max-width: 45%;
    }
}

/* ---- Brand logo ---- */
.category-image.brand-logo-wrapper {
    background-color: #000;
    padding: 13px 0;
    margin: 0 0 20px;
    width: 100%;
}

.category-image.brand-logo-wrapper img {
    display: block;
    margin: 0 auto;
}

@media only screen and (min-width: 768px) {
    .category-image.brand-logo-wrapper {
        margin: 0 0 20px;
        min-height: 80px;
        display: flex;
        align-items: center;
    }

    .category-image.brand-logo-wrapper img {
        margin: 0;
        padding-left: 35px;
    }
}

/* ---- Product list ---- */
.filters-toolbars .block-subtitle,
.filters-toolbars .toolbar-sorter .sorter-label,
.filters-toolbars .toolbar-sorter .sorter-options li span {
    font-family: "Arial Regular", Arial, Helvetica, sans-serif;
}

.filters-toolbars .filter-current-actions {
    display: block;
    opacity: 1;
}

.products.list .product-item {
    margin: 5px 10px;
}

.products.list .product-item-details p,
.products.list .product-item-details a,
.products.list .product-item-details span {
    font-family: "Arial Regular", Arial, Helvetica, sans-serif;
    font-size: 14px;
    overflow: unset !important;
    display: block;
    height: unset;
}

.products.list .product-item-details .product-reviews-summary {
    display: none;
}

.products.list .product-item-details .price-box + .popup {
    display: none;
}

.products.list .product-item-details .product-item-link {
    font-weight: bold;
}

.products.list .product-item .tocart {
    color: #000;
    font-family: "Arial Regular", Arial, Helvetica, sans-serif;
}

.products.list .product-item .tocart:hover {
    color: #fff;
    background-color: #000;
}

.products.list .product-item-info .box-brand-wishlist .actions-secondary:hover .action.towishlist::before {
    color: #000 !important;
}

.products.list .product-item-info .price-box {
    margin-top: 0 !important;
}

.products.list .product-item-info .price-box .old-price {
    display: none;
}

.products.list .product-item-info .box-brand-wishlist .product-brand {
    font-size: 14px !important;
}

@media only screen and (max-width: 767px) {
    .products.list .product-item .popup .icon-remove {
        color: #000;
    }

    .products.list .product-item .popup .action.primary {
        background: #000;
    }
}

.products.list .product-item-description {
    text-transform: uppercase;
    margin-bottom: 15px;
    overflow: unset !important;
    display: inline-table !important;
}

.products.list .product-item-inner {
    display: none;
}

.swatch-option-tooltip .title {
    font-family: "Arial Regular", Arial, Helvetica, sans-serif;
}

.products-related .products.list .product-item-inner {
    display: block;
}

.products-related .products.list .product-item .product-item-link {
    display: block;
    height: auto;
}

.products-related .products.list .product-item .price-box {
    margin-bottom: 10px;
}

@media only screen and (min-width: 1024px) {
    .products-related .products.list .product-item .price-box {
        margin-bottom: 60px;
    }
}

.products-related .towishlist:hover::before {
    color: #000 !important;
}

/* ---- Pager ----
   The Hyvä category pager active chip is `.pager-step-active` (a pill <li>), coloured with the
   Druni accent (#D01261) out of the box. Re-colour it black for Chanel — the same treatment the
   PDP reviews pager gets in brand-space.css (.pager-step-active → --brand-accent). The legacy
   Luma rule `.pages strong.page { background:#000 }` targeted the inner <strong> instead, which
   left the pink pill showing around a black box, so it is dropped. */
.pages .item .page {
    font-family: "Arial Regular", Arial, Helvetica, sans-serif;
}

.catalog-category-view-brand-chanel .pages .pager-step-active {
    background-color: #000;
    border-color: #000;
}

/* ---- Menu (sidebar) ---- */
.chanel-menu.default-menu h2,
.chanel-menu.default-menu h3 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-size: 16px;
}

.chanel-menu.default-menu h2:first-child,
.chanel-menu.default-menu h3:first-child {
    margin-top: 0;
}

.chanel-menu.default-menu h2 .menu-title,
.chanel-menu.default-menu h3 .menu-title {
    font-weight: 700;
    font-family: "Arial Regular", Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #000;
}

.chanel-menu.default-menu .menu-content {
    padding-left: 5px;
}

.chanel-menu.default-menu .menu-content .brand-subcategory a {
    color: #000;
    text-transform: uppercase;
    font-family: "Arial Regular", Arial, Helvetica, sans-serif;
}

.sidebar-main {
    display: flex;
    flex-direction: column;
}

.sidebar-main .chanel-menu {
    order: -1;
}

.sidebar-main .menu-filters-mobile .icon-filters {
    font-family: "Arial Regular", Arial, Helvetica, sans-serif;
}

/* ---- Product page (PDP) ---- */
.page-title-wrapper.product {
    font-weight: 700;
}

/* Chanel brand accent = black. Consumed by the shared brand-space accent remap
   (Druni_BrandHandles::css/brand-space.css), which re-colours every Druni accent (buttons, links,
   product label, active tab, etc.) within the brand PDP content. Other brands set their own value. */
.catalog-product-view-brand-chanel {
    --brand-accent: #000000;
    --brand-accent-hover: #1a1a1a;
}

/* Chanel shape: square corners on buttons and the quantity stepper (the components ship a pill
   radius, so enforce it here). Square is a Chanel brand trait, not colour. */
.catalog-product-view-brand-chanel #maincontent .btn-primary,
.catalog-product-view-brand-chanel #maincontent .btn-secondary {
    border-radius: 0;
}

.catalog-product-view-brand-chanel #maincontent .input-qty,
.catalog-product-view-brand-chanel #maincontent .input-qty-input,
.catalog-product-view-brand-chanel #maincontent .input-qty-button {
    border-radius: 0;
}

/* Bold product title on the Chanel brand PDP. */
.catalog-product-view-brand-chanel #maincontent .product-page-title {
    font-weight: 700;
}

/* No rating summary on the Chanel PDP. */
.catalog-product-view-brand-chanel #maincontent .rating-summary {
    display: none;
}

.microsite-chanel .hover\:text-header-font-hover:hover,
.microsite-chanel-category .hover\:text-header-font-hover:hover {
    color: rgb(211 57 113 / var(--tw-text-opacity, 1));
}

/* Swatch border in brand black (hover and selected), not the Druni pink, on the PDP and category.
   The theme sets the hover/active border with !important, so override it the same way. */
.catalog-product-view-brand-chanel #maincontent .swatch-attribute-options-text-pdp .swatch-option:hover,
.catalog-product-view-brand-chanel #maincontent .swatch-attribute-options-text-pdp .swatch-option-text:hover,
.catalog-product-view-brand-chanel #maincontent .swatch-attribute-options-text-pdp-desktop .swatch-option-text:hover,
.catalog-product-view-brand-chanel #maincontent .swatch-attribute-options-text-pdp .swatch-option-text-active,
.catalog-product-view-brand-chanel #maincontent .swatch-attribute-options-text-pdp-desktop .swatch-option-text-active,
.catalog-category-view-brand-chanel .swatch-option-text:hover,
.catalog-category-view-brand-chanel .swatch-option-text-active {
    border-color: #000 !important;
}

.product-options-wrapper .swatch-option.color {
    border-radius: 0;
}

.product-options-bottom .swatches-select-container .bootstrap-select .swatch-color-background,
.product-options-bottom .swatches-select-container div.dropdown-menu .bs-searchbox input,
.product-options-bottom .swatches-select-container button.dropdown-toggle {
    border-radius: 0;
}

.product-info-main .table-wrapper.grouped .data.grouped .item .box-tocart .control {
    border-radius: 0;
}

.product-info-main .table-wrapper.grouped .data.grouped .item .box-tocart .stock-wrapper .towishlist:after,
.product-info-main .table-wrapper.grouped .data.grouped .item .box-tocart .stock-wrapper .tocart {
    color: #000;
}

.product-info-main .product-title .attribute.manufacturer .value {
    font-weight: bold;
    font-size: 18px;
}

.product-info-main .box-tocart .control {
    border-radius: 0 !important;
}

.product-info-main .box-tocart .control .qty-switcher:hover {
    background-color: #000 !important;
}

.product-info-main .box-tocart .action.tocart {
    background: #000;
    border-radius: 0 !important;
    font-family: "Arial Regular", Arial, Helvetica, sans-serif !important;
}

.product-info-main .box-tocart .product-social-links .product-addto-links .towishlist::after {
    color: #000 !important;
}

.product-info-main .product-social-share .social-links li .link-whatsapp::before,
.product-info-main .product-social-share .social-links li .link-facebook::before,
.product-info-main .product-social-share .social-links li .link-whatsapp:hover::before,
.product-info-main .product-social-share .social-links li .link-facebook:hover::before {
    color: #000 !important;
}

@media only screen and (max-width: 767px) {
    .product-info-main .product-info-main-wrapper.active .data.grouped .item .box-tocart .price-button-wrapper,
    .product-info-main .product-info-main-wrapper.active .box-tocart .price-button-wrapper {
        background: #000;
    }
}

.product-info-main .alert-container a.primary.alert {
    background: #000;
}

.product-info-main .product-info-main-head .brand-name-wrapper .description-list-container {
    font-size: 18px;
}

.product.info.detailed .product.data.items > .item.title.active > .switch {
    border-bottom-color: #000;
}

.product.info.detailed .product.data.items > .item.title > .switch {
    font-size: 14px;
}

.product.info.detailed .product.data.items > .item.title > .switch:hover {
    border-bottom-color: #000;
}

.modal-inner-wrap #druni-color-comparator .color-item {
    border-radius: 0;
}

.modal-inner-wrap #druni-color-comparator .confirm-selection {
    background-color: #000;
    border-radius: 0;
}

.modal-inner-wrap #druni-color-comparator .confirm-selection:hover {
    background-color: #000;
}

.product.attribute .value {
    color: #000;
}

@media only screen and (max-width: 767px) {
    .breadcrumbs {
        display: block !important;
        margin-bottom: 1rem;
    }

    .breadcrumbs a,
    .breadcrumbs strong {
        padding: 0;
    }

    .breadcrumbs .item::after {
        padding: 0 10px 0;
    }
}

/**
 * ATMOSUP-16248 CH2a: hide the discount percentage TAG (product-label-percentage) on Chanel brand
 * CATEGORY listings. We remove only the tag — the discounted price (final + struck old-price) is KEPT.
 * The product card is rendered by the price-render viewmodel inside the GLOBAL `catalog_list_item`
 * layout (no injectable argument, no per-brand layout hook — the badge block lives there, not in the
 * category handle), so a body-class-scoped CSS rule is the only per-brand option. Scoped to the Chanel
 * category body class so it never leaks to other brands.
 */
.catalog-category-view-brand-chanel .product-label-percentage {
    display: none !important;
}