/* KIRIKIRI Customer Retention styles.
 *
 * Uses the KIRIKIRI color tokens from aocos-foundation.css:
 *   --aocos-primary, --aocos-gold, --aocos-text-dark, --aocos-white,
 *   --aocos-light-border, --aocos-radius, --aocos-text-secondary.
 *
 * Visual rules:
 *   - white background, black text, thin black border, gold star accent
 *   - 44x44 minimum touch target
 *   - no purple, no large modals
 *   - no overlap with cart / account / currency icons
 */

/* ---------------------------------------------------------------- */
/* Star icon (loop card + remove button)                            */
/* ---------------------------------------------------------------- */

.kirikiri-cr-loop-star__icon,
.kirikiri-cr-wishlist-button__icon {
	display: inline-block;
	width: 22px;
	height: 22px;
	background-color: transparent;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1D26' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 120ms ease, background-color 120ms ease;
}

.is-pressed > .kirikiri-cr-loop-star__icon,
.is-pressed > .kirikiri-cr-wishlist-button__icon,
.kirikiri-cr-card__remove.is-pressed .kirikiri-cr-loop-star__icon {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C9A84C' stroke='%231A1D26' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
}

.kirikiri-cr-loop-star:hover > .kirikiri-cr-loop-star__icon,
.kirikiri-cr-loop-star:focus-visible > .kirikiri-cr-loop-star__icon {
	transform: scale(1.06);
}

.kirikiri-cr-loop-star:focus-visible {
	outline: 2px solid var(--aocos-gold, #c9a84c);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- */
/* Loop card star button                                            */
/* ---------------------------------------------------------------- */

.kirikiri-cr-loop-star {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--aocos-white, #ffffff);
	border: 1px solid var(--aocos-light-border, #edeae6);
	border-radius: 999px;
	cursor: pointer;
	padding: 0;
	z-index: 2;
	color: var(--aocos-text-dark, #1a1d26);
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.kirikiri-cr-loop-star:hover {
	border-color: var(--aocos-text-dark, #1a1d26);
}

.kirikiri-cr-loop-star.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* WooCommerce product card uses .products .product; ensure the
 * card has position: relative so the absolute star positions
 * correctly. */
.woocommerce ul.products li.product {
	position: relative;
}

/* ---------------------------------------------------------------- */
/* Single product "Add to wishlist" button                          */
/* ---------------------------------------------------------------- */

.kirikiri-cr-wishlist-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 18px;
	margin: 8px 0 12px;
	background: var(--aocos-white, #ffffff);
	color: var(--aocos-text-dark, #1a1d26);
	border: 1px solid var(--aocos-text-dark, #1a1d26);
	border-radius: var(--aocos-radius, 10px);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}

.kirikiri-cr-wishlist-button:hover {
	background: var(--aocos-text-dark, #1a1d26);
	color: var(--aocos-white, #ffffff);
}

.kirikiri-cr-wishlist-button.is-pressed {
	background: var(--aocos-text-dark, #1a1d26);
	color: var(--aocos-white, #ffffff);
}

.kirikiri-cr-wishlist-button:focus-visible {
	outline: 2px solid var(--aocos-gold, #c9a84c);
	outline-offset: 2px;
}

.kirikiri-cr-wishlist-button.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

.kirikiri-cr-wishlist-button__icon {
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------- */
/* Header wishlist badge                                            */
/* ---------------------------------------------------------------- */

.kirikiri-cr-header-wishlist {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.kirikiri-cr-header-wishlist__count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--aocos-gold, #c9a84c);
	color: var(--aocos-text-dark, #1a1d26);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	transform: translate(50%, -50%);
	transform-origin: 100% 0;
}

.kirikiri-cr-header-wishlist__count[hidden] {
	display: none;
}

/* ---------------------------------------------------------------- */
/* Recently Viewed section (single product)                         */
/* ---------------------------------------------------------------- */

.kirikiri-cr-recent {
	margin: 48px 0 0;
	padding: 24px 0;
	border-top: 1px solid var(--aocos-light-border, #edeae6);
}

.kirikiri-cr-recent__header,
.kirikiri-cr-account-recent__header,
.kirikiri-cr-account-wishlist__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.kirikiri-cr-recent__header h2,
.kirikiri-cr-account-recent__header h2,
.kirikiri-cr-account-wishlist__header h2 {
	margin: 0;
	font-size: 22px;
	color: var(--aocos-text-dark, #1a1d26);
}

.kirikiri-cr-recent__clear,
.kirikiri-cr-wishlist__clear {
	min-height: 36px;
	padding: 0 14px;
	background: transparent;
	border: 1px solid var(--aocos-light-border, #edeae6);
	border-radius: 999px;
	color: var(--aocos-text-dark, #1a1d26);
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
}

.kirikiri-cr-recent__clear:hover,
.kirikiri-cr-wishlist__clear:hover {
	border-color: var(--aocos-text-dark, #1a1d26);
}

/* Product pages use the dark commerce surface; retain readable controls here
 * without changing the light-background account endpoint presentation. */
.kirikiri-cr-recent__header h2,
.kirikiri-cr-recent__clear {
	color: #f7f4ef;
}

.kirikiri-cr-recent__clear {
	border-color: rgba(247, 244, 239, 0.7);
}

.kirikiri-cr-recent__clear:hover {
	border-color: #f7f4ef;
}

/* Account endpoints use the dark commerce surface. Keep the clear controls
 * readable in every interaction state and remove them when their list is
 * empty. */
.woocommerce-account .kirikiri-cr-account-recent__header .kirikiri-cr-recent__clear,
.woocommerce-account .kirikiri-cr-account-wishlist__header .kirikiri-cr-wishlist__clear {
	color: #f7f4ef;
	border-color: rgba(247, 244, 239, 0.7);
}

.woocommerce-account .kirikiri-cr-account-recent__header .kirikiri-cr-recent__clear:hover,
.woocommerce-account .kirikiri-cr-account-recent__header .kirikiri-cr-recent__clear:focus-visible,
.woocommerce-account .kirikiri-cr-account-wishlist__header .kirikiri-cr-wishlist__clear:hover,
.woocommerce-account .kirikiri-cr-account-wishlist__header .kirikiri-cr-wishlist__clear:focus-visible {
	background: var(--aocos-gold, #c9a84c);
	border-color: var(--aocos-gold, #c9a84c);
	color: var(--aocos-text-dark, #1a1d26);
}

.woocommerce-account .kirikiri-cr-account-recent__header .kirikiri-cr-recent__clear:active,
.woocommerce-account .kirikiri-cr-account-wishlist__header .kirikiri-cr-wishlist__clear:active {
	background: var(--aocos-primary-hover, #e0b85a);
	border-color: var(--aocos-primary-hover, #e0b85a);
	color: var(--aocos-text-dark, #1a1d26);
}

.woocommerce-account .kirikiri-cr-account-recent:has(.kirikiri-cr-recent__empty:not([hidden])) .kirikiri-cr-recent__clear,
.woocommerce-account .kirikiri-cr-account-wishlist:has(.kirikiri-cr-wishlist__empty:not([hidden])) .kirikiri-cr-wishlist__clear,
.woocommerce-account .kirikiri-cr-recent__clear[hidden],
.woocommerce-account .kirikiri-cr-wishlist__clear[hidden] {
	display: none !important;
}

.kirikiri-cr-recent__grid,
.kirikiri-cr-wishlist__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
}

.kirikiri-cr-recent__empty,
.kirikiri-cr-wishlist__empty {
	margin: 16px 0;
	padding: 24px;
	background: var(--aocos-light, #f7f5f2);
	border: 1px dashed var(--aocos-light-border, #edeae6);
	border-radius: var(--aocos-radius, 10px);
	color: var(--aocos-text-secondary, #4a4f5c);
	text-align: center;
}

.kirikiri-cr-recent__empty[hidden],
.kirikiri-cr-wishlist__empty[hidden] {
	display: none;
}

.kirikiri-cr-account-recent__note,
.kirikiri-cr-account-wishlist__note {
	margin: 0 0 18px;
	color: var(--aocos-text-secondary, #4a4f5c);
	font-size: 14px;
}

.kirikiri-cr-dashboard-recent {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--aocos-light-border, #edeae6);
}

.kirikiri-cr-dashboard-recent__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.kirikiri-cr-dashboard-recent__header h2 {
	margin: 0;
	font-size: 22px;
}

.kirikiri-cr-dashboard-recent__link {
	color: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kirikiri-cr-dashboard-recent__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------------------------------------------------------------- */
/* Product card (used in both sections)                             */
/* ---------------------------------------------------------------- */

.kirikiri-cr-card {
	background: var(--aocos-white, #ffffff);
	border: 1px solid var(--aocos-light-border, #edeae6);
	border-radius: var(--aocos-radius, 10px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.kirikiri-cr-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--aocos-light, #f7f5f2);
	overflow: hidden;
}

.kirikiri-cr-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kirikiri-cr-card__body {
	padding: 12px 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.kirikiri-cr-card__title {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--aocos-text-dark, #1a1d26);
}

.kirikiri-cr-card__title a {
	color: inherit;
	text-decoration: none;
}

.kirikiri-cr-card__title a:hover {
	text-decoration: underline;
}

.kirikiri-cr-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 13px;
}

.kirikiri-cr-card__price {
	color: var(--aocos-text-dark, #1a1d26);
}

.kirikiri-cr-card__stock--in {
	color: var(--aocos-success, #3d8b5f);
}

.kirikiri-cr-card__stock--out {
	color: var(--aocos-error, #d94f4f);
}

.kirikiri-cr-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kirikiri-cr-card__remove {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 12px;
	background: transparent;
	border: 1px solid var(--aocos-light-border, #edeae6);
	border-radius: 999px;
	color: var(--aocos-text-dark, #1a1d26);
	font-family: inherit;
	font-size: 12px;
	cursor: pointer;
}

.kirikiri-cr-card__remove:hover {
	border-color: var(--aocos-text-dark, #1a1d26);
}

.kirikiri-cr-card__remove .kirikiri-cr-loop-star__icon {
	width: 16px;
	height: 16px;
}

.kirikiri-cr-card__remove.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* ---------------------------------------------------------------- */
/* Toast                                                            */
/* ---------------------------------------------------------------- */

.kirikiri-cr-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 12px);
	background: var(--aocos-text-dark, #1a1d26);
	color: var(--aocos-white, #ffffff);
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 14px 34px rgba(15, 17, 23, 0.16);
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease, transform 200ms ease;
	z-index: 9999;
	max-width: calc(100vw - 32px);
}

.kirikiri-cr-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ---------------------------------------------------------------- */
/* Account menu: ensure the new items look like the rest            */
/* ---------------------------------------------------------------- */

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--wishlist a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--recently-viewed a {
	display: flex;
	align-items: center;
	gap: 8px;
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--wishlist a::before,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--recently-viewed a::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	background-color: transparent;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--wishlist a::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F4EF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--recently-viewed a::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F4EF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polyline points='12 7 12 12 15 14'/></svg>");
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--wishlist.is-active a::before,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--recently-viewed.is-active a::before {
	filter: brightness(0) saturate(100%);
}

/* ---------------------------------------------------------------- */
/* Mobile (390x844 / 430x932)                                       */
/* ---------------------------------------------------------------- */

@media (max-width: 600px) {
	.kirikiri-cr-recent__grid,
	.kirikiri-cr-wishlist__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.kirikiri-cr-recent__header h2,
	.kirikiri-cr-account-recent__header h2,
	.kirikiri-cr-account-wishlist__header h2 {
		font-size: 18px;
	}

	.kirikiri-cr-header-wishlist {
		min-width: 44px;
		min-height: 44px;
	}

	.kirikiri-cr-loop-star {
		top: 6px;
		right: 6px;
	}

	.kirikiri-cr-dashboard-recent__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------- */
/* Print: hide everything                                          */
/* ---------------------------------------------------------------- */

@media print {
	.kirikiri-cr-toast,
	.kirikiri-cr-header-wishlist,
	.kirikiri-cr-loop-star,
	.kirikiri-cr-wishlist-button,
	.kirikiri-cr-recent,
	.kirikiri-cr-card__remove {
		display: none !important;
	}
}