body {
    color: #414141;
}

a, h1, h2, h3, h4, h5, h6, strong, em, small, label, td, th {
    color: inherit;
}

.rey-mainMenu--desktop  a {
    text-transform: inherit !important;
}

.shop-sidebar section#reyajfilter-category-filter-2 {
    margin: 0;
    padding: 0;
}

/* Style for the "Find My Solution" Button */
.find-solution-btn {
    background-color: var(--billi-blue) !important;
    color: white !important;
    border-radius: 4px;
    padding: 8px 15px !important;
    font-weight: bold;
}

/* Style for the Home/Commercial Toggle */
.market-toggle {
    border: 1px solid white;
    border-radius: 20px;
    padding: 2px;
} 
/*//////311225////*/ 
.left-side-filter .wpc-filter-header .widget-title{
font-size: 16.5px;
    font-weight: 600;
    color: #06213E;
    color: #414141;
	cursor: pointer;
}
.left-side-filter .wpc-filter-header{
	font-size: 16.5px;
    font-weight: 600;
    color: #06213E;
    color: #414141;
	border-bottom: 1px solid #000;
}
.left-side-filter .wpc-filters-section {
    margin-bottom: 6px;
    position: relative;
}
.left-side-filter .wpc-filters-main-wrap li.wpc-term-item a {
    font-weight: 600;
    font-size: 14px;
    color: #231F20;
    color: #414141;

}
.left-side-filter .wpc-filters-main-wrap .wpc-term-item-content-wrapper{
	padding-left:8px;
}
.left-side-filter label.wc-block-product-filter-checkbox-list__label {
    color: #231F20;
    color: #414141;
    font-size: 14px;
    font-weight: 600;
}
/*///checkbox//*/


/* default checkbox hide */

.left-side-filter input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  border: 1px solid #111 !important;
  border-radius: 0 !important;
  display: inline-block !important;
  position: relative !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
}

/* checked state */
.left-side-filter input[type="checkbox"]:checked {
  background-color: #fff !important;
}

/* check mark */
.left-side-filter input[type="checkbox"]:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  top: -7px !important;
  width: 7px !important;
  height: 16px !important;
  border: solid #111 !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

.left-side-filter .wpc-filters-main-wrap ul.wpc-filters-ul-list {
    list-style: none;
    padding: 9px 0 0;
    margin-left: 0;
    float: none;
}
.left-side-filter input[type=checkbox].wc-block-product-filter-checkbox-list__input:checked+.wc-block-product-filter-checkbox-list__mark {
       display: none !important;
}
.left-side-filter .wc-block-product-filter-checkbox-list__input-wrapper:before {
    background: rgb(255 255 255) !important;
       left: -1px !important;
       top: 8px !important;
   }
/*///icon////*/
:where(.wc-block-product-filters) .wc-block-product-filters__overlay-content{
	gap:10px !important;
}
.left-side-filter .wp-block-heading {
  position: relative;
    cursor: pointer;
font-size: 16px;
    font-weight: 600;
    color: #414141;
padding-bottom: 10px;
       border-bottom: 1px solid #000000;
}

/* arrow bg */
.left-side-filter .wp-block-heading::after {
  content: "";
  position: absolute;
  right: 0;
  z-index: -1;
  top: 14px;
  width: 12px;
  height: 8px;
  background-image: url("https://dapepo.wordifysites.com/wp-content/uploads/2025/12/ico-top.svg");
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

/* rotate only icon */
.left-side-filter .life_side_fitler_accordion_hide .wp-block-heading::after {
  transform: translateY(-50%) rotate(180deg);
}
/*/////////banner-heading///////////*/
.banner-heading{
	font-size:40px;
	color:#fff;
}
/*/////////product_box///////////*/



/* Rating */
.product_box .rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.product_box .stars {
  color: #1e88e5;
  font-size: 18px;
  font-weight: bold;
}

.product_box .count {
  font-size: 14px;
}

/* Modes */
.product_box .modes {
  display: flex;
  gap: 12px;
  margin-bottom: 22px;
}



/* Feature list */
.product_box .features {
  padding-left: 16px;
}

.product_box .features li {
  margin-bottom: 6px;
 font-size: 12px;
 font-weight: 600;
}

/*////////pagination///////*/

.page-numbers.prev, .page-numbers.next {
    border: 0;
    width: 0;
    margin: 0 !important;
}
.page-numbers {
    border: 1px solid #414141;
    width: 28px;
    height: 31px;
    display: inline-table;
    text-align: center;
    line-height: 28px;
    color: #06213E;
    color: #414141;
	margin-right: 3px !important;
    margin-left: 3px !important;
}
.page-numbers.current{
	background: #414141;
	color:#ffffff !important;
}

/* Rey's own link colour was still painting the numbers a blue-grey and
   the active tile's border a pale blue, so the control read as blue
   even after the navy was replaced. */
a.page-numbers,
span.page-numbers {
    color: #414141 !important;
    border-color: #414141 !important;
}

a.page-numbers.current,
span.page-numbers.current {
    background: #414141 !important;
    color: #ffffff !important;
}
.elementor-pagination {
    text-align: center;
    margin-top: 39px;
}
/*///////my-account-tabs////*/
#logout-btn-tab{
	background-color:#414141;
	color:#ffffff;
}
.rb-explore-btn:hover {
    background: #111;
    color: #fff;
}
.my-account-tab{
	position: relative;
    top: -71px;
}
.stars-fill {
    display: inline-block;
    font-size: 18px; /* Adjust star size */
    font-family: Times; /* Ensure stars look standard */
    line-height: 1;
    
    /* This creates the fill effect */
    background:linear-gradient(90deg, 
        #0079C9 var(--rating-width), 
        #e0e0e0 var(--rating-width)
	    );
    
    /* This clips the background to the shape of the stars */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 2px;
font-weight:600;
}
.my-custom-outer-product-box h2,
.rey-swatches.product.type-product h2{
	line-height: 1.5;
}

.my-custom-outer-product-box h2 a,
.rey-swatches.product.type-product h2 a{
	color: #525151 !important;
	font-size:16px;
	font-weight:400;
    display: block;
    text-align: left;
}

.my-custom-outer-product-box .woocommerce-loop-product__title,
.rey-swatches.product.type-product .woocommerce-loop-product__title{
	margin-bottom:4px;
	line-height: 1.5 !important;
	padding: 0 16px !important;
}

.my-custom-outer-product-box .rating .count,
.rey-swatches.product.type-product .rating .count{
	font-size: 12px;
	color: #000000;
}

.my-custom-outer-product-box .rating,
.rey-swatches.product.type-product .rating{
	margin-bottom: 4px;
	display:none;
}

.my-custom-outer-product-box .rey-productThumbnail,
.rey-swatches.product.type-product .rey-productThumbnail{
	margin-bottom: 0;
	padding: 0;
}

.my-custom-outer-product-box .custom-archive-text ul,
.rey-swatches.product.type-product .custom-archive-text ul{
	padding-left: 14px;
	font-size: 12px;
	color: #000;
	list-style: disc;
	padding-bottom: 28px;
}

.my-custom-outer-product-box .archive-feature-icons,
.rey-swatches.product.type-product .archive-feature-icons{
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, 1fr);
}

.my-custom-outer-product-box,
.rey-swatches.product.type-product{
	/*border: 1px solid #06213E;
	border-radius: 6px;*/
}

/* spacing */
.my-custom-outer-product-box .custom-shortcode-wrapper,
.rey-swatches.product.type-product .custom-shortcode-wrapper{
	padding: 0 16px;
}

/* footer / button */
/*.my-custom-outer-product-box .custom_btn_add_to_cart,
.my-custom-outer-product-box .rey-productLoop-footer,
.rey-swatches.product.type-product .custom_btn_add_to_cart,
.rey-swatches.product.type-product .rey-productLoop-footer{
	background: #06213E;
	color: #fff;
	padding: 12px;
	text-align: center;
	border-radius: 0 0 3px 3px;
	display: block;
}
*/
.my-custom-outer-product-box .rey-productLoop-footer .price,
.rey-swatches.product.type-product .rey-productLoop-footer .price{
	display:none;
}

.my-custom-outer-product-box .rey-productLoop-footer .rey-productFooter-inner .button,
.rey-swatches.product.type-product .rey-productLoop-footer .rey-productFooter-inner .button{
	color: #000000 !important;
    text-decoration: none !important;
    font-style: inherit !important;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1.4px;
    background: #EDF1F5;
    padding: 14px;
    min-width: 137px;
    border-radius: 2px;
}

/*///////card//////*/
/* Product card as flex */
.my-custom-outer-product-box,
.rey-swatches.product.type-product{
	/*display: flex;*/
}

/* Inner wrapper full height */
.my-custom-outer-product-box .rey-productInner,
.rey-swatches.product.type-product .rey-productInner{
	display: flex;
	flex-direction: column;
	height: 100%;
	flex: 1;
}

/* Footer always at bottom */
.my-custom-outer-product-box .rey-productLoop-footer,
.rey-swatches.product.type-product .rey-productLoop-footer{
	margin-top: auto;
	position: static;
}


/* Content area flexible (image + title + UL etc.) */
.my-custom-outer-product-box .custom-shortcode-wrapper,
.rey-swatches.product.type-product .custom-shortcode-wrapper {
  flex-grow: 1;
}

/*//////product-filter-top/////*/

form.woocommerce-ordering.rey-loopSelectList
 {
    border: 1px solid #414141;
    padding: 10px;
    /*color: #414141;*/
    font-size: 16px;
    font-weight: 700;
    /* cursor: pointer; */
}
.woocommerce-result-count {
    display: none !important;
}
.rey-viewSelector.rey-loopInlineList {
    display: none !important;
}

/*tab-new-design*/
/* My Account Wrapper */


/* Top banner */
.new-tabs .woocommerce-MyAccount-navigation-wrapper {
  position: relative;
  background: url("https://dapepo.wordifysites.com/wp-content/uploads/2026/01/myaccount.png") center/cover no-repeat;
  padding: 80px 30px 0;
}

/*  
.new-tabs .woocommerce-MyAccount-navigation-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}*/

/* My Account title */
.new-tabs .woocommerce-MyAccount-navigation-wrapper::before {
  content: "My Account";
  position: relative;
  display: block;
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 65px;
  z-index: 2;
}

.new-tabs .woocommerce-MyAccount-navigation {
  position: relative;
  z-index: 2;
}

.new-tabs .woocommerce-MyAccount-navigation ul {
  display: flex;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.new-tabs .woocommerce-MyAccount-navigation li {
  margin: 0;
}

.new-tabs .woocommerce-MyAccount-navigation li a {
  display: inline-block;
  padding: 12px 22px;
  background: #0079C9;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 3px 3px 0 0;
  text-decoration: none;
  transition: 0.3s;
}

/* Hover */
.new-tabs .woocommerce-MyAccount-navigation li a:hover {
  background: #084eb0;
}

/* Active tab */
.new-tabs .woocommerce-MyAccount-navigation li.is-active a {
  background: #ffffff;
  color: #0079C9;
}
.new-tabs .woocommerce-MyAccount-content {
  background: #fff;
  padding: 86px 30px 30px 30px;
  border: 1px solid #eee;
  border-top: none;
}
.new-tabs .woocommerce table.shop_table {
  border: none;
  border-collapse: collapse;
}

.new-tabs .woocommerce table.shop_table th {
  background: #fff;
  color: #0079C9;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  border-bottom: 1px solid #eee;
  padding: 14px;
}

.new-tabs .woocommerce table.shop_table td {
  padding: 14px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}

.new-tabs .woocommerce table.shop_table tr:nth-child(even) {
  background: #f8f9f9;
}

/* View button */
.new-tabs .woocommerce table.shop_table td a.button {
  background: transparent;
  color: #0079C9;
  font-weight: 500;
  padding: 0;
}
.new-tabs .woocommerce-MyAccount-navigation sup {
  font-size: 11px;
  margin-left: 4px;
}

.new-tabs .woocommerce p {
  font-size: 14px;
  color: #555;
}
.woocommerce-MyAccount-navigation ul li:last-child a {
  background: #414141;
  color: #fff;
}

.woocommerce-product-details__short-description ul {
  list-style: none; 
  padding-left: 0;
}

.woocommerce-product-details__short-description li {
  position: relative;
  padding-left: 30px; 
  margin-bottom: 10px;
}

.woocommerce-product-details__short-description li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  transform: translateY(-50%); 
  width: 20px; 
  height: 20px;
  background-image: url('../images/li_dot.svg');
  background-size: contain;
  background-repeat: no-repeat;
}

.woocommerce-product-details__short-description .product-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce-product-details__short-description .product-features li {

  /*
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 15px;
  color: #414141;
  
  */
}


.woocommerce-product-details__short-description .product-features li::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 12px;
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}


.woocommerce-product-details__short-description .icon-size::before { 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23414141' d='M21.833 11.291v-1.124A3.5 3.5 0 0 0 19.5 6.88V4.333h4.667a1.167 1.167 0 0 0 0-2.333H16a3.5 3.5 0 0 0-3.5 3.5v1.381a3.5 3.5 0 0 0-2.333 3.286v1.124a10.434 10.434 0 0 0-5.834 9.376V23a7.007 7.007 0 0 0 7 7h9.334a7.007 7.007 0 0 0 7-7v-2.333a10.433 10.433 0 0 0-5.834-9.376Zm-7-5.791A1.167 1.167 0 0 1 16 4.333h1.167v2.334h-2.334V5.5ZM12.5 10.167A1.167 1.167 0 0 1 13.667 9h4.666a1.167 1.167 0 0 1 1.167 1.167v1.166h-7v-1.166ZM25.333 23a4.666 4.666 0 0 1-4.666 4.667h-9.334A4.667 4.667 0 0 1 6.667 23v-2.333a8.13 8.13 0 0 1 3.96-7h10.747a8.13 8.13 0 0 1 3.96 7V23Z'/%3E%3C/svg%3E");
}

.woocommerce-product-details__short-description .icon-skin::before { 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23414141' d='M16 3.75c-.764 0-1.384.587-1.384 1.312 0 .725.62 1.313 1.384 1.313.765 0 1.385-.588 1.385-1.313S16.766 3.75 16 3.75Z'/%3E%3Cpath fill='%23414141' d='M25.618 9.89l-5.075 1.745c-.26.092-.625.239-.977.446-.337.198-.751.502-1.007.945-.281.48-.358 1.054-.368 1.56.009.529.06 1.082.15 1.636l.34 1.62.006.024 2.156 8.954c.04.193-.094.422-.378.469a.37.37 0 0 1-.29-.064.749.749 0 0 1-.264-.388l-2.172-6.355c-.097-.283-.183-.57-.258-.86l-.332-1.284c-.101-.392-.472-.667-.897-.667s-.795.275-.896.667l-.306 1.185c-.092.356-.197.708-.316 1.058l-2.129 6.236a.783.783 0 0 1-.27.4.355.355 0 0 1-.283.062c-.115-.019-.231-.089-.311-.197-.08-.108-.086-.202-.073-.252l2.16-8.97.005-.024.34-1.62a10.266 10.266 0 0 0 .167-1.585c.007-.498-.044-1.028-.24-1.505-.368-.904-1.16-1.349-1.873-1.604l-.042-.014-5.334-1.636c-.293-.094-.496-.194-.617-.294-.097-.08-.128-.144-.134-.236-.011-.181.062-.288.144-.351a.428.428 0 0 1 .345-.07l.02.007.177.057c.184.06.592.179.992.3.627.19 1.48.423 2.15.58 1.839.433 4.273.877 6.546.877 2.273 0 4.694-.442 6.518-.874 1.02-.243 2.05-.515 2.897-.794l.175-.056.027-.008.01-.001Z'/%3E%3C/svg%3E");
  
  
}

.woocommerce-product-details__short-description .icon-check::before { 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23414141' d='M23.678 4.497l-7.31-2.437c-.239-.08-.497-.08-.737 0L8.322 4.497a5.825 5.825 0 0 0-3.989 5.533V16c0 8.823 10.734 13.697 11.193 13.9a1.166 1.166 0 0 0 .948 0c.46-.203 11.193-5.076 11.193-13.9v-5.97a5.824 5.824 0 0 0-3.99-5.533ZM25.333 16c0 6.364-7.372 10.538-9.333 11.537-1.963-.995-9.333-5.156-9.333-11.537v-5.97A3.5 3.5 0 0 1 9.06 6.71L16 4.396l6.94 2.314a3.5 3.5 0 0 1 2.393 3.32V16Z'/%3E%3Cpath fill='%23414141' d='m19.85 11.683-4.886 4.9-2.618-2.73a1.167 1.167 0 1 0-1.681 1.617l2.69 2.8a2.185 2.185 0 0 0 1.57.7h.038a2.186 2.186 0 0 0 1.557-.645l4.984-4.984a1.17 1.17 0 1 0-1.654-1.658Z'/%3E%3C/svg%3E");
}

.woocommerce-product-details__short-description .icon-care::before { 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23414141' d='M18.899 3c2.13 0 3.84 1.74 3.89 3.85l.01.01v.1c0 3.9-3.1 6.47-5.87 8.31-.26.17-.57.24-.85.24s-.59-.07-.86-.25c-2.73-1.86-5.86-4.41-5.86-8.26v-.09c0-2.11 1.71-3.91 3.85-3.91 1.33 0 2.26.62 2.82 1.21.6-.58 1.57-1.21 2.87-1.21Z'/%3E%3Cpath fill='%23414141' d='M2.401 23.277c-.278.385-.489.873-.364 1.325.425 1.539 2.038-.166 2.038-.166.564-.635 1.409-1.438 2.823-2.414 1.304-.899 2.558-1.621 3.123-1.869l.012-.005a11.86 11.86 0 0 1 4.873-1.104c.856.002 1.713.103 2.547.301 1.756.412 4.206 1.181 4.767 1.497l.043.022a.344.344 0 0 1 .195.362.26.26 0 0 1-.22.2 6.628 6.628 0 0 1-1.787-.163l-.034-.007h-.002c-.64-.112-1.366-.239-2.089-.239-.788 0-1.456.149-2.043.455a1.02 1.02 0 0 0 .939 1.809c.291-.151.651-.225 1.102-.225.54 0 1.147.105 1.734.208.606.124 1.226.198 1.843.22h.022c.203 0 .641-.042.645-.043l.017-.002a17.36 17.36 0 0 0 1.821-.352c.885-.203 1.8-.412 2.544-.412.427 0 .742.07.939.211a.246.246 0 0 1 .093.13c-.459.31-2.128.91-4.894 1.57-2.532.604-4.948 1.01-6.013 1.01h-.022c-.437-.003-1.04-.065-1.739-.137h-.01c-.933-.096-1.99-.205-3.019-.205-1.009 0-1.827.105-2.501.32-.946.302-1.809.953-2.442 1.43l-.001.002a58.504 58.504 0 0 0-.459.35c-1.349.901-1.043 2.048-.021 2.048h.014a2.01 2.01 0 0 0 1.054-.315c.19-.114.406-.28.635-.454l.003-.002.003-.002c.514-.388 1.216-.918 1.832-1.115.473-.151 1.087-.224 1.878-.224.931 0 1.937.103 2.827.195l.02.002c.741.076 1.383.142 1.918.145h.026c2.314 0 10.713-1.766 12.298-3.117.449-.386.694-.97.656-1.555a2.272 2.272 0 0 0-.953-1.736c-.551-.396-1.245-.588-2.121-.588-.296 0-.609.022-.959.066l-.792.127-.017.003c-.234.044-.466.093-.695.144a2.387 2.387 0 0 0-1.283-1.923c-.949-.529-3.896-1.373-5.289-1.699A13.245 13.245 0 0 0 14.897 17c-2.481 0-4.436.732-5.691 1.283l-.011.005c-.409.189-.813.4-1.204.631l-.77.46-.008.005c-1.802 1.115-4.01 2.722-4.812 3.893Z'/%3E%3C/svg%3E");
}

.woocommerce-product-details__short-description .icon-dropper::before { 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23414141' d='m18.693 7.863-.074-.074a3.137 3.137 0 1 0-4.437 4.437l.578.578-11.063 11.06c-.38.381-.631.943-.798 1.378a14.44 14.44 0 0 0-.471 1.518 26.652 26.652 0 0 0-.403 1.835a1.161 1.161 0 0 0 1.334 1.344l.012-.002.032-.006.116-.02a25.24 25.24 0 0 0 1.713-.372 13.903 13.903 0 0 0 1.521-.471c.443-.171 1.004-.427 1.389-.81L19.197 17.24l.576.576a3.138 3.138 0 1 0 4.437-4.437l-.054-.054a1.545 1.545 0 0 1-.011-.194.962.962 0 0 1 .23-.658l4.294-3.32a1.666 1.666 0 0 0 .005-5.839c-1.584-1.584-4.234-1.68-5.855.02a1.156 1.156 0 0 0-.077.09l-3.323 4.292a.922.922 0 0 1-.659.253Z'/%3E%3C/svg%3E");
}

.woocommerce-product-details__short-description .icon-skin-renewal::before { 
  background-image: url('../images/icon-skin-renewal.svg?1');
}

.woocommerce-product-details__short-description .icon-helps-stimulate-collagen-formation::before { 
  background-image: url('../images/icon-helps-stimulate-collagen-formation.svg?1');
}

.woocommerce-product-details__short-description .icon-improves-elasticity-and-luminosity::before { 
  background-image: url('../images/icon-improves-elasticity-and-luminosity.svg?1');
}

.woocommerce-product-details__short-description .icon-reduces-wrinkles-fine-lines-and-blemishes::before { 
  background-image: url('../images/icon-reduces-wrinkles-fine-lines-and-blemishes.svg?1');
}




 #productIngredientsModal {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(4px);
            z-index: 999999;
        }
        
        
        /* The main container for the content inside the modal */
 #productIngredientsModal .el-modal-body {
    padding: 20px;
    
    /* SET THE SCROLLING HERE */
    max-height: 60vh;           /* Limits height to 60% of the screen height */
    overflow-y: auto;           /* Adds vertical scroll only when needed */
    
    /* Optional: Smooth scrolling for mobile */
    -webkit-overflow-scrolling: touch; 
}

/* Custom Scrollbar Styling (Optional - for a cleaner look) */
 #productIngredientsModal .el-modal-body::-webkit-scrollbar {
    width: 6px;
}

 #productIngredientsModal .el-modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

 #productIngredientsModal .el-modal-body::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

 #productIngredientsModal .el-modal-body::-webkit-scrollbar-thumb:hover {
    background: #555;
}
        
#productIngredientsModal .el-modal-card {
	background: #fff;
	max-width: 500px;
	margin: 15vh auto;
	padding: 30px;
	border-radius: 8px;
	position: relative;
}

#productIngredientsModal .el-modal-close {
	position: absolute;
	top: 10px; right: 15px;
	font-size: 30px;
	cursor: pointer;
}

.openIngredientsModelBtn {
    text-decoration: underline;
    /* margin: 0 4px; */
    cursor: pointer;
}

ul.products li.product .rey-productInner .rey-brandLink {
    margin-bottom: 0px !important;
    font-size: 12px !important;
    color: #525151;
    opacity: 1 !important;
    padding: 0 16px !important;
        margin-top: 10px;

}

ul.products li.product h2 {
    flex-grow: inherit !important;
    display: block !important;
    align-items: start !important;
    justify-content: left !important;
    margin-bottom: 0px !important;
    /*min-height: 0 !important;*/
    padding: 0 16px !important;
}
 
ul.products li.product h2 a {
    color: #525151 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin-top: 8px !important;
    margin-bottom: 4px !important;
    display: block !important;
    text-align: left !important;
}
 
ul.products li.product .product_short_title {

min-height: 80px;
    /* min-height: 48px; */
    display: flex;
    /* lines stack: one product carries two size prices in this field */
    flex-direction: column;
    justify-content: center;
    
}

/* Size prices pasted into the short title (Nutradeica Oily) follow the
   site palette and sit as tidy lines under the description */
ul.products li.product .product_short_title p.price {
    color: #414141 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    margin: 4px 0 0 !important;
    text-transform: none !important;
}

ul.products li.product .product_short_title p {
    color: rgb(65 65 65) !important;
    font-weight: 600 !important;
    padding: 0 16px !important;
    font-size: 16px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;   /* Show only 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    min-height: 3em;     
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
	margin-bottom: 0px !important;
}

.woocommerce .elementor-901 .elementor-element.elementor-element-6b5a5b7 .price {
	color: #414141;
	font-size: 24px !important;
}

.elementor-element-b0d06ee .woocommerce .products .product .product_short_title{/*margin-bottom:25px;*/}
.custom_product_price {	padding: 0 16px !important;	margin-bottom: 12px;	font-size: 18px;	font-weight: 700;}

my-custom-outer-product-box .rey-productLoop-footer .rey-productFooter-inner
.button, .rey-swatches.product.type-product .rey-productLoop-footer
.rey-productFooter-inner .button {
    color: #414141 !important;
}


#reyajfilter-category-filter-2  .reyajfilter-layered-list a{
color: #414141 !important;
}

.reverse-layout .eye-content-col b{font-weight:700}

@media (min-width: 1025px) {
  .woocommerce-account .woocommerce-MyAccount-navigation-wrapper {
        float: inherit !important;
        width: 100% !important;
	        border: 0 !important;
    }

   .woocommerce-account .woocommerce-MyAccount-content {
        float: inherit !important;
        width: 100% !important;
	        border: 0 !important;
    }

}

/* ===== Match isdin.com/us styling (added 31 Jul 2026) ============
   Brief: align staging with https://www.isdin.com/us/c/face-care/cleansers */

/* Product cards render without the staggered fade-up entrance */
ul.products li.product {
    opacity: 1 !important;
    transform: none !important;
}

/* Learn more buttons follow the US button spec */
a.custom-button-learn,
a.custom_btn_add_to_cart,
.custom_btn_add_to_cart a {
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.4px !important;
    border-radius: 2px !important;
    background: #414141 !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
}

/* Product page price line: no forced capitalisation */
.single-product p.price,
.custom_product_price {
    text-transform: none !important;
}

/* Product page section headings: US spec (32px/600, #414141) */
.pts-tab-content h2 {
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: #414141 !important;
}

/* Tab body text: one colour (#414141), one size (16px), one bold (700),
   matching the US site */
.pts-tab-content p,
.pts-tab-content li,
.pts-tab-content small,
.pts-tab-content b,
.pts-tab-content strong,
.pts-tab-content h4 {
    color: #414141;
}
.pts-tab-content p {
    font-size: 16px;
}
.pts-tab-content .routine-section p {
    color: #414141;
}
.pts-tab-content b,
.pts-tab-content strong {
    font-weight: 700;
}
.eye-counter-circle,
.eye-counter-circle .eye-counter-number {
    color: #414141 !important;
}

/* Benefits grid moved below its image+text row (custom-script.js moves
   any cols-4 grid there): same 1200px band as the routine steps strip,
   with larger benefit circles */
.pts-tab-content .eye-section > .product-benefits-section.--moved-below {
    width: 100%;
    max-width: 1200px;
    margin: 48px auto 0;
}
.pts-tab-content .product-benefits-section.--moved-below .product-benefit-img {
    width: 120px;
    height: 120px;
}
.pts-tab-content .product-benefits-section.--moved-below .product-benefit-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Routine steps all render in the one site text colour (client request:
   no grey inactive state) */
.routine-item .step-number,
.routine-item h3,
.routine-item.routine-active .step-number,
.routine-item.routine-active h3 {
    color: #414141 !important;
}
.eye-results-title {
    color: #414141 !important;
}

/* Anchor pills keep one weight so the row never shifts */
li.acf_tab_active {
    font-weight: 600 !important;
}

/* Brand line renders solid (Rey dims the inner link to 50%) */
ul.products li.product .rey-brandLink a {
    opacity: 1 !important;
}

/* Buy button uses the site font (Rey ships it as Open Sans) */
.single_add_to_cart_button {
    font-family: Mulish, sans-serif !important;
}

/* PDP brand eyebrow and product title follow the US spec
   (they shipped in the old navy blue at 22px):
   eyebrow Mulish 16/24 w400 uppercase ls2.4, title Raleway 28/32 w600 */
.single-product .elementor-element-71064f4,
.single-product .elementor-element-71064f4 .elementor-heading-title,
.single-product .elementor-element-3ef4710 .elementor-heading-title {
    color: #414141 !important;
}
.single-product .elementor-element-71064f4,
.single-product .elementor-element-71064f4 .elementor-heading-title {
    font-family: Mulish, sans-serif !important;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    letter-spacing: 2.4px !important;
}
.single-product .elementor-element-3ef4710 .elementor-heading-title {
    font-family: Raleway, sans-serif !important;
    font-size: 28px !important;
    line-height: 32px !important;
    font-weight: 600 !important;
}

/* Footer Instagram icon: flat grey glyph instead of the colour app icon */
img.rey-customIcon[src*="instagram"] {
    content: url("/wp-content/uploads/2026/08/instagram-grey.svg");
    width: 32px !important;
    height: 32px !important;
}

/* Home statement band heading follows the US spec (Raleway 48/56 400
   #414141; shipped as navy 30/700) */
.elementor-element-a932b72 h2,
.elementor-element-a932b72 .elementor-heading-title {
    font-family: Raleway, sans-serif !important;
    font-size: 48px !important;
    line-height: 56px !important;
    font-weight: 400 !important;
    color: #414141 !important;
}
@media (max-width: 767px) {
    .elementor-element-a932b72 h2,
    .elementor-element-a932b72 .elementor-heading-title {
        font-size: 28px !important;
        line-height: 32px !important;
    }
}

/* Its subheading renders as part of the same statement, US style
   (same size and weight as the heading), and the View all link goes */
.elementor-element-a932b72 .rb-explore-header h3 {
    font-family: Raleway, sans-serif !important;
    font-size: 48px !important;
    line-height: 56px !important;
    font-weight: 400 !important;
    color: #414141 !important;
    margin-top: 0 !important;
}
@media (max-width: 767px) {
    .elementor-element-a932b72 .rb-explore-header h3 {
        font-size: 28px !important;
        line-height: 32px !important;
    }
}
.elementor-element-a932b72 .rb-view-all {
    display: none !important;
}

/* Homepage sections breathe: extra vertical padding on every content
   section (hero slider stays full-bleed) */
.home .elementor-40 > .elementor-element-d69a27f,
.home .elementor-40 > .elementor-element-159c1c0,
.home .elementor-40 > .elementor-element-80b9999 {
    padding-top: 32px;
    padding-bottom: 32px;
}
.home .elementor-40 > .elementor-element-6751555 {
    padding-top: 82px;
    padding-bottom: 82px;
}

/* Header menu bar: white with white background, like the US site */
.rey-siteHeader .elementor-element-24d4c1e {
    background-color: #ffffff !important;
}

/* ===== Product cards match the US card (added 3 Aug 2026) ==========
   isdin.com/us reference: tall 4:5 image with the product filling the
   tile, no brand eyebrow (the title carries the brand), no quick view or
   hover buttons. Scoped to shop, category, search and PDP related lists;
   the home Beloved textures carousel keeps its own overlay style. */

.archive ul.products li.product .rey-productThumbnail,
.search ul.products li.product .rey-productThumbnail,
.single-product ul.products li.product .rey-productThumbnail {
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.archive ul.products li.product .rey-productThumbnail a,
.search ul.products li.product .rey-productThumbnail a,
.single-product ul.products li.product .rey-productThumbnail a {
    display: block;
    width: 100%;
    height: 100%;
}

.archive ul.products li.product .rey-productThumbnail img,
.search ul.products li.product .rey-productThumbnail img,
.single-product ul.products li.product .rey-productThumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* The US card has no brand eyebrow; the product title carries the brand */
.archive ul.products li.product .rey-brandLink.--catalog,
.search ul.products li.product .rey-brandLink.--catalog,
.single-product ul.products li.product .rey-brandLink.--catalog {
    display: none !important;
}

/* No quick view or hover buttons on cards; Learn more is the only CTA */
.archive ul.products li.product .rey-productLoop-footer,
.search ul.products li.product .rey-productLoop-footer,
.single-product ul.products li.product .rey-productLoop-footer {
    display: none !important;
}

/* Beloved textures (home): heading block spacing follows the US site:
   both headings sit together, 16px before the science line */
.elementor-element-b165ded {
    margin-bottom: 0 !important;
}
.elementor-element-be10c01 {
    margin-bottom: 16px !important;
}

/* Beloved textures (home): cards show the texture artwork instead of the
   packshot. Mapped per product id so the carousel can clone or reorder
   slides without breaking the artwork. */
.elementor-element-b0d06ee li.product .rey-thumbImg {
    object-fit: cover;
}
.elementor-element-b0d06ee li.post-1708 .rey-thumbImg { content: url("/wp-content/uploads/2026/03/ES_2862_TH_ISDINCEUTICSAGEREVERSEDAY50G_MAIN_IMAGE_TEXTURE_2400px-1024x1024.png"); }
.elementor-element-b0d06ee li.post-1689 .rey-thumbImg { content: url("/wp-content/uploads/2026/03/ES_1449_TH_ISDINCEUTICSFLAVO-CSERUM30ML_MAIN_IMAGE_TEXTURE_2400px-1024x1024.png"); }
.elementor-element-b0d06ee li.post-1418 .rey-thumbImg { content: url("/wp-content/uploads/2026/02/ES_1510_TH_ISDINCEUTICSK-OXEYES15G_MAIN_IMAGE_TEXTURE_2400px-1024x1024.png"); }
.elementor-element-b0d06ee li.post-1771 .rey-thumbImg { content: url("/wp-content/uploads/2026/03/CL_3805_TH_ISDINCEUTICSHYALURONICCONCENTRATE30ML_MAIN_IMAGE_TEXTURE_2400px-1024x1024.png"); }
.elementor-element-b0d06ee li.post-1407 .rey-thumbImg { content: url("/wp-content/uploads/2026/05/ES_2962_TH_ISDINCEUTICSMELATONIK30ML_MAIN_IMAGE_2400px-1024x1024.png"); }
.elementor-element-b0d06ee li.post-1350 .rey-thumbImg { content: url("/wp-content/uploads/2026/02/CO_4041_TH_ISDINCEUTICSESSENTIALCLEANSING200ML_MAIN_IMAGE_TEXTURE_2400px-1024x1024.png"); }
.elementor-element-b0d06ee li.post-1788 .rey-thumbImg { content: url("/wp-content/uploads/2026/03/ES_4052_TH_ISDINCEUTICSHMNORMAL50G_MAIN_IMAGE_TEXTURE_2400px-1024x1024.png"); }
.elementor-element-b0d06ee li.post-1912 .rey-thumbImg { content: url("/wp-content/uploads/2026/03/MX_4243_TH_ISDINCEUTICSMELACLEARADVANCED3-30ML_MAIN_IMAGE_TEXTURE_2400px-1024x1024.png"); }
.elementor-element-b0d06ee li.post-1386 .rey-thumbImg { content: url("/wp-content/uploads/2026/05/ES_4565_TH_ISDINCEUTICSRETINALSMOOTH50ML_MAIN_IMAGE_TEXTURE_2400px-1024x1024.png"); }
.elementor-element-b0d06ee li.post-1397 .rey-thumbImg { content: url("/wp-content/uploads/2026/05/CL_4140_TH_ISDINCEUTICSRETINALINTENSE50ML_MAIN_IMAGE_TEXTURE_2400px-1024x1024.png"); }

/* Beloved textures carousel: US-style 8px pagination dots below the cards
   (Splide renders them once custom-script.js switches pagination on) */
.elementor-element-b0d06ee .splide__pagination {
    position: static;
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}
.elementor-element-b0d06ee .splide__pagination li {
    line-height: 0;
    margin: 0;
}
.elementor-element-b0d06ee .splide__pagination__page {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #414141;
    padding: 0;
    cursor: pointer;
    opacity: 1;
    transform: none;
}
.elementor-element-b0d06ee .splide__pagination__page.is-active {
    background: #414141;
}

/* Reversed text/image sections mirror the standard 52px column gap,
   so text measures the same width on both layouts. The image column
   drops its own padding so images render the same width in both
   directions (the text column's 52px is the whole gap). */
.eye-section.reverse-layout .eye-content-col {
    padding-right: 52px;
}
.eye-section.reverse-layout .eye-image-col {
    padding-left: 0 !important;
}

/* Product tab sections: text sits vertically centred beside the image,
   matching the US layout */
.pts-tab-content .eye-row,
.pts-tab-content .eye-results-row {
    /* columns share one height: the image stretches to tall text, and
       short text centres against the image (see rules below) */
    align-items: stretch;
}

.pts-tab-content .eye-image-col,
.pts-tab-content .eye-results-image {
    /* the image fills whatever height the text needs, 500px minimum */
    position: relative;
    min-height: 500px;
    overflow: hidden;
}

.pts-tab-content .eye-content-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Text columns keep a 52px inset on their outer edge as well, so long
   lines never run to the container edge */
@media (min-width: 992px) {
    .pts-tab-content .eye-content-col {
        padding-right: 52px;
    }
    .pts-tab-content .reverse-layout .eye-content-col {
        padding-left: 52px;
    }
    .pts-tab-content .eye-results-content {
        padding-right: 52px;
    }
}

/* Tab section images fill a uniform box, cover-cropped (BugHerd #623) */
.pts-tab-content .eye-image-col img,
.pts-tab-content .eye-results-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    min-height: 0;
    object-fit: cover;
}
@media (max-width: 991px) {
    .pts-tab-content .eye-image-col,
    .pts-tab-content .eye-results-image {
        /* The row stacks into a column below 992px, so the theme's
           flex: 0 0 100% starts governing height instead of width and
           resolves to nothing, collapsing the absolutely positioned
           image out of sight. Height has to be stated outright. */
        flex: 0 0 auto;
        height: 340px;
        min-height: 340px;
    }
    .eye-results-content {
        padding-left: 0;
    }
}

/* Clinical results: US layout. Stats in two left-aligned columns,
   Raleway 60px numbers, Mulish 13px footnotes, nothing centred */
.eye-results-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    flex: 0 0 50% !important;
    max-width: 50%;
    margin: 0 !important;
    /* same image-to-text gap as every other tab */
    padding-left: 52px;
    box-sizing: border-box;
}
.eye-results-title {
    text-align: left !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}
.eye-counter-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    row-gap: 40px;
    width: 100%;
    margin: 0 !important;
    max-width: none !important;
}
.eye-counter-box,
.eye-counter-box p {
    text-align: left !important;
}
.eye-counter-circle {
    text-align: left !important;
    justify-content: flex-start !important;
    font-size: 60px !important;
    line-height: 72px !important;
}
.eye-counter-circle .eye-counter-number {
    font-size: 60px !important;
    line-height: 72px !important;
}
.eye-results-note {
    font-family: Mulish, sans-serif !important;
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    text-align: left !important;
    display: block;
}
@media (max-width: 767px) {
    .eye-counter-wrap {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }
}

/* ===== Home best sellers: US-style overlay cards (added 31 Jul 2026) =====
   Matches the isdin.com/us home carousel card: portrait 304:505 card,
   21px radius, full-bleed image, frosted glass bottom panel, centred
   white text, underlined Learn more, no price. Scoped to the homepage
   product grid widget only (.elementor-element-b0d06ee). */

.elementor-element-b0d06ee ul.products li.product .rey-productInner {
    position: relative;
    aspect-ratio: 304 / 505;
    border-radius: 21px !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #F2F0EE;
}

.elementor-element-b0d06ee ul.products li.product .rey-productThumbnail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.elementor-element-b0d06ee ul.products li.product .rey-productThumbnail a,
.elementor-element-b0d06ee ul.products li.product .rey-productThumbnail img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* Frosted glass panel. The US site uses rgba(0,0,0,0.1) + blur(24px) over
   colourful lifestyle photos; our packshots sit on white or transparent
   backgrounds, so the tint is a touch stronger to keep white text legible. */
.elementor-element-b0d06ee ul.products li.product .rey-productInner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.28));
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    pointer-events: none;
}

.elementor-element-b0d06ee ul.products li.product .rey-brandLink {
    display: none !important;
}

.elementor-element-b0d06ee ul.products li.product .rey-brandLink a {
    font-family: Mulish, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 15.4px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
}

.elementor-element-b0d06ee ul.products li.product h2.woocommerce-loop-product__title {
    position: relative;
    z-index: 1;
    margin: 0 20px 8px !important;
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 26.4px !important;
    font-size: 24px !important;
}

.elementor-element-b0d06ee ul.products li.product h2.woocommerce-loop-product__title a {
    font-family: Raleway, sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 26.4px !important;
    color: #ffffff !important;
    text-align: center !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.elementor-element-b0d06ee ul.products li.product .product_short_title {
    position: relative;
    z-index: 1;
    display: block;
    min-height: 0 !important;
    margin: 0 24px 16px !important;
}

.elementor-element-b0d06ee ul.products li.product .product_short_title p {
    font-family: Mulish, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 20.8px !important;
    color: #ffffff !important;
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

/* The US home cards carry no price */
.elementor-element-b0d06ee ul.products li.product .custom_product_price {
    display: none !important;
}

/* Text elements keep their natural height (Rey lets the title flex-grow,
   which would stretch the stack across the whole card) */
.elementor-element-b0d06ee ul.products li.product .rey-brandLink,
.elementor-element-b0d06ee ul.products li.product h2.woocommerce-loop-product__title,
.elementor-element-b0d06ee ul.products li.product .product_short_title,
.elementor-element-b0d06ee ul.products li.product a.custom-button-learn {
    flex: 0 0 auto !important;
}

/* Rey's loop footer (duplicate price) sits after the button with
   margin-top auto, which shoves the text stack off the glass panel */
.elementor-element-b0d06ee ul.products li.product .rey-productLoop-footer {
    display: none !important;
}

/* ===== Header menus: US-style (added 31 Jul 2026) ==================
   isdin.com/us reference: top-level Mulish 600 #414141 sentence case, no
   submenu indicator; dropdown is a white panel of Mulish 600 links.
   Dropdown links match their parent item at 16px (3 Aug the top level
   was remeasured up to 16px but the sub-menu was left behind at 14px,
   so children read smaller than the item that opened them). */

.rey-mainMenu--desktop > li > a {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #414141 !important;
    padding: 12px 16px !important;
}

/* The US nav carries no dropdown indicator dots */
.rey-mainMenu--desktop .--submenu-indicator {
    display: none !important;
}

/* Rey reserves 30px right padding for the indicator via
   padding-right: var(--indicator-distance) !important; rebalance the
   variable instead of fighting the specificity */
ul.rey-mainMenu.rey-mainMenu--desktop.--has-indicators,
.rey-mainMenu--desktop .menu-item-has-children {
    --indicator-distance: 16px !important;
}

/* Dropdown panels: white, soft shadow, US spacing. Rey draws the actual
   visible panel with a ::before backdrop behind the list, so that layer
   gets the white too. */
.rey-mainMenu--desktop .sub-menu {
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10) !important;
    padding: 20px 24px !important;
    min-width: 250px !important;
}
.rey-mainMenu--desktop .sub-menu::before {
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10) !important;
}

.rey-mainMenu--desktop .sub-menu li {
    margin: 0 !important;
    padding: 0 !important;
}

.rey-mainMenu--desktop .sub-menu a {
    display: block;
    font-family: Mulish, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    color: #414141 !important;
    padding: 8px 0 !important;
    text-transform: none !important;
}

/* Rey wraps each sub-menu label in a bare <span> carrying
   padding: 10px 30px 10px 25px, which both inflated the rows and pushed
   the text 25px in from the panel's own 24px inset. Zero it and let the
   anchor above own the row spacing. */
.rey-mainMenu--desktop .sub-menu a > span {
    padding: 0 !important;
    display: block;
}

.rey-mainMenu--desktop .sub-menu a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.elementor-element-b0d06ee ul.products li.product a.custom-button-learn {
    position: relative;
    z-index: 1;
    align-self: center;
    margin: 0 0 24px !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    font-family: Mulish, sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: #ffffff !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

/* Account and cart icons hidden for now (client request). These two
   widgets live only in the header's mobile/tablet icon row, which runs
   up to ~1100px; the desktop row carries no account or cart widget at
   all, so this needs no breakpoint and changes nothing on desktop. */
.rey-siteHeader .elementor-element-2b3e038,
.rey-siteHeader .elementor-element-728ed28 {
    display: none !important;
}

/* Same reason, inside the mobile menu panel: its footer is a single
   "Connect to your account" link with the user icon sitting inside it,
   so hiding the row takes both away. */
.rey-mobileNav .rey-mobileNav-footer {
    display: none !important;
}

/* The mobile and tablet icon row is a five column grid, one column per
   widget. With account and cart hidden the three that remain were all
   packed into the left columns. Three columns instead: menu left, logo
   centred, search on the right edge, all on one baseline. */
.rey-siteHeader .elementor-element-cd71c45 > .e-con-inner {
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center;
}

.rey-siteHeader .elementor-element-636568f {
    order: 1;
    justify-self: start;
}

.rey-siteHeader .elementor-element-270b37d {
    order: 2;
    justify-self: center;
}

.rey-siteHeader .elementor-element-8b2e03d {
    order: 3;
    justify-self: end;
}

/* Tablet logo was rendering wider than the desktop one (146px against
   94px) because the widget stretched to its grid column. */
@media (min-width: 768px) {
    .rey-siteHeader .elementor-element-270b37d img {
        width: 94px !important;
        max-width: 94px !important;
        height: auto !important;
    }
}

/* The desktop search icon moved out of the logo row and into the menu
   bar, sitting just after the last menu item. Menu and icon travel as
   one centred group so the bar stays balanced. */
.rey-siteHeader .elementor-element-24d4c1e > .e-con-inner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.rey-siteHeader .elementor-element-24d4c1e .elementor-element-d586bb9 {
    width: auto;
    flex: 0 1 auto;
}

.rey-siteHeader .elementor-element-24d4c1e .elementor-element-a7c91e4 {
    align-self: center;
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------
   Phones (client request, August 2026). The desktop scale was
   carrying straight through to mobile: headings too large, product
   cards too loose, and section padding too deep. Sizes follow the US
   site measured at 375px wide.
   --------------------------------------------------------------- */
@media (max-width: 767px) {

    /* Display headings come down to the US mobile scale of 28/32,
       sub-headings to 24/30. */
    .elementor-element-b165ded .elementor-heading-title,
    .elementor-element-be10c01 .elementor-heading-title {
        font-size: 28px !important;
        line-height: 32px !important;
    }

    .elementor-element-5323dcb .elementor-heading-title {
        font-size: 24px !important;
        line-height: 30px !important;
    }

    .eye-content-col h2,
    .pts-tab-content .eye-content-col h2,
    .routine-section .routine-header h2,
    .eye-results-title {
        font-size: 24px !important;
        line-height: 30px !important;
    }

    .routine-item h3 {
        font-size: 20px !important;
        line-height: 26px !important;
    }

    .eye-content-col p,
    .product-benefit-item p,
    .routine-item p {
        line-height: 24px;
    }

    /* Section spacing. Desktop padding was landing unchanged on a
       phone and stacking into long empty runs. */
    .home .elementor-40 > .elementor-element-d69a27f,
    .home .elementor-40 > .elementor-element-159c1c0,
    .home .elementor-40 > .elementor-element-80b9999 {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .home .elementor-40 > .elementor-element-6751555 {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    /* 50px gutters left the category tiles at 290px on a 390px screen.
       20px gives the artwork the full width the US card has. */
    .home .elementor-40 > .elementor-element-d69a27f {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* 90px of desktop breathing room inside the explore block reads as
       an empty screen on a phone. */
    .home .elementor-40 .elementor-element-a932b72 {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    .pts-tab-content .eye-section {
        margin-bottom: 40px;
    }

    .pts-tab-content .eye-content-col {
        padding-top: 24px;
    }

    .pts-tab-content .eye-section > .product-benefits-section.--moved-below {
        margin-top: 24px;
    }

    /* Product cards sit two per row on a phone, so the type comes down
       and the gaps between name, description, price and button close
       up. Buttons share a baseline so the row reads level. */
    ul.products li.product .rey-productInner {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .woocommerce ul.products li.product h2.woocommerce-loop-product__title,
    .woocommerce ul.products li.product h2.woocommerce-loop-product__title a {
        font-size: 15px !important;
        line-height: 20px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .woocommerce ul.products li.product h2.woocommerce-loop-product__title a {
        margin: 8px 0 2px !important;
    }

    .woocommerce ul.products li.product .product_short_title,
    .woocommerce ul.products li.product .product_short_title p {
        font-size: 13px !important;
        line-height: 18px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .woocommerce ul.products li.product .product_short_title p {
        margin-bottom: 8px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .woocommerce ul.products li.product .custom_product_price {
        font-size: 15px !important;
        margin-bottom: 10px !important;
        padding: 0 8px !important;
    }

    ul.products li.product a.custom-button-learn {
        margin-top: auto !important;
        padding: 11px 8px !important;
        font-size: 12px !important;
        letter-spacing: 1px !important;
    }

    /* The home carousel card overlays its text on the artwork, so it
       keeps a larger scale of its own. */
    .elementor-element-b0d06ee ul.products li.product h2.woocommerce-loop-product__title,
    .elementor-element-b0d06ee ul.products li.product h2.woocommerce-loop-product__title a {
        font-size: 20px !important;
        line-height: 26px !important;
        padding: 0 !important;
    }

    .elementor-element-b0d06ee ul.products li.product .product_short_title,
    .elementor-element-b0d06ee ul.products li.product .product_short_title p {
        font-size: 15px !important;
        line-height: 22px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .elementor-element-b0d06ee ul.products li.product a.custom-button-learn {
        margin: 0 0 24px !important;
        padding: 0 !important;
        font-size: 16px !important;
        letter-spacing: normal !important;
    }

    /* Content pages were laid out at desktop sizes only, so headings of
       38px to 60px carried straight onto phones. Leads drop to 32/38,
       section headings to the US mobile ceiling of 28/32, and the
       smaller run of 30px headings to 24/30. */
    .rey-pageTitle.entry-title,
    .woocommerce-products-header .woocommerce-products-header__title,
    .elementor-element-566b60c .elementor-heading-title,
    .elementor-element-566b60c h3 {
        font-size: 28px !important;
        line-height: 34px !important;
    }

    .elementor-element-ac651fc .elementor-heading-title,
    .elementor-element-5259cb2 .elementor-heading-title,
    .elementor-element-dde98ef .elementor-heading-title,
    .elementor-element-b52f690 .elementor-heading-title {
        font-size: 32px !important;
        line-height: 38px !important;
    }

    .elementor-element-165dbfe .elementor-heading-title,
    .elementor-element-9001c9a .elementor-heading-title,
    .elementor-element-15d7db4 .elementor-heading-title,
    .elementor-element-7af2900 .elementor-heading-title,
    .elementor-element-68f4e4d .elementor-heading-title,
    .elementor-element-ccf8a75 .elementor-heading-title,
    .elementor-element-36b8f8e .elementor-heading-title,
    .elementor-element-8fe73b7 .elementor-heading-title {
        font-size: 28px !important;
        line-height: 32px !important;
    }

    .elementor-element-7963893 .elementor-heading-title,
    .elementor-element-8cf3070 .elementor-heading-title {
        font-size: 24px !important;
        line-height: 30px !important;
    }

    /* The planet band's inner wrap carries 16px of padding on the left
       and none on the right, so its centred text sat 8px off centre. */
    .home .elementor-40 .elementor-element-80b9999 .elementor-widget-wrap {
        padding-right: 16px;
    }

    /* Footer: the columns stack on a phone, so it needs room top and
       bottom and more air between links than the desktop rows give. */
    .rey-siteFooter .elementor-element-4bcf990 {
        padding-top: 48px !important;
        padding-bottom: 40px !important;
    }

    .rey-siteFooter .reyEl-menu-nav li {
        margin-bottom: 10px;
    }

    .rey-siteFooter .reyEl-menu-nav li:last-child {
        margin-bottom: 0;
    }

    .rey-siteFooter .elementor-widget {
        margin-bottom: 8px;
    }

    .rey-siteFooter .elementor-widget-wrap > .elementor-widget:last-child {
        margin-bottom: 0;
    }

    /* Space between one stacked column and the next heading. */
    .rey-siteFooter .elementor-column {
        margin-bottom: 32px;
    }

    .rey-siteFooter .elementor-column:last-child {
        margin-bottom: 0;
    }

}

/* The clinical-results text column is pinned to half width for the
   desktop two-column layout further up this file. That rule sits after
   the tablet breakpoint, so it kept winning once the row stacked and
   squeezed the copy into half the screen. Restated here, at the end. */
/* The shop filter sidebar is sticky with top: 0, so once the header has
   scrolled away it sat hard against the top edge of the window with the
   Category heading touching it. The offset only applies while stuck, so
   the sidebar still lines up with the product grid at the top of the
   page. Desktop only; below 1026px the sidebar is off-canvas. */
@media (min-width: 1026px) {
    .rey-sidebar .rey-sidebarInner {
        top: 32px !important;
    }
}

/* Below 1026px Rey moves the shop filters into an off-canvas panel
   (the .shop-sidebar goes position: fixed, visibility: hidden) but its
   flex column carries on reserving 150-200px of the row. That empty
   column was pushing the product grid to the right on tablets. Collapse
   it and let the grid take the full width; the FILTER button in the
   toolbar still opens the panel. */
@media (max-width: 1025px) {
    .elementor-element-478f220 {
        flex: 0 0 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .elementor-element-dbde6a5 {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}

@media (max-width: 991px) {
    .eye-results-content {
        flex: 0 0 100% !important;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    /* style.css centres the tab copy once the row stacks. The US keeps
       product copy left-aligned at every width (checked at 375px on
       isdin.com/us), and centred paragraphs of this length are harder
       to read. Counter boxes and footnotes keep their own centring. */
    .pts-tab-content .eye-row,
    .pts-tab-content .eye-results-row,
    .pts-tab-content .eye-content-col,
    .pts-tab-content .eye-results-content {
        text-align: left;
    }
}

/* ------------------------------------------------------------------ */
/* Header search, matched to isdin.com/us (3 Aug 2026).                */
/* Rey's built-in AJAX product search. Desktop toggle = widget a7c91e4 */
/* in the menu bar of header template 83, after the last menu item     */
/* (layout rules live with the menu-bar block further up); tablet and  */
/* phone use the icon in the mobile header row instead.                */
/* Panel = #rey-searchPanel (wide).                                    */
/* ------------------------------------------------------------------ */

.rey-siteHeader--83 .elementor-element-a7c91e4 .rey-headerSearch-toggle {
    color: #414141;
    padding: 6px;
}

.rey-siteHeader--83 .elementor-element-a7c91e4 .rey-headerIcon-icon svg {
    width: 20px;
    height: 20px;
}

/* Panel: white sheet under the header, centred underlined input with
   a magnifier on the left, like the US search. */
.rey-searchPanel[data-style="wide"] {
    background: #ffffff;
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
}

.rey-searchPanel[data-style="wide"] .rey-searchPanel-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 40px 24px 48px;
}

.rey-searchPanel[data-style="wide"] .rey-searchPanel-innerForm {
    position: relative;
    max-width: 710px;
    margin: 0 auto;
    border-bottom: 1px solid #414141;
    padding: 0 0 10px 36px;
}

.rey-searchPanel[data-style="wide"] .rey-searchPanel-innerForm::before {
    content: "";
    position: absolute;
    left: 0;
    top: 45%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23414141' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 5 5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.rey-searchPanel[data-style="wide"] input[type="search"] {
    font-family: Mulish, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    padding: 8px 0;
}

.rey-searchPanel[data-style="wide"] input[type="search"]::placeholder {
    color: #757575;
    opacity: 1;
}

/* Results: product cards like the US "Suggested products" row. */
.rey-searchPanel[data-style="wide"] .rey-searchItems {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    margin-top: 36px;
}

.rey-searchPanel[data-style="wide"] .rey-searchItem {
    width: 200px;
}

.rey-searchPanel[data-style="wide"] .rey-searchItem a {
    display: block;
    text-decoration: none;
}

.rey-searchPanel[data-style="wide"] .rey-searchItem-thumbnail {
    background: #F7F7F7;
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    overflow: hidden;
}

.rey-searchPanel[data-style="wide"] .rey-searchItem-thumbnail img {
    /* fill the 4:5 box like the category cards; square sources crop a
       little off the sides, which keeps white-background packshots from
       showing grey strips above and below */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rey-searchPanel[data-style="wide"] .rey-searchItem-title {
    font-family: Mulish, sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: #414141;
}

.rey-searchPanel[data-style="wide"] .rey-searchItem-price {
    font-family: Mulish, sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #525151;
    margin-top: 4px;
}

/* Rey shows the "Search sitename" label and uppercases the input and
   result titles; the US search is normal case with no visible label. */
.rey-searchPanel[data-style="wide"] form > label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.rey-searchPanel[data-style="wide"] input[type="search"],
.rey-searchPanel[data-style="wide"] .rey-searchItem-title {
    text-transform: none;
}

/* Sit flush under the desktop header (60px logo row + 59px nav bar);
   Rey's default leaves a gap band. */
@media (min-width: 1025px) {
    .rey-searchPanel[data-style="wide"] {
        top: 119px;
    }
}

/* The trailing "view all results" item: underlined text link, like the
   US "See all" link. */
.rey-searchPanel[data-style="wide"] .rey-searchItem.--last {
    width: 100%;
    text-align: center;
    margin-top: 8px;
}

.rey-searchPanel[data-style="wide"] .rey-searchItem.--last a {
    display: inline-block;
    font-family: Mulish, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #414141;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: underline;
    text-underline-offset: 3px;
    background: none;
    border: none;
    padding: 0;
}

/* ===== PDP gallery: every slide a fixed square ======================
   8 of the 298 product images are landscape (2560x1708 model shots); the
   rest are square. The slide box was already square but the img kept its
   own ratio inside it, so the picture resized and shifted as you clicked
   through the thumbnails. Pin every image to the full square and fit it
   with object-fit: contain - constant frame, and nothing is cropped, so
   the model stays whole. (cover would hold the square too, but would cut
   ~a third off each side of the landscape shots.) */
.woocommerce-product-gallery__image {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__image a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Thumbnail rail: same deal, square cell, whole image inside it. */
.rey-productThumbnails .__thumbItem,
.rey-productThumbnails__item {
    aspect-ratio: 1 / 1;
}

.rey-productThumbnails .__thumbItem img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* ===== Our ingredients: hide the two dead "See more" links =========
   Caffeine (fa8a468) and Zinc oxide (2c9a6c6) have no AU products that
   mention them, so their links were removed rather than pointed at an
   empty search. Hide the leftover "See more" so nothing looks clickable
   that isn't. Delete these two rules if AU products ever list them. */
.elementor-element-fa8a468,
.elementor-element-2c9a6c6 {
    display: none;
}

/* ===== Home Isdinceutics banner: cap at its natural width ==========
   Widget 148e181 in section 159c1c0 is the same 1725x806 banner asset
   the hero slider uses, but Elementor stretched it to the full viewport
   (2560px on a large monitor = a 1.48x upscale, visibly soft) while the
   hero slider leaves its banners at natural size and centres them.
   Match the slider: fluid up to 1725px, then hold and centre.
   Below 1725px viewport nothing changes. */
/* !important because Elementor's own post-40.css carries
   `.elementor-40 .elementor-element.elementor-element-148e181 img
   { width:100%; max-width:100% }` at higher specificity. */
.elementor-element-148e181 img {
    width: 100% !important;
    max-width: 1725px !important;
    height: auto !important;
    margin-left: auto;
    margin-right: auto;
    display: block;
}