/* Shop "coming soon" notice (inc/sitto-shop.php) */
html.sitto-shop-notice-open { overflow: hidden; }
.sitto-shop-notice { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.sitto-shop-notice[hidden] { display: none; }
.sitto-shop-notice__backdrop { position: absolute; inset: 0; background: rgba(11, 13, 18, 0.55); opacity: 0; transition: opacity 0.25s ease; }
.sitto-shop-notice__box {
	position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
	padding: 40px; border-radius: 24px; background: #FFFFFF; color: #181D27; outline: none;
	box-shadow: 0 40px 80px -20px rgba(11, 13, 18, 0.35);
	opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.sitto-shop-notice.is-open .sitto-shop-notice__backdrop { opacity: 1; }
.sitto-shop-notice.is-open .sitto-shop-notice__box { opacity: 1; transform: none; }
.sitto-shop-notice .sitto-shop-notice__close {
	position: absolute !important; top: 16px !important; right: 16px !important; left: auto !important; bottom: auto !important;
	width: 40px !important; height: 40px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
	border: 0 !important; border-radius: 50% !important; background: #F5F6F8 !important; color: #181D27 !important; box-shadow: none !important;
	font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease;
}
.sitto-shop-notice .sitto-shop-notice__close::before, .sitto-shop-notice .sitto-shop-notice__close::after { display: none !important; }
.sitto-shop-notice .sitto-shop-notice__close:hover { background: #E9EAEB !important; }
/* "under construction" character: two gears turning, a wrench tightening them */
.sitto-shop-notice__icon { position: relative; display: block; width: 72px; height: 64px; margin-bottom: 20px; color: #181D27; }
.sitto-shop-notice__icon i { position: absolute; line-height: 1; }
.sitto-shop-notice__gear { left: 0; top: 4px; font-size: 48px; animation: sitto-sn-spin 6s linear infinite; }
.sitto-shop-notice__gear--small { left: 40px; top: 0; font-size: 28px; color: #FFC20F; animation-direction: reverse; animation-duration: 4s; }
.sitto-shop-notice__wrench { left: 36px; top: 30px; font-size: 32px; transform-origin: 20% 80%; animation: sitto-sn-wrench 1.6s ease-in-out infinite; }
@keyframes sitto-sn-spin { to { transform: rotate(360deg); } }
@keyframes sitto-sn-wrench { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-28deg); } 55% { transform: rotate(6deg); } 70% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .sitto-shop-notice__icon i { animation: none; } }
.sitto-shop-notice__title { margin: 0 0 12px; font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: #181D27; }
.sitto-shop-notice__text { margin: 0 0 24px; font-size: 16px; line-height: 1.55; color: #535862; }
.sitto-shop-notice__list-title { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #181D27; }
.sitto-shop-notice__list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.sitto-shop-notice__list a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid #E9EAEB; border-radius: 12px; color: #181D27; text-decoration: none; font-weight: 500; transition: border-color 0.2s ease, background 0.2s ease; }
.sitto-shop-notice__list a > i:first-child { font-size: 22px; }
.sitto-shop-notice__list a span { flex: 1; }
.sitto-shop-notice__arrow { transition: transform 0.25s ease; }
.sitto-shop-notice__list a:hover { border-color: #FFC20F; background: var(--sitto-section-warm, #F8F7F4); }
.sitto-shop-notice__list a:hover .sitto-shop-notice__arrow { transform: translateX(4px); }
.sitto-shop-notice__cta { display: inline-flex; align-items: center; justify-content: center; padding: 14px 34px; border-radius: 50px; background: #FFC20F; color: #181D27; font-size: 16px; font-weight: 600; line-height: 1.5; text-decoration: none; }
/* hover = global button effect (sitto-btnfx.js); outside Elementor widgets the label colour needs its own rule */
body.sitto-page #pxl-main .sitto-shop-notice__cta.sitto-btnfx:is(:hover, :focus-visible) { color: var(--fx-text) !important; }
@media (max-width: 767px) {
	/* shorter than the visible viewport (iOS toolbars included), content scrolls inside */
	.sitto-shop-notice { padding: 24px 16px; }
	.sitto-shop-notice__box { padding: 28px 20px 24px; border-radius: 20px; max-height: calc(100vh - 160px); max-height: calc(100svh - 96px); }
	.sitto-shop-notice__icon { width: 60px; height: 52px; margin-bottom: 14px; }
	.sitto-shop-notice__gear { font-size: 40px; }
	.sitto-shop-notice__gear--small { left: 33px; font-size: 24px; }
	.sitto-shop-notice__wrench { left: 30px; top: 24px; font-size: 28px; }
	.sitto-shop-notice__title { font-size: 24px; }
	.sitto-shop-notice__cta { width: 100%; justify-content: center; }
}
/* the notice sits inside #pxl-main: keep its own title size instead of the page H2 scale */
body.sitto-page #pxl-main .sitto-shop-notice .sitto-shop-notice__title { font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 12px; }
@media (max-width: 767px) { body.sitto-page #pxl-main .sitto-shop-notice .sitto-shop-notice__title { font-size: 24px; } }
/* mobile: the close button stays reachable while the content scrolls */
@media (max-width: 767px) {
	.sitto-shop-notice .sitto-shop-notice__close { position: sticky !important; top: 0 !important; right: auto !important; float: right; z-index: 2; margin: -12px -8px 0 0 !important; box-shadow: 0 2px 8px rgba(11, 13, 18, 0.08) !important; }
}