/**
 * AKNB Global — Layout Layer
 * ---------------------------------------------------------------------------
 * Composition of the global shell: announcement bar, header, primary nav +
 * mega-menu, off-canvas drawers (mobile nav / search / cart), trust strips and
 * the footer. Consumes tokens + components only; logical properties throughout
 * for RTL. Structural styling lives here — component "atoms" live in
 * components.css.
 *
 * @package AKNB_Global
 */

/* ===========================================================================
 * SITE SCAFFOLD
 * ======================================================================== */
.aknb-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.aknb-main {
	flex: 1 0 auto;
	outline: none;
}

/* Scrollbar-gutter compensation while a drawer is open (set by app.js) */
.aknb-no-scroll {
	padding-inline-end: var(--aknb-sbw, 0);
}

/* ===========================================================================
 * ANNOUNCEMENT BAR
 * ======================================================================== */
.aknb-announcement {
	background: var(--color-surface-inverse);
	color: var(--color-text-inverse);
	font-size: var(--text-sm);
	overflow: hidden;
	max-block-size: 200px;
	transition: max-block-size var(--dur-slow) var(--ease-standard),
		opacity var(--dur-base) var(--ease-standard);
}
.aknb-announcement.is-dismissing {
	max-block-size: 0;
	opacity: 0;
}
.aknb-announcement__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	min-block-size: var(--announcement-height);
	padding-block: var(--space-2);
	text-align: center;
}
.aknb-announcement__text {
	margin: 0;
	letter-spacing: var(--ls-wide);
}
.aknb-announcement__text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.aknb-announcement__close {
	position: absolute;
	inset-inline-end: var(--gutter);
	display: inline-grid;
	place-items: center;
	inline-size: 28px;
	block-size: 28px;
	color: inherit;
	border-radius: var(--radius-sm);
	opacity: 0.75;
	transition: opacity var(--dur-fast) var(--ease-standard),
		background-color var(--dur-fast) var(--ease-standard);
}
.aknb-announcement__close:hover {
	opacity: 1;
	background: rgba(255, 255, 255, 0.12);
}
.aknb-announcement__inner {
	position: relative;
}

/* ===========================================================================
 * HEADER
 * ======================================================================== */
.aknb-header {
	position: relative;
	z-index: var(--z-header);
	background: var(--color-surface);
	border-block-end: 1px solid var(--color-border);
}
.aknb-header--sticky {
	position: sticky;
	inset-block-start: 0;
	transition: transform var(--dur-base) var(--ease-standard),
		box-shadow var(--dur-base) var(--ease-standard);
}
.aknb-header--sticky.is-condensed {
	box-shadow: var(--shadow-subtle);
}
.aknb-header--sticky.is-hidden {
	transform: translateY(-100%);
}

.aknb-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	min-block-size: var(--header-height);
	padding-block: var(--space-3);
}
.aknb-header--sticky.is-condensed .aknb-header__inner {
	min-block-size: var(--header-height-compact);
}

/* Brand / logo */
.aknb-header__brand {
	flex-shrink: 0;
}
.aknb-header__brand .custom-logo-link,
.aknb-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
}
.aknb-header__brand img,
.aknb-header__brand .custom-logo {
	block-size: auto;
	max-block-size: 40px;
	inline-size: auto;
}
.aknb-logo {
	color: var(--color-text);
}
.aknb-logo__mark {
	display: inline-grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	font-size: var(--text-base);
	letter-spacing: var(--ls-tight);
	color: var(--color-on-primary);
	background: var(--color-primary);
	border-radius: var(--radius-md);
}
.aknb-logo__word {
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	font-size: var(--text-lg);
	letter-spacing: var(--ls-tight);
	color: var(--color-text);
}

/* Burger — mobile only */
.aknb-header__burger {
	display: none;
	flex-shrink: 0;
	color: var(--color-text);
}

/* Desktop search trigger (expandable) */
.aknb-header__search {
	flex: 1 1 auto;
	max-inline-size: 460px;
	margin-inline: auto;
}
.aknb-searchtrigger {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	inline-size: 100%;
	min-block-size: var(--tap-target);
	padding-inline: var(--space-4);
	color: var(--color-text-muted);
	background: var(--color-surface-sunken);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	text-align: start;
	transition: border-color var(--dur-fast) var(--ease-standard),
		background-color var(--dur-fast) var(--ease-standard);
}
.aknb-searchtrigger:hover {
	border-color: var(--color-border-strong);
	background: var(--color-surface);
}
.aknb-searchtrigger:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}
.aknb-searchtrigger__label {
	font-size: var(--text-sm);
}

/* Actions cluster (search-m, account, wishlist, cart) */
.aknb-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	flex-shrink: 0;
	margin-inline-start: auto;
}
.aknb-header__action {
	position: relative;
	color: var(--color-text);
}
.aknb-header__action--search-m {
	display: none;
}

/* Count bubbles (cart + wishlist) */
.aknb-count-bubble,
.aknb-cart-count {
	position: absolute;
	inset-block-start: 2px;
	inset-inline-end: 2px;
	min-inline-size: 18px;
	block-size: 18px;
	padding-inline: 5px;
	display: inline-grid;
	place-items: center;
	font-size: 11px;
	font-weight: var(--fw-semibold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--color-on-secondary);
	background: var(--color-secondary);
	border: 2px solid var(--color-surface);
	border-radius: var(--radius-full);
}
.aknb-cart-count:not(.is-active),
.aknb-count-bubble[hidden] {
	display: none;
}

/* ===========================================================================
 * PRIMARY NAVIGATION + MEGA MENU
 * ======================================================================== */
.aknb-header__nav {
	border-block-start: 1px solid var(--color-border-subtle);
}
.aknb-primary-nav__list {
	display: flex;
	align-items: stretch;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}
.aknb-primary-nav__item {
	position: static; /* mega panel spans full width, anchored to nav row */
	display: flex;
	align-items: stretch;
}
.aknb-primary-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-4) var(--space-4);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text-secondary);
	white-space: nowrap;
	background: none;
	border: none;
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease-standard),
		box-shadow var(--dur-fast) var(--ease-standard);
	box-shadow: inset 0 -2px 0 transparent;
}
.aknb-primary-nav__link:hover,
.aknb-primary-nav__item:hover > .aknb-primary-nav__link,
.aknb-primary-nav__link[aria-expanded="true"] {
	color: var(--color-text);
	box-shadow: inset 0 -2px 0 var(--color-primary);
}
.aknb-primary-nav__link[aria-current="page"] {
	color: var(--color-text);
	box-shadow: inset 0 -2px 0 var(--color-secondary);
}
.aknb-primary-nav__link:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}
.aknb-primary-nav__chev {
	display: inline-flex;
	transition: transform var(--dur-fast) var(--ease-standard);
}
.aknb-primary-nav__link[aria-expanded="true"] .aknb-primary-nav__chev {
	transform: rotate(180deg);
}

/* Mega panel */
.aknb-mega {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	z-index: var(--z-mega-menu);
	background: var(--color-surface);
	border-block-start: 1px solid var(--color-border);
	border-block-end: 1px solid var(--color-border);
	box-shadow: var(--shadow-elevated);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--dur-fast) var(--ease-standard),
		transform var(--dur-fast) var(--ease-standard),
		visibility var(--dur-fast) var(--ease-standard);
	pointer-events: none;
}
.aknb-mega.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}
.aknb-mega__inner {
	padding-block: var(--space-8);
}
.aknb-mega__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}
.aknb-mega__col {
	min-inline-size: 0;
}
.aknb-mega__heading {
	display: block;
	margin-block-end: var(--space-3);
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}
a.aknb-mega__heading:hover {
	color: var(--color-secondary);
}
.aknb-mega__col-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}
.aknb-mega__link {
	display: block;
	padding-block: var(--space-1);
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}
.aknb-mega__link:hover,
.aknb-mega__link[aria-current="page"] {
	color: var(--color-secondary);
}

@media (prefers-reduced-motion: reduce) {
	.aknb-mega {
		transition: none;
	}
}

/* ===========================================================================
 * MOBILE NAV DRAWER
 * ======================================================================== */
.aknb-mobile-nav {
	width: min(360px, 88vw);
}
.aknb-mobile-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.aknb-mobile-nav__list li {
	position: relative;
	border-block-end: 1px solid var(--color-border-subtle);
}
.aknb-mobile-nav__list a {
	display: block;
	padding: var(--space-4) 0;
	padding-inline-end: var(--tap-target);
	font-size: var(--text-md);
	font-weight: var(--fw-medium);
	color: var(--color-text);
}
.aknb-mobile-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding-inline-start: var(--space-4);
	padding-block-end: var(--space-2);
}
.aknb-mobile-nav__list .sub-menu a {
	padding-block: var(--space-3);
	font-size: var(--text-sm);
	font-weight: var(--fw-regular);
	color: var(--color-text-secondary);
}
.aknb-mobile-nav__toggle {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	inline-size: var(--tap-target);
	block-size: calc(var(--tap-target) + var(--space-2));
	display: grid;
	place-items: center;
	color: var(--color-text-secondary);
}
.aknb-mobile-nav__chev {
	inline-size: 10px;
	block-size: 10px;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--dur-fast) var(--ease-standard);
}
.aknb-mobile-nav__toggle[aria-expanded="true"] .aknb-mobile-nav__chev {
	transform: rotate(-135deg);
}
.aknb-mobile-nav__meta {
	display: flex;
	gap: var(--space-3);
	margin-block-start: var(--space-6);
}
.aknb-mobile-nav__metalink {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	flex: 1;
	padding: var(--space-3);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}
.aknb-mobile-nav__metalink:hover {
	border-color: var(--color-border-strong);
	background: var(--color-surface-sunken);
}
.aknb-mobile-nav .aknb-trust--bar {
	margin-block-start: var(--space-6);
}

/* ===========================================================================
 * SEARCH PANEL (top overlay)
 * ======================================================================== */
.aknb-search-panel {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: var(--z-drawer);
	background: var(--color-surface);
	box-shadow: var(--shadow-overlay);
	transform: translateY(-100%);
	transition: transform var(--dur-slow) var(--ease-standard);
	max-block-size: 100vh;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.aknb-search-panel.is-open {
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.aknb-search-panel {
		transition: none;
	}
}
.aknb-search-panel__inner {
	padding-block: var(--space-5) var(--space-10);
}
.aknb-search-panel__form {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-block: var(--space-3);
	border-block-end: 2px solid var(--color-primary);
}
.aknb-search-panel__icon {
	display: inline-flex;
	color: var(--color-text-muted);
	flex-shrink: 0;
}
.aknb-search-panel__input {
	flex: 1;
	min-inline-size: 0;
	border: none;
	background: none;
	font-size: var(--text-xl);
	font-family: var(--font-display);
	color: var(--color-text);
	padding-block: var(--space-2);
}
.aknb-search-panel__input:focus {
	outline: none;
}
.aknb-search-panel__input::placeholder {
	color: var(--color-text-muted);
	font-weight: var(--fw-regular);
}
.aknb-search-panel__close {
	flex-shrink: 0;
}
.aknb-search-panel__body {
	margin-block-start: var(--space-8);
}
.aknb-search-panel__group + .aknb-search-panel__group {
	margin-block-start: var(--space-8);
}
.aknb-search-panel__grouptitle {
	font-size: var(--text-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-block-end: var(--space-4);
}
.aknb-search-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.aknb-search-tag {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	background: var(--color-surface-sunken);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	transition: border-color var(--dur-fast) var(--ease-standard),
		color var(--dur-fast) var(--ease-standard);
}
.aknb-search-tag:hover {
	color: var(--color-secondary);
	border-color: var(--color-border-strong);
}
.aknb-search-panel__loading {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	padding-block: var(--space-4);
}
/* Live results */
.aknb-search-products,
.aknb-search-cats {
	display: grid;
	gap: var(--space-1);
	list-style: none;
	margin: 0;
	padding: 0;
}
.aknb-search-products {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--space-2);
}
.aknb-search-product {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2);
	border-radius: var(--radius-md);
	transition: background-color var(--dur-fast) var(--ease-standard);
}
.aknb-search-product:hover {
	background: var(--color-surface-sunken);
}
.aknb-search-product__img {
	inline-size: 48px;
	block-size: 60px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	background: var(--color-surface-sunken);
	flex-shrink: 0;
}
.aknb-search-product__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}
.aknb-search-product__title {
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.aknb-search-product__price {
	font-size: var(--text-sm);
	color: var(--color-price);
	font-variant-numeric: tabular-nums;
}
.aknb-search-product__price del {
	color: var(--color-price-original);
	margin-inline-end: var(--space-1);
}
.aknb-search-cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	border-radius: var(--radius-md);
}
.aknb-search-cat:hover {
	background: var(--color-surface-sunken);
	color: var(--color-secondary);
}
.aknb-search-cat__count {
	color: var(--color-text-muted);
	font-variant-numeric: tabular-nums;
}
.aknb-search-panel__all {
	display: inline-flex;
	margin-block-start: var(--space-5);
	font-size: var(--text-sm);
	font-weight: var(--fw-medium);
	color: var(--color-secondary);
}

/* ===================================================

/* ===========================================================================
 * TRUST STRIPS
 * ======================================================================== */
.aknb-trust {
	margin: 0;
	padding: 0;
	list-style: none;
}
.aknb-trust__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}
.aknb-trust__icon {
	display: inline-flex;
	color: var(--color-secondary);
	flex-shrink: 0;
}
.aknb-trust__title {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
}
.aknb-trust__text {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	margin-block-start: 2px;
}
/* Bar variant — thin, horizontal, compact titles only */
.aknb-trust--bar {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.aknb-trust--bar .aknb-trust__icon {
	color: var(--color-success);
}
/* Grid variant — homepage block */
.aknb-trust--grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-6);
}
.aknb-trust--grid .aknb-trust__item {
	align-items: flex-start;
	padding: var(--space-5);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
/* Newsletter: the form is shared (components.css). The footer only sets the
 * dark-surface variant there — nothing extra is needed here. */
/* Social */
.aknb-social {
	display: flex;
	gap: var(--space-2);
	margin-block-start: var(--space-6);
	list-style: none;
	padding: 0;
}
.aknb-social__link {
	display: inline-grid;
	place-items: center;
	inline-size: var(--tap-target);
	block-size: var(--tap-target);
	color: var(--neutral-300);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-md);
	transition: color var(--dur-fast) var(--ease-standard),
		border-color var(--dur-fast) var(--ease-standard);
}
.aknb-social__link:hover {
	color: var(--neutral-0);
	border-color: rgba(255, 255, 255, 0.4);
}
/* Payments */
.aknb-payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.aknb-payments__icon {
	block-size: 24px;
	inline-size: auto;
	opacity: 0.9;
	border-radius: var(--radius-xs);
	background: var(--neutral-0);
	padding: 2px;
}

/* ===========================================================================
 * TOAST — leaving state (entry animation is in components.css)
 * ======================================================================== */
.aknb-toast {
	transition: opacity var(--dur-base) var(--ease-standard),
		transform var(--dur-base) var(--ease-standard);
}
.aknb-toast.is-leaving {
	opacity: 0;
	transform: translateY(8px);
}

/* ===========================================================================
 * RESPONSIVE — mobile-first collapse of the shell
 * ======================================================================== */
@media (max-width: 899.98px) {
	.aknb-header__burger {
		display: inline-grid;
	}
	.aknb-header__search,
	.aknb-header__nav {
		display: none;
	}
	.aknb-header__action--search-m {
		display: inline-grid;
	}
	.aknb-header__inner {
		gap: var(--space-3);
	}
	.aknb-logo__word {
		font-size: var(--text-base);
	}
}

@media (max-width: 767.98px) {
	.aknb-search-panel__input {
		font-size: var(--text-lg);
	}
	.aknb-toast-region {
		inset-inline: var(--space-4);
		inset-block-end: var(--space-4);
		max-width: none;
	}
}

@media (max-width: 480px) {
	.aknb-header__actions {
		gap: 0;
	}
	.aknb-mobile-nav__meta {
		flex-direction: column;
	}
}