/*
 * Shop, product-category and single-product pages in the style of the Loyalty World homepage proposal
 * (ghadiscovery.com rhythm): photo header with navy gradient and gold kicker, Playfair Display headings,
 * Jost text, uppercase eyebrows, soft-shadow white cards, caps "View details" links, navy/gold palette.
 *
 * The theme's lwds rules live in CSS @layers; these rules are unlayered, so they win without !important.
 * Scope: .lws-main.lws-storefront (shop + category archives) and .lws-main.lws-product (single product).
 * --lwhp-store-hero / --lwhp-store-kicker / --lwhp-store-banner are printed inline by includes/store.php.
 */
:is(.lws-main.lws-storefront, .lws-main.lws-product) {
	--lwhp-navy: #1A1540;
	--lwhp-gold: #FFC861;
	--lwhp-ink: #1B1A24;
	--lwhp-muted: #56536A;
	--lwhp-mist: #F6F5F8;
	--lwhp-line: #E4E2EA;
	--lwhp-shadow: 0 6px 24px rgb(26 21 64 / 10%);
	--lwhp-shadow-hover: 0 12px 32px rgb(26 21 64 / 16%);
	--lwhp-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--lwhp-sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

	--lws-color-text: var(--lwhp-ink);
	--lws-color-text-muted: var(--lwhp-muted);
	--lws-color-text-subtle: #6E6B80;
	--lws-color-border: var(--lwhp-line);
	--lws-color-surface-alt: var(--lwhp-mist);
	--lws-color-surface-sunken: var(--lwhp-mist);
	--lws-color-surface-dark: var(--lwhp-navy);
	--lws-color-link: var(--lwhp-navy);
	--lws-color-link-hover: #2B2560;
	--lws-color-action: var(--lwhp-gold);
	--lws-color-action-hover: #FFD684;
	--lws-color-action-subtle: #FFF4DE;
	--lws-color-text-on-action: var(--lwhp-navy);
	--lws-radius-card: 12px;
	--lws-radius-lg: 12px;

	color: var(--lwhp-ink);
	padding-bottom: 64px;
}

/* Proposal fonts (follows 「使用提案字體」) */
.lwhp-store-fonts :is(.lws-main.lws-storefront, .lws-main.lws-product) {
	font-family: var(--lwhp-sans);
	letter-spacing: .04em;
}
.lwhp-store-fonts :is(.lws-storefront, .lws-product) :is(h1, h2, h3, .lws-product-card__title, .lws-page-header__title) {
	font-family: var(--lwhp-serif);
	letter-spacing: 0;
}

:is(.lws-storefront, .lws-product) :is(h1, h2, h3) {
	color: var(--lwhp-navy);
	text-wrap: balance;
}
:is(.lws-storefront, .lws-product) h2 {
	font-weight: 600;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.3;
}

/* ----- Breadcrumb: small caps, like the proposal's kicker ---------------- */
:is(.lws-storefront, .lws-product) .lws-breadcrumb {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lwhp-muted);
}
:is(.lws-storefront, .lws-product) .lws-breadcrumb a {
	color: var(--lwhp-navy);
	text-decoration: none;
}
:is(.lws-storefront, .lws-product) .lws-breadcrumb a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ----- Shop / category header: the proposal's photo hero ------------------ */
.lws-storefront .lws-archive__header {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	align-content: center;
	gap: 0;
	min-height: clamp(260px, 26vw, 360px);
	margin-block: 8px 48px;
	padding: 48px clamp(24px, 4vw, 56px);
	border-radius: 12px;
	color: #fff;
	background: var(--lwhp-navy) var(--lwhp-store-hero, none) center / cover no-repeat;
}
.lws-storefront .lws-archive__header::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgb(26 21 64 / 88%) 0%, rgb(26 21 64 / 62%) 45%, rgb(26 21 64 / 12%) 85%);
}
.lws-storefront .lws-archive__header::before {
	content: var(--lwhp-store-kicker, "");
	font: 500 13px var(--lwhp-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lwhp-gold);
	margin-bottom: 14px;
}
.lws-storefront .lws-archive__header h1 {
	margin: 0;
	color: #fff;
	font-weight: 500;
	font-size: clamp(38px, 5vw, 60px);
	line-height: 1.08;
	max-width: 14em;
}
.lws-storefront .lws-archive__header .lws-page-header__lead,
.lws-storefront .lws-archive__header p {
	margin: 16px 0 0;
	max-width: 56ch;
	color: rgb(255 255 255 / 90%);
	font-size: 17px;
}

/* ----- Toolbar, filters, pagination ------------------------------------- */
.lws-storefront .woocommerce-result-count {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lwhp-muted);
}
.lws-storefront .lws-archive__toolbar select {
	border-radius: 999px;
	border-color: var(--lwhp-line);
	padding-inline: 18px 38px;
	font-size: 14px;
}
.lws-storefront .lws-filters {
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}
.lws-storefront .lws-filters__summary {
	padding-inline: 0;
	border-bottom: 2px solid var(--lwhp-navy);
}
.lws-storefront .lws-filters__body {
	padding-inline: 0;
}
.lws-storefront :is(.lws-filters__title, .lws-filters__summary) {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lwhp-muted);
}
.lws-storefront .lws-filters__list a {
	border-radius: 0;
	background: transparent;
	color: var(--lwhp-ink);
	text-decoration: none;
}
.lws-storefront .lws-filters__list a:hover {
	color: var(--lwhp-navy);
	background: var(--lwhp-mist);
}
.lws-storefront .lws-filters__list a:is(.is-active, [aria-current="page"]) {
	background: transparent;
	color: var(--lwhp-navy);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--lwhp-gold);
}
.lws-storefront .lws-chip {
	border-radius: 999px;
}
.lws-storefront .woocommerce-pagination .page-numbers:is(a, span) {
	border-radius: 999px;
	min-width: 44px;
	border-color: var(--lwhp-line);
}
.lws-storefront .woocommerce-pagination .page-numbers.current {
	background: var(--lwhp-navy);
	border-color: var(--lwhp-navy);
	color: #fff;
}

/* ----- Product cards: the proposal's white promo card -------------------- */
.lws-product-card {
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: var(--lwhp-shadow);
	transition: box-shadow .25s ease, transform .25s ease;
}
.lws-product-card:hover {
	box-shadow: var(--lwhp-shadow-hover);
	transform: translateY(-2px);
}
.lws-product-card__figure {
	overflow: hidden;
	background: var(--lwhp-mist);
}
.lws-product-card__img {
	object-position: 50% 22%;
	transition: transform .6s ease;
}
.lws-product-card:hover .lws-product-card__img {
	transform: scale(1.04);
}
.lws-product-card__body {
	padding: 22px 24px 24px;
	gap: 10px;
}
.lws-product-card__eyebrow {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lwhp-muted);
}
.lws-product-card__title {
	font-size: 21px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--lwhp-navy);
}
.lws-product-card__title a {
	color: inherit;
	text-decoration: none;
}
.lws-product-card__foot {
	align-items: flex-end;
	gap: 12px;
}
.lws-product-card__foot .lws-price {
	color: var(--lwhp-ink);
	font-weight: 600;
	font-size: 22px;
	letter-spacing: .01em;
	font-variant-numeric: tabular-nums lining-nums;
}
.lws-product-card__foot .woocommerce-Price-currencySymbol {
	font-size: 12px;
	letter-spacing: .06em;
}
/* "View" becomes the proposal's caps link: "VIEW →" underlined, no box */
.lws-product-card__foot .lws-button {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0 0 2px;
	min-height: 0;
	box-shadow: none;
	color: var(--lwhp-navy);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.lws-product-card__foot .lws-button:hover {
	background: transparent;
	color: #2B2560;
	text-decoration-thickness: 2px;
}

/* ----- Buttons elsewhere: pills ------------------------------------------ */
.lws-product :is(.lws-button, .single_add_to_cart_button, .button) {
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 500;
}
.lws-product .single_add_to_cart_button {
	background: var(--lwhp-gold);
	border-color: var(--lwhp-gold);
	color: var(--lwhp-navy);
}
.lws-product .single_add_to_cart_button:not(.disabled):hover {
	background: #FFD684;
}
.lws-product .lws-button--secondary {
	background: transparent;
	border: 1px solid var(--lwhp-navy);
	color: var(--lwhp-navy);
}

/* ----- Trust row: the proposal's "four steps" (navy rule on top, no boxes) */
:is(.lws-storefront, .lws-product) .lws-trust {
	margin-top: 64px;
	background: transparent;
	border: 0;
	gap: 24px;
}
:is(.lws-storefront, .lws-product) .lws-trust__item {
	border: 0;
	border-top: 2px solid var(--lwhp-navy);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	padding: 20px 0 0;
}
:is(.lws-storefront, .lws-product) .lws-trust__item svg {
	color: var(--lwhp-navy);
}
:is(.lws-storefront, .lws-product) .lws-trust__value {
	font-family: var(--lwhp-serif);
	font-size: 19px;
	font-weight: 600;
	color: var(--lwhp-navy);
	letter-spacing: 0;
}
:is(.lws-storefront, .lws-product) .lws-trust__label {
	color: var(--lwhp-muted);
	font-size: 15px;
}

/* ----- Single product ---------------------------------------------------- */
.lws-product .lws-page-header {
	margin-top: 8px;
}
.lws-product .lws-page-header__title,
.lws-product .lws-page-header h1 {
	font-weight: 500;
	font-size: clamp(34px, 4.4vw, 54px);
	line-height: 1.1;
	color: var(--lwhp-navy);
}
.lws-product .lws-chip {
	border-radius: 999px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	background: var(--lwhp-navy);
	color: var(--lwhp-gold);
	border-color: transparent;
}
.lws-product .lws-gallery {
	border-radius: 12px;
	overflow: hidden;
	background: var(--lwhp-mist);
}
.lws-product .lws-decision {
	border: 0;
	border-radius: 12px;
	box-shadow: var(--lwhp-shadow);
}
.lws-product .lws-decision__facts {
	background: var(--lwhp-mist);
	border: 0;
	border-radius: 12px;
}
.lws-product .lws-decision__price .lws-price {
	color: var(--lwhp-navy);
}
.lws-product .lws-decision :is(select, .quantity input) {
	border-color: var(--lwhp-line);
	border-radius: 8px;
}
.lws-product .lws-decision label,
.lws-product .lws-decision .variations th {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lwhp-muted);
}
.lws-product .lws-section__header h2 {
	margin-bottom: 12px;
}
.lws-product .lws-prose :is(h3, h4) {
	color: var(--lwhp-navy);
}
/* Guarantee card: the proposal's refund photo banner */
.lws-product .lws-guarantee--card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border: 0;
	border-radius: 12px;
	padding: 32px;
	color: rgb(255 255 255 / 90%);
	background: var(--lwhp-navy) var(--lwhp-store-banner, none) 50% 60% / cover no-repeat;
}
.lws-product .lws-guarantee--card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgb(26 21 64 / 88%) 0%, rgb(26 21 64 / 60%) 60%, rgb(26 21 64 / 20%) 100%);
}
.lws-product .lws-guarantee--card .lws-guarantee__title {
	color: #fff;
	font-family: var(--lwhp-serif);
	font-size: 22px;
	letter-spacing: 0;
}
.lws-product .lws-guarantee--card svg {
	color: var(--lwhp-gold);
}
.lws-product .lws-guarantee--card a {
	color: var(--lwhp-gold);
}
.lws-product .lws-reviews :is(.review, .comment_container, li) {
	border-color: var(--lwhp-line);
	border-radius: 12px;
}

@media (max-width: 600px) {
	.lws-storefront .lws-archive__header {
		min-height: 240px;
		padding: 32px 22px;
		margin-bottom: 32px;
	}
	.lws-storefront .lws-archive__header::after {
		background: linear-gradient(180deg, rgb(26 21 64 / 55%) 0%, rgb(26 21 64 / 88%) 100%);
	}
	.lws-product-card__body {
		padding: 18px;
	}
	.lws-product .lws-guarantee--card {
		padding: 24px 20px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.lws-product-card,
	.lws-product-card__img {
		transition: none;
	}
	.lws-product-card:hover,
	.lws-product-card:hover .lws-product-card__img {
		transform: none;
	}
}

/* Review form */
.lwhp-store-fonts .lws-product :is(#reply-title, .comment-reply-title) {
	font-family: var(--lwhp-serif);
	letter-spacing: 0;
}
.lws-product :is(#reply-title, .comment-reply-title) {
	color: var(--lwhp-navy);
}
.lws-product #respond :is(input[type="submit"], .submit) {
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: 500;
}
.lws-product .lws-decision .quantity {
	border-radius: 999px;
	overflow: hidden;
}

/* The theme forces this button's corners with an !important rule in its first CSS layer
   (border-radius: var(--lws-radius-control) !important), which nothing unlayered can beat.
   Setting the variable on the button itself turns that same rule into a pill. */
.lws-product .single_add_to_cart_button {
	--lws-radius-control: 999px;
}