/* =========================================================
   s3_tailwind_subset.css
   - Minimal Tailwind-like utilities used by your s3 views
   - S3 HERO (menu image + title/desc overlay)
   - S3 ITEM ROW layout (desktop + mobile)
   - S3 TOP MENUS PILLS (store/index.php) polished to match target
========================================================= */

/* -----------------------------
   Minimal utility subset
------------------------------ */

/* spacing helpers */
.space-y-10 > * + * { margin-top: 2.5rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-12 { margin-bottom: 3rem; }

/* container-ish helpers (used in markup) */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-w-0 { min-width: 0; }
.overflow-hidden { overflow: hidden; }

/* positioning */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

/* radius */
.rounded-2xl { border-radius: 1rem; }
.rounded-xl { border-radius: .75rem; }
.rounded-full { border-radius: 9999px; }

/* object fit */
.object-cover { object-fit: cover; }

/* flex */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.shrink-0 { flex-shrink: 0; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }

/* padding */
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }

/* borders */
.border { border: 1px solid #e5e7eb; }
.border2px {border: 2px solid #e5e7eb; }
.border-b { border-bottom: 1px solid #e5e7eb; }
.last\:border-b-0:last-child { border-bottom: 0 !important; }

/* text sizes */
.text-sm { font-size: .875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }

/* font weights */
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* leading + tracking */
.leading-snug { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }
.tracking-tight { letter-spacing: -0.025em; }

.close-modal-icon {background-color:#3A3E45; color: #ffffff}

/* line clamp (simple) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* responsive utilities used in markup */
@media (min-width: 576px) {
  .sm\:p-6 { padding: 1.5rem; }
  .sm\:text-base { font-size: 1rem; }
  .sm\:text-lg { font-size: 1.125rem; }
  .sm\:text-3xl { font-size: 1.875rem; }
  .sm\:w-20 { width: 5rem; }
  .sm\:h-20 { height: 5rem; }
}

@media (min-width: 768px) {
  .md\:text-3xl { font-size: 1.875rem; }
}

/* hero heights (if you still use .h-52/.sm:h-60/.md:h-72 in any markup) */
.h-52 { height: 13rem; }
@media (min-width: 576px) { .sm\:h-60 { height: 15rem; } }
@media (min-width: 768px) { .md\:h-72 { height: 18rem; } }

/* images sizing (used in item cards) */
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }

/* scroll margin helper used in markup (keep) */
.scroll-mt-40 { scroll-margin-top: 10rem; }

/* palette (neutral + your primary) */
.bg-background { background: #ffffff; }
.text-foreground { color: #111827; }
.text-muted-foreground { color: #6b7280; }
.border-border { border-color: #e5e7eb; }
.text-primary { color: #3A3E45 }
.bg-primary { background: #3A3E45; color: #ffffff; }
.bg-accent { background: #f3f4f6; }
.text-accent-foreground { color: #111827; }
.bg-muted { background: #e5e7eb; }
.bg-black\/45 { background: rgba(0,0,0,.45); }

/* -----------------------------
   S3: HERO (menu image + overlay)
   Use these classes in menu/index.php:
   .cat-hero, .cat-hero-img, .cat-hero-overlay, .cat-hero-text, etc.
------------------------------ */

.cat-hero {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  height: 13rem;
}
@media (min-width: 576px) { .cat-hero { height: 15rem; } }
@media (min-width: 768px) { .cat-hero { height: 18rem; } }

.cat-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cat-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

.cat-hero-text {
  position: toggle;
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  color: #ffffff;
  text-align: center; /* matches your screenshots */
}

.cat-hero-title {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 2rem;
}
@media (min-width: 576px) { .cat-hero-title { font-size: 2.25rem; } }

.cat-hero-desc {
  margin-top: .25rem;
  opacity: .92;
  font-size: 1rem;
  line-height: 1.4;
}

/* -----------------------------
   S3: ITEMS (desktop + mobile)
   Keep these if your view uses the .s3-* classes
------------------------------ */

.s3-item-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 1rem;
  padding: 1.25rem;
  border-bottom: 1px solid #e5e7eb;
}

.s3-item-main{ min-width:0; flex:1; }
.s3-item-name{ font-weight:800; font-size:1.25rem; color:#111827; }
.s3-item-desc{ margin-top:.25rem; color:#6b7280; line-height:1.5; }

.s3-item-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.5rem;
  width: 170px;
  flex: 0 0 auto;
}

.s3-item-price{
  font-weight:800;
  color:#c57c2a;
  font-size:1.25rem;
}

.s3-item-actions .btn,
.s3-item-actions button{
  border-radius: 9999px;
  padding: .5rem .9rem;
  font-weight:700;
}

.s3-item-media img{
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 0.75rem;
  display:block;
}


/* =========================================================
   S3: TOP MENUS PILLS (store/index.php)
   Goal: white strip background + grey rounded track + black active pill
   Must override theme (D10esh.css). Keep this at END of file.
========================================================= */

/* Ensure the sticky bar area is pure white (prevents beige bleed) */
#menuTabsWrapper,
#menuTabsWrapper > .container,
#menuTabsWrapper .container,
#menuTabsWrapper #menuTabsScroller {
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Rounded track behind tabs */
#menuTabsWrapper [role="tablist"] {
  background: #ffffff !important;
  /* border: 1px solid #e5e7eb !important; */
  border-radius: 9999px !important;
  gap: 10px !important;
  margin-top: 5px;
}

/* Default tab style */
#menuTabsWrapper a[role="tab"] {
  background: var(--ak-menu-pill-bg, #EFEFF0) !important;
  color: var(--ak-menu-pill-text, #111827) !important;
  font-weight: 700 !important;
  font-size: var(--ak-menu-pill-font-size, 16px) !important;
  border-radius: 9999px !important;
  padding: 12px 18px !important;
  text-decoration: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Hover */
#menuTabsWrapper a[role="tab"]:hover {
  background: rgba(17, 24, 39, 0.06) !important;
}

/* Active tab */
#menuTabsWrapper a[role="tab"].cat-pill-active,
#menuTabsWrapper a[role="tab"][aria-selected="true"] {
  background: var(--ak-menu-pill-active-bg, #111827) !important;
  color: var(--ak-menu-pill-active-text, #ffffff) !important;
}

/* Mobile arrow buttons */
#menuTabsLeft,
#menuTabsRight {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.12) !important;
}

/* Optional: keep sticky behavior consistent (your markup already sets sticky) */
#menuTabsWrapper { position: sticky; top: 0; z-index: 50; }

/* Scroll margin for anchored sections (your JS also sets it dynamically; this is fallback) */
.menu-section { scroll-margin-top: 6rem; }

/* =========================================================
   S3 pills overflow: contain width, no extra scroll track
========================================================= */

/* Make sure wrapper cannot be the scroll container */
#menuTabsWrapper {
  overflow: hidden !important;
}

/* The ONLY element allowed to scroll horizontally */
#menuTabsScroller {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;

  /* Hide scrollbar UI */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge */
}
#menuTabsScroller::-webkit-scrollbar { height: 0; }

/* Important: prevent tablist from stretching full page width */
#menuTabsScroller [role="tablist"] {
  display: inline-flex !important;   /* shrink-to-content */
  width: max-content !important;     /* only as wide as pills */
  max-width: none !important;
  white-space: nowrap !important;
}

/* Pills must not wrap */
#menuTabsScroller a[role="tab"] {
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

/* =========================================================
   S3 Product Row
========================================================= */

.s3-product-row{
  display:flex;
  justify-content:space-between;
  gap: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid #e5e7eb;
}

.s3-product-left{ flex: 1 1 auto; min-width: 0; }

.s3-product-title{
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--ak-menu-item-title-color, #111827);
  margin: 0;
}

.s3-product-desc{
  margin-top: .35rem;
  color: var(--ak-menu-item-desc-color, #6b7280);
  line-height: 1.55;
  max-width: 55ch;
}

.s3-product-allergens{
  display:flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}

.s3-product-price{
  margin-top: 1rem;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--ak-menu-price-color, #111827);
}

.s3-product-right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}


/* button always same anchor point */
.s3-product-action{
  position:absolute;
  right: 14px;
  bottom: -20px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 0;
  cursor: pointer;
  background-color: var(--ak-menu-button-bg, #3A3E45);
  color: var(--ak-menu-button-text, #ffffff);
}

/* Small badge (optional) */
.s3-product-badge{
  position:absolute;
  top: 10px;
  left: 10px;
  background: rgba(17,24,39,.85);
  color:#fff;
  font-size: .75rem;
  font-weight: 700;
  padding: .25rem .5rem;
  border-radius: 9999px;
}



/************/
/* ALLERGENS*/
/************/


.s3-allergens{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.6rem;
}

.s3-allergen-chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.25rem .55rem;
  border:1px solid #e5e7eb;
  border-radius:9999px;
  background:#fff;
  font-size:.85rem;
  line-height:1;
  color:#111827;
}

.s3-allergen-ico{ font-size:.95rem; }
.allergen-emoji{
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* Mobile */
@media (max-width: 576px){
  .s3-product-row{
    flex-direction: column;
    gap: 1rem;
  }
  .s3-product-right{
    width: 100%;
    flex: 0 0 auto;
    justify-content:flex-start;
  }
  .s3-product-image{
    width: 100%;
    height: 200px;
  }
  .s3-product-action{
    right: 12px;
    bottom: 12px;
  }
}



@media (max-width: 768px){
  .s3-mobile-orderbar{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 16px;
    border-radius: 18px;
    background: #374151;
    color: #fff;
    text-decoration: none;
  }

  .s3-mobile-orderbar__left{
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
  }

  .s3-mobile-orderbar__badge{
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
  }

  .s3-mobile-orderbar__total{
    font-weight: 700;
  }
}

/* ============================================
   Mobile: turn floating cart into centered bar
   Uses existing #menu-floating-cart + JS
============================================ */
@media (max-width: 768px){

  /* Optional: hide back-to-top on mobile */
  #backToTop{ display:none !important; }
}
/* ===== Floating cart -> Bottom centered order bar ===== */

.menu-floating-cart__left{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 0;
}

.menu-floating-cart__badge{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  flex: 0 0 auto;
}

.menu-floating-cart__label{
  font-size: 22px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-floating-cart__total{
  font-size: 22px;
  font-weight: 800;
  flex: 0 0 auto;
}

/* ============================================
   S3 Floating Cart -> Bottom centered order bar
   Works for desktop + tablet + mobile
   Matches markup:
   - .menu-floating-cart__left
   - .menu-floating-cart__badge
   - .menu-floating-cart__label
   - .menu-floating-cart__total
============================================ */

#menu-floating-cart.menu-floating-cart--hidden{ display:none !important; }
#menu-floating-cart.menu-floating-cart--visible{ display:flex !important; }

#menu-floating-cart{
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 16px !important;
  z-index: 9999 !important;

  width: calc(100% - 24px) !important;
  max-width: 640px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  padding: 10px 10px !important;
  border-radius: 22px !important;

  
  background: #3A3E45 !important; /* grey like mobile */
  color: #fff !important;
  text-decoration: none !important;

  box-shadow: 0 18px 40px rgba(0,0,0,.18) !important;
}

/* left group */
#menu-floating-cart .menu-floating-cart__left{
  display:flex !important;
  align-items:center !important;
  gap: 14px !important;
  min-width: 0 !important;
}

/* quantity bubble */
#menu-floating-cart .menu-floating-cart__badge{
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.18) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight: 800 !important;
  flex: 0 0 auto !important;
}

/* "My cart" */
#menu-floating-cart .menu-floating-cart__label{
  font-size: 18px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* total on the right */
#menu-floating-cart .menu-floating-cart__total{
  font-size: 18px !important;
  font-weight: 800 !important;
  flex: 0 0 auto !important;
}

/* small phones */
@media (max-width: 390px){
  #menu-floating-cart{ padding: 14px 14px !important; }
  #menu-floating-cart .menu-floating-cart__label,
  #menu-floating-cart .menu-floating-cart__total{ font-size: 18px !important; }
}

/* prevent content from being hidden behind the bar */
/* .menu-first-main{ padding-bottom: 110px !important; } */

/* modal must be above the floating cart */
#itemModal { z-index: 20000 !important; }
#menu-floating-cart { z-index: 9999 !important; }

/* hide cart when modal is open */
body.s3-modal-open #menu-floating-cart { display: none !important; }

/* Modal container visibility */
#itemModal.hidden { display:none !important; }

/* Backdrop */
#itemModal .s3-backdrop{
  opacity: 0;
  transition: opacity 420ms cubic-bezier(.2,.8,.2,1);
}
#itemModal.is-open .s3-backdrop{ opacity: 1; }

/* Bottom sheet slide */
#itemModalSheet{
  transform: translateY(100%);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
#itemModal.is-open #itemModalSheet{
  transform: translateY(0);
}

.s3-qty-row { display:flex; align-items:center; gap:12px; }

/* keep chips consistent inside modal */
#itemModal .s3-allergen-chip{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  line-height: 1;
  padding: .35rem .65rem;
}

/* force icon box */
#itemModal .allergen-emoji,
#itemModal .s3-allergen-ico{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  flex: 0 0 18px;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}

/* === S3 MODAL BASELINE (force visibility + layering) === */
#itemModal { position: fixed; inset: 0; z-index: 99999; }
#itemModal.hidden { display: none !important; }

#itemModalBackdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity 420ms ease; }

#itemModalSheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 85vh;
  transform: translateY(100%);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

/* Open state */
#itemModal.is-open #itemModalBackdrop { opacity: 1; }
#itemModal.is-open #itemModalSheet { transform: translateY(0); }

/* Prevent background scroll */
body.s3-modal-open { overflow: hidden !important; }

body.new-york,
body.new-york main,
.menu-first-main {
  background-color: var(--ak-menu-page-bg, #ffffff) !important;
}

body.new-york[data-menu-page-bg-type="image"],
body.new-york[data-menu-page-bg-type="image"] main,
body.new-york[data-menu-page-bg-type="image"] .menu-first-main {
  background-image: var(--ak-menu-page-bg-image, none) !important;
  background-size: auto !important;
  background-position: top left !important;
  background-repeat: repeat !important;
  background-attachment: scroll !important;
}

body.new-york,
body.new-york *:not(i):not(.fa):not(.fas):not(.far):not(.fab) {
  font-family: var(--ak-store-font-family, inherit) !important;
}

#menuTabsWrapper,
#menuTabsWrapper > .container,
#menuTabsWrapper .container,
#menuTabsWrapper #menuTabsScroller,
#menuTabsWrapper [role="tablist"] {
  background: var(--ak-menu-pill-bar-bg, #ffffff) !important;
}

#menuTabsWrapper a[role="tab"] {
  background: var(--ak-menu-pill-bg, #EFEFF0) !important;
  color: var(--ak-menu-pill-text, #111827) !important;
  font-size: var(--ak-menu-pill-font-size, 16px) !important;
}

#menuTabsWrapper a[role="tab"].cat-pill-active,
#menuTabsWrapper a[role="tab"][aria-selected="true"] {
  background: var(--ak-menu-pill-active-bg, #111827) !important;
  color: var(--ak-menu-pill-active-text, #ffffff) !important;
}

.s3-product-title {
  color: var(--ak-menu-item-title-color, #111827) !important;
}

.s3-product-desc {
  color: var(--ak-menu-item-desc-color, #6b7280) !important;
}

.s3-product-price {
  color: var(--ak-menu-price-color, #111827) !important;
}

.s3-product-action {
  background-color: var(--ak-menu-button-bg, #3A3E45) !important;
  color: var(--ak-menu-button-text, #ffffff) !important;
}

#menu-floating-cart.menu-floating-cart {
  background-color: var(--ak-menu-floating-cart-bg, #E17A3B) !important;
  color: var(--ak-menu-floating-cart-text, #FFFFFF) !important;
  font-size: var(--ak-menu-floating-cart-font-size, 14px) !important;
}

/* allergens / inline pills in item rows */
.text-foreground,
.po-meta,
.po-price {
  color: var(--ak-menu-allergens-text-color, #111827) !important;
}

/* option cards / modal text */
.text-card-foreground,
.variant-row span,
.variant-row .text-base {
  color: var(--ak-menu-option-text-color, #111827) !important;
  font-size: var(--ak-menu-option-text-size, 16px) !important;
}

/* radio / checkbox accent */
.text-primary,
.border-primary {
  color: var(--ak-menu-option-accent-color, #E17A3B) !important;
  border-color: var(--ak-menu-option-accent-color, #E17A3B) !important;
}

.variant-radio,
input[type="radio"].variant-radio,
input[type="checkbox"].variant-radio,
input[type="radio"].border-primary,
input[type="checkbox"].border-primary {
  accent-color: var(--ak-menu-option-accent-color, #E17A3B) !important;
  border-color: var(--ak-menu-option-accent-color, #E17A3B) !important;
}
/* bg-background utility override */
.bg-background {
  background: var(--ak-menu-card-bg, #ffffff) !important;
}

/* menu row card */
.s3-product-row {
  background: var(--ak-menu-card-bg, #ffffff) !important;
  padding: var(--ak-menu-row-padding-y, 24px) var(--ak-menu-row-padding-x, 0px) !important;
  border-bottom: var(--ak-menu-row-border-width, 1px) solid var(--ak-menu-row-border-color, #E5E7EB) !important;
}

/* if a wrapper also carries the visible white block */
.rounded-2xl.overflow-hidden.bg-background {
  background: var(--ak-menu-card-bg, #ffffff) !important;
}

/* allergens / price option pills border */
.s3-allergens .border,
.s3-price-options .border,
.inline-flex.items-center.rounded-full.border {
  border-color: var(--ak-menu-allergen-border-color, #E5E7EB) !important;
}

/* Header base */
header.sticky.top-0.z-50.w-full.bg-card\/95.backdrop-blur.supports-\[backdrop-filter\]\:bg-card\/80.border-b.border-border {
  background: var(--ak-menu-header-bg, #ffffff) !important;
  border-color: var(--ak-menu-header-border-color, #85A5E5) !important;
  border-bottom: var(--ak-menu-header-border-bottom-width, 1px) solid var(--ak-menu-header-border-bottom-color, #E30C71) !important;
}

/* Backdrop-support override */
@supports ((-webkit-backdrop-filter: var(--tw)) or (backdrop-filter: var(--tw))) {
  .supports-\[backdrop-filter\]\:bg-card\/80 {
    background-color: color-mix(in srgb, var(--ak-menu-header-backdrop-bg, #6F4343) calc(var(--ak-menu-header-backdrop-opacity, 0.8) * 100%), transparent) !important;
  }
}

/* safer fallback for browsers with weaker color-mix handling */
@supports ((-webkit-backdrop-filter: var(--tw)) or (backdrop-filter: var(--tw))) {
  .supports-\[backdrop-filter\]\:bg-card\/80 {
    background-color: var(--ak-menu-header-backdrop-rgba, rgba(111,67,67,0.8)) !important;
  }
}

/* utility class overrides */
.border-border {
  border-color: var(--ak-menu-header-border-color, #85A5E5) !important;
}

.border-b {
  border-bottom-width: var(--ak-menu-header-border-bottom-width, 1px) !important;
  border-bottom-style: solid !important;
  border-bottom-color: var(--ak-menu-header-border-bottom-color, #E30C71) !important;
}

/* right-side header page/menu button border */
.relative.ml-auto button.inline-flex.items-center.justify-center.h-12.w-12.rounded-full,
button.inline-flex.items-center.justify-center.h-12.w-12.rounded-full {
  border-color: var(--ak-menu-pages-button-border-color, #69CC66) !important;
}

/* language switcher */
#language_switcher .current_language {
  background: var(--ak-menu-language-bg, #E0E0E0) !important;
  border-color: var(--ak-menu-language-border-color, #000000) !important;
}
/* Mobile/header text must stay dark on light header */
header .navbar-brand h1,
header .navbar-brand .text-foreground,
header .navbar-brand .text-lg,
header .navbar-brand .font-bold {
  color: #111827 !important;
}

/* Header subtitle */
header .navbar-brand p,
header .navbar-brand .text-muted-foreground,
header .navbar-brand .text-xs {
  color: #6B7280 !important;
}

/* Burger/menu button */
header [data-dropdown-toggle],
header .inline-flex.items-center.justify-center.h-12.w-12.rounded-full,
header button {
  color: #111827 !important;
}

header [data-dropdown-toggle] svg,
header button svg {
  stroke: #111827 !important;
  color: #111827 !important;
}


/* ============================================
   CLOSED STORE BANNER - FINAL 
============================================ */
.ak-store-closed-banner {
  position: fixed !important;
  left: 50% !important;
  bottom: 24px !important;
  transform: translateX(-50%) !important;
  z-index: 2147483647 !important;

  display: flex !important;
  align-items: center !important;
  gap: 14px !important;

  min-width: 320px !important;
  max-width: min(92vw, 520px) !important;
  width: auto !important;

  padding: 18px 22px !important;
  border-radius: 18px !important;
  background: #d83a2e !important;
  color: #fff !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.24) !important;
}

.ak-store-closed-banner__icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid rgba(255,255,255,.9) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
}

.ak-store-closed-banner__title {
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

.ak-store-closed-banner__text {
  font-size: 15px !important;
  line-height: 1.3 !important;
  color: rgba(255,255,255,.96) !important;
}

@media (max-width: 768px) {
  .ak-store-closed-banner {
    width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    bottom: 14px !important;
    padding: 16px 18px !important;
  }
}

/* =========================================================
   FINAL MOBILE FIX FOR S3 PRODUCT ROWS
   Put this at the VERY END of s3_tailwind_subset.css
========================================================= */
@media (max-width: 640px) {

  .s3-product-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding:
      var(--ak-menu-row-padding-y, 24px)
      var(--ak-menu-row-padding-x, 0px) !important;
  }

  .s3-product-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .s3-product-right {
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    margin-right: 0 !important;
  }

  /* -------------------------
     IMAGE CASE
  ------------------------- */
  .s3-product-media {
    position: relative !important;
    width: 110px !important;
    height: 86px !important;
    flex: 0 0 110px !important;
  }

  .s3-product-image {
    width: 110px !important;
    height: 86px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
    display: block !important;
  }

  .s3-product-action {
    position: absolute !important;
    right: 6px !important;
    bottom: 6px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    z-index: 3 !important;
  }

  .s3-product-action svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* -------------------------
     NO IMAGE CASE
  ------------------------- */
  .s3-product-right--noimage {
    width: auto !important;
    min-width: 44px !important;
    align-self: flex-end !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
  }

  .s3-product-action--noimage {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    width: 38px !important;
    height: 38px !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
  }

  /* keep description tidy on mobile */
  .s3-product-desc {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-width: none !important;
  }

  /* better spacing for price/options on mobile */
  .s3-product-price {
    margin-top: 12px !important;
  }

  .s3-price-options {
    margin-top: 10px !important;
  }
}