/* M9 Catalogue — base styles. Neutral on purpose: the theme sets the look. */
.m9cat-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.m9cat-noimg { display: block; aspect-ratio: 1; background: #f3f1ee; }

/* Toast after adding a style */
.m9cat-toast {
	position: fixed; z-index: 99990; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	transform: translate(-50%, 140%); opacity: 0; transition: transform .25s ease, opacity .25s ease;
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	max-width: min(560px, calc(100vw - 32px)); padding: 12px 44px 12px 16px;
	background: #2b2522; color: #fff; border-radius: 10px; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .5);
	font-size: 14px; line-height: 1.4;
}
.m9cat-toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.m9cat-toast p { margin: 0; }
.m9cat-toast__link { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.m9cat-toast__close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.m9cat-toast__close:focus-visible, .m9cat-toast__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Quantity stepper */
.m9cat-stepper { display: inline-flex; align-items: stretch; }
.m9cat-stepper input { width: 5.5em; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.m9cat-stepper input::-webkit-outer-spin-button, .m9cat-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.m9cat-stepper__btn { min-width: 40px; cursor: pointer; }
.m9cat-stepper__btn:disabled { opacity: .4; cursor: default; }

/* Gallery */
.m9cat-gallery__main { position: relative; background: #fff; overflow: hidden; }
.m9cat-gallery__slide { display: block; cursor: zoom-in; }
.m9cat-gallery__slide[hidden] { display: none; }
.m9cat-gallery__slide img { display: block; width: 100%; height: auto; }
.m9cat-gallery__nav {
	position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; display: grid; place-items: center;
	border: 0; border-radius: 50%; background: #fff; color: #2b2522; cursor: pointer;
	box-shadow: 0 6px 16px -6px rgba(20, 14, 8, .35), 0 0 0 1px rgba(0, 0, 0, .05);
}
.m9cat-gallery__nav--prev { left: 14px; }
.m9cat-gallery__nav--next { right: 14px; }
.m9cat-gallery__thumbs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.m9cat-gallery__thumb { display: block; width: 100%; padding: 0; border: 1px solid #e6e0d8; border-radius: 10px; background: #fff; overflow: hidden; cursor: pointer; opacity: .7; transition: opacity .2s, border-color .2s; }
.m9cat-gallery__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.m9cat-gallery__thumb:hover, .m9cat-gallery__thumb.is-active { opacity: 1; }
.m9cat-gallery__thumb.is-active { border-color: #3b3633; box-shadow: 0 0 0 1px #3b3633; }
.m9cat-gallery button:focus-visible, .m9cat-gallery a:focus-visible { outline: 2px solid #9a5f12; outline-offset: 2px; }

/* Full-size view */
.m9cat-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(20, 16, 14, .92); display: grid; place-items: center; padding: 24px; }
.m9cat-lightbox img { max-width: 100%; max-height: calc(100vh - 48px); width: auto; height: auto; background: #fff; border-radius: 6px; }
.m9cat-lightbox__close { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: #2b2522; font-size: 26px; line-height: 1; cursor: pointer; }

/* Search form */
.m9cat-search { display: flex; gap: 8px; }
.m9cat-search__input { flex: 1 1 auto; min-width: 0; }

@media (prefers-reduced-motion: reduce) { .m9cat-toast { transition: none; } }