/* ==========================================================================
   TOHFE PREMIUM POLISH — 21st.dev-inspired refinement layer (2026-08-23)
   Overlay on top of tohfe-ui-v2-108.css. Pure CSS, zero new dependencies.
   Patterns adapted from 21st.dev: Commerce Hero (bankkroll), Product Card
   (beratberkayg), Shop Navigation (bundui) — visual language only.
   ========================================================================== */

:root {
	--thp-ease: cubic-bezier(.22, .61, .36, 1);
	--thp-trans: transform .3s var(--thp-ease), box-shadow .3s var(--thp-ease),
		border-color .3s var(--thp-ease), background-color .3s var(--thp-ease),
		color .3s var(--thp-ease), opacity .3s var(--thp-ease);
	--thp-gold-grad: linear-gradient(135deg, #d8ab4e, #b8872b);
	--thp-space: clamp(52px, 7vw, 92px);
}

body.tohfe-ui-v2 { scroll-behavior: smooth; }
body.tohfe-ui-v2 ::selection { background: rgba(197, 154, 58, .25); }

/* --------------------------------------------------------------------------
   1. HERO — staggered entrance, premium photo frame, CTA arrow chip
   -------------------------------------------------------------------------- */
@keyframes thp-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes thp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

@media (prefers-reduced-motion: no-preference) {
	body.tohfe-ui-v2 .tohfe-hero-badge,
	body.tohfe-ui-v2 .tohfe-hero-title,
	body.tohfe-ui-v2 .tohfe-hero-sub,
	body.tohfe-ui-v2 .tohfe-hero-btns {
		animation: thp-rise .55s var(--thp-ease) backwards;
	}
	body.tohfe-ui-v2 .tohfe-hero-badge { animation-delay: .05s; }
	body.tohfe-ui-v2 .tohfe-hero-title { animation-delay: .14s; }
	body.tohfe-ui-v2 .tohfe-hero-sub { animation-delay: .24s; }
	body.tohfe-ui-v2 .tohfe-hero-btns { animation-delay: .34s; }
	body.tohfe-ui-v2 .tohfe-hero-photo {
		animation: thp-rise .7s var(--thp-ease) .2s backwards, thp-float 7s ease-in-out 1.4s infinite;
	}
}

/* badge: gold dot */
body.tohfe-ui-v2 .tohfe-hero-badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--thp-gold-grad);
	box-shadow: 0 0 0 3px rgba(197, 154, 58, .16);
	flex: none;
}

/* photo: soft green glow behind, deep rounded shadow, hairline inner frame */
body.tohfe-ui-v2 .tohfe-hero-img { position: relative; }
body.tohfe-ui-v2 .tohfe-hero-img::before {
	content: "";
	position: absolute;
	inset: -24px -18px;
	z-index: 0;
	border-radius: 44px;
	background: radial-gradient(58% 58% at 50% 42%, rgba(47, 107, 69, .13), rgba(47, 107, 69, 0) 72%);
	pointer-events: none;
}
body.tohfe-ui-v2 .tohfe-hero-photo {
	position: relative;
	z-index: 1;
	margin: 0;
	border-radius: var(--th-radius-lg);
	overflow: hidden;
	box-shadow: 0 26px 70px rgba(29, 74, 46, .16), 0 3px 10px rgba(29, 74, 46, .07);
}
body.tohfe-ui-v2 .tohfe-hero-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid rgba(255, 255, 255, .72);
	box-shadow: inset 0 0 0 1px rgba(29, 74, 46, .05);
	pointer-events: none;
}

/* primary CTA: circular arrow chip slides in (RTL-forward = left) */
body.tohfe-ui-v2 .tohfe-hero-btns .tohfe-btn-primary .wp-block-button__link {
	position: relative;
	padding-inline-end: 58px;
}
body.tohfe-ui-v2 .tohfe-hero-btns .tohfe-btn-primary .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset-inline-end: 7px;
	top: 50%;
	transform: translateY(-50%) translateX(6px);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .26) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E") center / 17px no-repeat;
	opacity: 0;
	transition: opacity .25s var(--thp-ease), transform .25s var(--thp-ease);
}
body.tohfe-ui-v2 .tohfe-hero-btns .tohfe-btn-primary .wp-block-button__link:hover::after,
body.tohfe-ui-v2 .tohfe-hero-btns .tohfe-btn-primary .wp-block-button__link:focus-visible::after {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

/* --------------------------------------------------------------------------
   2. TRUST STRIP — soft hover lift + icon fill
   -------------------------------------------------------------------------- */
body.tohfe-ui-v2 .tohfe-trust-item { transition: var(--thp-trans); }
body.tohfe-ui-v2 .tohfe-trust-icon { transition: var(--thp-trans); }
@media (hover: hover) {
	body.tohfe-ui-v2 .tohfe-trust-item:hover {
		transform: translateY(-3px);
		box-shadow: var(--th-shadow-md);
		border-color: rgba(197, 154, 58, .45);
	}
	body.tohfe-ui-v2 .tohfe-trust-item:hover .tohfe-trust-icon {
		background: var(--th-primary);
		color: #fff;
		transform: scale(1.06);
	}
}

/* --------------------------------------------------------------------------
   3. SECTION TITLES — gold ornament + consistent rhythm
   -------------------------------------------------------------------------- */
body.tohfe-ui-v2 .tohfe-section-title::before {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	border-radius: 99px;
	background: var(--thp-gold-grad);
	margin: 0 auto 14px;
}
body.tohfe-ui-v2 .tohfe-cats { padding-top: var(--thp-space); }
body.tohfe-ui-v2 .tohfe-products { padding-block: var(--thp-space); }

/* --------------------------------------------------------------------------
   4. CATEGORY CARDS — whole-card link + gold corner button (Commerce Hero)
   -------------------------------------------------------------------------- */
body.tohfe-ui-v2 .tohfe-cat-card > a {
	position: absolute;
	inset: 0;
	z-index: 2;
}
body.tohfe-ui-v2 .tohfe-cat-card figcaption {
	z-index: 3;
	pointer-events: none;
}
body.tohfe-ui-v2 .tohfe-cat-card::before {
	content: "";
	position: absolute;
	bottom: 14px;
	inset-inline-start: 14px;
	z-index: 3;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .94);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4a2e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E");
	background-size: 19px;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 6px 16px rgba(20, 30, 20, .28);
	opacity: 0;
	transform: scale(.65);
	pointer-events: none;
	transition: var(--thp-trans);
}
@media (hover: hover) {
	body.tohfe-ui-v2 .tohfe-cat-card:hover::before {
		opacity: 1;
		transform: scale(1);
		background-color: var(--th-accent);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E");
	}
	body.tohfe-ui-v2 .tohfe-cat-card:hover img { transform: scale(1.06); }
}

/* --------------------------------------------------------------------------
   5. PRODUCT CARDS — slower premium hover, softer image stage
   -------------------------------------------------------------------------- */
body.tohfe-ui-v2 ul.products li.product { transition: var(--thp-trans); }
body.tohfe-ui-v2 .astra-shop-thumbnail-wrap { background: var(--th-surface-soft); }
body.tohfe-ui-v2 .astra-shop-thumbnail-wrap img { transition: transform .35s var(--thp-ease); }
body.tohfe-ui-v2 ul.products li.product .button { transition: var(--thp-trans); }
@media (hover: hover) {
	body.tohfe-ui-v2 ul.products li.product:hover {
		transform: translateY(-4px);
		box-shadow: 0 22px 48px rgba(29, 74, 46, .14);
	}
	body.tohfe-ui-v2 ul.products li.product:hover .astra-shop-thumbnail-wrap img { transform: scale(1.05); }
	body.tohfe-ui-v2 ul.products li.product:hover .button {
		box-shadow: 0 8px 20px rgba(29, 74, 46, .28);
		transform: translateY(-1px);
	}
}

/* --------------------------------------------------------------------------
   6. QUALITY CARDS («چرا تحفه») — hover lift + icon fill
   -------------------------------------------------------------------------- */
body.tohfe-ui-v2 .tohfe-quality-card { transition: var(--thp-trans); }
body.tohfe-ui-v2 .tohfe-quality-ico { transition: var(--thp-trans); }
@media (hover: hover) {
	body.tohfe-ui-v2 .tohfe-quality-card:hover {
		transform: translateY(-3px);
		box-shadow: var(--th-shadow-md);
		border-color: rgba(197, 154, 58, .4);
	}
	body.tohfe-ui-v2 .tohfe-quality-card:hover .tohfe-quality-ico {
		background: var(--th-accent);
		color: #fff;
	}
}

/* --------------------------------------------------------------------------
   7. FAQ — soft border/paper hover
   -------------------------------------------------------------------------- */
body.tohfe-ui-v2 .tohfe-royal-faq-item { transition: var(--thp-trans); }
@media (hover: hover) {
	body.tohfe-ui-v2 .tohfe-royal-faq-item:hover {
		border-color: rgba(197, 154, 58, .5);
		box-shadow: var(--th-shadow-sm);
	}
}

/* --------------------------------------------------------------------------
   8. FINAL CTA — button depth
   -------------------------------------------------------------------------- */
body.tohfe-ui-v2 .tohfe-final-cta .tohfe-btn-primary { box-shadow: 0 12px 26px rgba(0, 0, 0, .2); }

/* --------------------------------------------------------------------------
   9. FOOTER — title accent + link hovers
   -------------------------------------------------------------------------- */
body.tohfe-ui-v2 .th-footer a { transition: color .25s ease; }
body.tohfe-ui-v2 .th-footer__title { position: relative; }
body.tohfe-ui-v2 .th-footer__title::after {
	content: "";
	display: block;
	width: 28px;
	height: 2.5px;
	border-radius: 99px;
	background: var(--thp-gold-grad);
	margin-top: 8px;
}

/* --------------------------------------------------------------------------
   10. REDUCED MOTION — kill every effect
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	body.tohfe-ui-v2 *,
	body.tohfe-ui-v2 *::before,
	body.tohfe-ui-v2 *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}