*{margin:0;padding:0;box-sizing:border-box}
body{
	font-family:Poppins,sans-serif;
	background:#faf7f5;
	color:#333
}
.topbar{
	background:#ddb1b1;
	color:#fff;
	padding:10px;
	display:flex;
	justify-content:space-around;
	font-size:13px
}

header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 4%;
    background:#fff;
}

.logo{
    display:flex;
    align-items:center;
    gap:18px;
}

.logo small{
    font-size:11px;
    letter-spacing:2px;
    color:#999;
}

.logo img{
    width:80px;
    height:80px;
    object-fit:contain;
}

.logo-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.brand{
    font-family:"Playfair Display", serif;
    font-size:46px;
    font-weight:700;
    line-height:0.9;
    color:#1e2430;
}

.logo-text small{
    margin-top:8px;
    font-size:13px;
    letter-spacing:4px;
    color:#a7a7a7;
    text-transform:uppercase;
}

nav{
	display:flex;
	gap:28px;
	align-items:center;
}

nav a{
	text-decoration:none;
	color:#333;
	font-size:14px;
	letter-spacing:0.5px;
	position:relative;
	padding:6px 0;
	cursor:pointer;
	transition:color 0.2s ease;
}

header nav a::after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:0%;
	height:2px;
	background:#d88f9b;
	transition:width 0.25s ease;
}

nav a:hover{
	color:#d88f9b;
}

nav a:hover::after{
	width:100%;
}

nav a.active{
	color:#d88f9b;
}

nav a.active::after{
	width:100%;
}

nav a:active{
	transform: translateY(1px);
}

.active{
	color:#d88f9b;
	border-bottom:2px solid #d88f9b;
	padding-bottom:6px
}
.icons{
	display: flex;
	align-items: center;
	gap: 18px;
}

.icon{
	color: #333;
	text-decoration: none;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	transition: all 0.15s ease;
}

.icon:hover{
	background: #f5f5f5;
	color: #d88f9b;
}

.icon:active{
  transform: translateY(1px) scale(0.96);
}

.cart{
	position: relative;
}

.cart-count{
	position: absolute;
	top: -3px;
	right: -3px;
	background: #d88f9b;
	color: #fff;
	font-size: 10px;
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.cart-count[hidden]{
    display: none !important;
}


.btn{
	display:inline-block;
	background:#df8796;
	color:#fff;
	padding:16px 34px;
	border-radius:40px;
	text-decoration:none;
	font-weight:600
}

h2{
	text-align:center;
	font-family:"Playfair Display";
	font-size:42px;
	margin:60px 0 30px
}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:25px;padding:0 7% 60px}
.card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 8px 25px rgba(0,0,0,.08);transition:transform .3s,box-shadow .3s}
.card:hover{transform:scale(1.04);box-shadow:0 18px 40px rgba(0,0,0,.18)}

.img{
    height:220px;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:#fff;
    font-weight:600;
    text-shadow:0 2px 8px rgba(0,0,0,.5);
}

.img.magnets{
    background-image:url("../images/magnets.jpg");
}

.img.mugs{
    background-image:url("../images/mugs.jpg");
}

.img.keyrings{
    background-image:url("../images/keyrings.jpg");
}

.img.photos{
    background-image:url("../images/photos.jpg");
}

.img.pillows{
    background-image:url("../images/pillows.jpg");
}

.card h3{
	text-align:center;
	padding:18px
}

.card button{
	display:block;
	margin:0 auto 20px;
	background:#ef9aa8;
	color:#fff;
	border:none;
	padding:12px 28px;
	border-radius:30px;
	cursor:pointer
}

footer{
    padding:
        22px
        16px;

    font-size:10px;
    line-height:1.5;

    text-align:center;
	}
@media(max-width:900px){
.hero{grid-template-columns:1fr}
.features{grid-template-columns:1fr 1fr}
header{flex-direction:column;gap:20px}
nav{flex-wrap:wrap;justify-content:center}
.hero h1{font-size:46px}
}

.language-switcher{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.language-btn{
    width:34px;
    height:34px;

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

    padding:0;
    margin:0;

    border:none;
    background:none;
    cursor:pointer;
}

.language-btn:hover{
    background:#f5f5f5;
}

.flag{
    width:22px;
    height:22px;
    border-radius:50%;
    object-fit:cover;
}

.language-btn i{
    font-size:10px;
}

.language-dropdown{

    position:absolute;

    top:120%;
    right:0;

    min-width:170px;

    background:#fff;

    border-radius:12px;

    box-shadow:0 10px 30px rgba(0,0,0,.12);

    overflow:hidden;

    display:none;

    z-index:999;

}

.language-dropdown a{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    color:#333;

    text-decoration:none;

    transition:.25s;
}

.language-dropdown a:hover{

    background:#f4f4f4;

}

.language-switcher.open .language-dropdown{

    display:block;

}

/* ==========================================
   ACCOUNT MENU
========================================== */

.account-menu{
    position:relative;
}

.account-menu-toggle{
    border:none;
    background:none;
    cursor:pointer;
}

.account-menu-dropdown{
    position:absolute;
    top:calc(100% + 14px);
    right:0;

    width:240px;
    padding:10px;

    background:#fff;
    border:1px solid #eeeeee;
    border-radius:16px;

    box-shadow:0 12px 35px rgba(0,0,0,.12);

    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;

    z-index:1000;
}

.account-menu.is-open .account-menu-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.account-menu-item{
    width:100%;
    min-height:44px;

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

    padding:10px 12px;

    border:none;
    border-radius:10px;

    background:none;

    color:#444;
    text-decoration:none;

    font-family:Poppins,sans-serif;
    font-size:14px;

    cursor:pointer;

    transition:.2s ease;
}

.account-menu-item i{
    width:20px;
    text-align:center;
    color:#999;
}

.account-menu-item:hover{
    background:#fff5f6;
    color:#d56578;
}

.account-menu-item:hover i{
    color:#d56578;
}

.account-menu-user{
    padding:10px 12px 12px;

    display:flex;
    flex-direction:column;
    gap:2px;
}

.account-menu-user-label{
    font-size:12px;
    color:#999;
}

.account-menu-user strong{
    font-size:14px;
    color:#333;
}

.account-menu-divider{
    height:1px;
    margin:6px 4px;
    background:#eeeeee;
}

.account-menu-logout-form{
    margin:0;
}

.account-menu-logout{
    text-align:left;
}

.account-menu-logout:hover{
    color:var(--account-danger, #e86b7a);
}

.site-flash{
    width:min(1200px, 90%);
    margin:20px auto;
    padding:14px 18px;

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

    border-radius:12px;

    font-size:14px;
    font-weight:500;
}

.site-flash-success{
    color:#4f9f6b;
    background:rgba(103,197,135,.12);
}

.site-toast{
    position:fixed;
    top:24px;
    right:24px;

    width:min(380px, calc(100% - 48px));

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

    padding:16px 18px;

    background:#fff;
    border-radius:14px;

    box-shadow:0 12px 40px rgba(0,0,0,.14);

    z-index:9999;

    animation:siteToastIn .3s ease;
}

.site-toast-success{
    border-left:4px solid #67c587;
}

.site-toast-error{
    border-left:4px solid #e86b7a;
}

.site-toast-icon{
    font-size:20px;
}

.site-toast-success .site-toast-icon{
    color:#67c587;
}

.site-toast-error .site-toast-icon{
    color:#e86b7a;
}

.site-toast-text{
    flex:1;

    color:#444;
    font-size:14px;
    line-height:1.5;
}

.site-toast-close{
    border:none;
    background:none;

    color:#aaa;
    font-size:16px;

    cursor:pointer;
}

.site-toast-close:hover{
    color:#555;
}

.site-toast.site-toast-hide{
    opacity:0;
    transform:translateY(-10px);
    transition:.25s ease;
}

@keyframes siteToastIn{

    from{
        opacity:0;
        transform:translateY(-12px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* ==========================
   COOKIE_CONSENT
========================== */

.cookie-consent{
    position:fixed;
    left:20px;
    right:20px;
    bottom:20px;
    z-index:9999;
}

.cookie-consent[hidden]{
    display:none;
}

.cookie-consent-content{
    max-width:1200px;
    margin:0 auto;
    background:#fff;
    border:1px solid #e8e8e8;
    border-radius:18px;
    box-shadow:0 12px 40px rgba(0,0,0,.12);
    padding:20px 22px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;

    font-family:Poppins,sans-serif;
}

.cookie-consent-text{
    max-width:700px;
}

.cookie-consent-text strong{
    display:block;
    margin-bottom:6px;
    font-size:16px;
    font-weight:600;
    color:#222;
}

.cookie-consent-text p{
    margin:0;
    font-size:13px;
    line-height:1.6;
    color:#666;
}

.cookie-consent-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.cookie-consent-actions button{
    min-height:42px;
    padding:0 16px;
    border-radius:10px;
    font-family:Poppins,sans-serif;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:.2s ease;
}

.cookie-consent-settings{
    background:#fff;
    border:1px solid #dcdcdc;
    color:#444;
}

.cookie-consent-settings:hover{
    background:#f7f7f7;
}

.cookie-consent-reject{
    background:#fff;
    border:1px solid #d56578;
    color:#d56578;
}

.cookie-consent-reject:hover{
    background:#fff5f7;
}

.cookie-consent-accept{
    background:#d56578;
    border:1px solid #d56578;
    color:#fff;
}

.cookie-consent-accept:hover{
    background:#c95569;
    border-color:#c95569;
}

/* ==========================
   COOKIE_SETTINGS
========================== */

.cookie-settings-modal{
    position:fixed;
    inset:0;
    z-index:10000;

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

    padding:20px;
}

.cookie-settings-modal[hidden]{
    display:none;
}

.cookie-settings-backdrop{
    position:absolute;
    inset:0;

    background:rgba(0,0,0,.45);
}

.cookie-settings-dialog{
    position:relative;
    z-index:1;

    width:100%;
    max-width:620px;

    background:#fff;

    border-radius:18px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.18);

    overflow:hidden;

    font-family:Poppins,sans-serif;
}

.cookie-settings-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    padding:24px;

    border-bottom:1px solid #eee;
}

.cookie-settings-header h2{
    margin:0 0 8px;

    font-size:20px;
    font-weight:600;

    color:#222;
}

.cookie-settings-header p{
    margin:0;

    font-size:13px;
    line-height:1.6;

    color:#666;
}

.cookie-settings-close{
    width:36px;
    height:36px;

    flex-shrink:0;

    border:0;
    border-radius:10px;

    background:#f5f5f5;

    color:#555;

    cursor:pointer;

    font-size:16px;
}

.cookie-settings-close:hover{
    background:#ececec;
}

.cookie-settings-options{
    padding:0 24px;
}

.cookie-settings-option{
    min-height:96px;

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

    gap:20px;

    padding:20px 0;

    border-bottom:1px solid #eee;
}

.cookie-settings-option:last-child{
    border-bottom:0;
}

.cookie-settings-option-content{
    flex:1;
}

.cookie-settings-option-content strong{
    display:block;

    margin-bottom:5px;

    font-size:14px;
    font-weight:600;

    color:#222;
}

.cookie-settings-option-content p{
    margin:0;

    font-size:12px;
    line-height:1.6;

    color:#777;
}

.cookie-settings-required{
    flex-shrink:0;

    font-size:12px;
    font-weight:600;

    color:#d56578;
}


/* Toggle */

.cookie-settings-toggle{
    position:relative;

    width:44px;
    height:24px;

    flex-shrink:0;
}

.cookie-settings-toggle input{
    position:absolute;

    width:0;
    height:0;

    opacity:0;
}

.cookie-settings-toggle span{
    position:absolute;
    inset:0;

    border-radius:999px;

    background:#d9d9d9;

    cursor:pointer;

    transition:.2s ease;
}

.cookie-settings-toggle span::before{
    content:'';

    position:absolute;

    width:18px;
    height:18px;

    left:3px;
    top:3px;

    border-radius:50%;

    background:#fff;

    box-shadow:
        0 1px 4px rgba(0,0,0,.2);

    transition:.2s ease;
}

.cookie-settings-toggle input:checked + span{
    background:#d56578;
}

.cookie-settings-toggle input:checked + span::before{
    transform:translateX(20px);
}


/* Footer */

.cookie-settings-footer{
    display:flex;
    justify-content:flex-end;

    padding:18px 24px;

    border-top:1px solid #eee;
}

.cookie-settings-save{
    min-height:42px;

    padding:0 18px;

    border:1px solid #d56578;
    border-radius:10px;

    background:#d56578;

    color:#fff;

    font-family:Poppins,sans-serif;
    font-size:13px;
    font-weight:600;

    cursor:pointer;

    transition:.2s ease;
}

.cookie-settings-save:hover{
    background:#c95569;
    border-color:#c95569;
}

/* ==========================
   COOKIE - RESPONSIVE
========================== */

/* Tablet */
@media (max-width: 900px){

    .cookie-consent{
        left:16px;
        right:16px;
        bottom:16px;
    }

    .cookie-consent-content{
        align-items:flex-start;
        flex-direction:column;
        gap:18px;

        padding:20px;
    }

    .cookie-consent-text{
        max-width:none;
        width:100%;
    }

    .cookie-consent-actions{
        width:100%;

        display:grid;
        grid-template-columns:repeat(3, 1fr);
        gap:10px;
    }

    .cookie-consent-actions button{
        width:100%;
        padding:0 12px;
    }


    /* COOKIE SETTINGS */

    .cookie-settings-dialog{
        max-width:600px;
    }
}


/* Mobile */
@media (max-width: 600px){

    .cookie-consent{
        left:10px;
        right:10px;
        bottom:10px;
    }

    .cookie-consent-content{
        padding:18px 16px;

        border-radius:14px;

        gap:16px;
    }

    .cookie-consent-text strong{
        font-size:15px;
    }

    .cookie-consent-text p{
        font-size:12px;
        line-height:1.55;
    }

    .cookie-consent-actions{
        display:flex;
        flex-direction:column;
        gap:8px;
    }

    .cookie-consent-actions button{
        width:100%;
        min-height:44px;

        padding:0 14px;

        font-size:12px;
    }


    /* ==========================
       COOKIE SETTINGS MOBILE
    ========================== */

    .cookie-settings-modal{
        padding:10px;

        align-items:flex-end;
    }

    .cookie-settings-dialog{
        max-width:none;
        max-height:calc(100vh - 20px);

        border-radius:16px;

        display:flex;
        flex-direction:column;
    }

    .cookie-settings-header{
        padding:18px 16px;

        gap:14px;
    }

    .cookie-settings-header h2{
        margin-bottom:6px;

        font-size:18px;
    }

    .cookie-settings-header p{
        font-size:12px;
        line-height:1.55;
    }

    .cookie-settings-close{
        width:34px;
        height:34px;

        border-radius:9px;
    }

    .cookie-settings-options{
        padding:0 16px;

        overflow-y:auto;
    }

    .cookie-settings-option{
        min-height:auto;

        padding:18px 0;

        gap:14px;
    }

    .cookie-settings-option-content strong{
        font-size:13px;
    }

    .cookie-settings-option-content p{
        font-size:11px;
        line-height:1.55;
    }

    .cookie-settings-required{
        font-size:11px;
    }

    .cookie-settings-footer{
        padding:14px 16px;

        background:#fff;
    }

    .cookie-settings-save{
        width:100%;
        min-height:44px;
    }
}


/* Bardzo małe telefony */
@media (max-width: 380px){

    .cookie-consent{
        left:8px;
        right:8px;
        bottom:8px;
    }

    .cookie-consent-content{
        padding:16px 14px;
    }

    .cookie-consent-text strong{
        font-size:14px;
    }

    .cookie-consent-text p{
        font-size:11px;
    }

    .cookie-consent-actions button{
        font-size:11px;
    }

    .cookie-settings-modal{
        padding:6px;
    }

    .cookie-settings-dialog{
        max-height:calc(100vh - 12px);
    }

    .cookie-settings-header{
        padding:16px 14px;
    }

    .cookie-settings-options{
        padding:0 14px;
    }

    .cookie-settings-footer{
        padding:12px 14px;
    }
}

/* ==========================================
   FORGOT PASSWORD
========================================== */

.account-forgot-page{
    font-family:Poppins,sans-serif;
    background:var(--account-background);
}

.account-forgot{
    min-height:650px;

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

    padding:60px 20px;
}


/* ==========================================
   CARD
========================================== */

.account-forgot-card{
    width:100%;
    max-width:560px;

    padding:52px 48px;

    text-align:center;
}


/* ==========================================
   ICON
========================================== */

.account-forgot-icon{
    width:76px;
    height:76px;

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

    margin:0 auto 26px;

    border-radius:50%;

    background:#fff0f2;

    color:#d56578;

    font-size:28px;
}


/* ==========================================
   HEADER
========================================== */

.account-forgot-header{
    margin-bottom:36px;
}

.account-forgot-header h1{
    margin:0 0 14px;

    font-family:Poppins,sans-serif;
    font-size:30px;
    font-weight:700;

    color:var(--account-text);
}

.account-forgot-header p{
    max-width:430px;

    margin:0 auto;

    color:var(--account-text-light);

    font-size:14px;
    line-height:1.8;
}


/* ==========================================
   FORM
========================================== */

.account-forgot-form{
    display:flex;
    flex-direction:column;

    gap:22px;

    text-align:left;
}

.account-forgot-form .account-input{
    width:100%;
}


/* ==========================================
   BUTTON
========================================== */

.account-forgot-submit{
    width:100%;

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

    gap:10px;

    margin-top:4px;

    font-family:Poppins,sans-serif;
    font-size:14px;
}

.account-forgot-submit i{
    font-size:15px;
}


/* ==========================================
   FOOTER
========================================== */

.account-forgot-footer{
    margin-top:30px;

    padding-top:24px;

    border-top:1px solid var(--account-border);
}

.account-forgot-footer a{
    display:inline-flex;

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

    gap:9px;

    color:var(--account-primary);

    text-decoration:none;

    font-family:Poppins,sans-serif;
    font-size:14px;
    font-weight:600;

    transition:var(--account-transition);
}

.account-forgot-footer a:hover{
    color:#c95569;
}

.account-forgot-footer a i{
    font-size:13px;

    transition:transform .2s ease;
}

.account-forgot-footer a:hover i{
    transform:translateX(-3px);
}

/* ==========================================
   FORGOT PASSWORD MESSAGES
========================================== */

.account-forgot-message{
    display:flex;
    align-items:flex-start;

    gap:12px;

    margin-bottom:24px;
    padding:15px 17px;

    border-radius:12px;

    text-align:left;

    font-family:Poppins,sans-serif;
    font-size:13px;
    line-height:1.6;
}

.account-forgot-message i{
    margin-top:3px;
    flex-shrink:0;

    font-size:16px;
}

.account-forgot-message div{
    display:flex;
    flex-direction:column;

    gap:3px;
}

.account-forgot-message strong{
    font-size:13px;
    font-weight:600;
}

.account-forgot-message span{
    display:block;
}


/* SUCCESS */

.account-forgot-message-success{
    background:rgba(103,197,135,.12);
    color:#3f8f5c;
}


/* ERROR */

.account-forgot-message-error{
    background:rgba(232,107,122,.10);
    color:var(--account-danger);
}

/* ==========================================
   RESET PASSWORD
========================================== */

.account-reset-page{
    font-family:Poppins,sans-serif;
    background:var(--account-background);
}

.account-reset{
    min-height:650px;

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

    padding:60px 20px;
}


/* ==========================================
   CARD
========================================== */

.account-reset-card{
    width:100%;
    max-width:560px;

    padding:52px 48px;

    text-align:center;
}


/* ==========================================
   ICON
========================================== */

.account-reset-icon{
    width:76px;
    height:76px;

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

    margin:0 auto 26px;

    border-radius:50%;

    background:#fff0f2;

    color:#d56578;

    font-size:28px;
}

.account-reset-icon-error{
    background:rgba(232,107,122,.10);
    color:var(--account-danger);
}


/* ==========================================
   HEADER
========================================== */

.account-reset-header{
    margin-bottom:36px;
}

.account-reset-header h1{
    margin:0 0 14px;

    font-family:Poppins,sans-serif;
    font-size:30px;
    font-weight:700;

    color:var(--account-text);
}

.account-reset-header p{
    max-width:430px;

    margin:0 auto;

    color:var(--account-text-light);

    font-size:14px;
    line-height:1.8;
}


/* ==========================================
   FORM
========================================== */

.account-reset-form{
    display:flex;
    flex-direction:column;

    gap:20px;

    text-align:left;
}

.account-reset-form .account-input{
    width:100%;
}


/* ==========================================
   PASSWORD INPUT
========================================== */

.account-reset-form .account-password-wrapper{
    position:relative;
}

.account-reset-form .account-password-wrapper .account-input{
    padding-left:46px;
    padding-right:52px;
}

.account-reset-form .account-input-icon{
    position:absolute;

    left:16px;
    top:50%;

    transform:translateY(-50%);

    color:#9a9a9a;

    font-size:15px;

    pointer-events:none;
}

.account-reset-form .account-password-toggle{
    position:absolute;

    right:16px;
    top:50%;

    transform:translateY(-50%);

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

    padding:0;

    border:0;

    background:none;

    color:#999;

    font-size:17px;

    cursor:pointer;

    transition:var(--account-transition);
}

.account-reset-form .account-password-toggle:hover{
    color:var(--account-primary);
}


/* ==========================================
   BUTTON
========================================== */

.account-reset-submit{
    width:100%;

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

    gap:10px;

    margin-top:4px;

    font-family:Poppins,sans-serif;
    font-size:14px;
}


/* ==========================================
   FOOTER
========================================== */

.account-reset-footer{
    margin-top:30px;

    padding-top:24px;

    border-top:1px solid var(--account-border);
}

.account-reset-footer a{
    display:inline-flex;

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

    gap:9px;

    color:var(--account-primary);

    text-decoration:none;

    font-family:Poppins,sans-serif;
    font-size:14px;
    font-weight:600;

    transition:var(--account-transition);
}

.account-reset-footer a:hover{
    color:#c95569;
}

.account-reset-footer a i{
    font-size:13px;

    transition:transform .2s ease;
}

.account-reset-footer a:hover i{
    transform:translateX(-3px);
}


/* ==========================================
   RESET PASSWORD SUCCESS
========================================== */

.account-reset-icon-success{
    background:rgba(103,197,135,.12);
    color:var(--account-success);
}

.account-reset-success-action{
    margin-top:30px;
}

.account-reset-login-button{
    width:100%;
    height:56px;

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

    gap:10px;

    text-decoration:none;

    font-family:Poppins,sans-serif;
    font-size:14px;
}

/* ==========================================
   PASSWORD MANAGER USERNAME
========================================== */

.account-password-manager-username{
    position:absolute;

    width:1px;
    height:1px;

    padding:0;
    margin:-1px;

    overflow:hidden;

    clip:rect(0, 0, 0, 0);
    white-space:nowrap;

    border:0;
}

/* ==========================================
   TWO FACTOR AUTHENTICATION
========================================== */

.account-two-factor-page{
    font-family:Poppins,sans-serif;
    background:var(--account-background);
}

.account-two-factor{
    min-height:650px;

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

    padding:60px 20px;
}


/* ==========================================
   CARD
========================================== */

.account-two-factor-card{
    width:100%;
    max-width:560px;

    padding:52px 48px;

    text-align:center;
}


/* ==========================================
   ICON
========================================== */

.account-two-factor-icon{
    width:76px;
    height:76px;

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

    margin:0 auto 26px;

    border-radius:50%;

    background:#fff0f2;

    color:#d56578;

    font-size:28px;
}


/* ==========================================
   HEADER
========================================== */

.account-two-factor-header{
    margin-bottom:34px;
}

.account-two-factor-header h1{
    margin:0 0 14px;

    font-family:Poppins,sans-serif;
    font-size:30px;
    font-weight:700;

    color:var(--account-text);
}

.account-two-factor-header p{
    max-width:430px;

    margin:0 auto;

    color:var(--account-text-light);

    font-size:14px;
    line-height:1.8;
}


/* ==========================================
   MESSAGES
========================================== */

.account-two-factor-message{
    display:flex;
    align-items:flex-start;

    gap:12px;

    margin-bottom:24px;
    padding:15px 17px;

    border-radius:12px;

    text-align:left;

    font-size:13px;
    line-height:1.6;
}

.account-two-factor-message i{
    margin-top:3px;

    flex-shrink:0;

    font-size:16px;
}

.account-two-factor-message-success{
    background:rgba(103,197,135,.12);
    color:#3f8f5c;
}

.account-two-factor-message-error{
    background:rgba(232,107,122,.10);
    color:var(--account-danger);
}


/* ==========================================
   FORM
========================================== */

.account-two-factor-form{
    display:flex;
    flex-direction:column;

    gap:22px;

    text-align:left;
}


/* ==========================================
   CODE INPUT
========================================== */

.account-two-factor-code{
    width:100%;
    height:64px;

    padding:0 18px;

    border:1px solid var(--account-border);
    border-radius:14px;

    background:#fff;

    color:var(--account-text);

    font-family:Poppins,sans-serif;
    font-size:28px;
    font-weight:600;

    letter-spacing:10px;
    text-align:center;

    transition:var(--account-transition);
}

.account-two-factor-code::placeholder{
    color:#c8c8c8;
}

.account-two-factor-code:focus{
    outline:none;

    border-color:var(--account-primary);

    box-shadow:
        0 0 0 4px rgba(216,143,155,.12);
}


/* ==========================================
   SUBMIT
========================================== */

.account-two-factor-submit{
    width:100%;

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

    gap:10px;

    font-family:Poppins,sans-serif;
    font-size:14px;
}

.account-two-factor-submit:disabled{
    opacity:.55;
    cursor:not-allowed;
}


/* ==========================================
   RESEND
========================================== */

.account-two-factor-resend{
    margin-top:24px;
}

.account-two-factor-resend-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:9px;

    padding:0;

    border:0;

    background:none;

    color:var(--account-primary);

    font-family:Poppins,sans-serif;
    font-size:14px;
    font-weight:600;

    cursor:pointer;

    transition:var(--account-transition);
}

.account-two-factor-resend-button:hover{
    color:#c95569;
}

.account-two-factor-resend-button i{
    font-size:14px;
}


/* ==========================================
   FOOTER
========================================== */

.account-two-factor-footer{
    margin-top:30px;

    padding-top:24px;

    border-top:1px solid var(--account-border);
}

.account-two-factor-back{
    display:inline-flex;
    align-items:center;
    justify-content:center;
	border:0;
	padding:0;
	background:none;
	cursor:pointer;
    gap:9px;

    color:var(--account-primary);

    text-decoration:none;

    font-family:Poppins,sans-serif;
    font-size:14px;
    font-weight:600;

    transition:var(--account-transition);
}

.account-two-factor-back:hover{
    color:#c95569;
}

.account-two-factor-back i{
    font-size:13px;

    transition:transform .2s ease;
}

.account-two-factor-back:hover i{
    transform:translateX(-3px);
}



/* ==========================================================
   HOME PAGE - DESKTOP + MOBILE
========================================================== */

body.home-page{
    background:#fbf8f6;
    color:#20252d;
}


/* ==========================================================
   TOPBAR
========================================================== */

.topbar{
    min-height:34px;

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

    padding:0 4%;

    background:
        linear-gradient(
            90deg,
            #ef7181 0%,
            #ed6577 50%,
            #ef7181 100%
        );

    color:#fff;

    font-size:12px;
    font-weight:600;
}

.topbar > div{
    display:flex;
    align-items:center;
    gap:6px;
}


/* ==========================================================
   HEADER
========================================================== */

header{
    position:relative;
    z-index:100;

    min-height:96px;

    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;

    padding:12px 4%;

    background:#fff;
}

.mobile-menu-toggle{
    display:none;
}

.logo{
    justify-self:start;

    display:flex;
    align-items:center;

    gap:14px;
}

.logo img{
    width:58px;
    height:58px;

    object-fit:contain;
}

.logo-text{
    display:flex;
    flex-direction:column;
}

.brand{
    font-family:"Playfair Display", serif;

    font-size:38px;
    font-weight:700;
    line-height:.95;

    color:#191d24;
}

.logo-text small{
    margin-top:7px;

    font-size:9px;
    font-weight:400;

    letter-spacing:3.5px;

    color:#6f7175;

    white-space:nowrap;
}

header nav{
    justify-self:center;

    display:flex;
    align-items:center;

    gap:42px;
}

header nav a{
    position:relative;

    padding:10px 0;

    color:#181b20;

    text-decoration:none;

    font-size:13px;
    font-weight:600;
}

header nav a::after{
    content:"";

    position:absolute;

    left:0;
    bottom:2px;

    width:0;
    height:2px;

    background:#ef6b7d;

    transition:width .2s ease;
}

header nav a:hover,
header nav a.active{
    color:#ef6478;
}

header nav a:hover::after,
header nav a.active::after{
    width:100%;
}

header nav a.active{
    border-bottom:0;
}

.icons{
    justify-self:end;

    display:flex;
    align-items:center;

    gap:14px;
}

.icon{
    width:36px;
    height:36px;

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

    border-radius:50%;

    color:#151a20;

    font-size:18px;

    text-decoration:none;
}

.icon:hover{
    background:#fff2f4;
    color:#e96879;
}

.cart-count{
    top:-3px;
    right:-3px;

    width:18px;
    height:18px;

    background:#ef687b;

    font-size:10px;
}


/* ==========================================================
   HERO
========================================================== */

.home-page .hero{
    position:relative;

    min-height:510px;

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

    padding:
        48px
        20px
        115px;

    overflow:hidden;

    background-image:none;

	background:
		linear-gradient(
			180deg,
			transparent 58%,
			#fbf8f6 100%
		),
		radial-gradient(
			circle at 7% 72%,
			rgba(239,113,129,.12) 0,
			rgba(239,113,129,.06) 13%,
			transparent 30%
		),
		radial-gradient(
			circle at 94% 68%,
			rgba(239,113,129,.12) 0,
			rgba(239,113,129,.05) 14%,
			transparent 31%
		),
		linear-gradient(
			180deg,
			#fffaf8 0%,
			#fdf7f5 100%
		);

    text-align:center;
}

.home-page .hero::before,
.home-page .hero::after{
    content:"";

    position:absolute;

    width:430px;
    height:430px;

    border:1px solid rgba(235,110,128,.22);
    border-radius:50%;

    pointer-events:none;
}

.home-page .hero::before{
    left:-280px;
    top:95px;

    box-shadow:
        48px 15px 0 -1px rgba(0,0,0,0),
        48px 15px 0 0 rgba(235,110,128,.14);
}

.home-page .hero::after{
    right:-270px;
    top:70px;

    box-shadow:
        -46px 28px 0 -1px rgba(0,0,0,0),
        -46px 28px 0 0 rgba(235,110,128,.14);
}

.home-page .hero-content{
    position:relative;
    z-index:2;

    width:100%;
    max-width:760px;

    margin:0 auto;
}

.hero-eyebrow{
    margin-bottom:9px;

    color:#ed687b;

    font-size:12px;
    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;
}

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

    gap:10px;

    margin:0 auto 17px;

    color:#ef7181;
}

.section-ornament span{
    width:24px;
    height:1px;

    background:#ef7181;
}

.section-ornament i{
    font-size:16px;
}

.home-page .hero h1{
    max-width:720px;

    margin:
        0
        auto
        18px;

    font-family:"Playfair Display", serif;

    font-size:45px;
    font-weight:700;
    line-height:1.04;

    letter-spacing:-1px;

    color:#252a30;
}

.hero-highlight{
    color:#ed687a;
}

.hero-title-heart{
    margin-left:5px;

    color:#ed687a;

    font-size:.78em;

    vertical-align:3px;
}

.home-page .hero p{
    max-width:520px;

    margin:
        0
        auto
        25px;

    color:#3e4248;

    font-size:15px;
    line-height:1.55;
}

.hero-button{
    min-width:180px;

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

    gap:16px;

    padding:13px 28px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #ef7181,
            #ed6075
        );

    box-shadow:
        0 7px 18px
        rgba(232,95,116,.18);

    font-size:13px;
    font-weight:600;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.hero-button:hover{
    transform:translateY(-2px);

    box-shadow:
        0 10px 24px
        rgba(232,95,116,.28);
}

.hero-button i{
    font-size:12px;
}

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

    gap:14px;

    margin-top:17px;

    color:#333941;

    font-size:14px;
}

.hero-rating-stars{
    display:flex;

    gap:3px;

    color:#ed6a7c;
}

.hero-rating-stars i{
    font-size:14px;
}


/* ==========================================================
   FEATURES
========================================================== */

.home-page .features{
    position:relative;
    z-index:5;

    width:calc(100% - 11%);
    max-width:1260px;

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

    margin:
        0
        auto
        -20px;

    padding:28px 18px;

    transform:translateY(-55px);

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

    border-radius:18px;

	box-shadow:
		0 14px 38px
		rgba(57,46,46,.09);
}

.home-page .feature{
    min-width:0;

    display:flex;
    align-items:flex-start;

    gap:15px;

    padding:4px 22px;
}

.home-page .feature:not(:last-child){
    border-right:1px solid #ece8e7;
}

.home-page .feature::after{
    display:none;
}

.home-page .feature-icon{
    width:52px;
    height:52px;

    flex:0 0 52px;

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

    border-radius:50%;

    background:#fff0f2;

    color:#ee7180;

    font-size:23px;
}

.home-page .feature-text h4{
    margin:1px 0 6px;

    color:#1f2228;

    font-size:13px;
    font-weight:600;

    line-height:1.35;
}

.home-page .feature-text p{
    margin:0;

    color:#575b61;

    font-size:11px;
    line-height:1.6;
}


/* ==========================================================
   CATEGORIES
========================================================== */

.home-page .categories{
    padding-bottom:10px;
}

.home-page .categories h2{
    margin:0;

    color:#24282e;

    font-family:"Playfair Display", serif;

    font-size:35px;
    font-weight:700;

    text-align:center;
}

.categories-ornament{
    margin-top:7px;
    margin-bottom:18px;
}

.home-page .grid{
    width:calc(100% - 10%);
    max-width:1370px;

    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));

    gap:24px;

    margin:0 auto;

    padding:0 0 25px;
}

.home-page .card{
    min-width:0;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    border-radius:12px;

    background:#fff;

    box-shadow:
        0 7px 24px
        rgba(50,43,43,.09);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.home-page .card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 12px 30px
        rgba(50,43,43,.14);
}

.home-page .card .img{
    width:100%;
    height:170px;

    background-size:cover;
    background-position:center;
}

.home-page .card h3{
    min-height:46px;

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

    margin:0;

    padding:
        10px
        8px
        5px;

    color:#202329;

    font-size:12px;
    font-weight:600;
    line-height:1.35;

    text-align:center;
}

.home-page .card button{
    min-width:90px;

    margin:
        2px
        auto
        16px;

    padding:
        8px
        18px;

    border:0;
    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #ef7181,
            #ed6075
        );

    color:#fff;

    font-family:Poppins,sans-serif;

    font-size:9px;
    font-weight:600;

    cursor:pointer;
}


/* ==========================================================
   FOOTER
========================================================== */

.home-page footer{
    padding:
        15px
        20px
        24px;

    background:transparent;

    color:#54575d;

    font-size:11px;

    text-align:center;
}


/* ==========================================================
   TABLET / SMALL DESKTOP
========================================================== */

@media(max-width:1180px){

    header{
        padding-left:24px;
        padding-right:24px;
    }

    header nav{
        gap:24px;
    }

    header .logo img{
        width:46px;
        height:46px;
    }

    header .brand{
        font-size:28px;
    }

    header .logo-text small{
        font-size:7px;
        letter-spacing:1.8px;
    }

    .home-page .feature{
        padding-left:14px;
        padding-right:14px;
    }

    .home-page .feature-text p{
        font-size:10px;
    }

}

/* ==========================================================
   MOBILE / TABLET NAVIGATION
========================================================== */

@media(max-width:975px){

    header{
        position:relative;

        min-height:82px;

        display:grid;
        grid-template-columns:42px minmax(0,1fr) auto;
        align-items:center;

        gap:10px;

        padding:
            10px
            18px;
    }


    /* Hamburger */

    .mobile-menu-toggle{
        width:42px;
        height:44px;

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

        padding:0;

        border:0;
        background:transparent;

        color:#171c22;

        font-size:25px;

        cursor:pointer;
    }


    /* Logo */

    header .logo{
        min-width:0;

        justify-self:start;

        gap:9px;
    }

    header .logo img{
        width:48px;
        height:48px;
    }

    header .brand{
        font-size:30px;
    }

    header .logo-text small{
        margin-top:5px;

        font-size:6px;
        letter-spacing:1.7px;

        white-space:nowrap;
    }


    /* Icons */

    header .icons{
        justify-self:end;

        gap:5px;
    }

    header .icon,
    header .language-btn{
        width:32px;
        height:36px;

        font-size:17px;
    }


    /* Navigation */

    header nav{
        position:absolute;

        top:100%;
        left:0;
        right:0;

        width:100%;

        display:flex;
        flex-direction:column;
        align-items:stretch;

        gap:0;

        padding:
            8px
            18px
            18px;

        background:#fff;

        border-top:1px solid #f0eceb;

        box-shadow:
            0 12px 30px
            rgba(0,0,0,.08);

        opacity:0;
        visibility:hidden;

        transform:translateY(-8px);

        transition:
            opacity .2s ease,
            visibility .2s ease,
            transform .2s ease;

        z-index:1000;
    }

    header nav.is-open{
        opacity:1;
        visibility:visible;

        transform:translateY(0);
    }

    header nav a{
        width:100%;

        padding:
            13px
            5px;

        border-bottom:1px solid #f4f0ef;

        font-size:13px;
    }

    header nav a:last-child{
        border-bottom:0;
    }

}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px){

    body.home-page{
        overflow-x:hidden;
    }


    /* Topbar */

    .topbar{
        min-height: 30px;

        justify-content:center;

        padding:0 12px;

        font-size:12px;

        text-align:center;
    }

    .topbar > div{
        display:none;
    }

    .topbar > div:nth-child(2){
        display:flex;
    }


    /* Header */

    header{
        min-height:92px;

        display:grid;
        grid-template-columns:40px minmax(0,1fr) auto;
        align-items:center;

        gap:8px;

        padding:
            10px
            14px;

        background:#fff;
    }

    .mobile-menu-toggle{
        width:34px;
        height:42px;

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

        padding:0;

        border:0;

        background:transparent;

        color:#191d23;

        font-size:25px;

        cursor:pointer;
    }

    /* Logo */

    header .logo{
        min-width:0;

        justify-self:start;

        display:flex;
        align-items:center;

        gap:9px;
    }

    header .logo img{
        width:52px;
        height:52px;

        flex-shrink:0;
    }

    header .logo-text{
        min-width:0;
    }

    header .brand{
        font-size:32px;
        line-height:.9;
    }

    header .logo-text small{
        margin-top:6px;

        font-size:5.5px;

        letter-spacing:1.8px;

        white-space:nowrap;
    }

    /* Right side */

    header .icons{
        justify-self:end;

        display:flex;
        align-items:center;

        gap:2px;
    }

    header .icon,
    header .language-btn{
        width:31px;
        height:38px;

        flex-shrink:0;

        font-size:17px;
    }

    header .flag{
        width:21px;
        height:21px;
    }

    header .language-btn i{
        margin-left:2px;

        font-size:8px;
    }

    /* Cart counter */

    header .cart-count{
        top:-1px;
        right:-2px;

        width:17px;
        height:17px;

        font-size:9px;
    }

    /* Mobile navigation */

    header nav a:last-child{
        border-bottom:0;
    }


    /* Hero */

	.home-page .hero{
		min-height:440px;

		padding:
			25px
			18px
			88px;

		background:
			radial-gradient(
				circle at -5% 72%,
				rgba(239,113,129,.12) 0,
				rgba(239,113,129,.05) 18%,
				transparent 38%
			),
			radial-gradient(
				circle at 105% 68%,
				rgba(239,113,129,.11) 0,
				rgba(239,113,129,.05) 18%,
				transparent 38%
			),
			linear-gradient(
				180deg,
				#fffaf8 0%,
				#fdf7f5 100%
			);
	}

	.home-page .hero::before,
	.home-page .hero::after{
		width:260px;
		height:260px;

		top:115px;
	}

	.home-page .hero::before{
		left:-190px;
	}

	.home-page .hero::after{
		right:-190px;
	}

    .home-page .hero-content{
        max-width:600px;
    }

	.hero-eyebrow{
		margin-bottom:7px;

		font-size:9px;

		letter-spacing:3px;
	}

	.section-ornament{
		gap:8px;

		margin-bottom:16px;
	}

	.section-ornament span{
		width:22px;
	}

	.section-ornament i{
		font-size:15px;
	}

	.home-page .hero h1{
		max-width:355px;

		margin-bottom:18px;

		font-size:30px;
		line-height:1.08;

		letter-spacing:-.7px;
	}

    .hero-title-heart{
        margin-left:3px;
    }

	.home-page .hero p{
		max-width:330px;

		margin-bottom:20px;

		font-size:12px;
		line-height:1.55;
	}

	.hero-button{
		min-width:164px;

		padding:
			12px
			23px;

		font-size:12px;
	}

	.hero-rating{
		gap:10px;

		margin-top:16px;

		font-size:11px;
	}

	.hero-rating-stars{
		gap:2px;
	}

	.hero-rating-stars i{
		font-size:11px;
	}


    /* Features */

    .home-page .features{
        width:calc(100% - 28px);

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

        margin-bottom:-24px;

        padding:15px 12px;

        transform:translateY(-50px);

        border-radius:18px;
    }

    .home-page .feature{
        min-height:132px;

        gap:10px;

        padding:
            14px
            10px;
    }

    .home-page .feature:not(:last-child){
        border-right:0;
    }

    .home-page .feature:nth-child(odd){
        border-right:1px solid #ece8e7;
    }

    .home-page .feature:nth-child(-n+2){
        border-bottom:1px solid #ece8e7;
    }

    .home-page .feature-icon{
        width:44px;
        height:44px;

        flex-basis:44px;

        font-size:20px;
    }

    .home-page .feature-text h4{
        font-size:11px;
        line-height:1.25;
    }

    .home-page .feature-text p{
        font-size:10px;
        line-height:1.45;
    }


    /* Categories */

    .home-page .categories h2{
        font-size:31px;
    }

    .categories-ornament{
        margin-bottom:14px;
    }

    .home-page .grid{
        width:calc(100% - 28px);

        grid-template-columns:
            repeat(6, minmax(0, 1fr));

        gap:10px;

        padding-bottom:20px;
    }

    .home-page .card{
        border-radius:10px;
    }

    .home-page .card:nth-child(-n+3){
        grid-column:span 2;
    }

    .home-page .card:nth-child(n+4){
        grid-column:span 3;
    }

    .home-page .card .img{
        height:112px;
    }

    .home-page .card:nth-child(n+4) .img{
        height:122px;
    }

    .home-page .card h3{
        min-height:47px;

        padding:
            7px
            5px
            3px;

        font-size:10px;
    }

    .home-page .card button{
        min-width:92px;

        margin-bottom:10px;

        padding:
            7px
            12px;

        font-size:8px;
    }


    /* Footer */

    .home-page footer{
        padding:
            13px
            14px
            22px;

        font-size:9px;
        line-height:1.5;
    }

}