/* ---------- Buttons ---------- */
  .btn-outline{
    border:1.5px solid var(--gold-dark); color:var(--gold-dark); font-weight:700; font-size:14px; padding:10px 20px;
    border-radius:999px; display:inline-flex; align-items:center; gap:8px; background:transparent;
    transition:background .18s ease, color .18s ease;
  }
  .btn-outline:hover{background:var(--gold-dark); color:#fff;}
  
  /* ---------- Hero ---------- */
  .hero{position:relative; padding:64px 0 0;}

  .hero-band{
    position:relative;
    margin-top:-79px;
    background-image:url("../img/hero-banner.webp");
    background-size:cover;
    background-position:center 32%;
    isolation:isolate;
    overflow:hidden;
  }
  .hero-video-bg{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center 32%;
    pointer-events:none;
  }
  .hero-band::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(100deg, rgba(251,247,239,0.96) 0%, rgba(251,247,239,0.86) 30%, rgba(251,247,239,0.38) 54%, rgba(251,247,239,0.06) 72%);
    pointer-events:none;
  }
  .hero-copy-wrap{position:relative; z-index:1; padding-top:167px; padding-bottom:120px;}
  .hero-copy{max-width:600px;}
  .hero-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  }
  .hero-copy .eyebrow{margin-bottom:18px; display:block;}
  .hero-copy h1{font-size:clamp(38px,4.6vw,58px); line-height:1.06; font-weight:600; letter-spacing:-0.01em;}
  .hero-copy h1 em{
    font-style:italic; color:var(--maroon); font-weight:500;
  }
  .hero-copy p.lede{
    margin-top:22px; font-size:17px; line-height:1.7; color:var(--ink-soft); max-width:44ch;
  }
  .hero-cta{margin-top:32px; display:flex; align-items:center; gap:22px;}
  .dots{display:flex; gap:8px; margin-top:38px;}
  .dots span{width:8px; height:8px; border-radius:50%; background:var(--line); display:block;}
  .dots span.on{width:26px; border-radius:5px; background:var(--gold-dark);}

  .hero-art{position:relative; display:flex; align-items:center; justify-content:center;}
  .hero-art svg{width:100%; height:auto; display:block; filter:drop-shadow(0 30px 40px rgba(43,36,29,0.18));}

  /* Search strip */
  .search-strip{
    background:linear-gradient(135deg, var(--bg-alt) 0%, #FBF3E0 45%, var(--gold-pale) 100%);
    border:1px solid var(--line); border-radius:20px;
    box-shadow:var(--shadow);
    margin:-66px auto 0; padding:25px 15px;
    position:relative; z-index:2;
    text-align:center;
  }
  .search-strip-head{display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:14px; row-gap:8px;}
  .search-strip-head svg{color:var(--gold-dark); flex:none; align-self:center;}
  .search-strip-head h2{font-size:clamp(22px,2.6vw,30px); font-weight:600; color:var(--ink);}
  .search-strip-tag{
    display:inline-flex; align-items:center; gap:14px;
    font-family:"Fraunces",serif; font-style:italic; font-size:14.5px; color:var(--ink-soft); white-space:nowrap;
  }
  .search-strip-tag::before, .search-strip-tag::after{content:""; width:34px; height:1px; background:var(--line); flex:none;}
  .search-strip-form{
    display:flex; align-items:center; gap:12px;
    max-width:769px; margin:20px auto 0;
    background:var(--surface); border:1px solid var(--line); border-radius:999px;
    padding:8px 8px 8px 22px; box-shadow:0 10px 24px -14px rgba(43,36,29,0.25);
  }
  .search-strip-form svg{color:var(--ink-faint); flex:none;}
  .search-strip-submit svg{color:#fff;}
  .search-strip-form input{
    flex:1; min-width:0; border:none; outline:none; background:none; font-family:inherit; font-size:14.5px; color:var(--ink);
  }
  .search-strip-form input::placeholder{color:var(--ink-faint);}
  .search-strip-kbd{
    flex:none; font-family:inherit; font-size:11.5px; font-weight:700; color:var(--ink-faint);
    border:1px solid var(--line); border-radius:8px; padding:3px 7px; background:var(--bg-alt);
  }
  .search-strip-submit{
    flex:none; display:flex; align-items:center; gap:8px; cursor:pointer;
    background:linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%); color:#fff;
    font-weight:700; font-size:14px; padding:12px 22px; border-radius:999px; border:none;
    box-shadow:0 10px 20px -8px rgba(185,126,32,0.55); transition:transform .18s ease;
  }
  .search-strip-submit:hover{transform:translateY(-2px);}
  .search-strip-popular{
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px;
    margin-top:15px; font-size:13px; color:var(--ink-soft);
  }
  .search-strip-popular .label{font-weight:700; color:var(--ink);}
  .search-strip-popular a{
    background:var(--gold-pale); color:var(--gold-dark); font-weight:700; font-size:12.5px;
    padding:6px 16px; border-radius:999px; transition:background .18s ease, color .18s ease;
  }
  .search-strip-popular a:hover{background:var(--gold-dark); color:#fff;}

  /* Feature strip */
  .feature-strip{
    background:var(--surface); border:1px solid var(--line); border-radius:20px;
    box-shadow:var(--shadow);
    margin:44px auto 0; padding:34px 40px;
    display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
    position:relative; z-index:2;
  }
  .feature-item{display:flex; align-items:flex-start; gap:16px;}
  .feature-icon{
    width:52px; height:52px; border-radius:50%; background:var(--gold-pale); color:var(--gold-dark);
    display:flex; align-items:center; justify-content:center; flex:none;
  }
  .feature-item h3{font-family:"Karla",sans-serif; font-size:15.5px; font-weight:800; color:var(--ink);}
  .feature-item p{font-size:13.5px; color:var(--ink-soft); margin-top:4px; line-height:1.5;}

  section{padding:88px 0;}

  /* ---------- Categories ---------- */
  .section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:44px;}
  .section-head.center{flex-direction:column; align-items:center; text-align:center;}
  .section-head h2{font-size:clamp(28px,3vw,38px); font-weight:600; margin-top:10px;}
  .head-divider{display:flex; align-items:center; gap:10px; margin-top:16px; color:var(--gold);}
  .head-divider span{width:34px; height:1px; background:var(--line);}
  .arrow-nav{display:flex; gap:10px;}
  .arrow-nav button{
    width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--surface);
    display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:all .18s ease;
  }
  .arrow-nav button:hover{border-color:var(--gold-dark); color:var(--gold-dark);}

  .cat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  .cat-card{
    position:relative; border-radius:18px; overflow:hidden; aspect-ratio:3/4.1; isolation:isolate;
    box-shadow:var(--shadow); transition:transform .28s ease;
  }
  .cat-card:hover{transform:translateY(-6px);}
  .cat-card .art{position:absolute; inset:0; z-index:0;}
  .cat-card .veil{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(20,16,12,0.05) 0%, rgba(15,12,9,0.78) 82%);
  }
  .cat-card .content{position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; color:#fff;}
  .cat-badge{
    width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.94); color:var(--ink);
    display:flex; align-items:center; justify-content:center; margin-bottom:auto;
  }
  .cat-card h3{font-family:"Fraunces",serif; font-size:19px; font-weight:600; margin-bottom:4px;}
  .cat-card p{font-size:12.5px; color:rgba(255,255,255,0.8); line-height:1.45;}
  .cat-card .browse{
    display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:12.5px; font-weight:700;
    color:var(--gold-pale);
  }

  /* ---------- Trending ---------- */
  .book-row{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px;}
  
  @keyframes pulseRing{
    0%{transform:scale(0.6); opacity:0.75;}
    100%{transform:scale(1.9); opacity:0;}
  }
  
  .price-stack{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;}
  
  .price-original{font-weight:600; font-size:12px; color:var(--ink-faint); text-decoration:line-through; font-variant-numeric:tabular-nums;}
  .price-discount-badge{
    background:var(--gold-pale); color:var(--gold-dark); font-weight:800; font-size:10px;
    letter-spacing:0.02em; padding:2px 7px; border-radius:999px; white-space:nowrap;
  }
  .not-for-sale-badge{
    background:var(--bg-alt); color:var(--ink-soft); font-weight:700; font-size:10.5px;
    letter-spacing:0.02em; padding:4px 10px; border-radius:999px; border:1px solid var(--line); white-space:nowrap;
  }
  .out-of-stock-badge{
    background:#FBE9E7; color:#B84A3E; font-weight:700; font-size:10.5px;
    letter-spacing:0.02em; padding:4px 10px; border-radius:999px; border:1px solid #F0C9C3; white-space:nowrap;
  }

  /* ---------- Newsletter ---------- */
  .newsletter{
    position:relative;
    background:linear-gradient(120deg, var(--bg-alt) 0%, #EFE2C8 100%);
    border-radius:24px; padding:20px 38px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:36px;
    border:1px solid var(--line);
  }
  .mail-badge{
    width:64px; height:64px; border-radius:50%; background:var(--gold-dark); color:#fff; flex:none;
    display:flex; align-items:center; justify-content:center;
  }
  .newsletter-row{display:flex; align-items:center; gap:24px; flex:1; min-width:0;}
  .newsletter-copy{flex:0 1 340px; min-width:0;}
  .newsletter h3{font-size:20px; font-weight:600; white-space:nowrap;}
  .newsletter p{font-size:14px; color:var(--ink-soft); margin-top:5px; max-width:40ch;}
  .subscribe-form{display:flex; gap:10px; flex:none;}
  .subscribe-form input{
    padding:13px 18px; border-radius:999px; border:1px solid var(--line); background:var(--surface);
    font-size:14px; width:200px; font-family:inherit; color:var(--ink);
  }
  .subscribe-form input::placeholder{color:var(--ink-faint);}
  .newsletter{overflow:visible;}
  .newsletter-art-spacer{width:250px;}
  .newsletter-art-img{
    position:absolute; right:8px; bottom:-18px;
    height:195px; width:auto; z-index:2; pointer-events:none;
    filter:drop-shadow(0 12px 18px rgba(43,36,29,0.20));
  }

  @media (max-width: 980px){

    .newsletter-section{display:none;}
    .search-strip{padding:32px 26px;}
    .feature-strip{grid-template-columns:repeat(2,1fr);}
    .cat-row{grid-template-columns:repeat(3,1fr);}
    .book-row{grid-template-columns:repeat(3,minmax(0,1fr));}
    
    .hero-grid{grid-template-columns:1fr;}
    .hero-art{order:-1;}
    
    .newsletter{grid-template-columns:1fr; text-align:center;}
    .newsletter-row{flex-direction:column; align-items:center;}
    /* .newsletter-copy's flex-basis:340px is a WIDTH in the desktop
       row layout, but flex-basis tracks the main axis -- once the row
       above switches to a column, that same 340px is read as a target
       HEIGHT instead, leaving a tall empty gap under the heading/text
       before the form. Reset it so it just sizes to its content. */
    .newsletter-copy{flex:none; width:100%;}
    .newsletter h3{white-space:normal;}
    .newsletter-art-img, .newsletter-art-spacer{display:none;}
    .subscribe-form{justify-content:center;}
  }
  @media (max-width: 620px){
    .cat-row{grid-template-columns:repeat(2,1fr);}
    .book-row{grid-template-columns:repeat(2,minmax(0,1fr));}

    .search-strip{padding:26px 18px;}
    .search-strip-tag::before, .search-strip-tag::after{display:none;}
    .search-strip-tag{white-space:normal; text-align:center;}
    .search-strip-form{flex-wrap:wrap; border-radius:22px; padding:14px 16px;}
    .search-strip-kbd{display:none;}
    .search-strip-submit{order:2; width:100%; justify-content:center; margin-top:4px;}
    .feature-strip{grid-template-columns:1fr; padding:28px;}

    .subscribe-form{flex-direction:column; width:100%;}
    .subscribe-form input{width:100%;}
    .section-head{flex-direction:column; align-items:flex-start;}

  }