{"version":3,"file":"css/wcps-styles.min.css","mappings":";;;AAAA,gBAAgB;AAQhB;EACI;AANJ;;AASA;AAEA;EACI;EACA;EACA;AAPJ;AASI;EACI;EACA;AAPR;AASQ;EACI;EACA;EACA;AAPZ;AAWQ;EACI;EACA;EACA;EACA;AATZ;AAYY;EAPJ;IAQQ;EATd;AACF;AAWY;EAXJ;IAYQ;EARd;AACF;AAUY;EAfJ;IAgBQ;IACA;EAPd;AACF;AAWQ;EACI;EACA;EACA;EACA;EAoBI;AA5BhB;AA+BY;EA6BQ;EACA;AAzDpB;AA+DQ;EACI;EACA;EAEA;EACA;AA9DZ;AAkEQ;EACI;EACA;EACA;EACA;EACA;EACA;AAhEZ;AAkEY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAhEhB;AAmEY;EACI;EACA;EACA;AAjEhB;AAoEY;EACI;EACA;EACA;KAAA;EACA;EACA;EACA;AAlEhB;AAsEgB;EAoBQ;AAvFxB;AA8FQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA5FZ;AA8FY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA5FhB;AA+FgB;EACI;EACA;EACA;EACA;EACA;AA7FpB;AA+FoB;EACI;EACA;AA7FxB;AAkGgB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAhGpB;AAmGoB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAjGxB;AAqGoB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAnGxB;AAuGgB;EACI;EACA;EACA;EACA;AArGpB;AAuGoB;EACI;AArGxB;AAuGwB;EACI;AArG5B;AAyGoB;EACI;EACA;EACA;AAvGxB;AAyGwB;EACI;AAvG5B;AA6GgB;EACI;EACA;EACA;AA3GpB;AA6GoB;EACI;EACA;AA3GxB;AA6GwB;EACI;AA3G5B;AA+GoB;EACI;AA7GxB;AA+GwB;EACI;AA7G5B;AAmHoB;EACI;EACA;AAjHxB;AAmHwB;EACI;AAjH5B;AAqHoB;EACI;AAnHxB;AAwHoB;EACI;EACA;AAtHxB;AAwHwB;EACI;AAtH5B;AA0HoB;EACI;AAxHxB;AA6HoB;EACI;EACA;AA3HxB;AA6HwB;EACI;AA3H5B;AA+HoB;EACI;AA7HxB;AAmIY;EACI;AAjIhB;AAoIY;EACI;AAlIhB;AAqIY;EACI;AAnIhB;AAsIY;EACI;AApIhB;AA0IY;EACI;EACA;EACA;AAxIhB;AA8IQ;EACI;IACI;IACA;EA5Id;EA+IU;IACI;IACA;EA7Id;EAgJU;IACI;IACA;EA9Id;AACF;AAkJQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAhJZ;AAkJY;EACI;EACA;EACA;AAhJhB;AAkJgB;EACI;EACA;AAhJpB;AAkJoB;EACI;AAhJxB;AAqJY;EACI;EACA;EACA;EACA;AAnJhB;AAqJgB;EACI;AAnJpB;AAuJY;EACI;AArJhB;AAuJgB;EACI;AArJpB;AAuJoB;EACI;EACA;AArJxB;AA2JY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAzJhB;AA2JgB;EACI;EACA;AAzJpB;AAgKI;EACI;IACI;EA9JV;EAiKM;IACI;EA/JV;EAkKM;IACI;EAhKV;AACF;;AAoKA;AAGA;AAEA;EACI;EACA;EACA;AApKJ;AAsKI;EACI;EACA;AApKR;AAsKQ;EACI;EACA;EACA;AApKZ;AAwKQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAtKZ;AAyKY;EAVJ;IAWQ;IACA;EAtKd;AACF;AAwKY;EAfJ;IAgBQ;IACA;EArKd;AACF;AAuKY;EApBJ;IAqBQ;IACA;EApKd;AACF;AAwKQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAqBI;AA1LhB;AA8LY;EAwBQ;EACA;AAnNpB;AAsNgB;EACI;AApNpB;AAuNgB;EACI;EACA;AArNpB;AAwNgB;EACI;AAtNpB;AA4NQ;EACI;EACA;EAEA;EACA;EACA;AA3NZ;AA+NQ;EACI;EACA;EACA;AA7NZ;AAgOY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA9NhB;AAkOY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;AAhOhB;AAmOY;EACI;EACA;EACA;EACA;EACA;AAjOhB;AAoOY;EACI;EACA;EACA;KAAA;EACA;EACA;EACA;AAlOhB;AAsOgB;EAkBQ;AArPxB;AA6PQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA3PZ;AA6PY;;;;EAII;EACA;EACA;EACA;EACA;EACA;EACA,0HACI;EAGJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;AA9PhB;AAiQgB;;;;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA5PpB;AAgQgB;;;;;;;;EAEI;EACA;EACA;EACA;EACA;AAxPpB;AA0PoB;;;;;;;;EACI;EACA;AAjPxB;AAsPgB;;;;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,8EACI;EAEJ;EACA;UAAA;EACA;AAnPpB;AAsPoB;;;;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAjPxB;AAqPoB;;;;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAhPxB;AAqPgB;;;;EACI;EACA,2HACI;AAjPxB;AAqPoB;;;;EACI;AAhPxB;AAmPoB;;;;EACI;EACA;EACA;AA9OxB;AAgPwB;;;;EACI;AA3O5B;AAiPgB;;;;EACI;EACA;EACA;AA5OpB;AA8OoB;;;;EACI;AAzOxB;AA4OoB;;;;EACI;EACA,8HACI;AAxO5B;AA6OoB;;;;EACI;EACA;AAxOxB;AA0OwB;;;;EACI;AArO5B;AA0OgB;;;;EACI;AArOpB;AAuOoB;;;;EACI;AAlOxB;AAqOoB;;;;EACI;EACA;AAhOxB;AAmOoB;;;;EACI;EACA;AA9NxB;AAgOwB;;;;EACI;AA3N5B;AAgOgB;;;;EACI;AA3NpB;AA6NoB;;;;EACI;AAxNxB;AA2NoB;;;;EACI;EACA;AAtNxB;AAyNoB;;;;EACI;EACA;AApNxB;AAsNwB;;;;EACI;AAjN5B;AAsNgB;;;;EACI;AAjNpB;AAmNoB;;;;EACI;AA9MxB;AAiNoB;;;;EACI;EACA;AA5MxB;AA+MoB;;;;EACI;EACA;AA1MxB;AA4MwB;;;;EACI;AAvM5B;AA6MgB;;;;EACI;AAxMpB;AA4MgB;;;;EACI;AAvMpB;AA0MgB;;;;EACI;AArMpB;AAwMgB;;;;EACI;AAnMpB;AAsMgB;;;;EACI;AAjMpB;AAuMQ;EACI;EACA;EACA;AArMZ;AA0MQ;EACI;IACI;IACA;EAxMd;EA2MU;IACI;IACA;EAzMd;AACF;AA4MQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AA1MZ;AAgNQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA9MZ;AAiNY;EACI;EACA;EACA;EACA;EACA;AA/MhB;AAiNgB;EACI;EACA;EACA;AA/MpB;AAiNoB;EACI;AA/MxB;AAoNY;EACI;EACA;EACA;EACA;AAlNhB;AAoNgB;EACI;AAlNpB;AAoNoB;EACI;EACA;AAlNxB;AAuNY;EACI;EACA;EACA;EACA;AArNhB;AAuNgB;EACI;EACA;EACA;AArNpB;AAyNY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAvNhB;AAyNgB;EACI;EACA;AAvNpB;AAgOI;EACI;IACI;IACA;EA9NV;EAiOM;IACI;IACA;EA/NV;EAkOM;IACI;IACA;EAhOV;AACF;;AAoOA;AAGA;EACI;EACA;EAEA;AApOJ;AAsOI;EACI;EACA;EAsQA;AAzeR;AAqOQ;EACI;EACA;EACA;AAnOZ;AAuOQ;EACI;OAAA;EACA;EACA;EACA;EACA;EACA;AArOZ;AAwOY;EATJ;IAUQ;SAAA;EArOd;AACF;AAuOY;EAbJ;IAcQ;SAAA;IACA;SAAA;EApOd;AACF;AAsOY;EAlBJ;IAmBQ;SAAA;IACA;SAAA;EAnOd;AACF;AAuOQ;EACI;OAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AArOZ;AAuOY;EACI;EACA;AArOhB;AAuOgB;EACI;AArOpB;AAwOgB;EACI;EACA;AAtOpB;AA4OQ;EACI;EACA;EACA;EACA;AA1OZ;AA8OQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AA5OZ;AA8OY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;AA5OhB;AA+OY;EACI;EACA;EACA;AA7OhB;AAgPY;EACI;EACA;EACA;KAAA;EACA;EACA;AA9OhB;AAkPgB;EACI;AAhPpB;AAqPY;EACI;AAnPhB;AAsPY;EACI;AApPhB;AAuPY;EACI;AArPhB;AA0PQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;AAzPZ;AA2PY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAzPhB;AA2PgB;EACI;EACA;EACA;EACA;AAzPpB;AA2PoB;EACI;EACA;AAzPxB;AA8PgB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA5PpB;AA8PoB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA5PxB;AAgQgB;EACI;EACA;AA9PpB;AAgQoB;EACI;AA9PxB;AAiQoB;EACI;EACA;EACA;AA/PxB;AAoQgB;EACI;EACA;AAlQpB;AAoQoB;EACI;EACA;AAlQxB;AAuQoB;EACI;EACA;AArQxB;AA0QoB;EACI;EACA;AAxQxB;AA6QoB;EACI;EACA;AA3QxB;AAqRQ;EACI;EACA;EACA;EACA;EACA;EAEA;EAuCA;EA4BA;EAmBA;EA6BA;EAwDA;AA1bZ;AAgRY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA9QhB;AAgRgB;EACI;EACA;EACA;EACA;EACA;AA9QpB;AAgRoB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA9QxB;AAiRoB;EACI;AA/QxB;AAiRwB;EACI;AA/Q5B;AAsRY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AApRhB;AAsRgB;EACI;EACA;EACA;EACA;AApRpB;AAuRgB;EACI;EACA;EACA;EACA;EACA;AArRpB;AA0RY;EACI;AAxRhB;AA0RgB;EACI;EACA;AAxRpB;AA0RoB;EACI;AAxRxB;AA2RoB;EACI;EACA;AAzRxB;AA+RY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA7RhB;AA+RgB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AA7RpB;AAgSgB;EACI;EACA;EACA;EACA;AA9RpB;AAmSY;EACI;EACA;EACA;AAjShB;AAmSgB;EACI;EACA;AAjSpB;AAmSoB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;KAAA;UAAA;EACA;EACA;AAjSxB;AAmSwB;EACI;EACA;EACA;AAjS5B;AAsSgB;EACI;AApSpB;AAsSoB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AApSxB;AAsSwB;EACI;EACA;EACA;AApS5B;AA2SY;EACI;EACA;EACA;EACA;AAzShB;AA2SgB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAzSpB;AA2SoB;EACI;EACA;AAzSxB;;AAqTA;AAIA;AAEA;AAGA;EACI;EACA;EACA;EA8hBA;AAr1BJ;AAyTI;EACI;EACA;EACA;EACA;EACA;EAuBI;AA7UZ;AAwTQ;EACI;EACA;EACA;AAtTZ;AA2UQ;EACI;AAzUZ;AA2UY;EACI;EACA;EACA;EACA;EACA;AAzUhB;AA2UgB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAzUpB;AA2UoB;EACI;AAzUxB;AA4UoB;EACI;EACA;AA1UxB;AA+UY;EACI;EACA;EACA;EACA;EACA;AA7UhB;AA+UgB;EACI;EACA;EACA;AA7UpB;AAiVY;EACI;EACA;EACA;EACA;AA/UhB;AAiVgB;EANJ;IAOQ;EA9UlB;AACF;AAgVgB;EAVJ;IAWQ;EA7UlB;AACF;AA+UgB;EAdJ;IAeQ;EA5UlB;AACF;AAgVoB;EADJ;IAEQ;EA7UtB;AACF;AAiVoB;EADJ;IAEQ;EA9UtB;AACF;AAkVoB;EADJ;IAEQ;EA/UtB;AACF;AAoVQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;AAnVZ;AA+WgB;EACI;EACA;AA7WpB;AAoYY;EACI;EACA;EACA;EACA;EACA;EAII;EAGJ;AAvYhB;AAyYgB;EACI;EACA;EACA;EACA;EAGI;KAAA;EACA;AAzYxB;AA8YY;EACI;EACA;EACA;EACA;EACA;AA5YhB;AA+YY;EACI;EACA;EACA;EACA;AA7YhB;AA+YgB;EACI;EACA;AA7YpB;AA+YoB;EACI;AA7YxB;AAkZY;EACI;EACA;EACA;EACA;AAhZhB;AAkZgB;EACI;EACA;EACA;AAhZpB;AAmZgB;EACI;EACA;AAjZpB;AAqZY;EACI;AAnZhB;AAqZgB;EACI;EACA;EACA;EACA;EACA;EACA;AAnZpB;AAqZoB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAnZxB;AAsZoB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AApZxB;AAsZwB;EACI;EACA;EACA;EACA;EACA;EACA;AApZ5B;AA0ZY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAxZhB;AA4ZY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA1ZhB;AA4ZgB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA1ZpB;AA6ZoB;EACI;EACA;EACA;EACA;EACA;AA3ZxB;AA6ZwB;EACI;EACA;AA3Z5B;AAgaoB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA9ZxB;AAiawB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA/Z5B;AAmawB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAja5B;AAqaoB;EACI;EACA;EACA;EACA;AAnaxB;AAqawB;EACI;AAna5B;AAqa4B;EACI;AAnahC;AAuawB;EACI;EACA;EACA;AAra5B;AAua4B;EACI;AArahC;AA2aoB;EACI;EACA;EACA;AAzaxB;AA2awB;EACI;EACA;AAza5B;AA2a4B;EACI;AAzahC;AA6awB;EACI;AA3a5B;AA6a4B;EACI;AA3ahC;AAibwB;EACI;EACA;AA/a5B;AAib4B;EACI;AA/ahC;AAmbwB;EACI;AAjb5B;AAsbwB;EACI;EACA;AApb5B;AAsb4B;EACI;AApbhC;AAwbwB;EACI;AAtb5B;AA2bwB;EACI;EACA;AAzb5B;AA2b4B;EACI;AAzbhC;AA6bwB;EACI;AA3b5B;AAicgB;EACI;AA/bpB;AAkcgB;EACI;AAhcpB;AAmcgB;EACI;AAjcpB;AAocgB;EACI;AAlcpB;AAycgB;EACI;EACA;EACA;AAvcpB;AA4cY;EACI;IACI;IACA;EA1clB;EA6cc;IACI;IACA;EA3clB;EA8cc;IACI;IACA;EA5clB;AACF;AAodI;EACI;EACA;EACA;EACA;EACA;EACA;AAldR;AAqdI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAndR;AAsdI;EACI;AApdR;AAudI;EACI;AArdR;AAwdI;EACI;EACA;EACA;KAAA;AAtdR;AA2dI;EACI;IACI;IACA;EAzdV;EA2dU;IACI;EAzdd;AACF;AAmhBI;EACI;IACI;EAjhBV;EAohBM;IACI;EAlhBV;EAqhBM;IACI;EAnhBV;AACF;AAuhBI;EAKQ;;;IACI;EAvhBd;EA0hBU;;;IACI;EAthBd;AACF;;AA4hBA;AAEA;AAEA;EACI;EACA;EACA;AA3hBJ;AA8hBI;EACI;EACA;EACA;EACA;AA5hBR;AA8hBQ;EACI;EACA;EACA;AA5hBZ;AA+hBQ;EACI;EACA;EACA;EACA;EACA;AA7hBZ;AAgiBY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA9hBhB;AAgiBgB;EACI;EACA;EACA;EACA;AA9hBpB;AAiiBgB;EACI;AA/hBpB;AAkiBgB;EACI;AAhiBpB;AAkiBoB;EACI;EACA;EACA;AAhiBxB;AAoiBgB;EACI;AAliBpB;AAoiBoB;EACI;EACA;EACA;AAliBxB;AAwiBY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAtiBhB;AAwiBgB;EACI;AAtiBpB;AAwiBoB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAtiBxB;AAwiBwB;EACI;EACA;AAtiB5B;AA0iBoB;EACI;EACA;AAxiBxB;AA8iBY;EACI;EACA;AA5iBhB;AA8iBgB;EACI;EACA;EACA;AA5iBpB;AA8iBoB;EACI;EACA;EACA;AA5iBxB;AAkjBY;EACI;EACA;AAhjBhB;AAojBQ;EACI;EACA;EACA;EACA;EACA;AAljBZ;AAqjBQ;EACI;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;AApjBZ;AAujBY;EACI;AArjBhB;AAwjBY;EAEI;AAvjBhB;AA0jBY;EACI;AAxjBhB;AA2jBY;EACI;AAzjBhB;AA6jBY;EACI;EACA;EACA;EACA;EACA;EACA;AA3jBhB;AA8jBgB;EACI;EACA;EACA;EACA;KAAA;EACA;AA5jBpB;AAgkBgB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA9jBpB;AAkkBgB;EAcQ;AA7kBxB;AAmlBY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAjlBhB;AAmlBgB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAjlBpB;AAmlBoB;EACI;EACA;EACA;AAjlBxB;AAmlBwB;EACI;AAjlB5B;AAslBgB;EACI;EACA;EACA;EACA;AAplBpB;AAslBoB;EACI;EACA;EACA;EACA;AAplBxB;AAulBoB;EACI;EACA;AArlBxB;AAylBgB;EACI;AAvlBpB;AAylBoB;EACI;EACA;AAvlBxB;AA2lBgB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAzlBpB;AA8lBY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA5lBhB;AA8lBgB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA5lBpB;AA+lBoB;EACI;EACA;EACA;EACA;EACA;AA7lBxB;AA+lBwB;EACI;EACA;AA7lB5B;AAkmBoB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAhmBxB;AAmmBwB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAjmB5B;AAqmBwB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAnmB5B;AAumBoB;EACI;EACA;EACA;EACA;AArmBxB;AAumBwB;EACI;AArmB5B;AAumB4B;EACI;AArmBhC;AAymBwB;EACI;EACA;EACA;AAvmB5B;AAymB4B;EACI;AAvmBhC;AA6mBoB;EACI;EACA;EACA;AA3mBxB;AA6mBwB;EACI;EACA;AA3mB5B;AA6mB4B;EACI;AA3mBhC;AA+mBwB;EACI;AA7mB5B;AA+mB4B;EACI;AA7mBhC;AAmnBwB;EACI;EACA;AAjnB5B;AAmnB4B;EACI;AAjnBhC;AAqnBwB;EACI;AAnnB5B;AAwnBwB;EACI;EACA;AAtnB5B;AAwnB4B;EACI;AAtnBhC;AA0nBwB;EACI;AAxnB5B;AA6nBwB;EACI;EACA;AA3nB5B;AA6nB4B;EACI;AA3nBhC;AA+nBwB;EACI;AA7nB5B;AAmoBgB;EACI;AAjoBpB;AAooBgB;EACI;AAloBpB;AAqoBgB;EACI;AAnoBpB;AAsoBgB;EACI;AApoBpB;AA2oBgB;EACI;EACA;EACA;AAzoBpB;AA8oBY;EAmBQ;EACA;AA9pBpB;AAkqBoB;EACI;EACA;AAhqBxB;AAmqBoB;EACI;AAjqBxB;AAwqBQ;EACI;IACI;EAtqBd;AACF;AAyqBQ;EACI;IACI;EAvqBd;EA0qBU;IACI;IACA;IACA;EAxqBd;EA0qBc;IACI;EAxqBlB;EA2qBc;IACI;EAzqBlB;AACF;AA6qBQ;EACI;IACI;EA3qBd;EA8qBU;IACI;IACA;IACA;EA5qBd;EA8qBc;IACI;EA5qBlB;EA+qBc;IACI;EA7qBlB;EAgrBc;IACI;EA9qBlB;EAmrBc;IACI;EAjrBlB;EAorBc;IACI;EAlrBlB;EAorBkB;IACI;EAlrBtB;EAqrBkB;IACI;EAnrBtB;EAurBc;IACI;EArrBlB;EAurBkB;IACI;IACA;EArrBtB;EAurBsB;IACI;EArrB1B;EAwrBsB;IACI;EAtrB1B;AACF;AA4rBQ;EAjoBJ;IAkoBQ;EAzrBV;EA2rBU;IACI;EAzrBd;EA6rBc;IACI;IACA;IACA;EA3rBlB;EA6rBkB;IACI;EA3rBtB;EA8rBkB;IACI;EA5rBtB;EA+rBkB;IACI;EA7rBtB;EAisBc;IACI;EA/rBlB;EAisBkB;IACI;IACA;EA/rBtB;EAqsBc;IACI;EAnsBlB;EAssBc;IACI;EApsBlB;EAssBkB;IACI;EApsBtB;EAusBkB;IACI;EArsBtB;EAwsBkB;IACI;IACA;EAtsBtB;AACF;AA2sBQ;EACI;IACI;EAzsBd;EA4sBU;IACI;IACA;IACA;EA1sBd;EA4sBc;IACI;EA1sBlB;EA6sBc;IACI;EA3sBlB;EAgtBc;IACI;EA9sBlB;EAitBc;IACI;EA/sBlB;EAitBkB;IACI;IACA;EA/sBtB;EAktBkB;IACI;IACA;EAhtBtB;EAotBc;IACI;EAltBlB;EAotBkB;IACI;IACA;IACA;EAltBtB;AACF;AAytBI;EAEI;IAEI;EAztBV;EA4tBM;IACI;EA1tBV;AACF;;AA8tBA;AAEA;AAEA;EACI;EACA;EACA;AA7tBJ;AAguBI;EACI;EACA;AA9tBR;AAguBQ;EACI;EACA;EACA;AA9tBZ;AAiuBQ;EACI;EACA;EACA;EACA;EAoBI;EAKA;EAGJ;AAxvBZ;AA0vBY;EACI;EACA;EACA;EACA;EACA;EACA;AAxvBhB;AA2vBoB;EACI;EACA;EACA;EACA;EACA;EACA;AAzvBxB;AA2vBwB;EACI;EACA;AAzvB5B;AA+vBoB;EACI;EACA;EACA;EACA;EACA;AA7vBxB;AAkwBY;EACI;EACA;EACA;EACA;EACA;AAhwBhB;AAowBwB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAlwB5B;AAowB4B;EACI;AAlwBhC;AAqwB4B;EACI;AAnwBhC;AAwwBgC;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAtwBpC;AA0wB4B;EACI;AAxwBhC;AA2wB4B;EACI;AAzwBhC;AAgxBoB;EACI;AA9wBxB;AAixBwB;EAuBQ;AAryBhC;AAyyBwB;EACI;EACA;EACA;AAvyB5B;AAyyB4B;EACI;EACA;AAvyBhC;AAyyBgC;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAvyBpC;AAyyBoC;EACI;AAvyBxC;AA2yBgC;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAzyBpC;AA6yB4B;EACI;EACA;AA3yBhC;AA6yBgC;EACI;EACA;EACA;EACA;EACA;EAII;EACA;KAAA;EACA;AA9yBxC;AA00B4B;EACI;AAx0BhC;AA00BgC;EACI;EACA;EACA;AAx0BpC;AA40BoC;EACI;EACA;EACA;EACA;AA10BxC;AA80BgC;EACI;AA50BpC;AAi1BgC;EACI;EACA;AA/0BpC;AAm1B4B;EACI;AAj1BhC;AAm1BgC;EACI;EACA;EACA;EACA;AAj1BpC;AAm1BoC;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAj1BxC;AAq1BgC;EACI;EACA;EACA;EACA;AAn1BpC;AAq1BoC;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAn1BxC;AAw1B4B;EACI;AAt1BhC;AAw1BgC;EACI;EACA;EACA;EACA;AAt1BpC;AAg2BoC;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EA0BI;EACA;EAIJ;AA13BxC;AA63BwC;EACI;EACA;EACA;EACA;EAiBI;AA34BhD;AA+4B4C;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA74BhD;AAg5B4C;EACI;AA94BhD;AAm5BwC;EACI;EACA;EACA;AAj5B5C;AAq5BwC;EACI;EACA;AAn5B5C;AAs5BwC;EACI;EACA;EACA;AAp5B5C;AAu5BwC;EACI;EACA;EACA;EACA;AAr5B5C;AAy5BwC;EACI;EACA;EACA;AAv5B5C;AAy5B4C;EACI;EACA;AAv5BhD;AA25BwC;EACI;EACA;EACA;AAz5B5C;AA25B4C;EACI;EACA;AAz5BhD;AA65BwC;EACI;EACA;EACA;AA35B5C;AA65B4C;EACI;EACA;AA35BhD;AA+5BwC;EACI;EACA;EACA;AA75B5C;AA+5B4C;EACI;EACA;AA75BhD;AAo6BwC;EAeI;EACA;AAh7B5C;AAm+BwC;EACI;EACA;EACA;EACA;AAj+B5C;AAm+B4C;EACI;EACA;EACA;EACA;EACA;AAj+BhD;AA0+BwB;EACI;AAx+B5B;AA8+BY;;EAEI;EACA;AA5+BhB;AAg/BgB;EACI;EACA;EACA;EACA;EACA;AA9+BpB;AAg/BoB;EACI;EACA;EACA;AA9+BxB;AAi/BoB;EACI;EACA;AA/+BxB;AAs/BQ;EACI;EACA;EACA;EACA;AAp/BZ;AAs/BY;EANJ;IAOQ;EAn/Bd;AACF;AAq/BY;EAVJ;IAWQ;EAl/Bd;AACF;AAo/BY;EAdJ;IAeQ;EAj/Bd;AACF;AAq/BQ;EAIQ;IACI;EAt/BlB;EAy/Bc;IACI;IACA;EAv/BlB;EA0/Bc;IACI;IACA;EAx/BlB;EA8/BsB;IACI;EA5/B1B;EAkgC0B;IACI;EAhgC9B;EAkgC8B;IACI;EAhgClC;EAmgC8B;IACI;EAjgClC;AACF;AA0gCQ;EACI;IACI;IACA;EAxgCd;EA0gCc;;IAEI;IACA;EAxgClB;EA0gCkB;;;;IAEI;EAtgCtB;AACF;;AA6gCA;AAIA;AAGA;EACI;EACA;EACA;AA/gCJ;AAkhCI;EACI;EACA;AAhhCR;AAkhCQ;EACI;EACA;EACA;AAhhCZ;AAmhCQ;EACI;EACA;EAqBI;EAGJ;AAviCZ;AA0iCY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAxiChB;AA0iCgB;EACI;AAxiCpB;AA2iCgB;EACI;EACA;EACA;AAziCpB;AA2iCoB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAziCxB;AA2iCwB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAziC5B;AA4iCwB;EACI;AA1iC5B;AA6iCwB;EACI;EACA;AA3iC5B;AA6iC4B;EACI;AA3iChC;AA+iCwB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA7iC5B;AAgjCwB;EAEI;AA/iC5B;AAsjCY;EACI;EACA;AApjChB;AAsjCgB;EACI;EACA;AApjCpB;AAwjCgB;EACI;EACA;EACA;EACA;EACA;AAtjCpB;AAyjCoB;EACI;AAvjCxB;AA0jCoB;EACI;AAxjCxB;AA2jCoB;EACI;AAzjCxB;AA4jCoB;EACI;AA1jCxB;AA6jCoB;EACI;AA3jCxB;AA+jCoB;EACI;EACA;AA7jCxB;AA0lCwB;EACI;EACA;EACA;EACA;EACA;EACA;EAqBI;AA5mChC;AAgnC4B;EACI;EACA;EACA;AA9mChC;AAgnCgC;EACI;AA9mCpC;AAgnCoC;EACI;EACA;EACA;EACA;EACA;KAAA;AA9mCxC;AAwpCgC;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAtpCpC;AAwpCoC;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAtpCxC;AAypCwC;EACI;EACA;EACA;EACA;EACA;AAvpC5C;AAypC4C;EACI;EACA;AAvpChD;AA4pCwC;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA1pC5C;AA6pC4C;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA3pChD;AA+pC4C;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AA7pChD;AAiqCwC;EACI;EACA;EACA;EACA;AA/pC5C;AAiqC4C;EACI;AA/pChD;AAiqCgD;EACI;AA/pCpD;AAmqC4C;EACI;EACA;EACA;AAjqChD;AAmqCgD;EACI;AAjqCpD;AAuqCwC;EACI;EACA;EACA;AArqC5C;AAuqC4C;EACI;EACA;AArqChD;AAuqCgD;EACI;AArqCpD;AAyqC4C;EACI;AAvqChD;AAyqCgD;EACI;AAvqCpD;AA6qC4C;EACI;EACA;AA3qChD;AA6qCgD;EACI;AA3qCpD;AA+qC4C;EACI;AA7qChD;AAkrC4C;EACI;EACA;AAhrChD;AAkrCgD;EACI;AAhrCpD;AAorC4C;EACI;AAlrChD;AAurC4C;EACI;EACA;AArrChD;AAurCgD;EACI;AArrCpD;AAyrC4C;EACI;AAvrChD;AA6rCoC;EACI;AA3rCxC;AA8rCoC;EACI;AA5rCxC;AA+rCoC;EACI;AA7rCxC;AAgsCoC;EACI;AA9rCxC;AAqsCoC;EACI;AAnsCxC;AA0sC4B;EACI;EACA;EACA;EACA;EACA;AAxsChC;AA0sCgC;EACI;EACA;EACA;EACA;AAxsCpC;AA0sCoC;EACI;EACA;AAxsCxC;AA0sCwC;EACI;AAxsC5C;AA6sCgC;EACI;EACA;EACA;AA3sCpC;AA6sCoC;EACI;AA3sCxC;AA+sCwC;EACI;EACA;EACA;EACA;AA7sC5C;AAitCoC;EACI;EACA;AA/sCxC;AAmtCgC;EACI;AAjtCpC;AAmtCoC;EACI;EACA;EACA;EACA;AAjtCxC;AAmtCwC;EACI;EACA;EACA;EACA;EACA;EACA;AAjtC5C;AAotCwC;EACI;EACA;EACA;EACA;EACA;EACA;AAltC5C;AAotC4C;EACI;EACA;EACA;EACA;EACA;AAltChD;AAwtCgC;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAttCpC;AAguCQ;EAIY;IAGI;EAnuCtB;AACF;AAwuCQ;EAGY;IACI;IACA;EAxuCtB;EA4uCc;IACI;IACA;EA1uClB;EA6uCsB;IAEI;EA5uC1B;EA8uC0B;IACI;IACA;IACA;EA5uC9B;EA8uC8B;IACI;EA5uClC;EA+uC8B;IACI;EA7uClC;AACF;;AAwvCA;EACI;IACI;IACA;EArvCN;EAwvCE;IACI;IACA;EAtvCN;AACF;AA0vCA;EACI;IACI;EAxvCN;EA2vCE;IACI;EAzvCN;EA4vCE;IACI;EA1vCN;AACF;AA8vCA;AAIA;AACA;EACI;EACA;EACA;AA/vCJ;AAiwCI;EACI;EACA;AA/vCR;AAiwCQ;EACI;EACA;EACA;AA/vCZ;AAmwCQ;EACI;EAEA;EACA;EAEA;EACA;EACA;AAnwCZ;AAswCY;EAXJ;IAYQ;EAnwCd;AACF;AAqwCY;EAfJ;IAgBQ;EAlwCd;AACF;AAowCY;EAnBJ;IAoBQ;EAjwCd;AACF;AAowCY;EACI;EACA;EACA;EACA;EACA;AAlwChB;AAuwCQ;EACI;EACA;EACA;EACA;EACA;EACA;AArwCZ;AAuwCY;EACI;EACA;AArwChB;AAuwCgB;EACI;EACA;EACA;AArwCpB;AA2wCQ;EACI;EACA;EACA;AAzwCZ;AA2wCY;EALJ;IAMQ;EAxwCd;AACF;AA4wCQ;EACI;EACA;EACA;EACA;AA1wCZ;AA4wCY;EANJ;IAOQ;IACA;EAzwCd;AACF;AA2wCY;EACI;EACA;EACA;EACA;AAzwChB;AA4wCY;EACI;EACA;EACA;KAAA;EACA;EACA;AA1wChB;AA6wCY;EACI;AA3wChB;AA+wCY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA7wChB;AA+wCgB;EACI;EACA;AA7wCpB;AA+wCoB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;EACA;EACA;EACA;EACA;EACA;EACA;AA7wCxB;AA+wCwB;EACI;EACA;EACA;EACA;AA7wC5B;AA+wC4B;EACI;EACA;EACA;AA7wChC;AAkxCwB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAhxC5B;AAkxC4B;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAhxChC;AAoxCwB;EACI;EACA;EACA;AAlxC5B;AAoxC4B;EACI;EACA;EACA;AAlxChC;AAqxC4B;EACI;AAnxChC;AA4xCQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AA1xCZ;AA4xCY;EATJ;IAUQ;IACA;EAzxCd;AACF;AA4xCY;EACI;EACA;EACA;EACA;EACA;AA1xChB;AA4xCgB;EACI;EACA;EACA;AA1xCpB;AA4xCoB;EACI;AA1xCxB;AA8xCgB;EAjBJ;IAkBQ;EA3xClB;AACF;AA+xCY;EACI;EACA;EACA;AA7xChB;AA+xCgB;EACI;AA7xCpB;AA+xCoB;EACI;AA7xCxB;AAiyCgB;EACI;EACA;AA/xCpB;AAoyCY;EACI;EACA;EACA;EACA;EACA;EACA;AAlyChB;AAoyCgB;EACI;EACA;EACA;AAlyCpB;AAqyCgB;EACI;EACA;EACA;AAnyCpB;AAsyCgB;EApBJ;IAqBQ;EAnyClB;AACF;AAwyCgB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAtyCpB;AAwyCoB;EACI;EACA;EACA;AAtyCxB;AAwyCwB;EACI;EACA;EACA;AAtyC5B;AA0yCoB;EACI;EACA;AAxyCxB;AA2yCoB;EACI;EACA;EACA;AAzyCxB;AA2yCwB;EACI;AAzyC5B;AA6yCoB;EACI;AA3yCxB;AA8yCoB;EAlDJ;IAmDQ;IACA;EA3yCtB;AACF;AAizCQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA/yCZ;AAmzCQ;EACI;IACI;EAjzCd;EAozCU;IACI;IACA;EAlzCd;EAqzCU;IACI;EAnzCd;EAszCU;IACI;EApzCd;AACF;;AA4zCA;AACA;EACI;EACA;EACA;AAzzCJ;AA4zCI;EACI;EACA;EACA;AA1zCR;AA4zCQ;EACI;EACA;EACA;AA1zCZ;AA8zCQ;EACI;EACA;EACA;EAEA;EACA;EACA;AA7zCZ;AAg0CY;EAVJ;IAWQ;IACA;EA7zCd;AACF;AA+zCY;EAfJ;IAgBQ;EA5zCd;AACF;AA8zCY;EAnBJ;IAoBQ;IACA;EA3zCd;AACF;AA8zCY;EACI;EACA;EACA;EACA;EACA;AA5zChB;AAi0CQ;EACI;EACA;EACA;AA/zCZ;AAi0CY;EALJ;IAMQ;EA9zCd;AACF;AAg0CY;EATJ;IAUQ;EA7zCd;AACF;AA+zCY;EAbJ;IAcQ;EA5zCd;AACF;AA8zCY;EAjBJ;IAkBQ;EA3zCd;AACF;AA+zCQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AA7zCZ;AA+zCY;EACI;AA7zChB;AAk0CQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAh0CZ;AAk0CY;EACI;EACA;EACA;EACA;AAh0ChB;AAm0CY;EACI;EACA;EACA;KAAA;EACA;EACA;EACA;AAj0ChB;AAq0CY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAn0ChB;AAu0CY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAr0ChB;AAu0CgB;EACI;EACA;EACA;EACA;EACA;EACA;AAr0CpB;AAu0CoB;EARJ;IASQ;EAp0CtB;AACF;AAu0CgB;EACI;EACA;EACA;EACA;AAr0CpB;AAu0CoB;EANJ;IAOQ;EAp0CtB;AACF;AAy0CY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAv0ChB;AAy0CgB;EAjBJ;IAkBQ;IACA;IACA;EAt0ClB;AACF;AAy0CY;EAEI;IAKI;EA50ClB;EA+0Cc;IACI;EA70ClB;EAg1Cc;IACI;EA90ClB;AACF;AAm1CQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAj1CZ;AAm1CY;EAnBJ;IAoBQ;IACA;EAh1Cd;AACF;AAk1CY;EAxBJ;IAyBQ;IACA;EA/0Cd;AACF;AAi1CY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA/0ChB;AAi1CgB;EAXJ;IAYQ;EA90ClB;AACF;AAk1CY;EACI;EACA;EACA;EACA;AAh1ChB;AAk1CgB;EACI;EACA;AAh1CpB;AAm1CgB;EACI;EACA;EACA;AAj1CpB;AAq1CY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAn1ChB;AAq1CgB;EACI;EACA;EACA;AAn1CpB;AAs1CgB;EAhBJ;IAiBQ;EAn1ClB;AACF;AAu1CY;EACI;EACA;EACA;EACA;EACA;AAr1ChB;AAu1CgB;EACI;EACA;AAr1CpB;AAu1CoB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAr1CxB;AAu1CwB;EACI;EACA;EACA;EACA;EACA;AAr1C5B;AAw1CwB;EACI;AAt1C5B;AAw1C4B;EAHJ;IAIQ;EAr1C9B;AACF;AAu1C4B;EAPJ;IAQQ;EAp1C9B;AACF;AAu1CwB;EApCJ;IAqCQ;IACA;IACA;EAp1C1B;AACF;AAs1CwB;EA1CJ;IA2CQ;IACA;IACA;EAn1C1B;AACF;AAu1CgB;EA7DJ;IA8DQ;EAp1ClB;AACF;AAu1CY;EACI;AAr1ChB;AAu1CgB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAr1CpB;AAu1CoB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAr1CxB;AAw1CoB;EACI;AAt1CxB;AAy1CoB;EACI;EACA;EACA;AAv1CxB;AA01CoB;EA5CJ;IA6CQ;IACA;IACA;EAv1CtB;AACF;AAy1CoB;EAlDJ;IAmDQ;IACA;IACA;EAt1CtB;AACF;AAw1CoB;EAxDJ;IAyDQ;IACA;IACA;IACA;EAr1CtB;AACF;AAu1CoB;EA/DJ;IAgEQ;IACA;IACA;IACA;EAp1CtB;AACF;AA01CQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAx1CZ;AA01CY;EACI;IACI;EAx1ClB;EA21Cc;IACI;EAz1ClB;AACF;AA81CQ;EACI;IACI;EA51Cd;EA+1CU;IACI;EA71Cd;EAg2CU;IACI;EA91Cd;EAi2CU;IACI;IACA;EA/1Cd;AACF;AAo2CI;EACI;EACA;AAl2CR;AAq2CQ;EACI;EACA;EACA;EAEA;AAp2CZ;AAu2CY;EARJ;IASQ;IACA;EAp2Cd;AACF;AAs2CY;EAbJ;IAcQ;EAn2Cd;AACF;AAq2CY;EAjBJ;IAkBQ;IACA;EAl2Cd;AACF;AAq2CY;EACI;EACA;EACA;EACA;EACA;AAn2ChB;AAw2CQ;EACI;EACA;EACA;AAt2CZ;AAw2CY;EALJ;IAMQ;EAr2Cd;AACF;AAu2CY;EATJ;IAUQ;EAp2Cd;AACF;AAs2CY;EAbJ;IAcQ;EAn2Cd;AACF;AAq2CY;EAjBJ;IAkBQ;EAl2Cd;AACF;AAs2CQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAp2CZ;AAs2CY;EACI;AAp2ChB;AAy2CQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAv2CZ;AAy2CY;EACI;EACA;EACA;EACA;AAv2ChB;AA02CY;EACI;EACA;EACA;KAAA;EACA;EACA;EACA;AAx2ChB;AA42CY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA12ChB;AA82CY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA52ChB;AA82CgB;EACI;EACA;EACA;EACA;EACA;EACA;AA52CpB;AA82CoB;EARJ;IASQ;EA32CtB;AACF;AA82CgB;EACI;EACA;EACA;EACA;AA52CpB;AA82CoB;EANJ;IAOQ;EA32CtB;AACF;AAg3CY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA92ChB;AAg3CgB;EAjBJ;IAkBQ;IACA;IACA;EA72ClB;AACF;AAg3CY;EAEI;IAKI;EAn3ClB;EAs3Cc;IACI;EAp3ClB;EAu3Cc;IACI;EAr3ClB;AACF;AA03CQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAx3CZ;AA03CY;EAnBJ;IAoBQ;IACA;EAv3Cd;AACF;AAy3CY;EAxBJ;IAyBQ;IACA;EAt3Cd;AACF;AAw3CY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAt3ChB;AAw3CgB;EAXJ;IAYQ;EAr3ClB;AACF;AAw3CY;EACI;EACA;EACA;EACA;AAt3ChB;AAw3CgB;EACI;EACA;AAt3CpB;AAy3CgB;EACI;EACA;EACA;AAv3CpB;AA23CY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAz3ChB;AA23CgB;EACI;EACA;EACA;AAz3CpB;AA43CgB;EAhBJ;IAiBQ;EAz3ClB;AACF;AA63CY;EACI;EACA;EACA;EACA;EACA;AA33ChB;AA63CgB;EACI;EACA;AA33CpB;AA63CoB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA33CxB;AA63CwB;EACI;EACA;EACA;EACA;EACA;AA33C5B;AA83CwB;EACI;AA53C5B;AA83C4B;EAHJ;IAIQ;EA33C9B;AACF;AA63C4B;EAPJ;IAQQ;EA13C9B;AACF;AA63CwB;EApCJ;IAqCQ;IACA;IACA;EA13C1B;AACF;AA43CwB;EA1CJ;IA2CQ;IACA;IACA;EAz3C1B;AACF;AA63CgB;EA7DJ;IA8DQ;EA13ClB;AACF;AA63CY;EACI;AA33ChB;AA63CgB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA33CpB;AA63CoB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA33CxB;AA83CoB;EACI;AA53CxB;AA+3CoB;EACI;EACA;EACA;AA73CxB;AAg4CoB;EA5CJ;IA6CQ;IACA;IACA;EA73CtB;AACF;AA+3CoB;EAlDJ;IAmDQ;IACA;IACA;EA53CtB;AACF;AA83CoB;EAxDJ;IAyDQ;IACA;IACA;IACA;EA33CtB;AACF;AA63CoB;EA/DJ;IAgEQ;IACA;IACA;IACA;EA13CtB;AACF;AAg4CQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA93CZ;AAg4CY;EACI;IACI;IACA;EA93ClB;EAi4Cc;IACI;IACA;EA/3ClB;AACF;;AAq4CA;AACA;EACI;EACA;EACA;AAl4CJ;AAo4CI;EACI;EACA;AAl4CR;AAo4CQ;EACI;EACA;EACA;AAl4CZ;AAs4CQ;EACI;EAEA;EACA;EACA;EACA;AAr4CZ;AAw4CY;EATJ;IAUQ;EAr4Cd;AACF;AAu4CY;EAbJ;IAcQ;IACA;EAp4Cd;AACF;AAs4CY;EAlBJ;IAmBQ;IACA;EAn4Cd;AACF;AAu4CQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAr4CZ;AAw4CY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAt4ChB;AAy4CY;EACI;EACA;EACA;EACA;AAv4ChB;AA44CQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AA14CZ;AA64CY;EAVJ;IAWQ;IACA;IACA;IACA;EA14Cd;AACF;AA44CY;EAjBJ;IAkBQ;IACA;EAz4Cd;AACF;AA64CQ;EACI;EACA;EACA;EAGA;EACA;AA74CZ;AA+4CY;EATJ;IAUQ;IACA;EA54Cd;AACF;AA84CY;EAdJ;IAeQ;IACA;EA34Cd;AACF;AA64CY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;EACA;AA34ChB;AA64CgB;EACI;EACA;EACA;KAAA;EACA;EACA;AA34CpB;AA84CgB;EACI;AA54CpB;AAi5CY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA/4ChB;AAm5CgB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAj5CpB;AAm5CoB;EACI;EACA;EACA;EACA;AAj5CxB;AAq5CoB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAn5CxB;AAs5CwB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAp5C5B;AAw5CwB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAt5C5B;AA05CoB;EACI;EACA;EACA;EACA;AAx5CxB;AA05CwB;EACI;AAx5C5B;AA05C4B;EACI;AAx5ChC;AA45CwB;EACI;EACA;EACA;AA15C5B;AA45C4B;EACI;AA15ChC;AAq6CY;EACI;EACA;EACA;AAn6ChB;AAw6CQ;EACI;EACA;EACA;EACA;EACA;AAt6CZ;AAw6CY;EAPJ;IAQQ;EAr6Cd;AACF;AAu6CY;EACI;EACA;EACA;EACA;AAr6ChB;AAu6CgB;EACI;EACA;EACA;AAr6CpB;AAu6CoB;EACI;AAr6CxB;AAy6CgB;EAhBJ;IAiBQ;EAt6ClB;AACF;AAy6CY;EACI;EACA;EACA;AAv6ChB;AAy6CgB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAv6CpB;AAy6CoB;EAVJ;IAWQ;IACA;EAt6CtB;AACF;AAy6CgB;EACI;EACA;EACA;AAv6CpB;AAy6CoB;EACI;EACA;AAv6CxB;AA06CoB;EAVJ;IAWQ;EAv6CtB;AACF;AA66CQ;EACI;EACA;EACA;EACA;EACA;EACA;AA36CZ;AA66CY;EARJ;IASQ;IACA;IACA;IACA;IACA;EA16Cd;AACF;AA46CY;EAhBJ;IAiBQ;IACA;EAz6Cd;AACF;AA26CY;EACI;EACA;EACA;EACA;EACA;EACA;UAAA;EACA;EACA;EACA;EACA;EACA;AAz6ChB;AA46CY;EACI;EACA;EACA;AA16ChB;AA46CgB;EACI;AA16CpB;AA86CY;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;UAAA;EACA;EACA;EACA;AA56ChB;AA86CgB;EACI;EACA;EACA;AA56CpB;AA+6CgB;EACI;AA76CpB;AAg7CgB;EA7BJ;IA8BQ;IACA;IACA;EA76ClB;AACF;AAm7CQ;EACI;EACA;EACA;EACA;UAAA;EACA;EACA;EACA;EACA;EACA;AAj7CZ;;AAw7CA;AAIA;AAEA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAz7CJ;;AA47CA;EACI;EACA;AAz7CJ;;AA47CA;;EAEI;EACA;EACA;AAz7CJ;;AA47CA;EACI;AAz7CJ;;AA47CA;EACI;EACA;AAz7CJ;;AA47CA;EACI;EACA;AAz7CJ;;AA47CA;EACI;EACA;AAz7CJ;;AA47CA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAz7CJ;;AA47CA;EACI;EACA;EACA;EACA;EACA;EACA;AAz7CJ;;AA47CA;EACI;EACA;EACA;EACA;AAz7CJ;;AA47CA;EACI;EACA;EACA;EACA;EACA;AAz7CJ;;AA47CA;EACI;EACA;EACA;EACA;AAz7CJ;;AA47CA;EACI;EACA;EACA;KAAA;EACA;EACA;AAz7CJ;;AA47CA;EACI;EACA;EACA;EACA;EACA;EACA;AAz7CJ;;AA47CA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAz7CJ;;AA47CA;EACI;EACA;AAz7CJ;;AA47CA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAz7CJ;;AA47CA;EACI;EACA;EACA;EACA;EACA;EACA;AAz7CJ;;AA47CA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAz7CJ;;AA47CA;EACI;EACA;AAz7CJ;;AA47CA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAz7CJ;;AA47CA;EACI;EACA;EACA;EACA;EACA;AAz7CJ;;AA47CA;EACI;EACA;EACA;AAz7CJ;;AA47CA;EACI;EACA;EACA;EACA;AAz7CJ;;AA47CA;EACI;EACA;EACA;AAz7CJ;;AA47CA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAz7CJ;;AA47CA;EACI;IACI;EAz7CN;EA47CE;IACI;EA17CN;AACF;AA67CA;AACA;EACI;EACA;EACA;AA37CJ;;AA87CA;;EAEI;EACA;EACA;EACA;AA37CJ;;AA87CA;EACI;EACA;EACA;EACA;EACA;AA37CJ;;AA87CA;EACI;EACA;EACA;AA37CJ;;AA87CA;EACI;EACA;EACA;EACA;EACA;AA37CJ;;AA87CA;EACI;EACA;EACA;AA37CJ;;AA87CA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AA37CJ;;AA+7CA;AACA;EACI;IACI;IACA;EA57CN;EA+7CE;IACI;EA77CN;EAg8CE;IACI;IACA;IACA;EA97CN;EAi8CE;IACI;IACA;EA/7CN;AACF;AAk8CA;AACA;AACA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAh8CJ;;AAm8CA;EACI;EACA;EACA;AAh8CJ;;AAm8CA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAh8CJ;;AAm8CA;EACI;IACI;IACA;EAh8CN;EAm8CE;IACI;IACA;EAj8CN;AACF;AAo8CA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAl8CJ;;AAq8CA;EACI;AAl8CJ;;AAq8CA;EACI;EACA;EACA;AAl8CJ;;AAs8CA;EACI;EACA;EACA;EACA;AAn8CJ;;AAs8CA;AACA;EACI;IACI;EAn8CN;EAs8CE;;IAEI;EAp8CN;EAu8CE;IACI;EAr8CN;EAw8CE;IACI;IACA;EAt8CN;EAy8CE;IACI;EAv8CN;AACF;AA08CA;AAEA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAz8CJ;;AA48CA;EACI;EACA;AAz8CJ;;AA48CA;;EAEI;EACA;EACA;AAz8CJ;;AA48CA;;EAEI;AAz8CJ;;AA48CA;EACI;EACA;EACA;EACA;EACA;AAz8CJ;;AA48CA;EAEI;EACA;EACA;AA18CJ;;AA+8CA;AACA;EACI;EACA;EACA;AA58CJ;;AA+8CA;EACI;EACA;EACA;EACA;AA58CJ;;AA+8CA;EACI;AA58CJ;;AA+8CA;EACI;EACA;AA58CJ;;AA+8CA;EACI;EACA;AA58CJ;;AA+8CA;EACI;EACA;AA58CJ;;AA+8CA;EACI;EACA;AA58CJ;;AA+8CA;EACI;EACA;EACA;AA58CJ;;AA+8CA;EACI;EACA;EACA;EACA;EACA;EACA;AA58CJ;;AA+8CA;EACI;EACA;EACA;AA58CJ;;AA+8CA;AACA;EACI;EACA;EACA;AA58CJ;;AA+8CA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA58CJ;;AA+8CA;EACI;IACI;EA58CN;EA+8CE;IACI;EA78CN;AACF;AAg9CA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA98CJ;;AAi9CA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA98CJ;;AAi9CA;EACI;EACA;AA98CJ;;AAi9CA;EACI;EACA;AA98CJ;;AAi9CA;EACI;AA98CJ;;AAi9CA;AAGA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAh9CJ;;AAm9CA;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAh9CJ;;AAm9CA;;EAEI;AAh9CJ;;AAm9CA;;EAEI;EACA;EACA;AAh9CJ;;AAm9CA;EACI;EACA;EACA;EACA;AAh9CJ;;AAm9CA;EACI;EACA;EACA;EACA;EACA;AAh9CJ;;AAm9CA;EACI;AAh9CJ;;AAm9CA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAh9CJ;;AAm9CA;;EAEI;EACA;EACA;AAh9CJ;;AAq9CA;;EAEI;AAl9CJ;AAo9CI;;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAj9CR;;AAs9CA;;EAEI;EACA;EACA;EACA;EACA;EACA;AAn9CJ;AAq9CI;;EACI;AAl9CR;AAo9CQ;;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAj9CZ;AAm9CY;;EACI;EACA;EACA;EACA;AAh9ChB;AAm9CY;;EACI;EACA;EACA;AAh9ChB;AAk9CgB;;EACI;EACA;AA/8CpB;AAm9CY;;EACI;EACA;AAh9ChB;;AAu9CA;EAEI;;IAEI;EAr9CN;EAu9CM;;IACI;IACA;EAp9CV;EAw9CE;;IAEI;EAt9CN;EAw9CM;;IACI;IACA;EAr9CV;AACF;AA49CI;;EAEI;EACA;EACA;AA19CR;AA49CQ;;EACI;EACA;EACA;EACA;AAz9CZ;AA69CI;;EAEI;EACA;AA39CR;;AAo+CQ;;EACI;AAh+CZ;AAs+CQ;;EACI;EACA;EACA;AAn+CZ;AAq+CY;;EACI;EACA;EACA;AAl+ChB;AAq+CY;;EACI;EACA;EACA;AAl+ChB;AAo+CgB;;EACI;EACA;AAj+CpB;;AAy+CA;AACA;EACI;EACA;AAt+CJ;;AAy+CA;EACI;EACA;EACA;EACA;AAt+CJ;;AAy+CA;EACI;EACA;AAt+CJ;;AAy+CA;;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAt+CJ;;AAy+CA;;EAEI;EACA;EACA;AAt+CJ,C","sources":["webpack://product-display/./assets/src/css/wcps-styles.scss"],"sourcesContent":["// Breakpoints\r\n$breakpoint-xs: 480px;\r\n$breakpoint-sm: 576px;\r\n$breakpoint-md: 768px;\r\n$breakpoint-lg: 992px;\r\n$breakpoint-xl: 1200px;\r\n\r\n// Astra support for WCPS\r\nhtml :where([style*=border-width]) {\r\n    border-style: none;\r\n}\r\n\r\n/* -------------- BASIC Grid Layout- wcps-layout-basic-grid: Working now  -------------- */\r\n// Essential Elegance Grid \r\n.wcps-container {\r\n    background: var(--wcps-container-background, #ffffff3b);\r\n    padding: var(--wcps-container-padding, 25px);\r\n    margin: var(--wcps-container-margin, 0px);\r\n\r\n    &.wcps-layout-basic-grid {\r\n        margin: 30px 0;\r\n        position: relative;\r\n\r\n        .wcps-products-container {\r\n            background: var(--wcps-container-background, #ffffff3b);\r\n            padding: var(--wcps-container-padding, 25px);\r\n            margin: var(--wcps-container-margin, 0px);\r\n        }\r\n\r\n        // Grid Container\r\n        .wcps-grid-container {\r\n            display: grid;\r\n            grid-template-columns: repeat(var(--wcps-columns, 4), minmax(0, 1fr));\r\n            gap: var(--wcps-grid-gap, 20px);\r\n            width: var(--wcps-grid-width, 100%);\r\n\r\n            // Responsive grid adjustments\r\n            @media (max-width: 1024px) {\r\n                grid-template-columns: repeat(3, 1fr);\r\n            }\r\n\r\n            @media (max-width: 768px) {\r\n                grid-template-columns: repeat(2, 1fr);\r\n            }\r\n\r\n            @media (max-width: 480px) {\r\n                grid-template-columns: repeat(1, 1fr);\r\n                gap: 15px;\r\n            }\r\n        }\r\n\r\n        // Grid Item\r\n        .wcps-grid-item {\r\n            border: var(--wcps-border-width, 1px) var(--wcps-border-style, solid) var(--wcps-border-color, #eee);\r\n            border-radius: var(--wcps-border-radius, 8px);\r\n            overflow: hidden;\r\n            transition: all var(--wcps-hover-transition, 0.3s) ease;\r\n\r\n            // Conditional box shadow based on setting\r\n            @if var(--wcps-box-shadow)==\"none\" {\r\n                box-shadow: none;\r\n            }\r\n\r\n            @else if var(--wcps-box-shadow)==\"light\" {\r\n                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n            }\r\n\r\n            @else if var(--wcps-box-shadow)==\"medium\" {\r\n                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);\r\n            }\r\n\r\n            @else if var(--wcps-box-shadow)==\"heavy\" {\r\n                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n            }\r\n\r\n            @else {\r\n                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n            }\r\n\r\n            &:hover {\r\n\r\n                // Conditional hover effect\r\n                @if var(--wcps-hover-effect)==\"none\" {\r\n                    transform: none;\r\n                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n                }\r\n\r\n                @else if var(--wcps-hover-effect)==\"lift\" {\r\n                    transform: translateY(-3px);\r\n                    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);\r\n                }\r\n\r\n                @else if var(--wcps-hover-effect)==\"shadow\" {\r\n                    transform: none;\r\n                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\r\n                }\r\n\r\n                @else if var(--wcps-hover-effect)==\"zoom\" {\r\n                    transform: scale(1.02);\r\n                    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);\r\n                }\r\n\r\n                @else if var(--wcps-hover-effect)==\"glow\" {\r\n                    transform: none;\r\n                    box-shadow: 0 0 15px rgba(var(--wcps-product-title), 0.5);\r\n                }\r\n\r\n                @else {\r\n                    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);\r\n                    transform: translateY(-3px);\r\n                }\r\n            }\r\n        }\r\n\r\n        // Product wrapper\r\n        .wcps-product {\r\n            height: var(--wcps-product-width, 100%);\r\n            display: flex;\r\n            // flex-direction: var(--wcps-product-flex-direction, column); // Need to create column, column-reverse, row, row-reverse\r\n            flex-direction: column;\r\n            background: var(--wcps-product-background, #fff);\r\n        }\r\n\r\n        // Fix image display issues\r\n        .wcps-product-image {\r\n            position: relative;\r\n            overflow: hidden;\r\n            aspect-ratio: var(--wcps-image-aspect-ratio, 1/1);\r\n            z-index: 5;\r\n            width: var(--wcps-product-image-width, 100%);\r\n            height: var(--wcps-product-image-height, 100%);\r\n\r\n            .wcps-product-badge {\r\n                font-size: var(--wcps-product-badge-font-size, 14px);\r\n                font-weight: var(--wcps-product-badge-font-weight, 600);\r\n                text-transform: var(--wcps-product-badge-text-transform, capitalize); // Need to create- uppercase, capitalize, lowercase\r\n                text-align: center;\r\n                word-break: break-all;\r\n                letter-spacing: 0.4px;\r\n                line-height: 1.2;\r\n                list-style: none;\r\n                -ms-flex-align: center;\r\n                justify-content: center;\r\n                border-radius: var(--wcps-product-badge-border-radius, 20px);\r\n                padding: var(--wcps-product-badge-padding, 5px);\r\n                margin-bottom: 10px;\r\n                z-index: var(--wcps-product-badge-z-index, 2);\r\n                background: var(--wcps-product-badge-background, rgb(54, 182, 217));\r\n                color: var(--wcps-product-badge-font-color, #fff);\r\n                position: absolute;\r\n                right: 5px;\r\n                top: 5px;\r\n            }\r\n\r\n            a {\r\n                display: block;\r\n                width: 100%;\r\n                height: 100%;\r\n            }\r\n\r\n            img.wcps-image {\r\n                width: 100%;\r\n                height: 100%;\r\n                object-fit: cover; // Ensures image covers the area properly\r\n                display: block;\r\n                transition: transform 0.4s ease;\r\n                border-radius: var(--wcps-image-border-radius, 0);\r\n            }\r\n\r\n            &:hover {\r\n                img.wcps-image {\r\n\r\n                    // Conditional image hover effect\r\n                    @if var(--wcps-image-hover-effect)==\"none\" {\r\n                        transform: none;\r\n                    }\r\n\r\n                    @else if var(--wcps-image-hover-effect)==\"zoom\" {\r\n                        transform: scale(1.05);\r\n                    }\r\n\r\n                    @else if var(--wcps-image-hover-effect)==\"fade\" {\r\n                        opacity: 0.8;\r\n                    }\r\n\r\n                    @else if var(--wcps-image-hover-effect)==\"blur\" {\r\n                        filter: blur(2px);\r\n                    }\r\n\r\n                    @else {\r\n                        transform: scale(1.05); // Default\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        // Product actions (buttons)\r\n        .wcps-product-actions {\r\n            position: absolute;\r\n            right: 10px;\r\n            bottom: 10px;\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            gap: 8px;\r\n            padding: 0;\r\n            opacity: 0;\r\n            visibility: hidden;\r\n            transform: translateY(20px) scale(0.8);\r\n            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n            a {\r\n                position: relative;\r\n                display: inline-flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n                width: 35px;\r\n                height: 35px;\r\n                border-radius: 20%;\r\n                background: rgba(255, 255, 255, 0.95);\r\n                backdrop-filter: blur(10px);\r\n                border: 1px solid rgba(255, 255, 255, 0.2);\r\n                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\r\n                color: #333;\r\n                font-size: 16px;\r\n                text-decoration: none;\r\n                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n                overflow: visible;\r\n\r\n                // Icon styling\r\n                .wcps-btn-icon {\r\n                    display: flex;\r\n                    align-items: center;\r\n                    justify-content: center;\r\n                    z-index: 2;\r\n                    transition: transform 0.3s ease;\r\n\r\n                    i {\r\n                        font-size: 16px;\r\n                        transition: all 0.3s ease;\r\n                    }\r\n                }\r\n\r\n                // Modern CTA tooltip\r\n                .wcps-btn-cta {\r\n                    position: absolute;\r\n                    right: calc(100% + 12px);\r\n                    top: 50%;\r\n                    transform: translateY(-50%) translateX(10px);\r\n                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n                    color: #fff;\r\n                    padding: 8px 12px;\r\n                    border-radius: 8px;\r\n                    font-size: 12px;\r\n                    font-weight: 500;\r\n                    white-space: nowrap;\r\n                    opacity: 0;\r\n                    visibility: hidden;\r\n                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n                    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);\r\n                    z-index: 100;\r\n\r\n                    // Modern arrow with gradient\r\n                    &::before {\r\n                        content: '';\r\n                        position: absolute;\r\n                        left: 100%;\r\n                        top: 50%;\r\n                        transform: translateY(-50%);\r\n                        width: 0;\r\n                        height: 0;\r\n                        border: 6px solid transparent;\r\n                        border-left: 6px solid #667eea;\r\n                        filter: drop-shadow(2px 0 2px rgba(102, 126, 234, 0.3));\r\n                    }\r\n\r\n                    // Subtle animation\r\n                    &::after {\r\n                        content: '';\r\n                        position: absolute;\r\n                        inset: 0;\r\n                        border-radius: inherit;\r\n                        background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);\r\n                        opacity: 0;\r\n                        transition: opacity 0.3s ease;\r\n                    }\r\n                }\r\n\r\n                &:hover {\r\n                    transform: translateY(-2px) scale(1.05);\r\n                    background: #fff;\r\n                    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);\r\n                    border-color: rgba(102, 126, 234, 0.3);\r\n\r\n                    .wcps-btn-icon {\r\n                        transform: scale(1.1);\r\n\r\n                        i {\r\n                            color: #667eea;\r\n                        }\r\n                    }\r\n\r\n                    .wcps-btn-cta {\r\n                        opacity: 1;\r\n                        visibility: visible;\r\n                        transform: translateY(-50%) translateX(0);\r\n\r\n                        &::after {\r\n                            opacity: 1;\r\n                        }\r\n                    }\r\n                }\r\n\r\n                // Specific button styles\r\n                &.wcps-add-to-cart {\r\n                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n                    color: #fff;\r\n                    border-color: transparent;\r\n\r\n                    &:hover {\r\n                        background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);\r\n                        color: #fff;\r\n\r\n                        .wcps-btn-icon i {\r\n                            color: #fff;\r\n                        }\r\n                    }\r\n\r\n                    .wcps-btn-cta {\r\n                        background: linear-gradient(135deg, #4c51bf 0%, #553c9a 100%);\r\n\r\n                        &::before {\r\n                            border-left-color: #4c51bf;\r\n                        }\r\n                    }\r\n                }\r\n\r\n                &.wcps-wishlist {\r\n                    .wcps-btn-cta {\r\n                        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\r\n                        box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4);\r\n\r\n                        &::before {\r\n                            border-left-color: #f093fb;\r\n                        }\r\n                    }\r\n\r\n                    &:hover .wcps-btn-icon i {\r\n                        color: #f093fb;\r\n                    }\r\n                }\r\n\r\n                &.wcps-quickview {\r\n                    .wcps-btn-cta {\r\n                        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\r\n                        box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);\r\n\r\n                        &::before {\r\n                            border-left-color: #4facfe;\r\n                        }\r\n                    }\r\n\r\n                    &:hover .wcps-btn-icon i {\r\n                        color: #4facfe;\r\n                    }\r\n                }\r\n\r\n                &.wcps-compare {\r\n                    .wcps-btn-cta {\r\n                        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);\r\n                        box-shadow: 0 4px 15px rgba(67, 233, 123, 0.4);\r\n\r\n                        &::before {\r\n                            border-left-color: #43e97b;\r\n                        }\r\n                    }\r\n\r\n                    &:hover .wcps-btn-icon i {\r\n                        color: #43e97b;\r\n                    }\r\n                }\r\n            }\r\n\r\n            // Staggered animation for multiple buttons\r\n            a:nth-child(1) {\r\n                transition-delay: 0.1s;\r\n            }\r\n\r\n            a:nth-child(2) {\r\n                transition-delay: 0.15s;\r\n            }\r\n\r\n            a:nth-child(3) {\r\n                transition-delay: 0.2s;\r\n            }\r\n\r\n            a:nth-child(4) {\r\n                transition-delay: 0.25s;\r\n            }\r\n        }\r\n\r\n\r\n        .wcps-grid-item:hover {\r\n            .wcps-product-actions {\r\n                opacity: 1;\r\n                visibility: visible;\r\n                transform: translateY(0) scale(1);\r\n            }\r\n        }\r\n\r\n\r\n        // Enhanced pulse animation\r\n        @keyframes modernPulse {\r\n            0% {\r\n                transform: scale(1);\r\n                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\r\n            }\r\n\r\n            50% {\r\n                transform: scale(1.05);\r\n                box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);\r\n            }\r\n\r\n            100% {\r\n                transform: scale(1);\r\n                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\r\n            }\r\n        }\r\n\r\n        // Product content\r\n        .wcps-product-content {\r\n            background: var(--wcps-product-background, #ffffff);\r\n            padding: var(--wcps-product-content-padding, 15px);\r\n            margin: var(--wcps-product-content-margin, 0px);\r\n            flex-grow: 1;\r\n            display: flex;\r\n            flex-direction: var(--wcps-product-content-direction, column); // Need to create column, column-reverse or row,  row-reverse\r\n            z-index: 1;\r\n            text-align: var(--wcps-text-align, left);\r\n\r\n            .wcps-product-title {\r\n                margin: 0 0 10px;\r\n                font-size: var(--wcps-title-size, 16px);\r\n                font-weight: var(--wcps-title-weight, 600);\r\n\r\n                a {\r\n                    color: var(--wcps-product-title, #333);\r\n                    text-decoration: none;\r\n\r\n                    &:hover {\r\n                        color: var(--wcps-product-title-hover-color, #333);\r\n                    }\r\n                }\r\n            }\r\n\r\n            .wcps-product-price {\r\n                font-weight: var(--wcps-price-font-weight, 700);\r\n                font-size: var(--wcps-price-font-size, 18px);\r\n                color: var(--wcps-price-font-color, #333);\r\n                margin-bottom: 8px;\r\n\r\n                del {\r\n                    color: var(--wcps-price-delete-font-color, #888);\r\n                }\r\n            }\r\n\r\n            .wcps-product-rating {\r\n                margin-bottom: 10px;\r\n\r\n                .star-rating {\r\n                    font-size: var(--wcps-star-size, 10px);\r\n\r\n                    &::before {\r\n                        color: var(--wcps-star-color, #ffc107);\r\n                        font-size: var(--wcps-star-size, 10px);\r\n\r\n                    }\r\n                }\r\n            }\r\n\r\n            .wcps-product-description {\r\n                margin-top: auto;\r\n                overflow: hidden;\r\n                text-overflow: ellipsis;\r\n                display: -webkit-box;\r\n                -webkit-line-clamp: 2;\r\n                -webkit-box-orient: vertical;\r\n                margin-top: 5px;\r\n\r\n                p.wcps-product-description-content {\r\n                    font-size: var(--wcps-desc-size, 14px);\r\n                    color: var(--wcps-description-color, #666);\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    // Add a keyframe for pulse animation if button animation is used\r\n    @keyframes pulse {\r\n        0% {\r\n            transform: scale(1);\r\n        }\r\n\r\n        50% {\r\n            transform: scale(1.1);\r\n        }\r\n\r\n        100% {\r\n            transform: scale(1);\r\n        }\r\n    }\r\n}\r\n\r\n/* -------------- Basic END -------------- */\r\n\r\n\r\n/* --------------MODERN Card Grid layout wcps-layout-card-grid -------------- */\r\n// Elevate Card Gallery \r\n.wcps-container {\r\n    background: var(--wcps-container-background, #ffffff3b);\r\n    padding: var(--wcps-container-padding, 25px);\r\n    margin: var(--wcps-container-margin, 0px);\r\n\r\n    &.wcps-layout-card-grid {\r\n        margin: 30px 0;\r\n        position: relative;\r\n\r\n        .wcps-products-container {\r\n            background: var(--wcps-container-background, #ffffff3b);\r\n            padding: var(--wcps-container-padding, 25px);\r\n            margin: var(--wcps-container-margin, 0px);\r\n        }\r\n\r\n        // Card Container\r\n        .wcps-card-container {\r\n            display: grid;\r\n            grid-template-columns: repeat(var(--wcps-columns, 4), minmax(0, 1fr));\r\n            gap: var(--wcps-grid-gap, 25px);\r\n            width: var(--wcps-grid-width, 100%);\r\n            background: var(--wcps-container-background, #ffffff3b);\r\n            padding: var(--wcps-container-padding, 25px);\r\n            margin: var(--wcps-container-margin, 0px);\r\n\r\n            // Responsive grid adjustments\r\n            @media (max-width: 1200px) {\r\n                grid-template-columns: repeat(3, 1fr);\r\n                gap: 20px;\r\n            }\r\n\r\n            @media (max-width: 768px) {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 18px;\r\n            }\r\n\r\n            @media (max-width: 480px) {\r\n                grid-template-columns: repeat(1, 1fr);\r\n                gap: 20px;\r\n            }\r\n        }\r\n\r\n        // Modern Card Item with elevated design\r\n        .wcps-card-item {\r\n            background: var(--wcps-product-background, #fff);\r\n            border-radius: var(--wcps-border-radius, 16px);\r\n            overflow: hidden;\r\n            position: relative;\r\n            transition: all var(--wcps-hover-transition, 0.4s) cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n            cursor: pointer;\r\n            transform: translateY(-2px);\r\n            transition: all 0.2s ease-in-out;\r\n\r\n\r\n            // Modern card shadows\r\n            @if var(--wcps-box-shadow)==\"none\" {\r\n                box-shadow: none;\r\n            }\r\n\r\n            @else if var(--wcps-box-shadow)==\"light\" {\r\n                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\r\n            }\r\n\r\n            @else if var(--wcps-box-shadow)==\"medium\" {\r\n                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n            }\r\n\r\n            @else if var(--wcps-box-shadow)==\"heavy\" {\r\n                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\r\n            }\r\n\r\n            @else {\r\n                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n            }\r\n\r\n            // Modern hover effects\r\n            &:hover {\r\n                @if var(--wcps-hover-effect)==\"none\" {\r\n                    transform: none;\r\n                }\r\n\r\n                @else if var(--wcps-hover-effect)==\"lift\" {\r\n                    transform: translateY(-8px);\r\n                    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n                }\r\n\r\n                @else if var(--wcps-hover-effect)==\"shadow\" {\r\n                    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n                }\r\n\r\n                @else if var(--wcps-hover-effect)==\"zoom\" {\r\n                    transform: scale(1.03);\r\n                    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n                }\r\n\r\n                @else if var(--wcps-hover-effect)==\"glow\" {\r\n                    box-shadow: 0 0 30px rgba(var(--wcps-accent-color, 59, 130, 246), 0.3);\r\n                }\r\n\r\n                @else {\r\n                    transform: translateY(-8px);\r\n                    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n                }\r\n\r\n                .wcps-card-overlay {\r\n                    opacity: 1;\r\n                }\r\n\r\n                .wcps-product-actions.wcps-actions-hover {\r\n                    opacity: 1;\r\n                    transform: translateY(0);\r\n                }\r\n\r\n                .wcps-product-actions.wcps-actions-panel {\r\n                    transform: translateX(0);\r\n                }\r\n            }\r\n        }\r\n\r\n        // Product wrapper\r\n        .wcps-product {\r\n            height: var(--wcps-product-width, 100%);\r\n            display: flex;\r\n            // flex-direction: var(--wcps-product-flex-direction, column);\r\n            flex-direction: column;\r\n            position: relative;\r\n            background: var(--wcps-product-background, #fff);\r\n        }\r\n\r\n        // Enhanced Product Image with overlay\r\n        .wcps-product-image {\r\n            position: relative;\r\n            overflow: hidden;\r\n            aspect-ratio: var(--wcps-image-aspect-ratio, 4/3);\r\n\r\n            // Gradient overlay for better text readability\r\n            .wcps-card-overlay {\r\n                position: absolute;\r\n                top: 0;\r\n                left: 0;\r\n                right: 0;\r\n                bottom: 0;\r\n                background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);\r\n                opacity: 0;\r\n                transition: opacity 0.3s ease;\r\n                z-index: 2;\r\n            }\r\n\r\n            // Enhanced badge design\r\n            .wcps-product-badge {\r\n                position: var(--wcps-product-badge-position, absolute);\r\n                top: var(--wcps-product-badge-top, 12px);\r\n                right: var(--wcps-product-badge-right, 12px);\r\n                background: linear-gradient(135deg, var(--wcps-product-badge-background, #ef4444) 0%, var(--wcps-product-badge-background, #dc2626) 100%);\r\n                color: var(--wcps-product-badge-font-color, #fff);\r\n                font-size: var(--wcps-product-badge-font-size, 12px);\r\n                font-weight: var(--wcps-product-badge-font-weight, 700);\r\n                text-transform: var(--wcps-product-badge-text-transform, uppercase);\r\n                padding: var(--wcps-product-badge-padding, 5px);\r\n                border-radius: var(--wcps-product-badge-border-radius, 20px);\r\n                box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);\r\n                z-index: var(--wcps-product-badge-z-index, 3);\r\n                letter-spacing: 0.5px;\r\n                backdrop-filter: blur(10px);\r\n            }\r\n\r\n            a {\r\n                display: block;\r\n                width: 100%;\r\n                height: 100%;\r\n                position: relative;\r\n                z-index: 1;\r\n            }\r\n\r\n            img.wcps-image {\r\n                width: 100%;\r\n                height: 280px;\r\n                object-fit: cover;\r\n                display: block;\r\n                transition: transform var(--wcps-image-transition, 0.6s) cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n                border-radius: 0;\r\n            }\r\n\r\n            &:hover {\r\n                img.wcps-image {\r\n                    @if var(--wcps-image-hover-effect)==\"none\" {\r\n                        transform: none;\r\n                    }\r\n\r\n                    @else if var(--wcps-image-hover-effect)==\"zoom\" {\r\n                        transform: scale(1.1);\r\n                    }\r\n\r\n                    @else if var(--wcps-image-hover-effect)==\"fade\" {\r\n                        opacity: 0.9;\r\n                    }\r\n\r\n                    @else if var(--wcps-image-hover-effect)==\"blur\" {\r\n                        filter: blur(1px);\r\n                    }\r\n\r\n                    @else {\r\n                        transform: scale(1.1);\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        // Floating Action Buttons - Hover Style\r\n        // Card Grid Action Buttons - Completely New Design\r\n        .wcps-product-actions.wcps-actions-hover {\r\n            position: absolute;\r\n            bottom: 15px;\r\n            right: 15px;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 6px;\r\n            opacity: 0;\r\n            visibility: hidden;\r\n            transform: translateX(30px) scale(0.7);\r\n            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n            z-index: 10;\r\n\r\n            a.wcps-quickview,\r\n            a.wcps-wishlist,\r\n            a.wcps-add-to-cart,\r\n            a.wcps-compare {\r\n                position: relative;\r\n                width: 40px;\r\n                height: 40px;\r\n                border-radius: 25px;\r\n                background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);\r\n                border: 2px solid transparent;\r\n                box-shadow:\r\n                    0 8px 32px rgba(0, 0, 0, 0.12),\r\n                    inset 0 2px 4px rgba(255, 255, 255, 0.9),\r\n                    inset 0 -2px 4px rgba(0, 0, 0, 0.05);\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n                text-decoration: none;\r\n                color: #64748b;\r\n                font-size: 18px;\r\n                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n                overflow: visible;\r\n                backdrop-filter: blur(20px);\r\n\r\n                // Subtle ring effect\r\n                &::before {\r\n                    content: '';\r\n                    position: absolute;\r\n                    inset: -2px;\r\n                    border-radius: 50%;\r\n                    background: linear-gradient(145deg, transparent, rgba(99, 102, 241, 0.1));\r\n                    opacity: 0;\r\n                    transition: opacity 0.3s ease;\r\n                    z-index: -1;\r\n                }\r\n\r\n                // Icon container\r\n                .wcps-icon,\r\n                .wcps-btn-icon {\r\n                    display: flex;\r\n                    align-items: center;\r\n                    justify-content: center;\r\n                    z-index: 2;\r\n                    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n\r\n                    i {\r\n                        font-size: 18px;\r\n                        transition: all 0.3s ease;\r\n                    }\r\n                }\r\n\r\n                // Sleek CTA Design\r\n                .wcps-btn-cta {\r\n                    position: absolute;\r\n                    right: calc(100% + 15px);\r\n                    top: 50%;\r\n                    transform: translateY(-50%) translateX(15px);\r\n                    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);\r\n                    color: #f1f5f9;\r\n                    padding: 10px 16px;\r\n                    border-radius: 12px;\r\n                    font-size: 13px;\r\n                    font-weight: 600;\r\n                    white-space: nowrap;\r\n                    opacity: 0;\r\n                    visibility: hidden;\r\n                    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n                    box-shadow:\r\n                        0 10px 40px rgba(30, 41, 59, 0.3),\r\n                        0 2px 8px rgba(30, 41, 59, 0.2);\r\n                    z-index: 100;\r\n                    backdrop-filter: blur(10px);\r\n                    border: 1px solid rgba(255, 255, 255, 0.1);\r\n\r\n                    // Elegant arrow\r\n                    &::after {\r\n                        content: '';\r\n                        position: absolute;\r\n                        left: 100%;\r\n                        top: 50%;\r\n                        transform: translateY(-50%);\r\n                        width: 0;\r\n                        height: 0;\r\n                        border: 8px solid transparent;\r\n                        border-left: 8px solid #1e293b;\r\n                        filter: drop-shadow(2px 0 4px rgba(30, 41, 59, 0.2));\r\n                    }\r\n\r\n                    // Shine effect\r\n                    &::before {\r\n                        content: '';\r\n                        position: absolute;\r\n                        top: 0;\r\n                        left: -100%;\r\n                        width: 100%;\r\n                        height: 100%;\r\n                        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n                        transition: left 0.6s ease;\r\n                    }\r\n                }\r\n\r\n                // Hover States\r\n                &:hover {\r\n                    transform: translateY(-3px) scale(1.1);\r\n                    box-shadow:\r\n                        0 12px 40px rgba(0, 0, 0, 0.18),\r\n                        inset 0 2px 4px rgba(255, 255, 255, 0.9),\r\n                        inset 0 -2px 4px rgba(0, 0, 0, 0.05);\r\n\r\n                    &::before {\r\n                        opacity: 1;\r\n                    }\r\n\r\n                    .wcps-btn-cta {\r\n                        opacity: 1;\r\n                        visibility: visible;\r\n                        transform: translateY(-50%) translateX(0);\r\n\r\n                        &::before {\r\n                            left: 100%;\r\n                        }\r\n                    }\r\n                }\r\n\r\n                // Specific button styles with unique colors\r\n                &.wcps-add-to-cart {\r\n                    background: linear-gradient(145deg, #10b981 0%, #059669 100%);\r\n                    color: #ffffff;\r\n                    border-color: rgba(16, 185, 129, 0.3);\r\n\r\n                    &::before {\r\n                        background: linear-gradient(145deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.3));\r\n                    }\r\n\r\n                    &:hover {\r\n                        background: linear-gradient(145deg, #059669 0%, #047857 100%);\r\n                        box-shadow:\r\n                            0 12px 40px rgba(16, 185, 129, 0.4),\r\n                            inset 0 2px 4px rgba(255, 255, 255, 0.2),\r\n                            inset 0 -2px 4px rgba(0, 0, 0, 0.1);\r\n                    }\r\n\r\n                    .wcps-btn-cta {\r\n                        background: linear-gradient(135deg, #047857 0%, #065f46 100%);\r\n                        color: #ecfdf5;\r\n\r\n                        &::after {\r\n                            border-left-color: #047857;\r\n                        }\r\n                    }\r\n                }\r\n\r\n                &.wcps-wishlist {\r\n                    color: #ec4899;\r\n\r\n                    &::before {\r\n                        background: linear-gradient(145deg, rgba(236, 72, 153, 0.1), rgba(219, 39, 119, 0.2));\r\n                    }\r\n\r\n                    &:hover {\r\n                        color: #be185d;\r\n                        border-color: rgba(236, 72, 153, 0.3);\r\n                    }\r\n\r\n                    .wcps-btn-cta {\r\n                        background: linear-gradient(135deg, #be185d 0%, #9d174d 100%);\r\n                        color: #fdf2f8;\r\n\r\n                        &::after {\r\n                            border-left-color: #be185d;\r\n                        }\r\n                    }\r\n                }\r\n\r\n                &.wcps-quickview {\r\n                    color: #3b82f6;\r\n\r\n                    &::before {\r\n                        background: linear-gradient(145deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.2));\r\n                    }\r\n\r\n                    &:hover {\r\n                        color: #1d4ed8;\r\n                        border-color: rgba(59, 130, 246, 0.3);\r\n                    }\r\n\r\n                    .wcps-btn-cta {\r\n                        background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);\r\n                        color: #eff6ff;\r\n\r\n                        &::after {\r\n                            border-left-color: #1d4ed8;\r\n                        }\r\n                    }\r\n                }\r\n\r\n                &.wcps-compare {\r\n                    color: #f59e0b;\r\n\r\n                    &::before {\r\n                        background: linear-gradient(145deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.2));\r\n                    }\r\n\r\n                    &:hover {\r\n                        color: #d97706;\r\n                        border-color: rgba(245, 158, 11, 0.3);\r\n                    }\r\n\r\n                    .wcps-btn-cta {\r\n                        background: linear-gradient(135deg, #d97706 0%, #b45309 100%);\r\n                        color: #fffbeb;\r\n\r\n                        &::after {\r\n                            border-left-color: #d97706;\r\n                        }\r\n                    }\r\n                }\r\n\r\n                // Hide text by default\r\n                .wcps-btn-text {\r\n                    display: none;\r\n                }\r\n\r\n                // Staggered entrance animation\r\n                &:nth-child(1) {\r\n                    transition-delay: 0.1s;\r\n                }\r\n\r\n                &:nth-child(2) {\r\n                    transition-delay: 0.15s;\r\n                }\r\n\r\n                &:nth-child(3) {\r\n                    transition-delay: 0.2s;\r\n                }\r\n\r\n                &:nth-child(4) {\r\n                    transition-delay: 0.25s;\r\n                }\r\n            }\r\n        }\r\n\r\n        // Show actions on card hover\r\n        .wcps-card-item:hover .wcps-product-actions.wcps-actions-hover {\r\n            opacity: 1;\r\n            visibility: visible;\r\n            transform: translateX(0) scale(1);\r\n        }\r\n\r\n\r\n        // Enhanced ripple effect animation\r\n        @keyframes ripple {\r\n            0% {\r\n                transform: scale(0);\r\n                opacity: 1;\r\n            }\r\n\r\n            100% {\r\n                transform: scale(4);\r\n                opacity: 0;\r\n            }\r\n        }\r\n\r\n        .wcps-product-actions a.wcps-add-to-cart:active::after {\r\n            content: '';\r\n            position: absolute;\r\n            inset: 0;\r\n            border-radius: 50%;\r\n            background: rgba(255, 255, 255, 0.5);\r\n            animation: ripple 0.6s linear;\r\n            pointer-events: none;\r\n        }\r\n\r\n        // END -------------------------\r\n\r\n        // Enhanced Product Content\r\n        .wcps-product-content {\r\n            padding: var(--wcps-product-content-padding, 15px);\r\n            margin: var(--wcps-product-content-margin, 0px);\r\n            flex-grow: 1;\r\n            display: flex;\r\n            flex-direction: var(--wcps-product-content-direction, column);\r\n            background: var(--wcps-product-background, #ffffff);\r\n            position: relative;\r\n            z-index: 1;\r\n            text-align: var(--wcps-text-align, left);\r\n\r\n\r\n            .wcps-product-title {\r\n                margin: 0 0 12px;\r\n                font-size: var(--wcps-title-size, 16px);\r\n                font-weight: var(--wcps-title-weight, 600);\r\n                line-height: 1.4;\r\n                color: var(--wcps-product-title, #111827);\r\n\r\n                a {\r\n                    color: inherit;\r\n                    text-decoration: none;\r\n                    transition: color 0.2s ease;\r\n\r\n                    &:hover {\r\n                        color: var(--wcps-product-title-hover-color, var(--wcps-accent-color, #3b82f6));\r\n                    }\r\n                }\r\n            }\r\n\r\n            .wcps-product-rating {\r\n                margin-bottom: 12px;\r\n                display: flex;\r\n                align-items: center;\r\n                gap: 6px;\r\n\r\n                .star-rating {\r\n                    font-size: var(--wcps-star-size, 14px);\r\n\r\n                    &::before {\r\n                        color: var(--wcps-star-color, #fbbf24);\r\n                        font-size: var(--wcps-star-size, 14px);\r\n                    }\r\n                }\r\n            }\r\n\r\n            .wcps-product-price {\r\n                font-weight: var(--wcps-price-font-weight, 700);\r\n                font-size: var(--wcps-price-font-size, 18px);\r\n                color: var(--wcps-price-font-color, #111827);\r\n                margin-bottom: 12px;\r\n\r\n                del {\r\n                    color: var(--wcps-price-delete-font-color, #9ca3af);\r\n                    font-weight: 400;\r\n                    margin-right: 8px;\r\n                }\r\n            }\r\n\r\n            .wcps-product-description {\r\n                font-size: var(--wcps-desc-size, 14px);\r\n                color: var(--wcps-description-color, #6b7280);\r\n                line-height: 1.5;\r\n                margin-top: auto;\r\n                overflow: hidden;\r\n                text-overflow: ellipsis;\r\n                display: -webkit-box;\r\n                -webkit-line-clamp: 2;\r\n                -webkit-box-orient: vertical;\r\n\r\n                p.wcps-product-description-content {\r\n                    font-size: var(--wcps-desc-size, 14px);\r\n                    color: var(--wcps-description-color, #23282d);\r\n                }\r\n            }\r\n        }\r\n\r\n\r\n    }\r\n\r\n    // Modern pulse animation\r\n    @keyframes modernPulse {\r\n        0% {\r\n            transform: scale(1);\r\n            box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);\r\n        }\r\n\r\n        70% {\r\n            transform: scale(1.05);\r\n            box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);\r\n        }\r\n\r\n        100% {\r\n            transform: scale(1);\r\n            box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);\r\n        }\r\n    }\r\n}\r\n\r\n/* -------------- END -------------- */\r\n\r\n// Magazine Mosaic  \r\n.wcps-container {\r\n    background: var(--wcps-container-background, #ffffff3b);\r\n    padding: var(--wcps-container-padding, 25px);\r\n\r\n    /* -------------- Masonry Grid Style 3 - Minimalist Magazine Style -------------- */\r\n    // Magazine Mosaic  \r\n    &.wcps-layout-masonry-grid-3 {\r\n        margin: 30px 0;\r\n        position: relative;\r\n\r\n        .wcps-products-container {\r\n            background: var(--wcps-container-background, #ffffff3b);\r\n            padding: var(--wcps-container-padding, 25px);\r\n            margin: var(--wcps-container-margin, 0px);\r\n        }\r\n\r\n        // Masonry Container with magazine layout\r\n        .wcps-masonry-container {\r\n            column-count: 4;\r\n            gap: var(--wcps-grid-gap, 20px);\r\n            width: var(--wcps-grid-width, 100%);\r\n            background: var(--wcps-container-background, #ffffff3b);\r\n            padding: var(--wcps-container-padding, 25px);\r\n            margin: var(--wcps-container-margin, 0px);\r\n\r\n            // Responsive column adjustments\r\n            @media (max-width: 1024px) {\r\n                column-count: 3;\r\n            }\r\n\r\n            @media (max-width: 768px) {\r\n                column-count: 2;\r\n                column-gap: 15px;\r\n            }\r\n\r\n            @media (max-width: 480px) {\r\n                column-count: 1;\r\n                column-gap: 0;\r\n            }\r\n        }\r\n\r\n        // Magazine-style Masonry Item\r\n        .wcps-masonry-item {\r\n            break-inside: avoid;\r\n            margin-bottom: 20px;\r\n            border: none;\r\n            border-radius: 0;\r\n            overflow: hidden;\r\n            position: relative;\r\n            background: #fff;\r\n            transition: all 0.3s ease;\r\n            transition: all var(--wcps-hover-transition, 0.3s) ease;\r\n            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n\r\n            &:hover {\r\n                transform: none;\r\n                box-shadow: 0 0 0 1px #e0e0e0;\r\n\r\n                .wcps-product-image img.wcps-image {\r\n                    transform: scale(1.02);\r\n                }\r\n\r\n                .wcps-product-actions {\r\n                    opacity: 1;\r\n                    transform: translateY(0);\r\n                }\r\n            }\r\n        }\r\n\r\n        // Product wrapper\r\n        .wcps-product {\r\n            display: flex;\r\n            flex-direction: column;\r\n            background: #fff;\r\n            position: relative;\r\n        }\r\n\r\n        // Magazine-style image\r\n        .wcps-product-image {\r\n            position: relative;\r\n            overflow: hidden;\r\n            aspect-ratio: var(--wcps-image-aspect-ratio, 1/1);\r\n            z-index: 5;\r\n            width: var(--wcps-product-image-width, 100%);\r\n            height: var(--wcps-product-image-height, 100%);\r\n            border-radius: 0;\r\n\r\n            .wcps-product-badge {\r\n                position: absolute;\r\n                top: 0;\r\n                left: 0;\r\n                background: #000;\r\n                color: #fff;\r\n                font-size: 10px;\r\n                font-weight: 400;\r\n                text-transform: uppercase;\r\n                padding: 8px 12px;\r\n                border-radius: 0;\r\n                box-shadow: none;\r\n                z-index: 3;\r\n                letter-spacing: 1px;\r\n                backdrop-filter: none;\r\n            }\r\n\r\n            a {\r\n                display: block;\r\n                width: 100%;\r\n                height: 100%;\r\n            }\r\n\r\n            img.wcps-image {\r\n                width: 100%;\r\n                height: 100%;\r\n                object-fit: cover;\r\n                display: block;\r\n                transition: transform 0.4s ease;\r\n            }\r\n\r\n            &:hover {\r\n                img.wcps-image {\r\n                    transform: scale(1.02);\r\n                }\r\n            }\r\n\r\n            // Magazine-style aspect ratios\r\n            &.wcps-ratio-1 {\r\n                aspect-ratio: 1 / 1;\r\n            }\r\n\r\n            &.wcps-ratio-2 {\r\n                aspect-ratio: 1 / 1.5;\r\n            }\r\n\r\n            &.wcps-ratio-3 {\r\n                aspect-ratio: 1 / 0.7;\r\n            }\r\n        }\r\n\r\n        // Magazine-style minimal action buttons\r\n        .wcps-product-actions {\r\n            position: absolute;\r\n            bottom: 0;\r\n            left: 0;\r\n            right: 0;\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 4px;\r\n            padding: 12px;\r\n            opacity: 0;\r\n            // visibility: hidden;\r\n            transform: translateY(10px);\r\n            transition: all 0.3s ease;\r\n            z-index: 10;\r\n            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);\r\n\r\n            a {\r\n                position: relative;\r\n                width: 36px;\r\n                height: 36px;\r\n                border-radius: 0;\r\n                background: rgba(255, 255, 255, 0.9);\r\n                border: none;\r\n                box-shadow: none;\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n                text-decoration: none;\r\n                color: #000;\r\n                font-size: 12px;\r\n                transition: all 0.2s ease;\r\n                overflow: hidden;\r\n\r\n                .wcps-btn-icon {\r\n                    display: flex;\r\n                    align-items: center;\r\n                    justify-content: center;\r\n                    z-index: 2;\r\n\r\n                    i {\r\n                        font-size: 12px;\r\n                        transition: all 0.2s ease;\r\n                    }\r\n                }\r\n\r\n                // Minimal tooltip\r\n                .wcps-btn-cta {\r\n                    position: absolute;\r\n                    bottom: calc(100% + 8px);\r\n                    left: 50%;\r\n                    transform: translateX(-50%) translateY(4px);\r\n                    background: #000;\r\n                    color: #fff;\r\n                    padding: 6px 10px;\r\n                    border-radius: 0;\r\n                    font-size: 10px;\r\n                    font-weight: 400;\r\n                    white-space: nowrap;\r\n                    opacity: 0;\r\n                    visibility: hidden;\r\n                    transition: all 0.2s ease;\r\n                    box-shadow: none;\r\n                    z-index: 100;\r\n                    text-transform: uppercase;\r\n                    letter-spacing: 0.5px;\r\n\r\n                    &::after {\r\n                        content: '';\r\n                        position: absolute;\r\n                        top: 100%;\r\n                        left: 50%;\r\n                        transform: translateX(-50%);\r\n                        width: 0;\r\n                        height: 0;\r\n                        border: 4px solid transparent;\r\n                        border-top: 4px solid #000;\r\n                    }\r\n                }\r\n\r\n                &:hover {\r\n                    background: #000;\r\n                    color: #fff;\r\n\r\n                    .wcps-btn-icon i {\r\n                        color: #fff;\r\n                    }\r\n\r\n                    .wcps-btn-cta {\r\n                        opacity: 1;\r\n                        visibility: visible;\r\n                        transform: translateX(-50%) translateY(0);\r\n                    }\r\n                }\r\n\r\n                // Specific button styles\r\n                &.wcps-add-to-cart {\r\n                    background: #000;\r\n                    color: #fff;\r\n\r\n                    &:hover {\r\n                        background: #333;\r\n                        color: #fff;\r\n                    }\r\n                }\r\n\r\n                &.wcps-wishlist {\r\n                    &:hover {\r\n                        background: #000;\r\n                        color: #fff;\r\n                    }\r\n                }\r\n\r\n                &.wcps-quickview {\r\n                    &:hover {\r\n                        background: #000;\r\n                        color: #fff;\r\n                    }\r\n                }\r\n\r\n                &.wcps-compare {\r\n                    &:hover {\r\n                        background: #000;\r\n                        color: #fff;\r\n                    }\r\n                }\r\n            }\r\n\r\n            // No staggered animation for minimal style\r\n        }\r\n\r\n        // Magazine-style product content\r\n        /* ================ IMPROVED MAGAZINE-STYLE PRODUCT CONTENT ================ */\r\n        .wcps-product-content {\r\n            padding: 18px 0 0;\r\n            background: transparent;\r\n            position: relative;\r\n            z-index: 2;\r\n            padding: 15px;\r\n\r\n            /* ---- TYPOGRAPHY ENHANCEMENTS ---- */\r\n            .wcps-product-title {\r\n                margin: 0 0 10px;\r\n                font-size: 16px;\r\n                font-weight: 500;\r\n                line-height: 1.35;\r\n                color: #1a1a1a;\r\n                letter-spacing: 0.2px;\r\n                font-family: 'Georgia', serif;\r\n                /* Magazine-style serif font */\r\n\r\n                a {\r\n                    color: inherit;\r\n                    text-decoration: none;\r\n                    transition: color 0.25s ease;\r\n                    position: relative;\r\n                    display: inline-block;\r\n\r\n                    &:after {\r\n                        content: '';\r\n                        position: absolute;\r\n                        bottom: -2px;\r\n                        left: 0;\r\n                        width: 0;\r\n                        height: 1px;\r\n                        background: #1a1a1a;\r\n                        transition: width 0.3s ease;\r\n                    }\r\n\r\n                    &:hover {\r\n                        color: #444;\r\n\r\n                        &:after {\r\n                            width: 100%;\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n\r\n            /* ---- REFINED PRICE STYLING ---- */\r\n            .wcps-product-price {\r\n                font-weight: 400;\r\n                font-size: 15px;\r\n                color: #222;\r\n                margin-bottom: 8px;\r\n                display: flex;\r\n                flex-wrap: wrap;\r\n                align-items: center;\r\n                gap: 8px;\r\n                font-family: 'Helvetica Neue', sans-serif;\r\n\r\n                ins {\r\n                    text-decoration: none;\r\n                    color: #1a1a1a;\r\n                    font-weight: 500;\r\n                    font-size: 16px;\r\n                }\r\n\r\n                del {\r\n                    font-size: 13px;\r\n                    color: #999;\r\n                    font-weight: 300;\r\n                    order: -1;\r\n                    width: 100%;\r\n                }\r\n            }\r\n\r\n            /* ---- MINIMAL RATING STYLE ---- */\r\n            .wcps-product-rating {\r\n                margin-bottom: 12px;\r\n\r\n                .star-rating {\r\n                    font-size: 11px;\r\n                    width: 5.4em;\r\n\r\n                    &:before {\r\n                        color: #d3d3d3;\r\n                    }\r\n\r\n                    span:before {\r\n                        color: #1a1a1a;\r\n                        letter-spacing: 1px;\r\n                    }\r\n                }\r\n            }\r\n\r\n            /* ---- ELEGANT DESCRIPTION ---- */\r\n            .wcps-product-description {\r\n                font-size: 13px;\r\n                color: #555;\r\n                line-height: 1.6;\r\n                margin: 8px 0 15px;\r\n                font-weight: 300;\r\n                letter-spacing: 0.1px;\r\n                position: relative;\r\n                padding-top: 12px;\r\n\r\n                &:before {\r\n                    content: '';\r\n                    position: absolute;\r\n                    top: 0;\r\n                    left: 0;\r\n                    width: 30px;\r\n                    height: 1px;\r\n                    background: #eaeaea;\r\n                }\r\n\r\n                p.wcps-product-description-content {\r\n                    font-size: inherit;\r\n                    color: inherit;\r\n                    font-weight: inherit;\r\n                    margin: 0;\r\n                }\r\n            }\r\n\r\n            /* ---- REFINED QUICK ADD ---- */\r\n            .wcps-quick-add {\r\n                margin-top: 15px;\r\n                display: flex;\r\n                gap: 8px;\r\n\r\n                .quantity {\r\n                    flex: 1;\r\n                    max-width: 80px;\r\n\r\n                    input {\r\n                        width: 100%;\r\n                        padding: 9px 10px;\r\n                        border: 1px solid #e0e0e0;\r\n                        border-radius: 0;\r\n                        font-size: 13px;\r\n                        background: #fafafa;\r\n                        appearance: none;\r\n                        text-align: center;\r\n                        transition: border-color 0.3s;\r\n\r\n                        &:focus {\r\n                            border-color: #bbb;\r\n                            outline: none;\r\n                            background: #fff;\r\n                        }\r\n                    }\r\n                }\r\n\r\n                .wcps-add-to-cart {\r\n                    flex: 1;\r\n\r\n                    a {\r\n                        display: block;\r\n                        padding: 9px 15px;\r\n                        background: #f5f5f5;\r\n                        color: #1a1a1a;\r\n                        text-align: center;\r\n                        border-radius: 0;\r\n                        text-decoration: none;\r\n                        font-size: 12px;\r\n                        font-weight: 400;\r\n                        transition: all 0.25s ease;\r\n                        text-transform: uppercase;\r\n                        letter-spacing: 1px;\r\n                        border: 1px solid #e0e0e0;\r\n\r\n                        &:hover {\r\n                            background: #1a1a1a;\r\n                            color: #fff;\r\n                            border-color: #1a1a1a;\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n\r\n            /* ---- ENHANCED TAGS ---- */\r\n            .wcps-product-tags {\r\n                display: flex;\r\n                flex-wrap: wrap;\r\n                gap: 6px;\r\n                margin-top: 15px;\r\n\r\n                .wcps-tag {\r\n                    font-size: 9px;\r\n                    padding: 3px 8px;\r\n                    background: transparent;\r\n                    border-radius: 0;\r\n                    color: #999;\r\n                    border: 1px solid #eee;\r\n                    text-transform: uppercase;\r\n                    letter-spacing: 1px;\r\n                    transition: all 0.2s ease;\r\n\r\n                    &:hover {\r\n                        color: #1a1a1a;\r\n                        border-color: #d0d0d0;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n\r\n\r\n\r\n    }\r\n}\r\n\r\n/* -------------- Masonry Grid style 3 END -------------- */\r\n\r\n\r\n\r\n/* -------------- Gallery Layout dynamic: basic done -------------- */\r\n\r\n/* -------------- Gallery Layout-------------- */\r\n\r\n// Gallery Layout or Showcase Gallery\r\n.wcps-container {\r\n    background: var(--wcps-container-background, #ffffff3b);\r\n    padding: var(--wcps-container-padding, 25px);\r\n    margin: var(--wcps-container-margin, 0px);\r\n\r\n    &.wcps-layout-gallery {\r\n        margin: 30px 0;\r\n        position: relative;\r\n        background-color: var(--wcps-background);\r\n        border-radius: var(--wcps-border-radius);\r\n        padding: var(--wcps-product-content-padding);\r\n\r\n        .wcps-products-container {\r\n            background: var(--wcps-container-background, #ffffff3b);\r\n            padding: var(--wcps-container-padding, 25px);\r\n            margin: var(--wcps-container-margin, 0px);\r\n        }\r\n\r\n        // Apply box-shadow based on condition\r\n        @if var(--wcps-box-shadow)==\"light\" {\r\n            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);\r\n        }\r\n\r\n        @else if var(--wcps-box-shadow)==\"medium\" {\r\n            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\r\n        }\r\n\r\n        @else if var(--wcps-box-shadow)==\"heavy\" {\r\n            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);\r\n        }\r\n\r\n        // Apply border style based on condition\r\n        @if var(--wcps-border-style) !=\"none\" {\r\n            border: var(--wcps-border-width) var(--wcps-border-style) var(--wcps-border-color);\r\n        }\r\n\r\n        .wcps-gallery {\r\n            margin-bottom: 30px;\r\n\r\n            &-filter {\r\n                display: flex;\r\n                flex-wrap: wrap;\r\n                gap: 10px;\r\n                justify-content: center;\r\n                margin-bottom: 20px;\r\n\r\n                button {\r\n                    padding: 8px 16px;\r\n                    background-color: #f5f5f5;\r\n                    color: #333333;\r\n                    border: none;\r\n                    border-radius: 4px;\r\n                    cursor: pointer;\r\n                    font-size: 14px;\r\n                    transition: var(--wcps-hover-transition);\r\n\r\n                    &:hover {\r\n                        background-color: #d4d1d1;\r\n                    }\r\n\r\n                    &.active {\r\n                        background-color: var(--wcps-product-title);\r\n                        color: white;\r\n                    }\r\n                }\r\n            }\r\n\r\n            &-container {\r\n                margin-top: 20px;\r\n                display: flex;\r\n                flex-wrap: wrap;\r\n                margin-left: -10px;\r\n                margin-right: -10px;\r\n\r\n                &:after {\r\n                    content: \"\";\r\n                    display: table;\r\n                    clear: both;\r\n                }\r\n            }\r\n\r\n            &-item {\r\n                padding: 10px;\r\n                width: 100%;\r\n                float: left;\r\n                box-sizing: border-box;\r\n\r\n                @media (min-width: $breakpoint-sm) {\r\n                    width: 50%;\r\n                }\r\n\r\n                @media (min-width: $breakpoint-md) {\r\n                    width: calc(100% / 3);\r\n                }\r\n\r\n                @media (min-width: $breakpoint-xl) {\r\n                    width: 25%;\r\n                }\r\n\r\n                // Dynamic columns for different screen sizes\r\n                .wcps-columns-2 & {\r\n                    @media (min-width: $breakpoint-sm) {\r\n                        width: 50%;\r\n                    }\r\n                }\r\n\r\n                .wcps-columns-3 & {\r\n                    @media (min-width: $breakpoint-md) {\r\n                        width: calc(100% / 3);\r\n                    }\r\n                }\r\n\r\n                .wcps-columns-4 & {\r\n                    @media (min-width: $breakpoint-lg) {\r\n                        width: 25%;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        .wcps-product {\r\n            height: var(--wcps-product-width, 100%);\r\n            position: relative;\r\n            background: white;\r\n            border: 1px solid var(--wcps-border-color);\r\n            border-radius: 8px;\r\n            overflow: hidden;\r\n            transition: var(--wcps-hover-transition);\r\n            display: flex;\r\n            // flex-direction: var(--wcps-product-flex-direction, column); // Need to create column, column-reverse, row, row-reverse\r\n            flex-direction: column;\r\n            background: var(--wcps-product-background, #fff);\r\n\r\n            // Apply hover effect based on condition\r\n            @if var(--wcps-hover-effect)==\"shadow\" {\r\n                &:hover {\r\n                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n                }\r\n            }\r\n\r\n            @else if var(--wcps-hover-effect)==\"lift\" {\r\n                &:hover {\r\n                    transform: translateY(-3px);\r\n                }\r\n            }\r\n\r\n            @else if var(--wcps-hover-effect)==\"zoom\" {\r\n                &:hover {\r\n                    transform: scale(1.02);\r\n                }\r\n            }\r\n\r\n            @else if var(--wcps-hover-effect)==\"glow\" {\r\n                &:hover {\r\n                    box-shadow: 0 0 15px rgba(var(--wcps-product-title), 0.3);\r\n                }\r\n            }\r\n\r\n            &:hover {\r\n                .wcps-actions-hover {\r\n                    opacity: 1;\r\n                    visibility: visible;\r\n                }\r\n\r\n                // Apply image hover effect\r\n                @if var(--wcps-image-hover-effect)==\"zoom\" {\r\n                    .wcps-product-image img {\r\n                        transform: scale(1.05);\r\n                    }\r\n                }\r\n\r\n                @else if var(--wcps-image-hover-effect)==\"fade\" {\r\n                    .wcps-product-image img {\r\n                        opacity: 0.8;\r\n                    }\r\n                }\r\n\r\n                @else if var(--wcps-image-hover-effect)==\"blur\" {\r\n                    .wcps-product-image img {\r\n                        filter: blur(2px);\r\n                    }\r\n                }\r\n            }\r\n\r\n            &-image {\r\n                position: relative;\r\n                overflow: hidden;\r\n                z-index: 5;\r\n                width: var(--wcps-product-image-width, 100%);\r\n                height: var(--wcps-product-image-height, 100%);\r\n\r\n                // Apply image aspect ratio\r\n                @if var(--wcps-image-aspect-ratio) !=\"auto\" {\r\n                    aspect-ratio: var(--wcps-image-aspect-ratio, 1/1);\r\n                }\r\n\r\n                border-radius: var(--wcps-image-border-radius);\r\n\r\n                img {\r\n                    width: 100%;\r\n                    height: auto;\r\n                    display: block;\r\n                    transition: transform 0.4s ease;\r\n\r\n                    @if var(--wcps-image-aspect-ratio) !=\"auto\" {\r\n                        object-fit: cover;\r\n                        height: 100%;\r\n                    }\r\n                }\r\n            }\r\n\r\n            &-content {\r\n                padding: 15px;\r\n                display: flex;\r\n                flex-direction: column;\r\n                flex-grow: 1;\r\n                text-align: var(--wcps-text-align);\r\n            }\r\n\r\n            &-title {\r\n                margin: 0 0 10px;\r\n                font-size: var(--wcps-title-size);\r\n                font-weight: var(--wcps-title-weight);\r\n                line-height: 1.4;\r\n\r\n                a {\r\n                    color: var(--wcps-product-title);\r\n                    text-decoration: none;\r\n\r\n                    &:hover {\r\n                        color: var(--wcps-product-title);\r\n                    }\r\n                }\r\n            }\r\n\r\n            &-price {\r\n                font-weight: var(--wcps-price-font-weight);\r\n                font-size: var(--wcps-price-font-size);\r\n                color: var(--wcps-price-font-color);\r\n                margin-bottom: 10px;\r\n\r\n                del {\r\n                    color: var(--wcps-price-delete-font-color);\r\n                    margin-right: 5px;\r\n                    font-weight: normal;\r\n                }\r\n\r\n                ins {\r\n                    text-decoration: none;\r\n                    color: var(--wcps-price-font-color);\r\n                }\r\n            }\r\n\r\n            &-rating {\r\n                margin-bottom: 10px;\r\n\r\n                .star-rating {\r\n                    position: relative;\r\n                    height: 1em;\r\n                    width: 5.4em;\r\n                    font-family: 'star';\r\n                    font-size: 14px;\r\n                    overflow: hidden;\r\n\r\n                    &:before {\r\n                        content: \"★★★★★\";\r\n                        color: var(--wcps-star-color, #ffc107);\r\n                        font-size: var(--wcps-star-size, 10px);\r\n                        float: left;\r\n                        top: 0;\r\n                        left: 0;\r\n                        position: absolute;\r\n                    }\r\n\r\n                    span {\r\n                        color: var(--wcps-star-color, #ffc107);\r\n                        font-size: var(--wcps-star-size, 10px);\r\n                        overflow: hidden;\r\n                        float: left;\r\n                        top: 0;\r\n                        left: 0;\r\n                        position: absolute;\r\n                        padding-top: 1.5em;\r\n\r\n                        &:before {\r\n                            content: \"★★★★★\";\r\n                            color: var(--wcps-star-color, #ffc107);\r\n                            font-size: var(--wcps-star-size, 10px);\r\n                            top: 0;\r\n                            position: absolute;\r\n                            left: 0;\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n\r\n            &-description {\r\n                margin-top: auto;\r\n                color: var(--wcps-description-color);\r\n                font-size: var(--wcps-desc-size);\r\n                line-height: 1.5;\r\n                overflow: hidden;\r\n                text-overflow: ellipsis;\r\n                display: -webkit-box;\r\n                -webkit-line-clamp: 2;\r\n                -webkit-box-orient: vertical;\r\n            }\r\n\r\n            // Action style \r\n            .wcps-product-actions {\r\n                position: absolute;\r\n                right: 10px;\r\n                bottom: 10px;\r\n                display: flex;\r\n                flex-direction: column;\r\n                justify-content: center;\r\n                gap: 8px;\r\n                padding: 0;\r\n                opacity: 0;\r\n                visibility: hidden;\r\n                transform: translateY(20px) scale(0.8);\r\n                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n                a {\r\n                    position: relative;\r\n                    display: inline-flex;\r\n                    align-items: center;\r\n                    justify-content: center;\r\n                    width: 44px;\r\n                    height: 44px;\r\n                    border-radius: 50%;\r\n                    background: rgba(255, 255, 255, 0.95);\r\n                    backdrop-filter: blur(10px);\r\n                    border: 1px solid rgba(255, 255, 255, 0.2);\r\n                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\r\n                    color: #333;\r\n                    font-size: 16px;\r\n                    text-decoration: none;\r\n                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n                    overflow: visible;\r\n\r\n                    // Icon styling\r\n                    .wcps-btn-icon {\r\n                        display: flex;\r\n                        align-items: center;\r\n                        justify-content: center;\r\n                        z-index: 2;\r\n                        transition: transform 0.3s ease;\r\n\r\n                        i {\r\n                            font-size: 16px;\r\n                            transition: all 0.3s ease;\r\n                        }\r\n                    }\r\n\r\n                    // Modern CTA tooltip\r\n                    .wcps-btn-cta {\r\n                        position: absolute;\r\n                        right: calc(100% + 12px);\r\n                        top: 50%;\r\n                        transform: translateY(-50%) translateX(10px);\r\n                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n                        color: #fff;\r\n                        padding: 8px 12px;\r\n                        border-radius: 8px;\r\n                        font-size: 12px;\r\n                        font-weight: 500;\r\n                        white-space: nowrap;\r\n                        opacity: 0;\r\n                        visibility: hidden;\r\n                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n                        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);\r\n                        z-index: 100;\r\n\r\n                        // Modern arrow with gradient\r\n                        &::before {\r\n                            content: '';\r\n                            position: absolute;\r\n                            left: 100%;\r\n                            top: 50%;\r\n                            transform: translateY(-50%);\r\n                            width: 0;\r\n                            height: 0;\r\n                            border: 6px solid transparent;\r\n                            border-left: 6px solid #667eea;\r\n                            filter: drop-shadow(2px 0 2px rgba(102, 126, 234, 0.3));\r\n                        }\r\n\r\n                        // Subtle animation\r\n                        &::after {\r\n                            content: '';\r\n                            position: absolute;\r\n                            inset: 0;\r\n                            border-radius: inherit;\r\n                            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);\r\n                            opacity: 0;\r\n                            transition: opacity 0.3s ease;\r\n                        }\r\n                    }\r\n\r\n                    &:hover {\r\n                        transform: translateY(-2px) scale(1.05);\r\n                        background: #fff;\r\n                        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);\r\n                        border-color: rgba(102, 126, 234, 0.3);\r\n\r\n                        .wcps-btn-icon {\r\n                            transform: scale(1.1);\r\n\r\n                            i {\r\n                                color: #667eea;\r\n                            }\r\n                        }\r\n\r\n                        .wcps-btn-cta {\r\n                            opacity: 1;\r\n                            visibility: visible;\r\n                            transform: translateY(-50%) translateX(0);\r\n\r\n                            &::after {\r\n                                opacity: 1;\r\n                            }\r\n                        }\r\n                    }\r\n\r\n                    // Specific button styles\r\n                    &.wcps-add-to-cart {\r\n                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n                        color: #fff;\r\n                        border-color: transparent;\r\n\r\n                        &:hover {\r\n                            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);\r\n                            color: #fff;\r\n\r\n                            .wcps-btn-icon i {\r\n                                color: #fff;\r\n                            }\r\n                        }\r\n\r\n                        .wcps-btn-cta {\r\n                            background: linear-gradient(135deg, #4c51bf 0%, #553c9a 100%);\r\n\r\n                            &::before {\r\n                                border-left-color: #4c51bf;\r\n                            }\r\n                        }\r\n                    }\r\n\r\n                    &.wcps-wishlist {\r\n                        .wcps-btn-cta {\r\n                            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\r\n                            box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4);\r\n\r\n                            &::before {\r\n                                border-left-color: #f093fb;\r\n                            }\r\n                        }\r\n\r\n                        &:hover .wcps-btn-icon i {\r\n                            color: #f093fb;\r\n                        }\r\n                    }\r\n\r\n                    &.wcps-quickview {\r\n                        .wcps-btn-cta {\r\n                            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\r\n                            box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);\r\n\r\n                            &::before {\r\n                                border-left-color: #4facfe;\r\n                            }\r\n                        }\r\n\r\n                        &:hover .wcps-btn-icon i {\r\n                            color: #4facfe;\r\n                        }\r\n                    }\r\n\r\n                    &.wcps-compare {\r\n                        .wcps-btn-cta {\r\n                            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);\r\n                            box-shadow: 0 4px 15px rgba(67, 233, 123, 0.4);\r\n\r\n                            &::before {\r\n                                border-left-color: #43e97b;\r\n                            }\r\n                        }\r\n\r\n                        &:hover .wcps-btn-icon i {\r\n                            color: #43e97b;\r\n                        }\r\n                    }\r\n                }\r\n\r\n                // Staggered animation for multiple buttons\r\n                a:nth-child(1) {\r\n                    transition-delay: 0.1s;\r\n                }\r\n\r\n                a:nth-child(2) {\r\n                    transition-delay: 0.15s;\r\n                }\r\n\r\n                a:nth-child(3) {\r\n                    transition-delay: 0.2s;\r\n                }\r\n\r\n                a:nth-child(4) {\r\n                    transition-delay: 0.25s;\r\n                }\r\n            }\r\n\r\n\r\n            // Show actions on hover\r\n            .wcps-product-image:hover {\r\n                .wcps-product-actions {\r\n                    opacity: 1;\r\n                    visibility: visible;\r\n                    transform: translateY(0) scale(1);\r\n                }\r\n            }\r\n\r\n            // Enhanced pulse animation\r\n            @keyframes modernPulse {\r\n                0% {\r\n                    transform: scale(1);\r\n                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\r\n                }\r\n\r\n                50% {\r\n                    transform: scale(1.05);\r\n                    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);\r\n                }\r\n\r\n                100% {\r\n                    transform: scale(1);\r\n                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\r\n                }\r\n            }\r\n\r\n\r\n        }\r\n    }\r\n\r\n    /* Product Gallery Thumbnails */\r\n    .wcps-product-gallery {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        justify-content: center;\r\n        gap: 5px;\r\n        padding: 10px;\r\n        background-color: #f9f9f9;\r\n    }\r\n\r\n    .wcps-gallery-image {\r\n        width: 60px;\r\n        height: 60px;\r\n        border: 2px solid transparent;\r\n        border-radius: 4px;\r\n        overflow: hidden;\r\n        cursor: pointer;\r\n        transition: var(--wcps-hover-transition);\r\n    }\r\n\r\n    .wcps-gallery-image.active {\r\n        border-color: var(--wcps-product-title);\r\n    }\r\n\r\n    .wcps-gallery-image:hover {\r\n        opacity: 0.8;\r\n    }\r\n\r\n    .wcps-gallery-image img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n    }\r\n\r\n\r\n    // Media query adjustments for filter buttons\r\n    @media (max-width: $breakpoint-sm) {\r\n        .wcps-container.wcps-layout-gallery .wcps-gallery-filter {\r\n            flex-direction: column;\r\n            width: 100%;\r\n\r\n            button {\r\n                width: 100%;\r\n            }\r\n        }\r\n    }\r\n\r\n    // Quick view display modes\r\n    @if var(--quickview-display-mode)==\"icon\" {\r\n        .wcps-quickview .wcps-text {\r\n            display: none;\r\n        }\r\n    }\r\n\r\n    @else if var(--quickview-display-mode)==\"text\" {\r\n        .wcps-quickview .wcps-icon {\r\n            display: none;\r\n        }\r\n    }\r\n\r\n    // Wishlist display modes\r\n    @if var(--wishlist-displaymode)==\"icon\" {\r\n        .wcps-wishlist .wcps-text {\r\n            display: none;\r\n        }\r\n    }\r\n\r\n    @else if var(--wishlist-displaymode)==\"text\" {\r\n        .wcps-wishlist .wcps-icon {\r\n            display: none;\r\n        }\r\n    }\r\n\r\n    // Compare display modes\r\n    @if var(--compare-display-mode)==\"icon\" {\r\n        .wcps-compare .wcps-text {\r\n            display: none;\r\n        }\r\n    }\r\n\r\n    @else if var(--compare-display-mode)==\"text\" {\r\n        .wcps-compare .wcps-icon {\r\n            display: none;\r\n        }\r\n    }\r\n\r\n    // Add to cart display modes\r\n    @if var(--addtocart-display-mode)==\"icon\" {\r\n        .wcps-add-to-cart .wcps-text {\r\n            display: none;\r\n        }\r\n    }\r\n\r\n    @else if var(--addtocart-display-mode)==\"text\" {\r\n        .wcps-add-to-cart .wcps-icon {\r\n            display: none;\r\n        }\r\n    }\r\n\r\n\r\n    // Add pulse animation for button animation\r\n    @keyframes pulse {\r\n        0% {\r\n            transform: scale(1);\r\n        }\r\n\r\n        50% {\r\n            transform: scale(1.05);\r\n        }\r\n\r\n        100% {\r\n            transform: scale(1);\r\n        }\r\n    }\r\n\r\n    // Responsive design for action buttons on small screens\r\n    @media (max-width: $breakpoint-sm) {\r\n\r\n        .wcps-quickview,\r\n        .wcps-wishlist,\r\n        .wcps-compare {\r\n            .wcps-text {\r\n                display: none;\r\n            }\r\n\r\n            .wcps-icon:before {\r\n                margin-right: 0;\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n\r\n/* -------------- END -------------- */\r\n\r\n/* Slick Slider - Slider  wcps-layout-slider */\r\n// Sleek Carousel\r\n.wcps-container {\r\n    background: var(--wcps-container-background, #ffffff3b);\r\n    padding: var(--wcps-container-padding, 25px);\r\n    margin: var(--wcps-container-margin, 0px);\r\n\r\n    // Sleek Carousel\r\n    &.wcps-layout-slider {\r\n        margin: var(--wcps-container-margin, 30px 0);\r\n        position: relative;\r\n        width: var(--wcps-grid-width, 100%);\r\n        max-width: 100%;\r\n\r\n        .wcps-products-container {\r\n            background: var(--wcps-container-background, #ffffff3b);\r\n            padding: var(--wcps-container-padding, 25px);\r\n            margin: var(--wcps-container-margin, 0px);\r\n        }\r\n\r\n        .wcps-slider-container {\r\n            width: 100%;\r\n            position: relative;\r\n            background: var(--wcps-container-background, #ffffff3b);\r\n            padding: var(--wcps-container-padding, 25px);\r\n            margin: var(--wcps-container-margin, 0px);\r\n\r\n            // Slick slider arrows\r\n            .slick-arrow {\r\n                background: var(--wcps-container-background, #fff);\r\n                border: var(--wcps-border-width, 1px) var(--wcps-border-style, solid) var(--wcps-border-color, #eeeeee);\r\n                border-radius: 50%;\r\n                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\r\n                color: var(--wcps-price-delete-font-color, #333333);\r\n                cursor: pointer;\r\n                font-size: 0;\r\n                height: 44px;\r\n                line-height: 44px;\r\n                margin-top: -22px;\r\n                opacity: 0.9;\r\n                padding: 0;\r\n                position: absolute;\r\n                text-align: center;\r\n                top: 35%;\r\n                width: 44px;\r\n                z-index: 10;\r\n                transition: all var(--wcps-hover-transition, 0.3s) ease;\r\n\r\n                &:hover {\r\n                    opacity: 1;\r\n                    background-color: var(--wcps-button-bg-color, #0170B9);\r\n                    color: var(--wcps-button-text-color, #ffffff);\r\n                    transform: scale(1.05);\r\n                }\r\n\r\n                &:focus {\r\n                    outline: none;\r\n                }\r\n\r\n                &.slick-prev {\r\n                    left: -22px;\r\n\r\n                    &:before {\r\n                        content: \"←\";\r\n                        font-size: 20px;\r\n                        font-weight: bold;\r\n                    }\r\n                }\r\n\r\n                &.slick-next {\r\n                    right: -22px;\r\n\r\n                    &:before {\r\n                        content: \"→\";\r\n                        font-size: 20px;\r\n                        font-weight: bold;\r\n                    }\r\n                }\r\n            }\r\n\r\n            // Slick dots\r\n            .slick-dots {\r\n                bottom: -35px;\r\n                display: flex !important;\r\n                justify-content: center;\r\n                list-style: none;\r\n                margin: 0;\r\n                padding: 0;\r\n                position: absolute;\r\n                width: 100%;\r\n\r\n                li {\r\n                    margin: 0 4px;\r\n\r\n                    button {\r\n                        background: var(--wcps-border-color, #eeeeee);\r\n                        border: none;\r\n                        border-radius: 50%;\r\n                        cursor: pointer;\r\n                        display: block;\r\n                        font-size: 0;\r\n                        height: 12px;\r\n                        padding: 0;\r\n                        width: 12px;\r\n                        transition: all var(--wcps-hover-transition, 0.3s) ease;\r\n\r\n                        &:hover {\r\n                            background: var(--wcps-button-bg-color, #0170B9);\r\n                            transform: scale(1.2);\r\n                        }\r\n                    }\r\n\r\n                    &.slick-active button {\r\n                        background: var(--wcps-button-bg-color, #0170B9);\r\n                        transform: scale(1.3);\r\n                    }\r\n                }\r\n            }\r\n\r\n            // Equal height slides\r\n            .slick-track {\r\n                display: flex;\r\n                align-items: stretch;\r\n\r\n                .slick-slide {\r\n                    height: auto;\r\n                    display: flex;\r\n                    align-items: stretch;\r\n\r\n                    >div {\r\n                        height: 100%;\r\n                        width: 100%;\r\n                        display: flex;\r\n                    }\r\n                }\r\n            }\r\n\r\n            // Remove default slick styles that cause width issues\r\n            .slick-list {\r\n                overflow: hidden;\r\n                margin: 0 -#{var(--wcps-grid-gap, 20px) / 2};\r\n            }\r\n        }\r\n\r\n        .wcps-slider-item {\r\n            padding: 0 calc(var(--wcps-grid-gap, 20px) / 2);\r\n            height: 100%;\r\n            display: flex;\r\n            min-height: 300px; // Prevent extreme height variations\r\n            max-height: 500px; // Set reasonable maximum\r\n        }\r\n\r\n        .wcps-product {\r\n            transition: all var(--wcps-hover-transition, 0.3s) ease;\r\n            height: 100%;\r\n            width: var(--wcps-product-width, 100%);\r\n            display: flex;\r\n            // flex-direction: var(--wcps-product-flex-direction, column);\r\n            flex-direction: column;\r\n            border: var(--wcps-border-width, 0px) var(--wcps-border-style, solid) var(--wcps-border-color, #eeeeee);\r\n            border-radius: calc(var(--wcps-border-radius, 8) * 1px);\r\n            overflow: hidden;\r\n            background: var(--wcps-product-background, #fff);\r\n            position: relative;\r\n\r\n            // Dynamic box shadow based on variable\r\n            &.wcps-shadow-none {\r\n                box-shadow: none;\r\n            }\r\n\r\n            &.wcps-shadow-light,\r\n            &:not([class*=\"wcps-shadow-\"]) {\r\n                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n            }\r\n\r\n            &.wcps-shadow-medium {\r\n                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\r\n            }\r\n\r\n            &.wcps-shadow-heavy {\r\n                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\r\n            }\r\n\r\n            // Product image section\r\n            .wcps-product-image {\r\n                position: relative;\r\n                overflow: hidden;\r\n                border-radius: calc(var(--wcps-image-border-radius, 0) * 1px);\r\n                width: var(--wcps-product-image-width, 100%);\r\n                height: var(--wcps-product-image-height, auto);\r\n                flex-shrink: 0;\r\n\r\n                // Fixed here and remvoed the aspect-ratio for slider \r\n                img {\r\n                    transition: transform var(--wcps-hover-transition, 0.3s) ease;\r\n                    width: 100%;\r\n                    height: 200px; // Fixed height to prevent extreme variations\r\n                    object-fit: cover;\r\n                    border-radius: calc(var(--wcps-image-border-radius, 0) * 1px);\r\n                }\r\n\r\n                // Product badges\r\n                .wcps-product-badge {\r\n                    position: var(--wcps-product-badge-position, absolute);\r\n                    top: var(--wcps-product-badge-top, 8px);\r\n                    right: var(--wcps-product-badge-right, 8px);\r\n                    left: var(--wcps-product-badge-left, auto);\r\n                    z-index: var(--wcps-product-badge-z-index, 2);\r\n                    background: var(--wcps-product-badge-background, rgb(54, 182, 217));\r\n                    color: var(--wcps-product-badge-font-color, #ffffff);\r\n                    padding: var(--wcps-product-badge-padding, 4px 8px);\r\n                    border-radius: var(--wcps-product-badge-border-radius, 4px);\r\n                    font-size: var(--wcps-product-badge-font-size, 12px);\r\n                    font-weight: var(--wcps-product-badge-font-weight, 600);\r\n                    text-transform: var(--wcps-product-badge-text-transform, capitalize);\r\n                    text-align: var(--wcps-product-badge-text-align, center);\r\n                    margin: var(--wcps-product-badge-margin, 0px);\r\n                }\r\n\r\n                // Image hover effects\r\n                &:hover img {\r\n                    @if var(--wcps-image-hover-effect)==\"zoom\" {\r\n                        transform: scale(1.05);\r\n                    }\r\n\r\n                    @else if var(--wcps-image-hover-effect)==\"fade\" {\r\n                        opacity: 0.8;\r\n                    }\r\n\r\n                    @else if var(--wcps-image-hover-effect)==\"blur\" {\r\n                        filter: blur(2px);\r\n                    }\r\n\r\n                    @else {\r\n                        transform: scale(1.05); // Default zoom effect\r\n                    }\r\n                }\r\n            }\r\n\r\n            // Product content section\r\n            .wcps-product-content {\r\n                padding: var(--wcps-product-content-padding, 15px);\r\n                margin: var(--wcps-product-content-margin, 0px);\r\n                display: flex;\r\n                flex-direction: var(--wcps-product-content-direction, column);\r\n                text-align: var(--wcps-text-align, left);\r\n                background: var(--wcps-product-background, #ffffff);\r\n                justify-content: space-between;\r\n\r\n                .wcps-product-title {\r\n                    margin: 0 0 8px;\r\n                    font-size: calc(var(--wcps-title-size, 16) * 1px);\r\n                    font-weight: var(--wcps-title-weight, 600);\r\n                    line-height: 1.3;\r\n                    display: -webkit-box;\r\n                    -webkit-line-clamp: 2;\r\n                    -webkit-box-orient: vertical;\r\n                    overflow: hidden;\r\n\r\n                    a {\r\n                        color: var(--wcps-product-title, #0170B9);\r\n                        text-decoration: none;\r\n                        transition: color var(--wcps-hover-transition, 0.3s) ease;\r\n\r\n                        &:hover {\r\n                            color: var(--wcps-product-title-hover-color, #0170B9);\r\n                        }\r\n                    }\r\n                }\r\n\r\n                .wcps-product-price {\r\n                    font-weight: var(--wcps-price-font-weight, 700);\r\n                    font-size: calc(var(--wcps-price-font-size, 18) * 1px);\r\n                    color: var(--wcps-price-font-color, #0170B9);\r\n                    margin-bottom: 8px;\r\n\r\n                    del {\r\n                        opacity: 0.6;\r\n                        margin-right: 8px;\r\n                        color: var(--wcps-price-delete-font-color, #333333);\r\n                        font-weight: 400;\r\n                    }\r\n\r\n                    ins {\r\n                        text-decoration: none;\r\n                        color: var(--wcps-price-font-color, #0170B9);\r\n                    }\r\n                }\r\n\r\n                .wcps-product-rating {\r\n                    margin-bottom: 8px;\r\n\r\n                    .star-rating {\r\n                        color: var(--wcps-star-color, #ffc107);\r\n                        font-size: var(--wcps-star-size, 14px);\r\n                    }\r\n                }\r\n\r\n                .wcps-product-description {\r\n                    font-size: calc(var(--wcps-desc-size, 14) * 1px);\r\n                    color: var(--wcps-description-color, #23282d);\r\n                    line-height: 1.4;\r\n                    margin: 8px 0;\r\n                    display: -webkit-box;\r\n                    -webkit-line-clamp: 2;\r\n                    -webkit-box-orient: vertical;\r\n                    overflow: hidden;\r\n                    flex-grow: 1;\r\n                }\r\n            }\r\n\r\n            // Product actions\r\n            .wcps-product-actions {\r\n                position: absolute;\r\n                right: 10px;\r\n                bottom: 10px;\r\n                display: flex;\r\n                flex-direction: column;\r\n                justify-content: center;\r\n                gap: 8px;\r\n                padding: 0;\r\n                opacity: 0;\r\n                visibility: hidden;\r\n                transform: translateY(20px) scale(0.8);\r\n                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n                a {\r\n                    position: relative;\r\n                    display: inline-flex;\r\n                    align-items: center;\r\n                    justify-content: center;\r\n                    width: 44px;\r\n                    height: 44px;\r\n                    border-radius: 50%;\r\n                    background: rgba(255, 255, 255, 0.95);\r\n                    backdrop-filter: blur(10px);\r\n                    border: 1px solid rgba(255, 255, 255, 0.2);\r\n                    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\r\n                    color: #333;\r\n                    font-size: 16px;\r\n                    text-decoration: none;\r\n                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n                    overflow: visible;\r\n\r\n                    // Icon styling\r\n                    .wcps-btn-icon {\r\n                        display: flex;\r\n                        align-items: center;\r\n                        justify-content: center;\r\n                        z-index: 2;\r\n                        transition: transform 0.3s ease;\r\n\r\n                        i {\r\n                            font-size: 16px;\r\n                            transition: all 0.3s ease;\r\n                        }\r\n                    }\r\n\r\n                    // Modern CTA tooltip\r\n                    .wcps-btn-cta {\r\n                        position: absolute;\r\n                        right: calc(100% + 12px);\r\n                        top: 50%;\r\n                        transform: translateY(-50%) translateX(10px);\r\n                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n                        color: #fff;\r\n                        padding: 8px 12px;\r\n                        border-radius: 8px;\r\n                        font-size: 12px;\r\n                        font-weight: 500;\r\n                        white-space: nowrap;\r\n                        opacity: 0;\r\n                        visibility: hidden;\r\n                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n                        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);\r\n                        z-index: 100;\r\n\r\n                        // Modern arrow with gradient\r\n                        &::before {\r\n                            content: '';\r\n                            position: absolute;\r\n                            left: 100%;\r\n                            top: 50%;\r\n                            transform: translateY(-50%);\r\n                            width: 0;\r\n                            height: 0;\r\n                            border: 6px solid transparent;\r\n                            border-left: 6px solid #667eea;\r\n                            filter: drop-shadow(2px 0 2px rgba(102, 126, 234, 0.3));\r\n                        }\r\n\r\n                        // Subtle animation\r\n                        &::after {\r\n                            content: '';\r\n                            position: absolute;\r\n                            inset: 0;\r\n                            border-radius: inherit;\r\n                            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);\r\n                            opacity: 0;\r\n                            transition: opacity 0.3s ease;\r\n                        }\r\n                    }\r\n\r\n                    &:hover {\r\n                        transform: translateY(-2px) scale(1.05);\r\n                        background: #fff;\r\n                        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);\r\n                        border-color: rgba(102, 126, 234, 0.3);\r\n\r\n                        .wcps-btn-icon {\r\n                            transform: scale(1.1);\r\n\r\n                            i {\r\n                                color: #667eea;\r\n                            }\r\n                        }\r\n\r\n                        .wcps-btn-cta {\r\n                            opacity: 1;\r\n                            visibility: visible;\r\n                            transform: translateY(-50%) translateX(0);\r\n\r\n                            &::after {\r\n                                opacity: 1;\r\n                            }\r\n                        }\r\n                    }\r\n\r\n                    // Specific button styles\r\n                    &.wcps-add-to-cart {\r\n                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n                        color: #fff;\r\n                        border-color: transparent;\r\n\r\n                        &:hover {\r\n                            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);\r\n                            color: #fff;\r\n\r\n                            .wcps-btn-icon i {\r\n                                color: #fff;\r\n                            }\r\n                        }\r\n\r\n                        .wcps-btn-cta {\r\n                            background: linear-gradient(135deg, #4c51bf 0%, #553c9a 100%);\r\n\r\n                            &::before {\r\n                                border-left-color: #4c51bf;\r\n                            }\r\n                        }\r\n                    }\r\n\r\n                    &.wcps-wishlist {\r\n                        .wcps-btn-cta {\r\n                            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\r\n                            box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4);\r\n\r\n                            &::before {\r\n                                border-left-color: #f093fb;\r\n                            }\r\n                        }\r\n\r\n                        &:hover .wcps-btn-icon i {\r\n                            color: #f093fb;\r\n                        }\r\n                    }\r\n\r\n                    &.wcps-quickview {\r\n                        .wcps-btn-cta {\r\n                            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\r\n                            box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);\r\n\r\n                            &::before {\r\n                                border-left-color: #4facfe;\r\n                            }\r\n                        }\r\n\r\n                        &:hover .wcps-btn-icon i {\r\n                            color: #4facfe;\r\n                        }\r\n                    }\r\n\r\n                    &.wcps-compare {\r\n                        .wcps-btn-cta {\r\n                            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);\r\n                            box-shadow: 0 4px 15px rgba(67, 233, 123, 0.4);\r\n\r\n                            &::before {\r\n                                border-left-color: #43e97b;\r\n                            }\r\n                        }\r\n\r\n                        &:hover .wcps-btn-icon i {\r\n                            color: #43e97b;\r\n                        }\r\n                    }\r\n                }\r\n\r\n                // Staggered animation for multiple buttons\r\n                a:nth-child(1) {\r\n                    transition-delay: 0.1s;\r\n                }\r\n\r\n                a:nth-child(2) {\r\n                    transition-delay: 0.15s;\r\n                }\r\n\r\n                a:nth-child(3) {\r\n                    transition-delay: 0.2s;\r\n                }\r\n\r\n                a:nth-child(4) {\r\n                    transition-delay: 0.25s;\r\n                }\r\n            }\r\n\r\n\r\n            // Show actions on hover\r\n            .wcps-product-image:hover {\r\n                .wcps-product-actions {\r\n                    opacity: 1;\r\n                    visibility: visible;\r\n                    transform: translateY(0) scale(1);\r\n                }\r\n            }\r\n\r\n            // Hover effects for product\r\n            &:hover {\r\n                @if var(--wcps-hover-effect)==\"lift\" {\r\n                    transform: translateY(-3px);\r\n                    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);\r\n                }\r\n\r\n                @else if var(--wcps-hover-effect)==\"shadow\" {\r\n                    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\r\n                }\r\n\r\n                @else if var(--wcps-hover-effect)==\"zoom\" {\r\n                    transform: scale(1.02);\r\n                }\r\n\r\n                @else if var(--wcps-hover-effect)==\"glow\" {\r\n                    box-shadow: 0 0 20px rgba(1, 112, 185, 0.3);\r\n                }\r\n\r\n                @else {\r\n                    transform: translateY(-2px);\r\n                    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\r\n                }\r\n\r\n                .wcps-product-actions {\r\n                    &.wcps-actions-hover {\r\n                        opacity: 1;\r\n                        transform: translateY(0);\r\n                    }\r\n\r\n                    &.wcps-actions-panel {\r\n                        transform: translateX(0);\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        // Responsive design\r\n        @media (max-width: $breakpoint-xl) {\r\n            .wcps-slider-item {\r\n                min-height: 280px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: $breakpoint-lg) {\r\n            .wcps-slider-item {\r\n                min-height: 260px;\r\n            }\r\n\r\n            .wcps-slider-container .slick-arrow {\r\n                height: 38px;\r\n                width: 38px;\r\n                margin-top: -19px;\r\n\r\n                &.slick-prev {\r\n                    left: -19px;\r\n                }\r\n\r\n                &.slick-next {\r\n                    right: -19px;\r\n                }\r\n            }\r\n        }\r\n\r\n        @media (max-width: $breakpoint-md) {\r\n            .wcps-slider-item {\r\n                min-height: 240px;\r\n            }\r\n\r\n            .wcps-slider-container .slick-arrow {\r\n                height: 34px;\r\n                width: 34px;\r\n                margin-top: -17px;\r\n\r\n                &.slick-prev {\r\n                    left: -17px;\r\n                }\r\n\r\n                &.slick-next {\r\n                    right: -17px;\r\n                }\r\n\r\n                &:before {\r\n                    font-size: 16px !important;\r\n                }\r\n            }\r\n\r\n            .wcps-product {\r\n                .wcps-product-image img {\r\n                    height: 180px;\r\n                }\r\n\r\n                .wcps-product-content {\r\n                    padding: 12px;\r\n\r\n                    .wcps-product-title {\r\n                        font-size: 14px;\r\n                    }\r\n\r\n                    .wcps-product-price {\r\n                        font-size: 16px;\r\n                    }\r\n                }\r\n\r\n                .wcps-product-actions {\r\n                    padding: 8px;\r\n\r\n                    a {\r\n                        padding: 6px 10px;\r\n                        font-size: 13px;\r\n\r\n                        .wcps-text {\r\n                            display: none;\r\n                        }\r\n\r\n                        .wcps-icon {\r\n                            margin: 0;\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        @media (max-width: $breakpoint-sm) {\r\n            margin: 20px 0;\r\n\r\n            .wcps-slider-item {\r\n                min-height: 220px;\r\n            }\r\n\r\n            .wcps-slider-container {\r\n                .slick-arrow {\r\n                    height: 32px;\r\n                    width: 32px;\r\n                    margin-top: -16px;\r\n\r\n                    &.slick-prev {\r\n                        left: -16px;\r\n                    }\r\n\r\n                    &.slick-next {\r\n                        right: -16px;\r\n                    }\r\n\r\n                    &:before {\r\n                        font-size: 14px !important;\r\n                    }\r\n                }\r\n\r\n                .slick-dots {\r\n                    bottom: -30px;\r\n\r\n                    li button {\r\n                        height: 10px;\r\n                        width: 10px;\r\n                    }\r\n                }\r\n            }\r\n\r\n            .wcps-product {\r\n                .wcps-product-image img {\r\n                    height: 160px;\r\n                }\r\n\r\n                .wcps-product-content {\r\n                    padding: 10px;\r\n\r\n                    .wcps-product-title {\r\n                        font-size: 13px;\r\n                    }\r\n\r\n                    .wcps-product-price {\r\n                        font-size: 15px;\r\n                    }\r\n\r\n                    .wcps-product-description {\r\n                        font-size: 12px;\r\n                        -webkit-line-clamp: 1;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        @media (max-width: $breakpoint-xs) {\r\n            .wcps-slider-item {\r\n                min-height: 200px;\r\n            }\r\n\r\n            .wcps-slider-container .slick-arrow {\r\n                height: 28px;\r\n                width: 28px;\r\n                margin-top: -14px;\r\n\r\n                &.slick-prev {\r\n                    left: -10px;\r\n                }\r\n\r\n                &.slick-next {\r\n                    right: -10px;\r\n                }\r\n            }\r\n\r\n            .wcps-product {\r\n                .wcps-product-image img {\r\n                    height: 140px;\r\n                }\r\n\r\n                .wcps-product-content {\r\n                    padding: 8px;\r\n\r\n                    .wcps-product-title {\r\n                        font-size: 12px;\r\n                        margin-bottom: 4px;\r\n                    }\r\n\r\n                    .wcps-product-price {\r\n                        font-size: 14px;\r\n                        margin-bottom: 4px;\r\n                    }\r\n                }\r\n\r\n                .wcps-product-actions {\r\n                    padding: 6px;\r\n\r\n                    a {\r\n                        padding: 4px 6px;\r\n                        font-size: 12px;\r\n                        min-width: 32px;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    // Keyframe animations\r\n    @keyframes pulse {\r\n\r\n        0%,\r\n        100% {\r\n            transform: scale(1);\r\n        }\r\n\r\n        50% {\r\n            transform: scale(1.05);\r\n        }\r\n    }\r\n}\r\n\r\n/* -------------- END -------------- */\r\n\r\n/* -------------- WCPS layout TABLE wcps-layout-table -------------- */\r\n// Feature Matrix  \r\n.wcps-container {\r\n    background: var(--wcps-container-background, #ffffff3b);\r\n    padding: var(--wcps-container-padding, 25px);\r\n    margin: var(--wcps-container-margin, 0px);\r\n\r\n    // Feature Matrix  \r\n    &.wcps-layout-table {\r\n        margin: 30px 0;\r\n        position: relative;\r\n\r\n        .wcps-products-container {\r\n            background: var(--wcps-container-background, #ffffff3b);\r\n            padding: var(--wcps-container-padding, 25px);\r\n            margin: var(--wcps-container-margin, 0px);\r\n        }\r\n\r\n        .wcps-table-container {\r\n            background: var(--wcps-container-background, #ffffff3b);\r\n            padding: var(--wcps-container-padding, 25px);\r\n            margin: var(--wcps-container-margin, 0px);\r\n            border-radius: var(--wcps-border-radius);\r\n\r\n            // Dynamic box shadow based on selection\r\n            @if var(--wcps-box-shadow)==\"none\" {\r\n                box-shadow: none;\r\n            }\r\n\r\n            @else if var(--wcps-box-shadow)==\"light\" {\r\n                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);\r\n            }\r\n\r\n            @else if var(--wcps-box-shadow)==\"medium\" {\r\n                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);\r\n            }\r\n\r\n            @else if var(--wcps-box-shadow)==\"heavy\" {\r\n                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\r\n            }\r\n\r\n            @else {\r\n                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); // Default\r\n            }\r\n\r\n            // Dynamic border style\r\n            @if var(--wcps-border-style) !=\"none\" {\r\n                border: var(--wcps-border-width) var(--wcps-border-style) var(--wcps-border-color);\r\n            }\r\n\r\n            overflow-x: auto; // Enable horizontal scrolling\r\n\r\n            .wcps-table-controls {\r\n                margin-bottom: 15px;\r\n                display: flex;\r\n                justify-content: space-between;\r\n                align-items: center;\r\n                flex-wrap: wrap;\r\n                gap: 10px;\r\n\r\n                .dataTables_filter {\r\n                    input {\r\n                        padding: 10px 12px;\r\n                        border: 1px solid #ddd;\r\n                        border-radius: var(--wcps-border-radius);\r\n                        outline: none;\r\n                        width: 100%;\r\n                        max-width: 250px;\r\n\r\n                        &:focus {\r\n                            border-color: var(--wcps-product-title);\r\n                            box-shadow: 0 0 0 2px rgba(var(--wcps-product-title), 0.1);\r\n                        }\r\n                    }\r\n                }\r\n\r\n                .dataTables_length {\r\n                    select {\r\n                        padding: 10px 12px;\r\n                        border: 1px solid #ddd;\r\n                        border-radius: var(--wcps-border-radius);\r\n                        margin: 0 5px;\r\n                        cursor: pointer;\r\n                    }\r\n                }\r\n            }\r\n\r\n            .wcps-table {\r\n                width: 100%;\r\n                border-collapse: separate;\r\n                border-spacing: 0;\r\n                min-width: 800px; // Ensures table doesn't compress too much\r\n                text-align: var(--wcps-text-align);\r\n\r\n                thead {\r\n                    tr {\r\n                        th {\r\n                            background-color: var(--wcps-product-title);\r\n                            color: white;\r\n                            font-weight: 600;\r\n                            padding: 14px 16px;\r\n                            text-align: left;\r\n                            border-bottom: 2px solid #ebebeb;\r\n                            position: relative;\r\n                            white-space: nowrap;\r\n\r\n                            &:first-child {\r\n                                border-top-left-radius: var(--wcps-border-radius);\r\n                            }\r\n\r\n                            &:last-child {\r\n                                border-top-right-radius: var(--wcps-border-radius);\r\n                            }\r\n\r\n                            &.sorting_asc,\r\n                            &.sorting_desc {\r\n                                &:after {\r\n                                    content: '';\r\n                                    position: absolute;\r\n                                    right: 8px;\r\n                                    top: 50%;\r\n                                    transform: translateY(-50%);\r\n                                    width: 0;\r\n                                    height: 0;\r\n                                    border-left: 5px solid transparent;\r\n                                    border-right: 5px solid transparent;\r\n                                }\r\n                            }\r\n\r\n                            &.sorting_asc:after {\r\n                                border-bottom: 5px solid white;\r\n                            }\r\n\r\n                            &.sorting_desc:after {\r\n                                border-top: 5px solid white;\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n\r\n                tbody {\r\n                    tr {\r\n                        transition: all var(--wcps-hover-transition);\r\n\r\n                        // Dynamic hover effects\r\n                        &:hover {\r\n                            @if var(--wcps-hover-effect)==\"none\" {\r\n                                // No hover effect\r\n                            }\r\n\r\n                            @else if var(--wcps-hover-effect)==\"lift\" {\r\n                                transform: translateY(-2px);\r\n                                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);\r\n                            }\r\n\r\n                            @else if var(--wcps-hover-effect)==\"shadow\" {\r\n                                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n                            }\r\n\r\n                            @else if var(--wcps-hover-effect)==\"zoom\" {\r\n                                transform: scale(1.02);\r\n                            }\r\n\r\n                            @else if var(--wcps-hover-effect)==\"glow\" {\r\n                                box-shadow: 0 0 15px rgba(var(--wcps-product-title), 0.2);\r\n                            }\r\n\r\n                            @else {\r\n                                background-color: #ebebeb;\r\n                            }\r\n                        }\r\n\r\n                        td {\r\n                            padding: 16px;\r\n                            border-bottom: 1px solid #e0e0e0;\r\n                            vertical-align: middle;\r\n\r\n                            &.wcps-product-title-col {\r\n                                min-width: 220px;\r\n                                max-width: 300px;\r\n\r\n                                a {\r\n                                    display: block;\r\n                                    color: var(--wcps-price-delete-font-color);\r\n                                    text-decoration: none;\r\n                                    font-weight: var(--wcps-title-weight);\r\n                                    font-size: var(--wcps-title-size);\r\n                                    margin-bottom: 5px;\r\n                                    transition: color 0.2s;\r\n\r\n                                    &:hover {\r\n                                        color: var(--wcps-product-title);\r\n                                    }\r\n                                }\r\n\r\n                                .wcps-product-excerpt {\r\n                                    font-size: var(--wcps-desc-size);\r\n                                    color: var(--wcps-description-color);\r\n                                    line-height: 1.5;\r\n                                    margin-top: 8px;\r\n                                    display: -webkit-box;\r\n                                    -webkit-line-clamp: 2;\r\n                                    -webkit-box-orient: vertical;\r\n                                    overflow: hidden;\r\n                                    text-overflow: ellipsis;\r\n                                }\r\n                            }\r\n\r\n                            &.wcps-product-image-col {\r\n                                width: 185px;\r\n                                text-align: center;\r\n\r\n                                img {\r\n                                    border-radius: var(--wcps-image-border-radius);\r\n                                    transition: transform 0.3s;\r\n                                    max-height: 150px;\r\n                                    width: auto;\r\n                                    max-width: 100%;\r\n\r\n                                    // Apply aspect ratio if not auto\r\n                                    @if var(--wcps-image-aspect-ratio) !=\"auto\" {\r\n                                        aspect-ratio: var(--wcps-image-aspect-ratio);\r\n                                        object-fit: cover;\r\n                                        height: 250px;\r\n                                    }\r\n\r\n                                    @else {\r\n                                        object-fit: contain; // Contain the image without cropping\r\n                                    }\r\n\r\n                                    // Image hover effects\r\n                                    @if var(--wcps-image-hover-effect)==\"zoom\" {\r\n                                        &:hover {\r\n                                            transform: scale(1.05);\r\n                                        }\r\n                                    }\r\n\r\n                                    @else if var(--wcps-image-hover-effect)==\"fade\" {\r\n                                        &:hover {\r\n                                            opacity: 0.8;\r\n                                        }\r\n                                    }\r\n\r\n                                    @else if var(--wcps-image-hover-effect)==\"blur\" {\r\n                                        &:hover {\r\n                                            filter: blur(1px);\r\n                                        }\r\n                                    }\r\n                                }\r\n                            }\r\n\r\n                            &.wcps-product-price-col {\r\n                                white-space: nowrap;\r\n\r\n                                .woocommerce-Price-amount {\r\n                                    font-weight: var(--wcps-price-font-weight);\r\n                                    color: var(--wcps-price-font-color);\r\n                                    font-size: var(--wcps-price-font-size);\r\n                                }\r\n\r\n                                del {\r\n                                    .woocommerce-Price-amount {\r\n                                        color: var(--wcps-price-delete-font-color);\r\n                                        font-weight: normal;\r\n                                        font-size: calc(var(--wcps-price-font-size) * 0.9);\r\n                                        text-decoration: line-through;\r\n                                    }\r\n                                }\r\n\r\n                                ins {\r\n                                    text-decoration: none;\r\n                                }\r\n                            }\r\n\r\n                            &.wcps-product-rating-col {\r\n                                .star-rating {\r\n                                    color: var(--wcps-star-color);\r\n                                    font-size: 0.9em;\r\n                                }\r\n                            }\r\n\r\n                            &.wcps-product-stock-col {\r\n                                white-space: nowrap;\r\n\r\n                                .wcps-in-stock {\r\n                                    color: #48A85F;\r\n                                    font-weight: 600;\r\n                                    display: flex;\r\n                                    align-items: center;\r\n\r\n                                    &:before {\r\n                                        content: \"\";\r\n                                        display: inline-block;\r\n                                        width: 8px;\r\n                                        height: 8px;\r\n                                        background-color: #48A85F;\r\n                                        border-radius: 50%;\r\n                                        margin-right: 6px;\r\n                                    }\r\n                                }\r\n\r\n                                .wcps-out-of-stock {\r\n                                    color: #E74C3C;\r\n                                    font-weight: 600;\r\n                                    display: flex;\r\n                                    align-items: center;\r\n\r\n                                    &:before {\r\n                                        content: \"\";\r\n                                        display: inline-block;\r\n                                        width: 8px;\r\n                                        height: 8px;\r\n                                        background-color: #E74C3C;\r\n                                        border-radius: 50%;\r\n                                        margin-right: 6px;\r\n                                    }\r\n                                }\r\n                            }\r\n\r\n                            &.wcps-product-actions-col {\r\n                                min-width: 170px;\r\n\r\n                                .wcps-product-actions {\r\n                                    display: flex;\r\n                                    flex-wrap: wrap;\r\n                                    gap: 8px;\r\n                                    justify-content: flex-start;\r\n\r\n                                    @if var(--wcps-text-align)==\"center\" {\r\n                                        justify-content: center;\r\n                                    }\r\n\r\n                                    @else if var(--wcps-text-align)==\"right\" {\r\n                                        justify-content: flex-end;\r\n                                    }\r\n\r\n                                    a {\r\n                                        display: inline-flex;\r\n                                        align-items: center;\r\n                                        justify-content: center;\r\n                                        padding: 8px 10px;\r\n                                        background: linear-gradient(135deg, var(--wcps-button-bg-color) 0%, rgba(var(--wcps-button-bg-color), 0.8) 100%);\r\n                                        color: var(--wcps-button-text-color);\r\n                                        font-size: 12px;\r\n                                        font-weight: 600;\r\n                                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n                                        white-space: nowrap;\r\n                                        min-width: 35px;\r\n                                        position: relative;\r\n                                        overflow: hidden;\r\n                                        border: none;\r\n                                        text-decoration: none;\r\n                                        letter-spacing: 0.5px;\r\n                                        gap: 3px;\r\n\r\n                                        // Modern button styles with enhanced effects\r\n                                        @if var(--wcps-button-style)==\"default\" {\r\n                                            border-radius: 8px;\r\n                                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);\r\n                                        }\r\n\r\n                                        @else if var(--wcps-button-style)==\"rounded\" {\r\n                                            border-radius: var(--wcps-button-border-radius);\r\n                                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);\r\n                                        }\r\n\r\n                                        @else if var(--wcps-button-style)==\"pill\" {\r\n                                            border-radius: 50px;\r\n                                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);\r\n                                        }\r\n\r\n                                        @else if var(--wcps-button-style)==\"minimal\" {\r\n                                            border-radius: 0;\r\n                                            background: transparent;\r\n                                            border-bottom: 3px solid var(--wcps-button-bg-color);\r\n                                            box-shadow: none;\r\n                                        }\r\n\r\n                                        @else {\r\n                                            border-radius: 8px;\r\n                                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);\r\n                                        }\r\n\r\n                                        // Add subtle border for better definition\r\n                                        border: 1px solid rgba(255, 255, 255, 0.2);\r\n\r\n                                        // Enhanced hover effects\r\n                                        &:hover {\r\n                                            background: linear-gradient(135deg, var(--wcps-button-hover-bg) 0%, rgba(var(--wcps-button-hover-bg), 0.9) 100%);\r\n                                            color: var(--wcps-button-hover-text-color);\r\n                                            transform: translateY(-3px);\r\n                                            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15);\r\n\r\n                                            // Button hover animations with enhanced effects\r\n                                            @if var(--wcps-button-animation)==\"scale\" {\r\n                                                transform: translateY(-3px) scale(1.05);\r\n                                            }\r\n\r\n                                            @else if var(--wcps-button-animation)==\"pulse\" {\r\n                                                animation: enhanced-pulse 1.5s infinite;\r\n                                            }\r\n\r\n                                            @else if var(--wcps-button-animation)==\"fade\" {\r\n                                                opacity: 0.95;\r\n                                                transform: translateY(-3px);\r\n                                            }\r\n\r\n                                            @else {\r\n                                                transform: translateY(-3px);\r\n                                            }\r\n\r\n                                            // Add glow effect on hover\r\n                                            &::before {\r\n                                                content: '';\r\n                                                position: absolute;\r\n                                                top: 0;\r\n                                                left: -100%;\r\n                                                width: 100%;\r\n                                                height: 100%;\r\n                                                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\r\n                                                transition: left 0.5s;\r\n                                            }\r\n\r\n                                            &:hover::before {\r\n                                                left: 100%;\r\n                                            }\r\n                                        }\r\n\r\n                                        // Active state for better feedback\r\n                                        &:active {\r\n                                            transform: translateY(-1px);\r\n                                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\r\n                                            transition: all 0.1s;\r\n                                        }\r\n\r\n                                        // Focus state for accessibility\r\n                                        &:focus {\r\n                                            outline: none;\r\n                                            box-shadow: 0 0 0 3px rgba(var(--wcps-button-bg-color), 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);\r\n                                        }\r\n\r\n                                        .wcps-icon {\r\n                                            margin-right: 6px;\r\n                                            font-size: 1.1em;\r\n                                            transition: transform 0.3s ease;\r\n                                        }\r\n\r\n                                        .wcps-text {\r\n                                            font-weight: 600;\r\n                                            text-transform: uppercase;\r\n                                            font-size: 0.8em;\r\n                                            letter-spacing: 0.5px;\r\n                                        }\r\n\r\n                                        // Specific button type enhancements\r\n                                        &.wcps-add-to-cart {\r\n                                            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);\r\n                                            color: white;\r\n                                            border-color: rgba(255, 255, 255, 0.3);\r\n\r\n                                            &:hover {\r\n                                                background: linear-gradient(135deg, #218838 0%, #1ea085 100%);\r\n                                                box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);\r\n                                            }\r\n                                        }\r\n\r\n                                        &.wcps-quickview {\r\n                                            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);\r\n                                            color: white;\r\n                                            border-color: rgba(255, 255, 255, 0.3);\r\n\r\n                                            &:hover {\r\n                                                background: linear-gradient(135deg, #0056b3 0%, #004085 100%);\r\n                                                box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);\r\n                                            }\r\n                                        }\r\n\r\n                                        &.wcps-wishlist {\r\n                                            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);\r\n                                            color: white;\r\n                                            border-color: rgba(255, 255, 255, 0.3);\r\n\r\n                                            &:hover {\r\n                                                background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%);\r\n                                                box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3);\r\n                                            }\r\n                                        }\r\n\r\n                                        &.wcps-compare {\r\n                                            background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);\r\n                                            color: #212529;\r\n                                            border-color: rgba(255, 255, 255, 0.3);\r\n\r\n                                            &:hover {\r\n                                                background: linear-gradient(135deg, #e0a800 0%, #d39e00 100%);\r\n                                                box-shadow: 0 8px 25px rgba(255, 193, 7, 0.3);\r\n                                            }\r\n                                        }\r\n                                    }\r\n\r\n                                    // Enhanced hover mode for action buttons\r\n                                    &.wcps-actions-hover {\r\n                                        a.wcps-add-to-cart {\r\n                                            @if var(--addtocart-display-mode)==\"hidden\" {\r\n                                                display: none;\r\n                                            }\r\n\r\n                                            @else if var(--addtocart-display-mode)==\"icon_only\" {\r\n                                                .wcps-text {\r\n                                                    display: none;\r\n                                                }\r\n\r\n                                                .wcps-icon {\r\n                                                    margin-right: 0;\r\n                                                }\r\n                                            }\r\n\r\n                                            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);\r\n                                            color: white;\r\n                                        }\r\n\r\n                                        a.wcps-quickview {\r\n                                            @if var(--quickview-display-mode)==\"hidden\" {\r\n                                                display: none;\r\n                                            }\r\n\r\n                                            @else if var(--quickview-display-mode)==\"icon_only\" {\r\n                                                .wcps-text {\r\n                                                    display: none;\r\n                                                }\r\n\r\n                                                .wcps-icon {\r\n                                                    margin-right: 0;\r\n                                                }\r\n                                            }\r\n                                        }\r\n\r\n                                        a.wcps-wishlist {\r\n                                            @if var(--wishlist-displaymode)==\"hidden\" {\r\n                                                display: none;\r\n                                            }\r\n\r\n                                            @else if var(--wishlist-displaymode)==\"icon_only\" {\r\n                                                .wcps-text {\r\n                                                    display: none;\r\n                                                }\r\n\r\n                                                .wcps-icon {\r\n                                                    margin-right: 0;\r\n                                                }\r\n                                            }\r\n                                        }\r\n\r\n                                        a.wcps-compare {\r\n                                            @if var(--compare-display-mode)==\"hidden\" {\r\n                                                display: none;\r\n                                            }\r\n\r\n                                            @else if var(--compare-display-mode)==\"icon_only\" {\r\n                                                .wcps-text {\r\n                                                    display: none;\r\n                                                }\r\n\r\n                                                .wcps-icon {\r\n                                                    margin-right: 0;\r\n                                                }\r\n                                            }\r\n                                        }\r\n\r\n                                        a:not(.wcps-add-to-cart) {\r\n                                            background: linear-gradient(135deg, rgba(var(--wcps-product-title), 0.1) 0%, rgba(var(--wcps-product-title), 0.05) 100%);\r\n                                            color: var(--wcps-product-title);\r\n                                            border: 1px solid rgba(var(--wcps-product-title), 0.2);\r\n                                            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\r\n\r\n                                            &:hover {\r\n                                                background: linear-gradient(135deg, var(--wcps-button-hover-bg) 0%, rgba(var(--wcps-button-hover-bg), 0.9) 100%);\r\n                                                color: var(--wcps-button-hover-text-color);\r\n                                                border-color: rgba(255, 255, 255, 0.3);\r\n                                                transform: translateY(-3px);\r\n                                                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);\r\n                                            }\r\n                                        }\r\n                                    }\r\n                                }\r\n                            }\r\n\r\n                        }\r\n\r\n                        &:last-child td {\r\n                            border-bottom: none;\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n\r\n            .dataTables_info,\r\n            .dataTables_paginate {\r\n                margin-top: 18px;\r\n                font-size: 0.9em;\r\n            }\r\n\r\n            .dataTables_paginate {\r\n                .paginate_button {\r\n                    padding: 8px 12px;\r\n                    margin: 0 3px;\r\n                    border-radius: var(--wcps-border-radius);\r\n                    cursor: pointer;\r\n                    border: 1px solid transparent;\r\n\r\n                    &.current {\r\n                        background-color: var(--wcps-product-title);\r\n                        color: white;\r\n                        border-color: var(--wcps-product-title);\r\n                    }\r\n\r\n                    &:hover:not(.current) {\r\n                        background-color: #f0f0f0;\r\n                        border-color: #ddd;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        // Responsive grid columns\r\n        .wcps-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(var(--wcps-columns, 4), minmax(0, 1fr));\r\n            gap: var(--wcps-grid-gap, 20px);\r\n            width: var(--wcps-grid-width, 100%);\r\n\r\n            @media (max-width: 992px) {\r\n                grid-template-columns: repeat(min(3, var(--wcps-columns)), 1fr);\r\n            }\r\n\r\n            @media (max-width: 768px) {\r\n                grid-template-columns: repeat(min(2, var(--wcps-columns)), 1fr);\r\n            }\r\n\r\n            @media (max-width: 480px) {\r\n                grid-template-columns: 1fr;\r\n            }\r\n        }\r\n\r\n        // Mobile optimizations with horizontal scrolling\r\n        @media (max-width: 991px) {\r\n            .wcps-table-container {\r\n\r\n                // Custom scrollbar for better UX\r\n                &::-webkit-scrollbar {\r\n                    height: 6px;\r\n                }\r\n\r\n                &::-webkit-scrollbar-track {\r\n                    background: #f1f1f1;\r\n                    border-radius: 3px;\r\n                }\r\n\r\n                &::-webkit-scrollbar-thumb {\r\n                    background: var(--wcps-product-title);\r\n                    border-radius: 3px;\r\n                }\r\n\r\n                // Table adjustments for better mobile view\r\n                .wcps-table {\r\n                    td.wcps-product-title-col {\r\n                        .wcps-product-excerpt {\r\n                            -webkit-line-clamp: 1; // Show only one line on smaller screens\r\n                        }\r\n                    }\r\n\r\n                    td.wcps-product-actions-col {\r\n                        .wcps-product-actions {\r\n                            a {\r\n                                padding: 6px 10px;\r\n\r\n                                .wcps-text {\r\n                                    display: none; // Hide text on buttons for smaller screens\r\n                                }\r\n\r\n                                .wcps-icon {\r\n                                    margin-right: 0;\r\n                                }\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        // For extremely small screens, allow vertical scrolling with fixed header\r\n        @media (max-width: 480px) {\r\n            .wcps-table-controls {\r\n                flex-direction: column;\r\n                align-items: flex-start;\r\n\r\n                .dataTables_filter,\r\n                .dataTables_length {\r\n                    width: 100%;\r\n                    margin-bottom: 10px;\r\n\r\n                    input,\r\n                    select {\r\n                        max-width: 100%;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n/* -------------- END -------------- */\r\n\r\n\r\n\r\n/* -------------- Layout Category Tabs -------------- */\r\n// Tabbed Discovery\r\n// New with smooth and staggered animations  two products effects presents - \r\n.wcps-container {\r\n    background: var(--wcps-container-background, #ffffff3b);\r\n    padding: var(--wcps-container-padding, 25px);\r\n    margin: var(--wcps-container-margin, 0px);\r\n\r\n    // Tabbed Discovery\r\n    &.wcps-layout-category_tabs {\r\n        margin: 30px 0;\r\n        position: relative;\r\n\r\n        .wcps-products-container {\r\n            background: var(--wcps-container-background, #ffffff3b);\r\n            padding: var(--wcps-container-padding, 25px);\r\n            margin: var(--wcps-container-margin, 0px);\r\n        }\r\n\r\n        .wcps-category-tabs {\r\n            background-color: var(--wcps-background);\r\n            border-radius: var(--wcps-border-radius);\r\n\r\n            // Dynamic box shadow based on the value\r\n            @if var(--wcps-box-shadow)==\"none\" {\r\n                box-shadow: none;\r\n            }\r\n\r\n            @else if var(--wcps-box-shadow)==\"light\" {\r\n                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\r\n            }\r\n\r\n            @else if var(--wcps-box-shadow)==\"medium\" {\r\n                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);\r\n            }\r\n\r\n            @else if var(--wcps-box-shadow)==\"heavy\" {\r\n                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);\r\n            }\r\n\r\n            // Dynamic border style\r\n            @if var(--wcps-border-style) !=\"none\" {\r\n                border: var(--wcps-border-width) var(--wcps-border-style) var(--wcps-border-color);\r\n            }\r\n\r\n            overflow: hidden;\r\n\r\n            // Tab Navigation\r\n            .wcps-tab-nav {\r\n                display: flex;\r\n                list-style: none;\r\n                margin: 0;\r\n                padding: 0;\r\n                border-bottom: 2px solid rgba(0, 0, 0, 0.08);\r\n                background-color: #ffffff;\r\n                position: relative;\r\n                overflow-x: auto;\r\n                -webkit-overflow-scrolling: touch;\r\n                scrollbar-width: none;\r\n\r\n                &::-webkit-scrollbar {\r\n                    display: none;\r\n                }\r\n\r\n                li {\r\n                    margin: 0;\r\n                    padding: 0;\r\n                    flex: 0 0 auto;\r\n\r\n                    .wcps-tab-link {\r\n                        display: block;\r\n                        padding: 15px 20px;\r\n                        color: var(--wcps-price-delete-font-color);\r\n                        font-weight: 600;\r\n                        text-decoration: none;\r\n                        transition: all var(--wcps-hover-transition);\r\n                        white-space: nowrap;\r\n                        position: relative;\r\n                        margin-bottom: 10px;\r\n\r\n                        &:after {\r\n                            content: '';\r\n                            position: absolute;\r\n                            bottom: -2px;\r\n                            left: 0;\r\n                            width: 100%;\r\n                            height: 2px;\r\n                            background-color: var(--wcps-product-title);\r\n                            transform: scaleX(0);\r\n                            transition: transform var(--wcps-hover-transition);\r\n                            transform-origin: center;\r\n                        }\r\n\r\n                        &:hover {\r\n                            color: var(--wcps-product-title);\r\n                        }\r\n\r\n                        &.active {\r\n                            color: #ffffff;\r\n                            background: #3582c4;\r\n\r\n                            &:after {\r\n                                transform: scaleX(1);\r\n                            }\r\n                        }\r\n\r\n                        .wcps-product-count {\r\n                            display: inline-flex;\r\n                            align-items: center;\r\n                            justify-content: center;\r\n                            min-width: 20px;\r\n                            height: 20px;\r\n                            padding: 0 6px;\r\n                            margin-left: 6px;\r\n                            font-size: 0.75em;\r\n                            font-weight: bold;\r\n                            color: #fff;\r\n                            background-color: var(--wcps-product-title);\r\n                            border-radius: 20px;\r\n                            opacity: 0.85;\r\n                            transition: opacity var(--wcps-hover-transition);\r\n                        }\r\n\r\n                        &:hover .wcps-product-count,\r\n                        &.active .wcps-product-count {\r\n                            opacity: 1;\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n\r\n            // Tab Content Area\r\n            .wcps-tab-content {\r\n                display: none;\r\n                padding: var(--wcps-product-content-padding);\r\n\r\n                &.active {\r\n                    display: block;\r\n                    animation: fadeIn 0.3s ease;\r\n                }\r\n\r\n                // Products Grid\r\n                .wcps-products-grid {\r\n                    display: grid;\r\n                    grid-template-columns: repeat(var(--wcps-columns, 4), minmax(0, 1fr));\r\n                    gap: var(--wcps-grid-gap, 20px);\r\n                    width: var(--wcps-grid-width, 100%);\r\n                    text-align: var(--wcps-text-align);\r\n\r\n                    // Dynamic columns based on the variable\r\n                    &.wcps-columns-1 {\r\n                        grid-template-columns: 1fr;\r\n                    }\r\n\r\n                    &.wcps-columns-2 {\r\n                        grid-template-columns: repeat(2, 1fr);\r\n                    }\r\n\r\n                    &.wcps-columns-3 {\r\n                        grid-template-columns: repeat(3, 1fr);\r\n                    }\r\n\r\n                    &.wcps-columns-4 {\r\n                        grid-template-columns: repeat(4, 1fr);\r\n                    }\r\n\r\n                    &.wcps-columns-5 {\r\n                        grid-template-columns: repeat(5, 1fr);\r\n                    }\r\n\r\n                    // Product Item\r\n                    .wcps-product-item {\r\n                        border-radius: var(--wcps-border-radius);\r\n                        transition: transform var(--wcps-hover-transition),\r\n                            box-shadow var(--wcps-hover-transition);\r\n\r\n                        // Dynamic hover effects\r\n                        @if var(--wcps-hover-effect)==\"lift\" {\r\n                            &:hover {\r\n                                transform: translateY(-5px);\r\n                                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\r\n                            }\r\n                        }\r\n\r\n                        @else if var(--wcps-hover-effect)==\"shadow\" {\r\n                            &:hover {\r\n                                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);\r\n                            }\r\n                        }\r\n\r\n                        @else if var(--wcps-hover-effect)==\"zoom\" {\r\n                            &:hover {\r\n                                transform: scale(1.03);\r\n                            }\r\n                        }\r\n\r\n                        @else if var(--wcps-hover-effect)==\"glow\" {\r\n                            &:hover {\r\n                                box-shadow: 0 0 15px rgba(var(--wcps-product-title), 0.4);\r\n                            }\r\n                        }\r\n\r\n                        .wcps-product {\r\n                            height: 100%;\r\n                            display: flex;\r\n                            flex-direction: column;\r\n                            background-color: #fff;\r\n                            border-radius: var(--wcps-border-radius);\r\n                            overflow: hidden;\r\n\r\n                            // Dynamic box shadow\r\n                            @if var(--wcps-box-shadow)==\"none\" {\r\n                                box-shadow: none;\r\n                            }\r\n\r\n                            @else if var(--wcps-box-shadow)==\"light\" {\r\n                                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);\r\n                            }\r\n\r\n                            @else if var(--wcps-box-shadow)==\"medium\" {\r\n                                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\r\n                            }\r\n\r\n                            @else if var(--wcps-box-shadow)==\"heavy\" {\r\n                                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);\r\n                            }\r\n\r\n                            // Dynamic border style\r\n                            @if var(--wcps-border-style) !=\"none\" {\r\n                                border: var(--wcps-border-width) var(--wcps-border-style) var(--wcps-border-color);\r\n                            }\r\n\r\n                            // Product Image Section\r\n                            .wcps-product-image {\r\n                                position: relative;\r\n                                overflow: hidden;\r\n                                border-radius: var(--wcps-image-border-radius) var(--wcps-image-border-radius) 0 0;\r\n\r\n                                a {\r\n                                    display: block;\r\n\r\n                                    img {\r\n                                        width: 100%;\r\n                                        height: auto;\r\n                                        display: block;\r\n                                        transition: transform var(--wcps-hover-transition);\r\n                                        object-fit: cover;\r\n\r\n                                        // Dynamic aspect ratio\r\n                                        @if var(--wcps-image-aspect-ratio)==\"(1,1)\" {\r\n                                            aspect-ratio: 1/1;\r\n                                        }\r\n\r\n                                        @else if var(--wcps-image-aspect-ratio)==\"(3,4)\" {\r\n                                            aspect-ratio: 3/4;\r\n                                        }\r\n\r\n                                        @else if var(--wcps-image-aspect-ratio)==\"(4,3)\" {\r\n                                            aspect-ratio: 4/3;\r\n                                        }\r\n\r\n                                        @else if var(--wcps-image-aspect-ratio)==\"(16,9)\" {\r\n                                            aspect-ratio: 16/9;\r\n                                        }\r\n                                    }\r\n\r\n                                    // Dynamic image hover effects\r\n                                    @if var(--wcps-image-hover-effect)==\"zoom\" {\r\n                                        &:hover img {\r\n                                            transform: scale(1.08);\r\n                                        }\r\n                                    }\r\n\r\n                                    @else if var(--wcps-image-hover-effect)==\"fade\" {\r\n                                        &:hover img {\r\n                                            opacity: 0.8;\r\n                                        }\r\n                                    }\r\n\r\n                                    @else if var(--wcps-image-hover-effect)==\"blur\" {\r\n                                        &:hover img {\r\n                                            filter: blur(2px);\r\n                                        }\r\n                                    }\r\n                                }\r\n\r\n\r\n                                // Product Actions (Buttons) - FIXED: Enhanced with staggered animation\r\n                                .wcps-product-actions {\r\n                                    position: absolute;\r\n                                    right: 10px;\r\n                                    bottom: 10px;\r\n                                    display: flex;\r\n                                    flex-direction: column;\r\n                                    justify-content: center;\r\n                                    gap: 8px;\r\n                                    padding: 0;\r\n                                    transform: translateY(20px) scale(0.8);\r\n                                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n                                    a {\r\n                                        position: relative;\r\n                                        display: inline-flex;\r\n                                        align-items: center;\r\n                                        justify-content: center;\r\n                                        width: 44px;\r\n                                        height: 44px;\r\n                                        border-radius: 50%;\r\n                                        background: rgba(255, 255, 255, 0.95);\r\n                                        backdrop-filter: blur(10px);\r\n                                        border: 1px solid rgba(255, 255, 255, 0.2);\r\n                                        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\r\n                                        color: #333;\r\n                                        font-size: 16px;\r\n                                        text-decoration: none;\r\n                                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n                                        overflow: visible;\r\n\r\n                                        // Icon styling\r\n                                        .wcps-btn-icon {\r\n                                            display: flex;\r\n                                            align-items: center;\r\n                                            justify-content: center;\r\n                                            z-index: 2;\r\n                                            transition: transform 0.3s ease;\r\n\r\n                                            i {\r\n                                                font-size: 16px;\r\n                                                transition: all 0.3s ease;\r\n                                            }\r\n                                        }\r\n\r\n                                        // Modern CTA tooltip\r\n                                        .wcps-btn-cta {\r\n                                            position: absolute;\r\n                                            right: calc(100% + 12px);\r\n                                            top: 50%;\r\n                                            transform: translateY(-50%) translateX(10px);\r\n                                            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n                                            color: #fff;\r\n                                            padding: 8px 12px;\r\n                                            border-radius: 8px;\r\n                                            font-size: 12px;\r\n                                            font-weight: 500;\r\n                                            white-space: nowrap;\r\n                                            opacity: 0;\r\n                                            visibility: hidden;\r\n                                            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n                                            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);\r\n                                            z-index: 100;\r\n\r\n                                            // Modern arrow with gradient\r\n                                            &::before {\r\n                                                content: '';\r\n                                                position: absolute;\r\n                                                left: 100%;\r\n                                                top: 50%;\r\n                                                transform: translateY(-50%);\r\n                                                width: 0;\r\n                                                height: 0;\r\n                                                border: 6px solid transparent;\r\n                                                border-left: 6px solid #667eea;\r\n                                                filter: drop-shadow(2px 0 2px rgba(102, 126, 234, 0.3));\r\n                                            }\r\n\r\n                                            // Subtle animation\r\n                                            &::after {\r\n                                                content: '';\r\n                                                position: absolute;\r\n                                                inset: 0;\r\n                                                border-radius: inherit;\r\n                                                background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);\r\n                                                opacity: 0;\r\n                                                transition: opacity 0.3s ease;\r\n                                            }\r\n                                        }\r\n\r\n                                        &:hover {\r\n                                            transform: translateY(-2px) scale(1.05);\r\n                                            background: #fff;\r\n                                            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);\r\n                                            border-color: rgba(102, 126, 234, 0.3);\r\n\r\n                                            .wcps-btn-icon {\r\n                                                transform: scale(1.1);\r\n\r\n                                                i {\r\n                                                    color: #667eea;\r\n                                                }\r\n                                            }\r\n\r\n                                            .wcps-btn-cta {\r\n                                                opacity: 1;\r\n                                                visibility: visible;\r\n                                                transform: translateY(-50%) translateX(0);\r\n\r\n                                                &::after {\r\n                                                    opacity: 1;\r\n                                                }\r\n                                            }\r\n                                        }\r\n\r\n                                        // Specific button styles\r\n                                        &.wcps-add-to-cart {\r\n                                            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n                                            color: #fff;\r\n                                            border-color: transparent;\r\n\r\n                                            &:hover {\r\n                                                background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);\r\n                                                color: #fff;\r\n\r\n                                                .wcps-btn-icon i {\r\n                                                    color: #fff;\r\n                                                }\r\n                                            }\r\n\r\n                                            .wcps-btn-cta {\r\n                                                background: linear-gradient(135deg, #4c51bf 0%, #553c9a 100%);\r\n\r\n                                                &::before {\r\n                                                    border-left-color: #4c51bf;\r\n                                                }\r\n                                            }\r\n                                        }\r\n\r\n                                        &.wcps-wishlist {\r\n                                            .wcps-btn-cta {\r\n                                                background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\r\n                                                box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4);\r\n\r\n                                                &::before {\r\n                                                    border-left-color: #f093fb;\r\n                                                }\r\n                                            }\r\n\r\n                                            &:hover .wcps-btn-icon i {\r\n                                                color: #f093fb;\r\n                                            }\r\n                                        }\r\n\r\n                                        &.wcps-quickview {\r\n                                            .wcps-btn-cta {\r\n                                                background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\r\n                                                box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);\r\n\r\n                                                &::before {\r\n                                                    border-left-color: #4facfe;\r\n                                                }\r\n                                            }\r\n\r\n                                            &:hover .wcps-btn-icon i {\r\n                                                color: #4facfe;\r\n                                            }\r\n                                        }\r\n\r\n                                        &.wcps-compare {\r\n                                            .wcps-btn-cta {\r\n                                                background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);\r\n                                                box-shadow: 0 4px 15px rgba(67, 233, 123, 0.4);\r\n\r\n                                                &::before {\r\n                                                    border-left-color: #43e97b;\r\n                                                }\r\n                                            }\r\n\r\n                                            &:hover .wcps-btn-icon i {\r\n                                                color: #43e97b;\r\n                                            }\r\n                                        }\r\n                                    }\r\n\r\n                                    // Staggered animation for multiple buttons\r\n                                    a:nth-child(1) {\r\n                                        transition-delay: 0.1s;\r\n                                    }\r\n\r\n                                    a:nth-child(2) {\r\n                                        transition-delay: 0.15s;\r\n                                    }\r\n\r\n                                    a:nth-child(3) {\r\n                                        transition-delay: 0.2s;\r\n                                    }\r\n\r\n                                    a:nth-child(4) {\r\n                                        transition-delay: 0.25s;\r\n                                    }\r\n                                }\r\n\r\n\r\n                                // Show actions on hover\r\n                                .wcps-product-image:hover {\r\n                                    .wcps-product-actions {\r\n                                        transform: translateY(0) scale(1);\r\n                                    }\r\n                                }\r\n\r\n                            }\r\n\r\n                            // Product Content Section\r\n                            .wcps-product-content {\r\n                                padding: 15px;\r\n                                display: flex;\r\n                                flex-direction: column;\r\n                                gap: 8px;\r\n                                flex-grow: 1;\r\n\r\n                                .wcps-product-title {\r\n                                    margin: 0 0 5px;\r\n                                    font-size: var(--wcps-title-size);\r\n                                    font-weight: var(--wcps-title-weight);\r\n                                    line-height: 1.3;\r\n\r\n                                    a {\r\n                                        color: var(--wcps-price-delete-font-color);\r\n                                        text-decoration: none;\r\n\r\n                                        &:hover {\r\n                                            color: var(--wcps-product-title);\r\n                                        }\r\n                                    }\r\n                                }\r\n\r\n                                .wcps-product-price {\r\n                                    font-weight: var(--wcps-price-font-weight);\r\n                                    font-size: var(--wcps-price-font-size);\r\n                                    margin: 8px 0;\r\n\r\n                                    .woocommerce-Price-amount {\r\n                                        color: var(--wcps-price-font-color);\r\n                                    }\r\n\r\n                                    del {\r\n                                        .woocommerce-Price-amount {\r\n                                            color: var(--wcps-price-delete-font-color);\r\n                                            font-weight: normal;\r\n                                            font-size: 0.9em;\r\n                                            text-decoration: line-through;\r\n                                        }\r\n                                    }\r\n\r\n                                    ins {\r\n                                        text-decoration: none;\r\n                                        margin-left: 5px;\r\n                                    }\r\n                                }\r\n\r\n                                .wcps-product-rating {\r\n                                    margin: 5px 0;\r\n\r\n                                    .star-rating {\r\n                                        position: relative;\r\n                                        height: 1em;\r\n                                        font-size: 0.9em;\r\n                                        width: 5.4em;\r\n\r\n                                        &:before {\r\n                                            content: \"★★★★★\";\r\n                                            color: #d3ced2;\r\n                                            float: left;\r\n                                            top: 0;\r\n                                            left: 0;\r\n                                            position: absolute;\r\n                                        }\r\n\r\n                                        span {\r\n                                            overflow: hidden;\r\n                                            float: left;\r\n                                            top: 0;\r\n                                            left: 0;\r\n                                            position: absolute;\r\n                                            padding-top: 1.5em;\r\n\r\n                                            &:before {\r\n                                                content: \"★★★★★\";\r\n                                                color: var(--wcps-star-color, #FFD700);\r\n                                                top: 0;\r\n                                                position: absolute;\r\n                                                left: 0;\r\n                                            }\r\n                                        }\r\n                                    }\r\n                                }\r\n\r\n                                .wcps-product-description {\r\n                                    font-size: var(--wcps-desc-size);\r\n                                    color: var(--wcps-description-color);\r\n                                    line-height: 1.5;\r\n                                    margin-top: auto;\r\n                                    display: -webkit-box;\r\n                                    -webkit-line-clamp: 2;\r\n                                    -webkit-box-orient: vertical;\r\n                                    overflow: hidden;\r\n                                    text-overflow: ellipsis;\r\n                                }\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        // Responsive Styles\r\n        @media (max-width: 991px) {\r\n            .wcps-category-tabs {\r\n                .wcps-products-grid {\r\n\r\n                    &.wcps-columns-3,\r\n                    &.wcps-columns-4,\r\n                    &.wcps-columns-5 {\r\n                        grid-template-columns: repeat(2, 1fr);\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        @media (max-width: 575px) {\r\n            .wcps-category-tabs {\r\n                .wcps-tab-nav {\r\n                    li .wcps-tab-link {\r\n                        padding: 12px 15px;\r\n                        font-size: 0.9em;\r\n                    }\r\n                }\r\n\r\n                .wcps-products-grid {\r\n                    grid-template-columns: 1fr !important;\r\n                    gap: 15px;\r\n\r\n                    .wcps-product-item .wcps-product {\r\n                        .wcps-product-image .wcps-product-actions {\r\n                            // On mobile, always show actions for better UX\r\n                            transform: translateY(0);\r\n\r\n                            a {\r\n                                padding: 6px 10px;\r\n                                opacity: 1; // FIXED: Ensure buttons are visible on mobile\r\n                                transform: translateY(0); // FIXED: Reset transform on mobile\r\n\r\n                                .wcps-text {\r\n                                    display: none; // Hide text to save space\r\n                                }\r\n\r\n                                .wcps-icon {\r\n                                    margin-right: 0;\r\n                                }\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n// Animation\r\n@keyframes fadeIn {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(10px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n// Pulse animation for button\r\n@keyframes pulse {\r\n    0% {\r\n        transform: scale(1);\r\n    }\r\n\r\n    50% {\r\n        transform: scale(1.05);\r\n    }\r\n\r\n    100% {\r\n        transform: scale(1);\r\n    }\r\n}\r\n\r\n\r\n/* -------------- END -------------- */\r\n\r\n\r\n\r\n/* --------------CTA Style Start -------------- */\r\n.wcps-container {\r\n    background: var(--wcps-container-background, #ffffff3b);\r\n    padding: var(--wcps-container-padding, 25px);\r\n    margin: var(--wcps-container-margin, 0px);\r\n\r\n    &.wcps-layout-cta-layout {\r\n        margin: 30px 0;\r\n        position: relative;\r\n\r\n        .wcps-products-container {\r\n            background: var(--wcps-container-background, #ffffff3b);\r\n            padding: var(--wcps-container-padding, 25px);\r\n            margin: var(--wcps-container-margin, 0px);\r\n        }\r\n\r\n        // CTA Container - Grid Layout\r\n        .wcps-cta-container {\r\n            display: grid;\r\n            // grid-template-columns: repeat(var(--wcps-columns, 1), minmax(0, 1fr));\r\n            grid-template-columns: repeat(2, minmax(0, 1fr));\r\n            gap: var(--wcps-grid-gap, 20px);\r\n            // width: var(--wcps-grid-width, 100%);\r\n            background: var(--wcps-container-background, #ffffff3b);\r\n            padding: var(--wcps-container-padding, 25px);\r\n            margin: var(--wcps-container-margin, 0px);\r\n\r\n            // Responsive grid columns\r\n            @media (max-width: 1200px) {\r\n                grid-template-columns: repeat(3, minmax(0, 1fr));\r\n            }\r\n\r\n            @media (max-width: 900px) {\r\n                grid-template-columns: repeat(2, minmax(0, 1fr));\r\n            }\r\n\r\n            @media (max-width: 600px) {\r\n                grid-template-columns: 1fr;\r\n            }\r\n\r\n            // No products message\r\n            .wcps-no-products {\r\n                grid-column: 1 / -1;\r\n                text-align: center;\r\n                padding: 40px 20px;\r\n                color: var(--wcps-no-products-color, #666);\r\n                font-size: var(--wcps-no-products-font-size, 16px);\r\n            }\r\n        }\r\n\r\n        // CTA Item\r\n        .wcps-cta-item {\r\n            border: var(--wcps-border-width, 1px) var(--wcps-border-style, solid) var(--wcps-border-color, #eee);\r\n            border-radius: var(--wcps-border-radius, 12px);\r\n            overflow: hidden;\r\n            transition: all var(--wcps-hover-transition, 0.3s) cubic-bezier(0.4, 0, 0.2, 1);\r\n            background: var(--wcps-cta-background, #fff);\r\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\r\n\r\n            &:hover {\r\n                transform: translateY(-3px);\r\n                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\r\n\r\n                .wcps-cta-actions-on-image {\r\n                    opacity: 1;\r\n                    visibility: visible;\r\n                    transform: translateY(0);\r\n                }\r\n            }\r\n        }\r\n\r\n        // CTA Inner Container\r\n        .wcps-cta-inner {\r\n            display: flex;\r\n            align-items: stretch;\r\n            min-height: var(--wcps-cta-min-height, 200px);\r\n\r\n            @media (max-width: 768px) {\r\n                flex-direction: column;\r\n            }\r\n        }\r\n\r\n        // Left Section (Image)\r\n        .wcps-cta-left {\r\n            position: relative;\r\n            flex: 0 0 var(--wcps-cta-image-width, 40%);\r\n            overflow: hidden;\r\n            background: var(--wcps-cta-image-background, #f8f9fa);\r\n\r\n            @media (max-width: 768px) {\r\n                flex: none;\r\n                height: 250px;\r\n            }\r\n\r\n            .wcps-cta-image-link {\r\n                display: block;\r\n                width: 100%;\r\n                height: 100%;\r\n                position: relative;\r\n            }\r\n\r\n            .wcps-cta-image {\r\n                width: 100%;\r\n                height: 100%;\r\n                object-fit: var(--wcps-image-object-fit, cover);\r\n                display: block;\r\n                transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n            }\r\n\r\n            &:hover .wcps-cta-image {\r\n                transform: scale(1.05);\r\n            }\r\n\r\n            // Actions on Image\r\n            .wcps-cta-actions-on-image {\r\n                position: absolute;\r\n                bottom: 15px;\r\n                left: 15px;\r\n                right: 15px;\r\n                display: flex;\r\n                justify-content: center;\r\n                gap: 10px;\r\n                opacity: 0;\r\n                visibility: hidden;\r\n                transform: translateY(20px);\r\n                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n                .wcps-product-actions {\r\n                    display: flex;\r\n                    gap: 8px;\r\n\r\n                    a {\r\n                        display: inline-flex;\r\n                        align-items: center;\r\n                        justify-content: center;\r\n                        width: 40px;\r\n                        height: 40px;\r\n                        border-radius: 50%;\r\n                        background: rgba(255, 255, 255, 0.95);\r\n                        backdrop-filter: blur(15px);\r\n                        border: 1px solid rgba(255, 255, 255, 0.3);\r\n                        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\r\n                        color: #333;\r\n                        text-decoration: none;\r\n                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n                        position: relative;\r\n\r\n                        .wcps-btn-icon {\r\n                            display: flex;\r\n                            align-items: center;\r\n                            justify-content: center;\r\n                            z-index: 2;\r\n\r\n                            i {\r\n                                font-size: 16px;\r\n                                color: #333;\r\n                                transition: all 0.3s ease;\r\n                            }\r\n                        }\r\n\r\n                        // Tooltip\r\n                        .wcps-btn-cta {\r\n                            position: absolute;\r\n                            bottom: calc(100% + 10px);\r\n                            left: 50%;\r\n                            transform: translateX(-50%) translateY(5px);\r\n                            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n                            color: #fff;\r\n                            padding: 6px 10px;\r\n                            border-radius: 6px;\r\n                            font-size: 11px;\r\n                            font-weight: 500;\r\n                            white-space: nowrap;\r\n                            opacity: 0;\r\n                            visibility: hidden;\r\n                            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n                            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);\r\n                            z-index: 100;\r\n\r\n                            &::before {\r\n                                content: '';\r\n                                position: absolute;\r\n                                top: 100%;\r\n                                left: 50%;\r\n                                transform: translateX(-50%);\r\n                                width: 0;\r\n                                height: 0;\r\n                                border: 5px solid transparent;\r\n                                border-top: 5px solid #667eea;\r\n                            }\r\n                        }\r\n\r\n                        &:hover {\r\n                            transform: translateY(-3px) scale(1.1);\r\n                            background: #fff;\r\n                            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);\r\n\r\n                            .wcps-btn-cta {\r\n                                opacity: 1;\r\n                                visibility: visible;\r\n                                transform: translateX(-50%) translateY(0);\r\n                            }\r\n\r\n                            .wcps-btn-icon i {\r\n                                color: #667eea;\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        // Right Section (Content)\r\n        .wcps-cta-right {\r\n            flex: 1;\r\n            padding: var(--wcps-cta-content-padding, 25px);\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            gap: var(--wcps-cta-content-gap, 15px);\r\n            background: var(--wcps-cta-content-background, #fff);\r\n\r\n            @media (max-width: 768px) {\r\n                padding: 20px;\r\n                gap: 12px;\r\n            }\r\n\r\n            // Product Title\r\n            .wcps-cta-title {\r\n                margin: 0;\r\n                font-size: var(--wcps-cta-title-size, 20px);\r\n                font-weight: var(--wcps-cta-title-weight, 700);\r\n                line-height: 1.3;\r\n                color: var(--wcps-cta-title-color, #333);\r\n\r\n                a {\r\n                    color: inherit;\r\n                    text-decoration: none;\r\n                    transition: color 0.3s ease;\r\n\r\n                    &:hover {\r\n                        color: var(--wcps-cta-title-hover-color, #667eea);\r\n                    }\r\n                }\r\n\r\n                @media (max-width: 768px) {\r\n                    font-size: var(--wcps-cta-title-mobile-size, 18px);\r\n                }\r\n            }\r\n\r\n            // Product Rating\r\n            .wcps-cta-rating {\r\n                display: flex;\r\n                align-items: center;\r\n                gap: 8px;\r\n\r\n                .star-rating {\r\n                    font-size: var(--wcps-cta-star-size, 16px);\r\n\r\n                    &::before {\r\n                        color: var(--wcps-star-color, #ffc107);\r\n                    }\r\n                }\r\n\r\n                .rating-count {\r\n                    font-size: var(--wcps-rating-count-size, 12px);\r\n                    color: var(--wcps-rating-count-color, #888);\r\n                }\r\n            }\r\n\r\n            // Product Price\r\n            .wcps-cta-price {\r\n                font-size: var(--wcps-cta-price-size, 24px);\r\n                font-weight: var(--wcps-cta-price-weight, 800);\r\n                color: var(--wcps-cta-price-color, #333);\r\n                display: flex;\r\n                align-items: baseline;\r\n                gap: 10px;\r\n\r\n                del {\r\n                    font-size: var(--wcps-cta-price-del-size, 18px);\r\n                    font-weight: var(--wcps-cta-price-del-weight, 500);\r\n                    color: var(--wcps-cta-price-del-color, #999);\r\n                }\r\n\r\n                .price-suffix {\r\n                    font-size: var(--wcps-price-suffix-size, 14px);\r\n                    font-weight: normal;\r\n                    color: var(--wcps-price-suffix-color, #666);\r\n                }\r\n\r\n                @media (max-width: 768px) {\r\n                    font-size: var(--wcps-cta-price-mobile-size, 20px);\r\n                }\r\n            }\r\n\r\n            // Add to Cart Section - Fixed styling\r\n            .wcps-cta-add-to-cart {\r\n                a {\r\n                    width: 70%;\r\n                    padding: 14px 20px;\r\n                    background: linear-gradient(135deg, var(--wcps-cta-button-bg, #667eea) 0%, var(--wcps-cta-button-bg-dark, #764ba2) 100%);\r\n                    color: var(--wcps-cta-button-color, #fff);\r\n                    border: none;\r\n                    border-radius: var(--wcps-cta-button-radius, 8px);\r\n                    font-size: 15px;\r\n                    font-weight: var(--wcps-cta-button-font-weight, 600);\r\n                    text-transform: var(--wcps-cta-button-text-transform, uppercase);\r\n                    letter-spacing: 0.5px;\r\n                    cursor: pointer;\r\n                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n                    text-decoration: none;\r\n                    display: inline-flex;\r\n                    align-items: center;\r\n                    justify-content: center;\r\n                    gap: 8px;\r\n\r\n                    .wcps-btn-icon {\r\n                        display: flex;\r\n                        align-items: center;\r\n                        justify-content: center;\r\n\r\n                        i {\r\n                            font-size: 16px;\r\n                            color: #fff;\r\n                            transition: transform 0.3s ease;\r\n                        }\r\n                    }\r\n\r\n                    .wcps-btn-cta {\r\n                        color: #fff;\r\n                        font-weight: inherit;\r\n                    }\r\n\r\n                    &:hover {\r\n                        background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);\r\n                        transform: translateY(-2px);\r\n                        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);\r\n\r\n                        .wcps-btn-icon i {\r\n                            transform: scale(1.2);\r\n                        }\r\n                    }\r\n\r\n                    &:active {\r\n                        transform: translateY(0);\r\n                    }\r\n\r\n                    @media (max-width: 768px) {\r\n                        padding: 12px 20px;\r\n                        font-size: 14px;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        // Sale Badge\r\n        .wcps-product-badge {\r\n            position: absolute;\r\n            top: 15px;\r\n            right: 15px;\r\n            background: linear-gradient(135deg, #ff6b6b 0%, #ff8787 100%);\r\n            color: #fff;\r\n            padding: var(--wcps-badge-padding, 6px 12px);\r\n            border-radius: var(--wcps-badge-radius, 20px);\r\n            font-size: var(--wcps-badge-font-size, 12px);\r\n            font-weight: var(--wcps-badge-font-weight, 600);\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n            box-shadow: 0 2px 10px rgba(255, 107, 107, 0.3);\r\n            z-index: 10;\r\n        }\r\n\r\n        // Responsive adjustments\r\n        @media (max-width: 480px) {\r\n            .wcps-cta-container {\r\n                gap: 15px;\r\n            }\r\n\r\n            .wcps-cta-right {\r\n                padding: 15px;\r\n                gap: 10px;\r\n            }\r\n\r\n            .wcps-cta-title {\r\n                font-size: 16px;\r\n            }\r\n\r\n            .wcps-cta-price {\r\n                font-size: 18px;\r\n            }\r\n        }\r\n    }\r\n\r\n}\r\n\r\n// END \r\n\r\n/* ----------------Flip Style 1 layout------------- */\r\n.wcps-container {\r\n    background: var(--wcps-container-background, #ffffff3b);\r\n    padding: var(--wcps-container-padding, 25px);\r\n    margin: var(--wcps-container-margin, 0px);\r\n\r\n    // Square flip box\r\n    &.wcps-layout-flip-layout {\r\n        margin: 30px 0;\r\n        position: relative;\r\n        width: 100%;\r\n\r\n        .wcps-products-container {\r\n            background: var(--wcps-container-background, #ffffff3b);\r\n            padding: var(--wcps-container-padding, 25px);\r\n            margin: var(--wcps-container-margin, 0px);\r\n        }\r\n\r\n        // CTA Container - Grid Layout\r\n        .wcps-cta-container {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, minmax(0, 1fr));\r\n            gap: var(--wcps-grid-gap, 25px);\r\n            // width: var(--wcps-grid-width, 100%);\r\n            background: var(--wcps-container-background, #ffffff3b);\r\n            padding: var(--wcps-container-padding, 25px);\r\n            margin: var(--wcps-container-margin, 0px);\r\n\r\n            // Responsive grid columns\r\n            @media (max-width: 1200px) {\r\n                grid-template-columns: repeat(3, minmax(0, 1fr));\r\n                gap: 20px;\r\n            }\r\n\r\n            @media (max-width: 900px) {\r\n                grid-template-columns: repeat(2, minmax(0, 1fr));\r\n            }\r\n\r\n            @media (max-width: 600px) {\r\n                grid-template-columns: 1fr;\r\n                gap: 20px;\r\n            }\r\n\r\n            // No products message\r\n            .wcps-no-products {\r\n                grid-column: 1 / -1;\r\n                text-align: center;\r\n                padding: 40px 20px;\r\n                color: var(--wcps-no-products-color, #666);\r\n                font-size: var(--wcps-no-products-font-size, 16px);\r\n            }\r\n        }\r\n\r\n        // CTA Item - Square Flip Box\r\n        .wcps-cta-item {\r\n            perspective: 1000px;\r\n            height: 350px;\r\n            position: relative;\r\n\r\n            @media (max-width: 768px) {\r\n                height: 320px;\r\n            }\r\n\r\n            @media (max-width: 600px) {\r\n                height: 300px;\r\n            }\r\n\r\n            @media (max-width: 480px) {\r\n                height: 280px;\r\n            }\r\n\r\n            @media (max-width: 360px) {\r\n                height: 260px;\r\n            }\r\n        }\r\n\r\n        // Flip Box Inner\r\n        .wcps-cta-inner {\r\n            position: relative;\r\n            width: 100%;\r\n            height: 100%;\r\n            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n            transform-style: preserve-3d;\r\n            border-radius: var(--wcps-border-radius, 20px);\r\n            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\r\n\r\n            &:hover {\r\n                transform: rotateY(180deg);\r\n            }\r\n        }\r\n\r\n        // Front Face (Image)\r\n        .wcps-cta-left {\r\n            position: absolute;\r\n            width: 100%;\r\n            height: 100%;\r\n            backface-visibility: hidden;\r\n            border-radius: var(--wcps-border-radius, 20px);\r\n            overflow: hidden;\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n\r\n            .wcps-cta-image-link {\r\n                display: block;\r\n                width: 100%;\r\n                height: 100%;\r\n                position: relative;\r\n            }\r\n\r\n            .wcps-cta-image {\r\n                width: 100%;\r\n                height: 100%;\r\n                object-fit: cover;\r\n                display: block;\r\n                transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n                filter: brightness(0.95) contrast(1.1);\r\n            }\r\n\r\n            // Overlay for better text visibility\r\n            &::before {\r\n                content: '';\r\n                position: absolute;\r\n                top: 0;\r\n                left: 0;\r\n                right: 0;\r\n                bottom: 0;\r\n                background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);\r\n                z-index: 1;\r\n            }\r\n\r\n            // Front content overlay\r\n            .wcps-cta-front-content {\r\n                position: absolute;\r\n                bottom: 0;\r\n                left: 0;\r\n                right: 0;\r\n                padding: 25px;\r\n                background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);\r\n                color: #fff;\r\n                z-index: 2;\r\n\r\n                .wcps-cta-title {\r\n                    margin: 0 0 8px 0;\r\n                    font-size: 20px;\r\n                    font-weight: 800;\r\n                    line-height: 1.2;\r\n                    color: #fff;\r\n                    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);\r\n\r\n                    @media (max-width: 768px) {\r\n                        font-size: 18px;\r\n                    }\r\n                }\r\n\r\n                .wcps-cta-price {\r\n                    font-size: 24px;\r\n                    font-weight: 900;\r\n                    color: #fff;\r\n                    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);\r\n\r\n                    @media (max-width: 768px) {\r\n                        font-size: 20px;\r\n                    }\r\n                }\r\n            }\r\n\r\n            // Flip indicator\r\n            .wcps-flip-indicator {\r\n                position: absolute;\r\n                top: 20px;\r\n                right: 20px;\r\n                width: 40px;\r\n                height: 40px;\r\n                background: rgba(255, 255, 255, 0.2);\r\n                backdrop-filter: blur(10px);\r\n                border-radius: 50%;\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n                color: #fff;\r\n                font-size: 18px;\r\n                z-index: 3;\r\n                animation: bounce 2s infinite;\r\n\r\n                @media (max-width: 768px) {\r\n                    width: 35px;\r\n                    height: 35px;\r\n                    font-size: 16px;\r\n                }\r\n            }\r\n\r\n            @keyframes bounce {\r\n\r\n                0%,\r\n                20%,\r\n                50%,\r\n                80%,\r\n                100% {\r\n                    transform: translateY(0);\r\n                }\r\n\r\n                40% {\r\n                    transform: translateY(-10px);\r\n                }\r\n\r\n                60% {\r\n                    transform: translateY(-5px);\r\n                }\r\n            }\r\n        }\r\n\r\n        // Back Face (Content)\r\n        .wcps-cta-right {\r\n            position: absolute;\r\n            width: 100%;\r\n            height: 100%;\r\n            backface-visibility: hidden;\r\n            transform: rotateY(180deg);\r\n            border-radius: var(--wcps-border-radius, 20px);\r\n            background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);\r\n            padding: 30px;\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            align-items: center;\r\n            text-align: center;\r\n            gap: 20px;\r\n            border: 1px solid #e2e8f0;\r\n            z-index: 10;\r\n            pointer-events: auto;\r\n\r\n            @media (max-width: 768px) {\r\n                padding: 25px;\r\n                gap: 15px;\r\n            }\r\n\r\n            @media (max-width: 480px) {\r\n                padding: 20px;\r\n                gap: 12px;\r\n            }\r\n\r\n            .wcps-cta-title a {\r\n                margin: 0;\r\n                font-size: 22px;\r\n                font-weight: 800;\r\n                line-height: 1.3;\r\n                color: #1e293b;\r\n                background: linear-gradient(135deg, #1e293b 0%, #667eea 100%);\r\n                -webkit-background-clip: text;\r\n                -webkit-text-fill-color: transparent;\r\n                background-clip: text;\r\n\r\n                @media (max-width: 768px) {\r\n                    font-size: 19px;\r\n                }\r\n\r\n            }\r\n\r\n            .wcps-cta-rating {\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n                gap: 8px;\r\n\r\n                .star-rating {\r\n                    font-size: 18px;\r\n                    color: #fbbf24;\r\n                }\r\n\r\n                .rating-count {\r\n                    font-size: 14px;\r\n                    color: #64748b;\r\n                    font-weight: 500;\r\n                }\r\n            }\r\n\r\n            .wcps-cta-price {\r\n                font-size: 28px;\r\n                font-weight: 900;\r\n                color: #1e293b;\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n                gap: 10px;\r\n                flex-wrap: wrap;\r\n\r\n                del {\r\n                    font-size: 20px;\r\n                    font-weight: 600;\r\n                    color: #94a3b8;\r\n                }\r\n\r\n                @media (max-width: 768px) {\r\n                    font-size: 24px;\r\n                }\r\n            }\r\n\r\n            // Back Actions\r\n            .wcps-cta-actions {\r\n                display: flex;\r\n                gap: 12px;\r\n                width: 100%;\r\n                justify-content: center;\r\n                flex-wrap: wrap;\r\n\r\n                .wcps-product-actions {\r\n                    display: flex;\r\n                    gap: 8px;\r\n\r\n                    a {\r\n                        display: inline-flex;\r\n                        align-items: center;\r\n                        justify-content: center;\r\n                        width: 50px;\r\n                        height: 50px;\r\n                        border-radius: 15px;\r\n                        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);\r\n                        border: 2px solid #e2e8f0;\r\n                        color: #475569;\r\n                        text-decoration: none;\r\n                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n                        position: relative;\r\n                        z-index: 15;\r\n                        pointer-events: auto;\r\n\r\n                        &:hover {\r\n                            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n                            border-color: #667eea;\r\n                            color: #fff;\r\n                            transform: translateY(-3px);\r\n                            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);\r\n                        }\r\n\r\n                        .wcps-btn-icon i {\r\n                            font-size: 18px;\r\n\r\n                            @media (max-width: 768px) {\r\n                                font-size: 16px;\r\n                            }\r\n\r\n                            @media (max-width: 480px) {\r\n                                font-size: 15px;\r\n                            }\r\n                        }\r\n\r\n                        @media (max-width: 768px) {\r\n                            width: 45px;\r\n                            height: 45px;\r\n                            border-radius: 12px;\r\n                        }\r\n\r\n                        @media (max-width: 480px) {\r\n                            width: 40px;\r\n                            height: 40px;\r\n                            border-radius: 10px;\r\n                        }\r\n                    }\r\n                }\r\n\r\n                @media (max-width: 480px) {\r\n                    gap: 8px;\r\n                }\r\n            }\r\n\r\n            .wcps-cta-add-to-cart {\r\n                width: 100%;\r\n\r\n                a {\r\n                    width: 100%;\r\n                    padding: 16px 24px;\r\n                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n                    color: #fff;\r\n                    border: none;\r\n                    border-radius: 15px;\r\n                    font-size: 16px;\r\n                    font-weight: 700;\r\n                    text-transform: uppercase;\r\n                    letter-spacing: 1px;\r\n                    cursor: pointer;\r\n                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n                    text-decoration: none;\r\n                    display: inline-flex;\r\n                    align-items: center;\r\n                    justify-content: center;\r\n                    gap: 10px;\r\n                    position: relative;\r\n                    overflow: hidden;\r\n                    z-index: 20;\r\n                    pointer-events: auto;\r\n\r\n                    &::before {\r\n                        content: '';\r\n                        position: absolute;\r\n                        top: 0;\r\n                        left: -100%;\r\n                        width: 100%;\r\n                        height: 100%;\r\n                        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\r\n                        transition: left 0.6s;\r\n                    }\r\n\r\n                    &:hover::before {\r\n                        left: 100%;\r\n                    }\r\n\r\n                    &:hover {\r\n                        background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);\r\n                        transform: translateY(-3px);\r\n                        box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);\r\n                    }\r\n\r\n                    @media (max-width: 768px) {\r\n                        padding: 14px 20px;\r\n                        font-size: 15px;\r\n                        letter-spacing: 0.8px;\r\n                    }\r\n\r\n                    @media (max-width: 600px) {\r\n                        padding: 12px 18px;\r\n                        font-size: 14px;\r\n                        letter-spacing: 0.6px;\r\n                    }\r\n\r\n                    @media (max-width: 480px) {\r\n                        padding: 10px 16px;\r\n                        font-size: 13px;\r\n                        letter-spacing: 0.5px;\r\n                        border-radius: 12px;\r\n                    }\r\n\r\n                    @media (max-width: 360px) {\r\n                        padding: 8px 14px;\r\n                        font-size: 12px;\r\n                        letter-spacing: 0.4px;\r\n                        border-radius: 10px;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        // Enhanced Sale Badge for flip box\r\n        .wcps-product-badge {\r\n            position: absolute;\r\n            top: 20px;\r\n            left: 20px;\r\n            background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);\r\n            color: #fff;\r\n            padding: 8px 16px;\r\n            border-radius: 25px;\r\n            font-size: 12px;\r\n            font-weight: 700;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.8px;\r\n            box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);\r\n            z-index: 10;\r\n            animation: glow 2s ease-in-out infinite alternate;\r\n\r\n            @keyframes glow {\r\n                from {\r\n                    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);\r\n                }\r\n\r\n                to {\r\n                    box-shadow: 0 6px 25px rgba(239, 68, 68, 0.6);\r\n                }\r\n            }\r\n        }\r\n\r\n        // Responsive adjustments\r\n        @media (max-width: 480px) {\r\n            .wcps-cta-container {\r\n                gap: 15px;\r\n            }\r\n\r\n            .wcps-cta-item {\r\n                height: 280px;\r\n            }\r\n\r\n            .wcps-cta-left .wcps-cta-front-content {\r\n                padding: 20px;\r\n            }\r\n\r\n            .wcps-cta-right {\r\n                padding: 20px;\r\n                gap: 12px;\r\n            }\r\n        }\r\n    }\r\n\r\n    // Vertical Flip layout \r\n    &.wcps-layout-flip-layout-2 {\r\n        margin: 30px 0;\r\n        position: relative;\r\n\r\n        // CTA Container - Grid Layout\r\n        .wcps-cta-container {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, minmax(0, 1fr));\r\n            gap: var(--wcps-grid-gap, 25px);\r\n            // width: var(--wcps-grid-width, 100%);\r\n            padding: 20px;\r\n\r\n            // Responsive grid columns\r\n            @media (max-width: 1200px) {\r\n                grid-template-columns: repeat(3, minmax(0, 1fr));\r\n                gap: 20px;\r\n            }\r\n\r\n            @media (max-width: 900px) {\r\n                grid-template-columns: repeat(2, minmax(0, 1fr));\r\n            }\r\n\r\n            @media (max-width: 600px) {\r\n                grid-template-columns: 1fr;\r\n                gap: 20px;\r\n            }\r\n\r\n            // No products message\r\n            .wcps-no-products {\r\n                grid-column: 1 / -1;\r\n                text-align: center;\r\n                padding: 40px 20px;\r\n                color: var(--wcps-no-products-color, #666);\r\n                font-size: var(--wcps-no-products-font-size, 16px);\r\n            }\r\n        }\r\n\r\n        // CTA Item - Vertical Flip Box\r\n        .wcps-cta-item {\r\n            perspective: 1000px;\r\n            height: 350px;\r\n            position: relative;\r\n\r\n            @media (max-width: 768px) {\r\n                height: 320px;\r\n            }\r\n\r\n            @media (max-width: 600px) {\r\n                height: 300px;\r\n            }\r\n\r\n            @media (max-width: 480px) {\r\n                height: 280px;\r\n            }\r\n\r\n            @media (max-width: 360px) {\r\n                height: 260px;\r\n            }\r\n        }\r\n\r\n        // Vertical Flip Box Inner\r\n        .wcps-cta-inner {\r\n            position: relative;\r\n            width: 100%;\r\n            height: 100%;\r\n            transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n            transform-style: preserve-3d;\r\n            border-radius: var(--wcps-border-radius, 20px);\r\n            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);\r\n\r\n            &:hover {\r\n                transform: rotateX(-180deg);\r\n            }\r\n        }\r\n\r\n        // Front Face (Image) - Vertical\r\n        .wcps-cta-left {\r\n            position: absolute;\r\n            width: 100%;\r\n            height: 100%;\r\n            backface-visibility: hidden;\r\n            border-radius: var(--wcps-border-radius, 20px);\r\n            overflow: hidden;\r\n            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\r\n\r\n            .wcps-cta-image-link {\r\n                display: block;\r\n                width: 100%;\r\n                height: 100%;\r\n                position: relative;\r\n            }\r\n\r\n            .wcps-cta-image {\r\n                width: 100%;\r\n                height: 100%;\r\n                object-fit: cover;\r\n                display: block;\r\n                transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n                filter: brightness(0.9) contrast(1.15);\r\n            }\r\n\r\n            // Overlay for better text visibility\r\n            &::before {\r\n                content: '';\r\n                position: absolute;\r\n                top: 0;\r\n                left: 0;\r\n                right: 0;\r\n                bottom: 0;\r\n                background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(139, 92, 246, 0.25) 100%);\r\n                z-index: 1;\r\n            }\r\n\r\n            // Front content overlay\r\n            .wcps-cta-front-content {\r\n                position: absolute;\r\n                bottom: 0;\r\n                left: 0;\r\n                right: 0;\r\n                padding: 25px;\r\n                background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);\r\n                color: #fff;\r\n                z-index: 2;\r\n\r\n                .wcps-cta-title {\r\n                    margin: 0 0 8px 0;\r\n                    font-size: 20px;\r\n                    font-weight: 800;\r\n                    line-height: 1.2;\r\n                    color: #fff;\r\n                    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);\r\n\r\n                    @media (max-width: 768px) {\r\n                        font-size: 18px;\r\n                    }\r\n                }\r\n\r\n                .wcps-cta-price {\r\n                    font-size: 24px;\r\n                    font-weight: 900;\r\n                    color: #fff;\r\n                    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);\r\n\r\n                    @media (max-width: 768px) {\r\n                        font-size: 20px;\r\n                    }\r\n                }\r\n            }\r\n\r\n            // Vertical flip indicator\r\n            .wcps-flip-indicator {\r\n                position: absolute;\r\n                top: 20px;\r\n                right: 20px;\r\n                width: 40px;\r\n                height: 40px;\r\n                background: rgba(255, 255, 255, 0.25);\r\n                backdrop-filter: blur(15px);\r\n                border-radius: 50%;\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n                color: #fff;\r\n                font-size: 18px;\r\n                z-index: 3;\r\n                animation: verticalBounce 2.5s infinite;\r\n\r\n                @media (max-width: 768px) {\r\n                    width: 35px;\r\n                    height: 35px;\r\n                    font-size: 16px;\r\n                }\r\n            }\r\n\r\n            @keyframes verticalBounce {\r\n\r\n                0%,\r\n                20%,\r\n                50%,\r\n                80%,\r\n                100% {\r\n                    transform: translateX(0);\r\n                }\r\n\r\n                40% {\r\n                    transform: translateX(-8px);\r\n                }\r\n\r\n                60% {\r\n                    transform: translateX(-4px);\r\n                }\r\n            }\r\n        }\r\n\r\n        // Back Face (Content) - Vertical\r\n        .wcps-cta-right {\r\n            position: absolute;\r\n            width: 100%;\r\n            height: 100%;\r\n            backface-visibility: hidden;\r\n            transform: rotateX(180deg);\r\n            border-radius: var(--wcps-border-radius, 20px);\r\n            background: linear-gradient(135deg, #fff 0%, #f1f5f9 100%);\r\n            padding: 30px;\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            align-items: center;\r\n            text-align: center;\r\n            gap: 20px;\r\n            border: 1px solid #e2e8f0;\r\n            z-index: 10;\r\n            pointer-events: auto;\r\n\r\n            @media (max-width: 768px) {\r\n                padding: 25px;\r\n                gap: 15px;\r\n            }\r\n\r\n            @media (max-width: 480px) {\r\n                padding: 20px;\r\n                gap: 12px;\r\n            }\r\n\r\n            .wcps-cta-title {\r\n                margin: 0;\r\n                font-size: 22px;\r\n                font-weight: 800;\r\n                line-height: 1.3;\r\n                color: #1e293b;\r\n                background: linear-gradient(135deg, #1e293b 0%, #6366f1 100%);\r\n                -webkit-background-clip: text;\r\n                -webkit-text-fill-color: transparent;\r\n                background-clip: text;\r\n\r\n                @media (max-width: 768px) {\r\n                    font-size: 19px;\r\n                }\r\n            }\r\n\r\n            .wcps-cta-rating {\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n                gap: 8px;\r\n\r\n                .star-rating {\r\n                    font-size: 18px;\r\n                    color: #fbbf24;\r\n                }\r\n\r\n                .rating-count {\r\n                    font-size: 14px;\r\n                    color: #64748b;\r\n                    font-weight: 500;\r\n                }\r\n            }\r\n\r\n            .wcps-cta-price {\r\n                font-size: 28px;\r\n                font-weight: 900;\r\n                color: #1e293b;\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n                gap: 10px;\r\n                flex-wrap: wrap;\r\n\r\n                del {\r\n                    font-size: 20px;\r\n                    font-weight: 600;\r\n                    color: #94a3b8;\r\n                }\r\n\r\n                @media (max-width: 768px) {\r\n                    font-size: 24px;\r\n                }\r\n            }\r\n\r\n            // Back Actions\r\n            .wcps-cta-actions {\r\n                display: flex;\r\n                gap: 12px;\r\n                width: 100%;\r\n                justify-content: center;\r\n                flex-wrap: wrap;\r\n\r\n                .wcps-product-actions {\r\n                    display: flex;\r\n                    gap: 8px;\r\n\r\n                    a {\r\n                        display: inline-flex;\r\n                        align-items: center;\r\n                        justify-content: center;\r\n                        width: 50px;\r\n                        height: 50px;\r\n                        border-radius: 15px;\r\n                        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);\r\n                        border: 2px solid #e2e8f0;\r\n                        color: #475569;\r\n                        text-decoration: none;\r\n                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n                        position: relative;\r\n                        z-index: 15;\r\n                        pointer-events: auto;\r\n\r\n                        &:hover {\r\n                            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\r\n                            border-color: #6366f1;\r\n                            color: #fff;\r\n                            transform: translateY(-3px);\r\n                            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);\r\n                        }\r\n\r\n                        .wcps-btn-icon i {\r\n                            font-size: 18px;\r\n\r\n                            @media (max-width: 768px) {\r\n                                font-size: 16px;\r\n                            }\r\n\r\n                            @media (max-width: 480px) {\r\n                                font-size: 15px;\r\n                            }\r\n                        }\r\n\r\n                        @media (max-width: 768px) {\r\n                            width: 45px;\r\n                            height: 45px;\r\n                            border-radius: 12px;\r\n                        }\r\n\r\n                        @media (max-width: 480px) {\r\n                            width: 40px;\r\n                            height: 40px;\r\n                            border-radius: 10px;\r\n                        }\r\n                    }\r\n                }\r\n\r\n                @media (max-width: 480px) {\r\n                    gap: 8px;\r\n                }\r\n            }\r\n\r\n            .wcps-cta-add-to-cart {\r\n                width: 100%;\r\n\r\n                a {\r\n                    width: 100%;\r\n                    padding: 16px 24px;\r\n                    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\r\n                    color: #fff;\r\n                    border: none;\r\n                    border-radius: 15px;\r\n                    font-size: 16px;\r\n                    font-weight: 700;\r\n                    text-transform: uppercase;\r\n                    letter-spacing: 1px;\r\n                    cursor: pointer;\r\n                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n                    text-decoration: none;\r\n                    display: inline-flex;\r\n                    align-items: center;\r\n                    justify-content: center;\r\n                    gap: 10px;\r\n                    position: relative;\r\n                    overflow: hidden;\r\n                    z-index: 20;\r\n                    pointer-events: auto;\r\n\r\n                    &::before {\r\n                        content: '';\r\n                        position: absolute;\r\n                        top: 0;\r\n                        left: -100%;\r\n                        width: 100%;\r\n                        height: 100%;\r\n                        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\r\n                        transition: left 0.6s;\r\n                    }\r\n\r\n                    &:hover::before {\r\n                        left: 100%;\r\n                    }\r\n\r\n                    &:hover {\r\n                        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);\r\n                        transform: translateY(-3px);\r\n                        box-shadow: 0 12px 35px rgba(99, 102, 241, 0.4);\r\n                    }\r\n\r\n                    @media (max-width: 768px) {\r\n                        padding: 14px 20px;\r\n                        font-size: 15px;\r\n                        letter-spacing: 0.8px;\r\n                    }\r\n\r\n                    @media (max-width: 600px) {\r\n                        padding: 12px 18px;\r\n                        font-size: 14px;\r\n                        letter-spacing: 0.6px;\r\n                    }\r\n\r\n                    @media (max-width: 480px) {\r\n                        padding: 10px 16px;\r\n                        font-size: 13px;\r\n                        letter-spacing: 0.5px;\r\n                        border-radius: 12px;\r\n                    }\r\n\r\n                    @media (max-width: 360px) {\r\n                        padding: 8px 14px;\r\n                        font-size: 12px;\r\n                        letter-spacing: 0.4px;\r\n                        border-radius: 10px;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        // Enhanced Sale Badge for vertical flip box\r\n        .wcps-product-badge {\r\n            position: absolute;\r\n            top: 20px;\r\n            left: 20px;\r\n            background: linear-gradient(135deg, #dc2626 0%, #ea580c 100%);\r\n            color: #fff;\r\n            padding: 8px 16px;\r\n            border-radius: 25px;\r\n            font-size: 12px;\r\n            font-weight: 700;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.8px;\r\n            box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);\r\n            z-index: 10;\r\n            animation: pulseGlow 2s ease-in-out infinite alternate;\r\n\r\n            @keyframes pulseGlow {\r\n                from {\r\n                    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);\r\n                    transform: scale(1);\r\n                }\r\n\r\n                to {\r\n                    box-shadow: 0 6px 25px rgba(220, 38, 38, 0.6);\r\n                    transform: scale(1.05);\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n/* ----------------List Style layout------------- */\r\n.wcps-container {\r\n    background: var(--wcps-container-background, #ffffff3b);\r\n    padding: var(--wcps-container-padding, 25px);\r\n    margin: var(--wcps-container-margin, 0px);\r\n\r\n    &.wcps-layout-list-layout {\r\n        margin: 30px 0;\r\n        position: relative;\r\n\r\n        .wcps-products-container {\r\n            background: var(--wcps-container-background, #ffffff3b);\r\n            padding: var(--wcps-container-padding, 25px);\r\n            margin: var(--wcps-container-margin, 0px);\r\n        }\r\n\r\n        // List Container with Grid\r\n        .wcps-list-products {\r\n            display: grid;\r\n            // grid-template-columns: repeat(var(--wcps-columns, 1), minmax(0, 1fr));\r\n            grid-template-columns: repeat(2, minmax(0, 1fr));\r\n            gap: var(--wcps-grid-gap, 20px);\r\n            width: var(--wcps-grid-width, 100%);\r\n            padding: var(--wcps-container-padding, 25px);\r\n\r\n            // Responsive grid adjustments\r\n            @media (max-width: 1024px) {\r\n                grid-template-columns: repeat(1, 1fr);\r\n            }\r\n\r\n            @media (max-width: 768px) {\r\n                grid-template-columns: repeat(1, 1fr);\r\n                gap: 15px;\r\n            }\r\n\r\n            @media (max-width: 480px) {\r\n                grid-template-columns: repeat(1, 1fr);\r\n                gap: 12px;\r\n            }\r\n        }\r\n\r\n        // List Item with Glassmorphism\r\n        .wcps-list-item {\r\n            background: rgba(255, 255, 255, 0.25);\r\n            backdrop-filter: blur(10px);\r\n            -webkit-backdrop-filter: blur(10px);\r\n            border: 1px solid rgba(255, 255, 255, 0.18);\r\n            border-radius: var(--wcps-border-radius, 16px);\r\n            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);\r\n            transition: all var(--wcps-hover-transition, 0.3s) ease;\r\n            border-radius: 10px;\r\n            overflow: hidden;\r\n            position: relative;\r\n\r\n            // Glass overlay effect\r\n            &::before {\r\n                content: '';\r\n                position: absolute;\r\n                top: 0;\r\n                left: 0;\r\n                right: 0;\r\n                height: 1px;\r\n                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);\r\n                z-index: 1;\r\n            }\r\n\r\n            &:hover {\r\n                transform: translateY(-2px);\r\n                box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.5);\r\n                background: rgba(255, 255, 255, 0.35);\r\n                border-color: rgba(255, 255, 255, 0.3);\r\n            }\r\n        }\r\n\r\n        // Inner container for list layout\r\n        .wcps-list-inner {\r\n            display: flex;\r\n            align-items: center;\r\n            padding: var(--wcps-product-content-padding, 20px);\r\n            gap: 20px;\r\n            position: relative;\r\n            z-index: 2;\r\n            height: 280px;\r\n\r\n            // Responsive layout adjustments\r\n            @media (max-width: 768px) {\r\n                flex-direction: column;\r\n                text-align: center;\r\n                gap: 15px;\r\n                padding: 15px;\r\n            }\r\n\r\n            @media (max-width: 480px) {\r\n                padding: 12px;\r\n                gap: 12px;\r\n            }\r\n        }\r\n\r\n        // Left section - Image with actions\r\n        .wcps-list-left {\r\n            flex-shrink: 0;\r\n            position: relative;\r\n            width: var(--wcps-list-image-width, 120px);\r\n            // height: var(--wcps-list-image-height, 120px);\r\n\r\n            width: 125px;\r\n            height: 90%;\r\n\r\n            @media (max-width: 768px) {\r\n                width: 100px;\r\n                height: 100px;\r\n            }\r\n\r\n            @media (max-width: 480px) {\r\n                width: 80px;\r\n                height: 80px;\r\n            }\r\n\r\n            .wcps-list-image-link {\r\n                display: block;\r\n                width: 100%;\r\n                height: 100%;\r\n                border-radius: var(--wcps-image-border-radius, 12px);\r\n                overflow: hidden;\r\n                background: rgba(255, 255, 255, 0.1);\r\n                backdrop-filter: blur(5px);\r\n                border: 1px solid rgba(255, 255, 255, 0.2);\r\n\r\n                img.wcps-list-image {\r\n                    width: 100%;\r\n                    height: 100%;\r\n                    object-fit: cover;\r\n                    transition: transform 0.4s ease;\r\n                    border-radius: inherit;\r\n                }\r\n\r\n                &:hover img.wcps-list-image {\r\n                    transform: scale(1.05);\r\n                }\r\n            }\r\n\r\n            // Actions overlay on image\r\n            .wcps-list-actions-on-image {\r\n                position: absolute;\r\n                top: 8px;\r\n                right: 8px;\r\n                display: flex;\r\n                flex-direction: column;\r\n                gap: 6px;\r\n                opacity: 0;\r\n                visibility: hidden;\r\n                transform: translateX(10px);\r\n                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n\r\n\r\n\r\n                a {\r\n                    display: flex;\r\n                    align-items: center;\r\n                    justify-content: center;\r\n                    width: 30px;\r\n                    height: 30px;\r\n                    border-radius: 50%;\r\n                    background: rgba(255, 255, 255, 0.9);\r\n                    backdrop-filter: blur(10px);\r\n                    border: 1px solid rgba(255, 255, 255, 0.3);\r\n                    color: #333;\r\n                    font-size: 14px;\r\n                    text-decoration: none;\r\n                    transition: all 0.3s ease;\r\n                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\r\n                    margin: 5px;\r\n\r\n                    &:hover {\r\n                        background: rgba(102, 126, 234, 0.9);\r\n                        color: #fff;\r\n                        transform: scale(1.1);\r\n                        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);\r\n                    }\r\n\r\n                    // Add CTA style on hover for list layout\r\n                    .wcps-btn-cta {\r\n                        position: absolute;\r\n                        right: calc(100% + 12px);\r\n                        top: 50%;\r\n                        transform: translateY(-50%) translateX(10px);\r\n                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n                        color: #fff;\r\n                        padding: 8px 12px;\r\n                        border-radius: 8px;\r\n                        font-size: 12px;\r\n                        font-weight: 500;\r\n                        white-space: nowrap;\r\n                        opacity: 0;\r\n                        visibility: hidden;\r\n                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n                        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);\r\n                        z-index: 100;\r\n\r\n                        // Modern arrow with gradient\r\n                        &::before {\r\n                            content: '';\r\n                            position: absolute;\r\n                            left: 100%;\r\n                            top: 50%;\r\n                            transform: translateY(-50%);\r\n                            width: 0;\r\n                            height: 0;\r\n                            border: 6px solid transparent;\r\n                            border-left: 6px solid #667eea;\r\n                            filter: drop-shadow(2px 0 2px rgba(102, 126, 234, 0.3));\r\n                        }\r\n\r\n                        // Subtle animation\r\n                        &::after {\r\n                            content: '';\r\n                            position: absolute;\r\n                            inset: 0;\r\n                            border-radius: inherit;\r\n                            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);\r\n                            opacity: 0;\r\n                            transition: opacity 0.3s ease;\r\n                        }\r\n                    }\r\n\r\n                    &:hover {\r\n                        transform: translateY(-2px) scale(1.05);\r\n                        background: #fff;\r\n                        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);\r\n                        border-color: rgba(102, 126, 234, 0.3);\r\n\r\n                        .wcps-btn-icon {\r\n                            transform: scale(1.1);\r\n\r\n                            i {\r\n                                color: #667eea;\r\n                            }\r\n                        }\r\n\r\n                        .wcps-btn-cta {\r\n                            opacity: 1;\r\n                            visibility: visible;\r\n                            transform: translateY(-50%) translateX(0);\r\n\r\n                            &::after {\r\n                                opacity: 1;\r\n                            }\r\n                        }\r\n                    }\r\n\r\n                    // END \r\n\r\n\r\n                }\r\n            }\r\n\r\n            &:hover .wcps-list-actions-on-image {\r\n                opacity: 1;\r\n                visibility: visible;\r\n                transform: translateX(0);\r\n            }\r\n        }\r\n\r\n        // Middle section - Title, description, price\r\n        .wcps-list-middle {\r\n            flex-grow: 1;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 8px;\r\n            min-width: 0;\r\n\r\n            @media (max-width: 768px) {\r\n                align-items: center;\r\n            }\r\n\r\n            .wcps-list-title {\r\n                margin: 0;\r\n                font-size: var(--wcps-title-size, 18px);\r\n                font-weight: var(--wcps-title-weight, 600);\r\n                line-height: 1.3;\r\n\r\n                a {\r\n                    color: var(--wcps-product-title, #333);\r\n                    text-decoration: none;\r\n                    transition: color 0.3s ease;\r\n\r\n                    &:hover {\r\n                        color: var(--wcps-product-title-hover-color, #667eea);\r\n                    }\r\n                }\r\n\r\n                @media (max-width: 480px) {\r\n                    font-size: 16px;\r\n                }\r\n            }\r\n\r\n            .wcps-list-desc-price {\r\n                display: flex;\r\n                flex-direction: column;\r\n                gap: 8px;\r\n\r\n                .wcps-list-desc {\r\n                    font-size: var(--wcps-desc-size, 14px);\r\n                    color: var(--wcps-description-color, #666);\r\n                    line-height: 1.4;\r\n                    overflow: hidden;\r\n                    text-overflow: ellipsis;\r\n                    display: -webkit-box;\r\n                    -webkit-line-clamp: 2;\r\n                    -webkit-box-orient: vertical;\r\n\r\n                    @media (max-width: 480px) {\r\n                        font-size: 12px;\r\n                        -webkit-line-clamp: 1;\r\n                    }\r\n                }\r\n\r\n                .wcps-list-price {\r\n                    font-weight: var(--wcps-price-font-weight, 700);\r\n                    font-size: var(--wcps-price-font-size, 16px);\r\n                    color: var(--wcps-price-font-color, #333);\r\n\r\n                    del {\r\n                        color: var(--wcps-price-delete-font-color, #888);\r\n                        margin-right: 8px;\r\n                    }\r\n\r\n                    @media (max-width: 480px) {\r\n                        font-size: 14px;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        // Right section - Quality and add to cart\r\n        .wcps-list-right {\r\n            flex-shrink: 0;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: flex-end;\r\n            gap: 12px;\r\n            min-width: 120px;\r\n\r\n            @media (max-width: 768px) {\r\n                align-items: center;\r\n                min-width: auto;\r\n                flex-direction: row;\r\n                justify-content: center;\r\n                gap: 15px;\r\n            }\r\n\r\n            @media (max-width: 480px) {\r\n                flex-direction: column;\r\n                gap: 10px;\r\n            }\r\n\r\n            .wcps-list-quality {\r\n                font-size: var(--wcps-desc-size, 12px);\r\n                color: var(--wcps-description-color, #666);\r\n                font-weight: 500;\r\n                padding: 4px 8px;\r\n                background: rgba(255, 255, 255, 0.3);\r\n                backdrop-filter: blur(5px);\r\n                border-radius: 12px;\r\n                border: 1px solid rgba(255, 255, 255, 0.2);\r\n                text-transform: capitalize;\r\n                position: relative;\r\n                top: -65px;\r\n            }\r\n\r\n            .wcps-list-qty-add {\r\n                display: flex;\r\n                flex-direction: column;\r\n                align-items: self-end;\r\n\r\n                input.wcps-qty-input {\r\n                    margin-bottom: 10px;\r\n                }\r\n            }\r\n\r\n            .wcps-add-to-cart-button {\r\n                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n                color: #fff;\r\n                border: none;\r\n                padding: 10px 16px;\r\n                border-radius: 8px;\r\n                font-size: 14px;\r\n                font-weight: 600;\r\n                text-decoration: none;\r\n                display: inline-flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n                transition: all 0.3s ease;\r\n                box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);\r\n                backdrop-filter: blur(10px);\r\n                border: 1px solid rgba(255, 255, 255, 0.2);\r\n                text-transform: capitalize;\r\n                min-width: 100px;\r\n\r\n                &:hover {\r\n                    transform: translateY(-2px);\r\n                    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);\r\n                    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);\r\n                }\r\n\r\n                &:active {\r\n                    transform: translateY(0);\r\n                }\r\n\r\n                @media (max-width: 480px) {\r\n                    padding: 8px 12px;\r\n                    font-size: 12px;\r\n                    min-width: 80px;\r\n                }\r\n\r\n            }\r\n        }\r\n\r\n        // No products message\r\n        .wcps-no-products {\r\n            text-align: center;\r\n            padding: 40px 20px;\r\n            background: rgba(255, 255, 255, 0.25);\r\n            backdrop-filter: blur(10px);\r\n            border: 1px solid rgba(255, 255, 255, 0.18);\r\n            border-radius: var(--wcps-border-radius, 16px);\r\n            color: var(--wcps-description-color, #666);\r\n            font-size: var(--wcps-desc-size, 16px);\r\n            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);\r\n        }\r\n    }\r\n\r\n}\r\n\r\n\r\n/* -------------- List Layout style END -------------- */\r\n// End \r\n\r\n\r\n/* -------------- Compare css  -------------- */\r\n\r\n/* Compare Button */\r\n.wcps-compare-button {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 8px 12px;\r\n    background-color: #f7f7f7;\r\n    border: 1px solid #ddd;\r\n    color: #333;\r\n    border-radius: 4px;\r\n    text-decoration: none;\r\n    font-size: 14px;\r\n    transition: all 0.2s ease;\r\n    cursor: pointer;\r\n}\r\n\r\n.wcps-compare-button:hover {\r\n    background-color: #ebebeb;\r\n    border-color: #c8c8c8;\r\n}\r\n\r\n.wcps-compare-button.added,\r\n.wcps-compare-button.in-compare {\r\n    background-color: #f0f9ff;\r\n    border-color: #90cdf4;\r\n    color: #3182ce;\r\n}\r\n\r\n.wcps-compare-button .wcps-icon {\r\n    margin-right: 5px;\r\n}\r\n\r\n.wcps-icon-compare::before {\r\n    content: \"\\21C5\";\r\n    /* Unicode for up/down arrow */\r\n}\r\n\r\n.wcps-icon-close::before {\r\n    content: \"\\00D7\";\r\n    /* Unicode for × character */\r\n}\r\n\r\n.wcps-compare-button.wcps-loading {\r\n    opacity: 0.6;\r\n    pointer-events: none;\r\n}\r\n\r\n/* Compare Bar */\r\n.wcps-compare-bar {\r\n    position: fixed;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    background-color: #fff;\r\n    border-top: 1px solid #ddd;\r\n    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\r\n    z-index: 999;\r\n    transform: translateY(0);\r\n    transition: transform 0.3s ease;\r\n}\r\n\r\n.wcps-compare-bar-inner {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 10px 15px;\r\n}\r\n\r\n.wcps-compare-bar-items {\r\n    display: flex;\r\n    overflow-x: auto;\r\n    max-width: 75%;\r\n    padding-right: 15px;\r\n}\r\n\r\n.wcps-compare-bar-item {\r\n    flex: 0 0 auto;\r\n    width: 100px;\r\n    margin-right: 10px;\r\n    text-align: center;\r\n    position: relative;\r\n}\r\n\r\n.wcps-compare-bar-item-img {\r\n    position: relative;\r\n    width: 80px;\r\n    height: 80px;\r\n    margin: 0 auto 5px;\r\n}\r\n\r\n.wcps-compare-bar-item-img img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    border: 1px solid #eee;\r\n    border-radius: 4px;\r\n}\r\n\r\n.wcps-compare-bar-item-name {\r\n    font-size: 12px;\r\n    line-height: 1.2;\r\n    max-height: 2.4em;\r\n    overflow: hidden;\r\n    white-space: nowrap;\r\n    text-overflow: ellipsis;\r\n}\r\n\r\n.wcps-compare-bar-item-remove {\r\n    position: absolute;\r\n    top: -5px;\r\n    right: -5px;\r\n    width: 20px;\r\n    height: 20px;\r\n    background-color: #ff6b6b;\r\n    color: #fff;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 14px;\r\n    cursor: pointer;\r\n    z-index: 1;\r\n}\r\n\r\n.wcps-compare-bar-actions {\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.wcps-compare-bar-clear {\r\n    background-color: transparent;\r\n    border: 1px solid #ddd;\r\n    color: #666;\r\n    padding: 8px 12px;\r\n    border-radius: 4px;\r\n    margin-right: 10px;\r\n    cursor: pointer;\r\n}\r\n\r\n.wcps-compare-view-button {\r\n    background-color: #3182ce;\r\n    color: #fff;\r\n    border: none;\r\n    padding: 8px 15px;\r\n    border-radius: 4px;\r\n    cursor: pointer;\r\n}\r\n\r\n/* Compare Modal */\r\n.wcps-modal {\r\n    display: none;\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    z-index: 9999;\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n    overflow-y: auto;\r\n}\r\n\r\n.wcps-modal.wcps-modal-open {\r\n    display: block;\r\n    z-index: 100;\r\n}\r\n\r\n.wcps-modal-content {\r\n    background-color: #fff;\r\n    max-width: 90%;\r\n    width: 1200px;\r\n    margin: 30px auto;\r\n    border-radius: 6px;\r\n    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\r\n    position: relative;\r\n}\r\n\r\n.wcps-modal-header {\r\n    padding: 15px 20px;\r\n    border-bottom: 1px solid #eee;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n\r\n.wcps-modal-header h2 {\r\n    margin: 0;\r\n    font-size: 20px;\r\n    font-weight: 600;\r\n}\r\n\r\n.wcps-modal-close {\r\n    font-size: 24px;\r\n    cursor: pointer;\r\n    color: #666;\r\n    z-index: 10;\r\n}\r\n\r\n.wcps-modal-body {\r\n    padding: 20px;\r\n    max-height: 70vh;\r\n    overflow-y: auto;\r\n}\r\n\r\n.wcps-loading-spinner {\r\n    display: block;\r\n    width: 40px;\r\n    height: 40px;\r\n    margin: 20px auto;\r\n    border: 4px solid #f3f3f3;\r\n    border-top: 4px solid #3182ce;\r\n    border-radius: 50%;\r\n    animation: wcps-spin 1s linear infinite;\r\n}\r\n\r\n@keyframes wcps-spin {\r\n    0% {\r\n        transform: rotate(0deg);\r\n    }\r\n\r\n    100% {\r\n        transform: rotate(360deg);\r\n    }\r\n}\r\n\r\n/* Compare Table */\r\n.wcps-compare-table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    border: 1px solid #eee;\r\n}\r\n\r\n.wcps-compare-table th,\r\n.wcps-compare-table td {\r\n    padding: 12px 15px;\r\n    text-align: left;\r\n    border: 1px solid #eee;\r\n    vertical-align: top;\r\n}\r\n\r\n.wcps-compare-table thead th {\r\n    background-color: #f7f7f7;\r\n    font-weight: 600;\r\n    position: sticky;\r\n    top: 0;\r\n    z-index: 1;\r\n}\r\n\r\n.wcps-compare-table tbody td:first-child {\r\n    background-color: #f7f7f7;\r\n    font-weight: 600;\r\n    width: 150px;\r\n}\r\n\r\n.wcps-compare-product-title {\r\n    display: block;\r\n    margin-bottom: 5px;\r\n    font-weight: 600;\r\n    color: #333;\r\n    text-decoration: none;\r\n}\r\n\r\n.wcps-compare-remove {\r\n    color: #ff6b6b;\r\n    text-decoration: none;\r\n    margin-left: 10px;\r\n}\r\n\r\n.wcps-compare-add-to-cart {\r\n    display: inline-block;\r\n    padding: 8px 12px;\r\n    background-color: #3182ce;\r\n    color: #fff;\r\n    border-radius: 4px;\r\n    text-decoration: none;\r\n    text-align: center;\r\n}\r\n\r\n\r\n/* Responsive */\r\n@media (max-width: 768px) {\r\n    .wcps-modal-content {\r\n        width: 95%;\r\n        margin: 15px auto;\r\n    }\r\n\r\n    .wcps-compare-bar-inner {\r\n        flex-direction: column;\r\n    }\r\n\r\n    .wcps-compare-bar-items {\r\n        max-width: 100%;\r\n        padding-right: 0;\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    .wcps-compare-table {\r\n        display: block;\r\n        overflow-x: auto;\r\n    }\r\n}\r\n\r\n/* -------------- END  -------------- */\r\n/* -------------- Quick view  -------------- */\r\n/* Quickview Modal Styles */\r\n.wcps-modal {\r\n    display: none;\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-color: rgba(0, 0, 0, 0.7);\r\n    z-index: 999999;\r\n    overflow-y: auto;\r\n    padding: 20px;\r\n}\r\n\r\n.wcps-modal.open {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.wcps-modal-content {\r\n    position: relative;\r\n    background-color: #fff;\r\n    width: 90%;\r\n    max-width: 1000px;\r\n    max-height: 90vh;\r\n    border-radius: 5px;\r\n    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);\r\n    overflow: hidden;\r\n    animation: wcps-modal-in 0.3s ease-out;\r\n}\r\n\r\n@keyframes wcps-modal-in {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(-50px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n.wcps-modal-close {\r\n    position: absolute;\r\n    top: 10px;\r\n    right: 15px;\r\n    font-size: 28px;\r\n    font-weight: bold;\r\n    color: #666;\r\n    cursor: pointer;\r\n    z-index: 10;\r\n    transition: color 0.2s;\r\n}\r\n\r\n.wcps-modal-close:hover {\r\n    color: #000;\r\n}\r\n\r\n.wcps-modal-body {\r\n    padding: 5px;\r\n    max-height: 80vh;\r\n    overflow-y: auto;\r\n}\r\n\r\n\r\n.wcps-modal-footer {\r\n    margin-top: 20px;\r\n    padding-top: 15px;\r\n    border-top: 1px solid #ddd;\r\n    text-align: right;\r\n}\r\n\r\n/* Responsive Styles */\r\n@media only screen and (max-width: 767px) {\r\n    .wcps-quickview-wrapper {\r\n        flex-direction: column;\r\n    }\r\n\r\n    .wcps-quickview-images,\r\n    .wcps-quickview-summary {\r\n        width: 100%;\r\n    }\r\n\r\n    .wcps-quickview-images {\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .wcps-modal-content {\r\n        width: 95%;\r\n        max-height: 95vh;\r\n    }\r\n\r\n    .wcps-quickview-summary h1 {\r\n        font-size: 20px;\r\n    }\r\n}\r\n\r\n/* -------------- End   -------------- */\r\n\r\n/* -------------- Wish list   -------------- */\r\n.wcps-wishlist-button {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 8px 15px;\r\n    background-color: #f5f5f5;\r\n    color: #333;\r\n    border: 1px solid #ddd;\r\n    border-radius: 4px;\r\n    transition: all 0.3s ease;\r\n    cursor: pointer;\r\n    text-decoration: none;\r\n    margin: 5px;\r\n}\r\n\r\n.wcps-wishlist-button:hover {\r\n    background-color: #e5e5e5;\r\n    color: #000;\r\n}\r\n\r\n.wcps-wishlist-button.in-wishlist,\r\n.wcps-wishlist-button.added {\r\n    background-color: #f8d7da;\r\n    color: #721c24;\r\n    border-color: #f5c6cb;\r\n}\r\n\r\n.wcps-wishlist-button.in-wishlist:hover,\r\n.wcps-wishlist-button.added:hover {\r\n    background-color: #f1c1c7;\r\n}\r\n\r\n.wcps-icon-heart {\r\n    display: inline-block;\r\n    margin-right: 5px;\r\n    position: relative;\r\n    width: 16px;\r\n    height: 16px;\r\n}\r\n\r\n.wcps-icon-heart:before {\r\n    // content: \"♥\";\r\n    content: \"♡\";\r\n    font-size: 16px;\r\n    line-height: 1;\r\n}\r\n\r\n\r\n\r\n/* Wishlist products display */\r\n.wcps-wishlist-products {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\r\n    gap: 20px;\r\n}\r\n\r\n.wcps-wishlist-product {\r\n    border: 1px solid #ddd;\r\n    border-radius: 5px;\r\n    padding: 15px;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.wcps-wishlist-product:hover {\r\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.wcps-wishlist-product-image {\r\n    text-align: center;\r\n    margin-bottom: 10px;\r\n}\r\n\r\n.wcps-wishlist-product-image img {\r\n    max-width: 100%;\r\n    height: auto;\r\n}\r\n\r\n.wcps-wishlist-product-title {\r\n    font-size: 16px;\r\n    margin: 0 0 10px;\r\n}\r\n\r\n.wcps-wishlist-product-price {\r\n    font-weight: bold;\r\n    margin-bottom: 10px;\r\n}\r\n\r\n.wcps-wishlist-product-actions {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    margin-top: 15px;\r\n}\r\n\r\n.wcps-wishlist-add-to-cart {\r\n    background-color: #4CAF50;\r\n    color: white;\r\n    padding: 8px 12px;\r\n    border-radius: 4px;\r\n    text-decoration: none;\r\n    font-size: 14px;\r\n}\r\n\r\n.wcps-wishlist-remove-item {\r\n    color: #dc3545;\r\n    text-decoration: none;\r\n    font-size: 14px;\r\n}\r\n\r\n/* Loading animation */\r\n.wcps-loading {\r\n    opacity: 0.7;\r\n    pointer-events: none;\r\n    position: relative;\r\n}\r\n\r\n.wcps-loading:after {\r\n    content: \"\";\r\n    position: absolute;\r\n    width: 16px;\r\n    height: 16px;\r\n    top: 50%;\r\n    left: 50%;\r\n    margin-top: -8px;\r\n    margin-left: -8px;\r\n    border-radius: 50%;\r\n    border: 2px solid rgba(0, 0, 0, 0.1);\r\n    border-top-color: #333;\r\n    animation: wcps-spin 0.8s infinite linear;\r\n}\r\n\r\n@keyframes wcps-spin {\r\n    0% {\r\n        transform: rotate(0deg);\r\n    }\r\n\r\n    100% {\r\n        transform: rotate(360deg);\r\n    }\r\n}\r\n\r\n/* Wishlist counter */\r\n.wcps-wishlist-count {\r\n    display: inline-block;\r\n    background-color: #dc3545;\r\n    color: white;\r\n    border-radius: 50%;\r\n    width: 18px;\r\n    height: 18px;\r\n    font-size: 12px;\r\n    line-height: 18px;\r\n    text-align: center;\r\n    margin-left: 5px;\r\n}\r\n\r\n/* Notification */\r\n.wcps-notification {\r\n    position: fixed;\r\n    top: 20px;\r\n    right: 20px;\r\n    background-color: #4caf50;\r\n    color: white;\r\n    padding: 12px 20px;\r\n    border-radius: 4px;\r\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\r\n    z-index: 9999;\r\n    opacity: 0;\r\n    transform: translateY(-20px);\r\n    transition: opacity 0.3s, transform 0.3s;\r\n}\r\n\r\n.wcps-notification.wcps-notification-visible {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}\r\n\r\n.wcps-notification.show {\r\n    transform: translateY(0);\r\n    opacity: 1;\r\n}\r\n\r\n.wcps-notification.error {\r\n    background-color: #dc3545;\r\n}\r\n\r\n/* -------------- End   -------------- */\r\n\r\n// Badge \r\nspan.wcps-product-badge {\r\n    font-size: 14px;\r\n    font-weight: 600;\r\n    text-transform: normal;\r\n    text-align: center;\r\n    word-break: break-all;\r\n    letter-spacing: 0.4px;\r\n    line-height: 1.2;\r\n    list-style: none;\r\n    -ms-flex-align: center;\r\n    -ms-flex-pack: center;\r\n    justify-content: center;\r\n    border-radius: 20px 20px 20px 20px;\r\n    padding: 5px 5px 5px 5px;\r\n    margin-bottom: 10px;\r\n    z-index: 2;\r\n    background: var(--wcps-background, rgb(54, 182, 217));\r\n    color: var(--wcps-price-delete-font-color, #fff);\r\n    position: absolute;\r\n    right: 5px;\r\n    top: 5px;\r\n}\r\n\r\n/* Filters */\r\n.wcps-filters {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: space-between;\r\n    margin-bottom: 20px;\r\n    padding: 15px;\r\n    background-color: #f7f7f7;\r\n    border-radius: 4px;\r\n}\r\n\r\n.wcps-filter-sorting,\r\n.wcps-filter-categories {\r\n    margin-bottom: 10px;\r\n}\r\n\r\n.wcps-filter-sorting label,\r\n.wcps-filter-categories label {\r\n    display: block;\r\n    margin-bottom: 5px;\r\n    font-weight: bold;\r\n}\r\n\r\n.wcps-orderby {\r\n    padding: 8px 12px;\r\n    border: 1px solid #ddd;\r\n    border-radius: 4px;\r\n    background-color: #fff;\r\n}\r\n\r\n.wcps-category-list {\r\n    list-style: none;\r\n    margin: 0;\r\n    padding: 0;\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n}\r\n\r\n.wcps-category-list li {\r\n    margin: 0 5px 5px 0;\r\n}\r\n\r\n.wcps-category-list a {\r\n    display: inline-block;\r\n    padding: 5px 12px;\r\n    border: 1px solid #ddd;\r\n    border-radius: 4px;\r\n    background-color: #fff;\r\n    text-decoration: none;\r\n    color: #333;\r\n    transition: all 0.2s ease;\r\n}\r\n\r\n.wcps-category-list a:hover,\r\n.wcps-category-list a.active {\r\n    background-color: var(--wcps-product-title, #0170B9);\r\n    color: #fff;\r\n    border-color: var(--wcps-product-title, #0170B9);\r\n}\r\n\r\n// Tag, Brands, Attributes filter \r\n// Filter Component Styles\r\n.wcps-filter-brands,\r\n.wcps-filter-tags {\r\n    margin-bottom: 1.5rem;\r\n\r\n    label {\r\n        display: block;\r\n        font-weight: 600;\r\n        font-size: 1rem;\r\n        color: #333;\r\n        margin-bottom: 0.75rem;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n    }\r\n}\r\n\r\n// Brand and Tag Lists\r\n.wcps-brand-list,\r\n.wcps-tag-list {\r\n    list-style: none;\r\n    margin: 0;\r\n    padding: 0;\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 0.5rem;\r\n\r\n    li {\r\n        margin: 0;\r\n\r\n        a {\r\n            display: inline-block;\r\n            padding: 0.5rem 1rem;\r\n            text-decoration: none;\r\n            color: #666;\r\n            background-color: #f8f9fa;\r\n            border: 1px solid #e9ecef;\r\n            border-radius: 0.375rem;\r\n            font-size: 0.875rem;\r\n            font-weight: 500;\r\n            transition: all 0.2s ease-in-out;\r\n            white-space: nowrap;\r\n\r\n            &:hover {\r\n                color: #333;\r\n                background-color: #e9ecef;\r\n                border-color: #dee2e6;\r\n                transform: translateY(-1px);\r\n            }\r\n\r\n            &.active {\r\n                color: #fff;\r\n                background-color: #007bff;\r\n                border-color: #007bff;\r\n\r\n                &:hover {\r\n                    background-color: #0056b3;\r\n                    border-color: #0056b3;\r\n                }\r\n            }\r\n\r\n            &:focus {\r\n                outline: none;\r\n                box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n// Responsive Design\r\n@media (max-width: 768px) {\r\n\r\n    .wcps-filter-brands,\r\n    .wcps-filter-tags {\r\n        margin-bottom: 1rem;\r\n\r\n        label {\r\n            font-size: 0.875rem;\r\n            margin-bottom: 0.5rem;\r\n        }\r\n    }\r\n\r\n    .wcps-brand-list,\r\n    .wcps-tag-list {\r\n        gap: 0.375rem;\r\n\r\n        li a {\r\n            padding: 0.375rem 0.75rem;\r\n            font-size: 0.8125rem;\r\n        }\r\n    }\r\n}\r\n\r\n// Alternative Compact Layout\r\n.wcps-filters-compact {\r\n\r\n    .wcps-filter-brands,\r\n    .wcps-filter-tags {\r\n        display: inline-block;\r\n        margin-right: 2rem;\r\n        margin-bottom: 1rem;\r\n\r\n        label {\r\n            display: inline-block;\r\n            margin-right: 0.75rem;\r\n            margin-bottom: 0;\r\n            vertical-align: middle;\r\n        }\r\n    }\r\n\r\n    .wcps-brand-list,\r\n    .wcps-tag-list {\r\n        display: inline-flex;\r\n        vertical-align: middle;\r\n    }\r\n}\r\n\r\n// Dark Theme Variant\r\n.wcps-filters-dark {\r\n\r\n    .wcps-filter-brands,\r\n    .wcps-filter-tags {\r\n        label {\r\n            color: #e9ecef;\r\n        }\r\n    }\r\n\r\n    .wcps-brand-list,\r\n    .wcps-tag-list {\r\n        li a {\r\n            color: #adb5bd;\r\n            background-color: #343a40;\r\n            border-color: #495057;\r\n\r\n            &:hover {\r\n                color: #f8f9fa;\r\n                background-color: #495057;\r\n                border-color: #6c757d;\r\n            }\r\n\r\n            &.active {\r\n                color: #fff;\r\n                background-color: #007bff;\r\n                border-color: #007bff;\r\n\r\n                &:hover {\r\n                    background-color: #0056b3;\r\n                    border-color: #0056b3;\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n\r\n/* Pagination */\r\n.wcps-pagination {\r\n    margin-top: 20px;\r\n    text-align: center;\r\n}\r\n\r\n.wcps-pagination ul {\r\n    display: inline-block;\r\n    list-style: none;\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n.wcps-pagination li {\r\n    display: inline-block;\r\n    margin: 0 2px;\r\n}\r\n\r\n.wcps-pagination a,\r\n.wcps-pagination span {\r\n    display: inline-block;\r\n    padding: 5px 12px;\r\n    border: 1px solid #ddd;\r\n    border-radius: 4px;\r\n    background-color: #fff;\r\n    text-decoration: none;\r\n    color: #333;\r\n    transition: all 0.2s ease;\r\n}\r\n\r\n.wcps-pagination a:hover,\r\n.wcps-pagination span.current {\r\n    background-color: var(--wcps-product-title, #0170B9);\r\n    color: #fff;\r\n    border-color: var(--wcps-product-title, #0170B9);\r\n}"],"names":[],"sourceRoot":""}