/* Vaikų krautuvė: catalogue index (kategorijos.html) + sale landing extras (akcijos.html) */

/* ================= Catalogue index ================= */
.catalog { padding-bottom: calc(var(--section-y) + 56px); } /* room for the footer toys that overhang the wave */
.catalog .crumbs { margin: 0; padding-left: 0; list-style: none; }

.catalog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; padding-block: 4px 36px; }
.catalog-head .h1 { font-size: clamp(34px, 3vw, 44px); }
.catalog-head__lead { max-width: 62ch; margin-top: 16px; font-size: 17px; color: var(--c-navy-soft); }
.catalog-head__lead a { color: var(--c-navy); font-weight: 650; text-decoration: underline; text-decoration-color: var(--c-tomato); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.catalog-head__lead a:hover { color: var(--c-tomato-dark); }
.catalog-head__facts { display: flex; flex-direction: column; gap: 10px; flex: none; }
.catalog-head__facts li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 650; }

/* L1 cards */
.l1-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.l1 { display: flex; flex-direction: column; padding: 24px 24px 20px; border-radius: var(--radius-l); background: var(--c-white); box-shadow: 0 0 0 1px var(--c-line); transition: box-shadow .25s var(--ease); }
.l1:hover { box-shadow: 0 0 0 1px var(--c-line), var(--shadow); }
.l1__head { display: flex; align-items: center; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--c-line); }
.l1__img { --ring: var(--t-peach); width: 80px; height: 80px; flex: none; border-radius: 50%; overflow: hidden; background: var(--c-sand); box-shadow: 0 0 0 5px var(--ring); transition: transform .25s var(--ease); }
.l1__img img { width: 100%; height: 100%; object-fit: cover; }
.l1-grid > li:nth-child(5n+2) .l1__img { --ring: var(--t-sun); }
.l1-grid > li:nth-child(5n+3) .l1__img { --ring: var(--t-mint); }
.l1-grid > li:nth-child(5n+4) .l1__img { --ring: var(--t-sky); }
.l1-grid > li:nth-child(5n+5) .l1__img { --ring: var(--t-lilac); }
.l1__head:hover .l1__img { transform: translateY(-2px) rotate(-4deg); }
.l1__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.l1__name { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.l1__head:hover .l1__name { color: var(--c-tomato-dark); }
.l1__count { font-size: 14px; font-weight: 600; color: var(--c-muted); }

.l1__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; padding-block: 14px 16px; flex: 1; align-content: start; }
.l1__links a { display: block; padding: 6px 0; font-size: 15px; line-height: 1.35; color: var(--c-navy-soft); transition: color .15s var(--ease); }
.l1__links a:hover { color: var(--c-navy); text-decoration: underline; text-decoration-color: var(--c-tomato); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.l1__all { align-self: flex-start; font-size: 15px; color: var(--c-tomato-dark); }

/* By age */
.ages { margin-top: 72px; }
.ages__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 24px; }
.ages__head p { color: var(--c-navy-soft); }
.ages__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.age { --bg: var(--t-peach); --ink: var(--t-peach-ink); display: flex; flex-direction: column; min-height: 148px; padding: 20px 20px 18px; border-radius: var(--radius-l); background: var(--bg); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.age:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: var(--shadow); }
.age--sun { --bg: var(--t-sun); --ink: var(--t-sun-ink); }
.age--mint { --bg: var(--t-mint); --ink: var(--t-mint-ink); }
.age--sky { --bg: var(--t-sky); --ink: var(--t-sky-ink); }
.age--lilac { --bg: var(--t-lilac); --ink: var(--t-lilac-ink); }
.age__num { font-family: var(--font-display); font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.age__unit { margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--ink); }
.age__label { margin-top: auto; padding-top: 14px; font-size: 15px; font-weight: 700; color: var(--c-navy); }

/* Other ways to find */
.finders { margin-top: 56px; }
.finders__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.finder { display: flex; align-items: center; gap: 16px; height: 100%; padding: 20px 22px; border-radius: var(--radius-l); background: var(--c-white); box-shadow: 0 0 0 1px var(--c-line); transition: box-shadow .25s var(--ease); }
.finder:hover { box-shadow: 0 0 0 1.5px var(--c-navy); }
.finder__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.4; }
.finder__text strong { font-size: 18px; font-weight: 800; }
.finder__text span { font-size: 15px; color: var(--c-muted); }
.finder__arrow { color: var(--c-muted); transition: transform .2s var(--ease), color .2s var(--ease); }
.finder:hover .finder__arrow { transform: translateX(4px); color: var(--c-navy); }
.finder:hover .pbadge { transform: rotate(4deg) scale(1.05); }
.finder--sale strong { color: var(--c-tomato-dark); }

/* ================= Sale landing (akcijos.html, on top of category.css) ================= */
.sale-info { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding: 14px 20px; border-radius: var(--radius); background: var(--t-sun); font-size: 15px; line-height: 1.45; }
.sale-info p { flex: 1; min-width: 0; }
.sale-info strong { font-weight: 750; }
.sale-info a { flex: none; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sale-info a:hover { color: var(--c-tomato-dark); }

.qfilters { display: grid; gap: 12px; padding-block: 4px 28px; }
.qfilters__row { display: flex; align-items: center; gap: 12px 16px; min-width: 0; }
.qfilters__label { flex: none; width: 96px; font-size: 14px; font-weight: 700; color: var(--c-muted); }
.qfilters .chips { gap: 8px; min-width: 0; }
.qfilters .chip { min-height: 40px; font-size: 15px; }
.chip--sale.is-active { background: var(--c-tomato); }

/* ================= Responsive ================= */
@media (max-width: 1100px) {
  .l1-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ages__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .catalog-head { flex-direction: column; align-items: flex-start; }
  .catalog-head__facts { flex-direction: row; flex-wrap: wrap; gap: 10px 20px; }
  .finders__list { grid-template-columns: minmax(0, 1fr); }
  .qfilters__row { flex-direction: column; align-items: stretch; gap: 8px; }
  .qfilters__label { width: auto; }
  .qfilters .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .qfilters .chips::-webkit-scrollbar { display: none; }
  .qfilters .chips li { flex: none; }
  .qfilters .chip { min-height: 44px; white-space: nowrap; }
}
@media (max-width: 760px) {
  .catalog-head__lead { font-size: 16px; }
  .l1-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .l1 { padding: 20px 20px 16px; }
  .l1__img { width: 64px; height: 64px; box-shadow: 0 0 0 4px var(--ring); }
  .l1__name { font-size: 20px; }
  .l1__links { gap: 0 14px; padding-block: 10px 12px; }
  .l1__links a { display: flex; align-items: center; min-height: 44px; padding: 6px 0; }
  .l1__all { display: inline-flex; align-items: center; min-height: 44px; }
  .ages { margin-top: 56px; }
  .ages__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .age { min-height: 124px; padding: 16px; }
  .age__num { font-size: 34px; }
  .sale-info { flex-wrap: wrap; padding: 14px 16px; }
  .sale-info { align-items: flex-start; }
  .sale-info p { flex: 1 1 calc(100% - 54px); }
  .sale-info a { padding-left: 54px; }
}