/**
 * OxpressCard (NSC) Frontend UX Stylesheet for Fancy Product Designer v6.5+
 *
 * Covers Desktop (>= 1025px), Tablet (768px - 1024px), and Mobile (<= 767px)
 * without brittle :nth-child() selectors or Customizer CSS conflicts.
 */

/* ==========================================================================
   1. 4-Step Progress Bar ([mostrar_pasos_paso1..4])
   ========================================================================== */
.pasos_wrapper {
	width: 100%;
	float: left;
	margin-top: 25px;
	margin-bottom: 25px;
}

.container_pasos {
	width: 100%;
	max-width: 1200px !important;
	margin: 0 auto !important;
}

.progressbar {
	counter-reset: step;
	padding-left: 0;
	margin-left: 0;
}

.progressbar li {
	list-style-type: none;
	width: 25%;
	float: left;
	position: relative;
	text-align: center;
	color: #c0c0c0;
	font-size: 18px;
}

.progressbar li:before {
	width: 30px;
	height: 30px;
	content: counter(step);
	counter-increment: step;
	line-height: 26px;
	border: 2px solid #c0c0c0;
	display: block;
	text-align: center;
	margin: 0 auto 10px auto;
	border-radius: 50%;
	background-color: #ffffff;
}

.progressbar li:after {
	width: 100%;
	height: 2px;
	content: "";
	position: absolute;
	background-color: #c0c0c0;
	top: 15px;
	left: -50%;
	z-index: -1;
}

.progressbar li:first-child:after {
	content: none;
}

.progressbar li.active,
.progressbar li.pasoanterior {
	color: #000000;
}

.progressbar li.active:before,
.progressbar li.pasoanterior:before {
	border-color: #000000;
}

.progressbar li.pasoanterior + li:after {
	background-color: #000000;
}

.progressbar li.pasoanterior {
	cursor: pointer;
}

.paso_mobile {
	text-align: center;
	font-size: 20px;
}

@media (max-width: 767px) {
	.paso_nombre {
		display: none;
	}
}

@media (min-width: 768px) {
	.paso_mobile {
		display: none;
	}
}

/* ==========================================================================
   2. Gift Card Amount Selector ([mostrar_selector_importe])
   ========================================================================== */
.sel_imp {
	padding: 5px 8px !important;
	border: 3px solid #eeeeee;
	background: #eeeeee;
	margin: 5px;
	border-radius: 5px;
	font-weight: 700;
	display: inline-block;
	cursor: pointer;
}

.importes .importe {
	margin: 5px;
}

.importes .importe.active,
.sel_imp.active {
	background: #303030;
	color: #ffffff;
	border: 3px solid #303030;
	border-radius: 5px;
	font-weight: 700;
}

.wrapper-linea {
	margin-bottom: 10px;
}

.wrapper-lineas-general input.unidad,
.wrapper-lineas-general input.importe {
	width: 75px !important;
	text-align: center;
	height: 35px;
	border: 3px solid #eeeeee;
	background: #eeeeee;
	border-radius: 5px;
	font-weight: 700;
	font-size: 13px;
	outline: none;
	padding: 0 5px !important;
}

/* ==========================================================================
   3. Single Product Card Editor Container & Layout
   ========================================================================== */
body.single-product {
	font-family: 'Open Sans', sans-serif;
	color: #303030;
	background-color: #ffffff;
}

body.single-product #content .ast-container {
	max-width: 1240px !important;
	margin: 0 auto !important;
	display: block !important;
	padding: 0 20px !important;
}

body.single-product .pasos_wrapper {
	width: 100% !important;
	float: none !important;
	clear: both !important;
	overflow: hidden !important;
	margin: 25px 0 30px 0 !important;
}

body.single-product #primary {
	width: 100% !important;
	float: none !important;
	clear: both !important;
	margin: 0 0 40px 0 !important;
	padding: 0 !important;
}

body.single-product #main {
	box-shadow: 2px 2px 14px #dddddd !important;
	padding: 40px !important;
	background: #ffffff !important;
	overflow: hidden !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

body.single-product div.product {
	width: 100% !important;
	overflow: hidden !important;
}

body.single-product .woocommerce-breadcrumb,
body.single-product form.cart .quantity {
	display: none !important;
}

@media (min-width: 768px) {
	body.single-product div.product .summary.entry-summary {
		width: 38% !important;
		float: left !important;
		clear: none !important;
		margin: 0 !important;
	}

	body.single-product div.product .fpd-product-designer-wrapper {
		width: 56% !important;
		float: right !important;
		clear: none !important;
		margin: 85px 0 20px 0 !important;
	}
}

body.single-product p.text-size-4.semibold {
	margin-bottom: 8px;
	margin-top: 20px;
	font-size: 16px;
	color: #000000;
}

body.single-product p.importe-titulo {
	margin-top: 0 !important;
}

/* ==========================================================================
   4. FPD v6.5 Stage, Top Action Bar & Multi-View Thumbnails
   ========================================================================== */
.fpd-product-designer-wrapper {
	height: auto !important;
	min-height: 0 !important;
}

.fpd-product-designer-wrapper .fpd-container,
.fpd-product-designer-wrapper .fpd-container.fpd-topbar,
.fpd-product-designer-wrapper .fpd-container.fpd-device-mobile,
.fpd-product-designer-wrapper .fpd-container.fpd-device-smartphone {
	overflow: visible !important;
	position: relative !important;
	border: none !important;
	box-shadow: none !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
}

.fpd-product-designer-wrapper .fpd-main-wrapper,
.fpd-product-designer-wrapper fpd-main-wrapper {
	background: transparent !important;
	overflow: visible !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
}

.fpd-product-designer-wrapper .fpd-product-stage {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	height: auto !important;
	top: 0 !important;
}

.fpd-product-designer-wrapper fpd-actions-bar {
	background: transparent !important;
	justify-content: center !important;
	position: absolute !important;
	top: -55px !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	border: none !important;
	box-shadow: none !important;
	display: flex !important;
	z-index: 20 !important;
}

.fpd-product-designer-wrapper fpd-actions-bar .fpd-btn {
	border: 1px solid #d7d7d8 !important;
	background: #ffffff !important;
	color: #333333 !important;
	width: 34px !important;
	height: 34px !important;
	margin: 0 4px !important;
	border-radius: 2px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.fpd-product-designer-wrapper fpd-actions-bar .fpd-btn [class^="fpd-icon-"] {
	color: #333333 !important;
	font-size: 16px !important;
}

@media (min-width: 768px) {
	.fpd-product-designer-wrapper fpd-actions-bar .fpd-btn[data-action="manage-layers"],
	.fpd-product-designer-wrapper fpd-actions-bar .oxp-mobile-edit-texts-btn {
		display: none !important;
	}
}

/* Multi-view thumbnails (Anverso / Reverso) */
.fpd-product-designer-wrapper fpd-views-selection {
	display: flex !important;
	justify-content: center !important;
	gap: 12px !important;
	margin-top: 16px !important;
}

/* ==========================================================================
   5. Shortcode Modules: Text Layers & Manage Layers (Semantic Filtering)
   ========================================================================== */
.fpd-sc-module-wrapper {
	box-shadow: none !important;
	background: transparent !important;
	border: none !important;
	min-height: auto !important;
}

.fpd-text-layers-panel .fpd-scroll-area,
.fpd-manage-layers-panel .fpd-scroll-area {
	max-height: none !important;
	overflow: visible !important;
}

.fpd-text-layers-panel .fpd-list > .fpd-list-row {
	display: block !important;
	border: none !important;
	padding: 4px 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

.fpd-text-layers-panel .fpd-list > .fpd-list-row.importe_regalo {
	display: none !important;
}

.fpd-text-layers-panel .fpd-title,
.fpd-text-layers-panel .fpd-clear-text,
.fpd-text-layers-panel .fpd-text-layer-meta {
	display: none !important;
}

.fpd-text-layers-panel .fpd-text-layer-content textarea,
.fpd-text-layers-panel .fpd-text-layer-content input {
	width: 100% !important;
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	border-bottom: 1px solid #d7d7d8 !important;
	border-radius: 0 !important;
	background: #ffffff !important;
	box-shadow: none !important;
	font-size: 13px !important;
	color: #555555 !important;
	padding: 6px 5px !important;
}

.fpd-text-layers-panel .fpd-text-layer-content input {
	height: 34px !important;
	min-height: 34px !important;
}

.fpd-text-layers-panel .fpd-text-layer-content textarea {
	min-height: 55px !important;
}

/* Manage Layers: hide all non-UploadZone rows, show Upload Zone & uploaded user photos */
.fpd-manage-layers-panel .fpd-list > .fpd-list-row {
	display: none !important;
	box-shadow: none !important;
	background: transparent !important;
	border: none !important;
}

.fpd-manage-layers-panel .fpd-list > .fpd-list-row.fpd-add-layer,
.fpd-manage-layers-panel .fpd-list > .fpd-list-row.oxp-uploaded-photo-row {
	display: flex !important;
	align-items: center !important;
	border: none !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 10px 0 !important;
	cursor: pointer !important;
}

.fpd-manage-layers-panel .fpd-list-row.fpd-add-layer .fpd-img-meta,
.fpd-manage-layers-panel .fpd-list-row.oxp-uploaded-photo-row .fpd-img-meta,
.fpd-manage-layers-panel .fpd-list-row.oxp-uploaded-photo-row .fpd-cell-1,
.fpd-manage-layers-panel .fpd-list-row.oxp-uploaded-photo-row .fpd-lock-element,
.fpd-manage-layers-panel .fpd-list-row.oxp-uploaded-photo-row .fpd-visible-element,
.fpd-manage-layers-panel .fpd-list-row.oxp-uploaded-photo-row .fpd-icon-reorder {
	display: none !important;
}

.fpd-manage-layers-panel .fpd-list > .fpd-list-row.oxp-uploaded-photo-row {
	justify-content: space-between !important;
}

.fpd-manage-layers-panel .fpd-list-row.fpd-add-layer .fpd-cell-1 {
	font-size: 15px !important;
	color: #303030 !important;
	flex: 1 !important;
}

.fpd-manage-layers-panel .fpd-list-row.fpd-add-layer .fpd-icon-add {
	background: #666666;
	color: #ffffff;
	border-radius: 3px;
	padding: 3px;
	font-size: 12px;
	display: inline-flex !important;
	visibility: visible !important;
}

.fpd-manage-layers-panel .fpd-list-row.fpd-add-layer .fpd-cell-2,
.fpd-manage-layers-panel .fpd-list-row.oxp-uploaded-photo-row .fpd-cell-2 {
	visibility: visible !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	width: auto !important;
}

.fpd-manage-layers-panel .fpd-list-row.oxp-uploaded-photo-row .fpd-remove-element,
.fpd-manage-layers-panel .fpd-list-row.oxp-uploaded-photo-row .fpd-remove-element > span {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 18px !important;
	min-height: 18px !important;
	font-size: 16px !important;
	color: #303030 !important;
	visibility: visible !important;
}

/* ==========================================================================
   6. Bottom VOLVER / CONTINUAR Action Bar & Validation Alert
   ========================================================================== */
body.single-product form.cart {
	display: block !important;
	padding: 0 20px 20px 20px !important;
	margin-top: 30px !important;
	max-width: 450px !important;
	min-width: 450px !important;
	margin-left: calc((100% - 450px) / 2) !important;
	float: left !important;
	clear: both !important;
	box-sizing: border-box !important;
}

.volverbutton,
.fakeaddtocart,
.single_add_to_cart_button {
	border-radius: 5px !important;
	padding: 14px 20px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	line-height: 1.2 !important;
	box-shadow: 0 12px 18px -6px rgb(0 0 0 / 30%) !important;
}

body.single-product .single_add_to_cart_button,
body.single-product .single_add_to_cart_button.fpd-disabled {
	background-color: #303030 !important;
	color: #ffffff !important;
	opacity: 0.9 !important;
	visibility: visible !important;
	width: 50% !important;
	margin-left: 3% !important;
	float: right !important;
	clear: none !important;
	text-align: center !important;
}

.volverbutton {
	background-color: #9a9a9a !important;
	color: #ffffff !important;
	opacity: 0.65;
	width: 46% !important;
	float: left !important;
	text-align: center !important;
	clear: none !important;
}

.fakeaddtocart_wrapper {
	width: 50% !important;
	margin-left: 3% !important;
	float: right !important;
	margin-top: 0 !important;
	clear: none !important;
}

.fakeaddtocart {
	background-color: #303030 !important;
	color: #ffffff !important;
	opacity: 0.65 !important;
	width: 100% !important;
	text-align: center !important;
	cursor: pointer;
}

.mensaje-error-obligatorios {
	display: none;
	clear: both;
	float: left;
	width: 100%;
	margin-top: 20px !important;
	background: #dfecf5;
	padding: 13px;
	color: #607788;
	font-size: 15px;
	border: 3px solid #607788;
	border-radius: 4px;
	cursor: pointer;
}

/* ==========================================================================
   7. Tablet (768px - 1024px) & Mobile (<= 767px) Responsive Rules
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
	body.single-product #main {
		padding: 25px 20px !important;
	}

	body.single-product div.product .summary.entry-summary {
		width: 42% !important;
	}

	body.single-product div.product .fpd-product-designer-wrapper {
		width: 54% !important;
		margin-top: 75px !important;
	}
}

@media (max-width: 767px) {
	body.single-product #content .ast-container {
		max-width: 96% !important;
		padding: 0 6px !important;
	}

	body.single-product #main {
		padding: 15px 10px 25px 10px !important;
		box-shadow: none !important;
	}

	body.single-product div.product .fpd-product-designer-wrapper {
		width: 100% !important;
		float: none !important;
		margin: 0 0 20px 0 !important;
	}

	body.single-product .fpd-product-designer-wrapper .fpd-container {
		background: #f5f5f5 !important;
		border-radius: 4px !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
	}

	body.single-product .fpd-product-designer-wrapper .fpd-main-wrapper,
	body.single-product .fpd-product-designer-wrapper fpd-main-wrapper {
		min-height: 0 !important;
		height: auto !important;
		padding: 8px 6px 12px 6px !important;
		display: block !important;
	}

	body.single-product .fpd-product-designer-wrapper fpd-actions-bar {
		position: relative !important;
		top: 0 !important;
		background: #f2f2f2 !important;
		padding: 8px 10px !important;
		justify-content: space-between !important;
		align-items: center !important;
		border-bottom: 1px solid #e5e5e5 !important;
	}

	body.single-product .fpd-product-designer-wrapper fpd-actions-bar [data-pos="left"],
	body.single-product .fpd-product-designer-wrapper fpd-actions-bar [data-pos="right"] {
		display: none !important;
	}

	body.single-product .fpd-product-designer-wrapper fpd-actions-bar [data-pos="center"] {
		width: 100% !important;
		display: flex !important;
		justify-content: flex-end !important;
		align-items: center !important;
	}

	body.single-product .fpd-product-designer-wrapper fpd-actions-bar fpd-actions-menu {
		width: 100% !important;
	}

	body.single-product .fpd-product-designer-wrapper fpd-actions-bar .fpd-uncollapsed-menu {
		display: flex !important;
		width: 100% !important;
		align-items: center !important;
		justify-content: flex-end !important;
	}

	body.single-product .fpd-product-designer-wrapper fpd-actions-bar .fpd-btn {
		border: none !important;
		background: transparent !important;
		box-shadow: none !important;
		width: 36px !important;
		height: 36px !important;
		margin: 0 2px !important;
	}

	body.single-product .fpd-product-designer-wrapper fpd-actions-bar .fpd-btn [class^="fpd-icon-"] {
		font-size: 22px !important;
	}

	body.single-product .fpd-product-designer-wrapper fpd-actions-bar .oxp-mobile-edit-texts-btn {
		margin-right: auto !important;
		width: auto !important;
		padding: 4px 6px !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 6px !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		color: #000000 !important;
		text-transform: uppercase !important;
		cursor: pointer !important;
	}

	body.single-product div.product .summary.entry-summary {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		padding: 0 10px !important;
		box-sizing: border-box !important;
	}

	body.single-product .woocommerce-product-details__short-description {
		display: block !important;
	}

	body.single-product form.cart {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-top: 20px !important;
		padding: 0 !important;
		float: none !important;
	}

	.volverbutton,
	.fakeaddtocart,
	.single_add_to_cart_button {
		padding: 13px 10px !important;
		font-size: 13px !important;
		white-space: nowrap !important;
	}
}