/* Layon 1.3.7: desktop hover/focus preview; no separate size trigger. */
.card-media{position:relative;min-width:0}
.card-size-preview{display:none;position:absolute;inset:auto 8px 8px;z-index:3;background:#fff;border:1px solid var(--layon-line);padding:14px 10px;max-height:180px;overflow-y:auto;box-shadow:0 3px 12px #213a490d;font-size:13px;color:var(--layon-ink)}
.card-size-preview p{font-size:13px;font-weight:500;text-align:center;margin:0 0 10px;line-height:1.4}
.card-size-preview ul{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;padding:0;margin:0;list-style:none}
.card-size-preview a{display:flex;align-items:center;justify-content:center;min-height:32px;min-width:32px;padding:5px 8px;background:var(--layon-button-soft);color:var(--layon-ink);font-size:12px;line-height:1.3;text-decoration:none;overflow-wrap:anywhere;border-radius:var(--layon-button-radius)}
.card-size-preview a:hover{background:var(--layon-accent);color:#fff}
.card-size-preview a:focus-visible{outline:2px solid var(--layon-accent);outline-offset:2px}
.recent-card{min-width:0;position:relative}.recent-card>a{display:block;font-size:13px;line-height:1.4;margin-top:8px}.recent-card .product-image{display:block}.recent-card .product-image img{width:100%;height:160px;object-fit:contain;background:#fff}.recent-page .recent-card .product-image img{height:240px}
.recent-card .card-size-preview{max-height:130px;padding:8px}.recent-card .card-size-preview p{font-size:12px}
.recent-strip .recent-card{flex:0 0 180px}.recent-strip .card-size-preview{max-height:100px}
@media(min-width:721px) and (hover:hover) and (pointer:fine){
  .card-size-preview{display:block;visibility:hidden;opacity:0;pointer-events:none}
  .product-card:hover .card-size-preview,.product-card:focus-within .card-size-preview{visibility:visible;opacity:1;pointer-events:auto}
}

/* 30.10 mobile cards: show existing server-filtered orderable sizes in flow. */
@media(max-width:720px),(hover:none),(pointer:coarse){
 .card-size-preview{display:block;position:static;inset:auto;visibility:visible;opacity:1;pointer-events:auto;max-height:none;overflow:visible;margin:8px 0 0;padding:0;border:0;box-shadow:none;background:transparent}
 .card-size-preview p{font-size:12px;text-align:left;margin-bottom:4px;line-height:1.4}
 .card-size-preview ul{justify-content:flex-start;gap:4px}
 .card-size-preview a{min-width:44px;min-height:44px;padding:8px;font-size:12px;line-height:1.3;background:#f7f7f7;color:#333;border:1px solid #ededed}
 .recent-card .card-size-preview,.recent-strip .card-size-preview{max-height:none;padding:0}
 .card-size-preview a:focus-visible{outline:2px solid #1b2738;outline-offset:2px}
}
@media(min-width:721px) and (hover:hover) and (pointer:fine){
 .card-size-preview{inset:auto 8px 8px;padding:8px;max-height:146px;border-radius:6px}
 .card-size-preview p{margin-bottom:6px;font-size:12px}
 .card-size-preview a{min-width:36px;min-height:36px;padding:6px 8px}
}
/* Ordinary catalogs only: keep the first product closer to the title. */
@media(max-width:720px){
 body.layon-natural:not(.staff-page) main:has(>.page-title):has(>.real-grid){margin-top:20px}
 main:has(>.real-grid)>.page-title{margin-bottom:12px;gap:8px}
 main:has(>.real-grid)>.page-title h1{font-size:28px;line-height:1.2}
 main:has(>.real-grid)>.breadcrumbs{margin:0 0 12px;line-height:1.5}
 main:has(>.real-grid)>.category-links{margin-bottom:12px}
 main:has(>.real-grid)>.catalog-controls{margin-bottom:12px}
 body.layon-natural:not(.staff-page) main:has(>.real-grid)>.catalog-controls>summary{text-decoration:none}
}