/**
 * arctic-trucks/product-info-drawer — "Mer informasjon" consolidated drawer.
 *
 * The drawer chrome (trigger, dialog, panel, header) is owned by ch/drawer
 * (codehouse-blocks); we only tweak the trigger to a two-line button and style
 * the bundled content. Because the standalone fitment / downloadable-files
 * blocks no longer load on the PDP, ALL content CSS this block needs is bundled
 * here (intentional duplication with those blocks' own copies).
 *
 * Tokens come from at-theme/theme.json.
 */

/* Trigger — full-width accordion row (label + dynamic subtitle) ------------
   ch/drawer's accordion variant supplies width:100%, 1px border-top and the
   hover colour hook; here we theme the dividers/hover and set the label in
   header-nav typography (14px / 700 / uppercase / 0.04em — same as the
   top-level menu items). */

.at-product-info-drawer {
	--ch-drawer-divider: var( --wp--preset--color--light-grey, #e5e5e5 );
	--ch-drawer-trigger-hover: var( --wp--preset--color--original-blue, #0071ce );
	width: 100%;
}

/* Only the requested top hairline — kill the variant's bottom border on the
   last drawer. Specificity (0,4,0) beats ch/drawer's
   `.ch-drawer:last-of-type .ch-drawer__trigger--accordion` (0,3,0) so the
   stylesheet order between the two plugins doesn't matter. */
.ch-drawer.at-product-info-drawer .ch-drawer__trigger.ch-drawer__trigger--accordion {
	border-bottom: 0;
	text-align: left;
}

.at-product-info-drawer .ch-drawer__trigger-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 auto;
}

.at-product-info-drawer .ch-drawer__trigger-label {
	/* Literal 0.875rem, not the fluid body-sm preset — the header nav items
	   this mirrors use the literal size (custom.css), and the two must match. */
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.at-product-info-drawer .ch-drawer__trigger-desc {
	font-size: var( --wp--preset--font-size--body-sm, 0.875rem );
	font-weight: 400;
	line-height: 1.25;
	color: var( --wp--preset--color--dark-grey, #565657 );
	margin-top: 2px;
}

/* Drawer body — titled sections ------------------------------------------- */

.at-pid__section + .at-pid__section {
	margin-top: var( --wp--preset--spacing--lg, 48px );
}

.at-pid__heading {
	margin: 0 0 var( --wp--preset--spacing--sm, 16px );
	font-size: var( --wp--preset--font-size--body-sm, 0.875rem );
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --wp--preset--color--dark-grey, #565657 );
}

.at-pid__desc > :first-child {
	margin-top: 0;
}

.at-pid__desc > :last-child {
	margin-bottom: 0;
}

/* Bundled fitment content (copied from vehicle-fitment/style.css) ---------- */

.at-fitment {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--md, 24px );
}

.at-fitment__make {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--xs, 8px );
}

.at-fitment__make-name {
	margin: 0;
	padding-bottom: var( --wp--preset--spacing--xs, 8px );
	font-size: var( --wp--preset--font-size--body, 1rem );
	font-weight: 700;
	color: var( --wp--preset--color--black, #101012 );
	border-bottom: 1px solid var( --wp--preset--color--light-grey, #e5e5e5 );
}

.at-fitment__models {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--xs, 8px );
	margin: 0;
	padding: 0;
	list-style: none;
}

.at-fitment__model {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--xs, 8px ) var( --wp--preset--spacing--sm, 16px );
}

.at-fitment__model-name {
	font-weight: 600;
	color: var( --wp--preset--color--graphite, #222222 );
}

.at-fitment__years {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.at-fitment__year {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	font-size: var( --wp--preset--font-size--body-sm, 0.875rem );
	line-height: 1.6;
	color: var( --wp--preset--color--dark-blue, #003569 );
	background: var( --wp--preset--color--light-blue, #e6f1fa );
	border-radius: var( --wp--custom--border-radius--pill, 999px );
	white-space: nowrap;
}

/* Bundled downloadable-files content (copied from downloadable-files/style.css) */

.at-downloadable-files__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.at-downloadable-files__item {
	margin: 0;
	border-bottom: 1px solid var( --wp--preset--color--light-grey, #e5e5e5 );
}

.at-downloadable-files__item:first-child {
	border-top: 1px solid var( --wp--preset--color--light-grey, #e5e5e5 );
}

.at-downloadable-files__link {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--xs, 0.5rem );
	padding-block: var( --wp--preset--spacing--sm, 0.75rem );
	color: var( --wp--preset--color--original-blue, #0071ce );
	text-decoration: none;
	font-weight: 600;
}

.at-downloadable-files__link:hover,
.at-downloadable-files__link:focus {
	color: var( --wp--preset--color--medium-blue, #004e8c );
	text-decoration: underline;
}

.at-downloadable-files__icon {
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	background-color: currentColor;
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.55l3.3-3.3 1.4 1.4L12 17.34l-4.7-4.69 1.4-1.4 3.3 3.3V3h2zM5 19h14v2H5v-2z'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.55l3.3-3.3 1.4 1.4L12 17.34l-4.7-4.69 1.4-1.4 3.3 3.3V3h2zM5 19h14v2H5v-2z'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

/* Fallback path when ch/drawer is unavailable. */
.at-product-info-fallback > summary {
	padding: var( --wp--preset--spacing--sm, 16px ) 0;
	font-weight: 600;
	cursor: pointer;
}