/* MDIX Kafe Sentosa — audit fixes */

/* "Sliders" menu only lists the theme seller's slider demos. */
.menu-item-has-children:has(> .sub-menu a[href="vertical-parallax-slider.html"]) {
  display: none !important;
}

/* Scroll-in animations (smoove) left headings half-moved or hidden when the page is scrolled
   quickly or captured; show them in their final place. */
[data-settings*='"craftcoffee_ext_is_smoove":"true"'] {
  transform: none !important;
  opacity: 1 !important;
}

/* Indonesian "Promo" badge is wider than "Sale!". */
.woocommerce span.onsale,
span.onsale {
  width: auto !important;
  min-width: 0 !important;
  padding: 0 8px !important;
  white-space: nowrap;
}

/* Keep the header phone number on one line. */
a[href^="tel:"] .elementor-button-text {
  white-space: nowrap;
  letter-spacing: 1px;
}

/* ---- Design QA 2026-10-12 ---- */

/* Shop: the product grid was hidden on phones (elementor-hidden-phone), leaving the
   "Kunjungi Toko" banner with nothing under it. Show it, and replace the float grid
   (first/last clears built for 3 columns broke into ragged rows at 2 columns) with CSS grid. */
@media (max-width: 767px) {
  .elementor .elementor-element-d7723e8.elementor-hidden-phone { display: block !important; }
}
@media (max-width: 1024px) {
  .woocommerce-grid-container ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 32px 24px;
  }
  .woocommerce-grid-container ul.products::before,
  .woocommerce-grid-container ul.products::after { display: none !important; }
  .woocommerce-grid-container ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
  }
}
@media (max-width: 599px) {
  .woocommerce-grid-container ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  #page-content-wrapper .woocommerce-grid-container ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 22px;
    line-height: 1.2;
    margin-top: 12px;
    margin-bottom: 6px;
  }
  #page-content-wrapper .woocommerce-grid-container ul.products li.product .price { font-size: 14px; }
}

/* Touch screens have no hover: the "Pilih Varian / Tambah ke Keranjang" button stayed invisible
   (opacity 0) but still took ~100px of height under every card. Show it, compact. */
@media (hover: none) {
  #page-content-wrapper .woocommerce-grid-container ul.products li.product a.button.ajax_add_to_cart,
  #page-content-wrapper .woocommerce-grid-container ul.products li.product .product_type_variable.add_to_cart_button {
    opacity: 1;
    transform: none;
    font-size: 15px;
    line-height: 1.3;
    padding: 12px 8px;
    min-height: 44px;
  }
}

/* Touch targets: phone menu toggle, header search, social icons, phone link (44px hit area,
   negative margins keep the visual layout where it was). */
.elementor_mobile_nav .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  margin: -12px;
}
.craftcoffee-search-icon > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: -6px -13px;
}
.elementor-social-icons-wrapper .elementor-social-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  padding: 12px !important;
  margin: -12px !important;
}
.elementor-social-icons-wrapper .elementor-grid-item:not(:last-child) .elementor-social-icon,
.elementor-social-icons-wrapper > .elementor-social-icon:not(:last-child) { margin-right: 8px !important; }
#elementor-header a[href^="tel:"].elementor-button {
  padding-top: 11px !important;
  padding-bottom: 11px !important;
  margin-top: -11px;
  margin-bottom: -11px;
}
a.elementor-button[href*="instagram.com"] { min-height: 44px; display: inline-flex; align-items: center; }

/* Phone menu: the close control was an invisible full-screen layer; show an X on it. */
#btn-close-mobile-menu.open::after {
  content: "\00d7";
  position: fixed;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  line-height: 42px;
  text-align: center;
  font-size: 32px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 50%;
}

/* Phones: "MDIX Kafe Sentosa" banner title touched the screen edges at 390px. */
@media (max-width: 420px) {
  .elementor-element-25a1057 .elementor-heading-title { font-size: 48px; }
}

/* Phones: footer info box sat 10px from the screen edge; use the 16px gutter. */
@media (max-width: 767px) {
  #footer-wrapper .elementor-element-7e367f8 { margin-left: 6px !important; margin-right: 6px !important; width: auto !important; }
}

/* Inner pages: blog category links (15px tall), contact buttons with no padding, slider arrows. */
.post-info-cat a,
li.cat-item > a { display: inline-block; padding: 6px 0; min-height: 24px; min-width: 24px; }
a.elementor-button[href^="tel:"]:not(#elementor-header *),
a.elementor-button[href^="mailto:"] { min-height: 24px; display: inline-flex; align-items: center; }
.floating-btn.js-slider-home-prev,
.floating-btn.js-slider-home-next { min-width: 44px; min-height: 44px; }

/* Subscription prices: "Rp" was uppercased to "RP" and the amount broke inside the box. */
.pricing-plan-price { text-transform: none !important; white-space: nowrap; }
@media (min-width: 1025px) { .pricing-plan-price { font-size: 58px !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .pricing-plan-price { font-size: 40px !important; } }

/* Phone menu: the header phone number and social icons are hidden below 768px, so the phone
   menu repeats them (call / reserve / social), with 44px targets. */
.mdix-mobile-contact {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.mdix-mobile-contact a { color: #000; text-decoration: none; }
.mdix-mobile-contact__phone,
.mdix-mobile-contact__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  letter-spacing: 1px;
}
.mdix-mobile-contact__phone { font-weight: 700; white-space: nowrap; }
.mdix-mobile-contact__social { display: flex; gap: 4px; margin-left: -10px; }
.mdix-mobile-contact__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 20px;
}
/* hide it while a submenu (drill-down) is open */
#mobile_main_menu.mobile-nav-out ~ .mdix-mobile-contact { display: none; }

/* Timeline (vertical swiper) arrows were 20x20: 44px hit area, same visual centre. */
.timeline .swiper-button-prev,
.timeline .swiper-button-next {
  width: 44px !important;
  height: 44px !important;
  margin: -12px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Slider demo pages: pagination dots were 14-20px; 24px hit area, dot looks the same. */
.swiper-pagination-bullet { box-sizing: content-box; padding: 5px; background-clip: content-box; }
.slick-dots li button { min-width: 24px; min-height: 24px; }
@media (hover: none) and (max-width: 599px) {
  #page-content-wrapper .woocommerce-grid-container ul.products li.product a.button.ajax_add_to_cart,
  #page-content-wrapper .woocommerce-grid-container ul.products li.product .product_type_variable.add_to_cart_button {
    font-size: 13px;
    letter-spacing: 0.5px;
    padding: 12px 4px;
  }
}

/* Contrast (WCAG AA): the tan accent #c7a17a is 2.3:1 on the cream page background.
   On light sections use a darker shade of the same brown (#8c6239, 5.1:1); tan stays on photos. */
.elementor-element-efe116b .elementor-heading-title,   /* index: "Daftar" */
.elementor-element-e3d5380 .elementor-heading-title,   /* index: "Lihat" */
.elementor-element-0a2fa18 .elementor-heading-title,   /* home-3: "Discover" */
.elementor-element-e758095 .elementor-heading-title,   /* home-8: "Customer" */
.elementor-element-fad1c51 .elementor-heading-title,
.elementor-element-c0a5183 .elementor-heading-title,
.elementor-element-aa42434 .elementor-heading-title,   /* coffee-subscriptions labels */
.elementor-element-43333f3 .elementor-accordion-title,
.elementor-element-1e185e5 a,
.elementor-element-b6abc35 a { color: #8c6239 !important; }
/* white text on tan buttons → darker brown button */
.elementor-element-501979f .pricing-plan-button.button,
.elementor-element-147a53e .elementor-button { background-color: #8c6239 !important; border-color: #8c6239 !important; }
/* white text on tan bands (home-2/home-5) → near-black text */
.elementor-element-94710fc .elementor-heading-title,
.elementor-element-6f63d75 h4,
.elementor-element-7e63ac1 h4 { color: #1b1b1b !important; }
/* struck-through old menu prices: #989898 → #6e6e6e (4.8:1) */
.food-menu-content-price-sale { color: #5f5f5f !important; }

/* Transparent header over photos: the navy "Kafe Sentosa" line of the logo disappeared on dark
   heroes and white menu text was weak on light photos. Light halo on the logo glyphs and a soft
   dark gradient behind the header bar (logo file itself unchanged). */
.elementor-element-a216edb img[src*="logo_white"] {
  filter: drop-shadow(0 0 1px rgba(255, 251, 242, 0.95)) drop-shadow(0 0 3px rgba(255, 251, 242, 0.7));
}
.elementor-section.elementor-element-a216edb {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)) !important;
}