/*
 * t33-packing-guides -- every rule is scoped under .tpg.tpg-root.
 *
 * Target theme: t33-atlas. Same tokens and visual language as travel-makeup-bags (warm paper cards with --rule
 * borders, terracotta calls to action, Erode titles, Atkinson Next text, Atkinson Mono small caps), trimmed to a
 * compact card so the shortcodes add little to the article.
 *
 * Specificity guard: atlas styles bare a, button, p (margin), img (height auto), and inside :where(.entry-content)
 * p, li, details, summary, ul, ol, img, table at (0,0,1). Every rule here is .tpg.tpg-root .x (0,3,0 or more);
 * elements without a class get [class] selectors or an explicit reset; no heading elements inside a block.
 */

.tpg.tpg-root {
	--tpg-accent-ink: var(--terra-ink, #a23d1c);
	--tpg-accent-dark: #7f2f14;
	--tpg-accent-soft: var(--terra-soft, #f3dcd0);
	--tpg-ink: var(--ink, #1c2a3a);
	--tpg-ink-2: var(--ink-2, #3b4859);
	--tpg-dim: var(--ink-3, #5c6876);
	--tpg-line: var(--rule, #d9cfbf);
	--tpg-line-2: var(--rule-2, #c9bca6);
	--tpg-card: var(--paper-2, #fbf8f2);
	--tpg-sand: var(--sand, #efe5d3);
	--tpg-sea: var(--sea-ink, #33665f);
	--tpg-r-s: var(--r-s, 6px);
	--tpg-r: var(--r, 12px);
	--tpg-shadow: var(--shadow-1, 0 1px 0 rgba(28, 42, 58, 0.06), 0 10px 24px -16px rgba(28, 42, 58, 0.35));
	--tpg-serif: var(--serif, "Erode", ui-serif, Georgia, "Times New Roman", serif);
	--tpg-sans: var(--sans, "Atkinson Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
	--tpg-mono: var(--mono, "Atkinson Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	display: block;
	box-sizing: border-box;
	margin: 20px 0;
	padding: 0;
	font-family: var(--tpg-sans);
	font-size: 16px;
	line-height: 1.5;
	color: var(--tpg-ink);
	text-align: left;
	letter-spacing: 0;
	text-transform: none;
	scroll-margin-top: 8px;   /* atlas already sets scroll-padding-top on html for its sticky bar */
}
.tpg.tpg-root *,
.tpg.tpg-root *::before,
.tpg.tpg-root *::after {
	box-sizing: border-box;
}
.tpg.tpg-root p[class],
.tpg.tpg-root ul[class],
.tpg.tpg-root dl[class],
.tpg.tpg-root figure[class] {
	font-family: var(--tpg-sans);
}
.tpg.tpg-root p[class] {
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--tpg-ink);
}
.tpg.tpg-root ul[class] {
	margin: 0;
	padding: 0;
	list-style: none;
}
.tpg.tpg-root li {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}
.tpg.tpg-root img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.tpg.tpg-root a {
	color: var(--tpg-accent-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.tpg.tpg-root a:hover {
	color: var(--tpg-accent-dark);
}
.tpg.tpg-root :focus-visible {
	outline: 3px solid var(--tpg-ink);
	outline-offset: 2px;
	box-shadow: none;
}

/* ---------------------------------------------------------------- buttons */
.tpg.tpg-root .tpg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 0;
	padding: 10px 20px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	background: var(--tpg-accent-ink);
	color: #fff;
	font-family: var(--tpg-sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.15s ease;
}
.tpg.tpg-root .tpg-btn:hover,
.tpg.tpg-root .tpg-btn:focus {
	background: var(--tpg-accent-dark);
	color: #fff;
	text-decoration: none;
}
.tpg.tpg-root .tpg-btn-sm {
	padding: 8px 14px;
	font-size: 15px;
}
.tpg.tpg-root .tpg-btn-line {
	border-color: var(--tpg-accent-ink);
	background: transparent;
	color: var(--tpg-accent-ink);
}
.tpg.tpg-root .tpg-btn-line:hover,
.tpg.tpg-root .tpg-btn-line:focus {
	background: var(--tpg-accent-soft);
	color: var(--tpg-accent-dark);
}
.tpg.tpg-root .tpg-tier {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 12px;
	background: var(--tpg-accent-soft);
	color: var(--tpg-accent-dark);
	font-family: var(--tpg-mono);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ------------------------------------------------------------- disclosure */
.tpg.tpg-root.tpg-disclosure {
	margin: 0 0 14px;
}
.tpg.tpg-root .tpg-disc[class] {
	font-size: 13px;
	color: var(--tpg-dim);
}
.tpg.tpg-root .tpg-disc a {
	color: var(--tpg-dim);
}

/* ---------------------------------------------------------------- product */
.tpg.tpg-root.tpg-product {
	display: grid;
	grid-template-columns: 112px 1fr;
	gap: 6px 16px;
	align-items: start;
	margin: 16px 0;
	padding: 14px;
	border: 1px solid var(--tpg-line);
	border-radius: var(--tpg-r);
	background: var(--tpg-card);
	box-shadow: var(--tpg-shadow);
}
.tpg.tpg-root .tpg-pc-imglink {
	display: block;
	width: 112px;
	border-radius: var(--tpg-r-s);
	background: #fff;
}
.tpg.tpg-root .tpg-pc-imglink img {
	width: 112px;
	height: 112px;
	object-fit: contain;
	border-radius: var(--tpg-r-s);
}
.tpg.tpg-root .tpg-pc-top[class] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
}
.tpg.tpg-root .tpg-pc-name {
	font-family: var(--tpg-serif);
	font-size: 20px;
	font-weight: 560;
	line-height: 1.25;
}
.tpg.tpg-root .tpg-pc-why[class] {
	margin: 4px 0 0;
	color: var(--tpg-ink-2);
}
.tpg.tpg-root .tpg-pc-list[class] {
	margin: 6px 0 0;
}
.tpg.tpg-root .tpg-pc-list li {
	position: relative;
	padding-left: 16px;
	font-size: 15px;
	color: var(--tpg-ink-2);
}
.tpg.tpg-root .tpg-pc-list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tpg-sea);
}
.tpg.tpg-root .tpg-pc-act[class] {
	margin: 10px 0 0;
}

/* ------------------------------------------------------------------ picks */
.tpg.tpg-root .tpg-picks-list[class] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
}
.tpg.tpg-root .tpg-pick {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 10px;
	border: 1px solid var(--tpg-line);
	border-radius: var(--tpg-r);
	background: var(--tpg-card);
}
.tpg.tpg-root .tpg-pick-img {
	display: block;
	align-self: center;
	width: 96px;
	height: 96px;
}
.tpg.tpg-root .tpg-pick-img img {
	width: 96px;
	height: 96px;
	object-fit: contain;
}
.tpg.tpg-root .tpg-pick-name {
	font-family: var(--tpg-serif);
	font-size: 16px;
	font-weight: 560;
	line-height: 1.25;
}
.tpg.tpg-root .tpg-pick .tpg-btn {
	margin-top: auto;
	width: 100%;
}

/* -------------------------------------------------------------- checklist */
.tpg.tpg-root.tpg-checklist {
	padding: 14px 16px;
	border: 1px solid var(--tpg-line);
	border-radius: var(--tpg-r);
	background: var(--tpg-card);
}
.tpg.tpg-root .tpg-group-label[class] {
	margin: 12px 0 2px;
	font-family: var(--tpg-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tpg-sea);
}
.tpg.tpg-root .tpg-group:first-child .tpg-group-label[class] {
	margin-top: 0;
}
.tpg.tpg-root .tpg-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 44px;
	padding: 9px 0;
	border-bottom: 1px solid var(--tpg-line);
}
.tpg.tpg-root .tpg-box {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	border: 1.5px solid var(--tpg-line-2);
	border-radius: 4px;
	background: #fff;
}
.tpg.tpg-root .tpg-item-link {
	font-weight: 700;
}
.tpg.tpg-root .tpg-item-note {
	color: var(--tpg-dim);
	font-size: 14px;
}
.tpg.tpg-root .tpg-cta[class] {
	margin: 14px 0 0;
}

/* ---------------------------------------------------------------- weather */
.tpg.tpg-root .tpg-wx[class] {
	margin: 0;
	padding: 0;
}
.tpg.tpg-root .tpg-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--tpg-line);
	border-radius: var(--tpg-r);
	background: var(--tpg-card);
}
.tpg.tpg-root .tpg-wx-table {
	width: 100%;
	min-width: 600px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 15px;
}
.tpg.tpg-root .tpg-wx-table th,
.tpg.tpg-root .tpg-wx-table td {
	padding: 9px 12px;
	border: 0;
	border-bottom: 1px solid var(--tpg-line);
	background: transparent;
	font-size: 15px;
	line-height: 1.35;
	text-align: left;
	vertical-align: top;
	color: var(--tpg-ink);
}
.tpg.tpg-root .tpg-wx-table thead th {
	background: var(--tpg-sand);
	font-family: var(--tpg-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.tpg.tpg-root .tpg-wx-table tbody th {
	font-weight: 700;
	white-space: nowrap;
}
.tpg.tpg-root .tpg-wx-table td {
	white-space: nowrap;
}
.tpg.tpg-root .tpg-wx-table td.tpg-wx-wear {
	min-width: 220px;
	white-space: normal;
}
.tpg.tpg-root .tpg-wx-cap {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--tpg-dim);
}

/* ------------------------------------------------------------------ facts */
.tpg.tpg-root .tpg-fl[class] {
	margin: 0;
	border-top: 1.5px solid var(--tpg-ink);
}
.tpg.tpg-root .tpg-fact {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 4px 16px;
	padding: 9px 4px;
	border-bottom: 1px solid var(--tpg-line-2);
}
.tpg.tpg-root .tpg-fact dt {
	margin: 0;
	padding: 0;
	font-family: var(--tpg-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tpg-sea);
}
.tpg.tpg-root .tpg-fact dd {
	margin: 0;
	padding: 0;
}
.tpg.tpg-root .tpg-fact-src {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 4px;
	font-size: 13px;
}

/* -------------------------------------------------------------------- faq */
.tpg.tpg-root.tpg-faq {
	border-top: 1.5px solid var(--tpg-ink);
}
.tpg.tpg-root details {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}
.tpg.tpg-root summary {
	margin: 0;
	padding: 0;
	font-weight: 700;
}
.tpg.tpg-root .tpg-faq-item {
	border-bottom: 1px solid var(--tpg-line-2);
}
.tpg.tpg-root .tpg-faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 10px 4px;
	cursor: pointer;
	list-style: none;
	font-family: var(--tpg-serif);
	font-size: 18px;
	font-weight: 560;
	line-height: 1.25;
	color: var(--tpg-ink);
}
.tpg.tpg-root .tpg-faq-q::-webkit-details-marker {
	display: none;
}
.tpg.tpg-root .tpg-faq-ic {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
}
.tpg.tpg-root .tpg-faq-ic::before,
.tpg.tpg-root .tpg-faq-ic::after {
	content: "";
	position: absolute;
	left: 2px;
	top: 8px;
	width: 14px;
	height: 2px;
	background: var(--tpg-accent-ink);
	transition: transform 0.15s ease;
}
.tpg.tpg-root .tpg-faq-ic::after {
	transform: rotate(90deg);
}
.tpg.tpg-root .tpg-faq-item[open] .tpg-faq-ic::after {
	transform: rotate(0);
}
.tpg.tpg-root .tpg-faq-a {
	padding: 0 4px 10px;
}
.tpg.tpg-root .tpg-faq-a p {
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.55;
}

/* ------------------------------------------------------------------ phone */
@media (max-width: 560px) {
	.tpg.tpg-root.tpg-product {
		grid-template-columns: 88px 1fr;
		gap: 4px 12px;
		padding: 12px;
	}
	.tpg.tpg-root .tpg-pc-imglink,
	.tpg.tpg-root .tpg-pc-imglink img {
		width: 88px;
		height: 88px;
	}
	.tpg.tpg-root .tpg-pc-main {
		min-width: 0;
	}
	.tpg.tpg-root .tpg-pc-act .tpg-btn {
		width: 100%;
	}
	.tpg.tpg-root .tpg-picks-list[class] {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.tpg.tpg-root .tpg-fact {
		grid-template-columns: 1fr;
	}
	.tpg.tpg-root .tpg-cta .tpg-btn {
		width: 100%;
	}
}