/* ==========================================================================
   Modern responsive layer for Nepali Shopping (Kinmel)
   Loads AFTER styles.css / blue.css and overrides layout, typography, and
   spacing while keeping the site's existing blue color identity.
   Colors pulled directly from the existing styles.css / blue.css:
     Primary blue:      #075899
     Primary blue dark: #034285
     Light blue accent: #c5dde9 / #c7d7db / #c0dae7
     Pale blue bg:       #eff8fa / #edf2f3 / #ddf0f6
   The only image file used anywhere is product_images/logo.png - everything
   else (icons, buttons, ratings, textures) is drawn with CSS.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
	--color-primary: #075899;
	--color-primary-dark: #034285;
	--color-primary-light: #c5dde9;
	--color-primary-pale: #eff8fa;
	--color-accent: #f5a623;
	--color-bg-page: #f4f8fb;
	--color-bg-panel: #ffffff;
	--color-border: #e1e8ed;
	--color-text: #263544;
	--color-text-muted: #64748b;
	--font-heading: 'Poppins', -apple-system, "Segoe UI", sans-serif;
	--font-body: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--radius: 10px;
	--radius-sm: 6px;
	--shadow-sm: 0 1px 2px rgba(15, 45, 75, 0.06);
	--shadow-panel: 0 2px 10px rgba(15, 45, 75, 0.07);
	--shadow-lift: 0 12px 24px rgba(7, 88, 153, 0.14);
	--gradient-primary: linear-gradient(135deg, #0a6bb5 0%, #034285 100%);
	--gradient-accent: linear-gradient(135deg, #ffb84d 0%, #f5a623 100%);
	--max-width: 1240px;
	--gutter: 22px;
}

/* ---- Base / typography -------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

#reviews {
	scroll-margin-top: 20px;
}

* {
	box-sizing: border-box;
}

/* Referenced across ~19 templates/snippets but never actually defined once
   styles.css was dropped from this self-contained theme - simple utility,
   restored here. */
.FloatRight {
	float: right;
}

.FloatLeft {
	float: left;
}

body {
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-bg-page);
	-webkit-text-size-adjust: 100%;
	line-height: 1.55;
}

h1, h2, h3, .Content h2, .TitleHeading {
	font-family: var(--font-heading) !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em;
}

a {
	color: var(--color-primary);
	transition: color 0.15s ease;
}

a:hover {
	color: var(--color-primary-dark);
}

img {
	max-width: 100%;
	height: auto;
}

/* ---- Overall page container --------------------------------------------- */

#Container {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* Homepage hero banner - Nepal-made / informational messaging */
.HomeHeroBanner {
	background: var(--gradient-primary);
	border-radius: var(--radius);
	margin: var(--gutter) auto 0;
	max-width: var(--max-width);
}

.HomeHeroInner {
	padding: 40px;
	color: #fff;
}

.HomeHeroBadge {
	display: inline-block;
	background: rgba(255, 255, 255, 0.16);
	padding: 5px 14px;
	border-radius: 999px;
	font-size: 0.8em;
	font-weight: 600;
	margin-bottom: 12px;
}

.HomeHeroInner h1 {
	font-size: 1.7em;
	margin-bottom: 8px;
	color: #fff;
}

.HomeHeroInner p {
	opacity: 0.92;
	max-width: 640px;
}

/* Design intentionally frozen at the 381px breakpoint state below this
   point - no further overrides for header/search/hero under 380px. */

/* #TopMenu removed - was the "My Account / Order Status / Wish Lists /
   Gift Certificates / View Cart / Sign in" bar. My Account and Login are
   now in the main #Menu nav instead (see includes/display/PagesMenu.php). */

/* Hidden by default - only shown briefly during an actual AJAX request via
   JS. This rule used to come from styles.css, which is no longer loaded. */
#AjaxLoading {
	display: none;
	position: fixed;
	top: 12px;
	right: 12px;
	z-index: 10000;
	background: #fff;
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lift);
	padding: 8px 14px;
	font-size: 0.85em;
}

#AjaxLoading img {
	vertical-align: middle;
	margin-right: 6px;
}

/* Generic hide utility - used by a few features (e.g. product videos) that
   toggle it via JS/PHP. Also lost when styles.css was removed. */
.HideElement {
	display: none;
}

/* ---- Header ----------------------------------------------------------------
   Static - scrolls normally with the page, doesn't stay pinned. */

#Header {
	height: auto;
	clear: none;
	margin: 0;
	padding: 20px var(--gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: saturate(180%) blur(6px);
	border-bottom: 1px solid var(--color-border);
}

#Logo {
	width: auto;
	max-width: 100%;
	float: none;
	flex: 0 0 auto;
	padding-left: 12px;
}

#Logo img {
	height: clamp(28px, 9vw, 52px);
	max-height: 52px;
	width: auto;
	display: block;
}

#SearchForm {
	float: none !important;
	padding-top: 0 !important;
	padding-right: 12px;
	flex: 1 1 0;
	min-width: 60px;
	max-width: 250px;
	position: relative !important;
	margin-left: auto;
}

#SearchForm form {
	display: flex;
	align-items: stretch;
	width: 100%;
}

/* The %%LNG_Search%% label is redundant now that the button itself says
   "Search" - keep it for screen readers only, don't show it visually. */
#SearchForm label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

#SearchForm input.Textbox {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	padding: 12px 16px;
	border: 2px solid var(--color-primary);
	border-right: none;
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
	font-size: 16px; /* prevents iOS auto-zoom on focus */
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#SearchForm input.Textbox:focus {
	outline: none;
	border-color: var(--color-primary-dark);
	box-shadow: 0 0 0 3px rgba(7, 88, 153, 0.12);
	background: #fff;
}

#SearchForm input.Button {
	position: static !important;
	flex: 0 0 auto;
	background: var(--gradient-primary);
	border: none;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	width: auto !important;
	height: auto !important;
	padding: 0 20px !important;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	cursor: pointer;
}

#SearchForm p {
	font-size: 0.8em;
	margin-top: 6px;
	color: var(--color-text-muted);
}

/* Below 500px, drop the search bar onto its own row under the logo
   instead of squeezing it down to a sliver next to it. */
@media (max-width: 500px) {
	#SearchForm {
		flex-basis: 100%;
		max-width: 100%;
		min-width: 0;
		margin-left: 0;
		padding-right: var(--gutter);
		padding-left: var(--gutter);
		order: 3;
	}
}

/* ---- Main navigation --------------------------------------------------------
   Pill-shaped nav bar with a subtle gradient and lifted active/hover state. */

#Menu {
	height: auto;
	clear: none;
	background: var(--gradient-primary);
	border-radius: var(--radius);
	margin: 16px 0;
	padding: 0;
	box-shadow: var(--shadow-panel);
}

#Menu li {
	float: none;
	position: static;
}

#Menu ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 6px;
	gap: 2px;
}

#Menu ul li a {
	display: block;
	float: none;
	height: auto;
	text-align: left;
	background: none;
	padding: 10px 18px;
	color: #fff;
	font-size: 0.88em;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	border-radius: 999px;
	transition: background 0.15s ease;
}

#Menu ul li a:hover {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	text-decoration: none;
}

/* Categories dropdown in the main nav */
#Menu li.HasSubMenu {
	position: relative;
}

#Menu li.HasSubMenu > a::after {
	content: "\25BE";
	margin-left: 5px;
	font-size: 0.8em;
}

#Menu ul.CategoriesSubMenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 210px;
	background-color: #ffffff !important;
	opacity: 1 !important;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lift);
	padding: 8px;
	margin: 0;
	z-index: 200;
}

#Menu li.HasSubMenu:hover > ul.CategoriesSubMenu {
	display: block;
}

#Menu ul.CategoriesSubMenu li {
	position: relative;
}

#Menu ul.CategoriesSubMenu li a {
	display: block;
	color: #263544 !important;
	background: transparent !important;
	padding: 9px 12px;
	font-size: 0.9em;
	font-weight: 500;
	border-radius: var(--radius-sm);
	white-space: nowrap;
}

#Menu ul.CategoriesSubMenu li a:hover {
	background-color: var(--color-primary-pale) !important;
	color: var(--color-primary-dark) !important;
}

/* Nested (grandchild category) submenu opens to the side */
#Menu ul.CategoriesSubMenu li.HasSubMenu > ul.CategoriesSubMenu {
	top: 0;
	left: 100%;
	margin: 0;
}

/* Dropdowns rely on :hover, which doesn't exist on touch - fall back to a
   simple stacked list so categories are still reachable on mobile. */
@media (max-width: 900px) {
	#Menu ul.CategoriesSubMenu {
		display: block;
		position: static;
		box-shadow: none;
		padding-left: 14px;
		margin: 0;
	}

	#Menu ul.CategoriesSubMenu li.HasSubMenu > ul.CategoriesSubMenu {
		position: static;
		margin: 0;
	}

	#Menu li.HasSubMenu > a::after {
		display: none;
	}

	/* Individual category nav items collapse into just the "All Categories"
	   overlay below on narrow screens - Home, All Categories, content
	   pages (Links/Contact Us), and the account link stay visible. */
	#Menu li.CatRootItem {
		display: none;
	}
}

/* Below 1145px the nav gets crowded - drop the "Links" and currency-switch
   items first, before anything else has to give. Both are plain <li>
   with no distinguishing class, so target them by their href instead.
   Hiding the anchor (rather than the li) is enough: the li has no padding
   of its own, so it collapses to nothing once its only content is hidden. */
@media (max-width: 1145px) {
	#Menu ul li a[href*="Links.html"],
	#Menu ul li a[href*="setCurrencyId="] {
		display: none;
	}
}

/* Hamburger trigger that combines "All Categories", "Contact Us", "Login"
   (and any other page-menu items) below 510px. It's part of the markup at
   every width (see PagesMenu.html) but stays hidden until this breakpoint. */
.MobileMenuTrigger {
	display: none;
}

#Menu ul li a.MobileMenuLink {
	display: block;
	padding: 8px 16px;
	color: #fff;
	font-size: 26px;
	line-height: 1.2;
	text-decoration: none;
	border-radius: 999px;
	transition: background 0.15s ease;
}

#Menu ul li a.MobileMenuLink:hover {
	background: rgba(255, 255, 255, 0.16);
}

@media (max-width: 510px) {
	.MobileMenuTrigger {
		display: block;
		order: 1;
		margin-left: auto;
	}

	/* Collapse the bar to just Home + the hamburger trigger. Everything
	   else (All Categories, Contact Us, Login, etc.) hides here and only
	   reappears, stacked full-width, once #Menu gets .MobileNavOpen. */
	#Menu ul > li:not(.First):not(.MobileMenuTrigger) {
		display: none;
		width: 100%;
	}

	#Menu.MobileNavOpen ul > li:not(.First):not(.MobileMenuTrigger):not(.CatRootItem):not(:has(> a[href*="Links.html"])):not(:has(> a[href*="setCurrencyId="])) {
		display: block;
	}
}

/* ---- "All Categories" mega-dropdown overlay --------------------------------
   Click-to-open (native <details>, no JS needed beyond the close handlers).
   Uses position:fixed so it floats above the ENTIRE page rather than being
   clipped by any ancestor's overflow - important since #Menu can scroll
   horizontally on narrow screens. */

#Menu li.AllCatsTrigger {
	position: relative;
	display: flex;
	align-items: stretch;
}

.AllCatsLink {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 10px 18px;
	background: transparent;
	color: #fff;
	font-size: 0.88em;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	border-radius: 999px;
	transition: background 0.15s ease;
}

.AllCatsLink:hover {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.AllCatsPanel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	max-height: 70vh;
	overflow-y: auto;
	background-color: #ffffff !important;
	opacity: 1 !important;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lift);
	padding: 8px;
	margin: 0;
	z-index: 200;
	flex-direction: column;
}

/* Desktop (mouse): hover opens it, matching Computers/Electronics exactly. */
@media (min-width: 901px) {
	#Menu li.AllCatsTrigger:hover .AllCatsPanel {
		display: flex;
	}
}

/* Mobile (touch, no hover): the onclick handler toggles this class instead. */
#Menu li.AllCatsTrigger.MobileOpen .AllCatsPanel {
	display: flex;
}

.AllCatsPanel .AllCatsRoot {
	display: block;
	color: var(--color-primary-dark) !important;
	background: transparent !important;
	font-weight: 700;
	padding: 12px 14px 4px;
	font-size: 1.02em;
	border-radius: 8px;
}

.AllCatsPanel .AllCatsChild {
	display: block;
	color: #263544 !important;
	background: transparent !important;
	font-weight: 500;
	padding: 10px 14px 10px 26px;
	font-size: 0.9em;
	border-radius: 8px;
	white-space: nowrap;
}

.AllCatsPanel .AllCatsChild:hover,
.AllCatsPanel .AllCatsRoot:hover {
	background-color: var(--color-bg-page) !important;
	color: var(--color-primary-dark) !important;
}

/* Both "New Products" and "Our Newsletter" are rendered twice on
   product.html (once for desktop position, once for the mobile reordered
   position) - hide the mobile copy by default here, before the
   max-width:900px query below that shows it again. This rule must stay
   ABOVE that media query: with matching specificity, a later plain rule
   always wins over an earlier one even inside a media query, so if this
   were placed after the media query it would silently override it. */
.NewProductsMobileSlot,
.NewsletterMobileSlot {
	display: none;
}

/* ---- Three-column layout -> responsive stacking --------------------------
   Original: fixed #Container 975px, .Left 160px, .Content 615px, .Right 160px,
   all floated. Replace with flexbox that reflows to a single column. */

@media (min-width: 964px) {
	#Wrapper {
		display: flex;
		flex-wrap: wrap;
		gap: var(--gutter);
		align-items: flex-start;
	}
}

@media (max-width: 963px) {
	#Wrapper {
		display: flex;
		flex-wrap: wrap;
		/* gap: var(--gutter); */
		align-items: flex-start;
	}
}

.Left,
.Right {
	float: none;
	width: 230px;
	min-height: 0;
	flex: 0 0 230px;
}

.Content {
	float: none;
	width: 0; /* flex-basis controls actual width, this keeps it from overflowing */
	flex: 1 1 400px;
	min-height: 0;
	padding: 0;
}

/* Stack to a single column once the side columns would get too cramped */
@media (max-width: 963px) {
	#Wrapper {
		/* flex-direction: column; */
	}

	.Left,
	.Right,
	.Content {
		flex: 1 1 100%;
		width: 100%;
	}

	/* DOM order is Left, Content, Right. Reorder so Content leads, Right
	   follows directly below/inside it, then the left sidebar widgets. */
	.Content {
		order: 1;
	}

	.Right {
		order: 2;
	}

	.Left {
		order: 3;
	}

	#Header {
		padding: 12px var(--gutter);
	}

	/* The category sidebar duplicates the "All Categories" dropdown already
	   available in the nav bar on smaller screens - hide it rather than
	   stacking it below the content. */
	#SideCategoryList {
		display: none;
	}

	/* "New Products" (product.html only) needs to appear after "Visitors
	   Who Viewed This Product Also Viewed" once columns stack, rather than
	   above it as it does on desktop. Since those two panels live in
	   different columns (.Left vs .Content), a plain flex "order" can't
	   move one across columns - so the panel is rendered twice in the
	   template (see product.html) and only one copy is shown at a time. */
	.NewProductsDesktopSlot {
		display: none;
	}

	.NewProductsMobileSlot {
		display: block;
	}

	/* Same cross-column technique for "Our Newsletter" (product.html) - it
	   needs to land after "You Recently Viewed..." once columns stack. */
	.NewsletterDesktopSlot {
		display: none;
	}

	.NewsletterMobileSlot {
		display: block;
	}

	/* A 100%-width input + full-width pill button looked stretched and
	   awkward once the sidebar card itself became the full viewport width -
	   cap the card so it reads as a centered, proportioned block instead of
	   an edge-to-edge bar. */
	#SideNewsletterBox {
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
		padding: 24px 22px;
	}

	#SideNewsletterBox .FormGroup {
		margin-bottom: 14px;
	}

	#SideNewsletterBox .FormGroup input.Textbox {
		padding: 13px 14px;
	}

	#SideNewsletterBox .btn-primary {
		padding: 14px 26px;
	}
}

/* ---- Panels / blocks -> modern cards -------------------------------------- */

.Block.Moveable.Panel {
	background: var(--color-bg-panel);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-panel);
	padding: 20px;
	margin-top: var(--gutter);
	transition: box-shadow 0.2s ease;
}

.Block.Moveable.Panel h2,
.Block.Moveable.Panel h3 {
	margin-top: 0;
	color: var(--color-primary-dark);
	font-size: 1.15em;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--color-primary-pale);
	margin-bottom: 14px;
}

/* ---- Brands widget (left sidebar) -> tag pills ----------------------------- */

.BrandList .BlockContent ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.BrandList .BlockContent ul li {
	margin: 0;
	padding: 0;
}

.BrandList .BlockContent ul li a {
	display: inline-block;
	line-height: 1.4;
	padding: 6px 14px;
	background: var(--color-primary-pale);
	color: var(--color-primary-dark);
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 0.9em;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.BrandList .BlockContent ul li a:hover {
	background: var(--color-primary);
	color: #ffffff;
	border-color: var(--color-primary-dark);
	transform: translateY(-2px);
}

.BrandList .AllBrandsLink {
	margin-top: 14px;
}

.BrandList .AllBrandsLink a {
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
}

.BrandList .AllBrandsLink a:hover {
	text-decoration: underline;
}

/* ---- Product grids --------------------------------------------------------- */

.ProductList {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	align-items: start;
	gap: 28px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ProductList li {
	text-align: center;
	background-color: #ffffff !important;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ProductList li:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lift);
	border-color: var(--color-primary-light);
}

.ProductList .ProductImage {
	background-color: #ffffff !important;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 14px;
}

.ProductList .ProductImage img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 0;
	transition: transform 0.25s ease;
}

.ProductList li:hover .ProductImage img {
	transform: scale(1.04);
}

.ProductList .ProductDetails {
	background-color: #ffffff !important;
	padding: 4px 14px 0;
}

.ProductList .ProductDetails strong {
	font-weight: 500;
}

.ProductList .ProductDetails strong a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
	color: var(--color-text);
	font-weight: 500;
	font-size: 0.92em;
	line-height: 1.3;
}

.ProductList .ProductPriceRating {
	background-color: #ffffff !important;
	margin-top: auto;
	padding: 8px 14px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.ProductList .ProductPriceRating em {
	display: block !important;
	color: var(--color-primary-dark) !important;
	background: none !important;
	font-weight: 700 !important;
	font-style: normal !important;
	padding: 0 !important;
	border-radius: 0 !important;
	font-size: 1.08em;
}

.ProductList .ProductActionAdd {
	display: none !important;
}

/* ---- Product details page ---------------------------------------------------
   Two-column layout (photo card + details) side by side down to a browser
   width of 640px, then stacks to a single column below that. See
   ProductDetails.html for the matching .ProductThumbCard wrapper and
   .PriceRow/.BrandRow classes. */

#ProductDetails .BlockContent {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px;
}

#ProductDetails .BlockContent > h1 {
	flex-basis: 100%;
}

#ProductDetails h1 {
	font-size: 1.6em;
	margin-bottom: 4px;
}

.ProductThumbCard {
	flex: 0 0 220px;
	display: flex;
	justify-content: center;
	align-items: center;
	/* background: var(--color-bg-page); */
	/* border: 1px solid var(--color-border); */
	border-radius: var(--radius);
	padding: 20px;
	min-height: 220px;
}

.ProductThumbImage {
	max-width: 100% !important;
	height: auto !important;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

/* Interspire's JS sets a fixed inline height on .ProductThumb based on the
   product's real image proportions. For portrait-oriented photos (taller
   than wide - like phone screenshots) that reserved height can be much
   larger than what's actually needed once the image is scaled down to
   fit the narrower card, leaving a large blank gap. Let it size to its
   actual content instead of trusting the inline height. */
.ProductThumb {
	height: auto !important;
	max-width: 100%;
}

/* Interspire's own template only hides the thumbnail strip in some cases,
   not simply "1 image" - the prev/next arrows and thumbnail can be left
   showing (and clickable) even with nothing to scroll to. Hide the whole
   strip in CSS whenever there's just a single thumbnail in the list. */
.ImageCarouselBox:has(.ProductTinyImageList ul > li:only-child) {
	display: none !important;
}

/* Prev/next thumbnail-scroll arrows - hidden everywhere regardless of
   image count. Interspire renders these as either <a> or <button>
   depending on template/version, so the ID selector covers both. */
#ImageScrollPrev,
#ImageScrollNext {
	display: none !important;
}

#ProductDetails .ProductMain {
	flex: 1 1 240px;
	min-width: 0;
	max-width: 100%;
	padding-top: 4px;
}

.ProductDetailsGrid {
	/* border-top: 1px solid var(--color-border); */
}

.ProductDetailsGrid .DetailRow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 14px 0;
	/* border-bottom: 1px solid var(--color-border); */
}

.ProductDetailsGrid .Label {
	font-weight: 600;
	color: var(--color-text-muted);
	min-width: 70px;
	font-size: 0.82em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.ProductDetailsGrid .PriceRow, .ProductDetailsGrid .PriceRow .Label, .ProductDetailsGrid .PriceRow .Value { padding: 18px 0 22px; display: inline-block; }

.ProductDetailsGrid .Value .ProductPrice {
	font-family: var(--font-heading);
	font-size: 1.5em;
	color: var(--color-primary-dark);
	font-weight: 700;
}

.ProductDetailsGrid .BrandRow .Value a {
	display: inline-block;
	background: var(--color-primary-pale);
	color: var(--color-primary-dark);
	font-weight: 600;
	padding: 4px 14px;
	border-radius: 999px;
	font-size: 0.9em;
	text-decoration: none;
	transition: background 0.15s ease;
}

.ProductDetailsGrid .BrandRow .Value a:hover {
	background: var(--color-primary-light);
}

@media (max-width: 640px) {
	.ProductThumbCard {
		flex: 1 1 100%;
		width: 100%;
	}

	#ProductDetails .ProductMain {
		flex: 1 1 100%;
	}
}

/* ---- Buttons / inputs -------------------------------------------------------
   Every button in the site is now a real CSS button (see REDESIGN_NOTES.md
   for the full list of templates that were converted from GIF <input
   type="image"> buttons to these classes). */

input[type="image"] {
	max-width: 100%;
	height: auto;
}

input.Textbox,
textarea,
select {
	font-size: 16px; /* prevents iOS auto-zoom on focus */
	padding: 10px 12px;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-sm);
	max-width: 100%;
	font-family: var(--font-body);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input.Textbox:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(7, 88, 153, 0.12);
}

.btn-primary {
	display: inline-block;
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	background: var(--gradient-primary);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 13px 26px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	box-shadow: 0 4px 12px rgba(7, 88, 153, 0.28);
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn-primary:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(7, 88, 153, 0.34);
	filter: brightness(1.05);
}

.btn-primary:active {
	transform: translateY(0);
}

/* Contact form submit button (built-in ISC contact page) */
input.ContactButton {
	display: inline-block;
	background: var(--gradient-primary);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 13px 26px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(7, 88, 153, 0.28);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

input.ContactButton:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(7, 88, 153, 0.34);
}

/* Secondary (outline) button - used next to a .btn-primary action so the
   two don't compete for attention, e.g. "Compare Selected" + "Add to Cart" */
.btn-secondary {
	display: inline-block;
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	background: #fff;
	color: var(--color-primary);
	border: 1.5px solid var(--color-primary);
	border-radius: 999px;
	padding: 11px 24px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.btn-secondary:hover {
	background: var(--color-primary-pale);
	transform: translateY(-2px);
}

.btn-secondary:active {
	transform: translateY(0);
}

/* Compare / Add-to-cart button pair (Snippets/CompareButtonList.html,
   Snippets/CompareButton.html, and the CompareButton div reused on
   category, brand, vendor, tag, recently-viewed and account pages) */
.CompareButton {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.CompareButton .btn-primary,
.CompareButton .btn-secondary {
	padding: 9px 18px;
	font-size: 13px;
}

/* Wishlist / "Notify Me When Available" button */
#SideProductAddToWishList .btn-primary {
	width: 100%;
}

/* ---- Newsletter box -------------------------------------------------------
   Distinct from the plain white sidebar cards - gradient panel, icon badge
   heading, tagline, and clearly grouped fields instead of bare label/input
   pairs separated by <br>. */

#SideNewsletterBox {
	background: var(--gradient-primary);
	border: none;
	color: #fff;
	position: relative;
	overflow: hidden;
}

#SideNewsletterBox::before {
	content: "";
	position: absolute;
	top: -40px;
	right: -40px;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
}

#SideNewsletterBox h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff !important;
	font-size: 1.1em;
	margin-bottom: 6px;
	position: relative;
}

.NewsletterIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	background: rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	font-size: 16px;
}

.NewsletterTagline {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.85em;
	line-height: 1.5;
	margin-bottom: 16px;
	position: relative;
}

#SideNewsletterBox .BlockContent {
	position: relative;
}

#SideNewsletterBox .FormGroup {
	margin-bottom: 12px;
}

#SideNewsletterBox .FormGroup label {
	display: block;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.78em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 5px;
}

#SideNewsletterBox .FormGroup input.Textbox {
	width: 100%;
	border: 1.5px solid rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.94);
}

#SideNewsletterBox .FormGroup input.Textbox:focus {
	border-color: #fff;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
	background: #fff;
}

/* Newsletter subscribe button */
#SideNewsletterBox .btn-primary {
	width: 100%;
	margin-top: 4px;
	background: #fff;
	color: var(--color-primary-dark);
	box-shadow: 0 4px 12px rgba(3, 20, 40, 0.25);
}

#SideNewsletterBox .btn-primary:hover {
	background: var(--color-bg-page);
	color: var(--color-primary-dark);
}

.FormContainer dl {
	margin: 0;
}

.FormContainer dt {
	font-weight: 600;
	margin-top: 14px;
	margin-bottom: 4px;
	color: var(--color-text);
}

.FormContainer dd {
	margin: 0;
}

.FormContainer .Required {
	color: #b3261e;
}

/* ---- Footer ------------------------------------------------------------------ */

#Footer {
	background: linear-gradient(135deg, #052d4d 0%, #021d33 100%);
	color: #cfe1ee;
	padding: 30px var(--gutter);
	margin-top: 40px;
	border-radius: var(--radius) var(--radius) 0 0;
	text-align: center;
	font-size: 0.9em;
}

#Footer a {
	color: #8fc4ec;
	font-weight: 500;
}

#Footer a:hover {
	color: #fff;
}

/* ==========================================================================
   Remove every remaining background-image reference from the original theme
   CSS (BodyBg, WrapperBg, LeftBg/RightBg textures, message icons, breadcrumb
   separators, etc.) and replace with flat colors / CSS-only equivalents, so
   the only actual image file the site loads is product_images/logo.png.
   ========================================================================== */

body {
	background: var(--color-bg-page) none;
}

#Menu li a {
	background: none;
}

#Outer {
	background: none;
}

#Logo h1 {
	background: none;
}

.Left,
.Right {
	background: none;
}

/* Sidebar category list - this used to be styled by styles.css (indentation,
   spacing), which no longer loads. Rebuilt here with tighter, more
   controlled indentation so nested sub-categories (up to 3 levels deep)
   don't overflow the fixed-width sidebar, and long names wrap properly
   instead of forcing the box wider. */
#SideCategoryList .BlockContent ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#SideCategoryList .BlockContent li {
	padding: 5px 0;
	border-bottom: 1px solid var(--color-border);
}

#SideCategoryList .BlockContent li.LastChild {
	border-bottom: 0;
}

#SideCategoryList .BlockContent li ul {
	padding-left: 12px;
	margin-top: 4px;
}

#SideCategoryList .BlockContent a {
	display: block;
	color: var(--color-text);
	font-size: 0.9em;
	line-height: 1.35;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

#SideCategoryList .BlockContent a:hover {
	color: var(--color-primary-dark);
	text-decoration: none;
}


.Content,
.Content.Wide,
.Content.Widest {
	background: none;
}

/* Numbered badges for "Top Sellers" - CSS counters instead of background gifs */
.Left .TopSellers li .TopSellerNumber,
.Right .TopSellers li .TopSellerNumber {
	background: var(--gradient-primary);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 700;
	box-shadow: var(--shadow-sm);
}

.Left .TopSellers li.TopSeller1 .TopSellerNumber,
.Right .TopSellers li.TopSeller1 .TopSellerNumber {
	background: var(--gradient-accent);
	width: 20px !important;
	height: 20px !important;
	font-size: 11px !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

.ViewCartLink {
	background: none;
	padding-left: 0 !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ViewCartLink::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") no-repeat center / contain;
}

.InfoMessage {
	background: var(--color-primary-pale);
	padding: 12px 14px !important;
	border-left: 3px solid var(--color-primary);
	border-radius: var(--radius-sm);
}

.SuccessMessage {
	background: #eaf7ea;
	padding: 12px 14px !important;
	border-left: 3px solid #2e7d32;
	border-radius: var(--radius-sm);
}

.ErrorMessage {
	background: #fdecea;
	padding: 12px 14px !important;
	border-left: 3px solid #b3261e;
	border-radius: var(--radius-sm);
}

.Breadcrumb {
	font-size: 0.85em;
	color: var(--color-text-muted);
	margin-bottom: 14px;
}

.Breadcrumb ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* A product can belong to more than one category, in which case Interspire
   renders a separate <ul> breadcrumb trail per category - space them out
   as stacked lines instead of running them together. */
.Breadcrumb ul + ul {
	margin-top: 4px;
}

.Breadcrumb li {
	display: flex;
	align-items: center;
	list-style: none;
}

.Breadcrumb li a,
.FindByCategory li {
	background: none;
	padding: 0 !important;
	color: var(--color-text-muted);
}

.Breadcrumb li a:hover {
	color: var(--color-primary-dark);
}

/* Text "/" separator before every item except the first - works whether
   the item is a link or the final plain-text page name. */
.Breadcrumb li + li::before {
	content: "/";
	margin: 0 8px;
	color: #b8c4cf;
}

.SubBrandList li {
	background: none;
	padding-left: 4px !important;
	transition: padding-left 0.15s ease;
}

.SubBrandList li:hover {
	padding-left: 8px !important;
}

/* ---- "Find Similar Products by Tag" tag cloud ------------------------------
   Each tag's font-size comes in as an inline %% (up to TagCloudMaxSize, e.g.
   300%) and tags are glued together with &nbsp;&nbsp; in the snippet - with
   no CSS at all here previously, that non-breaking glue meant the browser
   had no valid line-break point, so the whole run spilled past the panel
   edge. Making each <span> its own flex item lets it wrap independently,
   regardless of the &nbsp; inside/around it. */
.TagList {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	overflow-wrap: break-word;
}

.TagList span {
	max-width: 100%;
}

.TagList a {
	display: inline-block;
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: break-word;
	line-height: 1.25;
}

.SubBrandList li::before {
	content: "\203A"; /* single right chevron, crisper than an arrow gif */
	margin-right: 6px;
	color: var(--color-primary);
	font-weight: 700;
}

/* Category pagination bar - previously unstyled, same as CategoryHeading. */

.CategoryPagination {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 4px 0;
}

.CategoryPagination .FloatLeft,
.CategoryPagination .FloatRight {
	float: none;
}

.CategoryPagination .FloatRight {
	margin-left: auto;
}

.CategoryPagination .FloatRight a {
	display: inline-block;
	color: var(--color-primary-dark);
	font-weight: 600;
	text-decoration: none;
	padding: 6px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: background 0.15s ease, border-color 0.15s ease;
}

.CategoryPagination .FloatRight a:hover {
	background: var(--color-primary-pale);
	border-color: var(--color-primary);
}

.PagingList {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.PagingList li {
	background: none;
	padding: 0 !important;
}

.PagingList li:first-child {
	color: var(--color-text-muted);
	font-size: 0.85em;
	margin-right: 2px;
}

.PagingList li a,
.PagingList li.ActivePage {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	border-radius: var(--radius-sm);
	font-size: 0.88em;
	text-decoration: none;
	color: var(--color-text);
}

.PagingList li a {
	border: 1px solid var(--color-border);
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.PagingList li a:hover {
	background: var(--color-primary-pale);
	border-color: var(--color-primary);
	color: var(--color-primary-dark);
}

.PagingList li.ActivePage {
	background: var(--gradient-primary);
	color: #fff;
	font-weight: 600;
}

@media (max-width: 480px) {
	.CategoryPagination .FloatRight {
		margin-left: 0;
		width: 100%;
		order: -1;
	}

	.CategoryPagination .FloatRight a {
		display: block;
		text-align: center;
	}
}

/* Category page heading - title, sort-by dropdown, and description.
   Previously completely unstyled (raw browser defaults), which is why
   it looked broken - not just the subcategory tags below it. */

#CategoryHeading h1 {
	font-size: 1.6em;
	margin: 0 0 4px;
}

.SortBox {
	float: right;
	margin-left: 16px;
	margin-bottom: 12px;
	font-size: 0.85em;
	color: var(--color-text-muted);
}

.SortBox select {
	margin-left: 6px;
	padding: 6px 10px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: #fff;
	font-family: var(--font-body);
	font-size: 0.95em;
	color: var(--color-text);
}

.CategoryDescription {
	margin: 8px 0;
	color: var(--color-text-muted);
	line-height: 1.6;
	clear: both;
}

@media (max-width: 640px) {
	.SortBox {
		float: none;
		width: 100%;
		margin: 0 0 12px;
	}

	.SortBox select {
		width: 100%;
		margin-left: 0;
		margin-top: 4px;
	}

	#CategoryHeading h1 {
		font-size: 1.35em;
	}
}

/* Subcategory list on the category page heading - rendered as tags/chips
   instead of a vertical chevron list (that style is reserved for the
   sidebar category tree, a different element entirely). */
.SubCategoryList {
	margin-top: 14px;
}

.SubCategoryList ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.SubCategoryList li {
	background: none;
	padding: 0 !important;
	margin: 0;
}

.SubCategoryList li a {
	display: inline-block;
	background: var(--color-bg-page);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	padding: 7px 16px;
	border-radius: 999px;
	font-size: 0.88em;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.SubCategoryList li a:hover {
	background: var(--color-primary-pale);
	border-color: var(--color-primary);
	color: var(--color-primary-dark);
}

.CartContents .CartProductFieldsLink,
.WrappingOptions {
	background: none;
	padding-left: 0 !important;
}

.VideoOverlay {
	background-image: none;
}

/* RSS icon badge (replaces RSS.gif) */
.RssIcon {
	display: inline-block;
	background: var(--gradient-accent);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	padding: 4px 5px;
	border-radius: 3px;
	vertical-align: middle;
	letter-spacing: 0.03em;
}

/* Prev/next arrow icons (replaces LeftArrow.png / RightArrow.png) */
.ArrowIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--shadow-panel);
	font-size: 18px;
	line-height: 1;
	color: var(--color-primary);
	transition: background 0.15s ease, color 0.15s ease;
}

.ArrowIcon:hover {
	background: var(--color-primary);
	color: #fff;
}

.ToggleArrow {
	width: auto;
	height: auto;
	background: none;
	box-shadow: none;
	transition: transform 0.15s ease;
	transform: rotate(90deg);
}

.ToggleArrow.Expanded {
	transform: rotate(-90deg);
}

/* Rating stars (replaces IcoRatingN.gif) - works with the existing
   .Rating .Rating0 .. .Rating5 classes already present in the markup */
.Rating {
	display: inline-block;
	position: relative;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 2px;
	color: #b0bac5;
}

.Rating::before {
	content: "\2605\2605\2605\2605\2605";
}

.Rating img {
	display: none;
}

.Rating::after {
	content: "\2605\2605\2605\2605\2605";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--color-accent);
	overflow: hidden;
	width: 0;
	white-space: nowrap;
}

.Rating1::after { width: 20%; }
.Rating2::after { width: 40%; }
.Rating3::after { width: 60%; }
.Rating4::after { width: 80%; }
.Rating5::after { width: 100%; }

/* Loading spinner (replaces Loading.gif) */
.Spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid var(--color-primary-light);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	vertical-align: middle;
	animation: spin 0.7s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* Currency selector - replace the old yellow "selected" highlight */
.CurrencyList a.Sel {
	background-color: var(--color-primary-pale) !important;
	color: var(--color-primary-dark);
	border-radius: var(--radius-sm);
	font-weight: 600;
}

#SideCurrencySelector .BlockContent {
	display: flex;
	justify-content: center;
}

.CurrencyList {
	border: none !important;
	background: none !important;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
}

.CurrencyList dd {
	margin: 0;
}

.CurrencyList a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 10px !important;
	border-radius: var(--radius-sm);
}
/* This is now a catalog/information site - cart and checkout are hidden
   everywhere. "Notify Me When Available" (the old wishlist mechanism,
   relabeled) replaces purchasing as the primary product action. */
.ViewCartLink,
.CartLink,
#SideCartContents,
.CheckoutButton,
.ProductActionAdd,
.BulkDiscountLink {
	display: none !important;
}

/* Message/notice icons (replaces IcoMessage*.gif, ErrorMessage.gif, InfoMessage.gif) */
.MsgIcon {
	display: inline-block;
	font-size: 14px;
	vertical-align: middle;
}

/* Video thumbnail play button (replaces VideoOverlay.png) */
.VideoThumb {
	position: relative;
	display: inline-block;
	background-size: cover;
	background-position: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	overflow: hidden;
}

.VideoThumb .PlayIcon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	color: var(--color-primary-dark);
	font-size: 16px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ---- Hard floor: true 320px devices ------------------------------------------
   Previously had its own overrides here; design is now intentionally frozen
   at the 381px breakpoint state all the way down to 320px, so this block
   was removed rather than left disabled. */


/* ---- "Available With Me" teaser widget (product page) --------------------
   Full form now lives on its own page (available-with-me.php); this widget
   is just a teaser, styled like every other .Block.Moveable.Panel. */

.AvailableWithMeIntro {
	margin-top: 0;
}

/* ---- "Available In" browse section (product page) -------------------------
   Province -> District -> Town -> shop list accordion. All approved shops
   for this product are rendered server-side in one go (dataset per product
   is tiny), then toggled open/closed client-side with a single delegated
   click handler - no AJAX needed. */

.AvailInTotalCount {
	font-weight: 400;
	color: var(--color-text-muted);
	font-size: 0.85em;
}

.AvailInToggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: var(--color-primary-pale);
	border: none;
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	font: inherit;
	font-weight: 600;
	color: var(--color-primary-dark);
	cursor: pointer;
	text-align: left;
	transition: background 0.15s ease;
}

.AvailInToggle:hover {
	background: var(--color-primary-light, var(--color-primary-pale));
}

.AvailInToggle::before {
	content: "\25B8"; /* right-pointing triangle */
	display: inline-block;
	margin-right: 8px;
	transition: transform 0.15s ease;
}

.AvailInOpen > .AvailInToggle::before {
	transform: rotate(90deg);
}

.AvailInCount {
	font-weight: 500;
	font-size: 0.85em;
	color: var(--color-text-muted);
	background: #fff;
	border-radius: 999px;
	padding: 2px 10px;
}

.AvailInProvince {
	margin-bottom: 8px;
}

.AvailInDistricts,
.AvailInTowns,
.AvailInShops {
	display: none;
	padding-left: 18px;
	margin-top: 8px;
}

.AvailInOpen > .AvailInDistricts,
.AvailInOpen > .AvailInTowns,
.AvailInOpen > .AvailInShops {
	display: block;
}

.AvailInDistrict,
.AvailInTown {
	margin-bottom: 8px;
}

.AvailInShops {
	list-style: none;
	margin: 8px 0 0;
}

.AvailInShop {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	margin-bottom: 8px;
	font-size: 0.9em;
}

.AvailInShop:last-child {
	margin-bottom: 0;
}

.AvailInShopAddress {
	color: var(--color-text-muted);
	margin-top: 2px;
}

.AvailInShopContact {
	color: var(--color-text);
	margin-top: 4px;
	font-weight: 500;
}

/* "See full list" footer link - small, right-aligned, links to the
   product's own dedicated Available In page. Hidden via inline
   display:none (see %%GLOBAL_HideAvailableInFullListLink%%) when this
   panel is already being rendered on that dedicated page. */
.AvailInFooter {
	display: flex;
	justify-content: flex-end;
	margin-top: 10px;
}

.AvailInSeeFullList {
	font-size: 0.82em;
	color: var(--color-primary);
	text-decoration: none;
	font-weight: 500;
}

.AvailInSeeFullList:hover {
	text-decoration: underline;
}

/* ---- "Available In" sidebar widget variant --------------------------------
   Same accordion as the content-column version, just tightened up to fit
   comfortably in the ~230px right sidebar column. */

.AvailInSidebar .AvailInToggle {
	padding: 10px 12px;
	font-size: 0.9em;
}

.AvailInSidebar .AvailInName {
	overflow-wrap: break-word;
}

.AvailInSidebar .AvailInDistricts,
.AvailInSidebar .AvailInTowns,
.AvailInSidebar .AvailInShops {
	padding-left: 10px;
}

.AvailInSidebar .AvailInShop {
	padding: 10px 12px;
	font-size: 0.85em;
}

/* ---- Dedicated per-product "Available In" page ----------------------------
   Full, always-expanded, card-based listing (see product_available_in.html /
   ProductAvailableInFull panel) - a nicer, unhurried version of the compact
   accordion widget for the page whose entire purpose is showing everything. */

.AvailInPageHeader {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 4px 0 20px;
}

.AvailInPageTitle {
	font-family: var(--font-heading);
	font-size: 1.5em;
	color: var(--color-text);
	margin: 0;
}

.AvailInBackToProduct {
	font-size: 0.9em;
	font-weight: 500;
	color: var(--color-primary);
	text-decoration: none;
	white-space: nowrap;
}

.AvailInBackToProduct:hover {
	text-decoration: underline;
}

.AvailInFullPanel {
	background: transparent;
	box-shadow: none;
	border: none;
	padding: 0;
}

.AvailInFullSummary {
	color: var(--color-text-muted);
	font-size: 0.92em;
	margin-bottom: 16px;
}

.AvailInFullEmpty {
	background: var(--color-bg-panel);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-panel);
	padding: 28px 20px;
	text-align: center;
}

.AvailInFullEmptyMessage {
	color: var(--color-text-muted);
	font-size: 1em;
	margin: 0;
}

.AvailInWithMePrompt {
	margin-top: 22px;
}

.AvailInFullProvinces {
	background: var(--color-bg-panel);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-panel);
	overflow: hidden;
}

.AvailInFullProvince {
	border-top: 1px solid var(--color-border);
}

.AvailInFullProvince:first-child {
	border-top: none;
}

.AvailInFullProvinceHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	background: var(--gradient-primary);
}

.AvailInFullProvinceName {
	font-family: var(--font-heading);
	font-size: 1.15em;
	color: #fff;
	margin: 0;
}

.AvailInFullBadge {
	flex: 0 0 auto;
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
	font-size: 0.78em;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 999px;
	white-space: nowrap;
}

.AvailInFullDistrict {
	padding: 16px 20px;
	border-top: 1px solid var(--color-border);
}

.AvailInFullDistrictHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.AvailInFullDistrictName {
	font-family: var(--font-heading);
	font-size: 1em;
	color: var(--color-primary-dark);
	margin: 0;
	padding-left: 12px;
	border-left: 3px solid var(--color-accent);
}

.AvailInFullBadgeSmall {
	background: var(--color-primary-pale);
	color: var(--color-primary-dark);
}

.AvailInFullTown {
	margin-bottom: 16px;
}

.AvailInFullTown:last-child {
	margin-bottom: 0;
}

.AvailInFullTownName {
	font-size: 0.85em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
	margin: 0 0 8px 12px;
}

.AvailInFullShopGrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 12px;
}

.AvailInFullShopCard {
	background: var(--color-bg-page);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 14px 16px;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.AvailInFullShopCard:hover {
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px);
}

.AvailInFullShopName {
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 4px;
}

.AvailInFullShopAddress {
	color: var(--color-text-muted);
	font-size: 0.88em;
	line-height: 1.4;
}

.AvailInFullShopContact {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin-top: 8px;
	font-size: 0.85em;
	color: var(--color-primary-dark);
	font-weight: 500;
}

.AvailInFullShopEmail {
	overflow-wrap: anywhere;
}

@media (max-width: 640px) {
	.AvailInFullProvinceHeader,
	.AvailInFullDistrict {
		padding: 14px 16px;
	}

	.AvailInFullShopGrid {
		grid-template-columns: 1fr;
	}
}

/* ---- Quick Search suggestions dropdown -------------------------------------
   Built entirely in JS (javascript/quicksearch.js) as a <table id="QuickSearch">
   appended straight to <body> with position:absolute - it never had any CSS
   at all, so it rendered fully transparent over whatever content sat below
   the search box. */

table.QuickSearch {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lift);
	z-index: 500;
	overflow: hidden;
	border-collapse: collapse;
}

table.QuickSearch .QuickSearchResult {
	cursor: pointer;
	border-bottom: 1px solid var(--color-border);
}

table.QuickSearch .QuickSearchResult:last-child {
	border-bottom: none;
}

table.QuickSearch .QuickSearchResult.QuickSearchHover,
table.QuickSearch .QuickSearchResult:hover {
	background: var(--color-primary-pale);
}

table.QuickSearch .QuickSearchResultImage {
	width: 44px;
	padding: 8px;
	vertical-align: middle;
	text-align: center;
}

table.QuickSearch .QuickSearchResultImage img {
	max-width: 40px;
	max-height: 40px;
	width: auto;
	height: auto;
	display: block;
	margin: 0 auto;
}

table.QuickSearch .QuickSearchResultMeta {
	padding: 8px 10px;
	vertical-align: middle;
}

table.QuickSearch .QuickSearchResultName {
	font-size: 0.9em;
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

table.QuickSearch .QuickSearchResultName a {
	color: inherit;
	text-decoration: none;
}

table.QuickSearch .QuickSearchResultMeta .Price {
	font-size: 0.85em;
	color: var(--color-primary-dark);
	font-weight: 600;
}

table.QuickSearch .QuickSearchAllResults {
	cursor: pointer;
	background: var(--color-bg-page);
}

table.QuickSearch .QuickSearchAllResults td {
	padding: 8px 10px;
	text-align: center;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--color-primary);
}

table.QuickSearch .QuickSearchAllResults:hover td {
	color: var(--color-primary-dark);
}