/*
 Theme Name:   Ralph Lauren Relaunch
 Theme URI:    https://yourschool.at
 Description:  Eigenständiges WordPress Theme für den Ralph Lauren E-Commerce Relaunch. WooCommerce & Elementor kompatibel. HAK Projektarbeit 3DK – Paul Müllner, Leo Schütz, Felix Patak, Jakob Sissolak.
 Author:       Team 3DK
 Version:      1.0.0
 Text Domain:  ralph-lauren
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         e-commerce, elementor, woocommerce, luxury, fashion
*/

/* ==========================================================================
   CSS VARIABLEN – Style Guide (Projektarbeit Kap. 8)
   ========================================================================== */
:root {
    --rl-navy:       #041E42;
    --rl-cream:      #F5F1E8;
    --rl-gold:       #C6A75E;
    --rl-black:      #000000;
    --rl-lightgray:  #F0F0F0;
    --rl-white:      #FFFFFF;
    --rl-muted:      #666666;
    --rl-navy-light: #0a3470;
    --rl-gold-dark:  #a8893d;

    --font-serif:  'EB Garamond', 'Georgia', serif;
    --font-sans:   'Helvetica Neue', Arial, sans-serif;

    --space-1:  8px;
    --space-2:  16px;
    --space-3:  24px;
    --space-4:  32px;
    --space-5:  40px;
    --space-6:  48px;
    --space-8:  64px;
    --space-10: 80px;

    --radius-btn:  2px;
    --radius-card: 4px;
    --shadow-card: 0 2px 12px rgba(4,30,66,0.08);
    --shadow-hover:0 6px 24px rgba(4,30,66,0.16);
    --transition:  0.25s ease;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    font-size:   16px;
    line-height: 1.65;
    color:       var(--rl-black);
    background:  var(--rl-white);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--rl-navy); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--rl-gold); }

/* ==========================================================================
   TYPOGRAFIE (Style Guide Kap. 8.2)
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family:    var(--font-serif);
    color:          var(--rl-navy);
    font-weight:    700;
    line-height:    1.2;
    letter-spacing: 0.01em;
    margin-bottom:  var(--space-2);
}

h1 { font-size: clamp(40px, 5vw, 64px); }
h2 { font-size: clamp(28px, 3.5vw, 40px); }
h3 { font-size: clamp(22px, 2.5vw, 30px); }
h4 { font-size: 22px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

p { margin-bottom: var(--space-2); }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-content { flex: 1; }

.container {
    max-width:  1320px;
    margin:     0 auto;
    padding:    0 var(--space-4);
}

@media (max-width: 768px) {
    .container { padding: 0 var(--space-2); }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn,
.button,
button[type="submit"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    display:         inline-block;
    font-family:     var(--font-sans);
    font-size:       14px;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.12em;
    padding:         14px 36px;
    border-radius:   var(--radius-btn);
    border:          2px solid transparent;
    cursor:          pointer;
    transition:      all var(--transition);
    background:      var(--rl-navy);
    color:           var(--rl-white);
    line-height:     1;
}

.btn:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
    background: var(--rl-gold);
    color:      var(--rl-navy);
    border-color: var(--rl-gold);
}

.btn-outline {
    background:   transparent;
    border-color: var(--rl-navy);
    color:        var(--rl-navy);
}
.btn-outline:hover {
    background:   var(--rl-navy);
    color:        var(--rl-white);
}

.btn-gold {
    background:  var(--rl-gold);
    border-color:var(--rl-gold);
    color:       var(--rl-navy);
}
.btn-gold:hover {
    background:  var(--rl-gold-dark);
    border-color:var(--rl-gold-dark);
    color:       var(--rl-white);
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */
.site-header {
    position:    sticky;
    top:         0;
    z-index:     1000;
    background:  var(--rl-white);
    border-bottom: 1px solid var(--rl-lightgray);
    box-shadow:  0 1px 8px rgba(4,30,66,0.06);
}

/* Top bar */
.header-topbar {
    background: var(--rl-navy);
    color:      var(--rl-cream);
    font-size:  12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding:    8px 0;
    text-align: center;
}
.header-topbar a { color: var(--rl-gold); }
.header-topbar a:hover { color: var(--rl-cream); }

/* Main header row */
.header-main {
    display:     flex;
    align-items: center;
    justify-content: space-between;
    padding:     var(--space-3) 0;
    gap:         var(--space-3);
}

/* Logo */
.site-branding { flex-shrink: 0; }
.site-title {
    font-family:    var(--font-serif);
    font-size:      26px;
    font-weight:    700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--rl-navy);
    line-height:    1;
    margin:         0;
}
.site-title a { color: inherit; }
.site-title a:hover { color: var(--rl-gold); }
.site-description {
    font-size:      10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          var(--rl-muted);
    margin-top:     3px;
}

/* Primary Navigation */
.main-navigation { flex: 1; display: flex; justify-content: center; }

.main-navigation ul {
    display:    flex;
    list-style: none;
    gap:        var(--space-1);
    align-items: center;
}

.main-navigation ul li { position: relative; }

.main-navigation ul li a {
    display:        block;
    font-family:    var(--font-sans);
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--rl-navy);
    padding:        8px 14px;
    transition:     color var(--transition);
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
    color: var(--rl-gold);
}

/* Dropdown */
.main-navigation ul li ul {
    display:    none;
    position:   absolute;
    top:        100%;
    left:       0;
    background: var(--rl-white);
    border-top: 2px solid var(--rl-gold);
    box-shadow: var(--shadow-hover);
    min-width:  220px;
    flex-direction: column;
    gap:        0;
    z-index:    999;
}
.main-navigation ul li:hover > ul { display: flex; }
.main-navigation ul li ul li a {
    padding:    12px 20px;
    border-bottom: 1px solid var(--rl-lightgray);
    font-size:  11px;
}
.main-navigation ul li ul li:last-child a { border-bottom: none; }
.main-navigation ul li ul li a:hover { background: var(--rl-cream); }

/* Header Icons (Suche, Konto, Warenkorb) */
.header-icons {
    display:    flex;
    align-items:center;
    gap:        var(--space-2);
    flex-shrink: 0;
}
.header-icon-btn {
    background: none;
    border:     none;
    cursor:     pointer;
    color:      var(--rl-navy);
    padding:    8px;
    transition: color var(--transition);
    display:    flex;
    align-items:center;
    font-size:  11px;
    font-weight:700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    gap:        6px;
}
.header-icon-btn:hover { color: var(--rl-gold); }
.header-icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }

/* Cart count badge */
.cart-count {
    background:  var(--rl-gold);
    color:       var(--rl-navy);
    border-radius: 50%;
    width:  18px; height: 18px;
    font-size: 10px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-left: -4px;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display:    none;
    background: none;
    border:     none;
    cursor:     pointer;
    color:      var(--rl-navy);
    padding:    8px;
}
.menu-toggle svg { width: 24px; height: 24px; stroke: currentColor; fill: none; }

@media (max-width: 1024px) {
    .main-navigation { display: none; }
    .menu-toggle { display: block; }

    .main-navigation.is-open {
        display:    block;
        position:   fixed;
        top:        0; left: 0;
        width:      100%; height: 100%;
        background: var(--rl-navy);
        z-index:    9999;
        overflow-y: auto;
        padding:    var(--space-8) var(--space-4);
    }
    .main-navigation.is-open ul {
        flex-direction: column;
        gap: var(--space-1);
        align-items: flex-start;
    }
    .main-navigation.is-open ul li a {
        color:     var(--rl-cream);
        font-size: 20px;
        padding:   var(--space-2) 0;
    }
    .main-navigation.is-open ul li a:hover { color: var(--rl-gold); }
    .main-navigation.is-open ul li ul {
        display:  block;
        position: static;
        background: transparent;
        border:   none;
        box-shadow: none;
        padding-left: var(--space-3);
    }
    .main-navigation.is-open ul li ul li a {
        font-size: 14px;
        color:     rgba(245,241,232,0.7);
        border: none;
    }
    .close-menu {
        position:  absolute;
        top:       var(--space-3);
        right:     var(--space-3);
        background: none;
        border:    none;
        color:     var(--rl-cream);
        cursor:    pointer;
    }
    .close-menu svg { width: 28px; height: 28px; stroke: currentColor; fill: none; }
}

/* ==========================================================================
   GOLD DIVIDER (Zierlinie)
   ========================================================================== */
.gold-divider {
    width:  80px;
    height: 2px;
    background: var(--rl-gold);
    margin: var(--space-3) auto;
}
.gold-divider.left { margin-left: 0; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section { padding: var(--space-10) 0; }
.section-cream { background: var(--rl-cream); }
.section-navy  { background: var(--rl-navy);  color: var(--rl-cream); }
.section-navy h2, .section-navy h3 { color: var(--rl-cream); }

.section-header { text-align: center; margin-bottom: var(--space-8); }
.section-header .gold-divider { margin: var(--space-2) auto var(--space-3); }
.section-subtitle {
    font-size:     14px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:         var(--rl-gold);
    font-weight:   700;
    margin-bottom: var(--space-1);
}

/* ==========================================================================
   HERO BANNER
   ========================================================================== */
.rl-hero {
    position:       relative;
    min-height:     90vh;
    display:        flex;
    align-items:    center;
    background:     var(--rl-navy);
    overflow:       hidden;
}
.rl-hero-bg {
    position:   absolute;
    inset:      0;
    object-fit: cover;
    width:      100%;
    height:     100%;
    opacity:    0.45;
}
.rl-hero-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to right, rgba(4,30,66,0.85) 40%, rgba(4,30,66,0.2));
}
.rl-hero-content {
    position:    relative;
    z-index:     2;
    max-width:   640px;
    padding:     var(--space-10) 0;
}
.rl-hero-eyebrow {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color:          var(--rl-gold);
    margin-bottom:  var(--space-2);
}
.rl-hero h1 {
    color:          var(--rl-cream);
    font-size:      clamp(42px, 6vw, 80px);
    line-height:    1.05;
    margin-bottom:  var(--space-3);
}
.rl-hero p {
    color:          rgba(245,241,232,0.85);
    font-size:      18px;
    margin-bottom:  var(--space-5);
    max-width:      480px;
}
.rl-hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ==========================================================================
   CATEGORY GRID
   ========================================================================== */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-3);
}
.category-card {
    position:   relative;
    overflow:   hidden;
    aspect-ratio: 3/4;
    border-radius: var(--radius-card);
    cursor:     pointer;
}
.category-card img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.category-card:hover img { transform: scale(1.06); }
.category-card-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(4,30,66,0.8) 0%, transparent 60%);
    display:    flex;
    flex-direction: column;
    justify-content: flex-end;
    padding:    var(--space-4);
}
.category-card-title {
    font-family:    var(--font-serif);
    font-size:      24px;
    font-weight:    700;
    color:          var(--rl-white);
    letter-spacing: 0.04em;
    margin-bottom:  var(--space-1);
}
.category-card-link {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--rl-gold);
}
.category-card-link::after {
    content: ' →';
    transition: margin var(--transition);
}
.category-card:hover .category-card-link::after { margin-left: 6px; }

/* ==========================================================================
   WOOCOMMERCE – PRODUKTKARTEN (Archiv)
   ========================================================================== */
.woocommerce ul.products,
ul.products {
    display:               grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   var(--space-4) !important;
    list-style:            none !important;
    padding:               0 !important;
    margin:                0 !important;
}

.woocommerce ul.products li.product,
ul.products li.product {
    background:    var(--rl-white);
    border-radius: var(--radius-card);
    overflow:      hidden;
    box-shadow:    var(--shadow-card);
    transition:    box-shadow var(--transition), transform var(--transition);
    padding:       0 !important;
    margin:        0 !important;
    display:       flex;
    flex-direction:column;
}

.woocommerce ul.products li.product:hover,
ul.products li.product:hover {
    box-shadow: var(--shadow-hover);
    transform:  translateY(-4px);
}

/* Produktbild */
.woocommerce ul.products li.product a img,
ul.products li.product a img {
    width:       100% !important;
    aspect-ratio: 3/4;
    object-fit:  cover;
    transition:  transform 0.5s ease;
}
.woocommerce ul.products li.product:hover a img,
ul.products li.product:hover a img {
    transform: scale(1.04);
}

/* Produktinfo Block */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
    font-family: var(--font-serif);
    font-size:   18px;
    font-weight: 600;
    color:       var(--rl-navy);
    padding:     var(--space-2) var(--space-2) var(--space-1) !important;
    margin:      0 !important;
}

.woocommerce ul.products li.product .price,
ul.products li.product .price {
    font-family: var(--font-sans);
    font-size:   18px;
    font-weight: 700;
    color:       var(--rl-navy);
    padding:     0 var(--space-2);
    margin:      0 !important;
}

.woocommerce ul.products li.product .price del,
ul.products li.product .price del {
    color:     var(--rl-muted);
    font-size: 14px;
    font-weight: 400;
    margin-right: 6px;
}

.woocommerce ul.products li.product .price ins,
ul.products li.product .price ins {
    color:       #b91c1c;
    text-decoration: none;
}

/* "In den Warenkorb" Button auf Produktkarte */
.woocommerce ul.products li.product .button,
ul.products li.product .button {
    margin:      var(--space-2) !important;
    width:       calc(100% - var(--space-4)) !important;
    text-align:  center;
}

/* Sale Badge */
.woocommerce span.onsale {
    background:    var(--rl-gold) !important;
    color:         var(--rl-navy) !important;
    font-family:   var(--font-sans);
    font-size:     11px;
    font-weight:   700;
    letter-spacing:0.1em;
    border-radius: var(--radius-btn) !important;
    min-height:    auto !important;
    min-width:     auto !important;
    line-height:   1 !important;
    padding:       6px 12px !important;
    top:           12px !important;
    left:          12px !important;
}

/* ==========================================================================
   WOOCOMMERCE – EINZELPRODUKTSEITE
   ========================================================================== */
.woocommerce div.product {
    display:       grid;
    grid-template-columns: 1fr 1fr;
    gap:           var(--space-8);
    align-items:   start;
    padding:       var(--space-8) 0;
}

@media (max-width: 768px) {
    .woocommerce div.product {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

.woocommerce div.product div.images img {
    border-radius: var(--radius-card);
}

.woocommerce div.product .product_title {
    font-size:   clamp(28px, 4vw, 42px);
    margin-bottom: var(--space-2);
}

.woocommerce div.product p.price {
    font-size:   28px;
    font-weight: 700;
    color:       var(--rl-navy);
    margin:      var(--space-2) 0 var(--space-4);
}

/* Goldene Trennlinie unter dem Preis */
.woocommerce div.product p.price::after {
    content:  '';
    display:  block;
    width:    60px;
    height:   2px;
    background: var(--rl-gold);
    margin-top: var(--space-3);
}

.woocommerce div.product form.cart {
    margin-top: var(--space-3);
}

.woocommerce div.product form.cart .qty {
    border:      2px solid var(--rl-lightgray);
    border-radius: var(--radius-btn);
    padding:     10px var(--space-2);
    font-size:   16px;
    font-weight: 700;
    width:       70px;
    color:       var(--rl-navy);
    margin-right:var(--space-2);
    transition:  border-color var(--transition);
}
.woocommerce div.product form.cart .qty:focus {
    border-color: var(--rl-navy);
    outline: none;
}

.woocommerce div.product form.cart button[type="submit"] {
    flex: 1;
    max-width: 280px;
}

/* Tabs (Beschreibung, Zusätzliche Info, Bewertungen) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom: 2px solid var(--rl-lightgray);
    padding: 0;
    margin-bottom: var(--space-4);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background:  transparent !important;
    border:      none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom-color: var(--rl-gold) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--rl-muted);
    padding:        var(--space-2) var(--space-3);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--rl-navy);
}

/* ==========================================================================
   WOOCOMMERCE – WARENKORB
   ========================================================================== */
.woocommerce-cart table.cart {
    border-collapse: collapse;
    width: 100%;
}
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th {
    border-bottom: 1px solid var(--rl-lightgray);
    padding: var(--space-3) var(--space-2);
    vertical-align: middle;
}
.woocommerce-cart table.cart th {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--rl-muted);
}
.woocommerce-cart table.cart .product-name a {
    font-family: var(--font-serif);
    font-size:   18px;
    font-weight: 600;
    color:       var(--rl-navy);
}
.woocommerce-cart .cart-collaterals .cart_totals {
    background:    var(--rl-cream);
    border:        1px solid var(--rl-lightgray);
    border-top:    3px solid var(--rl-gold);
    border-radius: var(--radius-card);
    padding:       var(--space-5);
}
.woocommerce-cart .cart_totals h2 {
    font-size: 22px;
    margin-bottom: var(--space-3);
}

/* ==========================================================================
   WOOCOMMERCE – CHECKOUT
   ========================================================================== */
.woocommerce-checkout #payment {
    background:    var(--rl-cream);
    border-radius: var(--radius-card);
    border:        1px solid var(--rl-lightgray);
    padding:       var(--space-4);
}
.woocommerce form .form-row label {
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--rl-navy);
    margin-bottom:  6px;
    display:        block;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    border:        2px solid var(--rl-lightgray);
    border-radius: var(--radius-btn);
    padding:       12px 16px;
    font-size:     15px;
    color:         var(--rl-navy);
    width:         100%;
    transition:    border-color var(--transition);
    background:    var(--rl-white);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--rl-navy);
    outline:      none;
}

/* ==========================================================================
   WOOCOMMERCE – BENACHRICHTIGUNGEN
   ========================================================================== */
.woocommerce-message,
.woocommerce-info {
    border-top-color: var(--rl-gold) !important;
    background:       var(--rl-cream) !important;
    color:            var(--rl-navy) !important;
}
.woocommerce-error {
    border-top-color: #b91c1c !important;
}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.woocommerce-breadcrumb {
    font-size:      12px;
    letter-spacing: 0.06em;
    color:          var(--rl-muted);
    padding:        var(--space-3) 0;
    border-bottom:  1px solid var(--rl-lightgray);
    margin-bottom:  var(--space-5);
}
.woocommerce-breadcrumb a { color: var(--rl-muted); }
.woocommerce-breadcrumb a:hover { color: var(--rl-gold); }

/* ==========================================================================
   SIDEBAR & FILTER
   ========================================================================== */
.widget-area {
    padding:       var(--space-5);
    background:    var(--rl-cream);
    border-radius: var(--radius-card);
    border:        1px solid var(--rl-lightgray);
    border-top:    3px solid var(--rl-navy);
}
.widget { margin-bottom: var(--space-5); }
.widget:last-child { margin-bottom: 0; }
.widget-title {
    font-family:    var(--font-sans);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--rl-navy);
    padding-bottom: var(--space-2);
    border-bottom:  2px solid var(--rl-gold);
    margin-bottom:  var(--space-3);
}
.widget ul { list-style: none; padding: 0; }
.widget ul li { padding: 6px 0; border-bottom: 1px solid var(--rl-lightgray); font-size: 14px; }
.widget ul li:last-child { border: none; }
.widget ul li a { color: var(--rl-navy); }
.widget ul li a:hover { color: var(--rl-gold); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
    background:  var(--rl-navy);
    color:       var(--rl-cream);
    margin-top:  auto;
}

/* Footer Top – Goldene Linie */
.footer-gold-bar {
    height:     3px;
    background: linear-gradient(to right, transparent, var(--rl-gold), transparent);
}

/* Footer Main */
.footer-main {
    padding: var(--space-10) 0 var(--space-8);
}
.footer-grid {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap:                   var(--space-8);
}
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* Footer Logo & Brand */
.footer-brand .footer-logo {
    font-family:    var(--font-serif);
    font-size:      24px;
    font-weight:    700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--rl-cream);
    margin-bottom:  var(--space-2);
}
.footer-brand p {
    font-size:  14px;
    color:      rgba(245,241,232,0.7);
    line-height:1.7;
    max-width:  300px;
    margin-bottom: var(--space-4);
}

/* Social Links */
.footer-social { display: flex; gap: var(--space-2); }
.footer-social a {
    width:  40px; height: 40px;
    border: 1px solid rgba(198,167,94,0.4);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color:   var(--rl-cream);
    transition: all var(--transition);
}
.footer-social a:hover {
    background:   var(--rl-gold);
    border-color: var(--rl-gold);
    color:        var(--rl-navy);
}
.footer-social svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }

/* Footer Nav Columns */
.footer-col h4 {
    font-family:    var(--font-sans);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          var(--rl-gold);
    margin-bottom:  var(--space-3);
}
.footer-col ul { list-style: none; padding: 0; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a {
    font-size:  14px;
    color:      rgba(245,241,232,0.75);
    transition: color var(--transition);
}
.footer-col ul li a:hover { color: var(--rl-gold); }

/* Footer Bottom Bar */
.footer-bottom {
    border-top:  1px solid rgba(198,167,94,0.2);
    padding:     var(--space-3) 0;
    display:     flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap:   wrap;
    gap:         var(--space-2);
}
.footer-copyright {
    font-size:  12px;
    color:      rgba(245,241,232,0.5);
    letter-spacing: 0.06em;
}
.footer-legal { display: flex; gap: var(--space-3); }
.footer-legal a {
    font-size:  12px;
    color:      rgba(245,241,232,0.5);
    letter-spacing: 0.06em;
}
.footer-legal a:hover { color: var(--rl-gold); }

/* ==========================================================================
   ELEMENTOR OVERRIDES – Theme-Farben in Elementor nutzbar machen
   ========================================================================== */
/* Wenn in Elementor "Primär", "Sekundär" etc. ausgewählt wird */
.elementor-widget-button .elementor-button-primary {
    background: var(--rl-navy) !important;
    border-color: var(--rl-navy) !important;
}
.elementor-widget-button .elementor-button-primary:hover {
    background: var(--rl-gold) !important;
    border-color: var(--rl-gold) !important;
    color: var(--rl-navy) !important;
}
/* Elementor Section Hintergrundfarben */
.e-con.rl-navy-bg, .elementor-section.rl-navy-bg { background-color: var(--rl-navy) !important; }
.e-con.rl-cream-bg, .elementor-section.rl-cream-bg { background-color: var(--rl-cream) !important; }

/* ==========================================================================
   UTILITY KLASSEN
   ========================================================================== */
.text-navy    { color: var(--rl-navy) !important; }
.text-gold    { color: var(--rl-gold) !important; }
.text-cream   { color: var(--rl-cream) !important; }
.text-muted   { color: var(--rl-muted) !important; }
.bg-navy      { background: var(--rl-navy) !important; }
.bg-cream     { background: var(--rl-cream) !important; }
.bg-gold      { background: var(--rl-gold) !important; }
.text-center  { text-align: center; }
.eyebrow {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color:          var(--rl-gold);
}

/* ==========================================================================
   RESPONSIVE HELPERS
   ========================================================================== */
@media (max-width: 768px) {
    .section { padding: var(--space-8) 0; }
    .woocommerce ul.products,
    ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-2) !important; }
}
@media (max-width: 480px) {
    .woocommerce ul.products,
    ul.products { grid-template-columns: 1fr !important; }
    .rl-hero { min-height: 70vh; }
}