/**
 * WooCommerce styles for Apple Refurb.
 * The theme disables WooCommerce's default CSS (see inc/woocommerce.php) and
 * styles the store from scratch to match the design system in style.css.
 */

/* ---------- Shop notices ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	border-radius: var(--arf-radius-sm);
	border: 1px solid var(--arf-gray-200);
	background: var(--arf-gray-100);
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.woocommerce-message { border-color: #bfe3c8; background: #eef9f1; }
.woocommerce-error { border-color: #f3c2c2; background: #fdeeee; color: var(--arf-danger); }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; }

/* ---------- Breadcrumb ---------- */
.woocommerce-breadcrumb {
	color: var(--arf-gray-500);
	font-size: .85rem;
	margin-bottom: 1.5rem;
}
.woocommerce-breadcrumb a { color: var(--arf-gray-700); }

/* ---------- Catalog toolbar ---------- */
.woocommerce-result-count { color: var(--arf-gray-500); font-size: .9rem; }
.woocommerce-ordering select {
	padding: .5rem 2rem .5rem .75rem;
	border-radius: 980px;
	border: 1px solid var(--arf-gray-300);
	background: #fff;
	font: inherit;
}

/* ---------- Product grid ---------- */
.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--arf-gutter);
	list-style: none;
	margin: 0;
	padding: 0;
	clear: both;
}
.woocommerce ul.products li.product,
ul.products li.product {
	position: relative;
	margin: 0;
	width: auto !important;
	float: none !important;
	background: #fff;
	border: 1px solid var(--arf-gray-200);
	border-radius: var(--arf-radius);
	padding: 1.25rem;
	text-align: center;
	transition: transform var(--arf-transition), box-shadow var(--arf-transition);
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--arf-shadow); }
ul.products li.product a img {
	margin: 0 auto 1rem;
	border-radius: var(--arf-radius-sm);
	aspect-ratio: 1 / 1;
	object-fit: contain;
}
ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem;
	font-weight: 600;
	padding: 0;
	margin: 0 0 .35rem;
	color: var(--arf-gray-900);
}
ul.products li.product .price {
	display: block;
	color: var(--arf-gray-900);
	font-weight: 600;
	margin-bottom: .75rem;
}
ul.products li.product .price del { color: var(--arf-gray-500); font-weight: 400; margin-right: .4rem; }
ul.products li.product .price ins { text-decoration: none; }
.star-rating { margin: 0 auto .5rem; color: var(--arf-accent); }

/* On-sale flash badge */
.woocommerce span.onsale,
span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--arf-gray-900);
	color: #fff;
	border-radius: 980px;
	padding: .25rem .7rem;
	font-size: .72rem;
	font-weight: 600;
	min-height: auto;
	line-height: 1.4;
	margin: 0;
}

/* ---------- Single product ---------- */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}
.single-product div.product .woocommerce-product-gallery { margin: 0; }
.single-product div.product .woocommerce-product-gallery img { border-radius: var(--arf-radius); }
.single-product div.product .product_title { margin-top: 0; }
.single-product div.product p.price {
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--arf-gray-900);
	margin: .5rem 0 1rem;
}
.single-product div.product p.price del { color: var(--arf-gray-500); font-weight: 400; }
.single-product .woocommerce-product-details__short-description { color: var(--arf-gray-700); }
.single-product form.cart { margin: 1.5rem 0; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.single-product form.cart .quantity input.qty {
	width: 72px;
	padding: .75rem;
	border: 1px solid var(--arf-gray-300);
	border-radius: 980px;
	text-align: center;
	font: inherit;
}
.single-product .product_meta { font-size: .85rem; color: var(--arf-gray-500); margin-top: 1rem; }

/* Tabs */
.woocommerce-tabs { grid-column: 1 / -1; margin-top: clamp(32px, 5vw, 64px); }
.woocommerce-tabs ul.tabs {
	display: flex;
	gap: .5rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0 0 .75rem;
	border-bottom: 1px solid var(--arf-gray-200);
	flex-wrap: wrap;
}
.woocommerce-tabs ul.tabs li a { color: var(--arf-gray-500); font-weight: 500; padding: .5rem .9rem; border-radius: 980px; }
.woocommerce-tabs ul.tabs li.active a { background: var(--arf-gray-100); color: var(--arf-gray-900); }

/* Related / upsells */
.related.products, .upsells.products { grid-column: 1 / -1; margin-top: clamp(32px, 5vw, 64px); }
.related.products > h2, .upsells.products > h2 { text-align: center; margin-bottom: 1.5rem; }

/* ---------- Cart & checkout tables ---------- */
.woocommerce table.shop_table {
	border: 1px solid var(--arf-gray-200);
	border-radius: var(--arf-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { padding: 1rem; border-top: 1px solid var(--arf-gray-200); }
.woocommerce table.shop_table thead th { background: var(--arf-gray-100); border-top: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--arf-gray-500); }
.cart_totals, .woocommerce-checkout #order_review {
	border: 1px solid var(--arf-gray-200);
	border-radius: var(--arf-radius);
	padding: 1.5rem;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection {
	width: 100%;
	padding: .8rem 1rem;
	border: 1px solid var(--arf-gray-300);
	border-radius: var(--arf-radius-sm);
	font: inherit;
	background: #fff;
}
.woocommerce-checkout .col2-set,
.woocommerce-cart .cart-collaterals { display: grid; gap: var(--arf-gutter); }
@media (min-width: 769px) {
	.woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px,4vw,48px); align-items: start; }
	.woocommerce-checkout #customer_details { grid-column: 1; }
	.woocommerce-checkout #order_review,
	.woocommerce-checkout #order_review_heading { grid-column: 2; }
}

/* ---------- My account ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: inline-block; padding: .5rem 1rem; border-radius: 980px; background: var(--arf-gray-100); color: var(--arf-gray-700); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--arf-gray-900); color: #fff; }

/* ---------- Pagination ---------- */
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; gap: .35rem; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border: 1px solid var(--arf-gray-200);
	border-radius: 10px;
	min-width: 40px;
	height: 40px;
	line-height: 40px;
	padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--arf-gray-900); color: #fff; border-color: var(--arf-gray-900); }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	.single-product div.product { grid-template-columns: 1fr; }
}

/* ---------- Single product: demo presentation ---------- */
/* Static rating */
.arf-rating { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: .9rem; color: var(--arf-gray-700); }
.arf-rating__stars { display: inline-flex; gap: 2px; }
.arf-star { width: 15px; height: 15px; background: var(--arf-gray-300);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.5 7 .6-5.3 4.6 1.6 6.8L12 17.3 5.1 20.5l1.6-6.8L1.4 9.1l7-.6z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.5 7 .6-5.3 4.6 1.6 6.8L12 17.3 5.1 20.5l1.6-6.8L1.4 9.1l7-.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.arf-star.is-full { background: var(--arf-accent); }
.arf-star.is-half { background: linear-gradient(90deg, var(--arf-accent) 50%, var(--arf-gray-300) 50%); }
.arf-rating__num { font-weight: 600; color: var(--arf-gray-900); }
.arf-rating__count { color: var(--arf-gray-500); }

/* Option groups (condition cards + storage pills) */
.arf-variation-ui { display: flex; flex-direction: column; gap: 1.25rem; margin: 1.25rem 0; }
.arf-opt__label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--arf-gray-500); margin-bottom: .5rem; }
.arf-opt__row { display: flex; flex-wrap: wrap; gap: .6rem; }
/* Hide the native dropdowns once enhanced */
.variations_form.arf-enhanced table.variations { display: none; }
.variations_form.arf-enhanced .woocommerce-variation-add-to-cart { margin-top: .5rem; }

.arf-pill { padding: .6rem 1.1rem; border-radius: 980px; border: 1px solid var(--arf-gray-300);
	background: #fff; color: var(--arf-gray-900); font: inherit; font-weight: 500; cursor: pointer;
	transition: border-color var(--arf-transition), background var(--arf-transition); }
.arf-pill:hover { border-color: var(--arf-gray-500); }
.arf-pill.is-active { border-color: var(--arf-gray-900); background: var(--arf-gray-900); color: #fff; }

.arf-cards { display: grid; grid-template-columns: repeat(3, 1fr); }
.arf-card { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
	padding: .85rem 1rem; border-radius: var(--arf-radius-sm); border: 1.5px solid var(--arf-gray-300);
	background: #fff; cursor: pointer; text-align: left; font: inherit; transition: border-color var(--arf-transition), box-shadow var(--arf-transition); }
.arf-card:hover { border-color: var(--arf-gray-500); }
.arf-card.is-active { border-color: var(--arf-accent); box-shadow: 0 0 0 1px var(--arf-accent); }
.arf-card__name { font-weight: 600; color: var(--arf-gray-900); }
.arf-card__price { font-size: .9rem; color: var(--arf-gray-500); }

/* Color swatches */
.arf-swatches { margin: 1.25rem 0; }
.arf-swatch { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18);
	background: var(--swatch, #ccc); cursor: pointer; padding: 0; outline-offset: 3px;
	box-shadow: inset 0 0 0 2px #fff; transition: transform var(--arf-transition); }
.arf-swatch:hover { transform: scale(1.08); }
.arf-swatch.is-active { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--arf-gray-900); }

/* Trust badges + what's-in-the-box */
.arf-assurance { list-style: none; margin: 1.25rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.arf-assurance li { position: relative; padding-left: 1.4rem; font-size: .9rem; color: var(--arf-gray-700); }
.arf-assurance li::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; transform: translateY(-50%);
	background: var(--arf-success);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }
.arf-assurance--cart { justify-content: center; margin-top: 1.5rem; border-top: 1px solid var(--arf-gray-200); padding-top: 1.5rem; }
.arf-included { margin: 1.5rem 0; padding: 1.25rem; border: 1px solid var(--arf-gray-200); border-radius: var(--arf-radius-sm); background: var(--arf-gray-100); }
.arf-included h3 { font-size: 1rem; margin: 0 0 .6rem; }
.arf-included ul { margin: 0; padding-left: 1.1rem; color: var(--arf-gray-700); }
.arf-included__note { margin: .6rem 0 0; font-size: .85rem; color: var(--arf-gray-500); }

/* Specs table */
.arf-specs { width: 100%; border-collapse: collapse; }
.arf-specs th, .arf-specs td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--arf-gray-200); vertical-align: top; }
.arf-specs th { width: 34%; color: var(--arf-gray-500); font-weight: 500; }

@media (max-width: 480px) {
	.arf-cards { grid-template-columns: 1fr; }
}

/* ---------- Homepage: grade cards ---------- */
.arf-grade-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.arf-grade-card { display: block; padding: 1.5rem; border: 1px solid var(--arf-gray-200); border-radius: var(--arf-radius);
	background: #fff; color: inherit; transition: transform var(--arf-transition), box-shadow var(--arf-transition); }
.arf-grade-card:hover { transform: translateY(-4px); box-shadow: var(--arf-shadow); text-decoration: none; }
.arf-grade-card h3 { margin: 0 0 .5rem; }
.arf-grade-card p { margin: 0; color: var(--arf-gray-500); font-size: .95rem; }