/* =====================================================================
   VULGAR — WooCommerce skin
   Typography + palette over Woo core styles: mono product names,
   condensed prices, crimson sale, square black buttons, dark drawer.
   ===================================================================== */

/* Breadcrumb ---------------------------------------------------------- */

.woocommerce-breadcrumb {
	font-family: var(--font-mono);
	font-size: 12.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-ink-soft) !important;
	margin-bottom: 34px !important;
}

.woocommerce-breadcrumb a {
	color: var(--c-black) !important;
}

/* Result count / ordering --------------------------------------------- */

.woocommerce-result-count {
	font-family: var(--font-mono);
	font-size: 13.5px;
	color: var(--c-ink-soft);
}

.woocommerce-ordering select {
	font-family: var(--font-mono);
	font-size: 13.5px;
	border: 1px solid var(--c-black);
	border-radius: 0;
	padding: 8px 10px;
	background: var(--c-white);
}

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

.woocommerce ul.products {
	margin: 0;
}

/* Transparent, not white: the section behind carries the static grain, and a
   solid card would sit on it as a clean rectangle. The product images are
   opaque JPEGs, so nothing needs a backing plate. */
.woocommerce ul.products li.product {
	position: relative;
	text-align: center;
	background: transparent;
}

/* Product shots are cropped to 3:4 by Woo (see vulgar_woocommerce_image_sizes),
   so they fill the frame -- contain would letterbox a photo that already fits. */
.woocommerce ul.products li.product a img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
	margin-bottom: 12px;
	transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover a img {
	transform: scale(1.04);
}

/* Second gallery image swap */
.woocommerce ul.products li.product .product-hover-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.woocommerce ul.products li.product:hover .product-hover-img {
	opacity: 1;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: 14.5px;
	letter-spacing: var(--ls);
	color: var(--c-black);
	padding: 0 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.woocommerce ul.products li.product .price {
	display: block;
	margin-top: 6px;
	font-family: var(--font-cond);
	font-size: 1.2em;
	letter-spacing: var(--ls);
	color: var(--c-black);
}

.woocommerce ul.products li.product .price del {
	color: var(--c-black);
	opacity: 1;
	margin-right: 8px;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	font-weight: 400;
	color: var(--c-sale);
}

.woocommerce ul.products li.product .button {
	margin-top: 10px;
}

/* Sale badge ---------------------------------------------------------- */

.woocommerce span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	min-height: 0;
	min-width: 0;
	border-radius: 0;
	background: var(--c-chip);
	color: var(--c-accent);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	padding: 6px 10px;
	margin: 0;
}

/* Buttons ------------------------------------------------------------- */

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #payment #place_order {
	border-radius: 0;
	background: var(--c-black);
	color: var(--c-white);
	font-family: var(--font-cond);
	font-weight: 400;
	font-size: 16px;
	letter-spacing: var(--ls);
	text-transform: uppercase;
	padding: 0.72em 1.5em;
	border: 2px solid var(--c-black);
	transition: background 0.2s ease, color 0.2s ease;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #payment #place_order:hover {
	background: var(--c-white);
	color: var(--c-black);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--c-black);
	color: var(--c-white);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--c-white);
	color: var(--c-black);
}

.woocommerce a.added_to_cart {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--c-accent-ink);
	padding-top: 8px;
	display: inline-block;
}

/* Single product ------------------------------------------------------ */

.woocommerce div.product .product_title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1.15;
}

.woocommerce div.product .woocommerce-product-rating {
	margin-top: 8px;
}

.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
	color: var(--c-accent-ink);
}

.woocommerce div.product p.price {
	font-family: var(--font-cond);
	font-size: 1.6em;
	letter-spacing: var(--ls);
	color: var(--c-black);
	margin: 16px 0;
}

.woocommerce div.product p.price del {
	color: var(--c-black);
	opacity: 1;
}

.woocommerce div.product p.price ins {
	text-decoration: none;
	font-weight: 400;
	color: var(--c-sale);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	font-family: var(--font-mono);
	font-size: 15px;
	color: var(--c-ink-soft);
}

.woocommerce div.product form.cart {
	margin: 26px 0;
}

.woocommerce div.product form.cart div.quantity .qty {
	height: 46px;
	border: 1px solid var(--c-black);
	border-radius: 0;
	font-family: var(--font-mono);
	font-size: 15px;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	height: 46px;
	font-size: 18px;
}

.woocommerce div.product .product_meta {
	font-family: var(--font-mono);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-ink-soft);
	border-top: 1px solid var(--c-grey);
	padding-top: 16px;
}

.woocommerce div.product .product_meta a {
	color: var(--c-accent-ink);
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 24px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border-bottom: 1px solid var(--c-black);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0 18px 0 0;
	padding: 0;
}

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

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--font-cond);
	font-weight: 400;
	font-size: 18px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-ink-soft);
	padding: 10px 2px;
}

/* Woo core paints the active tab #fff, and `li.active` outranks the base `li`
   rule above, so on a dark page it renders as a white chip with white text. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--c-black);
	box-shadow: inset 0 -2px 0 var(--c-black);
}

.woocommerce div.product .woocommerce-tabs .panel {
	font-family: var(--font-mono);
	font-size: 15px;
}

.woocommerce section.related > h2,
.woocommerce section.upsells > h2 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(24px, 3vw, 34px);
	text-align: center;
	margin-bottom: 34px;
}

/* Gallery */
.woocommerce div.product div.images img {
	background: var(--c-grey-soft);
}

.woocommerce div.product div.images .flex-control-thumbs li img {
	opacity: 0.55;
	transition: opacity 0.2s ease;
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
	opacity: 1;
}

/* Quantity + forms ---------------------------------------------------- */

.woocommerce form .form-row label {
	font-family: var(--font-cond);
	font-size: 15px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
	border: 1px solid var(--c-black);
	border-radius: 0;
	padding: 11px 12px;
	font-family: var(--font-mono);
	font-size: 14px;
	background: var(--c-white);
	height: auto;
}

/* Cart page ----------------------------------------------------------- */

.woocommerce table.shop_table {
	border: 1px solid var(--c-black);
	border-radius: 0;
	border-collapse: collapse;
	font-family: var(--font-mono);
	font-size: 14px;
}

.woocommerce table.shop_table th {
	font-family: var(--font-cond);
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	border-color: var(--c-grey);
}

.woocommerce a.remove {
	color: var(--c-black) !important;
	border-radius: 0;
}

.woocommerce a.remove:hover {
	background: var(--c-sale);
	color: var(--c-white) !important;
}

.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-billing-fields > h3,
.woocommerce-additional-fields > h3 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 26px;
}

.woocommerce .coupon .input-text {
	border: 1px solid var(--c-black) !important;
	border-radius: 0;
	font-family: var(--font-mono);
	padding: 10px 12px !important;
}

/* Notices ------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: 0;
	border-left: 3px solid var(--c-black);
	border-radius: 0;
	background: var(--c-grey-soft);
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--c-black);
}

.woocommerce-message {
	border-left-color: var(--c-accent-ink);
}

.woocommerce-message::before {
	color: var(--c-accent-ink);
}

.woocommerce-info::before {
	color: var(--c-black);
}

.woocommerce-error {
	border-left-color: var(--c-sale);
}

.woocommerce-error::before {
	color: var(--c-sale);
}

/* Mini cart (drawer) -------------------------------------------------- */

.cart-drawer ul.woocommerce-mini-cart {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cart-drawer li.woocommerce-mini-cart-item {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 14px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--c-line-dark);
	position: relative;
}

.cart-drawer li.woocommerce-mini-cart-item img {
	width: 64px;
	height: 84px;
	object-fit: contain;
	background: var(--c-white);
	float: none;
	margin: 0;
	grid-column: 1;
	grid-row: 1;
}

.cart-drawer li.woocommerce-mini-cart-item a:not(.remove) {
	color: var(--c-white);
	font-family: var(--font-mono);
	font-size: 13.5px;
	line-height: 1.45;
}

.cart-drawer li.woocommerce-mini-cart-item .quantity {
	display: block;
	font-family: var(--font-cond);
	font-size: 15px;
	letter-spacing: 0.05em;
	color: var(--c-accent);
	margin-top: 4px;
}

.cart-drawer li.woocommerce-mini-cart-item a.remove {
	position: absolute;
	top: 12px;
	right: 0;
	color: rgba(255, 255, 255, 0.7) !important;
	background: transparent;
	font-size: 20px;
}

.cart-drawer li.woocommerce-mini-cart-item a.remove:hover {
	color: var(--c-sale) !important;
	background: transparent;
}

.cart-drawer .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	padding: 16px 0;
	font-family: var(--font-cond);
	font-size: 19px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--c-white);
	border-bottom: 1px solid var(--c-line-dark);
}

.cart-drawer .woocommerce-mini-cart__total .amount {
	color: var(--c-accent);
}

.cart-drawer .woocommerce-mini-cart__buttons {
	display: grid;
	gap: 10px;
	margin: 18px 0 0;
}

.cart-drawer .woocommerce-mini-cart__buttons a.button {
	display: block;
	text-align: center;
	background: var(--c-white);
	color: var(--c-black);
	border-color: var(--c-white);
}

.cart-drawer .woocommerce-mini-cart__buttons a.button.checkout {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-black);
}

.cart-drawer .woocommerce-mini-cart__buttons a.button:hover {
	background: transparent;
	color: var(--c-white);
}

.cart-drawer .woocommerce-mini-cart__empty-message {
	font-family: var(--font-mono);
	color: var(--c-paper-soft);
	text-align: center;
	padding: 40px 0;
}

/* Account ------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--font-cond);
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--c-grey);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 2px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--c-accent-ink);
}

/* Star ratings in reviews */
.woocommerce p.stars a {
	color: var(--c-accent-ink);
}

/* Cart & Checkout blocks ------------------------------------------------
   WooCommerce's block cart/checkout hardcodes white form fields but lets the
   labels inherit the page colour. Once the page went dark that became white
   labels on white fields -- invisible. Restate the fields in the theme tokens
   (.sec-light has already inverted them) rather than fighting each block rule. */

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-textarea,
.wc-blocks-components-select__select {
	background: var(--c-white);
	color: var(--c-black);
	border-color: var(--c-grey);
}

.wc-block-components-text-input label,
.wc-blocks-components-select__label,
.wc-block-components-checkbox__label,
.wc-block-components-address-form__address_1 label {
	color: var(--c-ink-soft);
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus {
	outline: 2px solid var(--c-accent);
	outline-offset: 1px;
}

/* Totals, summary and panel chrome inherit fine, but the borders Woo draws are
   near-black and vanish on a dark surface. */
.wc-block-components-totals-wrapper,
.wc-block-components-order-summary,
.wp-block-woocommerce-checkout-order-summary-block {
	border-color: var(--c-grey);
}

/* Variations: size selector -------------------------------------------
   Woo renders this as a table with no styling of its own, so without these
   rules it lands as a raw browser dropdown in the middle of the buy box. */

.woocommerce div.product form.cart .variations {
	margin-bottom: 18px;
	border: 0;
	width: 100%;
}

.woocommerce div.product form.cart .variations tr {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.woocommerce div.product form.cart .variations th.label,
.woocommerce div.product form.cart .variations td {
	padding: 0;
	border: 0;
	text-align: left;
}

.woocommerce div.product form.cart .variations th.label {
	font-family: var(--font-cond);
	font-size: 15px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-black);
	min-width: 66px;
}

.woocommerce div.product form.cart .variations th.label label {
	margin: 0;
	font-weight: 400;
}

.woocommerce div.product form.cart .variations td.value {
	flex: 1;
	min-width: 180px;
}

.woocommerce div.product form.cart .variations select {
	width: 100%;
	min-height: 46px;
	padding: 10px 38px 10px 13px;
	border: 1px solid var(--c-black);
	border-radius: 0;
	background-color: var(--c-white);
	color: var(--c-black);
	font-family: var(--font-mono);
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;

	/* Native arrow is drawn in the OS colour scheme, which is light-on-light
	   here and effectively invisible. Draw our own. */
	appearance: none;
	-webkit-appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 19px) calc(50% + 2px),
		calc(100% - 13px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.woocommerce div.product form.cart .variations select:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

/* "Clear" link that appears once a size is chosen. */
.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: 6px;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-ink-soft);
}

.woocommerce div.product form.cart .reset_variations:hover {
	color: var(--c-accent);
}

/* Price shown once a variation is picked — Woo repeats it here. */
.woocommerce div.product .woocommerce-variation-price {
	margin-bottom: 12px;
}

.woocommerce div.product .woocommerce-variation-price .price {
	font-family: var(--font-cond);
	font-size: 26px;
	letter-spacing: 0.04em;
}

/* Until a size is chosen Add to Cart is disabled. Woo only sets a class, so
   the button otherwise looks fully enabled and the customer clicks a dead
   control — or, with no styling at all, the browser tints it. */
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
	background: transparent;
	color: var(--c-ink-soft);
	border-color: var(--c-grey);
	cursor: not-allowed;
	opacity: 1;
}

.woocommerce div.product form.cart .single_add_to_cart_button.disabled:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled:hover {
	background: transparent;
	color: var(--c-ink-soft);
}

/* Buy-box reassurance -------------------------------------------------- */

.vulgar-buy-notes {
	margin: 18px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--c-grey);
	font-family: var(--font-mono);
	font-size: 12.5px;
	line-height: 1.9;
	letter-spacing: 0.04em;
	color: var(--c-ink-soft);
	list-style: none;
}

.vulgar-buy-notes li::before {
	content: "—";
	margin-right: 9px;
	color: var(--c-accent);
}

/* Size guide ----------------------------------------------------------- */

.vulgar-sizeguide {
	margin: 4px 0 18px;
}

.vulgar-sizeguide summary {
	display: inline-block;
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 12.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-ink-soft);
	list-style: none;
}

.vulgar-sizeguide summary::-webkit-details-marker { display: none; }

.vulgar-sizeguide summary::before {
	content: "+ ";
	color: var(--c-accent);
}

.vulgar-sizeguide[open] summary::before { content: "− "; }
.vulgar-sizeguide summary:hover { color: var(--c-accent); }

.vulgar-sizeguide table {
	width: 100%;
	margin-top: 12px;
	border-collapse: collapse;
	font-family: var(--font-mono);
	font-size: 12.5px;
}

.vulgar-sizeguide th,
.vulgar-sizeguide td {
	padding: 7px 10px;
	border: 1px solid var(--c-grey);
	text-align: left;
}

.vulgar-sizeguide th {
	font-family: var(--font-cond);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 400;
}

.vulgar-sizeguide caption {
	caption-side: bottom;
	padding-top: 8px;
	font-size: 11.5px;
	color: var(--c-ink-soft);
	text-align: left;
}

/* Reduced motion --------------------------------------------------------
   main.css honours prefers-reduced-motion but this file did not, so the
   category-tile zoom and the variation transitions kept animating for people
   who have explicitly asked them not to. */

@media (prefers-reduced-motion: reduce) {
	.shop-cat .shop-cat-img,
	.shop-cat a:hover .shop-cat-img,
	.shop-cat a:focus-visible .shop-cat-img {
		transition: none;
		transform: none;
	}

	.woocommerce div.product form.cart .variations select,
	.vulgar-sizeguide summary {
		transition: none;
	}
}

/* Empty cart ------------------------------------------------------------
   The block cart's stock empty state is a grey sad-face emoji, which is the
   only screen on the site that looks like unconfigured WooCommerce. The icon
   class is gone from the page content; this styles what replaced it. */

.vulgar-empty-title {
	font-family: var(--font-display);
	font-size: clamp(26px, 4vw, 40px);
	margin-bottom: 6px;
}

.vulgar-empty-sub {
	font-family: var(--font-mono);
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--c-ink-soft);
	margin-bottom: 24px;
}

.wp-block-button.vulgar-empty-cta .wp-block-button__link {
	border-radius: 0;
	background: var(--c-black);
	color: var(--c-white);
	border: 2px solid var(--c-black);
	font-family: var(--font-cond);
	font-size: 16px;
	letter-spacing: var(--ls);
	text-transform: uppercase;
	padding: 0.72em 1.9em;
	transition: background 0.2s ease, color 0.2s ease;
}

.wp-block-button.vulgar-empty-cta .wp-block-button__link:hover {
	background: transparent;
	color: var(--c-black);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button.vulgar-empty-cta .wp-block-button__link { transition: none; }
}