/* Moft Catálogo. Page layer on top of home.css (the shared site base: header, footer, buttons, page head, chip bar,
   tags, photo placeholders). Layout only: every colour, size, space and radius is a --moft-* token or a home.css variable.
   Solid colours only: states swap solid fills and text.
   The product page (producto.html) loads this file too, for the allergen icons, the Textura/Perfil sliders and the flavour tags. */

/* ---------- Format filter: the shared chip bar, each chip with its kit category icon (icon + word inside the pill).
   Chosen chip: Chocolate fill, so its icon swaps to the Salty Caramel one (the approved accent on dark) ---------- */
.cats .filters__chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding-left:var(--moft-space-2)}
.cats .filters__chip[data-cat-filter="todo"]{padding-left:calc(var(--moft-space-3) + 1px)}
.cats .filters__chip img{width:22px;height:22px;flex:none}
.cats .filters__chip .ic-on,.cats .filters__chip[aria-pressed="true"] .ic-rest{display:none}
.cats .filters__chip[aria-pressed="true"] .ic-on{display:block}
.cats .filters__chip[hidden]{display:none}
@media (max-width:479px){.cats .filters__chip{padding-inline:var(--moft-space-2)}}
@media (max-width:399px){.cats .filters__chip img{display:none !important}.cats .filters__chip{padding-inline:var(--moft-space-2)}}

/* ---------- Recetas ---------- */
.cat{padding-block:var(--moft-space-6) 0}
.prods{display:grid;gap:var(--moft-space-4)}
.prods>li{display:flex}
.prods>li[hidden]{display:none}

/* One card per Receta: photo on top, then name, text, its flavours (each opens its page on that flavour), formats. No button: the whole card opens the page. */
.fam{position:relative;display:flex;flex-direction:column;width:100%;padding:0;overflow:hidden}
.fam__ph{position:relative;aspect-ratio:16/10;border-radius:0;padding:0;overflow:hidden}
.fam__ph>img{width:100%;height:100%;object-fit:cover}
.fam__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--moft-space-2);flex:1;padding:var(--moft-space-4) var(--moft-space-4) var(--moft-space-5)}
.fam .t-h3{text-wrap:balance}
.fam__link{color:inherit;text-decoration:none}
.fam__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.fam:hover .fam__link{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.fam:has(.fam__link:focus-visible){outline:3px solid var(--moft-caramelo);outline-offset:3px}
.fam__link:focus-visible{outline:none}
.fam__desc{margin:0;font-size:15px;line-height:1.45}
.fam__count{margin:var(--moft-space-1) 0 0;font-size:var(--moft-size-small);font-weight:var(--moft-weight-black);color:var(--moft-text-on-light)}
/* The flavour tags sit above the card's own link, so each one opens its flavour */
.fam__tags{position:relative;z-index:1;justify-content:flex-start}
.fam__tag{text-decoration:none}
@media (hover:hover){.fam__tag:hover{background:var(--moft-chocolate);color:var(--moft-crema)}}
.fam__tag:focus-visible{outline:3px solid var(--moft-caramelo);outline-offset:2px}
.fam__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--moft-space-2) var(--moft-space-3);width:100%;margin-top:auto;padding-top:var(--moft-space-3);border-top:2px dotted var(--moft-chocolate-light)}
.fam__fmts{display:flex;flex-wrap:wrap;gap:6px}
.fmt-pill{align-self:auto;margin:0}
.cat__none{margin:var(--moft-space-5) 0 0;text-align:center}
.cat__none .link{padding-block:0;font:inherit;font-weight:var(--moft-weight-bold);background:none;border:0;cursor:pointer}

.today-nudge{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--moft-space-4);margin-top:var(--moft-space-7);padding:var(--moft-space-5)}
.today-nudge .t-h3{margin:0 0 var(--moft-space-1)}
.today-nudge > div{flex:1 1 20rem}
.today-nudge .t-small{margin:0;text-wrap:pretty}

@media (min-width:640px){.fams{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.fams{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--moft-space-5)}.cat{padding-top:var(--moft-space-7)}}

/* ---------- Shared with the product page ---------- */
/* Allergens: one round icon per allergen. Each icon is its own SVG in allergens/ (coloured disc + white glyph), picked by data-allergen. */
.alg__i{display:block;flex:none;width:28px;height:28px;background:center/contain no-repeat}
.alg__i[data-allergen="gluten"]{background-image:url(allergens/gluten.svg)}
.alg__i[data-allergen="huevo"]{background-image:url(allergens/huevo.svg)}
.alg__i[data-allergen="lacteos"]{background-image:url(allergens/lacteos.svg)}
.alg__i[data-allergen="frutos"]{background-image:url(allergens/frutos.svg)}
.alg__i[data-allergen="soja"]{background-image:url(allergens/soja.svg)}
.alg__i[data-allergen="cacahuete"]{background-image:url(allergens/cacahuete.svg)}
.alg__i[data-allergen="sesamo"]{background-image:url(allergens/sesamo.svg)}
.alg__i[data-allergen="sulfitos"]{background-image:url(allergens/sulfitos.svg)}
.alg__i[data-allergen="crustaceos"]{background-image:url(allergens/crustaceos.svg)}
.alg__i[data-allergen="pescado"]{background-image:url(allergens/pescado.svg)}
.alg__i[data-allergen="moluscos"]{background-image:url(allergens/moluscos.svg)}
.alg__i[data-allergen="apio"]{background-image:url(allergens/apio.svg)}
.alg__i[data-allergen="mostaza"]{background-image:url(allergens/mostaza.svg)}
.alg__i[data-allergen="altramuces"]{background-image:url(allergens/altramuces.svg)}

/* Textura and Perfil: 7 dots on a thin track, the centre one neutral (ringed); the fill runs from the centre to her side */
.vars{display:grid;gap:var(--moft-space-2);padding-top:var(--moft-space-3);border-top:2px dotted var(--moft-chocolate-light)}
.vars__row{display:grid;grid-template-columns:62px auto minmax(84px,1fr) auto;align-items:center;column-gap:var(--moft-space-2)}
.vars__k{font-size:var(--moft-size-small);font-weight:var(--moft-weight-black);letter-spacing:.03em;color:var(--moft-text-on-light)}
.vars__end{font-size:12px;font-weight:var(--moft-weight-medium);letter-spacing:.02em;color:var(--moft-text-brand-on-light)}
.vars__end--r{text-align:right}
.dots{position:relative;display:flex;align-items:center;justify-content:space-between;height:16px}
.dots::before,.dots::after{content:"";position:absolute;top:50%;height:2px;margin-top:-1px;background:var(--moft-chocolate-light)}
.dots::before{left:5px;right:5px}
.dots::after{height:4px;margin-top:-2px;left:calc(5px + (100% - 10px) * var(--a) / 6);width:calc((100% - 10px) * (var(--b) - var(--a)) / 6);background:var(--moft-chocolate-deep)}
.dots i{position:relative;z-index:1;width:10px;height:10px;border:2px solid var(--moft-chocolate);border-radius:var(--moft-radius-pill);background:var(--moft-whipped-cream)}
.dots i:nth-child(4){box-shadow:0 0 0 2px var(--moft-whipped-cream),0 0 0 4px var(--moft-chocolate)}
.dots i.on{background:var(--moft-chocolate-deep);border-color:var(--moft-chocolate-deep)}
@media (min-width:820px){.vars__row{grid-template-columns:70px auto minmax(120px,1fr) auto;column-gap:var(--moft-space-3)}}

/* Flavour tags: plain outlines, not markers */
.vars__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.tag-sabor{display:inline-flex;align-items:center;min-height:30px;padding:0 var(--moft-space-3);border:2px solid var(--moft-chocolate);border-radius:var(--moft-radius-pill);font-size:13px;font-weight:var(--moft-weight-bold);letter-spacing:.03em;line-height:1;color:var(--moft-chocolate)}

/* ---------- ¿No ves lo que buscas?: the Home Encargar panel, short version (hidden for now) ---------- */
.ask{justify-items:center;gap:var(--moft-space-3)}
.ask .order__lead{margin-top:0}
.ask .btn-secondary{--btn-shadow:var(--moft-tiramisu);margin-top:var(--moft-space-3)}
@media (min-width:1024px){.ask{padding:var(--moft-space-8) var(--moft-space-7)}}