/* ============================================================
   Shopping List Guide — shared.css
   Shared styles used across all pages (original design preserved)
============================================================ */
:root {
--iv: #FFF8F9;
--iv2: #FFF1F2;
--iv3: #FFE4E6;
--pl: #2A1620;
--pl2: #881337;
--pl3: #BE123C;
--ro: #E11D48;
--ro2: #FB7185;
--ro3: #FECDD3;
--bl: #FFE4E6;
--sa: #FDA4AF;
--am: #F43F5E;
--tx: #2A1620;
--tx2: #73535F;
--tx3: #AA919B;
--br: rgba(42, 22, 32, .10);
--br2: rgba(42, 22, 32, .06);
--gr: rgba(225, 29, 72, .22);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
html {
scroll-behavior: smooth;
scroll-padding-top: 90px
}
body {
font-family: 'DM Sans', sans-serif;
background: var(--iv);
color: var(--tx);
overflow-x: hidden;
line-height: 1.7
}
h1,
h2,
h3,
h4 {
font-family: 'Fraunces', serif;
line-height: 1.1
}
a {
text-decoration: none;
color: inherit;
transition: all .3s
}
button {
cursor: pointer;
font-family: 'DM Sans', sans-serif
}
img {
display: block;
max-width: 100%
}
::-webkit-scrollbar {
width: 4px
}
::-webkit-scrollbar-track {
background: var(--iv2)
}
::-webkit-scrollbar-thumb {
background: var(--ro);
border-radius: 4px
}
/* CURSOR */
#cdot,
#crng {
position: fixed;
pointer-events: none;
z-index: 99999;
transform: translate(-50%, -50%);
border-radius: 50%
}
#cdot {
width: 6px;
height: 6px;
background: var(--ro);
transition: left .05s, top .05s
}
#crng {
width: 32px;
height: 32px;
border: 1.5px solid var(--ro);
opacity: .5;
transition: width .25s, height .25s, left .12s, top .12s;
mix-blend-mode: multiply
}
#crng.big {
width: 56px;
height: 56px;
opacity: .2;
background: var(--bl)
}
/* LOADER */
#ld {
position: fixed;
inset: 0;
background: var(--pl);
z-index: 99998;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
transition: opacity .9s, visibility .9s
}
#ld.hide {
opacity: 0;
visibility: hidden
}
.ld-anim {
position: relative;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
animation: fdIn .8s ease .1s forwards
}
.ld-ring {
position: absolute;
border-radius: 50%;
border: 2px solid transparent
}
.ld-ring1 {
width: 100px;
height: 100px;
border-top-color: var(--ro);
border-right-color: var(--ro2);
animation: ldSpin 1.5s linear infinite
}
.ld-ring2 {
width: 76px;
height: 76px;
border-bottom-color: var(--am);
border-left-color: var(--sa);
animation: ldSpin 1.2s linear infinite reverse
}
.ld-ring3 {
width: 52px;
height: 52px;
border-top-color: var(--ro3);
animation: ldSpin .9s linear infinite
}
.ld-core {
width: 28px;
height: 28px;
background: var(--ro);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Fraunces', serif;
font-size: 1rem;
font-style: italic;
color: var(--iv);
animation: ldPulse 1.5s ease infinite
}
@keyframes ldSpin {
to {
transform: rotate(360deg)
}
}
@keyframes ldPulse {
0%,
100% {
transform: scale(1)
}
50% {
transform: scale(1.15)
}
}
.ld-brand {
font-family: 'Fraunces', serif;
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 100;
font-style: italic;
color: var(--iv);
letter-spacing: .05em;
opacity: 0;
animation: fdIn 1s ease .4s forwards, ldShimmer 3s linear infinite;
background: linear-gradient(90deg, var(--iv), var(--ro2), var(--iv));
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent
}
@keyframes ldShimmer {
to {
background-position: 200% center
}
}
.ld-sub {
font-size: .65rem;
letter-spacing: .35em;
text-transform: uppercase;
color: var(--ro2);
opacity: 0;
animation: fdIn 1s ease .8s forwards
}
.ld-bar {
width: 200px;
height: 2px;
background: rgba(255, 255, 255, .1);
overflow: hidden;
border-radius: 2px;
opacity: 0;
animation: fdIn .8s ease 1s forwards
}
.ld-fill {
height: 100%;
width: 0;
background: linear-gradient(90deg, var(--ro), var(--ro2), var(--am));
border-radius: 2px;
animation: ldf 1.8s ease .8s forwards
}
@keyframes fdIn {
to {
opacity: 1
}
}
@keyframes ldf {
to {
width: 100%
}
}
/* NAVBAR */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 0 6vw;
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(247, 243, 238, .92);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--br);
transition: all .5s
}
.nav.sc {
background: rgba(247, 243, 238, .98);
box-shadow: 0 2px 40px rgba(45, 27, 46, .06)
}
.nlogo {
font-family: 'Fraunces', serif;
font-size: 1.5rem;
font-weight: 300;
font-style: italic;
color: var(--pl);
letter-spacing: .05em
}
.nlogo span {
color: var(--ro)
}
.nlinks {
display: flex;
gap: 36px;
list-style: none
}
.nlinks a {
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--tx2);
font-weight: 500;
position: relative
}
.nlinks a::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 0;
height: 1px;
background: var(--ro);
transition: width .3s
}
.nlinks a:hover,
.nlinks a.act {
color: var(--pl)
}
.nlinks a:hover::after,
.nlinks a.act::after {
width: 100%
}
.nright {
display: flex;
align-items: center;
gap: 12px
}
.nbtn {
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--br);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
color: var(--tx2);
font-size: .9rem;
position: relative;
transition: all .3s
}
.nbtn:hover {
border-color: var(--ro);
color: var(--ro);
background: var(--bl)
}
.bdg {
position: absolute;
top: -5px;
right: -5px;
width: 17px;
height: 17px;
background: var(--ro);
color: #fff;
font-size: .58rem;
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center
}
.ham {
display: none;
flex-direction: column;
gap: 5px;
padding: 6px;
border: none;
background: none
}
.ham span {
display: block;
width: 20px;
height: 1.5px;
background: var(--pl)
}
/* MOBILE MENU */
.mobm {
position: fixed;
inset: 0;
background: var(--pl);
z-index: 999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 32px;
opacity: 0;
visibility: hidden;
transition: all .45s
}
.mobm.on {
opacity: 1;
visibility: visible
}
.mobm a {
font-family: 'Fraunces', serif;
font-size: 2.5rem;
color: rgba(247, 243, 238, .7);
font-weight: 100;
font-style: italic;
letter-spacing: .05em;
transition: color .3s
}
.mobm a:hover {
color: var(--ro2)
}
.mobcl {
position: absolute;
top: 28px;
right: 24px;
width: 42px;
height: 42px;
border: 1px solid rgba(247, 243, 238, .15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--iv);
font-size: .9rem;
background: none;
cursor: pointer
}
/* HERO (legacy styles preserved) */
.hero {
position: relative;
overflow: hidden;
background: var(--iv);
padding-top: 80px
}
.hero-decor1 {
position: absolute;
top: 10%;
right: -5%;
width: 500px;
height: 500px;
background: rgba(196, 99, 122, .08);
border-radius: 50%;
filter: blur(80px);
pointer-events: none
}
.hero-decor2 {
position: absolute;
bottom: 20%;
left: -5%;
width: 400px;
height: 400px;
background: rgba(200, 148, 74, .06);
border-radius: 50%;
filter: blur(70px);
pointer-events: none
}
.hero-bg-text {
position: absolute;
top: 55%;
left: -2%;
font-family: 'Fraunces', serif;
font-size: clamp(120px, 20vw, 240px);
font-weight: 100;
font-style: italic;
color: var(--iv2);
line-height: 1;
pointer-events: none;
user-select: none;
white-space: nowrap;
z-index: 0
}
.hero-main {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.15fr 1fr;
min-height: calc(100vh - 80px - 110px);
align-items: center;
padding: 60px 8vw 80px;
gap: 60px
}
.hero-left {
display: flex;
flex-direction: column;
gap: 24px
}
.hero-tag {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: .63rem;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--ro);
margin-bottom: 8px
}
.hero-tag::before {
content: '';
width: 36px;
height: 1px;
background: var(--ro)
}
.hero-h1 {
font-size: clamp(2.8rem, 5.5vw, 5.5rem);
font-weight: 100;
font-style: italic;
color: var(--pl);
line-height: 1.05;
letter-spacing: -.01em
}
.hero-h1 em {
font-style: normal;
font-weight: 300;
color: var(--ro)
}
.hero-desc {
font-size: .85rem;
color: var(--tx2);
line-height: 2;
max-width: 400px;
font-weight: 300
}
.hero-btns {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 8px
}
.bfill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 34px;
background: var(--ro);
color: #fff;
font-size: .68rem;
letter-spacing: .2em;
text-transform: uppercase;
font-weight: 600;
border: none;
border-radius: 2px;
transition: all .3s
}
.bfill:hover {
background: var(--ro2);
transform: translateY(-2px);
box-shadow: 0 10px 40px var(--gr);
color: #fff
}
.bline {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 34px;
background: transparent;
color: var(--pl);
font-size: .68rem;
letter-spacing: .2em;
text-transform: uppercase;
font-weight: 500;
border: 1px solid var(--br);
border-radius: 2px;
transition: all .3s
}
.bline:hover {
border-color: var(--ro);
color: var(--ro);
background: var(--bl);
transform: translateY(-2px)
}
.hero-right {
position: relative;
display: flex;
justify-content: center;
align-items: center
}
.hero-card {
position: relative;
width: 100%;
max-width: 360px;
background: #fff;
border: 1px solid var(--br2);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(45, 27, 46, .12);
transform: rotate(2deg);
transition: transform .4s
}
.hero-card:hover {
transform: rotate(0deg)
}
.hero-card-img {
position: relative;
height: 280px;
overflow: hidden;
background: var(--iv2)
}
.hero-card-img img {
width: 100%;
height: 100%;
object-fit: cover
}
.hero-card-badge {
position: absolute;
top: 14px;
left: 14px;
padding: 5px 14px;
background: var(--ro);
color: #fff;
font-size: .55rem;
letter-spacing: .2em;
text-transform: uppercase;
font-weight: 700;
border-radius: 2px;
z-index: 2
}
.hero-card-body {
padding: 22px 24px 26px
}
.hero-card-cat {
font-size: .58rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ro);
margin-bottom: 8px
}
.hero-card-name {
font-family: 'Fraunces', serif;
font-size: 1.15rem;
font-weight: 300;
color: var(--pl);
margin-bottom: 12px;
line-height: 1.3
}
.hero-card-info {
display: flex;
align-items: center;
justify-content: space-between
}
.hero-card-stars {
display: flex;
align-items: center;
gap: 4px;
color: var(--am);
font-size: .7rem
}
.hero-card-stars span {
color: var(--tx3);
font-size: .65rem;
margin-left: 4px
}
.hero-card-price {
font-family: 'Fraunces', serif;
font-size: 1.3rem;
font-style: italic;
color: var(--pl)
}
.hero-card-mini {
position: absolute;
bottom: -20px;
left: -20px;
background: var(--pl);
padding: 14px 20px;
border-radius: 4px;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 10px 30px rgba(45, 27, 46, .2)
}
.hero-card-mini i {
color: var(--ro2);
font-size: 1rem
}
.hero-card-mini-text {
font-size: .58rem;
letter-spacing: .15em;
text-transform: uppercase;
color: rgba(247, 243, 238, .6)
}
.hero-card-mini-val {
font-family: 'Fraunces', serif;
font-size: .9rem;
font-style: italic;
color: var(--iv)
}
.hero-strip {
position: relative;
z-index: 2;
background: var(--pl);
padding: 0 8vw;
height: 110px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
overflow-x: auto
}
.hero-strip-title {
font-family: 'Fraunces', serif;
font-size: 1rem;
font-style: italic;
color: var(--ro2);
white-space: nowrap
}
.hero-strip-icons {
display: flex;
gap: 32px;
align-items: center
}
.hero-strip-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
cursor: pointer;
transition: all .3s
}
.hero-strip-item i {
width: 38px;
height: 38px;
border: 1px solid rgba(247, 243, 238, .15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(247, 243, 238, .5);
font-size: .8rem;
transition: all .3s
}
.hero-strip-item span {
font-size: .55rem;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(247, 243, 238, .4)
}
.hero-strip-item:hover i {
border-color: var(--ro);
color: var(--ro2);
background: rgba(196, 99, 122, .1)
}
.hero-strip-item:hover span {
color: var(--ro2)
}
.hero-strip-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 26px;
background: var(--ro);
color: #fff;
font-size: .62rem;
letter-spacing: .2em;
text-transform: uppercase;
font-weight: 600;
border-radius: 2px;
white-space: nowrap;
transition: all .3s
}
.hero-strip-btn:hover {
background: var(--ro2);
transform: translateY(-2px);
color: #fff
}
/* TICKER */
.tkr {
background: var(--ro);
padding: 14px 0;
overflow: hidden
}
.tkt {
display: inline-flex;
gap: 48px;
animation: tkAn 22s linear infinite;
white-space: nowrap
}
.tki {
font-size: .65rem;
letter-spacing: .25em;
text-transform: uppercase;
color: rgba(255, 255, 255, .9);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 18px;
flex-shrink: 0
}
.tkd {
width: 4px;
height: 4px;
background: rgba(255, 255, 255, .5);
border-radius: 50%
}
@keyframes tkAn {
from {
transform: translateX(0)
}
to {
transform: translateX(-50%)
}
}
/* ABOUT (legacy styles preserved) */
.abt {
background: var(--iv);
padding: 130px 8vw;
position: relative;
overflow: hidden
}
.abt::before {
content: 'STORY';
position: absolute;
right: -60px;
top: 50%;
transform: translateY(-50%) rotate(90deg);
font-family: 'Fraunces', serif;
font-size: clamp(80px, 14vw, 160px);
font-weight: 100;
font-style: italic;
color: var(--iv2);
pointer-events: none;
line-height: 1
}
.agr {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
align-items: center
}
.abt-cards {
display: flex;
flex-direction: column;
gap: 16px
}
.abt-card {
display: flex;
gap: 18px;
padding: 28px;
background: #fff;
border: 1px solid var(--br2);
border-radius: 4px;
transition: all .4s;
position: relative;
overflow: hidden
}
.abt-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--ro);
transform: scaleY(0);
transform-origin: bottom;
transition: transform .4s
}
.abt-card:hover {
transform: translateX(8px);
border-color: var(--ro3);
box-shadow: 0 20px 60px rgba(45, 27, 46, .08)
}
.abt-card:hover::before {
transform: scaleY(1);
transform-origin: top
}
.abt-card-icon {
width: 52px;
height: 52px;
background: var(--bl);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--ro);
font-size: 1.1rem;
flex-shrink: 0;
transition: all .4s
}
.abt-card:hover .abt-card-icon {
background: var(--ro);
color: #fff
}
.abt-card-body {
flex: 1
}
.abt-card-title {
font-family: 'Fraunces', serif;
font-size: 1.05rem;
font-weight: 400;
color: var(--pl);
margin-bottom: 6px
}
.abt-card-desc {
font-size: .75rem;
color: var(--tx2);
line-height: 1.8;
font-weight: 300
}
.sey {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
font-size: .63rem;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--ro)
}
.sey::before {
content: '';
width: 24px;
height: 1px;
background: var(--ro)
}
.sh2 {
font-size: clamp(2.4rem, 4vw, 3.6rem);
font-weight: 300;
color: var(--pl);
margin-bottom: 24px
}
.sh2 em {
font-style: italic;
color: var(--ro)
}
.sp {
font-size: .85rem;
color: var(--tx2);
line-height: 2.1;
font-weight: 300;
margin-bottom: 18px
}
.vl {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 32px
}
.vi {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
border: 1px solid var(--br2);
background: var(--iv2);
border-radius: 2px;
transition: all .3s
}
.vi:hover {
border-color: var(--ro3);
background: var(--bl);
transform: translateX(8px)
}
.vic {
width: 36px;
height: 36px;
background: var(--ro);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: .8rem;
flex-shrink: 0
}
.vn {
font-size: .78rem;
font-weight: 600;
color: var(--pl);
letter-spacing: .05em
}
.vd {
font-size: .72rem;
color: var(--tx2)
}
/* STATS BAND */
.stbd {
background: var(--pl);
padding: 70px 8vw;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px
}
.stbx {
padding: 40px 24px;
text-align: center;
position: relative
}
.stbx::after {
content: '';
position: absolute;
right: 0;
top: 20%;
height: 60%;
width: 1px;
background: rgba(255, 255, 255, .07)
}
.stbx:last-child::after {
display: none
}
.stn {
font-family: 'Fraunces', serif;
font-size: 3rem;
font-weight: 100;
font-style: italic;
color: var(--ro2)
}
.stl {
font-size: .62rem;
letter-spacing: .25em;
text-transform: uppercase;
color: rgba(247, 243, 238, .4);
margin-top: 6px
}
/* PRODUCTS */
.prd {
background: var(--iv);
padding: 110px 8vw
}
.ptop {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 48px;
flex-wrap: wrap;
gap: 24px
}
.cr {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 10px
}
.cb {
padding: 9px 22px;
background: transparent;
border: 1px solid var(--br);
color: var(--tx2);
font-size: .63rem;
letter-spacing: .15em;
text-transform: uppercase;
font-weight: 500;
border-radius: 40px;
transition: all .3s
}
.cb.on {
background: var(--pl);
border-color: var(--pl);
color: var(--iv)
}
.cb:hover:not(.on) {
border-color: var(--ro);
color: var(--ro);
background: var(--bl)
}
.sr {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 40px
}
.sb2 {
padding: 7px 16px;
background: transparent;
border: 1px solid var(--br2);
color: var(--tx3);
font-size: .6rem;
letter-spacing: .12em;
text-transform: uppercase;
border-radius: 40px;
transition: all .3s
}
.sb2.on {
border-color: var(--ro);
color: var(--ro)
}
.sb2:hover:not(.on) {
border-color: var(--ro3);
color: var(--ro2)
}
.pg {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 20px
}
.pc {
background: #fff;
border: 1px solid var(--br2);
border-radius: 4px;
overflow: hidden;
position: relative;
transition: transform .4s cubic-bezier(.175, .885, .32, 1.275), box-shadow .4s, border-color .3s
}
.pc:hover {
transform: translateY(-8px);
box-shadow: 0 30px 80px rgba(45, 27, 46, .1);
border-color: var(--ro3)
}
.pci {
position: relative;
height: 350px;
overflow: hidden;
background: var(--iv2);
}
.pci img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s, filter .4s
}
.pc:hover .pci img {
transform: scale(1.07);
filter: brightness(.9)
}
.pbdg {
position: absolute;
top: 12px;
left: 12px;
padding: 4px 12px;
font-size: .57rem;
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 700;
border-radius: 2px;
z-index: 2
}
.pbdg.new {
background: var(--sa);
color: #fff
}
.pbdg.hot {
background: var(--ro);
color: #fff
}
.pbdg.sale {
background: var(--am);
color: #fff
}
.pov {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 12px;
gap: 8px;
opacity: 0;
transition: opacity .3s;
pointer-events: none
}
.pc:hover .pov {
opacity: 1
}
.pat {
width: 36px;
height: 36px;
background: rgba(247, 243, 238, .92);
backdrop-filter: blur(8px);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--tx2);
font-size: .8rem;
transition: all .25s;
transform: translateX(10px);
opacity: 0;
pointer-events: auto
}
.pc:hover .pat {
transform: translateX(0);
opacity: 1
}
.pc:hover .pat:nth-child(2) {
transition-delay: .06s
}
.pat:hover {
background: var(--ro);
color: #fff
}
.pat.wd {
background: var(--bl);
color: var(--ro)
}
.pcb {
padding: 18px 20px 22px
}
.pcc {
font-size: .58rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ro);
margin-bottom: 7px
}
.pcn {
font-family: 'Fraunces', serif;
font-size: 1rem;
font-weight: 300;
color: var(--pl);
margin-bottom: 10px;
line-height: 1.3;
height: 42px;
overflow: hidden
}
.pcn a {
color: inherit
}
.pcn a:hover {
color: var(--ro)
}
.pcl {
display: block;
width: 100%;
height: 100%
}
.pcr {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px
}
.pcp-row {
display: flex;
align-items: center;
gap: 8px
}
.pcmp {
font-size: .75rem;
color: var(--tx3);
text-decoration: line-through;
font-family: 'DM Sans', sans-serif
}
.pcp {
font-family: 'Fraunces', serif;
font-size: 1.2rem;
font-weight: 400;
font-style: italic;
color: var(--pl)
}
.pcs {
display: flex;
align-items: center;
gap: 2px;
color: var(--am);
font-size: .58rem
}
.pcs span {
color: var(--tx3);
font-family: 'DM Sans', sans-serif;
font-size: .6rem;
margin-left: 3px
}
.padd {
width: 100%;
padding: 11px;
background: transparent;
border: 1px solid var(--br);
color: var(--tx2);
font-size: .62rem;
letter-spacing: .15em;
text-transform: uppercase;
font-weight: 500;
border-radius: 2px;
transition: all .3s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px
}
.padd:hover {
background: var(--pl);
border-color: var(--pl);
color: var(--iv)
}
.padd.added {
background: var(--sa);
border-color: var(--sa);
color: #fff
}
/* WHY */
.why {
background: var(--pl2);
padding: 120px 8vw
}
.wyt {
text-align: center;
margin-bottom: 72px
}
.wyg {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(255, 255, 255, .04)
}
.wyc {
background: var(--pl2);
padding: 48px 36px;
position: relative;
transition: background .4s;
overflow: hidden
}
.wyc::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(to right, var(--ro), transparent);
transform: scaleX(0);
transform-origin: left;
transition: transform .4s
}
.wyc:hover {
background: var(--pl3)
}
.wyc:hover::before {
transform: scaleX(1)
}
.wyn {
font-family: 'Fraunces', serif;
font-size: 3.5rem;
font-weight: 100;
font-style: italic;
color: rgba(255, 255, 255, .06);
position: absolute;
top: 16px;
right: 24px;
line-height: 1
}
.wyi {
width: 52px;
height: 52px;
border: 1px solid rgba(196, 99, 122, .3);
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
color: var(--ro2);
font-size: 1.1rem;
margin-bottom: 22px;
transition: all .4s
}
.wyc:hover .wyi {
background: var(--ro);
border-color: var(--ro);
color: #fff
}
.wytt {
font-family: 'Fraunces', serif;
font-size: 1.2rem;
font-weight: 300;
color: var(--iv);
margin-bottom: 12px
}
.wyd {
font-size: .78rem;
color: rgba(247, 243, 238, .45);
line-height: 2;
font-weight: 300
}
/* FAQ */
.faq {
background: var(--iv);
padding: 120px 8vw
}
.faqg {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 100px
}
.faql {
position: sticky;
top: 120px
}
.faqd {
font-family: 'Fraunces', serif;
font-size: 8rem;
font-weight: 100;
font-style: italic;
color: var(--iv2);
line-height: 1;
margin-bottom: 16px
}
.faqit {
display: flex;
flex-direction: column
}
.faqitem {
border-bottom: 1px solid var(--br2)
}
.faqq {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 0;
cursor: pointer;
color: var(--pl);
font-size: .88rem;
font-weight: 500;
transition: color .3s;
gap: 16px
}
.faqq:hover {
color: var(--ro)
}
.faqico {
width: 28px;
height: 28px;
border: 1px solid var(--br);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--ro);
font-size: .65rem;
flex-shrink: 0;
transition: all .3s
}
.faqitem.open .faqico {
background: var(--ro);
border-color: var(--ro);
color: #fff;
transform: rotate(45deg)
}
.faqa {
max-height: 0;
overflow: hidden;
transition: max-height .45s ease
}
.faqitem.open .faqa {
max-height: 300px
}
.faqai {
font-size: .8rem;
color: var(--tx2);
line-height: 2.1;
padding-bottom: 20px;
font-weight: 300
}
/* NEWSLETTER */
.nl {
background: var(--pl);
padding: 120px 8vw;
position: relative;
overflow: hidden
}
.nl.nlpage {
padding-top: 170px
}
.nlo1 {
position: absolute;
width: 500px;
height: 500px;
top: -150px;
right: -100px;
background: rgba(196, 99, 122, .15);
border-radius: 50%;
filter: blur(80px);
pointer-events: none
}
.nlo2 {
position: absolute;
width: 300px;
height: 300px;
bottom: -100px;
left: -80px;
background: rgba(200, 148, 74, .08);
border-radius: 50%;
filter: blur(60px);
pointer-events: none
}
.nli {
position: relative;
z-index: 2
}
.nlg {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 100px;
align-items: center
}
.fg {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px
}
.fgf {
grid-column: 1/-1
}
.fl {
display: flex;
flex-direction: column;
gap: 8px
}
.fl label {
font-size: .6rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ro2)
}
.fl input,
.fl select,
.fl textarea {
background: rgba(247, 243, 238, .06);
border: 1px solid rgba(247, 243, 238, .12);
color: var(--iv);
padding: 13px 16px;
font-family: 'DM Sans', sans-serif;
font-size: .82rem;
outline: none;
transition: border-color .3s;
border-radius: 2px
}
.fl input::placeholder,
.fl textarea::placeholder {
color: rgba(247, 243, 238, .25)
}
.fl input:focus,
.fl select:focus,
.fl textarea:focus {
border-color: var(--ro)
}
.fl select option {
background: var(--pl2);
color: var(--iv)
}
.fl textarea {
resize: vertical;
min-height: 90px
}
.ckw {
display: flex;
gap: 12px;
align-items: flex-start;
cursor: pointer
}
.ckw input {
appearance: none;
width: 16px;
height: 16px;
border: 1px solid rgba(247, 243, 238, .2);
background: transparent;
flex-shrink: 0;
margin-top: 3px;
position: relative;
cursor: pointer;
border-radius: 2px;
transition: all .3s
}
.ckw input:checked {
background: var(--ro);
border-color: var(--ro)
}
.ckw input:checked::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: .6rem;
color: #fff;
font-weight: 700
}
.ckw span {
font-size: .7rem;
color: rgba(247, 243, 238, .45);
line-height: 1.7
}
.nlbs {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 6px
}
.brose {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: var(--ro);
color: #fff;
font-size: .65rem;
letter-spacing: .2em;
text-transform: uppercase;
font-weight: 600;
border: none;
border-radius: 2px;
transition: all .3s
}
.brose:hover {
background: var(--ro2);
transform: translateY(-2px)
}
.bunsub {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 28px;
background: transparent;
color: rgba(247, 243, 238, .5);
font-size: .65rem;
letter-spacing: .2em;
text-transform: uppercase;
font-weight: 500;
border: 1px solid rgba(247, 243, 238, .15);
border-radius: 2px;
transition: all .3s
}
.bunsub:hover {
border-color: rgba(247, 243, 238, .3);
color: var(--iv)
}
/* CONTACT */
.ct {
background: var(--iv2);
padding: 120px 8vw
}
.ct.ctpage {
padding-top: 170px
}
.ctg {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 60px
}
.ctfw {
background: #fff;
border: 1px solid var(--br2);
padding: 50px;
border-radius: 4px;
box-shadow: 0 10px 60px rgba(45, 27, 46, .06)
}
.f2c {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 14px
}
.f1c {
margin-bottom: 14px
}
.cfl label {
font-size: .6rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ro);
display: block;
margin-bottom: 8px
}
.cfl input,
.cfl textarea {
width: 100%;
background: var(--iv);
border: 1px solid var(--br);
color: var(--pl);
padding: 12px 15px;
font-family: 'DM Sans', sans-serif;
font-size: .82rem;
outline: none;
transition: border-color .3s;
border-radius: 2px
}
.cfl input::placeholder,
.cfl textarea::placeholder {
color: var(--tx3)
}
.cfl input:focus,
.cfl textarea:focus {
border-color: var(--ro)
}
.cfl textarea {
resize: vertical;
min-height: 120px
}
.ctif {
display: flex;
flex-direction: column;
gap: 0
}
.cith {
margin-bottom: 36px
}
.ciits {
display: flex;
flex-direction: column;
gap: 4px
}
.ciit {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 20px 22px;
border: 1px solid var(--br2);
background: var(--iv);
border-radius: 2px;
transition: all .3s
}
.ciit:hover {
border-color: var(--ro3);
background: var(--bl)
}
.ciic {
width: 40px;
height: 40px;
background: var(--bl);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--ro);
font-size: .85rem;
flex-shrink: 0;
transition: all .3s
}
.ciit:hover .ciic {
background: var(--ro);
color: #fff
}
.cil {
font-size: .58rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ro);
margin-bottom: 4px
}
.civ {
font-size: .82rem;
color: var(--pl);
font-weight: 500;
line-height: 1.5
}
.sos {
display: flex;
gap: 10px;
margin-top: 28px
}
.soc {
width: 38px;
height: 38px;
border: 1px solid var(--br);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--tx2);
font-size: .85rem;
transition: all .3s
}
.soc:hover {
border-color: var(--ro);
color: var(--ro);
background: var(--bl);
transform: translateY(-3px)
}
/* FOOTER */
.ft {
background: var(--pl);
padding: 70px 8vw 28px;
position: relative;
overflow: hidden
}
.ft-bg {
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
font-family: 'Fraunces', serif;
font-size: clamp(100px, 18vw, 200px);
font-weight: 100;
font-style: italic;
color: rgba(255, 255, 255, .025);
line-height: 1;
pointer-events: none;
user-select: none;
white-space: nowrap
}
.ft-inner {
position: relative;
z-index: 2
}
.ft-top {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 36px;
border-bottom: 1px solid rgba(247, 243, 238, .06);
gap: 40px;
flex-wrap: wrap
}
.ft-brand-block {
display: flex;
flex-direction: column;
gap: 6px
}
.ft-logo {
font-family: 'Fraunces', serif;
font-size: 2rem;
font-weight: 300;
font-style: italic;
color: var(--iv);
letter-spacing: .05em
}
.ft-logo span {
color: var(--ro2)
}
.ft-tag {
font-size: .65rem;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(247, 243, 238, .35)
}
.ft-social {
display: flex;
gap: 10px
}
.ft-social a {
width: 40px;
height: 40px;
border: 1px solid rgba(247, 243, 238, .1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(247, 243, 238, .4);
font-size: .85rem;
transition: all .3s
}
.ft-social a:hover {
border-color: var(--ro);
color: var(--ro2);
background: rgba(196, 99, 122, .1)
}
.ft-mid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 60px;
padding: 40px 0;
border-bottom: 1px solid rgba(247, 243, 238, .06)
}
.ft-desc {
font-size: .8rem;
color: rgba(247, 243, 238, .4);
line-height: 2;
font-weight: 300;
max-width: 420px
}
.ft-col-title {
font-size: .6rem;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--ro2);
margin-bottom: 18px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(247, 243, 238, .06)
}
.ft-col-links {
display: flex;
flex-direction: column;
gap: 10px
}
.ft-col-links a {
font-size: .76rem;
color: rgba(247, 243, 238, .4);
transition: color .3s
}
.ft-col-links a:hover {
color: var(--iv)
}
.ft-bottom {
padding-top: 24px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px
}
.ft-copy {
font-size: .65rem;
color: rgba(247, 243, 238, .25);
letter-spacing: .08em
}
.ft-cod {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 18px;
background: rgba(196, 99, 122, .1);
border: 1px solid rgba(196, 99, 122, .2);
border-radius: 2px;
font-size: .6rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ro2);
font-weight: 600
}
.ft-cod i {
font-size: .8rem
}
/* CART / WISH DRAWER */
.ov {
position: fixed;
inset: 0;
background: rgba(45, 27, 46, .6);
backdrop-filter: blur(4px);
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: all .4s
}
.ov.on {
opacity: 1;
visibility: visible
}
.dr {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 420px;
background: var(--iv);
z-index: 2001;
box-shadow: -20px 0 80px rgba(45, 27, 46, .15);
transform: translateX(100%);
transition: transform .5s cubic-bezier(.77, 0, .18, 1);
display: flex;
flex-direction: column;
border-left: 1px solid var(--br)
}
.dr.on {
transform: translateX(0)
}
.drh {
padding: 26px 28px 22px;
border-bottom: 1px solid var(--br2);
display: flex;
align-items: center;
justify-content: space-between
}
.drt {
font-family: 'Fraunces', serif;
font-size: 1.4rem;
font-weight: 300;
font-style: italic;
color: var(--pl)
}
.drc {
width: 34px;
height: 34px;
border: 1px solid var(--br);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--tx2);
font-size: .8rem;
background: none;
transition: all .3s
}
.drc:hover {
border-color: var(--ro);
color: var(--ro);
background: var(--bl)
}
.drb {
flex: 1;
overflow-y: auto;
padding: 20px 28px
}
.drem {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 14px;
color: var(--tx3)
}
.drem i {
font-size: 2.5rem;
color: var(--ro3)
}
.drem p {
font-size: .72rem;
letter-spacing: .15em;
text-transform: uppercase
}
.drf {
padding: 20px 28px;
border-top: 1px solid var(--br2)
}
.drtl {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px
}
.dtll {
font-size: .65rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--tx2)
}
.dtlr {
font-family: 'Fraunces', serif;
font-size: 1.5rem;
font-style: italic;
color: var(--pl)
}
.ci {
display: flex;
gap: 14px;
padding: 18px 0;
border-bottom: 1px solid var(--br2)
}
.cith2 {
width: 70px;
height: 70px;
object-fit: cover;
flex-shrink: 0;
background: var(--iv2);
border-radius: 2px
}
.cii {
flex: 1
}
.cinm {
font-size: .82rem;
color: var(--pl);
font-weight: 500;
margin-bottom: 4px;
line-height: 1.4
}
.cipr {
font-family: 'Fraunces', serif;
font-size: 1rem;
font-style: italic;
color: var(--ro)
}
.ciqr {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px
}
.qb {
width: 26px;
height: 26px;
border: 1px solid var(--br);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: .6rem;
color: var(--tx2);
background: none;
transition: all .25s
}
.qb:hover {
border-color: var(--ro);
color: var(--ro)
}
.qn {
font-size: .82rem;
color: var(--pl);
min-width: 20px;
text-align: center
}
.cidl {
background: none;
border: none;
color: var(--tx3);
font-size: .85rem;
margin-left: auto;
cursor: pointer;
transition: color .25s
}
.cidl:hover {
color: var(--ro)
}
.wi {
display: flex;
gap: 14px;
padding: 16px 0;
border-bottom: 1px solid var(--br2);
align-items: center
}
.with2 {
width: 56px;
height: 56px;
object-fit: cover;
flex-shrink: 0;
background: var(--iv2);
border-radius: 2px
}
.wii {
flex: 1
}
.winm {
font-size: .8rem;
color: var(--pl);
font-weight: 500;
margin-bottom: 4px
}
.wipr {
font-family: 'Fraunces', serif;
font-size: .95rem;
font-style: italic;
color: var(--ro)
}
.wia {
display: flex;
gap: 8px
}
.wiad {
padding: 7px 13px;
border: 1px solid var(--br);
color: var(--tx2);
font-size: .58rem;
letter-spacing: .12em;
text-transform: uppercase;
background: none;
border-radius: 2px;
transition: all .25s
}
.wiad:hover {
background: var(--pl);
border-color: var(--pl);
color: var(--iv)
}
/* QUICK VIEW */
.qvo {
position: fixed;
inset: 0;
background: rgba(45, 27, 46, .85);
backdrop-filter: blur(6px);
z-index: 3000;
opacity: 0;
visibility: hidden;
transition: all .4s;
display: flex;
align-items: center;
justify-content: center;
padding: 20px
}
.qvo.on {
opacity: 1;
visibility: visible
}
.qvb {
background: var(--iv);
width: 100%;
max-width: 820px;
max-height: 90vh;
overflow-y: auto;
display: grid;
grid-template-columns: 1fr 1fr;
position: relative;
transform: scale(.94);
transition: transform .4s;
border-radius: 4px;
overflow: hidden
}
.qvo.on .qvb {
transform: scale(1)
}
.qvis {
position: relative;
min-height: 480px
}
.qvis img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
inset: 0
}
.qvx {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
background: rgba(247, 243, 238, .9);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: .8rem;
color: var(--pl);
cursor: pointer;
z-index: 5;
transition: all .3s
}
.qvx:hover {
background: var(--ro);
color: #fff
}
.qvin {
padding: 44px 36px;
display: flex;
flex-direction: column;
gap: 16px
}
.qvc {
font-size: .58rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ro)
}
.qvn {
font-family: 'Fraunces', serif;
font-size: 1.7rem;
font-weight: 300;
color: var(--pl);
line-height: 1.2
}
.qvp {
font-family: 'Fraunces', serif;
font-size: 2rem;
font-style: italic;
color: var(--pl)
}
.qvst {
display: flex;
align-items: center;
gap: 3px;
color: var(--am);
font-size: .7rem
}
.qvdsc {
font-size: .78rem;
color: var(--tx2);
line-height: 2;
font-weight: 300
}
.qvdiv {
height: 1px;
background: var(--br2)
}
.qvac {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 4px
}
.bqv {
padding: 14px;
font-size: .63rem;
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 600;
border-radius: 2px;
transition: all .3s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px
}
.bqv.pr {
background: var(--pl);
color: var(--iv);
border: none
}
.bqv.pr:hover {
background: var(--pl3)
}
.bqv.ol {
background: transparent;
border: 1px solid var(--br);
color: var(--tx2)
}
.bqv.ol:hover,
.bqv.ol.wld {
border-color: var(--ro);
color: var(--ro);
background: var(--bl)
}
/* CHECKOUT (modal styles preserved — reused on checkout page) */
.coo {
position: fixed;
inset: 0;
background: rgba(45, 27, 46, .88);
backdrop-filter: blur(8px);
z-index: 4000;
opacity: 0;
visibility: hidden;
transition: all .4s;
display: flex;
align-items: center;
justify-content: center;
padding: 20px
}
.coo.on {
opacity: 1;
visibility: visible
}
.cob {
background: var(--iv);
width: 100%;
max-width: 580px;
max-height: 92vh;
overflow-y: auto;
border-radius: 4px;
transform: translateY(20px);
transition: transform .4s
}
.coo.on .cob {
transform: translateY(0)
}
.coh {
background: var(--pl);
padding: 32px 36px 28px;
display: flex;
align-items: center;
justify-content: space-between
}
.cot2 {
font-family: 'Fraunces', serif;
font-size: 1.6rem;
font-weight: 300;
font-style: italic;
color: var(--iv)
}
.cox {
width: 32px;
height: 32px;
border: 1px solid rgba(247, 243, 238, .15);
background: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(247, 243, 238, .6);
font-size: .8rem;
cursor: pointer;
transition: all .3s
}
.cox:hover {
border-color: var(--ro);
color: var(--ro2)
}
.cobdy {
padding: 36px
}
.cor {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 14px
}
.cof label {
font-size: .58rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ro);
display: block;
margin-bottom: 8px
}
.cof input {
width: 100%;
background: var(--iv2);
border: 1px solid var(--br);
color: var(--pl);
padding: 12px 15px;
font-family: 'DM Sans', sans-serif;
font-size: .82rem;
outline: none;
transition: border-color .3s;
border-radius: 2px
}
.cof input:focus {
border-color: var(--ro)
}
.copay {
display: flex;
align-items: center;
gap: 14px;
padding: 16px;
background: var(--bl);
border: 1px solid var(--ro3);
border-radius: 2px;
margin-bottom: 16px
}
.copay i {
font-size: 1.2rem;
color: var(--ro)
}
.copt {
font-size: .8rem;
font-weight: 600;
color: var(--pl)
}
.cops {
font-size: .68rem;
color: var(--tx2)
}
.cotb {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: var(--iv2);
border: 1px solid var(--br2);
margin-bottom: 20px;
border-radius: 2px
}
.cotb span:first-child {
font-size: .65rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--tx2)
}
.cotb span:last-child {
font-family: 'Fraunces', serif;
font-size: 1.5rem;
font-style: italic;
color: var(--pl)
}
/* POLICY CONTENT (used on legal pages) */
.pmpt {
display: flex;
gap: 14px;
padding: 16px 0;
border-bottom: 1px solid var(--br2)
}
.pmn {
width: 24px;
height: 24px;
background: var(--ro);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: .55rem;
color: #fff;
font-weight: 700;
flex-shrink: 0;
margin-top: 2px
}
.pmh2 {
font-family: 'Fraunces', serif;
font-size: .88rem;
font-weight: 400;
color: var(--pl);
margin-bottom: 4px;
letter-spacing: .02em
}
.pmd {
font-size: .75rem;
color: var(--tx2);
line-height: 1.85;
font-weight: 300
}
/* UNSUBSCRIBE (modal styles preserved — reused on unsubscribe page) */
.ush {
background: var(--pl2);
padding: 26px 30px;
display: flex;
align-items: center;
justify-content: space-between
}
.usti {
font-family: 'Fraunces', serif;
font-size: 1.3rem;
font-weight: 300;
font-style: italic;
color: var(--iv)
}
.usbdy {
padding: 28px 30px 32px;
display: flex;
flex-direction: column;
gap: 16px
}
.usd {
font-size: .78rem;
color: var(--tx2);
line-height: 1.8;
font-weight: 300
}
.ucfl label {
font-size: .6rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ro);
display: block;
margin-bottom: 8px
}
.ucfl input {
width: 100%;
background: var(--iv2);
border: 1px solid var(--br);
color: var(--pl);
padding: 12px 15px;
font-family: 'DM Sans', sans-serif;
font-size: .82rem;
outline: none;
transition: border-color .3s;
border-radius: 2px
}
.ucfl input:focus {
border-color: var(--ro)
}
/* TOAST */
.tst {
position: fixed;
top: 92px;
right: 24px;
z-index: 9999;
background: #fff;
border: 1px solid var(--br2);
border-left: 3px solid var(--ro);
padding: 16px 20px;
display: flex;
align-items: flex-start;
gap: 13px;
box-shadow: 0 20px 60px rgba(45, 27, 46, .12);
max-width: 320px;
border-radius: 4px;
animation: tstIn .4s cubic-bezier(.16, 1, .3, 1)
}
@keyframes tstIn {
from {
transform: translateX(110%)
}
to {
transform: translateX(0)
}
}
.tst i {
color: var(--ro);
margin-top: 2px
}
.ttit {
font-size: .78rem;
font-weight: 600;
color: var(--pl);
margin-bottom: 2px
}
.tsub {
font-size: .7rem;
color: var(--tx2);
line-height: 1.5
}
/* CONFETTI */
#cnf {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 10000
}
/* SCROLL ANIM */
.rv {
opacity: 0;
transform: translateY(32px);
transition: opacity .8s ease, transform .8s ease
}
.rv.vis {
opacity: 1;
transform: translateY(0)
}
.rv.d1 {
transition-delay: .1s
}
.rv.d2 {
transition-delay: .2s
}
.rv.d3 {
transition-delay: .3s
}
.rv.d4 {
transition-delay: .4s
}
/* ============================================================
   CINEMATIC HERO (index)
============================================================ */
.v2-hero {
position: relative;
width: 100%;
min-height: 95vh;
display: flex;
align-items: flex-end;
justify-content: flex-start;
padding: 40px 8vw;
background-color: #3A1F12;
overflow: hidden;
font-family: 'DM Sans', sans-serif;
}
.v2-hero-bg {
position: absolute;
inset: 0;
z-index: 1;
}
.v2-hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1.05);
animation: slowZoom 20s infinite alternate alternate;
}
.v2-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(17, 35, 20, 0.8) 0%, rgba(17, 35, 20, 0.2) 100%);
z-index: 2;
}
@keyframes slowZoom {
0% { transform: scale(1); }
100% { transform: scale(1.1); }
}
.v2-hero-content {
position: relative;
z-index: 3;
background: rgba(255, 249, 244, 0.95);
backdrop-filter: blur(10px);
padding: 60px 50px;
border-radius: 2px;
max-width: 650px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
border-left: 4px solid #06B6D4;
margin-bottom: 20px;
}
.v2-hero-tag {
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: #06B6D4;
font-weight: 600;
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.v2-hero-tag::before {
content: '';
width: 30px;
height: 1px;
background-color: #06B6D4;
}
.v2-hero-title {
font-family: 'Fraunces', serif;
font-size: clamp(3rem, 4.5vw, 4.5rem);
font-weight: 300;
color: #3A1F12;
line-height: 1.1;
margin-bottom: 20px;
}
.v2-hero-title em {
font-style: italic;
color: #06B6D4;
}
.v2-hero-desc {
font-size: 1rem;
color: #06B6D4;
line-height: 1.8;
margin-bottom: 35px;
font-weight: 300;
}
.v2-hero-actions {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.v2-btn-solid {
background: #3A1F12;
color: #FFF9F4;
padding: 16px 32px;
font-size: 0.8rem;
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 500;
border: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
}
.v2-btn-solid:hover {
background: #06B6D4;
color: #fff;
}
.v2-btn-outline {
background: transparent;
color: #3A1F12;
padding: 14px 32px;
font-size: 0.8rem;
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 600;
border: 1px solid #3A1F12;
transition: all 0.3s ease;
}
.v2-btn-outline:hover {
background: #FFF1E6;
border-color: #06B6D4;
color: #06B6D4;
}
/* ============================================================
   OVERLAPPING ABOUT (about page)
============================================================ */
.v2-about {
background-color: #FFF1E6;
padding: 140px 8vw;
font-family: 'DM Sans', sans-serif;
}
.v2-about-container {
display: flex;
align-items: center;
max-width: 1400px;
margin: 0 auto 100px auto;
}
.v2-about-img-wrap {
flex: 0 0 55%;
height: 600px;
position: relative;
z-index: 1;
}
.v2-about-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
box-shadow: 0 20px 50px rgba(58, 31, 18, 0.1);
}
.v2-about-text-box {
flex: 1;
background-color: #FFF9F4;
padding: 70px 60px;
margin-left: -12%;
z-index: 2;
box-shadow: 0 25px 60px rgba(58, 31, 18, 0.08);
border: 1px solid rgba(58, 31, 18, 0.03);
border-top: 4px solid #06B6D4;
}
.v2-about-tag {
font-size: 0.7rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: #06B6D4;
margin-bottom: 20px;
font-weight: 600;
}
.v2-about-title {
font-family: 'Fraunces', serif;
font-size: clamp(2.5rem, 3.5vw, 3.5rem);
font-weight: 300;
color: #3A1F12;
line-height: 1.15;
margin-bottom: 30px;
}
.v2-about-title em {
font-style: italic;
color: #06B6D4;
}
.v2-about-desc {
font-size: 1rem;
color: #7C5A46;
line-height: 1.8;
margin-bottom: 20px;
font-weight: 300;
}
.v2-feature-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 1400px;
margin: 0 auto;
border-top: 1px solid rgba(58, 31, 18, 0.1);
padding-top: 60px;
}
.v2-feat-col {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.v2-feat-icon {
width: 50px;
height: 50px;
background-color: #FFEDD5;
color: #06B6D4;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
border-radius: 50%;
margin-bottom: 20px;
transition: all 0.3s;
}
.v2-feat-col:hover .v2-feat-icon {
background-color: #06B6D4;
color: #fff;
transform: translateY(-5px);
}
.v2-feat-title {
font-family: 'Fraunces', serif;
font-size: 1.3rem;
color: #3A1F12;
font-weight: 400;
margin-bottom: 12px;
}
.v2-feat-desc {
font-size: 0.9rem;
color: #7C5A46;
line-height: 1.7;
font-weight: 300;
}
/* ============================================================
   MULTI-PAGE ADDITIONS (page banners, PDP, checkout, wishlist,
   legal, unsubscribe, search/sort) — consistent with the
   existing design system only
============================================================ */
.pghead {
position: relative;
padding: 150px 8vw 70px;
background: var(--iv2);
text-align: center;
overflow: hidden
}
.pghead::before {
content: attr(data-word);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Fraunces', serif;
font-size: clamp(80px, 15vw, 190px);
font-weight: 100;
font-style: italic;
color: rgba(225, 29, 72, .045);
white-space: nowrap;
pointer-events: none;
line-height: 1
}
.pgh-in {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px
}
.pghead .sey {
margin-bottom: 0
}
.pgh-t {
font-size: clamp(2.2rem, 4vw, 3.4rem);
font-weight: 300;
color: var(--pl)
}
.pgh-t em {
font-style: italic;
color: var(--ro)
}
.pgh-d {
font-size: .82rem;
color: var(--tx2);
max-width: 560px;
line-height: 1.9;
font-weight: 300
}
/* Search + sort toolbar */
.ptools {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 26px
}
.srchw {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid var(--br);
border-radius: 40px;
padding: 10px 20px;
flex: 1;
min-width: 220px;
max-width: 440px;
transition: border-color .3s, box-shadow .3s
}
.srchw:focus-within {
border-color: var(--ro);
box-shadow: 0 6px 24px var(--gr)
}
.srchw i {
color: var(--ro);
font-size: .8rem
}
.srchw input {
border: none;
outline: none;
background: transparent;
font-family: 'DM Sans', sans-serif;
font-size: .8rem;
color: var(--pl);
width: 100%
}
.srchw input::placeholder {
color: var(--tx3)
}
.srt {
appearance: none;
-webkit-appearance: none;
background: #fff;
border: 1px solid var(--br);
color: var(--tx2);
font-family: 'DM Sans', sans-serif;
font-size: .63rem;
letter-spacing: .12em;
text-transform: uppercase;
padding: 12px 38px 12px 18px;
border-radius: 40px;
outline: none;
cursor: pointer;
transition: border-color .3s;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23E11D48' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center
}
.srt:focus {
border-color: var(--ro)
}
.srch-note {
font-size: .62rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--tx3);
margin-bottom: 18px
}
.srch-note b {
color: var(--ro)
}
.srch-note:empty {
display: none
}
/* Product detail page */
.pdp {
background: var(--iv);
padding: 130px 8vw 80px
}
.bcrumb {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-size: .62rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--tx3);
margin-bottom: 36px
}
.bcrumb a {
color: var(--tx2)
}
.bcrumb a:hover {
color: var(--ro)
}
.bcrumb i {
font-size: .5rem;
color: var(--ro3)
}
.bcrumb .bc-cur {
color: var(--ro)
}
.pdp-g {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 70px;
align-items: start
}
.pdp-img {
position: relative;
background: var(--iv2);
border: 1px solid var(--br2);
border-radius: 6px;
overflow: hidden;
min-height: 480px;
box-shadow: 0 30px 80px rgba(45, 27, 46, .10)
}
.pdp-img img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
inset: 0
}
.pdp-bdg {
position: absolute;
top: 16px;
left: 16px;
padding: 5px 14px;
font-size: .57rem;
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 700;
border-radius: 2px;
z-index: 2
}
.pdp-info {
display: flex;
flex-direction: column;
gap: 18px
}
.pdp-name {
font-family: 'Fraunces', serif;
font-size: clamp(1.8rem, 3vw, 2.6rem);
font-weight: 300;
color: var(--pl);
line-height: 1.15
}
.pdp-stars {
display: flex;
align-items: center;
gap: 3px;
color: var(--am);
font-size: .78rem
}
.pdp-stars span {
color: var(--tx2);
font-size: .7rem;
margin-left: 8px;
font-family: 'DM Sans', sans-serif
}
.pdp-price-row {
display: flex;
align-items: baseline;
gap: 14px
}
.pdp-mp {
font-size: .95rem;
color: var(--tx3);
text-decoration: line-through
}
.pdp-price {
font-family: 'Fraunces', serif;
font-size: 2.2rem;
font-style: italic;
color: var(--pl)
}
.pdp-desc {
font-size: .84rem;
color: var(--tx2);
line-height: 2;
font-weight: 300
}
.pdp-div {
height: 1px;
background: var(--br2)
}
.pdp-buy {
display: flex;
gap: 14px;
flex-wrap: wrap;
align-items: center
}
.pdp-qty {
display: flex;
align-items: center;
gap: 14px;
border: 1px solid var(--br);
border-radius: 2px;
padding: 8px 12px
}
.pdp-qty .qb {
width: 30px;
height: 30px
}
.pdp-qty .qn {
font-size: .95rem;
min-width: 28px
}
.pdp-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 6px
}
.pdp-meta-item {
display: flex;
flex-direction: column;
gap: 3px;
padding: 12px 16px;
background: var(--iv2);
border: 1px solid var(--br2);
border-radius: 2px
}
.pdp-meta-item b {
font-size: .56rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ro);
font-weight: 600
}
.pdp-meta-item span {
font-size: .78rem;
color: var(--pl);
font-weight: 500
}
.pdp-cod {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: var(--bl);
border: 1px solid var(--ro3);
border-radius: 2px
}
.pdp-cod i {
color: var(--ro);
font-size: 1.05rem
}
.pdp-cod div b {
display: block;
font-size: .74rem;
color: var(--pl)
}
.pdp-cod div span {
font-size: .66rem;
color: var(--tx2)
}
/* Related products */
.rlp {
background: var(--iv);
padding: 30px 8vw 110px
}
/* Product not found */
.pnf {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 18px;
padding: 60px 20px;
min-height: 40vh
}
.pnf i {
font-size: 3.4rem;
color: var(--ro3)
}
.pnf h2 {
font-size: 2rem;
font-weight: 300;
color: var(--pl)
}
.pnf h2 em {
font-style: italic;
color: var(--ro)
}
.pnf p {
font-size: .82rem;
color: var(--tx2);
max-width: 420px;
line-height: 1.9;
font-weight: 300
}
/* Checkout page */
.copage {
background: var(--iv);
padding: 80px 8vw 120px
}
.copage-g {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 60px;
align-items: start
}
.coform-card {
background: #fff;
border: 1px solid var(--br2);
border-radius: 4px;
padding: 40px;
box-shadow: 0 10px 60px rgba(45, 27, 46, .06)
}
.co-sec-t {
font-family: 'Fraunces', serif;
font-size: 1.15rem;
font-weight: 400;
color: var(--pl);
margin-bottom: 18px
}
.cosum {
background: #fff;
border: 1px solid var(--br2);
border-radius: 4px;
padding: 32px;
box-shadow: 0 10px 60px rgba(45, 27, 46, .06);
position: sticky;
top: 110px
}
.cosum-t {
font-family: 'Fraunces', serif;
font-size: 1.15rem;
font-weight: 400;
color: var(--pl);
margin-bottom: 8px
}
.cosum-i {
display: flex;
gap: 14px;
padding: 16px 0;
border-bottom: 1px solid var(--br2);
align-items: center
}
.cosum-i img {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 2px;
background: var(--iv2);
flex-shrink: 0
}
.cosum-nm {
font-size: .8rem;
font-weight: 500;
color: var(--pl);
line-height: 1.4;
margin-bottom: 4px
}
.cosum-nm a {
color: inherit
}
.cosum-nm a:hover {
color: var(--ro)
}
.cosum-q {
font-size: .68rem;
color: var(--tx2)
}
.cosum-pr {
margin-left: auto;
font-family: 'Fraunces', serif;
font-style: italic;
color: var(--pl);
font-size: .95rem;
white-space: nowrap
}
.cosum-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
font-size: .78rem;
color: var(--tx2)
}
.cosum-row.total {
border-top: 1px solid var(--br2);
margin-top: 8px;
padding-top: 16px;
align-items: center
}
.cosum-row.total span:first-child {
font-size: .65rem;
letter-spacing: .2em;
text-transform: uppercase
}
.cosum-row.total span:last-child {
font-family: 'Fraunces', serif;
font-size: 1.6rem;
font-style: italic;
color: var(--pl)
}
.cosum-empty {
text-align: center;
padding: 40px 10px;
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
color: var(--tx3)
}
.cosum-empty i {
font-size: 2.4rem;
color: var(--ro3)
}
.cosum-empty p {
font-size: .72rem;
letter-spacing: .15em;
text-transform: uppercase
}
.co-success {
background: #fff;
border: 1px solid var(--br2);
border-radius: 4px;
padding: 70px 40px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
box-shadow: 0 10px 60px rgba(45, 27, 46, .06)
}
.co-success .sic {
width: 74px;
height: 74px;
border-radius: 50%;
background: var(--ro);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem
}
.co-success h2 {
font-weight: 300;
color: var(--pl);
font-size: 1.9rem
}
.co-success .oid {
font-family: 'Fraunces', serif;
font-style: italic;
color: var(--ro);
font-size: 1.1rem
}
.co-success p {
font-size: .8rem;
color: var(--tx2);
line-height: 1.9;
max-width: 460px;
font-weight: 300
}
/* Wishlist page */
.wpg {
background: var(--iv);
padding: 80px 8vw 120px
}
.wgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px
}
.wcard {
background: #fff;
border: 1px solid var(--br2);
border-radius: 4px;
overflow: hidden;
transition: transform .4s, box-shadow .4s, border-color .3s;
display: flex;
flex-direction: column
}
.wcard:hover {
transform: translateY(-6px);
box-shadow: 0 24px 60px rgba(45, 27, 46, .10);
border-color: var(--ro3)
}
.wcard-img {
position: relative;
height: 240px;
background: var(--iv2);
overflow: hidden
}
.wcard-img a {
display: block;
height: 100%
}
.wcard-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s
}
.wcard:hover .wcard-img img {
transform: scale(1.06)
}
.wcard-b {
padding: 18px 20px 22px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1
}
.wcard-nm {
font-family: 'Fraunces', serif;
font-size: 1rem;
font-weight: 300;
color: var(--pl);
line-height: 1.3
}
.wcard-nm a {
color: inherit
}
.wcard-nm a:hover {
color: var(--ro)
}
.wcard-pr {
font-family: 'Fraunces', serif;
font-size: 1.15rem;
font-style: italic;
color: var(--ro)
}
.wcard-a {
display: flex;
gap: 8px;
margin-top: auto;
padding-top: 12px;
flex-wrap: wrap
}
.wcard-a .sm {
padding: 10px 14px;
font-size: .58rem;
letter-spacing: .12em;
text-transform: uppercase;
border-radius: 2px;
transition: all .3s;
display: inline-flex;
align-items: center;
gap: 7px;
font-weight: 600
}
.wc-add {
background: var(--pl);
color: var(--iv);
border: 1px solid var(--pl)
}
.wc-add:hover {
background: var(--ro);
border-color: var(--ro);
color: #fff
}
.wc-view {
background: transparent;
color: var(--tx2);
border: 1px solid var(--br)
}
.wc-view:hover {
border-color: var(--ro);
color: var(--ro);
background: var(--bl)
}
.wc-del {
background: transparent;
color: var(--tx3);
border: 1px solid var(--br)
}
.wc-del:hover {
border-color: var(--ro);
color: var(--ro)
}
.wempty {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
padding: 70px 20px;
color: var(--tx3)
}
.wempty i {
font-size: 3rem;
color: var(--ro3)
}
.wempty p {
font-size: .75rem;
letter-spacing: .2em;
text-transform: uppercase
}
/* Legal pages */
.lgl {
background: var(--iv);
padding: 80px 8vw 120px
}
.lgl-box {
max-width: 860px;
margin: 0 auto;
background: #fff;
border: 1px solid var(--br2);
border-radius: 4px;
padding: 50px;
box-shadow: 0 10px 60px rgba(45, 27, 46, .06)
}
.lgl-box .pmpt:last-child {
border-bottom: none
}
/* Unsubscribe page */
.uspg {
background: var(--iv);
padding: 80px 8vw 120px;
display: flex;
justify-content: center
}
.uscard {
width: 100%;
max-width: 520px;
background: #fff;
border: 1px solid var(--br2);
border-radius: 4px;
overflow: hidden;
box-shadow: 0 20px 70px rgba(45, 27, 46, .08);
height: fit-content
}
/* RESPONSIVE */
@media(max-width:1100px) {
.hero-main {
grid-template-columns: 1fr;
gap: 40px
}
.hero-right {
order: -1
}
.hero-card {
max-width: 320px
}
.agr {
grid-template-columns: 1fr;
gap: 50px
}
.nlg {
grid-template-columns: 1fr
}
.ctg {
grid-template-columns: 1fr
}
.faqg {
grid-template-columns: 1fr
}
.ft-mid {
grid-template-columns: 1fr 1fr;
gap: 40px
}
.wyg {
grid-template-columns: 1fr 1fr
}
.stbd {
grid-template-columns: 1fr 1fr
}
.v2-about-container {
flex-direction: column;
margin-bottom: 60px
}
.v2-about-img-wrap {
width: 100%;
height: 400px
}
.v2-about-text-box {
margin-left: 0;
margin-top: -60px;
width: 90%;
padding: 50px 40px
}
.v2-feature-row {
grid-template-columns: 1fr;
gap: 30px
}
.pdp-g {
grid-template-columns: 1fr;
gap: 40px
}
.pdp-img {
min-height: 420px
}
.copage-g {
grid-template-columns: 1fr
}
.cosum {
position: static
}
}
@media(max-width:768px) {
.nlinks {
display: none
}
.ham {
display: flex
}
.wyg {
grid-template-columns: 1fr
}
.fg,
.cor,
.f2c {
grid-template-columns: 1fr
}
.qvb {
grid-template-columns: 1fr
}
.qvis {
min-height: 240px
}
.dr {
width: 100%
}
.stbd {
grid-template-columns: 1fr 1fr
}
.abt,
.prd,
.why,
.faq,
.nl,
.ct,
.ft {
padding: 70px 5vw
}
.hero-strip {
flex-wrap: wrap;
height: auto;
padding: 20px 5vw;
gap: 16px
}
.hero-strip-icons {
gap: 16px
}
.ft-mid {
grid-template-columns: 1fr;
gap: 30px
}
.ft-top {
flex-direction: column;
text-align: center;
gap: 20px
}
.v2-hero {
padding: 100px 5vw 40px 5vw;
align-items: center
}
.v2-hero-overlay {
background: rgba(17, 35, 20, 0.6)
}
.v2-hero-content {
padding: 40px 30px;
margin-bottom: 0
}
.v2-hero-title {
font-size: 2.5rem
}
.v2-hero-actions {
flex-direction: column;
align-items: stretch
}
.v2-btn-solid,
.v2-btn-outline {
justify-content: center
}
.v2-about {
padding: 100px 5vw
}
.v2-about-text-box {
width: 95%;
padding: 40px 25px
}
.pdp {
padding: 110px 5vw 60px
}
.copage,
.wpg,
.lgl,
.uspg {
padding: 60px 5vw 80px
}
.coform-card,
.cosum,
.lgl-box {
padding: 28px 22px
}
.pdp-meta {
grid-template-columns: 1fr
}
.pghead {
padding: 130px 5vw 60px
}
}