/* Shared shop, product and customer breadcrumbs. Uses the existing color palettes. */
html body :is(.cp-commerce,.cp-customer) :is(.woocommerce-breadcrumb,.cp-customer-breadcrumb){
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 12px;
    box-sizing:border-box;
    inline-size:100%;
    min-inline-size:0;
    max-inline-size:100%;
    margin-block:0 24px;
    margin-inline:0;
    padding-block:10px;
    padding-inline:16px;
    border:1px solid var(--cp-border,#39362e);
    border-inline-start:3px solid var(--cp-border-accent,#9e854d);
    border-radius:7px;
    background:var(--cp-surface-1,#10100f);
    color:var(--cp-muted,#b1aea4);
    font-family:inherit;
    font-size:.8125rem;
    font-weight:400;
    line-height:1.8;
    text-align:start;
    overflow-wrap:anywhere;
}
html body :is(.cp-commerce,.cp-customer) :is(.woocommerce-breadcrumb,.cp-customer-breadcrumb) .cp-breadcrumb__item{
    display:inline-flex;
    align-items:center;
    gap:12px;
    min-inline-size:0;
    max-inline-size:100%;
    color:var(--cp-muted,#b1aea4);
}
/* Attach the separator to the following item so it never wraps onto its own line. */
html body :is(.cp-commerce,.cp-customer) :is(.woocommerce-breadcrumb,.cp-customer-breadcrumb) .cp-breadcrumb__item+.cp-breadcrumb__item::before{
    content:"";
    display:block;
    flex:0 0 .4em;
    inline-size:.4em;
    block-size:.4em;
    box-sizing:border-box;
    border-block-start:1.5px solid var(--cp-border-strong,#827863);
    border-inline-end:1.5px solid var(--cp-border-strong,#827863);
    transform:rotate(45deg);
}
html body :is(.cp-commerce,.cp-customer) :is(.woocommerce-breadcrumb,.cp-customer-breadcrumb):dir(rtl) .cp-breadcrumb__item+.cp-breadcrumb__item::before{
    transform:rotate(-45deg);
}
html body :is(.cp-commerce,.cp-customer) :is(.woocommerce-breadcrumb,.cp-customer-breadcrumb) a:any-link{
    display:inline-block;
    min-inline-size:0;
    max-inline-size:100%;
    border-radius:3px;
    color:var(--cp-accent,#e8c875);
    font:inherit;
    text-decoration:none;
    text-underline-offset:.3em;
    transition:color .15s ease;
}
html body :is(.cp-commerce,.cp-customer) :is(.woocommerce-breadcrumb,.cp-customer-breadcrumb) a:any-link:hover{
    color:var(--cp-accent-hover,#f5dda2);
    text-decoration:underline;
}
html body :is(.cp-commerce,.cp-customer) :is(.woocommerce-breadcrumb,.cp-customer-breadcrumb) a:any-link:focus-visible{
    outline:2px solid var(--cp-focus,#f0d48a);
    outline-offset:4px;
    text-decoration:underline;
}
html body :is(.cp-commerce,.cp-customer) :is(.woocommerce-breadcrumb,.cp-customer-breadcrumb) .cp-breadcrumb__item:last-child{
    color:var(--cp-heading,#f8f5ed);
    font-weight:600;
}
/* The archive spans the viewport; align its trail with the existing shop content. */
html body .cp-shop>.woocommerce-breadcrumb{
    inline-size:min(var(--cp-shop-width,1180px),82%);
    margin-inline:auto;
    margin-block:24px 0;
}
@media(max-width:1023px){
    html body .cp-shop>.woocommerce-breadcrumb{inline-size:88%;}
}
@media(max-width:767px){
    html body :is(.cp-commerce,.cp-customer) :is(.woocommerce-breadcrumb,.cp-customer-breadcrumb){gap:6px 10px;padding-block:9px;padding-inline:12px;margin-block-end:18px;font-size:.75rem;}
    html body :is(.cp-commerce,.cp-customer) :is(.woocommerce-breadcrumb,.cp-customer-breadcrumb) .cp-breadcrumb__item{gap:10px;}
    html body .cp-shop>.woocommerce-breadcrumb{inline-size:92%;margin-block:18px 0;}
}
@media(prefers-reduced-motion:reduce){
    html body :is(.cp-commerce,.cp-customer) :is(.woocommerce-breadcrumb,.cp-customer-breadcrumb) a:any-link{transition:none;}
}

/* Alternate breadcrumb markup used on the live shop and product pages.
 * Some integrations render the trail outside .cp-commerce. Scope these rules to
 * commerce body classes as well as the theme wrappers. Keep inline text and the
 * original separators intact; .breadcrumb-trail does not require our item spans.
 */
html :is(body.woocommerce,body.woocommerce-page,body.cp-customer-page,body .cp-commerce,body .cp-customer) .breadcrumb-trail{
    display:block;
    box-sizing:border-box;
    inline-size:100%;
    min-inline-size:0;
    max-inline-size:100%;
    margin-block:0 24px;
    margin-inline:0;
    padding-block:10px;
    padding-inline:16px;
    border:1px solid var(--cp-border,#39362e);
    border-inline-start:3px solid var(--cp-border-accent,#9e854d);
    border-radius:7px;
    background:var(--cp-surface-1,#10100f);
    color:var(--cp-heading,#f8f5ed);
    font-family:inherit;
    font-size:.8125rem;
    font-weight:400;
    line-height:1.8;
    text-align:start;
    white-space:normal;
    overflow-wrap:anywhere;
}
html :is(body.woocommerce,body.woocommerce-page,body.cp-customer-page,body .cp-commerce,body .cp-customer) .breadcrumb-trail a:any-link{
    display:inline;
    border-radius:3px;
    color:var(--cp-accent,#e8c875);
    font:inherit;
    white-space:normal;
    overflow-wrap:anywhere;
    text-decoration:none;
    text-underline-offset:.3em;
    transition:color .15s ease;
}
html :is(body.woocommerce,body.woocommerce-page,body.cp-customer-page,body .cp-commerce,body .cp-customer) .breadcrumb-trail a:any-link:hover{
    color:var(--cp-accent-hover,#f5dda2);
    text-decoration:underline;
}
html :is(body.woocommerce,body.woocommerce-page,body.cp-customer-page,body .cp-commerce,body .cp-customer) .breadcrumb-trail a:any-link:focus-visible{
    outline:2px solid var(--cp-focus,#f0d48a);
    outline-offset:4px;
    text-decoration:underline;
}
html :is(body.woocommerce,body.woocommerce-page,body.cp-customer-page,body .cp-commerce,body .cp-customer) .breadcrumb-trail :is(.sep,.separator,.trail-separator){
    color:var(--cp-muted,#b1aea4);
    margin-inline:.35em;
}
html :is(body.woocommerce,body.woocommerce-page,body.cp-customer-page,body .cp-commerce,body .cp-customer) .breadcrumb-trail :is(.trail-end,.current-item,[aria-current="page"]){
    color:var(--cp-heading,#f8f5ed);
    font-weight:600;
}
/* Also allow a list-based trail, retaining the integration's own separators. */
html :is(body.woocommerce,body.woocommerce-page,body.cp-customer-page,body .cp-commerce,body .cp-customer) .breadcrumb-trail :is(ol,ul){
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:6px 12px;
    margin:0;
    padding:0;
    list-style:none;
}
html :is(body.woocommerce,body.woocommerce-page,body.cp-customer-page,body .cp-commerce,body .cp-customer) .breadcrumb-trail li{
    min-inline-size:0;
    max-inline-size:100%;
    margin:0;
    padding:0;
    list-style:none;
}
/* Viewport-based caps also work when a breadcrumb has an extra wrapper. The
 * max-inline-size above prevents it from exceeding a narrower parent container.
 */
html body .cp-shop .breadcrumb-trail,
html body:is(.woocommerce,.woocommerce-page):not(.single-product,.cp-customer-page) .breadcrumb-trail{
    inline-size:min(var(--cp-shop-width,1180px),82vw);
    margin-inline:auto;
    margin-block:24px;
}
html body.single-product .breadcrumb-trail{
    inline-size:min(1280px,92vw);
    margin-inline:auto;
}
html body.cp-customer-page .breadcrumb-trail{
    inline-size:min(1240px,92vw);
    margin-inline:auto;
}
@media(max-width:1023px){
    html body .cp-shop .breadcrumb-trail,
    html body:is(.woocommerce,.woocommerce-page):not(.single-product,.cp-customer-page) .breadcrumb-trail{inline-size:88vw;}
}
@media(max-width:767px){
    html :is(body.woocommerce,body.woocommerce-page,body.cp-customer-page,body .cp-commerce,body .cp-customer) .breadcrumb-trail{padding-block:9px;padding-inline:12px;margin-block-end:18px;font-size:.75rem;}
    html body .cp-shop .breadcrumb-trail,
    html body:is(.woocommerce,.woocommerce-page):not(.single-product,.cp-customer-page) .breadcrumb-trail{inline-size:92vw;margin-block:18px;}
}
/* If the integration nests its trail inside another styled breadcrumb, keep
 * one visible bar. The outer breadcrumb supplies the padding and border.
 */
html :is(body.woocommerce,body.woocommerce-page,body.cp-customer-page,body .cp-commerce,body .cp-customer) :is(.woocommerce-breadcrumb,.cp-customer-breadcrumb,.breadcrumb-trail) .breadcrumb-trail{
    inline-size:100%;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    font:inherit;
}
@media(prefers-reduced-motion:reduce){
    html :is(body.woocommerce,body.woocommerce-page,body.cp-customer-page,body .cp-commerce,body .cp-customer) .breadcrumb-trail a:any-link{transition:none;}
}