/* hg-version 2026-10-26-1834 */
/* 2026-10-19: every store rule starts with :is(#app,.v-overlay-container) instead of #app (same strength). In the phone app a store tapped on a category page, banner, Featured stores, the cart or a notification opens as a sheet outside #app, under body > .v-overlay-container; rules scoped to #app missed it, so those stores lost the product-row and Recommended-row layout. The website never opens stores as a sheet, so it is unchanged. */
@keyframes hgspin{to{transform:rotate(360deg)}}

/* v81 — mobile store-page density pass: smaller content, larger intentional section spacing. */
@media (max-width:959.98px){
.scheme-merchant-page.merchant-mobile-view .scheme-product-recommendation-section{padding-bottom:12px !important;}
}

/* Search-only rules outrank the legacy [data-color-scheme] styles, regardless of injection order. */
@media (max-width:959.98px){
html body #app #MultiVendorSearch{background:#FFFCF9!important;color:#1B2023!important;min-height:100vh!important;min-width:0!important;max-width:100%!important;padding-inline:0!important;box-sizing:border-box!important;}
html body #app #MultiVendorSearch .scheme-global-search-mobile-header{display:flex!important;align-items:center!important;gap:10px!important;background:#8640FC!important;padding:12px 16px 20px!important;margin:0!important;border-radius:0 0 24px 24px!important;}
html body #app #MultiVendorSearch .mobile-search-input{flex:1 1 auto!important;min-width:0!important;}
html body #app #MultiVendorSearch .mobile-search-input .v-field__field,html body #app #MultiVendorSearch .mobile-search-input .v-field__input{height:44px!important;min-height:44px!important;font-size:15px!important;}
html body #app #MultiVendorSearch .mobile-search-input .v-field__prepend-inner{inset-inline-start:-44px!important;width:36px!important;height:36px!important;background:#FFFCF9!important;border:1px solid #E7E5EA!important;border-radius:50%!important;}
html body #app #MultiVendorSearch .mobile-search-input .v-field__prepend-inner .v-icon::before{width:18px!important;height:18px!important;background:#1B2023!important;}
#hg-search-cart{flex:0 0 40px;width:40px;height:40px;border:1px solid #E7E5EA;border-radius:50%;background:#FFFCF9;color:#1B2023;display:flex;align-items:center;justify-content:center;padding:0;position:relative;-webkit-tap-highlight-color:transparent;}
#hg-search-cart svg{width:18px;height:18px;}
#hg-search-cart .hg-sc-badge{display:none;position:absolute;right:-3px;top:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#FF4000;color:#fff;font-size:10px;font-weight:800;line-height:17px;text-align:center;}
#hg-search-cart.has-items .hg-sc-badge{display:block;}
/* (2026-10-20): declarations that the v97 !important rules below always override were removed from these base rules */
html body #app #MultiVendorSearch .v-tabs{min-height:48px!important;height:48px!important;margin:12px 16px 0!important;width:auto!important;border-bottom:1px solid #ECE9EF!important;}
html body #app #MultiVendorSearch .v-tab{min-height:48px!important;height:48px!important;padding:0 12px!important;font-size:14px!important;font-weight:700!important;text-transform:none!important;letter-spacing:0!important;}
html body #app #MultiVendorSearch .v-tab:first-child{padding-inline-start:0!important;}
html body #app #MultiVendorSearch .tab-item-merchant .merchant-card{gap:12px!important;padding:12px 16px!important;background:#FFFCF9!important;}
html body #app #MultiVendorSearch .tab-item-merchant .merchant-card .cover-img{width:72px!important;height:72px!important;min-width:72px!important;flex-basis:72px!important;border-radius:14px!important;box-shadow:none!important;border:1px solid #ECE9EF!important;}
html body #app #MultiVendorSearch .tab-item-merchant .merchant-card .merchant-card-title{font-size:14px!important;font-weight:720!important;}
html body #app #MultiVendorSearch .tab-item-merchant .merchant-card .merchant-card-info{font-size:11.5px!important;color:#77727F!important;}
html body #app #MultiVendorSearch .product-horizontal-cards{display:flex!important;gap:12px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:2px 16px 8px!important;margin:0 -16px!important;scroll-snap-type:x proximity!important;scroll-padding-inline:16px!important;scrollbar-width:none!important;touch-action:auto!important;-webkit-overflow-scrolling:touch!important;}
html body #app #MultiVendorSearch .product-horizontal-cards::-webkit-scrollbar{display:none!important;}
html body #app #MultiVendorSearch .product-horizontal-cards>.v-card{flex:0 0 146px!important;width:146px!important;min-width:146px!important;max-width:146px!important;scroll-snap-align:start!important;background:transparent!important;border:0!important;box-shadow:none!important;}
html body #app #MultiVendorSearch .product-horizontal-cards>.v-card>.v-card-text{padding:0!important;}
html body #app #MultiVendorSearch .product-horizontal-cards>.v-card .v-card-text>.tw-grid{display:flex!important;flex-direction:column-reverse!important;gap:7px!important;height:auto!important;}
html body #app #MultiVendorSearch .product-horizontal-cards>.v-card .v-card-text>.tw-grid>div{width:100%!important;height:auto!important;padding:0!important;}
html body #app #MultiVendorSearch .product-horizontal-cards .pro-card-h{width:146px!important;height:146px!important;min-width:146px!important;max-width:146px!important;min-height:146px!important;max-height:146px!important;}
html body #app #MultiVendorSearch .product-horizontal-cards .pro-card-h-img{width:146px!important;height:146px!important;min-height:146px!important;max-height:146px!important;padding-bottom:0!important;border-radius:14px!important;background:#F7F7F8!important;overflow:hidden!important;}
html body #app #MultiVendorSearch .product-horizontal-cards .pro-card-h-img>.tw-cursor-pointer{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;}
html body #app #MultiVendorSearch .product-horizontal-cards .pro-card-h-img .v-responsive,html body #app #MultiVendorSearch .product-horizontal-cards .pro-card-h-img img{width:100%!important;height:100%!important;object-fit:cover!important;}
html body #app #MultiVendorSearch .product-horizontal-cards .product-name{font-size:13px!important;font-weight:600!important;line-height:1.28!important;margin:0!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
html body #app #MultiVendorSearch .product-horizontal-cards .product-description{display:none!important;}
html body #app #MultiVendorSearch .product-horizontal-cards .price{margin-top:3px!important;}
html body #app #MultiVendorSearch .product-horizontal-cards .price *{font-size:13px!important;font-weight:650!important;}
html body #app #MultiVendorSearch .product-horizontal-cards .pro-card-h-img>.tw-absolute{right:8px!important;bottom:8px!important;left:auto!important;transform:none!important;}
html[lang^='ar'] body #app #MultiVendorSearch .product-horizontal-cards .pro-card-h-img>.tw-absolute{left:8px!important;right:auto!important;}

/* Search product groups: the native result is a merchant wrapper containing product-card-horizontal. */
html body #app #MultiVendorSearch .merchant-card:has(.product-card-horizontal){margin:0!important;padding:16px 0 18px!important;border:0!important;border-bottom:1px solid #EEECEF!important;border-radius:0!important;background:#FFFCF9!important;box-shadow:none!important;}
html body #app #MultiVendorSearch .merchant-card:has(.product-card-horizontal) .product-card-horizontal{width:146px!important;min-width:146px!important;max-width:146px!important;height:auto!important;min-height:0!important;border:0!important;background:transparent!important;box-shadow:none!important;}
html body #app #MultiVendorSearch .merchant-card:has(.product-card-horizontal) .product-card-horizontal>.v-card-text{padding:0!important;}
html body #app #MultiVendorSearch .merchant-card:has(.product-card-horizontal) .product-card-horizontal .pro-card-h,html body #app #MultiVendorSearch .merchant-card:has(.product-card-horizontal) .product-card-horizontal .pro-card-h-img{width:146px!important;height:146px!important;min-width:146px!important;max-width:146px!important;min-height:146px!important;max-height:146px!important;padding-bottom:0!important;}
html body #app #MultiVendorSearch .merchant-card:has(.product-card-horizontal) .product-card-horizontal .product-name{font-size:13px!important;font-weight:600!important;line-height:1.3!important;white-space:normal!important;overflow-wrap:anywhere!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
html body #app #MultiVendorSearch .merchant-card:has(.product-card-horizontal) .product-card-horizontal .price *{font-size:13px!important;}
html body #app #MultiVendorSearch .merchant-card:has(.product-card-horizontal) [class*='view-all']{font-size:12px!important;min-height:36px!important;}

/* v97: use the Search container width and one 16px gutter; allow native gestures on both axes. */
html body #app #MultiVendorSearch.hg-has-query .v-window,html body #app #MultiVendorSearch.hg-has-query .v-window-item{margin-top:0!important;padding-top:0!important;}

/* v97: search results are merchant rows + compact horizontal product cards, never giant grey panels. */
html body #app #MultiVendorSearch .merchant-card.hg-search-product-group{display:block!important;width:100%!important;margin:0!important;padding:14px 16px 16px!important;border:0!important;border-bottom:1px solid #EEECEF!important;border-radius:0!important;background:#FFFCF9!important;box-shadow:none!important;overflow:visible!important;}
html body #app #MultiVendorSearch .hg-search-product-group .merchant-card-title{font-size:16px!important;font-weight:720!important;line-height:1.25!important;color:#1B2023!important;}
html body #app #MultiVendorSearch .hg-search-product-group .merchant-card-info{font-size:12.5px!important;line-height:1.35!important;color:#77727F!important;margin-top:3px!important;}
html body #app #MultiVendorSearch .hg-search-product-rail{display:flex!important;flex-wrap:nowrap!important;gap:12px!important;width:auto!important;max-width:none!important;overflow-x:auto!important;overflow-y:hidden!important;margin:12px -16px 0!important;padding:0 16px 5px!important;scrollbar-width:none!important;touch-action:auto!important;-webkit-overflow-scrolling:touch!important;}
html body #app #MultiVendorSearch .hg-search-product-rail::-webkit-scrollbar{display:none!important;}
html body #app #MultiVendorSearch .hg-search-product-card{flex:0 0 146px!important;width:146px!important;min-width:146px!important;max-width:146px!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;}
html body #app #MultiVendorSearch .hg-search-product-card>.v-card-text{padding:0!important;height:auto!important;}
html body #app #MultiVendorSearch .hg-search-product-card>.v-card-text>.tw-grid{display:flex!important;flex-direction:column-reverse!important;gap:7px!important;height:auto!important;min-height:0!important;}
html body #app #MultiVendorSearch .hg-search-product-card>.v-card-text>.tw-grid>div{width:100%!important;min-width:0!important;height:auto!important;padding:0!important;}
html body #app #MultiVendorSearch .hg-search-product-card .rec-item-title{width:100%!important;max-width:none!important;min-width:0!important;}
html body #app #MultiVendorSearch .hg-search-product-card .pro-card-h,html body #app #MultiVendorSearch .hg-search-product-card .pro-card-h-img{width:146px!important;height:146px!important;min-width:146px!important;max-width:146px!important;min-height:146px!important;max-height:146px!important;padding-bottom:0!important;border-radius:14px!important;overflow:hidden!important;}
html body #app #MultiVendorSearch .hg-search-product-card .product-name{font-size:13px!important;font-weight:600!important;line-height:1.3!important;margin-top:7px!important;white-space:normal!important;overflow-wrap:anywhere!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
html body #app #MultiVendorSearch .hg-search-product-card .product-description{display:none!important;}
html body #app #MultiVendorSearch .hg-search-product-card .price{margin-top:3px!important;}
html body #app #MultiVendorSearch .hg-search-product-card .price *{font-size:13px!important;font-weight:650!important;}
html body #app #MultiVendorSearch .hg-search-product-card .pro-card-h-img{position:relative!important;}
html body #app #MultiVendorSearch .hg-search-product-card .pro-card-h-img>.tw-cursor-pointer{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;}
html body #app #MultiVendorSearch .hg-search-product-card .pro-card-h-img .v-responsive,html body #app #MultiVendorSearch .hg-search-product-card .pro-card-h-img img{width:100%!important;height:100%!important;object-fit:cover!important;}
html body #app #MultiVendorSearch .hg-search-product-card .pro-card-h-img>.tw-absolute{inset-inline-end:8px!important;inset-inline-start:auto!important;bottom:8px!important;transform:none!important;}
html body #app #MultiVendorSearch .hg-search-product-card .add-btn:not(.v-btn--block){width:33px!important;height:33px!important;min-width:33px!important;max-width:33px!important;min-height:33px!important;max-height:33px!important;flex-basis:33px!important;}
html body #app #MultiVendorSearch .hg-search-product-card .add-btn:not(.v-btn--block) svg{width:15px!important;height:15px!important;}
html body #app #MultiVendorSearch .product-horizontal-cards,html body #app #MultiVendorSearch .hg-search-product-rail{touch-action:auto!important;overscroll-behavior:auto!important;}
html body #app #MultiVendorSearch .hg-search-product-card{touch-action:auto!important;}
html body #app #MultiVendorSearch .merchant-card.hg-search-product-group .hg-search-view-all{display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;flex:0 0 auto!important;width:auto!important;min-width:0!important;height:30px!important;min-height:30px!important;margin:8px 0 0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;color:#5A29DE!important;font-size:12px!important;font-weight:700!important;}
}

/* v99 — one product-card visual system for Recommended Products and every category inside a shop.
   Scoped to shop pages. Mobile matching is viewport-based because Hyperzod does not reliably add
   .merchant-mobile-view to every mobile shop renderer. */
.scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card,
.scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card>.v-card{
  border:0!important;
  border-color:transparent!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card::before,
.scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card::after,
.scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card>.v-card::before,
.scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card>.v-card::after,
.scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .v-card__underlay{
  display:none!important;
}
.scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .product-image-frame{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
@media (max-width:959.98px){
  .scheme-merchant-page .scheme-product-recommendation-heading,
  :is(.scheme-merchant-page .cat-section,.scheme-merchant-search-page) h3.category-name{
    margin-top:0!important;
    margin-bottom:16px!important;
    padding:0!important;
    color:#1B2023!important;
    font-size:18px!important;
    font-weight:700!important;
    line-height:1.25!important;
    letter-spacing:-.01em!important;
  }

  /* Grid categories use the same clean two-column tile shell as Recommended Products. */
  .scheme-merchant-search-page.scheme-merchant-search-page .special-listing-inner>.tw-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:start!important;
    gap:28px 12px!important;
    width:100%!important;
    margin:0!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card,
.scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card>.v-card{
    align-self:start!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card::before,
.scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card::after,
.scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card>.v-card::before,
.scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card>.v-card::after,
.scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .v-card__underlay{
    display:none!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .product-image-frame{
    position:relative!important;
    width:100%!important;
    height:0!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0 0 100%!important;
    border:0!important;
    border-radius:14px!important;
    background:#F7F7F8!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .product-image-frame>.product-image{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    border-radius:14px!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .product-image-frame .v-responsive,
.scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .product-image-frame img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .product-image-frame .v-responsive__sizer{
    padding-bottom:0!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .v-card-text{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    padding:8px 0 0!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .card-footer{
    margin-top:0!important;
  }

  /* Shared type and controls. These values are the approved Recommended Products values. */
  .scheme-merchant-search-page.scheme-merchant-search-page .product-name{
    min-width:0!important;
    min-height:36.96px!important;
    margin:0!important;
    color:#1B2023!important;
    font-size:14px!important;
    font-weight:500!important;
    line-height:1.32!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .product-description{
    display:none!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .price{
    margin-top:10px!important;
    line-height:1.3!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .price,
.scheme-merchant-search-page.scheme-merchant-search-page .price *{
    font-size:14px!important;
    font-weight:500!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .add-product-btn{
    margin:0!important;
    padding:0!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .add-btn:not(.v-btn--block){
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 33px!important;
    width:33px!important;
    min-width:33px!important;
    max-width:33px!important;
    height:33px!important;
    min-height:33px!important;
    max-height:33px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    background:#FFFCF9!important;
    color:#5A29DE!important;
    box-shadow:0 1px 4px rgba(27,32,35,.12)!important;
    font-size:0!important;
    line-height:1!important;
    box-sizing:border-box!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .add-btn:not(.v-btn--block) svg{
    width:15px!important;
    height:15px!important;
    margin:0!important;
    color:#5A29DE!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .add-btn:not(.v-btn--block) svg *{
    stroke:#5A29DE!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .grid-add-control,
.scheme-merchant-search-page.scheme-merchant-search-page :is(.product-card-horizontal,.product-horizontal-cards>.v-card) .pro-card-h-img>.tw-absolute{
    position:absolute!important;
    left:auto!important;
    right:8px!important;
    bottom:8px!important;
    top:auto!important;
    transform:none!important;
    z-index:2!important;
  }
  html[dir='rtl'] .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .grid-add-control,
html[lang^='ar'] .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .grid-add-control,
html[dir='rtl'] .scheme-merchant-search-page.scheme-merchant-search-page :is(.product-card-horizontal,.product-horizontal-cards>.v-card) .pro-card-h-img>.tw-absolute,
html[lang^='ar'] .scheme-merchant-search-page.scheme-merchant-search-page :is(.product-card-horizontal,.product-horizontal-cards>.v-card) .pro-card-h-img>.tw-absolute{
    right:auto!important;
    left:8px!important;
  }

  /* Preserve shops that intentionally use compact list rows, while sharing the same type/button tokens. */
  .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards.merchant-list-view{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards.merchant-list-view>.v-card{
    width:100%!important;
    max-width:none!important;
    border:0!important;
    border-bottom:1px solid #EEECEF!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards.merchant-list-view>.v-card>.v-card-text{
    gap:14px!important;
    padding:16px 4px!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards.merchant-list-view>.v-card>.v-card-text>.tw-grid{
    height:96px!important;
    gap:14px!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards.merchant-list-view .pro-card-h,
.scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards.merchant-list-view .pro-card-h-img{
    flex:0 0 96px!important;
    width:96px!important;
    min-width:96px!important;
    max-width:96px!important;
    height:96px!important;
    min-height:96px!important;
    max-height:96px!important;
    padding-bottom:0!important;
    border-radius:15px!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards.merchant-list-view .product-name{
    min-height:0!important;
  }

  :is(.scheme-merchant-page :is(.scheme-product-recommendation-section,.cat-section),.scheme-merchant-search-page) .product-discount-badge{
    padding:4px 7px!important;
    border-radius:6px!important;
    background:#D93600!important;
    color:#FFFFFF!important;
    font-size:12px!important;
    font-weight:700!important;
    line-height:1.2!important;
    letter-spacing:.02em!important;
  }
}

@media (min-width:960px){
  /* Desktop keeps its existing grid sizes; typography and controls are still identical across both sources. */
  .scheme-merchant-search-page.scheme-merchant-search-page .product-name{
    margin:0!important;
    color:#1B2023!important;
    font-size:16px!important;
    font-weight:400!important;
    line-height:1.3!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .price,
.scheme-merchant-search-page.scheme-merchant-search-page .price *{
    font-size:16px!important;
    font-weight:500!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .price{
    margin-top:10px!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .add-btn:not(.v-btn--block){
    width:33px!important;
    min-width:33px!important;
    max-width:33px!important;
    height:33px!important;
    min-height:33px!important;
    max-height:33px!important;
    border-radius:50%!important;
  }
  .scheme-merchant-search-page.scheme-merchant-search-page .add-btn:not(.v-btn--block) svg{
    width:15px!important;
    height:15px!important;
  }
}

/* v100 — reserve the same two-line title area for every desktop shop product so prices align. */
@media (min-width:960px){
  .scheme-merchant-search-page.scheme-merchant-search-page .product-name{
    min-height:41.6px!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
  }
}

/* 2026-10-08: removed the "enlarge Home merchant artwork" rules (logo drawn 6-8px wider than its tile, so the tile edge and
   rounded corners cut off the logo's edges). The Home logo tiles (.hg-logo-img, .hg-brand-img in global-footer-1.js) now use
   background-size:contain: the whole logo always shows, in its own shape, whatever the logo file looks like. */

/* (2026-10-20): the v101 layer was removed. Every declaration in it was repeated with the same selector and media by
   the v102 layer below, which wins, so it had no effect anywhere. */

/* v102 — restore the approved in-shop mobile layout: one horizontal product row per line. */
@media (max-width:959.98px){
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .special-listing-inner>.tw-grid,
html body #app .scheme-merchant-search-page.scheme-merchant-search-page *:has(>.scheme-merchant-product-grid-card),
html body #app .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:1fr!important;
    align-items:stretch!important;
    gap:0!important;
    width:100%!important;
    padding:0!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card{
    flex:0 0 100%!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card.v-card,
html body #app .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card>.v-card{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:16px!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    padding:18px 4px!important;
    border:0!important;
    border-bottom:1px solid #EEECEF!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .product-image-frame{
    position:relative!important;
    flex:0 0 108px!important;
    width:108px!important;
    min-width:108px!important;
    max-width:108px!important;
    height:108px!important;
    min-height:108px!important;
    max-height:108px!important;
    aspect-ratio:1/1!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:16px!important;
    background:#F7F7F8!important;
    overflow:hidden!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .product-image-frame>.product-image{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    border-radius:16px!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .product-image-frame .v-responsive,
html body #app .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .product-image-frame img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .product-image-frame .v-responsive__sizer{
    padding-bottom:0!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .v-card-text{
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-self:stretch!important;
    width:auto!important;
    min-width:0!important;
    height:108px!important;
    min-height:108px!important;
    padding:0!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .product-name{
    min-height:0!important;
    margin:0!important;
    color:#1B2023!important;
    font-size:16px!important;
    font-weight:400!important;
    line-height:1.3!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .product-description{
    display:-webkit-box!important;
    margin-top:4px!important;
    color:#8A8A8A!important;
    font-size:13px!important;
    font-weight:400!important;
    line-height:1.3!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:1!important;
    overflow:hidden!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .price{
    margin-top:auto!important;
    color:#1B2023!important;
    font-size:16px!important;
    font-weight:500!important;
    line-height:1.25!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .price *{
    font-size:16px!important;
    font-weight:500!important;
    line-height:1.25!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .grid-add-control{
    position:absolute!important;
    right:4px!important;
    left:auto!important;
    bottom:4px!important;
    transform:none!important;
    z-index:2!important;
  }
  html[dir='rtl'] body #app .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .grid-add-control,
html[lang^='ar'] body #app .scheme-merchant-search-page.scheme-merchant-search-page .scheme-merchant-product-grid-card .grid-add-control{
    right:auto!important;
    left:4px!important;
  }

  /* Hyperzod's second in-store product renderer. It must match the grid-card renderer exactly. */
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards>.v-card{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-bottom:1px solid #EEECEF!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards>.v-card>.v-card-text{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    padding:18px 4px!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards>.v-card>.v-card-text>.tw-grid{
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:row!important;
    align-items:stretch!important;
    gap:16px!important;
    width:100%!important;
    min-width:0!important;
    height:108px!important;
    min-height:108px!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards>.v-card>.v-card-text>.tw-grid>div:not(.pro-card-h){
    order:1!important;
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-self:stretch!important;
    width:auto!important;
    min-width:0!important;
    height:108px!important;
    min-height:108px!important;
    padding:0!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards .pro-card-h,
html body #app .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards .pro-card-h-img{
    order:0!important;
    position:relative!important;
    flex:0 0 108px!important;
    width:108px!important;
    min-width:108px!important;
    max-width:108px!important;
    height:108px!important;
    min-height:108px!important;
    max-height:108px!important;
    aspect-ratio:1/1!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:16px!important;
    background:#F7F7F8!important;
    overflow:hidden!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards .pro-card-h-img>.tw-cursor-pointer{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards .pro-card-h-img .v-responsive,
html body #app .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards .pro-card-h-img img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards .pro-card-h-img .v-responsive__sizer{
    padding-bottom:0!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards .product-name{
    min-height:0!important;
    margin:0!important;
    color:#1B2023!important;
    font-size:16px!important;
    font-weight:400!important;
    line-height:1.3!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards .product-description{
    display:-webkit-box!important;
    margin-top:4px!important;
    color:#8A8A8A!important;
    font-size:13px!important;
    font-weight:400!important;
    line-height:1.3!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:1!important;
    overflow:hidden!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards .price{
    margin-top:auto!important;
    color:#1B2023!important;
    font-size:16px!important;
    font-weight:500!important;
    line-height:1.25!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards .price *{
    font-size:16px!important;
    font-weight:500!important;
    line-height:1.25!important;
  }
  html body #app .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards .pro-card-h-img>.tw-absolute{
    position:absolute!important;
    right:4px!important;
    left:auto!important;
    bottom:4px!important;
    transform:none!important;
    z-index:2!important;
  }
  html[dir='rtl'] body #app .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards .pro-card-h-img>.tw-absolute,
html[lang^='ar'] body #app .scheme-merchant-search-page.scheme-merchant-search-page .product-horizontal-cards .pro-card-h-img>.tw-absolute{
    right:auto!important;
    left:4px!important;
  }
}

/* v103 — the generated discovery sections previously had mobile-only styling and became raw text on desktop. */
@media (min-width:960px){
  html body #app #MultiVendorSearch{
    background:#FFFCF9!important;
    color:#1B2023!important;
    min-width:0!important;
  }
}

/* v104 — remove the app-shell gutters around Search so the page reaches both viewport edges. */
html body #app .v-main:has(#MultiVendorSearch){
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
  padding-inline:0!important;
}
html body #app #MultiVendorSearch{
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
  padding-inline:0!important;
  box-sizing:border-box!important;
  border-inline:0!important;
}
@media (max-width:959.98px){
  html body #app #MultiVendorSearch .scheme-global-search-mobile-header{
    width:100%!important;
    max-width:none!important;
    margin-inline:0!important;
    border-inline:0!important;
    border-radius:0 0 24px 24px!important;
  }
}

/* v105 — direct fallback for Hyperzod shells that do not expose a .v-main ancestor to Search.
   (2026-10-20): its #MultiVendorSearch rule was removed: the search canvas rule further down sets the same properties
   and wins; the zero side padding still comes from the v104 rule above. */
@media (max-width:959.98px){
  html body #app #MultiVendorSearch .scheme-global-search-mobile-header{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    border-left:0!important;
    border-right:0!important;
  }
}

/* v106 (removed 2026-10-20): its width / margins were all set again by the search canvas rule below, which wins. */

/* Global-only Search finish: the live iOS screenshot showed two 16px route
   insets affecting the right edge. Keep the existing -16px left correction,
   restore 32px to the narrowed canvas, and let it render through the route
   wrapper. The page viewport stays clipped to prevent horizontal scrolling. */
@media (max-width:959.98px){
  html:has(#MultiVendorSearch),
  html:has(#MultiVendorSearch) body{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    overflow-x:hidden!important;
    overflow-x:clip!important;
  }
  html body #app:has(#MultiVendorSearch),
  html body #app:has(#MultiVendorSearch) .v-application__wrap,
  html body #app .v-main:has(#MultiVendorSearch),
  html body #app .v-main:has(#MultiVendorSearch) .v-main__wrap{
    max-width:none!important;
    overflow-x:visible!important;
  }
  html body #app #MultiVendorSearch{
    width:calc(100vw + 32px)!important;
    max-width:none!important;
    margin-left:-16px!important;
    margin-right:0!important;
    border-left:0!important;
    border-right:0!important;
  }
  html body #app #MultiVendorSearch .scheme-global-search-mobile-header{
    width:100%!important;
    max-width:none!important;
    margin-right:0!important;
    border-right:0!important;
  }
  html body #app #MultiVendorSearch .scheme-global-search-mobile-header{
    position:sticky!important;
    top:var(--native-status-bar-height,0px)!important;
    z-index:80!important;
  }
  #hg-cart-btn,
  #hg-search-cart{
    color:#111!important;
  }

  /* Keep the field fixed in the visible iOS viewport while the keyboard is
     active. The measured spacer preserves the exact page layout underneath. */
  html.hg-search-input-active body #app #MultiVendorSearch{
    padding-top:var(--hg-search-header-height,76px)!important;
  }
  html.hg-search-input-active body #app #MultiVendorSearch .scheme-global-search-mobile-header{
    position:fixed!important;
    top:var(--hg-search-status-height,var(--native-status-bar-height,0px))!important;
    left:0!important;
    right:0!important;
    width:100vw!important;
    max-width:100vw!important;
    margin:0!important;
    z-index:10020!important;
  }

  /* Queried Search results: compact, consistent store rows and product
     previews regardless of which native card renderer Hyperzod returns. */
  html body #app #MultiVendorSearch.hg-has-query .v-tabs{
    width:100%!important;
    height:48px!important;
    min-height:48px!important;
    margin:0!important;
    padding:0 16px!important;
    background:#FFFCF9!important;
    border-bottom:1px solid #EEECEF!important;
    box-shadow:none!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .v-window,
  html body #app #MultiVendorSearch.hg-has-query .v-window-item{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    background:#FFFCF9!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .tab-item-merchant .merchant-card{
    display:flex!important;
    align-items:center!important;
    min-height:92px!important;
    margin:0!important;
    padding:12px 16px!important;
    gap:12px!important;
    background:#FFFCF9!important;
    border:0!important;
    border-bottom:1px solid #EEECEF!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .tab-item-merchant .merchant-card .cover-img{
    width:68px!important;
    height:68px!important;
    min-width:68px!important;
    flex-basis:68px!important;
    border:1px solid #EEECEF!important;
    border-radius:13px!important;
    background-size:contain!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .merchant-card.hg-search-product-group{
    width:100%!important;
    margin:0!important;
    padding:14px 16px 18px!important;
    background:#FFFCF9!important;
    border:0!important;
    border-bottom:1px solid #EEECEF!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-rail{
    display:flex!important;
    flex-wrap:nowrap!important;
    width:auto!important;
    max-width:none!important;
    gap:12px!important;
    margin:12px -16px 0!important;
    padding:0 16px 5px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-card{
    flex:0 0 136px!important;
    width:136px!important;
    min-width:136px!important;
    max-width:136px!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-card .pro-card-h,
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-card .pro-card-h-img{
    width:136px!important;
    height:136px!important;
    min-width:136px!important;
    max-width:136px!important;
    min-height:136px!important;
    max-height:136px!important;
    padding:0!important;
    border-radius:14px!important;
    overflow:hidden!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-card .product-name{
    min-height:34px!important;
    margin-top:8px!important;
    font-size:13px!important;
    font-weight:600!important;
    line-height:1.3!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-card .product-description{
    display:none!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-card .price{
    margin-top:7px!important;
    min-height:18px!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-card .price *{
    font-size:13px!important;
    line-height:18px!important;
  }
}

/* v109 — Hyperzod has more than one in-store product renderer. The desktop
   grid used by stores such as Cafeteria Azooz renders each product as a direct
   .product-horizontal-cards child instead of a .scheme-merchant-product-grid-card.
   Remove both the ordinary card border and Vuetify's outlined ::after layer.
   Keep the rule inside product structures so shop headers, category tabs,
   merchant cards and product dialogs retain their own borders. */
html body #app .scheme-merchant-search-page .product-horizontal-cards>.v-card,
html body #app .scheme-merchant-search-page .product-card-horizontal,
html body #app .scheme-merchant-search-page .scheme-merchant-product-grid-card,
html body #app .scheme-merchant-search-page .scheme-merchant-product-grid-card>.v-card{
  border:0!important;
  border-color:transparent!important;
  outline:0!important;
  box-shadow:none!important;
}
html body #app .scheme-merchant-search-page .product-horizontal-cards>.v-card::before,
html body #app .scheme-merchant-search-page .product-horizontal-cards>.v-card::after,
html body #app .scheme-merchant-search-page .product-card-horizontal::before,
html body #app .scheme-merchant-search-page .product-card-horizontal::after,
html body #app .scheme-merchant-search-page .scheme-merchant-product-grid-card::before,
html body #app .scheme-merchant-search-page .scheme-merchant-product-grid-card::after,
html body #app .scheme-merchant-search-page .scheme-merchant-product-grid-card>.v-card::before,
html body #app .scheme-merchant-search-page .scheme-merchant-product-grid-card>.v-card::after{
  content:none!important;
  display:none!important;
  border:0!important;
  box-shadow:none!important;
}
html body #app .scheme-merchant-search-page .product-horizontal-cards>.v-card>.v-card__underlay,
html body #app .scheme-merchant-search-page .product-card-horizontal>.v-card__underlay,
html body #app .scheme-merchant-search-page .scheme-merchant-product-grid-card>.v-card__underlay,
html body #app .scheme-merchant-search-page .scheme-merchant-product-grid-card>.v-card>.v-card__underlay{
  display:none!important;
  border:0!important;
  box-shadow:none!important;
}

/* Verified native component selectors; no replacement checkout/auth markup. */
html body #app :is(a,button,input,textarea,select,[data-hg-keyboard="1"],.v-tab):focus-visible,
html body :is(.scheme-side-panel,.product-popup) :is(button,input,textarea,select):focus-visible,
.hg-landing a:focus-visible{outline:3px solid #5A29DE!important;outline-offset:3px!important;}
/* Focus follows the rounded Search pill, never the square inner text input. */
html body #app #MultiVendorSearch .mobile-search-input input:focus-visible,
html body #app #AppBar .web-main-search input:focus-visible{outline:none!important;}
html body #app #MultiVendorSearch .mobile-search-input:focus-within .v-field,
html body #app #AppBar .web-main-search:focus-within{
  box-shadow:0 0 0 2px rgba(90,41,222,.38)!important;border-radius:999px!important;
}
html body :is(.scheme-cart-panel,.scheme-auth-panel,.scheme-coupon-content,.scheme-edit-profile-surface){color:#1B2023;background:#FFFCF9;}
html body .scheme-coupon-content{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));}
html body .scheme-coupon-content .hg-coupon-title{font-size:20px;font-weight:700;line-height:1.4;margin:0;}
html body .scheme-coupon-content .hg-coupon-close{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;border:0;border-radius:50%;background:#F2EEFF;color:#1B2023;cursor:pointer;}
html body .scheme-coupon-input #couponInput{min-width:0;}
html body .scheme-coupon-input button{min-height:42px;flex-shrink:0;color:#5A29DE!important;font-weight:600!important;}
html body #app .scheme-cart-panel .cart-row{padding-block:16px;border-bottom:1px solid #F2EEFF;}
html body #app .cart-qty-button{border-radius:999px;padding:4px 6px!important;gap:4px!important;}
html body #app .cart-qty-button button{min-width:32px;min-height:32px;}
html body #app :is(.scheme-cart-panel,#checkout) div:has(>.cart-qty-button){max-width:none!important;min-width:108px!important;min-height:40px!important;height:auto!important;}
html body #app :is(.scheme-cart-panel,#checkout) .cart-qty-button{min-width:108px!important;min-height:40px!important;box-sizing:border-box;}
html body #app :is(.scheme-cart-panel,#checkout) .cart-qty-button .counter-input{width:24px!important;min-width:24px!important;}
html body #app #checkout :is(.message-input,.cart-input-field){border-radius:14px;}
/* Checkout text boxes ("Enter message here", 2026-10-24): the global focus rule above drew a square purple outline 3px
   outside the square inner text input, inside the rounded lilac box. Focus now follows the rounded box like our other
   form fields (purple edge + soft purple ring), never the square inner input. */
html body #app #checkout .cart-input-field input:focus-visible{outline:none!important;}
html body #app #checkout .cart-input-field .v-input:focus-within{box-shadow:inset 0 0 0 1px #5A29DE,0 0 0 4px rgba(90,41,222,.12)!important;}
html body #app #checkout table{width:100%;font-variant-numeric:tabular-nums;}
html body #app #checkout td{padding-block:10px;vertical-align:top;}
html body #app #checkout td:last-child{white-space:nowrap;text-align:end;}
html body .product-popup :is(.product-name,.v-list-item-title){overflow-wrap:anywhere;}
html body #app #custom-scroll-orders.scheme-orders-surface{background:#FFFCF9!important;border-color:#EAE4F5!important;max-width:100%;box-sizing:border-box;}
html body #app #custom-scroll-orders>div>svg{max-width:min(240px,100%);height:auto;flex-shrink:0;}
html body #app .scheme-cart-empty>svg{max-width:100%;height:auto;}
html body #app .scheme-address-editor__footer{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;background:#FFFCF9;}
/* Account, cart and checkout keep Hyperzod's native controls and state. */
html body #app #custom-scroll-orders .rate-order-btn,
html body #app #addresses .add-address-btn,
html body #app #checkout .add-address-btn,
html body #app #Languages .submit-btn,
html body #app #checkout #OrderPlaceButton{
  min-height:48px!important;padding-inline:20px!important;border:0!important;border-radius:13px!important;
  background:#5A29DE!important;color:#fff!important;font-size:14px!important;font-weight:700!important;
  letter-spacing:0!important;text-transform:none!important;box-shadow:0 7px 18px rgba(90,41,222,.18)!important;
}
/* (2026-10-21) the label too: Hyperzod's colour scheme colours ".bg-button_normal .v-btn__content" dark purple (!important) for its
   white buttons, so on our purple ones "Start Shopping" (Orders) read dark purple on purple */
html body #app #custom-scroll-orders .rate-order-btn :is(.v-btn__content,.v-btn__content *),
html body #app #addresses .add-address-btn :is(.v-btn__content,.v-btn__content *),
html body #app #checkout .add-address-btn :is(.v-btn__content,.v-btn__content *),
html body #app #Languages .submit-btn :is(.v-btn__content,.v-btn__content *),
html body #app #checkout #OrderPlaceButton :is(.v-btn__content,.v-btn__content *){color:#fff!important;}
/* (2026-10-21) the phone's Place order bar (.place-order) sits outside #checkout, so with "#checkout" in front these never
   reached it and the button stayed Hyperzod's white one (its colour scheme paints .bg-button_normal white with a dark
   label); Talabat size: 52 tall, 12 corners, 16 semibold white text */
html body #app :is(#checkout,.place-order) .mobile-place-order-btn{
  min-height:52px!important;height:52px!important;border-radius:12px!important;background:#5A29DE!important;
  color:#fff!important;font-weight:600!important;box-shadow:0 7px 18px rgba(90,41,222,.18)!important;
}
html body #app :is(#checkout,.place-order) .mobile-place-order-btn :is(.v-btn__content,.v-btn__content *){color:#fff!important;font-size:16px!important;font-weight:600!important;text-transform:none!important;}
html body #app :is(#checkout,.place-order) .mobile-place-order-btn:disabled{
  opacity:1!important;background:#E6E1EC!important;color:#676171!important;box-shadow:none!important;
}
html body #app :is(#checkout,.place-order) .mobile-place-order-btn:disabled :is(.v-btn__content,.v-btn__content *){color:#676171!important;}
html body #app :is(#custom-scroll-orders,#addresses,#Languages,#checkout) :is(.rate-order-btn,.add-address-btn,.submit-btn,#OrderPlaceButton):disabled{
  background:#D6D0E3!important;color:#676171!important;box-shadow:none!important;
}
html body #app #Languages .v-card-title h1{font-size:23px!important;line-height:1.3!important;font-weight:700!important;color:#1B2023!important;}
html body #app #Languages li.language label{cursor:pointer;}
html body .scheme-cart-panel>.v-navigation-drawer__content>.scheme-side-panel__surface>.v-card-title{
  min-height:64px;display:flex;align-items:center;justify-content:center;font-size:19px!important;
}
html body .scheme-cart-panel #cartItems2 .cart-item{padding:18px 0!important;border-bottom:1px solid #EEE9F6;box-shadow:none!important;}
html body .scheme-cart-panel #cartItems2 .cart-item .v-list-item{min-height:68px;align-items:center;}
html body .scheme-cart-panel #cartItems2 .product-image{width:64px!important;height:64px!important;flex:0 0 64px;border-radius:12px!important;}
html body .scheme-cart-panel #cartItems2 .v-list-item__content{min-width:0;}
html body .scheme-cart-panel #cartItems2 .product-name{font-size:14px!important;line-height:19px!important;font-weight:600!important;}
html body .scheme-cart-panel #cartItems2 .product-price{font-size:13px!important;line-height:18px!important;font-weight:600!important;margin-top:4px;}
html body .scheme-cart-panel .cart-qty-button{background:#F2ECFF!important;color:#5A29DE!important;}
html body .scheme-cart-panel .cart-qty-button button{background:transparent!important;color:#5A29DE!important;}
html body .scheme-cart-panel .cart-qty-button .counter-input{color:#341A76!important;}
html body .scheme-cart-panel .v-navigation-drawer__append>.scheme-side-panel__surface{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 24px rgba(27,32,35,.07);}
html body .scheme-cart-panel .scheme-cart-checkout-action{min-height:54px!important;padding:8px 14px!important;border-radius:14px!important;background:#5A29DE!important;color:#fff!important;box-shadow:0 8px 18px rgba(90,41,222,.2)!important;}
html body .scheme-cart-panel .scheme-cart-checkout-action :is(.scheme-cart-checkout-summary,.scheme-cart-checkout-label,.v-btn__content){color:#fff!important;}
/* (Talabat cart and checkout, 2026-10-21) cards: 1pt #E5E5E5, 12 corners; card titles 16 semibold (no capitals);
   item name and price 16 semibold; delivery choices 14 medium */
html body #app #checkout :is(#AddressCard,#payment-card,#OrderScheduling){border:1px solid #E5E5E5!important;border-radius:12px!important;box-shadow:none!important;}
html body #app #checkout :is(#AddressCard,#payment-card,#OrderScheduling) :is(h2,h3),
html body #app #checkout :is(#CartCard,#mbOrderTypeSelect) h2,
html body #app #checkout #summary .tw-uppercase{font-size:16px!important;line-height:20px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;color:#262626!important;}
/* "TIP" is written in capitals by Hyperzod: shown as "Tip" like the other titles */
html body #app #checkout #CartCard h2:not(.tw-uppercase){text-transform:lowercase!important;}
html body #app #checkout #CartCard h2:not(.tw-uppercase)::first-letter{text-transform:uppercase;}
/* "Delivery Type" title: Hyperzod gives it a left-only margin in both languages, so in Arabic it touched the card's edge */
html body #app #checkout #CartCard h2.tw-ml-3{margin-inline:12px 0!important;}
html body #app #checkout #deliveryTime h5,html body #app #checkout #mbOrderTypeSelect h5{font-size:14px!important;font-weight:500!important;}
html body #app #checkout #cartItems .cart-item .product-name{font-size:16px!important;line-height:20px!important;font-weight:600!important;}
html body #app #checkout #cartItems .cart-item .product-price{font-size:16px!important;line-height:20px!important;font-weight:600!important;}
html body #app #checkout #summary{border:1px solid #E5E5E5!important;border-radius:12px!important;}
html body #app #ProceedToCheckoutBottomFixedContainer{background:#FFFCF9!important;border-top:1px solid #EAE4F5!important;box-shadow:0 -8px 24px rgba(27,32,35,.08)!important;}
/* "You May Also Like" sheet before checkout (.checkout-journey-sheet, Hyperzod's; 2026-10-21): its product cards came out
   as a picture in the middle with the name under it on the left; laid out like our store menu rows instead (name and
   price, 112 picture on the end side, 1pt line between) at Talabat's sizes; 40 round back button; 52 tall purple
   Checkout button with 16 semibold text */
html body .checkout-journey-sheet h2{color:#262626!important;}
html body .checkout-journey-sheet>div:first-child .v-btn--icon{width:40px!important;height:40px!important;border:1px solid #E5E5E5!important;border-radius:50%!important;}
html body .checkout-journey-sheet>div:first-child{gap:12px!important;}
/* the extra .product-horizontal-cards.merchant-list-view is needed: Hyperzod's own rules use 3 classes, so 2 lost */
html body .checkout-journey-sheet .product-horizontal-cards.merchant-list-view .product-card-horizontal{background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important;border-bottom:1px solid #E5E5E5!important;margin:0!important;height:auto!important;min-height:0!important;}
html body .checkout-journey-sheet .product-horizontal-cards.merchant-list-view .product-card-horizontal>.v-card-text{padding:16px 0!important;}
html body .checkout-journey-sheet .product-horizontal-cards.merchant-list-view .product-card-horizontal>.v-card-text>.tw-grid{display:flex!important;flex-direction:row!important;align-items:stretch!important;gap:16px!important;}
html body .checkout-journey-sheet .product-horizontal-cards.merchant-list-view .product-card-horizontal>.v-card-text>.tw-grid>div:not(.pro-card-h){order:0!important;flex:1 1 auto!important;min-width:0!important;width:auto!important;}
html body .checkout-journey-sheet .product-horizontal-cards.merchant-list-view .product-card-horizontal .pro-card-h{order:1!important;flex:0 0 112px!important;width:112px!important;min-width:112px!important;max-width:112px!important;height:112px!important;align-self:flex-start!important;margin:0!important;}
html body .checkout-journey-sheet .product-horizontal-cards.merchant-list-view .product-card-horizontal .pro-card-h-img{width:112px!important;height:112px!important;min-height:112px!important;padding:0!important;border:0!important;border-radius:16px!important;box-shadow:inset 0 0 0 1px #E5E5E5!important;overflow:hidden!important;}
html body .checkout-journey-sheet .product-horizontal-cards.merchant-list-view .product-card-horizontal h4.line-clamp-2{font-size:14px!important;line-height:20px!important;font-weight:600!important;color:#262626!important;}
html body .checkout-journey-sheet .product-horizontal-cards.merchant-list-view .product-card-horizontal .product-price{font-size:14px!important;line-height:20px!important;font-weight:600!important;color:#262626!important;}
html body .checkout-journey-sheet .bg-button_normal{height:52px!important;min-height:52px!important;border-radius:26px!important;background:#5A29DE!important;box-shadow:none!important;}
html body .checkout-journey-sheet .bg-button_normal :is(.v-btn__content,.v-btn__content *){color:#fff!important;font-size:16px!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important;}
/* Location picker (Talabat sizes, 2026-10-21): header title 16 semibold; section title 18 bold; names 14 semibold; address
   and helper lines 14 grey on 20 lines */
html body #mobileLocationSearch .tw-text-\[16px\]{font-size:16px!important;font-weight:600!important;color:#262626!important;}
html body #mobileLocationSearch h3{font-size:18px!important;line-height:24px!important;font-weight:700!important;color:#262626!important;}
html body #mobileLocationSearch :is(.tw-text-xs,.tw-text-\[12px\]){font-size:14px!important;line-height:20px!important;font-weight:400!important;color:#767676!important;}
html body #mobileLocationSearch .tw-font-medium.tw-text-\[14px\],html body #mobileLocationSearch .tw-font-medium.tw-leading-\[14px\]{font-weight:600!important;}
html body #app #ProceedToCheckoutBottomFixedContainer>.v-container{max-width:1200px!important;padding:10px 20px!important;}
html body #app #ProceedToCheckoutBottomFixedContainer>.v-container>.tw-flex{color:#5F5B68!important;gap:14px;font-size:14px!important;}
html body #app #ProceedToCheckoutBottomFixedContainer .cart-panel-btn{width:44px!important;height:44px!important;min-width:44px!important;margin-inline-end:8px;background:#F2ECFF!important;color:#5A29DE!important;border-radius:12px!important;}
html body #app #ProceedToCheckoutBottomFixedContainer .cart-panel-btn .v-icon{color:#5A29DE!important;}
html body #app #ProceedToCheckoutBottomFixedContainer .cart-btn{width:150px!important;min-height:46px!important;border-radius:12px!important;background:#5A29DE!important;color:#fff!important;font-size:14px!important;font-weight:700!important;text-transform:none!important;box-shadow:0 6px 16px rgba(90,41,222,.18)!important;}
html body #app #ProceedToCheckoutBottomFixedContainer .cart-btn .v-btn__content{color:#fff!important;}
html body #app .custom-page #html-content{overflow-wrap:anywhere;}
html body #app #app-router-view:has(.custom-page) .scheme-mobile-page-header__title{color:#1B2023!important;mix-blend-mode:normal!important;transform:none!important;}
html body #app #MultiVendorSearch .hg-missing-distance>div{display:none!important;}
html body #app #MerchantSearchPage .scheme-merchant-search-control-bar{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-block:4px;}
html body #app #MerchantSearchPage .scheme-merchant-search-control-bar::-webkit-scrollbar{display:none;}
/* White product photos need a visible add circle on every store renderer. */
html body #app #MerchantSearchPage .add-btn{
  border:1px solid #EEE9F6!important;border-radius:50%!important;
  box-shadow:0 2px 6px rgba(34,18,78,.08)!important;
}
/* The live desktop renderer is a native slider, not a merchant-card carousel. */
html body #app #MultiVendorSearch .scheme-global-search-product-group{background:#FFFCF9!important;border:none!important;border-radius:0!important;padding:16px 0!important;margin:0 0 16px!important;min-width:0;}
html body #app #MultiVendorSearch .scheme-global-search-product-group>a,
html body #app #MultiVendorSearch .hg-search-view-all{font-size:13px!important;color:#5A29DE!important;}
html body #app #MultiVendorSearch .searched-products-rail .slider-inner-container{align-items:stretch!important;gap:12px!important;}
html body #app #MultiVendorSearch .searched-products-rail__card{width:160px!important;min-width:160px!important;max-width:160px!important;height:100%;}
html body #app #MultiVendorSearch .searched-products-rail .slider-inner-container>.tw-py-2{flex:0 0 160px!important;min-width:0!important;}
html body #app #MultiVendorSearch .searched-products-rail .product-card-horizontal{height:100%!important;min-width:0!important;width:100%!important;max-width:none!important;border:0!important;box-shadow:none!important;background:#FFFCF9!important;}
html body #app #MultiVendorSearch .searched-products-rail .v-card-text{padding:0!important;}
html body #app #MultiVendorSearch .searched-products-rail .v-card-text>.tw-grid{display:flex!important;flex-direction:column-reverse!important;gap:10px!important;}
html body #app #MultiVendorSearch .searched-products-rail .pro-card-h,
html body #app #MultiVendorSearch .searched-products-rail .pro-card-h-img{width:160px!important;height:160px!important;min-width:160px!important;max-width:160px!important;min-height:160px!important;max-height:160px!important;}
html body #app #MultiVendorSearch .searched-products-rail .tw-col-span-8{flex:1;min-width:0;}
html body #app #MultiVendorSearch .searched-products-rail .product-name{font-size:14px!important;line-height:20px!important;height:40px!important;min-height:40px!important;margin:0!important;white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;font-weight:500!important;}
html body #app #MultiVendorSearch .searched-products-rail .product-description{display:none!important;}
html body #app #MultiVendorSearch .searched-products-rail .price{padding-top:10px!important;white-space:nowrap;}
html body #app #MultiVendorSearch .searched-products-rail .product-price{font-size:14px!important;line-height:20px!important;font-weight:600!important;}
@media(min-width:960px){
html body #app #app-router-view.scheme-profile-page{background:#FAF9FC!important;}
html body #app #app-router-view.scheme-profile-page>.v-container{max-width:1260px!important;padding:30px 28px 60px!important;background:transparent!important;}
html body #app .scheme-profile-page>.v-container>.v-row{display:flex;flex-wrap:nowrap;gap:28px;margin:0!important;align-items:flex-start;}
html body #app .scheme-profile-page>.v-container>.v-row>div:first-child{flex:0 0 300px!important;width:300px!important;max-width:300px!important;padding:0!important;}
html body #app .scheme-profile-page>.v-container>.v-row>div:last-child{flex:1 1 0!important;width:auto!important;max-width:none!important;min-width:0;padding:0!important;}
html body #app .scheme-profile-page #ProfileSideBar>.v-card{padding:20px!important;background:#FFFCF9!important;border:1px solid #EAE4F5!important;border-radius:18px!important;box-shadow:0 8px 26px rgba(34,18,78,.04)!important;}
html body #app .scheme-profile-page #ProfileSideBar .v-card-text{padding:0!important;}
html body #app .scheme-profile-page #ProfileSideBar .user-details{align-items:flex-start;gap:12px;padding:17px 16px!important;border-radius:14px;background:#F7F3FF;}
html body #app .scheme-profile-page #ProfileSideBar .user-details h6{font-size:17px!important;line-height:23px!important;}
html body #app .scheme-profile-page #ProfileSideBar .user-details p{font-size:12px!important;line-height:19px!important;overflow-wrap:anywhere;}
html body #app .scheme-profile-page #ProfileSideBar .scheme-profile-edit{width:40px!important;height:40px!important;min-width:40px!important;background:#FFFCF9!important;color:#5A29DE!important;border-radius:50%!important;}
html body #app .scheme-profile-page #ProfileSideBar .navigation-list{margin-top:16px!important;padding:0!important;}
html body #app .scheme-profile-page #ProfileSideBar .scheme-profile-nav-item{min-height:48px!important;margin:3px 0!important;padding:0 14px!important;border-radius:12px!important;}
html body #app .scheme-profile-page #ProfileSideBar .scheme-profile-nav-item.v-list-item--active{background:#F2ECFF!important;color:#5A29DE!important;}
html body #app .scheme-profile-page #ProfileSideBar .scheme-profile-nav-item :is(.v-list-item__overlay,.v-list-item__underlay){display:none!important;}
html body #app .scheme-profile-page #ProfileSideBar .scheme-profile-nav-item.v-list-item--active .v-list-item-title{color:#5A29DE!important;}
html body #app .scheme-profile-page #ProfileSideBar .scheme-profile-nav-item.v-list-item--active .scheme-profile-icon{color:#5A29DE!important;}
html body #app .scheme-profile-page #ProfileSideBar .scheme-profile-nav-item .v-list-item-title{font-size:14px!important;line-height:20px!important;}
html body #app .scheme-profile-page #ProfileSideBar .scheme-profile-logout{margin-top:14px!important;padding-top:10px!important;border-top:1px solid #EAE4F5!important;}
html body #app #custom-scroll-orders.scheme-orders-surface{min-height:470px!important;max-height:none!important;border-radius:18px!important;}
html body #app #custom-scroll-orders>div:first-child{height:auto!important;min-height:470px!important;margin:0!important;padding:28px 24px!important;box-sizing:border-box;}
html body #app #custom-scroll-orders h2{font-size:24px!important;line-height:31px!important;margin:18px 0 6px!important;}
html body #app #custom-scroll-orders p{font-size:15px!important;line-height:23px!important;margin:0!important;}
html body #app #custom-scroll-orders .rate-order-btn{margin-top:24px!important;max-width:240px!important;}
html body #app #addresses>.v-card,html body #app #Languages>.v-card{min-height:470px!important;padding:20px!important;background:#FFFCF9!important;border:1px solid #EAE4F5!important;border-radius:18px!important;box-shadow:none!important;}
html body #app #addresses .v-card-title,html body #app #Languages .v-card-title{padding:4px 4px 18px!important;align-items:center;gap:12px;}
html body #app #addresses .v-card-title h1{font-size:23px!important;line-height:31px!important;font-weight:700!important;}
html body #app #addresses .v-card-text{padding:20px 4px!important;}
html body #app #addresses .v-card-text>.tw-w-full>div{border-color:#EAE4F5!important;border-radius:14px!important;padding:16px!important;}
html body #app #addresses .scheme-address-icon{background:#F2ECFF!important;}
html body #app #addresses .scheme-address-primary{background:#F2ECFF!important;color:#5A29DE!important;}
html body #app #Languages .v-card-text{padding:12px 4px!important;}
html body #app #Languages li.language{border:1px solid #EAE4F5;border-radius:14px;margin-bottom:10px;padding:0!important;}
html body #app #Languages li.language:has(input:checked){background:#F8F5FF;border-color:#5A29DE;}
html body #app #Languages li.language label{min-height:58px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;}
html body #app #Languages .v-card-actions{padding:16px 4px!important;}
/* Native filtered products use a separate route root; retain the shop's five-column desktop tiles. */
html body #app #MerchantSearchPage .product-horizontal-cards{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:40px 28px!important;align-items:start!important;}
html body #app #MerchantSearchPage .product-card-horizontal>.v-card-text{padding:0!important;}
html body #app #MerchantSearchPage .product-card-horizontal .v-card-text>.tw-grid{display:flex!important;flex-direction:column-reverse!important;gap:10px!important;height:auto!important;}
html body #app #MerchantSearchPage .product-card-horizontal .v-card-text>.tw-grid>div{width:100%!important;max-width:none!important;min-width:0!important;height:auto!important;}
html body #app #MerchantSearchPage .pro-card-h{width:100%!important;max-width:none!important;min-width:0!important;height:auto!important;}
html body #app #MerchantSearchPage .pro-card-h-img{width:100%!important;height:0!important;min-height:0!important;max-height:none!important;padding-bottom:100%!important;aspect-ratio:auto!important;}
html body #app #MerchantSearchPage .product-name{height:41.6px!important;min-height:41.6px!important;}
html body #app #MerchantSearchPage .product-description{display:none!important;}
html body #app #MerchantSearchPage .price{margin-top:0!important;padding-top:10px!important;}
}
@media(max-width:959px){
/* Account subpages use the app-style header; the full desktop marketing footer
   directly under short forms creates a black half-screen on mobile. */
html body #app #profile #MainFooter{display:none!important;}
/* Item page (the product's own address, /m/<store>/<id>/product/<id>; 2026-10-21): Talabat item sizes like the item sheet:
   name 20 bold, price 16 semibold, description 14 grey on 20 lines, 128x52 stepper, 52 tall purple Add button with 16
   semibold white text (it was Hyperzod's white button with a dark label); 16 at the sides of the bottom bar (was 8) */
html body #app .v-card:has(#productInfo) #productInfo h2{font-size:20px!important;line-height:24px!important;font-weight:700!important;color:#262626!important;}
html body #app .v-card:has(#productInfo) #productInfo h3{font-size:16px!important;line-height:20px!important;font-weight:600!important;color:#262626!important;}
html body #app .v-card:has(#productInfo) #productInfo p{font-size:14px!important;line-height:20px!important;color:#767676!important;}
html body #app .v-card:has(#productInfo) .v-card-actions{padding:12px 16px!important;}
html body #app .v-card:has(#productInfo) .v-card-actions>div:first-child{width:128px!important;height:52px!important;border:1px solid #E5E5E5!important;border-radius:26px!important;overflow:hidden;}
html body #app .v-card:has(#productInfo) .v-card-actions>div:first-child .v-btn{height:50px!important;}
html body #app .v-card:has(#productInfo) .v-card-actions>div:first-child input{font-size:16px!important;font-weight:600!important;}
html body #app .v-card:has(#productInfo) .v-card-actions .bg-button_normal{height:52px!important;min-height:52px!important;border-radius:26px!important;background:#5A29DE!important;box-shadow:none!important;}
html body #app .v-card:has(#productInfo) .v-card-actions .bg-button_normal :is(.v-btn__content,.v-btn__content *){color:#fff!important;font-size:16px!important;font-weight:600!important;text-transform:none!important;}
/* Manage addresses (Talabat sizes, 2026-10-21): section title 18 bold ("Saved addresses", not in capitals), address and
   phone lines 14 grey on 20 lines, "Add new address" 14 semibold */
html body #app #addresses h3{font-size:18px!important;line-height:24px!important;font-weight:700!important;color:#262626!important;text-transform:lowercase!important;}
html body #app #addresses h3::first-letter{text-transform:uppercase;}
html body #app #addresses .tw-text-xs{font-size:14px!important;line-height:20px!important;color:#767676!important;}
html body #app #addresses .tw-font-medium.tw-leading-\[14px\]{font-weight:600!important;}
/* "Add New Address" box: Hyperzod nudges it 3 left inside a 4 padded wrapper, so it ended 7 short of the saved address card; lined up with it at 16 on both sides */
html body #app #addresses .tw-px-1{padding-inline:0!important;}
html body #app #addresses .tw-px-1>div{--tw-translate-x:0px!important;}
html body #app #checkout .scheme-checkout-content{padding-inline:16px!important;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))!important;}
html body #app .custom-page #html-content h1{font-size:26px!important;line-height:1.4!important;}
html body #app #MultiVendorSearch .searched-products-rail__card{width:136px!important;min-width:136px!important;max-width:136px!important;}
html body #app #MultiVendorSearch .searched-products-rail .slider-inner-container>.tw-py-2{flex-basis:136px!important;}
html body #app #MultiVendorSearch .searched-products-rail .pro-card-h,
html body #app #MultiVendorSearch .searched-products-rail .pro-card-h-img{width:136px!important;height:136px!important;min-width:136px!important;max-width:136px!important;min-height:136px!important;max-height:136px!important;}
}
@media(prefers-reduced-motion:reduce){
html body #app .hg-wm{animation:none!important;transition:none!important;}
html body #app .slider-inner-container{scroll-behavior:auto!important;}
}

/* v94 — SEARCH: steady header + results page in our design (mobile).
   Header: the pinned header's position/spacer now read the sizes stored on <html> (global-footer-2.js), with
   the native status-bar height as the fallback, so a route rebuild can no longer move it.
   Results: the earlier rules needed .merchant-card AND .hg-search-product-group on the same element; the app's
   result groups only carry .hg-search-product-group, so they rendered in Hyperzod's default look. */
@media (max-width:959.98px){
  /* (2026-10-20): the pinned-header padding-top / top rules that stood here were exact copies of the ones in the
     "Global-only Search finish" block above, and were removed. */
  /* header never changes size between the empty, typing and results states */
  html body #app #MultiVendorSearch .scheme-global-search-mobile-header{
    min-height:76px!important;
    box-sizing:border-box!important;
  }

  /* results count ("5+ Results") */
  html body #app #MultiVendorSearch.hg-has-query .hg-search-count{
    display:block!important;
    margin:0!important;
    padding:14px 16px 6px!important;
    font-size:13px!important;
    font-weight:500!important;
    line-height:1.3!important;
    color:#77727F!important;
    text-transform:none!important;
  }

  /* one result group per store */
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-group{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:16px 16px 18px!important;
    background:#FFFCF9!important;
    background-image:none!important;
    border:0!important;
    border-bottom:1px solid #EEECEF!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-group>div{
    margin:0!important;
    padding:0!important;
  }
  /* store name: sentence case, bold, Satin Deep Black */
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-group a>div,
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-group [class*="tw-font-semibold"][class*="tw-cursor-pointer"]{
    font-size:16px!important;
    font-weight:700!important;
    line-height:1.25!important;
    letter-spacing:-.01em!important;
    color:#1B2023!important;
    text-transform:none!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  /* meta row: rating, time, distance */
  html body #app #MultiVendorSearch.hg-has-query #SearchedMerchantRating,
  html body #app #MultiVendorSearch.hg-has-query #SearchedMerchantAverageTimeAndDistance,
  html body #app #MultiVendorSearch.hg-has-query #SearchedMerchantRating *,
  html body #app #MultiVendorSearch.hg-has-query #SearchedMerchantAverageTimeAndDistance *{
    font-size:12.5px!important;
    font-weight:500!important;
    line-height:1.3!important;
    color:#77727F!important;
  }
  html body #app #MultiVendorSearch.hg-has-query #SearchedMerchantRating img,
  html body #app #MultiVendorSearch.hg-has-query #SearchedMerchantAverageTimeAndDistance img{
    width:14px!important;
    max-width:14px!important;
    height:14px!important;
    opacity:.75;
  }
  html body #app #MultiVendorSearch.hg-has-query #SearchedMerchantRating img[src=""],
  html body #app #MultiVendorSearch.hg-has-query #SearchedMerchantAverageTimeAndDistance img[src=""]{
    display:none!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .hg-search-norating,
  html body #app #MultiVendorSearch.hg-has-query .hg-search-nodot{
    display:none!important;
  }

  /* product rail: swipe sideways, no arrow buttons */
  html body #app #MultiVendorSearch.hg-has-query .searched-products-rail .simple-slider-controls{
    display:none!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .searched-products-rail{
    margin:12px -16px 0!important;
    padding:0!important;
    overflow:visible!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .searched-products-rail .simple-slider-container{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 16px 6px!important;
    margin:0!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-snap-type:x proximity!important;
    scroll-padding-inline:16px!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .searched-products-rail .simple-slider-container::-webkit-scrollbar{
    display:none!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .searched-products-rail .slider-inner-container{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:flex-start!important;
    gap:12px!important;
    width:max-content!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    transition:none!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .searched-products-rail .slider-inner-container>*{
    flex:0 0 auto!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
    scroll-snap-align:start;
  }
  html body #app #MultiVendorSearch.hg-has-query .searched-products-rail .searched-products-rail__card{
    width:136px!important;
    margin:0!important;
    padding:0!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-card .v-card-text{
    padding:0!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-card .pro-card-h-img{
    border:1px solid #EEECEF!important;
    background:#FFFCF9!important;
    box-shadow:none!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-card .product-name,
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-card .product-name *{
    color:#1B2023!important;
    text-transform:none!important;
    text-align:start!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-card .price,
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-card .price *{
    color:#1B2023!important;
    font-weight:700!important;
    text-align:start!important;
    margin-bottom:0!important;
  }

  /* "View all": brand purple, sentence case, sits under the rail.
     (2026-10-20): its parent is tagged .hg-search-view-all-wrap by global-footer-2.js, instead of being found with
     [class*="tw-uppercase"]:has(>.hg-search-view-all); the class is doubled to keep the same strength. */
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-group .hg-search-view-all-wrap.hg-search-view-all-wrap,
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-group .hg-search-view-all{
    text-transform:none!important;
    color:#5A29DE!important;
    font-size:13px!important;
    font-weight:700!important;
    letter-spacing:0!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-group .hg-search-view-all-wrap.hg-search-view-all-wrap{
    margin:10px 0 0!important;
    padding:0!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-group .hg-search-view-all{
    display:inline-flex!important;
    align-items:center!important;
    gap:2px!important;
    height:34px!important;
    padding:0 14px!important;
    border:1px solid #E9E0FF!important;
    border-radius:999px!important;
    background:#F6F2FF!important;
    text-decoration:none!important;
  }
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-group .hg-search-view-all .v-icon,
  html body #app #MultiVendorSearch.hg-has-query .hg-search-product-group .hg-search-view-all .v-icon *{
    color:#5A29DE!important;
    caret-color:#5A29DE!important;
    font-size:18px!important;
    width:18px!important;
    height:18px!important;
  }
}

/* v95 — APP SEARCH (html.hg-native-app is set by app-footer.js, so nothing here reaches the website):
   pinned header keeps the screen's left edge, no field loading bar, discovery stays while typing,
   loading placeholders shaped like the result groups. */
@keyframes hgSkPulse{from{opacity:.55}to{opacity:1}}
@media (max-width:959.98px){
  /* (2026-10-20): the pinned-header shift rule was removed: since v101 global-footer-2.js never pins the header in the app */
  /* Hyperzod's loading line inside the text field */
  html.hg-native-app body #app #MultiVendorSearch .mobile-search-input .v-field__loader,
  html.hg-native-app body #app #MultiVendorSearch .mobile-search-input .v-progress-linear{
    display:none!important;
  }
  /* (2026-10-20): "while typing, the native category grid stays" was removed: it showed Hyperzod's old grid over the new
     app's own start screen */
  /* loading: hide the generic skeleton, show a placeholder shaped like a result group (title, meta, row of 136px tiles) */
  html.hg-native-app body #app #MultiVendorSearch.hg-loading .v-skeleton-loader,
  html.hg-native-app body #app #MultiVendorSearch.hg-loading [class*="hz-skeleton"]{
    visibility:hidden!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  html.hg-native-app body #app #MultiVendorSearch.hg-loading::after{
    content:"";
    display:block;
    height:560px;
    margin:14px 16px 0;
    background:
      linear-gradient(#EEECEF,#EEECEF) 0 0 / 90px 14px no-repeat,
      linear-gradient(#EEECEF,#EEECEF) 0 36px / 170px 18px no-repeat,
      linear-gradient(#EEECEF,#EEECEF) 0 62px / 120px 12px no-repeat,
      repeating-linear-gradient(90deg,#EEECEF 0 136px,transparent 136px 148px) 0 90px / 100% 136px no-repeat,
      linear-gradient(#EEECEF,#EEECEF) 0 236px / 110px 13px no-repeat,
      linear-gradient(#EEECEF,#EEECEF) 0 258px / 60px 13px no-repeat,
      linear-gradient(#EEECEF,#EEECEF) 0 316px / 170px 18px no-repeat,
      linear-gradient(#EEECEF,#EEECEF) 0 342px / 120px 12px no-repeat,
      repeating-linear-gradient(90deg,#EEECEF 0 136px,transparent 136px 148px) 0 370px / 100% 136px no-repeat,
      linear-gradient(#EEECEF,#EEECEF) 0 516px / 110px 13px no-repeat,
      linear-gradient(#EEECEF,#EEECEF) 0 538px / 60px 13px no-repeat;
    animation:hgSkPulse 1.2s ease-in-out infinite alternate;
    opacity:.85;
  }
  html[dir="rtl"].hg-native-app body #app #MultiVendorSearch.hg-loading::after{
    background:
      linear-gradient(#EEECEF,#EEECEF) 100% 0 / 90px 14px no-repeat,
      linear-gradient(#EEECEF,#EEECEF) 100% 36px / 170px 18px no-repeat,
      linear-gradient(#EEECEF,#EEECEF) 100% 62px / 120px 12px no-repeat,
      repeating-linear-gradient(270deg,#EEECEF 0 136px,transparent 136px 148px) 0 90px / 100% 136px no-repeat,
      linear-gradient(#EEECEF,#EEECEF) 100% 236px / 110px 13px no-repeat,
      linear-gradient(#EEECEF,#EEECEF) 100% 258px / 60px 13px no-repeat,
      linear-gradient(#EEECEF,#EEECEF) 100% 316px / 170px 18px no-repeat,
      linear-gradient(#EEECEF,#EEECEF) 100% 342px / 120px 12px no-repeat,
      repeating-linear-gradient(270deg,#EEECEF 0 136px,transparent 136px 148px) 0 370px / 100% 136px no-repeat,
      linear-gradient(#EEECEF,#EEECEF) 100% 516px / 110px 13px no-repeat,
      linear-gradient(#EEECEF,#EEECEF) 100% 538px / 60px 13px no-repeat;
  }
}

/* v104 — APP SEARCH: the header's own container never collapses.
   The sticky header can only travel inside its parent box. When the first letter is typed, the search home inside that
   box is removed and the box shrank to about 208px (112px of it bottom padding), leaving the header room to sit at 20px
   instead of under the status bar at 59px. Giving that box the same minimum height #MultiVendorSearch already has
   (one screen) keeps room for the header at all times, so it never moves. Nothing reads or corrects the header. */
@media (max-width:959.98px){
  html.hg-native-app body #app #MultiVendorSearch :has(> .scheme-global-search-mobile-header){
    min-height:100vh;
    box-sizing:border-box;
  }
}

/* v105 — SEARCH, ARABIC: the search canvas sits where it does in English.
   The canvas is one screen + 32px wide and pulled 16px past the left edge with margin-left:-16px, so it overhangs both
   edges by 16px (the 16px side padding inside it then lines the header up with the screen). In right-to-left pages a
   block whose width and both margins are set ignores margin-left, so the canvas was anchored to the right edge instead:
   16px short on the right (white strip) and 48px past the left (bag button and rows cut off). Pulling it 16px past the
   right edge with margin-right does the same job in right-to-left, so both edges overhang by 16px again.
   (2026-10-20) now on the website too (it was app-only, html.hg-native-app), where Arabic search had the same cut-off.
   Tested: the app keeps exactly the same layout; a start/end-margin version was tried and moved the whole Arabic app 16px. */
@media (max-width:959.98px){
  html:is([dir="rtl"],[lang^="ar"]) body #app #MultiVendorSearch{
    margin-right:-16px!important; /* !important: beats the margin-right:0!important rule of the search canvas above */
  }
}

/* PRODUCT IMAGE CORNERS (2026-10-05) - every product card built as a "horizontal card" (Recommended Products on store
   pages, product rows, home rails and search cards, website and app). Our rules round the image box .pro-card-h-img
   (14px on store pages), but the picture inside it (.v-img, Hyperzod's "rounded-lg") keeps Vuetify's own 8px corners and
   clips too. When the picture is not exactly on top of the box, one side shows the 8px corners and the other the box's
   own corners (app screenshot: about 6-7px on the left, 11-14px on the right). The picture and its wrapper now take the
   box's corner size, so all four corners are the same in every place, whatever size that place uses.
   !important only to beat Vuetify's .rounded-lg{border-radius:...!important}. */
.pro-card-h-img>.tw-cursor-pointer,
.pro-card-h-img .v-img,
.pro-card-h-img .v-img__img{
  border-radius:inherit!important;
}

/* ==================== STORE PRODUCT CARDS (2026-10-08) ====================
   The one rule set for product cards on store pages: Recommended Products and every category section, website and app,
   English and Arabic. It replaces the earlier layers (v81, v99, v100, v101, v102, v109 here; the mobile, ALL SIZES and
   desktop store-card rules in global-footer-1.js). Layout comes from structure, not from the product's data:
   - the image slot always exists: a product with no image gets the same box, with the same picture global-footer-1.js
     already shows when a photo is missing (grey frame, mountain icon), so every row lines up;
   - the "+" sits in the same corner of that slot in every card, wherever Hyperzod puts the button in its markup
     (inside the photo when there is one, next to the price when there is none);
   - the "+" label ("Add Item") is never shown, whatever text rules match around it;
   - names wrap to at most 2 lines and long words break, so nothing pushes the price or the "+" out.
   Hyperzod renderers covered: .product-card-horizontal (category rows + Recommended) and .scheme-merchant-product-grid-card.
   Selectors start with "html body :is(#app,.v-overlay-container) .scheme-merchant-page" so they outrank the general card rules that the Search and
   Home rails still use; !important only to beat Vuetify/Tailwind utilities and those general rules. */

/* ---------- shared: the "+" button, every store product card ---------- */
html body :is(#app,.v-overlay-container) .scheme-merchant-page :is(.cat-section,.scheme-product-recommendation-section) .add-product-btn{
  margin:0!important;padding:0!important;
}
html body :is(#app,.v-overlay-container) .scheme-merchant-page :is(.cat-section,.scheme-product-recommendation-section) .add-btn:not(.v-btn--block){
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 40px!important;width:40px!important;min-width:40px!important;max-width:40px!important; /* Talabat: 40 round, soft shadow (2026-10-21; was 33) */
  height:40px!important;min-height:40px!important;max-height:40px!important;
  padding:0!important;margin:0!important;border:1px solid #E5E5E5!important;border-radius:50%!important;
  background:#FFFCF9!important;box-shadow:0 2px 8px rgba(0,0,0,.12)!important;
  font-size:0!important;line-height:0!important;
}
html body :is(#app,.v-overlay-container) .scheme-merchant-page :is(.cat-section,.scheme-product-recommendation-section) .add-btn:not(.v-btn--block) svg{
  width:16px!important;height:16px!important;margin:0!important;
}
html body :is(#app,.v-overlay-container) .scheme-merchant-page :is(.cat-section,.scheme-product-recommendation-section) .add-btn:not(.v-btn--block) svg *{
  stroke:#5A29DE!important;
}

/* ---------- shared: Recommended Products column (no side padding) ---------- */
html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-product-recommendation-section .v-col{padding:0!important;}

/* ---------- shared: horizontal-card skeleton (category rows and Recommended, all sizes) ---------- */
html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-horizontal{
  margin:0!important;border:0 solid transparent!important;box-shadow:none!important;background:transparent!important;
  min-width:0!important;height:auto!important;min-height:0!important;
}
html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-horizontal::before,
html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-horizontal::after,
html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-horizontal>.v-card__underlay{
  content:none!important;display:none!important;
}
html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-horizontal>.v-card-text{
  display:flex!important;height:auto!important;min-width:0!important;
}
/* the row inside the card: image slot + text column; position:relative makes it the box the "+" is placed in */
html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-horizontal>.v-card-text>.tw-grid{
  position:relative!important;display:flex!important;height:auto!important;min-width:0!important;min-height:0!important;
}
html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-horizontal>.v-card-text>.tw-grid>div{
  min-width:0!important;height:auto!important;padding:0!important;
}
html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-horizontal .tw-justify-between{
  display:flex!important;flex-direction:column!important;justify-content:space-between!important;height:auto!important;
  flex:1 1 auto!important;min-width:0!important;min-height:0!important;
}
html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-horizontal .rec-item-title{max-width:none!important;}
/* image slot */
html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-horizontal .pro-card-h{
  display:flex!important;flex:0 0 var(--hgp-img)!important;
  width:var(--hgp-img)!important;min-width:var(--hgp-img)!important;max-width:var(--hgp-img)!important;
  height:var(--hgp-img)!important;min-height:var(--hgp-img)!important;max-height:var(--hgp-img)!important;
  padding:0!important;margin:0!important;
}
html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-horizontal .pro-card-h-img{
  position:relative!important;display:block!important;flex:0 0 var(--hgp-img)!important;
  width:var(--hgp-img)!important;min-width:var(--hgp-img)!important;max-width:var(--hgp-img)!important;
  height:var(--hgp-img)!important;min-height:var(--hgp-img)!important;max-height:var(--hgp-img)!important;
  padding:0!important;margin:0!important;border:0!important;aspect-ratio:auto!important;
  border-radius:var(--hgp-radius)!important;background:var(--hgp-bg)!important;overflow:hidden!important;
}
html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-horizontal .pro-card-h-img>.tw-cursor-pointer{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
}
html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-horizontal .pro-card-h-img .v-responsive__sizer{padding-bottom:0!important;}
/* no image: the same slot, drawn by the row itself */
html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-horizontal>.v-card-text>.tw-grid:not(:has(>.pro-card-h))::before{
  content:""!important;display:block!important;flex:0 0 var(--hgp-img)!important;align-self:flex-start!important;
  width:var(--hgp-img)!important;height:var(--hgp-img)!important;border-radius:var(--hgp-radius)!important;
  background:#F0F0F0 url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20200%20200'%3E%3Crect%20width%3D'200'%20height%3D'200'%20fill%3D'%23F0F0F0'%2F%3E%3Cpath%20d%3D'M46%20146l38-48%2030%2034%2024-28%2032%2042z'%20fill%3D'%23DCDCDC'%2F%3E%3Ccircle%20cx%3D'70'%20cy%3D'72'%20r%3D'16'%20fill%3D'%23DCDCDC'%2F%3E%3C%2Fsvg%3E") center/cover no-repeat!important;
}
/* the "+": one corner of the image slot, same place with or without a photo */
html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-horizontal .pro-card-h-img>.tw-absolute{
  position:absolute!important;top:auto!important;bottom:var(--hgp-inset)!important;
  left:auto!important;right:auto!important;inset-inline-end:var(--hgp-inset)!important;
  transform:none!important;z-index:2!important;
}
html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-horizontal>.v-card-text>.tw-grid:not(:has(>.pro-card-h)) .price>.tw-relative{
  position:absolute!important;top:calc(var(--hgp-img) - 33px - var(--hgp-inset))!important;bottom:auto!important;
  left:auto!important;right:auto!important;inset-inline-start:calc(var(--hgp-img) - 33px - var(--hgp-inset))!important;
  transform:none!important;z-index:2!important;margin:0!important;
}
/* text */
html body :is(#app,.v-overlay-container) .scheme-merchant-page :is(.product-card-horizontal,.scheme-merchant-product-grid-card,.product-card-slider) .price{
  display:block!important;margin:0!important;color:#1B2023!important;font-size:16px!important;font-weight:500!important;
}
html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-slider .product-description{display:none!important;}
html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-slider .price{margin-top:10px!important;}

/* ---------- shared: grid-card renderer (.scheme-merchant-product-grid-card) - same row / tile, Hyperzod's other markup ---------- */
html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card{
  margin:0!important;padding:0!important;min-width:0!important;border:0 solid transparent!important;box-shadow:none!important;background:transparent!important;
}
html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card::before,
html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card::after,
html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card>.v-card::after,
html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card .v-card__underlay{
  content:none!important;display:none!important;
}
html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card>.v-card{
  position:relative!important;display:flex!important;min-width:0!important;height:auto!important;
  border:0 solid transparent!important;box-shadow:none!important;background:transparent!important;
}
html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card .product-image-frame{
  position:relative!important;display:block!important;flex:0 0 var(--hgp-img)!important;
  width:var(--hgp-img)!important;min-width:var(--hgp-img)!important;max-width:var(--hgp-img)!important;
  height:var(--hgp-img)!important;min-height:var(--hgp-img)!important;max-height:var(--hgp-img)!important;
  padding:0!important;margin:0!important;border:0!important;
  border-radius:var(--hgp-radius)!important;background:var(--hgp-bg)!important;overflow:hidden!important;
}
html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card .product-image-frame>.product-image{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border-radius:var(--hgp-radius)!important;
}
html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card .product-image .v-responsive__sizer{padding-bottom:0!important;}
html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card .product-image img{object-fit:cover!important;}
html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card .grid-add-control{
  position:absolute!important;top:auto!important;bottom:var(--hgp-inset)!important;
  left:auto!important;right:auto!important;inset-inline-end:var(--hgp-inset)!important;transform:none!important;z-index:2!important;
}
/* no image: the same slot (Hyperzod's markup for this case has not been seen yet on this renderer) */
html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card>.v-card:not(:has(>.product-image-frame))::before{
  content:""!important;display:block!important;order:-1!important;flex:0 0 var(--hgp-img)!important;
  width:var(--hgp-img)!important;height:var(--hgp-img)!important;border-radius:var(--hgp-radius)!important;
  background:#F0F0F0 url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20200%20200'%3E%3Crect%20width%3D'200'%20height%3D'200'%20fill%3D'%23F0F0F0'%2F%3E%3Cpath%20d%3D'M46%20146l38-48%2030%2034%2024-28%2032%2042z'%20fill%3D'%23DCDCDC'%2F%3E%3Ccircle%20cx%3D'70'%20cy%3D'72'%20r%3D'16'%20fill%3D'%23DCDCDC'%2F%3E%3C%2Fsvg%3E") center/cover no-repeat!important;
}
html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card>.v-card>.v-card-text{
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;
  gap:12px!important;min-width:0!important;
}
html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card .name,
html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card .card-footer{margin:0!important;max-width:100%!important;}

/* ---------- mobile + app (below 960px) ---------- */
@media (max-width:959.98px){
  /* category sections: one product per row, divider between rows */
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .cat-section .product-horizontal-cards{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;
    grid-template-columns:1fr!important;width:100%!important;
  }
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .cat-section .product-card-horizontal{
    --hgp-img:108px;--hgp-radius:16px;--hgp-bg:#F7F7F8;--hgp-inset:4px;
    width:100%!important;max-width:none!important;border-radius:0!important;
    border-bottom:1px solid #EEECEF!important;overflow:visible!important;
  }
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .cat-section .product-card-horizontal>.v-card-text{
    position:relative!important;align-items:center!important;width:100%!important;padding:18px 4px!important;gap:14px!important;
  }
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .cat-section .product-card-horizontal>.v-card-text>.clickable{
    position:absolute!important;inset:0!important;z-index:0;
  }
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .cat-section .product-card-horizontal>.v-card-text>.tw-grid{
    flex:1 1 auto!important;flex-direction:row!important;align-items:stretch!important;gap:16px!important;
    width:100%!important;min-height:108px!important;
  }
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .cat-section .product-card-horizontal>.v-card-text>.tw-grid>div:not(.pro-card-h){
    order:1!important;display:flex!important;flex:1 1 auto!important;flex-direction:column!important;
    justify-content:flex-start!important;min-height:108px!important;max-width:100%!important;
  }
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .cat-section .product-card-horizontal .pro-card-h{
    order:0!important;position:relative!important;background:var(--hgp-bg)!important;border-radius:var(--hgp-radius)!important;overflow:hidden!important;
  }
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .cat-section .product-card-horizontal .price{margin-top:auto!important;line-height:1.25!important;}

  /* Recommended Products: sideways rail of 146px tiles */
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-product-recommendation-section .v-row{margin:0 -16px!important;}
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-product-recommendation-section .v-col>.tw-grid{
    display:flex!important;align-items:start!important;gap:12px!important;overflow-x:auto!important;padding:0 16px 8px!important;margin:0!important;
    scroll-snap-type:x mandatory!important;scroll-padding-inline:16px!important;scrollbar-width:none!important;
  }
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-product-recommendation-section .v-col>.tw-grid::-webkit-scrollbar{display:none!important;}
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-product-recommendation-section .product-card-horizontal{
    --hgp-img:146px;--hgp-radius:14px;--hgp-bg:#F2F2F2;--hgp-inset:8px;
    flex:0 0 146px!important;width:146px!important;scroll-snap-align:start!important;
  }
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-product-recommendation-section .product-card-horizontal>.v-card-text>.tw-grid{
    flex-direction:column-reverse!important;justify-content:flex-end!important;align-items:center!important;gap:8px!important;
  }
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-product-recommendation-section .product-card-horizontal>.v-card-text>.tw-grid>div{width:100%!important;}
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-product-recommendation-section .product-card-horizontal .product-description{display:none!important;}

  /* grid-card renderer, category sections: the same one-product row */
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .cat-section .product-cards:has(>.scheme-merchant-product-grid-card){
    display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;grid-template-columns:1fr!important;width:100%!important;
  }
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .cat-section .scheme-merchant-product-grid-card{
    --hgp-img:108px;--hgp-radius:16px;--hgp-bg:#F7F7F8;--hgp-inset:4px;
    flex:0 0 100%!important;width:100%!important;max-width:100%!important;
  }
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .cat-section .scheme-merchant-product-grid-card>.v-card{
    flex-direction:row!important;align-items:center!important;gap:16px!important;padding:18px 4px!important;
    border-bottom:1px solid #EEECEF!important;border-radius:0!important;
  }
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .cat-section .scheme-merchant-product-grid-card>.v-card>.v-card-text{
    order:1!important;flex:1 1 auto!important;min-height:108px!important;padding:0!important;
  }
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .cat-section .scheme-merchant-product-grid-card .product-description{
    display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:1!important;overflow:hidden!important;
    margin-top:4px!important;color:#8A8A8A!important;font-size:13px!important;font-weight:400!important;line-height:1.3!important;
  }
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .cat-section .scheme-merchant-product-grid-card .price,
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .cat-section .scheme-merchant-product-grid-card .product-price{line-height:1.25!important;}
  /* slider renderer (.product-card-slider): its name and price spacing stay as they were */
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-slider .product-name{min-height:36.96px!important;}
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-slider .price{line-height:1.3!important;}
}

/* ---------- website, desktop (960px and up): 5 tiles per row ---------- */
@media (min-width:960px){
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .cat-section .product-horizontal-cards,
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-product-recommendation-section .v-col>.tw-grid{
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:40px 28px!important;align-items:start!important;
  }
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-horizontal{
    --hgp-img:200px;--hgp-radius:0px;--hgp-bg:#F2F2F2;--hgp-inset:10px;
    width:auto!important;max-width:none!important;
  }
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-product-recommendation-section .product-card-horizontal{--hgp-radius:14px;}
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-horizontal>.v-card-text>.tw-grid{
    flex-direction:column-reverse!important;justify-content:flex-end!important;gap:0!important;
  }
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-product-recommendation-section .product-card-horizontal>.v-card-text>.tw-grid{gap:10px!important;}
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-product-recommendation-section .product-card-horizontal .product-name{margin-bottom:4px!important;}
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .product-card-horizontal .product-description{display:none!important;}

  /* grid-card renderer: 5 tiles per row, image on top */
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .cat-section .product-cards:has(>.scheme-merchant-product-grid-card){
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:40px 28px!important;align-items:start!important;
  }
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card{
    --hgp-img:100%;--hgp-radius:14px;--hgp-bg:#F2F2F2;--hgp-inset:10px;width:auto!important;
  }
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card>.v-card{flex-direction:column!important;gap:12px!important;padding:0!important;}
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card .product-image-frame{aspect-ratio:1/1!important;height:auto!important;min-height:0!important;max-height:none!important;flex:0 0 auto!important;}
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card>.v-card:not(:has(>.product-image-frame))::before{aspect-ratio:1/1!important;height:auto!important;flex:0 0 auto!important;}
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card>.v-card>.v-card-text{padding:16px 4px 0!important;}
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card .product-name{min-height:41.6px!important;margin-bottom:4px!important;}
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card .product-description{display:none!important;}
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card .price{margin-top:10px!important;}
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card .product-price{line-height:18px!important;}
  html body :is(#app,.v-overlay-container) .scheme-merchant-page .scheme-merchant-product-grid-card .grid-add-control{z-index:4!important;}
}

/* ONE BACKGROUND COLOUR (2026-10-19, app + website): #FFFCF9, looks white but isn't. Every surface uses it: pages, cards,
   bars, sheets. Hyperzod's own screens take their surface colour from these theme values; the classes cover its white
   utility classes. Text and coloured buttons are unchanged. */
:root,.v-theme--hpzLightTheme{--v-theme-background:255,252,249!important;--v-theme-surface:255,252,249!important;}
html,body,.v-application,.bg-white,.tw-bg-white,.bg-surface{background-color:#FFFCF9!important;}
/* Hyperzod's colour scheme (Hyperzod admin > colour schemes) sets --scheme-background:#FFFFFF and paints the app layer and the
   Account pages with it from a rule that outranks ours, so the white came back there (found 2026-10-19). Set the variable instead.
   Only the two white schemes; the black one (scheme-mu83wfk2) stays as it is. */
[data-color-scheme="scheme-mtlgeoeh"],[data-color-scheme="scheme-mu83wtft"]{--scheme-background:#FFFCF9!important;}
/* page-change slide and the 404 page were hard-coded white (white flash between screens) */
.router-view-slide-in-enter-active,.router-view-slide-in-leave-active,.router-view-slide-out-enter-active,.router-view-slide-out-leave-active,.error-page-404{background-color:#FFFCF9!important;}

/* (2026-10-26) Arabic: Hyperzod's hidden page heading (.tw-sr-only, for screen readers) sits at the right edge with a -1px
   margin, one pixel outside the page, so the whole page could be dragged 1px sideways. Without the margin it stays inside
   (it is still hidden: 1px, clipped). */
html[lang^='ar'] .tw-sr-only{margin:0 !important;}