/*
Theme Name: Divi Child Theme
Theme URI: http://treehighroots.de
Description: Theme by Andreas Geibert
Author: treehighroots Andreas Geibert
Author URI: http://treehighroots.de
Template: Divi
Version: 2.1.00
*/

/* ==========================================
   TABLE OF CONTENTS:
   
   1. Component Styles
      1.1 Icon New
      1.2 APO Now Teaser
      1.3 Buy Button Styles
      
   2. Layout Elements
      2.1 Position Adjustments
      2.2 Header Elements
      
   3. Media Queries
      3.1 Mobile (max-width: 980px)
      3.2 Desktop Responsive Breakpoints
============================================ */

/* ==========================================
   1. COMPONENT STYLES
============================================ */

body.et_divi_theme {
    color: #626262;
}

body.et_divi_theme .et_pb_with_background {
    color: white;
}

/* 1.1 Icon New */
.icon-new {
    position: relative;
}

.icon-new::before {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    transform: translate(0, -50%);
    right: 7%;
    content: "Neu";
    height: 100px;
    width: 100px;
    background-color: #e50150;
    color: #fff;
    border-radius: 50%;
    font-size: 25px;
    z-index: 5;
}

/* 1.2 APO Now Teaser */
.aponow-teaser {
    position: relative;
    margin-top: 60px;
    padding-top: 3rem !important;
}

.aponow-teaser h2 {
    color: white;
}

.aponow-teaser::before {
    position: absolute;
    top: 0;
    transform: translate(360px, -50%);
    left: 50%;
    content: "";
    background: url("/wp-content/themes/Divi_child/assets/images/oct-cart.svg") no-repeat;
    background-size: 65px;
    background-position: 45% 48%;
    height: 125px;
    width: 125px;
    background-color: #e50150;
    border-radius: 50%;
}

/* 1.3 Buy Button Styles */
.oct-buy-btn {
    position: fixed;
    right: 0.5882352941rem;
    bottom: 0.5882352941rem;
    z-index: 9999;
}

.oct-buy-btn--header {
    position: absolute;
    right: calc(0% - 250px);
    top: 25px;
    z-index: 9999;
    transition: top 0.6s ease;
}

.et-fixed-header .oct-buy-btn--header {
    top: 8px;
}

/* Button styling */
body .oct-buy-btn--header button,
body .oct-buy-btn--header a {
    padding: 8px 30px 8px 15px !important;
    border-radius: 26px;
    color: white !important;
    background-color: #e1013e !important;
    font-size: 16px !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* hover effect */
body .oct-buy-btn--header button:hover,
body .oct-buy-btn--header a:hover {
    background-color: #007cc4 !important;
}

body .oct-buy-btn--header button sup,
body .oct-buy-btn--header a sup {
    font-size: 12px !important;
}

body .oct-buy-btn button,
body .oct-buy-btn a {
    display: inline-block;
    background-color: #e1013e;
    color: rgb(255, 255, 255);
    font-family: "Co Text";
    font-size: 14px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 26px;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}

body .oct-buy-btn button sup,
body .oct-buy-btn a sup {
    font-size: 8px;
    font-weight: 400;
    color: #fff;
}

body .oct-buy-btn button.et_pb_button:after,
body .oct-buy-btn a.et_pb_button:after {
    line-height: 1.4em;
}

.et_pb_text_inner p > a,
.et_pb_text_inner p strong > a {
    color: #007cc4;
    transition: color 0.3s ease;
}
.et_pb_text_inner p > a:hover,
.et_pb_text_inner p > a:focus,
.et_pb_text_inner p strong > a:hover,
.et_pb_text_inner p strong > a:focus {
    color: #e50150;
}

@media (min-width: 981px) {
    .oct-icon-infobox .et_pb_row_4col {
        display: flex;
        align-items: stretch;
    }

    .oct-icon-infobox .et_pb_row_4col .et_pb_column {
        display: flex;
        flex-direction: column;
    }

    .oct-icon-infobox .et_pb_row_4col .et_pb_button_module_wrapper {
        margin-top: auto;
    }
}

/* ==========================================
   2. LAYOUT ELEMENTS
============================================ */

/* 2.1 Position Adjustments */
.et_pb_scroll_top.et-pb-icon,
.pflichttext {
    right: inherit !important;
    left: 16px;
}

/* 2.2 Header Elements */
#page-container #top-header .container #et-secondary-menu #et-secondary-nav li:first-child {
    background-color: #d7024e;
}

.logo_container a {
    position: relative;
    z-index: 99;
}

/* ==========================================
   3. MEDIA QUERIES
============================================ */

/* 3.1 Mobile (max-width: 980px) */
@media (max-width: 980px) {
    /* Icon New - Mobile */
    .icon-new {
        margin-top: 1.5rem;
    }

    .icon-new::before {
        right: 3%;
    }

    /* APO Now Teaser - Mobile */
    .aponow-teaser {
        padding-top: 2rem !important;
    }

    .aponow-teaser::before {
        height: 100px;
        width: 100px;
        background-size: 50px;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* Header elements - Mobile */
    .et-fixed-header .mobile_menu_bar {
        padding-bottom: 5px;
    }

    .et_secondary_nav_only_menu #main-header {
        top: 92px !important;
    }

    /* Header styling - Mobile */
    #page-container #main-header #et-top-navigation #et_top_search {
        background-color: #007cc4;
    }

    #page-container #main-header #et_mobile_nav_menu .mobile_nav .mobile_menu_bar {
        background-color: #007cc4;
    }

    #page-container #top-header .container #et-secondary-menu #et-secondary-nav li a {
        white-space: normal !important;
        font-size: 14px !important;
    }
}

/* 3.2 Desktop Responsive Breakpoints */
@media screen and (min-width: 980px) {
    #et_search_icon:after {
        content: " ";
    }
}

@media only screen and (min-width: 981px) and (max-width: 1023px) {
    #page-container #main-header .et_menu_container #et-top-navigation {
        transform: translateX(-11rem);
    }
}

@media screen and (min-width: 1024px) {
    #page-container #main-header .et_menu_container #et-top-navigation {
        transform: translateX(-13rem);
    }
}

@media screen and (min-width: 1050px) {
    #page-container #main-header .et_menu_container #et-top-navigation {
        transform: translateX(-14rem);
    }
}

@media screen and (min-width: 1280px) {
    #page-container #main-header .et_menu_container #et-top-navigation {
        transform: translateX(-8rem);
    }
}

/* Navigation Pills Styles */
.nav-pills {
    list-style: none;
    padding: 0 !important;
    margin: 20px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.nav-pills__item {
    margin: 0;
    padding: 0 !important;
}
.nav-pills__item:before {
    margin: 0;
    padding: 0 !important;
    content: "" !important;
    display: none !important;
}

.nav-pills__link {
    display: inline-block;
    padding: 0 20px;
    background-color: #9ca3af;
    color: white;
    text-decoration: none !important;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-pills__link:hover {
    background-color: #6b7280;
    transform: translateY(-1px);
}

.nav-pills__link--active {
    background-color: #dc2746;
}

.nav-pills__link--active:hover {
    background-color: #b91c1c;
}

.oct-pic-text-column span {
    display: block;
    margin-top: 8px;
    color: #999999;
}

@media (max-width: 767px) {
    #page-container .row-anchor-list {
        margin-left: auto !important;
    }
    #page-container .row-anchor-list .et_pb_column .et_pb_module:first-child {
        padding-left: 0 !important;
    }
}

.page-id-12312 #page-container #top-header .container #et-secondary-menu #et-secondary-nav li:first-child,
.page-id-12367 #page-container #top-header .container #et-secondary-menu #et-secondary-nav li:first-child {
    background-color: #d7024e !important;
}

@media (max-width: 425px) {
    #page-container #top-header .container #et-secondary-menu #et-secondary-nav li a {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        font-size: 12px !important;
    }
}

/* Safari layout fix: negative-margin sections on wundpflegeroutine page (ID 12870)
   Row_7 / section_5 (Schritt 1) and row_10 / section_7 (Schritt 2) overlap product
   cards into the following sections. Safari paints the following section content too
   early, so we define the stacking order explicitly and add Safari-only spacing. */
.page-id-12870 .et_pb_section_5,
.page-id-12870 .et_pb_section_7 {
    isolation: isolate;
    position: relative;
    z-index: 10;
}

.page-id-12870 .et_pb_row_7,
.page-id-12870 .et_pb_row_10 {
    position: relative;
    z-index: 20;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.page-id-12870 .et_pb_section_6,
.page-id-12870 .et_pb_section_8 {
    position: relative;
    z-index: 0;
}

@supports (-webkit-hyphens: none) {
    .page-id-12870 .et_pb_section_6 {
        padding-top: 214px !important;
    }

    .page-id-12870 .et_pb_section_8 {
        padding-top: 740px !important;
    }
}

/* Code from landingpage */
/* Wound Care Steps Infographic */
.wound-care-steps {
    background: linear-gradient(135deg, #a8a8a8 0%, #8a8a8a 100%);
    border-radius: 20px;
    padding: 30px;
    margin: 20px 0 30px 0;
    color: white;
}

.wound-care-steps__header {
    text-align: center;
    margin-bottom: 40px;
}

.wound-care-steps__title {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin: 0;
    line-height: 1.3;
}

.wound-care-steps__container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.wound-care-steps__product {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -35px;
    right: 27%;
}

.wound-care-steps__product-image {
    max-width: 80px;
    height: auto;
}

.wound-care-step {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.wound-care-step__icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

.wound-care-step__number {
    position: absolute;
    top: -10px;
    left: -10px;
    background: #007ac3;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    z-index: 2;
}

.wound-care-step__icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
}

.wound-care-step__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin-left: -22px;
}

.wound-care-step__svg {
    width: 35px;
    height: 35px;
    fill: #007ac3;
}

.wound-care-step__content {
    text-align: center;
}

.wound-care-step__heading {
    font-size: 18px;
    font-weight: 700;
    color: white !important;
    margin: 0;
    line-height: 1.2;
    padding-bottom: 8px;
}

.wound-care-step__text {
    font-size: 14px;
    color: white !important;
    line-height: 1.4;
    margin: 0;
    max-width: 200px;
    margin: 0 auto;
    word-wrap: normal;
    word-break: normal;
    hyphens: none;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
}

.wound-care-step__text sup {
    font-size: 10px;
}

/* Mobile Responsive */
@media (max-width: 980px) {
    .wound-care-steps {
        padding: 20px;
        margin: 20px 0;
    }

    .wound-care-steps__title {
        font-size: 20px;
    }

    .wound-care-steps__container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .wound-care-steps__product {
        order: -1;
        margin-bottom: 20px;
    }

    .wound-care-step__text {
        max-width: 100%;
        font-size: 16px;
    }

    .wound-care-step__icon {
        width: 100px;
        height: 100px;
    }

    .wound-care-step__svg {
        width: 30px;
        height: 30px;
    }

    .wound-care-step__number {
        width: 25px;
        height: 25px;
        font-size: 14px;
    }

    .wound-care-steps__product {
        top: -35px;
        right: 0%;
    }
}

p.oct-text__p--title {
    font-size: 19px;
}

.oct-no-hyphens {
    hyphens: none;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
}

.oct-text__color--blue,
.oct-text__color--blue p {
    color: #007ac3 !important;
}
.oct-text__color--red,
.oct-text__color--red p {
    color: #dc2746 !important;
}

.oct-text__pb--no {
    padding-bottom: 0.4rem;
}

.oct-negative-margin--16 {
    margin-top: -16px !important;
}
.oct-margin-top--10 {
    margin-top: 10px !important;
}

.oct-col--70-30 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    margin: 20px 0;
}

.oct-col--70-30 > div:first-child {
    flex: 0 0 70%;
}

.oct-col--70-30 > img {
    flex: 0 0 28%;
    max-width: 28%;
    height: auto;
    object-fit: contain;
}

/* Mobile responsive for 70-30 layout */
@media (max-width: 768px) {
    .oct-col--70-30 {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .oct-col--70-30 > div:first-child,
    .oct-col--70-30 > img {
        flex: none;
        max-width: 100%;
    }

    .oct-col--70-30 > div:first-child {
        text-align: left; /* Keep text left-aligned */
    }
}

/* ==========================================
   MOBILE-FIRST RESPONSIVE IMPROVEMENTS
============================================ */

/* Enhanced mobile breakpoints */
@media (max-width: 481px) {
    .product-specifications {
        margin: 10px -10px; /* Extend to screen edges on mobile */
        padding: 0 10px;
    }

    .oct-col--70-30 {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .oct-col--70-30 img {
        max-width: 100%;
        height: auto;
    }
}

/* Medium screens optimization */
@media (min-width: 482px) and (max-width: 768px) {
    .oct-col--70-30 {
        gap: 15px;
    }
}

#faqs h2,
#faqs h3,
#faqs .h5.et_pb_toggle_title {
    color: rgb(89, 89, 89) !important;
}

#faqs .et_pb_accordion .et_pb_toggle:first-child {
    border-top: 1px solid rgb(89, 89, 89) !important;
}

#faqs .et_pb_accordion .et_pb_toggle {
    border-bottom: 1px solid rgb(89, 89, 89) !important;
}

/* ==========================================
   Fix: full-wrapper-link inside oct-column-halb
   The <a> wrapper must behave like an et_pb_column_1_2
============================================ */
.oct-column-halb > .full-wrapper-link--et_pb_column {
    width: 47.25%;
    flex: 0 1 auto;
    order: 1;
}

.oct-column-halb > .full-wrapper-link--et_pb_column:not(:last-child) {
    margin-right: 32px !important;
}

@media screen and (max-width: 980px) {
    .oct-column-halb > .full-wrapper-link--et_pb_column:not(:last-child) {
        width: 100%;
        margin-right: 0 !important;
    }
}

.oct-column-halb > .full-wrapper-link--et_pb_column > .et_pb_column {
    width: 100%;
}

@media (max-width: 980px) {
    .oct-column-halb > .full-wrapper-link--et_pb_column {
        width: 100%;
    }
}

#page-container #top-header .container #et-secondary-menu #et-secondary-nav li a {
    padding: 10px 5px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}

body.et_fixed_nav.et_secondary_nav_only_menu #page-container #main-header {
    top: 65px !important;
}