/**
 * PS Design System — chrome (GLOBAL: topbar, header, footer).
 * One frame for the whole store: ink bars top and bottom, each carrying
 * the CMYK registration strip — the mark a real press sheet wears.
 */

/* ---- topbar (ink bar + strip) -------------------------------------- */

/* The header template renders twice (desktop + mobile), so the id-class can
   appear nested; paint every layer ink rather than fighting the stack. */
.elementor-element-d9532d0,
.elementor-element-d9532d0 .e-con,
.elementor-element-d9532d0 .elementor-widget-haru-text-scroll,
.elementor-element-d9532d0 .haru-text-scroll {
	background-color: var(--ps-ink) !important;
	background-image: none !important;
}

.elementor-element-d9532d0 {
	position: relative;
}

.elementor-element-d9532d0::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--ps-strip);
	pointer-events: none;
}

.elementor-element-d9532d0 .haru-text-scroll .text-scroll-item h6 {
	color: #fff !important;
	font-weight: 600;
	letter-spacing: 0.1em;
}

/* Color-bar squares between marquee items, cycling C → M → Y. */
.elementor-element-d9532d0 .haru-text-scroll .text-scroll-item h6::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 2.6em;
	vertical-align: middle;
	background: var(--ps-cyan);
}

.elementor-element-d9532d0 .haru-text-scroll .text-scroll-item:nth-child(3n + 2) h6::after {
	background: var(--ps-magenta);
}

.elementor-element-d9532d0 .haru-text-scroll .text-scroll-item:nth-child(3n) h6::after {
	background: var(--ps-yellow);
}

/* ---- header (paper glass) ------------------------------------------ */

/* The glass blur lives on a ::before, NOT on the header itself: a
   backdrop-filter on #haru-header makes it the CONTAINING BLOCK for
   position:fixed descendants (Chrome grouping-property behavior), and the
   theme's slide-out mini cart (.cart-side-widget/.cart-mask-overlay) is
   fixed markup INSIDE the header — the panel got squashed + clipped into
   the header band (user-reported 2026-07-15). The header is relative
   z-index:98, so the -1 pseudo stays above scrolled-under page content. */
#haru-header {
	background: rgba(var(--ps-paper-rgb), 0.86);
	border-bottom: 1px solid var(--ps-line);
}

#haru-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	-webkit-backdrop-filter: blur(12px) saturate(1.5);
	backdrop-filter: blur(12px) saturate(1.5);
	pointer-events: none;
}

#haru-header .e-con,
#haru-header .elementor-section {
	background-color: transparent !important;
}

/* Nav: ink links, cyan hover, yellow marker under the current page. */
#haru-header .haru-nav-menu > ul > li > a {
	color: var(--ps-heading);
	transition: color 0.15s var(--ps-ease);
}

#haru-header .haru-nav-menu > ul > li > a:hover,
#haru-header .haru-nav-menu > ul > li.active > a,
#haru-header .haru-nav-menu > ul > li.current-menu-item > a {
	color: var(--ps-cyan-deep);
	background: transparent;
}

#haru-header .haru-nav-menu > ul > li.current-menu-item > a {
	position: relative;
}

#haru-header .haru-nav-menu > ul > li.current-menu-item > a::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 2px;
	height: 3px;
	background: linear-gradient(90deg, var(--ps-yellow), var(--ps-yellow-soft));
	border-radius: 2px;
}

/* Header utility icons (search / wishlist / cart / account). */
#haru-header .haru-woo-search__toggle,
#haru-header .haru-woo-wishlist a,
#haru-header .haru-woo-cart a,
#haru-header .haru-woo-account a,
#haru-header .haru-menu-toggle {
	color: var(--ps-heading);
	transition: color 0.15s var(--ps-ease);
}

#haru-header .haru-woo-search__toggle:hover,
#haru-header .haru-woo-wishlist a:hover,
#haru-header .haru-woo-cart a:hover,
#haru-header .haru-woo-account a:hover {
	color: var(--ps-cyan-deep);
}

/* Count bubbles on wishlist/cart. */
#haru-header .haru-woo-wishlist .count,
#haru-header .haru-woo-cart .count {
	background: var(--ps-cyan) !important;
	color: #fff !important;
	font-variant-numeric: tabular-nums;
}

/* ---- footer (ink block + strip + paper-chip logo) ------------------- */

#haru-footer {
	background: var(--ps-ink-2) !important;
	position: relative;
	color: var(--ps-ink-text);
}

#haru-footer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: var(--ps-strip);
	pointer-events: none;
}

#haru-footer .e-con,
#haru-footer .elementor-section {
	background-color: transparent !important;
	background-image: none !important;
}

#haru-footer .haru-heading-title {
	color: #fff !important;
}

#haru-footer,
#haru-footer p,
#haru-footer .haru-contact {
	color: var(--ps-ink-text);
}

#haru-footer a {
	color: var(--ps-ink-text);
	transition: color 0.15s var(--ps-ease);
}

#haru-footer a:hover {
	color: #fff;
}

#haru-footer .haru-footer-link a {
	text-decoration: none;
	background-image: linear-gradient(90deg, var(--ps-cyan), var(--ps-cyan));
	background-repeat: no-repeat;
	background-size: 0 2px;
	background-position: 0 100%;
	transition: color 0.15s var(--ps-ease), background-size 0.2s var(--ps-ease);
	padding-bottom: 2px;
}

#haru-footer .haru-footer-link a:hover {
	background-size: 100% 2px;
}

/* Swap to the dark-background logo variant. */
#haru-footer .haru-logo-footer__default,
#haru-footer .haru-logo-footer__retina {
	display: none !important;
}

#haru-footer .haru-logo-footer__dark {
	display: inline-block !important;
}

/* Contact block: everything legible on ink; the phone reads as a headline. */
#haru-footer .haru-contact,
#haru-footer .haru-contact a {
	font-variant-numeric: tabular-nums;
}

#haru-footer .haru-contact h1,
#haru-footer .haru-contact h2,
#haru-footer .haru-contact h3,
#haru-footer .haru-contact h4,
#haru-footer .haru-contact h5,
#haru-footer .haru-contact h6,
#haru-footer .haru-contact strong,
#haru-footer .haru-contact b,
#haru-footer .haru-contact a {
	color: #fff !important;
}

/* The copyright line, quiet. */
#haru-footer .haru-heading-title--footer-copyright-1 {
	color: var(--ps-ink-text-soft) !important;
	font-weight: 400;
}

/* Payment badges: small paper chips on ink. */
#haru-footer img[alt=""],
#haru-footer .elementor-widget-image img {
	border-radius: 6px;
}