/* =====================================================================
Swingshop.nl - Moderniserings-overrides (2026)
---------------------------------------------------------------------
Dit bestand bevat ALLE moderniseringsaanpassingen als aparte laag,
los van het Unishop-thema. Het wordt als laatste stylesheet geladen,
dus het overschrijft de thema-stijlen zonder de kernbestanden te raken.
Terugdraaien = de naar dit bestand in template_top.php weghalen.
Niets anders in het thema is aangepast.
===================================================================== */
/* ---------------------------------------------------------------------
0. WITRUIMTE BOVEN DE USP-BALK WEG (alle pagina's)
Bovenaan de stond een lege tekstregel (line-height ~21px) die
#bodyWrapper omlaag duwde. We zetten de regelhoogte van de body op 0
en herstellen 'm binnen #bodyWrapper (waar alle content in zit), zodat
de pagina strak bovenaan begint zonder de tekst te raken.
--------------------------------------------------------------------- */
body {
line-height: 0 !important;
}
#bodyWrapper {
line-height: normal !important;
}
/* ---------------------------------------------------------------------
1. TYPOGRAFIE
Verdana vervangen door een moderne system-font-stack (geen extra
netwerk-download). Oswald-koppen behouden we, maar rustiger:
minder letter-spacing, iets zachtere kleur.
--------------------------------------------------------------------- */
body,
.main_part_wrapper,
.product-name a,
p, td, li, input, select, textarea, a {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}
body {
color: #2b2f36;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Body-tekst iets groter en luchtiger voor leesbaarheid */
.main_part_wrapper,
.main_part_wrapper p,
.product_description,
.product_description p {
font-size: 15px;
line-height: 1.6;
color: #2b2f36;
}
/* Koppen: Oswald behouden maar moderner (minder gespatieerd) */
h1, h2, h3, h4,
.main_part_wrapper h1,
.main_part_wrapper h2,
.main_part_wrapper h3,
.title_default,
.product-name a {
letter-spacing: 0.2px;
color: #1f2733;
}
h1, .main_part_wrapper h1 { line-height: 1.25; }
h2, .main_part_wrapper h2 { line-height: 1.3; }
/* ---------------------------------------------------------------------
2. PRODUCTKAARTEN
Nette witte kaart met zachte rand, afgeronde hoeken, meer ruimte
rond de foto en een subtiele hover-lift.
--------------------------------------------------------------------- */
.product {
background: #ffffff;
border: 1px solid #e7ebf0;
border-radius: 12px;
padding: 14px 14px 16px;
margin: 8px 6px;
box-shadow: 0 1px 2px rgba(20, 40, 70, 0.04);
transition: box-shadow 0.18s ease, transform 0.18s ease,
border-color 0.18s ease;
min-height: 340px;
}
.product:hover {
box-shadow: 0 8px 22px rgba(20, 40, 70, 0.10);
transform: translateY(-3px);
border-color: #d3dbe6;
}
/* Grotere, gecentreerde productfoto met witruimte eromheen */
.product .img_border {
border: none;
min-height: 210px;
display: flex;
align-items: center;
justify-content: center;
padding: 6px 0 10px;
}
.product .product-image-wrapper img,
.product .product_img img {
max-height: 200px;
width: auto;
max-width: 100%;
object-fit: contain;
transition: transform 0.2s ease;
}
.product:hover .product-image-wrapper img,
.product:hover .product_img img {
transform: scale(1.04);
}
/* Productnaam: VASTE hoogte (ruimte voor tot 3 regels), zodat de prijs
en winkelwagen altijd op dezelfde hoogte staan, ongeacht de titellengte.
Langere titels worden netjes afgekapt. */
#bodyContent .product .product-name {
height: 66px !important; /* ruimte voor 3 regels (3 x 21px) */
min-height: 66px !important; /* themaregel (min-height:50px) overschrijven */
margin-top: 4px;
margin-bottom: 0;
overflow: hidden;
}
/* Prijsregel losmaken van de naam, op vaste positie onder de titel */
.product .clearfix {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid #eef1f5;
}
.product .product-name a {
font-size: 15px;
font-weight: 600;
color: #1f2733;
text-transform: none;
letter-spacing: 0;
line-height: 1.35;
}
/* Titel netjes afkappen op max. 3 regels met "..." i.p.v. hard clippen.
Verhoogde specificiteit + !important zodat de themaregel op 'display'
dit niet overschrijft. */
#bodyContent .product .product-name a {
display: -webkit-box !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product .product-name a:hover {
color: #015699;
}
/* Prijs prominenter */
.product .product-price {
font-size: 18px;
font-weight: 700;
color: #1f2733;
padding-top: 4px;
}
/* ---------------------------------------------------------------------
3. KNOPPEN
De groene "in winkelmandje"-knop moderner: afgerond, duidelijke
hover. Geldt voor de standaard themaknoppen en de kaart-cart-knop.
--------------------------------------------------------------------- */
.buttonAction,
.button_in_cart,
a.button,
button.button,
input.button,
.product_button a,
.moreLink a {
background: #62c247 !important;
background: linear-gradient(180deg, #6fd155 0%, #57b83f 100%) !important;
border: none !important;
border-radius: 8px !important;
color: #ffffff !important;
font-weight: 600 !important;
letter-spacing: 0.2px;
box-shadow: 0 2px 6px rgba(80, 170, 60, 0.25);
transition: filter 0.15s ease, box-shadow 0.15s ease,
transform 0.05s ease;
}
.buttonAction:hover,
.button_in_cart:hover,
a.button:hover,
button.button:hover,
input.button:hover,
.product_button a:hover,
.moreLink a:hover {
filter: brightness(1.06);
box-shadow: 0 4px 12px rgba(80, 170, 60, 0.32);
}
.buttonAction:active,
a.button:active,
button.button:active,
input.button:active {
transform: translateY(1px);
}
/* Winkelwagen-knop op de productkaart.
Het thema gebruikt een sprite (icon-cart-rollover.png) waarin het
wagentje links-boven in de tegel staat -> oogt niet gecentreerd.
We vervangen het door een eigen, perfect gecentreerd cart-icoon (SVG). */
.product .icon_cart_rollover {
border-radius: 8px;
overflow: visible;
}
.product .icon_cart_rollover a {
width: 40px !important;
height: 40px !important;
border-radius: 8px !important;
background-color: #62c247 !important;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='9'%20cy='21'%20r='1'/%3E%3Ccircle%20cx='20'%20cy='21'%20r='1'/%3E%3Cpath%20d='M1%201h4l2.68%2013.39a2%202%200%200%200%202%201.61h9.72a2%202%200%200%200%202-1.61L23%206H6'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: 20px 20px !important;
box-shadow: 0 2px 6px rgba(80, 170, 60, 0.25);
transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.product .icon_cart_rollover a:hover {
background-position: center center !important; /* geen sprite-verschuiving op hover */
filter: brightness(1.07);
box-shadow: 0 4px 12px rgba(80, 170, 60, 0.32);
}
/* ---------------------------------------------------------------------
4. CATEGORIE-SIDEBAR
Meer lucht en duidelijker klikbare links met grotere tap-targets.
--------------------------------------------------------------------- */
#columnLeft .box-heading,
#columnLeft h3 {
letter-spacing: 0.3px;
}
#columnLeft a {
display: block;
padding: 7px 8px;
border-radius: 6px;
line-height: 1.35;
transition: background 0.12s ease, color 0.12s ease;
}
#columnLeft a:hover {
background: #eef4fb;
color: #015699;
}
/* ---------------------------------------------------------------------
5. ALGEMENE LAYOUT / WITRUIMTE
--------------------------------------------------------------------- */
.default_page .et-content-bg,
.product_info_page .et-content-bg,
.main_page .et-content-bg {
padding-top: 14px;
}
/* Topbalk met USP's rustiger */
.infotext {
background-color: #f3f6fa;
color: #2b2f36;
border-bottom: 1px solid #e7ebf0;
font-size: 13px;
padding: 8px 0;
}
/* ---------------------------------------------------------------------
6. VEROUDERDE ELEMENTEN OPRUIMEN
Het GeoTrust-zegel oogt gedateerd; verbergen (HTTPS-slot volstaat).
--------------------------------------------------------------------- */
.geotrustDiv,
.geotrust,
img[src*="geotrust"] {
display: none !important;
}
/* Grijs kader van de grid-wrapper rond elke kaart weghalen -
de moderne witte kaart (.product) is de enige omlijsting die we willen. */
.product_wrapper {
border: none !important;
padding: 0 !important;
}
/* ---------------------------------------------------------------------
6b. LISTING-KOP OPSCHONEN
De telregel ("Artikel 1 tot ... / Pagina(s) gevonden") en de
"Sorteer artikelen volgens"-balk verbergen. Per categorie is het
aantal artikelen goed te overzien, dus dit voegt weinig toe.
(De echte paginanavigatie onderaan blijft staan.)
--------------------------------------------------------------------- */
#bodyContent .contConteiner_listing > div:first-child,
#bodyContent .infoBoxContainer > .infoBoxHeading1 {
display: none !important;
}
/* ---------------------------------------------------------------------
7. REVIEWS ZICHTBAARDER
--------------------------------------------------------------------- */
.reviews_wrapper {
background: #fbfcfe;
border-radius: 10px;
padding: 8px 12px;
}
/* ---------------------------------------------------------------------
8. MOBIEL (<= 768px)
Grotere tap-targets, kaarten vol-breed, rustiger spacing.
--------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
/* Productkaarten gecentreerd i.p.v. links (waren float:left) */
#bodyContent .infoBoxContainer {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
}
#bodyContent .infoBoxContainer .product_wrapper {
float: none !important;
}
.product {
min-height: 0;
margin: 8px 0;
}
.product .img_border {
min-height: 180px;
}
.product .product-image-wrapper img,
.product .product_img img {
max-height: 180px;
}
/* Knoppen volle breedte en makkelijk te raken */
.buttonAction,
a.button,
button.button,
input.button {
display: block;
width: 100%;
text-align: center;
padding: 13px 16px !important;
font-size: 16px !important;
}
/* Categorie-links: compacte tekst, strak links uitgelijnd met de
knoppen (waren 10px extra ingesprongen). */
#columnLeft a {
padding: 8px 10px 8px 2px;
font-size: 13px;
}
/* Kop "Categorieën" is overbodig in het menu -> weg.
(De kop "Informatie" blijft als scheiding staan.) */
#columnLeft .infoBoxCategory .infoBoxHeading {
display: none !important;
}
/* Overige kopjes (Informatie) niet overdreven groot */
#columnLeft .infoBoxHeading {
font-size: 16px !important;
padding-left: 2px !important;
}
.infotext {
font-size: 12px;
}
}
/* Extra klein (<= 480px): productnaam/-prijs compacter */
@media only screen and (max-width: 480px) {
.product .product-name a { font-size: 15px; }
.product .product-price { font-size: 17px; }
}
/* ---------------------------------------------------------------------
9. MOBIEL MENU - hamburger + slide-in paneel
Op desktop verborgen; op mobiel wordt #columnLeft een inschuifpaneel.
De knop/overlay/sluitknop worden door modernize.js toegevoegd.
--------------------------------------------------------------------- */
.mnav-toggle,
.mnav-overlay,
.mnav-close,
.mnav-quicklinks {
display: none; /* desktop: niets van het mobiele menu tonen */
}
@media only screen and (max-width: 768px) {
/* Zwevende hamburgerknop, altijd zichtbaar (fixed) linksboven */
.mnav-toggle {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 10px;
left: 10px;
z-index: 1002;
width: 46px;
height: 46px;
padding: 0;
border: none;
border-radius: 10px;
background: #015699;
color: #ffffff;
font-size: 24px;
line-height: 1;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
.mnav-toggle:active { transform: scale(0.96); }
/* #columnLeft wordt het inschuifpaneel */
#columnLeft {
position: fixed !important;
top: 0;
left: 0;
height: 100% !important;
width: 84% !important;
max-width: 320px !important;
margin: 0 !important;
padding: 56px 16px 24px !important;
background: #ffffff !important;
z-index: 1001 !important;
overflow-y: auto !important;
float: none !important;
transform: translateX(-100%);
transition: transform 0.28s ease;
box-shadow: 2px 0 18px rgba(0, 0, 0, 0.25);
-webkit-overflow-scrolling: touch;
}
body.mnav-open #columnLeft {
transform: translateX(0);
}
/* Donkere overlay achter het paneel */
.mnav-overlay {
display: block;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
visibility: hidden;
transition: opacity 0.28s ease, visibility 0.28s ease;
z-index: 1000;
}
body.mnav-open .mnav-overlay {
opacity: 1;
visibility: visible;
}
/* Snelkoppelingen bovenin het menu: Home + Winkelwagen */
.mnav-quicklinks {
display: flex;
gap: 10px;
margin: 0 0 16px;
}
/* #columnLeft-prefix zodat deze regels de themaregel "#columnLeft a"
(display:block) overschrijven -> knop wordt echte flex, icoon en
tekst netjes op één lijn gecentreerd. */
#columnLeft .mnav-quicklinks .mnav-btn {
flex: 1;
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 8px;
padding: 11px 8px !important;
border-radius: 8px;
border: 1px solid #d3dbe6;
background: #f3f6fa;
color: #1f2733;
font-size: 14px !important;
font-weight: 600;
line-height: 1;
text-decoration: none;
}
#columnLeft .mnav-quicklinks .mnav-btn svg {
width: 18px;
height: 18px;
flex: 0 0 auto;
display: block;
}
#columnLeft .mnav-quicklinks .mnav-btn span {
display: inline-block;
line-height: 1;
}
#columnLeft .mnav-quicklinks .mnav-btn-cart {
background: #62c247;
border-color: #62c247;
color: #ffffff;
}
/* Sluitknop (x) bovenin het paneel */
.mnav-close {
display: block;
position: absolute;
top: 8px;
right: 12px;
z-index: 2;
width: 40px;
height: 40px;
border: none;
background: transparent;
color: #333333;
font-size: 30px;
line-height: 1;
cursor: pointer;
}
/* Achtergrond niet mee scrollen als het menu open is */
body.mnav-open {
overflow: hidden;
}
}
/* ---------------------------------------------------------------------
10. MOBIEL HEADER OPSCHONEN
De bovenkant oogde druk: een banner van 1200px (niet responsive),
een zoekvak van 380px, en de USP-balk die met de hamburger botste.
--------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
/* Banner meeschalen met het scherm i.p.v. vast 1200px breed.
De negatieve marge (desktop-truc) uitzetten, anders ontstaat er
een witte balk over de banner. */
#banner {
text-align: center;
overflow: hidden;
margin-top: 0 !important;
height: auto !important; /* stond vast op 295px -> gaf grote witruimte */
}
#banner img {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
display: block;
}
.nav-container {
margin-top: 0 !important;
}
/* Zoekbalk op DEZELFDE regel als winkelwagen/afrekenen.
#header_blocks bevat de winkelwagenrij en de zoekrij; we zetten
ze naast elkaar: zoekbalk links (vult de ruimte), winkelwagen rechts. */
#header_blocks {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important; /* zoekbalk + knoppen op ÉÉN regel houden */
align-items: center !important;
gap: 10px;
width: 100% !important;
/* Desktop-trucjes uitzetten die op mobiel een witte balk gaven */
margin-top: 0 !important;
height: auto !important;
/* Lucht tussen de USP-balk en de zoekregel - ongeveer gehalveerd */
padding-top: 2px !important;
padding-bottom: 4px !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
}
.header-searchrow {
order: 1;
flex: 1 1 0 !important; /* basis 0: krimpt netjes mee i.p.v. te breed worden */
min-width: 0 !important;
width: auto !important;
margin: 0 !important;
}
.header-toprow {
order: 2;
flex: 0 0 auto;
width: auto !important;
margin: 0 !important;
}
.header-searchrow .header-right,
.header_search,
.header_search .search_field {
width: 100% !important;
float: none !important;
}
.header_search .search_field input,
.header_search .search_field input[type="search"] {
width: 100% !important;
box-sizing: border-box;
}
/* (Het eerdere "zoekbalk groeit/overlayt bij focus"-effect is bewust
verwijderd: het zorgde ervoor dat de knoppen versprongen bij het
aanklikken van de zoekbalk. Het zoekveld heeft nu een vaste, ruime
breedte op de regel en blijft staan waar het staat.) */
/* USP-balk: 2 compacte kolommen die tegen elkaar aan staan, met wat
lucht aan de rechterkant zodat niets tegen de rand plakt.
Links ruimte vrij voor de zwevende hamburger. */
.usp-bar {
padding: 3px 14px 3px 56px !important; /* USP's iets omhoog t.o.v. 8px; hamburger ongemoeid */
}
.usp-bar__inner {
display: grid !important;
grid-template-columns: auto auto !important;
justify-content: start !important;
column-gap: 14px !important;
row-gap: 7px !important;
}
.usp-item {
font-size: 12px !important;
line-height: 1.25;
gap: 6px;
}
.usp-icon svg {
width: 17px !important;
height: 17px !important;
}
/* Winkelwagen-/afrekenrij compact op de gedeelde regel,
iets omlaag zodat 'ie mooi op lijn staat met de zoekbalk. */
.header-toprow .header-right {
display: flex !important;
justify-content: flex-end;
align-items: center;
gap: 8px;
width: auto !important;
float: none !important;
}
/* "€ 0,00"-totaal weglaten op mobiel; scheelt ruimte zodat
winkelwagen + Afrekenen + Inloggen samen op de regel passen. */
.header-toprow .shopping_cart .open,
.header-toprow .shopping_cart .price {
display: none !important;
}
.header-toprow .cart_link {
font-size: 12.5px !important;
margin-left: 8px !important;
white-space: nowrap;
}
.header-toprow .shopping_cart_b,
.header-toprow .cart_wrapper,
.header-toprow .cart_wrapper .clearfix {
white-space: nowrap;
}
/* Vaste hoogte (92px thema-regel) uitzetten die de witruimte gaf */
.header-toprow,
.header-toprow .header-right,
.header-toprow .shopping_cart,
.header-toprow .shopping_cart_b,
.header-toprow .cart_wrapper,
.header-toprow .cart_wrapper .clearfix {
height: auto !important;
min-height: 0 !important;
}
/* "Afrekenen" weg op mobiel: klik op de winkelwagen volstaat */
.header-toprow a.cart_link[href*="checkout"] {
display: none !important;
}
/* "Inloggen" / "Mijn account" als nette knop */
.header-toprow a.cart_link[href*="login"],
.header-toprow a.cart_link[href*="account"] {
display: inline-block;
background: #015699;
color: #ffffff !important;
padding: 8px 14px !important;
border-radius: 8px;
font-size: 12.5px !important;
font-weight: 600;
line-height: 1;
text-decoration: none !important;
white-space: nowrap;
box-shadow: 0 2px 6px rgba(1, 86, 153, 0.25);
}
.header-toprow a.cart_link[href*="login"]:hover,
.header-toprow a.cart_link[href*="account"]:hover {
filter: brightness(1.08);
}
/* Zoekbalk, winkelwagen en Inloggen-knop op gelijke hoogte (40px)
en netjes verticaal gecentreerd op één lijn. */
.header_search .search_field {
display: flex !important;
align-items: center !important;
height: 40px !important;
box-sizing: border-box;
}
.header_search .search_field input,
.header_search .search_field input[type="search"] {
height: 40px !important;
box-sizing: border-box;
}
.header-toprow .header-right,
.header-toprow .shopping_cart,
.header-toprow .shopping_cart_b,
.header-toprow .cart_wrapper,
.header-toprow .cart_wrapper .clearfix {
display: flex !important;
align-items: center !important;
}
/* Winkelwagen-knop: ronde 40x40 groene knop met schoon, gecentreerd
wagentje-icoon (zelfde stijl als op de productkaarten). */
.header-toprow .img_cart {
position: relative; /* zodat de link de hele knop kan vullen */
width: 40px !important;
height: 40px !important;
margin: 0 !important;
border-radius: 8px !important;
background-color: #62c247 !important;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='9'%20cy='21'%20r='1'/%3E%3Ccircle%20cx='20'%20cy='21'%20r='1'/%3E%3Cpath%20d='M1%201h4l2.68%2013.39a2%202%200%200%200%202%201.61h9.72a2%202%200%200%200%202-1.61L23%206H6'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: 22px 22px !important;
box-shadow: 0 2px 6px rgba(80, 170, 60, 0.25);
}
.header-toprow .img_cart a {
display: block;
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
background: none !important;
}
/* Vergrootglas moderniseren: emoji weg, schoon SVG-zoekicoon */
.header_search .search_field button {
font-size: 0 !important;
width: 34px !important;
height: 34px !important;
border: none !important;
border-radius: 8px !important;
cursor: pointer;
background-color: transparent !important;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23555555'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cline%20x1='21'%20y1='21'%20x2='16.65'%20y2='16.65'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: 18px 18px !important;
}
.header-toprow a.cart_link[href*="login"],
.header-toprow a.cart_link[href*="account"] {
height: 40px !important;
display: inline-flex !important;
align-items: center;
padding: 0 14px !important;
margin-right: 10px !important; /* iets van de rechterrand af */
}
/* Header-hoogte hard platslaan zodat er geen witruimte onder ontstaat */
#header,
#header .bannerContainer,
#header .bannerContainer > .container,
.header-searchrow,
.header-searchrow .header-right {
height: auto !important;
min-height: 0 !important;
}
/* 38px lege ruimte tussen header en banner wegnemen: alle onder-/boven-
marges en paddings in de header->banner-overgang op 0. */
#header,
#header .bannerContainer,
#header .bannerContainer > .container,
#header_blocks,
.usp-bar {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
#banner {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
}
/* Lijntje boven de zoekbalk/knoppen (border-bottom van de USP-balk) weg */
.usp-bar {
border-bottom: none !important;
}
/* Zoekbalk staat exact 3px lager dan de knoppen (gemeten op mobiel:
knoppen top 45, zoekbalk top 48) -> 3px omhoog voor perfecte lijn. */
.header-searchrow {
position: relative;
top: -3px;
}
}
/* ---------------------------------------------------------------------
11. HOMEPAGE - uitgelichte items (ALLEEN MOBIEL)
Op desktop blijft de originele strip staan; alleen op mobiel maken we
er een net raster van: 3 per rij, gelijke hoogte, titel HARD op 2
regels afgekapt en de prijs altijd zichtbaar eronder.
(Titel en prijs zijn in homepage_items.php in aparte elementen gezet.)
--------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
.HomepageItems {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: stretch !important;
gap: 16px 10px;
}
.HomepageItems .item {
float: none !important;
width: 30% !important;
min-width: 96px;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
}
.HomepageItems .item a {
display: flex !important;
flex-direction: column !important;
align-items: center;
width: 100%;
text-align: center;
text-decoration: none;
}
/* themaregel ".item div { min-height:110px }" overschrijven met !important */
.HomepageItems .item .hpi-image {
height: 100px !important;
min-height: 0 !important;
display: flex !important;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
.HomepageItems .item .hpi-image img {
height: auto !important; /* themaregel ".item img { height:110px }" uit */
max-height: 95px !important;
width: auto !important;
max-width: 100% !important;
object-fit: contain;
}
.HomepageItems .hpi-title {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important; /* titel max. 2 regels */
-webkit-box-orient: vertical !important;
overflow: hidden !important;
line-height: 1.3 !important;
height: 2.6em !important; /* vaste 2 regels -> hard afkappen */
font-size: 13px !important;
font-weight: 600;
color: #1f2733;
}
.HomepageItems .hpi-price {
display: block !important;
margin-top: auto; /* prijs altijd onderaan */
padding-top: 6px;
font-size: 15px;
font-weight: 700;
color: #1f2733;
}
}
/* Productpagina: columnLeft alleen voor mobiel menu */
@media only screen and (min-width: 769px) {
#columnLeft.mnav-product-source { display: none !important; }
}
/* ---------------------------------------------------------------------
12. USP's iets omhoog — hamburger ongewijzigd (46x46, top/left 10px)
--------------------------------------------------------------------- */
#header,
#header .bannerContainer,
#header .bannerContainer > .container {
margin-top: 0 !important;
padding-top: 0 !important;
}
.usp-bar {
margin-top: 0 !important;
}
.usp-bar__inner {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
@media only screen and (max-width: 768px) {
#header .bannerContainer > .container,
#header .container {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* hamburger: expliciet origineel herstellen (geen kleinere/hogere knop) */
.mnav-toggle {
top: 10px !important;
left: 10px !important;
width: 46px !important;
height: 46px !important;
}
/* USP-blok verticaal centreren t.o.v. de hamburger.
Hamburger: top 10px + hoogte 46px -> midden op y=33px.
USP-balk begint op y=0; min-height 66 + flex-center zet het blok op y=33. */
.usp-bar {
display: flex !important;
align-items: center !important;
min-height: 66px !important;
padding: 0 14px 0 56px !important;
}
.usp-bar__inner {
row-gap: 4px !important; /* was 7px; iets compacter, niet te krap */
align-items: center !important;
width: 100%;
}
}
/* ---------------------------------------------------------------------
13. WINKELMANDJE-PAGINA - strak in dezelfde stijl
De AFREKENEN-knop was een groot groen blok: de .buttonAction-span
(alleen op deze pagina) had een groene achtergrond + 50px onder-padding.
We maken er een nette, normale groene knop van, net als elders.
--------------------------------------------------------------------- */
.buttonAction {
background: none !important;
background-image: none !important;
box-shadow: none !important;
padding: 0 !important;
height: auto !important;
width: auto !important;
display: inline-block !important;
text-align: center;
}
/* De echte afreken-link als nette groene knop */
.unishop_submit,
.buttonAction .unishop_submit {
display: inline-block !important;
background: #62c247 !important;
color: #ffffff !important;
border: none !important;
border-radius: 8px !important;
padding: 13px 30px !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.1 !important;
text-decoration: none !important;
text-align: center !important;
width: auto !important;
height: auto !important;
box-shadow: 0 2px 6px rgba(80, 170, 60, 0.25);
}
.unishop_submit:hover,
.buttonAction .unishop_submit:hover { filter: brightness(1.06); }
/* Bijwerken (winkelmandje) + In winkelmandje (product): consistente knop */
.unishop_button {
background: #62c247 !important;
color: #ffffff !important;
border: none !important;
border-radius: 8px !important;
padding: 9px 16px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
box-shadow: 0 2px 6px rgba(80, 170, 60, 0.25);
cursor: pointer;
}
.unishop_button:hover { filter: brightness(1.06); }
/* Aantal-invoerveld netjes */
input[name^="cart_quantity"] {
height: 36px !important;
padding: 4px 8px !important;
border: 1px solid #ccd3dc !important;
border-radius: 6px !important;
box-sizing: border-box !important;
text-align: center;
font-size: 14px;
width: 60px !important;
}
/* Op mobiel de AFREKENEN-knop lekker breed en makkelijk te tikken */
@media only screen and (max-width: 768px) {
.buttonAction {
display: block !important;
}
.buttonAction .unishop_submit,
.unishop_submit {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 15px 16px !important;
}
}
/* Op de winkelmandje-pagina zelf is de mini-winkelwagen in de zijbalk
dubbelop -> verbergen. We herkennen die pagina aan het aantal-veld
(cart_quantity), dat alleen daar voorkomt. */
body:has(input[name^="cart_quantity"]) #columnRight .infoBoxCart {
display: none !important;
}
/* ---------------------------------------------------------------------
14. TRANSPORTEUR-ICONEN ("Wij verzenden via") compact in een rij,
net zoals de betaalmethoden. De 3 logo's staan in één .sendMethods-blok
en waren groot gestapeld; nu een net raster met kleine logo's.
--------------------------------------------------------------------- */
.sendMethods {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px 14px !important;
width: auto !important;
height: auto !important;
}
.sendMethods img {
width: auto !important;
height: auto !important;
max-width: 78px !important;
max-height: 46px !important;
margin: 0 !important;
float: none !important;
}
.sendMethods br {
display: none !important;
}
/* Betaal-logo's ("Wij accepteren") op dezelfde grootte als de transporteurs:
compact raster met kleine logo's i.p.v. de grotere 2-koloms opzet. */
.cardAcceptance {
float: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin: 0 12px 10px 0 !important;
vertical-align: middle;
}
.cardAcceptance img {
width: auto !important;
height: auto !important;
max-width: 78px !important;
max-height: 46px !important;
}
/* ---------------------------------------------------------------------
15. CHECKOUT (verzend- en betaalpagina) strak/modern
Verzend-/betaalopties (tabelrijen .moduleRow / .moduleRowSelected):
nette rijen, lichte groene markering voor de gekozen optie i.p.v. de
donkergrijze balk, grotere groene radioknoppen, net adresblok.
--------------------------------------------------------------------- */
#bodyContent .moduleRow td,
#bodyContent .moduleRowSelected td,
#bodyContent .moduleRowOver td {
padding: 13px 12px !important;
border-bottom: 1px solid #eef1f5 !important;
vertical-align: middle !important;
}
#bodyContent .moduleRowSelected {
background: #eaf7e3 !important;
}
#bodyContent .moduleRowSelected td {
color: #1f2733 !important;
/* geen font-weight:600: dat maakte de tekst breder -> wrapte naar 2 regels
-> layout versprong bij (de)selecteren. De groene kleur markeert genoeg. */
font-weight: normal !important;
}
#bodyContent .moduleRowOver {
background: #eef4fb !important;
}
/* Tekst leesbaar houden bij hover (thema maakte 'm wit -> verdween op
de lichte achtergrond). */
#bodyContent .moduleRowOver,
#bodyContent .moduleRowOver td,
#bodyContent .moduleRowOver a,
#bodyContent .moduleRowOver span {
color: #1f2733 !important;
}
#bodyContent input[type="radio"] {
width: 18px !important;
height: 18px !important;
vertical-align: middle;
accent-color: #62c247;
}
.sendAdressBlocks {
background: #fbfcfe !important;
border: 1px solid #e7ebf0 !important;
border-radius: 10px !important;
padding: 14px 16px !important;
line-height: 1.5 !important;
}
/* Betaal-/verzend-logo's netjes binnen de kolom houden (geen overloop) en
proportioneel schalen. Voorkomt dat brede logo's buiten beeld vallen op
smalle (mobiele) schermen. */
#bodyContent tr td img {
max-width: 100% !important;
height: auto !important;
}
/* Alle betaalmethode-logo's op dezelfde hoogte van 20px (consistent).
Alleen op de betaalpagina (herkend aan de .mollie-logo op die pagina),
zodat andere afbeeldingen (bijv. productfoto's) ongemoeid blijven. */
body:has(.mollie-logo) #bodyContent td img {
height: 25px !important;
width: auto !important;
max-width: 100% !important;
}
#bodyContent .mollie-logo {
display: inline-block;
margin-bottom: 6px;
}
/* PakjeGemak: de keuzelijst (servicepoint-dropdown) staat in de rij direct
ná de gekozen groene optie. Die rij dezelfde groene achtergrond geven en
de scheidingslijn ertussen weghalen, zodat het één groen vlak wordt.
(Alleen wanneer die optie ook echt gekozen is: .moduleRowSelected + tr) */
/* Dropdown-rij ALTIJD zelfde afmetingen (los van of PakjeGemak gekozen is),
zodat de layout niet verspringt bij (de)selecteren. */
#bodyContent tr:has(select[name="servicepoint"]) td {
padding: 0 12px 12px !important;
border-bottom: 1px solid #eef1f5 !important;
}
#bodyContent tr:has(select[name="servicepoint"]) select {
border: 1px solid #cfd8e0 !important;
border-radius: 6px !important;
padding: 7px 8px !important;
background: #ffffff !important;
}
/* De PakjeGemak-optierij: altijd dezelfde padding (zonder klasse kreeg 'ie
maar 2px -> 20px sprong bij (de)selecteren) en geen lijn naar de dropdown. */
#bodyContent tr:has(+ tr select[name="servicepoint"]) td {
padding: 13px 12px !important;
border-bottom: none !important;
vertical-align: middle !important;
}
/* Alleen de KLEUR wisselt mee als PakjeGemak gekozen is (afmetingen blijven gelijk). */
#bodyContent .moduleRowSelected + tr:has(select[name="servicepoint"]) {
background: #eaf7e3 !important;
}
#bodyContent .moduleRowSelected + tr:has(select[name="servicepoint"]) select {
border-color: #bcd9ac !important;
}
/* "Adres veranderen"-knop bovenaan, op gelijke hoogte met de eerste
adresregel (had margin-top:40px die 'm omlaag duwde). */
.sendAdressBlocks .unishop_submit,
.sendAdressBlock .unishop_submit {
margin-top: 0 !important;
}
/* Zijbalk-blokken Winkelmandje + Bestelgeschiedenis als nette kaarten
met goed uitgelijnde lijst-items. */
#columnRight .infoBoxCart,
#columnRight .infoBoxOrderHistory {
background: #fbfcfe !important;
border: 1px solid #eef1f5 !important;
border-radius: 10px !important;
padding: 8px 14px 10px !important;
margin-bottom: 18px !important;
}
#columnRight .infoBoxCart .infoBoxHeading,
#columnRight .infoBoxOrderHistory .infoBoxHeading {
margin-bottom: 6px !important;
}
#columnRight .infoBoxCart td,
#columnRight .infoBoxOrderHistory td {
padding: 0 !important;
vertical-align: middle !important; /* aantal ("2 x") op lijn met de productnaam */
}
#columnRight .infoBoxCart a,
#columnRight .infoBoxOrderHistory a {
display: block !important;
padding: 6px 0 !important;
text-decoration: none !important;
color: #2b2f36 !important;
font-size: 13px !important;
line-height: 1.35 !important;
border-bottom: 1px solid #eef1f5 !important;
}
#columnRight .infoBoxCart tr:last-child a,
#columnRight .infoBoxOrderHistory tr:last-child a {
border-bottom: none !important;
}
#columnRight .infoBoxCart a:hover,
#columnRight .infoBoxOrderHistory a:hover {
color: #015699 !important;
}
/* Desktop-header opschonen:
- USP's + winkelwagen/afrekenen op ÉÉN compacte regel (USP's links,
winkelwagen rechts) i.p.v. een aparte USP-rij met lege witruimte
eronder -> scheelt hoogte, banner sluit direct aan.
- De zoekbalk BLIJFT over de banner zweven (absoluut gepositioneerd),
precies zoals in het originele thema.
- Het witte kadertje (#header_blocks) met donkere rand weg. */
@media only screen and (min-width: 769px) {
#header .bannerContainer > .container {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
min-height: 0 !important;
}
.usp-bar {
position: static !important;
flex: 1 1 auto !important;
width: auto !important;
order: 1 !important;
}
.usp-bar__inner {
width: auto !important;
justify-content: flex-start !important;
margin: 0 !important;
}
#logo {
display: none !important;
}
#header_blocks {
order: 2 !important;
flex: 0 0 auto !important;
margin-top: 0 !important;
height: auto !important;
width: auto !important;
position: static !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* vaste 92px-hoogte van de winkelwagenrij platslaan (padding-top:51px
op .shopping_cart was de oorzaak van de witruimte) */
.header-toprow {
height: auto !important;
min-height: 0 !important;
}
.header-toprow .shopping_cart {
padding-top: 0 !important;
height: auto !important;
min-height: 0 !important;
}
.header-toprow .header-right,
.header-toprow .shopping_cart_b,
.header-toprow .cart_wrapper,
.header-toprow .cart_wrapper .clearfix {
height: auto !important;
min-height: 0 !important;
}
/* bedrag/afrekenen/account verticaal uitlijnen met de USP-tekst */
.header-toprow .shopping_cart {
position: relative !important;
top: 5px !important;
}
.header-toprow .geotrustDiv {
display: none !important;
}
/* zoekbalk blijft over de banner zweven, rechtsboven */
.header-searchrow {
position: absolute !important;
top: 66px !important;
right: 0 !important;
left: auto !important;
width: 380px !important;
height: auto !important;
min-height: 0 !important;
z-index: 20 !important;
}
#banner {
margin-top: 0 !important;
}
}
/* Bedankt-/success-pagina: het productnotificatie-vakje had donkere tekst
op een donkere achtergrond (onleesbaar). Nu een licht, leesbaar vakje. */
.productsNotifications {
background: #fbfcfe !important;
color: #2b2f36 !important;
border: 1px solid #eef1f5 !important;
border-radius: 8px !important;
padding: 10px 12px !important;
display: flex;
align-items: center;
gap: 8px;
}
.productsNotifications input[type="checkbox"] {
margin: 0 !important;
width: 16px;
height: 16px;
flex: 0 0 auto;
}
/* ---------------------------------------------------------------------
16. CHECKOUT-BEVESTIGING (checkout_confirmation) strak/modern
--------------------------------------------------------------------- */
/* Rustige "(Wijzigen)"-links i.p.v. fel groen */
.orderEdit,
.orderEdit a {
color: #8a94a3 !important;
font-size: 12px !important;
font-weight: normal !important;
text-decoration: none !important;
}
.orderEdit:hover,
.orderEdit a:hover {
color: #015699 !important;
text-decoration: underline !important;
}
/* Alleen op de bevestigingspagina (herkend aan .orderEdit): secties met
lucht en een nette scheidingslijn onder de koppen. */
body:has(.orderEdit) #bodyContent h2 {
margin-top: 22px !important;
margin-bottom: 12px !important;
padding-bottom: 8px !important;
border-bottom: 1px solid #eef1f5;
}
body:has(.orderEdit) #bodyContent td.main {
line-height: 1.5;
}
/* Mobiel: de tweekoloms-opzet (adres | producten/totalen) onder elkaar
stapelen. Alleen de buitenste cellen (die een geneste tabel bevatten)
worden vol-breed; de geneste totalen/productlijst houden hun kolommen. */
@media only screen and (max-width: 768px) {
body:has(.orderEdit) #bodyContent td:has(> table) {
display: block !important;
width: 100% !important;
box-sizing: border-box;
}
}
/* =====================================================================
Sectie 17 - Beoordelingen/reviews-pagina (reviews.php)
---------------------------------------------------------------------
Strakke, moderne review-kaarten met accentrand, duidelijke auteur/
datum/productlink, grotere sterren en knop-styling voor 'recensie
toevoegen' + paginering. Alles gescoped op .reviews_page, dus enkel
deze pagina wordt geraakt. Werkt op desktop en mobiel (breedte-
onafhankelijk; extra mobiele polish onderaan).
Terugdraaien = dit blok verwijderen.
===================================================================== */
body:has(.reviews_page) #bodyContent > h1 {
margin-bottom: 14px !important;
}
/* 'Voeg je recensie toe' -> groene knop */
body:has(.reviews_page) a.reviews_link {
display: inline-block !important;
background: linear-gradient(180deg, #6fd155 0%, #57b83f 100%) !important;
color: #ffffff !important;
padding: 10px 20px !important;
border-radius: 8px !important;
font-weight: 600 !important;
font-size: 14px !important;
text-decoration: none !important;
letter-spacing: .2px !important;
box-shadow: 0 2px 6px rgba(87, 184, 63, .35) !important;
transition: transform .12s, box-shadow .12s !important;
}
body:has(.reviews_page) a.reviews_link:hover {
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(87, 184, 63, .45) !important;
}
body:has(.reviews_page) #bodyContent > div:has(> a.reviews_link) {
margin-bottom: 18px !important;
}
/* Samenvattingsbalk: aantal beoordelingen + paginering */
.reviews_page .contentText:has(.totalreviews) {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 10px !important;
background: #f3f6fa !important;
border: 1px solid #e7ebf0 !important;
border-radius: 10px !important;
padding: 10px 16px !important;
margin-bottom: 18px !important;
}
.reviews_page .totalreviews {
font-size: 14px !important;
color: #5b6674 !important;
font-weight: 600 !important;
}
.reviews_page .reviewpages {
font-size: 14px !important;
color: #5b6674 !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-wrap: wrap !important;
}
.reviews_page .reviewpages strong {
background: #57b83f !important;
color: #ffffff !important;
padding: 3px 10px !important;
border-radius: 6px !important;
font-weight: 600 !important;
}
.reviews_page .reviewpages a {
display: inline-block !important;
padding: 3px 10px !important;
border: 1px solid #d3dbe6 !important;
border-radius: 6px !important;
background: #ffffff !important;
color: #33475b !important;
text-decoration: none !important;
transition: .12s !important;
}
.reviews_page .reviewpages a:hover {
border-color: #57b83f !important;
color: #57b83f !important;
}
/* Review-kaarten */
.reviews_page .reviews_wrapper {
background: #ffffff !important;
border: 1px solid #e7ebf0 !important;
border-left: 3px solid #62c247 !important;
border-radius: 12px !important;
padding: 16px 18px !important;
margin: 0 0 14px 0 !important;
box-shadow: 0 1px 3px rgba(20, 30, 50, .05) !important;
transition: box-shadow .15s, transform .15s !important;
}
.reviews_page .reviews_wrapper:hover {
box-shadow: 0 6px 18px rgba(20, 30, 50, .10) !important;
transform: translateY(-1px) !important;
}
.reviews_page .product_img_wrapper {
display: none !important;
}
.reviews_page .product_info_wrapper {
width: 100% !important;
margin: 0 !important;
}
/* Auteur (vet, donker) + datum (gedempt) */
.reviews_page .reviews_author {
font-size: 13px !important;
color: #8a93a2 !important;
line-height: 1.5 !important;
margin-bottom: 8px !important;
}
.reviews_page .reviews_author span a {
color: #1f2733 !important;
font-weight: 700 !important;
text-decoration: none !important;
font-size: 15px !important;
}
/* De productlink is de directe onder .reviews_author -> accentgroen */
.reviews_page .reviews_author > a {
color: #57b83f !important;
font-weight: 700 !important;
font-size: 13.5px !important;
text-decoration: none !important;
}
.reviews_page .reviews_author a:hover {
text-decoration: underline !important;
}
/* Reviewtekst iets meer lucht */
.reviews_page .product_info_wrapper > div:first-child {
margin-bottom: 6px !important;
}
/* Sterren groter en netjes uitgelijnd */
.reviews_page .reviews_wrapper i {
display: inline-block !important;
margin-top: 6px !important;
}
.reviews_page .reviews_wrapper i img {
height: 16px !important;
width: auto !important;
vertical-align: middle !important;
margin-left: 4px !important;
}
/* Mobiele polish */
@media only screen and (max-width: 768px) {
.reviews_page .reviews_wrapper {
padding: 14px 14px !important;
}
.reviews_page .contentText:has(.totalreviews) {
flex-direction: column !important;
align-items: flex-start !important;
}
}
/* =====================================================================
Sectie 18 - Review-schrijfpagina (product_reviews_write.php)
---------------------------------------------------------------------
Het oude label-links/veld-rechts tabelformulier omgezet naar een
strakke, gestapelde kaart: nette labels boven de velden, een modern
tekstvak met focus-state, groene waarderingsbolletjes en consistente
knoppen. Werkt desktop + mobiel. Gescoped op .product_reviews_write_page.
Terugdraaien = dit blok verwijderen.
===================================================================== */
.product_reviews_write_page {
max-width: 660px !important;
}
/* Het thema zet