/* Ocikids — colores de marca (sacados del logo) */
:root {
  --oci-red: #e32b35;
  --oci-red-dark: #c21f29;
  --oci-green: #399f37;
  --oci-blue: #0e72c7;
  --oci-yellow: #f7ba0b;
  --oci-navy: #151e39;
  --oci-cream: #fff8ec;
  --oci-stripe: linear-gradient(90deg, var(--oci-red) 0 25%, var(--oci-green) 25% 50%, var(--oci-blue) 50% 75%, var(--oci-yellow) 75% 100%);
}

body, #wrapper { background: #fff; }

/* ---------- Cabecera ---------- */
#header { background: #fff; box-shadow: 0 2px 12px rgba(21, 30, 57, .08); }
#header .header-nav { background: var(--oci-navy); border: 0; max-height: none; }
#header .header-nav,
#header .header-nav a,
#header .header-nav .material-icons,
#header .header-nav .expand-more,
#header .header-nav .language-selector,
#header .header-nav .currency-selector { color: #fff; }
#header .header-nav a:hover { color: var(--oci-yellow); }
#header .header-nav .blockcart { background: var(--oci-red); }
#header .header-nav .blockcart.active { background: var(--oci-yellow); }
#header .header-nav .blockcart.active a,
#header .header-nav .blockcart.active .material-icons { color: var(--oci-navy); }
#header .header-nav::after { content: ""; display: block; height: 5px; background: var(--oci-stripe); }

#header .header-top { background: #fff !important; padding: 16px 0 0; }
#header .logo { max-height: 104px; width: auto; }

/* Pedido: el tema pone el logo en la barra de arriba; aquí va en blanco, no en el azul de la barra */
body#checkout #header .header-nav { background: #fff; }
body#checkout #header .header-nav,
body#checkout #header .header-nav a,
body#checkout #header .header-nav .material-icons { color: var(--oci-navy); }
body#checkout #header .header-nav > .container > .row { display: flex; align-items: center; flex-wrap: wrap; }
body#checkout #header .header-nav #_desktop_logo { padding: 14px 15px; }
body#checkout #header .header-nav .logo { max-height: 84px; }

/* Móvil: el logo va en la barra de arriba; barra en blanco para que no quede como una caja blanca */
@media (max-width: 767px) {
  #header .header-nav { background: #fff; }
  #header .header-nav .mobile { display: flex; align-items: center; padding: 6px 0; }
  #header .header-nav .mobile .top-logo { order: 2; flex: 1; text-align: center; float: none; }
  #header .header-nav .mobile #menu-icon { order: 1; float: none; }
  #header .header-nav .mobile #_mobile_user_info { order: 3; float: none; }
  #header .header-nav .mobile #_mobile_cart { order: 4; float: none; }
  #header .header-nav .mobile .clearfix { display: none; }
  #header .header-nav #_mobile_logo .logo { max-height: 52px; }
  #header .header-nav #menu-icon .material-icons,
  #header .header-nav #_mobile_user_info .material-icons { color: var(--oci-navy); }
}

/* Escritorio: fila 1 logo + buscador, fila 2 menú a todo el ancho */
@media (min-width: 768px) {
  #header .header-top > .container > .row:first-child {
    display: grid; grid-template-columns: 220px 1fr; align-items: center; row-gap: 12px; margin: 0;
  }
  #header .header-top > .container > .row:first-child::before,
  #header .header-top > .container > .row:first-child::after { display: none; }
  #header #_desktop_logo { grid-column: 1; grid-row: 1; width: auto; max-width: none; float: none; padding: 0; }
  #header .header-top-right { display: contents; }
  #header #search_widget { grid-column: 2; grid-row: 1; justify-self: end; width: min(440px, 100%); float: none; margin: 0; min-width: 0; }
  #header #_desktop_top_menu {
    grid-column: 1 / -1; grid-row: 2; float: none; width: auto;
    border-top: 1px solid #eceef4; padding: 10px 0 12px; margin: 0 -15px;
  }
  #header #_desktop_top_menu > .top-menu[data-depth="0"] { display: flex; justify-content: center; flex-wrap: wrap; gap: .45rem; margin: 0; }
}

/* Menú principal: cada categoría con su color, la actual queda rellena */
#top-menu > li#category-11 { --c: var(--oci-red); }
#top-menu > li#category-14 { --c: var(--oci-blue); }
#top-menu > li#category-15 { --c: var(--oci-yellow); --c-text: var(--oci-navy); }
#top-menu > li#category-16 { --c: var(--oci-green); }
#top-menu > li#category-10 { --c: var(--oci-navy); }
#header .top-menu[data-depth="0"] > li { float: none; }
#header .top-menu[data-depth="0"] > li > a {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--oci-navy); font-weight: 800; font-size: .9rem; letter-spacing: .02em;
  padding: .55rem 1.05rem; margin: 0; border-radius: 999px; border: 2px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
#header .top-menu[data-depth="0"] > li > a::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--oci-red)); flex: none;
}
#header .top-menu[data-depth="0"] > li > a:hover { border-color: var(--c, var(--oci-red)); color: var(--oci-navy); }
#header .top-menu[data-depth="0"] > li.current > a,
#header .top-menu[data-depth="0"] > li:has(li.current) > a {
  background: var(--c, var(--oci-red)); border-color: var(--c, var(--oci-red)); color: var(--c-text, #fff);
}
#header .top-menu[data-depth="0"] > li.current > a::before,
#header .top-menu[data-depth="0"] > li:has(li.current) > a::before { background: currentColor; }
/* Alimentación: siempre destacada (es la prioridad del cliente) */
#header .top-menu[data-depth="0"] > li#category-11 > a { background: var(--oci-red); color: #fff; border-color: var(--oci-red); box-shadow: 0 3px 0 var(--oci-red-dark); }
#header .top-menu[data-depth="0"] > li#category-11 > a::before { content: "🍿"; width: auto; height: auto; background: none; }
#header .top-menu[data-depth="0"] > li#category-11 > a:hover { background: var(--oci-red-dark); border-color: var(--oci-red-dark); }
#header .top-menu[data-depth="0"] > li#category-11.current > a,
#header .top-menu[data-depth="0"] > li#category-11:has(li.current) > a { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--oci-red); }
#header .top-menu .sub-menu { border-top: 4px solid var(--c, var(--oci-red)); border-radius: 0 0 14px 14px; box-shadow: 0 14px 30px rgba(21, 30, 57, .15); }
#header .top-menu .sub-menu a { color: var(--oci-navy); font-weight: 600; }
#header .top-menu .sub-menu a:hover, #header .top-menu .sub-menu li.current > a { color: var(--c, var(--oci-red)); }
@media (min-width: 768px) and (max-width: 1199px) {
  #header .top-menu[data-depth="0"] > li > a { font-size: .8rem; padding: .45rem .75rem; }
}

#search_widget form input { border-radius: 999px; border: 2px solid #e6e8ef; background: #fff; }
#search_widget form input:focus { border-color: var(--oci-blue); outline: 0; }

/* ---------- Generales ---------- */
.btn-primary, a.btn-primary, button.btn-primary, .card-block .btn-primary {
  background-color: var(--oci-red) !important; border-color: var(--oci-red) !important;
  border-radius: 999px; font-weight: 700;
}
.btn-primary:hover, .btn-primary:focus { background-color: var(--oci-red-dark) !important; border-color: var(--oci-red-dark) !important; }
a { color: var(--oci-blue); }
a:hover { color: var(--oci-red); }

.block-category h1, h1.h1, .page-content h1, .products-section-title, #main .page-header h1 {
  color: var(--oci-navy); font-weight: 800;
}
.products-section-title::after, .block-category h1::after {
  content: ""; display: block; width: 72px; height: 5px; margin: .5rem auto 0; border-radius: 3px; background: var(--oci-stripe);
}
.block-category h1::after { margin-left: 0; }
.block-category { border-top: 5px solid var(--oci-yellow); border-radius: 12px; }

/* Fichas de producto */
.product-miniature .thumbnail-container { border-radius: 14px; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.product-miniature .thumbnail-container:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(21, 30, 57, .14); }
.product-miniature .product-title a { color: var(--oci-navy); font-weight: 600; }
.product-price-and-shipping .price, .product-prices .current-price, .current-price-value { color: var(--oci-red); font-weight: 800; }
.product-flags li.product-flag { background: var(--oci-blue); border-radius: 6px; font-weight: 700; }
.product-flags li.product-flag.discount, .product-flags li.product-flag.on-sale,
.discount-percentage, .discount-amount { background: var(--oci-yellow) !important; color: var(--oci-navy) !important; }
.block-categories, #search_filters { border-radius: 12px; }
.block-categories .category-sub-menu li[data-depth="0"] > a { color: var(--oci-navy); font-weight: 600; }

/* Pie */
.footer-container { background: var(--oci-navy); color: #c9cde0; padding-top: 2.5rem; margin-top: 2rem; }
.footer-container::before { content: ""; display: block; height: 5px; background: var(--oci-stripe); margin-top: -2.5rem; margin-bottom: 2.5rem; }
.footer-container, .footer-container a, .footer-container li a, .footer-container .h3, .footer-container .h4,
.footer-container p, .footer-container .block-contact, .footer-container .account-list a { color: #c9cde0; }
.footer-container .h3, .footer-container .h4, .footer-container .block-contact-title { color: #fff; font-weight: 800; }
.footer-container a:hover, .footer-container li a:hover { color: var(--oci-yellow); }
#block-reassurance, .blockreassurance { border-radius: 12px; }

/* ---------- Home ---------- */
.oci-home { margin: 0 0 2.5rem; }
.oci-hero {
  position: relative; overflow: hidden; border-radius: 22px;
  background: var(--oci-red); color: #fff;
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 1.5rem;
  padding: 2.5rem 2.75rem; min-height: 340px;
}
.oci-hero::before, .oci-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.oci-hero::before { width: 420px; height: 420px; right: -90px; top: -120px; background: var(--oci-yellow); }
.oci-hero::after { width: 140px; height: 140px; right: 42%; bottom: -60px; background: rgba(255, 255, 255, .12); }
.oci-hero > * { position: relative; z-index: 1; }
.oci-hero .oci-kicker {
  display: inline-block; background: var(--oci-yellow); color: var(--oci-navy);
  font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .35rem .8rem; border-radius: 999px; margin-bottom: 1rem;
}
.oci-hero h2 { color: #fff; font-size: 2.6rem; line-height: 1.05; font-weight: 900; margin: 0 0 .9rem; text-transform: none; }
.oci-hero p { color: #fff; font-size: 1.05rem; opacity: .95; max-width: 30em; margin: 0 0 1.5rem; }
.oci-btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.oci-btn {
  display: inline-block; padding: .75rem 1.3rem; border-radius: 999px; font-weight: 800;
  text-decoration: none; transition: transform .15s;
}
.oci-btn:hover { transform: translateY(-2px); text-decoration: none; }
.oci-btn-light { background: #fff; color: var(--oci-red) !important; }
.oci-btn-navy { background: var(--oci-navy); color: #fff !important; }
.oci-hero-imgs { display: flex; justify-content: center; align-items: flex-end; gap: 1rem; }
.oci-hero-imgs img {
  background: #fff; border-radius: 50%; object-fit: contain; padding: 14px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .22);
}
.oci-hero-imgs img:first-child { width: 250px; height: 250px; }
.oci-hero-imgs img:last-child { width: 160px; height: 160px; margin-bottom: -10px; }

.oci-cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-top: 1.25rem; }
.oci-cat {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 1.1rem .8rem 1rem; border-radius: 18px; color: #fff !important; text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.oci-cat:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(21, 30, 57, .18); text-decoration: none; }
.oci-cat img { width: 104px; height: 104px; border-radius: 50%; background: #fff; object-fit: contain; padding: 8px; margin-bottom: .7rem; }
.oci-cat strong { font-size: 1rem; font-weight: 800; line-height: 1.15; }
.oci-cat span { font-size: .8rem; opacity: .9; margin-top: .2rem; }
.oci-cat.red { background: var(--oci-red); }
.oci-cat.pink { background: #e8458f; }
.oci-cat.blue { background: var(--oci-blue); }
.oci-cat.yellow { background: var(--oci-yellow); color: var(--oci-navy) !important; }
.oci-cat.green { background: var(--oci-green); }
.oci-cat.navy { background: var(--oci-navy); }

@media (max-width: 991px) {
  .oci-hero { grid-template-columns: 1fr; padding: 2rem 1.5rem; text-align: center; }
  .oci-hero p { margin-left: auto; margin-right: auto; }
  .oci-btns { justify-content: center; }
  .oci-hero h2 { font-size: 2rem; }
  .oci-hero-imgs img:first-child { width: 190px; height: 190px; }
  .oci-hero-imgs img:last-child { width: 120px; height: 120px; }
  .oci-cats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
  .oci-cats { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .oci-cat img { width: 84px; height: 84px; }
}

/* El módulo de texto (#custom-text) trae padding, fondo y centrado propios */
#custom-text:has(.oci-home) { padding: 0; background: transparent; text-align: left; margin-bottom: 0; box-shadow: none; }
#custom-text .oci-hero { text-align: left; }
#custom-text .oci-hero h2 { color: #fff; font-size: 2.6rem; line-height: 1.05; font-weight: 900; text-transform: none; margin: 0 0 .9rem; }
#custom-text .oci-hero p { color: #fff; font-size: 1.05rem; }
#custom-text .oci-cat img { width: 104px !important; height: 104px !important; max-width: none; flex: none; }
@media (max-width: 991px) {
  #custom-text .oci-hero { text-align: center; }
  #custom-text .oci-hero h2 { font-size: 2rem; }
}
@media (max-width: 575px) {
  #custom-text .oci-cat img { width: 84px !important; height: 84px !important; }
}

/* ---------- Color por categoría (páginas de categoría y de producto) ---------- */
body { --cat: var(--oci-red); --cat-text: #fff; }
body.category-id-13, body.product-id-category-13 { --cat: #e8458f; }
body.category-id-14, body.category-id-parent-14, body.product-id-category-14,
body.product-id-category-17, body.product-id-category-18, body.product-id-category-19,
body.product-id-category-20, body.product-id-category-21, body.product-id-category-22 { --cat: var(--oci-blue); }
body.category-id-15, body.product-id-category-15 { --cat: var(--oci-yellow); --cat-text: var(--oci-navy); }
body.category-id-16, body.product-id-category-16 { --cat: var(--oci-green); }
body.category-id-10, body.product-id-category-10 { --cat: var(--oci-navy); }

/* Cabecera de categoría tipo banner, como la home */
#main .block-category.card {
  position: relative; overflow: hidden; min-height: 0;
  background: var(--cat); color: var(--cat-text); border: 0; border-radius: 22px;
  padding: 2rem 2.25rem; margin-bottom: 1.5rem; box-shadow: none;
}
#main .block-category.card::before {
  content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%;
  right: -80px; top: -110px; background: rgba(255, 255, 255, .16); pointer-events: none;
}
#main .block-category > * { position: relative; z-index: 1; }
#main .block-category h1.h1 { color: var(--cat-text); font-size: 2.1rem; font-weight: 900; text-transform: none; margin-bottom: .75rem; }
#main .block-category h1::after { background: var(--cat-text); opacity: .85; width: 60px; margin-left: 0; }
#main .block-category .block-category-inner { display: flex; align-items: center; gap: 1.5rem; }
#main .block-category #category-description { flex: 1; color: var(--cat-text); font-size: 1.05rem; margin: 0; }
#main .block-category #category-description p, #main .block-category #category-description strong { color: var(--cat-text); }
#main .block-category .category-cover { position: static; flex: none; }
#main .block-category .category-cover picture, #main .block-category .category-cover img {
  display: block; width: 150px; height: 150px; border-radius: 50%; object-fit: contain; background: #fff; padding: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
}
@media (max-width: 767px) {
  #main .block-category.card { padding: 1.5rem 1.25rem; display: block !important; }
  #main .block-category h1.h1 { font-size: 1.6rem; }
  #main .block-category .category-cover { display: none; }
}

/* Subcategorías en tarjetas de color */
#subcategories { border-top: 0; margin-bottom: 1.5rem; }
#subcategories .subcategory-heading { color: var(--oci-navy); font-weight: 800; text-transform: none; }
#subcategories ul.subcategories-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 1rem; margin: 0; padding: 0; }
#subcategories ul.subcategories-list::before, #subcategories ul.subcategories-list::after { display: none; }
#subcategories ul.subcategories-list li {
  width: auto; min-height: 0; margin: 0; float: none; padding: 1rem .75rem;
  background: var(--cat); border-radius: 18px; text-align: center; transition: transform .15s, box-shadow .15s;
}
#subcategories ul.subcategories-list li:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(21, 30, 57, .18); }
#subcategories .subcategory-image { padding: 0; border: 0; margin-bottom: .6rem; }
#subcategories .subcategory-image a { display: block; padding: 0; border: 0; }
#subcategories .subcategory-image img {
  width: 100px; height: 100px; max-width: none; border-radius: 50%; object-fit: cover; background: #fff; padding: 6px; margin: 0 auto;
}
#subcategories .subcategory-name {
  display: block; color: var(--cat-text); font-weight: 800; font-size: .95rem; text-transform: none; line-height: 1.2;
  white-space: normal; overflow: visible; text-overflow: clip;
}
#subcategories .cat_desc { display: none; }

/* Barra lateral y listado */
#left-column .block-categories, #left-column #search_filters { border-radius: 16px; box-shadow: 0 2px 12px rgba(21, 30, 57, .06); }
#left-column .block-categories { border-top: 5px solid var(--cat); }
#left-column .block-categories .category-top-menu > li > a.h6 { color: var(--oci-navy); font-weight: 800; }
#left-column .block-categories a:hover { color: var(--cat); }
#js-product-list-top .total-products p, .products-selection .sort-by { color: var(--oci-navy); }
.pagination .current a { color: var(--cat) !important; font-weight: 800; }
.products-sort-order .select-title { border-radius: 999px; }

/* Texto SEO al final de la categoría */
#js-product-list-footer .card { border: 0; border-radius: 18px; background: var(--oci-cream); box-shadow: none; }
#js-product-list-footer .card-block { padding: 2rem 2.25rem; color: #3a3f55; font-size: 1rem; line-height: 1.6; }
#js-product-list-footer h2 {
  color: var(--oci-navy); font-size: 1.35rem; font-weight: 800; margin: 1.5rem 0 .6rem; padding-left: .8rem; border-left: 5px solid var(--cat);
}
#js-product-list-footer h2:first-child { margin-top: 0; }
#js-product-list-footer h3 {
  color: var(--oci-navy); font-size: 1.02rem; font-weight: 700; margin: 1rem 0 .3rem;
}
#js-product-list-footer h3 + p { margin-bottom: .8rem; }
#js-product-list-footer ul { padding-left: 1.2rem; }
#js-product-list-footer li { margin-bottom: .35rem; }
#js-product-list-footer a { color: var(--oci-blue); font-weight: 600; }

/* Página de producto */
#product #main h1, #product .h1 { color: var(--oci-navy); font-weight: 800; text-transform: none; }
#product .tabs .nav-tabs .nav-link.active { border-bottom-color: var(--cat); color: var(--oci-navy); }
#product .product-cover img, #product .product-images img { border-radius: 14px; }
.breadcrumb { background: transparent; }
.breadcrumb li a { color: var(--oci-blue); }

/* Ajustes: menú en una sola línea y nombres completos de subcategoría */
#header .top-menu[data-depth="0"] > li > a { font-size: .82rem; letter-spacing: 0; padding: .5rem .9rem; }
@media (min-width: 768px) and (max-width: 1199px) {
  #header .top-menu[data-depth="0"] > li > a { font-size: .74rem; padding: .4rem .6rem; gap: .3rem; }
}
#subcategories ul.subcategories-list li .subcategory-image a { border: 0; }
#subcategories ul.subcategories-list li h5 { display: none; }
#subcategories ul.subcategories-list li .subcategory-image a::after {
  content: attr(title); display: block; margin-top: .65rem;
  color: var(--cat-text); font-weight: 800; font-size: .95rem; line-height: 1.2;
}
#subcategories ul.subcategories-list li .subcategory-image a:hover { text-decoration: none; }
#main .block-category.card { padding-bottom: 1.75rem; }

/* ---------- Barra lateral: árbol de categorías ---------- */
#left-column .block-categories { padding: 1.25rem 1.1rem; }
#left-column .block-categories .category-top-menu > li:first-child > a.h6 {
  display: block; font-size: .8rem; letter-spacing: .08em; color: #8a90a6; margin-bottom: .6rem;
}
#left-column .block-categories .category-sub-menu { margin: 0; }
#left-column .block-categories .category-sub-menu li { position: relative; }
#left-column .block-categories .category-sub-menu li[data-depth="0"] > a {
  display: block; padding: .5rem 2rem .5rem .6rem; border-radius: 10px;
  color: var(--oci-navy); font-weight: 700; line-height: 1.25;
}
#left-column .block-categories .category-sub-menu li[data-depth="0"] > a:hover { background: #f3f5fa; color: var(--cat); text-decoration: none; }
#left-column .block-categories .category-sub-menu .category-sub-link {
  display: block; padding: .35rem .6rem .35rem 1.2rem; font-size: .88rem; color: #4a5068; line-height: 1.3; font-weight: 500;
}
#left-column .block-categories .category-sub-menu .category-sub-link:hover { color: var(--cat); }
#left-column .block-categories .category-sub-menu li[data-depth="1"] { margin: 0; }
#left-column .block-categories .collapse-icons {
  position: absolute; right: .25rem; top: .35rem; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: #f3f5fa; cursor: pointer;
}
#left-column .block-categories .collapse-icons .material-icons { font-size: 18px; color: var(--oci-navy); }

/* ---------- Barra lateral: filtros ---------- */
#search_filters {
  background: #fff; padding: 1.25rem 1.1rem; margin-top: 1.25rem; border-top: 5px solid var(--cat);
}
#search_filters > .h6, #search_filters > p.text-uppercase {
  font-size: .8rem; letter-spacing: .08em; color: #8a90a6; margin-bottom: .75rem;
}
#search_filters .facet { padding: .9rem 0 .4rem; border-top: 1px solid #eceef4; }
#search_filters .facet:first-of-type { border-top: 0; padding-top: 0; }
#search_filters .facet .facet-title { color: var(--oci-navy); font-weight: 800; font-size: .95rem; text-transform: none; margin-bottom: .5rem; }
#search_filters .facet ul { margin: 0; }
#search_filters .facet .facet-label { display: flex; align-items: flex-start; gap: .55rem; margin: 0; padding: .3rem 0; }
#search_filters .facet .facet-label .custom-checkbox { flex: none; margin-top: 2px; }
#search_filters .facet .facet-label .custom-checkbox input[type=checkbox] + span {
  width: 18px; height: 18px; border: 2px solid #c9cde0; border-radius: 5px; margin: 0;
}
#search_filters .facet .facet-label .custom-checkbox input[type=checkbox]:checked + span { background: var(--cat); border-color: var(--cat); }
#search_filters .facet .facet-label .custom-checkbox input[type=checkbox]:checked + span .checkbox-checked { color: var(--cat-text); font-size: 14px; margin: 0; }
#search_filters .facet .facet-label a { color: #3a3f55; font-size: .9rem; line-height: 1.3; margin-top: 0; width: auto; }
#search_filters .facet .facet-label a:hover, #search_filters .facet .facet-label.active a { color: var(--cat); }
#search_filters .facet .magnitude {
  display: inline-block; margin-left: .25rem; padding: 0 .45rem; border-radius: 999px;
  background: #f3f5fa; color: #6b7189; font-size: .75rem; font-weight: 700;
}
#search_filters .faceted-slider p { color: var(--oci-navy); font-weight: 700; font-size: .9rem; }
#search_filters .ui-slider { height: 6px; border: 0; background: #e6e8ef; border-radius: 999px; margin: 1rem .5rem .5rem; }
#search_filters .ui-slider .ui-slider-range { background: var(--cat); border-radius: 999px; }
#search_filters .ui-slider .ui-slider-handle {
  top: -7px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
  border: 3px solid var(--cat); background: #fff; cursor: grab;
}
#search_filters .ui-slider .ui-slider-handle:focus { outline: 0; box-shadow: 0 0 0 4px rgba(21, 30, 57, .12); }
#search_filters .clear-all-wrapper .btn, #_desktop_search_filters_clear_all .btn {
  border-radius: 999px; background: #f3f5fa; color: var(--oci-navy); font-weight: 700; border: 0;
}
.active_filters { background: #f3f5fa; border-radius: 14px; padding: .75rem 1rem; margin-bottom: 1rem; }
.active_filters .active-filter-title { color: var(--oci-navy); font-weight: 700; }
.active_filters .filter-block { background: #fff; border-radius: 999px; box-shadow: none; color: var(--oci-navy); font-weight: 600; }
#search_filter_toggler { border-radius: 999px; }
@media (max-width: 767px) {
  #search_filters { border-top-width: 0; border-radius: 0; box-shadow: none; }
}

/* Nombres de producto completos, a dos líneas como máximo */
.product-miniature .product-title { text-transform: none; }
.product-miniature .product-title a {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-transform: none; line-height: 1.3; min-height: 2.6em;
}

/* Banner de categoría: título y texto juntos a la izquierda, imagen a la derecha */
@media (min-width: 768px) {
  #main .block-category.card { display: grid !important; grid-template-columns: 1fr auto; column-gap: 1.75rem; align-items: center; }
  #main .block-category h1.h1 { grid-column: 1; align-self: end; }
  #main .block-category .block-category-inner { display: contents; }
  #main .block-category #category-description { grid-column: 1; align-self: start; }
  #main .block-category .category-cover { grid-column: 2; grid-row: 1 / span 2; }
}
/* Filtros: nombres completos */
#search_filters .facet .facet-label a { white-space: normal; overflow: visible; text-overflow: clip; display: inline; }

#js-product-list-footer p, #js-product-list-footer li { color: #3a3f55; }

/* Subcategorías: el tema fija min-width:200px y las tarjetas se pisaban el hueco */
#subcategories ul.subcategories-list { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 1.5rem 1.25rem; }
#subcategories ul.subcategories-list li { min-width: 0 !important; width: auto !important; max-width: none; padding: 1.25rem .9rem; }
@media (max-width: 575px) {
  #subcategories ul.subcategories-list { grid-template-columns: repeat(2, 1fr); gap: .9rem; }
}

/* Pie: títulos de bloque siempre legibles sobre el azul marino */
.footer-container .myaccount-title, .footer-container .myaccount-title a,
.footer-container .block-contact .block-contact-title, .footer-container .links .h3, .footer-container .links .title .h3 {
  color: #fff !important; font-weight: 800;
}
.footer-container .links .collapse-icons .material-icons, .footer-container .navbar-toggler .material-icons { color: #fff; }
.footer-container .text-sm-center { color: #8a90a6; margin-top: 1.5rem; }
.block_newsletter { background: var(--oci-cream); border-radius: 18px; padding: 1.5rem; margin-bottom: 2rem; }
.block_newsletter p, .block_newsletter #block-newsletter-label { color: var(--oci-navy); font-weight: 700; }
.block_newsletter form input[type=email] { border-radius: 999px 0 0 999px; border: 2px solid #e6e8ef; }

/* Ficha de producto: marca en el menú la categoría del producto */
body.product-id-category-11 #header .top-menu[data-depth="0"] > li#category-11 > a,
body.product-id-category-12 #header .top-menu[data-depth="0"] > li#category-11 > a,
body.product-id-category-13 #header .top-menu[data-depth="0"] > li#category-11 > a,
body.product-id-category-14 #header .top-menu[data-depth="0"] > li#category-14 > a,
body.product-id-category-17 #header .top-menu[data-depth="0"] > li#category-14 > a,
body.product-id-category-18 #header .top-menu[data-depth="0"] > li#category-14 > a,
body.product-id-category-19 #header .top-menu[data-depth="0"] > li#category-14 > a,
body.product-id-category-20 #header .top-menu[data-depth="0"] > li#category-14 > a,
body.product-id-category-21 #header .top-menu[data-depth="0"] > li#category-14 > a,
body.product-id-category-22 #header .top-menu[data-depth="0"] > li#category-14 > a,
body.product-id-category-15 #header .top-menu[data-depth="0"] > li#category-15 > a,
body.product-id-category-16 #header .top-menu[data-depth="0"] > li#category-16 > a,
body.product-id-category-10 #header .top-menu[data-depth="0"] > li#category-10 > a {
  background: var(--c); border-color: var(--c); color: var(--c-text, #fff);
}
body.product-id-category-14 #header .top-menu[data-depth="0"] > li#category-14 > a::before,
body.product-id-category-17 #header .top-menu[data-depth="0"] > li#category-14 > a::before,
body.product-id-category-18 #header .top-menu[data-depth="0"] > li#category-14 > a::before,
body.product-id-category-19 #header .top-menu[data-depth="0"] > li#category-14 > a::before,
body.product-id-category-20 #header .top-menu[data-depth="0"] > li#category-14 > a::before,
body.product-id-category-21 #header .top-menu[data-depth="0"] > li#category-14 > a::before,
body.product-id-category-22 #header .top-menu[data-depth="0"] > li#category-14 > a::before,
body.product-id-category-15 #header .top-menu[data-depth="0"] > li#category-15 > a::before,
body.product-id-category-16 #header .top-menu[data-depth="0"] > li#category-16 > a::before,
body.product-id-category-10 #header .top-menu[data-depth="0"] > li#category-10 > a::before { background: currentColor; }
body.product-id-category-11 #header .top-menu[data-depth="0"] > li#category-11 > a,
body.product-id-category-12 #header .top-menu[data-depth="0"] > li#category-11 > a,
body.product-id-category-13 #header .top-menu[data-depth="0"] > li#category-11 > a { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--oci-red); }

/* ---------- Iconos de marca (dibujados al estilo de los iconos del logo) ---------- */
:root {
  --ico-cart: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E %3Cpath d="M3 4.5h12"/%3E%3Crect x="4" y="4.5" width="10" height="8.5" rx="1"/%3E%3Cpath d="M9 4.5v2"/%3E %3Cpath d="M6 11.5c0-1.2 1.4-1.8 2.2-1 .5-1 2.1-1 2.6 0 .8-.8 2.2-.2 2.2 1"/%3E %3Cpath d="M2.5 13h15"/%3E%3Cpath d="M5 13v6.5"/%3E%3Cpath d="M4 19.5h2"/%3E%3Ccircle cx="12.5" cy="18" r="2.5"/%3E %3Crect x="17.3" y="8" width="2.8" height="5" rx="1.4"/%3E%3Cpath d="M18.7 8V6.5"/%3E%3C/svg%3E');
  --ico-popcorn: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E %3Cpath d="M5.5 9.5 7.2 21h9.6l1.7-11.5z"/%3E%3Cpath d="M10 9.5l.4 11.5"/%3E%3Cpath d="M14 9.5l-.4 11.5"/%3E %3Cpath d="M5.5 9.5C4.3 7 6.5 5.2 8.3 6.2 8.6 3.6 12 3 13 5.2c1.3-1.6 4.4-.8 4.2 1.6 1.6.2 2.2 1.8 1.3 2.7"/%3E%3C/svg%3E');
  --ico-cotton: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E %3Cpath d="M12 2.8c-2.4 0-3.7 1.6-3.5 3.1-1.8.4-2.7 2.1-2 3.6-.5 1.8 1 3.3 2.8 3.1h5.4c1.8.2 3.3-1.3 2.8-3.1.7-1.5-.2-3.2-2-3.6.2-1.5-1.1-3.1-3.5-3.1z"/%3E %3Cpath d="M9.8 7.8c1.1-.8 3.2-.8 4.4.3"/%3E%3Cpath d="M9 12.6 12 21.5l3-8.9"/%3E%3Cpath d="M10.4 16.6h3.2"/%3E%3C/svg%3E');
  --ico-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E %3Cellipse cx="9" cy="12.5" rx="6.2" ry="7.5"/%3E%3Cpath d="M5.3 11c.6-.6 1.5-.6 2.1 0"/%3E %3Cpath d="M11.2 8.2l.6 1.2 1.3.2-.9.9.2 1.3-1.2-.6-1.2.6.2-1.3-.9-.9 1.3-.2z"/%3E %3Cpath d="M6.2 15.4c1.6 1.4 4 1.4 5.6 0"/%3E%3Cpath d="M21 3.5 17 11"/%3E %3Cpath d="M17 11c-1.3 0-2.2 1-2.2 2.6 1.5 0 2.5-.8 2.9-2.2z"/%3E%3C/svg%3E');
  --ico-popper: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E %3Cpath d="M3.5 20.5 7.3 10l6.7 6.7z"/%3E%3Cpath d="M5.2 15.3l3.5 3.5"/%3E %3Cpath d="M12.5 9c.8-2 2.7-2.2 3.2-4.3"/%3E%3Cpath d="M15 12.5c2-.6 3.6.3 4.2 2"/%3E %3Cpath d="M17.5 2.5v2.4M16.3 3.7h2.4"/%3E%3Cpath d="M20.5 7.8v2.4M19.3 9h2.4"/%3E %3Ccircle cx="10.5" cy="4.5" r=".7"/%3E%3Ccircle cx="21" cy="17.5" r=".7"/%3E%3Ccircle cx="13" cy="2.8" r=".5"/%3E%3C/svg%3E');
  --ico-cannon: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E %3Cpath d="M5.2 13.6 14.4 6.3l2.4 3-9.2 7.3"/%3E%3Ccircle cx="8" cy="16.5" r="3.2"/%3E%3Cpath d="M3 21h10"/%3E %3Ccircle cx="17.8" cy="4.8" r="1.5"/%3E%3Ccircle cx="21" cy="3" r=".8"/%3E%3Ccircle cx="20.3" cy="8.2" r="1.1"/%3E%3C/svg%3E');
  --ico-castle: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E %3Cpath d="M2.5 20.5h19"/%3E%3Cpath d="M4 20.5V11h16v9.5"/%3E %3Cpath d="M4 11V7.2c0-1.2 2.4-1.2 2.4 0V11"/%3E%3Cpath d="M17.6 11V7.2c0-1.2 2.4-1.2 2.4 0V11"/%3E %3Cpath d="M10.8 11V5.8c0-1.3 2.4-1.3 2.4 0V11"/%3E%3Cpath d="M12 4.5V2l2.2.9L12 3.8"/%3E %3Cpath d="M9.8 20.5v-3.3a2.2 2.2 0 0 1 4.4 0v3.3"/%3E%3C/svg%3E');
  --ico-star: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E %3Ccircle cx="12" cy="12" r="8.6" fill="none" stroke="%23000" stroke-width="3.6"/%3E %3Cpath d="M12 7.6l1.25 2.7 2.95.33-2.2 2 .62 2.9L12 14.07l-2.62 1.46.62-2.9-2.2-2 2.95-.33z" fill="%23000"/%3E%3C/svg%3E');
  --oci-sparks: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-width="3"%3E %3Cpath d="M5 12 3.2 7" stroke="%23e32b35"/%3E%3Cpath d="M12 9.5l1-6" stroke="%23f7ba0b"/%3E%3Cpath d="M17.5 13l3.6-2.6" stroke="%230e72c7"/%3E%3C/svg%3E');
}
.oci-ico { display: inline-block; width: 1em; height: 1em; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; vertical-align: -.15em; }
.oci-ico.ico-cart { --ico: var(--ico-cart); }
.oci-ico.ico-popcorn { --ico: var(--ico-popcorn); }
.oci-ico.ico-cotton { --ico: var(--ico-cotton); }
.oci-ico.ico-mask { --ico: var(--ico-mask); }
.oci-ico.ico-popper { --ico: var(--ico-popper); }
.oci-ico.ico-cannon { --ico: var(--ico-cannon); }
.oci-ico.ico-castle { --ico: var(--ico-castle); }
.oci-ico.ico-star { --ico: var(--ico-star); }

/* ---------- Colores por categoría alineados con los iconos del logo ---------- */
:root { --oci-purple: #7820d0; --oci-pink: #f04070; --oci-teal: #00b0b8; }
body { --cat-ico: var(--ico-star); }
body.category-id-11, body.product-id-category-11 { --cat: var(--oci-red); --cat-text: #fff; --cat-ico: var(--ico-cart); }
body.category-id-12, body.product-id-category-12 { --cat: var(--oci-yellow); --cat-text: var(--oci-navy); --cat-ico: var(--ico-popcorn); }
body.category-id-13, body.product-id-category-13 { --cat: var(--oci-teal); --cat-text: #fff; --cat-ico: var(--ico-cotton); }
body.category-id-14, body.category-id-parent-14, body.product-id-category-14,
body.product-id-category-17, body.product-id-category-18, body.product-id-category-19,
body.product-id-category-20, body.product-id-category-21, body.product-id-category-22 { --cat: var(--oci-purple); --cat-text: #fff; --cat-ico: var(--ico-mask); }
body.category-id-15, body.product-id-category-15 { --cat: var(--oci-pink); --cat-text: #fff; --cat-ico: var(--ico-popper); }
body.category-id-16, body.product-id-category-16 { --cat: var(--oci-blue); --cat-text: #fff; --cat-ico: var(--ico-cannon); }
body.category-id-10, body.product-id-category-10 { --cat: var(--oci-green); --cat-text: #fff; --cat-ico: var(--ico-castle); }

/* ---------- Menú: icono de cada categoría ---------- */
#top-menu > li#category-11 { --c: var(--oci-red); --c-ico: var(--ico-cart); }
#top-menu > li#category-14 { --c: var(--oci-purple); --c-ico: var(--ico-mask); --c-text: #fff; }
#top-menu > li#category-15 { --c: var(--oci-pink); --c-ico: var(--ico-popper); --c-text: #fff; }
#top-menu > li#category-16 { --c: var(--oci-blue); --c-ico: var(--ico-cannon); }
#top-menu > li#category-10 { --c: var(--oci-green); --c-ico: var(--ico-castle); }
#header .top-menu[data-depth="0"] > li > a::before,
#header .top-menu[data-depth="0"] > li#category-11 > a::before {
  content: ""; width: 18px; height: 18px; border-radius: 0; background: var(--c, var(--oci-red));
  -webkit-mask: var(--c-ico, var(--ico-star)) center / contain no-repeat; mask: var(--c-ico, var(--ico-star)) center / contain no-repeat;
}
/* Alimentación: destacada de forma sutil; roja y rellena solo cuando está seleccionada */
#header .top-menu[data-depth="0"] > li#category-11 > a {
  background: #fff0f1; color: var(--oci-red); border-color: rgba(227, 43, 53, .3); box-shadow: none;
}
#header .top-menu[data-depth="0"] > li#category-11 > a::after {
  content: ""; width: 11px; height: 11px; margin-left: -.1rem; background: var(--oci-yellow);
  -webkit-mask: var(--ico-star) center / contain no-repeat; mask: var(--ico-star) center / contain no-repeat;
}
#header .top-menu[data-depth="0"] > li#category-11 > a:hover { background: #ffe2e5; border-color: var(--oci-red); color: var(--oci-red); }
#header .top-menu[data-depth="0"] > li#category-11.current > a,
#header .top-menu[data-depth="0"] > li#category-11:has(li.current) > a,
body.product-id-category-11 #header .top-menu[data-depth="0"] > li#category-11 > a,
body.product-id-category-12 #header .top-menu[data-depth="0"] > li#category-11 > a,
body.product-id-category-13 #header .top-menu[data-depth="0"] > li#category-11 > a {
  background: var(--oci-red); border-color: var(--oci-red); color: #fff; box-shadow: none;
}
#header .top-menu[data-depth="0"] > li#category-11.current > a::before,
#header .top-menu[data-depth="0"] > li#category-11:has(li.current) > a::before,
body.product-id-category-11 #header .top-menu[data-depth="0"] > li#category-11 > a::before,
body.product-id-category-12 #header .top-menu[data-depth="0"] > li#category-11 > a::before,
body.product-id-category-13 #header .top-menu[data-depth="0"] > li#category-11 > a::before { background: #fff; }

/* ---------- Barra lateral: icono por categoría ---------- */
#left-column .block-categories li[data-depth="0"] > a[href$="/11-productos-de-alimentacion"] { --i: var(--ico-cart); --ic: var(--oci-red); }
#left-column .block-categories li[data-depth="0"] > a[href$="/14-maquillaje-de-fantasia"] { --i: var(--ico-mask); --ic: var(--oci-purple); }
#left-column .block-categories li[data-depth="0"] > a[href$="/15-holi"] { --i: var(--ico-popper); --ic: var(--oci-pink); }
#left-column .block-categories li[data-depth="0"] > a[href$="/16-fiestas-de-la-espuma"] { --i: var(--ico-cannon); --ic: var(--oci-blue); }
#left-column .block-categories li[data-depth="0"] > a[href$="/10-hinchables-y-accesorios"] { --i: var(--ico-castle); --ic: var(--oci-green); }
#left-column .block-categories li[data-depth="0"] > a { display: flex; align-items: flex-start; gap: .55rem; }
#left-column .block-categories li[data-depth="0"] > a::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; background: var(--ic, var(--oci-red));
  -webkit-mask: var(--i, var(--ico-star)) center / contain no-repeat; mask: var(--i, var(--ico-star)) center / contain no-repeat;
}

/* ---------- Banner de categoría: icono en el título y en grande de fondo ---------- */
#main .block-category.card::before {
  width: 230px; height: 230px; border-radius: 0; top: auto; bottom: -46px; right: 190px;
  background: var(--cat-text); opacity: .13; transform: rotate(-12deg);
  -webkit-mask: var(--cat-ico) center / contain no-repeat; mask: var(--cat-ico) center / contain no-repeat;
}
#main .block-category h1.h1::before {
  content: ""; display: inline-block; width: .95em; height: .95em; margin-right: .4em; vertical-align: -.1em;
  background: var(--cat-text); -webkit-mask: var(--cat-ico) center / contain no-repeat; mask: var(--cat-ico) center / contain no-repeat;
}
@media (max-width: 767px) { #main .block-category.card::before { right: -40px; bottom: -60px; } }

/* ---------- Títulos: la estrella de la "O" y los destellos del logo ---------- */
.products-section-title::before {
  content: ""; display: inline-block; width: .95em; height: .95em; margin-right: .45em; vertical-align: -.12em;
  background: var(--oci-red); -webkit-mask: var(--ico-star) center / contain no-repeat; mask: var(--ico-star) center / contain no-repeat;
}
#subcategories .subcategory-heading::after {
  content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-left: .3em; vertical-align: .15em;
  background: var(--oci-sparks) center / contain no-repeat;
}
#js-product-list-footer h2 { border-left: 0; padding-left: 0; display: flex; align-items: center; gap: .55rem; }
#js-product-list-footer h2::before {
  content: ""; flex: none; width: 1.05em; height: 1.05em; background: var(--cat);
  -webkit-mask: var(--ico-star) center / contain no-repeat; mask: var(--ico-star) center / contain no-repeat;
}

/* ---------- Home: colores e iconos de las tarjetas ---------- */
.oci-cat { position: relative; }
.oci-cat.yellow { --tile: var(--oci-yellow); background: var(--oci-yellow); color: var(--oci-navy) !important; }
.oci-cat.teal { --tile: var(--oci-teal); background: var(--oci-teal); }
.oci-cat.purple { --tile: var(--oci-purple); background: var(--oci-purple); }
.oci-cat.pink { --tile: var(--oci-pink); background: var(--oci-pink); }
.oci-cat.blue { --tile: var(--oci-blue); background: var(--oci-blue); }
.oci-cat.green { --tile: var(--oci-green); background: var(--oci-green); }
.oci-badge {
  position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}
.oci-badge .oci-ico { font-size: 22px; color: var(--tile); }
.oci-hero::after {
  width: 150px; height: 150px; right: 43%; bottom: -34px; border-radius: 0; background: #fff; opacity: .16;
  -webkit-mask: var(--ico-star) center / contain no-repeat; mask: var(--ico-star) center / contain no-repeat;
}
.oci-hero .oci-kicker .oci-ico { font-size: 1.15em; margin-right: .3em; }