/* Hussar Records — bolshopdark's identity on the current OpenCart templates.
   Keep the platform stylesheet intact; visual customizations live here. */
:root {
  --hr-ink: #303030;
  --hr-muted: #626262;
  --hr-dark: #303030;
  --hr-deep: #202020;
  --hr-accent: #626616;
  --hr-accent-dark: #4b4e10;
  --hr-line: #d4d4d0;
  --hr-paper: #fcfcfa;
}

body.hussarrecords {
  background: #dadbd8 url('../image/aluminium.jpg') repeat;
  color: var(--hr-ink);
  font-size: 14px;
  line-height: 1.65;
  min-width: 320px;
}

h1, h2, h3, h4, h5, h6 { color: #292929; line-height: 1.3; }
h1 { font-size: 30px; }
h2 { font-size: 25px; }
h3 { font-size: 20px; }
a, .btn-link { color: var(--hr-accent-dark); }
a:hover, a:focus { color: #363908; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; }
label { font-size: 14px; }
legend { border-color: var(--hr-line); }

/* Visible keyboard focus on both the pale content and the dark header. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #959b35;
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  z-index: 1100;
  top: 8px;
  left: 15px;
  padding: 10px 16px;
  background: #fff;
  color: #252525;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

/* Full-width charcoal bands preserve the original shop's silhouette. */
#top {
  margin: 0;
  padding: 0;
  min-height: 44px;
  background: var(--hr-deep);
  border-bottom: 1px solid #111;
}
#top .container { padding-right: 15px; padding-left: 15px; }
#top .btn-link, #top-links li, #top-links a {
  color: #cececa;
  text-shadow: none;
  text-decoration: none;
}
#top .btn-link:hover, #top .btn-link:focus,
#top-links a:hover, #top-links a:focus { color: #fff; }
#top .btn-link { min-height: 44px; font-size: 12px; }
#top-links { padding-top: 0; }
#top-links .list-inline { display: flex; margin: 0; }
#top-links .list-inline > li { padding: 0; }
#top-links .list-inline > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 44px;
  gap: 6px;
  padding: 8px;
  font-size: 12px;
}
#top-links .fa { color: #b8bc78; }
#top .btn-link strong { color: #d6d99b; }
#top .dropdown-menu { background: #282828; border-color: #414141; }
#top .dropdown-menu li > a,
#top .dropdown-menu .btn-link { color: #e5e5df; padding: 10px 16px; }
#top .dropdown-menu li > a:hover,
#top .dropdown-menu li > a:focus,
#top #form-currency .currency-select:hover,
#top #form-currency .currency-select:focus,
#top #form-language .language-select:hover,
#top #form-language .language-select:focus {
  background: #42442d;
  color: #fff;
  text-shadow: none;
}
.dropdown-menu { border-radius: 4px; box-shadow: 0 8px 24px #0003; }
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus {
  background: #edeee2;
  color: #303218;
}

header { background: var(--hr-dark); border-bottom: 1px solid #171717; }
.header-main { display: flex; align-items: center; padding-top: 22px; padding-bottom: 22px; }
.header-main::before, .header-main::after { display: none; }
#logo { margin: 0; }
#logo img { max-height: 112px; width: auto; object-fit: contain; }
#logo h1 { margin: 0; font-size: 28px; }
#logo h1 a { color: #f6f6ee; }
#search, #cart { margin: 0; }
#search .input-lg { height: 46px; background: #f9f9f5; font-size: 14px; border-color: #171717; }
#search .btn-lg {
  min-width: 52px;
  height: 46px;
  padding: 12px 16px;
  background: #e3e4d8;
  border-color: #171717;
  color: #35371d;
  text-shadow: none;
}
#search .btn-lg:hover, #search .btn-lg:focus { background: #cdd09f; }
#cart > .btn {
  min-height: 46px;
  padding: 12px;
  background: linear-gradient(#454545, #242424);
  border: 1px solid #171717;
  font-size: 13px;
  white-space: normal;
  color: #f1f1eb;
  text-shadow: none;
}
#cart > .btn .fa { color: #c4c88b; }
#cart.open > .btn, #cart > .btn:hover, #cart > .btn:focus {
  color: #fff;
  background: #44463a;
  border-color: #85895c;
}
#cart .dropdown-menu {
  width: 420px;
  max-width: calc(100vw - 30px);
  min-width: 100%;
  max-height: min(70vh, 650px);
  background: var(--hr-paper);
  color: var(--hr-ink);
  border: 1px solid #bfc0b7;
  padding: 14px;
}
#cart .dropdown-menu li > div { min-width: 0; padding: 0; }
#cart .dropdown-menu .table { font-size: 12px; margin-bottom: 12px; }
#cart .dropdown-menu td { white-space: normal; vertical-align: middle; overflow-wrap: anywhere; }
#cart .dropdown-menu td img { max-width: 45px; }
#cart .dropdown-menu p { margin: 8px 0; }

.menu-wrapper {
  margin-bottom: 24px;
  background: linear-gradient(#242424, #161616);
  border-bottom: 1px solid #0f0f0f;
  box-shadow: 0 3px 8px #0002;
}
#menu {
  min-height: 48px;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
#menu .navbar-collapse { padding: 0; }
#menu .nav > li > a {
  padding: 15px 12px;
  color: #d7d7d1;
  font-size: 13px;
  font-weight: 600;
  text-shadow: none;
}
#menu .nav > li > a:hover, #menu .nav > li > a:focus,
#menu .nav > li.open > a { background: #383a27; color: #fff; }
#menu .nav > li > a .fa { margin-left: 4px; color: #b6b97e; }
#menu .dropdown-menu {
  padding: 8px 0 0;
  margin-top: 0;
  background: #242424;
  border: 1px solid #45453d;
  max-width: calc(100vw - 30px);
}
#menu .dropdown-inner { display: flex; }
#menu .dropdown-inner ul { display: block; }
#menu .dropdown-inner a { min-width: 180px; padding: 9px 18px; color: #dfdfd8; font-size: 13px; }
#menu .dropdown-inner li a:hover, #menu .dropdown-inner li a:focus {
  background: #444631;
  color: #fff;
}
#menu .see-all { padding: 12px 18px; border-color: #45453d; color: #d1d59b; }
#menu .see-all:hover, #menu .see-all:focus { color: #fff; background: #444631; }
#menu #category { color: #e5e5dd; text-shadow: none; font-size: 15px; }
#menu .btn-navbar {
  min-width: 44px;
  min-height: 44px;
  margin: 4px 0;
  background: #45472c;
  border: 1px solid #6e7149;
  color: #fff;
}
#menu .btn-navbar:hover, #menu .btn-navbar:focus { background: var(--hr-accent); }

/* Pale content panels keep long descriptions and forms legible over the metal. */
body > .container { margin-bottom: 28px; }
#content { min-height: 340px; margin-top: 0; }
#product-category #content, #product-product #tab-description,
#information-information #content { font-size: 14px; }
#content > h1, #content > h2, #content > h3 { margin-top: 8px; font-weight: 600; }
#content > h3 { margin-top: 28px; margin-bottom: 20px; }
#common-home #content > h3:first-child { margin-top: 8px; }
body > .container:not(#common-home) > .row > #content {
  padding-top: 22px;
  padding-bottom: 22px;
  background: rgba(252, 252, 250, .96);
  border: 1px solid #c8c9c3;
  border-radius: 6px;
  box-shadow: 0 2px 6px #0000000d;
}
.breadcrumb {
  padding: 12px 16px;
  margin-bottom: 22px;
  background: rgba(252, 252, 250, .9);
  border: 1px solid #c8c9c3;
  border-radius: 4px;
}
.breadcrumb > li { padding: 0 18px; overflow-wrap: anywhere; }
.breadcrumb > li:first-child { padding-left: 0; }
.breadcrumb > li:after { border-color: #b3b5a6; }
.breadcrumb a { font-size: 12px; color: #494b34; }
.breadcrumb > li:last-child a { color: #333; }
.list-group a { background: var(--hr-paper); color: #444; padding: 12px 15px; border-color: #cecec6; }
.list-group a.active, .list-group a.active:hover, .list-group a:hover, .list-group a:focus {
  background: #e7e8d9;
  border-color: #c6c9ad;
  color: #363918;
  text-shadow: none;
}
.well, .panel, .table { background-color: var(--hr-paper); }
.panel-default { border-color: var(--hr-line); }
.panel-default > .panel-heading { color: #35372b; background: #eeeee7; border-color: var(--hr-line); }
.panel-title { font-size: 16px; }
.table > thead > tr > td, .table > thead > tr > th { background: #eeeee7; }
.table > tbody > tr > td { vertical-align: middle; }
.form-control { border-color: #bfc0b6; box-shadow: none; color: #303030; }
.form-control:focus { border-color: #7f8540; box-shadow: 0 0 0 3px #8c944026; }
select.form-control, textarea.form-control, input.form-control,
.input-group input, .input-group select, .input-group .input-group-addon { font-size: 14px; }
.input-group-addon { background: #eeeee7; border-color: #bfc0b6; color: #444; }
.btn { min-height: 36px; border-radius: 4px; }
.btn-xs { min-height: 28px; }
.btn-default { color: #444; background: linear-gradient(#fafaf6, #e5e5dc); border-color: #bfc0b6; text-shadow: none; }
.btn-default:hover, .btn-default:focus, .btn-default.active { color: #292c15; background: #dbdebf; border-color: #8d925c; }
.btn-primary {
  color: #fff;
  background: linear-gradient(#717627, #515511);
  border-color: #4c5014;
  text-shadow: none;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary.active, .btn-primary:active:focus, .btn-primary:active:hover {
  color: #fff;
  background: #44490d;
  border-color: #393e07;
}
.btn-primary.disabled, .btn-primary[disabled] { background: #656a24; border-color: #4c5014; }
.btn-primary:disabled, .btn-primary:disabled:hover, .btn-primary:disabled:focus {
  color: #626659;
  background: #dedfd8;
  border-color: #c7c9bf;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}
.pagination > li > a, .pagination > li > span { color: #44482a; border-color: #c9cbbd; background: #fcfcf8; }
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > span:hover, .pagination > .active > a:hover {
  color: #fff;
  background: var(--hr-accent);
  border-color: var(--hr-accent);
}
.pagination > li > a:hover, .pagination > li > a:focus { background: #e4e6cf; color: #333710; }

/* White record sleeves, softly shaded captions and the familiar vinyl price tag. */
.product-cards { display: flex; flex-wrap: wrap; }
.product-cards::before, .product-cards::after { display: none; }
.product-cards > .product-layout { display: flex; }
.product-cards > .product-layout > .product-thumb { width: 100%; }
.product-thumb {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
  border: 1px solid #c6c7be;
  border-radius: 12px 12px 5px 5px;
  background: var(--hr-paper);
  overflow: hidden;
  box-shadow: 0 3px 8px #00000024;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.product-thumb:hover { border-color: #93976c; box-shadow: 0 5px 14px #00000030; }
.product-thumb .image { position: relative; overflow: hidden; flex: none; float: none; margin: 0; padding: 16px; background: #fff; }
.product-ribbon {
  position: absolute;
  z-index: 1;
  top: 22px;
  left: -38px;
  width: 150px;
  padding: 5px 0;
  transform: rotate(-45deg);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 2px 4px #0003;
  pointer-events: none;
}
.product-ribbon-new { background: linear-gradient(90deg, #245dc1, #087b92); }
.product-ribbon-sold-out { background: #595b50; }
.product-thumb .image a { opacity: 1; }
.product-thumb .image a:focus-visible { outline-offset: 2px; }
.product-thumb .image img { width: 100%; max-height: 228px; aspect-ratio: 1; object-fit: contain; }
.product-thumb > div:not(.image):not(.caption):not(.button-group) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.product-thumb .caption {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 16px;
  background: linear-gradient(#fcfcfa, #eeeeea);
}
.product-thumb h4 { margin: 0 0 10px; line-height: 1.5; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.product-thumb h4 a { color: #303030; }
.product-thumb h4 a:hover, .product-thumb h4 a:focus { color: var(--hr-accent-dark); text-decoration: underline; }
.product-thumb .caption > p:not(.price) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-bottom: 14px;
  color: var(--hr-muted);
  font-size: 13px;
  line-height: 1.6;
}
.product-thumb .price {
  position: relative;
  min-height: 72px;
  margin: auto 0 0;
  padding: 14px 72px 14px 14px;
  background: #d5d6d0;
  border-radius: 4px 38px 38px 4px;
  color: #303222;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.product-thumb .price::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 7px;
  width: 58px;
  height: 58px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #171717 0 3px, #fafaf7 3.5px 12px, #151515 12.5px 17px, #292929 17.5px 18px, #151515 18.5px 22px, #292929 22.5px 23px, #151515 23.5px 26px, #fafaf7 26.5px 29px);
  box-shadow: 0 1px 3px #0003;
  pointer-events: none;
}
.product-thumb .price-new { font-weight: 700; }
.product-thumb .price-old { display: block; margin: 3px 0 0; color: #5d5e57; font-size: 13px; font-weight: 400; }
.product-thumb .price-tax { color: #55564e; font-size: 11px; font-weight: 400; line-height: 1.5; }
.product-thumb .rating { padding: 6px 0 12px; }
.product-thumb .button-group { display: flex; flex: none; border: 0; border-top: 1px solid #d2d3c8; background: #e8e9e2; overflow: visible; }
.product-thumb .button-group button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  float: none;
  width: auto;
  flex: 1;
  min-width: 44px;
  min-height: 44px;
  padding: 9px 6px;
  background: transparent;
  color: #555742;
  font-size: 11px;
  line-height: 1.5;
  text-transform: none;
}
.product-thumb .button-group button:first-child { flex: 3; color: #3f441c; }
.product-thumb .button-group button + button { width: auto; border-color: #d2d3c8; }
.product-thumb .button-group button:first-child .fa { color: #565e1e; }
.product-thumb .button-group button:hover, .product-thumb .button-group button:focus { color: #fff; background: var(--hr-accent); }
.product-thumb .button-group button:hover .fa, .product-thumb .button-group button:focus .fa { color: #fff; }
.product-thumb .button-group button:focus-visible { outline-offset: -4px; }
.product-thumb .button-group button:first-child span { display: inline !important; }
.product-thumb .button-group button:disabled,
.product-thumb .button-group button:disabled:hover,
.product-thumb .button-group button:disabled:focus {
  color: #626659;
  background: #dedfd8;
  cursor: not-allowed;
}
.product-thumb .button-group button:disabled .fa { color: inherit; }
.product-list .product-thumb .caption { margin: 0; }
.product-list .product-thumb .button-group { border-left: 0; }
.thumbnails a.thumbnail, .thumbnails .image-additional a { border-color: #c6c8b8; background: #fff; border-radius: 6px; }
.thumbnails a.thumbnail:hover, .thumbnails a.thumbnail:focus { border-color: #7d8447; }
.thumbnails > li:first-child img { max-width: 100%; height: auto; }
.product-main-image { position: relative; overflow: hidden; margin-bottom: 20px; border-radius: 6px; }
.product-main-image > .thumbnail { margin-bottom: 0; }
.product-main-image > a:focus-visible { outline-offset: -4px; }
.nav-tabs { border-color: #c6c8b8; }
.nav-tabs > li > a { color: #55583a; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { color: #303218; border-color: #c6c8b8 #c6c8b8 transparent; background: #fcfcfa; }
.tab-content { padding: 8px 0 20px; overflow-wrap: anywhere; }
.tab-content img { max-width: 100%; height: auto; }
#product-product h1 { font-size: 25px; }
#product-product #button-cart { min-height: 48px; }
#product-product .rating .fa-stack { width: 1.8em; }
.swiper-viewport { border-color: #c8c9c0; border-radius: 6px; box-shadow: 0 3px 8px #0002; }

footer {
  margin-top: 40px;
  padding: 32px 0 20px;
  border-top: 8px solid var(--hr-deep);
  background: var(--hr-dark);
  color: #d2d2cb;
}
footer h5 { margin-bottom: 16px; font-size: 15px; font-weight: 600; color: #f4f4e9; }
footer a { display: inline-block; padding: 4px 0; color: #cecec6; font-size: 13px; }
footer a:hover, footer a:focus { color: #e2e6ad; text-decoration: underline; }
footer hr { margin-top: 26px; border-top: 1px solid #484842; border-bottom: 0; }
footer .powered, footer .powered a { color: #b9b9b1; font-size: 12px; }
footer .footer-details { display: flex; }
footer .footer-details > p { flex: 0 0 50%; min-width: 0; margin: 0; overflow-wrap: anywhere; }
footer .shop { padding-right: 12px; text-align: left; }
footer .support { padding-left: 12px; text-align: right; }
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  width: 44px;
  height: 44px;
  min-height: 44px;
  border: 1px solid #858a4c;
  border-radius: 5px;
  background: #353829;
  color: #fff;
  box-shadow: 0 3px 8px #0003;
}
.back-to-top:hover, .back-to-top:focus { background: var(--hr-accent); }
.back-to-top[hidden] { display: none; }

@media (min-width: 768px) {
  .product-list .product-thumb { display: grid; grid-template-columns: minmax(160px, 24%) minmax(0, 1fr); }
  .product-list .product-thumb .image { float: none; align-self: stretch; display: flex; align-items: center; justify-content: center; }
  .product-list .product-thumb .image a { width: 100%; }
  .product-list .product-thumb .price { max-width: 260px; }
  .product-layout:not(.product-list) .product-thumb h4 { min-height: 63px; }
  .product-layout:not(.product-list) .product-thumb .caption > p:not(.price) { min-height: 62px; }
  .product-grid .product-thumb .caption { min-height: 0; padding: 16px; }
  #menu .dropdown-inner { max-height: min(65vh, 560px); overflow: auto; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  #menu .nav > li > a { padding: 12px 10px; font-size: 12px; }
  .header-main > .col-sm-4 { width: 32%; }
  .header-main > .col-sm-5 { width: 40%; }
  .header-main > .col-sm-3 { width: 28%; }
  .product-thumb .price { padding-left: 10px; padding-right: 62px; font-size: 18px; }
  .product-thumb .price::after { width: 48px; height: 48px; background: radial-gradient(circle, #171717 0 2px, #fafaf7 2.5px 10px, #151515 10.5px 20px, #fafaf7 20.5px 24px); }
}

@media (max-width: 767px) {
  body.hussarrecords { font-size: 14px; }
  #top .container { display: flex; flex-wrap: wrap; align-items: center; }
  #top .container::before, #top .container::after { display: none; }
  #top .btn-link { padding-right: 7px; padding-left: 7px; }
  #top-links { margin-left: auto; }
  #top-links .list-inline > li > a { min-width: 36px; padding: 8px; }
  #top-links .dropdown-menu { right: 0; left: auto; }
  .header-main { flex-wrap: wrap; row-gap: 18px; padding-top: 22px; padding-bottom: 20px; }
  .header-main > .col-sm-4 { width: 100%; }
  .header-main > .col-sm-5 { width: 60%; padding-right: 6px; }
  .header-main > .col-sm-3 { width: 40%; padding-left: 6px; }
  #logo img { margin: 0 auto; max-height: 100px; }
  #logo h1 { text-align: center; }
  #cart > .btn { min-height: 46px; font-size: 11px; padding: 8px 6px; }
  #cart .dropdown-menu { width: calc(100vw - 30px); min-width: 0; }
  #menu .navbar-header { margin: 0; }
  #menu .navbar-collapse { margin: 0; border-top-color: #424336; }
  #menu .navbar-nav { margin: 0; }
  #menu #category { padding-top: 14px; padding-left: 0; }
  #menu .nav > li > a { padding: 13px 12px; border-top: 1px solid #ffffff0d; font-size: 14px; }
  #menu .dropdown-menu {
    position: static;
    float: none;
    max-width: 100%;
    margin: 0 !important;
    padding: 0;
    background: #292a22;
    border: 0;
    box-shadow: none;
  }
  #menu .dropdown:not(.open) > .dropdown-menu { display: none; }
  #menu .dropdown.open > .dropdown-menu { display: block; }
  #menu .dropdown-inner { display: block; max-height: 55vh; overflow: auto; }
  #menu .dropdown-inner ul { display: block; }
  #menu .dropdown-inner a { display: block; min-width: 0; white-space: normal; padding: 11px 22px; }
  #menu .see-all { padding: 13px 22px; }
  .menu-wrapper { margin-bottom: 18px; }
  body > .container:not(#common-home) > .row > #content { border-radius: 0; border-right: 0; border-left: 0; padding-top: 18px; }
  .breadcrumb { padding: 10px 12px; }
  .breadcrumb > li { padding: 0 10px; }
  .breadcrumb > li:after { right: -4px; width: 18px; height: 18px; top: 1px; }
  h1, #product-product h1 { font-size: 24px; }
  .product-thumb .caption, .product-grid .product-thumb .caption,
  .product-list .product-thumb .caption { padding: 16px; min-height: 0; margin: 0; }
  .product-thumb .image img { max-height: 280px; }
  .product-thumb .price { min-height: 72px; }
  .product-thumb .button-group button { min-height: 48px; }
  .product-thumb .button-group button:first-child { flex: 3; }
  .product-thumb .button-group button + button { flex: 1; }
  .form-control, select.form-control, input.form-control, textarea.form-control,
  #search .input-lg, .input-group input, .input-group select { font-size: 16px; }
  .form-control { min-height: 40px; }
  footer { margin-top: 28px; padding-top: 26px; }
  footer .row { display: flex; flex-wrap: wrap; }
  footer .row > .col-sm-3 { width: 50%; margin-bottom: 18px; }
  footer .row::before, footer .row::after { display: none; }
  footer a { padding: 7px 0; }
  footer h5 { margin-bottom: 10px; }
  .back-to-top { right: 15px; bottom: 15px; }
}

@media (max-width: 359px) {
  #top-links .list-inline > li > a { min-width: 32px; padding: 6px; }
  #top .btn-link { padding-left: 5px; padding-right: 5px; }
  .header-main > .col-sm-5, .header-main > .col-sm-3 { width: 100%; padding-left: 15px; padding-right: 15px; }
  footer .row > .col-sm-3 { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
}