/* ---------------- RESET ---------------- */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

background:#ffffff;
color:#181818;
font-family:"Manrope",sans-serif;

-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;

overflow-x:hidden;

}


/* ---------------- HEADER ---------------- */

.header{
display:flex;
justify-content:center;
align-items:center;

position:relative;

padding:8px 16px 0;

height:auto;

margin-bottom:-38px;

background:#fff;
}

.logo{
    display:block;

    width:156px;
    height:auto;

    position:relative;
    left:-3%;

    user-select:none;
    -webkit-user-drag:none;
    
    pointer-events:none;
}

/* ---------------- SHOP ---------------- */

.catalog{

max-width:1180px;

margin:auto;

padding:0 20px 40px;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:28px 24px;

}

.product{

cursor:pointer;

transition:.35s ease;

}

.product:hover{

transform:translateY(-4px);

}

.product img{

width:100%;

aspect-ratio:1/1.18;

object-fit:contain;

display:block;

margin-bottom:16px;

transition:.35s ease;

}

.product:hover img{

transform:scale(1.03);

}

.product h2{

font-family:"Manrope",sans-serif;

font-size:18px;

font-weight:600;

letter-spacing:.8px;

text-transform:uppercase;

margin-bottom:8px;

color:#111;

}

.product p{

font-size:17px;

font-weight:300;

color:#666;

transition:
opacity .22s ease,
transform .22s ease;

}

/* ---------------- MOBILE ---------------- */

@media(max-width:768px){

.logo{

width:144px;
margin:0;

}

.catalog{

padding:6px 16px 60px;

gap:24px 18px;

}

.product h2{

font-size:15px;

}

.product p{

font-size:15px;

}

}
/* ---------------- PRODUCT PAGE ---------------- */

.product-header{

position:fixed;

top:0;
left:0;

width:100%;
height:74px;

background:rgba(255,255,255,.92);

backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);

z-index:1000;

}

.product-header .logo{

position:absolute;

top:8px;
right:16px;

width:95px;

height:auto;

margin:0;

left:auto;

transform:none;

display:block;

}

.back{

    position:absolute;

    left:28px;
    top:42%;

    transform:translateY(-50%);

    font-size:32px;

    font-weight:300;

    transition:.25s;

    color:#111 !important;
    text-decoration:none !important;
    -webkit-tap-highlight-color:transparent;

    z-index:999;
}

.back:visited{
    color:#111 !important;
}

.back:hover{
    color:#111 !important;
    opacity:.55;
}

.back:active{
    color:#111 !important;
}

.back:hover{

opacity:.45;

}

.product-page{

max-width:520px;

margin:auto;

padding:84px 22px 80px;

}

/* PHOTO */

.gallery{

display:flex;

justify-content:center;

margin-bottom:26px;

overflow:hidden;

}

#productImage{

width:100%;

max-width:360px;

height:38vh;

object-fit:contain;

margin:0 auto;

display:block;

opacity:0;

transition:opacity .35s ease;

}
#productImage:not([src]),
#productImage[src=""]{
opacity:0;
visibility:hidden;
}

#productImage:active{

transform:scale(.985);

}

/* TEXT */

#productName{

font-family:"Manrope",sans-serif;

font-size:31px;

font-weight:600;

letter-spacing:1px;

text-transform:uppercase;

color:#111;

margin-bottom:10px;

}

#productPrice{

font-size:22px;

font-weight:300;

color:#777;

margin-bottom:36px;

}

/* OPTIONS */

.options{

display:block;

margin-bottom:34px;

}

.option{
width:100%;
}

/* SIZE */

#sizeSelect{
    width:100%;
    height:58px;

    border:0.8px solid #c8c8c8;

    border-radius:0;

    background:#fff;

    color:#111;

    font-family:"Manrope",sans-serif;
    font-size:16px;
    font-weight:500;

    text-align:center;
    text-align-last:center;

    padding:0 22px;

    appearance:none;
    -webkit-appearance:none;

    cursor:pointer;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 20px center;
    background-size:18px;
}

/* BUY */

.buy-wrap{
width:100%;
}

#buyButton{

    width:100%;

    height:58px;

    background:#fff;

    color:#111;

    border:0.8px solid #b8b8b8;

    border-radius:0;

    font-family:"Manrope",sans-serif;

    font-size:16px;

    font-weight:500;

    letter-spacing:.5px;

    cursor:pointer;

    transition:.2s ease;

}

#buyButton:hover{

    background:#111;
    color:#fff;

}

#buyButton:active{

    transform:scale(.99);

}

#buyButton:hover{

opacity:.9;

transform:translateY(-1px);

}
/* ---------------- FULLSCREEN VIEWER ---------------- */

.viewer{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.96);

display:flex;

justify-content:center;
align-items:center;

opacity:0;
visibility:hidden;

transition:.35s;

z-index:9999;

}

.viewer.show{

opacity:1;
visibility:visible;

}

#viewerImage{

width:92vw;
height:92vh;

object-fit:contain;

user-select:none;

-webkit-user-drag:none;

}

/* ---------------- ANIMATIONS ---------------- */

#productImage{

animation:imageAppear .45s ease;

}

@keyframes imageAppear{

from{

opacity:0;

transform:translateY(12px) scale(.98);

}

to{

opacity:1;

transform:translateY(0) scale(1);

}

}

#productName,
#productPrice,
.options,
.buy-wrap{

animation:contentAppear .55s ease;

}

@keyframes contentAppear{

from{

opacity:0;

transform:translateY(18px);

}

to{

opacity:1;

transform:translateY(0);

}

}

#buyButton:active{

transform:scale(.97);

}

.quantity button:active{

transform:scale(.88);

}

.product img{

user-select:none;

-webkit-user-drag:none;

}

/* ---------------- MOBILE ---------------- */

@media(max-width:768px){

.product-page{

padding:86px 18px 70px;

}

.product-header{

padding:16px 18px;

}

.product-header .logo{

position:absolute;

top:8px;

right:18px;

left:auto;

margin:0;

width:95px;

height:auto;

}

.back{

font-size:30px;

left:18px;

}

#productImage{

max-width:330px;

height:40vh;

}

#productName{

font-size:26px;

}

#productPrice{

font-size:19px;

margin-bottom:28px;

}

.options{

gap:16px;

margin-bottom:28px;

}

#sizeSelect{

height:44px;

font-size:15px;

}

.quantity{

height:44px;

}

#buyButton{

width:100%;

height:64px;

font-size:20px;

letter-spacing:2px;

}

/* ---------------- PREMIUM DETAILS ---------------- */

::selection{

background:#111;

color:#fff;

}

button,
select{

font-family:"Manrope",sans-serif;

}

button{

outline:none;

}

select{

cursor:pointer;

}

body{

overflow-x:hidden;

}
@keyframes pageIn{

0%{
opacity:0;
transform:translateY(18px);
}

35%{
opacity:.45;
transform:translateY(10px);
}

70%{
opacity:.82;
transform:translateY(4px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

body{

opacity:1;
transform:translateY(0);
transition:opacity .35s ease, transform .35s ease;

}
/* ==========================================
   PREMIUM PRODUCT APPEAR
========================================== */

.product{

opacity:0;

transform:translateY(22px) scale(.985);

transition:

opacity .9s ease,

transform .9s cubic-bezier(.22,.61,.36,1);

will-change:opacity,transform;

}

.product.show{

opacity:1;

transform:translateY(0) scale(1);

}
/* =========================================
   VIEW SWITCH
========================================= */

.view-switch{

display:flex;
justify-content:flex-end;
align-items:center;

padding:0 16px;

margin-top:0;
margin-bottom:-18px;

transform:translateY(-44px);

position:relative;
z-index:50;

}

.currency-switch{

margin-right:auto;

position:relative;

z-index:9999;

}

.view-btn{

width:38px;

height:38px;

display:flex;

align-items:center;

justify-content:center;

background:none;

border:none;

cursor:pointer;

color:#222;

border-radius:8px;

transition:.28s ease;

}

.view-btn svg{

width:22px;

height:22px;

display:block;

}

.view-btn:hover{

opacity:.65;

}

.view-btn.active{

background:#f3f3f3;

}

.view-btn:active{

transform:scale(.92);

}

@media(max-width:768px){

.view-btn{

width:34px;

height:34px;

}

.view-btn svg{

width:20px;

height:20px;

}

}
/* =========================================
   GRID MODES
========================================= */

.catalog{

transition:.45s ease;

}

/* ---------- 1 товар ---------- */

.catalog.view-1{

grid-template-columns:1fr;

}

/* ---------- 4 товара ---------- */

.catalog.view-4{

grid-template-columns:repeat(2,1fr);

}

/* ---------- 12 ---------- */

.catalog.view-12{

grid-template-columns:repeat(3,1fr);

gap:16px;

}

.catalog.view-12 .product img{

margin-bottom:8px;

}

.catalog.view-12 .product h2{

font-size:12px;

line-height:1.2;

margin-bottom:3px;

}

.catalog.view-12 .product p{

font-size:12px;

}

/* ---------- MOBILE ---------- */

@media(max-width:768px){

.catalog.view-1{

grid-template-columns:1fr;

}

.catalog.view-4{

grid-template-columns:repeat(2,1fr);

}

.catalog.view-12{

grid-template-columns:repeat(3,1fr);

gap:12px;

}

}
/* =========================================
   PREMIUM GRID ANIMATION
========================================= */

.catalog{

transition:
grid-template-columns .55s cubic-bezier(.22,.61,.36,1),
gap .55s cubic-bezier(.22,.61,.36,1);

}

.product{

transition:

transform .55s cubic-bezier(.22,.61,.36,1),

opacity .45s ease,

filter .45s ease,

width .55s cubic-bezier(.22,.61,.36,1);

will-change:transform;

}

.catalog.switching .product{

opacity:.55;

transform:scale(.94);

filter:blur(.8px);

}
/* =========================================
   PREMIUM PRODUCT RESIZE
========================================= */

.product img{

transition:

transform .65s cubic-bezier(.22,.61,.36,1),

width .65s cubic-bezier(.22,.61,.36,1),

margin .65s cubic-bezier(.22,.61,.36,1),

opacity .4s ease;

}

.product h2{

transition:

font-size .55s cubic-bezier(.22,.61,.36,1),

letter-spacing .55s cubic-bezier(.22,.61,.36,1),

margin .55s cubic-bezier(.22,.61,.36,1),

opacity .4s ease;

}

.product p{

transition:

font-size .55s cubic-bezier(.22,.61,.36,1),

opacity .4s ease;

}

/* =========================================
   1 COLUMN
========================================= */

.catalog.view-1 .product img{

max-width:100%;

}

.catalog.view-1 .product h2{

font-size:20px;

letter-spacing:.7px;

margin-top:8px;

}

.catalog.view-1 .product p{

font-size:18px;

}

/* =========================================
   4 GRID
========================================= */

.catalog.view-4 .product img{

max-width:100%;

}

.catalog.view-4 .product h2{

font-size:15px;

}

.catalog.view-4 .product p{

font-size:15px;

}

/* =========================================
   12 GRID
========================================= */

.catalog.view-12 .product{

padding:0;

}

.catalog.view-12 .product img{

max-width:100%;

margin-bottom:6px;

}

.catalog.view-12 .product h2{

font-size:11px;

letter-spacing:.35px;

margin-bottom:2px;

line-height:1.25;

}

.catalog.view-12 .product p{

font-size:11px;

opacity:.78;

}
/* ==========================
   CURRENCY
========================== */

.currency-switch{

position:relative;

display:flex;

align-items:center;

margin-right:auto;

}

#currencyButton{

display:flex;
align-items:center;
gap:8px;

background:transparent;

border:none;

outline:none;

padding:0;

margin:0;

font-family:"Inter",sans-serif;

font-size:17px;

font-weight:400;

letter-spacing:.3px;

color:#111;

cursor:pointer;

-webkit-appearance:none;
appearance:none;

box-shadow:none;

}

#currencyButton:active{

transform:scale(.96);

}

.arrow{

font-size:11px;

margin-left:3px;

color:#111;

transition:.25s;

}

.currency-menu{

position:absolute;

top:34px;

left:0;

min-width:170px;

background:#fff;

border-radius:12px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

overflow:hidden;

opacity:0;

visibility:hidden;

transform:translateY(-8px);

transition:.22s ease;

z-index:999;

}

.currency-menu.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.currency-option{

padding:12px 16px;

font-family:"Manrope",sans-serif;

font-size:15px;

font-weight:400;

color:#111;

cursor:pointer;

transition:.18s;

}

.currency-option:hover{

background:#f6f6f6;

}

.currency-menu.show{

display:block;

}

.currency-option{

padding:13px 16px;

cursor:pointer;

font-size:14px;

font-weight:500;

transition:.2s;

}

.currency-option:hover{

background:#f7f7f7;

}
.product{
    position:relative;
}

.sale-tag{
    position:absolute;
    left:0;
    bottom:82px;

    background:#b51d1d;

    color:white;

    padding:8px 18px;

    font-size:18px;

    font-weight:400;

    z-index:10;
}

.sale-tag{

position:absolute;

left:0;
bottom:92px;

background:#a31919;
color:#fff;

padding:4px 10px;

font-size:11px;
font-weight:500;
letter-spacing:.3px;

z-index:1;

pointer-events:none;

}

.product{

position:relative;

}

.product p{

display:flex;
align-items:center;
gap:6px;
flex-wrap:nowrap;

}

.price{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:10px;
    flex-wrap:nowrap;
}

.new-price{
    font-weight:600;
    color:#c92a2a;
    white-space:nowrap;
}

.old-price{
    font-size:14px;
    color:#8a8a8a;
    text-decoration:line-through;
    white-space:nowrap;
}
.back-btn{
    position:absolute;

    left:28px;
    top:44%;

    transform:translateY(-70%);

    width:34px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;
    color:#111;

    z-index:9999;

    cursor:pointer;
}

.back-btn svg{
width:24px;
height:24px;

stroke:currentColor;
stroke-width:1.5;
stroke-linecap:round;
stroke-linejoin:round;
fill:none;
transition:.25s;
}

.back-btn:hover svg{
opacity:.55;
}
.options{
    display:block;
    margin-bottom:34px;
}

.option.full-width{
    width:100%;
}

.label{
    display:none;
}
.checkout-note{

    margin-top:22px;

    text-align:center;

    font-family:"Manrope",sans-serif;

    font-size:12px;

    line-height:1.7;

    color:#777;

}

.checkout-note p{

    margin:4px 0;

}

.checkout-note a{

    color:#111;

    text-decoration:none;

    font-weight:600;

    transition:.2s;

}

.checkout-note a:hover{

    opacity:.65;

}