/* KUROTOBIYA Step 31C
   Dynamic-page guard for the two PHP pages only: / and /products.html.
   Do not use this as a global replacement for styles.css. */

:root{--ktb-step31c-content-max:1180px}

/* The mobile-only legacy nav button must not appear. The canonical control is .header-fold-button. */
.menu-toggle{display:none!important;visibility:hidden!important;pointer-events:none!important}

.header-fold-button{pointer-events:auto!important;touch-action:manipulation;-webkit-tap-highlight-color:rgba(242,215,134,.22);position:relative;z-index:5}
.header-fold-control{position:relative;z-index:4}

/* Keep the page position stable when the header is folded, matching the Step 30 final behavior. */
.ktb-front-main,main{position:relative;z-index:1}
body.header-collapsed .ktb-front-main,
body.header-collapsed main{padding-top:var(--header-open-space)!important}

/* Guard the dynamic PHP content against stale or partially cached styles. */
.ktb-front-main>section:not(.page-kv),
main>section:not(.page-kv){max-width:var(--ktb-step31c-content-max);margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}

.ktb-front-main>.hero,
main>.hero{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(320px,.96fr);gap:34px;align-items:center;padding-top:48px;padding-bottom:76px}

.ktb-front-main .hero-visual,
main .hero-visual{min-height:360px;border-radius:28px;display:grid;place-items:center;text-align:center;overflow:hidden}

.ktb-front-main .category-grid,
main .category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}

.ktb-front-main .grid,
main .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:20px;align-items:stretch}

.ktb-front-main .product-card,
main .product-card{min-width:0;display:flex;flex-direction:column;overflow:hidden}

.ktb-front-main .product-card img,
main .product-card img{display:block;width:100%;height:auto;object-fit:cover}

.ktb-front-main .product-body,
main .product-body{display:flex;flex-direction:column;gap:11px;flex:1}

.ktb-front-main .product-body .actions,
main .product-body .actions{margin-top:auto}

.ktb-front-main .filter-form,
main .filter-form{display:grid;grid-template-columns:minmax(0,1fr) 180px auto;gap:10px;align-items:stretch}

.ktb-front-main .filter-form input,
.ktb-front-main .filter-form select,
.ktb-front-main .filter-form button,
main .filter-form input,
main .filter-form select,
main .filter-form button{min-height:52px;max-width:100%}

@media(max-width:900px){
  .ktb-front-main>.hero,
  main>.hero{grid-template-columns:1fr;padding-left:16px;padding-right:16px;padding-top:32px;padding-bottom:54px}
  .ktb-front-main .filter-form,
  main .filter-form{grid-template-columns:1fr}
  .ktb-front-main>section:not(.page-kv),
  main>section:not(.page-kv){padding-left:16px;padding-right:16px}
}

@media(max-width:680px){
  .ktb-front-main .category-grid,
  main .category-grid,
  .ktb-front-main .grid,
  main .grid{grid-template-columns:1fr}
  .ktb-front-main .hero-visual,
  main .hero-visual{min-height:260px}
}

/* Step 31Z: mobile portrait global navigation visibility and readability.
   Keep the canonical header-fold button; do not restore the old hamburger button. */
@media (max-width: 1040px) {
  .site-header .global-nav,
  #site-header .global-nav {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    pointer-events: auto !important;
  }
  .site-header .global-nav-inner,
  #site-header .global-nav-inner {
    overflow: visible !important;
    -webkit-overflow-scrolling: auto !important;
  }
}
@media (max-width: 680px) {
  :root { --header-open-space: 360px; }
  .site-header .global-nav,
  #site-header .global-nav {
    border-top: 1px solid rgba(214,171,72,.25) !important;
    background: linear-gradient(180deg, rgba(5,5,5,.98), rgba(14,12,8,.98)) !important;
    padding: 10px 0 12px !important;
  }
  .site-header .global-nav-inner,
  #site-header .global-nav-inner {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow: visible !important;
  }
  .site-header .global-nav a,
  #site-header .global-nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 9px 10px !important;
    border: 1px solid rgba(214,171,72,.34) !important;
    border-radius: 14px !important;
    background: rgba(214,171,72,.08) !important;
    color: #fffaf0 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    text-decoration: none !important;
  }
  .site-header .global-nav a.active,
  .site-header .global-nav a[aria-current="page"],
  #site-header .global-nav a.active,
  #site-header .global-nav a[aria-current="page"] {
    background: linear-gradient(135deg, var(--gold), var(--gold-2)) !important;
    border-color: rgba(242,215,134,.86) !important;
    color: #111 !important;
  }
  .site-header .global-nav a:focus-visible,
  #site-header .global-nav a:focus-visible {
    outline: 3px solid rgba(242,215,134,.75) !important;
    outline-offset: 2px !important;
  }
  .header-fold-control { min-height: 44px !important; }
}
@media (max-width: 360px) {
  :root { --header-open-space: 410px; }
  .site-header .global-nav-inner,
  #site-header .global-nav-inner {
    grid-template-columns: 1fr !important;
  }
}

/* Step 31Z safety: mobile nav cards must not keep the header tall after folding. */
body.header-collapsed .site-header{
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  overflow:hidden!important;
}
body.header-collapsed .site-header-inner{
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  overflow:hidden!important;
}

/* Step 31Z fallback spacing before JavaScript measures the opened mobile header. */
@media (max-width: 680px) { :root { --header-open-space: 430px; } }
@media (max-width: 360px) { :root { --header-open-space: 525px; } }