/**
 * Brand-space accent remap (PDP).
 *
 * The Druni theme bakes its accent colour (primary #D01261) into the Tailwind utilities as a hex
 * literal (config/tailwind.colors.js), so it cannot be re-themed through a CSS variable out of the
 * box. This file re-maps the accent utilities actually used on the product page to a per-brand CSS
 * variable, scoped to the brand content (#maincontent) so the global header/footer keep the Druni
 * accent.
 *
 * Reuse for another brand: load this file on its product handle and set --brand-accent /
 * --brand-accent-hover on its body class (e.g. .catalog-product-view-brand-<slug>). Brands that do
 * not set the variable fall back to the Druni accent, i.e. no visual change.
 *
 * Loaded by Druni_BrandHandles on the generic `catalog_product_view_brand` handle.
 */

/* Text accent (labels, links like "Ver más", rating, etc.) */
.catalog-product-view-brand #maincontent .text-primary,
.catalog-product-view-brand #maincontent .text-brand-primary {
    color: var(--brand-accent, #D01261) !important;
}

/* Background accent (filled chips/badges) */
.catalog-product-view-brand #maincontent .bg-primary {
    background-color: var(--brand-accent, #D01261) !important;
}

/* Border accent (product label, active product tab underline, outlines) */
.catalog-product-view-brand #maincontent .border-primary,
.catalog-product-view-brand #maincontent .m-tab-title__active {
    border-color: var(--brand-accent, #D01261) !important;
}

/* Hover/focus accent */
.catalog-product-view-brand #maincontent .hover\:bg-primary:hover {
    background-color: var(--brand-accent-hover, #AA0D46) !important;
}
.catalog-product-view-brand #maincontent .hover\:text-primary:hover {
    color: var(--brand-accent-hover, #AA0D46) !important;
}

/* Primary button (e.g. the sticky add-to-cart bar) */
.catalog-product-view-brand #maincontent .btn-primary {
    background-color: var(--brand-accent, #D01261) !important;
    border-color: var(--brand-accent, #D01261) !important;
}
.catalog-product-view-brand #maincontent .btn-primary:hover,
.catalog-product-view-brand #maincontent .btn-primary:focus {
    background-color: var(--brand-accent-hover, #AA0D46) !important;
    border-color: var(--brand-accent-hover, #AA0D46) !important;
}

/* Secondary (outline) button: wishlist / notify-me, etc. */
.catalog-product-view-brand #maincontent .btn-secondary {
    color: var(--brand-accent, #D01261) !important;
    border-color: var(--brand-accent, #D01261) !important;
}
.catalog-product-view-brand #maincontent .btn-secondary:hover,
.catalog-product-view-brand #maincontent .btn-secondary:focus {
    color: var(--brand-accent-hover, #AA0D46) !important;
    border-color: var(--brand-accent-hover, #AA0D46) !important;
}

/* Rating + review stars (filled). The empty-star colour (product-review-02, grey) is left alone.
   Fallback = the original token so unset brands are unchanged. */
.catalog-product-view-brand #maincontent .text-product-review-01 {
    color: var(--brand-accent, #D01261) !important;
    fill: var(--brand-accent, #D01261) !important;
}

/* Reviews pager: active page chip. */
.catalog-product-view-brand #maincontent .pager-step-active {
    background-color: var(--brand-accent, #D01261) !important;
    border-color: var(--brand-accent, #D01261) !important;
}

/* Selected configurable option (size/swatch). The theme bakes its own pinks here
   (#d33971 for the card variant, secondary #F3C4D7 for the PDP variant), so fall back to those. */
.catalog-product-view-brand #maincontent .swatch-option-text-active {
    border-color: var(--brand-accent, #d33971) !important;
}
.catalog-product-view-brand #maincontent .swatch-option-text-pdp-active {
    border-color: var(--brand-accent, #F3C4D7) !important;
}

/* "Ver todas las opciones" link on configurable products. */
.catalog-product-view-brand #maincontent .swatch-view-all-link {
    color: var(--brand-accent, #d33971) !important;
}

/* Selected configurable visual card (the colour block the customer picks) + its hover. The theme
   bakes its pink (#d33971) into the active/hover border (tailwind.swatch.js .swatch-visual-card),
   so it ignored the accent remap. Re-colour the border with the brand accent (black for Chanel &
   Dior); unset brands fall back to the theme pink, i.e. no change. */
.catalog-product-view-brand #maincontent .swatch-visual-card-active,
.catalog-product-view-brand #maincontent .swatch-visual-card:hover {
    border-color: var(--brand-accent, #d33971) !important;
}

/* Bullet-point values (Druni_BulletPoints): the global style paints each value as a pink chip
   (#D01261 text on a pale-pink #FDF5F8 background). On a brand PDP, drop the background and use the
   brand accent for the text — black with no fill for Chanel & Dior; unset brands keep the pink. */
.catalog-product-view-brand #maincontent .bullet_point_value {
    background-color: transparent !important;
    color: var(--brand-accent, #D01261) !important;
}