@font-face {
    font-family: 'Cerebri Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/public/assets/fonts/cerebri/CerebriSansPro-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'Norwester';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/public/assets/fonts/norwester/norwester.otf') format('opentype');
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

.font-logo {
    font-family: 'Norwester', sans-serif;
    font-weight: bold;
}

.font-logo2 {
    font-family: 'Cerebri Sans', sans-serif;
    font-weight: bold;
}

[x-cloak] {
    display: none !important;
}

.ql-editor ol {
    padding: 0 !important;
}


.product-detail-page .product-tab.active {
    color: #1d4ed8;
    border-color: #1d4ed8;
}

.product-detail-page .product-tab {
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.product-detail-page .product-thumb.active {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 1px #1d4ed8;
}

.product-detail-page .spec-row:nth-child(odd) {
    background-color: #f8fafc;
}

.product-detail-page .form-control {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 11px 12px;
    font-size: 14px;
    background-color: white;
    outline: none;
}

.product-detail-page .form-control:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgb(37 99 235 / 10%);
}

.product-detail-page .section-anchor {
    scroll-margin-top: 100px;
}

/* Container holding the scrollable content */
.horizontal-scroll-container {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding-bottom: 12px; /* Adds space so the scrollbar doesn't cut off content */
  
  /* Modern standard for Firefox */
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9; 
}

/* Custom styles for Chrome, Safari, and Edge */
.horizontal-scroll-container::-webkit-scrollbar {
  height: 8px; /* Height of the horizontal scrollbar */
}

/* Track (the background of the scrollbar) */
.horizontal-scroll-container::-webkit-scrollbar-track {
  background: #f1f5f9; 
  border-radius: 100px;
}
 
/* Handle (the draggable part) */
.horizontal-scroll-container::-webkit-scrollbar-thumb {
  background: #cbd5e1; 
  border-radius: 100px;
}

/* Handle on hover */
.horizontal-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #94a3b8; 
}