/* ==========================================================
   LyaiDeu — Mobile product-card styling (phones only)
   Shared by menu / mart / beverages / others / store /
   categories (mc-open) / product (related) pages.
   Mirrors the card styles already live on index.php:
   - bare orange cart-plus icon button (no pill/border)
   - one-line truncated product title
   - one-line vendor/store line under the title
   - 3 products per row on phones (grids listed below)
   Desktop stays untouched: every visual rule lives inside a
   media query and .dish-hotel is display:none outside phones.
   ========================================================== */

/* Vendor/store line is a phone-only feature */
.dish-hotel{display:none;}

@media (max-width:960px){
  /* Menu page: remove the kicker badge above the heading on mobile */
  #menu .section-head .kicker{display:none;}
  /* Menu page: remove the sub-heading text on mobile */
  #menu .section-head .section-sub{display:none;}
  /* Menu page: no top padding on the section on mobile */
  #menu.section{padding-top:0;}

  /* Mart page: remove the kicker badge above the heading on mobile */
  #mart .section-head .kicker{display:none;}
  /* Mart page: remove the sub-heading text on mobile */
  #mart .section-head .section-sub{display:none;}
  /* Mart page: no top padding on the section on mobile */
  #mart.section{padding-top:0;}
  /* Mart page: hide the "View Cart" button — the cart FAB covers phones */
  #mart .section-head .hero-actions{display:none;}

  /* Beverages page: remove the kicker badge above the heading on mobile */
  #beverages .section-head .kicker{display:none;}
  /* Beverages page: remove the sub-heading text on mobile */
  #beverages .section-head .section-sub{display:none;}
  /* Beverages page: no top padding on the section on mobile */
  #beverages.section{padding-top:0;}
  /* Beverages page: hide the "View Cart" button — the cart FAB covers phones */
  #beverages .section-head .hero-actions{display:none;}

  /* Others page: remove the kicker badge above the heading on mobile */
  #others .section-head .kicker{display:none;}
  /* Others page: remove the sub-heading text on mobile */
  #others .section-head .section-sub{display:none;}
  /* Others page: no top padding on the section on mobile */
  #others.section{padding-top:0;}
  /* Others page: hide the "View Cart" button — the cart FAB covers phones */
  #others .section-head .hero-actions{display:none;}

  /* Stores pages (listing + detail): no top padding on the section on mobile */
  #hotels.section,#store.section{padding-top:0;}
  /* Store detail: hide the "View Cart" button — the cart FAB covers phones */
  #store .store-hero-actions{display:none;}

  /* Listing pages: pull the filter chips closer to the page title on
     mobile — with kicker + sub hidden, the old 1.8rem gap looks huge.
     Toolbar-to-grid spacing tightens a touch too so everything below
     stays visually connected. */
  #menu .section-head,#mart .section-head,#beverages .section-head,
  #others .section-head,#hotels .section-head{margin-bottom:.55rem;}
  #menu .menu-toolbar,#mart .menu-toolbar,#beverages .menu-toolbar,
  #others .menu-toolbar,#hotels .menu-toolbar{margin-bottom:1rem;}

  /* All product cards: slimmer body padding on phones (top/bottom only;
     side padding keeps coming from style.css breakpoints) */
  .dish-body{padding-top:.2rem;padding-bottom:.24rem;}
  /* Keep the dashed divider flush with the content above on phones only */
  .dish-foot,.related-foot{padding-top:0;}

  /* Hide the "/ unit" text after prices on phones */
  .dish-card .price .unit{display:none;}

  /* Product page: hide "/ unit" after the main price and in Related cards */
  .product-pg .product-price .unit{display:none;}
  .related-card .price .unit{display:none;}

  /* Product page: hide the small helper notes on phones */
  .product-pg .small-note{display:none;}

  /* Add button shows only the cart-plus glyph on phones */
  .dish-card .btn-order.add-cart .add-label{display:none;}
  .dish-card .btn-order.add-cart{
    width:2.25rem;height:2.25rem;min-height:0;padding:0;
    display:inline-flex;align-items:center;justify-content:center;flex:none;
    background:transparent!important;
    color:var(--orange-600,#e76608)!important;
    border:0!important;
    border-radius:.72rem;
    box-shadow:none!important;
    transition:color .2s ease,transform .2s ease;
  }
  .dish-card .btn-order.add-cart::after{display:none;}
  .dish-card .btn-order.add-cart i{display:none;}
  .dish-card .btn-order.add-cart::before{
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    content:"\f217"; /* fa-cart-plus */
    display:inline-block;
    font-style:normal;
    font-size:.95rem;
    line-height:1;
    -webkit-font-smoothing:antialiased;
  }
  .dish-card .btn-order.add-cart:hover{
    color:var(--orange-700,#a03c07)!important;
    transform:none!important;box-shadow:none!important;background:transparent!important;
  }
  .dish-card .btn-order.add-cart:active{transform:scale(.88);color:var(--orange-800,#742a05)!important;}

  /* Related Products cards (product.php): exact same bare cart-plus
     button as the home page cards */
  .related-card .btn-order.add-cart .add-label{display:none;}
  .related-card .btn-order.add-cart{
    width:2.25rem;height:2.25rem;min-height:0;padding:0;
    display:inline-flex;align-items:center;justify-content:center;flex:none;
    background:transparent!important;
    color:var(--orange-600,#e76608)!important;
    border:0!important;
    border-radius:.72rem;
    box-shadow:none!important;
    transition:color .2s ease,transform .2s ease;
  }
  .related-card .btn-order.add-cart::after{display:none;}
  .related-card .btn-order.add-cart i{display:none;}
  .related-card .btn-order.add-cart::before{
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    content:"\f217"; /* fa-cart-plus */
    display:inline-block;
    font-style:normal;
    font-size:.95rem;
    line-height:1;
    -webkit-font-smoothing:antialiased;
  }
  .related-card .btn-order.add-cart:hover{
    color:var(--orange-700,#a03c07)!important;
    transform:none!important;box-shadow:none!important;background:transparent!important;
  }
  .related-card .btn-order.add-cart:active{transform:scale(.88);color:var(--orange-800,#742a05)!important;}

  /* Product page: View Cart stays desktop-only — the cart FAB covers phones */
  .product-actions .cart-open-btn{display:none;}

  /* Product title stays on one line — same "..." truncation */
  .dish-card{min-width:0;}
  .dish-top{min-width:0;}
  .dish-top h3{
    min-width:0;flex:0 1 auto;max-width:100%;
    font-size:.78rem;line-height:1.25;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    overflow-wrap:normal;
  }
  /* Vendor/store name under the title — one line, truncated */
  .dish-hotel{
    display:block;margin:.16rem 0 0;max-width:100%;
    font-size:.62rem;font-weight:800;line-height:1.2;
    color:var(--orange-600,#e76608);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .dish-hotel i{font-size:.55rem;color:var(--orange-400,#f5974e);margin-right:.24rem;}

  /* Related Products cards (product.php) share the same treatment */
  .related-info{min-width:0;align-items:stretch;}
  .related-info h4{
    min-width:0;max-width:100%;
    font-size:.8rem;line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    overflow-wrap:normal;
  }
}

/* Phones: product grids go 3-per-row like the home page.
   categories mc-open is intentionally NOT listed — its rail
   layout keeps 2-per-row. */
@media (max-width:560px){
  #menu-grid,#mart-grid,#others-grid,#beverages-grid,
  .store-grid,.related-grid{grid-template-columns:repeat(3,1fr);gap:.55rem;}

  /* Price + discount + icon button must fit ~91px card bodies.
     Compact icon button + wrap as a graceful last resort (badge
     drops under the price instead of clipping). */
  .dish-foot,.related-foot{flex-wrap:wrap;row-gap:.12rem;}
  /* Related cards: price + Add stay on one line */
  .related-foot{flex-wrap:nowrap;}
  #menu-grid .btn-order.add-cart,#mart-grid .btn-order.add-cart,
  #others-grid .btn-order.add-cart,#beverages-grid .btn-order.add-cart,
  .store-grid .btn-order.add-cart,.related-grid .btn-order.add-cart{width:1.9rem;height:1.9rem;border-radius:.6rem;}
  #menu-grid .btn-order.add-cart::before,#mart-grid .btn-order.add-cart::before,
  #others-grid .btn-order.add-cart::before,#beverages-grid .btn-order.add-cart::before,
  .store-grid .btn-order.add-cart::before,.related-grid .btn-order.add-cart::before{font-size:.78rem;}
}

/* Very small phones — same compact tweaks as the home page */
@media (max-width:360px){
  #menu-grid,#mart-grid,#others-grid,#beverages-grid,
  .store-grid,.related-grid{gap:.45rem;}
  #menu-grid .dish-body,#mart-grid .dish-body,#others-grid .dish-body,
  #beverages-grid .dish-body,.store-grid .dish-body{padding:.16rem .4rem .2rem;}
  #menu-grid .dish-top h3,#mart-grid .dish-top h3,#others-grid .dish-top h3,
  #beverages-grid .dish-top h3,.store-grid .dish-top h3{font-size:.72rem;}
  #menu-grid .price,#mart-grid .price,#others-grid .price,
  #beverages-grid .price,.store-grid .price{font-size:.8rem;}
  #menu-grid .dish-hotel,#mart-grid .dish-hotel,#others-grid .dish-hotel,
  #beverages-grid .dish-hotel,.store-grid .dish-hotel{font-size:.58rem;}
  #menu-grid .dish-hotel i,#mart-grid .dish-hotel i,#others-grid .dish-hotel i,
  #beverages-grid .dish-hotel i,.store-grid .dish-hotel i{font-size:.52rem;}
  #menu-grid .btn-order.add-cart,#mart-grid .btn-order.add-cart,
  #others-grid .btn-order.add-cart,#beverages-grid .btn-order.add-cart,
  .store-grid .btn-order.add-cart,.related-grid .btn-order.add-cart{width:1.7rem;height:1.7rem;}
  #menu-grid .btn-order.add-cart::before,#mart-grid .btn-order.add-cart::before,
  #others-grid .btn-order.add-cart::before,#beverages-grid .btn-order.add-cart::before,
  .store-grid .btn-order.add-cart::before,.related-grid .btn-order.add-cart::before{font-size:.7rem;}
}