@import 'common.css';

:root{
   
  
    --topbar-height: min(140px, 10vh);
    --order-summary-height: min(100px, 10vh);
    --footer-height: 40px;
}

@media only screen and (max-width: 1536px){
    :root{
        --topbar-height: min(120px, 10vh);
        --order-summary-height: min(90px, 10vh);
    }
}
@media only screen and (max-width: 1024px){
    :root{
        --topbar-height: min(100px, 10vh);
        --order-summary-height: min(80px, 10vh);
    }
}
@media only screen and (max-width: 568px){
    :root{
        --topbar-height: min(80px, 10vh);
        --order-summary-height: min(70px, 10vh);
    }
}





a[disabled], .carousel__button:disabled {
    pointer-events: none;
    opacity: .1;
}


#wrapper{padding-bottom: var(--footer-height);}
/* INFO: footer */
#footer{position: fixed;z-index:2;bottom: 0;left: 0;right: 0;background-color: var(--color-dark);font-weight: var(--font-bold);color: var(--color-dark-text);border-top: 1px solid rgba(255,255,255,.1);font-size: var(--font-size-sm);}
#footer > .package{height: var(--footer-height);display: flex;align-items: center;justify-content: space-between;gap: var(--gap);}
#footer strong{color: var(--color-white);}
@media only screen and (max-width: 1024px){
    #footer .platform{display: none;}
    #footer > .package{justify-content: center;}
}

#content {display: grid;gap: var(--gap-xl);}
#content > *:first-child:not(#search, #payment-status, #paid, #order-title, #error, #rma){margin-top: var(--gap-xl);}
/* INFO: topbar */
#topbar {position: sticky;top: 0;z-index: 10;}
#topbar > .content{display: flex;align-items: center;justify-content: space-between;height: var(--topbar-height);padding: 0 var(--gap-lg);background-color: var(--color-white);border-bottom: 1px solid var(--color-gray-dark);gap: var(--gap);}
#topbar > .content > .logo img{height: calc(var(--topbar-height) - var(--gap) * 2);}
@media only screen and (max-width: 1024px){
    #topbar > .content{padding: 0 var(--padding);}
    #topbar > .content > :first-child{display: none;}
    #topbar > .content > .logo img{height: calc(var(--topbar-height) / 3);}
}

#payment-status, #search, #paid, #error{position: relative;min-height: calc( 100vh - var(--topbar-height) - var(--footer-height) );display: flex;background-color: var(--color-gray);}
#search {padding-left: 50%;}
:is(#payment-status, #search, #paid, #error) > picture{position: absolute;inset: 0;display: block;user-select: none;pointer-events: none;}
:is(#payment-status, #search, #paid, #error) > picture::after{content: " ";display: block;position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: -webkit-linear-gradient(135deg, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%);background: linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(255,255,255,1) 70%);mix-blend-mode: saturation;}
:is(#payment-status, #search, #paid, #error) > picture > img{object-fit: cover;width: 100%;height: 100%;}
:is(#payment-status, #search, #paid) > .info{position: relative;z-index: 2;padding: var(--padding-lg);display: flex;flex-grow: 1;align-items: center;justify-content: center;}
:is(#payment-status, #search) fieldset{grid-template-columns: 1fr;}
:is(#payment-status, #search) .boxed{max-width: 100%;width: min(500px, calc(100vw - var(--gap-lg) * 2))}
@media only screen and (max-width: 1024px){
    #search{padding-left: 25%;}
    :is(#payment-status, #search, #paid) > picture > img{object-position: top left;}
    :is(#payment-status, #search, #paid) > picture::after{background: -webkit-linear-gradient(45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);background: linear-gradient(45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);}
    :is(#payment-status, #search, #paid) > .info{padding: var(--padding);}
    :is(#payment-status, #search) .boxed{width: min(400px, calc(100vw - var(--padding) * 2))}
}
@media only screen and (max-width: 568px){
    #search{padding-left: 0;}
}

#paid .boxed > .holder-content {display: flex;align-items: stretch;}
#paid .boxed > .holder-content > .steps{order: 2;background-color: var(--color-gray);position: relative;width: 500px;min-height: 500px;}
#paid .boxed > .holder-content > .steps > .carousel{position: absolute;inset: 0;}
#paid .boxed > .holder-content > .steps > .carousel .carousel-cell{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
#paid .boxed > .holder-content > .steps .flickity-page-dots{position: absolute;bottom: var(--gap-sm);left: var(--gap-sm);text-align: left;}
#paid .boxed > .holder-content > .steps > .carousel .carousel-cell > div{padding: var(--padding);display: flex;flex-direction: column;gap: var(--gap-lg);align-items: center;}
#paid .boxed > .holder-content > .steps > .carousel .carousel-cell > div > .description {font: var(--font-title);font-size: var(--font-title-size-xxs);font-weight: lighter;}
#paid .boxed > .holder-content > .steps > .carousel .carousel-cell > div > picture{width: 100px;height: 100px;display: block;}
@media only screen and (max-width: 1024px){
    #paid .boxed > .holder-content{flex-direction: column;}
    #paid .boxed > .holder-content > .steps{width: 100%;min-height: 0px;height: 200px;border-top: 1px solid var(--color-black);}
    #paid .boxed > .holder-content > .steps > .carousel .carousel-cell > div{gap: var(--gap);flex-direction: row;flex-wrap: wrap;}
    #paid .boxed > .holder-content > .steps > .carousel .carousel-cell > div > picture{width: 40px;height: 40px;order: -1;}
    #paid .boxed > .holder-content > .steps > .carousel .carousel-cell > div > .description{font-size: var(--font-title-size-xs);width: calc(100% - 48px - var(--gap));}
    #paid .boxed > .holder-content > .steps > .carousel .carousel-cell > div > div:not(.description){display: flex;justify-content: flex-end;flex-grow: 1;}
}

/* INFO: card-product */
[class^="card-product"]  > * {pointer-events: none;}
[class^="card-product"].reason picture img{-webkit-filter: grayscale(1) blur(2px);filter: grayscale(1) blur(2px);opacity: .1;}
[class^="card-product"] > .info{padding: var(--padding) 0;}
[class^="card-product"] > .info > h4 {font-size: var(--font-title-size-xxs);font-weight: 400;color: var(--color-black-light);text-align: center;}
[class^="card-product"] picture{display: block;width: 100%;aspect-ratio: 10 / 12;overflow: hidden;}
[class^="card-product"] > .picture{position: relative;-webkit-transition: all .3s ease-in-out;transition: all .3s ease-in-out;-webkit-box-shadow: 0 2px 6px rgba(0,0,0, .01), 0 16px 48px rgba(0,0,0, .01);box-shadow: 0 2px 6px rgba(0,0,0, .01), 0 16px 48px rgba(0,0,0, .01);}
[class^="card-product"]:hover > .picture{-webkit-transition: var(--transition-all);transition: var(--transition-all);-webkit-transform: translateY(-6px);transform: translateY(-6px);-webkit-box-shadow: 0 8px 32px rgba(0,0,0, .1);box-shadow: 0 8px 32px rgba(0,0,0, .1);}
[class^="card-product"] > .picture > .tags{position: absolute;top: var(--gap);right: var(--gap);z-index: 2;}
[class^="card-product"] > .picture > .reason{display: none;position: absolute;left: var(--gap-lg);right: var(--gap-lg);top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);text-align: center;pointer-events: none;}
[class^="card-product"].reason > .picture > .reason{display: block;}
[class^="card-product"] > .picture > .reason > .label{font: var(--font-buttons);text-transform: uppercase;font-size: var(--font-buttons-size-sm);}
[class^="card-product"] > .picture > .reason > .reason{margin-top: var(--gap-xs);font: var(--font-title);font-size: var(--font-title-size-sm);text-transform: uppercase;text-shadow: 0 0 4px #FFF;font-size: var(--font-buttons-size-sm);
font-weight: lighter;
}
[class^="card-product"] picture > img{width: 100%;height: 100%;object-fit: cover;-webkit-transition: filter .5s ease-in-out;transition: filter .5s ease-in-out;}
[class^="card-product"]:is(:hover, :focus) > picture > img{-webkit-filter: contrast(1.1);filter: contrast(1.1);}
@media only screen and (max-width: 1024px){
    [class^="card-product"] picture{aspect-ratio: 1;}
}
@media only screen and (max-width: 568px){
    [class^="card-product"] picture{aspect-ratio: 1.2;}
}
/* INFO: modal-edit-order-item */
.modal-edit-order-item{width: min(100vw - calc(var(--padding) * 2), 1200px);}
.modal-edit-order-item .picture-fields{display: flex;align-items: stretch;margin: 0 !important;}
.modal-edit-order-item .picture-fields > picture{width: 50%;aspect-ratio: 10 / 12;}
.modal-edit-order-item .picture-fields > picture > img{width: 100%;height: 100%;object-fit: cover;}
.modal-edit-order-item .picture-fields + * {margin-top: 0;}
.modal-edit-order-item .picture-fields > .fieldset{padding: var(--padding-lg);width: 50%;display: flex;align-items: center;}
.modal-edit-order-item .picture-fields > .fieldset fieldset{grid-template-columns: 1fr;width: 100%;}
@media only screen and (max-width: 1024px){
    .modal-edit-order-item .picture-fields{ flex-direction: column;}
    .modal-edit-order-item .picture-fields > picture{width: 100%;aspect-ratio: 2;border-bottom: 1px solid var(--color-black);background-color: var(--color-gray);}
    .modal-edit-order-item .picture-fields > picture > img{object-fit: contain;}
    .modal-edit-order-item .picture-fields > .fieldset{width: 100%;}
}
body.frontend-order{padding-bottom: calc(var(--order-summary-height) + var(--footer-height) + var(--gap-lg));}
/* INFO: order-title */
#order-title {padding: var(--padding-lg) 0;background-color: var(--color-dark);color: var(--color-dark-text)}
#order-title strong{color: var(--color-white);}
/* INFO: order-summary */
#order-summary {position: fixed;bottom: var(--footer-height);right: 0;left: 0;background-color:var(--color-white);border-top: 2px solid var(--color-black);z-index: 5;}
#order-summary > .package{display: flex;align-items: center;height: var(--order-summary-height);gap: var(--gap-sm);}
#order-summary > .package > h5{font-size: var(--font-title-size-sm);}
#order-summary #hide-summary{display: none;}
#order-summary.active #hide-summary{display: inline-flex;}
#order-summary.active #show-summary{display: none;}
#order-summary > #summary{max-height: 0;height: 100vh;overflow-y: auto;-webkit-transition: max-height var(--transition);transition: max-height var(--transition);background-color: var(--color-gray);border-top: 2px solid var(--color-black);}
#order-summary > #summary > .package{padding: var(--gap-xl) 0;}
#order-summary.active > #summary{max-height: calc(100vh - var(--topbar-height) - var(--order-summary-height) -  var(--footer-height));}
@media only screen and (max-width: 1024px){
    #order-summary > .package > h5{font-size: var(--font-title-size-xxs);}
    #order-summary > #summary > .package{padding: var(--padding) 0;}
}
@media only screen and (max-width: 568px){
    #order-summary > .package{justify-content: space-between;}
    #order-summary > .package > .grow{order: -1;display: none;}
    #order-summary.active #hide-summary{display: inline-block;}
}
/* INFO: summary-content */
#summary-content {display: grid;gap: var(--gap-sm);}
#summary-content + * {margin-top: var(--gap-sm);}
/* INFO: card-summary-item */
[class^="card-summary-item"] {display: flex;align-items: flex-start;gap: var(--gap);padding: var(--padding);}
[class^="card-summary-item"] > picture{width: 120px;height: 120px;display: block;}
[class^="card-summary-item"] > picture > img{width: 100%;height: 100%;object-fit: cover;-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);outline: 1px solid var(--color-gray-darkness);}
[class^="card-summary-item"] > .info{display: flex;gap: var(--gap-xs);flex-direction: column;flex-grow: 1;}
[class^="card-summary-item"] > .info > .name{font: var(--font-title);font-size: var(--font-title-size-xs);}
[class^="card-summary-item"] [class^="actions"]{margin-top: var(--gap-sm);}
@media only screen and (max-width: 1536px){
    [class^="card-summary-item"] > picture{width: 100px;height: 100px;}
}
@media only screen and (max-width: 1024px){
    [class^="card-summary-item"] > picture{width: 80px;height: 80px;}
}
@media only screen and (max-width: 568px){
    [class^="card-summary-item"]{flex-direction: column;}
    [class^="card-summary-item"] > picture{width: 100px;height: 100px;}
}






/* INFO: why what size */
[data-what] {display: flex;}
[data-why=''] + [data-what] {display: none;}
[data-size], [data-change-with-help-description]{display: none;}
:not([data-why='']) + [data-what='change'] + [data-size] {display: flex;}
:not([data-why='']) + [data-what='change_with_help'] + * + [data-change-with-help-description],
:not([data-why='']) + [data-what='change_with_help'] + [data-change-with-help-description] {display: flex;}


#rma {display: flex;align-items: stretch;position: relative;background-color: var(--color-gray);}
#rma > picture{position: sticky;top: var(--topbar-height);width: 50vw;height: calc(100vh - var(--topbar-height) - var(--footer-height));}
#rma > picture > img{width: 100%;height: 100%;object-fit: cover;object-position: left center;}
#rma > .content {min-height: calc(100vh - var(--topbar-height) - var(--footer-height));width: 50vw;display: flex;align-items: center;}
#rma > .content > .info{width: 100%;padding: var(--padding-lg) 0;}
#rma > .content > .info > .package{display: flex;flex-direction: column;gap: var(--gap-lg);}
#rma > .content > .info > .package > * {margin: 0;}
@media only screen and (max-width: 1536px){
    #rma > picture{width: 40vw;}
    #rma > .content {width: 60vw;}
}
@media only screen and (max-width: 1024px){
    #rma {flex-direction: column;}
    #rma > picture{width: 100%;height: 15vh;position: relative;top: auto;}
    #rma > picture > img{object-position: center;}
    #rma > .content{width: 100%;min-height: 0;}
}





.steps{background-color: var(--color-white);position: relative;aspect-ratio: 3;outline: 1px solid var(--color-gray-dark);-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);}
.steps > .carousel{position: absolute;inset: 0;}
.steps > .carousel .carousel-cell{width: 100%;height: 100%;display: flex;align-items: center;justify-content:center;}
.steps .flickity-page-dots{position: absolute;bottom: var(--gap-sm);left: var(--gap-sm);text-align: left;}
.steps > .carousel .carousel-cell > div{padding: var(--padding);display: flex;gap: var(--gap-lg);align-items: center;justify-content: center;width: 100%;padding-bottom: 48px;}
.steps > .carousel .carousel-cell > div > picture{width: 160px;height: 160px;display: block;position: relative;-webkit-border-radius: var(--border-radius);border-radius: var(--border-radius);padding: var(--padding);background-color: var(--color-gray);}
.steps > .carousel .carousel-cell > div > picture > .count{position: absolute;left: 0;top: 0;width: 48px;height: 48px;-webkit-border-radius: 50%;border-radius: 50%;background-color: var(--color-red);color: var(--color-white);display: flex;align-items: center;justify-content: center;font: var(--font-buttons);font-weight: bolder;outline: 5px solid var(--color-white);box-shadow: 0 var(--gap-xs) 16px rgba(0,0,0,.1);-webkit-transform: translate(calc(0px - var(--gap)), calc(0px - var(--gap)));transform: translate(calc(0px - var(--gap)), calc(0px - var(--gap)));}
.steps > .carousel .carousel-cell > div > .info{display: flex;flex-direction: column;gap: var(--gap-xs);min-width: 60%;}
.steps > .carousel .carousel-cell > div > .info > .title{font: var(--font-title);text-transform: uppercase;font-size: var(--font-title-size-sm);}
.steps > .carousel .carousel-cell > div > .info > .description{color: var(--color-black-light);}
.steps > .carousel .carousel-cell > div > .info > [class^="actions"]{margin-top: var(--gap);}
@media only screen and (max-width: 1024px){
    .steps > .carousel .carousel-cell > div > picture{width: 120px;height: 120px;}
    .steps > .carousel .carousel-cell > div > picture > .count{width: 40px;height: 40px;outline: none;-webkit-transform: translate(calc(0px - var(--gap-xs)), calc(0px - var(--gap-xs)));transform: translate(calc(0px - var(--gap-xs)), calc(0px - var(--gap-xs)));font-size: 15px;}
}

@media only screen and (max-width: 568px){
    .steps{aspect-ratio: 1.5;}
    .steps > .carousel .carousel-cell > div {align-items: flex-start;}
    .steps > .carousel .carousel-cell > div > picture{width: 80px;height: 80px;padding: var(--padding-sm);}
    .steps > .carousel .carousel-cell > div > picture > .count{width: 32px;height: 32px;font-size: 12px;}
}