@charset "UTF-8";
.familia .familia-sort { position: relative; order: 0; margin: 0; }
.familia .familia-sort__button {
display: flex;
align-items: center;
gap: 8px;
min-height: 48px;
padding: 12px 0;
color: var(--f-ink);
font-size: 16px;
font-weight: 500;
list-style: none;
cursor: pointer;
user-select: none;
}
.familia .familia-sort__button::-webkit-details-marker { display: none; }
.familia .familia-sort__button::after {
content: "";
width: 10px;
height: 6px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M10.35 10.66 18.66 2.33a.7.7 0 0 0-.99-.99L9.86 9.17 2.05 1.34a.7.7 0 0 0-.99.99l8.3 8.33a.7.7 0 0 0 .99 0Z' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M10.35 10.66 18.66 2.33a.7.7 0 0 0-.99-.99L9.86 9.17 2.05 1.34a.7.7 0 0 0-.99.99l8.3 8.33a.7.7 0 0 0 .99 0Z' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform 150ms var(--f-ease);
}
.familia .familia-sort[open] > .familia-sort__button::after { transform: rotate(180deg); }
.familia .familia-sort__button:focus-visible { outline: 2px solid var(--f-ink); outline-offset: 2px; border-radius: var(--f-r-sm); }
.familia .familia-sort__list {
position: absolute;
top: 56px;
left: -16px;
z-index: 60;
min-width: 220px;
margin: 0;
padding: 20px 0;
border-radius: var(--f-r-sm);
background: var(--f-default-50);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
list-style: none;
}
.familia .familia-sort__list li { margin: 0; padding: 0; list-style: none; }
.familia .familia-sort__option {
display: block;
padding: 10px 32px;
color: var(--f-ink);
font-size: 16px;
font-weight: 400;
white-space: nowrap;
text-decoration: none;
transition: color 150ms var(--f-ease);
}
.familia .familia-sort__option:hover,
.familia .familia-sort__option:focus-visible { color: var(--f-red); }
.familia .familia-sort__option.is-current { font-weight: 500; }
.familia a.f-toolbar__filters { text-decoration: none; }
.familia .f-toolbar__filters > span { position: relative; }
.familia .f-toolbar__count { font-weight: 500; }
.familia .f-toolbar__dot {
position: absolute;
top: -4px;
left: -8px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--f-ink); box-shadow: 0 1px 2px rgb(0 0 0 / .2);
}
@media (max-width: 1023px) {
.familia .f-toolbar .familia-sort { order: 2; }
.familia .f-toolbar .familia-sort__button { min-height: 44px; padding: 12px 12px 12px 0; color: var(--fs-white); font-size: 14px; }
.familia .f-toolbar .familia-sort__list { top: auto; bottom: 56px; left: auto; right: -12px; font-size: 16px; }
.familia .f-toolbar .familia-sort__button:focus-visible { outline-color: var(--fs-white); }
}
.familia .familia-filters { margin: 24px 0 16px; } .familia .familia-filters fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.familia .familia-filters__groups { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.familia .familia-filters__none { margin: 0; color: var(--f-default-900); }
.familia .familia-facet { position: relative; }
.familia .familia-facet__toggle {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
min-height: 0;
margin: 0;
padding: 0 14px 0 16px;
border: 1px solid #e6e6e6; border-radius: 20px;
background: #fff;
box-shadow: none;
color: var(--f-ink);
font: 400 14px/1 var(--f-text);
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
cursor: pointer;
transition: border-color var(--f-fast) var(--f-ease);
}
.familia .familia-facet__toggle:hover,
.familia .familia-facet.is-open > .familia-facet__toggle,
.familia .familia-facet.has-value > .familia-facet__toggle { border-color: var(--f-ink); background: #fff; color: var(--f-ink); }
.familia .familia-facet__toggle:focus-visible { outline: 2px solid var(--f-ink); outline-offset: 2px; }
.familia .familia-facet__badge {
display: inline-grid;
place-items: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 10px;
background: var(--f-ink);
color: #fff;
font-size: 12px;
font-weight: 500;
}
.familia .familia-facet__badge[hidden] { display: none; }
.familia .familia-facet__summary { display: none; }
.familia .familia-facet__chevron {
width: 10px;
height: 6px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M10.35 10.66 18.66 2.33a.7.7 0 0 0-.99-.99L9.86 9.17 2.05 1.34a.7.7 0 0 0-.99.99l8.3 8.33a.7.7 0 0 0 .99 0Z' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M10.35 10.66 18.66 2.33a.7.7 0 0 0-.99-.99L9.86 9.17 2.05 1.34a.7.7 0 0 0-.99.99l8.3 8.33a.7.7 0 0 0 .99 0Z' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform var(--f-fast) var(--f-ease);
}
.familia .familia-facet.is-open .familia-facet__chevron,
.familia .familia-facet.is-expanded .familia-facet__chevron { transform: rotate(180deg); }
.familia .familia-facet__panel {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 80;
display: none;
width: max-content;
min-width: 280px;
max-width: min(680px, calc(100vw - 48px));
padding: 16px;
border-radius: 10px;
background: #fff;
box-shadow: 0 0 10px rgb(102 105 107 / .1), 0 16px 32px -12px rgb(var(--f-ink-rgb) / .24);
}
.familia .familia-facet.is-open > .familia-facet__panel { display: block; }
.familia .familia-facet.is-flip > .familia-facet__panel { left: auto; right: 0; }
.familia:not(.f-js) .familia-facet:focus-within > .familia-facet__panel { display: block; } .familia .familia-facet__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--f-default-200);
}
.familia .familia-facet__reset {
min-height: 0;
padding: 8px 0;
border: 0;
background: none;
box-shadow: none;
color: var(--f-default-900, #676767);
font: 400 14px/1 var(--f-text);
text-transform: none;
cursor: pointer;
}
.familia .familia-facet__reset:hover { background: none; color: var(--f-red); }
.familia .familia-facet__apply {
height: 36px;
min-height: 0;
padding: 0 20px;
border: 0;
border-radius: 5px;
background: var(--f-sky, #8dc9f7);
box-shadow: none;
color: var(--f-ink);
font: 400 14px/1 var(--f-text);
text-transform: none;
cursor: pointer;
}
.familia .familia-facet__apply:hover { background: var(--f-sky-deep, #6293b4); color: var(--f-ink); }
.familia .familia-filters__stock {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
margin: 0 0 0 8px;
color: var(--f-ink);
font-size: 14px;
cursor: pointer;
user-select: none;
}
.familia .familia-filters__sort { margin-left: auto; }
.familia .familia-filters__sort .familia-sort__button { min-height: 40px; padding: 8px 0; font-size: 14px; font-weight: 400; }
.familia .familia-filters__sort .familia-sort__list { top: 48px; left: auto; right: 0; border-radius: 10px; }
.familia .familia-filters__active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 16px; }
.familia .familia-filters__tag {
display: inline-flex;
align-items: center;
gap: 8px;
height: 32px;
min-height: 0;
padding: 0 10px 0 12px;
border: 0;
border-radius: 16px;
background: var(--f-default-100, #f6f6f6);
box-shadow: none;
color: var(--f-ink);
font: 400 13px/1 var(--f-text);
text-transform: none;
cursor: pointer;
}
.familia .familia-filters__tag span { font-size: 16px; line-height: 1; color: var(--f-default-900, #676767); }
.familia .familia-filters__tag:hover { background: var(--f-default-200); color: var(--f-ink); }
.familia .familia-filters__tag:hover span { color: var(--f-red); }
.familia .familia-filters__reset-all { margin-left: 4px; color: var(--f-ink); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.familia .familia-filters__reset-all:hover { color: var(--f-red); }
.familia .familia-filters__bar,
.familia .familia-filters__foot { display: none; }
@media (min-width: 1024px) {
.familia .f-toolbar { display: none; } }
.familia .familia-facet__list {
display: grid;
grid-template-columns: repeat(2, minmax(150px, 1fr));
gap: 2px 12px;
margin: 0;
padding: 0;
list-style: none;
}
.familia .familia-facet--style-icon .familia-facet__list,
.familia .familia-facet__search ~ .familia-facet__list { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
.familia .familia-facet__search ~ .familia-facet__list { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.familia .familia-facet__list:has(.familia-facet__desc) { grid-template-columns: minmax(0, 360px); gap: 4px; }
.familia .familia-facet__item { margin: 0; padding: 0; list-style: none; }
.familia .familia-facet__item[hidden] { display: none; }
.familia .familia-facet__option {
display: grid;
grid-template-columns: 18px auto minmax(0, 1fr);
align-items: center;
column-gap: 10px;
min-height: 36px;
margin: 0;
padding: 6px 8px;
border-radius: 6px;
color: var(--f-ink);
font-size: 14px;
font-weight: 400;
line-height: 1.3;
cursor: pointer;
transition: background-color var(--f-fast) var(--f-ease);
}
.familia .familia-facet__option:hover { background: var(--f-default-100, #f6f6f6); }
.familia .familia-facet__option:focus-within { outline: 2px solid var(--f-ink); outline-offset: -2px; }
.familia .familia-facet__option:not(:has(.familia-facet__icon, .familia-facet__color)) { grid-template-columns: 18px minmax(0, 1fr); }
.familia .familia-facet__item.is-active .familia-facet__label { font-weight: 500; }
.familia .familia-filters input[type="checkbox"] {
flex: none;
width: var(--f-check-size-compact);
height: var(--f-check-size-compact);
margin: 0;
border: var(--f-field-rim) solid var(--f-field-border);
border-radius: var(--f-check-radius);
background: var(--f-field-bg) center / 14px no-repeat;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.familia .familia-filters input[type="checkbox"]:checked {
border-color: var(--f-check-on);
background-color: var(--f-check-on);
background-image: var(--f-check-mark);
}
.familia .familia-filters input[type="checkbox"]:focus { box-shadow: none; }
.familia .familia-filters input[type="checkbox"]:focus-visible { outline: 2px solid transparent; box-shadow: var(--f-field-ring); }
.familia .familia-facet__label { min-width: 0; overflow-wrap: anywhere; }
.familia .familia-facet__desc { grid-column: 2 / -1; color: var(--f-default-900, #676767); font-size: 12px; line-height: 1.4; }
.familia .familia-facet__option:has(.familia-facet__desc) { align-items: start; padding-block: 8px; }
.familia .familia-facet__option:has(.familia-facet__desc) input { margin-top: 1px; }
.familia .familia-facet__color { display: block; width: 18px; height: 18px; border-radius: 50%; }
.familia .familia-facet__color--light { box-shadow: inset 0 0 0 1px var(--f-default-400, #b9b9b9); }
.familia .familia-facet__icon { display: block; width: 40px; height: 32px; object-fit: contain; }
.familia .familia-facet--style-icon .familia-facet__icon { width: 18px; height: 18px; border-radius: 50%; }
.familia .familia-facet--style-icon .familia-facet__option,
.familia .familia-facet--style-icon .familia-facet__option:not(:has(.familia-facet__icon, .familia-facet__color)) { grid-template-columns: 18px 18px minmax(0, 1fr); }
.familia .familia-facet--style-icon .familia-facet__label { grid-column: 3; }
.familia .familia-filters input.familia-facet__search {
display: block;
width: 100%;
height: var(--f-field-h-compact);
min-height: 0;
margin: 0 0 10px;
padding: 0 var(--f-field-pad) 0 40px;
border: var(--f-field-rim) solid var(--f-field-border);
border-radius: var(--f-field-radius);
background: var(--f-field-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233d291d' stroke-width='1.6'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 12px center / 18px no-repeat;
box-shadow: none;
color: var(--f-field-ink);
font-size: var(--f-field-size);
}
.familia .familia-filters input.familia-facet__search:hover { border-color: var(--f-field-border-hover); }
.familia .familia-filters input.familia-facet__search:focus { border-color: var(--f-field-focus); box-shadow: var(--f-field-ring); outline: 2px solid transparent; }
.familia .familia-filters input.familia-facet__search::placeholder { color: var(--f-field-placeholder); opacity: 1; }
.familia .familia-facet--price .familia-facet__panel { width: 360px; }
.familia .familia-facet--price .familia-range { max-width: none; padding: 12px 0 0; }
.familia .familia-facet--price .familia-range__values { font-size: 14px; line-height: 20px; }
@media (max-width: 1023px) {
.familia .familia-filters { display: none; margin: 0; }
.familia .familia-filters.is-open,
.familia .familia-filters:target {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
flex-direction: column;
overflow-y: auto;
overscroll-behavior: contain;
background: #fff;
}
.familia.familia-filters-open { overflow: hidden; }
.familia .familia-filters__bar {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 56px;
padding: 0 8px 0 16px;
border-bottom: 1px solid var(--f-default-200);
background: #fff;
}
.familia .familia-filters__heading { margin: 0; font-size: 20px; font-weight: 400; }
.familia .familia-filters__close {
display: grid;
place-items: center;
width: 44px;
height: 44px;
min-height: 0;
padding: 0;
border: 0;
background: none;
box-shadow: none;
color: var(--f-ink);
font-size: 28px;
line-height: 1;
cursor: pointer;
}
.familia .familia-filters__groups { display: block; flex: 1 0 auto; padding: 0 16px; }
.familia .familia-facet { border-bottom: 1px solid var(--f-default-200); }
.familia .familia-facet__toggle,
.familia .familia-facet__toggle:hover,
.familia .familia-facet.has-value > .familia-facet__toggle {
display: flex;
width: 100%;
height: 56px;
padding: 0;
border: 0;
border-radius: 0;
background: none;
font-size: 16px;
}
.familia .familia-facet__name { flex: none; }
.familia .familia-facet__summary {
display: block;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
color: var(--f-default-900, #676767);
font-size: 13px;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.familia .familia-facet__badge { display: none; }
.familia .familia-facet__chevron { flex: none; }
.familia .familia-facet__panel,
.familia .familia-facet.is-open > .familia-facet__panel {
position: static;
display: none;
width: auto;
min-width: 0;
max-width: none;
padding: 0 0 16px;
border-radius: 0;
box-shadow: none;
}
.familia .familia-facet.is-expanded > .familia-facet__panel { display: block; }
.familia .familia-facet__actions { display: none; }
.familia .familia-facet__list,
.familia .familia-facet--style-icon .familia-facet__list,
.familia .familia-facet__search ~ .familia-facet__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.familia .familia-facet__list:has(.familia-facet__desc) { grid-template-columns: minmax(0, 1fr); }
.familia .familia-facet__option { min-height: 44px; }
.familia .familia-facet--price .familia-facet__panel { width: auto; }
.familia .familia-filters__stock { display: flex; height: 56px; margin: 0; }
.familia .familia-filters__sort { display: none; }
.familia .familia-filters__foot {
position: sticky;
bottom: 0;
display: flex;
align-items: center;
gap: 16px;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
border-top: 1px solid var(--f-default-200);
background: #fff;
}
.familia .familia-filters__clear { flex: none; color: var(--f-ink); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.familia .familia-filters__apply,
.familia .familia-filters__apply.button {
flex: 1 1 auto;
height: 48px;
min-height: 0;
border: 0;
border-radius: 5px;
background: var(--f-sky, #8dc9f7);
box-shadow: none;
color: var(--f-ink);
font: 400 15px/1 var(--f-text);
text-transform: none;
}
.familia .familia-filters__active { margin: 0 0 12px; }
}
.familia .familia-range { --from: 0%; --to: 100%; max-width: 945px; padding: 16px 0 0; }
.familia .familia-range__track {
position: relative;
height: 16px;
margin: 0 12px;
}
.familia .familia-range__track::before,
.familia .familia-range__track::after {
content: "";
position: absolute;
top: 5.6px;
height: 4.8px;
border-radius: 4.8px;
}
.familia .familia-range__track::before { left: -12px; right: -12px; background: rgb(225 225 227 / .79); }
.familia .familia-range__track::after { left: var(--from); right: calc(100% - var(--to)); background: var(--f-red); }
.familia .familia-range__input {
position: absolute;
top: -4px;
left: -12px;
z-index: 1;
width: calc(100% + 24px);
height: 24px;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
background: none;
pointer-events: none;
appearance: none;
-webkit-appearance: none;
}
.familia .familia-range__input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 24px;
height: 24px;
border: 0;
border-radius: 50%;
background: var(--f-red);
box-shadow: 0 2px 15px rgb(199 49 156 / .51);
cursor: grab;
pointer-events: auto;
}
.familia .familia-range__input::-moz-range-thumb {
width: 24px;
height: 24px;
border: 0;
border-radius: 50%;
background: var(--f-red);
box-shadow: 0 2px 15px rgb(199 49 156 / .51);
cursor: grab;
pointer-events: auto;
}
.familia .familia-range__input::-webkit-slider-runnable-track { background: none; }
.familia .familia-range__input::-moz-range-track { background: none; }
.familia .familia-range__input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--f-ink); outline-offset: 2px; }
.familia .familia-range__values {
display: flex;
justify-content: space-between;
margin: 16px 0 0; padding: 8px 0 0;
font-size: 16px;
line-height: 24px;
}
.familia .familia-range__label { margin-right: 4px; font-weight: 300; }
.familia .familia-range__values strong { font-weight: 600; }
@media (min-width: 768px) { .familia .familia-range__values { font-size: 18px; line-height: 28px; } }
@media (max-width: 1023px) {
.familia .familia-range { padding-top: 0; }
.familia .familia-range__values { margin: 0; padding: 0; }
}
.familia ul.products > li.familia-listing-promo,
.familia .familia-listing-promo {
grid-column: 1 / -1;
display: flex;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
text-align: left;
}
.familia ul.products:has(> li.familia-listing-promo) { grid-auto-flow: row dense; }
.familia ul.products > li.product.is-held { display: none; }
.familia .familia-listing-promo__in {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 20px;
width: 100%;
padding: 20px;
border-radius: 10px;
background: #e5f5ff;
}
.familia .familia-listing-promo__text {
margin: 0;
color: var(--f-ink);
font-size: 24px;
font-weight: 400;
line-height: 1.1;
letter-spacing: -1.12px;
}
.familia .familia-listing-promo__link,
.familia a.familia-listing-promo__link:visited {
display: flex;
flex: none;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 60px;
padding: 7px 24px;
border: 1px solid #83c2f1;
border-radius: 10px;
background: transparent;
color: var(--f-ink);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
white-space: nowrap;
text-decoration: none;
}
.familia .familia-listing-promo__link::after {
content: "";
flex: none;
width: 30px;
height: 26px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 310 260'%3E%3Cpath d='M190 260c-2.4 0-4.8-.9-6.8-2.6-4.1-3.7-4.3-10.1-.6-14.1L277.3 140H10c-5.5 0-10-4.5-10-10s4.5-10 10-10h267.3L182.6 16.8c-3.7-4.1-3.5-10.4.6-14.1 4.1-3.7 10.4-3.5 14.1.6l109.9 119.9c.7.8 1.3 1.6 1.7 2.5.1.2.2.5.3.7.4.9.6 2 .7 3v1.2c-.1 1.1-.3 2.1-.7 3-.1.2-.2.5-.3.7-.4.9-1 1.7-1.7 2.5l-109.8 120c-2 2.1-4.7 3.2-7.4 3.2z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 310 260'%3E%3Cpath d='M190 260c-2.4 0-4.8-.9-6.8-2.6-4.1-3.7-4.3-10.1-.6-14.1L277.3 140H10c-5.5 0-10-4.5-10-10s4.5-10 10-10h267.3L182.6 16.8c-3.7-4.1-3.5-10.4.6-14.1 4.1-3.7 10.4-3.5 14.1.6l109.9 119.9c.7.8 1.3 1.6 1.7 2.5.1.2.2.5.3.7.4.9.6 2 .7 3v1.2c-.1 1.1-.3 2.1-.7 3-.1.2-.2.5-.3.7-.4.9-1 1.7-1.7 2.5l-109.8 120c-2 2.1-4.7 3.2-7.4 3.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.familia .familia-listing-promo__link:hover { border-color: #83c2f1; background: #83c2f1; color: var(--f-ink); text-decoration: none; }
.familia .familia-listing-promo__link:focus-visible { outline: 2px solid var(--f-ink); outline-offset: 2px; }
@media (min-width: 768px) {
.familia .familia-listing-promo__in { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
.familia .familia-listing-promo__text { font-size: 28px; }
.familia .familia-listing-promo__text br { display: none; }
.familia .familia-listing-promo__link { min-width: 280px; }
}
.familia ul.products li.product .familia-card__soldout {
grid-area: title;
align-self: start;
justify-self: center;
display: flex;
align-items: center;
gap: 4px;
height: 16px;
margin: -4px 0 0;
color: var(--f-red);
font-size: 14px;
font-weight: 500;
line-height: 1;
}
.familia ul.products li.product:has(.familia-card__soldout) .woocommerce-loop-product__title,
.familia ul.products:not(.familia-hs ul.products) li.product:has(.familia-card__soldout) .woocommerce-loop-product__title { padding-top: 18px; }
.familia ul.products li.product .familia-card__soldout::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--f-ink);
}
.familia .familia-badge--sale { background: var(--f-sky); }
.familia .familia-badge--top { background: var(--f-red-text); }
.familia .familia-badge--recommended { background: var(--f-ink); }
.familia .familia-badge--promo,
.familia .familia-badge--new { background: #8cbbff; }
.familia .familia-badge--familia { background: var(--f-ink); color: #fff; } .familia .familia-listing-after { margin: 40px 0 0; }
.familia .familia-listing-after .familia-faq { max-width: none; }
.familia .f-archive__results { margin: 8px 0 0; color: var(--f-default-900); font-size: 16px; font-weight: 500; }
.familia .familia-empty__actions { margin: 16px 0 0; }
.familia .f-subtypes {
--f-subtypes-ink: #140e06;
--f-subtypes-line: #e6e4dc;
position: relative;
background: var(--f-default-50);
box-shadow: inset 0 -1px 0 var(--f-subtypes-line); font-family: var(--f-text);
}
.familia .f-subtypes__list {
display: flex;
align-items: stretch;
gap: 32px;
box-sizing: border-box;
max-width: 1440px;
margin: 0 auto;
padding: 0 40px;
list-style: none;
overflow-x: auto; scrollbar-width: none;
}
.familia .f-subtypes__list::-webkit-scrollbar { display: none; }
.familia .f-subtypes__item { display: flex; flex: none; margin: 0; padding: 0; }
.familia .f-subtypes__item--side { margin-left: auto; }
.familia .f-subtypes__item--phone { display: none; }
.familia .f-subtypes__link {
position: relative;
display: flex;
align-items: center;
height: 44px;
color: var(--f-subtypes-ink);
font-size: var(--f-t-sm);
font-weight: 300;
line-height: 20px;
letter-spacing: 0;
text-decoration: none;
white-space: nowrap;
transition: color 150ms ease;
}
.familia .f-subtypes__link:hover { color: var(--f-sky-deep); text-decoration: none; }
.familia .f-subtypes__link:focus { outline: none; }
.familia .f-subtypes__link:focus-visible { outline: none; }
.familia .f-subtypes__link:focus-visible .f-subtypes__text { outline: 2px solid var(--f-sky-deep); outline-offset: 4px; border-radius: 2px; }
.familia .f-subtypes__item.is-active > .f-subtypes__link { font-weight: 400; }
.familia .f-subtypes__item.is-active > .f-subtypes__link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: var(--f-subtypes-ink);
}
@media (max-width: 1023px) {
.familia .f-subtypes__list {
display: grid;
grid-template-columns: repeat(var(--f-subtypes-cols, 4), auto);
justify-content: space-between;
justify-items: start;
gap: 0 12px;
padding: 0 16px;
overflow: visible;
}
.familia .f-subtypes__item.is-row-start { grid-column-start: 1; }
.familia .f-subtypes__item--desktop,
.familia .f-subtypes__item--side { display: none; }
.familia .f-subtypes__item--phone { display: flex; }
.familia .f-subtypes__link {
height: auto;
min-height: 40px;
font-size: var(--f-t-13);
line-height: 16px;
white-space: normal;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.familia .f-subtypes__list { justify-content: start; column-gap: 32px; }
}