:root{
    --bg:#0a0f13; --bg2:#0e2630; --panel:#0d151b; --line:rgba(255,255,255,.08);
    --text:#eaf0f4; --muted:#9fb2bf; --gold:#f5c84c; --gold2:#cda236; --orange:#ff6a1a; --orange2:#e0520b;
    --green:#8fffa2; --radius:18px; --blue:#1e90ff;
  }
 
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;background:
      radial-gradient(1200px 700px at 50% -10%, var(--bg2) 0%, transparent 60%),
      linear-gradient(180deg,#08141a,var(--bg));
    color:var(--text);font:16px/1.55 Inter,system-ui}
  a{text-decoration:none;color:inherit}
  .bb-container{width:min(1200px,92%);margin-inline:auto}

  /* Header */
  .bb-header{position:sticky;top:0;z-index:40;background:#0a0f13cc;border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
  .bb-header__in{display:flex;align-items:center;gap:16px;padding:14px 0}
  .bb-brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.4px}
  .bb-logo{width:40px;height:40px;object-fit:contain}
  .bb-search{display:flex;align-items:center;gap:8px;margin-left:16px;flex:1}
  .bb-search__input{flex:1;min-width:220px;background:#0b141a;border:1px solid var(--line);border-radius:999px;padding:.65rem .9rem;color:var(--text)}
  .bb-search__btn{all:unset;background:linear-gradient(180deg,#18242c,#101820);border:1px solid var(--line);width:40px;height:40px;border-radius:999px;display:grid;place-items:center;cursor:pointer}
  .bb-toplinks{display:flex;gap:14px;margin-left:10px}
  .bb-toplinks a{opacity:.9}
  .bb-actions{display:flex;gap:10px;margin-left:auto;align-items:center}
  .bb-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-radius:999px;border:1px solid var(--line);background:linear-gradient(180deg,#16222a,#0f1820);cursor:pointer}
  .bb-btn--gold{background:linear-gradient(180deg,var(--gold),var(--gold2));color:#0b0b0b;border:none;font-weight:800}
  .bb-btn--ghost{background:transparent}

  /* Hero */
  .hero{padding:72px 0 26px}
  .hero h1{font-family:Cinzel,serif;font-weight:800;line-height:1.04;font-size:clamp(34px,6vw,60px);margin:0 0 12px}
  .hero p{color:var(--muted);margin:0}

  /* Category strip — compact like your 2nd pic */
  .cat-strip{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin:24px auto 10px}
  .cat{display:grid;grid-template-rows:56px auto;justify-items:center;gap:8px}
  .cat.active{background: rgba(255, 69, 0, 0.7);
    border-radius: 8px;
  padding: 8px;}
  .cat__icon{width:56px;height:56px;border-radius:12px;border:1px solid var(--line);
             background:#101b22 url('/assets/cat/default.jpg') center/cover no-repeat;box-shadow:0 6px 18px rgba(0,0,0,.35)}
  .cat__label{font-family:Cinzel,serif;font-weight:800;font-size:.9rem;letter-spacing:.3px}

  /* Feature cards (4 boxes) */
  .grid{display:grid;gap:18px}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  @media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:640px){.grid-4{grid-template-columns:1fr}}
  .card{background:linear-gradient(180deg,#0f1820,#0b141a);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 20px 40px rgba(0,0,0,.45);position:relative}
  .card:before{content:\"\";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(180deg,rgba(245,200,76,.35),transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
  .card h3{font-family:Cinzel,serif;margin:6px 0}
  .card p{color:var(--muted);margin:0 0 14px}
  .book{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-radius:12px;border:1px solid rgba(245,200,76,.5);background:transparent;color:var(--gold);font-weight:800}

  /* Products grid (few items) */
  .prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  @media (max-width:1000px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:620px){.prod-grid{grid-template-columns:1fr}}
  .prod{background:linear-gradient(180deg,#0f1820,#0b141a);border:1px solid var(--line);border-radius:18px;overflow:hidden}
  .thumb{aspect-ratio:16/10;display:block;background:#0b1318}
  .thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .pbody{padding:14px}
  .meta{color:var(--muted);font-size:.92rem}
  .row{display:flex;align-items:center;justify-content:space-between}
  .price{display:inline-flex;gap:6px;align-items:center;background:#0b1a10;border:1px solid rgba(245,200,76,.35);color:#f7e7a5;padding:.35rem .6rem;border-radius:10px;font-weight:800}

  /* Footer */
  footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);margin-top:28px}
  
  
  
    /* overlay */
  .bb-auth{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.55);z-index:1000}
  .bb-auth.is-open{display:grid}
  /* dialog */
  .bb-auth__panel{width:min(940px,94vw);background:#070b0f;border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden}
  .bb-auth__head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
  .bb-auth__close{all:unset;width:44px;height:44px;border-radius:999px;border:2px solid var(--line);display:grid;place-items:center;cursor:pointer;color:#c9d4db}
  .bb-auth__title{font-family:Cinzel,serif;font-weight:900;font-size:26px;letter-spacing:.3px}
  /* tabs */
  .bb-auth__tabs{display:grid;grid-template-columns:1fr 1fr}
  .bb-auth__tab{border:none;padding:.9rem 1rem;font-weight:800;cursor:pointer;color:#0b0b0b}
  .bb-auth__tab--login{background:linear-gradient(180deg,var(--gold),var(--gold2))}
  .bb-auth__tab--signup{background:linear-gradient(180deg,var(--orange),var(--orange2));}
  .bb-auth__tab[aria-selected="false"]{filter:grayscale(.7) brightness(.75);opacity:.7}
  /* body */
  .bb-auth__body{padding:18px}
  .bb-auth__form{display:none}
  .bb-auth__form.is-active{display:block}
  .bb-field{margin:12px 0}
  .bb-label{display:block;margin:0 0 6px;color:var(--muted);font-size:.95rem}
  .bb-input{width:100%;background:#0b141a;border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;color:var(--text)}
  .bb-submit{display:inline-flex;align-items:center;gap:.5rem;margin-top:16px;padding:.9rem 1.2rem;border-radius:12px;border:none;background:linear-gradient(180deg,#18242c,#101820);color:#ffe6a0;font-weight:900;cursor:pointer}
  .bb-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media (max-width:720px){.bb-row{grid-template-columns:1fr}}

.bb-msg{margin-top:10px;padding:.65rem .8rem;border-radius:10px;
          border:1px solid rgba(255,255,255,.12);background:#0b141a;color:#dfe7ed}
  .bb-msg--ok{border-color:rgba(90,252,122,.35);background:#0d1a12;color:#8fffa2}
  .bb-msg--err{border-color:rgba(255,100,100,.35);background:#1a0e10;color:#ffb0b0}

/* User dropdown */
.bb-user{position:relative}
.bb-user__btn{min-width:120px; justify-content:space-between}
.bb-dd{
  position:absolute; right:0; top:calc(100% + 8px);
  background:#070b0f; border:1px solid var(--line); border-radius:12px;
  min-width:220px; padding:6px; box-shadow:0 20px 50px rgba(0,0,0,.6);
  display:none; z-index:100;
}
.bb-user.is-open .bb-dd{display:block}
.bb-dd__item{
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .8rem; border-radius:10px; color:#eaf0f4;
}
.bb-dd__item:hover{background:#0c141a}
.bb-dd__logout{color:#ffb8b8}
.bb-dd__logout:hover{background:#1a1010}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* Product card hover */
.prod{
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform, box-shadow;
}
.prod:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}

/* Subtle gold highlight on hover */
.prod::before{
  content:"";
  position:absolute; inset:-1px; border-radius:18px; pointer-events:none;
  background: linear-gradient(180deg, rgba(245,200,76,.35), transparent 40%);
  opacity: 0; transition: opacity .25s ease;
}
.prod:hover::before{ opacity: 1; }

/* Image zoom + shiny sweep */
.thumb{ position: relative; overflow:hidden; }        /* ensure the shine stays inside */
.thumb img{ transition: transform .35s ease; will-change: transform; }
.prod:hover .thumb img{ transform: scale(1.06); }

/* Diagonal shine pass */
.thumb::after{
  content:"";
  position:absolute; inset:0; transform: translateX(-120%);
  background: linear-gradient(120deg, transparent 45%, rgba(255,255,255,.25) 50%, transparent 55%);
  transition: transform .7s ease;
}
.prod:hover .thumb::after{ transform: translateX(120%); }

.cart-sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    right: 0;
    background-color: #34495E;
    box-shadow: -2px 0px 5px rgba(0,0,0,0.5);
    z-index: 1000;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.cart-sidebar .close {
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 36px;
    cursor: pointer;
}

.cart-items {
    padding: 10px;
    overflow-y: auto;
    max-height: 70vh;
}

.cart-footer {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    width: 100%; /* or you can remove this line */
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: gray;
    text-decoration: none;
    cursor: pointer;
}.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1301; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
}

.modal-content {
    background-color: #000000;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    position: relative; /* Position relative for stacking */
    z-index: 1002; /* Ensure the modal is above the blur */
}

.btnmodal {
	background-color: #C0392B;
}
.btnmodal:hover,
.btnmodal:focus {
    background-color: #F1C40F;
}

.remove-btn2 {
    flex: 1;
    padding: 10px;
    border: none;
    background-color: #ee5253;
	border-radius: 15px;
    transition: background-color 0.3s ease;
}

.remove-btn2:hover {
    background-color: #ff9f43;
}

.remove-btn23 {
	width: 30%;
    background-color: #ee5253;
	border-radius: 15px;
}

.remove-btn23:hover {
    background-color: #ff9f43;
}



.checkoutbut {
    width: 100%; /* Adjust the width as needed, 50% is just an example */
    background-color: #10ac84;
    border-radius: 15px;
    margin: 0 auto; /* Centers the button */
    display: block; /* Ensures it's treated as a block-level element for centering */
}

.checkoutbut:hover {
    background-color: #10ac84;
}


.view-more{
  display:block;
  width:max-content;
  margin:26px auto 0;
  padding:.9rem 1.6rem;
  border-radius:12px;
  border:1px solid rgba(245,200,76,.45);
  background:linear-gradient(180deg,#18242c,#101820);
  color:#f5d67f;
  font-weight:800;
  letter-spacing:.4px;
  transition:transform .2s,box-shadow .2s;
  text-align:center;
}
.view-more:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 3px rgba(245,200,76,.25);
}

.cat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;                 /* even spacing between items */
  justify-content: center;
}

.cat {
  flex: 0 0 90px;            /* every item EXACTLY 90px wide */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
}

.cat:hover {
  transform: translateY(-6px);
}

.cat__icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #101b22 center/cover no-repeat;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
  margin-bottom: 4px;
  position: relative;
  overflow: hidden;
  transition: transform .35s ease;
}

.cat:hover .cat__icon {
  transform: scale(1.08);
}

/* Shine sweep */
.cat__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 45%,
    rgba(255,255,255,.35) 50%,
    transparent 55%
  );
  transform: translateX(-120%);
  transition: transform .6s ease;
}

.cat:hover .cat__icon::after {
  transform: translateX(120%);
}

.cat__label {
  font-family: Cinzel, serif;
  font-weight: 700;
  font-size: 0.75rem;
  white-space: nowrap;       /* keep in one line */
  overflow: hidden;
  text-overflow: ellipsis;   /* add … if too long */
  max-width: 100%;
  transition: color .25s ease;
}

.cat:hover .cat__label {
  color: var(--gold);
}




/* Slightly smaller text for long labels only */
.cat__label.is-long{ font-size:.76rem; letter-spacing:.1px; }