/**
 * Dior brand space styling.
 *
 * Migrated from the legacy Dior microsite stylesheet
 * (Druni_Microsites/view/frontend/styles/module/microsite_dior.scss) + the orphan
 * Project_DynamicCategoriesBrand theme (web/css/dior.css + web/fonts/centuryGothicStdRegular),
 * converted to plain CSS: SCSS variables resolved ($color-black #000, $color-white #fff,
 * $color-gray46 #757575, $color-gray-light4 #e0e0e0, $font-weight__light 300,
 * $font-size__base 14px, $font-size__s 13px), nesting flattened and breakpoints expanded
 * (media-breakpoint-down(md) -> max-width 767px, media-breakpoint-up(lg) -> min-width 1024px).
 *
 * Loaded ONLY on the Dior brand handles (catalog_category_view_brand_dior +
 * catalog_product_view_brand_dior) and scoped under the brand body classes, so it never leaks
 * elsewhere. Like the Chanel port, Luma-DOM selectors only take effect where the current Hyva DOM
 * still exposes the same class; the bespoke legacy expertise/landing layout selectors
 * (.essence-seek-row, .makeup-heart-dior, .row-two-images, .dior-categories-header, …) are NOT
 * ported — that content is rebuilt as Hyva CMS (dior-home + expertise blocks).
 *
 * Unlike Chanel, Dior keeps the theme's ROUNDED corners (pill buttons, rounded inputs) — matching
 * the production Dior PDP — so this file does NOT force border-radius:0 anywhere.
 */

/* ---- Brand font: Century Gothic ---- */
@font-face {
    font-family: "Century Gothic Std Regular";
    src: url("../fonts/centuryGothicStdRegular/CenturyGothicStd.eot");
    src: url("../fonts/centuryGothicStdRegular/CenturyGothicStd.eot?#iefix") format("embedded-opentype"),
         url("../fonts/centuryGothicStdRegular/CenturyGothicStd.woff2") format("woff2"),
         url("../fonts/centuryGothicStdRegular/CenturyGothicStd.woff") format("woff"),
         url("../fonts/centuryGothicStdRegular/CenturyGothicStd.ttf") format("truetype"),
         url("../fonts/centuryGothicStdRegular/CenturyGothicStd.svg#centuryGothicStdRegular") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ---- Typography ---- */
.page-main,
.page-main .font-primary,
.page-main .product-item .price,
.page-main .product-card-description,
.page-main .product-card-title,
.page-main .btn,
.breadcrumbs {
    font-family: "Century Gothic Std Regular", sans-serif;
}

/* Discounted product-card price: keep the brand font (DI5).
   The theme's discount-price rules (product-list.css -> .product-item .special-price .price and
   .old-price:not([class*="hidden"]) + .normal-price .price) force Karla with up to (0,5,0)
   specificity, which beats the brand price rule above (.page-main .product-item .price, 0,3,0) on
   CONFIGURABLE products, while SIMPLE products (the lower-specificity .special-price tie) keep
   Century Gothic via this file's later source order -> simple and configurable rendered different
   fonts. Re-assert Century Gothic by mirroring those discount selectors prefixed with the brand
   body class so each wins on specificity (0,4,0 / 0,6,0) without !important. */
.catalog-category-view-brand-dior .product-item .special-price .price,
.catalog-category-view-brand-dior .product-item .old-price:not([class*="hidden"]) + .normal-price .price,
.catalog-category-view-brand-dior .product-item .price-box:has(.old-price) > .price-final_price .price,
.catalog-category-view-brand-dior .product-item .price-box > .price-from:has(.old-price) > .price-final_price .price,
.catalog-category-view-brand-dior .product-item .price-box > .price-to:has(.old-price) > .price-final_price .price {
    font-family: "Century Gothic Std Regular", sans-serif;
}

/* ---- Brand banner CMS block (dior-product-logo) ----
   On the PDP the banner is rendered through the classic CMS block renderer, so its legacy Luma
   markup (.category-image / .brand-logo / .only-desktop / .only-mobile) needs these helpers,
   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;
}

/* ---- Category page (brand space) ----
   Bottom margin under the top DIOR banner (Header zone) so it is not flush with the content
   below it. The legacy Dior category header (.dior-categories-header) is replaced by the Hyva
   brand space and hidden. */
.category-dior .category-cms-zone-header {
    margin-bottom: 1.5rem;
}

.category-dior .dior-categories-header {
    display: none;
}

/* ---- Product listing (where the Hyva DOM still exposes the legacy classes) ---- */
.products.list .product-item-details p,
.products.list .product-item-details a,
.products.list .product-item-details div,
.products.list .product-item-details span,
.products.list .product-item .tocart,
.products.list .product-item .popup .action.primary,
.swatch-option-tooltip .title,
.pages .item .page {
    font-family: "Century Gothic Std Regular", sans-serif;
}

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

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

@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; }
}

/* Pager active chip -> brand black (matches the brand-space accent remap on the PDP). */
.catalog-category-view-brand-dior .pages .pager-step-active {
    background-color: #000;
    border-color: #000;
}

/* Center the toolbar sorter on the Dior brand listing (the theme right-aligns it on desktop). */
@media only screen and (min-width: 768px) {
    .catalog-category-view-brand-dior #maincontent div:has(> div > .toolbar-sorter.sorter) {
        justify-content: center;
    }
}

/* ---- Sidebar menu (Century Gothic; the brand menu is the Druni_Menu sidebar tree) ---- */
.sidebar-main .menu-filters-mobile .icon-filters {
    font-family: "Century Gothic Std Regular", sans-serif;
}

/* ---- PDP (catalog_product_view_brand_dior) ----
   Dior brand accent = black, consumed by the shared brand-space accent remap
   (Druni_BrandHandles::css/brand-space.css), which recolours every Druni accent (add-to-cart,
   links, labels, active tab, etc.) within the brand PDP content — keeping the components'
   default ROUNDED shape (no square override, unlike Chanel). */
.catalog-product-view-brand-dior {
    --brand-accent: #000000;
    --brand-accent-hover: #1a1a1a;
}

/* Dior rating stars in black (PDP + category); the theme paints them with text-product-review-01
   via fill="currentColor". */
.catalog-product-view-brand-dior #maincontent .rating-summary svg,
.catalog-category-view-brand-dior .rating-summary svg {
    color: #000 !important;
}

/* PDP element sizing/colour, matched to production (www.druni.es/j-adore-dior-eau-parfum-mujer).
   Injected via this brand handle's CSS; scoped with #maincontent so it beats the theme's Tailwind
   utility classes (text-4xl / font-bold / text-sm) on the product info head. */

/* Brand name big & light (prod: 46px / 300). The brand is the manufacturer link inside the
   product title h1 (a.text-4xl.font-bold). */
.catalog-product-view-brand-dior #maincontent .product-page-title a {
    font-size: 30px;
    font-weight: 300;
    line-height: 1.1;
}

@media only screen and (max-width: 767px) {
    .catalog-product-view-brand-dior #maincontent .product-page-title a {
        font-size: 32px;
    }
}

.catalog-product-view-brand-dior #maincontent .product-page-title,
.catalog-product-view-brand-dior #maincontent .product-info-main .description-list-container,
.catalog-product-view-brand-dior #maincontent .product-info-main .description-list-container .value {
    font-weight: 300;
}

/* Old price 14px (prod), price-per-ml 16px (theme renders text-sm = 12px). */
.catalog-product-view-brand-dior #maincontent .product-info-main .old-price .price {
    font-size: 14px;
    font-weight: 400;
}

.catalog-product-view-brand-dior #maincontent .product-info-main .flex-no-wrap.text-gray-medium {
    font-size: 16px;
}

/* No discount badge on the main price on the right (prod hides it — the brand keeps only the
   per-swatch discounts). The product label container in the info head holds the "-NN%" chip. */
.catalog-product-view-brand-dior #maincontent .product-info-main [class*="product-label-"] {
    display: none;
}

/* Per-swatch discount badges in brand black, not the Druni pink. The theme sets the badge
   background with !important (project-customisations.css), so override it the same way. */
.catalog-product-view-brand-dior #maincontent .swatch-discount-badge {
    background-color: #000 !important;
}

/* 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-dior #maincontent .swatch-attribute-options-text-pdp .swatch-option:hover,
.catalog-product-view-brand-dior #maincontent .swatch-attribute-options-text-pdp .swatch-option-text:hover,
.catalog-product-view-brand-dior #maincontent .swatch-attribute-options-text-pdp-desktop .swatch-option-text:hover,
.catalog-product-view-brand-dior #maincontent .swatch-attribute-options-text-pdp .swatch-option-text-active,
.catalog-product-view-brand-dior #maincontent .swatch-attribute-options-text-pdp-desktop .swatch-option-text-active,
.catalog-category-view-brand-dior .swatch-option-text:hover,
.catalog-category-view-brand-dior .swatch-option-text-active {
    border-color: #000 !important;
}

.catalog-product-view-brand-dior #maincontent .product-page-title,
.catalog-product-view-brand-dior #maincontent .product-info-main .value,
.catalog-product-view-brand-dior #maincontent .product-info-main span,
.catalog-product-view-brand-dior #maincontent .box-tocart .action.tocart,
.catalog-product-view-brand-dior #maincontent .product.info.detailed .product.data.items > .item.title > .switch {
    font-family: "Century Gothic Std Regular", sans-serif;
}

.catalog-product-view-brand-dior #maincontent .product.info.detailed .product.data.items > .item.title.active > .switch,
.catalog-product-view-brand-dior #maincontent .product.info.detailed .product.data.items > .item.title > .switch:hover {
    border-bottom-color: #000;
}

.catalog-category-view-brand-dior .product-label-percentage {
    display: none;
}