/* Public page lifecycle and transitions; the persistent checkout shell is outside. */
#zylo-page { min-height: 55vh; }
/* The first banner is useful before scripts; later records never stack below it. */
#zylo-page .uc-zero-slide ~ .uc-zero-slide { display: none; }
#zylo-page .zero-slider-wrapper, #zylo-page .zero-slider { position: relative; width: 100%; overflow: hidden; }
#zylo-page .zero-slider .swiper-wrapper { display: flex; }
#zylo-page .zero-slider .swiper-slide { flex: 0 0 100%; width: 100%; min-width: 0; }
/* The hero bullets (margin + bar + margin, as in the home fragment) keep their
   height from the first paint: the first slide reserves it until page-runtime.js
   builds the slider, and the bar keeps it before Swiper fills the bullets. */
#zylo-page .uc-zero-slide { margin-bottom: 58px; }
#zylo-page .swiper-slide > .uc-zero-slide, #zylo-page .uc-zero-slide ~ .uc-zero-slide { margin-bottom: 0; }
#zylo-page .zero-slider-pagination { min-height: 28px; }
@media (max-width: 640px) {
  #zylo-page .uc-zero-slide { margin-bottom: 57px; }
  #zylo-page .zero-slider-pagination { min-height: 32px; }
}
/* Tilda's slider stylesheet arrives deferred (media=print, then all). Until it
   applied, the gallery arrows stood in the flow under the photo (66 px on a
   phone) and the page jumped up; its positioning rules are repeated here. */
#zylo-page .t-slds__container { position: relative; }
#zylo-page .t-slds__arrow_wrapper { position: absolute; top: 0; bottom: 0; width: 45px; list-style: none; }
#zylo-page .t-slds__arrow_wrapper-left { left: 0; }
#zylo-page .t-slds__arrow_wrapper-right { right: 0; }
#zylo-page .t-slds__arrow { position: absolute; top: 50%; transform: translateY(-50%); }
#zylo-page .zylo-hero-status { position: absolute; left: 50%; bottom: 42px; transform: translateX(-50%); z-index: 2; max-width: calc(100% - 32px); padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,.95); color: #444; font: 13px/1.4 Arial,sans-serif; }
#zylo-page .zylo-hero-status:empty { display: none; }
/* Tilda's photo zoom appends its viewer to <body>, outside #zylo-page. After an
   AJAX visit to a page without the zoom stylesheet (offer, policy) its bare
   «+ − ×» controls stood under the content; it shows only while zoom is open. */
body:not(.t-zoomer__show) > .t-zoomer__wrapper { display: none !important; }
.zylo-navigating { cursor: progress; }
.zylo-navigating::before { content: ''; position: fixed; inset: 0 auto auto 0; width: 100%; height: 3px; z-index: 2147483000; background: linear-gradient(90deg,transparent,#a48672,transparent); transform-origin: left; animation: zylo-loading 1s ease-in-out infinite; pointer-events: none; }
@keyframes zylo-loading { from { transform: translateX(-80%); } to { transform: translateX(80%); } }
.zylo-navigation-status { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#zylo-page.zylo-page-enter { animation: zylo-page-reveal .16s ease-out; }
#zylo-page.zylo-variant-enter .js-product-single { animation: zylo-page-reveal .16s ease-out; }
@keyframes zylo-page-reveal { from { opacity: .65; } to { opacity: 1; } }
.zylo-product-color { transition: opacity .18s ease; }
.zylo-product-color > span { position: relative; }
.zylo-product-color[aria-busy="true"] > span::after { content: ''; position: absolute; inset: -5px; border: 2px solid transparent; border-top-color: #a48672; border-radius: 50%; animation: zylo-color-loading .7s linear infinite; }
@keyframes zylo-color-loading { to { transform: rotate(360deg); } }
.zylo-gallery.is-gallery-loading { cursor: progress; }
.zylo-gallery.is-gallery-loading .t-slds__arrow { opacity: .55; }
.zylo-gallery-status { position: absolute; inset: auto 12px 12px; z-index: 3; border-radius: 8px; background: rgba(255,255,255,.95); padding: 8px 12px; color: #444; font-size: 13px; line-height: 1.4; }
.zylo-gallery-status:empty { display: none; }
#zylo-page a, #zylo-page button { -webkit-tap-highlight-color: transparent; }
#zylo-page a:focus-visible, #zylo-page button:focus-visible, #zylo-page [role="button"]:focus-visible { outline: 2px solid #a48672; outline-offset: 4px; }
#zylo-page .tn-atom, #zylo-page .t-btn, #zylo-page button, #zylo-page .zylo-market-btn { transition: background-color .2s ease,color .2s ease,box-shadow .2s ease,opacity .2s ease,filter .2s ease; }
@media (hover:hover) { #zylo-page .tn-atom[href]:hover, #zylo-page .t-btn:hover, #zylo-page button:hover:not(:disabled), #zylo-page .zylo-market-btn:hover { filter: brightness(.9); } }
body.zylo-page-overlay { overflow: hidden; }
#zylo-page .t450:not(.t450__menu_show) { visibility: hidden; }
#zylo-page .t450.t450__menu_show { visibility: visible; }
#zylo-page .t-popup.zylo-popup-open { opacity: 1; visibility: visible; }
#zylo-page #ysplit_popup.zylo-popup-open { display: block; opacity: 1; visibility: visible; z-index: 100000; }
#zylo-page .zylo-gallery { visibility: visible!important; }
#zylo-page .zylo-gallery .zylo-gallery-track { display: flex!important; width: 100%!important; position: relative!important; left: 0!important; transform: none!important; overflow-x: auto!important; overflow-y: hidden!important; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
#zylo-page .zylo-gallery-track::-webkit-scrollbar { display: none; }
#zylo-page .zylo-gallery-track > .t-slds__item { flex: 0 0 100%!important; width: 100%!important; float: none!important; position: relative!important; opacity: 1!important; visibility: visible!important; scroll-snap-align: start; }
#zylo-page .zylo-gallery .t-slds__arrow_wrapper { z-index: 2; }
#zylo-page .zylo-gallery .t-slds__thumbsbullet { cursor: pointer; }
#zylo-page .zylo-gallery .t-slds__thumbsbullet[aria-pressed="true"] { outline: 1px solid #222; outline-offset: -1px; }
#zylo-page .zylo-catalog-track { display: flex!important; flex-wrap: nowrap!important; justify-content: flex-start!important; gap: 12px!important; overflow-x: auto!important; overflow-y: hidden!important; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 3px; }
#zylo-page .zylo-catalog-track:before,#zylo-page .zylo-catalog-track:after,#zylo-page .zylo-catalog-track > .t-clear { display: none!important; }
#zylo-page .zylo-catalog-track::-webkit-scrollbar { display: none; }
#zylo-page .zylo-catalog-card { display: block!important; float: none!important; flex: 0 0 calc((100% - 48px)/5)!important; width: calc((100% - 48px)/5)!important; min-width: 0!important; max-width: none!important; margin: 0!important; scroll-snap-align: start; }
#zylo-page .zylo-carousel-controls { display: flex; justify-content: center; gap: 10px; padding: 18px 0 8px; }
#zylo-page .zylo-carousel-controls button { border: 1px solid #ddd; border-radius: 50%; background: #fff; color: #222; width: 44px; height: 44px; font-size: 21px; cursor: pointer; }
#zylo-page .zylo-carousel-controls button:disabled { opacity: .3; cursor: default; }
#zylo-page .zylo-horizontal-track { overflow-x: auto!important; overflow-y: hidden!important; overscroll-behavior-x: contain; scrollbar-width: none; }
#zylo-page .zylo-runtime-color { display: inline-block; width: 12px; height: 12px; border: 1px solid #ddd; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
#zylo-page .zylo-runtime-split { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: fit-content; max-width: 100%; border: 0; border-radius: 9px; padding: 8px 10px; margin: 12px 0 20px; background: #f3f2f1; color: #222; font-family: inherit; font-size: 14px; line-height: 1.4; cursor: pointer; }
#zylo-page .zylo-split-badge { border-radius: 5px; padding: 3px 6px; color: #fff; background: #222; font-size: 12px; }
#zylo-page .zylo-logo-slider .swiper-wrapper { transition-timing-function: linear!important; }
#zylo-page .zylo-logo-slider .t774__col { margin: 0!important; float: none!important; max-width: none!important; }
/* Until Swiper loads, the kit photo strip already has its final one-row geometry;
   the three-column grid used to stand 940 px (2200 px on phones) tall and then collapse. */
#zylo-page .uc-run-logo .t774__container:not(.swiper-initialized) { display: flex!important; flex-wrap: nowrap; gap: 20px; overflow: hidden; }
#zylo-page .uc-run-logo .t774__container:not(.swiper-initialized)::before, #zylo-page .uc-run-logo .t774__container:not(.swiper-initialized)::after { display: none; }
#zylo-page .uc-run-logo .t774__container:not(.swiper-initialized) .t774__col { flex: 0 0 calc((100% - 40px) / 3); width: auto!important; margin: 0!important; float: none!important; max-width: none!important; }
@media (min-width: 768px) { #zylo-page .uc-run-logo .t774__container:not(.swiper-initialized) .t774__col { flex-basis: calc((100% - 60px) / 4); } }
@media (min-width: 1360px) { #zylo-page .uc-run-logo .t774__container:not(.swiper-initialized) .t774__col { flex-basis: calc((100% - 80px) / 5); } }
@media (min-width: 1920px) { #zylo-page .uc-run-logo .t774__container:not(.swiper-initialized) .t774__col { flex-basis: calc((100% - 100px) / 6); } }
#zylo-page .t886[hidden] { display: none!important; }
@media(max-width: 1000px) { #zylo-page .zylo-catalog-card { flex-basis: calc((100% - 24px)/3)!important; width: calc((100% - 24px)/3)!important; } }
@media(max-width: 640px) {
  #zylo-page .zylo-catalog-card { flex-basis: calc((100% - 12px)/2)!important; width: calc((100% - 12px)/2)!important; }
  /* Legacy full-viewport gallery widths include the browser scrollbar. Size to
     the actual product column so the document itself never scrolls sideways. */
  #zylo-page .js-product-single .t-slds.zylo-gallery { width: 100%!important; max-width: 100%!important; margin-left: 0!important; margin-right: 0!important; box-sizing: border-box; }
  #zylo-page .js-product-single .zylo-gallery .t-slds__main,
  #zylo-page .js-product-single .zylo-gallery .t-slds__container,
  #zylo-page .js-product-single .zylo-gallery .t-slds__arrow_container,
  #zylo-page .js-product-single .zylo-gallery .t-slds__thumbsbullet-wrapper { max-width: 100%!important; box-sizing: border-box; }
}
@media(prefers-reduced-motion: reduce) { .zylo-navigating::before { animation: none; background: #a48672; } #zylo-page *,#zylo-page *::before,#zylo-page *::after { animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; scroll-behavior: auto!important; } }
/* Shared contact popup: one compact form on every storefront page. */
#zylo-page .t-popup .t-popup__container:has(form[data-zylo-form="contact"]){border-radius:16px;overflow:hidden}
#zylo-page .t-popup .t702__img{height:96px;width:100%;object-fit:contain;background:#242424}
#zylo-page .t-popup .t702__wrapper{padding:26px 32px}
#zylo-page .t-popup .t702__text-wrapper{margin-bottom:20px}
#zylo-page .t-popup form[data-zylo-form="contact"],#zylo-page .t-popup form[data-zylo-form="contact"] *{box-sizing:border-box}
#zylo-page .t-popup form[data-zylo-form="contact"] .t-input-group{margin-bottom:14px}
#zylo-page .t-popup form[data-zylo-form="contact"] .t-input{width:100%;height:48px;min-height:48px;padding:0 13px;border:1px solid #ded9d5!important;border-radius:10px!important;font-size:16px;line-height:1.5}
#zylo-page .t-popup form[data-zylo-form="contact"] textarea.t-input{height:120px!important;min-height:120px;padding:12px 13px;resize:vertical}
#zylo-page .t-popup form[data-zylo-form="contact"] .t-checkbox__control{font-size:11px;line-height:1.6}
#zylo-page .t-popup form[data-zylo-form="contact"] .t-submit{height:48px;min-height:48px;border-radius:10px;background:#292524}
@media(max-width:480px){#zylo-page .t-popup .t702__wrapper{padding:22px 20px}#zylo-page .t-popup .t702__img{height:76px}}
/* Review videos: a warm tile instead of black until the cover (page-runtime.js) arrives. */
#zylo-page [data-zylo-video-cover] { background-color: #e7e1dd !important; background-position: center; background-size: cover; }