.reference-card {
    display: inline-block;
    width: 210px;
    max-width: 100%;
    margin: 8px 12px 12px 0;
    vertical-align: top;
    white-space: normal;
    font: normal 14px/1.5 Arial, sans-serif;
    text-align: left;
}
.reference-card .reference-card__link {
    display: block;
    box-sizing: border-box;
    padding: 16px 18px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    color: #333;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}
.reference-card .reference-card__link:hover,
.reference-card .reference-card__link:focus {
    border-color: #55b63d;
    color: #333;
    text-decoration: none;
}
.reference-card .reference-card__link:focus { outline: 2px solid #348423; outline-offset: 3px; }
.reference-card__heading { display: block; margin-bottom: 9px; }
.reference-card__provider { font-size: 18px; font-weight: bold; }
.reference-card--google .reference-card__provider { color: #3367d6; }
.reference-card--firmy .reference-card__provider { color: #bb262b; }
.reference-card__external { float: right; color: #777; font-size: 18px; }
.reference-card__stars { display: block; position: relative; width: 100px; height: 24px; line-height: 24px; }
.reference-card__stars-base, .reference-card__stars-fill { display: block; width: 100px; height: 24px; background: url('../images/reference-stars.svg') repeat-x 0 0; }
.reference-card__stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; background-position: 0 -24px; }
.reference-card__rating { display: block; font-size: 20px; font-weight: bold; }
.reference-card__count { display: block; color: #666; font-size: 12px; }
.reference-card__cta { display: block; margin-top: 9px; color: #347b27; font-size: 13px; text-decoration: underline; }
.reference-settings { max-width: 720px; }
.reference-settings label { display: block; margin: 12px 0 4px; font-weight: bold; }
.reference-settings input[type="url"], .reference-settings input[type="text"], .reference-settings input[type="number"] { box-sizing: border-box; width: 100%; max-width: 540px; padding: 8px; }
.reference-settings fieldset { margin: 24px 0; padding: 18px; border: 1px solid #ddd; }
.reference-settings legend { width: auto; margin: 0; padding: 0 8px; }
.reference-settings .reference-settings__enable { font-weight: normal; }
.reference-settings__help { color: #666; font-size: 13px; }
.reference-insert { margin: 8px 0 16px; }
.reference-insert button { margin: 4px 6px 4px 0; }

.reference-card__brand-logo { display: inline-block; width: auto; height: 22px; max-width: 110px; object-fit: contain; object-position: left center; vertical-align: middle; }

/* One compact pair below the shop logo; article cards keep their larger layout. */
.header-references {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    margin-top: 9px;
    padding: 2px 3px;
    border: 1px solid rgba(170, 181, 166, .45);
    border-radius: 5px;
    background: rgba(255, 255, 255, .82);
}
.header-references .reference-card { width: 200px; margin: 0; }
.header-references .reference-card + .reference-card { border-left: 1px solid #e2e7df; }
.header-references .reference-card .reference-card__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 26px;
    padding: 2px 8px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    box-shadow: none;
    white-space: nowrap;
}
.header-references .reference-card .reference-card__link:hover { background: #f0f6ed; }
.header-references .reference-card__heading { display: flex; align-items: center; justify-content: center; flex: 0 0 58px; margin: 0; }
.header-references .reference-card__brand-logo { width: auto; height: 14px; max-width: 58px; }
.header-references .reference-card__external { display: none; }
.header-references .reference-card__rating { order: 1; font-size: 11px; line-height: 16px; font-weight: 600; }
.header-references .reference-card__stars { order: 2; transform: scale(.65); transform-origin: left center; margin-right: -35px; }
.header-references .reference-card__count { order: 3; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 10px; line-height: 16px; color: #6b7267; }
.header-references .reference-card__cta { margin: 0; font-size: 11px; }
.main-header .header-with-references {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(380px, 1.8fr) 190px;
    gap: 24px;
    align-items: center;
}
.main-header .header-with-references > .top-search-holder,
.main-header .header-with-references > .logo-holder,
.main-header .header-with-references > .top-cart-row { width: auto; min-width: 0; padding: 0; float: none; }
.main-header .header-with-references > .logo-holder { text-align: center; }
.main-header .header-with-references .logo { width: 100%; justify-content: center; }
.main-header .header-with-references .logo img { width: 190px; max-width: 45%; height: auto; flex-shrink: 0; margin: 0 10px 0 0; }
.main-header .header-with-references .logo h1 { margin: 0; font-size: 22px; line-height: 1.25; }
.main-header .header-with-references .dropdown-cart { float: right; margin: 0; }
@media (min-width: 992px) and (max-width: 1199px) {
    .main-header .header-with-references { grid-template-columns: minmax(170px, 1fr) minmax(370px, 1.8fr) 180px; gap: 18px; }
    .main-header .header-with-references .logo img { width: 170px; }
    .main-header .header-with-references .logo h1 { font-size: 20px; }
}
@media (max-width: 991px) {
    .main-header .header-with-references {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "logo logo" "search cart";
        gap: 16px;
        padding: 16px 0;
    }
    .main-header .header-with-references > .logo-holder { grid-area: logo; margin: 0; }
    .main-header .header-with-references > .top-search-holder { grid-area: search; }
    .main-header .header-with-references > .top-cart-row { grid-area: cart; justify-self: end; }
    .main-header .header-with-references .search-area { margin: 0; }
}
@media (max-width: 609px) {
    .main-header .header-with-references { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "search" "cart"; gap: 12px; }
    .main-header .header-with-references .logo img { width: 190px; max-width: 100%; margin: 0 0 5px; }
    .main-header .header-with-references .logo h1 { text-align: center; font-size: 20px; }
    .main-header .header-with-references > .top-cart-row { justify-self: center; }
}
@media (max-width: 479px) {
    .header-references { flex-direction: column; }
    .header-references .reference-card { width: 100%; }
    .header-references .reference-card + .reference-card { border-left: 0; border-top: 1px solid #e2e7df; }
}