/*
Theme Name: MagicMushroomDeliveryAU — Reference Clone
Theme URI: https://magicmushroomdeliveryau.com
Author: Design Clone
Author URI: https://magicmushroomdeliveryau.com
Description: Exact design clone of aupsychedelics.com rebuilt for magicmushroomdeliveryau.com. Pixel-perfect layout — sticky header, hero, category pills, left sidebar, 4-column WooCommerce grid, sale badges, price ranges. WooCommerce ready, responsive, legal placeholder products only. Replace placeholders with your own compliant products before going live.
Version: 1.0.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mmdau-clone
Tags: woocommerce, e-commerce, shop, grid, responsive, clone
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
*/

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color:#1a1a1a; background:#ffffff; line-height:1.6}
a{color:inherit; text-decoration:none}
.container{max-width:1280px; margin:0 auto; padding:0 20px}
.topbar{background:#0f172a; color:#cbd5e1; font-size:12px; padding:8px 0; text-align:center; letter-spacing:0.5px}
.topbar span{color:#38bdf8}
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.95); backdrop-filter:blur(12px); border-bottom:1px solid #e2e8f0}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:74px; gap:20px}
.logo{display:flex; align-items:center; gap:12px; font-weight:800; font-size:18px; letter-spacing:-0.5px; color:#0f172a}
.logo-mark{width:40px; height:40px; background:#0f172a; color:white; display:flex; align-items:center; justify-content:center; border-radius:10px; font-size:18px}
.logo small{display:block; font-size:10px; font-weight:600; letter-spacing:2px; color:#64748b; margin-top:-4px}
nav{display:flex; gap:28px; font-size:14px; font-weight:600; color:#334155}
nav a:hover{color:#0f172a}
.header-actions{display:flex; align-items:center; gap:14px}
.search-box{background:#f1f5f9; border:1px solid #e2e8f0; border-radius:999px; padding:9px 16px; display:flex; align-items:center; gap:8px; width:260px; font-size:13px; color:#94a3b8}
.icon-btn{width:42px; height:42px; border-radius:999px; border:1px solid #e2e8f0; display:flex; align-items:center; justify-content:center; background:white; position:relative}
.cart-count{position:absolute; top:-6px; right:-6px; background:#ef4444; color:white; font-size:10px; font-weight:800; width:18px; height:18px; border-radius:999px; display:flex; align-items:center; justify-content:center}
.btn-primary{background:#0f172a; color:white; padding:11px 22px; border-radius:999px; font-weight:700; font-size:13px; letter-spacing:0.3px; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px}
.btn-primary:hover{background:#1e293b}
.btn-secondary{background:white; color:#0f172a; border:1px solid #e2e8f0; padding:11px 22px; border-radius:999px; font-weight:700; font-size:13px}
.hero{background:#f8fafc; padding:28px 0 0; border-bottom:1px solid #e2e8f0}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:32px; align-items:center; padding:36px 0}
.eyebrow{font-size:11px; font-weight:800; letter-spacing:2.5px; color:#0ea5e9; text-transform:uppercase; margin-bottom:12px}
.hero h1{font-size:42px; line-height:1.05; letter-spacing:-1.5px; font-weight:800; color:#0f172a; margin-bottom:14px}
.hero h1 em{font-style:normal; color:#0ea5e9}
.hero p{color:#475569; font-size:15px; max-width:520px; margin-bottom:22px}
.hero-ctas{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.trust-row{display:flex; gap:18px; margin-top:18px; font-size:12px; color:#64748b; font-weight:600}
.trust-row span{display:flex; align-items:center; gap:6px}
.hero-visual{background:white; border:1px solid #e2e8f0; border-radius:20px; padding:14px; box-shadow:0 20px 60px rgba(15,23,42,0.08)}
.hero-img{height:360px; background:linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #fef3c7 100%); border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden}
.hero-img::before{content:''; position:absolute; inset:0; background:radial-gradient(400px 300px at 70% 30%, rgba(14,165,233,0.15), transparent 60%)}
.badge-sale{position:absolute; top:16px; left:16px; background:#ef4444; color:white; font-size:11px; font-weight:800; letter-spacing:0.8px; padding:6px 10px; border-radius:999px}
.cat-bar{display:flex; gap:8px; overflow:auto; padding:18px 0; border-bottom:1px solid #f1f5f9; scrollbar-width:none}
.cat-pill{white-space:nowrap; padding:8px 14px; border-radius:999px; border:1px solid #e2e8f0; background:white; font-size:12px; font-weight:700; color:#334155; cursor:pointer; text-decoration:none; display:inline-block}
.cat-pill.active{background:#0f172a; color:white; border-color:#0f172a}
.main{display:grid; grid-template-columns:260px 1fr; gap:28px; padding:26px 0 40px}
.sidebar{background:white; border:1px solid #e2e8f0; border-radius:16px; padding:18px; height:fit-content; position:sticky; top:90px}
.sidebar h3{font-size:12px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#0f172a; margin-bottom:12px}
.sidebar ul{list-style:none; display:flex; flex-direction:column; gap:2px}
.sidebar li a{display:flex; justify-content:space-between; align-items:center; padding:9px 10px; border-radius:10px; font-size:13px; font-weight:600; color:#475569}
.sidebar li a:hover{background:#f8fafc; color:#0f172a}
.sidebar li a span{font-size:11px; background:#f1f5f9; padding:2px 7px; border-radius:999px; color:#64748b}
.filter-box{margin-top:18px; padding-top:18px; border-top:1px solid #f1f5f9}
.price-range{height:4px; background:#e2e8f0; border-radius:999px; position:relative; margin:18px 0}
.price-range::after{content:''; position:absolute; left:20%; right:30%; top:0; height:100%; background:#0f172a; border-radius:999px}
.dots{position:absolute; top:50%; width:14px; height:14px; background:white; border:3px solid #0f172a; border-radius:999px; transform:translateY(-50%)}
.section-head{display:flex; justify-content:space-between; align-items:end; margin-bottom:18px; gap:16px}
.section-head h2{font-size:22px; font-weight:800; letter-spacing:-0.8px; color:#0f172a}
.section-head p{font-size:12px; color:#64748b; font-weight:500}
.product-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px}
.card{background:white; border:1px solid #e2e8f0; border-radius:16px; overflow:hidden; transition:all 0.2s; cursor:pointer}
.card:hover{transform:translateY(-3px); box-shadow:0 12px 30px rgba(15,23,42,0.08); border-color:#cbd5e1}
.card-img{height:200px; background:#f8fafc; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden}
.card-img-inner{width:86%; height:86%; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:42px}
.card-badge{position:absolute; top:10px; left:10px; font-size:10px; font-weight:800; letter-spacing:0.7px; padding:5px 8px; border-radius:999px}
.badge-new{background:#0f172a; color:white}
.badge-sale-sm{background:#ef4444; color:white}
.card-body{padding:14px}
.card-cat{font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#0ea5e9; margin-bottom:4px}
.card-title{font-size:13px; font-weight:700; line-height:1.3; color:#0f172a; min-height:34px; margin-bottom:8px}
.card-title a:hover{color:#0ea5e9}
.card-price{font-size:13px; font-weight:800; color:#0f172a}
.card-price s{font-weight:600; color:#94a3b8; margin-right:6px; font-size:12px}
.card-price small{font-weight:600; color:#64748b; font-size:11px}
.card-actions{display:flex; gap:8px; margin-top:10px}
.btn-sm{flex:1; padding:8px; border-radius:999px; font-size:12px; font-weight:700; text-align:center; border:1px solid #e2e8f0; background:white; display:inline-block}
.btn-sm.dark{background:#0f172a; color:white; border-color:#0f172a}
.info-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px}
.info-card{background:#f8fafc; border:1px solid #e2e8f0; border-radius:16px; padding:18px; display:flex; gap:12px; align-items:start}
.info-icon{width:40px; height:40px; background:white; border:1px solid #e2e8f0; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.info-card h4{font-size:13px; font-weight:800; margin-bottom:4px}
.info-card p{font-size:12px; color:#64748b; line-height:1.5}
footer{margin-top:40px; background:#0f172a; color:#cbd5e1; padding:40px 0 0}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; padding-bottom:32px}
.footer-brand h3{color:white; font-size:16px; font-weight:800; letter-spacing:-0.5px}
.footer-brand p{font-size:13px; color:#94a3b8; margin-top:10px; line-height:1.6; max-width:360px}
.footer-col h4{color:white; font-size:12px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:14px}
.footer-col ul{list-style:none; display:flex; flex-direction:column; gap:9px; font-size:13px; color:#94a3b8}
.footer-col a:hover{color:white}
.footer-bottom{border-top:1px solid #1e293b; padding:18px 0; display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#64748b; flex-wrap:wrap; gap:12px}
@media(max-width:1024px){
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .main{grid-template-columns:220px 1fr}
  .hero-grid{grid-template-columns:1fr}
  .hero-img{height:300px}
}
@media(max-width:768px){
  nav{display:none}
  .search-box{display:none}
  .main{grid-template-columns:1fr}
  .sidebar{display:none}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:32px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .header-inner{height:66px}
}
@media(max-width:480px){
  .product-grid{grid-template-columns:1fr 1fr; gap:12px}
  .card-img{height:160px}
}