/* Site-specific overrides & custom sections that are not part of the base theme */

/*----------------------------------------*/
/*  Global typography unification
/*  The base theme mixes many demo fonts (Clash Display, Onest, Poppins,
/*  Mango Grotesque, Platform, Playfair, dirtyline...) across sections.
/*  Force one heading font and one paragraph font everywhere.
/*----------------------------------------*/
:root {
  --tp-ff-heading: 'Playfair Display', serif;
  --tp-ff-body: 'Inter', sans-serif;
  --tp-ff-p: 'Inter', sans-serif;
  --tp-ff-inter: 'Inter', sans-serif;
  --tp-ff-onest: 'Inter', sans-serif;
  --tp-ff-poppins: 'Inter', sans-serif;
  --tp-ff-platform: 'Playfair Display', serif;
  --tp-ff-playfair: 'Playfair Display', serif;
  --tp-ff-dirtyline: 'Playfair Display', serif;
  --tp-ff-teko: 'Playfair Display', serif;
  --tp-ff-phudu: 'Playfair Display', serif;
  --tp-ff-besley: 'Playfair Display', serif;
  --tp-ff-grotesk: 'Playfair Display', serif;
  --tp-ff-satisfy: 'Playfair Display', serif;
  --tp-ff-mango: 'Playfair Display', serif;
  --tp-ff-mango-thin: 'Playfair Display', serif;
  --tp-ff-mango-light: 'Playfair Display', serif;
  --tp-ff-mango-medium: 'Playfair Display', serif;
  --tp-ff-mango-semibold: 'Playfair Display', serif;
  --tp-ff-mango-bold: 'Playfair Display', serif;
  --tp-ff-clash-light: 'Playfair Display', serif;
  --tp-ff-clash-regular: 'Playfair Display', serif;
  --tp-ff-clash-medium: 'Playfair Display', serif;
  --tp-ff-clash-bold: 'Playfair Display', serif;
}

/* Safety net: many rules hardcode a font-family instead of using the
   variables above, so also force it by naming convention.
   Note: patterns require a leading hyphen (e.g. "-text", "-title") so
   they don't collide with Bootstrap utilities like "text-center". */
h1, h2, h3, h4, h5, h6,
[class*="-title" i],
[class*="subtitle" i],
[class*="-heading" i] {
  font-family: 'Playfair Display', serif !important;
}

body,
p,
[class*="-desc" i],
[class*="-text" i],
[class*="-para" i],
[class*="-content" i] {
  font-family: 'Inter', sans-serif !important;
}

/* Big display statement in the "About" collage section reads as a heading,
   not body copy — match it to the theme's Playfair Display heading font. */
.tp-shop-about-content p {
  font-family: 'Playfair Display', serif !important;
}

/*----------------------------------------*/
/*  Section heading (Teko pattern) — brand colors
/*  .tp-section-subtitle-teko / .tp-section-title-teko is the theme's raw
/*  display heading (small eyebrow label + large title). By default it
/*  renders in near-invisible cream-on-white / black-on-lime-green. This is
/*  now the one heading pattern used across every front page, so the brand
/*  color override lives here once instead of being duplicated per page.
/*----------------------------------------*/
.tp-section-subtitle-teko {
  color: #8a7b6e;
}
.tp-section-subtitle-teko i {
  color: #4d3d30;
  font-style: normal;
}
.tp-section-title-teko {
  color: #4d3d30;
}
.tp-section-title-teko span {
  color: #ce8065;
}

/*----------------------------------------*/
/*  Contact form submit button — brand colors
/*  Theme default is bright red-orange (--tp-common-red-3), which clashes
/*  with this site's brown/tan palette. Used on the contact page form and
/*  anywhere else <x-front.contact /> is dropped in without its own override.
/*----------------------------------------*/
.tp-contact-form-btn button {
  background-color: #4d3d30;
  color: #ffffff;
}
.tp-contact-form-btn button:hover {
  background-color: #ce8065;
  color: #ffffff;
}

/*----------------------------------------*/
/*  Top product area — swiper carousel of cards ("Trending This Season"
/*  style from the theme's homepage demo). Thumbnails are forced to a
/*  consistent aspect ratio via object-fit so mismatched upload
/*  dimensions don't break the row. Arrow buttons reuse the theme's own
/*  chevron icon (see "More About Us" button in the source theme).
/*----------------------------------------*/
.sr-trending-item .tp-product-item-thumb img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.sr-top-product-wrap .swiper-slide {
  height: auto;
}
.sr-top-product-wrap {
  padding: 0 60px;
}
.sr-slider-arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 5;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(77, 61, 48, 0.2);
  background-color: #f4f0ea;
  color: #4d3d30;
  transition: all 0.3s ease-in-out;
}
.sr-slider-arrow-btn:hover {
  background-color: #4d3d30;
  border-color: #4d3d30;
  color: #fff;
}
.sr-top-product-prev {
  left: 0;
}
.sr-top-product-next {
  right: 0;
}
.sr-top-product-prev svg {
  transform: scaleX(-1);
}
.sr-slider-arrow-btn.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}
@media (max-width: 767px) {
  .sr-top-product-wrap {
    padding: 0 50px;
  }
  .sr-slider-arrow-btn {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 767px) {
  .tp-top-product-scroll {
    max-height: 506px;
  }
}
@media (max-width: 575px) {
  .tp-top-product-scroll {
    max-height: 426px;
  }
}

/*----------------------------------------*/
/*  CTA section (x-front.cta)
/*----------------------------------------*/
.sr-cta {
  position: relative;
  padding: 120px 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.sr-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 21, 15, 0.8), rgba(28, 21, 15, 0.82));
  z-index: 1;
}
.sr-cta__inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.sr-cta__title {
  color: var(--tp-common-white, #fff);
  font-family: var(--tp-ff-heading);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.sr-cta__desc {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 auto 36px;
}
.sr-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.sr-cta__btn {
  display: inline-block;
  padding: 14px 40px;
  border-radius: 40px;
  font-size: 15px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.2px;
  white-space: nowrap;
  transition: all 0.3s ease-in-out;
}
.sr-cta__btn--solid {
  background-color: #fff;
  color: #4d3d30;
  border: 1px solid #fff;
}
.sr-cta__btn--solid:hover {
  background-color: transparent;
  color: #fff;
}
.sr-cta__btn--outline {
  background-color: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.sr-cta__btn--outline:hover {
  background-color: #fff;
  border-color: #fff;
  color: #4d3d30;
}
.sr-cta__btn--whatsapp {
  background-color: #25D366;
  color: #fff;
  border: 1px solid #25D366;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sr-cta__btn--whatsapp:hover {
  background-color: #1ebc59;
  border-color: #1ebc59;
  color: #fff;
}

@media (min-width: 768px) and (max-width: 991px) {
  .sr-cta {
    padding: 90px 0;
  }
  .sr-cta__title {
    font-size: 36px;
  }
}

@media (max-width: 767px) {
  .sr-cta {
    padding: 60px 0;
  }
  .sr-cta__title {
    font-size: 28px;
    margin-bottom: 14px;
  }
  .sr-cta__desc {
    font-size: 14px;
    margin-bottom: 26px;
  }
  .sr-cta__buttons {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .sr-cta__btn {
    padding: 13px 24px;
    text-align: center;
  }
}

@media (max-width: 400px) {
  .sr-cta__title {
    font-size: 24px;
  }
}

.tp-footer-shop-desc {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 767px) {
  .tp-footer-shop-widget {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 25px;
    margin-bottom: 25px;
  }
  .tp-footer-shop-top .row > div:last-child .tp-footer-shop-widget {
    border-bottom: none;
    margin-bottom: 0;
  }
  .tp-footer-logo img {
    max-width: 200px !important;
    height: auto !important;
  }
  .tp-google-review-badge img,
  .tp-footer-shop-widget img {
    max-width: 100%;
  }
  .tp-footer-shop-widget ul li {
    font-size: 16px;
  }
}

.tp-google-review-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.tp-google-review-badge:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background-color: rgba(255, 255, 255, 0.05);
}
.tp-google-review-icon {
  display: flex;
  flex-shrink: 0;
}
.tp-google-review-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tp-google-review-stars {
  display: flex;
  align-items: center;
  gap: 2px;
}
.tp-google-review-text {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.tp-review-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 26px;
  /* border: 1px solid #E5DAD1; */
  border-radius: 10px;
}
.tp-review-rating-number {
  font-size: 16px;
  font-weight: 700;
  color: #1A1A1A;
}
.tp-review-rating-stars {
  display: flex;
  align-items: center;
  gap: 2px;
}
.tp-review-rating-text {
  font-size: 15px;
  font-weight: 500;
  color: #1A1A1A;
}

.app-testimonial-track {
  width: max-content;
}
.app-testimonial-track:hover .app-testimonial-wrapper {
  animation-play-state: paused;
}

.tp-product-testimonial-user-thumb {
  flex: 0 0 34px;
}
.tp-product-testimonial-user-thumb img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}
.tp-product-testimonial-user-name {
  white-space: nowrap;
}
.tp-product-testimonial-user-position {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #8a7b6e;
  margin-top: 2px;
  white-space: nowrap;
}

/* Header nav: spread menu items across the full header width instead of
   bunching to the left, and keep each label on a single line. */
.tp-header-shop-menu > nav > ul {
  justify-content: space-between;
}
.tp-header-shop-menu > nav > ul > li > a {
  white-space: nowrap;
}