/* ==========================================================
   TwoBrothers Theme Implementation - Header & Home
   ========================================================== */
:root {
  --tb-green: #4a7c29;
  --tb-green-dark: #2d5016;
  --tb-gold: #cfaa6e;
  --tb-cream: #f4efeb;
  --tb-cream-dark: #e8e2dc;
  --tb-white: #ffffff;
  --tb-brown: #5d4037;
  --tb-brown-dark: #3e2723;
  --tb-text: #2c2c2c;
  --tb-text-light: #666666;
  --tb-shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --tb-shadow: 0 4px 15px rgba(0,0,0,0.08);
  --tb-shadow-hover: 0 8px 25px rgba(0,0,0,0.12);
  --tb-radius: 12px;
  --tb-radius-lg: 24px;
  --tb-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ==========================================================
   1. HEADER (3-TIER Layout)
   ========================================================== */
.tb-header-wrapper {
  background: var(--tb-white);
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  position: relative;
  z-index: 1040;
}

/* Top: Infinite Marquee Promo */
.tb-top-bar {
  background: var(--tb-green-dark) !important;
  color: var(--tb-white);
  padding: 5px 0; /* Reduced from 8px to make banner smaller */
  overflow: hidden;
  position: relative;
  z-index: 1041;
}
.tb-marquee-container {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}
.tb-marquee-content {
  display: flex;
  min-width: 100%;
  animation: tb-scroll 25s linear infinite;
  align-items: center;
  font-family: 'Inter', sans-serif;
  font-size: 11px; /* Reduced from 13px for a sleeker look */
  font-weight: 500;
  letter-spacing: 0.5px;
}
.tb-marquee-content:hover {
  animation-play-state: paused;
}
.tb-marquee-content span {
  display: inline-flex;
  align-items: center;
}
.tb-bullet {
  margin: 0 50px;
  color: var(--tb-gold);
  font-size: 14px;
}
@keyframes tb-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } 
}

/* Middle: Search - Logo - Icons */
.tb-middle-bar {
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.tb-middle-bar > .container > .row {
  display: flex;
  align-items: center;
}
.tb-header-search {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.tb-search-form {
  position: relative;
  max-width: 320px;
  width: 100%;
}
.tb-search-form input {
  width: 100%;
  height: 40px; /* Reduced from 44px */
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  padding: 0 45px 0 16px;
  font-size: 13px; /* Reduced from 14px */
  color: var(--tb-text);
  font-family: 'Inter', sans-serif;
  transition: var(--tb-transition);
}
.tb-search-form input::placeholder { color: #999; }
.tb-search-form input:focus {
  border-color: var(--tb-green);
  outline: none;
  box-shadow: 0 0 0 3px rgba(74, 124, 41, 0.08); 
}
.tb-search-form button {
  position: absolute;
  right: 5px; top: 3px; /* Adjusted for new height */
  height: 34px; width: 34px;
  background: transparent;
  border: none;
  color: #555;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--tb-transition);
}
.tb-search-form button:hover { color: var(--tb-green-dark); }

@media (max-width: 991px) {
  .tb-search-form { max-width: 100%; margin-top: 10px; margin-bottom: 10px; }
  .tb-header-search { order: 3 !important; }
}

.tb-header-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.tb-header-logo img {
  max-height: 95px;
  width: auto;
  transition: transform 0.3s ease;
}
.tb-header-logo img:hover { transform: scale(1.02); }

.tb-header-icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px; 
}
.tb-icon-box > a,
.tb-icon-box .tb-dropdown > a {
  color: var(--tb-text);
  font-size: 26px; 
  height: 26px;
  width: 26px; /* Perfect square bounding box */
  line-height: 1;
  position: relative;
  text-decoration: none;
  transition: var(--tb-transition);
  display: flex;
  align-items: center;
  justify-content: center; /* Dead-center alignment */
}
.tb-icon-box > a:hover,
.tb-icon-box .tb-dropdown > a:hover {
  color: var(--tb-green);
  transform: translateY(-2px);
}
.tb-icon-box .tb-cart-count {
  position: absolute;
  top: -4px; right: -6px;
  background: var(--tb-green-dark);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
}

/* User Account Dropdown */
.tb-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}
/* Invisible bridge to parent so hover state isn't lost */
.tb-dropdown::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: -10px;
  right: -10px;
  height: 20px;
}
.tb-dropdown-content {
  display: none;
  position: absolute;
  right: -5px; 
  top: calc(100% + 15px);
  background-color: #fff;
  min-width: 180px;
  box-shadow: 0 10px 35px rgba(0,0,0,0.08);
  border-radius: 8px;
  z-index: 999;
  border: 1px solid rgba(0,0,0,0.05);
  padding: 8px 0; /* Professional top/bottom box breathing room */
}
/* Professional upwards pointing caret */
.tb-dropdown-content::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 14px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid rgba(0,0,0,0.05);
  border-top: 1px solid rgba(0,0,0,0.05);
  transform: rotate(45deg);
  border-top-left-radius: 2px;
  z-index: 1;
}
.tb-dropdown-content a {
  color: #333;
  padding: 8px 24px;
  text-align: left;
  text-decoration: none;
  display: block;
  white-space: nowrap; /* Prevent ugly "My Account" word wrap */
  font-size: 14px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s ease;
  position: relative;
  z-index: 2; /* Keeps text above the caret */
}
.tb-dropdown-content a:hover {
  background-color: #f7f9fc;
  color: var(--tb-green-dark);
}
.tb-dropdown:hover .tb-dropdown-content { display: block; }


/* ==========================================================
   2. HOME PAGE (Hero & Categories)
   ========================================================== */
.tb-home-categories {
  padding: 40px 0;
  background: var(--tb-white);
}
.tb-cat-strip {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.tb-cat-icon-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
  width: 100px;
}
.tb-cat-icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--tb-brown-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(93,64,55,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 18px;
}
.tb-cat-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.tb-cat-icon svg {
  width: 38px; height: 38px;
  stroke: #fff;
  flex-shrink: 0;
}
/* Text variant for price categories */
.tb-cat-icon-text {
  flex-direction: column;
}
.tb-cat-icon-text span {
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  display: block;
}
.tb-cat-icon-card:hover .tb-cat-icon {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(93,64,55,0.3);
}
.tb-cat-icon-card h4 {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--tb-text);
  margin: 0;
  line-height: 1.3;
}
.tb-cat-icon-card:hover h4 { color: var(--tb-green); }

/* Split Hero Section */
/* Fix: Adjusted padding-top because sticky navbar stays in document flow */
/* ============================================================
   HERO SECTION — full-width image slider
   ============================================================ */
.tb-hero-split {
  padding: 20px 0 32px;
}

/* 3-Box Grid Layout */
.tb-hero-grid {
  display: block;
}
.tb-hero-grid.has-side-banners {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 20px;
}

.tb-hero-main {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--tb-shadow);
  aspect-ratio: 16 / 7;
  min-width: 0;
}

.tb-hero-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tb-side-box {
  flex: 1;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--tb-shadow);
  position: relative;
  transition: transform 0.3s ease;
  min-height: 0;
}
.tb-side-box:hover {
  transform: translateY(-5px);
}
.tb-side-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#tb-hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
}
/* Invisible first image — sits in normal flow and defines container height */
.tb-slide-sizer {
  display: none;
}
.tb-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.tb-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tb-slide.active { opacity: 1; }

@media (max-width: 991px) {
  .tb-hero-grid.has-side-banners {
    grid-template-columns: 100%;
  }
  .tb-hero-main {
    aspect-ratio: 16 / 7;
  }
  .tb-hero-side {
    flex-direction: row;
  }
  .tb-side-box img {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 575px) {
  .tb-hero-main {
    aspect-ratio: 4 / 3;
  }
  .tb-hero-side {
    flex-direction: column;
  }
  .tb-side-box img {
    aspect-ratio: 16 / 9;
  }
}

/* Slider dots */
.tb-slider-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.tb-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.8);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}
.tb-dot.active {
  background: #fff;
  transform: scale(1.3);
}

/* Hero social sidebar */
.tb-hero-social {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 20px 0;
  background: rgba(20, 30, 10, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  width: 52px;
  border-left: 1px solid rgba(255,255,255,0.1);
}
.tb-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
  text-decoration: none !important;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  flex-shrink: 0;
  overflow: hidden;
}
.tb-social-btn i {
  pointer-events: none;
  font-size: 15px;
  line-height: 1;
}
.tb-social-btn:hover {
  transform: scale(1.18);
  color: #fff;
}
.tb-hero-social .tb-social-fb:hover { background: #1877f2 !important; border-color: #1877f2 !important; }
.tb-hero-social .tb-social-wa:hover { background: #25d366 !important; border-color: #25d366 !important; }
.tb-hero-social .tb-social-ig:hover { background: #e1306c !important; border-color: #e1306c !important; }
.tb-hero-social .tb-social-yt:hover { background: #ff0000 !important; border-color: #ff0000 !important; }

.tb-social-label {
  display: block;
  color: rgba(255,255,255,0.65);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-top: 10px;
  user-select: none;
}

/* Mobile: compact floating pill at bottom-center of the hero */
@media (max-width: 480px) {
  .tb-hero-social {
    position: relative;
    flex-direction: row;
    width: 100%;
    height: auto;
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    transform: none;
    padding: 10px 16px;
    gap: 12px;
    justify-content: center;
    align-items: center;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.15);
    border-radius: 0;
    background: rgb(72 104 40 / 65%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    white-space: nowrap;
  }
  .tb-social-label {
    writing-mode: horizontal-tb;
    transform: none;
    margin-top: 0;
    margin-right: 4px;
    font-size: 9px;
    letter-spacing: 1.5px;
    order: -1;
    opacity: 0.8;
  }
  .tb-social-btn {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.1);
  }
  .tb-social-btn i {
    font-size: 14px;
  }
}

/* Responsive */
@media (max-width: 991px) {
  .tb-cat-icon { width: 64px; height: 64px; padding: 14px; }
  .tb-cat-icon-card { width: 80px; }
}
@media (max-width: 767px) {
  .tb-cat-strip { gap: 16px; }
}
@media (max-width: 575px) {
  .tb-hero-main { border-radius: 14px; }
  .tb-hero-split { padding: 12px 0 20px; }
}
@media (max-width: 480px) {
  .tb-cat-icon-card { width: calc(33.33% - 12px); }
  .tb-cat-strip { gap: 12px; justify-content: flex-start; }
}
/* ==========================================================
   BOTTOM NAV — Professional Warm Cream Design (Refined)
   ========================================================== */
html body .header-bottom,
html body .main-nav.tb-bottom-nav,
html body .tb-bottom-nav,
/* Neutralize custom.js injecting .sticky-nav that forces position: fixed */
html body .sticky-nav .main-nav.tb-bottom-nav {
  background: #fcfffa !important;
  border-top: none !important;
  border-bottom: 2px solid rgba(74, 124, 41, 0.1) !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  display: block !important;

  /* KEY FIX: style.css sets height: 55px on .main-nav which clips the box
     background to 55px while nav links are ~70px tall — content "overflows"
     outside the visible container. Reset to auto so the div grows to fit. */
  height: auto !important;

  /* KEY FIX: style.css sets position: inherit (inherits "relative" from parent)
     plus top: 0 and left: 0. When sticky-nav JS kicks in it becomes fixed.
     We make the nav sticky ourselves so it stays in the correct stacking context. */
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  left: auto !important;

  z-index: 9 !important;
  box-shadow: 0 6px 15px rgba(0,0,0,0.05) !important;
}

/* Remove Bootstrap navbar's default top/bottom padding so the bar height is
   governed solely by the link padding (18px 0) — prevents double spacing. */
html body .main-nav.tb-bottom-nav .navbar,
html body .tb-bottom-nav .navbar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: auto !important;
  justify-content: center !important;
}
html body .main-nav.tb-bottom-nav .navbar .navbar-collapse,
html body .tb-bottom-nav .navbar .navbar-collapse {
  flex-grow: 0 !important;
}

/* style.css applies transform: scale(0) to ALL .dropdown-menu inside .main-nav
   which would permanently hide our custom hover dropdowns — reset it here. */
html body .main-nav.tb-bottom-nav nav .navbar-nav .nav-item .dropdown-menu,
html body .tb-bottom-nav nav .navbar-nav .nav-item .dropdown-menu {
  -webkit-transform: none !important;
  transform: none !important;
  margin-top: 0 !important;
}
.tb-nav-links {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px; /* Space between items instead of padding width */
}
.tb-nav-links .nav-item {
  margin: 0;
  padding: 0;
  position: relative;
}

/* --- Nav Link Base --- */
.header-bottom .tb-nav-links .nav-item .nav-link,
.tb-nav-links .nav-item .nav-link {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--tb-green-dark) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 18px 0 !important; /* Zero horizontal padding, let gap handle spacing */
  position: relative;
  transition: color 0.25s ease !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  background: transparent !important;
  text-decoration: none !important;
}

/* --- Nav Icon (Boxicons before text) --- */
.tb-nav-icon {
  font-size: 18px;
  color: var(--tb-green-dark) !important;
  transition: transform 0.25s ease;
  line-height: 1;
}

/* --- Chevron Arrow --- */
.tb-chev {
  font-size: 14px !important;
  margin-left: 0px !important;
  transition: transform 0.25s ease !important;
  color: var(--tb-green-dark) !important;
  opacity: 0.7;
}

/* --- Hover & Active States --- */
/* Fix: Explicitly enforce dark green on hover and active to prevent it turning white */
html body .header-bottom .tb-nav-links .nav-item .nav-link.active,
html body .tb-nav-links .nav-item .nav-link.active {
  color: var(--tb-green-dark) !important;
  background: transparent !important;
}
html body .header-bottom .tb-nav-links .nav-item .nav-link:hover,
html body .header-bottom .tb-nav-links .nav-item:hover .nav-link,
html body .tb-nav-links .nav-item .nav-link:hover,
html body .tb-nav-links .nav-item:hover .nav-link {
  color: var(--tb-green-dark) !important;
  background: transparent !important; /* Remove blocky background */
}
html body .header-bottom .tb-nav-links .nav-item .nav-link:hover .tb-nav-icon,
html body .header-bottom .tb-nav-links .nav-item .nav-link.active .tb-nav-icon,
html body .header-bottom .tb-nav-links .nav-item:hover .nav-link .tb-nav-icon,
html body .tb-nav-links .nav-item .nav-link:hover .tb-nav-icon,
html body .tb-nav-links .nav-item .nav-link.active .tb-nav-icon,
html body .tb-nav-links .nav-item:hover .nav-link .tb-nav-icon {
  color: var(--tb-green-dark) !important;
  transform: translateY(-1px);
}
html body .header-bottom .tb-nav-links .nav-item .nav-link:hover .tb-chev,
html body .header-bottom .tb-nav-links .nav-item .nav-link.active .tb-chev,
html body .header-bottom .tb-nav-links .nav-item:hover .nav-link .tb-chev,
html body .tb-nav-links .nav-item .nav-link:hover .tb-chev,
html body .tb-nav-links .nav-item .nav-link.active .tb-chev,
html body .tb-nav-links .nav-item:hover .nav-link .tb-chev {
  color: var(--tb-green-dark) !important;
  transform: rotate(180deg);
  opacity: 1;
}

/* --- Bottom Underline on Hover --- */
.tb-nav-links .nav-item .nav-link::after {
  content: '';
  position: absolute;
  /* Fix: Moved underline down to align with the bottom edge of the navbar, preventing overlap with text */
  bottom: -1px; 
  left: 50%;
  width: 0;
  height: 3px;
  background: var(--tb-green-dark);
  transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border-radius: 3px 3px 0 0;
}
.tb-nav-links .nav-item:hover .nav-link::after,
.tb-nav-links .nav-item .nav-link.active::after {
  width: 100%;
  left: 0;
}

/* Hide old header sections */
.nav-bottom-area, .top-header-right, .nav-bar-side-2 { display: none !important; }

/* ==========================================================
   MEGA-MENU (Icon Grid for Category Dropdowns) - Refined
   ========================================================== */
.tb-nav-links .nav-item.tb-mega-parent {
  position: static; /* so mega-menu can span full nav width */
}
.tb-mega-menu {
  display: none;
  position: absolute;
  top: 105%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  min-width: 480px;
  max-width: 600px;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.03);
  z-index: 1060;
  padding: 14px;
  animation: tb-mega-in 0.2s ease;
}
@keyframes tb-mega-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.tb-nav-links .nav-item.tb-mega-parent:hover .tb-mega-menu,
.tb-nav-links .nav-item.tb-dropdown:hover > .tb-mega-menu {
  display: block;
}
.tb-mega-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns, horizontal */
  gap: 16px 20px;
}
.tb-mega-item {
  display: flex;
  flex-direction: row; /* Icon left, text right */
  align-items: center;
  text-align: left;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background 0.2s ease, transform 0.2s ease;
}
.tb-mega-item:hover {
  background: #f4f8f1;
  transform: translateX(4px); /* Slide right instead of up */
}
.tb-mega-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px; /* Slightly square like an app icon */
  background: #e8f5d4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.tb-mega-icon i {
  font-size: 20px;
  color: var(--tb-green-dark);
}
.tb-mega-item:hover .tb-mega-icon {
  background: var(--tb-green-dark);
  box-shadow: 0 4px 10px rgba(45, 80, 22, 0.2);
}
.tb-mega-item:hover .tb-mega-icon i {
  color: #fff;
}
.tb-mega-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--tb-text);
  line-height: 1.3;
  text-transform: capitalize;
}
.tb-mega-item:hover .tb-mega-label {
  color: var(--tb-green-dark);
}

/* SHOP ALL button */
.tb-mega-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
  text-align: center;
}

/*
 * style.css targets every <a> inside .main-nav .navbar-nav .nav-item with
 * selectors up to specificity 0,5,3 + !important (e.g. the dropdown li a:hover
 * rule that forces border-radius:0 and padding-left:35px).
 * .tb-shop-all-btn alone is only 0,1,0 — it gets completely overridden.
 * Fix: add !important to every property that can be clobbered, and explicitly
 * reset the margin / border-radius / padding-left that style.css injects.
 */
.tb-shop-all-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 28px !important;
  background: var(--tb-green-dark) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 30px !important;
  /* Reset margins that style.css injects on every .nav-item a */
  margin-left: 0 !important;
  margin-right: 0 !important;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.tb-shop-all-btn::after {
  content: '→' !important;
  font-size: 14px !important;
  transition: transform 0.2s ease !important;
}

.tb-shop-all-btn:hover {
  background: var(--tb-green) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(74, 124, 41, 0.25) !important;
  /* Reset what style.css forces on .nav-item .dropdown-menu li a:hover */
  border-radius: 30px !important;
  padding: 10px 28px !important;
  padding-left: 28px !important;
}

.tb-shop-all-btn:hover::after {
  transform: translateX(4px) !important;
}


/* ==========================================================
   STANDARD DROPDOWN (Blog, etc.)
   ========================================================== */
.tb-nav-links .nav-item.tb-dropdown {
  position: relative;
}
.tb-nav-links .nav-item.tb-dropdown > .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  background: #fff;
  min-width: 220px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.04);
  border-radius: 0 0 12px 12px;
  border-top: 3px solid var(--tb-green-dark);
  z-index: 999;
  padding: 6px 0;
  list-style: none;
  margin: 0;
  animation: tb-dropdown-in 0.22s ease;
}
/* Right-align dropdown when nav item is near the right edge */
.tb-nav-links .nav-item.tb-dropdown.tb-drop-right > .dropdown-menu {
  left: auto;
  right: 0;
}
@keyframes tb-dropdown-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tb-nav-links .nav-item.tb-dropdown:hover > .dropdown-menu { display: block; }
.tb-nav-links .nav-item.tb-dropdown .dropdown-menu li { list-style: none; }
.tb-nav-links .nav-item.tb-dropdown .dropdown-menu .nav-link {
  padding: 11px 22px !important;
  font-size: 13px !important;
  color: var(--tb-text) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,0.04) !important;
  transition: background 0.2s ease, padding-left 0.2s ease, color 0.2s ease !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.tb-nav-links .nav-item.tb-dropdown .dropdown-menu li:last-child .nav-link {
  border-bottom: none !important;
}
.tb-nav-links .nav-item.tb-dropdown .dropdown-menu .nav-link:hover {
  background: #f0f7ec !important;
  color: var(--tb-green-dark) !important;
  padding-left: 28px !important;
}
/* Remove underline for dropdown items */
.tb-nav-links .nav-item.tb-dropdown .dropdown-menu .nav-link::after { display: none !important; }



/* ==========================================================
   4. PRODUCT CARDS (brand-slider / offer-item)
   ========================================================== */

/* --- Redesigned Brand-Area / Products Section (Two Brothers style) --- */
.tb-products-section {
  padding: 20px 0 20px;
  background: #fff;
}
.tb-products-header {
  text-align: center;
  margin-bottom: 36px;
}
.tb-products-title {
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--tb-text);
  margin-bottom: 8px;
  position: relative;
  display: inline-block;
}
.tb-products-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--tb-green-dark);
  margin: 10px auto 0;
  border-radius: 2px;
}
.tb-products-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #777;
  margin-top: 10px;
}

/* Promo banners row */
.tb-promo-row { margin-bottom: 40px; }
.tb-promo-banner {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tb-promo-banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.tb-promo-banner img { width: 100%; height: auto; display: block; }

/* Force owl-carousel items to equal height */
.brand-slider.owl-carousel .owl-stage {
  display: flex;
}
.brand-slider.owl-carousel .owl-item {
  display: flex;
  flex: 1 0 auto;
}

/* ── Product Card (tb-pcard) ── */
.tb-pcard {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e8e8e8;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 10px;
}
.tb-pcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.10);
}

/* -- Image area -- */
.tb-pcard__img {
  position: relative;
  overflow: hidden;
  background: #f5f3ef;
  aspect-ratio: 4 / 4.2;
}
.tb-pcard__img a { display: block; width: 100%; height: 100%; position: relative; }
.tb-pcard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
/* Zoom fallback for cards WITHOUT a secondary image */
.tb-pcard:hover .tb-pcard__img a:not(.tb-pcard__img-swap) img { transform: scale(1.05); }

/* ── Product Card: Hover Image Crossfade ── */
.tb-pcard__img-swap .tb-pcard__img-primary {
  position: relative;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.45s ease;
}
.tb-pcard__img-swap .tb-pcard__img-secondary {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.45s ease, transform 0.6s ease;
}
.tb-pcard:hover .tb-pcard__img-swap .tb-pcard__img-primary { opacity: 0; }
.tb-pcard:hover .tb-pcard__img-swap .tb-pcard__img-secondary {
  opacity: 1;
  transform: scale(1.03);
}
/* Touch devices: hide secondary image, keep zoom fallback */
@media (hover: none) {
  .tb-pcard__img-swap .tb-pcard__img-secondary { display: none; }
  .tb-pcard:hover .tb-pcard__img-swap .tb-pcard__img-primary {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* Tag badge (Best Seller / Trending etc.) – top-left */
.tb-pcard__tag {
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.6px;
  padding: 6px 16px;
  border-radius: 16px 0 8px 0;
  z-index: 2;
  text-transform: capitalize;
  line-height: 1.3;
}

/* Discount flag – top-right corner of card image */
.tb-pcard__discount {
  position: absolute;
  top: 0;
  right: 0;
  background: #c0392b;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 6px 12px;
  border-radius: 0 16px 0 8px;
  z-index: 2;
  line-height: 1.3;
}

/* Wishlist heart */
.tb-pcard__wish {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(4px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #888;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
.tb-pcard__wish:hover {
  color: #e74c3c;
  background: #fff;
  transform: scale(1.12);
}

/* -- Body / Info area -- */
.tb-pcard__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Product name — fixed 2-line height */
.tb-pcard__name {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--tb-text);
  margin: 0 0 10px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tb-pcard__name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.tb-pcard__name a:hover { color: var(--tb-green-dark); }

/* Product card rating stars */
.tb-pcard__rating {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  color: #f5a623;
}
.tb-pcard__rating .bx-star { color: #ccc; }
.tb-pcard__review-count {
  font-size: 12px;
  color: #888;
  margin-left: 4px;
}

/* Card Variant Pills */
.tb-pcard__variants {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin: 6px 0 8px;
}
.tb-pcard__vpill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border: 1.5px solid #e0e0e0;
  border-radius: 5px;
  background: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1.4;
}
.tb-pcard__vpill:hover {
  border-color: var(--tb-green, #4a7c29);
  color: var(--tb-green, #4a7c29);
  background: #f6faf2;
}
.tb-pcard__vpill.active {
  border-color: var(--tb-green, #4a7c29);
  background: var(--tb-green, #4a7c29);
  color: #fff;
}
.tb-pcard__vpill.in-cart {
  position: relative;
}
.tb-pcard__vpill.in-cart::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  background: #e67e22;
  border-radius: 50%;
  border: 1.5px solid #fff;
}
.tb-pcard__vpill.active.in-cart::after {
  border-color: var(--tb-green, #4a7c29);
}

/* Pricing Wrapper to align price and small quantity selector */
.tb-pcard__pricing-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  margin-top: auto;
}
.tb-pcard__pricing {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.tb-pcard__price {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--tb-green-dark);
}
.tb-pcard__mrp {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #aaa;
  text-decoration: line-through;
}
.tb-pcard__off {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #e74c3c;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

/* Inline Quantity Selector (Smaller footprint) */
.tb-qty-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f6fbfa;
  color: var(--tb-green-dark);
  border: 1px solid var(--tb-green-dark);
  border-radius: 6px;
  height: 32px;
  width: 82px;
  overflow: hidden;
  flex-shrink: 0;
}
.tb-qty-inline button {
  background: transparent;
  color: var(--tb-green-dark);
  border: none;
  width: 26px;
  height: 100%;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.tb-qty-inline button:hover {
  background: var(--tb-green-dark);
  color: #fff;
}
.tb-qty-val {
  font-size: 13px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  user-select: none;
}

/* Base "ADD TO CART" & "GO TO CART" Action Zone */
.tb-pcard__action-zone {
  display: block;
  width: calc(100% + 32px);
  margin: auto -16px -16px -16px; /* Overcomes parent padding to sit flush */
}
.tb-pcard__atc {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #fff;
  background: var(--tb-green-dark);
  border: none;
  border-radius: 0;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  height: 48px;
  text-decoration: none;
  transition: background 0.25s ease;
  width: 100%;
  cursor: pointer;
}
.tb-pcard__atc:hover {
  background: #1b4332;
  color: #fff;
  text-decoration: none;
}
/* Distinct color to signify checkout progression */
.tb-go-cart-btn {
  background: var(--tb-green-dark); /* Premium Orange */
}
.tb-go-cart-btn:hover {
  background: #d35400; /* Darker Orange */
}

/* ── Our Strengths Section (tb-strengths-section) ── */
.tb-strengths-section {
  padding: 80px 0;
  background-color: #fdfaf5; /* Soft cream background */
}
.tb-strength-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px 30px;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0,0,0,0.03);
}
.tb-strength-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}
.tb-strength-icon {
  width: 80px;
  height: 80px;
  background-color: #eaf1ed; /* Soft green backdrop */
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.tb-strength-icon img {
  width: 45px;
  height: auto;
  object-fit: contain;
  /* Retain full color of the icons, no stark white filter */
}
.tb-strength-card h4 {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #1b4332;
  line-height: 1.4;
  margin: 0;
}
.tb-strength-intro {
  max-width: 900px;
  margin: 0 auto 48px;
  padding: 0 16px;
  text-align: center;
}
.tb-strength-intro p {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.8;
  color: #3a4a42;
  margin: 0;
}
.tb-strength-intro strong {
  color: #1b4332;
  font-weight: 600;
}

/* ── Responsive: Products Section ── */
@media (max-width: 991px) {
  .tb-products-section { padding: 10px 0 10px; }
  .tb-products-title { font-size: 26px; }
  .tb-products-subtitle { font-size: 14px; }
  .tb-pcard__name { font-size: 14px; }
  .tb-pcard__price { font-size: 17px; }

  /* Responsive: Our Strengths Section */
  .tb-strengths-section { padding: 50px 0; }
  .tb-strength-card { padding: 30px 20px; }
  .tb-strength-icon { width: 68px; height: 68px; margin-bottom: 20px; border-radius: 18px; }
  .tb-strength-icon img { width: 40px; }
  .tb-strength-card h4 { font-size: 17px; }
  .tb-strength-intro { margin-bottom: 36px; }
  .tb-strength-intro p { font-size: 15px; line-height: 1.7; }

  /* Responsive: Legacy Global Spacing Overrides */
  .pt-100 { padding-top: 50px !important; }
  .pb-70 { padding-bottom: 40px !important; }
  .pb-30 { padding-bottom: 20px !important; }
  .pt-45 { padding-top: 30px !important; }
  .section-title h2 { font-size: 32px !important; }
}
@media (max-width: 575px) {
  .tb-products-section { padding: 8px 0 8px; }
  .tb-products-title { font-size: 22px; }
  .tb-products-header { margin-bottom: 24px; }
  .tb-promo-row { margin-bottom: 24px; }
  .tb-pcard__body { padding: 12px 14px 14px; }
  .tb-pcard__name { font-size: 13px; }
  .tb-pcard__price { font-size: 16px; }
  .tb-pcard__variants { gap: 4px; margin: 4px 0 6px; }
  .tb-pcard__vpill { padding: 2px 7px; font-size: 10px; border-radius: 4px; }
  .tb-pcard__atc { font-size: 12px; padding: 11px 0; letter-spacing: 0.5px; }
  .tb-pcard__action-zone { width: calc(100% + 28px); margin: auto -14px -14px -14px; }
  .tb-pcard__tag { font-size: 10px; padding: 4px 10px; }
  .tb-pcard__discount { font-size: 10px; padding: 4px 10px; }
  .tb-pcard__wish { width: 30px; height: 30px; font-size: 14px; }
  /* Stack price and qty-control vertically so they don't fight for space on col-6 cards */
  .tb-pcard__pricing-wrapper {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
  }
  .tb-qty-inline {
    width: 90px;
    height: 30px;
  }
  .tb-qty-inline button {
    width: 28px;
    font-size: 14px;
  }
  .tb-qty-val {
    font-size: 12px;
  }

  /* Responsive: Our Strengths Section */
  .tb-strengths-section { padding: 40px 0; }
  .tb-strength-card { padding: 24px 16px; margin-bottom: 16px; }
  .tb-strength-icon { width: 60px; height: 60px; margin-bottom: 16px; border-radius: 16px; }
  .tb-strength-icon img { width: 34px; }
  .tb-strength-card h4 { font-size: 15px; }
  .tb-strength-intro { margin-bottom: 28px; }
  .tb-strength-intro p { font-size: 14px; line-height: 1.65; }

  /* Responsive: Legacy Global Spacing Overrides */
  .pt-100 { padding-top: 40px !important; }
  .pb-70 { padding-bottom: 30px !important; }
  .pb-30 { padding-bottom: 20px !important; }
  .pt-45 { padding-top: 25px !important; }
  .section-title h2 { font-size: 26px !important; line-height: 1.3 !important; }
}

/* ── Brand-slider owl dots ── */
.tb-products-section .owl-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  padding-bottom: 4px;
}
.tb-products-section .owl-dot span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d4d4d4;
  transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease;
}
.tb-products-section .owl-dot.active span {
  background: var(--tb-green-dark);
  width: 28px;
  border-radius: 5px;
  transform: scaleY(1);
}
.tb-products-section .owl-dot:hover span {
  background: var(--tb-green-dark);
}

/* --- Legacy offer-item styles (daily offers, etc.) --- */
.brand-slider .card.openslider,
.new-arrival-item {
  border: none !important;
  border-radius: var(--tb-radius) !important;
  overflow: hidden;
  box-shadow: var(--tb-shadow-sm);
  transition: var(--tb-transition);
  background: #fff;
}
.brand-slider .card.openslider:hover,
.new-arrival-item:hover {
  box-shadow: var(--tb-shadow-hover);
  transform: translateY(-4px);
}
.offer-item {
  border-radius: var(--tb-radius);
  overflow: hidden;
}
.offer-img {
  position: relative;
  overflow: hidden;
  background: var(--tb-cream);
  aspect-ratio: 1 / 1;
}
.offer-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  transition: transform 0.4s ease;
}
.offer-img:hover img { transform: scale(1.04); }
.offer-item-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--tb-green-dark);
  color: #fff;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
}
.offer-item-tag h3 {
  margin: 0;
  font-size: 11px;
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
}
.offer-item .content {
  padding: 14px 16px 16px;
  background: #fff;
}
.offer-item .content h3 {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--tb-text);
  margin-bottom: 6px;
  line-height: 1.4;
}
.offer-item .content h3 a {
  color: var(--tb-text);
  text-decoration: none;
  transition: color 0.2s ease;
}
.offer-item .content h3 a:hover { color: var(--tb-green-dark); }
.offer-item .content span {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--tb-green-dark);
}
.offer-item .content span del {
  font-size: 12px;
  font-weight: 400;
  color: #aaa;
  margin-left: 6px;
}

/* Arrival items (daily offers section) */
.arrival-img {
  position: relative;
  overflow: hidden;
  background: var(--tb-cream);
  border-radius: var(--tb-radius) var(--tb-radius) 0 0;
  aspect-ratio: 1 / 1;
}
/* Course section: arrival-img wrapping an iframe should use 16:9 ratio */
.arrival-img:has(iframe) {
  aspect-ratio: 16 / 9;
  background: #000;
}
.arrival-img iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
  display: block;
}
.arrival-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  transition: transform 0.4s ease;
}
.arrival-img:hover img { transform: scale(1.04); }
.arrival-item-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--tb-gold);
  color: var(--tb-brown-dark);
  border-radius: 20px;
  padding: 2px 10px;
}
.arrival-item-tag h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--tb-brown-dark);
  line-height: 1.4;
}
.new-arrival-item .content {
  padding: 12px 14px 16px;
  background: #fff;
}
.new-arrival-item .content h3 { font-size: 14px; margin-bottom: 6px; }
.new-arrival-item .content h3 a { color: var(--tb-text); }
.new-arrival-item .content h3 a:hover { color: var(--tb-green-dark); }
.new-arrival-item .content span { font-weight: 700; color: var(--tb-green-dark); }
.new-arrival-item .content span del { color: #aaa; font-weight: 400; font-size: 12px; }

/* ==========================================================
   5. SECTION TITLES
   ========================================================== */
.section-title h2 {
  font-family: 'Inter', sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--tb-green-dark) !important;
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
}
.section-title h2::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background: var(--tb-gold) !important;
  border-radius: 2px;
  margin: 10px auto 0;
}
.section-title.text-center h2::after { margin: 10px auto 0; }

/* Override for dark-bg sections */
section.our-offers .section-title h2,
.choose-area-two.pt-100.pb-30 h2 {
  color: #fff !important;
}

/* ==========================================================
   6. POPULAR CATEGORIES SECTION — Circular Design
   ========================================================== */
section.popular-category.pc-section {
  background: var(--tb-cream) !important;
  padding: 70px 0 90px;
}

.pc-strip {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 48px 80px;
  margin-top: 56px;
}

.pc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-decoration: none !important;
  width: 200px;
}

/* ---- Circle ---- */
.pc-circle {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--tb-green-dark), #5a9e30);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(45, 80, 22, 0.25), 0 2px 8px rgba(0,0,0,0.06);
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.35s ease;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/* Inner decorative ring */
.pc-circle::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  pointer-events: none;
  z-index: 1;
}

/* Shimmer on hover */
.pc-circle::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -70%;
  width: 50%;
  height: 200%;
  background: rgba(255, 255, 255, 0.16);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}
.pc-item:hover .pc-circle::after { left: 130%; }

.pc-circle img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
  display: block;
}

/* ---- Hover ---- */
.pc-item:hover .pc-circle {
  transform: translateY(-10px) scale(1.06);
  box-shadow: 0 22px 48px rgba(45, 80, 22, 0.28), 0 4px 12px rgba(0,0,0,0.08);
}
.pc-item:hover .pc-circle img { transform: scale(1.08); }

/* ---- Labels ---- */
.pc-label {
  font-family: 'Inter', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--tb-text);
  text-align: center;
  line-height: 1.3;
  transition: color 0.25s ease;
  margin: 0;
}
.pc-count {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--tb-text-light);
  text-align: center;
  margin-top: -12px;
  transition: color 0.25s ease;
}
.pc-item:hover .pc-label { color: var(--tb-green-dark); }
.pc-item:hover .pc-count  { color: var(--tb-green); }

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .pc-circle { width: 160px; height: 160px; }
  .pc-item   { width: 170px; gap: 16px; }
  .pc-strip  { gap: 40px 50px; margin-top: 44px; }
  .pc-label  { font-size: 17px; }
}
@media (max-width: 767px) {
  .pc-circle { width: 140px; height: 140px; }
  .pc-item   { width: 150px; gap: 14px; }
  .pc-strip  { gap: 32px 36px; margin-top: 36px; }
  .pc-label  { font-size: 15px; }
  section.popular-category.pc-section { padding: 52px 0 64px; }
}
@media (max-width: 480px) {
  .pc-strip  { gap: 28px 24px; justify-content: center; margin-top: 30px; }
  .pc-circle { width: 110px; height: 110px; }
  .pc-item   { width: 120px; gap: 12px; }
  .pc-label  { font-size: 13px; }
  .pc-count  { font-size: 11px; }
  section.popular-category.pc-section { padding: 40px 0 52px; }
}

/* ==========================================================
   7. BLOG CARDS
   ========================================================== */
.blog-card {
  border-radius: var(--tb-radius) !important;
  overflow: hidden;
  box-shadow: var(--tb-shadow-sm);
  transition: var(--tb-transition);
  background: #fff;
  margin-bottom: 28px;
}
.blog-card:hover { box-shadow: var(--tb-shadow-hover); transform: translateY(-4px); }
.blog-card > a img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.blog-card:hover > a img { transform: scale(1.03); }
.blog-card .content {
  padding: 18px 20px 20px;
}
.blog-card .content h5 a {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--tb-text);
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s ease;
}
.blog-card .content h5 a:hover { color: var(--tb-green-dark); }
.read-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 7px 20px;
  background: var(--tb-green-dark);
  color: #fff !important;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
  transition: var(--tb-transition);
}
.read-btn:hover { background: var(--tb-green); transform: translateY(-2px); color: #fff !important; }

/* ==========================================================
   8. FOOTER THEME
   ========================================================== */
footer.footer-area {
  background: var(--tb-green-dark) !important;
  background-image: none !important;
}
.footer-widget h3 {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  color: var(--tb-gold) !important;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-widget p,
.footer-widget-color-2 p {
  color: rgba(255,255,255,0.75) !important;
  font-size: 13px;
  line-height: 1.7;
}
.footer-list-contact li a,
.footer-list li a {
  color: rgba(255,255,255,0.75) !important;
  font-size: 13px;
  transition: color 0.2s ease, padding-left 0.2s ease;
  text-decoration: none;
}
.footer-list-contact li a:hover,
.footer-list li a:hover {
  color: var(--tb-gold) !important;
  padding-left: 4px;
}
.footer-list-contact li i {
  color: var(--tb-gold) !important;
  margin-right: 8px;
}
.footer-list li { margin-bottom: 8px; }
.social-link li a {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 36px !important; height: 36px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: var(--tb-transition) !important;
  font-size: 16px !important;
}
.social-link li a:hover {
  background: var(--tb-gold) !important;
  color: var(--tb-brown-dark) !important;
  transform: translateY(-3px) !important;
}
.copy-right-area-three {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 18px 0;
  text-align: center;
}
.copy-right-text p {
  color: rgba(255,255,255,0.6) !important;
  font-size: 13px;
  margin: 0;
}
.copy-right-text a { color: var(--tb-gold) !important; }

/* ==========================================================
   9. TESTIMONIALS — redesigned
   ========================================================== */

/* Kill old styles from style.css */
.testimonials-area-two,
.testimonials-area-two::before,
.testimonials-slider-two,
.testimonials-slider-two::before { display: none !important; }

/* New section */
.tb-testimonials {
  padding: 72px 0 80px;
  background: var(--tb-cream, #faf8f4);
}
.tb-testimonials-header {
  text-align: center;
  margin-bottom: 48px;
}
.tb-section-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tb-green, #57792b);
  background: rgba(87,121,43,0.1);
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.tb-testimonials-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--tb-green-dark, #1a2e0a);
  margin: 0 0 10px;
}
.tb-testimonials-header p {
  font-size: 16px;
  color: var(--tb-text-light, #6b7c5a);
  margin: 0;
}

/* Card */
.tb-testimonial-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px 28px;
  border: 1px solid rgba(87,121,43,0.1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  margin: 10px 8px 20px;
}
.tb-testimonial-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}

/* Stars */
.tb-testimonial-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 18px;
}
.tb-testimonial-stars i {
  font-size: 16px;
  color: #f4b740;
}

/* Body */
.tb-testimonial-body {
  font-size: 15px;
  line-height: 1.7;
  color: #3d3d3d;
  margin-bottom: 24px;
  min-height: 80px;
}
.tb-testimonial-body p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* Author */
.tb-testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid rgba(87,121,43,0.1);
}
.tb-author-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tb-green, #57792b), #8fb560);
  color: #fff !important;
  font-weight: 700;
  font-size: 18px;
  line-height: 44px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tb-author-info h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--tb-green-dark, #1a2e0a);
  margin: 0 0 2px;
}
.tb-author-info span {
  font-size: 13px;
  color: var(--tb-text-light, #6b7c5a);
}

/* Owl overrides for this section */
.tb-testimonials-track.owl-carousel .owl-stage-outer {
  padding: 10px 0 20px;
  overflow: hidden;
}
.tb-testimonials-track.owl-carousel .owl-stage {
  display: flex !important;
}
.tb-testimonials-track.owl-carousel .owl-item {
  display: flex !important;
}
.tb-testimonials-track.owl-carousel .owl-item .tb-testimonial-card {
  width: 100%;
}
.tb-testimonials-track .owl-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}
.tb-testimonials-track .owl-nav button.owl-prev,
.tb-testimonials-track .owl-nav button.owl-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--tb-green, #57792b) !important;
  background: #fff !important;
  color: var(--tb-green, #57792b) !important;
  font-size: 20px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  line-height: 1;
}
.tb-testimonials-track .owl-nav button.owl-prev:hover,
.tb-testimonials-track .owl-nav button.owl-next:hover {
  background: var(--tb-green, #57792b) !important;
  color: #fff !important;
}
.tb-testimonials-track .owl-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.tb-testimonials-track .owl-dots .owl-dot span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(87,121,43,0.25);
  transition: all 0.3s ease;
}
.tb-testimonials-track .owl-dots .owl-dot.active span {
  background: var(--tb-green, #57792b);
  width: 24px;
  border-radius: 4px;
}

/* Responsive */
@media (max-width: 767px) {
  .tb-testimonials { padding: 48px 0 56px; }
  .tb-testimonials-header h2 { font-size: 28px; }
  .tb-testimonial-card { padding: 24px 20px 22px; }
}
@media (max-width: 480px) {
  .tb-testimonials-header h2 { font-size: 24px; }
  .tb-testimonial-body { font-size: 14px; }
}

/* ==========================================================
   10. MOBILE NAV IMPROVEMENTS
   ========================================================== */
/* Mobile hamburger button */
.tb-mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  position: relative;
  z-index: 1060;
}
.tb-mobile-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--tb-green-dark);
  border-radius: 2px;
  transition: all 0.3s ease;
}
.tb-mobile-menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tb-mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.tb-mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav slide-down */
.tb-mobile-nav-drawer {
  display: none;
  background: #fff;
  border-top: 2px solid var(--tb-cream-dark);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 16px 0;
  z-index: 9;
  position: relative;
}
.tb-mobile-nav-drawer.open { display: block; }
.tb-mobile-nav-drawer ul { list-style: none; margin: 0; padding: 0; }
.tb-mobile-nav-drawer ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--tb-green-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  text-decoration: none;
  transition: background 0.2s ease, padding-left 0.2s ease;
}
.tb-mobile-nav-drawer ul li a i:first-child {
  font-size: 18px;
  color: var(--tb-green-dark);
  flex-shrink: 0;
}
.tb-mobile-nav-drawer ul li a:hover {
  background: #f0f7ec;
  padding-left: 32px;
  color: var(--tb-green-dark);
}
.tb-mobile-nav-drawer ul li:last-child a { border-bottom: none; }
/* Sub-items */
.tb-mobile-nav-drawer ul li.tb-mob-parent > a { display: flex; align-items: center; gap: 10px; }
.tb-mobile-nav-drawer ul li.tb-mob-parent > a i:last-child { margin-left: auto; }
.tb-mobile-sub-menu { display: none; background: #f5f3ee; }
.tb-mobile-sub-menu.open { display: block; }
.tb-mobile-sub-menu a {
  padding-left: 42px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  color: var(--tb-text) !important;
}

@media (max-width: 991px) {
  /* Match the specificity of the global "html body .main-nav.tb-bottom-nav"
     rule so this display:none beats the global display:block !important */
  html body .main-nav.tb-bottom-nav,
  html body .tb-bottom-nav { display: none !important; }
  .tb-mobile-menu-toggle { display: flex; }
  
  /* Make the middle bar sticky on mobile, since bottom nav is hidden */
  .tb-middle-bar { 
    position: sticky !important; 
    position: -webkit-sticky !important;
    top: 0 !important;
    z-index: 9 !important;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    padding: 12px 0; 
  }
  
  /* Ensure search form takes full allowed width */
  .tb-search-form { max-width: 100%; margin: 0; }
  .tb-middle-bar .tb-header-icons { 
    display: flex; 
    align-items: center; 
    justify-content: flex-end; 
    gap: 12px; 
  }
  .tb-icon-box a { font-size: 20px; }
  /* Mega-menu adjustments for tablet */
  .tb-mega-menu { min-width: 320px; max-width: 90vw; padding: 16px 16px 12px; }
  .tb-mega-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tb-mega-icon { width: 44px; height: 44px; }
  .tb-mega-icon i { font-size: 20px; }
}
@media (max-width: 575px) {
  .tb-header-logo img { max-height: 70px; max-width: 100%; }
  .tb-search-form input { height: 44px; font-size: 14px; }
  .section-title h2 { font-size: 24px !important; }
  .offer-area.pt-100.pb-70 { padding: 40px 0; }
}

/* ==========================================================
   11. GENERAL POLISH
   ========================================================== */
/* Background sections */
section.popular-category { background: var(--tb-cream) !important; }
.choose-card-two {
  text-align: center;
  padding: 28px 20px;
  border-radius: var(--tb-radius);
  background: rgba(255,255,255,0.12);
  margin-bottom: 24px;
  transition: var(--tb-transition);
}
.choose-card-two:hover { background: rgba(255,255,255,0.2); transform: translateY(-4px); }
.choose-card-two h4 {
  color: #fff !important;
  font-size: 15px;
  margin-top: 12px;
}
.choose-card-two h3 {
  color: #fff !important;
  font-size: 17px;
  margin-top: 12px;
}
.choose-card-two p, .choose-card-two .iconimage { color: rgba(255,255,255,0.85); }
.iconimage-one { width: 60px; height: 60px; object-fit: contain; filter: brightness(0) invert(1); }

/* Inner banner (shop page header) */
.inner-banner-area {
  background: linear-gradient(135deg, var(--tb-green-dark) 0%, var(--tb-green) 100%);
  padding: 50px 0;
  margin-bottom: 0;
}
.inner-banner-area .inner-content h2 { color: #fff; font-family: 'Inter', sans-serif; }
.inner-banner-area .inner-content ul li,
.inner-banner-area .inner-content ul li a { color: rgba(255,255,255,0.8); }

/* "Our Offers" horizontal scroll section */
.js-scroll-slider-wrap { overflow: hidden; cursor: grab; }
.js-scroll-slider-wrap .slider-img {
  border-radius: var(--tb-radius);
  box-shadow: var(--tb-shadow-sm);
  object-fit: cover;
}

/* Body font upgrade */
body { font-family: 'Inter', sans-serif !important; }
h1, h2, h3, h4, h5, h6 { font-family: 'Inter', sans-serif; }

/* "Our Strengths" section */
.choose-area-two.pt-100.pb-30.bg-imgaes h4 { font-size: 14px; }

/* ==========================================================
   POPULAR CATEGORY — Responsive Padding & Text
   ========================================================== */

/* Tablet (≤991px): 2-per-row, moderate padding */
@media (max-width: 991px) {
  section.popular-category          { padding-top: 40px !important; padding-bottom: 40px !important; }
  section.popular-category .pt-62   { padding-top: 20px !important; }
  section.popular-category .pt-45   { padding-top: 28px !important; }
  .category-content h2              { font-size: 26px !important; }
  .category-content p               { font-size: 15px !important; }
  .category-item-inner              { min-height: 180px; }
  .category-single-item             { margin-bottom: 20px; }
}

/* Small tablet / large phone (≤767px) */
@media (max-width: 767px) {
  section.popular-category          { padding-top: 32px !important; padding-bottom: 32px !important; }
  section.popular-category .pt-62   { padding-top: 12px !important; }
  section.popular-category .pt-45   { padding-top: 20px !important; }
  .category-content h2              { font-size: 20px !important; }
  .category-content p               { font-size: 13px !important; }
  .category-item-inner              { min-height: 155px; }
  .category-single-item             { margin-bottom: 16px; }
  .category-thumb img               { max-height: 130px; object-fit: contain; }
}

/* Mobile (≤575px): full-width stacked cards */
@media (max-width: 575px) {
  section.popular-category          { padding-top: 24px !important; padding-bottom: 24px !important; }
  section.popular-category .pt-62   { padding-top: 8px !important; }
  section.popular-category .pt-45   { padding-top: 16px !important; }
  section.popular-category .section-title h2 { font-size: 20px !important; }
  .category-content h2              { font-size: 17px !important; line-height: 1.2; }
  .category-content p               { font-size: 12px !important; }
  .category-item-inner              { min-height: 130px; border-radius: 10px !important; }
  .category-single-item             { margin-bottom: 12px; }
  .category-thumb img               { max-height: 110px; object-fit: contain; }
}

/* ==========================================================
   PRODUCT DETAILS PAGE
   ========================================================== */

/* Breadcrumb */
.tb-breadcrumb {
  background: var(--tb-cream, #f4efeb);
  padding: 14px 0;
}
.tb-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tb-breadcrumb ol li {
  font-size: 14px;
  color: var(--tb-text-light, #666);
}
.tb-breadcrumb ol li a {
  color: var(--tb-text-light, #666);
  text-decoration: none;
  transition: color 0.2s;
}
.tb-breadcrumb ol li a:hover {
  color: var(--tb-green, #4a7c29);
}
.tb-breadcrumb ol li + li::before {
  content: "/";
  margin-right: 8px;
  color: #bbb;
}
.tb-breadcrumb ol li.active {
  color: var(--tb-text, #2c2c2c);
  font-weight: 500;
}

/* ==========================================================
   PRODUCT DETAILS SECTION
   ========================================================== */
.tb-product-details {
  padding: 30px 0 24px;
}

/* Product Image */
.tb-pd-image {
  position: sticky;
  top: 90px;
  background: var(--tb-cream, #f4efeb);
  border-radius: var(--tb-radius-lg, 24px);
  overflow: hidden;
  margin-bottom: 24px;
}
.tb-pd-image img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  display: block;
  padding: 16px;
}

/* Product Info */
.tb-pd-info {
  padding-left: 24px;
}
.tb-pd-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--tb-text, #2c2c2c);
  margin: 0 0 8px;
  line-height: 1.3;
}

/* Rating */
.tb-pd-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tb-stars {
  display: flex;
  gap: 2px;
}
.tb-stars i {
  color: var(--tb-green, #4a7c29);
  font-size: 17px;
}
.tb-rating-text {
  font-size: 14px;
  color: var(--tb-text-light, #666);
  text-decoration: none;
  transition: color 0.2s;
}
.tb-rating-link:hover {
  color: var(--tb-green, #4a7c29);
  text-decoration: underline;
}
.tb-write-review-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--tb-green, #4a7c29);
  text-decoration: none;
  padding-left: 10px;
  border-left: 1px solid #ddd;
  transition: color 0.2s;
}
.tb-write-review-link:hover {
  text-decoration: underline;
  color: var(--tb-green-dark, #2d5016);
}

/* Price */
.tb-pd-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}
.tb-price-current {
  font-size: 28px;
  font-weight: 700;
  color: var(--tb-green-dark, #2d5016);
}
.tb-price-original {
  font-size: 17px;
  color: #999;
  text-decoration: line-through;
}
.tb-price-discount {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--tb-green, #4a7c29);
  padding: 3px 10px;
  border-radius: 20px;
}

/* Truncated Description */
.tb-pd-description {
  font-size: 14px;
  line-height: 1.7;
  color: var(--tb-text-light, #666);
  margin-bottom: 6px;
}
.tb-pd-description-truncated {
  max-height: 100px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.3s ease;
}
.tb-pd-description:not(.tb-pd-description-truncated) {
  max-height: 2000px;
  transition: max-height 0.4s ease;
}
.tb-pd-description-truncated::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(transparent, #fff);
}
.tb-pd-description p {
  margin-bottom: 6px;
}
.tb-read-more-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tb-green, #4a7c29);
  text-decoration: none;
  margin-bottom: 16px;
  transition: color 0.2s;
}
.tb-read-more-link:hover {
  color: var(--tb-green-dark, #2d5016);
  text-decoration: underline;
}
.tb-read-more-link i {
  font-size: 16px;
}

/* Buy Row: Quantity + Add to Cart inline */
.tb-pd-buy-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.tb-pd-quantity {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tb-pd-quantity > label {
  font-size: 14px;
  font-weight: 600;
  color: var(--tb-text, #2c2c2c);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}
.tb-qty-selector {
  display: inline-flex;
  align-items: center;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
}
.tb-qty-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: #f8f8f8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--tb-text, #2c2c2c);
  transition: background 0.2s;
}
.tb-qty-btn:hover {
  background: #e8e8e8;
}
.tb-qty-selector input.qty {
  width: 48px;
  height: 40px;
  border: none;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--tb-text, #2c2c2c);
  background: #fff;
  -moz-appearance: textfield;
  appearance: textfield;
}
.tb-qty-selector input.qty::-webkit-outer-spin-button,
.tb-qty-selector input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Add to Cart Button */
.tb-pd-actions {
  flex: 1;
}
.tb-btn-cart {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 40px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--tb-green, #4a7c29);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: var(--tb-transition, all 0.3s ease);
  box-shadow: 0 4px 15px rgba(74, 124, 41, 0.3);
}
.tb-btn-cart:hover {
  background: var(--tb-green-dark, #2d5016);
  box-shadow: 0 6px 20px rgba(74, 124, 41, 0.4);
  transform: translateY(-2px);
}
.tb-btn-cart:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(74, 124, 41, 0.2);
}
.tb-btn-cart i {
  font-size: 18px;
}

/* Product Meta (trust badges) - horizontal */
.tb-pd-meta {
  display: flex;
  gap: 20px;
  padding: 14px 18px;
  background: var(--tb-cream, #f4efeb);
  border-radius: var(--tb-radius, 12px);
  flex-wrap: wrap;
}
.tb-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--tb-text, #2c2c2c);
}
.tb-meta-item i {
  font-size: 18px;
  color: var(--tb-green, #4a7c29);
  flex-shrink: 0;
}

/* ==========================================================
   PRODUCT TABS
   ========================================================== */
.tb-product-tabs {
  padding: 0 0 40px;
}
.tb-tabs-wrapper {
  background: #fff;
  border-radius: var(--tb-radius-lg, 24px);
  box-shadow: var(--tb-shadow, 0 4px 15px rgba(0,0,0,0.08));
  overflow: hidden;
}
.tb-tab-nav {
  display: flex;
  border-bottom: 2px solid #f0f0f0;
}
.tb-tab-btn {
  flex: 1;
  padding: 16px 24px;
  font-size: 15px;
  font-weight: 600;
  color: var(--tb-text-light, #666);
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: color 0.3s;
}
.tb-tab-btn::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: background 0.3s;
}
.tb-tab-btn.active {
  color: var(--tb-green, #4a7c29);
}
.tb-tab-btn.active::after {
  background: var(--tb-green, #4a7c29);
}
.tb-tab-btn:hover {
  color: var(--tb-green, #4a7c29);
}

/* Tab Content */
.tb-tab-pane {
  display: none;
  padding: 28px;
}
.tb-tab-pane.active {
  display: block;
}
.tb-description-content {
  font-size: 15px;
  line-height: 1.8;
  color: var(--tb-text, #2c2c2c);
  max-width: 900px;
}
.tb-description-content h3 {
  font-weight: 600;
  margin-bottom: 12px;
}
.tb-description-content p {
  margin-bottom: 14px;
}
.tb-description-content ul,
.tb-description-content ol {
  padding-left: 20px;
  margin-bottom: 14px;
}

/* ==========================================================
   REVIEWS - TOP ROW (Summary + Form side by side)
   ========================================================== */
.tb-review-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 28px;
}

/* Review Summary */
.tb-review-summary {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 24px;
  background: var(--tb-cream, #f4efeb);
  border-radius: var(--tb-radius, 12px);
  margin-bottom: 0;
  height: 100%;
  align-content: center;
  flex-wrap: wrap;
}
.tb-review-score {
  text-align: center;
  min-width: 90px;
}
.tb-score-number {
  font-size: 40px;
  font-weight: 700;
  color: var(--tb-text, #2c2c2c);
  line-height: 1;
}
.tb-score-stars {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin: 6px 0 4px;
}
.tb-score-stars i {
  color: var(--tb-green, #4a7c29);
  font-size: 15px;
}
.tb-score-count {
  font-size: 12px;
  color: var(--tb-text-light, #666);
}

/* Star Bars */
.tb-review-bars {
  flex: 1;
}
.tb-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.tb-bar-label {
  font-size: 13px;
  color: var(--tb-text-light, #666);
  width: 44px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.tb-bar-label i {
  font-size: 11px;
  color: var(--tb-green, #4a7c29);
}
.tb-bar-track {
  flex: 1;
  background: #e0e0e0;
  border-radius: 6px;
  height: 8px;
  overflow: hidden;
}
.tb-bar-fill {
  height: 100%;
  background: var(--tb-green, #4a7c29);
  border-radius: 6px;
  transition: width 0.4s ease;
}
.tb-bar-count {
  font-size: 13px;
  color: var(--tb-text-light, #666);
  width: 24px;
  text-align: right;
}

/* ==========================================================
   REVIEW FORM (Modern Card)
   ========================================================== */
.tb-review-form-card {
  background: #fff;
  border-radius: var(--tb-radius, 12px);
  padding: 24px;
  border: 1.5px solid #e8e8e8;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tb-review-form-header {
  margin-bottom: 16px;
}
.tb-review-form-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--tb-text, #2c2c2c);
  margin: 0 0 4px;
}
.tb-review-form-header p {
  font-size: 13px;
  color: var(--tb-text-light, #666);
  margin: 0;
}
.tb-star-picker {
  margin-bottom: 14px;
}
.tb-star-picker > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--tb-text, #2c2c2c);
  margin-bottom: 6px;
}
.tb-star-select {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tb-star-picker .tb-rate-area {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  gap: 5px !important;
  padding: 0 !important;
}
.tb-rate-area input {
  display: none !important;
  visibility: hidden !important;
}
.tb-rate-area label {
  cursor: pointer !important;
  color: #ccc !important;
  font-size: 24px !important;
  transition: color 0.2s !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  float: none !important;
  display: inline-block !important;
  background: none !important;
}
.tb-rate-area label:before {
  content: "" !important; /* Force clear out style.css content star */
  display: none !important;
}
.tb-rate-area label i {
  color: inherit !important;
  display: block !important;
  font-size: inherit !important;
}
.tb-rate-area label:hover,
.tb-rate-area label:hover ~ label,
.tb-rate-area input:checked ~ label {
  color: #ee8100 !important;
}
.tb-star-hint {
  font-size: 12px;
  color: var(--tb-text-light, #666);
  font-style: italic;
}
.tb-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 0;
}
.tb-form-group {
  margin-bottom: 12px;
}
.tb-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--tb-text, #2c2c2c);
  margin-bottom: 5px;
}
.tb-form-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
  color: var(--tb-text, #2c2c2c);
  transition: border-color 0.2s, background 0.2s;
  outline: none;
  font-family: inherit;
}
.tb-form-input:focus {
  border-color: var(--tb-green, #4a7c29);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74, 124, 41, 0.08);
}
.tb-form-input::placeholder {
  color: #999 !important;
  opacity: 1;
}
textarea.tb-form-input {
  resize: vertical;
  min-height: 80px;
}
.tb-btn-submit {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--tb-green, #4a7c29);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--tb-transition, all 0.3s ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
}
.tb-btn-submit:hover {
  background: var(--tb-green-dark, #2d5016);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 124, 41, 0.3);
}
.tb-btn-submit i {
  font-size: 16px;
}

/* ==========================================================
   REVIEW LIST
   ========================================================== */
.tb-review-list-section {
  border-top: 1px solid #eee;
  padding-top: 24px;
}
.tb-review-list-header {
  margin-bottom: 16px;
}
.tb-review-list-header h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--tb-text, #2c2c2c);
  margin: 0;
}
.tb-review-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.tb-review-card {
  padding: 16px;
  background: #fafafa;
  border-radius: 10px;
  border: 1px solid #f0f0f0;
  transition: var(--tb-transition, all 0.3s ease);
}
.tb-review-card:hover {
  box-shadow: var(--tb-shadow-sm, 0 2px 8px rgba(0,0,0,0.06));
  border-color: #e0e0e0;
}
.tb-review-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.tb-reviewer-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--tb-green, #4a7c29);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.tb-reviewer-info {
  flex: 1;
  min-width: 0;
}
.tb-reviewer-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tb-reviewer-info h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--tb-text, #2c2c2c);
  margin: 0;
}
.tb-verified-badge {
  font-size: 11px;
  color: var(--tb-green, #4a7c29);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.tb-verified-badge i {
  font-size: 13px;
}
.tb-review-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.tb-star-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--tb-green, #4a7c29);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 4px;
}
.tb-star-badge i {
  font-size: 10px;
  color: #fff;
}
.tb-stars-sm {
  display: flex;
  gap: 1px;
}
.tb-stars-sm i {
  color: #ee8100;
  font-size: 14px;
}
.tb-stars-sm span {
  font-size: 13px;
  color: var(--tb-text-light, #666);
  margin-left: 4px;
}
.tb-review-date {
  font-size: 12px;
  color: #999;
}
.tb-review-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--tb-text-light, #666);
  margin: 0;
}

/* No Reviews State */
.tb-no-reviews {
  text-align: center;
  padding: 40px 20px;
  color: var(--tb-text-light, #666);
}
.tb-no-reviews i {
  font-size: 48px;
  color: #ddd;
  margin-bottom: 12px;
  display: block;
}
.tb-no-reviews p {
  font-size: 15px;
  margin: 0;
}

/* ==========================================================
   RELATED PRODUCTS
   ========================================================== */
.tb-related-products {
  padding: 36px 0 50px;
  background: var(--tb-cream, #f4efeb);
}
.tb-section-header {
  text-align: center;
  margin-bottom: 24px;
}
.tb-section-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--tb-text, #2c2c2c);
}
.tb-related-card {
  background: #fff;
  border-radius: var(--tb-radius, 12px);
  overflow: hidden;
  box-shadow: var(--tb-shadow-sm, 0 2px 8px rgba(0,0,0,0.06));
  transition: var(--tb-transition, all 0.3s ease);
  margin-bottom: 20px;
}
.tb-related-card:hover {
  box-shadow: var(--tb-shadow-hover, 0 8px 25px rgba(0,0,0,0.12));
  transform: translateY(-4px);
}
.tb-related-img {
  background: #f8f8f8;
  overflow: hidden;
}
.tb-related-img img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  padding: 12px;
  transition: transform 0.3s;
}
.tb-related-card:hover .tb-related-img img {
  transform: scale(1.05);
}
.tb-related-info {
  padding: 12px 14px 16px;
}
.tb-related-info h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
  line-height: 1.4;
}
.tb-related-info h3 a {
  color: var(--tb-text, #2c2c2c);
  text-decoration: none;
  transition: color 0.2s;
}
.tb-related-info h3 a:hover {
  color: var(--tb-green, #4a7c29);
}
.tb-related-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
}
.tb-related-price .tb-price-current {
  font-size: 17px;
  font-weight: 700;
}
.tb-related-price .tb-price-original {
  font-size: 13px;
}

/* ==========================================================
   PRODUCT DETAILS - RESPONSIVE
   ========================================================== */

/* Tablet */
@media (max-width: 991px) {
  .tb-pd-image {
    position: static;
    margin-bottom: 20px;
  }
  .tb-pd-info {
    padding-left: 0;
  }
  .tb-pd-title {
    font-size: 24px;
  }
  .tb-review-top-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .tb-review-summary {
    gap: 20px;
    padding: 20px;
  }
  .tb-review-list {
    grid-template-columns: 1fr;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .tb-product-details {
    padding: 20px 0 16px;
  }
  .tb-pd-image {
    border-radius: 16px;
  }
  .tb-pd-image img {
    padding: 12px;
    max-height: 360px;
  }
  .tb-pd-title {
    font-size: 22px;
  }
  .tb-pd-price {
    flex-wrap: wrap;
    gap: 8px;
  }
  .tb-price-current {
    font-size: 24px;
  }
  .tb-pd-buy-row {
    flex-direction: column;
    align-items: stretch;
  }
  .tb-pd-quantity {
    justify-content: flex-start;
  }
  .tb-btn-cart {
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
  }
  .tb-pd-meta {
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
  }
  .tb-tabs-wrapper {
    border-radius: 16px;
  }
  .tb-tab-btn {
    font-size: 14px;
    padding: 14px 16px;
  }
  .tb-tab-pane {
    padding: 18px 14px;
  }
  .tb-review-summary {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }
  .tb-review-bars {
    width: 100%;
  }
  .tb-review-top-row {
    grid-template-columns: 1fr;
  }
  .tb-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .tb-review-form-card {
    padding: 18px;
  }
  .tb-review-list {
    grid-template-columns: 1fr;
  }
  .tb-related-img img {
    height: 160px;
  }
  .tb-related-info {
    padding: 10px 12px 14px;
  }
  .tb-related-info h3 {
    font-size: 13px;
  }
  .tb-related-price .tb-price-current {
    font-size: 16px;
  }
  .tb-section-header h2 {
    font-size: 22px;
  }
  .tb-write-review-link {
    border-left: none;
    padding-left: 0;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .tb-pd-title {
    font-size: 20px;
  }
  .tb-price-current {
    font-size: 22px;
  }
  .tb-breadcrumb ol li {
    font-size: 12px;
  }
  .tb-review-card {
    padding: 12px;
  }
  .tb-reviewer-avatar {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  .tb-pd-description-truncated {
    max-height: 80px;
  }
}

/* ==========================================================
   ABOUT US PAGE STYLES
   ========================================================== */
.tb-about-section {
  padding: 60px 0;
  background: var(--tb-white);
}
.tb-about-content {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.tb-about-img-box {
  position: relative;
  border-radius: var(--tb-radius-lg, 24px);
  overflow: hidden;
  box-shadow: var(--tb-shadow-lg, 0 10px 30px rgba(0,0,0,0.1));
}
.tb-about-img-box img {
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
}
.tb-about-img-box:hover img {
  transform: scale(1.03);
}
.tb-about-text {
  max-width: 800px;
  margin: 0 auto;
}
.tb-about-text h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--tb-text, #2c2c2c);
  margin-bottom: 24px;
  line-height: 1.2;
}
.tb-about-text p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--tb-text-light, #666);
  margin-bottom: 15px;
}

/* Why Choose Us Section */
.tb-wcu-section {
  padding: 80px 0;
  background: var(--tb-cream, #f4efeb);
}
.tb-wcu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}
.tb-wcu-card {
  background: #fff;
  padding: 30px;
  border-radius: var(--tb-radius-lg, 24px);
  text-align: center;
  transition: var(--tb-transition);
  border: 1px solid transparent;
}
.tb-wcu-card:hover {
  transform: translateY(-8px);
  border-color: var(--tb-green, #4a7c29);
  box-shadow: var(--tb-shadow-hover);
}
.tb-wcu-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: var(--tb-cream, #f4efeb);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}
.tb-wcu-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tb-wcu-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--tb-text, #2c2c2c);
  margin-bottom: 12px;
}
.tb-wcu-card p {
  font-size: 14px;
  color: var(--tb-text-light, #666);
  line-height: 1.6;
}

@media (max-width: 991px) {
  .tb-about-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* ==========================================================
   EBOOK PAGE STYLES (Refined & Compact)
   ========================================================== */
.tb-ebook-section {
  padding: 40px 0;
  background: var(--tb-white);
}
.tb-ebook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.tb-ebook-card {
  background: #fff;
  border-radius: var(--tb-radius, 12px);
  padding: 20px;
  text-align: center;
  transition: var(--tb-transition);
  border: 1px solid #efefef;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tb-ebook-card:hover {
  transform: translateY(-5px);
  border-color: var(--tb-green, #4a7c29);
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.tb-ebook-img {
  width: 70px;
  height: 70px;
  margin: 0 auto 16px;
  background: var(--tb-cream, #f4efeb);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.tb-ebook-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tb-ebook-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--tb-text, #2c2c2c);
  margin-bottom: 8px;
  line-height: 1.3;
}
.tb-ebook-card .tb-ebook-desc {
  font-size: 13px;
  color: var(--tb-text-light, #666);
  line-height: 1.5;
  margin-bottom: 20px;
  flex-grow: 1;
}
.tb-btn-read {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 20px;
  background: var(--tb-green, #4a7c29);
  color: #fff !important;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none !important;
}

/* Ebook Contact Section (Centered & Minimal) */
.tb-contact-section {
  background: var(--tb-cream, #f4efeb);
  padding: 50px 0;
  border-top: 1px solid #e8e2dc;
}
.tb-contact-form-card {
  background: #fff;
  padding: 30px;
  border-radius: var(--tb-radius-lg, 24px);
  box-shadow: var(--tb-shadow-sm);
  max-width: 650px;
  margin: 0 auto;
}

/* ==========================================================
   USER DASHBOARD (Premium Account Area)
   ========================================================== */
.tb-dashboard-wrapper {
  padding: 40px 0 60px;
  background: var(--tb-white, #fff);
}
.tb-dashboard-container {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 30px;
  align-items: start;
}

/* Sidebar Nav */
.tb-dashboard-sidebar {
  background: #fff;
  border: 1px solid #efefef;
  border-radius: var(--tb-radius, 12px);
  padding: 16px;
  position: sticky;
  top: 100px;
}
.tb-dashboard-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tb-dashboard-nav li {
  margin-bottom: 8px;
}
.tb-dashboard-nav li:last-child {
  margin-bottom: 0;
}
.tb-dashboard-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--tb-text, #2c2c2c);
  text-decoration: none !important;
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.tb-dashboard-nav a i {
  font-size: 18px;
  color: var(--tb-text-light, #666);
}
.tb-dashboard-nav li.active a,
.tb-dashboard-nav a:hover {
  background: var(--tb-cream, #f4efeb);
  color: var(--tb-green, #4a7c29);
}
.tb-dashboard-nav li.active a i,
.tb-dashboard-nav a:hover i {
  color: var(--tb-green, #4a7c29);
}
.tb-dashboard-nav a.tb-logout {
  color: #d32f2f;
}
.tb-dashboard-nav a.tb-logout i {
  color: #d32f2f;
}

/* Content Area */
.tb-dashboard-panel {
  display: none;
}
.tb-dashboard-panel.active {
  display: block;
}

.tb-card-header {
  margin-bottom: 20px;
}
.tb-card-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--tb-text, #2c2c2c);
  margin: 0;
}

/* Profile Section */
.tb-profile-brief {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #efefef;
}
.tb-profile-avatar {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--tb-cream, #f4efeb);
}
.tb-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tb-avatar-placeholder {
  width: 100%;
  height: 100%;
  background: var(--tb-green, #4a7c29);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}
.tb-profile-info h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
}
.tb-profile-info p {
  font-size: 13px;
  color: var(--tb-text-light, #666);
  margin: 0;
}

/* Orders Table */
.tb-table-wrapper {
  background: #fff;
  border: 1px solid #efefef;
  border-radius: var(--tb-radius, 12px);
  overflow: hidden;
}
.tb-order-table {
  width: 100%;
  border-collapse: collapse;
}
.tb-order-table th {
  background: #fafafa;
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: var(--tb-text, #2c2c2c);
  border-bottom: 1px solid #efefef;
}
.tb-order-table td {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--tb-text-light, #666);
  border-bottom: 1px solid #efefef;
  vertical-align: middle;
}
.tb-order-table tr:last-child td {
  border-bottom: none;
}
.tb-order-id {
  font-weight: 700;
  color: var(--tb-green, #4a7c29);
}
.tb-order-product {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tb-order-product-img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: #f8f8f8;
  padding: 4px;
}
.tb-order-product-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tb-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  background: #eee;
  color: #666;
}
.tb-status-pending { background: #fff3e0; color: #ef6c00; }
.tb-status-cancelled { background: #ffebee; color: #c62828; }
.tb-status-dispatched { background: #e8f5e9; color: #2e7d32; }
.tb-status-delivered { background: #e8f5e9; color: #2e7d32; }
.tb-status-placed { background: #e3f2fd; color: #1565c0; }

/* Address Card */
.tb-address-card {
  padding: 24px;
  background: #fafafa;
  border: 1px solid #efefef;
  border-radius: 12px;
}
.tb-address-card h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}
.tb-address-card p {
  font-size: 14px;
  color: var(--tb-text-light, #666);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 991px) {
  .tb-dashboard-container {
    grid-template-columns: 1fr;
  }
  .tb-dashboard-sidebar {
    position: static;
    margin-bottom: 20px;
  }
}

/* ==========================================================
   CHECKOUT PAGE (Unified "TwoBrothers" Theme)
   ========================================================== */
.tb-checkout-wrapper {
  background: var(--tb-cream, #f4efeb);
  padding-bottom: 60px;
}

/* Step Indicator */
.tb-checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 32px 0 8px;
  max-width: 420px;
  margin: 0 auto;
}
.tb-checkout-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
}
.tb-checkout-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(50% + 20px);
  width: calc(100% - 40px);
  height: 2px;
  background: #ddd;
}
.tb-checkout-step.completed:not(:last-child)::after {
  background: var(--tb-green, #4a7c29);
}
.tb-checkout-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid #ddd;
  color: #999;
  background: #fff;
  position: relative;
  z-index: 2;
  transition: var(--tb-transition);
}
.tb-checkout-step.completed .tb-checkout-step-num {
  background: var(--tb-green, #4a7c29);
  border-color: var(--tb-green, #4a7c29);
  color: #fff;
}
.tb-checkout-step.active .tb-checkout-step-num {
  border-color: var(--tb-green, #4a7c29);
  color: var(--tb-green, #4a7c29);
  box-shadow: 0 0 0 4px rgba(74,124,41,0.12);
}
.tb-checkout-step-label {
  font-size: 12px;
  font-weight: 600;
  color: #999;
  margin-top: 6px;
}
.tb-checkout-step.active .tb-checkout-step-label,
.tb-checkout-step.completed .tb-checkout-step-label {
  color: var(--tb-green, #4a7c29);
}

/* Forms & Cards */
.tb-checkout-card {
  background: #fff;
  border-radius: var(--tb-radius, 12px);
  box-shadow: var(--tb-shadow-sm);
  padding: 28px 30px;
  margin-bottom: 20px;
  border: 1px solid #efefef;
}
.tb-checkout-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}
.tb-checkout-card-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tb-green, #4a7c29);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.tb-checkout-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--tb-text, #2c2c2c);
  margin: 0;
  flex: 1;
}

/* Radio Cards (Address/Payment Type) */
.tb-checkout-radio-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.tb-checkout-radio-card {
  flex: 1;
  min-width: 140px;
  position: relative;
}
.tb-checkout-radio-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tb-checkout-radio-card label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  cursor: pointer;
  transition: var(--tb-transition);
  font-size: 14px;
  font-weight: 600;
  color: var(--tb-text, #2c2c2c);
  background: #fdfdfd;
  margin: 0;
}
.tb-checkout-radio-card label i {
  font-size: 20px;
  color: var(--tb-text-light, #666);
}
.tb-checkout-radio-card input[type="radio"]:checked + label {
  border-color: var(--tb-green, #4a7c29);
  background: rgba(74,124,41,0.04);
}
.tb-checkout-radio-card input[type="radio"]:checked + label i {
  color: var(--tb-green, #4a7c29);
}
.tb-checkout-radio-desc {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--tb-text-light, #666);
  margin-top: 2px;
}

/* Order Summary */
.tb-checkout-summary {
  position: sticky;
  top: 120px;
}
.tb-checkout-product-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}
.tb-checkout-product-img {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  object-fit: contain;
  background: #f8f8f8;
  padding: 4px;
  flex-shrink: 0;
}
.tb-checkout-product-info {
  flex: 1;
  min-width: 0;
}
.tb-checkout-product-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--tb-text, #2c2c2c);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb-checkout-product-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--tb-text, #2c2c2c);
}

/* Totals */
.tb-checkout-totals {
  padding-top: 10px;
}
.tb-checkout-total-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
  color: var(--tb-text-light, #666);
}
.tb-checkout-total-divider {
  border-top: 1px solid #eee;
  margin: 10px 0;
  padding-top: 10px;
}
.tb-checkout-final-total {
  font-size: 18px;
  font-weight: 700;
  color: var(--tb-text, #2c2c2c);
}

@media (max-width: 991px) {
  .tb-checkout-summary {
    position: static;
    margin-top: 20px;
  }
}

/* ==========================================================
   CONTACT PAGE (Unified "TwoBrothers" Theme)
   ========================================================== */
.tb-contact-wrapper {
  padding: 40px 0 80px;
  background: var(--tb-white, #fff);
}

.tb-contact-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 40px;
  align-items: start;
}

/* Info Cards */
.tb-contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tb-contact-info-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--tb-cream, #f4efeb);
  padding: 24px;
  border-radius: var(--tb-radius, 12px);
  transition: var(--tb-transition);
}
.tb-contact-info-card:hover {
  transform: translateX(5px);
  background: #ede6df;
}
.tb-contact-info-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--tb-green, #4a7c29);
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.tb-contact-info-content h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--tb-text, #2c2c2c);
}
.tb-contact-info-content p,
.tb-contact-info-content span {
  font-size: 14px;
  color: var(--tb-text-light, #666);
  line-height: 1.5;
  margin: 0;
}
.tb-contact-info-content a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}
.tb-contact-info-content a:hover {
  color: var(--tb-green, #4a7c29);
}

/* Map Secion */
.tb-contact-map-card {
  margin-top: 30px;
  border-radius: var(--tb-radius-lg, 24px);
  overflow: hidden;
  border: 4px solid var(--tb-cream, #f4efeb);
}
.tb-contact-map-card iframe {
  display: block;
}

/* WhatsApp Expert Link (Refined) */
.tb-expert-link-refined {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 15px;
  background: var(--tb-white);
  padding: 20px;
  border-radius: var(--tb-radius);
  box-shadow: var(--tb-shadow);
  text-decoration: none !important;
  transition: var(--tb-transition);
  border: 1px solid rgba(0,0,0,0.03);
  margin-bottom: 20px;
}

.tb-expert-link-refined:hover {
  transform: translateY(-5px);
  box-shadow: var(--tb-shadow-hover);
  border-color: var(--tb-green);
}

.tb-expert-link-icon {
  width: 48px;
  height: 48px;
  background: #e8f5d4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tb-expert-link-icon i {
  font-size: 24px;
  color: var(--tb-green);
}

.tb-expert-link-refined span {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--tb-green-dark);
}

.tb-expert-link-refined:hover span {
  color: var(--tb-green);
}

@media (max-width: 991px) {
  .tb-contact-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (max-width: 767px) {
  .tb-contact-info-card {
    padding: 20px;
    gap: 15px;
  }
  .tb-contact-info-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
}