@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/fonts/inter-latin.woff2?v=1') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter Fallback';
src: local('Arial');
size-adjust: 107.4%;
ascent-override: 90.2%;
descent-override: 22.5%;
line-gap-override: 0%;
}
:root {
color-scheme: light;
--color-bg: #FAFAFA;
--color-cream: #FAF3E4;
--color-cream-soft: #F3E9D4;
--color-espresso: #3B2A20;
--color-espresso-soft: #6B5443;
--color-gold: #D4A017;
--color-gold-light: #E9C568;
--color-gold-dark: #A67910;
--color-gold-muted: #C29829;
--max-width: 1200px;
--color-card-border: #ece2ce;
--radius: 10px;
--shadow: 0 4px 16px rgba(59, 42, 32, 0.1);
--section-spacing: 64px;
--section-spacing-sm: 56px;
--font-sans: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
--fs-hero: clamp(3.5rem, 2vw + 3rem, 4.5rem);
--fs-heading: 2rem;
--fs-card-title: 1.125rem;
--fs-body: 1rem;
--fs-body-sm: 0.875rem;
--fs-meta: 0.8125rem;
--fs-price-sm: 1.125rem;
--fs-price: 1.25rem;
--fs-price-lg: 1.375rem;
}
@media (min-width: 1700px) {
:root {
--max-width: 1280px;
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
picture {
display: contents;
}
html {
scroll-behavior: smooth;
overflow-x: clip;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: var(--font-sans);
font-weight: 400;
background-color: var(--color-bg);
color: var(--color-espresso);
line-height: 1.6;
overflow-x: clip;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
body > main {
flex: 1 0 auto;
}
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
display: block;
}
.site-header {
background-color: rgba(20, 16, 10, 0.96);
border-bottom: 1px solid rgba(198, 146, 30, 0.25);
position: sticky;
top: 0;
z-index: 100;
transition: transform 0.25s ease;
}
.site-header.header-hidden {
transform: translateY(-100%);
}
.header-inner {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px 20px;
padding-top: 14px;
padding-bottom: 14px;
}
.logo {
display: flex;
flex-direction: column;
gap: 3px;
flex-shrink: 0;
order: 1;
}
.header-search {
position: relative;
order: 2;
flex: 1 1 180px;
max-width: 340px;
min-width: 140px;
}
.checkout-page .header-search {
display: none;
}
.search-input {
width: 100%;
padding: 9px 40px 9px 16px;
border-radius: 999px;
border: 2px solid var(--color-gold-light);
background-color: var(--color-cream-soft);
color: var(--color-espresso);
font-size: var(--fs-body-sm);
font-family: inherit;
box-shadow: inset 0 1px 3px rgba(59, 42, 32, 0.06);
}
.search-input::placeholder {
color: var(--color-espresso-soft);
}
.search-input:focus {
outline: none;
border-color: var(--color-gold);
box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.18);
}
.search-icon-btn {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
border: none;
border-radius: 50%;
background-color: var(--color-espresso);
color: var(--color-cream);
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease;
}
.search-icon-btn:hover {
background-color: var(--color-gold-dark);
}
.search-results-dropdown {
position: absolute;
top: calc(100% + 10px);
left: 0;
width: min(430px, calc(100vw - 32px));
max-height: min(70vh, 600px);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(198, 146, 30, 0.5) transparent;
padding: 8px;
color: #FDFAF0;
background: #1b140d;
border: 1px solid rgba(198, 146, 30, 0.4);
border-radius: 18px;
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
z-index: 50;
}
@media (max-width: 860px) {
.search-results-dropdown {
width: auto;
right: 0;
}
}
.search-results-dropdown[hidden] {
display: none;
}
.search-results-status {
padding: 18px 12px 6px;
text-align: center;
color: rgba(253, 250, 240, 0.9);
font-size: var(--fs-body-sm);
}
.search-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
white-space: nowrap;
}
.search-result-item {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
min-height: 62px;
padding: 8px 10px;
border-radius: 12px;
color: inherit;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.search-result-item:hover,
.search-result-item.is-highlighted {
background-color: rgba(212, 160, 23, 0.14);
}
.search-result-item.is-highlighted {
box-shadow: inset 3px 0 0 var(--color-gold);
}
.search-result-text {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.search-result-name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.3;
color: #FDFAF0;
}
.search-result-name mark {
background: none;
color: #EDBE4C;
font-weight: 800;
}
.search-result-meta {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--fs-meta);
color: rgba(253, 250, 240, 0.6);
}
.search-result-price {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
text-align: right;
white-space: nowrap;
}
.search-result-price .price-offer {
font-size: var(--fs-price-sm);
font-weight: 700;
line-height: 1.15;
color: #EDBE4C;
}
.search-result-price .price-regular {
font-size: var(--fs-meta);
line-height: 1.1;
color: rgba(253, 250, 240, 0.5);
}
.search-result-tag {
margin-top: 2px;
padding: 2px 8px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
line-height: 1.4;
color: #F2C85E;
background: rgba(212, 160, 23, 0.2);
}
.search-result-tag.is-out {
color: rgba(253, 250, 240, 0.7);
background: rgba(253, 250, 240, 0.12);
}
@media (max-width: 480px) {
.search-result-item {
grid-template-columns: 52px minmax(0, 1fr);
align-items: start;
column-gap: 12px;
row-gap: 2px;
}
.search-result-thumb-wrap {
grid-row: 1 / span 2;
}
.search-result-meta {
display: none;
}
.search-result-price {
grid-column: 2;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-start;
gap: 2px 8px;
text-align: left;
}
.search-result-tag {
margin-top: 0;
}
}
.search-result-view-all {
display: flex;
justify-content: center;
grid-template-columns: none;
margin-top: 6px;
min-height: 46px;
padding: 12px 14px;
text-align: center;
font-size: var(--fs-body-sm);
font-weight: 700;
color: #14100A;
background-color: #C6921E;
}
.search-result-view-all:hover,
.search-result-view-all.is-highlighted {
background-color: #D9A62E;
box-shadow: none;
}
.search-empty-hint {
padding: 0 14px 12px;
text-align: center;
font-size: var(--fs-meta);
color: rgba(253, 250, 240, 0.6);
}
.search-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0 4px 10px;
}
.search-empty .search-chips {
justify-content: center;
}
.search-chip {
min-height: 40px;
padding: 8px 16px;
border: 1px solid rgba(253, 250, 240, 0.2);
border-radius: 999px;
background: rgba(253, 250, 240, 0.07);
color: #FDFAF0;
font: inherit;
font-size: var(--fs-body-sm);
font-weight: 600;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.search-chip:hover,
.search-chip:focus-visible {
border-color: var(--color-gold);
background: rgba(212, 160, 23, 0.18);
color: #F2C85E;
outline: none;
}
.search-section-title {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 6px 8px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #C6921E;
}
.search-clear {
min-height: 32px;
padding: 4px 8px;
border: none;
background: none;
color: rgba(253, 250, 240, 0.65);
font: inherit;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
cursor: pointer;
}
.search-clear:hover {
color: #F2C85E;
}
.search-skel-row {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
align-items: center;
gap: 12px;
padding: 8px 10px;
}
.search-skel-thumb {
display: block;
width: 52px;
height: 52px;
border-radius: 12px;
}
.search-skel-row b {
display: block;
height: 12px;
margin: 6px 0;
border-radius: 6px;
}
.search-skel-row b:last-child {
width: 55%;
}
.search-skeleton .skeleton-shimmer {
background-color: rgba(253, 250, 240, 0.1);
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .search-results-dropdown.is-opening {
transform-origin: top left;
animation: mmSearchPanelIn 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .search-results-dropdown.is-opening .search-result-item {
animation: mmSearchRowIn 0.28s ease-out backwards;
animation-delay: calc(var(--i, 0) * 32ms + 40ms);
}
@keyframes mmSearchPanelIn {
from {
opacity: 0;
transform: translateY(-6px) scale(0.98);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes mmSearchRowIn {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: none;
}
}
.logo-mark {
display: block;
height: 28px;
overflow: hidden;
position: relative;
align-self: flex-start;
}
.logo-mark img {
height: 44px;
width: auto;
aspect-ratio: 750 / 137;
}
.logo-tagline {
font-size: var(--fs-meta);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-espresso-soft);
white-space: nowrap;
}
.main-nav {
display: flex;
align-items: center;
flex-shrink: 0;
order: 3;
margin-left: auto;
}
.nav-links {
display: flex;
gap: 36px;
list-style: none;
}
.nav-links a {
font-weight: 600;
color: var(--color-espresso);
padding: 8px 4px;
position: relative;
white-space: nowrap;
transition: color 0.2s ease;
}
.nav-links a:hover {
color: var(--color-gold);
}
.nav-links a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background-color: var(--color-gold);
transition: width 0.2s ease;
}
.nav-links a:hover::after {
width: 100%;
}
.nav-item-categories {
position: relative;
}
.nav-categories-dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: var(--color-cream);
border: 1px solid var(--color-gold-light);
border-radius: var(--radius);
box-shadow: var(--shadow);
min-width: 220px;
padding: 8px 0;
list-style: none;
z-index: 50;
}
.nav-item-categories:hover .nav-categories-dropdown,
.nav-item-categories:focus-within .nav-categories-dropdown {
display: block;
}
.nav-categories-dropdown a {
display: block;
padding: 10px 18px;
font-weight: 500;
}
.nav-categories-dropdown a::after {
content: none;
}
.nav-categories-dropdown a:hover {
background-color: var(--color-cream-soft);
}
.cart-link {
position: relative;
display: flex;
align-items: center;
margin-left: 28px;
padding-left: 12px;
color: var(--color-gold-dark);
background: none;
border: none;
font-family: inherit;
cursor: pointer;
transition: color 0.2s ease;
}
.cart-link:hover {
color: var(--color-gold);
}
.cart-count {
position: absolute;
top: calc(var(--cart-pad-y, 0px) - 7px);
right: -10px;
min-width: 16px;
height: 16px;
padding: 0 3px;
border-radius: 999px;
background-color: var(--color-gold);
color: var(--color-espresso);
font-size: 0.65rem;
font-weight: 700;
line-height: 16px;
text-align: center;
}
.account-link {
position: relative;
display: flex;
align-items: center;
gap: 6px;
margin-left: 20px;
color: var(--color-gold-dark);
background: none;
border: none;
font-family: inherit;
font-size: var(--fs-body-sm);
font-weight: 600;
cursor: pointer;
transition: color 0.2s ease;
}
.account-link:hover,
.account-link.open {
color: var(--color-gold);
}
.account-link-icon {
display: block;
}
.account-link-icon[hidden] {
display: none;
}
.account-link-initials {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: var(--color-gold-dark);
color: var(--color-cream);
font-size: 0.65rem;
font-weight: 700;
flex-shrink: 0;
}
.account-link-initials[hidden] {
display: none;
}
.account-link-label {
white-space: nowrap;
}
.nav-account-item {
border-bottom: 1px solid var(--color-gold-light);
margin-bottom: 4px;
}
.nav-account-row {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 24px;
color: var(--color-espresso);
font-weight: 700;
text-decoration: none;
}
.nav-account-row[hidden] {
display: none;
}
.nav-account-row-loggedin {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.nav-account-row-loggedin[hidden] {
display: none;
}
.nav-account-row-name {
font-size: var(--fs-body);
}
.nav-account-row-links {
display: flex;
gap: 16px;
font-size: var(--fs-body-sm);
font-weight: 500;
}
.nav-account-row-links a {
color: var(--color-espresso-soft);
text-decoration: underline;
}
@media (min-width: 861px) {
.nav-account-item {
display: none;
}
}
.account-menu-overlay {
position: fixed;
inset: 0;
background-color: rgba(59, 42, 32, 0.45);
z-index: 200;
}
.account-menu {
position: fixed;
width: 220px;
background-color: #fff;
border: 1px solid var(--color-gold-light);
border-radius: 10px;
box-shadow: var(--shadow);
z-index: 201;
padding: 6px;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.account-menu.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.account-menu-name {
padding: 10px 12px 8px;
margin: 0 0 4px;
font-weight: 700;
color: var(--color-espresso);
font-size: var(--fs-body-sm);
border-bottom: 1px solid var(--color-cream-soft);
}
.account-menu-link {
display: block;
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
color: var(--color-espresso);
font-size: var(--fs-body-sm);
text-decoration: none;
text-align: left;
border-radius: 6px;
background: none;
border: none;
cursor: pointer;
font-family: inherit;
}
.account-menu-link:hover {
background-color: var(--color-cream-soft);
}
.account-menu-logout {
color: #a33a36;
}
@media (max-width: 860px) {
.account-link {
margin-left: 8px;
padding: 4px 8px;
}
.account-link-label {
display: none;
}
.account-menu {
left: 0;
right: 0;
bottom: 0;
top: auto !important;
width: 100%;
border-radius: 16px 16px 0 0;
padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
transform: translateY(100%);
}
.account-menu.open {
transform: translateY(0);
}
.account-menu-name {
padding: 14px 12px 10px;
font-size: var(--fs-body);
}
.account-menu-link {
padding: 14px 12px;
font-size: var(--fs-body);
}
}
.cart-drawer-overlay {
position: fixed;
inset: 0;
background-color: rgba(59, 42, 32, 0.45);
z-index: 200;
}
.cart-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 400px;
background-color: var(--color-cream);
box-shadow: -6px 0 24px rgba(59, 42, 32, 0.2);
z-index: 201;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.3s ease;
}
.cart-drawer.open {
transform: translateX(0);
}
.cart-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var(--color-gold-light);
}
.cart-drawer-header h2 {
font-size: var(--fs-card-title);
font-weight: 600;
}
.cart-drawer-close {
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background-color: var(--color-cream-soft);
color: var(--color-espresso);
font-size: 1rem;
cursor: pointer;
}
.cart-drawer-close:hover {
background-color: var(--color-gold-light);
}
.cart-drawer-body {
flex: 1;
overflow-y: auto;
padding: 20px 24px;
display: flex;
flex-direction: column;
}
.cart-drawer-items {
display: flex;
flex-direction: column;
gap: 14px;
}
.cart-drawer-footer {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--color-gold-light);
}
.cart-drawer-footer-links {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 12px;
font-size: var(--fs-body-sm);
}
.cart-drawer-footer-links a {
font-weight: 600;
color: var(--color-espresso-soft);
}
.cart-drawer-footer-links a:hover {
color: var(--color-gold-dark);
}
.cart-drawer-footer-links button {
background: none;
border: none;
padding: 0;
font-family: inherit;
font-size: var(--fs-body-sm);
font-weight: 600;
color: var(--color-espresso-soft);
cursor: pointer;
}
.cart-drawer-footer-links button:hover {
color: var(--color-gold-dark);
}
.cart-drawer-empty {
margin: auto;
text-align: center;
padding: 24px;
}
.cart-drawer-empty p {
color: var(--color-espresso-soft);
margin-bottom: 16px;
}
.cart-confirm-overlay {
position: fixed;
inset: 0;
background-color: rgba(59, 42, 32, 0.5);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
z-index: 400;
}
.cart-confirm-overlay[hidden] {
display: none;
}
.cart-confirm-modal {
background-color: var(--color-cream);
border: 1px solid var(--color-gold-light);
border-radius: var(--radius);
max-width: 400px;
width: 100%;
padding: 32px 28px;
text-align: center;
box-shadow: var(--shadow);
}
.cart-confirm-message {
font-size: var(--fs-card-title);
font-weight: 600;
color: var(--color-espresso);
margin-bottom: 24px;
}
.cart-confirm-actions {
display: flex;
gap: 12px;
}
.cart-confirm-actions .btn {
flex: 1;
padding: 12px 16px;
font-size: var(--fs-body-sm);
}
.cart-confirm-continue {
background: none;
border: 1.5px solid var(--color-gold-light);
color: var(--color-espresso);
}
.cart-confirm-continue:hover {
background-color: var(--color-cream-soft);
}
@media (max-width: 480px) {
.cart-confirm-actions {
flex-direction: column;
}
}
.cart-item-row {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 14px;
border-bottom: 1px solid var(--color-gold-light);
}
.cart-item-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.cart-item-image {
width: 56px;
height: 56px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
background-color: #fff;
}
.cart-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cart-item-info {
flex: 1;
min-width: 0;
}
.cart-item-name {
display: block;
font-weight: 600;
font-size: var(--fs-card-title);
line-height: 1.3;
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cart-item-name:hover {
color: var(--color-gold-dark);
}
.cart-item-price {
font-size: var(--fs-meta);
color: var(--color-espresso-soft);
margin-bottom: 8px;
}
.cart-item-controls {
display: flex;
align-items: center;
gap: 10px;
}
.cart-item-remove {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
border: none;
background: none;
color: var(--color-espresso-soft);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease, color 0.15s ease;
}
.cart-item-remove:hover {
background-color: var(--color-cream-soft);
color: var(--color-gold-dark);
}
.nav-toggle {
display: none;
flex-direction: column;
justify-content: space-between;
width: 26px;
height: 20px;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.nav-toggle span {
display: block;
height: 3px;
width: 100%;
background-color: var(--color-espresso);
border-radius: 2px;
}
body.home-page .site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
background: rgba(20, 16, 10, calc(var(--header-progress, 0) * 0.86));
border-bottom: 1px solid rgba(198, 146, 30, calc(var(--header-progress, 0) * 0.25));
box-shadow: 0 4px 20px rgba(0, 0, 0, calc(var(--header-progress, 0) * 0.15));
}
.site-header .search-icon-btn,
.site-header .cart-link,
.site-header .account-link {
color: #FDFAF0;
}
.site-header .cart-link:hover,
.site-header .account-link:hover,
.site-header .account-link.open {
color: #E0AC3A;
}
.site-header .search-input {
background-color: rgba(253, 250, 240, 0.12);
border-color: rgba(253, 250, 240, 0.35);
color: #FDFAF0;
}
.site-header .search-input::placeholder {
color: rgba(253, 250, 240, 0.75);
}
.site-header .search-icon-btn {
background-color: rgba(253, 250, 240, 0.15);
}
.site-header .cart-count {
background-color: #C6921E;
color: #14100A;
}
.site-header .nav-toggle span {
background-color: #FDFAF0;
}
.logo-tagline {
display: none;
}
@media (min-width: 861px) {
.site-header .nav-links a {
color: #FDFAF0;
}
.site-header .nav-links a::after {
background-color: #C6921E;
}
.site-header .nav-links a:hover {
color: #E0AC3A;
}
.site-header .nav-categories-dropdown a {
color: var(--color-espresso);
}
.site-header .nav-categories-dropdown a:hover {
color: var(--color-gold-dark);
}
}
@media (min-width: 1366px) {
.site-header .header-inner {
max-width: 1600px;
gap: 16px;
flex-wrap: nowrap;
}
.site-header .header-search {
max-width: 220px;
}
@media (min-width: 1500px) {
.site-header .header-search {
max-width: 270px;
}
}
@media (min-width: 1700px) {
.site-header .header-search {
max-width: 340px;
}
}
.site-header .nav-links {
gap: 22px;
}
.site-header .nav-links a {
font-size: 14.5px;
}
.site-header .account-link {
margin-left: 14px;
}
.site-header .cart-link {
margin-left: 18px;
padding-left: 10px;
}
}
@media (min-width: 861px) and (max-width: 1365px) {
.site-header .nav-links {
gap: 16px;
}
.site-header .nav-links a {
font-size: 14px;
}
.site-header .account-link {
margin-left: 12px;
}
.site-header .cart-link {
margin-left: 12px;
padding-left: 6px;
}
}
@media (max-width: 860px) {
.site-header {
border-bottom: 2px solid var(--color-gold-light);
}
body.home-page .site-header {
position: sticky;
background: rgba(20, 16, 10, calc(1 - var(--header-progress, 0) * 0.14));
border-bottom: 2px solid var(--color-gold-light);
box-shadow: none;
}
.site-header .logo-mark img {
height: 36px;
}
.site-header .logo-mark {
height: 23px;
}
.site-header .header-inner {
gap: 10px 14px;
}
.site-header .search-icon-btn {
background-color: var(--color-espresso);
color: var(--color-cream);
}
.site-header .search-input {
background-color: var(--color-cream-soft);
border-color: var(--color-gold-light);
color: var(--color-espresso);
}
.site-header .search-input::placeholder {
color: var(--color-espresso-soft);
}
.site-header .cart-count {
background-color: var(--color-gold);
color: var(--color-espresso);
}
}
.hero{
position: relative;
display: flex;
align-items: center;
min-height: clamp(460px, 64vh, 660px);
overflow: hidden;
background: #040200;
}
.hero__media,
.hero__media img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.hero__media{
display: block;
overflow: hidden;
}
.hero__media img{
object-fit: contain;
object-position: right center;
}
.hero__media::before{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 150px;
background: linear-gradient(90deg, #040200 0%, transparent 100%);
z-index: 3;
pointer-events: none;
}
.hero__media::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 125px;
background: linear-gradient(0deg, #150f08 0%, transparent 100%);
z-index: 3;
pointer-events: none;
}
.hero__title, .hero__sub, .hero__cta {
opacity: 0;
transform: translateY(16px);
}
.hero__title.play {
animation: heroTextReveal .65s ease .68s forwards;
}
.hero__sub.play {
animation: heroTextReveal .6s ease .92s forwards;
}
.hero__cta.play {
animation: heroCtaPop .55s ease 1.04s forwards;
}
@keyframes heroTextReveal {
to { opacity: 1; transform: translateY(0); }
}
@keyframes heroCtaPop {
0%   { opacity: 0; transform: translateY(16px) scale(.9); }
70%  { opacity: 1; transform: translateY(0) scale(1.04); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.hero__media img {
z-index: 1;
opacity: 0;
transform: scale(1.16);
}
.hero__media img.play {
animation: heroPhotoReveal 1.15s cubic-bezier(.16,.9,.28,1) forwards;
}
@keyframes heroPhotoReveal {
0%   { opacity: 0; transform: scale(1.16); }
45%  { opacity: 1; }
100% { opacity: 1; transform: scale(1); }
}
.hero__scrim::after {
content: "";
position: absolute;
inset: 0;
background: #000;
opacity: .5;
pointer-events: none;
}
.hero__scrim.play::after {
animation: heroScrimLift 1.3s ease forwards;
}
@keyframes heroScrimLift {
to { opacity: 0; }
}
.hero-reveal-stuck .hero__title,
.hero-reveal-stuck .hero__sub,
.hero-reveal-stuck .hero__cta,
.hero-reveal-stuck .hero__media img {
opacity: 1 !important;
transform: none !important;
}
.hero-reveal-stuck .hero__scrim::after {
opacity: 0 !important;
}
.hero__scrim{
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(
90deg,
rgba(28,20,10,.82) 0%,
rgba(28,20,10,.80) 7%,
rgba(28,20,10,.74) 14%,
rgba(28,20,10,.65) 21%,
rgba(28,20,10,.55) 28%,
rgba(28,20,10,.47) 34%,
rgba(28,20,10,.38) 41%,
rgba(28,20,10,.32) 48%,
rgba(28,20,10,.30) 55%,
rgba(28,20,10,.25) 62%,
rgba(28,20,10,.14) 69%,
rgba(28,20,10,.04) 76%,
rgba(28,20,10,0)   82%
);
}
.hero__inner{
position: relative;
z-index: 4;
width: 100%;
max-width: var(--max-width);
margin-inline: auto;
padding-inline: clamp(22px, 4vw, 48px);
color: #fff;
}
.hero__title{
padding-top: 16px;
margin: 0 0 18px;
max-width: 15ch;
font-size: clamp(32px, 5vw, 56px);
font-weight: 700;
line-height: 1.12;
letter-spacing: -.02em;
text-wrap: balance;
}
.hero__sub{
margin: 0 0 30px;
max-width: 44ch;
font-size: clamp(15px, 1.5vw, 18px);
font-weight: 500;
line-height: 1.7;
color: rgba(255,255,255,.86);
}
.hero__cta{
display: inline-block;
padding: 14px 32px;
border-radius: 999px;
background: #c08c12;
color: #fff;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: background .18s ease, transform .18s ease;
}
.hero__cta:hover,
.hero__cta:focus-visible{
background: #a87908;
transform: translateY(-1px);
}
.hero__cta:focus-visible{
outline: 2px solid #fff;
outline-offset: 3px;
}
.hero__cta:active{ transform: translateY(0); }
@media (max-width: 700px){
.hero{
flex-direction: column;
align-items: stretch;
min-height: 0;
background: #150f08;
}
.hero__media{
position: relative;
inset: auto;
height: clamp(220px, 38vh, 310px);
height: clamp(220px, 38dvh, 310px);
}
.hero__media img{
position: absolute;
inset: 0;
object-fit: cover;
object-position: center 78%;
}
.hero__media::before{
content: none;
}
.hero__scrim{
display: none;
}
.hero__inner{
position: static;
color: #fff;
padding-top: clamp(14px, 3.5vh, 28px);
padding-top: clamp(14px, 3.5dvh, 28px);
padding-left: 22px;
padding-right: 22px;
padding-bottom: clamp(18px, 4.2vh, 34px);
padding-bottom: clamp(18px, 4.2dvh, 34px);
max-width: none;
}
.hero__title{
padding-top: clamp(6px, 2vh, 16px);
padding-top: clamp(6px, 2dvh, 16px);
margin-bottom: clamp(8px, 2.2vh, 18px);
font-size: clamp(24px, 4vh, 32px);
font-size: clamp(24px, 4dvh, 32px);
}
.hero__sub{
color: rgba(255,255,255,.86);
margin-bottom: clamp(14px, 3.7vh, 30px);
}
}
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background-color: rgba(250, 243, 228, 0.85);
color: var(--color-espresso);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease;
}
.carousel-arrow:hover {
background-color: var(--color-gold-light);
}
.carousel-arrow.prev {
left: 10px;
}
.carousel-arrow[hidden] {
display: none;
}
.carousel-arrow.next {
right: 10px;
}
.btn {
display: inline-block;
padding: 14px 32px;
border-radius: 999px;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
border: 2px solid transparent;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary {
background-color: var(--color-gold);
color: var(--color-espresso);
}
.btn-primary:hover {
background-color: var(--color-gold-light);
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.categories {
padding: 56px 0 var(--section-spacing);
}
@media (max-width: 699px) {
.categories {
padding-top: 88px;
padding-bottom: 32px;
}
}
.categories h2 {
font-size: var(--fs-heading);
font-weight: 700;
line-height: 1;
letter-spacing: 0.01em;
margin-bottom: 8px;
text-align: center;
}
.category-swiper {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px 16px;
}
.category-swiper .swiper-slide {
height: auto;
}
@media (min-width: 1150px) {
.category-swiper .swiper-wrapper {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 30px;
}
.category-swiper .swiper-slide {
width: auto;
}
}
@media (max-width: 1149px) {
.category-swiper .swiper-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.category-swiper .swiper-slide {
width: auto;
}
}
.category-carousel-box {
display: none;
}
.category-carousel-dots {
display: none;
}
@media (max-width: 700px) {
.categories .category-swiper {
display: none;
}
.category-carousel-box {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
touch-action: manipulation;
overscroll-behavior-x: contain;
scrollbar-width: none;
margin-bottom: 14px;
}
.category-carousel-box::-webkit-scrollbar {
display: none;
}
.category-carousel-page {
display: flex;
gap: 16px;
flex: 0 0 100%;
scroll-snap-align: start;
}
.category-carousel-page .category-card {
flex: 1 1 0;
min-width: 0;
}
.category-carousel-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 2px;
padding-bottom: 4px;
}
}
.category-carousel-dot {
width: 8px;
height: 8px;
padding: 0;
border: none;
border-radius: 50%;
background-color: var(--color-gold-light);
opacity: 0.6;
margin: 0 5px;
transition: width 0.25s ease, border-radius 0.25s ease, opacity 0.25s ease, background-color 0.25s ease;
}
.category-carousel-dot-active {
width: 22px;
border-radius: 4px;
background: var(--color-gold-dark);
opacity: 1;
}
.category-card {
display: flex;
flex-direction: column;
height: 100%;
padding: 10px;
border-radius: 22px;
border: 1.5px solid transparent;
box-shadow: 0 10px 24px -8px var(--card-shadow-color, rgba(59, 42, 32, 0.22));
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.category-card:hover {
box-shadow: 0 18px 34px -8px var(--card-shadow-color, rgba(59, 42, 32, 0.3));
}
@media all {
.category-card:hover {
transform: translateY(-4px);
}
}
.category-card-photo {
position: relative;
aspect-ratio: 1 / 1;
border-radius: 14px;
background-size: cover;
background-position: center;
margin-bottom: 22px;
}
.category-card-ramen {
--card-shadow-color: hsla(20, 40%, 68%, 0.32);
background-color: hsl(20, 45%, 90%);
}
.category-card-ramen .category-card-photo {
background-image: url('/images/category-ramen.jpg');
background-image: image-set(url('/images/category-ramen.webp') type('image/webp'), url('/images/category-ramen.jpg') type('image/jpeg'));
}
.category-card-coffee {
--card-shadow-color: hsla(30, 50%, 58%, 0.32);
background-color: hsl(30, 55%, 84%);
}
.category-card-coffee .category-card-photo {
background-image: url('/images/category-coffee.jpg');
background-image: image-set(url('/images/category-coffee.webp') type('image/webp'), url('/images/category-coffee.jpg') type('image/jpeg'));
}
.category-card-chocolates {
--card-shadow-color: hsla(43, 55%, 52%, 0.32);
background-color: hsl(43, 60%, 82%);
}
.category-card-chocolates .category-card-photo {
background-image: url('/images/category-chocolates.jpg');
background-image: image-set(url('/images/category-chocolates.webp') type('image/webp'), url('/images/category-chocolates.jpg') type('image/jpeg'));
}
.category-card-cosmetics {
--card-shadow-color: hsla(350, 40%, 68%, 0.32);
background-color: hsl(350, 45%, 90%);
}
.category-card-cosmetics .category-card-photo {
background-image: url('/images/category-cosmetics.jpg');
background-image: image-set(url('/images/category-cosmetics.webp') type('image/webp'), url('/images/category-cosmetics.jpg') type('image/jpeg'));
}
.category-card-pantry {
--card-shadow-color: hsla(95, 35%, 45%, 0.32);
background-color: hsl(95, 40%, 90%);
}
.category-card-pantry .category-card-photo {
background-color: hsl(95, 38%, 78%);
background-image: url('/images/category-pantry.jpg');
background-image: image-set(url('/images/category-pantry.webp') type('image/webp'), url('/images/category-pantry.jpg') type('image/jpeg'));
}
.category-card-baby {
--card-shadow-color: hsla(205, 40%, 55%, 0.32);
background-color: hsl(205, 45%, 92%);
}
.category-card-baby .category-card-photo {
background-color: hsl(205, 42%, 80%);
background-image: url('/images/category-baby.jpg');
background-image: image-set(url('/images/category-baby.webp') type('image/webp'), url('/images/category-baby.jpg') type('image/jpeg'));
}
.category-card-icon {
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 50%);
width: 38px;
height: 38px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 3px 8px rgba(59, 42, 32, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-espresso);
flex-shrink: 0;
}
.category-card-name {
display: flex;
align-items: flex-end;
justify-content: center;
min-height: calc(1.25em * 2);
text-align: center;
font-size: var(--fs-card-title);
font-weight: 700;
line-height: 1.25;
color: var(--color-espresso);
}
.category-card-tagline {
display: block;
text-align: center;
font-size: var(--fs-meta);
color: var(--color-espresso-soft);
margin-top: 2px;
}
.cosmetics-carousel-section {
padding: var(--section-spacing) 0;
background: radial-gradient(ellipse 70% 100% at center, var(--color-cream) 0%, var(--color-bg) 75%);
}
.cosmetics-carousel-section h2 {
font-size: var(--fs-heading);
font-weight: 700;
line-height: 1;
letter-spacing: 0.01em;
margin-bottom: 8px;
text-align: center;
}
.cosmetics-carousel-section .section-subtitle {
margin-bottom: 4px;
}
.cosmetics-swiper {
width: 92vw;
max-width: 1800px;
margin: 0 auto;
--swiper-pagination-color: #c8952e;
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}
.cosmetics-carousel-section .cosmetics-swiper {
padding: 4px 24px 32px;
}
.cosmetics-swiper .swiper-slide {
height: 340px;
width: auto;
}
.cosmetics-slide-inner {
position: relative;
width: 100%;
height: 100%;
border-radius: 16px;
overflow: hidden;
box-shadow: var(--shadow);
background-color: #fff;
transition: transform 0.3s ease;
transform-origin: center;
}
.cosmetics-swiper .swiper-slide a,
.cosmetics-swiper .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.cosmetics-slide-info {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 12px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.32) 65%, transparent 100%);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.swiper-slide.is-focused .cosmetics-slide-info {
opacity: 1;
pointer-events: auto;
}
.cosmetics-slide-price {
color: #fff;
font-weight: 700;
font-size: var(--fs-price-sm);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.cosmetics-slide-buy-btn {
padding: 6px 14px;
font-size: var(--fs-meta);
border-radius: var(--radius);
white-space: nowrap;
}
.cosmetics-slide-buy-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.cosmetics-swiper .swiper-pagination {
left: 0;
width: 100%;
text-align: center;
}
.cosmetics-swiper .swiper-pagination-bullet {
width: 8px;
height: 8px;
margin: 0 5px;
background-color: var(--color-gold-light);
opacity: 0.6;
transition: width 0.25s ease, border-radius 0.25s ease, opacity 0.25s ease, background-color 0.25s ease;
}
.cosmetics-swiper .swiper-pagination-bullet-active {
width: 22px;
border-radius: 4px;
background: #c8952e;
opacity: 1;
}
@media (max-width: 600px) {
.cosmetics-swiper .swiper-slide {
height: 260px;
}
.cosmetics-swiper {
-webkit-mask-image: none;
mask-image: none;
}
}
.cosmetics-swiper-skeleton {
align-items: center;
justify-content: center;
gap: 16px;
}
.cosmetics-skeleton-card {
height: 340px;
width: 220px;
border-radius: 16px;
flex-shrink: 0;
}
.cosmetics-skeleton-card-center {
width: 260px;
z-index: 1;
}
.cosmetics-skeleton-card-near {
width: 200px;
opacity: 0.65;
transform: scale(0.92);
}
.cosmetics-skeleton-card-far {
width: 160px;
opacity: 0.35;
transform: scale(0.85);
}
@media (max-width: 600px) {
.cosmetics-swiper-skeleton {
gap: 10px;
}
.cosmetics-skeleton-card {
height: 260px;
width: 130px;
}
.cosmetics-skeleton-card-center {
width: 160px;
}
.cosmetics-skeleton-card-near {
width: 120px;
}
.cosmetics-skeleton-card-far {
display: none;
}
}
.products {
padding: var(--section-spacing) 0;
}
.products h1,
.products h2 {
font-size: var(--fs-heading);
font-weight: 700;
line-height: 1;
letter-spacing: 0.01em;
margin-bottom: 8px;
text-align: center;
}
.section-subtitle {
text-align: center;
color: var(--color-espresso-soft);
margin-bottom: var(--section-spacing-sm);
}
.products-header {
text-align: left;
}
.products-header-top {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px 24px;
}
.products-header-top h1 {
margin-bottom: 0;
text-align: left;
}
.products-heading-row {
display: flex;
align-items: baseline;
gap: 10px;
order: 1;
}
.products-count {
font-size: var(--fs-body);
font-weight: 500;
color: var(--color-espresso-soft);
transition: opacity .25s ease;
}
.products-count.is-fading {
opacity: 0;
}
.skeleton-count-bar {
display: inline-block;
width: 42px;
height: 15px;
}
.products-header .section-subtitle {
text-align: left;
order: 3;
flex: 1 0 100%;
}
.products-toolbar {
order: 2;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.products-header.fade-in {
animation: fadeIn 0.3s ease;
}
.products-toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
gap: 12px;
}
.category-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
transition: opacity .25s ease;
}
.category-pills[hidden] {
display: none;
}
.subcategory-pills {
margin-top: 10px;
width: 100%;
flex-basis: 100%;
order: 4;
}
.category-pills.is-fading {
opacity: 0;
}
.skeleton-pill {
height: 34px;
border-radius: 999px;
}
.skeleton-pill-sm {
width: 60px;
}
.skeleton-pill-md {
width: 92px;
}
.skeleton-pill-lg {
width: 132px;
}
.category-pill {
padding: 8px 18px;
border-radius: 999px;
border: 1px solid var(--color-gold-light);
background-color: var(--color-cream);
color: var(--color-espresso);
font-family: inherit;
font-size: var(--fs-body-sm);
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.category-pill:hover {
border-color: var(--color-gold);
}
.category-pill.active {
background-color: var(--color-gold);
border-color: var(--color-gold);
color: #fff;
}
.sort-select-wrap {
position: relative;
display: inline-block;
}
.sort-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 8px 40px 8px 16px;
border-radius: 999px;
border: 1.5px solid var(--color-gold-light);
background-color: var(--color-cream);
color: var(--color-espresso);
font-family: inherit;
font-size: var(--fs-body-sm);
font-weight: 600;
cursor: pointer;
width: 100%;
}
.sort-select:hover {
border-color: var(--color-gold);
}
.sort-select-chevron {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--color-gold-dark);
display: flex;
pointer-events: none;
}
@media (max-width: 600px) {
.products-header .section-subtitle {
order: 2;
margin-bottom: 16px;
}
.products-toolbar {
order: 3;
flex-direction: column;
align-items: stretch;
width: 100%;
}
.category-pills {
flex-wrap: nowrap;
overflow-x: auto;
width: 100%;
min-width: 0;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
overscroll-behavior-x: contain;
touch-action: pan-x;
scroll-snap-type: x proximity;
}
.category-pills::-webkit-scrollbar {
display: none;
}
.category-pill {
scroll-snap-align: start;
}
.sort-select-wrap {
display: block;
width: 100%;
}
.sort-select {
padding-top: 12px;
padding-bottom: 12px;
}
}
.empty-state {
text-align: center;
padding: 60px 20px;
animation: fadeIn 0.3s ease;
}
.empty-state p {
color: var(--color-espresso-soft);
margin-bottom: 8px;
}
.empty-state-categories {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 16px;
}
.empty-state-category-link {
padding: 8px 20px;
border-radius: 999px;
border: 1px solid var(--color-gold-light);
background-color: var(--color-cream-soft);
color: var(--color-espresso);
font-weight: 600;
font-size: var(--fs-body-sm);
}
.empty-state-category-link:hover {
background-color: var(--color-gold-light);
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 24px;
transition: opacity .25s ease;
}
@media (max-width: 600px) {
.product-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
}
.product-grid.is-fading {
opacity: 0;
}
.product-grid-status {
grid-column: 1 / -1;
text-align: center;
color: var(--color-espresso-soft);
font-style: italic;
padding: 48px 0;
}
.product-grid-coming-soon {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 60px 20px;
animation: fadeIn 0.3s ease;
}
.product-grid-coming-soon-icon {
font-size: 40px;
margin-bottom: 12px;
}
.product-grid-coming-soon-title {
font-size: var(--fs-card-title);
font-weight: 700;
color: var(--color-espresso);
margin: 0 0 6px;
}
.product-grid-coming-soon-text {
color: var(--color-espresso-soft);
margin: 0;
}
.product-card-skeleton {
pointer-events: none;
}
.product-card {
background-color: #fff;
border: 1px solid var(--color-card-border);
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.product-card:hover,
.product-card:active {
box-shadow: 0 14px 28px rgba(59, 42, 32, 0.2);
border-color: var(--color-gold);
}
.product-card-link {
display: flex;
flex-direction: column;
flex: 1;
cursor: pointer;
}
.product-card-image {
position: relative;
aspect-ratio: 1 / 1;
background-color: #fff;
overflow: hidden;
}
.product-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
@media all {
.product-card:hover,
.product-card:active {
transform: translateY(-6px);
}
.product-card:hover .product-card-image img,
.product-card:active .product-card-image img {
transform: scale(1.06);
}
}
.product-card-body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.product-brand {
font-size: var(--fs-meta);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--color-gold);
}
.product-card .product-brand {
font-size: var(--fs-meta);
font-weight: 500;
text-transform: none;
letter-spacing: normal;
color: var(--color-espresso-soft);
}
.product-name {
font-size: var(--fs-card-title);
font-weight: 600;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.7em;
}
.category-cards-scroll .product-name {
min-height: var(--name-min, 2.7em);
}
.product-card .product-name {
font-size: 1.05rem;
}
.product-price {
display: flex;
align-items: baseline;
gap: 10px;
margin-top: 8px;
}
.price-offer {
font-size: var(--fs-price);
font-weight: 700;
color: var(--color-espresso);
}
.price-regular {
font-size: var(--fs-body-sm);
color: var(--color-espresso-soft);
text-decoration: line-through;
}
.product-card .price-offer {
color: var(--color-gold-dark);
}
.btn-outline-gold {
background: none;
border: 1.5px solid var(--color-gold-light);
color: var(--color-espresso);
}
.btn-outline-gold:hover {
background-color: var(--color-cream-soft);
}
.product-card {
position: relative;
}
.wish-heart {
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid rgba(58, 42, 32, 0.1);
background: rgba(255, 255, 255, 0.94);
color: var(--color-espresso);
cursor: pointer;
box-shadow: 0 2px 8px rgba(59, 42, 32, 0.15);
transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.wish-heart:hover {
color: #b3392b;
border-color: #b3392b;
transform: scale(1.08);
}
.wish-heart.is-saved,
.wish-detail-btn.is-saved {
color: #b3392b;
}
.wish-heart.is-saved svg,
.wish-detail-btn.is-saved svg {
fill: currentColor;
}
.wish-detail-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 10px;
min-height: 44px;
padding: 0 16px;
border-radius: 999px;
border: 1.5px solid var(--color-gold-light);
background: transparent;
color: var(--color-espresso);
font: inherit;
font-size: var(--fs-body-sm);
font-weight: 600;
cursor: pointer;
transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.wish-detail-btn:hover {
background-color: var(--color-cream-soft);
border-color: var(--color-gold);
}
.wish-toast {
position: fixed;
left: 50%;
bottom: 24px;
z-index: 1200;
transform: translate(-50%, 20px);
opacity: 0;
pointer-events: none;
display: flex;
align-items: center;
gap: 14px;
max-width: min(92vw, 420px);
padding: 12px 18px;
border-radius: 12px;
background: #14100a;
color: #fdfaf0;
font-size: var(--fs-body-sm);
box-shadow: 0 12px 30px rgba(20, 16, 10, 0.3);
transition: opacity 0.22s ease, transform 0.22s ease;
}
.wish-toast.show {
opacity: 1;
transform: translate(-50%, 0);
pointer-events: auto;
}
.wish-toast a {
color: #e6b94f;
font-weight: 700;
white-space: nowrap;
}
.product-card-actions {
display: flex;
gap: 10px;
margin: 0 16px 16px;
}
.product-card-actions .btn {
padding: 12px 8px;
font-size: var(--fs-body-sm);
text-align: center;
white-space: nowrap;
border-radius: var(--radius);
}
.product-card-buy-btn {
flex: 1;
}
.product-card-add-btn {
flex: 0 0 auto;
width: 44px;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border: 1.5px solid var(--color-card-border);
color: var(--color-espresso);
}
.product-card-add-btn:hover {
background-color: var(--color-cream-soft);
border-color: var(--color-gold);
}
.product-card-add-btn .icon-check {
display: none;
}
.product-card-add-btn.is-added {
background-color: #e3f3e8;
border-color: #3f9e5e;
color: #2c7a47;
}
.product-card-add-btn.is-added .icon-cart {
display: none;
}
.product-card-add-btn.is-added .icon-check {
display: block;
animation: mm-check-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
@keyframes mm-check-pop {
from {
transform: scale(0.4);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.category-sections {
display: flex;
flex-direction: column;
gap: 72px;
transition: opacity .25s ease;
}
.category-sections.is-fading {
opacity: 0;
}
.category-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
}
.category-section-head h3 {
font-size: var(--fs-heading);
font-weight: 700;
line-height: 1;
}
.category-section-head-right {
display: flex;
align-items: center;
gap: 18px;
}
.skeleton-category-heading {
width: 170px;
height: 30px;
}
.skeleton-category-viewall {
width: 124px;
height: 18px;
border-radius: 6px;
}
.category-section-head {
position: relative;
align-items: flex-end;
padding-bottom: 14px;
margin-bottom: 22px;
border-bottom: 1px solid rgba(59, 42, 32, 0.1);
}
.category-section-head::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: var(--w, 56px);
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
transform: translateX(calc(var(--p, 0) * var(--tx, 0px)));
}
.category-section-title {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px 14px;
min-width: 0;
}
.category-section-count {
font-size: var(--fs-meta);
font-weight: 600;
letter-spacing: 0.03em;
color: var(--color-espresso-soft);
}
.category-section-head-right {
gap: 20px;
}
.category-view-all {
display: inline-flex;
align-items: center;
gap: 8px;
height: auto;
padding: 6px 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: var(--color-espresso);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
transition: color 0.2s ease;
}
.category-view-all > span:first-child {
text-decoration: underline;
text-decoration-color: var(--color-gold-light);
text-decoration-thickness: 1.5px;
text-underline-offset: 6px;
transition: text-decoration-color 0.2s ease;
}
.category-view-all-arrow {
flex: none;
color: var(--color-gold-dark);
transition: transform 0.22s ease;
}
.category-view-all:hover,
.category-view-all:focus-visible {
background: none;
box-shadow: none;
color: var(--color-gold-dark);
}
.category-view-all:hover > span:first-child,
.category-view-all:focus-visible > span:first-child {
text-decoration-color: var(--color-gold);
}
.category-view-all:hover .category-view-all-arrow,
.category-view-all:focus-visible .category-view-all-arrow {
transform: translateX(4px);
}
.category-view-all:focus-visible {
outline: 2px solid var(--color-gold);
outline-offset: 4px;
border-radius: 4px;
}
@media (max-width: 960px) {
.category-view-all-name {
display: none;
}
}
@media (max-width: 600px) {
.category-view-all-name {
display: inline;
}
}
.category-row-arrows {
display: inline-flex;
gap: 8px;
height: auto;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
overflow: visible;
}
.category-row-arrow {
display: grid;
place-items: center;
width: 38px;
height: 38px;
padding: 0;
border: 1px solid rgba(59, 42, 32, 0.16);
border-radius: 50%;
background-color: #fff;
color: var(--color-espresso);
cursor: pointer;
box-shadow: 0 1px 2px rgba(59, 42, 32, 0.06);
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.category-row-arrow + .category-row-arrow {
border-left: 1px solid rgba(59, 42, 32, 0.16);
}
.category-row-arrow svg {
stroke-width: 1.8;
}
.category-row-arrow:hover:not(:disabled) {
background-color: var(--color-espresso);
border-color: var(--color-espresso);
color: var(--color-gold-light);
transform: translateY(-1px);
box-shadow: 0 8px 16px rgba(59, 42, 32, 0.22);
}
.category-row-arrow:active:not(:disabled) {
transform: scale(0.92);
}
.category-row-arrow:focus-visible {
outline: 2px solid var(--color-gold);
outline-offset: 2px;
}
.category-row-arrow:disabled {
opacity: 0.3;
box-shadow: none;
cursor: default;
pointer-events: none;
}
@media (max-width: 600px) {
.category-row-arrows {
display: none;
}
.category-section-head {
flex-direction: column;
align-items: flex-start;
gap: 8px;
margin-bottom: 16px;
}
.category-section-head::after {
width: 56px;
transform: none;
}
}
.category-product-row {
display: flex;
gap: 20px;
width: fit-content;
max-width: 100%;
align-self: flex-start;
}
.category-cards-scroll {
display: flex;
gap: 20px;
overflow-x: auto;
overflow-y: hidden;
padding: 10px 0 30px;
margin: -10px 0 -20px;
scroll-snap-type: x proximity;
cursor: grab;
min-width: 0;
touch-action: pan-x pan-y;
overscroll-behavior-x: contain;
scrollbar-width: none;
-ms-overflow-style: none;
}
.category-cards-scroll::-webkit-scrollbar {
display: none;
}
.category-cards-scroll.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
user-select: none;
}
.category-cards-scroll.is-sliding .product-card {
pointer-events: none;
}
.category-cards-scroll.is-tilting {
will-change: transform;
}
.category-cards-scroll .product-card {
flex: 0 0 215px;
scroll-snap-align: start;
}
.category-cards-scroll .product-card-image {
aspect-ratio: 1 / 1;
}
.category-cards-scroll .product-card-body {
padding: 12px 14px 4px;
gap: 3px;
}
.category-cards-scroll .product-card-actions {
margin: 0 14px 12px;
}
.category-cards-scroll .product-card-actions .btn {
padding: 10px 8px;
}
@media (max-width: 600px) {
.category-product-row {
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
}
.category-cards-scroll {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
overflow: visible;
padding: 0;
margin: 0;
scroll-snap-type: none;
cursor: auto;
min-width: 0;
}
.category-cards-scroll .product-card {
flex-basis: auto;
scroll-snap-align: none;
}
.category-cards-scroll > .product-card:only-child {
grid-column: 1 / -1;
}
.category-cards-scroll > .product-card:nth-child(n + 9) {
display: none;
}
}
.category-tile {
position: relative;
overflow: hidden;
flex: 0 0 330px;
align-self: stretch;
min-height: 353px;
margin-bottom: 10px;
display: flex;
align-items: flex-end;
padding: 20px;
border-radius: var(--radius);
border: 0;
background-image:
linear-gradient(to top, rgba(59, 42, 32, 0.9) 0%, rgba(59, 42, 32, 0.25) 60%, rgba(59, 42, 32, 0) 85%),
linear-gradient(135deg, var(--color-espresso) 0%, var(--color-gold-dark) 100%);
background-size: cover;
background-position: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.category-tile::before {
content: '';
position: absolute;
inset: 0;
background-color: #e3d7c3;
opacity: 1;
transition: opacity 0.3s ease;
pointer-events: none;
}
.category-tile::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(233, 197, 104, 0.55) 45%, rgba(212, 160, 23, 0.45) 55%, transparent);
transform: translateX(-100%);
animation: skeleton-sweep 1.6s ease-in-out infinite;
opacity: 1;
transition: opacity 0.3s ease;
pointer-events: none;
}
.category-tile.is-loaded::before,
.category-tile.is-loaded::after {
opacity: 0;
}
.category-tile.is-loaded::after {
animation: none;
}
.category-tile:hover,
.category-tile:active {
box-shadow: 0 14px 28px rgba(59, 42, 32, 0.28);
}
.category-tile-chocolates {
background-image: url('/images/chocolates_tile.jpg');
background-image: image-set(url('/images/chocolates_tile.webp') type('image/webp'), url('/images/chocolates_tile.jpg') type('image/jpeg'));
}
.category-tile-cosmetics {
background-image: url('/images/cosmetics_tile.jpg');
background-image: image-set(url('/images/cosmetics_tile.webp') type('image/webp'), url('/images/cosmetics_tile.jpg') type('image/jpeg'));
}
.category-tile-ramen {
background-image: url('/images/ramen_tile.jpg');
background-image: image-set(url('/images/ramen_tile.webp') type('image/webp'), url('/images/ramen_tile.jpg') type('image/jpeg'));
}
.category-tile-coffee-drinks {
background-image: url('/images/coffee_tile.jpg');
background-image: image-set(url('/images/coffee_tile.webp') type('image/webp'), url('/images/coffee_tile.jpg') type('image/jpeg'));
}
.category-tile-content {
display: flex;
flex-direction: column;
gap: 4px;
}
.category-tile-name {
font-size: var(--fs-heading);
font-weight: 700;
line-height: 1.2;
color: var(--color-gold-light);
word-break: break-word;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75), 0 1px 2px rgba(0, 0, 0, 0.9);
}
.category-tile-link {
font-size: var(--fs-body-sm);
font-weight: 600;
color: var(--color-cream-soft);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75), 0 1px 2px rgba(0, 0, 0, 0.9);
}
@media all {
.category-tile:hover,
.category-tile:active {
transform: translateY(-6px);
}
}
@media (max-width: 600px) {
.category-tile {
flex-basis: auto;
width: 100%;
height: 150px;
min-height: 0;
margin-bottom: 0;
align-items: center;
justify-content: center;
text-align: center;
padding: 16px;
}
.category-tile-content {
align-items: center;
}
.category-tile-chocolates {
background-image: url('/images/chocolates_tile.jpg');
background-image: image-set(url('/images/chocolates_tile_m.webp') type('image/webp'), url('/images/chocolates_tile.jpg') type('image/jpeg'));
}
.category-tile-cosmetics {
background-image: url('/images/cosmetics_tile.jpg');
background-image: image-set(url('/images/cosmetics_tile_m.webp') type('image/webp'), url('/images/cosmetics_tile.jpg') type('image/jpeg'));
}
.category-tile-ramen {
background-image: url('/images/ramen_tile.jpg');
background-image: image-set(url('/images/ramen_tile_m.webp') type('image/webp'), url('/images/ramen_tile.jpg') type('image/jpeg'));
}
.category-tile-coffee-drinks {
background-image: url('/images/coffee_tile.jpg');
background-image: image-set(url('/images/coffee_tile_m.webp') type('image/webp'), url('/images/coffee_tile.jpg') type('image/jpeg'));
}
}
.testimonials-section {
padding: var(--section-spacing) 0;
background: radial-gradient(900px 360px at 50% 0%, rgba(212, 160, 23, 0.13), rgba(212, 160, 23, 0) 70%), var(--color-espresso);
}
@media (min-width: 861px) {
.testimonials-section {
padding: 68px 0;
}
}
@media (max-width: 860px) {
.testimonials-section {
padding: 44px 0;
}
}
.testimonials-section h2 {
font-size: var(--fs-heading);
font-weight: 700;
line-height: 1;
letter-spacing: 0.01em;
margin-bottom: 8px;
text-align: center;
color: var(--color-cream);
}
.testimonials-section .section-subtitle {
color: var(--color-gold-light);
}
.tq-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: 'head' 'panel' 'controls';
gap: 18px;
}
@media (min-width: 961px) {
.tq-layout {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
grid-template-areas: 'head panel' 'controls panel';
column-gap: 56px;
row-gap: 22px;
align-items: center;
}
.tq-head {
text-align: left !important;
align-self: end;
}
.tq-head h2 {
text-align: left;
}
.tq-controls {
align-self: start;
justify-content: flex-start !important;
}
}
.tq-head {
grid-area: head;
text-align: center;
}
.tq-head .section-subtitle {
margin-bottom: 0;
text-align: inherit;
}
.testimonials-section .tq-head h2 {
font-size: clamp(1.5rem, 2.3vw + 0.4rem, 2.15rem);
line-height: 1.12;
margin-bottom: 6px;
}
.testimonials-section {
border-bottom: 1px solid rgba(233, 197, 104, 0.4);
}
.tq-eyebrow {
display: inline-block;
margin-bottom: 10px;
padding: 5px 12px;
border: 1px solid rgba(233, 197, 104, 0.38);
border-radius: 999px;
color: var(--color-gold-light);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.tq-panel {
grid-area: panel;
position: relative;
padding: clamp(20px, 2.6vw, 34px);
border-radius: 22px;
background: radial-gradient(360px 180px at 0% 0%, rgba(212, 160, 23, 0.14), rgba(212, 160, 23, 0) 70%),
linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
border: 1px solid rgba(233, 197, 104, 0.26);
box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.tq-panel::before {
content: '';
position: absolute;
top: 0;
left: clamp(20px, 2.6vw, 34px);
width: 52px;
height: 3px;
border-radius: 0 0 4px 4px;
background: linear-gradient(90deg, var(--color-gold-light), var(--color-gold));
}
.tq-stage {
display: grid;
touch-action: pan-y;
}
.tq-slide {
grid-area: 1 / 1;
margin: 0;
display: flex;
flex-direction: column;
gap: clamp(12px, 1.6vw, 18px);
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s linear 0.55s;
}
.tq-slide.is-active {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 0s;
}
.tq-quote {
margin: auto 0;
}
.tq-slide.tq-sm .tq-quote p {
font-size: clamp(1.2rem, 1vw + 0.95rem, 1.6rem);
line-height: 1.4;
}
.tq-slide.tq-md .tq-quote p {
font-size: clamp(0.98rem, 0.4vw + 0.9rem, 1.12rem);
line-height: 1.55;
}
.tq-slide.tq-lg .tq-quote p {
font-size: clamp(0.9rem, 0.3vw + 0.84rem, 1rem);
line-height: 1.6;
}
.tq-quote::before {
content: '\201C';
display: block;
margin: 4px 0 0 -2px;
font: 700 clamp(40px, 4vw, 56px) / 0.7 Georgia, 'Times New Roman', serif;
color: var(--color-gold);
}
.tq-quote p {
color: var(--color-cream);
font-size: clamp(1.05rem, 0.6vw + 0.92rem, 1.32rem);
font-weight: 500;
line-height: 1.5;
letter-spacing: -0.005em;
}
.tq-person {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
padding-top: clamp(12px, 1.3vw, 16px);
border-top: 1px solid rgba(233, 197, 104, 0.22);
}
.tq-avatar {
flex-shrink: 0;
width: 46px;
height: 46px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 0 0 2px var(--color-gold-light), 0 0 0 5px rgba(233, 197, 104, 0.14);
}
.tq-avatar picture,
.tq-chip picture {
display: block;
width: 100%;
height: 100%;
}
.tq-avatar-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 22%;
}
.tq-avatar-initials {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-espresso-soft);
color: var(--color-gold-light);
font-weight: 700;
font-size: 1.05rem;
}
.tq-person-text {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.tq-person-text strong {
color: var(--color-cream);
font-size: 1rem;
line-height: 1.25;
}
.tq-person-text span {
color: var(--color-gold-light);
font-size: var(--fs-meta);
font-weight: 600;
}
.tq-stars {
margin-left: auto;
color: var(--color-gold);
font-size: 0.9rem;
letter-spacing: 2px;
white-space: nowrap;
}
.tq-controls {
grid-area: controls;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px 18px;
}
.tq-controls[hidden] {
display: none;
}
.tq-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
max-width: 100%;
padding: 6px 4px;
scrollbar-width: none;
}
.tq-chips::-webkit-scrollbar {
display: none;
}
.tq-chip {
flex: 0 0 auto;
width: 44px;
height: 44px;
padding: 0;
border: 2px solid rgba(253, 250, 240, 0.3);
border-radius: 50%;
overflow: hidden;
background: var(--color-espresso-soft);
opacity: 0.88;
cursor: pointer;
transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.tq-chip:hover {
opacity: 1;
border-color: rgba(224, 172, 58, 0.7);
}
.tq-chip.is-active {
opacity: 1;
border-color: var(--color-gold);
transform: scale(1.08);
}
.tq-chip:focus-visible,
.tq-arrow:focus-visible {
outline: 2px solid var(--color-gold-light);
outline-offset: 3px;
}
.tq-nav {
display: flex;
align-items: center;
gap: 14px;
}
.tq-arrow {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid rgba(233, 197, 104, 0.5);
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
color: var(--color-gold-light);
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.tq-arrow:hover {
background: var(--color-gold);
border-color: var(--color-gold);
color: var(--color-espresso);
}
.tq-arrow:active {
transform: scale(0.94);
}
.tq-counter {
min-width: 64px;
text-align: center;
color: var(--color-gold-light);
font-size: 0.9rem;
letter-spacing: 0.12em;
font-variant-numeric: tabular-nums;
}
.tq-progress {
flex: 1 1 100%;
height: 2px;
overflow: hidden;
border-radius: 2px;
background: rgba(233, 197, 104, 0.18);
}
.tq-progress span {
display: block;
width: 100%;
height: 100%;
background: var(--color-gold);
transform: scaleX(0);
transform-origin: left;
}
.tq-progress span.is-running {
animation: tq-progress var(--tq-ms, 7000ms) linear forwards;
}
.tq-paused .tq-progress span.is-running {
animation-play-state: paused;
}
@keyframes tq-progress {
to {
transform: scaleX(1);
}
}
.tq-skeleton {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 130px;
}
.tq-skeleton .skeleton-shimmer {
background-color: rgba(255, 255, 255, 0.1);
}
.tq-sk-line {
width: 100%;
height: 20px;
}
.tq-sk-short {
width: 55%;
}
.tq-sk-person {
display: flex;
align-items: center;
gap: 14px;
margin-top: 20px;
}
.tq-sk-avatar {
width: 46px;
height: 46px;
border-radius: 50%;
}
.tq-sk-name {
width: 140px;
height: 16px;
}
@media (max-width: 520px) {
.tq-panel {
border-radius: 18px;
padding: 18px 18px 16px;
}
.tq-chips {
gap: 8px;
}
.tq-chip {
width: 44px;
height: 44px;
}
}
@media (prefers-reduced-motion: reduce) {
.tq-slide {
transform: none;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
}
.why-us {
padding: var(--section-spacing) 0;
background-color: var(--color-cream);
}
@media (min-width: 861px) {
.why-us {
padding: 60px 0;
}
.why-us .section-subtitle {
margin-bottom: 26px;
}
}
@media (max-width: 860px) {
.why-us {
padding: 44px 0;
}
.why-us .section-subtitle {
margin-bottom: 22px;
font-size: 0.95rem;
}
.why-us h2 {
font-size: clamp(1.45rem, 6.2vw, 1.9rem);
line-height: 1.12;
}
}
.why-us h2 {
font-size: var(--fs-heading);
font-weight: 700;
line-height: 1;
letter-spacing: 0.01em;
text-align: center;
margin-bottom: 8px;
}
.why-us-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.why-us-item {
position: relative;
background-color: #fff;
border: 1px solid var(--color-card-border);
border-radius: 18px;
padding: 24px 18px 20px;
text-align: center;
box-shadow: 0 14px 30px -24px rgba(59, 42, 32, 0.45);
opacity: 0;
transform: translateY(16px);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.why-us-item::before {
content: '';
position: absolute;
top: -1px;
left: 50%;
width: 44px;
height: 3px;
transform: translateX(-50%);
border-radius: 0 0 4px 4px;
background: linear-gradient(90deg, var(--color-gold-light), var(--color-gold));
}
.why-us-item.why-us-item-in-view {
animation: why-us-item-reveal 0.5s ease forwards;
}
.why-us-item:nth-child(2) { animation-delay: 0.08s; }
.why-us-item:nth-child(3) { animation-delay: 0.16s; }
.why-us-item:nth-child(4) { animation-delay: 0.24s; }
@keyframes why-us-item-reveal {
to { opacity: 1; transform: translateY(0); }
}
.why-us-item:hover,
.why-us-item:active {
transform: translateY(-4px);
border-color: rgba(212, 160, 23, 0.55);
box-shadow: 0 18px 34px -22px rgba(59, 42, 32, 0.5);
}
.why-us-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(150deg, #5a4030, var(--color-espresso) 62%);
color: var(--color-gold-light);
box-shadow: 0 0 0 4px rgba(212, 160, 23, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.why-us-item:hover .why-us-icon,
.why-us-item:active .why-us-icon {
transform: scale(1.08);
background: var(--color-gold);
color: var(--color-espresso);
}
.why-us-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px 18px;
margin-top: 24px;
text-align: center;
}
.why-us-cta p {
color: var(--color-espresso-soft);
font-weight: 600;
}
.why-us-item h3 {
font-size: var(--fs-body);
font-weight: 700;
color: var(--color-espresso);
margin-bottom: 6px;
}
.why-us-item p {
font-size: var(--fs-body-sm);
color: var(--color-espresso-soft);
line-height: 1.5;
}
@media (max-width: 860px) {
.why-us-grid {
display: block;
background-color: #fff;
border: 1px solid var(--color-gold-light);
border-radius: var(--radius);
overflow: hidden;
}
.why-us-item {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
column-gap: 12px;
align-items: center;
text-align: left;
background-color: transparent;
box-shadow: none;
border: 0;
border-radius: 0;
padding: 12px 16px;
border-bottom: 1px solid var(--color-gold-light);
}
.why-us-item::before {
display: none;
}
.why-us-item:last-child {
border-bottom: none;
}
.why-us-cta {
margin-top: 18px;
}
.why-us-icon {
width: 36px;
height: 36px;
margin: 0;
flex-shrink: 0;
grid-row: 1 / span 2;
}
.why-us-item h3,
.why-us-item p {
grid-column: 2;
}
.why-us-item h3 {
align-self: end;
}
.why-us-item p {
align-self: start;
}
.why-us-icon svg {
width: 20px;
height: 20px;
}
.why-us-item h3 {
font-size: var(--fs-body-sm);
margin-bottom: 2px;
}
.why-us-item p {
font-size: var(--fs-meta);
}
}
.trust-strip {
position: relative;
padding: 40px 0 48px;
background: #150f08;
}
.trust-strip-box {
display: flex;
gap: 32px;
}
.trust-strip-item {
display: flex;
align-items: flex-start;
gap: 14px;
flex: 1;
}
.icon-badge.trust-strip-icon {
width: 34px;
height: 34px;
cursor: default;
border-color: #c08c12;
background-color: rgba(192, 140, 18, 0.1);
color: #c08c12;
}
.icon-badge.trust-strip-icon:hover {
background-color: rgba(192, 140, 18, 0.18);
border-color: #c08c12;
color: #c08c12;
}
.trust-strip-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.trust-strip-text strong {
font-size: var(--fs-body);
color: #fff;
}
.trust-strip-text span {
font-size: var(--fs-meta);
color: rgba(255, 255, 255, 0.6);
line-height: 1.4;
}
.trust-strip-grid {
display: none;
}
@media (max-width: 700px) {
.trust-strip-box {
display: none;
}
.trust-strip-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 14px;
}
.trust-strip-grid-item {
display: flex;
align-items: flex-start;
gap: 8px;
min-width: 0;
}
.icon-badge.trust-strip-grid-icon {
width: 30px;
height: 30px;
cursor: default;
border-color: #c08c12;
background-color: rgba(192, 140, 18, 0.1);
color: #c08c12;
flex-shrink: 0;
}
.trust-strip-grid-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.trust-strip-grid-text strong {
font-size: 12px;
line-height: 1.25;
color: #fff;
}
.trust-strip-grid-text span {
font-size: 10px;
line-height: 1.3;
color: rgba(255, 255, 255, 0.6);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.breadcrumb {
padding-top: 20px;
font-size: var(--fs-body-sm);
color: var(--color-espresso-soft);
}
.breadcrumb a:hover {
color: var(--color-gold);
}
.breadcrumb-sep {
margin: 0 6px;
color: var(--color-gold-light);
}
.breadcrumb-current {
color: var(--color-espresso);
font-weight: 600;
}
.product-detail {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
align-items: start;
gap: 48px;
padding: 32px 0 72px;
}
@media (max-width: 768px) {
.product-detail {
grid-template-columns: 1fr;
}
}
.skeleton-image {
aspect-ratio: 1 / 1;
border-radius: var(--radius);
}
.skeleton-info-col {
display: flex;
flex-direction: column;
gap: 14px;
padding-top: 4px;
}
.skeleton-line,
.skeleton-block {
border-radius: 6px;
}
.skeleton-brand {
width: 80px;
height: 14px;
}
.skeleton-title {
width: 90%;
height: 30px;
margin-top: 4px;
}
.skeleton-title-short {
width: 55%;
height: 30px;
}
.skeleton-price {
width: 140px;
height: 26px;
margin-top: 10px;
}
.skeleton-stock {
width: 100px;
height: 16px;
}
.skeleton-spec {
height: 190px;
border-radius: var(--radius);
margin-top: 8px;
}
.skeleton-desc {
width: 100%;
height: 14px;
}
.skeleton-desc-short {
width: 70%;
height: 14px;
}
.skeleton-shimmer {
position: relative;
overflow: hidden;
background-color: #e3d7c3;
}
.skeleton-shimmer::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(233, 197, 104, 0.55) 45%, rgba(212, 160, 23, 0.45) 55%, transparent);
transform: translateX(-100%);
animation: skeleton-sweep 1.6s ease-in-out infinite;
}
@keyframes skeleton-sweep {
100% {
transform: translateX(100%);
}
}
.skeleton-brand-spinner {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
border-radius: 50%;
border: 2.5px solid var(--color-gold);
border-top-color: transparent;
animation: skeleton-spinner-spin 0.9s linear infinite;
z-index: 1;
}
.skeleton-shimmer .skeleton-brand-spinner {
display: block;
}
@keyframes skeleton-spinner-spin {
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.img-fade {
opacity: 0;
transition: opacity 0.3s ease;
}
.img-fade.is-loaded {
opacity: 1;
}
.search-result-thumb-wrap {
width: 52px;
height: 52px;
border-radius: 12px;
flex-shrink: 0;
background-color: #fff;
overflow: hidden;
}
.search-result-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.review-photo-wrap {
width: 72px;
height: 72px;
border-radius: 8px;
border: 1px solid var(--color-gold-light);
overflow: hidden;
flex-shrink: 0;
}
.review-photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.product-detail-loaded {
animation: product-detail-fade-in 0.35s ease;
}
@keyframes product-detail-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.checkout-layout-loaded {
animation: product-detail-fade-in 0.35s ease;
}
.product-gallery {
display: flex;
gap: 12px;
position: relative;
z-index: 2;
}
.product-gallery-thumbs-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.gallery-thumb-nav {
width: 100%;
border: none;
background: none;
color: var(--color-espresso-soft);
cursor: pointer;
font-size: 0.7rem;
padding: 4px 0;
}
.gallery-thumb-nav:hover {
color: var(--color-gold-dark);
}
.product-gallery-thumbs {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 260px;
overflow-y: auto;
scrollbar-width: none;
}
.product-gallery-thumbs::-webkit-scrollbar {
display: none;
}
.gallery-thumb {
width: 56px;
height: 56px;
border-radius: 8px;
overflow: hidden;
border: 2px solid transparent;
background-color: #fff;
cursor: pointer;
padding: 0;
flex-shrink: 0;
}
.gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-thumb.active {
border-color: var(--color-gold);
}
.product-gallery-main {
position: relative;
flex: 1;
min-width: 0;
}
.product-image-zoom-wrap {
position: relative;
}
.product-gallery-main img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: contain;
border-radius: var(--radius);
box-shadow: var(--shadow);
background-color: #fff;
}
.gallery-arrow {
z-index: 2;
}
.gallery-dots {
display: none;
justify-content: center;
gap: 8px;
margin-top: 12px;
}
.gallery-dot {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: none;
padding: 0;
background: none;
cursor: pointer;
}
.gallery-dot::after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--color-gold-light);
}
.gallery-dot.active::after {
background-color: var(--color-gold);
}
@media (max-width: 768px) {
.product-gallery {
flex-direction: column;
}
.product-gallery-thumbs-col {
display: none;
}
.gallery-dots {
display: flex;
}
}
.product-zoom-result {
display: none;
position: absolute;
top: 0;
left: calc(100% + 20px);
width: 420px;
height: 420px;
z-index: 50;
border: 1.5px solid var(--color-gold-light);
border-radius: var(--radius);
overflow: hidden;
background-color: #fff;
box-shadow: var(--shadow);
}
@media (max-width: 768px) {
.product-zoom-result {
display: none !important;
}
}
.image-lightbox-overlay {
position: fixed;
inset: 0;
z-index: 500;
background-color: rgba(0, 0, 0, 0.92);
}
.image-lightbox-overlay[hidden] {
display: none;
}
.image-lightbox-close {
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background-color: rgba(255, 255, 255, 0.15);
color: #fff;
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.image-lightbox-swiper {
width: 100%;
height: 100%;
}
.image-lightbox-swiper .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
}
.image-lightbox-swiper .swiper-zoom-container img {
max-width: 100%;
max-height: 100vh;
object-fit: contain;
}
.image-lightbox-pagination {
bottom: 16px !important;
}
.image-lightbox-pagination .swiper-pagination-bullet {
background-color: #fff;
opacity: 0.6;
}
.image-lightbox-pagination .swiper-pagination-bullet-active {
opacity: 1;
}
body.lightbox-open {
overflow: hidden;
}
@media (max-width: 768px) {
.product-image-zoom-wrap {
cursor: zoom-in;
}
}
.discount-badge {
position: absolute;
top: 12px;
left: 12px;
background-color: var(--color-gold);
color: var(--color-espresso);
font-weight: 700;
font-size: var(--fs-body-sm);
padding: 6px 14px;
border-radius: 999px;
box-shadow: var(--shadow);
}
.product-card-image .discount-badge {
top: 10px;
left: 10px;
background-color: var(--color-gold);
color: var(--color-espresso);
border: 0;
font-weight: 700;
font-size: var(--fs-meta);
padding: 5px 11px;
box-shadow: 0 2px 6px rgba(59, 42, 32, 0.15);
}
.product-gallery-main .discount-badge {
top: 16px;
left: auto;
right: -6px;
border-radius: 0;
padding: 7px 20px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
}
.badge-stack {
position: absolute;
display: flex;
flex-direction: column;
gap: 6px;
}
.dot-badge {
display: flex;
align-items: center;
gap: 5px;
background: rgba(0, 0, 0, 0.55);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
padding: 4px 8px 4px 4px;
border-radius: 100px;
}
.dot {
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
line-height: 1;
color: #fff;
}
.dot-new {
background-color: #4a7a5e;
}
.dot-best {
background-color: #d9a233;
}
.dot-badge .label {
color: #fff;
font-size: 9.5px;
font-weight: 700;
white-space: nowrap;
}
.custom-badge {
background-color: var(--color-espresso);
color: #fff;
font-weight: 700;
font-size: var(--fs-body-sm);
padding: 6px 14px;
border-radius: 999px;
box-shadow: var(--shadow);
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.product-card-image .badge-stack {
top: 10px;
left: 10px;
right: auto;
align-items: flex-start;
}
.product-card-image .discount-badge + .badge-stack {
top: 48px;
}
.product-card-image .custom-badge {
font-size: var(--fs-meta);
padding: 4px 10px;
box-shadow: 0 2px 6px rgba(59, 42, 32, 0.15);
max-width: 110px;
}
.product-detail-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.product-sections {
grid-column: 1 / -1;
margin: 20px 0 4px;
}
.product-section {
padding-top: 28px;
margin-top: 28px;
border-top: 1.5px solid var(--color-gold-light);
}
.product-sections > .product-section:first-child {
padding-top: 0;
margin-top: 0;
border-top: none;
}
.product-section-heading {
font-size: var(--fs-card-title);
font-weight: 600;
margin: 0 0 14px;
color: var(--color-espresso);
}
.product-section p {
color: var(--color-espresso-soft);
line-height: 1.6;
}
.no-reviews {
font-style: italic;
}
.quick-rate-block {
margin-bottom: 14px;
}
.quick-rate-label {
display: block;
font-size: var(--fs-meta);
font-weight: 500;
text-transform: none;
letter-spacing: 0;
color: var(--color-espresso-soft);
opacity: 0.85;
margin-bottom: 5px;
}
.quick-rate-summary {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 2px 12px;
}
.quick-rate-summary-value {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.quick-rate-summary-value[hidden],
.quick-rate-empty[hidden] {
display: none;
}
.quick-rate-score {
display: inline-flex;
align-items: center;
gap: 0;
color: var(--color-espresso-soft);
font-size: var(--fs-body);
white-space: nowrap;
}
.quick-rate-score strong {
color: var(--color-espresso);
font-weight: 700;
}
.quick-rate-star-icon {
color: var(--color-gold);
font-size: 1.1rem;
line-height: 1;
margin-right: 5px;
}
.quick-rate-count,
.quick-rate-empty {
font-size: var(--fs-body-sm);
color: var(--color-espresso-soft);
white-space: nowrap;
}
.quick-rate-divider {
align-self: center;
width: 1px;
height: 18px;
background-color: var(--color-gold-light);
flex-shrink: 0;
}
.quick-rate-summary.rating-open .quick-rate-summary-value > .quick-rate-divider:last-child {
display: none;
}
.quick-rate-cta {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 10px 2px;
margin: -10px 0;
border: none;
background: none;
color: var(--color-gold-dark);
font-family: inherit;
font-size: var(--fs-body-sm);
font-weight: 600;
white-space: nowrap;
cursor: pointer;
}
.quick-rate-cta:hover {
color: var(--color-gold);
text-decoration: underline;
}
.quick-rate-cta[hidden] {
display: none;
}
.quick-rate-cta-arrow {
font-weight: 700;
}
@media (max-width: 340px) {
.quick-rate-summary-value > .quick-rate-divider:last-child {
display: none;
}
.quick-rate-cta {
flex-basis: 100%;
padding-left: 0;
}
}
.quick-rate-stars {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 2px;
margin-top: 8px;
}
.quick-rate-stars[hidden] {
display: none;
}
.quick-rate-star {
background: none;
border: none;
font-size: 1.15rem;
line-height: 1;
color: var(--color-gold-light);
cursor: pointer;
padding: 13px 10px;
transition: color 0.15s ease;
}
.quick-rate-star:hover:not(:disabled),
.quick-rate-star:hover:not(:disabled) ~ .quick-rate-star:not(:disabled) {
color: var(--color-gold-dark);
}
.quick-rate-star:disabled {
cursor: default;
}
.quick-rate-star.active {
color: var(--color-gold-dark);
}
.quick-rate-thanks {
margin-top: 8px;
font-size: var(--fs-body-sm);
font-weight: 500;
color: var(--color-espresso-soft);
}
.quick-rate-thanks::before {
content: '✓ ';
color: #3a7d3a;
}
.review-photos {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 8px 48px;
}
.review-card {
padding: 18px 0;
border-bottom: 1px solid var(--color-gold-light);
}
.review-card:last-child {
border-bottom: none;
}
.review-card-top {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 8px;
}
.review-avatar {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid var(--color-gold-light);
background-color: var(--color-cream-soft);
color: var(--color-espresso-soft);
font-weight: 700;
font-size: var(--fs-meta);
}
.review-card-meta {
flex: 1;
min-width: 0;
}
.review-card-name-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.review-card-stars-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 2px;
}
.review-card-header {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.review-stars {
color: var(--color-gold-dark);
letter-spacing: 1px;
font-size: var(--fs-body-sm);
}
.review-author {
font-weight: 700;
}
.verified-badge {
font-size: var(--fs-meta);
font-weight: 600;
color: #3a7d3a;
background-color: #e6f2e6;
padding: 2px 10px;
border-radius: 999px;
}
.review-comment {
color: var(--color-espresso);
line-height: 1.6;
margin: 0 0 8px 48px;
}
.review-date {
font-size: var(--fs-meta);
color: var(--color-espresso-soft);
}
.review-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 8px 48px;
}
.tag-chip {
font-size: var(--fs-meta);
font-weight: 600;
padding: 4px 12px;
border-radius: 999px;
border: 1.5px solid var(--color-gold-light);
background-color: var(--color-cream);
color: var(--color-espresso-soft);
}
button.tag-chip {
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
button.tag-chip:hover {
border-color: var(--color-gold-dark);
}
button.tag-chip.selected {
background-color: var(--color-gold);
border-color: var(--color-gold-dark);
color: var(--color-espresso);
}
.review-tag-picker {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.review-card-footer {
margin: 8px 0 0 48px;
display: flex;
align-items: center;
}
.review-helpful-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: 1.5px solid var(--color-gold-light);
border-radius: 999px;
padding: 5px 14px;
font-family: inherit;
font-size: var(--fs-meta);
font-weight: 600;
color: var(--color-espresso-soft);
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
}
.review-helpful-btn:hover:not(:disabled) {
border-color: var(--color-gold-dark);
color: var(--color-espresso);
}
.review-helpful-btn.voted {
border-color: #a8d0a8;
background-color: #e6f2e6;
color: #2c5a2c;
cursor: default;
}
.review-helpful-btn:disabled {
cursor: default;
}
@media (max-width: 480px) {
.review-comment,
.review-tags,
.review-photos,
.review-card-footer {
margin-left: 0;
}
}
.write-review-block {
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid var(--color-gold-light);
}
.write-review-block h3 {
margin-bottom: 6px;
}
.write-review-hint {
font-size: var(--fs-body-sm);
color: var(--color-espresso-soft);
margin-bottom: 16px;
}
.write-review-account-nudge {
font-size: var(--fs-meta);
color: var(--color-espresso-soft);
margin: -4px 0 16px;
}
.write-review-account-nudge a {
color: var(--color-gold-dark);
font-weight: 600;
}
.star-rating-input {
display: flex;
gap: 2px;
}
.star-input {
background: none;
border: none;
font-size: 1.6rem;
line-height: 1;
color: var(--color-gold-light);
cursor: pointer;
padding: 9px 8px;
}
.star-input.active {
color: var(--color-gold-dark);
}
.review-form-message {
padding: 10px 14px;
border-radius: 8px;
font-size: var(--fs-body-sm);
margin-bottom: 16px;
}
.review-form-message.success {
background-color: #e6f2e6;
border: 1px solid #a8d0a8;
color: #2c5a2c;
}
.review-form-message.error {
background-color: #f6d9d9;
border: 1px solid #d98c8c;
color: #7a2b2b;
}
.product-detail-info h1 {
font-size: var(--fs-heading);
font-weight: 700;
line-height: 1.1;
margin: 6px 0 4px;
}
.product-detail-info .product-price {
margin: 8px 0 4px;
}
.product-detail-info .price-offer {
font-size: var(--fs-price-lg);
}
.product-detail-info .price-regular {
font-size: var(--fs-body);
}
.product-rating-summary {
display: flex;
align-items: center;
gap: 8px;
margin: 2px 0 4px;
}
.product-rating-summary[hidden] {
display: none;
}
.rating-stars {
color: var(--color-gold-dark);
font-size: 0.95rem;
letter-spacing: 1px;
}
.rating-count {
font-size: var(--fs-body-sm);
color: var(--color-espresso-soft);
}
.rating-distribution {
display: flex;
gap: 28px;
align-items: center;
flex-wrap: wrap;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid var(--color-gold-light);
}
.rating-distribution-average {
flex-shrink: 0;
text-align: center;
}
.rating-distribution-average-number {
font-size: 2.25rem;
font-weight: 700;
color: var(--color-espresso);
line-height: 1;
}
.rating-distribution-average-stars {
color: var(--color-gold-dark);
letter-spacing: 1px;
margin: 6px 0 4px;
}
.rating-distribution-average-count {
font-size: var(--fs-meta);
color: var(--color-espresso-soft);
}
.rating-distribution-bars {
flex: 1;
min-width: 200px;
display: flex;
flex-direction: column;
gap: 6px;
}
.rating-distribution-row {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--fs-meta);
color: var(--color-espresso-soft);
}
.rating-distribution-row-label {
flex-shrink: 0;
width: 30px;
}
.rating-distribution-bar-track {
flex: 1;
height: 8px;
border-radius: 999px;
background-color: var(--color-cream-soft);
overflow: hidden;
}
.rating-distribution-bar-fill {
height: 100%;
background-color: var(--color-gold);
border-radius: 999px;
}
.rating-distribution-row-count {
flex-shrink: 0;
width: 30px;
text-align: right;
}
.reviews-sort-row {
display: flex;
justify-content: flex-end;
margin-bottom: 14px;
}
.reviews-sort-row[hidden] {
display: none;
}
.reviews-show-more-btn {
display: block;
width: 100%;
padding: 12px;
margin-bottom: 20px;
background: none;
border: 1.5px solid var(--color-gold-light);
border-radius: 8px;
font-family: inherit;
font-size: var(--fs-body-sm);
font-weight: 600;
color: var(--color-espresso);
cursor: pointer;
}
.reviews-show-more-btn[hidden] {
display: none;
}
.reviews-show-more-btn:hover {
background-color: var(--color-cream-soft);
}
.stock-status {
font-size: var(--fs-body-sm);
font-weight: 600;
margin: 4px 0 2px;
}
.stock-status.in-stock {
color: #3a7d3a;
}
.stock-status.out-of-stock {
color: #b13c3c;
}
.product-purchase-row button:disabled,
.product-purchase-row input:disabled,
.product-card-actions .btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.product-card-actions .btn:disabled:hover {
transform: none;
box-shadow: none;
}
.variant-picker {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0 4px;
}
.variant-pill {
padding: 8px 18px;
border-radius: 999px;
border: 1.5px solid var(--color-gold-light);
background-color: var(--color-cream);
color: var(--color-espresso);
font-family: inherit;
font-size: var(--fs-body-sm);
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.variant-pill:hover {
border-color: var(--color-gold);
}
.variant-pill.active {
background-color: var(--color-gold);
border-color: var(--color-gold);
box-shadow: var(--shadow);
}
.variant-quantity-row {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: 12px;
margin: 4px 0 14px;
}
.quantity-stepper-block {
display: flex;
flex-direction: column;
gap: 4px;
}
.qty-stepper-label {
display: block;
font-size: var(--fs-meta);
font-weight: 700;
color: var(--color-espresso-soft);
}
.qty-stepper-label[hidden] {
display: none;
}
.pack-total-badge {
padding: 5px 12px;
border-radius: 999px;
background-color: var(--color-cream-soft);
border: 1px solid var(--color-gold-light);
color: var(--color-gold-dark);
font-size: var(--fs-meta);
font-weight: 700;
margin-bottom: 9px;
}
.spec-block {
margin: 20px 0 4px;
}
.spec-list-heading {
font-size: var(--fs-card-title);
font-weight: 600;
margin: 0 0 8px;
color: var(--color-espresso);
}
.spec-text {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
font-size: var(--fs-body);
line-height: 1.5;
color: var(--color-espresso-soft);
}
.spec-item strong {
color: var(--color-espresso);
font-weight: 700;
}
.spec-item {
display: flex;
align-items: center;
gap: 8px;
}
.spec-item-icon {
display: flex;
flex-shrink: 0;
color: var(--color-gold-dark);
}
.product-extended-details {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: 24px;
margin-top: 8px;
}
.extended-detail-block {
background-color: #fff;
border: 1px solid var(--color-card-border);
border-radius: 16px;
padding: 26px 30px;
box-shadow: 0 1px 2px rgba(58, 42, 32, 0.04);
}
.extended-detail-block h2 {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-size: var(--fs-card-title);
font-weight: 700;
margin: 0 0 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--color-card-border);
position: relative;
}
.extended-detail-block h2::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 40px;
height: 3px;
border-radius: 3px;
background: linear-gradient(90deg, #e0b341, #c19116);
}
.extended-detail-subtitle {
padding: 3px 10px;
border-radius: 999px;
background: #f6efe0;
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--color-espresso-soft);
}
.extended-description-text {
color: var(--color-espresso-soft);
line-height: 1.6;
}
.bullet-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
}
.bullet-list li {
position: relative;
padding-left: 22px;
color: var(--color-espresso-soft);
line-height: 1.5;
}
.bullet-list li::before {
content: '';
position: absolute;
left: 2px;
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--color-gold);
}
.highlights-list li::before {
border-radius: 2px;
transform: rotate(45deg);
}
.nutri-tiles {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-bottom: 22px;
}
.nutri-tile {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 16px 14px;
border-radius: 14px;
background: #faf6ec;
border: 1px solid #f0e6d2;
}
.nutri-tile-label {
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-espresso-soft);
}
.nutri-tile-value {
display: flex;
align-items: baseline;
gap: 4px;
font-family: 'Fraunces', Georgia, serif;
color: var(--color-espresso);
}
.nutri-tile-value b {
font-size: 1.9rem;
font-weight: 600;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.nutri-tile-value small {
font-family: inherit;
font-size: 0.9rem;
color: var(--color-espresso-soft);
}
.nutri-bar {
display: block;
height: 6px;
margin-top: 8px;
border-radius: 6px;
background: #eadfc8;
overflow: hidden;
}
.nutri-bar i {
display: block;
height: 100%;
border-radius: 6px;
background: linear-gradient(90deg, #e0b341, #c19116);
transform-origin: left;
transform: scaleX(0);
transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
}
.nutri-in .nutri-bar i {
transform: scaleX(var(--p, 0));
}
.nutri-dv {
font-size: 0.76rem;
color: var(--color-espresso-soft);
}
.nutri-list {
display: flex;
flex-direction: column;
}
.nutri-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto 3.2em;
align-items: baseline;
gap: 14px;
padding: 11px 4px;
border-bottom: 1px solid #f0e8d6;
transition: background-color 0.2s ease;
}
.nutri-row:last-child {
border-bottom: 0;
}
.nutri-row:hover {
background: #fdfaf2;
}
.nutri-row.is-sub .nutri-label {
padding-left: 18px;
font-weight: 500;
color: var(--color-espresso-soft);
}
.nutri-label {
font-weight: 600;
color: var(--color-espresso);
}
.nutri-value {
font-weight: 600;
color: var(--color-espresso);
font-variant-numeric: tabular-nums;
text-align: right;
}
.nutri-pct {
font-size: 0.8rem;
font-weight: 700;
text-align: right;
color: var(--color-gold-dark);
font-variant-numeric: tabular-nums;
}
.nutri-note {
margin: 14px 0 0;
font-size: 0.78rem;
line-height: 1.5;
color: var(--color-espresso-soft);
}
@media (max-width: 760px) {
.nutri-tiles {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.allergen-line {
background-color: #fbf5e6;
border-left: 3px solid var(--color-gold);
padding: 12px 16px;
border-radius: 0 8px 8px 0;
font-weight: 600;
color: var(--color-espresso);
}
@media (max-width: 600px) {
.extended-detail-block {
padding: 18px 18px;
}
}
.product-purchase-row {
display: flex;
flex-direction: column;
gap: 10px;
}
.product-trust-badges {
container-type: inline-size;
display: flex;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--color-gold-light);
}
.product-trust-badge {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
padding: 0 6px;
}
.product-trust-badge + .product-trust-badge {
border-left: 1px solid var(--color-gold-light);
}
.product-trust-badge-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
}
.product-trust-badge-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.product-trust-badge-text strong {
font-size: var(--fs-body-sm);
line-height: 1.25;
color: var(--color-espresso);
text-wrap: balance;
}
.product-trust-badge-text > span {
font-size: var(--fs-meta);
color: var(--color-espresso-soft);
line-height: 1.3;
text-wrap: balance;
}
.nowrap {
white-space: nowrap;
}
@container (min-width: 480px) {
.product-trust-badge {
flex-direction: row;
align-items: center;
text-align: left;
gap: 10px;
}
.product-trust-badge-text strong,
.product-trust-badge-text > span {
text-wrap: wrap;
}
}
.quantity-selector {
display: flex;
align-items: center;
gap: 2px;
width: fit-content;
background-color: #fff;
border-radius: 100px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
padding: 5px 6px;
}
.qty-circle-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: none;
background: transparent;
padding: 0;
cursor: pointer;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
.qty-circle-btn:disabled {
cursor: not-allowed;
}
.qty-circle {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--color-gold-muted);
transition: background-color 0.15s ease;
}
.qty-circle svg {
display: block;
pointer-events: none;
}
.qty-circle-btn:hover .qty-circle,
.qty-circle-btn:active .qty-circle {
background-color: var(--color-gold-dark);
}
.qty-circle-btn:disabled .qty-circle {
opacity: 0.45;
}
.quantity-selector input {
width: 32px;
text-align: center;
border: none;
background: transparent;
font-size: 16px;
font-weight: 700;
font-family: inherit;
color: var(--color-espresso);
-moz-appearance: textfield;
}
.quantity-selector input:disabled {
color: var(--color-espresso-soft);
}
.quantity-selector input::-webkit-outer-spin-button,
.quantity-selector input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.purchase-btn-row {
display: flex;
gap: 10px;
}
.btn-add-to-cart,
.btn-buy-now,
.btn-whatsapp-order {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 13px 0;
border-radius: 8px;
font-family: inherit;
font-weight: 700;
font-size: var(--fs-body-sm);
text-align: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-add-to-cart {
flex: 1;
background-color: #fff;
border: 1.5px solid var(--color-gold);
color: var(--color-gold);
}
.btn-add-to-cart:not(:disabled):hover,
.btn-add-to-cart:not(:disabled):active {
background-color: var(--color-gold);
border-color: var(--color-gold);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(212, 160, 23, 0.3);
}
.btn-buy-now {
flex: 1;
background-color: var(--color-gold);
border: 1.5px solid var(--color-gold);
color: var(--color-espresso);
}
.btn-buy-now:not(:disabled):hover,
.btn-buy-now:not(:disabled):active {
background-color: var(--color-gold-dark);
border-color: var(--color-gold-dark);
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(166, 121, 16, 0.3);
}
.btn-whatsapp-order {
width: 100%;
background-color: #fff;
border: 1.5px solid #25d366;
color: #188a4a;
text-decoration: none;
}
.btn-whatsapp-order:hover,
.btn-whatsapp-order:active {
background-color: #25d366;
border-color: #25d366;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(37, 211, 102, 0.3);
}
.btn-whatsapp-order svg {
flex-shrink: 0;
}
.add-to-cart-confirm {
font-size: var(--fs-body-sm);
color: var(--color-gold);
font-weight: 600;
min-height: 1.2em;
}
.related-products {
padding: 24px 0 72px;
}
.related-products h2 {
font-size: var(--fs-heading);
font-weight: 700;
line-height: 1;
margin-bottom: 20px;
}
.cart-page-section {
padding: 8px 0 72px;
}
.cart-page-container {
max-width: 760px;
margin: 0 auto;
}
.cart-page-container h1 {
font-size: var(--fs-heading);
font-weight: 700;
line-height: 1;
margin-bottom: 20px;
}
.cart-page-items {
background-color: var(--color-cream-soft);
border: 1px solid var(--color-gold-light);
border-radius: var(--radius);
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.cart-page-items .cart-item-row {
padding-bottom: 16px;
}
.cart-page-items .cart-item-image {
width: 72px;
height: 72px;
}
.cart-page-items .cart-item-name {
white-space: normal;
}
.cart-page-footer {
background-color: var(--color-cream-soft);
border: 1px solid var(--color-gold-light);
border-radius: var(--radius);
padding: 24px;
margin-top: 20px;
}
@media (max-width: 600px) {
.cart-page-footer {
padding-right: 80px;
}
}
.checkout-section {
padding: 8px 0 72px;
}
.checkout-container {
max-width: 1200px;
margin: 0 auto;
}
.checkout-container h1 {
font-size: var(--fs-heading);
font-weight: 700;
line-height: 1;
margin-bottom: 20px;
}
.checkout-block {
background-color: #fff;
border: 1px solid var(--color-gold-light);
border-radius: var(--radius);
padding: 24px;
}
.checkout-block h2 {
font-size: var(--fs-card-title);
font-weight: 600;
margin-bottom: 16px;
}
.checkout-block h2:not(:first-child) {
margin-top: 28px;
}
.checkout-empty {
text-align: center;
padding: 56px 24px;
}
.checkout-empty p {
color: var(--color-espresso-soft);
margin-bottom: 20px;
}
.checkout-empty .checkout-success-heading {
font-size: var(--fs-heading);
font-weight: 700;
color: var(--color-gold-dark);
margin-bottom: 8px;
}
.checkout-empty .btn {
margin: 6px;
}
.checkout-submit-error {
color: #a33a36;
font-size: var(--fs-body-sm);
margin-top: 10px;
}
.track-order-section {
padding: 8px 0 72px;
}
.track-order-container {
max-width: 720px;
margin: 0 auto;
}
.track-order-container h1 {
font-size: var(--fs-heading);
font-weight: 700;
line-height: 1;
margin-bottom: 8px;
}
.track-order-intro {
color: var(--color-espresso-soft);
margin-bottom: 24px;
}
.track-order-form {
margin-bottom: 8px;
}
.track-order-error {
background-color: #fbeaea;
border: 1.5px solid #d9534f;
color: #a33a36;
border-radius: 8px;
padding: 12px 16px;
font-size: var(--fs-body-sm);
margin: 16px 0;
}
.order-timeline {
list-style: none;
margin: 0 0 24px;
padding: 0;
}
.order-timeline-step {
position: relative;
display: flex;
gap: 14px;
padding-bottom: 22px;
}
.order-timeline-step:last-child {
padding-bottom: 0;
}
.order-timeline-step:not(:last-child)::before {
content: '';
position: absolute;
left: 13px;
top: 28px;
bottom: -22px;
width: 2px;
background-color: var(--color-cream-soft);
}
.order-timeline-step--done:not(:last-child)::before {
background-color: var(--color-gold);
}
.order-timeline-marker {
position: relative;
z-index: 1;
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border: 2px solid var(--color-cream-soft);
color: #fff;
}
.order-timeline-step--done .order-timeline-marker {
background-color: var(--color-gold);
border-color: var(--color-gold);
}
.order-timeline-step--hold .order-timeline-marker {
background-color: #c8850f;
border-color: #c8850f;
}
.order-timeline-step--cancelled .order-timeline-marker {
background-color: #b3261e;
border-color: #b3261e;
}
.order-timeline-step--current .order-timeline-marker {
box-shadow: 0 0 0 3px var(--color-cream-soft), 0 0 0 5px var(--color-gold);
}
.order-timeline-content {
display: flex;
flex-direction: column;
gap: 2px;
padding-top: 3px;
}
.order-timeline-label {
font-size: var(--fs-body-sm);
font-weight: 700;
color: var(--color-espresso);
}
.order-timeline-step--upcoming .order-timeline-label {
font-weight: 600;
color: var(--color-espresso-soft);
}
.order-timeline-step--cancelled .order-timeline-label {
color: #b3261e;
}
.order-timeline-time {
font-size: var(--fs-meta);
color: var(--color-espresso-soft);
}
.order-timeline-note {
font-size: var(--fs-meta);
color: #c8850f;
font-style: italic;
}
.track-order-edit-form {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--color-gold-light);
}
.track-order-edit-form .form-group:last-of-type {
margin-bottom: 0;
}
.track-order-edit-actions {
display: flex;
gap: 12px;
}
.track-order-edit-actions .btn {
flex: 1;
padding: 12px 16px;
font-size: var(--fs-body-sm);
}
.account-auth-section,
.account-status-section {
padding: 48px 0 64px;
}
.account-auth-container {
max-width: 440px;
margin: 0 auto;
}
.account-auth-card {
background-color: var(--color-bg);
border: 1px solid var(--color-gold-light);
border-radius: 10px;
padding: 28px 24px;
box-shadow: var(--shadow);
}
.account-auth-tabs {
display: flex;
margin-bottom: 24px;
border-bottom: 1px solid var(--color-cream-soft);
}
.account-auth-subtabs {
margin-bottom: 20px;
border-bottom: none;
gap: 8px;
}
.account-auth-tab {
flex: 1;
padding: 10px 8px;
background: none;
border: none;
border-bottom: 2px solid transparent;
font-size: var(--fs-body-sm);
font-weight: 700;
color: var(--color-espresso-soft);
cursor: pointer;
}
.account-auth-subtabs .account-auth-tab {
flex: 0 0 auto;
padding: 6px 16px;
border: 1px solid var(--color-cream-soft);
border-radius: 999px;
}
.account-auth-tab.active {
color: var(--color-espresso);
border-bottom-color: var(--color-gold);
}
.account-auth-subtabs .account-auth-tab.active {
background-color: var(--color-gold);
border-color: var(--color-gold);
color: #fff;
}
.account-auth-submit {
width: 100%;
margin-top: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.account-auth-submit-spinner {
width: 28px;
height: 28px;
box-sizing: border-box;
border: 3px solid rgba(20, 16, 10, 0.22);
border-top-color: #14100A;
border-radius: 50%;
animation: mmSubmitSpin 0.75s linear infinite;
}
.account-auth-submit-spinner[hidden] {
display: none;
}
@keyframes mmSubmitSpin {
to {
transform: rotate(360deg);
}
}
.account-auth-row {
display: flex;
align-items: center;
justify-content: space-between;
margin: -6px 0 16px;
font-size: var(--fs-meta);
}
.account-remember-label {
display: flex;
align-items: center;
gap: 6px;
color: var(--color-espresso-soft);
cursor: pointer;
}
.account-auth-row a {
color: var(--color-gold-dark);
}
.account-auth-hint {
font-size: var(--fs-body-sm);
color: var(--color-espresso-soft);
margin-bottom: 16px;
}
.account-auth-success {
color: #2f7d4f;
font-size: var(--fs-body-sm);
margin: 10px 0;
}
.account-auth-error-text {
color: #a33a36;
font-size: var(--fs-body-sm);
}
.account-auth-link-btn {
display: block;
margin: 16px auto 0;
background: none;
border: none;
color: var(--color-gold-dark);
font-size: var(--fs-body-sm);
font-weight: 600;
cursor: pointer;
}
.account-auth-divider {
position: relative;
text-align: center;
margin: 20px 0;
font-size: var(--fs-meta);
color: var(--color-espresso-soft);
}
.account-auth-divider::before,
.account-auth-divider::after {
content: '';
position: absolute;
top: 50%;
width: 42%;
height: 1px;
background-color: var(--color-cream-soft);
}
.account-auth-divider::before { left: 0; }
.account-auth-divider::after { right: 0; }
.account-auth-google {
display: flex;
flex-direction: column;
align-items: center;
}
.account-auth-google[hidden] {
display: none;
}
body.auth-ambient-page {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
.auth-ambient-bg {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
}
.auth-ambient-bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.auth-ambient-bg::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 42%, rgba(20, 16, 10, 0.35) 0%, rgba(20, 16, 10, 0.82) 60%, rgba(20, 16, 10, 0.95) 100%);
}
.auth-ambient-main {
position: relative;
z-index: 1;
flex: 1 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
}
.auth-ambient-card {
position: relative;
width: 100%;
max-width: 500px;
max-height: 92vh;
max-height: 92dvh;
overflow-y: auto;
border-radius: 22px;
background: rgba(20, 16, 10, 0.6);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(198, 146, 30, 0.35);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
padding: 48px 56px;
}
@media (min-width: 900px) {
.auth-shell {
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
}
.auth-shell .auth-ambient-card {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
.auth-ambient-heading {
font-family: 'Fraunces', serif;
font-size: 32px;
font-weight: 600;
color: #FDFAF0;
text-align: center;
margin: 0 0 8px;
}
.auth-ambient-subtext {
font-size: 15px;
color: #C9C2B4;
text-align: center;
margin: 0 0 28px;
}
.auth-ambient-card .form-group label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.auth-ambient-card .form-group input {
height: 52px;
padding-top: 0;
padding-bottom: 0;
background: rgba(253, 250, 240, 0.06);
border: 1px solid rgba(253, 250, 240, 0.18);
color: #FDFAF0;
font-size: 15px;
}
.auth-ambient-card .form-group input::placeholder {
color: rgba(201, 194, 180, 0.7);
}
.auth-ambient-card .form-group input:focus {
border-color: #E0AC3A;
box-shadow: 0 0 0 3px rgba(224, 172, 58, 0.22);
}
.auth-ambient-card .input-icon-group .input-icon {
color: #C9C2B4;
}
.auth-ambient-password-group input {
padding-right: 42px;
}
.auth-ambient-eye-toggle {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
padding: 4px;
display: flex;
color: #C9C2B4;
cursor: pointer;
}
.auth-ambient-eye-toggle:hover {
color: #FDFAF0;
}
.auth-ambient-eye-icon[hidden] {
display: none;
}
.auth-ambient-card .account-remember-label,
.auth-ambient-card .account-auth-row {
color: #C9C2B4;
font-size: 15px;
}
.auth-ambient-card .account-remember-label input[type="checkbox"] {
accent-color: #E0AC3A;
}
.auth-ambient-card .account-auth-row a {
color: #E0AC3A;
}
.auth-ambient-card .btn-primary {
background-color: #C6921E;
color: #14100A;
}
.auth-ambient-card .btn-primary:hover {
background-color: #E0AC3A;
}
.auth-ambient-card .account-auth-submit {
height: 52px;
font-size: 15px;
}
.auth-ambient-card .checkout-submit-error {
color: #FF9A8B;
}
.auth-ambient-card .account-auth-success {
color: #8FD19E;
}
.auth-ambient-card .account-auth-hint {
color: #C9C2B4;
}
.auth-ambient-card .account-auth-link-btn {
color: #E0AC3A;
}
.auth-ambient-card .account-auth-divider {
color: #9C9587;
letter-spacing: 0.04em;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
.auth-ambient-card .account-auth-divider::before,
.auth-ambient-card .account-auth-divider::after {
background-color: rgba(253, 250, 240, 0.15);
}
.auth-ambient-card .account-auth-google {
margin-top: 4px;
}
.gbtn {
position: relative;
width: 100%;
height: 52px;
border-radius: 999px;
overflow: hidden;
}
.gbtn-face {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 0 24px 0 62px;
border-radius: 999px;
border: 1px solid rgba(224, 172, 58, 0.42);
background: linear-gradient(180deg, rgba(253, 250, 240, 0.1), rgba(253, 250, 240, 0.04));
box-shadow: inset 0 1px 0 rgba(253, 250, 240, 0.08), 0 6px 18px rgba(0, 0, 0, 0.25);
color: #FDFAF0;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
pointer-events: none;
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.gbtn-g {
position: absolute;
left: 8px;
top: 50%;
box-sizing: content-box;
width: 20px;
height: 20px;
padding: 8px;
margin-top: -18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.gbtn:hover .gbtn-face {
border-color: #E0AC3A;
background: linear-gradient(180deg, rgba(224, 172, 58, 0.2), rgba(224, 172, 58, 0.08));
box-shadow: inset 0 1px 0 rgba(253, 250, 240, 0.12), 0 0 0 4px rgba(224, 172, 58, 0.14), 0 8px 22px rgba(0, 0, 0, 0.3);
}
.gbtn:active .gbtn-face {
background: rgba(224, 172, 58, 0.22);
}
.gbtn:focus-within .gbtn-face {
border-color: #E0AC3A;
box-shadow: 0 0 0 3px rgba(224, 172, 58, 0.45);
}
.gbtn-real {
position: absolute;
left: 0;
top: 0;
width: var(--gw, 100%);
height: 40px;
transform: scale(var(--gx, 1), 1.3);
transform-origin: 0 0;
overflow: hidden;
opacity: 0.01;
}
.auth-ambient-card .gbtn {
margin-top: 2px;
}
.auth-ambient-card .account-auth-tabs {
display: block;
margin: 20px 0 0;
border-bottom: none;
}
.auth-ambient-card .account-auth-tabs[hidden] {
display: none;
}
.auth-ambient-card .account-auth-tab {
display: block;
width: 100%;
padding: 0;
border-bottom: none;
font-size: var(--fs-body-sm);
font-weight: 400;
color: #C9C2B4;
text-align: center;
background: none;
}
.auth-ambient-card .account-auth-tab.active {
display: none;
}
.auth-ambient-card .auth-ambient-switch-link {
color: #E0AC3A;
font-weight: 700;
}
@media (max-width: 640px) {
.auth-ambient-main {
padding: 24px 16px;
}
.auth-ambient-card {
border-radius: 22px;
padding: 32px 24px;
}
.auth-ambient-heading {
font-size: 26px;
}
}
.account-status-container {
max-width: 440px;
margin: 0 auto;
}
.account-status-card {
background-color: var(--color-bg);
border: 1px solid var(--color-gold-light);
border-radius: 10px;
padding: 32px 24px;
text-align: center;
}
.account-status-card h1 {
font-size: var(--fs-heading-sm, 1.3rem);
margin-bottom: 16px;
text-align: left;
}
.account-status-card .form-group,
.account-status-card form {
text-align: left;
}
.account-loading,
.account-empty {
color: var(--color-espresso-soft);
font-size: var(--fs-body-sm);
padding: 24px 0;
}
.account-verified-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
background-color: #e5f3ea;
color: #2f7d4f;
font-size: var(--fs-meta);
font-weight: 700;
}
.checkout-progress {
margin-bottom: 28px;
}
.progress-text {
text-align: center;
font-size: var(--fs-body-sm);
font-weight: 600;
color: var(--color-espresso-soft);
margin-bottom: 12px;
}
.progress-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.progress-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-width: 72px;
}
.progress-step-num {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
background-color: var(--color-cream-soft);
border: 2px solid var(--color-gold-light);
color: var(--color-espresso-soft);
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.progress-step-label {
font-size: var(--fs-meta);
font-weight: 600;
color: var(--color-espresso-soft);
transition: color 0.2s ease;
}
.progress-step.active .progress-step-num {
background-color: var(--color-gold);
border-color: var(--color-gold);
color: var(--color-espresso);
}
.progress-step.active .progress-step-label {
color: var(--color-espresso);
}
.progress-step.done .progress-step-num {
background-color: var(--color-gold-light);
border-color: var(--color-gold);
color: var(--color-espresso);
}
.progress-connector {
position: relative;
width: 40px;
height: 2px;
background-color: var(--color-gold-light);
margin-bottom: 22px;
overflow: hidden;
}
.progress-connector-fill {
position: absolute;
inset: 0;
background-color: var(--color-gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
}
.progress-connector.filled .progress-connector-fill {
transform: scaleX(1);
}
.checkout-step-fade {
transition: opacity 0.18s ease, transform 0.18s ease;
}
.checkout-step-fade.is-swapping {
opacity: 0;
transform: translateY(8px);
}
.checkout-layout {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
.checkout-step-col,
.checkout-summary-col {
min-width: 0;
}
.checkout-step-col {
order: 1;
}
.checkout-summary-col {
order: 2;
}
@media (min-width: 900px) {
.checkout-layout {
grid-template-columns: 1fr 360px;
align-items: start;
}
.checkout-summary-col {
position: sticky;
top: 96px;
}
}
.order-summary-card {
background-color: var(--color-cream-soft);
border: 1px solid var(--color-gold-light);
border-radius: var(--radius);
padding: 24px;
}
.order-summary-card h2 {
font-size: var(--fs-card-title);
font-weight: 600;
margin-bottom: 16px;
}
.qty-adjust {
display: flex;
align-items: center;
gap: 0;
width: fit-content;
border: 1.5px solid var(--color-gold-light);
border-radius: 999px;
overflow: hidden;
}
.qty-btn {
width: 24px;
height: 24px;
background-color: var(--color-cream);
border: none;
font-size: 0.9rem;
line-height: 1;
cursor: pointer;
color: var(--color-espresso);
}
.qty-btn:hover {
background-color: var(--color-gold-light);
}
.qty-value {
min-width: 24px;
text-align: center;
font-size: var(--fs-body-sm);
font-weight: 600;
}
.summary-total-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-top: 16px;
margin-top: 14px;
border-top: 1px solid var(--color-gold-light);
font-size: var(--fs-price);
font-weight: 700;
}
.summary-total-row span:last-child {
color: var(--color-gold-dark);
}
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
font-weight: 600;
font-size: var(--fs-body-sm);
margin-bottom: 6px;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 11px 14px;
border-radius: 8px;
border: 1.5px solid var(--color-gold-light);
background-color: var(--color-bg);
color: var(--color-espresso);
font-family: inherit;
font-size: var(--fs-body);
resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--color-gold);
box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.18);
}
.payment-radio-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.payment-radio {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 18px;
border-radius: var(--radius);
border: 1.5px solid var(--color-gold-light);
background-color: var(--color-bg);
cursor: pointer;
font-weight: 600;
transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.payment-radio:hover {
border-color: var(--color-gold);
box-shadow: var(--shadow);
}
.payment-radio input[type="radio"] {
width: 18px;
height: 18px;
flex-shrink: 0;
accent-color: var(--color-gold-dark);
}
.payment-radio-label {
flex: 1;
}
.input-icon-group {
position: relative;
}
.input-icon-group input {
padding-left: 42px;
}
.input-icon-group .input-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--color-gold-dark);
display: flex;
pointer-events: none;
}
.input-icon-group-textarea textarea {
padding-left: 42px;
}
.input-icon-group-textarea .input-icon {
top: 14px;
transform: none;
}
.custom-select {
position: relative;
}
.custom-select-native-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.custom-select-trigger {
position: relative;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 11px 14px 11px 42px;
border-radius: 8px;
border: 1.5px solid var(--color-gold-light);
background-color: var(--color-bg);
color: var(--color-espresso);
font-family: inherit;
font-size: var(--fs-body);
text-align: left;
cursor: pointer;
}
.custom-select-trigger:hover {
border-color: var(--color-gold);
}
.custom-select-trigger:focus-visible,
.custom-select-trigger[aria-expanded='true'] {
outline: none;
border-color: var(--color-gold);
box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.18);
}
.custom-select-trigger .input-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--color-gold-dark);
display: flex;
pointer-events: none;
}
.custom-select-trigger-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.custom-select-chevron {
flex-shrink: 0;
display: flex;
color: var(--color-espresso-soft);
transition: transform 0.15s ease;
}
.custom-select-trigger[aria-expanded='true'] .custom-select-chevron {
transform: rotate(180deg);
}
.custom-select-list {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 6px);
z-index: 20;
margin: 0;
padding: 6px;
list-style: none;
background-color: #fff;
border: 1.5px solid var(--color-gold-light);
border-radius: var(--radius);
box-shadow: var(--shadow);
max-height: 220px;
overflow-y: auto;
}
.custom-select-list:focus {
outline: none;
}
.custom-select-option {
padding: 10px 12px;
border-radius: 8px;
font-size: var(--fs-body);
color: var(--color-espresso);
cursor: pointer;
}
.custom-select-option.active-option {
background-color: var(--color-cream-soft);
}
.custom-select-option.selected {
background-color: var(--color-gold-light);
font-weight: 700;
}
.custom-select-option.selected.active-option {
background-color: var(--color-gold-light);
}
.payment-radio.active {
background-color: var(--color-cream-soft);
border-color: var(--color-gold);
box-shadow: var(--shadow);
}
.payment-radio-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.payment-radio-desc {
font-weight: 500;
font-size: var(--fs-meta);
color: var(--color-espresso-soft);
}
.order-summary-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.order-summary-header h2 {
position: relative;
margin-bottom: 0;
}
.order-summary-header h2::after {
content: '';
position: absolute;
left: 0;
bottom: -8px;
width: 36px;
height: 3px;
border-radius: 2px;
background-color: var(--color-gold);
}
.order-summary-edit-link {
display: inline-block;
padding: 5px 14px;
margin-left: 6px;
border-radius: 999px;
border: 1.5px solid var(--color-gold-light);
background: none;
font-family: inherit;
cursor: pointer;
font-size: var(--fs-meta);
font-weight: 700;
color: var(--color-gold-dark);
}
.order-summary-edit-link:hover {
border-color: var(--color-gold);
background-color: var(--color-cream-soft);
}
.summary-items-list {
display: flex;
flex-direction: column;
}
.summary-item-v2 {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--color-gold-light);
}
.summary-item-v2:first-child {
padding-top: 0;
}
.summary-item-v2-image {
width: 72px;
height: 72px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
background-color: #fff;
}
.summary-item-v2-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.summary-item-v2-info {
flex: 1;
min-width: 0;
}
.summary-item-v2-name {
font-weight: 600;
font-size: var(--fs-card-title);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.summary-item-v2-variant {
display: block;
font-size: var(--fs-meta);
color: var(--color-espresso-soft);
margin-top: 2px;
}
.summary-item-v2-info .qty-adjust {
margin-top: 6px;
}
.summary-item-v2-price {
white-space: nowrap;
font-weight: 700;
font-size: var(--fs-price-sm);
flex-shrink: 0;
}
.summary-breakdown {
padding-top: 14px;
margin-top: 2px;
}
.summary-breakdown-row {
display: flex;
justify-content: space-between;
font-size: var(--fs-body-sm);
color: var(--color-espresso-soft);
padding: 4px 0;
}
.checkout-place-order-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 18px;
border: none;
border-radius: var(--radius);
}
.checkout-place-order-btn svg {
flex-shrink: 0;
}
.checkout-confirmation {
max-width: 980px;
margin: 0 auto;
}
.confirm-check-wrap {
position: relative;
width: 88px;
height: 88px;
margin: 8px auto 20px;
display: flex;
align-items: center;
justify-content: center;
}
.confirm-check-badge {
position: relative;
z-index: 1;
width: 64px;
height: 64px;
border-radius: 50%;
background-color: var(--color-gold);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow);
animation: confirmBadgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.confirm-check-ring {
position: absolute;
inset: 0;
border: 1.5px dashed var(--color-gold);
border-radius: 50%;
opacity: 0;
animation: confirmRingExpand 1.4s ease-out infinite;
}
.confirm-check-ring-1 {
animation-delay: 0.2s;
}
.confirm-check-ring-2 {
animation-delay: 0.6s;
}
.confirm-check-ring-3 {
animation-delay: 1s;
}
@keyframes confirmBadgePop {
from {
opacity: 0;
transform: scale(0.4);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes confirmRingExpand {
from {
opacity: 0.6;
transform: scale(0.7);
}
to {
opacity: 0;
transform: scale(1.45);
}
}
.confirm-heading {
text-align: center;
font-size: var(--fs-heading);
font-weight: 700;
margin-bottom: 6px;
}
.confirm-subheading {
text-align: center;
color: var(--color-espresso-soft);
}
.confirm-subheading strong {
color: var(--color-gold-dark);
}
.confirm-divider {
display: flex;
align-items: center;
gap: 10px;
max-width: 220px;
margin: 18px auto 28px;
}
.confirm-divider span:not(.confirm-divider-dot) {
flex: 1;
height: 1px;
background-color: var(--color-gold-light);
}
.confirm-divider-dot {
color: var(--color-gold);
font-size: 10px;
}
.confirm-info-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
background-color: #fff;
border: 1px solid var(--color-gold-light);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 20px;
margin-bottom: 28px;
}
.confirm-info-item {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.confirm-info-icon {
width: 36px;
height: 36px;
}
.confirm-info-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.confirm-info-label {
font-size: var(--fs-meta);
color: var(--color-espresso-soft);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.confirm-info-value {
font-weight: 700;
font-size: var(--fs-body-sm);
overflow-wrap: break-word;
word-break: break-word;
}
.confirm-info-value-gold {
color: var(--color-gold-dark);
}
@media (max-width: 700px) {
.confirm-info-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 380px) {
.confirm-info-value {
font-size: var(--fs-meta);
}
}
.confirm-columns {
align-items: start;
}
.confirm-card {
margin-bottom: 20px;
}
.confirm-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.confirm-card h2 {
display: flex;
align-items: center;
gap: 8px;
}
.confirm-items-count {
padding: 3px 12px;
border-radius: 999px;
background-color: var(--color-cream-soft);
border: 1px solid var(--color-gold-light);
font-size: var(--fs-meta);
font-weight: 700;
color: var(--color-gold-dark);
}
.confirm-item-row {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--color-gold-light);
}
.confirm-item-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.confirm-item-image {
width: 56px;
height: 56px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
background-color: var(--color-cream-soft);
}
.confirm-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.confirm-item-info {
flex: 1;
min-width: 0;
}
.confirm-item-name {
font-weight: 600;
font-size: var(--fs-card-title);
}
.confirm-item-variant {
display: inline-block;
margin-top: 4px;
padding: 1px 9px;
border-radius: 999px;
background-color: var(--color-cream-soft);
font-size: var(--fs-meta);
color: var(--color-espresso-soft);
}
.confirm-item-qty {
margin-top: 6px;
font-size: var(--fs-body-sm);
color: var(--color-espresso-soft);
}
.confirm-item-each {
color: var(--color-espresso-soft);
opacity: 0.75;
}
.confirm-item-subtotal {
white-space: nowrap;
font-weight: 700;
font-size: var(--fs-price-sm);
}
.confirm-summary-card {
padding: 0;
overflow: hidden;
}
.confirm-summary-card-title {
margin: 0;
padding: 16px 24px;
background-color: var(--color-gold-dark);
color: #fff;
}
.confirm-summary-card-body {
padding: 18px 24px 22px;
}
.confirm-summary-card-body .summary-total-row {
margin-top: 12px;
}
.confirm-customer-row {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 0;
border-bottom: 1px solid var(--color-gold-light);
}
.confirm-customer-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.confirm-customer-label {
font-size: var(--fs-meta);
color: var(--color-espresso-soft);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.confirm-continue-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
border: none;
}
.confirm-continue-btn svg {
flex-shrink: 0;
}
.confirm-secondary-links {
text-align: center;
margin-top: 14px;
font-size: var(--fs-meta);
color: var(--color-espresso-soft);
}
.confirm-secondary-links a {
color: var(--color-gold-dark);
font-weight: 600;
}
.confirm-secondary-links span {
margin: 0 6px;
}
.cod-confirm-text {
font-size: var(--fs-body);
line-height: 1.5;
margin-bottom: 20px;
}
.payment-instructions-box {
padding: 24px;
border-radius: var(--radius);
background-color: var(--color-gold-light);
border: 1px solid var(--color-gold);
margin-bottom: 20px;
}
.payment-instructions-box p {
font-size: var(--fs-card-title);
font-weight: 600;
line-height: 1.5;
color: var(--color-espresso);
}
.checkout-back-link {
display: inline-block;
margin-top: 14px;
font-weight: 600;
color: var(--color-espresso-soft);
}
.checkout-back-link:hover {
color: var(--color-gold-dark);
}
.step3-instructions {
color: var(--color-espresso-soft);
margin-bottom: 16px;
}
.checkout-submit {
width: 100%;
margin-top: 8px;
border: none;
}
.checkout-submit:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.checkout-submit:disabled:hover {
background-color: var(--color-gold);
transform: none;
box-shadow: none;
}
.checkout-progress-skeleton {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-bottom: 28px;
}
.skeleton-progress-text {
width: 90px;
height: 14px;
}
.skeleton-progress-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.skeleton-progress-step {
width: 28px;
height: 28px;
border-radius: 50%;
flex-shrink: 0;
}
.skeleton-progress-connector {
width: 40px;
height: 2px;
background-color: var(--color-gold-light);
flex-shrink: 0;
}
.skeleton-summary-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--color-gold-light);
}
.skeleton-summary-item:first-of-type {
padding-top: 0;
}
.skeleton-summary-item-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.skeleton-summary-name {
width: 70%;
height: 15px;
}
.skeleton-summary-qty {
width: 60px;
height: 20px;
border-radius: 999px;
}
.skeleton-summary-price {
width: 48px;
height: 15px;
flex-shrink: 0;
}
.skeleton-summary-row {
width: 100%;
height: 16px;
margin-top: 16px;
}
.skeleton-summary-row-total {
height: 20px;
}
.skeleton-summary-variant {
width: 40%;
height: 12px;
}
.skeleton-order-summary-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.skeleton-order-summary-header .skeleton-card-title {
margin-bottom: 0;
}
.skeleton-edit-link {
width: 52px;
height: 26px;
border-radius: 999px;
}
.skeleton-card-title {
width: 150px;
height: 22px;
margin-bottom: 16px;
}
.skeleton-card-title-spaced {
margin-top: 28px;
}
.skeleton-form-group {
margin-bottom: 16px;
}
.skeleton-form-label {
width: 90px;
height: 12px;
margin-bottom: 8px;
}
.skeleton-form-input {
width: 100%;
height: 44px;
border-radius: 8px;
}
.skeleton-payment-radio {
width: 100%;
height: 46px;
border-radius: var(--radius);
margin-bottom: 12px;
}
.skeleton-payment-radio-tall {
height: 68px;
}
.skeleton-payment-radio:last-of-type {
margin-bottom: 0;
}
.skeleton-checkout-submit {
width: 100%;
height: 48px;
border-radius: 999px;
margin-top: 20px;
}
.skeleton-cart-price {
width: 72px;
height: 12px;
}
.skeleton-form-textarea {
width: 100%;
height: 64px;
border-radius: 8px;
}
.cart-page-content {
transition: opacity .25s ease;
}
.cart-page-content.is-fading {
opacity: 0;
}
.reviews-list-wrap {
transition: opacity .25s ease;
}
.reviews-list-wrap.is-fading {
opacity: 0;
}
.skeleton-review-stars {
width: 76px;
height: 14px;
}
.skeleton-review-author {
width: 110px;
height: 14px;
}
.skeleton-review-badge {
width: 118px;
height: 20px;
border-radius: 999px;
}
.skeleton-review-line {
width: 100%;
height: 13px;
margin-top: 8px;
}
.skeleton-review-line-short {
width: 60%;
height: 13px;
margin-top: 8px;
}
.skeleton-review-date {
width: 80px;
height: 12px;
margin-top: 10px;
}
.site-footer {
position: relative;
margin-top: auto;
background:
radial-gradient(ellipse 55% 130% at 10% 0%, rgba(212, 160, 23, 0.16), transparent 62%),
radial-gradient(ellipse 40% 90% at 100% 100%, rgba(233, 197, 104, 0.07), transparent 70%),
linear-gradient(180deg, #3b2a20 0%, #2a1c15 100%);
color: var(--color-cream-soft);
font-size: var(--fs-body-sm);
}
.site-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--color-gold) 28%, var(--color-gold-light) 50%, var(--color-gold) 72%, transparent);
}
.footer-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 44px 24px 8px;
}
body:has(section.trust-strip) .footer-perks {
display: none;
}
.footer-perks {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-bottom: 44px;
border: 1px solid rgba(233, 197, 104, 0.2);
border-radius: 18px;
background-color: rgba(255, 255, 255, 0.04);
overflow: hidden;
}
.footer-perk {
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 18px 22px;
color: inherit;
transition: background-color 0.2s ease;
}
.footer-perk + .footer-perk::before {
content: '';
position: absolute;
left: 0;
top: 22%;
bottom: 22%;
width: 1px;
background-color: rgba(233, 197, 104, 0.2);
}
.footer-perk-icon {
display: grid;
place-items: center;
flex: none;
width: 44px;
height: 44px;
border-radius: 13px;
background-color: rgba(212, 160, 23, 0.16);
color: var(--color-gold-light);
transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s ease;
}
.footer-perk-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.footer-perk-text strong {
color: #fff;
font-size: 0.92rem;
font-weight: 600;
}
.footer-perk-text > span {
color: rgba(250, 243, 228, 0.7);
font-size: var(--fs-meta);
line-height: 1.4;
}
.footer-perk-arrow {
margin-left: auto;
flex: none;
color: var(--color-gold-light);
transition: transform 0.22s ease;
}
.footer-perk-link:hover {
background-color: rgba(212, 160, 23, 0.09);
}
.footer-perk-link:hover .footer-perk-icon {
background-color: var(--color-gold);
color: var(--color-espresso);
transform: translateY(-2px);
}
.footer-perk-link:hover .footer-perk-arrow {
transform: translateX(4px);
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 0.8fr 0.9fr 1.3fr;
gap: 40px;
padding-bottom: 40px;
}
.footer-brand .logo-mark {
display: inline-block;
}
.footer-brand .logo-mark img {
height: 42px;
width: auto;
}
.footer-tagline {
margin: 14px 0 20px;
max-width: 28ch;
color: rgba(250, 243, 228, 0.78);
line-height: 1.55;
}
.footer-heading {
position: relative;
margin-bottom: 18px;
padding-bottom: 10px;
color: var(--color-gold-light);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.footer-heading::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 26px;
height: 2px;
border-radius: 2px;
background-color: var(--color-gold);
}
.footer-links-list {
display: flex;
flex-direction: column;
gap: 11px;
margin: 0;
padding: 0;
list-style: none;
}
.footer-links-list a {
position: relative;
display: inline-block;
color: var(--color-cream-soft);
transition: color 0.2s ease;
}
.footer-links-list a::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 1px;
background-color: var(--color-gold-light);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s ease;
}
.footer-links-list a:hover,
.footer-links-list a:focus-visible {
color: var(--color-gold-light);
}
.footer-links-list a:hover::after,
.footer-links-list a:focus-visible::after {
transform: scaleX(1);
}
.footer-contact {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-contact-row {
display: flex;
align-items: center;
gap: 12px;
color: var(--color-cream-soft);
overflow-wrap: anywhere;
transition: color 0.2s ease;
}
.footer-contact-icon {
display: grid;
place-items: center;
flex: none;
width: 34px;
height: 34px;
border-radius: 50%;
border: 1.5px solid rgba(233, 197, 104, 0.45);
color: var(--color-gold-light);
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.25s ease;
}
.footer-contact-row:hover {
color: var(--color-gold-light);
}
.footer-contact-row:hover .footer-contact-icon {
background-color: var(--color-gold);
border-color: var(--color-gold);
color: var(--color-espresso);
transform: translateY(-2px);
}
.footer-social-icons {
display: flex;
gap: 10px;
}
.footer-social-icon {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 50%;
border: 1.5px solid rgba(233, 197, 104, 0.55);
color: var(--color-gold-light);
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.footer-social-icon svg {
width: 17px;
height: 17px;
}
.footer-social-icon:hover,
.footer-social-icon:focus-visible {
background-color: var(--color-gold);
border-color: var(--color-gold);
color: var(--color-espresso);
transform: translateY(-3px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}
.footer-bottom {
border-top: 1px solid rgba(233, 197, 104, 0.18);
background-color: rgba(0, 0, 0, 0.18);
}
.footer-bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px 24px;
max-width: var(--max-width);
margin: 0 auto;
padding: 16px 24px;
font-size: var(--fs-meta);
}
.footer-copy {
margin: 0;
}
.footer-credit {
margin: 0;
opacity: 0.65;
overflow-wrap: anywhere;
line-height: 1.5;
}
.footer-credit a:hover {
color: var(--color-gold-light);
}
.footer-credit-link {
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
@media (max-width: 960px) {
.footer-perks {
grid-template-columns: 1fr;
}
.footer-perk + .footer-perk::before {
left: 22px;
right: 22px;
top: 0;
bottom: auto;
width: auto;
height: 1px;
}
.footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px 24px;
}
.footer-brand,
.footer-contact-col {
grid-column: 1 / -1;
}
}
@media (max-width: 700px) {
.footer-inner {
padding: 34px 20px 4px;
}
.footer-perks {
margin-bottom: 34px;
}
.footer-perk {
padding: 14px 16px;
}
.footer-bottom-inner {
flex-direction: column;
text-align: center;
padding: 18px 20px 84px;
gap: 12px;
}
}
@media (max-width: 860px) {
.nav-toggle {
display: flex;
}
.cart-link {
margin-left: 4px;
}
.main-nav {
order: 2;
}
.header-inner {
padding-top: 10px;
padding-bottom: 8px;
gap: 8px 20px;
}
.header-search {
order: 3;
flex: 1 1 100%;
max-width: none;
}
.nav-links {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--color-cream);
flex-direction: column;
gap: 0;
max-height: 0;
overflow: hidden;
border-bottom: 2px solid var(--color-gold-light);
transition: max-height 0.25s ease;
}
.nav-links.open {
max-height: 80vh;
overflow-y: auto;
}
.nav-links li {
width: 100%;
}
.nav-links a {
display: block;
padding: 14px 24px;
}
.nav-categories-dropdown {
display: block;
position: static;
background: none;
border: none;
box-shadow: none;
padding: 0 0 0 16px;
}
.nav-categories-dropdown a {
padding: 10px 24px;
font-size: var(--fs-body-sm);
}
}
.static-page-section {
padding: 8px 0 72px;
}
.static-page-container {
max-width: 760px;
margin: 0 auto;
}
.static-page-container h1 {
font-size: var(--fs-heading);
font-weight: 700;
line-height: 1;
margin-bottom: 20px;
}
.static-page-container p {
color: var(--color-espresso-soft);
line-height: 1.7;
margin-bottom: 16px;
}
.contact-section-heading {
font-size: var(--fs-card-title);
font-weight: 600;
margin: 40px 0 16px;
}
.icon-badge {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1.5px solid var(--color-gold-light);
background-color: var(--color-cream-soft);
color: var(--color-gold-dark);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.icon-badge:hover,
a:hover > .icon-badge {
background-color: var(--color-gold);
border-color: var(--color-gold);
color: var(--color-espresso);
}
.contact-methods {
margin-top: 28px;
}
.contact-cta-primary {
display: flex;
align-items: center;
gap: 18px;
padding: 22px 28px;
background-color: var(--color-gold);
color: var(--color-espresso);
border-radius: var(--radius);
box-shadow: var(--shadow);
margin-bottom: 16px;
transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.contact-cta-primary:hover {
background-color: var(--color-gold-dark);
transform: translateY(-2px);
}
.contact-cta-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background-color: var(--color-cream);
color: var(--color-gold-dark);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-cta-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.contact-cta-label {
font-size: var(--fs-card-title);
font-weight: 600;
}
.contact-cta-sub {
font-size: var(--fs-body-sm);
font-weight: 500;
opacity: 0.75;
}
.contact-secondary-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.contact-secondary-row {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
background-color: var(--color-cream-soft);
border: 1px solid var(--color-gold-light);
border-radius: var(--radius);
color: var(--color-espresso);
font-weight: 600;
font-size: var(--fs-body-sm);
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.contact-secondary-row:hover {
border-color: var(--color-gold);
background-color: var(--color-cream);
}
.contact-social-icons {
display: flex;
gap: 12px;
}
.contact-message-form {
max-width: 520px;
}
.fab-container {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 150;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
transition: opacity .25s ease, transform .25s ease;
}
.fab-container.fab-hidden {
opacity: 0;
transform: scale(.85);
pointer-events: none;
}
.fab-bubbles {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.fab-bubble {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
box-shadow: 0 4px 12px rgba(59, 42, 32, 0.3);
opacity: 0;
transform: translateY(12px) scale(0.8);
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.fab-container.open .fab-bubble {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.fab-container.open .fab-bubble-phone {
transition-delay: 0.05s;
}
.fab-container.open .fab-bubble-messenger {
transition-delay: 0.1s;
}
.fab-container.open .fab-bubble-whatsapp {
transition-delay: 0.15s;
}
.fab-bubble-whatsapp {
background-color: #25d366;
}
.fab-bubble-messenger {
background-color: #0084ff;
}
.fab-bubble-phone {
background-color: var(--color-gold-dark);
}
.fab-bubble:hover {
transform: scale(1.08);
}
.fab-container.open .fab-bubble:hover {
transform: translateY(0) scale(1.08);
}
.fab-main {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
background-color: var(--color-gold);
color: var(--color-espresso);
box-shadow: 0 4px 14px rgba(59, 42, 32, 0.35);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fab-main:hover {
transform: scale(1.05);
box-shadow: 0 6px 18px rgba(59, 42, 32, 0.4);
}
.fab-icon-chat,
.fab-icon-close {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
opacity: 1;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.fab-icon-close {
opacity: 0;
transform: translate(-50%, -50%) rotate(-45deg);
}
.fab-container.open .fab-icon-chat {
opacity: 0;
transform: translate(-50%, -50%) rotate(45deg);
}
.fab-container.open .fab-icon-close {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg);
}
@media (max-width: 600px) {
.fab-container {
right: 16px;
bottom: 16px;
gap: 10px;
}
.fab-bubble {
width: 44px;
height: 44px;
}
.fab-main {
width: 52px;
height: 52px;
}
}
.checkout-account-strip {
margin-bottom: 18px;
}
.checkout-account-line {
margin: 0 0 6px;
font-size: var(--fs-body-sm);
color: var(--color-espresso-soft);
line-height: 1.5;
}
.checkout-account-line a {
color: var(--color-gold-dark);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
.checkout-account-strip:not(:empty) {
padding: 14px 16px;
border: 1px solid var(--color-gold-light);
border-radius: var(--radius);
background: var(--color-cream);
}
.checkout-saved-addresses {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 10px;
}
.checkout-saved-label {
font-size: var(--fs-meta);
font-weight: 700;
color: var(--color-espresso);
}
.checkout-saved-chip {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
max-width: 100%;
padding: 8px 14px;
border: 1.5px solid var(--color-gold-light);
border-radius: 12px;
background: #fff;
color: var(--color-espresso);
font: inherit;
font-size: var(--fs-meta);
text-align: left;
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.checkout-saved-chip span {
color: var(--color-espresso-soft);
font-size: 0.75rem;
}
.checkout-saved-chip:hover,
.checkout-saved-chip.active {
border-color: var(--color-gold);
background: var(--color-cream-soft);
}
.confirm-account-card {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 14px 14px;
padding: 16px 18px;
overflow: hidden;
border: 1px solid var(--color-gold-light);
border-radius: var(--radius);
background: linear-gradient(135deg, #fffaf0 0%, #fbf0d3 100%);
font-size: var(--fs-body-sm);
color: var(--color-espresso-soft);
line-height: 1.5;
}
.confirm-account-card::after {
content: '';
position: absolute;
right: -34px;
top: -34px;
width: 120px;
height: 120px;
border-radius: 50%;
background: radial-gradient(circle, rgba(212, 160, 23, 0.16), transparent 68%);
pointer-events: none;
}
.confirm-account-icon {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background-color: var(--color-gold);
color: #fff;
box-shadow: 0 4px 12px rgba(168, 124, 15, 0.28);
}
.confirm-account-icon svg {
width: 22px;
height: 22px;
}
.confirm-account-body {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.confirm-account-body strong {
color: var(--color-espresso);
font-size: 1.0625rem;
line-height: 1.25;
}
.confirm-account-perks {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 8px 0 0;
padding: 0;
list-style: none;
}
.confirm-account-perks li {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px 3px 6px;
border: 1px solid var(--color-gold-light);
border-radius: 999px;
background-color: rgba(255, 255, 255, 0.72);
color: var(--color-espresso);
font-size: 0.75rem;
font-weight: 600;
}
.confirm-account-perks li svg {
flex: none;
color: var(--color-gold-dark);
}
.confirm-account-cta {
position: relative;
z-index: 1;
grid-column: 1 / -1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 22px;
font-size: var(--fs-body-sm);
white-space: nowrap;
}
.confirm-account-cta svg {
transition: transform 0.22s ease;
}
.confirm-account-cta:hover svg {
transform: translateX(3px);
}
@media (min-width: 640px) {
.confirm-account-card {
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 16px;
}
.confirm-account-cta {
grid-column: auto;
}
}
.site-header .nav-links .nav-item-categories {
position: relative;
}
.site-header .nav-links .nav-item-categories .nav-categories-dropdown {
display: block;
position: absolute;
top: calc(100% + 14px);
right: -14px;
left: auto;
width: 360px;
max-width: calc(100vw - 32px);
padding: 10px;
list-style: none;
background: #faf3e4;
border: 1px solid #e6d6b3;
border-top: 2px solid #c19116;
border-radius: 18px;
box-shadow: 0 26px 54px rgba(58, 42, 31, 0.3);
z-index: 120;
visibility: hidden;
opacity: 0;
transform: translateY(10px) scale(0.98);
transform-origin: top right;
transition: opacity 0.2s ease 0.18s, transform 0.2s ease 0.18s, visibility 0s linear 0.38s;
}
.site-header .nav-links .nav-item-categories .nav-categories-dropdown::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: -16px;
height: 16px;
}
.site-header .nav-links .nav-item-categories .nav-categories-dropdown::after {
content: '';
position: absolute;
top: -8px;
right: 46px;
width: 14px;
height: 14px;
background: #faf3e4;
border-left: 1px solid #e6d6b3;
border-top: 2px solid #c19116;
transform: rotate(45deg);
border-radius: 3px 0 0 0;
}
.site-header .nav-links .nav-item-categories:hover .nav-categories-dropdown,
.site-header .nav-links .nav-item-categories:focus-within .nav-categories-dropdown {
visibility: visible;
opacity: 1;
transform: none;
transition: opacity 0.2s ease 0.06s, transform 0.2s ease 0.06s, visibility 0s;
}
.nav-categories-dropdown > li {
opacity: 0;
transform: translateX(-8px);
transition: opacity 0.12s ease, transform 0.12s ease;
}
.site-header .nav-links .nav-item-categories:hover .nav-categories-dropdown > li,
.site-header .nav-links .nav-item-categories:focus-within .nav-categories-dropdown > li {
opacity: 1;
transform: none;
transition: opacity 0.28s ease calc(var(--i, 0) * 36ms + 90ms), transform 0.28s ease calc(var(--i, 0) * 36ms + 90ms);
}
.nav-categories-dropdown .nav-cat-heading {
padding: 6px 12px 8px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #9a7210;
}
.site-header .nav-links .nav-item-categories .nav-categories-dropdown a.nav-cat-row {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 12px;
border-radius: 12px;
color: #3a2a1f;
font-weight: 500;
white-space: normal;
transition: background-color 0.18s ease;
}
.site-header .nav-links .nav-item-categories .nav-categories-dropdown a::after {
content: none;
}
.site-header .nav-links .nav-item-categories .nav-categories-dropdown a.nav-cat-row:hover,
.site-header .nav-links .nav-item-categories .nav-categories-dropdown a.nav-cat-row:focus-visible {
background: #f1e5c9;
color: #3a2a1f;
outline: none;
}
.site-header .nav-links .nav-item-categories .nav-categories-dropdown a.nav-cat-row:focus-visible {
box-shadow: inset 0 0 0 2px #c19116;
}
.nav-cat-icon {
flex: 0 0 40px;
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 12px;
background: #f4e6be;
color: #9a7210;
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s ease, color 0.2s ease;
}
.nav-cat-row:hover .nav-cat-icon,
.nav-cat-row:focus-visible .nav-cat-icon {
background: #c19116;
color: #fff;
transform: scale(1.08) rotate(-5deg);
}
.nav-cat-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
line-height: 1.25;
}
.nav-cat-text strong {
font-size: 0.95rem;
font-weight: 600;
}
.nav-cat-text small {
margin-top: 1px;
font-size: 0.77rem;
color: #7a6552;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nav-cat-arrow {
color: #c19116;
font-weight: 700;
opacity: 0;
transform: translateX(-8px);
transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-cat-row:hover .nav-cat-arrow,
.nav-cat-row:focus-visible .nav-cat-arrow {
opacity: 1;
transform: none;
}
.nav-categories-dropdown .nav-cat-all {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid #e6d6b3;
}
.site-header .nav-links .nav-item-categories .nav-categories-dropdown .nav-cat-all a {
display: flex;
justify-content: space-between;
padding: 10px 12px;
border-radius: 12px;
color: #9a7210;
font-weight: 700;
font-size: 0.9rem;
}
.site-header .nav-links .nav-item-categories .nav-categories-dropdown .nav-cat-all a:hover {
background: #f1e5c9;
color: #7a5a0c;
}
@media (max-width: 860px) {
.site-header .nav-links .nav-item-categories .nav-categories-dropdown {
position: static;
width: auto;
max-width: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
padding: 2px 16px 14px;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
visibility: visible;
opacity: 1;
transform: none;
transition: none;
}
.site-header .nav-links .nav-item-categories .nav-categories-dropdown::before,
.site-header .nav-links .nav-item-categories .nav-categories-dropdown::after,
.nav-categories-dropdown .nav-cat-heading,
.nav-cat-text small,
.nav-cat-arrow {
display: none;
}
.nav-categories-dropdown > li {
opacity: 1;
transform: none;
transition: none !important;
}
.site-header .nav-links .nav-item-categories .nav-categories-dropdown a.nav-cat-row {
min-height: 52px;
padding: 8px 10px;
gap: 10px;
background: #fff;
border: 1px solid #e6d6b3;
}
.nav-cat-icon {
flex-basis: 34px;
width: 34px;
height: 34px;
border-radius: 10px;
}
.nav-cat-text strong {
font-size: 0.84rem;
line-height: 1.2;
}
.nav-categories-dropdown .nav-cat-all {
grid-column: 1 / -1;
margin-top: 2px;
padding-top: 0;
border-top: 0;
}
.site-header .nav-links .nav-item-categories .nav-categories-dropdown .nav-cat-all a {
justify-content: center;
gap: 8px;
padding: 10px;
border: 1.5px dashed #c19116;
}
}
@media (max-width: 600px) {
.product-grid,
.category-cards-scroll {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.product-card .product-price {
flex-wrap: wrap;
gap: 0 8px;
}
.product-card-actions {
gap: 8px;
}
.product-card-actions .btn {
min-width: 0;
}
.category-cards-scroll .product-card-body,
.product-card-body {
padding-left: 12px;
padding-right: 12px;
}
.category-cards-scroll .product-card-actions,
.product-card-actions {
margin-left: 12px;
margin-right: 12px;
}
}
@media (max-width: 860px) {
.nav-toggle {
box-sizing: content-box;
padding: 13px 11px;
margin: -13px -11px;
}
.cart-link,
.account-link {
--cart-pad-y: 12px;
padding-top: 12px;
padding-bottom: 12px;
margin-top: -12px;
margin-bottom: -12px;
}
}
@media (hover: none) {
.cart-drawer .cd-stepper button {
width: 38px;
height: 38px;
}
.cart-drawer .cd-later,
.cart-drawer .cd-remove {
padding: 10px 8px;
}
.cart-drawer .cart-drawer-close {
width: 44px;
height: 44px;
}
}
@media (max-width: 380px) {
.logo-mark img {
width: 158px;
height: auto;
}
.header-inner {
column-gap: 8px;
}
.account-link {
margin-left: 2px;
}
}
.checkout-page .breadcrumb {
display: none;
}
.checkout-page .checkout-section {
padding: 20px 0 48px;
}
.checkout-page .checkout-container {
position: relative;
}
.checkout-page .checkout-container h1 {
margin-bottom: 16px;
}
.checkout-page .checkout-progress {
margin-bottom: 14px;
}
.checkout-page .progress-text {
display: none;
}
.checkout-page .progress-steps {
justify-content: flex-start;
gap: 8px;
}
.checkout-page .progress-step {
flex-direction: row;
gap: 8px;
min-width: 0;
}
.checkout-page .progress-step-num {
width: 26px;
height: 26px;
font-size: 0.8rem;
}
.checkout-page .progress-connector {
width: 26px;
margin-bottom: 0;
}
@media (min-width: 900px) {
.checkout-page #checkoutProgress {
position: absolute;
top: 2px;
right: 24px;
margin: 0;
}
.checkout-page .checkout-layout {
grid-template-columns: minmax(0, 1fr) 340px;
gap: 20px;
}
.checkout-page .checkout-summary-col {
top: 80px;
}
}
.checkout-page .checkout-block {
padding: 20px;
}
.checkout-page .checkout-block h2 {
margin-bottom: 12px;
}
.checkout-page .checkout-account-strip {
margin-bottom: 14px;
}
.checkout-page .checkout-account-strip:not(:empty) {
padding: 9px 14px;
}
.checkout-page .checkout-account-line {
margin: 0;
font-size: var(--fs-meta);
}
.checkout-page .checkout-saved-addresses {
margin-top: 8px;
}
.co-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 14px;
}
.co-span {
grid-column: 1 / -1;
}
.checkout-page .co-field {
position: relative;
margin-bottom: 0;
}
.checkout-page .co-field > label {
position: absolute;
z-index: 2;
top: 8px;
left: 42px;
margin: 0;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-espresso-soft);
pointer-events: none;
transition: color 0.2s ease;
}
.checkout-page .co-field:focus-within > label {
color: var(--color-gold-dark);
}
.checkout-page .co-field input,
.checkout-page .co-field textarea,
.checkout-page .co-field .custom-select-trigger {
min-height: 52px;
padding: 22px 14px 6px 42px;
font-size: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.checkout-page .co-field textarea {
min-height: 72px;
padding-top: 24px;
resize: none;
}
.checkout-page .co-field .input-icon {
transition: color 0.2s ease, transform 0.25s ease;
}
.checkout-page .co-field .input-icon-group-textarea .input-icon {
top: 24px;
}
.checkout-page .co-field:focus-within .input-icon {
color: var(--color-gold);
transform: translateY(-50%) scale(1.12);
}
.checkout-page .co-field:focus-within .input-icon-group-textarea .input-icon {
transform: scale(1.12);
}
.checkout-page .co-field .custom-select-trigger .input-icon {
top: 50%;
}
.co-pay-title {
margin: 18px 0 8px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-espresso-soft);
}
.checkout-page .checkout-block h2.co-pay-title {
margin: 18px 0 8px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-espresso-soft);
}
.checkout-page .payment-radio-list.co-pay {
flex-direction: row;
gap: 10px;
}
.checkout-page .payment-radio {
flex: 1 1 0;
min-width: 0;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
}
.checkout-page .payment-radio input[type='radio'] {
margin-top: 2px;
}
.checkout-page .payment-radio-label {
font-size: var(--fs-body-sm);
}
.checkout-page .order-summary-card {
padding: 18px;
}
.checkout-page .order-summary-header {
margin-bottom: 12px;
}
.summary-toggle {
display: none;
}
.checkout-page .summary-items-list {
max-height: 176px;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
.checkout-page .summary-item-v2 {
padding: 10px 0;
}
.checkout-page .summary-item-v2-image {
width: 56px;
height: 56px;
}
.checkout-page .summary-item-v2-name {
font-size: var(--fs-body-sm);
}
.order-note-details {
border-bottom: 1px solid var(--color-gold-light);
}
.order-note-details > summary {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 0;
list-style: none;
cursor: pointer;
font-size: var(--fs-meta);
font-weight: 700;
color: var(--color-gold-dark);
}
.order-note-details > summary::-webkit-details-marker {
display: none;
}
.order-note-details > summary::before {
content: '+';
display: inline-grid;
place-items: center;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid var(--color-gold);
font-size: 0.85rem;
line-height: 1;
transition: transform 0.2s ease, background-color 0.2s ease;
}
.order-note-details[open] > summary::before {
content: '\2212';
background-color: var(--color-gold-light);
}
.order-note-details .order-note-field {
margin: 0 0 10px;
}
.checkout-page .summary-breakdown {
padding-top: 8px;
}
.checkout-page .checkout-place-order-btn {
position: relative;
overflow: hidden;
margin-top: 12px;
min-height: 50px;
transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.checkout-page .checkout-place-order-btn:active {
transform: scale(0.98);
}
.checkout-sticky-bar {
display: none;
order: 2;
}
.co-add-email {
display: none;
margin: 10px 0 0;
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: var(--fs-meta);
font-weight: 700;
color: var(--color-gold-dark);
cursor: pointer;
text-align: left;
}
.checkout-sticky-bar[hidden] {
display: none !important;
}
.sticky-total {
display: flex;
flex-direction: column;
line-height: 1.15;
font-size: var(--fs-meta);
color: var(--color-espresso-soft);
}
.sticky-total strong {
font-size: 1.2rem;
color: var(--color-espresso);
}
@media (max-width: 899px) {
.checkout-page .checkout-container h1 {
font-size: 1.5rem;
margin-bottom: 12px;
}
.checkout-page #checkoutProgress {
position: absolute;
top: 4px;
right: 24px;
margin: 0;
}
.checkout-page .progress-step:not(.active) .progress-step-label {
display: none;
}
.checkout-page .progress-connector {
width: 16px;
}
.checkout-page .checkout-summary-col {
order: 0;
}
.checkout-page .checkout-step-col {
order: 1;
}
.checkout-page .checkout-layout {
gap: 14px;
}
.checkout-page .order-summary-card {
padding: 0;
overflow: hidden;
}
.checkout-page .order-summary-header {
margin: 0;
}
.checkout-page .order-summary-header h2 {
display: none;
}
.summary-toggle {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 14px 16px;
border: 0;
background: none;
color: var(--color-espresso);
font: inherit;
font-weight: 700;
text-align: left;
cursor: pointer;
}
.summary-toggle::before {
content: 'Order summary';
margin-right: auto;
font-size: var(--fs-body-sm);
}
.summary-toggle-meta {
font-size: var(--fs-meta);
font-weight: 600;
color: var(--color-espresso-soft);
}
.summary-toggle-total {
display: inline-block;
font-size: 1.05rem;
}
.summary-toggle-chevron {
display: inline-flex;
transition: transform 0.25s ease;
}
.summary-toggle[aria-expanded='true'] .summary-toggle-chevron {
transform: rotate(180deg);
}
.summary-body {
display: none;
padding: 0 16px 16px;
border-top: 1px solid var(--color-gold-light);
}
.summary-body.is-open {
display: block;
}
.summary-body .checkout-place-order-btn {
display: none;
}
.checkout-page .summary-items-list {
max-height: 260px;
}
.checkout-page .checkout-block {
padding: 16px;
}
.checkout-sticky-bar {
position: sticky;
bottom: 0;
z-index: 40;
display: flex;
align-items: center;
gap: 16px;
margin: 0 -16px;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
background-color: rgba(255, 252, 245, 0.97);
border-top: 1px solid var(--color-gold-light);
box-shadow: 0 -10px 24px rgba(59, 42, 32, 0.1);
}
.checkout-sticky-bar .checkout-place-order-btn {
flex: 1;
width: auto;
margin-top: 0;
}
.checkout-page .fab-container {
bottom: 84px;
}
}
@media (max-width: 480px) {
.checkout-page .progress-step-label,
.co-strip-tail {
display: none;
}
}
@media (max-width: 700px) {
.co-fields {
grid-template-columns: 1fr;
gap: 10px;
}
.co-fields:not(.show-email) .co-email {
display: none;
}
.co-fields.show-email ~ .co-add-email {
display: none;
}
.co-add-email {
display: block;
}
.checkout-page .co-pay-title {
margin-top: 14px;
}
.checkout-page .payment-radio-list.co-pay {
gap: 8px;
}
.checkout-page .payment-radio {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 10px;
}
.checkout-page .payment-radio-desc {
display: none;
}
.checkout-page .payment-radio-label {
font-size: var(--fs-meta);
line-height: 1.25;
}
}
.skeleton-co-field {
height: 52px;
border-radius: 8px;
}
.skeleton-co-address {
height: 72px;
}
.skeleton-co-payment {
display: flex;
gap: 10px;
margin-top: 18px;
}
.skeleton-co-chip {
flex: 1;
height: 62px;
border-radius: var(--radius);
}
.checkout-page .skeleton-progress-text {
display: none;
}
.products-header-top {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 6px;
align-items: start;
}
.products-heading-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 14px;
order: 1;
}
.products-header-top h1 {
font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.4rem);
letter-spacing: -0.01em;
}
.products-count {
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 2px 12px;
border-radius: 999px;
border: 1px solid var(--color-gold-light);
background-color: var(--color-cream);
color: var(--color-gold-dark);
font-size: var(--fs-meta);
font-weight: 700;
letter-spacing: 0.01em;
}
.products-header .section-subtitle {
order: 2;
flex: none;
margin: 0 0 14px;
max-width: 60ch;
font-size: var(--fs-body);
color: var(--color-espresso-soft);
}
.products-toolbar {
order: 3;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px 14px;
padding: 10px 12px;
border: 1px solid var(--color-card-border);
border-radius: 18px;
background-color: #fff;
box-shadow: 0 1px 2px rgba(59, 42, 32, 0.05), 0 8px 24px rgba(59, 42, 32, 0.04);
}
.products-toolbar .category-pills {
flex: 1 1 auto;
min-width: 0;
gap: 8px;
}
.products-toolbar .sort-select-wrap {
margin-left: auto;
}
.category-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 8px 7px 16px;
min-height: 38px;
border-color: transparent;
background-color: var(--color-cream);
color: var(--color-espresso);
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.category-pill:not(:has(.pill-count)) {
padding-right: 16px;
}
.category-pill:hover {
border-color: var(--color-gold);
background-color: #fff;
box-shadow: 0 4px 12px rgba(166, 121, 16, 0.14);
}
.category-pill:active {
transform: scale(0.97);
}
.category-pill:focus-visible {
outline: 2px solid var(--color-gold);
outline-offset: 2px;
}
.category-pill.active {
background-color: var(--color-espresso);
border-color: var(--color-espresso);
color: var(--color-cream);
box-shadow: 0 6px 16px rgba(59, 42, 32, 0.22);
}
.pill-count {
display: inline-grid;
place-items: center;
min-width: 24px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
background-color: rgba(212, 160, 23, 0.18);
color: var(--color-gold-dark);
font-size: 0.72rem;
font-weight: 700;
line-height: 1;
transition: background-color 0.2s ease, color 0.2s ease;
}
.category-pill.active .pill-count {
background-color: var(--color-gold);
color: var(--color-espresso);
}
.sort-select {
height: 38px;
padding: 0 38px 0 38px;
border: 1px solid var(--color-gold-light);
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A67910' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h2M10 17h10'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='8' cy='17' r='2'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 13px center;
background-size: 16px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sort-select:hover,
.sort-select:focus-visible {
border-color: var(--color-gold);
box-shadow: 0 4px 12px rgba(166, 121, 16, 0.14);
outline: none;
}
.subcategory-pills {
order: 4;
margin-top: 4px;
}
.subcategory-pills .category-pill {
min-height: 34px;
padding: 6px 14px;
background-color: #fff;
border-color: var(--color-gold-light);
}
.subcategory-pills .category-pill.active {
background-color: var(--color-espresso);
border-color: var(--color-espresso);
}
.skeleton-pill {
height: 38px;
}
.toolbar-back {
display: inline-flex;
align-items: center;
gap: 8px;
flex: none;
height: 38px;
padding: 0 16px 0 12px;
border: 1px solid transparent;
border-radius: 999px;
background-color: var(--color-cream);
color: var(--color-espresso);
font-size: var(--fs-body-sm);
font-weight: 600;
white-space: nowrap;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.toolbar-back[hidden] {
display: none;
}
.toolbar-back svg {
flex: none;
color: var(--color-gold-dark);
transition: transform 0.2s ease;
}
.toolbar-back:hover,
.toolbar-back:focus-visible {
border-color: var(--color-gold);
background-color: #fff;
box-shadow: 0 4px 12px rgba(166, 121, 16, 0.14);
}
.toolbar-back:hover svg,
.toolbar-back:focus-visible svg {
transform: translateX(-3px);
}
.toolbar-back:active {
transform: scale(0.97);
}
.toolbar-back:focus-visible {
outline: 2px solid var(--color-gold);
outline-offset: 2px;
}
@media (max-width: 600px) {
.products-toolbar.has-back {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 10px;
}
.products-toolbar.has-back .toolbar-back {
height: 44px;
background-color: #fff;
border-color: var(--color-gold-light);
}
.products-toolbar.has-back .sort-select-wrap {
flex: 1 1 0%;
width: auto;
min-width: 0;
}
}
@media (max-width: 600px) {
.products-header .section-subtitle {
margin-bottom: 12px;
font-size: var(--fs-body-sm);
}
.products-toolbar {
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
gap: 10px;
}
.products-toolbar .sort-select-wrap {
margin-left: 0;
}
.category-pill {
min-height: 40px;
background-color: #fff;
border-color: var(--color-gold-light);
}
.category-pill.active {
background-color: var(--color-espresso);
border-color: var(--color-espresso);
}
.sort-select {
height: 44px;
padding-top: 0;
padding-bottom: 0;
}
}
.breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 8px;
padding-top: 18px;
font-size: 0.8125rem;
}
.breadcrumb a {
color: var(--color-espresso-soft);
transition: color 0.2s ease;
}
.breadcrumb-sep {
flex: none;
width: 6px;
height: 10px;
margin: 0;
font-size: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10' fill='none' stroke='%23C9A24A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.breadcrumb-current {
min-width: 0;
overflow-wrap: anywhere;
}
.products-catalog {
padding-top: 28px;
}
@media (max-width: 600px) {
.products-catalog {
padding-top: 18px;
}
.products-toolbar .category-pills {
width: calc(100% + 8px);
margin: -6px -4px -10px;
padding: 6px 4px 12px;
scroll-padding-left: 4px;
}
}
.back-to-top {
position: fixed;
left: 20px;
bottom: 24px;
z-index: 120;
display: grid;
place-items: center;
width: 48px;
height: 48px;
padding: 0;
border: 0;
border-radius: 50%;
background-color: rgba(32, 22, 16, 0.94);
color: var(--color-gold-light);
cursor: pointer;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(14px) scale(0.9);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
transition-delay: 0s;
}
.btt-ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.btt-track,
.btt-progress {
fill: none;
}
.btt-track {
stroke: rgba(233, 197, 104, 0.22);
stroke-width: 2;
}
.btt-progress {
stroke: var(--color-gold);
stroke-width: 2.5;
stroke-linecap: round;
transition: stroke-dashoffset 0.12s linear, stroke 0.2s ease;
}
.btt-arrow {
position: relative;
transition: transform 0.2s ease;
}
.back-to-top:hover,
.back-to-top:focus-visible {
background-color: var(--color-gold);
color: var(--color-espresso);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}
.back-to-top:hover .btt-progress,
.back-to-top:focus-visible .btt-progress {
stroke: var(--color-espresso);
}
.back-to-top:hover .btt-track,
.back-to-top:focus-visible .btt-track {
stroke: rgba(59, 42, 32, 0.25);
}
.back-to-top:hover .btt-arrow,
.back-to-top:focus-visible .btt-arrow {
transform: translateY(-2px);
}
.back-to-top:focus-visible {
outline: 2px solid var(--color-gold-light);
outline-offset: 3px;
}
.back-to-top:active {
transform: scale(0.92);
}
@media (max-width: 700px) {
.back-to-top {
left: 14px;
bottom: 18px;
width: 44px;
height: 44px;
}
}
@media (max-width: 899px) {
.checkout-page .back-to-top {
bottom: 92px;
}
}
.mm-dialog-backdrop {
position: fixed;
inset: 0;
z-index: 1300;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background-color: rgba(32, 22, 16, 0.55);
opacity: 0;
transition: opacity 0.22s ease;
overscroll-behavior: contain;
}
.mm-dialog-backdrop.is-open {
opacity: 1;
}
@media (hover: hover) and (min-width: 601px) {
.mm-dialog-backdrop {
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
}
html.mm-dialog-lock {
overflow: hidden;
}
html.mm-dialog-lock body {
padding-right: var(--mm-sbw, 0);
}
.mm-dialog {
position: relative;
width: 100%;
max-width: 440px;
max-height: calc(100vh - 40px);
max-height: calc(100dvh - 40px);
overflow-y: auto;
padding: 38px 32px 24px;
text-align: center;
border: 1px solid var(--color-card-border);
border-radius: 20px;
background-color: #fff;
color: var(--color-espresso);
box-shadow: 0 24px 60px rgba(32, 22, 16, 0.35);
transform: translateY(14px) scale(0.97);
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
outline: none;
}
.mm-dialog-backdrop.is-open .mm-dialog {
transform: none;
}
.mm-dialog-close {
position: absolute;
top: 12px;
right: 12px;
display: grid;
place-items: center;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: var(--color-espresso-soft);
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.mm-dialog-close:hover {
background-color: var(--color-cream);
color: var(--color-espresso);
}
.mm-dialog-close:focus-visible,
.mm-dialog-skip:focus-visible {
outline: 2px solid var(--color-gold);
outline-offset: 2px;
}
.mm-dialog-grab {
display: none;
}
.mm-dialog-badge {
display: grid;
place-items: center;
width: 60px;
height: 60px;
margin: 0 auto 18px;
border-radius: 50%;
background-color: var(--color-cream);
color: var(--color-gold-dark);
box-shadow: 0 0 0 7px rgba(233, 197, 104, 0.2);
}
.mm-dialog h2 {
margin: 0 0 8px;
font-size: 1.375rem;
font-weight: 700;
line-height: 1.25;
color: var(--color-espresso);
}
.mm-dialog-text {
max-width: 34ch;
margin: 0 auto 18px;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--color-espresso-soft);
}
.mm-dialog-perks {
display: grid;
gap: 10px;
margin: 0 0 22px;
padding: 14px 16px;
list-style: none;
text-align: left;
border-radius: 14px;
background-color: rgba(250, 243, 228, 0.65);
}
.mm-dialog-perks li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: var(--fs-body-sm);
line-height: 1.4;
}
.mm-dialog-perks svg {
flex: none;
margin-top: 1px;
color: var(--color-gold-dark);
}
.mm-dialog-actions {
display: flex;
gap: 10px;
}
.mm-dialog-actions .btn {
flex: 1;
padding: 13px 16px;
font-size: 0.9375rem;
text-align: center;
}
.mm-dialog-skip {
display: block;
margin: 14px auto 0;
padding: 8px 14px;
border: 0;
border-radius: 8px;
background: none;
color: var(--color-espresso-soft);
font: inherit;
font-size: var(--fs-body-sm);
font-weight: 600;
cursor: pointer;
transition: color 0.2s ease;
}
.mm-dialog-skip:hover {
color: var(--color-espresso);
text-decoration: underline;
text-decoration-color: var(--color-gold-light);
text-underline-offset: 4px;
}
@media (max-width: 600px) {
.mm-dialog-backdrop {
align-items: flex-end;
padding: 0;
}
.mm-dialog {
max-width: none;
padding: 0 22px calc(18px + env(safe-area-inset-bottom, 0px));
border-bottom: 0;
border-radius: 22px 22px 0 0;
box-shadow: 0 -12px 40px rgba(32, 22, 16, 0.3);
transform: translateY(100%);
transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mm-dialog-grab {
position: relative;
display: block;
height: 30px;
margin: 0 -22px 6px;
cursor: grab;
touch-action: none;
}
.mm-dialog-grab::before {
content: '';
position: absolute;
top: 11px;
left: 50%;
width: 40px;
height: 4px;
border-radius: 4px;
background-color: rgba(59, 42, 32, 0.2);
transform: translateX(-50%);
}
.mm-dialog-close {
top: 8px;
right: 8px;
}
.mm-dialog-actions {
flex-direction: column;
}
.mm-dialog-actions .btn {
flex: none;
padding: 14px 16px;
}
}
html.mm-soft .mm-dialog {
transform: none;
transition: none;
}
html.mm-soft .mm-dialog-backdrop {
transition: opacity 0.15s ease;
}
html {
-webkit-tap-highlight-color: transparent;
}
a,
button,
input,
select,
textarea,
label,
summary,
[role='button'] {
touch-action: manipulation;
}
@media (max-width: 860px), (hover: none) {
.dot-badge {
background: rgba(0, 0, 0, 0.72);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
@media (hover: none) {
.product-card:hover:not(:active) {
box-shadow: none;
border-color: var(--color-card-border);
}
.category-card:hover:not(:active) {
transform: none;
box-shadow: 0 10px 24px -8px var(--card-shadow-color, rgba(59, 42, 32, 0.22));
}
.category-tile:hover:not(:active) {
transform: none;
box-shadow: none;
}
.btn-primary:hover {
transform: none;
box-shadow: none;
}
.product-card:active,
.category-card:active,
.category-tile:active {
box-shadow: none;
transform: scale(0.985);
transition-duration: 0.1s;
}
.btn:active:not(:disabled),
.wish-heart:active,
.category-row-arrow:active:not(:disabled),
.quantity-selector button:active:not(:disabled) {
transform: scale(0.95);
transition-duration: 0.1s;
}
.product-card {
contain: layout style;
}
}
.trk {
display: grid;
gap: 18px;
margin-top: 24px;
}
#trackOrderResult {
scroll-margin-top: 126px;
}
.trk-sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.trk-hero {
--trk-accent: var(--color-gold);
--trk-glow: rgba(233, 197, 104, 0.24);
position: relative;
overflow: hidden;
padding: 24px 24px 22px;
border-radius: 20px;
color: var(--color-cream);
background: radial-gradient(120% 150% at 0% 0%, #4b3629 0%, var(--color-espresso) 52%, #2a1d15 100%);
box-shadow: 0 18px 40px rgba(59, 42, 32, 0.26);
}
.trk-hero::before {
content: '';
position: absolute;
top: -90px;
right: -70px;
width: 260px;
height: 260px;
border-radius: 50%;
background: radial-gradient(circle, var(--trk-glow), transparent 68%);
pointer-events: none;
}
.trk-hero > * {
position: relative;
}
.trk-hero--delivered {
--trk-accent: #4fb877;
--trk-glow: rgba(79, 184, 119, 0.3);
}
.trk-hero--on-hold,
.trk-hero--partial {
--trk-accent: #e0952a;
--trk-glow: rgba(224, 149, 42, 0.28);
}
.trk-hero--cancelled {
--trk-accent: #d9534f;
--trk-glow: rgba(217, 83, 79, 0.22);
}
.trk-hero-top {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 14px;
}
.trk-order {
margin: 0;
font-size: var(--fs-body-sm);
color: rgba(250, 243, 228, 0.72);
}
.trk-order strong {
color: var(--color-gold-light);
letter-spacing: 0.02em;
}
.trk-order span {
color: rgba(250, 243, 228, 0.55);
}
.trk-pill {
padding: 5px 13px;
border-radius: 999px;
background-color: var(--trk-accent);
color: var(--color-espresso);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.trk-hero--delivered .trk-pill,
.trk-hero--cancelled .trk-pill {
color: #fff;
}
.trk-headline {
margin: 0 0 6px;
font-size: clamp(1.45rem, 1.15rem + 1.4vw, 2rem);
font-weight: 700;
line-height: 1.15;
color: #fff7e6;
}
.trk-detail {
max-width: 54ch;
margin: 0;
font-size: var(--fs-body);
line-height: 1.5;
color: rgba(250, 243, 228, 0.8);
}
.tj {
position: relative;
margin-top: 28px;
}
.tj-road {
position: absolute;
z-index: 0;
top: 21px;
left: 12.5%;
right: 12.5%;
height: 4px;
border-radius: 4px;
background-color: rgba(250, 243, 228, 0.16);
}
.tj-fill {
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
transform-origin: left center;
transform: scaleX(var(--p, 0));
}
.tj-stations {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
margin: 0;
padding: 0;
list-style: none;
}
.tj-st {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
min-width: 0;
text-align: center;
}
.tj-node {
position: relative;
display: grid;
place-items: center;
width: 46px;
height: 46px;
border: 2px solid rgba(250, 243, 228, 0.24);
border-radius: 50%;
background-color: #3d2c21;
color: rgba(250, 243, 228, 0.5);
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.tj-st--done .tj-node {
border-color: var(--color-gold);
background-color: var(--color-gold);
color: var(--color-espresso);
}
.tj-st--current .tj-node {
border-color: var(--color-gold-light);
background-color: var(--color-gold);
color: var(--color-espresso);
box-shadow: 0 0 0 6px rgba(233, 197, 104, 0.22);
}
.trk-hero--delivered .tj-st--current .tj-node {
border-color: #7fd29d;
background-color: #3f9e5e;
color: #fff;
box-shadow: 0 0 0 6px rgba(79, 184, 119, 0.28);
}
.tj-st--hold .tj-node {
border-color: #f3c27a;
background-color: #e0952a;
color: #2c1f17;
box-shadow: 0 0 0 6px rgba(224, 149, 42, 0.26);
}
.tj-st--cancelled .tj-node {
border-color: #e58a84;
background-color: #b3261e;
color: #fff;
}
.tj-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.tj-label {
font-size: var(--fs-body-sm);
font-weight: 700;
color: #fff7e6;
}
.tj-st--upcoming .tj-label {
font-weight: 600;
color: rgba(250, 243, 228, 0.5);
}
.tj-st--hold .tj-label {
color: #f3c27a;
}
.tj-st--cancelled .tj-label {
color: #f1aaa5;
}
.tj-time {
font-size: 0.74rem;
line-height: 1.3;
color: rgba(250, 243, 228, 0.6);
}
.trk-last {
margin: 20px 0 0;
padding-top: 14px;
border-top: 1px solid rgba(250, 243, 228, 0.14);
font-size: var(--fs-body-sm);
line-height: 1.5;
color: rgba(250, 243, 228, 0.82);
}
.trk-last strong {
margin-right: 6px;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-gold-light);
}
.trk-last span {
color: rgba(250, 243, 228, 0.5);
}
@media (max-width: 560px) {
.trk-hero {
padding: 20px 18px 18px;
border-radius: 18px;
}
.tj {
--row: 68px;
}
.tj-road {
top: 21px;
left: 21px;
right: auto;
width: 4px;
height: calc(var(--row) * 3);
}
.tj-fill {
transform-origin: center top;
transform: scaleY(var(--p, 0));
}
.tj-stations {
grid-template-columns: 1fr;
grid-auto-rows: var(--row);
}
.tj-st {
flex-direction: row;
align-items: flex-start;
gap: 16px;
text-align: left;
}
.tj-text {
align-items: flex-start;
padding-top: 3px;
}
}
.ps {
position: relative;
padding: 20px 20px 0;
overflow: hidden;
border: 1px solid var(--color-card-border);
border-radius: 18px;
background-color: #fff;
box-shadow: var(--shadow);
}
.ps-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 4px;
}
.ps-head h3 {
margin: 0;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-gold-dark);
}
.ps-head span {
font-size: var(--fs-meta);
color: var(--color-espresso-soft);
}
.ps-list {
margin: 0;
padding: 0;
list-style: none;
}
.ps-item {
display: grid;
grid-template-columns: 56px minmax(0, 1fr) auto auto;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--color-cream-soft);
}
.ps-item:last-child {
border-bottom: 0;
}
.ps-thumb {
display: grid;
place-items: center;
width: 56px;
height: 56px;
overflow: hidden;
border: 1px solid var(--color-cream-soft);
border-radius: 12px;
background-color: #fff;
}
.ps-thumb img,
.ps-thumb picture {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ps-mono {
display: grid;
place-items: center;
width: 100%;
height: 100%;
background-color: var(--color-cream-soft);
font-size: 1.35rem;
font-weight: 700;
color: var(--color-gold-dark);
}
.ps-main {
min-width: 0;
}
.ps-main strong {
display: block;
font-size: var(--fs-body);
line-height: 1.25;
color: var(--color-espresso);
}
.ps-main small {
display: block;
margin-top: 2px;
font-size: var(--fs-meta);
color: var(--color-espresso-soft);
}
.ps-qty {
padding: 3px 10px;
border: 1px solid var(--color-gold-light);
border-radius: 999px;
background-color: var(--color-cream);
font-size: var(--fs-meta);
font-weight: 700;
color: var(--color-gold-dark);
}
.ps-price {
min-width: 68px;
text-align: right;
font-weight: 700;
color: var(--color-espresso);
}
.ps-lines {
display: grid;
gap: 8px;
margin: 6px 0 0;
}
.ps-line {
display: flex;
align-items: baseline;
gap: 8px;
font-size: var(--fs-body-sm);
color: var(--color-espresso-soft);
}
.ps-line dt,
.ps-line dd {
margin: 0;
}
.ps-line i {
flex: 1;
min-width: 12px;
border-bottom: 2px dotted var(--color-gold-light);
transform: translateY(-3px);
}
.ps-line dd {
font-weight: 600;
color: var(--color-espresso);
}
.ps-tear {
position: relative;
height: 20px;
margin: 12px -20px 0;
background:
radial-gradient(circle at 0 50%, var(--color-bg) 9px, transparent 9.5px) left center / 51% 100% no-repeat,
radial-gradient(circle at 100% 50%, var(--color-bg) 9px, transparent 9.5px) right center / 51% 100% no-repeat;
}
.ps-tear::after {
content: '';
position: absolute;
top: 50%;
right: 16px;
left: 16px;
border-top: 2px dashed var(--color-gold-light);
}
.ps-total {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 -20px;
padding: 16px 20px 18px;
background-color: var(--color-espresso);
}
.ps-total span {
display: block;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-gold-light);
}
.ps-total small {
display: block;
margin-top: 2px;
font-size: var(--fs-meta);
color: rgba(250, 243, 228, 0.7);
}
.ps-total strong {
font-size: 1.7rem;
font-weight: 700;
line-height: 1;
color: var(--color-gold);
}
@media (max-width: 420px) {
.ps-item {
grid-template-columns: 48px minmax(0, 1fr) auto;
grid-template-areas: 'thumb main price' 'thumb qty price';
gap: 4px 12px;
}
.ps-thumb {
grid-area: thumb;
width: 48px;
height: 48px;
}
.ps-main {
grid-area: main;
}
.ps-qty {
grid-area: qty;
justify-self: start;
}
.ps-price {
grid-area: price;
min-width: 0;
}
}
.trk-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.trk-fact {
padding: 14px 16px;
border-radius: 14px;
background-color: var(--color-cream);
}
.trk-fact--wide {
grid-column: 1 / -1;
}
.trk-fact-label {
display: block;
margin-bottom: 4px;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-gold-dark);
}
.trk-fact p {
margin: 0;
font-size: var(--fs-body-sm);
line-height: 1.5;
color: var(--color-espresso);
}
.trk-history {
padding: 0 18px;
border: 1px solid var(--color-card-border);
border-radius: 14px;
background-color: #fff;
}
.trk-history summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
font-size: var(--fs-body-sm);
font-weight: 700;
color: var(--color-espresso);
cursor: pointer;
list-style: none;
}
.trk-history summary::-webkit-details-marker {
display: none;
}
.trk-history summary::after {
content: '';
width: 8px;
height: 8px;
border-right: 2px solid var(--color-gold-dark);
border-bottom: 2px solid var(--color-gold-dark);
transform: rotate(45deg);
transition: transform 0.2s ease;
}
.trk-history[open] summary::after {
transform: rotate(-135deg);
}
.trk-history .order-timeline {
margin: 4px 0 18px;
}
.trk-help {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 18px;
border-radius: 14px;
background-color: var(--color-cream-soft);
}
.trk-help p {
margin: 0;
font-size: var(--fs-body-sm);
font-weight: 600;
color: var(--color-espresso);
}
.trk-help-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.trk-help-actions .btn {
padding: 9px 16px;
font-size: var(--fs-body-sm);
}
@media (max-width: 560px) {
.trk-facts {
grid-template-columns: 1fr;
}
.trk-help-actions,
.trk-help-actions .btn {
width: 100%;
text-align: center;
}
}
@keyframes trk-rise {
from {
opacity: 0;
transform: translateY(14px);
}
}
@keyframes trk-grow {
from {
transform: scaleX(0);
}
}
@keyframes trk-grow-y {
from {
transform: scaleY(0);
}
}
@keyframes trk-ping {
0% {
opacity: 0.75;
transform: scale(1);
}
70%,
100% {
opacity: 0;
transform: scale(1.55);
}
}
html.mm-motion:not(.mm-soft) .trk-hero,
html.mm-motion:not(.mm-soft) .ps,
html.mm-motion:not(.mm-soft) .trk-facts,
html.mm-motion:not(.mm-soft) .trk-history,
html.mm-motion:not(.mm-soft) .trk-help {
animation: trk-rise 0.6s var(--mm-ease, cubic-bezier(0.2, 0.8, 0.2, 1)) backwards;
}
html.mm-motion:not(.mm-soft) .ps { animation-delay: 0.12s; }
html.mm-motion:not(.mm-soft) .trk-facts { animation-delay: 0.22s; }
html.mm-motion:not(.mm-soft) .trk-history { animation-delay: 0.3s; }
html.mm-motion:not(.mm-soft) .trk-help { animation-delay: 0.36s; }
html.mm-motion:not(.mm-soft) .tj-fill {
animation: trk-grow 1s var(--mm-ease, cubic-bezier(0.2, 0.8, 0.2, 1)) 0.3s backwards;
}
html.mm-motion:not(.mm-soft) .ps-item {
animation: trk-rise 0.5s var(--mm-ease, cubic-bezier(0.2, 0.8, 0.2, 1)) calc(0.25s + var(--i, 0) * 70ms) backwards;
}
@media (max-width: 560px) {
html.mm-motion:not(.mm-soft) .tj-fill {
animation-name: trk-grow-y;
}
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .trk-hero--pending .tj-st--current .tj-node::after,
html.mm-motion:not(.mm-soft):not(.mm-lite) .trk-hero--confirmed .tj-st--current .tj-node::after,
html.mm-motion:not(.mm-soft):not(.mm-lite) .trk-hero--on-the-way .tj-st--current .tj-node::after {
content: '';
position: absolute;
inset: -2px;
border: 2px solid var(--color-gold-light);
border-radius: 50%;
animation: trk-ping 2.2s ease-out infinite;
pointer-events: none;
}
@media (hover: none) {
.trk-help-actions .btn:active {
transform: scale(0.97);
}
}
@media (max-width: 700px) {
.footer-inner {
padding: 22px 16px 0;
}
.footer-perks {
margin-bottom: 20px;
border-radius: 14px;
}
.footer-perk {
gap: 12px;
padding: 8px 14px;
}
.footer-perk + .footer-perk::before {
left: 14px;
right: 14px;
}
.footer-perks .footer-perk-link {
display: none;
}
.footer-perk-icon {
width: 34px;
height: 34px;
border-radius: 10px;
}
.footer-perk-icon svg {
width: 18px;
height: 18px;
}
.footer-perk-text {
gap: 0;
}
.footer-perk-text strong {
font-size: 0.875rem;
line-height: 1.3;
}
.footer-perk-text > span {
font-size: 0.78rem;
line-height: 1.3;
}
.footer-grid {
gap: 18px 16px;
padding-bottom: 18px;
}
.footer-brand {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
}
.footer-brand .logo-mark img {
height: 34px;
}
.footer-social-icons {
order: 2;
gap: 8px;
margin-left: auto;
}
.footer-social-icon {
width: 36px;
height: 36px;
}
.footer-tagline {
order: 3;
flex-basis: 100%;
max-width: none;
margin: 0;
font-size: 0.84rem;
line-height: 1.4;
}
.footer-heading {
margin-bottom: 8px;
padding-bottom: 7px;
}
.footer-links-list {
gap: 0;
}
.footer-links-list a {
padding: 6px 0;
}
.footer-links-list a::after {
bottom: 3px;
}
.footer-contact-col .footer-heading {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.footer-contact {
flex-direction: row;
flex-wrap: wrap;
gap: 6px 16px;
}
.footer-contact-row {
gap: 8px;
padding: 4px 0;
font-size: 0.84rem;
}
.footer-contact-icon {
width: 30px;
height: 30px;
}
.footer-bottom-inner {
gap: 4px;
padding: 12px 16px 64px;
font-size: 0.78rem;
}
.footer-credit {
line-height: 1.4;
}
}
.checkout-done .checkout-container > h1 {
display: none;
}
.checkout-done .checkout-section {
padding: 16px 0 36px;
}
.confirm-hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.confirm-hero .confirm-check-wrap {
width: 76px;
height: 76px;
margin: 2px auto 10px;
}
.confirm-hero .confirm-check-badge {
width: 56px;
height: 56px;
}
.confirm-hero .confirm-check-badge svg {
width: 26px;
height: 26px;
}
.confirm-hero-text {
min-width: 0;
}
.checkout-confirmation .confirm-heading {
font-size: 1.5rem;
line-height: 1.2;
}
.checkout-confirmation .confirm-divider {
margin: 12px auto 16px;
}
.checkout-confirmation .confirm-info-grid {
position: relative;
padding: 14px 16px;
margin-bottom: 16px;
gap: 12px;
}
.checkout-confirmation .confirm-info-icon {
width: 34px;
height: 34px;
}
.checkout-confirmation .confirm-columns {
grid-template-areas:
'items'
'aside'
'account';
gap: 14px;
}
.confirm-columns > .checkout-step-col {
grid-area: items;
}
.confirm-columns > .checkout-summary-col {
grid-area: aside;
display: flex;
flex-direction: column;
gap: 12px;
}
.confirm-columns > .confirm-account-slot {
grid-area: account;
min-width: 0;
}
.confirm-account-slot:empty {
display: none;
}
.checkout-confirmation .confirm-card {
margin-bottom: 0;
padding: 16px 18px;
}
.checkout-confirmation .confirm-card h2 {
margin-bottom: 10px;
}
.checkout-confirmation .confirm-card-header h2 {
margin-bottom: 0;
}
.checkout-confirmation .confirm-item-row {
padding: 10px 0;
}
.checkout-confirmation .confirm-item-row:first-child {
padding-top: 12px;
}
.checkout-confirmation .confirm-item-row:last-child {
padding-bottom: 2px;
}
.checkout-confirmation .confirm-item-image {
width: 52px;
height: 52px;
}
.checkout-confirmation .confirm-summary-card {
padding: 0;
}
.checkout-confirmation .confirm-summary-card-title {
padding: 11px 18px;
margin: 0;
font-size: 1rem;
}
.checkout-confirmation .confirm-summary-card-body {
padding: 8px 18px 14px;
}
.checkout-confirmation .confirm-summary-card-body .summary-breakdown-row {
padding: 3px 0;
}
.checkout-confirmation .confirm-summary-card-body .summary-total-row {
margin-top: 8px;
padding-top: 10px;
font-size: 1.2rem;
}
.checkout-confirmation .confirm-customer-row {
display: grid;
grid-template-columns: 62px minmax(0, 1fr);
align-items: baseline;
gap: 10px;
min-width: 0;
padding: 8px 0;
}
.checkout-confirmation .confirm-customer-row > span:last-child {
font-weight: 500;
line-height: 1.4;
overflow-wrap: anywhere;
}
.checkout-confirmation .confirm-continue-btn {
padding: 11px 20px;
}
.checkout-confirmation .confirm-secondary-links {
margin-top: 0;
}
.confirm-sparks {
display: none;
}
@media (min-width: 900px) {
.checkout-confirmation {
max-width: 1040px;
}
.confirm-hero {
flex-direction: row;
justify-content: center;
gap: 16px;
margin-bottom: 14px;
text-align: left;
}
.confirm-hero .confirm-check-wrap {
flex: none;
width: 58px;
height: 58px;
margin: 0;
}
.confirm-hero .confirm-check-badge {
width: 44px;
height: 44px;
}
.confirm-hero .confirm-check-badge svg {
width: 22px;
height: 22px;
}
.checkout-confirmation .confirm-heading {
margin-bottom: 0;
font-size: 1.65rem;
}
.checkout-confirmation .confirm-subheading {
font-size: var(--fs-body-sm);
}
.checkout-confirmation .confirm-divider {
display: none;
}
.checkout-confirmation .confirm-info-grid {
padding: 10px 20px;
margin-bottom: 12px;
}
.checkout-confirmation .confirm-info-icon {
width: 32px;
height: 32px;
}
.checkout-confirmation .confirm-columns {
grid-template-columns: minmax(0, 1fr) 340px;
grid-template-rows: auto 1fr;
grid-template-areas:
'items aside'
'account aside';
gap: 12px 20px;
align-items: start;
}
.confirm-columns > .checkout-summary-col {
gap: 10px;
}
.checkout-confirmation .confirm-card {
padding: 14px 18px;
}
.checkout-confirmation .confirm-summary-card {
padding: 0;
}
.checkout-confirmation .confirm-card h2 {
margin-bottom: 6px;
}
.checkout-confirmation .confirm-summary-card-title {
padding: 9px 18px;
}
.checkout-confirmation .confirm-summary-card-body {
padding: 6px 18px 12px;
}
.checkout-confirmation .confirm-summary-card-body .summary-total-row {
margin-top: 6px;
padding-top: 8px;
}
.checkout-confirmation .confirm-customer-row {
padding: 6px 0;
}
.confirm-items-list {
max-height: max(210px, calc(100vh - 500px));
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
}
@media (min-width: 900px) and (max-height: 720px) {
.checkout-done .checkout-section {
padding-top: 10px;
}
.confirm-hero {
margin-bottom: 10px;
}
.confirm-hero .confirm-check-wrap {
width: 56px;
height: 56px;
}
.confirm-hero .confirm-check-badge {
width: 42px;
height: 42px;
}
.checkout-confirmation .confirm-heading {
font-size: 1.5rem;
}
.checkout-confirmation .confirm-subheading {
font-size: var(--fs-body-sm);
}
.checkout-confirmation .confirm-info-grid {
padding: 9px 18px;
margin-bottom: 10px;
}
.checkout-confirmation .confirm-columns {
gap: 10px 18px;
}
.confirm-columns > .checkout-summary-col {
gap: 10px;
}
.checkout-confirmation .confirm-card {
padding: 12px 16px;
}
.checkout-confirmation .confirm-summary-card {
padding: 0;
}
.checkout-confirmation .confirm-summary-card-title {
padding: 9px 16px;
}
.checkout-confirmation .confirm-summary-card-body {
padding: 6px 16px 10px;
}
.checkout-confirmation .confirm-summary-card-body .summary-total-row {
margin-top: 6px;
padding-top: 8px;
font-size: 1.1rem;
}
.checkout-confirmation .confirm-subheading {
display: none;
}
.confirm-hero .confirm-check-wrap {
width: 50px;
height: 50px;
}
.confirm-hero .confirm-check-badge {
width: 38px;
height: 38px;
}
.confirm-hero .confirm-check-badge svg {
width: 20px;
height: 20px;
}
.checkout-confirmation .confirm-info-grid {
padding: 7px 16px;
margin-bottom: 8px;
}
.checkout-confirmation .confirm-info-icon {
width: 28px;
height: 28px;
}
.checkout-confirmation .confirm-card h2 {
font-size: 1rem;
margin-bottom: 4px;
}
.checkout-confirmation .confirm-summary-card-title {
padding: 7px 16px;
}
.checkout-confirmation .confirm-columns {
gap: 8px 18px;
}
.confirm-columns > .checkout-summary-col {
gap: 6px;
}
.checkout-confirmation .confirm-summary-card-body .summary-breakdown-row {
padding: 2px 0;
}
.confirm-customer-grid {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
column-gap: 12px;
}
.checkout-confirmation .confirm-customer-row {
display: flex;
flex-direction: column;
gap: 0;
padding: 5px 0;
}
.confirm-customer-row-wide {
grid-column: 1 / -1;
}
.checkout-confirmation .confirm-continue-btn {
padding: 7px 18px;
}
.confirm-items-list {
max-height: 210px;
}
}
@media (max-width: 700px) {
.checkout-confirmation .confirm-info-item {
gap: 8px;
}
.checkout-confirmation .confirm-info-icon {
width: 30px;
height: 30px;
}
}
@media (max-width: 400px) {
.checkout-confirmation .confirm-info-value {
font-size: var(--fs-meta);
}
}
@media (max-width: 380px) {
.confirm-account-card {
padding: 14px;
}
}
.checkout-page .checkout-layout.is-review {
grid-template-columns: minmax(0, 1fr);
}
.checkout-layout.is-review .checkout-summary-col {
display: none;
}
@media (min-width: 900px) {
.checkout-page .checkout-layout.is-review {
grid-template-columns: minmax(0, 720px);
justify-content: center;
}
}
.checkout-page .checkout-block.is-review {
padding: 0;
border: 0;
border-radius: 0;
background: none;
}
.mm-invoice {
--inv-pad: 20px;
--inv-paper: #fff;
position: relative;
margin-bottom: 18px;
border: 1px solid var(--color-gold-light);
border-bottom: 0;
border-radius: 14px 14px 0 0;
background-color: var(--inv-paper);
box-shadow: 0 6px 22px rgba(59, 42, 32, 0.07);
}
.mm-invoice::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
height: 4px;
border-radius: 14px 14px 0 0;
background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold) 35%, var(--color-gold-light) 60%, var(--color-gold));
}
.mm-invoice::after {
content: '';
position: absolute;
left: -1px;
right: -1px;
top: 100%;
height: 8px;
background:
linear-gradient(135deg, var(--inv-paper) 25%, transparent 25%) -8px 0 / 16px 16px,
linear-gradient(225deg, var(--inv-paper) 25%, transparent 25%) -8px 0 / 16px 16px;
pointer-events: none;
}
.inv-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 22px var(--inv-pad) 12px;
}
.inv-head-text {
min-width: 0;
}
.inv-kicker {
display: block;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-gold-dark);
}
.checkout-page .mm-invoice .inv-title {
margin: 2px 0 2px;
font-size: 1.3rem;
font-weight: 700;
line-height: 1.2;
}
.inv-sub {
margin: 0;
font-size: var(--fs-body-sm);
line-height: 1.45;
color: var(--color-espresso-soft);
}
.inv-edit {
flex: none;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 38px;
padding: 6px 14px;
border: 1px solid var(--color-gold-light);
border-radius: 999px;
background-color: #fff;
color: var(--color-gold-dark);
font: inherit;
font-size: var(--fs-meta);
font-weight: 700;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.inv-edit:hover {
border-color: var(--color-gold);
background-color: var(--color-cream);
}
.inv-meta {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 0 var(--inv-pad);
padding: 12px 0;
border-top: 1px solid var(--color-card-border);
border-bottom: 1px solid var(--color-card-border);
}
.inv-meta dt {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-espresso-soft);
}
.inv-meta dd {
margin: 2px 0 0;
font-size: var(--fs-body-sm);
font-weight: 700;
line-height: 1.3;
overflow-wrap: anywhere;
}
.inv-parties {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 14px 18px;
padding: 14px var(--inv-pad);
}
.inv-party {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.inv-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-gold-dark);
}
.inv-label svg {
width: 13px;
height: 13px;
}
.inv-party strong {
font-size: 1rem;
line-height: 1.3;
overflow-wrap: anywhere;
}
.inv-party-text {
font-size: var(--fs-body-sm);
line-height: 1.45;
color: var(--color-espresso-soft);
overflow-wrap: anywhere;
}
.inv-muted {
opacity: 0.7;
}
.inv-lines-head {
display: none;
}
.inv-lines {
margin: 0;
padding: 0 var(--inv-pad);
list-style: none;
}
.inv-line {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) auto;
grid-template-areas:
'img main amount'
'img calc amount';
align-items: center;
column-gap: 12px;
row-gap: 3px;
padding: 12px 0;
border-top: 1px solid var(--color-card-border);
}
.inv-line-img {
grid-area: img;
width: 52px;
height: 52px;
overflow: hidden;
border-radius: 8px;
background-color: var(--color-cream-soft);
}
.inv-line-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.inv-line-main {
grid-area: main;
align-self: end;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.inv-line-name {
font-size: var(--fs-body-sm);
font-weight: 600;
line-height: 1.35;
overflow-wrap: anywhere;
}
.inv-line-variant {
align-self: flex-start;
padding: 0 8px;
border-radius: 999px;
background-color: var(--color-cream-soft);
font-size: 0.72rem;
line-height: 1.6;
color: var(--color-espresso-soft);
}
.inv-line-calc {
grid-area: calc;
align-self: start;
font-size: var(--fs-meta);
color: var(--color-espresso-soft);
}
.inv-line-x {
margin: 0 4px;
font-style: normal;
}
.inv-line-amount {
grid-area: amount;
font-size: 1rem;
font-weight: 700;
white-space: nowrap;
}
.inv-note {
margin: 4px var(--inv-pad) 0;
padding: 10px 12px;
border-left: 3px solid var(--color-gold);
border-radius: 6px;
background-color: var(--color-cream);
}
.inv-note p {
margin: 2px 0 0;
font-size: var(--fs-body-sm);
line-height: 1.45;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.inv-tear {
position: relative;
margin: 16px 0 12px;
border-top: 2px dashed var(--color-gold-light);
}
.inv-tear::before,
.inv-tear::after {
content: '';
position: absolute;
top: -11px;
width: 20px;
height: 20px;
border: 1px solid var(--color-gold-light);
border-radius: 50%;
background-color: var(--color-bg);
}
.inv-tear::before {
left: -11px;
clip-path: inset(0 0 0 50%);
}
.inv-tear::after {
right: -11px;
clip-path: inset(0 50% 0 0);
}
.inv-totals {
padding: 0 var(--inv-pad) 22px;
}
.inv-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 4px 0;
font-size: var(--fs-body-sm);
color: var(--color-espresso-soft);
}
.inv-row small {
margin-left: 6px;
font-size: 0.75rem;
opacity: 0.85;
}
.inv-total {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 10px;
padding: 12px 14px;
border: 1px solid var(--color-gold-light);
border-radius: 10px;
background-color: var(--color-cream);
}
.inv-total > span {
display: flex;
flex-direction: column;
font-size: 1rem;
font-weight: 700;
line-height: 1.25;
}
.inv-total small {
font-size: 0.75rem;
font-weight: 500;
color: var(--color-espresso-soft);
}
.inv-total-amount {
display: inline-block;
font-size: 1.5rem;
font-weight: 800;
line-height: 1.1;
color: var(--color-gold-dark);
transform-origin: right center;
}
.inv-pay {
display: flex;
align-items: center;
gap: 12px;
margin: 14px 0 0;
padding: 12px 14px;
border: 1px solid var(--color-gold-light);
border-radius: 12px;
background-color: var(--color-cream);
}
.inv-pay-icon {
flex: none;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: 1px solid var(--color-gold-light);
border-radius: 50%;
background-color: #fff;
color: var(--color-gold-dark);
}
.inv-pay-icon svg {
width: 18px;
height: 18px;
}
.checkout-page .inv-pay .cod-confirm-text {
display: flex;
flex-direction: column;
gap: 1px;
margin: 0;
font-size: var(--fs-body-sm);
line-height: 1.4;
}
.inv-pay .cod-confirm-text strong {
font-size: 0.95rem;
}
.inv-pay.inv-pay-send {
display: block;
}
.inv-pay-send p {
margin: 0;
font-size: var(--fs-body-sm);
font-weight: 600;
line-height: 1.5;
}
.inv-confirm {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
overflow: hidden;
margin-top: 14px;
}
.inv-confirm-total {
margin-left: 4px;
padding-left: 12px;
border-left: 1px solid rgba(59, 42, 32, 0.28);
font-weight: 800;
}
@media (max-width: 899px) {
.inv-confirm {
display: none;
}
}
@media (min-width: 900px) {
.inv-actions {
position: sticky;
bottom: 0;
z-index: 5;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
align-items: stretch;
gap: 0 12px;
margin: 0 -8px;
padding: 12px 8px 14px;
background-color: var(--color-bg);
box-shadow: 0 -10px 16px -10px rgba(59, 42, 32, 0.16);
}
.inv-actions .inv-pay {
margin: 0;
}
.inv-actions .inv-confirm {
width: auto;
margin: 0;
padding-inline: 24px;
}
.inv-actions .checkout-submit-error,
.inv-actions .checkout-back-link {
grid-column: 1 / -1;
}
.inv-actions .checkout-back-link {
display: none;
}
}
@media (min-width: 640px) {
.inv-lines-head {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) 44px 84px 96px;
column-gap: 12px;
margin: 0 var(--inv-pad);
padding: 7px 10px;
border-radius: 8px;
background-color: var(--color-cream);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-espresso-soft);
}
.inv-lines-head span:first-child {
grid-column: 1 / 3;
}
.inv-lines-head span:not(:first-child) {
text-align: right;
}
.inv-line {
grid-template-columns: 52px minmax(0, 1fr) 44px 84px 96px;
grid-template-areas: none;
padding: 12px 10px;
}
.inv-line-img,
.inv-line-main,
.inv-line-amount {
grid-area: auto;
}
.inv-line-main {
align-self: center;
}
.inv-line-calc {
display: contents;
}
.inv-line-x {
display: none;
}
.inv-line-qty,
.inv-line-price {
text-align: right;
font-size: var(--fs-body-sm);
color: var(--color-espresso);
}
.inv-line-amount {
text-align: right;
}
}
@media (max-width: 520px) {
.mm-invoice {
--inv-pad: 16px;
}
.inv-head {
padding-top: 20px;
}
.inv-parties {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
}
@media (max-width: 360px) {
.inv-meta {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.inv-meta > div:last-child {
grid-column: 1 / -1;
}
.inv-edit span {
display: none;
}
.inv-edit {
padding: 6px 10px;
}
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .mm-invoice {
animation: inv-rise 0.45s var(--mm-ease, cubic-bezier(0.2, 0.8, 0.2, 1)) backwards;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .confirm-hero,
html.mm-motion:not(.mm-soft):not(.mm-lite) .confirm-info-grid,
html.mm-motion:not(.mm-soft):not(.mm-lite) .confirm-columns > * {
animation: inv-rise 0.5s var(--mm-ease, cubic-bezier(0.2, 0.8, 0.2, 1)) backwards;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .confirm-info-grid {
animation-delay: 0.08s;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .confirm-columns > .checkout-step-col {
animation-delay: 0.16s;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .confirm-columns > .checkout-summary-col {
animation-delay: 0.24s;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .confirm-columns > .confirm-account-slot {
animation-delay: 0.32s;
}
html.mm-lite .confirm-check-ring,
html.mm-soft .confirm-check-ring {
animation-iteration-count: 2;
}
html.mm-lite .confirm-check-ring-3,
html.mm-soft .confirm-check-ring-3 {
display: none;
}
html.mm-hi.mm-motion:not(.mm-soft):not(.mm-lite) .inv-line,
html.mm-hi.mm-motion:not(.mm-soft):not(.mm-lite) .confirm-item-row {
animation: inv-line-in 0.5s var(--mm-ease, cubic-bezier(0.2, 0.8, 0.2, 1)) calc(0.2s + var(--i, 0) * 60ms) backwards;
}
html.mm-hi.mm-motion:not(.mm-soft):not(.mm-lite) .inv-total-amount {
animation: inv-pop 0.6s ease 0.55s backwards;
}
html.mm-hi.mm-motion:not(.mm-soft):not(.mm-lite) .inv-confirm::after,
html.mm-hi.mm-motion:not(.mm-soft):not(.mm-lite) .checkout-sticky-bar.is-review .checkout-place-order-btn::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 38%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
transform: translateX(-140%) skewX(-20deg);
pointer-events: none;
animation: inv-shine 5s ease-in-out 1.4s infinite;
}
html.mm-hi.mm-motion:not(.mm-soft):not(.mm-lite) .checkout-sticky-bar.is-review .checkout-place-order-btn {
position: relative;
overflow: hidden;
}
@supports (backdrop-filter: blur(1px)) {
html.mm-hi.mm-motion:not(.mm-soft):not(.mm-lite) .checkout-sticky-bar.is-review {
background-color: rgba(255, 252, 245, 0.84);
-webkit-backdrop-filter: blur(12px) saturate(1.3);
backdrop-filter: blur(12px) saturate(1.3);
}
@media (min-width: 900px) {
html.mm-hi.mm-motion:not(.mm-soft):not(.mm-lite) .inv-actions {
background-color: rgba(250, 250, 250, 0.82);
-webkit-backdrop-filter: blur(12px) saturate(1.3);
backdrop-filter: blur(12px) saturate(1.3);
}
}
}
html.mm-hi.mm-motion:not(.mm-soft):not(.mm-lite) .confirm-sparks {
position: absolute;
inset: 0;
display: block;
pointer-events: none;
}
html.mm-hi.mm-motion:not(.mm-soft):not(.mm-lite) .confirm-sparks i {
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
margin: -3px 0 0 -3px;
border-radius: 50%;
background-color: var(--color-gold-light);
opacity: 0;
animation: conf-spark 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) calc(0.35s + var(--d, 0ms)) backwards;
}
html.mm-hi.mm-motion:not(.mm-soft):not(.mm-lite) .confirm-info-grid {
overflow: hidden;
}
html.mm-hi.mm-motion:not(.mm-soft):not(.mm-lite) .confirm-info-grid::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 30%;
background: linear-gradient(100deg, transparent, rgba(233, 197, 104, 0.28), transparent);
transform: translateX(-120%) skewX(-18deg);
pointer-events: none;
animation: conf-sweep 1.3s ease 0.55s backwards;
}
@keyframes inv-rise {
from {
opacity: 0;
transform: translateY(12px);
}
}
@keyframes inv-line-in {
from {
opacity: 0;
transform: translateX(-10px);
}
}
@keyframes inv-pop {
0% {
opacity: 0;
transform: scale(0.85);
}
55% {
transform: scale(1.08);
}
}
@keyframes inv-shine {
0%,
62% {
transform: translateX(-140%) skewX(-20deg);
}
100% {
transform: translateX(380%) skewX(-20deg);
}
}
@keyframes conf-spark {
0% {
opacity: 0;
transform: rotate(var(--a)) translateY(-6px) scale(0.6);
}
20% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(var(--a)) translateY(-60px) scale(0.3);
}
}
@keyframes conf-sweep {
from {
transform: translateX(-120%) skewX(-18deg);
}
to {
transform: translateX(480%) skewX(-18deg);
}
}
.account-link.has-unread::after {
content: '';
position: absolute;
top: -2px;
right: -4px;
width: 11px;
height: 11px;
border: 2px solid var(--color-bg, #fafafa);
border-radius: 50%;
background-color: #d94b3d;
pointer-events: none;
}
.site-header .account-link.has-unread::after {
border-color: #1f1610;
}
.mm-msg-count {
display: inline-grid;
place-items: center;
min-width: 18px;
height: 18px;
margin-left: 6px;
padding: 0 5px;
border-radius: 999px;
background-color: #d94b3d;
color: #fff;
font-size: 0.68rem;
font-weight: 800;
line-height: 1;
text-decoration: none;
vertical-align: 1px;
}
.mm-msg-count[hidden] {
display: none;
}
.contact-messaging-lead {
max-width: 62ch;
}
@media (max-width: 560px) {
.trk-help-actions .btn {
min-height: 46px;
}
}
@media (max-width: 860px), (pointer: coarse) {
.site-header .logo {
padding: 10px 0;
margin: -10px 0;
}
.search-icon-btn::after,
.auth-ambient-eye-toggle::after {
content: '';
position: absolute;
inset: -8px;
}
.breadcrumb a {
padding: 8px 2px;
margin: -8px -2px;
}
.auth-ambient-card .account-auth-tab {
padding: 12px 0;
}
#forgotPasswordLink {
display: inline-block;
padding: 10px 0;
margin: -10px 0;
}
}
@media (pointer: coarse) {
a,
button,
summary,
select,
label,
[role='button'],
input[type='checkbox'],
input[type='radio'] {
touch-action: manipulation;
}
}
@media (max-width: 860px) {
.nav-account-row-links {
flex-wrap: wrap;
gap: 8px;
margin-top: 6px;
}
.nav-account-row-links a {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 14px;
border: 1px solid var(--color-gold-light);
border-radius: 999px;
background-color: #fff;
color: var(--color-espresso);
font-weight: 600;
text-decoration: none;
}
}
.trk-help-actions {
flex: 1 1 auto;
justify-content: flex-end;
}
.trk-help-actions .btn {
white-space: nowrap;
}
@media (max-width: 560px) {
.trk-help-actions {
justify-content: stretch;
}
}
.policy-lang {
display: inline-flex;
gap: 4px;
margin-bottom: 14px;
padding: 4px;
border: 1px solid var(--color-card-border);
border-radius: 999px;
background: var(--color-cream-soft);
}
.policy-lang-btn {
min-height: 40px;
padding: 8px 20px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--color-espresso-soft);
font: inherit;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.policy-lang-btn.is-active {
background: var(--color-espresso);
color: var(--color-gold-light);
}
.policy-lang-hint {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 12px;
margin: 0 0 18px;
padding: 10px 14px;
border: 1px dashed rgba(166, 121, 16, 0.55);
border-radius: 12px;
background: #fffaf0;
color: var(--color-espresso);
font-weight: 600;
}
.policy-lang-hint[hidden] {
display: none;
}
.policy-lang-hint-go {
min-height: 38px;
padding: 6px 16px;
border: 0;
border-radius: 999px;
background: var(--color-gold);
color: var(--color-espresso);
font: inherit;
font-weight: 700;
cursor: pointer;
}
.policy-lang-hint-close {
margin-left: auto;
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--color-espresso-soft);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
}
.policy-body[lang='bn'] {
font-family: 'Noto Sans Bengali', 'Hind Siliguri', 'Nirmala UI', 'Siyam Rupali', system-ui, sans-serif;
line-height: 1.9;
}
.policy-body[lang='bn'] h1,
.policy-body[lang='bn'] h2 {
line-height: 1.45;
}
.policy-body[hidden] {
display: none;
}
.policy-callout {
margin: 22px 0 10px;
padding: 18px 20px;
border: 1px solid rgba(212, 160, 23, 0.55);
border-radius: 16px;
background: linear-gradient(180deg, #fffaf0, #fbf1da);
box-shadow: 0 14px 30px -24px rgba(59, 42, 32, 0.55);
}
.policy-callout-title {
margin-bottom: 12px;
color: var(--color-gold-dark);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.policy-rules,
.policy-steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 12px;
counter-reset: policy-n;
}
.policy-rules li,
.policy-steps li {
position: relative;
padding-left: 42px;
counter-increment: policy-n;
}
.policy-rules li::before,
.policy-steps li::before {
content: counter(policy-n);
position: absolute;
left: 0;
top: 1px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--color-espresso);
color: var(--color-gold-light);
font-size: 0.9rem;
font-weight: 700;
}
.policy-steps {
margin-top: 10px;
}
.policy-steps li {
padding-top: 12px;
padding-bottom: 12px;
padding-right: 14px;
border: 1px solid var(--color-card-border);
border-radius: 14px;
background: #fff;
}
.policy-steps li::before {
left: 12px;
top: 12px;
}
.policy-steps li {
padding-left: 54px;
}
.policy-list {
list-style: none;
margin: 8px 0 0;
padding: 0;
display: grid;
gap: 10px;
}
.policy-list li {
position: relative;
padding-left: 30px;
}
.policy-list li::before {
content: '';
position: absolute;
left: 4px;
top: 0.62em;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--color-gold);
}
.policy-list.is-yes li::before,
.policy-list.is-no li::before {
left: 0;
top: 0.12em;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.78rem;
font-weight: 700;
line-height: 1;
}
.policy-list.is-yes li::before {
content: '✓';
background: #3f8a3a;
}
.policy-list.is-no li::before {
content: '✕';
background: #b3382c;
}
@media (max-width: 600px) {
.policy-callout {
padding: 16px 14px;
}
.policy-steps li {
padding-left: 50px;
}
}
.unbox-note {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 14px 0;
padding: 12px 14px;
border: 1px solid rgba(212, 160, 23, 0.5);
border-radius: 14px;
background: #fffaf0;
color: var(--color-espresso);
text-align: left;
}
.unbox-note-icon {
flex: none;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--color-espresso);
color: var(--color-gold-light);
}
.unbox-note-text strong {
display: block;
margin-bottom: 2px;
font-size: 0.95rem;
}
.unbox-note-text p {
margin: 0;
color: var(--color-espresso-soft);
font-size: 0.85rem;
line-height: 1.5;
}
.unbox-note-text a {
color: var(--color-gold-dark);
font-weight: 700;
text-decoration: underline;
}
.unbox-note--delivered {
border-color: rgba(63, 138, 58, 0.55);
background: #f1f8ef;
}
.unbox-note--delivered .unbox-note-icon {
background: #2f6f2c;
color: #fff;
}
.footer-business {
margin-top: 14px;
display: grid;
gap: 8px;
}
.footer-business[hidden],
.footer-business-row[hidden],
.contact-business[hidden],
.contact-business-list > div[hidden] {
display: none;
}
.footer-business-row {
display: grid;
gap: 2px;
margin: 0;
color: rgba(250, 243, 228, 0.82);
font-size: 0.85rem;
line-height: 1.45;
}
.footer-business-label {
color: var(--color-gold-light);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.contact-business-list {
display: grid;
gap: 12px;
margin: 8px 0 24px;
}
.contact-business-list dt {
color: var(--color-gold-dark);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.contact-business-list dd {
margin: 2px 0 0;
color: var(--color-espresso);
}
.pay-guide {
margin-bottom: 14px;
padding: 16px;
border: 1px solid rgba(212, 160, 23, 0.55);
border-radius: 16px;
background: linear-gradient(180deg, #fffaf0, #fbf1da);
text-align: left;
}
.pay-guide-head {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.pay-guide-badge {
padding: 4px 12px;
border-radius: 999px;
background: var(--color-espresso);
color: var(--color-gold-light);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.pay-guide-title {
margin: 0;
color: var(--color-espresso);
font-weight: 700;
}
.pay-guide-number {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 12px;
margin-bottom: 12px;
padding: 12px 14px;
border: 1px dashed rgba(166, 121, 16, 0.6);
border-radius: 12px;
background: #fff;
}
.pay-guide-number-label {
flex-basis: 100%;
color: var(--color-gold-dark);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.pay-guide-number strong {
color: var(--color-espresso);
font-size: 1.35rem;
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
}
.pay-copy-btn {
min-height: 40px;
margin-left: auto;
padding: 8px 16px;
border: 1px solid var(--color-espresso);
border-radius: 999px;
background: transparent;
color: var(--color-espresso);
font: inherit;
font-weight: 700;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.pay-copy-btn:hover {
background: var(--color-espresso);
color: var(--color-gold-light);
}
.pay-copy-btn.is-copied {
border-color: #2f6f2c;
background: #2f6f2c;
color: #fff;
}
.pay-guide-steps {
margin: 0 0 10px;
padding-left: 20px;
display: grid;
gap: 6px;
color: var(--color-espresso);
font-size: 0.92rem;
line-height: 1.5;
}
.pay-guide-note {
margin: 0;
color: var(--color-espresso-soft);
font-size: 0.85rem;
font-weight: 600;
}
.pay-optional {
color: var(--color-espresso-soft);
font-weight: 400;
font-size: 0.85em;
}
.pay-field-hint {
margin: 6px 0 0;
color: #b3382c;
font-size: 0.85rem;
}
.pay-file-name {
margin: 6px 0 0;
color: var(--color-espresso-soft);
font-size: 0.85rem;
word-break: break-all;
}
.keep-order {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 10px;
margin-top: 10px;
}
.keep-chip {
min-height: 36px;
display: inline-flex;
align-items: center;
padding: 6px 14px;
border: 1px solid var(--color-gold);
border-radius: 999px;
background: #fff;
color: var(--color-espresso);
font: inherit;
font-size: 0.85rem;
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.keep-chip:hover {
background: var(--color-espresso);
border-color: var(--color-espresso);
color: var(--color-gold-light);
}
.keep-chip.is-copied {
border-color: #2f6f2c;
background: #2f6f2c;
color: #fff;
}
.keep-saved {
color: #2f6f2c;
font-size: 0.85rem;
font-weight: 600;
}
.keep-note {
margin: 6px 0 0;
color: var(--color-espresso-soft);
font-size: 0.82rem;
}
.track-recent {
margin: 0 0 18px;
padding: 14px 16px;
border: 1px solid var(--color-card-border);
border-radius: 14px;
background: var(--color-cream);
}
.track-recent[hidden] {
display: none;
}
.track-recent-title {
margin: 0 0 8px;
color: var(--color-espresso);
font-weight: 700;
}
.track-recent-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.track-recent-chip {
min-height: 40px;
padding: 8px 16px;
border: 1px solid var(--color-gold);
border-radius: 999px;
background: #fff;
color: var(--color-espresso);
font: inherit;
font-weight: 700;
cursor: pointer;
}
.track-recent-chip:hover {
background: var(--color-gold);
}
.track-recent-forget {
margin-top: 10px;
padding: 0;
border: 0;
background: none;
color: var(--color-espresso-soft);
font: inherit;
font-size: 0.82rem;
text-decoration: underline;
cursor: pointer;
}
.track-recover {
margin: 18px 0;
border: 1px solid var(--color-card-border);
border-radius: 14px;
background: #fff;
}
.track-recover summary {
padding: 14px 16px;
color: var(--color-gold-dark);
font-weight: 700;
cursor: pointer;
}
.track-recover-body {
display: grid;
gap: 18px;
padding: 0 16px 16px;
}
.track-recover-block h2 {
margin: 0 0 4px;
font-size: 1.05rem;
}
.track-recover-block p {
margin: 0 0 10px;
color: var(--color-espresso-soft);
font-size: 0.9rem;
}
.track-recover-code {
margin-top: 12px;
}
.track-recover-status {
margin: 0;
padding: 10px 12px;
border-radius: 10px;
background: #e8f3e3;
color: #2f5a22;
font-weight: 600;
}
.track-recover-status[hidden] {
display: none;
}
.track-recover-status.is-error {
background: #fdecea;
color: #8a2a20;
}
.track-recover-results {
display: grid;
gap: 8px;
}
.track-found {
display: grid;
gap: 2px;
padding: 12px 14px;
border: 1px solid var(--color-gold);
border-radius: 12px;
background: #fffaf0;
color: var(--color-espresso);
font: inherit;
text-align: left;
cursor: pointer;
}
.track-found span {
color: var(--color-espresso-soft);
font-size: 0.85rem;
}
.track-recover-account {
margin: 0;
color: var(--color-espresso-soft);
font-size: 0.85rem;
}
@media (min-width: 701px) and (max-width: 1149px) {
.category-swiper {
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
}
.fab-bubbles {
display: none;
}
.fab-container {
bottom: calc(20px + var(--fab-lift, 0px));
}
@media (max-width: 600px) {
.fab-container {
bottom: calc(16px + var(--fab-lift, 0px));
}
}
.fab-main.has-unread::after {
content: '';
position: absolute;
top: 3px;
right: 3px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #d94b3a;
border: 2px solid var(--color-cream, #faf3e4);
}
.fab-panel {
position: absolute;
right: 0;
bottom: calc(100% + 10px);
width: 308px;
max-width: calc(100vw - 32px);
max-height: min(430px, calc(var(--fab-vh, 100vh) - 100px));
display: flex;
flex-direction: column;
overflow: hidden;
background: #fffdf8;
border: 1px solid rgba(59, 42, 32, 0.1);
border-radius: 16px;
box-shadow: 0 14px 36px rgba(59, 42, 32, 0.24), 0 2px 6px rgba(59, 42, 32, 0.1);
opacity: 0;
transform: translateY(8px) scale(0.97);
transform-origin: bottom right;
transition: opacity 0.18s ease, transform 0.18s ease;
text-align: left;
}
.fab-panel[hidden] {
display: none;
}
.fab-panel.is-on {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.fab-panel {
transition: none;
}
}
.fab-panel-head {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 10px 10px 12px;
background: linear-gradient(135deg, #3b2a20, #1f1610);
color: #fdfaf0;
}
.fab-panel-avatar {
flex-shrink: 0;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--color-gold);
color: var(--color-espresso);
font-weight: 800;
font-size: 0.66rem;
letter-spacing: 0.04em;
}
.fab-panel-title {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
line-height: 1.25;
}
.fab-panel-title strong {
font-size: 0.9rem;
}
.fab-panel-title small {
color: rgba(253, 250, 240, 0.72);
font-size: 0.72rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fab-panel-close {
flex-shrink: 0;
width: 30px;
height: 30px;
border: 0;
border-radius: 50%;
background: rgba(253, 250, 240, 0.12);
color: #fdfaf0;
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
}
.fab-panel-close:hover {
background: rgba(253, 250, 240, 0.22);
}
.fab-panel-body {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
background: #fffdf8;
}
.fab-loading {
margin: 0;
padding: 26px 16px;
text-align: center;
color: var(--color-espresso-soft);
font-size: 0.82rem;
}
.fab-gate {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 14px 14px 4px;
text-align: center;
}
.fab-gate-icon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background-color: rgba(212, 160, 23, 0.16);
color: var(--color-gold-dark);
}
.fab-gate-icon svg {
width: 18px;
height: 18px;
}
.fab-gate h3 {
margin: 0;
font-size: 0.95rem;
line-height: 1.3;
}
.fab-gate p {
margin: 0;
font-size: 0.78rem;
line-height: 1.4;
color: var(--color-espresso-soft);
}
.fab-gate-actions {
display: flex;
gap: 8px;
width: 100%;
margin-top: 8px;
}
.fab-gate-actions .btn {
flex: 1;
min-height: 38px;
padding: 8px 10px;
font-size: 0.84rem;
white-space: nowrap;
}
.fab-or {
display: flex;
align-items: center;
gap: 8px;
margin: 10px 14px 8px;
color: var(--color-espresso-soft);
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.07em;
}
.fab-or::before,
.fab-or::after {
content: '';
flex: 1;
height: 1px;
background: rgba(59, 42, 32, 0.12);
}
.fab-opts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 0 14px 14px;
}
.fab-opt {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 10px 4px 8px;
border: 1px solid rgba(59, 42, 32, 0.1);
border-radius: 12px;
background: #fff;
color: var(--color-espresso);
text-decoration: none;
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.fab-opt strong {
font-size: 0.74rem;
font-weight: 700;
line-height: 1.1;
}
.fab-opt:hover {
border-color: var(--color-gold);
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(59, 42, 32, 0.1);
}
.fab-opt-icon,
.fab-quick-btn {
display: grid;
place-items: center;
flex-shrink: 0;
border-radius: 50%;
color: #fff;
}
.fab-opt-icon {
width: 34px;
height: 34px;
}
.fab-opt-icon svg {
width: 18px;
height: 18px;
}
.fab-opt-whatsapp .fab-opt-icon,
.fab-quick-btn.fab-opt-whatsapp {
background-color: #25d366;
}
.fab-opt-messenger .fab-opt-icon,
.fab-quick-btn.fab-opt-messenger {
background-color: #0084ff;
}
.fab-opt-phone .fab-opt-icon,
.fab-quick-btn.fab-opt-phone {
background-color: var(--color-gold-dark);
}
.fab-panel-quick {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px 6px 12px;
border-top: 1px solid rgba(59, 42, 32, 0.1);
background: #fffaf0;
}
.fab-panel-quick[hidden] {
display: none;
}
.fab-quick-label {
margin-right: auto;
color: var(--color-espresso-soft);
font-size: 0.74rem;
}
.fab-quick-btn {
width: 30px;
height: 30px;
text-decoration: none;
transition: transform 0.15s ease;
}
.fab-quick-btn:hover {
transform: scale(1.08);
}
.fab-quick-btn svg {
width: 16px;
height: 16px;
}
.fab-panel .msg-root {
border: 0;
border-radius: 0;
background: transparent;
}
.fab-panel .msg-root.is-compact .msg-thread {
height: clamp(140px, 24dvh, 210px);
padding: 10px 10px 4px;
background: transparent;
}
.fab-panel .msg-composer {
padding: 8px 10px 8px;
}
.fab-panel .msg-foot,
.fab-panel .msg-foot-hint {
display: none;
}
.fab-panel .msg-starters {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 6px;
scrollbar-width: none;
}
.fab-panel .msg-starters::-webkit-scrollbar {
display: none;
}
.fab-panel .msg-starter {
flex-shrink: 0;
white-space: nowrap;
font-size: 0.74rem;
padding: 5px 10px;
}
.fab-panel .msg-empty,
.fab-panel .msg-gate {
padding: 16px 12px;
}
.fab-panel .msg-empty-icon {
width: 38px;
height: 38px;
}
.fab-panel .msg-empty h3 {
font-size: 0.92rem;
}
.fab-panel .msg-empty p {
font-size: 0.78rem;
}
.fab-panel .msg-bubble {
font-size: 0.86rem;
padding: 7px 11px;
}
@media (max-width: 600px) {
.fab-panel {
width: min(308px, calc(100vw - 32px));
max-height: min(420px, calc(var(--fab-vh, 100vh) - 90px));
}
.fab-panel .msg-root.is-compact .msg-thread {
height: clamp(130px, 24dvh, 200px);
}
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel {
transition: none;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on {
animation: fab-panel-in 0.46s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-leaving {
animation: fab-panel-out 0.16s ease-in forwards;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-container.open .fab-main {
animation: fab-press 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .fab-panel-avatar {
animation: fab-pop 0.5s 0.12s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .fab-gate h3,
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .fab-gate p,
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .fab-gate-actions,
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .fab-or,
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .fab-loading,
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .msg-composer,
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .msg-empty,
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .fab-panel-quick {
animation: fab-rise 0.4s ease-out backwards;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .fab-gate h3 { animation-delay: 0.14s; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .fab-gate p { animation-delay: 0.19s; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .fab-gate-actions { animation-delay: 0.24s; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .fab-or { animation-delay: 0.3s; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .msg-empty { animation-delay: 0.16s; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .msg-composer { animation-delay: 0.2s; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .fab-panel-quick { animation-delay: 0.26s; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .msg {
animation: fab-rise 0.35s ease-out backwards;
animation-delay: 0.16s;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .fab-opt,
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .fab-quick-btn {
animation: fab-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .fab-opt:nth-child(1) { animation-delay: 0.34s; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .fab-opt:nth-child(2) { animation-delay: 0.41s; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .fab-opt:nth-child(3) { animation-delay: 0.48s; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .fab-quick-btn:nth-of-type(1) { animation-delay: 0.3s; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .fab-quick-btn:nth-of-type(2) { animation-delay: 0.37s; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .fab-panel.is-on .fab-quick-btn:nth-of-type(3) { animation-delay: 0.44s; }
@keyframes fab-panel-in {
0% {
opacity: 0;
transform: translateY(18px) scale(0.55);
}
55% {
opacity: 1;
transform: translateY(-4px) scale(1.035);
}
100% {
opacity: 1;
transform: none;
}
}
@keyframes fab-panel-out {
to {
opacity: 0;
transform: translateY(10px) scale(0.8);
}
}
@keyframes fab-press {
0% {
transform: scale(0.86);
}
60% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes fab-rise {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes fab-pop {
0% {
opacity: 0;
transform: scale(0.4);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.auth-shell {
display: flex;
flex-direction: column;
width: 100%;
max-width: 500px;
}
.auth-welcome {
display: none;
}
.auth-ambient-card .account-auth-tabs {
display: none;
}
.auth-seg[hidden],
.auth-guest[hidden],
.field-hint[hidden],
.pw-meter[hidden],
.forgot-choice[hidden],
.auth-success[hidden] {
display: none;
}
.auth-seg {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
padding: 4px;
margin: 0 0 20px;
border-radius: 999px;
background: rgba(253, 250, 240, 0.07);
border: 1px solid rgba(253, 250, 240, 0.12);
}
.auth-seg-thumb {
position: absolute;
top: 4px;
bottom: 4px;
left: 4px;
width: calc(50% - 4px);
border-radius: 999px;
background: linear-gradient(135deg, #e0ac3a, #c6921e);
box-shadow: 0 4px 14px rgba(198, 146, 30, 0.35);
transition: transform 0.38s cubic-bezier(0.34, 1.3, 0.5, 1);
}
.auth-ambient-card[data-mode='signup'] .auth-seg-thumb {
transform: translateX(100%);
}
.auth-seg button {
position: relative;
z-index: 1;
min-height: 42px;
padding: 8px;
border: 0;
background: none;
font: 600 14px/1 'Inter', sans-serif;
color: #c9c2b4;
cursor: pointer;
transition: color 0.25s ease;
}
.auth-seg button[aria-selected='true'] {
color: #14100a;
}
.auth-seg button:focus-visible {
outline: 2px solid #fdfaf0;
outline-offset: -3px;
border-radius: 999px;
}
.auth-mini-icons {
display: flex;
justify-content: center;
gap: 10px;
margin: 0 0 14px;
}
.auth-mini-icons span {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 14px;
background: rgba(224, 172, 58, 0.12);
border: 1px solid rgba(224, 172, 58, 0.25);
color: #e0ac3a;
}
.auth-mini-icons svg {
width: 20px;
height: 20px;
}
.auth-ambient-card[data-step='otp'] .auth-mini-icons,
.auth-ambient-card[data-step='reset'] .auth-mini-icons,
.auth-ambient-card[data-step='forgot'] .auth-mini-icons {
display: none;
}
.auth-ambient-card .form-group input {
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.auth-ambient-card .form-group input:focus {
background-color: rgba(253, 250, 240, 0.1);
}
.auth-ambient-card .input-icon-group .input-icon {
transition: color 0.2s ease;
}
.auth-ambient-card .input-icon-group:focus-within .input-icon,
.auth-ambient-card .input-icon-group.is-valid .input-icon {
color: #e0ac3a;
}
.field-tick {
position: absolute;
right: 14px;
top: 50%;
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(143, 209, 158, 0.18);
color: #8fd19e;
opacity: 0;
transform: translateY(-50%) scale(0.4);
pointer-events: none;
transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.input-icon-group.is-valid .field-tick {
opacity: 1;
transform: translateY(-50%) scale(1);
}
.input-icon-group.is-valid input[type='text'] {
padding-right: 44px;
}
.field-hint {
display: flex;
align-items: center;
gap: 6px;
margin: -6px 2px 14px;
font-size: 12.5px;
line-height: 1.4;
color: #b7afa0;
}
.field-hint.is-good {
color: #8fd19e;
}
.caps-hint {
color: #e0ac3a;
font-weight: 600;
}
.pw-meter {
display: flex;
align-items: center;
gap: 12px;
margin: -4px 2px 14px;
}
.pw-meter-bars {
flex: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.pw-meter-bars i {
display: block;
height: 5px;
border-radius: 99px;
background: rgba(253, 250, 240, 0.14);
transition: background-color 0.3s ease;
}
.pw-meter[data-level='1'] .pw-meter-bars i:nth-child(-n + 1) {
background: #e5705f;
}
.pw-meter[data-level='2'] .pw-meter-bars i:nth-child(-n + 2) {
background: #e0ac3a;
}
.pw-meter[data-level='3'] .pw-meter-bars i:nth-child(-n + 3) {
background: #b8d96b;
}
.pw-meter[data-level='4'] .pw-meter-bars i {
background: #6fcf8e;
}
.pw-meter-label {
min-width: 78px;
text-align: right;
font-size: 12.5px;
color: #c9c2b4;
}
.auth-fineprint,
.auth-guest {
margin: 14px 0 0;
text-align: center;
font-size: 12.5px;
line-height: 1.5;
color: #9c9587;
}
.auth-fineprint a,
.auth-guest a {
color: #e0ac3a;
text-decoration: underline;
text-underline-offset: 2px;
}
.auth-guest {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(253, 250, 240, 0.1);
}
.otp-boxes {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
margin: 4px 0 16px;
}
.otp-box {
width: 100%;
min-width: 0;
height: 58px;
padding: 0;
text-align: center;
font: 600 24px/1 'Inter', sans-serif;
color: #fdfaf0;
caret-color: #e0ac3a;
background: rgba(253, 250, 240, 0.06);
border: 1px solid rgba(253, 250, 240, 0.18);
border-radius: 12px;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.otp-box:focus {
outline: none;
border-color: #e0ac3a;
box-shadow: 0 0 0 3px rgba(224, 172, 58, 0.22);
transform: translateY(-2px);
background-color: rgba(253, 250, 240, 0.1);
}
.otp-box.filled {
border-color: rgba(224, 172, 58, 0.7);
}
.otp-boxes.is-error .otp-box {
border-color: #ff9a8b;
}
.otp-real-input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.otp-actions {
display: flex;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
margin-top: 10px;
}
.otp-actions .account-auth-link-btn {
margin: 0;
}
.otp-actions .account-auth-link-btn:disabled {
opacity: 0.6;
cursor: default;
text-decoration: none;
}
.forgot-choice-buttons {
display: grid;
gap: 10px;
margin: 10px 0 14px;
}
.forgot-choice-buttons .btn {
min-height: 50px;
}
.auth-success {
position: absolute;
inset: 0;
z-index: 6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 28px;
text-align: center;
background: radial-gradient(ellipse at 50% 38%, rgba(60, 44, 20, 0.97), rgba(20, 16, 10, 0.98));
overflow: hidden;
}
.auth-success-check {
color: #e0ac3a;
}
.auth-success-title {
margin: 6px 0 0;
font-family: 'Fraunces', serif;
font-size: 28px;
font-weight: 600;
color: #fdfaf0;
}
.auth-success-text {
margin: 0;
color: #c9c2b4;
font-size: 15px;
}
.auth-confetti {
position: absolute;
left: 50%;
top: 40%;
width: 0;
height: 0;
pointer-events: none;
}
.auth-confetti i {
position: absolute;
left: 0;
top: 0;
width: 8px;
height: 13px;
border-radius: 2px;
background: var(--c, #e0ac3a);
opacity: 0;
}
@media (min-width: 900px) {
.auth-shell {
flex-direction: row;
max-width: 980px;
border-radius: 26px;
overflow: hidden;
background: rgba(20, 16, 10, 0.55);
border: 1px solid rgba(198, 146, 30, 0.35);
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.auth-welcome {
position: relative;
display: flex;
flex: 0 0 400px;
flex-direction: column;
justify-content: center;
padding: 48px 44px;
overflow: hidden;
background: linear-gradient(165deg, rgba(198, 146, 30, 0.3) 0%, rgba(120, 80, 30, 0.18) 48%, rgba(20, 16, 10, 0.12) 100%);
border-right: 1px solid rgba(198, 146, 30, 0.25);
}
.auth-welcome-glow {
position: absolute;
top: -90px;
left: -90px;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(224, 172, 58, 0.35), transparent 70%);
pointer-events: none;
}
.auth-welcome > * {
position: relative;
}
.auth-welcome > .auth-welcome-glow {
position: absolute;
}
.auth-welcome-eyebrow {
margin: 0 0 14px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #e0ac3a;
}
.auth-welcome-title {
margin: 0 0 12px;
font-family: 'Fraunces', serif;
font-size: 34px;
line-height: 1.15;
font-weight: 600;
color: #fdfaf0;
}
.auth-welcome-text {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: #e6dfd0;
}
.auth-floaties {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin: 28px 0;
}
.auth-floaty {
display: grid;
place-items: center;
height: 66px;
border-radius: 18px;
background: rgba(253, 250, 240, 0.07);
border: 1px solid rgba(224, 172, 58, 0.28);
color: #e0ac3a;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
}
.auth-floaty svg {
width: 30px;
height: 30px;
}
.auth-perks {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 12px;
}
.auth-perks li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14.5px;
line-height: 1.45;
color: #e6dfd0;
}
.auth-perk-icon {
flex-shrink: 0;
display: grid;
place-items: center;
width: 22px;
height: 22px;
margin-top: 1px;
border-radius: 50%;
background: rgba(224, 172, 58, 0.2);
color: #e0ac3a;
}
.auth-shell .auth-ambient-card {
flex: 1;
min-width: 0;
max-width: none;
max-height: none;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 44px 52px;
}
.auth-mini-icons {
display: none;
}
.auth-shell .auth-ambient-heading,
.auth-shell .auth-ambient-subtext {
text-align: left;
}
.auth-shell .auth-ambient-subtext {
margin-bottom: 24px;
}
}
@media (max-width: 640px) {
.otp-box {
height: 52px;
font-size: 22px;
}
.auth-success-title {
font-size: 24px;
}
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .auth-shell {
animation: auth-shell-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .account-auth-panel:not([hidden]) {
animation: auth-panel-in 0.4s ease-out backwards;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .account-auth-panel:not([hidden]) form > :nth-child(1) { animation: auth-rise 0.45s 0.04s ease-out backwards; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .account-auth-panel:not([hidden]) form > :nth-child(2) { animation: auth-rise 0.45s 0.1s ease-out backwards; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .account-auth-panel:not([hidden]) form > :nth-child(3) { animation: auth-rise 0.45s 0.16s ease-out backwards; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .account-auth-panel:not([hidden]) form > :nth-child(4) { animation: auth-rise 0.45s 0.22s ease-out backwards; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .account-auth-panel:not([hidden]) form > :nth-child(5) { animation: auth-rise 0.45s 0.28s ease-out backwards; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .account-auth-panel:not([hidden]) form > :nth-child(6) { animation: auth-rise 0.45s 0.34s ease-out backwards; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .account-auth-panel:not([hidden]) form > :nth-child(7) { animation: auth-rise 0.45s 0.4s ease-out backwards; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .auth-ambient-heading.is-swap,
html.mm-motion:not(.mm-soft):not(.mm-lite) .auth-ambient-subtext.is-swap,
html.mm-motion:not(.mm-soft):not(.mm-lite) .auth-welcome-title.is-swap,
html.mm-motion:not(.mm-soft):not(.mm-lite) .auth-welcome-text.is-swap {
animation: auth-swap 0.38s ease-out backwards;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .auth-floaty-1 { animation: auth-float 5s ease-in-out infinite; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .auth-floaty-2 { animation: auth-float 5.6s -1.2s ease-in-out infinite; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .auth-floaty-3 { animation: auth-float 4.7s -2.4s ease-in-out infinite; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .auth-floaty-4 { animation: auth-float 5.3s -3.3s ease-in-out infinite; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .auth-welcome-glow {
animation: auth-drift 14s ease-in-out infinite alternate;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .auth-perks li:nth-child(1) { animation: auth-rise 0.5s 0.35s ease-out backwards; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .auth-perks li:nth-child(2) { animation: auth-rise 0.5s 0.45s ease-out backwards; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .auth-perks li:nth-child(3) { animation: auth-rise 0.5s 0.55s ease-out backwards; }
html.mm-motion:not(.mm-soft):not(.mm-lite) .auth-ambient-card.is-shaking,
html.mm-motion:not(.mm-soft):not(.mm-lite) .otp-boxes.is-error {
animation: auth-shake 0.45s ease-in-out;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .auth-success:not([hidden]) {
animation: auth-fade 0.3s ease-out backwards;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .auth-success-ring {
stroke-dasharray: 214;
stroke-dashoffset: 214;
animation: auth-draw 0.6s 0.1s ease-out forwards;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .auth-success-tick {
stroke-dasharray: 60;
stroke-dashoffset: 60;
animation: auth-draw 0.4s 0.55s ease-out forwards;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .auth-success-check {
animation: auth-pop 0.55s 0.05s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .auth-success-title {
animation: auth-rise 0.5s 0.5s ease-out backwards;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .auth-success-text {
animation: auth-rise 0.5s 0.62s ease-out backwards;
}
html.mm-motion:not(.mm-soft):not(.mm-lite) .auth-confetti i {
animation: auth-confetti 1.15s var(--d, 0s) cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}
@keyframes auth-shell-in {
from {
opacity: 0;
transform: translateY(18px) scale(0.98);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes auth-panel-in {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes auth-rise {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes auth-swap {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes auth-float {
0%,
100% {
transform: translateY(0) rotate(-2deg);
}
50% {
transform: translateY(-9px) rotate(2deg);
}
}
@keyframes auth-drift {
from {
transform: translate(0, 0) scale(1);
}
to {
transform: translate(60px, 50px) scale(1.2);
}
}
@keyframes auth-shake {
0%,
100% {
transform: translateX(0);
}
18% {
transform: translateX(-9px);
}
36% {
transform: translateX(8px);
}
54% {
transform: translateX(-6px);
}
72% {
transform: translateX(4px);
}
}
@keyframes auth-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes auth-draw {
to {
stroke-dashoffset: 0;
}
}
@keyframes auth-pop {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes auth-confetti {
0% {
opacity: 1;
transform: translate(0, 0) rotate(0deg) scale(0.6);
}
100% {
opacity: 0;
transform: translate(var(--x), calc(var(--y) + 70px)) rotate(var(--r)) scale(1);
}
}
@media (max-width: 640px) {
.auth-shell .auth-ambient-card {
padding: 22px 20px 20px;
}
.auth-seg {
margin-bottom: 14px;
}
.auth-seg button {
min-height: 40px;
}
.auth-mini-icons {
gap: 8px;
margin-bottom: 10px;
}
.auth-mini-icons span {
width: 32px;
height: 32px;
border-radius: 11px;
}
.auth-mini-icons svg {
width: 17px;
height: 17px;
}
.auth-shell .auth-ambient-heading {
font-size: 24px;
margin-bottom: 4px;
}
.auth-shell .auth-ambient-subtext {
font-size: 14px;
margin-bottom: 16px;
}
.auth-shell .auth-ambient-card .form-group {
margin-bottom: 12px;
}
.auth-shell .auth-ambient-card .form-group input {
height: 48px;
}
.auth-shell .auth-ambient-card .account-auth-submit {
height: 48px;
}
.auth-fineprint {
margin-top: 10px;
font-size: 12px;
}
.auth-guest {
margin-top: 12px;
padding-top: 12px;
font-size: 12px;
}
}
.product-combo {
margin: 16px 0 6px;
padding: 16px 16px 14px;
border: 1.5px solid var(--color-gold-light);
border-radius: 16px;
background: #fffaf0;
}
.product-combo-title {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin: 0 0 10px;
font-size: var(--fs-card-title);
font-weight: 800;
color: var(--color-espresso);
}
.product-combo-title span {
font-size: var(--fs-meta);
font-weight: 700;
color: var(--color-gold-dark);
}
.product-combo-list {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.product-combo-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px 8px 8px;
border: 1px solid var(--color-card-border);
border-radius: 12px;
background: #fff;
color: var(--color-espresso);
text-decoration: none;
}
.product-combo-item:hover {
border-color: var(--color-gold);
}
.product-combo-thumb {
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: 10px;
overflow: hidden;
background: #fff;
border: 1px solid var(--color-cream-soft);
}
.product-combo-img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.product-combo-name {
flex: 1;
min-width: 0;
font-size: var(--fs-body-sm);
font-weight: 600;
line-height: 1.35;
}
.product-combo-name small {
color: var(--color-espresso-soft);
font-weight: 500;
}
.product-combo-qty {
flex-shrink: 0;
padding: 3px 10px;
border-radius: 999px;
background: var(--color-cream-soft);
font-size: var(--fs-body-sm);
font-weight: 800;
}
.product-combo-saving {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 6px 14px;
margin: 12px 0 0;
font-size: var(--fs-body-sm);
color: var(--color-espresso-soft);
}
.product-combo-saving strong {
padding: 4px 12px;
border-radius: 999px;
background: #e5f5ea;
color: #1c7440;
}