.catalog-page, .catalog-detail { padding-bottom: 80px; padding-top: 28px; }
.catalog-detail-icon { align-items: center; background: #e5f4eb; border-radius: 8px; color: var(--secondary); display: inline-flex; flex: 0 0 auto; font-size: 31px; height: 58px; justify-content: center; width: 58px; }.catalog-detail--pest .catalog-detail-icon { background: #fbecea; color: #b24a3a; }.catalog-detail h1 { color: var(--primary); font-size: 32px; line-height: 1.18; margin: 0 0 8px; }
.catalog-kicker { color: var(--secondary); display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.catalog-detail--pest .catalog-kicker { color: #a44234; }.catalog-toolbar { align-items: baseline; display: flex; justify-content: space-between; margin: 26px 0 18px; }.catalog-toolbar h2 { color: var(--primary); font-size: 21px; margin: 0; }.catalog-toolbar p { color: var(--muted); font-size: 13px; margin: 0; }
.catalog-grid { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }.catalog-card { background: #fff; border: 1px solid var(--surface); border-radius: 8px; display: flex; flex-direction: column; min-height: 292px; overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s; }.catalog-card:hover { border-color: var(--secondary); box-shadow: var(--shadow); transform: translateY(-3px); }.catalog-card--pest:hover { border-color: #b24a3a; }.catalog-card:focus-visible { outline: 3px solid rgb(14 108 74 / 28%); outline-offset: 3px; }.catalog-card-image { align-items: center; aspect-ratio: 16 / 10; background: var(--surface-low); display: flex; justify-content: center; overflow: hidden; position: relative; }.catalog-card-image img { height: 100%; object-fit: cover; transition: transform .35s; width: 100%; }.catalog-card:hover img { transform: scale(1.05); }.catalog-card-image > .material-symbols-outlined { color: var(--secondary); font-size: 38px; }.catalog-card--pest .catalog-card-image > .material-symbols-outlined { color: #b24a3a; }.catalog-card-count { background: rgb(1 45 29 / 88%); bottom: 10px; color: #fff; font-size: 10px; font-weight: 800; left: 10px; padding: 5px 7px; position: absolute; }.catalog-card-copy { display: flex; flex: 1; flex-direction: column; padding: 16px; }.catalog-card h3 { -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--primary); display: -webkit-box; font-size: 16px; line-height: 1.35; margin: 0 0 15px; min-height: 43px; overflow: hidden; }.catalog-card-link { align-items: center; color: var(--secondary); display: inline-flex; font-size: 12px; font-weight: 800; gap: 5px; margin-top: auto; }.catalog-card--pest .catalog-card-link { color: #a44234; }.catalog-card-link .material-symbols-outlined { font-size: 16px; }
.catalog-empty { align-items: center; background: #fff; border: 1px solid var(--surface); border-radius: 8px; display: flex; flex-direction: column; padding: 52px 24px; text-align: center; }.catalog-empty .material-symbols-outlined { color: var(--secondary); font-size: 38px; }.catalog-empty h2 { color: var(--primary); font-size: 19px; margin: 12px 0 6px; }.catalog-empty p { color: var(--muted); font-size: 13px; margin: 0; }.catalog-pagination { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 30px; }.catalog-pagination a { align-items: center; border: 1px solid var(--surface-high); border-radius: 6px; color: var(--primary); display: inline-flex; font-size: 13px; font-weight: 800; height: 38px; justify-content: center; min-width: 38px; padding: 0 8px; }.catalog-pagination a:hover { border-color: var(--secondary); color: var(--secondary); }.catalog-pagination a.is-current { background: var(--primary); border-color: var(--primary); color: #fff; }
.catalog-detail { max-width: 980px; }.catalog-detail-header { margin: 22px 0 18px; }.catalog-detail-header h1 { color: var(--primary); font-size: clamp(25px, 2.5vw, 30px); line-height: 1.25; margin: 0; }.catalog-detail--pest h1 { color: #8d3028; }
.catalog-section-nav { display: grid; gap: 10px; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: 0 0 18px; }.catalog-section-nav button { align-items: center; background: #fff; border: 1px solid #b9d7c3; border-radius: 7px; color: var(--secondary); cursor: pointer; display: flex; font: inherit; font-size: 12px; font-weight: 800; justify-content: center; min-height: 45px; padding: 8px 10px; text-align: center; transition: background .2s, border-color .2s, color .2s; }.catalog-section-nav button:hover, .catalog-section-nav button:focus-visible, .catalog-section-nav button[aria-selected='true'] { background: var(--primary); border-color: var(--primary); color: #fff; outline: 0; }.catalog-detail--pest .catalog-section-nav button { border-color: #e8aaa3; color: #a44234; }.catalog-detail--pest .catalog-section-nav button:hover, .catalog-detail--pest .catalog-section-nav button:focus-visible, .catalog-detail--pest .catalog-section-nav button[aria-selected='true'] { background: #9f372d; border-color: #9f372d; color: #fff; }
.catalog-content-section { background: #fff; border: 1px solid var(--surface); border-top: 3px solid var(--secondary); border-radius: 8px; box-shadow: 0 12px 26px rgb(1 45 29 / 6%); margin-top: 20px; padding: 34px 42px 38px; }.catalog-detail--pest .catalog-content-section { border-top-color: #b24a3a; }.catalog-content-section h2 { color: var(--primary); font-size: 26px; margin: 0 0 20px; text-align: center; }.catalog-detail--pest .catalog-content-section h2 { color: #8d3028; }
@media (max-width: 1100px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .catalog-page, .catalog-detail { padding-bottom: 56px; padding-top: 20px; }.catalog-toolbar { align-items: flex-start; flex-direction: column; gap: 5px; margin-top: 22px; }.catalog-grid { grid-template-columns: 1fr; }.catalog-card { min-height: 0; }.catalog-detail-header h1 { font-size: 25px; }.catalog-section-nav { grid-auto-columns: minmax(138px, 1fr); grid-auto-flow: column; overflow-x: auto; padding-bottom: 5px; }.catalog-section-nav button { min-height: 42px; }.catalog-content-section { margin-top: 16px; padding: 26px 20px 28px; }.catalog-content-section h2 { font-size: 23px; } }