/* ===== Your base styles (kept) ===== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&display=swap');
body{ font-family:"Cormorant", serif; }
/* Hide horizontal overflow globally */
html,body{ width:100%; overflow-x:hidden; }

/* ===== NAVBAR (fixed) ===== */
.navbar{
  background:#fff;
  position:fixed;
  top:0; left:0; right:0;
  z-index:1050;
  box-shadow:0 2px 12px rgba(0,0,0,.05);
}

.nav-link{
  font-weight:500;
  letter-spacing:.04em;
  color:#182024;
  opacity:.9;
}
.nav-link:hover,
.nav-link.active{ color:#0b0f12; opacity:1; }

/* evenly spaced center nav (desktop) */
@media (min-width: 992px){
  .main-nav{ gap:3.5rem; }
}

/* icon links */
.nav-icon-link{ color:#212529; opacity:.9; text-decoration:none; }
.nav-icon-link:hover{ opacity:1; }

/* CTA (desktop) */
.enquire-btn{
  border:1.5px solid #212529;
  transition:all .15s ease;
}
.enquire-btn:hover{ background:#212529; color:#fff; }

/* Offcanvas width */
.offcanvas{ width:290px; z-index:1060; }
.offcanvas .nav-link{ font-size:1rem; }

/* Improve hamburger visibility on light bg */
.navbar-light .navbar-toggler-icon{ filter:invert(0); }

/* Demo: space below fixed header (you can keep this) */
body{ padding-top:76px; }

/* ===== NEW: Desktop hover dropdown (smooth fade/slide) ===== */
.navbar .dropdown-menu{
  border:0;
  border-radius:.5rem;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  padding:.5rem 0;
}

/* Only enable hover behavior on desktop */
@media (min-width: 992px){
  .navbar .dropdown-hover .dropdown-menu{
    display:block;                 /* keep in flow so transition works */
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    pointer-events:none;
    margin-top:.25rem;
  }
  .navbar .dropdown-hover:hover > .dropdown-menu,
  .navbar .dropdown-hover:focus-within > .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    transition-delay:0s;
    pointer-events:auto;
  }
}

/* Dropdown items look */
.dropdown-item{
  font-weight:500;
  padding:.5rem 1rem;
}
.dropdown-item:hover{ background:#f6f7f8; }

    /* Demo page padding (real padding is set dynamically by JS) */
    body { padding-top: 76px; }


  :root{
    --ink:#1a1a1a;
    --muted:#6b7280;
    --border:#eceff3;
    --peach:#403838;
    --peach-600:#403838;
    --bg:#fafbfc;
    --radius:14px;
  }
  body{ color:var(--ink); background:#fff; }

  .page-head{
    background:#303030;
    color:#fff;
    border-radius:var(--radius);
  }

  /* Base table look */
  .cart-table{
    border-collapse:separate;
    border-spacing:0 10px; /* row gaps */
    width:100%;
  }
  .cart-table thead th{
    background:#303030;
    color:#fff;
    font-weight:600;
    padding:14px 16px;
  }
  .cart-table tbody tr{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
  }
  .cart-table tbody td{
    vertical-align:middle;
    padding:14px 16px;
  }
  .cart-item{
    display:flex; gap:14px; align-items:center;
  }
  .ci-thumb{
    width:64px; height:64px; border-radius:10px; overflow:hidden; background:#f3f4f6;
    flex:0 0 64px;
  }
  .ci-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .ci-title{ font-weight:600; }
  .ci-meta{ color:var(--muted); font-size:.9rem; }

  /* qty stepper */
  .qty{
    display:inline-flex; align-items:center; border:1px solid var(--border);
    border-radius:10px; overflow:hidden; background:#fff;
  }
  .qty .btn{
    border:0; background:#fff; width:42px; height:40px; line-height:1; font-weight:700; color:#333;
  }
  .qty input{
    width:56px; text-align:center; border:0; outline:0; height:40px; font-weight:600;
  }

  /* remove button */
  .btn-remove{
    width:38px; height:38px; border-radius:10px; border:1px solid var(--border);
    color:#888; background:#fff;
  }
  .btn-remove:hover{ background:#ffeceb; color:#c24141; border-color:#ffd1ca; }

  /* totals card */
  .totals{
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:18px;
    background:#fff;
  }
  .btn-peach{
    background:var(--peach); color:#fff; border:1.5px solid var(--peach); font-weight:600;
  }
  .btn-peach:hover{ background:var(--peach-600); border-color:var(--peach-600); color:#fff; }

  /* MOBILE: table -> cards */
  @media (max-width: 575.98px){
    .cart-table thead{ display:none; }
    .cart-table tbody{ display:grid; gap:12px; }
    .cart-table tbody tr{ display:grid; gap:10px; padding:12px; }
    .cart-table tbody td{
      display:flex; justify-content:space-between; align-items:center;
      border:0; padding:6px 0;
    }
    .cart-table tbody td[data-label]::before{
      content: attr(data-label);
      color:var(--muted); font-size:.9rem; margin-right:12px;
    }
    .cart-table tbody td.product{
      display:block; padding-top:0;
    }
  }