/* Aftermarket Parts Australia: page furniture, shop layout, product page.
   The core components live in style.css.

   The tokens are repeated here on purpose. This file is loaded second, and if style.css is
   ever slow, truncated mid-deploy or cached badly, every colour below would fall back to
   nothing: dark text on a dark ground and white panels. Repeating the palette makes this
   file stand on its own. Keep the two blocks in step. */
:root {
	--ink:        #101F1B;
	--ink-2:      #33443F;
	--ink-3:      #5D6B67;
	--eucalypt:   #1E4D43;
	--eucalypt-d: #14352E;
	--eucalypt-l: #2C6B5D;
	--zinc-1:     #E7EBEA;
	--zinc-2:     #D2D9D7;
	--zinc-3:     #AFBAB7;
	--ground:     #F4F6F4;
	--paper:      #FFFFFF;
	--callout:    #B23A22;
	--line:       #D6DDDA;
	--line-dark:  rgba(255,255,255,.16);
	--font-display: "Anybody", "Arial Narrow", system-ui, sans-serif;
	--font-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono:    "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
	--wrap: 1260px;
	--r: 3px;
	--pad: clamp(18px, 4vw, 40px);
	--gap: clamp(16px, 2.2vw, 28px);
	--shadow: 0 1px 2px rgba(16,31,27,.06), 0 8px 24px rgba(16,31,27,.06);
}

/* A page that somehow loses its stylesheet still reads as light, not dark on dark. */
body { background: #F4F6F4; color: #101F1B; }

/* ---------------------------------------------------------------------------
   Page head and breadcrumbs
--------------------------------------------------------------------------- */
.pagehead { background: var(--paper); border-bottom: 1px solid var(--line); padding: clamp(22px, 3.4vw, 42px) 0; }
.pagehead h1 { margin: 10px 0 0; }
.pagehead .lede { margin: 12px 0 0; }
.pagehead--slim { padding: 14px 0; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--eucalypt); text-decoration: underline; }
.crumbs .sep { color: var(--zinc-3); }
.crumbs > span:last-child { color: var(--ink-2); }

/* ---------------------------------------------------------------------------
   Home: department cards and part type grid
--------------------------------------------------------------------------- */
.dept { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.dept__head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.dept__head svg { width: 22px; height: 22px; stroke: var(--eucalypt); fill: none; stroke-width: 1.4; flex: none; }
.dept__head h3 { margin: 0; font-size: 17px; }
.dept__head a { color: var(--ink); text-decoration: none; }
.dept__head a:hover { color: var(--eucalypt); }
.dept__list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 2px; }
.dept__list a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-radius: 2px; color: var(--ink-2); text-decoration: none; font-size: 14px; }
.dept__list a:hover { background: var(--zinc-1); color: var(--eucalypt-d); }
.dept__list .stamp { color: var(--ink-3); }
.dept__all { margin-top: auto; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--eucalypt); text-decoration: none; }
.dept__all:hover { color: var(--callout); text-decoration: underline; }

.typegrid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); overflow: hidden; }
.typecard { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; background: var(--paper); color: var(--ink); text-decoration: none; font-size: 14.5px; }
.typecard:hover { background: var(--zinc-1); color: var(--eucalypt-d); }
.typecard .stamp { color: var(--ink-3); }

.step { background: rgba(255,255,255,.05); border: 1px solid var(--line-dark); border-radius: var(--r); padding: 20px; }
.step .stamp { color: var(--callout); text-transform: uppercase; letter-spacing: .12em; margin: 0 0 10px; display: block; }
.step p { margin: 0; font-size: 14.5px; color: rgba(255,255,255,.8); }
.step p + p { margin-top: 10px; }

/* ---------------------------------------------------------------------------
   Shop: worksheet rail and results
--------------------------------------------------------------------------- */
.shop { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; padding-block: clamp(26px, 3.4vw, 44px); }
.worksheet > [data-filter-toggle] { display: none; margin-bottom: 12px; }
.worksheet__panel { display: grid; gap: 20px; position: sticky; top: 96px; }
.plate--worksheet .plate__row { grid-template-columns: 1fr; }

.facets { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.facets h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; font-stretch: normal; }
.facets h3 + ul { margin-bottom: 18px; }
.facets ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fopt { display: flex; align-items: center; gap: 9px; padding: 7px 8px; margin: 0 -8px; border-radius: 2px; cursor: pointer; font-size: 14px; color: var(--ink-2); }
.fopt:hover { background: var(--zinc-1); }
.fopt input { width: 15px; height: 15px; accent-color: var(--eucalypt); flex: none; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.toolbar__count { margin: 0; font-size: 14px; color: var(--ink-2); }
.toolbar__count b { font-family: var(--font-mono); font-size: 16px; color: var(--ink); }
.toolbar__count .stamp { color: var(--ink-3); margin-left: 6px; }
.toolbar select { padding: 9px 12px; border: 1px solid var(--zinc-3); border-radius: 2px; background: var(--paper); font-size: 13.5px; }

.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 34px; }
.pager .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px;
	border: 1px solid var(--line); border-radius: 2px; background: var(--paper); color: var(--ink-2);
	font-family: var(--font-mono); font-size: 12.5px; text-decoration: none;
}
.pager .page-numbers:hover { border-color: var(--zinc-3); color: var(--eucalypt); }
.pager .page-numbers.current { background: var(--eucalypt); border-color: var(--eucalypt); color: #fff; }
.pager .dots { border-color: transparent; background: transparent; }

.emptystate { text-align: center; padding: clamp(36px, 6vw, 72px) 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.emptystate .lede { margin: 0 auto 20px; }

/* ---------------------------------------------------------------------------
   Product page
--------------------------------------------------------------------------- */
.product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding-block: clamp(24px, 3.4vw, 44px); }
.product__shot { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(16px, 3vw, 34px); }
.product__shot img { width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.product__shot--empty { display: grid; place-items: center; min-height: 320px; color: var(--ink-3); }
.product__thumbs { list-style: none; display: flex; gap: 8px; margin: 10px 0 0; padding: 0; flex-wrap: wrap; }
.product__thumbs img { width: 72px; height: 72px; object-fit: contain; background: var(--paper); border: 1px solid var(--line); border-radius: 2px; padding: 4px; }
.product__thumbs a:hover img { border-color: var(--zinc-3); }

.product__buy h1 { font-size: clamp(24px, 2.8vw, 34px); margin-bottom: 14px; }
.product__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.product__lede { color: var(--ink-2); font-size: 15.5px; margin-bottom: 20px; }
.product__lede p { margin: 0; }
.product__price { display: flex; align-items: baseline; gap: 12px; margin: 20px 0 16px; }
.product__price .price { font-size: 28px; }
.product__price .stamp { color: var(--ink-3); }
.product__buy form.cart { display: flex; gap: 10px; align-items: stretch; margin: 0 0 18px; flex-wrap: wrap; }
.product__buy form.cart .quantity input {
	width: 84px; height: 100%; min-height: 46px; padding: 10px 12px; text-align: center;
	border: 1px solid var(--zinc-3); border-radius: var(--r); background: var(--paper); font-family: var(--font-mono);
}
.product__buy form.cart button {
	flex: 1; min-width: 180px; padding: 14px 24px; border: 1px solid var(--eucalypt); border-radius: var(--r);
	background: var(--eucalypt); color: #fff; cursor: pointer;
	font-family: var(--font-display); font-stretch: 112%; font-weight: 700; font-size: 14px; letter-spacing: .05em; text-transform: uppercase;
}
.product__buy form.cart button:hover { background: var(--eucalypt-d); }
.product__buy .stock { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.product__assure { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; font-size: 14px; color: var(--ink-2); }
.product__assure li { padding-left: 18px; position: relative; }
.product__assure li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-left: 2px solid var(--eucalypt); border-bottom: 2px solid var(--eucalypt); transform: rotate(-45deg) translateY(-2px); }

.product__detail { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.product__aside h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); font-stretch: normal; margin-bottom: 12px; }
table.spec { width: 100%; border-collapse: collapse; font-size: 14px; }
table.spec th, table.spec td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
table.spec th { width: 42%; background: var(--zinc-1); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
table.spec td { font-family: var(--font-mono); font-size: 13px; }

/* ---------------------------------------------------------------------------
   Guides and posts
--------------------------------------------------------------------------- */
.postcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.postcard__media { display: block; margin: -18px -18px 14px; border-bottom: 1px solid var(--line); }
.postcard .stamp { color: var(--ink-3); margin: 0 0 8px; display: block; }
.postcard h3 { font-size: 18px; margin-bottom: 8px; }
.postcard h3 a { color: var(--ink); text-decoration: none; }
.postcard h3 a:hover { color: var(--eucalypt); }
.postcard p { font-size: 14px; color: var(--ink-2); margin: 0; }

/* ---------------------------------------------------------------------------
   WooCommerce notices, cart and checkout
--------------------------------------------------------------------------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	list-style: none; margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--zinc-3); border-left: 3px solid var(--eucalypt);
	background: var(--paper); font-size: 14.5px; border-radius: 2px;
}
.woocommerce-error { border-left-color: var(--callout); }
.woocommerce-message .button, .woocommerce-info .button { float: right; margin-left: 12px; }
.woocommerce table.shop_table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); font-size: 14.5px; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; }
.woocommerce table.shop_table th { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.woocommerce .button, .woocommerce button.button, .woocommerce input.button {
	display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border: 1px solid var(--eucalypt);
	background: var(--eucalypt); color: #fff; border-radius: var(--r); cursor: pointer; text-decoration: none;
	font-family: var(--font-display); font-stretch: 112%; font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
}
.woocommerce .button:hover { background: var(--eucalypt-d); color: #fff; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea {
	width: 100%; padding: 11px 12px; border: 1px solid var(--zinc-3); border-radius: 2px; background: var(--paper);
}
.woocommerce-cart .wrap, .woocommerce-checkout .wrap, .woocommerce-account .wrap { padding-block: clamp(26px, 3.4vw, 44px); }

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */
@media (max-width: 1040px) {
	.shop { grid-template-columns: 1fr; }
	.worksheet > [data-filter-toggle] { display: inline-flex; }
	.worksheet__panel { display: none; position: static; }
	.worksheet__panel[data-open] { display: grid; }
	.product { grid-template-columns: 1fr; }
	.product__detail { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.typegrid { grid-template-columns: 1fr 1fr; }
	.product__buy form.cart button { min-width: 0; }
}

/* ---------------------------------------------------------------------------
   Home: quick links under the hero, vehicle tiles, make list, image band
--------------------------------------------------------------------------- */
.quicklinks { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,.16); background: rgba(11,30,26,.72); backdrop-filter: blur(2px); overflow: hidden; }
.quicklinks--image { background: var(--ink); }
.quicklinks__bg { position: absolute; inset: 0; }
.quicklinks__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; opacity: .5; }
.quicklinks__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,30,26,.94) 12%, rgba(11,30,26,.62) 58%, rgba(11,30,26,.86)); }
.quicklinks--image .wrap { position: relative; z-index: 1; padding-block: 20px; }
.quicklinks .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 15px; }
.quicklinks__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.66); white-space: nowrap; }
.quicklinks ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.quicklinks li { margin: 0; list-style: none; }
.quicklinks li::marker { content: ""; }
.quicklinks a {
	display: inline-block; padding: 8px 14px; border: 1px solid rgba(255,255,255,.3); border-radius: 2px;
	color: #fff; text-decoration: none; font-size: 13.5px; line-height: 1.2; white-space: nowrap;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.quicklinks a:hover, .quicklinks a:focus-visible { background: #fff; color: var(--eucalypt-d); border-color: #fff; }
@media (max-width: 760px) {
	.quicklinks .wrap { gap: 10px; }
	.quicklinks ul { gap: 6px; }
	.quicklinks a { font-size: 13px; padding: 7px 11px; }
}

/* Filter chips above the vehicle grid */
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(18px, 2.4vw, 28px); }
.chip {
	padding: 8px 14px; background: var(--paper); color: var(--ink-2);
	border: 1px solid var(--line); border-radius: 2px; cursor: pointer;
	font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--zinc-3); color: var(--eucalypt-d); }
.chip.is-on { background: var(--eucalypt); border-color: var(--eucalypt); color: #fff; }

/* Vehicle cards, each carrying a real part photo */
.vgrid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }
.vgrid__empty { margin-top: 18px; color: var(--ink-2); }
.vcard {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
	text-decoration: none; color: var(--ink);
	transition: border-color .15s ease, box-shadow .18s ease, transform .18s ease;
}
.vcard:hover, .vcard:focus-visible { border-color: var(--eucalypt); box-shadow: var(--shadow); transform: translateY(-2px); color: var(--ink); }
.vcard[hidden] { display: none; }
.vcard__media { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(160deg, var(--zinc-1), #fff 60%); display: grid; place-items: center; border-bottom: 1px solid var(--line); }
.vcard__media img { width: 78%; height: 78%; object-fit: contain; mix-blend-mode: multiply; }
.vcard__body { display: flex; flex-direction: column; gap: 3px; padding: 14px; flex: 1; }
.vcard__make { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.vcard__model { font-family: var(--font-display); font-stretch: 116%; font-weight: 700; font-size: 18px; line-height: 1.1; }
.vcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.vcard__foot .stamp { color: var(--ink-3); }
.vcard__go { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--eucalypt); }
.vcard:hover .vcard__go { color: var(--callout); }

/* Tabbed part systems */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: clamp(20px, 2.6vw, 30px); }
.tab {
	display: inline-flex; align-items: center; gap: 9px; padding: 13px 16px;
	background: transparent; border: 0; border-bottom: 3px solid transparent; cursor: pointer;
	font-family: var(--font-display); font-stretch: 110%; font-weight: 600; font-size: 13.5px;
	letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2);
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.tab svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.tab .stamp { font-size: 11px; color: var(--ink-3); text-transform: none; letter-spacing: .04em; }
.tab:hover { color: var(--eucalypt-d); background: var(--zinc-1); }
.tab.is-on { color: var(--eucalypt-d); border-bottom-color: var(--callout); }
.tab.is-on .stamp { color: var(--eucalypt); }
.tabpanel[hidden] { display: none; }
.tabpanel__grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); }
.parttype { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; background: var(--paper); color: var(--ink); text-decoration: none; }
.parttype:hover { background: var(--zinc-1); color: var(--eucalypt-d); }
.parttype__name { font-size: 14.5px; }
.parttype .stamp { color: var(--ink-3); }
.tabpanel__foot { margin-top: 18px; }

@media (max-width: 640px) {
	.tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.tabs::-webkit-scrollbar { display: none; }
	.tab { white-space: nowrap; }
}

.tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.tile {
	display: flex; flex-direction: column; gap: 6px; padding: 16px;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
	text-decoration: none; color: var(--ink);
}
.tile:hover { border-color: var(--eucalypt); color: var(--eucalypt-d); }
.tile__name { font-family: var(--font-display); font-stretch: 112%; font-weight: 700; font-size: 15.5px; }
.tile .stamp { color: var(--ink-3); }

.makes { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.make {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 11px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
	text-decoration: none; color: var(--ink-2); font-size: 14px;
}
.make:hover { border-color: var(--eucalypt); color: var(--eucalypt-d); }
.make .stamp { color: var(--ink-3); font-size: 11px; }

.band { position: relative; overflow: hidden; }
.band__bg { position: absolute; inset: 0; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.band__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,53,46,.9), rgba(20,53,46,.82)); }
.band .wrap { position: relative; }

/* ---------------------------------------------------------------------------
   Contact launcher
--------------------------------------------------------------------------- */
.apxchat { position: fixed; right: 18px; bottom: 18px; z-index: 90; font-family: var(--font-body); }
.apxchat__launch {
	display: flex; align-items: center; gap: 10px; margin-left: auto;
	min-height: 56px; padding: 0 18px 0 14px;
	background: var(--eucalypt); color: #fff; border: 1px solid var(--eucalypt-d); border-radius: var(--r);
	cursor: pointer; box-shadow: 0 6px 20px rgba(16,31,27,.28);
	font-family: var(--font-display); font-stretch: 112%; font-weight: 700;
	font-size: 14px; letter-spacing: .04em; text-transform: uppercase; line-height: 1;
	transition: background .15s ease, transform .15s ease;
}
.apxchat__launch:hover { background: var(--eucalypt-d); transform: translateY(-1px); }
.apxchat__badge { display: grid; place-items: center; width: 28px; height: 28px; flex: none; }
.apxchat__launch svg { width: 26px; height: 26px; }
.apxchat__label { white-space: nowrap; }
.apxchat__icon-close, .apxchat__label--close { display: none; }
.apxchat.is-open .apxchat__icon-open, .apxchat.is-open .apxchat__label--open { display: none; }
.apxchat.is-open .apxchat__icon-close { display: block; }
.apxchat.is-open .apxchat__label--close { display: inline; }

.apxchat__panel {
	width: min(340px, calc(100vw - 36px));
	margin-bottom: 12px;
	background: var(--ink);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 6px;
	box-shadow: 0 18px 50px rgba(16,31,27,.35);
	overflow: hidden;
	color: #fff;
}
.apxchat__head { display: flex; align-items: center; gap: 12px; padding: 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.apxchat__mark svg { width: 40px; height: 40px; display: block; }
.apxchat__title { display: grid; gap: 3px; }
.apxchat__title b { font-family: var(--font-display); font-stretch: 116%; font-weight: 700; font-size: 15px; line-height: 1.15; }
.apxchat__title span { font-size: 12.5px; color: rgba(255,255,255,.62); line-height: 1.3; }

.apxchat__rows { display: grid; gap: 8px; padding: 14px; }
.apxchat__row {
	display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
	padding: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
	border-radius: var(--r); color: #fff; text-decoration: none; cursor: pointer;
	font: inherit; transition: background .15s ease, border-color .15s ease;
}
.apxchat__row:hover, .apxchat__row:focus-visible { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.28); color: #fff; }
.apxchat__ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--r); background: rgba(30,77,67,.55); color: #fff; }
.apxchat__ico svg { width: 21px; height: 21px; }
.apxchat__ico--wa { background: rgba(37,211,102,.16); color: #4ade80; }
.apxchat__text { display: grid; gap: 2px; min-width: 0; }
.apxchat__text b { font-size: 14.5px; font-weight: 600; }
.apxchat__text span { font-size: 12.5px; color: rgba(255,255,255,.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apxchat__go { margin-left: auto; color: rgba(255,255,255,.45); font-size: 20px; line-height: 1; }
.apxchat__row.is-loading { opacity: .6; pointer-events: none; }

.apxchat__foot { margin: 0; padding: 13px 18px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; color: rgba(255,255,255,.55); }
.apxchat__foot b { color: var(--zinc-2); font-weight: 600; }

@media (max-width: 560px) {
	.apxchat { right: 12px; bottom: 12px; left: 12px; }
	.apxchat__panel { width: 100%; }
}
@media print { .apxchat { display: none; } }

/* ---------------------------------------------------------------------------
   Link sets on landing, category and product pages
--------------------------------------------------------------------------- */
.linksection { padding-block: clamp(28px, 4vw, 52px); }
.linkset { margin-top: 30px; }
.linkset:first-child { margin-top: 0; }
.linkset h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); font-stretch: normal; margin-bottom: 12px; }
.linkset ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }
.linkset a {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 11px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
	color: var(--ink-2); text-decoration: none; font-size: 14px;
}
.linkset a:hover { border-color: var(--eucalypt); color: var(--eucalypt-d); }
.linkset .cnt { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------------------
   Page banner (featured image on a page)
--------------------------------------------------------------------------- */
.pagebanner { margin: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 0 0 clamp(20px, 3vw, 36px); }
.pagebanner .wrap { padding-top: clamp(20px, 3vw, 36px); }
.pagebanner img { width: 100%; height: clamp(200px, 34vw, 420px); object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); }

/* ---------------------------------------------------------------------------
   Category guide under the listing
--------------------------------------------------------------------------- */
.catguide__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.catguide .prose h2 { margin-top: 0; }
.catguide__kidshead { font-family: var(--font-mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); font-stretch: normal; margin: 26px 0 12px; }
.catguide__kids { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.catguide__kids a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; background: var(--paper); color: var(--ink-2); text-decoration: none; font-size: 14px; }
.catguide__kids a:hover { background: var(--zinc-1); color: var(--eucalypt-d); }
.catguide__kids .stamp { color: var(--ink-3); }

@media (max-width: 1000px) {
	.catguide__grid { grid-template-columns: 1fr; }
}