/* ============================================================
   PRISSYDELUXE — FINAL STYLE.CSS (Dior-inspired)
   Drop into: /css/style.css
   CTA vertical placement set to 25% (choice B)
   Variables at top — tweak sizes / fonts globally here.
   ============================================================ */

:root{
  --base-font: "Inter", sans-serif;
  --serif: "Cormorant Garamond", serif;
  --black: #111;
  --muted: #777;
  --bg: #fff;
  --transition: .35s ease;
  --hero-btn-bottom-percent: 25%;    /* <-- B = 25% */
  --hero-btn-side-offset: 48px;
  --hero-btn-font: 19px;
  --page-hero-h1: 56px;
  --page-hero-p: 20px;
  --footer-font: 16px;
  --container-width: 92%;
}

/* ============================================================
   1. GLOBAL RESET + BASE
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;width:100%;
  background:var(--bg);
  font-family:var(--base-font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:var(--black);
  overflow-x:hidden;
}
img{max-width:100%;display:block;transition:var(--transition)}
.container{width:var(--container-width);max-width:1400px;margin:0 auto;padding:0 12px}

/* small animation helpers */
.fade-in{animation:fadeIn .9s ease forwards}
.slide-up{animation:slideUp .75s ease forwards}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
a,button,input,select,textarea{transition:var(--transition);outline:none}

/* ============================================================
   2. NAVIGATION
   ============================================================ */
nav{
  position:fixed;top:0;left:0;width:100%;padding:18px 0;
  display:flex;justify-content:center;
  background:rgba(255,255,255,0.65);backdrop-filter:blur(10px);
  z-index:1200;opacity:0;pointer-events:none;transition:opacity .35s ease;
}
nav.nav-visible{opacity:1;pointer-events:auto}
.nav-inner{width:var(--container-width);max-width:1400px;display:flex;justify-content:space-between;align-items:center}
.nav-left,.nav-center,.nav-right{display:flex;align-items:center;gap:14px}
.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{color:var(--black);text-decoration:none;font-size:15px;letter-spacing:1px}
.nav-logo{width:120px;height:auto}
.nav-actions{display:flex;gap:12px;align-items:center}
.icon-btn{background:transparent;border:0;cursor:pointer}

/* small cart bubble */
.cart-bubble{display:inline-block;margin-left:8px;background:#000;color:#fff;padding:4px 8px;border-radius:20px;font-size:12px}

/* ============================================================
   3. HOMEPAGE SPLIT HERO (bg-1 & bg-2)
   Buttons placed absolutely inside each panel using CSS vars.
   ============================================================ */
.hero-split{display:flex;height:100vh;width:100%;position:relative;overflow:hidden}
.hero-panel{
  flex:1;position:relative;display:flex;justify-content:center;align-items:center;
  padding:0 48px;background-size:cover;background-position:center;min-height:100%;
}

/* Alignments for inner content if needed (we center logo externally) */
.hero-panel.left{align-items:flex-end}
.hero-panel.right{align-items:flex-start}

/* Hero CTA (absolute placement per panel) */
.hero-btn{
  position:absolute;
  bottom:var(--hero-btn-bottom-percent);
  padding:14px 36px;border-radius:40px;
  background:rgba(255,255,255,0.58);
  border:1px solid rgba(0,0,0,0.75);
  backdrop-filter:blur(6px);
  color:var(--black);
  font-family:var(--serif);
  font-size:var(--hero-btn-font);
  letter-spacing:1.4px;text-decoration:none;cursor:pointer;
  transition:transform .42s cubic-bezier(.19,1,.22,1),box-shadow .42s ease;
}

/* Button offset - left panel button placed to the RIGHT side, right panel to the LEFT side */
.hero-panel.left .hero-btn{right:var(--hero-btn-side-offset);left:auto}
.hero-panel.right .hero-btn{left:var(--hero-btn-side-offset);right:auto}

.hero-btn:hover{background:#000;color:#fff;transform:translateY(-6px) scale(1.03);box-shadow:0 14px 35px rgba(0,0,0,0.25)}

/* Centered logo floating above split */
.hero-center-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:15;pointer-events:none}
.hero-center-logo img{width:220px;filter:drop-shadow(0 6px 22px rgba(0,0,0,0.18))}

/* ============================================================
   4. INTERNAL PAGES HERO (bg-3, bg-4, bg-5 ...)
   Big centered logo + title + demo text
   ============================================================ */
.page-hero{
  height:92vh;min-height:560px;display:flex;justify-content:center;align-items:center;
  background-size:cover;background-position:center;position:relative;color:#fff;padding-top:40px;text-align:center;
}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.35),rgba(0,0,0,0.55));z-index:1}
.hero-inner{position:relative;z-index:2;max-width:900px;padding:0 18px;animation:slideUp .9s ease forwards}
.page-hero-logo{width:140px;margin:0 auto 18px;filter:drop-shadow(0 4px 10px rgba(0,0,0,0.25))}
.page-hero h1{font-family:var(--serif);font-size:var(--page-hero-h1);letter-spacing:2px;margin-bottom:8px}
.page-hero p{font-size:var(--page-hero-p);opacity:.95}

/* Utility for overlap (login/signup overlapping hero) */
.overlap-section{max-width:720px;margin:-120px auto 60px;padding:28px;position:relative;z-index:6;display:flex;justify-content:center}

/* ============================================================
   5. PRODUCTS & FEATURED GRID
   ============================================================ */
.section-title{text-align:center;font-family:var(--serif);font-size:34px;margin-bottom:26px}
.featured{padding:100px 0}
.featured-grid,.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;width:92%;max-width:1200px;margin:0 auto}
.product-card{text-align:center;padding:12px;border-radius:10px;border:1px solid rgba(0,0,0,0.05);background:rgba(255,255,255,0.02);transition:transform .25s ease}
.product-card:hover{transform:translateY(-6px)}
.product-card img{height:320px;object-fit:cover;border-radius:8px;width:100%}
.product-actions{display:flex;gap:10px;justify-content:center;margin-top:12px}
.btn-outline{padding:10px 18px;border-radius:30px;border:1px solid rgba(0,0,0,0.12);background:transparent;text-decoration:none;color:#111}
.btn-classic{padding:10px 18px;border-radius:30px;background:#000;color:#fff;text-decoration:none}

/* ============================================================
   6. SEARCH + PAGINATION
   ============================================================ */
.search-row{display:flex;justify-content:center;gap:12px;margin:18px auto}
.search-row input[type="search"]{width:420px;max-width:80%;padding:10px 12px;border-radius:8px;border:1px solid rgba(0,0,0,0.08);font-size:16px}
.pagination{display:flex;justify-content:center;gap:10px;margin:26px 0}
.pagination button{padding:10px 16px;border-radius:8px;border:none;background:#000;color:#fff;cursor:pointer}
.pagination button[disabled]{background:#aaa;opacity:.5;cursor:default}

/* ============================================================
   7. MINI CART
   ============================================================ */
.mini-cart{position:relative}
.mini-cart-panel{position:absolute;top:44px;right:0;width:320px;padding:14px;display:none;background:#fff;border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,0.12);animation:fadeIn .35s ease}
.mini-cart-panel.open{display:block}
.mini-cart-item{display:flex;gap:10px;padding:8px 6px;border-bottom:1px solid rgba(0,0,0,0.04)}

/* ============================================================
   8. FOOTER — fixed font + spacing
   ============================================================ */
.site-footer{background:#f8f8f8;padding:70px 0 50px;margin-top:60px;font-size:var(--footer-font) !important}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;width:92%;max-width:1400px;margin:0 auto}
.footer-grid a{color:#111;text-decoration:none;font-size:15px}
.footer-title{font-family:var(--serif);font-size:20px;margin-bottom:14px}
.footer-logo{width:95px;display:block;margin-bottom:10px}

/* ============================================================
   9. AUTH (login / signup) layout & animations
   ============================================================ */
.auth-body{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;background:#fff;padding:46px 14px 80px;animation:fadeIn .8s ease}
.auth-card{width:100%;max-width:520px;padding:40px;border-radius:12px;background:#fff;box-shadow:0 20px 50px rgba(0,0,0,0.08);text-align:center;transform:translateY(12px);animation:slideUp .7s ease forwards;margin:0 auto}
.auth-card h1,.auth-card h2{font-family:var(--serif);font-size:28px;margin-bottom:18px}
.auth-field input{width:100%;padding:12px;border-radius:8px;border:1px solid #ddd;font-size:16px}
.auth-btn{width:100%;padding:12px;background:#000;color:#fff;border-radius:8px;border:none;cursor:pointer;font-family:var(--serif);font-weight:600;font-size:16px}
.auth-btn:hover{background:#333}

/* ============================================================
   10. ABOUT / CONTENT spacing fix
   ============================================================ */
.content-section{padding:90px 0 180px !important}

/* ============================================================
   11. RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .featured-grid,.product-grid{grid-template-columns:repeat(2,1fr)}
  .page-hero h1{font-size:44px}
  .page-hero-logo{width:110px}
  .hero-btn{font-size:16px;padding:12px 28px}
}
@media (max-width:640px){
  .hero-split{flex-direction:column;height:auto}
  .hero-panel{height:70vh;padding:20px 24px;justify-content:center;padding-bottom:80px}
  .hero-panel.left .hero-btn{right:20px;left:auto}
  .hero-panel.right .hero-btn{left:20px;right:auto}
  .nav-links{display:none}
  .product-grid{grid-template-columns:1fr}
  .page-hero-logo{width:90px}
  .page-hero h1{font-size:34px}
  .auth-card{width:92%;padding:28px}
  .content-section{padding:60px 16px 120px !important}
}

/* ============================================================
   Notes: change variables at top to adjust fonts/hero button placement
   ============================================================ */