*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
:root{
--pink:#d98fa7;
--pinkdeep:#ca7693;
--blush:#f3d5dd;
--cream:#fff9f6;
--wine:#780e46;
--winedark:#5a0a34;
--muted:#8f5369;
--line:rgba(120,14,70,.16);
--shadow:0 24px 70px rgba(120,14,70,.09)
}
body{
min-height:100vh;
overflow-x:hidden;
background:#fdf3f5;
color:var(--wine);
font-family:"DM Sans",sans-serif
}
a{color:inherit}
img{display:block;max-width:100%}

/* header */
.site-header{
min-height:70px;
padding:0 7%;
position:sticky;
top:0;
z-index:1000;
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:25px;
border-bottom:1px solid rgba(120,14,70,.08);
background:rgba(248,225,231,.92);
backdrop-filter:blur(18px)
}
.main-nav{display:flex;align-items:center;gap:clamp(22px,3vw,48px)}
.left-nav{justify-content:flex-start}
.right-nav{justify-content:flex-end}
.main-nav a{
position:relative;
color:var(--wine);
text-decoration:none;
font-size:8px;
letter-spacing:1.2px;
text-transform:uppercase
}
.main-nav a:not(.bag-link)::after{
content:"";
width:0;height:1px;
position:absolute;
left:0;bottom:-7px;
background:var(--wine);
transition:width .25s ease
}
.main-nav a:hover::after,.main-nav a.active::after{width:100%}
.header-brand{
display:flex;
flex-direction:column;
align-items:center;
text-decoration:none
}
.header-brand strong{
font-family:"Playfair Display",serif;
font-size:31px;
line-height:.95;
font-weight:500;
letter-spacing:4px
}
.header-brand small{
margin-top:5px;
font-size:5px;
letter-spacing:3px
}
.bag-link{
min-height:34px;
padding:0 9px;
display:inline-flex;
align-items:center;
gap:7px;
border:1px solid rgba(120,14,70,.20);
border-radius:999px
}
.bag-count{
min-width:18px;
height:18px;
padding:0 4px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
background:var(--wine);
color:var(--cream);
font-size:7px
}
.menu-toggle{
display:none;
border:0;
background:transparent;
color:var(--wine);
font-size:23px;
cursor:pointer
}

/* hero */
.hero{
min-height:525px;
padding:80px 7% 55px;
display:grid;
grid-template-columns:1fr 1.45fr 1fr;
gap:25px;
align-items:center;
position:relative;
overflow:hidden;
background:
linear-gradient(180deg,rgba(217,143,167,.04),rgba(217,143,167,.13)),
url("assets/kryce-cloud-hero.jpg") center/cover no-repeat
}
.hero::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.26),transparent 26%);
pointer-events:none
}
.hero-center,.hero-side{position:relative;z-index:2}
.hero-center{text-align:center}
.hero-star{display:block;margin-bottom:4px;font-size:36px;line-height:1}
.hero-star.small{font-size:24px}
.hero-center h1{
font-family:"Playfair Display",serif;
font-size:clamp(76px,8vw,142px);
line-height:.82;
font-weight:500;
letter-spacing:1px
}
.hero-center p{
margin-top:13px;
font-family:"Playfair Display",serif;
font-size:14px;
letter-spacing:7px
}
.hero-side{max-width:230px}
.hero-side-left{align-self:end;padding-bottom:16px}
.hero-side-right{justify-self:end;text-align:center}
.hero-side p{
font-family:"Playfair Display",serif;
font-size:11px;
line-height:1.55;
letter-spacing:2.7px
}
.tiny-rule{
width:34px;height:1px;
margin-bottom:10px;
display:block;
background:var(--wine)
}
.hero-side-right .tiny-rule{margin:14px auto 0}
.luxury-button{
min-height:42px;
width:fit-content;
margin-top:18px;
padding:0 20px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:17px;
border:1px solid var(--wine);
border-radius:999px;
background:var(--wine);
color:var(--cream);
text-decoration:none;
font-size:7px;
letter-spacing:1.2px;
text-transform:uppercase;
transition:transform .25s ease,background .25s ease
}
.luxury-button:hover{transform:translateY(-2px);background:var(--winedark)}
.luxury-button.small{min-height:39px;margin-top:20px;padding:0 17px}

/* values */
.value-strip{
min-height:77px;
padding:0 6%;
display:grid;
grid-template-columns:repeat(4,1fr);
border-top:1px solid rgba(120,14,70,.08);
border-bottom:1px solid rgba(120,14,70,.08);
background:rgba(255,249,246,.92)
}
.value-item{
padding:16px clamp(13px,2.3vw,32px);
display:flex;
align-items:center;
gap:14px;
border-right:1px solid var(--line)
}
.value-item:first-child{padding-left:0}
.value-item:last-child{border-right:0}
.value-icon{
min-width:30px;
font-family:"Playfair Display",serif;
font-size:20px;
text-align:center
}
.value-item strong{
display:block;
font-family:"Playfair Display",serif;
font-size:10px;
font-weight:600;
letter-spacing:.5px
}
.value-item small{
margin-top:4px;
display:block;
color:var(--muted);
font-size:8px
}

/* collections */
.collections-section{
padding:10px 5% 12px;
display:grid;
grid-template-columns:235px minmax(0,1fr) minmax(0,1fr);
gap:10px;
background:#fdf3f5
}
.collections-intro{
padding:30px 16px 25px 8px;
display:flex;
flex-direction:column;
justify-content:center
}
.section-kicker{
margin-bottom:8px;
font-size:6px;
letter-spacing:2.6px;
text-transform:uppercase
}
.collections-intro h2,.bestsellers-intro h2{
font-family:"Playfair Display",serif;
font-size:35px;
line-height:.92;
font-weight:500
}
.short-rule{
width:33px;height:1px;
margin:16px 0;
display:block;
background:var(--wine)
}
.collections-copy,.bestsellers-intro>p:not(.section-kicker){
color:var(--muted);
font-family:"Playfair Display",serif;
font-size:11px;
line-height:1.5
}
.collection-card{
min-height:225px;
padding:26px 30px;
position:relative;
overflow:hidden;
display:flex;
align-items:flex-start;
text-decoration:none;
background-position:center;
background-size:cover;
transition:transform .30s ease,box-shadow .30s ease
}
.collection-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.collection-card::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(249,216,225,.84),rgba(249,216,225,.20) 64%)
}
.hair-collection{background-image:url("assets/kryce-hair-collection.jpg")}
.tanning-collection{background-image:url("assets/kryce-tanning-collection.jpg")}
.collection-star,.collection-card-copy{position:relative;z-index:2}
.collection-star{margin-right:10px;font-size:17px}
.collection-card h3{
font-family:"Playfair Display",serif;
font-size:34px;
line-height:.88;
font-weight:500
}
.collection-card p{
margin-top:13px;
font-family:"Playfair Display",serif;
font-size:9px;
line-height:1.5;
letter-spacing:1.8px
}
.collection-link{
margin-top:17px;
padding-bottom:3px;
display:inline-flex;
gap:10px;
border-bottom:1px solid var(--wine);
font-size:7px;
letter-spacing:1px
}

/* products */
.bestsellers-section{
padding:0 5% 10px;
display:grid;
grid-template-columns:235px minmax(0,1fr);
gap:10px;
background:#fdf3f5
}
.bestsellers-intro{padding:28px 16px 20px 8px}
.product-grid{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:10px
}
.product-card{
min-width:0;
overflow:hidden;
border:1px solid rgba(120,14,70,.07);
background:rgba(255,249,246,.72);
transition:transform .30s ease,box-shadow .30s ease
}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.product-card-image{
height:175px;
padding:12px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
text-decoration:none;
background:
radial-gradient(circle at 50% 27%,rgba(255,255,255,.52),transparent 30%),
linear-gradient(145deg,#e9b0c0,#d98fa7)
}
.product-card-image img{
width:100%;height:100%;
object-fit:contain;
transition:transform .30s ease
}
.product-card:hover .product-card-image img{transform:scale(1.04)}
.image-placeholder{
font-family:"Playfair Display",serif;
font-size:28px
}
.product-card-body{padding:9px 10px 10px}
.product-card h3{
font-family:"Playfair Display",serif;
font-size:11px;
line-height:1.1;
font-weight:600
}
.product-card h3 a{text-decoration:none}
.product-card-body>p{
min-height:28px;
margin-top:4px;
color:var(--muted);
font-size:7px;
line-height:1.35
}
.product-card-bottom{margin-top:8px}
.price-wrap{display:flex;align-items:baseline;gap:5px}
.price-wrap strong{
font-family:"Playfair Display",serif;
font-size:12px
}
.old-price{
color:var(--muted);
font-size:7px;
text-decoration:line-through
}
.add-bag,.sold-out{
min-height:25px;
margin-top:6px;
padding:0 11px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
border-radius:999px;
background:var(--wine);
color:var(--cream);
text-decoration:none;
font-size:6px;
letter-spacing:.9px
}
.sold-out{opacity:.55}
.product-empty{
grid-column:1/-1;
min-height:190px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(120,14,70,.08);
color:var(--muted);
font-family:"Playfair Display",serif
}

/* story */
.story-section{
min-height:145px;
padding:18px 8%;
display:grid;
grid-template-columns:.9fr 1.35fr .7fr;
align-items:center;
gap:35px;
border-top:1px solid rgba(120,14,70,.08);
background:
linear-gradient(90deg,rgba(242,199,210,.84),rgba(242,199,210,.64)),
url("assets/kryce-cloud-soft.jpg") center/cover no-repeat
}
.story-title h2{
font-family:"Playfair Display",serif;
font-size:27px;
line-height:.94;
font-weight:500
}
.story-copy{
padding-left:35px;
border-left:1px solid rgba(120,14,70,.16)
}
.story-copy p{
max-width:560px;
color:#71304c;
font-family:"Playfair Display",serif;
font-size:10px;
line-height:1.55
}
.story-signature{
padding-left:35px;
border-left:1px solid rgba(120,14,70,.16);
text-align:center
}
.story-signature>span{font-size:20px}
.story-signature p{
margin-top:5px;
font-family:"Playfair Display",serif;
font-size:9px;
line-height:1.55;
letter-spacing:2.5px
}

/* footer */
.site-footer{
padding:18px 6% 15px;
display:grid;
grid-template-columns:.8fr 1.3fr .7fr;
gap:35px;
align-items:center;
background:#f3dce2
}
.footer-brand{
display:flex;
flex-direction:column
}
.footer-brand strong{
font-family:"Playfair Display",serif;
font-size:25px;
font-weight:500;
letter-spacing:3px
}
.footer-brand small{
margin-top:4px;
font-size:5px;
letter-spacing:2.2px
}
.footer-menu{
display:flex;
justify-content:center;
gap:24px;
flex-wrap:wrap
}
.footer-menu a{
text-decoration:none;
font-size:7px;
text-transform:uppercase
}
.footer-social{
justify-self:end;
display:flex;
align-items:center;
gap:12px
}
.footer-social>span{
font-size:6px;
letter-spacing:1.2px
}
.social-links{display:flex;gap:9px}
.social-link{
width:29px;height:29px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid rgba(120,14,70,.20);
border-radius:50%;
transition:background .2s ease,color .2s ease,transform .2s ease
}
.social-link:hover{
transform:translateY(-2px);
background:var(--wine);
color:var(--cream)
}
.social-link svg{
width:14px;height:14px;
fill:none;
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round
}
.social-link svg path{fill:currentColor;stroke:none}
.social-link .social-fill{fill:currentColor;stroke:none}
.footer-credit{
padding-top:12px;
grid-column:1/-1;
display:flex;
justify-content:space-between;
gap:20px;
border-top:1px solid rgba(120,14,70,.11);
color:var(--muted);
font-size:6px
}
.footer-credit a{text-decoration:none}

/* reveal */
.reveal{
opacity:0;
transform:translateY(16px);
transition:opacity .70s ease,transform .70s ease
}
.reveal.visible{opacity:1;transform:translateY(0)}

/* responsive */
@media(max-width:1100px){
.site-header{padding-left:4%;padding-right:4%}
.main-nav{gap:19px}
.hero{grid-template-columns:.8fr 1.4fr .8fr}
.collections-section{grid-template-columns:190px 1fr 1fr}
.bestsellers-section{grid-template-columns:190px 1fr}
.product-grid{grid-template-columns:repeat(3,1fr)}
.product-card:nth-child(n+4){display:none}
}

@media(max-width:760px){
.site-header{
min-height:68px;
grid-template-columns:auto 1fr auto
}
.menu-toggle{display:block}
.header-brand{justify-self:center}
.header-brand strong{font-size:25px}
.header-brand small{display:none}
.left-nav{
position:absolute;
left:0;right:0;top:68px;
padding:24px 5%;
display:none;
flex-direction:column;
align-items:flex-start;
gap:20px;
background:rgba(248,225,231,.98);
border-bottom:1px solid var(--line)
}
.left-nav.active{display:flex}
.right-nav a:not(.bag-link){display:none}
.hero{
min-height:610px;
padding:65px 5% 45px;
grid-template-columns:1fr;
text-align:center
}
.hero-center{grid-row:1}
.hero-center h1{font-size:clamp(70px,22vw,105px)}
.hero-center p{font-size:10px;letter-spacing:5px}
.hero-side-left{
justify-self:center;
align-self:auto;
padding:0;
grid-row:2
}
.hero-side-left .tiny-rule{margin:0 auto 10px}
.hero-side-right{display:none}
.value-strip{grid-template-columns:1fr 1fr}
.value-item:nth-child(2){border-right:0}
.value-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
.collections-section{
padding:20px 5%;
grid-template-columns:1fr
}
.collections-intro{padding:15px 0}
.collection-card{min-height:245px}
.bestsellers-section{
padding:20px 5%;
grid-template-columns:1fr
}
.bestsellers-intro{padding:10px 0 18px}
.product-grid{grid-template-columns:1fr 1fr}
.product-card:nth-child(n+5){display:none}
.product-card-image{height:230px}
.story-section{
padding:32px 6%;
grid-template-columns:1fr
}
.story-copy,.story-signature{
padding:20px 0 0;
border-left:0;
border-top:1px solid rgba(120,14,70,.16)
}
.site-footer{
grid-template-columns:1fr;
text-align:center
}
.footer-brand{align-items:center}
.footer-social{justify-self:center}
.footer-credit{
flex-direction:column;
text-align:center
}
}

@media(max-width:470px){
.value-strip{grid-template-columns:1fr}
.value-item{
border-right:0;
border-bottom:1px solid var(--line)
}
.product-grid{grid-template-columns:1fr}
.product-card:nth-child(n+4){display:none}
.product-card-image{height:315px}
}