@import url('https://fonts.googleapis.com/css2?family=Days+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans:ital,wght@0,1..1000;1,1..1000&display=swap');
:root{--primary:#ec1c24;--secondary:#2b3640;--primary-font-family:"Sofia Sans","sans-serif";--mask-background-color:rgba(0,0,0,0.4);--placeholder:var(--gray);--white:#ffffff;--gray: #808080;--silver: #F8F8F8;--darker-silver:#E6E6E6;--black:#000a12;--green:#006300;--red:#bd0000;--blue:#387bbe;--inbound-price:#ec1c24;--outbound-price:#E6E6E6}
html,body{font-family:var(--primary-font-family);}
.days-one-font {font-family: "Days One", sans-serif;}
#header-categories{white-space:nowrap;}
#header-categories div[type="button"]:hover + div{display:block;left:170px;height:fit-content;}
#header-categories:has(+ div:hover){display:block;}
.text-shadow { text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);}

/* BUTTONS START*/
.primary-button{display:block;color:var(--white);background-color:var(--primary);border:1px solid var(--primary);}
.primary-button:hover svg path{fill:var(--white);stroke:var(--whitey);}
.primary-button.active,.primary-button:hover{color:var(--primary);background-color:var(--white);}
.primary-button.active .button-loader{color:var(--primary);stroke-linecap:round;}
.primary-button.active .button-loader .path{stroke:var(--primary);}
.primary-button.inverted{color:var(--primary);background-color:var(--white);border:1px solid var(--primary);}
.primary-button.inverted:hover{color:var(--white);background-color:var(--primary);border:1px solid var(--white);}
.primary-button.inverted.active {background-color:var(--primary);color:var(--white);border-color:var(--white);}
.primary-button.inverted.active .button-loader{color:var(--white);stroke-linecap:round;}
.primary-button.inverted.active .button-loader .path{stroke:var(--white);}
.primary-button.disabled{background-color:var(--white);opacity:0.6;color:var(--black);cursor:not-allowed;border-color:var(--black);}
.transparent-button{display:block;width:fit-content;color:var(--white);background-color:transparent;border:1px solid var(--white);}
.transparent-button:hover{color:var(--primary);background-color:var(--white);border:1px solid var(--primary);}
.transparent-button.active{color:var(--primary);background-color:var(--white);border:var(--primary);}
.transparent-button.active .button-loader{color:var(--primary);stroke-linecap:round;}
.transparent-button.active .button-loader .path{stroke:var(--primary);}
.transparent-button.disabled{background-color:transparent;opacity:0.6;color:var(--black);cursor:not-allowed;border-color:var(--black);}
.secondary-button{color:var(--white);background-color:var(--secondary);border:1px solid var(--secondary);}
.secondary-button:hover{color:var(--secondary);background-color:var(--white);border:1px solid var(--secondary);}
.secondary-button:hover svg path{fill:var(--secondary);stroke:var(--secondary);}
.secondary-button.active{color:var(--white);background-color:var(--secondary);border:1px solid var(--white);}
.secondary-button.active .button-loader{stroke-linecap:round;display:block;color:var(--black);}
.secondary-button.active .button-loader .path{stroke:var(--secondary);}
.secondary-button.disabled{background-color:var(--primary);opacity:0.6;color:var(--black);cursor:not-allowed;border-color:var(--black);}
button{background-color:var(--black);color:var(--white);}
button.active {
    background-color: var(--primary);
    color: var(--white);
}

button.disabled{background-color:var(--white);opacity:0.6;color:var(--black);cursor:not-allowed;border-color:var(--black);}
/* BUTTONS END*/

.button-loader{animation:rotate 2s linear infinite;z-index:2;width:20px;height:20px;display:none;}
@keyframes rotate{100%{transform:rotate(360deg);}}
@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}
.client-address.selected{font-weight:700;border-width:2px;}
.ui-menu{width:50%;overflow-x:hidden;box-shadow:rgba(0,0,0,0.2) 0px 0px 10px;background-color:var(--white) !important;position:relative;margin-top:2rem;border-radius:0.5rem;border-width:1px;--tw-border-opacity:1;border-color:var(--black);max-height:200px;}
.autocomplete-option.selected{border-color:var(--black);background-color:var(--white);color:var(--black);border-width:2px;}
.autocomplete-option.selected span{font-weight:bold;}
.ui-menu .ui-menu-item{padding:0.5rem;cursor:pointer;}
.ui-menu .ui-menu-item:hover{background-color:var(--white);}
.ui-helper-hidden-accessible{display:none;}
.invalid{border-color:var(--red) !important;}
.valid{border-color:var(--green) !important;}
.line-primary{position:relative;margin-bottom:2rem;}
.line-primary:after{content:"";background:var(--primary);position:absolute;bottom:-1rem;left:0;width:50%;height:0.4rem;}
.tab-button{position:relative;}
/* .tab-button.active{font-weight:bold;cursor:not-allowed;border-bottom: 2px solid var(--primary);} */
.tab-button:not(.active){color: var(--gray);}
.tab-line-primary.active::after{content:"";background:var(--primary);position:absolute;bottom:0;left:0;width:100%;height:3px;border-radius:10px;}
*:has(>.description-tab-button)::after{content:"";background:var(--silver);position:absolute;bottom:1px;left:0;width:100%;height:2px;border-radius:10px;}
.variant-select:hover{background-color:var(--primary);border-color:var(--white);color:var(--black);cursor:pointer;}
.variant-select.active{border-color:var(--white);color:var(--black);}
.range_container{position:relative;display:flex;flex-direction:column;}
.sliders_control{position:relative;min-height:25px;}
.form_control{position:relative;color:var(--gray);}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;width:24px;height:24px;background-color:var(--primary);border-radius:50%;border: 2px solid var(--primary);box-shadow: none;}
input[type="range"]::-moz-range-thumb{-webkit-appearance:none;pointer-events:all;width:24px;height:24px;background-color:var(--primary);border-radius:50%;border: 2px solid var(--primary);box-shadow: none;}
input[type="range"]::-webkit-slider-thumb:hover{background:#f7f7f7;}
input[type="range"]::-webkit-slider-thumb:active{box-shadow:inset 0 0 3px var(--primary),0 0 9px var(--primary);-webkit-box-shadow:inset 0 0 3px var(--primary),0 0 9px var(--primary)}
input[type="number"]{width:50px;height:30px;font-size:20px;border:none;}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{opacity:1;}
input[type="range"]{-webkit-appearance:none;appearance:none;height:5px;width:100%;position:absolute;background-color:var(--darker-silver);pointer-events:none;}
#fromSlider{height:0px;z-index:1; background: var(--darker-silver);}
.slider-wrapper{position:relative;}
input[type="range"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;outline:none;position:absolute;margin:auto;top:0;bottom:0;background-color:transparent;pointer-events:none;}
input[type="checkbox"]{accent-color:var(--primary);width:15px;}
/* #search-autocomplete-wrapper{position:absolute;right:0;top:20px;background-color:var(--white);z-index:1000;height:350px;width:500px;overflow-y:auto;display:none;} */
.autocomplete-item{display:flex;padding:1rem;gap:1rem;align-items:center;cursor:pointer;border-bottom:1px solid var(--black);}
.autocomplete-item:hover{background-color:var(--red);color:var(--white);border-color:1px solid var(--red);}
.star{fill:var(--white);stroke:var(--primary);}
.star.active{fill:var(--primary);stroke:var(--primary);}
.index-vendors-carousel img{max-height:40px;width:auto;}
.slick-track{display:flex !important;padding-block: 10px;}
.slick-slide{margin:0 10px;height:inherit !important;}
.slick-dots{display:flex !important;flex-wrap:wrap;justify-content:center;align-items:center;list-style:none;padding:0;margin:10px 0 10px 0;}
.slick-dots li{display:inline-block;margin:0 8px;}
.slick-dots li button{font-size:0;border:none;background:transparent;padding:0;cursor:pointer;}
.slick-dots li button:before{content:'';display:block;width:8px;height:8px;background-color:var(--secondary);transition:background-color 0.3s ease,transform 0.3s ease;}
.slick-dots li.slick-active button:before{background-color:var(--primary);transform:scale(1.1);width: 20px;}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-moz-appearance:textfield;}
.details table,.showTable table {width: 100% !important; border: solid 1px var(--gray);font-size: 0.9em;}
.details table tr,.showTable table tr {border: solid 1px var(--gray)}
.details table td,.showTable table td {padding: 5px;;}
.details table tr td:last-child,.showTable table tr td:last-child {text-align: left; min-width: 150px; font-weight: bold; }
.product-shadow:hover,.button-shadow:hover{box-shadow:0 0px 8px 0 rgba(0,0,0,0.2),0 0px 0px 0px rgba(0,0,0,0.19);}
.big-shadow {box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 0 0px 10px 0 rgba(0, 0, 0, 0.19);}
.big-shadow-hover:hover {box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 0 0px 10px 0 rgba(0, 0, 0, 0.19);}

.favorite-button-active {color: var(--white); stroke: var(--white);background-color: var(--primary)};
footer h1 {font-family: "Days One", sans-serif;}
.search-bar {max-height: 0;overflow: hidden;opacity: 0;transition:max-height 0.5s ease,opacity 0.5s ease,padding 0.5s ease;padding: 0 10px; /* no top/bottom padding when closed */}
.search-bar.open {max-height: 100px;opacity: 1;padding: 10px; /* adds vertical padding smoothly */z-index: 20;}
.review-slider .slick-slide{margin:0 10px;height: 100%}

@layer utilities {
  .number-input::-webkit-inner-spin-button,
  .number-input::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button;
    margin: 0;
  }

  .number-input {
    -moz-appearance: auto;
    appearance: auto;
  }
}


header li:not(#header-categories li), #favorites-button-wrapper, #auth-button-wrapper {
  position: relative; /* needed for ::after */
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  padding: 4px 8px;
}

header li:not(#header-categories li)::after, #favorites-button-wrapper::after, #auth-button-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;             /* adjust start position */
  width: 80%;            /* adjust length */
  height: 2px;           /* thickness of bottom border */
  background-color: transparent; /* initially invisible */
}

header li:not(#header-categories li):hover, #favorites-button-wrapper:hover, #auth-button-wrapper:hover  {
  border-top: 2px solid var(--primary);
  border-left: 2px solid var(--primary);
}

header li:not(#header-categories li):hover::after, #favorites-button-wrapper:hover::after, #auth-button-wrapper:hover::after {
  background-color: var(--primary); /* show partial bottom border on hover */
}
/* ===================== POST CONTENT (VEditor output) ===================== */
/* Restore defaults removed by preflight so TinyMCE indent/outdent renders properly */
#post_content {
  line-height: 1.8;
}
#post_content p {
  margin: 0 0 1rem 0;
}
#post_content ul,
#post_content ol {
  list-style-position: outside;
  padding-left: 1.5rem;
  margin: 0 0 1rem 0;
}
#post_content ul {
  list-style-type: disc;
}
#post_content ol {
  list-style-type: decimal;
}
#post_content ul ul {
  list-style-type: circle;
  padding-left: 1.25rem;
}
#post_content ol ol {
  list-style-type: lower-alpha;
  padding-left: 1.25rem;
}
#post_content li {
  margin: 0.25rem 0;
}
#post_content blockquote {
  border-left: 4px solid var(--gray);
  padding-left: 1rem;
  margin: 1rem 0;
}
/* TinyMCE Accordion */
#post_content details {
  margin: 0 0 1rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray);
  border-radius: 0.5rem;
  background: transparent;
}
#post_content details > summary {
  font-weight: 600;
  cursor: pointer;
}

/* Column rows built by the editor */
#post_content #col_droppable_row {
  column-gap: 1rem;
  row-gap: 1rem;
}

/* Headings */
#post_content h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
}
#post_content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.875rem 0;
}
#post_content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.75rem 0;
}
#post_content h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}
#post_content h5 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}
#post_content h6 {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

/* Links */
#post_content a {
  color: var(--secondary);
  text-decoration: underline;
}
#post_content a:hover {
  color: var(--primary);
}

/* Images and figures */
#post_content img {
  max-width: 100%;
  height: auto;
}
#post_content figure {
  margin: 1rem 0;
}
#post_content figcaption {
  text-align: center;
  font-size: 0.9em;
  color: #555;
}

/* Alignment helpers TinyMCE may output */
#post_content .alignleft {
  float: left;
  margin: 0 1rem 1rem 0;
}
#post_content .alignright {
  float: right;
  margin: 0 0 1rem 1rem;
}
#post_content .aligncenter {
  display: block;
  margin: 1rem auto;
  text-align: center;
}
#post_content::after {
  content: '';
  display: table;
  clear: both;
}

/* Tables from editor */
#post_content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
#post_content th,
#post_content td {
  border: 1px solid var(--gray);
  padding: 0.5rem;
}
#post_content th {
  background: var(--silver);
  text-align: left;
}

/* Code blocks */
#post_content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono',
    monospace;
  background: #f5f5f5;
  padding: 0 0.25rem;
  border-radius: 4px;
}
#post_content pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono',
    monospace;
  background: #f5f5f5;
  padding: 1rem;
  overflow-x: auto;
  border-radius: 6px;
}
#post_content pre code {
  background: transparent;
  padding: 0;
}

/* Horizontal rule */
#post_content hr {
  border: 0;
  border-top: 1px solid var(--gray);
  margin: 2rem 0;
}

/* Definition lists */
#post_content dl {
  margin: 1rem 0;
}
#post_content dt {
  font-weight: 600;
}
#post_content dd {
  margin: 0 0 0.5rem 1rem;
}

/* Superscript / subscript */
#post_content sup {
  vertical-align: super;
  font-size: 0.75em;
}
#post_content sub {
  vertical-align: sub;
  font-size: 0.75em;
}

/* Mark */
#post_content mark {
  background-color: #fff3a6;
  padding: 0 0.2em;
}

/* Embedded media */
#post_content iframe,
#post_content video,
#post_content audio {
  max-width: 100%;
}