/* Shared storefront shell boundary: visual rhythm and accessibility only. */
:root {
	--shell-accent: var(--main-color, #fd9800);
	--shell-surface: #fff;
	--shell-border: #e8e8e8;
	--shell-muted: #6b7280;
	/* Keep the page-wide typography in the shared shell. Bootstrap's stock
	 * system-ui defaults change wrapping and vertical rhythm across modules. */
	--bs-body-font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
	--bs-body-font-size: .84rem;
	--bs-body-line-height: 1.5;
	/* Reference Bootstrap/theme tokens. Keep --main-color separate: the
	 * storefront's orange action color is data/theme-configurable while
	 * Bootstrap's semantic primary and links remain stable across modules. */
	--bs-primary: #fd6800;
	--bs-primary-rgb: 253, 104, 0;
	--bs-link-color: #175199;
	--bs-link-hover-color: #b14900;
	--bs-border-color: #e8e8e8;
}

body {
	font-family: var(--bs-body-font-family);
	font-size: var(--bs-body-font-size);
	line-height: var(--bs-body-line-height);
}

/* The legacy theme stylesheet sets a 10px root for its old rem scale. The
 * current Bootstrap/reference storefront uses the browser 16px root; keep
 * the shared runtime on that scale so utility classes and body typography
 * resolve to the same physical size. */
html {
	font-size: 16px;
}

.header-wrapper,
.site-footer,
.mobile-theme-shell,
.mobile-theme-footer {
	font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
}

/* The legacy theme adds outer header padding/border after this shared stylesheet.
 * Match the reference shell at both breakpoints: 40px top bar + 80px desktop
 * content, or 40px top bar + 50px mobile content. */
html body header.header-wrapper {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Shared product-card contract: the desktop reference storefront uses a
 * square image frame, caption/price split and hover actions. All catalog,
 * page-builder and promotion cards consume product/thumb.twig, so the visual
 * contract lives here instead of being copied into individual modules. */
.product-thumb {
	position: relative;
	overflow: hidden;
	height: 100%;
	margin-bottom: 20px;
	border: 0;
	background: #fff;
	transition: box-shadow .3s linear;
}

.product-thumb:hover {
	z-index: 9;
	box-shadow: 0 0 12px 0 rgba(0, 0, 0, .1);
}

.product-thumb .image {
	position: relative;
	text-align: center;
	background: #fff;
	aspect-ratio: 1;
}

.product-thumb .image .img-wrap {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}

.product-thumb .image img {
	display: inline-block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.product-thumb .caption {
	padding: 0 10px 10px;
}

.product-thumb .product-name {
	display: block;
	overflow: hidden;
	height: 22px;
	margin: 10px 0;
	color: #111;
	font-weight: 700;
	line-height: 22px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.product-thumb .product-description {
	display: none;
	overflow: hidden;
	margin: 0 0 8px;
	color: #6b7280;
	font-size: 13px;
	line-height: 1.45;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.product-thumb .price {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0;
	color: #d4282d;
	font-size: 16px;
}

.product-thumb .price .price-left {
	overflow: hidden;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.product-thumb .price .price-old {
	color: #bbb;
	font-size: 12px;
	font-weight: 500;
	text-decoration: line-through;
}

.product-thumb .price .price-tax {
	color: #bbb;
	font-size: 12px;
	font-weight: 400;
}

.product-thumb .price .price-right {
	display: flex;
	max-width: 50%;
	align-items: center;
	gap: 4px;
	overflow: hidden;
}

.product-thumb .price .flag-icon {
	display: block;
	overflow: hidden;
	max-width: 100%;
	padding: 1px 4px;
	border-radius: 2px;
	background: var(--main-color, #fd9800);
	color: #fff;
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.product-thumb .product-button-wrapper {
	position: absolute;
	right: 0;
	bottom: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
	opacity: 0;
	transition: right .3s ease-out, opacity .3s ease-out;
}

.product-thumb:hover .product-button-wrapper,
.product-thumb:focus-within .product-button-wrapper {
	right: 10px;
	opacity: 1;
}

.product-thumb .product-button-wrapper button {
	display: block;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #e8e8e8;
	color: #444;
	line-height: 46px;
	text-align: center;
}

.product-thumb .product-button-wrapper button:hover,
.product-thumb .product-button-wrapper button:focus-visible {
	background: var(--main-color, #fd9800);
	color: #fff;
}

/* Homepage product sections follow the reference storefront's horizontal
 * product-wrapper/swiper rhythm. The shared native track keeps the same
 * contract without adding a second carousel dependency to each module. */
.page-builder-product-slider {
	position: relative;
}

.page-builder-product-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 20px;
	margin-right: 0 !important;
	margin-left: 0 !important;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.page-builder-product-track::-webkit-scrollbar {
	display: none;
}

.page-builder-product-track > .page-builder-product-slide {
	flex: 0 0 calc((100% - 60px) / 4);
	max-width: calc((100% - 60px) / 4);
	padding-right: 0 !important;
	padding-left: 0 !important;
	scroll-snap-align: start;
}

.page-builder-product-pager {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 14px;
}

.page-builder-product-pager[hidden] {
	display: none;
}

.page-builder-product-control {
	display: inline-flex;
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 30px;
	height: 50px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #d1d5db;
	font-size: 30px;
	line-height: 1;
	transform: translateY(-50%);
}

.page-builder-product-control[aria-label="Previous"] {
	left: -44px;
}

.page-builder-product-control[aria-label="Next"] {
	right: -44px;
}

.page-builder-product-control:hover:not(:disabled),
.page-builder-product-control:focus-visible {
	border-color: var(--shell-accent);
	background: var(--shell-accent);
	color: #fff;
}

.page-builder-product-control:disabled {
	cursor: not-allowed;
	opacity: .35;
}

@media (hover: none) {
	.product-thumb .product-button-wrapper {
		right: 10px;
		opacity: 1;
	}
}

@media (max-width: 767.98px) {
	.page-builder-product-control {
		display: none;
	}
}

@media (min-width: 768px) {
	.product-thumb .product-description {
		display: block;
	}
}

@media (max-width: 767.98px) {
	.product-thumb .caption {
		padding-bottom: 7px;
	}

	.product-thumb .product-name {
		height: 20px;
		margin: 2px 0 6px;
		line-height: 20px;
	}

	/* Tax remains visible in product details and checkout; the reference
	 * storefront omits it from compact mobile product cards. */
	.product-thumb .price .price-tax {
		display: none;
	}

	.product-thumb .price {
		font-size: 14px;
	}

	.product-thumb .product-button-wrapper button {
		width: 40px;
		height: 40px;
		line-height: 40px;
	}
}

.header-wrapper .dropdown-toggle,
.header-wrapper .dropdown-item,
.mobile-theme-picker select {
	font: inherit;
}

.header-wrapper .dropdown-toggle {
	border: 0;
	background: transparent;
}

.header-wrapper .dropdown-toggle:focus-visible,
.header-wrapper .dropdown-item:focus-visible,
.mobile-theme-picker select:focus-visible {
	outline: 2px solid var(--shell-accent);
	outline-offset: 2px;
}

.header-wrapper .dropdown-item {
	display: block;
	width: 100%;
	border: 0;
	text-align: left;
}

.header-wrapper #top-links a {
	min-height: 32px;
}

.header-wrapper #logo img {
	max-width: 100%;
	height: auto;
}

.header-wrapper .header-mobile {
	display: none;
}

.header-wrapper .header-search form {
	margin-bottom: 0;
}

.storefront-home,
.page-builder-content {
	min-height: 30vh;
}

/* The legacy default theme fixes .container to 740/960/1160/1260px. The
 * reference storefront consumes Bootstrap's responsive container widths, so
 * page-builder modules must be allowed to use the shared Bootstrap contract. */
.page-builder-content .container {
	width: 100%;
}

/* The legacy theme also gives .product-center-wrapper a fixed sidebar-aware
 * width even when the page-builder module has no side image. Keep the full
 * width contract shared by desktop and mobile renderers. */
.page-builder-product-tab .product-center-wrapper.col-12 {
	width: 100%;
	max-width: 100%;
	flex: 0 0 100%;
}

.storefront-home:focus,
.page-builder-content:focus {
	outline: 0;
}

/* Shared homepage category-card contract: the reference storefront uses
 * compact circular category images with centered labels on both breakpoints. */
.page-builder-category {
	margin: 0 auto 48px;
}

.page-builder-category .page-builder-module-title {
	margin-bottom: 28px;
}

.page-builder-category-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 28px 24px;
}

.page-builder-category-item {
	min-width: 0;
}

.page-builder-category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	min-width: 0;
	color: #1f2937;
	text-align: center;
	text-decoration: none;
}

.page-builder-category-image {
	display: block;
	width: min(100%, 140px);
	aspect-ratio: 1;
	overflow: hidden;
	border: 1px solid #f0f0f0;
	border-radius: 50%;
	background: #f8f8f8;
	box-shadow: 0 3px 14px rgba(17, 24, 39, .04);
	transition: transform .25s ease, box-shadow .25s ease;
}

.page-builder-category-image img,
.page-builder-category-image-placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

.page-builder-category-image img {
	object-fit: cover;
}

.page-builder-category-image-placeholder {
	background: linear-gradient(135deg, #fff7e6, #f3f4f6);
}

.page-builder-category-name {
	display: block;
	max-width: 100%;
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.page-builder-category-card:hover .page-builder-category-image,
.page-builder-category-card:focus-visible .page-builder-category-image {
	transform: translateY(-3px);
	box-shadow: 0 9px 22px rgba(17, 24, 39, .12);
}

.page-builder-category-card:focus-visible {
	outline: 2px solid var(--shell-accent);
	outline-offset: 4px;
}

@media (max-width: 991.98px) {
	.page-builder-product-track > .page-builder-product-slide {
		flex-basis: calc((100% - 20px) / 2);
		max-width: calc((100% - 20px) / 2);
	}

	.page-builder-category-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px 16px;
	}
}

@media (max-width: 575.98px) {
	.page-builder-product-track {
		gap: 10px;
	}

	.page-builder-product-track > .page-builder-product-slide {
		flex-basis: calc((100% - 10px) / 2);
		max-width: calc((100% - 10px) / 2);
	}

	.page-builder-category {
		margin-bottom: 32px;
	}

	.page-builder-category-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px 10px;
	}

	.page-builder-category-image {
		width: min(100%, 96px);
	}

	.page-builder-category-name {
		font-size: 12px;
	}
}

.bottom-beian-link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	color: inherit;
	text-decoration: none;
}

.bottom-beian-link:hover,
.bottom-beian-link:focus-visible {
	color: inherit;
	text-decoration: underline;
}

.bottom-beian-link img {
	display: block;
	width: 18px;
	height: 20px;
	object-fit: contain;
}

.site-footer {
	position: relative;
	margin-top: 3rem;
	background: var(--shell-surface);
	color: #4b5563;
}

.site-footer .module-customer-service {
	padding: 24px 0;
	border-top: 1px solid var(--shell-border);
	border-bottom: 1px solid var(--shell-border);
	background: #fafafa;
}

.site-footer .module-customer-service .item {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 56px;
	min-width: 0;
	padding: 8px 20px;
}

.site-footer .module-customer-service .icon {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
}

.site-footer .module-customer-service .icon img {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.site-footer .module-customer-service .text {
	min-width: 0;
	flex: 1 1 auto;
}

.site-footer .module-customer-service .title {
	min-width: 0;
	color: #1f2937;
	font-weight: 700;
	line-height: 1.4;
}

.site-footer .module-customer-service .sub-title {
	min-width: 0;
	margin-top: 3px;
	color: var(--shell-muted);
	font-size: 12px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.site-footer > .container.py-5 {
	padding-top: 3rem !important;
	padding-bottom: 3rem !important;
}

.site-footer .top_intro img {
	max-width: 190px;
	margin-bottom: 1.5rem !important;
}

.site-footer .top_intro p,
.site-footer .address-wrapper {
	color: var(--shell-muted);
	line-height: 1.7;
}

.site-footer h5 {
	margin-top: 0;
	margin-bottom: 1.5rem;
	color: #1f2937;
	font-size: 15px;
	font-weight: 700;
}

.site-footer .top_link1 li,
.site-footer .top_link2 li,
.site-footer .top_link3 li,
.site-footer .top_contact li {
	margin-bottom: .75rem;
}

.site-footer .top_link1 a,
.site-footer .top_link2 a,
.site-footer .top_link3 a,
.site-footer .top_contact a {
	color: #6b7280;
	font-size: 13px;
}

.site-footer .top_link1 a:hover,
.site-footer .top_link1 a:focus-visible,
.site-footer .top_link2 a:hover,
.site-footer .top_link2 a:focus-visible,
.site-footer .top_link3 a:hover,
.site-footer .top_link3 a:focus-visible,
.site-footer .top_contact a:hover,
.site-footer .top_contact a:focus-visible {
	color: var(--shell-accent);
}

.site-footer .contact-btn .btn {
	min-height: 38px;
	padding: 8px 14px;
}

.site-footer .footer-bottom {
	min-height: 42px;
	border-top: 1px solid var(--shell-border);
	font-size: 12px;
}

.site-footer .bottom_link {
	margin-left: 12px;
}

.site-footer .bottom_link a + a {
	margin-left: 12px;
}

@media (min-width: 768px) and (max-width: 991.98px) {
	/* Match the reference tablet footer's compact four-tile service row. */
	.site-footer .module-customer-service {
		margin-bottom: 0 !important;
		padding: 9.5px 0 !important;
	}

	.site-footer .module-customer-service .item {
		display: block;
		min-height: 129px;
		padding: 0 12px 10px;
	}

	.site-footer .module-customer-service .icon {
		float: left;
		width: 38px;
		height: 45px;
		margin: 0 7px 0 0;
	}

	.site-footer .module-customer-service .icon img {
		width: 38px;
		height: 45px;
	}

	.site-footer .module-customer-service .text {
		margin-left: 54px;
	}

	/* At this breakpoint the reference keeps the intro above a four-column
	 * links row; the legacy sm-2 utility remains active in the target theme. */
	.site-footer > .container.py-5 {
		padding-right: 12px !important;
		padding-left: 12px !important;
	}

	.site-footer > .container.py-5 > .row {
		margin-right: -12px !important;
		margin-left: -12px !important;
	}

	.site-footer .top_intro img {
		max-width: 368px;
	}

	.site-footer .top_link1,
	.site-footer .top_link2,
	.site-footer .top_link3,
	.site-footer .top_contact {
		flex: 0 0 25% !important;
		max-width: 25% !important;
	}

	.site-footer h5 {
		font-size: 16px !important;
		line-height: 1.05 !important;
		padding: 0 !important;
	}

	.site-footer .top_link1 li,
	.site-footer .top_link2 li,
	.site-footer .top_link3 li,
	.site-footer .top_contact li {
		margin-bottom: 16px !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.site-footer .footer-bottom {
		min-height: 0 !important;
		margin-top: 0 !important;
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}
}

@media (min-width: 992px) {
	.site-footer .module-customer-service {
		margin-bottom: 0 !important;
		padding-top: 26px;
		padding-bottom: 26px;
	}

	.site-footer .top_link1 li,
	.site-footer .top_link2 li,
	.site-footer .top_link3 li,
	.site-footer .top_contact li {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		margin-bottom: 8px;
	}

	.site-footer h5 {
		margin-bottom: 1rem;
	}

	.site-footer .footer-bottom {
		min-height: 0;
		margin-top: 0 !important;
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}
}

.site-footer .mobile-bottom-nav,
.mobile-theme-footer .mobile-bottom-nav {
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-theme-topbar {
	padding-top: env(safe-area-inset-top, 0px);
}

.mobile-theme-header {
	position: relative;
}

.mobile-theme-brand a:focus-visible,
.mobile-theme-actions a:focus-visible,
.mobile-theme-footer-links a:focus-visible {
	outline: 2px solid var(--shell-accent);
	outline-offset: 2px;
}

.mobile-theme-actions a {
	min-width: 0;
}

.mobile-theme-footer {
	padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

.mobile-theme-footer-links a {
	min-height: 32px;
	display: inline-flex;
	align-items: center;
}

.mobile-page-builder,
.mobile-theme-home {
	padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* Reference storefront shell: desktop 20 / 60 / 20 header composition. */
.header-wrapper #top {
	min-height: 40px;
	height: 40px;
	margin: 0;
	border-bottom: 1px solid var(--shell-border);
	background: var(--shell-surface);
}

.header-wrapper #top > .container-fluid {
	min-height: 40px;
	height: 40px;
	max-width: 1700px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 24px;
	padding-left: 24px;
}

.header-wrapper #top .top-left-wrapper {
	min-width: 0;
}

.header-shell-pickers {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.header-shell-pickers > li {
	margin: 0 !important;
}

.header-wrapper #top .top-text {
	color: var(--shell-muted);
	font-size: 12px;
	line-height: 1.4;
	white-space: nowrap;
}

.header-wrapper #top-links ul {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
}

.header-wrapper #top-links li {
	margin: 0;
}

.header-wrapper #top-links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #4b5563;
	font-size: 13px;
	white-space: nowrap;
}

.header-wrapper #top-links a:hover,
.header-wrapper #top-links a:focus-visible {
	color: var(--shell-accent);
}

.header-wrapper .header-content {
	width: 100%;
	max-width: 1700px;
	margin: 0 auto;
	padding: 16px 50px !important;
	background: var(--shell-surface);
}

/* The legacy theme adds 30/24px padding to every desktop <header>.  The
 * shared shell already owns the 40px topbar and 80px content rhythm, so keep
 * that legacy rule from shifting the complete header below the reference
 * viewport geometry. */
@media (min-width: 992px) {
	.header-wrapper {
		padding: 0;
	}
}

.header-wrapper .header-content > .row {
	display: flex;
	align-items: center;
	margin: 0 -12px;
}

.header-wrapper .header-content > .row > .col {
	padding-right: 12px;
	padding-left: 12px;
}

.header-wrapper .header-content > .row > .w-20 {
	width: 20%;
	flex: 0 0 20%;
}

.header-wrapper .header-content > .row > .w-60 {
	width: 60%;
	flex: 0 0 60%;
}

.header-wrapper .header-content #logo {
	display: flex;
	align-items: center;
	min-height: 48px;
}

.header-wrapper .header-content #logo img {
	max-height: 48px;
	width: auto;
}

/* The desktop navigation sets a 44px floor; the logo grows the row up to
 * 48px only when its responsive width allows it, as on the reference site. */
@media (min-width: 992px) {
	.header-wrapper .header-content > .row {
		min-height: 44px;
	}

	.header-wrapper .header-content #logo {
		min-height: 0;
	}
}

.header-wrapper .header-menu-slot,
.header-wrapper .header-menu-slot > .container {
	width: 100%;
	padding-right: 0;
	padding-left: 0;
}

.header-wrapper .header-menu-slot #menu {
	background: transparent;
}

/* The reference storefront keeps the navigation as one compact, unwrapped
 * row on desktop.  This is a shared shell rule so the native and compatible
 * menu renderers use the same rhythm instead of each growing its own layout. */
.header-wrapper #menu.reference-menu {
	min-height: 44px;
	margin-bottom: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.header-wrapper #menu.reference-menu .navbar-nav {
	flex-wrap: nowrap;
}

.header-wrapper #menu.reference-menu #category {
	color: #1f2937;
	text-shadow: none;
}

.header-wrapper #menu.reference-menu .navbar-toggler i {
	color: #1f2937;
}

.header-wrapper .header-menu-slot #menu > .navbar-collapse {
	justify-content: center;
}

.header-wrapper .header-menu-slot #menu .navbar-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
}

.header-wrapper .header-menu-slot #menu .nav-link,
.header-wrapper .header-menu-slot #menu .dropdown-item {
	color: #1f2937;
	font-size: 14px;
	white-space: nowrap;
}

.header-wrapper .header-menu-slot #menu .nav-link {
	padding: 12px 10px;
	font-weight: 600;
}

.header-wrapper .header-menu-slot #menu .nav-link:hover,
.header-wrapper .header-menu-slot #menu .nav-link:focus-visible,
.header-wrapper .header-menu-slot #menu .dropdown-item:hover,
.header-wrapper .header-menu-slot #menu .dropdown-item:focus-visible {
	color: var(--shell-accent);
	background: transparent;
}

.header-wrapper .header-right-wrap {
	gap: 6px;
}

.header-wrapper .header-right-wrap .right-item {
	position: relative;
	flex: 0 0 auto;
	margin-left: 4px;
}

/* Keep the complete desktop navigation and action cluster inside the header
 * at compact desktop/tablet widths. The full 50px desktop gutters and roomy
 * menu spacing remain unchanged at >=1200px. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.header-wrapper .header-content {
		padding-right: 48px !important;
		padding-left: 48px !important;
	}

	.header-wrapper .header-menu-slot #menu .navbar-nav {
		gap: 8px;
	}

	.header-wrapper .header-menu-slot #menu .nav-link {
		padding-right: 6px;
		padding-left: 6px;
		font-size: 13px;
	}

	.header-wrapper .header-right-wrap {
		gap: 2px;
	}

	.header-wrapper .header-right-wrap .right-item {
		margin-left: 0;
	}
}

.header-shell-icon-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 8px 5px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #1f2937;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
}

.header-shell-icon-button:hover,
.header-shell-icon-button:focus-visible {
	background: #fff7e6;
	color: var(--shell-accent);
}

.header-wrapper .header-right-wrap .account-wrapper .dropdown-menu {
	margin-top: 8px;
}

.header-wrapper .header-right-wrap .account-wrapper .dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 8px 14px;
}

.header-wrapper .header-shell-cart .dropdown {
	display: block !important;
}

.header-wrapper .header-shell-cart .dropdown > .btn {
	width: 36px;
	height: 36px;
	padding: 8px 5px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #1f2937;
	font-size: 0;
	line-height: 1;
}

.header-wrapper .header-shell-cart .dropdown > .btn > i {
	font-size: 18px;
}

.header-wrapper .header-shell-cart .dropdown > .btn:hover,
.header-wrapper .header-shell-cart .dropdown > .btn:focus-visible {
	background: #fff7e6;
	color: var(--shell-accent);
}

.common-shell-search-modal .modal-dialog {
	width: calc(100% - 32px);
	max-width: 680px;
}

.common-shell-search-modal .modal-body {
	padding: 20px;
}

.common-shell-search-modal .modal-body form {
	margin-bottom: 0;
}

/* Reference account login surface: one centered card with a compact auth flow. */
.account-auth-page {
	min-height: 52vh;
	padding-bottom: 3rem;
}

.account-auth-breadcrumb {
	margin-top: 16px;
}

.account-auth-content {
	max-width: 520px;
	margin: 0 auto;
}

.account-login-wrapper {
	margin: 24px auto 14px;
	border: 0;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 34px rgba(20, 30, 50, .10) !important;
}

.account-auth-title {
	margin: 0 0 8px;
	color: #1f2937;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.account-auth-lead {
	margin-bottom: 22px;
	color: var(--shell-muted);
	text-align: center;
}

.account-auth-tabs {
	display: flex;
	margin: 0 -1.5rem 24px;
	padding: 0 1.5rem;
	border-bottom: 1px solid var(--shell-border);
}

.account-login-method {
	position: relative;
	flex: 1;
	min-height: 44px;
	padding: 8px 12px;
	border: 0;
	background: transparent;
	color: var(--shell-muted);
	font-size: 14px;
}

.account-login-method::after {
	position: absolute;
	right: 18%;
	bottom: -1px;
	left: 18%;
	height: 2px;
	background: transparent;
	content: '';
}

.account-login-method.is-active {
	color: var(--shell-accent);
	font-weight: 700;
}

.account-login-method.is-active::after {
	background: var(--shell-accent);
}

.account-login-method:focus-visible {
	outline: 2px solid var(--shell-accent);
	outline-offset: -2px;
}

.account-login-panel .form-control,
.account-login-panel .form-select {
	min-height: 44px;
}

.account-auth-secondary-link {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
}

.account-auth-submit {
	width: 100%;
	min-height: 46px;
	font-size: 16px;
}

.account-auth-links {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 18px;
	font-size: 13px;
}

.account-auth-social {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--shell-border);
	text-align: center;
}

.account-auth-social p {
	margin-bottom: 12px;
	color: var(--shell-muted);
	font-size: 13px;
}

.account-auth-social-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 8px;
}

.account-auth-social-list .btn {
	min-height: 40px;
}

.account-auth-register-prompt {
	margin: 0 auto 22px;
	color: var(--shell-muted);
	font-size: 13px;
	text-align: center;
}

@media (min-width: 992px) {
	/* The reference login is a single centered authentication surface. Keep the
	 * existing registration link inside the card and avoid a second, detached
	 * registration block widening the page's visual footprint. */
	#account-login.account-auth-page {
		padding-top: 18px;
		padding-bottom: 8rem;
	}

	#account-login .account-auth-breadcrumb,
	#account-login .account-auth-register-prompt {
		display: none;
	}

	#account-login .account-auth-content {
		max-width: 500px;
	}

	#account-login .account-login-wrapper > .card-body {
		padding: 32px !important;
	}
}

/* Keep registration in the same single-card surface as login while preserving
 * the official OpenCart field names and form submission contract. */
.account-register-page {
	padding-bottom: 3rem;
}

.account-register-card {
	max-width: 680px;
	margin: 24px auto 14px;
	border: 0;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 34px rgba(20, 30, 50, .10) !important;
}

.account-register-card fieldset {
	margin-bottom: 26px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--shell-border);
}

.account-register-card fieldset:last-of-type {
	border-bottom: 0;
}

.account-register-card legend {
	margin-bottom: 18px;
	font-size: 17px;
	font-weight: 700;
}

.account-register-card .row.mb-3 > .col-form-label,
.account-register-card .row.mb-3 > [class*="col-"] {
	width: 100%;
}

.account-register-card .row.mb-3 > .col-form-label {
	padding-bottom: 6px;
}

.account-register-card .form-control,
.account-register-card .form-select {
	min-height: 44px;
}

.account-register-card .text-end > .btn {
	width: 100%;
	min-height: 46px;
	font-size: 16px;
}

.account-register-card .account-auth-lead a {
	font-weight: 600;
}

.account-forgotten-card {
	max-width: 680px;
	margin: 24px auto 14px;
	border: 0;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 34px rgba(20, 30, 50, .10) !important;
}

.account-forgotten-card fieldset {
	margin-bottom: 26px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--shell-border);
}

.account-forgotten-card fieldset:last-of-type {
	border-bottom: 0;
}

.account-forgotten-card legend {
	margin-bottom: 18px;
	font-size: 17px;
	font-weight: 700;
}

.account-forgotten-card .row.mb-3 > .col-form-label,
.account-forgotten-card .row.mb-3 > [class*="col-"] {
	width: 100%;
}

.account-forgotten-card .row.mb-3 > .col-form-label {
	padding-bottom: 6px;
}

.account-forgotten-card .form-control,
.account-forgotten-card .form-select {
	min-height: 44px;
}

.account-forgotten-tabs {
	display: flex;
	margin: 0 -1.5rem 24px;
	padding: 0 1.5rem;
	border-bottom: 1px solid var(--shell-border);
}

.account-forgotten-method {
	position: relative;
	flex: 1;
	min-height: 44px;
	padding: 8px 12px;
	border: 0;
	background: transparent;
	color: var(--shell-muted);
	font-size: 14px;
}

.account-forgotten-method::after {
	position: absolute;
	right: 18%;
	bottom: -1px;
	left: 18%;
	height: 2px;
	background: transparent;
	content: '';
}

.account-forgotten-method.is-active {
	color: var(--shell-accent);
	font-weight: 700;
}

.account-forgotten-method.is-active::after {
	background: var(--shell-accent);
}

.account-forgotten-method:focus-visible {
	outline: 2px solid var(--shell-accent);
	outline-offset: -2px;
}

.account-forgotten-card .text-end .btn {
	min-height: 46px;
}

/* Keep the desktop member center on the same grouped-card information
 * architecture as the mobile account surface without changing any endpoint. */
.account-dashboard-page {
	min-height: 52vh;
	padding-bottom: 3rem;
}

.account-dashboard-breadcrumb {
	margin-top: 16px;
}

.account-dashboard-content {
	max-width: 900px;
	margin: 0 auto;
}

.account-dashboard-title {
	margin: 18px 0 20px;
	color: #1f2937;
	font-size: 26px;
	font-weight: 700;
}

.account-profile-card {
	border: 0;
	border-radius: 10px;
	box-shadow: 0 8px 26px rgba(20, 30, 50, .08) !important;
}

.account-profile-card .card-body {
	min-height: 96px;
}

.account-dashboard-heading {
	margin: 28px 0 10px;
	color: #1f2937;
	font-size: 18px;
	font-weight: 700;
}

.account-dashboard-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0 0 18px;
	border: 1px solid var(--shell-border);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}

.account-dashboard-links li {
	border-bottom: 1px solid var(--shell-border);
}

.account-dashboard-links li:nth-last-child(-n + 2) {
	border-bottom: 0;
}

.account-dashboard-links li:nth-child(odd) {
	border-right: 1px solid var(--shell-border);
}

.account-dashboard-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 52px;
	padding: 13px 16px;
	color: #374151;
	text-decoration: none;
}

.account-dashboard-links a::after {
	margin-left: 12px;
	color: #9ca3af;
	content: '›';
	font-size: 22px;
	line-height: 1;
}

.account-dashboard-links a:hover,
.account-dashboard-links a:focus-visible {
	background: #fff8e8;
	color: var(--shell-accent);
}

.account-dashboard-social {
	margin: 0 0 18px;
	border: 1px solid var(--shell-border);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}

.account-dashboard-social li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--shell-border);
}

.account-dashboard-social li:last-child {
	border-bottom: 0;
}

.account-dashboard-social form {
	margin: 0;
}

.account-order-page {
	min-height: 52vh;
	padding-bottom: 3rem;
}

.account-order-breadcrumb {
	margin-top: 16px;
}

.account-order-content {
	max-width: 980px;
	margin: 0 auto;
}

.account-order-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 18px 0 20px;
}

.account-order-heading h1 {
	min-width: 0;
	margin: 0;
	color: #1f2937;
	font-size: 26px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.account-order-heading > .btn,
.account-order-actions .btn {
	min-height: 42px;
}

.account-order-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.account-order-filters .btn {
	min-height: 38px;
}

.account-order-list {
	display: grid;
	gap: 12px;
}

.account-order-card {
	padding: 16px;
	border: 1px solid var(--shell-border);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 4px 18px rgba(20, 30, 50, .05);
}

.account-order-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}

.account-order-card-head > div {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.account-order-label,
.account-order-meta dt {
	color: #6b7280;
	font-size: 12px;
}

.account-order-status {
	color: #9a6700;
	font-size: 13px;
	font-weight: 600;
	text-align: right;
	overflow-wrap: anywhere;
}

.account-order-meta {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
}

.account-order-meta > div {
	min-width: 0;
	padding: 10px;
	border-radius: 7px;
	background: #f8fafc;
}

.account-order-meta dt,
.account-order-meta dd {
	margin: 0;
}

.account-order-meta dd {
	margin-top: 4px;
	color: #374151;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-order-total {
	color: #c2410c !important;
}

.account-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #eef0f3;
}

.account-order-actions form {
	display: inline-flex;
	margin: 0;
}

.account-order-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
}

.account-order-footer small {
	color: #6b7280;
}

.account-order-empty {
	padding: 36px 18px;
	border: 1px dashed #d1d5db;
	border-radius: 10px;
	background: #fff;
	color: #6b7280;
	text-align: center;
}

.account-order-empty i {
	display: block;
	margin-bottom: 10px;
	font-size: 30px;
}

.account-order-empty p {
	margin: 0;
}

.account-address-page,
.account-address-form-page {
	min-height: 52vh;
	padding-bottom: 3rem;
}

.account-address-breadcrumb {
	margin-top: 16px;
}

.account-address-content,
.account-address-form-content {
	max-width: 900px;
	margin: 0 auto;
}

.account-address-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 18px 0 20px;
}

.account-address-heading h1,
.account-address-form-title {
	margin: 0;
	color: #1f2937;
	font-size: 26px;
	font-weight: 700;
}

.account-address-heading > .btn,
.account-address-card-actions .btn,
.account-address-actions .btn {
	min-height: 42px;
}

.account-address-list {
	display: grid;
	gap: 12px;
}

.account-address-card {
	padding: 16px;
	border: 1px solid var(--shell-border);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 4px 18px rgba(20, 30, 50, .05);
}

.account-address-card-content {
	color: #374151;
	line-height: 1.65;
}

.account-address-default {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	color: #9a6700;
	font-size: 13px;
	font-weight: 600;
}

.account-address-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #eef0f3;
}

.account-address-empty {
	padding: 28px 16px;
	border: 1px dashed #d1d5db;
	border-radius: 10px;
	background: #fff;
	color: #6b7280;
	text-align: center;
}

.account-address-form-title {
	margin: 18px 0 20px;
}

.account-address-form-card {
	padding: 24px;
	border: 0;
	border-radius: 10px;
	box-shadow: 0 8px 26px rgba(20, 30, 50, .08) !important;
}

.account-address-form-card fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.account-address-form-card .row.mb-3 > .col-form-label,
.account-address-form-card .row.mb-3 > [class*="col-"] {
	width: 100%;
}

.account-address-form-card .row.mb-3 > .col-form-label {
	padding-bottom: 6px;
	font-weight: 600;
}

.account-address-form-card .form-control,
.account-address-form-card .form-select {
	min-height: 46px;
}

.account-address-form-card .input-group .form-select {
	max-width: 190px;
}

.account-address-form-card > form > .row:last-child {
	margin-top: 10px;
}

.account-order-info-page {
	min-height: 52vh;
	padding-bottom: 3rem;
}

.account-order-info-breadcrumb {
	margin-top: 16px;
}

.account-order-info-content {
	max-width: 1100px;
	margin: 0 auto;
}

.account-order-info-continue-payment {
	border-radius: 10px;
	box-shadow: 0 4px 18px rgba(20, 30, 50, .05);
}

.account-order-info-summary {
	margin-bottom: 4px;
}

.account-order-info-metric,
.account-order-info-card {
	height: 100%;
	border: 1px solid var(--shell-border);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 4px 18px rgba(20, 30, 50, .04);
}

.account-order-info-metric strong,
.account-order-info-card strong {
	color: #374151;
}

.account-order-info-section,
.account-order-products-section,
.account-order-history-section {
	margin-bottom: 20px;
}

.account-order-info-section .card-header {
	border-bottom-color: var(--shell-border);
	background: #fffaf0;
	font-weight: 700;
}

.account-order-info-section-title {
	margin: 24px 0 10px;
	color: #1f2937;
	font-size: 18px;
	font-weight: 700;
}

.account-order-info-addresses,
.account-order-info-methods {
	margin-bottom: 4px;
}

.account-order-info-pickup {
	padding: 16px;
	line-height: 1.65;
}

.account-order-products-table {
	border: 1px solid var(--shell-border);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 4px 18px rgba(20, 30, 50, .04);
}

.account-order-products-table-grid {
	margin-bottom: 0;
}

.account-order-products-table-grid > :not(caption) > * > * {
	padding: 12px;
	vertical-align: middle;
}

.account-order-history-table {
	border: 1px solid var(--shell-border);
	border-radius: 10px;
	background: #fff;
}

.account-order-history-table table {
	margin-bottom: 0;
}

.account-order-info-actions {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
}

.account-order-info-actions form {
	display: inline-flex;
	margin: 0;
}

.account-order-info-actions .btn {
	min-height: 42px;
}

.account-wishlist-page {
	min-height: 52vh;
	padding-bottom: 3rem;
}

.account-wishlist-breadcrumb {
	margin-top: 16px;
}

.account-wishlist-content {
	max-width: 980px;
	margin: 0 auto;
}

.account-wishlist-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 18px 0 20px;
}

.account-wishlist-heading h1 {
	min-width: 0;
	margin: 0;
	color: #1f2937;
	font-size: 26px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.account-wishlist-list {
	display: grid;
	gap: 12px;
}

.account-wishlist-card {
	padding: 16px;
	border: 1px solid var(--shell-border);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 4px 18px rgba(20, 30, 50, .05);
}

.account-wishlist-product {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
}

.account-wishlist-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 104px;
	width: 104px;
	height: 104px;
	border: 1px solid #eef0f3;
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}

.account-wishlist-thumb img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.account-wishlist-copy {
	display: grid;
	align-content: start;
	gap: 5px;
	min-width: 0;
}

.account-wishlist-name {
	color: #374151;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
}

.account-wishlist-copy small {
	color: #6b7280;
	line-height: 1.4;
}

.account-wishlist-price {
	margin-top: 4px;
	color: #374151;
	font-weight: 600;
}

.account-wishlist-price strong {
	color: #c2410c;
}

.account-wishlist-price s {
	margin-left: 6px;
	color: #9ca3af;
	font-weight: 400;
}

.account-wishlist-card > form {
	display: none;
}

.account-wishlist-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #eef0f3;
}

.account-wishlist-actions .btn {
	min-height: 42px;
}

.account-wishlist-empty {
	padding: 36px 18px;
	border: 1px dashed #d1d5db;
	border-radius: 10px;
	background: #fff;
	color: #6b7280;
	text-align: center;
}

.account-wishlist-empty i {
	display: block;
	margin-bottom: 10px;
	font-size: 30px;
}

.account-wishlist-empty p {
	margin: 0;
}

.account-coupon-page {
	min-height: 52vh;
	padding-bottom: 3rem;
}

.account-coupon-breadcrumb {
	margin-top: 16px;
}

.account-coupon-content {
	max-width: 980px;
	margin: 0 auto;
}

.account-coupon-title {
	margin: 18px 0 20px;
	color: #1f2937;
	font-size: 26px;
	font-weight: 700;
}

.account-coupon-section {
	margin-bottom: 26px;
}

.account-coupon-section-title {
	margin: 0 0 12px;
	color: #1f2937;
	font-size: 18px;
	font-weight: 700;
}

.account-coupon-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.account-coupon-grid-item {
	min-width: 0;
}

.account-coupon-card {
	height: 100%;
	border: 1px solid var(--shell-border);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 4px 18px rgba(20, 30, 50, .05);
}

.account-coupon-card-body {
	display: flex;
	flex-direction: column;
	min-height: 174px;
	padding: 18px;
}

.account-coupon-name {
	margin: 0 0 10px;
	color: #374151;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45;
}

.account-coupon-discount {
	margin-bottom: 10px;
	color: #c2410c;
	font-size: 22px;
	font-weight: 700;
}

.account-coupon-code,
.account-coupon-minimum {
	color: #4b5563;
	line-height: 1.6;
}

.account-coupon-code code {
	padding: 3px 6px;
	border-radius: 5px;
	background: #fff8e8;
	color: #9a6700;
	font-size: 13px;
}

.account-coupon-valid {
	margin-top: auto;
	padding-top: 12px;
	color: #6b7280;
	line-height: 1.5;
}

.account-coupon-claim {
	margin-top: auto;
	padding-top: 14px;
}

.account-coupon-claim .btn {
	min-height: 42px;
	width: 100%;
}

.account-coupon-empty {
	padding: 28px 16px;
	border: 1px dashed #d1d5db;
	border-radius: 10px;
	background: #fff;
	color: #6b7280;
	text-align: center;
}

.account-coupon-back {
	display: inline-flex;
	margin-top: 4px;
	color: var(--shell-accent);
}

.account-ledger-page {
	min-height: 52vh;
	padding-bottom: 3rem;
}

.account-ledger-breadcrumb {
	margin-top: 16px;
}

.account-ledger-content {
	max-width: 980px;
	margin: 0 auto;
}

.account-ledger-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 18px 0 12px;
}

.account-ledger-heading h1 {
	min-width: 0;
	margin: 0;
	color: #1f2937;
	font-size: 26px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.account-ledger-summary {
	margin: 0 0 18px;
	color: #4b5563;
}

.account-ledger-summary b {
	color: #c2410c;
	font-size: 18px;
}

.account-ledger-list {
	display: grid;
	gap: 10px;
}

.account-ledger-card {
	padding: 15px 16px;
	border: 1px solid var(--shell-border);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 4px 18px rgba(20, 30, 50, .04);
}

.account-ledger-card-main {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
}

.account-ledger-date {
	color: #6b7280;
	font-size: 13px;
}

.account-ledger-description {
	min-width: 0;
	color: #374151;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.account-ledger-description a {
	color: inherit;
	text-decoration: none;
}

.account-ledger-description a:hover,
.account-ledger-description a:focus-visible {
	color: var(--shell-accent);
	text-decoration: underline;
}

.account-ledger-amount {
	color: #c2410c;
	font-size: 17px;
	text-align: right;
	white-space: nowrap;
}

.account-ledger-empty {
	padding: 36px 18px;
	border: 1px dashed #d1d5db;
	border-radius: 10px;
	background: #fff;
	color: #6b7280;
	text-align: center;
}

.account-ledger-empty i {
	display: block;
	margin-bottom: 10px;
	font-size: 30px;
}

.account-ledger-empty p {
	margin: 0;
}

.account-ledger-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
}

.account-ledger-footer small {
	color: #6b7280;
}

.account-download-page {
	min-height: 52vh;
	padding-bottom: 3rem;
}

.account-download-breadcrumb {
	margin-top: 16px;
}

.account-download-content {
	max-width: 980px;
	margin: 0 auto;
}

.account-download-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 18px 0 20px;
}

.account-download-heading h1 {
	min-width: 0;
	margin: 0;
	color: #1f2937;
	font-size: 26px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.account-download-list {
	display: grid;
	gap: 10px;
}

.account-download-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 16px;
	border: 1px solid var(--shell-border);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 4px 18px rgba(20, 30, 50, .04);
}

.account-download-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: #fff8e8;
	color: #c2410c;
	font-size: 20px;
}

.account-download-copy {
	display: grid;
	flex: 1 1 auto;
	gap: 3px;
	min-width: 0;
	color: #6b7280;
	font-size: 13px;
	line-height: 1.45;
}

.account-download-name {
	color: #374151;
	font-size: 15px;
	overflow-wrap: anywhere;
}

.account-download-action {
	flex: 0 0 auto;
	min-height: 42px;
	white-space: nowrap;
}

.account-download-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
}

.account-download-footer small {
	color: #6b7280;
}

.account-download-empty {
	padding: 36px 18px;
	border: 1px dashed #d1d5db;
	border-radius: 10px;
	background: #fff;
	color: #6b7280;
	text-align: center;
}

.account-download-empty i {
	display: block;
	margin-bottom: 10px;
	font-size: 30px;
}

.account-download-empty p {
	margin: 0;
}

/* Information pages use the same restrained single-card reading surface as
 * the reference storefront while keeping the CMS-provided rich text intact. */
.information-article-page {
	min-height: 52vh;
	padding-bottom: 3rem;
}

.information-article-breadcrumb {
	margin-top: 16px;
}

.information-article-content {
	max-width: 960px;
	margin: 0 auto;
}

.information-article-card {
	border: 0;
	border-radius: 10px;
	box-shadow: 0 10px 34px rgba(20, 30, 50, .08) !important;
}

.information-article-title {
	margin: 0 0 1.5rem;
	color: #1f2937;
	font-size: 28px;
	font-weight: 700;
}

.information-article-body {
	color: #374151;
	line-height: 1.8;
	overflow-wrap: anywhere;
}

.information-article-body img,
.information-article-body video,
.information-article-body iframe {
	max-width: 100%;
	height: auto;
}

.information-article-body table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* Reference storefront shell: mobile left controls, centered logo, right actions. */
.mobile-theme-mobile-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
	padding: 10px !important;
}

.mobile-theme-mobile-content > div {
	display: flex;
	align-items: center;
}

.mobile-theme-mobile-leading,
.mobile-theme-actions {
	gap: 10px;
}

.mobile-theme-mobile-leading,
.mobile-theme-actions {
	flex: 0 0 90px;
}

.mobile-theme-mobile-leading {
	justify-content: flex-start;
}

.mobile-theme-actions {
	justify-content: flex-end;
	margin-top: 0;
}

.mobile-theme-mobile-content .mobile-theme-brand {
	min-width: 0;
	flex: 1 1 auto;
	margin: 0 8px;
	text-align: center;
}

.mobile-theme-mobile-content .mobile-theme-brand img {
	max-width: 100%;
	max-height: 40px;
}

.mobile-theme-mobile-content .mobile-nav-icon,
.mobile-theme-search-trigger,
.mobile-theme-actions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	min-width: 40px;
	height: 44px;
	min-height: 44px;
	padding: 8px 6px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #1f2937;
	font-size: 18px;
	line-height: 1;
}

.mobile-theme-mobile-content .mobile-nav-icon:hover,
.mobile-theme-mobile-content .mobile-nav-icon:focus-visible,
.mobile-theme-search-trigger:hover,
.mobile-theme-search-trigger:focus-visible,
.mobile-theme-actions a:hover,
.mobile-theme-actions a:focus-visible {
	background: #fff7e6;
	color: var(--shell-accent);
}

.mobile-theme-mobile-content .mobile-nav-icon .category-icon,
.mobile-theme-mobile-content .mobile-nav-icon .category-icon::before,
.mobile-theme-mobile-content .mobile-nav-icon .category-icon::after {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
}

.mobile-theme-mobile-content .mobile-nav-icon .category-icon {
	position: relative;
}

.mobile-theme-mobile-content .mobile-nav-icon .category-icon::before,
.mobile-theme-mobile-content .mobile-nav-icon .category-icon::after {
	position: absolute;
	left: 0;
	content: '';
}

.mobile-theme-mobile-content .mobile-nav-icon .category-icon::before {
	top: -6px;
}

.mobile-theme-mobile-content .mobile-nav-icon .category-icon::after {
	top: 6px;
}

.mobile-theme-actions a {
	flex: 0 0 auto;
	border: 0;
}

.mobile-theme-actions a > span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

	.mobile-theme-menu #menu #category,
	.mobile-theme-menu #menu .navbar-toggler {
		display: none !important;
	}

	.mobile-theme-menu #menu {
		margin-bottom: 0;
	}

	.mobile-theme-menu #menu > .container {
		padding: 0;
	}

.mobile-theme-menu #navbar-menu {
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}

@media (max-width: 991.98px) {
	.header-wrapper {
		display: block;
		position: relative;
		z-index: 1020;
	}

	.header-wrapper .header-content {
		display: none !important;
	}

	.header-wrapper .header-mobile {
		display: block;
		position: relative;
		height: 50px;
		background: var(--shell-surface);
	}

	.header-wrapper .header-mobile .mobile-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50px;
		padding: 0 12px;
	}

	.header-wrapper .header-mobile .mobile-content > .left,
	.header-wrapper .header-mobile .mobile-content > .right {
		display: flex;
		flex: 0 0 88px;
		min-width: 88px;
		align-items: center;
		gap: 8px;
	}

	.header-wrapper .header-mobile .mobile-content > .right {
		justify-content: flex-end;
	}

	.header-wrapper .header-mobile .mobile-content > .center {
		display: flex;
		min-width: 0;
		flex: 1 1 auto;
		align-items: center;
		justify-content: center;
		margin: 0 8px;
		text-align: center;
	}

	.header-wrapper .header-mobile .center img {
		display: block;
		max-width: 100%;
		max-height: 34px;
		width: auto;
	}

	.header-wrapper .header-mobile .mobile-store-name {
		color: #1f2937;
		font-size: 16px;
		font-weight: 700;
		text-decoration: none;
	}

	.header-wrapper .header-mobile .mobile-nav-icon,
	.header-wrapper .header-mobile .mobile-search-trigger,
	.header-wrapper .header-mobile .mobile-content > .right a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		min-width: 40px;
		height: 44px;
		min-height: 44px;
		padding: 8px 5px;
		border: 0;
		border-radius: 4px;
		background: transparent;
		color: #1f2937;
		font-size: 17px;
		line-height: 1;
		text-decoration: none;
	}

	.header-wrapper .header-mobile .mobile-nav-icon:hover,
	.header-wrapper .header-mobile .mobile-nav-icon:focus-visible,
	.header-wrapper .header-mobile .mobile-search-trigger:hover,
	.header-wrapper .header-mobile .mobile-search-trigger:focus-visible,
	.header-wrapper .header-mobile .mobile-content > .right a:hover,
	.header-wrapper .header-mobile .mobile-content > .right a:focus-visible {
		background: #fff7e6;
		color: var(--shell-accent);
	}

	.header-wrapper .header-mobile .category-icon,
	.header-wrapper .header-mobile .category-icon::before,
	.header-wrapper .header-mobile .category-icon::after {
		display: block;
		width: 19px;
		height: 2px;
		background: currentColor;
	}

	.header-wrapper .header-mobile .category-icon {
		position: relative;
	}

	.header-wrapper .header-mobile .category-icon::before,
	.header-wrapper .header-mobile .category-icon::after {
		position: absolute;
		left: 0;
		content: '';
	}

	.header-wrapper .header-mobile .category-icon::before {
		top: -6px;
	}

	.header-wrapper .header-mobile .category-icon::after {
		top: 6px;
	}

	.header-wrapper .header-mobile > .menu-wrapper {
		position: absolute;
		top: 50px;
		right: 0;
		left: 0;
		z-index: 1025;
		background: var(--shell-surface);
	}

	/* The live menu template nests these legacy controls inside .container;
	 * target the descendants so they do not add a duplicate 44px row below
	 * the dedicated 50px mobile shell. The shell's own menu button remains. */
	.header-wrapper .header-mobile > .menu-wrapper #menu #category,
	.header-wrapper .header-mobile > .menu-wrapper #menu .navbar-toggler {
		display: none !important;
	}

	.header-wrapper .header-mobile > .menu-wrapper #navbar-menu,
	.header-wrapper .header-mobile > .menu-wrapper #navbar-menu-mobile {
		max-height: calc(100vh - 90px);
		overflow-y: auto;
	}

	body.mobile-theme-active {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
	}

	body:not(.mobile-theme-active) {
		padding-bottom: 0 !important;
	}

	.mobile-theme-active .mobile-bottom-nav {
		display: flex !important;
	}
}

@media (max-width: 767.98px) {
	/* The storefront still renders OpenCart's legacy #top utility bar before
	 * the 50px mobile header. The reference mobile shell omits that 40px row. */
	.header-wrapper > #top {
		display: none !important;
	}

	.mobile-theme-topbar {
		display: none;
	}

	.mobile-theme-shell {
		position: relative;
	}

	.mobile-theme-header {
		height: 50px;
	}

	.mobile-theme-mobile-content {
		height: 50px;
		padding: 0 12px !important;
	}

	.mobile-theme-mobile-content .mobile-theme-brand img {
		max-height: 34px;
	}

	.mobile-theme-menu {
		position: absolute;
		top: 50px;
		right: 0;
		left: 0;
		z-index: 1025;
		height: 0;
		overflow: visible;
	}

	#page-builder-content {
		padding-top: 0;
	}

	#page-builder-content > .mobile-page-builder-search {
		display: none !important;
	}

	#page-builder-content > .page-builder-mobile-slideshow {
		height: auto;
		margin-top: 0;
	}

	#page-builder-content > .page-builder-mobile-slideshow .page-slide,
	#page-builder-content > .page-builder-mobile-slideshow img {
		height: auto;
	}

	#page-builder-content > .page-builder-mobile-slideshow img {
		object-fit: initial;
	}

	/* CMS slide typography is sometimes stored as inline desktop-sized values.
	 * Keep the complete caption inside the narrow mobile banner instead of
	 * centering a 300px-tall block over a 160px image. */
	#page-builder-content > .page-builder-mobile-slideshow .page-builder-slideshow-caption {
		top: 50%;
		left: 8%;
		width: 70%;
		max-width: 70%;
		transform: translateY(-50%);
	}

	#page-builder-content > .page-builder-mobile-slideshow .page-builder-slideshow-caption-kicker {
		margin-bottom: 4px;
		font-size: clamp(10px, 3.1vw, 12px) !important;
		line-height: 1.25;
	}

	#page-builder-content > .page-builder-mobile-slideshow .page-builder-slideshow-caption-title {
		max-width: 100%;
		font-size: clamp(18px, 5.1vw, 21px) !important;
		line-height: 1.2;
	}

	#page-builder-content > .page-builder-mobile-slideshow .page-builder-slideshow-caption-button {
		margin-top: 8px;
		padding: 5px 10px;
		font-size: 10px;
		line-height: 1.3;
	}

	.header-wrapper #top-links,
	.header-wrapper .cart-account,
	.header-wrapper .menu-wrapper {
		min-width: 0;
	}

	.mobile-theme-shell {
		padding-top: env(safe-area-inset-top, 0px);
	}

	.site-footer .module-customer-service .item {
		padding-right: 12px;
		padding-left: 12px;
		padding-top: 4.5px;
		padding-bottom: 4.5px;
	}

	.site-footer .module-customer-service {
		margin-bottom: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		border: 0 !important;
	}

	.site-footer > .container.py-5 {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.site-footer .top_intro {
		margin-bottom: 0 !important;
	}

	.site-footer h5 {
		margin-bottom: 1rem !important;
	}

	.site-footer .top_link1 li,
	.site-footer .top_link2 li,
	.site-footer .top_link3 li,
	.site-footer .top_contact li {
		margin-bottom: .5625rem !important;
	}

	.site-footer .footer-bottom {
		align-items: flex-start !important;
		flex-direction: column;
		gap: 6px;
		margin-top: 0 !important;
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	.site-footer .bottom_link {
		margin-left: 0;
	}

	.account-auth-page {
		padding-right: 12px;
		padding-left: 12px;
	}

	.account-auth-breadcrumb {
		display: none;
	}

	.account-login-wrapper {
		margin-top: 14px;
		box-shadow: 0 4px 18px rgba(20, 30, 50, .06) !important;
	}

	.information-article-page {
		padding-right: 12px;
		padding-left: 12px;
	}

	.information-article-breadcrumb {
		display: none;
	}

	.information-article-card {
		box-shadow: 0 4px 18px rgba(20, 30, 50, .06) !important;
	}

	.information-article-title {
		font-size: 22px;
	}

	.header-wrapper #top .top-text {
		display: none;
	}
}

@media (min-width: 992px) {
	.mobile-theme-shell,
	.mobile-theme-footer,
	#mobile-bottom-nav {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}

.multi-filter-module {
	margin-bottom: 1rem;
	padding: 1rem;
	border: 1px solid var(--bs-border-color, #dee2e6);
	border-radius: .375rem;
	background: var(--bs-body-bg, #fff);
}

.multi-filter-title {
	margin: 0 0 1rem;
	font-size: 1.05rem;
}

.multi-filter-group {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

.multi-filter-group legend {
	float: none;
	width: 100%;
	margin-bottom: .5rem;
	font-size: .9rem;
	font-weight: 600;
}

.multi-filter-options {
	display: grid;
	gap: .35rem;
}

.multi-filter-price {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .35rem .5rem;
}

.multi-filter-price label {
	font-size: .8rem;
	color: var(--bs-secondary-color, #6c757d);
}

.multi-filter-actions {
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
}

@media (max-width: 575.98px) {
	.multi-filter-module {
		padding: .75rem;
	}

	.multi-filter-actions .btn {
		flex: 1 1 9rem;
	}
}