/*
Description: CSS for store and single product
*/

/* 
 * Productos
 */
/* Productos (colores) */

.model-colors-container .model-color {
    position: relative;
}

.model-colors-container .model-color:after {
    content: url('https://worko.roymo.info/wp-content/uploads/2025/10/color-check-arrow.svg');
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 18%;
    left: 28%;
    visibility: hidden;
}

.model-colors-container .model-color.show-after:after {
  visibility: visible;
}

.model-colors-container .model-color.invert-after:after {
  filter: invert(1);
}

.model-colors-container .model-color .color  {
    width: 36px;
    height: 36px;
    border: solid 2px #7F8898;
    border-radius: 50%;
    padding: 1px;
	cursor: pointer;
}

.model-colors-container .model-color .color .model-single-color, .model-colors-container .model-color .mix-color .model-mix-color {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.model-colors-container .model-color .mix-color {
	width: 36px;
}

.model-colors-container .model-color .mix-color .model-mix-color {
    position: absolute;
}

.model-colors-container .model-color .mix-color .model-mix-color.first-color {
    clip-path: inset(0 50% 0 0);
}

.model-colors-container .model-color .mix-color .model-mix-color.second-color {
    clip-path: inset(0 0 0 50%);
}

/* Productos (pictogramas) */
.model-pictograms-container .model-pictogram .pictogram {
    display: block;
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* Productos (galería) */
.product-featured-image .product-gallery-image {
	border-radius: 16px;
}

.product-gallery-container .product-gallery-item .product-gallery-image {
    cursor: pointer;
}

/* Productos (tienda) */
.product-filters-button {
    cursor: pointer;
}

.filters-container-modal {
	display: none;
}

.all-products-active div, a.fam-active div {
    background-color: #FFC600 !important;
}

.filter-color-container {
    display: grid;
    grid-template-columns: repeat(6, max-content);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.filter-color-container input[type="checkbox"] {
	appearance: none;
  	-webkit-appearance: none;
	width:36px;
	height: 36px;
  	border-radius: 50%;
  	border: solid 2px #7F8898;
	vertical-align: middle;
  	outline: none;
  	cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 1);
}

.filter-color-container input[type="checkbox"]:after {
    display: none;
	content: url(https://worko.roymo.info/wp-content/uploads/2025/10/color-check-arrow.svg);
	position: relative;
	top: -2px;
    left: -4px;
    width: 16px;
    height: 16px;
}

.filter-color-container input[type="checkbox"]:checked::after {
  display: block;
}

.filter-color-container input[type="checkbox"].invert-filter-after::after {
    filter: invert(1);
}


/* Productos (tooltip) */
.filter-color-container label {
	position: relative;
  	display: inline-block;
}

.filter-color-container .brx-option-text {
	display: none !important; 
	background: #282828;
	position: absolute;
	bottom: calc(100% + 8px); 
	left: 50%;
	padding: 8px 12px;
	font-family: "Poppins";
	font-size: 16px;
  	font-weight: 300;
  	color: #fff;
  	white-space: nowrap;
  	transform: translateX(-50%);
  	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.15);
	z-index: 9999;
}

.filter-color-container .brx-option-text::after {
	content: "";
  	position: absolute;
  	left: 50%;
  	top: 95%;
	transform: translateX(-50%);
  	border-left: 8px solid transparent;
  	border-right: 8px solid transparent;
  	border-top: 8px solid #282828;
}

.filter-color-container label:hover .brx-option-text {
  	display: block !important;
}

.filter-color-container .brx-option-text .brx-option-count {
    display: none;
}


/* Productos (paginación) */
.product-pagination-page ul.page-numbers a.prev {
    margin-right: 20px;
}

.product-pagination-page ul.page-numbers a.next {
    margin-left: 20px;
}