/**
 * ICN Shop - main stylesheet
 * Layout matched to legacy icnsales.com (RDS skin)
 */

:root {
	--icn-cyan: #05a9d5;
	--icn-cyan-dark: #048bb0;
	--icn-blue: #5280bd;
	--icn-blue-dark: #4c98d0;
	--icn-black: #111111;
	--icn-header-bg: #ffffff;
	--icn-footer-bg: #363839;
	--icn-text: #333333;
	--icn-text-muted: #666666;
	--icn-text-light: #999999;
	--icn-white: #ffffff;
	--icn-border: #cccccc;
	--icn-surface: #fafafa;
	--icn-accent-orange: #ff6600;
	--icn-accent-script: "Kaushan Script", cursive;
	--icn-font: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--icn-container: 1200px;
	--icn-radius: 0;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--icn-font);
	font-size: 16px;
	line-height: 1.55;
	color: var(--icn-text);
	background: var(--icn-white);
}

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

a {
	color: var(--icn-blue);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--icn-cyan);
	text-decoration: underline;
}

.container {
	width: min(100% - 2rem, var(--icn-container));
	margin-inline: auto;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 9999;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	background: var(--icn-black);
	color: var(--icn-white);
	clip: auto;
}

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Announcement bar */
.icnshop-announcement {
	background: var(--icn-cyan);
	color: var(--icn-white);
	text-align: center;
	font-size: 0.95rem;
	font-weight: 700;
	padding: 0.55rem 0;
}

.icnshop-announcement p {
	margin: 0;
}

/* Utility navigation (top links row) */
.icnshop-utility-nav {
	background: var(--icn-white);
	border-bottom: 1px solid var(--icn-border);
	font-size: 0.78rem;
	line-height: 1.6;
}

.icnshop-utility-nav__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.35rem 1rem;
	padding: 0.35rem 0;
}

.icnshop-utility-nav__links,
.icnshop-utility-nav__account {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 0.35rem;
}

.icnshop-utility-nav a {
	color: var(--icn-text-light);
	text-decoration: none;
}

.icnshop-utility-nav a:hover {
	color: var(--icn-blue);
	text-decoration: none;
}

.icnshop-utility-nav__sep {
	color: var(--icn-text-light);
}

/* Header - white 3-column layout (reference image 1) */
.icnshop-site-header {
	background: var(--icn-header-bg);
	color: var(--icn-text);
	padding: 1.25rem 0 1rem;
	border-bottom: 1px solid #eeeeee;
}

.icnshop-site-header__inner {
	display: grid;
	grid-template-columns: 31% 38% 31%;
	gap: 0.5rem 1rem;
	align-items: center;
}

.icnshop-site-header__contact p {
	margin: 0.15rem 0;
	font-size: 0.875rem;
	line-height: 1.35;
	color: var(--icn-text-muted);
	font-weight: 700;
}

.icnshop-site-header__contact a {
	color: var(--icn-text-muted);
	text-decoration: none;
}

.icnshop-site-header__contact a:hover {
	color: var(--icn-cyan);
}

.icnshop-site-header__brand {
	text-align: center;
}

.icnshop-site-header__logo img,
.icnshop-site-header__logo-image {
	margin-inline: auto;
	max-width: 332px;
	width: 100%;
	height: auto;
}

.icnshop-site-header__logo-link {
	display: inline-block;
}

.icnshop-site-header__logo-link:hover {
	text-decoration: none;
}

.icnshop-site-header__tagline {
	margin: 0.35rem 0 0;
	font-size: 0.72rem;
	line-height: 1.35;
	color: var(--icn-text-muted);
	max-width: 22rem;
	margin-inline: auto;
}

.icnshop-site-header__tagline span {
	display: block;
}

.icnshop-site-header__utilities {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.45rem;
	width: 100%;
}

.icnshop-site-header__account-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.65rem 1rem;
}

.icnshop-site-header__search {
	width: min(100%, 360px);
}

.icnshop-account-links {
	font-size: 0.78rem;
	text-transform: uppercase;
	font-weight: 700;
	white-space: nowrap;
}

.icnshop-account-links a {
	color: var(--icn-text-muted);
	text-decoration: none;
}

.icnshop-account-links a:hover {
	color: var(--icn-blue);
}

.icnshop-cart-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--icn-text-muted);
	font-size: 0.75rem;
	text-transform: uppercase;
	font-weight: 700;
	text-decoration: none;
}

.icnshop-cart-link:hover {
	color: var(--icn-cyan);
	text-decoration: none;
}

.icnshop-search-form {
	display: flex;
	width: 100%;
	border: 1px solid var(--icn-border);
	overflow: hidden;
	background: var(--icn-white);
}

.icnshop-search-form__input {
	flex: 1;
	border: 0;
	padding: 0.45rem 0.65rem;
	font: inherit;
	font-size: 0.85rem;
	min-width: 0;
	color: var(--icn-text);
}

.icnshop-search-form__input:focus {
	outline: 2px solid var(--icn-cyan);
	outline-offset: -2px;
}

.icnshop-search-form__submit {
	border: 0;
	background: transparent;
	padding: 0.2rem 0.35rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	flex-shrink: 0;
}

.icnshop-search-form__submit img {
	display: block;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

/* Primary navigation - simple centered links */
.icnshop-primary-nav {
	background: var(--icn-white);
	border-bottom: 1px solid var(--icn-border);
	position: relative;
	text-align: center;
}

.icnshop-primary-nav__toggle {
	display: none;
	margin: 0.5rem 0;
	padding: 0.5rem;
	background: transparent;
	border: 1px solid var(--icn-border);
	border-radius: var(--icn-radius);
	cursor: pointer;
}

.icnshop-primary-nav__toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--icn-text);
	margin: 4px 0;
}

.icnshop-primary-nav__menu {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0.65rem 0;
}

.icnshop-primary-nav__menu > li {
	display: inline-flex;
	align-items: center;
}

.icnshop-primary-nav__menu > li + li::before {
	content: "|";
	color: var(--icn-text-light);
	margin: 0 0.65rem;
	font-weight: 400;
}

.icnshop-primary-nav__menu > li > a {
	color: var(--icn-text);
	font-size: 0.92rem;
	font-weight: 700;
	text-decoration: none;
	padding: 0.35rem 0;
	display: block;
	white-space: nowrap;
}

.icnshop-primary-nav__menu > li > a:hover,
.icnshop-primary-nav__menu > li.current-menu-item > a {
	color: var(--icn-blue);
	text-decoration: none;
}

/* Homepage - white boxed layout */
.site-main--front {
	padding: 0;
	background: var(--icn-white);
}

.icnshop-home-wrap {
	max-width: var(--icn-container);
	margin-inline: auto;
	background: var(--icn-white);
}

.icnshop-hero-banner__image {
	width: 100%;
	height: auto;
}

.icnshop-homepage-guides {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0;
	padding: 0.75rem 0 0.25rem;
	background: var(--icn-white);
}

.icnshop-homepage-guides__item {
	flex: 0 0 33.333%;
	max-width: 33.333%;
	padding: 0.35rem 0.5rem;
	text-align: center;
}

.icnshop-homepage-guides__item a:hover {
	text-decoration: none;
}

.icnshop-homepage-guides__item img {
	width: 100%;
	height: auto;
}

/* Suggested supplements - 4-col grid, image + caps title */
.icnshop-home-categories {
	margin: 2rem 0 2.5rem;
	padding: 0;
	text-transform: uppercase;
	font-size: 0.875rem;
	font-weight: 700;
	background: var(--icn-white);
}

.icnshop-home-categories__title {
	font-size: 1rem;
	color: var(--icn-cyan-dark);
	text-align: center;
	text-transform: uppercase;
	margin: 0 0 1.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.icnshop-home-categories__grid {
	display: flex;
	flex-wrap: wrap;
}

.icnshop-home-category {
	flex: 0 0 25%;
	max-width: 25%;
	margin: 2% 0;
	text-align: center;
	padding: 0 0.35rem;
}

.icnshop-home-category__link {
	display: block;
	color: var(--icn-text);
	text-decoration: none;
	font-weight: 700;
	line-height: 1.35;
}

.icnshop-home-category__link:hover {
	color: var(--icn-blue);
	text-decoration: none;
}

.icnshop-home-category__image {
	display: block;
	background: transparent;
	margin-bottom: 0.65rem;
	padding: 0;
}

.icnshop-home-category__image img {
	width: 100%;
	max-width: 220px;
	height: auto;
	margin-inline: auto;
}

.icnshop-home-category__title {
	display: block;
	color: var(--icn-text);
	text-transform: uppercase;
	font-size: 0.78rem;
	line-height: 1.4;
}

.icnshop-home-categories__empty {
	flex: 0 0 100%;
	text-align: center;
	color: var(--icn-text-muted);
	padding: 2rem 1rem;
	text-transform: none;
	font-weight: 400;
}

/* Blue CTA bar */
.icnshop-home-questions {
	background: var(--icn-blue);
	text-align: center;
	padding: 1.25rem 1rem;
}

.icnshop-home-questions__inner {
	max-width: 90%;
	margin-inline: auto;
}

.icnshop-home-questions a {
	color: var(--icn-white);
	font-weight: 700;
	font-size: clamp(1rem, 2.5vw, 1.55rem);
	text-decoration: none;
	line-height: 1.35;
}

.icnshop-home-questions a:hover {
	color: #cccccc;
	text-decoration: none;
}

/* White content section */
.icnshop-home-text {
	background: var(--icn-white);
	padding: 2% 0;
	font-size: 0.875rem;
	line-height: 1.67;
	color: var(--icn-text);
}

.icnshop-home-text__inner {
	max-width: 100%;
}

.icnshop-home-promo {
	margin-bottom: 2rem;
}

.icnshop-home-promo__image {
	width: 100%;
	height: auto;
}

.icnshop-home-text__divider {
	border: 0;
	border-top: 1px solid var(--icn-border);
	margin: 2rem 0;
}

.icnshop-home-text__heading {
	text-align: center;
	color: var(--icn-accent-orange);
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0 0 1rem;
}

.icnshop-home-text__intro {
	font-size: 0.875rem;
	margin: 0 0 1rem;
}

.icnshop-home-text__guides {
	margin: 0 0 0 5%;
	padding: 0;
	list-style: disc;
}

.icnshop-home-text__guides li {
	margin-bottom: 0.35rem;
	font-size: 0.875rem;
}

.icnshop-home-text__guides a {
	color: var(--icn-blue);
}

/* Inner pages */
.site-main {
	padding: 2rem 0 3rem;
	background: var(--icn-white);
}

.site-main--shop .woocommerce-breadcrumb,
.woocommerce-breadcrumb {
	margin-bottom: 1.25rem;
	font-size: 0.9rem;
}

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.25rem;
}

.woocommerce ul.products li.product {
	margin: 0 !important;
	width: 100% !important;
	float: none !important;
	border: 1px solid var(--icn-border);
	border-radius: var(--icn-radius);
	padding-bottom: 0.75rem;
	background: var(--icn-white);
}

.woocommerce ul.products li.product .button {
	background: var(--icn-cyan);
	color: var(--icn-white);
	border-radius: var(--icn-radius);
	margin-inline: 0.75rem;
}

.woocommerce ul.products li.product .button:hover {
	background: var(--icn-cyan-dark);
}

.woocommerce span.onsale {
	background: var(--icn-accent-orange);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--icn-cyan-dark);
	font-size: 1.35rem;
	font-weight: 700;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	background: var(--icn-cyan);
	color: var(--icn-white);
	border-radius: var(--icn-radius);
	font-weight: 700;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--icn-cyan-dark);
	color: var(--icn-white);
}

.icnshop-entry__title {
	margin-top: 0;
	font-size: 2rem;
	color: var(--icn-black);
}

.icnshop-entry__content {
	max-width: 75ch;
}

.icnshop-entry__content > * + * {
	margin-top: 1rem;
}

/* Footer */
.icnshop-site-footer {
	margin-top: auto;
	color: #cccccc;
}

.icnshop-site-footer__newsletter {
	background: var(--icn-blue);
	padding: 1.25rem 0;
}

.icnshop-site-footer__newsletter-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.icnshop-site-footer__newsletter-heading {
	font-size: 1.25rem;
	color: var(--icn-white);
	font-weight: 700;
	margin-bottom: 0.15rem;
}

.icnshop-site-footer__newsletter-text p {
	margin: 0;
	color: var(--icn-white);
	font-size: 0.9rem;
}

.icnshop-newsletter-form {
	display: flex;
	align-items: stretch;
	gap: 0;
	min-width: min(100%, 320px);
	height: 38px;
}

.icnshop-newsletter-form input[type="email"] {
	flex: 1;
	min-width: 0;
	height: 38px;
	margin: 0;
	padding: 0 0.75rem;
	border: 1px solid var(--icn-border);
	border-right: 0;
	background: var(--icn-white);
	color: var(--icn-text);
	font: inherit;
	font-size: 0.85rem;
	line-height: 38px;
	box-sizing: border-box;
}

.icnshop-newsletter-form input[type="email"]:focus {
	outline: 2px solid var(--icn-white);
	outline-offset: -2px;
}

.icnshop-newsletter-form__submit {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	overflow: hidden;
}

.icnshop-newsletter-form__submit img {
	display: block;
	width: 38px;
	height: 38px;
	object-fit: cover;
}

.icnshop-site-footer__columns {
	background: var(--icn-footer-bg);
	padding: 2rem 0;
}

.icnshop-site-footer__columns-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem 2rem;
}

.icnshop-site-footer__column-title {
	font-weight: 700;
	font-size: 0.75rem;
	margin-bottom: 0.45rem;
	color: var(--icn-blue-dark);
	text-transform: uppercase;
}

.icnshop-site-footer__column a {
	display: block;
	color: #cccccc;
	font-size: 0.82rem;
	line-height: 1.65;
	text-decoration: none;
}

.icnshop-site-footer__column a:hover {
	color: var(--icn-cyan);
	text-decoration: none;
}

.icnshop-site-footer__column .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.icnshop-site-footer__column .widget li {
	margin: 0;
}

.icnshop-site-footer__column .widget li + li {
	margin-top: 0;
}

.icnshop-site-footer__column .widget p {
	margin: 0 0 0.75rem;
	color: #bbbbbb;
	font-size: 0.82rem;
	line-height: 1.55;
}

.icnshop-site-footer__copyright a {
	color: #888888;
	margin: 0 0.25rem;
}

.icnshop-site-footer__copyright a:hover {
	color: var(--icn-cyan);
}

.icnshop-site-footer__testimonial {
	font-size: 0.82rem;
	line-height: 1.55;
	margin: 0;
	color: #bbbbbb;
}

.icnshop-site-footer__read-more {
	display: inline-block;
	margin-top: 1rem;
	float: right;
	color: var(--icn-cyan);
	font-size: 0.82rem;
}

.icnshop-site-footer__social a {
	display: inline-block;
	margin-right: 0.35rem;
}

.icnshop-site-footer__social img {
	display: inline-block;
}

.icnshop-site-footer__payments {
	margin-top: 1rem;
}

.icnshop-site-footer__payments img {
	margin-inline: auto;
}

.icnshop-site-footer__sub {
	background: var(--icn-footer-bg);
	border-top: 1px solid #444444;
	padding: 1.25rem 0 2rem;
	text-align: center;
	font-size: 0.82rem;
}

.icnshop-site-footer__sub p {
	margin: 0;
	color: #aaaaaa;
}

.icnshop-site-footer__sub a {
	color: #888888;
	margin: 0 0.25rem;
}

/* Responsive */
@media (max-width: 960px) {
	.icnshop-site-header__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.icnshop-site-header__utilities {
		align-items: center;
	}

	.icnshop-homepage-guides__item {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.icnshop-home-category {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.icnshop-site-footer__columns-inner {
		grid-template-columns: 1fr 1fr;
	}

	.icnshop-primary-nav__toggle {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
	}

	.icnshop-primary-nav__menu {
		display: none;
		flex-direction: column;
		align-items: stretch;
		padding: 0 0 1rem;
		width: 100%;
	}

	.icnshop-primary-nav__menu.is-open {
		display: flex;
	}

	.icnshop-primary-nav__menu > li + li::before {
		display: none;
	}

	.icnshop-primary-nav__menu > li > a {
		padding: 0.65rem 0;
		border-bottom: 1px solid var(--icn-border);
	}
}

@media (max-width: 560px) {
	.icnshop-home-category {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.icnshop-site-footer__columns-inner {
		grid-template-columns: 1fr;
	}

	.icnshop-site-footer__newsletter-inner {
		flex-direction: column;
		align-items: stretch;
	}
}
