/* Autogenerated Global Styles for CustomFit Widgets */
:root {
	--font-heading: 'Playfair Display', serif;
	--font-body: 'Inter', sans-serif;
	--font-hand: 'Nanum Pen Script', cursive;
	--spacing-sm: 1rem; --spacing-md: 2rem; --spacing-lg: 3rem; --spacing-xl: 5rem;
    --text-dark: #ffffff;
    --text-light: #ffffff;
    --text-muted: #aaaaaa;
    --bg-light: rgba(255,255,255,0.03);
    --bg-dark: #121212;
    --border-color: rgba(255,255,255,0.1);
}

img { max-width: 100%; height: auto; }
/* =========================================
           WIDGET 1: Split Screen Hero
           ========================================= */
        .w1-hero {
            display: flex;
            min-height: 80vh;
        }

        .w1-hero-content {
            flex: 1;
            padding: var(--spacing-xl);
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: rgba(255,255,255,0.03);
        }

        .w1-hero-image {
            flex: 1;
            background: url('https://images.unsplash.com/photo-1594938298596-ef89aaeb6b94?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80') center/cover;
            position: relative;
        }

        .w1-trust {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--wp--preset--color--primary);
            margin-bottom: 20px;
            font-weight: 600;
        }

        .w1-title {
            font-size: 4rem;
            line-height: 1.1;
            margin-bottom: 20px;
            color: #ffffff;
        }

        .w1-desc {
            font-size: 1.1rem;
            margin-bottom: 40px;
            max-width: 80%;
        }

        /* =========================================
           WIDGET 2: Centered Glassmorphism Hero
           ========================================= */
        .w2-hero {
            height: 90vh;
            background: url('https://images.unsplash.com/photo-1598808503746-f34c53b93222?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .w2-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.4);
        }

        .w2-glass-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: var(--spacing-lg);
            text-align: center;
            border-radius: 12px;
            position: relative;
            z-index: 2;
            color: #fff;
            max-width: 800px;
        }

        .w2-glass-card h2 {
            font-size: 3.5rem;
            color: #fff;
            margin-bottom: 15px;
        }

        .w2-glass-card p {
            color: #f0f0f0;
            font-size: 1.2rem;
        }

        .w2-features {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 30px;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
        }

        .w2-feature span {
            color: var(--wp--preset--color--primary);
            font-weight: bold;
        }

        /* =========================================
           WIDGET 3: Minimalist Typography Hero
           ========================================= */
        .w3-hero {
            padding: var(--spacing-xl) var(--spacing-md);
            text-align: center;
            background: transparent;
        }

        .w3-pretitle {
            color: var(--text-muted);
            letter-spacing: 4px;
            text-transform: uppercase;
            font-size: 0.85rem;
            margin-bottom: 20px;
            display: block;
        }

        .w3-title {
            font-size: 5rem;
            line-height: 1;
            margin-bottom: 30px;
            font-style: italic;
        }

        .w3-title span {
            color: var(--wp--preset--color--primary);
        }

        .w3-video-block {
            margin-top: var(--spacing-lg);
            height: 500px;
            background: #ccc url('https://images.unsplash.com/photo-1594938328870-9623159c8c99?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80') center/cover;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .w3-play {
            width: 80px;
            height: 80px;
            background: transparent;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 24px;
            cursor: pointer;
            transition: transform 0.3s;
        }

        .w3-play:hover {
            transform: scale(1.1);
            color: var(--wp--preset--color--primary);
        }

        /* =========================================
           WIDGET 4: E-commerce Product Hero
           ========================================= */
        .w4-hero {
            display: grid;
            grid-template-columns: 1fr 1fr;
            background: var(--bg-dark);
            color: #fff;
        }

        .w4-content {
            padding: var(--spacing-xl);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .w4-content h2 {
            color: #fff;
            font-size: 3.5rem;
        }

        .w4-content p {
            color: #aaa;
        }

        .w4-btn {
            background: transparent;
            color: #ffffff;
        }

        .w4-carousel {
            display: flex;
            gap: 20px;
            padding: var(--spacing-xl) 0;
            overflow-x: auto;
            align-items: center;
        }

        .w4-card {
            min-width: 250px;
            background: #2a2a2a;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }

        .w4-card img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-radius: 4px;
            margin-bottom: 15px;
        }

        .w4-card h4 {
            color: #fff;
            margin-bottom: 5px;
        }

        .w4-card .price {
            color: var(--wp--preset--color--primary);
            font-weight: bold;
        }

        /* =========================================
           WIDGET 5: Trust Bar Hero
           ========================================= */
        .w5-hero {
            text-align: center;
            padding: var(--spacing-xl) 20px 0;
            background: linear-gradient(to bottom, #fff 0%, #f9f9f9 100%);
        }

        .w5-title {
            font-size: 3.8rem;
            margin-bottom: 20px;
        }

        .w5-trust-bar {
            margin-top: var(--spacing-lg);
            background: transparent;
            padding: 30px;
            display: flex;
            justify-content: center;
            gap: 60px;
            border-top: 1px solid rgba(255,255,255,0.1);
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .w5-trust-item {
            color: var(--text-muted);
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .w5-trust-item svg {
            fill: var(--wp--preset--color--primary);
            width: 24px;
            height: 24px;
        }

        /* =========================================
           WIDGET 6: "Why Custom" Storytelling
           ========================================= */
        .w6-story {
            display: flex;
            padding: var(--spacing-xl);
            gap: 60px;
            align-items: center;
        }

        .w6-title {
            font-size: 2.5rem;
            flex: 1;
            border-left: 4px solid var(--wp--preset--color--primary);
            padding-left: 30px;
        }

        .w6-text {
            flex: 2;
            font-size: 1.2rem;
            color: #ffffff;
            line-height: 1.8;
        }

        .w6-highlight {
            color: var(--wp--preset--color--primary);
            font-weight: 600;
        }

        /* =========================================
           WIDGET 7: Artisan Process Paragraph
           ========================================= */
        .w7-artisan {
            padding: var(--spacing-lg) var(--spacing-xl);
            max-width: 900px;
            margin: 0 auto;
            position: relative;
        }

        .w7-artisan p {
            font-size: 1.25rem;
            line-height: 1.9;
        }

        .w7-artisan p:first-child::first-letter {
            float: left;
            font-size: 5rem;
            line-height: 0.8;
            padding-right: 15px;
            padding-top: 10px;
            color: var(--wp--preset--color--primary);
            font-family: var(--font-heading);
            font-weight: bold;
        }

        /* =========================================
           WIDGET 8: Problem / Solution Block
           ========================================= */
        .w8-ps {
            display: grid;
            grid-template-columns: 1fr 1fr;
            background: transparent;
        }

        .w8-col {
            padding: var(--spacing-xl);
        }

        .w8-problem {
            background: rgba(255,255,255,0.03);
            border-right: 1px solid rgba(255,255,255,0.1);
        }

        .w8-solution {
            background: transparent;
        }

        .w8-badge {
            display: inline-block;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
            text-transform: uppercase;
            margin-bottom: 20px;
        }

        .w8-problem-badge {
            background: #fee2e2;
            color: #b91c1c;
        }

        .w8-solution-badge {
            background: #e0f2fe;
            color: #0369a1;
        }

        .w8-col h3 {
            font-size: 2rem;
        }

        /* =========================================
           WIDGET 9: VisionText with Signature
           ========================================= */
        .w9-vision {
            padding: var(--spacing-xl);
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
        }

        .w9-quote {
            font-size: 2rem;
            font-family: var(--font-heading);
            font-style: italic;
            color: #ffffff;
            margin-bottom: 30px;
        }

        .w9-signature {
            font-family: 'Great Vibes', cursive;
            font-size: 2.5rem;
            color: var(--wp--preset--color--primary);
        }

        /* =========================================
           WIDGET 10: Value over Cost text
           ========================================= */
        .w10-value {
            background: var(--bg-dark);
            color: #fff;
            padding: var(--spacing-xl);
            text-align: center;
        }

        .w10-value h3 {
            color: #fff;
            font-size: 2.5rem;
        }

        .w10-value p {
            color: #ccc;
            max-width: 700px;
            margin: 0 auto 30px;
            font-size: 1.1rem;
        }

        .w10-stat-grid {
            display: flex;
            justify-content: center;
            gap: 40px;
        }

        .w10-stat {
            display: flex;
            flex-direction: column;
        }

        .w10-num {
            font-size: 3rem;
            font-family: var(--font-heading);
            color: var(--wp--preset--color--primary);
        }

        .w10-label {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #fff;
        }

        /* =========================================
           WIDGET 11: Icon + Text Grid
           ========================================= */
        .w11-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            padding: var(--spacing-xl);
        }

        .w11-card {
            text-align: center;
        }

        .w11-icon {
            width: 70px;
            height: 70px;
            background: rgba(255,255,255,0.03);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            color: var(--wp--preset--color--primary);
        }

        .w11-card h4 {
            font-size: 1.3rem;
            margin-bottom: 10px;
        }

        .w11-card p {
            font-size: 0.95rem;
        }

        /* =========================================
           WIDGET 12: Zig-Zag Features
           ========================================= */
        .w12-zigzag {
            padding: var(--spacing-xl) 0;
        }

        .w12-row {
            display: flex;
            align-items: center;
            gap: 60px;
            margin-bottom: 80px;
            padding: 0 var(--spacing-xl);
        }

        .w12-row:nth-child(even) {
            flex-direction: row-reverse;
        }

        .w12-img {
            flex: 1;
            height: 400px;
            background-size: cover;
            background-position: center;
            border-radius: 12px;
        }

        .w12-content {
            flex: 1;
        }

        .w12-content h3 {
            font-size: 2.2rem;
        }

        .w12-content ul {
            list-style: none;
            padding: 0;
            margin-top: 20px;
        }

        .w12-content li {
            padding-left: 30px;
            position: relative;
            margin-bottom: 15px;
            font-size: 1.1rem;
        }

        .w12-content li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--wp--preset--color--primary);
            font-weight: bold;
        }

        /* =========================================
           WIDGET 13: Accordion Value Propositions
           ========================================= */
        .w13-acc-container {
            padding: var(--spacing-xl);
            max-width: 800px;
            margin: 0 auto;
        }

        .w13-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 40px;
        }

        .w13-item {
            border-bottom: 1px solid rgba(255,255,255,0.1);
            margin-bottom: 10px;
        }

        .w13-header {
            padding: 20px 0;
            font-size: 1.3rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .w13-header::after {
            content: '+';
            font-size: 1.5rem;
            transition: transform 0.3s;
            color: var(--wp--preset--color--primary);
        }

        .w13-header.active::after {
            content: '-';
        }

        .w13-content {
            padding: 0 0 20px;
            display: none;
            color: var(--text-muted);
            line-height: 1.6;
        }

        /* =========================================
           WIDGET 14: "By the Numbers"
           ========================================= */
        .w14-numbers {
            background: var(--wp--preset--color--primary);
            color: #fff;
            padding: var(--spacing-xl);
            display: flex;
            justify-content: space-around;
            text-align: center;
        }

        .w14-stat {
            width: 25%;
            border-right: 1px solid rgba(255, 255, 255, 0.2);
        }

        .w14-stat:last-child {
            border-right: none;
        }

        .w14-num {
            font-size: 4rem;
            font-weight: bold;
            font-family: var(--font-heading);
            display: block;
            margin-bottom: 10px;
        }

        .w14-text {
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* =========================================
           WIDGET 15: Comparison Table
           ========================================= */
        .w15-comp {
            padding: var(--spacing-xl);
            max-width: 1000px;
            margin: 0 auto;
        }

        .w15-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 40px;
        }

        .w15-table {
            width: 100%;
            border-collapse: collapse;
            background: transparent;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        }

        .w15-table th,
        .w15-table td {
            padding: 25px;
            text-align: center;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .w15-table th {
            background: rgba(255,255,255,0.03);
            font-size: 1.2rem;
            font-weight: 600;
            width: 33.33%;
        }

        .w15-table th.brand-col {
            background: var(--wp--preset--color--primary);
            color: #fff;
        }

        .w15-table td:first-child {
            text-align: left;
            font-weight: 500;
            font-size: 1.1rem;
        }

        .w15-table td.brand-col {
            background: rgba(195, 154, 95, 0.05);
        }

        /* Requires dynamic handling in real implementation */
    
/* =========================================
           WIDGET 16: Trust Badge Review Card
           ========================================= */
        .w16-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            display: flex;
            justify-content: center;
        }

        .w16-card {
            max-width: 600px;
            padding: 40px;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 8px;
            position: relative;
            background: transparent;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
        }

        .w16-quote-icon {
            position: absolute;
            top: -20px;
            left: 40px;
            background: var(--wp--preset--color--primary);
            color: #fff;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-family: serif;
            line-height: 1;
        }

        .w16-text {
            font-size: 1.2rem;
            font-style: italic;
            margin-bottom: 25px;
            color: #ffffff;
        }

        .w16-author {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .w16-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
        }

        .w16-meta h4 {
            margin: 0;
            font-size: 1.1rem;
            font-family: var(--font-body);
        }

        .w16-verified {
            color: #059669;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 5px;
            margin-top: 4px;
            font-weight: 500;
        }

        .w16-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            opacity: 0.1;
            width: 60px;
        }

        /* =========================================
           WIDGET 17: Multi-Column Review Carousel Layout
           ========================================= */
        .w17-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
            text-align: center;
        }

        .w17-title {
            font-size: 2.5rem;
            margin-bottom: 50px;
        }

        .w17-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .w17-card {
            background: transparent;
            padding: 30px;
            border-radius: 8px;
            text-align: left;
            border-top: 4px solid var(--wp--preset--color--primary);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
        }

        .w17-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
        }

        .w17-name {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 5px;
            display: block;
        }

        .w17-role {
            font-size: 0.85rem;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* =========================================
           WIDGET 18: Big Typography Impact Review
           ========================================= */
        .w18-wrapper {
            padding: var(--spacing-xl);
            background: var(--bg-dark);
            color: #fff;
            text-align: center;
        }

        .w18-quote {
            font-size: 3rem;
            font-family: var(--font-heading);
            max-width: 900px;
            margin: 0 auto 40px;
            line-height: 1.3;
        }

        .w18-highlight {
            color: var(--wp--preset--color--primary);
            font-style: italic;
        }

        .w18-author {
            font-size: 1.2rem;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        /* =========================================
           WIDGET 19: Review + Product Context
           ========================================= */
        .w19-wrapper {
            padding: var(--spacing-xl);
            background: transparent;
        }

        .w19-flex {
            display: flex;
            gap: 50px;
            align-items: center;
            max-width: 1000px;
            margin: 0 auto;
        }

        .w19-image {
            flex: 1;
            border-radius: 12px;
            overflow: hidden;
        }

        .w19-image img {
            width: 100%;
            display: block;
            border-radius: 12px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        .w19-content {
            flex: 1;
        }

        .w19-stars {
            font-size: 24px;
            color: var(--wp--preset--color--primary);
            margin-bottom: 20px;
        }

        .w19-text {
            font-size: 1.3rem;
            margin-bottom: 20px;
            font-style: italic;
            color: #ffffff;
        }

        .w19-product-link {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-top: 20px;
            padding: 10px 20px;
            background: rgba(255,255,255,0.03);
            border-radius: 30px;
            text-decoration: none;
            color: #ffffff;
            font-weight: 500;
            font-size: 0.9rem;
            border: 1px solid rgba(255,255,255,0.1);
        }

        /* =========================================
           WIDGET 20: "As Seen On" Authority Banner
           ========================================= */
        .w20-wrapper {
            padding: var(--spacing-lg) 20px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            text-align: center;
        }

        .w20-title {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 3px;
            color: #888;
            margin-bottom: 30px;
        }

        .w20-logos {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 60px;
            flex-wrap: wrap;
            opacity: 0.6;
            filter: grayscale(100%);
            transition: 0.3s;
        }

        .w20-logos:hover {
            opacity: 1;
            filter: grayscale(0%);
        }

        .w20-logo {
            font-size: 1.8rem;
            font-weight: 900;
            font-family: var(--font-heading);
            color: #ffffff;
        }

        /* =========================================
           WIDGET 21: Press Quote Block
           ========================================= */
        .w21-wrapper {
            padding: var(--spacing-xl);
            text-align: center;
            background: transparent;
        }

        .w21-logo {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 30px;
            color: #ffffff;
        }

        .w21-quote {
            font-size: 2.2rem;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.4;
            font-family: var(--font-heading);
        }

        .w21-quote span {
            border-bottom: 4px solid var(--wp--preset--color--primary);
        }

        /* =========================================
           WIDGET 22: Industry Authority Badge Card
           ========================================= */
        .w22-wrapper {
            padding: var(--spacing-xl);
            background: rgba(255,255,255,0.03);
            display: flex;
            justify-content: center;
        }

        .w22-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            max-width: 900px;
        }

        .w22-card {
            background: transparent;
            padding: 40px;
            text-align: center;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.1);
        }

        .w22-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: var(--wp--preset--color--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
        }

        /* =========================================
           WIDGET 23: Social Proof / UGC Grid (Instagram Style)
           ========================================= */
        .w23-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
        }

        .w23-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .w23-header h2 {
            font-size: 2.5rem;
        }

        .w23-header p {
            font-size: 1.1rem;
        }

        .w23-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }

        .w23-item {
            aspect-ratio: 1;
            background-size: cover;
            background-position: center;
            position: relative;
            border-radius: 8px;
            overflow: hidden;
        }

        .w23-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            opacity: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            transition: opacity 0.3s;
            font-size: 24px;
        }

        .w23-item:hover .w23-overlay {
            opacity: 1;
        }

        /* =========================================
           WIDGET 24: Single UGC Highlight Card
           ========================================= */
        .w24-wrapper {
            padding: var(--spacing-xl) 20px;
            display: flex;
            justify-content: center;
            background: rgba(255,255,255,0.03);
        }

        .w24-card {
            background: transparent;
            width: 100%;
            max-width: 450px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
        }

        .w24-img {
            height: 500px;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .w24-tag {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(255, 255, 255, 0.9);
            padding: 8px 15px;
            border-radius: 6px;
            font-size: 0.9rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            color: #ffffff;
            text-decoration: none;
        }

        .w24-tag-dot {
            width: 8px;
            height: 8px;
            background: var(--wp--preset--color--primary);
            border-radius: 50%;
        }

        .w24-content {
            padding: 25px;
        }

        .w24-user {
            font-weight: bold;
            margin-bottom: 5px;
        }

        /* =========================================
           WIDGET 25: Customer Transformation Story
           ========================================= */
        .w25-wrapper {
            padding: var(--spacing-xl);
            background: transparent;
        }

        .w25-container {
            max-width: 1100px;
            margin: 0 auto;
            display: flex;
            align-items: stretch;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px;
            overflow: hidden;
        }

        .w25-images {
            flex: 1;
            display: flex;
        }

        .w25-img {
            flex: 1;
            background-size: cover;
            background-position: center;
            min-height: 400px;
            position: relative;
        }

        .w25-label {
            position: absolute;
            bottom: 15px;
            right: 15px;
            background: transparent;
            padding: 5px 10px;
            font-size: 0.8rem;
            font-weight: bold;
            text-transform: uppercase;
            border-radius: 4px;
        }

        .w25-content {
            flex: 1;
            padding: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: rgba(255,255,255,0.03);
        }

        .w25-content h3 {
            font-size: 2rem;
            margin-bottom: 20px;
        }

        .w25-quote {
            font-style: italic;
            color: #ffffff;
            font-size: 1.1rem;
            border-left: 3px solid var(--wp--preset--color--primary);
            padding-left: 20px;
            margin-bottom: 30px;
        }
    
/* =========================================
           WIDGET 26: New Arrivals Bold Banner
           ========================================= */
        .w26-wrapper {
            display: flex;
            min-height: 600px;
        }

        .w26-img {
            flex: 1.5;
            background: url('https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80') center/cover;
            position: relative;
        }

        .w26-badge {
            position: absolute;
            top: 30px;
            right: 30px;
            background: var(--wp--preset--color--primary);
            color: #fff;
            padding: 10px 20px;
            font-weight: bold;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .w26-content {
            flex: 1;
            padding: var(--spacing-xl);
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: var(--bg-dark);
            color: #fff;
        }

        .w26-content h2 {
            font-size: 3.5rem;
            color: #fff;
            margin-bottom: 20px;
        }

        .w26-content p {
            color: #ccc;
            font-size: 1.1rem;
            margin-bottom: 40px;
        }

        /* =========================================
           WIDGET 27: Trending Slider (Grid fallback)
           ========================================= */
        .w27-wrapper {
            padding: var(--spacing-xl) 20px;
        }

        .w27-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .w27-header h2 {
            font-size: 2.5rem;
        }

        .w27-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .w27-card {
            text-align: center;
            group;
            cursor: pointer;
        }

        .w27-img-wrap {
            overflow: hidden;
            border-radius: 8px;
            margin-bottom: 15px;
            position: relative;
            aspect-ratio: 3/4;
        }

        .w27-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .w27-card:hover .w27-img {
            transform: scale(1.05);
        }

        .w27-new {
            position: absolute;
            top: 10px;
            left: 10px;
            background: transparent;
            color: #ffffff;
            font-size: 11px;
            padding: 4px 10px;
            font-weight: bold;
            text-transform: uppercase;
            z-index: 2;
        }

        .w27-title {
            font-size: 1.1rem;
            margin-bottom: 5px;
        }

        .w27-price {
            color: var(--wp--preset--color--primary);
            font-weight: 600;
        }

        /* =========================================
           WIDGET 28: "Complete The Look" Duo
           ========================================= */
        .w28-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
            display: flex;
            justify-content: center;
        }

        .w28-container {
            display: flex;
            gap: 40px;
            max-width: 1000px;
            align-items: center;
            background: transparent;
            padding: 40px;
            border-radius: 12px;
        }

        .w28-main {
            flex: 1;
        }

        .w28-sub {
            flex: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .w28-item {
            text-align: center;
        }

        .w28-item img {
            border-radius: 8px;
            margin-bottom: 10px;
        }

        .w28-main h2 {
            font-size: 2.5rem;
        }

        .w28-link {
            color: #ffffff;
            font-weight: 600;
            text-decoration: underline;
            text-decoration-color: var(--wp--preset--color--primary);
            text-underline-offset: 4px;
        }

        /* =========================================
           WIDGET 29: Spotlight Product (Interactive)
           ========================================= */
        .w29-wrapper {
            display: flex;
            min-height: 500px;
            background: transparent;
        }

        .w29-content {
            flex: 1;
            padding: var(--spacing-xl);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .w29-img {
            flex: 1;
            background: url('https://images.unsplash.com/photo-1594938298596-ef89aaeb6b94?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80') center/cover;
        }

        .w29-tag {
            color: var(--wp--preset--color--primary);
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 0.9rem;
            margin-bottom: 15px;
            display: block;
        }

        .w29-title {
            font-size: 3rem;
            margin-bottom: 20px;
        }

        .w29-features {
            list-style: none;
            padding: 0;
            margin: 0 0 30px;
        }

        .w29-features li {
            padding-left: 25px;
            position: relative;
            margin-bottom: 10px;
        }

        .w29-features li::before {
            content: '•';
            position: absolute;
            left: 0;
            color: var(--wp--preset--color--primary);
            font-size: 1.5rem;
            line-height: 1;
            top: -2px;
        }

        /* =========================================
           WIDGET 30: Seasonal Collection Grid
           ========================================= */
        .w30-wrapper {
            padding: var(--spacing-xl) 20px;
        }

        .w30-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .w30-item {
            position: relative;
            aspect-ratio: 4/5;
            overflow: hidden;
            border-radius: 12px;
        }

        .w30-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        .w30-item:hover img {
            transform: scale(1.05);
        }

        .w30-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 60%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            color: #fff;
        }

        .w30-overlay h3 {
            color: #fff;
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        .w30-btn {
            background: transparent;
            color: #ffffff;
            padding: 10px 20px;
            display: inline-block;
            text-decoration: none;
            font-weight: bold;
            border-radius: 4px;
            font-size: 0.9rem;
            letter-spacing: 1px;
            text-transform: uppercase;
            width: max-content;
        }

        /* =========================================
           WIDGET 31: Lookbook Masonry
           ========================================= */
        .w31-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
        }

        .w31-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .w31-masonry {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            grid-auto-rows: 250px;
        }

        .w31-item {
            border-radius: 8px;
            overflow: hidden;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .w31-item.tall {
            grid-row: span 2;
        }

        .w31-item.wide {
            grid-column: span 2;
        }

        .w31-label {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: transparent;
            padding: 8px 15px;
            border-radius: 4px;
            font-weight: bold;
        }

        /* =========================================
           WIDGET 32: Scarcity Sale Banner
           ========================================= */
        .w32-wrapper {
            background: var(--accent-red);
            color: #fff;
            padding: 30px 20px;
            text-align: center;
        }

        .w32-title {
            font-size: 2rem;
            color: #fff;
            margin-bottom: 10px;
        }

        .w32-subtitle {
            font-size: 1.2rem;
            font-family: var(--font-body);
            opacity: 0.9;
        }

        .w32-countdown {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }

        .w32-time {
            background: rgba(255, 255, 255, 0.2);
            width: 80px;
            height: 80px;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .w32-num {
            font-size: 2rem;
            font-weight: bold;
            font-family: var(--font-heading);
            line-height: 1;
        }

        .w32-text {
            font-size: 0.8rem;
            text-transform: uppercase;
            opacity: 0.8;
        }

        /* =========================================
           WIDGET 33: Flash Sale Product Card
           ========================================= */
        .w33-wrapper {
            padding: var(--spacing-xl) 20px;
            display: flex;
            justify-content: center;
        }

        .w33-card {
            display: flex;
            max-width: 900px;
            background: transparent;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
        }

        .w33-img {
            flex: 1;
            background: url('https://images.unsplash.com/photo-1598808503746-f34c53b93222?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80') center/cover;
        }

        .w33-content {
            flex: 1;
            padding: 40px;
        }

        .w33-flash-badge {
            display: inline-block;
            background: var(--accent-red);
            color: #fff;
            padding: 5px 12px;
            border-radius: 4px;
            font-weight: bold;
            font-size: 12px;
            text-transform: uppercase;
            margin-bottom: 15px;
        }

        .w33-title {
            font-size: 2.2rem;
            margin-bottom: 10px;
        }

        .w33-prices {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }

        .w33-old {
            text-decoration: line-through;
            color: #999;
            font-size: 1.2rem;
        }

        .w33-new {
            color: var(--accent-red);
            font-size: 1.8rem;
            font-weight: bold;
        }

        .w33-progress-wrap {
            margin-bottom: 30px;
        }

        .w33-progress-text {
            display: flex;
            justify-content: space-between;
            font-size: 0.9rem;
            margin-bottom: 8px;
        }

        .w33-progress-bar {
            height: 6px;
            background: #eee;
            border-radius: 3px;
            overflow: hidden;
        }

        .w33-progress-fill {
            height: 100%;
            background: var(--accent-red);
            width: 85%;
        }

        /* =========================================
           WIDGET 34: Special Offer Promo Box
           ========================================= */
        .w34-wrapper {
            padding: var(--spacing-xl) 20px;
        }

        .w34-box {
            background: var(--bg-dark);
            border: 2px solid var(--wp--preset--color--primary);
            padding: 50px;
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
            border-radius: 16px;
            position: relative;
        }

        .w34-icon {
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 60px;
            background: var(--wp--preset--color--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
        }

        .w34-box h2 {
            color: #fff;
            font-size: 2.5rem;
            margin-bottom: 15px;
        }

        .w34-box p {
            color: #ddd;
            font-size: 1.2rem;
            margin-bottom: 30px;
        }

        .w34-code {
            display: inline-block;
            padding: 15px 30px;
            border: 2px dashed #fff;
            color: var(--wp--preset--color--primary);
            font-size: 1.5rem;
            font-weight: bold;
            letter-spacing: 2px;
        }

        /* =========================================
           WIDGET 35: Clearance / Archival Banner
           ========================================= */
        .w35-wrapper {
            position: relative;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .w35-bg {
            position: absolute;
            inset: 0;
            background: url('https://images.unsplash.com/photo-1593030103066-0093718efeb9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80') center/cover;
            filter: grayscale(100%) brightness(0.4);
        }

        .w35-content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: #fff;
        }

        .w35-content h2 {
            font-size: 4rem;
            text-transform: uppercase;
            letter-spacing: 5px;
            color: #fff;
            margin-bottom: 10px;
        }

        .w35-content p {
            font-size: 1.5rem;
            font-family: var(--font-body);
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 30px;
        }

        /* =========================================
           RESPONSIVE MOBILE STYLES (Applies to all inside wrapper)
           ========================================= */
        @media (max-width: 992px) {

            .w26-wrapper,
            .w28-container,
            .w29-wrapper,
            .w30-grid,
            .w33-card,
            .w25-container,
            .w12-row,
            .w8-ps,
            .w4-hero {
                flex-direction: column;
                grid-template-columns: 1fr;
            }

            .w26-img,
            .w29-img {
                min-height: 400px;
            }

            .w12-row:nth-child(even) {
                flex-direction: column;
            }

            .w12-img {
                height: 300px;
                width: 100%;
            }
        }

        @media (max-width: 768px) {
            :root {
                --spacing-lg: 2rem;
                --spacing-xl: 3rem;
            }

            .preview-controls {
                flex-direction: column;
                gap: 10px;
                padding: 10px;
                text-align: center;
            }

            .widget-container {
                margin-top: 130px;
                padding: 10px;
            }

            h1 {
                font-size: 2.5rem !important;
            }

            h2 {
                font-size: 2rem !important;
            }

            h3 {
                font-size: 1.5rem !important;
            }

            .w27-grid,
            .w31-masonry,
            .w17-grid,
            .w11-grid,
            .w14-numbers {
                grid-template-columns: 1fr;
                display: flex;
                flex-direction: column;
                gap: 20px;
            }

            .w14-stat {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.2);
                padding-bottom: 20px;
            }

            .w14-stat:last-child {
                border-bottom: none;
            }

            .w28-container {
                padding: 20px;
            }

            .w28-sub {
                grid-template-columns: 1fr 1fr;
            }

            .w32-countdown {
                flex-wrap: wrap;
            }

            .w32-time {
                width: 70px;
                height: 70px;
            }

            .w32-num {
                font-size: 1.5rem;
            }

            .w34-box {
                padding: 30px 20px;
            }

            .w34-code {
                font-size: 1.2rem;
                padding: 10px 20px;
            }

            .w35-content h2 {
                font-size: 2.5rem;
            }

            /* Previous Widgets Responsive fixes applied retroactively */
            .w1-hero {
                flex-direction: column;
            }

            .w1-hero-content {
                padding: 2rem;
            }

            .w1-hero-image {
                min-height: 300px;
            }

            .w5-trust-bar {
                flex-direction: column;
                gap: 20px;
                align-items: flex-start;
            }

            .w6-story {
                flex-direction: column;
                gap: 30px;
            }

            .w6-title {
                border-left: none;
                border-top: 4px solid var(--wp--preset--color--primary);
                padding-left: 0;
                padding-top: 15px;
            }

            .w15-table {
                display: block;
                overflow-x: auto;
                white-space: nowrap;
            }

            .w23-grid {
                grid-template-columns: 1fr 1fr;
            }

            .w19-flex {
                flex-direction: column;
                gap: 20px;
            }
        }
    
/* =========================================
           WIDGET 46: Vertical Process Timeline
           ========================================= */
        .w46-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
        }

        .w46-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .w46-timeline {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }

        .w46-timeline::before {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--border-color);
        }

        .w46-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 50px;
            position: relative;
        }

        .w46-item:nth-child(even) {
            flex-direction: row-reverse;
        }

        .w46-content {
            width: 45%;
            background: transparent;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            position: relative;
        }

        .w46-content::before {
            content: '';
            position: absolute;
            top: 30px;
            width: 20px;
            height: 2px;
            background: var(--wp--preset--color--primary);
        }

        .w46-item:nth-child(odd) .w46-content::before {
            right: -20px;
        }

        .w46-item:nth-child(even) .w46-content::before {
            left: -20px;
        }

        .w46-number {
            position: absolute;
            left: 50%;
            top: 20px;
            transform: translateX(-50%);
            width: 40px;
            height: 40px;
            background: var(--wp--preset--color--primary);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-family: var(--font-heading);
            font-size: 1.2rem;
            z-index: 2;
            border: 4px solid var(--bg-light);
        }

        .w46-content h3 {
            color: var(--wp--preset--color--primary);
            margin-bottom: 10px;
            font-size: 1.5rem;
        }

        /* =========================================
           WIDGET 47: Horizontal Feature Steps
           ========================================= */
        .w47-wrapper {
            padding: var(--spacing-xl) 20px;
            text-align: center;
        }

        .w47-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            margin-top: 50px;
            position: relative;
        }

        .w47-step {
            position: relative;
            padding: 0 20px;
        }

        .w47-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: rgba(255,255,255,0.03);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: var(--wp--preset--color--primary);
            border: 1px dashed var(--wp--preset--color--primary);
        }

        .w47-title {
            font-size: 1.2rem;
            margin-bottom: 10px;
        }

        /* =========================================
           WIDGET 48: Artisan Focus Split Block
           ========================================= */
        .w48-wrapper {
            display: flex;
            min-height: 500px;
            flex-wrap: wrap;
        }

        .w48-img {
            flex: 1;
            min-width: 300px;
            background: url('https://images.unsplash.com/photo-1594938291221-94f18cbb5660?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80') center/cover;
            position: relative;
        }

        .w48-content {
            flex: 1;
            min-width: 300px;
            padding: var(--spacing-xl);
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: var(--bg-dark);
            color: #fff;
        }

        .w48-content h2 {
            font-size: 3rem;
            color: #fff;
            margin-bottom: 20px;
        }

        .w48-content p {
            color: #ccc;
            margin-bottom: 30px;
            font-size: 1.1rem;
        }

        .w48-tag {
            color: var(--wp--preset--color--primary);
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 0.9rem;
            font-weight: bold;
            margin-bottom: 15px;
        }

        /* =========================================
           WIDGET 49: Material / Fabric Macro Zoom
           ========================================= */
        .w49-wrapper {
            position: relative;
            padding: var(--spacing-xl) 20px;
            background: url('https://images.unsplash.com/photo-1598808503746-f34c53b93222?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover;
            background-attachment: fixed;
        }

        .w49-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
        }

        .w49-content {
            position: relative;
            z-index: 2;
            max-width: 600px;
            margin: 0 auto;
            background: transparent;
            padding: 50px;
            border-radius: 12px;
            text-align: center;
        }

        .w49-content h2 {
            font-size: 2.5rem;
        }

        .w49-logos {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 30px;
            opacity: 0.7;
        }

        .w49-logos span {
            font-family: var(--font-heading);
            font-size: 1.5rem;
            font-weight: bold;
        }

        /* =========================================
           WIDGET 50: The Geometry of Fit (Visual)
           ========================================= */
        .w50-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
        }

        .w50-container {
            display: flex;
            max-width: 1200px;
            margin: 0 auto;
            gap: 60px;
            align-items: center;
            flex-wrap: wrap;
        }

        .w50-visual {
            flex: 1;
            position: relative;
            min-width: 300px;
            aspect-ratio: 3/4;
            background: url('https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80') center/cover;
            border-radius: 12px;
        }

        .w50-point {
            position: absolute;
            width: 30px;
            height: 30px;
            background: var(--wp--preset--color--primary);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            border: 4px solid rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: transform 0.3s;
        }

        .w50-point:hover {
            transform: scale(1.2);
        }

        .w50-content {
            flex: 1;
            min-width: 300px;
        }

        .w50-feature {
            margin-bottom: 30px;
            padding-left: 20px;
            border-left: 2px solid var(--border-color);
        }

        .w50-feature h4 {
            color: var(--wp--preset--color--primary);
            font-size: 1.2rem;
            margin-bottom: 5px;
        }

        /* =========================================
           WIDGET 51: Founder's Note / Mission
           ========================================= */
        .w51-wrapper {
            padding: var(--spacing-xl);
            background: rgba(255,255,255,0.03);
            display: flex;
            justify-content: center;
        }

        .w51-card {
            max-width: 900px;
            background: transparent;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
            padding: 50px;
            position: relative;
        }

        .w51-quote {
            font-size: 1.8rem;
            font-family: var(--font-heading);
            font-style: italic;
            line-height: 1.5;
            color: #ffffff;
            margin-bottom: 30px;
        }

        .w51-quote-mark {
            position: absolute;
            top: -30px;
            left: 40px;
            font-size: 5rem;
            color: var(--wp--preset--color--primary);
            opacity: 0.2;
            line-height: 1;
            font-family: serif;
        }

        .w51-author {
            display: flex;
            align-items: center;
            gap: 20px;
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 20px;
        }

        .w51-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: url('https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80') center/cover;
        }

        .w51-name {
            font-weight: bold;
            font-size: 1.2rem;
        }

        .w51-title {
            color: var(--text-muted);
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* =========================================
           WIDGET 52: Our Philosophy Grid
           ========================================= */
        .w52-wrapper {
            padding: var(--spacing-xl) 20px;
            text-align: center;
        }

        .w52-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            max-width: 1100px;
            margin: 50px auto 0;
        }

        .w52-item {
            padding: 40px;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 8px;
            transition: all 0.3s;
        }

        .w52-item:hover {
            border-color: var(--wp--preset--color--primary);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
            transform: translateY(-5px);
        }

        .w52-item h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
        }

        .w52-item p {
            font-size: 0.95rem;
        }

        /* =========================================
           WIDGET 53: Sustainability / Ethics Block
           ========================================= */
        .w53-wrapper {
            display: flex;
            flex-wrap: wrap;
            background: transparent;
        }

        .w53-content {
            flex: 1;
            padding: var(--spacing-xl);
            min-width: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .w53-content h2 {
            font-size: 2.8rem;
        }

        .w53-badge-wrap {
            display: flex;
            gap: 20px;
            margin-top: 30px;
        }

        .w53-badge {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(255,255,255,0.03);
            padding: 10px 20px;
            border-radius: 30px;
            font-weight: 500;
            font-size: 0.9rem;
        }

        .w53-badge svg {
            color: #059669;
        }

        .w53-img {
            flex: 1;
            min-width: 300px;
            background: url('https://images.unsplash.com/photo-1617137968427-85924c800a22?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80') center/cover;
            min-height: 400px;
        }

        /* =========================================
           WIDGET 54: Showroom / Atelier Invite
           ========================================= */
        .w54-wrapper {
            padding: var(--spacing-xl) 20px;
            background: var(--bg-dark);
            color: #fff;
            text-align: center;
        }

        .w54-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .w54-container h2 {
            color: #fff;
            font-size: 3rem;
            margin-bottom: 20px;
        }

        .w54-info {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin: 40px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding: 20px 0;
            flex-wrap: wrap;
        }

        .w54-block h4 {
            color: var(--wp--preset--color--primary);
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 5px;
        }

        /* =========================================
           WIDGET 55: The CustomFit Guarantee
           ========================================= */
        .w55-wrapper {
            padding: var(--spacing-xl) 20px;
            display: flex;
            justify-content: center;
        }

        .w55-card {
            background: transparent;
            border: 2px solid var(--wp--preset--color--primary);
            padding: 50px;
            text-align: center;
            max-width: 700px;
            border-radius: 12px;
            position: relative;
        }

        .w55-icon {
            width: 80px;
            height: 80px;
            background: transparent;
            border: 2px solid var(--wp--preset--color--primary);
            color: var(--wp--preset--color--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: -40px;
            left: 50%;
            transform: translateX(-50%);
        }

        .w55-card h2 {
            font-size: 2.2rem;
            margin-top: 20px;
        }

        /* =========================================
           RESPONSIVE MOBILE STYLES
           ========================================= */
        @media (max-width: 992px) {

            .w47-grid,
            .w52-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .w46-timeline::before {
                left: 40px;
            }

            .w46-number {
                left: 40px;
                transform: translateX(-50%);
            }

            .w46-item,
            .w46-item:nth-child(even) {
                flex-direction: column;
                align-items: flex-end;
            }

            .w46-content {
                width: calc(100% - 90px);
                margin-bottom: 30px;
            }

            .w46-content::before,
            .w46-item:nth-child(even) .w46-content::before,
            .w46-item:nth-child(odd) .w46-content::before {
                display: none;
            }
        }

        @media (max-width: 768px) {
            :root {
                --spacing-lg: 2rem;
                --spacing-xl: 3rem;
            }

            .preview-controls {
                flex-direction: column;
                gap: 10px;
                padding: 10px;
                text-align: center;
            }

            .widget-container {
                margin-top: 130px;
                padding: 10px;
            }

            h1 {
                font-size: 2.5rem !important;
            }

            h2 {
                font-size: 2rem !important;
            }

            h3 {
                font-size: 1.5rem !important;
            }

            .w47-grid,
            .w52-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .w49-content {
                padding: 30px 20px;
            }

            .w51-card {
                padding: 30px;
            }

            .w51-quote {
                font-size: 1.3rem;
            }

            .w53-badge-wrap {
                flex-direction: column;
                gap: 10px;
            }

            .w54-info {
                flex-direction: column;
                gap: 20px;
            }

            .w55-card {
                padding: 40px 20px;
            }
        }
    
/* =========================================
           WIDGET 66: Coming Soon / Teaser Blur Action
           ========================================= */
        .w66-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 500px;
            background: url('https://images.unsplash.com/photo-1594938298596-ef89aaeb6b94?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80') center/cover;
            position: relative;
        }

        .w66-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        .w66-content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: #fff;
            max-width: 600px;
            padding: 40px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            background: rgba(0, 0, 0, 0.4);
        }

        .w66-content h2 {
            font-size: 3rem;
            margin-bottom: 20px;
        }

        .w66-badge {
            display: inline-block;
            background: var(--wp--preset--color--primary);
            padding: 5px 15px;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 0.8rem;
            font-weight: bold;
            margin-bottom: 20px;
            border-radius: 20px;
        }

        /* =========================================
           WIDGET 67: Waitlist Form
           ========================================= */
        .w67-wrapper {
            padding: var(--spacing-xl) 20px;
            background: var(--bg-dark);
            color: #fff;
            display: flex;
            justify-content: center;
        }

        .w67-container {
            max-width: 800px;
            text-align: center;
        }

        .w67-container h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

        .w67-form {
            display: flex;
            gap: 10px;
            margin-top: 40px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .w67-input {
            padding: 15px 20px;
            font-size: 1rem;
            border: none;
            border-radius: 4px;
            flex: 1;
            min-width: 250px;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            outline: none;
        }

        .w67-input::placeholder {
            color: #aaa;
        }

        .w67-input:focus {
            background: rgba(255, 255, 255, 0.2);
        }

        /* =========================================
           WIDGET 68: "In The Works" Project Status
           ========================================= */
        .w68-wrapper {
            padding: var(--spacing-xl) 20px;
        }

        .w68-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .w68-card {
            background: transparent;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.1);
        }

        .w68-img {
            height: 300px;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .w68-status {
            position: absolute;
            top: 20px;
            right: 20px;
            background: transparent;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .w68-status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #059669;
        }

        .w68-status-dot.dev {
            background: #f59e0b;
        }

        .w68-content {
            padding: 30px;
        }

        .w68-progress {
            height: 6px;
            background: #eee;
            border-radius: 3px;
            margin: 20px 0 10px;
            overflow: hidden;
        }

        .w68-progress-bar {
            height: 100%;
            background: var(--wp--preset--color--primary);
        }

        .w68-meta {
            display: flex;
            justify-content: space-between;
            font-size: 0.9rem;
            color: var(--text-muted);
        }

        /* =========================================
           WIDGET 69: Sneak Peek Dual Image
           ========================================= */
        .w69-wrapper {
            padding: var(--spacing-xl) 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 60px;
            max-width: 1200px;
            margin: 0 auto;
            flex-wrap: wrap;
        }

        .w69-images {
            display: flex;
            gap: 20px;
            flex: 1;
            min-width: 300px;
        }

        .w69-img1 {
            flex: 2;
            border-radius: 12px;
            overflow: hidden;
            aspect-ratio: 3/4;
            background: url('https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80') center/cover;
        }

        .w69-img2 {
            flex: 1;
            border-radius: 12px;
            overflow: hidden;
            aspect-ratio: 2/4;
            margin-top: 50px;
            background: url('https://images.unsplash.com/photo-1598808503746-f34c53b93222?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80') center/cover;
            filter: grayscale(100%);
        }

        .w69-content {
            flex: 1;
            min-width: 300px;
        }

        .w69-tag {
            color: var(--wp--preset--color--primary);
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .w69-title {
            font-size: 2.8rem;
            margin: 15px 0;
        }

        /* =========================================
           WIDGET 70: Roadmap Text Block
           ========================================= */
        .w70-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
            text-align: center;
        }

        .w70-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .w70-title {
            font-size: 2.5rem;
            margin-bottom: 40px;
        }

        .w70-steps {
            text-align: left;
        }

        .w70-step {
            border-left: 3px solid var(--border-color);
            padding: 0 0 30px 30px;
            position: relative;
        }

        .w70-step:last-child {
            border-left-color: transparent;
        }

        .w70-step::before {
            content: '';
            position: absolute;
            left: -11px;
            top: 0;
            width: 15px;
            height: 15px;
            background: transparent;
            border: 2px solid var(--border-color);
            border-radius: 50%;
        }

        .w70-step.active {
            border-left-color: var(--wp--preset--color--primary);
        }

        .w70-step.active::before {
            border-color: var(--wp--preset--color--primary);
            background: var(--wp--preset--color--primary);
        }

        .w70-date {
            font-weight: bold;
            color: var(--wp--preset--color--primary);
            font-size: 0.9rem;
            margin-bottom: 5px;
        }

        .w70-desc {
            font-size: 1.2rem;
            color: #ffffff;
        }

        /* =========================================
           WIDGET 71: The "Next Chapter" Banner
           ========================================= */
        .w71-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            display: flex;
            justify-content: center;
        }

        .w71-box {
            background: url('https://images.unsplash.com/photo-1617137968427-85924c800a22?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80') center/cover;
            width: 100%;
            max-width: 1200px;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 450px;
        }

        .w71-box::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 100%);
        }

        .w71-content {
            position: relative;
            z-index: 2;
            padding: 50px;
            width: 100%;
            max-width: 600px;
            color: #fff;
            margin-right: auto;
        }

        .w71-content h2 {
            font-size: 3.5rem;
            color: #fff;
            line-height: 1;
            margin-bottom: 20px;
        }

        .w71-content p {
            color: #ddd;
            font-size: 1.2rem;
        }

        /* =========================================
           WIDGET 72: VIP Access Request
           ========================================= */
        .w72-wrapper {
            padding: var(--spacing-xl) 20px;
            text-align: center;
        }

        .w72-card {
            display: inline-block;
            border: 2px dashed var(--wp--preset--color--primary);
            padding: 50px 80px;
            border-radius: 12px;
            background: rgba(255,255,255,0.03);
            max-width: 700px;
        }

        .w72-icon {
            font-size: 3rem;
            margin-bottom: 20px;
        }

        .w72-title {
            font-size: 2.2rem;
            margin-bottom: 15px;
        }

        /* =========================================
           WIDGET 73: Beta Tester Call
           ========================================= */
        .w73-wrapper {
            display: flex;
            flex-wrap: wrap;
        }

        .w73-img {
            flex: 1;
            min-width: 300px;
            background: url('https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80') center/cover;
            min-height: 400px;
        }

        .w73-content {
            flex: 1;
            padding: var(--spacing-xl);
            background: var(--text-dark);
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-width: 300px;
        }

        .w73-content h2 {
            font-size: 2.5rem;
            color: #fff;
        }

        .w73-content p {
            color: #ccc;
            margin-bottom: 30px;
        }

        .w73-list {
            list-style: none;
            padding: 0;
            margin-bottom: 30px;
        }

        .w73-list li {
            margin-bottom: 15px;
            padding-left: 30px;
            position: relative;
            color: #ddd;
        }

        .w73-list li::before {
            content: '→';
            position: absolute;
            left: 0;
            color: var(--wp--preset--color--primary);
            font-weight: bold;
        }

        /* =========================================
           WIDGET 74: Future Value Prop Typographic
           ========================================= */
        .w74-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            text-align: center;
        }

        .w74-text {
            font-size: 4rem;
            font-family: var(--font-heading);
            max-width: 1000px;
            margin: 0 auto;
            line-height: 1.2;
            color: var(--border-color);
            font-weight: bold;
        }

        .w74-text span {
            color: #ffffff;
        }

        .w74-sub {
            font-size: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 3px;
            color: var(--wp--preset--color--primary);
            margin-top: 30px;
            font-weight: bold;
        }

        /* =========================================
           WIDGET 75: Seasonal Teaser Accordion
           ========================================= */
        .w75-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
        }

        .w75-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .w75-item {
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .w75-header {
            padding: 30px 0;
            font-size: 1.5rem;
            font-family: var(--font-heading);
            font-weight: bold;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--text-muted);
            transition: 0.3s;
        }

        .w75-header:hover,
        .w75-header.active {
            color: #ffffff;
        }

        .w75-header::after {
            content: '+';
            font-size: 1.5rem;
            color: var(--wp--preset--color--primary);
            font-family: var(--font-body);
        }

        .w75-header.active::after {
            content: '−';
        }

        .w75-content {
            padding: 0 0 30px;
            display: none;
            color: var(--text-muted);
            font-size: 1.1rem;
            line-height: 1.8;
        }

        /* =========================================
           RESPONSIVE MOBILE STYLES
           ========================================= */
        @media (max-width: 992px) {
            .w68-grid {
                grid-template-columns: 1fr;
            }

            .w69-wrapper {
                flex-direction: column;
                text-align: center;
            }

            .w73-wrapper {
                flex-direction: column;
            }

            .w74-text {
                font-size: 3rem;
            }
        }

        @media (max-width: 768px) {
            :root {
                --spacing-lg: 2rem;
                --spacing-xl: 3rem;
            }

            .preview-controls {
                flex-direction: column;
                gap: 10px;
                padding: 10px;
                text-align: center;
            }

            .widget-container {
                margin-top: 130px;
                padding: 10px;
            }

            h1 {
                font-size: 2.5rem !important;
            }

            h2 {
                font-size: 2rem !important;
            }

            .w66-content h2 {
                font-size: 2rem;
            }

            .w67-form {
                flex-direction: column;
            }

            .w67-input {
                width: 100%;
                box-sizing: border-box;
            }

            .w71-content {
                padding: 30px;
            }

            .w71-content h2 {
                font-size: 2.5rem;
            }

            .w72-card {
                padding: 30px 20px;
            }

            .w72-title {
                font-size: 1.8rem;
            }

            .w74-text {
                font-size: 2rem;
            }

            .w75-header {
                font-size: 1.2rem;
            }
        }
    
/* =========================================
           SCARCITY & URGENCY (76-85)
           ========================================= */

        /* W76: Low Stock Fixed Bar */
        .w76-wrapper {
            padding: 15px;
            background: #fff5f5;
            border-bottom: 2px solid var(--accent-red);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            color: var(--accent-red);
            font-weight: bold;
        }

        .w76-icon {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }

            100% {
                opacity: 1;
            }
        }

        /* W77: "Only X Left" Product Tag */
        .w77-wrapper {
            padding: var(--spacing-xl) 20px;
            display: flex;
            justify-content: center;
            background: transparent;
        }

        .w77-tag {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--bg-dark);
            color: #fff;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 0.9rem;
            font-weight: bold;
        }

        .w77-tag span {
            color: var(--accent-red);
        }

        /* W78: Time-Limited Fabric Offer */
        .w78-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
            display: flex;
            justify-content: center;
        }

        .w78-card {
            background: transparent;
            border: 1px solid var(--wp--preset--color--primary);
            border-radius: 8px;
            padding: 30px;
            max-width: 500px;
            text-align: center;
            position: relative;
        }

        .w78-badge {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--wp--preset--color--primary);
            color: #fff;
            padding: 5px 15px;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 4px;
            font-weight: bold;
        }

        /* W79: "Viewing Now" Counter */
        .w79-wrapper {
            padding: var(--spacing-md);
            display: flex;
            justify-content: center;
        }

        .w79-counter {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #eef2ff;
            color: #4f46e5;
            padding: 10px 20px;
            border-radius: 6px;
            font-weight: 500;
            font-size: 0.95rem;
        }

        .w79-dot {
            width: 8px;
            height: 8px;
            background: #4f46e5;
            border-radius: 50%;
            animation: blink 1.5s infinite;
        }

        @keyframes blink {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }
        }

        /* W80: Exclusive Access Lock */
        .w80-wrapper {
            padding: var(--spacing-xl) 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 300px;
            background: url('https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80') center/cover;
            position: relative;
        }

        .w80-overlay {
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(5px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
        }

        .w80-icon {
            font-size: 3rem;
            margin-bottom: 15px;
            color: #ffffff;
        }

        /* W81: Cart Abandonment Warning Inline */
        .w81-wrapper {
            padding: var(--spacing-md);
            display: flex;
            justify-content: center;
        }

        .w81-warning {
            border: 1px solid #f59e0b;
            background: #fffbeb;
            color: #b45309;
            padding: 15px 25px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            gap: 15px;
            max-width: 600px;
        }

        /* W82: Deadstock Fabric Notice */
        .w82-wrapper {
            padding: var(--spacing-md);
            display: flex;
            justify-content: center;
            background: transparent;
        }

        .w82-notice {
            border-left: 4px solid var(--text-dark);
            padding: 15px 20px;
            background: rgba(255,255,255,0.03);
            max-width: 700px;
            font-style: italic;
            color: var(--text-muted);
        }

        /* W83: "Selling Fast" Progress Bar */
        .w83-wrapper {
            padding: var(--spacing-lg) 20px;
            display: flex;
            justify-content: center;
        }

        .w83-box {
            width: 100%;
            max-width: 400px;
        }

        .w83-text {
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            font-size: 0.9rem;
            margin-bottom: 8px;
        }

        .w83-bar {
            height: 8px;
            background: #eee;
            border-radius: 4px;
            overflow: hidden;
        }

        .w83-fill {
            width: 92%;
            height: 100%;
            background: var(--wp--preset--color--primary);
        }

        /* W84: Free Shipping Countdown */
        .w84-wrapper {
            padding: 15px;
            background: var(--text-dark);
            color: #fff;
            text-align: center;
            font-size: 0.95rem;
            font-weight: 500;
        }

        .w84-wrapper span {
            color: var(--wp--preset--color--primary);
            font-weight: bold;
        }

        /* W85: Size Exclusivity Tag */
        .w85-wrapper {
            padding: var(--spacing-md);
            text-align: center;
        }

        .w85-btn {
            border: 1px dashed var(--wp--preset--color--primary);
            color: #ffffff;
            padding: 10px 20px;
            font-weight: bold;
            background: transparent;
            cursor: default;
        }

        /* =========================================
           FAQ & OBJECTION HANDLING (86-90)
           ========================================= */

        /* W86: Product-Specific Accordion FAQ */
        .w86-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
        }

        .w86-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .w86-item {
            border: 1px solid rgba(255,255,255,0.1);
            margin-bottom: 10px;
            border-radius: 6px;
            overflow: hidden;
        }

        .w86-header {
            background: rgba(255,255,255,0.03);
            padding: 15px 20px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .w86-header::after {
            content: '+';
            font-size: 1.2rem;
            color: var(--wp--preset--color--primary);
        }

        .w86-content {
            padding: 20px;
            display: none;
            color: var(--text-muted);
            background: transparent;
            border-top: 1px solid rgba(255,255,255,0.1);
        }

        /* W87: Price Justification Block */
        .w87-wrapper {
            padding: var(--spacing-xl) 20px;
            display: flex;
            justify-content: center;
            background: rgba(255,255,255,0.03);
        }

        .w87-card {
            background: transparent;
            padding: 40px;
            border-radius: 12px;
            max-width: 600px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        .w87-icon {
            width: 60px;
            height: 60px;
            background: rgba(195, 154, 95, 0.1);
            color: var(--wp--preset--color--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }

        /* W88: Return / Alteration Policy Badge */
        .w88-wrapper {
            padding: var(--spacing-md);
            display: flex;
            justify-content: center;
        }

        .w88-badge {
            border: 1px solid var(--accent-green);
            background: #f0fdf4;
            color: var(--accent-green);
            padding: 15px 20px;
            border-radius: 8px;
            display: flex;
            align-items: flex-start;
            gap: 15px;
            max-width: 500px;
        }

        /* W89: Fit Guarantee Visual */
        .w89-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
        }

        .w89-flex {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 40px;
            max-width: 900px;
            margin: 0 auto;
            flex-wrap: wrap;
        }

        .w89-text {
            flex: 1;
            min-width: 300px;
        }

        .w89-text h3 {
            font-size: 2rem;
        }

        .w89-circle {
            width: 150px;
            height: 150px;
            border: 8px solid var(--wp--preset--color--primary);
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .w89-circle span {
            font-size: 2rem;
            font-weight: bold;
            font-family: var(--font-heading);
            line-height: 1;
        }

        /* W90: "Will this fit me?" Quiz CTA */
        .w90-wrapper {
            padding: var(--spacing-lg) 20px;
            display: flex;
            justify-content: center;
        }

        .w90-box {
            background: var(--bg-dark);
            color: #fff;
            padding: 30px 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
            width: 100%;
            max-width: 900px;
            flex-wrap: wrap;
        }

        .w90-box h3 {
            color: #fff;
            margin-bottom: 5px;
        }

        /* =========================================
           CROSS-SELL / UPSELL (91-95)
           ========================================= */

        /* W91: "Complete The Look" Inline Cart Addition */
        .w91-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
            display: flex;
            justify-content: center;
        }

        .w91-card {
            background: transparent;
            border-radius: 12px;
            padding: 30px;
            max-width: 800px;
            width: 100%;
            border: 1px solid rgba(255,255,255,0.1);
        }

        .w91-item {
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 15px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .w91-item:last-child {
            border-bottom: none;
        }

        .w91-img {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            object-fit: cover;
        }

        .w91-info {
            flex: 1;
        }

        .w91-info h4 {
            margin: 0 0 5px;
            font-family: var(--font-body);
            font-size: 1rem;
        }

        .w91-price {
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        /* W92: "Frequently Bought Together" Bundle */
        .w92-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
        }

        .w92-bundle {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .w92-product {
            width: 150px;
            text-align: center;
        }

        .w92-product img {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
            border-radius: 8px;
            border: 2px solid transparent;
        }

        .w92-product.active img {
            border-color: var(--wp--preset--color--primary);
        }

        .w92-plus {
            font-size: 2rem;
            color: var(--text-muted);
        }

        .w92-total {
            text-align: center;
            padding: 20px;
            background: rgba(255,255,255,0.03);
            border-radius: 8px;
            max-width: 400px;
            margin: 0 auto;
        }

        /* W93: Post-Purchase Upsell Modal Concept */
        .w93-wrapper {
            padding: var(--spacing-xl) 20px;
            display: flex;
            justify-content: center;
            background: rgba(0, 0, 0, 0.8);
        }

        .w93-modal {
            background: transparent;
            max-width: 600px;
            width: 100%;
            border-radius: 12px;
            overflow: hidden;
        }

        .w93-header {
            background: var(--accent-green);
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        .w93-body {
            padding: 30px;
            text-align: center;
        }

        /* W94: Premium Fabric Upgrade Toggle */
        .w94-wrapper {
            padding: var(--spacing-md) 20px;
            display: flex;
            justify-content: center;
        }

        .w94-toggle-box {
            border: 1px solid var(--wp--preset--color--primary);
            border-radius: 8px;
            padding: 20px;
            max-width: 500px;
            background: transparent;
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }

        .w94-radio {
            margin-top: 5px;
            accent-color: var(--wp--preset--color--primary);
            width: 18px;
            height: 18px;
        }

        /* W95: Styling Service Add-on */
        .w95-wrapper {
            padding: var(--spacing-lg) 20px;
            display: flex;
            justify-content: center;
            background: rgba(255,255,255,0.03);
        }

        .w95-addon {
            display: flex;
            align-items: center;
            gap: 20px;
            background: transparent;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            max-width: 600px;
        }

        /* =========================================
           FOOTER & TRUST SECURE (96-100)
           ========================================= */

        /* W96: Secure Checkout Badges Vector */
        .w96-wrapper {
            padding: var(--spacing-md) 0;
            display: flex;
            justify-content: center;
            gap: 15px;
            filter: grayscale(100%);
            opacity: 0.6;
            flex-wrap: wrap;
        }

        .w96-badge-img {
            height: 30px;
        }

        /* W97: Footer Value Proposition Bar */
        .w97-wrapper {
            background: var(--text-dark);
            color: #fff;
            padding: 40px 20px;
        }

        .w97-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

        .w97-item svg {
            width: 30px;
            height: 30px;
            color: var(--wp--preset--color--primary);
            margin-bottom: 15px;
        }

        .w97-item h4 {
            font-size: 1rem;
            color: #fff;
            margin-bottom: 5px;
        }

        .w97-item p {
            font-size: 0.85rem;
            color: #aaa;
            margin: 0;
        }

        /* W98: Micro-Trust "Made in" Stamp */
        .w98-wrapper {
            padding: var(--spacing-lg);
            display: flex;
            justify-content: center;
        }

        .w98-stamp {
            border: 2px solid var(--text-dark);
            border-radius: 50%;
            width: 120px;
            height: 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            text-transform: uppercase;
            font-size: 0.7rem;
            font-weight: bold;
            letter-spacing: 1px;
            color: #ffffff;
        }

        .w98-stamp span {
            font-size: 1rem;
            font-family: var(--font-heading);
            font-style: italic;
            text-transform: none;
            margin: 5px 0;
        }

        /* W99: "Why Trust Us?" Footer Block */
        .w99-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            border-top: 1px solid rgba(255,255,255,0.1);
        }

        .w99-container {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        .w99-stars {
            color: #FFA41C;
            font-size: 1.5rem;
            letter-spacing: 5px;
            margin-bottom: 15px;
        }

        /* W100: The Final Call-to-Action (Sticky Bottom Concept) */
        .w100-wrapper {
            padding: 20px;
            background: transparent;
            border-top: 1px solid rgba(255,255,255,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 800px;
            margin: 0 auto;
            box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
            border-radius: 8px 8px 0 0;
        }

        .w100-price {
            font-size: 1.5rem;
            font-weight: bold;
            font-family: var(--font-heading);
        }

        .w100-label {
            font-size: 0.8rem;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        /* Responsive */
        @media (max-width: 768px) {

            .w90-box,
            .w91-item,
            .w95-addon {
                flex-direction: column;
                text-align: center;
            }

            .w97-grid {
                grid-template-columns: 1fr 1fr;
                gap: 30px;
            }

            .w100-wrapper {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }
        }
    
/* =========================================
           W101: The "Quiet Luxury" Typographic Opener
           ========================================= */
        .w101-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            text-align: center;
        }

        .w101-title {
            font-size: 4rem;
            max-width: 900px;
            margin: 0 auto;
            color: #ffffff;
            line-height: 1.1;
            letter-spacing: -1px;
        }

        .w101-title span {
            font-style: italic;
            color: var(--wp--preset--color--primary);
        }

        .w101-subtitle {
            font-size: 1.1rem;
            text-transform: uppercase;
            letter-spacing: 4px;
            color: var(--text-muted);
            margin-top: 30px;
        }

        /* =========================================
           W102: Split Story "The Tailor's Hands"
           ========================================= */
        .w102-wrapper {
            display: flex;
            flex-wrap: wrap;
            background: var(--bg-dark);
            color: #fff;
        }

        .w102-img {
            flex: 1;
            min-width: 300px;
            min-height: 500px;
            background: url('https://images.unsplash.com/photo-1594938298596-ef89aaeb6b94?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80') center/cover;
            filter: grayscale(100%);
            transition: 0.5s;
        }

        .w102-wrapper:hover .w102-img {
            filter: grayscale(0%);
        }

        .w102-content {
            flex: 1;
            padding: var(--spacing-xl);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .w102-content h2 {
            font-size: 3rem;
            color: #fff;
            margin-bottom: 20px;
        }

        .w102-stat {
            display: flex;
            gap: 40px;
            margin-top: 40px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 30px;
        }

        .w102-stat div h4 {
            color: var(--wp--preset--color--primary);
            font-size: 2rem;
            margin-bottom: 5px;
        }

        /* =========================================
           W103: Asymmetric Image Grid "The Lifestyle"
           ========================================= */
        .w103-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
        }

        .w103-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .w103-main {
            height: 600px;
            background: url('https://images.unsplash.com/photo-1593030103066-0093718efeb9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80') center/cover;
            border-radius: 12px;
        }

        .w103-side {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .w103-sub {
            flex: 1;
            background: url('https://images.unsplash.com/photo-1598808503746-f34c53b93222?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80') center/cover;
            border-radius: 12px;
        }

        .w103-text {
            flex: 1;
            background: rgba(255,255,255,0.03);
            border-radius: 12px;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .w103-text h3 {
            font-size: 1.8rem;
        }

        /* =========================================
           W104: Hover-Reveal Fabric Characteristics
           ========================================= */
        .w104-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            text-align: center;
        }

        .w104-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            max-width: 1000px;
            margin: 50px auto 0;
        }

        .w104-card {
            position: relative;
            height: 350px;
            border-radius: 12px;
            overflow: hidden;
            cursor: pointer;
        }

        .w104-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            transition: 0.5s;
        }

        .w104-card:hover .w104-bg {
            transform: scale(1.1);
            filter: blur(3px) brightness(0.6);
        }

        .w104-front {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.4);
            color: #fff;
            transition: 0.5s;
        }

        .w104-front h3 {
            font-size: 2rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #fff;
        }

        .w104-back {
            position: absolute;
            inset: 0;
            padding: 30px;
            align-items: center;
            justify-content: center;
            text-align: center;
            opacity: 0;
            transform: translateY(20px);
            transition: 0.5s;
            display: flex;
            flex-direction: column;
            color: #fff;
        }

        .w104-card:hover .w104-front {
            opacity: 0;
        }

        .w104-card:hover .w104-back {
            opacity: 1;
            transform: translateY(0);
        }

        /* =========================================
           W105: The "Monogram" Personalization Hero
           ========================================= */
        .w105-wrapper {
            display: flex;
            align-items: center;
            background: transparent;
            padding: var(--spacing-xl) 20px;
            justify-content: center;
            gap: 60px;
            flex-wrap: wrap;
        }

        .w105-visual {
            position: relative;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: rgba(255,255,255,0.03);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .w105-text-circle {
            font-family: 'Great Vibes', cursive;
            color: var(--wp--preset--color--primary);
            font-size: 4rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }

        .w105-content {
            max-width: 500px;
        }

        .w105-content h2 {
            font-size: 2.8rem;
        }

        .w105-content p {
            font-size: 1.1rem;
            margin-bottom: 30px;
        }

        /* =========================================
           W106: Magazine Style Editorial Paragraph
           ========================================= */
        .w106-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
        }

        .w106-container {
            max-width: 900px;
            margin: 0 auto;
            column-count: 2;
            column-gap: 50px;
        }

        .w106-container p {
            font-size: 1.1rem;
            line-height: 1.8;
            text-align: justify;
            margin-bottom: 20px;
        }

        .w106-container p:first-child::first-letter {
            float: left;
            font-size: 5rem;
            line-height: 0.8;
            padding-right: 15px;
            padding-top: 10px;
            color: #ffffff;
            font-family: var(--font-heading);
        }

        .w106-quote {
            break-inside: avoid;
            font-size: 1.5rem;
            font-family: var(--font-heading);
            font-style: italic;
            color: var(--wp--preset--color--primary);
            text-align: center;
            padding: 20px 0;
            border-top: 1px solid rgba(255,255,255,0.1);
            border-bottom: 1px solid rgba(255,255,255,0.1);
            margin: 30px 0;
        }

        /* =========================================
           W107: Product Lifecycle "Built to Last"
           ========================================= */
        .w107-wrapper {
            padding: var(--spacing-xl) 20px;
            text-align: center;
            background: transparent;
        }

        .w107-title {
            font-size: 2.5rem;
            margin-bottom: 60px;
        }

        .w107-flex {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            gap: 30px;
            flex-wrap: wrap;
            max-width: 1100px;
            margin: 0 auto;
        }

        .w107-item {
            flex: 1;
            min-width: 250px;
            text-align: left;
            padding: 30px;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 8px;
            position: relative;
        }

        .w107-year {
            position: absolute;
            top: -20px;
            left: 30px;
            background: var(--text-dark);
            color: #fff;
            font-weight: bold;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
        }

        .w107-item h4 {
            margin-top: 10px;
            font-size: 1.3rem;
        }

        /* =========================================
           W108: Dynamic Headline Scroller
           ========================================= */
        .w108-wrapper {
            padding: 40px 0;
            background: var(--wp--preset--color--primary);
            overflow: hidden;
            white-space: nowrap;
            display: flex;
        }

        .w108-scroll {
            display: inline-block;
            font-size: 4rem;
            font-family: var(--font-heading);
            color: #fff;
            text-transform: uppercase;
            animation: scrollLeft 20s linear infinite;
        }

        .w108-scroll span {
            margin: 0 40px;
        }

        @keyframes scrollLeft {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        /* =========================================
           W109: Behind the scenes Video Teaser Block
           ========================================= */
        .w109-wrapper {
            padding: var(--spacing-xl) 20px;
            background: var(--bg-dark);
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #fff;
            text-align: center;
        }

        .w109-video {
            width: 100%;
            max-width: 1000px;
            aspect-ratio: 16/9;
            background: url('https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80') center/cover;
            position: relative;
            border-radius: 12px;
            margin-top: 40px;
            cursor: pointer;
        }

        .w109-play {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 2rem;
            transition: 0.3s;
        }

        .w109-video:hover .w109-play {
            background: var(--wp--preset--color--primary);
            color: #fff;
            transform: translate(-50%, -50%) scale(1.1);
        }

        /* =========================================
           W110: The "Investment" Calculator Typo
           ========================================= */
        .w110-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            display: flex;
            justify-content: center;
        }

        .w110-box {
            border: 2px solid var(--wp--preset--color--primary);
            padding: 50px;
            max-width: 800px;
            width: 100%;
            text-align: center;
            position: relative;
        }

        .w110-bg-text {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 12rem;
            font-family: var(--font-heading);
            color: rgba(195, 154, 95, 0.05);
            z-index: 1;
            pointer-events: none;
        }

        .w110-content {
            position: relative;
            z-index: 2;
        }

        .w110-math {
            font-size: 3rem;
            font-family: monospace;
            font-weight: bold;
            color: var(--wp--preset--color--primary);
            margin: 20px 0;
        }

        /* =========================================
           W111: Stylist "Picks of the Month" Carousel Item
           ========================================= */
        .w111-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
        }

        .w111-card {
            max-width: 900px;
            margin: 0 auto;
            display: flex;
            background: transparent;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        .w111-img {
            flex: 1;
            background: url('https://images.unsplash.com/photo-1594938291221-94f18cbb5660?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80') center/cover;
        }

        .w111-content {
            flex: 1;
            padding: 50px;
            position: relative;
        }

        .w111-pin {
            position: absolute;
            top: 0;
            right: 40px;
            background: var(--wp--preset--color--primary);
            color: #fff;
            padding: 15px 10px;
            font-weight: bold;
            border-radius: 0 0 4px 4px;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* =========================================
           W112: Anatomy of the Perfect Shirt
           ========================================= */
        .w112-wrapper {
            padding: var(--spacing-xl) 20px;
            text-align: center;
            background: transparent;
        }

        .w112-container {
            position: relative;
            max-width: 800px;
            margin: 40px auto 0;
        }

        .w112-img {
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
            display: block;
            filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.1));
        }

        .w112-line {
            position: absolute;
            background: var(--border-color);
            height: 1px;
            width: 150px;
        }

        .w112-label {
            position: absolute;
            text-align: left;
            max-width: 200px;
            font-size: 0.9rem;
        }

        .w112-label strong {
            display: block;
            color: var(--wp--preset--color--primary);
            font-size: 1.1rem;
            margin-bottom: 5px;
        }

        /* =========================================
           W113: The "Boardroom Ready" Collection Text
           ========================================= */
        .w113-wrapper {
            padding: var(--spacing-xl) 20px;
            background: var(--text-dark);
            color: #fff;
            text-align: center;
        }

        .w113-content {
            max-width: 700px;
            margin: 0 auto;
        }

        .w113-line {
            width: 60px;
            height: 3px;
            background: var(--wp--preset--color--primary);
            margin: 30px auto;
        }

        .w113-text {
            font-size: 1.5rem;
            line-height: 1.6;
            font-style: italic;
            color: #ddd;
        }

        /* =========================================
           W114: Event-based Carousel (Wedding/Business)
           ========================================= */
        .w114-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
        }

        .w114-flex {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .w114-card {
            flex: 1;
            min-width: 300px;
            max-width: 400px;
            position: relative;
            height: 450px;
            border-radius: 8px;
            overflow: hidden;
        }

        .w114-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            transition: transform 0.8s ease;
        }

        .w114-card:hover .w114-bg {
            transform: scale(1.05);
        }

        .w114-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 30px;
            color: #fff;
        }

        .w114-badge {
            background: transparent;
            color: #ffffff;
            padding: 5px 10px;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 11px;
            align-self: flex-start;
            margin-bottom: 10px;
            border-radius: 4px;
        }

        /* =========================================
           W115: Exclusivity Invitation Block
           ========================================= */
        .w115-wrapper {
            padding: var(--spacing-xl) 20px;
            display: flex;
            justify-content: center;
            background: url('https://images.unsplash.com/photo-1598808503746-f34c53b93222?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80') center/cover fixed;
            position: relative;
        }

        .w115-wrapper::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
        }

        .w115-content {
            position: relative;
            z-index: 2;
            border: 1px solid rgba(255, 255, 255, 0.3);
            padding: 60px 40px;
            max-width: 600px;
            text-align: center;
            color: #fff;
            backdrop-filter: blur(5px);
        }

        /* =========================================
           W116: The Craftsmanship Number Grid
           ========================================= */
        .w116-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
        }

        .w116-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            max-width: 1200px;
            margin: 0 auto;
            border: 1px solid rgba(255,255,255,0.1);
        }

        .w116-item {
            text-align: center;
            padding: 40px 20px;
            border-right: 1px solid rgba(255,255,255,0.1);
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .w116-val {
            font-size: 3rem;
            font-family: var(--font-heading);
            color: var(--wp--preset--color--primary);
            margin-bottom: 10px;
            display: block;
        }

        .w116-lbl {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #ffffff;
            font-weight: 500;
            display: block;
        }

        /* =========================================
           W117: Style Quiz Prompt Typo
           ========================================= */
        .w117-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
            text-align: center;
        }

        .w117-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .w117-options {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 40px;
            flex-wrap: wrap;
        }

        .w117-btn {
            padding: 15px 30px;
            border: 2px solid var(--border-color);
            background: transparent;
            cursor: pointer;
            border-radius: 30px;
            font-weight: 600;
            color: var(--text-muted);
            transition: 0.3s;
        }

        .w117-btn:hover {
            border-color: var(--wp--preset--color--primary);
            color: var(--wp--preset--color--primary);
        }

        /* =========================================
           W118: Fabric Source Geographic Map Text
           ========================================= */
        .w118-wrapper {
            padding: var(--spacing-xl) 20px;
            text-align: center;
            background: transparent;
        }

        .w118-locations {
            display: flex;
            justify-content: center;
            gap: 60px;
            flex-wrap: wrap;
            margin-top: 50px;
        }

        .w118-loc {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 200px;
        }

        .w118-pin {
            width: 50px;
            height: 50px;
            background: rgba(195, 154, 95, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--wp--preset--color--primary);
            margin-bottom: 15px;
        }

        /* =========================================
           W119: The Master Fitter Bio
           ========================================= */
        .w119-wrapper {
            padding: var(--spacing-xl) 20px;
            background: var(--text-dark);
            color: #fff;
            display: flex;
            justify-content: center;
        }

        .w119-card {
            display: flex;
            align-items: center;
            gap: 40px;
            max-width: 900px;
            flex-wrap: wrap;
        }

        .w119-img {
            width: 250px;
            height: 350px;
            background: url('https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80') center/cover;
            border-radius: 8px;
        }

        .w119-content {
            flex: 1;
            min-width: 300px;
        }

        .w119-content h3 {
            font-size: 2.5rem;
            color: #fff;
            margin-bottom: 10px;
        }

        .w119-signature {
            font-family: 'Great Vibes', cursive;
            color: var(--wp--preset--color--primary);
            font-size: 2.5rem;
            margin-top: 30px;
        }

        /* =========================================
           W120: Minimalist Call/Book Bar
           ========================================= */
        .w120-wrapper {
            padding: 30px 20px;
            background: var(--wp--preset--color--primary);
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1000px;
            margin: 0 auto;
            border-radius: 8px;
            flex-wrap: wrap;
            gap: 20px;
        }

        .w120-text {
            color: #fff;
            font-size: 1.5rem;
            font-weight: 600;
            font-family: var(--font-heading);
        }

        /* Responsive */
        @media (max-width: 992px) {
            .w106-container {
                column-count: 1;
            }

            .w103-grid {
                grid-template-columns: 1fr;
            }

            .w116-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .w111-card {
                flex-direction: column;
            }

            .w111-img {
                height: 300px;
            }
        }

        @media (max-width: 768px) {
            :root {
                --spacing-lg: 2rem;
                --spacing-xl: 3rem;
            }

            .preview-controls {
                flex-direction: column;
                gap: 10px;
                padding: 10px;
                text-align: center;
            }

            .widget-container {
                margin-top: 130px;
                padding: 10px;
            }

            h1 {
                font-size: 2.5rem !important;
            }

            h2 {
                font-size: 2rem !important;
            }

            .w101-title {
                font-size: 2.5rem;
            }

            .w104-grid {
                grid-template-columns: 1fr;
            }

            .w107-flex {
                flex-direction: column;
            }

            .w118-locations {
                flex-direction: column;
                gap: 30px;
                align-items: center;
            }

            .w120-wrapper {
                justify-content: center;
                text-align: center;
            }

            .w112-line,
            .w112-label {
                display: none;
                /* Hide complex absolutes on mobile for the shirt visual */
            }
        }
    
/* =========================================
           W121: Interactive Measurement Diagram
           ========================================= */
        .w121-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            text-align: center;
        }

        .w121-container {
            position: relative;
            max-width: 600px;
            margin: 0 auto;
        }

        .w121-img {
            width: 100%;
            filter: contrast(1.1);
        }

        .w121-dot {
            position: absolute;
            width: 24px;
            height: 24px;
            background: var(--wp--preset--color--primary);
            border-radius: 50%;
            border: 3px solid #fff;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-body);
            color: #fff;
            font-weight: bold;
            font-size: 12px;
            transition: 0.3s;
        }

        .w121-dot:hover {
            transform: scale(1.2);
        }

        .w121-tooltip {
            position: absolute;
            bottom: 35px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--text-dark);
            color: #fff;
            padding: 10px 15px;
            border-radius: 4px;
            font-size: 0.85rem;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: 0.3s;
        }

        .w121-dot:hover .w121-tooltip {
            opacity: 1;
            bottom: 40px;
        }

        .w121-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: var(--text-dark) transparent transparent transparent;
        }

        /* =========================================
           W122: Feature Callout List Left Align
           ========================================= */
        .w122-wrapper {
            padding: var(--spacing-xl) 20px;
            display: flex;
            align-items: center;
            gap: 60px;
            max-width: 1200px;
            margin: 0 auto;
            flex-wrap: wrap;
        }

        .w122-img {
            flex: 1;
            min-width: 300px;
            border-radius: 8px;
            overflow: hidden;
            height: 600px;
            background: url('https://images.unsplash.com/photo-1594938291221-94f18cbb5660?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80') center/cover;
        }

        .w122-content {
            flex: 1;
            min-width: 300px;
        }

        .w122-item {
            margin-bottom: 30px;
            display: flex;
            gap: 20px;
        }

        .w122-icon {
            color: var(--wp--preset--color--primary);
            font-size: 2rem;
            line-height: 1;
        }

        .w122-text h4 {
            font-size: 1.3rem;
            margin-bottom: 5px;
        }

        /* =========================================
           W123: Feature Callout List Right Align
           ========================================= */
        .w123-wrapper {
            padding: var(--spacing-xl) 20px;
            display: flex;
            align-items: center;
            gap: 60px;
            max-width: 1200px;
            margin: 0 auto;
            flex-wrap: wrap-reverse;
            background: rgba(255,255,255,0.03);
            border-radius: 12px;
        }

        .w123-content {
            flex: 1;
            min-width: 300px;
        }

        .w123-item {
            margin-bottom: 30px;
            display: flex;
            gap: 20px;
            flex-direction: row-reverse;
            text-align: right;
        }

        .w123-icon {
            color: var(--wp--preset--color--primary);
            font-size: 2rem;
            line-height: 1;
        }

        .w123-text h4 {
            font-size: 1.3rem;
            margin-bottom: 5px;
        }

        .w123-img {
            flex: 1;
            min-width: 300px;
            border-radius: 8px;
            overflow: hidden;
            height: 500px;
            background: url('https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80') center/cover;
        }

        /* =========================================
           W124: Construction Deep Dive (Canvas/Lining)
           ========================================= */
        .w124-wrapper {
            padding: var(--spacing-xl) 20px;
            background: var(--text-dark);
            color: #fff;
            text-align: center;
        }

        .w124-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            max-width: 1000px;
            margin: 50px auto 0;
        }

        .w124-card {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 40px 20px;
            border-radius: 8px;
        }

        .w124-number {
            font-size: 3rem;
            font-family: var(--font-heading);
            color: var(--wp--preset--color--primary);
            font-style: italic;
            opacity: 0.5;
            margin-bottom: 10px;
            display: block;
        }

        .w124-card h4 {
            font-size: 1.5rem;
            color: #fff;
        }

        /* =========================================
           W125: Button Options Display Grid
           ========================================= */
        .w125-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            text-align: center;
        }

        .w125-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px;
            max-width: 800px;
            margin: 40px auto 0;
        }

        .w125-item {
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 8px;
            padding: 20px;
            cursor: pointer;
            transition: 0.3s;
        }

        .w125-item:hover {
            border-color: var(--wp--preset--color--primary);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transform: translateY(-3px);
        }

        .w125-circle {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin: 0 auto 15px;
            background-size: cover;
            background-position: center;
            border: 2px solid #fff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        /* =========================================
           W126: Lapel Options Visual Compare
           ========================================= */
        .w126-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
            text-align: center;
        }

        .w126-flex {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-top: 40px;
            flex-wrap: wrap;
        }

        .w126-col {
            flex: 1;
            min-width: 250px;
            max-width: 300px;
        }

        .w126-img-box {
            width: 100%;
            aspect-ratio: 3/4;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 20px;
            border: 1px solid rgba(255,255,255,0.1);
            background: #fff url('https://images.unsplash.com/photo-1598808503746-f34c53b93222?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80') center/cover;
            filter: grayscale(50%);
        }

        .w126-col h4 {
            font-size: 1.3rem;
            margin-bottom: 10px;
        }

        .w126-col p {
            font-size: 0.9rem;
        }

        /* =========================================
           W127: Trouser Detail Checklist
           ========================================= */
        .w127-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            display: flex;
            justify-content: center;
        }

        .w127-box {
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px;
            max-width: 900px;
            width: 100%;
            display: flex;
            overflow: hidden;
            flex-wrap: wrap;
        }

        .w127-img {
            flex: 1;
            min-width: 300px;
            background: url('https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80') center/cover;
        }

        .w127-list {
            flex: 1;
            min-width: 300px;
            padding: 40px;
            background: rgba(255,255,255,0.03);
        }

        .w127-list ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .w127-list li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            font-weight: 500;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .w127-list li:last-child {
            border-bottom: none;
        }

        .w127-list li::before {
            content: '✓';
            color: var(--wp--preset--color--primary);
            font-weight: bold;
            font-size: 1.2rem;
        }

        /* =========================================
           W128: Shoulder Construction Types
           ========================================= */
        .w128-wrapper {
            padding: var(--spacing-xl) 20px;
            text-align: center;
            background: transparent;
        }

        .w128-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            max-width: 900px;
            margin: 40px auto 0;
        }

        .w128-card {
            text-align: left;
            padding: 30px;
            border: 1px solid rgba(255,255,255,0.1);
            border-left: 4px solid var(--wp--preset--color--primary);
            border-radius: 8px;
        }

        .w128-card h4 {
            font-size: 1.4rem;
            color: var(--wp--preset--color--primary);
        }

        /* =========================================
           W129: The "Hidden Details" Tooltip Image
           ========================================= */
        .w129-wrapper {
            padding: var(--spacing-xl) 20px;
            background: var(--bg-dark);
            color: #fff;
            text-align: center;
        }

        .w129-relative {
            position: relative;
            max-width: 800px;
            margin: 40px auto 0;
        }

        .w129-relative img {
            width: 100%;
            opacity: 0.8;
            border-radius: 8px;
        }

        .w129-marker {
            position: absolute;
            border-bottom: 1px dashed var(--wp--preset--color--primary);
            padding-bottom: 5px;
            cursor: help;
        }

        .w129-marker span {
            display: none;
            position: absolute;
            bottom: 100%;
            left: 0;
            width: 200px;
            background: transparent;
            color: #ffffff;
            padding: 15px;
            border-radius: 4px;
            font-size: 0.85rem;
            text-align: left;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }

        .w129-marker:hover span {
            display: block;
        }

        /* =========================================
           W130: Shirt Collar Matcher Typo
           ========================================= */
        .w130-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            text-align: center;
        }

        .w130-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            max-width: 900px;
            margin: 40px auto 0;
            flex-wrap: wrap;
        }

        .w130-equation {
            font-size: 2rem;
            color: var(--text-muted);
        }

        .w130-box {
            border: 2px solid var(--border-color);
            padding: 30px;
            border-radius: 8px;
            flex: 1;
            min-width: 200px;
            font-weight: bold;
            font-family: var(--font-heading);
            font-size: 1.2rem;
        }

        /* =========================================
           W131: Seasons Matrix
           ========================================= */
        .w131-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
            text-align: center;
        }

        .w131-table {
            width: 100%;
            max-width: 800px;
            margin: 40px auto 0;
            border-collapse: collapse;
            background: transparent;
            text-align: left;
        }

        .w131-table th {
            background: var(--text-dark);
            color: #fff;
            padding: 15px 20px;
            font-family: var(--font-heading);
            font-weight: normal;
            font-size: 1.2rem;
        }

        .w131-table td {
            padding: 15px 20px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .w131-table tr:last-child td {
            border-bottom: none;
        }

        .w131-badge {
            display: inline-block;
            padding: 4px 8px;
            background: #eef2ff;
            color: #4f46e5;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: bold;
            margin-right: 5px;
        }

        /* =========================================
           W132: Fabric Weave Zoom
           ========================================= */
        .w132-wrapper {
            padding: var(--spacing-xl) 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 60px;
            flex-wrap: wrap;
            background: transparent;
        }

        .w132-zoom {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 10px solid var(--bg-light);
            background: url('https://images.unsplash.com/photo-1617137968427-85924c800a22?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80') center/cover;
            position: relative;
        }

        .w132-zoom::after {
            content: '🔎';
            position: absolute;
            bottom: 20px;
            right: 20px;
            font-size: 2rem;
            background: transparent;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .w132-content {
            max-width: 500px;
        }

        /* =========================================
           W133: Pocket Styles Visual Menu
           ========================================= */
        .w133-wrapper {
            padding: var(--spacing-xl) 20px;
            text-align: center;
            background: rgba(255,255,255,0.03);
        }

        .w133-flex {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 40px;
            flex-wrap: wrap;
        }

        .w133-style {
            background: transparent;
            border: 1px solid rgba(255,255,255,0.1);
            padding: 30px;
            border-radius: 8px;
            flex: 1;
            min-width: 200px;
            max-width: 250px;
            text-align: center;
        }

        .w133-style svg {
            width: 60px;
            height: 60px;
            color: var(--text-muted);
            margin-bottom: 15px;
        }

        /* =========================================
           W134: Lining Customization Feature
           ========================================= */
        .w134-wrapper {
            display: flex;
            background: transparent;
            flex-wrap: wrap;
        }

        .w134-col1 {
            flex: 1;
            min-width: 300px;
            padding: var(--spacing-xl) 10%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .w134-col2 {
            flex: 1;
            min-width: 300px;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .w134-swatch {
            height: 250px;
            background-size: cover;
            background-position: center;
            transition: 0.3s;
            position: relative;
        }

        .w134-swatch:hover {
            opacity: 0.8;
        }

        .w134-swatch:hover::after {
            content: 'Select +';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        /* =========================================
           W135: Monogram Fonts Preview
           ========================================= */
        .w135-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
            text-align: center;
        }

        .w135-fonts {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-top: 50px;
            flex-wrap: wrap;
        }

        .w135-font-card {
            background: transparent;
            padding: 30px;
            border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.1);
            flex: 1;
            min-width: 200px;
            max-width: 300px;
        }

        .w135-font-card span {
            display: block;
            font-size: 3rem;
            margin-bottom: 10px;
            color: var(--wp--preset--color--primary);
        }

        /* =========================================
           W136: Thread Color Accent Block
           ========================================= */
        .w136-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            text-align: center;
        }

        .w136-threads {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 30px;
            flex-wrap: wrap;
        }

        .w136-thread {
            width: 40px;
            height: 80px;
            border-radius: 20px;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: 0.2s;
        }

        .w136-thread:hover {
            transform: translateY(-10px);
        }

        /* =========================================
           W137: The "Milanese Buttonhole" Spotlight
           ========================================= */
        .w137-wrapper {
            padding: var(--spacing-xl) 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            background: transparent;
        }

        .w137-hero {
            width: 100%;
            max-width: 1000px;
            height: 400px;
            background: url('https://images.unsplash.com/photo-1594938298596-ef89aaeb6b94?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80') center/cover;
            border-radius: 12px;
            margin-bottom: 40px;
            position: relative;
        }

        .w137-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 12px;
        }

        .w137-play {
            position: absolute;
            bottom: -30px;
            left: 50%;
            transform: translateX(-50%);
            background: transparent;
            padding: 20px 40px;
            border-radius: 40px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            font-weight: bold;
            font-family: var(--font-heading);
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* =========================================
           W138: Trouser Hem Options
           ========================================= */
        .w138-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
            text-align: center;
        }

        .w138-options {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-top: 40px;
            flex-wrap: wrap;
        }

        .w138-opt {
            width: 250px;
        }

        .w138-img-ph {
            height: 300px;
            background: transparent;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 8px;
            margin-bottom: 15px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 20px;
            font-weight: bold;
            color: #ccc;
            border-bottom: 4px solid var(--wp--preset--color--primary);
        }

        /* =========================================
           W139: Vest / Waistcoat Addition CTA
           ========================================= */
        .w139-wrapper {
            padding: var(--spacing-xl) 20px;
            background: var(--text-dark);
            color: #fff;
            display: flex;
            justify-content: center;
        }

        .w139-box {
            border: 1px dashed rgba(255, 255, 255, 0.3);
            padding: 50px;
            max-width: 800px;
            text-align: center;
            border-radius: 12px;
        }

        .w139-box h2 {
            color: var(--wp--preset--color--primary);
        }

        /* =========================================
           W140: Shirt Cuff Comparison
           ========================================= */
        .w140-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            text-align: center;
        }

        .w140-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            max-width: 1000px;
            margin: 40px auto 0;
            gap: 40px;
        }

        .w140-card {
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 8px;
            overflow: hidden;
        }

        .w140-card div {
            padding: 30px;
        }

        .w140-card h3 {
            background: rgba(255,255,255,0.03);
            padding: 15px 0;
            margin: 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        /* Responsive */
        @media (max-width: 992px) {

            .w122-wrapper,
            .w123-wrapper {
                flex-direction: column;
            }

            .w124-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .w127-box {
                flex-direction: column;
            }

            .w134-wrapper {
                flex-direction: column;
            }
        }

        @media (max-width: 768px) {
            :root {
                --spacing-lg: 2rem;
                --spacing-xl: 3rem;
            }

            .preview-controls {
                flex-direction: column;
                gap: 10px;
                padding: 10px;
                text-align: center;
            }

            .widget-container {
                margin-top: 130px;
                padding: 10px;
            }

            h1 {
                font-size: 2.5rem !important;
            }

            h2 {
                font-size: 2rem !important;
            }

            .w128-grid {
                grid-template-columns: 1fr;
            }

            .w130-container {
                flex-direction: column;
            }

            .w130-equation {
                display: none;
            }

            .w140-grid {
                grid-template-columns: 1fr;
            }

            .w132-wrapper {
                flex-direction: column;
                text-align: center;
            }
        }
    
/* =========================================
           W141: The "Zero Risk" Typographic Poster
           ========================================= */
        .w141-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            text-align: center;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .w141-content {
            max-width: 800px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .w141-shield {
            width: 80px;
            height: 80px;
            margin-bottom: 30px;
            fill: none;
            stroke: var(--wp--preset--color--primary);
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .w141-title {
            font-size: 3rem;
            margin-bottom: 20px;
            letter-spacing: -1px;
        }

        /* =========================================
           W142: Split Screen "Before & After" Concept
           ========================================= */
        .w142-wrapper {
            display: flex;
            flex-wrap: wrap;
            background: var(--bg-dark);
            color: #fff;
        }

        .w142-half {
            flex: 1;
            min-width: 300px;
            padding: var(--spacing-xl);
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
        }

        .w142-half:first-child {
            background: #2a2a2a;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
        }

        .w142-tag {
            position: absolute;
            top: 40px;
            background: rgba(0, 0, 0, 0.5);
            padding: 5px 15px;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: bold;
            font-size: 12px;
        }

        .w142-half h3 {
            font-size: 2.2rem;
            margin-bottom: 15px;
        }

        .w142-half p {
            color: #ccc;
            font-size: 1.1rem;
        }

        /* =========================================
           W143: Measurement Process Timeline Horizontal
           ========================================= */
        .w143-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            text-align: center;
            overflow-x: hidden;
        }

        .w143-timeline {
            display: flex;
            justify-content: space-between;
            position: relative;
            max-width: 1000px;
            margin: 60px auto 0;
            padding: 0 50px;
        }

        .w143-timeline::before {
            content: '';
            position: absolute;
            top: 25px;
            left: 50px;
            right: 50px;
            height: 2px;
            background: var(--border-color);
            z-index: 1;
        }

        .w143-step {
            position: relative;
            z-index: 2;
            width: 25%;
            text-align: center;
        }

        .w143-dot {
            width: 50px;
            height: 50px;
            background: transparent;
            border: 2px solid var(--wp--preset--color--primary);
            border-radius: 50%;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-family: var(--font-heading);
            font-size: 1.2rem;
            color: var(--wp--preset--color--primary);
        }

        .w143-step.active .w143-dot {
            background: var(--wp--preset--color--primary);
            color: #fff;
        }

        /* =========================================
           W144: Time & Effort Justification Box
           ========================================= */
        .w144-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
            display: flex;
            justify-content: center;
        }

        .w144-box {
            background: transparent;
            border-radius: 8px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
            max-width: 800px;
            padding: 50px;
            display: flex;
            gap: 40px;
            align-items: center;
            flex-wrap: wrap;
            border-top: 5px solid var(--wp--preset--color--primary);
        }

        .w144-huge {
            font-size: 6rem;
            font-family: var(--font-heading);
            color: var(--wp--preset--color--primary);
            line-height: 1;
            flex: 1;
            min-width: 150px;
            text-align: center;
        }

        .w144-text {
            flex: 3;
            min-width: 300px;
        }

        /* =========================================
           W145: Service Tiers / Packages
           ========================================= */
        .w145-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            text-align: center;
        }

        .w145-cards {
            display: flex;
            justify-content: center;
            gap: 20px;
            max-width: 1100px;
            margin: 50px auto 0;
            flex-wrap: wrap;
            align-items: flex-end;
        }

        .w145-card {
            flex: 1;
            min-width: 300px;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 8px;
            padding: 40px 30px;
            background: transparent;
            text-align: left;
        }

        .w145-card.featured {
            border-color: var(--wp--preset--color--primary);
            box-shadow: 0 15px 30px rgba(195, 154, 95, 0.15);
            border-width: 2px;
            transform: translateY(-20px);
            position: relative;
        }

        .w145-badge {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--wp--preset--color--primary);
            color: #fff;
            padding: 5px 15px;
            font-size: 0.8rem;
            text-transform: uppercase;
            font-weight: bold;
            border-radius: 20px;
        }

        .w145-price {
            font-size: 2.5rem;
            font-family: var(--font-heading);
            font-weight: bold;
            margin: 20px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            padding-bottom: 20px;
        }

        .w145-list {
            list-style: none;
            padding: 0;
            margin: 0 0 30px 0;
        }

        .w145-list li {
            margin-bottom: 15px;
            font-size: 0.95rem;
            display: flex;
            gap: 10px;
        }

        .w145-list li::before {
            content: '✓';
            color: var(--wp--preset--color--primary);
            font-weight: bold;
        }

        /* =========================================
           W146: Video Testimonial Spotlight
           ========================================= */
        .w146-wrapper {
            padding: var(--spacing-xl) 20px;
            background: var(--text-dark);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 60px;
            flex-wrap: wrap;
        }

        .w146-video {
            flex: 1;
            min-width: 300px;
            max-width: 500px;
            aspect-ratio: 9/16;
            background: url('https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80') center/cover;
            border-radius: 12px;
            position: relative;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .w146-play {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background: var(--wp--preset--color--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            cursor: pointer;
            box-shadow: 0 0 0 10px rgba(195, 154, 95, 0.3);
        }

        .w146-content {
            flex: 1;
            min-width: 300px;
            max-width: 500px;
        }

        .w146-quote {
            font-family: var(--font-heading);
            font-size: 1.8rem;
            font-style: italic;
            line-height: 1.4;
            margin-bottom: 20px;
        }

        /* =========================================
           W147: Fabric Mill Partner Logos
           ========================================= */
        .w147-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            text-align: center;
        }

        .w147-logos {
            display: flex;
            justify-content: center;
            gap: 50px;
            flex-wrap: wrap;
            margin-top: 40px;
            opacity: 0.6;
            filter: grayscale(100%);
            transition: 0.3s;
        }

        .w147-logos:hover {
            opacity: 1;
            filter: grayscale(0%);
        }

        .w147-logo {
            font-size: 1.5rem;
            font-family: var(--font-heading);
            font-weight: bold;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        /* =========================================
           W148: The "Anatomy of Fit" Hotspots Vertical
           ========================================= */
        .w148-wrapper {
            padding: var(--spacing-xl) 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 60px;
            max-width: 1200px;
            margin: 0 auto;
            flex-wrap: wrap;
        }

        .w148-img {
            flex: 1;
            min-width: 300px;
            max-width: 400px;
            height: 600px;
            background: url('https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80') center/cover;
            position: relative;
        }

        .w148-list {
            flex: 1;
            min-width: 300px;
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .w148-item {
            padding-left: 20px;
            border-left: 2px solid var(--border-color);
            cursor: pointer;
            transition: 0.3s;
        }

        .w148-item:hover,
        .w148-item.active {
            border-left-color: var(--wp--preset--color--primary);
        }

        .w148-item:hover h4,
        .w148-item.active h4 {
            color: var(--wp--preset--color--primary);
        }

        /* =========================================
           W149: Urgent Alteration Service Banner
           ========================================= */
        .w149-wrapper {
            padding: 40px 20px;
            background: var(--bg-dark);
            color: #fff;
        }

        .w149-flex {
            max-width: 1000px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
            flex-wrap: wrap;
        }

        .w149-icon {
            background: rgba(255, 255, 255, 0.1);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: var(--wp--preset--color--primary);
        }

        /* =========================================
           W150: VIP Waiting List / Private Showroom
           ========================================= */
        .w150-wrapper {
            padding: var(--spacing-xl) 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 600px;
            background: url('https://images.unsplash.com/photo-1617137968427-85924c800a22?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80') center/cover fixed;
            position: relative;
        }

        .w150-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 100%);
        }

        .w150-content {
            position: relative;
            z-index: 2;
            max-width: 600px;
            text-align: center;
            color: #fff;
        }

        .w150-input-group {
            display: flex;
            margin-top: 40px;
        }

        .w150-input {
            flex: 1;
            padding: 15px 20px;
            border: none;
            font-size: 1rem;
            outline: none;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

        .w150-input::placeholder {
            color: #aaa;
        }

        .w150-btn {
            padding: 15px 30px;
            border: none;
            background: var(--wp--preset--color--primary);
            color: #fff;
            font-weight: bold;
            text-transform: uppercase;
            cursor: pointer;
        }

        /* =========================================
           W151: Post-Purchase "What Happens Next"
           ========================================= */
        .w151-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
        }

        .w151-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

        .w151-card {
            padding: 30px 20px;
            border: 1px dashed var(--border-color);
            position: relative;
        }

        .w151-num {
            font-size: 4rem;
            font-family: var(--font-heading);
            color: var(--bg-light);
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1;
            line-height: 1;
        }

        .w151-text {
            position: relative;
            z-index: 2;
            margin-top: 40px;
        }

        /* =========================================
           W152: "Perfect Fit" Guarantee Shield Big
           ========================================= */
        .w152-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
            display: flex;
            justify-content: center;
        }

        .w152-box {
            background: transparent;
            border: 2px solid var(--wp--preset--color--primary);
            padding: 60px;
            max-width: 700px;
            text-align: center;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(195, 154, 95, 0.1);
        }

        .w152-box h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

        /* =========================================
           W153: Digital Tailoring App Teaser
           ========================================= */
        .w153-wrapper {
            padding: var(--spacing-xl) 20px;
            background: var(--text-dark);
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 60px;
            flex-wrap: wrap;
        }

        .w153-phone {
            width: 250px;
            height: 500px;
            border: 10px solid #333;
            border-radius: 30px;
            background: url('https://images.unsplash.com/photo-1598808503746-f34c53b93222?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80') center/cover;
            position: relative;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        }

        .w153-content {
            max-width: 500px;
        }

        .w153-content h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

        /* =========================================
           W154: Wardrobe Consultation Booking
           ========================================= */
        .w154-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            display: flex;
            justify-content: center;
        }

        .w154-card {
            display: flex;
            max-width: 1000px;
            background: rgba(255,255,255,0.03);
            border-radius: 12px;
            overflow: hidden;
            flex-wrap: wrap;
        }

        .w154-img {
            flex: 1;
            min-width: 300px;
            background: url('https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80') center/cover;
        }

        .w154-info {
            flex: 1.5;
            min-width: 300px;
            padding: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* =========================================
           W155: Fabric Swatch Request Card (Lead Gen)
           ========================================= */
        .w155-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            text-align: center;
        }

        .w155-container {
            max-width: 800px;
            margin: 0 auto;
            border: 1px solid rgba(255,255,255,0.1);
            padding: 50px;
            border-radius: 8px;
            position: relative;
        }

        .w155-circles {
            display: flex;
            justify-content: center;
            gap: -20px;
            margin-bottom: 30px;
        }

        .w155-circle {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 3px solid #fff;
            background-size: cover;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin-left: -20px;
        }

        /* =========================================
           W156: Client Retention / "Your Profile"
           ========================================= */
        .w156-wrapper {
            padding: var(--spacing-xl) 20px;
            background: var(--bg-dark);
            color: #fff;
        }

        .w156-grid {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 40px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .w156-visual {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 30px;
            border-radius: 8px;
            text-align: center;
        }

        .w156-data {
            display: flex;
            flex-direction: column;
            gap: 20px;
            justify-content: center;
        }

        /* =========================================
           W157: Seasonal Wardrobe Rotate CTA
           ========================================= */
        .w157-wrapper {
            padding: var(--spacing-xl) 20px;
            background: url('https://images.unsplash.com/photo-1594938298596-ef89aaeb6b94?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80') center/cover;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .w157-wrapper::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.9);
        }

        .w157-content {
            position: relative;
            z-index: 2;
            max-width: 600px;
            text-align: center;
        }

        .w157-content h2 {
            font-size: 3rem;
            color: #ffffff;
        }

        /* =========================================
           W158: The "Gift of Fit" Gift Card Block
           ========================================= */
        .w158-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            display: flex;
            justify-content: center;
            gap: 60px;
            flex-wrap: wrap;
            align-items: center;
        }

        .w158-card {
            background: var(--text-dark);
            color: #fff;
            width: 400px;
            height: 250px;
            border-radius: 12px;
            padding: 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
            position: relative;
            overflow: hidden;
        }

        .w158-card::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 50%;
            background: linear-gradient(to left, rgba(255, 255, 255, 0.1), transparent);
            transform: skewX(-20deg) translateX(50px);
        }

        /* =========================================
           W159: "Speak to a Master Tailor" Direct Line
           ========================================= */
        .w159-wrapper {
            padding: 40px 20px;
            background: var(--wp--preset--color--primary);
            color: #fff;
        }

        .w159-flex {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 40px;
            max-width: 1000px;
            margin: 0 auto;
            flex-wrap: wrap;
            text-align: center;
        }

        .w159-number {
            font-size: 2.5rem;
            font-family: var(--font-heading);
            font-weight: bold;
        }

        /* =========================================
           W160: The Final Convincer Typo List
           ========================================= */
        .w160-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            text-align: center;
        }

        .w160-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
            max-width: 600px;
            margin: 40px auto 0;
            font-size: 1.2rem;
            font-family: var(--font-heading);
            color: #ffffff;
        }

        .w160-list div {
            padding: 15px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        /* Responsive */
        @media (max-width: 992px) {
            .w145-cards {
                flex-direction: column;
                align-items: center;
            }

            .w145-card {
                width: 100%;
                max-width: 500px;
            }

            .w145-card.featured {
                transform: translateY(0);
            }

            .w151-grid,
            .w156-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 768px) {
            :root {
                --spacing-lg: 2rem;
                --spacing-xl: 3rem;
            }

            .preview-controls {
                flex-direction: column;
                gap: 10px;
                padding: 10px;
                text-align: center;
            }

            .widget-container {
                margin-top: 130px;
                padding: 10px;
            }

            h1 {
                font-size: 2.5rem !important;
            }

            h2 {
                font-size: 2rem !important;
            }

            .w143-timeline {
                flex-direction: column;
                gap: 30px;
                padding: 0;
            }

            .w143-timeline::before {
                left: 24px;
                top: 0;
                bottom: 0;
                width: 2px;
                height: auto;
                right: auto;
            }

            .w143-step {
                width: 100%;
                display: flex;
                align-items: center;
                text-align: left;
                gap: 20px;
            }

            .w143-dot {
                margin: 0;
            }

            .w144-box,
            .w150-input-group,
            .w159-flex {
                flex-direction: column;
                text-align: center;
            }

            .w151-grid,
            .w156-grid {
                grid-template-columns: 1fr;
            }

            .w158-card {
                width: 100%;
            }
        }
    
/* =========================================
           W161: Split Layout Dual Lookbook
           ========================================= */
        .w161-wrapper {
            display: flex;
            height: 600px;
            background: transparent;
        }

        .w161-left {
            flex: 1;
            background: url('https://images.unsplash.com/photo-1594938298596-ef89aaeb6b94?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80') center/cover;
            position: relative;
            display: flex;
            align-items: flex-end;
            padding: 40px;
        }

        .w161-right {
            flex: 1;
            background: url('https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80') center/cover;
            position: relative;
            display: flex;
            align-items: flex-end;
            padding: 40px;
        }

        .w161-content {
            background: rgba(255, 255, 255, 0.9);
            padding: 30px;
            border-radius: 8px;
            max-width: 400px;
            backdrop-filter: blur(5px);
        }

        .w161-content h3 {
            font-size: 2rem;
            margin-bottom: 10px;
        }

        /* =========================================
           W162: "Shop The Look" Hotspots
           ========================================= */
        .w162-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
            display: flex;
            justify-content: center;
        }

        .w162-img-container {
            position: relative;
            max-width: 600px;
        }

        .w162-img {
            width: 100%;
            border-radius: 12px;
        }

        .w162-hotspot {
            position: absolute;
            width: 30px;
            height: 30px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            transition: 0.3s;
        }

        .w162-hotspot::after {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            background: var(--text-dark);
            border-radius: 50%;
        }

        .w162-hotspot:hover {
            transform: scale(1.2);
        }

        .w162-panel {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            background: transparent;
            padding: 15px;
            border-radius: 8px;
            width: 220px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            opacity: 0;
            pointer-events: none;
            transition: 0.3s;
            z-index: 10;
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .w162-hotspot:hover .w162-panel {
            opacity: 1;
            pointer-events: auto;
        }

        .w162-panel img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
        }

        .w162-panel-info {
            flex: 1;
            text-align: left;
        }

        .w162-panel-info h4 {
            font-family: var(--font-body);
            font-size: 0.9rem;
            margin: 0 0 5px;
        }

        /* =========================================
           W163: Typographic Category List
           ========================================= */
        .w163-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
        }

        .w163-list {
            max-width: 1000px;
            margin: 0 auto;
            list-style: none;
            padding: 0;
        }

        .w163-item {
            border-bottom: 1px solid rgba(255,255,255,0.1);
            padding: 30px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            transition: 0.3s;
        }

        .w163-item h2 {
            font-size: 4rem;
            color: var(--text-muted);
            transition: 0.3s;
            margin: 0;
        }

        .w163-arrow {
            font-size: 2rem;
            color: var(--text-muted);
            transition: 0.3s;
            opacity: 0;
            transform: translateX(-20px);
        }

        .w163-item:hover h2 {
            color: #ffffff;
            padding-left: 20px;
        }

        .w163-item:hover .w163-arrow {
            opacity: 1;
            transform: translateX(0);
            color: var(--wp--preset--color--primary);
        }

        /* =========================================
           W164: Asymmetric Customer Quote Card
           ========================================= */
        .w164-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
            display: flex;
            justify-content: center;
        }

        .w164-card {
            display: flex;
            max-width: 1000px;
            align-items: center;
            gap: 40px;
            position: relative;
            z-index: 1;
        }

        .w164-card::before {
            content: '';
            position: absolute;
            right: 0;
            bottom: -20px;
            width: 70%;
            height: 100%;
            background: transparent;
            border: 1px solid rgba(255,255,255,0.1);
            z-index: -1;
            border-radius: 12px;
        }

        .w164-img {
            width: 350px;
            height: 450px;
            background: url('https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80') center/cover;
            border-radius: 12px;
            box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.1);
        }

        .w164-content {
            padding: 40px;
            flex: 1;
        }

        .w164-quote {
            font-size: 2rem;
            font-family: var(--font-heading);
            line-height: 1.4;
            margin-bottom: 30px;
        }

        /* =========================================
           W165: Highlight Products Grid (Featured)
           ========================================= */
        .w165-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
        }

        .w165-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1px;
            background: var(--border-color);
            border: 1px solid rgba(255,255,255,0.1);
            max-width: 1200px;
            margin: 0 auto;
        }

        .w165-item {
            background: transparent;
            padding: 40px 20px;
            text-align: center;
            transition: 0.3s;
            position: relative;
        }

        .w165-item:hover {
            transform: scale(1.02);
            z-index: 2;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .w165-img {
            height: 200px;
            object-fit: cover;
            margin-bottom: 20px;
        }

        .w165-item h4 {
            font-size: 1.2rem;
            margin: 0 0 10px;
        }

        /* =========================================
           W166: "A Day in the Life" Editorial Row
           ========================================= */
        .w166-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
        }

        .w166-row {
            display: flex;
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
            align-items: stretch;
        }

        .w166-col-text {
            flex: 1;
            padding: 40px;
            background: var(--text-dark);
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .w166-col-img {
            flex: 2;
            background: url('https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80') center/cover;
            min-height: 400px;
        }

        /* =========================================
           W167: Simple Elegance Newsletter Signup
           ========================================= */
        .w167-wrapper {
            padding: 80px 20px;
            background: transparent;
            text-align: center;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .w167-container {
            max-width: 600px;
            margin: 0 auto;
        }

        .w167-form {
            display: flex;
            border-bottom: 2px solid var(--text-dark);
            padding: 10px 0;
            margin-top: 40px;
        }

        .w167-input {
            flex: 1;
            border: none;
            font-size: 1.1rem;
            outline: none;
            font-family: var(--font-body);
        }

        .w167-btn {
            background: none;
            border: none;
            font-weight: bold;
            text-transform: uppercase;
            cursor: pointer;
            color: var(--wp--preset--color--primary);
        }

        /* =========================================
           W168: Trust Stats Numeric Banner
           ========================================= */
        .w168-wrapper {
            padding: 40px 20px;
            background: var(--wp--preset--color--primary);
            color: #fff;
        }

        .w168-grid {
            display: flex;
            justify-content: space-around;
            max-width: 1000px;
            margin: 0 auto;
            flex-wrap: wrap;
            gap: 30px;
            text-align: center;
        }

        .w168-val {
            font-size: 3.5rem;
            font-weight: bold;
            line-height: 1;
            margin-bottom: 10px;
        }

        .w168-lbl {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 500;
        }

        /* =========================================
           W169: Signature Garment Details Zoom
           ========================================= */
        .w169-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 60px;
            flex-wrap: wrap;
        }

        .w169-img {
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: url('https://images.unsplash.com/photo-1598808503746-f34c53b93222?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80') center/cover;
            box-shadow: 20px 20px 0 var(--border-color);
        }

        .w169-content {
            max-width: 500px;
        }

        .w169-tag {
            color: var(--wp--preset--color--primary);
            font-family: var(--font-heading);
            font-style: italic;
            font-size: 1.5rem;
            margin-bottom: 15px;
            display: block;
        }

        /* =========================================
           W170: Vertical Minimal Testimonial Slider
           ========================================= */
        .w170-wrapper {
            padding: var(--spacing-xl) 20px;
            background: var(--bg-dark);
            color: #fff;
            display: flex;
            justify-content: center;
        }

        .w170-container {
            max-width: 800px;
            text-align: center;
            position: relative;
        }

        .w170-quote-icon {
            font-size: 4rem;
            color: rgba(255, 255, 255, 0.1);
            margin-bottom: -20px;
            line-height: 1;
        }

        .w170-text {
            font-size: 2.2rem;
            font-family: var(--font-heading);
            font-style: italic;
            margin-bottom: 40px;
        }

        .w170-author {
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 0.9rem;
            color: var(--wp--preset--color--primary);
        }

        .w170-dots {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 40px;
        }

        .w170-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            cursor: pointer;
        }

        .w170-dot.active {
            background: transparent;
        }

        /* =========================================
           W171: Occasion Planner "What is it for?"
           ========================================= */
        .w171-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            text-align: center;
        }

        .w171-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            max-width: 1000px;
            margin: 40px auto 0;
        }

        .w171-card {
            position: relative;
            height: 400px;
            overflow: hidden;
            border-radius: 8px;
            cursor: pointer;
        }

        .w171-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: 0.5s;
            filter: brightness(0.7);
        }

        .w171-card:hover img {
            transform: scale(1.05);
            filter: brightness(0.5);
        }

        .w171-text {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #fff;
            padding: 20px;
        }

        .w171-card h3 {
            font-size: 2rem;
            border-bottom: 2px solid transparent;
            transition: 0.3s;
            padding-bottom: 5px;
        }

        .w171-card:hover h3 {
            border-color: var(--wp--preset--color--primary);
        }

        /* =========================================
           W172: Core Values 3-Column Typo
           ========================================= */
        .w172-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
        }

        .w172-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 50px;
            max-width: 1100px;
            margin: 0 auto;
            text-align: center;
        }

        .w172-num {
            color: var(--border-color);
            font-size: 5rem;
            font-family: var(--font-heading);
            margin-bottom: -30px;
            line-height: 1;
            font-style: italic;
        }

        .w172-item h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            position: relative;
            z-index: 1;
        }

        /* =========================================
           W173: "Complete The Look" Outfit Grid
           ========================================= */
        .w173-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
        }

        .w173-container {
            max-width: 900px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 2fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 15px;
            height: 600px;
        }

        .w173-main {
            grid-column: 1 / 2;
            grid-row: 1 / 3;
            background: url('https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80') center/cover;
            position: relative;
        }

        .w173-part {
            background: rgba(255,255,255,0.03);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
        }

        .w173-part img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 50%;
            margin-bottom: 15px;
        }

        /* =========================================
           W174: Interactive FAQ/Process Accordion
           ========================================= */
        .w174-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            max-width: 800px;
            margin: 0 auto;
        }

        .w174-item {
            border-bottom: 2px solid var(--text-dark);
        }

        .w174-header {
            padding: 20px 0;
            font-family: var(--font-heading);
            font-size: 1.8rem;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .w174-content {
            padding-bottom: 20px;
            color: var(--text-muted);
            display: none;
        }

        .w174-icon {
            font-size: 1.5rem;
            font-family: var(--font-body);
            transition: 0.3s;
        }

        .w174-header.open .w174-icon {
            transform: rotate(45deg);
        }

        /* =========================================
           W175: Minimalist Brand Philosophy Quote
           ========================================= */
        .w175-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
            display: flex;
            justify-content: center;
            text-align: center;
        }

        .w175-box {
            max-width: 700px;
        }

        .w175-line {
            width: 2px;
            height: 60px;
            background: var(--wp--preset--color--primary);
            margin: 0 auto 30px;
        }

        /* =========================================
           W176: Step-by-Step Vertical Visual List
           ========================================= */
        .w176-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
        }

        .w176-list {
            max-width: 800px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 60px;
        }

        .w176-item {
            display: flex;
            gap: 40px;
            align-items: center;
        }

        .w176-img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
        }

        .w176-num {
            font-size: 3rem;
            color: var(--wp--preset--color--primary);
            font-family: var(--font-heading);
            margin-right: 20px;
        }

        /* =========================================
           W177: Side-by-Side Fabric Details
           ========================================= */
        .w177-wrapper {
            padding: var(--spacing-xl) 20px;
            background: var(--text-dark);
            color: #fff;
        }

        .w177-grid {
            display: flex;
            max-width: 1000px;
            margin: 0 auto;
            gap: 0;
        }

        .w177-img {
            flex: 1;
            min-height: 400px;
            background: url('https://images.unsplash.com/photo-1617137968427-85924c800a22?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80') center/cover;
        }

        .w177-text {
            flex: 1;
            padding: 60px;
            background: rgba(255, 255, 255, 0.05);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* =========================================
           W178: Style Advisor Profile Card
           ========================================= */
        .w178-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            display: flex;
            justify-content: center;
        }

        .w178-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            max-width: 400px;
        }

        .w178-img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: url('https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80') center/cover;
            margin-bottom: 20px;
        }

        .w178-btn {
            margin-top: 20px;
            padding: 10px 20px;
            border: 1px solid rgba(255,255,255,0.1);
            background: rgba(255,255,255,0.03);
            cursor: pointer;
            border-radius: 30px;
        }

        /* =========================================
           W179: Product Focus "The Masterpiece"
           ========================================= */
        .w179-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
            text-align: center;
        }

        .w179-focus {
            display: inline-block;
            position: relative;
        }

        .w179-focus img {
            height: 600px;
        }

        .w179-focus::after {
            content: '';
            position: absolute;
            inset: -20px;
            border: 1px solid var(--wp--preset--color--primary);
            pointer-events: none;
        }

        /* =========================================
           W180: Urgency Appointment Banner Bottom
           ========================================= */
        .w180-wrapper {
            padding: 30px 20px;
            background: var(--text-dark);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
            text-align: center;
        }

        .w180-wrapper strong {
            color: var(--wp--preset--color--primary);
        }

        /* Responsive */
        @media (max-width: 992px) {
            .w161-wrapper {
                flex-direction: column;
                height: auto;
            }

            .w161-left,
            .w161-right {
                min-height: 400px;
            }

            .w163-item h2 {
                font-size: 3rem;
            }

            .w164-card {
                flex-direction: column;
            }

            .w164-img {
                width: 100%;
                height: 300px;
            }

            .w165-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .w166-row {
                flex-direction: column;
            }

            .w172-grid {
                grid-template-columns: 1fr;
                gap: 30px;
            }

            .w173-container {
                grid-template-columns: 1fr;
                grid-template-rows: auto;
                height: auto;
            }

            .w173-main {
                height: 400px;
            }

            .w177-grid {
                flex-direction: column;
            }
        }

        @media (max-width: 768px) {
            :root {
                --spacing-lg: 2rem;
                --spacing-xl: 3rem;
            }

            .preview-controls {
                flex-direction: column;
                gap: 10px;
                padding: 10px;
                text-align: center;
            }

            .widget-container {
                margin-top: 130px;
                padding: 10px;
            }

            h1 {
                font-size: 2.5rem !important;
            }

            h2 {
                font-size: 2rem !important;
            }

            .w163-item h2 {
                font-size: 2rem;
            }

            .w165-grid {
                grid-template-columns: 1fr;
            }

            .w171-grid {
                grid-template-columns: 1fr;
            }

            .w176-item {
                flex-direction: column;
                text-align: center;
            }

            .w179-focus img {
                height: 400px;
            }
        }
    
/* =========================================
           W181: The Founder's Letter (Handwritten)
           ========================================= */
        .w181-wrapper {
            padding: var(--spacing-xl) 20px;
            display: flex;
            justify-content: center;
            background: transparent;
        }

        .w181-letter {
            max-width: 700px;
            padding: 40px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.1);
            box-shadow: 10px 10px 0 rgba(255,255,255,0.1);
            font-family: var(--font-heading);
            font-size: 1.2rem;
            line-height: 1.8;
            color: #ffffff;
            position: relative;
        }

        .w181-signature {
            font-family: var(--font-hand);
            font-size: 3rem;
            color: var(--wp--preset--color--primary);
            margin-top: 30px;
            transform: rotate(-5deg);
            display: inline-block;
        }

        /* =========================================
           W182: Premium Delivery Unboxing
           ========================================= */
        .w182-wrapper {
            padding: var(--spacing-xl) 20px;
            background: var(--bg-dark);
            color: #fff;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 50px;
        }

        .w182-img {
            flex: 1;
            min-width: 300px;
            max-width: 500px;
            height: 400px;
            background: url('https://images.unsplash.com/photo-1594938298596-ef89aaeb6b94?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80') center/cover;
            position: relative;
        }

        .w182-img::after {
            content: '';
            position: absolute;
            inset: -10px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            pointer-events: none;
        }

        .w182-content {
            flex: 1;
            min-width: 300px;
            max-width: 500px;
        }

        .w182-list {
            list-style: none;
            padding: 0;
            margin-top: 20px;
            font-size: 1.1rem;
        }

        .w182-list li {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .w182-icon {
            color: var(--wp--preset--color--primary);
            font-size: 1.5rem;
        }

        /* =========================================
           W183: Tailor's Tape Metric Divider
           ========================================= */
        .w183-wrapper {
            height: 100px;
            background: #eccb66;
            background-image: repeating-linear-gradient(90deg, transparent, transparent 19px, #1a1a1a 19px, #1a1a1a 20px), repeating-linear-gradient(90deg, transparent, transparent 99px, #1a1a1a 99px, #1a1a1a 100px);
            background-position: bottom;
            background-size: 100px 30px, 100px 50px;
            background-repeat: repeat-x;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .w183-text {
            background: transparent;
            padding: 5px 30px;
            font-family: var(--font-heading);
            font-size: 1.5rem;
            border-radius: 40px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            border: 2px solid var(--text-dark);
        }

        /* =========================================
           W184: Fabric "Drape" Video/Gif Placeholder
           ========================================= */
        .w184-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            text-align: center;
        }

        .w184-container {
            display: flex;
            max-width: 1000px;
            margin: 40px auto 0;
            gap: 40px;
            text-align: left;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
        }

        .w184-media {
            width: 400px;
            height: 400px;
            background: url('https://images.unsplash.com/photo-1617137968427-85924c800a22?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80') center/cover;
            position: relative;
            border-radius: 5px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .w184-play {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.2);
            font-size: 3rem;
            color: #fff;
            cursor: pointer;
        }

        .w184-text {
            max-width: 400px;
        }

        /* =========================================
           W185: "Invest În Tine" Calculator Concept
           ========================================= */
        .w185-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
            display: flex;
            justify-content: center;
        }

        .w185-card {
            background: transparent;
            border: 1px solid rgba(255,255,255,0.1);
            padding: 50px;
            border-radius: 8px;
            max-width: 600px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        .w185-stats {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin: 40px 0;
            border-top: 1px solid rgba(255,255,255,0.1);
            border-bottom: 1px solid rgba(255,255,255,0.1);
            padding: 20px 0;
        }

        .w185-stat {
            font-family: var(--font-heading);
            font-size: 2rem;
            color: var(--wp--preset--color--primary);
        }

        /* =========================================
           W186: Minimal Contact Map Location
           ========================================= */
        .w186-wrapper {
            padding: var(--spacing-xl) 20px;
            display: flex;
            align-items: center;
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
            flex-wrap: wrap;
        }

        .w186-info {
            flex: 1;
            min-width: 300px;
            padding: 40px;
            background: var(--bg-dark);
            color: #fff;
        }

        .w186-info h3 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

        .w186-info p {
            color: #ccc;
            font-size: 1.1rem;
            margin-bottom: 10px;
        }

        .w186-map {
            flex: 2;
            min-width: 300px;
            height: 500px;
            background: url('https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80') center/cover;
            position: relative;
            filter: grayscale(50%);
        }

        /* =========================================
           W187: Style Guide Download Banner
           ========================================= */
        .w187-wrapper {
            padding: 40px;
            background: var(--text-dark);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1000px;
            margin: 0 auto;
            border-radius: 12px;
            transform: translateY(30px);
            position: relative;
            z-index: 5;
            flex-wrap: wrap;
            gap: 20px;
        }

        .w187-text h3 {
            margin: 0 0 5px;
            font-size: 1.8rem;
        }

        .w187-text p {
            margin: 0;
            color: #aaa;
        }

        /* =========================================
           W188: Mega Footer Type A (Dark, Clean)
           ========================================= */
        .w188-wrapper {
            padding: 80px 20px 40px;
            background: var(--bg-dark);
            color: #fff;
            margin-bottom: -60px;
            /* offset wrapper margin */
        }

        .w188-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1.5fr;
            gap: 40px;
        }

        .w188-col h4 {
            font-family: var(--font-body);
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 0.9rem;
            margin-bottom: 20px;
            color: var(--wp--preset--color--primary);
        }

        .w188-col ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .w188-col li {
            margin-bottom: 12px;
            font-size: 0.9rem;
            color: #aaa;
            cursor: pointer;
            transition: 0.3s;
        }

        .w188-col li:hover {
            color: #fff;
            padding-left: 5px;
        }

        .w188-bottom {
            max-width: 1200px;
            margin: 60px auto 0;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.8rem;
            color: #aaaaaa;
            flex-wrap: wrap;
            gap: 15px;
        }

        /* =========================================
           W189: Mega Footer Type B (Light, Airy)
           ========================================= */
        .w189-wrapper {
            padding: 80px 20px 40px;
            background: transparent;
            border-top: 1px solid rgba(255,255,255,0.1);
            margin-bottom: -60px;
        }

        .w189-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 40px;
            text-align: center;
        }

        .w189-brand {
            grid-column: 1 / -1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 40px;
            padding-bottom: 40px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .w189-brand h2 {
            font-size: 3rem;
            margin: 0;
            line-height: 1;
        }

        .w189-brand p {
            font-size: 1.1rem;
            font-style: italic;
            color: var(--text-muted);
        }

        .w189-col h4 {
            font-size: 1.2rem;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }

        .w189-col h4::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 2px;
            background: var(--wp--preset--color--primary);
        }

        /* =========================================
           W190: Subtle Pattern Background Decorator
           ========================================= */
        .w190-wrapper {
            padding: var(--spacing-xl) 20px;
            background-color: #ffffff;
            background-image: radial-gradient(#333 1px, transparent 1px);
            background-size: 20px 20px;
            color: #fff;
            text-align: center;
        }

        .w190-card {
            background: #1a1a1a;
            border: 1px solid #333;
            padding: 40px;
            max-width: 600px;
            margin: 0 auto;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        }

        .w190-card h2 {
            color: var(--wp--preset--color--primary);
        }

        /* =========================================
           W191: Interactive Color Dot Swatches
           ========================================= */
        .w191-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            text-align: center;
        }

        .w191-dots {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
            flex-wrap: wrap;
        }

        .w191-dot {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 2px solid #fff;
            box-shadow: 0 0 0 1px var(--border-color);
            cursor: pointer;
            transition: 0.3s;
            position: relative;
        }

        .w191-dot:hover,
        .w191-dot.active {
            box-shadow: 0 0 0 2px var(--wp--preset--color--primary);
            transform: scale(1.1);
        }

        .w191-tooltip {
            position: absolute;
            bottom: 120%;
            left: 50%;
            transform: translateX(-50%);
            background: var(--text-dark);
            color: #fff;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 0.8rem;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: 0.3s;
        }

        .w191-dot:hover .w191-tooltip {
            opacity: 1;
            bottom: 130%;
        }

        /* =========================================
           W192: The "Guarantee Seal" Floating Badges
           ========================================= */
        .w192-wrapper {
            padding: 40px 20px;
            background: rgba(255,255,255,0.03);
            display: flex;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
            text-align: center;
        }

        .w192-badge {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 250px;
        }

        .w192-icon-wrap {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: var(--wp--preset--color--primary);
            margin-bottom: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        /* =========================================
           W193: Asymmetric Image Collage
           ========================================= */
        .w193-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 700px;
            overflow: hidden;
        }

        .w193-collage {
            position: relative;
            width: 100%;
            max-width: 800px;
            height: 600px;
        }

        .w193-img1 {
            position: absolute;
            top: 0;
            left: 0;
            width: 60%;
            height: 70%;
            background: url('https://images.unsplash.com/photo-1594938298596-ef89aaeb6b94?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80') center/cover;
            z-index: 1;
        }

        .w193-img2 {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 50%;
            height: 60%;
            background: url('https://images.unsplash.com/photo-1593032465175-481ac7f401a0?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80') center/cover;
            z-index: 2;
            border: 15px solid #fff;
            box-shadow: -20px 20px 40px rgba(0, 0, 0, 0.1);
        }

        .w193-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 3;
            background: rgba(255, 255, 255, 0.95);
            padding: 40px;
            text-align: center;
            border-radius: 4px;
            width: 80%;
            max-width: 400px;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255,255,255,0.1);
        }

        /* =========================================
           W194: Text Stroke / Outline Typography
           ========================================= */
        .w194-wrapper {
            padding: var(--spacing-xl) 20px;
            background: rgba(255,255,255,0.03);
            text-align: center;
        }

        .w194-outline {
            font-family: var(--font-heading);
            font-size: 8rem;
            color: transparent;
            -webkit-text-stroke: 2px var(--wp--preset--color--primary);
            opacity: 0.3;
            margin: 0;
            line-height: 1;
            text-transform: uppercase;
            white-space: nowrap;
            overflow: hidden;
        }

        .w194-solid {
            font-size: 3rem;
            font-family: var(--font-heading);
            color: #ffffff;
            margin-top: -60px;
            position: relative;
            z-index: 2;
        }

        /* =========================================
           W195: Floating "Book Now" FAB (Fixed Action Button) concept
           ========================================= */
        .w195-wrapper {
            padding: 50px 20px;
            text-align: center;
            background: transparent;
        }

        .w195-fab-demo {
            display: inline-flex;
            align-items: center;
            gap: 15px;
            background: var(--text-dark);
            color: #fff;
            padding: 15px 30px;
            border-radius: 50px;
            cursor: pointer;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            transition: 0.3s;
            font-weight: bold;
        }

        .w195-fab-demo:hover {
            transform: translateY(-5px);
            background: var(--wp--preset--color--primary);
        }

        .w195-fab-demo span {
            font-size: 1.5rem;
            line-height: 1;
            margin-top: -2px;
        }

        /* =========================================
           W196: Subtle Divider Lines
           ========================================= */
        .w196-wrapper {
            padding: 40px 20px;
            background: transparent;
            text-align: center;
        }

        .w196-dividers {
            display: flex;
            flex-direction: column;
            gap: 40px;
            max-width: 600px;
            margin: 0 auto;
        }

        .w196-div1 {
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--border-color), transparent);
        }

        .w196-div2 {
            position: relative;
            text-align: center;
        }

        .w196-div2::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background: var(--border-color);
            z-index: 1;
        }

        .w196-div2 span {
            position: relative;
            z-index: 2;
            background: transparent;
            padding: 0 20px;
            color: var(--wp--preset--color--primary);
            font-size: 1.5rem;
        }

        /* =========================================
           W197: "Crafted In" Badge
           ========================================= */
        .w197-wrapper {
            padding: var(--spacing-xl) 20px;
            background: var(--bg-dark);
            color: #fff;
            display: flex;
            justify-content: center;
        }

        .w197-badge {
            width: 250px;
            height: 250px;
            border-radius: 50%;
            border: 1px dashed rgba(255, 255, 255, 0.3);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            text-align: center;
            padding: 20px;
        }

        .w197-badge::after {
            content: '';
            position: absolute;
            inset: 10px;
            border: 1px solid var(--wp--preset--color--primary);
            border-radius: 50%;
        }

        /* =========================================
           W198: Dark Mode Quote Block
           ========================================= */
        .w198-wrapper {
            padding: var(--spacing-xl) 20px;
            background: var(--bg-dark);
            color: #fff;
            display: flex;
            justify-content: center;
        }

        .w198-quote {
            max-width: 800px;
            font-size: 2.2rem;
            font-family: var(--font-heading);
            line-height: 1.4;
            text-align: center;
            position: relative;
        }

        .w198-quote::before {
            content: '“';
            font-size: 10rem;
            color: rgba(255, 255, 255, 0.05);
            position: absolute;
            top: -50px;
            left: -50px;
            line-height: 1;
            font-family: serif;
        }

        /* =========================================
           W199: The "No Compromise" Paragraph
           ========================================= */
        .w199-wrapper {
            padding: var(--spacing-xl) 20px;
            background: transparent;
            text-align: center;
        }

        .w199-p {
            max-width: 700px;
            margin: 0 auto;
            font-size: 1.3rem;
            color: #ffffff;
            line-height: 1.8;
        }

        .w199-p strong {
            color: var(--wp--preset--color--primary);
            background: rgba(195, 154, 95, 0.1);
            padding: 0 5px;
        }

        /* =========================================
           W200: Grand Finale CTA
           ========================================= */
        .w200-wrapper {
            padding: 100px 20px;
            background: url('https://images.unsplash.com/photo-1594938291221-94f18cbb5660?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80') center/cover;
            position: relative;
            display: flex;
            justify-content: center;
            text-align: center;
        }

        .w200-wrapper::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
        }

        .w200-content {
            position: relative;
            z-index: 2;
            color: #fff;
            max-width: 800px;
            margin-top: 100px;
        }

        .w200-content h1 {
            font-size: 4rem;
            margin-bottom: 20px;
        }

        /* Responsive */
        @media (max-width: 992px) {
            .w188-container {
                grid-template-columns: 1fr 1fr;
            }

            .w189-container {
                grid-template-columns: 1fr 1fr;
            }

            .w186-wrapper {
                flex-direction: column;
            }

            .w186-map {
                width: 100%;
                height: 300px;
            }

            .w193-collage {
                height: 500px;
            }

            .w193-img1 {
                width: 80%;
                height: 60%;
            }

            .w193-img2 {
                width: 70%;
                height: 50%;
            }
        }

        @media (max-width: 768px) {
            :root {
                --spacing-lg: 2rem;
                --spacing-xl: 3rem;
            }

            .preview-controls {
                flex-direction: column;
                gap: 10px;
                padding: 10px;
                text-align: center;
            }

            .widget-container {
                margin-top: 130px;
                padding: 10px;
            }

            h1 {
                font-size: 2.5rem !important;
            }

            h2 {
                font-size: 2rem !important;
            }

            .w188-container {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .w189-container {
                grid-template-columns: 1fr;
            }

            .w184-container {
                flex-direction: column;
                text-align: center;
            }

            .w184-media {
                width: 100%;
                height: 300px;
            }

            .w185-stats {
                flex-direction: column;
                gap: 20px;
            }

            .w187-wrapper {
                flex-direction: column;
                text-align: center;
                padding: 30px 20px;
                transform: none;
                margin-bottom: 30px;
            }

            .w193-collage {
                height: 400px;
            }

            .w194-outline {
                font-size: 4rem;
            }

            .w194-solid {
                font-size: 2rem;
                margin-top: -30px;
            }

            .w200-content h1 {
                font-size: 2.8rem;
            }

            .w182-wrapper {
                flex-direction: column;
            }
        }