/*
Theme Name: Suuef Products
Theme URI: https://themes.suuef.com/
Author: Suuef
Author URI: https://suuef.com/
Description: Elementor-first WooCommerce marketplace theme adapted from the Bookly visual structure for Suuef digital products.
Version: 1.1.12
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: suuef-products
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:
1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Section Title
  2.3 Buttons

3. CONTENT ELEMENTS
  3.1 Form Control
  3.2 Form Select
  3.3 Table
  3.4 Pagination
  3.5 Slash Divider

4. SITE STRUCTURE
  4.1 Header
  4.2 Billboard
  4.3 Icon Box - Company Services
  4.4 Product
  4.5 Items Listings
  4.6 Testimonial
  4.7 Brands
  4.8 Instagram
  4.9 Footer

5. OTHER PAGES
  5.1 Single Product Page
    - Product Tabs

/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/

:root {
  --accent-color: #717171;
  --white-color: #fff;
  --black-color: #272727;
  --gray-color: #F3F3F3;
  --gray-color-200: #E3E3E3;
  --gray-color-300: #E0E0E0;
  --gray-color-500: #D0D0D0;
  --gray-color-800: #3A3A3A;
  --light-gray-color: #D2D2D2;
  --primary-color: #F86D72;
  --bs-body-color: #272727;
  --bs-secondary-color: #FFE8F0;
  --bs-secondary-rgb: 255, 232, 240;
  --bs-primary-rgb: 248,109,114;
  --bs-border-color: #E3E3E3;
  --bs-dropdown-link-active-bg: #F5F5F5;
  --light-color: #F8F8F8;
  --light-blue-color: #EDF1F3;
  --navbar-color-color: #131814;
  --swiper-theme-color: #4A4A4A;
  --swiper-pagination-color: #4A4A4A;
  --bs-box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.08);
  --bs-btn-font-size: 1rem;
}

/* Fonts */

:root {
  --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --heading-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (min-width:1850px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1540px;
  }
}

/*----------------------------------------------*/

/* 2. GENERAL TYPOGRAPHY */

/*----------------------------------------------*/

/* 2.1 General Styles
/*----------------------------------------------*/

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
}

body {
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}

p {
  color: var(--black-color);
  letter-spacing: 0.01rem;
  line-height: 1.65;
}

a {
  color: var(--black-color);
  text-decoration: none;
  transition: 0.3s color ease-out;
}

a.light {
  color: var(--light-color);
}

a:hover {
  text-decoration: none;
  color: var(--primary-color);
}

hr {
  margin: 1.25rem 0;
  color: var(--gray-color-200);
  opacity: 1;
}

/*------------ Background Color -----------*/

.bg-gray {
  background: var(--gray-color);
}

.bg-dark {
  background: var(--black-color);
}

.bg-light {
  background: var(--light-color);
}

.bg-light-gray {
  background: #F5F5F5;
}

/* - Section Padding
--------------------------------------------------------------*/

.padding-xsmall {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.padding-small {
  padding-top: 2em;
  padding-bottom: 2em;
}

.padding-medium {
  padding-top: 4em;
  padding-bottom: 4em;
}

.padding-large {
  padding-top: 7em;
  padding-bottom: 7em;
}

.padding-xlarge {
  padding-top: 9.5em;
  padding-bottom: 9.5em;
}

/* - Section margin
--------------------------------------------------------------*/

.margin-small {
  margin-top: 2em;
  margin-bottom: 2em;
}

.margin-medium {
  margin-top: 4em;
  margin-bottom: 4em;
}

.margin-large {
  margin-top: 7em;
  margin-bottom: 7em;
}

.margin-xlarge {
  margin-top: 9.5em;
  margin-bottom: 9.5em;
}

/* 2.2 Section Title
/*----------------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
  text-transform: capitalize;
  letter-spacing: 0.03em;
  font-weight: 600;
  line-height: 115%;
}

h4,
h5,
h6 {
  color: var(--light-black-color);
}

h1 {
  font-size: 2.75rem;
}

h2 {
  font-size: 2.25rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.35rem;
}

h5 {
  font-size: 1.1rem;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.01rem;
}

h6 {
  font-size: 1rem;
}

@media only screen and (max-width:999px) {
  h1 {
    font-size: 3rem;
  }
  h2 {
    font-size: 2.95rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  h4 {
    font-size: 1.24rem;
  }
  h5 {
    font-size: 1.20rem;
  }
}

@media only screen and (max-width:500px) {
  h1 {
    font-size: 2.6rem;
  }
  h2 {
    font-size: 2rem;
  }
}

/*--------------------------------------------------------------
/** 2.3 Buttons
--------------------------------------------------------------*/

.btn {
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.09em;
  color: var(--white-color);
  background-color: var(--primary-color);
  border: none;
  padding: 1.125rem 2.625rem;
  font-size: 1rem;
  border-radius: 200px;
  cursor: pointer;
}

.btn:hover,
.btn:focus-visible,
.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
  color: var(--white-color);
  background-color: var(--black-color);
}

.btn-dark {
  background-color: var(--black-color);
}

.btn-dark:hover {
  background-color: var(--primary-color);
}

.btn-light {
  background-color: var(--light-color);
}

.btn-light:hover {
  color: #fff;
  background-color: var(--primary-color);
}

/*--------------------------------------------------------------
/** 3. CONTENT ELEMENTS
--------------------------------------------------------------*/

/*--------------------------------------------------------------
/** 3.1 Form Control
--------------------------------------------------------------*/

.form-control {
  padding: 1rem;
  font-size: 21px;
  font-weight: 300;
  letter-spacing: 0.01rem;
  line-height: normal;
}

.form-control:focus {
  box-shadow: none;
  border-color: #131814;
}

input.form-control::placeholder,
textarea.form-control::placeholder {
  color: var(--black-color);
}

/*--------------------------------------------------------------
/** 3.2 Form Select
--------------------------------------------------------------*/

.filter-blog .form-select,
.filter-shop .form-select {
  padding: 0;
  font-size: 21px;
  font-weight: 300;
  border: none;
  background-color: transparent;
  line-height: normal;
  width: 180px;
}

.form-select:focus {
  box-shadow: none;
}

.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.form-check-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.25rem rgba(243, 141, 68, 0.25);
}

/*--------------------------------------------------------------
/** 3.3 Table
--------------------------------------------------------------*/

th {
  font-weight: 300;
  letter-spacing: 0.06rem;
}

/*--------------------------------------------------------------
/** 3.4 Pagination
--------------------------------------------------------------*/

.page-link {
  padding: 0;
  font-size: 21px;
  color: var(--black-color);
  background: none;
  border: none;
}

.page-link:focus {
  color: var(--primary-color);
  background: none;
  box-shadow: none;
}

.page-link:hover {
  color: var(--primary-color);
  background: none;
  border: none;
}

.active>.page-link,
.page-link.active {
  color: var(--primary-color);
  background: none;
  border: none;
}

.disabled>.page-link,
.page-link.disabled {
  color: var(--gray-color-500);
  background: none;
  border: none;
}

/* Animation */

@media (min-width:200px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

/* Animate Slide */

@keyframes slide {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0rem);
    opacity: 1;
  }
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slide {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }
  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slide {
  -webkit-animation-name: slide;
  animation-name: slide;
}

/*----------------------------------------------*/

/* 4. SITE STRUCTURE */

/*----------------------------------------------*/

/* Preloader */

#preloader {
  background: #FFF;
  opacity: 0.8;
  height: 100%;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99999999;
  transition: 0.2s ease-in-out;
}

#preloader.hide-preloader {
  display: none;
}

.book {
  --color: #F86D72;
  --duration: 6.8s;
  width: 32px;
  height: 12px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.book .inner {
  width: 32px;
  height: 12px;
  position: relative;
  transform-origin: 2px 2px;
  transform: rotateZ(-90deg);
  animation: book var(--duration) ease infinite;
}

.book .inner .left,
.book .inner .right {
  width: 60px;
  height: 4px;
  top: 0;
  border-radius: 2px;
  background: var(--color);
  position: absolute;
}

.book .inner .left:before,
.book .inner .right:before {
  content: "";
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: inherit;
  position: absolute;
  top: -10px;
  left: 6px;
}

.book .inner .left {
  right: 28px;
  transform-origin: 58px 2px;
  transform: rotateZ(90deg);
  animation: left var(--duration) ease infinite;
}

.book .inner .right {
  left: 28px;
  transform-origin: 2px 2px;
  transform: rotateZ(-90deg);
  animation: right var(--duration) ease infinite;
}

.book .inner .middle {
  width: 32px;
  height: 12px;
  border: 4px solid var(--color);
  border-top: 0;
  border-radius: 0 0 9px 9px;
  transform: translateY(2px);
}

.book ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  left: 50%;
  top: 0;
}

.book ul li {
  height: 4px;
  border-radius: 2px;
  transform-origin: 100% 2px;
  width: 48px;
  right: 0;
  top: -10px;
  position: absolute;
  background: var(--color);
  transform: rotateZ(0deg) translateX(-18px);
  animation-duration: var(--duration);
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.book ul li:nth-child(0) {
  animation-name: page-0;
}

.book ul li:nth-child(1) {
  animation-name: page-1;
}

.book ul li:nth-child(2) {
  animation-name: page-2;
}

.book ul li:nth-child(3) {
  animation-name: page-3;
}

.book ul li:nth-child(4) {
  animation-name: page-4;
}

.book ul li:nth-child(5) {
  animation-name: page-5;
}

.book ul li:nth-child(6) {
  animation-name: page-6;
}

.book ul li:nth-child(7) {
  animation-name: page-7;
}

.book ul li:nth-child(8) {
  animation-name: page-8;
}

.book ul li:nth-child(9) {
  animation-name: page-9;
}

.book ul li:nth-child(10) {
  animation-name: page-10;
}

.book ul li:nth-child(11) {
  animation-name: page-11;
}

.book ul li:nth-child(12) {
  animation-name: page-12;
}

.book ul li:nth-child(13) {
  animation-name: page-13;
}

.book ul li:nth-child(14) {
  animation-name: page-14;
}

.book ul li:nth-child(15) {
  animation-name: page-15;
}

.book ul li:nth-child(16) {
  animation-name: page-16;
}

.book ul li:nth-child(17) {
  animation-name: page-17;
}

.book ul li:nth-child(18) {
  animation-name: page-18;
}

@keyframes page-0 {
  4% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  13%,
  54% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  63% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-1 {
  5.86% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  14.74%,
  55.86% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  64.74% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-2 {
  7.72% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  16.48%,
  57.72% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  66.48% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-3 {
  9.58% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  18.22%,
  59.58% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  68.22% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-4 {
  11.44% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  19.96%,
  61.44% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  69.96% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-5 {
  13.3% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  21.7%,
  63.3% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  71.7% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-6 {
  15.16% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  23.44%,
  65.16% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  73.44% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-7 {
  17.02% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  25.18%,
  67.02% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  75.18% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-8 {
  18.88% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  26.92%,
  68.88% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  76.92% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-9 {
  20.74% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  28.66%,
  70.74% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  78.66% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-10 {
  22.6% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  30.4%,
  72.6% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  80.4% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-11 {
  24.46% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  32.14%,
  74.46% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  82.14% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-12 {
  26.32% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  33.88%,
  76.32% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  83.88% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-13 {
  28.18% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  35.62%,
  78.18% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  85.62% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-14 {
  30.04% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  37.36%,
  80.04% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  87.36% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-15 {
  31.9% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  39.1%,
  81.9% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  89.1% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-16 {
  33.76% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  40.84%,
  83.76% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  90.84% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-17 {
  35.62% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  42.58%,
  85.62% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  92.58% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes page-18 {
  37.48% {
    transform: rotateZ(0deg) translateX(-18px);
  }
  44.32%,
  87.48% {
    transform: rotateZ(180deg) translateX(-18px);
  }
  94.32% {
    transform: rotateZ(0deg) translateX(-18px);
  }
}

@keyframes left {
  4% {
    transform: rotateZ(90deg);
  }
  10%,
  40% {
    transform: rotateZ(0deg);
  }
  46%,
  54% {
    transform: rotateZ(90deg);
  }
  60%,
  90% {
    transform: rotateZ(0deg);
  }
  96% {
    transform: rotateZ(90deg);
  }
}

@keyframes right {
  4% {
    transform: rotateZ(-90deg);
  }
  10%,
  40% {
    transform: rotateZ(0deg);
  }
  46%,
  54% {
    transform: rotateZ(-90deg);
  }
  60%,
  90% {
    transform: rotateZ(0deg);
  }
  96% {
    transform: rotateZ(-90deg);
  }
}

@keyframes book {
  4% {
    transform: rotateZ(-90deg);
  }
  10%,
  40% {
    transform: rotateZ(0deg);
    transform-origin: 2px 2px;
  }
  40.01%,
  59.99% {
    transform-origin: 30px 2px;
  }
  46%,
  54% {
    transform: rotateZ(90deg);
  }
  60%,
  90% {
    transform: rotateZ(0deg);
    transform-origin: 2px 2px;
  }
  96% {
    transform: rotateZ(-90deg);
  }
}

/* Search Bar
------------------------------------------------------------- */

.search-box {
  background: var(--gray-color);
  position: relative;
}

.close-button {
  position: absolute;
  top: 20px;
  right: 120px;
  cursor: pointer;
  z-index: 9;
}

.search-box input.search-input {
  font-size: 1.3em;
  width: 70%;
  height: 30px;
  padding: 25px;
  border-radius: 80px;
  border-color: rgb(0 0 0 / 25%);
  background: transparent;
}

.search-box svg {
  width: 22px;
  height: 22px;
  color: var(--primary-color);
}

.search-box svg.search {
  margin-left: -50px;
}

/** Search Form
--------------------------------------------------------------*/

.search-form input[type="search"].search-field {
  border: none;
  background: #f1f1f1;
  width: 100%;
  border-radius: 50px;
  padding: 10px 40px;
}

.search-form input[type="search"].search-field::focus {
  border-color: #af9aaa;
}

.search-form button {
  position: absolute;
  top: 6px;
  right: 9px;
  background: transparent;
  border: none;
}

/** Search Popup
--------------------------------------------------------------*/

.search-popup {
  background-color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 999999;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}

.search-popup.is-visible {
  opacity: 1;
  visibility: visible;
  cursor: -webkit-image-set(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23FFF' d='M20 1l-1-1-9 9-9-9-1 1 9 9-9 9 1 1 9-9 9 9 1-1-9-9'/%3E%3C/svg%3E") 1x, url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M20 1l-1-1-9 9-9-9-1 1 9 9-9 9 1 1 9-9 9 9 1-1-9-9'/%3E%3C/svg%3E") 2x), pointer;
  cursor: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M20 1l-1-1-9 9-9-9-1 1 9 9-9 9 1 1 9-9 9 9 1-1-9-9'/%3E%3C/svg%3E"), pointer;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.search-popup-container {
  background-color: transparent;
  position: relative;
  top: 50%;
  margin: 0 auto;
  padding: 0;
  width: 90%;
  max-width: 800px;
  text-align: center;
  box-shadow: none;
  cursor: default;
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px);
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.is-visible .search-popup-container {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.search-popup-form {
  position: relative;
  margin: 0 0 3em 0;
}

.search-popup-form .form-control {
  padding: 0 0 .375em 0;
  font-size: 2em;
}

.search-popup-form #search-popup-submit {
  display: none;
}

.search-popup .search-popup-close {
  display: block;
  position: absolute;
  top: 2em;
  right: 2em;
  margin: -0.5em;
  padding: 0.5em;
  line-height: 0;
}

.search-popup .search-popup-close:hover {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.search-popup .search-popup-close i {
  display: block;
  position: relative;
  width: 1em;
  height: 1em;
  fill: rgba(0,0,0,0.5);
}

.search-popup .search-popup-close:hover i {
  fill: rgba(0,0,0,1);
}

.search-popup .cat-list-title {
  margin-top: 40px;
  margin-bottom: 10px;
  font-size: 0.6em;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.search-popup .cat-list {
  margin: 0;
  list-style-type: none;
}

.search-popup .cat-list-item {
  display: inline-block;
  margin-bottom: 0;
  letter-spacing: 0.015em;
  font-size: 2em;
}

.search-popup .cat-list-item a {
  position: relative;
}

.search-popup .cat-list-item a::after {
  background: none repeat scroll 0 0 #fff;
  content: "";
  height: 1px;
  border-bottom: 1px solid #ff9697;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 100%;
  width: 100%;
  -webkit-transition: height 0.3s,opacity 0.3s,-webkit-transform 0.3s;
  transition: height 0.3s,opacity 0.3s,transform 0.3s;
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}

.search-popup .cat-list-item a:hover::after {
  height: 1px;
  opacity: 1;
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}

.search-popup .cat-list-item::after {
  content: "/";
  padding: 0 5px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.5);
  vertical-align: text-top;
}

.search-popup .cat-list-item:last-child::after {
  display: none;
}

@media only screen and (max-width:991px) {
  .search-popup .cat-list-item,
  .search-popup-form .form-control {
    font-size: 1.425em;
  }
}

@media only screen and (max-width:767px) {
  .search-popup .search-popup-close {
    top: 1em;
    right: 1em;
  }
}

@media only screen and (max-width:575px) {
  .search-popup .cat-list-item,
  .search-popup-form .form-control {
    font-size: 1.125em;
  }
  .search-popup .search-popup-close {
    top: 1em;
    right: 1em;
  }
}

.search-popup input[type="search"] {
  font-size: 24px;
  height: 60px;
  padding: 26px;
}

.search-popup .search-form button {
  top: 12px;
  right: 15px;
}

.search-popup .search-form button svg {
  height: 28px;
  width: 28px;
}

/* nav tabs */

.nav-tabs .nav-link {
  color: var(--black-color);
}

:focus-visible {
  outline: none;
}

/* 4.1 Header
/*----------------------------------------------*/

.site-header {
  width: 100%;
  z-index: 10;
  transition: background 0.3s ease-out;
}

.navbar-toggler svg.navbar-icon {
  width: 50px;
  height: 50px;
}

.navbar-nav .nav-item a.nav-link {
  font-size: 0.7619em;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--black-color);
}

.navbar-nav .nav-item a.nav-link.active,
.navbar-nav .nav-item a.nav-link:focus,
.navbar-nav .nav-item a.nav-link:hover {
  color: var(--primary-color);
}

.modal {
  --bs-modal-zindex: 99999;
}

.modal-dialog {
  max-width: 800px;
  margin: auto;
  height: 100vh;
  display: flex;
  align-items: center;
}

.dropdown-menu {
  --bs-dropdown-link-active-color: var(--primary-color);
  --bs-dropdown-link-active-bg: #F5F5F5;
  --bs-dropdown-zindex: 99999;
}

.dropdown-item.active,
.dropdown-item:active {
  color: var(--bs-dropdown-link-active-color);
  text-decoration: none;
}

.cart-dropdown .dropdown-menu,
.wishlist-dropdown .dropdown-menu {
  min-width: 21rem;
}

.cart-dropdown.dropdown a::after,
.wishlist-dropdown.dropdown a::after {
  display: none;
}

@media only screen and (max-width:500px) {
  .cart-dropdown .dropdown-menu,
  .wishlist-dropdown .dropdown-menu {
    min-width: fit-content;
  }
}

/*------------ Offcanvas -------------- */

#header-nav .navbar-toggler:focus {
  box-shadow: none;
}

#header-nav .offcanvas {
  transition: 0.5s ease-in-out;
}

#header-nav .offcanvas.show {
  z-index: 99999;
}

#header-nav .offcanvas-end {
  width: 500px;
}

/*------------ Top User Icons -----------*/

.site-header .user-items svg {
  width: 22px;
  height: 22px;
  cursor: pointer;
}

@media only screen and (max-width:991px) {
  #navbar .user-items {
    display: none;
  }
}

/* 4.2 Billboard
/*----------------------------------------------*/

/*------------Swiper Arrow -----------*/

.swiper-next,
.swiper-prev {
  color: var(--black-color);
  z-index: 9999;
}

.swiper-button-disabled {
  color: var(--gray-color-500);
}

@media only screen and (max-width:765px) {
  section#billboard {
    height: 100vh !important;
  }
}

/* 4.3 Icon Box - Company Services
/*----------------------------------------------*/

.icon-box .icon-box-icon svg {
  width: 33px;
  height: 33px;
  fill: var(--primary-color);
}

@media only screen and (max-width:991px) {
  #company-services .icon-box {
    flex-wrap: wrap;
  }
}

/* 4.4 Product
/*----------------------------------------------*/

.card-concern {
  text-align: center;
  bottom: 145px;
  display: flex;
  justify-content: center;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.3s ease-out;
  opacity: 0;
}

.card-concern .btn {
  padding: 1.125rem;
}

.card-concern svg {
  width: 27px;
  height: 27px;
  cursor: pointer;
}

.card:hover .card-concern {
  bottom: 160px;
  opacity: 1;
}

/* 4.5 Items Listings
/*----------------------------------------------*/

#items-listing img {
  max-width: 80px;
  max-height: 90px;
}

/*------------Swiper Pagination -----------*/

.product-store .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 35px;
}

.swiper-pagination span.swiper-pagination-bullet {
  width: 15px;
  height: 15px;
}

/* 4.6 Testimonial
/*----------------------------------------------*/

.rating svg.star {
  width: 16px;
  height: 16px;
}

/* 4.7 Brands
/*----------------------------------------------*/

#brands .brand-images img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: 0.3s ease-in-out;
}

#brands .brand-images a.brand:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* 4.8 Instagram
/*----------------------------------------------*/

.instagram-item .icon-overlay {
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: auto;
  color: var(--light-color);
  opacity: 0;
  transition: 0.9s ease-out;
}

.instagram-item:hover .icon-overlay {
  opacity: 1;
}

/* 4.9 Footer
/*----------------------------------------------*/

#footer .menu-list .menu-item a {
  font-size: 0.7619em;
  font-weight: 300;
  letter-spacing: 0.09em;
  color: var(--black-color);
}

#footer .menu-list .menu-item a:hover {
  color: var(--primary-color);
}

.social-links svg {
  width: 20px;
  height: 20px;
  transition: 0.3s ease-in-out;
  color: var(--light-gray-color);
}

.social-links svg:hover {
  color: var(--primary-color);
}

.social-links li {
  padding-right: 30px;
}

/*----------------------------------------------*/

/* 5. SITE STRUCTURE */

/*----------------------------------------------*/

/* ----------- Search Bar -----------*/

select#input-sort {
  border: none;
  padding: 0;
  text-align: right;
  cursor: pointer;
}

/* 5.1 Single Product Page
/*----------------------------------------------*/

.thumb-swiper .swiper-slide {
  height: auto;
}

.swiper-slide-thumb-active img {
  border: var(--bs-border-width) var(--bs-border-style) var(--primary-color) !important;
}

.product-info del {
  color: var(--gray-color-500);
}

/*---- Product Tabs ----------*/

.nav-tabs .nav-link {
  letter-spacing: 0.06em;
}

.nav-tabs .nav-link {
  background: none;
  border: none;
}

.nav-tabs button.nav-link.active {
  color: var(--primary-color);
  background: none;
}

.nav-tabs button.nav-link:hover {
  color: var(--primary-color);
}

@media screen and (max-width:991px) {
  .product-tabs .review-item {
    width: 100%;
    flex-wrap: wrap;
  }
  .product-tabs .review-item .image-holder {
    margin-bottom: 10px;
  }
}

/* ==========================================================================\n   WordPress / WooCommerce / Elementor integration\n   ========================================================================== */

:root {
  --suuef-accent: #F86D72;
  --suuef-purple: #24113f;
}

body {
  overflow-x: hidden;
}

.site-main {
  min-height: 40vh;
}

.elementor-page .site-main,
.suuef-elementor-page .site-main {
  padding: 0;
}

.elementor-section.elementor-section-boxed>.elementor-container {
  max-width: 1140px;
}

.elementor-widget:not(:last-child) {
  margin-bottom: 0;
}

.btn-reset {
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
}

.suuef-svg-sprite {
  pointer-events: none;
}

.custom-logo-link {
  display: inline-flex;
  align-items: center;
}

.custom-logo {
  max-height: 58px;
  width: auto;
}

.navbar-brand-wrap {
  min-width: 210px;
}

.suuef-brand {
  display: inline-flex;
  align-items: center;
  position: relative;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: #272727;
}

.suuef-brand:hover {
  color: #272727;
}

.suuef-brand-mark {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 4px solid var(--primary-color);
  border-radius: 12px 2px 12px 2px;
  color: var(--primary-color);
  font-weight: 900;
  line-height: 1;
  margin-right: 3px;
}

.suuef-brand-name {
  letter-spacing: -.05em;
}

.suuef-brand small {
  font-size: .55rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  margin-left: 7px;
  margin-top: 16px;
  color: #717171;
}

.footer-brand {
  font-size: 1.9rem;
}

.footer-brand .suuef-brand-mark {
  width: 42px;
  height: 42px;
}

#header-nav .navbar-nav>li>a {
  font-size: .7619em;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.dropdown-menu .dropdown-item {
  font-size: .9rem;
}

.user-items .btn-reset svg,
.user-items a>svg {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   WooCommerce Mini Cart
   ========================================================================== */

.suuef-mini-cart {
  min-width: 340px;
  max-width: 390px;
}

/* Product list */
.suuef-mini-cart .woocommerce-mini-cart {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Individual product */
.suuef-mini-cart .woocommerce-mini-cart-item {
  position: relative;
  min-height: 96px;
  padding: 12px 0 12px 28px;
  border-bottom: 1px solid #eee;
}

/* Make sure floated thumbnail remains inside the product row */
.suuef-mini-cart .woocommerce-mini-cart-item::after {
  content: "";
  display: block;
  clear: both;
}

/* Remove product button */
.suuef-mini-cart .woocommerce-mini-cart-item .remove {
  position: absolute;
  top: 14px;
  left: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  line-height: 1;
  text-decoration: none;
}

/* Product thumbnail */
.suuef-mini-cart .woocommerce-mini-cart-item img {
  display: block;
  float: right;

  width: 76px !important;
  height: 76px !important;

  min-width: 76px;
  max-width: 76px;
  min-height: 76px;
  max-height: 76px;

  margin: 0 0 8px 14px;

  object-fit: cover;
  object-position: center;

  border-radius: 10px;
  border: 1px solid #eee;

  background: #f7f7f7;
  box-shadow: none;
}

/* Product title */
.suuef-mini-cart .woocommerce-mini-cart-item > a:not(.remove) {
  color: #272727;
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
}

/* Quantity / price */
.suuef-mini-cart .woocommerce-mini-cart-item .quantity {
  display: block;
  margin-top: 6px;
  color: #555;
}

/* Subtotal */
.suuef-mini-cart .woocommerce-mini-cart__total {
  margin: 14px 0;
  padding-top: 2px;
}

/* Cart / checkout buttons. The CSS variables are fed by the Customizer so
   the mini-cart remains readable even when WooCommerce/plugin styles load
   after the theme stylesheet. */
.suuef-mini-cart .buttons,
.suuef-mini-cart .woocommerce-mini-cart__buttons {
  display: flex;
  gap: 10px;
  margin: 0;
}

#header .suuef-mini-cart .woocommerce-mini-cart__buttons a.button,
#header .suuef-mini-cart .buttons a.button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 14px;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  opacity: 1;
  visibility: visible;
}

#header .suuef-mini-cart .woocommerce-mini-cart__buttons a.suuef-mini-cart-view-cart,
#header .suuef-mini-cart .buttons a.suuef-mini-cart-view-cart {
  background: var(--suuef-mini-cart-view-bg, #272727) !important;
  border-color: var(--suuef-mini-cart-view-bg, #272727) !important;
  color: var(--suuef-mini-cart-view-text, #ffffff) !important;
  -webkit-text-fill-color: var(--suuef-mini-cart-view-text, #ffffff);
}

#header .suuef-mini-cart .woocommerce-mini-cart__buttons a.suuef-mini-cart-view-cart:hover,
#header .suuef-mini-cart .woocommerce-mini-cart__buttons a.suuef-mini-cart-view-cart:focus-visible,
#header .suuef-mini-cart .buttons a.suuef-mini-cart-view-cart:hover,
#header .suuef-mini-cart .buttons a.suuef-mini-cart-view-cart:focus-visible {
  background: var(--suuef-mini-cart-view-hover-bg, var(--primary-color)) !important;
  border-color: var(--suuef-mini-cart-view-hover-bg, var(--primary-color)) !important;
  color: var(--suuef-mini-cart-view-hover-text, #ffffff) !important;
  -webkit-text-fill-color: var(--suuef-mini-cart-view-hover-text, #ffffff);
}

#header .suuef-mini-cart .woocommerce-mini-cart__buttons a.checkout,
#header .suuef-mini-cart .buttons a.checkout {
  background: var(--suuef-mini-cart-checkout-bg, var(--primary-color)) !important;
  border-color: var(--suuef-mini-cart-checkout-bg, var(--primary-color)) !important;
  color: var(--suuef-mini-cart-checkout-text, #272727) !important;
  -webkit-text-fill-color: var(--suuef-mini-cart-checkout-text, #272727);
}

#header .suuef-mini-cart .woocommerce-mini-cart__buttons a.checkout:hover,
#header .suuef-mini-cart .woocommerce-mini-cart__buttons a.checkout:focus-visible,
#header .suuef-mini-cart .buttons a.checkout:hover,
#header .suuef-mini-cart .buttons a.checkout:focus-visible {
  filter: brightness(.94);
}

/* Mobile */
@media screen and (max-width: 480px) {

  .suuef-mini-cart {
    min-width: min(360px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
  }

  .suuef-mini-cart .woocommerce-mini-cart-item img {
    width: 68px !important;
    height: 68px !important;

    min-width: 68px;
    max-width: 68px;
    min-height: 68px;
    max-height: 68px;

    border-radius: 8px;
  }

  .suuef-mini-cart .woocommerce-mini-cart-item {
    min-height: 88px;
  }
}

.search-popup-close {
  position: absolute;
  right: 0;
  top: -80px;
  border: 0;
  background: none;
  font-size: 2.2rem;
}

.search-popup .cat-list {
  padding-left: 0;
}

.search-popup .cat-item {
  display: inline-block;
}

.search-popup .cat-item:after {
  content: '/';
  padding: 0 5px;
  color: rgba(0,0,0,.5);
}

.search-popup .cat-item:last-child:after {
  display: none;
}

#billboard .swiper {
  width: 100%;
}

#billboard .banner-content h2 {
  max-width: 580px;
}

#billboard .image-holder img {
  max-height: 650px;
  width: auto;
}

.main-slider-button-next,
.main-slider-button-prev {
  cursor: pointer;
}

.chevron-forward-circle,
.chevron-back-circle {
  fill: currentColor;
}

#company-services .icon-box-icon svg {
  width: 33px;
  height: 33px;
}

.suuef-product-carousel-wrap {
  overflow: visible;
}

.suuef-product-carousel-wrap .product-slider-button-next {
  right: -85px!important;
}

.suuef-product-carousel-wrap .product-slider-button-prev {
  left: -85px!important;
}

.suuef-bookly-product-card {
  height: 100%;
  background: #fff;
  overflow: hidden;
}

.suuef-bookly-product-card .suuef-product-image-link {
  display: block;
}

.suuef-bookly-product-card .suuef-product-image-link>img,
.suuef-bookly-product-card>img,
.suuef-bookly-product-card .suuef-product-placeholder {
  width: 100%;
  height: 330px;
  object-fit: cover;
  background: #f5f5f5;
}

.suuef-product-placeholder {
  display: grid;
  place-items: center;
  padding: 25px;
  text-align: center;
  font-weight: 700;
}

.suuef-sale-badge {
  z-index: 2;
  top: 28px;
  left: 28px;
}

.suuef-bookly-product-card .price del {
  color: #888;
  margin-right: 6px;
}

.suuef-bookly-product-card .price ins {
  text-decoration: none;
}

.suuef-bookly-product-card .rating {
  margin-left: auto;
}

.suuef-bookly-product-card .card-concern {
  bottom: 145px;
}

.suuef-bookly-product-card:hover .card-concern {
  bottom: 160px;
}

.suuef-card-cart,
.suuef-card-wishlist {
  display: grid;
  place-items: center;
}

.suuef-list-thumb {
  width: 80px;
  flex: 0 0 80px;
}

.suuef-list-thumb img,
.suuef-list-thumb .suuef-product-placeholder {
  width: 80px;
  height: 90px;
  object-fit: cover;
}

.suuef-list-thumb .suuef-product-placeholder {
  font-size: .65rem;
  padding: 5px;
}

.suuef-listing-item .rating {
  margin-left: 0;
}

.suuef-category-bookly {
  overflow: hidden;
}

.suuef-category-bookly img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.suuef-category-bookly h6 {
  z-index: 2;
}

.instagram-item {
  overflow: hidden;
}

.instagram-item .insta-image {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.instagram-item .icon-overlay {
  align-items: center;
  z-index: 2;
  background: rgba(0,0,0,.35);
}

.instagram-item .icon-overlay svg {
  width: 34px;
  height: 34px;
}

.suuef-countdown-section {
  display: flex;
  align-items: center;
}

#footer .custom-logo {
  margin-bottom: 10px;
}

.footer-menu .menu-list {
  padding-left: 0;
}

.footer-menu .menu-list li {
  margin-bottom: .35rem;
}

.social-links ul {
  padding-left: 0;
}

.card-wrap img {
  max-height: 25px;
  width: auto;
  margin-right: 6px;
}

.suuef-footer-badge {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: .7rem;
  font-weight: 700;
  margin-right: 5px;
  color: #555;
}

.suuef-inner-eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 700;
}

.suuef-contact-info-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 18px;
  box-shadow: 0 10px 30px rgba(31,41,55,.06);
}

.suuef-contact-info-card h4 {
  font-size: 1.1rem;
}

.suuef-faq-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 24px;
  margin-top: 40px;
}

.suuef-faq-grid>div {
  background: #f8f7fb;
  border-radius: 12px;
  padding: 28px;
}

.suuef-faq-grid h4 {
  font-size: 1.15rem;
}

.suuef-form-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 18px;
}

.suuef-form-grid p {
  margin: 0;
}

.suuef-form-grid .full {
  grid-column: 1/-1;
}

.suuef-contact-form label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
}

.suuef-contact-form input,
.suuef-contact-form textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 13px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}

.suuef-contact-form textarea {
  resize: vertical;
}

/* Zuricom-inspired shop layout with Bookly cards */

.zuri-shop-container {
  max-width: 1540px;
}

.zuri-shop-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px 0 24px;
  border-bottom: 1px solid #e7e7e7;
  margin-bottom: 32px;
}

.zuri-shop-topbar-left,
.zuri-shop-topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.zuri-shop-layout {
  display: grid;
  grid-template-columns: 280px minmax(0,1fr);
  gap: 44px;
}

.zuri-shop-sidebar {
  min-width: 0;
}

.suuef-shop-widget {
  padding: 22px;
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  margin-bottom: 24px;
}

.suuef-shop-widget h5 {
  font-weight: 600;
}

.suuef-shop-widget ul {
  margin: 0;
}

.suuef-shop-widget li {
  padding: 7px 0;
  border-bottom: 1px solid #f1f1f1;
}

.suuef-shop-widget li:last-child {
  border-bottom: 0;
}

.suuef-shop-widget .woocommerce-product-search input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
}

.suuef-shop-widget .woocommerce-product-search button {
  margin-top: 8px;
  border: 0;
  background: #272727;
  color: #fff;
  padding: 9px 14px;
}

.suuef-sidebar-product a {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.suuef-sidebar-product img,
.suuef-sidebar-product .suuef-product-placeholder {
  width: 55px;
  height: 62px;
  object-fit: cover;
  flex: 0 0 55px;
}

.suuef-sidebar-product span {
  font-size: .82rem;
  font-weight: 600;
}

.suuef-sidebar-product small {
  display: block;
  color: var(--primary-color);
  margin-top: 3px;
}

.zuri-shop-products ul.products {
  display: grid!important;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
  margin: 0!important;
}

.zuri-shop-products ul.products:before,
.zuri-shop-products ul.products:after {
  display: none!important;
}

.zuri-shop-products ul.products li.product {
  width: auto!important;
  margin: 0!important;
  float: none!important;
}

.zuri-shop-products ul.products li.product .card {
  height: 100%;
}

.woocommerce .woocommerce-ordering select {
  padding: 10px 35px 10px 12px;
  border: 1px solid #ddd;
  background: #fff;
}

.woocommerce nav.woocommerce-pagination ul {
  border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
  margin: 0 3px;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #ddd;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

/* WooCommerce single product, cart, checkout */

.suuef-single-product-elementor .woocommerce div.product {
  max-width: 1300px;
  margin: 0 auto;
}

.woocommerce div.product div.images img {
  border-radius: 8px;
}

.woocommerce div.product .product_title {
  font-size: clamp(2rem,4vw,3.3rem);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--primary-color);
  font-size: 1.7rem;
  font-weight: 600;
}

.woocommerce div.product form.cart .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: #272727;
  color: #fff;
  border-radius: 200px;
  padding: 1rem 1.6rem;
  font-weight: 600;
}

.woocommerce div.product form.cart .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--primary-color);
  color: #fff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--primary-color);
}

.woocommerce table.shop_table {
  border-color: #e4e4e4;
  border-radius: 8px;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 16px;
}

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 28px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .select2-container .select2-selection--single {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  min-height: 48px;
}

.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 22px;
}

/* Zuricom-inspired blog grid */

.suuef-blog-main {
  background: #fff;
}

.suuef-blog-topbar .search-form {
  position: relative;
  min-width: 300px;
}

.suuef-blog-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 30px;
}

.suuef-blog-card {
  border: 1px solid #ececec;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  padding-bottom: 24px;
}

.suuef-blog-card__media {
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.suuef-blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.suuef-blog-card__title,
.suuef-blog-card__meta,
.suuef-blog-card__excerpt,
.suuef-blog-card__more {
  margin-left: 24px;
  margin-right: 24px;
}

.suuef-blog-card__title {
  font-size: 1.35rem;
  margin-top: 24px;
}

.suuef-blog-card__meta {
  font-size: .8rem;
  color: #888;
  margin-top: 8px;
}

.suuef-blog-card__excerpt {
  margin-top: 14px;
}

.suuef-blog-card__more a {
  color: var(--primary-color);
  font-weight: 600;
}

@media(max-width:1199px) {
  .zuri-shop-products ul.products {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .suuef-product-carousel-wrap .product-slider-button-next {
    right: -40px!important;
  }
  .suuef-product-carousel-wrap .product-slider-button-prev {
    left: -40px!important;
  }
}

@media(max-width:991px) {
  .navbar-brand-wrap {
    min-width: 0;
  }
  .zuri-shop-layout {
    grid-template-columns: 1fr;
  }
  .zuri-shop-sidebar {
    order: 2;
  }
  .suuef-blog-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .suuef-faq-grid {
    grid-template-columns: 1fr;
  }
  .suuef-product-carousel-wrap .product-slider-button-next,
  .suuef-product-carousel-wrap .product-slider-button-prev {
    display: none;
  }
  .suuef-bookly-product-card .suuef-product-image-link>img,
  .suuef-bookly-product-card>img,
  .suuef-bookly-product-card .suuef-product-placeholder {
    height: 300px;
  }
}

@media(max-width:767px) {
  #billboard {
    min-height: 720px!important;
  }
  .suuef-countdown-section {
    min-height: auto!important;
  }
  .zuri-shop-topbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .zuri-shop-products ul.products {
    grid-template-columns: 1fr;
  }
  .suuef-blog-grid {
    grid-template-columns: 1fr;
  }
  .suuef-form-grid {
    grid-template-columns: 1fr;
  }
  .suuef-form-grid .full {
    grid-column: auto;
  }
  .social-links li {
    padding-right: 18px;
  }
}

/* ==========================================================================
   Suuef Products 1.1.2 — Zuricom shop/blog alignment and centered contact
   ========================================================================== */

/* The Shop page keeps an Elementor editing surface but its helper note is not
   part of the public WooCommerce archive. */

.suuef-shop-editor-only {
  display: none !important;
}

/* Zuricom shop archive structure — no marketing hero above the catalogue. */

.zuri-shop-main,
.zuri-shop-archive {
  background: #fff;
}

.zuri-shop-container {
  width: min(100% - 4rem, 1500px);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5rem;
  padding-bottom: 7rem;
}

.zuri-shop-header {
  margin-bottom: 3rem;
  text-align: left;
}

.zuri-shop-header .page-title {
  margin: 0;
  color: #222;
  font-size: clamp(3.2rem, 4vw, 5.2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.zuri-shop-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid #ebebeb;
  background: #fff;
}

.zuri-shop-topbar-left,
.zuri-shop-topbar-right {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.zuri-shop-topbar .woocommerce-result-count,
.zuri-shop-topbar .woocommerce-ordering {
  margin: 0;
}

.zuri-shop-topbar .woocommerce-result-count {
  color: #777;
  font-size: .95rem;
}

.zuri-shop-topbar .woocommerce-ordering select {
  min-width: 220px;
  height: 42px;
  padding: 0 40px 0 14px;
  border: 1px solid #ddd;
  background-color: #fff;
  color: #666;
}

.zuri-shop-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}

.zuri-shop-sidebar {
  min-width: 0;
  padding: 2.4rem;
  border: 1px solid #ebebeb;
  background: #fff;
}

.zuri-shop-sidebar .suuef-shop-widget {
  padding: 0 0 2rem;
  margin: 0 0 2rem;
  border: 0;
  border-bottom: 1px solid #ebebeb;
  border-radius: 0;
}

.zuri-shop-sidebar .suuef-shop-widget:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.zuri-shop-sidebar .suuef-shop-widget h5 {
  margin-bottom: 1rem;
  color: #222;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.zuri-shop-products ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4rem 2.8rem;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}

.zuri-shop-products ul.products::before,
.zuri-shop-products ul.products::after {
  display: none !important;
}

.zuri-shop-products ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}

/* Preserve the Bookly homepage card presentation inside the Zuricom layout. */

.zuri-shop-products .suuef-bookly-product-card {
  height: 100%;
}

.zuri-shop-products .suuef-bookly-product-card .suuef-product-image-link>img,
.zuri-shop-products .suuef-bookly-product-card .suuef-product-placeholder {
  height: 300px;
}

/* Zuricom blog structure and card design. */

.suuef-blog-page,
.suuef-blog-main {
  background: #fff;
}

.zuri-blog-wrap {
  width: min(100% - 4rem, 1180px);
  margin-left: auto;
  margin-right: auto;
  padding-top: 5rem;
  padding-bottom: 7rem;
}

.zuri-blog-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0 18px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.zuri-blog-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zuri-blog-cats a {
  padding: 6px 8px;
  border-radius: 999px;
  color: rgba(0,0,0,.72);
  font-weight: 500;
  text-decoration: none;
}

.zuri-blog-cats a:hover,
.zuri-blog-cats .current-cat>a {
  background: rgba(0,0,0,.04);
}

.zuri-blog-search {
  position: relative;
  width: min(360px, 100%);
  flex: 0 1 360px;
}

.zuri-blog-search input[type="search"] {
  width: 100%;
  height: 42px;
  padding: 0 44px 0 16px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  background: #fff;
  outline: none;
}

.zuri-blog-search button {
  position: absolute;
  right: 8px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(0,0,0,.62);
  transform: translateY(-50%);
  cursor: pointer;
}

.zuri-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px;
  padding: 36px 0 10px;
}

.zuri-blog-card {
  background: transparent;
}

.zuri-blog-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(0,0,0,.03);
}

.zuri-blog-card__media a {
  display: block;
  width: 100%;
  height: 100%;
}

.zuri-blog-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.zuri-blog-card__title {
  margin: 14px 0 10px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.zuri-blog-card__title a {
  color: inherit;
  text-decoration: none;
}

.zuri-blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
  color: rgba(0,0,0,.55);
  font-size: 14px;
}

.zuri-blog-card__meta a {
  color: inherit;
  text-decoration: none;
}

.zuri-blog-card__excerpt {
  margin: 0 0 14px;
  color: rgba(0,0,0,.55);
  line-height: 1.7;
}

.zuri-blog-card__more a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
}

.zuri-blog-pagination {
  margin-top: 42px;
}

.zuri-blog-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.zuri-blog-pagination a,
.zuri-blog-pagination span {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #e5e5e5;
  color: #333;
  text-decoration: none;
}

.zuri-blog-pagination .current {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: #fff;
}

/* Keep the Bookly Latest Posts strip present and visually faithful. */

#latest-posts .posts img {
  width: 100%;
  aspect-ratio: 1.52 / 1;
  object-fit: cover;
}

#latest-posts .posts .card-title {
  font-size: 1.25rem;
  line-height: 1.2;
}

/* Contact follows the same centered desktop width rhythm as the footer. */

.suuef-contact-main {
  width: min(100% - 4rem, 1320px);
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

@media (max-width:1024px) {
  .zuri-shop-products ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
  .zuri-blog-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 28px;
  }
}

@media (max-width:991px) {
  .zuri-shop-layout {
    grid-template-columns: 1fr;
  }
  .zuri-shop-sidebar {
    order: 2;
  }
}

@media (max-width:640px) {
  .zuri-shop-container,
  .zuri-blog-wrap,
  .suuef-contact-main {
    width: min(100% - 2rem, 100%);
  }
  .zuri-shop-topbar {
    flex-direction: column;
    align-items: stretch;
  }
  .zuri-shop-topbar-left,
  .zuri-shop-topbar-right {
    width: 100%;
    justify-content: space-between;
  }
  .zuri-shop-topbar .woocommerce-ordering,
  .zuri-shop-topbar .woocommerce-ordering select {
    width: 100%;
    min-width: 0;
  }
  .zuri-shop-products ul.products {
    grid-template-columns: 1fr;
  }
  .zuri-blog-topbar {
    flex-direction: column;
    align-items: stretch;
  }
  .zuri-blog-search {
    flex-basis: auto;
    width: 100%;
  }
  .zuri-blog-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* ==========================================================================
   Suuef Products 1.1.3 — shared centered page frame
   ========================================================================== */

/*
 * Inner-page content follows the exact same Bootstrap container rhythm used by
 * the Bookly-style header and footer. Elementor sections may still have their
 * own narrower boxed content widths, but they are not allowed to stretch past
 * this frame and touch the browser edges.
 */

.suuef-page-frame {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
}

/* Elementor writes inline width/left values for legacy stretched sections.
 * Neutralise those only inside framed inner pages so existing 1.1.2 starter
 * pages are fixed immediately without overwriting a user's Elementor content.
 */

.suuef-page-frame>.elementor,
.suuef-page-frame>.elementor>.elementor-section-wrap,
.suuef-page-frame .elementor-section.elementor-section-stretched {
  width: 100% !important;
  max-width: 100% !important;
  left: auto !important;
  right: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.suuef-page-frame .elementor-section>.elementor-container {
  margin-left: auto;
  margin-right: auto;
}

/* Keep the Zuricom-style shop and blog aligned with the same site frame. */

.zuri-shop-container,
.zuri-blog-wrap {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
}

/* Contact used an additional 1320px width calculation in 1.1.2. The shared
 * page frame is now authoritative. */

.suuef-contact-main {
  width: 100%;
  max-width: 1320px;
  padding-left: 12px;
  padding-right: 12px;
  overflow: hidden;
}

@media (max-width:1399.98px) {
  .suuef-page-frame,
  .zuri-shop-container,
  .zuri-blog-wrap,
  .suuef-contact-main {
    max-width: 1140px;
  }
}

@media (max-width:1199.98px) {
  .suuef-page-frame,
  .zuri-shop-container,
  .zuri-blog-wrap,
  .suuef-contact-main {
    max-width: 960px;
  }
}

@media (max-width:991.98px) {
  .suuef-page-frame,
  .zuri-shop-container,
  .zuri-blog-wrap,
  .suuef-contact-main {
    max-width: 720px;
  }
}

@media (max-width:767.98px) {
  .suuef-page-frame,
  .zuri-shop-container,
  .zuri-blog-wrap,
  .suuef-contact-main {
    max-width: 540px;
  }
}

@media (max-width:575.98px) {
  .suuef-page-frame,
  .zuri-shop-container,
  .zuri-blog-wrap,
  .suuef-contact-main {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ==========================================================================
   Suuef Products 1.1.4 — homepage content frame alignment
   --------------------------------------------------------------------------
   Homepage backgrounds remain full bleed, but every inner content container
   follows the same 1320px centered frame as the header/footer. The hero image
   is also constrained to its Bootstrap column so it cannot overflow the frame.
   ========================================================================== */

:root {
  --suuef-site-content-width: 1320px;
}

body.home .site-main #billboard .swiper-slide>.container,
body.home .site-main #company-services>.container,
body.home .site-main #best-selling-items>.container,
body.home .site-main #limited-offer>.container,
body.home .site-main #items-listing>.container,
body.home .site-main #categories>.container,
body.home .site-main #latest-posts>.container,
body.home .site-main #instagram>.container {
  width: 100%;
  max-width: var(--suuef-site-content-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 12px;
  padding-right: 12px;
}

/* Keep hero media inside its 50%/Bootstrap column. 1.1.3 inherited Bookly's
 * width:auto rule, which let large screenshots extend beyond the site frame. */

body.home #billboard .image-holder {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

body.home #billboard .image-holder img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  max-height: 650px;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
}

/* The testimonial background remains full bleed, while the review card is
 * centered independently instead of relying on Bootstrap offset on a container. */

body.home #customers-reviews>.container {
  width: min(100% - 24px, 660px);
  max-width: 660px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width:575.98px) {
  body.home .site-main #billboard .swiper-slide>.container,
  body.home .site-main #company-services>.container,
  body.home .site-main #best-selling-items>.container,
  body.home .site-main #limited-offer>.container,
  body.home .site-main #items-listing>.container,
  body.home .site-main #categories>.container,
  body.home .site-main #latest-posts>.container,
  body.home .site-main #instagram>.container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ==========================================================================
   Suuef Products 1.1.5 — real inner-page frame + Zuricom blog detail
   --------------------------------------------------------------------------
   The previous inner-page stylesheet imported a Zuricom legacy reset that
   explicitly set .site-main to max-width:none and zero margins. That selector
   was more specific than .suuef-page-frame, so About/Contact could still fill
   the viewport even though the wrapper looked correct in PHP. 1.1.5 makes the
   Bookly/Home content frame authoritative on every inner page.
   ========================================================================== */

body.suuef-centered-inner-page #primary.suuef-page-frame,
body.page-template-template-full-width #primary.suuef-page-frame,
.suuef-single-post-frame {
  width: 100%;
  max-width: var(--suuef-site-content-width, 1320px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 12px;
  padding-right: 12px;
}

/* Elementor may retain old section geometry in the database. Keep the outer
 * section itself inside the page frame; each section's own boxed inner width
 * (1140/1040/720 etc.) remains editable and is not overridden here. */

body.suuef-centered-inner-page #primary.suuef-page-frame>.elementor,
body.suuef-centered-inner-page #primary.suuef-page-frame>.elementor>.elementor-section-wrap,
body.suuef-centered-inner-page #primary.suuef-page-frame .elementor-section,
body.page-template-template-full-width #primary.suuef-page-frame .elementor-section {
  width: 100% !important;
  max-width: 100% !important;
  left: auto !important;
  right: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.suuef-centered-inner-page #primary.suuef-page-frame .elementor-section>.elementor-container,
body.page-template-template-full-width #primary.suuef-page-frame .elementor-section>.elementor-container {
  margin-left: auto;
  margin-right: auto;
}

/* Shop: same Zuricom archive geometry, aligned to the Bookly/Home frame. */

body.woocommerce-shop .zuri-shop-container,
body.tax-product_cat .zuri-shop-container,
body.tax-product_tag .zuri-shop-container {
  width: 100%;
  max-width: var(--suuef-site-content-width, 1320px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
}

/* Blog listing: no marketing hero, just Zuricom's category/search topbar + cards. */

.suuef-blog-page .zuri-blog-wrap,
.suuef-blog-main .zuri-blog-wrap {
  width: 100%;
  max-width: var(--suuef-site-content-width, 1320px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* Single blog — Zuricom-style content/sidebar shell. */

.suuef-single-post-main {
  background: #fff;
  padding: 64px 0 92px;
}

.suuef-single-post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 54px;
  align-items: start;
}

.suuef-single-post-content,
.suuef-blog-sidebar {
  min-width: 0;
}

.suuef-single-article.zuri-single {
  max-width: none;
  margin: 0;
  padding: 0;
}

.suuef-single-kicker {
  margin-bottom: 14px;
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.suuef-single-kicker a {
  color: var(--primary-color);
  text-decoration: none;
}

.suuef-single-article .zuri-single__title {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.suuef-single-article .zuri-single__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(0,0,0,.55);
  font-size: .88rem;
}

.suuef-single-article .zuri-single__meta a {
  color: inherit;
  text-decoration: none;
}

.suuef-single-article .zuri-single__meta a:hover {
  color: var(--primary-color);
}

.suuef-single-article .zuri-single__featured {
  margin: 30px 0 34px;
  border-radius: 14px;
  overflow: hidden;
  background: #f5f5f5;
}

.suuef-single-article .zuri-single__featured img {
  display: block;
  width: 100%;
  height: auto;
}

.suuef-single-article .entry-content {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(0,0,0,.68);
  font-size: 1rem;
  line-height: 1.9;
}

.suuef-single-article .entry-content>*:first-child {
  margin-top: 0;
}

.suuef-single-article .entry-content h2,
.suuef-single-article .entry-content h3,
.suuef-single-article .entry-content h4 {
  color: #272727;
  margin-top: 2rem;
}

.suuef-single-article .entry-content blockquote {
  position: relative;
  margin: 2rem 0;
  padding: 28px 30px;
  border-left: 4px solid var(--primary-color);
  border-radius: 0 12px 12px 0;
  background: #f8f7fb;
  color: #333;
}

.suuef-single-article .entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.suuef-single-article .zuri-single__footer {
  max-width: 820px;
  margin: 38px auto 0;
}

.suuef-muted {
  color: rgba(0,0,0,.45);
  font-size: .9rem;
}

/* Post navigation. */

.suuef-post-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
  max-width: 820px;
  margin: 44px auto 0;
  padding-top: 28px;
  border-top: 1px solid #ececec;
}

.suuef-post-navigation a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 92px;
  padding: 18px 20px;
  border: 1px solid #ececec;
  border-radius: 10px;
  color: #272727;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}

.suuef-post-navigation a:hover {
  border-color: var(--primary-color);
  transform: translateY(-2px);
}

.suuef-post-navigation span {
  color: rgba(0,0,0,.48);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.suuef-post-navigation strong {
  font-size: .95rem;
  line-height: 1.35;
}

.suuef-post-navigation__next {
  text-align: right;
}

/* Blog sidebar — customisable via Appearance > Widgets with useful fallbacks. */

.suuef-blog-sidebar {
  position: sticky;
  top: 36px;
}

.admin-bar .suuef-blog-sidebar {
  top: 68px;
}

.suuef-blog-widget {
  margin-bottom: 26px;
  padding: 24px;
  border: 1px solid #ececec;
  border-radius: 12px;
  background: #fff;
}

.suuef-blog-widget__title {
  margin: 0 0 18px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
}

.suuef-blog-widget .search-form {
  display: flex;
  gap: 8px;
}

.suuef-blog-widget .search-field {
  min-width: 0;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.suuef-blog-widget .search-submit {
  flex: 0 0 auto;
  border: 0;
  border-radius: 6px;
  background: #272727;
  color: #fff;
  padding: 0 14px;
}

.suuef-recent-post {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);
  gap: 13px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid #f0f0f0;
}

.suuef-recent-post:first-child {
  padding-top: 0;
}

.suuef-recent-post:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.suuef-recent-post__thumb {
  display: block;
  width: 76px;
  height: 70px;
  overflow: hidden;
  border-radius: 8px;
  background: #f4f4f4;
}

.suuef-recent-post__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.suuef-recent-post__body time {
  display: block;
  margin-bottom: 4px;
  color: rgba(0,0,0,.45);
  font-size: .72rem;
}

.suuef-recent-post__body h4 {
  margin: 0;
  font-size: .88rem;
  line-height: 1.35;
  font-weight: 700;
}

.suuef-recent-post__body a {
  color: #272727;
  text-decoration: none;
}

.suuef-recent-post__body a:hover {
  color: var(--primary-color);
}

.suuef-blog-category-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.suuef-blog-category-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid #f1f1f1;
  color: rgba(0,0,0,.45);
}

.suuef-blog-category-list li:last-child {
  border-bottom: 0;
}

.suuef-blog-category-list a {
  color: #4b4b4b;
  text-decoration: none;
}

.suuef-blog-category-list a:hover {
  color: var(--primary-color);
}

/* Comments — based on Zuricom's single-post flow, polished for this theme. */

.suuef-comments-area {
  max-width: 820px;
  margin: 52px auto 0;
  padding-top: 42px;
  border-top: 1px solid #e9e9e9;
}

.suuef-comments-eyebrow {
  margin: 0 0 6px;
  color: var(--primary-color);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.suuef-comments-heading h2,
.suuef-comment-form__heading h2 {
  margin: 0 0 24px;
  font-size: 1.55rem;
}

.suuef-comment-list {
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

.suuef-comment-list .comment {
  list-style: none;
}

.suuef-comment-list .comment-body {
  position: relative;
  margin-bottom: 18px;
  padding: 22px 22px 22px 88px;
  border: 1px solid #ececec;
  border-radius: 12px;
  background: #fff;
}

.suuef-comment-list .avatar {
  position: absolute;
  top: 22px;
  left: 22px;
  border-radius: 50%;
}

.suuef-comment-list .comment-author {
  font-weight: 700;
}

.suuef-comment-list .comment-meta {
  margin-bottom: 10px;
  font-size: .78rem;
  color: rgba(0,0,0,.45);
}

.suuef-comment-list .comment-meta a {
  color: inherit;
  text-decoration: none;
}

.suuef-comment-list .reply a {
  color: var(--primary-color);
  font-weight: 700;
  text-decoration: none;
}

.suuef-comment-list .children {
  margin-left: 54px;
  padding-left: 0;
  list-style: none;
}

.suuef-comment-form {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
  padding: 28px;
  border-radius: 14px;
  background: #f8f7fb;
}

.suuef-comment-form>* {
  margin: 0;
}

.suuef-comment-form .comment-reply-title,
.suuef-comment-form .comment-notes,
.suuef-comment-form .comment-form-url,
.suuef-comment-form .comment-form-comment,
.suuef-comment-form .comment-form-cookies-consent,
.suuef-comment-form .form-submit,
.suuef-comment-form__heading {
  grid-column: 1 / -1;
}

.suuef-comment-form label {
  display: block;
  margin-bottom: 7px;
  font-size: .85rem;
  font-weight: 700;
}

.suuef-comment-form input[type="text"],
.suuef-comment-form input[type="email"],
.suuef-comment-form input[type="url"],
.suuef-comment-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
}

.suuef-comment-form textarea {
  min-height: 170px;
  resize: vertical;
}

.suuef-comment-submit {
  width: auto !important;
  min-width: 150px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: #272727;
  color: #fff;
  font-weight: 700;
}

.suuef-comment-submit:hover {
  background: var(--primary-color);
}

@media (max-width:1399.98px) {
  body.suuef-centered-inner-page #primary.suuef-page-frame,
  body.page-template-template-full-width #primary.suuef-page-frame,
  .suuef-single-post-frame {
    max-width: 1140px;
  }
}

@media (max-width:1199.98px) {
  body.suuef-centered-inner-page #primary.suuef-page-frame,
  body.page-template-template-full-width #primary.suuef-page-frame,
  .suuef-single-post-frame {
    max-width: 960px;
  }
  .suuef-single-post-layout {
    grid-template-columns: minmax(0,1fr) 290px;
    gap: 34px;
  }
}

@media (max-width:991.98px) {
  body.suuef-centered-inner-page #primary.suuef-page-frame,
  body.page-template-template-full-width #primary.suuef-page-frame,
  .suuef-single-post-frame {
    max-width: 720px;
  }
  .suuef-single-post-layout {
    grid-template-columns: 1fr;
  }
  .suuef-blog-sidebar {
    position: static;
  }
}

@media (max-width:767.98px) {
  body.suuef-centered-inner-page #primary.suuef-page-frame,
  body.page-template-template-full-width #primary.suuef-page-frame,
  .suuef-single-post-frame {
    max-width: 540px;
  }
}

@media (max-width:575.98px) {
  body.suuef-centered-inner-page #primary.suuef-page-frame,
  body.page-template-template-full-width #primary.suuef-page-frame,
  .suuef-single-post-frame {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .suuef-single-post-main {
    padding-top: 42px;
    padding-bottom: 64px;
  }
  .suuef-single-article .zuri-single__footer {
    flex-direction: column;
  }
  .suuef-single-article .zuri-share {
    text-align: left;
  }
  .suuef-single-article .zuri-share__buttons a {
    margin-left: 0;
    margin-right: 8px;
  }
  .suuef-post-navigation {
    grid-template-columns: 1fr;
  }
  .suuef-post-navigation__next {
    text-align: left;
  }
  .suuef-comment-form {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .suuef-comment-form .comment-form-author,
  .suuef-comment-form .comment-form-email {
    grid-column: 1 / -1;
  }
  .suuef-comment-list .comment-body {
    padding-left: 72px;
  }
  .suuef-comment-list .avatar {
    width: 40px;
    height: 40px;
  }
  .suuef-comment-list .children {
    margin-left: 20px;
  }
}

/* ==========================================================================
   Suuef Products 1.1.7 — Elementor-first marketplace controls
   ========================================================================== */

/* The Shop Catalog widget owns its column count through an Elementor control. */

.suuef-elementor-shop .zuri-shop-products ul.products {
  grid-template-columns: repeat(var(--suuef-shop-columns, 3), minmax(0, 1fr));
}

.suuef-elementor-shop .zuri-shop-layout.no-sidebar {
  grid-template-columns: minmax(0, 1fr);
}

.suuef-elementor-shop .zuri-shop-layout.no-sidebar .zuri-shop-products {
  grid-column: 1 / -1;
}

/* Elementor-generated background controls live on the widget wrapper. Custom
 * widgets therefore keep transparent section defaults unless a section itself
 * has an explicitly selected image in its content controls. */

.elementor-widget-suuef-bookly-services #company-services,
.elementor-widget-suuef-bookly-products #best-selling-items,
.elementor-widget-suuef-bookly-product-lists #items-listing,
.elementor-widget-suuef-bookly-categories #categories,
.elementor-widget-suuef-bookly-posts #latest-posts,
.elementor-widget-suuef-bookly-instagram #instagram,
.elementor-widget-suuef-zuricom-blog-index .zuri-blog-wrap,
.elementor-widget-suuef-zuricom-shop-catalog .suuef-elementor-shop {
  background-color: transparent;
}

/* Keep Elementor-controlled product image heights responsive and prevent
 * inherited WooCommerce dimensions from fighting the widget style setting. */

.elementor-widget-suuef-zuricom-shop-catalog .suuef-bookly-product-card img,
.elementor-widget-suuef-bookly-products .suuef-bookly-product-card img {
  max-width: 100%;
}

/* The shared product-detail widget gets its own selector so Elementor style
 * controls can target the dynamic WooCommerce markup without changing global
 * WooCommerce settings elsewhere on the site. */

.suuef-product-detail-widget {
  width: 100%;
}

@media (max-width:1024px) {
  .suuef-elementor-shop .zuri-shop-products ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:767px) {
  .suuef-elementor-shop .zuri-shop-products ul.products {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Suuef Products 1.1.8 — live-store normalization
   ========================================================================== */

/* A neutral system stack keeps the marketplace consistent across WordPress,
 * WooCommerce and Elementor without requiring an external font request. */

body,
button,
input,
select,
textarea,
.woocommerce,
.woocommerce-page {
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6,
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce-page h3 {
  font-family: var(--heading-font);
  line-height: 1.22;
  letter-spacing: -0.015em;
  text-transform: none;
}

/* Keep storefront content on the same desktop rhythm as the Bookly-style
 * header/home/footer rather than allowing WooCommerce to become extra-wide. */

.zuri-shop-container,
.suuef-shop-elementor-page .zuri-shop-container,
.suuef-elementor-shop .zuri-shop-container {
  width: min(1320px, calc(100% - 40px));
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

.zuri-shop-main,
.suuef-shop-elementor-page {
  padding: 56px 0 88px;
}

.zuri-shop-header {
  margin: 0 0 28px;
}

.zuri-shop-header .page-title,
.suuef-elementor-shop .zuri-shop-header .page-title {
  margin: 0;
  font-size: clamp(2rem, 3vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.035em;
}

.zuri-shop-topbar {
  padding: 14px 18px;
  margin-bottom: 30px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  background: #fff;
}

.zuri-shop-topbar .woocommerce-result-count {
  color: #6b7280;
  font-size: 14px;
}

.zuri-shop-topbar .woocommerce-ordering select {
  min-width: 210px;
  min-height: 44px;
  border: 1px solid #dedede;
  border-radius: 7px;
  color: #303030;
  font-size: 14px;
}

.zuri-shop-layout {
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

/* Dedicated Suuef sidebar typography. This also protects the layout if the
 * merchant later adds standard WordPress block widgets to this sidebar. */

.zuri-shop-sidebar,
.zuri-shop-sidebar .widget,
.zuri-shop-sidebar .wp-block-group,
.zuri-shop-sidebar .suuef-shop-widget {
  min-width: 0;
  font-size: 14px;
  line-height: 1.55;
}

.zuri-shop-sidebar .suuef-shop-widget {
  padding: 0 0 22px;
  margin: 0 0 24px;
  border: 0;
  border-bottom: 1px solid #ececec;
  border-radius: 0;
  background: transparent;
}

.zuri-shop-sidebar .suuef-shop-widget h5,
.zuri-shop-sidebar .widget-title,
.zuri-shop-sidebar .wp-block-heading,
.zuri-shop-sidebar h2,
.zuri-shop-sidebar h3,
.zuri-shop-sidebar h4,
.zuri-shop-sidebar h5,
.zuri-shop-sidebar h6 {
  margin: 0 0 14px !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.zuri-shop-sidebar ul {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

.zuri-shop-sidebar li {
  padding: 7px 0;
  border-bottom: 1px solid #f0f0f0;
}

.zuri-shop-sidebar li:last-child {
  border-bottom: 0;
}

.zuri-shop-sidebar a {
  font-size: 14px;
  line-height: 1.45;
}

.zuri-shop-sidebar .woocommerce-product-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.zuri-shop-sidebar .woocommerce-product-search input[type="search"] {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  font-size: 14px;
}

.zuri-shop-sidebar .woocommerce-product-search button {
  margin: 0;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
}

.suuef-sidebar-product a {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}

.suuef-sidebar-product img,
.suuef-sidebar-product .suuef-product-placeholder {
  width: 54px;
  height: 54px;
  border-radius: 7px;
}

.suuef-sidebar-product span {
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: break-word;
}

.zuri-shop-products ul.products {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.zuri-shop-products ul.products li.product,
.zuri-shop-products .suuef-bookly-product-card,
.zuri-shop-products .suuef-bookly-product-card * {
  min-width: 0;
}

.zuri-shop-products .suuef-bookly-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px !important;
  border: 1px solid #e9e9e9 !important;
  border-radius: 14px !important;
  background: #fff;
  box-shadow: 0 5px 20px rgba(20, 20, 20, .045);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.zuri-shop-products .suuef-bookly-product-card:hover {
  transform: translateY(-3px);
  border-color: #dedede !important;
  box-shadow: 0 12px 30px rgba(20, 20, 20, .08);
}

.zuri-shop-products .suuef-bookly-product-card .suuef-product-image-link {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: #f7f7f8;
}

.zuri-shop-products .suuef-bookly-product-card .suuef-product-image-link>img,
.zuri-shop-products .suuef-bookly-product-card .suuef-product-placeholder {
  display: block;
  width: 100%;
  height: 245px;
  margin: 0;
  border-radius: 10px;
  object-fit: cover;
}

.zuri-shop-products .suuef-bookly-product-card h6 {
  margin: 15px 0 0 !important;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  word-break: normal;
  overflow-wrap: break-word;
}

.zuri-shop-products .suuef-bookly-product-card h6 a {
  font-size: inherit;
  line-height: inherit;
}

.zuri-shop-products .suuef-bookly-product-card .review-content {
  min-height: 28px;
  margin: 5px 0 4px;
}

.zuri-shop-products .suuef-bookly-product-card .review-content p {
  margin: 0 8px 0 0 !important;
  font-size: 12.5px;
  line-height: 1.4;
}

.zuri-shop-products .suuef-bookly-product-card .rating {
  font-size: 12px;
}

.zuri-shop-products .suuef-bookly-product-card .price {
  display: block;
  margin: auto 0 0 !important;
  padding-top: 7px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--primary-color) !important;
}

.zuri-shop-products .suuef-bookly-product-card .suuef-sale-badge {
  top: 26px;
  left: 26px;
}

.zuri-shop-products .suuef-bookly-product-card .suuef-sale-badge p {
  margin: 0;
  padding: 5px 9px !important;
  font-size: 12px;
  border-radius: 999px !important;
}

.zuri-shop-products .suuef-bookly-product-card .card-concern {
  position: static !important;
  display: flex !important;
  gap: 8px !important;
  margin-top: 13px;
  opacity: 1 !important;
  transform: none !important;
}

.zuri-shop-products .suuef-bookly-product-card .card-concern .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 7px;
}

.zuri-shop-products .suuef-bookly-product-card .card-concern svg {
  width: 17px;
  height: 17px;
}

/* Keep imported Zuricom-style About/Contact Elementor sections aligned with
 * the same content line used by the homepage and shell. */

body.suuef-page-about #primary.suuef-page-frame,
body.suuef-page-contact #primary.suuef-page-frame,
body.suuef-page-blog #primary.suuef-page-frame,
body.suuef-page-cart #primary.suuef-page-frame,
body.suuef-page-checkout #primary.suuef-page-frame,
body.suuef-page-account #primary.suuef-page-frame,
body.suuef-page-wishlist #primary.suuef-page-frame {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

body.suuef-centered-inner-page #primary>.elementor,
body.suuef-centered-inner-page #primary>.elementor>.elementor-element,
body.suuef-centered-inner-page #primary .elementor-section.elementor-section-boxed>.elementor-container {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width:1199.98px) {
  .zuri-shop-products ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .zuri-shop-layout {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 28px;
  }
}

@media (max-width:991.98px) {
  .zuri-shop-layout {
    grid-template-columns: 1fr;
  }
  .zuri-shop-sidebar {
    order: 2;
  }
  .zuri-shop-products .suuef-bookly-product-card .suuef-product-image-link>img,
  .zuri-shop-products .suuef-bookly-product-card .suuef-product-placeholder {
    height: 280px;
  }
}

@media (max-width:575.98px) {
  .zuri-shop-container,
  .suuef-shop-elementor-page .zuri-shop-container,
  .suuef-elementor-shop .zuri-shop-container {
    width: min(100% - 30px, 1320px);
  }
  .zuri-shop-products ul.products {
    grid-template-columns: 1fr;
  }
  .zuri-shop-main,
  .suuef-shop-elementor-page {
    padding-top: 36px;
  }
}

/* --------------------------------------------------------------------------
   WooCommerce system pages — preserve logic, normalize presentation only
   -------------------------------------------------------------------------- */

body.suuef-page-account #primary,
body.suuef-page-cart #primary,
body.suuef-page-checkout #primary {
  min-height: 55vh;
}

body.suuef-page-account #primary>.container,
body.suuef-page-cart #primary>.container,
body.suuef-page-checkout #primary>.container,
body.suuef-page-account #primary.suuef-page-frame,
body.suuef-page-cart #primary.suuef-page-frame,
body.suuef-page-checkout #primary.suuef-page-frame {
  width: min(1320px, calc(100% - 40px));
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

body.suuef-page-account .woocommerce {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

body.suuef-page-account .woocommerce::before,
body.suuef-page-account .woocommerce::after {
  display: none;
}

body.suuef-page-account .woocommerce-MyAccount-navigation,
body.suuef-page-account .woocommerce-MyAccount-content {
  width: auto;
  float: none;
}

body.suuef-page-account .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 12px;
  list-style: none;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  background: #fff;
}

body.suuef-page-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  border-bottom: 1px solid #efefef;
}

body.suuef-page-account .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: 0;
}

body.suuef-page-account .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 11px 12px;
  color: #272727;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  border-radius: 7px;
}

body.suuef-page-account .woocommerce-MyAccount-navigation .is-active>a,
body.suuef-page-account .woocommerce-MyAccount-navigation a:hover {
  color: #fff;
  background: var(--primary-color);
}

body.suuef-page-account .woocommerce-MyAccount-content {
  min-width: 0;
  padding: 28px;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  background: #fff;
}

body.suuef-page-account .woocommerce-MyAccount-content h2,
body.suuef-page-account .woocommerce-MyAccount-content h3 {
  margin-top: 0;
  font-size: 1.5rem;
}

body.suuef-page-account .woocommerce table.shop_table,
body.suuef-page-account .woocommerce-orders-table,
body.suuef-page-account .woocommerce-table {
  font-size: 14px;
}

body.suuef-page-account .woocommerce-message,
body.suuef-page-account .woocommerce-info,
body.suuef-page-account .woocommerce-error {
  font-size: 14px;
}

@media (max-width:767.98px) {
  body.suuef-page-account .woocommerce {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  body.suuef-page-account .woocommerce-MyAccount-content {
    padding: 20px;
  }
}