/**
  1. General
  2. Header
  3. Footer
  4. Elements
  5. Pages
  6. Product detail
  7. Product category 
  8. Login & Register 
 */

/* -------------------------------
    1. General
------------------------------- */
:root {
  --black: #303030;
  --light-grey: #f0efec;
  --brand: #b1804f;
  --light-brand: #be9b7b;
}

p {
  color: var(--black);
}

.hero .btn,
#content .btn {
  font-size: 17px;
  padding: 16px 40px;
  border: none;
}

.hero .btn-conversion,
.content .btn-primary,
#content .btn-conversion {
  color: #fff;
  background: var(--brand);
}

.content .btn-primary:hover,
.hero .btn-conversion:hover,
.btn.btn-cart:hover,
.btn.btn-conversion:hover,
a.btn.btn-cart:hover,
a.btn.btn-conversion:hover {
  background: var(--light-brand);
}

@media (max-width: 767px) {
  p {
    font-size: 16px;
    line-height: 26px;
  }
}

/* -------------------------------
    2. Header
------------------------------- */
#header .header-top .header-top-wrapper .site-name a img,
#header .header-top .header-top-wrapper h1.site-name a img {
  width: 120px;
}

.popup-widget-inner.cart-widget-inner
  .cart-widget-bottom
  .cart-widget-button
  a {
  font-size: 15px;
}

@media (min-width: 768px) {
  #navigation {
    height: 80px;
  }

  .fitted .navigation-in ul {
    padding: 8px 0px;
    -webkit-box-shadow: 0px 2px 10px rgba(40, 40, 40, 0.2);
    box-shadow: 0px 2px 10px rgba(40, 40, 40, 0.2);
  }

  .navigation-in > ul > li {
    padding: 0px 6px;
  }

  #navigation .navigation-in > ul > li > a:hover {
    color: var(--brand);
    background-color: transparent;
  }

  .navigation-in ul li a b {
    font-size: 19px;
    font-weight: 700;
    text-transform: capitalize;
  }
}

@media (min-width: 992px) {
  #header .header-top .header-top-wrapper {
    max-width: 960px;
  }

  #header .header-top,
  .navigation-buttons a[data-target="login"],
  .navigation-buttons a[data-target="search"],
  .navigation-buttons a[data-target="search"]:hover {
    background: black;
  }

  #header .languagesMenu__content {
    background: transparent;
  }

  .languagesMenu .languagesMenu__header--actual .caret:before {
    color: white;
    margin-left: 6px;
  }

  #header .navigation-buttons i,
  #header .navigation-buttons .icon-cart:before {
    color: white;
  }

  #header .navigation-buttons i:after,
  #header .navigation-buttons .icon-cart:after {
    color: transparent;
  }

  #header .navigation-buttons a:hover {
    background: transparent;
  }
}

@media (max-width: 991px) {
  #header .header-top,
  #header .header-top .header-top-wrapper {
    height: 80px;
  }

  #header .header-top .header-top-wrapper .site-name,
  #header .header-top .header-top-wrapper h1.site-name {
    padding: 0;
  }

  #header .header-top .header-top-wrapper .site-name a img,
  #header .header-top .header-top-wrapper h1.site-name a img {
    display: block;
    margin: 0 auto;
    width: 80px;
    height: 80px;
  }

  #header .navigation-buttons .icon-search,
  #header .navigation-buttons .icon-login,
  #header .navigation-buttons .icon-cart {
    font-size: 2.25rem;
  }

  .navigation-buttons a[data-target="navigation"]:before {
    font-size: 2.25rem;
    margin-top: 3px;
  }
}

@media (max-width: 767px) {
  #header .header-top .header-top-wrapper {
    height: 96px;
    background: white;
    -webkit-box-shadow: 0px 2px 10px rgba(60, 60, 60, 0.15);
    box-shadow: 0px 2px 10px rgba(60, 60, 60, 0.15);
  }

  #header .header-top .header-top-wrapper .site-name a img,
  #header .header-top .header-top-wrapper h1.site-name a img {
    margin: 0;
  }

  #header .header-top .header-top-wrapper .navigation-buttons {
    gap: 6px;
  }
}

/* -------------------------------
    3. Footer
------------------------------- */
#footer {
  background-color: var(--light-grey);
}

.footer-newsletter-full-width {
  display: none;
}

#footer .footer-rows {
  max-width: 1000px;
  width: 100%;
}

#footer .row:before,
#footer .row::after,
#footer .container:before,
#footer .container:after {
  display: none;
}

.footer-rows .custom-footer {
  display: grid;
  grid-row-gap: 40px;
  padding: 56px 40px 26px;
}

#footer .footer-rows .custom-footer > div {
  width: 100%;
  padding: 0px;
}

#footer h4 {
  color: var(--black);
  margin-top: 0px;
}

#footer h4 > span:after {
  border-color: var(--brand);
  background-color: var(--brand);
}

#footer a:hover {
  color: var(--brand);
}

.footer-rows .custom-footer .contact-box ul li {
  padding-bottom: 8px;
}

.footer-rows .social-icon-list a:hover {
  color: var(--black);
  background: var(--light-brand);
}

.footer-rows .social-icon-list a:hover:before {
  color: var(--black);
}

.custom-footer__onlinePayments .text-center {
  text-align: left;
}

.footer-bottom {
  display: grid;
  grid-row-gap: 12px;
  max-width: 972px;
  width: 100%;
  padding: 0px 40px;
}

#footer .footer-bottom > span {
  line-height: 20px;
  width: 100%;
}

/* sub footer */
.footer-bottom,
.footer-bottom-full-width {
  background-color: black;
}

#footer .footer-bottom-full-width .container *:not(a:hover) {
  color: white;
}

@media (min-width: 600px) {
  .footer-rows .custom-footer {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 901px) {
  .footer-bottom {
    grid-template-columns: 1fr 240px;
  }
}

@media (min-width: 992px) {
  .footer-rows .custom-footer {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 900px) {
  #footer .footer-rows,
  .footer-bottom {
    max-width: 620px;
    margin: 0 auto;
  }

  .footer-bottom #signature {
    text-align: center;
    padding-top: 0;
  }
}

@media (max-width: 767px) {
  #footer h4 {
    font-size: 21px;
  }

  #footer ul li {
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  #footer .footer-bottom,
  #footer .footer-bottom > span {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .footer-rows .custom-footer {
    padding: 56px 24px 26px;
  }

  .footer-bottom {
    padding: 0px 24px;
  }
}

/* -------------------------------
    4. Elements
------------------------------- */

/* --- Cookie banner ---- */
.template-10
  .cookiesSetting__item
  .cookiesSetting__item__status
  .cookiesSetting__item__state:after,
.template-13
  .cookiesSetting__item
  .cookiesSetting__item__status
  .cookiesSetting__item__state:after,
.template-14
  .cookiesSetting__item
  .cookiesSetting__item__status
  .cookiesSetting__item__state:after {
  left: 10px;
  top: 4px;
}

/* --- Discussion --- */
#discussion-form {
  max-width: 460px;
}

.discussion-form .col-sm-6 {
  width: 100%;
}

/* --- Hero product section ---- */
.wide-carousel {
  max-width: 1000px;
  margin: 0 auto;
}

.wide-carousel .carousel-inner {
  min-height: unset !important;
}

.hero {
  display: grid;
  gap: 40px;
  padding: 48px 24px;
}

.hero h1 {
  font-size: 36px;
  margin: 0px 0px 10px;
}

.hero .content {
  font-size: 17px;
  line-height: 28px;
}

.hero .image-box {
  position: relative;
}

.hero img {
  border-radius: 24px;
}

.hero .icon {
  position: absolute;
  bottom: -0.375rem;
  right: -0.375rem;
  width: 100px;
  height: 100px;
  background: #ffffff;
  border-top-left-radius: 50%;
}

.image-box .icon .iconBox {
  position: absolute;
  inset: 12px;
  background: #b1804f;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  height: 84px;
  width: 84px;
}

.image-box .icon .iconBox img {
  width: 32px;
}

.image-box .icon::before {
  position: absolute;
  content: "";
  bottom: 0.375rem;
  left: -24px;
  background: transparent;
  width: 24px;
  height: 24px;
  border-bottom-right-radius: 24px;
  -webkit-box-shadow: 0.5rem 0.5rem 0 0.5rem #fff;
  box-shadow: 0.5rem 0.5rem 0 0.5rem #fff;
}

.image-box .icon::after {
  position: absolute;
  content: "";
  top: -1.25rem;
  right: 0.375rem;
  background: transparent;
  width: 1.25rem;
  height: 1.25rem;
  border-bottom-right-radius: 1.25rem;
  -webkit-box-shadow: 0.313rem 0.313rem 0 0.313rem #fff;
  box-shadow: 0.313rem 0.313rem 0 0.313rem #fff;
}

.image-box .icon:hover .iconBox {
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

@media (min-width: 901px) {
  .hero {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

@media (max-width: 900px) {
  .wide-carousel {
    max-width: 600px;
  }

  .hero .image-box {
    grid-column-start: 1;
    grid-row-start: 1;
  }
}

@media (max-width: 767px) {
  .hero {
    padding: 72px 24px 48px;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 32px;
  }
}

/* Product slider */
.product-slider .products-block {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.product-slider-holder.has-navigation {
  padding: 0px;
}

.products-block > div .p .p-code {
  display: none;
}

/* --- Products benefits ---- */
.benefitBanner {
  display: grid;
  grid-row-gap: 32px;
  max-width: 1000px;
  margin: 24px auto 72px;
}

.benefitBanner .benefitBanner__data {
  font-size: 15px;
  font-weight: 700;
  color: #8f8787;
  line-height: 18px;
}

.benefitBanner .benefitBanner__picture img {
  width: 56px;
}

@media (min-width: 768px) {
  .benefit-banners-full-width .container-full-width {
    max-width: 100%;
  }
}

@media (min-width: 992px) {
  .benefitBanner {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media (min-width: 520px) and (max-width: 991px) {
  .benefitBanner {
    max-width: 700px;
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Search pop-up ---- */
.popup-widget.search-widget form .search-form-input-group .search-input {
  margin: 0;
}

/* --- Video grid ---- */
.videos {
  display: grid;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 48px;
  max-width: 660px;
  margin: 0 auto 56px;
}

.videos .video {
  border-radius: 24px;
}

.videos .ytp-shorts-mode.ytp-title-enable-channel-logo .ytp-title {
  display: none;
}

@media (min-width: 768px) {
  .one-column-body .welcome-wrapper .welcome {
    width: 100%;
  }
}

@media (min-width: 640px) {
  .welcome-wrapper {
    margin: 0 auto 56px;
    border-radius: 24px;
    background: url(https://www.donferoni.com/user/documents/upload/images/bg-monster-leaves.jpg)
      no-repeat center;
    background-size: contain;
  }

  .videos {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 32px;
  }
}

/* -------------------------------
    5. Pages
------------------------------- */
.homepage-latest-contribution-full-width {
  display: none;
}

/* --- Contact --- */
.in-contact .content-wrapper {
  max-width: 700px;
  padding: 40px;
}

.in-contact .breadcrumbs {
  display: none;
}

.form-group label {
  font-size: 14px;
}

.form-control {
  padding: 10px 20px;
  min-height: 46px;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: var(--brand);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  font-size: 15px;
}

.in-contact form h4 {
  margin: 0px 0px 10px;
}

.in-contact form .box .js-validated-element-wrapper input {
  max-width: 280px;
}

.form-group [type="hidden"] + label {
  font-size: 15px;
  line-height: 20px;
}

.company-details {
  border: 2px solid var(--brand);
  border-radius: 10px;
  padding: 32px 20px;
  margin: 64px 0px 24px;
}

.company-details h3 {
  margin-top: 0;
}

.company-details ul {
  font-size: 16px;
  margin: 0;
  padding: 0px 0px 0px 24px;
}

.company-details li + li {
  margin-top: 6px;
}

/* --- Checkout --- */
.ordering-process .content {
  padding: 40px 20px;
}

.extras-wrapper .discount-coupon form .btn {
  height: 46px;
}

/* --- Homepage --- */
@media (max-width: 639px) {
  .welcome-wrapper {
    background: url(https://www.donferoni.com/user/documents/upload/images/vertical-bg.jpg)
      repeat-y;
    background-size: contain;
    margin: 0px -16px;
  }
}

/* --- Legal docs --- */
.in-general-business-conditions .breadcrumbs,
.in-protection-of-personal-data .breadcrumbs,
.in-complaints-and-returns .breadcrumbs {
  display: none;
}

.in-general-business-conditions .content-wrapper,
.in-protection-of-personal-data .content-wrapper,
.in-complaints-and-returns .content-wrapper {
  max-width: 850px;
  padding-top: 40px;
  padding-bottom: 32px;
}

.in-general-business-conditions .content h1,
.in-protection-of-personal-data .content h1,
.in-complaints-and-returns .content h1 {
  margin-bottom: 32px;
}

.in-general-business-conditions .content a,
.in-protection-of-personal-data .content a,
.in-complaints-and-returns .content a {
  word-break: break-word;
}

@media (max-width: 767px) {
  .in-general-business-conditions .content-wrapper,
  .in-protection-of-personal-data .content-wrapper,
  .in-complaints-and-returns .content-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 480px) {
  .in-general-business-conditions .content h1,
  .in-protection-of-personal-data .content h1,
  .in-complaints-and-returns .content h1 {
    text-align: left;
  }
}

/* ----------------------------
  	6. Product detail
---------------------------- */
.type-product .breadcrumbs,
.type-product .social-buttons-wrapper,
.type-product .detail-parameter-product-code {
  display: none;
}

.type-product .shp-tabs-wrapper {
  max-width: 920px;
  margin: 0 auto;
  padding: 20px 0px;
}

.type-product .p-detail-full-width {
  background: #f5f5f5;
}

.shp-tabs,
.shp-tabs-holder {
  background-color: #f5f5f5;
  border-color: #f5f5f5;
}

.shp-tab-link:hover {
  color: var(--brand);
}

.stars .star.is-active:hover,
.stars .star.star-half:before,
.stars .star.star-on:before {
  color: var(--brand);
}

.content-inner .discussionContainer > .discussion-form,
.p-detail .discussionContainer > .discussion-form {
  background: transparent;
  padding: 0;
}

/* discounted price */
.flag.flag-discount {
  background-color: #266e56;
}

.type-product .flags-extra .flag .price-save,
.type-product .flags-extra .flag .price-standard {
  font-size: 14px;
}

.p-price-wrapper .standard-price-label {
  font-weight: 700;
  color: #666;
  margin-bottom: 16px;
  display: inline-block;
}

.price-standard > span,
.p-detail-inner .p-price-wrapper .price-save {
  font-weight: 700;
}

/* full description */
.description-inner {
  display: grid;
}

.basic-description .videos {
  grid-template-columns: 1fr;
}

.basic-description .video {
  display: block;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .p-detail-inner .p-price-wrapper .price-final {
    font-size: 42px;
    padding: 0;
    line-height: 1;
  }

  .type-product .flags-extra .flag .price-save,
  .type-product .flags-extra .flag .price-standard {
    font-size: 16px;
  }

  .one-column-body .description-inner .basic-description {
    display: grid;
    grid-template-columns: 1fr 315px;
    width: 100%;
  }

  .description-inner .basic-description h4 {
    grid-column: 1/-1;
  }

  .basic-description .text {
    padding-right: 40px;
  }
}

@media (min-width: 992px) {
  .type-product #content-wrapper {
    max-width: 1000px;
  }

  .p-detail-inner {
    padding-top: 40px;
    padding-bottom: 32px;
  }

  .wide .p-detail-inner .p-image-wrapper {
    width: 60%;
    padding-right: 32px;
  }

  .wide .p-detail-inner .p-data-wrapper {
    width: 40%;
  }
}

@media (max-width: 991px) {
  .type-product .p-detail-inner {
    padding: 32px 0px;
  }

  .type-product .benefitBanner {
    grid-template-columns: 1fr 1fr;
  }

  .type-product .benefitBanner .benefitBanner__picture img {
    width: 52px;
  }
}

@media (max-width: 767px) {
  .type-product .content-wrapper.container {
    padding: 0px;
  }

  .type-product .p-detail-inner {
    padding: 32px 24px;
  }

  .type-product .p-detail-full-width {
    margin: 0;
    padding: 24px 20px;
  }

  .type-product .detail-parameter-availability {
    font-size: 16px;
  }
}

/* ----------------------------
  	7. Product category
---------------------------- */
.type-category .breadcrumbs,
.type-category .category-header,
.type-category .pagination-count {
  display: none;
}

.type-category .category-top {
  margin: 0;
  border: none;
}

.type-category .content {
  max-width: 1140px;
  margin: 0 auto;
  padding: 40px;
}

.type-category .products-block {
  display: grid;
  grid-row-gap: 56px;
}

.type-category .products-block .product {
  width: 100%;
  padding: 0;
}

.type-category .products-block .p > a::before,
.type-category .products-block .img > a::before {
  padding: 0;
}

.products-block > div .p .p-in .p-in-in .name {
  font-size: 18px;
  height: auto;
}

.products-block > div .p .p-in .p-bottom > div .prices .price-final strong {
  font-size: 18px;
  padding: 6px 0px;
  display: block;
}

.products-block .availability {
  font-weight: 700;
}

.type-category #content .btn {
  color: #fff;
  background: var(--brand);
  padding: 16px 64px;
}

.type-category #content .btn:hover {
  background: var(--light-brand);
}

.type-category #content .btn i {
  display: none;
}

@media (min-width: 991px) {
  .type-category .products-block {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .type-category .content {
    padding: 40px 16px;
  }
}

/* ----------------------------
  	8. Login & Register 
---------------------------- */
.in-forgotten-password .breadcrumbs,
.in-registration .breadcrumbs {
  display: none;
}

.in-forgotten-password .overall-wrapper,
.in-forgotten-password .content-wrapper,
.in-registration .overall-wrapper,
.in-registration .content-wrapper {
  background-color: #fff;
}

.in-forgotten-password #content,
.in-registration #content {
  padding: 64px 20px 48px;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.in-registration #register-form input[type="hidden"] + label {
  margin-top: 20px;
}

.in-registration .captcha-image {
  margin-top: 20px;
}

/* forgotten pass */
.in-forgotten-password #content {
  max-width: 600px;
  margin: 0 auto;
}

.in-forgotten-password .sidebar,
.in-forgotten-password h2 {
  display: none;
}

.in-forgotten-password .content .login-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
