/*
Theme Name: Outlet Premiums
Theme URI: https://outletpremiums.nl
Author: Outlet Premiums
Description: Custom WooCommerce theme voor Outlet Premiums met geintegreerde winkelmand, kassa en Mollie-ondersteuning. Schone, moderne look geinspireerd op outletpremiums.nl.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: outlet-premiums
Tags: e-commerce, woocommerce, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready
*/

:root{
  --op-bg:#ffffff;
  --op-fg:#111111;
  --op-muted:#666666;
  --op-border:#e5e5e5;
  --op-accent:#000000;
  --op-accent-hover:#222222;
  --op-sale:#c0392b;
  --op-radius:6px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--op-bg);color:var(--op-fg);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.55;}
a{color:var(--op-fg);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;height:auto;display:block;}

.op-container{max-width:1280px;margin:0 auto;padding:0 24px;}

.op-topbar{background:#111;color:#fff;font-size:12px;text-align:center;padding:8px 16px;letter-spacing:.05em;}
.op-header{border-bottom:1px solid var(--op-border);background:#fff;position:sticky;top:0;z-index:50;}
.op-header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0;gap:24px;}
.op-logo{font-weight:700;font-size:22px;letter-spacing:.02em;text-transform:uppercase;}
.op-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:24px;}
.op-nav a{font-size:14px;text-transform:uppercase;letter-spacing:.08em;}
.op-header-actions{display:flex;align-items:center;gap:18px;font-size:14px;}
.op-cart-link{display:inline-flex;align-items:center;gap:6px;}
.op-cart-count{background:#111;color:#fff;border-radius:999px;padding:2px 8px;font-size:11px;}

.op-hero{padding:64px 0;text-align:center;background:#fafafa;border-bottom:1px solid var(--op-border);}
.op-hero h1{font-size:40px;margin:0 0 12px;letter-spacing:-.02em;}
.op-hero p{color:var(--op-muted);max-width:640px;margin:0 auto;}

.op-content{padding:48px 0;}

/* WooCommerce overrides */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background:#fff;border:1px solid var(--op-border);border-radius:var(--op-radius);padding:12px;transition:box-shadow .2s;
}
.woocommerce ul.products li.product:hover{box-shadow:0 8px 24px rgba(0,0,0,.06);}
.woocommerce ul.products li.product .price{color:var(--op-fg);font-weight:600;}
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:15px;padding:8px 4px 4px;}
.woocommerce span.onsale{background:var(--op-sale);color:#fff;border-radius:var(--op-radius);}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  background:var(--op-accent);color:#fff;border-radius:var(--op-radius);
  padding:12px 22px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:13px;border:0;
  transition:background .15s;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{background:var(--op-accent-hover);color:#fff;}

.woocommerce div.product div.images img{border-radius:var(--op-radius);}
.woocommerce div.product p.price,
.woocommerce div.product span.price{color:var(--op-fg);font-size:24px;font-weight:700;}
.woocommerce table.shop_table{border-radius:var(--op-radius);overflow:hidden;}

.woocommerce-message,.woocommerce-info{border-top-color:var(--op-accent);}
.woocommerce-message::before,.woocommerce-info::before{color:var(--op-accent);}

.op-footer{border-top:1px solid var(--op-border);padding:48px 0;margin-top:64px;background:#fafafa;color:var(--op-muted);font-size:14px;}
.op-footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px;}
.op-footer h4{color:var(--op-fg);font-size:13px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 12px;}
.op-footer ul{list-style:none;padding:0;margin:0;}
.op-footer li{padding:4px 0;}
.op-footer-bottom{text-align:center;padding-top:32px;border-top:1px solid var(--op-border);margin-top:32px;font-size:12px;}

@media (max-width:768px){
  .op-nav{display:none;}
  .op-hero h1{font-size:28px;}
}

/* Dropdown menu */
.nav-menu, .main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

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

.nav-menu li ul, .main-navigation ul li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 200px;
    z-index: 9999;
    flex-direction: column;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
}

.nav-menu li:hover > ul, .main-navigation ul li:hover > ul {
    display: flex;
}

.nav-menu li ul li a, .main-navigation ul li ul li a {
    display: block;
    padding: 10px 20px;
    white-space: nowrap;
    color: #333;
    text-decoration: none;
    transition: background 0.2s;
}

.nav-menu li ul li a:hover, .main-navigation ul li ul li a:hover {
    background: #f5f5f5;
    color: #000;
}

/* === Dropdown fix === */
.op-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
    align-items: center;
}

.op-nav ul li {
    position: relative;
}

/* Verberg submenu standaard */
.op-nav ul li .sub-menu {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 180px;
    z-index: 9999;
    flex-direction: column !important;
    gap: 0 !important;
    border-radius: 8px;
    overflow: hidden;
    padding: 8px 0;
}

/* Toon submenu bij hover */
.op-nav ul li:hover > .sub-menu {
    display: flex !important;
}

.op-nav ul li .sub-menu li a {
    display: block;
    padding: 10px 20px;
    white-space: nowrap;
    color: #333;
    text-decoration: none;
}

.op-nav ul li .sub-menu li a:hover {
    background: #f5f5f5;
}