/* Pure Labs — layout
   Page shell, disclaimer strip, header, mobile drawer, footer.

   Three things genuinely change by breakpoint rather than reflowing, and each
   is handled with a real media query below:
     1. header  inline nav at 1440, hamburger drawer under it
     2. tables  table at 1440, stacked cards under it (see woocommerce.css)
     3. rails   244px sidebar at 1440, full-width chip row under it */

/* ---------- Shell ---------- */

.pl-wrap {
	max-width: 1296px;
	margin: 0 auto;
	padding-inline: max(18px, 5%);
}

.pl-main { display: block; min-height: 50vh; }

.pl-section { padding-block: var(--pl-sec); }
.pl-section--tint { background: var(--pl-bg-2); }
.pl-section--ink { background: var(--pl-bg-ink); color: #fff; }

.pl-sechead { margin-bottom: var(--pl-s-7); }
.pl-sechead__title { font-size: var(--pl-t-h2); }
.pl-sechead__intro { margin-top: var(--pl-s-3); max-width: 62ch; font-size: var(--pl-t-body-l); }

/* ---------- Disclaimer strip ---------- */

.pl-strip {
	background: var(--pl-bg-ink);
	color: rgba(255, 255, 255, 0.72);
	padding: 9px max(18px, 5%);
	display: flex;
	justify-content: center;
	gap: 4px 28px;
	flex-wrap: wrap;
	text-align: center;
	font-family: var(--pl-mono);
	font-size: 10.5px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}
.pl-strip__item { white-space: nowrap; }
.pl-strip__sep { color: rgba(255, 255, 255, 0.35); }

/* ---------- Header ---------- */

.pl-head {
	border-bottom: 1px solid var(--pl-line);
	background: rgba(255, 255, 255, 0.96);
	position: sticky;
	top: 0;
	z-index: 40;
	backdrop-filter: blur(8px);
}

.pl-head__inner {
	max-width: 1296px;
	margin: 0 auto;
	padding-inline: max(18px, 5%);
	display: flex;
	align-items: center;
	gap: var(--pl-s-5);
	height: 74px;
}

.pl-head__spacer { flex: 1; }

.pl-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--pl-ink);
	flex-shrink: 0;
}
.pl-logo:hover { text-decoration: none; color: var(--pl-ink); }
.pl-logo__img { max-height: 40px; width: auto; }
.pl-logo__name { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.025em; line-height: 1; }
.pl-logo__domain {
	display: block;
	font-family: var(--pl-mono);
	font-size: 8px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pl-ink-3);
	margin-top: 2px;
}

.pl-nav__list { display: flex; gap: 2px; margin-left: var(--pl-s-2); }
.pl-nav__list a {
	display: block;
	padding: 8px 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--pl-ink-2);
	border-radius: var(--pl-r-2);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 140ms ease, color 140ms ease;
}
.pl-nav__list a:hover,
.pl-nav__list .current-menu-item > a {
	background: var(--pl-bg-3);
	color: var(--pl-ink);
	text-decoration: none;
}

/* Search stays a real input on desktop: this is a catalogue people query by
   CAS number, so hiding it behind an icon would cost a click on the primary
   action. It is just made quieter. */
.pl-search {
	display: flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-2);
	padding: 6px 10px;
	flex: 0 0 210px;
	background: var(--pl-bg);
	transition: border-color 140ms ease, box-shadow 140ms ease;
}
.pl-search:focus-within { border-color: var(--pl-blue); box-shadow: var(--pl-ring); }
.pl-search__icon {
	display: inline-flex;
	color: var(--pl-ink-4);
	flex-shrink: 0;
}
.pl-search:focus-within .pl-search__icon { color: var(--pl-blue); }
/* Scoped to the wrapper on purpose: the base `input[type="search"]` rule
   outranks a lone class, and that rule is what was drawing a second box. */
.pl-search .pl-search__input {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	border-radius: 0;
	background: transparent;
	outline: none;
	font-size: 13.5px;
	width: 100%;
	/* A search input carries its own intrinsic height; pinning it keeps the
	   field the same height as the icon buttons beside it. */
	height: 22px;
	line-height: 22px;
	padding: 0;
	color: var(--pl-ink);
}
/* The wrapper is the only thing that draws an edge: no second box inside it,
   including the global focus outline. */
.pl-search .pl-search__input:focus,
.pl-search .pl-search__input:focus-visible {
	border: 0;
	outline: none;
	box-shadow: none;
}
.pl-search .pl-search__input::-webkit-search-decoration,
.pl-search .pl-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Icon actions: account and cart. Labelled for anyone not going by shape.
   They sit in their own group so the header gap does not push them apart. */
.pl-head__actions {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
}

/* Account carries a word as well as a mark: "Login" and "Account" mean
   different things and the icon alone cannot say which state you are in. */
.pl-headlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 10px;
	border-radius: var(--pl-r-2);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: var(--pl-ink-2);
	text-decoration: none;
	transition: background-color 140ms ease, color 140ms ease;
}
.pl-headlink:hover { background: var(--pl-bg-3); color: var(--pl-ink); text-decoration: none; }

.pl-iconbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid transparent;
	border-radius: var(--pl-r-2);
	color: var(--pl-ink-2);
	text-decoration: none;
	flex-shrink: 0;
	transition: background-color 140ms ease, color 140ms ease;
}
.pl-iconbtn:hover { background: var(--pl-bg-3); color: var(--pl-ink); text-decoration: none; }
.pl-iconbtn__count {
	position: absolute;
	top: 3px;
	right: 3px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: var(--pl-r-pill);
	background: var(--pl-blue);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--pl-mono);
	font-size: 10px;
	font-weight: 600;
	border: 2px solid var(--pl-bg);
}
.pl-iconbtn__count.is-bump { animation: plPop 260ms ease; }

/* ---------- Burger and drawer ---------- */

.pl-burger {
	display: none;
	background: transparent;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-r-2);
	width: 44px;
	height: 44px;
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
}
.pl-burger__bars,
.pl-burger__bars::before,
.pl-burger__bars::after {
	position: absolute;
	left: 12px;
	width: 18px;
	height: 1.6px;
	background: var(--pl-ink);
	transition: transform 160ms ease, opacity 160ms ease;
}
.pl-burger__bars { top: 50%; transform: translateY(-50%); }
.pl-burger__bars::before { content: ""; left: 0; top: -6px; }
.pl-burger__bars::after { content: ""; left: 0; top: 6px; }
.pl-burger[aria-expanded="true"] .pl-burger__bars { background: transparent; }
.pl-burger[aria-expanded="true"] .pl-burger__bars::before { transform: translateY(6px) rotate(45deg); }
.pl-burger[aria-expanded="true"] .pl-burger__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Drops under the bar when the search icon is pressed. Desktop keeps the
   field in the bar itself, so the panel and its trigger stay out of the way. */
.pl-searchpanel {
	border-top: 1px solid var(--pl-line);
	background: var(--pl-bg);
	padding: var(--pl-s-4) max(18px, 5%);
	animation: plDrawer 160ms ease;
}
.pl-searchpanel[hidden] { display: none; }
.pl-searchpanel .pl-search--panel { flex: 1 1 auto; width: 100%; }
.pl-head__searchtoggle { display: none; }

.pl-drawer {
	border-top: 1px solid var(--pl-line);
	background: var(--pl-bg);
	padding: var(--pl-s-4) max(18px, 5%) var(--pl-s-5);
	animation: plDrawer 160ms ease;
}
.pl-drawer[hidden] { display: none; }
.pl-drawer__list { display: grid; }
.pl-drawer__list a {
	display: block;
	padding: var(--pl-s-4) 0;
	border-bottom: 1px solid var(--pl-line-2);
	font-size: var(--pl-t-body-l);
	font-weight: 500;
	color: var(--pl-ink);
	text-decoration: none;
}

/* ---------- Breadcrumbs and page head ---------- */

.pl-crumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--pl-s-2);
	font-family: var(--pl-mono);
	font-size: var(--pl-t-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pl-ink-4);
}
.pl-crumbs a { color: var(--pl-ink-3); text-decoration: none; }
.pl-crumbs a:hover { color: var(--pl-blue); text-decoration: underline; }
.pl-crumbs__sep { color: var(--pl-line); }
.pl-crumbs__current { color: var(--pl-ink); }

.pl-pagehead {
	border-bottom: 1px solid var(--pl-line);
	padding-block: var(--pl-s-7) var(--pl-s-7);
	background: var(--pl-bg-2);
}
.pl-pagehead__title { margin-top: var(--pl-s-4); font-size: var(--pl-t-h1); }
.pl-pagehead__intro { margin-top: var(--pl-s-4); max-width: 64ch; font-size: var(--pl-t-body-l); }
.pl-pagehead .pl-eyebrow { margin-top: var(--pl-s-5); }

/* ---------- Rail layout ---------- */
/* Shop, FAQ, policy and account pages share this two-column shell. */

.pl-rail {
	display: grid;
	grid-template-columns: 244px minmax(0, 1fr);
	gap: var(--pl-s-8);
	align-items: start;
}
.pl-rail__side { position: sticky; top: 98px; }
.pl-rail__side .pl-label { display: block; margin-bottom: var(--pl-s-3); }
.pl-rail__group + .pl-rail__group { margin-top: var(--pl-s-6); }

/* ---------- Footer ---------- */

.pl-foot {
	background: var(--pl-bg-ink);
	color: rgba(255, 255, 255, 0.66);
	padding-block: var(--pl-sec) 40px;
	margin-top: var(--pl-sec);
}

/* Brand block plus four link columns, all equal, reflowing on width rather
   than snapping at a breakpoint. Matches the mockup. */
.pl-foot__top {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: 40px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.pl-foot__mark { display: flex; align-items: center; gap: 10px; }
.pl-foot__name { font-size: 17px; font-weight: 700; letter-spacing: -0.025em; color: #fff; }
.pl-foot__blurb {
	margin-top: var(--pl-s-4);
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.66);
	max-width: 34ch;
}
.pl-foot__addr {
	margin-top: var(--pl-s-4);
	font-family: var(--pl-mono);
	font-size: var(--pl-t-data);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.5);
}
.pl-foot__addr a { color: rgba(255, 255, 255, 0.7); }

.pl-foot__coltitle {
	font-family: var(--pl-mono);
	font-size: var(--pl-t-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	font-weight: 500;
	margin-bottom: var(--pl-s-4);
}
.pl-foot__links { display: grid; gap: var(--pl-s-3); }
.pl-foot__links a {
	font-size: var(--pl-t-small);
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
}
.pl-foot__links a:hover { color: #fff; text-decoration: underline; }

.pl-foot__legal { padding-block: 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.pl-foot__legaltitle {
	font-family: var(--pl-mono);
	font-size: var(--pl-t-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pl-blue-100);
	font-weight: 500;
	margin-bottom: 14px;
}

/* The disclaimer reads as columns, not as one very long measure. Each
   paragraph gets its own column and the set reflows on width. */
.pl-foot__legalbody {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 28px;
}
.pl-foot__legalbody p {
	font-size: 12.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.62);
	margin: 0;
}
.pl-foot__legalbody strong { color: rgba(255, 255, 255, 0.85); }

.pl-foot__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	padding-top: 28px;
	font-family: var(--pl-mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}
.pl-foot__tags { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---------- Breakpoint: below 1440 ---------- */

@media (max-width: 1200px) {
	.pl-search { flex-basis: 200px; }
	.pl-nav__list a { padding: 8px 9px; }
}

@media (max-width: 1023px) {
	/* The field leaves the bar and reappears in the panel behind the icon.
	   Scoped to the bar so the panel keeps its own copy. */
	.pl-nav,
	.pl-head__inner .pl-search { display: none; }

	.pl-head__searchtoggle { display: inline-flex; }

	/* Account drops to its mark alone; the aria-label still names it. */
	.pl-headlink__label { display: none; }
	.pl-headlink { padding: 0; justify-content: center; }

	/* One size for all three: a <button> picks up the 44px tap-target floor
	   while an <a> does not, which otherwise leaves them uneven. */
	.pl-head__actions .pl-iconbtn,
	.pl-head__actions .pl-headlink { width: 44px; height: 44px; }

	.pl-burger { display: block; }
	.pl-head__inner { gap: var(--pl-s-3); height: 66px; }
	.pl-head__spacer { flex: 1; }

	.pl-rail { grid-template-columns: minmax(0, 1fr); gap: var(--pl-s-6); }
	.pl-rail__side { position: static; }
}

/* ---------- Breakpoint: 412 ---------- */

@media (max-width: 767px) {
	.pl-strip { font-size: 9.5px; letter-spacing: 0.08em; gap: 2px 14px; }
	.pl-foot { padding-block: var(--pl-s-7) var(--pl-s-6); }
	.pl-foot__top { gap: var(--pl-s-6); padding-bottom: var(--pl-s-6); }
	.pl-foot__bottom { flex-direction: column; align-items: flex-start; gap: var(--pl-s-3); }
	.pl-pagehead { padding-block: var(--pl-s-6); }
}