/* Custom CSS - vedligeholdes som fil, ikke via admin-editoren */

.product-card { padding: 15px !important; overflow: hidden !important; }
.product-card__image-container { margin: -15px -15px 10px -15px !important; }
.product-card__favourite { top: 8px !important; right: 8px !important; }
.product-card__badges { top: 8px !important; left: 8px !important; }
.product-card__play-video { right: 8px !important; }

.section--hero:after { display: none !important; }
.section--hero .hero__title,
.section--hero .hero_lead {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.4), 0 10px 36px rgba(0, 0, 0, 0.35);
}
.section--hero { justify-content: center !important; text-align: center !important; }
.section--hero .container { text-align: center !important; }
.section--hero .hero__title { font-size: clamp(1.75rem, 2.6vw, 2.5rem) !important; }
.section--hero .hero_lead { font-size: clamp(1.125rem, 1.6vw, 1.5rem) !important; }
.section--hero .hero__buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.section--hero .hero__buttons .hero__btn { margin-top: 0 !important; }
.section--hero .hero__btn { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }

@media (min-width: 768px) {
    .section--hero .hero__buttons { flex-direction: row; justify-content: center; flex-wrap: wrap; }
}

@media (max-width: 767px) {
    .section--hero,
    .section--hero .container { text-align: left !important; }
    .section--hero .hero__buttons { align-items: flex-start; }
    .section--hero .hero__title { font-size: 2rem !important; }
    .section--hero { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
}

.section--hero .hero__btn--sale { background: #dc2626; border-color: #dc2626; color: #fff; }

/* === Pagination mobil-fix ===
   Temaets .pagination er display:flex uden flex-wrap og uden mobile styles,
   så sidetallene loeber ud over skaermen paa kategorisider paa mobil. */
.pagination {
    flex-wrap: wrap;
    max-width: 100%;
    row-gap: 0.375rem;
}

@media (max-width: 767px) {
    .pagination {
        padding: 0.5rem 0.25rem;
        gap: 0.25rem;
        margin-top: 0;
    }
    .pagination a,
    .pagination .current,
    .pagination .prev,
    .pagination .next {
        padding: 0.5rem 0.625rem;
        min-width: 2.5rem;
        text-align: center;
        font-size: 0.9375rem;
    }
    .pagination span:not([class]) {
        padding: 0.5rem 0.125rem;
    }
}