/**
 * Single Product (WooCommerce)
 *
 * STANDALONE, HAND-AUTHORED PLAIN CSS — DO NOT ADD TO css/tailwind.css.
 * Enqueued directly by blocks_single_product_styles() in functions.php and kept
 * outside the PostCSS/Tailwind pipeline so this page needs no build step.
 *
 * Markup: woocommerce/single-product.php  +  js/single-product.js
 * Design: Figma "Ichinen_product-page_redesign" (4520:2180) + mobile (4605:2135)
 *
 * A good deal of this styles WooCommerce's OWN markup (gallery, variations form,
 * quantity input, tabs) rather than our own classes — that is deliberate, so the
 * default zoom / lightbox / variation behaviour keeps working untouched.
 */

.ich-sp {
	--ich-sp-red: #f70000;
	--ich-sp-white: #ffffff;
	--ich-sp-ink: #141414;
	--ich-sp-text: #222222;
	--ich-sp-body: #4a4a4a;
	--ich-sp-muted: #6b6b6b;
	--ich-sp-label: #555555;
	--ich-sp-border: #e0e0e0;
	--ich-sp-border-soft: #eaeaea;
	--ich-sp-border-card: #e8e8e8;
	--ich-sp-border-tab: #e5e5e5;
	--ich-sp-border-input: #cccccc;
	--ich-sp-border-step: #dddddd;
	--ich-sp-surface: #f4f4f5;
	--ich-sp-cta-btn: #d6002c;
	--ich-sp-accent: #940018;

	--ich-sp-font: "Open Sans", sans-serif;
	--ich-sp-max: 1312px;
	--ich-sp-gutter: 64px;

	font-family: var(--ich-sp-font);
	background: var(--ich-sp-white);
}

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

/* The theme's base typography sets `section { font-size: 1.125rem; line-height: 1.75 }`.
   Neutralise it here so the design's metrics hold. */
.ich-sp section {
	font-family: var(--ich-sp-font);
	font-size: 15px;
	line-height: normal;
}

.ich-sp p {
	margin: 0;
}

.ich-sp a {
	text-decoration: none;
}

/* Reset only this page's own lists — WooCommerce/WYSIWYG lists keep their styling */
.ich-sp-features,
.ich-sp-related__track,
.ich-sp .woocommerce-tabs ul.tabs {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------------------
 * Main product section
 * ------------------------------------------------------------------------ */

.ich-sp-main {
	background: var(--ich-sp-white);
	/* Theme header is position:fixed — clear it. The custom property is set from
	   the header's measured height by js/single-product.js; literals are the no-JS
	   fallback. */
	padding: calc(var(--ich-sp-header-h, 115px) + 24px) var(--ich-sp-gutter) 48px;
}

@media (min-width: 768px) {
	.ich-sp-main {
		padding-top: calc(var(--ich-sp-header-h, 130px) + 32px);
	}
}

@media (min-width: 1280px) {
	.ich-sp-main {
		padding-top: calc(var(--ich-sp-header-h, 150px) + 40px);
	}
}

.ich-sp-main__inner {
	display: flex;
	align-items: flex-start;
	gap: 48px;
	max-width: var(--ich-sp-max);
	margin: 0 auto;
}

/* ---------------------------------------------------------------------------
 * Gallery — WooCommerce's own markup (zoom + lightbox + flexslider preserved)
 * ------------------------------------------------------------------------ */

.ich-sp-gallery {
	flex: 0 0 500px;
	width: 500px;
	min-width: 0;
}

/* opacity is forced because WooCommerce ships the gallery at `opacity: 0` and
   relies on its own script to reveal it — this keeps the image visible even if
   that script is blocked or deferred. */
.ich-sp .woocommerce-product-gallery {
	position: relative;
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	opacity: 1 !important;
}

/* Main image frame.
   Once flexslider initialises it wraps the gallery in .flex-viewport and turns
   __wrapper into the moving track (an inline width of N x slideWidth), so the
   visible frame has to live on .flex-viewport. __wrapper is styled too, for
   products where the slider never initialises. */
.ich-sp .flex-viewport,
.ich-sp .woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;
	border: 1px solid var(--ich-sp-border);
	border-radius: 10px;
	background: var(--ich-sp-white);
	overflow: hidden;
}

/* Slider active — the track must not carry the frame as well, and must not clip:
   flexslider slides it with translate3d, so only .flex-viewport should hide the
   overflow. */
.ich-sp .flex-viewport .woocommerce-product-gallery__wrapper {
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.ich-sp .woocommerce-product-gallery__image {
	margin: 0;
}

.ich-sp .woocommerce-product-gallery__image a,
.ich-sp .woocommerce-product-gallery__image > div {
	display: block;
}

.woocommerce div.product.ich-sp .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: 520px;
	margin: 0;
	padding: 24px 48px;
	object-fit: contain;
	object-position: center;
	box-shadow: none;
}

/* Zoom / lightbox trigger — the circular magnifier in the design */
.woocommerce div.product.ich-sp div.images .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 15px;
	right: 17px;
	left: auto;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	background: var(--ich-sp-white);
	border-radius: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	font-size: 0;
	text-indent: 0;
	overflow: hidden;
}

.woocommerce div.product.ich-sp div.images .woocommerce-product-gallery__trigger::before,
.woocommerce div.product.ich-sp div.images .woocommerce-product-gallery__trigger::after {
	display: none;
}

.woocommerce div.product.ich-sp div.images .woocommerce-product-gallery__trigger img {
	display: none;
}

.woocommerce div.product.ich-sp div.images .woocommerce-product-gallery__trigger {
	background-image: url("../img/single-product/icon-zoom.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 17px 17px;
}

/* Thumbnails — WooCommerce/flexslider renders ol.flex-control-thumbs.
   Turned into a horizontal scroller; arrows are injected by js/single-product.js.
   Deliberately NOT re-initialised as a third-party carousel, so flexslider's own
   click-to-switch handlers stay intact. */
.ich-sp-thumbs {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
}

/* The boosted selector is essential, not cosmetic: WooCommerce's
   `.woocommerce div.product div.images .flex-control-thumbs { overflow: hidden }`
   (0,3,3) otherwise wins and the track cannot scroll at all — the arrows and
   touch-swipe both silently do nothing. */
.woocommerce div.product.ich-sp div.images .flex-control-thumbs,
.ich-sp .flex-control-thumbs,
.ich-sp-thumbs__viewport {
	flex: 1 1 auto;
	display: flex;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	/* `proximity`, not `mandatory`: mandatory snapping overrides a programmatic
	   scroll target and yanks the track back to 0, which silently breaks the
	   arrows. Smooth scrolling is requested per-call in JS instead of being set
	   here, for the same reason. */
	scroll-snap-type: x proximity;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.ich-sp .flex-control-thumbs::-webkit-scrollbar,
.ich-sp-thumbs__viewport::-webkit-scrollbar {
	display: none;
}

.ich-sp .flex-control-thumbs li {
	flex: 0 0 calc((100% - 30px) / 4);
	width: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

.woocommerce div.product.ich-sp .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: 100px;
	margin: 0;
	padding: 8px;
	background: var(--ich-sp-white);
	border: 1px solid var(--ich-sp-border);
	border-radius: 8px;
	object-fit: contain;
	opacity: 1;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.woocommerce div.product.ich-sp .flex-control-thumbs img:hover {
	border-color: #b8b8b8;
}

.woocommerce div.product.ich-sp .flex-control-thumbs img.flex-active {
	border: 2px solid var(--ich-sp-red);
	padding: 7px;
}

/* Thumbnail arrows */
.ich-sp-thumbs__nav {
	flex: 0 0 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: var(--ich-sp-white);
	border: 1.5px solid var(--ich-sp-border);
	border-radius: 16px;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
	transition: border-color 0.15s ease, opacity 0.15s ease;
}

.ich-sp-thumbs__nav--prev {
	background-image: url("../img/single-product/chevron-left.svg");
}

.ich-sp-thumbs__nav--next {
	background-image: url("../img/single-product/chevron-right.svg");
}

.ich-sp-thumbs__nav:hover {
	border-color: var(--ich-sp-red);
}

.ich-sp-thumbs__nav[disabled] {
	opacity: 0.35;
	cursor: default;
}

.ich-sp-thumbs__nav[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Product info column
 * ------------------------------------------------------------------------ */

.ich-sp-info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	min-width: 0;
}

.ich-sp-info__cats,
.ich-sp-info__cats a {
	color: var(--ich-sp-red);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.52px;
	line-height: normal;
	text-transform: uppercase;
}

.ich-sp-info__cats a:hover {
	text-decoration: underline;
}

.ich-sp-info__title {
	margin: 0;
	padding: 0;
	color: var(--ich-sp-ink);
	font-family: var(--ich-sp-font);
	font-size: 34px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
}

.ich-sp-info__desc {
	color: var(--ich-sp-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
}

.ich-sp-info__desc p {
	margin: 0 0 0.9em;
}

.ich-sp-info__desc p:last-child {
	margin-bottom: 0;
}

.ich-sp-info__desc ul {
	margin: 0 0 0.9em;
	padding-left: 20px;
	list-style: disc;
}

/* Feature points — only rendered for fork-arms products */
.ich-sp-features {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	width: 100%;
	padding: 6px 0;
}

.ich-sp-feature {
	display: flex;
	flex: 1 1 0;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}

.ich-sp-feature__icon {
	display: block;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}

.ich-sp-feature__label {
	color: var(--ich-sp-text);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.3;
}

.ich-sp-support {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.ich-sp-support__icon {
	display: block;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}

.ich-sp-support__text {
	flex: 1 1 auto;
	color: var(--ich-sp-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
}

/* The phone number is a tel: link but reads as part of the sentence */
.ich-sp-support__text a {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.ich-sp-support__text a:hover,
.ich-sp-support__text a:focus {
	color: var(--ich-sp-red);
	text-decoration: underline;
}

.ich-sp-rule {
	width: 100%;
	height: 1px;
	background: var(--ich-sp-border-soft);
}

/* ---------------------------------------------------------------------------
 * Add-to-cart form — WooCommerce markup, restyled
 * ------------------------------------------------------------------------ */

.ich-sp-form {
	width: 100%;
}

/* WooCommerce paints the price and stock line #958e09 via
   `.woocommerce:where(body:not(...)) div.product p.price` — :where() adds no
   specificity but the rest still totals (0,3,3), so match it here. */
.woocommerce div.product.ich-sp p.price,
.woocommerce div.product.ich-sp span.price,
.ich-sp .price {
	margin: 0;
	color: var(--ich-sp-accent);
	font-size: 24px;
	font-weight: 700;
}

.woocommerce div.product.ich-sp .stock,
.woocommerce div.product.ich-sp p.stock,
.ich-sp .stock {
	margin: 0 0 4px;
	color: var(--ich-sp-accent);
	font-size: 14px;
	font-weight: 600;
}

.ich-sp .price del {
	opacity: 0.55;
	margin-right: 8px;
}

.ich-sp .price ins {
	background: none;
	text-decoration: none;
}

/* One row for "Choose size" + "Quantity", with the button on the row beneath.
   WooCommerce nests the quantity and the button inside .single_variation_wrap >
   .woocommerce-variation-add-to-cart, so those wrappers are flattened with
   `display: contents` and the children ordered directly on the form. */
/* flex-start, not flex-end: the variations table can be taller than the quantity
   field (the "Clear" reset link sits under the select), which would otherwise
   push the stepper below the dropdown instead of level with it. Both fields lead
   with a label of matching height, so aligning tops lines up captions AND
   controls. */
.ich-sp form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 14px 24px;
	width: 100%;
	margin: 0;
}

/* WooCommerce clearfixes form.cart with `::before/::after { content:" "; display:table }`.
   Harmless on a block, but in a flex container each becomes a zero-width flex ITEM
   at order 0 — and the 24px column-gap still applies on both sides of them, pushing
   the size dropdown 48px right of the Add to Cart button below it. */
.woocommerce div.product.ich-sp form.cart::before,
.woocommerce div.product.ich-sp form.cart::after,
.ich-sp form.cart::before,
.ich-sp form.cart::after {
	content: none;
	display: none;
}

.ich-sp form.cart .single_variation_wrap,
.ich-sp form.cart .woocommerce-variation-add-to-cart {
	display: contents;
}

/* WooCommerce's aria-live reset alert is a visible block in the theme's
   screen-reader-text implementation. Flattening the wrappers above promoted it
   to a flex item, where it claimed ~48px at the head of the row and indented the
   size dropdown away from the button. Take it out of flow properly. */
.ich-sp form.cart .reset_variations_alert {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Specificity-matched against WooCommerce's `.woocommerce div.product form.cart
   table { margin-bottom: 1em }` (0,3,3), which otherwise drops the dropdown 15px
   below the stepper and widens the gap to the button. */
/* display:block, not table: as a `display: table` flex item the variations table
   sizes shrink-to-fit and ignores flex-grow, leaving it narrower than its track
   and offset ~48px from the button below. Its rows/cells are already blocks. */
.woocommerce div.product.ich-sp form.cart table.variations,
.ich-sp form.cart table.variations {
	display: block;
	flex: 1 1 300px;
	order: 1;
	width: auto;
	margin: 0;
}

.ich-sp-qty-field {
	flex: 0 0 auto;
	order: 2;
}

/* Simple products: the "special pricing" note sits on its own row above the
   controls (woocommerce/single-product/add-to-cart/simple.php). */
.ich-sp form.cart .ich-sp-note {
	flex: 1 1 100%;
	order: 0;
	margin: 0;
	color: var(--ich-sp-body);
	font-size: 14px;
	line-height: 1.5;
}

.ich-sp form.cart .ich-sp-note p {
	margin: 0;
}

.ich-sp form.cart .ich-sp-note a {
	color: var(--ich-sp-accent);
	font-weight: 600;
	text-decoration: underline;
}

/* Variation price / stock message spans its own row */
.ich-sp form.cart .woocommerce-variation {
	flex: 1 1 100%;
	order: 3;
	margin: 0;
}

.ich-sp form.cart .woocommerce-variation:empty {
	display: none;
}

/* align-self is what keeps simple products tidy: with no size dropdown the
   button shares a row with the quantity, and the form aligns tops — so without
   this the button would ride up level with the "QUANTITY" caption instead of
   with the stepper. Variable products are unaffected: their button wraps to its
   own line. */
.ich-sp form.cart button.single_add_to_cart_button {
	order: 4;
	align-self: flex-end;
}

/* Variation rows -> "CHOOSE SIZE" label + styled select */
.ich-sp table.variations {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
}

.ich-sp table.variations tbody,
.ich-sp table.variations tr,
.ich-sp table.variations th,
.ich-sp table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

.ich-sp table.variations tr + tr {
	margin-top: 16px;
}

.ich-sp table.variations th.label label,
.ich-sp-field__label {
	display: block;
	margin: 0 0 10px;
	color: var(--ich-sp-label);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.48px;
	line-height: normal;
	text-transform: uppercase;
}

.ich-sp select,
.ich-sp table.variations select {
	width: 100%;
	max-width: 100%;
	min-height: 0;
	margin: 0;
	padding: 13px 40px 13px 16px;
	background-color: var(--ich-sp-white);
	background-image: url("../img/single-product/chevron-down.svg");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px 14px;
	border: 1.5px solid var(--ich-sp-border-input);
	border-radius: 8px;
	color: var(--ich-sp-muted);
	font-family: var(--ich-sp-font);
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.ich-sp select:focus {
	outline: 2px solid var(--ich-sp-red);
	outline-offset: 2px;
}

.ich-sp .reset_variations {
	display: inline-block;
	margin-top: 8px;
	color: var(--ich-sp-muted);
	font-size: 13px;
	text-decoration: underline;
}

/* WooCommerce hides the "Clear" link with an inline `visibility: hidden`, which
   still reserves ~30px inside the variations table and pushes Add to Cart well
   clear of the dropdown. Collapse it while hidden; it takes its space back
   normally once a variation is selected and WooCommerce reveals it. */
.ich-sp .reset_variations[style*="visibility: hidden"] {
	display: none;
}

.ich-sp .woocommerce-variation-price {
	margin-bottom: 4px;
}

/* Quantity stepper + button row */

.ich-sp .quantity {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	margin: 0;
	background: var(--ich-sp-white);
	border: 1.5px solid var(--ich-sp-border-step);
	border-radius: 8px;
	overflow: hidden;
}

.ich-sp .quantity label {
	display: none;
}

.ich-sp-qty-btn {
	display: flex;
	flex: 0 0 46px;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background-color: transparent;
	border: 0;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 15px 15px;
}

.ich-sp-qty-btn--minus {
	background-image: url("../img/single-product/icon-minus.svg");
}

.ich-sp-qty-btn--plus {
	background-image: url("../img/single-product/icon-plus.svg");
}

.ich-sp-qty-btn:hover {
	background-color: #f6f6f6;
}

.ich-sp-qty-btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

.ich-sp .quantity input.qty {
	width: 48px;
	height: 46px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--ich-sp-text);
	font-family: var(--ich-sp-font);
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.ich-sp .quantity input.qty::-webkit-outer-spin-button,
.ich-sp .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Add to cart button.
   Selector is specificity-matched against WooCommerce's own
   `.woocommerce div.product form.cart .button` (0,4,2), which otherwise wins the
   padding and collapses the button to ~39px. Height is pinned to 48px so it lines
   up exactly with the quantity stepper beside it. */
.woocommerce div.product.ich-sp form.cart button.single_add_to_cart_button,
.ich-sp button.single_add_to_cart_button,
.ich-sp .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 375px;
	max-width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 20px;
	background: var(--ich-sp-red) !important;
	border: 0;
	border-radius: 8px;
	color: var(--ich-sp-white) !important;
	font-family: var(--ich-sp-font) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0.45px;
	line-height: normal;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ich-sp button.single_add_to_cart_button::after {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	background-image: url("../img/single-product/icon-cart.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
}

.ich-sp button.single_add_to_cart_button:hover {
	background: #d60000 !important;
}

.ich-sp button.single_add_to_cart_button.disabled,
.ich-sp button.single_add_to_cart_button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.ich-sp .stock.out-of-stock {
	color: var(--ich-sp-red);
	font-size: 14px;
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Tabs / additional information
 * ------------------------------------------------------------------------ */

.ich-sp-tabs {
	background: var(--ich-sp-white);
	padding: 28px var(--ich-sp-gutter) 48px;
}

.ich-sp-tabs__inner {
	max-width: var(--ich-sp-max);
	margin: 0 auto;
}

.ich-sp .woocommerce-tabs {
	padding: 0;
	margin: 0;
}

/* WooCommerce draws these as classic "folder" tabs: each li gets a white
   background, a 1px #cfc8d8 border, rounded top corners and ::before/::after
   curves, and the ul carries `padding-left: 1em`. The design has none of that —
   just a label with a red underline, flush with the panel's left edge. Its
   selectors are (0,4,3), so these are specificity-matched to strip it. */
.woocommerce div.product.ich-sp .woocommerce-tabs ul.tabs,
.ich-sp .woocommerce-tabs ul.tabs {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	margin: 0 0 24px;
	padding: 0;
	border-bottom: 1.5px solid var(--ich-sp-border-tab);
}

.woocommerce div.product.ich-sp .woocommerce-tabs ul.tabs::before,
.woocommerce div.product.ich-sp .woocommerce-tabs ul.tabs::after,
.ich-sp .woocommerce-tabs ul.tabs::before,
.ich-sp .woocommerce-tabs ul.tabs::after {
	display: none;
}

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

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

.woocommerce div.product.ich-sp .woocommerce-tabs ul.tabs li a,
.ich-sp .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0 0 12px;
	border-bottom: 3px solid transparent;
	color: var(--ich-sp-muted);
	font-family: var(--ich-sp-font);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.26px;
	line-height: normal;
	text-shadow: none;
	text-transform: uppercase;
}

.woocommerce div.product.ich-sp .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product.ich-sp .woocommerce-tabs ul.tabs li a:hover,
.ich-sp .woocommerce-tabs ul.tabs li.active a,
.ich-sp .woocommerce-tabs ul.tabs li a:hover {
	color: var(--ich-sp-text);
	border-bottom-color: var(--ich-sp-red);
}

/* WooCommerce's `.woocommerce div.product .woocommerce-tabs .panel { padding: 0 }`
   (0,4,2) outranks a plain .ich-sp selector, so match its specificity. */
.woocommerce div.product.ich-sp .woocommerce-tabs .panel,
.ich-sp .woocommerce-tabs .panel {
	margin: 0;
	padding: 32px 36px;
	background: var(--ich-sp-white);
	border: 1.5px solid var(--ich-sp-border-card);
	border-radius: 12px;
}

.ich-sp .woocommerce-tabs .panel > h2 {
	display: none;
}

.ich-sp table.woocommerce-product-attributes {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.ich-sp table.woocommerce-product-attributes tr {
	background: none;
}

/* WooCommerce's shop_attributes styling has to be undone explicitly:
   it italicises every value, dot-underlines each row and stripes the even ones —
   the design has none of that. `tr:nth-child(even) td` is (0,3,2), hence the
   matching specificity below. */
.woocommerce div.product.ich-sp table.woocommerce-product-attributes th,
.woocommerce div.product.ich-sp table.woocommerce-product-attributes td,
.ich-sp table.woocommerce-product-attributes th,
.ich-sp table.woocommerce-product-attributes td {
	padding: 10px 12px;
	background: none;
	border: 0;
	color: #000000;
	font-size: 18px;
	font-style: normal;
	line-height: 1.3;
	text-align: left;
	vertical-align: top;
}

.woocommerce div.product.ich-sp table.woocommerce-product-attributes tr:nth-child(even) th,
.woocommerce div.product.ich-sp table.woocommerce-product-attributes tr:nth-child(even) td,
.woocommerce div.product.ich-sp table.woocommerce-product-attributes tr:nth-child(odd) th,
.woocommerce div.product.ich-sp table.woocommerce-product-attributes tr:nth-child(odd) td {
	background: none;
}

.woocommerce div.product.ich-sp table.woocommerce-product-attributes th,
.ich-sp table.woocommerce-product-attributes th {
	width: 217px;
	font-weight: 700;
}

.woocommerce div.product.ich-sp table.woocommerce-product-attributes td,
.ich-sp table.woocommerce-product-attributes td {
	font-weight: 400;
}

.ich-sp table.woocommerce-product-attributes td p {
	margin: 0;
	line-height: 1.7;
}

/* Hardcoded fork-extension spec table (woocommerce/single-product/fork-extension-table.php) */
.ich-sp .tablesaw {
	width: 100%;
	margin-bottom: 2rem;
	border: 1px solid #000000;
	border-collapse: collapse;
}

.ich-sp .tablesaw tr:nth-of-type(odd) {
	background: #eeeeee;
}

.ich-sp .tablesaw th {
	background: #b10023;
	color: var(--ich-sp-white);
	font-weight: 700;
	text-transform: uppercase;
}

.ich-sp .tablesaw td,
.ich-sp .tablesaw th {
	padding: 6px;
	border: 1px solid #000000;
}

.ich-sp .tablesaw .part {
	font-weight: 700;
}

@media (min-width: 1024px) {
	.ich-sp .tablesaw {
		text-align: center;
	}

	.ich-sp .tablesaw .price {
		background: #b10023;
		color: var(--ich-sp-white);
	}

	.ich-sp .tablesaw tr:hover,
	.ich-sp .tablesaw tr:hover .price {
		background: var(--ich-sp-red);
		color: var(--ich-sp-white);
	}
}

/* ---------------------------------------------------------------------------
 * Related products slider
 * ------------------------------------------------------------------------ */

.ich-sp-related {
	background: var(--ich-sp-white);
	padding: 8px var(--ich-sp-gutter) 56px;
}

/* Side padding reserves a gutter for the arrows so they sit OUTSIDE the cards
   rather than overlapping the first and last one, as in the design. */
.ich-sp-related__inner {
	position: relative;
	max-width: var(--ich-sp-max);
	margin: 0 auto;
	padding: 0 48px;
}

.ich-sp-related__title {
	margin: 0 0 24px;
	padding: 0;
	color: var(--ich-sp-text);
	font-family: var(--ich-sp-font);
	font-size: 22px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0;
	text-align: center;
}

.ich-sp-related__viewport {
	overflow: hidden;
}

.ich-sp-related__track {
	display: flex;
	gap: 20px;
	transition: transform 0.35s ease;
}

.ich-sp-related__item {
	flex: 0 0 calc((100% - 60px) / 4);
	min-width: 0;
}

.ich-sp-related__nav {
	position: absolute;
	top: calc(50% + 12px);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background-color: var(--ich-sp-white);
	border: 1.5px solid var(--ich-sp-border);
	border-radius: 17px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
	transform: translateY(-50%);
}

.ich-sp-related__nav--prev {
	left: 0;
	background-image: url("../img/single-product/chevron-left.svg");
}

.ich-sp-related__nav--next {
	right: 0;
	background-image: url("../img/single-product/chevron-right.svg");
}

.ich-sp-related__nav:hover {
	border-color: var(--ich-sp-red);
}

.ich-sp-related__nav[disabled] {
	opacity: 0.3;
	cursor: default;
}

.ich-sp-related__nav[hidden] {
	display: none;
}

/* Card — mirrors the category archive card */
.ich-sp-card {
	display: flex;
	height: 100%;
	background: var(--ich-sp-white);
	border: 1px solid var(--ich-sp-border-card);
	border-radius: 12px;
	overflow: hidden;
}

.ich-sp-card__link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	min-height: 400px;
	padding-top: 16px;
	transition: box-shadow 0.2s ease;
}

.ich-sp-card:hover {
	border-color: #9a9a9a;
}

.ich-sp-card:hover .ich-sp-card__link {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.ich-sp-card__media {
	width: 100%;
	max-width: 240px;
	height: 220px;
	flex: 0 0 220px;
	background: var(--ich-sp-white);
}

.ich-sp-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	object-fit: contain;
	object-position: center;
	box-shadow: none;
}

.ich-sp-card__body {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	padding: 16px 18px 20px;
}

.ich-sp-card__title {
	margin: 0;
	padding: 0;
	min-height: 40px;
	color: #000000;
	font-family: var(--ich-sp-font);
	font-size: 15px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0;
	overflow-wrap: anywhere;
}

.ich-sp-card__price {
	color: var(--ich-sp-red);
	font-size: 17px;
	font-weight: 700;
	line-height: normal;
}

.ich-sp-card__price .woocommerce-Price-amount,
.ich-sp-card__price bdi,
.ich-sp-card__price del,
.ich-sp-card__price ins {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
	background: none;
}

.ich-sp-card__price del {
	opacity: 0.55;
	margin-right: 6px;
}

.ich-sp-card__more {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 2px;
	color: #9a9a9a;
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
}

.ich-sp-card__more svg {
	display: block;
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
	fill: currentColor;
	transition: transform 0.2s ease;
}

.ich-sp-card:hover .ich-sp-card__more {
	color: var(--ich-sp-red);
}

.ich-sp-card:hover .ich-sp-card__more svg {
	transform: translateX(3px);
}

/* ---------------------------------------------------------------------------
 * CTA
 * ------------------------------------------------------------------------ */

.ich-sp-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 96px 32px;
	background: #000000;
	text-align: center;
}

.ich-sp-cta__title {
	margin: 0;
	padding: 0;
	color: var(--ich-sp-white);
	font-family: var(--ich-sp-font);
	font-size: 36px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0;
}

.ich-sp-cta__text {
	max-width: 720px;
	color: var(--ich-sp-white);
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
}

.ich-sp-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	background: var(--ich-sp-cta-btn);
	color: var(--ich-sp-white);
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	transition: background-color 0.15s ease;
}

.ich-sp-cta__button:hover {
	background: var(--ich-sp-red);
	color: var(--ich-sp-white);
}

/* ---------------------------------------------------------------------------
 * Tablet
 * ------------------------------------------------------------------------ */

@media (max-width: 1279px) {
	.ich-sp {
		--ich-sp-gutter: 40px;
	}

	.ich-sp-gallery {
		flex-basis: 420px;
		width: 420px;
	}

	.woocommerce div.product.ich-sp .woocommerce-product-gallery__image img {
		height: 440px;
	}

	.ich-sp-related__item {
		flex-basis: calc((100% - 40px) / 3);
	}
}

@media (max-width: 1023px) {
	.ich-sp-main__inner {
		flex-direction: column;
		gap: 32px;
	}

	.ich-sp-gallery {
		flex: 0 0 auto;
		width: 100%;
	}

	.ich-sp-info {
		width: 100%;
	}

	.ich-sp-related__item {
		flex-basis: calc((100% - 20px) / 2);
	}
}

/* ---------------------------------------------------------------------------
 * Mobile — matches "ichinen-mobile-product" (390px)
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.ich-sp {
		--ich-sp-gutter: 16px;
	}

	.ich-sp-main {
		padding: calc(var(--ich-sp-header-h, 115px) + 16px) var(--ich-sp-gutter) 24px;
	}

	.ich-sp-main__inner {
		gap: 20px;
	}

	.woocommerce div.product.ich-sp .woocommerce-product-gallery__image img {
		height: 300px;
		padding: 16px 24px;
	}

	.woocommerce div.product.ich-sp div.images .woocommerce-product-gallery__trigger {
		top: 10px;
		right: 10px;
		width: 34px;
		height: 34px;
		background-size: 15px 15px;
	}

	/* Four thumbs across, matching the mobile mockup */
	.ich-sp .flex-control-thumbs li {
		flex-basis: calc((100% - 24px) / 4);
	}

	.woocommerce div.product.ich-sp .flex-control-thumbs img {
		height: 72px;
	}

	.ich-sp-thumbs {
		margin-top: 12px;
		gap: 8px;
	}

	/* Arrows are redundant on a touch scroller */
	.ich-sp-thumbs__nav {
		display: none;
	}

	.ich-sp-info {
		gap: 14px;
	}

	.ich-sp-info__cats,
	.ich-sp-info__cats a {
		font-size: 12px;
	}

	.ich-sp-info__title {
		font-size: 26px;
	}

	.ich-sp-info__desc {
		font-size: 14px;
	}

	/* Feature points stack into a single column */
	.ich-sp-features {
		flex-direction: column;
		gap: 12px;
		padding: 2px 0;
	}

	.ich-sp-feature {
		flex: 0 0 auto;
		align-items: center;
		width: 100%;
	}

	.ich-sp-feature__label {
		font-size: 13px;
	}

	.ich-sp-support {
		align-items: flex-start;
		padding: 12px;
		background: var(--ich-sp-surface);
		border-radius: 8px;
	}

	.ich-sp-support__text {
		font-size: 13px;
	}

	/* Everything stacks; the quantity caption sits inline with its stepper */
	.ich-sp form.cart {
		gap: 12px 16px;
	}

	.ich-sp form.cart table.variations {
		flex: 1 1 100%;
	}

	.ich-sp-qty-field {
		display: flex;
		flex: 1 1 100%;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}

	.ich-sp-qty-field .ich-sp-field__label {
		margin: 0;
	}

	.woocommerce div.product.ich-sp form.cart button.single_add_to_cart_button,
	.ich-sp button.single_add_to_cart_button,
	.ich-sp .single_add_to_cart_button {
		width: 100%;
	}

	/* Tabs collapse into accordion rows on the design's tinted band */
	.ich-sp-tabs {
		padding: 24px 16px;
		background: #f9f9fb;
	}

	.ich-sp-related__inner {
		padding: 0;
	}

	/* Promote each <li> to a flex item of the wrapper so js/single-product.js can
	   interleave the `order` of headers and panels into a true accordion. */
	.ich-sp .woocommerce-tabs.ich-sp-tabs--ordered {
		display: flex;
		flex-direction: column;
	}

	/* Must out-specify the boosted desktop `ul.tabs` rule, otherwise its
	   `display: flex; align-items: flex-start` wins and each accordion header
	   shrinks to its text width instead of filling the row. */
	.woocommerce div.product.ich-sp .woocommerce-tabs.ich-sp-tabs--ordered ul.tabs,
	.ich-sp .woocommerce-tabs.ich-sp-tabs--ordered ul.tabs {
		display: contents;
	}

	.woocommerce div.product.ich-sp .woocommerce-tabs ul.tabs,
	.ich-sp .woocommerce-tabs ul.tabs {
		flex-direction: column;
		gap: 0;
		margin: 0;
		border-bottom: 0;
	}

	/* Accordion row — Figma component 4634:809 */
	.woocommerce div.product.ich-sp .woocommerce-tabs ul.tabs li a,
	.ich-sp .woocommerce-tabs ul.tabs li a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 16px;
		background: var(--ich-sp-white);
		border: 1px solid var(--ich-sp-border-soft);
		border-radius: 8px;
		color: var(--ich-sp-ink);
		font-size: 18px;
		font-weight: 700;
		line-height: normal;
		text-transform: none;
		letter-spacing: 0;
	}

	.ich-sp .woocommerce-tabs ul.tabs li + li a {
		margin-top: 8px;
	}

	.woocommerce div.product.ich-sp .woocommerce-tabs ul.tabs li a::after,
	.ich-sp .woocommerce-tabs ul.tabs li a::after {
		content: "";
		display: block;
		width: 20px;
		height: 20px;
		flex: 0 0 20px;
		background-image: url("../img/single-product/chevron-accordion.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 20px 20px;
		/* The asset is a chevron-UP; closed state points it down. */
		transform: rotate(180deg);
		transition: transform 0.2s ease;
	}

	/* Accordion state is driven by ich-sp-acc-open, NOT WooCommerce's .active:
	   with a single tab that tab is permanently "active", so keying off it would
	   leave the panel stuck open. js/single-product.js toggles the class. */
	/* The desktop `li.active a` rule paints the label #222, and with a single tab
	   that li is permanently active — restate the design's #141414 above it. */
	.woocommerce div.product.ich-sp .woocommerce-tabs ul.tabs li.active a,
	.woocommerce div.product.ich-sp .woocommerce-tabs ul.tabs li a:hover,
	.ich-sp .woocommerce-tabs ul.tabs li.active a {
		color: var(--ich-sp-ink);
		border-bottom-color: var(--ich-sp-border-soft);
	}

	/* Open: chevron points up (asset's natural direction) */
	.woocommerce div.product.ich-sp .woocommerce-tabs ul.tabs li.ich-sp-acc-active a::after,
	.ich-sp .woocommerce-tabs ul.tabs li.ich-sp-acc-active a::after {
		transform: rotate(0deg);
	}

	/* Open: header joins the panel below into one card */
	.woocommerce div.product.ich-sp .woocommerce-tabs ul.tabs li.ich-sp-acc-active a,
	.ich-sp .woocommerce-tabs ul.tabs li.ich-sp-acc-active a {
		border-bottom-color: transparent;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	/* Collapsed by default, as in the mobile mockup. !important is needed because
	   WooCommerce's tab script writes `display` inline on the panels. */
	.woocommerce div.product.ich-sp .woocommerce-tabs .panel,
	.ich-sp .woocommerce-tabs .panel {
		display: none !important;
		/* -1px so the panel's top border sits on the header's bottom border,
		   making the open accordion read as a single card. */
		margin-top: -1px;
		padding: 16px;
		border: 1px solid var(--ich-sp-border-soft);
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	/* Must out-specify the boosted closed rule above, or the panel never opens. */
	.woocommerce div.product.ich-sp .woocommerce-tabs .panel.ich-sp-acc-open,
	.ich-sp .woocommerce-tabs .panel.ich-sp-acc-open {
		display: block !important;
	}

	.ich-sp table.woocommerce-product-attributes th,
	.ich-sp table.woocommerce-product-attributes td {
		display: block;
		width: 100%;
		padding: 4px 0;
		font-size: 14px;
	}

	.ich-sp table.woocommerce-product-attributes th {
		padding-top: 12px;
	}

	/* Related: two cards visible, matching the mockup */
	.ich-sp-related {
		padding: 8px var(--ich-sp-gutter) 32px;
	}

	.ich-sp-related__title {
		margin-bottom: 16px;
		font-size: 18px;
		text-align: left;
	}

	.ich-sp-related__item {
		flex-basis: calc((100% - 12px) / 2);
	}

	.ich-sp-related__track {
		gap: 12px;
	}

	.ich-sp-related__nav {
		display: none;
	}

	.ich-sp-related__viewport {
		overflow-x: auto;
		scroll-behavior: smooth;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.ich-sp-related__viewport::-webkit-scrollbar {
		display: none;
	}

	.ich-sp-card__link {
		min-height: 0;
		padding-top: 12px;
	}

	.ich-sp-card__media {
		height: 130px;
		flex-basis: 130px;
		max-width: 100%;
	}

	.ich-sp-card__body {
		gap: 6px;
		padding: 12px;
	}

	.ich-sp-card__title {
		min-height: 0;
		font-size: 13px;
		line-height: 1.35;
	}

	.ich-sp-card__price {
		font-size: 13px;
	}

	.ich-sp-card__more {
		display: none;
	}

	/* CTA */
	.ich-sp-cta {
		gap: 24px;
		padding: 48px 20px;
	}

	.ich-sp-cta__title {
		font-size: 24px;
	}

	.ich-sp-cta__text {
		font-size: 14px;
	}

	.ich-sp-cta__button {
		padding: 12px 24px;
		font-size: 16px;
	}
}