/* * Kajakarshop.cz — karty podkategorií na stránce * /tipy--navody-a-porovnani/ * * Soubor načtěte až po výchozích stylech Shoptetu. * JavaScript není potřeba: stránku jednoznačně určuje třída na . */ body.in-tipy--navody-a-porovnani.type-posts-listing .subcategories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0 0 29px; padding: 0; } body.in-tipy--navody-a-porovnani.type-posts-listing .subcategories > li { float: none; width: auto; max-width: none; margin: 0; padding: 0; list-style: none; } body.in-tipy--navody-a-porovnani.type-posts-listing .subcategories > li > a { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; height: 100%; min-width: 0; min-height: 97px; padding: 22px 27px 22px 23px; overflow: hidden; background: #f6f6f6; border: 0; border-radius: 30px; box-shadow: none; color: #000; text-align: left; text-decoration: none; transition: background-color 0.2s ease; } body.in-tipy--navody-a-porovnani.type-posts-listing .subcategories > li > a::before { display: none; content: none; } body.in-tipy--navody-a-porovnani.type-posts-listing .subcategories > li > a::after { position: static; inset: auto; display: flex; flex: 0 0 127px; align-items: center; justify-content: center; width: 127px; height: 47px; margin: 0; padding: 0; opacity: 1; visibility: visible; content: "ZOBRAZIT"; background: #009ff1; border: 0; border-radius: 0; color: #fff; font-family: "Exo 2", sans-serif; font-size: 16px; font-weight: 700; line-height: 1; text-align: center; text-transform: uppercase; transform: none; transition: background-color 0.2s ease; } body.in-tipy--navody-a-porovnani.type-posts-listing .subcategories > li > a .text { display: -webkit-box; flex: 1 1 auto; min-width: 0; max-width: 198px; height: auto; max-height: 75px; margin: 0; padding: 0; overflow: hidden; color: #000; font-family: "Exo 2", sans-serif; font-size: 20px; font-weight: 700; line-height: 25px; text-align: left; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; } body.in-tipy--navody-a-porovnani.type-posts-listing .subcategories > li > a:hover, body.in-tipy--navody-a-porovnani.type-posts-listing .subcategories > li > a:focus { background: #f6f6f6; color: #000; text-decoration: none; } body.in-tipy--navody-a-porovnani.type-posts-listing .subcategories > li > a:hover::after, body.in-tipy--navody-a-porovnani.type-posts-listing .subcategories > li > a:focus::after { background: #008ed8; color: #fff; } body.in-tipy--navody-a-porovnani.type-posts-listing .subcategories > li > a:focus-visible { outline: 3px solid rgb(0 159 241 / 35%); outline-offset: 3px; } @media (max-width: 991px) { body.in-tipy--navody-a-porovnani.type-posts-listing .subcategories { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { body.in-tipy--navody-a-porovnani.type-posts-listing .subcategories { grid-template-columns: minmax(0, 1fr); gap: 14px; } body.in-tipy--navody-a-porovnani.type-posts-listing .subcategories > li > a { padding-right: 20px; padding-left: 20px; border-radius: 24px; } body.in-tipy--navody-a-porovnani.type-posts-listing .subcategories > li > a::after { flex-basis: 112px; width: 112px; height: 44px; font-size: 14px; } } @media (max-width: 359px) { body.in-tipy--navody-a-porovnani.type-posts-listing .subcategories > li > a { gap: 12px; padding-right: 16px; padding-left: 16px; } body.in-tipy--navody-a-porovnani.type-posts-listing .subcategories > li > a::after { flex-basis: 100px; width: 100px; font-size: 13px; } }