/* =========================================
YADY MADE IT — SHOP PAGE
========================================= */
.ymi-shop-page {
–ymi-purple: #633393;
–ymi-dark-purple: #542781;
–ymi-pink: #d94f9f;
–ymi-gold: #c99724;
–ymi-text: #514a55;
–ymi-border: #eadff0;
overflow: hidden;
background: #ffffff;
box-sizing: border-box;
}
.ymi-shop-page *,
.ymi-shop-page *::before,
.ymi-shop-page *::after {
box-sizing: border-box;
}
.ymi-shop-inner {
width: 100%;
max-width: 1240px;
margin: 0 auto;
}
/* =========================================
HERO
========================================= */
.ymi-shop-hero {
position: relative;
overflow: hidden;
padding: 85px 5% 78px;
background:
radial-gradient(
circle at 10% 15%,
rgba(225, 174, 220, 0.30),
transparent 30%
),
radial-gradient(
circle at 90% 78%,
rgba(202, 174, 229, 0.28),
transparent 32%
),
#ffffff;
}
.ymi-shop-hero-content {
position: relative;
z-index: 2;
max-width: 850px;
margin: 0 auto;
text-align: center;
}
/* Gold signature butterfly */
.ymi-shop-butterfly {
width: 52px;
height: 46px;
margin: 0 auto 18px;
animation: ymiShopFloat 5s ease-in-out infinite;
}
.ymi-shop-butterfly svg {
display: block;
width: 100%;
height: 100%;
filter: drop-shadow(
0 5px 7px rgba(172, 118, 20, 0.22)
);
}
@keyframes ymiShopFloat {
0%,
100% {
transform: translateY(0) rotate(-5deg);
}
50% {
transform: translateY(-9px) rotate(5deg);
}
}
.ymi-shop-eyebrow {
margin: 0 0 12px;
color: var(–ymi-gold);
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
}
.ymi-shop-hero h1 {
margin: 0 0 20px;
color: var(–ymi-dark-purple);
font-family: Georgia, serif;
font-size: clamp(46px, 6vw, 70px);
line-height: 1.04;
}
.ymi-shop-hero h1 span {
color: var(–ymi-pink);
}
.ymi-shop-intro {
max-width: 730px;
margin: 0 auto 30px;
color: var(–ymi-text);
font-family: Arial, sans-serif;
font-size: 18px;
line-height: 1.75;
}
/* =========================================
PRODUCT SEARCH
========================================= */
.ymi-shop-search {
display: flex;
width: 100%;
max-width: 690px;
margin: 0 auto;
padding: 7px;
border: 1px solid #dac9e4;
border-radius: 12px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 10px 26px rgba(74, 35, 102, 0.10);
}
.ymi-shop-search input[type=”search”] {
flex: 1;
min-width: 0;
padding: 14px 17px;
border: none;
background: transparent;
color: #4d4751;
font-family: Arial, sans-serif;
font-size: 16px;
outline: none;
}
.ymi-shop-search input::placeholder {
color: #958d99;
}
.ymi-shop-search button {
flex: 0 0 auto;
padding: 13px 23px;
border: 2px solid var(–ymi-purple);
border-radius: 8px;
background: var(–ymi-purple);
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}
.ymi-shop-search button:hover {
transform: translateY(-1px);
background: #ffffff;
color: var(–ymi-purple);
}
/* =========================================
COLLECTIONS
========================================= */
.ymi-shop-collections {
padding: 80px 5% 88px;
background: #ffffff;
}
.ymi-shop-heading {
max-width: 760px;
margin: 0 auto 42px;
text-align: center;
}
.ymi-shop-heading small {
display: block;
margin-bottom: 10px;
color: var(–ymi-gold);
font-family: Arial, sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 2.3px;
text-transform: uppercase;
}
.ymi-shop-heading h2 {
margin: 0 0 15px;
color: var(–ymi-dark-purple);
font-family: Georgia, serif;
font-size: clamp(38px, 5vw, 56px);
line-height: 1.08;
}
.ymi-shop-heading h2 span {
color: var(–ymi-pink);
}
.ymi-shop-heading p {
margin: 0;
color: var(–ymi-text);
font-family: Arial, sans-serif;
font-size: 17px;
line-height: 1.7;
}
.ymi-shop-collection-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.ymi-shop-card {
position: relative;
min-height: 330px;
overflow: hidden;
border: 1px solid var(–ymi-border);
border-radius: 18px;
background-color: #f3edf6;
background-position: center;
background-size: cover;
text-decoration: none;
box-shadow: 0 10px 27px rgba(74, 35, 102, 0.09);
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.ymi-shop-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 36px rgba(74, 35, 102, 0.17);
}
.ymi-shop-card-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
padding: 25px;
background:
linear-gradient(
to top,
rgba(39, 16, 54, 0.94) 0%,
rgba(61, 28, 83, 0.58) 45%,
rgba(61, 28, 83, 0.05) 78%
);
}
.ymi-shop-card h3 {
margin: 0 0 7px;
color: #ffffff;
font-family: Georgia, serif;
font-size: 26px;
line-height: 1.15;
}
.ymi-shop-card p {
margin: 0 0 15px;
color: rgba(255, 255, 255, 0.90);
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
}
.ymi-shop-card-action {
display: inline-block;
padding: 9px 15px;
border: 2px solid #ffffff;
border-radius: 6px;
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
}
/* =========================================
NEW ARRIVALS INTRO
========================================= */
.ymi-new-arrivals {
padding: 76px 5% 28px;
background:
radial-gradient(
circle at 10% 20%,
rgba(225, 174, 220, 0.16),
transparent 30%
),
#fbf8fd;
}
.ymi-new-arrivals-heading {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.ymi-new-arrivals-heading small {
display: block;
margin-bottom: 10px;
color: var(–ymi-gold);
font-family: Arial, sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 2.3px;
text-transform: uppercase;
}
.ymi-new-arrivals-heading h2 {
margin: 0 0 14px;
color: var(–ymi-dark-purple);
font-family: Georgia, serif;
font-size: clamp(38px, 5vw, 56px);
line-height: 1.08;
}
.ymi-new-arrivals-heading h2 span {
color: var(–ymi-pink);
}
.ymi-new-arrivals-heading p {
margin: 0;
color: var(–ymi-text);
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.7;
}
/* =========================================
RESPONSIVE
========================================= */
@media (prefers-reduced-motion: reduce) {
.ymi-shop-butterfly {
animation: none;
}
}
@media (max-width: 900px) {
.ymi-shop-collection-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 650px) {
.ymi-shop-hero {
padding: 62px 20px;
}
.ymi-shop-hero h1 {
font-size: 44px;
}
.ymi-shop-intro {
font-size: 16px;
}
.ymi-shop-search {
display: block;
padding: 8px;
}
.ymi-shop-search input[type=”search”] {
width: 100%;
padding: 14px 12px;
text-align: center;
}
.ymi-shop-search button {
display: block;
width: 100%;
}
.ymi-shop-collections {
padding: 62px 19px 70px;
}
.ymi-shop-collection-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.ymi-shop-card {
min-height: 310px;
}
.ymi-new-arrivals {
padding: 60px 20px 24px;
}
}