/**
 * i2i Products Design
 * Product listing + single product, styled to the i2i Pipelines reference.
 *
 * Everything is scoped under body.i2i-shop / body.i2i-single (added only on
 * the product archive and single product) or under .i2i-product / .i2i-card,
 * so nothing here can reach the theme header, navigation, footer, cart,
 * checkout, account or any other page.
 */

:root {
	--i2i-navy: #16243f;
	--i2i-navy-d: #0e192c;
	--i2i-red: #8c2020;
	--i2i-bg: #f7f6f3;
	--i2i-line: #e2e0da;
	--i2i-line-2: #efede8;
	--i2i-grey: #a8a49b;
	--i2i-muted: #5c6b80;
	--i2i-muted-2: #4a5a72;
	--i2i-muted-3: #3d4c63;
	--i2i-on-navy: #c9d3e0;
	--i2i-on-navy-2: #9fb0c9;
	--i2i-on-navy-3: #7f93b0;
	--i2i-card-2: #fbfaf8;
	--i2i-sans: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
	--i2i-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Content column. Matches the rest of the i2i site; change here only. */
	--i2i-max: 1600px;
	--i2i-gutter: clamp(18px, 5vw, 40px);
}

/* ------------------------------------------------------------------ *
 * Shared
 * ------------------------------------------------------------------ */
body.i2i-shop,
body.i2i-single {
	background: var(--i2i-bg);
}

/* Full-bleed sections sit inside the theme's container; clip guards the
   100vw technique against the scrollbar producing a horizontal scrollbar. */
body.i2i-single {
	overflow-x: clip;
}

body.i2i-shop .i2i-card,
body.i2i-single .i2i-product {
	font-family: var(--i2i-sans);
	-webkit-font-smoothing: antialiased;
}

.i2i-reg {
	font-size: 0.46em;
	font-weight: 600;
	vertical-align: 0.85em;
	margin-left: 0.14em;
}

/* The layout sits inside whatever wrapper the theme opens on
   `woocommerce_before_single_product_summary`, so the product page lines up
   with the header, breadcrumb and footer at any theme width. The single child
   fills that wrapper whether it lays its children out as block, flex or grid. */
.i2i-layout {
	width: 100%;
	max-width: 100%;
	flex: 1 1 100%;
	grid-column: 1 / -1;
	min-width: 0;
}

.i2i-layout > section {
	max-width: var(--i2i-max);
	margin-inline: auto;
	box-sizing: border-box;
}

/* Whatever element holds the layout must not clip horizontally: the hero's
   dark band is painted by a layer wider than the container. Themes commonly
   set overflow:hidden on that wrapper for the gallery slider, which this
   layout does not use. Browsers without :has() simply keep the band inside
   the container -- the page still reads correctly. */
body.i2i-single :has( > .i2i-layout ) {
	overflow: visible;
}

/* ------------------------------------------------------------------ *
 * Product listing
 *
 * The card rules are written long on purpose. Themes style
 * `ul.products li.product .woocommerce-loop-product__title` and friends from
 * inline customiser CSS that is printed after this file, so a short selector
 * loses the cascade. `body:is(.i2i-shop, .i2i-single) ul.products
 * li.product.i2i-card` clears the specificity of anything a theme is likely
 * to have, without resorting to !important.
 * ------------------------------------------------------------------ */

/* The sidebar is removed on product archives (filter: i2i_pd_hide_archive_sidebar),
   so the content column takes back the width the theme reserved for it. */
body.i2i-shop-full #primary,
body.i2i-shop-full .content-area {
	width: 100%;
	max-width: none;
	float: none;
	margin-left: 0;
	margin-right: 0;
}

body.i2i-shop-full .secondary-wrapper,
body.i2i-shop-full #secondary,
body.i2i-shop-full .mobile-filter {
	display: none;
}

/* Hairline grid. The 1px rules are card borders rather than a gap over a
   coloured backdrop, so a part-filled last row leaves clean empty space
   instead of grey blocks. */
body:is(.i2i-shop, .i2i-single) ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	align-items: stretch;
	justify-items: stretch;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	background: transparent;
	border-top: 1px solid var(--i2i-line);
	border-left: 1px solid var(--i2i-line);
}

body:is(.i2i-shop, .i2i-single) ul.products::before,
body:is(.i2i-shop, .i2i-single) ul.products::after {
	content: none;
}

body:is(.i2i-shop, .i2i-single) ul.products li.product {
	width: auto;
	max-width: none;
	height: auto;
	align-self: stretch;
	justify-self: stretch;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-right: 1px solid var(--i2i-line);
	border-bottom: 1px solid var(--i2i-line);
	transition: background 0.25s ease;
}

body:is(.i2i-shop, .i2i-single) ul.products li.product::before,
body:is(.i2i-shop, .i2i-single) ul.products li.product::after {
	content: none;
}

body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card:hover {
	background: var(--i2i-navy-d);
}

body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card .i2i-card__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	color: var(--i2i-navy);
	text-decoration: none;
	overflow: hidden;
	box-shadow: none;
}

body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card .i2i-card__media {
	height: clamp(150px, 22vw, 220px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 26px 26px 0;
	margin: 0;
	box-sizing: border-box;
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card:hover .i2i-card__media {
	transform: scale(1.07);
}

body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card .i2i-card__media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
	margin: 0;
	object-fit: contain;
	box-shadow: none;
	border-radius: 0;
}

body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card .i2i-card__badge {
	position: absolute;
	top: 18px;
	left: 18px;
	font-family: var(--i2i-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #fff;
	background: var(--i2i-red);
	padding: 5px 9px;
	line-height: 1;
}

body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card .i2i-card__body {
	padding: 22px 28px 28px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card .i2i-card__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px 16px;
	flex-wrap: wrap;
}

body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card .i2i-card__name {
	font-family: var(--i2i-sans);
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: 1.1;
	color: var(--i2i-navy);
	margin: 0;
	padding: 0;
	text-transform: none;
	transition: color 0.25s ease;
}

body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card:hover .i2i-card__name,
body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card:hover .i2i-card__cta {
	color: #fff;
}

body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card .i2i-card__meta {
	font-family: var(--i2i-mono);
	font-size: 14px;
	line-height: 1.3;
	color: var(--i2i-red);
	white-space: nowrap;
}

body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card .i2i-card__cta {
	margin-top: 18px;
	font-family: var(--i2i-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--i2i-red);
	transition: color 0.25s ease;
}

body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card .i2i-card__cart {
	padding: 0 28px 26px;
	margin: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 16px;
}

body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card .i2i-card__price,
body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card .i2i-card__price .amount {
	font-family: var(--i2i-sans);
	font-size: 17px;
	font-weight: 700;
	color: var(--i2i-navy);
}

body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card:hover .i2i-card__price,
body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card:hover .i2i-card__price .amount {
	color: #fff;
}

/* Themes commonly float the loop button over the image and reveal it on
   hover. In this card it belongs in the flow, under the copy. */
body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card .i2i-card__cart .button {
	position: static;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	transform: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	font-family: var(--i2i-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--i2i-navy);
	color: #fff;
	border: 0;
	border-radius: 0;
	padding: 13px 22px;
	margin: 0;
	display: inline-block;
	width: auto;
	min-width: 0;
}

body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card .i2i-card__cart .button:hover {
	background: var(--i2i-red);
	color: #fff;
}

/* "View cart" link that WooCommerce adds after an ajax add-to-cart. */
body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card .i2i-card__cart .added_to_cart {
	font-family: var(--i2i-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--i2i-red);
	text-decoration: underline;
	margin: 0;
}

body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card:hover .i2i-card__cart .added_to_cart {
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * Single product — hero
 * ------------------------------------------------------------------ */
.i2i-product {
	font-family: var(--i2i-sans);
	color: var(--i2i-navy);
}

/* The dark band runs edge to edge while the copy stays in the theme's
   container. The bleed layer paints behind the content instead of the section
   itself being 100vw, so the hero text lines up with every other section. */
.i2i-hero {
	position: relative;
	isolation: isolate;
	background: var(--i2i-navy);
	color: #fff;
}

.i2i-hero__bleed {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--i2i-navy);
	pointer-events: none;
	z-index: -1;
	display: block;
}

.i2i-hero__glow {
	position: absolute;
	inset: 0;
	display: block;
	background: radial-gradient(110% 100% at 74% 46%, rgba(70, 130, 200, 0.26) 0%, rgba(22, 36, 63, 0) 60%);
}

.i2i-hero__inner {
	position: relative;
	padding-block: 34px 80px;
}

.i2i-back {
	font-family: var(--i2i-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--i2i-on-navy-2);
	text-decoration: none;
}

.i2i-back:hover {
	color: #fff;
}

.i2i-hero__grid {
	margin-top: 38px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

.i2i-eyebrow {
	font-family: var(--i2i-mono);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--i2i-red);
}

.i2i-hero__title {
	margin: 18px 0 0;
	padding: 0;
	font-size: clamp(34px, 4.4vw, 60px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.035em;
	color: #fff;
}

.i2i-hero__title .i2i-reg {
	font-size: 0.36em;
	vertical-align: 1.15em;
	margin-left: 0.16em;
}

.i2i-hero__lede p {
	margin: 22px 0 0;
	font-size: 20px;
	line-height: 1.55;
	color: var(--i2i-on-navy);
	max-width: 46ch;
}

.i2i-stats {
	margin: 34px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 22px 34px;
}

.i2i-stat {
	margin: 0;
}

.i2i-stats dt {
	font-family: var(--i2i-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--i2i-on-navy-3);
	margin: 0;
}

.i2i-stats dd {
	margin: 6px 0 0;
	font-size: clamp(22px, 2.6vw, 26px);
	font-weight: 700;
	color: #fff;
}

.i2i-hero__buy {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 26px;
}

.i2i-hero__price,
.i2i-hero__price .price,
.i2i-hero__price .amount {
	font-size: 26px;
	font-weight: 700;
	color: #fff;
}

.i2i-hero__buy form.cart {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* Long selectors on purpose: themes style the add-to-cart button through
   `.product .cart .single_add_to_cart_button` and similar, from inline
   customiser CSS printed after this file. */
body.i2i-single .i2i-product .i2i-hero__buy .button,
body.i2i-single .i2i-product .i2i-hero__buy button,
body.i2i-single .i2i-product .i2i-hero__buy input[type="submit"] {
	background: #fff;
	background-color: #fff;
	color: var(--i2i-navy);
	font-family: var(--i2i-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 17px 28px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	width: auto;
	min-width: 0;
	height: auto;
}

body.i2i-single .i2i-product .i2i-hero__buy .button:hover,
body.i2i-single .i2i-product .i2i-hero__buy button:hover,
body.i2i-single .i2i-product .i2i-hero__buy input[type="submit"]:hover {
	background: var(--i2i-red);
	background-color: var(--i2i-red);
	color: #fff;
}

/* The quantity stepper keeps the theme's own buttons; only the shape and the
   contrast against the dark hero are changed. */
body.i2i-single .i2i-product .i2i-hero__buy .quantity {
	margin: 0;
}

body.i2i-single .i2i-product .i2i-hero__buy .quantity input {
	height: 52px;
	border-radius: 0;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: transparent;
	color: #fff;
	font-family: var(--i2i-sans);
	font-size: 15px;
}

body.i2i-single .i2i-product .i2i-hero__buy .quantity .quantity-button {
	color: #fff;
}

body.i2i-single .i2i-product .i2i-hero__buy .added_to_cart {
	color: #fff;
	font-family: var(--i2i-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: underline;
}

body.i2i-single .i2i-product .i2i-hero__buy .stock,
body.i2i-single .i2i-product .i2i-hero__buy .woocommerce-variation-price {
	color: var(--i2i-on-navy);
	margin: 0;
}

.i2i-hero__art {
	display: flex;
	justify-content: center;
}

.i2i-hero__art img {
	width: 100%;
	max-width: 560px;
	height: auto;
	display: block;
	filter: drop-shadow(0 28px 56px rgba(0, 0, 0, 0.45));
}

/* ------------------------------------------------------------------ *
 * Capability + specification
 * ------------------------------------------------------------------ */
.i2i-split {
	padding-block: clamp(36px, 8vw, 80px) 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

.i2i-split > div {
	min-width: 0;
}

.i2i-split--one {
	grid-template-columns: minmax(0, 1fr);
}

.i2i-capability h2,
.i2i-views__head h2 {
	margin: 0;
	padding: 0;
	font-size: clamp(26px, 3.2vw, 34px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--i2i-navy);
}

.i2i-capability__body {
	margin-top: 26px;
}

.i2i-capability__body ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.i2i-capability__body li {
	position: relative;
	padding: 0 0 18px 22px;
	border-bottom: 1px solid var(--i2i-line);
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--i2i-muted-3);
	margin: 0;
	list-style: none;
}

.i2i-capability__body li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 6px;
	height: 6px;
	background: var(--i2i-red);
}

.i2i-capability__body p {
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--i2i-muted-3);
	max-width: 62ch;
}

.i2i-spec {
	border: 1px solid var(--i2i-line);
	background: #fff;
}

.i2i-spec__head {
	padding: 20px 26px;
	border-bottom: 1px solid var(--i2i-line);
	font-family: var(--i2i-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--i2i-grey);
}

.i2i-spec table.woocommerce-product-attributes {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
	table-layout: auto;
}

.i2i-spec table.woocommerce-product-attributes tr {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	padding: 15px 26px;
	border-bottom: 1px solid var(--i2i-line-2);
	background: transparent;
}

.i2i-spec table.woocommerce-product-attributes tr:last-child {
	border-bottom: 0;
}

.i2i-spec table.woocommerce-product-attributes th,
.i2i-spec table.woocommerce-product-attributes td {
	border: 0;
	padding: 0;
	background: transparent;
	font-size: 15.5px;
	line-height: 1.4;
}

.i2i-spec table.woocommerce-product-attributes th {
	font-weight: 400;
	color: var(--i2i-muted);
	text-align: left;
	width: auto;
}

.i2i-spec table.woocommerce-product-attributes td {
	font-weight: 600;
	color: var(--i2i-navy);
	text-align: right;
}

.i2i-spec table.woocommerce-product-attributes td p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

/* ------------------------------------------------------------------ *
 * Views (product gallery)
 * ------------------------------------------------------------------ */
.i2i-views {
	padding-block: clamp(36px, 8vw, 80px) 0;
}

.i2i-views__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	border-bottom: 1px solid var(--i2i-navy);
	padding-bottom: 22px;
}

.i2i-views__head p {
	margin: 0;
	font-family: var(--i2i-mono);
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--i2i-grey);
}

.i2i-views__grid {
	margin-top: 28px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--i2i-line);
	border: 1px solid var(--i2i-line);
}

.i2i-view {
	margin: 0;
	background: #fff;
	display: flex;
	flex-direction: column;
}

.i2i-view a {
	display: block;
	background: var(--i2i-card-2);
	line-height: 0;
}

.i2i-view__img {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	margin: 0;
}

.i2i-view figcaption {
	padding: 16px 20px 20px;
	font-family: var(--i2i-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--i2i-muted);
	line-height: 1.5;
}

/* ------------------------------------------------------------------ *
 * Call to action
 * ------------------------------------------------------------------ */
.i2i-cta {
	padding-block: clamp(36px, 8vw, 80px) 0;
}

.i2i-cta__card {
	background: #fff;
	border: 1px solid var(--i2i-line);
	padding: 44px 46px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.i2i-cta__card h3 {
	margin: 0;
	padding: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--i2i-navy);
}

.i2i-cta__card p {
	margin: 10px 0 0;
	font-size: 16.5px;
	line-height: 1.5;
	color: var(--i2i-muted);
}

.i2i-cta__button {
	background: var(--i2i-red);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 17px 28px;
	text-decoration: none;
	flex-shrink: 0;
	display: inline-block;
}

.i2i-cta__button:hover {
	background: var(--i2i-navy);
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * Native tail: reviews, up-sells and related products. These are the theme's
 * own sections; only the headings are brought into the design's type.
 * ------------------------------------------------------------------ */
body.i2i-single .related > h2,
body.i2i-single .up-sells > h2,
body.i2i-single #reviews h2 {
	font-family: var(--i2i-sans);
	font-size: clamp(24px, 3.2vw, 32px);
	font-weight: 700;
	letter-spacing: -0.026em;
	color: var(--i2i-navy);
}

body.i2i-single .related,
body.i2i-single .up-sells {
	padding-block: clamp(36px, 8vw, 80px) 0;
}

/* ------------------------------------------------------------------ *
 * Responsive — the reference design's own breakpoints
 * ------------------------------------------------------------------ */
@media (max-width: 1000px) {
	body:is(.i2i-shop, .i2i-single) ul.products,
	.i2i-views__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The reference collapses both two-column grids to one at 1000px with a
	   40px gap, keeping the copy above the product image. */
	.i2i-hero__grid,
	.i2i-split {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.i2i-hero__art img {
		max-width: 460px;
	}

	.i2i-views__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.i2i-cta__card {
		padding: 32px 28px;
		gap: 24px;
	}
}

@media (max-width: 620px) {
	body:is(.i2i-shop, .i2i-single) ul.products,
	.i2i-views__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.i2i-hero__inner {
		padding-block: 24px 56px;
	}

	.i2i-hero__grid {
		margin-top: 26px;
	}

	.i2i-hero__lede p {
		font-size: 18px;
	}

	.i2i-stats {
		gap: 20px 26px;
	}

	body:is(.i2i-shop, .i2i-single) ul.products li.product.i2i-card .i2i-card__body {
		padding: 20px 22px 24px;
	}

	.i2i-cta__card h3 {
		font-size: 23px;
	}
}