/* Site chrome: utility bar, header, mobile drawer, footer.
   Translated from design-reference/Homepage.dc.html (definitive header/footer). */

/* ---------- Utility bar ---------- */
.ss-utility-bar {
	background: var(--ss-text);
	color: var(--ss-border);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 28px;
	padding: 8px 20px;
	font: 500 12.5px/1.4 var(--ss-font);
}
.ss-utility-bar__item { display: inline-flex; align-items: center; gap: 7px; }
.ss-utility-bar__item b { color: #fff; }
.ss-utility-bar__icon { width: 14px; height: 14px; flex: none; }
.ss-utility-bar__sep { color: #5a554e; }

/* ---------- Header ---------- */
.ss-header {
	display: flex;
	align-items: center;
	gap: 30px;
	padding: 14px var(--ss-pad-x);
	background: var(--ss-surface);
	border-bottom: 1px solid var(--ss-border);
	position: sticky;
	top: 0;
	z-index: 20;
}
.ss-header__logo { display: inline-flex; flex: none; }
.ss-header__logo img { height: 54px; width: auto; }

.ss-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 24px;
	font: 600 14.5px/1 var(--ss-font);
}
.ss-nav__list a { color: var(--ss-text); text-decoration: none; }
.ss-nav__list a:hover { color: var(--ss-accent); }
.ss-nav__item--accent a { color: var(--ss-accent); }

.ss-header__tools { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* Search pill */
.ss-search {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--ss-panel);
	border-radius: var(--ss-r-pill);
	padding: 9px 16px;
	width: 200px;
	color: var(--ss-muted);
	font-size: 13px;
}
.ss-search__icon { width: 15px; height: 15px; flex: none; }
.ss-search__field {
	border: 0;
	background: transparent;
	width: 100%;
	min-width: 0;
	padding: 0;
	font: 400 13px/1.2 var(--ss-font);
	color: var(--ss-text);
	outline: none;
}
.ss-search__field::placeholder { color: var(--ss-muted); }

/* Basket button (ss-btn--dark supplies colours + hover) */
.ss-basket { text-decoration: none; white-space: nowrap; }
.ss-basket:hover { color: #fff; }
.ss-basket__icon { display: none; width: 16px; height: 16px; }

/* Mobile-only toggles */
.ss-menu-toggle,
.ss-search-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--ss-border-strong);
	border-radius: var(--ss-r-btn);
	background: var(--ss-surface);
	color: var(--ss-text);
	padding: 0;
}
.ss-menu-toggle:hover,
.ss-search-toggle:hover { border-color: var(--ss-text); }
.ss-menu-toggle .ss-icon,
.ss-menu-toggle svg,
.ss-search-toggle svg { width: 20px; height: 20px; }

/* Mobile search overlay (revealed by .ss-search-toggle) */
.ss-search-overlay {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--ss-surface);
	border-bottom: 1px solid var(--ss-border);
	padding: 12px var(--ss-pad-x);
	box-shadow: var(--ss-shadow-card-hover);
}
.ss-search-overlay[hidden] { display: none; }
.ss-search--overlay { width: 100%; }

/* ---------- Mobile drawer ---------- */
.ss-drawer-scrim {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	z-index: 50;
	opacity: 0;
	transition: opacity .25s ease;
}
.ss-drawer-scrim.is-open { opacity: 1; }
.ss-drawer-scrim[hidden] { display: none; }

.ss-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(320px, 86vw);
	background: var(--ss-surface);
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 18px 22px 26px;
	transform: translateX(100%);
	transition: transform .28s ease;
	overflow-y: auto;
}
.ss-drawer.is-open { transform: translateX(0); }
.ss-drawer[hidden] { display: none; }

.ss-drawer__top { display: flex; align-items: center; justify-content: space-between; }
.ss-drawer__logo { height: 40px; width: auto; }
.ss-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--ss-border-strong);
	border-radius: var(--ss-r-btn);
	background: var(--ss-surface);
	color: var(--ss-text);
	padding: 0;
}
.ss-drawer__close:hover { border-color: var(--ss-text); }
.ss-drawer__close svg { width: 20px; height: 20px; }

.ss-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.ss-drawer__list li { border-bottom: 1px solid var(--ss-border); }
.ss-drawer__list a {
	display: block;
	padding: 14px 2px;
	font: 600 16px/1.2 var(--ss-font);
	color: var(--ss-text);
	text-decoration: none;
}
.ss-drawer__list a:hover { color: var(--ss-accent); }
.ss-drawer__list .ss-nav__item--accent a { color: var(--ss-accent); }
.ss-drawer__cta { margin-top: auto; text-decoration: none; }
.ss-drawer__cta svg { width: 18px; height: 18px; }

/* ---------- Footer ---------- */
.ss-footer {
	margin-top: 56px;
	border-top: 1px solid var(--ss-border);
	background: var(--ss-surface);
}
.ss-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 32px;
	padding-bottom: 32px;
}
.ss-footer__row { display: flex; align-items: center; gap: 28px; }

.ss-footer__logo-plate {
	display: inline-flex;
	background: var(--ss-panel);
	border-radius: var(--ss-r-card-sm);
	padding: 8px 12px;
}
.ss-footer__logo-plate img { height: 30px; width: auto; }

.ss-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 22px;
	font: 500 13px/1.3 var(--ss-font);
}
.ss-footer__list a { color: var(--ss-body); text-decoration: none; }
.ss-footer__list a:hover { color: var(--ss-accent); }

.ss-footer__order { margin-left: auto; font: 500 13.5px/1 var(--ss-font); color: var(--ss-body); text-decoration: none; }
.ss-footer__order strong { font-weight: 700; color: var(--ss-text); }
.ss-footer__order:hover strong { color: var(--ss-accent); }

.ss-footer__company {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 18px;
	font: 500 12px/1.4 var(--ss-font);
	color: var(--ss-muted);
	border-top: 1px solid var(--ss-divider);
	padding-top: 16px;
}
.ss-footer__dot { color: var(--ss-border-strong); }
.ss-footer__payment { margin-left: auto; }

.ss-footer__disclaimer {
	margin: 0;
	font: 400 var(--ss-fs-legal)/1.5 var(--ss-font);
	color: var(--ss-faint);
	max-width: 900px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.ss-nav__list { gap: 16px; }
	.ss-search { width: 160px; }
}

@media (max-width: 900px) {
	.ss-header { gap: 16px; }
	.ss-header__logo img { height: 44px; }
	.ss-nav { display: none; }
	.ss-search { display: none; }
	.ss-search--overlay { display: flex; }
	.ss-menu-toggle,
	.ss-search-toggle { display: inline-flex; }

	.ss-footer__row { flex-wrap: wrap; gap: 16px; }
	.ss-footer__order { margin-left: 0; width: 100%; }
	.ss-footer__payment { margin-left: 0; width: 100%; }
}

@media (max-width: 640px) {
	.ss-utility-bar { gap: 0; }
	.ss-utility-bar__sep,
	.ss-utility-bar__item:not(.ss-utility-bar__item--order) { display: none; }

	.ss-basket { padding: 11px 14px; }
	.ss-basket__icon { display: block; }
	.ss-footer__cols { flex-direction: column; gap: 24px; }
}