/* Reference artwork is displayed with CSS windows. Original PNG is unchanged. */
.zz-art { display: inline-block; background-image: url("../images/reference-design.png"); background-repeat: no-repeat; vertical-align: middle; max-width: 100%; }
.zz-art-logo { width: 304px; aspect-ratio: 304 / 70; background-size: 402.9605263157895% 1834.2857142857142%; background-position: 4.125950054288817% 3.2948929159802307%; }
.zz-art-footer-logo { width: 280px; aspect-ratio: 280 / 68; background-size: 437.5% 1888.235294117647%; background-position: 4.232804232804233% 93.33881578947368%; }
.zz-art-fish { width: 62px; aspect-ratio: 62 / 45; background-size: 1975.8064516129032% 2853.3333333333335%; background-position: 3.697334479793637% 35.83535108958838%; }
.zz-art-thermometer { width: 44px; aspect-ratio: 44 / 55; background-size: 2784.090909090909% 2334.5454545454545%; background-position: 29.720575783234548% 35.88283157038242%; }
.zz-art-store { width: 57px; aspect-ratio: 57 / 55; background-size: 2149.122807017544% 2334.5454545454545%; background-position: 52.82534246575342% 35.88283157038242%; }
.zz-art-leaf { width: 59px; aspect-ratio: 59 / 57; background-size: 2076.271186440678% 2252.6315789473683%; background-position: 78.30188679245283% 35.85982070089649%; }
.zz-art-pier { width: 545px; aspect-ratio: 545 / 197; background-size: 224.77064220183487% 651.7766497461929%; background-position: 0% 84.82060717571296%; }
.zz-art-tagline { width: 249px; aspect-ratio: 249 / 186; background-size: 491.96787148594376% 690.3225806451613%; background-position: 100% 84.8816029143898%; }
.zz-art-tight { width: 145px; aspect-ratio: 145 / 85; background-size: 844.8275862068966% 1510.5882352941176%; background-position: 97.4074074074074% 95.41284403669725%; }
.zz-art-social { width: 68px; aspect-ratio: 68 / 32; background-size: 1801.4705882352941% 4012.5%; background-position: 77.52808988764045% 92.81150159744409%; }
.zz-art-crate { width: 295px; aspect-ratio: 295 / 310; background-size: 415.2542372881355% 414.19354838709677%; background-position: 100% 12.012320328542096%; }
.zz-art-top-fish { width: 22px; aspect-ratio: 22 / 23; background-size: 5568.181818181818% 5582.608695652174%; background-position: 3.408146300914381% 0.3965107057890563%; }
.zz-art-top-truck { width: 25px; aspect-ratio: 25 / 23; background-size: 4900% 5582.608695652174%; background-position: 20.333333333333332% 0.3965107057890563%; }
.zz-art-top-store { width: 23px; aspect-ratio: 23 / 23; background-size: 5326.086956521739% 5582.608695652174%; background-position: 34.8585690515807% 0.3965107057890563%; }
.zz-art-top-check { width: 24px; aspect-ratio: 24 / 23; background-size: 5104.166666666666% 5582.608695652174%; background-position: 52.03996669442132% 0.3965107057890563%; }

.zz-ref-topbar { background:#103c35; color:white; padding:.35rem clamp(1rem,3.4vw,3rem); font-size:.75rem; }
.zz-ref-topbar-row { gap:1rem; }
.zz-ref-topbar p { margin:0; }
.zz-ref-top-points { display:flex; flex-wrap:wrap; align-items:center; gap:clamp(1rem,3vw,3rem); }
.zz-ref-top-points > span { white-space:nowrap; }
.zz-ref-topbar a { color:white; text-decoration:none; }
.zz-ref-header { background:#faf9f6; padding: .65rem clamp(1rem,3.4vw,3rem); border-bottom:1px solid #e4e0d7; margin-top:0; }
.zz-ref-header-row { gap:1.3rem; }
.zz-ref-brand { margin:0; line-height:0; flex-shrink:0; }
.zz-ref-brand a { display:block; }
.zz-ref-header .zz-art-logo { width: min(26vw,304px); mix-blend-mode:multiply; }
.zz-ref-nav { font-size:.9rem; font-weight:600; gap:1.2rem; }
.zz-ref-nav .wp-block-navigation__container { gap:1.2rem; }
.zz-ref-nav a { text-decoration:none; }
.zz-ref-nav a:hover { text-decoration:underline; }
.zz-ref-nav .wp-block-navigation__responsive-container.is-menu-open { padding:2rem; background:#faf9f6; color:#103632; }
.zz-ref-tools { gap:1rem; }
.zz-ref-tools .zz-search { width:170px; }
.zz-ref-tools .wc-block-mini-cart__button { padding:.25rem; font-size:.85rem; }
.zz-ref-hero { padding:2.5rem clamp(1rem,3.4vw,3rem); position:relative; overflow:hidden; }
.zz-ref-hero .wp-block-cover__inner-container { position:static; }
.zz-ref-crate-wrap { position:absolute; right:0; top:0; height:100%; aspect-ratio:295/310; margin:0!important; pointer-events:none; z-index:1; }
.zz-ref-crate-wrap .zz-art-crate { width:100%; height:100%; mask-image:linear-gradient(to right,transparent,#000 20%); }
.zz-ref-hero-copy { position:relative; z-index:2; }
.zz-ref-headline { font:700 clamp(2rem,4.4vw,3.6rem)/1.08 Georgia,serif; margin:0 0 .65rem; max-width:880px; }
.zz-ref-subtitle { color:#d6b36a; font-size:.75em; }
.zz-ref-intro { font:1.35rem/1.5 Georgia,serif; max-width:780px; margin-block:.6rem 1.2rem; }
.zz-ref-hero .wp-block-buttons { gap:1.1rem; }
.zz-ref-hero .is-style-outline .wp-block-button__link { background:transparent; color:white; border:1px solid white; }
.zz-ref-benefits { background:#efede3; padding:1.15rem clamp(1rem,3.4vw,3rem); }
.zz-ref-benefits-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.4rem; }
.zz-ref-benefit { display:flex; align-items:center; gap:.8rem; margin:0; }
.zz-ref-benefit > .zz-ref-icon { margin:0; width:57px; flex-shrink:0; line-height:0; mix-blend-mode:multiply; }
.zz-ref-benefit > div { margin:0; min-width:0; }
.zz-ref-benefit h3 { font:700 1rem/1.3 Georgia,serif; margin:0; color:#103632; }
.zz-ref-benefit p:not(.zz-ref-icon) { font-size:.85rem; line-height:1.4; margin:.25rem 0 0; }
.zz-ref-products-section { padding:1.5rem clamp(1rem,3.4vw,3rem) 2rem; background:#faf9f6; }
.zz-ref-products-section h2 { margin:0; font-size:2.15rem; }
.zz-ref-products-section p { margin:.15rem 0 1rem; }
.zz-ref-products-section .wp-block-woocommerce-product-collection { margin-top:.6rem; }
.zz-ref-story { display:grid; grid-template-columns:44% 36% 20%; background:#efede5; align-items:center; gap:0; }
.zz-ref-pier { margin:0; line-height:0; }
.zz-ref-pier .zz-art-pier { width:100%; }
.zz-ref-story-copy { padding:1rem 1.5rem; margin:0; }
.zz-ref-story-copy h2 { font-size:1.25rem; margin:0 0 .8rem; }
.zz-ref-checklist { list-style:none; padding:0; margin:0; font-size:.83rem; }
.zz-ref-checklist li { position:relative; padding-left:1.5rem; margin:.3rem 0; line-height:1.5; }
.zz-ref-checklist li:before { content:"✓"; position:absolute; left:0; top:.1rem; width:1.05rem; height:1.05rem; background:#b94e10; color:white; border-radius:50%; text-align:center; font:700 .8rem/1.05rem sans-serif; }
.zz-ref-story-art { margin:0; align-self:end; line-height:0; }
.zz-ref-story-art .zz-art-tagline { width:100%; mix-blend-mode:multiply; }
.zz-ref-footer { background:#103d34; color:white; padding:1.25rem clamp(1rem,3.4vw,3rem) .5rem; }
.zz-ref-footer-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.4fr); gap:1rem; align-items:start; }
.zz-ref-footer-grid > * { margin-top:0; }
.zz-ref-footer h3 { color:white; font:700 .85rem/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; margin:0 0 .4rem; }
.zz-ref-footer p { font-size:.85rem; line-height:1.5; margin:.2rem 0; }
.zz-ref-footer a { color:white; text-decoration:none; }
.zz-ref-footer a:hover { color:#d6b36a; text-decoration:underline; }
.zz-ref-footer-social { display:grid; grid-template-columns:1fr 1fr; gap:0 .5rem; }
.zz-ref-footer-social h3 { grid-column:1; }
.zz-ref-footer-social p { margin:0; line-height:0; }
.zz-ref-footer-social p:last-child { grid-column:2; grid-row:1 / span 2; }
.zz-ref-footer-bottom { border-top:1px solid #ffffff55; margin-top:1.5rem; padding-top:.4rem; gap:1rem; }
.zz-ref-footer-bottom p { font-size:.75rem; }
.zz-ref-payments { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; align-items:center; max-width:360px; font-size:.7rem; }
.zz-ref-payment img { max-height:26px; width:auto; max-width:70px; vertical-align:middle; }
.zz-ref-payment a { pointer-events:none; }
.zz-ref-payment { padding:.1rem .25rem; border:1px solid #ffffff66; border-radius:3px; }
.zz-ref-header :focus-visible,.zz-ref-footer :focus-visible { outline:3px solid #d6b36a; outline-offset:3px; }
@media(max-width:1150px){
 .zz-ref-header-row { flex-wrap:wrap; }
 .zz-ref-nav { order:3; width:100%; justify-content:center; }
 .zz-ref-tools { margin-left:auto; }
 .zz-ref-top-points { gap:1rem; }
 .zz-ref-account { display:none; }
 .zz-ref-story { grid-template-columns:40% 40% 20%; }
 .zz-ref-story-copy { padding:1rem; }
 .zz-ref-footer-grid { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); }
 .zz-ref-footer-social { display:block; }
}
@media(max-width:781px){
 .zz-ref-header .zz-art-logo { width:260px; }
 .zz-ref-benefits-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .zz-ref-headline { font-size:2.4rem; max-width:78%; }
 .zz-ref-intro { font-size:1.1rem; max-width:72%; }
 .zz-ref-crate-wrap { opacity:.85; }
 .zz-ref-story { grid-template-columns:1fr 1fr; }
 .zz-ref-pier { grid-column:1 / -1; }
 .zz-ref-story-copy { padding:1.5rem; }
 .zz-ref-story-art { max-width:250px; margin-left:auto; }
 .zz-ref-footer-grid { grid-template-columns:1fr 1fr; gap:1.5rem; }
 .zz-ref-footer-social { display:grid; }
 .zz-ref-top-points { justify-content:center; font-size:.7rem; gap:.3rem 1rem; }
}
@media(max-width:599px){
 .zz-ref-header-row { gap:.7rem; }
 .zz-ref-header .zz-art-logo { width:230px; }
 .zz-ref-nav { order:initial; width:auto; margin-left:auto; }
 .zz-ref-tools { flex:1 0 100%; }
 .zz-ref-tools .zz-search { width:100%; }
 .zz-ref-hero { padding-top:225px; padding-bottom:1.5rem; background:#103632; }
 .zz-ref-hero .wp-block-cover__image-background { height:210px; }
 .zz-ref-crate-wrap { height:210px; opacity:1; }
 .zz-ref-headline { max-width:none; font-size:2.15rem; }
 .zz-ref-intro { max-width:none; font-size:1.1rem; }
 .zz-ref-hero .wp-block-button__link { padding:.8rem .9rem; font-size:.875rem; }
 .zz-ref-benefits-grid { gap:1rem; }
 .zz-ref-benefit { gap:.4rem; align-items:flex-start; }
 .zz-ref-benefit > .zz-ref-icon { width:36px; }
 .zz-ref-benefit h3 { font-size:.9rem; }
 .zz-ref-benefit p:not(.zz-ref-icon) { font-size:.78rem; }
 .zz-ref-story { grid-template-columns:1fr; }
 .zz-ref-story-art { width:200px; margin:0 auto; }
 .zz-ref-footer-grid { grid-template-columns:1fr 1fr; }
 .zz-ref-footer-grid > .zz-ref-brand { grid-column:1 / -1; }
 .zz-ref-footer-social { grid-column:1 / -1; display:flex; align-items:center; gap:1rem; }
 .zz-ref-footer-bottom { flex-direction:column; align-items:flex-start; }
}
@media(max-width:360px){.zz-ref-header .zz-art-logo{width:200px}.zz-ref-benefits-grid{grid-template-columns:1fr}.zz-ref-benefit>.zz-ref-icon{width:48px}}

/* Eigen omslagfoto en logo; bestandsverwijzingen werken op test- en productiedomein. */
.zz-art-logo, .zz-art-footer-logo { background-image:url("../images/logo-zagers-zeepieren.png"); background-size:contain; background-position:center; }
.zz-art-logo { width:304px; aspect-ratio:2048 / 682; }
.zz-art-footer-logo { width:280px; aspect-ratio:2048 / 682; background-color:#faf9f6; border-radius:8px; padding:8px; box-sizing:content-box; }
.zz-ref-header .zz-art-logo { mix-blend-mode:normal; }
.zz-ref-crate-wrap { display:none; }
.zz-ref-hero .wp-block-cover__image-background { object-position:center center; }