/* kgc */
@font-face {
  font-family: 'bebasneue';
  src: url("fonts/BebasNeueRegular_gdi.eot"), url("fonts/BebasNeueRegular_gdi.ttf") format("truetype"), url("fonts/BebasNeueRegular_gdi.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'bebasneue';
  src: url("fonts/BebasNeueBold_gdi.eot"), url("fonts/BebasNeueBold_gdi.ttf") format("truetype"), url("fonts/BebasNeueBold_gdi.svg") format("svg");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'gothamrounded';
  src: url("fonts/GothamRounded-Bold_gdi.eot"), url("fonts/GothamRounded-Bold_gdi.ttf") format("truetype"), url("fonts/GothamRounded-Bold_gdi.svg") format("svg");
  font-weight: bold;
  font-style: normal;
}

@keyframes anim-red {
  50% {
    color: #ff0000;
  }
}

.select-qty {
  animation-name: anim-red;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.link-w, .nav-menus li a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  font-family: "gothamrounded", "bebasneue", sans-serif;
  color: #fff;
}

a, h1, h2, h3, h4, h5, h6,
.item-menu {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

input.form-control,
textarea.form-control,
select.form-control {
  border-radius: 0;
}

header,
h1,
h2 {
  font-family: "bebasneue", "gothamrounded", sans-serif;
}

.page-title-margin {
  margin-bottom: -188px;
}

.footer-margin {
  margin-top: -163px;
}

footer {
  position: relative;
  background: transparent url("../image/footer-bg.png") no-repeat top center;
  background-size: cover;
  z-index: 4;
  border: 0;
}

footer h1 {
  color: #fff;
}

#content {
  min-height: 320px;
}

.breadcrumb {
  display: none;
}

.container {
  max-width: 1024px;
}

.top-links {
  background-color: #B81914;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 20px 20px 0 20px;
  height: 60px;
  box-sizing: border-box;
}

.top-links ul li a {
  color: #fff;
  text-transform: uppercase;
  font-size: 16px;
}

.top-links ul li a:hover,
.top-links ul li a:focus {
  color: #353535;
  text-shadow: none;
}

#top-logos {
  height: 60px;
  padding: 6px 20px 6px 10px;
  box-sizing: border-box;
}

#top-logos img {
  height: 100%;
  padding: 0 6px;
}

nav#menu {
  background-color: #fff;
  background-image: none;
  background-repeat: no-repeat;
  border: none;
  min-height: 0 !important;
  margin: 20px 0 0 0;
}

nav#menu #category {
  color: #B81914;
  font-size: 16px;
  padding-left: 23px;
}

nav#menu .navbar-header #category {
  font-size: 18px;
}

nav#menu .btn-navbar {
  float: right;
  background-color: #B81914;
  background-image: none;
  border: none;
  padding: 5px 30px;
  border-radius: 0;
}

nav#menu .btn-navbar:hover,
nav#menu .btn-navbar:focus {
  float: right;
  background-color: #cf1c17;
  background-image: none;
  border: none;
}

nav#menu .nav li a {
  color: #353535;
  text-transform: uppercase;
  font-size: 18px;
  padding: 10px 20px;
}

nav#menu .nav li a.active,
nav#menu .nav li a:hover {
  background: #B81914;
  color: #fff !important;
}

nav#menu .collapse {
  padding-right: 0;
}

.home-content-mid {
  background: transparent url("../image/wooden-bg.jpg") no-repeat center center;
  position: relative;
  padding: 0;
}

.home-content-mid .table {
  border: 0 !important;
  margin-bottom: 50px;
}

.home-content-mid .table td {
  border: 0;
  padding: 10px 20px;
}

.home-content-mid .table h1,
.home-content-mid .table h2,
.home-content-mid .table h3,
.home-content-mid .table h4,
.home-content-mid .table h5 {
  color: #B81914;
}

.home-content-mid .table p {
  color: #fff;
}

.home-content-mid .table img {
  max-width: 100%;
}

.home-content-mid .top-layer {
  position: relative;
  min-height: 115px;
  margin-top: -114px;
  background: transparent url("../image/top-layer.png") no-repeat top center;
  z-index: 2;
}

.home-content-mid .middle-layer {
  position: relative;
  z-index: 3;
}

.home-content-mid .bottom-layer {
  position: relative;
  min-height: 115px;
  margin-bottom: -97px;
  background: transparent url("../image/bottom-layer.png") no-repeat bottom center;
  z-index: 2;
}

.owl-carousel .owl-item img {
  width: auto;
  margin: 0 auto;
  cursor: move;
  cursor: -webkit-grab;
}

.category-figure {
  display: inline-block;
  position: relative;
  text-align: center;
  border-radius: 15px;
  background-color: #EDEDED;
  padding: 8px 10px;
  margin: 15px;
  width: 40%;
}

.category-figure .layer {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: inherit;
  height: 100%;
  width: 100%;
  background: #fff;
  opacity: 0.4;
}

.category-figure figcaption {
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
}

.category-figure figcaption h3 {
  font-family: "gothamrounded", "bebasneue", sans-serif;
  text-transform: uppercase;
}

.btn-order-now {
  padding: 6px 30px;
  border: none;
  border-radius: 20px;
  background-color: #B81914;
}

.btn-order-now a {
  color: #fff;
  font-family: "gothamrounded", "bebasneue", sans-serif;
  font-size: 1.25em;
  text-transform: uppercase;
}

.btn-order-nav {
  margin: 30px 0;
}

.btn-order-nav a,
.btn-order-nav a:hover,
.btn-order-nav a:focus {
  margin: 5px 5px;
}

.page-title {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding: 85px 0;
  background: transparent url("../image/page-title.png") no-repeat bottom center;
}

.page-title * {
  color: #EFEFEF;
}

.page-title h1 {
  font-size: 8em;
}

.content-info table {
  margin-bottom: 50px;
}

.content-info td {
  padding: 5px 39px;
}

.content-info img {
  display: block;
  width: 100%;
  height: auto;
}

#ordersteps {
  margin-bottom: 30px;
}

#ordersteps li i.fa {
  font-size: 8px;
}

#ordersteps li p {
  text-transform: uppercase;
  font-family: "gothamrounded", "bebasneue", sans-serif;
  font-weight: bold;
}

#ordersteps li .step-disk {
  background: #EDEDED;
  border-radius: 50%;
  height: 60px;
  width: 60px;
  border: none;
  font-size: 28px;
  color: #000;
  font: 28px "bebasneue", "gothamrounded", sans-serif;
  line-height: 60px;
  font-weight: bold;
}

#ordersteps li.active {
  color: #000;
}

#ordersteps li.active .step-disk {
  background: #B81914;
  border-radius: 50%;
  color: #fff;
}

.list-menu {
  text-align: center;
}

.item-menu {
  text-align: left;
  cursor: pointer;
  background-color: #EDEDED;
  border: 5px solid #EDEDED;
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 10px;
}

.item-menu p {
  margin: 0;
}

.item-menu img {
  margin: 0 auto;
}

.item-desc {
  line-height: normal;
}

.item-menu:hover,
.item-menu.active {
  border-color: #353535;
}

.list-price {
  background: #B81914;
  margin-bottom: 10px;
  padding: 4px;
}

.list-price li {
  background: #EDEDED;
  margin: 4px 2px;
}

.list-price li a {
  position: relative;
  display: block;
  padding: 6px 20px;
  color: #353535;
  font-weight: bold;
}

.list-price li.active,
.list-price li:hover {
  background: #353535;
}

.list-price li.active a,
.list-price li:hover a {
  color: #fff;
}

.list-ala-menu {
  color: #fff;
  background: #B81914;
}

.list-ala-menu li {
  vertical-align: top;
}

.list-ala-menu li a {
  position: relative;
  display: block;
  padding: 10px 20px;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
}

.list-ala-menu li.active {
  background: #353535;
}

.list-ala-menu li.active a {
  color: #fff;
}

.category-description {
  background: rgba(49, 176, 213, 0.5);
  border-radius: 4px;
  padding: 7.5px 12px;
  color: #fff;
  margin: 10px 10px;
}

.category-description p {
  margin: 0;
}

.chef-icons {
  color: #353535;
  font-family: "gothamrounded", "bebasneue", sans-serif;
  font-size: 10px;
}

.chef-icons li > img {
  margin: 0 auto;
}

.highlight-red {
  color: #B81914;
  font-family: "gothamrounded", "bebasneue", sans-serif;
}

.text-uppercase {
  text-transform: uppercase;
}

.nav-menus li a {
  position: relative;
  display: block;
  float: left;
}

.nav-menus li a:hover {
  color: #000;
  background: none;
}

.nav-menus li.active {
  background-color: #353535;
}

.heading-red {
  color: #B81914;
}

.heading-dark {
  color: #353535;
}

.font-gotham {
  font-family: "gothamrounded", "bebasneue", sans-serif;
}

.h2 {
  font-size: 27px;
}

.bold {
  font-weight: bold;
}

.img-center {
  margin: 0 auto;
}

.product-pane .table-responsive {
  border: 0;
}

.product-pane .menu-row {
  margin: 20px 0;
  background: #EDEDED;
}

.product-pane .menu-row .carousel {
  max-width: 260px;
  margin: 0 auto;
}

.product-pane .table tr {
  padding: 0;
  border: 0;
}

.product-pane .table tr .option-info {
  text-align: center;
  border-left: 1px solid #ddd;
  height: 100%;
}

.product-pane .table tr .info {
  color: #353535;
  font-family: "gothamrounded", "bebasneue", sans-serif;
  font-size: 12px;
}

.product-pane .table tr .info-details > label {
  cursor: default;
  padding-left: 0;
}

.product-pane .table tr .checkbox input[type='checkbox'] {
  margin-top: 0;
}

.product-pane .table tr .option-qty {
  width: 30px;
  margin: 0;
  text-align: center;
  padding: 0;
  font-size: 12px;
  line-height: normal;
}

.product-pane .table tr .option-title,
.product-pane .table tr .option-subtitle {
  color: #353535;
  font-family: "gothamrounded", "bebasneue", sans-serif;
  font-size: 16px;
  margin: 8px 0;
}

.product-pane .table tr .option-subtitle {
  color: #5b5b5b;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: bold;
}

.product-pane .table tr td {
  border: 0 !important;
}

.carousel .left {
  border-radius: 10px 0 0 10px;
}

.carousel .right {
  border-radius: 0 10px 10px 0;
}

.col-quantity {
  max-height: 20px;
}

.col-quantity .input-group {
  display: block;
}

.col-quantity .input-group-btn {
  display: inline;
  width: auto;
}

.col-quantity button {
  padding: 0 6px;
  border: none;
  background: transparent;
  border-radius: 0;
  color: #B81914;
  box-shadow: none;
  font-size: 16px;
}

input.option-qty::-webkit-outer-spin-button,
input.option-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn-link-red {
  color: #B81914;
  text-transform: uppercase;
  font-size: 16px;
  font-family: "gothamrounded", "bebasneue", sans-serif;
}

.btn-link-red:hover,
.btn-link-red:focus {
  color: #353535;
}

.table-cart thead tr {
  background-color: #353535;
  color: #fff;
}

.table-cart thead tr td {
  text-align: center;
  text-transform: uppercase;
  border: 0;
}

.table-cart tbody tr {
  background-color: #EDEDED;
}

.table-cart tbody tr td {
  color: #000;
  border: 1px solid #fff;
  padding: 20px;
}

.table-cart tbody tr td:not(:first-child) {
  text-align: center;
  vertical-align: middle;
}

.baseline-gray {
  display: none;
  background-color: #EDEDED;
}

.quickcheckout-heading {
  background: transparent !important;
  border: 0 !important;
}

.quickcheckout-content {
  background: transparent !important;
  border: 0 !important;
}

.quickcheckout-content div {
  padding-left: 0;
}

.quickcheckout-content label.control-label {
  display: block;
}

.quickcheckout-cart {
  border: 0 !important;
}

.quickcheckout-cart thead td.quantity, .quickcheckout-cart thead td.total,
.quickcheckout-cart tbody td.quantity,
.quickcheckout-cart tbody td.total {
  min-width: 0 !important;
  width: 1% !important;
}

.quickcheckout-cart thead td.price,
.quickcheckout-cart tbody td.price {
  min-width: 100px;
  width: 1%;
}

.quickcheckout-cart thead td {
  background: #fff !important;
}

.quickcheckout-cart tbody td {
  color: #000;
}

.quickcheckout-cart tbody tr td {
  border: 0 !important;
}

.quickcheckout-cart tbody tr:nth-child(2) td {
  border-top: 1px solid #ddd !important;
}

.quickcheckout-cart tbody tr:last-child td {
  border-top: 1px solid #ddd !important;
  color: #B81914;
  font-size: 18px;
  font-family: "gothamrounded", "bebasneue", sans-serif;
}

.quickcheckoutmid {
  margin-top: 50px;
}

.quickcheckoutright #button-coupon {
  padding: 7px 0;
  border: 0;
}

/*Faq*/
.faq-panel {
  background-color: transparent;
}

.faq-panel .panel-title {
  color: #000;
  font-weight: bold;
}

.faq-heading a,
.faq-heading a:hover,
.faq-heading a:focus,
.faq-heading a:active {
  color: #000;
  text-decoration: none;
}

.btn-default,
.btn-default:hover,
.btn-default:focus {
  min-width: 155px;
  margin: 0 5px;
  padding: 10px 30px;
  background-color: #353535;
  background-image: none;
  color: #fff;
  border: none;
  border-radius: 15px;
  text-transform: uppercase;
  font-size: 14px;
}

.btn-default.disabled {
  background-color: #424242;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
  min-width: 155px;
  margin: 0 5px;
  padding: 10px 0;
  background-color: #B81914;
  background-image: none;
  color: #fff;
  border: none;
  border-radius: 15px;
  text-transform: uppercase;
  font-size: 14px;
}

.btn-primary.disabled {
  background-color: #cf1c17;
}

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
  background-color: transparent;
  border-color: transparent;
}

.dropdown-menu-right li a {
  color: #353535 !important;
}

.dropdown-menu-right li a:hover {
  color: #fff !important;
  background-color: #B81914;
  background-image: none;
}

.btn-rect {
  border-radius: 0 !important;
  box-shadow: none;
}

.text-contact {
  font-weight: bold;
  color: #fff;
}

.list-album-category {
  margin-bottom: 50px;
}

.list-album-category li {
  padding: 0 18px;
}

.list-album-category li a {
  color: #353535;
  font-family: "gothamrounded", "bebasneue", sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

.list-album-category li a:hover,
.list-album-category li a:focus,
.list-album-category li a.active {
  color: #B81914;
  font-weight: bold;
}

.image {
  position: relative;
  padding: 8px 6px;
  background: #EDEDED;
  border-radius: 10px;
  max-width: 300px;
  margin: 0 auto;
}

.image .layer {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  border-radius: inherit;
  height: 100%;
  width: 100%;
  background: #fff;
  opacity: 0.4;
}

.image .img-enlarge {
  display: none;
  position: absolute;
  cursor: pointer;
  top: 38%;
  width: 100%;
}

.name {
  font-family: "gothamrounded", "bebasneue", sans-serif;
  font-size: 14px;
  text-transform: uppercase;
}

.name a {
  color: #353535;
  text-decoration: none;
}

.name a:hover,
.name a:focus {
  color: #B81914;
}

.col-image {
  margin: 12px 0 30px 0;
}

.geo-code {
  position: relative;
  z-index: 1;
}

.geo-code iframe {
  pointer-events: none;
}

.toupper {
  text-transform: uppercase;
}

.contact-wrapper {
  color: #353535;
}

.contact-wrapper h3 {
  font-family: "gothamrounded", "bebasneue", sans-serif;
  font-size: 18px;
}

.contact-wrapper p,
.contact-wrapper address {
  line-height: 1.8em;
  font-size: 14px;
}

.contact-wrapper strong {
  color: #353535;
}

.contact-wrapper .oh-box {
  background: url("../image/wooden-bg.jpg");
  border-radius: 25px;
  padding: 10px 30px;
  margin-bottom: 30px;
  min-height: 300px;
  color: #fff;
}

.contact-wrapper .form-group input.form-control,
.contact-wrapper .form-group textarea.form-control {
  border-radius: 5px 20px 20px 5px;
  border: 0;
  box-shadow: 3px 2px 2px #bbb;
}

table.table-borderless tr, table.table-borderless td {
  border: 0 !important;
}

.pointer {
  cursor: pointer;
}

.box-heading h3 {
  color: #fff;
  text-transform: uppercase;
  font-family: "bebasneue", "gothamrounded", sans-serif;
  font-size: 32px;
}

@media all and (min-width: 768px) {
  header {
    right: 0;
    left: 0;
    position: fixed;
    z-index: 1039;
    background-color: #fff;
    height: 120px;
  }
  footer {
    padding-top: 106px;
    margin-top: 50px;
  }
  .col-sm-pull-right {
    float: right;
  }
  .fix-height {
    display: block;
    height: 120px;
  }
  .middle-layer {
    margin-top: -164px;
    margin-bottom: -114px;
  }
  .image:hover .layer,
  .image:hover .img-enlarge {
    display: block;
  }
  .product-pane .table tr td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
  }
  .product-pane .table tr td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  .baseline-gray {
    display: block;
    margin-top: -120px;
    margin-bottom: -170px;
    min-height: 250px;
  }
}

.form-menu:before, .form-menu:after {
  content: "";
  display: table;
  clear: both;
}

.form-menu .col-sm-4:nth-child(3n+1) {
  clear: left;
}

@media all and (min-width: 480px) {
  .visible-xxs {
    display: none !important;
  }
  .col-xs-pull-right {
    float: right;
  }
  .col-xs-pull-left {
    float: left;
  }
  .page-title {
    margin-bottom: 88px;
  }
}

@media all and (max-width: 479px) {
  .hidden-xxs {
    display: none;
  }
  .visible-xxs {
    display: block;
  }
}

@media all and (max-width: 767px) {
  .home-content-mid table td,
  .content-info table td {
    display: block;
    width: 100% !important;
  }
  .home-content-mid table td img,
  .content-info table td img {
    display: none;
  }
  #ordersteps ul.list-inline li img {
    display: none;
  }
  .page-title {
    background: url("../image/wooden-bg.jpg") top center;
    word-wrap: break-word;
  }
  footer {
    background: url("../image/footer-bg-flat.png") top center;
    background-size: cover;
  }
  .page-title-margin {
    display: none;
  }
  .footer-margin {
    margin-top: -30px;
  }
  .geo-code {
    margin-top: -88px;
  }
  .list-ala-menu li {
    display: block;
    width: 100%;
  }
  .quickcheckoutleft {
    width: 98% !important;
  }
  .quickcheckoutright {
    width: 98% !important;
  }
  #quickcheckoutconfirm .quickcheckoutmid .col-sm-6 {
    width: 100% !important;
    text-align: left;
  }
}

@media all and (max-width: 479px) {
  .btn-block-xxs,
  .btn-block-xxs:hover,
  .btn-block-xxs:focus {
    width: 100%;
    border-radius: 0;
    margin: 5px 0;
  }
  .page-title {
    margin-bottom: 44px;
  }
  .page-title h1,
  .page-title h2 {
    font-size: 54px;
  }
  .geo-code {
    margin-top: -44px;
  }
  .col-xxs-12 {
    width: 100%;
    margin-left: 0;
  }
  .col-xxs-auto {
    width: auto;
    margin: 0 auto;
  }
}

@media all and (min-width: 992px) {
  .quickcheckoutleft {
    width: 50% !important;
  }
  .quickcheckoutright {
    width: 48% !important;
  }
}

@media all and (min-width: 1200px) {
  .list-set-menu {
    text-align: left;
  }
}

@media all and (min-width: 1921px) {
  .page-title,
  .home-content-mid {
    background: url("../image/wooden-bg.jpg") top center;
    background-size: cover;
  }
  .top-layer,
  .bottom-layer {
    display: none;
  }
  footer {
    background: url("../image/footer-bg-flat.png") top center;
    background-size: cover;
  }
}

.carousel {
  display: none;
}

.menu-row > .col-sm-3:first-child {
  display: none;
}

.menu-row > .col-sm-9.table-responsive {
  width: 100%;
}
/* ===== Premium price selector (remove red bar) ===== */
.list-price{
  background: transparent !important;
  padding: 0 !important;
  margin: 16px 0 18px !important;
}

/* Each price tab becomes a clean pill */
.list-price li{
  background: transparent !important;
  margin: 0 10px 10px 0 !important;
}

.list-price li a{
  background: #ffffff !important;
  border: 1px solid #e7e7e7 !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  color: #222 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06) !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Hover */
.list-price li a:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.10) !important;
  border-color: #d6d6d6 !important;
}

/* Active pill */
.list-price li.active a{
  background: #111 !important;
  color: #fff !important;
  border-color: #111 !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.14) !important;
}
/* ===============================
   Catering Form & Menu Fonts
   =============================== */

/* Form labels: Date of Event, Delivery Time */
.form-group label,
.control-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.3px;
}

/* Date / time / select inputs */
.form-control {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
}

/* Menu titles */
.item-menu h4,
.item-menu .menu-title,
.list-menu .item-menu {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

/* Food items list */
.item-desc,
.item-menu p,
.list-menu li {
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
}

/* Price text */
.list-price li a {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
}

/* ===== Make product page content wider (optional but recommended) ===== */
/* If this affects other pages, tell me and I’ll narrow the selector */
body.product-product .container{
  width: 100% !important;
  max-width: 1400px !important; /* increase if you want: 1600px */
}

/* ===== Menu cards: auto-stretch (2/3 take same width as 4 layout) ===== */
.list-menu{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 18px !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Override bootstrap column widths/floats on the <li> */
.list-menu > li{
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* ===== Premium menu card design ===== */

/* grid already handled earlier; this styles each card */
.list-menu > li > .item-menu{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 18px !important;
  padding: 22px 18px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* subtle top sheen (premium feel) */
.list-menu > li > .item-menu:before{
  content:"";
  position:absolute;
  left:-30%;
  top:-60%;
  width:160%;
  height:120%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0) 55%);
  opacity: .7;
  pointer-events:none;
}

/* hover */
.list-menu > li > .item-menu:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.12) !important;
  border-color: rgba(0,0,0,0.18) !important;
}

/* active (selected) */
.list-menu > li > .item-menu.active{
  border-color: #111 !important;
  box-shadow: 0 22px 50px rgba(0,0,0,0.16) !important;
  transform: translateY(-3px);
}

/* selected badge */
.list-menu > li > .item-menu.active:after{
  content: "Selected";
  position: absolute;
  top: 14px;
  right: 14px;
  background: #111;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
}

/* improve typography inside card */
.list-menu .item-desc{
  color: #333;
  font-size: 14px;
  line-height: 1.55;
}

/* make the first line (menu name) look like a header if it is bold/underlined */
.list-menu .item-desc strong,
.list-menu .item-desc b{
  font-size: 16px;
  letter-spacing: .2px;
}

/* nicer spacing for headings if your content has underlines */
.list-menu .item-desc u{
  text-underline-offset: 4px;
}

/* mobile: reduce height */
@media (max-width: 768px){
  .list-menu > li > .item-menu{
    min-height: 0;
    padding: 18px 14px !important;
  }
}
/* ===== Step 2 category tiles: centered + tighter cards ===== */

/* 3 columns grid, but keep the whole grid centered */
ul.list-inline.list-menu{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 26px !important;

  /* center the grid block */
  max-width: 1100px;           /* adjust 1000-1200 if you want */
  margin: 0 auto !important;

  padding-left: 0 !important;
  list-style: none !important;
}

/* When there are only 1-2 items, keep them centered */
ul.list-inline.list-menu{
  justify-content: center;     /* centers grid tracks if space remains */
}

/* kill bootstrap list spacing */
ul.list-inline.list-menu > li{
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* tighten the white tile */
ul.list-inline.list-menu .item-menu{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 14px 14px 12px;     /* smaller than before */
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);

  /* remove any forced height from older CSS */
  height: auto !important;
  min-height: 0 !important;

  text-align: center;
}

/* make image container more compact */
ul.list-inline.list-menu .item-menu img.img-responsive{
  width: 100%;
  height: 220px;               /* reduce the “big white square” feel */
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* title spacing */
ul.list-inline.list-menu h4{
  margin: 12px 0 0 !important;
  font-weight: 700;
}

/* Tablet */
@media (max-width: 991px){
  ul.list-inline.list-menu{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 760px;
  }
}

/* Mobile */
@media (max-width: 575px){
  ul.list-inline.list-menu{
    grid-template-columns: 1fr !important;
    max-width: 420px;
  }
  ul.list-inline.list-menu .item-menu img.img-responsive{
    height: 200px;
  }
}
/* =======================================================
   STEP 1 (Select Category) – bigger & more centered
   Applies ONLY to product/category
   ======================================================= */


/* Bigger category images for visual weight */
body.product-category 
ul.list-inline.list-menu .item-menu img.img-responsive{
  height: 280px;            /* was 220px */
}

/* Slightly more padding for category cards */
body.product-category 
ul.list-inline.list-menu .item-menu{
  padding: 18px;
}
/* ===== STEP 1: keep cards centered but stop stretching too wide ===== */
body.product-category ul.list-inline.list-menu{
  grid-template-columns: repeat(auto-fit, minmax(360px, 360px)) !important;
  justify-content: center !important;
  max-width: 1300px !important;
}

/* Make images consistent and not too wide/flat */
body.product-category ul.list-inline.list-menu .item-menu img.img-responsive{
  height: 330px !important;
  width: 600px !important;     /* control width directly */
  object-fit: cover !important;
  border-radius: 10px;
}
/* ===============================
   STEP 2 override (route=product/category&step=2)
   Force 3 columns again
   =============================== */

/* Step 2 page has the Step 02 indicator active */
#ordersteps li.active img[src*="step-02"] ~ p,
#ordersteps li.active img[src*="step-02"]{
}

/* Apply grid override ONLY when Step 2 is active */
#ordersteps li.active:has(img[src*="step-02"]) ~ * ul.list-inline.list-menu,
#ordersteps:has(li.active img[src*="step-02"]) ~ .row ul.list-inline.list-menu,
body.product-category:has(#ordersteps li.active img[src*="step-02"]) ul.list-inline.list-menu{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  max-width: 1100px !important;
  justify-content: center !important;
}

/* Step 2 image sizing back to normal */
body.product-category:has(#ordersteps li.active img[src*="step-02"])
ul.list-inline.list-menu .item-menu img.img-responsive{
  height: 220px !important;
}
/* ===== GLOBAL CATEGORY & MENU TILES (Home + Step 1 + Step 2) ===== */

/* Remove white card look everywhere */
ul.list-inline.list-menu .item-menu{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Give tiles breathing room */
ul.list-inline.list-menu > li{
  margin-bottom: 28px !important;
}

/* Make images visually larger & premium */
ul.list-inline.list-menu .item-menu img.img-responsive{
  width: 100%;
  height: 260px;                 /* bigger than before */
  object-fit: cover;
  border-radius: 20px;
  display: block;
}

/* Subtle hover lift (premium feel) */
ul.list-inline.list-menu .item-menu:hover img{
  transform: translateY(-4px);
  transition: transform 0.25s ease;
}

/* Title spacing */
ul.list-inline.list-menu h4{
  margin-top: 14px !important;
  font-weight: 700;
}

/* Tablet */
@media (max-width: 991px){
  ul.list-inline.list-menu .item-menu img.img-responsive{
    height: 230px;
  }
}

/* Mobile */
@media (max-width: 575px){
  ul.list-inline.list-menu .item-menu img.img-responsive{
    height: 200px;
    border-radius: 16px;
  }
}
/* HOMEPAGE: larger image + rounded */
.common-home figure.category-figure {
  border-radius: 16px;
  overflow: hidden;
}

.common-home figure.category-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  transform: scale(1.40);
}
/* ==================================================
   STEP 3 ONLY – Restore menu card borders
   (does NOT affect Home / Step 1 / Step 2)
   ================================================== */

body.product-product ul.list-inline.list-menu .item-menu{
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 18px !important;
  padding: 22px 18px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06) !important;
}

/* Hover */
body.product-product ul.list-inline.list-menu .item-menu:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.12) !important;
  border-color: rgba(0,0,0,0.18) !important;
}

/* Active (selected menu) */
body.product-product ul.list-inline.list-menu .item-menu.active{
  border-color: #111 !important;
  box-shadow: 0 22px 50px rgba(0,0,0,0.16) !important;
}
/* =========================================
   CNY FESTIVE DESIGN — STEP 3 ONLY
   Scoped to: #product.cny-menu
   ========================================= */

/* Subtle red-gold background for CNY section */
body.product-product #product
  background: linear-gradient(
    180deg,
    #fff6f0 0%,
    #ffffff 55%
  );
  border-radius: 24px;
  padding: 28px 22px 34px;
  box-shadow: 0 20px 60px rgba(184,25,20,0.12);
}

/* Menu cards — festive premium look */
body.product-product #product 
.list-menu > li > .item-menu {
  background: linear-gradient(180deg, #ffffff, #fff7f2);
  border: 2px solid #f2c94c; /* gold */
  border-radius: 22px;
  padding: 26px 22px;
  box-shadow: 0 14px 38px rgba(0,0,0,0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Hover lift */
body.product-product #product
.list-menu > li > .item-menu:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(0,0,0,0.14);
}

/* Selected menu highlight */
body.product-product #product
.list-menu > li > .item-menu.active {
  border-color: #b81914; /* KG red */
  box-shadow: 0 26px 60px rgba(184,25,20,0.25);
}

/* Selected badge */
body.product-product #product 
.list-menu > li > .item-menu.active::after {
  content: "Selected";
  position: absolute;
  top: 16px;
  right: 16px;
  background: linear-gradient(135deg, #b81914, #e53935);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
}

/* Menu title emphasis */
body.product-product #product
.item-desc strong,
body.product-product #product
.item-desc b {
  color: #b81914;
  font-size: 17px;
  letter-spacing: 0.3px;
}

/* Section headings inside menu */
body.product-product #product
.item-desc u {
  text-decoration-color: #f2c94c;
  text-underline-offset: 6px;
}

/* Gentle gold divider feel */
body.product-product #product
.menu-customisable-text {
  background: linear-gradient(90deg, #fff7e6, #fff);
  border-left: 6px solid #f2c94c;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 500;
}
/* =========================================
   CNY FULL PAGE BACKGROUND (FINAL – WORKING)
   Applies ONLY to CNY product pages
   ========================================= */

body.product-product #product.cny-menu::before {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Full-page background layer */
body.product-product.cny-menu::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background:
  linear-gradient(
    rgba(255,245,235,0.55),
    rgba(255,245,235,0.55)
  ),
    url('/image/catalog/images/CNY/cny-bg.jpg') center top / cover no-repeat;

  background-attachment: fixed;
}

/* =========================================
   CNY CONTENT CARD (keeps premium look)
   ========================================= */

body.product-product #product.cny-menu {
  position: relative;
  z-index: 1;

  background:
    radial-gradient(circle at 15% 8%, rgba(167,41,32,.35), transparent 46%),
    radial-gradient(circle at 85% 10%, rgba(255,180,80,.28), transparent 48%),
    linear-gradient(180deg, #fcc0a2 0%, #ffda8f 70%);

  border-radius: 28px;
  padding: 36px 24px 42px;

  box-shadow:
    0 28px 80px rgba(185,28,28,.18),
    inset 0 0 0 1px rgba(255,215,120,.28);
}

/* Footer blends with background */
body.product-product.cny-menu footer {
  background: transparent;
}
/* 🧧 Decorative gold edge shimmer */
body.product-product #product.cny-menu::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:28px;
  background:
    linear-gradient(
      120deg,
      transparent 20%,
      rgba(255,215,120,.35),
      transparent 80%
    );
  opacity:.35;
  pointer-events:none;
}

/* 🎇 Festive sparkles (subtle, not tacky) */
body.product-product #product.cny-menu::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle, rgba(255,215,120,.45) 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255,215,120,.35) 1px, transparent 1.8px);
  background-size: 68px 68px, 110px 110px;
  background-position: 0 0, 40px 60px;
  opacity:.18;
  pointer-events:none;
}

/* Menu cards: festive border + red header strip */
body.product-product #product
.list-menu > li > .item-menu{
  position: relative;
  background:
    linear-gradient(180deg, #ffffff 0%, #fff7f1 100%) !important;
  border: 2px solid rgba(242,201,76,.95) !important; /* gold */
  border-radius: 24px !important;
  padding: 30px 22px 24px !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.10) !important;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* Red “festive strip” on top of each card */
body.product-product #product
.list-menu > li > .item-menu:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height: 10px;
  background: linear-gradient(90deg, #b81914, #e53935, #b81914);
  opacity: .95;
}

/* Small gold sparkles inside card */
body.product-product #product
.list-menu > li > .item-menu .item-desc{
  position: relative;
}

/* Hover */
body.product-product #product
.list-menu > li > .item-menu:hover{
  transform: translateY(-7px);
  box-shadow: 0 26px 66px rgba(0,0,0,.16) !important;
  border-color: rgba(242,201,76,1) !important;
}

/* Selected menu: stronger red + gold glow */
body.product-product #product
.list-menu > li > .item-menu.active{
  border-color: #b81914 !important;
  box-shadow:
    0 28px 70px rgba(184,25,20,.28),
    0 0 0 6px rgba(242,201,76,.22) !important;
}

/* Selected badge: gold seal */
body.product-product #product
.list-menu > li > .item-menu.active:after{
  content:"Selected";
  position:absolute;
  top: 16px;
  right: 16px;
  background: linear-gradient(135deg, #f2c94c, #ffe59a);
  color: #5b3a00;
  font-weight: 900;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(143,19,16,.25);
  box-shadow: 0 12px 24px rgba(0,0,0,.16);
}

/* Typography punch */
body.product-product #product .item-desc strong,
body.product-product #product .item-desc b{
  display:block;
  margin: 8px 0 6px;
  color:#8f1310;
  font-size: 18px;
  letter-spacing: .35px;
}

body.product-product #product .item-desc u{
  text-decoration: none;
  display:block;
  margin: 16px 0 10px;
  font-weight: 900;
  color:#b81914;
  letter-spacing:.6px;
  text-transform: uppercase;
}

body.product-product #product .item-desc u:after{
  content:"";
  display:block;
  height:2px;
  margin: 8px auto 0;
  width: 64%;
  background: linear-gradient(90deg, transparent, #f2c94c, transparent);
}

/* Customisable notice: festive callout */
body.product-product #product.cny-menu .menu-customisable-text{
  background: linear-gradient(90deg, rgba(184,25,20,.10), rgba(242,201,76,.14), rgba(255,255,255,1));
  border: 1px solid rgba(242,201,76,.9);
  border-left: 8px solid #b81914;
  border-radius: 16px;
  padding: 16px 18px;
  font-weight: 700;
  color: #7a1110;
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}

/* Mobile tweaks */
@media (max-width: 768px){
  body.product-product #product.cny-menu:after{
    display:none;
  }
  body.product-product #product.cny-menu{
    padding: 26px 14px 30px;
  }
  body.product-product #product.cny-menu
  .list-menu > li > .item-menu{
    padding: 24px 16px 18px !important;
  }
}
/* =====================================================
   CNY ONLY: wider menu cards when there are few items
   ===================================================== */

/* Force 2 wide columns for CNY menus */
body.product-product #product.cny-menu
ul.list-menu{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(360px, 1fr)) !important;
  justify-content: center !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  gap: 28px !important;
}

/* Kill Bootstrap column sizing inside */
body.product-product #product.cny-menu
ul.list-menu > li{
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

/* Make each CNY card visually wider */
body.product-product #product.cny-menu
ul.list-menu > li > .item-menu{
  min-height: 100%;
  padding: 34px 28px !important;
  border-radius: 26px !important;
}

/* Slightly larger typography for CNY */
body.product-product #product.cny-menu
.item-desc{
  font-size: 15px;
  line-height: 1.65;
}

/* Desktop only — do NOT affect tablet/mobile */
@media (max-width: 991px){
  body.product-product #product.cny-menu
  ul.list-menu{
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
    max-width: 760px !important;
    gap: 18px !important;
  }
}

/* Mobile stays single column */
@media (max-width: 575px){
  body.product-product #product.cny-menu
  ul.list-menu{
    grid-template-columns: 1fr !important;
    max-width: 420px !important;
  }
}
/* ===============================
   Refreshment – Match Buffet price pills
   =============================== */

/* hide old dropdown row (safety) */
.refreshment-premium .list-ala-menu {
  display: none;
}

/* pill container */
.refreshment-premium .price-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 28px;
}

/* pill default */
.refreshment-premium .price-pill {
  background: #ffffff;
  border: 1px solid #e7e7e7;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #222;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* hover (same as buffet) */
.refreshment-premium .price-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
  border-color: #d6d6d6;
}

/* active (same as buffet) */
.refreshment-premium .price-pill.is-active {
  background: #111;
  color: #fff;
  border-color: #111;
  box-shadow: 0 10px 22px rgba(0,0,0,0.14);
}
/* ===============================
   Refreshment – Yellow info box (match Buffet)
   =============================== */

.refreshment-premium .menu-customisable-text {
  background: linear-gradient(90deg, #fff7e6, #ffffff);
  border-left: 6px solid #f2c94c;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 500;
  color: #333;
  margin: 22px 0 26px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* Stack text nicely */
.refreshment-premium .menu-customisable-text div {
  line-height: 1.6;
}
/* ===============================
   Refreshment – remove grey base
   =============================== */
body.product-product .refreshment-premium .menu-row,
body.product-product .refreshment-premium .product-pane,
body.product-product .refreshment-premium .table-responsive{
  background: transparent !important;
}
/* ===============================
   Refreshment – section header upgrade
   =============================== */
body.product-product .refreshment-premium .option-title,
body.product-product .refreshment-premium .option-subtitle{
  background: linear-gradient(90deg, #b81914, #e53935);
  color: #ffffff !important;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  margin-bottom: 12px;
}
/* =========================================
   REFRESHMENT – FESTIVE CATEGORY HEADERS
   (Aligned with CNY menu theme)
   ========================================= */

.refreshment-premium .subcat-title{
  position: relative;
  background:
    linear-gradient(180deg, #ffffff 0%, #fff7f1 100%) !important;
  border: 2px solid rgba(242,201,76,.95) !important; /* gold */
  border-radius: 22px !important;
  padding: 18px 26px 16px !important;
  margin: 26px 0 18px !important;

  font-family: "bebasneue", "gothamrounded", sans-serif;
  font-size: 160px;
  letter-spacing: 1.6px;
  font-weight: 700;
  text-transform: uppercase;
  color: #8b0000 !important;

  box-shadow: 0 14px 40px rgba(0,0,0,.10) !important;
  overflow: hidden;
}

/* festive red top strip (same as CNY cards) */
.refreshment-premium .subcat-title::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(
    90deg,
    #b81914 0%,
    #e53935 50%,
    #b81914 100%
  );
}

/* Compact qty controls */
.option-qty {
  text-align: center;
}
/* Qty group alignment */
.bootstrap-number {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.bootstrap-number .btn,
.bootstrap-number input {
  height: 34px;
  width: 34px;
  padding: 0;
  line-height: 34px;
}
td:last-child {
  text-align: center;
  vertical-align: middle;
}
/* Ala Carte – match Buffet / Refreshment font */
.product-product .menu-row,
.product-product .menu-row * {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 14px;
  color: #333;
}
/* Unified input style */
.product-product input,
.product-product .form-control {
  border-radius: 8px;
  border: 1px solid #e2e2e2;
  box-shadow: none;
  height: 38px;
}
/* Row spacing similar to Buffet */
.product-product table.table tbody tr {
  height: 56px;
}

.product-product table.table td {
  padding: 10px 12px;
  vertical-align: middle;
}
/* Selected dish – softer buffet style */
.product-product .checkbox input:checked + span,
.product-product .checkbox input:checked + label {
  background: #fbeaea;
  border-radius: 8px;
  padding: 6px 10px;
}
/* Top navigation – premium base */
#menu .nav > li > a {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #333 !important;
  padding: 12px 18px;
  background: transparent !important;
}
/* Elegant underline hover */
#menu .nav > li > a {
  position: relative;
}

#menu .nav > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #8b1914, #f2c94c);
  transform: translateX(-50%);
  transition: width 0.25s ease;
}

#menu .nav > li > a:hover::after,
#menu .nav > li.active > a::after {
  width: 60%;
}
/* Active item emphasis */
#menu .nav > li.active > a {
  font-weight: 700;
}
/* Align nav better with logo */
#menu {
  margin-top: 6px;
}
/* Remove blocky red background */
#menu .nav > li > a:hover,
#menu .nav > li.active > a {
  background: transparent !important;
  color: #8b1914 !important;
}
/* ===============================
   HARD OVERRIDE: Top Nav Text Color
   Fix white text on hover / active
   =============================== */

/* Normal state */
nav#menu .nav > li > a {
  color: #353535 !important;
}

/* Hover state */
nav#menu .nav > li > a:hover {
  color: #353535 !important;
  background: transparent !important;
}

/* Active (current page) */
nav#menu .nav > li.active > a {
  color: #353535 !important;
  background: transparent !important;
}

/* Kill any lingering white text */
nav#menu .nav li a:hover,
nav#menu .nav li a.active {
  color: #353535 !important;
  background: transparent !important;
}
.menu-pill a {
  cursor: pointer;
}

.menu-pill.active a {
  font-weight: 600;
}

/* Vegetarian disabled (0) */
#veg-pax.veg-disabled {
  background: #f5f5f5;
  color: #999;
  border-style: dashed;
}

/* Small helper text (optional later) */
.pax-helper {
  font-size: 12px;
  color: #777;
  margin-top: 6px;
}


/* Inputs */
/* Pax / Vegetarian / Total — match form-control exactly */
.pax-input,
.pax-total {
  height: 38px;                 /* same as .form-control */
  font-family: 'Poppins', sans-serif;
  font-size: 14px;              /* same as Date / Delivery */
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  border-radius: 8px;
  padding: 6px 10px;
}

/* Total emphasis */
.pax-total {
  background: #f7f7f7;
  font-weight: 700;
  color: #c4161c;
  border: 1px solid #c4161c;
}  

}
/* ===== Compact Pax / Vegetarian / Total ===== */

.pax-combo-row {
  margin: 6px 0 10px;   /* ↓ tighter top & bottom */
  padding: 8px 10px;   /* ↓ less padding */
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  border: 1px solid #e8e8e8;
}

.pax-combo-row label {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;     /* same as other labels */
  font-size: 14px;      /* same size */
  letter-spacing: 0.3px;
  margin-bottom: 6px;
  color: #2A2A2A;
}

.pax-input,
.pax-total {
  height: 40px;
  font-size: 18px;
  text-align: center;
  border-radius: 8px;
  padding: 6px 8px;
}

.pax-total {
  background: #f7f7f7;
  font-weight: 700;
  color: #1a1819;
  border: 1px solid #c4161c;
}

@media (max-width: 767px) {
  .pax-combo-row {
    padding: 10px 12px;
  }

  .pax-input,
  .pax-total {
    height: 38px;
    font-size: 14px;
  }
}
/* Force pax row to align left */
.pax-combo-row {
  text-align: left;
}
.pax-combo-row .form-control,
.pax-input,
.pax-total {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Tight horizontal layout */
.pax-combo-row .row {
  display: flex;
  align-items: flex-end;
  gap: 12px; /* controls closeness */
}
.pax-combo-row .col-sm-4,
.pax-combo-row .col-md-4 {
  flex: 0 0 auto;
  width: auto;
}
.pax-input,
.pax-total {
  width: 120px;        /* 👈 this pulls them close */
  height: 34px;
  font-size: 16px;
  text-align: center;
}

/* =========================================
   Pax / Vegetarian / Total – left aligned
========================================= */

body.product-product .pax-combo-row {
  display: flex;
  gap: 14px;
  justify-content: flex-start;
  margin-left: 0;
}

body.product-product .pax-combo-row .col-sm-4 {
  max-width: 120px;
  padding-left: 0;
}
.delivery-time-wrapper .dt-slots {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.delivery-time-wrapper .dt-slot {
  border-radius: 8px;
  border: 1px solid #e5e5e5;
  background: #fff;
  cursor: pointer;
  font-size: 13px !important;
  padding: 5px 15px !important;
  transition: all .2s ease;
text-transform: uppercase; /* AM / PM CAPS */
}

.delivery-time-wrapper .dt-slot:hover {
  border-color: #cfa24a;
  background: #fffaf0;
}

/* Selected Delivery Time slot – like Total field */
.delivery-time-wrapper .dt-slot.active {
  background: #f3f3f3;
  border-color: #d0d0d0;
  color: #666;
  font-weight: 700;
  cursor: default;
}
.delivery-time-wrapper .dt-slot.active:hover {
  background: #f3f3f3;
font-weight: 600 !important;
}
/* =========================================
   UNIFY DELIVERY TIME STYLING
   Buffet + Refreshment = SAME LOOK
   ========================================= */

/* RESET refreshment special styling */
.refreshment-premium .delivery-slot-btn {
  background: #ffffff !important;
  color: #555 !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;      /* IMPORTANT */
  padding: 6px 12px !important;       /* IMPORTANT */
  font-weight: 500 !important;
  box-shadow: none !important;
  height: auto !important;
  margin: 0 !important;
}

/* ACTIVE = same grey as Total field */
.refreshment-premium .delivery-slot-btn.active {
  background: #e6e6e6 !important;
  color: #444 !important;
  border-color: #d0d0d0 !important;
  font-weight: 700 !important;
}

/* Spacing identical to buffet */
.refreshment-premium .delivery-slot-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 12px !important;   /* vertical | horizontal */
  margin-top: 6px !important;
}
/* ===== Header logo floating box ===== */
.logo-box-wrap {
  position: relative;
  z-index: 5;
}

.logo-box {
  background: #ffffff;
  padding: 14px 18px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  display: inline-flex;
  align-items: center;
  position: relative;
  top: -24px; /* controls overlap */
}

.logo-box img {
  max-height: 120px;
  width: auto;
  display: block;
}
/* ===============================
   REMOVE WOOD PAGE TITLE (FINAL)
   =============================== */

.page-title {
  background: none !important;
  padding: 40px 0 30px !important;
  margin-bottom: 40px !important;
}

.page-title::after {
  content: "";
  display: block;
  height: 1px;
  width: 120px;
  margin: 20px auto 0;
  background: #e5e5e5;
}
/* ===============================
   PAGE TITLE – PREMIUM TYPOGRAPHY
   =============================== */

.page-title h1 {
  color: #1f1f1f;           /* deep charcoal */
  font-weight: 600;
  letter-spacing: 1.2px;
}

/* subtitle divider (already added earlier, just reinforce) */
.page-title::after {
  background: #d9d9d9;
}

/* ===============================
   ORDER STEPS – CLEAN & PREMIUM
   =============================== */

#ordersteps .step-title,
#ordersteps span,
#ordersteps p {
  color: #2b2b2b;           /* darker text */
  font-weight: 500;
}

/* inactive steps text */
#ordersteps .step:not(.active) span {
  color: #6b6b6b;
  font-weight: 500;
}

/* small helper text under steps */
#ordersteps small {
  color: #777;
}

/* ===============================
   GENERAL PAGE TEXT POLISH
   =============================== */

body {
  color: #2a2a2a;
}

h2, h3 {
  color: #1f1f1f;
  font-weight: 600;
}
/* REMOVE ALL WOOD / CURVE LAYERS — HOMEPAGE */
.home-content-mid .top-layer,
.home-content-mid .middle-layer,
.home-content-mid .bottom-layer {
  background: none !important;
  background-image: none !important;
  display: none !important;
  height: 0 !important;
}
/* ======================================
   HOWS-style About CTA (Warm Premium)
   ====================================== */

.home-about-cta {
  background: #faf8f4; /* warm off-white */
  padding: 120px 0;
  text-align: center;
}

/* Headline */
.home-about-cta .about-title {
  font-size: 50px;            /* slightly larger */
  font-weight: 300;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #2b2b2b;
  margin-bottom: 18px;
  position: relative;
}

/* Warm editorial divider */
.home-about-cta .about-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  background: #c9b37e; /* warm gold-beige */
  margin: 22px auto 0;
}

/* Body copy */
.home-about-cta .about-desc {
  max-width: 780px;
  margin: 36px auto 50px;
  font-size: 16px;           /* slightly larger */
  line-height: 1.9;
  color: #5f5f5f;
}

/* CTA button */
.home-about-cta .btn-about {
  display: inline-block;
  padding: 15px 44px;
  border: 1px solid #2b2b2b;
  color: #2b2b2b;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  transition: all 0.35s ease;
  background: transparent;
}

/* Hover = welcoming lift */
.home-about-cta .btn-about:hover {
  background: #2b2b2b;
  color: #ffffff;
  transform: translateY(-2px);
}

/* ======================================
   Premium Scroll Reveal (Slow + Soft)
   ====================================== */

.reveal {
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity 1.2s ease,
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Gentle stagger (CSS-only) */
.reveal.delay-1 {
  transition-delay: 0.15s;
}

.reveal.delay-2 {
  transition-delay: 0.3s;
}

.reveal.delay-3 {
  transition-delay: 0.45s;
}
/* ======================================
   Menu Showcase (Refined, Premium)
   ====================================== */

.home-menu-showcase {
  background: #faeed4;
  padding: 90px 0; /* tightened from 120px */
}

/* Text block */
.menu-showcase-title {
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 28px;              /* slightly tighter */
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #2a2a2a;
  margin-bottom: 16px;          /* tighter */
}

.menu-showcase-desc {
  font-size: 16px;              /* reduced from 20px */
  line-height: 1.75;            /* more readable */
  color: #5f5f5f;
  max-width: 420px;             /* prevents overly wide lines */
  margin-bottom: 28px;
}

/* CTA */
.menu-showcase-btn {
  display: inline-block;
  padding: 14px 40px;           /* slightly tighter */
  border: 1px solid #2a2a2a;
  color: #2a2a2a;
  font-size: 13px;              /* clearer CTA */
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.menu-showcase-btn:hover {
  background: #2a2a2a;
  color: #ffffff;
}

/* Images grid */
.menu-showcase-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;                    /* slightly tighter */
}

.menu-showcase-images img {
  width: 100%;
  border-radius: 8px;           /* more premium */
  object-fit: cover;
  display: block;
}

/* Mobile */
@media (max-width: 992px) {
  .home-menu-showcase {
    padding: 60px 0;
    text-align: center;
  }

  .menu-showcase-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .menu-showcase-images {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ======================================
   KG Catering Reviews — 3-up Slider
   ====================================== */

.home-reviews {
  background: #fbf9f6;
  padding: 110px 0;
  text-align: center;
}

.reviews-title {
  font-size: 32px;              /* ↑ bigger */
  font-weight: 600;
  letter-spacing: 1.2px;
  color: #222;
  margin-bottom: 14px;
}

.reviews-sub {
  font-size: 16px;              /* ↑ bigger */
  color: #666;
  margin-bottom: 56px;
}

/* Slider wrapper */
.reviews-slider {
  display: flex;
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto 50px;
}

/* Individual card */
.review-slide {
  flex: 1;
  background: #f7f7f7;
  padding: 46px 38px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
  opacity: 0;
  transform: translateY(16px);
  transition: all 0.6s ease;
}

.review-slide.active {
  opacity: 1;
  transform: translateY(0);
}

.stars {
  color: #c62828;
  font-size: 16px;              /* ↑ bigger */
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.review-text {
  font-size: 16px;              /* ↑ bigger */
  line-height: 1.85;
  color: #333;
  margin-bottom: 22px;
}

.review-author {
  font-size: 14px;              /* ↑ bigger */
  font-weight: 600;
  color: #555;
}

/* CTA — match View Our Menu */
.btn-reviews {
  display: inline-block;
  padding: 16px 46px;
  border: 1px solid #2a2a2a;
  color: #2a2a2a;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.btn-reviews:hover {
  background: #2a2a2a;
  color: #ffffff;
}

/* Mobile */
@media (max-width: 992px) {
  .reviews-slider {
    flex-direction: column;
    gap: 26px;
  }
}
body .home-reviews {
  padding: 20px 0 !important;
}.home-reviews .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* ===============================
   Full Viewport Hero Banner
   =============================== */

body.common-home .home-content-mid {
  height: 90vh;
  min-height: 720px;
  max-height: 980px;
  overflow: hidden;
}

/* Ensure all slider layers fill the hero */
body.common-home .home-content-mid .top-layer,
body.common-home .home-content-mid .middle-layer,
body.common-home .home-content-mid .bottom-layer {
  height: 100%;
}

/* MasterSlider core */
body.common-home .master-slider,
body.common-home .ms-view,
body.common-home .ms-slide {
  height: 100% !important;
}

/* Image behaviour */
body.common-home .ms-slide img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
/* =========================================
   Homepage Hero Banner – FINAL
   ========================================= */

/* Desktop banner */
body.common-home .home-content-mid {
    min-height: 520px; /* desktop banner height */
  display: flex;
  align-items: flex-end; /* keeps content inside at bottom if any */
  min-height: calc(100vh - 110px);
  background-image: url("https://www.kgcatering.com.sg/image/catalog/images/Homepage%20Banner/Banner.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* ======================
   Mobile banner
   ====================== */
@media (max-width: 768px) {
  body.common-home .home-content-mid {
      min-height: 420px;
    margin-top: 80px;
  }

  body.common-home .home-content-mid {
    min-height: calc(100vh - 80px);
    background-image: url("https://www.kgcatering.com.sg/image/catalog/images/Homepage%20Banner/Bannermobile.png") !important;
    background-position: center top !important;
  }
}
/* Prevent About section from touching banner */
.home-about-cta {
  margin-top: 60px;
}
/* Reviews page */
body.information-information .reviews-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 20px;
}

.reviews-hero {
  text-align: center;
  margin-bottom: 60px;
}

.reviews-hero h1 {
  font-size: 34px;
  font-weight: 600;
  margin-bottom: 12px;
}

.reviews-hero p {
  font-size: 16px;
  color: #666;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.review-card {
  background: #f7f7f7;
  padding: 36px 32px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
}

.review-card .stars {
  color: #c62828;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.review-card p {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 18px;
}

.review-card span {
  font-size: 13px;
  font-weight: 600;
  color: #555;
}

/* Mobile */
@media (max-width: 992px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }
}
/* Homepage review fade swap */
body.common-home .review-slide {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

body.common-home .review-slide.is-hidden {
  opacity: 0;
  transform: translateY(6px);
}
/* Desktop video overlay (safe mode) */
body.common-home .banner-video-desktop {
  position: absolute;
  inset: 0;
  z-index: 1;
}

body.common-home .banner-video-desktop video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Remove ONLY the empty spacer above homepage banner (mobile) */
@media (max-width: 767px) {
  body.common-home .home-content-mid {
    margin-top: -120px !important;
  }
}
/* FINAL DEFINITIVE FIX — collapse empty animated content wrapper on mobile */
@media (max-width: 767px) {
    

  /* Kill fake height caused by theme animation wrapper */
  body.common-home #content > div[style*="visibility"] {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Ensure parent does not reserve space */
  body.common-home #content {
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}
/* Hide homepage banner on mobile */
@media (max-width: 767px) {
  body.common-home .home-content-mid {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* STEP 2: Force actual header row into one line on mobile */
@media (max-width: 767px) {
  header .container > .row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}
/* STEP 3: Reduce logo size on mobile */
@media (max-width: 767px) {

  header #logo img {
    max-height: 80px !important;   /* smaller logo */
    width: auto !important;
    height: auto !important;
  }

  /* Remove logo background/box if any */
  header #logo,
  header .logo-box,
  header .logo-box-wrap {
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}
/* STEP 4: Fine-tune logo vertical position + clean burger */
@media (max-width: 767px) {

  /* Nudge logo down slightly */
  header #logo {
    margin-top: 18px !important;   /* adjust if needed */
  }
}
@media (max-width: 767px) {

  /* ===============================
     BURGER ICON — BLACK, LARGE, NO BOX
     =============================== */

  .navbar-toggle,
  .navbar-toggle i,
  .navbar-toggle i.fa,
  .navbar-toggle i.fa-bars,
  .navbar-toggle i.fa-bars:before {
    color: #000 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 28px !important;
    line-height: 1 !important;
  }

  /* Kill any SVG-based burger */
  .navbar-toggle svg,
  .navbar-toggle svg * {
    fill: #000 !important;
    stroke: #000 !important;
  }

  /* Ensure no red button background */
  .navbar-header button,
  .navbar-toggle {
    background-color: transparent !important;
  }

  /* Move burger slightly up */
  .navbar-toggle {
    position: relative !important;
    top: -18px !important;
  }

  /* ===============================
     MOBILE MENU — VERTICAL DROPDOWN
     =============================== */

  .navbar-collapse .nav {
    display: block !important;
    float: none !important;
    margin: 0 !important;
  }

  .navbar-collapse .nav > li {
    display: block !important;
    float: none !important;
    text-align: left !important;
    border-bottom: 1px solid #eee;
  }

  .navbar-collapse .nav > li > a {
    padding: 14px 16px !important;
    line-height: 1.4 !important;
  }

  /* ===============================
     HIDE ICONS + REMOVE EMPTY GAPS
     =============================== */

  /* Hide icons themselves */
  .navbar-collapse .fa,
  .navbar-collapse .glyphicon,
  .navbar-collapse i {
    display: none !important;
  }

  /* Remove leftover rows caused by hidden icons */
  .navbar-collapse li:has(.fa),
  .navbar-collapse li:has(.glyphicon),
  .navbar-collapse li.icon,
  .navbar-collapse li.divider {
    display: none !important;
  }

  /* Tighten spacing */
  .navbar-collapse ul,
  .navbar-collapse li {
    margin: 0 !important;
    padding: 0 !important;
  }

}
/* ===============================
   HOME – ORDER NOW (SEAMLESS / PREMIUM)
   =============================== */

.home-order-now-cta {
  text-align: center;
  padding: 12px 0 6px;   /* MUCH tighter */
  background: transparent;
}

/* ORDER NOW — larger, still seamless */
.btn-order-now {
  display: inline-block;
  padding: 14px 42px;          /* bigger tap target */
  border: 2px solid #c9a14a;   /* soft gold */
  color: #1f1f1f;
  text-decoration: none;
  font-size: 14px;             /* larger text */
  letter-spacing: 2.2px;
  font-weight: 600;
  background: transparent;
  transition: all 0.25s ease;
}

.btn-order-now:hover {
  background: #c9a14a;
  color: #fff;
  border-color: #c9a14a;
}

/* Mobile */
@media (max-width: 767px) {
  .btn-order-now {
    padding: 12px 36px;
    font-size: 20px;
    letter-spacing: 2px;
  }
}
/* =====================================
   CONTACT PAGE – FIX TITLE / MAP OVERLAP
   Desktop only
   ===================================== */

@media (min-width: 768px) {

  body.information-contact .page-title-margin {
    margin-bottom: 0 !important;
  }

}
/* ================================
   OUR STORY DROPDOWN — FINAL MATCH
   ================================ */

/* Dropdown container */
.our-story-menu .dropdown-menu {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-radius: 10px;
  padding: 6px 0;
  margin-top: 12px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.14);
}

/* Dropdown items */
.our-story-menu .dropdown-menu > li > a {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 9px 22px;
  line-height: 1.3;
  color: #222;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover state */
.our-story-menu .dropdown-menu > li > a:hover {
  background-color: #f5f5f5;
  color: #000;
}

/* Ensure nav + dropdown are identical */
.navbar-nav > li > a {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.kg-story {
  max-width: 860px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}
.kg-halal-link {
  margin-top: 12px;
}

.kg-halal-link a {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid #c9a14a;
  border-radius: 999px;
  color: #1f1f1f;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.25s ease;
}

.kg-halal-link a:hover {
  background: #c9a14a;
  color: #fff;
}
.kg-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.kg-subtitle {
  font-size: 22px;
  font-weight: 500;
  margin: 30px 0 12px;
}

.kg-intro {
  font-size: 17px;
  color: #444;
}

.kg-divider {
  border: none;
  border-top: 1px solid #e6e6e6;
  margin: 32px 0;
}

.kg-links {
  padding-left: 18px;
}

.kg-links li {
  margin: 8px 0;
}

.kg-links a {
  color: #b00000;
  text-decoration: none;
  font-weight: 500;
}

.kg-links a:hover {
  text-decoration: underline;
}
/* Scroll-in animation */
.kg-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.kg-animate.kg-visible {
  opacity: 1;
  transform: translateY(0);
}
/* ===============================
   WhatsApp Chat Popup
   =============================== */

/* Desktop */
.kg-wa-wrap {
  position: fixed;
  bottom: 75px;
  right: 33px;
  z-index: 9999;
}

/* Mobile */
@media (max-width: 768px) {
  .kg-wa-wrap {
    bottom: 52px;
    right: 30px;
  }
}

/* Floating Button */
.kg-wa-fab {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  border: none;
  font-size: 30px;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.kg-wa-fab i {
  font-size: 40px;   /* was too small */
  line-height: 56px;
  
}


/* Popup Box */
.kg-wa-popup {
  position: absolute;
  bottom: 72px;
  right: 0;
  width: 280px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.25);
  overflow: hidden;
  display: none;
}

/* Header */
.kg-wa-header {
  background: #f6a04d;
  color: #fff;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  position: relative;
}

.kg-wa-header span {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.9;
}

.kg-wa-close {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
}

/* Body */
.kg-wa-body {
  padding: 16px;
  text-align: center;
}

.kg-wa-start {
  display: block;
  background: #25D366;
  color: #fff;
  padding: 12px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
}

.kg-wa-start i {
  margin-right: 6px;
}

/* Mobile tweak */
@media (max-width: 768px) {
  .kg-wa-popup {
    width: 260px;
  }
}
/* Desktop – keep your working alignment */
@media (min-width: 769px) {
  .pax-combo-row {
    position: relative;
    left: -14px;
  }
}
/* FORCE white header background on mobile */
@media (max-width: 768px) {
  header,
  header .container,
  header .navbar,
  header .navbar-header {
    background: #ffffff !important;
  }
}
.pax-combo-row {
  margin-top: 0 !important;
  position: relative;
  top: -20px;
}
/* ===============================
   PREMIUM FLOATING NEXT BUTTON
   =============================== */

#floating-next {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
}

/* Core button */
#btnNextFloating {
  background: linear-gradient(135deg, #111111, #2b2b2b) !important;
  color: #ffffff !important;

  border: none !important;
  border-radius: 999px !important;

  padding: 14px 26px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px;
  text-transform: uppercase;

  box-shadow:
    0 10px 28px rgba(0,0,0,0.28),
    inset 0 0 0 1px rgba(255,255,255,0.06);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease,
    opacity 0.25s ease;
}

/* Subtle idle pulse (premium cue) */
#btnNextFloating:not(.disabled) {
  animation: nextPulse 2.8s ease-in-out infinite;
}

@keyframes nextPulse {
  0%, 100% {
    box-shadow:
      0 10px 28px rgba(0,0,0,0.28),
      inset 0 0 0 1px rgba(255,255,255,0.06);
  }
  50% {
    box-shadow:
      0 14px 36px rgba(0,0,0,0.36),
      inset 0 0 0 1px rgba(255,255,255,0.09);
  }
}

/* Hover (desktop only) */
@media (hover: hover) {
  #btnNextFloating:not(.disabled):hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #1a1a1a, #333333) !important;
    box-shadow:
      0 18px 46px rgba(0,0,0,0.42),
      inset 0 0 0 1px rgba(255,255,255,0.12);
  }
}

/* Press feedback */
#btnNextFloating:not(.disabled):active {
  transform: translateY(0);
  box-shadow:
    0 8px 20px rgba(0,0,0,0.3);
}

/* Disabled state */
#btnNextFloating.disabled {
  opacity: 0.38 !important;
  animation: none;
  box-shadow: none;
  cursor: not-allowed;
}

/* Arrow cue */
#btnNextFloating::after {
  content: " →";
  font-size: 15px;
  margin-left: 6px;
  opacity: 0.85;
}

/* Hide original bottom buttons */
.btn-order-nav {
  visibility: hidden;
}

/* ===============================
   MOBILE TUNING
   =============================== */
@media (max-width: 768px) {
  #floating-next {
    right: 14px;
    bottom: 14px;
  }

  #btnNextFloating {
    padding: 11px 18px !important;
    font-size: 12px !important;
    letter-spacing: 0.5px;
  }

  #btnNextFloating::after {
    font-size: 14px;
  }
}
/* =====================================================
   CART PAGE — SAFE MOBILE FIX (NO CARD LAYOUT)
   PASTE AS-IS
   ===================================================== */

/* ===============================
   GLOBAL — REMOVE GREY BACKGROUND
   =============================== */
body.checkout-cart table.table,
body.checkout-cart table.table tbody tr,
body.checkout-cart table.table tbody td {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Keep table borders clean */
body.checkout-cart table.table {
  border-collapse: collapse;
}

/* Light row divider only */
body.checkout-cart table.table tbody tr {
  border-bottom: 1px solid #e5e5e5;
}

/* ===============================
   CONTENT SPACING (SAFE) — TIGHT DISH LIST
   =============================== */

/* Remove all vertical gaps in dish list */
body.checkout-cart .table-cart ul,
body.checkout-cart .table-cart li {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
}

/* Remove paragraph spacing inside item cell */
body.checkout-cart .table-cart p {
  margin: 0 !important;
  padding: 0 !important;
}

/* ===============================
   FIX META INFO LINE BREAKS
   =============================== */

/* Default: remove <br> (for dishes) */
body.checkout-cart .table-cart br {
  display: none !important;
}

/* Restore line breaks ONLY for meta info (date, time, order type, beverage) */
body.checkout-cart .table-cart td:first-child br {
  display: block !important;
}

/* Keep text wrapping normal */
body.checkout-cart .table-cart td {
  white-space: normal !important;
}

/* ===============================
   REMOVE BUTTON — ICON ONLY
   =============================== */
body.checkout-cart .btn-danger {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: #b81914 !important;
  font-size: 14px;
}

/* ===============================
   MOBILE ONLY FIXES
   =============================== */
@media (max-width: 767px) {

  /* Hide unit price */
  body.checkout-cart table.table thead td:nth-child(3),
  body.checkout-cart table.table tbody td:nth-child(3) {
    display: none !important;
  }

  /* Position remove icon top-right */
  body.checkout-cart table.table tbody tr {
    position: relative;
  }

  body.checkout-cart table.table tbody td:nth-child(4) {
    position: absolute;
    top: 10px;
    right: 10px;
    width: auto !important;
    padding: 0 !important;
    text-align: right !important;
  }

  /* Quantity stays inline */
  body.checkout-cart table.table tbody td:nth-child(2) {
    padding-top: 8px !important;
  }

  /* ===============================
     TOTALS — SMALL & FLAT
     =============================== */
  body.checkout-cart .cart-total,
  body.checkout-cart .table-cart + div {
    background: transparent !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
    margin-top: 12px !important;
  }

  body.checkout-cart .cart-total td {
    font-size: 12.5px;
    padding: 4px 0;
  }

  body.checkout-cart .cart-total tr:last-child td {
    font-weight: 700;
    font-size: 13.5px;
  }

  /* Buttons — full width */
  body.checkout-cart .btn-default,
  body.checkout-cart .btn-primary {
    width: 100%;
    border-radius: 999px;
    padding: 13px;
    font-size: 14px;
  }

  body.checkout-cart .btn-default {
    margin-bottom: 10px;
  }
}
/* =====================================================
   CART — INCREASE ITEM(S) COLUMN WIDTH (SAFE)
   ===================================================== */

/* Desktop + Mobile */
body.checkout-cart table.table {
  table-layout: fixed; /* allow width control */
}

/* ITEM(S) column wider */
body.checkout-cart table.table thead td:nth-child(1),
body.checkout-cart table.table tbody td:nth-child(1) {
  width: 55%;
}

/* Quantity column wider */
body.checkout-cart table.table thead td:nth-child(2),
body.checkout-cart table.table tbody td:nth-child(2) {
  width: 20%;
}

/* Unit price column */
body.checkout-cart table.table thead td:nth-child(3),
body.checkout-cart table.table tbody td:nth-child(3) {
  width: 10%;
}

/* Remove column */
body.checkout-cart table.table thead td:nth-child(4),
body.checkout-cart table.table tbody td:nth-child(4) {
  width: 10%;
}
/* =========================================
   CART — FORCE BUFFET ITEMS LEFT-ALIGNED
   ========================================= */

/* Force ITEM(S) column content left */
body.checkout-cart .table-cart tbody td:first-child {
  text-align: left !important;
}

/* Ensure dish text stays left */
body.checkout-cart .table-cart tbody td:first-child,
body.checkout-cart .table-cart tbody td:first-child * {
  text-align: left !important;
}
/* Cart: hide refresh icon but keep logic */
body.checkout-cart .btn-inverse {
  opacity: 0;
  pointer-events: none;
  width: 0;
  padding: 0;
  margin: 0;
}
/* ===============================
   CART — GLOBAL TEXT SIZE CONTROL
   =============================== */
@media (min-width: 992px) {
body.checkout-cart {
  font-size: 14px;          /* 👈 change this number */
  line-height: 1.6;
}
/* =====================================
   CART — DELIVERY CHARGE TEXT ONLY TWEAK
   ===================================== */

  /* Make label red + clean */
  body.checkout-cart .delivery-charge-link {
    color: #b81914 !important;
    font-weight: 700;
    text-decoration: underline;
  }

  /* Move ONLY the text left, not the row */
  body.checkout-cart .delivery-charge-text {
    padding-left: 8px !important;  /* 👈 text shift */
    white-space: nowrap;           /* no wrap */
    color: #080707 !important;
    font-weight: 500;
  }

}
/* WhatsApp popup text formatting */
.kg-wa-header #kgWaStatus {
  font-size: 14px;
  line-height: 1.4;
}

/* Second line (smaller + divider) */
.kg-wa-header .wa-note {
  display: block;
  font-size: 12px;
  color: #fff;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.3);
}
/* Section headers: MAINS / SAVOURY TREATS */
body.product-product .subcat-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.8px;
  color: #b81914; /* KG red */
  text-transform: uppercase;
}
/* Dish names */
body.product-product .subcat-items .checkbox label {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.2px;
}
/* ===============================
   REMOVE HOVER LINE FROM ICON LINKS
   =============================== */

/* Target ONLY the icon menu (login + cart) */
.navbar-nav li[style*="display:flex"] a:after,
.navbar-nav li[style*="display:flex"] a:before {
  display: none !important;
  content: none !important;
  border: 0 !important;
}
/* ================================
   FORCE REMOVE REQUIRED ASTERISK
   (QuickCheckout – ALL VARIANTS)
   ================================ */

/* Kill pseudo-element stars */
#quickcheckoutconfirm label.control-label:after,
#quickcheckoutconfirm .control-label:after,
#quickcheckoutconfirm .required .control-label:after,
#quickcheckoutconfirm .control-label.required:after {
  content: none !important;
  display: none !important;
}

/* Kill literal star nodes if any */
#quickcheckoutconfirm label.control-label * {
  display: none !important;
}

/* Safety: prevent future injections */
#quickcheckoutconfirm label.control-label {
  position: relative;
}
/* ================================
   REMOVE REQUIRED ASTERISK (QC)
   ================================ */
#quickcheckoutconfirm div.required > .control-label:before {
  content: none !important;
  display: none !important;
}
/* ===============================
   FIXED SLIDING TOGGLE
   =============================== */

/* Hide checkbox ONLY for toggle fields */
#quickcheckoutconfirm input#create,
#quickcheckoutconfirm input#shipping {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* LABEL = POSITION CONTEXT */
#quickcheckoutconfirm input[type="checkbox"] + label {
  position: relative; /* 🔑 CRITICAL FIX */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 420px;
  padding: 12px 16px;
  margin: 12px 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  transition: border-color 0.25s ease, background 0.25s ease;
}

/* TOGGLE TRACK */
#quickcheckoutconfirm input[type="checkbox"] + label::after {
  content: "";
  width: 44px;
  height: 22px;
  background: #e0e0e0;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background 0.25s ease;
}

/* TOGGLE KNOB */
#quickcheckoutconfirm input[type="checkbox"] + label::before {
  content: "";
  position: absolute;
  right: 20px;          /* 🔑 now relative to label */
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.25s ease;
}

/* ON STATE */
#quickcheckoutconfirm input[type="checkbox"]:checked + label {
  border-color: #c40000;
  background: #fff5f5;
}

#quickcheckoutconfirm input[type="checkbox"]:checked + label::after {
  background: #c40000;
}

#quickcheckoutconfirm input[type="checkbox"]:checked + label::before {
  transform: translateX(22px);
}
/* Desktop only: move Delivery / Self-Collection pills left */
@media (min-width: 992px) {
    #shipping-method table {
        margin-left: -14px;
    }
}
/* =====================================
   Home "ORDER NOW" CTA
   Mobile only – prevent desktop flash
===================================== */

/* Hide by default (desktop + initial load) */
.home-order-now-cta {
  display: none !important;
}

/* Show only on mobile */
@media (max-width: 767px) {
  .home-order-now-cta {
    display: block !important;
  }
}