/**
 * TP3D Makers — Modern light skin (tp3d.com.ar identity)
 * White base, celeste accents, black details.
 * Override layer for the ListingHive (HivePress) theme.
 * Loaded after the parent style so it wins the cascade.
 *
 * @package TP3DMakers
 */

/*--------------------------------------------------------------
Design tokens

Tweak the brand here: --tp-primary is the celeste. If the tone
doesn't match tp3d.com.ar, change --tp-primary / --tp-primary-600
and everything updates.
--------------------------------------------------------------*/
:root {
	--tp-bg:            #f7f9fc;  /* page background (near white) */
	--tp-bg-elev:       #eef2f7;  /* subtle elevated/hero fills   */
	--tp-surface:       #ffffff;  /* cards                        */
	--tp-surface-2:     #f3f6fa;  /* inputs / chips               */
	--tp-surface-3:     #e9eef4;  /* hovers                       */
	--tp-border:        rgba(17, 24, 39, 0.10);
	--tp-border-strong: rgba(17, 24, 39, 0.18);

	--tp-ink:           #111418;  /* black details                */
	--tp-text:          #1a1f27;  /* primary text                 */
	--tp-text-dim:      #4b5563;  /* secondary text               */
	--tp-text-mute:     #8a93a2;  /* meta / muted                 */

	--tp-primary:       #29abe2;  /* CELESTE                      */
	--tp-primary-600:   #1c93c7;  /* darker celeste (hover)       */
	--tp-primary-soft:  rgba(41, 171, 226, 0.12);
	--tp-accent:        #111418;  /* black accent                 */

	--tp-radius:        14px;
	--tp-radius-sm:     10px;
	--tp-radius-pill:   9999px;

	--tp-shadow:        0 6px 20px -8px rgba(17, 24, 39, 0.14);
	--tp-shadow-lg:     0 16px 40px -10px rgba(17, 24, 39, 0.20);
	--tp-glow:          0 8px 22px -6px rgba(41, 171, 226, 0.45);

	--tp-ease:          0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/*--------------------------------------------------------------
Base
--------------------------------------------------------------*/
html {
	scrollbar-color: #c7d0db var(--tp-bg);
}

body {
	background-color: var(--tp-bg) !important;
	color: var(--tp-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.site-container,
.site-content {
	background-color: var(--tp-bg) !important;
}

a {
	color: var(--tp-primary);
	transition: color var(--tp-ease);
}

a:hover {
	color: var(--tp-primary-600);
}

p,
li,
.hp-meta,
.hp-result-count,
.hp-field__label {
	color: var(--tp-text-dim);
}

h1, h2, h3, h4, h5, h6,
.title,
.content-title,
.hp-page__title,
.hp-section__title,
.header-logo__name {
	color: var(--tp-ink);
	letter-spacing: -0.01em;
}

/* Section title accent bar -> celeste pill */
.title::before,
.content-title::before,
.hp-page__title::before,
.hp-section__title::before,
.footer-widgets .widget__title::before {
	background: linear-gradient(135deg, var(--tp-primary), var(--tp-primary-600)) !important;
	border-radius: var(--tp-radius-pill) !important;
}

::selection {
	background: var(--tp-primary-soft);
	color: var(--tp-ink);
}

/* Slim modern scrollbar (WebKit) */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
	background: var(--tp-bg);
}
::-webkit-scrollbar-thumb {
	background: #c7d0db;
	border-radius: var(--tp-radius-pill);
	border: 2px solid var(--tp-bg);
}
::-webkit-scrollbar-thumb:hover {
	background: #aeb9c7;
}

/*--------------------------------------------------------------
Header
--------------------------------------------------------------*/
.site-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 200;
	background-color: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--tp-border);
	box-shadow: 0 6px 24px -18px rgba(17, 24, 39, 0.55);
}

.header-logo__name {
	font-weight: 700;
	color: var(--tp-ink);
}

.header-logo__description {
	color: var(--tp-text-mute);
}

/* Menu links */
.header-navbar__menu > ul > li > a,
.header-navbar__burger > a {
	color: var(--tp-text-dim) !important;
	font-weight: 500;
	transition: color var(--tp-ease);
}

.header-navbar__menu > ul > li > a:hover,
.header-navbar__menu > ul > li.current-menu-item > a {
	color: var(--tp-ink) !important;
}

/* Caret on parent items */
.header-navbar__menu > ul > li.menu-item-has-children::after {
	color: var(--tp-text-mute) !important;
}

/* Animated celeste underline on hover + current item
   (repurpose the framework's ::before, moved to the bottom) */
.header-navbar__menu > ul > li::before {
	content: '' !important;
	position: absolute !important;
	top: auto !important;
	bottom: 0 !important;
	left: 1rem !important;
	right: 1rem !important;
	height: 2px !important;
	border-radius: var(--tp-radius-pill) !important;
	background: linear-gradient(90deg, var(--tp-primary), var(--tp-primary-600)) !important;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--tp-ease);
}

.header-navbar__menu > ul > li:hover::before,
.header-navbar__menu > ul > li.current-menu-item::before {
	transform: scaleX(1);
}

/* Keep wrapped menus clean (no underline when the menu breaks to rows) */
.header-navbar__menu > ul.wrap > li::before {
	display: none !important;
}

/* Notice-count badge on the mobile burger */
.header-navbar__burger small {
	background: linear-gradient(135deg, var(--tp-primary), var(--tp-primary-600)) !important;
	color: #fff !important;
	border-radius: var(--tp-radius-pill) !important;
}

/* Dropdown / burger panel */
.header-navbar__menu ul li ul,
.header-navbar__burger > ul {
	background-color: var(--tp-surface) !important;
	border: 1px solid var(--tp-border) !important;
	border-radius: var(--tp-radius) !important;
	box-shadow: var(--tp-shadow-lg) !important;
}

.header-navbar__menu ul li ul li a:hover {
	color: var(--tp-primary-600) !important;
}

.header-navbar__burger > ul > li > a {
	color: var(--tp-text-dim) !important;
}
.header-navbar__burger > ul > li > a:hover {
	color: var(--tp-ink) !important;
}

/*--------------------------------------------------------------
Hero
--------------------------------------------------------------*/
.header-hero {
	background-color: var(--tp-bg-elev);
}

/* Keep cover images legible behind white text */
.header-hero--cover::after {
	background: linear-gradient(180deg, rgba(17, 20, 24, 0.15) 0%, rgba(17, 20, 24, 0.6) 100%) !important;
}

/*--------------------------------------------------------------
Cards (listings, vendors, categories, packages, plans, products)
--------------------------------------------------------------*/
.hp-listing--view-block,
.hp-listing-category--view-block,
.hp-listing-category--submit-block,
.hp-listing-package--view-block,
.hp-vendor--view-block,
.hp-membership-plan--view-block,
.hp-membership--view-block,
.hp-review--view-block,
.hp-message--view-block,
.widget--sidebar,
.widget.hp-menu,
.fancybox-content,
.comments > ul > li,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background-color: var(--tp-surface) !important;
	border: 1px solid var(--tp-border) !important;
	border-radius: var(--tp-radius) !important;
	box-shadow: var(--tp-shadow) !important;
	transition: transform var(--tp-ease), box-shadow var(--tp-ease), border-color var(--tp-ease);
}

.hp-listing--view-block:hover,
.hp-listing-category--view-block:hover,
.hp-listing-category--submit-block:hover,
.hp-listing-package--view-block:hover,
.hp-vendor--view-block:hover,
.hp-membership-plan--view-block:hover,
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	transform: translateY(-4px);
	border-color: var(--tp-border-strong) !important;
	box-shadow: var(--tp-shadow-lg) !important;
}

/* Featured listing accent */
.hp-listing--view-block.hp-listing--featured {
	border-color: var(--tp-primary) !important;
	box-shadow: 0 0 0 1px var(--tp-primary), var(--tp-shadow) !important;
}

.hp-listing--view-block .hp-listing__featured-badge {
	background: linear-gradient(135deg, var(--tp-primary), var(--tp-primary-600)) !important;
	color: #fff !important;
}

/* Card media should fill the rounded top corners cleanly */
.hp-listing--view-block .hp-listing__image,
.hp-vendor--view-block .hp-vendor__header,
.hp-listing-category__image {
	overflow: hidden;
}

/* Subtle zoom on the cover image when hovering the card */
.hp-listing--view-block .hp-listing__image img,
.hp-vendor--view-block .hp-vendor__header img {
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.hp-listing--view-block:hover .hp-listing__image img,
.hp-vendor--view-block:hover .hp-vendor__header img {
	transform: scale(1.06);
}

/* Card footer attributes (materials, city...) -> tidy, no stray underlines */
.hp-listing__attributes--secondary,
.hp-listing--view-block .hp-listing__footer {
	color: var(--tp-text-dim) !important;
}
.hp-listing__attributes--secondary a,
.hp-listing--view-block .hp-listing__footer a,
.hp-listing--view-block .hp-listing__attribute a {
	color: var(--tp-text-dim) !important;
	text-decoration: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
}
.hp-listing__attributes--secondary a:hover,
.hp-listing--view-block .hp-listing__footer a:hover,
.hp-listing--view-block .hp-listing__attribute a:hover {
	color: var(--tp-primary) !important;
}

/* Cover image: full-bleed, rounded only at the top (kills the corner notch/gap) */
.hp-listing--view-block .hp-listing__image img,
.hp-listing--view-block .hp-listing__images img,
.hp-listing--view-block .hp-listing__images > img {
	display: block !important;
	width: 100% !important;
	border-top-left-radius: var(--tp-radius) !important;
	border-top-right-radius: var(--tp-radius) !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

/* Dates / muted meta inside cards */
.hp-listing__created-date,
.hp-vendor__registered-date,
.hp-review__created-date,
.hp-message__sent-date,
.hp-membership__expired-date,
.hp-listing-category__item-count {
	color: var(--tp-text-mute) !important;
}

/*--------------------------------------------------------------
Category / tag chips
--------------------------------------------------------------*/
/* The category wrapper must NOT paint its own pill (prevents the double badge) */
.hp-listing--view-block .hp-listing__categories,
.hp-listing--view-page .hp-listing__categories {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Listing category -> flat solid celeste badge (readable, on-brand) */
.hp-listing__categories a,
.hp-listing--view-page .hp-listing__categories a {
	display: inline-block;
	background: linear-gradient(135deg, var(--tp-primary), var(--tp-primary-600)) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--tp-radius-pill) !important;
	padding: 0.22rem 0.65rem !important;
	font-size: 0.625rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	box-shadow: none !important;
	transition: transform var(--tp-ease), filter var(--tp-ease);
}

.hp-listing__categories a:hover,
.hp-listing--view-page .hp-listing__categories a:hover {
	color: #fff !important;
	filter: brightness(1.06);
	transform: translateY(-1px);
	box-shadow: none !important;
}

/* No focus ring on the badge (it reads as a second outline) */
.hp-listing__categories a:focus,
.hp-listing__categories a:focus-visible {
	outline: none !important;
}

/* Post / tag chips -> subtle light pills */
.post__categories a,
.tagcloud a,
.wp-block-tag-cloud a {
	background-color: var(--tp-surface-2) !important;
	color: var(--tp-text-dim) !important;
	border: 1px solid var(--tp-border) !important;
	border-radius: var(--tp-radius-pill) !important;
	transition: all var(--tp-ease);
}

.post__categories a:hover,
.tagcloud a:hover,
.wp-block-tag-cloud a:hover {
	background-color: var(--tp-primary-soft) !important;
	border-color: var(--tp-primary) !important;
	color: var(--tp-primary-600) !important;
}

/* Status badges */
.hp-status span {
	border-radius: var(--tp-radius-pill) !important;
}

/*--------------------------------------------------------------
Forms & inputs
--------------------------------------------------------------*/
input[type='color'],
input[type='date'],
input[type='datetime'],
input[type='datetime-local'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='range'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='time'],
input[type='url'],
select,
textarea,
.select2-container--default .select2-selection,
.select2-container--default .select2-search__field {
	background-color: var(--tp-surface) !important;
	color: var(--tp-text) !important;
	border: 1px solid var(--tp-border-strong) !important;
	border-radius: var(--tp-radius-sm) !important;
	transition: border-color var(--tp-ease), box-shadow var(--tp-ease);
}

input::placeholder,
textarea::placeholder {
	color: var(--tp-text-mute);
}

input[type='text']:focus,
input[type='email']:focus,
input[type='search']:focus,
input[type='url']:focus,
input[type='tel']:focus,
input[type='password']:focus,
input[type='number']:focus,
textarea:focus,
select:focus,
.select2-container--default.select2-container--focus .select2-selection {
	border-color: var(--tp-primary) !important;
	box-shadow: 0 0 0 3px var(--tp-primary-soft) !important;
	outline: none !important;
}

/* Select2 dropdown panel */
.select2-container--default .select2-dropdown,
.select2-dropdown {
	background-color: var(--tp-surface) !important;
	border: 1px solid var(--tp-border) !important;
	border-radius: var(--tp-radius-sm) !important;
	box-shadow: var(--tp-shadow-lg) !important;
}

.select2-container--default .select2-results__option {
	color: var(--tp-text-dim) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--tp-primary) !important;
	color: #fff !important;
}

.select2-container--default .select2-selection__rendered,
.select2-container--default .select2-selection__choice {
	color: var(--tp-text) !important;
}

/* Search form wrapper */
.hp-form--listing-search,
.hp-form--vendor-search {
	background-color: var(--tp-surface) !important;
	border: 1px solid var(--tp-border) !important;
	border-radius: var(--tp-radius) !important;
	box-shadow: var(--tp-shadow) !important;
}

.hp-field__label {
	color: var(--tp-ink) !important;
}

/*--------------------------------------------------------------
Buttons
--------------------------------------------------------------*/
.button,
button,
input[type=submit],
button[type=submit],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.hp-form--listing-search .hp-form__button,
.hp-form--vendor-search .hp-form__button {
	border-radius: var(--tp-radius-sm) !important;
	transition: transform var(--tp-ease), box-shadow var(--tp-ease), background-color var(--tp-ease), color var(--tp-ease), filter var(--tp-ease);
}

/* Accessible keyboard focus ring */
.button:focus-visible,
button:focus-visible,
input[type=submit]:focus-visible,
button[type=submit]:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--tp-primary) !important;
	outline-offset: 2px !important;
}

/* Primary / submit -> celeste with glow */
.button--primary,
input[type=submit],
button[type=submit],
.wp-block-button__link,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit,
.hp-form--listing-search .hp-form__button,
.hp-form--vendor-search .hp-form__button {
	background: linear-gradient(135deg, var(--tp-primary), var(--tp-primary-600)) !important;
	color: #fff !important;
	border: none !important;
	box-shadow: var(--tp-glow) !important;
}

.button--primary:hover,
input[type=submit]:hover,
button[type=submit]:hover,
.wp-block-button__link:hover,
.woocommerce #respond input#submit:hover,
.hp-form--listing-search .hp-form__button:hover,
.hp-form--vendor-search .hp-form__button:hover {
	transform: translateY(-2px) scale(1.015);
	box-shadow: 0 16px 34px -10px rgba(41, 171, 226, 0.6) !important;
	filter: brightness(1.04) saturate(1.05);
	color: #fff !important;
}

.button--primary:active,
input[type=submit]:active,
button[type=submit]:active,
.wp-block-button__link:active {
	transform: translateY(0) scale(0.99);
	box-shadow: 0 6px 16px -8px rgba(41, 171, 226, 0.5) !important;
	filter: none;
}

/* Secondary -> black "ink" button (black detail) */
.button--secondary,
.woocommerce a.button,
.woocommerce button.button {
	background-color: var(--tp-ink) !important;
	color: #fff !important;
	border: 1px solid var(--tp-ink) !important;
	box-shadow: 0 6px 18px -10px rgba(17, 24, 39, 0.6) !important;
}

.button--secondary:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background-color: #000 !important;
	color: #fff !important;
	transform: translateY(-2px) scale(1.015);
	box-shadow: 0 14px 30px -10px rgba(17, 24, 39, 0.55), 0 0 0 1px var(--tp-primary) inset !important;
}

.button--secondary:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
	transform: translateY(0) scale(0.99);
}

/*--------------------------------------------------------------
Pagination
--------------------------------------------------------------*/
.pagination > span,
.pagination .nav-links > a,
.pagination .nav-links > span,
.pagination > a,
.pagination ul li a,
.pagination ul li span.current,
.pagination ul li span.dots,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	background-color: var(--tp-surface) !important;
	color: var(--tp-text-dim) !important;
	border: 1px solid var(--tp-border) !important;
	border-radius: var(--tp-radius-sm) !important;
	transition: all var(--tp-ease);
}

.pagination .nav-links > a:hover,
.pagination > a:hover,
.pagination ul li a:hover {
	border-color: var(--tp-primary) !important;
	color: var(--tp-primary-600) !important;
}

.pagination .nav-links > span:not(.dots),
.pagination > span:not(.dots),
.pagination ul li span.current:not(.dots) {
	background: linear-gradient(135deg, var(--tp-primary), var(--tp-primary-600)) !important;
	border-color: transparent !important;
	color: #fff !important;
}

/*--------------------------------------------------------------
Tabbed / sidebar menus
--------------------------------------------------------------*/
.hp-menu--tabbed .hp-menu__item--current::before {
	background: linear-gradient(135deg, var(--tp-primary), var(--tp-primary-600)) !important;
}

.widget--sidebar .widget__title,
.widget.hp-menu .widget__title {
	color: var(--tp-ink) !important;
}

/*--------------------------------------------------------------
Notices / messages
--------------------------------------------------------------*/
.hp-form__messages,
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
	border-radius: var(--tp-radius-sm) !important;
	border: 1px solid var(--tp-border) !important;
	background-color: var(--tp-surface) !important;
	color: var(--tp-text) !important;
}

.woocommerce-message {
	border-left: 3px solid var(--tp-primary) !important;
}
.woocommerce-info {
	border-left: 3px solid var(--tp-ink) !important;
}

/*--------------------------------------------------------------
Footer  (dark "ink" detail + celeste top bar)
--------------------------------------------------------------*/
.site-footer {
	position: relative;
	background-color: var(--tp-ink) !important;
	border-top: none !important;
	color: rgba(255, 255, 255, 0.70);
}

/* Glowing celeste top edge */
.site-footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--tp-primary), var(--tp-primary-600));
	box-shadow: 0 0 18px rgba(41, 171, 226, 0.55);
}

.site-footer a,
.footer-navbar__menu ul li a {
	color: rgba(255, 255, 255, 0.70) !important;
	transition: color var(--tp-ease);
}
.site-footer a:hover,
.footer-navbar__menu ul li a:hover {
	color: var(--tp-primary) !important;
}

.footer-widgets .widget__title {
	color: #fff !important;
}

.footer-navbar {
	border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.footer-navbar__copyright {
	color: rgba(255, 255, 255, 0.5);
}

/*--------------------------------------------------------------
Maps / misc surfaces
--------------------------------------------------------------*/
.hp-map {
	border-radius: var(--tp-radius) !important;
	overflow: hidden;
	border: 1px solid var(--tp-border);
}

hr {
	border-color: var(--tp-border) !important;
}

/*--------------------------------------------------------------
Finishing touches
--------------------------------------------------------------*/
html {
	scroll-behavior: smooth;
}

/* Tint listing/vendor attribute & field icons with the brand celeste */
.hp-listing__attribute i,
.hp-vendor__attribute i,
.hp-listing__details i,
.hp-field i,
.hp-form__field i {
	color: var(--tp-primary) !important;
}

/* Review stars in celeste (no-op if the markup isn't present) */
.hp-rating__star--full,
.hp-rating .fa-star,
.hp-rating .fas.fa-star {
	color: var(--tp-primary) !important;
}

/* Round the top of card cover images to match the card radius */
.hp-listing--view-block .hp-listing__image img,
.hp-listing-category__image img,
.hp-vendor--view-block .hp-vendor__image img,
.woocommerce ul.products li.product a img {
	border-top-left-radius: var(--tp-radius) !important;
	border-top-right-radius: var(--tp-radius) !important;
}

/* WooCommerce sale badge -> celeste pill */
.woocommerce span.onsale {
	background: linear-gradient(135deg, var(--tp-primary), var(--tp-primary-600)) !important;
	color: #fff !important;
	border-radius: var(--tp-radius-pill) !important;
	box-shadow: var(--tp-glow) !important;
}

/* WooCommerce price in ink for contrast */
.woocommerce .price,
.woocommerce ul.products li.product .price {
	color: var(--tp-ink) !important;
	font-weight: 600;
}

/* Keyboard focus ring on links & form controls (accessibility) */
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--tp-primary) !important;
	outline-offset: 2px !important;
}

/*--------------------------------------------------------------
"Cómo funciona" steps section
--------------------------------------------------------------*/
.tp3d-steps {
	margin: 3.5rem 0;
}

/* Full-width band variant (auto-rendered on the home) */
.tp3d-steps--band {
	margin: 0;
	padding: 4.5rem 0;
	background: var(--tp-bg-elev);
	border-top: 1px solid var(--tp-border);
	border-bottom: 1px solid var(--tp-border);
}

.tp3d-steps__head {
	max-width: 38rem;
	margin: 0 auto 2.75rem;
	text-align: center;
}

.tp3d-steps__title {
	margin: 0 0 0.6rem;
	font-size: clamp(1.6rem, 1rem + 2.2vw, 2.25rem);
	color: var(--tp-ink);
}

.tp3d-steps__subtitle {
	margin: 0;
	font-size: 1.05rem;
	color: var(--tp-text-dim);
}

.tp3d-steps__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.tp3d-step {
	position: relative;
	padding: 2.25rem 1.5rem;
	text-align: center;
	background: var(--tp-surface);
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius);
	box-shadow: var(--tp-shadow);
	transition: transform var(--tp-ease), box-shadow var(--tp-ease), border-color var(--tp-ease);
}

.tp3d-step:hover {
	transform: translateY(-4px);
	border-color: var(--tp-border-strong);
	box-shadow: var(--tp-shadow-lg);
}

.tp3d-step__num {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--tp-primary-600);
	background: var(--tp-primary-soft);
	border-radius: 50%;
}

.tp3d-step__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	margin-bottom: 1.25rem;
	font-size: 1.5rem;
	color: #fff;
	background: linear-gradient(135deg, var(--tp-primary), var(--tp-primary-600));
	border-radius: 50%;
	box-shadow: var(--tp-glow);
}

.tp3d-step__title {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
	color: var(--tp-ink);
}

.tp3d-step__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--tp-text-dim);
}

@media (max-width: 768px) {
	.tp3d-steps__grid {
		grid-template-columns: 1fr;
	}
	.tp3d-steps--band {
		padding: 3rem 0;
	}
}

/* Honor reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
	.hp-listing--view-block:hover,
	.hp-vendor--view-block:hover,
	.button--primary:hover,
	.tp3d-step:hover,
	.hp-listing--view-block:hover .hp-listing__image img,
	.hp-vendor--view-block:hover .hp-vendor__header img {
		transform: none !important;
	}
}