:root {
    --axdrp-surface: var(--ax-surface, #fff);
    --axdrp-text: var(--ax-text, #17202a);
    --axdrp-muted: var(--ax-muted, #5d6875);
    --axdrp-primary: var(--ax-primary, #1f6f8b);
    --axdrp-border: var(--ax-border, #dfe5ea);
    --axdrp-soft: var(--ax-soft-bg, #f6f8fb);
    --axdrp-radius: var(--ax-radius, 8px);
    --axdrp-shadow: var(--ax-card-shadow, 0 2px 8px rgba(15, 23, 42, .06));
}

.axdrp { color: var(--axdrp-text); margin: 2rem 0; }
.axdrp > h2 { color: inherit; font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 600; line-height: 1.25; margin: 0 0 1rem; }
.axdrp-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.axdrp-cols-2 .axdrp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.axdrp-cols-3 .axdrp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.axdrp-cols-5 .axdrp-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.axdrp-card { background: var(--axdrp-surface); border: 1px solid var(--axdrp-border); border-radius: var(--axdrp-radius); box-shadow: var(--axdrp-shadow); min-width: 0; overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.axdrp-card:hover { border-color: var(--axdrp-primary); box-shadow: 0 5px 15px rgba(15, 23, 42, .1); transform: translateY(-2px); }
.axdrp-card > a { color: inherit; display: grid; height: 100%; text-decoration: none; }
.axdrp-card > a:focus-visible { outline: 3px solid var(--axdrp-primary); outline-offset: -3px; }
.axdrp-image { align-items: center; aspect-ratio: 4 / 3; background: var(--ax-image-background, var(--axdrp-soft)); display: flex; justify-content: center; overflow: hidden; padding: 8px; }
.axdrp-image img { height: 100%; margin: 0; object-fit: contain; width: 100%; }
.axdrp-copy { align-content: space-between; display: grid; gap: 9px; padding: 12px 13px 14px; }
.axdrp-name { display: -webkit-box; font-size: .95rem; font-weight: 600; line-height: 1.35; min-height: 2.7em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.axdrp-price { color: var(--axdrp-primary); font-size: .95rem; font-weight: 700; }
.axdrp-price del { color: var(--axdrp-muted); font-size: .85em; font-weight: 500; }
.axdrp-price ins { text-decoration: none; }

@media (max-width: 900px) {
    .axdrp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .axdrp-grid { grid-auto-columns: minmax(155px, 72vw); grid-auto-flow: column; grid-template-columns: none; overflow-x: auto; overscroll-behavior-inline: contain; padding-bottom: 8px; scroll-snap-type: inline proximity; }
    .axdrp-card { scroll-snap-align: start; }
    .axdrp-image { aspect-ratio: 1 / 1; }
}