Widget Theme Gallery

<!-- Fragella Widget: Default Light -->
<div class="fragella-data-container fg-container" data-fragrance-name="Sauvage">
    <div class="fg-header">
        <img data-fragella-image="Image URL" class="fg-image" alt="Fragrance Bottle" />
        <div class="fg-info">
            <div class="fg-title-row">
                <div>
                    <h3 class="fg-title" data-fragella-text="Name">Loading...</h3>
                    <p class="fg-brand">by <span data-fragella-text="Brand"></span></p>
                    <p class="fg-brand">Perfumers: <span data-fragella-text="perfumers"></span></p>
                    <p class="fg-brand">Brand founder: <span data-fragella-text="founder"></span></p>
                </div>
                <span class="fg-badge-gender" data-fragella-text="Gender"></span>
            </div>
            <div class="fg-badges-wrap">
                <span class="fg-badge fg-badge-oil" data-fragella-text="OilType"></span>
                <span class="fg-badge fg-badge-gray">Released: <span data-fragella-text="Year"></span></span>
                <span class="fg-badge fg-badge-gray"><span data-fragella-text="Country"></span></span>
                <span class="fg-badge fg-badge-rating">★ <span data-fragella-text="rating"></span></span>
            </div>
        </div>
    </div>
    <div class="fg-stats-grid">
        <div class="fg-stat-box"><span class="fg-stat-label">Longevity</span><span class="fg-stat-val-primary" data-fragella-text="Longevity"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Sillage</span><span class="fg-stat-val-primary" data-fragella-text="Sillage"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Popularity</span><span class="fg-stat-val-secondary" data-fragella-text="Popularity"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Value</span><span class="fg-stat-val-secondary" data-fragella-text="Price Value"></span></div>
    </div>
    <div class="fg-section">
        <h4 class="fg-section-title">Main Accords</h4>
        <div data-fragella-list="Main Accords Percentage" class="accords-wrapper fg-list-wrap"></div>
    </div>
    <div class="fg-notes-grid">
        <div><h4 class="fg-section-title">Top Notes</h4><div data-fragella-list="Notes.Top" class="notes-wrapper fg-notes-wrap"></div></div>
        <div><h4 class="fg-section-title">Middle Notes</h4><div data-fragella-list="Notes.Middle" class="notes-wrapper fg-notes-wrap"></div></div>
        <div><h4 class="fg-section-title">Base Notes</h4><div data-fragella-list="Notes.Base" class="notes-wrapper fg-notes-wrap"></div></div>
    </div>
</div>

<style>
    .fg-container { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.25rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); font-family: sans-serif; color: #1f2937; box-sizing: border-box; line-height: 1.5; }
    .fg-header { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid #f3f4f6; }
    @media (min-width: 640px) { .fg-header { flex-direction: row; } }
    .fg-image { width: 6rem; height: 8rem; object-fit: contain; background: #f9fafb; border-radius: 0.5rem; border: 1px solid #f3f4f6; padding: 0.5rem; box-sizing: border-box; }
    .fg-info { flex: 1; }
    .fg-title-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.25rem; }
    .fg-title { font-weight: 700; font-size: 1.5rem; color: #111827; line-height: 1.25; margin: 0; }
    .fg-brand { font-size: 0.875rem; font-weight: 500; color: #6b7280; margin: 0 0 0.5rem 0; }
    .fg-badge-gender { background: #f3f4f6; color: #4b5563; font-size: 10px; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
    .fg-badges-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.75rem; margin-bottom: 0.75rem; }
    .fg-badge { padding: 0.25rem 0.5rem; border-radius: 0.375rem; }
    .fg-badge-oil { background: #eef2ff; color: #4338ca; border: 1px solid #e0e7ff; font-weight: 600; }
    .fg-badge-gray { background: #f9fafb; color: #4b5563; border: 1px solid #e5e7eb; }
    .fg-badge-rating { background: #fefce8; color: #a16207; border: 1px solid #fef08a; font-weight: 700; display: flex; align-items: center; gap: 0.25rem; }
    .fg-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
    @media (min-width: 640px) { .fg-stats-grid { grid-template-columns: repeat(4, 1fr); } }
    .fg-stat-box { background: #f9fafb; padding: 0.75rem; border-radius: 0.5rem; border: 1px solid #f3f4f6; text-align: center; }
    .fg-stat-label { display: block; font-size: 10px; text-transform: uppercase; font-weight: 700; color: #9ca3af; margin-bottom: 0.25rem; }
    .fg-stat-val-primary { font-weight: 700; color: #4f46e5; font-size: 0.875rem; }
    .fg-stat-val-secondary { font-weight: 700; color: #374151; font-size: 0.875rem; text-transform: capitalize; }
    .fg-section { margin-bottom: 1.25rem; }
    .fg-section-title { font-size: 0.75rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; margin: 0 0 0.5rem 0; letter-spacing: 0.05em; }
    .fg-list-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .fg-notes-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid #f3f4f6; }
    @media (min-width: 768px) { .fg-notes-grid { grid-template-columns: repeat(3, 1fr); } }
    .fg-notes-wrap { display: flex; flex-wrap: wrap; gap: 0.375rem; }
    .notes-wrapper .fragella-list-item { background: #f3f4f6; color: #4b5563; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 500; border: 1px solid #e5e7eb; }
    .accords-wrapper .fragella-list-item { background: #1E3932; color: #ffffff; padding: 4px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; text-transform: capitalize; }
</style>

<!-- Fragella Widget: Botanical -->
<div class="fragella-data-container fg-container" data-fragrance-name="Sauvage">
    <div class="fg-header">
        <img data-fragella-image="Image URL" class="fg-image" alt="Fragrance Bottle" />
        <div class="fg-info">
            <div class="fg-title-row">
                <div>
                    <h3 class="fg-title" data-fragella-text="Name">Loading...</h3>
                    <p class="fg-brand">by <span data-fragella-text="Brand"></span></p>
                    <p class="fg-brand">Perfumers: <span data-fragella-text="perfumers"></span></p>
                    <p class="fg-brand">Brand founder: <span data-fragella-text="founder"></span></p>
                </div>
                <span class="fg-badge-gender" data-fragella-text="Gender"></span>
            </div>
            <div class="fg-badges-wrap">
                <span class="fg-badge fg-badge-oil" data-fragella-text="OilType"></span>
                <span class="fg-badge fg-badge-gray">Released: <span data-fragella-text="Year"></span></span>
                <span class="fg-badge fg-badge-gray"><span data-fragella-text="Country"></span></span>
                <span class="fg-badge fg-badge-rating">★ <span data-fragella-text="rating"></span></span>
            </div>
        </div>
    </div>
    <div class="fg-stats-grid">
        <div class="fg-stat-box"><span class="fg-stat-label">Longevity</span><span class="fg-stat-val-primary" data-fragella-text="Longevity"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Sillage</span><span class="fg-stat-val-primary" data-fragella-text="Sillage"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Popularity</span><span class="fg-stat-val-secondary" data-fragella-text="Popularity"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Value</span><span class="fg-stat-val-secondary" data-fragella-text="Price Value"></span></div>
    </div>
    <div class="fg-section">
        <h4 class="fg-section-title">Main Accords</h4>
        <div data-fragella-list="Main Accords Percentage" class="accords-wrapper fg-list-wrap"></div>
    </div>
    <div class="fg-notes-grid">
        <div><h4 class="fg-section-title">Top Notes</h4><div data-fragella-list="Notes.Top" class="notes-wrapper fg-notes-wrap"></div></div>
        <div><h4 class="fg-section-title">Middle Notes</h4><div data-fragella-list="Notes.Middle" class="notes-wrapper fg-notes-wrap"></div></div>
        <div><h4 class="fg-section-title">Base Notes</h4><div data-fragella-list="Notes.Base" class="notes-wrapper fg-notes-wrap"></div></div>
    </div>
</div>

<style>
    .fg-container { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.25rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); font-family: sans-serif; color: #1f2937; box-sizing: border-box; line-height: 1.5; }
    .fg-header { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid #f3f4f6; }
    @media (min-width: 640px) { .fg-header { flex-direction: row; } }
    .fg-image { width: 6rem; height: 8rem; object-fit: contain; background: #f9fafb; border-radius: 0.5rem; border: 1px solid #f3f4f6; padding: 0.5rem; box-sizing: border-box; }
    .fg-info { flex: 1; }
    .fg-title-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.25rem; }
    .fg-title { font-weight: 700; font-size: 1.5rem; color: #111827; line-height: 1.25; margin: 0; }
    .fg-brand { font-size: 0.875rem; font-weight: 500; color: #6b7280; margin: 0 0 0.5rem 0; }
    .fg-badge-gender { background: #f3f4f6; color: #4b5563; font-size: 10px; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
    .fg-badges-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.75rem; margin-bottom: 0.75rem; }
    .fg-badge { padding: 0.25rem 0.5rem; border-radius: 0.375rem; }
    .fg-badge-oil { background: #eef2ff; color: #4338ca; border: 1px solid #e0e7ff; font-weight: 600; }
    .fg-badge-gray { background: #f9fafb; color: #4b5563; border: 1px solid #e5e7eb; }
    .fg-badge-rating { background: #fefce8; color: #a16207; border: 1px solid #fef08a; font-weight: 700; display: flex; align-items: center; gap: 0.25rem; }
    .fg-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
    @media (min-width: 640px) { .fg-stats-grid { grid-template-columns: repeat(4, 1fr); } }
    .fg-stat-box { background: #f9fafb; padding: 0.75rem; border-radius: 0.5rem; border: 1px solid #f3f4f6; text-align: center; }
    .fg-stat-label { display: block; font-size: 10px; text-transform: uppercase; font-weight: 700; color: #9ca3af; margin-bottom: 0.25rem; }
    .fg-stat-val-primary { font-weight: 700; color: #4f46e5; font-size: 0.875rem; }
    .fg-stat-val-secondary { font-weight: 700; color: #374151; font-size: 0.875rem; text-transform: capitalize; }
    .fg-section { margin-bottom: 1.25rem; }
    .fg-section-title { font-size: 0.75rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; margin: 0 0 0.5rem 0; letter-spacing: 0.05em; }
    .fg-list-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .fg-notes-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid #f3f4f6; }
    @media (min-width: 768px) { .fg-notes-grid { grid-template-columns: repeat(3, 1fr); } }
    .fg-notes-wrap { display: flex; flex-wrap: wrap; gap: 0.375rem; }
    .notes-wrapper .fragella-list-item { background: #f3f4f6; color: #4b5563; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 500; border: 1px solid #e5e7eb; }
    .accords-wrapper .fragella-list-item { background: #1E3932; color: #ffffff; padding: 4px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; text-transform: capitalize; }

    /* Theme Override */
    .fg-container { background: #fdfbf7; border: 1px solid #e2e0d4; border-radius: 0.5rem; color: #4a5d23; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; }
    .fg-header { border-bottom: 1px dashed #c3cda6; }
    .fg-title { color: #2d3b14; }
    .fg-brand { color: #6b705c; }
    .fg-image { background: #fff; border: 1px solid #e2e0d4; }
    .fg-badge-gender { background: #e9edc9; color: #4a5d23; }
    .fg-badge-gray { background: #fefae0; border: 1px solid #e9edc9; color: #6b705c; }
    .fg-badge-oil { background: #dda15e; border: 1px solid #bc6c25; color: #fff; }
    .fg-badge-rating { background: #faedcd; border: 1px solid #d4a373; color: #bc6c25; }
    .fg-stat-box { background: #fefae0; border: 1px solid #e9edc9; border-radius: 0.5rem; }
    .fg-stat-label { color: #a3b18a; }
    .fg-stat-val-primary { color: #344e41; }
    .fg-stat-val-secondary { color: #588157; }
    .fg-section-title { color: #6b705c; border-bottom: 2px solid #e9edc9; padding-bottom: 4px; display: inline-block; margin-bottom: 10px; }
    .fg-notes-grid { border-top: none; }
    .notes-wrapper .fragella-list-item { background: #fff; color: #4a5d23; border: 1px solid #a3b18a; }
    .accords-wrapper .fragella-list-item { background: #344e41; color: #fff; }
</style>

<!-- Fragella Widget: Boutique -->
<div class="fragella-data-container fg-container" data-fragrance-name="Sauvage">
    <div class="fg-header">
        <img data-fragella-image="Image URL" class="fg-image" alt="Fragrance Bottle" />
        <div class="fg-info">
            <div class="fg-title-row">
                <div>
                    <h3 class="fg-title" data-fragella-text="Name">Loading...</h3>
                    <p class="fg-brand">by <span data-fragella-text="Brand"></span></p>
                    <p class="fg-brand">Perfumers: <span data-fragella-text="perfumers"></span></p>
                    <p class="fg-brand">Brand founder: <span data-fragella-text="founder"></span></p>
                </div>
                <span class="fg-badge-gender" data-fragella-text="Gender"></span>
            </div>
            <div class="fg-badges-wrap">
                <span class="fg-badge fg-badge-oil" data-fragella-text="OilType"></span>
                <span class="fg-badge fg-badge-gray">Released: <span data-fragella-text="Year"></span></span>
                <span class="fg-badge fg-badge-gray"><span data-fragella-text="Country"></span></span>
                <span class="fg-badge fg-badge-rating">★ <span data-fragella-text="rating"></span></span>
            </div>
        </div>
    </div>
    <div class="fg-stats-grid">
        <div class="fg-stat-box"><span class="fg-stat-label">Longevity</span><span class="fg-stat-val-primary" data-fragella-text="Longevity"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Sillage</span><span class="fg-stat-val-primary" data-fragella-text="Sillage"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Popularity</span><span class="fg-stat-val-secondary" data-fragella-text="Popularity"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Value</span><span class="fg-stat-val-secondary" data-fragella-text="Price Value"></span></div>
    </div>
    <div class="fg-section">
        <h4 class="fg-section-title">Main Accords</h4>
        <div data-fragella-list="Main Accords Percentage" class="accords-wrapper fg-list-wrap"></div>
    </div>
    <div class="fg-notes-grid">
        <div><h4 class="fg-section-title">Top Notes</h4><div data-fragella-list="Notes.Top" class="notes-wrapper fg-notes-wrap"></div></div>
        <div><h4 class="fg-section-title">Middle Notes</h4><div data-fragella-list="Notes.Middle" class="notes-wrapper fg-notes-wrap"></div></div>
        <div><h4 class="fg-section-title">Base Notes</h4><div data-fragella-list="Notes.Base" class="notes-wrapper fg-notes-wrap"></div></div>
    </div>
</div>

<style>
    .fg-container { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.25rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); font-family: sans-serif; color: #1f2937; box-sizing: border-box; line-height: 1.5; }
    .fg-header { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid #f3f4f6; }
    @media (min-width: 640px) { .fg-header { flex-direction: row; } }
    .fg-image { width: 6rem; height: 8rem; object-fit: contain; background: #f9fafb; border-radius: 0.5rem; border: 1px solid #f3f4f6; padding: 0.5rem; box-sizing: border-box; }
    .fg-info { flex: 1; }
    .fg-title-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.25rem; }
    .fg-title { font-weight: 700; font-size: 1.5rem; color: #111827; line-height: 1.25; margin: 0; }
    .fg-brand { font-size: 0.875rem; font-weight: 500; color: #6b7280; margin: 0 0 0.5rem 0; }
    .fg-badge-gender { background: #f3f4f6; color: #4b5563; font-size: 10px; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
    .fg-badges-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.75rem; margin-bottom: 0.75rem; }
    .fg-badge { padding: 0.25rem 0.5rem; border-radius: 0.375rem; }
    .fg-badge-oil { background: #eef2ff; color: #4338ca; border: 1px solid #e0e7ff; font-weight: 600; }
    .fg-badge-gray { background: #f9fafb; color: #4b5563; border: 1px solid #e5e7eb; }
    .fg-badge-rating { background: #fefce8; color: #a16207; border: 1px solid #fef08a; font-weight: 700; display: flex; align-items: center; gap: 0.25rem; }
    .fg-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
    @media (min-width: 640px) { .fg-stats-grid { grid-template-columns: repeat(4, 1fr); } }
    .fg-stat-box { background: #f9fafb; padding: 0.75rem; border-radius: 0.5rem; border: 1px solid #f3f4f6; text-align: center; }
    .fg-stat-label { display: block; font-size: 10px; text-transform: uppercase; font-weight: 700; color: #9ca3af; margin-bottom: 0.25rem; }
    .fg-stat-val-primary { font-weight: 700; color: #4f46e5; font-size: 0.875rem; }
    .fg-stat-val-secondary { font-weight: 700; color: #374151; font-size: 0.875rem; text-transform: capitalize; }
    .fg-section { margin-bottom: 1.25rem; }
    .fg-section-title { font-size: 0.75rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; margin: 0 0 0.5rem 0; letter-spacing: 0.05em; }
    .fg-list-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .fg-notes-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid #f3f4f6; }
    @media (min-width: 768px) { .fg-notes-grid { grid-template-columns: repeat(3, 1fr); } }
    .fg-notes-wrap { display: flex; flex-wrap: wrap; gap: 0.375rem; }
    .notes-wrapper .fragella-list-item { background: #f3f4f6; color: #4b5563; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 500; border: 1px solid #e5e7eb; }
    .accords-wrapper .fragella-list-item { background: #1E3932; color: #ffffff; padding: 4px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; text-transform: capitalize; }

    /* Theme Override */
    .fg-container { background: #ffffff; border: 2px solid #000000; border-radius: 0; box-shadow: none; font-family: 'Times New Roman', Times, serif; }
    .fg-header { border-bottom: 1px solid #000; }
    .fg-title { font-weight: 400; text-transform: uppercase; letter-spacing: 1px; }
    .fg-image { background: #fff; border: 1px solid #000; border-radius: 0; }
    .fg-badge-gender, .fg-badge-gray, .fg-badge-oil, .fg-badge-rating { background: transparent; border: 1px solid #000; color: #000; border-radius: 0; font-family: sans-serif; }
    .fg-stat-box { background: transparent; border: 1px solid #000; border-radius: 0; }
    .fg-stat-val-primary, .fg-stat-val-secondary { color: #000; }
    .fg-notes-grid { border-top: 1px solid #000; }
    .notes-wrapper .fragella-list-item { background: transparent; color: #000; border: 1px solid #000; border-radius: 0; font-family: sans-serif; text-transform: uppercase; letter-spacing: 0.5px; font-size: 9px; }
    .accords-wrapper .fragella-list-item { background: #000; color: #fff; border-radius: 0; font-family: sans-serif; text-transform: uppercase; letter-spacing: 1px; font-size: 9px; font-weight: normal; }
</style>

<!-- Fragella Widget: Cyber -->
<div class="fragella-data-container fg-container" data-fragrance-name="Sauvage">
    <div class="fg-header">
        <img data-fragella-image="Image URL" class="fg-image" alt="Fragrance Bottle" />
        <div class="fg-info">
            <div class="fg-title-row">
                <div>
                    <h3 class="fg-title" data-fragella-text="Name">Loading...</h3>
                    <p class="fg-brand">by <span data-fragella-text="Brand"></span></p>
                    <p class="fg-brand">Perfumers: <span data-fragella-text="perfumers"></span></p>
                    <p class="fg-brand">Brand founder: <span data-fragella-text="founder"></span></p>
                </div>
                <span class="fg-badge-gender" data-fragella-text="Gender"></span>
            </div>
            <div class="fg-badges-wrap">
                <span class="fg-badge fg-badge-oil" data-fragella-text="OilType"></span>
                <span class="fg-badge fg-badge-gray">Released: <span data-fragella-text="Year"></span></span>
                <span class="fg-badge fg-badge-gray"><span data-fragella-text="Country"></span></span>
                <span class="fg-badge fg-badge-rating">★ <span data-fragella-text="rating"></span></span>
            </div>
        </div>
    </div>
    <div class="fg-stats-grid">
        <div class="fg-stat-box"><span class="fg-stat-label">Longevity</span><span class="fg-stat-val-primary" data-fragella-text="Longevity"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Sillage</span><span class="fg-stat-val-primary" data-fragella-text="Sillage"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Popularity</span><span class="fg-stat-val-secondary" data-fragella-text="Popularity"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Value</span><span class="fg-stat-val-secondary" data-fragella-text="Price Value"></span></div>
    </div>
    <div class="fg-section">
        <h4 class="fg-section-title">Main Accords</h4>
        <div data-fragella-list="Main Accords Percentage" class="accords-wrapper fg-list-wrap"></div>
    </div>
    <div class="fg-notes-grid">
        <div><h4 class="fg-section-title">Top Notes</h4><div data-fragella-list="Notes.Top" class="notes-wrapper fg-notes-wrap"></div></div>
        <div><h4 class="fg-section-title">Middle Notes</h4><div data-fragella-list="Notes.Middle" class="notes-wrapper fg-notes-wrap"></div></div>
        <div><h4 class="fg-section-title">Base Notes</h4><div data-fragella-list="Notes.Base" class="notes-wrapper fg-notes-wrap"></div></div>
    </div>
</div>

<style>
    .fg-container { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.25rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); font-family: sans-serif; color: #1f2937; box-sizing: border-box; line-height: 1.5; }
    .fg-header { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid #f3f4f6; }
    @media (min-width: 640px) { .fg-header { flex-direction: row; } }
    .fg-image { width: 6rem; height: 8rem; object-fit: contain; background: #f9fafb; border-radius: 0.5rem; border: 1px solid #f3f4f6; padding: 0.5rem; box-sizing: border-box; }
    .fg-info { flex: 1; }
    .fg-title-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.25rem; }
    .fg-title { font-weight: 700; font-size: 1.5rem; color: #111827; line-height: 1.25; margin: 0; }
    .fg-brand { font-size: 0.875rem; font-weight: 500; color: #6b7280; margin: 0 0 0.5rem 0; }
    .fg-badge-gender { background: #f3f4f6; color: #4b5563; font-size: 10px; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
    .fg-badges-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.75rem; margin-bottom: 0.75rem; }
    .fg-badge { padding: 0.25rem 0.5rem; border-radius: 0.375rem; }
    .fg-badge-oil { background: #eef2ff; color: #4338ca; border: 1px solid #e0e7ff; font-weight: 600; }
    .fg-badge-gray { background: #f9fafb; color: #4b5563; border: 1px solid #e5e7eb; }
    .fg-badge-rating { background: #fefce8; color: #a16207; border: 1px solid #fef08a; font-weight: 700; display: flex; align-items: center; gap: 0.25rem; }
    .fg-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
    @media (min-width: 640px) { .fg-stats-grid { grid-template-columns: repeat(4, 1fr); } }
    .fg-stat-box { background: #f9fafb; padding: 0.75rem; border-radius: 0.5rem; border: 1px solid #f3f4f6; text-align: center; }
    .fg-stat-label { display: block; font-size: 10px; text-transform: uppercase; font-weight: 700; color: #9ca3af; margin-bottom: 0.25rem; }
    .fg-stat-val-primary { font-weight: 700; color: #4f46e5; font-size: 0.875rem; }
    .fg-stat-val-secondary { font-weight: 700; color: #374151; font-size: 0.875rem; text-transform: capitalize; }
    .fg-section { margin-bottom: 1.25rem; }
    .fg-section-title { font-size: 0.75rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; margin: 0 0 0.5rem 0; letter-spacing: 0.05em; }
    .fg-list-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .fg-notes-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid #f3f4f6; }
    @media (min-width: 768px) { .fg-notes-grid { grid-template-columns: repeat(3, 1fr); } }
    .fg-notes-wrap { display: flex; flex-wrap: wrap; gap: 0.375rem; }
    .notes-wrapper .fragella-list-item { background: #f3f4f6; color: #4b5563; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 500; border: 1px solid #e5e7eb; }
    .accords-wrapper .fragella-list-item { background: #1E3932; color: #ffffff; padding: 4px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; text-transform: capitalize; }

    /* Theme Override */
    .fg-container { background: #0a0a0c; border: 1px solid #00ffcc; border-radius: 0; color: #e0e0e0; font-family: 'Courier New', Courier, monospace; box-shadow: 0 0 15px rgba(0,255,204,0.15); }
    .fg-header { border-bottom: 1px solid #ff00ff; }
    .fg-title { color: #00ffcc; text-transform: uppercase; text-shadow: 0 0 5px rgba(0,255,204,0.4); }
    .fg-brand { color: #ff00ff; }
    .fg-image { background: #000; border: 1px solid #ff00ff; }
    .fg-badge-gender { background: #1a1a24; color: #00ffcc; border: 1px solid #00ffcc; }
    .fg-badge-gray { background: #0a0a0c; border: 1px solid #333; color: #aaa; }
    .fg-badge-oil { background: #ff00ff; border: 1px solid #ff00ff; color: #000; font-weight: bold; }
    .fg-badge-rating { background: #ffff00; border: 1px solid #ffff00; color: #000; }
    .fg-stat-box { background: #111; border: 1px solid #222; border-radius: 0; border-left: 3px solid #00ffcc; }
    .fg-stat-label { color: #666; }
    .fg-stat-val-primary { color: #ff00ff; }
    .fg-stat-val-secondary { color: #00ffcc; }
    .fg-section-title { color: #ffff00; }
    .fg-notes-grid { border-top: 1px solid #333; }
    .notes-wrapper .fragella-list-item { background: #111; color: #00ffcc; border: 1px solid #00ffcc; border-radius: 0; }
    .accords-wrapper .fragella-list-item { background: #ff00ff; color: #000; border-radius: 0; font-weight: bold; }
</style>

<!-- Fragella Widget: Rose Gold -->
<div class="fragella-data-container fg-container" data-fragrance-name="Sauvage">
    <div class="fg-header">
        <img data-fragella-image="Image URL" class="fg-image" alt="Fragrance Bottle" />
        <div class="fg-info">
            <div class="fg-title-row">
                <div>
                    <h3 class="fg-title" data-fragella-text="Name">Loading...</h3>
                    <p class="fg-brand">by <span data-fragella-text="Brand"></span></p>
                    <p class="fg-brand">Perfumers: <span data-fragella-text="perfumers"></span></p>
                    <p class="fg-brand">Brand founder: <span data-fragella-text="founder"></span></p>
                </div>
                <span class="fg-badge-gender" data-fragella-text="Gender"></span>
            </div>
            <div class="fg-badges-wrap">
                <span class="fg-badge fg-badge-oil" data-fragella-text="OilType"></span>
                <span class="fg-badge fg-badge-gray">Released: <span data-fragella-text="Year"></span></span>
                <span class="fg-badge fg-badge-gray"><span data-fragella-text="Country"></span></span>
                <span class="fg-badge fg-badge-rating">★ <span data-fragella-text="rating"></span></span>
            </div>
        </div>
    </div>
    <div class="fg-stats-grid">
        <div class="fg-stat-box"><span class="fg-stat-label">Longevity</span><span class="fg-stat-val-primary" data-fragella-text="Longevity"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Sillage</span><span class="fg-stat-val-primary" data-fragella-text="Sillage"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Popularity</span><span class="fg-stat-val-secondary" data-fragella-text="Popularity"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Value</span><span class="fg-stat-val-secondary" data-fragella-text="Price Value"></span></div>
    </div>
    <div class="fg-section">
        <h4 class="fg-section-title">Main Accords</h4>
        <div data-fragella-list="Main Accords Percentage" class="accords-wrapper fg-list-wrap"></div>
    </div>
    <div class="fg-notes-grid">
        <div><h4 class="fg-section-title">Top Notes</h4><div data-fragella-list="Notes.Top" class="notes-wrapper fg-notes-wrap"></div></div>
        <div><h4 class="fg-section-title">Middle Notes</h4><div data-fragella-list="Notes.Middle" class="notes-wrapper fg-notes-wrap"></div></div>
        <div><h4 class="fg-section-title">Base Notes</h4><div data-fragella-list="Notes.Base" class="notes-wrapper fg-notes-wrap"></div></div>
    </div>
</div>

<style>
    .fg-container { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.25rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); font-family: sans-serif; color: #1f2937; box-sizing: border-box; line-height: 1.5; }
    .fg-header { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid #f3f4f6; }
    @media (min-width: 640px) { .fg-header { flex-direction: row; } }
    .fg-image { width: 6rem; height: 8rem; object-fit: contain; background: #f9fafb; border-radius: 0.5rem; border: 1px solid #f3f4f6; padding: 0.5rem; box-sizing: border-box; }
    .fg-info { flex: 1; }
    .fg-title-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.25rem; }
    .fg-title { font-weight: 700; font-size: 1.5rem; color: #111827; line-height: 1.25; margin: 0; }
    .fg-brand { font-size: 0.875rem; font-weight: 500; color: #6b7280; margin: 0 0 0.5rem 0; }
    .fg-badge-gender { background: #f3f4f6; color: #4b5563; font-size: 10px; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
    .fg-badges-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.75rem; margin-bottom: 0.75rem; }
    .fg-badge { padding: 0.25rem 0.5rem; border-radius: 0.375rem; }
    .fg-badge-oil { background: #eef2ff; color: #4338ca; border: 1px solid #e0e7ff; font-weight: 600; }
    .fg-badge-gray { background: #f9fafb; color: #4b5563; border: 1px solid #e5e7eb; }
    .fg-badge-rating { background: #fefce8; color: #a16207; border: 1px solid #fef08a; font-weight: 700; display: flex; align-items: center; gap: 0.25rem; }
    .fg-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
    @media (min-width: 640px) { .fg-stats-grid { grid-template-columns: repeat(4, 1fr); } }
    .fg-stat-box { background: #f9fafb; padding: 0.75rem; border-radius: 0.5rem; border: 1px solid #f3f4f6; text-align: center; }
    .fg-stat-label { display: block; font-size: 10px; text-transform: uppercase; font-weight: 700; color: #9ca3af; margin-bottom: 0.25rem; }
    .fg-stat-val-primary { font-weight: 700; color: #4f46e5; font-size: 0.875rem; }
    .fg-stat-val-secondary { font-weight: 700; color: #374151; font-size: 0.875rem; text-transform: capitalize; }
    .fg-section { margin-bottom: 1.25rem; }
    .fg-section-title { font-size: 0.75rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; margin: 0 0 0.5rem 0; letter-spacing: 0.05em; }
    .fg-list-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .fg-notes-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid #f3f4f6; }
    @media (min-width: 768px) { .fg-notes-grid { grid-template-columns: repeat(3, 1fr); } }
    .fg-notes-wrap { display: flex; flex-wrap: wrap; gap: 0.375rem; }
    .notes-wrapper .fragella-list-item { background: #f3f4f6; color: #4b5563; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 500; border: 1px solid #e5e7eb; }
    .accords-wrapper .fragella-list-item { background: #1E3932; color: #ffffff; padding: 4px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; text-transform: capitalize; }

    /* Theme Override */
    .fg-container { background: #fffafb; border: 1px solid #fce7f3; border-radius: 1.5rem; color: #500724; }
    .fg-header { border-bottom-color: #fce7f3; }
    .fg-title { color: #831843; font-family: Georgia, serif; font-style: italic; }
    .fg-brand { color: #be185d; }
    .fg-image { background: #fff; border-color: #fce7f3; border-radius: 1rem; }
    .fg-badge-gender { background: #fce7f3; color: #9d174d; }
    .fg-badge-gray { background: #fff; border-color: #fbcfe8; color: #9d174d; }
    .fg-badge-oil { background: #fdf2f8; border-color: #fbcfe8; color: #db2777; }
    .fg-badge-rating { background: #fff1f2; border-color: #fecdd3; color: #e11d48; }
    .fg-stats-grid { gap: 1rem; }
    .fg-stat-box { background: #fff; border-color: #fce7f3; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(252, 231, 243, 0.5); }
    .fg-stat-label { color: #f472b6; }
    .fg-stat-val-primary { color: #be185d; }
    .fg-stat-val-secondary { color: #9d174d; }
    .fg-section-title { color: #f472b6; }
    .fg-notes-grid { border-top-color: #fce7f3; }
    .notes-wrapper .fragella-list-item { background: #fff; color: #9d174d; border-color: #fbcfe8; border-radius: 999px; }
    .accords-wrapper .fragella-list-item { background: #be185d; color: #fff; border-radius: 999px; font-weight: normal; }
</style>

<!-- Fragella Widget: Midnight -->
<div class="fragella-data-container fg-container" data-fragrance-name="Sauvage">
    <div class="fg-header">
        <img data-fragella-image="Image URL" class="fg-image" alt="Fragrance Bottle" />
        <div class="fg-info">
            <div class="fg-title-row">
                <div>
                    <h3 class="fg-title" data-fragella-text="Name">Loading...</h3>
                    <p class="fg-brand">by <span data-fragella-text="Brand"></span></p>
                    <p class="fg-brand">Perfumers: <span data-fragella-text="perfumers"></span></p>
                    <p class="fg-brand">Brand founder: <span data-fragella-text="founder"></span></p>
                </div>
                <span class="fg-badge-gender" data-fragella-text="Gender"></span>
            </div>
            <div class="fg-badges-wrap">
                <span class="fg-badge fg-badge-oil" data-fragella-text="OilType"></span>
                <span class="fg-badge fg-badge-gray">Released: <span data-fragella-text="Year"></span></span>
                <span class="fg-badge fg-badge-gray"><span data-fragella-text="Country"></span></span>
                <span class="fg-badge fg-badge-rating">★ <span data-fragella-text="rating"></span></span>
            </div>
        </div>
    </div>
    <div class="fg-stats-grid">
        <div class="fg-stat-box"><span class="fg-stat-label">Longevity</span><span class="fg-stat-val-primary" data-fragella-text="Longevity"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Sillage</span><span class="fg-stat-val-primary" data-fragella-text="Sillage"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Popularity</span><span class="fg-stat-val-secondary" data-fragella-text="Popularity"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Value</span><span class="fg-stat-val-secondary" data-fragella-text="Price Value"></span></div>
    </div>
    <div class="fg-section">
        <h4 class="fg-section-title">Main Accords</h4>
        <div data-fragella-list="Main Accords Percentage" class="accords-wrapper fg-list-wrap"></div>
    </div>
    <div class="fg-notes-grid">
        <div><h4 class="fg-section-title">Top Notes</h4><div data-fragella-list="Notes.Top" class="notes-wrapper fg-notes-wrap"></div></div>
        <div><h4 class="fg-section-title">Middle Notes</h4><div data-fragella-list="Notes.Middle" class="notes-wrapper fg-notes-wrap"></div></div>
        <div><h4 class="fg-section-title">Base Notes</h4><div data-fragella-list="Notes.Base" class="notes-wrapper fg-notes-wrap"></div></div>
    </div>
</div>

<style>
    .fg-container { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.25rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); font-family: sans-serif; color: #1f2937; box-sizing: border-box; line-height: 1.5; }
    .fg-header { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid #f3f4f6; }
    @media (min-width: 640px) { .fg-header { flex-direction: row; } }
    .fg-image { width: 6rem; height: 8rem; object-fit: contain; background: #f9fafb; border-radius: 0.5rem; border: 1px solid #f3f4f6; padding: 0.5rem; box-sizing: border-box; }
    .fg-info { flex: 1; }
    .fg-title-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.25rem; }
    .fg-title { font-weight: 700; font-size: 1.5rem; color: #111827; line-height: 1.25; margin: 0; }
    .fg-brand { font-size: 0.875rem; font-weight: 500; color: #6b7280; margin: 0 0 0.5rem 0; }
    .fg-badge-gender { background: #f3f4f6; color: #4b5563; font-size: 10px; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
    .fg-badges-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.75rem; margin-bottom: 0.75rem; }
    .fg-badge { padding: 0.25rem 0.5rem; border-radius: 0.375rem; }
    .fg-badge-oil { background: #eef2ff; color: #4338ca; border: 1px solid #e0e7ff; font-weight: 600; }
    .fg-badge-gray { background: #f9fafb; color: #4b5563; border: 1px solid #e5e7eb; }
    .fg-badge-rating { background: #fefce8; color: #a16207; border: 1px solid #fef08a; font-weight: 700; display: flex; align-items: center; gap: 0.25rem; }
    .fg-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
    @media (min-width: 640px) { .fg-stats-grid { grid-template-columns: repeat(4, 1fr); } }
    .fg-stat-box { background: #f9fafb; padding: 0.75rem; border-radius: 0.5rem; border: 1px solid #f3f4f6; text-align: center; }
    .fg-stat-label { display: block; font-size: 10px; text-transform: uppercase; font-weight: 700; color: #9ca3af; margin-bottom: 0.25rem; }
    .fg-stat-val-primary { font-weight: 700; color: #4f46e5; font-size: 0.875rem; }
    .fg-stat-val-secondary { font-weight: 700; color: #374151; font-size: 0.875rem; text-transform: capitalize; }
    .fg-section { margin-bottom: 1.25rem; }
    .fg-section-title { font-size: 0.75rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; margin: 0 0 0.5rem 0; letter-spacing: 0.05em; }
    .fg-list-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .fg-notes-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid #f3f4f6; }
    @media (min-width: 768px) { .fg-notes-grid { grid-template-columns: repeat(3, 1fr); } }
    .fg-notes-wrap { display: flex; flex-wrap: wrap; gap: 0.375rem; }
    .notes-wrapper .fragella-list-item { background: #f3f4f6; color: #4b5563; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 500; border: 1px solid #e5e7eb; }
    .accords-wrapper .fragella-list-item { background: #1E3932; color: #ffffff; padding: 4px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; text-transform: capitalize; }

    /* Theme Override */
    .fg-container { background: #111827; border-color: #374151; color: #f9fafb; }
    .fg-header { border-bottom-color: #374151; }
    .fg-title { color: #ffffff; }
    .fg-brand { color: #9ca3af; }
    .fg-image { background: #1f2937; border-color: #374151; }
    .fg-badge-gender { background: #374151; color: #d1d5db; }
    .fg-badge-gray { background: #1f2937; border-color: #374151; color: #d1d5db; }
    .fg-badge-oil { background: #312e81; border-color: #4338ca; color: #e0e7ff; }
    .fg-badge-rating { background: #422006; border-color: #713f12; color: #fef08a; }
    .fg-stat-box { background: #1f2937; border-color: #374151; }
    .fg-stat-val-primary { color: #818cf8; }
    .fg-stat-val-secondary { color: #e5e7eb; }
    .fg-notes-grid { border-top-color: #374151; }
    .notes-wrapper .fragella-list-item { background: #374151; color: #e5e7eb; border-color: #4b5563; }
    .accords-wrapper .fragella-list-item { background: #059669; color: #ffffff; }
</style>

<!-- Fragella Widget: Glassmorphism -->
<div class="fragella-data-container fg-container" data-fragrance-name="Sauvage">
    <div class="fg-header">
        <img data-fragella-image="Image URL" class="fg-image" alt="Fragrance Bottle" />
        <div class="fg-info">
            <div class="fg-title-row">
                <div>
                    <h3 class="fg-title" data-fragella-text="Name">Loading...</h3>
                    <p class="fg-brand">by <span data-fragella-text="Brand"></span></p>
                    <p class="fg-brand">Perfumers: <span data-fragella-text="perfumers"></span></p>
                    <p class="fg-brand">Brand founder: <span data-fragella-text="founder"></span></p>
                </div>
                <span class="fg-badge-gender" data-fragella-text="Gender"></span>
            </div>
            <div class="fg-badges-wrap">
                <span class="fg-badge fg-badge-oil" data-fragella-text="OilType"></span>
                <span class="fg-badge fg-badge-gray">Released: <span data-fragella-text="Year"></span></span>
                <span class="fg-badge fg-badge-gray"><span data-fragella-text="Country"></span></span>
                <span class="fg-badge fg-badge-rating">★ <span data-fragella-text="rating"></span></span>
            </div>
        </div>
    </div>
    <div class="fg-stats-grid">
        <div class="fg-stat-box"><span class="fg-stat-label">Longevity</span><span class="fg-stat-val-primary" data-fragella-text="Longevity"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Sillage</span><span class="fg-stat-val-primary" data-fragella-text="Sillage"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Popularity</span><span class="fg-stat-val-secondary" data-fragella-text="Popularity"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Value</span><span class="fg-stat-val-secondary" data-fragella-text="Price Value"></span></div>
    </div>
    <div class="fg-section">
        <h4 class="fg-section-title">Main Accords</h4>
        <div data-fragella-list="Main Accords Percentage" class="accords-wrapper fg-list-wrap"></div>
    </div>
    <div class="fg-notes-grid">
        <div><h4 class="fg-section-title">Top Notes</h4><div data-fragella-list="Notes.Top" class="notes-wrapper fg-notes-wrap"></div></div>
        <div><h4 class="fg-section-title">Middle Notes</h4><div data-fragella-list="Notes.Middle" class="notes-wrapper fg-notes-wrap"></div></div>
        <div><h4 class="fg-section-title">Base Notes</h4><div data-fragella-list="Notes.Base" class="notes-wrapper fg-notes-wrap"></div></div>
    </div>
</div>

<style>
    .fg-container { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.25rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); font-family: sans-serif; color: #1f2937; box-sizing: border-box; line-height: 1.5; }
    .fg-header { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid #f3f4f6; }
    @media (min-width: 640px) { .fg-header { flex-direction: row; } }
    .fg-image { width: 6rem; height: 8rem; object-fit: contain; background: #f9fafb; border-radius: 0.5rem; border: 1px solid #f3f4f6; padding: 0.5rem; box-sizing: border-box; }
    .fg-info { flex: 1; }
    .fg-title-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.25rem; }
    .fg-title { font-weight: 700; font-size: 1.5rem; color: #111827; line-height: 1.25; margin: 0; }
    .fg-brand { font-size: 0.875rem; font-weight: 500; color: #6b7280; margin: 0 0 0.5rem 0; }
    .fg-badge-gender { background: #f3f4f6; color: #4b5563; font-size: 10px; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
    .fg-badges-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.75rem; margin-bottom: 0.75rem; }
    .fg-badge { padding: 0.25rem 0.5rem; border-radius: 0.375rem; }
    .fg-badge-oil { background: #eef2ff; color: #4338ca; border: 1px solid #e0e7ff; font-weight: 600; }
    .fg-badge-gray { background: #f9fafb; color: #4b5563; border: 1px solid #e5e7eb; }
    .fg-badge-rating { background: #fefce8; color: #a16207; border: 1px solid #fef08a; font-weight: 700; display: flex; align-items: center; gap: 0.25rem; }
    .fg-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
    @media (min-width: 640px) { .fg-stats-grid { grid-template-columns: repeat(4, 1fr); } }
    .fg-stat-box { background: #f9fafb; padding: 0.75rem; border-radius: 0.5rem; border: 1px solid #f3f4f6; text-align: center; }
    .fg-stat-label { display: block; font-size: 10px; text-transform: uppercase; font-weight: 700; color: #9ca3af; margin-bottom: 0.25rem; }
    .fg-stat-val-primary { font-weight: 700; color: #4f46e5; font-size: 0.875rem; }
    .fg-stat-val-secondary { font-weight: 700; color: #374151; font-size: 0.875rem; text-transform: capitalize; }
    .fg-section { margin-bottom: 1.25rem; }
    .fg-section-title { font-size: 0.75rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; margin: 0 0 0.5rem 0; letter-spacing: 0.05em; }
    .fg-list-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .fg-notes-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid #f3f4f6; }
    @media (min-width: 768px) { .fg-notes-grid { grid-template-columns: repeat(3, 1fr); } }
    .fg-notes-wrap { display: flex; flex-wrap: wrap; gap: 0.375rem; }
    .notes-wrapper .fragella-list-item { background: #f3f4f6; color: #4b5563; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 500; border: 1px solid #e5e7eb; }
    .accords-wrapper .fragella-list-item { background: #1E3932; color: #ffffff; padding: 4px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; text-transform: capitalize; }

    /* Theme Override */
    .fg-container { background: rgba(255, 255, 255, 0.25); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 1.5rem; color: #1f2937; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1); }
    .fg-header { border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
    .fg-title { color: #111827; }
    .fg-brand { color: #4b5563; }
    .fg-image { background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 1rem; }
    .fg-badge-gender { background: rgba(255, 255, 255, 0.6); color: #374151; }
    .fg-badge-gray { background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.5); color: #4b5563; }
    .fg-badge-oil { background: rgba(99, 102, 241, 0.15); border: 1px solid rgba(99, 102, 241, 0.3); color: #4338ca; }
    .fg-badge-rating { background: rgba(253, 224, 71, 0.2); border: 1px solid rgba(253, 224, 71, 0.4); color: #a16207; }
    .fg-stat-box { background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 1rem; box-shadow: inset 0 2px 4px 0 rgba(255, 255, 255, 0.3); }
    .fg-stat-label { color: #6b7280; }
    .fg-stat-val-primary { color: #4338ca; }
    .fg-stat-val-secondary { color: #374151; }
    .fg-section-title { color: #4b5563; }
    .fg-notes-grid { border-top: 1px solid rgba(255, 255, 255, 0.5); }
    .notes-wrapper .fragella-list-item { background: rgba(255, 255, 255, 0.5); color: #374151; border: 1px solid rgba(255, 255, 255, 0.6); }
    .accords-wrapper .fragella-list-item { background: rgba(31, 41, 55, 0.8); color: #fff; backdrop-filter: blur(4px); }
</style>

<!-- Fragella Widget: Oceanic -->
<div class="fragella-data-container fg-container" data-fragrance-name="Sauvage">
    <div class="fg-header">
        <img data-fragella-image="Image URL" class="fg-image" alt="Fragrance Bottle" />
        <div class="fg-info">
            <div class="fg-title-row">
                <div>
                    <h3 class="fg-title" data-fragella-text="Name">Loading...</h3>
                    <p class="fg-brand">by <span data-fragella-text="Brand"></span></p>
                    <p class="fg-brand">Perfumers: <span data-fragella-text="perfumers"></span></p>
                    <p class="fg-brand">Brand founder: <span data-fragella-text="founder"></span></p>
                </div>
                <span class="fg-badge-gender" data-fragella-text="Gender"></span>
            </div>
            <div class="fg-badges-wrap">
                <span class="fg-badge fg-badge-oil" data-fragella-text="OilType"></span>
                <span class="fg-badge fg-badge-gray">Released: <span data-fragella-text="Year"></span></span>
                <span class="fg-badge fg-badge-gray"><span data-fragella-text="Country"></span></span>
                <span class="fg-badge fg-badge-rating">★ <span data-fragella-text="rating"></span></span>
            </div>
        </div>
    </div>
    <div class="fg-stats-grid">
        <div class="fg-stat-box"><span class="fg-stat-label">Longevity</span><span class="fg-stat-val-primary" data-fragella-text="Longevity"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Sillage</span><span class="fg-stat-val-primary" data-fragella-text="Sillage"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Popularity</span><span class="fg-stat-val-secondary" data-fragella-text="Popularity"></span></div>
        <div class="fg-stat-box"><span class="fg-stat-label">Value</span><span class="fg-stat-val-secondary" data-fragella-text="Price Value"></span></div>
    </div>
    <div class="fg-section">
        <h4 class="fg-section-title">Main Accords</h4>
        <div data-fragella-list="Main Accords Percentage" class="accords-wrapper fg-list-wrap"></div>
    </div>
    <div class="fg-notes-grid">
        <div><h4 class="fg-section-title">Top Notes</h4><div data-fragella-list="Notes.Top" class="notes-wrapper fg-notes-wrap"></div></div>
        <div><h4 class="fg-section-title">Middle Notes</h4><div data-fragella-list="Notes.Middle" class="notes-wrapper fg-notes-wrap"></div></div>
        <div><h4 class="fg-section-title">Base Notes</h4><div data-fragella-list="Notes.Base" class="notes-wrapper fg-notes-wrap"></div></div>
    </div>
</div>

<style>
    .fg-container { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.25rem; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); font-family: sans-serif; color: #1f2937; box-sizing: border-box; line-height: 1.5; }
    .fg-header { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid #f3f4f6; }
    @media (min-width: 640px) { .fg-header { flex-direction: row; } }
    .fg-image { width: 6rem; height: 8rem; object-fit: contain; background: #f9fafb; border-radius: 0.5rem; border: 1px solid #f3f4f6; padding: 0.5rem; box-sizing: border-box; }
    .fg-info { flex: 1; }
    .fg-title-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.25rem; }
    .fg-title { font-weight: 700; font-size: 1.5rem; color: #111827; line-height: 1.25; margin: 0; }
    .fg-brand { font-size: 0.875rem; font-weight: 500; color: #6b7280; margin: 0 0 0.5rem 0; }
    .fg-badge-gender { background: #f3f4f6; color: #4b5563; font-size: 10px; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
    .fg-badges-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.75rem; margin-bottom: 0.75rem; }
    .fg-badge { padding: 0.25rem 0.5rem; border-radius: 0.375rem; }
    .fg-badge-oil { background: #eef2ff; color: #4338ca; border: 1px solid #e0e7ff; font-weight: 600; }
    .fg-badge-gray { background: #f9fafb; color: #4b5563; border: 1px solid #e5e7eb; }
    .fg-badge-rating { background: #fefce8; color: #a16207; border: 1px solid #fef08a; font-weight: 700; display: flex; align-items: center; gap: 0.25rem; }
    .fg-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
    @media (min-width: 640px) { .fg-stats-grid { grid-template-columns: repeat(4, 1fr); } }
    .fg-stat-box { background: #f9fafb; padding: 0.75rem; border-radius: 0.5rem; border: 1px solid #f3f4f6; text-align: center; }
    .fg-stat-label { display: block; font-size: 10px; text-transform: uppercase; font-weight: 700; color: #9ca3af; margin-bottom: 0.25rem; }
    .fg-stat-val-primary { font-weight: 700; color: #4f46e5; font-size: 0.875rem; }
    .fg-stat-val-secondary { font-weight: 700; color: #374151; font-size: 0.875rem; text-transform: capitalize; }
    .fg-section { margin-bottom: 1.25rem; }
    .fg-section-title { font-size: 0.75rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; margin: 0 0 0.5rem 0; letter-spacing: 0.05em; }
    .fg-list-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .fg-notes-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid #f3f4f6; }
    @media (min-width: 768px) { .fg-notes-grid { grid-template-columns: repeat(3, 1fr); } }
    .fg-notes-wrap { display: flex; flex-wrap: wrap; gap: 0.375rem; }
    .notes-wrapper .fragella-list-item { background: #f3f4f6; color: #4b5563; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 500; border: 1px solid #e5e7eb; }
    .accords-wrapper .fragella-list-item { background: #1E3932; color: #ffffff; padding: 4px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; text-transform: capitalize; }

    /* Theme Override */
    .fg-container { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 1rem; color: #0c4a6e; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-shadow: 0 4px 6px -1px rgba(186, 230, 253, 0.5); }
    .fg-header { border-bottom: 2px solid #e0f2fe; }
    .fg-title { color: #0284c7; font-weight: 800; }
    .fg-brand { color: #0ea5e9; }
    .fg-image { background: #fff; border: 2px solid #e0f2fe; border-radius: 50%; width: 7rem; height: 7rem; object-fit: cover; }
    .fg-badge-gender { background: #e0f2fe; color: #0369a1; }
    .fg-badge-gray { background: #fff; border: 1px solid #bae6fd; color: #0284c7; }
    .fg-badge-oil { background: #0284c7; border: 1px solid #0369a1; color: #fff; }
    .fg-badge-rating { background: #fffbeb; border: 1px solid #fde68a; color: #d97706; }
    .fg-stat-box { background: #fff; border: 1px solid #e0f2fe; border-radius: 0.75rem; }
    .fg-stat-label { color: #38bdf8; }
    .fg-stat-val-primary { color: #0284c7; }
    .fg-stat-val-secondary { color: #0369a1; }
    .fg-section-title { color: #0284c7; text-transform: uppercase; letter-spacing: 1px; }
    .fg-notes-grid { border-top: 2px solid #e0f2fe; }
    .notes-wrapper .fragella-list-item { background: #fff; color: #0284c7; border: 1px solid #bae6fd; border-radius: 0.5rem; }
    .accords-wrapper .fragella-list-item { background: #0ea5e9; color: #fff; border-radius: 0.5rem; }
</style>