/* ============================================================
   macOS-style skin for snail.com.ua  (UltraStore / OCStore)
   Non-destructive override — loaded last in header.twig.
   To disable: remove the <link ... macos.css> line from header.twig
   ============================================================ */

:root {
	--mac-accent: #0a84ff;          /* macOS system blue */
	--mac-accent-strong: #0060df;
	--mac-accent-soft: rgba(10, 132, 255, .12);
	--mac-text: #1d1d1f;
	--mac-text-soft: #6e6e73;
	--mac-bg: #ececec;
	--mac-card: #ffffff;
	--mac-glass: rgba(255, 255, 255, .72);
	--mac-glass-strong: rgba(255, 255, 255, .85);
	--mac-border: rgba(0, 0, 0, .08);
	--mac-radius: 14px;
	--mac-radius-sm: 9px;
	--mac-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.10);
	--mac-shadow-sm: 0 1px 3px rgba(0,0,0,.10);
	--mac-shadow-lg: 0 12px 40px rgba(0,0,0,.18);
	--mac-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
	            "Helvetica Neue", "Segoe UI", "PT Sans", "Roboto", Arial, sans-serif;
}

/* ---------- Global typography & desktop background ---------- */
html, body,
.us-module-title, .us-module-title a,
input, button, select, textarea,
.btn, h1, h2, h3, h4, h5, h6 {
	font-family: var(--mac-font) !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: -0.01em;
}

body {
	background-color: var(--mac-bg) !important;
	background-image:
		radial-gradient(1200px 700px at 12% -8%, #d9e8ff 0%, rgba(217,232,255,0) 60%),
		radial-gradient(1100px 800px at 100% 0%, #ffe9f2 0%, rgba(255,233,242,0) 55%),
		radial-gradient(1000px 900px at 50% 120%, #e7fff3 0%, rgba(231,255,243,0) 60%),
		linear-gradient(180deg, #f3f4f7 0%, #e9eaee 100%) !important;
	background-attachment: fixed !important;
	color: var(--mac-text);
}

a { color: var(--mac-accent); }
a:hover { color: var(--mac-accent-strong); }

/* ---------- macOS thin scrollbar ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.28) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb {
	background: rgba(0,0,0,.26);
	border-radius: 8px;
	border: 3px solid transparent;
	background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.42); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Top utility bar = translucent menu bar ---------- */
#top {
	background: var(--mac-glass) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid var(--mac-border);
	box-shadow: var(--mac-shadow-sm);
}
#top .btn-link, .us-phone-link, .us-cart-link, .top-phone-btn, .us-cart-text {
	color: var(--mac-text) !important;
	font-weight: 500;
}
#top .btn-link:hover { color: var(--mac-accent) !important; }

/* ---------- Big header & megamenu bar removed; thin top bar kept ---------- */
header { display: none !important; }            /* logo / search / phone block */
.menu-row { display: none !important; }         /* megamenu button + its bar */

/* keep the thin utility bar compact like a macOS menu bar */
#top, #top .container { min-height: 0 !important; }
#top { line-height: 1.2; position: relative; z-index: 1200; }
/* address / working-hours dropdowns must sit above page content */
#top .us-dropdown, #top .dropdown-menu, #top .nav-dropdown-menu,
.address-dropdown-menu, .shedule-dropdown-menu, .user-dropdown-menu,
.header-dropdown-menu { z-index: 1250 !important; }

/* macOS-style close button injected into #top popups */
.us-dropdown-inner { position: relative; }
.shedule-dropdown-menu { position: relative; padding-top: 26px !important; }
.mac-pop-close {
	position: absolute;
	top: 8px; left: 8px;
	width: 18px; height: 18px;
	padding: 0; border: none; cursor: pointer;
	border-radius: 50%;
	background: #ff5f57 !important;
	box-shadow: inset 0 0 0 .5px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.2);
	display: flex; align-items: center; justify-content: center;
	z-index: 20;
	line-height: 1;
}
.mac-pop-close::before {
	content: "\00d7";
	font-size: 14px;
	font-weight: 700;
	color: rgba(0,0,0,.6);
	opacity: .85;
	transition: opacity .15s ease;
}
.mac-pop-close:hover { filter: brightness(1.05); transform: scale(1.08); }
.mac-pop-close:hover::before { opacity: 1; }
#top .btn, #top .btn-link, #top .us-dropdown-toggle,
#top .dropdown-toggle, #top .btn-user {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}
/* hide the now-pointless mobile burger inside the thin bar (still triggerable from Dock) */
#us_menu_mobile_button { display: none !important; }

/* ---------- Home: pull the slideshow up under the thin bar ---------- */
#common-home { padding-top: 0 !important; }
#common-home > .row:first-child,
#common-home .us-slideshow,
#common-home .us-slideshow-plus-box,
.us-slideshow-box:first-child {
	margin-top: 0 !important;
}
#common-home .us-slideshow,
#common-home .us-slideshow-plus-box { margin-bottom: 24px !important; }

/* ============================================================
   macOS "All categories" window (opened from Dock "Каталог")
   ============================================================ */
#mac-catalog, .mac-overlay {
	position: fixed;
	inset: 0;
	z-index: 9400;
	display: none;
	align-items: flex-start;
	justify-content: center;
	background: rgba(0,0,0,.22);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
#mac-catalog.open, .mac-overlay.open { display: flex; }

.mac-window {
	margin-top: 3vh;
	width: min(94vw, 980px);
	max-height: 94vh;
	display: flex;
	flex-direction: column;
	background: rgba(250,250,252,.86);
	-webkit-backdrop-filter: saturate(180%) blur(34px);
	backdrop-filter: saturate(180%) blur(34px);
	border: 1px solid rgba(255,255,255,.6);
	border-radius: 14px;
	box-shadow: 0 30px 80px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.7);
	overflow: hidden;
	transform: translateY(-14px) scale(.98);
	opacity: 0;
	transition: transform .2s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}
#mac-catalog.open .mac-window, .mac-overlay.open .mac-window { transform: translateY(0) scale(1); opacity: 1; }

/* page loaded into a window (wishlist / compare / cart) */
.mac-window-body #content { padding: 0 !important; }
.mac-window-body .breadcrumb, .mac-window-body .us-breadcrumb,
.mac-window-body .us-page-main-title:first-child { display: none; }
.mac-page-err { text-align: center; color: var(--mac-text-soft); padding: 40px 0; }

.mac-window-bar {
	position: relative;
	display: flex;
	align-items: center;
	height: 44px;
	padding: 0 16px;
	background: rgba(236,236,240,.8);
	border-bottom: 1px solid var(--mac-border);
	flex: 0 0 auto;
}
.mac-traffic { display: flex; gap: 8px; }
.mac-traffic i {
	width: 12px; height: 12px; border-radius: 50%; display: block; cursor: default;
}
.mac-traffic .t-red    { background: #ff5f57; cursor: pointer; }
.mac-traffic .t-yellow { background: #febc2e; }
.mac-traffic .t-green  { background: #28c840; }
.mac-traffic .t-red:hover { filter: brightness(.92); }
.mac-window-title {
	position: absolute; left: 0; right: 0; text-align: center;
	font-size: 14px; font-weight: 600; color: var(--mac-text);
	pointer-events: none;
}

.mac-window-body { padding: 22px; overflow-y: auto; }

/* homepage "categories wall" embedded in the window */
.mac-wall .us-categories-wall-row { margin: 0 -8px; }
.mac-wall .us-categories-wall-row > [class*="col-"] { padding: 8px; }
.mac-wall .us-categories-wall-item { height: 100%; margin: 0; }
.mac-wall .us-categories-wall-header { display: none; }
.mac-cat-loading, .mac-cat-empty {
	text-align: center; color: var(--mac-text-soft); padding: 40px 0; font-size: 15px;
}

.mac-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
}
.mac-cat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 18px 12px;
	border-radius: 14px;
	background: rgba(255,255,255,.7);
	border: 1px solid var(--mac-border);
	color: var(--mac-text) !important;
	text-decoration: none !important;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.mac-cat-item:hover {
	transform: translateY(-3px);
	background: #fff;
	box-shadow: var(--mac-shadow);
	color: var(--mac-accent) !important;
}
.mac-cat-ico {
	width: 56px; height: 56px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 15px;
	background: linear-gradient(180deg, #fdfdff 0%, #e9ecf3 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(0,0,0,.12);
	overflow: hidden;
}
.mac-cat-ico img { max-width: 70%; max-height: 70%; object-fit: contain; }
.mac-cat-letter { font-size: 24px; font-weight: 700; color: var(--mac-accent); }
.mac-cat-name { font-size: 13px; font-weight: 500; line-height: 1.25; }

/* category button reset (items with children are <button>) */
button.mac-cat-item { position: relative; cursor: pointer; font: inherit; width: 100%; }
.mac-cat-chev {
	position: absolute; top: 8px; right: 8px;
	font-size: 10px; color: var(--mac-text-soft);
	transition: transform .2s ease;
}
.mac-cat-item.active { background: var(--mac-accent-soft); border-color: rgba(10,132,255,.4); }
.mac-cat-item.active .mac-cat-name { color: var(--mac-accent); }
.mac-cat-item.active .mac-cat-chev { transform: rotate(180deg); color: var(--mac-accent); }

/* horizontal subcategory row */
.mac-subrow {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--mac-border);
	animation: macSubIn .22s cubic-bezier(.2,.8,.2,1);
}
.mac-subrow[hidden] { display: none; }
@keyframes macSubIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mac-subrow-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.mac-sub-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 980px;
	background: rgba(255,255,255,.8);
	border: 1px solid var(--mac-border);
	color: var(--mac-text) !important;
	text-decoration: none !important;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	transition: background .14s ease, color .14s ease, transform .14s ease;
}
.mac-sub-chip:hover { background: var(--mac-accent) !important; color: #fff !important; transform: translateY(-2px); }
.mac-sub-chip.mac-sub-all {
	background: var(--mac-accent-soft);
	border-color: rgba(10,132,255,.35);
	color: var(--mac-accent) !important;
	font-weight: 600;
}
.mac-sub-chip.mac-sub-all:hover { background: var(--mac-accent) !important; color: #fff !important; }

@media screen and (max-width: 600px) {
	.mac-window { margin-top: 4vh; max-height: 88vh; }
	.mac-cat-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
	.mac-cat-ico { width: 46px; height: 46px; }
}

/* ---------- Search field = macOS rounded search ---------- */
.us-search-box input,
.us-search-box .form-control,
#search input,
.input-group input.form-control {
	border-radius: 980px !important;
	border: 1px solid var(--mac-border) !important;
	background: rgba(255,255,255,.9) !important;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.05) !important;
	height: 42px;
	padding-left: 18px !important;
	color: var(--mac-text) !important;
	transition: box-shadow .18s ease, border-color .18s ease;
}
.us-search-box input:focus,
#search input:focus {
	border-color: var(--mac-accent) !important;
	box-shadow: 0 0 0 4px var(--mac-accent-soft) !important;
	outline: none;
}
.input-group .header-input-group,
.us-search-box button,
#search .btn {
	background: var(--mac-accent) !important;
	border: none !important;
	border-radius: 980px !important;
	color: #fff !important;
	box-shadow: 0 2px 6px rgba(10,132,255,.35);
}
.us-search-box button:hover, #search .btn:hover { background: var(--mac-accent-strong) !important; }

/* ---------- Top phone button ---------- */
.top-phone-btn { font-weight: 600; }

/* ---------- Navigation / mega menu = frosted dock-ish bar ---------- */
.menu-row {
	background: var(--mac-glass) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-top: 1px solid rgba(255,255,255,.6);
	border-bottom: 1px solid var(--mac-border);
	box-shadow: var(--mac-shadow-sm);
	color: var(--mac-text) !important;
}
.oct-ultra-menu {
	background: linear-gradient(180deg, var(--mac-accent) 0%, var(--mac-accent-strong) 100%) !important;
	border-radius: var(--mac-radius-sm) !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(10,132,255,.35);
}
#oct-menu-box:hover .oct-ultra-menu {
	background: linear-gradient(180deg, var(--mac-accent-strong) 0%, #004fb8 100%) !important;
}
.oct-menu-li { background: transparent !important; }
.oct-menu-li > a, .oct-menu-li > div > a { color: var(--mac-text) !important; font-weight: 500; }
.oct-menu-li:hover { background: var(--mac-accent-soft) !important; border-radius: var(--mac-radius-sm); }
.oct-menu-li:hover > a, .oct-menu-li:hover > div > a { color: var(--mac-accent) !important; }
.oct-mm-link:hover > a, .oct-mm-simple-link:hover > a { background: var(--mac-accent) !important; border-radius: 6px; }
.oct-mm-child a:hover, .oct-mm-parent-link:hover .oct-mm-parent-title { color: var(--mac-accent) !important; }

/* ---------- Dropdowns / popovers = frosted vibrancy panels ---------- */
.dropdown-menu, .nav-dropdown-menu, .us-dropdown,
.address-dropdown-menu, .shedule-dropdown-menu, .header-dropdown-menu,
.user-dropdown-menu {
	background: rgba(255,255,255,.82) !important;
	-webkit-backdrop-filter: saturate(180%) blur(30px);
	backdrop-filter: saturate(180%) blur(30px);
	border: 1px solid var(--mac-border) !important;
	border-radius: var(--mac-radius) !important;
	box-shadow: var(--mac-shadow-lg) !important;
	overflow: hidden;
}
.dropdown-item:hover, .us-dropdown-item:hover,
.user-dropdown-menu .us-dropdown-item:hover {
	background: var(--mac-accent) !important;
	color: #fff !important;
	border-radius: 8px;
}
.user-dropdown-menu .us-dropdown-item:hover a { color: #fff !important; }

/* ---------- Buttons = macOS blue rounded ---------- */
.us-module-btn, .us-module-cart-btn, .us-product-btn,
.btn-primary, .button, input[type="submit"],
.us-load-more-button, .oct-load-more-button,
.us-footer-form-top-buttton, .simplecheckout-button-right .button,
#simplecheckout_button_login, .us-categories-wall-link {
	background: linear-gradient(180deg, #2a92ff 0%, var(--mac-accent) 55%, var(--mac-accent-strong) 100%) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 980px !important;
	box-shadow: 0 1px 1px rgba(0,0,0,.08), 0 4px 12px rgba(10,132,255,.30) !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em;
	transition: transform .12s ease, box-shadow .18s ease, filter .18s ease !important;
}
.us-module-btn:hover, .us-module-cart-btn:hover, .us-product-btn:hover,
.btn-primary:hover, .button:hover, input[type="submit"]:hover,
.oct-load-more-button:hover, .us-footer-form-top-buttton:hover,
.simplecheckout-button-right .button:hover, #simplecheckout_button_login:hover {
	filter: brightness(1.05);
	box-shadow: 0 2px 4px rgba(0,0,0,.10), 0 8px 20px rgba(10,132,255,.40) !important;
	color: #fff !important;
}
.us-module-btn:active, .button:active, .btn-primary:active { transform: scale(.97); }

/* secondary / outline buttons */
.us-btn.secondary, .btn-default, .btn-secondary, .us-product-quantity-btn {
	background: rgba(255,255,255,.9) !important;
	color: var(--mac-text) !important;
	border: 1px solid var(--mac-border) !important;
	border-radius: 980px !important;
	box-shadow: var(--mac-shadow-sm) !important;
	font-weight: 600 !important;
}
.us-btn.secondary:hover, .btn-default:hover, .us-product-quantity-btn:hover {
	background: #fff !important;
	color: var(--mac-accent) !important;
}

/* ---------- Product cards = mac "windows" ---------- */
.us-module-item, .us-reviews-block, .us-news-block, .us-blog-post,
.subcat-item, .us-manufacturer-item, .us-product-advantages-item,
.us-categories-wall-item {
	background: var(--mac-card) !important;
	border: 1px solid var(--mac-border) !important;
	border-radius: var(--mac-radius) !important;
	box-shadow: var(--mac-shadow) !important;
	transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease !important;
	overflow: hidden;
}
.us-module-item:hover, .us-reviews-block:hover, .us-news-block:hover,
.subcat-item:hover, .us-categories-wall-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--mac-shadow-lg) !important;
}
.us-module-item:hover .us-module-title a { color: var(--mac-accent) !important; }

/* price accent */
.us-module-price-new, .us-product-price-new, .price-new, .us-module-price {
	color: var(--mac-text) !important;
	font-weight: 700;
}

/* ---------- Inputs / forms = macOS fields ---------- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], select, textarea,
.form-control {
	border-radius: var(--mac-radius-sm) !important;
	border: 1px solid var(--mac-border) !important;
	background: rgba(255,255,255,.95) !important;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.04) !important;
	color: var(--mac-text) !important;
	transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
	border-color: var(--mac-accent) !important;
	box-shadow: 0 0 0 4px var(--mac-accent-soft) !important;
	outline: none !important;
}

/* ---------- Breadcrumbs ---------- */
.us-breadcrumb-item a:hover, .us-breadcrumb-item:last-child { color: var(--mac-accent) !important; }

/* ---------- Pagination = mac segmented control ---------- */
.pagination {
	display: inline-flex;
	background: rgba(255,255,255,.85);
	-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
	border: 1px solid var(--mac-border);
	border-radius: 980px;
	padding: 4px;
	box-shadow: var(--mac-shadow-sm);
}
.pagination li a, .pagination li span {
	border: none !important;
	background: transparent !important;
	border-radius: 980px !important;
	color: var(--mac-text) !important;
	margin: 0 2px;
}
.pagination li.active span, .pagination li a:hover {
	background: var(--mac-accent) !important;
	color: #fff !important;
}

/* ---------- Modals / popups = mac sheets ---------- */
.modal-content, .us-popup, .fancybox-content, .us-modal {
	border-radius: var(--mac-radius) !important;
	border: none !important;
	box-shadow: var(--mac-shadow-lg) !important;
	overflow: hidden;
}
.modal-header {
	background: rgba(245,245,247,.92) !important;
	-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--mac-border) !important;
	position: relative;
}
.modal-title { color: var(--mac-text) !important; font-weight: 600; }
/* macOS traffic-light dots on sheet headers */
.modal-header::before {
	content: "";
	position: absolute;
	left: 16px; top: 50%; transform: translateY(-50%);
	width: 12px; height: 12px; border-radius: 50%;
	background: #ff5f57;
	box-shadow: 20px 0 0 #febc2e, 40px 0 0 #28c840;
}
.modal-header .modal-title, .modal-header .us-close { margin-left: 64px; }
.modal-header .us-close { margin-left: auto; }
button.us-close { background: transparent !important; }
button.us-close:hover { background: rgba(0,0,0,.06) !important; border-radius: 50%; }

/* ---------- Fixed side bar / contact button = dock pills ---------- */
.oct-fixed-bar {
	background: rgba(255,255,255,.7) !important;
	-webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
	border: 1px solid var(--mac-border);
	border-radius: var(--mac-radius);
	box-shadow: var(--mac-shadow-lg);
}
.oct-fixed-bar-link:hover { background: var(--mac-accent) !important; color: #fff !important; }
.oct-fixed-bar-quantity { background: var(--mac-accent) !important; color: #fff !important; }
#back-top, #us_fixed_contact_button {
	background: var(--mac-glass-strong) !important;
	-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
	border: 1px solid var(--mac-border) !important;
	border-radius: 50% !important;
	box-shadow: var(--mac-shadow-lg) !important;
	color: var(--mac-text) !important;
}
#back-top:hover, #us_fixed_contact_button:hover { background: var(--mac-accent) !important; color: #fff !important; }

/* ---------- Footer = frosted base (compact) ---------- */
footer {
	background: rgba(245,245,247,.9) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-top: 1px solid var(--mac-border) !important;
	color: var(--mac-text) !important;
	padding-top: 22px !important;
	padding-bottom: 10px !important;
	margin-top: 16px !important;
}
.us-footer-title { margin-bottom: 12px !important; }
.us-footer-item { margin-bottom: 5px !important; }
.us-footer-bottom { padding-top: 10px !important; margin-top: 6px !important; }
.us-footer-subscribe, .us-footer-subscribe-box { margin-bottom: 14px !important; }
footer .row-padding-top { padding-top: 0 !important; }
footer, .us-footer-text, .us-footer-link, .us-footer-phone-btn, .us-footer-mail,
.us-footer-subscribe-text-text, .us-footer-form-bottom label { color: var(--mac-text) !important; }
.us-footer-link:hover, .us-footer-phone-btn:hover, .us-footer-mail:hover { color: var(--mac-accent) !important; }
.us-footer-form-top-input {
	background: rgba(255,255,255,.95) !important;
	border-radius: 980px !important;
	color: var(--mac-text) !important;
	border: 1px solid var(--mac-border) !important;
}
.us-footer-social-link, .us-footer-contact-link {
	background: rgba(0,0,0,.78) !important;
	border-radius: 50% !important;
}
.us-footer-social-link:hover, .us-footer-contact-link:hover {
	background: var(--mac-accent) !important;
	color: #fff !important;
}

/* ---------- Slideshow / banners soft rounding ---------- */
.us-slideshow, .us-slideshow-plus-box, .us-four-banners-item,
.us-banner img, .swiper-slide img {
	border-radius: var(--mac-radius) !important;
	overflow: hidden;
}

/* ---------- Category sidebar ---------- */
.us-categories-box {
	background: rgba(255,255,255,.85) !important;
	-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
	border: 1px solid var(--mac-border);
	border-radius: var(--mac-radius);
	box-shadow: var(--mac-shadow);
}
.us-categories-item.active > span a, .us-categories-item a:hover { color: var(--mac-accent) !important; }

/* ---------- Stickers / badges ---------- */
.us-module-stickers-sticker, .us-news-stickers-date {
	border-radius: 980px !important;
	font-weight: 600;
}

/* ---------- Mobile menu button accent ---------- */
@media screen and (max-width: 991px) {
	.us-menu-mobile { background: var(--mac-accent) !important; }
	#top { background: rgba(255,255,255,.85) !important; }
}

/* ---------- Generic rounding for category appearance toggles ---------- */
.us-category-appearance-btn.active, .us-category-appearance-btn:hover {
	color: var(--mac-accent) !important;
}

/* ============================================================
   macOS Dock
   ============================================================ */
#mac-dock {
	position: fixed;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%) translateY(20px);
	opacity: 0;
	z-index: 9000;
	pointer-events: none;
	transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
#mac-dock.mac-dock-ready { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

.mac-dock-inner {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 8px 12px;
	background: rgba(255,255,255,.55);
	-webkit-backdrop-filter: saturate(180%) blur(28px);
	backdrop-filter: saturate(180%) blur(28px);
	border: 1px solid rgba(255,255,255,.7);
	border-radius: 22px;
	box-shadow: 0 1px 0 rgba(255,255,255,.6) inset,
	            0 10px 40px rgba(0,0,0,.28),
	            0 2px 8px rgba(0,0,0,.18);
}

.mac-dock-item {
	position: relative;
	width: 48px; height: 48px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 13px;
	background: linear-gradient(180deg, #fdfdff 0%, #e9ecf3 100%);
	box-shadow: 0 1px 2px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.9);
	color: var(--mac-accent);
	text-decoration: none;
	transform-origin: bottom center;
	transition: transform .12s cubic-bezier(.2,.8,.2,1);
	will-change: transform;
}
.mac-dock-item:hover { color: var(--mac-accent-strong); }
.mac-dock-ico { font-size: 22px; line-height: 1; pointer-events: none; }
.mac-dock-item i { display: block; }

/* coloured app-like tints per position for a livelier dock */
.mac-dock-item:nth-child(1) { color: #0a84ff; }
.mac-dock-item:nth-child(2) { color: #5e5ce6; }
.mac-dock-item:nth-child(3) { color: #30b0c7; }
.mac-dock-item:nth-child(4) { color: #ff375f; }
.mac-dock-item:nth-child(5) { color: #ff9f0a; }
.mac-dock-item:nth-child(6) { color: #34c759; }
.mac-dock-item:nth-child(7) { color: #64748b; }
.mac-dock-item:nth-child(8) { color: #af52de; }
.mac-dock-item:last-child   { color: #8e8e93; }

/* tooltip */
.mac-dock-item::after {
	content: attr(data-label);
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) scale(.9);
	background: rgba(40,40,42,.92);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	padding: 4px 10px;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0,0,0,.3);
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
}
.mac-dock-item:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }

.mac-dock-sep {
	width: 1px;
	height: 38px;
	margin: 0 2px;
	align-self: center;
	background: rgba(0,0,0,.14);
}

/* keep page content clear of the dock */
body { padding-bottom: 78px; }

@media screen and (max-width: 600px) {
	.mac-dock-inner { gap: 4px; padding: 6px 8px; }
	.mac-dock-item { width: 40px; height: 40px; border-radius: 11px; }
	.mac-dock-ico { font-size: 18px; }
	/* hide low-priority items on small screens */
	.mac-dock-item:nth-child(4), .mac-dock-item:nth-child(5) { display: none; }
}

/* ============================================================
   macOS Spotlight search
   ============================================================ */
#mac-spotlight {
	position: fixed;
	inset: 0;
	z-index: 9500;
	display: none;
	align-items: flex-start;
	justify-content: center;
	background: rgba(0,0,0,.18);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
#mac-spotlight.open { display: flex; }
.mac-spotlight-box {
	margin-top: 16vh;
	width: min(92vw, 620px);
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	background: rgba(245,245,247,.78);
	-webkit-backdrop-filter: saturate(180%) blur(34px);
	backdrop-filter: saturate(180%) blur(34px);
	border: 1px solid rgba(255,255,255,.6);
	border-radius: 18px;
	box-shadow: 0 24px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.7);
	transform: translateY(-12px) scale(.98);
	opacity: 0;
	transition: transform .18s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
}
#mac-spotlight.open .mac-spotlight-box { transform: translateY(0) scale(1); opacity: 1; }
.mac-spotlight-box i { font-size: 24px; color: var(--mac-text-soft); }
.mac-spotlight-box input {
	flex: 1;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 26px !important;
	font-weight: 400;
	color: var(--mac-text) !important;
	outline: none !important;
	padding: 0 !important;
	height: auto !important;
}
.mac-spotlight-box input::placeholder { color: var(--mac-text-soft); }
.mac-spotlight-hint {
	font-size: 12px;
	color: var(--mac-text-soft);
	background: rgba(0,0,0,.06);
	padding: 3px 8px;
	border-radius: 6px;
	white-space: nowrap;
}

/* ============================================================
   macOS window-frame treatment for product cards
   (title bar with traffic-light buttons over the image)
   ============================================================ */
.us-module-item, .us-news-block, .us-reviews-block { position: relative; }
.us-module-item::before {
	content: "";
	position: absolute;
	top: 10px; left: 12px;
	z-index: 3;
	width: 10px; height: 10px; border-radius: 50%;
	background: #ff5f57;
	box-shadow: 16px 0 0 #febc2e, 32px 0 0 #28c840;
	opacity: 0;
	transition: opacity .2s ease;
}
.us-module-item:hover::before { opacity: .9; }

/* ---------- Compact product cards in category listing ---------- */
.us-module-item { padding-top: 20px !important; padding-bottom: 8px !important; }
.us-module-title { margin-top: 4px !important; margin-bottom: 4px !important; height: 36px !important; overflow: hidden !important; }
.us-module-model { margin-bottom: 3px !important; }
.us-module-rating { margin-bottom: 3px !important; }
.us-module-price { margin-bottom: 5px !important; }
.us-module-img + .us-module-caption,
.us-module-caption { padding-top: 0 !important; }
.us-module-img { margin-bottom: 4px !important; }