@charset 'utf-8';
/*
 * name:single.css
 * author:sovanda nulo
*/

/* single
------------------------------------------------ */

#pages.single .wrap { max-width: 99em; }
#pages.single .pages--desc { max-width: 45em; }

.single--block { display: flex; flex-wrap: wrap; justify-content: space-between; }
.single__pic { width: 45% }
.single__pic--main { display: block; position: relative; width: 100%; height: 0; padding-bottom: 100%; }
.single__pic--zoom { padding: .75em; position: absolute; left: 1.5em; top: 1.5em; width: 3.4em; height: 3.4em; border-radius: 50%; background: rgba(255, 255, 255, .75); box-sizing: border-box; z-index: 2; transition: linear .2s; pointer-events: none; }
.single__pic--break,
.single__pic--big { display: block; overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.single__pic--big { opacity: 0; visibility: hidden; }
.single__pic--big img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.2); transition: ease .5s; opacity: 0; }

.single__pic--thumb { margin-top: 1em; position: relative; display: flex; overflow-x: auto; overflow-y: hidden; gap: 1em; -ms-overflow-style: none; scroll-behavior: smooth; scrollbar-width: none; height: 9em; }
.single__pic--thumb::-webkit-scrollbar { display: none; }
.single__pic--thumb::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.3); border-radius: 3px; }
.single__pic--small { flex: 0 0 auto; width: 9em; height: 9em; cursor: pointer; position: relative; }

.single__pic--big.active { opacity: 1; visibility: initial; }
.single__pic--small.active:after { content: ""; display: inline-block; width: 100%; height: .6em; position: absolute; left: 0; bottom: 0; z-index: 2; background: #C2B280; }

.single__pic.animated .anime-pic img,
.single__pic.animated .single__pic--big.active img  { transform: scale(1.0); opacity: 1; }

.single__detail { width: 49%; }
.single--cate { font-size: 1.2em; letter-spacing: 0.2em; margin-bottom: 1em; }
.single--title { font-size: 3.6em; line-height: 1.2; color: #23350D; margin-bottom: .75em; }
.single--price { display: flex; flex-wrap: wrap; align-items: center; }
.single--price .p-regular { font-size: 2.2em; position: relative; }
.single--price .p-discount { font-size: 2.2em; color: red; display: none; }
.single--price.on .p-regular { font-size: 1.8em; margin-right: .83em; }
.single--price.on .p-regular:before { content: ''; display: inline-block; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: red; transform: rotate(-12deg); }
.single--price.on .p-regular span { display: none; }
.single--price.on .p-discount { display: inline-block; }
.single--tax { font-size: 1.4em; letter-spacing: .1em; margin-top: .5em; }
.single__cart { display: block; position: relative; margin-top: 2em; }
.single__cart--title { font-size: 1.8em; margin-bottom: .5em; }
.single__cart--btn { display: flex; flex-wrap: wrap; align-items: center; }
.single__cart--btn li { display: inline-block; width: 5em; margin-right: 2em; }
.single__cart--btn li a { display: flex; align-items: center; justify-content: center; overflow: hidden; height: 5em; background: #23350D; border-radius: .5em; }
.single__cart--btn li a img { width: 3.2em; -webkit-filter: invert(1); }
.single__cart--btn li:nth-of-type(2) a { background: #0068ff; }
.single__cart--btn li:nth-of-type(3) a { background: #24a1de; }
.single--care { display: block; position: relative; margin-top: 4em; }
.single--care li { display: flex; flex-wrap: wrap; justify-content: space-between; }
.single--care li:not(:last-child) { margin-bottom: 1em; }
.single--care li span { display: inline-block; width: 2.8em; }
.single--care li p { font-size: 1.8em; padding: .2em 0; width: calc( 100% - 3.25em ); }
.single--desc { font-size: 1.8em; line-height: 1.5; color: #6D7278; margin-top: 2.22em; }

    @media only screen and (max-width: 768px) {
        .single__pic { width: 100% }
        .single__pic--thumb { height: 18vw; }
        .single__pic--small { width: 18vw; height: 18vw; }
        .single__detail { width: 100%; margin-top: 4em; }
        .single--title { font-size: 2.4em; }
        .single__cart--title { font-size: 1.6em; }
        .single--care li span { width: 2.6em; }
        .single--care li p { font-size: 1.6em; width: calc( 100% - 2.8em ); }
        .single--desc { font-size: 1.6em; }
    }

#product { padding-bottom: 11em; }

    @media only screen and (max-width: 768px) {
        #product { padding-bottom: 10em; }
    }