/*
 * Kuvr Help Scout Docs - FINAL VERSION
 * CSS-drawn magnifying glass icon
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap');

* {
  font-family: 'Inter', -apple-system, sans-serif !important;
}

body {
  background: white !important;
  position: relative !important;
}

/* Content area needs transparent background on category/article pages so hero shows through */
#contentArea {
  background: transparent !important;
}

/* Content wrapper styling - desktop and mobile */
.contentWrapper {
  background: #fff !important;
  border: 1px solid #e9e5e5 !important;
  color: #222 !important;
  min-height: 460px !important;
  padding: 20px !important;
  position: relative !important;
  border-radius: 10px !important;
}

/* Article and category page headings - Playfair Display font */
.contentWrapper h1 {
  font-family: 'Playfair Display', serif !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  color: #000 !important;
  margin-top: 20px !important;
}

.contentWrapper h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: #000 !important;
}

.contentWrapper h3 {
  font-family: 'Playfair Display', serif !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  color: #000 !important;
}

.contentWrapper h4 {
  font-family: 'Playfair Display', serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  color: #000 !important;
}

.contentWrapper h5,
.contentWrapper h6 {
  font-family: 'Playfair Display', serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #000 !important;
}

/* ===========================================
   BREADCRUMB NAVIGATION
   Appears above h1 on collection, category, and article pages
   =========================================== */
.kuvr-breadcrumb {
  font-family: 'Playfair Display', serif !important;
  font-size: 13px !important;
  color: #666 !important;
  margin-bottom: 20px !important;
  line-height: 1.4 !important;
}

.kuvr-breadcrumb a {
  color: #666 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.kuvr-breadcrumb a:hover {
  color: #006f6c !important;
  text-decoration: underline !important;
}

.kuvr-breadcrumb .separator {
  color: #999 !important;
  margin: 0 6px !important;
}

.kuvr-breadcrumb .current {
  color: #999 !important;
}

/* Article title spacing */
#fullArticle .title {
  margin: 20px 30px .5em 0 !important;
}

/* ===========================================
   PRINT ICON - Inline at end of title
   =========================================== */

/* Hide the "View in Help Scout" link */
#fullArticle a[href*="secure.helpscout.net"],
article a[href*="secure.helpscout.net"] {
  display: none !important;
}

/* Keep title as inline element */
#fullArticle h1.title,
article h1.title {
  display: inline !important;
  margin-right: 0 !important;
}

/* Article container - relative positioning for print icon */
#fullArticle,
article {
  position: relative !important;
}

/* Article content elements - consistent top margin */
#fullArticle blockquote,
#fullArticle dd,
#fullArticle div,
#fullArticle li,
#fullArticle ol,
#fullArticle p,
#fullArticle table,
#fullArticle ul {
  margin-top: 0.75em !important;
}

/* Print icon styling - positioned top-right, aligned with breadcrumb */
#fullArticle .printArticle,
article .printArticle,
a.printArticle {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  float: none !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #006f6c !important;
  line-height: 1.5 !important;
}

/* The icon inside the print link */
.printArticle i.icon-print {
  vertical-align: middle !important;
  position: relative !important;
  top: 0 !important;
  font-size: 18px !important;
}

/* Hide any "Print" text label */
#fullArticle .printArticle::after,
.printArticle::after,
a.printArticle::after {
  content: none !important;
  display: none !important;
}

/* Proper spacing for paragraph after title/print icon */
#fullArticle h1.title + .printArticle + p,
article h1.title + .printArticle + p,
#fullArticle h1.title + a + p,
article h1.title + a + p {
  display: block !important;
  margin-top: 20px !important;
}

/* Fallback: ensure paragraphs after the title area have proper spacing */
article > p:first-of-type {
  margin-top: 20px !important;
}

/* ===========================================
   RELATED ARTICLES SECTION
   =========================================== */
section.related,
.relatedArticles {
  border: 1px solid #e9e5e5 !important;
  border-radius: 10px !important;
  margin-top: 30px !important;
  padding: 20px !important;
  background: #fff !important;
}

/* Article footer - last updated timestamp */
.articleFoot p.lu,
.articleFoot time.lu {
  float: right !important;
  margin-top: 2px !important;
}

/* Clock icon before last updated text */
.articleFoot time.lu::before {
  content: '' !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  margin-right: 12px !important;
  vertical-align: middle !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23858585'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z' /%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Sidebar heading spacing */
#sidebar h3 {
  margin-bottom: 10px !important;
}

/* ===========================================
   HEROICON SVG ICONS
   Icons for article links, category links, contact, and print
   =========================================== */

/* Article document icon - document outline */
.icon-article-doc:before {
  content: '' !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23006f6c'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z' /%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Arrow/chevron icon for category links in sidebar */
.icon-arrow:before {
  content: '' !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23006f6c'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m8.25 4.5 7.5 7.5-7.5 7.5' /%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Contact icon - chat bubble */
.icon-contact:before {
  content: '' !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23006f6c'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z' /%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Print icon */
.icon-print:before {
  content: '' !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  vertical-align: middle !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23006f6c'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0 1 10.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0 .229 2.523a1.125 1.125 0 0 1-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0 0 21 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 0 0-1.913-.247M6.34 18H5.25A2.25 2.25 0 0 1 3 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 0 1 1.913-.247m10.5 0a48.536 48.536 0 0 0-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5Zm-3 0h.008v.008H15V10.5Z' /%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* CATEGORY AND ARTICLE PAGES - Create hero header section */
body:not(.home) {
  padding-top: 0 !important;
}

body:not(.home)::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 900px !important;
  background-image: url('https://cdn.shopify.com/s/files/1/0380/4171/4827/files/search-background.png?v=1767363503') !important;
  background-position: 50% 50% !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
  background-color: #4db8b4 !important;
  z-index: 0 !important;
}

/* FIX: Home page has no body class, so body:not(.home) incorrectly matches it.
   Use :has(#docsSearch) to identify home page and override the above rules. */
body:has(#docsSearch) {
  padding-top: 0 !important;
}

body:has(#docsSearch)::before {
  display: none !important;
  content: none !important;
}

/* Sidebar search section on category/article pages */
body:not(.home) aside .search-wrapper,
body:not(.home) complementary > div:first-child {
  position: absolute !important;
  top: 120px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 600px !important;
  max-width: calc(100% - 80px) !important;
  text-align: center !important;
  z-index: 10 !important;
}

/* Style the "How can we help?" text on category/article pages */
body:not(.home) aside .search-wrapper::before,
body:not(.home) complementary > div:first-child::before {
  content: 'How can we help?' !important;
  display: block !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 70px !important;
  font-weight: 400 !important;
  color: white !important;
  text-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
  margin-bottom: 32px !important;
  line-height: 1.2 !important;
  background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-1&color=006d6acc) !important;
  margin: -2px -6px 32px -6px !important;
  padding: 2px 6px !important;
}

/* Hide the original "How can we help?" text */
body:not(.home) aside .search-wrapper > *:first-child:not(input):not(button),
body:not(.home) complementary > div:first-child > *:first-child:not(input):not(button) {
  display: none !important;
}

/* Style search input on category/article pages */
body:not(.home) aside input[type="text"],
body:not(.home) complementary input[type="text"] {
  width: 100% !important;
  padding: 18px 28px !important;
  font-size: 16px !important;
  border: none !important;
  border-radius: 100px !important;
  background: white !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
  color: #1e293b !important;
  height: 60px !important;
}

/* Style search button on category/article pages */
body:not(.home) aside button,
body:not(.home) complementary button {
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  width: 24px !important;
  height: 24px !important;
}

/* Header - absolute positioning to overlay */
header,
header.navbar,
#header,
.header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: none !important;
}

/* Parent section with background image */
section#docsSearch,
#docsSearch {
  background-image: url('https://cdn.shopify.com/s/files/1/0380/4171/4827/files/search-background.png?v=1767363503') !important;
  background-position: center center !important;
  background-size: auto !important;
  background-repeat: no-repeat !important;
  background-color: #4db8b4 !important;
  padding-top: 100px !important;
  padding-bottom: 100px !important;
  margin: 0 !important;
  min-height: 700px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  position: relative !important;
}

/* Gradient overlay at bottom of hero section */
section#docsSearch::after,
#docsSearch::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 40px !important;
  background: linear-gradient(to bottom, transparent, white) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Hero section - searchBar IS the form */
#searchBar {
  background: transparent !important;
  padding: 0 40px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 32px !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Heading above search input */
#searchBar::before {
  content: 'How can we help?' !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 70px !important;
  font-weight: 400 !important;
  color: white !important;
  text-align: center !important;
  display: inline-block !important;
  order: -1 !important;
  text-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
  margin-bottom: 25px !important;
  line-height: 1.2 !important;
  background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-1&color=006d6acc) !important;
  margin: -2px -6px !important;
  padding: 2px 6px !important;
}

header.navbar .navbar-inner,
.navbar-inner {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: none !important;
}

/* Menu navigation styling */
header .nav li a,
header nav li a,
.navbar .nav li a {
  font-size: 14px !important;
  color: white !important;
}

/* Menu positioning - desktop only (prevents mobile/tablet menu from breaking) */
@media (min-width: 980px) {
  header .nav ul,
  header nav ul,
  .navbar .nav ul {
    position: absolute !important;
    top: 73.27px !important;
  }
}

header.navbar .container,
header.navbar .container-fluid,
header .container,
header .container-fluid,
.header .container,
.header .container-fluid {
  background: transparent !important;
}

/* Target any parent wrapper that might have white background */
#docsSearch,
.docs-search-wrapper,
.search-wrapper {
  background: transparent !important;
}

/* Input - centered */
/* Note: Shadow is now applied by JS shine effect wrapper on homepage */
#searchBar input[type="text"],
#searchBar .search-query {
  display: inline-block !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 !important;
  padding: 18px 50px 18px 28px !important;
  font-size: 16px !important;
  border: none !important;
  border-radius: 100px !important;
  background: white !important;
  box-shadow: none !important;
  color: #1e293b !important;
  height: 60px !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Button - CSS magnifying glass icon */
#searchBar button[type="submit"] {
  position: absolute !important;
  right: calc(50% - 300px + 20px) !important;
  top: 83% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  color: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
  z-index: 10 !important;
}

#searchBar button[type="submit"] * {
  display: none !important;
}

#searchBar button[type="submit"]::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  width: 16px !important;
  height: 16px !important;
  border: 2.5px solid #006f6c !important;
  border-radius: 50% !important;
  top: 0 !important;
  left: 0 !important;
}

#searchBar button[type="submit"]::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  width: 2.5px !important;
  height: 8px !important;
  background: #006f6c !important;
  bottom: 2px !important;
  right: 2px !important;
  transform: rotate(-45deg) !important;
  transform-origin: bottom right !important;
}

#searchBar button[type="submit"]:hover::before {
  border-color: #157a5e !important;
}

#searchBar button[type="submit"]:hover::after {
  background: #157a5e !important;
}

/* Position suggestions dropdown below the search input */
#serp-dd {
  position: absolute !important;
  top: 103% !important;
  left: 50% !important;
  margin-left: -300px !important;
  z-index: 100 !important;
  background: white !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  max-width: 600px !important;
  width: 600px !important;
  overflow: hidden !important;
  /* Animation - fade in and slide down */
  animation: searchDropdownFadeIn 0.2s ease forwards !important;
}

/* Search suggestions dropdown animation keyframes */
@keyframes searchDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Category cards */
.category-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
  margin: 40px 0 !important;
  padding: 0 !important;
}

a.category {
  background: white !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 48px 32px !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  min-height: 280px !important;
  position: relative !important;
}

a.category:hover {
  border-color: #006f6c !important;
  box-shadow: 0 20px 60px rgba(0, 111, 108, 0.2) !important;
  transform: translateY(-8px) !important;
}

a.category h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 20px 0 12px 0 !important;
  order: 2 !important;
}

a.category .article-count {
  color: #006f6c !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  order: 3 !important;
}

a.category[href*="/category/127-"]::before,
a.category[href*="free-design"]::before {
  content: '' !important;
  width: 80px !important;
  height: 80px !important;
  background: url('https://cdn.shopify.com/s/files/1/0380/4171/4827/files/pencil-icon.svg?v=1767194288') center / contain no-repeat !important;
  display: block !important;
  order: 1 !important;
  margin-bottom: 0 !important;
}

a.category[href*="/category/61-"]::before,
a.category[href*="customisation"]::before {
  content: '' !important;
  width: 80px !important;
  height: 80px !important;
  background: url('https://cdn.shopify.com/s/files/1/0380/4171/4827/files/sliders-icon.svg?v=1767194288') center / contain no-repeat !important;
  display: block !important;
  order: 1 !important;
  margin-bottom: 0 !important;
}

a.category[href*="/category/60-"]::before,
a.category[href*="product-information"]::before {
  content: '' !important;
  width: 80px !important;
  height: 80px !important;
  background: url('https://cdn.shopify.com/s/files/1/0380/4171/4827/files/box-icon.svg?v=1767194288') center / contain no-repeat !important;
  display: block !important;
  order: 1 !important;
  margin-bottom: 0 !important;
}

section h2 {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 20px 0 13px 0 !important;
}

section#collection-36 h2::before {
  content: '' !important;
  width: 40px !important;
  height: 40px !important;
  background: url('https://cdn.shopify.com/s/files/1/0380/4171/4827/files/cube-icon.svg?v=1767194288') center / contain no-repeat !important;
  display: inline-block !important;
}

section#collection-45 h2::before {
  content: '' !important;
  width: 40px !important;
  height: 40px !important;
  background: url('https://cdn.shopify.com/s/files/1/0380/4171/4827/files/truck-icon.svg?v=1767194288') center / contain no-repeat !important;
  display: inline-block !important;
}

section#collection-51 h2::before {
  content: '' !important;
  width: 40px !important;
  height: 40px !important;
  background: url('https://cdn.shopify.com/s/files/1/0380/4171/4827/files/info-icon.svg?v=1767194288') center / contain no-repeat !important;
  display: inline-block !important;
}

section#collection-67 h2::before {
  content: '' !important;
  width: 40px !important;
  height: 40px !important;
  background: url('https://cdn.shopify.com/s/files/1/0380/4171/4827/files/ruler-icon.svg?v=1767194289') center / contain no-repeat !important;
  display: inline-block !important;
}

/* All pages content area base styles */
#contentArea {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 120px 40px !important;
}

/* Home page content area - override to use less top padding since hero section handles spacing */
body:has(#docsSearch) #contentArea {
  padding: 5px 40px !important;
}

/* ===========================================
   FOOTER STYLES
   =========================================== */

/* Footer container - base: stays within content area at wide viewports */
/* 20px padding-right aligns copyright with grid's internal card edge on homepage */
footer {
  width: auto !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

/* Wide desktop (>= 1120px) article/category pages: align footer with contentWrapper border */
/* The contentWrapper has 20px padding, so footer needs 0 to align with outer border edge */
@media (min-width: 1120px) {
  #contentArea:has(.contentWrapper) > footer {
    padding-right: 0 !important;
  }
}

/* Footer paragraph styling */
footer p {
  font-size: 0.9em !important;
  color: #9b9b9b !important;
  text-align: right !important;
  margin-bottom: 3em !important;
  margin-top: 2em !important;
  padding-right: 0 !important;
}

/* Narrow viewports (below content max-width): extend footer to viewport with 20px padding */
/* Changed from 1119px to 1079px to prevent overflow when viewport is wider than contentArea's 1080px max-width */
@media (max-width: 1079px) {
  footer {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
}

/* Hide "Powered by Help Scout" text */
footer p span,
footer p a[href*="helpscout"] {
  display: none !important;
}

/* Hide original company link and replace footer text */
footer p a[href*="kuvr.co"] {
  font-size: 0 !important;
  color: transparent !important;
}

footer p a[href*="kuvr.co"]::after {
  content: 'Kuvr.co Custom Covers' !important;
  font-size: 10.8px !important;
  color: #9b9b9b !important;
  text-decoration: none !important;
}

/* ===========================================
   HOMEPAGE COLLECTION CARDS
   Styled grid of top-level collection cards with icons
   =========================================== */

/* Collection grid container - 3 columns on desktop */
.kuvr-collection-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 20px !important;
}

/* Individual collection card */
.kuvr-collection-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  background: white !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  padding: 32px 24px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.kuvr-collection-card:hover {
  border: 1px solid rgba(0, 111, 108, 0.3) !important;
  box-shadow: 0 8px 24px rgba(0, 111, 108, 0.12) !important;
  transform: translateY(-4px) !important;
}

/* Collection icon container */
.kuvr-collection-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: left !important;
  width: 64px !important;
  height: 64px !important;
  margin-bottom: 16px !important;
}

.kuvr-collection-icon svg {
  width: 40px !important;
  height: 40px !important;
  stroke: #006f6c !important;
  color: #006f6c !important;
}

/* Collection title */
.kuvr-collection-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: #222 !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.3 !important;
}

/* Collection article count */
.kuvr-collection-count {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #006f6c !important;
  margin: 0 !important;
}

/* Measuring guides card - custom background */
.kuvr-collection-card[href*="/collection/67-measuring"] {
  background-color: #d6ede8 !important;
  background-image: url('https://cdn.shopify.com/s/files/1/0380/4171/4827/files/measuring.png?v=1767471229') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Product information card - custom background */
.kuvr-collection-card[href*="/collection/36-product-information"] {
  background-color: #d6ede8 !important;
  background-image: url('https://cdn.shopify.com/s/files/1/0380/4171/4827/files/information.png?v=1767472502') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Ordering & Production card - custom background */
.kuvr-collection-card[href*="/collection/135-ordering-production"] {
  background-color: #d6ede8 !important;
  background-image: url('https://cdn.shopify.com/s/files/1/0380/4171/4827/files/production.png?v=1767474887') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Shipping, returns & warranty claims card - custom background */
.kuvr-collection-card[href*="/collection/45-returns-warranty"] {
  background-color: #d6ede8 !important;
  background-image: url('https://cdn.shopify.com/s/files/1/0380/4171/4827/files/warranty.png?v=1767477027') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Delivery & Tracking card - custom background */
.kuvr-collection-card[href*="/collection/138-delivery-tracking"] {
  background-color: #d6ede8 !important;
  background-image: url('https://cdn.shopify.com/s/files/1/0380/4171/4827/files/delivery_d840dcb0-6397-4183-9578-122dd1bed1f0.png?v=1767477170') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* About us card - custom background */
.kuvr-collection-card[href*="/collection/51-about-us"] {
  background-color: #d6ede8 !important;
  background-image: url('https://cdn.shopify.com/s/files/1/0380/4171/4827/files/about.png?v=1767477693') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Tablet: 2 columns */
@media (max-width: 979px) {
  .kuvr-collection-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    padding: 0 !important;
  }
}

/* Mobile: 1 column */
@media (max-width: 640px) {
  .kuvr-collection-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .kuvr-collection-card {
    padding: 24px 20px !important;
  }

  .kuvr-collection-icon {
    width: 56px !important;
    height: 56px !important;
  }

  .kuvr-collection-icon svg {
    width: 40px !important;
    height: 40px !important;
  }

  .kuvr-collection-title {
    font-size: 18px !important;
  }

  /* Article footer - remove float on mobile so timestamp stacks */
  .articleFoot p.lu,
  .articleFoot time.lu {
    float: none !important;
  }

  /* Related articles - remove left padding on mobile */
  section.related,
  .relatedArticles {
    padding: 20px 20px 20px 0px !important;
  }
}

/* Desktop alignment fix - Match content area width to header (1080px centered) */
/* Only applies on desktop (980px+), tablet uses full width */
@media (min-width: 980px) {
  #contentArea {
    max-width: 1080px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body:has(#docsSearch) #contentArea {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* No extra padding on row-fluid when viewport is wide - container is already centered */
  #contentArea .row-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Category/article pages - sidebar searchBar container */
  aside #searchBar,
  aside form#searchBar {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 15px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Category/article pages - sidebar search input - minimal underline style */
  aside #searchBar input[type="text"],
  aside #searchBar .search-query {
    display: inline-block !important;
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 !important;
    padding: 18px 0 !important;
    font-size: 16px !important;
    border: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #1e293b !important;
    height: 40px !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  /* Reduce font size and left-align "How can we help?" on category/article pages */
  aside #searchBar::before,
  aside form#searchBar::before {
    font-size: 25px !important;
    text-align: left !important;
    display: block !important;
  }

  /* Sidebar search button - position and reduce size by 25% */
  aside #searchBar button[type="submit"] {
    position: absolute !important;
    right: 0 !important;
    top: 78% !important;
    transform: translateY(-50%) scale(0.75) !important;
    width: 24px !important;
    height: 24px !important;
  }

  /* Sidebar search suggestions dropdown - match sidebar width exactly */
  aside #serp-dd,
  aside .search-suggestions,
  aside #searchBar #serp-dd {
    position: absolute !important;
    left: -20px !important;
    width: calc(100% + 40px) !important;
    max-width: calc(100% + 40px) !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  /* Sidebar categories box - white background with rounded corners */
  aside,
  aside.span3 {
    background: white !important;
    border-radius: 10px !important;
    padding: 20px !important;
  }

  /* Change "How can we help?" text color and remove SVG background */
  aside #searchBar::before,
  aside form#searchBar::before {
    color: #006f6c !important;
    background: none !important;
    background-image: none !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
  }

  /* Categories heading - Playfair Display, not all caps, 18px */
  aside h3 {
    font-family: 'Playfair Display', serif !important;
    text-transform: none !important;
    padding-top: 10px !important;
    margin-top: 10px !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: normal !important;
  }
}

/* Desktop narrow viewport - add padding when content area touches screen edges */
/* This kicks in when viewport is less than 1080px + 40px (20px padding each side) */
@media (min-width: 980px) and (max-width: 1119px) {
  #contentArea .row-fluid {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ===========================================
   DESKTOP MENU DROPDOWN
   Consolidates all nav items into single "Menu" hover dropdown
   Only shows on desktop (980px+), tablet uses hamburger menu
   =========================================== */
@media (min-width: 980px) {
  /* Hide original nav items except the menu trigger */
  .navbar .nav > li:not(.menu-trigger) {
    display: none !important;
  }

  /* Show the menu trigger */
  .navbar .nav > li.menu-trigger {
    display: block !important;
    position: relative !important;
  }

  /* Menu trigger button styling */
  .menu-trigger > a {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: white !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: background-color 0.2s ease !important;
    text-decoration: none !important;
  }

  .menu-trigger > a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }

  /* Chevron icon styling */
  .menu-trigger .menu-chevron {
    width: 12px !important;
    height: 12px !important;
    transition: transform 0.2s ease !important;
  }

  .menu-trigger:hover .menu-chevron {
    transform: rotate(180deg) !important;
  }

  /* Dropdown container */
  .menu-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 300px !important;
    max-width: calc(100vw - 40px) !important;
    background: white !important;
    border-radius: 12px !important;
    box-shadow:
      rgba(49, 67, 81, 0.02) 0px 1px 1px 0px,
      rgba(49, 67, 81, 0.04) 0px 2px 2px 0.5px,
      rgba(49, 67, 81, 0.06) 0px 4px 4px 1px,
      rgba(49, 67, 81, 0.08) 0px 8px 8px 1.5px,
      rgba(49, 67, 81, 0.1) 0px 16px 16px 2px,
      rgba(49, 67, 81, 0.12) 0px 32px 32px 2.5px !important;
    padding: 8px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
    z-index: 1000 !important;
    margin-right: 0 !important;
  }

  /* Show dropdown on hover */
  .menu-trigger:hover .menu-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  /* Dropdown menu item links */
  .menu-dropdown a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    color: #1e293b !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: background-color 0.15s ease !important;
    text-decoration: none !important;
  }

  .menu-dropdown a:hover {
    background: #f1f5f9 !important;
  }

  /* Icon container in dropdown */
  .menu-dropdown .menu-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .menu-dropdown .menu-icon svg {
    width: 20px !important;
    height: 20px !important;
    color: #006f6c !important;
    stroke: #006f6c !important;
  }

  /* Text label in dropdown */
  .menu-dropdown .menu-text {
    flex: 1 !important;
    color: #1e293b !important;
  }
}

@media (max-width: 1024px) {
  .category-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}

@media (max-width: 768px) {
  #main-content {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 20px -20px 2em -20px !important;
    background: 0 0 !important;
  }
}

/* ===========================================
   TABLET VIEW FIXES (641px - 979px)
   Help Scout shows hamburger menu at 980px and below
   =========================================== */
@media (min-width: 641px) and (max-width: 979px) {
  /* Remove white bars - full width content */
  body,
  html {
    overflow-x: hidden !important;
  }

  /* Remove body padding to allow hero section full width */
  body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Force hamburger button to be visible on tablet */
  header .btn-navbar,
  .navbar .btn-navbar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 84.27px !important;
    right: 0px !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 20px 0 0 !important;
    z-index: 10000 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Hamburger icon bars - white color */
  header .btn-navbar .icon-bar,
  .navbar .btn-navbar .icon-bar {
    display: block !important;
    visibility: visible !important;
    background-color: white !important;
    width: 22px !important;
    height: 2px !important;
    border-radius: 1px !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
  }

  /* Hamburger to X animation when menu is open - Tablet */
  body:has(.nav-collapse.in) .btn-navbar .icon-bar:nth-child(2) {
    transform: rotate(45deg) translateY(6px) translateX(1px) !important;
  }

  body:has(.nav-collapse.in) .btn-navbar .icon-bar:nth-child(3) {
    opacity: 0 !important;
  }

  body:has(.nav-collapse.in) .btn-navbar .icon-bar:nth-child(4) {
    transform: rotate(-45deg) translateY(-6px) translateX(1px) !important;
  }

  /* Hide the desktop dropdown menu on tablet */
  .navbar .nav > li.menu-trigger {
    display: none !important;
  }

  /* Hide individual nav items on tablet (use hamburger instead) */
  .navbar .nav > li:not(.menu-trigger) {
    display: none !important;
  }

  header,
  header.navbar,
  #mainNav {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  header .navbar-inner {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  header .container-fluid {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Logo padding on left */
  header .navbar-brand,
  header a.navbar-brand,
  header a.brand,
  .navbar-brand,
  a.brand {
    padding-left: 20px !important;
    margin-left: 0 !important;
  }

  /* Content area - full width */
  #contentArea {
    max-width: 100vw !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Home page content area - reduced horizontal padding on tablet */
  body:has(#docsSearch) #contentArea {
    padding: 5px 20px !important;
  }

  /* Content wrapper margin on tablet */
  .contentWrapper {
    margin: 20px !important;
  }

  /* Hero section - full width */
  section#docsSearch,
  #docsSearch {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Mobile menu dropdown styles for tablet - ABSOLUTE POSITIONING */
  /* Using max-height animation approach since Bootstrap's height animation doesn't work well with absolute positioning */
  .nav-collapse,
  .nav-collapse.collapse,
  div.nav-collapse,
  div.nav-collapse.collapse {
    position: absolute !important;
    top: 116px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    overflow: hidden !important;
    background: transparent !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    margin: 0 20px !important;
    padding: 0 !important;
    /* Override Bootstrap's inline height: 0px - let max-height control the animation */
    height: auto !important;
    /* CLOSED state - max-height 0 to hide content */
    max-height: 0 !important;
    transition:
      max-height 0.35s ease,
      background 0.35s ease,
      box-shadow 0.35s ease,
      padding 0.35s ease !important;
  }

  /* OPEN state - expand to show content */
  .nav-collapse.in,
  .nav-collapse.collapse.in,
  div.nav-collapse.in,
  div.nav-collapse.collapse.in {
    max-height: 600px !important;
    background: white !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    padding: 8px !important;
  }

  /* Nav list inside collapse - must be relative with no float */
  .nav-collapse .nav {
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
  }

  /* Menu items - ALWAYS visible (same as mobile) - container clips via overflow:hidden */
  .nav-collapse .nav > li,
  .nav-collapse.collapse .nav > li,
  .nav-collapse.collapsing .nav > li,
  .nav-collapse.in .nav > li,
  div.nav-collapse .nav > li {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    float: none !important;
    opacity: 1 !important;
  }

  /* Force nav to have proper layout when visible */
  .nav-collapse.in .nav,
  .nav-collapse.collapse.in .nav {
    height: auto !important;
    float: none !important;
    overflow: visible !important;
  }

  /* Link styles for all menu states (open, collapsing, closed) */
  .nav-collapse .nav > li > a,
  .nav-collapse.collapse .nav > li > a,
  .nav-collapse.collapsing .nav > li > a,
  .nav-collapse.in .nav > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    color: #1e293b !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
  }

  .nav-collapse.in .nav > li > a:hover,
  .nav-collapse.collapse.in .nav > li > a:hover {
    background: #f1f5f9 !important;
  }

  /* Mobile menu icons - Tablet */
  .nav-collapse .nav .mobile-menu-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .nav-collapse .nav .mobile-menu-icon svg {
    width: 20px !important;
    height: 20px !important;
    color: #006f6c !important;
    stroke: #006f6c !important;
  }

  /* Ensure all tablet menu items are left-aligned, even without icons */
  .nav-collapse .nav > li > a:not(:has(.mobile-menu-icon)) {
    padding-left: 48px !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

/* ===========================================
   LARGE TABLET STYLES (768px-979px)
   Sidebar matches desktop styling (side-by-side layout)
   =========================================== */
@media (min-width: 768px) and (max-width: 979px) {
  /* Fix hamburger icon vertical position on larger tablet */
  header .btn-navbar,
  .navbar .btn-navbar {
    padding-top: 8px !important;
  }

  /* Home page hero section - taller min-height for 2-column grid layout */
  section#docsSearch,
  #docsSearch {
    min-height: 850px !important;
  }

  /* ===========================================
     LARGE TABLET SIDEBAR - Category/Article pages
     Matches desktop sidebar styling exactly
     =========================================== */

  /* Row-fluid container - use flexbox for sidebar/content layout */
  .row-fluid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0px !important;
  }

  /* Ensure right side has 20px padding */
  #contentArea .row-fluid {
    margin-right: 20px !important;
  }

  /* Sidebar container - white background with rounded corners */
  aside#sidebar,
  #sidebar.span3,
  aside.span3 {
    background: white !important;
    border-radius: 10px !important;
    padding: 20px !important;
    margin: 32px 20px 0 0 !important; /* 20px right margin creates gap between sidebar and content */
    border: none !important;
    min-height: auto !important;
    height: fit-content !important;
    display: block !important;
    float: none !important;
    width: 200px !important;
    min-width: 200px !important;
    box-sizing: border-box !important;
    order: -1 !important; /* Move sidebar visually to the left */
  }

  /* Main content area - flex grow to fill remaining space */
  #main-content,
  #main-content.span9,
  section#main-content {
    flex: 1 !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding-left: 0 !important; /* Remove left padding to prevent contentWrapper overflow */
  }

  /* Content wrapper - ensure it doesn't overflow parent */
  .contentWrapper {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important; /* Include padding in width calculation */
    max-width: 100% !important; /* Prevent overflow beyond parent */
  }

  /* Sidebar searchBar - override ALL hero styles */
  aside#sidebar #searchBar,
  aside#sidebar form#searchBar,
  #sidebar #searchBar,
  #sidebar.span3 #searchBar {
    background: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    height: auto !important;
  }

  /* "How can we help?" text - teal, Playfair Display, no brush background */
  aside#sidebar #searchBar::before,
  #sidebar #searchBar::before {
    content: 'How can we help?' !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: #006f6c !important;
    text-align: left !important;
    display: block !important;
    background: none !important;
    background-image: none !important;
    text-shadow: none !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
  }

  /* Search input - minimal underline style */
  aside#sidebar #searchBar input[type="text"],
  aside#sidebar #searchBar .search-query,
  #sidebar #searchBar input[type="text"],
  #sidebar #searchBar .search-query {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 30px 12px 0 !important;
    font-size: 14px !important;
    border: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #1e293b !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* Search button - position and style, reduced 25% */
  aside#sidebar #searchBar button[type="submit"],
  #sidebar #searchBar button[type="submit"] {
    position: absolute !important;
    right: 0 !important;
    bottom: 8px !important;
    top: auto !important;
    transform: scale(0.75) !important;
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  #sidebar #searchBar button[type="submit"] i {
    color: #006f6c !important;
    font-size: 18px !important;
  }

  /* Subcategories heading - Playfair Display */
  aside#sidebar h3,
  #sidebar h3 {
    font-family: 'Playfair Display', serif !important;
    text-transform: none !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: #000 !important;
    margin-top: 15px !important;
    margin-bottom: 8px !important;
    padding-top: 8px !important;
    line-height: normal !important;
    letter-spacing: normal !important;
  }

  /* Subcategory list items */
  aside#sidebar ul,
  #sidebar ul,
  #sidebar .nav-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  aside#sidebar ul li,
  #sidebar ul li,
  #sidebar .nav-list li {
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: none !important;
    border: none !important;
    position: relative !important;
  }

  /* Subcategory links - INACTIVE state */
  aside#sidebar ul li a,
  #sidebar ul li a,
  #sidebar .nav-list li a {
    color: #858585 !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    display: inline-block !important;
    padding: 5px 12px 5px 0 !important;
    transition: color 0.15s ease !important;
  }

  /* Subcategory links - ACTIVE state */
  aside#sidebar ul li.active a,
  #sidebar ul li.active a,
  #sidebar .nav-list li.active a {
    color: #222222 !important;
    font-weight: 700 !important;
  }

  /* Chevron for active subcategory link */
  aside#sidebar ul li.active a::after,
  #sidebar ul li.active a::after,
  #sidebar .nav-list li.active a::after {
    content: '›' !important;
    margin-left: 6px !important;
    font-weight: 400 !important;
  }

  aside#sidebar ul li a:hover,
  #sidebar ul li a:hover {
    color: #006f6c !important;
  }

  /* Hide icon arrow in sidebar links */
  #sidebar ul li a i.icon-arrow {
    display: none !important;
  }

  /* Sidebar search dropdown */
  aside#sidebar #serp-dd,
  #sidebar #serp-dd,
  #sidebar #searchBar #serp-dd {
    position: absolute !important;
    left: -20px !important;
    width: calc(100% + 40px) !important;
    max-width: calc(100% + 40px) !important;
    margin-left: 0 !important;
    margin-top: 3px !important;
    box-sizing: border-box !important;
    top: auto !important;
    right: auto !important;
    background: white !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
    z-index: 100 !important;
  }

  /* Search dropdown list items */
  aside#sidebar #serp-dd ul,
  #sidebar #serp-dd ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  aside#sidebar #serp-dd li,
  #sidebar #serp-dd li {
    padding: 0 !important;
    margin: 5px 0 0 0 !important;
    border: none !important;
  }

  aside#sidebar #serp-dd li:first-child,
  #sidebar #serp-dd li:first-child {
    margin-top: 0 !important;
  }

  /* Search dropdown links */
  aside#sidebar #serp-dd a,
  #sidebar #serp-dd a {
    display: block !important;
    padding: 7px 15px !important;
    color: #4381b5 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 18px !important;
    border: none !important;
  }

  aside#sidebar #serp-dd a:hover,
  #sidebar #serp-dd a:hover {
    background: #f8f9fa !important;
  }

  /* "No results found" text styling */
  aside#sidebar #serp-dd li:only-child:not(:has(a)),
  #sidebar #serp-dd li:only-child:not(:has(a)) {
    padding: 4px 0 4px 14px !important;
    margin: 5px 0 !important;
    color: #797979 !important;
    font-size: 12px !important;
    line-height: 18px !important;
  }
}

/* =======================
   SMALL TABLET (641px - 767px)
   Sidebar styling to match mobile view
   ======================= */
@media (min-width: 641px) and (max-width: 767px) {
  /* Home page hero section - taller min-height for 2-column grid layout */
  section#docsSearch,
  #docsSearch {
    min-height: 850px !important;
  }

  /* Sidebar container - white background with rounded corners */
  /* contentArea already has 20px padding, so sidebar needs 0 margin on left/right */
  aside#sidebar,
  #sidebar.span3,
  aside.span3 {
    background: white !important;
    border-radius: 10px !important;
    padding: 20px !important;
    margin: 20px 0 20px 0 !important;
    border: 1px solid #e9e5e5 !important;
    min-height: auto !important;
    height: auto !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Sidebar searchBar - override ALL hero styles */
  aside#sidebar #searchBar,
  aside#sidebar form#searchBar,
  #sidebar #searchBar,
  #sidebar.span3 #searchBar {
    background: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    height: auto !important;
  }

  /* "How can we help?" text - smaller, teal, no brush background */
  aside#sidebar #searchBar::before,
  #sidebar #searchBar::before {
    content: 'How can we help?' !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    color: #006f6c !important;
    text-align: left !important;
    display: block !important;
    background: none !important;
    background-image: none !important;
    text-shadow: none !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
  }

  /* Search input - minimal underline style */
  aside#sidebar #searchBar input[type="text"],
  aside#sidebar #searchBar .search-query,
  #sidebar #searchBar input[type="text"],
  #sidebar #searchBar .search-query {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 40px 12px 0 !important;
    font-size: 16px !important;
    border: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #1e293b !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* Search button - position and style, reduced 25% to match desktop */
  aside#sidebar #searchBar button[type="submit"],
  #sidebar #searchBar button[type="submit"] {
    position: absolute !important;
    right: 0 !important;
    bottom: 8px !important;
    top: auto !important;
    transform: scale(0.75) !important;
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  #sidebar #searchBar button[type="submit"] i {
    color: #006f6c !important;
    font-size: 18px !important;
  }

  /* Subcategories heading - Playfair Display, not all caps */
  aside#sidebar h3,
  #sidebar h3 {
    font-family: 'Playfair Display', serif !important;
    text-transform: none !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    color: #000 !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
    padding-top: 10px !important;
    line-height: normal !important;
    letter-spacing: normal !important;
  }

  /* Subcategory list items - match desktop exactly (no dividers) */
  aside#sidebar ul,
  #sidebar ul,
  #sidebar .nav-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  aside#sidebar ul li,
  #sidebar ul li,
  #sidebar .nav-list li {
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: none !important;
    border: none !important;
    position: relative !important;
  }

  /* Subcategory links - INACTIVE state (lighter gray, no chevron) - matches desktop exactly */
  aside#sidebar ul li a,
  #sidebar ul li a,
  #sidebar .nav-list li a {
    color: #858585 !important;
    text-decoration: none !important;
    font-size: 13.2px !important;
    font-weight: 400 !important;
    display: inline-block !important;
    padding: 6px 15px 6px 0 !important;
    transition: color 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Subcategory links - ACTIVE state (dark text, bold, with chevron) - matches desktop exactly */
  /* Help Scout adds .active class to the li element for the current category */
  aside#sidebar ul li.active a,
  #sidebar ul li.active a,
  #sidebar .nav-list li.active a {
    color: #222222 !important;
    font-weight: 700 !important;
  }

  /* Chevron for active subcategory link - matches desktop exactly */
  aside#sidebar ul li.active a::after,
  #sidebar ul li.active a::after,
  #sidebar .nav-list li.active a::after {
    content: '›' !important;
    margin-left: 6px !important;
    font-weight: 400 !important;
  }

  aside#sidebar ul li a:hover,
  #sidebar ul li a:hover {
    color: #006f6c !important;
  }

  /* Hide icon arrow in sidebar links */
  #sidebar ul li a i.icon-arrow {
    display: none !important;
  }

  /* Small tablet sidebar search dropdown - match desktop exactly */
  aside#sidebar #serp-dd,
  #sidebar #serp-dd,
  #sidebar #searchBar #serp-dd,
  aside #serp-dd {
    position: absolute !important;
    left: -20px !important;
    width: calc(100% + 40px) !important;
    max-width: calc(100% + 40px) !important;
    margin-left: 0 !important;
    margin-top: 3px !important;
    box-sizing: border-box !important;
    top: auto !important;
    right: auto !important;
    background: white !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
    z-index: 100 !important;
  }

  /* Search dropdown list items - match desktop exactly */
  aside#sidebar #serp-dd ul,
  #sidebar #serp-dd ul,
  #serp-dd ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  aside#sidebar #serp-dd li,
  #sidebar #serp-dd li,
  #serp-dd li {
    padding: 0 !important;
    margin: 5px 0 0 0 !important;
    border: none !important;
    border-bottom: none !important;
  }

  aside#sidebar #serp-dd li:first-child,
  #sidebar #serp-dd li:first-child,
  #serp-dd li:first-child {
    margin-top: 0 !important;
  }

  /* Search dropdown links - match desktop exactly: color #4381b5, font-size 15px, padding 7px 15px */
  aside#sidebar #serp-dd a,
  #sidebar #serp-dd a,
  #serp-dd a {
    display: block !important;
    padding: 7px 15px !important;
    color: #4381b5 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 18px !important;
    border: none !important;
    border-bottom: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  aside#sidebar #serp-dd a:hover,
  #sidebar #serp-dd a:hover,
  #serp-dd a:hover {
    background: #f8f9fa !important;
  }

  /* "No results found" text styling - match desktop exactly */
  aside#sidebar #serp-dd li:only-child:not(:has(a)),
  #sidebar #serp-dd li:only-child:not(:has(a)),
  #serp-dd li:only-child:not(:has(a)) {
    padding: 4px 0 4px 14px !important;
    margin: 5px 0 !important;
    color: #797979 !important;
    font-size: 12px !important;
    line-height: 18px !important;
  }

  /* Remove tap highlight color globally on small tablet */
  aside#sidebar a,
  #sidebar a {
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Article footer - remove float on small tablet so timestamp stacks */
  .articleFoot p.lu,
  .articleFoot time.lu {
    float: none !important;
  }

  /* Related articles - remove left padding on small tablet */
  section.related,
  .relatedArticles {
    padding: 20px 20px 20px 0px !important;
  }
}

@media (max-width: 640px) {
  * {
    max-width: 100vw !important;
  }

  body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  /* Home page content area - reduced horizontal padding on mobile */
  body:has(#docsSearch) #contentArea {
    padding: 5px 20px !important;
  }

  header,
  header.navbar,
  #mainNav {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  header .navbar-inner {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  header .container-fluid {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  header .navbar-brand,
  header a.navbar-brand,
  header a.brand,
  .navbar-brand,
  a.brand {
    padding-left: 20px !important;
    margin-left: 0 !important;
  }

  header .btn-navbar,
  .navbar .btn-navbar {
    position: absolute !important;
    top: 84.27px !important;
    right: 0px !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 20px 0 0 !important;
    z-index: 10000 !important;
  }

  /* Mobile menu dropdown - base styles with transitions for animation */
  .nav-collapse {
    overflow: hidden !important;
    background: transparent !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    margin: 0 20px !important;
    padding: 0 !important;
    transition:
      height 0.35s ease,
      background 0.35s ease,
      box-shadow 0.35s ease,
      margin 0.35s ease,
      padding 0.35s ease !important;
  }

  /* Mobile menu dropdown - expanded state */
  .nav-collapse.in {
    background: white !important;
    box-shadow:
      rgba(49, 67, 81, 0.02) 0px 1px 1px 0px,
      rgba(49, 67, 81, 0.04) 0px 2px 2px 0.5px,
      rgba(49, 67, 81, 0.06) 0px 4px 4px 1px,
      rgba(49, 67, 81, 0.08) 0px 8px 8px 1.5px,
      rgba(49, 67, 81, 0.1) 0px 16px 16px 2px,
      rgba(49, 67, 81, 0.12) 0px 32px 32px 2.5px !important;
    margin: 10px 20px !important;
    padding: 8px !important;
  }

  .nav-collapse .nav {
    padding: 0 !important;
    margin: 0 !important;
  }

  .nav-collapse .nav > li,
  .nav-collapse .nav > li#contactMobile {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* Contact item - ensure it's visible */
  .nav-collapse .nav > li#contact {
    display: block !important;
  }

  .nav-collapse .nav > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    color: #1e293b !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left !important;
    transition: background-color 0.15s ease !important;
  }

  .nav-collapse .nav > li > a:hover {
    background: #f1f5f9 !important;
  }

  .nav-collapse .nav .mobile-menu-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .nav-collapse .nav .mobile-menu-icon svg {
    width: 20px !important;
    height: 20px !important;
    color: #006f6c !important;
    stroke: #006f6c !important;
  }

  /* Ensure all mobile menu items are left-aligned, even without icons */
  .nav-collapse .nav > li > a:not(:has(.mobile-menu-icon)) {
    padding-left: 48px !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* Mobile hero section - full viewport height with mobile background */
  section#docsSearch,
  #docsSearch {
    min-height: 100vh !important;
    height: 100vh !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    background-image: url('https://cdn.shopify.com/s/files/1/0380/4171/4827/files/search-background-mobile.png?v=1767370970') !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  header .btn-navbar .icon-bar,
  .navbar .btn-navbar .icon-bar {
    display: block !important;
    visibility: visible !important;
    background-color: white !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
  }

  /* Hamburger to X animation when menu is open - Mobile */
  body:has(.nav-collapse.in) .btn-navbar .icon-bar:nth-child(2) {
    transform: rotate(45deg) translateY(6px) translateX(1px) !important;
  }

  body:has(.nav-collapse.in) .btn-navbar .icon-bar:nth-child(3) {
    opacity: 0 !important;
  }

  body:has(.nav-collapse.in) .btn-navbar .icon-bar:nth-child(4) {
    transform: rotate(-45deg) translateY(-6px) translateX(1px) !important;
  }

  #searchBar {
    padding: 0 20px !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  #searchBar input[type="text"],
  #searchBar .search-query {
    padding: 16px 24px !important;
    max-width: 100% !important;
  }

  #searchBar button[type="submit"] {
    right: 40px !important;
    top: 88% !important;
  }

  #serp-dd {
    top: 103% !important;
    left: 20px !important;
    right: 20px !important;
    margin-left: 0 !important;
    width: auto !important;
    max-width: calc(100vw - 40px) !important;
  }

  .category-list {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  a.category {
    padding: 40px 24px !important;
    min-height: 240px !important;
  }

  /* ===========================================
     MOBILE SIDEBAR - Category/Article pages
     Matches desktop sidebar styling
     Uses #sidebar selector for specificity
     =========================================== */

  /* Sidebar container - white background with rounded corners */
  aside#sidebar,
  #sidebar.span3,
  aside.span3 {
    background: white !important;
    border-radius: 10px !important;
    padding: 20px !important;
    margin: 20px -20px 20px -20px !important;
    border: 1px solid #e9e5e5 !important;
    min-height: auto !important;
    height: auto !important;
    display: block !important;
    width: calc(100% + 40px) !important;
  }

  /* Sidebar searchBar - override ALL hero styles */
  aside#sidebar #searchBar,
  aside#sidebar form#searchBar,
  #sidebar #searchBar,
  #sidebar.span3 #searchBar {
    background: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    height: auto !important;
  }

  /* "How can we help?" text - smaller, teal, no brush background */
  aside#sidebar #searchBar::before,
  #sidebar #searchBar::before {
    content: 'How can we help?' !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    color: #006f6c !important;
    text-align: left !important;
    display: block !important;
    background: none !important;
    background-image: none !important;
    text-shadow: none !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
  }

  /* Search input - minimal underline style */
  aside#sidebar #searchBar input[type="text"],
  aside#sidebar #searchBar .search-query,
  #sidebar #searchBar input[type="text"],
  #sidebar #searchBar .search-query {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 40px 12px 0 !important;
    font-size: 16px !important;
    border: none !important;
    border-bottom: 1px solid #e0e0e0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #1e293b !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* Search button - position and style, reduced 25% to match desktop */
  aside#sidebar #searchBar button[type="submit"],
  #sidebar #searchBar button[type="submit"] {
    position: absolute !important;
    right: 0 !important;
    bottom: 8px !important;
    top: auto !important;
    transform: scale(0.75) !important;
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

  #sidebar #searchBar button[type="submit"] i {
    color: #006f6c !important;
    font-size: 18px !important;
  }

  /* Subcategories heading - Playfair Display, not all caps */
  aside#sidebar h3,
  #sidebar h3 {
    font-family: 'Playfair Display', serif !important;
    text-transform: none !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    color: #000 !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
    padding-top: 10px !important;
    line-height: normal !important;
    letter-spacing: normal !important;
  }

  /* Subcategory list items - match desktop exactly (no dividers) */
  aside#sidebar ul,
  #sidebar ul,
  #sidebar .nav-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  aside#sidebar ul li,
  #sidebar ul li,
  #sidebar .nav-list li {
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: none !important;
    border: none !important;
    position: relative !important;
  }

  /* Subcategory links - INACTIVE state (lighter gray, no chevron) - matches desktop exactly */
  aside#sidebar ul li a,
  #sidebar ul li a,
  #sidebar .nav-list li a {
    color: #858585 !important;
    text-decoration: none !important;
    font-size: 13.2px !important;
    font-weight: 400 !important;
    display: inline-block !important;
    padding: 6px 15px 6px 0 !important;
    transition: color 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Subcategory links - ACTIVE state (dark text, bold, with chevron) - matches desktop exactly */
  /* Help Scout adds .active class to the li element for the current category */
  aside#sidebar ul li.active a,
  #sidebar ul li.active a,
  #sidebar .nav-list li.active a {
    color: #222222 !important;
    font-weight: 700 !important;
  }

  /* Chevron for active subcategory link - matches desktop exactly */
  aside#sidebar ul li.active a::after,
  #sidebar ul li.active a::after,
  #sidebar .nav-list li.active a::after {
    content: '›' !important;
    margin-left: 6px !important;
    font-weight: 400 !important;
  }

  aside#sidebar ul li a:hover,
  #sidebar ul li a:hover {
    color: #006f6c !important;
  }

  /* Hide icon arrow in sidebar links */
  #sidebar ul li a i.icon-arrow {
    display: none !important;
  }

  /* Mobile sidebar search dropdown - match desktop exactly */
  aside#sidebar #serp-dd,
  #sidebar #serp-dd,
  #sidebar #searchBar #serp-dd,
  aside #serp-dd {
    position: absolute !important;
    left: -20px !important;
    width: calc(100% + 40px) !important;
    max-width: calc(100% + 40px) !important;
    margin-left: 0 !important;
    margin-top: 3px !important;
    box-sizing: border-box !important;
    top: auto !important;
    right: auto !important;
    background: white !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
    z-index: 100 !important;
  }

  /* Search dropdown list items - match desktop exactly */
  aside#sidebar #serp-dd ul,
  #sidebar #serp-dd ul,
  #serp-dd ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  aside#sidebar #serp-dd li,
  #sidebar #serp-dd li,
  #serp-dd li {
    padding: 0 !important;
    margin: 5px 0 0 0 !important;
    border: none !important;
    border-bottom: none !important;
  }

  aside#sidebar #serp-dd li:first-child,
  #sidebar #serp-dd li:first-child,
  #serp-dd li:first-child {
    margin-top: 0 !important;
  }

  /* Search dropdown links - match desktop exactly: color #4381b5, font-size 15px, padding 7px 15px */
  aside#sidebar #serp-dd a,
  #sidebar #serp-dd a,
  #serp-dd a {
    display: block !important;
    padding: 7px 15px !important;
    color: #4381b5 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 18px !important;
    border: none !important;
    border-bottom: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  aside#sidebar #serp-dd a:hover,
  #sidebar #serp-dd a:hover,
  #serp-dd a:hover {
    background: #f8f9fa !important;
  }

  /* "No results found" text styling - match desktop exactly */
  aside#sidebar #serp-dd li:only-child:not(:has(a)),
  #sidebar #serp-dd li:only-child:not(:has(a)),
  #serp-dd li:only-child:not(:has(a)) {
    padding: 4px 0 4px 14px !important;
    margin: 5px 0 !important;
    color: #797979 !important;
    font-size: 12px !important;
    line-height: 18px !important;
  }

  /* Remove tap highlight color globally on mobile */
  aside#sidebar a,
  #sidebar a {
    -webkit-tap-highlight-color: transparent !important;
  }
}