/**
 * AUTOLINE — Base layer (Batch 1 of the UI modernization, 2026-07-10).
 * Loaded SITE-WIDE after the theme CSS (mu-plugins/al-base.php, priority 40).
 * Consumes al-design-tokens.css. Scope: foundations only —
 *   1. Woodmart theme-color variables remapped onto the AL tokens
 *      (kills the #00417A / #00386B / #777-vs-#767676 fragmentation at the root,
 *      in git instead of DB theme options — reversible by deleting this block).
 *   2. Global keyboard-focus ring (audit SYS-1).
 *   3. Cookie-notice restyle (off-palette teal, AA contrast failure).
 *   4. Scroll-to-top FAB: brand color + stacked above the bug-report pill.
 *   5. (Batch 2) Global typography: Inter everywhere via the Woodmart font
 *      variables + element fallbacks; heading scale on the AL type tokens;
 *      archive H1 band styles (markup: mu-plugins/al-page-titles.php).
 *      Google-Fonts Roboto/Open Sans dequeued in al-base.php.
 * Component work (buttons, forms, PDP…) belongs to later batches, not here.
 */

/* ── 1. Woodmart palette → AL tokens ─────────────────────────────────────
   html:root (0,1,1) — must outrank Woodmart's theme-settings INLINE style,
   which re-declares these on :root (0,1,0) later in the document. */
html:root {
	--wd-primary-color: var(--al-blue-700);        /* was #00417A */
	--wd-alternative-color: var(--al-amber-500);   /* was #FAA61A */
	--btn-accented-bgcolor: var(--al-blue-700);    /* was #00386B */
	--wd-text-color: var(--al-ink-500);            /* was #777777 */
	--wd-title-color: var(--al-ink-900);           /* was #242424 */
	--wd-link-color: var(--al-ink-700);            /* was #333333 */

	/* Batch 4 — controls at the root: kill the 35px pill buttons/inputs and the
	   2px washed-out form borders everywhere Woodmart draws them from its vars.
	   (Pill shape is reserved for chips/badges — design canon v1.1.) */
	--btn-brd-radius: var(--al-radius-sm); /* the master: :is(.btn,.button,button,[type=submit]) in wd base.css */
	--btn-default-brd-radius: var(--al-radius-sm);
	--btn-accented-brd-radius: var(--al-radius-sm);
	--wd-form-brd-radius: var(--al-radius-sm);
	--wd-form-brd-width: 1px;
	--wd-form-brd-color: var(--al-line-300);
	--wd-form-brd-color-focus: var(--al-blue-500);
	--btn-default-bgcolor: var(--al-bg-100);       /* was #f7f7f7 */
	--btn-default-bgcolor-hover: var(--al-blue-100);
	--btn-default-color: var(--al-ink-900);
	--btn-default-color-hover: var(--al-blue-700);

	/* Batch 5 — Woodmart notice palette → canon tints (the theme paints
	   .woocommerce-error with its "warning" pair, success with "success"). */
	--notices-warning-bg: var(--al-danger-100);
	--notices-warning-color: var(--al-danger-600);
	--notices-success-bg: var(--al-success-100);
	--notices-success-color: var(--al-success-600);

	/* Batch 2 — one typeface: every Woodmart font slot → Inter (self-hosted) */
	--wd-text-font: var(--al-font-sans);           /* was Roboto */
	--wd-title-font: var(--al-font-sans);
	--wd-entities-title-font: var(--al-font-sans);
	--wd-header-el-font: var(--al-font-sans);
	--wd-widget-title-font: var(--al-font-sans);
	--wd-alternative-font: var(--al-font-sans);    /* was Open Sans */
}

/* ── 1b. Typography base (Batch 2) ────────────────────────────────────────
   Element-level fallbacks for theme/plugin rules that hard-code "Roboto",
   and a heading scale on the AL tokens. Low specificity by design: bare
   element selectors only reach content that has no component styling —
   exactly the legacy pages the audit flagged. Component CSS still wins. */
body { font-family: var(--al-font-sans); }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--al-font-sans);
	color: var(--al-ink-900);
	line-height: var(--al-lh-tight);
	text-wrap: balance;
}
h1 { font-size: var(--al-fs-2xl); font-weight: var(--al-fw-bold); }
h2 { font-size: var(--al-fs-xl);  font-weight: var(--al-fw-bold); }
h3 { font-size: var(--al-fs-lg);  font-weight: var(--al-fw-semibold); }
h4 { font-size: var(--al-fs-md);  font-weight: var(--al-fw-semibold); }
h5 { font-size: var(--al-fs-sm);  font-weight: var(--al-fw-semibold); }
h6 { font-size: var(--al-fs-xs);  font-weight: var(--al-fw-bold); letter-spacing: .05em; text-transform: uppercase; }
@media (max-width: 768px) {
	h1 { font-size: var(--al-fs-xl); }
	h2 { font-size: var(--al-fs-lg); }
}

/* Archive H1 band (product category / brand / shop — markup from al-page-titles.php).
   It renders as a direct child of Woodmart's 12-col grid (.wd-content-layout.wd-grid-g)
   — without an explicit full-row span it collapses into one track and shoves the
   product area below the sidebar (found in verification). */
.al-archive-hdr {
	grid-column: 1 / -1;
	grid-row: 1; /* DOM order puts it AFTER the sidebar — pin it to the first row
	                so auto-placement flows sidebar + content to row 2 */
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin: 6px 0 4px;
}
/* Class-based (0,1,0) so the theme's own h1 sizing/weight rules can't override */
.al-archive-hdr .al-archive-title {
	margin: 0;
	font-family: var(--al-font-sans);
	font-size: var(--al-fs-2xl);
	font-weight: var(--al-fw-bold);
	line-height: var(--al-lh-tight);
	color: var(--al-ink-900);
}
.al-archive-count {
	font-size: var(--al-fs-sm);
	color: var(--al-ink-500);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
@media (max-width: 768px) {
	.al-archive-hdr .al-archive-title { font-size: var(--al-fs-xl); }
}

/* Card-title 2-line clamp: add the STANDARD line-clamp property — newer Chromium
   computes display:-webkit-box as flow-root (new spec) and can drop the ellipsis
   on the legacy-only syntax. Belt-and-braces over al-home/al-shop rules. */
.al-card .al-cnm {
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden !important;
}

/* ── 2. Keyboard focus — visible on every interactive element ─────────────
   The theme suppresses outlines globally; !important is required to win. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
	outline: 3px solid rgba(22, 96, 168, .45) !important;
	outline-offset: 2px !important;
}

::selection { background: var(--al-blue-100); color: var(--al-ink-900); }

/* ── 3. Cookie notice — brand bar, AA-compliant button ────────────────────
   Plugin sets its colors inline from settings; !important is required. */
#cookie-notice {
	background: rgba(20, 24, 31, .97) !important;
	box-shadow: 0 -4px 16px rgba(20, 24, 31, .25) !important;
}
#cookie-notice .cookie-notice-container {
	padding: 10px 20px !important;
	font-family: var(--al-font-sans) !important;
}
#cookie-notice #cn-notice-text,
#cookie-notice .cn-text-container {
	color: rgba(255, 255, 255, .88) !important;
	font-size: 13px !important;
}
#cookie-notice #cn-notice-text a,
#cookie-notice .cn-text-container a {
	color: #fff !important;
	text-decoration: underline !important;
}
#cookie-notice .cn-button {
	background: #fff !important;
	color: var(--al-ink-900) !important;
	border-radius: var(--al-radius-pill) !important;
	padding: 7px 18px !important;
	font: var(--al-fw-semibold) 13px/1.2 var(--al-font-sans) !important;
	text-transform: none !important;
	margin-left: 12px !important;
	transition: background var(--al-dur-fast) var(--al-ease);
}
#cookie-notice .cn-button:hover { background: var(--al-blue-100) !important; }

/* ── 4. Scroll-to-top FAB — brand, stacked above the bug-report pill ──────
   (bug pill sits at bottom:16px/right:16px; see mu-plugins/al-bug-report.php) */
.scrollToTop {
	right: 16px !important;
	bottom: 72px !important;
	background: var(--al-blue-700) !important;
	color: #fff !important;
	border-radius: 50% !important;
	box-shadow: var(--al-shadow-3) !important;
	transition: background var(--al-dur-fast) var(--al-ease);
}
.scrollToTop:hover { background: var(--al-blue-800) !important; }

/* While the cookie notice is visible it covers the bottom edge (z-index 100000,
   ~56px tall desktop / ~148px mobile) — lift the pill + FAB clear of it.
   Browsers without :has() degrade to the pill being behind the bar until consent. */
body:has(#cookie-notice:not(.cookie-notice-hidden)) #al-bug-tab { bottom: 76px !important; }
body:has(#cookie-notice:not(.cookie-notice-hidden)) .scrollToTop { bottom: 132px !important; }
/* Tablet: the notice text wraps to ~3 lines (taller bar) */
@media (max-width: 1180px) {
	body:has(#cookie-notice:not(.cookie-notice-hidden)) #al-bug-tab { bottom: 124px !important; }
	body:has(#cookie-notice:not(.cookie-notice-hidden)) .scrollToTop { bottom: 180px !important; }
}
@media (max-width: 768px) {
	body:has(#cookie-notice:not(.cookie-notice-hidden)) #al-bug-tab { bottom: 168px !important; }
	body:has(#cookie-notice:not(.cookie-notice-hidden)) .scrollToTop { bottom: 224px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.scrollToTop, #cookie-notice .cn-button { transition: none; }
}

/* ── B7: while an off-canvas panel is open (filters, mini-cart), the floating pill +
   back-to-top get out of the way — they overlapped the drawer's apply button ── */
body:has(aside.sidebar-container.wd-opened) #al-bug-tab,
body:has(aside.sidebar-container.wd-opened) .scrollToTop,
body:has(.cart-widget-side.wd-opened) #al-bug-tab,
body:has(.cart-widget-side.wd-opened) .scrollToTop {
	opacity: 0 !important;
	pointer-events: none !important;
}

/* ── B7: tap targets — header tool icons + footer links reach the 40px minimum on
   touch widths (audit: 30/220 mobile targets under 32px) ── */
@media (max-width: 1024px) {
	.whb-header .wd-tools-element > a { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
	.wd-footer .widget_nav_menu .menu li a { display: inline-block; padding: 8px 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   B8 — rules migrated VERBATIM from the retired theme custom.css (2026-07-11).
   Still load-bearing on live; values kept literal for pixel parity. Everything
   NOT carried here was verified dead (selector absent from live DOM/DB).
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Hide Woodmart's default page-title band (still emitted on /blog/, /offers/) — */
.page-title-default { display: none; }

/* — Header menu: hide wishlist/compare items; legacy spacing/type tweaks — */
.menu-item.item-level-0.menu-item-wishlist { display: none !important; }
.menu-item.item-level-0.menu-item-compare { display: none !important; }
.menu-mega-dropdown .sub-menu > li { margin-bottom: 9px; }
.mega-menu-list .sub-sub-menu li a, .menu-mega-dropdown .sub-sub-menu li a { line-height: 9px; }
.searchform input[type="text"] { font-size: 13px; }
.widget li, .woodmart-widget li, div[class^="vc_wp"] li { margin-bottom: 6px; }

/* — Menu link colors (2nd level navy, 3rd level black) — */
.sub-sub-menu li a { color: #000000 !important; }
.sub-menu li a {
	color: var(--al-blue-700);
	-webkit-text-stroke-width: 0.1px;
	-webkit-text-stroke-color: black;
}

/* — Wholesale-prices plugin noise: hide its computed-price + min/step spans
     (MOQ/step is enforced by our own buy UI) — */
.original-computed-price { display: none; }
.wholesale_price_minimum_order_quantity { display: none !important; }
.wholesale_price_order_quantity_step { display: none !important; }

/* — Cookie notice: suppress the plugin's own close icon (bar restyle above) — */
#cn-close-notice,
.cn-close-icon { display: none !important; }

/* — wpce frontend-editor label guard (labels hidden on the live site,
     visible inside the WPBakery frontend editor) — */
.editor-label { display: none; }
.vc_editor .editor-label { display: block !important; color: #888; font-size: 12px; }

/* — Wholesale STATUS indicator (NOT a button) — green "active" dot + label — */
.al-wholesale-menutag { display: inline-flex !important; align-items: center; }
.al-wholesale-menutag > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #eef3f8;
	color: #2a3b52;
	font-size: 11.5px;
	font-weight: 600;
	padding: 3px 11px;
	border-radius: 4px;
	line-height: 1.5;
	white-space: nowrap;
	cursor: default;
}
.al-wholesale-menutag > span::before {
	content: "";
	width: 7px; height: 7px; border-radius: 50%;
	background: #2bbf5c; flex: 0 0 auto;
	animation: al-wh-pulse 2.4s ease-in-out infinite;
}
@keyframes al-wh-pulse {
	0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(43, 191, 92, .5); }
	50%      { opacity: .55; box-shadow: 0 0 0 4px rgba(43, 191, 92, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.al-wholesale-menutag > span::before,
	.al-wholesale-strip::before { animation: none !important; }
}
/* Mobile/tablet: thin status strip under the header (menu badge is in the drawer there) */
.al-wholesale-strip { display: none; }
@media (max-width: 1024px) {
	.al-wholesale-strip {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		background: #00386b;
		color: #fff;
		font-size: 12px;
		font-weight: 600;
		padding: 6px 12px;
	}
	.al-wholesale-strip::before {
		content: "";
		width: 7px; height: 7px; border-radius: 50%;
		background: #2bbf5c;
		animation: al-wh-pulse 2.4s ease-in-out infinite;
	}
}

/* — Role-based show/hide WITHOUT removing the element from the DOM
     (DOM-removal via WPBakery "Visible for roles" breaks WoodMart Swiper
     carousels → vertical rows). Add these classes in "Extra class name". — */
body.wholesale .hide-for-wholesale { display: none !important; }
body:not(.wholesale) .show-for-wholesale { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Categories mega-menu — Electronics-3 style (2026-06), migrated from custom.css.
   Scope: .wd-dropdown-cats / .whb-wjlcubfdmlq3d7jvmt23 ("ΚΑΤΗΓΟΡΙΕΣ").
   JS hover-intent lives in js/megamenu.js (.al-mm-open).
   ═══════════════════════════════════════════════════════════════════════════ */
.whb-wjlcubfdmlq3d7jvmt23 .menu-open-label{ font-size:0 !important; }
.whb-wjlcubfdmlq3d7jvmt23 .menu-open-label::after{
	content:"ΚΑΤΗΓΟΡΙΕΣ";
	font-size:13px; font-weight:600; letter-spacing:.4px;
}
.whb-wjlcubfdmlq3d7jvmt23 .menu-opener.has-bg{ border-radius:10px !important; }

/* Main category list: light panel, LEFT side rounded (unified with flyout) */
.wd-dropdown-cats .wd-nav-vertical{
	background:#fff;
	border-radius:14px 0 0 14px;
	padding:10px;
	box-shadow:-8px 16px 40px -8px rgba(0,0,0,.16);
}
.wd-dropdown-cats .wd-nav-vertical > li.menu-item{ margin:2px 0; }
.wd-dropdown-cats .wd-nav-vertical > li.menu-item > .woodmart-nav-link{
	border-radius:10px;
	padding:10px 16px;
	font-weight:600;
	transition:background .15s ease, color .15s ease;
}
.wd-dropdown-cats .wd-nav-vertical .wd-nav-img{
	width:26px; height:26px; object-fit:contain; margin-right:12px; border-radius:6px;
}

/* Active / hover main item: orange highlight */
.wd-dropdown-cats .wd-nav-vertical > li.menu-item:hover > .woodmart-nav-link,
.wd-dropdown-cats .wd-nav-vertical > li.menu-item.current-menu-item > .woodmart-nav-link{
	background:#f5a623 !important;
	color:#1f2147 !important;
}
.wd-dropdown-cats .wd-nav-vertical > li.menu-item:hover > .woodmart-nav-link .nav-link-text,
.wd-dropdown-cats .wd-nav-vertical > li.menu-item.current-menu-item > .woodmart-nav-link .nav-link-text{
	color:#1f2147 !important;
}

/* JS hover-intent (.al-mm-open): one category active at a time; its flyout is
   FORCED open (scoped to the open menu) so the diagonal mouse move never loses it. */
.wd-dropdown-cats .wd-nav-vertical > li.menu-item.al-mm-open > .woodmart-nav-link{
	background:#f5a623; color:#1f2147;
}
.wd-dropdown-cats .wd-nav-vertical > li.menu-item.al-mm-open > .woodmart-nav-link .nav-link-text{ color:#1f2147; }
.whb-wjlcubfdmlq3d7jvmt23:hover .wd-dropdown-cats .wd-nav-vertical > li.menu-item.al-mm-open > .wd-dropdown-menu{
	opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
	display:block !important; transform:none !important;
}

/* Flyout PINNED column-relative (static li) + full height: no Y-jump, no hover gap */
.wd-dropdown-cats .wd-nav-vertical > li.menu-item.menu-mega-dropdown{ position:static !important; }
.wd-dropdown-cats .wd-dropdown-menu.wd-design-sized{ top:0 !important; bottom:0 !important; }

/* Subcategory flyout: RIGHT side rounded, merges with the column into one panel */
.wd-dropdown-cats .wd-dropdown-menu.wd-design-sized{
	border-radius:0 14px 14px 0 !important;
	box-shadow:10px 16px 44px -8px rgba(0,0,0,.16);
	background:#fff;
	overflow:hidden;
	width:940px !important;
}

/* 2nd-level subcategory text in brand blue (NOT 3rd level) */
.wd-dropdown-cats .wd-dropdown-menu .wd-sub-menu.mega-menu-list > li > a,
.wd-dropdown-cats .wd-dropdown-menu .wd-sub-menu.mega-menu-list > li > a > .nav-link-text{
	color:#00386b !important;
}

/* Center "ΚΑΤΗΓΟΡΙΕΣ" in the wide button (icon absolute-left; keep display = keep width) */
.whb-wjlcubfdmlq3d7jvmt23 .menu-opener{ position:relative !important; text-align:center !important; }
.whb-wjlcubfdmlq3d7jvmt23 .menu-opener .menu-opener-icon{ position:absolute !important; left:16px; top:50%; transform:translateY(-50%); margin:0 !important; }
.whb-wjlcubfdmlq3d7jvmt23 .menu-opener .menu-open-label{ flex:1 1 auto !important; text-align:center !important; margin:0 !important; }

/* Keep the left-column category icons/images visible */
.wd-dropdown-cats .wd-nav-vertical .wd-nav-img,
.wd-dropdown-cats .wd-nav-vertical .woodmart-nav-link img,
.wd-dropdown-cats .wd-nav-vertical i[class*="icon"]{ display:inline-block !important; opacity:1 !important; visibility:visible !important; }

/* Window: fixed WIDTH + fixed TOP; height fits content */
.wd-dropdown-cats .wd-nav-vertical > li.menu-item{ --wd-dropdown-width:940px !important; }
.wd-dropdown-cats .wd-dropdown-menu.wd-design-sized{ min-height:100% !important; height:auto !important; }

/* Dim the rest of the screen while the categories menu is open */
.whb-wjlcubfdmlq3d7jvmt23{ position:relative; }
.whb-wjlcubfdmlq3d7jvmt23:hover{ z-index:9990; }
.whb-wjlcubfdmlq3d7jvmt23:hover::after{
	content:""; position:fixed; inset:0;
	background:rgba(0,0,0,.5);
	z-index:-1; pointer-events:none;
}

/* WPBakery FRONTEND EDITOR: don't auto-open/dim the categories menu over the canvas */
.vc_editor .wd-dropdown.wd-dropdown-cats { display: none !important; }
.vc_editor .wd-dropdown-cats .wd-dropdown-menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.vc_editor .whb-wjlcubfdmlq3d7jvmt23:hover::after,
.vc_editor .whb-wjlcubfdmlq3d7jvmt23::after { content: none !important; background: transparent !important; }
.vc_editor .whb-wjlcubfdmlq3d7jvmt23:hover { z-index: auto !important; }