/* Sock Shop editorial archive body. Theme header/footer remain untouched. */
.sga-archive {
	--sga-ink: #111;
	--sga-muted: #777;
	--sga-line: #a9a9a9;
	--sga-paper: #fff;
	--sga-red: #db1215;
	--sga-gutter: clamp(16px, 3vw, 36px);
	position: relative;
	z-index: 0;
	margin-top: -50px;
	padding: 24px 0 clamp(40px, 5vw, 64px);
	background: var(--sga-paper);
	color: var(--sga-ink);
	font-family: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
.sga-archive *, .sga-archive *::before, .sga-archive *::after { box-sizing: border-box; }
.sga-archive img { display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover; }
.sga-archive h1, .sga-archive h2, .sga-archive h3, .sga-archive p { margin: 0; }
.sga-archive a { color: inherit; text-decoration: none; }
.sga-archive a:focus-visible { outline: 3px solid var(--sga-red); outline-offset: 4px; }
.sga-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.sga-page-grid { width: 100%; }
.sga-shell { width: min(100% - 2 * var(--sga-gutter), 1160px); margin-inline: auto; }
body.category-sock-guides .wmya-toast--install { display: none !important; }

/* Reusable, neutral placements until Sock Shop supplies campaign creative. */
.sga-ad { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; overflow: hidden; padding: 12px; border: 1px dashed #d4d0c9; background: #f7f5f1; color: #716b64; text-align: center; }
.sga-ad__label { font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.sga-ad strong { color: #222; font-size: 14px; line-height: 1.2; }
.sga-ad > span:last-child { font-size: 11px; line-height: 1.35; }
.sga-ad--rail { display: none; }
.sga-ad--leaderboard { width: min(100%, 970px); min-height: 70px; aspect-ratio: 970 / 90; margin: 22px auto 26px; }
.sga-ad--rectangle { width: 100%; max-width: 300px; aspect-ratio: 6 / 5; }
.sga-ad--skyscraper { width: 100%; max-width: 300px; min-height: 600px; }
.sga-ad--inline { grid-column: 1 / -1; width: min(100%, 728px); min-height: 72px; aspect-ratio: 728 / 90; justify-self: center; }
.sga-ad--mobile { display: none; }

/* Four compact editorial tiles, like the reference's top story strip. */
.sga-carousel { margin: 0 0 28px; }
.sga-carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 4); gap: 12px; overflow-x: auto; padding: 2px 2px 12px; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #aaa transparent; }
.sga-carousel__track--sparse { grid-auto-columns: min(280px, calc((100% - 36px) / 4)); justify-content: center; }
.sga-carousel-card { min-width: 0; overflow: hidden; background: #050505; color: #fff; scroll-snap-align: start; }
.sga-carousel-card__image { display: block; overflow: hidden; aspect-ratio: 1 / 1.08; background: #eee; }
.sga-carousel-card__image img { transition: transform .35s ease; }
.sga-carousel-card__image:hover img { transform: scale(1.04); }
.sga-carousel-card__body { min-height: 104px; padding: 11px 12px 13px; background: #050505; color: #fff; }
.sga-carousel-card .sga-story-meta { gap: 6px; color: #c4c4c4; font-size: 10px; }
.sga-carousel-card .sga-tag { background: #fff; color: #111; }
.sga-carousel-card h2 { margin-top: 8px; font-family: 'Arial Narrow', 'Roboto Condensed', 'Albert Sans', sans-serif; font-size: clamp(15px, 1.25vw, 19px); font-stretch: condensed; line-height: 1.08; font-weight: 800; }
.sga-carousel-card h2, .sga-carousel-card h2 a { color: #fff !important; }
.sga-carousel-card h2 a:hover { color: #ddd; }
.sga-story-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; color: var(--sga-muted); font-size: 12px; line-height: 1.35; }
.sga-tag { display: inline-flex; align-items: center; min-height: 21px; padding: 3px 7px; background: #eee; color: #222; font-size: 9px; line-height: 1; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* Main lead story: landscape image next to a compact text column. */
.sga-feature-layout { border-top: 1px solid var(--sga-line); border-bottom: 1px solid var(--sga-line); padding: 18px 0; }
.sga-feature { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .85fr); align-items: start; gap: 22px; }
.sga-feature__image { display: block; overflow: hidden; aspect-ratio: 1.5 / 1; background: #f7f5f1; }
.sga-image--product { object-fit: contain !important; padding: clamp(12px, 2.2vw, 24px); background: #fff; }
.sga-feature .sga-image--product { object-fit: contain; padding: clamp(12px, 2.2vw, 24px); background: #fff; }
.sga-feature__body { padding: 2px 0; }
.sga-tag--featured { min-height: 24px; padding-inline: 10px; background: #050505; color: #fff; font-size: 11px; letter-spacing: .03em; }
.sga-feature h2 { max-width: 18ch; margin-top: 13px; font-family: 'Arial Narrow', 'Roboto Condensed', 'Albert Sans', sans-serif; font-size: clamp(1.8rem, 3vw, 2.6rem); font-stretch: condensed; line-height: 1.02; font-weight: 800; letter-spacing: -.025em; }
.sga-feature h2 a:hover { color: #555; }
.sga-feature__body > p { margin-top: 16px; color: #707070; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.38; }
.sga-read-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding-bottom: 3px; border-bottom: 2px solid var(--sga-red); font-size: 14px; font-weight: 800; }
.sga-read-link:hover { gap: 12px; color: var(--sga-red); }
.sga-rule { height: 1px; margin-top: 0; background: var(--sga-line); }

/* Lower editorial stream and its ad column. */
.sga-latest { margin-top: 0; }
.sga-content-layout { display: grid; grid-template-columns: minmax(0, .66fr) minmax(0, 1fr); align-items: start; gap: 18px; }
.sga-sidebar { display: grid; justify-items: center; align-content: start; gap: 18px; padding-top: 18px; }
.sga-feed { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 18px; }
.sga-card { min-width: 0; overflow: hidden; border-bottom: 1px solid #b8b8b8; background: #fff; }
.sga-card__image { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: #f4f2ee; }
.sga-card__image img { object-fit: contain; background: #f4f2ee; }
.sga-card__body { padding: 13px 2px 18px; }
.sga-card h3 { margin-top: 9px; font-family: 'Arial Narrow', 'Roboto Condensed', 'Albert Sans', sans-serif; font-size: clamp(1.25rem, 2vw, 1.8rem); font-stretch: condensed; line-height: 1.08; font-weight: 800; }
.sga-card h3 a:hover { color: #555; }
.sga-card__body > p { margin-top: 8px; color: #707070; font-size: 15px; line-height: 1.5; }
.sga-card .sga-read-link { margin-top: 12px; }
.sga-pagination { margin-top: 26px; }
.sga-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.sga-pagination .page-numbers, .sga-pagination a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid #aaa; color: #111; font-weight: 700; }
.sga-pagination a:hover, .sga-pagination .current { background: #111; color: #fff; }
.sga-empty { padding: 30px 0; text-align: center; }
.sga-empty h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
.sga-empty p { margin-top: 10px; color: var(--sga-muted); }
.sga-button { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; margin-top: 16px; padding: 0 20px; background: #111; color: #fff !important; font-weight: 800; }

@media (max-width: 1099px) {
	.sga-shell { width: min(100% - 48px, 100%); }
	.sga-carousel__track { grid-auto-columns: calc((100% - 24px) / 3); }
	.sga-carousel__track--sparse { grid-auto-columns: min(280px, calc((100% - 24px) / 3)); }
	.sga-feature { grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr); gap: 18px; }
	.sga-content-layout { grid-template-columns: minmax(250px, .7fr) minmax(0, 1fr); gap: 16px; }
	.sga-sidebar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
	.sga-archive { margin-top: -65px; padding-top: 14px; padding-bottom: 28px; }
	body.category-sock-guides .mobile-sidebar-panel__button { display: none !important; }
	.sga-shell { width: 100%; }
	.sga-carousel { margin-bottom: 18px; }
	.sga-carousel__track { grid-auto-columns: minmax(68%, 1fr); gap: 10px; }
	.sga-carousel__track--sparse { grid-auto-columns: minmax(68%, 1fr); justify-content: start; }
	.sga-carousel-card__image { aspect-ratio: 1 / .9; }
	.sga-carousel-card__body { min-height: 94px; padding: 10px; }
	.sga-feature-layout { padding: 12px 0 16px; }
	.sga-feature { grid-template-columns: minmax(0, 1fr); gap: 13px; }
	.sga-feature__image { aspect-ratio: 3 / 2; }
	.sga-feature__body { padding: 0 16px 4px; }
	.sga-feature h2 { max-width: none; margin-top: 10px; font-size: clamp(1.55rem, 7vw, 2rem); }
	.sga-feature__body > p { margin-top: 9px; font-size: 15px; }
	.sga-feature .sga-read-link { margin-top: 10px; }
	.sga-ad--leaderboard { display: none; }
	.sga-ad--mobile { display: flex; width: 100%; min-height: 100px; margin: 20px 0 0; }
	.sga-content-layout { grid-template-columns: minmax(0, 1fr); }
	.sga-sidebar { display: none; }
	.sga-feed { gap: 14px; }
	.sga-card__image { aspect-ratio: 3 / 2; }
	.sga-card__body { padding: 12px 2px 15px; }
	.sga-card h3 { font-size: 1.35rem; }
	.sga-ad--inline { display: flex; }
	.sga-pagination .nav-links { justify-content: center; }
	.sga-pagination .page-numbers, .sga-pagination a { min-height: 40px; padding-inline: 11px; font-size: 13px; }
}
@media (min-width: 1700px) {
	.sga-page-grid { display: grid; width: calc(100% + 180px); margin-left: -90px; grid-template-columns: 160px minmax(0, 1160px) 160px; align-items: start; gap: 40px; justify-content: space-between; }
	.sga-shell { width: 100%; }
	.sga-ad--rail { position: sticky; z-index: 1; top: 24px; align-self: start; display: flex; width: 160px; height: 600px; }
}
@media (prefers-reduced-motion: reduce) { .sga-archive *, .sga-archive *::before, .sga-archive *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }
.sga-carousel__dots { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
.sga-carousel__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #d0d0d0; cursor: pointer; }
.sga-carousel__dots button[aria-pressed="true"] { background: #080808; }
.sga-carousel__dots button:focus-visible { outline: 2px solid var(--sga-red); outline-offset: 3px; }
.sga-product-card { border: 1px solid #e3e3e3; background: #fff; color: #111; }
.sga-product-card__image { aspect-ratio: 1 / 1; background: #fff; }
.sga-product-card__image .sga-product-image, .sga-product-card__image img { object-fit: contain !important; padding: 14px; }
.sga-product-card__body { min-height: 142px; padding: 13px 14px 15px; background: #fff; color: #111; }
.sga-product-card h2, .sga-product-card h2 a { min-height: 36px; margin: 0; color: #111 !important; font-family: 'Albert Sans', system-ui, sans-serif; font-size: 15px; font-stretch: normal; line-height: 1.2; font-weight: 700; letter-spacing: 0; }
.sga-product-card h2 a:hover { color: var(--sga-red) !important; }
.sga-product-card__price { margin-top: 7px; color: #111; font-size: 15px; line-height: 1.2; font-weight: 800; }
.sga-product-card__price .woocommerce-Price-amount { color: inherit; }
.sga-product-card__link { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding-bottom: 2px; border-bottom: 1px solid #111; color: #111 !important; font-size: 12px; font-weight: 800; }
.sga-product-card__link:hover { color: var(--sga-red) !important; border-color: var(--sga-red); }

/* AdSense live state (added 1.4.0): drop the placeholder frame once a real ad unit fills the slot. */
.sga-ads-on .sga-ad { padding: 0; border: 0; background: transparent; aspect-ratio: auto; }
.sga-ads-on .sga-ins { width: 100%; }
.sga-ads-on .sga-ins--rail { width: 160px; }
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

/* Ad debug view (?sga_debug=1): shows each ad slot with its live AdSense status instead of hiding unfilled ones. */
html.sga-debug ins.sga-ins { outline: 2px dashed #e11d48; min-height: 36px; }
html.sga-debug ins.sga-ins::before { content: attr(data-sga-note); display: block; padding: 2px 6px; font: 11px/1.4 ui-monospace,Menlo,monospace; color: #fff; background: #e11d48; }
html.sga-debug ins.adsbygoogle[data-ad-status="unfilled"] { display: block !important; }