/* MODIFIED SIZE GUIDE MODAL STYLES */
/* Size Guide Modal - Desktop & Mobile Optimized */
#sizeGuideOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 9999;
display: none;
opacity: 0;
transition: opacity 0.3s ease;
}
#sizeGuideOverlay.show {
display: flex;
opacity: 1;
}
#sizeGuideModal {
background: #FFFEF2;
border-radius: 16px;
position: relative;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
width: 100%;
max-width: 900px;
margin: auto;
transform: scale(0.9);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
overflow: hidden;
}
#sizeGuideOverlay.show #sizeGuideModal {
transform: scale(1);
}
/* Desktop styles */
@media screen and (min-width: 768px) {
#sizeGuideOverlay {
padding: 60px 20px;
align-items: flex-start;
justify-content: center;
}
#sizeGuideModal {
max-height: calc(100vh - 120px);
padding: 32px;
}
.size-guide-content {
overflow-y: auto;
max-height: calc(100vh - 200px);
}
}
/* Mobile styles */
@media screen and (max-width: 767px) {
#sizeGuideOverlay {
align-items: flex-end;
justify-content: center;
padding: 0;
}
#sizeGuideModal {
border-radius: 20px 20px 0 0;
max-height: 85vh;
margin: 0;
padding: 24px 20px 20px;
min-height: 50vh;
width: 100%;
}
.size-guide-content {
overflow-y: auto;
flex: 1;
max-height: calc(85vh - 100px);
padding-bottom: 20px;
}
/* Ensure no extra bottom space on mobile */
.size-guide-content:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
}
/* Close button styling */
.size-guide-close {
position: absolute;
top: 16px;
right: 16px;
font-size: 28px;
cursor: pointer;
color: #666;
background: none;
border: none;
padding: 8px;
line-height: 1;
transition: color 0.2s ease;
z-index: 10;
}
.size-guide-close:hover {
color: #000;
}
/* Header styling */
.size-guide-header {
margin: 0 0 24px 0;
padding-right: 50px;
}
.size-guide-title {
font-size: 20px;
font-weight: 600;
color: #333;
margin: 0 0 8px 0;
}
.size-guide-subtitle {
font-size: 14px;
color: #666;
margin: 0;
line-height: 1.4;
}
/* Content wrapper for proper scrolling */
.size-guide-content {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}
.size-guide-content::-webkit-scrollbar {
width: 6px;
}
.size-guide-content::-webkit-scrollbar-track {
background: transparent;
}
.size-guide-content::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 3px;
}
.size-guide-content::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.5);
}
/* Fit section styles */
.fit-section{ margin-top:24px; font-family:'Helvetica Neue',sans-serif; }
.fit-line{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px; color:#1a1a1a; }
.fit-indicator-container{ position:relative; height:2px; background:#ddd; }
.fit-indicator{ position:absolute; top:-6px; width:12px; height:12px; border:2px solid #000; border-radius:50%; background:#fff; transition:left .3s ease; }
.fit-indicator.left{ left:0%; transform:translateX(0%); }
.fit-indicator.center{ left:50%; transform:translateX(-50%); }
.fit-indicator.right{ left:100%; transform:translateX(-100%); }
.fit-note{ margin-top:8px; font-size:12px; color:#555; }
/* Guide navigation styles */
.guide-table { display: none; }
.guide-table.active { display: block; }
.guide-nav {
display: flex;
gap: 0;
margin-bottom: 20px;
border-bottom: 1px solid #e0e0e0;
}
.guide-nav-item {
padding: 12px 16px;
background: none;
border: none;
cursor: pointer;
font-size: 14px;
color: #666;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
flex: 1;
text-align: center;
}
.guide-nav-item:hover {
color: #333;
background: #f8f8f8;
}
.guide-nav-item.active {
color: #000;
border-bottom-color: #000;
background: #fff;
}
.categories-wrapper {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.categories-wrapper::-webkit-scrollbar {
height: 3px;
}
.categories-wrapper::-webkit-scrollbar-track {
background: #f0f0f0;
}
.categories-wrapper::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 2px;
}
Amara Ruffle Wide-leg Size Guide
For this garment, choose the size you typically wear. If you're torn between two sizes or favor a more relaxed fit, opt for one size larger than usual.
FITS SMALL
TRUE TO SIZE
OVERSIZED
Take your usual size.
-
About This Piece
-
Shipping & Delivery
-
Returns Made Simple
About This Piece
Softly tailored in a fluid drape, the Marlowe brings ease and elegance into one piece. The high-rise drawstring waist flatters while the gentle ruffle trims add movement with every step. Designed in a muted mauve, it’s the pant that feels as effortless at home as it looks polished out.
Why You’ll Love It
-
Flowy fit that moves with you
-
Lightweight comfort with a refined finish
-
Ruffle trim detail for a feminine edge
-
Versatile from desk to dinner to downtime
Shipping & Delivery
Complimentary shipping on all orders over $100 — thoughtfully packed and shipped within 24–48 hours.
You’ll receive tracking as soon as your order is on its way. Because style should never wait.
Returns Made Simple
Not quite right? We offer risk-free returns within 30 days, no questions asked.
Your style should feel effortless, so is sending it back.