/* ============================================================
   SmartSF · WooCommerce skin (light, Arctic Silver)
   Mobile-first; PDP upgrades to two columns at ≥769px.
   ============================================================ */

.ssf-woo-wrap { padding: 48px 0 88px; background: var(--paper-2); min-height: 60vh; }

/* ---------- Notices ---------- */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border: 1px solid var(--line); border-top: 3px solid var(--teal);
	background: var(--paper); color: var(--ink-2);
	border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 22px;
	list-style: none;
}
.woocommerce-error { border-top-color: #d9534f; }
.woocommerce-message a.button, .woocommerce-info a.button { float: right; }

/* ---------- Buttons ---------- */
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #place_order,
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce button.button.alt.single_add_to_cart_button,
.wc-block-components-button {
	background: var(--teal-deep); color: #ffffff; border: 0; border-radius: 999px;
	padding: 13px 28px; font-weight: 600; font-size: 0.95rem; font-family: var(--font);
	cursor: pointer; transition: background 0.22s ease, box-shadow 0.22s ease;
	text-decoration: none; display: inline-block; line-height: 1.2;
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover,
.woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #place_order:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-button:hover {
	background: var(--teal-press); color: #ffffff; box-shadow: var(--glow-shadow);
}

/* Single-product store: no stock counter, no category meta */
.woocommerce div.product p.stock { display: none; }
.woocommerce div.product .product_meta .posted_in { display: none; }
.woocommerce a.button.disabled, .woocommerce button.button.disabled { opacity: 0.5; }

/* ---------- Single product (PDP) — mobile-first single column ---------- */
.woocommerce div.product { display: block; position: relative; }
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	float: none; width: 100%; margin-bottom: 32px;
}
.woocommerce div.product div.images img { border-radius: var(--radius); border: 1px solid var(--line); }
/* zoom overlay image must not inherit the frame border */
.woocommerce div.product div.images .zoomImg { border: 0; border-radius: 0; }
/* clip the square zoom overlay to the frame's rounded corners (flexslider sets overflow:hidden inline) */
.woocommerce div.product div.images .flex-viewport { border-radius: var(--radius); }
.woocommerce div.product .flex-control-thumbs { display: flex; gap: 10px; margin-top: 12px; padding: 0; }
.woocommerce div.product .flex-control-thumbs li { list-style: none; width: 72px; }
.woocommerce div.product .flex-control-thumbs img {
	border-radius: 10px; border: 1.5px solid var(--line); cursor: pointer; opacity: 0.7;
}
.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover { border-color: var(--teal); opacity: 1; }

.woocommerce div.product .product_title {
	font-size: clamp(1.7rem, 4.6vw, 2.4rem); letter-spacing: -0.025em; margin-bottom: 8px;
}
.woocommerce div.product p.price {
	color: var(--ink); font-size: 1.5rem; font-weight: 700; margin: 10px 0 18px;
}
.woocommerce div.product p.price del { color: var(--ink-3); font-weight: 400; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--ink-3); }
.woocommerce div.product .woocommerce-product-details__short-description ul { padding-left: 1.1em; }
.woocommerce div.product .woocommerce-product-details__short-description li { margin-bottom: 6px; }

.woocommerce div.product form.cart { margin: 24px 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.woocommerce div.product form.cart div.quantity { margin: 0; }
.woocommerce .quantity .qty {
	width: 76px; padding: 12px 8px; text-align: center;
	border: 1.5px solid var(--line); border-radius: 999px; font: inherit;
}
.woocommerce div.product form.cart .button { flex: 1 1 auto; min-width: 180px; }
.ssf-buy-now { flex: 1 1 100%; text-align: center; }

.ssf-pdp-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ssf-pdp-trust span {
	font-size: 0.8rem; color: var(--teal-deep); background: var(--teal-soft);
	border-radius: 999px; padding: 5px 12px; font-weight: 600;
}
.woocommerce div.product .product_meta { color: var(--ink-3); font-size: 0.85rem; }

/* PDP tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0; margin: 0 0 22px; border-bottom: 1px solid var(--line); display: flex; gap: 4px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none; border: 0; border-radius: 0; margin: 0; padding: 0;
	list-style: none;
}
.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 {
	display: inline-block; padding: 12px 18px; font-weight: 600; color: var(--ink-3);
	border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--ink); border-bottom-color: var(--teal);
}
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 1.3rem; }

/* ---------- Cart ---------- */
.woocommerce table.shop_table {
	border: 1px solid var(--line); border-radius: var(--radius-sm);
	border-collapse: separate; border-spacing: 0;
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td {
	border-top: 0; border-bottom: 1px solid var(--paper-3); padding: 14px 12px;
}
.woocommerce table.shop_table img { border-radius: 10px; width: 64px; }
.woocommerce a.remove { color: var(--ink-3) !important; }
.woocommerce a.remove:hover { background: var(--ink); color: #fff !important; }
.woocommerce .cart_totals h2 { font-size: 1.25rem; }

/* ---------- Checkout ---------- */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, .woocommerce-page form .form-row input.input-text {
	padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
	font: inherit; color: var(--ink); background: var(--paper-2);
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus {
	outline: none; border-color: var(--teal);
}
.woocommerce form .form-row label { font-weight: 600; color: var(--ink); font-size: 0.9rem; }
#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
	background: var(--paper); border-radius: var(--radius);
}
.woocommerce-checkout #payment div.payment_box { background: var(--paper-3); color: var(--ink-2); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--paper-3); }
#order_review_heading { font-size: 1.3rem; }

/* ---------- Account ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; float: none; margin-bottom: 26px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: inline-block; padding: 8px 16px; border-radius: 999px;
	border: 1.5px solid var(--line); color: var(--ink-2); font-size: 0.9rem; font-weight: 500;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--ink); color: #fff; border-color: var(--ink);
}
.woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; }

/* Login/register two-up — flex from the start, no float clearfix ghosts
   (规范: vuepod #customer_login clearfix 坑) */
.woocommerce-account #customer_login::before,
.woocommerce-account #customer_login::after { display: none !important; content: none !important; }
.woocommerce-account #customer_login { display: flex; flex-direction: column; gap: 24px; }
.woocommerce-account #customer_login > div { float: none; width: 100%; min-width: 0; display: flex; flex-direction: column; }
.woocommerce-account #customer_login h2 { font-size: 1.35rem; }
.woocommerce-account #customer_login form {
	flex: 1 1 auto; border: 1px solid var(--line); border-radius: var(--radius);
	padding: 24px; margin: 0;
}

/* ---------- ≥769px upgrades ---------- */
@media (min-width: 769px) {
	.woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
	.woocommerce div.product div.images, .woocommerce div.product div.summary { width: 100%; margin-bottom: 0; }
	.woocommerce div.product .woocommerce-tabs, .woocommerce div.product .related { grid-column: 1 / -1; }
	.ssf-buy-now { flex: 0 1 auto; }
	.woocommerce-account #customer_login { flex-direction: row; align-items: stretch; }
	.woocommerce-account #customer_login > div { flex: 1 1 0; }
}