/* Zapfkopf storefront overrides. Shared CSS preserves the Plenty geometry. */
:root {
  --site-language: de;
}

body[data-theme="zapfkopf-de"] {
  --zapfkopf-orange: #ff7d2a;
}

.legacy-intro__title,
.legacy-intro__title h1,
.legacy-intro__text {
  height: auto;
}

.reference-header .brand img {
  width: 180px;
  height: auto;
  object-fit: contain;
}

@media (max-width: 900.98px) {
  .legacy-intro.container {
    height: auto;
  }
}

/* The live Zapfkopf phone header uses a full-width tools row. Its phone copy
   is ordinary inline content next to the icon, rather than the absolutely
   positioned shared-header treatment used by the other Plenty captures. */
@media (max-width: 575.98px) {
  .reference-header {
    overflow-x: clip;
  }

  .reference-header .service-bar,
  .reference-header .service-bar__inner,
  .reference-header .service-links {
    height: 56px;
  }

  .reference-header .service-bar__inner.container {
    width: 100%;
  }

  .reference-header .service-links > li.service-phone {
    position: absolute;
    top: 0;
    left: 57px;
    display: block;
    width: min(calc(100% - 105px), 350px);
    height: 55.71875px;
    margin: 0;
    padding: 10px 8px;
    color: #212529;
    font-size: 11.9px;
    line-height: 17.85px;
    text-align: center;
    white-space: normal;
  }

  .reference-header .service-links > li.service-phone .fa {
    position: static;
    margin: 0 5px 0 0;
    color: #212529;
    font-size: 11.9px;
    line-height: 11.9px;
  }

  .reference-header .header-tools.container {
    width: 100%;
  }

  .reference-header .header-tools .search {
    width: calc(100% - 30px);
    margin-right: 8px;
    margin-left: 22px;
  }

  .reference-header .header-tools .search button,
  .reference-header .account-tools .cart-link {
    background: var(--zapfkopf-orange);
  }

  .reference-header .account-tools {
    width: calc(100vw - 14px);
    min-width: 0;
    margin-right: 0;
    margin-left: 14px;
    justify-self: stretch;
    color: var(--zapfkopf-orange);
  }

  .reference-header .account-tools > a {
    color: var(--zapfkopf-orange);
  }

  .reference-header .account-tools .cart-link {
    width: 85px;
    min-width: 85px;
    margin-left: auto;
    gap: 7px;
  }

  /* Shared mobile chrome already spaces the three cart parts with `gap`.
     Its compatibility margins duplicated that spacing here and pushed the
     count outside the orange button at narrow widths. */
  .reference-header .account-tools .cart-link > [data-header-cart-count] {
    margin-right: 0;
  }

  .reference-header .account-tools .cart-link > [data-header-cart-total] {
    margin-left: 0;
  }

  .reference-header .brand {
    width: 100px;
    flex-basis: 100px;
  }

  .reference-header .brand img {
    width: 100px;
    height: 28px;
  }

}

@media (min-width: 376px) and (max-width: 575.98px) {
  .reference-header .service-links > li.service-phone {
    font-size: clamp(10px, 2.65vw, 11.9px);
    white-space: nowrap;
  }

  .reference-header .service-links > li.service-phone .fa {
    font-size: inherit;
  }
}

@media (max-width: 375.98px) {
  .reference-header .service-bar,
  .reference-header .service-bar__inner,
  .reference-header .service-links {
    height: 62px;
  }

  .reference-header .service-links > li.service-phone {
    width: calc(100% - 114px);
    height: 62px;
    font-size: 14px;
    line-height: 21px;
  }

  .reference-header .service-links > li.service-phone .fa {
    font-size: 14px;
    line-height: 14px;
  }
}

@media (max-width: 330px) {
  .reference-header .header-tools .search {
    width: calc(100vw - 8px);
    max-width: calc(100vw - 8px);
    justify-self: start;
    margin-right: 8px;
    margin-left: 0;
  }
}

@media (min-width: 449px) and (max-width: 575.98px) {
  .reference-header .service-bar,
  .reference-header .service-bar__inner,
  .reference-header .service-links {
    height: 37.859375px;
  }

  .reference-header .service-links > li.service-phone {
    height: 37.859375px;
  }
}

/* Zapfkopf's Ceres theme switches listing cards to a compact media-object on
   phones: a fixed 120px image floats beside a fluid copy column. The shared
   storefront deliberately uses the tall card used by the other shops, so the
   override must stay scoped to this theme. */
@media (max-width: 575.98px) {
  .legacy-products .cmp-product-thumb,
  .legacy-category-results .cmp-product-thumb,
  .legacy-search-products .cmp-product-thumb {
    padding: 11.2px;
    overflow: hidden;
    line-height: 21px;
  }

  .legacy-products .product-card__frame,
  .legacy-category-results .product-card__frame,
  .legacy-search-products .product-card__frame {
    width: 100%;
    height: auto;
    min-height: 120px;
    line-height: 21px;
  }

  .legacy-products .thumb-image,
  .legacy-products .thumb-image .prop-1-1,
  .legacy-products .thumb-image a,
  .legacy-category-results .thumb-image,
  .legacy-category-results .thumb-image .prop-1-1,
  .legacy-category-results .thumb-image a,
  .legacy-search-products .thumb-image,
  .legacy-search-products .thumb-image .prop-1-1,
  .legacy-search-products .thumb-image a {
    width: 120px;
    height: 120px;
    aspect-ratio: auto;
  }

  .legacy-products .thumb-image,
  .legacy-category-results .thumb-image,
  .legacy-search-products .thumb-image {
    float: left;
  }

  .legacy-products .thumb-image img,
  .legacy-category-results .thumb-image img,
  .legacy-search-products .thumb-image img {
    width: 120px;
    height: 120px;
    margin: 0;
    padding: 0;
    object-fit: contain;
  }

  .legacy-products .thumb-image__nav,
  .legacy-products .reference-carousel-dots,
  .legacy-category-results .thumb-image__nav,
  .legacy-category-results .reference-carousel-dots,
  .legacy-search-products .thumb-image__nav,
  .legacy-search-products .reference-carousel-dots {
    display: none;
  }

  .legacy-products .thumb-content,
  .legacy-category-results .thumb-content,
  .legacy-search-products .thumb-content {
    display: inline-block;
    width: calc(100% - 120px);
    min-height: 120px;
    padding: 0 11.2px;
    vertical-align: top;
  }

  .legacy-products .thumb-title,
  .legacy-category-results .thumb-title,
  .legacy-search-products .thumb-title {
    width: 100%;
    min-height: 0;
  }

  .legacy-products .thumb-meta,
  .legacy-category-results .thumb-meta,
  .legacy-search-products .thumb-meta {
    width: 70%;
    margin-top: 7px;
  }

  .legacy-products .thumb-meta:has(.price-view-port),
  .legacy-category-results .thumb-meta:has(.price-view-port),
  .legacy-search-products .thumb-meta:has(.price-view-port) {
    margin-top: 8.75px;
  }

  /* Карточка без отзывов приходит с ПУСТЫМ блоком звёзд (общий шаблон,
     2026-09-24), а не с нулевой заливкой: признак — отсутствие заливки. */
  .legacy-products .feedback-stars-average:not(:has(.feedback-stars-overlay-wrap)),
  .legacy-category-results .feedback-stars-average:not(:has(.feedback-stars-overlay-wrap)),
  .legacy-search-products .feedback-stars-average:not(:has(.feedback-stars-overlay-wrap)) {
    display: none;
  }

  .legacy-products .prices,
  .legacy-category-results .prices,
  .legacy-search-products .prices {
    width: 100%;
  }

  /* In the captured Ceres card the stock mark is painted to the right of the
     price column and therefore does not make the crossed-price row wrap. */
  .legacy-products .thumb-meta .has-availability,
  .legacy-category-results .thumb-meta .has-availability,
  .legacy-search-products .thumb-meta .has-availability {
    position: relative;
    display: block;
  }

  .legacy-products .thumb-meta .price-view-port,
  .legacy-category-results .thumb-meta .price-view-port,
  .legacy-search-products .thumb-meta .price-view-port {
    height: 21px;
  }

  .legacy-products .thumb-meta .has-availability > .availability,
  .legacy-category-results .thumb-meta .has-availability > .availability,
  .legacy-search-products .thumb-meta .has-availability > .availability {
    position: absolute;
    top: 50%;
    right: auto;
    left: calc(100% + 23px);
    width: 28px;
    height: 30px;
    transform: translateY(-50%);
  }

  .legacy-products .prices .price,
  .legacy-category-results .prices .price,
  .legacy-search-products .prices .price {
    font-size: 29.4px;
    line-height: 44.1px;
  }

  .legacy-products .product-card__mobile-link,
  .legacy-category-results .product-card__mobile-link,
  .legacy-search-products .product-card__mobile-link,
  .legacy-products .vat,
  .legacy-category-results .vat,
  .legacy-search-products .vat {
    width: 100%;
  }

  .legacy-products .product-card__mobile-link,
  .legacy-category-results .product-card__mobile-link,
  .legacy-search-products .product-card__mobile-link {
    margin-top: 5px;
    border: 0;
    font-size: 14px;
    line-height: 17.5px;
  }

  .legacy-products.container {
    padding-top: 14px;
  }

  .legacy-benefits.container {
    margin-top: 27px;
  }

  .legacy-benefits > div {
    height: 110px;
    min-height: 110px;
    padding: 7px 22px;
  }

  .legacy-benefits > div:last-child {
    height: 89px;
    min-height: 89px;
  }
}

/* Zapfkopf keeps a narrow, centred footer column on phones. The column is
   fluid in Plenty: its inner width is 70vw - 39px, so fixed 390px-capture
   dimensions clip legal links on small phones and leave the 414/575 layouts
   undersized. Content therefore owns the footer height. */
@media (max-width: 575.98px) {
  html[lang="de"] body[data-theme="zapfkopf-de"] .site-footer {
    height: auto;
    min-height: 0;
    padding: 16px 0 94.5px;
    overflow-x: clip;
    border-top: 2px solid var(--zapfkopf-orange);
  }

  html[lang="de"] body[data-theme="zapfkopf-de"] .reference-footer-content {
    width: calc(70% - 9px);
    height: auto;
    margin-right: auto;
    margin-left: auto;
    padding: 0 15px;
  }

  html[lang="de"] body[data-theme="zapfkopf-de"] .legacy-footer-grid {
    width: 100%;
    height: auto;
    margin: 0;
  }

  html[lang="de"] body[data-theme="zapfkopf-de"] .legacy-footer-grid section {
    width: 100%;
    padding: 0;
  }

  html[lang="de"] body[data-theme="zapfkopf-de"] .legacy-footer-grid section:nth-child(1) { height: 87.859375px; }
  html[lang="de"] body[data-theme="zapfkopf-de"] .legacy-footer-grid section:nth-child(2) { height: 105.015625px; }
  html[lang="de"] body[data-theme="zapfkopf-de"] .legacy-footer-grid section:nth-child(3) { height: 122.171875px; }
  html[lang="de"] body[data-theme="zapfkopf-de"] .legacy-footer-grid section:nth-child(4) { height: 261.390625px; }
  html[lang="de"] body[data-theme="zapfkopf-de"] .legacy-footer-grid section:nth-child(5) { height: auto; }

  html[lang="de"] body[data-theme="zapfkopf-de"] .legacy-footer-grid h5,
  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-payment h5 {
    width: 100%;
    color: var(--zapfkopf-orange);
  }

  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-shipping li:nth-child(1),
  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-shipping li:nth-child(1) img { width: 129px; height: 80px; }
  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-shipping li:nth-child(2),
  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-shipping li:nth-child(2) img { width: 120px; height: 65px; }
  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-shipping li:nth-child(3),
  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-shipping li:nth-child(3) img { width: 129px; height: 80px; }

  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-membership li:first-child,
  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-membership li:first-child img {
    width: min(208px, 100%);
    height: auto;
    aspect-ratio: 208 / 116;
  }
  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-membership li {
    display: block;
    height: auto;
    min-height: 0;
    line-height: 0;
  }
  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-membership img {
    display: block;
  }
  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-membership ul {
    display: block;
    margin-bottom: 0;
  }
  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-membership li:last-child:not(:first-child),
  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-membership li:last-child:not(:first-child) img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-payment {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
  }

  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-payment h5 {
    margin-left: 0;
    text-align: center;
  }

  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-payment__images {
    display: flex !important;
    width: 100%;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-content: flex-start;
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-payment img:first-child {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 234 / 51.8125;
    margin: 0;
  }

  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-payment img:nth-child(2) { width: 88px; height: 88px; margin: 0 0 0 auto; }
  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-payment img:nth-child(3) { width: 129px; height: 80px; margin: 0 auto 0 3.609375px; }
  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-payment img:nth-child(4) { width: 129px; height: 80px; margin: 0 calc((100% - 129px) / 2); }
  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-payment img:nth-child(5) { width: 142px; height: 62px; margin: 0 calc((100% - 142px) / 2); }
  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-payment img:nth-child(6) { width: 96px; height: 30px; margin: 0 calc((100% - 96px) / 2); }
  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-payment img:nth-child(7) { width: min(175px, 100%); height: auto; min-height: 32px; margin: 0 calc((100% - min(175px, 100%)) / 2); }
  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-payment img:nth-child(8) { width: 78px; height: 62px; margin: 0 calc((100% - 78px) / 2); }

  html[lang="de"] body[data-theme="zapfkopf-de"] .reference-footer-content > hr,
  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-copyright {
    width: 100%;
    margin-left: 0;
  }

  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-copyright {
    height: auto;
    min-height: 0;
    padding-bottom: 0;
  }

  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-copyright small {
    font-size: 9.324px;
  }

  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-legal {
    width: calc(70% - 9px);
    height: auto;
    min-height: 59.15625px;
    margin: 47.5px auto 0 !important;
    text-align: center;
  }

  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-legal .withdraw-link {
    margin: 13.828125px 10px 0 0;
    border-color: var(--zapfkopf-orange);
    background: var(--zapfkopf-orange);
  }

  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-legal .footer-contact {
    position: static;
    margin: 0 10px 0 0;
  }

  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-privacy,
  html[lang="de"] body[data-theme="zapfkopf-de"] .site-footer--has-legal .footer-privacy {
    right: calc(15% - 10.5px);
    bottom: 167.65625px;
    width: 40px;
    height: 33.5px;
    padding: 7px;
    border-color: var(--zapfkopf-orange);
    border-radius: 4.2px;
    background: var(--zapfkopf-orange);
  }

  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-privacy[hidden] {
    display: inline-flex;
  }

  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-to-top {
    bottom: 36px;
  }
}

@media (max-width: 370.98px) {
  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-payment img:nth-child(2),
  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-payment img:nth-child(3) {
    margin-right: auto;
    margin-left: auto;
  }
}

@media (max-width: 330px) {
  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-legal .withdraw-link {
    margin-top: 0;
  }

  html[lang="de"] body[data-theme="zapfkopf-de"] .footer-privacy,
  html[lang="de"] body[data-theme="zapfkopf-de"] .site-footer--has-legal .footer-privacy {
    bottom: 201.15625px;
  }
}