/**
 * Dog It Up — single brand theme layer.
 * Loaded AFTER /assets/css/style.css so these tokens win over Babet orange/yellow.
 * Do not duplicate this :root block in globals.css.
 */
:root {
  --theme-color: #0F63A9;   /* primary blue */
  --theme-color2: #DE4560;  /* accent pink/red (logo "it") */
  --theme-color-dark: #0B4F88; /* slightly darker blue for CTA / toggle hover */
  --smoke-color2: #F0F4F8;  /* cool smoke (was warm peach) */
  --smoke-color3: #E8F3FA;  /* light blue wash (was #FFF3E0) */
  --gray-color2: #EEF2F6;   /* cool tint (was warm cream) */
  --gray-color5: #F5F9FC;   /* soft blue surface (was #FFF5F1) */
  --yellow-color: #DE4560;  /* accent stand-in; use sparingly */
}

/* ------------------------------------------------------------------
   Header Book Now → solid brand blue pill; darker blue hover
   (layout2 previously forced yellow theme-color2 fill)
   ------------------------------------------------------------------ */
.header-button .th-btn,
.header-layout1 .header-button .th-btn,
.header-layout2 .header-button .th-btn,
.header-default .header-button .th-btn {
  background-color: var(--theme-color);
  background: var(--theme-color);
  color: var(--white-color);
  border-color: var(--theme-color);
  border-radius: 50px;
}
.header-button .th-btn:before,
.header-button .th-btn:after,
.header-layout1 .header-button .th-btn:before,
.header-layout1 .header-button .th-btn:after,
.header-layout2 .header-button .th-btn:before,
.header-layout2 .header-button .th-btn:after,
.header-default .header-button .th-btn:before,
.header-default .header-button .th-btn:after {
  background-color: var(--theme-color-dark);
}
.header-button .th-btn:hover,
.header-button .th-btn:focus,
.header-button .th-btn:active,
.header-layout1 .header-button .th-btn:hover,
.header-layout1 .header-button .th-btn:focus,
.header-layout1 .header-button .th-btn:active,
.header-layout2 .header-button .th-btn:hover,
.header-layout2 .header-button .th-btn:focus,
.header-layout2 .header-button .th-btn:active,
.header-default .header-button .th-btn:hover,
.header-default .header-button .th-btn:focus,
.header-default .header-button .th-btn:active {
  background-color: var(--theme-color-dark);
  background: var(--theme-color-dark);
  color: var(--white-color);
  border-color: var(--theme-color-dark);
}

.header-layout2 .header-button .th-btn {
  border: 2px solid var(--theme-color);
  font-weight: 500;
}

/* Call us — brand red sparingly on the phone link only */
.th-header .info-card .box-title {
  color: var(--title-color);
}
.th-header .info-card .box-title a {
  color: var(--theme-color2);
  transition: color 0.25s ease;
}
.th-header .info-card .box-title a:hover {
  color: var(--theme-color);
}

/* Sticky header: white/smoke glass — not charcoal title-color */
.sticky-wrapper.sticky,
.header-layout1 .sticky-wrapper.sticky,
.header-default .sticky-wrapper.sticky,
.header-layout2 .sticky-wrapper.sticky,
.header-layout3 .sticky-wrapper.sticky {
  background-color: rgba(255, 255, 255, 0.86) !important;
  background-image: none !important;
  -webkit-backdrop-filter: saturate(1.1) blur(12px);
  backdrop-filter: saturate(1.1) blur(12px);
  -webkit-filter: none;
  filter: none;
  box-shadow: 0 1px 0 rgba(15, 99, 169, 0.06), 0 8px 24px rgba(15, 40, 70, 0.06);
}

/*
 * header-default nav is white for dark breadcrumb overlay; on white sticky glass
 * force dark title color so Home/About/… stay visible (was invisible white-on-white).
 */
.header-default .sticky-wrapper.sticky .main-menu > ul > li > a,
.header-default .sticky-wrapper.sticky .main-menu > ul > li > a:after {
  color: var(--title-color) !important;
}
.header-default .sticky-wrapper.sticky .main-menu > ul > li > a:hover,
.header-default .sticky-wrapper.sticky .main-menu > ul > li > a:hover:after {
  color: var(--theme-color) !important;
}
.header-default .sticky-wrapper.sticky .header-button .info-card .box-title,
.header-default .sticky-wrapper.sticky .header-button .info-card .box-title.text-white,
.header-default .sticky-wrapper.sticky .header-button .info-card .box-text,
.header-default .sticky-wrapper.sticky .header-button .info-card a.text-white {
  color: var(--title-color) !important;
}
.header-default .sticky-wrapper.sticky .header-button .info-card a {
  color: var(--theme-color2) !important;
}

/* Hamburger circular toggle uses --theme-color (blue); keep pill-circle */
.th-header .th-menu-toggle,
.th-header .th-menu-toggle.icon-btn,
.th-menu-wrapper .th-menu-toggle {
  background-color: var(--theme-color);
  color: var(--white-color);
  border-radius: 50%;
}
.th-header .th-menu-toggle:hover,
.th-menu-wrapper .th-menu-toggle:hover {
  background-color: var(--theme-color-dark);
  color: var(--white-color);
}

/* Sticky state icon-btns: cool smoke, not peach */
.header-layout1 .sticky-wrapper.sticky .header-button .icon-btn {
  background: var(--smoke-color3);
  color: var(--theme-color);
}
.header-layout1 .sticky-wrapper.sticky .header-button .icon-btn:hover {
  background-color: var(--theme-color);
  color: var(--white-color);
}

/* Logo hover: blue, not yellow theme-color2 leftover */
.header-logo a:hover {
  color: var(--theme-color);
}

/* Dual logo: sticky is white glass — never show white+red wordmark */
.logo-on-bg {
  display: none !important;
}
.logo-sky {
  display: block !important;
}

/* Call-us phone pill stays brand blue; icon stays crisp */
.th-header .info-card .box-icon {
  background: var(--theme-color);
}
.th-header .info-card .box-icon img {
  filter: none;
}

/* Keep logo / menu / CTAs on one baseline (Account made actions too wide) */
.th-header .menu-area .row {
  flex-wrap: nowrap;
  align-items: center;
}
.th-header .header-button {
  gap: 8px;
}
.th-header .header-button .th-btn {
  padding: 12px 18px;
}
.th-header .header-button .icon-btn {
  width: 42px;
  height: 42px;
  font-size: 16px;
}

/* Mobile drawer strip stays cool smoke; logo itself stays transparent */
.th-menu-wrapper .mobile-logo {
  background-color: var(--smoke-color2);
}
.th-menu-wrapper .mobile-logo a,
.th-menu-wrapper .mobile-logo img,
.sidemenu-wrapper .about-logo,
.sidemenu-wrapper .about-logo a,
.sidemenu-wrapper .about-logo img {
  background: transparent !important;
  background-color: transparent !important;
}

/* Preloader wordmark — no white plate behind transparent PNG */
.preloader-inner .bounce,
.preloader-inner .bounce img {
  background: transparent !important;
  background-color: transparent !important;
}

/* style3 was dark-on-yellow; pink/red fill needs white label for contrast */
.th-btn.style3 {
  color: var(--white-color);
  border-color: var(--theme-color2);
}
.th-btn.style3:focus,
.th-btn.style3:hover,
.th-btn.style3:active {
  border-color: var(--title-color);
}

/* Kill leftover peach hardcodes that ignore CSS variables */
.header-layout2 .header-button .icon-btn {
  background: var(--smoke-color3);
}
.header-layout2 .header-button .icon-btn:hover .badge {
  background: var(--smoke-color3);
}
.footer-wrapper.footer-layout2 {
  background: var(--smoke-color3);
}

/* Keep the mobile utility row usable instead of squeezing five actions offscreen. */
@media (max-width: 767px) {
  .th-header .menu-area .row {
    gap: 8px;
  }
  .th-header .menu-area .row > [class*="col-"]:last-child {
    flex: 1 1 auto;
    min-width: 0;
  }
  .th-header .header-logo img {
    max-width: 128px !important;
  }
  .th-header .header-button.d-lg-none {
    display: flex !important;
    justify-content: flex-end;
    gap: 8px !important;
  }
  .th-header .header-button.d-lg-none > a[href="/shop"],
  .th-header .header-button.d-lg-none > a[href^="/login"],
  .th-header .header-button.d-lg-none > a[href="/book"] {
    display: none !important;
  }
  .th-header .header-button.d-lg-none > a[href="/cart"],
  .th-header .header-button.d-lg-none > .th-menu-toggle {
    flex: 0 0 44px;
  }
  .hero-2 .th-hero-bg {
    background-position: 53% center !important;
  }
  .hero-2 .th-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(255, 246, 240, 0.97) 0%,
      rgba(255, 246, 240, 0.88) 62%,
      rgba(255, 246, 240, 0.24) 100%
    );
    pointer-events: none;
  }
  .hero-2 .hero-style2 {
    padding: 130px 0 135px !important;
    text-align: left;
    max-width: 330px;
  }
  .hero-2 .hero-title {
    font-size: clamp(36px, 9vw, 48px);
    line-height: 1.08;
    max-width: 12ch;
  }
  .hero-2 .checklist li {
    color: #161823;
  }
  .hero-2 .btn-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
  }
}

.footer-layout1 .widget-contact-wrap .info-box:nth-child(n + 2) {
  display: none;
}

@media (min-width: 768px) and (max-width: 991px) {
  .hero-2 .th-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 246, 240, 0.94), rgba(255, 246, 240, 0.7) 58%, transparent);
    pointer-events: none;
  }
  .hero-2 .hero-style2 {
    max-width: 520px;
    text-align: left;
  }
}
.testi-area-3 {
  background-color: var(--smoke-color3);
}