/*-------------------
This theme uses Bootstrap v5.1.

It is highly recommended to check out Bootstrap's guiding principles,
strategies, and techniques at https://getbootstrap.com/docs/5.1/extend/approach/
before adding custom styling.

To learn more about Bootstrap v4.6, please check
out https://getbootstrap.com/docs/5.1/getting-started/introduction/.
/*-------------------*/

/*-------------------*/
/* GENERAL */
/*-------------------*/

/*-------------------*/
/* TOP NAV */
/*-------------------*/

/*-------------------*/
/* HEADER */
/*-------------------*/

/*-------------------*/
/* CATEGORY NAV */
/*-------------------*/

/*-------------------*/
/* CONTENT */
/*-------------------*/

/*-------------------*/
/* PRODUCT THUMBS */
/*-------------------*/

/*-------------------*/
/* PRODUCT */
/*-------------------*/

/*-------------------*/
/* CART/CHECKOUT */
/*-------------------*/

/*-------------------*/
/* FOOTER */
/*-------------------*/


/*-------------------*/
/* MEDIA QUERIES */
/*-------------------*/
@media screen and (min-width: 661px){

}

@media screen and (max-width: 1200px){

}

@media screen and (max-width: 660px){

}

@media screen and (max-width: 340px){

}
/***** BRIGHTSITES MODERN HEADER FIXES *****/
/* Tweak this once and the rest follows */
:root { --header-offset: 50px; }  /* set to your real header height */

/* 1) Full width white behind the entire header at all times */
html, body { background:#fff !important; }

#header, .header, .header-wrapper, .top-nav, .primary-nav, .utility-bar, .navbar {
  background:#fff !important;
  position: relative;
  z-index: 100;                 /* stay above slideshow */
  box-shadow: none !important;
}

/* kill the gray side extenders some templates add */
#header:before, #header:after,
.header:before, .header:after,
.header-wrapper:before, .header-wrapper:after,
.top-nav:before, .top-nav:after,
.utility-bar:before, .utility-bar:after,
.navbar:before, .navbar:after,
.header-bg-left, .header-bg-right {
  background:#fff !important;
  content:none !important;
  box-shadow:none !important;
}

/* 2) Make the header bar tighter */
#header, .header, .header-wrapper, .top-nav, .primary-nav, .utility-bar, .navbar {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  min-height: var(--header-offset);
}

/* 3) The slideshow should never hide under the header */
#carousel-wrapper,
.homepage-slideshow,
.homepage-slideshow-wrapper,
#homepage-carousel,
.content .slideshow,
#carousel {
  margin-top: var(--header-offset) !important;
}

/* 4) If your theme applies a fixed or sticky header on scroll, keep spacing stable */
.is-sticky #carousel-wrapper,
.is-sticky .homepage-slideshow,
.is-sticky .homepage-slideshow-wrapper,
.is-sticky #homepage-carousel,
.is-sticky #carousel {
  margin-top: var(--header-offset) !important;
}

/* 5) Optional: hide specific items from the top nav but keep pages live for footer links.
   replace the href parts with your actual slugs, or delete these lines if not needed. */
/*
.top-nav a[href*="/help-center"],
.top-nav a[href*="/privacy-policy"] {
  display:none !important;
}
*/
/***** FIX HEADER BACKGROUND AND SLIDESHOW OVERLAP *****/

/* ensure the whole header area is solid white and spans full width */
header, 
#header, 
.header, 
.header-wrapper, 
.top-nav, 
.utility-bar, 
.primary-nav, 
.navbar {
  background: #fff !important;
  position: relative;
  width: 100%;
  z-index: 100;
  box-shadow: none !important;
}

/* remove stray transparent overlays on sides */
#header:before, 
#header:after, 
.header:before, 
.header:after, 
.header-bg-left, 
.header-bg-right {
  display: none !important;
  background: none !important;
  content: none !important;
}

/* tighten header spacing if needed */
#header, .header, .header-wrapper {
  padding: 0 !important;
  min-height: 60px; /* adjust if your header is taller/shorter */
}

/* keep entire background white (fixes gray bleed) */
html, body {
  background-color: #fff !important;
}

/* make sure slideshow starts below header */
#carousel-wrapper,
#homepage-carousel,
#carousel,
.homepage-slideshow,
.homepage-slideshow-wrapper,
.content .slideshow {
  margin-top: 215px !important; /* match this to your header height */
}

/* optional: add a subtle divider line below header if you want */
#header {
  border-bottom: 0px solid #e5e5e5;
}
/* Help Center styling with wrapper aware selectors */
.summary-container .gh-help details,
.page-content .gh-help details,
.content .gh-help details{
  margin: 18px 0;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  background: #f2f2f2;
  overflow: hidden;
}

.summary-container .gh-help summary,
.page-content .gh-help summary,
.content .gh-help summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  font: 700 16px Arial, Helvetica, sans-serif;
  color: #111;
  background: #eee;
}
.summary-container .gh-help summary::-webkit-details-marker,
.page-content .gh-help summary::-webkit-details-marker,
.content .gh-help summary::-webkit-details-marker{ display: none }

.summary-container .gh-help summary::after,
.page-content .gh-help summary::after,
.content .gh-help summary::after{
  content: "+";
  font-weight: 700;
  font-size: 20px;
  margin-left: 12px;
}
.summary-container .gh-help details[open] summary,
.page-content .gh-help details[open] summary,
.content .gh-help details[open] summary{ background: #e8e8e8 }
.summary-container .gh-help details[open] summary::after,
.page-content .gh-help details[open] summary::after,
.content .gh-help details[open] summary::after{ content: "–" }

.summary-container .gh-help .panel,
.page-content .gh-help .panel,
.content .gh-help .panel{
  background: #fff;
  color: #222;
  font: 16px Arial, Helvetica, sans-serif;
  line-height: 1.6;
  padding: 0 18px 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 240ms ease, padding 240ms ease;
}
.summary-container .gh-help details[open] .panel,
.page-content .gh-help details[open] .panel,
.content .gh-help details[open] .panel{
  padding: 16px 18px 18px;
  max-height: 1200px;
}

.summary-container .gh-help a,
.page-content .gh-help a,
.content .gh-help a{ color: #236fa1; text-decoration: underline }

.summary-container .gh-help ol,
.summary-container .gh-help ul,
.page-content .gh-help ol,
.page-content .gh-help ul,
.content .gh-help ol,
.content .gh-help ul{ margin: 8px 0 0 22px }

/* Title match */
.summary-container .gh-help-title,
.page-content .gh-help-title,
.content .gh-help-title{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20pt;
  margin: 0 0 8px 0;
}
/* ===== Help Center polish ===== */
.gh-help{
  max-width: 1180px;
  margin: 0 auto 56px;
  padding: 0 24px;
}

/* Title */
.gh-help-title{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  margin: 16px 0 24px;
}

/* Each FAQ card */
.gh-help details{
  margin: 22px 0;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: #f1f1f1;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

/* Question bar */
.gh-help summary{
  position: relative;
  list-style: none;
  cursor: pointer;
  display: block;
  padding: 22px 56px 22px 28px;   /* roomy left, space on right for icon */
  font: 700 17px/1.4 Arial, Helvetica, sans-serif;
  color: #111;
  background: #eeeeee;
  outline: none;
  user-select: none;
  transition: background 120ms ease;
}
.gh-help summary:hover{ background: #e9e9e9 }

/* Hide the native marker triangles */
.gh-help summary::-webkit-details-marker{ display: none }
.gh-help summary::marker{ content: "" }

/* Plus/minus icon on right */
.gh-help summary::after{
  content: "+";
  position: absolute;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 20px;
}

/* Open state header */
.gh-help details[open] summary{
  background: #e6e6e6;
}
.gh-help details[open] summary::after{
  content: "–";
}

/* Answer panel */
.gh-help .panel{
  background: #fff;
  color: #222;
  font: 16px/1.7 Arial, Helvetica, sans-serif;
  padding: 0 28px;           /* collapsed padding */
  max-height: 0;
  overflow: hidden;
  transition: max-height 260ms ease, padding 200ms ease;
  border-top: 1px solid #e6e6e6;
}

/* Expanded panel */
.gh-help details[open] .panel{
  padding: 18px 28px 24px;
  max-height: 1200px;        /* bump if you have a very long answer */
}

/* Lists and links inside answers */
.gh-help ol, .gh-help ul{ margin: 10px 0 0 22px }
.gh-help a{ color: #236fa1; text-decoration: underline }

/* Mobile tweaks */
@media (max-width: 640px){
  .gh-help-title{ font-size: 24px }
  .gh-help summary{ font-size: 18px; padding: 18px 52px 18px 18px }
  .gh-help .panel{ padding: 0 18px }
  .gh-help details[open] .panel{ padding: 14px 18px 20px }
}
/* reserve space above the fixed footer */
.summary-container .gh-help,
.page-content .gh-help,
.content .gh-help{
  padding-bottom: 240px !important;
}

/* the spacer div is a belt and suspenders fail safe */
.gh-help-spacer{ height: 240px }

/* keep the focused item clear of the footer when the browser scrolls to it */
.summary-container .gh-help details,
.page-content .gh-help details,
.content .gh-help details{
  scroll-margin-bottom: 260px;
}

/* mobile footer is usually taller */
@media (max-width: 640px){
  .summary-container .gh-help,
  .page-content .gh-help,
  .content .gh-help{ padding-bottom: 300px !important }
  .gh-help-spacer{ height: 300px }
  .summary-container .gh-help details,
  .page-content .gh-help details,
  .content .gh-help details{ scroll-margin-bottom: 320px }
}
/* ===== Contact page styled to match Help Center ===== */
.gh-contact{
  max-width: 1180px;
  margin: 0 auto 56px;
  padding: 0 24px;
  font-family: Arial, Helvetica, sans-serif;
}

/* Title to match */
.gh-contact strong{
  font-size: 28px;
  font-weight: 700;
}

/* Card shell like the FAQ boxes */
.gh-contact .zsFormClass{
  width: 100% !important;              /* override inline 600px */
  max-width: 820px;                     /* pleasant readable width */
  margin: 16px auto 0;
  background: #fff !important;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  border-collapse: separate;
  border-spacing: 0;
}

/* Row spacing */
.gh-contact .zsFormClass td{
  padding: 14px 16px !important;
  vertical-align: middle;
}

/* Left column labels */
.gh-contact .zsFontClass{
  color: #111;
  font-size: 16px !important;
}
.gh-contact .zsFormClass td[width="25%"],
.gh-contact .zsFormClass td:first-child{
  width: 32%;
  white-space: normal;
}

/* Inputs to full width with rounded corners, consistent height */
.gh-contact input[type="text"],
.gh-contact textarea,
.gh-contact select{
  width: 100% !important;
  max-width: 100%;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  background: #fff;
  box-sizing: border-box;
}
.gh-contact textarea{ min-height: 120px }

/* Focus state */
.gh-contact input[type="text"]:focus,
.gh-contact textarea:focus,
.gh-contact select:focus{
  outline: none;
  border-color: #bbb !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.05);
}

/* Required field left red border from Zoho toned down */
.gh-contact .manfieldbdr{
  border-left: 3px solid #999 !important;
}

/* Attachment link and file list */
.gh-contact #zsBrowseAttachment{
  color: #236fa1 !important;
  text-decoration: underline !important;
  cursor: pointer;
  font-weight: 600;
}
.gh-contact #zsFileBrowseAttachments .filenamecls{
  font-size: 14px;
  margin-top: 8px;
}

/* Helper notes */
.gh-contact #zsMaxSizeMessage,
.gh-contact #zsMaxLimitMessage{
  float: none !important;
  display: block !important;
  font-size: 12px !important;
  color: #666 !important;
  margin: 8px 0 0 !important;
}

/* Buttons like tidy rounded pills */
.gh-contact #zsSubmitButton_649428000000225840,
.gh-contact input[type="button"][value="Reset"]{
  appearance: none;
  border: 1px solid #d0d0d0;
  background: #f2f2f2;
  color: #111;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.gh-contact #zsSubmitButton_649428000000225840:hover,
.gh-contact input[type="button"][value="Reset"]:hover{
  background: #e9e9e9;
  border-color: #c8c8c8;
}

/* Center the buttons row */
.gh-contact .zsFormClass tr:last-of-type td[align="center"],
.gh-contact #zohoSupportWebToCase input[type="submit"]{
  text-align: center;
}

/* Make the whole table breathe like the FAQ spacing */
.gh-contact .zsFormClass tr + tr td{
  border-top: 1px solid #f0f0f0;
}

/* Mobile: stack labels on top of fields */
@media (max-width: 640px){
  .gh-contact .zsFormClass{ max-width: 100% }
  .gh-contact .zsFormClass tr{ display: block }
  .gh-contact .zsFormClass td{ display: block; width: 100% !important; padding: 10px 14px !important }
  .gh-contact .zsFormClass td[width="25%"]{ padding-bottom: 4px !important }
}
/* Only the "How can we help?" dropdown */
.gh-contact #CASECF2{
  width: 420px !important;   /* make it shorter; change to taste */
  max-width: 100%;
  display: inline-block;
  height: 44px;
  padding-right: 40px;       /* space for the native arrow */
  box-sizing: border-box;
}

/* Full width on small screens */
@media (max-width: 900px){
  .gh-contact #CASECF2{ width: 100% !important; }
}
/* Hide Rating Low High */
select option:nth-child(5) {
  display: none;
}

/* Hide Rating High Low */
select option:nth-child(6) {
  display: none;
}

/* Hide Most Reviews */
select option:nth-child(7) {
  display: none;
}
/* Make Privacy page text match Help Center and Contact fonts */

#content.content-page,
#content.content-page * {
  font-family: Arial, Helvetica, sans-serif !important;
  color: #111;
}

/* Headings */
#content.content-page h1,
#content.content-page h2,
#content.content-page h3 {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700;
  margin: 0 0 14px 0;
}

/* Paragraphs */
#content.content-page p {
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 16px 0;
}

/* Lists */
#content.content-page ul,
#content.content-page ol {
  margin: 0 0 20px 24px;
  padding: 0;
  font-size: 16px;
  line-height: 1.5;
}

/* Links */
#content.content-page a {
  color: #236fa1;
  text-decoration: underline;
  font-weight: 600;
}
/* Force privacy page fonts to match Help Center and Contact page */

#content [style] {
  font-family: Arial, Helvetica, sans-serif !important;
  color: #111 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}

/* Headings inside inline styled blocks */
#content h1[style],
#content h2[style],
#content h3[style] {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  color: #000 !important;
  margin: 0 0 12px 0 !important;
}

/* Paragraph spacing override */
#content p[style] {
  margin: 0 0 16px 0 !important;
}

/* Lists */
#content ol[style],
#content ul[style] {
  margin: 0 0 18px 24px !important;
  padding: 0 !important;
}

/* List items */
#content li[style],
#content li span[style] {
  font-size: 16px !important;
  color: #111 !important;
  line-height: 1.55 !important;
}