@charset "utf-8";
/* CSS Document */

[type="text"]
{
	border-radius: 3px;
	border: 1px solid #000;
	padding: 5px;
}

body
{
	margin: 0;
	padding: 0;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 14px;
}

.header
{
	display: flex;
	padding: 10px;
	gap: 50px;
	align-items: flex-end;
	box-shadow: 0 4px 12px rgba(0,0,0,.08);
	position: relative;
	background: #fff;
	transition: box-shadow 0.3s ease;
}
	.header-logo
	{
		width: 227px;
		height: 100px;
		background: url(../img/logo.png) center no-repeat;
		background-size: contain;
		transition: transform 0.2s ease;
	}
	.header-logo:hover
	{
		transform: scale(1.02);
	}
	.header-hamburger
	{
		display: none;
		transition: opacity 0.2s ease;
	}
	.header-hamburger:hover
	{
		opacity: 0.8;
	}
	.header-right
	{
		margin-left: auto;
		gap: 20px;
		display: flex;
		flex-direction: column;
	}
		.header-phone
		{
			font-size: 22px;
			text-align: right;
			color: #006;
			letter-spacing: 0.5px;
			transition: color 0.2s ease;
		}
		.header-phone:hover
		{
			color: #0066ff;
		}
		.header-searchandbasket
		{
			gap: 10px;
			display: flex;
			align-items: center;
		}
			.header-searchandbasket a
			{
				color: inherit;
				text-decoration: none;
			}
			.header-basket
			{
				position: relative;
				display: flex;
				cursor: pointer;
				padding: 8px;
				border-radius: 8px;
				transition: background-color 0.2s ease;
			}
			.header-basket:hover
			{
				background: rgba(0,0,0,0.05);
			}
				.header-basket-icon
				{
					width: 28px;
					height: 28px;
					background: url(../img/cart-header.png) center no-repeat;
					background-size: contain;
					margin-left: auto;
					transition: transform 0.2s ease;
				}
				.header-basket:hover .header-basket-icon
				{
					transform: scale(1.1);
				}
				.header-basket-counter
				{
					padding: 2px 5px;
					display: inline-block;
					border-radius: 100px;
					background: #c00;
					color: #fff;
					font-size: 14px;
					font-weight: bold;
					align-self: flex-start;
					margin-left: -8px;
					margin-top: -8px;
					transition: transform 0.2s ease;
				}
				.header-basket:hover .header-basket-counter
				{
					transform: scale(1.1);
				}
				.header-basket-counter:empty
				{
					display: none;
				}
			.header-search input
			{
				background: url(../img/search.png) 12px center no-repeat #f8f7f7;
				background-size: 16px;
				padding: 10px;
				padding-left: 36px;
				font-size: 15px;
				width: 200px;
				border: 1px solid #ddd;
				border-radius: 6px;
				transition: all 0.2s ease;
			}
			.header-search input:hover
			{
				border-color: #bbb;
				background-color: #fff;
			}
			.header-search input:focus
			{
				outline: none;
				border-color: #0066ff;
				box-shadow: 0 0 0 3px rgba(0,102,255,0.1);
				background-color: #fff;
			}

.content
{
	display: flex;
	flex-direction: row;
	padding: 40px 20px;
	background: #fff;
	align-items: flex-start;
	gap: 20px;
}
.content-inner
{
	/*
	max-width: 1200px;
	width: 95vw;
	*/
}

.nav
{
	border-radius: 5px;
	box-shadow: 0 0 6px rgba(0,0,0,.3);
	background: #fff;
	position: relative;
	transition: box-shadow 0.3s ease;
}
.nav:hover
{
	box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
	.nav-close
	{
		display: none;
	}
	.nav-link-item
	{
		padding: 5px 10px;
	}
	a.nav-link
	{
		color: #333;
		font-weight: bold;
		text-decoration: none;
		padding: 10px;
		border-radius: 4px;
		display: block;
		min-width: 200px;
		transition: all 0.2s ease;
	}
	a.nav-link:hover,
	a.nav-link.selected
	{
		background: #f5f7fa;
		color: #0066ff;
	}

.subnav
{
	display: flex;
	flex-direction: column;
	padding: 5px 20px 20px 20px;
	background: #fff;
	border: 1px solid #eee;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 100%;
	margin: auto;
	z-index: 100;
	min-height: 100%;
	overflow: visible;
	justify-content: center;
	background: #fafafa;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0,0,0,.08);
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s ease;
}
.nav-link-item:hover .subnav
{
	opacity: 1;
	visibility: visible;
}
	a.subnav-link
	{
		color: #333;
		font-weight: bold;
		text-decoration: none;
		padding: 10px;
		border-radius: 4px;
		white-space: nowrap;
		display: block;
		transition: all 0.2s ease;
	}
	a.subnav-link:hover
	{
		background: #f5f7fa;
		color: #0066ff;
	}

	.title
	{
		font-size: 30px;
		text-align: center;
	}
	.title:not(:first-child)
	{
		margin-top: 20px;
	}
	.searchresults
	{
		margin-top: 40px;
		display: flex;
		gap: 30px;
		flex-wrap: wrap;
		/*justify-content: space-between;*/
	}
		.searchresult
		{
			min-width: 220px;
			width: 220px;
			background: #fff;
			display: block;
			text-decoration: none;
			color: inherit;
		}
			.searchresult-image
			{
				height: 0;
				padding-top: 100%;
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
			}
			.searchresult-image.awaiting
			{
				background-color: #aaa;
				background-image: url(../img/awaiting.png);
				opacity: .3;
				background-size: 60%;
			}
			.searchresult-details
			{
				padding: 20px;
				display: flex;
				flex-direction: column;
				gap: 20px;
				align-items: center;
				text-align: center;
			}
				.searchresult-title
				{
					color: #06f;
					font-size: 15px;
					text-transform: uppercase;
				}
				.searchresult-price
				{
					font-size: 18px;
					font-weight: bold;
				}
	
	.breadcrumbs
	{
		display: flex;
		gap: 10px;
		align-items: flex-end;
	}
	.breadcrumbs.titlesize
	{
		font-size: 30px;
	}
		.breadcrumb
		{
			color: inherit;
		}
		.breadcrumb.categorysize
		{
			font-size: 24px;
		}
	
	.product
	{
		display: flex;
		gap: 40px;
		margin-top: 40px;
	}
	.product-price-strikethrough {
		text-decoration: line-through;
		color: #999;
		margin-right: 10px;
	}
	.product-price-customer {
		color: rgb(4, 65, 126);
		font-weight: bold;
	}
		.product-gallery
		{
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 15px;
			align-items: center;
		}
			.product-mainimage
			{
				max-height: 600px;
				width: auto;
				max-width: 100%;
			}
			.product-images
			{
				display: flex;
				gap: 10px;
				align-items: center;
				flex-wrap: wrap;
			}
				.product-image
				{
					height: 100px;
					cursor: pointer;
				}
				.product-image.selected
				{
					border: 2px solid #09f;
					cursor: default;
				}
		.product-details
		{
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 15px;
		}
			.product-details-title
			{
				font-size: 26px;
				text-transform: uppercase;
			}
			.product-details-price
			{
				font-size: 24px;
				color: rgb(4, 65, 126);
			}
			.product-details-description
			{
				font-size: 16px;
			}
			.product-inbasket
			{
				padding-top: 20px;
				border-top: 1px solid #ccc;
				font-weight: bold;
			}
			.product-quantity
			{
				display: flex;
				margin-right: auto;
				align-items: stretch;
				gap: 5px;
			}
				.product-quantity input
				{
					border: 0;
					padding: 10px;
					font-size: 20px;
					text-align: center;
					width: 80px;
					border: 1px solid #999;
				}
				.product-quantity-addtobasket
				{
					flex: 1;
					display: flex;
					gap: 10px;
					padding: 10px;
					align-items: center;
					background: #093;
					color: #fff;
					cursor: pointer;
				}
				.product-quantity-addtobasket.disabled
				{
					cursor: default;
					background: #999;
				}
					.product-quantity-addtobasket-icon
					{
						width: 32px;
						height: 32px;
						background: url(../img/cart.png) center no-repeat;
						background-size: contain;
					}
					.product-quantity-addtobasket-text
					{
						font-size: 20px;
					}

.addedtobasket-overlay
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 100;
}
	.addedtobasket
	{
		max-height: 100vh;
		background: #fff;
		display: flex;
		flex-direction: column;
		gap: 20px;
		border-radius: 10px;
		box-shadow: 5px 5px 5px rgba(0,0,0,.2);
		padding-bottom: 20px;
	}
		.addedtobasket-titlebar
		{
			display: flex;
			gap: 20px;
			align-items: center;
		}
			.addedtobasket-title
			{
				text-align: center;
				font-size: 20px;
				padding: 10px 0 10px 10px;
			}
			.addedtobasket-close
			{
				margin-left: auto;
				padding: 10px 20px;
				font-size: 24px;
				color: #666;
				cursor: pointer;
			}
			.addedtobasket-close:hover
			{
				color: #c00;
			}
		.addedtobasket-basket
		{
			overflow-y: auto;
			flex: 1 1 auto;
			min-height: 0;
			display: flex;
			flex-direction: column;
			padding: 0 20px;
		}
			.addedtobasket-basket-row
			{
				display: flex;
				background: #fff;
				align-items: stretch;
				border-top: 1px solid #ddd;
			}
			.addedtobasket-basket-row:first-child
			{
				border-top: 0;
			}	
				.addedtobasket-basket-row-details
				{
					display: flex;
				}
				.addedtobasket-basket-row-controls
				{
					display: flex;
					margin-left: auto;
				}
				.addedtobasket-basket-row-item
				{
					padding: 10px;
					align-items: center;
					display: flex;
					gap: 13px;
				}
				.addedtobasket-basket-row-item.gridwidth-quantity
				{
					margin-left: auto;
				}
					.addedtobasket-basket-minus,
					.addedtobasket-basket-plus
					{
						display: flex;
						align-self: center;
						width: 20px;
						height: 20px;
						background: #fff;
						border: 1px solid #999;
						color: #999;
						font-weight: bold;
						text-align: center;
						cursor: pointer;
						border-radius: 3px;
						align-items: center;
						justify-content: center;
						position: relative;
						margin-top: -5px;
						margin-bottom: -5px;
						user-select: none;
					}
					.addedtobasket-basket-minus:hover,
					.addedtobasket-basket-plus:hover
					{
						color: #fff;
						background: #999;
					}
				.addedtobasket-basket-row-image
				{
					margin: 10px;
					height: 90px;
					width: 90px;
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center;
				}
				.addedtobasket-basket-row-details .addedtobasket-basket-row-item:first-child
				{
					margin-left: 110px;
				}
				.addedtobasket-basket-remove
				{
					align-self: center;
					width: 26px;
					height: 26px;
					background: #888;
					color: #fff;
					font-weight: bold;
					text-align: center;
					cursor: pointer;
					border-radius: 3px;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20px;
				}
		.addedtobasket-buttons
		{
			display: flex;
			gap: 30px;
			padding: 0 20px;
			align-items: center;
		}
			.addedtobasket-gotocheckoutandtotal
			{
				display: flex;
				gap: 20px;
				align-items: center;
				border: 1px solid #099;
				background: #eafee7;
				padding: 20px;
				border-radius: 5px;
			}
				.addedtobasket-total
				{
					font-size: 36px;
				}
			.addedtobasket-button
			{
				padding: 15px 20px;
				border-radius: 4px;
				cursor: pointer;
				flex: 1;
				color: #fff;
				text-align: center;
				white-space: nowrap;
			}
			.addedtobasket-button.continueshopping
			{
				background: #06f;
			}
			.addedtobasket-button.gotocheckout
			{
				background: #090;
				font-weight: bold;
			}

.gridwidth-image {width: 90px;}
.gridwidth-product {width: 600px;}
.gridwidth-quantity
{
	width: 100px;
	text-align: center;
	justify-content: center;
}
.gridwidth-linetotal {width: 100px;}

.basket-changes
{
	margin-top: 20px;
	border: 2px solid #ffaf34;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 15px;
	border-radius: 5px;
	background: #fff;
}
	.basket-changes-title
	{
		display: flex;
		align-items: center;
		gap: 10px;
		font-size: 18px;
		font-weight: bold;
	}
		.basket-changes-title-icon
		{
			width: 24px;
			height: 24px;
			background: url(../img/icon-warning.png) center no-repeat;
			background-size: contain;
		}
			.basket-changes-section
			{
				display: flex;
				flex-direction: column;
				gap: 10px;
			}
				.basket-changes-section-title
				{
					font-weight: bold;
				}
				.basket-changes-item
				{
					display: list-item;
					list-style: disc;
					list-style-position: inside;
				}
	

.basket
{
	margin-top: 20px;
}
	.basket-empty
	{
		background: #faffbd;
		padding: 20px;
		text-align: center;
	}
	.basket-empty a
	{
		color: #06f;
	}
	
	.basket-legend
	{
		display: flex;
		background: #ccc;
	}
		.basket-legend-item
		{
			padding: 10px;
			border-left: 1px solid #999;
			font-weight: bold;
		}
		.basket-legend-item:first-child
		{
			border-left: 0;
		}
	.basket-row
	{
		display: flex;
		background: #fff;
		align-items: stretch;
		border-bottom: 1px solid #ddd;
	}
		.basket-row-details,
		.basket-row-controls
		{
			display: flex;
		}
		.basket-row-item
		{
			padding: 10px;
			border-left: 1px solid #ccc;
			align-items: center;
			display: flex;
			gap: 15px;
		}
			.basket-minus,
			.basket-plus
			{
				display: flex;
		    align-self: center;
				width: 20px;
				height: 20px;
				border: 1px solid #999;
				background: #fff;
				color: #999;
				font-weight: bold;
				text-align: center;
				cursor: pointer;
				border-radius: 3px;
				align-items: center;
				justify-content: center;
				position: relative;
				margin-top: -5px;
				margin-bottom: -5px;
				user-select: none;
			}
			.basket-minus:hover,
			.basket-plus:hover
			{
				background: #999;
				color: #fff;
			}
		.basket-row-image
		{
			margin: 10px;
			height: 90px;
			width: 90px;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}
		.basket-row-details .basket-row-item:first-child
		{
			margin-left: 110px;
		}
		.basket-remove
		{
			align-self: center;
			width: 26px;
			height: 26px;
			background: #888;
			color: #fff;
			font-weight: bold;
			text-align: center;
			cursor: pointer;
			border-radius: 3px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: auto;
			margin-right: 20px;
		}
	.basket-total
	{
		display: flex;
		align-items: stretch;
	}
		.basket-total-text
		{
			width: 812px;
			padding: 20px;
			text-align: right;
			font-weight: bold;
			align-self: center;
			font-size: 18px;
		}
		.basket-total-price
		{
			background: #fff;
			padding: 20px;
			font-weight: bold;
			flex: 1;
			display: flex;
			align-items: center;
			font-size: 18px;
		}
			
.customer
{
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
}
	.customer-row
	{
		display: flex;
		align-items: center;
		gap: 20px;
	}
		.customer-label
		{
			width: 100px;
			text-align: right;
		}
		.customer-input
		{
			padding-right: 100px;
		}
			.customer-input input
			{
				padding: 5px;
				width: 400px;
			}

.order
{
	text-align: center;
	margin: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}
	.order-button
	{
		background: #093;
		color: #fff;
		padding: 20px 40px;
		font-weight: bold;
		cursor: pointer;
		border-radius: 3px;
		font-size: 18px;
	}

.footer
{
	display: flex;
	padding: 40px;
	gap: 40px;
}
	.footer-column
	{
		display: flex;
		flex-direction: column;
		gap: 10px;
		color: #06c;
	}
		.footer-category
		{
			color: inherit;
			font-size: 20px;
		}
		.footer-subcategory
		{
			color: inherit;
			font-size: 18px;
		}

@media screen and (max-width: 1380px)
{
	.content {
		padding: 15px;
	}
	.product {
		margin-top: 15px;
	}
		.product-gallery {
			max-width: 400px;
		}
		.product-image
		{
			height: 60px;
		}
		.product-mainimage
		{
			max-height: 400px;
		}
		.product-details-title
		{
			font-size: 18px;
		}
		.product-login-required
		{
			margin-top: 0 !important;
		}
}

@media screen and (max-width: 1200px)
{
	/* mobile navigtion should start here */
	.header-hamburger
	{
		display: flex;
		width: 42px;
		height: 42px;
		background: url(../img/hamburger.png) center no-repeat;
		background-size: contain;
		cursor: pointer;
	}
	.nav
	{
		display: none;
		flex-direction: column;
		margin: 0;
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		z-index: 100;
		background: #fff;
	}
	a.nav-link,
	a.subnav-link
	{
		white-space: normal;
	}
	a.nav-link
	{
		color: #000;
		font-size: 15px;
	}
	.subnav
	{
		display: flex !important;
		opacity: 1 !important;
		visibility: visible !important;
		position: static;
		transform: none;
		box-shadow: none;
		border: none;
		min-height: 0;
		padding: 0 0 12px 0;
		margin: 0;
		background: transparent;
	}
	.nav-close
	{
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		padding: 5px 10px;
		font-size: 20px;
		color: #fff;
		background: #333;
	}
	
	.content-inner
	{
		min-width: 100%;
		width: 100%;
	}
	
	.footer
	{
		flex-wrap: wrap;
	}

	.breadcrumbs.titlesize,
	.breadcrumb.categorysize,
	.breadcrumb
	{
		font-size: 14px !important;
	}
}

@media screen and (min-width: 1201px) {
	.nav {
		display: block !important; /* Force display block at larger sizes regardless of mobile state */
	}

	.subnav {
		display: none; /* Reset to none so hover works properly */
	}

	.subnav[style*="display: flex"] {
		display: flex !important;
	}

	/* Reset any mobile-specific styles */
	.nav-link-item {
		padding: 2px;
		border-bottom: none;
	}

	a.nav-link {
		padding: 12px 16px;
		display: block;
	}

	a.nav-link::after {
		display: none;
	}
}

@media screen and (max-width: 1070px)
{
	.header-searchandbasket
	{
		margin-left: 0;
	}
	.basket-legend-item.gridwidth-linetotal
	{
		margin-right: 46px;
	}
	.basket-legend-item.gridwidth-product,
	.basket-row-item.gridwidth-product,
	.basket-row-details
	{
		flex: 1;
		width: auto;
	}
	.basket-legend-item.gridwidth-image,
	.basket-row-image
	{
		display: none;
	}
	.basket-row-details .basket-row-item.gridwidth-product
	{
		margin-left: 0;
	}
	.basket-total-text
	{
		width: auto;
		margin-left: auto;
	}
	.basket-total-price
	{
		min-width: 126px;
		flex: 0;
	}
	.customer-row
	{
		width: 100%;
	}
		.customer-input
		{
			padding-right: 0;
			flex: 1;
		}
			.customer-input input
			{
				width: calc(100% - 22px);
			}
}

@media screen and (max-width: 800px)
{
	.header
	{
		flex-flow: wrap;
		row-gap: 10px;
		justify-content: center;
		align-items: center;
	}
		.header-right
		{
			margin-left: 0;
			margin-top: 0;
		}
		.header-searchandbasket
		{
			width: 100%;
			flex-direction: row;
			align-items: center;
		}
			.header-search
			{
				flex: 1;
			}
				.header-search input
				{
					width: calc(100% - 52px);
				}
		.header-phone
		{
			display: none;
		}
		.header-logo
		{
			height: 80px;
		}
	
	.searchresult
	{
		min-width: 80%;
        width: 80%;
        margin: auto;
	}
	
	.product
	{
		flex-direction: column;
	}
		.product-gallery {
			max-width: 100%;
		}
		.product-mainimage {
			max-height: 400px;
		}
	.product-details
	{
		align-items: center;
	}
	.product-quantity
	{
		margin-left: auto;
	}
	.product-login-required
	{
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: 10px !important;
	}

	.addedtobasket
	{
		width: 100%;
		height: 100%;
		border-radius: 0;
	}
		.addedtobasket-basket
		{
			flex: 1;
			overflow-y: auto;
		}
		.addedtobasket-basket-row
		{
			flex-direction: column;
		}
			.addedtobasket-basket-row-controls,
			.addedtobasket-basket-row-details
			{
				justify-content: center;
				margin-left: 0;
			}
				.addedtobasket-basket-row-item.gridwidth-quantity
				{
					margin-left: 0;
				}
				.addedtobasket-basket-row-details .addedtobasket-basket-row-item:first-child
				{
					margin-left: 0;
				}
		
		.addedtobasket-buttons
		{
			flex-direction: column;
		}
			.addedtobasket-gotocheckoutandtotal
			{
				flex-direction: column;
			}
	
	.basket-row
	{
		flex-direction: column;
	}
		.basket-row-details
		{
			border-bottom: 1px solid #ccc;
		}
	
	.basket-row-item.gridwidth-product
	{
		font-weight: bold;
		color: #333
	}
	
	.basket-legend-item.gridwidth-quantity,
	.basket-legend-item.gridwidth-linetotal
	{
		display: none;
	}

	.searchresult-image
	{
		padding-top: 50%;
	}
}

@media screen and (max-width: 480px)
{
	.header
	{
		padding: 8px;
		gap: 8px;
	}

	.header-logo
	{
		width: 120px;
		height: 30px;
	}

	.header-searchandbasket
	{
		gap: 8px;
	}

	.header-search input
	{
		padding: 8px;
		padding-left: 32px;
		border-radius: 6px;
	}

	.header-search::before
	{
		left: 8px;
		width: 14px;
		height: 14px;
	}

	.header-basket
	{
		padding: 4px;
	}

	.header-basket-icon
	{
		width: 20px;
		height: 20px;
	}

	.header-basket-counter
	{
		min-width: 14px;
		height: 14px;
		font-size: 10px;
		padding: 2px 4px;
		margin-top: -4px;
		margin-left: -6px;
	}
}

/* Login Popup Modal Styles */
.login-popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.login-popup {
  background: #fff;
  border-radius: 10px;
  max-width: 350px;
  width: 90vw;
  padding: 32px 24px 28px 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-popup-close {
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 22px;
  color: #888;
  cursor: pointer;
}
.login-header-title {
  font-size: 22px;
  margin-bottom: 8px;
  font-weight: 600; 
  text-align: left;
  align-self: start;
}
.login-header-text {
  font-size: 15px;
  margin-bottom: 18px;
  color: #555;
  text-align: center;
}
.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.login-popup-email-row,
.login-popup-accesscode-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.login-popup-accesscode-row {
  display: none;
}
.login-form-label {
  font-size: 14px;
  color: #333;
}
.login-popup-input {
  width: calc(100% - 24px);
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 15px;
}
[name="loginpopup-accesscode"] {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 10px;
}
.login-popup-button {
  margin-top: 8px;
  background: #093;
  color: #fff;
  padding: 10px 0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
}
.login-form-row-text {
  font-size: 14px;
  color: #555;
  text-align: center;
  border-top: 1px solid #ccc;
  padding-top: 10px;
  margin-top: 10px;
}
.login-form-row-notice {
  font-size: 14px;
  color: #555;
  text-align: center;
  background: #faffbd;
  border: 1px solid #ffe066;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
}

.product-login-required {
  background: #faffbd;
  border: 1px solid #ffe066;
  border-radius: 8px;
  padding: 28px 24px 20px 24px;
  margin: 32px 0 24px 0;
  text-align: center;
  max-width: 400px;
  margin-left: 0;
  margin-right: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.product-login-required-message {
  font-size: 17px;
  color: #333;
  margin-bottom: 18px;
  font-weight: 500;
}
.product-login-already {
  font-size: 15px;
  color: #666;
  margin-bottom: 10px;
}
.product-login-button {
  background: #093;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.product-login-button:hover {
  background: #0b5;
}

@media (max-width: 600px) {
  .product-login-required {
    margin-left: auto;
    margin-right: auto;
  }
}