/* The shared header's states, for the pages build-i18n.js gives their language's
   homepage header (marked data-kit). The homepages carry these rules in their own
   <style>; a page drawn from another canvas, or written by hand, does not.

   hdr-solid is the homepage header once the page has scrolled off its photograph.
   hdr-still is the same look for a page that starts on white: solid from the first
   pixel, and styled separately so a page script toggling hdr-solid on scroll
   cannot turn it transparent. */
#site-header{box-sizing:border-box;transition:background .25s,box-shadow .25s}
#site-header .press{box-shadow:0 3px 0 rgba(10,10,10,.35);transition:transform .1s,box-shadow .1s}
#site-header .press:active{transform:translateY(3px);box-shadow:0 0 0 rgba(10,10,10,.35)}
#site-header .hb{background:#FFFFFF;box-shadow:0 1px 4px rgba(0,0,0,.35);transition:background .25s,box-shadow .25s}
#site-header.hdr-solid,#site-header.hdr-still{background:#F7F5F0!important;box-shadow:0 1px 0 rgba(10,10,10,.07),0 4px 14px rgba(10,10,10,.07)}
#site-header.hdr-solid #lang-btn,#site-header.hdr-still #lang-btn{border-color:#111111!important;color:#111111!important;background:transparent!important;backdrop-filter:none!important}
#site-header.hdr-solid .hb,#site-header.hdr-still .hb{background:#111111!important;box-shadow:none!important}
#site-header.hdr-solid a.press,#site-header.hdr-still a.press{box-shadow:0 3px 0 rgba(10,10,10,.35)!important;background:#111111!important;color:#FFEE00!important}

/* Not the header, but the one stylesheet every page with this card loads. The
   private-trial card (the yellow "5 sessions ฿5,890" box on the private course
   pages and /boxing/, 59 pages in twelve languages) pins the gift photo to its
   top-right corner, 118px wide, and nothing beside it made room: at 360px the
   title ("Private trial · 5 sess…"), the validity line and the struck-through
   regular price all ran underneath the photo — "reg. ฿15,990" was cut off in every
   language, Thai and English included. The title needs a little less room than
   the lines below it, because the photo is tilted: at 390px it still fits on one line.
   The canvas draws the card with inline styles, so this reaches it by those; if a
   redesign changes them the rule simply stops applying. */
div[style*="position:relative;min-height:150px"] > div:not([style*="position:absolute"]){padding-right:118px}
div[style*="position:relative;min-height:150px"] > div[style*="display:flex"]{flex-wrap:wrap;row-gap:2px}
div[style*="position:relative;min-height:150px"] > div[style*="max-width"]{padding-right:110px}