Macaw Kaftan
Couldn't load pickup availability
Pair This Macaw Kaftan With Heels And A Chic Clutch For The Perfect Best-Dressed Guest Look.
Shipping Information
- Made to Order will take 15 days to dispatch
- Ready to ship usually takes 48-72 hours to dispatch
- International customers are responsible for all local duties and taxes.
Fit Details
-Viscose Fabric
-Delicate Handcrafted Embroidery
-Strappy dress
-Sleeveless
-Gathers detail
-Dry clean
Collapsible tab
Collapsible tab content
<body>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emme Halter Top Size Chart</title>
<style>
/* Reset and base styles */
/* Size chart container */
.size-chart-container {
background-color: #fff;
max-width: 700px;
margin: 0 auto;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
/* Header */
.title {
font-size: 18px;
font-weight: 500;
margin: 0;
color: #333;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Country navigation */
.country-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 15px 10px 5px;
border-bottom: 1px solid #f5f5f5;
gap: 10px;
}
.country-item {
text-align: center;
cursor: pointer;
padding: 3px;
border-radius: 4px;
transition: all 0.2s;
width: 36px;
}
.country-item:hover {
transform: translateY(-1px);
}
.country-item.active {
background-color: #f5f5f5;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.flag {
width: 24px;
height: 16px;
border: 1px solid #eee;
display: block;
margin: 0 auto;
transition: transform 0.2s;
object-fit: cover;
}
.country-item.active .flag {
transform: scale(1.1);
}
.country-name {
font-size: 9px;
color: #999;
display: block;
margin-top: 3px;
text-transform: uppercase;
}
/* Unit toggle */
.unit-toggle {
display: flex;
justify-content: flex-end;
padding: 8px 15px;
}
.unit-buttons {
display: flex;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
}
.unit-btn {
padding: 4px 12px;
background: #fff;
border: none;
font-size: 11px;
cursor: pointer;
transition: all 0.2s;
color: #666;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.unit-btn:first-child {
border-right: 1px solid #ddd;
}
.unit-btn.active {
background: #000;
color: white;
}
/* Size table */
.table-container {
padding: 10px 15px 15px;
overflow-x: auto;
}
.size-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
min-width: 500px;
}
.size-table th {
background-color: #f9f9f9;
font-weight: 500;
color: #555;
padding: 10px 6px;
border: 1px solid #eee;
text-align: center;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 0.5px;
white-space: nowrap;
}
.size-table td {
padding: 10px 6px;
border: 1px solid #eee;
text-align: center;
vertical-align: middle;
font-size: 12px;
}
.size-table tr:nth-child(odd) {
background-color: #fcfcfc;
}
.size-table tr:hover {
background-color: #f5f5f5;
}
/* How to measure section */
.measure-container {
padding: 15px;
display: flex;
flex-wrap: wrap;
gap: 20px;
border-top: 1px solid #eee;
margin-top: 10px;
}
.measure-image {
flex: 0 0 180px;
position: relative;
}
.measure-image img {
width: 100%;
height: auto;
display: block;
border: 1px solid #f5f5f5;
border-radius: 4px;
max-width: 100%;
}
.measure-points {
flex: 1 1 250px;
}
.measure-title {
font-size: 14px;
font-weight: 500;
margin-bottom: 15px;
color: #333;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.point-item {
margin-bottom: 15px;
position: relative;
padding-left: 25px;
}
.point-number {
position: absolute;
left: 0;
top: 2px;
width: 18px;
height: 18px;
background-color: #000;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: bold;
}
.point-title {
font-weight: 500;
margin-bottom: 4px;
text-transform: uppercase;
font-size: 12px;
}
.point-desc {
font-size: 12px;
color: #666;
line-height: 1.5;
}
/* Responsive adjustments */
@media (max-width: 768px) {
body {
padding: 10px;
}
.size-chart-container {
width: 100%;
}
.country-nav {
padding: 10px 5px;
gap: 6px;
justify-content: space-around;
}
.country-item {
width: 32px;
}
.measure-container {
flex-direction: column;
align-items: center;
}
.measure-image {
flex: 0 0 140px;
margin-bottom: 10px;
}
.size-table th, .size-table td {
padding: 8px 5px;
font-size: 11px;
}
.title {
font-size: 16px;
}
}
@media (max-width: 480px) {
body {
padding: 5px;
}
.size-chart-container {
border-radius: 4px;
}
.country-nav {
gap: 5px;
flex-wrap: wrap;
}
.country-item {
width: calc(25% - 10px);
margin-bottom: 5px;
}
.flag {
width: 22px;
height: 14px;
}
.measure-image {
flex: 1 1 100%;
max-width: 160px;
margin: 0 auto 15px;
}
.measure-points {
flex: 1 1 100%;
}
.table-container {
padding: 5px;
}
.point-item {
margin-bottom: 12px;
}
.unit-toggle {
padding: 8px 10px;
}
.measure-container {
padding: 10px;
}
.header {
padding: 12px 10px;
}
}
</style>
<!-- Size Chart Container -->
<div class="size-chart-container">
<div class="header">
<h2 class="title">Emme Halter Top Size Chart</h2>
</div>
<div class="country-nav" id="countryNav">
<div class="country-item active" data-country="usa">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/us.png?v=1746290432" alt="USA" class="flag">
<span class="country-name">USA</span>
</div>
<div class="country-item" data-country="uk">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/uk.png?v=1746290432" alt="UK" class="flag">
<span class="country-name">UK</span>
</div>
<div class="country-item" data-country="australia">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/australia.png?v=1746290407" alt="Australia" class="flag">
<span class="country-name">AU</span>
</div>
<div class="country-item" data-country="france">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/france.png?v=1746290407" alt="France" class="flag">
<span class="country-name">FR</span>
</div>
<div class="country-item" data-country="italy">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/italy.webp?v=1746293548" alt="Italy" class="flag">
<span class="country-name">IT</span>
</div>
<div class="country-item" data-country="japan">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/japan.webp?v=1746290310" alt="Japan" class="flag">
<span class="country-name">JP</span>
</div>
<div class="country-item" data-country="denmark">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/denmark.webp?v=1746290310" alt="Denmark" class="flag">
<span class="country-name">DK</span>
</div>
</div>
<div class="unit-toggle">
<div class="unit-buttons">
<button class="unit-btn active" data-unit="inches">IN</button>
<button class="unit-btn" data-unit="cm">CM</button>
</div>
</div>
<div class="table-container">
<table class="size-table">
<thead>
<tr>
<th>SIZE</th>
<th id="countryCol">USA</th>
<th>BUST</th>
<th>WAIST</th>
<th>HIP</th>
<th>LENGTH</th>
<th>CROP LENGTH</th>
</tr>
</thead>
<tbody id="sizeTableBody">
<!-- Table rows will be populated by JavaScript -->
</tbody>
</table>
</div>
<div class="measure-container">
<div class="measure-image">
<img src="https://cdn.shopify.com/s/files/1/0885/8393/0040/files/bhanunibyjyoti-1683811952246.png?v=1746290865" alt="How to measure">
</div>
<div class="measure-points">
<h3 class="measure-title">How to Measure</h3>
<div class="point-item">
<div class="point-number">1</div>
<div class="point-title">LENGTH</div>
<div class="point-desc">Measure from the top of the shoulder seam down to the hem</div>
</div>
<div class="point-item">
<div class="point-number">2</div>
<div class="point-title">BUST</div>
<div class="point-desc">Measure around the fullest part, placing the tape close up under the arms</div>
</div>
<div class="point-item">
<div class="point-number">3</div>
<div class="point-title">WAIST</div>
<div class="point-desc">Measure around the narrowest part of your body, under the navel</div>
</div>
<div class="point-item">
<div class="point-number">4</div>
<div class="point-title">HIP</div>
<div class="point-desc">Measure 20cm down from your waist</div>
</div>
</div>
</div>
</div>
<script>
// Size data for all countries
const sizeData = {
usa: [
['XXS', '0-2', '31 - 32', '25 - 26', '35 - 36', '27 - 30', '15 - 20'],
['XS', '2-4', '33 - 34', '27 - 28', '37 - 38', '27.3 - 30.3', '15.3 - 20.3'],
['S', '4-6', '35 - 36', '29 - 30', '39 - 40', '27.5 - 30.5', '15.5 - 20.5'],
['M', '6-8', '37 - 38', '31 - 32', '41 - 42', '27.8 - 30.8', '15.8 - 20.8'],
['L', '8-10', '39 - 41', '33 - 35', '43 - 45', '28 - 31', '16 - 21'],
['XL', '10-12', '42 - 44', '36 - 38', '43 - 45', '28.3 - 31.3', '16.3 - 21.3'],
['XXL', '12-16', '45 - 47', '39 - 41', '43 - 45', '28.5 - 31.5', '16.5 - 21.5']
],
uk: [
['XXS', '4', '31 - 32', '25 - 26', '35 - 36', '27 - 30', '15 - 20'],
['XS', '6', '33 - 34', '27 - 28', '37 - 38', '27.3 - 30.3', '15.3 - 20.3'],
['S', '8', '35 - 36', '29 - 30', '39 - 40', '27.5 - 30.5', '15.5 - 20.5'],
['M', '10', '37 - 38', '31 - 32', '41 - 42', '27.8 - 30.8', '15.8 - 20.8'],
['L', '12', '39 - 41', '33 - 35', '43 - 45', '28 - 31', '16 - 21'],
['XL', '14', '42 - 44', '36 - 38', '43 - 45', '28.3 - 31.3', '16.3 - 21.3'],
['XXL', '16', '45 - 47', '39 - 41', '43 - 45', '28.5 - 31.5', '16.5 - 21.5']
],
australia: [
['XXS', '4', '31 - 32', '25 - 26', '35 - 36', '27 - 30', '15 - 20'],
['XS', '6', '33 - 34', '27 - 28', '37 - 38', '27.3 - 30.3', '15.3 - 20.3'],
['S', '8', '35 - 36', '29 - 30', '39 - 40', '27.5 - 30.5', '15.5 - 20.5'],
['M', '10', '37 - 38', '31 - 32', '41 - 42', '27.8 - 30.8', '15.8 - 20.8'],
['L', '12', '39 - 41', '33 - 35', '43 - 45', '28 - 31', '16 - 21'],
['XL', '14', '42 - 44', '36 - 38', '43 - 45', '28.3 - 31.3', '16.3 - 21.3'],
['XXL', '16', '45 - 47', '39 - 41', '43 - 45', '28.5 - 31.5', '16.5 - 21.5']
],
france: [
['XXS', '32', '31 - 32', '25 - 26', '35 - 36', '27 - 30', '15 - 20'],
['XS', '34', '33 - 34', '27 - 28', '37 - 38', '27.3 - 30.3', '15.3 - 20.3'],
['S', '36', '35 - 36', '29 - 30', '39 - 40', '27.5 - 30.5', '15.5 - 20.5'],
['M', '38', '37 - 38', '31 - 32', '41 - 42', '27.8 - 30.8', '15.8 - 20.8'],
['L', '40', '39 - 41', '33 - 35', '43 - 45', '28 - 31', '16 - 21'],
['XL', '42', '42 - 44', '36 - 38', '43 - 45', '28.3 - 31.3', '16.3 - 21.3'],
['XXL', '44', '45 - 47', '39 - 41', '43 - 45', '28.5 - 31.5', '16.5 - 21.5']
],
italy: [
['XXS', '36', '31 - 32', '25 - 26', '35 - 36', '27 - 30', '15 - 20'],
['XS', '38', '33 - 34', '27 - 28', '37 - 38', '27.3 - 30.3', '15.3 - 20.3'],
['S', '40', '35 - 36', '29 - 30', '39 - 40', '27.5 - 30.5', '15.5 - 20.5'],
['M', '42', '37 - 38', '31 - 32', '41 - 42', '27.8 - 30.8', '15.8 - 20.8'],
['L', '44', '39 - 41', '33 - 35', '43 - 45', '28 - 31', '16 - 21'],
['XL', '46', '42 - 44', '36 - 38', '43 - 45', '28.3 - 31.3', '16.3 - 21.3'],
['XXL', '48', '45 - 47', '39 - 41', '43 - 45', '28.5 - 31.5', '16.5 - 21.5']
],
japan: [
['XXS', '3', '31 - 32', '25 - 26', '35 - 36', '27 - 30', '15 - 20'],
['XS', '5', '33 - 34', '27 - 28', '37 - 38', '27.3 - 30.3', '15.3 - 20.3'],
['S', '7', '35 - 36', '29 - 30', '39 - 40', '27.5 - 30.5', '15.5 - 20.5'],
['M', '9', '37 - 38', '31 - 32', '41 - 42', '27.8 - 30.8', '15.8 - 20.8'],
['L', '11', '39 - 41', '33 - 35', '43 - 45', '28 - 31', '16 - 21'],
['XL', '13', '42 - 44', '36 - 38', '43 - 45', '28.3 - 31.3', '16.3 - 21.3'],
['XXL', '15', '45 - 47', '39 - 41', '43 - 45', '28.5 - 31.5', '16.5 - 21.5']
],
denmark: [
['XXS', '30', '31 - 32', '25 - 26', '35 - 36', '27 - 30', '15 - 20'],
['XS', '32', '33 - 34', '27 - 28', '37 - 38', '27.3 - 30.3', '15.3 - 20.3'],
['S', '34', '35 - 36', '29 - 30', '39 - 40', '27.5 - 30.5', '15.5 - 20.5'],
['M', '36', '37 - 38', '31 - 32', '41 - 42', '27.8 - 30.8', '15.8 - 20.8'],
['L', '38', '39 - 41', '33 - 35', '43 - 45', '28 - 31', '16 - 21'],
['XL', '40', '42 - 44', '36 - 38', '43 - 45', '28.3 - 31.3', '16.3 - 21.3'],
['XXL', '42', '45 - 47', '39 - 41', '43 - 45', '28.5 - 31.5', '16.5 - 21.5']
]
};
// Conversion factor inches to cm
const inchesToCm = 2.54;
// Current state
let currentCountry = 'usa';
let currentUnit = 'inches';
// DOM elements
let countryNav;
let tableBody;
let unitButtons;
let countryItems;
let countryCol;
// Initialize when DOM is fully loaded
document.addEventListener('DOMContentLoaded', function() {
// Get DOM elements
countryNav = document.getElementById('countryNav');
tableBody = document.getElementById('sizeTableBody');
unitButtons = document.querySelectorAll('.unit-btn');
countryItems = document.querySelectorAll('.country-item');
countryCol = document.getElementById('countryCol');
// Set up country navigation with event delegation
countryNav.addEventListener('click', function(e) {
const countryItem = e.target.closest('.country-item');
if (countryItem && countryItem.dataset.country) {
switchCountry(countryItem.dataset.country);
}
});
// Set up unit toggle
unitButtons.forEach(btn => {
btn.addEventListener('click', function() {
switchUnits(this.dataset.unit);
});
});
// Initialize table data
updateTableData();
});
// Function to switch country
function switchCountry(country) {
currentCountry = country;
// Update active class on country items
countryItems.forEach(item => {
if (item.dataset.country === country) {
item.classList.add('active');
} else {
item.classList.remove('active');
}
});
// Update country column header
countryCol.textContent = country.toUpperCase();
// Update table data
updateTableData();
}
// Function to switch units
function switchUnits(unit) {
currentUnit = unit;
// Update active class on unit buttons
unitButtons.forEach(btn => {
if (btn.dataset.unit === unit) {
btn.classList.add('active');
} else {
btn.classList.remove('active');
}
});
// Update table data
updateTableData();
}
// Function to convert inches to cm
function convertToCm(inchValue) {
if (inchValue.includes('-')) {
const parts = inchValue.split('-').map(p => p.trim());
return parts.map(val => {
const num = parseFloat(val);
return isNaN(num) ? val : (num * inchesToCm).toFixed(1);
}).join(' - ');
} else {
const num = parseFloat(inchValue);
return isNaN(num) ? inchValue : (num * inchesToCm).toFixed(1);
}
}
// Function to update table data
function updateTableData() {
const data = sizeData[currentCountry];
// Clear existing rows
tableBody.innerHTML = '';
// Add new rows
data.forEach(row => {
const tr = document.createElement('tr');
// Add size cell
const sizeCell = document.createElement('td');
sizeCell.textContent = row[0];
tr.appendChild(sizeCell);
// Add country size cell
const countryCell = document.createElement('td');
countryCell.textContent = row[1];
tr.appendChild(countryCell);
// Add measurement cells
for (let i = 2; i < row.length; i++) {
const cell = document.createElement('td');
cell.setAttribute('data-inch', row[i]);
const value = currentUnit === 'inches' ? row[i] : convertToCm(row[i]);
cell.textContent = value;
if (currentUnit === 'cm') {
cell.textContent += ' cm';
}
tr.appendChild(cell);
}
tableBody.appendChild(tr);
});
}
</script>
</body>