/* =========================================================
   ANGRY RHINO WATER SUPPLIES — Shop Archive Styles
   Brand palette:
   --ar-navy-1: #052747   (deep navy)
   --ar-navy-2: #1D4166   (mid navy)
   --ar-black : #000000
   --ar-orange: #F73E19   (accent / CTA)
   --ar-sky   : #B0D5F9   (light blue)
   ========================================================= */

:root {
	--ar-navy-1: #052747;
	--ar-navy-2: #1D4166;
	--ar-black:  #000000;
	--ar-orange: #F73E19;
	--ar-sky:    #B0D5F9;

	--ar-ink:      #12263a;
	--ar-muted:    #64748b;
	--ar-line:     #e5eaf0;
	--ar-bg-soft:  #f6f8fb;
	--ar-white:    #ffffff;

	--ar-radius:   12px;
	--ar-radius-sm: 8px;
	--ar-shadow:   0 2px 10px rgba(5, 39, 71, 0.06);
	--ar-shadow-lg: 0 10px 30px rgba(5, 39, 71, 0.12);
	--ar-gap:      24px;
}

/* ---------- Layout shell ---------- */
.ar-shop-wrap {
	max-width: 1696px;
	margin: 0 auto;
	padding: 0 24px 60px;
}

.ar-shop-layout {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: var(--ar-gap);
	align-items: start;
}

/* ---------- Hero ---------- */
.ar-shop-hero {
	position: relative;
	background: linear-gradient(120deg, var(--ar-navy-1) 0%, var(--ar-navy-2) 100%);
	border-radius: var(--ar-radius);
	padding: 44px 40px;
	margin: 24px 0;
	overflow: hidden;
}
.ar-shop-hero::after {
	content: "";
	position: absolute;
	right: -40px;
	bottom: -60px;
	width: 220px;
	height: 220px;
	background: radial-gradient(circle, rgba(176, 213, 249, 0.18) 0%, transparent 70%);
	border-radius: 50%;
}
.ar-shop-hero__inner { position: relative; z-index: 1; max-width: 760px; }
.ar-shop-hero__title {
	color: var(--ar-white);
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	font-weight: 800;
	line-height: 1.1;
	margin: 0;
	letter-spacing: -0.01em;
}
.ar-shop-hero__title::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	background: var(--ar-orange);
	border-radius: 4px;
	margin-top: 14px;
}
.ar-shop-hero__desc {
	color: var(--ar-sky);
	font-size: 1rem;
	line-height: 1.6;
	margin-top: 14px;
}
.ar-shop-hero__desc p:last-child { margin-bottom: 0; }

/* ---------- Breadcrumb ---------- */
.woocommerce-breadcrumb {
	font-size: 0.85rem;
	color: var(--ar-muted);
	margin: 0 0 20px;
}
.woocommerce-breadcrumb a { color: var(--ar-navy-2); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--ar-orange); }

/* ---------- Sidebar ---------- */
.ar-shop-sidebar {
	position: sticky;
	top: 20px;
}
.ar-filters {
	background: var(--ar-white);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-radius);
	box-shadow: var(--ar-shadow);
	overflow: hidden;
}
.ar-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	background: var(--ar-navy-1);
}
.ar-filters__heading {
	color: var(--ar-white);
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
	letter-spacing: 0.01em;
}
.ar-filters__clear {
	color: var(--ar-sky);
	font-size: 0.8rem;
	text-decoration: none;
	white-space: nowrap;
}
.ar-filters__clear:hover { color: var(--ar-orange); }

.ar-filter-block { padding: 18px; border-bottom: 1px solid var(--ar-line); }
.ar-filter-block:last-of-type { border-bottom: 0; }
.ar-filter-block__title {
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ar-navy-1);
	margin: 0 0 14px;
}

/* Categories list */
.ar-filter-categories { list-style: none; margin: 0; padding: 0; }
.ar-filter-categories li { margin: 0; }
.ar-filter-categories a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	border-radius: var(--ar-radius-sm);
	text-decoration: none;
	color: var(--ar-ink);
	font-size: 0.9rem;
	transition: background 0.15s ease, color 0.15s ease;
}
.ar-filter-categories a:hover { background: var(--ar-bg-soft); color: var(--ar-navy-1); }
.ar-filter-categories li.is-active a { background: var(--ar-sky); color: var(--ar-navy-1); font-weight: 600; }
.ar-cat-count {
	background: var(--ar-bg-soft);
	color: var(--ar-muted);
	font-size: 0.72rem;
	font-weight: 600;
	padding: 1px 8px;
	border-radius: 20px;
	min-width: 24px;
	text-align: center;
}
.ar-filter-categories li.is-active .ar-cat-count { background: var(--ar-white); color: var(--ar-navy-1); }

/* Native WC widget tweaks inside sidebar */
.ar-filter-block ul.product-categories,
.ar-filter-block .woocommerce-widget-layered-nav-list {
	list-style: none; margin: 0; padding: 0;
}
.ar-filter-block .woocommerce-widget-layered-nav-list__item {
	padding: 6px 0;
	font-size: 0.9rem;
}
.ar-filter-block .woocommerce-widget-layered-nav-list__item a { color: var(--ar-ink); text-decoration: none; }
.ar-filter-block .woocommerce-widget-layered-nav-list__item a:hover { color: var(--ar-orange); }
.ar-filter-block .woocommerce-widget-layered-nav-list__item.chosen a::before { color: var(--ar-orange); }

/* Price slider */
.ar-filter-block .price_slider_wrapper .price_slider {
	background: var(--ar-line);
	height: 5px;
	border-radius: 5px;
	margin: 14px 0;
}
.ar-filter-block .ui-slider-range { background: var(--ar-navy-2); }
.ar-filter-block .ui-slider-handle {
	background: var(--ar-orange);
	border: 2px solid var(--ar-white);
	box-shadow: 0 1px 4px rgba(0,0,0,.2);
	width: 16px; height: 16px;
	top: -6px;
}
.ar-filter-block .price_slider_amount .button {
	background: var(--ar-navy-1);
	color: #fff;
	border: 0;
	border-radius: var(--ar-radius-sm);
	padding: 8px 16px;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
}
.ar-filter-block .price_slider_amount .button:hover { background: var(--ar-orange); }
.ar-filter-block .price_slider_amount .price_label { font-size: 0.85rem; color: var(--ar-ink); }

/* ---------- Main / toolbar ---------- */
.ar-shop-toolbar {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--ar-white);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-radius);
	box-shadow: var(--ar-shadow);
	padding: 12px 18px;
	margin-bottom: 22px;
}
.ar-shop-toolbar__result {
	color: var(--ar-muted);
	font-size: 0.85rem;
	margin: 0;
}
.ar-shop-toolbar .woocommerce-result-count { margin: 0; }
.ar-shop-toolbar__sort { margin-left: auto; }
.ar-shop-toolbar__sort .woocommerce-ordering { margin: 0; }
.ar-shop-toolbar__sort select {
	appearance: none;
	-webkit-appearance: none;
	background: var(--ar-bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231D4166' d='M6 8L0 0h12z'/%3E%3C/svg%3E") no-repeat right 14px center;
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-radius-sm);
	padding: 9px 38px 9px 14px;
	font-size: 0.88rem;
	color: var(--ar-ink);
	cursor: pointer;
}
.ar-shop-toolbar__sort select:focus { outline: none; border-color: var(--ar-navy-2); }

/* ---------- Product grid ---------- */
.ar-shop-main ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
.ar-shop-main ul.products::before,
.ar-shop-main ul.products::after { content: none !important; }

.ar-shop-main ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	background: var(--ar-white);
	border: 1px solid var(--ar-line);
	border-radius: var(--ar-radius);
	box-shadow: var(--ar-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ar-shop-main ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--ar-shadow-lg);
	border-color: var(--ar-sky);
}

/* Thumbnail — square, no crop, consistent everywhere */
.ar-shop-main .astra-shop-thumbnail-wrap,
.ar-shop-main li.product > a img,
.ar-shop-main li.product .woocommerce-LoopProduct-link {
	position: relative;
}
.ar-shop-main .astra-shop-thumbnail-wrap {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--ar-white);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-bottom: 1px solid var(--ar-line);
}
.ar-shop-main .astra-shop-thumbnail-wrap a.woocommerce-LoopProduct-link,
.ar-shop-main .astra-shop-thumbnail-wrap picture {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
}
.ar-shop-main .astra-shop-thumbnail-wrap img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 16px;
	box-sizing: border-box;
}

/* Summary */
.ar-shop-main .astra-shop-summary-wrap { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.ar-shop-main .ast-woo-product-category {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ar-orange);
	margin-bottom: 6px;
}
.ar-shop-main .woocommerce-loop-product__title {
	font-size: 0.95rem !important;
	line-height: 1.35;
	font-weight: 600;
	color: var(--ar-navy-1) !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 3.9em;
}
.ar-shop-main .ast-loop-product__link:hover .woocommerce-loop-product__title { color: var(--ar-orange) !important; }

.ar-shop-main .price {
	color: var(--ar-navy-1) !important;
	font-size: 1.15rem !important;
	font-weight: 800 !important;
	margin: 0 0 14px !important;
	display: block;
	margin-top: auto !important;
}
.ar-shop-main .price del { color: var(--ar-muted); font-weight: 500; font-size: 0.9rem; }
.ar-shop-main .price ins { text-decoration: none; }

/* Add to cart button */
.ar-shop-main li.product .button.add_to_cart_button,
.ar-shop-main li.product .added_to_cart {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--ar-navy-1) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--ar-radius-sm) !important;
	padding: 11px 14px !important;
	font-size: 0.88rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background 0.15s ease;
}
.ar-shop-main li.product .button.add_to_cart_button:hover,
.ar-shop-main li.product .added_to_cart:hover { background: var(--ar-orange) !important; }
.ar-shop-main li.product .added_to_cart { margin-top: 8px; background: var(--ar-navy-2) !important; }

/* On-card hover cart icon (Astra) */
.ar-shop-main .ast-on-card-button { background: var(--ar-navy-1); color:#fff; }
.ar-shop-main .ast-on-card-button:hover { background: var(--ar-orange); }

/* ---------- Pagination ---------- */
.ar-shop-main .woocommerce-pagination { margin-top: 34px; }
.ar-shop-main .woocommerce-pagination ul {
	display: flex; gap: 8px; justify-content: center;
	border: 0 !important; list-style: none; padding: 0;
}
.ar-shop-main .woocommerce-pagination ul li { border: 0 !important; margin: 0; }
.ar-shop-main .woocommerce-pagination ul li a,
.ar-shop-main .woocommerce-pagination ul li span {
	display: flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px;
	border: 1px solid var(--ar-line) !important;
	border-radius: var(--ar-radius-sm);
	background: var(--ar-white);
	color: var(--ar-navy-1);
	font-weight: 600;
	text-decoration: none;
	padding: 0 12px;
}
.ar-shop-main .woocommerce-pagination ul li a:hover { background: var(--ar-sky); border-color: var(--ar-sky) !important; }
.ar-shop-main .woocommerce-pagination ul li span.current {
	background: var(--ar-navy-1); color: #fff; border-color: var(--ar-navy-1) !important;
}

/* No results */
.woocommerce-info, .woocommerce-no-products-found .woocommerce-info {
	background: var(--ar-bg-soft);
	border-left: 4px solid var(--ar-orange);
	border-radius: var(--ar-radius-sm);
	padding: 16px 20px;
	color: var(--ar-ink);
}

/* ---------- Mobile filter drawer controls ---------- */
.ar-filter-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	background: var(--ar-navy-1);
	color: #fff;
	border: 0;
	border-radius: var(--ar-radius-sm);
	padding: 10px 16px;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
}
.ar-filter-toggle:hover { background: var(--ar-orange); }
.ar-filter-close { display: none; }
.ar-filters__apply { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1400px) {
	.ar-shop-main ul.products { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
	.ar-shop-layout { grid-template-columns: 240px 1fr; }
	.ar-shop-main ul.products { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.ar-shop-wrap { padding: 0 14px 40px; }
	.ar-shop-layout { grid-template-columns: 1fr; }
	.ar-shop-hero { padding: 30px 22px; }

	/* Sidebar becomes a slide-in drawer */
	.ar-shop-sidebar {
		position: fixed;
		top: 0; left: 0;
		width: min(86vw, 340px);
		height: 100dvh;
		z-index: 9999;
		background: var(--ar-white);
		box-shadow: var(--ar-shadow-lg);
		transform: translateX(-100%);
		transition: transform 0.28s ease;
		overflow-y: auto;
		padding: 0;
		border-radius: 0;
	}
	.ar-shop-sidebar.is-open { transform: translateX(0); }
	.ar-filters { border: 0; border-radius: 0; box-shadow: none; }

	.ar-filter-close {
		display: block;
		position: absolute;
		top: 12px; right: 12px;
		z-index: 2;
		background: transparent;
		border: 0;
		color: #fff;
		font-size: 1.8rem;
		line-height: 1;
		cursor: pointer;
	}
	.ar-filters__head { padding-right: 50px; }

	.ar-filter-toggle { display: inline-flex; }
	.ar-shop-toolbar { flex-wrap: wrap; }
	.ar-shop-toolbar__result { order: 3; width: 100%; }
	.ar-shop-toolbar__sort { margin-left: auto; }

	.ar-filters__apply {
		display: block;
		position: sticky;
		bottom: 0;
		width: 100%;
		background: var(--ar-orange);
		color: #fff;
		border: 0;
		padding: 15px;
		font-size: 0.95rem;
		font-weight: 700;
		cursor: pointer;
	}

	/* Backdrop */
	body.ar-filters-open::after {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(5, 39, 71, 0.5);
		z-index: 9998;
	}
	/* Scroll lock — JS sets top:-Ypx; this pins the body without a jump */
	body.ar-filters-open {
		position: fixed;
		width: 100%;
		overflow: hidden;
	}
}

@media (max-width: 480px) {
	.ar-shop-main ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.ar-shop-main .woocommerce-loop-product__title { font-size: 0.82rem !important; min-height: 3.4em; }
	.ar-shop-main .price { font-size: 1rem !important; }
	.ar-shop-main .button.add_to_cart_button { font-size: 0.78rem !important; padding: 9px 8px !important; }
	.ar-shop-main .astra-shop-summary-wrap { padding: 12px; }
}