/* Atolyeman x Blocksy — WooCommerce archive + single-product polish.
   Works WITH Blocksy (whose accent palette we remap to our tokens in main.css),
   layering editorial-premium card treatment and brand accents on top.
   All color comes from tokens, so these surfaces morph per segment too. */

/* ---------- Archive: shop / category / related ---------- */
.woocommerce ul.products li.product {
	position: relative; /* anchors the .at-badges stack */
	transition: transform .18s ease;
}
/* Our badge stack replaces Woo's sale flash in the loop. */
.woocommerce ul.products li.product span.onsale {
	display: none;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
}
.woocommerce ul.products li.product .ct-media-container {
	border-radius: var(--at-radius);
	overflow: hidden;
	background: var(--at-surface);
	transition: box-shadow .18s ease;
}
/* Show the whole product photo (no crop) with breathing room. */
.woocommerce ul.products li.product .ct-media-container img {
	object-fit: contain !important;
	padding: var(--at-space-4);
}
.woocommerce ul.products li.product:hover .ct-media-container {
	box-shadow: var(--at-shadow);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--at-font-sans);
	font-weight: 600;
	color: var(--at-text);
}
.woocommerce ul.products li.product .price {
	color: var(--at-text);
	font-weight: 700;
}
.woocommerce ul.products li.product .price del {
	color: var(--at-text-muted);
	font-weight: 400;
}
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

/* Sale badge — pill in brand accent */
.woocommerce span.onsale {
	background: var(--at-accent);
	color: var(--at-on-accent);
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1;
	min-height: 0;
	padding: var(--at-space-2) var(--at-space-3);
}

/* ---------- Single product ---------- */
.single-product div.product .entry-title,
.single-product div.product .product_title {
	font-family: var(--at-font-display);
	color: var(--at-text);
	letter-spacing: -.01em;
}
.single-product div.product .entry-summary .price {
	color: var(--at-text);
	font-weight: 700;
}
.single-product div.product .woocommerce-product-gallery img {
	border-radius: var(--at-radius);
	object-fit: contain;
}
.single-product div.product .woocommerce-product-details__short-description {
	color: var(--at-text-muted);
	font-size: var(--at-fs-300);
	line-height: var(--at-lh-body);
}

/* Section headings (tabs, related/upsell) in the display face */
.woocommerce-tabs .panel h2,
.related.products > h2,
.upsells.products > h2,
.cross-sells > h2 {
	font-family: var(--at-font-display);
}

/* ---------- Cart / checkout small touches (classic tables) ---------- */
.woocommerce table.shop_table {
	border-radius: var(--at-radius);
	overflow: hidden;
}

/* ---------- Block Cart & Checkout (wc-block-*) ---------- */
/* Primary block buttons (Proceed to checkout / Place order) in brand accent. */
.wc-block-components-button:not(.is-link) {
	background-color: var(--at-accent);
	color: var(--at-on-accent);
	border-radius: var(--at-radius-sm);
	font-weight: 600;
}
.wc-block-components-button:not(.is-link):hover {
	background-color: var(--at-accent-hover);
}

/* Section titles in the display face */
.wc-block-components-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
	font-family: var(--at-font-display);
	color: var(--at-text);
}

/* Focused form fields adopt the accent */
.wc-block-components-text-input input:focus,
.wc-block-components-text-input.is-active input {
	border-color: var(--at-accent);
	box-shadow: 0 0 0 1px var(--at-accent);
	outline: none;
}

/* Grand total emphasis */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--at-text);
	font-weight: 700;
}

/* ---------- My Account (classic) ---------- */
/* Center the login/register forms as tidy cards. */
.woocommerce-account:not(.logged-in) form.woocommerce-form-login,
.woocommerce-account:not(.logged-in) form.woocommerce-form-register {
	max-width: 460px;
	margin-inline: auto;
	background: var(--at-surface);
	border: 1px solid var(--at-border);
	border-radius: var(--at-radius);
	padding: var(--at-space-8);
}

/* Site Kit "Sign in with Google" button: Site Kit injects it as the FIRST child
   of the login form (above the username field). Reflow the form to a column and
   move the Google button directly above the "Giriş Yap" submit — full row width,
   button centred. Site Kit is a PRODUCTION-ONLY plugin, so these classes do not
   exist locally and this block is simply inert there. account-google.js then
   re-renders the GSI button at the container's pixel width (GSI caps at 400px,
   which comfortably fills the ~396px inner row of the 460px card). */
.woocommerce-account:not(.logged-in) form.woocommerce-form-login {
	display: flex;
	flex-direction: column;
}
.woocommerce-account:not(.logged-in) form.woocommerce-form-login > .form-row-wide {
	order: 1; /* username, then password */
}
/* Google button container on BOTH forms — full width, centred. On login the JS
   widens Site Kit's button; on register the JS inserts a mirrored one (see
   assets/js/account-google.js) directly above the submit, so only styling is
   needed there. */
.woocommerce-account:not(.logged-in) form.woocommerce-form-login > .googlesitekit-sign-in-with-google__frontend-output-button,
.woocommerce-account:not(.logged-in) form.woocommerce-form-register > .googlesitekit-sign-in-with-google__frontend-output-button {
	width: 100%;
	/* Site Kit hard-caps the container at max-width:320px via inline CSS, which
	   is what kept the button from filling the row — override it. */
	max-width: 100%;
	margin: var(--at-space-2) 0 var(--at-space-4);
	display: flex;
	justify-content: center;
}
.woocommerce-account:not(.logged-in) form.woocommerce-form-login > .googlesitekit-sign-in-with-google__frontend-output-button {
	order: 2; /* between the fields (order 1) and the submit row (order 3) */
}
.woocommerce-account:not(.logged-in) form.woocommerce-form-login > p.form-row:not(.form-row-wide) {
	order: 3; /* the "Beni hatırla" + "Giriş Yap" submit row */
}
.woocommerce-account:not(.logged-in) form.woocommerce-form-login > .lost_password {
	order: 4;
}

/* The "Giriş Yap" / "Üye Ol" headings are siblings of the form (not inside the
   card), so a centered card left them hanging at the column edge. Give each
   heading the same centered 460px box so its left edge lines up with its card. */
.woocommerce-account:not(.logged-in) .u-column1 > h2,
.woocommerce-account:not(.logged-in) .u-column2 > h2 {
	max-width: 460px;
	margin: 0 auto var(--at-space-4);
	font-family: var(--at-font-display);
	font-size: var(--at-fs-500);
	font-weight: 500;
}

/* Classic woo text inputs — accent focus (login/register, address forms). */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	border-color: var(--at-accent);
	box-shadow: 0 0 0 1px var(--at-accent);
	outline: none;
}

/* Account dashboard navigation — active link in brand accent. */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: var(--at-space-3) var(--at-space-4);
	border-radius: var(--at-radius-sm);
	color: var(--at-text);
	text-decoration: none;
}
.woocommerce-MyAccount-navigation-link--active a {
	background: var(--at-accent);
	color: var(--at-on-accent);
}
.woocommerce-MyAccount-navigation-link:not(.is-active) a:hover {
	background: var(--at-surface-2);
}

/* D6.2: Woo's show/hide-password toggle is a 14px glyph — under the 24px WCAG
   2.5.8 minimum. Grow the button to 32px and pull it back by half the growth
   (margin: -9px) so the icon stays optically where Woo placed it. Kept at 32,
   not 44, so the button does not swallow the right third of the input. */
.woocommerce form .show-password-input {
	/* !important: Blocksy pins 14px via `form:is(.login, …) [class*="password-input"]
	   .show-password-input`, which outranks anything reasonable here. */
	width: 32px !important;
	height: 32px !important;
	margin: -9px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2; /* otherwise the text input paints over the enlarged button */
}