/* 
Design CSS for Public Views
You can add custom CSS rules other CSS files.
*/

/* import icons */
@import url(font/sipico.css); /* sipico */

/* SIPA Grids and their items */

.sipa-content:not(ol,ul) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: auto;
    grid-auto-flow: dense;
}

.sipa-content:not([sipa-design*="items_gap"]) { /* don't break design settings */
    gap:1rem;
}

.sipa-content.design-preview {
    grid-template-columns: repeat(auto-fill, minmax(162px, 1fr));
}

.sipa-content > *,
.slick-track > * {
    position: relative;
    z-index: 1;
}
.sipa-content > *:hover,
.slick-track > *:hover {
    z-index: 2;
}
.slick-track > * > picture,
.sipa-content > * > picture,
.sipa-content > * > figure {
    display: block;
}
.slick-track > * > picture img,
.sipa-content > * > picture img,
.sipa-content > * > figure img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-position: center;
    object-fit: cover;
}
.slick-track > * > * ,
.sipa-content > * > * {
    margin: 0;
}
.slick-track > * > *:not(._go) + *:not(.edit-post-link),
.sipa-content > * > *:not(._go) + *:not(.edit-post-link) {
    margin-top: 1rem;
}
.slick-track > * > a._go,
.slick-track > * > .text > a._go,
.sipa-content > * > a._go,
.sipa-content > * > .text > a._go {
    position: absolute;
    z-index: 2;
    inset: 0;
    font-size: 0;
    margin: 0 !important;
}
.slick-track > * > .prod-actions,
.slick-track > * > .text > .prod-actions,
.sipa-content > * > .prod-actions,
.sipa-content > * > .text > .prod-actions {
    position: relative;
    z-index: 5;
}
.slick-track > * > .prod-actions a[href*="add-to-cart"],
.sipa-content > * > .prod-actions a[href*="add-to-cart"] {
    display: inline-block;
    line-height: 1.2;
    padding: .5rem 1rem;
    background-color: rgba(0,0,0,.05);
    text-decoration: none;
    color: #000000;
}
.slick-track > * > .prod-actions a[href*="add-to-cart"]:hover,
.sipa-content > * > .prod-actions a[href*="add-to-cart"]:hover {
    background-color: rgba(0,0,0,.65);
    text-decoration: none;
    color: #ffffff;
}
.slick-track  > .product > .onsale-box, 
.sipa-content > .product > .onsale-box {
    position: absolute;
    z-index: 2;
    background-color: #fff200;
    color: #000000;
    font-size: .8rem;
    padding: .5rem 1rem;
    font-weight: bold;
}
.slick-track  > .product > .onsale-box + *,
.sipa-content > .product > .onsale-box + * {
    margin-top: unset;
}
.slick-track > * > .author,
.sipa-content > * > .author {
    position: relative;
    z-index: 5;
}
.slick-track > * > .author > a,
.sipa-content > * > .author > a {
    display: flex;
    flex-direction: row;
    gap: .5rem;
    align-items: center;
}
.slick-track > * time,
.sipa-content > * time {
    display: block;
    text-decoration: none;
}

/* margin */

.sipa-content + *:not(.closer),
* + .sipa-content:not(.closer) {
    margin-top: 1.6rem;
}

/* # margin */

/* text alignment */

.text-center,
.text-center > *,
.text-center > * > * {
    text-align: center;
}
.text-left,
.text-left > *,
.text-left > * > * {
    text-align: left;
}
.text-right,
.text-right > *,
.text-right > * > * {
    text-align: right;
}

/* # text alignment */

/* processing animation */
.process {
    position: relative;
    z-index: 1;
}
.process::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 20;
    inset: 0;
    background-color: rgba(0,0,0,.45);
}
.process::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 30;
    width: 1.8rem;
    height: 1.6rem;
    inset: 0;
    margin: auto;
    border-radius: 50%;
    border: 3px solid #ffffff;
    border-color: #ffffff transparent ;
    border-width: 3px 0;
    animation: _spin 3s ease-in-out infinite;
}
@keyframes _spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/* # processing animation */

/* FLEX Layouts */

.sipa-content.flex:not(ol,ul) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
    box-sizing: border-box;
}

.flex > * {
    flex:1;
    box-sizing: border-box;
}

.flex[class*="col"] {
    justify-content: space-between;
}
.flex.col-1 {
    flex-direction: column;
}
.flex.col-1 > * {
    flex: unset;
    min-width: 100%;
    max-width: unset;
}
.flex.col-2 > * {
    min-width: calc(50% - 1rem);
}
.flex.col-2.no-wide > * {
    max-width: calc(50% - 1rem);
}

.flex.col-3 > * {
    min-width: calc(32% - .5rem);
}
.flex.col-3.no-wide > * {
    max-width: calc(32% - .5rem);
}

.flex.col-4 > * {
    min-width: calc(24% - 1rem);
}
.flex.col-4.no-wide > * {
    max-width: calc(24% - 1rem);
}

.flex.col-5 > * {
    min-width: calc(19% - 1rem);
}
.flex.col-5.no-wide > * {
    max-width: calc(19% - 1rem);
}

.flex.col-6 > * {
    min-width: calc(15.8% - 1rem);
}
.flex.col-6.no-wide > * {
    max-width: calc(15.8% - 1rem);
}

/* video */

video.sipa-video,
iframe.sipa-video-iframe {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

a.video-play {
    position: relative;
    display: block;
    z-index: 1;
    font-size: 0;
}
a.video-play > i.icon-play {
    display: block;
    position: absolute;
    z-index: 2;
    inset: 0;
    width: max-content;
    height: max-content;
    aspect-ratio: 1;
    padding: 1rem 1.5rem;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,1);
    color: #ffffff;
    margin: auto;
    font-size: 2rem;
    line-height: 0;
}
a.video-play:hover > i.icon-play {
    background-color: rgba(0,0,0,.25);
}
article > a.video-play.video-local,
figure > a.video-play.video-local {
    position: absolute;
    z-index: 5;
    inset: 0;
}
figure.video-thumbnail {
    position: relative;
    z-index: 1;
}

[data-ratio="landscape"]:is(video.sipa-video,iframe.sipa-video-iframe,figure) {
    aspect-ratio: 16/9;
}
[data-ratio="portrait"]:is(video.sipa-video,iframe.sipa-video-iframe,figure) {
    aspect-ratio: 9/16;
}
[data-ratio="square"]:is(video.sipa-video,iframe.sipa-video-iframe,figure) {
    aspect-ratio: 1/1;
}

video.sipa-video[data-video-type="popup"] {
    display: none;
}

@media screen and (max-width:1281px) and (min-width:1024px) {
    .flex.col-5 > *,
    .flex.col-6 > * {
        min-width: calc(32% - .5rem);
    }
    .flex.col-5.no-wide > *,
    .flex.col-6.no-wide > * {
        max-width: calc(32% - .5rem);
    }
}

@media screen and (max-width:1024px) {
    .flex.col-2 > *,
    .flex.col-3 > *,
    .flex.col-4 > *,
    .flex.col-5 > *,
    .flex.col-6 > * {
        min-width: calc(50% - 1rem);
    }
    .flex.col-2.no-wide > *,
    .flex.col-3.no-wide > *,
    .flex.col-4.no-wide > *,
    .flex.col-5.no-wide > *,
    .flex.col-6.no-wide > * {
        max-width: calc(50% - 1rem);
    }
}

@media screen and (max-width:769px) {
    .flex.col-2 > *,
    .flex.col-3 > *,
    .flex.col-4 > *,
    .flex.col-5 > *,
    .flex.col-6 > * {
        min-width: 100%;
    }
    .flex.col-2.no-wide > *,
    .flex.col-3.no-wide > *,
    .flex.col-4.no-wide > *,
    .flex.col-5.no-wide > *,
    .flex.col-6.no-wide > * {
        max-width: unset;
    }
}

/* # FLEX Layouts # */

.slick-slide a.edit-post-link,
[class*="sipa-"] a.edit-post-link,
.hentry .entry-content [class*="sipa-"] a.edit-post-link {
    position: absolute;
    z-index: 25;
    inset: .5rem auto auto .5rem;
    background-color: #444444;
    text-decoration: none;
    color: #ffffff;
    display: block;
    padding: .5rem 1rem;
    font-size: .8rem;
    line-height: 1.2;
}
.slick-slide a.edit-post-link:hover,
[class*="sipa-"] a.edit-post-link:hover,
.hentry .entry-content [class*="sipa-"] a.edit-post-link:hover {
    background-color: #000000;
    color: #ffffff;
    text-decoration: none;
}
[class*="sipa-"] .tab-item > a.edit-post-link,
.hentry .entry-content [class*="sipa-"] .tab-item > a.edit-post-link {
    inset: auto auto .5rem .5rem;
}

[class*="sipa-"] a.edit-post-link,
.slick-slide a.edit-post-link {
    opacity: 0;
}
[class*="sipa-"]:hover a.edit-post-link,
.slick-slide:hover a.edit-post-link {
    opacity: 1;
}


/* SIPA Tabs */

.sipa-tabs {
    position: relative;
    z-index: 1;
}
.sipa-tabs > .tab-clicks > ol,
.sipa-tabs > .tab-clicks > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: baseline;
    padding: 0;
    margin: 0;
    list-style: none;
}
.sipa-tabs > .tab-clicks > ol > li,
.sipa-tabs > .tab-clicks > ul > li {
    display: block;
    padding: 0;
}
.sipa-tabs > .tab-clicks > ol > li > a,
.sipa-tabs > .tab-clicks > ul > li > a {
    display: block;
    text-decoration: none;
    cursor: pointer;
    padding: .5rem 1rem;
    border-bottom: 3px solid rgba(0,0,0,.05);
}
.sipa-tabs > .tab-clicks > ol > li > a:hover,
.sipa-tabs > .tab-clicks > ul > li > a:hover {
    border-bottom-color:rgba(0,0,0,.10);
}
.sipa-tabs > .tab-clicks > ol > li > a.active,
.sipa-tabs > .tab-clicks > ul > li > a.active  {
    pointer-events: none;
    cursor: default;
    border-bottom-color:rgba(0,0,0,.35);
}
.sipa-tabs > .tab-clicks > ol > li > a > * {
    margin: 0;
    padding: 0;
}

.sipa-tabs > .tab-contents {
    padding-top: 1rem;
}
.sipa-tabs > .tab-contents > * {
    visibility: hidden;
    content-visibility: hidden;
    opacity: 0;
    position: relative;
    z-index: 1;
}
.sipa-tabs > .tab-contents > *.active {
    visibility: visible;
    content-visibility: visible;
    opacity: 1;
    z-index: 2;
}
.sipa-tabs > .tab-dropdown {
    display: none;
    border: 1px solid rgba(0,0,0,.10);
    position: relative;
    z-index: 1;
}
.sipa-tabs > .tab-dropdown:focus-within {
    border-color: rgba(0,0,0,.30);
    z-index: 20;
}
.sipa-tabs > .tab-dropdown > select {
    display: block;
    padding: .5rem;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    position: relative;
    z-index: 3;
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
}
.sipa-tabs > .tab-dropdown::after {
    content: "";
    display: block;
    font-size: .75rem;
    position: absolute;
    z-index: 2;
    inset: 0;
    width: .45rem;
    height: .45rem;
    border: 2px solid rgba(0,0,0,.30);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin: auto 1.2rem auto auto;
}

/* sipa accordeon */

.sipa-accordeon {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(0,0,0,.10);
}
.sipa-accordeon > li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}
.sipa-accordeon > li + li {
    border-top:1px solid rgba(0,0,0,.10);
}
.sipa-accordeon details {
    display: block;
    margin: 0;
    padding: 0;
}
.sipa-accordeon details > summary {
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.sipa-accordeon details > summary > * {
    display: block;
    margin: 0;
    padding: 1rem;
    padding-right: 2.4rem;
}
.sipa-accordeon details > summary::marker {
    display: none;
    content: "";
}
.sipa-accordeon details > summary::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 10px;
    height: 10px;
    margin: auto 1.5rem auto auto;
    border: 1px solid rgba(0,0,0,.30);
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
}
.sipa-accordeon details[open] > summary::after {
    transform: rotate(-135deg);
}
.sipa-accordeon details[open] .detail {
    padding: 1rem;
}
.sipa-accordeon details .detail > * {
    margin: 0;
}
.sipa-accordeon details .detail > * + * {
    margin-top:1.6rem;
}
.sipa-accordeon details[open] > summary {
    background-color: rgba(0,0,0,.05);
}
.sipa-accordeon > li a.edit-post-link {
    inset: .5rem .5rem auto auto !important;
}

/* SIPA Loader */
.sipaloader {
    position: relative;
    z-index: 1;
    padding: 1.6rem;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: .5rem;
}
.sipaloader > .entrance {
    position: absolute;
    z-index: 2;
    padding: 1rem;
}
.sipaloader > .entrance {
    font-size: .8rem;
}
.sipaloader > .entrance h2 {
    font-size: 1.2rem;
}
.sipaloader > .entrance h2 + * {
    margin-top: .5rem;
}
.sipaloader > .fake-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.6rem;
}
.sipaloader > .fake-content + .fake-content {
    margin-top: 1.6rem;
}
.sipaloader > .fake-content:nth-child(3),
.sipaloader > .fake-content:nth-child(5),
.sipaloader > .fake-content:nth-child(7) {
    flex-direction: row-reverse;
}
.sipaloader > .fake-content > .col {
    flex: 1;
}
.sipaloader > .fake-content > .col + * {
    flex: 3;
}
.sipaloader > .fake-content > .col > * {
    display: block;
    min-height: 2rem;
    background-color: #c3c3c3;
    border-radius: .5rem;
    background: linear-gradient(90deg, #c3c3c3, #f1f0f0, #c3c3c3);
    background-size: 300% 100%;
    animation: _glowing 6s infinite;
}
.sipaloader > .fake-content > .col.two > *:first-child {
    max-width: 65%;
}
.sipaloader > .fake-content > .col.two > *:last-child {
    max-width: 85%;
}
.sipaloader > .fake-content > .col.two > *:nth-child(1) {
    animation-delay: 200ms;
}
.sipaloader > .fake-content > .col.two > *:nth-child(2) {
    animation-delay: 500ms;
}
.sipaloader > .fake-content > .col.two > *:nth-child(3) {
    animation-delay: 400ms;
}
.sipaloader > .fake-content > .col.two > *:nth-child(4) {
    animation-delay: 630ms;
}
.sipaloader > .fake-content > .col.two > *:nth-child(5) {
    animation-delay: 780ms;
}
.sipaloader > .fake-content > .col > * + * {
    margin-top: 1rem;
    min-height: 1.5rem;
}
.sipaloader > .fake-content > .col > .img {
    display: block;
    height: 100%;
}

* + .sipaloader:not(.closer,.clicked),
.sipaloader:not(.clicked) + *:not(.closer) {
    margin-top: 3vw;
}
.sipaloader[style*="display: none"],
.sipaloader[style*="display:none"] {
    margin: 0 !important;
    width: 0;
    height: 0;
    overflow: hidden;
    position: absolute;
    z-index: 0;
}

/* sipa background block */

.sipa-bg-block {
    position: relative;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.sipa-bg-block:focus-within {
    z-index: 2;
}
.sipa-bg-block:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    inset: 0;
    background-color:transparent;
    inset: 0;
    margin: 0 !important;
}
.sipa-bg-block[data-theme="dark"]:before {
    background-color: rgba(0,0,0,.55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.sipa-bg-block[data-theme="light"]:before {
    background-color: rgba(255,255,255,.55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.sipa-bg-block > .sipa-bg-inner { /* default padding */
    padding: 6vw;
    position: relative;
    z-index: 5;
}
.sipa-bg-block[data-padding="zero"] > .sipa-bg-inner { /* zero padding */
    padding: 0;
}
.sipa-bg-block[data-padding="mini"] > .sipa-bg-inner { /* mini padding */
    padding: 3vw;
}
.sipa-bg-block[data-padding="maxi"] > .sipa-bg-inner { /* maxi padding */
    padding: 9vw;
}
.sipa-bg-block[data-padding="huge"] > .sipa-bg-inner { /* huge padding */
    padding: 12vw;
}
.sipa-bg-block[data-layout="wide"],
.sipa-bg-block[data-layout="full"] {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
:where(.editor-styles-wrapper) .wp-block:is(.sipa-bg-block[data-layout="wide"],
.sipa-bg-block[data-layout="full"]) {
    max-width: unset !important;
}
.sipa-bg-block[data-layout="wide"] > .sipa-bg-inner {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.sipa-bg-block[data-theme="dark"] :is(.sipa-content,.sipa-tabs,.sipa-bg-inner) :is(div,table,ol,ul,a,h1,h2,h4,h4,h5,h6,p,blockquote,section,article,header,footer,nav,label,code,pre,kbd,tt,var) {
    color: #ffffff;
}
.sipa-bg-block[data-theme="dark"] .slick-dots > li > button {
    background-color: rgba(255,255,255,.25);
}
.sipa-bg-block[data-theme="dark"] .slick-dots > li.slick-active > button {
    background-color: rgba(255,255,255,.45);
}
.sipa-bg-block[data-theme="dark"] .slick-arrow {
    background-color: rgba(255,255,255,.45);
}
.sipa-bg-block[data-theme="dark"] .slick-arrow:hover {
    background-color: rgba(255,255,255,.85);
}
.sipa-bg-block[data-theme="dark"] .sipa-accordeon {
    border-color: rgba(255,255,255,.25);
}
.sipa-bg-block[data-theme="dark"] .sipa-accordeon > li + li {
    border-top-color: rgba(255,255,255,.25);
}
.sipa-bg-block[data-theme="dark"] .sipa-accordeon details > :is(summary,.detail),
.sipa-bg-block[data-theme="dark"] .sipa-accordeon details > :is(summary,.detail) > * {
    color: #ffffff;
}
.sipa-bg-block[data-theme="dark"] .sipa-accordeon details[open] > summary {
    background-color: rgba(255,255,255,.05);
}
.sipa-bg-block[data-theme="dark"] .sipa-tabs > .tab-dropdown {
    background-color: rgba(255,255,255,.55);
}
.sipa-bg-block[data-theme="dark"] .sipa-tabs > .tab-clicks > ol > li > a,
.sipa-bg-block[data-theme="dark"] .sipa-tabs > .tab-clicks > ul > li > a {
    border-bottom-color: rgba(255,255,255,.15);
}
.sipa-bg-block[data-theme="dark"] .sipa-tabs > .tab-clicks > ol > li > a.active,
.sipa-bg-block[data-theme="dark"] .sipa-tabs > .tab-clicks > ul > li > a.active {
    border-bottom-color: rgba(255,255,255,.55);
}

@keyframes _glowing {
    0% {
      background-position: 0% 0%;
    }
    50% {
      background-position: 200% 0%;
    }
    100% {
      background-position: 0% 0%;
    }
}


/* transitions */


.trans300,
.sipa-tabs > .tab-clicks > ol > li > a,
.sipa-tabs > .tab-clicks > ul > li > a,
.sipa-pagination > *,
._go > a, a._go { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
.trans700 { -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -ms-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; }

@media screen and (min-width:1281px) {
    .sipa-bg-block[data-layout="wide"]:is([data-padding="mini"],[data-padding="maxi"],[data-padding="huge"]) > .sipa-bg-inner {
        padding-left: 0;
        padding-right: 0;
    }
}

@media screen and (min-width:770px) { 

    .sipa-tabs.vertical-tabs {
        display: flex;
        flex-direction: row;
        gap: 1.5rem;
        align-items: stretch;
    }
    .sipa-tabs.vertical-tabs > .tab-clicks {
        max-width: 25%;
        min-width: 15%;
    }
    .sipa-tabs.vertical-tabs > .tab-clicks > ol {
        display: block;
    }
    .sipa-tabs.vertical-tabs  > .tab-contents {
        padding-top: unset;
        max-width: calc(75% - .75rem);
    }

}

@media screen and (max-width:1440px) {
    .sipa-bg-block[data-layout="wide"] > .sipa-bg-inner {
        max-width: unset;
    }
}

@media screen and (max-width:769px) {
    /* mobile */
    .sipa-tabs > .tab-clicks {
        display: none;
    }
    .sipa-tabs > .tab-dropdown {
        display: block;
    }
    /* _last mobile */
}

@media screen and (orientation: landscape) {
    ._mobile {
        display: none !important;
    }
}

@media screen and (orientation: portrait) {
    ._desktop {
        display: none !important;
    }
    .sipa-bg-block > .sipa-bg-inner { 
        padding: 6vh;
    }
    .sipa-bg-block[data-padding="mini"] > .sipa-bg-inner { 
        padding: 3vh;
    }
    .sipa-bg-block[data-padding="maxi"] > .sipa-bg-inner { 
        padding: 9vh;
    }
    .sipa-bg-block[data-padding="huge"] > .sipa-bg-inner { 
        padding: 12vh;
    }
    /* _last vertical mobile */
}