/* Tablet and mobile adjustments for the KingdomXchange pages. */
img,svg,video{max-width:100%}

/* ---------- Tablet (up to 1100px) ---------- */
@media (max-width:1100px){
  .wrap{padding-left:20px!important;padding-right:20px!important}
  /* top strip: hide the long tagline */
  header>div:first-child>.wrap>span:first-child{display:none!important}
  header>div:first-child>.wrap{justify-content:flex-end!important}
  /* category nav: single swipeable row */
  header>div:nth-child(3)>.wrap{flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important}
  header>div:nth-child(3)>.wrap::-webkit-scrollbar{display:none!important}
  header>div:nth-child(3)>.wrap>*{flex-shrink:0!important;white-space:nowrap!important}
  header>div:nth-child(3)>.wrap>span:last-child{display:none!important}
  h1[style*="font-size: 54px"],h1[style*="font-size: 56px"],h1[style*="font-size: 60px"]{font-size:44px!important}
}

/* ---------- Mobile (up to 767px) ---------- */
@media (max-width:767px){
  .wrap{padding-left:16px!important;padding-right:16px!important}
  header>div:first-child{display:none!important}
  /* main bar: logo + actions on top, search full width below */
  header>div:nth-child(2)>.wrap{gap:8px 4px!important;padding-top:10px!important;padding-bottom:12px!important;justify-content:space-between!important}
  header>div:nth-child(2)>.wrap>a.brand img{height:30px!important}
  header>div:nth-child(2)>.wrap>a:not(.brand){display:none!important}
  header>div:nth-child(2)>.wrap>div[style*="flex: 1 1 380px"]{order:3!important;flex:1 1 100%!important;height:42px!important}
  header>div:nth-child(2)>.wrap>div[style*="flex: 1 1 380px"]>select{width:92px!important;font-size:12px!important;padding-left:8px!important;padding-right:4px!important}
  header>div:nth-child(2)>.wrap>nav{flex-wrap:nowrap!important;gap:0!important}
  header>div:nth-child(2)>.wrap>nav>a{padding:4px 6px!important}
  header>div:nth-child(2)>.wrap>nav>a>span:not([style*="position"]){display:none!important}
  header>div:nth-child(2)>.wrap>nav>a>span[style*="position"]~*{display:none!important}
  header>div:nth-child(2)>.wrap>nav>a:not(:has(svg)) span:first-child{display:none!important}
  header>div:nth-child(2)>.wrap>nav>a:not(:has(svg)) span:last-child{display:inline!important;font-size:13px!important}
  header>div:nth-child(2)>.wrap>nav .cur-btn{padding-left:6px!important;padding-right:6px!important}
  header>div:nth-child(2)>.wrap>nav .cur-btn>span>span:first-child{display:none!important}

  /* type scale */
  h1{font-size:clamp(28px,8.5vw,38px)!important;line-height:1.1!important}
  h2[style*="font-size: 3"],h2[style*="font-size: 4"]{font-size:26px!important}
  h2[style*="font-size: 2"]{font-size:22px!important}

  /* hero/sections with large side padding for carousel arrows */
  [style*="padding: 0 64px"],[style*="padding: 0px 64px"]{padding-left:8px!important;padding-right:8px!important}
  [style*="padding: 48px"]{padding:24px!important}
  [style*="padding: 32px"]{padding:20px!important}
  [style*="padding: 40px"]{padding:22px!important}

  /* product gallery: thumbnails go in a row under the image */
  [style*="flex-direction: column"]:has(> button > img),[style*="flex-direction: column"]:has(> button > svg){flex-direction:row!important;overflow-x:auto!important}

  /* tables scroll sideways rather than squash */
  table{display:block!important;overflow-x:auto!important;white-space:nowrap!important}
  /* fixed-width sidebars fill the screen */
  aside,[style*="width: 300px"],[style*="width: 280px"],[style*="width: 260px"],[style*="width: 320px"]{width:100%!important;max-width:100%!important}
  [style*="flex: 0 0 300px"],[style*="flex: 0 0 280px"],[style*="flex: 0 0 260px"],[style*="flex: 0 0 320px"],[style*="flex: 0 0 360px"],[style*="flex: 0 0 380px"]{flex:1 1 100%!important}
  input,select,textarea{font-size:16px!important}
}
@media (max-width:767px){
  main aside{flex:1 1 100%!important;min-width:0!important;order:2!important}
}
@media (max-width:1100px){
  /* product gallery: thumbnails in a row under the main image */
  main div[style*="flex: 1 1 420px"]>div:not([style*="order: 2"]){flex-direction:row!important;flex:1 1 100%!important;order:3!important;overflow-x:auto!important}
}
@media (max-width:767px){
  /* hero slider: use the dots below the slide instead of side arrows */
  button[aria-label="Previous slide"],button[aria-label="Next slide"]{display:none!important}
}