/* KnotNLoop site navigation — design F (desktop) + H (phone) — and the
   site-wide capsule shape for everything you press (bottom of file). ------

   Desktop: a three-column bar with the logo
   centred and the links split either side. "Shop" opens a small dropdown of
   the three categories on hover or keyboard focus — pure CSS, no script.

   Phone (760px and below): the split links hide, the logo stays centred,
   and an app-style tab bar is pinned to the bottom of the screen with a
   raised WhatsApp button in the middle, so ordering is one tap away from
   anywhere on the page. Journal, About and Instagram stay in the footer.

   Class names are all sn-* (site nav), so nothing here collides with the design
   system's .nav rules or the home hero's knl-* classes (it already owns
   .knl-nav, for its arrow buttons).
--------------------------------------------------------------------------- */

.sn-nav{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;
  padding:18px 40px;border-bottom:2px solid var(--color-divider);background:var(--color-bg);
  position:relative;z-index:30;font-family:var(--font-body)
}
.sn-side{display:flex;align-items:center;gap:8px}
.sn-right{justify-content:flex-end}
.sn-link{
  font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--color-accent-700,#4c5a3b);
  padding:10px 18px;border-radius:999px;border:1.5px solid var(--color-accent-300,#c1cdaf);white-space:nowrap;
  transition:background-color .15s ease,border-color .15s ease
}
.sn-link:hover{background:var(--color-accent-100,#eff2ea);border-color:var(--color-accent-400,#9cae85)}
.sn-link[aria-current="page"]{font-weight:700;background:var(--color-accent-200,#dce3d1);border-color:var(--color-accent-300,#c1cdaf)}

.sn-logo{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--color-text)}
.sn-logo img{display:block;width:44px;height:32px}
/* The two rings are the official mark. The name is set in a flowing script
   to match the lettering on the banner artwork, with a small tagline under
   it; the font is fetched for just these nine letters (text= in the link). */
.sn-word{display:flex;flex-direction:column;align-items:center;gap:3px}
.sn-name{font-family:"Dancing Script",var(--font-heading),cursive;font-weight:700;font-size:34px;line-height:1;color:var(--color-accent-700,#4c5a3b)}
.sn-tag{font-family:var(--font-body);font-weight:600;font-size:10px;letter-spacing:.24em;text-transform:uppercase;line-height:1;color:var(--color-accent-500,#6f8257)}

.sn-wa{
  font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:#1a2012;background:var(--color-accent-500,#6f8257);border:2px solid var(--color-accent-500,#6f8257);padding:10px 20px;border-radius:999px;margin-left:8px;white-space:nowrap
}
.sn-wa:hover{background:var(--color-accent-400,#9cae85);border-color:var(--color-accent-400,#9cae85)}

/* Shop dropdown */
.sn-drop{position:relative;display:flex}
.sn-drop>.sn-link::after{
  content:"";display:inline-block;width:6px;height:6px;margin:0 0 3px 8px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg)
}
.sn-menu{
  position:absolute;top:100%;left:0;width:min(660px,calc(100vw - 32px));margin-top:14px;padding:14px;border-radius:18px;
  background:#fbfaf8;border:1.5px solid var(--color-accent-200,#dce3d1);box-shadow:0 20px 44px rgba(32,30,29,.14);
  display:flex;flex-direction:column;visibility:hidden;opacity:0;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s
}
/* Bridges the gap between the link and the panel so the pointer can cross it. */
.sn-menu::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
/* Opening: hover and keyboard focus only where there is a real pointer. On
   a touchscreen a tap fakes a hover and the tap also follows the Shop link,
   so the menu flickered and the page changed underneath it. There,
   site-nav.js opens it on the first tap instead (html[data-sn-shop]). */
@media (hover:hover){
  .sn-drop:hover>.sn-link,.sn-drop:focus-within>.sn-link{background:var(--color-accent-100,#eff2ea);border-color:var(--color-accent-400,#9cae85)}
  .sn-drop:hover .sn-menu,.sn-drop:focus-within .sn-menu{
    visibility:visible;opacity:1;transform:none;transition:opacity .16s ease,transform .16s ease
  }
}
html[data-sn-shop="open"] .sn-drop>.sn-link{background:var(--color-accent-100,#eff2ea);border-color:var(--color-accent-400,#9cae85)}
html[data-sn-shop="open"] .sn-menu{
  visibility:visible;opacity:1;transform:none;transition:opacity .16s ease,transform .16s ease
}
/* A compact mega-menu: one column per collection, its sub-categories under a
   linked header, and a full-width "shop all" foot. The whole list is written
   from catalogue.js by tools/build_nav.py, so it never drifts from the shop. */
.sn-menu a{text-decoration:none;color:var(--color-text)}
.sn-menu a:focus-visible{outline:2px solid var(--color-accent-500,#6f8257);outline-offset:2px}
.sn-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.sn-col{display:flex;flex-direction:column;min-width:0}
/* A hairline between columns, so three read as three without shouting. */
.sn-col + .sn-col{border-left:1px solid color-mix(in srgb,var(--color-text) 12%,transparent);padding-left:6px}

/* Collection header — the column title, linking to the whole collection, with
   its piece count. */
.sn-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:6px 10px 8px;margin-bottom:4px;border-radius:10px 10px 0 0;
  border-bottom:1px solid color-mix(in srgb,var(--color-text) 14%,transparent)
}
.sn-head-l{font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--color-accent-700,#4c5a3b)}
.sn-head:hover,.sn-head:focus-visible{background:var(--color-accent-100,#eff2ea)}

/* Sub-category row — thumbnail, short label, count. */
.sn-sub{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px}
.sn-sub:hover,.sn-sub:focus-visible{background:var(--color-accent-100,#eff2ea)}
.sn-sub img{width:34px;height:34px;object-fit:cover;display:block;flex:none;border-radius:50%}
.sn-sub-l{flex:1 1 auto;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Piece counts: muted, tabular, out of the way. The header count carries a
   middot so it reads "For the home · 13"; the row count is a bare number. */
.sn-ct{font-size:12.5px;flex:none;color:color-mix(in srgb,var(--color-text) 58%,transparent);font-variant-numeric:tabular-nums}
.sn-head .sn-ct::before{content:"· "}

.sn-menu .sn-all{
  display:block;text-align:center;font-size:14px;font-weight:600;color:var(--color-accent-700,#4c5a3b);
  border-top:1px solid color-mix(in srgb,var(--color-text) 16%,transparent);
  margin-top:10px;padding:12px 10px 6px;border-radius:0 0 12px 12px
}
.sn-menu .sn-all:hover,.sn-menu .sn-all:focus-visible{background:var(--color-accent-100,#eff2ea)}

/* Tablet / short-and-wide touch screens (the nav has wrapped to a centred
   pill row here): three columns can run off the side, so stack them to one,
   headers kept, and pull the panel narrow enough to sit fully on screen. */
@media (max-width:1200px){
  .sn-menu{width:min(320px,calc(100vw - 32px))}
  .sn-cols{grid-template-columns:1fr;gap:2px}
  .sn-col + .sn-col{border-left:0;padding-left:0;margin-top:2px}
}

/* Phone tab bar — hidden on desktop */
.sn-tabbar{display:none}

/* Too narrow for logo-between-links: logo on its own centred row, the
   pills centred in a row beneath it. */
@media (max-width:1200px){
  .sn-nav{display:flex;flex-wrap:wrap;justify-content:center;row-gap:14px;column-gap:6px;padding:16px 20px}
  .sn-logo{order:-1;flex-basis:100%;flex-direction:row;justify-content:center;gap:10px}
  .sn-logo img{width:34px;height:25px}
  .sn-name{font-size:30px}
  .sn-side{gap:6px}
  .sn-link,.sn-wa{letter-spacing:.04em;font-size:12.5px}
  .sn-link{padding:8px 14px}
  .sn-wa{padding:9px 16px;margin-left:0}
}

/* Phones, and phones held sideways (a wide but short touch screen, where
   the two-row desktop nav would eat a third of the height). */
@media (max-width:760px),(hover:none) and (max-height:500px){
  .sn-nav{grid-template-columns:1fr;justify-items:center;padding:14px 20px}
  .sn-side{display:none}
  .sn-logo{flex-direction:row;gap:10px}
  .sn-logo img{width:30px;height:22px}
  .sn-name{font-size:27px}
  .sn-tag{display:none}

  .sn-tabbar{
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:6px 6px calc(10px + env(safe-area-inset-bottom));
    background:#fbfaf8;border-top:2px solid var(--color-divider);font-family:var(--font-body)
  }
  .sn-tabbar a{
    display:flex;flex-direction:column;align-items:center;gap:4px;min-height:52px;justify-content:flex-end;
    font-size:11.5px;text-decoration:none;color:var(--color-accent-700,#4c5a3b)
  }
  .sn-tabbar a[aria-current="page"]{font-weight:700}
  .sn-tabbar a[aria-current="page"] .sn-ico{background-color:var(--color-accent-700,#4c5a3b)}
  .sn-tabbar a[aria-current="page"] .sn-pill{background:var(--color-accent-200,#dce3d1)}
  .sn-pill{display:flex;align-items:center;justify-content:center;width:46px;height:30px;border-radius:999px}
  .sn-tab-wa{font-weight:700}
  .sn-tab-wa .sn-pill{
    width:56px;height:56px;border-radius:50%;margin-top:-28px;background:var(--color-accent-500,#6f8257);
    box-shadow:0 6px 16px rgba(111,130,87,.4)
  }
  .sn-tab-wa .sn-ico{background-color:#fff}

  /* Keep the fixed bar from covering the end of the page. Several pages pin
     html and body to height:100% and let content overflow, which puts this
     padding one screen down instead of after the footer, so the body is
     let grow with its content here. (:root / html body outrank the pages'
     own html,body rule, which loads after this file.) */
  :root,html body{height:auto;min-height:100%}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* Tab-bar icons: stroke drawings used as masks, so they take the text colour. */
.sn-ico{
  display:block;width:22px;height:22px;background-color:var(--color-accent-700,#4c5a3b);
  -webkit-mask:var(--sn-i) center/contain no-repeat;mask:var(--sn-i) center/contain no-repeat
}
.sn-i-home{--sn-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 11 12 4l8 7v9h-5v-6H9v6H4z'/%3E%3C/svg%3E")}
.sn-i-shop{--sn-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.5 12h-11zM9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E")}
.sn-i-wa{--sn-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.3-3.9A8 8 0 1 1 8 19.1L4 20Z'/%3E%3C/svg%3E")}
.sn-i-custom{--sn-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20 14 10M14 10l3-6 3 3-6 3M4 20l3-1'/%3E%3C/svg%3E")}
.sn-i-reviews{--sn-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 4l2.4 5 5.4.6-4 3.7 1.1 5.3L12 16l-4.9 2.6 1.1-5.3-4-3.7 5.4-.6z'/%3E%3C/svg%3E")}

/* Capsules: everything you press is rounded, to match the nav pills.
   Photos, cards, image frames, section rules, form fields and the labels
   set on photos stay square — the rounding marks what is clickable. */
/* html-prefixed: the design system's stylesheet is injected after this one,
   so a bare .btn / .seg rule would lose to its own. */
html .btn{border-radius:999px;justify-content:center;text-align:center}
/* A capsule needs room at its ends, or the label touches the curve. */
html .btn:not(.btn-icon){padding-left:20px;padding-right:20px}
html .seg{border-radius:999px}
html .seg-opt:first-child{padding-left:16px}
html .seg-opt:last-child{padding-right:16px}
.chip{border-radius:999px}
.chip-dot{border-radius:50%}
.stepper{border-radius:999px;overflow:hidden}
button.tag{border-radius:999px;padding-inline:14px}
.gal-arrow,.knl-nav{border-radius:50%}

/* Heading scale, one for the whole site. -----------------------------------
   Each page set its own headline sizes inline (h1 up to 58px, closing
   panels up to 46px) and read as shouting. These cap them. !important and
   the html prefix are needed to beat the inline styles and each page's own
   mobile !important rules. Every page title (h1) gets the same size; the
   h2/h3 rules only shrink the big ones, so smaller headings (journal card
   titles, form sub-heads) are left alone. Each size match is
   written with and without a space: the rendered DOM has "font-size: 38px". */
html h1{font-size:clamp(28px,1.6vw + 17px,40px)!important;line-height:1.1!important}
html h2:not([style*="font-size:23px"]):not([style*="font-size: 23px"]){font-size:clamp(22px,.8vw + 15px,27px)!important;line-height:1.15!important}
html h3[style*="font-size:3"],html h3[style*="font-size:4"],html h3[style*="font-size: 3"],html h3[style*="font-size: 4"]{font-size:clamp(23px,1vw + 16px,30px)!important;line-height:1.15!important}

/* Phones held sideways: a slim one-line tab bar. -----------------------------
   The upright bar (stacked icon + label, raised WhatsApp circle) is ~88px,
   a quarter of a 390px-tall landscape screen before the browser's own bars.
   Here it becomes one 44px row, icon beside label, WhatsApp a plain capsule,
   and site-nav.js slides it away while scrolling down and back on the way
   up (html[data-sn-bar="hidden"]). */
@media (hover:none) and (max-height:500px){
  .sn-tabbar{
    display:flex;justify-content:center;align-items:center;gap:4px;
    padding:4px max(12px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
    transition:transform .22s ease
  }
  .sn-tabbar a{flex-direction:row;justify-content:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;font-size:13px}
  .sn-pill,.sn-tab-wa .sn-pill{width:auto;height:auto;margin:0;background:none;box-shadow:none}
  .sn-tabbar a[aria-current="page"] .sn-pill{background:none}
  .sn-tabbar a[aria-current="page"]{background:var(--color-accent-200,#dce3d1)}
  .sn-ico{width:18px;height:18px}
  .sn-tab-wa{background:var(--color-accent-500,#6f8257);color:#1a2012!important;margin:0 6px}
  .sn-tab-wa .sn-ico{background-color:#1a2012}
  html[data-sn-bar="hidden"] .sn-tabbar{transform:translateY(110%)}
  body{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
}