/* Header actions + header/footer polish on top of Blocksy's header builder. */
.sy-hdr { display: flex; align-items: center; gap: 17px; font-size: 14.5px; }
.sy-hdr__item { position: relative; display: inline-flex; align-items: center; gap: 8px; color: var(--sy-ink, #263653); text-decoration: none; white-space: nowrap; transition: color .2s; }
.sy-hdr__item:hover { color: var(--sy-muted, #59677a); }
.sy-hdr__icon { flex: none; }
.sy-hdr__quote .sy-hdr__count { position: absolute; left: 11px; top: -8px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--sy-navy, #283951); color: #fff; font-size: 10.5px; line-height: 17px; text-align: center; transform: scale(1); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.sy-hdr__quote .sy-hdr__count:empty, .sy-hdr__quote .sy-hdr__count[data-zero] { transform: scale(0); }
.sy-hdr__label { margin-left: 2px; }
.sy-hdr__cta { display: inline-flex; align-items: center; gap: 12px; padding: 0 0 6px; border-bottom: 1px solid currentColor; color: var(--sy-ink, #263653); text-decoration: none; font-weight: 500; white-space: nowrap; }
.sy-hdr__cta .sy-hdr__icon { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.sy-hdr__cta:hover .sy-hdr__icon { transform: translate(2px, -2px); }

/* Blocksy header: one clean row, hairline border, menu with animated underline. */
#header [data-row="middle"] { border-bottom: 1px solid var(--sy-line, #d9e0e6); box-shadow: none !important; }
#header [data-id="menu"] > ul > li > a { position: relative; font-size: 15.5px; font-weight: 400; text-transform: none; color: var(--sy-ink, #263653); }
#header [data-id="menu"] > ul > li > a::after { content: ""; position: absolute; left: var(--menu-item-padding, 12px); right: var(--menu-item-padding, 12px); bottom: 26%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
#header [data-id="menu"] > ul > li:hover > a::after, #header [data-id="menu"] > ul > li.current-menu-item > a::after, #header [data-id="menu"] > ul > li.current-menu-ancestor > a::after { transform: scaleX(1); }
#header .sub-menu { border-radius: var(--sy-radius, 2px) !important; box-shadow: 0 20px 44px rgba(38, 54, 83, .14) !important; padding: 10px 0 !important; }
#header .sub-menu a { font-size: 14.5px; }
#header .ct-header-cart .ct-cart-item { position: relative; }

/* Footer: deep navy, calm type. */
#footer { --theme-text-color: rgba(255, 255, 255, .78); --theme-link-initial-color: rgba(255, 255, 255, .86); --theme-link-hover-color: #fff; background: #1d2a3d !important; color: rgba(255, 255, 255, .78); }
#footer [data-row] { background: transparent !important; border-color: rgba(255, 255, 255, .12) !important; }
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6, #footer .widget-title { color: #fff !important; }
#footer a { transition: color .2s; }
#footer .ct-contact-info .contact-info, #footer .ct-contact-info span { color: rgba(255, 255, 255, .86) !important; }
#footer .ct-icon-container { background: rgba(255, 255, 255, .08) !important; color: #fff !important; }

@media (max-width: 1200px) {
	.sy-hdr__label { display: none; }
	.sy-hdr { gap: 16px; }
}
@media (max-width: 999px) {
	.sy-hdr__vip span, .sy-hdr__cta { display: none; }
}

@keyframes sy-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.sy-hdr__quote .sy-hdr__count.is-bump { animation: sy-bump .45s cubic-bezier(.3, 1.6, .5, 1); }

/* Align the header actions with the menu (widget wrappers add margins). */
#header [data-id="widget-area-1"] { display: flex; align-items: center; }
#header [data-id="widget-area-1"] .ct-widget, #header [data-id="widget-area-1"] p, #header [data-id="widget-area-1"] .widget { margin: 0 !important; padding: 0 !important; }
#header [data-id="widget-area-1"] .sy-hdr { height: 100%; }

/* Dropdown: light panel, calm rows, soft hover. */
#header [data-id="menu"] .sub-menu { --dropdown-background: #fff; background: #fff !important; min-width: 240px; border: 1px solid var(--sy-line, #d9e0e6); padding: 8px !important; }
#header [data-id="menu"] .sub-menu li { border: 0 !important; }
#header [data-id="menu"] .sub-menu a { color: var(--sy-ink, #263653) !important; padding: 10px 14px !important; border-radius: var(--sy-radius, 2px); font-weight: 400; transition: background .2s, padding-left .25s cubic-bezier(.2, .7, .2, 1); }
#header [data-id="menu"] .sub-menu a:hover { background: var(--sy-mist, #eef4f5); padding-left: 18px !important; }
#header [data-id="menu"] .sub-menu .ct-menu-link::before, #header [data-id="menu"] .sub-menu li::before { display: none !important; }
#header [data-id="menu"] .sub-menu { animation: sy-drop .22s cubic-bezier(.2, .7, .2, 1); }
@keyframes sy-drop { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { #header [data-id="menu"] .sub-menu { animation: none; } }

/* Wishlist (heart) */
.sy-hdr__wish { padding: 4px; margin: -4px; }
.sy-hdr__wish .sy-hdr__icon { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), fill .2s; }
.sy-hdr__wish:hover .sy-hdr__icon { transform: scale(1.12); fill: rgba(40, 57, 81, .12); }
@media (prefers-reduced-motion: reduce) { .sy-hdr__wish .sy-hdr__icon { transition: none; } }
#header [data-id="menu"] > ul > li > a { padding-inline: 11px !important; }

/* Laptops: icon-only header actions so the whole menu (incl. Ready to ship) stays visible. Names stay readable to screen readers. */
@media (max-width: 1599.98px) {
	.sy-hdr { gap: 16px; }
	.sy-hdr__item > span:not(.sy-hdr__count) { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
	.sy-hdr__item { padding: 4px; margin: -4px; }
}

/* ---- Two-tier header (D-014) ---- */
/* Top row: thin, dark, company line left + account/quote actions right (desktop only). */
#header [data-row="top"], #header [data-row="top"][data-transparent-row="yes"]:not([data-sticky*="yes"]) { background: #0b1019 !important; border: 0 !important; } /* Always a solid black bar, also over the slides (user 2026-10-12). */
#header [data-row="top"] > .ct-container { min-height: 40px; align-items: center; }
#header [data-row*="top"] .ct-header-text, #header [data-row*="top"] .ct-header-text p { margin: 0; font-size: 12.5px; letter-spacing: .02em; color: rgba(255, 255, 255, .72); }
#header [data-row*="top"] .sy-hdr { gap: 22px; font-size: 13px; }
#header [data-row*="top"] .sy-hdr__item { color: rgba(255, 255, 255, .82); padding: 0; margin: 0; }
#header [data-row*="top"] .sy-hdr__item:hover { color: #fff; }
#header [data-row*="top"] .sy-hdr__item > span:not(.sy-hdr__count) { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
#header [data-row*="top"] .sy-hdr__icon { width: 15px; height: 15px; }
#header [data-row*="top"] .sy-hdr__quote .sy-hdr__count { left: 9px; top: -7px; background: #fff; color: var(--sy-navy, #283951); }
/* Main row call to action (user 2026-10-21: the gold pill looked out of place; Enigwatch reference): flat navy, 2 px
   corners, small caps with tracking, no gradient or glow. Over the homepage slides: a fine white outline on smoked
   glass. */
#header [data-id="button"] .ct-button { min-height: 42px; padding: 0 20px; border: 1px solid var(--sy-navy, #283951); border-radius: 2px; background: var(--sy-navy, #283951); color: #fff !important; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; box-shadow: none; transition: background .25s, border-color .25s, color .25s; }
#header [data-id="button"] .ct-button:hover { background: #1b2840; border-color: #1b2840; }
#header [data-id="button"] .ct-button:focus-visible { outline: 2px solid var(--sy-navy, #283951); outline-offset: 3px; }
#header [data-transparent-row="yes"]:not([data-sticky*="yes"]) [data-id="button"] .ct-button { background: rgba(8, 12, 20, .35); border-color: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#header [data-transparent-row="yes"]:not([data-sticky*="yes"]) [data-id="button"] .ct-button:hover { background: #fff; border-color: #fff; color: var(--sy-navy, #283951) !important; }
/* Transparent main row over the homepage slides: white logo, menu and icons; solid once it sticks. */
#header [data-transparent-row="yes"]:not([data-sticky*="yes"]) { background: transparent !important; border-bottom-color: transparent !important; box-shadow: none !important; }
/* Stuck (solid) header: a soft shadow instead of a grey line. */
#header [data-sticky*="yes"] [data-row="middle"] { border-bottom-color: transparent !important; box-shadow: 0 10px 30px -18px rgba(21, 33, 52, .35) !important; }
#header [data-transparent-row="yes"]:not([data-sticky*="yes"]) .site-logo-container img { filter: brightness(0) invert(1); transition: filter .3s; }
#header [data-transparent-row="yes"]:not([data-sticky*="yes"]) [data-id="menu"] > ul > li > a,
#header [data-transparent-row="yes"]:not([data-sticky*="yes"]) .sy-hdr__item,
#header [data-transparent-row="yes"]:not([data-sticky*="yes"]) .ct-header-cart,
#header [data-transparent-row="yes"]:not([data-sticky*="yes"]) .ct-header-trigger { color: #fff !important; --theme-icon-color: #fff; }
#header [data-transparent-row="yes"]:not([data-sticky*="yes"]) .ct-header-trigger .ct-icon rect, #header [data-transparent-row="yes"]:not([data-sticky*="yes"]) .ct-header-cart svg { fill: #fff; }
@media (prefers-reduced-motion: reduce) { #header [data-id="button"] .ct-button { transition: none; } }

/* Cart icon only when the cart has items (Header::cart_flag); it fades in when the first item is added. */
html:not(.sy-has-cart) #header [data-id="cart"], html:not(.sy-has-cart) #header .ct-header-cart { display: none !important; }
html.sy-has-cart #header .ct-header-cart { animation: sy-cart-in .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes sy-cart-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { html.sy-has-cart #header .ct-header-cart { animation: none; } }

/* ---- "Get a quote" panel (templates/quote-panel.php, D-034) ---- */
.sy-hdr__qlist { display: none; position: relative; }
@media (max-width: 999.98px) { .sy-hdr__qlist { display: inline-flex; } }
#header [data-row*="top"] .sy-hdr__quote .sy-hdr__count { left: 9px; top: -7px; background: var(--sy-brass, #b8914a); color: #fff; }
.sy-qp { --qp-ink: #1c2840; --qp-muted: #5e6b7e; --qp-line: #e2e7ec; --qp-navy: var(--sy-navy, #283951); --qp-ease: cubic-bezier(.2, .7, .2, 1); width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 10px; background: #fff; color: var(--qp-ink); box-shadow: 0 40px 90px -30px rgba(5, 10, 20, .6); }
.sy-qp::backdrop { background: rgba(10, 16, 28, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sy-qp[open] { animation: sy-qp-in .35s var(--qp-ease); }
.sy-qp[open]::backdrop { animation: sy-qp-fade .25s ease; }
.sy-qp__box { position: relative; padding: 44px 48px 36px; }
.sy-qp__close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--qp-muted); cursor: pointer; }
.sy-qp__close:hover { background: #f3f6f8; color: var(--qp-ink); }
.sy-qp__kicker { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sy-brass, #b8914a); }
.sy-qp__title { margin: 0 0 24px; font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; color: var(--qp-ink); }
.sy-qp__demo { margin: 0 0 24px; border-radius: 6px; overflow: hidden; background: #0d1422; aspect-ratio: 16 / 9; }
.sy-qp__demo video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sy-qp__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0 0 28px; padding: 0; list-style: none; counter-reset: none; }
.sy-qp__steps li { position: relative; display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid var(--qp-line); font-size: 13.5px; line-height: 1.5; color: var(--qp-muted); }
.sy-qp__steps strong { font-size: 15px; font-weight: 600; color: var(--qp-ink); }
.sy-qp__ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 50%; background: #f3f6f8; color: var(--qp-navy); }
.sy-qp__n { position: absolute; top: 18px; right: 0; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: #a3adb9; }
.sy-qp__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sy-qp__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 1px solid var(--qp-ink); border-radius: 2px; background: #fff; color: var(--qp-ink); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.sy-qp__btn:hover { background: var(--qp-ink); color: #fff; }
.sy-qp__btn--primary { border-color: var(--qp-navy); background: var(--qp-navy); color: #fff; }
.sy-qp__btn--primary:hover { background: #1b2840; border-color: #1b2840; color: #fff; }
.sy-qp__btn:focus-visible, .sy-qp__link:focus-visible, .sy-qp__close:focus-visible { outline: 2px solid var(--qp-navy); outline-offset: 3px; }
.sy-qp__fine { margin: 18px 0 0; font-size: 13px; color: var(--qp-muted); }
.sy-qp__fine a, .sy-qp__link { padding: 0; border: 0; background: none; color: var(--qp-ink); font: inherit; text-decoration: underline; text-decoration-color: var(--qp-line); text-underline-offset: 3px; cursor: pointer; }
.sy-qp__items { display: grid; gap: 2px; max-height: 44vh; margin: 0 0 24px; padding: 0; overflow: auto; list-style: none; }
.sy-qp__items a { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--qp-line); color: var(--qp-ink); text-decoration: none; }
.sy-qp__items img, .sy-qp__ph { flex: none; width: 64px; height: 64px; border-radius: 4px; object-fit: cover; background: #f1f3f5; }
.sy-qp__items strong { display: block; font-size: 15px; font-weight: 500; }
.sy-qp__items small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--qp-muted); letter-spacing: .02em; }
.sy-qp__next p { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--qp-muted); }
@media (max-width: 640px) {
	.sy-qp { width: 100vw; max-width: none; max-height: 92vh; margin: auto 0 0; border-radius: 14px 14px 0 0; }
	.sy-qp__box { padding: 32px 20px 24px; }
	.sy-qp__title { font-size: 23px; }
	.sy-qp__steps { grid-template-columns: 1fr; gap: 0; }
	.sy-qp__steps li { grid-template-columns: 44px 1fr; column-gap: 14px; padding: 14px 0; }
	.sy-qp__steps li .sy-qp__ico { grid-row: span 2; margin: 0; }
	.sy-qp__n { display: none; }
	.sy-qp__actions .sy-qp__btn { flex: 1 1 100%; }
}
@keyframes sy-qp-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes sy-qp-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sy-qp[open], .sy-qp[open]::backdrop { animation: none; } }
html.sy-qp-open { overflow: hidden; }
.sy-qp__steps li { align-content: start; grid-template-rows: auto auto auto 1fr; }
.sy-qp__close { border: 0 !important; box-shadow: none !important; outline: 0; }
.sy-qp__close:focus-visible { outline: 2px solid var(--qp-navy); outline-offset: 2px; }
.sy-qp__next .sy-qp__fine { margin: 18px 0 0; }
.sy-qp__box:focus { outline: 0; }

/* With the demo loop: video left, the three steps stacked right, actions below (fits a laptop screen). */
@media (min-width: 900px) {
	.sy-qp:has(.has-demo:not([hidden])) { width: min(980px, calc(100vw - 48px)); }
	.sy-qp__view.has-demo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 36px; align-items: start; }
	.sy-qp__view.has-demo > .sy-qp__kicker, .sy-qp__view.has-demo > .sy-qp__title, .sy-qp__view.has-demo > .sy-qp__actions, .sy-qp__view.has-demo > .sy-qp__fine { grid-column: 1 / -1; }
	.sy-qp__view.has-demo .sy-qp__demo { margin: 0; }
	.sy-qp__view.has-demo .sy-qp__steps { grid-template-columns: 1fr; gap: 0; margin: 0; }
	.sy-qp__view.has-demo .sy-qp__steps li { grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 14px; padding: 14px 0; }
	.sy-qp__view.has-demo .sy-qp__steps li:first-child { padding-top: 0; border-top: 0; }
	.sy-qp__view.has-demo .sy-qp__ico { grid-row: span 2; width: 40px; height: 40px; margin: 0; }
	.sy-qp__view.has-demo .sy-qp__n { display: none; }
	.sy-qp__view.has-demo > .sy-qp__actions { margin-top: 28px; }
}
