/* =================================================================
   SHREE KALAS — THE TOP BAR
   Replaces the fixed left rail. It inverts with html[data-nav-theme],
   set by editions.js from whatever block is currently under it.
   ================================================================= */

.sk-nav{
  position:sticky;top:0;z-index:80;
  background:color-mix(in srgb, var(--sk-paper) 88%, transparent);
  border-bottom:1px solid var(--sk-line);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  transition:background-color .4s var(--sk-ease), border-color .4s var(--sk-ease), color .4s var(--sk-ease);
}
.sk-nav-in{
  max-width:var(--sk-maxw);
  margin-inline:auto;
  display:flex;align-items:center;gap:1.5rem;
  min-height:4.75rem;
  padding-inline:var(--sk-page-pad);
}

.sk-nav-brand{display:block;flex:none}
.sk-nav-brand img{height:4.5rem;width:auto}
.sk-nav-in{min-height:6rem}
@media(max-width:600px){.sk-nav-brand img{height:3.25rem} .sk-nav-in{min-height:4.75rem}}

/* on the home the bar stays out of the first screen and slides in on
   the first scroll (world.js sets html.sk-scrolled past 40px) */
.home-template .sk-nav{
  transform:translateY(-100%);
  opacity:0;
  transition:transform .55s var(--sk-ease), opacity .4s var(--sk-ease), background-color .4s var(--sk-ease), border-color .4s var(--sk-ease), color .4s var(--sk-ease);
}
html.sk-scrolled .home-template .sk-nav{transform:none;opacity:1}
/* Specificity: `.sk-nav-brand img` is (0,1,1), so a bare
   `.sk-logo-dark{display:none}` at (0,1,0) loses and both render. */
.sk-nav-brand .sk-logo-light{display:block}
.sk-nav-brand .sk-logo-dark{display:none}
html[data-nav-theme="dark"] .sk-nav-brand .sk-logo-light{display:none}
html[data-nav-theme="dark"] .sk-nav-brand .sk-logo-dark{display:block}

.sk-nav-edition{
  display:none;
  padding-left:1.5rem;
  border-left:1px solid var(--sk-rule);
  font-family:var(--sk-font-narr);
  font-size:1.0625rem;
  letter-spacing:-.02em;
  opacity:.7;
}
@media(min-width:1080px){.sk-nav-edition{display:block}}

.sk-nav-links{
  display:none;
  margin-left:auto;
  align-items:center;
  gap:1.75rem;
}
@media(min-width:860px){.sk-nav-links{display:flex}}
.sk-nav-links a{
  position:relative;
  padding-block:.375rem;
  font-family:var(--sk-font-ui);
  font-size:.75rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;
  color:inherit;
  opacity:.62;
  transition:opacity .25s var(--sk-ease);
}
.sk-nav-links a:hover{opacity:1}
.sk-nav-links a.is-active{opacity:1}
/* the marker is drawn, not a border: it grows from the left like the
   section rules, so the whole page shares one motion idea */
.sk-nav-links a::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:1px;
  background:var(--sk-copper);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s var(--sk-ease);
}
.sk-nav-links a.is-active::after{transform:scaleX(1)}

/* below 860px the chapter links collapse; the enquiry button stays */
.sk-nav-links + .sk-cart-btn{margin-left:1rem}
@media(max-width:859px){
  .sk-nav-in > .sk-cart-btn{margin-left:auto}
}

/* =================================================================
   INVERSION
   ================================================================= */
html[data-nav-theme="dark"] .sk-nav{
  background:color-mix(in srgb, var(--sk-invert-bg) 88%, transparent);
  border-bottom-color:var(--sk-invert-line);
  color:var(--sk-invert-ink);
}
html[data-nav-theme="dark"] .sk-nav-edition{border-left-color:var(--sk-invert-line)}
html[data-nav-theme="dark"] .sk-nav-links a.is-active::after{background:var(--sk-copper-lt)}

/* the footer lockup and the nav lockup share a size so the brand
   reads at one scale down the page */
.sk-footer-logo{height:3rem}

/* =================================================================
   THE ENQUIRY BUTTON
   ================================================================= */
.sk-cart-btn{
  flex:none;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .75rem;
  border:1px solid currentColor;
  background:transparent;
  color:inherit;
  font-family:var(--sk-font-ui);
  font-size:.6875rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;
  transition:background-color .25s var(--sk-ease), color .25s var(--sk-ease), border-color .25s var(--sk-ease);
}
.sk-cart-btn:hover{background:var(--sk-copper);border-color:var(--sk-copper);color:#fff}
.sk-cart-count{
  min-width:1.25rem;
  padding:.0625rem .25rem;
  border:1px solid currentColor;
  font-size:.625rem;
  font-variant-numeric:tabular-nums;
  text-align:center;
}

/* =================================================================
   SKIP LINK
   ================================================================= */
.sk-skip{
  position:absolute;top:0;left:0;z-index:200;
  transform:translateY(-100%);
  padding:.875rem 1.375rem;
  background:var(--sk-ink);color:var(--sk-paper);
  font-family:var(--sk-font-ui);font-size:.75rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;
  transition:transform .25s var(--sk-ease);
}
.sk-skip:focus-visible{transform:translateY(0)}

/* =================================================================
   THE MOBILE BAR
   Below 860px the chapter links collapse and the enquiry button is
   the only route to a quote. A fixed bottom bar keeps it — and the
   catalogue — one thumb away on every screen.
   ================================================================= */
.sk-mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;gap:.5rem;
  padding:.625rem var(--sk-page-pad) calc(.625rem + env(safe-area-inset-bottom, 0px));
  background:color-mix(in srgb, var(--sk-invert-bg) 92%, transparent);
  border-top:1px solid var(--sk-invert-line);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:var(--sk-invert-ink);
}
@media(min-width:860px){.sk-mobile-bar{display:none}}
.sk-mobile-bar .sk-action{flex:1;justify-content:center;padding-block:.8125rem}
.sk-mobile-bar .sk-action--ghost{border-color:rgba(244,240,230,.4);color:var(--sk-invert-ink)}
.sk-mobile-bar .sk-action--primary{background:var(--sk-copper);border-color:var(--sk-copper);color:#fff}
.sk-mobile-bar .sk-action--primary:hover{background:var(--sk-copper-dk);border-color:var(--sk-copper-dk)}
.sk-mobile-bar .sk-cart-count{margin-left:.25rem}
@media(max-width:859px){.sk-body{padding-bottom:4.5rem}}