/*
Theme Name: Perfumemania
Theme URI: https://perfumemania.shop
Author: Perfumemania
Author URI: https://perfumemania.shop
Description: A luxury, premium-look WordPress theme for perfume reviews with custom post type, ratings, notes, and affiliate buttons.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: perfumemania
Tags: blog, two-columns, custom-colors, custom-logo, featured-images, editor-style
*/

/* Luxury palette */
:root{
  --pm-bg: #0b0b0b;
  --pm-surface: #111111;
  --pm-text: #f5f5f2;
  --pm-muted: #c9c5bd;
  --pm-gold: #c7a34b;
  --pm-gold-2: #e0c36b;
  --pm-border: #222;
}

/* Reset-ish */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--pm-text);
  background:linear-gradient(180deg,#0b0b0b 0%, #131313 100%);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.6;
}
a{color:var(--pm-gold); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; display:block}

/* Typography */
h1,h2,h3,h4{
  font-family: "Playfair Display", Georgia, serif;
  letter-spacing:.2px;
  margin:0 0 .6rem 0;
}
h1{font-size:clamp(2rem, 4vw, 3.2rem)}
h2{font-size:clamp(1.6rem, 3vw, 2.2rem)}
h3{font-size:clamp(1.3rem, 2.2vw, 1.6rem)}
p{margin:0 0 1rem 0; color:var(--pm-muted)}

/* Layout */
.container{max-width:1200px; margin:0 auto; padding:0 20px}
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,11,.7); backdrop-filter: blur(8px);
  border-bottom:1px solid var(--pm-border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.logo a{
  display:flex; align-items:center; gap:10px; color:var(--pm-text); text-decoration:none;
  font-family:"Playfair Display", Georgia, serif; font-weight:700; letter-spacing:.4px;
}
.logo .mark{width:28px;height:28px;border-radius:50%; background:linear-gradient(135deg,var(--pm-gold),var(--pm-gold-2)); display:inline-block}
.menu{display:flex; gap:18px}
.menu a{color:var(--pm-muted); font-weight:500}
.menu a.active, .menu a:hover{color:var(--pm-text)}

.hero{
  padding:70px 0 30px;
  background: radial-gradient(1000px 300px at 50% 0%, rgba(199,163,75,0.15), rgba(0,0,0,0));
}
.hero .tag{display:inline-block; padding:6px 12px; border:1px solid var(--pm-border); border-radius:999px; color:var(--pm-muted); font-size:.85rem}
.hero .cta{display:flex; gap:12px; margin-top:18px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; border-radius:14px; font-weight:600; border:1px solid var(--pm-border);
  background:#0e0e0e; color:var(--pm-text)
}
.btn.gold{background:linear-gradient(135deg,var(--pm-gold),var(--pm-gold-2)); color:#1a1206; border:0}
.btn.ghost{background:transparent}

.grid{display:grid; gap:22px}
.grid.cards{grid-template-columns: repeat(auto-fill, minmax(260px,1fr))}
.card{
  background:linear-gradient(180deg,#101010,#0b0b0b);
  border:1px solid var(--pm-border); border-radius:18px; overflow:hidden;
  transition:.2s box-shadow, .2s transform;
}
.card:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.35)}
.card .thumb{aspect-ratio: 4 / 3; background:#161616; position:relative}
.badges{position:absolute; left:10px; bottom:10px; display:flex; gap:6px; flex-wrap:wrap}
.badge{background:rgba(0,0,0,.6); border:1px solid var(--pm-border); color:var(--pm-muted); font-size:.7rem; padding:4px 8px; border-radius:999px}
.card .body{padding:14px}
.meta{display:flex; gap:10px; align-items:center; color:var(--pm-muted); font-size:.85rem}
.rating{display:flex; align-items:center; gap:6px}

.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.chip{padding:6px 10px; border-radius:999px; border:1px solid var(--pm-border); color:var(--pm-muted); cursor:pointer}
.chip.active{background:rgba(199,163,75,.1); color:var(--pm-text); border-color:var(--pm-gold)}

.pyramid{display:grid; grid-template-columns: repeat(3,1fr); gap:12px}
.box{background:#0e0e0e; border:1px solid var(--pm-border); border-radius:12px; padding:12px}
.pros-cons{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.note{list-style:disc; margin-left:18px}

.post-content{color:var(--pm-muted);}
.post-content h2{margin-top:1.4rem}

.site-footer{border-top:1px solid var(--pm-border); margin-top:50px; padding:40px 0; color:var(--pm-muted)}
.widget-area{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px}
.widget-title{font-weight:700; color:var(--pm-text); margin-bottom:.5rem}

.searchbar{display:flex; gap:10px; margin:10px 0 16px}
.searchbar input{flex:1; padding:10px 12px; border-radius:12px; border:1px solid var(--pm-border); background:#0e0e0e; color:var(--pm-text)}

/* Gutenberg alignment fixes */
.alignwide{max-width:1200px; margin-left:auto; margin-right:auto}
.alignfull{max-width:none}