/**
 * AUTOLINE Shop/Archive restyle — layout + chrome for the product-list surfaces
 * (/shop, categories, brands, product search). The product CARD itself comes
 * from al-home.css (.al-card component); tokens from al-design-tokens.css.
 * Everything here is scoped under body.al-shop, added only on restyled archives
 * by mu-plugins/al-shop-restyle.php. Header/footer untouched (separate phase).
 */

/* ===== Base type on the archive content area ===== */
body.al-shop .main-page-wrapper{
	font-family:var(--al-font-sans);
	color:var(--al-ink-900);
}

/* ===== Product grid: 4 desktop / 3 tablet / 2 phone (B2B standard — cards big
   enough to carry a visible buy-box). !important beats WoodMart's inline
   --wd-col-* style attribute on .wd-products. ===== */
body.al-shop .wd-products{
	--wd-col-lg:4 !important;
	--wd-col-md:3 !important;
	--wd-col-sm:2 !important;
	--wd-gap-lg:16px !important;
	--wd-gap-sm:10px !important;
}
body.al-shop .wd-products{align-items:stretch !important} /* WoodMart defaults to flex-start → ragged rows */
body.al-shop .wd-products .al-col{display:flex}
body.al-shop .wd-products .al-col .al-card{flex:1;min-width:0}
/* uniform cards: the name is ALWAYS a 2-line block (ellipsis past that), so a
   short name can't shrink the card and a long one can't stretch it */
body.al-shop .al-card .al-cnm{
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
	min-height:38px;
}

/* ===== Toolbar (breadcrumb + result count + per-page + ordering) ===== */
body.al-shop .shop-loop-head{
	border-bottom:1px solid var(--al-line-200);
	padding-bottom:var(--al-sp-3);
	margin-bottom:var(--al-sp-5);
}
body.al-shop .wd-breadcrumbs,
body.al-shop .rank-math-breadcrumb{
	font-size:var(--al-fs-xs);
	color:var(--al-ink-500);
}
body.al-shop .wd-breadcrumbs a,
body.al-shop .rank-math-breadcrumb a{color:var(--al-ink-500)}
body.al-shop .wd-breadcrumbs a:hover,
body.al-shop .rank-math-breadcrumb a:hover{color:var(--al-blue-700)}
body.al-shop .wd-products-per-page,
body.al-shop .woocommerce-result-count{font-size:var(--al-fs-xs);color:var(--al-ink-500)}
body.al-shop .wd-products-per-page a.current-variation{color:var(--al-blue-700);font-weight:var(--al-fw-bold)}
body.al-shop .woocommerce-ordering select{
	font-family:var(--al-font-sans);
	font-size:var(--al-fs-sm);
	color:var(--al-ink-700);
}

/* ===== Sidebar / filters (al-auto-filter renders WoodMart layered-nav widgets) */
body.al-shop .sidebar-container{font-size:var(--al-fs-sm)}
body.al-shop .sidebar-container .widget-title{
	font-family:var(--al-font-sans);
	font-size:var(--al-fs-xs);
	font-weight:var(--al-fw-bold);
	letter-spacing:.07em;
	text-transform:uppercase;
	color:var(--al-ink-900);
	border-bottom:2px solid var(--al-blue-700);
	padding-bottom:var(--al-sp-2);
	margin-bottom:var(--al-sp-3);
}
body.al-shop .sidebar-container .wd-widget{margin-bottom:var(--al-sp-6)}
body.al-shop .sidebar-container ul li a{
	color:var(--al-ink-700);
	font-size:var(--al-fs-sm);
	line-height:var(--al-lh-base);
}
body.al-shop .sidebar-container ul li a:hover{color:var(--al-blue-700)}
body.al-shop .sidebar-container .count{
	color:var(--al-ink-400);
	font-size:var(--al-fs-2xs);
	font-family:var(--al-font-mono);
}

/* -- facet rows: custom checkbox + count pill + full-row hover ------------- */
body.al-shop .al-auto-filter ul.wd-filter-list{
	max-height:300px;overflow-y:auto;scrollbar-width:thin;
	margin:0;padding:0 2px 0 0;list-style:none;
}
/* structure per row: <li><a>[label]</a> <span.count> — count is OUTSIDE the a,
   so the li is the flex row; active class = wd-active (WoodMart layered nav) */
body.al-shop .al-auto-filter ul.wd-filter-list li{
	margin:0;
	display:flex;align-items:center;gap:4px;
	padding:2px 8px 2px 0;border-radius:var(--al-radius-sm);
	transition:background var(--al-dur-fast) var(--al-ease);
}
body.al-shop .al-auto-filter ul.wd-filter-list li:hover{background:var(--al-blue-050)}
body.al-shop .al-auto-filter ul.wd-filter-list li a{
	flex:1;min-width:0;
	display:flex;align-items:center;gap:9px;
	padding:5px 0 5px 8px;
	color:var(--al-ink-700);font-size:var(--al-fs-sm);line-height:1.3;
	transition:color var(--al-dur-fast) var(--al-ease);
}
body.al-shop .al-auto-filter ul.wd-filter-list li:hover a{color:var(--al-blue-700)}
body.al-shop .al-auto-filter ul.wd-filter-list li a::before{
	content:"";flex:0 0 16px;width:16px;height:16px;
	border:1.5px solid var(--al-line-300);border-radius:3px;background:#fff;
	transition:background var(--al-dur-fast) var(--al-ease),border-color var(--al-dur-fast) var(--al-ease);
}
body.al-shop .al-auto-filter ul.wd-filter-list li:hover a::before{border-color:var(--al-blue-400)}
body.al-shop .al-auto-filter ul.wd-filter-list li.wd-active a,
body.al-shop .al-auto-filter ul.wd-filter-list li.chosen a{color:var(--al-blue-700);font-weight:var(--al-fw-semibold)}
body.al-shop .al-auto-filter ul.wd-filter-list li.wd-active a::before,
body.al-shop .al-auto-filter ul.wd-filter-list li.chosen a::before{
	background:var(--al-blue-700) center/11px no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' d='M2 6.2l3 3 5-6.4'/%3E%3C/svg%3E");
	border-color:var(--al-blue-700);
}
body.al-shop .al-auto-filter ul.wd-filter-list .count{
	margin-left:auto;flex:0 0 auto;
	background:var(--al-bg-100);padding:1px 7px;border-radius:var(--al-radius-pill);
}
body.al-shop .al-auto-filter ul.wd-filter-list li.wd-active .count,
body.al-shop .al-auto-filter ul.wd-filter-list li.chosen .count{background:var(--al-blue-100);color:var(--al-blue-700)}

/* -- colour swatches: al-shop.js maps colour names → --al-sw on the link ---- */
body.al-shop .al-auto-filter ul.wd-filter-list li a.al-sw::before{
	background:var(--al-sw);
	border-color:rgba(0,0,0,.22);
	border-radius:50%;
}
body.al-shop .al-auto-filter ul.wd-filter-list li.wd-active a.al-sw::before,
body.al-shop .al-auto-filter ul.wd-filter-list li.chosen a.al-sw::before{
	background:var(--al-sw);
	border-color:rgba(0,0,0,.22);
	box-shadow:0 0 0 2px #fff,0 0 0 4px var(--al-blue-700);
}

/* -- view-switcher icons: WoodMart's font glyphs are same-looking dot blobs at
   this size, so draw crisp SVG icons instead (mask + currentColor keeps the
   theme's inactive/active link colours) */
body.al-shop .wd-products-shop-view a::before{
	content:"" !important;
	width:17px;height:17px;display:block;
	background:currentColor;
	-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;
}
body.al-shop .wd-products-shop-view a.per-row-6::before{
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='1' y='1' width='7' height='7' rx='1.4'/%3E%3Crect x='10' y='1' width='7' height='7' rx='1.4'/%3E%3Crect x='1' y='10' width='7' height='7' rx='1.4'/%3E%3Crect x='10' y='10' width='7' height='7' rx='1.4'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='1' y='1' width='7' height='7' rx='1.4'/%3E%3Crect x='10' y='1' width='7' height='7' rx='1.4'/%3E%3Crect x='1' y='10' width='7' height='7' rx='1.4'/%3E%3Crect x='10' y='10' width='7' height='7' rx='1.4'/%3E%3C/svg%3E");
}
body.al-shop .wd-products-shop-view a.per-row-list::before{
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='1' y='2' width='16' height='3' rx='1.2'/%3E%3Crect x='1' y='7.5' width='16' height='3' rx='1.2'/%3E%3Crect x='1' y='13' width='16' height='3' rx='1.2'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='1' y='2' width='16' height='3' rx='1.2'/%3E%3Crect x='1' y='7.5' width='16' height='3' rx='1.2'/%3E%3Crect x='1' y='13' width='16' height='3' rx='1.2'/%3E%3C/svg%3E");
}

/* -- collapsible facet widgets (JS wraps content in .al-facet-body>.al-facet-inner) */
body.al-shop .al-auto-filter .widget-title{
	cursor:pointer;user-select:none;
	display:flex;align-items:center;justify-content:space-between;
}
body.al-shop .al-auto-filter .widget-title::after{
	content:"";width:8px;height:8px;flex:0 0 auto;margin-left:8px;margin-top:-4px;
	border-right:2px solid var(--al-ink-500);border-bottom:2px solid var(--al-ink-500);
	transform:rotate(45deg);
	transition:transform var(--al-dur-base) var(--al-ease);
}
body.al-shop .al-auto-filter .wd-widget.al-collapsed .widget-title::after{transform:rotate(-45deg);margin-top:4px}
body.al-shop .al-auto-filter .al-facet-body{
	display:grid;grid-template-rows:1fr;
	transition:grid-template-rows var(--al-dur-slow) var(--al-ease);
}
body.al-shop .al-auto-filter .al-facet-inner{overflow:hidden;min-height:0}
body.al-shop .al-auto-filter .wd-widget.al-collapsed .al-facet-body{grid-template-rows:0fr}

/* (long lists simply scroll inside the 300px box — a "+ show all" toggle was
   tried and removed 2026-07-02: expanding into an already-capped scroll box
   only revealed ~2 rows before scrolling anyway) */

/* -- active-filters row: chips that stand out ------------------------------- */
body.al-shop .wd-active-filters{
	gap:8px 10px;
	padding:10px 12px;
	background:var(--al-bg-100);
	border:1px solid var(--al-line-200);
	border-radius:var(--al-radius-md);
	margin-top:0;
}
body.al-shop .wd-active-filters .wd-clear-filters{border-inline-end:1px solid var(--al-line-300);padding-inline-end:12px}
body.al-shop .wd-active-filters .wd-clear-filters a{
	display:inline-flex;align-items:center;gap:6px;
	background:#fff;
	border:1px solid var(--al-line-300);
	border-radius:var(--al-radius-pill);
	padding:6px 12px;
	color:var(--al-ink-700);
	font-size:var(--al-fs-xs);font-weight:var(--al-fw-semibold);
	transition:color var(--al-dur-fast) var(--al-ease),border-color var(--al-dur-fast) var(--al-ease);
}
body.al-shop .wd-active-filters .wd-clear-filters a:hover{color:var(--al-danger-600);border-color:var(--al-danger-500)}
body.al-shop .wd-active-filters .widget_layered_nav_filters ul{gap:8px}
body.al-shop .wd-active-filters .widget_layered_nav_filters li.chosen a{
	display:inline-flex;align-items:center;gap:6px;
	background:var(--al-blue-100);
	border:1px solid var(--al-blue-400);
	border-radius:var(--al-radius-pill);
	padding:6px 12px;
	color:var(--al-blue-700);
	font-size:var(--al-fs-xs);font-weight:var(--al-fw-semibold);
	transition:background var(--al-dur-fast) var(--al-ease),color var(--al-dur-fast) var(--al-ease),border-color var(--al-dur-fast) var(--al-ease);
}
body.al-shop .wd-active-filters .widget_layered_nav_filters li.chosen a:hover{
	background:var(--al-danger-100);border-color:var(--al-danger-500);color:var(--al-danger-600);
}

/* (brand-badge border lives in al-home.css .al-b-brand — one rule for homepage
   AND archives, per the owner's "all products look the same") */

/* -- fetch-swap loading state ---------------------------------------------- */
body.al-shop .al-loading{position:relative;pointer-events:none}
body.al-shop .al-loading::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.55);z-index:5}
body.al-shop .wd-content-area.al-loading::before{
	content:"";position:absolute;top:120px;left:50%;width:34px;height:34px;margin-left:-17px;
	border:3px solid var(--al-line-200);border-top-color:var(--al-blue-700);border-radius:50%;
	z-index:6;animation:al-spin .7s linear infinite;
}
@keyframes al-spin{to{transform:rotate(360deg)}}

/* ===== List view (al-list toggled by the grid/list switcher; the switcher is
   hidden ≤1024px by WoodMart, so list is a desktop-only mode) ===== */
@media (min-width:1025px){
	body.al-shop .wd-products.al-list{--wd-col-lg:1 !important}
	body.al-shop .al-list .al-card{flex-direction:row;align-items:stretch}
	body.al-shop .al-list .al-card .al-thumb{flex:0 0 180px;aspect-ratio:auto;min-height:160px}
	body.al-shop .al-list .al-card .al-cbody{
		flex:1;min-width:0;
		display:grid;grid-template-columns:minmax(0,1fr) 300px;
		grid-template-areas:"sku price" "name add" "stock add";
		grid-template-rows:auto auto 1fr;
		column-gap:32px;align-items:start;align-content:start;
		padding:16px 20px;
		text-align:left;
	}
	body.al-shop .al-list .al-card .al-csku{grid-area:sku;justify-self:start}
	body.al-shop .al-list .al-card .al-cnm{grid-area:name;justify-self:start;min-height:0;font-size:var(--al-fs-md);margin-bottom:8px}
	body.al-shop .al-list .al-card .al-stock{grid-area:stock;justify-self:start;margin-bottom:0}
	body.al-shop .al-list .al-card .al-price{grid-area:price;justify-self:end}
	body.al-shop .al-list .al-card .al-price-var .al-vselect{width:auto;max-width:200px}
	body.al-shop .al-list .al-card .al-add{grid-area:add;align-self:center;margin-top:0;padding-top:0;width:100%}
	body.al-shop .al-list .al-card .al-notify{width:100%}
}

/* ===== Load more / pagination ===== */
body.al-shop .wd-load-more{
	font-family:var(--al-font-sans);
	font-size:var(--al-fs-sm);
	font-weight:var(--al-fw-semibold);
	color:#fff;
	background-color:var(--al-blue-700);
	border-radius:var(--al-radius-sm);
	transition:background-color var(--al-dur-base) var(--al-ease);
}
body.al-shop .wd-load-more:hover{background-color:var(--al-blue-600);color:#fff}
body.al-shop .woocommerce-pagination .page-numbers li span.current{
	background-color:var(--al-blue-700);
	color:#fff;
	border-radius:var(--al-radius-sm);
}

/* ===== Category/shop page H1 (when the theme shows it) ===== */
body.al-shop .page-title .entry-title,
body.al-shop h1.woocommerce-products-header__title{
	font-family:var(--al-font-sans);
	font-weight:var(--al-fw-bold);
	color:var(--al-ink-900);
}

/* ===== Card buttons: WoodMart's base.css `:is(.btn,.button,button)` rule loads
   AFTER al-home.css and ties its specificity, washing our buttons gray — these
   body.al-shop-scoped copies outrank it. ===== */
body.al-shop .al-card .al-btn{
	border:0;border-radius:var(--al-radius-sm);
	font-family:inherit;font-weight:var(--al-fw-semibold);font-size:var(--al-fs-sm);
	text-transform:none;
}
body.al-shop .al-card .al-btn-blue{background-color:var(--al-blue-700);color:#fff}
body.al-shop .al-card .al-btn-blue:hover{background-color:var(--al-blue-800);color:#fff}
body.al-shop .al-card .al-btn-ghost{background-color:#fff;border:1px solid var(--al-line-300);color:var(--al-ink-900)}
body.al-shop .al-card .al-btn-ghost:hover{border-color:var(--al-blue-500);color:var(--al-blue-700);background-color:#fff}
body.al-shop .al-card button.al-box-add{
	background-color:var(--al-blue-050);color:var(--al-blue-700);
	border:1px dashed var(--al-blue-400);
	font-size:var(--al-fs-xs);font-weight:var(--al-fw-semibold);text-transform:none;
}
body.al-shop .al-card button.al-box-add:hover{background-color:var(--al-blue-100)}
body.al-shop .al-gemail button.al-gemail-send{background-color:var(--al-blue-700);color:#fff;border:0}

/* ===== AJAX add feedback states (mirror homepage) ===== */
body.al-shop .al-btn.al-ok{background:var(--al-success-500)!important;color:#fff!important}
body.al-shop .al-btn.al-err{background:var(--al-danger-500)!important;color:#fff!important}

/* guest email-capture box on OOS cards (markup injected by al-shop.js) */
body.al-shop .al-gemail{display:flex;gap:6px;margin-top:6px}
body.al-shop .al-gemail input{
	flex:1;min-width:0;
	border:1px solid var(--al-line-300);
	border-radius:var(--al-radius-sm);
	padding:8px 10px;
	font-family:var(--al-font-sans);
	font-size:var(--al-fs-xs);
}
body.al-shop .al-gemail .al-btn{flex:0 0 auto;padding:8px 12px}
body.al-shop .al-notified{
	display:block;text-align:center;
	color:var(--al-success-600);
	font-size:var(--al-fs-sm);font-weight:var(--al-fw-semibold);
	padding:9px 0;
}

/* ===== Mobile ===== */
@media (max-width:768.98px){
	body.al-shop .wd-products{--wd-gap-sm:8px !important}
	body.al-shop .al-card .al-qty{width:44px}
	/* narrow cards: variation select drops to its own full-width row */
	body.al-shop .al-card .al-price-var{flex-wrap:wrap}
	body.al-shop .al-card .al-price-var .al-vselect{
		width:100% !important;max-width:100% !important;
		margin-left:0;margin-top:4px;
	}
}