:root {
  --pso-dark-h: 210deg;
  --pso-dark-s: 31.21%;
  --pso-dark-l: 12.03%;
  --bg-main: #0c1015;
  --bg-content: var(--pso-dark);
  --bg-card: #232323;
  --bg-footer: #23232c;
  --color-white: #fff;
  --color-gray-light: #ccc;
  --color-gray: #bbb;
  --color-gray-medium: #888;
  --color-border: #444;
  --color-accent: #d3082c;
  /* Using --pso-border-radius instead of defining our own */
  --spacing-xs: 8px;
  --spacing-s: 16px;
  --spacing-m: 24px;
  --spacing-l: 32px;
  /* Override ProShop variables */
  --bs-primary: var(--color-accent);
  --pso-main-content-bg: var(--bg-content) !important;
  --bs-body-font-family: "Raleway", sans-serif;
  --bs-body-color: var(--color-white);
  --pso-product-card-border-color: var(--color-border);
}

.modal {
  --bs-modal-bg: var(--bg-card) !important;
}

/* Base styles */
body {
  font-family: var(--bs-body-font-family);
  background: var(--bg-main);
  color: var(--color-white);
  margin: 0;
  padding: 0;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: "Harabara", Arial, Helvetica Neue, sans-serif;
  color: white;
}

p {
  color: var(--color-gray-light);
  line-height: 1.7;
  margin-bottom: 18px;
}

a {
  color: var(--color-accent);
  transition: color 0.2s;
}

a:hover {
  color: #be0731;
}

ul, ol {
  padding-left: 28px;
  margin-bottom: 14px;
}

ul li, ol li {
  margin-bottom: 5px;
}

blockquote {
  color: var(--color-accent);
  font-style: italic;
  border-left: 4px solid var(--color-accent);
  margin: 18px 0;
  padding-left: 16px;
}

hr {
  border: 0;
  border-top: 1.5px solid var(--color-border);
  margin: 32px 0;
}

small {
  color: var(--color-gray-medium);
  font-size: 0.92em;
}

strong {
  color: var(--color-white);
}

em {
  color: var(--color-gray);
}

u {
  text-decoration: underline dotted var(--color-gray);
}

/* Container */
.container {
  max-width: 1200px;
  margin: var(--spacing-l) auto var(--spacing-m) auto;
  padding: 0 var(--spacing-m);
}

/* Other base elements */
.subtitle {
  color: var(--color-gray-light);
  font-size: 1.2em;
  margin-bottom: var(--spacing-s);
}

.notice {
  font-size: 0.96em;
  color: var(--color-gray-medium);
  margin-top: var(--spacing-xs);
}

/* Form elements */
input[type=radio], input[type=checkbox] {
  accent-color: var(--color-accent);
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 6px;
}

@media (min-width: 576px) {
  .category-view .main-content[class*=container] {
    padding: 0;
  }
}
@media (min-width: 768px) {
  .header-type-3 header.main-header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
  }
}
.header-type-3 header.main-header .logo {
  padding: 10px 0 !important;
}

/* Improve contact phone styling - more elegant and less "basto" */
.header-type-3 .header-content-desktop .contact-phone {
  background: transparent;
  border: 1px solid rgba(211, 8, 44, 0.85);
  color: var(--color-white);
  padding: 0.1rem 0.8rem;
  border-radius: var(--pso-border-radius);
  font-weight: 500;
  font-size: 0.95em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.02em;
  margin: 1rem 0;
}
.header-type-3 .header-content-desktop .contact-phone:hover {
  background-color: rgba(211, 8, 44, 0.95);
  transform: translateY(-1px);
  color: var(--color-white);
  text-decoration: none;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}
.header-type-3 .header-content-desktop .contact-phone i {
  margin-right: 0.6rem;
  font-size: 1em;
  opacity: 0.9;
}

/* Make search input more discrete */
.header-type-3 .header-content-desktop .search_query,
.proshop-search-input.form-control {
  background-color: rgba(35, 35, 35, 0.6) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--pso-border-radius);
  color: var(--color-gray-light) !important;
  font-size: 0.9em;
  padding: 0.4rem 0.8rem;
  width: 90%;
  transition: all 0.3s ease;
  opacity: 0.8;
  margin-top: 0.5rem;
}
.header-type-3 .header-content-desktop .search_query:focus,
.proshop-search-input.form-control:focus {
  background-color: rgba(35, 35, 35, 0.9) !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 2px rgba(211, 8, 44, 0.2) !important;
  opacity: 1;
  outline: none;
}
.header-type-3 .header-content-desktop .search_query::placeholder,
.proshop-search-input.form-control::placeholder {
  color: var(--color-gray-medium);
  opacity: 0.7;
}

.shop-search-wrapper {
  text-align: left;
  margin-bottom: 0.5rem;
}

@media (min-width: 767px) {
  .main-menu .buttons-container {
    display: none;
  }
}
/* Footer styles */
footer {
  background: var(--bg-footer);
  color: var(--color-gray-light);
  padding: var(--spacing-l) var(--spacing-m) var(--spacing-s) var(--spacing-m);
  font-size: 1em;
}
footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-cols {
  display: flex;
  gap: var(--spacing-l);
  justify-content: space-between;
  margin-bottom: var(--spacing-m);
  flex-wrap: wrap;
}

.footer-col {
  flex: 1 1 180px;
  min-width: 180px;
}

.footer-col h4 {
  color: var(--color-white);
  font-size: 1em;
  margin-bottom: var(--spacing-xs);
  text-transform: uppercase;
}

.footer-col p, .footer-col a {
  color: var(--color-gray-light);
  text-decoration: none;
  font-size: 0.96em;
  display: block;
  margin-bottom: 6px;
}

.footer-col a:hover {
  color: var(--color-accent);
}

.footer-bottom {
  text-align: center;
  color: #aaa;
  font-size: 0.95em;
  border-top: 1px solid #333;
  padding-top: var(--spacing-s);
  margin-top: var(--spacing-s);
}

/* Buttons */
.btn {
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.6em 1.2em;
  border-radius: var(--pso-border-radius);
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 8px 0;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  font-family: "Raleway", sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn:hover {
  background-color: rgb(211, 8, 44);
  transform: translateY(-1px);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.btn i {
  margin-right: 0.5em;
  font-size: 0.9em;
  opacity: 0.9;
}

/* Button variants */
.btn-secondary {
  background-color: rgba(51, 51, 51, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-secondary:hover {
  background-color: rgb(51, 51, 51);
}

.btn-outline-primary {
  background-color: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

.btn-outline-primary:hover {
  background-color: rgba(211, 8, 44, 0.1);
  color: var(--color-accent);
  transform: translateY(-1px);
}

/* Button sizes */
.btn-sm {
  padding: 0.4em 0.8em;
  font-size: 0.85em;
}

.btn-lg {
  padding: 0.8em 1.6em;
  font-size: 1.1em;
}

/* Subcategories grid */
.subcategories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 28px 36px;
  margin: 48px 0 32px 0;
}

.subcategory-btn {
  background-color: rgba(211, 8, 44, 0.9);
  color: var(--color-white);
  font-size: 1.3em;
  font-weight: 500;
  text-transform: none;
  border: 2px dashed rgba(24, 24, 24, 0.8);
  border-radius: var(--pso-border-radius);
  padding: 18px 0;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.01em;
  margin: 0;
  font-family: "Harabara", Arial, Helvetica Neue, sans-serif;
}

.subcategory-btn:hover, .subcategory-btn.active {
  background-color: rgb(211, 8, 44);
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  border-color: rgba(24, 24, 24, 0.9);
}

/* Tabs */
.tabs {
  display: flex;
  gap: var(--spacing-s);
  margin-bottom: var(--spacing-m);
}

.tab {
  background: rgba(35, 35, 35, 0.9);
  color: var(--color-gray-light);
  padding: var(--spacing-xs) var(--spacing-m);
  border-radius: var(--pso-border-radius) var(--pso-border-radius) 0 0;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.95em;
  border: 1px solid rgba(211, 8, 44, 0.5);
  border-bottom: none;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.02em;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  font-family: "Raleway", sans-serif;
}

.tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: transparent;
  transition: background-color 0.2s ease;
}

.tab.active, .tab:hover {
  background: rgba(211, 8, 44, 0.9);
  color: var(--color-white);
}

.tab.active::after, .tab:hover::after {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Product grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-m);
  margin-bottom: var(--spacing-l);
}

/* Pagination */
.pagination {
  display: flex;
  gap: 8px;
  margin: var(--spacing-m) 0;
}

.pagination button, .pagination span {
  background: rgba(17, 17, 17, 0.8);
  color: var(--color-gray-light);
  border: 1px solid rgba(68, 68, 68, 0.3);
  border-radius: var(--pso-border-radius);
  width: 36px;
  height: 36px;
  font-weight: 500;
  font-size: 0.95em;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-family: "Raleway", sans-serif;
}

.pagination .active, .pagination button:hover {
  background: rgba(211, 8, 44, 0.9);
  color: var(--color-white);
  border-color: rgba(211, 8, 44, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
}

.proshop-title {
  letter-spacing: 1px !important;
  text-transform: initial !important;
}

.category-title {
  padding: 3rem 1rem !important;
  background: var(--color-accent);
  margin: 0;
  background-color: #E90931;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3CradialGradient id='a' cx='800' cy='371' r='60.7%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23E90931'/%3E%3Cstop offset='1' stop-color='%23AD0724'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='800' cy='371' r='60%25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23E80930' stop-opacity='1'/%3E%3Cstop offset='1' stop-color='%23E80930' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1600' height='900'/%3E%3Cg fill='none' stroke='%238D051D' stroke-width='3.9' stroke-miterlimit='10' stroke-opacity='.5'%3E%3Cpolygon points='2277.4 1152 800-1407-677.4 1152'/%3E%3Cpolygon points='800-1372.9-648.8 1136.5 2248.8 1136.5'/%3E%3Cpolygon points='800-1338.8-620.2 1121.1 2220.2 1121.1'/%3E%3Cpolygon points='800-1304.7-591.6 1105.6 2191.6 1105.6'/%3E%3Cpolygon points='800-1270.6-563 1090.2 2163 1090.2'/%3E%3Cpolygon points='800-1236.5-534.4 1074.7 2134.4 1074.7'/%3E%3Cpolygon points='800-1202.4-505.8 1059.3 2105.8 1059.3'/%3E%3Cpolygon points='800-1168.3-477.2 1043.8 2077.2 1043.8'/%3E%3Cpolygon points='800-1134.2-448.6 1028.4 2048.6 1028.4'/%3E%3Cpolygon points='800-1100.1-420 1012.9 2020 1012.9'/%3E%3Cpolygon points='800-1066-391.4 997.5 1991.4 997.5'/%3E%3Cpolygon points='800-1031.9-362.7 982 1962.7 982'/%3E%3Cpolygon points='800-997.8-334.1 966.6 1934.1 966.6'/%3E%3Cpolygon points='800-963.7-305.5 951.1 1905.5 951.1'/%3E%3Cpolygon points='800-929.6-276.9 935.7 1876.9 935.7'/%3E%3Cpolygon points='800-895.5-248.3 920.2 1848.3 920.2'/%3E%3Cpolygon points='800-861.4-219.7 904.7 1819.7 904.7'/%3E%3Cpolygon points='800-827.3-191.1 889.3 1791.1 889.3'/%3E%3Cpolygon points='800-793.2-162.5 873.8 1762.5 873.8'/%3E%3Cpolygon points='800-759.1-133.9 858.4 1733.9 858.4'/%3E%3Cpolygon points='800-725-105.3 842.9 1705.3 842.9'/%3E%3Cpolygon points='800-690.9-76.7 827.5 1676.7 827.5'/%3E%3Cpolygon points='800-656.8-48.1 812 1648.1 812'/%3E%3Cpolygon points='800-622.7-19.4 796.6 1619.4 796.6'/%3E%3Cpolygon points='800-588.6 9.2 781.1 1590.8 781.1'/%3E%3Cpolygon points='800-554.5 37.8 765.7 1562.2 765.7'/%3E%3Cpolygon points='800-520.5 66.4 750.2 1533.6 750.2'/%3E%3Cpolygon points='800-486.4 95 734.8 1505 734.8'/%3E%3Cpolygon points='800-452.3 123.6 719.3 1476.4 719.3'/%3E%3Cpolygon points='800-418.2 152.2 703.9 1447.8 703.9'/%3E%3Cpolygon points='800-384.1 180.8 688.4 1419.2 688.4'/%3E%3Cpolygon points='800-350 209.4 673 1390.6 673'/%3E%3Cpolygon points='800-315.9 238 657.5 1362 657.5'/%3E%3Cpolygon points='800-281.8 266.6 642 1333.4 642'/%3E%3Cpolygon points='800-247.7 295.2 626.6 1304.8 626.6'/%3E%3Cpolygon points='800-213.6 323.9 611.1 1276.1 611.1'/%3E%3Cpolygon points='800-179.5 352.5 595.7 1247.5 595.7'/%3E%3Cpolygon points='800-145.4 381.1 580.2 1218.9 580.2'/%3E%3Cpolygon points='800-111.3 409.7 564.8 1190.3 564.8'/%3E%3Cpolygon points='800-77.2 438.3 549.3 1161.7 549.3'/%3E%3Cpolygon points='800-43.1 466.9 533.9 1133.1 533.9'/%3E%3Cpolygon points='800-9 495.5 518.4 1104.5 518.4'/%3E%3Cpolygon points='800 25.1 524.1 503 1075.9 503'/%3E%3Cpolygon points='800 59.2 552.7 487.5 1047.3 487.5'/%3E%3Cpolygon points='800 93.3 581.3 472.1 1018.7 472.1'/%3E%3Cpolygon points='800 127.4 609.9 456.6 990.1 456.6'/%3E%3Cpolygon points='800 161.5 638.5 441.2 961.5 441.2'/%3E%3Cpolygon points='800 195.6 667.2 425.7 932.8 425.7'/%3E%3Cpolygon points='800 229.7 695.8 410.2 904.2 410.2'/%3E%3Cpolygon points='800 263.8 724.4 394.8 875.6 394.8'/%3E%3Cpolygon points='800 297.9 753 379.3 847 379.3'/%3E%3Cpolygon points='800 332 781.6 363.9 818.4 363.9'/%3E%3C/g%3E%3Crect fill-opacity='.5' fill='url(%23b)' width='1600' height='900'/%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
}
.category-title:after {
  display: none;
}

.subcategories {
  padding: 2rem 1rem;
}
.subcategories .nav-item {
  padding: 0.2rem 1rem;
}
.subcategories .nav-link {
  font-size: 14px;
  font-family: "Harabara", Arial, Helvetica Neue, sans-serif;
  padding: 1rem 15px;
  border: 1px solid #8e3142;
  color: white;
  letter-spacing: 0.03em;
  width: 345px;
  display: inline-block;
  transition: all 0.25s ease;
  border-radius: var(--pso-border-radius);
  background-color: #D3082C;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 2 1'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23D3082C'/%3E%3Cstop offset='1' stop-color='%235A0313'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23600414' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23600414' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='2' y2='2'%3E%3Cstop offset='0' stop-color='%23600414' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23600414' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='2' height='1'/%3E%3Cg fill-opacity='0.5'%3E%3Cpolygon fill='url(%23b)' points='0 1 0 0 2 0'/%3E%3Cpolygon fill='url(%23c)' points='2 1 2 0 0 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center center;
}
.subcategories .nav-link:hover {
  background-color: rgba(252, 23, 49, 0.95);
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px rgba(252, 23, 49, 0.8), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.main-menu:not(.mobile) .menu-category-preview, .main-menu:not(.mobile) .menu-item-preview {
  background: var(--bg-card) !important;
  backdrop-filter: none;
}

.product-cart-attributes ul li:hover, .relevant-product-cart-attributes ul li:hover {
  background-color: var(--color-accent);
}

/* Form styles for dark theme */
/* Form groups */
.form-group {
  margin-bottom: var(--spacing-s);
}
.form-group .form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--color-white);
  font-size: 0.95em;
  letter-spacing: 0.01em;
}
.form-group .help-block, .form-group .hint-block {
  font-size: 0.85em;
  color: var(--color-gray-medium);
  margin-top: 0.4rem;
  display: block;
}
.form-group.has-error .help-block {
  color: #ff6b6b;
}
.form-group.has-error .form-control, .form-group.has-error .form-select {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.25);
}

/* Input fields */
.form-control {
  background-color: var(--pso-dark);
  border: 1px solid var(--color-border);
  border-radius: var(--pso-border-radius);
  color: var(--color-white);
  padding: 0.6rem 0.8rem;
  font-size: 0.95em;
  width: 100%;
  transition: all 0.2s ease;
}
.form-control:focus {
  background-color: var(--pso-dark);
  border-color: rgba(211, 8, 44, 0.7);
  box-shadow: 0 0 0 2px rgba(211, 8, 44, 0.15);
  outline: none;
}
.form-control::placeholder {
  color: var(--color-gray-medium);
  opacity: 0.7;
}
.form-control:disabled, .form-control[readonly] {
  background-color: var(--pso-dark);
  color: var(--color-gray-medium);
  cursor: not-allowed;
}

/* Textarea */
textarea.form-control {
  min-height: 100px;
  resize: vertical;
}

/* Select dropdown */
.form-select,
select {
  background-color: var(--pso-dark);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23aaa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--pso-border-radius);
  color: var(--color-white);
  padding: 0.6rem 2.5rem 0.6rem 0.8rem;
  font-size: 0.95em;
  width: 100%;
  appearance: none;
  transition: all 0.2s ease;
}
.form-select:focus,
select:focus {
  background-color: var(--pso-dark);
  border-color: rgba(211, 8, 44, 0.7);
  box-shadow: 0 0 0 2px rgba(211, 8, 44, 0.15);
  outline: none;
}
.form-select:disabled,
select:disabled {
  background-color: var(--pso-dark);
  color: var(--color-gray-medium);
  cursor: not-allowed;
}
.form-select option,
select option {
  background-color: var(--pso-dark);
  color: var(--color-white);
}

/* Checkboxes and radio buttons */
.form-check {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
.form-check .form-check-input {
  width: 18px;
  height: 18px;
  margin-right: 0.5rem;
  background-color: var(--pso-dark);
  border: 1px solid var(--color-border);
  transition: all 0.2s ease;
}
.form-check .form-check-input:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.form-check .form-check-input:focus {
  border-color: rgba(211, 8, 44, 0.7);
  box-shadow: 0 0 0 2px rgba(211, 8, 44, 0.15);
  outline: none;
}
.form-check .form-check-label {
  font-size: 0.95em;
  color: var(--color-gray-light);
  user-select: none;
}

/* Radio buttons */
.form-check-input[type=radio] {
  border-radius: 50%;
}
.form-check-input[type=radio]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

/* Checkbox */
.form-check-input[type=checkbox] {
  border-radius: var(--pso-border-radius);
}
.form-check-input[type=checkbox]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

/* Input groups */
.input-group {
  display: flex;
  position: relative;
}
.input-group .input-group-text {
  display: flex;
  align-items: center;
  padding: 0.6rem 0.8rem;
  font-size: 0.95em;
  font-weight: 400;
  color: var(--color-gray-light);
  text-align: center;
  background-color: var(--pso-dark);
  border: 1px solid var(--color-border);
  border-radius: var(--pso-border-radius);
}
.input-group .form-control {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .form-control:not(:last-child),
.input-group > .input-group-text:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > .form-control:not(:first-child),
.input-group > .input-group-text:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}

/* Form validation states */
.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: #28a745;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: #ff6b6b;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ff6b6b'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ff6b6b' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Custom file input */
.form-file {
  position: relative;
  display: inline-block;
  width: 100%;
}
.form-file .form-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(1.5em + 1.2rem + 2px);
  margin: 0;
  opacity: 0;
}
.form-file .form-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  display: flex;
  height: calc(1.5em + 1.2rem + 2px);
  border: 1px solid var(--color-border);
  border-radius: var(--pso-border-radius);
  background-color: var(--pso-dark);
}
.form-file .form-file-label .form-file-text {
  display: block;
  flex-grow: 1;
  padding: 0.6rem 0.8rem;
  overflow: hidden;
  font-weight: 400;
  color: var(--color-gray-light);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.form-file .form-file-label .form-file-button {
  display: block;
  padding: 0.6rem 0.8rem;
  color: var(--color-white);
  background-color: rgba(211, 8, 44, 0.8);
  border-left: 1px solid var(--color-border);
  border-radius: 0 var(--pso-border-radius) var(--pso-border-radius) 0;
}

/* Range input */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: var(--pso-border-radius);
  background: rgba(40, 40, 40, 0.8);
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  transition: all 0.2s ease;
}
input[type=range]::-webkit-slider-thumb:hover {
  background: #be0731;
  transform: scale(1.1);
}
input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  transition: all 0.2s ease;
}
input[type=range]::-moz-range-thumb:hover {
  background: #be0731;
  transform: scale(1.1);
}

/* Form buttons */
.form-group .btn {
  margin-top: var(--spacing-s);
}

/* Configurator styles for dark theme */
/* Override text colors and backgrounds for better visibility on dark background */
/* Feature title and labels */
.feature-details .feature-title {
  color: #eee;
  font-size: 16px;
  text-transform: uppercase;
  border-bottom: 3px solid #dd031c;
  display: block;
  margin-bottom: 25px;
}

.feature-details .locked-message {
  color: var(--color-gray-light); /* Lighter gray for better visibility */
}

/* Feature panels */
.feature-panel {
  border-bottom: 1px solid var(--color-border) !important; /* Darker border for visibility */
}

/* Color options */
.color-option-vue-wrapper input:checked + label {
  background-color: var(--bg-card); /* Darker background instead of white */
  color: var(--color-accent); /* Keep accent color for selected items */
}

/* Multi-display items */
.options-carousel.is-touch-device:after {
  background: linear-gradient(to right, rgba(20, 20, 20, 0), var(--bg-card)) !important; /* Dark gradient */
}

.options-carousel .items-container .navigation-item {
  background: var(--bg-card); /* Dark background instead of white */
  color: var(--color-white); /* Ensure icon is visible */
}

.options-carousel .item-wrapper .option-name {
  color: var(--color-white); /* Ensure text is visible */
}

/* Production time price table */
.production-time-price-table-vue-container .table-title {
  border-bottom: 1px solid var(--color-border);
}

.production-time-price-table-vue-container table td span.attr-value {
  color: var(--color-white) !important; /* Override black text */
  border: 1px solid var(--color-border); /* Darker border */
  background-color: var(--bg-card); /* Add dark background */
}

.production-time-price-table-vue-container table td.table-option label {
  color: var(--color-white); /* Override dark gray text */
  background-color: var(--bg-card); /* Add dark background */
}

.production-time-price-table-vue-container table td.table-option input:disabled + label {
  background-color: rgba(35, 35, 35, 0.5); /* Darker disabled background */
  color: var(--color-gray-medium); /* Lighter gray for disabled text */
}

/* Form elements within configurator */
.configurator-container select,
.configurator-container input[type=text],
.configurator-container input[type=number] {
  background-color: var(--bg-card);
  color: var(--color-white);
  border: 1px solid var(--color-border);
}

/* Ensure all text in the configurator is visible */
.configurator-container {
  color: var(--color-white);
}

/* Fix any other potential color issues */
.configurator-container .form-control {
  background-color: var(--bg-card);
  color: var(--color-white);
  border: 1px solid var(--color-border);
}

.configurator-container .btn {
  /* Button styles are already defined in _components.scss */
}

.color-selector label {
  border: 1px solid var(--color-border) !important;
}

.color-option-vue-container .color-option-vue-wrapper .color-selector input:not(:disabled) + label:hover {
  box-shadow: 0 20px 20px -10px black !important;
}

.side-nav-container .table > ul.nav a {
  display: block;
  border: none;
  padding: 0.3rem 0.5rem;
  color: var(--color-white);
}

.side-nav-container .table > ul.nav a .opened, .side-nav-container .table > ul.nav a .closed {
  color: var(--color-accent);
}

.category-index .product-list-wrapper {
  padding: 1rem 2rem;
}

.product-product .configurator-wrapper .feature-panel .feature-description {
  display: none;
}
.product-product .configurator-wrapper .feature-panel .feature-title i {
  color: var(--color-accent);
  font-size: 12px;
}

section.related-products {
  background-color: transparent;
}

.cms-view .cms-content .cms-children,
.cms-view .cms-content .cms-children-links,
.cms-view .cms-content .cms-subpages,
.cms-view .cms-content .cms-links-to-children,
.cms-view .cms-content .cms-buttons,
.cms-view .cms-content .child-cms-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 8px;
  padding: 8px 0 8px 14px;
  border-left: 4px solid var(--color-accent);
}
.cms-view .cms-content .cms-children a,
.cms-view .cms-content .cms-children button,
.cms-view .cms-content .cms-children .btn,
.cms-view .cms-content .cms-children-links a,
.cms-view .cms-content .cms-children-links button,
.cms-view .cms-content .cms-children-links .btn,
.cms-view .cms-content .cms-subpages a,
.cms-view .cms-content .cms-subpages button,
.cms-view .cms-content .cms-subpages .btn,
.cms-view .cms-content .cms-links-to-children a,
.cms-view .cms-content .cms-links-to-children button,
.cms-view .cms-content .cms-links-to-children .btn,
.cms-view .cms-content .cms-buttons a,
.cms-view .cms-content .cms-buttons button,
.cms-view .cms-content .cms-buttons .btn,
.cms-view .cms-content .child-cms-links a,
.cms-view .cms-content .child-cms-links button,
.cms-view .cms-content .child-cms-links .btn {
  display: block;
  width: 100%;
  text-align: left;
  color: var(--color-white);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: var(--pso-border-radius);
  padding: 0.9rem 1.1rem;
  font-size: 1.05rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.cms-view .cms-content .cms-children a:hover,
.cms-view .cms-content .cms-children button:hover,
.cms-view .cms-content .cms-children .btn:hover,
.cms-view .cms-content .cms-children-links a:hover,
.cms-view .cms-content .cms-children-links button:hover,
.cms-view .cms-content .cms-children-links .btn:hover,
.cms-view .cms-content .cms-subpages a:hover,
.cms-view .cms-content .cms-subpages button:hover,
.cms-view .cms-content .cms-subpages .btn:hover,
.cms-view .cms-content .cms-links-to-children a:hover,
.cms-view .cms-content .cms-links-to-children button:hover,
.cms-view .cms-content .cms-links-to-children .btn:hover,
.cms-view .cms-content .cms-buttons a:hover,
.cms-view .cms-content .cms-buttons button:hover,
.cms-view .cms-content .cms-buttons .btn:hover,
.cms-view .cms-content .child-cms-links a:hover,
.cms-view .cms-content .child-cms-links button:hover,
.cms-view .cms-content .child-cms-links .btn:hover {
  background: rgba(211, 8, 44, 0.12);
  border-color: color-mix(in oklab, var(--color-border) 70%, var(--color-accent));
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
  text-decoration: none;
  color: var(--color-white);
}
.cms-view .cms-content .cms-children ul,
.cms-view .cms-content .cms-children ol,
.cms-view .cms-content .cms-children-links ul,
.cms-view .cms-content .cms-children-links ol,
.cms-view .cms-content .cms-subpages ul,
.cms-view .cms-content .cms-subpages ol,
.cms-view .cms-content .cms-links-to-children ul,
.cms-view .cms-content .cms-links-to-children ol,
.cms-view .cms-content .cms-buttons ul,
.cms-view .cms-content .cms-buttons ol,
.cms-view .cms-content .child-cms-links ul,
.cms-view .cms-content .child-cms-links ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: contents;
}
.cms-view .cms-content .cms-children li,
.cms-view .cms-content .cms-children-links li,
.cms-view .cms-content .cms-subpages li,
.cms-view .cms-content .cms-links-to-children li,
.cms-view .cms-content .cms-buttons li,
.cms-view .cms-content .child-cms-links li {
  margin: 0;
}
.cms-view .cms-content .cms-children a i,
.cms-view .cms-content .cms-children .btn i,
.cms-view .cms-content .cms-children-links a i,
.cms-view .cms-content .cms-children-links .btn i,
.cms-view .cms-content .cms-subpages a i,
.cms-view .cms-content .cms-subpages .btn i,
.cms-view .cms-content .cms-links-to-children a i,
.cms-view .cms-content .cms-links-to-children .btn i,
.cms-view .cms-content .cms-buttons a i,
.cms-view .cms-content .cms-buttons .btn i,
.cms-view .cms-content .child-cms-links a i,
.cms-view .cms-content .child-cms-links .btn i {
  margin-right: 0.55em;
  font-size: 0.95em;
  opacity: 0.9;
}

.card-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--pso-primary);
}

.product-card {
  background: transparent;
  border-radius: var(--pso-border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3333333333);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: none;
  position: relative;
}
.product-card .card-price .from-label {
  color: var(--pso-primary);
}
.product-card .card-price .price {
  color: var(--pso-white);
}
.product-card img {
  width: 100%;
  border-radius: var(--pso-border-radius);
  margin-bottom: 0;
  background: #fff;
  object-fit: cover;
  height: 250px;
}
.product-card .weights {
  font-weight: bold;
  font-size: 1.08em;
  margin-bottom: var(--spacing-xs);
}
.product-card .title {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: var(--spacing-xs);
  color: var(--color-white);
}
.product-card .price {
  color: var(--color-accent);
  font-size: 1.4em;
  font-weight: bold;
  text-align: right;
  margin-top: auto;
}
.product-card .label {
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  background: var(--color-accent);
  color: var(--color-white);
  padding: 2px 10px;
  border-radius: var(--pso-border-radius);
  font-size: 0.8em;
  font-weight: bold;
  text-transform: uppercase;
}

.card {
  --bs-card-bg: var(--bg-content) !important;
  border: 1px solid #435161;
}

/*# sourceMappingURL=ruedas-custom.css.map */