{"id":3934,"date":"2026-09-14T22:49:45","date_gmt":"2026-09-14T22:49:45","guid":{"rendered":"https:\/\/wonderlookstore.com\/?page_id=3934"},"modified":"2026-09-14T22:52:23","modified_gmt":"2026-09-14T22:52:23","slug":"joop","status":"publish","type":"page","link":"https:\/\/wonderlookstore.com\/?page_id=3934","title":{"rendered":"Joop"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3934\" class=\"elementor elementor-3934\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0d93768 e-con-full e-flex e-con e-parent\" data-id=\"0d93768\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2f97915 elementor-widget elementor-widget-html\" data-id=\"2f97915\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<?php\r\n\/**\r\n * Template Name: Joop Brand Page\r\n * Description: Custom brand page for Joop with WooCommerce products\r\n *\/\r\n\r\nif ( ! defined( 'ABSPATH' ) ) exit;\r\n\r\nget_header();\r\n\r\n?>\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,400;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\" \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\" \/>\r\n\r\n<style>\r\n  \/* ============ TOKENS ============ *\/\r\n  .wonderlook-wrapper {\r\n    --bg-body: #F5EFE3;\r\n    --bg-card: #FFFFFF;\r\n    --bg-surface: #EBE3D3;\r\n    --bg-dark: #0E3A3D;\r\n    --bg-dark-deep: #082224;\r\n    --color-gold: #C9A961;\r\n    --color-gold-hover: #B8974B;\r\n    --color-gold-light: rgba(201, 169, 97, 0.14);\r\n    --color-dark: #0A2628;\r\n    --color-text: #3A4A4B;\r\n    --color-muted: #7A8989;\r\n    --color-border: #E0D8C8;\r\n    --color-whatsapp: #25D366;\r\n    --font-heading: 'Playfair Display', Georgia, serif;\r\n    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;\r\n    --radius-md: 14px;\r\n    --radius-pill: 999px;\r\n    --shadow-subtle: 0 4px 20px rgba(14, 58, 61, 0.05);\r\n    --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);\r\n    --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);\r\n    --container-width: 1280px;\r\n\r\n    font-family: var(--font-body);\r\n    background-color: var(--bg-body);\r\n    color: var(--color-text);\r\n    line-height: 1.6;\r\n    overflow-x: hidden;\r\n    width: 100%;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n  .wonderlook-wrapper *, .wonderlook-wrapper *::before, .wonderlook-wrapper *::after {\r\n    margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased;\r\n  }\r\n  .wonderlook-wrapper a { text-decoration: none; color: inherit; transition: color var(--transition-fast); }\r\n  .wonderlook-wrapper button { font-family: inherit; border: none; cursor: pointer; background: none; transition: all var(--transition-fast); }\r\n  .wonderlook-wrapper img { max-width: 100%; height: auto; display: block; }\r\n  .wonderlook-wrapper .container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 24px; }\r\n\r\n  \/* ============ HERO \u2014 HORIZONTAL PAN ANIMATION ============ *\/\r\n  .brand-hero {\r\n    position: relative;\r\n    padding: 90px 0 80px;\r\n    background-color: #0E3A3D;\r\n    color: #FFFFFF;\r\n    text-align: center;\r\n    overflow: hidden;\r\n    min-height: 80vh;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n\r\n  \/* Background image layer \u2014 pans horizontally at a slow, elegant pace *\/\r\n  .brand-hero::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    width: 130%;\r\n    background-image: url('https:\/\/designeyeweargroup.com\/media\/wysiwyg\/joop_brandsite_1_1.webp');\r\n    background-size: cover;\r\n    background-position: center center;\r\n    background-repeat: no-repeat;\r\n    animation: heroPan 50s ease-in-out infinite alternate;\r\n    will-change: transform;\r\n    z-index: 0;\r\n  }\r\n\r\n  \/* Overlay layer \u2014 deep teal gradient + gold glows *\/\r\n  .brand-hero::after {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background:\r\n      linear-gradient(135deg, rgba(8, 34, 36, 0.72) 0%, rgba(14, 58, 61, 0.50) 50%, rgba(8, 34, 36, 0.78) 100%),\r\n      radial-gradient(circle at 20% 20%, rgba(201, 169, 97, 0.15) 0%, transparent 55%),\r\n      radial-gradient(circle at 80% 80%, rgba(201, 169, 97, 0.10) 0%, transparent 55%);\r\n    pointer-events: none;\r\n    z-index: 1;\r\n  }\r\n\r\n  \/* Horizontal pan animation \u2014 right to left, then back *\/\r\n  @keyframes heroPan {\r\n    0%   { transform: translateX(0%); }\r\n    100% { transform: translateX(-23%); }\r\n  }\r\n\r\n  .brand-hero .container { position: relative; z-index: 3; max-width: 880px; width: 100%; }\r\n\r\n  .brand-hero-eyebrow {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    font-size: 0.65rem;\r\n    font-weight: 700;\r\n    letter-spacing: 2.5px;\r\n    text-transform: uppercase;\r\n    color: var(--color-gold);\r\n    margin-bottom: 12px;\r\n    background: rgba(201, 169, 97, 0.18);\r\n    padding: 5px 18px;\r\n    border-radius: var(--radius-pill);\r\n    border: 1px solid rgba(201, 169, 97, 0.35);\r\n    backdrop-filter: blur(8px);\r\n    -webkit-backdrop-filter: blur(8px);\r\n    white-space: nowrap;\r\n  }\r\n  .brand-hero h1 {\r\n    font-family: var(--font-heading) !important;\r\n    font-size: clamp(2.2rem, 5.5vw, 3.8rem) !important;\r\n    font-weight: 600 !important;\r\n    color: #FFFFFF !important;\r\n    line-height: 1.05 !important;\r\n    letter-spacing: -1px !important;\r\n    margin-bottom: 10px !important;\r\n    text-shadow: 0 4px 20px rgba(0,0,0,0.65);\r\n  }\r\n  .brand-hero-tagline {\r\n    font-family: var(--font-heading);\r\n    font-style: italic;\r\n    font-size: clamp(0.95rem, 1.6vw, 1.15rem);\r\n    color: #F0E9DA;\r\n    margin-bottom: 18px;\r\n    letter-spacing: 0.5px;\r\n    text-shadow: 0 2px 12px rgba(0,0,0,0.75);\r\n  }\r\n  .gold-divider { width: 60px; height: 2px; background: var(--color-gold); margin: 14px auto 20px; border-radius: var(--radius-pill); }\r\n  .brand-hero p.intro-text {\r\n    font-size: clamp(0.88rem, 1.3vw, 1.02rem);\r\n    color: #F0E9DA;\r\n    line-height: 1.7;\r\n    max-width: 620px;\r\n    margin: 0 auto 32px;\r\n    font-weight: 400;\r\n    text-shadow: 0 2px 12px rgba(0,0,0,0.75);\r\n  }\r\n  .brand-hero-badges {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    flex-wrap: nowrap;\r\n    gap: 10px;\r\n    max-width: 100%;\r\n    margin: 0 auto;\r\n    padding: 0 8px;\r\n  }\r\n  .brand-hero-badges .chip {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 7px;\r\n    padding: 9px 18px;\r\n    background: rgba(255, 255, 255, 0.10);\r\n    border: 1px solid rgba(255, 255, 255, 0.25);\r\n    backdrop-filter: blur(10px);\r\n    -webkit-backdrop-filter: blur(10px);\r\n    border-radius: var(--radius-pill);\r\n    font-size: 0.76rem;\r\n    color: #FFFFFF;\r\n    font-weight: 500;\r\n    transition: all var(--transition-fast);\r\n    white-space: nowrap;\r\n    flex-shrink: 0;\r\n    min-height: 40px;\r\n  }\r\n  .brand-hero-badges .chip:hover {\r\n    background: rgba(201, 169, 97, 0.28);\r\n    border-color: rgba(201, 169, 97, 0.55);\r\n    transform: translateY(-2px);\r\n  }\r\n  .brand-hero-badges .chip i { color: var(--color-gold); font-size: 0.82rem; flex-shrink: 0; }\r\n\r\n  \/* ============ BREADCRUMB ============ *\/\r\n  .brand-breadcrumb {\r\n    background: var(--bg-card);\r\n    border-bottom: 1px solid var(--color-border);\r\n    padding: 14px 0;\r\n    font-size: 0.82rem;\r\n    color: var(--color-muted);\r\n  }\r\n  .brand-breadcrumb .container { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }\r\n  .brand-breadcrumb a { color: var(--color-muted); }\r\n  .brand-breadcrumb a:hover { color: var(--color-gold); }\r\n  .brand-breadcrumb i { font-size: 0.65rem; color: var(--color-border); }\r\n  .brand-breadcrumb .current { color: var(--color-dark); font-weight: 600; }\r\n\r\n  \/* ============ PRODUCTS ============ *\/\r\n  .brand-products-section { padding: 60px 0 80px; background: var(--bg-body); }\r\n  .brand-products-header { text-align: center; max-width: 680px; margin: 0 auto 40px; padding: 0 8px; }\r\n  .brand-products-header .section-tag {\r\n    display: inline-flex; align-items: center; gap: 6px;\r\n    font-size: 0.7rem; font-weight: 700; letter-spacing: 2.5px;\r\n    text-transform: uppercase; color: var(--color-gold); margin-bottom: 10px;\r\n  }\r\n  .brand-products-header h2 {\r\n    font-family: var(--font-heading) !important;\r\n    font-size: clamp(1.6rem, 3vw, 2.4rem) !important;\r\n    font-weight: 600 !important;\r\n    color: var(--color-dark) !important;\r\n    line-height: 1.15 !important;\r\n    margin-bottom: 10px !important;\r\n  }\r\n  .brand-products-header h2 em { font-style: italic !important; color: var(--color-gold) !important; }\r\n  .brand-products-header p {\r\n    font-size: clamp(0.86rem, 1.2vw, 0.96rem);\r\n    color: var(--color-muted);\r\n    line-height: 1.6;\r\n  }\r\n  .woow-products-wrapper { width: 100%; min-height: 200px; position: relative; }\r\n\r\n  \/* ============ WOOCOMMERCE GRID ============ *\/\r\n  .wonderlook-wrapper .woocommerce ul.products,\r\n  .woow-products-wrapper ul.products {\r\n    display: grid !important;\r\n    grid-template-columns: repeat(4, 1fr) !important;\r\n    gap: 22px !important;\r\n    margin: 0 !important; padding: 0 !important;\r\n    list-style: none !important;\r\n  }\r\n  .wonderlook-wrapper .woocommerce ul.products::before,\r\n  .wonderlook-wrapper .woocommerce ul.products::after,\r\n  .woow-products-wrapper ul.products::before,\r\n  .woow-products-wrapper ul.products::after { display: none !important; }\r\n  .wonderlook-wrapper .woocommerce ul.products li.product,\r\n  .woow-products-wrapper ul.products li.product {\r\n    margin: 0 !important; width: 100% !important; max-width: 100% !important; float: none !important;\r\n    background: var(--bg-card) !important;\r\n    border: 1px solid var(--color-border) !important;\r\n    border-radius: var(--radius-md) !important;\r\n    overflow: hidden !important;\r\n    transition: all var(--transition-smooth) !important;\r\n    box-shadow: var(--shadow-subtle) !important;\r\n    padding: 0 !important; position: relative !important; text-align: left !important;\r\n    display: flex !important; flex-direction: column !important;\r\n  }\r\n  .wonderlook-wrapper .woocommerce ul.products li.product:hover,\r\n  .woow-products-wrapper ul.products li.product:hover {\r\n    transform: translateY(-6px) !important;\r\n    box-shadow: 0 16px 36px rgba(201, 169, 97, 0.22) !important;\r\n    border-color: var(--color-gold) !important;\r\n  }\r\n  .wonderlook-wrapper .woocommerce ul.products li.product a img,\r\n  .woow-products-wrapper ul.products li.product a img {\r\n    width: 100% !important; height: auto !important;\r\n    aspect-ratio: 4 \/ 3 !important;\r\n    object-fit: cover !important; margin: 0 !important;\r\n    transition: transform var(--transition-smooth) !important; display: block !important;\r\n  }\r\n  .wonderlook-wrapper .woocommerce ul.products li.product:hover a img,\r\n  .woow-products-wrapper ul.products li.product:hover a img { transform: scale(1.06) !important; }\r\n  .wonderlook-wrapper .woocommerce ul.products li.product .onsale,\r\n  .woow-products-wrapper ul.products li.product .onsale {\r\n    position: absolute !important; top: 12px !important; left: 12px !important;\r\n    background: #BA3D32 !important; color: #FFFFFF !important;\r\n    font-size: 0.65rem !important; font-weight: 700 !important;\r\n    padding: 4px 12px !important; border-radius: var(--radius-pill) !important;\r\n    text-transform: uppercase !important; z-index: 2 !important;\r\n  }\r\n  .wonderlook-wrapper .woocommerce ul.products li.product .woocommerce-loop-product__title,\r\n  .wonderlook-wrapper .woocommerce ul.products li.product h2,\r\n  .woow-products-wrapper ul.products li.product .woocommerce-loop-product__title,\r\n  .woow-products-wrapper ul.products li.product h2 {\r\n    font-family: var(--font-heading) !important;\r\n    font-size: 1.1rem !important; font-weight: 600 !important;\r\n    color: var(--color-dark) !important; line-height: 1.3 !important;\r\n    padding: 18px 20px 4px !important; margin: 0 !important;\r\n  }\r\n  .wonderlook-wrapper .woocommerce ul.products li.product .product-categories,\r\n  .woow-products-wrapper ul.products li.product .product-categories {\r\n    font-size: 0.7rem !important; font-weight: 700 !important;\r\n    letter-spacing: 1.5px !important; text-transform: uppercase !important;\r\n    color: var(--color-gold) !important; padding: 0 20px !important; display: block !important;\r\n  }\r\n  .wonderlook-wrapper .woocommerce ul.products li.product .product-categories a,\r\n  .woow-products-wrapper ul.products li.product .product-categories a { color: var(--color-gold) !important; }\r\n  .wonderlook-wrapper .woocommerce ul.products li.product .price,\r\n  .woow-products-wrapper ul.products li.product .price {\r\n    font-size: 1.15rem !important; font-weight: 700 !important;\r\n    color: var(--color-dark) !important;\r\n    padding: 8px 20px 16px !important;\r\n    display: block !important; margin-top: auto !important;\r\n  }\r\n  .wonderlook-wrapper .woocommerce ul.products li.product .price del,\r\n  .woow-products-wrapper ul.products li.product .price del {\r\n    font-size: 0.78rem !important; color: var(--color-muted) !important;\r\n    text-decoration: line-through !important; margin-right: 6px !important; opacity: 0.7 !important;\r\n  }\r\n  .wonderlook-wrapper .woocommerce ul.products li.product .price ins,\r\n  .woow-products-wrapper ul.products li.product .price ins {\r\n    text-decoration: none !important; color: var(--color-dark) !important;\r\n  }\r\n  .wonderlook-wrapper .woocommerce ul.products li.product .button,\r\n  .woow-products-wrapper ul.products li.product .button {\r\n    display: inline-flex !important;\r\n    align-items: center !important; justify-content: center !important;\r\n    gap: 6px !important;\r\n    background: var(--color-dark) !important; color: #FFFFFF !important;\r\n    padding: 10px 18px !important; border-radius: var(--radius-pill) !important;\r\n    font-size: 0.78rem !important; font-weight: 600 !important;\r\n    margin: 0 20px 20px !important;\r\n    transition: all var(--transition-smooth) !important;\r\n    border: none !important;\r\n    width: calc(100% - 40px) !important;\r\n  }\r\n  .wonderlook-wrapper .woocommerce ul.products li.product .button:hover,\r\n  .woow-products-wrapper ul.products li.product .button:hover {\r\n    background: var(--color-gold) !important; color: #0A2628 !important;\r\n    transform: translateY(-2px) !important;\r\n  }\r\n\r\n  .wonderlook-wrapper .woocommerce nav.woocommerce-pagination,\r\n  .woow-products-wrapper nav.woocommerce-pagination {\r\n    margin-top: 50px !important; text-align: center !important;\r\n  }\r\n  .wonderlook-wrapper .woocommerce nav.woocommerce-pagination ul,\r\n  .woow-products-wrapper nav.woocommerce-pagination ul {\r\n    display: inline-flex !important; gap: 8px !important;\r\n    border: none !important; padding: 0 !important; margin: 0 !important;\r\n    justify-content: center !important; flex-wrap: wrap !important;\r\n  }\r\n  .wonderlook-wrapper .woocommerce nav.woocommerce-pagination ul li,\r\n  .woow-products-wrapper nav.woocommerce-pagination ul li { border: none !important; margin: 0 !important; }\r\n  .wonderlook-wrapper .woocommerce nav.woocommerce-pagination ul li a,\r\n  .wonderlook-wrapper .woocommerce nav.woocommerce-pagination ul li span,\r\n  .woow-products-wrapper nav.woocommerce-pagination ul li a,\r\n  .woow-products-wrapper nav.woocommerce-pagination ul li span {\r\n    display: inline-flex !important;\r\n    align-items: center !important; justify-content: center !important;\r\n    min-width: 40px !important; height: 40px !important;\r\n    padding: 0 14px !important;\r\n    border-radius: var(--radius-pill) !important;\r\n    background: var(--bg-card) !important;\r\n    color: var(--color-dark) !important; font-weight: 600 !important;\r\n    border: 1px solid var(--color-border) !important;\r\n  }\r\n  .wonderlook-wrapper .woocommerce nav.woocommerce-pagination ul li a:hover,\r\n  .wonderlook-wrapper .woocommerce nav.woocommerce-pagination ul li span.current,\r\n  .woow-products-wrapper nav.woocommerce-pagination ul li a:hover,\r\n  .woow-products-wrapper nav.woocommerce-pagination ul li span.current {\r\n    background: var(--color-gold) !important; color: #0A2628 !important;\r\n    border-color: var(--color-gold) !important;\r\n  }\r\n\r\n  \/* ============ REASSURANCE ============ *\/\r\n  .brand-reassurance {\r\n    padding: 40px 0; background: var(--bg-card);\r\n    border-top: 1px solid var(--color-border);\r\n    border-bottom: 1px solid var(--color-border);\r\n  }\r\n  .brand-reassurance-grid {\r\n    display: grid; grid-template-columns: repeat(4, 1fr);\r\n    gap: 24px; text-align: center;\r\n  }\r\n  .brand-reassurance-item {\r\n    display: flex; flex-direction: column; align-items: center; gap: 10px;\r\n  }\r\n  .brand-reassurance-item .icon {\r\n    width: 52px; height: 52px; border-radius: 50%;\r\n    background: var(--color-gold-light); color: var(--color-gold);\r\n    display: flex; align-items: center; justify-content: center;\r\n    font-size: 1.2rem;\r\n    border: 1px solid rgba(201, 169, 97, 0.28);\r\n    transition: all var(--transition-fast);\r\n  }\r\n  .brand-reassurance-item:hover .icon {\r\n    background: var(--color-gold); color: #FFFFFF;\r\n    transform: scale(1.08);\r\n    box-shadow: 0 6px 16px rgba(201, 169, 97, 0.35);\r\n  }\r\n  .brand-reassurance-item h4 {\r\n    font-family: var(--font-heading);\r\n    font-size: 0.95rem; font-weight: 600; color: var(--color-dark); margin: 0;\r\n  }\r\n  .brand-reassurance-item p {\r\n    font-size: 0.78rem; color: var(--color-muted); line-height: 1.4; margin: 0;\r\n  }\r\n\r\n  \/* ============ CTA ============ *\/\r\n  .brand-cta {\r\n    padding: 55px 0;\r\n    background: linear-gradient(135deg, #0E3A3D 0%, #082224 100%);\r\n    color: #FFFFFF;\r\n    text-align: center; position: relative; overflow: hidden;\r\n    border-top: 1px solid rgba(201, 169, 97, 0.2);\r\n  }\r\n  .brand-cta::after {\r\n    content: ''; position: absolute;\r\n    right: -10%; bottom: -40%;\r\n    width: 400px; height: 400px;\r\n    background: radial-gradient(circle, rgba(201, 169, 97, 0.22) 0%, transparent 70%);\r\n    pointer-events: none;\r\n  }\r\n  .brand-cta .container { position: relative; z-index: 2; max-width: 640px; padding: 0 20px; }\r\n  .brand-cta h3 {\r\n    font-family: var(--font-heading) !important;\r\n    font-size: clamp(1.4rem, 2.8vw, 2.2rem) !important;\r\n    font-weight: 600 !important;\r\n    color: #FFFFFF !important; line-height: 1.2 !important;\r\n    margin-bottom: 12px !important;\r\n  }\r\n  .brand-cta h3 em { font-style: italic !important; color: var(--color-gold) !important; }\r\n  .brand-cta p {\r\n    color: #E2DDD5 !important;\r\n    font-size: clamp(0.85rem, 1.2vw, 0.95rem);\r\n    margin-bottom: 22px;\r\n  }\r\n  .brand-cta .cta-btns {\r\n    display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;\r\n  }\r\n  .brand-cta .cta-btns a {\r\n    display: inline-flex; align-items: center; gap: 8px;\r\n    padding: 12px 28px; border-radius: var(--radius-pill);\r\n    font-weight: 600; font-size: 0.85rem;\r\n    transition: all var(--transition-smooth);\r\n  }\r\n  .brand-cta .cta-btns .btn-gold {\r\n    background: var(--color-gold); color: #0A2628 !important;\r\n    box-shadow: 0 8px 20px rgba(201, 169, 97, 0.4);\r\n  }\r\n  .brand-cta .cta-btns .btn-gold:hover {\r\n    background: #D9BC7E; transform: translateY(-2px);\r\n    box-shadow: 0 12px 26px rgba(201, 169, 97, 0.5);\r\n  }\r\n  .brand-cta .cta-btns .btn-glass {\r\n    background: rgba(255, 255, 255, 0.10);\r\n    color: #FFFFFF !important;\r\n    border: 1px solid rgba(255, 255, 255, 0.30);\r\n    backdrop-filter: blur(8px);\r\n  }\r\n  .brand-cta .cta-btns .btn-glass:hover {\r\n    background: #FFFFFF; color: var(--color-dark) !important;\r\n    border-color: #FFFFFF;\r\n  }\r\n\r\n  \/* ============ RESPONSIVE ============ *\/\r\n  @media (max-width: 1024px) {\r\n    .container { padding: 0 20px; }\r\n    .wonderlook-wrapper .woocommerce ul.products,\r\n    .woow-products-wrapper ul.products {\r\n      grid-template-columns: repeat(2, 1fr) !important;\r\n      gap: 18px !important;\r\n    }\r\n    .brand-hero-badges { flex-wrap: wrap; gap: 10px; }\r\n    .brand-hero { padding: 70px 0 60px; min-height: 70vh; }\r\n    .brand-reassurance-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .container { padding: 0 16px; }\r\n\r\n    .brand-hero {\r\n      min-height: auto !important;\r\n      padding: 70px 0 50px !important;\r\n    }\r\n\r\n    .brand-hero-eyebrow {\r\n      font-size: 0.54rem !important;\r\n      padding: 5px 13px !important;\r\n      letter-spacing: 1.9px !important;\r\n      margin-bottom: 16px !important;\r\n      gap: 5px !important;\r\n    }\r\n    .brand-hero-eyebrow i { font-size: 0.58rem !important; }\r\n    .brand-hero h1 {\r\n      font-size: 1.95rem !important;\r\n      letter-spacing: -0.5px !important;\r\n      margin-bottom: 6px !important;\r\n      line-height: 1 !important;\r\n    }\r\n    .brand-hero-tagline {\r\n      font-size: 0.86rem !important;\r\n      margin-bottom: 14px !important;\r\n      letter-spacing: 0.3px !important;\r\n      line-height: 1.4 !important;\r\n    }\r\n    .gold-divider { width: 40px !important; height: 2px !important; margin: 10px auto 18px !important; }\r\n    .brand-hero p.intro-text {\r\n      font-size: 0.84rem !important;\r\n      line-height: 1.6 !important;\r\n      margin-bottom: 24px !important;\r\n      padding: 0 4px !important;\r\n      max-width: 100% !important;\r\n    }\r\n    .brand-hero-badges {\r\n      display: grid !important;\r\n      grid-template-columns: 1fr 1fr !important;\r\n      gap: 8px !important;\r\n      max-width: 380px !important;\r\n      margin: 0 auto !important;\r\n    }\r\n    .brand-hero-badges .chip {\r\n      padding: 9px 11px !important;\r\n      font-size: 0.68rem !important;\r\n      gap: 5px !important;\r\n      min-height: 40px !important;\r\n      white-space: nowrap !important;\r\n      justify-content: center !important;\r\n      width: 100% !important;\r\n    }\r\n    .brand-hero-badges .chip i { font-size: 0.7rem !important; }\r\n\r\n    .brand-breadcrumb { font-size: 0.7rem; padding: 9px 0; }\r\n    .brand-breadcrumb .container { gap: 5px; }\r\n\r\n    .brand-products-section { padding: 34px 0 44px; }\r\n    .brand-products-header { margin-bottom: 22px; padding: 0 4px; }\r\n    .brand-products-header .section-tag { font-size: 0.66rem; margin-bottom: 8px; }\r\n    .brand-products-header h2 { font-size: 1.42rem !important; margin-bottom: 8px !important; }\r\n    .brand-products-header p { font-size: 0.84rem; line-height: 1.55; }\r\n\r\n    .wonderlook-wrapper .woocommerce ul.products,\r\n    .woow-products-wrapper ul.products {\r\n      grid-template-columns: 1fr !important;\r\n      gap: 14px !important;\r\n    }\r\n    .wonderlook-wrapper .woocommerce ul.products li.product,\r\n    .woow-products-wrapper ul.products li.product {\r\n      border-radius: var(--radius-md) !important;\r\n      max-width: 460px !important;\r\n      margin: 0 auto !important;\r\n    }\r\n    .wonderlook-wrapper .woocommerce ul.products li.product .woocommerce-loop-product__title,\r\n    .woow-products-wrapper ul.products li.product .woocommerce-loop-product__title {\r\n      font-size: 1.02rem !important; padding: 14px 16px 4px !important;\r\n    }\r\n    .wonderlook-wrapper .woocommerce ul.products li.product .product-categories,\r\n    .woow-products-wrapper ul.products li.product .product-categories {\r\n      font-size: 0.64rem !important; padding: 0 16px !important;\r\n    }\r\n    .wonderlook-wrapper .woocommerce ul.products li.product .price,\r\n    .woow-products-wrapper ul.products li.product .price {\r\n      font-size: 1.02rem !important; padding: 6px 16px 12px !important;\r\n    }\r\n    .wonderlook-wrapper .woocommerce ul.products li.product .button,\r\n    .woow-products-wrapper ul.products li.product .button {\r\n      font-size: 0.8rem !important; padding: 10px 14px !important;\r\n      margin: 0 16px 16px !important;\r\n      width: calc(100% - 32px) !important;\r\n    }\r\n\r\n    .brand-reassurance { padding: 28px 0; }\r\n    .brand-reassurance-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }\r\n    .brand-reassurance-item { gap: 8px; }\r\n    .brand-reassurance-item .icon { width: 42px; height: 42px; font-size: 0.95rem; }\r\n    .brand-reassurance-item h4 { font-size: 0.8rem; }\r\n    .brand-reassurance-item p { font-size: 0.68rem; line-height: 1.35; }\r\n\r\n    .brand-cta { padding: 38px 0; }\r\n    .brand-cta h3 { font-size: 1.3rem !important; margin-bottom: 10px !important; }\r\n    .brand-cta p { font-size: 0.82rem; margin-bottom: 18px; }\r\n    .brand-cta .cta-btns { gap: 9px; }\r\n    .brand-cta .cta-btns a { font-size: 0.78rem; padding: 10px 20px; width: 100%; justify-content: center; }\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    .container { padding: 0 14px; }\r\n    .brand-hero { padding: 60px 0 40px !important; }\r\n    .brand-hero h1 { font-size: 1.75rem !important; }\r\n    .brand-hero-tagline { font-size: 0.8rem !important; }\r\n    .brand-hero p.intro-text { font-size: 0.8rem !important; line-height: 1.55 !important; margin-bottom: 20px !important; }\r\n    .brand-hero-eyebrow { font-size: 0.5rem !important; padding: 4px 10px !important; letter-spacing: 1.4px !important; margin-bottom: 14px !important; }\r\n    .brand-hero-badges { grid-template-columns: 1fr 1fr !important; gap: 7px !important; max-width: 100% !important; }\r\n    .brand-hero-badges .chip { font-size: 0.62rem !important; padding: 8px 7px !important; gap: 4px !important; min-height: 36px !important; }\r\n    .brand-hero-badges .chip i { font-size: 0.64rem !important; }\r\n\r\n    .brand-products-section { padding: 28px 0 38px; }\r\n    .brand-products-header h2 { font-size: 1.3rem !important; }\r\n    .brand-reassurance-grid { grid-template-columns: 1fr 1fr; gap: 12px 8px; }\r\n    .brand-cta h3 { font-size: 1.15rem !important; }\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .brand-hero::before { animation: none !important; }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"wonderlook-wrapper\">\r\n\r\n  <main>\r\n\r\n    <!-- HERO JOOP -->\r\n    <section class=\"brand-hero\">\r\n      <div class=\"container\">\r\n        <span class=\"brand-hero-eyebrow\"><i class=\"fas fa-crown\"><\/i> Marque Cr\u00e9ateur &bull; Hambourg, Allemagne<\/span>\r\n        <h1>JOOP!<\/h1>\r\n        <p class=\"brand-hero-tagline\">L'audace allemande, l'\u00e9l\u00e9gance intemporelle<\/p>\r\n        <div class=\"gold-divider\"><\/div>\r\n        <p class=\"intro-text\">\r\n          Fond\u00e9e en 1978 par Wolfgang Joop \u00e0 Hambourg, JOOP! est devenue l'une des maisons\r\n          de mode les plus embl\u00e9matiques d'Allemagne. Symbole d'\u00e9nergie et d'audace depuis\r\n          sa cr\u00e9ation, la marque cultive un style provocateur et raffin\u00e9 \u2014 des cr\u00e9ations\r\n          qui allient innovation, sensualit\u00e9 et qualit\u00e9 premium. Aujourd'hui, JOOP! Eyewear\r\n          perp\u00e9tue cet h\u00e9ritage avec des montures au design affirm\u00e9, o\u00f9 chaque d\u00e9tail\r\n          raconte l'histoire d'une maison visionnaire.\r\n        <\/p>\r\n        <div class=\"brand-hero-badges\">\r\n          <span class=\"chip\"><i class=\"fas fa-crown\"><\/i> Depuis 1978<\/span>\r\n          <span class=\"chip\"><i class=\"fas fa-gem\"><\/i> Design premium<\/span>\r\n          <span class=\"chip\"><i class=\"fas fa-leaf\"><\/i> Ac\u00e9tate bio<\/span>\r\n          <span class=\"chip\"><i class=\"fas fa-star\"><\/i> Style affirm\u00e9<\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- BREADCRUMB -->\r\n    <nav class=\"brand-breadcrumb\" aria-label=\"Fil d'Ariane\">\r\n      <div class=\"container\">\r\n        <a href=\"<?php echo esc_url( home_url( '\/' ) ); ?>\">Accueil<\/a>\r\n        <i class=\"fas fa-chevron-right\"><\/i>\r\n        <a href=\"<?php echo esc_url( home_url( '\/?page_id=3505' ) ); ?>\">Montures de Cr\u00e9ateurs<\/a>\r\n        <i class=\"fas fa-chevron-right\"><\/i>\r\n        <span class=\"current\">JOOP!<\/span>\r\n      <\/div>\r\n    <\/nav>\r\n\r\n    <!-- PRODUCTS -->\r\n    <section class=\"brand-products-section\">\r\n      <div class=\"container\">\r\n        <div class=\"brand-products-header\">\r\n          <span class=\"section-tag\"><i class=\"fas fa-star\"><\/i> Collection JOOP!<\/span>\r\n          <h2>Nos <em>montures<\/em> JOOP!<\/h2>\r\n          <p>D\u00e9couvrez la s\u00e9lection exclusive des cr\u00e9ations au design affirm\u00e9 et contemporain, alliant audace allemande et \u00e9l\u00e9gance intemporelle.<\/p>\r\n        <\/div>\r\n        <div class=\"woow-products-wrapper\">\r\n          <?php\r\n          echo do_shortcode( '[products category=\"joop\" limit=\"12\" columns=\"4\" paginate=\"true\"]' );\r\n          ?>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- REASSURANCE -->\r\n    <section class=\"brand-reassurance\">\r\n      <div class=\"container\">\r\n        <div class=\"brand-reassurance-grid\">\r\n          <div class=\"brand-reassurance-item\"><div class=\"icon\"><i class=\"fas fa-truck-fast\"><\/i><\/div><h4>Livraison 24\/48h<\/h4><p>Exp\u00e9dition rapide partout au Maroc<\/p><\/div>\r\n          <div class=\"brand-reassurance-item\"><div class=\"icon\"><i class=\"fas fa-hand-holding-dollar\"><\/i><\/div><h4>Paiement \u00e0 la livraison<\/h4><p>Esp\u00e8ces ou carte sur TPE<\/p><\/div>\r\n          <div class=\"brand-reassurance-item\"><div class=\"icon\"><i class=\"fas fa-certificate\"><\/i><\/div><h4>100% Original<\/h4><p>\u00c9tui &amp; certificat de conformit\u00e9<\/p><\/div>\r\n          <div class=\"brand-reassurance-item\"><div class=\"icon\"><i class=\"fas fa-screwdriver-wrench\"><\/i><\/div><h4>Ajustement \u00e0 vie<\/h4><p>R\u00e9glage &amp; entretien offerts<\/p><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- CTA -->\r\n    <section class=\"brand-cta\">\r\n      <div class=\"container\">\r\n        <h3>Besoin d'un <em>conseil personnalis\u00e9<\/em> ?<\/h3>\r\n        <p>Nos experts en visagisme vous accompagnent pour choisir la monture JOOP! parfaite adapt\u00e9e \u00e0 votre style et votre morphologie.<\/p>\r\n        <div class=\"cta-btns\">\r\n          <a href=\"<?php echo esc_url( home_url( '\/?page_id=3472' ) ); ?>\" class=\"btn-gold\"><i class=\"fas fa-wand-magic-sparkles\"><\/i> Conseil Visagisme<\/a>\r\n          <a href=\"https:\/\/wa.me\/212660462426?text=Bonjour%20Wonder%20Look,%20je%20souhaite%20des%20informations%20sur%20les%20montures%20Joop\" target=\"_blank\" rel=\"noopener\" class=\"btn-glass\"><i class=\"fab fa-whatsapp\"><\/i> Contacter via WhatsApp<\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n  <\/main>\r\n\r\n<\/div>\r\n<!-- ===================== \/JOOP ===================== -->\r\n\r\n<?php\r\nget_footer();\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Marque Cr\u00e9ateur &bull; Hambourg, Allemagne JOOP! L&rsquo;audace allemande, l&rsquo;\u00e9l\u00e9gance intemporelle Fond\u00e9e en 1978 par Wolfgang Joop \u00e0 Hambourg, JOOP! est devenue l&rsquo;une des maisons de mode les plus embl\u00e9matiques d&rsquo;Allemagne. Symbole d&rsquo;\u00e9nergie et d&rsquo;audace depuis sa cr\u00e9ation, la marque cultive un style provocateur et raffin\u00e9 \u2014 des cr\u00e9ations qui allient innovation, sensualit\u00e9 et qualit\u00e9 premium. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-3934","page","type-page","status-publish","hentry"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":8}},"_links":{"self":[{"href":"https:\/\/wonderlookstore.com\/index.php?rest_route=\/wp\/v2\/pages\/3934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wonderlookstore.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wonderlookstore.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wonderlookstore.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wonderlookstore.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3934"}],"version-history":[{"count":4,"href":"https:\/\/wonderlookstore.com\/index.php?rest_route=\/wp\/v2\/pages\/3934\/revisions"}],"predecessor-version":[{"id":3938,"href":"https:\/\/wonderlookstore.com\/index.php?rest_route=\/wp\/v2\/pages\/3934\/revisions\/3938"}],"wp:attachment":[{"href":"https:\/\/wonderlookstore.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}