:root {
		--blue: #0080c8;
		--blue-dark: #005f98;
		--blue-soft: #e8f5fc;
		--cyan: #20a9e8;
		--dark: #0f172a;
		--muted: #64748b;
		--line: #e2e8f0;
		--bg: #f5f7fb;
		--card: #ffffff;
		--green: #13a85b;
		--red: #d93838;
		--shadow: 0 18px 45px rgba(15, 23, 42, 0.1);
		--radius: 18px;
	}

	* {
		box-sizing: border-box;
	}

	body {
		margin: 0;
		font-family: Segoe UI, Roboto, Arial, sans-serif;
		background: var(--bg);
		color: var(--dark);
	}

	a {
		text-decoration: none;
		color: inherit;
	}

	button,
	input,
	textarea,
	select {
		font-family: inherit;
	}

	button:disabled {
		opacity: 0.55;
		cursor: not-allowed;
	}

	.container {
		width: min(1220px, calc(100% - 32px));
		margin: auto;
	}

	/* =========================================================
	   TOP BAR
	   ========================================================= */

	.top-bar {
		background: #062b44;
		color: #dff4ff;
		font-size: 13px;
	}

	.top-bar-content {
		min-height: 36px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}

	/* =========================================================
	   HEADER
	   ========================================================= */

	.main-header {
		background: linear-gradient(135deg, var(--blue), var(--blue-dark));
		color: white;
		position: sticky;
		top: 0;
		z-index: 20;
		box-shadow: 0 8px 24px rgba(0, 95, 152, 0.28);
	}

	.header-content {
		min-height: 86px;
		display: grid;
		grid-template-columns: 230px 1fr auto auto;
		gap: 18px;
		align-items: center;
	}

	.logo {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.logo-image-link {
		display: flex;
		align-items: center;
		max-width: 230px;
	}

	.site-logo {
		width: 100%;
		max-width: 220px;
		height: auto;
		display: block;
		object-fit: contain;
	}

	.logo-icon {
		width: 48px;
		height: 48px;
		background: white;
		color: var(--blue);
		border-radius: 14px;
		display: grid;
		place-items: center;
		font-size: 28px;
		font-weight: 900;
	}

	.logo strong {
		display: block;
		font-size: 24px;
		line-height: 1;
	}

	.logo small {
		display: block;
		margin-top: 4px;
		color: #d8f3ff;
		font-size: 12px;
	}

	/* =========================================================
	   SEARCH
	   ========================================================= */

	.search-form {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 6px;
		background: white;
		padding: 6px;
		border-radius: 16px;
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
	}

	.search-form input {
		border: 0;
		outline: 0;
		background: #f8fafc;
		padding: 0 14px;
		border-radius: 12px;
		min-height: 44px;
	}

	.search-form button,
	.primary-btn {
		border: 0;
		background: var(--cyan);
		color: white;
		border-radius: 12px;
		min-height: 44px;
		padding: 0 18px;
		font-weight: 800;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.search-form button:hover,
	.primary-btn:hover {
		background: #0b98d3;
	}

	.search-form button {
		width: 50px;
		padding: 0;
		font-size: 17px;
		color: white;
	}

	.search-form button svg {
		width: 23px;
		height: 23px;
		fill: currentColor;
		display: block;
	}

	/* =========================================================
	   HEADER ICON NAV
	   ========================================================= */

	.icon-nav {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.nav-icon {
		width: 42px;
		height: 42px;
		border-radius: 13px;
		display: grid;
		place-items: center;
		background: rgba(255, 255, 255, 0.14);
		border: 1px solid rgba(255, 255, 255, 0.24);
		color: white;
		transition: 0.2s ease;
		position: relative;
	}

	.nav-icon svg {
		width: 21px;
		height: 21px;
		fill: currentColor;
		display: block;
	}

	.nav-icon:hover {
		background: white;
		color: var(--blue-dark);
		transform: translateY(-2px);
	}

	.admin-icon {
		background: rgba(255, 255, 255, 0.14);
		color: white;
		border-color: rgba(255, 255, 255, 0.24);
		box-shadow: none;
	}

	.admin-icon:hover {
		background: white;
		color: var(--blue-dark);
	}

	.main-nav {
		display: flex;
		align-items: center;
		gap: 14px;
		font-weight: 700;
	}

	.main-nav a:hover {
		color: #d8f3ff;
	}

	/* =========================================================
	   CART BADGE IN HEADER
	   ========================================================= */

	.cart-nav-icon {
		position: relative;
	}

	.cart-badge {
		position: absolute;
		right: -6px;
		bottom: -6px;
		top: auto;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		border-radius: 999px;
		background: var(--red);
		color: white;
		font-size: 11px;
		font-weight: 900;
		line-height: 18px;
		text-align: center;
		display: grid;
		place-items: center;
		border: 2px solid white;
		z-index: 5;
	}

    /* =========================================================
       CART OFFER PRICE
       ========================================================= */

    .cart-page-info .product-price-box {
        margin-top: 10px;
        display: flex;
        align-items: baseline;
        gap: 10px;
        flex-wrap: wrap;
    }

    .cart-page-info .offer-price {
        color: #ef2b2b;
        font-weight: 900;
    }

    .cart-page-info .old-price {
        color: #111827;
        text-decoration: line-through;
        text-decoration-thickness: 2px;
        font-weight: 500;
    }

    .cart-discount-label {
        background: #fee2e2;
        color: #b91c1c;
        border-radius: 999px;
        padding: 4px 8px;
        font-size: 12px;
        font-weight: 900;
    }

	/* =========================================================
	   LANGUAGE SWITCH
	   ========================================================= */

	.language-switch {
		display: flex;
		gap: 4px;
		padding: 4px;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.16);
		border: 1px solid rgba(255, 255, 255, 0.28);
	}

	.language-switch a {
		padding: 8px 11px;
		border-radius: 999px;
		font-weight: 900;
	}

	.language-switch a.active {
		background: white;
		color: var(--blue-dark);
	}

	/* =========================================================
	   HERO
	   ========================================================= */

	.hero {
		padding: 34px 0;
	}

	.hero-content {
		display: grid;
		grid-template-columns: 1fr 300px;
		gap: 24px;
		align-items: stretch;
	}

	.hero-content > div:first-child,
	.hero-card {
		background: white;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06);
	}

	.hero-content > div:first-child {
		padding: 42px;
		background:
			radial-gradient(circle at 85% 15%, rgba(32, 169, 232, 0.24), transparent 32%),
			linear-gradient(135deg, #ffffff, #eef9ff);
	}

	.eyebrow {
		color: var(--blue);
		text-transform: uppercase;
		font-weight: 900;
		letter-spacing: 0.08em;
		font-size: 12px;
	}

	.hero h1 {
		font-size: clamp(34px, 5vw, 58px);
		line-height: 0.98;
		margin: 14px 0;
	}

	.hero p {
		font-size: 18px;
		color: #475569;
		max-width: 700px;
	}

	.hero-card {
		padding: 24px;
		color: white;
		background: linear-gradient(160deg, #062b44, #0a507a);
	}

	.hero-card h3 {
		font-size: 32px;
	}
	
	@media (max-width: 1100px) {
		.hero-card.featured-product-card {
			min-height: 320px;
		}

		.featured-product-image {
			height: 170px;
		}
	}

	/* =========================================================
	   FEATURED PRODUCT IN HERO
	   ========================================================= */

	.hero-card.featured-product-card {
		min-height: 350px;
		max-height: none;
		height: 100%;
		padding: 18px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
	}

	.featured-product-card:hover {
		transform: translateY(-3px);
	}

	.featured-product-card span {
		color: #d8f3ff;
		font-size: 11px;
		font-weight: 900;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		margin-bottom: 10px;
	}

	.featured-product-image {
		width: 100%;
		height: 150px;
		background: rgba(255, 255, 255, 0.12);
		border-radius: 14px;
		display: grid;
		place-items: center;
		overflow: hidden;
		margin-bottom: 12px;
	}

	.featured-product-image img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
		padding: 10px;
		display: block;
	}

	.featured-product-card h3 {
		font-size: 18px;
		line-height: 1.15;
		margin: 0 0 12px;
		color: white;
		max-height: none;
		overflow: visible;
		display: block;
	}

	.featured-product-card p {
		margin: auto 0 0;
		color: white;
		font-weight: 900;
		font-size: 19px;
	}

	/* =========================================================
	   MAIN SHOP LAYOUT
	   ========================================================= */

	.shop-page-layout {
		display: grid;
		grid-template-columns: 330px 1fr;
		gap: 24px;
		align-items: start;
	}

	/* =========================================================
	   CATEGORY SIDEBAR
	   ========================================================= */

	.category-sidebar {
		background: white;
		border-right: 3px solid #1f4378;
		border-top: 1px solid var(--line);
		border-bottom: 1px solid var(--line);
		border-left: 1px solid var(--line);
		box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06);
		position: sticky;
		top: 110px;
		max-height: calc(100vh - 130px);
		overflow-y: auto;
	}

	.sidebar-category {
		border-bottom: 1px solid #d8e0ea;
	}

	.sidebar-category-header {
		width: 100%;
		min-height: 62px;
		border: 0;
		background: white;
		color: #000;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 14px;
		cursor: pointer;
		font-size: 19px;
		font-weight: 900;
		border-bottom: 1px solid #d8e0ea;
	}

	.sidebar-category-header:hover {
		background: var(--blue-soft);
	}

	.sidebar-category-title {
		display: flex;
		align-items: center;
		gap: 12px;
		text-align: left;
	}

	.sidebar-category-icon {
		width: 36px;
		min-width: 36px;
		height: 36px;
		display: grid;
		place-items: center;
		border-radius: 10px;
		background: var(--blue-soft);
		color: var(--blue);
	}

	.sidebar-category-icon svg {
		width: 21px;
		height: 21px;
		fill: currentColor;
		display: block;
	}

	.sidebar-category-header:hover .sidebar-category-icon {
		background: var(--blue);
		color: white;
	}

	.sidebar-toggle {
		color: #1f4378;
		font-size: 26px;
		font-weight: 900;
	}

	.sidebar-subcategories {
		display: grid;
		padding: 8px 0 14px;
		background: white;
	}

	.sidebar-category:not(.open) .sidebar-subcategories {
		display: none;
	}

	.sidebar-category:not(.open) .sidebar-toggle {
		transform: rotate(90deg);
	}

	.sidebar-subcategory {
		display: grid;
		grid-template-columns: 14px 1fr;
		gap: 10px;
		align-items: start;
		padding: 11px 18px 11px 62px;
		color: #000;
		font-size: 18px;
		line-height: 1.35;
	}

	.sidebar-subcategory:hover,
	.sidebar-subcategory.active {
		color: var(--blue-dark);
		background: var(--blue-soft);
	}

	.sidebar-dot {
		width: 10px;
		height: 10px;
		background: #d8d8d8;
		border-radius: 999px;
		margin-top: 8px;
	}

	.sidebar-subcategory.active .sidebar-dot {
		background: var(--blue);
	}

	/* =========================================================
	   SECTIONS
	   ========================================================= */

	.category-section,
	.products-section,
	.page {
		padding: 26px 0;
	}

	.products-section {
		padding-top: 0;
	}

	.category-grid {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 14px;
	}

	.category-grid a {
		background: white;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		padding: 20px;
		font-weight: 800;
		box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06);
	}

	.category-grid a:hover {
		border-color: var(--blue);
		box-shadow: var(--shadow);
	}

	.section-header,
	.admin-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 18px;
	}

	.section-header h2,
	.admin-header h1 {
		margin: 0;
	}

	/* =========================================================
	   SEARCH INFO / EMPTY
	   ========================================================= */

	.search-info {
		background: white;
		border: 1px solid var(--line);
		border-radius: 14px;
		padding: 14px;
		margin-bottom: 18px;
		display: flex;
		justify-content: space-between;
		gap: 12px;
		color: var(--muted);
	}

	.search-info strong {
		color: var(--dark);
	}

	.search-info a {
		color: var(--blue);
		font-weight: 900;
	}

	.empty-products {
		background: white;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		padding: 32px;
		text-align: center;
		color: var(--muted);
		box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06);
	}

	.empty-products h3 {
		margin-top: 0;
		color: var(--dark);
	}

	/* =========================================================
	   PRODUCTS GRID
	   ========================================================= */

	.product-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}

	.product-card {
		background: white;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		padding: 16px;
		box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06);
		display: flex;
		flex-direction: column;
		min-height: 380px;
		transition: 0.2s ease;
	}

	.product-card:hover {
		transform: translateY(-3px);
		border-color: #b7e2f8;
		box-shadow: var(--shadow);
	}

	.product-image {
		height: 180px;
		border-radius: 16px;
		background:
			radial-gradient(circle at 50% 30%, #ffffff, transparent 32%),
			linear-gradient(135deg, #eaf8ff, #d8f1ff);
		display: grid;
		place-items: center;
		font-size: 60px;
		margin-bottom: 14px;
		overflow: hidden;
	}

	.product-image img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
		padding: 14px;
	}

	.product-category {
		color: var(--blue);
		font-size: 12px;
		text-transform: uppercase;
		font-weight: 900;
	}

	.product-card h3 {
		font-size: 17px;
		line-height: 1.25;
		min-height: 64px;
	}

	.product-card h3 a:hover {
		color: var(--blue-dark);
	}

	.product-card p {
		color: var(--muted);
		flex: 1;
	}

	.product-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 14px;
		gap: 10px;
	}

	.product-meta strong {
		font-size: 21px;
	}

	.stock {
		font-size: 13px;
		font-weight: 900;
		white-space: nowrap;
	}

	.stock.in {
		color: var(--green);
	}

	.stock.out {
		color: var(--red);
	}

	.small {
		min-height: 38px;
		font-size: 14px;
	}

	.add-cart-form {
		margin-top: 10px;
	}

	.add-cart-form .primary-btn {
		width: 100%;
	}

	/* =========================================================
	   HOMEPAGE PRODUCTS + BANNER
	   ========================================================= */

	.homepage-products-wrapper {
		display: grid;
		gap: 18px;
	}

	.homepage-product-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}

	.homepage-product-card {
		min-height: 430px;
	}

	.homepage-product-card .product-image {
		height: 190px;
	}

	.homepage-product-card h3 {
		min-height: 52px;
		margin-bottom: 10px;
	}

	.homepage-product-description {
		color: var(--muted);
		line-height: 1.45;
		min-height: 64px;
		max-height: 64px;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.homepage-banner {
		display: block;
		width: 100%;
		height: 180px;
		border-radius: var(--radius);
		overflow: hidden;
		background: white;
		border: 1px solid var(--line);
		box-shadow: var(--shadow);
		transition: 0.2s ease;
	}

	.homepage-banner:hover {
		transform: translateY(-3px);
	}

	.homepage-banner img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	/* =========================================================
	   PRODUCT DETAIL
	   ========================================================= */

	.product-detail {
		display: grid;
		grid-template-columns: 430px 1fr;
		gap: 30px;
		background: white;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		padding: 28px;
		box-shadow: var(--shadow);
	}

	.product-side-info h1 {
		margin-top: 10px;
		margin-bottom: 16px;
		font-size: clamp(28px, 4vw, 42px);
		line-height: 1.05;
	}

	.product-detail-price {
		font-size: 34px;
		color: var(--blue-dark);
		margin: 18px 0;
	}

	.product-stock-line {
		font-weight: 900;
		margin-bottom: 18px;
	}

	.product-short-description {
		color: var(--muted);
		font-size: 16px;
		line-height: 1.6;
		margin: 10px 0 18px;
		max-width: 520px;
	}

	.product-detail-image {
		min-height: 360px;
		border-radius: var(--radius);
		background: var(--blue-soft);
		display: grid;
		place-items: center;
		font-size: 100px;
	}

	.product-detail-image img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
		padding: 24px;
	}

	.product-buy-form {
		display: grid;
		gap: 14px;
		margin-top: 18px;
		max-width: 280px;
	}

	.product-buy-form label {
		display: grid;
		gap: 8px;
		font-weight: 900;
	}

	.product-buy-form input {
		border: 1px solid var(--line);
		border-radius: 12px;
		padding: 12px;
	}

	.product-buy-form .primary-btn {
		width: 100%;
	}

	.product-extra-info {
		margin-top: 24px;
		background: white;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		padding: 28px;
		box-shadow: var(--shadow);
	}

	.product-extra-info h2 {
		margin-top: 0;
		margin-bottom: 18px;
		color: var(--dark);
	}

	.product-description-text {
		color: #334155;
		font-size: 17px;
		line-height: 1.75;
		white-space: normal;
	}

	.product-description-empty {
		color: var(--muted);
		margin-bottom: 0;
	}

	/* =========================================================
	   PRODUCT CAROUSEL
	   ========================================================= */

	.product-carousel {
		width: 100%;
		display: grid;
		gap: 14px;
	}

	.carousel-main {
		position: relative;
		width: 100%;
		height: 460px;
		background: white;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		overflow: hidden;
		box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06);
	}

	.carousel-track {
		height: 100%;
		display: flex;
		transition: transform 0.35s ease;
		will-change: transform;
	}

	.carousel-slide {
		min-width: 100%;
		width: 100%;
		height: 100%;
		flex: 0 0 100%;
		display: grid;
		place-items: center;
		background: white;
	}

	.carousel-slide img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
		padding: 28px;
		display: block;
	}

	.carousel-placeholder {
		width: 100%;
		height: 100%;
		display: grid;
		place-items: center;
		font-size: 100px;
		background: var(--blue-soft);
	}

	.carousel-btn {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 46px;
		height: 46px;
		border: 0;
		border-radius: 999px;
		background: white;
		color: var(--blue-dark);
		font-size: 34px;
		line-height: 1;
		cursor: pointer;
		box-shadow: 0 8px 22px rgba(15, 23, 42, 0.22);
		z-index: 3;
		display: grid;
		place-items: center;
	}

	.carousel-btn.prev {
		left: 16px;
	}

	.carousel-btn.next {
		right: 16px;
	}

	.carousel-btn:hover {
		background: var(--blue);
		color: white;
	}

	.carousel-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
	}

	.carousel-dot {
		width: 10px;
		height: 10px;
		border-radius: 999px;
		border: 0;
		background: #cbd5e1;
		cursor: pointer;
		transition: 0.2s ease;
	}

	.carousel-dot.active {
		width: 26px;
		background: var(--blue);
	}

	/* =========================================================
	   CART PAGE
	   ========================================================= */

	.cart-layout {
		display: grid;
		grid-template-columns: 1fr 330px;
		gap: 24px;
		align-items: start;
	}

	.cart-items-list {
		display: grid;
		gap: 16px;
	}

	.cart-page-item {
		background: white;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		padding: 16px;
		box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06);
		display: grid;
		grid-template-columns: 120px 1fr 120px 160px;
		gap: 18px;
		align-items: center;
	}

	.cart-page-image {
		width: 120px !important;
		height: 120px !important;
		min-width: 120px !important;
		max-width: 120px !important;
		min-height: 120px !important;
		max-height: 120px !important;
		background: var(--blue-soft);
		border-radius: 14px;
		display: grid;
		place-items: center;
		overflow: hidden;
		font-size: 42px;
	}

	.cart-page-image img {
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		max-height: 100% !important;
		object-fit: contain !important;
		object-position: center !important;
		padding: 10px;
		display: block;
	}

	.cart-page-info h3 {
		margin: 0 0 8px;
		font-size: 18px;
	}

	.cart-page-info h3 a:hover {
		color: var(--blue-dark);
	}

	.cart-page-info p {
		margin: 8px 0 0;
		font-weight: 900;
	}

	.cart-page-qty label {
		display: grid;
		gap: 8px;
		font-weight: 900;
	}

	.cart-page-qty input {
		width: 100%;
		border: 1px solid var(--line);
		border-radius: 12px;
		padding: 10px;
	}

	.cart-page-subtotal {
		display: grid;
		gap: 8px;
		text-align: right;
	}

	.cart-page-subtotal span {
		color: var(--muted);
		font-size: 13px;
	}

	.cart-page-subtotal strong {
		font-size: 18px;
	}

	.cart-remove {
		color: var(--red);
		font-weight: 900;
		font-size: 14px;
	}

	.cart-summary {
		background: white;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		padding: 22px;
		box-shadow: var(--shadow);
		position: sticky;
		top: 120px;
		display: grid;
		gap: 14px;
	}

	.cart-summary h2 {
		margin: 0;
	}

	.cart-summary-total {
		font-size: 30px;
		color: var(--blue-dark);
	}

	.cart-continue {
		text-align: center;
		color: var(--blue);
		font-weight: 900;
	}

    /* =========================================================
       CHECKOUT PAGE
       ========================================================= */

    .checkout-title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 26px;
    }

    .checkout-title-row h1 {
        margin: 6px 0 0;
        font-size: clamp(32px, 4vw, 44px);
    }

    .checkout-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 34px;
        align-items: start;
    }

    .checkout-main {
        display: grid;
        gap: 22px;
    }

    .checkout-card {
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 26px;
    }

    .checkout-card h2 {
        margin: 0 0 20px;
        font-size: 26px;
        color: var(--dark);
    }

    .checkout-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .checkout-form-grid label,
    .checkout-card label {
        display: grid;
        gap: 8px;
        font-weight: 800;
        color: var(--dark);
    }

    .checkout-form-grid input,
    .checkout-card input,
    .checkout-card select,
    .checkout-card textarea {
        width: 100%;
        min-height: 46px;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 11px 13px;
        font-size: 15px;
        background: #ffffff;
        color: var(--dark);
        outline: none;
    }

    .checkout-form-grid input:focus,
    .checkout-card input:focus,
    .checkout-card select:focus,
    .checkout-card textarea:focus {
        border-color: var(--blue);
        box-shadow: 0 0 0 3px rgba(0, 128, 200, 0.14);
    }

    .checkout-full {
        grid-column: 1 / -1;
    }

    /* Saved addresses */

    .checkout-saved-addresses {
        display: grid;
        gap: 12px;
        margin-bottom: 20px;
    }

    .checkout-address-option {
        display: flex !important;
        grid-template-columns: none !important;
        align-items: flex-start;
        gap: 12px;
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 14px;
        background: #f8fafc;
        cursor: pointer;
    }

    .checkout-address-option input {
        width: auto !important;
        min-height: auto !important;
        margin-top: 4px;
    }

    .checkout-address-option span {
        display: grid;
        gap: 4px;
    }

    .checkout-address-option small {
        color: var(--muted);
        font-weight: 500;
    }

    .checkout-address-option.is-default {
        border-color: var(--blue);
        background: var(--blue-soft);
    }

    /* Payment methods */

    .payment-methods {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .payment-method-card {
        display: flex !important;
        grid-template-columns: none !important;
        align-items: flex-start;
        gap: 12px;
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 16px;
        background: #f8fafc;
        cursor: pointer;
        transition: 0.18s ease;
    }

    .payment-method-card:hover {
        border-color: var(--blue);
        background: #eef8ff;
    }

    .payment-method-card input {
        width: auto !important;
        min-height: auto !important;
        margin-top: 4px;
    }

    .payment-method-card span {
        display: grid;
        gap: 5px;
    }

    .payment-method-card strong {
        font-size: 16px;
        color: var(--dark);
    }

    .payment-method-card small {
        color: var(--muted);
        font-weight: 500;
        line-height: 1.45;
    }

    /* Order summary */

    .checkout-summary {
        position: sticky;
        top: 110px;
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 26px;
    }

    .checkout-summary h2 {
        margin: 0 0 20px;
        font-size: 28px;
    }

    .checkout-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 16px;
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
    }

    .checkout-item span {
        color: var(--muted);
        line-height: 1.45;
    }

    .checkout-item strong {
        color: var(--dark);
        white-space: nowrap;
    }

    .checkout-total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 18px;
        margin: 24px 0 18px;
        font-size: 24px;
        font-weight: 900;
    }

    .checkout-total strong {
        font-size: 28px;
    }

    .checkout-summary .primary-btn {
        width: 100%;
        justify-content: center;
        min-height: 54px;
        margin-bottom: 14px;
    }

    .checkout-summary .cart-continue {
        display: block;
        text-align: center;
        font-weight: 900;
        color: var(--blue);
        text-decoration: none;
    }

    .checkout-summary .cart-continue:hover {
        text-decoration: underline;
    }

    /* Responsive checkout */

    @media (max-width: 1050px) {
        .checkout-layout {
            grid-template-columns: 1fr;
        }

        .checkout-summary {
            position: static;
        }
    }

    @media (max-width: 720px) {
        .checkout-title-row {
            display: grid;
        }

        .checkout-form-grid,
        .payment-methods {
            grid-template-columns: 1fr;
        }

        .checkout-card,
        .checkout-summary {
            padding: 20px;
        }

        .checkout-item {
            grid-template-columns: 1fr;
        }

        .checkout-total {
            font-size: 20px;
        }

        .checkout-total strong {
            font-size: 24px;
        }
    }

	/* =========================================================
	   ADMIN
	   ========================================================= */

	.admin-menu {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 18px;
	}

	.admin-menu a {
		background: white;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		padding: 24px;
		font-size: 20px;
		font-weight: 900;
		box-shadow: var(--shadow);
	}

	.admin-tabs {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
		margin-bottom: 22px;
	}

	.admin-tab {
		background: white;
		color: var(--blue-dark);
		border: 1px solid var(--line);
		border-radius: 999px;
		padding: 12px 18px;
		font-weight: 900;
		box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
	}

	.admin-tab:hover,
	.admin-tab.active {
		background: var(--blue);
		border-color: var(--blue);
		color: white;
	}

	.table-wrapper {
		overflow-x: auto;
		background: white;
		border-radius: var(--radius);
		border: 1px solid var(--line);
		box-shadow: var(--shadow);
	}

	.admin-table {
		width: 100%;
		border-collapse: collapse;
	}

	.admin-table th,
	.admin-table td {
		padding: 14px;
		border-bottom: 1px solid var(--line);
		text-align: left;
	}

	.admin-table th {
		background: var(--blue-soft);
	}

	.table-actions {
		display: flex;
		gap: 8px;
		align-items: center;
	}

	.table-actions a {
		color: var(--blue);
		font-weight: 800;
	}

	.table-actions a.danger {
		color: var(--red);
	}

	.action-icon {
		width: 38px;
		height: 38px;
		border-radius: 12px;
		display: inline-grid;
		place-items: center;
		font-size: 17px;
		border: 1px solid var(--line);
		background: white;
		transition: 0.2s ease;
	}

	.action-icon:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
	}

	.action-icon.edit {
		color: var(--blue);
	}

	.action-icon.delete {
		color: var(--red);
	}

	/* =========================================================
	   ADMIN ORDERS
	   ========================================================= */

	.order-status-form {
		display: flex;
		gap: 8px;
		align-items: center;
	}

	.order-status-select {
		border: 1px solid var(--line);
		border-radius: 12px;
		padding: 9px 10px;
		font-weight: 900;
		outline: none;
	}

	.order-status-select.status-pending,
	.order-status-pill.status-pending {
		background: #fff7ed;
		color: #c2410c;
		border-color: #fed7aa;
	}

	.order-status-select.status-paid,
	.order-status-pill.status-paid {
		background: #dcfce7;
		color: #166534;
		border-color: #86efac;
	}

	.order-status-select.status-cancelled,
	.order-status-pill.status-cancelled {
		background: #fee2e2;
		color: #991b1b;
		border-color: #fecaca;
	}

	.order-status-select.status-processing,
	.order-status-pill.status-processing {
		background: #e0f2fe;
		color: #075985;
		border-color: #7dd3fc;
	}

	.order-status-select.status-completed,
	.order-status-pill.status-completed {
		background: #ecfdf5;
		color: #047857;
		border-color: #6ee7b7;
	}

	.small-status-btn {
		min-height: 38px;
		padding: 0 12px;
		font-size: 13px;
	}

	.order-detail-card {
		margin-top: 22px;
		background: white;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		padding: 24px;
		box-shadow: var(--shadow);
	}

	.order-detail-header {
		display: flex;
		justify-content: space-between;
		gap: 18px;
		align-items: start;
	}

	.order-detail-header h1 {
		margin: 8px 0 0;
	}

	.order-status-pill {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		border-radius: 999px;
		padding: 9px 14px;
		font-size: 13px !important;
		font-weight: 900;
		border: 1px solid var(--line);
		white-space: nowrap;
		text-transform: none !important;
	}

	.order-customer-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
		margin-top: 24px;
	}

	.order-customer-grid h3 {
		margin-top: 0;
	}

	/* =========================================================
	   FORMS
	   ========================================================= */

	.admin-form {
		background: white;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		padding: 24px;
		box-shadow: var(--shadow);
		display: grid;
		gap: 16px;
	}

	.admin-form label {
		display: grid;
		gap: 8px;
		font-weight: 800;
	}

	.admin-form input,
	.admin-form textarea,
	.admin-form select {
		width: 100%;
		border: 1px solid var(--line);
		border-radius: 12px;
		padding: 12px;
		outline: none;
	}

	.admin-form input:focus,
	.admin-form textarea:focus,
	.admin-form select:focus {
		border-color: var(--blue);
	}

	.checkbox {
		display: flex !important;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 10px;
	}

	.checkbox input {
		width: auto;
	}

	.form-actions {
		display: flex;
		gap: 12px;
	}

	.secondary-btn {
		border: 1px solid var(--blue);
		background: white;
		color: var(--blue-dark);
		border-radius: 12px;
		min-height: 44px;
		padding: 0 18px;
		font-weight: 800;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.secondary-btn:hover {
		background: var(--blue-soft);
	}

	/* =========================================================
	   ALERTS
	   ========================================================= */

	.alert {
		padding: 14px;
		border-radius: 12px;
		margin-bottom: 18px;
	}

	.alert.error {
		background: #fee2e2;
		color: #991b1b;
	}

	.alert.success {
		background: #dcfce7;
		color: #166534;
		padding: 14px;
		border-radius: 12px;
		margin-bottom: 18px;
	}

	/* =========================================================
       USER SHIPPING ADDRESSES - CLEAN ORGANIZED LAYOUT
       ========================================================= */

    #shipping-addresses {
        scroll-margin-top: 120px;
    }

    .shipping-address-layout {
        display: grid;
        grid-template-columns: 360px minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }

    /* Left form card */

    .shipping-address-form {
        background: var(--blue-soft);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 22px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        position: sticky;
        top: 120px;
    }

    .shipping-address-form h3 {
        margin: 0 0 6px;
        font-size: 22px;
        color: var(--dark);
    }

    .shipping-address-form label {
        display: grid;
        gap: 7px;
        font-weight: 800;
        font-size: 14px;
        color: var(--dark);
    }

    .shipping-address-form input {
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 11px 12px;
        outline: none;
        background: white;
        font-size: 15px;
    }

    .shipping-address-form input:focus {
        border-color: var(--blue);
        box-shadow: 0 0 0 3px rgba(0, 128, 200, 0.12);
    }

    .shipping-address-form .checkbox {
        margin-top: 4px;
        padding: 10px 12px;
        background: white;
        border: 1px solid var(--line);
        border-radius: 12px;
    }

    .shipping-address-form .primary-btn {
        width: 100%;
        margin-top: 4px;
    }

    /* Right saved addresses area */

    .shipping-address-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .shipping-address-list .empty-orders-box {
        grid-column: 1 / -1;
    }

    .shipping-address-card {
        background: white;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 18px;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
        display: grid;
        gap: 14px;
        position: relative;
    }

    .shipping-address-card.is-default {
        border-color: var(--blue);
        box-shadow: 0 0 0 3px rgba(0, 128, 200, 0.12);
    }

    .shipping-address-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 14px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--line);
    }

    .shipping-address-top h3 {
        margin: 4px 0 0;
        font-size: 18px;
        line-height: 1.25;
    }

    .default-address-badge {
        background: var(--blue);
        color: white;
        border-radius: 999px;
        padding: 7px 11px;
        font-size: 11px;
        font-weight: 900;
        white-space: nowrap;
    }

    .shipping-address-card p {
        color: var(--muted);
        line-height: 1.55;
        margin: 0;
        font-size: 15px;
    }

    .shipping-address-card strong {
        color: var(--dark);
    }

    .shipping-address-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 4px;
    }

    .shipping-address-actions .secondary-btn {
        min-height: 38px;
        padding: 0 13px;
        font-size: 13px;
    }

    .danger-link {
        border-color: var(--red);
        color: var(--red);
    }

    .danger-link:hover {
        background: #fee2e2;
    }

    /* Better spacing inside My Account */

    .account-panel#shipping-addresses .account-panel-header {
        margin-bottom: 22px;
    }

    .account-panel#shipping-addresses .alert {
        margin-bottom: 18px;
    }

    /* Responsive */

    @media (max-width: 1150px) {
        .shipping-address-layout {
            grid-template-columns: 1fr;
        }

        .shipping-address-form {
            position: static;
        }
    }

    @media (max-width: 760px) {
        .shipping-address-list {
            grid-template-columns: 1fr;
        }

        .shipping-address-top {
            flex-direction: column;
        }
    }

	.shipping-form-title {
        display: grid;
        gap: 4px;
        margin-bottom: 4px;
    }

    .shipping-form-title h3 {
        margin: 0;
    }

    .shipping-form-title p {
        margin: 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.45;
    }

	/* =========================================================
	   PRODUCT IMAGE ADMIN
	   ========================================================= */

	.current-product-image {
		display: grid;
		gap: 10px;
		background: var(--blue-soft);
		border: 1px solid var(--line);
		border-radius: 14px;
		padding: 14px;
	}

	.current-product-image span {
		font-weight: 900;
		color: var(--blue-dark);
	}

	.current-product-image img {
		width: 180px;
		max-height: 160px;
		object-fit: contain;
		background: white;
		border: 1px solid var(--line);
		border-radius: 12px;
		padding: 10px;
	}

	.admin-gallery {
		background: var(--blue-soft);
		border: 1px solid var(--line);
		border-radius: 14px;
		padding: 16px;
	}

	.admin-gallery h3 {
		margin-top: 0;
	}

	.admin-gallery-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
		gap: 14px;
	}

	.admin-gallery-item {
		position: relative;
		background: white;
		border: 1px solid var(--line);
		border-radius: 14px;
		padding: 10px;
	}

	.admin-gallery-item img {
		width: 100%;
		height: 110px;
		object-fit: contain;
	}

	.delete-image-btn {
		position: absolute;
		top: 8px;
		right: 8px;
		width: 34px;
		height: 34px;
		display: grid;
		place-items: center;
		background: white;
		color: var(--red);
		border: 1px solid var(--line);
		border-radius: 10px;
		box-shadow: 0 8px 18px rgba(15, 23, 42, 0.15);
	}

	.admin-gallery-item.main-image-selected {
		border-color: var(--blue);
		box-shadow: 0 0 0 3px rgba(0, 128, 200, 0.14);
	}

	.main-image-check {
		margin-top: 10px;
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: 8px;
		font-size: 13px;
		font-weight: 900;
		color: var(--blue-dark);
		cursor: pointer;
	}

	.main-image-check input {
		width: auto !important;
		accent-color: var(--blue);
	}

	/* =========================================================
	   BANNER MANAGER
	   ========================================================= */

	.admin-banners-list {
		margin-top: 30px;
	}

	.admin-banner-thumb {
		width: 180px;
		height: 70px;
		object-fit: cover;
		border-radius: 12px;
		border: 1px solid var(--line);
		background: var(--blue-soft);
	}

	.current-banner-preview {
		display: grid;
		gap: 10px;
		background: var(--blue-soft);
		border: 1px solid var(--line);
		border-radius: 14px;
		padding: 14px;
	}

	.current-banner-preview span {
		font-weight: 900;
		color: var(--blue-dark);
	}

	.current-banner-preview img {
		width: 100%;
		max-height: 180px;
		object-fit: cover;
		border-radius: 12px;
		background: white;
		border: 1px solid var(--line);
	}

	/* =========================================================
	   MY ACCOUNT DASHBOARD
	   ========================================================= */

	.account-title-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 18px;
		margin-bottom: 24px;
	}

	.account-title-row h1 {
		margin: 6px 0 0;
	}

	.account-dashboard {
		display: grid !important;
		grid-template-columns: 320px minmax(0, 1fr) !important;
		gap: 24px !important;
		align-items: start !important;
	}

	.account-profile-card {
		background: white;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		padding: 24px;
		position: sticky;
		top: 120px;
	}

	.account-user-card {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 16px;
		border-radius: 18px;
		background: var(--blue-soft);
		margin-bottom: 18px;
	}

	.account-avatar {
		width: 58px;
		height: 58px;
		border-radius: 18px;
		background: var(--blue);
		color: white;
		display: grid;
		place-items: center;
		font-size: 26px;
		font-weight: 900;
		flex: 0 0 auto;
	}

	.account-user-card strong {
		display: block;
		font-size: 17px;
		margin-bottom: 4px;
	}

	.account-user-card span {
		display: block;
		color: var(--muted);
		font-size: 14px;
		word-break: break-word;
	}

	.account-quick-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.account-quick-item {
		display: grid;
		gap: 5px;
		padding: 13px;
		border-radius: 15px;
		border: 1px solid var(--line);
		background: #f8fafc;
	}

	.account-quick-item span {
		color: var(--muted);
		font-size: 13px;
		font-weight: 800;
	}

	.account-quick-item strong {
		color: var(--dark);
		font-size: 14px;
		line-height: 1.35;
		word-break: break-word;
	}

	.account-logout-btn {
		width: 100%;
		margin-top: 18px;
	}

	.account-main-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 24px;
		min-width: 0;
	}

	.account-panel {
		background: white;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		padding: 24px;
		min-width: 0;
	}

	.account-panel-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 16px;
		margin-bottom: 20px;
	}

	.account-panel-header h2 {
		margin: 5px 0 0;
	}

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

	.account-form-grid label {
		display: grid;
		gap: 8px;
		font-weight: 800;
	}

	.account-form-grid input {
		width: 100%;
		border: 1px solid var(--line);
		border-radius: 12px;
		padding: 12px;
		outline: none;
	}

	.account-form-grid input:focus {
		border-color: var(--blue);
	}

	.account-form-grid label:nth-child(6) {
		grid-column: 1 / -1;
	}

	.account-form-actions {
		grid-column: 1 / -1;
		display: flex;
		justify-content: flex-start;
	}

	.account-orders-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.account-order-card {
		border: 1px solid var(--line);
		border-radius: 18px;
		background: white;
		padding: 18px;
		display: grid;
		gap: 16px;
		box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
	}

	.account-order-top {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 16px;
		border-bottom: 1px solid var(--line);
		padding-bottom: 14px;
	}

	.account-order-top span {
		display: block;
		color: var(--muted);
		font-size: 12px;
		font-weight: 900;
		text-transform: uppercase;
	}

	.account-order-top strong {
		display: block;
		margin-top: 4px;
		font-size: 18px;
	}

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

	.account-order-data div {
		display: grid;
		gap: 5px;
		padding: 12px;
		border: 1px solid var(--line);
		border-radius: 14px;
		background: #f8fafc;
	}

	.account-order-data span {
		color: var(--muted);
		font-size: 12px;
		font-weight: 900;
	}

	.account-order-data strong {
		font-size: 14px;
		line-height: 1.35;
		word-break: break-word;
	}

	.account-order-actions {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
	}

	.account-order-actions .primary-btn,
	.account-order-actions .secondary-btn {
		min-height: 40px;
	}

	.empty-orders-box {
		background: var(--blue-soft);
		border: 1px solid var(--line);
		border-radius: 18px;
		padding: 28px;
		text-align: center;
	}

	.empty-orders-box h3 {
		margin-top: 0;
	}

    /* =========================================================
       PROFESSIONAL INVOICE PAGE
       ========================================================= */

    .invoice-actions {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 22px;
    }

    .invoice-document {
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 34px;
    }

    .invoice-document-top {
        display: flex;
        justify-content: space-between;
        gap: 28px;
        align-items: flex-start;
        border-bottom: 2px solid var(--blue);
        padding-bottom: 26px;
        margin-bottom: 26px;
    }

    .invoice-company {
        display: flex;
        gap: 18px;
        align-items: flex-start;
    }

    .invoice-logo {
        width: 150px;
        height: auto;
        object-fit: contain;
    }

    .invoice-company h1 {
        margin: 0 0 8px;
        font-size: 30px;
    }

    .invoice-company p {
        margin: 3px 0;
        color: var(--muted);
        line-height: 1.45;
    }

    .invoice-title-box {
        min-width: 260px;
        text-align: right;
    }

    .invoice-label {
        display: inline-flex;
        background: var(--blue-soft);
        color: var(--blue);
        border-radius: 999px;
        padding: 7px 12px;
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .invoice-title-box h2 {
        margin: 12px 0;
        font-size: 26px;
    }

    .invoice-status {
        display: inline-flex;
        border-radius: 999px;
        padding: 8px 12px;
        font-size: 13px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .invoice-status.paid {
        background: #dcfce7;
        color: #166534;
    }

    .invoice-status.pending {
        background: #fef3c7;
        color: #92400e;
    }

    .invoice-status.cancelled {
        background: #fee2e2;
        color: #991b1b;
    }

    .invoice-info-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        margin-bottom: 26px;
    }

    .invoice-info-card {
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 18px;
        background: #f8fafc;
    }

    .invoice-info-card h3 {
        margin: 0 0 12px;
        font-size: 17px;
    }

    .invoice-info-card p {
        margin: 5px 0;
        color: #334155;
        line-height: 1.55;
    }

    .invoice-table-wrapper {
        overflow-x: auto;
        border: 1px solid var(--line);
        border-radius: 16px;
    }

    .invoice-professional-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 720px;
    }

    .invoice-professional-table th {
        background: var(--blue-soft);
        color: var(--dark);
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        text-align: left;
        padding: 14px;
        border-bottom: 1px solid var(--line);
    }

    .invoice-professional-table td {
        padding: 16px 14px;
        border-bottom: 1px solid var(--line);
        color: #334155;
    }

    .invoice-professional-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .invoice-bottom {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 24px;
        align-items: start;
        margin-top: 26px;
    }

    .invoice-note {
        background: #f8fafc;
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 18px;
    }

    .invoice-note h3 {
        margin: 0 0 10px;
        font-size: 17px;
    }

    .invoice-note p {
        margin: 0;
        color: var(--muted);
        line-height: 1.55;
    }

    .invoice-totals {
        border: 1px solid var(--line);
        border-radius: 16px;
        overflow: hidden;
        background: white;
    }

    .invoice-totals div {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--line);
    }

    .invoice-totals div:last-child {
        border-bottom: 0;
    }

    .invoice-totals span {
        color: var(--muted);
    }

    .invoice-totals strong {
        color: var(--dark);
    }

    .invoice-grand-total {
        background: var(--blue);
        color: white;
    }

    .invoice-grand-total span,
    .invoice-grand-total strong {
        color: white;
        font-size: 19px;
        font-weight: 900;
    }

    @media (max-width: 900px) {
        .invoice-document {
            padding: 22px;
        }

        .invoice-document-top {
            flex-direction: column;
        }

        .invoice-title-box {
            text-align: left;
            min-width: 0;
        }

        .invoice-info-grid {
            grid-template-columns: 1fr;
        }

        .invoice-bottom {
            grid-template-columns: 1fr;
        }
    }

    @media print {
        .top-bar,
        .main-header,
        .site-footer,
        .footer,
        .invoice-actions,
        .no-print {
            display: none !important;
        }

        body {
            background: white !important;
        }

        .container {
            max-width: 100% !important;
            width: 100% !important;
        }

        .page {
            padding: 0 !important;
        }

        .invoice-document {
            box-shadow: none !important;
            border: 0 !important;
            padding: 0 !important;
        }

        .invoice-table-wrapper {
            overflow: visible;
        }
    }

	/* =========================================================
	   FOOTER - SLIM VERSION
	   ========================================================= */

	.footer {
		margin-top: 42px;
		background: white;
		color: #000;
		border-top: 1px solid var(--line);
	}

	.footer-top-line {
		height: 4px;
		background: linear-gradient(
			90deg,
			#1f4378 0%,
			#1f4378 18%,
			#4b78b4 18%,
			#4b78b4 36%,
			#17324f 36%,
			#17324f 54%,
			#1f4378 54%,
			#1f4378 72%,
			#4b78b4 72%,
			#4b78b4 88%,
			#17324f 88%,
			#17324f 100%
		);
	}

	.footer-content {
		display: grid;
		grid-template-columns: 1.05fr 1fr 1.1fr 1fr;
		gap: 34px;
		padding: 26px 0 28px;
	}

	.footer-column h3 {
		margin: 0 0 12px;
		font-size: 20px;
		line-height: 1.15;
		color: #000;
	}

	.footer-column p {
		margin: 0 0 12px;
		color: #111827;
		font-size: 14px;
		line-height: 1.45;
	}

	.footer-links {
		display: grid;
		gap: 4px;
		margin-top: 6px;
	}

	.footer-links a {
		color: #3f6fb5;
		text-decoration: underline;
		font-size: 14px;
	}

	.footer-links a:hover {
		color: var(--blue-dark);
	}

	.footer-contact {
		margin-top: 24px;
		padding-top: 16px;
		border-top: 1px solid var(--line);
		display: grid;
		gap: 10px;
	}

	.footer-contact p {
		margin: 0;
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.footer-contact-icon {
		width: 26px;
		height: 26px;
		color: #4b78b4;
		font-size: 21px;
		display: grid;
		place-items: center;
	}

	.footer-contact a {
		color: #4b78b4;
		font-size: 20px;
		font-weight: 600;
	}

	.footer-newsletter {
		display: grid;
		gap: 8px;
		margin-top: 10px;
	}

	.footer-newsletter input {
		width: 100%;
		height: 40px;
		border: 1px solid #cfcfcf;
		border-radius: 6px;
		padding: 0 12px;
		font-size: 14px;
		outline: none;
	}

	.footer-newsletter input:focus {
		border-color: var(--blue);
	}

	.footer-newsletter button {
		justify-self: end;
		border: 0;
		background: #4b78b4;
		color: white;
		min-height: 40px;
		border-radius: 6px;
		padding: 0 16px;
		font-size: 15px;
		font-weight: 700;
		cursor: pointer;
	}

	.footer-newsletter button:hover {
		background: var(--blue-dark);
	}

	.footer-social {
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid var(--line);
		display: flex;
		justify-content: flex-start;
		gap: 18px;
	}

	.footer-social a {
		width: 30px;
		height: 30px;
		display: grid;
		place-items: center;
		color: #1f4378;
	}

	.footer-social svg {
		width: 23px;
		height: 23px;
		fill: currentColor;
	}

	.footer-social a:hover {
		color: var(--blue);
	}

	.footer-awards {
		margin-top: 20px;
		display: flex;
		align-items: center;
		gap: 14px;
	}

	.footer-award-box {
		min-width: 94px;
		min-height: 62px;
		border: 1px solid #d94b42;
		border-left: 0;
		border-right: 0;
		color: #d7372f;
		display: grid;
		place-items: center;
		text-align: center;
		padding: 6px;
	}

	.footer-award-box strong {
		font-size: 25px;
		line-height: 0.9;
	}

	.footer-award-box span {
		font-size: 10px;
		font-weight: 800;
		line-height: 1.15;
	}

	.footer-award-box:nth-child(2) {
		border-color: #2f65b0;
		color: #2f65b0;
	}

	.footer-bottom {
		border-top: 2px solid #000;
		padding: 10px 0 12px;
		text-align: center;
	}

	.footer-bottom p {
		margin: 0;
		font-size: 13px;
		color: #000;
		line-height: 1.45;
	}

	.footer-designer {
		margin-top: 5px !important;
		color: #4b78b4 !important;
		font-size: 12px !important;
		font-weight: 700;
	}

	/* Footer responsive */

	@media (max-width: 1100px) {
		.footer-content {
			grid-template-columns: repeat(2, 1fr);
			gap: 26px;
		}
	}

	@media (max-width: 650px) {
		.footer-content {
			grid-template-columns: 1fr;
			padding: 24px 0;
		}

		.footer-contact a {
			font-size: 18px;
		}

		.footer-social {
			justify-content: flex-start;
		}

		.footer-bottom p {
			font-size: 12px;
		}
	}
	
	/* =========================================================
	   ABOUT PAGE
	   ========================================================= */

	.about-page {
		background: white;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		padding: 42px;
	}

	.about-content {
		max-width: 980px;
	}

	.about-content h1 {
		margin: 10px 0 24px;
		font-size: clamp(24px, 5vw, 28px);
		line-height: 1.05;
	}

	.about-content p {
		color: #111827;
		font-size: 16px;
		line-height: 1.7;
		margin: 0 0 18px;
	}

	.about-awards {
		display: flex;
		align-items: center;
		gap: 38px;
		margin-top: 42px;
		flex-wrap: wrap;
	}

	.about-award-card {
		background: #ffffff;
		border: 1px solid var(--line);
		border-radius: 18px;
		padding: 20px;
		box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
	}

	.about-award-card img {
		display: block;
		max-width: 320px;
		max-height: 190px;
		width: auto;
		height: auto;
		object-fit: contain;
	}

	@media (max-width: 700px) {
		.about-page {
			padding: 26px;
		}

		.about-content p {
			font-size: 16px;
		}

		.about-awards {
			gap: 18px;
		}

		.about-award-card {
			width: 100%;
		}

		.about-award-card img {
			max-width: 100%;
			margin: auto;
		}
	}
	
	/* =========================================================
	   ABOUT COMPANY INFO + OPENING HOURS
	   ========================================================= */

	.about-info-grid {
		margin-top: 34px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		align-items: stretch;
	}

	.about-company-info,
	.about-opening-hours {
		background: var(--blue-soft);
		border: 1px solid var(--line);
		border-radius: var(--radius);
		padding: 24px;
	}

	.about-company-info h2,
	.about-opening-hours h2 {
		margin: 0 0 16px;
		font-size: clamp(24px, 3vw, 26px);
		line-height: 1.15;
	}

	.about-company-info ul,
	.about-opening-hours ul {
		margin: 0;
		padding-left: 24px;
		display: grid;
		gap: 8px;
	}

	.about-company-info li,
	.about-opening-hours li {
		font-size: 15px;
		line-height: 1.45;
		color: #111827;
	}

	.about-company-info strong {
		color: var(--dark);
	}

	.opening-hours-block {
		margin-top: 18px;
	}

	.opening-hours-block:first-of-type {
		margin-top: 0;
	}

	.opening-hours-block h3 {
		margin: 0 0 10px;
		font-size: 16px;
		line-height: 1.35;
		color: var(--dark);
	}

	@media (max-width: 900px) {
		.about-info-grid {
			grid-template-columns: 1fr;
		}
	}
	
	/* =========================================================
	   DELIVERY INFO IN HOW TO ORDER PAGE
	   ========================================================= */

	.delivery-info-box {
		margin-top: 42px;
		background: var(--blue-soft);
		border: 1px solid var(--line);
		border-radius: var(--radius);
		padding: 28px;
	}

	.delivery-info-box h2 {
		margin-top: 0;
	}

	.delivery-info-box h3 {
		margin: 26px 0 14px;
		font-size: 20px;
	}

	.delivery-options-list {
		margin: 0;
		padding-left: 28px;
		display: grid;
		gap: 14px;
		font-size: 15px;
		line-height: 1.55;
	}

	.delivery-options-list > li {
		padding-left: 6px;
	}

	.delivery-options-list ul {
		margin-top: 6px;
		padding-left: 24px;
		display: grid;
		gap: 4px;
	}

	.delivery-question-block {
		margin-top: 30px;
	}

	.delivery-question-block p {
		max-width: 1100px;
	}

	.delivery-question-block a {
		color: var(--blue-dark);
		font-weight: 800;
		text-decoration: underline;
	}

	.delivery-note {
		margin-top: 34px !important;
		font-size: 15px !important;
		color: var(--dark) !important;
		font-weight: 700;
	}

	@media (max-width: 700px) {
		.delivery-info-box {
			padding: 22px;
		}

		.delivery-options-list {
			font-size: 16px;
		}
	}
	
	/* =========================================================
	   SERVICE WORKSHOP PAGE
	   ========================================================= */

	.service-workshop-page p {
		margin-bottom: 18px;
	}

	.service-workshop-list {
		margin: 18px 0 0;
		padding-left: 28px;
		display: grid;
		gap: 8px;
		color: #111827;
		font-size: 15px;
		line-height: 1.55;
	}

	.service-workshop-list li {
		padding-left: 4px;
	}

	.service-price-section,
	.service-note-section {
		margin-top: 28px;
	}

	.service-price-section h2,
	.service-note-section h2 {
		margin: 0 0 12px;
		font-size: 18px;
	}

	.service-workshop-image {
		margin-top: 42px;
		border-radius: var(--radius);
		overflow: hidden;
		border: 1px solid var(--line);
		box-shadow: var(--shadow);
		background: white;
	}

	.service-workshop-image img {
		width: 100%;
		max-height: 520px;
		object-fit: cover;
		object-position: center;
		display: block;
	}

	@media (max-width: 700px) {
		.service-workshop-list {
			font-size: 16px;
		}

		.service-workshop-image img {
			max-height: 320px;
		}
	}
	
	/* =========================================================
	   CONTACT SUGGESTION FORM
	   ========================================================= */

	.suggestion-form-card {
		margin-top: 30px;
		background: white;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		padding: 28px;
	}

	.suggestion-form-header {
		margin-bottom: 22px;
	}

	.suggestion-form-header h2 {
		margin: 6px 0 10px;
		font-size: clamp(26px, 4vw, 34px);
	}

	.suggestion-form-header p {
		margin: 0;
		color: var(--muted);
		font-size: 16px;
		line-height: 1.55;
	}

	.suggestion-form {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.suggestion-form label {
		display: grid;
		gap: 8px;
		font-weight: 800;
	}

	.suggestion-form input,
	.suggestion-form textarea {
		width: 100%;
		border: 1px solid var(--line);
		border-radius: 12px;
		padding: 12px;
		outline: none;
		font-size: 15px;
	}

	.suggestion-form input:focus,
	.suggestion-form textarea:focus {
		border-color: var(--blue);
	}

	.suggestion-full {
		grid-column: 1 / -1;
	}

	.recaptcha-box {
		overflow-x: auto;
	}

	@media (max-width: 700px) {
		.suggestion-form {
			grid-template-columns: 1fr;
		}

		.suggestion-full {
			grid-column: auto;
		}

		.suggestion-form-card {
			padding: 22px;
		}
	}
	
	/* =========================================================
	   INFO PAGES
	   ========================================================= */

	.info-page {
		background: white;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		padding: 42px;
	}

	.info-page h1 {
		margin: 10px 0 24px;
		font-size: clamp(34px, 5vw, 28px);
		line-height: 1.05;
	}

	.info-page h2 {
		margin: 34px 0 16px;
		font-size: 25px;
	}

	.info-page p {
		color: #111827;
		font-size: 16px;
		line-height: 1.7;
		margin: 0;
		max-width: 1100px;
	}

	.info-steps {
		margin: 0;
		padding-left: 28px;
		color: #111827;
		font-size: 16px;
		line-height: 1.7;
	}

	.info-steps li {
		padding-left: 6px;
	}

	@media (max-width: 700px) {
		.info-page {
			padding: 26px;
		}

		.info-page p,
		.info-steps {
			font-size: 16px;
		}

		.info-page h2 {
			font-size: 24px;
		}
	}
	
	/* =========================================================
	   CORPORATE PAGE
	   ========================================================= */

	.corporate-block {
		margin-top: 32px;
	}

	.corporate-block h2 {
		margin: 0 0 14px;
		font-size: clamp(26px, 4vw, 26px);
		line-height: 1.15;
	}

	.corporate-contact-box {
		margin-top: 38px;
		background: var(--blue-soft);
		border: 1px solid var(--line);
		border-radius: var(--radius);
		padding: 24px;
	}

	.corporate-contact-box h3 {
		margin: 0 0 12px;
		font-size: 18px;
	}

	.corporate-contact-box p {
		margin-bottom: 18px;
	}

	.corporate-contact-actions {
		display: flex;
		gap: 12px;
		flex-wrap: wrap;
	}
	
	/* =========================================================
	   TERMS PAGE
	   ========================================================= */

	.terms-page {
		max-width: 1180px;
	}

	.terms-section {
		margin-top: 34px;
	}

	.terms-section h2 {
		margin: 0 0 12px;
		font-size: clamp(25px, 4vw, 26px);
		line-height: 1.15;
	}

	.terms-section p {
		max-width: 1120px;
	}

	.terms-signature {
		margin-top: 42px;
		color: #111827;
		font-size: 16px;
		line-height: 1.65;
		font-weight: 700;
	}

	/* =========================================================
	   PRINT
	   ========================================================= */

	@media print {
		.top-bar,
		.main-header,
		.footer,
		.invoice-actions {
			display: none !important;
		}

		body {
			background: white;
		}

		.invoice-page {
			box-shadow: none;
			border: 0;
		}
	}

	/* =========================================================
	   RESPONSIVE
	   ========================================================= */

	@media (max-width: 1180px) {
		.shop-page-layout {
			grid-template-columns: 300px 1fr;
		}

		.product-grid,
		.homepage-product-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.homepage-banner {
			height: 170px;
		}
	}

	@media (max-width: 1100px) {
		.header-content {
			grid-template-columns: 1fr;
			padding: 14px 0;
		}

		.logo-image-link {
			justify-content: center;
			max-width: 100%;
		}

		.site-logo {
			max-width: 220px;
		}

		.icon-nav {
			justify-content: center;
			flex-wrap: wrap;
		}

		.hero-content,
		.product-detail {
			grid-template-columns: 1fr;
		}

		.hero-card.featured-product-card {
			max-height: none;
			min-height: 260px;
		}

		.featured-product-image {
			height: 150px;
			max-height: 150px;
		}

		.category-grid {
			grid-template-columns: repeat(3, 1fr);
		}

		.top-bar-content {
			flex-wrap: wrap;
			padding: 8px 0;
		}

		.shop-page-layout {
			grid-template-columns: 1fr;
		}

		.category-sidebar {
			position: relative;
			top: auto;
			max-height: 460px;
		}

		.cart-layout,
		.checkout-layout {
			grid-template-columns: 1fr;
		}

		.cart-summary,
		.checkout-summary {
			position: static;
		}

		.cart-page-item {
			grid-template-columns: 100px 1fr;
		}

		.cart-page-image {
			width: 100px !important;
			height: 100px !important;
			min-width: 100px !important;
			max-width: 100px !important;
			min-height: 100px !important;
			max-height: 100px !important;
		}

		.cart-page-qty,
		.cart-page-subtotal {
			grid-column: 1 / -1;
			text-align: left;
		}
	}

	@media (max-width: 1050px) {
		.account-dashboard {
			grid-template-columns: 1fr !important;
		}

		.account-profile-card {
			position: static;
		}

		.order-customer-grid {
			grid-template-columns: 1fr;
		}

		.order-status-form {
			flex-direction: column;
			align-items: stretch;
		}

		.order-detail-header {
			flex-direction: column;
		}
	}

	@media (max-width: 800px) {
		.invoice-header {
			flex-direction: column;
		}

		.invoice-meta {
			text-align: left;
		}
	}

	@media (max-width: 760px) {
		.account-title-row {
			flex-direction: column;
			align-items: stretch;
		}

		.account-form-grid {
			grid-template-columns: 1fr;
		}

		.account-form-grid label:nth-child(6),
		.account-form-actions {
			grid-column: auto;
		}

		.account-order-data {
			grid-template-columns: 1fr;
		}

		.account-order-top {
			flex-direction: column;
		}
	}

	@media (max-width: 700px) {
		.carousel-main {
			height: 340px;
		}

		.carousel-slide img {
			padding: 18px;
		}

		.carousel-btn {
			width: 40px;
			height: 40px;
			font-size: 30px;
		}
	}

	@media (max-width: 650px) {
		.category-grid,
		.product-grid,
		.homepage-product-grid,
		.footer-content,
		.admin-menu {
			grid-template-columns: 1fr;
		}

		.search-form {
			grid-template-columns: 1fr;
		}

		.section-header,
		.admin-header,
		.form-actions {
			align-items: stretch;
			flex-direction: column;
		}

		.hero-content > div:first-child {
			padding: 26px;
		}

		.hero h1 {
			font-size: 34px;
		}

		.product-detail {
			padding: 18px;
		}

		.sidebar-category-header {
			font-size: 17px;
		}

		.sidebar-subcategory {
			font-size: 16px;
			padding-left: 52px;
		}

		.search-info {
			flex-direction: column;
		}

		.homepage-banner {
			height: 150px;
		}

		.homepage-product-card {
			min-height: auto;
		}
	}

	@media (max-width: 600px) {
		.cart-page-item {
			grid-template-columns: 90px 1fr;
		}

		.cart-page-image {
			width: 90px !important;
			height: 90px !important;
			min-width: 90px !important;
			max-width: 90px !important;
			min-height: 90px !important;
			max-height: 90px !important;
		}

		.cart-page-qty,
		.cart-page-subtotal {
			grid-column: 1 / -1;
		}
	}

/* =========================================================
   HOMEPAGE OFFER PRICE - KEEP ORIGINAL CARD STYLE
   ========================================================= */

.homepage-product-card {
    position: relative;
}

.homepage-product-card .discount-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #ffffff;
    border: 1px solid #d7d7d7;
    color: #ef2b2b;
    min-width: 118px;
    min-height: 38px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 6;
    text-transform: uppercase;
    border-radius: 0;
    box-shadow: none;
}

.homepage-product-card .discount-badge strong {
    color: #ef2b2b;
    font-size: 19px;
    line-height: 1;
    font-weight: 900;
}

.homepage-product-card .discount-badge span {
    color: #ef2b2b;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.homepage-product-card .product-price-box {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.homepage-product-card .product-price-box .offer-price {
    color: #ef2b2b;
    font-weight: 900;
}

.homepage-product-card .product-price-box .old-price {
    color: #111827;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    font-size: 18px;
    font-weight: 500;
}

.homepage-product-card .product-meta {
    align-items: flex-end;
}



/* =========================================================
   PRODUCT MANUFACTURER / NUMBERS
   ========================================================= */

.admin-form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.product-identifiers-box {
    margin: 22px 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fafc;
    padding: 18px;
}

.product-identifiers-box h3 {
    margin: 0 0 14px;
    font-size: 18px;
}

.product-identifiers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.product-identifiers-grid div {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 13px;
}

.product-identifiers-grid span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.product-identifiers-grid strong {
    color: var(--dark);
    font-size: 15px;
    word-break: break-word;
}

@media (max-width: 850px) {
    .admin-form-grid-3,
    .product-identifiers-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   PRODUCT WARRANTY / SPECIFICATIONS / RELATED PRODUCTS
   ========================================================= */

.admin-form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-specifications-box {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #f8fafc;
    padding: 20px;
    display: grid;
    gap: 16px;
}

.admin-specifications-box h2 {
    margin: 0;
    font-size: 22px;
}

.admin-spec-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.admin-spec-row input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 12px;
    font-size: 14px;
}

.product-specifications-section {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 26px;
    margin-top: 26px;
}

.product-specifications-section h2 {
    margin: 0 0 18px;
    font-size: 26px;
}

.product-specifications-table {
    width: 100%;
    border-collapse: collapse;
}

.product-specifications-table tr {
    border-bottom: 1px solid var(--line);
}

.product-specifications-table tr:last-child {
    border-bottom: 0;
}

.product-specifications-table th,
.product-specifications-table td {
    padding: 14px 12px;
    text-align: left;
    vertical-align: top;
}

.product-specifications-table th {
    width: 34%;
    color: var(--muted);
    font-weight: 900;
    background: #f8fafc;
}

.product-specifications-table td {
    color: var(--dark);
    font-weight: 700;
}

.related-products-section {
    margin-top: 34px;
}

.related-products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.related-product-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px;
    text-decoration: none;
    color: var(--dark);
    display: grid;
    gap: 12px;
    transition: 0.18s ease;
}

.related-product-card:hover {
    transform: translateY(-2px);
    border-color: var(--blue);
}

.related-product-image {
    height: 160px;
    background: #f8fafc;
    border-radius: 16px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.related-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
}

.related-product-card strong {
    font-size: 15px;
    line-height: 1.35;
}

.related-product-card span {
    color: var(--blue);
    font-weight: 900;
}

@media (max-width: 950px) {
    .admin-form-grid-2,
    .admin-spec-row,
    .related-products-grid {
        grid-template-columns: 1fr;
    }

    .product-specifications-table th,
    .product-specifications-table td {
        display: block;
        width: 100%;
    }

    .product-specifications-table th {
        border-bottom: 0;
        padding-bottom: 4px;
    }

    .product-specifications-table td {
        padding-top: 4px;
    }
}


/* =========================================================
   SPECIFICATIONS DROPDOWN ROWS
   ========================================================= */

.admin-spec-row-dropdown {
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
}

.admin-spec-row select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 12px;
    font-size: 14px;
    background: #ffffff;
    color: var(--dark);
}

.admin-spec-row select:focus,
.admin-spec-row input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(0, 128, 200, 0.14);
    outline: none;
}

@media (max-width: 950px) {
    .admin-spec-row-dropdown {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   RELATED PRODUCTS - FIX SIZE
   ========================================================= */

.related-products-section {
    margin-top: 34px;
    margin-bottom: 40px;
}

.related-products-section .section-header {
    margin-bottom: 18px;
}

.related-products-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.related-product-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 14px;
    text-decoration: none;
    color: var(--dark);
    display: grid;
    gap: 10px;
    min-height: auto !important;
    transition: 0.18s ease;
}

.related-product-card:hover {
    transform: translateY(-2px);
    border-color: var(--blue);
}

.related-product-image {
    width: 100%;
    height: 150px !important;
    background: #f8fafc;
    border-radius: 14px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.related-product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 10px !important;
}

.related-product-card strong {
    font-size: 14px;
    line-height: 1.35;
    color: var(--dark);
}

.related-product-card span {
    color: var(--blue);
    font-weight: 900;
    font-size: 15px;
}

@media (max-width: 1000px) {
    .related-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    .related-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .related-product-image {
        height: 130px !important;
    }
}

@media (max-width: 480px) {
    .related-products-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   SMALLER CATEGORY SIDEBAR
   ========================================================= */

.category-sidebar {
    max-width: 230px;
}

.shop-page-layout {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 24px;
}

.category-menu,
.category-list,
.sidebar-categories {
    font-size: 14px;
}

.category-item,
.category-link,
.category-menu a,
.sidebar-categories a {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 14px;
}

.category-item svg,
.category-link svg,
.category-menu svg,
.sidebar-categories svg {
    width: 18px;
    height: 18px;
}

.category-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 9px;
}

.category-name {
    font-size: 14px;
    line-height: 1.25;
}

.category-toggle,
.category-plus {
    font-size: 16px;
    width: 24px;
    height: 24px;
}

.subcategory-list a,
.category-submenu a {
    padding: 8px 12px 8px 42px;
    font-size: 13px;
}

@media (max-width: 900px) {
    .shop-page-layout {
        grid-template-columns: 1fr;
    }

    .category-sidebar {
        max-width: 100%;
    }
}


/* =========================================================
   REPAIR PATCH - FILTERS, DASHBOARD, SMALL SIDEBAR, HIDDEN SCROLLBAR
   ========================================================= */

/* Product filters */
.product-filters {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
    margin: 0 0 22px;
}

.product-filters .filter-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 14px;
    align-items: end;
}

.product-filters label {
    display: grid;
    gap: 7px;
    color: var(--dark);
    font-size: 13px;
    font-weight: 900;
}

.product-filters input[type="text"],
.product-filters input[type="number"],
.product-filters select {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #ffffff;
    color: var(--dark);
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
}

.product-filters input:focus,
.product-filters select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(0, 128, 200, 0.14);
}

.product-filters .filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
}

.product-filters .filter-checkbox input {
    width: auto;
    min-height: auto;
}

.filter-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* Store Manager dashboard */
.dashboard-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

.dashboard-header h1 {
    margin: 6px 0 8px;
    font-size: clamp(32px, 4vw, 46px);
}

.dashboard-header p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
}

.dashboard-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-stat-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    display: grid;
    gap: 8px;
    min-height: 150px;
}

.dashboard-stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: var(--blue-soft);
    color: var(--blue);
    display: grid;
    place-items: center;
    font-size: 22px;
}

.dashboard-stat-card small {
    color: var(--muted);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dashboard-stat-card strong {
    font-size: 28px;
    color: var(--dark);
}

.dashboard-stat-card.success .dashboard-stat-icon {
    background: #dcfce7;
    color: #166534;
}

.dashboard-stat-card.warning .dashboard-stat-icon {
    background: #fef3c7;
    color: #92400e;
}

.dashboard-stat-card.danger .dashboard-stat-icon {
    background: #fee2e2;
    color: #991b1b;
}

.dashboard-stat-card.sales .dashboard-stat-icon {
    background: #e0f2fe;
    color: #075985;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(340px, 0.6fr);
    gap: 24px;
    margin-bottom: 24px;
}

.dashboard-panel {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
}

.dashboard-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.dashboard-panel-header h2 {
    margin: 0;
    font-size: 24px;
}

.dashboard-panel-header a {
    color: var(--blue);
    font-weight: 900;
}

.dashboard-empty {
    border: 1px dashed var(--line);
    border-radius: 16px;
    padding: 22px;
    color: var(--muted);
    background: #f8fafc;
}

.dashboard-table-wrapper {
    overflow-x: auto;
}

.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

.dashboard-table th {
    text-align: left;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px;
    border-bottom: 1px solid var(--line);
}

.dashboard-table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.dashboard-table td small {
    display: block;
    color: var(--muted);
    margin-top: 4px;
}

.dashboard-status {
    display: inline-flex;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.dashboard-status.paid,
.dashboard-status.completed {
    background: #dcfce7;
    color: #166534;
}

.dashboard-status.pending {
    background: #fef3c7;
    color: #92400e;
}

.dashboard-status.cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.dashboard-row-link {
    color: var(--blue);
    font-weight: 900;
}

.dashboard-stock-list {
    display: grid;
    gap: 12px;
}

.dashboard-stock-item {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px;
    background: #f8fafc;
    transition: 0.18s ease;
}

.dashboard-stock-item:hover {
    border-color: var(--blue);
    background: #eef8ff;
}

.dashboard-stock-image {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.dashboard-stock-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 5px;
}

.dashboard-stock-item strong {
    display: block;
    font-size: 14px;
    line-height: 1.35;
}

.dashboard-stock-item small {
    display: block;
    color: var(--muted);
    margin-top: 4px;
}

.dashboard-stock-pill {
    display: inline-flex;
    border-radius: 999px;
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.dashboard-stock-pill.low {
    background: #fef3c7;
    color: #92400e;
}

.dashboard-stock-pill.out {
    background: #fee2e2;
    color: #991b1b;
}

.dashboard-products-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.dashboard-product-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fafc;
    padding: 14px;
    display: grid;
    gap: 12px;
    transition: 0.18s ease;
}

.dashboard-product-card:hover {
    border-color: var(--blue);
    background: #eef8ff;
    transform: translateY(-2px);
}

.dashboard-product-image {
    height: 120px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.dashboard-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.dashboard-product-card strong {
    display: block;
    font-size: 14px;
    line-height: 1.35;
}

.dashboard-product-card small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-weight: 800;
}

/* Smaller category menu and hidden scrollbar */
.category-sidebar {
    max-width: 210px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.category-sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.shop-page-layout {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 24px;
}

.category-menu,
.category-list,
.sidebar-categories {
    font-size: 13px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.category-menu::-webkit-scrollbar,
.category-list::-webkit-scrollbar,
.sidebar-categories::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.category-item,
.category-link,
.category-menu a,
.sidebar-categories a {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 13px;
}

.category-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 8px;
}

.category-item svg,
.category-link svg,
.category-menu svg,
.sidebar-categories svg {
    width: 16px;
    height: 16px;
}

.category-name {
    font-size: 13px;
    line-height: 1.2;
}

.category-toggle,
.category-plus {
    font-size: 15px;
    width: 22px;
    height: 22px;
}

.subcategory-list a,
.category-submenu a {
    padding: 7px 10px 7px 36px;
    font-size: 12px;
}

@media (max-width: 1100px) {
    .dashboard-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .dashboard-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .product-filters .filter-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .shop-page-layout {
        grid-template-columns: 1fr;
    }

    .category-sidebar {
        max-width: 100%;
    }
}

@media (max-width: 680px) {
    .dashboard-header {
        display: grid;
    }

    .dashboard-header-actions {
        display: grid;
    }

    .dashboard-stats-grid,
    .dashboard-products-grid,
    .product-filters .filter-row {
        grid-template-columns: 1fr;
    }

    .dashboard-stock-item {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .dashboard-stock-pill {
        grid-column: 2;
        justify-self: start;
    }
}

/* =========================================================
   CATEGORY SIDEBAR - WIDER AND SMALLER TEXT
   ========================================================= */

.shop-page-layout {
    grid-template-columns: 280px minmax(0, 1fr) !important;
    gap: 26px !important;
}

.category-sidebar,
.category-tree,
.category-menu,
.category-list,
.sidebar-categories {
    width: 280px !important;
    max-width: 280px !important;
}

.category-item,
.category-link,
.category-menu a,
.sidebar-categories a,
.category-parent-row {
    min-height: 54px !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    gap: 12px !important;
}

.category-name,
.category-title,
.category-item span,
.category-link span,
.category-menu a span,
.sidebar-categories a span {
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

.category-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
}

.category-icon svg,
.category-item svg,
.category-link svg,
.category-menu svg,
.sidebar-categories svg {
    width: 18px !important;
    height: 18px !important;
}

.category-toggle,
.category-plus,
.category-item .plus,
.category-link .plus {
    font-size: 18px !important;
    width: 22px !important;
    height: 22px !important;
    margin-left: auto !important;
}

.subcategory-list a,
.category-submenu a {
    min-height: 38px !important;
    padding: 8px 12px 8px 52px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
}

.category-sidebar,
.category-tree,
.category-menu,
.category-list,
.sidebar-categories {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.category-sidebar::-webkit-scrollbar,
.category-tree::-webkit-scrollbar,
.category-menu::-webkit-scrollbar,
.category-list::-webkit-scrollbar,
.sidebar-categories::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

@media (max-width: 950px) {
    .shop-page-layout {
        grid-template-columns: 1fr !important;
    }

    .category-sidebar,
    .category-tree,
    .category-menu,
    .category-list,
    .sidebar-categories {
        width: 100% !important;
        max-width: 100% !important;
    }
}
/* =========================================================
   INVOICE PRINT FIX
   ========================================================= */

@page {
    size: A4;
    margin: 12mm;
}

@media print {

    html,
    body {
        width: 210mm;
        min-height: 297mm;
        background: #ffffff !important;
        color: #111827 !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .top-bar,
    .main-header,
    .site-footer,
    .footer,
    .invoice-actions,
    .no-print,
    nav,
    header,
    footer {
        display: none !important;
    }

    .container,
    .page {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .invoice-document {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
    }

    .invoice-document-top {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        gap: 20px !important;
        align-items: start !important;
        padding-bottom: 14px !important;
        margin-bottom: 14px !important;
        border-bottom: 2px solid #0080c8 !important;
    }

    .invoice-company {
        display: block !important;
    }

    .invoice-logo {
        display: none !important;
    }

    .invoice-company h1 {
        margin: 0 0 6px !important;
        font-size: 28px !important;
        line-height: 1.1 !important;
    }

    .invoice-company p {
        margin: 2px 0 !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
        color: #334155 !important;
    }

    .invoice-title-box {
        min-width: 0 !important;
        text-align: right !important;
    }

    .invoice-label {
        padding: 4px 8px !important;
        font-size: 10px !important;
        border-radius: 999px !important;
    }

    .invoice-title-box h2 {
        margin: 8px 0 !important;
        font-size: 22px !important;
        line-height: 1.1 !important;
    }

    .invoice-status {
        padding: 5px 8px !important;
        font-size: 10px !important;
        border-radius: 999px !important;
    }

    .invoice-info-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    .invoice-info-card {
        padding: 12px !important;
        border: 1px solid #dbe3ee !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        page-break-inside: avoid !important;
    }

    .invoice-info-card h3 {
        margin: 0 0 8px !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    .invoice-info-card p {
        margin: 3px 0 !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
        color: #334155 !important;
    }

    .invoice-table-wrapper {
        overflow: visible !important;
        border: 1px solid #dbe3ee !important;
        border-radius: 10px !important;
        margin-top: 10px !important;
    }

    .invoice-professional-table {
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: collapse !important;
        font-size: 11px !important;
    }

    .invoice-professional-table th {
        padding: 8px !important;
        font-size: 10px !important;
        background: #eef6fc !important;
        color: #111827 !important;
        border-bottom: 1px solid #dbe3ee !important;
    }

    .invoice-professional-table td {
        padding: 8px !important;
        font-size: 11px !important;
        border-bottom: 1px solid #edf2f7 !important;
        color: #334155 !important;
    }

    .invoice-bottom {
        display: grid !important;
        grid-template-columns: 1fr 260px !important;
        gap: 14px !important;
        margin-top: 14px !important;
        align-items: start !important;
        page-break-inside: avoid !important;
    }

    .invoice-note {
        padding: 12px !important;
        border: 1px solid #dbe3ee !important;
        border-radius: 10px !important;
        background: #ffffff !important;
    }

    .invoice-note h3 {
        margin: 0 0 6px !important;
        font-size: 13px !important;
    }

    .invoice-note p {
        margin: 0 !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    .invoice-totals {
        border: 1px solid #dbe3ee !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    .invoice-totals div {
        padding: 8px 10px !important;
        font-size: 11px !important;
    }

    .invoice-grand-total span,
    .invoice-grand-total strong {
        font-size: 14px !important;
    }

    a {
        color: inherit !important;
        text-decoration: none !important;
    }
}