/*
Theme Name: Shop Milano
Theme URI: https://www.shop-milano.nl
Author: Shop Milano
Description: Minimalistisch zwart-wit WooCommerce-thema voor Shop Milano.
Version: 1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: shop-milano
WC requires at least: 8.0
*/

:root { --fg:#0a0a0a; --bg:#fff; --muted:#737373; --line:#e5e5e5; --soft:#f5f5f5; }
* { box-sizing:border-box; border-radius:0 !important; }
body { margin:0; font-family:"DM Sans",sans-serif; color:var(--fg); background:var(--bg); }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
h1,h2,h3,.heading { font-family:"Bebas Neue",sans-serif; font-weight:400; letter-spacing:.04em; }
.container { width:100%; max-width:1400px; margin:0 auto; padding:0 1.5rem; }

.announce { background:var(--fg); color:var(--bg); overflow:hidden; padding:.5rem 0; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; }
.announce .track { display:inline-block; animation:marquee 30s linear infinite; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.site-header { position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--line); }
.site-header .container { display:flex; align-items:center; justify-content:space-between; height:64px; }
.logo { font-family:"Bebas Neue",sans-serif; font-size:2rem; letter-spacing:.08em; }
.main-nav ul { display:flex; gap:2rem; list-style:none; margin:0; padding:0; }
.main-nav a { font-size:.85rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.main-nav a:hover { color:var(--muted); }
.header-icons { display:flex; gap:1rem; align-items:center; font-size:.85rem; font-weight:600; text-transform:uppercase; }
.cart-count { display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center; background:var(--fg); color:var(--bg); border-radius:50% !important; font-size:10px; margin-left:4px; }
@media (max-width:768px){ .main-nav{display:none} }

.hero { position:relative; height:70vh; overflow:hidden; }
.hero img { width:100%; height:100%; object-fit:cover; }
.hero .overlay { position:absolute; inset:0; background:rgba(0,0,0,.3); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; padding:1rem; }
.hero h1 { font-size:clamp(4rem,10vw,8rem); margin:0; }
.hero p { letter-spacing:.3em; text-transform:uppercase; font-size:.8rem; margin:.5rem 0; }

.btn, .button, button.button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
  display:inline-block; background:var(--fg) !important; color:var(--bg) !important; padding:1rem 2.5rem !important; font-size:.8rem !important; font-weight:600 !important; letter-spacing:.1em; text-transform:uppercase; border:0 !important; cursor:pointer; }
.btn-light { background:var(--bg) !important; color:var(--fg) !important; margin-top:2rem; }

.cats { border-bottom:1px solid var(--line); }
.cats .container { display:flex; gap:.75rem; overflow-x:auto; padding-top:1rem; padding-bottom:1rem; }
.cats a { flex-shrink:0; border:1px solid var(--fg); padding:.75rem 1.5rem; font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.cats a:hover { background:var(--fg); color:var(--bg); }

.section { padding:3rem 0; }
.section-title { font-size:2.5rem; margin:0 0 2rem; }

/* WooCommerce grid */
.woocommerce ul.products { display:grid !important; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin:0; padding:0; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display:none !important; }
@media (min-width:768px){ .woocommerce ul.products{grid-template-columns:repeat(4,1fr)} }
@media (min-width:1024px){ .woocommerce ul.products{grid-template-columns:repeat(5,1fr)} }
.woocommerce ul.products li.product { width:auto !important; margin:0 !important; float:none !important; }
.woocommerce ul.products li.product img { aspect-ratio:3/4; object-fit:cover; background:var(--soft); margin-bottom:.75rem !important; transition:transform .5s; }
.woocommerce ul.products li.product:hover img { transform:scale(1.03); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family:"DM Sans",sans-serif; font-size:.9rem !important; font-weight:500; letter-spacing:0; padding:0 !important; }
.woocommerce ul.products li.product .price { color:var(--fg) !important; font-weight:600; font-size:.9rem !important; }
.woocommerce ul.products li.product .button { display:none; }
.woocommerce span.onsale { display:none; }

/* Single product */
.woocommerce div.product .product_title { font-size:3rem; margin:0; }
.woocommerce div.product p.price { color:var(--fg) !important; font-size:1.5rem !important; font-weight:600; }
.woocommerce div.product div.images img { background:var(--soft); }
.woocommerce div.product form.cart .variations select { width:100%; padding:.75rem; border:1px solid var(--line); }
.woocommerce div.product form.cart .button { width:100%; }
.usp { list-style:none; padding:0; margin:1.5rem 0; font-size:.9rem; }
.usp li { padding:.35rem 0; }
.woocommerce-tabs ul.tabs { padding:0 !important; }

.page-content { max-width:780px; padding:3rem 0; line-height:1.7; font-size:.95rem; }
.page-content h1 { font-size:3rem; }

.site-footer { background:var(--fg); color:var(--bg); padding:3rem 0 1.5rem; margin-top:3rem; }
.footer-grid { display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width:768px){ .footer-grid{grid-template-columns:repeat(4,1fr)} }
.site-footer h3 { font-size:2rem; margin:0 0 1rem; }
.site-footer h4 { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; margin:0 0 1rem; }
.site-footer ul { list-style:none; padding:0; margin:0; }
.site-footer li { margin-bottom:.5rem; }
.site-footer a, .site-footer p { color:rgba(255,255,255,.6); font-size:.85rem; }
.site-footer a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:3rem; padding-top:1.5rem; font-size:.75rem; color:rgba(255,255,255,.4); display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; }