/* =========================================================================
   Floating language switcher — shared by the Next.js storefront AND the
   multilingual static pages. Self-contained: no dependency on ancient.css
   or i18n.css variables, so it can be injected into either host page.

   Desktop: a clearly visible vermilion pill, bottom-right.
   RTL: mirrored to the bottom-left.
   Mobile: collapses to a 52px round globe button.
   Every language option is a real <a href>; JS only toggles the panel.
   ========================================================================= */
.su-lang{
  --su-red:#9c2b25;
  --su-red-dark:#7d1f1b;
  --su-gold:#c9a45c;
  --su-cream:#f8f1de;
  --su-paper:#fbf7ed;
  --su-ink:#2f2a22;
  --su-line:#ddd0b4;
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:2147483000;
  font-family:Georgia,"Times New Roman","Noto Serif",serif;
  font-size:14px;
  line-height:1.35;
  direction:ltr;
  text-align:left;
}
[dir="rtl"] .su-lang{right:auto;left:24px;direction:rtl;text-align:right}

/* ---- collapsed pill ------------------------------------------------- */
.su-lang .su-lang-fab{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  box-sizing:border-box;
  min-height:50px;
  padding:0 18px 0 15px;
  margin:0 0 0 auto;
  border:1px solid var(--su-gold);
  border-radius:999px;
  background:var(--su-red);
  color:var(--su-cream);
  box-shadow:0 6px 22px rgba(60,20,16,.30),0 0 0 4px rgba(201,164,92,.13);
  font-family:Georgia,"Times New Roman","Noto Serif",serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:.045em;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
  -webkit-appearance:none;
  appearance:none;
}
.su-lang .su-lang-fab:hover{
  background:var(--su-red-dark);
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(60,20,16,.34),0 0 0 4px rgba(201,164,92,.20);
}
.su-lang .su-lang-fab:focus-visible{outline:3px solid var(--su-gold);outline-offset:3px}
.su-lang .su-lang-curflag{width:26px;height:26px;flex:0 0 auto;border-radius:50%;box-shadow:0 0 0 1px rgba(248,241,222,.6)}
.su-lang .su-lang-caret{width:11px;height:11px;flex:0 0 auto;opacity:.85;transition:transform .18s ease}
.su-lang.open .su-lang-caret{transform:rotate(180deg)}
.su-lang .su-lang-name{display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis}
/* small gold dot: quietly signals "more options" without animation noise */
.su-lang .su-lang-dot{width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:var(--su-gold)}

/* ---- expanded panel ------------------------------------------------- */
.su-lang .su-lang-panel{
  display:none;
  position:absolute;
  right:0;
  bottom:66px;
  box-sizing:border-box;
  width:min(340px,calc(100vw - 48px));
  padding:20px 20px 16px;
  background:var(--su-paper);
  border:1px solid var(--su-gold);
  border-radius:6px;
  box-shadow:0 18px 52px rgba(47,42,34,.30);
  color:var(--su-ink);
}
[dir="rtl"] .su-lang .su-lang-panel{right:auto;left:0}
.su-lang.open .su-lang-panel{display:block}
.su-lang .su-lang-panel::after{
  content:"";position:absolute;right:26px;bottom:-7px;width:12px;height:12px;
  background:var(--su-paper);border-right:1px solid var(--su-gold);
  border-bottom:1px solid var(--su-gold);transform:rotate(45deg);
}
[dir="rtl"] .su-lang .su-lang-panel::after{right:auto;left:26px}
.su-lang .su-lang-panel h3{margin:0 0 3px;font-size:19px;font-weight:600;color:var(--su-ink);letter-spacing:.01em}
.su-lang .su-lang-panel .su-lang-sub{margin:0 0 15px;font-size:11px;color:#8a7c65;letter-spacing:.09em;text-transform:uppercase}
.su-lang .su-lang-list{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px}
.su-lang .su-lang-list a{
  display:block;padding:9px 10px;font-size:14px;line-height:1.3;
  border-inline-start:2px solid transparent;color:var(--su-ink);
  text-decoration:none;border-radius:2px;background:transparent;
}
.su-lang .su-lang-list a:hover{background:#f1e8d6;text-decoration:none;color:var(--su-ink)}
.su-lang .su-lang-list a[aria-current="true"]{
  border-inline-start-color:var(--su-red);background:#f1e8d6;
  font-weight:700;color:var(--su-red);
}
.su-lang .su-lang-list a[aria-current="true"]::after{content:" ✓";font-size:11px}

/* ---- expanded panel: eight ROUND FLAG buttons (4 x 2) -------------- */
.su-lang .su-lang-list.su-flag-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 4px;text-align:center}
.su-lang .su-lang-list.su-flag-grid a{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  min-width:0;padding:5px 1px;border-inline-start:0;border:0;
  background:transparent;font-size:11px;line-height:1.25;border-radius:4px;
}
.su-lang .su-lang-list.su-flag-grid a img{
  width:44px;height:44px;border-radius:50%;
  box-shadow:0 0 0 2px rgba(201,164,92,.45);
  transition:transform .18s ease,box-shadow .18s ease;
}
.su-lang .su-lang-list.su-flag-grid a span{
  display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.su-lang .su-lang-list.su-flag-grid a:hover{background:transparent;color:var(--su-ink)}
.su-lang .su-lang-list.su-flag-grid a:hover img{transform:scale(1.1);box-shadow:0 0 0 2px var(--su-red)}
.su-lang .su-lang-list.su-flag-grid a[aria-current="true"]{background:transparent;border:0;color:var(--su-red);font-weight:700}
.su-lang .su-lang-list.su-flag-grid a[aria-current="true"]::after{content:""}
.su-lang .su-lang-list.su-flag-grid a[aria-current="true"] img{box-shadow:0 0 0 2px var(--su-red),0 3px 10px rgba(156,43,37,.22)}

/* ---- persistent flag row on the Next.js storefront ------------------
   Injected into the old .era-discovery slot (two round shortcuts).
   The theme gives .era-discovery > a a column layout, which we reuse.
   -------------------------------------------------------------------- */
.era-discovery.su-flags-bar{
  display:flex;align-items:flex-start;justify-content:center;
  flex-wrap:wrap;gap:12px 18px;padding:18px 20px 16px;
  overflow:visible;max-width:1280px;margin:0 auto;
  border-bottom:1px solid #e6dcc4;
  font-family:Georgia,"Times New Roman",serif;
}
.era-discovery.su-flags-bar>a.su-flag{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:0 0 auto;min-width:64px;gap:6px;text-decoration:none;text-align:center;
  color:#2f2a22;font-size:11px;letter-spacing:.02em;font-weight:400;
}
.era-discovery.su-flags-bar>a.su-flag span{white-space:nowrap;line-height:1.2}
.era-discovery.su-flags-bar>a.su-flag img{
  display:block;width:46px;height:46px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px rgba(201,164,92,.55);
  transition:transform .18s ease,box-shadow .18s ease;
}
.era-discovery.su-flags-bar>a.su-flag:hover img{transform:scale(1.1);box-shadow:0 0 0 2px var(--su-red)}
.era-discovery.su-flags-bar>a.su-flag[aria-current="true"] img{box-shadow:0 0 0 2px var(--su-red),0 4px 12px rgba(156,43,37,.25)}
.era-discovery.su-flags-bar>a.su-flag[aria-current="true"] span{color:var(--su-red);font-weight:700}
/* The two obsolete round shortcuts ("Silk Accessories" / "Shop all").
   Our injected <div class="era-discovery su-flags-bar"> is exempt. */
.era-discovery:not(.su-flags-bar){display:none!important}
.era-discovery-old{display:none!important}
.su-lang .su-lang-note{
  margin:14px 0 0;padding-top:11px;border-top:1px solid var(--su-line);
  font-size:11px;line-height:1.5;color:#9b8d74;
}

/* ---- mobile: round globe only --------------------------------------- */
@media(max-width:640px){
  .su-lang{right:14px;bottom:14px}
  [dir="rtl"] .su-lang{right:auto;left:14px}
  .su-lang .su-lang-fab{width:52px;min-height:52px;height:52px;padding:0;border-radius:50%}
  .su-lang .su-lang-fab .su-lang-name,
  .su-lang .su-lang-fab .su-lang-caret,
  .su-lang .su-lang-fab .su-lang-dot{display:none}
  .su-lang .su-lang-curflag{width:28px;height:28px}
  .su-lang .su-lang-panel{bottom:64px;width:min(320px,calc(100vw - 28px))}
  .su-lang .su-lang-list.su-flag-grid a img{width:38px;height:38px}
}
@media(prefers-reduced-motion:reduce){
  .su-lang .su-lang-fab,.su-lang .su-lang-caret{transition:none}
}