*{box-sizing:border-box}
html,body{height:100%}
body{background-color:#987641;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:#222;background:#e6cda4;display:flex;flex-direction:column;min-height:100vh}

/* Make footer sit at the bottom even on short pages */
main{flex:1}

/* Give floating WhatsApp button breathing room on small screens */
@media (max-width:768px){main{padding-bottom:90px}}
.container{width:min(1100px,92%);margin:0 auto}
.topbar{position:sticky;top:0;background:#000;border-bottom:1px solid rgba(255,255,255,.12);z-index:10}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:10px}
.brand{display:flex;align-items:center;text-decoration:none}
.logo{height:40px;width:auto;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));transition:transform .18s ease, filter .18s ease}

.brand:hover .logo{transform:translateY(-1px) scale(1.03);filter:drop-shadow(0 10px 22px rgba(0,0,0,.55))}
.nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
\.nav a{color:#fff;text-decoration:none;font-weight:700}
.nav a:hover{opacity:.75}
.nav .btn{padding:8px 12px;border-radius:10px;background:#c2185b;color:#fff}
.nav-toggle{display:none;border:1px solid rgba(255,255,255,.22);background:#000;color:#fff;border-radius:12px;padding:10px 14px;font-size:28px;line-height:1}
@media (max-width:860px){
  .nav{position:fixed;inset:72px 0 auto 0;background:#000;padding:14px;display:none;flex-direction:column;align-items:flex-start;border-bottom:1px solid rgba(255,255,255,.12)}
  body.nav-open .nav{display:flex}
  .nav-toggle{display:block}
}
h1{margin:18px 0 8px}
h3{margin:10px 0}
.card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:14px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:980px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.grid{grid-template-columns:1fr}}
.product{overflow:hidden}
.product img{width:100%;height:190px;object-fit:cover;border-radius:12px;background:#f3f3f3}
.price{font-weight:900;color:#c2185b}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;background:#c2185b;color:#fff;text-decoration:none;border:none;cursor:pointer;font-weight:800}
.btn.secondary{background:#222}
.btn.ghost{background:transparent;color:#222;border:1px solid rgba(0,0,0,.12)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.row{display:flex;gap:14px;align-items:flex-start}
@media (max-width:860px){.row{flex-direction:column}}
.input{width:100%;padding:10px;border-radius:12px;border:1px solid rgba(0,0,0,.14);outline:none}
label{display:block;font-weight:800;margin:10px 0 6px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid rgba(0,0,0,.08);text-align:left;vertical-align:top}
.badge{display:inline-block;padding:5px 10px;border-radius:999px;background:rgba(194,24,91,.12);color:#c2185b;font-weight:900}
.notice{padding:10px 12px;border-radius:12px;background:#fff;border:1px solid rgba(0,0,0,.08);margin:12px 0}
.notice.ok{border-color:rgba(0,150,0,.35)}
.notice.err{border-color:rgba(200,0,0,.35)}
.footer{padding:20px 0;margin-top:26px;border-top:1px solid rgba(255,255,255,.12);background:#000;color:#fff}


/* =====================================
   HERO + SECTIONS
===================================== */
.hero{
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15)),
    url("../images/hero.jpg") center/cover no-repeat;
}
.hero-inner{
  padding: 60px 0;
}
.hero-copy{
  max-width: 680px;
  color: #fff;
}
.hero-copy h1{
  font-size: 52px;
  line-height: 1.05;
  margin-bottom: 10px;
}
.hero-copy p{
  font-size: 20px;
  opacity: .95;
  margin-bottom: 18px;
}
.hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.section{
  padding: 26px 0;
}
.section-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.section-head h2{
  font-size: 22px;
}
.link{
  color:#c2185b;
  text-decoration:none;
  font-weight:700;
}
.link:hover{
  text-decoration:underline;
}

/* Categories */
.cat-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.cat-card{
  display:block;
  text-decoration:none;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:14px;
}
.cat-card:hover{
  transform: translateY(-1px);
}
.cat-name{
  font-weight: 900;
  color:#111;
}
.cat-meta{
  margin-top:6px;
  font-size: 13px;
  color:#666;
}

@media (max-width: 980px){
  .hero-copy h1{ font-size: 44px; }
  .cat-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 720px){
  .hero{ min-height: 360px; }
  .hero-copy h1{ font-size: 36px; }
  .hero-copy p{ font-size: 18px; }
  .cat-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 460px){
  .hero-inner{ padding: 42px 0; }
  .cat-grid{ grid-template-columns: 1fr; }
}

.footer a{color:#fff}


/* FORCE NAV FONT WHITE */
nav,
.navbar,
.navbar a,
.navbar .nav-link,
.navbar .menu-item a {
  color: #ffffff !important;
}

.navbar a:hover,
.navbar .nav-link:hover {
  color: #f1f1f1 !important;
}

.navbar-toggler,
.navbar-toggler-icon {
  color: #ffffff !important;
  filter: invert(1);
}



/* ===== Mobile-friendly admin tables (card rows) ===== */
.table-responsive{width:100%;overflow-x:auto}
.table.table-mobile{width:100%}

/* Actions layout */
.row-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.danger-btn{border-color:rgba(192,57,43,.35);color:#b42318}
.danger-btn:hover{background:rgba(192,57,43,.06)}

/* Status badges */
.badge.success{background:rgba(22,122,63,.12);color:#167a3f}
.badge.danger{background:rgba(180,35,24,.12);color:#b42318}

/* Sticky Add button on mobile */
@media (max-width:768px){
  .add-product-btn{
    position:sticky;
    top:10px;
    z-index:100;
    width:100%;
    text-align:center;
    padding:14px 16px;
    border-radius:14px;
    font-size:16px;
    font-weight:900;
  }

  .table.table-mobile thead{display:none}
  .table.table-mobile,
  .table.table-mobile tbody,
  .table.table-mobile tr,
  .table.table-mobile td{display:block;width:100%}

  .table.table-mobile tr{
    margin-bottom:14px;
    padding:10px;
    border-radius:14px;
    background:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,.06);
  }

  .table.table-mobile td{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:10px;
    border-bottom:1px solid rgba(0,0,0,.08);
  }
  .table.table-mobile td:last-child{border-bottom:none}

  .table.table-mobile td::before{
    content:attr(data-label);
    font-weight:800;
    color:#444;
    padding-right:10px;
  }

  .row-actions{justify-content:space-between}
}

/* ===== Replies dropdown ===== */
.replies-toggle{
  width:100%;
  border:0;
  background:transparent;
  padding:10px 8px;
  margin:0 0 8px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  border-radius:12px;
}
.replies-toggle:hover{background:rgba(0,0,0,.04)}
.replies-toggle:focus{outline:2px solid rgba(0,0,0,.25); outline-offset:2px}
.replies-toggle .chev{transition:transform .18s ease}
.replies-toggle.is-open .chev{transform:rotate(180deg)}

.replies-body{padding-top:2px}

/* ===== Cart responsive tweaks ===== */
.cart-qty-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cart-qty-form .input{max-width:140px}

@media (max-width:768px){
  /* Make cart actions easier to tap */
  .cart-qty-form .btn{width:100%}
  .cart-qty-form .input{max-width:100%}
  .cart-summary{gap:10px}
  .cart-summary .btn{width:100%;text-align:center}
}

/* REMOVE ALL MENU DECORATION */
nav ul,
nav ul li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

nav ul li a,
nav a {
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove hover underline or effects */
nav ul li a:hover,
nav ul li a:focus,
nav ul li a:active,
nav a:hover {
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* FORCE MENU TEXT COLOR TO WHITE */
nav a,
nav ul li a {
    color: #ffffff !important;
}

nav a:hover,
nav ul li a:hover {
    color: #ffffff !important;
}

/* BROWSE CATEGORIES - GHOST BUTTON */
.browse-categories,
.browse-categories a,
.hero-browse,
.hero-browse a {
    background: transparent !important;
    color: #e91e63 !important; /* pink text */
    padding: 10px 22px;
    border-radius: 10px;
    font-weight: 600;
    border: 2px solid #e91e63;
    display: inline-block;
}

/* Hover: filled pink */
.browse-categories:hover,
.browse-categories a:hover {
    background: #e91e63 !important;
    color: #ffffff !important;
}

/* BROWSE CATEGORIES - FILLED BUTTON */
.browse-categories,
.browse-categories a,
.hero-browse,
.hero-browse a {
    background: #e91e63 !important; /* filled pink */
    color: #ffffff !important;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    border: 2px solid #e91e63;
    display: inline-block;
}

/* Hover: slightly darker fill */
.browse-categories:hover,
.browse-categories a:hover {
    background: #d81b60 !important;
    border-color: #d81b60 !important;
    color: #ffffff !important;
}

/* =========================
   Image Lightbox
   ========================= */
img[data-lightbox] { cursor: zoom-in; }

.cg-lightbox{position:fixed;inset:0;display:none;z-index:99999;}
.cg-lightbox.is-open{display:block;}
.cg-lightbox__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);}
.cg-lightbox__panel{position:relative;max-width:min(92vw,1100px);max-height:86vh;margin:7vh auto 0;
  display:flex;align-items:center;justify-content:center;}
.cg-lightbox__img{max-width:92vw;max-height:86vh;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);
  background:#fff;object-fit:contain;}
.cg-lightbox__close{position:absolute;top:-14px;right:-14px;width:42px;height:42px;border-radius:50%;
  border:none;background:#fff;color:#111;font-size:28px;line-height:42px;cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.35);}
body.cg-lightbox-open{overflow:hidden;}