/**
 * Islamic Relief — WooCommerce brand styling.
 *
 * Styles the default WooCommerce output (gallery, price, add-to-cart button,
 * quantity, tabs, related products, breadcrumb, notices) to match the theme
 * design system. The single-product layout itself is handled by the Tailwind
 * grid in woocommerce/content-single-product.php; this file dresses the parts
 * WooCommerce renders through its own hooks.
 *
 * Tokens: ir-blue #0077C8 · green #0b8109 · near-black #0b0b0c / #181818
 *         card #f8f8f8 · heading "Geogrotesque TRIAL" · body Inter
 */

:root {
	--ir-blue: #0077c8;
	--ir-green: #0b8109;
	--ir-ink: #0b0b0c;
	--ir-muted: #6b7280;
	--ir-card: #f8f8f8;
	--ir-line: #e6e6e6;
}

/* ---------- Breadcrumb ---------- */
.ir-pdp-breadcrumb .woocommerce-breadcrumb {
	font-family: Inter, sans-serif;
	font-size: 14px;
	color: var(--ir-muted);
}
.ir-pdp-breadcrumb a {
	color: var(--ir-muted);
	text-decoration: none;
}
.ir-pdp-breadcrumb a:hover {
	color: var(--ir-blue);
}

/* ---------- Layout: neutralise WooCommerce's default 48% float columns ----- */
/* woocommerce-layout.css floats the gallery/summary at 48% width; inside our
   CSS grid that shrinks them. Force full-width so the grid controls layout. */
.woocommerce div.product.ir-pdp {
	display: block;
}
.woocommerce div.product .ir-pdp-gallery,
.woocommerce div.product .ir-pdp-summary,
.ir-pdp-gallery .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
}

/* ---------- Gallery ---------- */
.ir-pdp-gallery {
	position: relative;
}
.ir-pdp-gallery .woocommerce-product-gallery__wrapper,
.ir-pdp-gallery .woocommerce-product-gallery__image {
	width: 100% !important;
	margin: 0 !important;
}
.ir-pdp-gallery .woocommerce-product-gallery__image a,
.ir-pdp-gallery .woocommerce-product-gallery__image img,
.ir-pdp-gallery .woocommerce-product-gallery img {
	width: 100% !important;
	display: block;
	border-radius: 24px;
}
.ir-pdp-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}
.ir-pdp-gallery .flex-control-thumbs li {
	width: 84px;
	margin: 0;
}
.ir-pdp-gallery .flex-control-thumbs img {
	border-radius: 12px;
	opacity: 0.6;
	transition: opacity 0.2s ease;
	cursor: pointer;
}
.ir-pdp-gallery .flex-control-thumbs img.flex-active,
.ir-pdp-gallery .flex-control-thumbs img:hover {
	opacity: 1;
}
.ir-pdp-gallery .onsale {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 5;
	margin: 0;
	background: var(--ir-green);
	color: #fff;
	font-family: Inter, sans-serif;
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	padding: 8px 14px;
	border-radius: 999px;
}

/* ---------- Summary ---------- */
.ir-pdp-summary .product_title,
.ir-pdp-summary h1.entry-title {
	font-family: "Geogrotesque TRIAL", sans-serif;
	font-weight: 600;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.1;
	color: var(--ir-ink);
	margin: 0;
}
.ir-pdp-summary .price,
.ir-pdp-summary p.price,
.ir-pdp-summary .price .woocommerce-Price-amount,
.ir-pdp-summary .price ins .woocommerce-Price-amount {
	font-family: Inter, sans-serif;
	font-size: 30px;
	font-weight: 700;
	color: var(--ir-ink) !important;
	margin: 0;
}
.ir-pdp-summary .price del {
	color: var(--ir-muted);
	font-weight: 400;
	opacity: 0.7;
	margin-right: 8px;
}
.ir-pdp-summary .price ins {
	text-decoration: none;
}
.ir-pdp-summary .woocommerce-product-details__short-description {
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: #374151;
}
.ir-pdp-summary .stock.in-stock {
	color: var(--ir-green);
	font-weight: 600;
}
.ir-pdp-summary .stock.out-of-stock {
	color: #b91c1c;
	font-weight: 600;
}

/* Star rating */
.ir-pdp-summary .star-rating span::before,
.woocommerce .star-rating span::before {
	color: #f5a623;
}

/* ---------- Quantity + Add to cart ---------- */
.ir-pdp-summary form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 14px;
	margin: 4px 0 0;
}
.ir-pdp-summary .quantity {
	display: inline-flex;
}
.ir-pdp-summary .quantity input.qty {
	width: 84px;
	height: 52px;
	border: 1px solid var(--ir-line);
	border-radius: 10px;
	text-align: center;
	font-family: Inter, sans-serif;
	font-size: 16px;
	color: var(--ir-ink);
	background: #fff;
}

/* Primary buttons (add to cart, place order, etc.) */
.woocommerce .ir-pdp-summary .button,
.woocommerce .ir-pdp-summary button.button,
.woocommerce .ir-pdp-summary .single_add_to_cart_button,
.woocommerce div.product form.cart .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--ir-green);
	color: #fff;
	font-family: Inter, sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	min-height: 52px;
	padding: 0 28px;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: filter 0.2s ease, background 0.2s ease;
}
.woocommerce .ir-pdp-summary .button:hover,
.woocommerce .ir-pdp-summary .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .button:hover {
	background: #0a7008;
	filter: none;
}

/* Variations table */
.ir-pdp-summary table.variations {
	margin: 0 0 8px;
}
.ir-pdp-summary table.variations td,
.ir-pdp-summary table.variations th {
	padding: 6px 0;
	vertical-align: middle;
}
.ir-pdp-summary table.variations select {
	min-height: 48px;
	border: 1px solid var(--ir-line);
	border-radius: 10px;
	padding: 0 12px;
	font-family: Inter, sans-serif;
	background: #fff;
}

/* Meta */
.ir-pdp-summary .product_meta {
	font-family: Inter, sans-serif;
	font-size: 14px;
	color: var(--ir-muted);
	margin-top: 12px;
	padding-top: 18px;
	border-top: 1px solid var(--ir-line);
}
.ir-pdp-summary .product_meta > span {
	display: block;
	margin-bottom: 4px;
}
.ir-pdp-summary .product_meta a {
	color: var(--ir-blue);
	text-decoration: none;
}

/* ---------- Tabs ---------- */
.ir-pdp-data .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin: 0 0 24px;
	padding: 0 0 2px;
	border-bottom: 1px solid var(--ir-line);
	list-style: none;
}
.ir-pdp-data .woocommerce-tabs ul.tabs::before {
	display: none;
}
.ir-pdp-data .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0 0 14px;
}
.ir-pdp-data .woocommerce-tabs ul.tabs li a {
	font-family: "Geogrotesque TRIAL", sans-serif;
	font-weight: 600;
	font-size: 18px;
	color: var(--ir-muted);
	text-decoration: none;
	padding: 0;
}
.ir-pdp-data .woocommerce-tabs ul.tabs li.active a {
	color: var(--ir-ink);
}
.ir-pdp-data .woocommerce-tabs ul.tabs li.active {
	box-shadow: inset 0 -3px 0 0 var(--ir-blue);
}
.ir-pdp-data .woocommerce-Tabs-panel h2 {
	font-family: "Geogrotesque TRIAL", sans-serif;
	font-weight: 600;
	font-size: 24px;
	color: var(--ir-ink);
	margin: 0 0 12px;
}
.ir-pdp-data .woocommerce-Tabs-panel {
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.75;
	color: #374151;
}

/* ---------- Related / Upsell products ---------- */
.ir-pdp-data .related > h2,
.ir-pdp-data .upsells > h2 {
	font-family: "Geogrotesque TRIAL", sans-serif;
	font-weight: 600;
	font-size: clamp(24px, 3vw, 34px);
	color: var(--ir-ink);
	margin: 0 0 28px;
}
.ir-pdp-data ul.products {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* WooCommerce adds clearfix ::before/::after on ul.products; in a grid
   container they count as grid items and shove the first card into cell 2. */
.ir-pdp-data ul.products::before,
.ir-pdp-data ul.products::after {
	content: none !important;
	display: none !important;
}
@media (min-width: 640px) {
	.ir-pdp-data ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.ir-pdp-data ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ir-pdp-data ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	background: var(--ir-card);
	border-radius: 24px;
	padding: 20px 20px 30px;
	text-align: left;
}
.ir-pdp-data ul.products li.product a img {
	border-radius: 16px;
	margin: 0 0 16px;
	aspect-ratio: 19 / 15;
	object-fit: cover;
	width: 100%;
}
.ir-pdp-data ul.products li.product .woocommerce-loop-product__title {
	font-family: "Geogrotesque TRIAL", sans-serif;
	font-weight: 600;
	font-size: 24px;
	color: var(--ir-ink);
	padding: 0;
}
.ir-pdp-data ul.products li.product .price {
	color: var(--ir-ink);
	font-family: Inter, sans-serif;
	font-weight: 700;
	font-size: 20px;
}
.ir-pdp-data ul.products li.product .price del {
	color: var(--ir-muted);
	font-weight: 400;
}
.woocommerce .ir-pdp-data ul.products li.product .button {
	margin-top: 12px;
	background: var(--ir-green);
	color: #fff;
	border-radius: 10px;
	padding: 12px 20px;
	font-family: Inter, sans-serif;
	font-weight: 500;
	font-size: 15px;
}
.woocommerce .ir-pdp-data ul.products li.product .button:hover {
	background: #0a7008;
}

/* ---------- Reviews / review form ---------- */
.ir-pdp-data #reviews #comments > h2 {
	font-family: "Geogrotesque TRIAL", sans-serif;
	font-weight: 600;
	font-size: clamp(22px, 3vw, 30px);
	color: var(--ir-ink);
	margin: 0 0 20px;
}
.ir-pdp-data #review_form_wrapper {
	max-width: 640px;
}
.ir-pdp-data #review_form .comment-reply-title {
	font-family: "Geogrotesque TRIAL", sans-serif;
	font-weight: 600;
	font-size: 20px;
	color: var(--ir-ink);
	display: block;
	margin-bottom: 16px;
}
.ir-pdp-data #review_form .comment-form-rating label,
.ir-pdp-data #review_form .comment-form label {
	font-family: Inter, sans-serif;
	font-weight: 500;
	font-size: 15px;
	color: var(--ir-ink);
	display: block;
	margin-bottom: 8px;
}
.ir-pdp-data #review_form input[type="text"],
.ir-pdp-data #review_form input[type="email"],
.ir-pdp-data #review_form textarea {
	width: 100%;
	font-family: Inter, sans-serif;
	font-size: 16px;
	color: var(--ir-ink);
	background: #fff;
	border: 1px solid var(--ir-line) !important;
	border-radius: 12px !important;
	padding: 14px 16px !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ir-pdp-data #review_form textarea {
	min-height: 140px;
	resize: vertical;
}
.ir-pdp-data #review_form input[type="text"]:focus,
.ir-pdp-data #review_form input[type="email"]:focus,
.ir-pdp-data #review_form textarea:focus {
	outline: none;
	border-color: var(--ir-blue) !important;
	box-shadow: 0 0 0 3px rgba(0, 119, 200, 0.15) !important;
}
.ir-pdp-data #review_form .comment-form-comment,
.ir-pdp-data #review_form .comment-form-author,
.ir-pdp-data #review_form .comment-form-email,
.ir-pdp-data #review_form .comment-form-rating {
	margin-bottom: 18px;
}
.ir-pdp-data #review_form .stars a {
	color: #f5a623;
}
.woocommerce .ir-pdp-data #review_form #submit,
.woocommerce .ir-pdp-data #review_form input#submit.submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ir-green) !important;
	color: #fff !important;
	font-family: Inter, sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	min-height: 52px;
	padding: 0 32px !important;
	border: 0 !important;
	border-radius: 10px !important;
	cursor: pointer;
	transition: background 0.2s ease;
}
.woocommerce .ir-pdp-data #review_form #submit:hover {
	background: #0a7008 !important;
}

/* ---------- Notices ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	font-family: Inter, sans-serif;
	border-top-color: var(--ir-blue);
	border-radius: 10px;
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--ir-blue);
}
.woocommerce-message .button,
.woocommerce-info .button {
	background: var(--ir-green);
	color: #fff;
	border-radius: 8px;
}

/* ==========================================================================
   Cart / Checkout / Account
   These render as normal pages (shortcodes) through the theme's page.php with
   a full-width `.container`, so we constrain width and brand the WC output.
   ========================================================================== */

.woocommerce-cart .container,
.woocommerce-checkout .container,
.woocommerce-account .container,
.woocommerce-cart .content-area,
.woocommerce-checkout .content-area,
.woocommerce-account .content-area {
	max-width: 1320px;
	margin-inline: auto;
	padding-inline: 16px;
}
.woocommerce-cart .content-area,
.woocommerce-checkout .content-area,
.woocommerce-account .content-area {
	padding-top: 32px;
	padding-bottom: 64px;
}
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title {
	font-family: "Geogrotesque TRIAL", sans-serif;
	font-weight: 600;
	font-size: clamp(28px, 4vw, 44px);
	color: var(--ir-ink);
	margin: 0 0 24px;
}

/* ---------- Shared table shell (cart + order review) ---------- */
.woocommerce table.shop_table {
	border: 1px solid var(--ir-line) !important;
	border-radius: 16px !important;
	border-collapse: separate !important;
	border-spacing: 0;
	overflow: hidden;
	font-family: Inter, sans-serif;
	margin: 0 0 24px;
}
.woocommerce table.shop_table thead th {
	background: var(--ir-card);
	font-family: "Geogrotesque TRIAL", sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--ir-ink);
	text-transform: none;
	padding: 16px 20px;
	border: 0;
}
.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	padding: 16px 20px;
	border-top: 1px solid var(--ir-line);
	vertical-align: middle;
	color: var(--ir-ink);
}
.woocommerce table.shop_table tbody tr:first-child td {
	border-top: 0;
}
.woocommerce-cart table.cart img,
.woocommerce table.shop_table .product-thumbnail img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 12px;
}
.woocommerce a.remove {
	color: #b91c1c !important;
	font-weight: 700;
	border-radius: 999px;
	width: 22px;
	height: 22px;
	line-height: 20px;
	text-align: center;
}
.woocommerce a.remove:hover {
	background: #b91c1c !important;
	color: #fff !important;
}
.woocommerce table.cart td.product-name a {
	color: var(--ir-ink);
	font-weight: 600;
	text-decoration: none;
}
.woocommerce table.cart td.product-name a:hover {
	color: var(--ir-blue);
}
.woocommerce .cart .quantity input.qty {
	width: 72px;
	height: 46px;
	border: 1px solid var(--ir-line);
	border-radius: 10px;
	text-align: center;
	font-family: Inter, sans-serif;
	color: var(--ir-ink);
	background: #fff;
}

/* ---------- Coupon + update row ---------- */
.woocommerce .cart .actions {
	padding: 16px 20px;
}
.woocommerce .cart .actions .coupon input.input-text {
	width: 220px;
	max-width: 100%;
	height: 48px;
	border: 1px solid var(--ir-line) !important;
	border-radius: 10px !important;
	padding: 0 14px !important;
	font-family: Inter, sans-serif;
	margin-right: 10px;
}

/* ---------- Buttons (cart, coupon, checkout, place order) ---------- */
.woocommerce .cart .button,
.woocommerce .cart input.button,
.woocommerce .cart .actions .button,
.woocommerce a.checkout-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order,
.woocommerce-account .woocommerce-Button.button,
.woocommerce form.login .button,
.woocommerce form.register .button {
	background: var(--ir-green) !important;
	color: #fff !important;
	font-family: Inter, sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	min-height: 50px;
	padding: 0 28px !important;
	border: 0 !important;
	border-radius: 10px !important;
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
}
.woocommerce .cart .button:hover,
.woocommerce a.checkout-button:hover,
.woocommerce #place_order:hover {
	background: #0a7008 !important;
}
/* Update cart is a secondary action — outline until it's active. */
.woocommerce .cart .actions .button[name="update_cart"],
.woocommerce .cart .actions button[name="update_cart"] {
	background: #fff !important;
	color: var(--ir-ink) !important;
	border: 1px solid var(--ir-line) !important;
}
.woocommerce .cart .actions .button[name="update_cart"]:disabled {
	opacity: 0.5;
}

/* ---------- Cart totals + checkout review ---------- */
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce .cart-collaterals h2 {
	font-family: "Geogrotesque TRIAL", sans-serif;
	font-weight: 600;
	font-size: 22px;
	color: var(--ir-ink);
	margin: 0 0 16px;
}
.woocommerce .cart_totals table.shop_table {
	margin-bottom: 20px;
}
.woocommerce .cart_totals .order-total .amount,
.woocommerce-checkout .order-total .amount {
	color: var(--ir-ink) !important;
	font-weight: 700;
}
.woocommerce .wc-proceed-to-checkout {
	padding: 0;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	line-height: 50px;
	font-size: 17px;
	font-weight: 600;
}

/* ---------- Checkout form fields ---------- */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
	font-family: "Geogrotesque TRIAL", sans-serif;
	font-weight: 600;
	font-size: 20px;
	color: var(--ir-ink);
	margin: 0 0 16px;
}
.woocommerce form .form-row label {
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--ir-ink);
	margin-bottom: 6px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout .select2-container .select2-selection {
	border: 1px solid var(--ir-line) !important;
	border-radius: 10px !important;
	min-height: 48px;
	padding: 10px 14px !important;
	font-family: Inter, sans-serif;
	font-size: 15px;
	color: var(--ir-ink);
	background: #fff;
	box-shadow: none !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--ir-blue) !important;
	box-shadow: 0 0 0 3px rgba(0, 119, 200, 0.15) !important;
}
.woocommerce-checkout #payment {
	background: var(--ir-card);
	border-radius: 16px;
}
.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--ir-line);
}

/* ---------- Empty cart ---------- */
.woocommerce .cart-empty.woocommerce-info {
	font-family: Inter, sans-serif;
}
.woocommerce .return-to-shop .button {
	background: var(--ir-green) !important;
	color: #fff !important;
	border-radius: 10px !important;
	padding: 12px 24px !important;
}

/* ==========================================================================
   Cart & Checkout BLOCKS (Gutenberg / WooCommerce Blocks)
   The block checkout uses .wc-block-* classes, not the classic markup, so it
   needs its own brand overrides.
   ========================================================================== */

.wc-block-checkout,
.wc-block-cart,
.wp-block-woocommerce-checkout,
.wc-block-components-form {
	font-family: Inter, sans-serif;
	color: var(--ir-ink);
}

/* Step + section titles */
.wc-block-components-title,
.wc-block-checkout__main h2,
.wc-block-components-checkout-step__title,
.wc-block-components-order-summary .wc-block-components-title {
	font-family: "Geogrotesque TRIAL", sans-serif !important;
	font-weight: 600 !important;
	color: var(--ir-ink) !important;
}

/* Inputs, selects, textareas */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-select .wc-block-components-select__container,
.wc-block-components-address-form input,
.wc-block-components-combobox .components-form-token-field__input-container,
.wc-block-components-quantity-selector {
	border-radius: 10px !important;
	border-color: var(--ir-line) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus,
.wc-block-components-select .wc-block-components-select__container:focus-within {
	border-color: var(--ir-blue) !important;
	box-shadow: 0 0 0 2px rgba(0, 119, 200, 0.2) !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-checkout-step--with-step-number .wc-block-components-text-input.is-active label {
	color: var(--ir-blue) !important;
}

/* Radio / checkbox accents (payment method, save details, etc.) */
.wc-block-components-radio-control__input,
.wc-block-components-checkbox__input[type="checkbox"] {
	accent-color: var(--ir-blue);
}
.wc-block-components-radio-control__option--checked {
	box-shadow: inset 0 0 0 2px var(--ir-blue) !important;
	border-radius: 8px;
}

/* Primary buttons (Place Order, etc.) */
.wc-block-components-button.contained,
.wc-block-components-checkout-place-order-button,
button.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout .wc-block-components-button.contained {
	background-color: var(--ir-green) !important;
	color: #fff !important;
	border-radius: 10px !important;
	min-height: 54px;
	font-family: Inter, sans-serif !important;
	font-weight: 600 !important;
	font-size: 16px !important;
}
.wc-block-components-button.contained:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: #0a7008 !important;
}

/* Secondary / text buttons + links -> brand blue */
.wc-block-checkout a,
.wc-block-cart a,
.wc-block-components-button.wc-block-components-button--text,
.wc-block-components-panel__button {
	color: var(--ir-blue);
}

/* Order summary sidebar panel */
.wc-block-checkout__sidebar .wc-block-components-sidebar,
.wc-block-cart__sidebar .wc-block-components-sidebar {
	border: 1px solid var(--ir-line);
	border-radius: 16px;
	background: #fff;
}
.wc-block-components-order-summary-item__image img {
	border-radius: 10px !important;
}
.wc-block-components-order-summary-item__quantity {
	background: var(--ir-ink) !important;
}

/* Totals */
.wc-block-components-totals-item__value {
	font-family: Inter, sans-serif;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--ir-ink) !important;
	font-weight: 700 !important;
}

/* Block checkout responsive: sidebar drops under the form (WooCommerce already
   does this ~700px; keep the panel full width so it doesn't overflow). */
@media (max-width: 700px) {
	.wc-block-checkout,
	.wc-block-checkout__form,
	.wc-block-checkout__sidebar,
	.wc-block-checkout__main {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
	}
	/* Stack the two-column field rows (first/last name, city/state, etc.). */
	.wc-block-components-address-form,
	.wc-block-checkout__billing-fields .wc-block-components-address-form,
	.wc-block-checkout__shipping-fields .wc-block-components-address-form {
		grid-template-columns: 1fr !important;
	}
	.wc-block-components-address-form > .wc-block-components-text-input,
	.wc-block-components-address-form > .wc-block-components-select,
	.wc-block-components-text-input,
	.wc-block-components-select {
		grid-column: 1 / -1 !important;
		width: 100% !important;
	}
	/* Full-width primary action + summary padding. */
	.wc-block-components-checkout-place-order-button,
	.wc-block-components-button.contained {
		width: 100% !important;
	}
	.wc-block-checkout__sidebar .wc-block-components-sidebar {
		padding: 16px !important;
	}
	.wc-block-components-order-summary-item {
		gap: 10px;
	}
}

/* ==========================================================================
   Order received / Thank you + order details
   ========================================================================== */

.woocommerce .woocommerce-thankyou-order-received,
.woocommerce-order p.woocommerce-notice {
	font-family: Inter, sans-serif;
	font-size: 18px;
	color: var(--ir-ink);
	margin: 0 0 20px;
}

/* Order overview strip (number / date / email / total / payment) */
.woocommerce ul.woocommerce-order-overview.order_details {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 0 0 36px;
	padding: 20px 0;
	border-top: 1px solid var(--ir-line);
	border-bottom: 1px solid var(--ir-line);
}
.woocommerce ul.woocommerce-order-overview.order_details li {
	margin: 0;
	padding: 0 26px;
	border-right: 1px solid var(--ir-line);
	font-family: Inter, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ir-muted);
}
.woocommerce ul.woocommerce-order-overview.order_details li:first-child {
	padding-left: 0;
}
.woocommerce ul.woocommerce-order-overview.order_details li:last-child {
	border-right: 0;
}
.woocommerce ul.woocommerce-order-overview.order_details li strong {
	display: block;
	margin-top: 6px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ir-ink);
}

/* Section titles */
.woocommerce .woocommerce-order-details__title,
.woocommerce .woocommerce-column__title,
.woocommerce .woocommerce-customer-details h2 {
	font-family: "Geogrotesque TRIAL", sans-serif;
	font-weight: 600;
	font-size: 22px;
	color: var(--ir-ink);
	margin: 0 0 16px;
}

/* Order details table amounts */
.woocommerce table.order_details tfoot th,
.woocommerce table.woocommerce-table--order-details tfoot th {
	font-family: Inter, sans-serif;
	font-weight: 700;
	color: var(--ir-ink);
}
.woocommerce table.order_details .amount,
.woocommerce table.woocommerce-table--order-details .amount {
	color: var(--ir-ink) !important;
}
.woocommerce table.order_details tfoot tr:last-child th,
.woocommerce table.order_details tfoot tr:last-child td {
	font-size: 18px;
}

/* Customer / billing address card */
.woocommerce .woocommerce-customer-details address {
	font-family: Inter, sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: var(--ir-ink);
	border: 1px solid var(--ir-line);
	border-radius: 16px;
	padding: 20px 24px;
}
.woocommerce .woocommerce-customer-details address a {
	color: var(--ir-blue);
}

/* Responsive: stack the overview strip on phones. */
@media (max-width: 640px) {
	.woocommerce ul.woocommerce-order-overview.order_details {
		flex-direction: column;
		padding: 8px 0;
	}
	.woocommerce ul.woocommerce-order-overview.order_details li {
		padding: 12px 0;
		border-right: 0;
		border-bottom: 1px solid var(--ir-line);
	}
	.woocommerce ul.woocommerce-order-overview.order_details li:last-child {
		border-bottom: 0;
	}
}

/* ==========================================================================
   My Account
   ========================================================================== */

/* Two-column dashboard layout only applies when logged in (nav + content). */
.woocommerce-account.logged-in .woocommerce {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 32px;
}
.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper {
	flex: 1 1 100%;
	width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
	flex: 0 0 260px;
	max-width: 260px;
}
.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1;
	min-width: 0;
}

/* Navigation menu as a card */
.woocommerce-account .woocommerce-MyAccount-navigation {
	margin: 0 !important;
	padding: 0 !important;
}
.woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 8px !important;
	background: var(--ir-card);
	border: 1px solid var(--ir-line);
	border-radius: 16px;
}
.woocommerce-MyAccount-navigation ul li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.woocommerce-MyAccount-navigation ul li::before {
	display: none !important;
}
.woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 12px 16px;
	border-radius: 10px;
	font-family: Inter, sans-serif;
	font-weight: 500;
	font-size: 15px;
	color: var(--ir-ink);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.woocommerce-MyAccount-navigation ul li a:hover {
	background: #fff;
	color: var(--ir-blue);
}
.woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--ir-green);
	color: #fff;
}
.woocommerce-MyAccount-navigation ul li--woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	color: #b91c1c;
}

/* Content area */
.woocommerce-MyAccount-content {
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: #374151;
}
.woocommerce-MyAccount-content p {
	margin: 0 0 16px;
}
.woocommerce-MyAccount-content a {
	color: var(--ir-blue);
}
.woocommerce-MyAccount-content a.button,
.woocommerce-MyAccount-content .woocommerce-Button {
	color: #fff;
}
.woocommerce-MyAccount-content .woocommerce-MyAccount-content__title,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-family: "Geogrotesque TRIAL", sans-serif;
	font-weight: 600;
	color: var(--ir-ink);
}

/* Login / register (logged-out account page) */
.woocommerce-account:not(.logged-in) .woocommerce {
	max-width: 960px;
}
/* Heading ("Login" / "Register") that precedes each form. */
.woocommerce-account:not(.logged-in) .woocommerce > h2,
.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2,
.woocommerce-account .col2-set .col-1 > h2,
.woocommerce-account .col2-set .col-2 > h2 {
	font-family: "Geogrotesque TRIAL", sans-serif;
	font-weight: 600;
	font-size: 22px;
	color: var(--ir-ink);
	margin: 0 0 14px;
}
.woocommerce-account .woocommerce > .u-columns,
.woocommerce-account .woocommerce .col2-set {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	width: 100%;
	align-items: flex-start;
}
.woocommerce-account .u-column1,
.woocommerce-account .u-column2,
.woocommerce-account .col2-set .col-1,
.woocommerce-account .col2-set .col-2 {
	flex: 1 1 320px;
	max-width: 460px;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}
.woocommerce-account form.login,
.woocommerce-account form.register {
	width: 100%;
	max-width: 460px;
	background: var(--ir-card);
	border: 1px solid var(--ir-line);
	border-radius: 16px;
	padding: 28px;
	margin: 0;
}
.woocommerce-account .woocommerce-form-login__rememberme,
.woocommerce-account .woocommerce-form__label-for-checkbox {
	font-family: Inter, sans-serif;
	font-size: 14px;
	color: var(--ir-ink);
}
.woocommerce-account .woocommerce-LostPassword {
	margin-top: 14px;
	font-family: Inter, sans-serif;
}
.woocommerce-account .woocommerce-LostPassword a {
	color: var(--ir-blue);
}

/* Responsive: stack nav over content. */
@media (max-width: 768px) {
	.woocommerce-account .woocommerce {
		flex-direction: column;
		gap: 24px;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation {
		flex: 1 1 100%;
		max-width: 100%;
	}
	.woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}
	.woocommerce-MyAccount-navigation ul li a {
		padding: 10px 14px;
	}
}

/* ---------- Responsive ---------- */

/* Never let media/tables overflow the viewport on any Woo page. */
.woocommerce img,
.woocommerce .woocommerce-product-gallery img {
	max-width: 100%;
	height: auto;
}

/* Tablet: related products drop to 2-up (matches the .ir-pdp-data grid steps). */
@media (max-width: 1023px) {
	.ir-pdp-summary .product_title,
	.ir-pdp-summary h1.entry-title {
		font-size: clamp(26px, 6vw, 36px);
	}
	.ir-pdp-data .woocommerce-tabs ul.tabs {
		gap: 20px;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.ir-pdp-data .woocommerce-tabs ul.tabs li {
		flex: 0 0 auto;
	}
}

/* Phone: stack the buy row, full-width controls, tighter cards. */
@media (max-width: 640px) {
	.ir-pdp-summary form.cart {
		flex-direction: column;
		align-items: stretch;
	}
	.ir-pdp-summary .quantity,
	.ir-pdp-summary .quantity input.qty {
		width: 100%;
	}
	.woocommerce .ir-pdp-summary .single_add_to_cart_button,
	.woocommerce div.product form.cart .button {
		width: 100%;
	}
	.ir-pdp-summary table.variations select {
		width: 100%;
	}
	.ir-pdp-gallery .flex-control-thumbs {
		gap: 10px;
	}
	.ir-pdp-gallery .flex-control-thumbs li {
		width: 64px;
	}
	.ir-pdp-summary .price,
	.ir-pdp-summary p.price,
	.ir-pdp-summary .price .woocommerce-Price-amount {
		font-size: 26px;
	}
	.ir-pdp-data ul.products li.product {
		padding: 16px 16px 24px;
	}
}

/* ---------- Cart / Checkout / Account: keep them usable on mobile ---------- */
@media (max-width: 768px) {

	/* Cart table -> one card per line item, with data-title labels. */
	.woocommerce-cart table.cart thead {
		display: none;
	}
	.woocommerce-cart table.cart,
	.woocommerce-cart table.cart tbody {
		display: block;
		width: 100%;
	}
	.woocommerce-cart table.cart tbody tr.cart_item {
		display: block;
		position: relative;
		border: 1px solid var(--ir-line);
		border-radius: 14px;
		padding: 8px 8px 8px 12px;
		margin: 0 0 14px;
	}
	.woocommerce-cart table.cart tbody tr.cart_item td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		width: auto !important;
		border-top: 0 !important;
		padding: 10px 6px;
		text-align: right;
	}
	.woocommerce-cart table.cart tbody tr.cart_item td::before {
		content: attr(data-title);
		font-family: Inter, sans-serif;
		font-weight: 600;
		font-size: 13px;
		color: var(--ir-muted);
		text-align: left;
	}
	.woocommerce-cart table.cart td.product-remove {
		position: absolute;
		top: 10px;
		right: 10px;
		padding: 0;
	}
	.woocommerce-cart table.cart td.product-remove::before {
		display: none;
	}
	.woocommerce-cart table.cart td.product-thumbnail {
		justify-content: flex-start;
	}
	.woocommerce-cart table.cart td.product-thumbnail::before {
		display: none;
	}
	.woocommerce-cart table.cart td.product-thumbnail img {
		width: 88px;
		height: 88px;
	}
	.woocommerce-cart table.cart td.actions {
		display: block;
		text-align: left;
		padding: 12px 6px;
	}
	.woocommerce-cart table.cart td.actions::before {
		display: none;
	}
	.woocommerce-cart .cart .actions .coupon {
		display: flex;
		gap: 10px;
		margin-bottom: 12px;
	}
	.woocommerce-cart .cart .actions .coupon input.input-text {
		flex: 1;
		width: auto;
		margin-right: 0;
	}
	.woocommerce-cart .cart .actions .button,
	.woocommerce-cart .cart .actions .coupon .button {
		width: 100%;
	}

	/* Cart totals + checkout columns go full width and stack. */
	.woocommerce .cart-collaterals,
	.woocommerce-cart .cart-collaterals,
	.woocommerce .cart-collaterals .cart_totals {
		width: 100% !important;
		float: none !important;
	}
	.woocommerce .col2-set .col-1,
	.woocommerce .col2-set .col-2,
	.woocommerce-page .col2-set .col-1,
	.woocommerce-page .col2-set .col-2 {
		width: 100% !important;
		float: none !important;
	}
	.woocommerce #customer_details.col2-set,
	.woocommerce .woocommerce-checkout #customer_details {
		display: block;
	}
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last,
	.woocommerce-page form .form-row-first,
	.woocommerce-page form .form-row-last {
		width: 100% !important;
		float: none !important;
		margin-right: 0 !important;
	}
	.woocommerce .quantity,
	.woocommerce #content .quantity {
		float: none;
	}
	.woocommerce-cart .cart .quantity input.qty {
		width: 96px;
	}
}