/* Loaded last — permanent Ekomart storefront overrides */

:root {
  --ekomart-ink: #0e3550;
  /* KOOMKAA: เขียวอมฟ้าโทนคลินิก (เดิม #ff7043 เป็นเขียวร้านขายของชำ)
     แก้ที่ตัวแปรเดียว กระจายไปทั้ง 35 จุดที่อ้างถึง */
  --ekomart-green: #ff7043;
  --ekomart-green-dark: #c13c10;
}
/* Kill Swiper legacy background-image arrows */
.ekomart-root .rts-category-area .swiper-button-prev,
.ekomart-root .rts-category-area .swiper-button-next,
.ekomart-root .ekomart-cat-swiper-prev,
.ekomart-root .ekomart-cat-swiper-next {
  background-image: none !important;
}
.ekomart-root .rts-category-area .swiper-button-prev::after,
.ekomart-root .rts-category-area .swiper-button-next::after,
.ekomart-root .ekomart-cat-swiper-prev::after,
.ekomart-root .ekomart-cat-swiper-next::after,
.ekomart-root .swiper-button-prev::after,
.ekomart-root .swiper-button-next::after {
  content: none !important;
  display: none !important;
}
.ekomart-root .ekomart-cat-nav svg,
.ekomart-root .ekomart-cat-swiper-prev svg,
.ekomart-root .ekomart-cat-swiper-next svg {
  display: none !important;
}
/* ========== Alerts: Bootstrap .border / .border-primary steal blue chrome ========== */
/* Use full border shorthand so Bootstrap `.border { border: … !important }` cannot win. */
.ekomart-root .ekomart-alert,
.ekomart-root [data-testid="login-auth-alert"] {
  background: #f3f8ec !important;
  background-color: #f3f8ec !important;
  border: 1px solid var(--ekomart-green) !important;
  color: var(--ekomart-ink) !important;
}
.ekomart-root .ekomart-alert p,
.ekomart-root [data-testid="login-auth-alert"] p {
  color: var(--ekomart-ink) !important;
}
.ekomart-root .ekomart-alert svg,
.ekomart-root [data-testid="login-auth-alert"] svg,
.ekomart-root .ekomart-alert svg path,
.ekomart-root [data-testid="login-auth-alert"] svg path {
  fill: var(--ekomart-ink) !important;
}
/* Login form links already remapped; keep focus ring green (matches --color-primary) */
.ekomart-root [data-testid="login-page"] a:not(.rts-btn) {
  color: var(--ekomart-green) !important;
}
.ekomart-root [data-testid="login-page"] a:not(.rts-btn):hover {
  color: var(--ekomart-ink) !important;
}
/* ========== Kill browser-default blue links (Tailwind preflight is off) ========== */
/* Default ink like Ekomart — green only on hover / explicit CTAs, not every <a> */
/* Exclude .btn-border-only: those fill green on hover and need white text/icons */
.ekomart-root a:not(.rts-btn):not(.btn-primary):not(.btn-secondary):not(.btn-narrow):not(.btn-border-only) {
  color: #0e3550;
  text-decoration: none;
}
.ekomart-root a:not(.rts-btn):not(.btn-primary):not(.btn-secondary):not(.btn-narrow):not(.btn-border-only):hover {
  color: var(--ekomart-green);
}
/* Header account / compare / wishlist / cart — keep icon+label visible on green hover */
.ekomart-root .accont-wishlist-cart-area-header a.btn-border-only {
  color: #0e3550 !important;
}
.ekomart-root .accont-wishlist-cart-area-header a.btn-border-only i,
.ekomart-root .accont-wishlist-cart-area-header a.btn-border-only span:not(.number) {
  color: inherit !important;
}
.ekomart-root .accont-wishlist-cart-area-header a.btn-border-only:hover,
.ekomart-root .accont-wishlist-cart-area-header a.btn-border-only:focus,
.ekomart-root .accont-wishlist-cart-area-header a.btn-border-only:active {
  background: var(--ekomart-green) !important;
  border-color: var(--ekomart-green) !important;
  color: var(--k-on-secondary) !important;
}
.ekomart-root .accont-wishlist-cart-area-header a.btn-border-only:hover i,
.ekomart-root .accont-wishlist-cart-area-header a.btn-border-only:focus i,
.ekomart-root .accont-wishlist-cart-area-header a.btn-border-only:active i,
.ekomart-root .accont-wishlist-cart-area-header a.btn-border-only:hover span:not(.number),
.ekomart-root .accont-wishlist-cart-area-header a.btn-border-only:focus span:not(.number),
.ekomart-root .accont-wishlist-cart-area-header a.btn-border-only:active span:not(.number) {
  color: #fff !important;
}
.ekomart-root .accont-wishlist-cart-area-header a.btn-border-only:hover > span.number,
.ekomart-root .accont-wishlist-cart-area-header a.btn-border-only:focus > span.number {
  background: #fff !important;
  color: var(--ekomart-green) !important;
}
.ekomart-root .rts-footer-area .call-area .info .number,
.ekomart-root .rts-footer-area .call-area .info a {
  color: var(--ekomart-green) !important;
}
.ekomart-root .single-footer-wized .footer-nav ul li a {
  color: #74787c !important;
}
.ekomart-root .single-footer-wized .footer-nav ul li a:hover {
  color: var(--ekomart-green) !important;
}
.ekomart-root .text-primary,
.ekomart-root .text-action,
.ekomart-root .text-action-on-secondary,
.ekomart-root .text-ui-fg-interactive,
.ekomart-root .text-ui-fg-base,
.ekomart-root .text-blue-500,
.ekomart-root .text-blue-600,
.ekomart-root .text-blue-700,
.ekomart-root [class*="text-ui-fg-interactive"],
.ekomart-root [class*="text-blue"] {
  color: var(--ekomart-ink) !important;
}
.ekomart-root a.text-primary:not(.rts-btn),
.ekomart-root a.text-action:not(.rts-btn),
.ekomart-root a.text-ui-fg-interactive:not(.rts-btn),
.ekomart-root .ekomart-cart-wrap a:not(.rts-btn),
.ekomart-root .ekomart-checkout-shell a:not(.rts-btn),
.ekomart-root .rts-cart-area a:not(.rts-btn),
.ekomart-root .rts-cart-list-area a:not(.rts-btn),
.ekomart-root [data-testid] a:not(.rts-btn) {
  color: var(--ekomart-green) !important;
}
/* ========== Primary buttons: white text on green (NOT card outline Add) ========== */
.ekomart-root .rts-btn.btn-primary:not(.add-to-card),
.ekomart-root a.rts-btn.btn-primary:not(.add-to-card),
.ekomart-root button.rts-btn.btn-primary:not(.add-to-card),
.ekomart-root .rts-btn.btn-primary:not(.add-to-card):visited,
.ekomart-root .rts-btn.btn-primary:not(.add-to-card):focus,
.ekomart-root .rts-btn.btn-primary:not(.add-to-card):active,
.ekomart-root .rts-btn.btn-primary:not(.add-to-card):hover,
.ekomart-root .rts-btn.btn-primary:not(.add-to-card) .btn-text,
.ekomart-root .rts-btn.btn-primary:not(.add-to-card) .arrow-icon,
.ekomart-root .rts-btn.btn-primary:not(.add-to-card) .arrow-icon i,
.ekomart-root .rts-btn.btn-primary:not(.add-to-card) i,
.ekomart-root .rts-btn.btn-primary:not(.add-to-card) span,
.ekomart-root .rts-btn.btn-primary:not(.add-to-card) div,
.ekomart-root button.rts-btn.btn-primary:not(.add-to-card) .btn-text,
.ekomart-root a.rts-btn.btn-primary:not(.add-to-card) .btn-text,
.ekomart-root .search-header-area-main .rts-btn,
.ekomart-root .search-header-area-main button.rts-btn,
.ekomart-root .banner-area-start-4 .rts-btn.btn-primary,
.ekomart-root .banner-area-start-4 .rts-btn.btn-primary .btn-text,
.ekomart-root .banner-area-start-4 .rts-btn.btn-primary i,
.ekomart-root .ekomart-qv .rts-btn.btn-primary,
.ekomart-root .ekomart-qv .rts-btn.btn-primary .btn-text,
.ekomart-root .ekomart-qv .rts-btn.btn-primary i,
.ekomart-root .ekomart-pdp .rts-btn.btn-primary,
.ekomart-root .ekomart-pdp .rts-btn.btn-primary .btn-text,
.ekomart-root .ekomart-pdp .rts-btn.btn-primary i {
  color: #fff !important;
}
.ekomart-root .rts-btn.btn-primary:not(.add-to-card),
.ekomart-root a.rts-btn.btn-primary:not(.add-to-card),
.ekomart-root button.rts-btn.btn-primary:not(.add-to-card) {
  background: var(--ekomart-green) !important;
  background-color: var(--ekomart-green) !important;
  border-color: var(--ekomart-green) !important;
}
.ekomart-root .rts-btn.btn-primary:not(.add-to-card):hover,
.ekomart-root a.rts-btn.btn-primary:not(.add-to-card):hover,
.ekomart-root button.rts-btn.btn-primary:not(.add-to-card):hover {
  color: #fff !important;
  background: #0e3550 !important;
  border-color: #0e3550 !important;
}
/* Loading / Added — keep SOLID primary green (demo does not wash out) */
.ekomart-root .rts-btn.btn-primary.is-loading,
.ekomart-root .rts-btn.btn-primary.is-added,
.ekomart-root .rts-btn.add-to-cart.is-loading,
.ekomart-root .rts-btn.add-to-cart.is-added,
.ekomart-root .rts-btn.add-to-card.is-loading,
.ekomart-root .rts-btn.add-to-card.is-added,
.ekomart-root .rts-btn.btn-primary.is-loading:hover,
.ekomart-root .rts-btn.btn-primary.is-added:hover {
  background: #ff7043 !important;
  background-color: #ff7043 !important;
  border-color: #ff7043 !important;
  color: #fff !important;
  opacity: 1 !important;
  cursor: default;
  pointer-events: none;
}
.ekomart-root .rts-btn.btn-primary.is-loading .btn-text,
.ekomart-root .rts-btn.btn-primary.is-loading .arrow-icon,
.ekomart-root .rts-btn.btn-primary.is-loading .arrow-icon i,
.ekomart-root .rts-btn.btn-primary.is-loading i,
.ekomart-root .rts-btn.btn-primary.is-added .btn-text,
.ekomart-root .rts-btn.btn-primary.is-added .arrow-icon,
.ekomart-root .rts-btn.btn-primary.is-added .arrow-icon i,
.ekomart-root .rts-btn.btn-primary.is-added i {
  color: #fff !important;
  opacity: 1 !important;
}
/* Only truly unavailable offers get muted look */
.ekomart-root .rts-btn.btn-primary.is-unavailable,
.ekomart-root .rts-btn.btn-primary.is-unavailable:disabled,
.ekomart-root .rts-btn.btn-primary:disabled.is-unavailable {
  background: #9bbb6e !important;
  border-color: #9bbb6e !important;
  color: #fff !important;
  opacity: 0.85 !important;
  cursor: not-allowed;
}
/* Do NOT wash primary buttons via generic :disabled (was causing "กำลังเพิ่ม..." look) */
.ekomart-root .rts-btn.btn-primary:disabled:not(.is-unavailable),
.ekomart-root .rts-btn.btn-primary[disabled]:not(.is-unavailable) {
  color: #fff !important;
  background: #ff7043 !important;
  opacity: 1 !important;
}
.ekomart-root .ekomart-cart-wrap,
.ekomart-root .ekomart-checkout-shell,
.ekomart-root .rts-cart-area,
.ekomart-root .rts-cart-list-area,
.ekomart-root .cart-total-area-start-right {
  color: var(--ekomart-ink);
}
.ekomart-root .ekomart-cart-seller {
  color: #666 !important;
  font-size: 13px;
  display: block;
}
/* Medusa UI interactive tokens → Ekomart green */
.ekomart-root {
  --fg-interactive: 98, 157, 35;
  --fg-interactive-hover: 44, 60, 40;
}
/* ========== Top bar language / currency — no overlap ========== */
.ekomart-root .header-top-area .ekomart-top-lang-row,
.ekomart-root .header-top-area .nav-h_top.language.ekomart-top-lang-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px 14px !important;
  flex-wrap: nowrap !important;
}
.ekomart-root .header-top-area .ekomart-top-lang-row > li {
  position: relative !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 4px !important;
  line-height: 1.2 !important;
}
.ekomart-root .header-top-area .ekomart-lang-item.language-hover {
  padding-right: 14px !important; /* room for ::after chevron */
}
.ekomart-root .header-top-area .ekomart-lang-item.language-hover::after {
  right: 0 !important; /* was -8px — overlapped THB */
}
.ekomart-root .header-top-area .ekomart-currency-static > a {
  padding-right: 0 !important;
}
.ekomart-root .header-top-area .ekomart-currency-static::after {
  display: none !important; /* THB is static — no chevron overlap */
}
/* Kill dark/gray hover block on top-bar language items */
.ekomart-root .header-top-area .category-hover-header:hover,
.ekomart-root .header-top-area .language-hover:hover,
.ekomart-root .bg-primary-header.header-style-two .header-top-area .category-hover-header:hover,
.ekomart-root .bg-primary-header.header-style-two .header-top-area .language-hover:hover {
  background: transparent !important;
  color: #fff !important;
}
.ekomart-root .header-top-area .language-hover:hover > a,
.ekomart-root .header-top-area .ekomart-lang-item:hover > a,
.ekomart-root .header-top-area .ekomart-currency-static:hover > a {
  color: #fff !important;
  background: transparent !important;
}
.ekomart-root .header-top-area .language-hover:hover::after {
  color: #fff !important;
}
/* ========== Card qty + Add: one horizontal row, equal height (demo) ========== */
/* Base theme uses flex-wrap + shop media query width:100% — both stack controls. */
.ekomart-root .cart-counter-action,
.ekomart-root .single-shopping-card-one .cart-counter-action,
.ekomart-root .single-shopping-card-one.discount-offer .cart-counter-action,
.ekomart-root .single-shopping-card-one.tranding-product .cart-counter-action,
.ekomart-root .feature-product-list-wrapper .cart-counter-action,
.ekomart-root .product-area-wrapper-shopgrid-list .cart-counter-action,
.ekomart-root .shop-grid-sidebar .single-shopping-card-one .cart-counter-action {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100%;
}
.ekomart-root .cart-counter-action .quantity-edit,
.ekomart-root .single-shopping-card-one .cart-counter-action .quantity-edit,
.ekomart-root .shop-grid-sidebar .single-shopping-card-one .cart-counter-action .quantity-edit,
.ekomart-root .product-area-wrapper-shopgrid-list .single-shopping-card-one .cart-counter-action .quantity-edit {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  width: 92px !important;
  max-width: 92px !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 8px !important;
  box-sizing: border-box !important;
  border-radius: 4px !important;
}
.ekomart-root .cart-counter-action .quantity-edit input,
.ekomart-root .single-shopping-card-one .cart-counter-action .quantity-edit input {
  width: 20px !important;
  max-width: 24px !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
.ekomart-root .cart-counter-action .quantity-edit .button-wrapper-action,
.ekomart-root .single-shopping-card-one .cart-counter-action .quantity-edit .button-wrapper-action {
  display: flex !important;
  align-items: stretch !important;
  height: 24px !important;
}
.ekomart-root .cart-counter-action .quantity-edit button,
.ekomart-root .single-shopping-card-one .cart-counter-action .quantity-edit button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  padding: 0 !important;
}
.ekomart-root .cart-counter-action .quantity-edit button i,
.ekomart-root .single-shopping-card-one .cart-counter-action .quantity-edit button i {
  font-size: 10px !important;
  padding: 4px 6px !important;
  line-height: 1 !important;
}
.ekomart-root .cart-counter-action .rts-btn,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn,
.ekomart-root .shop-grid-sidebar .single-shopping-card-one .cart-counter-action .rts-btn,
.ekomart-root .product-area-wrapper-shopgrid-list .single-shopping-card-one .cart-counter-action .rts-btn {
  flex: 1 1 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  font-size: 14px !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  border-radius: 4px !important;
  line-height: 1 !important;
}
.ekomart-root .cart-counter-action .rts-btn .btn-text,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn .btn-text {
  white-space: nowrap !important;
  font-size: 14px !important;
  line-height: 1 !important;
}
.ekomart-root .cart-counter-action .rts-btn .arrow-icon,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn .arrow-icon {
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center !important;
}
/* Kill shop-grid width:100% stacking between 1199–1666px */
.ekomart-root .shop-grid-sidebar .single-shopping-card-one .cart-counter-action .quantity-edit,
.ekomart-root .shop-grid-sidebar .product-area-wrapper-shopgrid-list .single-shopping-card-one .cart-counter-action .rts-btn {
  width: auto !important;
  max-width: none !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
}
.ekomart-root .shop-grid-sidebar .single-shopping-card-one .cart-counter-action .quantity-edit {
  width: 92px !important;
  max-width: 92px !important;
}
/* ========== Card Add (index-four): outline green, fill on hover/added ========== */
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.add-to-card,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.add-to-cart {
  background: transparent !important;
  background-color: transparent !important;
  color: #ff7043 !important;
  border: 1px solid #ff7043 !important;
  opacity: 1 !important;
}
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary .btn-text,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary .arrow-icon,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary .arrow-icon i,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary i,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary span,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary div {
  color: #ff7043 !important;
}
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary:hover,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.is-added,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.is-loading {
  background: #ff7043 !important;
  background-color: #ff7043 !important;
  border-color: #ff7043 !important;
  color: #fff !important;
}
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary:hover .btn-text,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary:hover .arrow-icon,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary:hover i,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.is-added .btn-text,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.is-added .arrow-icon,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.is-added i,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.is-loading .btn-text,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.is-loading .arrow-icon,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.is-loading i {
  color: #fff !important;
}
/* Icon-only loading/added — keep width stable, no label wrap */
.ekomart-root .rts-btn.add-to-cart.is-icon-only,
.ekomart-root .rts-btn.add-to-card.is-icon-only,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.is-icon-only {
  justify-content: center !important;
  gap: 0 !important;
  min-width: 0;
  white-space: nowrap !important;
}
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.is-icon-only {
  flex: 1 1 auto !important;
}
.ekomart-root .ekomart-pdp .rts-btn.add-to-cart.is-icon-only,
.ekomart-root .ekomart-qv .rts-btn.add-to-cart.is-icon-only {
  min-width: 140px;
}
.ekomart-root .rts-btn.is-icon-only .btn-text {
  display: none !important;
}
.ekomart-root .rts-btn.is-icon-only .arrow-icon {
  margin: 0 !important;
  transform: none !important;
  opacity: 1 !important;
}
/* Header top: white links on green bar, except dropdown submenu */
.ekomart-root .header-top-area a {
  color: #fff !important;
}
.ekomart-root .header-top-area .ekomart-top-utils .nav-h_top.language > li > a:hover {
  color: #fff !important;
  opacity: 0.9;
}
/* Submenu must override the rule above */
.ekomart-root .header-top-area .category-sub-menu a,
.ekomart-root .header-top-area .category-sub-menu a span {
  color: #0e3550 !important;
}
/* Language dropdown panel — dark text on white (fix white-on-white) */
.ekomart-root .header-top-area .language-hover > .category-sub-menu,
.ekomart-root .header-top-area .ekomart-lang-item > .category-sub-menu {
  display: none !important;
  flex-direction: column !important;
  min-width: 128px !important;
  max-width: 180px !important;
  width: auto !important;
  right: 0 !important;
  left: auto !important;
  top: calc(100% + 6px) !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  z-index: 500 !important;
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(24, 16, 16, 0.14) !important;
  list-style: none !important;
}
.ekomart-root .header-top-area .language-hover:hover > .category-sub-menu,
.ekomart-root .header-top-area .ekomart-lang-item:hover > .category-sub-menu {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.ekomart-root .header-top-area .language-hover > .category-sub-menu > li,
.ekomart-root .header-top-area .ekomart-lang-item > .category-sub-menu > li {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  list-style: none !important;
}
.ekomart-root .header-top-area .language-hover > .category-sub-menu a,
.ekomart-root .header-top-area .language-hover > .category-sub-menu a span,
.ekomart-root .header-top-area .ekomart-lang-item > .category-sub-menu a,
.ekomart-root .header-top-area .ekomart-lang-item > .category-sub-menu a span,
.ekomart-root .header-top-area .category-sub-menu a,
.ekomart-root .header-top-area .category-sub-menu a span {
  color: #0e3550 !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: block !important;
  width: 100%;
  padding: 8px 14px !important;
  line-height: 1.3 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #0e3550 !important;
}
.ekomart-root .header-top-area .language-hover > .category-sub-menu a:hover,
.ekomart-root .header-top-area .language-hover > .category-sub-menu a:hover span,
.ekomart-root .header-top-area .ekomart-lang-item > .category-sub-menu a:hover,
.ekomart-root .header-top-area .ekomart-lang-item > .category-sub-menu a:hover span,
.ekomart-root .header-top-area .category-sub-menu a:hover,
.ekomart-root .header-top-area .category-sub-menu a:hover span {
  color: #0e3550 !important;
  background: #f3f6ef !important;
}
.ekomart-root .header-top-area .language-hover > .category-sub-menu a[aria-current="page"],
.ekomart-root .header-top-area .ekomart-lang-item > .category-sub-menu a[aria-current="page"],
.ekomart-root .header-top-area .language-hover > .category-sub-menu a[aria-current="page"] span {
  color: #ff7043 !important;
  font-weight: 600 !important;
  background: #f3f6ef !important;
}
/* Home 04 dark nav ONLY — Home 01 uses dark text on white */
.ekomart-root .header-style-two.bg-primary-header .rts-header-nav-area-one .parent-nav a,
.ekomart-root .header-four .parent-nav a {
  color: #fff !important;
}
.ekomart-root .header-style-two.bg-primary-header .rts-header-nav-area-one .parent-nav a:hover,
.ekomart-root .header-four .parent-nav a:hover {
  color: var(--ekomart-green) !important;
}
/* Home 01 classic header — match demo nav ink */
.ekomart-root .rts-header-one-area-one .rts-header-nav-area-one .parent-nav a {
  color: #0e3550 !important;
}
.ekomart-root .rts-header-one-area-one .rts-header-nav-area-one .parent-nav a:hover {
  color: var(--ekomart-green) !important;
}
/* Logo + search row — white (matches demo body) */
.ekomart-root .rts-header-one-area-one .search-header-area-main {
  background: #fff !important;
}
/* Nav strip — compact; overflow visible so ribbon can cover bottom border */
.ekomart-root .rts-header-one-area-one .rts-header-nav-area-one {
  background: #f3f4f6 !important;
  border-bottom: 1px solid #e2e2e2 !important;
  min-height: 54px;
  overflow: visible !important;
  position: relative;
}
/* Sticky nav turns white like demo .header--sticky.sticky */
.ekomart-root .rts-header-one-area-one .rts-header-nav-area-one.header--sticky.sticky {
  background: #fff !important;
  border-bottom: 1px solid #e2e2e2 !important;
  box-shadow: 0 7px 18px rgba(24, 16, 16, 0.05);
}
.ekomart-root .rts-header-one-area-one .rts-header-nav-area-one > .container,
.ekomart-root .rts-header-one-area-one .rts-header-nav-area-one > .container > .row,
.ekomart-root .rts-header-one-area-one .rts-header-nav-area-one > .container > .row > [class*="col-"] {
  height: 100%;
  min-height: inherit;
}
.ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper {
  display: flex !important;
  align-items: stretch;
  justify-content: space-between;
  min-height: 54px;
  height: 100%;
}
/* Main menu — compact padding (fits 14px type) */
.ekomart-root .rts-header-one-area-one .rts-header-nav-area-one .parent-nav a,
.ekomart-root .rts-header-nav-area-one .nav-area ul li a {
  padding: 16px 18px !important;
  line-height: normal !important;
}
.ekomart-root .rts-header-one-area-one .rts-header-nav-area-one .parent-nav li.parent:first-child a {
  padding-left: 0 !important;
}
@media only screen and (max-width: 991px) {
  /* Ekomart hides desktop nav under 992; keep a compact scroll strip instead */
  .ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper {
    display: flex !important;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper .nav-area {
    flex: 1 1 auto;
    min-width: 0;
  }
  .ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper .parent-nav {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper .parent-nav a {
    padding: 14px 12px !important;
    font-size: 14px;
  }
  .ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper .right-btn-area {
    display: none !important;
  }
}
.ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper .right-btn-area {
  overflow: visible !important;
  gap: 50px;
  align-items: stretch;
  align-self: stretch;
}
.ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper .right-btn-area .btn-narrow {
  color: #0e3550 !important;
  white-space: nowrap;
  font-size: 14px !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  align-self: center;
}
.ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper .right-btn-area .btn-narrow:hover {
  color: var(--ekomart-green) !important;
}
/* Promo ribbon — one clipped green shape; extend 1px to cover nav border */
.ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper a.btn-primary,
.ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper a.btn-primary:visited,
.ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper a.btn-primary:hover,
.ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper a.btn-primary:focus,
.ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper a.btn-primary:active {
  --ribbon-bow: 32px;
  --ribbon-fold: 20px;
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  align-self: stretch !important;
  /* Left pad = bow width + text inset so copy sits in the rectangle */
  padding: 0 24px 0 calc(var(--ribbon-bow) + 24px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 0 -1px 0 !important;
  height: auto !important;
  /* +1px covers the nav border-bottom (the white hairline) */
  min-height: calc(100% + 1px) !important;
  max-height: none !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap;
  overflow: visible !important;
  z-index: 2;
  box-shadow: none !important;
  box-sizing: border-box !important;
  background: #ff7043 !important;
  background-color: #ff7043 !important;
  border-color: #ff7043 !important;
  /* Single path: tip → top → body → fold diagonal (perfect flush top, no gap) */
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    var(--ribbon-bow) 100%,
    var(--ribbon-bow) var(--ribbon-fold),
    0 0
  );
}
/* Kill theme ::after bow — shape is in clip-path now */
.ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper a.btn-primary::after,
.ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper a.btn-primary:visited::after,
.ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper a.btn-primary:hover::after,
.ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper a.btn-primary:focus::after,
.ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper a.btn-primary:active::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
}
@media only screen and (max-width: 1199px) {
  .ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper a.btn-primary,
  .ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper a.btn-primary:hover {
    --ribbon-bow: 0px;
    --ribbon-fold: 0px;
    padding: 0 20px !important;
    clip-path: none !important;
  }
}
.ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper a.btn-primary span,
.ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper a.btn-primary:hover span,
.ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper a.btn-primary:focus span,
.ekomart-root .rts-header-one-area-one .nav-and-btn-wrapper a.btn-primary:active span {
  display: inline-block;
  padding: 2px 8px !important;
  margin-left: 7px !important;
  margin-top: -2px !important;
  border-radius: 33px !important;
  background: #fff !important;
  color: #ff7043 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  vertical-align: middle;
  position: relative;
  z-index: 1;
}
.ekomart-root .product-with-discount .single-discount-with-bg {
  min-height: 180px;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.ekomart-root .product-with-discount .single-discount-with-bg.bg-2 {
  /* inline health image wins over grocery .bg-2 */
}
/* Discount rows: banner height matches sibling product cards */
@media (min-width: 1200px) {
  .ekomart-root .ekomart-discount-row {
    align-items: stretch !important;
  }
  .ekomart-root .ekomart-discount-row > [class*="col-"] {
    display: flex;
  }
  .ekomart-root .ekomart-discount-row .single-discount-with-bg {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 100%;
    margin-bottom: 0 !important;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
  }
  .ekomart-root .ekomart-discount-row .discount-offer {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    margin-bottom: 0 !important;
  }
}
/* ========== Dropdowns: display:none until hover (visibility alone was leaking) ========== */
.ekomart-root .category-hover-header > .category-sub-menu {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
}
.ekomart-root .category-hover-header:hover > .category-sub-menu {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateZ(0) translateY(0) !important;
}
/* Language menu sizing already set above; currency has no submenu */
.ekomart-root .header-top-area .ekomart-currency-static > .category-sub-menu {
  display: none !important;
}
/* Cart hover panel — ONLY under cart, mounts on hover (no ghost box) */
.ekomart-root .ekomart-cart-hover {
  position: relative !important;
  z-index: 80;
}
.ekomart-root .ekomart-cart-panel {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  width: 340px !important;
  max-width: min(340px, 92vw) !important;
  padding: 18px !important;
  margin: 0 !important;
  z-index: 500 !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff !important;
  border-radius: 10px;
  box-shadow: 0 10px 32px rgba(24, 16, 16, 0.14);
  text-align: left;
  color: var(--ekomart-ink);
}
.ekomart-root .ekomart-cart-panel .shopping-cart-number {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ekomart-ink);
}
.ekomart-root .ekomart-cart-panel__empty p {
  margin: 0;
  color: #666;
  font-size: 14px;
}
.ekomart-root .ekomart-cart-panel__item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid #eee;
}
.ekomart-root .ekomart-cart-panel__item img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.ekomart-root .ekomart-cart-panel__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ekomart-root .ekomart-cart-panel__meta a {
  color: var(--ekomart-ink) !important;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ekomart-root .ekomart-cart-panel__meta span {
  font-size: 12px;
  color: #666;
}
.ekomart-root .ekomart-cart-panel__footer {
  border-top: 1px solid #eee;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ekomart-root .ekomart-cart-panel__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.ekomart-root .ekomart-cart-panel__hint {
  margin: 0;
  font-size: 12px;
  color: #666;
}
.ekomart-root .ekomart-cart-panel__actions {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.ekomart-root .ekomart-cart-panel__actions .rts-btn {
  flex: 1;
  text-align: center;
  justify-content: center;
}
/* —— Add button: only one icon —— */
.ekomart-root .rts-btn.with-icon .arrow-icon + .arrow-icon {
  display: none !important;
}
/* ========== Cart table alignment ========== */
.ekomart-root .single-cart-area-list.head {
  padding: 18px 24px;
}
.ekomart-root .single-cart-area-list.head .product-main {
  text-align: left !important;
  padding-left: 28px; /* align with thumb after X */
}
.ekomart-root .single-cart-area-list.main {
  padding: 20px 24px;
}
.ekomart-root .single-cart-area-list.main .product-main-cart {
  gap: 10px !important;
  align-items: center;
}
.ekomart-root .single-cart-area-list.main .product-main-cart .close {
  flex: 0 0 20px;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  line-height: 1;
  font-size: 10px;
  cursor: pointer;
}
.ekomart-root .single-cart-area-list.main .product-main-cart .close i {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  min-height: 20px;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #ff0000;
  color: #fff;
  font-size: 9px;
  line-height: 1;
}
.ekomart-root .single-cart-area-list.main .product-main-cart .thumbnail {
  max-width: 72px;
  margin: 0;
}
.ekomart-root .single-cart-area-list.main .product-main-cart .thumbnail img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.ekomart-root .single-cart-area-list.main .product-main-cart .information .title {
  color: var(--ekomart-ink) !important;
}
.ekomart-root .single-cart-area-list.main .product-main-cart .information a {
  color: var(--ekomart-ink) !important;
}
.ekomart-root .single-cart-area-list.main .product-main-cart .information a:hover {
  color: var(--ekomart-green) !important;
}
/* Eye / quickview action is a <button> — match span.single-action */
.ekomart-root .action-share-option button.single-action {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  font: inherit;
}
/* ========== Kill Tailwind .contents vs Ekomart clash ========== */
/* Tailwind utilities: .contents { display: contents } — destroys product info column */
.ekomart-root .details-product-area > .contents,
.ekomart-root .rts-product-details-section .contents,
.ekomart-root .product-details-popup .contents {
  display: block !important;
  writing-mode: horizontal-tb !important;
  word-break: normal !important;
  white-space: normal !important;
}
/* Shop-details: gallery + info side-by-side like Ekomart demo (~480 / ~500) */
.ekomart-root .product-details-popup-wrapper.in-shopdetails .details-product-area {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 28px;
}
.ekomart-root .product-details-popup-wrapper.in-shopdetails .product-thumb-area {
  flex: 0 0 46% !important;
  width: 46% !important;
  max-width: 480px;
  margin-right: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.ekomart-root .product-details-popup-wrapper.in-shopdetails .details-product-area > .contents {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}
.ekomart-root .product-details-popup-wrapper.in-shopdetails .product-thumb {
  width: 100% !important;
  max-width: none !important;
}
.ekomart-root .product-details-popup-wrapper.in-shopdetails .product-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.ekomart-root .product-details-popup-wrapper.in-shopdetails .product-thumb-filter-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 12px;
  margin-top: 16px;
  margin-left: 0 !important;
  overflow-x: auto;
}
.ekomart-root .product-details-popup-wrapper.in-shopdetails .thumb-filter {
  flex: 0 0 72px;
  width: 72px;
  max-width: 72px;
  margin: 0 !important;
  opacity: 0.45;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  overflow: hidden;
}
.ekomart-root .product-details-popup-wrapper.in-shopdetails .thumb-filter.active {
  opacity: 1;
  border-color: var(--ekomart-green);
}
.ekomart-root .product-details-popup-wrapper.in-shopdetails .thumb-filter img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  display: block;
}
@media only screen and (max-width: 991px) {
  .ekomart-root .product-details-popup-wrapper.in-shopdetails .details-product-area {
    flex-direction: column !important;
  }
  .ekomart-root .product-details-popup-wrapper.in-shopdetails .product-thumb-area {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100%;
  }
}
/* PDP chrome type — keep product title/price readable, shrink meta */
.ekomart-root .in-shopdetails .product-title {
  font-size: 24px !important;
  line-height: 1.3;
  color: #0e3550 !important;
}
.ekomart-root .in-shopdetails .product-price {
  font-size: 28px !important;
}
.ekomart-root .in-shopdetails .product-price .old-price {
  font-size: 16px !important;
}
.ekomart-root .in-shopdetails .contents > p,
.ekomart-root .in-shopdetails .product-uniques,
.ekomart-root .in-shopdetails .product-unipue,
.ekomart-root .in-shopdetails .share-option-shop-details span,
.ekomart-root .in-shopdetails .rating-stars-group span {
  font-size: 13px !important;
}
.ekomart-root .in-shopdetails .product-catagory {
  font-size: 12px !important;
}
.ekomart-root .shop-sight-sticky-sidevbar .single-offer-area h6,
.ekomart-root .shop-sight-sticky-sidevbar .title,
.ekomart-root .shop-sight-sticky-sidevbar h5,
.ekomart-root .shop-sight-sticky-sidevbar h6 {
  font-size: 14px !important;
}
.ekomart-root .shop-sight-sticky-sidevbar p,
.ekomart-root .shop-sight-sticky-sidevbar li,
.ekomart-root .shop-sight-sticky-sidevbar span {
  font-size: 12px !important;
}
.ekomart-root .product-discription-tab-shop .nav-link {
  font-size: 14px !important;
}
.ekomart-root .single-tab-content-shop-details .disc,
.ekomart-root .single-tab-content-shop-details p,
.ekomart-root .single-tab-content-shop-details li,
.ekomart-root .single-tab-content-shop-details td,
.ekomart-root .single-tab-content-shop-details th {
  font-size: 14px !important;
}
.ekomart-root .single-tab-content-shop-details .title {
  font-size: 18px !important;
}
.ekomart-root .details-row-2 {
  display: flex !important;
  gap: 28px;
  align-items: flex-start;
  margin-top: 24px;
}
.ekomart-root .details-row-2 .left-area {
  flex: 0 0 42%;
  max-width: 420px;
  min-width: 0 !important;
  display: block !important;
}
.ekomart-root .details-row-2 .left-area img {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto;
  border-radius: 6px;
  display: block;
  object-fit: cover;
}
.ekomart-root .details-row-2 .right {
  flex: 1 1 auto;
  min-width: 0;
}
@media only screen and (max-width: 767px) {
  .ekomart-root .details-row-2 {
    flex-direction: column;
  }
  .ekomart-root .details-row-2 .left-area {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }
}
/* Related / featured product grids — compact 6-up cards */
.ekomart-root .popular-product-col-7-area .cover-card-main-over-white {
  background: #fff;
  border-radius: 6px;
  padding: 24px 16px 20px;
}
.ekomart-root .popular-product-col-7-area .single-shopping-card-one .body-content a .title {
  font-size: 13px !important;
}
.ekomart-root .popular-product-col-7-area .single-shopping-card-one .body-content .price-area .current {
  font-size: 15px !important;
}
/* ========== PDP: Bootstrap 2-column (no Ekomart .contents) ========== */
.ekomart-root .ekomart-pdp {
  width: 100%;
}
.ekomart-root .ekomart-pdp-gallery {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(24, 16, 16, 0.06);
}
.ekomart-root .ekomart-pdp-gallery__main {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f5f6f5;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ekomart-root .ekomart-pdp-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ekomart-root .ekomart-pdp-gallery__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.ekomart-root .ekomart-pdp-gallery__thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f6f5;
  cursor: pointer;
}
.ekomart-root .ekomart-pdp-gallery__thumb.is-active {
  border-color: var(--ekomart-green);
}
.ekomart-root .ekomart-pdp-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ekomart-root .ekomart-pdp-info {
  display: block;
  width: 100%;
  color: var(--ekomart-ink);
  writing-mode: horizontal-tb;
}
.ekomart-root .ekomart-pdp-info__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: 12px;
}
.ekomart-root .ekomart-pdp-info__cat {
  display: inline-block;
  background: rgba(98, 157, 35, 0.12);
  color: var(--ekomart-green);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
}
.ekomart-root .ekomart-pdp-info__stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #f5a623;
  font-size: 13px;
}
.ekomart-root .ekomart-pdp-info__stars span {
  color: #666;
  margin-left: 6px;
  font-style: normal;
}
.ekomart-root .ekomart-pdp-info__title {
  font-size: 28px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ekomart-ink);
  margin: 0 0 14px;
}
.ekomart-root .ekomart-pdp-info__stock {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ekomart-green);
  background: rgba(98, 157, 35, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  vertical-align: middle;
}
.ekomart-root .ekomart-pdp-info__desc {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  margin: 0 0 16px;
}
.ekomart-root .ekomart-pdp-info__price {
  font-size: 26px;
  font-weight: 700;
  color: #dc2626;
  margin-bottom: 14px;
}
.ekomart-root .ekomart-pdp-info__old {
  margin-left: 12px;
  font-size: 16px;
  font-weight: 400;
  color: #999;
  text-decoration: line-through;
}
.ekomart-root .ekomart-pdp-info__seller {
  color: #666;
  margin-bottom: 18px;
}
.ekomart-root .ekomart-pdp-info__seller a {
  color: var(--ekomart-green) !important;
  font-weight: 600;
}
.ekomart-root .ekomart-pdp-info__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.ekomart-root .ekomart-pdp-info__actions .quantity-edit,
.ekomart-root .ekomart-qv__actions .quantity-edit {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  overflow: hidden;
  height: 44px;
  background: #fff;
  width: auto !important;
  min-width: 110px;
}
.ekomart-root .ekomart-pdp-info__actions .quantity-edit .button,
.ekomart-root .ekomart-qv__actions .quantity-edit .button {
  width: 36px;
  height: 44px;
  border: 0;
  background: #fff;
  color: var(--ekomart-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.ekomart-root .ekomart-pdp-info__actions .quantity-edit .input,
.ekomart-root .ekomart-qv__actions .quantity-edit .input {
  width: 40px;
  height: 44px;
  border: 0;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ekomart-ink);
  background: #fff;
  padding: 0;
  outline: none;
}
.ekomart-root .ekomart-pdp-info__meta-wrap.product-uniques {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 20px;
  font-size: 14px;
  color: #444;
}
.ekomart-root .ekomart-pdp .share-option-shop-details {
  margin-top: 8px;
}
.ekomart-root .ekomart-pdp .product-discription-tab-shop {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-top: 40px;
}
.ekomart-root .ekomart-pdp .product-discription-tab-shop .nav-tabs {
  border-bottom: 1px solid #eee;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ekomart-root .ekomart-pdp .product-discription-tab-shop .nav-link {
  border: 0;
  background: transparent;
  color: #666;
  font-weight: 600;
  padding: 10px 14px;
  cursor: pointer;
}
.ekomart-root .ekomart-pdp .product-discription-tab-shop .nav-link.active {
  color: var(--ekomart-green);
  border-bottom: 2px solid var(--ekomart-green);
}
.ekomart-root .ekomart-pdp .single-tab-content-shop-details .disc {
  color: #444;
  line-height: 1.65;
  margin: 0;
  white-space: pre-wrap;
}
/* Keep meta list styles for legacy */
.ekomart-root .ekomart-pdp-info__meta {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: #444;
}
.ekomart-root .ekomart-pdp-info__meta strong {
  color: var(--ekomart-ink);
  margin-right: 4px;
}
.ekomart-root .ekomart-pdp-info__share {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 14px;
  color: #555;
}
.ekomart-root .ekomart-pdp-info__share i {
  margin-right: 6px;
  color: var(--ekomart-green);
}
.ekomart-root .ekomart-pdp-tabs {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-top: 40px;
}
.ekomart-root .ekomart-pdp-tabs .title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--ekomart-ink);
}
.ekomart-root .ekomart-pdp-tabs p {
  margin: 0;
  color: #444;
  line-height: 1.65;
  white-space: pre-wrap;
}
/* ========== Quick View — centered modal (custom, not broken popup flex) ========== */
.ekomart-root .ekomart-qv {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ekomart-root .ekomart-qv__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(20, 24, 20, 0.55);
  cursor: pointer;
}
.ekomart-root .ekomart-qv__dialog {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  max-height: min(90vh, 820px);
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  padding: 28px 28px 24px;
}
.ekomart-root .ekomart-qv__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f3f4f6;
  color: var(--ekomart-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.ekomart-root .ekomart-qv__close:hover {
  background: var(--ekomart-green);
  color: #fff;
}
.ekomart-root .ekomart-qv__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
@media (max-width: 767px) {
  .ekomart-root .ekomart-qv__grid {
    grid-template-columns: 1fr;
  }
}
.ekomart-root .ekomart-qv__gallery {
  min-width: 0;
}
.ekomart-root .ekomart-qv__main {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f6f5;
}
.ekomart-root .ekomart-qv__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ekomart-root .ekomart-qv__thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.ekomart-root .ekomart-qv__thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f6f5;
  cursor: pointer;
}
.ekomart-root .ekomart-qv__thumb.is-active {
  border-color: var(--ekomart-green);
}
.ekomart-root .ekomart-qv__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ekomart-root .ekomart-qv__info {
  display: block;
  min-width: 0;
  width: 100%;
  color: var(--ekomart-ink);
  writing-mode: horizontal-tb;
  word-break: normal;
  white-space: normal;
}
.ekomart-root .ekomart-qv__status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  margin-bottom: 10px;
}
.ekomart-root .ekomart-qv__cat {
  background: rgba(98, 157, 35, 0.12);
  color: var(--ekomart-green);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
}
.ekomart-root .ekomart-qv__stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #f5a623;
  font-size: 12px;
}
.ekomart-root .ekomart-qv__stars em {
  font-style: normal;
  color: #666;
  margin-left: 4px;
}
.ekomart-root .ekomart-qv__title {
  font-size: 22px;
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ekomart-ink);
}
.ekomart-root .ekomart-qv__stock {
  font-size: 12px;
  font-weight: 600;
  color: var(--ekomart-green);
}
.ekomart-root .ekomart-qv__price {
  font-size: 22px;
  font-weight: 700;
  color: #dc2626;
  margin-bottom: 12px;
}
.ekomart-root .ekomart-qv__old {
  margin-right: 10px;
  font-size: 14px;
  font-weight: 400;
  color: #999;
  text-decoration: line-through;
}
.ekomart-root .ekomart-qv__desc {
  font-size: 14px;
  line-height: 1.55;
  color: #555;
  margin: 0 0 16px;
}
.ekomart-root .ekomart-qv__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.ekomart-root .ekomart-qv__heart {
  width: 44px;
  height: 44px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  background: #fff;
  color: var(--ekomart-ink);
  cursor: pointer;
}
.ekomart-root .ekomart-qv__meta {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #444;
}
.ekomart-root .ekomart-qv__more {
  color: var(--ekomart-green) !important;
  font-weight: 600;
  font-size: 14px;
}
/* Hide tippy/openuptip ghosts on eye */
.ekomart-root .cta-quickview + .tippy-box,
.ekomart-root .openuptip[data-tippy-content] {
  /* noop placeholder */
}
/* ========== Quick View modal (legacy class leftover) ========== */
.ekomart-root .ekomart-quickview {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  z-index: 2000 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: auto !important;
}
.ekomart-root .ekomart-quickview__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 20, 0.55);
  z-index: 0;
}
.ekomart-root .ekomart-quickview .rts-product-details-section {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.ekomart-root .ekomart-quickview .product-details-popup {
  padding: 28px !important;
}
.ekomart-root .ekomart-quickview .product-details-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f3f4f6;
  color: var(--ekomart-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ekomart-root .ekomart-quickview .product-details-close-btn:hover {
  background: var(--ekomart-green);
  color: #fff;
}
.ekomart-root .ekomart-quickview .thumb-filter {
  border: 2px solid transparent;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
}
.ekomart-root .ekomart-quickview .thumb-filter.active {
  border-color: var(--ekomart-green);
}
.ekomart-root .ekomart-quickview .product-title,
.ekomart-root .ekomart-quickview .contents p,
.ekomart-root .ekomart-quickview .product-uniques {
  color: var(--ekomart-ink);
}
.ekomart-root .ekomart-quickview a.rts-btn {
  color: #fff !important;
}
/* PDP in-page gallery thumbs */
.ekomart-root .in-shopdetails .thumb-filter {
  border: 2px solid transparent;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
}
.ekomart-root .in-shopdetails .thumb-filter.active {
  border-color: var(--ekomart-green);
}
.ekomart-root .in-shopdetails .product-title,
.ekomart-root .in-shopdetails .contents {
  color: var(--ekomart-ink);
}
.ekomart-root .in-shopdetails .old-price {
  text-decoration: line-through;
  color: #999;
  font-weight: 400;
  margin-left: 10px;
}
.ekomart-root .in-shopdetails .rts-btn:disabled:not(.is-unavailable) {
  opacity: 1 !important;
  background: #ff7043 !important;
  color: #fff !important;
}
/* ========== Add To Cart — Added ✓ / loading stay solid green ========== */
.ekomart-root .rts-btn.add-to-cart.is-added,
.ekomart-root .rts-btn.add-to-card.is-added,
.ekomart-root .rts-btn.is-added,
.ekomart-root .rts-btn.is-loading {
  background: #ff7043 !important;
  border-color: #ff7043 !important;
  color: #fff !important;
  opacity: 1 !important;
}
.ekomart-root .rts-btn.is-added .btn-text,
.ekomart-root .rts-btn.is-added .arrow-icon,
.ekomart-root .rts-btn.is-added .arrow-icon i,
.ekomart-root .rts-btn.is-loading .btn-text,
.ekomart-root .rts-btn.is-loading .arrow-icon,
.ekomart-root .rts-btn.is-loading .arrow-icon i {
  color: #fff !important;
  opacity: 1 !important;
}
.ekomart-root .rts-btn.is-added .arrow-icon {
  background: transparent !important;
}
/* ========== Cart success toast (Ekomart / react-toastify style) ========== */
.ekomart-cart-toast-stack {
  position: fixed;
  z-index: 10000;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  max-width: min(380px, calc(100vw - 32px));
}
.ekomart-cart-toast {
  pointer-events: auto;
  position: relative;
  background: #fff;
  color: var(--ekomart-ink);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(24, 16, 16, 0.16);
  padding: 16px 40px 18px 16px;
  overflow: hidden;
  min-width: 280px;
  animation: ekomart-toast-in 0.25s ease-out;
}
.ekomart-cart-toast__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #888;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0;
}
.ekomart-cart-toast__close:hover {
  color: var(--ekomart-ink);
  background: #f3f4f6;
}
.ekomart-cart-toast__body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ekomart-cart-toast__icon {
  color: var(--ekomart-green);
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.ekomart-cart-toast__msg {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ekomart-ink);
  line-height: 1.35;
}
.ekomart-cart-toast__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background: var(--ekomart-green);
  transform-origin: left center;
  animation-name: ekomart-toast-drain;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes ekomart-toast-drain {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
@keyframes ekomart-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Vendors cards */
.ekomart-root .ekomart-vendor-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 18px rgba(24, 16, 16, 0.06);
}
.ekomart-root .ekomart-vendor-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: #f3f4f6;
  overflow: hidden;
}
.ekomart-root .ekomart-vendor-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ekomart-root .ekomart-vendor-card__body {
  padding: 18px 16px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ekomart-root .ekomart-vendor-card__body .title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--ekomart-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ekomart-root .ekomart-vendor-card__body p {
  font-size: 13px;
  color: #666;
  margin: 0 0 8px;
  line-height: 1.45;
  flex: 1;
}
.ekomart-root .ekomart-vendor-card__badge {
  font-size: 10px;
  font-weight: 700;
  background: var(--ekomart-green);
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
}
/* ========== Home 01 category strip under hero (Swiper like demo) ========== */
.ekomart-root .ekomart-home01-cats {
  display: block !important;
  overflow: hidden;
  padding-bottom: 0;
}
.ekomart-root .ekomart-home01-cats__swiper {
  overflow: hidden;
  padding-bottom: 2px;
}
.ekomart-root .ekomart-home01-cats .single-category-one {
  flex: unset;
  width: 100%;
  min-width: 0;
  height: 161px;
  text-align: center;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  padding: 25px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: 0.3s;
  cursor: pointer;
}
.ekomart-root .ekomart-home01-cats .single-category-one:hover {
  border-color: #ff7043;
}
.ekomart-root .ekomart-home01-cats .single-category-one img {
  width: 60px !important;
  height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
  min-height: 60px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.ekomart-root .ekomart-home01-cats .single-category-one p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0e3550;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ekomart-root .popular-product-col-7-area .cover-card-main-over-white {
  background: #fff;
  border-radius: 6px;
  padding: 20px 20px 16px;
}
.ekomart-root .ekomart-weekly-best .title-area-between,
.ekomart-root .ekomart-discount-section .title-area-between {
  border-bottom: none;
  padding: 0 !important;
  margin-bottom: 28px !important;
}
.ekomart-root .ekomart-discount-section .countdown .countDown .container {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  flex: 0 0 auto;
  padding: 3px 43px 3px 7px;
  background: var(--color-primary, #ff7043) !important;
  color: #fff !important;
  border-radius: 4px;
}
.ekomart-root .title-area-between {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px !important;
  padding: 4px 0 18px !important;
  min-height: 0 !important;
  border-bottom: 1px solid #e2e2e2;
}
.ekomart-root .title-area-between .title-left {
  margin: 0 !important;
  padding: 0 !important;
}
.ekomart-root .cover-card-main-over-white .title-area-between {
  padding: 8px 0 18px !important;
  margin-bottom: 22px !important;
}
/* —— Balanced vertical rhythm —— */
.ekomart-root .rts-section-gap {
  padding: 40px 0 !important;
}
.ekomart-root .rts-section-gapBottom {
  padding-top: 0 !important;
  padding-bottom: 40px !important;
}
.ekomart-root .rts-section-gapTop {
  padding-top: 40px !important;
  padding-bottom: 0 !important;
}
/* Nested section wrappers shouldn't stack another 60px */
.ekomart-root .rts-section-gap .rts-section-gap,
.ekomart-root .rts-section-gap .rts-section-gapBottom,
.ekomart-root .rts-section-gap .rts-section-gapTop {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Top Trending (Home 01) — gray panel + horizontal cards */
.ekomart-root .ekomart-top-trending.rts-section-gap,
.ekomart-root .top-tranding-product.rts-section-gap {
  padding-top: 48px !important;
  padding-bottom: 40px !important;
}
.ekomart-root .ekomart-top-trending .title-area-between {
  border-bottom: none;
  margin-bottom: 20px !important;
  padding: 0 !important;
}
.ekomart-root .ekomart-top-trending .cover-card-main-over {
  background: #f5f6f7;
  border-radius: 6px;
  padding: 30px;
}
.ekomart-root .ekomart-top-trending .single-shopping-card-one.tranding-product {
  margin-bottom: 0;
  height: 100%;
  padding: 12px;
  border-radius: 6px;
}
.ekomart-root .ekomart-top-trending .tranding-product .thumbnail-preview img {
  object-fit: cover;
}
@media only screen and (max-width: 575px) {
  .ekomart-root .ekomart-top-trending .cover-card-main-over {
    padding: 15px;
  }
}
.ekomart-root .popular-product-col-7-area .cover-card-main-over-white,
.ekomart-root .cover-card-main-over-white.mt--40 {
  margin-top: 0 !important;
}
.ekomart-root .blog-area-start .row.g-24,
.ekomart-root .blog-area-start .row.g-3,
.ekomart-root .blog-area-start .mt--30,
.ekomart-root .blog-area-start .mt--10 {
  margin-top: 8px !important;
}
.ekomart-root .blog-area-start .title-area-between {
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
}
.ekomart-root .rts-feature-area .col-xl-20 {
  flex: 0 0 20%;
  max-width: 20%;
}
@media only screen and (max-width: 1199px) {
  .ekomart-root .rts-feature-area .col-xl-20 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media only screen and (max-width: 575px) {
  .ekomart-root .rts-feature-area .col-xl-20 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* Feature strip — compact card height + section padding */
.ekomart-root .rts-feature-area.rts-section-gap {
  padding: 32px 0 !important;
}
.ekomart-root .rts-feature-area .single-feature-area {
  align-items: center;
  padding: 14px 16px !important;
  gap: 12px !important;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.03);
}
.ekomart-root .rts-feature-area .single-feature-area .icon i {
  font-size: 26px !important;
}
.ekomart-root .rts-feature-area .single-feature-area .title {
  margin-bottom: 2px !important;
  font-size: 15px;
  line-height: 1.25;
}
.ekomart-root .rts-feature-area .single-feature-area span {
  font-size: 13px !important;
  line-height: 1.3;
}
/* Hero banner slider (Home 01 — 2 slides + prev/next like demo) */
.ekomart-root .ekomart-hero-banner {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}
.ekomart-root .ekomart-hero-banner__viewport {
  overflow: hidden;
  border-radius: 6px;
  width: 100%;
}
.ekomart-root .ekomart-hero-banner__track {
  display: flex;
  width: 100%;
  transition: transform 0.7s ease;
  will-change: transform;
}
.ekomart-root .ekomart-hero-banner__slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
}
.ekomart-root .ekomart-hero-banner .banner-bg-image {
  width: 100%;
  border-radius: 6px;
}
.ekomart-root .ekomart-hero-banner .swiper-button-next,
.ekomart-root .ekomart-hero-banner .swiper-button-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  margin: 0;
  cursor: pointer;
  opacity: 0;
  transition: 0.3s;
  background-image: none !important;
}
.ekomart-root .ekomart-hero-banner .swiper-button-next::after,
.ekomart-root .ekomart-hero-banner .swiper-button-prev::after {
  display: none !important;
  content: none !important;
}
.ekomart-root .ekomart-hero-banner:hover .swiper-button-next,
.ekomart-root .ekomart-hero-banner:hover .swiper-button-prev {
  opacity: 1;
}
.ekomart-root .ekomart-hero-banner .swiper-button-next:hover i,
.ekomart-root .ekomart-hero-banner .swiper-button-prev:hover i {
  color: var(--ekomart-green, #ff7043);
}
.ekomart-root .ekomart-featured-grocery .title-area-between {
  border-bottom: none;
  margin-bottom: 24px !important;
  padding: 0 0 8px !important;
}
.ekomart-root .ekomart-featured-grocery .next-prev-swiper-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ekomart-root .ekomart-featured-grocery .next-prev-swiper-wrapper .swiper-button-prev,
.ekomart-root .ekomart-featured-grocery .next-prev-swiper-wrapper .swiper-button-next {
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  cursor: pointer;
  background: #fff;
}
.ekomart-root .ekomart-featured-grocery__scroller {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.ekomart-root .ekomart-featured-grocery__item {
  flex: 0 0 calc((100% - 120px) / 5);
  min-width: 200px;
  max-width: 280px;
  scroll-snap-align: start;
}
.ekomart-root .ekomart-featured-grocery__item .single-shopping-card-one {
  height: 100%;
  margin-bottom: 0;
}
@media only screen and (max-width: 1199px) {
  .ekomart-root .ekomart-featured-grocery__item {
    flex: 0 0 calc((100% - 60px) / 3);
  }
}
@media only screen and (max-width: 767px) {
  .ekomart-root .ekomart-featured-grocery__item {
    flex: 0 0 calc((100% - 30px) / 2);
    min-width: 160px;
  }
  .ekomart-root .ekomart-featured-grocery__scroller {
    gap: 16px;
  }
}
.ekomart-root .ekomart-pdp-bottom-action {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.ekomart-root .ekomart-pdp-bottom-action .quantity-edit {
  display: inline-flex;
  align-items: center;
}
.ekomart-root .search-header-area-main .search-header button.rts-btn {
  min-width: 40px;
  width: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* (PDP in-shopdetails layout rules live near Tailwind .contents kill above) */

/* Trending uses col-xl-3 via ProductSection columns=4 — no forced override needed */

/* ========== UI chrome type scale (NOT product title/price) ========== */
.ekomart-root .header-top-area,
.ekomart-root .header-top-area a,
.ekomart-root .header-top-area span,
.ekomart-root .header-top-area p {
  font-size: 12px !important;
  line-height: 1.4;
}
.ekomart-root .rts-header-nav-area-one .parent-nav a {
  font-size: 14px !important;
  font-weight: 600;
}
.ekomart-root .nav-and-btn-wrapper .right-btn-area .btn-narrow {
  font-size: 14px !important;
  font-weight: 600;
}
.ekomart-root .nav-and-btn-wrapper .btn-primary {
  font-size: 14px !important;
  font-weight: 600 !important;
}
.ekomart-root .nav-and-btn-wrapper .btn-primary span {
  font-size: 14px !important;
  font-weight: 600 !important;
}
.ekomart-root .category-btn span,
.ekomart-root .category-search-wrapper .category-btn {
  font-size: 13px !important;
}
.ekomart-root .search-header input,
.ekomart-root .search-header input::placeholder {
  font-size: 13px !important;
}
.ekomart-root .accont-wishlist-cart-area-header .btn-border-only,
.ekomart-root .accont-wishlist-cart-area-header .btn-border-only .text,
.ekomart-root .accont-wishlist-cart-area-header .btn-border-only span.text {
  font-size: 12px !important;
}
.ekomart-root .ekomart-breadcrumb,
.ekomart-root .navigator-breadcrumb-wrapper,
.ekomart-root .navigator-breadcrumb-wrapper a,
.ekomart-root .navigator-breadcrumb-wrapper span {
  font-size: 12px !important;
}
.ekomart-root .title-area-between .title-left,
.ekomart-root .title-area-between h2.title-left,
.ekomart-root .feature-product-list-wrapper .title-area .title,
.ekomart-root .shop-grid-sidebar-area .title-left {
  font-size: 18px !important;
  line-height: 1.35;
}
.ekomart-root .single-filter-box .title,
.ekomart-root .ekomart-shop-sidebar .filter-title {
  font-size: 15px !important;
  padding-top: 18px;
  padding-bottom: 14px;
}
.ekomart-root .single-filter-box .filterbox-body {
  padding: 18px;
  font-size: 13px;
}
.ekomart-root .single-filter-box .filterbox-body label,
.ekomart-root .single-filter-box .category-wrapper .single-category label,
.ekomart-root .single-filter-box .price-input-area .filter-value-min-max span {
  font-size: 13px !important;
}
.ekomart-root .single-filter-box .price-input-area input[type="number"] {
  font-size: 13px !important;
}
.ekomart-root .filter-select-area .top-filter,
.ekomart-root .filter-select-area .top-filter > span,
.ekomart-root .ekomart-shop-sort,
.ekomart-root .ekomart-shop-sort select {
  font-size: 13px !important;
}
.ekomart-root .single-category-one .title,
.ekomart-root .single-category-one p,
.ekomart-root .single-category-one span {
  font-size: 12px !important;
}
.ekomart-root .blog-area-start .title-left,
.ekomart-root .blog-area-start h2.title-left {
  font-size: 18px !important;
}
.ekomart-root .single-blog-area-start .blog-body .top-area,
.ekomart-root .single-blog-area-start .blog-body .top-area span,
.ekomart-root .single-blog-area-start .shop-now-goshop-btn .text {
  font-size: 12px !important;
}
.ekomart-root .single-blog-area-start .blog-body a .title,
.ekomart-root .single-blog-area-start .blog-body .title {
  font-size: 15px !important;
}
.ekomart-root .footer-title {
  font-size: 15px !important;
}
.ekomart-root .single-footer-wized .footer-nav ul li a,
.ekomart-root .single-footer-wized .opening-hour .single p,
.ekomart-root .single-footer-wized p.disc-news-letter,
.ekomart-root .single-footer-wized p.dsic {
  font-size: 13px !important;
}
.ekomart-root .single-footer-wized .call-area .info .number {
  font-size: 16px !important;
}
.ekomart-root .single-footer-wized .call-area .info span {
  font-size: 12px !important;
}
.ekomart-root .copyright,
.ekomart-root .copyright p,
.ekomart-root .footer-copyright,
.ekomart-root .rts-footer-area + div,
.ekomart-root .copyright-area {
  font-size: 12px !important;
}
.ekomart-root .single-feature-card .title,
.ekomart-root .feature-area .title {
  font-size: 14px !important;
}
.ekomart-root .banner-one-inner .title,
.ekomart-root .banner-bg-image .title,
.ekomart-root .banner-bg-image h1 {
  /* keep hero readable — only nudge slightly */
  font-size: clamp(26px, 3.2vw, 40px) !important;
}
.ekomart-root .banner-bg-image .pre-title,
.ekomart-root .banner-one-inner .pre-title,
.ekomart-root .banner-bg-image p {
  font-size: 14px !important;
}
/* ========== Shop / categories (shop-grid-sidebar) ========== */
.ekomart-root .shop-grid-sidebar-area .single-filter-box {
  background: #fff;
}
.ekomart-root .shop-grid-sidebar-area .ekomart-shop-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  color: #0e3550;
}
.ekomart-root .shop-grid-sidebar-area .ekomart-shop-sort select {
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  height: 36px;
  padding: 0 28px 0 10px;
  background: #fff;
  color: #0e3550;
  font-weight: 500;
  cursor: pointer;
}
.ekomart-root .shop-grid-sidebar-area .filter-select-area .top-filter .right-end {
  gap: 16px;
}
.ekomart-root .shop-grid-sidebar-area .category-wrapper .single-category label {
  cursor: pointer;
}
/* 5-up grid inside sidebar shop — match Ekomart shop (col-*-20 = 20%) */
@media (min-width: 992px) {
  .ekomart-root .shop-grid-sidebar-area .product-area-wrapper-shopgrid-list:not(.with-list) > .row > .col-lg-20,
  .ekomart-root .shop-grid-sidebar-area .product-area-wrapper-shopgrid-list:not(.with-list) > .row > .col-xl-20 {
    flex: 0 0 auto;
    width: 20%;
    max-width: 20%;
  }
}
/* List view: horizontal discount-offer style cards */
.ekomart-root .shop-grid-sidebar-area .product-area-wrapper-shopgrid-list.with-list .single-shopping-card-one {
  display: flex;
  align-items: stretch;
  gap: 20px;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 6px;
  padding: 12px;
}
.ekomart-root .shop-grid-sidebar-area .product-area-wrapper-shopgrid-list.with-list .image-and-action-area-wrapper {
  flex: 0 0 180px;
  max-width: 180px;
}
.ekomart-root .shop-grid-sidebar-area .product-area-wrapper-shopgrid-list.with-list .thumbnail-preview {
  aspect-ratio: 1 / 1;
}
.ekomart-root .shop-grid-sidebar-area .product-area-wrapper-shopgrid-list.with-list .body-content {
  flex: 1;
  padding-top: 8px;
}
/* ============================================================================
   KOOMKAA — Mobile / Responsive
   ธีมเดิมเป็นเลย์เอาต์เดสก์ท็อปล้วน บนมือถือจึงไม่มีเมนูให้กดและเนื้อหาล้นจอ
   ส่วนนี้เพิ่มแถบหัวแบบมือถือ + ลิ้นชักเมนู และปรับสัดส่วนให้อ่านง่ายบนจอแคบ
   จุดตัด: 991px (ตรงกับ grid เดิมของธีมที่ใช้ -lg-)
   ========================================================================== */

:root {
  --koomkaa-brand: #ff7043;
  --koomkaa-brand-dark: #c13c10;
  --koomkaa-ink: #0e3550;
  --koomkaa-line: #d6e9f2;
  --koomkaa-bar-h: 58px;
}
/* ---------- แถบหัวมือถือ: ซ่อนบนเดสก์ท็อป ---------- */
.koomkaa-mnav { display: none; }
@media (max-width: 991px) {
  .koomkaa-mnav {
    display: block;
    position: sticky;
    top: 0;
    z-index: 1040;
    background: #fff;
    border-bottom: 1px solid var(--koomkaa-line);
  }
  .koomkaa-mnav__bar {
    display: flex;
    align-items: center;
    gap: 4px;
    height: var(--koomkaa-bar-h);
    padding: 0 8px;
  }
  /* เป้าแตะ 44px ตาม WCAG 2.2 — กลุ่มผู้ใช้มีผู้สูงอายุ */
  .koomkaa-mnav__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    color: var(--koomkaa-ink);
    font-size: 18px;
    border-radius: 10px;
  }
  .koomkaa-mnav__icon:active { background: #f2f5f3; }
  .koomkaa-mnav__icon:focus-visible {
    outline: 2px solid var(--koomkaa-brand);
    outline-offset: 2px;
  }
  .koomkaa-mnav__burger,
  .koomkaa-mnav__burger::before,
  .koomkaa-mnav__burger::after {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--koomkaa-ink);
    border-radius: 2px;
    content: "";
    position: relative;
  }
  .koomkaa-mnav__burger::before { top: -6px; position: absolute; }
  .koomkaa-mnav__burger::after  { top:  6px; position: absolute; }
  .koomkaa-mnav__logo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }
  .koomkaa-mnav__logo img { height: 30px; width: auto; max-width: 100%; }
  .koomkaa-mnav__search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 10px;
  }
  .koomkaa-mnav__search i { color: #7d868d; font-size: 15px; }
  .koomkaa-mnav__search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    /* 16px กันไม่ให้ Safari บน iOS ซูมเข้าอัตโนมัติตอนโฟกัส */
    font-size: 16px;
    padding: 0 12px;
    border: 1px solid var(--koomkaa-line);
    border-radius: 10px;
    background: #f7faf9;
    color: var(--koomkaa-ink);
  }
  .koomkaa-mnav__search input:focus {
    outline: 2px solid var(--koomkaa-brand);
    outline-offset: 1px;
    background: #fff;
  }
  /* ---------- ลิ้นชักเมนู ---------- */
  .koomkaa-drawer__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 24, 18, 0.45);
    z-index: 1050;
  }
  .koomkaa-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 340px);
    background: #fff;
    z-index: 1060;
    transform: translate3d(-100%, 0, 0);
    transition: transform 0.26s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
  }
  .koomkaa-drawer.is-open { transform: translate3d(0, 0, 0); }
  @media (prefers-reduced-motion: reduce) {
    .koomkaa-drawer { transition: none; }
  }
  .koomkaa-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--koomkaa-line);
  }
  .koomkaa-drawer__logo { height: 30px; width: auto; }
  .koomkaa-drawer__close {
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    font-size: 20px;
    color: var(--koomkaa-ink);
    border-radius: 10px;
  }
  .koomkaa-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0 20px;
  }
  .koomkaa-drawer__label {
    margin: 16px 16px 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7d868d;
  }
  .koomkaa-drawer__body ul { list-style: none; margin: 0; padding: 0; }
  .koomkaa-drawer__body li + li { border-top: 1px solid #f1f4f2; }
  .koomkaa-drawer__body a {
    display: block;
    padding: 13px 16px;
    min-height: 46px;
    font-size: 15px;
    color: var(--koomkaa-ink);
    text-decoration: none;
  }
  .koomkaa-drawer__body a:active { background: #eaf6fd; }
  .koomkaa-drawer__foot {
    border-top: 1px solid var(--koomkaa-line);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .koomkaa-drawer__call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    border-radius: 10px;
    background: var(--koomkaa-brand);
    color: #fff !important;
    font-weight: 600;
    text-decoration: none;
  }
  /* ---------- ซ่อนส่วนที่เป็นเดสก์ท็อปล้วน ---------- */
  /* แถบโปรโมชันบน / แถวลิงก์กลาง / แถบเมนูใหญ่ / แถวโลโก้+ค้นหาเดิม
     ทั้งหมดเป็น grid ที่ล้นจอแคบและซ้ำกับแถบมือถือ */
  .rts-header-one-area-one .header-top-area,
  .rts-header-one-area-one .header-mid-one-wrapper,
  .rts-header-one-area-one .search-header-area-main,
  .rts-header-one-area-one .rts-header-nav-area-one {
    display: none !important;
  }
}
/* ---------- ปรับสัดส่วนทั่วไปบนจอแคบ ---------- */
@media (max-width: 991px) {
  .ekomart-root .container { padding-left: 16px; padding-right: 16px; }
  /* กันภาพ/ตารางดันหน้าให้เลื่อนแนวนอน */
  .ekomart-root img,
  .ekomart-root video { max-width: 100%; height: auto; }
  .ekomart-root table { display: block; overflow-x: auto; }
  /* หัวข้อใหญ่บนแบนเนอร์ล้นบนจอแคบ */
  .ekomart-root .banner-one-inner-content .title { font-size: 26px; line-height: 1.25; }
  .ekomart-root .banner-one-inner-content .pre { font-size: 13px; }
  .ekomart-root .banner-bg-image { padding-top: 56px; padding-bottom: 56px; }
  /* การ์ดหมวด: 60px ยังเล็กไป แตะยากบนมือถือ */
  .ekomart-root .ekomart-home01-cats .single-category-one { height: 132px; padding: 16px 8px; }
  .ekomart-root .ekomart-home01-cats .single-category-one img {
    width: 52px !important; height: 52px !important;
    max-width: 52px !important; max-height: 52px !important; min-height: 52px !important;
  }
  .ekomart-root .ekomart-home01-cats .single-category-one p { font-size: 13px; }
  /* ระยะห่างระหว่างเซ็กชันบนเดสก์ท็อปกว้างเกินไปบนมือถือ */
  .ekomart-root .rts-section-gap { padding-top: 40px; padding-bottom: 40px; }
}
@media (max-width: 575px) {
  .ekomart-root .banner-one-inner-content .title { font-size: 22px; }
  .ekomart-root .container { padding-left: 14px; padding-right: 14px; }
}
/* ปุ่มทั้งหมดต้องแตะได้จริงบนมือถือ
   ไม่ผูกกับ (pointer: coarse) เพราะ emulator/หน้าต่างเล็กบนเดสก์ท็อปก็ควรได้ขนาดเดียวกัน
   และเงื่อนไขนั้นทำให้ทดสอบอัตโนมัติไม่เห็นกฎนี้เลย
   ยกเว้นลิงก์ที่อยู่กลางประโยค — WCAG 2.2 (2.5.8) ไม่บังคับขนาดกับ inline link */
@media (max-width: 991px) {
  .ekomart-root .rts-btn,
  .ekomart-root button:not(.nav-link),
  .ekomart-root .shop-now-goshop-btn,
  .ekomart-root .single-action,
  .ekomart-root input[type="submit"] {
    min-height: 44px;
  }
  /* ปุ่ม + / − ของตัวนับจำนวน เล็กเกินกว่าจะกดแม่นบนมือถือ */
  /* ปุ่ม +/− ของตัวนับจำนวน: ขยายเฉพาะ "ความสูง"
     ถ้าขยายความกว้างด้วย input ตัวเลขจะถูกบีบจนไม่เหลือที่ (เคยพังมาแล้ว) */
  .ekomart-root .quantity-edit .button-wrapper-action .button {
    min-height: 22px;
    min-width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ekomart-root .quantity-edit { min-height: 44px; }
  .ekomart-root .quantity-edit .input {
    min-width: 44px;
    width: auto;
    text-align: center;
  }
}
/* ============================================================================
   KOOMKAA — ปรับสีแบรนด์ให้เข้ากับโลโก้
   ธีมเดิมเป็นเขียวร้านขายของชำ (#FF7043) ซึ่งไม่เข้ากับโทนสถานพยาบาล
   เปลี่ยนเป็นเขียวอมฟ้า (teal-green) ให้ตรงกับโลโก้และดูเป็นคลินิกมากขึ้น
   แก้ที่ตัวแปรของธีม จึงกระจายไปทุกที่ที่อ้างตัวแปรโดยไม่ต้องไล่แก้ทีละจุด
   ========================================================================== */
:root {
  --color-primary: #ff7043;
  --color-primary-2: #ff7043;
  --koomkaa-brand-soft: #e1f5fe;
}
/* จุดที่ธีมฮาร์ดโค้ดสีไว้ ไม่ได้ใช้ตัวแปร */
.ekomart-root .rts-btn.btn-primary,
.ekomart-root .single-category-one:hover,
.ekomart-root button.rts-btn.btn-primary {
  background: #ff7043;
  border-color: #ff7043;
}
.ekomart-root .rts-btn.btn-primary:hover,
.ekomart-root button.rts-btn.btn-primary:hover {
  background: #c13c10;
  border-color: #c13c10;
}
.ekomart-root .ekomart-home01-cats .single-category-one:hover {
  border-color: #ff7043;
}
.ekomart-root a:hover,
.ekomart-root .title:hover {
  color: #ff7043;
}
/* ---------- แบนเนอร์หลัก: เปลี่ยนจากภาพร้านชำเป็นภาพสถานพยาบาล ---------- */
.ekomart-root .bg_one-banner {
  background-image: url(/assets/images/banner/koomkaa-hero-01.jpg) !important;
  background-position: center;
  background-size: cover;
}
.ekomart-root .bg_one-banner.two {
  background-image: url(/assets/images/banner/koomkaa-hero-02.jpg) !important;
}
/* ---------- ปุ่มหลัก: ธีมฮาร์ดโค้ดเขียวร้านชำไว้ลึกกว่าที่ override ไปก่อนหน้า ---------- */
.ekomart-root .rts-btn.btn-primary,
.ekomart-root .banner-one-inner-content .rts-btn.btn-primary,
.ekomart-root .right-btn-area .rts-btn.btn-primary,
.ekomart-root .search-header button.rts-btn.btn-primary,
.ekomart-root .cart-counter-action .rts-btn.btn-primary {
  background-color: #ff7043 !important;
  border-color: #ff7043 !important;
  color: #fff !important;
}
.ekomart-root .rts-btn.btn-primary:hover,
.ekomart-root .banner-one-inner-content .rts-btn.btn-primary:hover {
  background-color: #c13c10 !important;
  border-color: #c13c10 !important;
}
/* จุดสีเขียวอื่น ๆ ของธีม (ติ๊กถูก, ป้าย, ไอคอน) */
.ekomart-root .single-feature-area-one .icon,
.ekomart-root .check-icon,
.ekomart-root .rts-btn.btn-primary span {
  background-color: #ff7043;
}
/* ---------- ตัวนับถอยหลังบนจอแคบ: ตัวเลขกับหน่วยเบียดกัน ---------- */
@media (max-width: 767px) {
  /* หัวข้อกับตัวนับอยู่แถวเดียวกัน (title-area-between) พอจอแคบจึงเบียดกัน
     → ให้ขึ้นบรรทัดใหม่ แล้วตัวนับเรียงเต็มความกว้าง */
  /* :has() ใช้เลือกเฉพาะแถวหัวข้อที่มีตัวนับอยู่ด้วย
     (คลาสของ section คือ rts-grocery-feature-area ไม่ใช่ชื่อที่เดาไว้ตอนแรก) */
  .ekomart-root .title-area-between:has(.countdown) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px;
  }
  .ekomart-root .title-area-between:has(.countdown) .countdown { width: 100%; }
  .ekomart-root .countdown .countDown {
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  /* ไม่ให้ชิปหดจนตัวหนังสือขาด */
  .ekomart-root .countdown .countDown .container {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap;
    overflow: visible;
  }
  /* ธีมวาง "หน่วย" ไว้เป็น ::after แบบ position:absolute แล้วกันที่ด้วย padding-right
     ถ้าเปลี่ยนเป็น flex/ลด padding ป้ายจะทับตัวเลข — ต้องคงวิธีเดิมไว้ แค่ย่อขนาด */
  .ekomart-root .countdown .countDown .container {
    display: block;
    font-size: 14px;
    padding: 4px 34px 4px 8px;
  }
  .ekomart-root .ekomart-countdown-th .countDown .container::after {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.9;
    white-space: nowrap;
  }
}
/* ปุ่ม "เพิ่มลงตะกร้า" ในการ์ดสินค้าถูกกำหนด min-height 36px ไว้เฉพาะ
   เล็กเกินไปสำหรับการกดด้วยนิ้ว — ยกเป็น 44px เฉพาะจอมือถือ */
@media (max-width: 991px) {
  .ekomart-root .cart-counter-action .rts-btn.add-to-card,
  .ekomart-root .rts-btn.add-to-cart {
    min-height: 44px !important;
    height: auto !important;
  }
}
/* ---------- ข้อความรองบนการ์ดโปรโมชัน ----------
   สีแบรนด์ #ff7043 บนพื้นการ์ดโทนอ่อนได้ contrast แค่ 3.68:1
   ต่ำกว่าเกณฑ์ WCAG AA (4.5:1) สำหรับตัวอักษรขนาดปกติ
   ใช้เฉดเข้มขึ้นเฉพาะกรณีเป็นข้อความ — ปุ่ม/ป้ายที่พื้นเป็นสีแบรนด์ไม่ต้องแก้ */
.ekomart-root .single-feature-card .title span {
  color: #0b4a6b;              /* 5.68:1 */
}
/* ============================================================================
   KOOMKAA — หน้าโปรไฟล์สถานพยาบาล (/sellers/[handle])
   ของเดิมเป็น Tailwind ของ Mercur ที่หลุดจากเทมเพลตหลักทั้งหน้า
   ========================================================================== */
.ekomart-root .koomkaa-seller-hero {
  background: #fff;
  border: 1px solid var(--koomkaa-line, #d6e9f2);
  border-radius: 10px;
  padding: 28px;
}
.ekomart-root .koomkaa-seller-hero__id {
  display: flex;
  align-items: center;
  gap: 18px;
}
.ekomart-root .koomkaa-seller-hero__logo {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  border-radius: 12px;
  /* contain ไม่ใช่ cover — โลโก้ต้องไม่ถูกครอป */
  object-fit: contain;
  /* ไม่ใส่พื้นหลัง/ขอบ ปล่อยให้ความโปร่งใสของไฟล์ทำงาน */
  background: transparent;
  border: 0;
}
.ekomart-root .koomkaa-seller-hero__logo--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #ff7043;
  background: #e1f5fe;
  border-color: #b3e5fc;
}
.ekomart-root .koomkaa-seller-hero__name {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.25;
  color: var(--ekomart-ink, #0e3550);
}
.ekomart-root .koomkaa-seller-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.ekomart-root .koomkaa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #eef7fb;
  border: 1px solid #d6e9f2;
  font-size: 13px;
  color: #4a5760;
  white-space: nowrap;
}
/* ใช้สีเข้มพอให้ผ่าน contrast 4.5:1 บนพื้นอ่อน */
.ekomart-root .koomkaa-chip--ok {
  background: #e1f5fe;
  border-color: #b3e5fc;
  color: #0b4a6b;
}
.ekomart-root .koomkaa-seller-hero__desc {
  margin: 18px 0 0;
  color: #4a5760;
  max-width: 70ch;
  line-height: 1.7;
}
.ekomart-root .koomkaa-seller-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}
.ekomart-root .koomkaa-seller-hero__link {
  color: #0b4a6b;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ekomart-root .koomkaa-seller-report {
  margin: 32px 0 0;
  font-size: 13px;
}
.ekomart-root .koomkaa-seller-report a {
  color: #6b757d;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 767px) {
  .ekomart-root .koomkaa-seller-hero { padding: 20px; }
  /* วางโลโก้ไว้ด้านบน แล้วให้ชื่อ/ชิป/คำอธิบายชิดซ้ายเป็นแนวเดียวกัน
     ถ้าวางเป็นแถว ชื่อจะเริ่มที่ x=109 แต่คำอธิบายเริ่มที่ x=35 ทำให้ดูไม่เป็นระเบียบ */
  .ekomart-root .koomkaa-seller-hero__id {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .ekomart-root .koomkaa-seller-hero__logo {
    width: 60px; height: 60px; flex-basis: 60px;
  }
  .ekomart-root .koomkaa-seller-hero__name { font-size: 21px; }
  .ekomart-root .koomkaa-seller-hero__desc { margin-top: 14px; }
  .ekomart-root .koomkaa-seller-hero__actions {
    gap: 12px;
    margin-top: 18px;
  }
  .ekomart-root .koomkaa-seller-hero__actions > .rts-btn {
    width: 100%;
    max-width: none;
    justify-content: center;
  }
}
/* ---------- การ์ดสถานพยาบาลในหน้า /sellers ---------- */
.ekomart-root .ekomart-vendor-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eef4f1;
}
.ekomart-root .ekomart-vendor-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ชิปโลโก้มุมล่างซ้าย — ให้รู้ว่าเป็นเครือเดียวกันโดยไม่กลบภาพสาขา */
.ekomart-root .ekomart-vendor-card__chip {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  overflow: hidden;
  /* โลโก้โปร่งใสอยู่แล้ว จึงไม่ต้องมีแผ่นขาวรอง
     เหลือเงาบาง ๆ ไว้แยกตัวโลโก้ออกจากภาพด้านหลัง */
  background: transparent;
  border: 0;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.28));
}
.ekomart-root .ekomart-vendor-card__chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================================
   KOOMKAA palette — 60 / 30 / 10
     60%  #B3E5FC  ฟ้าอ่อน   พื้นหลัง / พื้นที่หลัก
     30%  #FF7043  ส้ม       ปุ่ม / รายการเด่น
     10%  #FFF9C4  เหลืองอ่อน แจ้งเตือน / รายละเอียด

   ⚠️ ข้อควรระวังของชุดสีนี้: ตัวอักษร "ขาว" บนส้ม #FF7043 ได้ contrast แค่ 2.74:1
      ตกเกณฑ์ WCAG AA (4.5:1) อย่างชัดเจน — ซึ่งเป็นค่าเริ่มต้นที่ธีมใช้
      ทางออกที่คงสีส้มไว้ได้: ใช้ตัวอักษรน้ำตาลเข้ม #3E2723 → 5.04:1 ✅
      (ถ้าจะยืนยันใช้ตัวอักษรขาว ต้องเปลี่ยนส้มเป็น #BF360C ซึ่งหม่นลงมาก)
   ========================================================================== */
:root {
  --k-primary: #b3e5fc;
  --k-primary-soft: #e1f5fe;
  --k-primary-faint: #f2fbff;
  --k-secondary: #ff7043;
  --k-secondary-hover: #e64a19;
  --k-accent: #fff9c4;
  --k-accent-line: #f3e59a;

  /* ตัวอักษรบนปุ่มส้ม — ผู้ใช้เลือกใช้สีขาวเพื่อความสม่ำเสมอของแบรนด์
     หมายเหตุ: ขาวบน #FF7043 = 2.74:1 ต่ำกว่าเกณฑ์ WCAG AA (4.5:1)
     ถ้าต้องการให้ผ่านเกณฑ์โดยยังเป็นตัวอักษรขาว ต้องเปลี่ยนสีปุ่มเป็น #BF360C (5.60:1) */
  --k-on-secondary: #ffffff;
  --k-brown: #0b4a6b;          /* หัวข้อ / แบรนด์ — น้ำเงินเข้ม คู่กับฟ้า #B3E5FC */
  --k-ink: #0e3550;
  --k-muted: #5b7a8c;
  --k-line: #d8e9f2;          /* เส้นขอบอ่อนของกล่องควบคุม */

  --ekomart-green: var(--k-secondary);
  --ekomart-ink: var(--k-ink);
  --color-primary: var(--k-secondary);
}

/* ---------- ปุ่มหลัก ----------
   กฎเดิมของธีมใช้ `:not(.add-to-card)` ทำให้ specificity เป็น (0,4,0)
   ถ้าเขียนแค่ `.ekomart-root .rts-btn.btn-primary` (0,3,0) จะแพ้แม้จะอยู่ท้ายไฟล์
   จึงต้องเทียบชั้นด้วยการซ้ำคลาส .btn-primary.btn-primary */
.ekomart-root .rts-btn.btn-primary.btn-primary,
.ekomart-root a.rts-btn.btn-primary.btn-primary,
.ekomart-root button.rts-btn.btn-primary.btn-primary,
.ekomart-root .rts-btn.btn-primary.btn-primary .btn-text,
.ekomart-root .rts-btn.btn-primary.btn-primary i,
.ekomart-root .rts-btn.btn-primary.btn-primary span,
.ekomart-root .rts-btn.btn-primary.btn-primary div,
.ekomart-root .rts-btn.btn-primary.btn-primary .arrow-icon,
.ekomart-root .rts-btn.btn-primary.btn-primary .arrow-icon i {
  color: var(--k-on-secondary) !important;
}
.ekomart-root .rts-btn.btn-primary:not(.add-to-card),
.ekomart-root a.rts-btn.btn-primary:not(.add-to-card),
.ekomart-root button.rts-btn.btn-primary:not(.add-to-card) {
  background: var(--k-secondary) !important;
  border-color: var(--k-secondary) !important;
}
.ekomart-root .rts-btn.btn-primary:not(.add-to-card):hover,
.ekomart-root a.rts-btn.btn-primary:not(.add-to-card):hover,
.ekomart-root button.rts-btn.btn-primary:not(.add-to-card):hover {
  background: var(--k-secondary-hover) !important;
  border-color: var(--k-secondary-hover) !important;
  color: #fff !important;          /* #E64A19 + ขาว = 3.92:1 — ใช้เฉพาะสถานะ hover ชั่วคราว */
}

/* ---------- พื้นหลัง 60% ---------- */
.ekomart-root .bg_light-1,
.ekomart-root .background-light-gray-color {
  background: var(--k-primary-faint) !important;
}
.ekomart-root .rts-navigation-area-breadcrumb {
  background: var(--k-primary-soft) !important;
}

/* ---------- ไฮไลต์ 10% ---------- */
.ekomart-root .discount-parcent,
.ekomart-root .onsale-offer,
.ekomart-root .ekomart-badge-accent {
  background: var(--k-accent) !important;
  color: var(--k-ink) !important;
  border-color: var(--k-accent-line) !important;
}

/* หัวข้อใช้โทนน้ำตาลของแบรนด์ */
.ekomart-root h1, .ekomart-root h2, .ekomart-root h3,
.ekomart-root .title-left, .ekomart-root .section-title {
  color: var(--k-brown);
}

/* ---------- คืนสัดส่วน 60 / 30 / 10 ----------
   ส้มคือสี 30% สำหรับ "ปุ่ม/รายการเด่น" ไม่ใช่พื้นหลังผืนใหญ่
   ธีมเดิมทาสีหลักลงแถบบนทั้งแถบ พอเปลี่ยนเป็นส้มจึงกลายเป็นผืนส้มเต็มจอ
   และตัวอักษรขาวบนส้มได้แค่ 2.74:1 (ตก AA)
   → แถบบนใช้ฟ้า 60% + ตัวอักษรน้ำตาล */
.ekomart-root .header-top-area {
  background: var(--k-primary) !important;
}
.ekomart-root .header-top-area,
.ekomart-root .header-top-area p,
.ekomart-root .header-top-area a,
.ekomart-root .header-top-area .disc {
  color: var(--k-brown) !important;   /* 6.89:1 บน #B3E5FC */
}

/* ---------- ตัวเลขแจ้งเตือน = สี 10% ----------
   ป้ายตัวเลขบนไอคอนตะกร้า/รายการโปรด เดิมเป็นส้ม+ขาว (2.74:1)
   ชุดสีกำหนดให้เหลือง #FFF9C4 เป็นสีของ "การแจ้งเตือน" อยู่แล้ว */
.ekomart-root .accont-wishlist-cart-area-header .number,
.ekomart-root .cart-number,
.ekomart-root .compare-number .number {
  background: var(--k-accent) !important;
  color: var(--k-ink) !important;      /* 15.2:1 */
  border: 1px solid var(--k-accent-line) !important;
}

/* ---------- ป้าย "โปร" บนปุ่มโปรโมชัน ----------
   เดิมเป็นตัวอักษรส้มบนพื้นขาว = 2.74:1 */
.ekomart-root .right-btn-area .rts-btn.btn-primary span,
.ekomart-root .rts-btn.btn-primary > span:last-child {
  background: var(--k-accent) !important;
  color: var(--k-ink) !important;
  border-radius: 999px;
  padding: 2px 10px;
}

/* ---------- เก็บตกคู่สีที่ยังตกเกณฑ์ ----------
   ทั้งสามจุดเป็นกฎเดิมของธีมที่ specificity สูงกว่า จึงต้องเทียบชั้นด้วยการซ้ำคลาส */

/* ป้ายตัวเลข: พื้นเหลืองแล้วแต่ตัวอักษรยังขาว (1.07:1) */
.ekomart-root .accont-wishlist-cart-area-header .number.number,
.ekomart-root .btn-border-only .number.number,
.ekomart-root .compare-number .number.number {
  background: var(--k-accent) !important;
  color: var(--k-ink) !important;
  border: 1px solid var(--k-accent-line) !important;
}

/* ป้าย "โปร" — span ไม่มีคลาส จึงต้องอ้างผ่านพ่อ */
.ekomart-root .rts-btn.btn-primary.btn-primary > span {
  background: var(--k-accent) !important;
  color: var(--k-ink) !important;
  border-radius: 999px;
  padding: 2px 10px;
  display: inline-block;
}

/* แท็บ .nav-link ที่ active — พื้นส้ม ตัวอักษรขาว */
.ekomart-root .nav-link.active,
.ekomart-root button.nav-link.active,
.ekomart-root .nav-item .nav-link.active {
  color: var(--k-on-secondary) !important;
}

/* ---------- เก็บตกรอบสุดท้าย ----------
   บทเรียน: กฎเดิมคือ `.ekomart-root .accont-wishlist-cart-area-header .compare-number > span.number`
   = 4 คลาส + 1 element → (0,4,1) ส่วนที่ผมเขียนไว้ (0,4,0) จึงแพ้ทั้งที่อยู่ท้ายไฟล์และมี !important
   รอบนี้ใช้ selector ที่ครอบเท่ากันแล้วบวกอีก 1 คลาส */
.ekomart-root .accont-wishlist-cart-area-header .compare-number > span.number.number,
.ekomart-root .accont-wishlist-cart-area-header .wishlist > span.number.number,
.ekomart-root .accont-wishlist-cart-area-header .cart > span.number.number,
.ekomart-root .accont-wishlist-cart-area-header a > span.number.number,
.ekomart-root .accont-wishlist-cart-area-header div > span.number.number {
  background: var(--k-accent) !important;
  color: var(--k-ink) !important;
  border: 1px solid var(--k-accent-line) !important;
}

.ekomart-root .right-btn-area a.rts-btn.btn-primary.btn-primary > span,
.ekomart-root div.right-btn-area .rts-btn.btn-primary.btn-primary > span {
  background: var(--k-accent) !important;
  color: var(--k-ink) !important;
  border-radius: 999px;
  padding: 2px 10px;
  display: inline-block;
}

.ekomart-root ul.nav-tabs li.nav-item button.nav-link.active,
.ekomart-root ul.nav-tabs li.nav-item a.nav-link.active {
  color: var(--k-on-secondary) !important;
}

/* ============================================================================
   ตัวเลื่อนช่วงราคา (input[type=range])
   ธีมจัดสไตล์ ::-webkit-slider-thumb ไว้แล้ว แต่ไม่ได้ตั้ง appearance: none
   ที่ตัว input เอง — เบราว์เซอร์จึงยังวาดหัวจับแบบ native (สีน้ำเงิน)
   และ Firefox ไม่รู้จัก pseudo-element ของ WebKit เลย

   ออกแบบตามสัดส่วน 60/30/10: รางเป็นฟ้า 60% · หัวจับเป็นส้ม 30%
   ========================================================================== */
.ekomart-root .price-input-area input[type="range"].range,
.ekomart-root input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;                 /* พื้นที่ให้จับ ไม่ใช่ความสูงของราง */
  background: transparent;
  border: 0;
  cursor: pointer;
  /* สำรองสำหรับเบราว์เซอร์ที่ไม่รับ pseudo-element */
  accent-color: var(--k-secondary);
}

/* ---- ราง ---- */
.ekomart-root .price-input-area input[type="range"].range::-webkit-slider-runnable-track,
.ekomart-root input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: var(--k-primary) !important;   /* ฟ้าอ่อน 60% */
  border: 0;
}
.ekomart-root input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--k-primary);
  border: 0;
}
/* Firefox: ส่วนที่ถูกเลือกแล้ว */
.ekomart-root input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--k-secondary);
}

/* ---- หัวจับ ---- */
.ekomart-root .price-input-area input[type="range"].range::-webkit-slider-thumb,
.ekomart-root input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  margin-top: -7px !important;          /* จัดกึ่งกลางราง 6px */
  border-radius: 50%;
  background: var(--k-secondary) !important;   /* ส้ม 30% */
  border: 3px solid #fff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: grab;
}
.ekomart-root input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--k-secondary);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: grab;
}
.ekomart-root input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
.ekomart-root input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 3px solid var(--k-brown);
  outline-offset: 2px;
}

/* บนมือถือ หัวจับต้องใหญ่พอให้นิ้วลาก */
@media (max-width: 991px) {
  .ekomart-root input[type="range"] { height: 44px; }
  .ekomart-root input[type="range"]::-webkit-slider-thumb {
    width: 26px !important; height: 26px !important; margin-top: -10px !important;
  }
  .ekomart-root input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; }
}

/* ---------- ปุ่มสลับมุมมอง กริด/ลิสต์ ----------
   ไอคอน SVG ใช้ currentColor ตามค่า color ของปุ่ม ซึ่งยังเป็นน้ำเงิน Bootstrap */
.ekomart-root .nav-link.single-button,
.ekomart-root button.nav-link.single-button {
  color: var(--k-muted) !important;
  background: transparent !important;
  border: 1px solid var(--k-primary) !important;
  border-radius: 8px;
}
.ekomart-root .nav-link.single-button svg,
.ekomart-root .nav-link.single-button svg * {
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
.ekomart-root .nav-link.single-button.active,
.ekomart-root button.nav-link.single-button.active {
  color: var(--k-on-secondary) !important;
  background: var(--k-secondary) !important;   /* ส้ม + น้ำตาลเข้ม = 5.04:1 */
  border-color: var(--k-secondary) !important;
}
.ekomart-root .nav-link.single-button:hover {
  border-color: var(--k-secondary) !important;
  color: var(--k-brown) !important;
}

/* ============================================================================
   Mobile UX — สัดส่วนและความหนาแน่นของเนื้อหา
   ปัญหาที่วัดได้: หน้าแรกบนจอ 390px สูง 17,506px = เลื่อน 20.7 หน้าจอ
   ต้นเหตุ: คลาสคอลัมน์ของธีมจบที่ col-sm-6 / col-12 ไม่มีคลาสสำหรับ < 576px
   Bootstrap จึงตกไปเป็น width:100% → การ์ดสินค้า 372×509 หนึ่งใบต่อแถว
   12 ใบ = 6,100px ในหนึ่ง section
   ========================================================================== */
@media (max-width: 575.98px) {
  /* ---- กริดสินค้า 2 คอลัมน์ ให้เท่ากันทุก section ----
     ต้องใช้ `:has(> ...)` (ลูกโดยตรง) เท่านั้น
     ถ้าใช้แบบ descendant `:has(.card)` จะไปโดน .col-lg-12 ที่เป็นกล่องครอบด้วย
     ทำให้ทั้งแถวถูกบีบเหลือครึ่ง แล้วคอลัมน์ข้างในถูกบีบซ้ำอีกชั้น → เหลือ 25% */
  .ekomart-root .row > [class*="col-"]:has(> .single-shopping-card-one) {
    flex: 0 0 auto !important;
    width: 50% !important;
    max-width: 50% !important;
  }
  /* ยกเว้น section "แพ็กเกจลดราคา" — การ์ดที่นั่นเป็นแบบแนวนอน (รูปซ้าย/ข้อความขวา)
     บีบเหลือครึ่งจอแล้วเนื้อหาล้นออกนอกกรอบ 28px และอ่านไม่ได้ */
  .ekomart-root .rts-grocery-feature-area .row > [class*="col-"]:has(> .single-shopping-card-one) {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---- ปรับภายในการ์ดให้พอดีกับความกว้าง ~170px ---- */
  .ekomart-root .single-shopping-card-one .title {
    font-size: 14px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;              /* กันการ์ดสูงไม่เท่ากันเวลาชื่อยาวไม่เท่ากัน */
  }
  .ekomart-root .single-shopping-card-one .availability { font-size: 12px; }
  .ekomart-root .single-shopping-card-one .price-area .current { font-size: 16px; }
  .ekomart-root .single-shopping-card-one .price-area .previous { font-size: 12px; }


  /* ---- ตัวอักษรเล็กสุด 12px (เดิมมี 11px 30 จุด) ---- */
  .ekomart-root .availability,
  .ekomart-root .previous,
  .ekomart-root small,
  .ekomart-root .disc,
  .ekomart-root .para { font-size: 12px !important; }

  /* ---- ระยะขอบซ้าย/ขวาให้เท่ากันทุก container ---- */
  .ekomart-root .container { padding-left: 16px !important; padding-right: 16px !important; }

  /* ---- ลดระยะห่างระหว่าง section ---- */
  .ekomart-root .rts-section-gap { padding-top: 32px; padding-bottom: 32px; }
  .ekomart-root .rts-section-gapTop { padding-top: 32px; }
  .ekomart-root .rts-section-gapBottom { padding-bottom: 32px; }
  .ekomart-root .title-area-between { margin-bottom: 14px; }
}

/* ---------- section "แพ็กเกจลดราคา" บนมือถือ: การ์ดแนวนอนจริง ----------
   เดิมเป็นการ์ดเต็มความกว้างแต่รูปเป็นสี่เหลี่ยมเล็กชิดซ้าย
   เหลือพื้นที่ว่างด้านขวาทั้งแถบ และกินความสูง ~330px ต่อรายการ */
@media (max-width: 575.98px) {
  .ekomart-root .rts-grocery-feature-area .row > [class*='col-'] > .single-shopping-card-one {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px;
  }
  .ekomart-root .rts-grocery-feature-area .row > [class*='col-'] > .single-shopping-card-one .image-and-action-area-wrapper,
  .ekomart-root .rts-grocery-feature-area .row > [class*='col-'] > .single-shopping-card-one .thumbnail-preview {
    width: 112px;
    margin: 0;
  }
  .ekomart-root .rts-grocery-feature-area .row > [class*='col-'] > .single-shopping-card-one .thumbnail-preview img {
    width: 112px;
    height: 112px;
    object-fit: cover;
    border-radius: 8px;
  }
  .ekomart-root .rts-grocery-feature-area .row > [class*='col-'] > .single-shopping-card-one .body-content {
    min-width: 0;
    padding: 0;
  }
  .ekomart-root .rts-grocery-feature-area .row > [class*='col-'] > .single-shopping-card-one .title {
    font-size: 15px;
    min-height: 0;
  }
  .ekomart-root .rts-grocery-feature-area .row > [class*='col-'] > .single-shopping-card-one .cart-counter-action {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .ekomart-root .rts-grocery-feature-area .row > [class*='col-'] > .single-shopping-card-one .cart-counter-action .rts-btn {
    width: 100%;
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ลูกใน grid/flex ที่เป็นข้อความต้องตั้ง min-width:0 ไม่งั้นไม่ยอมหด
   ทำให้ข้อความยาว ๆ ดันล้นออกนอกการ์ด */
@media (max-width: 575.98px) {
  .ekomart-root .single-shopping-card-one .body-content > *,
  .ekomart-root .single-shopping-card-one .availability,
  .ekomart-root .single-shopping-card-one .price-area {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .ekomart-root .single-shopping-card-one .availability {
    display: block;
    white-space: normal;
  }
}

/* ---------- แถวปุ่มในการ์ดสินค้าทุกแบบบนมือถือ ----------
   สไลด์แนวนอน (.ekomart-cat-scroller) ไม่ได้ผ่านกริด Bootstrap
   .cart-counter-action จึงยุบเหลือ 16px แล้วตัวนับ 92px ล้นออกไป 64px */
@media (max-width: 575.98px) {
}

/* ---------- ตัวนับถอยหลังบนมือถือ ----------
   กฎธีมคือ `.ekomart-root .ekomart-discount-section .countdown .countDown .container` (4 คลาส)
   ก่อนหน้านี้ผมเขียนแบบ 3 คลาสจึงแพ้ ป้ายหน่วยเลยถูกตัด ("08ม." แทน "08 ชม.") */
@media (max-width: 575.98px) {
  .ekomart-root .ekomart-discount-section .countdown .countDown .container,
  .ekomart-root .countdown .countDown .container.container {
    font-size: 13px !important;
    padding: 4px 32px 4px 8px !important;
  }
  .ekomart-root .ekomart-countdown-th .countDown .container.container::after {
    font-size: 11px !important;
    left: auto !important;
    right: 7px !important;
  }
}

/* ============================================================================
   ตัวกรองบนมือถือ — bottom sheet
   เดิม sidebar ตัวกรองถูกวางไว้เหนือรายการสินค้า กินพื้นที่ ~2 หน้าจอแรก
   ผู้ใช้ต้องเลื่อนผ่าน ราคา → หมวดหมู่ → มาตรฐาน กว่าจะเห็นสินค้าชิ้นแรก
   ========================================================================== */
.ekomart-root .koomkaa-filters__trigger,
.ekomart-root .koomkaa-filters__head,
.ekomart-root .koomkaa-filters__foot { display: none; }

@media (max-width: 991px) {
  /* ปุ่มเปิดตัวกรอง */
  .ekomart-root .koomkaa-filters__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    margin-bottom: 14px;
    border-radius: 10px;
    border: 1px solid var(--k-primary);
    background: var(--k-primary-soft);
    color: var(--k-brown);
    font-weight: 600;
    font-size: 15px;
  }

  .ekomart-root .koomkaa-filters__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 24, 30, 0.45);
    z-index: 1050;
  }

  /* แผ่นเลื่อนขึ้นจากด้านล่าง — เข้าถึงด้วยนิ้วง่ายกว่าลิ้นชักด้านข้างสำหรับตัวกรอง */
  .ekomart-root .koomkaa-filters {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto !important;
    z-index: 1060;
    width: 100% !important;
    max-width: none !important;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.2);
    transform: translate3d(0, 100%, 0);
    transition: transform 0.28s ease;
    padding: 0 !important;
    visibility: hidden;
  }
  .ekomart-root .koomkaa-filters.is-open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  @media (prefers-reduced-motion: reduce) {
    .ekomart-root .koomkaa-filters { transition: none; }
  }

  .ekomart-root .koomkaa-filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--k-primary);
    font-weight: 700;
    color: var(--k-brown);
    font-size: 16px;
  }
  .ekomart-root .koomkaa-filters__close {
    width: 44px; height: 44px;
    border: 0; background: none;
    font-size: 20px; color: var(--k-brown);
    border-radius: 10px;
  }

  .ekomart-root .koomkaa-filters .sidebar-filter-main {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 16px 4px;
  }

  .ekomart-root .koomkaa-filters__foot {
    display: block;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--k-primary);
  }
  .ekomart-root .koomkaa-filters__foot .rts-btn {
    width: 100%;
    max-width: none;
    justify-content: center;
    min-height: 48px;
  }

  /* ตัวเลือกในตัวกรองต้องกดง่าย */
  .ekomart-root .koomkaa-filters .single-category {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
  }
  .ekomart-root .koomkaa-filters .single-category input[type="checkbox"] {
    width: 20px; height: 20px; flex: 0 0 20px;
    accent-color: var(--k-secondary);
  }
  .ekomart-root .koomkaa-filters .single-category label { font-size: 15px; margin: 0; }
}

/* ---------- ขนาดปุ่มขั้นต่ำบนมือถือ (WCAG 2.2 · 2.5.8 = 24×24 ขั้นต่ำ) ----------
   ปุ่ม +/− ซ้อนกันอยู่ในตัวนับสูง 44px จึงได้ปุ่มละ 22px — ต่ำกว่าเกณฑ์เล็กน้อย
   ปุ่ม "เพิ่ม" ในการ์ดถูกธีมล็อก min-height 36px ไว้ด้วย selector ที่เจาะจงกว่า */
@media (max-width: 991px) {
  .ekomart-root .quantity-edit .button-wrapper-action .button.button,
  .ekomart-root .button-wrapper-action button.button {
    min-height: 24px !important;
    min-width: 30px !important;
  }
  .ekomart-root .quantity-edit { min-height: 52px; }

  .ekomart-root .cart-counter-action .rts-btn.btn-primary.add-to-card,
  .ekomart-root .cart-counter-action button.rts-btn.add-to-cart.add-to-card,
  .ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.rts-btn {
    min-height: 44px !important;
    height: auto !important;
  }
}

/* ---------- ลิงก์เดี่ยวที่ยังต่ำกว่า 24px ----------
   ลิงก์ในประโยคได้รับการยกเว้นตาม WCAG 2.5.8 แต่ลิงก์เดี่ยวแบบนี้ไม่เข้าข่าย */
@media (max-width: 991px) {
  .ekomart-root .ekomart-vendor-card__body > a {
    display: block;
    padding: 3px 0;
    min-height: 26px;
  }
  .ekomart-root .koomkaa-seller-hero__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---------- ตัวอักษรขั้นต่ำบนแท็บเล็ต ----------
   แท็บเล็ตยังเป็นการใช้งานด้วยนิ้วและมักถืออ่านระยะเดียวกับมือถือ
   จึงใช้เกณฑ์ 12px เท่ากัน (เดิมเหลือ 11px อยู่ 12–30 จุด) */
@media (min-width: 576px) and (max-width: 991px) {
  .ekomart-root .availability,
  .ekomart-root .previous,
  .ekomart-root small,
  .ekomart-root .disc,
  .ekomart-root .para { font-size: 12px !important; }
}

/* ============================================================================
   แถวควบคุมในการ์ดสินค้าบนมือถือ — ตัวนับ + ปุ่มไอคอน อยู่แถวเดียวกัน
   ปุ่มแสดงเฉพาะไอคอนตะกร้า ข้อความ "เพิ่ม" ถูกซ่อนแบบ visually-hidden
   (ไม่ใช้ display:none เพราะจะทำให้ screen reader อ่านไม่เจอ —
    ปุ่มมี aria-label อยู่แล้วจึงยังมีชื่อที่เข้าถึงได้ทั้งสองทาง)

   ใช้เฉพาะจอโทรศัพท์ (<576px) — ที่ 576–991px การ์ดกว้าง 195–486px
   ปุ่มไอคอนเดี่ยวทำให้เหลือที่ว่างท้ายแถวมากถึง 314px จึงคงข้อความ "เพิ่ม" ไว้
   ========================================================================== */
@media (max-width: 575.98px) {
  .ekomart-root .single-shopping-card-one .cart-counter-action {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 8px;
    width: 100% !important;
  }

  /* ตัวนับยืดเต็มที่เหลือ */
  .ekomart-root .single-shopping-card-one .cart-counter-action .quantity-edit {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
  }
  .ekomart-root .single-shopping-card-one .quantity-edit .input {
    width: 100%;
    min-width: 0;
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
  }

  /* ปุ่มเป็นสี่เหลี่ยมจัตุรัส 44px ไอคอนอยู่กึ่งกลาง */
  .ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  .ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn .arrow-icon {
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn i {
    font-size: 17px;
    margin: 0 !important;
  }
  /* ซ่อนข้อความแบบยังอ่านได้ด้วย screen reader */
  .ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn .btn-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* คืนตัวนับให้การ์ดในสไลด์และการ์ดแนวนอน — ตอนนี้กว้างพอแล้ว */
  .ekomart-root .ekomart-cat-scroller .single-shopping-card-one .quantity-edit,
  .ekomart-root .ekomart-featured-grocery__item .single-shopping-card-one .quantity-edit,
  .ekomart-root .rts-grocery-feature-area .single-shopping-card-one .quantity-edit {
    display: flex !important;
  }
}

/* การ์ดในสไลด์แคบมาก (~164px) — ย่อตัวนับลงอีกเพื่อให้พอดีแถวเดียว */
@media (max-width: 575.98px) {
  .ekomart-root .ekomart-featured-grocery__item .quantity-edit,
  .ekomart-root .ekomart-cat-scroller .quantity-edit {
    min-width: 84px;
  }
  .ekomart-root .ekomart-featured-grocery__item .quantity-edit .input,
  .ekomart-root .ekomart-cat-scroller .quantity-edit .input {
    font-size: 14px;
  }
}

/* ---------- ปุ่มไอคอนล้วนต้องเป็นปุ่มทึบ ----------
   แบบ outline: ไอคอนส้ม #FF7043 บนพื้นขาว = 2.74:1 ตกเกณฑ์ WCAG 1.4.11 (3:1)
   และเมื่อไม่มีข้อความกำกับแล้ว ปุ่มทึบยังสื่อว่า "กดได้" ชัดกว่า
   พื้นส้ม + ไอคอนน้ำตาลเข้ม = 5.04:1 */
@media (max-width: 575.98px) {
  .ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.add-to-card,
  .ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn {
    background: var(--k-secondary) !important;
    border-color: var(--k-secondary) !important;
    border-radius: 10px !important;
  }
  .ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn i,
  .ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn .arrow-icon i {
    color: var(--k-on-secondary) !important;
  }
  .ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn:active {
    background: var(--k-secondary-hover) !important;
    border-color: var(--k-secondary-hover) !important;
  }
  /* สถานะ "เพิ่มแล้ว" ใช้เหลือง 10% ตามบทบาทการแจ้งเตือน */
  .ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.is-added {
    background: var(--k-accent) !important;
    border-color: var(--k-accent-line) !important;
  }
}

/* ธีมตั้ง `.rts-btn.btn-primary { background: transparent !important }` ไว้ที่ (0,5,0)
   เท่ากับกฎก่อนหน้าของผมพอดี จึงต้องเพิ่มคลาสให้ชนะขาด (0,6,0) */
@media (max-width: 991px) {
  .ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.add-to-card,
  .ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.add-to-cart {
    background: var(--k-secondary) !important;
    border-color: var(--k-secondary) !important;
  }
  .ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.add-to-card i,
  .ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.add-to-cart i {
    color: var(--k-on-secondary) !important;
  }
  .ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.is-added {
    background: var(--k-accent) !important;
    border-color: var(--k-accent-line) !important;
  }
}

/* ---------- ปุ่มไอคอนล้วน: ต้องชนะกฎ outline ของธีม ----------
   ธีมใช้ `.rts-btn.add-to-card:not(:hover):not(.is-added):not(.is-loading)`
   → specificity 80 (แต่ละ :not() นับเป็น 1 คลาส) พร้อม `background: initial !important`
   กฎที่เขียนไว้ก่อนหน้าได้แค่ 50–60 จึงแพ้ทั้งหมด ต้องเทียบ :not() ให้ครบแล้วบวกอีก 1 คลาส */
@media (max-width: 991px) {
  .ekomart-root .single-shopping-card-one .cart-counter-action
    .rts-btn.btn-primary.add-to-card:not(:hover):not(.is-added):not(.is-loading) {
    background: var(--k-secondary) !important;
    border-color: var(--k-secondary) !important;
    border-radius: 10px !important;
  }
  .ekomart-root .single-shopping-card-one .cart-counter-action
    .rts-btn.btn-primary.add-to-card:not(:hover):not(.is-added):not(.is-loading) i {
    color: var(--k-on-secondary) !important;
  }
}

/* ============================================================================
   Desktop — เก็บตกขนาดตัวอักษรและเป้าคลิก
   WCAG 2.5.8 (Target Size Minimum 24×24) มีผลกับทุกอุปกรณ์ชี้ตำแหน่ง ไม่ใช่แค่จอสัมผัส
   ========================================================================== */
@media (min-width: 992px) {
  /* หมวดหมู่ใต้ชื่อสินค้า และตัวเลขแจ้งเตือน เดิม 11px */
  .ekomart-root .availability,
  .ekomart-root .single-shopping-card-one .availability,
  .ekomart-root .number { font-size: 12px; }

  /* ตัวนับจำนวนในการ์ด: ช่องกรอก 20×23 และปุ่ม +/− 22×22 */
  .ekomart-root .quantity-edit { min-height: 40px; }
  .ekomart-root .quantity-edit .input {
    min-width: 34px;
    min-height: 26px;
    text-align: center;
  }
  .ekomart-root .quantity-edit .button-wrapper-action .button {
    min-width: 26px !important;
    min-height: 24px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ลิงก์ "แพ็กเกจยอดนิยม" บนแถบเมนู สูงแค่ 18px */
  .ekomart-root .btn-narrow {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
  }
}

/* ---------- เก็บตกรอบสุดท้ายของ desktop ----------
   .availability : กฎธีมคือ `.ekomart-root .single-shopping-card-one .body-content .availability`
                   (spec 40) ตั้ง 11px — ของผมเขียนไว้ spec 30 จึงแพ้
   .input        : ธีมตั้ง `min-width: 0 !important` ที่ spec 41 ต้องเทียบให้สูงกว่า */
@media (min-width: 992px) {
  .ekomart-root .single-shopping-card-one .body-content .availability,
  .ekomart-root .single-shopping-card-one .body-content span.availability {
    font-size: 12px;
  }
  .ekomart-root .single-shopping-card-one .cart-counter-action .quantity-edit input.input {
    min-width: 34px !important;
    width: 34px;
    text-align: center;
  }
  /* ตัวเลขแจ้งเตือนบนไอคอนตะกร้า/รายการโปรด */
  .ekomart-root .accont-wishlist-cart-area-header .number.number,
  .ekomart-root .accont-wishlist-cart-area-header span.number {
    font-size: 12px;
    min-width: 20px;
    min-height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (min-width: 992px) {
  /* ตัวเลขแจ้งเตือน — ต้องเทียบ selector แบบ `.compare-number > span.number` (spec 41) */
  .ekomart-root .accont-wishlist-cart-area-header .compare-number > span.number.number,
  .ekomart-root .accont-wishlist-cart-area-header .wishlist > span.number.number,
  .ekomart-root .accont-wishlist-cart-area-header .cart > span.number.number,
  .ekomart-root .accont-wishlist-cart-area-header a > span.number.number,
  .ekomart-root .accont-wishlist-cart-area-header div > span.number.number {
    font-size: 12px !important;
    min-width: 20px;
    min-height: 20px;
  }
  /* ตัวเลื่อนราคา: พื้นที่จับ 22px ต่ำกว่าเกณฑ์ 24px */
  .ekomart-root input[type="range"] { height: 26px; }
}

/* ลิงก์เดี่ยวในหน้าร้านค้า — ใช้เกณฑ์เดียวกันทุกขนาดจอ
   (WCAG 2.5.8 มีผลกับเมาส์ด้วย ไม่ใช่เฉพาะจอสัมผัส) */
.ekomart-root .ekomart-vendor-card__body > a {
  display: block;
  padding: 3px 0;
  min-height: 26px;
}
.ekomart-root .koomkaa-seller-hero__link {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
}

/* ============================================================================
   แถวตัวนับ + ปุ่มเพิ่ม — ขนาดพอดีและสูงเท่ากัน
   เดิม justify-content: space-between ดันให้ตัวนับยืดเต็มพื้นที่ที่เหลือ
   (บนการ์ดแนวนอนกว้าง ๆ ยืดได้ถึง 400px) และตัวนับสูง 36 ปุ่มสูง 44 ไม่เท่ากัน
   ========================================================================== */
.ekomart-root .single-shopping-card-one .cart-counter-action {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.ekomart-root .single-shopping-card-one .cart-counter-action .quantity-edit {
  /* ยืดเต็มพื้นที่ที่เหลือ ไม่ล็อกความกว้างอีกต่อไป
     ตัวเลขจะได้ครึ่งหนึ่งของกรอบเสมอไม่ว่าการ์ดจะกว้างเท่าไร */
  flex: 1 1 45% !important;
  width: auto !important;
  min-width: 96px !important;
  max-width: none !important;
  height: 44px !important;
  min-height: 44px !important;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
}
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn {
  height: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box;
}

/* บนมือถือปุ่มเป็นไอคอน 44px ตัวนับกินพื้นที่ที่เหลือทั้งหมด */
@media (max-width: 575.98px) {
  .ekomart-root .single-shopping-card-one .cart-counter-action .quantity-edit {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* ---------- รูปในการ์ดแนวนอน: กำหนดความกว้างให้พอดี ---------- */
.ekomart-root .rts-grocery-feature-area .row > [class*='col-'] > .single-shopping-card-one {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 16px;
  align-items: start;
}
.ekomart-root .rts-grocery-feature-area .row > [class*='col-'] > .single-shopping-card-one
  .thumbnail-preview img {
  width: 148px;
  height: 148px;
  object-fit: cover;
  border-radius: 10px;
}
@media (max-width: 575.98px) {
  .ekomart-root .rts-grocery-feature-area .row > [class*='col-'] > .single-shopping-card-one {
    grid-template-columns: 112px 1fr;
    gap: 12px;
  }
  .ekomart-root .rts-grocery-feature-area .row > [class*='col-'] > .single-shopping-card-one
    .thumbnail-preview img {
    width: 112px;
    height: 112px;
  }
}

/* ============================================================================
   เก็บตกรอบสุดท้าย — ตัวอักษร/ไอคอนบนปุ่มส้มเป็นสีขาวทุกที่
   ธีมตั้ง `.cart-counter-action .rts-btn.add-to-cart { color: #ff7043 !important }`
   (สไตล์ outline) ทำให้ไอคอนเป็นสีเดียวกับพื้นหลังส้ม → มองไม่เห็น (contrast 1:1)
   ========================================================================== */
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.add-to-cart:not(.is-loading),
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.add-to-card:not(.is-loading),
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.add-to-cart:not(.is-loading) i,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.add-to-card:not(.is-loading) i,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.add-to-cart:not(.is-loading) .btn-text,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.add-to-card:not(.is-loading) .btn-text,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.add-to-cart:not(.is-loading) .arrow-icon i,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.add-to-card:not(.is-loading) .arrow-icon i {
  color: var(--k-on-secondary) !important;
}
/* พื้นปุ่มเป็นส้มทุกขนาดจอ (เดิมทำเฉพาะมือถือ) */
.ekomart-root .single-shopping-card-one .cart-counter-action
  .rts-btn.btn-primary.add-to-card:not(:hover):not(.is-added):not(.is-loading),
.ekomart-root .single-shopping-card-one .cart-counter-action
  .rts-btn.btn-primary.add-to-cart:not(:hover):not(.is-added):not(.is-loading) {
  background: var(--k-secondary) !important;
  border-color: var(--k-secondary) !important;
  border-radius: 10px !important;
}
/* สถานะ "เพิ่มแล้ว" ใช้เหลือง 10% + ไอคอนเข้ม (ขาวบนเหลืองอ่านไม่ออก) */
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.add-to-cart.is-added {
  background-color: var(--k-accent) !important;
  border-color: var(--k-accent-line) !important;
}
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.add-to-cart.is-added,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.add-to-cart.is-added .btn-text,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.add-to-cart.is-added .arrow-icon,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.add-to-cart.is-added .arrow-icon i {
  color: var(--k-ink) !important;
}

/* รูปในการ์ดแนวนอน — ธีมตั้ง height 186px !important ไว้ที่ .discount-offer */
.ekomart-root .rts-grocery-feature-area .row > [class*='col-']
  > .single-shopping-card-one .thumbnail-preview img,
.ekomart-root .single-shopping-card-one.discount-offer .thumbnail-preview img {
  width: 148px !important;
  height: 148px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}
@media (max-width: 575.98px) {
  .ekomart-root .rts-grocery-feature-area .row > [class*='col-']
    > .single-shopping-card-one .thumbnail-preview img,
  .ekomart-root .single-shopping-card-one.discount-offer .thumbnail-preview img {
    width: 112px !important;
    height: 112px !important;
  }
}

/* ตัวนับกับปุ่มควรอยู่ติดกันเป็นกลุ่มเดียว
   ธีมตั้ง justify-content: space-between ทำให้ปุ่มถูกดันไปสุดขอบขวา
   ห่างจากตัวนับ 320px บนการ์ดกว้าง ๆ ดูเหมือนคนละส่วนกัน */
.ekomart-root .single-shopping-card-one .cart-counter-action.cart-counter-action {
  justify-content: flex-start !important;
  gap: 10px;
}

/* ============================================================================
   ราคาเดิม (ขีดฆ่า) — ให้เส้นอยู่กึ่งกลางตัวอักษรจริง
   ธีมวาดเส้นด้วย ::after { position:absolute; top:50%; width:110% }
   ปัญหา:
     - top:50% คือกึ่งกลาง "กล่อง" ไม่ใช่กึ่งกลางสายตาของตัวเลข
       (กล่องสูงตาม line-height ซึ่งมีที่ว่างสำหรับ ascender/descender)
     - width:110% + left:-5% เดาความยาวเอง ยาวเกินตัวเลขเมื่อข้อความสั้น/ยาวต่างกัน
   ใช้ text-decoration จริงแทน เบราว์เซอร์จะวางเส้นตาม font metrics ให้เอง
   และยาวพอดีข้อความเสมอ
   ========================================================================== */
.ekomart-root .price-area .previous::after,
.ekomart-root .single-shopping-card-one .body-content .price-area .previous::after,
.ekomart-root .feature-product-list-wrapper .single-product-list .body-content .price-area .previous::after {
  display: none !important;
  content: none !important;
}
.ekomart-root .price-area .previous,
.ekomart-root .single-shopping-card-one .body-content .price-area .previous {
  text-decoration: line-through !important;
  text-decoration-color: #74787c !important;
  text-decoration-thickness: 1px !important;
  /* ไม่ให้เส้นขาดตรงหางตัวอักษร จะได้เป็นเส้นเดียวต่อเนื่อง */
  text-decoration-skip-ink: none !important;
}

/* ============================================================================
   ตัวนับจำนวน — รูปแบบเดียวกันทั้งเว็บ:  [ −    1    + ]
   ----------------------------------------------------------------------------
   เดิมการ์ดสินค้าใช้คนละแบบกับหน้ารายละเอียด/ควิกวิว
   (ตัวเลขซ้าย + ลูกศรขึ้นลงซ้อนกันขวา คั่นด้วยเส้น) อ่านยากกว่าและกดพลาดง่าย
   ปรับ markup ให้ทุกที่เป็น  ปุ่มลบ → ช่องตัวเลข → ปุ่มบวก  เรียงตรงกันใน DOM
   ลำดับ Tab จึงตรงกับลำดับที่ตาเห็น (WCAG 2.4.3 Focus Order)
   ========================================================================== */

/* ---- แถวควบคุมในการ์ด: ตัวนับ + ปุ่มเพิ่ม ยืดเต็มแถวด้วยกัน ---- */
.ekomart-root .single-shopping-card-one .cart-counter-action.cart-counter-action {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  /* การ์ดแนวนอนกว้างได้ถึง 618px ถ้าปล่อยอิสระปุ่ม "เพิ่ม" จะยืดถึง 450px
     ดูเหมือนแถบยาวมากกว่าปุ่ม — จำกัดกลุ่มควบคุมไว้ให้ได้สัดส่วนที่อ่านออก */
  max-width: 420px !important;
}
.ekomart-root .single-shopping-card-one .cart-counter-action.cart-counter-action
  .quantity-edit.quantity-edit {
  flex: 1 1 45% !important;
  width: auto !important;
  min-width: 96px !important;
  max-width: 168px !important;
}
.ekomart-root .single-shopping-card-one .cart-counter-action.cart-counter-action
  .rts-btn.rts-btn {
  flex: 1 1 55% !important;
  width: auto !important;
  /* พอให้ข้อความ "เพิ่ม" + ไอคอนตะกร้าอยู่ครบในการ์ดที่แคบที่สุด (แถว 170px) */
  min-width: 64px !important;
  max-width: none !important;
}

/* ---- กรอบตัวนับ (ใช้ร่วมกันทุกหน้า) ---- */
.ekomart-root .single-shopping-card-one .cart-counter-action .quantity-edit.quantity-edit,
.ekomart-root .rts-cart-area .quantity .quantity-edit,
.ekomart-root .ekomart-pdp-info__actions .quantity-edit,
.ekomart-root .ekomart-qv__actions .quantity-edit {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--k-line, #e3e6e8) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

/* ---- ปุ่ม − และ + ---- */
.ekomart-root .single-shopping-card-one .cart-counter-action .quantity-edit .button,
.ekomart-root .rts-cart-area .quantity .quantity-edit .button,
.ekomart-root .ekomart-pdp-info__actions .quantity-edit .button,
.ekomart-root .ekomart-qv__actions .quantity-edit .button {
  /* 34px ปกติ — ยอมหดลงได้ถึง 24px (เกณฑ์เป้าคลิก WCAG 2.5.8) บนการ์ดที่แคบจริง ๆ
     ถ้าล็อกตายที่ 34px กรอบจะล้นแล้วโดน overflow:hidden ตัดหัวลูกศรทิ้ง */
  flex: 0 1 34px !important;
  width: 34px !important;
  min-width: 24px !important;
  max-width: 34px !important;
  height: 100% !important;
  min-height: 100% !important;
  align-self: stretch !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--k-muted, #6e777d) !important;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ekomart-root .single-shopping-card-one .cart-counter-action .quantity-edit .button i,
.ekomart-root .rts-cart-area .quantity .quantity-edit .button i,
.ekomart-root .ekomart-pdp-info__actions .quantity-edit .button i,
.ekomart-root .ekomart-qv__actions .quantity-edit .button i {
  /* ธีมตั้ง border-right ไว้ที่ตัวไอคอน เกิดเป็นขีดสั้นค้างกลางกรอบ */
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: inherit !important;
}
.ekomart-root .single-shopping-card-one .cart-counter-action .quantity-edit .button:hover,
.ekomart-root .rts-cart-area .quantity .quantity-edit .button:hover,
.ekomart-root .ekomart-pdp-info__actions .quantity-edit .button:hover,
.ekomart-root .ekomart-qv__actions .quantity-edit .button:hover {
  background: var(--k-primary-soft, #eaf7fe) !important;
  color: var(--k-ink, #0e3550) !important;
}
.ekomart-root .quantity-edit .button:disabled,
.ekomart-root .quantity-edit .button[disabled] {
  opacity: .38 !important;
  cursor: not-allowed;
  background: transparent !important;
}

/* ---- ช่องตัวเลข: อยู่กึ่งกลาง กินพื้นที่ที่เหลือ ---- */
.ekomart-root .single-shopping-card-one .cart-counter-action .quantity-edit .input,
.ekomart-root .rts-cart-area .quantity .quantity-edit .input,
.ekomart-root .ekomart-pdp-info__actions .quantity-edit .input,
.ekomart-root .ekomart-qv__actions .quantity-edit .input {
  /* flex-basis 0 สำคัญ — ถ้าใช้ auto เบราว์เซอร์จะคิดความกว้างตั้งต้นของ
     <input type="text"> ที่ ~170px ทำให้ทั้งแถวล้นแล้วบีบปุ่ม −/+ จนเหลือขนาดต่ำสุด
     ตั้งเป็น 0 แล้วให้ช่องตัวเลขรับเฉพาะพื้นที่ที่เหลือจริง ๆ */
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 24px !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 2px !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center !important;
  /* 16px กัน iOS ซูมเข้าเองตอนโฟกัส */
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: var(--k-ink, #0e3550) !important;
  outline: none;
}

/* ---- ปุ่มเพิ่ม: สูงเท่าตัวนับทุกขนาดจอ ---- */
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.add-to-card,
.ekomart-root .single-shopping-card-one .cart-counter-action .rts-btn.btn-primary.add-to-cart {
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 10px !important;
}

/* ---- จอโทรศัพท์: ปุ่มเป็นไอคอน 44px ตัวนับกินที่เหลือทั้งหมด ---- */
@media (max-width: 575.98px) {
  .ekomart-root .single-shopping-card-one .cart-counter-action.cart-counter-action {
    max-width: none !important;
  }
  .ekomart-root .single-shopping-card-one .cart-counter-action.cart-counter-action
    .rts-btn.rts-btn {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }
  .ekomart-root .single-shopping-card-one .cart-counter-action.cart-counter-action
    .quantity-edit.quantity-edit {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  /* การ์ดบนจอโทรศัพท์เดิมเว้นขอบข้างละ 15px จากการ์ดกว้าง 164px
     เหลือเนื้อที่ใช้งานแค่ 134px — ลดเป็น 8px คืนความกว้างให้แถวควบคุม 14px */
  .ekomart-root .single-shopping-card-one {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* ---- ฐานเดียวกันสำหรับตัวนับทุกตัวที่ไม่ได้อยู่ในการ์ด
   (หน้ารายละเอียด, ควิกวิว, แถบล่างติดหน้าจอ, ตะกร้า)
   ระบุคลาสซ้ำเพื่อยกน้ำหนักให้ชนะกฎเดิมของธีมที่เจาะจงกว่า ---- */
.ekomart-root .quantity-edit.quantity-edit {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--k-line, #e3e6e8) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-sizing: border-box !important;
}
.ekomart-root .quantity-edit.quantity-edit .button {
  flex: 0 1 34px !important;
  width: 34px !important;
  min-width: 24px !important;
  max-width: 34px !important;
  height: 100% !important;
  align-self: stretch !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--k-muted, #6e777d) !important;
  cursor: pointer;
}
.ekomart-root .quantity-edit.quantity-edit .button i {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: inherit !important;
}
.ekomart-root .quantity-edit.quantity-edit .button:hover {
  background: var(--k-primary-soft, #e1f5fe) !important;
  color: var(--k-ink, #0e3550) !important;
}
.ekomart-root .quantity-edit.quantity-edit .input {
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 24px !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 2px !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: var(--k-ink, #0e3550) !important;
  outline: none;
}
/* ตัวนับนอกการ์ดไม่ต้องยืดเต็มแถว — กว้างพอดีเนื้อหา */
.ekomart-root .ekomart-pdp-info__actions .quantity-edit.quantity-edit,
.ekomart-root .ekomart-qv__actions .quantity-edit.quantity-edit,
.ekomart-root .ekomart-pdp-bottom-action .quantity-edit.quantity-edit,
.ekomart-root .rts-cart-area .quantity-edit.quantity-edit {
  width: 124px !important;
  min-width: 124px !important;
  max-width: 124px !important;
  flex: 0 0 124px !important;
}