:root{
      --bg-light:#ffffff;
      --bg-dark:#1a1f36;
      --bg-darker:#0f1419;
      --text-dark:#1a1f36;
      --text-light:#ffffff;
      --text-muted:#6b7280;
      --accent-gold:#f59e0b;
      --accent-hover:#d97706;
      --navy:#1e3a8a;
      --charcoal:#374151;
      --border-light:#e5e7eb;
      --shadow-sm:0 2px 8px rgba(0,0,0,0.08);
      --shadow-md:0 4px 16px rgba(0,0,0,0.12);
      --shadow-lg:0 8px 32px rgba(0,0,0,0.16);
      --shadow-hover:0 12px 40px rgba(0,0,0,0.2);
      --green:#10b981;
      --danger:#ef4444;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{
      margin:0;
      font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      background:var(--bg-light);
      color:var(--text-dark);
      line-height:1.6;
      overflow-x:hidden;
      max-width:100vw;
    }
    html{
      overflow-x:hidden;
      max-width:100%;
    }
    
    /* ===== STICKY NAVIGATION BAR ===== */
    .topbar{
      position:sticky;
      top:0;
      z-index:100;
      background:rgba(255,255,255,0.95);
      backdrop-filter:blur(16px);
      border-bottom:1px solid #e8edf2;
      box-shadow:0 1px 3px rgba(0,0,0,0.04);
    }
    .topbar-inner{
      max-width:1400px;
      margin:0 auto;
      padding:16px 24px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
      flex-wrap:nowrap;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      text-decoration:none;
      color:inherit;
      transition:transform 0.2s ease;
      flex-shrink:0;
      position:relative;
      z-index:3;
      pointer-events:auto;
    }
    .brand:hover{transform:scale(1.02)}
    .brand-badge{
      width:44px;
      height:44px;
      border-radius:12px;
      background:linear-gradient(135deg,var(--navy),#3b82f6);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:800;
      font-size:16px;
      box-shadow:var(--shadow-md);
    }
    .brand h1{
      margin:0;
      font-size:20px;
      font-family:"Playfair Display",serif;
      font-weight:700;
      color:var(--text-dark);
    }
    .search-bar{
      position:relative;
      max-width:480px;
      flex:1 1 auto;
      margin:0 16px;
      pointer-events:none;
      z-index:1;
    }
    .search-bar input{
      width:100%;
      padding:12px 48px 12px 20px;
      border:2px solid var(--border-light);
      border-radius:50px;
      font-size:15px;
      font-family:'Inter',sans-serif;
      transition:all 0.3s ease;
      background:#f9fafb;
      pointer-events:auto;
    }
    .search-bar input:focus{
      outline:none;
      border-color:var(--navy);
      background:#fff;
      box-shadow:0 0 0 4px rgba(30,58,138,0.1);
      position:relative;
      z-index:2;
    }
    .search-bar-icon{
      position:absolute;
      right:18px;
      top:50%;
      transform:translateY(-50%);
      width:18px;
      height:18px;
      color:#64748b;
      pointer-events:none;
      z-index:2;
    }
    .top-actions{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:12px;
      flex-shrink:0;
      position:relative;
      z-index:3;
      pointer-events:auto;
    }
    .top-actions-wrap{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:12px;
      flex-shrink:0;
      position:relative;
      z-index:3;
    }
    .topbar-hamburger{
      display:none;
      flex-direction:column;
      justify-content:center;
      gap:5px;
      width:44px;
      height:44px;
      padding:10px;
      border:none;
      border-radius:8px;
      background:#f1f5f9;
      cursor:pointer;
      flex-shrink:0;
    }
    .topbar-hamburger span{
      display:block;
      width:22px;
      height:2px;
      background:#0f172a;
      border-radius:2px;
      transition:transform 0.25s ease, opacity 0.25s ease;
    }
    .topbar-hamburger.is-open span:nth-child(1){
      transform:translateY(7px) rotate(45deg);
    }
    .topbar-hamburger.is-open span:nth-child(2){
      opacity:0;
    }
    .topbar-hamburger.is-open span:nth-child(3){
      transform:translateY(-7px) rotate(-45deg);
    }
    .topbar-drawer{
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:nowrap;
    }
    .nav-link-home{
      text-decoration:none;
      white-space:nowrap;
    }
    .nav-link{
      text-decoration:none;
      color:#475569;
      font-weight:600;
      font-size:14px;
      padding:8px 16px;
      border-radius:6px;
      transition:all 0.2s ease;
      white-space:nowrap;
      position:relative;
      z-index:3;
      pointer-events:auto;
      letter-spacing:0.01em;
    }
    .nav-link:hover{
      background:#f8fafb;
      color:#0f172a;
    }
    .cart-btn{
      background:#0f172a;
      color:#fff;
      border:none;
      padding:10px 24px;
      border-radius:6px;
      font-weight:700;
      font-size:13px;
      cursor:pointer;
      transition:all 0.3s ease;
      box-shadow:0 2px 8px rgba(15,23,42,0.1);
      white-space:nowrap;
      position:relative;
      z-index:3;
      pointer-events:auto;
      letter-spacing:0.02em;
    }
    .cart-btn:hover{
      background:#1e293b;
      transform:translateY(-1px);
      box-shadow:0 4px 12px rgba(15,23,42,0.15);
    }
    .cart-btn:active{
      transform:translateY(0);
    }
    
    /* ===== HERO SECTION (FEATURED BOOK) - LUXURY MINIMAL ===== */
    .hero-section{
      max-width:1400px;
      margin:40px auto 0;
      padding:32px 24px;
      background:var(--bg-primary, #f8fafb);
      border-radius:0;
    }
    .hero-container{
      background:var(--bg-elevated, #ffffff);
      border-radius:12px;
      padding:0;
      display:grid;
      grid-template-columns:480px 1fr;
      gap:0;
      align-items:stretch;
      box-shadow:var(--shadow-sm, 0 2px 12px rgba(0,0,0,0.06));
      border:1px solid var(--border-strong, #e8edf2);
      overflow:hidden;
    }
    .hero-image{
      position:relative;
      display:flex;
      justify-content:center;
      align-items:center;
      background:linear-gradient(180deg, var(--product-stage-bg, #f5f7f9) 0%, var(--product-stage-bg-end, #eef1f5) 100%);
      padding:48px 40px;
      border-right:1px solid var(--border-strong, #e8edf2);
    }
    /* Wrapper for cover img — no extra “card” when showing a book (placeholder styles only with .hero-placeholder) */
    .hero-media{
      width:100%;
      max-width:340px;
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:center;
      background:transparent;
      border:none;
      box-shadow:none;
      border-radius:0;
    }
    .hero-book-cover{
      max-width:100%;
      width:auto;
      border-radius:2px;
      box-shadow:0 16px 40px rgba(15,23,42,0.14),
                 0 6px 16px rgba(15,23,42,0.08);
      transition:transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                 box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      background:transparent;
      border:none;
      object-fit:contain;
      max-height:min(440px, 52vh);
      cursor:pointer;
    }
    .hero-book-cover:hover{
      transform:translateY(-6px);
      box-shadow:0 22px 56px rgba(15,23,42,0.18),
                 0 10px 24px rgba(15,23,42,0.1);
    }
    .hero-placeholder{
      width:100%;
      max-width:340px;
      aspect-ratio:2/3;
      background:linear-gradient(135deg,#f1f5f9,#e2e8f0);
      border-radius:8px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:72px;
      font-weight:300;
      color:#cbd5e1;
      box-shadow:0 12px 32px rgba(15,23,42,0.1);
      border:1px dashed rgba(15,23,42,0.08);
    }
    .hero-content{
      background:var(--bg-elevated, #ffffff);
      padding:80px 60px;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .hero-content h2{
      margin:0 0 12px;
      font-size:48px;
      font-family:"Playfair Display",serif;
      font-weight:700;
      color:#0f172a;
      line-height:1.2;
      letter-spacing:-0.02em;
    }
    .hero-author{
      font-size:16px;
      color:#64748b;
      margin-bottom:32px;
      font-weight:500;
      text-transform:uppercase;
      letter-spacing:0.1em;
    }
    .hero-rating{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-bottom:32px;
    }
    .stars{
      color:#fbbf24;
      font-size:16px;
      letter-spacing:2px;
    }
    .rating-text{
      color:#94a3b8;
      font-size:13px;
      font-weight:500;
      margin-left:4px;
    }
    .hero-price{
      display:flex;
      align-items:baseline;
      gap:16px;
      margin-bottom:24px;
    }
    .hero-price::before{
      content:'';
      display:none;
    }
    .hero-price{
      font-size:52px;
      font-weight:800;
      color:#0f172a;
      letter-spacing:-0.03em;
    }
    .hero-price::after{
      content:'Best Value';
      font-size:11px;
      font-weight:700;
      color:#10b981;
      background:#d1fae5;
      padding:4px 10px;
      border-radius:4px;
      text-transform:uppercase;
      letter-spacing:0.08em;
      vertical-align:super;
      margin-left:12px;
    }
    .hero-stock{
      display:inline-flex;
      align-items:center;
      gap:8px;
      background:transparent;
      color:#10b981;
      padding:0;
      border-radius:0;
      font-size:14px;
      font-weight:600;
      margin-bottom:40px;
      box-shadow:none;
      border:none;
    }
    .hero-stock::before{
      content:'●';
      font-size:8px;
      color:#10b981;
    }
    .hero-cta{
      background:#0f172a;
      color:#ffffff;
      border:none;
      padding:18px 48px;
      border-radius:4px;
      font-size:15px;
      font-weight:700;
      cursor:pointer;
      transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow:0 4px 16px rgba(15,23,42,0.15);
      text-transform:uppercase;
      letter-spacing:0.1em;
      position:relative;
      z-index:2;
      pointer-events:auto;
      border:2px solid #0f172a;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      width:fit-content;
    }
    .hero-cta::before{
      content:'';
      display:none;
    }
    .hero-cta::after{
      content:'→';
      font-size:18px;
      transition:transform 0.3s ease;
    }
    .hero-cta:hover{
      background:#1e293b;
      transform:translateY(-2px);
      box-shadow:0 8px 24px rgba(15,23,42,0.2);
    }
    .hero-cta:hover::after{
      transform:translateX(4px);
    }
    .hero-cta:active{
      transform:translateY(0);
      box-shadow:0 2px 8px rgba(15,23,42,0.15);
    }
    .hero-cta:disabled{
      background:#e2e8f0;
      color:#94a3b8;
      border-color:#e2e8f0;
      cursor:not-allowed;
      transform:none;
      opacity:1;
    }
    
    /* ===== RECENT PRODUCTS SECTION (DARK BACKGROUND) ===== */
    .recent-products-section{
      background:var(--products-section-bg, var(--bg-dark));
      padding:80px 24px;
      margin-top:80px;
    }
    .section-container{
      max-width:1400px;
      margin:0 auto;
    }
    .section-header{
      text-align:center;
      margin-bottom:48px;
    }
    .section-header h3{
      font-size:36px;
      font-family:"Playfair Display",serif;
      font-weight:700;
      color:var(--products-section-heading, var(--text-light));
      margin-bottom:12px;
      letter-spacing:-0.02em;
    }
    .section-header p{
      font-size:16px;
      color:var(--products-section-sub, #94a3b8);
      max-width:600px;
      margin:0 auto;
      font-weight:400;
    }
    .products-grid{
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:24px;
    }
    .product-card{
      background:var(--bg-elevated, #fff);
      border-radius:8px;
      overflow:hidden;
      transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow:var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
      cursor:pointer;
      position:relative;
      border:1px solid var(--border-color, #f1f5f9);
      display:flex;
      flex-direction:column;
      height:100%;
      min-width:0;
    }
    .product-card:hover{
      transform:translateY(-6px);
      box-shadow:0 12px 32px rgba(0,0,0,0.12);
      border-color:#e8edf2;
    }
    .product-image-container{
      width:100%;
      aspect-ratio:2/3;
      overflow:hidden;
      background:var(--product-image-bg, #f3f4f6);
      position:relative;
    }
    .product-image-container img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform 0.4s ease;
    }
    .product-card:hover .product-image-container img{
      transform:scale(1.08);
    }
    .product-placeholder{
      width:100%;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:32px;
      font-weight:800;
      color:#d1d5db;
      background:linear-gradient(135deg,#f3f4f6,#e5e7eb);
    }
    .product-info{
      padding:16px;
      display:flex;
      flex-direction:column;
      flex:1;
    }
    .product-title{
      font-size:14px;
      font-family:"Inter",sans-serif;
      font-weight:600;
      color:var(--text-main, #0f172a);
      margin-bottom:8px;
      min-height:40px;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      line-height:1.4;
    }
    .product-price{
      font-size:20px;
      font-weight:800;
      color:var(--accent-navy, #0f172a);
      margin-bottom:12px;
      letter-spacing:-0.02em;
    }
    .product-btn{
      width:100%;
      background:#ffffff;
      color:#0f172a;
      border:none;
      padding:10px 24px;
      border-radius:999px;
      font-weight:700;
      font-size:0.75rem;
      cursor:pointer;
      transition:transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
      position:relative;
      z-index:2;
      pointer-events:auto;
      text-transform:uppercase;
      letter-spacing:0.08em;
      margin-top:auto;
      box-shadow:0 1px 3px rgba(15,23,42,0.1);
    }
    .product-btn:hover{
      background:#f1f5f9;
      transform:scale(1.05);
      box-shadow:0 2px 8px rgba(15,23,42,0.12);
    }
    .product-btn:disabled{
      background:#e2e8f0;
      color:#94a3b8;
      cursor:not-allowed;
      transform:none;
    }
    .product-btn:active{
      transform:translateY(0);
    }
    
    /* ===== CATEGORY CAROUSEL ===== */
    .carousel-section{
      max-width:1400px;
      margin:80px auto;
      padding:0 24px;
    }
    .carousel-header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:40px;
    }
    .carousel-header h3{
      font-size:36px;
      font-family:"Playfair Display",serif;
      font-weight:800;
      color:var(--text-dark);
    }
    .carousel-controls{
      display:flex;
      gap:12px;
    }
    .carousel-arrow{
      width:44px;
      height:44px;
      border-radius:4px;
      background:#fff;
      border:1px solid #e8edf2;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:all 0.3s ease;
      font-size:18px;
      color:#64748b;
      user-select:none;
    }
    .carousel-arrow:hover{
      background:#0f172a;
      color:#fff;
      border-color:#0f172a;
      transform:translateY(-2px);
      box-shadow:0 4px 12px rgba(15,23,42,0.15);
    }
    .carousel-container{
      position:relative;
      overflow:hidden;
    }
    .carousel-track{
      display:flex;
      gap:24px;
      transition:transform 0.5s ease;
    }
    .carousel-item{
      min-width:calc((100% - 96px) / 5);
      background:#fff;
      border-radius:16px;
      overflow:hidden;
      box-shadow:var(--shadow-md);
      transition:all 0.3s ease;
      cursor:pointer;
    }
    .carousel-item:hover{
      transform:translateY(-8px);
      box-shadow:var(--shadow-hover);
    }
    
    /* ===== PROMOTIONAL BANNER ===== */
    .promo-banner{
      max-width:1400px;
      margin:80px auto;
      padding:0 24px;
    }
    .promo-container{
      background:linear-gradient(135deg,var(--navy) 0%,#3b82f6 100%);
      border-radius:24px;
      padding:64px;
      display:grid;
      grid-template-columns:1fr 1.2fr;
      gap:48px;
      align-items:center;
      box-shadow:var(--shadow-lg);
      position:relative;
      overflow:hidden;
    }
    .promo-container::before{
      content:'';
      position:absolute;
      top:-50%;
      right:-20%;
      width:600px;
      height:600px;
      background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%);
      border-radius:50%;
    }
    .promo-image{
      position:relative;
      z-index:1;
      text-align:center;
    }
    .promo-image img{
      width:100%;
      max-width:400px;
      border-radius:16px;
      box-shadow:0 16px 48px rgba(0,0,0,0.3);
    }
    .promo-placeholder{
      width:100%;
      max-width:400px;
      aspect-ratio:3/2;
      background:rgba(255,255,255,0.1);
      border-radius:16px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:64px;
      color:rgba(255,255,255,0.5);
      margin:0 auto;
    }
    .promo-content{
      position:relative;
      z-index:1;
      color:#fff;
    }
    .promo-badge{
      display:inline-block;
      background:var(--accent-gold);
      color:var(--text-dark);
      padding:8px 20px;
      border-radius:50px;
      font-weight:700;
      font-size:13px;
      text-transform:uppercase;
      letter-spacing:1px;
      margin-bottom:20px;
    }
    .promo-content h3{
      font-size:44px;
      font-family:"Playfair Display",serif;
      font-weight:800;
      margin-bottom:16px;
      line-height:1.2;
    }
    .promo-content p{
      font-size:18px;
      line-height:1.7;
      margin-bottom:32px;
      opacity:0.95;
    }
    .promo-cta{
      background:#fff;
      color:var(--navy);
      border:none;
      padding:16px 40px;
      border-radius:50px;
      font-size:16px;
      font-weight:800;
      cursor:pointer;
      transition:all 0.3s ease;
      box-shadow:var(--shadow-md);
      text-transform:uppercase;
      letter-spacing:0.5px;
      position:relative;
      z-index:2;
      pointer-events:auto;
    }
    .promo-cta:hover{
      transform:translateY(-3px);
      box-shadow:var(--shadow-hover);
    }
    .promo-cta:active{
      transform:translateY(-1px);
    }
    
    /* ===== OTHER BOOKS SECTION ===== */
    .other-books-section{
      max-width:1400px;
      margin:80px auto;
      padding:0 24px;
    }
    .other-books-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:32px;
    }
    
    /* ===== CART SIDEBAR ===== */
    .cart-sidebar{
      position:fixed;
      right:-450px;
      top:0;
      height:100vh;
      width:450px;
      background:#fff;
      box-shadow:-8px 0 32px rgba(0,0,0,0.2);
      z-index:200;
      transition:right 0.4s ease;
      overflow-y:auto;
      display:flex;
      flex-direction:column;
    }
    .cart-sidebar.active{
      right:0;
    }
    .cart-header{
      padding:24px;
      border-bottom:2px solid var(--border-light);
      background:var(--bg-dark);
      color:#fff;
      position:sticky;
      top:0;
      z-index:10;
    }
    .cart-header h3{
      font-size:24px;
      font-family:"Playfair Display",serif;
      margin-bottom:8px;
    }
    .close-cart{
      position:absolute;
      right:24px;
      top:24px;
      background:rgba(255,255,255,0.1);
      border:none;
      width:36px;
      height:36px;
      border-radius:50%;
      cursor:pointer;
      font-size:20px;
      color:#fff;
      transition:all 0.2s ease;
    }
    .close-cart:hover{
      background:rgba(255,255,255,0.2);
      transform:rotate(90deg);
    }
    .cart-items{
      flex:1;
      padding:24px;
    }
    .cart-item{
      display:grid;
      grid-template-columns:80px 1fr;
      gap:16px;
      padding:16px;
      border:1px solid var(--border-light);
      border-radius:12px;
      margin-bottom:16px;
      background:#f9fafb;
    }
    .cart-item-image{
      width:80px;
      aspect-ratio:2/3;
      border-radius:8px;
      overflow:hidden;
      background:#e5e7eb;
    }
    .cart-item-image img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .cart-item-details h4{
      font-size:15px;
      font-weight:700;
      margin-bottom:4px;
    }
    .cart-item-price{
      font-size:18px;
      font-weight:800;
      color:var(--navy);
      margin-bottom:12px;
    }
    .qty-controls{
      display:flex;
      align-items:center;
      gap:12px;
    }
    .qty-btn{
      width:32px;
      height:32px;
      border:1px solid var(--border-light);
      background:#fff;
      border-radius:8px;
      cursor:pointer;
      font-weight:700;
      transition:all 0.2s ease;
    }
    .qty-btn:hover{
      background:var(--navy);
      color:#fff;
      border-color:var(--navy);
    }
    .qty-value{
      min-width:40px;
      text-align:center;
      font-weight:700;
    }
    .remove-item{
      margin-top:8px;
      background:none;
      border:none;
      color:var(--danger);
      font-size:13px;
      cursor:pointer;
      font-weight:600;
    }
    .cart-footer{
      border-top:2px solid var(--border-light);
      padding:24px;
      background:#f9fafb;
    }
    .cart-total{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:24px;
      font-size:24px;
      font-weight:900;
    }
    .checkout-form{
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .form-input{
      padding:12px 16px;
      border:2px solid var(--border-light);
      border-radius:12px;
      font-size:14px;
      font-family:'Inter',sans-serif;
      transition:all 0.2s ease;
    }
    .form-input:focus{
      outline:none;
      border-color:var(--navy);
      box-shadow:0 0 0 4px rgba(30,58,138,0.1);
    }
    .checkout-btn{
      background:#0f172a;
      color:#fff;
      border:none;
      padding:14px 24px;
      border-radius:4px;
      font-size:14px;
      font-weight:700;
      cursor:pointer;
      transition:all 0.3s ease;
      box-shadow:0 4px 12px rgba(15,23,42,0.15);
      text-transform:uppercase;
      letter-spacing:0.08em;
      margin-top:8px;
      position:relative;
      z-index:2;
      pointer-events:auto;
    }
    .checkout-btn:hover{
      background:#1e293b;
      transform:translateY(-2px);
      box-shadow:0 6px 16px rgba(15,23,42,0.2);
    }
    .checkout-btn:active{
      transform:translateY(0);
    }
    .checkout-btn:disabled{
      background:#e2e8f0;
      color:#94a3b8;
      cursor:not-allowed;
      transform:none;
    }
    .empty-cart{
      text-align:center;
      padding:48px 24px;
      color:var(--text-muted);
    }
    .empty-cart-icon{
      font-size:64px;
      margin-bottom:16px;
      opacity:0.5;
    }
    
    /* ===== MESSAGES ===== */
    .message{
      padding:12px 16px;
      border-radius:8px;
      font-size:14px;
      margin-top:12px;
      display:none;
    }
    .message.success{
      background:#ecfdf5;
      color:#059669;
      border:1px solid #a7f3d0;
      display:block;
    }
    .message.error{
      background:#fef2f2;
      color:#dc2626;
      border:1px solid#fecaca;
      display:block;
    }
    
    /* ===== MODALS ===== */
    .modal-overlay{
      position:fixed;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background:rgba(0,0,0,0.7);
      backdrop-filter:blur(4px);
      z-index:300;
      display:none;
      align-items:center;
      justify-content:center;
      padding:20px;
    }
    .modal-overlay.active{
      display:flex;
    }
    .modal-content{
      background:#fff;
      border-radius:24px;
      max-width:500px;
      width:100%;
      max-height:90vh;
      overflow-y:auto;
      box-shadow:0 24px 64px rgba(0,0,0,0.4);
      animation:modalSlideIn 0.3s ease;
    }
    @keyframes modalSlideIn{
      from{
        opacity:0;
        transform:translateY(-20px) scale(0.95);
      }
      to{
        opacity:1;
        transform:translateY(0) scale(1);
      }
    }
    .modal-header{
      padding:24px;
      border-bottom:2px solid var(--border-light);
      position:relative;
    }
    .modal-header h3{
      font-size:24px;
      font-family:"Playfair Display",serif;
      font-weight:800;
      margin:0;
    }
    .close-modal{
      position:absolute;
      right:24px;
      top:24px;
      background:none;
      border:none;
      font-size:32px;
      cursor:pointer;
      color:var(--text-muted);
      transition:all 0.2s ease;
      width:36px;
      height:36px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:50%;
    }
    .close-modal:hover{
      background:#f3f4f6;
      color:var(--text-dark);
      transform:rotate(90deg);
    }
    .modal-body{
      padding:24px;
    }
    .modal-body label{
      display:block;
      font-weight:600;
      margin-bottom:8px;
      font-size:14px;
    }
    .track-option{
      margin-bottom:24px;
    }
    .modal-btn{
      background:var(--accent-gold);
      color:#fff;
      border:none;
      padding:12px 24px;
      border-radius:50px;
      font-size:14px;
      font-weight:700;
      cursor:pointer;
      transition:all 0.3s ease;
      width:100%;
      margin-top:12px;
    }
    .modal-btn:hover{
      background:var(--accent-hover);
      transform:translateY(-2px);
    }
    .order-card{
      background:#f9fafb;
      border:1px solid var(--border-light);
      border-radius:12px;
      padding:16px;
      margin-bottom:12px;
    }
    .order-card h4{
      font-size:16px;
      margin-bottom:8px;
      color:var(--navy);
    }
    .order-detail{
      font-size:13px;
      padding:4px 0;
      display:flex;
      justify-content:space-between;
    }
    .order-status{
      display:inline-block;
      padding:4px 12px;
      border-radius:50px;
      font-size:12px;
      font-weight:700;
      margin-top:8px;
    }
    .order-status.pending{
      background:#fef3c7;
      color:#92400e;
    }
    .order-status.completed{
      background:#d1fae5;
      color:#065f46;
    }
    .order-items{
      margin-top:12px;
      padding-top:12px;
      border-top:1px solid var(--border-light);
    }
    .order-item{
      font-size:13px;
      padding:4px 0;
      color:var(--text-muted);
    }
    
    /* ===== STICKY ADD TO CART BAR - MINIMAL ===== */
    .sticky-cart-bar{
      position:fixed;
      bottom:-80px;
      left:0;
      right:0;
      background:var(--sticky-bar-bg, rgba(255,255,255,0.95));
      backdrop-filter:blur(16px);
      border-top:1px solid var(--border-strong, #e8edf2);
      box-shadow:0 -2px 16px rgba(0,0,0,0.06);
      padding:8px 20px;
      z-index:150;
      transition:bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sticky-cart-bar.visible{
      bottom:0;
    }
    body.has-sticky-cart{
      padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px));
    }
    .sticky-cart-inner{
      max-width:1400px;
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .sticky-book-info{
      display:flex;
      align-items:center;
      gap:12px;
      flex:1;
    }
    .sticky-book-img{
      width:36px;
      height:54px;
      border-radius:3px;
      object-fit:cover;
      box-shadow:0 1px 4px rgba(0,0,0,0.1);
    }
    .sticky-book-details h4{
      font-size:13px;
      font-weight:700;
      color:#0f172a;
      margin:0 0 2px;
      line-height:1.3;
    }
    .sticky-book-details p{
      font-size:11px;
      color:#64748b;
      margin:0;
      text-transform:uppercase;
      letter-spacing:0.05em;
    }
    .sticky-price{
      font-size:20px;
      font-weight:800;
      color:#0f172a;
      letter-spacing:-0.02em;
    }
    .sticky-actions{
      display:flex;
      gap:8px;
      align-items:center;
    }
    .sticky-add-cart{
      background:#ffffff;
      color:#0f172a;
      border:none;
      padding:10px 24px;
      border-radius:999px;
      font-size:0.75rem;
      font-weight:700;
      cursor:pointer;
      text-transform:uppercase;
      letter-spacing:0.08em;
      transition:transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
      white-space:nowrap;
      box-shadow:0 1px 3px rgba(15,23,42,0.12);
    }
    .sticky-add-cart:hover{
      background:#f1f5f9;
      transform:scale(1.05);
      box-shadow:0 2px 8px rgba(15,23,42,0.14);
    }
    .sticky-share-btn{
      background:transparent;
      color:#64748b;
      border:1px solid #e8edf2;
      padding:10px 12px;
      border-radius:4px;
      font-size:16px;
      cursor:pointer;
      transition:all 0.2s ease;
    }
    .sticky-share-btn:hover{
      background:#f8fafb;
      color:#0f172a;
      border-color:#cbd5e1;
    }
    
    /* ===== QUICK VIEW MODAL ===== */
    .quick-view-overlay{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.6);
      backdrop-filter:blur(4px);
      z-index:250;
      display:none;
      align-items:center;
      justify-content:center;
      animation:fadeIn 0.3s ease;
    }
    .quick-view-overlay.active{
      display:flex;
    }
    .quick-view-modal{
      background:#fff;
      border-radius:8px;
      max-width:900px;
      width:90%;
      max-height:90vh;
      overflow-y:auto;
      box-shadow:0 24px 80px rgba(0,0,0,0.3);
      animation:slideUp 0.3s ease;
      position:relative;
    }
    @keyframes slideUp{
      from{opacity:0;transform:translateY(30px)}
      to{opacity:1;transform:translateY(0)}
    }
    @keyframes fadeIn{
      from{opacity:0}
      to{opacity:1}
    }
    .quick-view-content{
      display:grid;
      grid-template-columns:400px 1fr;
      gap:0;
    }
    .quick-view-image{
      background:linear-gradient(180deg, #f5f7f9 0%, #eef1f5 100%);
      padding:48px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-right:1px solid #e8edf2;
    }
    .quick-view-image img{
      max-width:100%;
      border-radius:4px;
      box-shadow:0 12px 40px rgba(0,0,0,0.15);
    }
    .quick-view-details{
      padding:48px;
      position:relative;
    }
    .quick-view-close{
      position:absolute;
      top:20px;
      right:20px;
      background:none;
      border:none;
      font-size:32px;
      cursor:pointer;
      color:#94a3b8;
      width:40px;
      height:40px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:50%;
      transition:all 0.2s ease;
    }
    .quick-view-close:hover{
      background:#f1f5f9;
      color:#0f172a;
      transform:rotate(90deg);
    }
    .quick-view-title{
      font-size:32px;
      font-family:"Playfair Display",serif;
      font-weight:700;
      color:#0f172a;
      margin:0 0 12px;
      line-height:1.3;
      letter-spacing:-0.02em;
      padding-right:50px;
    }
    .quick-view-author{
      font-size:14px;
      color:#64748b;
      text-transform:uppercase;
      letter-spacing:0.1em;
      margin-bottom:24px;
    }
    .quick-view-price{
      font-size:40px;
      font-weight:800;
      color:#0f172a;
      margin-bottom:20px;
      letter-spacing:-0.03em;
    }
    .quick-view-stock{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:#10b981;
      font-size:14px;
      font-weight:600;
      margin-bottom:24px;
    }
    .quick-view-stock::before{
      content:'●';
      font-size:8px;
    }
    .quick-view-description{
      font-size:15px;
      line-height:1.7;
      color:#475569;
      margin-bottom:32px;
      padding-bottom:24px;
      border-bottom:1px solid #e8edf2;
    }
    .quick-view-actions{
      display:flex;
      gap:12px;
    }
    .quick-view-add-cart{
      flex:1;
      background:#0f172a;
      color:#fff;
      border:none;
      padding:16px 32px;
      border-radius:4px;
      font-size:15px;
      font-weight:700;
      cursor:pointer;
      text-transform:uppercase;
      letter-spacing:0.08em;
      transition:all 0.3s ease;
    }
    .quick-view-add-cart:hover{
      background:#1e293b;
      transform:translateY(-2px);
      box-shadow:0 6px 16px rgba(15,23,42,0.2);
    }
    
    /* ===== SHARE BUTTONS ===== */
    .share-buttons{
      display:flex;
      gap:8px;
      margin-top:24px;
      padding-top:24px;
      border-top:1px solid #e8edf2;
    }
    .share-label{
      font-size:13px;
      color:#64748b;
      font-weight:600;
      text-transform:uppercase;
      letter-spacing:0.08em;
      margin-right:8px;
      display:flex;
      align-items:center;
    }
    .share-btn{
      width:40px;
      height:40px;
      border-radius:50%;
      border:1px solid #e8edf2;
      background:#fff;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:18px;
      transition:all 0.3s ease;
    }
    .share-btn:hover{
      transform:translateY(-3px);
      box-shadow:0 4px 12px rgba(0,0,0,0.1);
    }
    .share-btn.whatsapp{background:#25D366;border-color:#25D366;color:#fff}
    .share-btn.whatsapp:hover{background:#20BA5A}
    .share-btn.facebook{background:#1877F2;border-color:#1877F2;color:#fff}
    .share-btn.facebook:hover{background:#166FE5}
    .share-btn.twitter{background:#1DA1F2;border-color:#1DA1F2;color:#fff}
    .share-btn.twitter:hover{background:#1A94DA}
    .share-btn.copy{background:#f1f5f9;color:#64748b}
    .share-btn.copy:hover{background:#e2e8f0;color:#0f172a}
    
    /* ===== IMAGE ZOOM ON HOVER ===== */
    .product-image-container{
      position:relative;
      overflow:hidden;
      cursor:zoom-in;
    }
    .product-image-container:hover img{
      transform:scale(1.15);
    }
    .hero-book-cover{
      cursor:zoom-in;
    }
    
    /* ===== FOOTER ===== */
    .footer{
      background:#0f172a;
      color:#e2e8f0;
      padding:72px 24px 28px;
      margin-top:120px;
      border-top:1px solid #1e293b;
    }
    .footer-content{
      max-width:1400px;
      margin:0 auto;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.5fr 1fr 1fr 1fr;
      gap:48px;
      margin-bottom:44px;
    }
    .footer-brand{
      max-width:360px;
    }
    .footer-brand h3{
      font-size:22px;
      font-family:"Playfair Display",serif;
      font-weight:700;
      color:#f1f5f9;
      margin:0 0 12px;
      letter-spacing:-0.01em;
    }
    .footer-brand p{
      font-size:13px;
      line-height:1.7;
      color:#94a3b8;
      margin-bottom:20px;
    }
    .footer-social{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .social-icon{
      width:38px;
      height:38px;
      border-radius:6px;
      background:#1e293b;
      border:1px solid #334155;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#e2e8f0;
      text-decoration:none;
      font-size:16px;
      transition:all 0.3s ease;
      font-weight:700;
    }
    .social-icon:hover{
      background:#334155;
      color:#fff;
      transform:translateY(-3px);
      border-color:#475569;
      box-shadow:0 4px 12px rgba(0,0,0,0.2);
    }
    .footer-section h4{
      font-size:13px;
      font-weight:700;
      color:#f1f5f9;
      margin:0 0 20px;
      text-transform:uppercase;
      letter-spacing:0.1em;
      position:relative;
      padding-bottom:12px;
    }
    .footer-section h4::after{
      content:'';
      position:absolute;
      bottom:0;
      left:0;
      width:30px;
      height:2px;
      background:#334155;
    }
    .footer-links{
      list-style:none;
      padding:0;
      margin:0;
    }
    .footer-links li{
      margin-bottom:10px;
    }
    .footer-links a{
      color:#94a3b8;
      text-decoration:none;
      font-size:13px;
      transition:all 0.2s ease;
      display:flex;
      align-items:center;
      gap:8px;
    }
    .footer-links a::before{
      content:'→';
      font-size:12px;
      opacity:0;
      transform:translateX(-4px);
      transition:all 0.2s ease;
    }
    .footer-links a:hover{
      color:#fff;
      padding-left:12px;
    }
    .footer-links a:hover::before{
      opacity:1;
      transform:translateX(0);
    }
    .footer-contact{
      list-style:none;
      padding:0;
      margin:0;
    }
    .footer-contact li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      margin-bottom:12px;
      font-size:13px;
      color:#94a3b8;
      line-height:1.6;
    }
    .footer-contact li span:first-child,
    .footer-contact .footer-icon{
      font-size:16px;
      opacity:0.8;
      margin-top:1px;
      min-width:18px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:#94a3b8;
      flex-shrink:0;
    }
    .footer-contact .footer-icon svg{
      width:16px;
      height:16px;
      display:block;
    }
    .newsletter-form{
      margin-top:16px;
    }
    .newsletter-input{
      width:100%;
      padding:12px 16px;
      border-radius:4px;
      border:1px solid rgba(255,255,255,0.1);
      background:rgba(255,255,255,0.05);
      color:#fff;
      font-size:14px;
      margin-bottom:10px;
      transition:all 0.2s ease;
    }
    .newsletter-input:focus{
      outline:none;
      border-color:rgba(255,255,255,0.2);
      background:rgba(255,255,255,0.08);
    }
    .newsletter-input::placeholder{
      color:#64748b;
    }
    .newsletter-btn{
      width:100%;
      padding:12px 20px;
      background:#fff;
      color:#0f172a;
      border:none;
      border-radius:4px;
      font-size:13px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:0.06em;
      cursor:pointer;
      transition:all 0.3s ease;
    }
    .newsletter-btn:hover{
      background:#f1f5f9;
      transform:translateY(-2px);
      box-shadow:0 4px 12px rgba(255,255,255,0.2);
    }
    .footer-bottom{
      padding-top:28px;
      margin-top:8px;
      border-top:1px solid #1e293b;
      display:flex;
      justify-content:space-between;
      align-items:center;
      flex-wrap:wrap;
      gap:16px;
    }
    .footer-bottom p{
      margin:0;
      font-size:12px;
      color:#64748b;
      font-weight:500;
    }
    .footer-bottom-links{
      display:flex;
      gap:20px;
    }
    .footer-bottom-links a{
      color:#64748b;
      text-decoration:none;
      font-size:12px;
      transition:color 0.2s ease;
      font-weight:500;
    }
    .footer-bottom-links a:hover{
      color:#e2e8f0;
    }
    .payment-methods{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .payment-method-item{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:12px 8px;
      background:#1e293b;
      border:1px solid #334155;
      border-radius:6px;
      font-size:12px;
      font-weight:600;
      color:#e2e8f0;
      transition:all 0.3s ease;
      cursor:default;
      text-align:center;
    }
    .payment-method-item:hover{
      background:#334155;
      border-color:#475569;
      transform:translateY(-2px);
      box-shadow:0 4px 12px rgba(0,0,0,0.2);
    }
    .payment-icon{
      font-size:18px;
      opacity:0.9;
    }
    .payment-badge{
      background:#072654;
      color:#fff;
      padding:4px 10px;
      border-radius:4px;
      font-size:12px;
      font-weight:800;
      letter-spacing:0.3px;
      font-family:'Inter',sans-serif;
      box-shadow:0 2px 8px rgba(7,38,84,0.25);
    }
    .payment-label{
      font-size:11px;
      line-height:1.3;
    }
    
    /* ===== RESPONSIVE DESIGN ===== */
    @media (max-width:1200px){
      .products-grid{grid-template-columns:repeat(4,1fr)}
      .carousel-item{min-width:calc((100% - 72px) / 4)}
    }
    @media (max-width:1024px){
      .topbar-inner{
        flex-wrap:wrap;
        gap:12px;
      }
      .brand{
        flex:1 1 auto;
      }
      .search-bar{
        order:3;
        flex:1 1 100%;
        max-width:100%;
        margin:0;
      }
      .top-actions{
        flex:0 0 auto;
        order:2;
      }
      .hero-container{
        grid-template-columns:1fr;
        gap:0;
      }
      .hero-image{
        padding:60px 40px;
        border-right:none;
        border-bottom:1px solid #f1f5f9;
      }
      .hero-content{
        padding:60px 40px;
      }
      .hero-content h2{
        font-size:40px;
      }
      .hero-price{
        font-size:44px;
      }
      .products-grid{grid-template-columns:repeat(3,1fr)}
      .other-books-grid{grid-template-columns:repeat(3,1fr)}
      .promo-container{
        grid-template-columns:1fr;
        padding:40px;
      }
      .carousel-item{min-width:calc((100% - 48px) / 3)}
    }
    @media (max-width:768px){
      .topbar-inner{
        padding:12px 16px;
        flex-wrap:wrap;
        align-items:center;
      }
      .topbar-hamburger{
        display:flex;
      }
      .topbar-drawer{
        display:none;
        position:fixed;
        top:var(--topbar-height, 64px);
        left:0;
        right:0;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        background:rgba(255,255,255,0.98);
        backdrop-filter:blur(16px);
        border-bottom:1px solid #e8edf2;
        box-shadow:0 12px 32px rgba(0,0,0,0.08);
        padding:12px 16px 16px;
        z-index:99;
        max-height:calc(100vh - var(--topbar-height, 64px));
        overflow-y:auto;
      }
      .topbar-drawer.is-open{
        display:flex;
      }
      .topbar-drawer .topbar-controls{
        flex-direction:column;
        align-items:stretch;
        width:100%;
        margin-bottom:8px;
      }
      .topbar-drawer .topbar-control,
      .topbar-drawer .theme-toggle{
        width:100%;
      }
      .topbar-drawer .nav-link{
        display:block;
        width:100%;
        text-align:left;
        padding:12px 14px;
        border-radius:8px;
        border:none;
        background:transparent;
        font-size:15px;
        cursor:pointer;
      }
      .topbar-drawer .nav-link:hover{
        background:#f8fafc;
      }
      .nav-link{
        padding:8px 12px;
        font-size:13px;
      }
      .cart-btn{
        padding:9px 18px;
        font-size:13px;
      }
      .hero-image{
        padding:48px 32px;
      }
      .hero-content{
        padding:48px 32px;
      }
      .hero-content h2{
        font-size:36px;
      }
      .hero-price{
        font-size:40px;
      }
      .hero-author{
        font-size:15px;
      }
      .hero-cta{
        padding:16px 40px;
        font-size:14px;
        width:100%;
      }
      .products-grid{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
        padding:0 4px;
      }
      .products-grid .product-card{
        max-width:100%;
      }
      .product-image-container img{
        max-width:100%;
        object-fit:cover;
      }
      .other-books-grid{grid-template-columns:repeat(2,1fr)}
      .carousel-item{min-width:calc((100% - 24px) / 2)}
      .section-header h3{font-size:32px}
      .cart-sidebar{width:100%;right:-100%}
      
      .sticky-cart-inner{
        flex-wrap:wrap;
        gap:10px;
      }
      .sticky-add-cart{
        min-height:44px;
      }
      body.has-sticky-cart{
        padding-bottom:calc(100px + env(safe-area-inset-bottom, 0px));
      }
      
      /* Quick view responsive for tablets */
      .quick-view-content{
        grid-template-columns:1fr;
      }
      .quick-view-image{
        padding:40px;
        border-right:none;
        border-bottom:1px solid #e8edf2;
      }
      .quick-view-details{
        padding:40px;
      }
      
      /* Footer — single column on phones & tablets */
      .footer-grid{
        grid-template-columns:1fr;
        gap:32px;
      }
      .footer-brand{
        grid-column:auto;
        max-width:100%;
      }
      .footer-section{
        padding-top:8px;
      }
    }
    @media (max-width:640px){
      .topbar-inner{
        padding:10px 12px;
      }
      .brand h1{
        font-size:16px;
      }
      .top-actions{
        gap:6px;
      }
      .nav-link{
        padding:8px 10px;
        font-size:12px;
      }
      .cart-btn{
        padding:8px 16px;
        font-size:12px;
      }
      .modal-content{
        max-width:95%;
        margin:10px;
      }
      .modal-header, .modal-body{
        padding:16px;
      }
      .hero-image{
        padding:40px 24px;
      }
      .hero-content{
        padding:40px 24px;
      }
      .hero-content h2{
        font-size:32px;
      }
      .hero-price{
        font-size:36px;
      }
      .hero-author{
        font-size:14px;
        margin-bottom:24px;
      }
      .hero-rating{
        margin-bottom:24px;
      }
      .stars{
        font-size:15px;
      }
      .rating-text{
        font-size:12px;
      }
      .hero-stock{
        font-size:13px;
        margin-bottom:32px;
      }
      .hero-cta{
        padding:16px 32px;
        font-size:13px;
        letter-spacing:0.08em;
      }
      .products-grid{grid-template-columns:1fr}
      .other-books-grid{grid-template-columns:1fr}
      .carousel-item{min-width:calc(100%)}
      .section-header h3{font-size:28px}
      
      .sticky-cart-bar{
        padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
      }
      .sticky-cart-inner{
        flex-direction:column;
        gap:12px;
        align-items:stretch;
      }
      .sticky-book-info{
        justify-content:flex-start;
        min-width:0;
      }
      .sticky-book-details h4{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
      .sticky-price{
        font-size:22px;
        text-align:left;
      }
      .sticky-actions{
        width:100%;
        display:flex;
        gap:8px;
      }
      .sticky-add-cart{
        flex:1;
        width:100%;
        min-height:44px;
        padding:12px 16px;
      }
      .sticky-share-btn{
        flex-shrink:0;
        min-width:44px;
        min-height:44px;
      }
      body.has-sticky-cart{
        padding-bottom:calc(120px + env(safe-area-inset-bottom, 0px));
      }
      
      /* Quick view responsive */
      .quick-view-modal{
        width:95%;
        max-height:95vh;
      }
      .quick-view-content{
        grid-template-columns:1fr;
      }
      .quick-view-image{
        padding:32px 24px;
        border-right:none;
        border-bottom:1px solid #e8edf2;
      }
      .quick-view-details{
        padding:32px 24px;
      }
      .quick-view-title{
        font-size:24px;
        padding-right:40px;
      }
      .quick-view-price{
        font-size:32px;
      }
      .quick-view-actions{
        flex-direction:column;
      }
      .share-buttons{
        flex-wrap:wrap;
      }
      
      /* Footer responsive */
      .footer{
        padding:60px 24px 24px;
      }
      .footer-grid{
        grid-template-columns:1fr;
        gap:40px;
      }
      .footer-brand{
        max-width:100%;
      }
      .footer-bottom{
        flex-direction:column;
        text-align:center;
      }
      .footer-bottom-links{
        flex-direction:column;
        gap:12px;
      }
      .payment-methods{
        grid-template-columns:1fr 1fr;
      }
      .promo-container{padding:24px}
      .promo-content h3{font-size:32px}
    }

    /* Professional payment status modal (must stay at root — not inside @media) */
    .pay-notice-overlay{
      position:fixed;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      background:rgba(15,23,42,0.55);
      backdrop-filter:blur(3px);
      z-index:1400;
      padding:18px;
    }
    .pay-notice-card{
      width:min(94vw,520px);
      background:#fff;
      border-radius:16px;
      box-shadow:0 25px 70px rgba(2,6,23,0.35);
      border:1px solid #e5e7eb;
      overflow:hidden;
    }
    .pay-notice-head{
      display:flex;
      align-items:center;
      gap:12px;
      padding:16px 18px;
      border-bottom:1px solid #eef2f7;
      background:#f8fafc;
    }
    .pay-notice-icon{
      width:34px;
      height:34px;
      border-radius:999px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:16px;
      font-weight:700;
      color:#fff;
      flex-shrink:0;
    }
    .pay-notice-icon.success{background:#10b981;}
    .pay-notice-icon.error{background:#ef4444;}
    .pay-notice-icon.warn{background:#f59e0b;}
    .pay-notice-icon.info{background:#3b82f6;}
    .pay-notice-title{
      margin:0;
      font-size:18px;
      font-weight:800;
      color:#0f172a;
    }
    .pay-notice-body{
      padding:16px 18px 8px;
      color:#334155;
      font-size:14px;
      line-height:1.65;
    }
    .pay-notice-meta{
      margin-top:10px;
      border:1px solid #e5e7eb;
      border-radius:10px;
      background:#f8fafc;
      padding:10px 12px;
      font-size:13px;
      color:#475569;
      display:grid;
      gap:4px;
    }
    .pay-notice-actions{
      padding:14px 18px 18px;
      display:flex;
      justify-content:flex-end;
      gap:10px;
    }
    .pay-notice-btn{
      border:none;
      border-radius:10px;
      padding:10px 16px;
      font-weight:700;
      font-size:13px;
      cursor:pointer;
      background:#0f172a;
      color:#fff;
      transition:all 0.2s ease;
    }
    .pay-notice-btn:hover{transform:translateY(-1px);opacity:0.96;}