:root {
  --theme-bg: #ffffff;
  --theme-surface: #ffffff;
  --theme-surface-alt: #f5f5f5;
  --theme-border: #e8e8e8;
  --theme-text: #181818;
  --theme-muted: #727272;
  --theme-accent: #f75f1d;
}

html[data-theme="dark"] {
  --theme-bg: #101214;
  --theme-surface: #171a1d;
  --theme-surface-alt: #20242a;
  --theme-border: #2d333b;
  --theme-text: #e9edf2;
  --theme-muted: #adb4be;
  --theme-accent: #ff8f57;
  --secondary: #b7bec8;
  --secondary-2: #8e97a3;
  --line: #2d333b;
}

body {
  background-color: var(--theme-bg);
  color: var(--theme-text);
}

.page-title {
  background-image: url("../images/section/page-title.jpg");
}

@media (min-width: 768px) {
  .page-title.page-title--shop {
    background-image: url("../images/section/shop-banner-desktop.jpg");
  }

  .page-title.page-title--recipe {
    background-image: url("../images/section/recipe-banner-desktop.jpg");
  }

  .page-title.page-title--orders {
    background-image: url("../images/section/orders-banner-desktop.jpg");
  }

  .page-title.page-title--account {
    background-image: url("../images/section/account-banner-desktop.jpg");
  }
}

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--theme-border);
  border-radius: 999px;
  background: var(--theme-surface);
  color: var(--theme-text);
  padding: 4px 10px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-toggle-btn:hover {
  border-color: var(--theme-accent);
}

.theme-toggle-btn .theme-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle-btn .theme-icon-sun {
  display: none;
}

.theme-toggle-btn.is-dark .theme-icon-moon {
  display: none;
}

.theme-toggle-btn.is-dark .theme-icon-sun {
  display: inline-flex;
}

.theme-toggle-btn .theme-toggle-label {
  font-size: 12px;
  font-weight: 600;
}

.theme-toggle-btn--topbar {
  margin-left: 8px;
}

.nav-theme .theme-toggle-btn {
  width: 36px;
  height: 36px;
  justify-content: center;
  padding: 0;
}

.nav-theme .theme-toggle-label {
  display: none;
}

.logo-header .logo-contrast {
  display: none;
}

html[data-theme="dark"] .logo-header .logo-default {
  display: none;
}

html[data-theme="dark"] .logo-header .logo-contrast {
  display: inline-block;
}

html[data-theme="dark"] #header,
html[data-theme="dark"] .header-default,
html[data-theme="dark"] .wrapper-header,
html[data-theme="dark"] .dropdown-account,
html[data-theme="dark"] .dropdown-account .sub-top,
html[data-theme="dark"] .dropdown-account .sub-bot,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .card-product,
html[data-theme="dark"] .my-account-wrap,
html[data-theme="dark"] .sidebar-account,
html[data-theme="dark"] .my-account-content,
html[data-theme="dark"] .box-order,
html[data-theme="dark"] .widget-facet,
html[data-theme="dark"] .tf-table-page-cart,
html[data-theme="dark"] .account-orders table,
html[data-theme="dark"] .account-order-details,
html[data-theme="dark"] .tf-cart-item {
  background-color: var(--theme-surface);
  color: var(--theme-text);
  border-color: var(--theme-border);
}

html[data-theme="dark"] .my-account-nav .my-account-nav-item,
html[data-theme="dark"] .title,
html[data-theme="dark"] .heading,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .h6,
html[data-theme="dark"] .name,
html[data-theme="dark"] .item-link,
html[data-theme="dark"] .text,
html[data-theme="dark"] .link,
html[data-theme="dark"] .text-button,
html[data-theme="dark"] .body-text-1,
html[data-theme="dark"] .body-text,
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] span,
html[data-theme="dark"] label {
  color: var(--theme-text);
}

html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-caption-1,
html[data-theme="dark"] .text-secondary-2,
html[data-theme="dark"] .subheading,
html[data-theme="dark"] .count-stock,
html[data-theme="dark"] .count-cut,
html[data-theme="dark"] .count-cate,
html[data-theme="dark"] .body-text-2 {
  color: var(--theme-muted) !important;
}

html[data-theme="dark"] .tf-product-info-list .tf-product-info-name > .text,
html[data-theme="dark"] .tf-product-info-list .tf-product-info-rate .text,
html[data-theme="dark"] .tf-product-info-list .tf-product-info-desc > p,
html[data-theme="dark"] .tf-product-info-list .tf-product-info-help .tf-product-info-available p,
html[data-theme="dark"] .tf-product-info-list .tf-product-info-help .tf-product-info-return p,
html[data-theme="dark"] .tf-product-info-list .tf-product-info-help .tf-product-info-time p,
html[data-theme="dark"] .tf-product-info-list ul.tf-product-info-sku li .text-1 {
  color: var(--theme-muted) !important;
}

html[data-theme="dark"] .tf-product-info-list .tf-product-info-name .name,
html[data-theme="dark"] .tf-product-info-price .price-on-sale,
html[data-theme="dark"] .tf-product-info-list .tf-product-info-help .tf-product-info-available p span,
html[data-theme="dark"] .tf-product-info-list .tf-product-info-help .tf-product-info-return p span,
html[data-theme="dark"] .tf-product-info-list .tf-product-info-help .tf-product-info-time p span {
  color: var(--theme-text) !important;
}

html[data-theme="dark"] .product-title {
  color: var(--theme-text) !important;
}

html[data-theme="dark"] .tf-topbar,
html[data-theme="dark"] .tf-topbar.bg-main,
html[data-theme="dark"] .tf-topbar.bg-primary,
html[data-theme="dark"] footer.footer {
  background-color: #0d0f11;
}

html[data-theme="dark"] .canvas-filter,
html[data-theme="dark"] .canvas-filter .canvas-wrapper,
html[data-theme="dark"] .canvas-filter .canvas-header,
html[data-theme="dark"] .canvas-filter .canvas-body,
html[data-theme="dark"] .canvas-filter .canvas-bottom {
  background-color: var(--theme-surface);
  color: var(--theme-text);
}

html[data-theme="dark"] .canvas-filter .icon-close-popup {
  color: var(--theme-text);
}

html[data-theme="dark"] .page-title::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .page-title {
  position: relative;
}

html[data-theme="dark"] .page-title > * {
  position: relative;
  z-index: 1;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-search fieldset input {
  background-color: var(--theme-surface-alt) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--theme-muted) !important;
}

html[data-theme="dark"] .tf-btn,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .btn-reset,
html[data-theme="dark"] .btn-out-line {
  border-color: var(--theme-border);
}

html[data-theme="dark"] .tf-btn-filter {
  background-color: var(--theme-surface-alt);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

html[data-theme="dark"] .tf-btn-filter .text,
html[data-theme="dark"] .tf-btn-filter .icon {
  color: inherit;
}

html[data-theme="dark"] .tf-btn-filter:hover {
  background-color: var(--theme-surface);
  border-color: var(--theme-accent);
}

html[data-theme="dark"] .tf-btn-filter.active {
  background-color: var(--theme-accent);
  border-color: var(--theme-accent);
  color: #111;
}

html[data-theme="dark"] .noUi-base .noUi-connects {
  background-color: #3a4552;
}

html[data-theme="dark"] .noUi-connect {
  background-color: var(--theme-accent);
}

html[data-theme="dark"] .noUi-horizontal .noUi-handle,
html[data-theme="dark"] .noUi-vertical .noUi-handle {
  background-color: var(--theme-surface);
  border-color: var(--theme-accent);
}

html[data-theme="dark"] a {
  color: inherit;
}

html[data-theme="dark"] a:hover,
html[data-theme="dark"] .item-link:hover,
html[data-theme="dark"] .footer-menu_item:hover,
html[data-theme="dark"] .link:hover {
  color: var(--theme-accent) !important;
}

html[data-theme="dark"] .nav-icon-item svg path,
html[data-theme="dark"] .my-account-nav svg path,
html[data-theme="dark"] .toolbar-icon svg path {
  stroke: #eceff4 !important;
  fill: #eceff4 !important;
}

html[data-theme="dark"] .count-box {
  background: var(--theme-accent);
  color: #0a0a0a;
}

html[data-theme="dark"] .wg-pagination,
html[data-theme="dark"] .sw-dots,
html[data-theme="dark"] .bg-white {
  background-color: transparent !important;
}

html[data-theme="dark"] .tf-toolbar-bottom {
  background: #0e1114;
  border-top: 1px solid var(--theme-border);
}

html[data-theme="dark"] .tf-toolbar-bottom .toolbar-label {
  color: var(--theme-text);
}

html[data-theme="dark"] .nice-select,
html[data-theme="dark"] .dropdown-menu {
  background: var(--theme-surface);
  border-color: var(--theme-border);
}

html[data-theme="dark"] .image-select.style-default > .dropdown-menu {
  background-color: var(--theme-surface-alt);
  border: 1px solid var(--theme-border);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .image-select.style-default > .dropdown-menu::after,
html[data-theme="dark"] .image-select.style-default > .dropdown-menu[data-popper-placement=top-start]::before {
  background-color: var(--theme-surface-alt);
}

html[data-theme="dark"] .image-select.style-default > .dropdown-menu a,
html[data-theme="dark"] .image-select.style-default > .dropdown-menu a .text {
  color: var(--theme-text);
}

html[data-theme="dark"] .image-select.style-default > .dropdown-menu a:hover,
html[data-theme="dark"] .image-select.style-default > .dropdown-menu a:active,
html[data-theme="dark"] .image-select.style-default > .dropdown-menu a.active {
  color: var(--theme-accent) !important;
}

.floating-whatsapp {
  position: fixed;
  right: 20px;
  bottom: 156px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35);
  z-index: 110;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.floating-whatsapp i {
  font-size: 28px;
  line-height: 1;
}

.floating-whatsapp:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(37, 211, 102, 0.45);
  color: #ffffff;
}

html[data-theme="dark"] .floating-whatsapp {
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
}

@media only screen and (min-width: 1200px) {
  .floating-whatsapp {
    right: 40px;
    bottom: 104px;
  }
}

@media only screen and (max-width: 767px) {
  .floating-whatsapp {
    width: 52px;
    height: 52px;
    right: 14px;
    bottom: 112px;
  }

  .floating-whatsapp i {
    font-size: 26px;
  }
}

.social-auth-wrap {
  display: flex;
  justify-content: center;
}

.auth-entry-section .container {
  max-width: 1180px;
}

.auth-entry-wrap {
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--theme-border);
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--theme-surface) 0%, var(--theme-bg) 100%);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.06);
}

.auth-entry-wrap::before {
  content: none;
  display: none;
}

.auth-pane {
  padding: 44px 48px;
}

.auth-pane--aside {
  background: var(--theme-surface-alt);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-heading {
  margin-bottom: 24px;
}

.auth-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--theme-border);
  background: var(--theme-surface-alt);
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.auth-subtitle {
  margin-top: 10px;
  max-width: 620px;
  color: var(--theme-muted);
}

.auth-alert {
  margin-bottom: 14px;
}

.auth-entry-wrap .form-login .wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-entry-wrap .form-group label {
  display: block;
  margin-bottom: 6px;
  color: var(--theme-muted);
  font-size: 13px;
  line-height: 18px;
}

.auth-entry-wrap .form-login fieldset input,
.auth-entry-wrap .form-group input,
.auth-message-card .form-login fieldset input {
  height: 54px;
  border-radius: 12px;
  border: 1px solid var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
  padding: 0 16px;
}

.auth-entry-wrap .form-login fieldset input:focus,
.auth-entry-wrap .form-group input:focus,
.auth-message-card .form-login fieldset input:focus {
  border-color: var(--theme-accent);
}

.auth-entry-wrap .password-hint {
  margin-top: 10px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-entry-wrap .password-hint li {
  color: var(--theme-muted);
  font-size: 13px;
  line-height: 18px;
}

.auth-form-meta {
  margin-top: 18px;
  margin-bottom: 18px;
}

.auth-link-strong {
  font-weight: 600;
  color: var(--theme-text);
}

.auth-link-strong:hover {
  color: var(--theme-accent);
}

button.auth-link-strong {
  background: transparent;
  border: 0;
  padding: 0;
}

.auth-inline-note {
  margin-top: 18px;
  color: var(--theme-muted);
}

.auth-submit-row .tf-btn {
  min-width: 220px;
  padding: 12px 30px;
  border-radius: 999px;
}

.auth-side-list {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-side-list li {
  position: relative;
  padding-left: 22px;
  color: var(--theme-muted);
}

.auth-side-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--theme-accent);
}

.auth-message-section .container {
  max-width: 980px;
}

.auth-message-wrap {
  display: flex;
  justify-content: center;
}

.auth-message-card {
  width: 100%;
  max-width: 760px;
  padding: 40px 38px;
  border-radius: 18px;
  border: 1px solid var(--theme-border);
  background: var(--theme-surface);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.auth-message-card h3 {
  margin: 0 0 10px;
  color: var(--theme-text);
}

.auth-message-card p {
  margin: 0;
  color: var(--theme-muted);
}

.auth-message-card p + p {
  margin-top: 12px;
}

.auth-message-card--form {
  max-width: 680px;
  text-align: left;
}

.auth-message-card--form .wrap {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-message-card--form .auth-submit-row {
  margin-top: 20px;
}

.auth-message-actions {
  margin-top: 26px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.auth-message-actions .tf-btn {
  min-width: 220px;
  border-radius: 999px;
  padding: 12px 26px;
}

.auth-message-actions--single {
  margin-top: 18px;
  justify-content: center;
}

.social-inline-auth {
  margin-top: 24px;
}

.social-inline-auth__separator {
  position: relative;
  margin-bottom: 14px;
  text-align: center;
}

.social-inline-auth__separator::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--theme-border);
  transform: translateY(-50%);
}

.social-inline-auth__separator span {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0 12px;
  background: var(--theme-surface);
  color: var(--theme-muted);
  font-size: 13px;
  line-height: 18px;
}

.social-inline-auth__providers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social-inline-auth__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
  font-weight: 600;
}

.social-inline-auth__btn:hover {
  border-color: var(--theme-accent);
  color: var(--theme-text);
}

.social-inline-auth__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.social-inline-auth__fallback {
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  color: var(--theme-text);
}

.social-inline-auth__label {
  font-size: 15px;
  line-height: 20px;
}

.social-auth-card {
  width: 100%;
  max-width: 560px;
  padding: 36px 32px;
  border-radius: 18px;
  border: 1px solid var(--theme-border);
  background: var(--theme-surface);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.social-auth-provider {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--theme-surface-alt);
  border: 1px solid var(--theme-border);
  margin-bottom: 18px;
}

.social-auth-provider-name {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--theme-text);
}

.social-auth-title {
  margin: 0;
  color: var(--theme-text);
}

.social-auth-description {
  margin: 12px auto 24px;
  max-width: 430px;
  color: var(--theme-muted);
}

.social-auth-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.social-auth-btn-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html[data-theme="dark"] .social-auth-card {
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .auth-entry-wrap {
  background: linear-gradient(135deg, #141a20 0%, #11151a 100%);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .auth-pane--aside {
  background: rgba(255, 255, 255, 0.02);
}

html[data-theme="dark"] .auth-entry-wrap .form-login fieldset input,
html[data-theme="dark"] .auth-entry-wrap .form-group input,
html[data-theme="dark"] .auth-message-card .form-login fieldset input {
  background: var(--theme-surface-alt);
}

html[data-theme="dark"] .auth-message-card {
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .social-inline-auth__separator span {
  background: #141a20;
}

html[data-theme="dark"] .social-inline-auth__btn {
  background: var(--theme-surface-alt);
}

@media only screen and (max-width: 1199px) {
  .auth-entry-wrap::before {
    left: 55%;
  }
}

@media only screen and (max-width: 991px) {
  .auth-entry-wrap {
    flex-direction: column;
  }

  .auth-entry-wrap::before {
    display: none;
  }

  .auth-pane {
    padding: 32px 24px;
  }
}

@media only screen and (max-width: 767px) {
  .auth-pane {
    padding: 26px 18px;
  }

  .auth-form-meta {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
  }

  .auth-submit-row .tf-btn,
  .auth-message-actions .tf-btn {
    width: 100%;
    min-width: 0;
  }

  .auth-message-card {
    padding: 28px 20px;
    border-radius: 14px;
  }

  .social-auth-card {
    padding: 28px 20px;
    border-radius: 14px;
  }

  .social-auth-description {
    margin-bottom: 20px;
  }
}

footer .footer-newsletter .form-newsletter {
  position: relative;
}

footer .footer-newsletter .newsletter-feedback {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

footer .footer-newsletter .newsletter-feedback--error {
  color: #d74141;
}

footer .footer-newsletter .newsletter-feedback--success {
  color: #2f8a51;
}

footer.bg-main .footer-newsletter .newsletter-feedback--success {
  color: #9ddfb3;
}

footer .footer-newsletter .form-newsletter input.is-invalid {
  border-color: #d74141 !important;
}

footer .footer-newsletter .form-newsletter .tf-checkbox-wrapp input.is-invalid + div {
  border-color: #d74141 !important;
}

footer .footer-newsletter .form-newsletter .subscribe-button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Homepage sections / utility backgrounds */
html[data-theme="dark"] .bg-surface {
  background-color: var(--theme-surface) !important;
}

html[data-theme="dark"] .bg-brown-2 {
  background-color: var(--theme-surface) !important;
}

/* Testimonials */
html[data-theme="dark"] .testimonial-item {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .testimonial-item .content-top {
  border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .testimonial-item .box-icon {
  background-color: var(--theme-accent) !important;
  color: #111 !important;
}

html[data-theme="dark"] .testimonial-item .img-style .box-icon {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}

html[data-theme="dark"] .tf-cart-item,
html[data-theme="dark"] .account-orders tr,
html[data-theme="dark"] .tf-table-page-cart thead tr,
html[data-theme="dark"] .tf-table-page-cart tbody tr {
  border-color: var(--theme-border);
}

/* Mobile performance safeguards */
@media (max-width: 767px) {
  /* The JS-controlled preloader can linger on slower devices; hide it on phones. */
  .preload.preload-container {
    display: none !important;
  }
}