/*
Theme Name: Twenty Twenty-Four Child (Test)
Template: twentytwentyfour
Version: 0.2.2
*/

/* ============================
   1) TOKENS
   ============================ */
:root{
  --hk-radius: 16px;
  --hk-radius-sm: 12px;

  --hk-bg: #f7f4ef;
  --hk-surface: #ffffff;
  --hk-text: #141414;
  --hk-muted: rgba(20,20,20,.72);

  --hk-accent: #66023C;       /* brand plum */
  --hk-accent-dark: #4C012D;
  --hk-accent-weak: rgba(102,2,60,.14);

  --hk-border: 1px solid rgba(0,0,0,.08);
  --hk-shadow-soft: 0 10px 30px rgba(0,0,0,.08);
  --hk-shadow: 0 14px 44px rgba(0,0,0,.14);

  --hk-focus: 0 0 0 4px rgba(102,2,60,.18);
  --hk-edge: 16px;
}

/* ============================
   2) GLOBAL
   ============================ */
html{ scroll-behavior:smooth; }

body{
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--hk-bg);
  color: var(--hk-text);
}

.hk-container{
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--hk-edge);
  padding-right: var(--hk-edge);
}

h1{ font-size: clamp(2.0rem, 4.2vw, 3.2rem); line-height: 1.1; letter-spacing: -0.02em; }
h2{ font-size: clamp(1.5rem, 3.0vw, 2.2rem); line-height: 1.15; letter-spacing: -0.015em; }
h3{ font-size: clamp(1.2rem, 2.1vw, 1.55rem); line-height: 1.2; }

a{ text-underline-offset: .18em; text-decoration-thickness: 2px; }
a:hover{ text-decoration-thickness: 3px; }

.hk-card{
  border-radius: var(--hk-radius);
  background: #fff;
  border: var(--hk-border);
  box-shadow: var(--hk-shadow-soft);
  overflow: hidden;
}

/* ============================
   3) FORMS + BUTTONS (plum)
   ============================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
textarea,
select{
  border-radius: var(--hk-radius-sm);
  border: 1px solid rgba(0,0,0,.14);
  padding: 12px 14px;
}
input:focus, textarea:focus, select:focus{
  outline: none;
  box-shadow: var(--hk-focus);
  border-color: rgba(102,2,60,.45);
}

.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button,
.wc-block-components-button:not(.is-link){
  border-radius: 999px !important;
  font-weight: 900 !important;
  padding: 12px 16px !important;
  background: var(--hk-accent) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button:hover,
.wc-block-components-button:not(.is-link):hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  background: var(--hk-accent-dark) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
}
.wp-block-button__link:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active,
.woocommerce .button:active{
  transform: translateY(0) scale(.99);
}
.wc-block-components-button.is-link{ color: var(--hk-accent) !important; }

/* ============================
   4) HEADER (mobile only)
   Requires: hk-site-header class on header wrapper group
   ============================ */
.hk-site-header{ border-bottom: 1px solid rgba(0,0,0,.06); }

@media (max-width: 782px){
  .hk-site-header{
    background: #fff;
    color: #111;
    padding: 10px var(--hk-edge);
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .hk-site-header{ display:block !important; }
  .hk-site-header > .wp-block-group__inner-container{
    display:flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .hk-site-header .wp-block-site-logo{
    width: 100% !important;
    display:flex !important;
    justify-content:center !important;
    margin: 0 !important;
    padding-bottom: 6px !important;
  }
  .hk-site-header .wp-block-site-logo img{
    max-height: 72px !important;
    width: auto !important;
    height: auto !important;
    display:block !important;
  }
  .hk-site-header .wp-block-site-title{ display:none !important; }

  .hk-site-header :is(
    .wp-block-woocommerce-customer-account,
    .wp-block-woocommerce-mini-cart,
    .wc-block-mini-cart,
    .wp-block-navigation
  ){
    display:inline-flex !important;
    align-items:center !important;
  }

  .hk-site-header .wp-block-woocommerce-customer-account{ order: 20 !important; }
  .hk-site-header :is(.wp-block-woocommerce-mini-cart, .wc-block-mini-cart){ order: 25 !important; }
  .hk-site-header .wp-block-navigation{
    order: 30 !important;
    margin-left: auto !important;
  }
  .hk-site-header :is(.wp-block-woocommerce-mini-cart, .wc-block-mini-cart){
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hk-site-header :is(
    .wp-block-woocommerce-customer-account a,
    .wp-block-woocommerce-mini-cart__button,
    .wc-block-mini-cart__button,
    .wp-block-navigation__responsive-container-open,
    .wp-block-navigation__responsive-container-close
  ){
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(0,0,0,.14) !important;
    background: #fff !important;
    color: #111 !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.08) !important;
    text-decoration:none !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  .hk-site-header :is(
    .wp-block-woocommerce-customer-account a svg,
    .wp-block-woocommerce-mini-cart__button svg,
    .wc-block-mini-cart__button svg,
    .wp-block-navigation__responsive-container-open svg,
    .wp-block-navigation__responsive-container-close svg
  ){
    width: 20px !important;
    height: 20px !important;
  }
  .hk-site-header :is(.wp-block-woocommerce-mini-cart__amount, .wc-block-mini-cart__amount){
    display:none !important;
  }
  .hk-site-header .wp-block-navigation__responsive-container{
    background:#fff !important;
    color:#111 !important;
  }
}

/* ============================
   5) FOOTER
   Requires: hk-site-footer class on footer wrapper group
   ============================ */
.hk-site-footer{
  margin-top: clamp(28px, 5vw, 64px);
  padding: clamp(18px, 3vw, 40px) var(--hk-edge);
  background: transparent !important;
  color: inherit;
  border-top: 1px solid rgba(0,0,0,.08);
}
.hk-site-footer a{ text-decoration-thickness: 2px; }
.hk-site-footer a:hover{ text-decoration-thickness: 3px; }

/* ============================
   6) BASIC WOOCOMMERCE POLISH
   ============================ */
.woocommerce form .form-row{ margin-bottom: 14px; }

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error{
  border-radius: var(--hk-radius);
  border: var(--hk-border);
  box-shadow: var(--hk-shadow-soft);
}

.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table{
  border-radius: var(--hk-radius);
  overflow: hidden;
}

.woocommerce-store-notice, .demo_store{
  background: rgba(0,0,0,.92) !important;
  color: #fff !important;
}

/* ============================
   7) MENU (UberEats list style) — /order-hells-kitchen/
   Scope: hk-order-page body class
   ============================ */

/* Intro text on the menu page (Heading + Paragraph above the accordion)
   TT4 block themes often use .wp-block-post-content instead of .entry-content.
   Target both so the heading/subtext styling always applies. */
.hk-order-page :is(.entry-content, .wp-block-post-content) > h1:first-child,
.hk-order-page :is(.entry-content, .wp-block-post-content) > h2:first-child,
.hk-order-page :is(.entry-content, .wp-block-post-content) > h3:first-child,
.hk-order-page :is(.entry-content, .wp-block-post-content) > p:first-child{
  text-align: center;
}

.hk-order-page :is(.entry-content, .wp-block-post-content) > p:nth-child(2){
  text-align: center;
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
}



/* Remove Woo shop chrome inside the menu experience */
.hk-order-page .woocommerce-result-count,
.hk-order-page .woocommerce-ordering,
.hk-order-page .woocommerce-pagination{
  display:none !important;
}

/* =========================================================
   MENU PAGE HEADLINE (Our Menu + helper line)
   ========================================================= */

/* Bulletproof centering/styling even if the page content doesn't use our custom classes */
.hk-order-page :is(.entry-content, .wp-block-post-content) > :is(h1,h2,h3):first-child{
  text-align: center !important;
  max-width: 72ch;
  margin: 0 auto 6px;
  padding: 0 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 4.2vw, 42px);
}

/* The helper line usually follows the title */
.hk-order-page :is(.entry-content, .wp-block-post-content) > :is(h1,h2,h3) + p{
  text-align: center !important;
  max-width: 72ch;
  margin: 0 auto 18px;
  padding: 0 12px;
  color: var(--hk-muted);
  font-size: 16px;
  line-height: 1.55;
}

.hk-order-page .hk-pagehead{
  text-align: center;
  max-width: 72ch;
  margin: 0 auto 18px;
  padding: 0 12px;
}

.hk-order-page .hk-pagehead__title{
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 4.2vw, 42px);
  text-align: center;
}

.hk-order-page .hk-pagehead__sub{
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.55;
  color: var(--hk-muted);
  text-align: center;
}

/* Fallback if someone deletes the pagehead block and leaves a plain paragraph */
.hk-order-page :is(.entry-content, .wp-block-post-content) > p:first-of-type{
  text-align: center;
  max-width: 72ch;
  margin: 0 auto 18px;
  padding: 0 12px;
  color: var(--hk-muted);
}

/* Category pills (professional) */
.hk-order-page .hk-catbar{
  position: static !important;
  margin: 0 0 18px;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.hk-order-page .hk-accordion{
  display:flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1020px;
  margin: 0 auto;
  padding: 6px 0 22px;
}

.hk-order-page .hk-acc{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  overflow: hidden;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}

.hk-order-page .hk-acc:hover{
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}

.hk-order-page .hk-acc.is-open{
  border-color: rgba(102,2,60,.35);
  box-shadow: 0 18px 44px rgba(0,0,0,.10);
}

.hk-order-page .hk-acc__trigger{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(102,2,60,.035), rgba(0,0,0,0));
  border: 0;
  cursor: pointer;
  color: rgba(0,0,0,.92);
  font-weight: 850;
  letter-spacing: -0.01em;
  text-align:left;
}

.hk-order-page .hk-acc__left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

.hk-order-page .hk-acc__left{
  flex: 1 1 auto;
}

.hk-order-page .hk-acc__thumb{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background: rgba(102,2,60,.10);
  border: 1px solid rgba(0,0,0,.08);
  flex: 0 0 auto;
}

.hk-order-page .hk-acc__thumbimg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.hk-order-page .hk-acc__thumb--fallback{
  font-weight: 950;
  color: var(--hk-accent);
  letter-spacing: -0.02em;
}

.hk-order-page .hk-acc__text{
  display:flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.hk-order-page .hk-acc__title{
  display:block;
  font-size: 1.05rem;
  font-weight: 950;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hk-order-page .hk-acc__meta{
  display:block;
  font-size: .92rem;
  font-weight: 650;
  color: rgba(0,0,0,.62);
}

.hk-order-page .hk-acc__trigger:hover{
  background: linear-gradient(180deg, rgba(102,2,60,.06), rgba(0,0,0,0));
}

.hk-order-page .hk-acc__trigger:focus-visible{
  outline: none;
  box-shadow: var(--hk-focus);
}

.hk-order-page .hk-acc__chev{
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.7);
  opacity: .95;
  margin: 0;
  transition: background .16s ease, border-color .16s ease;
}

.hk-order-page .hk-acc__chev::before{
  content: "";
  width: 12px;
  height: 12px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .78;
  transition: transform .16s ease, opacity .16s ease;
}

.hk-order-page .hk-acc.is-open .hk-acc__chev::before{
  transform: rotate(-135deg);
  opacity: .92;
}


.hk-order-page .hk-acc__panel{
  padding: 12px 18px 18px;
  border-top: 1px solid rgba(0,0,0,.06);
  background: #fff;
}

.hk-order-page .hk-acc__desc{
  margin: 8px 0 14px;
  color: rgba(0,0,0,.68);
  font-size: 0.98rem;
  line-height: 1.45;
}

@media (max-width: 720px){
  .hk-order-page .hk-accordion{ gap: 10px; }
  .hk-order-page .hk-acc__trigger{ padding: 14px 14px; }
  .hk-order-page .hk-acc__panel{ padding: 10px 14px 14px; }
  .hk-order-page .hk-acc__thumb{ width: 40px; height: 40px; }

  /* Mobile: show full category names (no ellipsis), allow wrapping.
     Keep the chevron flush-right via the fixed-size .hk-acc__chev. */
  .hk-order-page .hk-acc__title{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
    word-break: break-word;
  }
}

/* Category section headers */
.hk-order-page .hk-menu-section{
  margin: 26px 0 34px;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 140px);
}
.hk-order-page .hk-menu-section__head{
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(0,0,0,.06);
}
.hk-order-page .hk-menu-section__title{
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 950;
  letter-spacing: -0.02em;
}
.hk-order-page .hk-menu-section__desc{
  margin-top: 6px;
  color: var(--hk-muted);
  max-width: 75ch;
}

/* Active pill (scroll spy) */
/* Items list */
.hk-order-page .hk-items{
  display:flex;
  flex-direction: column;
  gap: 14px;
}

/* Prevent the basket bar covering the last items */
.hk-order-page main{
  padding-bottom: 120px;
}

/* Item row: image | body | actions */
.hk-order-page .hk-item{
  display:grid;
  grid-template-columns: 96px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.hk-order-page .hk-item__media{
  width: 96px;
  height: 96px;
}
.hk-order-page .hk-item__img{
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 14px;
  background: rgba(0,0,0,.03);
}

.hk-order-page .hk-item__body{ min-width: 0; }
.hk-order-page .hk-item__title{
  margin: 0;
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.hk-order-page .hk-item__desc{
  margin: 6px 0 0;
  color: var(--hk-muted);
  font-size: .95rem;
  line-height: 1.35;
}
.hk-order-page .hk-item__meta{
  margin-top: 8px;
  font-weight: 950;
}

.hk-order-page .hk-item__actions{
  display:flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 140px;
}

/* Quantity stepper */
.hk-order-page .hk-qty{
  display:flex;
  align-items:center;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 999px;
  overflow:hidden;
  background:#fff;
}
.hk-order-page .hk-qty__btn{
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  font-weight: 950;
  cursor: pointer;
}
.hk-order-page .hk-qty__input{
  width: 54px;
  height: 42px;
  border: 0;
  text-align: center;
  font-weight: 950;
  outline: none;
}
.hk-order-page .hk-qty__input::-webkit-outer-spin-button,
.hk-order-page .hk-qty__input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.hk-order-page .hk-qty__input{ -moz-appearance: textfield; }

/* Buttons */
.hk-order-page .hk-add,
.hk-order-page .hk-view{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 950;
  text-decoration:none;
  border: 1px solid rgba(0,0,0,.10);
}
.hk-order-page .hk-view{
  background:#fff;
  color: var(--hk-accent);
  border-color: rgba(102,2,60,.28);
}
.hk-order-page .hk-view:hover{ border-color: rgba(102,2,60,.45); }

.hk-order-page .hk-add{
  background: var(--hk-accent);
  color:#fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  cursor:pointer;
}
.hk-order-page .hk-add:hover{ background: var(--hk-accent-dark); }
.hk-order-page .hk-add.is-loading{ opacity: .75; cursor: wait; }

/* Mobile: stack card */
@media (max-width: 640px){
  .hk-order-page .hk-item{
    grid-template-columns: 1fr;
  }
  .hk-order-page .hk-item__media,
  .hk-order-page .hk-item__img{
    width: 100%;
    height: 190px;
  }
  .hk-order-page .hk-item__actions{ min-width: 0; }
}

/* Sticky basket bar */
.hk-basketbar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  padding: 12px var(--hk-edge) calc(12px + env(safe-area-inset-bottom));
  background: rgba(247,244,239,.88);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,.10);
}
.hk-basketbar__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 12px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 18px 44px rgba(0,0,0,.20);
}
.hk-basketbar__left{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 950;
  white-space: nowrap;
}
.hk-basketbar__sep{ opacity: .65; }
.hk-basketbar__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--hk-accent);
  color: #fff;
  text-decoration:none;
  font-weight: 950;
}
.hk-basketbar__cta:hover{ background: var(--hk-accent-dark); }

/* Toast */
.hk-toast{
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  pointer-events:none;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(17,17,17,.94);
  color: #fff;
  font-weight: 950;
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
  transition: opacity .14s ease, transform .14s ease;
  z-index: 1000;
}
.hk-toast.is-visible{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================
   8) SINGLE PRODUCT (clean food item page)
   ============================ */
.single-product .woocommerce-breadcrumb{
  font-size: .95rem;
  color: var(--hk-muted);
  margin: 10px 0 14px;
}
.single-product .woocommerce-breadcrumb a{
  color: inherit;
  text-decoration:none;
}
.single-product .woocommerce-breadcrumb a:hover{ color: var(--hk-accent); }

.single-product div.product{
  border-radius: var(--hk-radius);
  background: var(--hk-surface);
  border: var(--hk-border);
  box-shadow: var(--hk-shadow-soft);
  padding: 16px;
  margin: 14px 0 22px;
}
.single-product .product_title{
  font-weight: 950;
  letter-spacing: -0.03em;
  margin: 0;
}
.single-product .summary .price{
  font-size: 1.45rem;
  font-weight: 950;
  color: #111;
  margin: 0;
}

.single-product form.cart{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  padding-top: 6px;
}
.single-product form.cart .quantity input.qty{
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.14);
  min-height: 44px;
}
.single-product form.cart button.single_add_to_cart_button{
  flex: 1 1 220px;
  min-height: 44px;
  border-radius: 999px;
  font-weight: 950;
  background: var(--hk-accent) !important;
  border-color: var(--hk-accent) !important;
  color: #fff !important;
}
.single-product form.cart button.single_add_to_cart_button:hover{
  background: var(--hk-accent-dark) !important;
  border-color: var(--hk-accent-dark) !important;
}

.single-product .woocommerce-tabs{
  margin-top: 18px;
}
.single-product .woocommerce-tabs ul.tabs{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  padding: 0;
  margin: 0 0 10px;
  border: 0;
}
.single-product .woocommerce-tabs ul.tabs li{
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}
.single-product .woocommerce-tabs ul.tabs li a{
  display:inline-flex;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  font-weight: 900;
  text-decoration:none;
}
.single-product .woocommerce-tabs ul.tabs li.active a{
  background: rgba(102,2,60,.10);
  border-color: rgba(102,2,60,.30);
}
.single-product .woocommerce-tabs .panel{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background:#fff;
  padding: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

@media (max-width: 782px){
  .single-product div.product{ padding: 14px; }
  .single-product form.cart button.single_add_to_cart_button{ width: 100%; }
}
/* =========================
   FANCY FOOD MENU (HELLOS KITCHEN)
   Clean list + responsive
   ========================= */

/* 1) Accordion headers → static top pills */
.ffg-menu-wrapper {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 16px;
}

/* Make the header buttons behave like pills and always visible */
.ffg-accordion-header {
  width: 100%;
  background: #66023C;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  padding: 14px 18px;
  border: none;
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ffg-accordion-header:hover,
.ffg-accordion-header[aria-expanded="true"] {
  background: #4C012D;
}

/* Arrow rotation */
.ffg-acc-arrow {
  transition: transform .3s ease;
}
.ffg-accordion-header[aria-expanded="true"] .ffg-acc-arrow {
  transform: rotate(180deg);
}

/* 2) Accordion body */
.ffg-accordion-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease, padding .35s ease;
  padding: 0 18px;
}
.ffg-accordion-body.open {
  padding: 18px;
  max-height: 5000px;
}

/* 3) Food grid: list style (image left + stacked content) */
.ffg-food-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

/* Individual item card */
.ffg-food-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 14px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 12px;
  background: #fff;
  padding: 14px;
  align-items: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}

.ffg-food-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* Image */
.ffg-image-wrapper {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 10px;
}
.ffg-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Title / description / price */
.ffg-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: #141414;
}
.ffg-excerpt {
  font-size: .95rem;
  color: rgba(20,20,20,.72);
  margin: 2px 0 4px;
}
.ffg-price {
  font-size: 1.1rem;
  font-weight: 800;
  color: #141414;
}

/* Add to cart button */
.ffg-add-to-cart {
  background: #66023C !important;
  color: #fff !important;
  padding: 10px 14px;
  border-radius: 8px;
  text-align: center;
  font-weight: 700;
  font-size: .98rem;
}
.ffg-add-to-cart:hover {
  background: #4C012D !important;
}

/* Shorten buttons on long text */
.ffg-image-wrapper + .ffg-title {
  word-break: break-word;
}

/* 4) Responsive mobile stack */
@media (max-width: 600px) {

  .ffg-food-grid {
    grid-template-columns: 1fr;
  }

  .ffg-food-item {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 8px;
  }

  .ffg-image-wrapper {
    width: 100%;
    height: 190px;
    margin: 0 auto;
  }

  .ffg-title,
  .ffg-price {
    text-align: left;
  }

  .ffg-add-to-cart {
    width: 100%;
    justify-self: stretch;
  }

  .ffg-food-item:hover {
    transform: none;
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
  }
}

/* 5) Floating cart button */
.ffg-floating-cart {
  position: fixed;
  right: 20px;
  bottom: 24px;
  background: #66023C;
  color: #fff;
  padding: 14px 18px;
  border-radius: 48px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0,0,0,.25);
  z-index: 99999;
}