/*
 * Sylprotec brand layer for the PS8 classic theme.
 * Keep this file focused on identity and layout polish.
 */

:root {
  --syl-red: #ca312b;
  --syl-red-dark: #a52722;
  --syl-black: #1d1d1d;
  --syl-black-soft: #2a2a2a;
  --syl-text: #333;
  --syl-muted: #666;
  --syl-border: #e7e2dd;
  --syl-surface: #f7f5f3;
}

body {
  color: var(--syl-text);
}

a {
  color: var(--syl-red);
}

a:focus,
a:hover {
  color: var(--syl-red-dark);
}

.h1,
.h2,
.h3,
h1,
h2,
h3 {
  text-transform: none;
}

.btn-primary,
.btn-secondary,
.btn-unstyle:focus .expand-more,
.blockcart .header a:hover,
.cart-grid-body a.label:hover,
.cart-grid-right a:hover,
.footer-container li a:hover,
.product-miniature .product-title a:hover,
.tabs .nav-tabs .nav-link.active,
#header a:hover,
#header .header-nav .blockcart.active,
#header .header-nav .blockcart:hover,
#search_widget button[type="submit"] {
  color: #fff;
}

.btn-primary,
#search_widget button[type="submit"] {
  background: var(--syl-red);
  border-color: var(--syl-red);
}

.btn-primary:focus,
.btn-primary:hover,
#search_widget button[type="submit"]:focus,
#search_widget button[type="submit"]:hover {
  background: var(--syl-red-dark);
  border-color: var(--syl-red-dark);
}

.btn-secondary {
  background: var(--syl-black);
  border-color: var(--syl-black);
}

.btn-secondary:focus,
.btn-secondary:hover {
  background: #000;
  border-color: #000;
}

#header {
  border-bottom: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

#header .header-nav {
  border-bottom: 1px solid var(--syl-border);
  color: var(--syl-muted);
  font-size: 0.92rem;
}

#header .header-nav .row,
#header .header-nav .hidden-sm-down,
#header .header-nav .hidden-sm-down > div {
  display: flex;
  align-items: center;
  width: 100%;
}

#header .header-nav .hidden-sm-down > div {
  min-height: 42px;
}

#header .header-top {
  padding-top: 0.85rem;
  padding-bottom: 0;
}

#header .header-main-row {
  align-items: center;
}

#header .header-top .search-widget form {
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--syl-border);
  border-radius: 0;
  background: #fff;
}

#header .header-top .search-widget input[type="text"] {
  min-height: 44px;
  padding: 0 4.1rem 0 1rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}

#header .header-top .search-widget input[type="text"]::placeholder {
  color: #9a9a9a;
}

#header .header-top .search-widget .material-icons.search {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 100%;
  margin: 0;
  background: var(--syl-red);
  color: #fff;
  font-size: 1.5rem;
  pointer-events: none;
}

#header .header-top .search-widget .material-icons.clear {
  position: absolute;
  top: 50%;
  right: 64px;
  transform: translateY(-50%);
  color: #999;
  font-size: 1rem;
}

#header #_desktop_logo {
  display: flex;
  align-items: center;
  min-height: 104px;
  padding-right: 1.5rem;
}

#header #_desktop_logo h1,
#header #_desktop_logo a {
  display: flex;
  align-items: center;
  margin: 0;
}

#header #_desktop_logo img {
  max-width: 100%;
  max-height: 96px;
  width: auto;
}

#header .header-top-right {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 0.55rem;
  align-content: center;
}

#header .header-top-right > .row {
  width: 100%;
}

#header .header-actions-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: end;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
}

#header .header-actions-row > div {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 0 0 auto;
}

#header .header-search-slot {
  display: flex;
  align-items: center;
  justify-content: stretch;
  min-width: 240px;
  max-width: 320px;
  flex: 0 1 320px;
}

#header .header-search-slot #search_widget,
#header .header-actions-row #search_widget {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

#header .header-search-slot .search-widget,
#header .header-actions-row .search-widget {
  width: 100%;
}

#header .header-search-slot .search-widget form,
#header .header-actions-row .search-widget form {
  width: 100%;
  background: #fff;
}

#_desktop_language_selector .language-selector-wrapper,
#_desktop_language_selector .language-selector,
#_desktop_currency_selector .currency-selector,
#_desktop_user_info .user-info,
#_desktop_cart .blockcart {
  display: flex;
  align-items: center;
}

#_desktop_language_selector button,
#_desktop_currency_selector button,
#_desktop_user_info a,
#_desktop_cart .header {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0 0.9rem;
  border: 1px solid var(--syl-border);
  border-radius: 999px;
  background: #fff;
  color: var(--syl-black);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

#_desktop_language_selector button:hover,
#_desktop_currency_selector button:hover,
#_desktop_user_info a:hover,
#_desktop_cart .header:hover {
  border-color: var(--syl-red);
  color: var(--syl-red);
  background: #fff;
}

#_desktop_language_selector .expand-more,
#_desktop_currency_selector .expand-more,
#_desktop_user_info .material-icons,
#_desktop_cart .material-icons {
  font-size: 1.15rem;
}

#_desktop_cart .header a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: inherit;
}

#_desktop_cart .cart-products-count {
  color: var(--syl-muted);
  font-weight: 700;
}

#_desktop_language_selector .dropdown-menu,
#_desktop_currency_selector .dropdown-menu {
  display: none;
  right: 0;
  left: auto;
}

#_desktop_language_selector .language-selector.open .dropdown-menu,
#_desktop_language_selector .language-selector.show .dropdown-menu,
#_desktop_currency_selector .currency-selector.open .dropdown-menu,
#_desktop_currency_selector .currency-selector.show .dropdown-menu {
  display: block;
}

#_desktop_user_info,
#_desktop_cart,
#_desktop_language_selector,
#_desktop_currency_selector {
  flex: 0 0 auto;
}

#_desktop_currency_selector #currency-selector-label {
  display: none;
}

#header .header-menu-row {
  width: 100%;
  padding-top: 0.15rem;
  min-height: 56px;
}

#header .menu {
  display: block;
  position: relative;
  background: var(--syl-black);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  z-index: 40;
}

#header .menu.is-sticky-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  z-index: 1000;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

#header .menu > ul.top-menu {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  width: fit-content;
  max-width: calc(100% - 1.5rem);
  margin: 0 auto;
  padding: 0 0.2rem;
}

#header .menu > ul.top-menu > li {
  display: flex;
  align-items: stretch;
  position: static;
  flex: 0 1 auto;
  min-width: 0;
}

#header .menu > ul.top-menu > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0.65rem 0.45rem;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-transform: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: normal;
}

#header .menu .popover {
  position: absolute;
  top: 100%;
  bottom: auto;
  left: 50%;
  right: auto;
  width: min(95vw, 1170px);
  transform: translateX(-50%);
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  border: 0;
  border-radius: 0;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
  background: #fff;
  z-index: 1040;
}

#header .menu > ul.top-menu > li:hover > a,
#header .menu > ul.top-menu > li.current > a {
  background: var(--syl-red);
  text-decoration: none;
}

#header .top-menu .sub-menu {
  width: 100%;
  margin-left: 0;
  padding: 1.4rem 0 1.6rem;
  border-top: 4px solid var(--syl-red);
  background: #fff;
}

#header .menu .popover > ul.top-menu {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6rem 1.25rem;
  width: 100%;
  margin: 0;
  padding: 0 1.5rem;
}

#header .menu .popover > ul.top-menu > li {
  min-width: 0;
}

#header a.dropdown-item.dropdown-submenu,
#header .sub-menu .category a.dropdown-item {
  display: block;
  color: var(--syl-text);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
}

#header a.dropdown-item.dropdown-submenu:hover,
#header .sub-menu .category a.dropdown-item:hover {
  color: var(--syl-red);
}

#header .menu .sub-menu ul[data-depth="1"] > li {
  margin-bottom: 0.25rem;
}

#header .menu .sub-menu ul[data-depth="1"] > li > a {
  display: block;
  padding: 0;
}

#header .menu .sub-menu ul[data-depth="2"] {
  margin-top: 0.85rem;
}

#header .menu .sub-menu ul[data-depth="2"] > li {
  margin-bottom: 0.5rem;
}

#header .menu .sub-menu ul[data-depth="2"] > li > a {
  color: #555;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: normal;
}

#header .menu .sub-menu ul[data-depth="2"] > li > a:hover {
  color: var(--syl-red);
}

#_desktop_top_menu .top-menu a[data-depth="1"]::after,
.products-section-title::after,
.featured-products .products-section-title::after,
.product-accessories .products-section-title::after,
.block-category h1::after,
.footer-container .h3::after,
.footer-container .h4::after {
  content: "";
  display: block;
  border-top: 3px dashed var(--syl-red);
  transform: skewX(45deg);
}

#_desktop_top_menu .top-menu a[data-depth="1"]::after {
  width: 24px;
  margin: 0.45rem auto 0;
}

.carousel {
  margin-bottom: 1.5rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.page-home .carousel {
  background: #fff;
}

.page-home .carousel .carousel-inner,
.page-home .carousel .carousel-item {
  height: auto !important;
  min-height: 0;
}

.page-home .carousel .carousel-item > a,
.page-home .carousel .carousel-item figure {
  display: block;
  margin: 0;
}

.page-home .carousel .carousel-item img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 320px !important;
  min-height: 0;
  object-fit: cover;
  object-position: center center;
  background: #fff;
}

.page-home .carousel .carousel-item .caption {
  bottom: 1.9rem;
  left: 4.5rem;
  max-width: 30rem;
  padding: 0;
}

.page-home .carousel .carousel-item .caption .display-1 {
  font-size: 2.9rem;
  font-weight: 800;
  line-height: 0.95;
  text-transform: none;
}

.page-home .carousel .carousel-item .caption .caption-description p {
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.35;
}

.page-home .carousel .carousel-indicators {
  display: none;
}

.page-home .carousel .direction {
  z-index: 2;
}

.page-home .carousel .carousel-control {
  opacity: 1;
}

.page-home .carousel .carousel-control .icon-next i,
.page-home .carousel .carousel-control .icon-prev i {
  color: #fff;
  font-size: 3rem;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
}

.page-home .carousel .carousel-control:hover .icon-next i,
.page-home .carousel .carousel-control:hover .icon-prev i {
  color: var(--syl-red);
}

.page-home .block-category,
.page-home #custom-text,
.page-home .featured-products,
.page-home .banner,
.page-home section,
.page-home .products-section-title {
  position: relative;
}

.page-home .block-category,
.page-home #custom-text,
.page-home .featured-products,
.page-home .banner,
.page-home #js-product-list,
.page-home .special-products,
.page-home .new-products,
.page-home .best-sales {
  margin-bottom: 1.75rem;
}

.page-home .products-section-title,
#products .products-section-title,
.featured-products .products-section-title,
.product-accessories .products-section-title {
  margin-bottom: 1.35rem;
  color: var(--syl-black);
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  text-transform: none;
}

.products-section-title::after,
.featured-products .products-section-title::after,
.product-accessories .products-section-title::after {
  width: 56px;
  margin: 0.7rem auto 0;
}

.page-home .card,
.product-miniature .thumbnail-container,
.block-category,
.cart-grid .card,
#content.page-content {
  border: 1px solid var(--syl-border);
  border-radius: 0;
  box-shadow: none;
}

.block-category {
  background: var(--syl-surface);
}

.page-home #custom-text,
.page-home .banner,
.page-home .featured-products,
.page-home .special-products,
.page-home .new-products,
.page-home .best-sales {
  padding-top: 0;
}

.page-home #custom-text {
  padding: 2.25rem 2.5rem;
  text-align: center;
}

.page-home #custom-text h2 {
  margin-bottom: 0.75rem;
  color: var(--syl-black);
  font-size: 1.9rem;
  font-weight: 800;
  text-transform: none;
}

.page-home #custom-text p {
  max-width: 46rem;
  margin-right: auto;
  margin-left: auto;
  color: #555;
}

.page-home .banner img {
  display: block;
  width: 100%;
  height: auto;
}

.page-home .products {
  row-gap: 1.25rem;
}

.page-home .product-miniature .thumbnail-container {
  margin-bottom: 0;
}

.page-home .product-miniature .thumbnail-top {
  padding: 0.75rem;
}

.page-home .product-miniature .product-description {
  padding: 0.9rem 0.85rem 1.05rem;
}

.page-home .product-miniature .product-title {
  min-height: 2.8rem;
  margin-bottom: 0.35rem;
}

.page-home .product-miniature .product-title a {
  font-size: 0.96rem;
  line-height: 1.3;
}

.page-home .product-miniature .product-price-and-shipping {
  margin-top: 0.25rem;
}

.page-home .all-product-link {
  margin-top: 0.5rem;
}

.block-category-inner {
  gap: 1.5rem;
}

.block-category h1 {
  color: var(--syl-black);
  font-weight: 800;
}

.block-category h1::after {
  width: 70px;
  margin: 1rem 0;
}

.product-price,
.regular-price,
.current-price-value,
.price {
  color: var(--syl-red);
}

.product-flags {
  top: 0.75rem;
  left: 0.75rem;
}

.product-flag,
.product-flag.new,
.product-flag.on-sale,
.product-flag.discount,
.discount-percentage,
.discount-amount {
  background: var(--syl-red);
  color: #fff;
}

.page-product .product-flags li.product-flag.discount,
.page-product .product-flags li.product-flag.discount-amount,
.page-product .product-flags li.product-flag.discount-percentage,
.page-product .product-flags li.product-flag.on-sale,
.page-product .has-discount .discount {
  background: var(--syl-red);
  color: #fff;
}

.product-flag {
  padding: 0.45rem 0.7rem;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.page-product .product-reference {
  padding-top: 0.25rem;
  color: #7a7a7a;
  font-size: 1rem;
}

.page-product .product-reference .label {
  margin-bottom: 0;
  color: #7a7a7a;
  font-weight: 400;
}

.page-product .product-reference strong {
  color: var(--syl-black);
  font-weight: 700;
}

.page-product .product-prices div {
  font-size: 28px;
  font-weight: 500;
}

.page-product .current-price-value {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
}

.page-product .product-discount .regular-price {
  font-size: 0.95rem;
  font-weight: 500;
}

.page-product .product-without-taxes {
  display: none;
}

.page-product .tax-shipping-delivery-label {
  display: none;
}

.discount-percentage,
.discount-amount {
  display: inline-block;
  padding: 0.2rem 0.45rem;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.1;
}

.product-miniature .product-title a,
.h3.product-title a {
  color: var(--syl-black);
  font-weight: 700;
}

.tabs .nav-tabs .nav-link.active {
  border-bottom: 3px dashed var(--syl-red);
  color: var(--syl-black);
}

.block_newsletter {
  max-width: none;
  padding: 0;
  background: transparent;
}

.block_newsletter #block-newsletter-label {
  color: #fff !important;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

.block_newsletter p,
.block_newsletter .conditions,
.block_newsletter .alert {
  color: #d5d5d5;
}

.block_newsletter .input-wrapper input[type="email"] {
  color: var(--syl-black);
}

#footer {
  position: relative;
  margin-top: 2rem;
  background: var(--syl-black);
}

#footer::before {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  left: 1%;
  width: 98%;
  height: 10px;
  border-top: 10px dashed var(--syl-red);
  transform: skewX(45deg);
}

.footer-container {
  background: var(--syl-black);
  color: #d5d5d5;
}

.footer-container a,
.footer-container .links .h3,
.footer-container .links .h4,
#block_myaccount_infos .myaccount-title a {
  color: #fff;
}

.footer-container .h3,
.footer-container .h4,
#block_myaccount_infos .myaccount-title a {
  font-size: 1.05rem;
  text-transform: none;
}

.footer-container .h3::after,
.footer-container .h4::after {
  width: 50px;
  margin: 1rem 0;
}

.home-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 2rem 0 2.5rem;
}

.home-service-card {
  display: block;
  position: relative;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
}

.home-service-card img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
  object-position: center;
}

.home-service-card span {
  display: block;
  padding: 0.7rem 0.75rem;
  background: #b7332c;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
}

.home-service-card:hover span {
  background: var(--syl-red);
}

.page-home #custom-text > .row > p {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: flex-start;
  justify-content: center;
  max-width: 1020px;
  width: 100%;
  margin: 0 auto;
  font-size: 0;
  line-height: 0;
}

.page-home #custom-text > .row > p > a {
  display: block;
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
  padding: 0 0.35rem;
}

.page-home #custom-text > .row > p > a img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 991px) {
  .home-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .home-service-card img {
    height: 220px;
  }

  .home-services .home-service-card:nth-child(3) {
    grid-column: 1 / -1;
    width: 55%;
    margin: 0 auto;
  }

  .page-home #custom-text > .row > p {
    gap: 0.85rem;
    max-width: 760px;
    width: 100%;
  }

  .page-home #custom-text > .row > p > a {
    flex-basis: calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
    padding: 0;
  }

  .page-home #custom-text > .row > p > a:nth-child(3) {
    flex-basis: 55%;
    max-width: 55%;
  }

  .page-home .carousel {
    margin-bottom: 1rem;
    box-shadow: none;
  }

  .page-home .carousel .carousel-item img {
    height: 250px !important;
  }

  .page-home .carousel .carousel-item .caption {
    bottom: 1.35rem;
    left: 1.35rem;
    max-width: 15rem;
  }

  .page-home .carousel .carousel-item .caption .display-1 {
    font-size: 2rem;
  }

  .page-home .carousel .carousel-item .caption .caption-description {
    display: none;
  }

  .page-home #custom-text {
    padding: 1.5rem 1.25rem;
  }

  #header #_desktop_logo {
    min-height: auto;
  }

  #header .header-main-row {
    row-gap: 0.65rem;
  }

  #header .header-top {
    padding-top: 0.5rem;
  }

  #header .header-actions-row {
    flex-wrap: wrap;
    row-gap: 0.65rem;
  }

  #header .header-search-slot,
  #header .header-actions-row #search_widget {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
  }

  #header .menu {
    margin-top: 0;
  }
}

@media (max-width: 1199px) {
  #header .menu .popover > ul.top-menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1600px) {
  #header .container,
  #wrapper .container,
  .footer-container .container {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767px) {
  .page-home .carousel .carousel-item img {
    height: 220px !important;
  }

  .page-home .carousel .carousel-item .caption {
    max-width: 13rem;
  }

  .page-home .products-section-title,
  #products .products-section-title,
  .featured-products .products-section-title,
  .product-accessories .products-section-title {
    font-size: 1.6rem;
  }

  .footer-container .h3::after,
  .footer-container .h4::after {
    display: none;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .page-home #custom-text > .row > p {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .page-home #custom-text > .row > p > a {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
  }

  .page-home #custom-text > .row > p > a:nth-child(3) {
    grid-column: 1 / -1 !important;
    width: 55% !important;
    max-width: 55% !important;
    justify-self: center !important;
  }
}

@media (max-width: 575px) {
  .home-services {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .home-services .home-service-card:nth-child(3) {
    width: 100%;
  }

  .page-home #custom-text > .row > p {
    gap: 0.75rem;
    max-width: none;
    width: 100%;
  }

  .page-home #custom-text > .row > p > a,
  .page-home #custom-text > .row > p > a:nth-child(3) {
    flex-basis: 100%;
    max-width: 100%;
  }
}