html.mm-motion {
--mm-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
@view-transition {
navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.28s;
animation-timing-function: var(--mm-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}
::view-transition-group(mm-product) {
animation-duration: 0.5s;
animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
::view-transition-old(mm-product),
::view-transition-new(mm-product) {
height: 100%;
object-fit: cover;
}
html.mm-motion .site-header {
view-transition-name: mm-header;
}
html.mm-motion #productDetail > .skeleton-image,
html.mm-motion #product-image-zoom {
view-transition-name: mm-product;
}
html.mm-motion .mm-vt-source {
view-transition-name: mm-product;
}
html.mm-motion #productDetail > .skeleton-image {
background-image: var(--mm-vt-img, none);
background-size: cover;
background-position: center;
}
html.mm-motion .wish-detail-btn {
position: relative;
}
@media (min-width: 861px) {
html.mm-motion .site-header::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: rgba(20, 16, 10, 0.96);
border-bottom: 1px solid rgba(198, 146, 30, 0.28);
box-shadow: 0 8px 24px rgba(20, 16, 10, 0.18);
transform-origin: top;
transform: scaleY(1);
opacity: 0;
transition: transform 0.28s var(--mm-ease), opacity 0.2s var(--mm-ease);
pointer-events: none;
}
html.mm-motion .site-header.mm-compact {
background-color: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
}
html.mm-motion .site-header.mm-compact::before {
opacity: 1;
transform: scaleY(0.78);
}
html.mm-motion .site-header .header-inner {
transition: transform 0.28s var(--mm-ease);
}
html.mm-motion .site-header.mm-compact .header-inner {
transform: translateY(-8px);
}
html.mm-motion .site-header .logo-tagline {
transition: opacity 0.2s var(--mm-ease);
}
html.mm-motion .site-header.mm-compact .logo-tagline {
opacity: 0;
}
}
html.mm-motion .site-header {
transition: transform 0.3s var(--mm-ease);
}
html.mm-motion .hero__title.mm-split {
opacity: 1;
transform: none;
}
html.mm-motion .hero__title.mm-split.play {
animation: none;
}
html.mm-motion .mm-w {
display: inline-block;
overflow: hidden;
vertical-align: top;
padding-bottom: 0.08em;
margin-bottom: -0.08em;
}
html.mm-motion .mm-w-i {
display: inline-block;
opacity: 0;
transform: translateY(0.7em);
}
html.mm-motion .mm-split.play .mm-w-i {
animation: mm-word 0.6s var(--mm-ease) calc(0.5s + var(--i) * 60ms) forwards;
}
@keyframes mm-word {
to {
opacity: 1;
transform: none;
}
}
html.mm-motion .hero-reveal-stuck .mm-w-i {
opacity: 1 !important;
transform: none !important;
}
html.mm-motion .hero__media img.play {
animation: mm-hero-zoom 2.6s var(--mm-ease) forwards;
}
@keyframes mm-hero-zoom {
0% {
opacity: 0;
transform: scale(1.06);
}
18% {
opacity: 1;
}
100% {
opacity: 1;
transform: scale(1);
}
}
html.mm-motion .hero__media img {
will-change: translate;
}
html.mm-motion .hero__cta {
position: relative;
overflow: hidden;
isolation: isolate;
}
html.mm-motion .hero__cta.mm-magnet-reset {
transition: translate 0.35s var(--mm-ease), background 0.18s ease;
}
html.mm-motion .hero__cta::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 55%;
background: linear-gradient(100deg, transparent, rgba(255, 224, 140, 0.55), transparent);
transform: translateX(-130%) skewX(-18deg);
opacity: 0;
pointer-events: none;
}
html.mm-motion .hero__cta.mm-shimmer::after {
animation: mm-shimmer 0.8s var(--mm-ease) 1 forwards;
}
@keyframes mm-shimmer {
0% {
opacity: 1;
transform: translateX(-130%) skewX(-18deg);
}
100% {
opacity: 1;
transform: translateX(260%) skewX(-18deg);
}
}
html.mm-motion .mm-r {
opacity: 0;
transform: translateY(24px);
}
html.mm-motion .mm-r.mm-in {
opacity: 1;
transform: none;
transition: opacity 0.6s var(--mm-ease) var(--mm-d, 0ms), transform 0.6s var(--mm-ease) var(--mm-d, 0ms);
}
html.mm-motion .product-card {
overflow: visible;
isolation: isolate;
box-shadow: none;
transition: transform 0.25s var(--mm-ease), border-color 0.25s var(--mm-ease);
}
html.mm-motion .product-card::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
box-shadow: 0 18px 38px rgba(59, 42, 32, 0.24);
opacity: 0;
transition: opacity 0.25s var(--mm-ease);
pointer-events: none;
}
html.mm-motion .product-card .product-card-image {
border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
html.mm-motion .product-card .product-card-image img {
transition: transform 0.5s var(--mm-ease), opacity 0.4s ease;
}
@media (hover: hover) {
html.mm-motion .product-card:hover {
box-shadow: none;
transform: translateY(-6px);
}
html.mm-motion .product-card:hover::before {
opacity: 1;
}
html.mm-motion .product-card:hover .product-card-image img {
transform: scale(1.06);
}
}
html.mm-motion .wish-heart.mm-pop {
animation: mm-pop 0.36s var(--mm-ease);
}
@keyframes mm-pop {
0% {
transform: scale(1);
}
45% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
.mm-spark {
position: absolute;
left: 50%;
top: 50%;
width: 5px;
height: 5px;
margin: -2.5px 0 0 -2.5px;
border-radius: 50%;
background: #c6921e;
pointer-events: none;
z-index: 4;
}
html.mm-motion .discount-badge.mm-pulse {
animation: mm-pulse 0.5s var(--mm-ease) 1;
}
@keyframes mm-pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.14);
}
}
.mm-fly {
position: fixed;
left: 0;
top: 0;
z-index: 1300;
width: 64px;
height: 64px;
border-radius: 14px;
object-fit: cover;
background: #fff;
box-shadow: 0 10px 26px rgba(20, 16, 10, 0.35);
pointer-events: none;
will-change: transform, opacity;
}
html.mm-motion #cartCount {
overflow: hidden;
}
html.mm-motion #cartCount.mm-rolling {
color: transparent;
}
.mm-roll {
position: absolute;
inset: 0;
display: block;
overflow: hidden;
color: #14100a;
pointer-events: none;
}
.mm-roll > span {
position: absolute;
inset: 0;
display: grid;
place-items: center;
will-change: transform;
}
.mm-ring {
position: fixed;
z-index: 1290;
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid #c6921e;
pointer-events: none;
}
.mm-toast {
position: fixed;
right: 20px;
top: 88px;
z-index: 1250;
width: min(340px, calc(100vw - 32px));
padding: 14px 16px 16px;
border-radius: 14px;
background: #14100a;
color: #fdfaf0;
box-shadow: 0 16px 38px rgba(20, 16, 10, 0.34);
font-size: var(--fs-body-sm);
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.22s var(--mm-ease), transform 0.22s var(--mm-ease);
pointer-events: none;
}
.mm-toast.mm-show {
opacity: 1;
transform: none;
pointer-events: auto;
}
.mm-toast-row {
display: flex;
align-items: center;
gap: 12px;
}
.mm-toast-row strong {
display: block;
font-weight: 600;
line-height: 1.3;
}
.mm-toast-row span {
color: rgba(253, 250, 240, 0.7);
font-size: var(--fs-meta);
}
.mm-toast a {
margin-left: auto;
color: #e6b94f;
font-weight: 700;
white-space: nowrap;
}
.mm-toast-bar {
margin-top: 12px;
height: 5px;
border-radius: 5px;
background: rgba(253, 250, 240, 0.16);
overflow: hidden;
}
.mm-toast-bar > i {
display: block;
height: 100%;
border-radius: 5px;
background: #c6921e;
transform-origin: left;
transform: scaleX(var(--p, 0));
transition: transform 0.6s var(--mm-ease) 0.15s;
}
.mm-toast-msg {
margin: 8px 0 0;
font-size: var(--fs-meta);
color: rgba(253, 250, 240, 0.8);
}
@media (max-width: 860px) {
.mm-toast {
top: auto;
bottom: 16px;
right: 16px;
left: 16px;
width: auto;
transform: translateY(10px);
}
}
@media (hover: hover) and (min-width: 861px) {
html.mm-motion .category-card {
transform-style: preserve-3d;
will-change: transform;
}
html.mm-motion .category-card.mm-tilting {
transform: perspective(900px) translateY(-4px) rotateX(var(--mm-rx, 0deg)) rotateY(var(--mm-ry, 0deg));
transition: transform 0.12s linear, box-shadow 0.2s ease;
}
html.mm-motion .category-card .category-card-photo {
transition: transform 0.25s var(--mm-ease);
}
html.mm-motion .category-card.mm-tilting .category-card-photo {
transform: translate(var(--mm-px, 0px), var(--mm-py, 0px)) scale(1.03);
transition: transform 0.12s linear;
}
html.mm-motion .category-card .category-card-icon {
transition: transform 0.25s var(--mm-ease);
}
html.mm-motion .category-card:hover .category-card-icon {
transform: translate(-50%, calc(50% - 4px)) rotate(-8deg) scale(1.08);
}
}
html.mm-motion .cosmetics-swiper .swiper-slide:not(.is-focused) > * {
filter: blur(1.4px);
}
html.mm-motion .cosmetics-swiper .swiper-slide > * {
transition: filter 0.3s var(--mm-ease);
}
html.mm-motion .mm-count {
font-variant-numeric: tabular-nums;
}
html.mm-motion .has-lqip.skeleton-shimmer::after {
display: none;
}
html.mm-motion .has-lqip::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background: var(--lqip) center / cover no-repeat;
filter: blur(10px);
transform: scale(1.12);
opacity: 1;
transition: opacity 0.4s ease;
pointer-events: none;
}
html.mm-motion .has-lqip:not(.skeleton-shimmer)::before {
opacity: 0;
}
html.mm-motion .has-lqip img {
position: relative;
z-index: 1;
}
html.mm-motion .product-card-image .discount-badge,
html.mm-motion .product-card-image .badge-stack {
z-index: 3;
}
html.mm-motion .img-fade {
transition: opacity 0.4s ease;
}
html.mm-motion .mm-star {
display: inline-block;
}
html.mm-motion .mm-stars:not(.mm-stars-in) .mm-star:not(.mm-star-empty) {
opacity: 0.2;
transform: scale(0.6);
}
html.mm-motion .mm-stars-in .mm-star:not(.mm-star-empty) {
transition: opacity 0.3s var(--mm-ease) calc(var(--i) * 90ms), transform 0.35s var(--mm-ease) calc(var(--i) * 90ms);
}
@keyframes mm-rise {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes mm-settle {
from {
opacity: 0;
transform: scale(0.97);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes mm-bump {
0% {
transform: scale(1);
}
40% {
transform: scale(1.14);
}
100% {
transform: scale(1);
}
}
@keyframes mm-pick {
0% {
transform: scale(0.97);
}
60% {
transform: scale(1.025);
}
100% {
transform: scale(1);
}
}
@keyframes mm-sheen {
from {
transform: translateX(-120%) skewX(-18deg);
}
to {
transform: translateX(260%) skewX(-18deg);
}
}
html.mm-motion:not(.mm-soft) .mm-bump {
display: inline-block;
animation: mm-bump 0.38s var(--mm-ease);
}
html.mm-motion:not(.mm-soft) .product-detail-info > * {
animation: mm-rise 0.55s var(--mm-ease) backwards;
}
html.mm-motion:not(.mm-soft) .product-detail-info > :nth-child(1) { animation-delay: 40ms; }
html.mm-motion:not(.mm-soft) .product-detail-info > :nth-child(2) { animation-delay: 90ms; }
html.mm-motion:not(.mm-soft) .product-detail-info > :nth-child(3) { animation-delay: 140ms; }
html.mm-motion:not(.mm-soft) .product-detail-info > :nth-child(4) { animation-delay: 190ms; }
html.mm-motion:not(.mm-soft) .product-detail-info > :nth-child(5) { animation-delay: 240ms; }
html.mm-motion:not(.mm-soft) .product-detail-info > :nth-child(6) { animation-delay: 290ms; }
html.mm-motion:not(.mm-soft) .product-detail-info > :nth-child(7) { animation-delay: 340ms; }
html.mm-motion:not(.mm-soft) .product-detail-info > :nth-child(8) { animation-delay: 390ms; }
html.mm-motion:not(.mm-soft) .product-detail-info > :nth-child(n + 9) { animation-delay: 440ms; }
html.mm-motion:not(.mm-soft) .product-detail-loaded .product-gallery {
animation: mm-settle 0.6s var(--mm-ease) backwards;
}
html.mm-motion:not(.mm-soft) .variant-pill {
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
html.mm-motion:not(.mm-soft) .variant-pill:active {
transform: scale(0.95);
}
html.mm-motion:not(.mm-soft) .variant-pill.active {
animation: mm-pick 0.3s var(--mm-ease);
}
html.mm-motion:not(.mm-soft) .quantity-selector button {
transition: transform 0.12s ease, background-color 0.2s ease;
}
html.mm-motion:not(.mm-soft) .quantity-selector button:active:not(:disabled) {
transform: scale(0.88);
}
html.mm-motion:not(.mm-soft) .btn-add-to-cart,
html.mm-motion:not(.mm-soft) .btn-buy-now {
position: relative;
overflow: hidden;
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
html.mm-motion:not(.mm-soft) .btn-add-to-cart:not(:disabled):active,
html.mm-motion:not(.mm-soft) .btn-buy-now:not(:disabled):active {
transform: scale(0.98);
}
@media (hover: hover) {
html.mm-motion:not(.mm-soft) .btn-buy-now:not(:disabled)::after,
html.mm-motion:not(.mm-soft) .checkout-place-order-btn::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 45%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transform: translateX(-120%) skewX(-18deg);
pointer-events: none;
}
html.mm-motion:not(.mm-soft) .btn-buy-now:not(:disabled):hover::after,
html.mm-motion:not(.mm-soft) .checkout-place-order-btn:hover::after {
animation: mm-sheen 0.7s var(--mm-ease) 1;
}
}
html.mm-motion .btn-add-to-cart.is-added {
background-color: #2c7a47;
border-color: #2c7a47;
color: #fff;
}
html.mm-motion:not(.mm-soft) .checkout-step-col .co-field,
html.mm-motion:not(.mm-soft) .checkout-step-col .co-pay-title,
html.mm-motion:not(.mm-soft) .checkout-step-col .payment-radio,
html.mm-motion:not(.mm-soft) .checkout-step-col .checkout-account-strip:not(:empty) {
animation: mm-rise 0.5s var(--mm-ease) backwards;
}
html.mm-motion:not(.mm-soft) .checkout-step-col .co-field:nth-child(1) { animation-delay: 40ms; }
html.mm-motion:not(.mm-soft) .checkout-step-col .co-field:nth-child(2) { animation-delay: 90ms; }
html.mm-motion:not(.mm-soft) .checkout-step-col .co-field:nth-child(3) { animation-delay: 140ms; }
html.mm-motion:not(.mm-soft) .checkout-step-col .co-field:nth-child(4) { animation-delay: 190ms; }
html.mm-motion:not(.mm-soft) .checkout-step-col .co-field:nth-child(5) { animation-delay: 240ms; }
html.mm-motion:not(.mm-soft) .checkout-step-col .co-pay-title { animation-delay: 280ms; }
html.mm-motion:not(.mm-soft) .checkout-step-col .payment-radio:nth-child(1) { animation-delay: 320ms; }
html.mm-motion:not(.mm-soft) .checkout-step-col .payment-radio:nth-child(2) { animation-delay: 370ms; }
html.mm-motion:not(.mm-soft) .checkout-step-col .payment-radio:nth-child(3) { animation-delay: 420ms; }
html.mm-motion:not(.mm-soft) .checkout-summary-col .order-summary-card {
animation: mm-rise 0.55s var(--mm-ease) 120ms backwards;
}
html.mm-motion:not(.mm-soft) .payment-radio {
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
html.mm-motion:not(.mm-soft) .payment-radio.active {
animation: mm-pick 0.3s var(--mm-ease);
}
html.mm-motion:not(.mm-soft) .progress-step.active .progress-step-num {
animation: mm-pick 0.4s var(--mm-ease);
}
@keyframes mm-open {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: none;
}
}
html.mm-motion:not(.mm-soft) .summary-body.is-open {
animation: mm-open 0.28s var(--mm-ease);
}
html.mm-motion:not(.mm-soft) .products-heading-row,
html.mm-motion:not(.mm-soft) .products-header .section-subtitle,
html.mm-motion:not(.mm-soft) .products-toolbar {
animation: mm-rise 0.5s var(--mm-ease) backwards;
}
html.mm-motion:not(.mm-soft) .products-heading-row { animation-delay: 40ms; }
html.mm-motion:not(.mm-soft) .products-header .section-subtitle { animation-delay: 100ms; }
html.mm-motion:not(.mm-soft) .products-toolbar { animation-delay: 160ms; }
html.mm-motion:not(.mm-soft) .category-pills .category-pill {
animation: mm-rise 0.4s var(--mm-ease) backwards;
}
html.mm-motion:not(.mm-soft) .category-pills .category-pill:nth-child(1) { animation-delay: 60ms; }
html.mm-motion:not(.mm-soft) .category-pills .category-pill:nth-child(2) { animation-delay: 110ms; }
html.mm-motion:not(.mm-soft) .category-pills .category-pill:nth-child(3) { animation-delay: 160ms; }
html.mm-motion:not(.mm-soft) .category-pills .category-pill:nth-child(4) { animation-delay: 210ms; }
html.mm-motion:not(.mm-soft) .category-pills .category-pill:nth-child(n + 5) { animation-delay: 260ms; }
html.mm-motion:not(.mm-soft) .category-pills .category-pill.active {
animation: mm-pick 0.3s var(--mm-ease);
}
html.mm-motion:not(.mm-soft) .products-count.mm-bump {
display: inline-flex;
}
@media (hover: none) {
html.mm-motion .product-card::before {
display: none;
}
}
html.mm-lite .mm-r {
transform: none;
}
html.mm-lite .mm-r.mm-in {
transition: opacity 0.3s ease;
}
@keyframes mm-fade-only {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
html.mm-lite.mm-motion .hero__media img.play {
animation: mm-fade-only 0.5s ease forwards;
}
html.mm-lite.mm-motion .mm-split.play .mm-w-i {
animation-duration: 0.4s;
animation-delay: calc(0.15s + var(--i) * 30ms);
}
html.mm-lite .hero__media img {
will-change: auto;
}
html.mm-lite .skeleton-shimmer::after,
html.mm-lite .category-tile::after {
animation: none;
}
html.mm-lite .has-lqip::before {
filter: none;
transform: none;
}
html.mm-lite .cosmetics-swiper .swiper-slide:not(.is-focused) > *,
html.mm-lite .cosmetics-swiper .swiper-slide > * {
filter: none;
transition: none;
}
html.mm-lite .cd-checkout::after {
animation: none;
}
html.mm-motion.mm-lite:not(.mm-soft) .product-detail-info > *,
html.mm-motion.mm-lite:not(.mm-soft) .product-detail-loaded .product-gallery,
html.mm-motion.mm-lite:not(.mm-soft) .checkout-step-col .co-field,
html.mm-motion.mm-lite:not(.mm-soft) .checkout-step-col .co-pay-title,
html.mm-motion.mm-lite:not(.mm-soft) .checkout-step-col .payment-radio,
html.mm-motion.mm-lite:not(.mm-soft) .checkout-step-col .checkout-account-strip:not(:empty),
html.mm-motion.mm-lite:not(.mm-soft) .checkout-summary-col .order-summary-card,
html.mm-motion.mm-lite:not(.mm-soft) .products-heading-row,
html.mm-motion.mm-lite:not(.mm-soft) .products-header .section-subtitle,
html.mm-motion.mm-lite:not(.mm-soft) .products-toolbar,
html.mm-motion.mm-lite:not(.mm-soft) .category-pills .category-pill {
animation: none;
}
html.mm-lite .cart-drawer.cd-stagger .cd-item {
animation: none;
}
html.mm-lite .product-card {
transition: border-color 0.2s ease;
}
html.mm-lite .product-card .product-card-image img {
transition: opacity 0.3s ease;
}