/* SJH Funky Readers — additive Mahardhi adjustments, v1 / 13 November 2026.
   Load after the theme stylesheet. Remove this include to roll back. */
header a:focus-visible, header button:focus-visible,
#topCategoryList [role="button"]:focus-visible,
#content a:focus-visible, #content button:focus-visible,
#content select:focus-visible, #content input:focus-visible {
  outline: 3px solid #00a4e4;
  outline-offset: 3px;
}
/* Existing custom headings use a fixed 30px/0px line-height. */
.welcome-to-funkyreaders h1 { line-height: 1.15; overflow-wrap: break-word; }
.welcome-to-funkyreaders h2 { line-height: 1.4; }
.cat-description { overflow-wrap: anywhere; }
.cat-description img { max-width: 100%; height: auto; }
.cat-description h1, .cat-description h2, .cat-description h3 { line-height: 1.3; }
.slideshow picture.sjh-izipizi-picture { display: block; }
.slideshow picture.sjh-izipizi-picture > img { display: block; width: 100%; height: auto; }

@media (max-width: 991px) {
  header .header-top { gap: 10px; }
  header .header-center, header .header-right { min-width: 0; }
  header .header-center { flex: 1 1 auto; text-align: left; }
  header .header-links { flex: 0 0 auto; }
  header #logo img { max-width: 100%; width: 120px; height: auto; }
  header .btn_search { width: auto; }
  header .btn_search .search-btn, header #header_ac > a,
  header #cart > .btn, #menu #btnMenuBar {
    min-width: 44px; min-height: 44px; padding: 10px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  header #cart > .btn { width: 44px; }
  header .header-search { z-index: 12; padding: 12px 48px 12px 16px; }
  header #search { min-width: 0; }
  header #search input { min-width: 0; font-size: 16px; min-height: 44px; }
  header #search button { min-width: 44px; min-height: 44px; }
  header .header-search .serach-close {
    min-width: 44px; min-height: 44px; right: 0; top: 0;
    display: flex; align-items: center; justify-content: center;
  }
  header #cart .dropdown-menu { width: min(350px, calc(100vw - 24px)); max-width: calc(100vw - 24px); }
  /* Preserve Mahardhi's box-menu/slideToggle behaviour and link destinations. */
  #menu #topCategoryList {
    max-width: min(350px, 90vw); height: 100vh; height: 100dvh;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  #menu #topCategoryList .menu-close { min-height: 52px; align-items: center; }
  #menu #topCategoryList .menu-close .icon-close {
    display: inline-flex; min-width: 44px; min-height: 44px;
    align-items: center; justify-content: center;
  }
  #menu #topCategoryList .nav > li > a,
  #menu #topCategoryList .dropdown-inner li > a {
    min-height: 44px; padding: 11px 54px 11px 15px;
    line-height: 1.5; font-size: 14px; white-space: normal;
    color: #222 !important;
  }
  #menu #topCategoryList .dropdown-menu,
  #menu #topCategoryList .dropdown-inner,
  #menu #topCategoryList .dropdown-submenu .sub-menu {
    background: #fff !important; width: auto; min-width: 0; max-width: 100%;
  }
  /* Inline header CSS otherwise opens every third-level submenu on mobile.
     A theme slideToggle writes an inline style, which continues to take precedence. */
  #menu #topCategoryList .dropdown-submenu > .sub-menu:not([style]) { display: none; }
  #menu #topCategoryList li > .toggle-menu {
    width: 44px; min-height: 44px; padding: 0; top: 0; right: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: #222; cursor: pointer;
  }
  #menu #topCategoryList a:focus-visible { outline-offset: -3px; }
}

@media (max-width: 767px) {
  /* Swiper 3 adds its autoheight CSS class only during initialisation.
     Our existing slider is enhanced later, so remove the 100% slide height
     explicitly and let updateAutoHeight measure each slide's natural image. */
  .slideshow .sjh-izipizi-slideshow .swiper-slide { height: auto; }
  .slideshow .sjh-izipizi-slideshow .swiper-wrapper { align-items: flex-start; }

  .welcome-to-funkyreaders h1 { font-size: clamp(28px, 7vw, 38px); letter-spacing: normal; }
  .welcome-to-funkyreaders h2 { font-size: 18px; letter-spacing: normal; margin: 12px 0 20px; }
  .welcome-to-funkyreaders p { max-width: 100%; }
  .categories-home span { font-size: 13px !important; line-height: 1.4; min-height: 44px; }
  body[class*="product-category-"] #content .cat_info { padding-bottom: 16px; }
  body[class*="product-category-"] #content .cat_list_gird,
  body[class*="product-category-"] #content .com-total { min-height: 44px; }
  #grid-view.btn-default, #list-view.btn-default { min-width: 44px; min-height: 44px; margin: 0; }
  #compare-total.btn.btn-link { min-height: 44px; padding: 10px 0; }
  .cat-pagination-right { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 15px; }
  .cat-pagination-right > .cat-sort, .cat-pagination-right > .cat-show {
    display: flex; align-items: center; gap: 8px; flex: 1 1 145px;
    width: auto; min-width: 0; padding: 0;
  }
  .cat-pagination-right .show-text { flex: 0 0 auto; padding: 0; }
  .cat-pagination-right .show-select { flex: 1 1 auto; min-width: 0; }
  .cat-pagination-right .form-control { width: 100%; max-width: 100%; min-height: 44px; font-size: 16px; }
  .cat-pagination-right label { white-space: nowrap; }
  .refine-search .cat-name li a { min-height: 44px; padding: 11px 14px; line-height: 1.4; }
  body[class*="product-category-"] .category-row { display: flex; flex-wrap: wrap; }
  body[class*="product-category-"] .category-row > .product-layout { min-width: 0; }
  body[class*="product-category-"] .category-row > .product-grid { width: 50%; display: flex; }
  body[class*="product-category-"] .product-grid .product-thumb { width: 100%; display: flex; flex-direction: column; }
  body[class*="product-category-"] .product-grid .thumb-description { flex: 1 1 auto; }
  .category-row .product-thumb .image { max-width: 100%; }
  .category-row .product-thumb .image img { max-width: 100%; height: auto; }
  .category-row .product-thumb .product-title a { line-height: 1.4; overflow-wrap: anywhere; }
  .category-row .product-thumb .caption .addcart { min-height: 44px; padding: 10px 16px; }
  .category-row .product-grid .product-title { min-height: 2.8em; }
  .cat-description { padding: 16px; }
  .pro_pagination .text-left, .pro_pagination .text-right { float: none; text-align: left; }
  .pagination > li > a, .pagination > li > span { min-width: 44px; min-height: 44px; padding: 11px; }
}
@media (hover: none) and (pointer: coarse) {
  .category-row .product-thumb .image .hover-img { display: none; }
  .category-row .product-thumb:hover .image > a > img:first-child { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #topCategoryList, .header-search, .product-thumb img { transition-duration: .01ms !important; }
}