/* 
* Custom CSS für Apitz Skincare 
*/

:root {
    
--primary: #84937f;
--primary-dark: #6f7f6b;
--primary-light: #aab4a6;
--primary-soft: #cbd1c8;
--white:#ffffff;
--black:#000000;

--font:Montserrat;
--font-size:16px;
--font-small:12px;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --text-center:center;
    --text-uppercase:uppercase;
    
    --image-cut: 30%;
    --image-cut-soft: 25%;
    
--container-padding:50px;
--container-padding-xl:120px;
--container-padding-0:0px;
}

body {font-family:var(--font);color:var(--black);background:var(--white);font-weight:var(--font-weight-regular);font-size:var(--font-size);overflow-x:hidden;}
a {color:var(--primary-dark);}
.text-uppercase, .xoo-wsc-pname, .xoo-wsch-text, h1.entry-title, .wc-block-components-product-name, .wc-block-components-title, .wc-block-components-checkout-order-summary__title-text, .wc-block-components-totals-item__label {text-transform: var(--text-uppercase);letter-spacing:1px;}
.text-center {text-align:var(--text-center);}

.bg-light {background:var(--primary-soft);}
.bg {background:var(--primary-light);color:var(--white);}
.bg-dark {background:var(--primary);color:var(--white);}
.bg-medium {background:var(--primary-light);color:var(--white);
  & .label {background:var(--white);color:var(--primary-dark);}
  & .elementor-widget-icon-list .elementor-icon-list-text {color:var(--white);}
}
.bg-white {background:var(--white);padding:0 !important;}
.text-white {color:var(--white);
  p, span, div {color:var(--white);
    & svg {fill:var(--white) !important;}
  }
}
.menu-item.xoo-wsc-menu-item {padding:7px 0 0 5px;
  .xoo-wsc-sc-subt {display:none;}
}
body {
  .wp-element-button, .wp-block-button__link {background:var(--primary-dark);color:var(--white);text-decoration: none;border:1px solid transparent;transition:ease all .3s;text-transform: var(--text-uppercase);
    &:hover {color:var(--primary-dark);background:transparent;border:1px solid var(--primary-dark);}
  }
  .wp-block-woocommerce-cart.alignwide {margin:20px 0;}
  &.woocommerce-cart, &.woocommerce-checkout {
    .page-header {margin:40px 0 20px;}
  }
  & .woocommerce-notices-wrapper {max-width: 1140px;margin:40px auto 0;width:96%;
    & .woocommerce-message {border:1px solid var(--primary);background:transparent;outline:none;}
    & .button.wc-forward {color:var(--white);background:var(--primary-dark);font-weight:400;text-transform: uppercase;letter-spacing:1px;text-transform: var(--text-uppercase);}
    & .woocommerce-message::before {color:var(--primary);}
  }
}
.text-big {font-size:24px;}
.border-top {border-top:1px solid var(--white);padding-block-start:80px;margin-block-start:80px !important;}
h2 {font-size:28px;font-weight:400;line-height:1.4;letter-spacing:1px;}
.label {display:inline-block;letter-spacing:1px;background:var(--primary-soft);padding:5px 10px;font-size:13px;}
.elementor-location-header {
    & .logo {padding:15px;
        & img[src$=".svg"] {width:250px;}
    }
}
.home footer.elementor-location-footer {position:relative;
  &::before {background:var(--primary);content:"";width:100%;display:block;height:400px;bottom:0;left:0;position:absolute;z-index:-1;}
}
.xoo-wsc-btn {text-transform:uppercase !important;border-radius:0;font-size:12px !important;padding:5px 12px !important;border-radius:0 !important;}
body .page-content > .elementor {
  & > .e-atomic-element {padding-block-end:var(--container-padding);padding-block-start:var(--container-padding);
    & > div, & > h2, & > h3, & > p, & > span {max-width: var(--content-width);margin-right: auto;margin-left: auto;width:96%;}
    &.fw-20000 {
      & > div, & > h2, & > h3, & > p, & > span {max-width:2000px;width:100%;}
    }
        &.fww {
          &.no-padding {padding:0;
            > div {padding:0;}
          }
      & > div, & > h2, & > h3, & > p, & > span {max-width:100%;width:100%;}
    }
  }
  .no-padding {padding-block-end:var(--container-padding-0);padding-block-start:var(--container-padding-0);}
  .intro {color:var(--white);padding-block-end:var(--container-padding);padding-block-start:var(--container-padding-xl);
      & .logo-hf {width:200px;margin-bottom:80px;}
      & p {margin-left:auto;margin-right:auto;max-width:500px;}
      & .intro-icons {width:250px;margin-left: auto;margin-block-end:-25px; margin-right: 200px;margin-block-start: 40px;}
          & h1 {font-size:70px;letter-spacing:4px;margin:0 0 10px;font-weight:400;}
          & h2 {font-size:28px;letter-spacing:1px;margin:0 0 20px;font-weight:300;}
  }
  .product-wrapper {margin-top:-90px;position: relative;padding-bottom:50px;align-items:flex-start;
      & .rechts {text-align:right;margin-top:185px;leftt:-10vw;padding-top:120px;
          & .e-loop-add-to-cart-form-container {justify-content: flex-end !important;}
          & .product-item {justify-content:flex-end;text-align:right;}
          & .product-image-wrapper {order:2;}
      }
  }
  & .produktboxen-home {position:relative;
    &::before {content:"";background:url("/wp-content/uploads/2026/09/Dr_Apitz_Website_Gruenflaechen2-scaled.png") no-repeat 0 0 / 55% 100%;position:absolute;left:0;top:0;width:100%;height:750px;}
    &::after {content:"";background:url("/wp-content/uploads/2026/09/Dr_Apitz_Website_Gruenflaechen-scaled.png") no-repeat bottom right 0 / 55% 100%;position:absolute;right:0;top:200px;width:98%;height:752px;z-index:-1;}
  }
  .product-box {padding:180px 40px 60px;width:55vw;
      & h2 {color:var(--primary-dark);font-size:28px;margin:0 0 35px;font-weight:400;letter-spacing:1px;}
      & .product-item {padding:0;column-gap:40px;
        &.right {text-align:right;}
        & a.elementor-button {border:1px solid var(--primary-dark);color:var(--white);padding:8px 32px;margin:0;background:var(--primary-dark);font-size:14px;border-radius:0;text-transform: var(--text-uppercase);}
        & .button {border-radius: 0 !important;}
        & span.product_title {color:var(--black);font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:1px;}
        & .elementor-widget-html > span.amount {display:block;margin:5px 0 15px;}
        & .elementor-add-to-cart a , & .more a {border-radius:0;color:var(--white);font-weight:var(--font-weight-regular);background:var(--primary-dark);padding:12px 20px;font-weight:var(--font-weight-bold);font-size:12px;text-transform: uppercase;letter-spacing:1px;}
        & .text-small {font-size:var(--font-small);margin:40px 0 25px;
          & strong {font-size:var(--font-size);letter-spacing:.5px;}
          & em {font-style: normal;font-size:var(--font-size);}
          & p:last-of-type {color:var(--primary-dark);text-transform: uppercase;font-weight:bold;}
        }
          & .product-content-wrapper {width:305px;padding:0;}
          & .product-image-wrapper {padding:0;}
          & .product-image-wrapper {width:105px;margin-block-end:0px;
            &.face-cream {width:90px;}
          }
      }
  }
  & .flex-control-thumbs {display:flex;column-gap:0px;
    & > li {border:0px solid var(--black);max-height:120px;padding:0px;
      & img {width: 100%;
        height: 100%;
        object-fit: contain;}
    }
  }
  & .elementor-button, & .xoo-wsc-btn {text-transform:uppercase;border-radius:0;font-size:13px;padding:8px 25px;border-radius:0;}
  & .elementor-button-info {
    & a.elementor-button {background:transparent;border:1px solid var(--primary);color:var(--primary);}
  }
  & .cb-more {
    a {background:transparent;border:1px solid var(--white);padding:8px 35px;font-size:13px;text-transform: uppercase;margin-top:40px;border-radius: 0;}
  }
& .single-product-box {
  h1.product_title {font-weight:300;margin:0 0 15px;text-transform: uppercase;}
  & .subtitle {color:var(--primary-dark);margin:0;letter-spacing:2px;}
  & .siegel {max-width:250px;margin:40px 0 30px;}
  & .delivery-note {
    p {font-size:12px;}
  }
  & .cart-section {background:var(--primary);color:var(--white);padding:10px 25px;margin-bottom:60px;position:relative;
    p, span, div {color:var(--white);padding:0;}
    & .legacy-itemprop-offers {display:none;}
    & .price {margin:0;font-size:15px;font-weight:500;text-align: right;line-height:1;}
    button.single_add_to_cart_button {padding:0;font-size:14px;font-weight:500;line-height:1;text-transform: var(--text-uppercase);
      &:hover {background:transparent;}
    }
    & .elementor-widget-html {position:absolute;bottom:-35px;color:var(--black);font-size:12px;left:-20px;
      &.inkl {right:-20px;left:auto;}
      &.ppl {left:130px;}
      p {margin:0;}
    }
  }
  .wp-post-image {max-width:180px;display:block;margin:50px auto 0;}
  div.images a img {max-width:380px !important;max-height:700px !important;width:auto !important;display:block;margin:50px auto 0;}
}
  
& #cleanbeauty {
  ul.elementor-icon-list-items {display:flex;flex-wrap:wrap;max-width:1000px;width:96%;
    > li {width:50%;padding:0 0 0;font-weight:400;font-size:20px;}
  }
}
  
 & #signature {
   & h2 {margin-block-end:20px;margin-block-start: 20px;}
 }
  
 & #about {padding-block-end:var(--container-padding-xl);padding-block-start:var(--container-padding-xl);clip-path: polygon(0 0, 100% 0, 100% 60%, 94% 100%, 0 100%);
    .label {background:var(--primary-dark);margin:0;color:var(--white);}
  }
  
& .narrow-content {
  > * {max-width:500px;}
}
& .e-n-accordion {margin-block-start: 30px;
  summary + div {border:0;}
  & .e-n-accordion-item {border-top:1px solid var(--white);
    &:last-of-type {border-bottom:1px solid var(--white);}
    & > .e-n-accordion-item-title {border:0;
      & .e-n-accordion-item-title-icon {padding-top:5px;}
      & svg {height:10px;}
    }
  }
  & .e-n-accordion-item-title-text {font-weight:var(--font-weight-bold);letter-spacing:0px;font-size:14px;text-transform: uppercase;}
}

& .ingredients-accordion .e-n-accordion {margin-block-start: 30px;
  & .e-n-accordion-item {border-top:1px solid var(--white);border-bottom:0;padding-top:10px;}
  & .e-n-accordion-item-title-text {font-weight:var(--font-weight-bold);letter-spacing:2px;font-size:14px;}
  & .e-n-accordion-item-title .e-n-accordion-item-title-icon {padding-top:0px;}
}
  
  .si-wrapper {
      max-width: var(--content-width);
      margin-inline: auto;
      display: flex;
  }
  
  .si-wrapper > :first-child {
      width: 50%;padding-right:50px;
      flex: 0 0 50%;
  }
  
  .si-wrapper > :last-child {padding:0;
      width: calc(
          50% + (100vw - var(--content-width)) / 2
      );
  
      flex: 0 0 calc(
          50% + (100vw - var(--content-width)) / 2
      );
  
      margin-right: calc(
          (100vw - var(--content-width)) / -2
      );
  }
  
  
  
  }
  
  
  
  
  /* Unten rechts */
  .cut {
clip-path: polygon(
      0 0,
      100% 0,
      100% 70%,
      92% 100%,
      0 100%
  );
  }
  /* Oben rechts */
  .cut.top-right {
      clip-path: polygon(
          0 0,
          calc(100% - var(--image-cut)) 0,
          100% var(--image-cut),
          100% 100%,
          0 100%
      );
  }
  
  /* Oben links */
  .cut.top-left {
      clip-path: polygon(
          var(--image-cut) 0,
          100% 0,
          100% 100%,
          0 100%,
          0 var(--image-cut)
      );
  }
  
  .cut.bottom-left {
      clip-path: polygon(
          0 0,
          100% 0,
          100% 100%,
          24% 100%,
          0 39%
      );
  }
  
  
  /* Unten links */
  .cut.bottom-leftt {
      clip-path: polygon(
          0 0,
          100% 0,
          100% 100%,
          var(--image-cut) 100%,
          0 calc(100% - var(--image-cut))
      );
  }
  
  .si-hide:not(.is-visible) {
      display: none !important;
  }
  
  .si-button-hidden {
      display: none !important;
  }
  .cb-more-content:not(.is-visible),
  .cb-more.is-hidden {
      display: none !important;
  }
  
  .single-product-left .woocommerce-product-gallery__trigger {
      display: none !important;
  }
  .woocommerce div.product div.images .woocommerce-product-gallery__image a {cursor:initial;}
  .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button.alt {color:var(--white);background:var(--primary);font-weight:400;text-transform:uppercase;}