/* ==========================================================================
   REGION SWITCHER
   Added August 2026. Three properties share one artist and one shop, so every
   page needs a route between them. Tokens only, no raw colour values.

   One file, three properties. An identical copy sits at /assets/css/ on the
   UK site, the NL site and the Global site, so the switcher cannot drift
   apart between them.

   The current region is filled with Golden Amber rather than outlined,
   because an outline reads as "press me" and the whole point of the current
   one is that you are already there.
   ========================================================================== */
.region{
  display:inline-flex;align-items:stretch;line-height:1;
  border:1px solid var(--stitch);border-radius:999px;overflow:hidden;
  background:color-mix(in srgb,var(--espresso) 5%,transparent);
}
@supports not (background:color-mix(in srgb,white 50%,transparent)){
  .region{background:transparent}
}
.region a{
  display:inline-flex;align-items:center;padding:8px 14px;
  font-family:'Jost',Verdana,sans-serif;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--espresso);text-decoration:none;border-bottom:none;
  transition:background-color .18s ease,color .18s ease;
}
.region a + a{border-left:1px solid var(--stitch)}
.region a:hover,.region a:focus-visible{
  background:color-mix(in srgb,var(--accent) 22%,transparent);
  color:var(--espresso);border-bottom:none;
}
.region a[aria-current="true"]{
  background:var(--accent);color:var(--je-plum-deep);font-weight:800;cursor:default;
}
.region a[aria-current="true"]:hover{background:var(--accent)}
.region a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Dark grounds. The footer base is deep plum, so the outline and the two
   inactive labels lift to Warm Sand. The mobile menu on this build is a light
   cream panel, not a dark one, so it keeps the default light ground colours
   and only gains room and a larger tap target. */
.fbase .region{border-color:rgba(227,176,164,.30);background:transparent}
.fbase .region a{color:var(--sand)}
.fbase .region a + a{border-left-color:rgba(227,176,164,.30)}
.fbase .region a[aria-current="true"]{background:var(--accent);color:var(--je-plum-deep)}

.mobilemenu .region{margin-top:16px;border-color:var(--stitch)}
.mobilemenu .region a{
  padding:11px 16px;font-size:.64rem;border-bottom:none;
  /* stated rather than inherited, because the NL and Global stylesheets
     carry an older rule that paints these Warm Sand for a dark panel */
  color:var(--espresso);
}
.mobilemenu .region a + a{border-left-color:var(--stitch)}
.mobilemenu .region a[aria-current="true"]{background:var(--accent);color:var(--je-plum-deep)}

/* The UK menu is ten items plus a bag and a call to action. Measured against
   the real build, the row only clears three more segments above 1600px, which
   leaves every ordinary laptop with a wrapped wordmark and a clipped Global.
   So the desktop switcher lives in the announcement strip directly above the
   menu instead, where there is room on every page and at every width.
   Below the burger breakpoint the mobile menu carries it, and the footer
   carries it everywhere. */

.region{flex:0 0 auto;white-space:nowrap}

.announce{position:relative}
.announce .region{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  border-color:rgba(227,176,164,.30);background:transparent;
}
.announce .region a{
  color:var(--sand);border-bottom:none;margin-left:0;
  padding:6px 12px;font-size:.56rem;
}
.announce .region a + a{border-left-color:rgba(227,176,164,.30)}
.announce .region a:hover,.announce .region a:focus-visible{
  background:color-mix(in srgb,var(--accent) 22%,transparent);
  color:var(--blush);border-bottom:none;
}
.announce .region a[aria-current="true"]{
  background:var(--accent);color:var(--je-plum-deep);
}
.announce .region a[aria-current="true"]:hover{background:var(--accent)}

/* The strip is centred text. Once the message and the switcher would meet,
   the switcher steps out and the mobile menu and footer carry it. */
@media(max-width:1120px){.announce .region{display:none}}