/* =========================================================================
   INAA Store

   Minimal and image-first: the photograph is the card, and everything else
   is quiet until you need it. Shares the head band, chips and container
   tokens with the rest of the site so the shop does not read as a bolt-on.
   ========================================================================= */

.inaa-shop {
	font-family: var(--inaa-font);
}

.inaa-shop * {
	box-sizing: border-box;
}

/* ---------- head ---------- */

.inaa-shop__head {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(110% 150% at 86% 6%, rgba(208, 17, 27, 0.44) 0%, rgba(208, 17, 27, 0) 56%),
		linear-gradient(125deg, #0d1a3e 0%, #14275c 52%, #1c3372 100%);
	color: #fff;
	padding: 58px 20px 62px;
}

@media (min-width: 768px) {
	.inaa-shop__head { padding-inline: 32px; }
}

.inaa-shop__head-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--inaa-container, 1280px);
	margin-inline: auto;
}

.inaa-shop__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.inaa-shop__eyebrow::before {
	content: "";
	width: 30px;
	height: 3px;
	background: var(--inaa-red, #d0111b);
}

.inaa-shop__title {
	margin: 0 0 12px;
	color: #fff;
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.025em;
}

.inaa-shop__intro {
	margin: 0;
	max-width: 58ch;
	color: rgba(255, 255, 255, 0.84);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.inaa-shop__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
}

/* ---------- body ---------- */

.inaa-shop__body {
	width: 100%;
	max-width: var(--inaa-container, 1280px);
	margin-inline: auto;
	padding: 44px 20px 76px;
}

@media (min-width: 768px) {
	.inaa-shop__body { padding-inline: 32px; }
}

/* Single product and cart/checkout keep the container but not the band. */
.inaa-shop--single .inaa-shop__body {
	padding-top: 36px;
}

/* ---------- grid ---------- */

.inaa-shop ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 720px) {
	.inaa-shop ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 44px 28px;
	}
}

@media (min-width: 1080px) {
	.inaa-shop ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 42px 26px;
	}
}

.inaa-shop ul.products::before,
.inaa-shop ul.products::after {
	content: none;
}

/* WooCommerce sizes loop items with `li.product { width: 30.75% }` for its
   float layout. That selector has the same specificity as a plain reset here,
   so the grid item would collapse to 30.75% of its own track. The extra class
   wins on specificity instead of reaching for !important. */
.inaa-shop ul.products li.product.inaa-pcard {
	width: 100%;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
	list-style: none;
}

/* ---------- product card ---------- */

.inaa-pcard__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.inaa-pcard__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: 10px;

	/* A soft neutral, so cut-out product shots on white do not float. */
	background: #f1f3f7;
}

.inaa-pcard__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 520ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.inaa-pcard__link:hover .inaa-pcard__img,
.inaa-pcard__link:focus-visible .inaa-pcard__img {
	transform: scale(1.04);
}

.inaa-pcard__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: rgba(20, 39, 92, 0.28);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0.18em;
}

/* Buy action rests below the image edge and slides up on hover. Hidden from
   assistive tech: the whole card is already a link to the product. */
.inaa-pcard__action {
	position: absolute;
	right: 12px;
	bottom: 12px;
	left: 12px;
	display: block;
	padding: 12px 14px;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.96);
	color: var(--inaa-navy, #14275c);
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	box-shadow: 0 6px 20px rgba(13, 26, 62, 0.16);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 220ms ease, transform 220ms ease;
}

.inaa-pcard__link:hover .inaa-pcard__action,
.inaa-pcard__link:focus-visible .inaa-pcard__action {
	opacity: 1;
	transform: none;
}

.inaa-pcard__flag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	display: inline-block;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--inaa-red, #d0111b);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.inaa-pcard__flag--out {
	background: rgba(20, 39, 92, 0.88);
}

.inaa-pcard__body {
	display: block;
	padding-top: 14px;
}

.inaa-pcard__cat {
	display: block;
	margin-bottom: 5px;
	color: rgba(20, 39, 92, 0.52);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.inaa-pcard__name {
	display: block;
	margin-bottom: 5px;
	color: var(--inaa-navy, #14275c);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

.inaa-pcard__link:hover .inaa-pcard__name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.inaa-pcard__price,
.inaa-pcard__price .woocommerce-Price-amount {
	color: #4a5568;
	font-size: 0.9375rem;
	font-weight: 500;
}

.inaa-pcard__price del {
	margin-right: 6px;
	opacity: 0.6;
}

.inaa-pcard__price ins {
	background: none;
	color: var(--inaa-red, #d0111b);
	text-decoration: none;
}

/* ---------- colour dots ---------- */

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

.inaa-pcard__color {
	width: 13px;
	height: 13px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background: var(--inaa-swatch, #c9ced6);

	/* Keeps white and cream swatches visible on white. */
	box-shadow: inset 0 0 0 1px rgba(20, 39, 92, 0.22);
	list-style: none;
}

.inaa-pcard__color-more {
	margin: 0;
	color: rgba(20, 39, 92, 0.5);
	font-size: 0.75rem;
	font-weight: 600;
	list-style: none;
}

/* ---------- notices, buttons, misc Woo chrome ---------- */

/* WooCommerce ships purple/pink accents; bring them onto the brand. */
.inaa-shop .button,
.inaa-shop button.button,
.inaa-shop a.button,
.inaa-shop .woocommerce-message .button,
.woocommerce-page .inaa-shop input[type="submit"] {
	border: 0;
	border-radius: 7px;
	background: var(--inaa-red, #d0111b);
	color: #fff;
	font-family: var(--inaa-font);
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 13px 22px;
	transition: background-color 180ms ease;
}

.inaa-shop .button:hover,
.inaa-shop button.button:hover,
.inaa-shop a.button:hover,
.inaa-shop .button:focus-visible {
	background: #b00e17;
	color: #fff;
}

.inaa-shop .button.alt,
.inaa-shop button.button.alt {
	background: var(--inaa-navy, #14275c);
}

.inaa-shop .button.alt:hover {
	background: #0d1a3e;
}

.inaa-shop .button:disabled,
.inaa-shop .button.disabled {
	background: #c9ced6;
	color: #fff;
	cursor: not-allowed;
}

/* Scoped to the body on purpose. As `.inaa-shop a` this beat `.inaa-chip`
   on specificity and turned the filter chips navy-on-navy in the head band. */
.inaa-shop__body a {
	color: var(--inaa-navy, #14275c);
}

.inaa-shop .woocommerce-message,
.inaa-shop .woocommerce-info,
.inaa-shop .woocommerce-error {
	border-top-color: var(--inaa-red, #d0111b);
	border-radius: 8px;
	font-size: 0.9375rem;
}

.inaa-shop .woocommerce-message::before,
.inaa-shop .woocommerce-info::before {
	color: var(--inaa-red, #d0111b);
}

/* =========================================================================
   Single product
   ========================================================================= */

.inaa-product__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 22px;
	color: rgba(20, 39, 92, 0.72);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.inaa-product__back svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

.inaa-product__back:hover {
	color: var(--inaa-navy, #14275c);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.inaa-product__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

@media (min-width: 900px) {
	.inaa-product__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: 56px;
	}
}

/* ---------- gallery ---------- */

.inaa-product__media {
	position: relative;
}

@media (min-width: 900px) {
	/* Long option lists shouldn't leave the photograph scrolled off screen. */
	.inaa-product__media {
		position: sticky;
		top: 108px;
	}
}

.inaa-product__media .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.inaa-product__media .woocommerce-product-gallery__wrapper {
	border-radius: 12px;
	overflow: hidden;
	background: #f1f3f7;
}

.inaa-product__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.inaa-product__media .woocommerce-product-gallery__trigger {
	top: 14px;
	right: 14px;
	z-index: 2;
}

.inaa-product .onsale {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--inaa-red, #d0111b);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* ---------- buy panel ---------- */

.inaa-product__panel {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

.inaa-product__eyebrow {
	margin: 0 0 10px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.inaa-product__eyebrow a {
	color: rgba(20, 39, 92, 0.55);
	text-decoration: none;
}

.inaa-product__eyebrow a:hover {
	color: var(--inaa-red, #d0111b);
}

.inaa-product .product_title {
	margin: 0 0 14px;
	color: var(--inaa-navy, #14275c);
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: 1.12;
}

.inaa-product__panel > .price,
.inaa-product__panel > .price .woocommerce-Price-amount {
	color: var(--inaa-navy, #14275c);
	font-size: 1.5rem;
	font-weight: 600;
}

.inaa-product__panel > .price {
	display: block;
	margin: 0 0 20px;
}

.inaa-product__panel > .price del {
	margin-right: 8px;
	opacity: 0.55;
	font-weight: 500;
}

.inaa-product__panel > .price ins {
	background: none;
	color: var(--inaa-red, #d0111b);
	text-decoration: none;
}

.inaa-product .woocommerce-product-details__short-description {
	margin: 0 0 26px;
	padding-bottom: 24px;
	border-bottom: 1px solid #e4e8ef;
	color: #4a5568;
	font-size: 1rem;
	line-height: 1.65;
}

.inaa-product .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* ---------- variation form ---------- */

.inaa-product .variations {
	width: 100%;
	margin: 0 0 22px;
	border: 0;
	border-collapse: collapse;
	display: block;
}

.inaa-product .variations tbody,
.inaa-product .variations tr {
	display: block;
}

/* The variation form is a <table>, so odd/even row striping from the base
   table styles painted a grey band behind the first attribute row. */
.inaa-product .variations tr,
.inaa-product .variations tr:nth-child(odd),
.inaa-product .variations tr:nth-child(even),
.inaa-product .variations th,
.inaa-product .variations td {
	background: none;
}

.inaa-product .variations tr + tr {
	margin-top: 20px;
}

.inaa-product .variations th,
.inaa-product .variations td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	text-align: left;
	line-height: 1.4;
}

.inaa-product .variations th label,
.inaa-product .variations .label label {
	margin-bottom: 10px;
	color: var(--inaa-navy, #14275c);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* The select stays in the DOM as the source of truth; the swatches replace it
   visually only once the script has built them. */
/* WooCommerce's `.woocommerce div.product form.cart .variations select` is
   specificity 0,4,3 and sets `width: 100%`. A plainer hide rule loses to it,
   and the clipped select then still occupies full width — which pushed the
   page 248px wider than the viewport. This has to outrank it. */
.woocommerce div.product form.cart .variations select.inaa-select--replaced,
.inaa-product select.inaa-select--replaced {
	position: absolute;
	width: 1px;
	min-width: 0;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	float: none;
}

.inaa-product .variations select {
	max-width: 100%;
	padding: 12px 14px;
	border: 1px solid #cfd6e2;
	border-radius: 8px;
	background: #fff;
	font-family: var(--inaa-font);
	font-size: 0.9375rem;
}

.inaa-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.inaa-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #cfd6e2;
	background: #fff;
	color: var(--inaa-navy, #14275c);
	font-family: var(--inaa-font);
	cursor: pointer;
	transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.inaa-swatch--text {
	min-width: 52px;
	padding: 10px 15px;
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 600;
}

.inaa-swatch--text:hover:not(:disabled) {
	border-color: var(--inaa-navy, #14275c);
}

.inaa-swatch--text[aria-pressed="true"] {
	border-color: var(--inaa-navy, #14275c);
	background: var(--inaa-navy, #14275c);
	color: #fff;
}

.inaa-swatch--color {
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 50%;
	background: var(--inaa-swatch, #c9ced6);

	/* Inner hairline keeps white swatches visible; outer ring shows selection. */
	box-shadow: inset 0 0 0 1px rgba(20, 39, 92, 0.18);
	border-color: transparent;
}

.inaa-swatch--color:hover:not(:disabled) {
	box-shadow:
		inset 0 0 0 1px rgba(20, 39, 92, 0.18),
		0 0 0 2px rgba(20, 39, 92, 0.28);
}

.inaa-swatch--color[aria-pressed="true"] {
	box-shadow:
		inset 0 0 0 1px rgba(20, 39, 92, 0.18),
		0 0 0 2px #fff,
		0 0 0 4px var(--inaa-navy, #14275c);
}

.inaa-swatch:disabled,
.inaa-swatch.is-unavailable {
	opacity: 0.34;
	cursor: not-allowed;
	text-decoration: line-through;
}

.inaa-swatch--color.is-unavailable {
	text-decoration: none;
}

.inaa-product .woocommerce-variation-price {
	margin-bottom: 16px;
}

.inaa-product .woocommerce-variation-price .price,
.inaa-product .woocommerce-variation-price .woocommerce-Price-amount {
	color: var(--inaa-navy, #14275c);
	font-size: 1.25rem;
	font-weight: 600;
}

.inaa-product .reset_variations {
	display: inline-block;
	margin-top: 10px;
	color: rgba(20, 39, 92, 0.6);
	font-size: 0.8125rem;
	font-weight: 600;
}

/* ---------- add to cart ---------- */

.inaa-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin: 0 0 24px;
}

.inaa-product form.variations_form.cart {
	display: block;
}

.inaa-product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}

.inaa-product form.cart .quantity {
	display: flex;
	margin: 0;
}

.inaa-product form.cart .quantity input.qty {
	width: 78px;
	height: 100%;
	min-height: 50px;
	padding: 12px 8px;
	border: 1px solid #cfd6e2;
	border-radius: 8px;
	background: #fff;
	color: var(--inaa-navy, #14275c);
	font-family: var(--inaa-font);
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
}

.inaa-product form.cart .single_add_to_cart_button {
	flex: 1 1 200px;
	min-height: 50px;
	border: 0;
	border-radius: 8px;
	background: var(--inaa-red, #d0111b);
	color: #fff;
	font-family: var(--inaa-font);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color 180ms ease;
}

.inaa-product form.cart .single_add_to_cart_button:hover {
	background: #b00e17;
}

.inaa-product form.cart .single_add_to_cart_button.disabled {
	background: #c9ced6;
	cursor: not-allowed;
}

.inaa-product .stock.out-of-stock {
	color: var(--inaa-red, #d0111b);
	font-weight: 600;
}

/* ---------- meta + assurances ---------- */

.inaa-product__meta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 14px;
	margin: 0 0 22px;
	font-size: 0.875rem;
}

.inaa-product__meta dt {
	color: rgba(20, 39, 92, 0.5);
	font-weight: 600;
}

.inaa-product__meta dd {
	margin: 0;
	color: #4a5568;
}

.inaa-product__assurances {
	margin: 0;
	padding: 20px 0 0;
	border-top: 1px solid #e4e8ef;
	list-style: none;
}

.inaa-product__assurances li {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 11px;
	color: #4a5568;
	font-size: 0.875rem;
	line-height: 1.5;
}

.inaa-product__assurances li:last-child {
	margin-bottom: 0;
}

.inaa-product__assurances svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	fill: var(--inaa-red, #d0111b);
}

/* ---------- tabs + related ---------- */

.inaa-product .woocommerce-tabs {
	margin-top: 62px;
	padding-top: 6px;
}

/* WooCommerce styles these as `.woocommerce div.product .woocommerce-tabs
   ul.tabs li` (0,4,2) — boxed, rounded, with decorative pseudo-elements.
   The theme's flat underlined tabs have to outrank that. */
.woocommerce div.product.inaa-product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	margin: 0 0 26px;
	padding: 0;
	border-bottom: 1px solid #e4e8ef;
	list-style: none;
}

.woocommerce div.product.inaa-product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product.inaa-product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product.inaa-product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product.inaa-product .woocommerce-tabs ul.tabs li::after {
	content: none;
	display: none;
	border: 0;
	box-shadow: none;
}

.woocommerce div.product.inaa-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.woocommerce div.product.inaa-product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0 0 13px;
	border-bottom: 2px solid transparent;
	color: rgba(20, 39, 92, 0.58);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	text-shadow: none;
}

.woocommerce div.product.inaa-product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product.inaa-product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--inaa-navy, #14275c);
	border-bottom-color: var(--inaa-red, #d0111b);
}

.inaa-product .woocommerce-tabs .panel {
	max-width: 70ch;
	color: #4a5568;
	font-size: 1rem;
	line-height: 1.7;
}

.inaa-product .woocommerce-tabs .panel > h2:first-child {
	display: none;
}

.inaa-product .woocommerce-tabs .shop_attributes th {
	color: var(--inaa-navy, #14275c);
}

.inaa-shop .related,
.inaa-shop .up-sells {
	margin-top: 66px;
	padding-top: 40px;
	border-top: 1px solid #e4e8ef;
}

.inaa-shop .related > h2,
.inaa-shop .up-sells > h2,
.inaa-shop .cross-sells > h2 {
	margin: 0 0 26px;
	color: var(--inaa-navy, #14275c);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* ---------- pagination ---------- */

.inaa-shop .woocommerce-pagination ul {
	border: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.inaa-shop .woocommerce-pagination ul li {
	border: 0;
}

.inaa-shop .woocommerce-pagination a,
.inaa-shop .woocommerce-pagination span.current {
	border-radius: 7px;
	padding: 10px 15px;
	font-weight: 600;
}

.inaa-shop .woocommerce-pagination span.current {
	background: var(--inaa-navy, #14275c);
	color: #fff;
}

/* ---------- focus ---------- */

.inaa-shop :focus-visible {
	outline: 3px solid var(--inaa-navy, #14275c);
	outline-offset: 3px;
}

.inaa-shop__head :focus-visible {
	outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.inaa-pcard__img,
	.inaa-pcard__action {
		transition: none;
	}

	.inaa-pcard__link:hover .inaa-pcard__img {
		transform: none;
	}
}

/* Touch devices have no hover, so never hide the buy action behind one. */
@media (hover: none) {
	.inaa-pcard__action {
		opacity: 1;
		transform: none;
	}
}