/* ---------------------------------------------------------------------------
   Design A — outlet-showroom (07-08-2026, besluit David, route (b)).

   Twee dingen:
     1. de badge "Outlet-showroom" op de vestigingskaart in de PDP-Showroomtab;
     2. het blok op de outlet-categoriepagina's.

   Design B heeft dezelfde markup, maar krijgt zijn stijl uit assets-v3/css/style.css
   (B laadt deze A-keten niet). De opmaak is bewust gelijkwaardig gehouden: zelfde
   opbouw, zelfde teksten, per design in de eigen huisstijl.

   Los bestand met allow_minify = false, zoals stof-specs.css en pdp-setup.css:
   de min-build wordt in dit project niet met de hand bewerkt.
   --------------------------------------------------------------------------- */

/* ---- 1. badge op de vestigingskaart in de Showrooms-tab ---- */
.showroom-tab-card .outlet-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 4px;
    background: #00875b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: middle;
    letter-spacing: .2px;
    /* 07-08: de tekst werd "XXL outlet aanwezig" en is daarmee wat langer. nowrap houdt de badge
       als één geheel — hij wipt dan netjes naar de volgende regel in plaats van midden in de
       tekst te breken. De kaart is 1-koloms onder 600px, dus ruimte genoeg; onder 480px toch een
       maatje kleiner zodat hij ook op een smalle telefoon naast de naam past. */
    white-space: nowrap;
}

@media all and (max-width: 480px) {
    .showroom-tab-card .outlet-badge {
        font-size: 10px;
        padding: 1px 6px;
        margin-left: 4px;
    }
}

/* ---- 2. het outlet-showroomblok ---- */
.outlet-sr {
    margin: 26px 0;
}
/* 07-08 (na visuele keuring David): geen eigen max-width/centrering. Het blok vult de kolom of
   container waarin het staat, zodat het exact op de lijn van de omliggende elementen ligt. */
.outlet-sr__inner {
    width: 100%;
}
.outlet-sr__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid #e3e7ec;
    border-radius: 8px;
    padding: 16px 18px;
    background: #fff;
}
/* Bovenaan de outlet-vestigingspagina iets nadrukkelijker, met een accentrand. */
.outlet-sr--top .outlet-sr__card {
    border-color: #00875b;
}
.outlet-sr__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.outlet-sr__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #00875b;
}
.outlet-sr__name {
    font-size: 17px;
    font-weight: 700;
    color: #191919;
    text-decoration: none;
}
a.outlet-sr__name:hover {
    text-decoration: underline;
}
.outlet-sr__addr,
.outlet-sr__hours {
    font-size: 13.5px;
    color: #5b6470;
}
.outlet-sr__links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.outlet-sr__route,
.outlet-sr__call {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 5px;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.outlet-sr__route {
    background: #00875b;
    color: #fff;
}
.outlet-sr__call {
    border: 1px solid #e3e7ec;
    color: #191919;
}

@media all and (max-width: 640px) {
    .outlet-sr__card {
        flex-direction: column;
        align-items: flex-start;
    }
    .outlet-sr__links {
        width: 100%;
    }
    .outlet-sr__route,
    .outlet-sr__call {
        flex: 1 1 0;
        text-align: center;
    }
}

/* ---- 3. badge in de oranje knoppenrij met de vestigingsnamen (home-times.php) ----
   De knoppen staan in een 12-koloms tabel; de badge mag die kolom dus niet breder maken.
   Daarom: eigen regel ónder de naam (display:block), klein, en met nowrap zodat hij niet
   middenin breekt. De badge zit ín de <a>, dus de hele knop blijft één klikdoel.
   Twee varianten staan tijdelijk naast elkaar zodat David kan kiezen; daarna blijft er één. */
.opening-times-buttons .btn-warning {
    line-height: 1.25;
    white-space: normal;
}
.opening-times-buttons .outlet-badge {
    display: block;
    margin: 3px auto 0;
    padding: 1px 6px;
    border-radius: 4px;
    background: #00875b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
    max-width: 100%;
}
/* 07-08 (David): de compacte variant is vervallen — "XXL outlet aanwezig" is definitief. Onder
   1200px zijn de tabelkolommen te smal voor die tekst op één regel, dus daar mag hij BINNEN de
   knop over twee regels lopen: nowrap eraf, lettertje kleiner, iets strakkere regelafstand. Zo
   wordt de kolom niet breder en valt er niets weg — hij wordt alleen een paar pixels hoger. */
@media all and (max-width: 1199px) {
    .opening-times-buttons .outlet-badge {
        white-space: normal;
        font-size: 9.5px;
        line-height: 1.25;
        padding: 2px 5px;
    }
}

/* ---- 4. outlet-banner op de woonwinkelpagina (design A) ----
   Zelfde boodschap en kleur als in design B, in A's eigen opmaak. Staat direct onder het
   promotieblok, dus over de volle breedte van de container. */
.outlet-banner {
    margin: 0 0 26px;
}
.outlet-banner .outlet-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: #00875b;
    color: #fff;
    border-radius: 8px;
    padding: 18px 22px;
}
.outlet-banner__title {
    display: block;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}
.outlet-banner__sub {
    display: block;
    font-size: 14px;
    opacity: .92;
    margin-top: 3px;
}
.outlet-banner__cta {
    flex: 0 0 auto;
    background: #fff;
    color: #00875b;
    font-weight: 700;
    font-size: 14px;
    padding: 11px 18px;
    border-radius: 5px;
    text-decoration: none;
    white-space: nowrap;
}
.outlet-banner__cta:hover,
.outlet-banner__cta:focus {
    background: #f1f5f3;
    color: #00875b;
    text-decoration: none;
}

@media all and (max-width: 760px) {
    .outlet-banner .outlet-banner__inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 18px;
    }
    .outlet-banner__title { font-size: 18px; }
    .outlet-banner__cta {
        width: 100%;
        text-align: center;
        white-space: normal;
    }
}