:root{--ink:#2f2925;--brown:#6b4f3f;--terracotta:#c9977a;--sand:#ead9c6;--sage:#8ba88a;--ivory:#f6efe9;--paper:#fffdfb}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);padding-bottom:76px}
.topline{background:var(--brown);color:#fff;font-size:.78rem;letter-spacing:.03em}
.site-header{background:rgba(255,253,251,.96);border-bottom:1px solid #eee4dc}
.brand{display:flex;align-items:center;gap:.65rem;color:var(--brown);font-weight:750;line-height:1.05}
.brand:hover{color:var(--terracotta)}
.brand img{object-fit:contain}
.brand small{display:block;font-size:.57rem;letter-spacing:.13em;margin-top:.35rem;color:#88786d}
.navbar .nav-link{color:var(--ink)}
.navbar .nav-link:hover{color:var(--brown)}
.hero{background:var(--ivory);border-radius:1.25rem;padding:clamp(2rem,6vw,5rem)}
.btn-primary,.btn-dark{background:var(--brown);border-color:var(--brown)}
.btn-primary:hover,.btn-dark:hover{background:#4d382d;border-color:#4d382d}
.card{border-color:#eee2d8;border-radius:1rem}
.site-footer{background:#2f2925;color:#f6efe9}
.site-footer a{color:#ead9c6}
.mobile-bottom{position:fixed;bottom:0;left:0;right:0;z-index:1030;background:#fffdfb;border-top:1px solid #e9ddd3;display:flex;gap:.5rem;padding:.65rem max(.75rem,env(safe-area-inset-right)) calc(.65rem + env(safe-area-inset-bottom));box-shadow:0 -4px 18px #2f292510}
.mobile-bottom a{flex:1;text-align:center;border-radius:.7rem;padding:.65rem .4rem;text-decoration:none;font-weight:650;font-size:.9rem}
.mobile-bottom .primary{background:var(--brown);color:white}
.mobile-bottom .secondary{border:1px solid var(--brown);color:var(--brown)}
.admin-body{background:#f7f3ef;min-height:100vh;padding-bottom:2rem}
.admin-nav{background:#382b25}
.admin-body .card{background:white}
.admin-body .form-label{font-weight:600;font-size:.92rem}
.admin-body .table{font-size:.92rem}
.admin-body .btn{border-radius:.65rem}
@media(min-width:992px){body{padding-bottom:0}.mobile-bottom{display:none}}

/* Footer mobile navigation */
.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:1030;background:#fffdfb;border-top:1px solid #e9ddd3;display:flex;justify-content:space-around;gap:.25rem;padding:.55rem max(.5rem,env(safe-area-inset-right)) calc(.55rem + env(safe-area-inset-bottom));box-shadow:0 -4px 18px #2f292510}
.mobile-bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.1rem;color:var(--brown);text-decoration:none;font-weight:650;font-size:.78rem}
.mobile-bottom-nav a span{font-size:1.1rem}
.mobile-bottom-nav a small{font-size:.7rem}
@media(min-width:992px){.mobile-bottom-nav{display:none}}

/* Admin panel styling */
.admin-body{background:#f5f1ed!important;color:#2f2925!important}
.admin-body main.container{background:transparent;color:#2f2925}
.admin-body h1,.admin-body h2,.admin-body h3,.admin-body p,.admin-body label,.admin-body .form-label,.admin-body .table,.admin-body .card{color:#2f2925}
.admin-body .admin-nav{background:#3a2b24!important}
.admin-body .admin-nav .navbar-brand,.admin-body .admin-nav .nav-link{color:#fff!important}
.admin-body .admin-nav .nav-link:hover{color:#ead9c6!important}
.admin-body .card{border:1px solid #e4d8ce;box-shadow:0 3px 14px rgba(47,41,37,.045)}
.admin-body .text-muted,.admin-body .text-secondary{color:#65574e!important}
.admin-body .navbar .container{padding-left:.8rem;padding-right:.8rem}

/* Homepage slider — compact, responsive, no oversized banner */
.home-slider{width:100%;max-width:100%;margin-left:auto;margin-right:auto;overflow:hidden;border-radius:12px;background:#f6efe9}
.home-slider .carousel-inner{width:100%;background:#f6efe9}
.home-slider .carousel-item{width:100%}
.home-slider .home-slide{position:relative;width:100%;height:auto;min-height:0;aspect-ratio:20/7;overflow:hidden;background:#f6efe9}
.home-slider .home-slide img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center}
/* Use this when banner text is already included in the image */
.home-slider .home-slide-shade,.home-slider .home-slide-copy{display:none!important}
.home-slider .carousel-indicators{z-index:5;margin-bottom:8px}
.home-slider .carousel-control-prev,.home-slider .carousel-control-next{width:6%}
@media(max-width:576px){
  .home-slider{border-radius:8px}
  .home-slider .home-slide{aspect-ratio:20/7;height:auto;min-height:0}
  .home-slider .carousel-control-prev,.home-slider .carousel-control-next{width:10%}
}

/* Category cards */
.category-link{display:block;color:inherit;height:100%}
.category-card{overflow:hidden;border:1px solid #eee2d8;border-radius:1rem;background:#fffdfb;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.category-link:hover .category-card{transform:translateY(-3px);box-shadow:0 12px 28px rgba(47,41,37,.09);border-color:#c9a58d}
.category-art-visual{min-height:145px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.45rem;background:linear-gradient(135deg,#f6efe9,#ead9c6);color:#6b4f3f}
.category-art-visual span{font-size:3rem;line-height:1.2}
.category-art-visual small{font-size:.66rem;letter-spacing:.16em;font-weight:700;color:#826b5c}
.category-card .card-body{padding:1.1rem}
.category-cta{display:inline-flex;gap:.5rem;align-items:center;color:#6b4f3f;font-weight:700}
.category-card .section-title{color:#2f2925}
.category-card p{font-size:.94rem;line-height:1.5}
@media(min-width:768px){.category-art-visual{min-height:180px}}


/* Mobile navigation fix: compact links, full width, no clipped text */
.site-header { position: sticky; top: 0; z-index: 1040; }
.site-header .navbar { flex-wrap: wrap; }
.site-header .navbar-brand { min-width: 0; max-width: calc(100% - 64px); }
.site-header .navbar-brand > span { min-width: 0; overflow-wrap: anywhere; }
.site-header .navbar-toggler { flex: 0 0 auto; margin-left: auto; }
#mainNav { flex-basis: 100%; width: 100%; }
#mainNav .navbar-nav { width: 100%; align-items: stretch !important; gap: 0 !important; padding-top: .65rem; }
#mainNav .nav-item { width: 100%; }
#mainNav .nav-link {
  display: block;
  width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  padding: .8rem 1rem;
  line-height: 1.35;
  border-bottom: 1px solid #eee2d8;
}
#mainNav .nav-item:last-child .nav-link { border-bottom: 0; }
@media (max-width: 991.98px) {
  .site-header .navbar { padding-top: .7rem !important; padding-bottom: .7rem !important; }
  #mainNav { max-height: calc(100dvh - 105px); overflow-y: auto; overflow-x: hidden; }
  #mainNav .navbar-nav { margin-left: 0 !important; margin-right: 0 !important; }
}
@media (min-width: 992px) {
  #mainNav { flex-basis: auto; width: auto; max-height: none; overflow: visible; }
  #mainNav .navbar-nav { width: auto; padding-top: 0; }
  #mainNav .nav-item { width: auto; }
  #mainNav .nav-link { padding: .5rem .6rem; border-bottom: 0; }
}


/* FINAL MOBILE MENU FIX: prevent left-clipped navigation text */
@media (max-width: 991.98px) {
  .site-header,
  .site-header nav,
  .site-header .navbar,
  .site-header .navbar-collapse,
  .site-header #mainNav {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .site-header .navbar {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow: visible !important;
  }

  .site-header #mainNav {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 0 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .site-header #mainNav .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 8px !important;
    gap: 0 !important;
    transform: none !important;
  }

  .site-header #mainNav .nav-item {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-header #mainNav .nav-link {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-indent: 0 !important;
    transform: none !important;
    line-height: 1.4 !important;
    border-bottom: 1px solid #eee2d8 !important;
  }

  .site-header #mainNav .nav-item:last-child .nav-link {
    border-bottom: 0 !important;
  }
}