/* bof gijs@cyle.nl — TrendZ thema (één stylesheet, kleuren en letters per winkel via --tz-variabelen) */
:root {
  --tz-bg: #fff; --tz-ink: #1b1b1f; --tz-muted: #5c6070; --tz-surface: #fff; --tz-band: #f6f4f1; --tz-line: #e4e0da;
  --tz-brand: #14213d; --tz-on-brand: #fff; --tz-brand-muted: #c9d1e3; --tz-brand-2: #1e2e52;
  --tz-accent: #ff6b5e; --tz-on-accent: #14213d; --tz-font: 'Helvetica Neue', Arial, sans-serif; --tz-display: var(--tz-font);
  --tz-display-weight: 700; --tz-display-case: none; --tz-radius: 22px; --tz-btn-radius: 999px; --tz-max: 1200px;
}
html { -webkit-text-size-adjust: 100%; }
body.tz { margin: 0; background: var(--tz-bg); color: var(--tz-ink); font-family: var(--tz-font); font-size: 16px; line-height: 1.5; }
.tz h1, .tz h2, .tz h3, .tz h4, .tz h5 { font-family: var(--tz-display); font-weight: var(--tz-display-weight); text-transform: var(--tz-display-case); color: inherit; letter-spacing: -0.02em; line-height: 1.08; }
.tz, .tz *, .tz *::before, .tz *::after { box-sizing: border-box; }
.tz a { color: inherit; text-decoration: none; }
.tz a:hover, .tz a:focus { color: var(--tz-accent); text-decoration: none; }
.tz-wrap { max-width: var(--tz-max); margin: 0 auto; padding-left: 16px; padding-right: 16px; }
@media (min-width: 768px) { .tz-wrap { padding-left: 24px; padding-right: 24px; } }
.tz .container { max-width: var(--tz-max); width: auto; }

/* USP-balk */
.tz-usp { background: var(--tz-brand); color: var(--tz-on-brand); font-size: 14px; }
.tz-usp .tz-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 32px; padding-top: 9px; padding-bottom: 9px; }

/* header */
.tz-header { background: var(--tz-bg); border-bottom: 1px solid var(--tz-line); }
.tz-header-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-top: 16px; padding-bottom: 16px; }
.tz-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tz-ink); }
.tz-logo img { max-height: 56px; }
.tz-logo svg { flex: none; }
.tz-search { flex: 1 1 320px; max-width: 520px; }
.tz-search .input-group { width: 100%; }
.tz-search .form-control { height: 48px; border-radius: var(--tz-btn-radius) 0 0 var(--tz-btn-radius); border: 2px solid var(--tz-line); box-shadow: none; font-size: 16px; }
.tz-search .btn { height: 48px; border-radius: 0 var(--tz-btn-radius) var(--tz-btn-radius) 0; background: var(--tz-accent); border-color: var(--tz-accent); color: var(--tz-on-accent); }
.tz-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-weight: 500; }
.tz-nav > a { padding: 12px 14px; text-decoration: none; }
.tz-nav-main { font-weight: 700; }
.tz-cart #cart > .btn { background: var(--tz-brand); color: var(--tz-on-brand); border: 0; border-radius: var(--tz-btn-radius); height: 46px; padding: 0 20px; font-size: 15px; font-weight: 700; box-shadow: none; text-shadow: none; background-image: none; }
.tz-cart #cart { margin: 0; width: auto; }
.tz-cart #cart .dropdown-menu { min-width: 340px; border-radius: 14px; color: #1b1b1f; }
.tz-cart #cart .dropdown-menu a { color: #1b1b1f; }
.tz-menu { background: var(--tz-band); border-bottom: 1px solid var(--tz-line); }
.tz-menu #menu { background: transparent; border: 0; margin: 0; min-height: 0; }
.tz-menu #menu .nav > li > a { color: var(--tz-ink); text-shadow: none; font-weight: 600; padding: 13px 14px; }
.tz-menu #menu .nav > li > a:hover, .tz-menu #menu .nav > li.open > a { background: transparent; color: var(--tz-accent); }
.tz-menu #menu .btn-navbar { background: var(--tz-brand); border: 0; }
.tz-menu #menu #category { color: var(--tz-ink); text-shadow: none; }

/* knoppen */
.tz-cta, .tz-btn, .tz .btn-primary { display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; font-family: inherit; font-weight: 700; text-decoration: none; text-shadow: none; background-image: none; box-shadow: none; }
.tz-cta { min-height: 60px; padding: 0 36px; border-radius: var(--tz-btn-radius); background: var(--tz-accent); color: var(--tz-on-accent); font-size: 20px; }
.tz-cta:hover, .tz-cta:focus { filter: brightness(0.95); color: var(--tz-on-accent); }
.tz-cta[disabled] { opacity: .45; cursor: not-allowed; }
.tz-btn { min-height: 46px; padding: 0 18px; border-radius: var(--tz-btn-radius); background: var(--tz-brand); color: var(--tz-on-brand); font-size: 15px; width: 100%; }
.tz a.tz-btn, .tz-btn:hover, .tz-btn:focus { color: var(--tz-on-brand); }
.tz-btn:hover, .tz-btn:focus { filter: brightness(1.15); }
.tz a.tz-cta { color: var(--tz-on-accent); }
.tz .btn-primary { background: var(--tz-accent); color: var(--tz-on-accent); border-radius: var(--tz-btn-radius); }
.tz .btn-primary:hover, .tz .btn-primary:focus, .tz .btn-primary:active { background: var(--tz-accent); color: var(--tz-on-accent); filter: brightness(0.95); }
.tz .btn-default { border-radius: var(--tz-btn-radius); }

/* hero dagdeal */
.tz-hero { background: var(--tz-brand); color: var(--tz-on-brand); padding: 40px 0 56px; overflow: hidden; }
.tz-hero-in { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.tz-hero-media { flex: 1 1 440px; position: relative; background: #f6f4f1; border-radius: calc(var(--tz-radius) + 6px); overflow: visible; }
.tz-hero-media img { width: 100%; height: auto; border-radius: calc(var(--tz-radius) + 6px); display: block; }
.tz-badge { position: absolute; top: -14px; left: 24px; width: 108px; height: 108px; border-radius: 50%; background: var(--tz-accent); color: var(--tz-on-accent); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 28px; line-height: 1; transform: rotate(-10deg); }
.tz-badge small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; }
.tz-hero-body { flex: 1 1 400px; display: flex; flex-direction: column; gap: 18px; }
.tz-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tz-accent); }
.tz-hero h1 { margin: 0; font-size: clamp(32px, 5vw, 52px); }
.tz-hero h1 a { color: inherit; }
.tz-lead { margin: 0; font-size: 18px; color: var(--tz-brand-muted); }
.tz-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; }
.tz-price strong { font-family: var(--tz-display); font-size: clamp(44px, 7vw, 64px); line-height: 1; letter-spacing: -0.03em; }
.tz-price s { font-size: 20px; color: var(--tz-brand-muted); }
.tz-count-label { display: block; font-size: 14px; color: var(--tz-brand-muted); margin-bottom: 8px; }
.tz-count-boxes { display: flex; gap: 10px; }
.tz-count-boxes span { background: var(--tz-brand-2); border-radius: 16px; width: 88px; padding: 10px 0; text-align: center; }
.tz-count-boxes b { display: block; font-size: 36px; line-height: 1.1; color: var(--tz-accent); font-variant-numeric: tabular-nums; }
.tz-count-boxes small { font-size: 12px; color: var(--tz-brand-muted); }
.tz-stock { font-size: 15px; color: var(--tz-brand-muted); }
.tz-hero-empty { padding: 40px 0; }

.tz-usp-row { background: var(--tz-band); border-bottom: 1px solid var(--tz-line); }
.tz-usp-row .tz-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 40px; padding-top: 20px; padding-bottom: 20px; font-weight: 500; }
.tz-usp-row .fa { color: var(--tz-accent); margin-right: 6px; }

/* secties en kaarten */
.tz-band { background: var(--tz-band); }
.tz-section { padding-top: 56px; padding-bottom: 56px; }
.tz-section h2 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 38px); }
.tz-sub { margin: 0 0 28px; color: var(--tz-muted); }
.tz-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 24px; }
.tz-head h2 { margin: 0; }
.tz-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .tz-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tz-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .tz-grid-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tz-card { display: flex; flex-direction: column; gap: 10px; background: var(--tz-surface); border-radius: var(--tz-radius); padding: 14px; text-decoration: none; color: var(--tz-ink); }
.tz-card-img { position: relative; display: block; border-radius: calc(var(--tz-radius) - 6px); overflow: hidden; background: #eeebe6; aspect-ratio: 1 / 1; }
.tz-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tz-card-name { font-size: 17px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.tz-card-price { font-family: var(--tz-display); font-size: 24px; font-weight: 700; margin-top: auto; }
.tz-card-price s { font-family: var(--tz-font); font-size: 14px; font-weight: 400; color: var(--tz-muted); }
.tz-card-day, .tz-card-site-name { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tz-accent); }
.tz-badge-sm { position: absolute; top: 10px; left: 10px; background: var(--tz-accent); color: var(--tz-on-accent); font-weight: 800; font-size: 14px; padding: 4px 10px; border-radius: 999px; }
.tz-chip { display: inline-block; background: var(--tz-accent); color: var(--tz-on-accent); font-weight: 700; font-size: 14px; padding: 6px 14px; border-radius: 999px; }

/* outlet */
.tz-out-hero { display: grid; gap: 20px; padding-top: 24px; padding-bottom: 8px; }
@media (min-width: 900px) { .tz-out-hero { grid-template-columns: 2fr 1fr; } }
.tz-campaign { background: var(--tz-brand); color: var(--tz-on-brand); border-radius: var(--tz-radius); padding: 40px; min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 16px; }
.tz-campaign h1 { margin: 0; font-size: clamp(30px, 4.5vw, 52px); max-width: 620px; }
.tz-side { background: var(--tz-band); border-radius: var(--tz-radius); padding: 32px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.tz-side h2 { margin: 0; font-size: 28px; }
.tz-link { font-weight: 700; color: var(--tz-accent) !important; }
.tz-cat { display: flex; flex-direction: column; gap: 10px; text-decoration: none; font-weight: 700; }
.tz-cat img, .tz-cat-ph { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--tz-radius); background: var(--tz-surface); display: block; }

/* nieuwsbrief */
.tz-nb { background: var(--tz-accent); color: var(--tz-on-accent); border-radius: calc(var(--tz-radius) + 6px); padding: 40px; display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; }
.tz-nb-text { flex: 1 1 340px; }
.tz-nb-text h2 { margin: 0 0 8px; }
.tz-nb-text p { margin: 0; font-size: 18px; }
.tz-nb-form { flex: 1 1 380px; display: flex; flex-direction: column; gap: 8px; }
.tz-nb-form label { font-size: 14px; font-weight: 700; margin: 0; }
.tz-nb-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tz-nb-row input { flex: 1 1 220px; height: 54px; border: 0; border-radius: var(--tz-btn-radius); padding: 0 20px; font-size: 16px; color: #1b1b1f; background: #fff; }
.tz-nb-row button { height: 54px; padding: 0 26px; border: 0; border-radius: var(--tz-btn-radius); background: var(--tz-brand); color: var(--tz-on-brand); font-weight: 700; font-size: 16px; }
.tz-nb-msg { font-size: 14px; }
.tz-nb-msg.tz-err { font-weight: 700; }

/* footer */
.tz-footer { background: var(--tz-brand); color: var(--tz-on-brand); margin-top: 24px; }
.tz-footer-in { display: flex; flex-wrap: wrap; gap: 32px; padding-top: 48px; padding-bottom: 32px; }
.tz-fcol { flex: 1 1 220px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.tz-fcol strong { font-size: 16px; margin-bottom: 4px; }
.tz-fcol a { color: var(--tz-on-brand); opacity: .9; }
.tz-fcol a:hover { opacity: 1; color: var(--tz-accent); }
.tz-legal { padding-bottom: 28px; font-size: 13px; color: var(--tz-brand-muted); }

/* standaard OpenCart-pagina's in dezelfde stijl */
.tz #content { min-height: 400px; }
.tz .breadcrumb { background: transparent; border: 0; padding-left: 0; }
.tz .breadcrumb > li { text-shadow: none; }
.tz .breadcrumb > li:after { display: none; }
.tz .breadcrumb > li + li:before { content: "/\00a0"; color: var(--tz-muted); padding: 0 6px; }
.tz .product-thumb { border: 0; border-radius: var(--tz-radius); background: var(--tz-surface); overflow: hidden; }
.tz .product-thumb .caption { min-height: 0; }
.tz .product-thumb .price { color: var(--tz-ink); font-family: var(--tz-display); font-size: 20px; }
.tz .product-thumb .price-old { color: var(--tz-muted); }
.tz .product-thumb .button-group { border: 0; background: transparent; }
.tz .product-thumb .button-group button { background: var(--tz-brand); color: var(--tz-on-brand); font-weight: 700; border-radius: 0; }
.tz .form-control { border-radius: 12px; box-shadow: none; height: 44px; }
.tz textarea.form-control { height: auto; }
.tz .list-group a.active, .tz .list-group a.active:hover { background: var(--tz-brand); border-color: var(--tz-brand); color: var(--tz-on-brand); }
.tz .alert { border-radius: 14px; }
.tz .price-new { color: var(--tz-accent); }
.tz #product-product h1 { font-size: clamp(28px, 4vw, 40px); }

/* donkere winkels: formulieren en dropdowns leesbaar houden */
.tz-s2 .form-control, .tz-s5 .form-control { color: #1b1b1f; }
.tz-s2 .table, .tz-s5 .table { color: var(--tz-ink); }
.tz-s2 .table > tbody > tr > td, .tz-s5 .table > tbody > tr > td, .tz-s2 .table > thead > tr > td, .tz-s5 .table > thead > tr > td { border-color: var(--tz-line); }
.tz-s2 .well, .tz-s5 .well, .tz-s2 .panel, .tz-s5 .panel { background: var(--tz-surface); border-color: var(--tz-line); }

/* per winkel kleine accenten */
.tz-s2 .tz-nav, .tz-s2 .tz-eyebrow, .tz-s2 .tz-cta, .tz-s2 .tz-btn { text-transform: uppercase; letter-spacing: .05em; }
.tz-s2 .tz-hero { background: var(--tz-bg); }
.tz-s3 .tz-hero { background: var(--tz-bg); color: var(--tz-ink); }
.tz-s3 .tz-lead, .tz-s3 .tz-price s, .tz-s3 .tz-stock, .tz-s3 .tz-count-label, .tz-s3 .tz-count-boxes small { color: var(--tz-muted); }
.tz-s3 .tz-count-boxes span { background: #fff; }
.tz-s3 .tz-count-boxes b { color: var(--tz-ink); }
.tz-s3 .tz-hero-body { background: #fff; border-radius: 32px; padding: 32px; }
.tz-s4 .tz-hero-in { background: #fff; color: var(--tz-ink); border-radius: 30px; padding: 32px; }
.tz-s4 .tz-lead, .tz-s4 .tz-price s, .tz-s4 .tz-stock, .tz-s4 .tz-count-label, .tz-s4 .tz-count-boxes small { color: var(--tz-muted); }
.tz-s4 .tz-count-boxes span { background: #ede4f5; }
.tz-s4 .tz-count-boxes b { color: var(--tz-brand); }
.tz-s4 .tz-price strong { color: var(--tz-brand); }
.tz-s4 .tz-cta { background: var(--tz-brand); color: #fff; border-radius: 18px; }
.tz-s5 .tz-header { background: var(--tz-brand); }
.tz-s5 .tz-cta { transform: rotate(-1deg); }
/* eof gijs@cyle.nl */