:root{
  --cream:#FFF9EC;
  --ink:#3B2A55;
  --coral:#FF6F5E;
  --sun:#FFC93C;
  --sky:#4EB3C9;
  --grass:#6FBE5A;
  --bubblegum:#FF8FB1;
  --paper:#FFFFFF;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Quicksand', sans-serif; background:var(--cream); color:var(--ink); overflow-x:hidden;}
h1,h2,h3,.display{font-family:'Baloo 2', cursive;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

.float-shape{position:absolute; pointer-events:none; opacity:0.9; animation:bob 6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r,0deg));} 50%{transform:translateY(-16px) rotate(var(--r,0deg));}}
@media (prefers-reduced-motion: reduce){
  .float-shape{animation:none;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* ---------- Header ---------- */
header{position:sticky; top:0; z-index:50; background:var(--cream); border-bottom:3px dashed var(--ink);}
.nav-wrap{max-width:1200px; margin:0 auto; padding:16px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:10px; font-size:1.5rem; font-weight:700; color:var(--ink);}
.brand .dot{width:14px;height:14px;border-radius:50%; background:var(--coral); display:inline-block;}
nav ul{list-style:none; display:flex; gap:26px; font-weight:600; font-size:0.98rem; align-items:center;}
nav ul li a{position:relative; padding:4px 2px;}
nav ul li a::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:3px; background:var(--sun); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; border-radius:3px;}
nav ul li a:hover::after{transform:scaleX(1);}
.nav-cart{display:flex; align-items:center; gap:6px; font-weight:700;}
.nav-cart .badge-count{background:var(--coral); color:#fff; border-radius:999px; font-size:0.75rem; padding:2px 8px;}

@media (max-width:760px){
  nav ul{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    width:100%;
  }

  .nav-wrap{
    justify-content:center;
  }
}

/* ---------- Search bar ---------- */
.search-form{display:flex; align-items:center; gap:8px; flex:1; max-width:360px;}
.search-form input{flex:1; border:2.5px solid var(--ink); border-radius:999px; padding:8px 16px; font-family:'Quicksand'; font-weight:600; font-size:0.9rem;}
.search-form button{border:2.5px solid var(--ink); background:var(--sun); border-radius:999px; padding:8px 14px; font-weight:700; cursor:pointer;}

/* ---------- Hero ---------- */
.hero{position:relative; padding:90px 28px 140px; text-align:center; overflow:hidden;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,201,60,0.35), transparent 40%),
    radial-gradient(circle at 88% 15%, rgba(78,179,201,0.3), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(255,143,177,0.3), transparent 45%);
}

.hero-eyebrow{display:inline-block; font-family:'Baloo 2'; font-weight:600; font-size:0.95rem; letter-spacing:0.08em; background:var(--paper); border:2.5px solid var(--ink); border-radius:999px; padding:6px 18px; box-shadow:4px 4px 0 var(--ink); margin-bottom:28px; transform:rotate(-2deg);}
.hero h1{font-size:clamp(2.6rem, 6.5vw, 5rem); line-height:1.05; font-weight:800; color:var(--ink); max-width:16ch; margin:0 auto 22px;}
.hero h1 .accent{color:var(--coral); display:inline-block; position:relative;}
.hero h1 .accent svg{position:absolute; left:-4%; bottom:-14px; width:108%; height:auto;}
.hero p.sub{max-width:46ch; margin:0 auto 40px; font-size:1.2rem; font-weight:600; color:#5B4A78;}
.hero-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

.btn{font-family:'Baloo 2'; font-weight:700; font-size:1.05rem; padding:14px 30px; border-radius:999px; border:3px solid var(--ink); cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; box-shadow:5px 5px 0 var(--ink); display:inline-block;}
.btn:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink);}
.btn:active{transform:translate(1px,1px); box-shadow:3px 3px 0 var(--ink);}
.btn-primary{background:var(--coral); color:#fff;}
.btn-secondary{background:var(--paper); color:var(--ink);}
.btn-small{padding:10px 22px; font-size:0.9rem; box-shadow:4px 4px 0 var(--ink);}
.btn-small:hover{box-shadow:6px 6px 0 var(--ink);}

.shelf-divider{display:block; width:100%; height:70px; margin-top:-2px;}

/* ---------- Shelves / Categories ---------- */
.shelves{max-width:1200px; margin:0 auto; padding:20px 28px 100px;}
.shelves-head{text-align:center; margin-bottom:52px;}
.shelves-head h2{font-size:clamp(1.9rem,4vw,2.6rem); font-weight:800;}
.shelves-head p{color:#5B4A78; font-weight:600; margin-top:8px;}

.grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:28px;
}

@media (max-width:650px){
  .grid{
    grid-template-columns:1fr;
  }
}

.card{position:relative; background:var(--paper); border:3px solid var(--ink); border-radius:22px; padding:30px 24px 26px; box-shadow:6px 6px 0 var(--ink); transition:transform .2s ease, box-shadow .2s ease; overflow:hidden;}
.card:hover{transform:translate(-4px,-6px) rotate(-1deg); box-shadow:10px 10px 0 var(--ink);}
.card .badge{width:58px;height:58px; border-radius:16px; display:flex;align-items:center;justify-content:center; font-size:1.7rem; margin-bottom:18px; border:2.5px solid var(--ink); transform:rotate(-4deg);}
.card h3{font-size:1.35rem; font-weight:700; margin-bottom:8px;}
.card p{font-size:0.96rem; color:#5B4A78; font-weight:600; line-height:1.45; margin-bottom:16px;}
.card .go{font-family:'Baloo 2'; font-weight:700; font-size:0.92rem; display:inline-flex; align-items:center; gap:6px;}
.card .go svg{width:16px;height:16px; transition:transform .2s ease;}
.card:hover .go svg{transform:translateX(5px);}

.c1 .badge{background:var(--sun);}
.c2 .badge{background:var(--sky); color:#fff;}
.c3 .badge{background:var(--bubblegum);}
.c4 .badge{background:var(--grass); color:#fff;}
.c5 .badge{background:var(--coral); color:#fff;}
.c6 .badge{background:var(--sun);}
.c7 .badge{background:var(--bubblegum);}
.c8 .badge{background:var(--sky); color:#fff;}
.c9 .badge{background:var(--grass); color:#fff;}

.card::before{content:""; position:absolute; top:-18px; right:-18px; width:60px;height:60px; background:var(--sun); border-radius:50%; opacity:0.16;}

/* ---------- Our Story Preview ---------- */

.story-preview{
  padding:60px 28px;
  display:flex;
  justify-content:center;
  background:linear-gradient(180deg, #FFF9EC 0%, #FFF3F6 100%);
}

.story-preview-inner{
  width:100%;
  max-width:760px;
  margin:0 auto;
  background:#FFFFFF;
  border:3px solid var(--ink);
  border-radius:28px;
  box-shadow:8px 8px 0 var(--ink);
  padding:42px 44px;
  text-align:center;
}

.story-preview h2{
  font-size:2rem;
  margin-bottom:16px;
  line-height:1.2;
}

.story-preview p{
  max-width:620px;
  margin:0 auto 16px;
  color:#5B4A78;
  font-weight:600;
  line-height:1.7;
  font-size:1rem;
}

.story-preview .btn{
  margin-top:10px;
  max-width:100%;
  padding:13px 24px;
  font-size:0.98rem;
}

@media (max-width:760px){
  .story-preview{
    padding:40px 20px;
  }

  .story-preview-inner{
    padding:30px 22px;
  }

  .story-preview h2{
    font-size:1.7rem;
  }
}

/* ---------- Individual Shelf Sections ---------- */
.shelf{max-width:1200px; margin:0 auto; padding:56px 28px; border-top:3px dashed var(--ink); scroll-margin-top:90px;}
.shelf-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:32px; flex-wrap:wrap;}
.shelf-head h2{font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; margin-bottom:6px;}
.shelf-head p{color:#5B4A78; font-weight:600; max-width:60ch;}

.book-grid{grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:20px;}
.book-card{background:var(--paper); border:3px solid var(--ink); border-radius:18px; padding:16px; text-align:center; box-shadow:5px 5px 0 var(--ink); transition:transform .2s ease, box-shadow .2s ease; position:relative;}
.book-card:hover{transform:translate(-3px,-4px); box-shadow:8px 8px 0 var(--ink);}
.book-cover{
  width:100%;
  height:240px;
  border:none;
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  background:transparent;
  overflow:visible;
  padding:0;
}

.book-cover img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:240px;
  object-fit:contain;
  object-position:center;
  border-radius:6px;
  display:block;
}

.book-card h4{font-family:'Baloo 2'; font-size:1rem; font-weight:700; margin-bottom:4px;}
.book-card .price{font-weight:700; color:var(--coral); font-size:0.95rem; margin-bottom:10px;}
.book-card .btn-small{width:100%; text-align:center;}

/* ---------- Forms (auth, account, admin) ---------- */
.form-page{max-width:480px; margin:60px auto; padding:0 28px;}
.form-card{background:var(--paper); border:3px solid var(--ink); border-radius:22px; padding:36px 30px; box-shadow:6px 6px 0 var(--ink);}
.form-card h1{font-size:1.8rem; margin-bottom:8px;}
.form-card .sub{color:#5B4A78; font-weight:600; margin-bottom:24px; font-size:0.95rem;}
.field{margin-bottom:18px;}
.field label{display:block; font-weight:700; margin-bottom:6px; font-size:0.9rem;}
.field input, .field select, .field textarea{width:100%; border:2.5px solid var(--ink); border-radius:14px; padding:11px 14px; font-family:'Quicksand'; font-weight:600; font-size:0.95rem; background:var(--paper);}
.field textarea{resize:vertical; min-height:100px;}
.field-row{display:flex; gap:14px;}
.field-row .field{flex:1;}
.checkbox-field{display:flex; align-items:center; gap:8px; font-weight:600;}
.checkbox-field input{width:auto;}
.form-error{background:#FFE3E0; border:2px solid var(--coral); color:#7A2E23; padding:12px 16px; border-radius:14px; font-weight:600; margin-bottom:18px; font-size:0.9rem;}
.form-success{background:#E5F6E0; border:2px solid var(--grass); color:#2E5A1E; padding:12px 16px; border-radius:14px; font-weight:600; margin-bottom:18px; font-size:0.9rem;}
.form-footer-note{margin-top:18px; text-align:center; font-weight:600; font-size:0.9rem; color:#5B4A78;}
.btn-full{width:100%; text-align:center;}

/* ---------- Cart / Product page tables ---------- */
.page-wrap{max-width:1000px; margin:0 auto; padding:50px 28px 100px;}
.page-wrap h1{font-size:clamp(1.8rem,4vw,2.4rem); margin-bottom:28px;}

.cart-row{display:flex; align-items:center; gap:18px; background:var(--paper); border:3px solid var(--ink); border-radius:18px; padding:16px; margin-bottom:16px; box-shadow:4px 4px 0 var(--ink); flex-wrap:wrap;}
.cart-row img{width:64px; height:86px; object-fit:cover; border-radius:8px; border:2px solid var(--ink);}
.cart-row .info{flex:1; min-width:150px;}
.cart-row .info h4{font-family:'Baloo 2'; font-weight:700;}
.qty-controls{display:flex; align-items:center; gap:8px;}
.qty-controls button{width:32px;height:32px; border-radius:50%; border:2.5px solid var(--ink); background:var(--sun); font-weight:800; cursor:pointer;}
.qty-controls input{width:44px; text-align:center; border:2px solid var(--ink); border-radius:8px; padding:6px; font-weight:700;}
.cart-summary{background:var(--paper); border:3px solid var(--ink); border-radius:18px; padding:24px; box-shadow:6px 6px 0 var(--ink); margin-top:24px;}
.cart-summary .total-row{display:flex; justify-content:space-between; font-weight:800; font-size:1.2rem; margin-bottom:18px;}

.product-layout{display:grid; grid-template-columns:320px 1fr; gap:40px;}
@media (max-width:760px){ .product-layout{grid-template-columns:1fr;} }
.product-cover{border:3px solid var(--ink); border-radius:22px; box-shadow:6px 6px 0 var(--ink); overflow:hidden; aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; background:var(--paper); font-size:4rem;}
.product-cover img{width:100%;height:100%;object-fit:contain;object-position:center;}
.product-price{font-size:1.6rem; font-weight:800; color:var(--coral); margin:12px 0;}
.stars{color:var(--sun); font-size:1.1rem; letter-spacing:2px;}

.review-card{background:var(--paper); border:3px solid var(--ink); border-radius:16px; padding:18px; margin-bottom:14px;}

/* ---------- Admin ---------- */
.admin-shell{display:grid; grid-template-columns:220px 1fr; min-height:70vh;}
@media (max-width:760px){ .admin-shell{grid-template-columns:1fr;} }
.admin-sidebar{border-right:3px dashed var(--ink); padding:28px 18px;}
.admin-sidebar a{display:block; font-weight:700; padding:10px 12px; border-radius:12px; margin-bottom:4px;}
.admin-sidebar a:hover{background:var(--sun);}
.admin-main{padding:36px 28px;}
.admin-table{width:100%; border-collapse:collapse; background:var(--paper); border:3px solid var(--ink); border-radius:16px; overflow:hidden;}
.admin-table th, .admin-table td{padding:12px 14px; text-align:left; border-bottom:2px solid var(--cream); font-size:0.9rem;}
.admin-table th{background:var(--sun); font-family:'Baloo 2'; font-weight:700;}
.admin-table tr:last-child td{border-bottom:none;}
.status-pill{display:inline-block; padding:4px 12px; border-radius:999px; font-weight:700; font-size:0.78rem; border:2px solid var(--ink);}
.status-paid{background:var(--grass); color:#fff;}
.status-pending{background:var(--sun);}
.status-failed, .status-cancelled{background:var(--coral); color:#fff;}
.admin-actions{display:flex; gap:8px; flex-wrap:wrap;}
.stat-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:18px; margin-bottom:32px;}
.stat-card{background:var(--paper); border:3px solid var(--ink); border-radius:16px; padding:18px; box-shadow:4px 4px 0 var(--ink);}
.stat-card .num{font-family:'Baloo 2'; font-size:1.8rem; font-weight:800;}

/* ---------- Footer ---------- */

footer{
  background:var(--ink);
  color:var(--cream);
  padding:60px 28px 34px;
  text-align:center;
}

/* ---------- Join the Bookshelf ---------- */

.footer-newsletter{
  width:100%;
  max-width:760px;
  margin:0 auto 42px;
  padding-bottom:42px;
  border-bottom:1px solid rgba(255,255,255,0.18);
}

.footer-newsletter h3{
  font-family:'Baloo 2', cursive;
  font-size:1.7rem;
  font-weight:800;
  line-height:1.2;
  color:var(--cream);
  margin:0 0 8px;
}

.footer-newsletter p{
  max-width:600px;
  margin:0 auto 22px;
  color:#C9BEDD;
  font-size:0.95rem;
  font-weight:600;
  line-height:1.6;
}

.newsletter-form{
  width:100%;
  max-width:620px;
  margin:0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
}

.newsletter-form input{
  flex:1;
  min-width:0;
  height:48px;
  padding:0 20px;
  background:#FFFFFF;
  color:var(--ink);
  border:2.5px solid var(--cream);
  border-radius:999px;
  font-family:'Quicksand', sans-serif;
  font-size:0.95rem;
  font-weight:600;
  outline:none;
}

.newsletter-form input::placeholder{
  color:#8A8099;
}

.newsletter-form input:focus{
  border-color:var(--sky);
  box-shadow:0 0 0 3px rgba(78,179,201,0.18);
}

.newsletter-form button{
  height:48px;
  padding:0 24px;
  border:2.5px solid var(--cream);
  border-radius:999px;
  background:var(--sun);
  color:var(--ink);
  font-family:'Baloo 2', cursive;
  font-size:0.95rem;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.newsletter-form button:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 0 rgba(0,0,0,0.18);
}

.newsletter-form button:active{
  transform:translateY(0);
  box-shadow:none;
}

footer .brand{
  justify-content:center;
  color:var(--cream);
  margin:0 auto 12px;
}

footer .dot{
  background:var(--sun);
}

footer .footer-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  margin:18px 0;
  flex-wrap:wrap;
  font-weight:600;
}

footer .footer-links a{
  color:var(--cream);
  transition:color .15s ease;
}

footer .footer-links a:hover{
  color:var(--sun);
}

footer > p{
  margin:0;
  font-weight:600;
  color:#C9BEDD;
  font-size:0.95rem;
}

@media (max-width:650px){

  footer{
    padding:46px 20px 30px;
  }

  .footer-newsletter{
    margin-bottom:34px;
    padding-bottom:34px;
  }

  .footer-newsletter h3{
    font-size:1.5rem;
  }

  .footer-newsletter p{
    font-size:0.9rem;
    margin-bottom:20px;
  }

  .newsletter-form{
    flex-direction:column;
    gap:10px;
    width:100%;
  }

  .newsletter-form input,
  .newsletter-form button{
    width:100%;
  }

  footer .footer-links{
    gap:18px;
  }
}

a:focus-visible, button:focus-visible{outline:3px solid var(--sky); outline-offset:3px;}

.empty-state{text-align:center; padding:60px 20px; color:#5B4A78; font-weight:600;}

.shipping-banner{
  background:var(--sun);
  color:var(--ink);
  text-align:center;
  font-weight:700;
  padding:8px 16px;
  border-bottom:2px solid var(--ink);
  font-size:0.92rem;
  width:100%;
}

.free-shipping-message {
  margin: 12px 0 18px;
  font-weight: 700;
  color: var(--coral);
  text-align: center;
  width: 100%;
}

/* ==================================================
   NEW HEADER LAYOUT
   ================================================== */

.header-main-row {
  position: relative;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 28px 8px;
  box-sizing: border-box;
}

/* Keep business name truly centered on the page */
.header-center-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.header-center-brand .brand {
  font-family: 'Baloo 2', cursive;
  font-size: 1.6rem;
  font-weight: 800;
  white-space: nowrap;
}

/* Membership / Login / Cart */
.header-actions ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  margin: 0;
  padding: 0;
}

/* Search bar underneath */
.header-search-row {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 6px 28px 16px;
  box-sizing: border-box;
}

.header-search-row .search-form {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* ---------- MOBILE ---------- */

@media (max-width:760px){

  .header-main-row{
    position:relative;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
    width:100%;
    max-width:none;
    min-height:70px;
    padding:12px 14px;
    box-sizing:border-box;
  }

  .header-center-brand{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:auto;
    margin:0;
    text-align:center;
  }

  .header-center-brand .brand{
    font-size:1.25rem;
    white-space:nowrap;
  }

  .header-actions{
    width:auto;
    margin-left:auto;
    z-index:2;
  }

  .header-actions ul{
    display:flex !important;
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:nowrap;
    gap:10px;
    margin:0;
    padding:0;
  }

  .header-actions a{
    font-size:0.78rem;
    white-space:nowrap;
  }

  .nav-cart{
    white-space:nowrap;
  }

  .header-search-row{
    width:100%;
    display:flex;
    justify-content:center;
    padding:6px 14px 14px;
    box-sizing:border-box;
  }

  .header-search-row .search-form{
    width:100%;
    max-width:100%;
    margin:0 auto;
  }
}

/* ---------- FINAL BOOK CARD OVERRIDE ---------- */

.book-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:34px 28px;
}

.book-grid .book-card{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  text-align:left !important;
  display:block !important;
}

.book-grid .book-card:hover{
  transform:translateY(-3px);
  box-shadow:none !important;
}

.book-grid .book-cover{
  width:100%;
  height:300px;
  margin-bottom:16px;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.book-grid .book-cover img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  border-radius:0 !important;
}

.book-grid .book-info{
  text-align:left;
}

.book-grid .book-info h4{
  font-family:'Quicksand', sans-serif;
  font-size:1.05rem;
  font-weight:600;
  line-height:1.35;
  margin:0 0 8px;
  color:var(--ink);
}

.book-grid .book-author{
  margin:0 0 8px;
  color:var(--sky);
  font-weight:600;
}

.book-grid .book-format{
  margin:0 0 8px;
  color:var(--ink);
  font-weight:700;
}

.book-grid .book-price-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.book-grid .book-price-row .price{
  font-size:1.15rem;
  font-weight:700;
  color:var(--ink);
}

.book-grid .original-price{
  text-decoration:line-through;
  color:#888;
}

.book-grid .book-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.book-grid .book-cover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

@media (max-width:1000px){

  .header-main-row{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 16px 10px;
  }

  .header-center-brand{
    position:static !important;
    left:auto !important;
    transform:none !important;
    width:100%;
    display:flex;
    justify-content:center;
    text-align:center;
    margin:0;
  }

  .header-actions{
    width:100%;
    display:flex;
    justify-content:center;
    margin:0;
  }

  .header-actions ul{
    display:flex !important;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
    margin:0;
    padding:0;
  }

  .header-actions a,
  .header-actions button{
    font-size:0.9rem;
  }
}

/* ---------- My Account Dashboard ---------- */

.account-page-title{
  font-family:'Baloo 2', cursive;
  margin-bottom:28px;
}

.account-layout{
  display:grid;
  grid-template-columns:240px minmax(0, 1fr);
  gap:36px;
  align-items:start;
}

.account-sidebar{
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:20px;
  box-shadow:5px 5px 0 var(--ink);
  padding:12px;
  position:sticky;
  top:150px;
}

.account-nav-item{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:14px 16px;
  border-radius:12px;
  transition:background .2s ease, transform .2s ease;
}

.account-nav-item:hover{
  background:var(--cream);
  transform:translateX(3px);
}

.account-nav-item.active{
  background:var(--sun);
}

.account-nav-title{
  font-family:'Baloo 2', cursive;
  font-size:1rem;
  font-weight:700;
  color:var(--ink);
}

.account-nav-meta{
  font-size:.78rem;
  font-weight:600;
  color:#7A6B91;
}

.account-logout-form{
  margin:0;
}

.account-nav-button{
  border:none;
  background:transparent;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
}

.account-content{
  min-width:0;
}

.account-section-card{
  margin-bottom:40px;
}

.account-section-title{
  font-family:'Baloo 2', cursive;
  font-size:1.5rem;
  margin-bottom:6px;
}

.account-section-sub{
  color:#5B4A78;
  font-weight:600;
  margin-bottom:24px;
}

.account-orders-section{
  scroll-margin-top:180px;
}

.account-orders-table-wrap{
  overflow-x:auto;
}

@media (max-width:850px){

  .account-layout{
    grid-template-columns:1fr;
  }

  .account-sidebar{
    position:static;
  }

  .account-sidebar{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
  }

  .account-logout-form{
    display:contents;
  }

}

@media (max-width:520px){

  .account-sidebar{
    grid-template-columns:1fr;
  }

}
/* ---------- Newsletter Popup ---------- */

.newsletter-popup{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:9999;

  width:min(390px, calc(100vw - 32px));

  background:#FFFFFF;
  color:var(--ink);

  border:2px solid var(--ink);
  border-radius:18px;

  box-shadow:6px 6px 0 rgba(59,42,85,0.22);

  padding:20px 46px 20px 20px;

  display:flex;
  align-items:flex-start;
  gap:12px;
}

.newsletter-popup-icon{
  font-size:1.35rem;
  line-height:1.2;
}

.newsletter-popup-content{
  flex:1;
}

.newsletter-popup-content strong{
  display:block;

  font-family:'Baloo 2', cursive;
  font-size:1.05rem;
  font-weight:800;

  margin-bottom:3px;
}

.newsletter-popup-content p{
  margin:0;

  color:#6E617F;

  font-size:0.86rem;
  font-weight:600;
  line-height:1.45;
}

.newsletter-popup-close{
  position:absolute;
  top:9px;
  right:11px;

  border:none;
  background:transparent;

  color:#7A6B91;

  font-size:1.45rem;
  line-height:1;

  cursor:pointer;
}

.newsletter-popup-close:hover{
  color:var(--ink);
}

.newsletter-popup-error{
  border-color:var(--coral);
}

@media (max-width:520px){

  .newsletter-popup{
    left:16px;
    right:16px;
    bottom:16px;

    width:auto;
  }

}