/* NamilKa MX — couche CSS du clone (complète le CSS Shopify d'origine, qui reste intact). */

/* Fonts du hero (le texte était incrusté dans l'image d'origine ; on le recompose en HTML) */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/Newsreader-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/Newsreader-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/InstrumentSerif-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/InstrumentSerif-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

html.cc-lock { overflow: hidden; }

/* ---------- hero : texte HTML par-dessus l'image nettoyée ---------- */
.responsive-image-section a.cc-hero-link { display: block; position: relative; container-type: inline-size; color: inherit; text-decoration: none; }
.cc-hero { position: absolute; inset: 0; pointer-events: none; }
.cc-hero--d { left: 6.44cqw; top: 16.4cqw; color: #1b1a19; }
.cc-hero--d .cc-hero__title { font-family: 'Newsreader', 'Times New Roman', serif; font-weight: 600; font-size: 4.75cqw; line-height: 1.0; letter-spacing: -0.04em; margin: 0; color: #1b1a19; }
.cc-hero--d .cc-hero__sub { font-family: var(--font-body-family, 'DM Sans'), sans-serif; font-size: 1.38cqw; line-height: 1.3; margin: 1.15cqw 0 0; color: #2a2724; letter-spacing: 0; }
.cc-hero--d .cc-hero__btn { display: inline-flex; align-items: center; gap: .7cqw; margin-top: 1.95cqw; padding: 0 1.9cqw; height: 3.75cqw; background: #1c1b1a; color: #fff; border-radius: .3cqw; font-family: var(--font-body-family, 'DM Sans'), sans-serif; font-weight: 500; font-size: 1.07cqw; letter-spacing: .06em; text-transform: uppercase; }
.cc-hero--m { left: 5.07cqw; top: 86.2cqw; color: #f4efe6; }
.cc-hero--m .cc-hero__title { font-family: 'Instrument Serif', 'Times New Roman', serif; font-weight: 400; font-size: 8.6cqw; line-height: 1.02; letter-spacing: -0.01em; margin: 0; color: #f6f1e8; }
.cc-hero--m .cc-hero__sub { font-family: var(--font-body-family, 'DM Sans'), sans-serif; font-size: 2.3cqw; line-height: 1.4; margin: 2.4cqw 0 0; color: #efe9df; }
.cc-hero--m .cc-hero__btn { display: inline-flex; align-items: center; gap: 1.2cqw; margin-top: 4.3cqw; padding: 0 3.1cqw; height: 6.1cqw; background: #f4eee3; color: #1c1b1a; border-radius: 1cqw; font-family: var(--font-body-family, 'DM Sans'), sans-serif; font-weight: 600; font-size: 1.95cqw; letter-spacing: .05em; text-transform: uppercase; }
.cc-hero__btn svg { width: 1.1em; height: 1.1em; }
@media (max-width: 768px) { .responsive-image-section a.cc-hero-link--d { display: none; } }
@media (min-width: 769px) { .responsive-image-section a.cc-hero-link--m { display: none; } }

/* ---------- menus déroulants du header (ouverts par <details open>) ---------- */
details[is="details-dropdown"][open] > .dropdown,
details[is="details-mega"][open] > .mega-menu { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s ease; }
details[is="details-dropdown"] > summary { list-style: none; cursor: pointer; }
details[is="details-dropdown"] > summary::-webkit-details-marker { display: none; }
details[is="details-dropdown"][open] > summary svg { transform: rotate(180deg); transition: transform .25s; }

/* ---------- panier ---------- */
.cdrawer { transition: opacity .25s ease; }
.cdrawer:not([hidden]) { display: block; }
.cdrawer:not(.cc-open) .cdrawer__panel { transform: translateX(24px); opacity: 0; }
.cdrawer .cdrawer__panel { transition: transform .3s cubic-bezier(.3,1,.3,1), opacity .25s; }

/* ---------- carrousels : la piste est pilotée par clone.js ---------- */
.cc-swiper-on > .swiper-wrapper { transition-property: transform, height; transition-timing-function: cubic-bezier(.3,1,.3,1); }
.swiper-vertical.product__media-gallery-thumbails { overflow-y: auto; scrollbar-width: none; }
.swiper-vertical.product__media-gallery-thumbails::-webkit-scrollbar { display: none; }
.swiper-vertical.product__media-gallery-thumbails .swiper-slide { cursor: pointer; }

/* ---------- liste des teintes Kaching ---------- */
[id^="swatch-dropdown-"].cc-open { display: block !important; }

/* ---------- Loox trust badge statique ---------- */
.cc-loox { display: inline-flex; flex-direction: column; align-items: center; border: 1px solid #d9d9d9; border-radius: 8px; overflow: hidden; background: #fff; font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; color: #222; min-width: 182px; }
.cc-loox__top { display: flex; align-items: center; gap: 8px; padding: 10px 14px 2px; font-size: 20px; font-weight: 700; }
.cc-loox__stars { display: inline-flex; gap: 1px; }
.cc-loox__stars svg { width: 21px; height: 21px; fill: #2b2b2b; }
.cc-loox__count { padding: 4px 14px 10px; font-size: 20px; }
.cc-loox__count strong { font-weight: 700; }
.cc-loox__brand { width: 100%; background: #2e2e2e; color: #fff; text-align: center; font-size: 12px; padding: 4px 0 5px; letter-spacing: .02em; }
.cc-loox__brand b { letter-spacing: .08em; }

/* ---------- divers ---------- */
.cc-form-msg { margin: 12px 0 0; font-size: 14px; font-weight: 500; color: #1f7a3a; }
video-element.cc-playing > img, video-element.cc-playing > button { display: none; }
video-element > video { width: 100%; height: 100%; object-fit: cover; }

/* bandeau de réassurance : les libellés espagnols sont plus longs que le français */
@media (max-width: 767px) { .trust-badges { gap: 12px !important; padding-inline: 6px !important; } }

/* tiroirs (menu mobile, modales) au-dessus du bandeau promo sticky */
.drawer[open] { z-index: 60; }
/* le tiroir vit dans la section header sticky (z-index 20) : on remonte toute la section quand il est ouvert */
.shopify-section:has(> .drawer[open]), .shopify-section:has(.menu-drawer[open]), .header-section:has(.drawer[open]) { z-index: 60 !important; }

/* onglets ajoutés (fiche poudre : ¿Es seguro? / Composición / Envíos) : listes à coches, étiquettes, bloc INCI */
.accordion-details__content .cc-checks { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 12px; }
.accordion-details__content .cc-checks li { position: relative; padding-left: 36px; margin: 0; }
.accordion-details__content .cc-checks li::before { content: ''; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #cff5b4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.accordion-details__content .cc-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.accordion-details__content .cc-pills span { padding: 7px 15px; border: 1px solid #c9f0a6; background: #f5fdee; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.3; color: #111; }
.accordion-details__content .cc-sub { margin: 20px 0 10px; font-size: 19px; font-weight: 700; color: #111; }
.accordion-details__content .cc-inci { background: #f5f5f5; border-radius: 8px; padding: 14px 16px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.6; color: #222; }

/* grille vidéo réduite à une seule vidéo : vignette centrée */
.swiper-wrapper:has(> [class^="video-slide-template"]:only-child) { justify-content: center; transform: none !important; }

/* offres : le titre reste sur une ligne, le badge « Ahorra … » passe en dessous */
/* offres : le badge « Ahorra … » passe seul sous le titre, qui garde toute la largeur de la ligne.
   La colonne des prix n'est jamais poussée hors de la carte. */
.kaching-bundles .kaching-bundles__bar-first-line { flex-wrap: wrap; }
.kaching-bundles .kaching-bundles__bar-title { flex: 0 0 100%; }
.kaching-bundles .kaching-bundles__bar-label { flex: 0 0 auto; align-self: flex-start; width: auto; }
.kaching-bundles .kaching-bundles__bar-content-left { min-width: 0; }