/* The sitewide module lives in the Divi Header so it can be edited once. Paint
   it over the following page section without giving it a separate strip. */
.et-l--header:has(.stipino-breadcrumb-v2-sitewide) {
    position: relative;
    overflow: visible;
}
/* The existing Header ::after is a 2px green strip over the dropdown path. */
.et-l--header:has(.stipino-breadcrumb-v2-sitewide)::after {
    content: none !important;
}
/* Keep Divi dropdowns above the separate, absolutely placed breadcrumb row. */
.et-l--header:has(.stipino-breadcrumb-v2-sitewide) :is(.stipino-header-new, .stipino-header-old) {
    position: relative;
    z-index: 3;
}
/* Divi's Theme Builder Body adds the more specific
   .et-db #et-boc .et-l .et_pb_section default (relative, white). Keep the
   shared Header slot above that default on native and custom pages alike. */
.et-db #et-boc .et-l.et-l--header .et_pb_section.stipino-breadcrumb-v2-sitewide,
.et-l--header .stipino-breadcrumb-v2-sitewide {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 2;
    width: 100%;
    background: transparent;
}
/* An empty global Header shortcode must not cover excluded screens or the
   separate Single Product instance. */
.stipino-breadcrumb-v2-sitewide:not(:has(.stipino-breadcrumb-v2)) { display: none; }
/* The Divi Row owns responsive gap and position; the Code module owns text,
   spacing and alignment. Neither receives a background from this component. */
.et-db #et-boc .et-l .stipino-breadcrumb-v2-control,
.stipino-breadcrumb-v2-control {
    --stipino-bc-v2-gap: var(--horizontal-gap, 0.5em);
    --stipino-bc-v2-vertical: var(--vertical-gap, 0px);
    --stipino-bc-v2-auto-text: #0d3a20;
    color: var(--stipino-bc-v2-auto-text);
    font-size: 14px;
    line-height: 1.4;
}
.stipino-breadcrumb-v2-control {
    /* Divi 5 Rows are flex containers. A long unbreakable product name must
       not give their Column or Code module an intrinsic mobile width. */
    min-width: 0;
}
.stipino-breadcrumb-v2-control > .et_pb_column,
.stipino-breadcrumb-v2-control .et_pb_code,
.stipino-breadcrumb-v2-control .et_pb_code_inner {
    min-width: 0;
    max-width: 100%;
}
/* The shared Single Product Hero paints a dark scene over its light5 section.
   Use one template-wide dark-scene fallback, including before JS initializes. */
.et-db #et-boc .et-l .stipino-product-hero .stipino-breadcrumb-v2-control,
.et-db #et-boc .et-l.stipino-product-hero .stipino-breadcrumb-v2-control,
.stipino-product-hero .stipino-breadcrumb-v2-control {
    --stipino-bc-v2-auto-text: #f4b83e;
    --stipino-bc-v2-separator: #f4b83e;
    --stipino-bc-v2-uncertain-color: #f4b83e;
    --stipino-bc-v2-uncertain-separator: #f4b83e;
}
:is(.boja-primary, .boja-dark, .boja-night) .stipino-breadcrumb-v2-control {
    --stipino-bc-v2-uncertain-color: #f4b83e;
    --stipino-bc-v2-uncertain-separator: #f4b83e;
}
.stipino-breadcrumb-v2 {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding-block: var(--stipino-bc-v2-vertical, 0px);
    color: inherit;
    font-family: "Montserrat", Arial, sans-serif;
    font-weight: 800;
    white-space: nowrap;
}
.stipino-breadcrumb-v2 :is(a, .stipino-bc-v2__current span) {
    font-family: inherit;
    font-weight: inherit;
}
.et-db #et-boc .et-l .stipino-breadcrumb-v2 ol,
.stipino-breadcrumb-v2 ol {
    display: inline-flex;
    align-items: center;
    column-gap: var(--stipino-bc-v2-gap, 0.5em);
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    vertical-align: middle;
    overflow: hidden;
}
.stipino-breadcrumb-v2 li {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    flex: 0 0 auto;
    white-space: nowrap;
}
.stipino-breadcrumb-v2 li[hidden] { display: none; }
.stipino-breadcrumb-v2 li:not(:first-child)::before {
    content: '›';
    color: var(--stipino-bc-v2-separator, #cf2e2e);
    font-weight: 700;
    margin-right: var(--stipino-bc-v2-gap, 0.5em);
    flex: none;
}
.et-db #et-boc .et-l .stipino-breadcrumb-v2 a,
.stipino-breadcrumb-v2 a {
    color: inherit;
    text-decoration: none;
}
.stipino-breadcrumb-v2 a:hover { text-decoration: underline; }
.stipino-breadcrumb-v2 a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}
.stipino-breadcrumb-v2 svg { display: block; }
.stipino-breadcrumb-v2 .stipino-bc-v2__current {
    flex: 0 1 auto;
    overflow: hidden;
}
.stipino-bc-v2__current span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stipino-breadcrumb-v2[data-measuring] .stipino-bc-v2__current {
    flex: 0 0 auto;
    overflow: visible;
}
.stipino-breadcrumb-v2[data-measuring] .stipino-bc-v2__current span { overflow: visible; }
@media (min-width: 768px) {
    .stipino-breadcrumb-v2 { white-space: normal; }
    .stipino-breadcrumb-v2 ol { flex-wrap: wrap; overflow: visible; }
    .stipino-breadcrumb-v2 .stipino-bc-v2__current { flex: 1 1 auto; overflow: visible; }
    .stipino-bc-v2__current span {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}
@media (max-width: 767px) {
    .et-db #et-boc .et-l .stipino-breadcrumb-v2-control,
    .stipino-breadcrumb-v2-control { font-size: 12px; }
    .stipino-breadcrumb-v2 {
        max-width: 100%;
        overflow: hidden;
    }
    .et-db #et-boc .et-l .stipino-breadcrumb-v2 ol,
    .stipino-breadcrumb-v2 ol {
        display: flex;
        width: 100%;
    }
    .stipino-breadcrumb-v2:not([data-fitted]) .stipino-bc-v2__middle { display: none; }
}