/* ================================================================
   woocommerce.css  —  JamRock Bistro WooCommerce overrides
   Place at: yourtheme/assets/css/woocommerce.css
   Enqueue in functions.php with wp_enqueue_style()
   ================================================================ */


/* ----------------------------------------------------------------
   0. DESIGN TOKENS (fallbacks if :root not loaded yet)
   ---------------------------------------------------------------- */
:root {
  --orange:      #E8591A;
  --orange-dark: #C44A12;
  --gold:        #D4A017;
  --cream:       #FDF6EE;
  --cream2:      #F5EBE0;
  --cream3:      #EDE0D0;
  --ink:         #1C1410;
  --ink3:        #6B5B50;
  --ink4:        #9C8B7E;
  --green:       #2D5016;
  --nav-h:       72px;
  --radius:      8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --shadow:      0 4px 24px rgba(28,20,16,.10);
  --shadow-lg:   0 12px 48px rgba(28,20,16,.18);
  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-body:   'Outfit', sans-serif;
  --transition:  .28s cubic-bezier(.4,0,.2,1);
}


/* ----------------------------------------------------------------
   1. FIX BROKEN HEADER
      Problem: WC admin bar (32px) + your fixed nav (72px) stack,
      pushing content down wrong, and the nav itself goes behind the
      WP admin toolbar.
   ---------------------------------------------------------------- */

/* When admin bar is showing (logged-in), push nav down below it */
.admin-bar #main-nav {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  .admin-bar #main-nav {
    top: 46px !important;
  }
}

/* Body padding: nav height + optional admin bar */
body.woocommerce,
body.woocommerce-page {
  padding-top: var(--nav-h) !important;
}
.admin-bar body.woocommerce,
.admin-bar body.woocommerce-page,
body.admin-bar.woocommerce,
body.admin-bar.woocommerce-page {
  padding-top: calc(var(--nav-h) + 32px) !important;
}
@media screen and (max-width: 782px) {
  .admin-bar body.woocommerce,
  body.admin-bar.woocommerce,
  body.admin-bar.woocommerce-page {
    padding-top: calc(var(--nav-h) + 46px) !important;
  }
}

/* Nav must sit ABOVE admin bar content */
#main-nav {
  z-index: 99998 !important;
}


/* ----------------------------------------------------------------
   2. HIDE WC CLUTTER WE DON'T WANT
   ---------------------------------------------------------------- */

/* Result count ("Showing 1–16 of 28") */
.woocommerce-result-count { display: none !important; }

/* Default sorting dropdown */
.woocommerce-ordering       { display: none !important; }

/* WC "New in store" heading on empty cart/checkout — hide title + separator only, keep products */
.wp-block-woocommerce-empty-cart-block .wp-block-heading,
.wp-block-woocommerce-empty-cart-block .wp-block-separator,
.wc-block-cart__empty-cart__default .wp-block-heading,
.wc-block-cart__empty-cart__default .wp-block-separator {
    display: none !important;
}

/* WC breadcrumb */
.woocommerce-breadcrumb     { display: none !important; }

/* WC default loop title, price, button  (we render our own) */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product > .price,
.woocommerce ul.products li.product > .button,
.woocommerce ul.products li.product .woocommerce-loop-category__title {
  display: none !important;
}


/* ----------------------------------------------------------------
   3. MENU HERO
   ---------------------------------------------------------------- */
.menu-hero {
  background:   var(--cream2);
  padding:      60px 40px 40px;
  text-align:   center;
  border-bottom: 1px solid var(--cream3);
}
.menu-hero .section-label {
  display:         block;
  font-size:       11px;
  font-weight:     700;
  letter-spacing:  .18em;
  text-transform:  uppercase;
  color:           var(--orange);
  margin-bottom:   10px;
}
.menu-hero h1 {
  font-family:    var(--font-display);
  font-size:      clamp(36px, 6vw, 72px);
  font-weight:    700;
  color:          var(--ink);
  letter-spacing: -.03em;
  line-height:    1.05;
  margin:         0 0 10px;
}
.menu-hero p {
  font-size:  16px;
  color:      var(--ink3);
  max-width:  540px;
  margin:     0 auto;
}


/* ----------------------------------------------------------------
   4. FILTER BAR
   ---------------------------------------------------------------- */
.menu-filter-bar {
  position:         sticky !important;
  top:              var(--nav-h) !important;
  z-index:          800 !important;
  background:       rgba(255,255,255,0.95) !important;
  backdrop-filter:  blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border-bottom:    1px solid var(--cream3) !important;
  padding:          12px 20px !important;
  margin:           0 !important;
  box-shadow:       0 4px 12px rgba(0,0,0,0.03) !important;
}
/* Push sticky point down when admin bar present */
.admin-bar .menu-filter-bar {
  top: calc(var(--nav-h) + 32px) !important;
}
@media screen and (max-width: 991px) {
  .menu-filter-bar {
    padding: 10px 15px !important;
  }
}
@media screen and (max-width: 782px) {
  .admin-bar .menu-filter-bar { top: calc(var(--nav-h) + 46px) !important; }
}

.menu-filter-bar .filter-inner {
  display:         flex !important;
  gap:             8px !important;
  flex-wrap:       wrap !important;
  justify-content: center !important;
  max-width:       1160px !important;
  margin:          0 auto !important;
}

.filter-btn {
  display:         inline-flex !important;
  align-items:     center !important;
  gap:             6px !important;
  font-family:     var(--font-body) !important;
  font-size:       13px !important;
  font-weight:     600 !important;
  padding:         7px 18px !important;
  border-radius:   100px !important;
  border:          1.5px solid var(--cream3) !important;
  background:      white !important;
  color:           var(--ink3) !important;
  cursor:          pointer !important;
  transition:      all .25s ease !important;
  text-decoration: none !important;
  white-space:     nowrap !important;
  line-height:     1.4 !important;
}
.filter-btn:hover {
  border-color: var(--orange) !important;
  color:        var(--orange) !important;
}
.filter-btn.active {
  background:   var(--orange) !important;
  border-color: var(--orange) !important;
  color:        white !important;
}


/* ----------------------------------------------------------------
   5. PRODUCT SECTION WRAPPER
   ---------------------------------------------------------------- */
.jamrock-menu-section {
  background: var(--cream);
  padding:    40px 40px 80px;
}
.jamrock-menu-section .container {
  max-width: 1160px;
  margin:    0 auto;
}


/* ----------------------------------------------------------------
   6. PRODUCT GRID  (override WC floats with CSS Grid)
   ---------------------------------------------------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display:               grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap:                   24px !important;
  list-style:            none !important;
  padding:               0 !important;
  margin:                0 !important;
  float:                 none !important;
  clear:                 both !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  display: none !important;
  content: none !important;
}


/* ----------------------------------------------------------------
   7. PRODUCT CARD
   ---------------------------------------------------------------- */
.woocommerce ul.products li.product.menu-item-card,
.woocommerce-page ul.products li.product.menu-item-card {
  float:          none !important;
  width:          100% !important;
  margin:         0 !important;
  padding:        0 !important;
  clear:          none !important;
  background:     white !important;
  border-radius:  var(--radius-lg) !important;
  overflow:       hidden !important;
  box-shadow:     var(--shadow) !important;
  transition:     transform var(--transition), box-shadow var(--transition) !important;
  display:        flex !important;
  flex-direction: column !important;
  cursor:         pointer !important;
  position:       relative !important;
}
.woocommerce ul.products li.product.menu-item-card:hover,
.woocommerce-page ul.products li.product.menu-item-card:hover {
  transform:  translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
}


/* ----------------------------------------------------------------
   8. CARD IMAGE
   ---------------------------------------------------------------- */
.menu-item-card .menu-item-img {
  height:   240px !important;
  overflow: hidden !important;
  position: relative !important;
  flex-shrink: 0 !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.menu-item-card .menu-item-img img {
  width:       100% !important;
  height:      100% !important;
  object-fit:  contain !important;
  display:     block !important;
  transition:  transform .5s ease !important;
}
.menu-item-card:hover .menu-item-img img {
  transform: scale(1.04) !important;
}

/* Chef badge */
.menu-item-card .chef-badge {
  position:      absolute !important;
  top:           12px !important;
  right:         12px !important;
  background:    var(--gold) !important;
  color:         var(--ink) !important;
  font-size:     10px !important;
  font-weight:   800 !important;
  padding:       4px 12px !important;
  border-radius: 100px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  z-index:       2 !important;
}


/* ----------------------------------------------------------------
   9. CARD BODY
   ---------------------------------------------------------------- */
.menu-item-card .menu-item-body {
  padding:        24px !important;
  flex-grow:      1 !important;
  display:        flex !important;
  flex-direction: column !important;
}
.menu-item-card .menu-item-body h3 {
  font-size:   18px !important;
  font-weight: 700 !important;
  color:       var(--ink) !important;
  margin:      0 0 8px !important;
  line-height: 1.3 !important;
}
.menu-item-card .menu-item-body p {
  font-size:   14px !important;
  color:       var(--ink3) !important;
  margin:      0 0 16px !important;
  line-height: 1.6 !important;
  flex-grow:   1 !important;
}

.menu-item-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
}
.menu-item-header h3 {
  font-size:   18px !important;
  font-weight: 700 !important;
  color:       var(--ink) !important;
  margin:      0 !important;
  line-height: 1.3 !important;
}
.menu-item-header .menu-item-price {
  font-family: var(--font-display) !important;
  font-size:   18px !important;
  font-weight: 700 !important;
  color:       var(--orange) !important;
  white-space: nowrap !important;
}


/* ----------------------------------------------------------------
   10. TAGS
   ---------------------------------------------------------------- */
.menu-item-card .menu-tags {
  display:     flex !important;
  gap:         5px !important;
  flex-wrap:   wrap !important;
  margin-bottom: 8px !important;
}
.menu-tag {
  font-size:     10px !important;
  font-weight:   600 !important;
  padding:       3px 8px !important;
  border-radius: 100px !important;
  background:    var(--cream2) !important;
  color:         var(--ink3) !important;
  letter-spacing: .04em !important;
}
.menu-tag.spicy   { background: #FEE9E2 !important; color: #C44A12 !important; }
.menu-tag.vegan   { background: #E8F4E8 !important; color: #2D5016 !important; }
.menu-tag.special { background: #FDF5E0 !important; color: #8A6308 !important; }


/* ----------------------------------------------------------------
   11. CARD FOOTER  (price + add button)
   ---------------------------------------------------------------- */
.menu-item-card .menu-item-footer {
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  padding-top:     14px !important;
  border-top:      1px solid var(--cream3) !important;
  margin-top:      auto !important;
}
.menu-item-tags-wrap {
  flex: 1 !important;
  overflow: hidden !important;
}
.menu-item-card .menu-tags {
  display:     flex !important;
  gap:         4px !important;
  flex-wrap:   wrap !important;
}
.menu-item-card .add-btn {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           36px !important;
  height:          36px !important;
  border-radius:   50% !important;
  background:      var(--orange) !important;
  color:           white !important;
  border:          none !important;
  cursor:          pointer !important;
  text-decoration: none !important;
  transition:      background var(--transition), transform var(--transition) !important;
  flex-shrink:     0 !important;
}
.menu-item-card .add-btn:hover {
  background: var(--orange-dark, #C44A12) !important;
  transform:  scale(1.1) !important;
}


/* ----------------------------------------------------------------
   12. QUICK-VIEW MODAL  (mirrors HTML prototype)
   ---------------------------------------------------------------- */
.modal-overlay {
  position:        fixed !important;
  inset:           0 !important;
  background:      rgba(0,0,0,.6) !important;
  z-index:         99999 !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  padding:         20px !important;
  opacity:         0 !important;
  pointer-events:  none !important;
  transition:      opacity var(--transition) !important;
}
.modal-overlay.open {
  opacity:        1 !important;
  pointer-events: all !important;
}

.item-modal {
  background:    white !important;
  width:         100% !important;
  max-width:     820px !important;
  border-radius: var(--radius-xl) !important;
  overflow:      hidden !important;
  display:       grid !important;
  grid-template-columns: 1fr 1.1fr !important;
  box-shadow:    var(--shadow-lg) !important;
  transform:     translateY(24px) !important;
  transition:    transform .35s ease !important;
  max-height:    90vh !important;
  overflow-y:    auto !important;
}
@media (max-width: 768px) {
  .item-modal {
    grid-template-columns: 1fr !important;
    max-width: 480px !important;
    width: 95% !important;
    max-height: 90vh !important;
    margin: 10px auto !important;
  }
}
.modal-overlay.open .item-modal {
  transform: translateY(0) !important;
}

.item-modal-img {
  position: relative !important;
  min-height: 350px !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
@media (max-width: 991px) {
  .item-modal-img {
    min-height: 300px !important;
    height: 300px !important;
  }
}
@media (max-width: 768px) {
  .item-modal-img {
    min-height: 250px !important;
    height: 250px !important;
  }
}
.item-modal-img img {
  position:   absolute !important;
  inset:      0 !important;
  width:      100% !important;
  height:     100% !important;
  object-fit: contain !important;
}
.item-modal-close {
  position:      absolute !important;
  top:           14px !important;
  left:          14px !important;
  z-index:       5 !important; /* Above everything */
  width:         36px !important;
  height:        36px !important;
  border-radius: 50% !important;
  background:    white !important;
  color:         var(--ink) !important;
  display:       flex !important;
  align-items:   center !important;
  justify-content: center !important;
  font-size:     18px !important;
  font-weight:   700 !important;
  box-shadow:    0 2px 12px rgba(0,0,0,0.2) !important;
  cursor:        pointer !important;
  border:        none !important;
  line-height:   1 !important;
  transition:    all var(--transition) !important;
}
@media (max-width: 768px) {
  .item-modal-close {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    background: rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(4px) !important;
  }
}
.item-modal-close:hover { background: var(--orange) !important; color: white !important; }

.item-modal-body {
  padding:        40px !important;
  display:        flex !important;
  flex-direction: column !important;
  overflow-y:     auto !important;
}
@media (max-width: 768px) {
  .item-modal-body {
    padding: 24px !important;
  }
}
.item-modal-body h2 {
  font-family:    var(--font-display) !important;
  font-size:      clamp(22px, 3vw, 30px) !important;
  font-weight:    700 !important;
  color:          var(--ink) !important;
  margin:         8px 0 12px !important;
  line-height:    1.15 !important;
}
.item-modal-body > p {
  font-size:   15px !important;
  color:       var(--ink3) !important;
  line-height: 1.65 !important;
  margin-bottom: 24px !important;
}

/* Modifier groups (size/variation) */
.modifier-group {
  margin-bottom: 24px !important;
}
.modifier-group h4 {
  font-size:      12px !important;
  font-weight:    700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color:          var(--ink) !important;
  margin-bottom:  10px !important;
}
.modifier-options {
  display:   flex !important;
  flex-wrap: wrap !important;
  gap:       8px !important;
}
.mod-option {
  padding:       8px 16px !important;
  border-radius: 100px !important;
  border:        1.5px solid var(--cream3) !important;
  font-size:     13px !important;
  font-weight:   600 !important;
  cursor:        pointer !important;
  transition:    all var(--transition) !important;
  color:         var(--ink2, #3A2E28) !important;
  background:    white !important;
}
.mod-option:hover { border-color: var(--orange) !important; color: var(--orange) !important; }
.mod-option.selected {
  border-color: var(--orange) !important;
  background:   var(--orange) !important;
  color:        white !important;
}

/* Modal footer */
.modal-footer {
  display:      flex !important;
  align-items:  center !important;
  gap:          16px !important;
  margin-top:   auto !important;
  padding-top:  24px !important;
  border-top:   1px solid var(--cream3) !important;
  flex-wrap:    wrap !important;
}
.qty-stepper {
  display:       flex !important;
  align-items:   center !important;
  gap:           12px !important;
  background:    var(--cream2) !important;
  padding:       6px 10px !important;
  border-radius: 100px !important;
}
.qty-stepper-btn {
  width:           30px !important;
  height:          30px !important;
  border-radius:   50% !important;
  background:      white !important;
  color:           var(--ink) !important;
  font-size:       18px !important;
  font-weight:     700 !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  border:          none !important;
  cursor:          pointer !important;
  box-shadow:      0 1px 4px rgba(0,0,0,.08) !important;
  line-height:     1 !important;
  transition:      all var(--transition) !important;
}
.qty-stepper-btn:hover { background: var(--orange) !important; color: white !important; }

#jr-qty-num {
  font-size:   16px !important;
  font-weight: 700 !important;
  min-width:   24px !important;
  text-align:  center !important;
  color:       var(--ink) !important;
}
.modal-price {
  font-family: var(--font-display) !important;
  font-size:   26px !important;
  font-weight: 700 !important;
  color:       var(--orange) !important;
  flex:        1 !important;
  text-align:  right !important;
}

@media (max-width: 600px) {
  .modal-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 24px !important;
    text-align: center !important;
  }
  .qty-stepper {
    order: 1 !important;
    flex: 0 0 auto !important;
    margin: 0 auto !important;
  }
  .modal-price {
    order: 2 !important;
    flex: 1 1 100% !important;
    font-size: 32px !important;
    text-align: center !important;
    margin: 10px 0 !important;
  }
  #jr-add-btn {
    order: 3 !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding: 16px !important;
    font-size: 16px !important;
  }
}

/* ----------------------------------------------------------------
   13. PAGINATION
   ---------------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination {
  display: none !important; /* Completely removed as requested */
}
.woocommerce nav.woocommerce-pagination ul {
  display:     inline-flex !important;
  gap:         6px !important;
  list-style:  none !important;
  padding:     0 !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  width:           38px !important;
  height:          38px !important;
  border-radius:   50% !important;
  border:          1.5px solid var(--cream3) !important;
  font-family:     var(--font-body) !important;
  font-size:       14px !important;
  font-weight:     600 !important;
  color:           var(--ink3) !important;
  text-decoration: none !important;
  transition:      all .2s ease !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: var(--orange) !important;
  color:        var(--orange) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background:   var(--orange) !important;
  border-color: var(--orange) !important;
  color:        white !important;
}


/* ----------------------------------------------------------------
   15. CART PAGE
   ---------------------------------------------------------------- */
.woocommerce-cart .entry-content,
.woocommerce-cart .jamrock-menu-section {
  padding: 60px 20px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}

/* Cart Table */
.woocommerce-cart table.cart {
  border-collapse: separate !important;
  border-spacing: 0 12px !important;
  border: none !important;
  background: transparent !important;
  width: 100% !important;
}
.woocommerce-cart table.cart thead {
  background: var(--cream2) !important;
}
.woocommerce-cart table.cart thead th {
  padding: 15px !important;
  border: none !important;
  font-family: var(--font-body) !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: .05em !important;
}
.woocommerce-cart table.cart tr.cart_item {
  background: white !important;
  box-shadow: var(--shadow) !important;
}
.woocommerce-cart table.cart td {
  border: none !important;
  padding: 20px !important;
  vertical-align: middle !important;
}
.woocommerce-cart table.cart td.product-thumbnail img {
  width: 70px !important;
  height: 70px !important;
  object-fit: cover !important;
  border-radius: var(--radius) !important;
}
.woocommerce-cart table.cart td.product-name a {
  font-weight: 700 !important;
  color: var(--ink) !important;
  font-size: 16px !important;
  text-decoration: none !important;
}

/* Cart Totals */
.cart-collaterals {
  margin-top: 50px !important;
  display: flex !important;
  justify-content: flex-end !important;
}
.cart_totals {
  background: white !important;
  padding: 40px !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--cream3) !important;
  width: 100% !important;
  max-width: 450px !important;
}
.cart_totals h2 {
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  margin-bottom: 24px !important;
  border-bottom: 1px solid var(--cream3) !important;
  padding-bottom: 15px !important;
}
.cart_totals .checkout-button {
  background: var(--orange) !important;
  color: white !important;
  font-weight: 700 !important;
  padding: 18px !important;
  border-radius: 100px !important;
  text-align: center !important;
  display: block !important;
  margin-top: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}


/* ----------------------------------------------------------------
   16. CHECKOUT PAGE
   ---------------------------------------------------------------- */
.woocommerce-checkout .entry-content,
.woocommerce-checkout .jamrock-menu-section {
  padding: 60px 20px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}

.woocommerce-checkout #customer_details, 
.woocommerce-checkout #order_review {
  background: white !important;
  padding: 40px !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--cream3) !important;
  margin-bottom: 40px !important;
}

.woocommerce-checkout h3 {
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  margin-bottom: 30px !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--cream3) !important;
  padding-bottom: 10px !important;
}

/* Custom Pickup/Delivery Section */
.jamrock-order-type-wrap {
  background: var(--cream2) !important;
  padding: 25px !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 30px !important;
}
.jamrock-order-type-wrap label {
  font-weight: 700 !important;
  display: block !important;
  margin-bottom: 10px !important;
  font-size: 16px !important;
}

/* Payment Section Styling */
#payment {
  background: #fdfaf7 !important;
  border-radius: var(--radius-lg) !important;
  padding: 30px !important;
  border: 1px solid var(--cream3) !important;
}
#place_order {
  width: 100% !important;
  background: var(--orange) !important;
  color: white !important;
  font-weight: 700 !important;
  padding: 18px !important;
  border-radius: 100px !important;
  font-size: 18px !important;
  text-transform: uppercase !important;
  margin-top: 20px !important;
}


/* ----------------------------------------------------------------
   18. WOOCOMMERCE BLOCKS (Modern Cart/Checkout)
   ---------------------------------------------------------------- */

/* Main Wrapper */
.wc-block-cart,
.wc-block-checkout {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 32px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 60px 20px !important;
  align-items: flex-start !important;
}

/* Left Column (Items/Fields) */
.wc-block-cart__main,
.wc-block-checkout__main,
.woocommerce-cart-form,
#customer_details {
  flex: 1 1 65% !important;
  min-width: 0 !important;
  background: white !important;
  padding: 40px !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--cream3) !important;
}

/* Right Column (Totals/Review) */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar,
.cart-collaterals,
#order_review {
  flex: 0 0 350px !important;
  width: 350px !important;
  background: white !important;
  padding: 40px !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--cream3) !important;
  position: sticky !important;
  top: calc(var(--nav-h) + 20px) !important;
}

/* Classic Overrides for Flex */
.woocommerce-cart .entry-content .woocommerce,
.woocommerce-checkout form.checkout {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 32px !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
}

/* Full Width for Mobile */
@media (max-width: 1024px) {
  .wc-block-cart, .wc-block-checkout,
  .woocommerce-cart .entry-content .woocommerce,
  .woocommerce-checkout form.checkout {
    flex-direction: column !important;
  }
  .wc-block-cart__sidebar,
  .wc-block-checkout__sidebar,
  .cart-collaterals,
  #order_review {
    flex: 1 1 auto !important;
    width: 100% !important;
    position: static !important;
  }
}

/* ── Block Specific Styling Refinements ── */
.wc-block-cart-items { border: none !important; }
.wc-block-cart-item { padding: 24px 0 !important; border-bottom: 1px solid var(--cream3) !important; }
.wc-block-cart-item__image img { border-radius: var(--radius) !important; box-shadow: 0 2px 8px rgba(0,0,0,.05) !important; }
.wc-block-cart-item__product-name { font-weight: 700 !important; color: var(--ink) !important; font-size: 18px !important; }

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--orange) !important;
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
}

.wc-block-components-button:not(.is-link) {
  background-color: var(--orange) !important;
  color: white !important;
  border-radius: 100px !important;
  padding: 18px 32px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
}
.wc-block-components-button:hover { background-color: var(--orange-dark) !important; }


/* ----------------------------------------------------------------
   19. RESPONSIVE POLISH
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .wc-block-cart__main,
  .wc-block-checkout__main,
  .wc-block-cart__sidebar,
  .wc-block-checkout__sidebar {
    padding: 24px !important;
  }
  .wc-block-components-checkout-step {
    padding: 0 !important; /* Let the main container handle padding */
  }
}

/* Perfect Product Card Grid Responsiveness on Mobile */
@media (max-width: 576px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  .menu-item-card .menu-item-img {
    height: 180px !important;
  }
  
  .menu-item-card .menu-item-body {
    padding: 16px !important;
  }
}

/* ----------------------------------------------------------------
   20. CUSTOM SIDE CHOICE DROPDOWN
   ---------------------------------------------------------------- */
.jamrock-side-dropdown-container {
  margin: 14px 0 !important;
  padding: 14px 18px !important;
  background: #FAF5EF !important; /* Warm bistro cream background box */
  border: 1px solid var(--cream3, #EDE0D0) !important;
  border-radius: var(--radius, 8px) !important;
  display: block !important;
  width: 100% !important;
  max-width: 320px !important; /* Keep it structured and clean */
  box-sizing: border-box !important;
  text-align: left !important;
  box-shadow: 0 2px 8px rgba(28,20,16,0.03) !important;
}

.jamrock-side-dropdown-container.jamrock-blocks-injected {
  display: block !important;
  width: 100% !important;
  margin-top: 10px !important;
}

.jamrock-side-label {
  display: block !important;
  font-family: var(--font-body), sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--ink3, #6B5B50) !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.06em !important;
  line-height: 1.2 !important;
}

.jamrock-side-select {
  display: block !important;
  width: 100% !important;
  padding: 8px 12px !important;
  padding-right: 36px !important; /* Spacing for custom arrow */
  font-family: var(--font-body), sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink, #1C1410) !important;
  background-color: #ffffff !important;
  border: 1.5px solid var(--cream3, #EDE0D0) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  
  /* Reset browser select appearance */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  
  /* Inline SVG Chevron Arrow (color matching --ink3 #6B5B50) */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236B5B50' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 5 3 3 3-3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px !important;
  
  transition: border-color var(--transition, 0.28s ease) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
}

.jamrock-side-select:hover, 
.jamrock-side-select:focus {
  border-color: var(--orange, #E8591A) !important;
  outline: none !important;
}

.jamrock-side-select:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* Hide static Side Choice text on Cart and Checkout pages where dropdown is present */
.woocommerce-cart .variation-SideChoice,
.woocommerce-checkout .variation-SideChoice {
  display: none !important;
}

/* Mobile responsiveness for Side Choice dropdown */
@media (max-width: 768px) {
  .jamrock-side-dropdown-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 8px !important;
  }
  .jamrock-side-select {
    width: 100% !important;
    min-width: 0 !important;
  }
}