/* ============================================================
   GOLDEN ROSE — site header
   ------------------------------------------------------------
   One header for every page. The homepage used to render this
   markup inline with generic class names (.header, .nav, .wrap);
   away from the homepage Shoptimizer and Elementor style those
   same names, so everything here is prefixed gr- and nothing in
   this file relies on the homepage stylesheet being loaded.

   Values are the homepage design, unchanged — only the selectors
   are namespaced.
   ============================================================ */

.gr-shell {
  --gr-ink: #201A1C;
  --gr-ink-70: #5C5153;
  --gr-ink-45: #8C8385;
  --gr-rose: #B75563;
  --gr-wine: #7C2433;
  --gr-crimson: #C4162C;
  --gr-blush: #F3E4E2;
  --gr-gold: #B08D57;
  --gr-line: #E7DDDA;

  --gr-container: 1320px;
  --gr-gutter: clamp(20px, 4vw, 48px);
  --gr-radius: 2px;
  --gr-shadow: 0 18px 40px -28px rgba(32, 26, 28, .45);

  font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gr-ink);
  -webkit-font-smoothing: antialiased;
}

.gr-shell *,
.gr-shell *::before,
.gr-shell *::after { box-sizing: border-box; }

.gr-shell img { max-width: 100%; display: block; }
.gr-shell a { color: inherit; text-decoration: none; }
.gr-shell button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.gr-shell :focus-visible { outline: 2px solid var(--gr-gold); outline-offset: 3px; }

.gr-sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.gr-wrap {
  max-width: var(--gr-container);
  margin-inline: auto;
  padding-inline: var(--gr-gutter);
}

/* ---------- Utility strip ---------- */
.gr-utility { background: var(--gr-wine); color: #fff; }
.gr-utility .gr-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 38px;
}
.gr-utility ul { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.gr-utility li {
  display: flex; align-items: center; gap: 7px;
  font-size: .75rem; color: rgba(255, 255, 255, .9);
}
.gr-utility svg { flex: none; opacity: .8; }

/* ---------- Header bar ---------- */
.gr-header {
  position: sticky; top: 0; z-index: 60;
  background: #fff; border-bottom: 1px solid var(--gr-line);
}
.gr-header__main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
  padding-block: 18px;
}

.gr-logo { display: flex; align-items: center; gap: 12px; }
.gr-logo__img { width: auto; height: 34px; display: block; }
.gr-logo__type {
  font-weight: 500; font-size: 1rem; letter-spacing: .26em;
  text-transform: uppercase; line-height: 1; padding-top: 2px;
}

.gr-search { position: relative; display: flex; align-items: center; }
.gr-search input {
  width: 100%; height: 46px; padding: 0 96px 0 42px;
  border: 1px solid var(--gr-line); border-radius: var(--gr-radius);
  background: #FCF8F6; font: inherit; font-size: .875rem; color: inherit;
}
.gr-search input::placeholder { color: var(--gr-ink-45); }
.gr-search input:focus { outline: none; border-color: var(--gr-gold); background: #fff; }
.gr-search__icon { position: absolute; left: 15px; color: var(--gr-ink-45); pointer-events: none; }
.gr-search__go {
  position: absolute; right: 6px; height: 34px; padding: 0 14px;
  background: var(--gr-ink); color: #fff; font-weight: 500; font-size: .6875rem;
  letter-spacing: .12em; text-transform: uppercase; border-radius: var(--gr-radius);
}

.gr-tools { display: flex; align-items: center; gap: 4px; }
.gr-tool {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border-radius: var(--gr-radius); transition: background .18s ease;
}
.gr-tool:hover { background: var(--gr-blush); }
.gr-tool span { font-size: .8125rem; }
.gr-tool__badge { position: relative; display: flex; }
.gr-tool__count {
  position: absolute; top: -6px; right: -8px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--gr-rose); color: #fff; border-radius: 99px;
  font-style: normal; font-size: .625rem; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Department bar ---------- */
.gr-nav { border-top: 1px solid var(--gr-line); }
.gr-nav .gr-wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.gr-nav__list {
  display: flex; align-items: center;
  gap: clamp(14px, 2vw, 30px);
  margin: 0; padding: 0; list-style: none;
}
.gr-nav__item { position: relative; }
.gr-nav__list > li > a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 0; font-size: .8125rem; letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: border-color .18s ease;
}
.gr-nav__list > li > a:hover { border-color: var(--gr-gold); }
.gr-nav__list > li > a.is-sale { color: var(--gr-crimson); }

/* ---------- Sub-category panel ----------
   Shown on hover and on keyboard focus anywhere inside the item, so
   tabbing through the bar opens the same panel a mouse does. It is
   kept in the layout with visibility rather than display:none so the
   fade can run and so the links stay focusable in the same order. */
.gr-nav__panel {
  position: absolute; top: 100%; left: -18px; z-index: 70;
  min-width: 232px; padding: 8px;
  background: #fff;
  border: 1px solid var(--gr-line);
  border-radius: var(--gr-radius);
  box-shadow: var(--gr-shadow);
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.gr-nav__item:hover > .gr-nav__panel,
.gr-nav__item:focus-within > .gr-nav__panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.gr-nav__panel ul { display: block; margin: 0; padding: 0; list-style: none; }
.gr-nav__panel li { display: block; }
.gr-nav__panel a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 11px; border-radius: var(--gr-radius); border-bottom: 0;
  font-size: .8125rem; letter-spacing: .02em; text-transform: none;
  color: var(--gr-ink);
}
.gr-nav__panel a:hover { background: var(--gr-blush); }
.gr-nav__panel a:focus-visible { outline: 2px solid var(--gr-gold); outline-offset: -2px; }
.gr-nav__count { font-size: .6875rem; color: var(--gr-ink-45); flex: none; }

@media (prefers-reduced-motion: reduce) {
  .gr-nav__panel { transition: none; }
}

/* ---------- Language switcher ---------- */
.gr-lang { position: relative; display: flex; align-items: center; gap: 8px; }
.gr-lang > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  list-style: none; padding: 6px 0;
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gr-ink-70);
}
.gr-lang > summary::-webkit-details-marker { display: none; }
.gr-lang > summary::after {
  content: ""; width: 6px; height: 6px; margin-left: 2px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.gr-lang[open] > summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.gr-lang > summary:focus-visible { outline: 2px solid var(--gr-gold); outline-offset: 3px; }
.gr-lang__menu {
  position: absolute; right: 0; top: 100%; z-index: 70;
  display: block; margin: 0; padding: 6px; list-style: none;
  min-width: 210px;
  background: #fff; border: 1px solid var(--gr-line);
  border-radius: var(--gr-radius); box-shadow: var(--gr-shadow);
}
.gr-lang__menu li { display: block; }
.gr-lang__menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--gr-radius); border-bottom: 0;
  font-size: .8125rem; letter-spacing: .04em; text-transform: none;
  color: var(--gr-ink);
}
.gr-lang__menu a:hover { background: var(--gr-blush); }
.gr-lang__menu a:focus-visible { outline: 2px solid var(--gr-gold); outline-offset: -2px; }
.gr-lang .gr-flag { width: 18px; height: 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  /* The search drops to its own row, which leaves the tools sharing a
     row with the logo — pin them to the right rather than letting them
     sit against it. */
  .gr-header__main { grid-template-columns: auto 1fr; gap: 20px; }
  .gr-search { order: 3; grid-column: 1 / -1; }
  .gr-tools { justify-self: end; }
}

@media (max-width: 760px) {
  .gr-nav__list { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .gr-nav__list::-webkit-scrollbar { display: none; }
  .gr-utility li:nth-child(n+2) { display: none; }

  /* Drop the "Konto" and cart-total labels, keep the icons. The badge
     is itself a span, so hiding every span here took the cart icon
     with it. */
  .gr-tool > span:not(.gr-tool__badge) { display: none; }

  /* No hover on touch, and a panel anchored to a horizontally
     scrolling row would be clipped by its own overflow. The
     department link goes to the archive, which lists the same
     sub-categories. */
  .gr-nav__panel { display: none; }
}

/* ============================================================
   Suppressing the Shoptimizer header
   ------------------------------------------------------------
   Its hooked output is unhooked in gr-fixes.php, so no duplicate
   search, cart or nav reaches the DOM. header.php still prints the
   empty wrappers, which keep borders and min-heights from the theme
   stylesheet — collapse them.
   ============================================================ */
body.gr-has-header #masthead.site-header,
body.gr-has-header .col-full-nav,
body.gr-has-header .shoptimizer-header-wrapper {
  display: none !important;
}

/* ---------- Department bar on phones ----------
   The language switcher shares the row, so the scrolling department list
   was 219px of a 375px screen: ACCESSOIRES was cut mid-word and Nägel,
   Lippen, Düfte and Haut sat off-screen with no arrow or fade to say the
   row scrolled at all — four of seven departments unreachable in practice.
   Wrapping to two rows shows all seven; the tighter type and padding keep
   the extra row to about 40px. */
@media (max-width: 760px) {
  .gr-nav .gr-wrap { gap: 12px; }

  .gr-nav__list {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    overflow: visible;
    gap: 6px 16px;
  }

  .gr-nav__list > li > a {
    padding: 9px 0;
    font-size: .75rem;
    letter-spacing: .1em;
  }

  .gr-lang { align-self: flex-start; margin-top: 4px; }
}

/* On phones the language switcher shows its flag only. "Deutsch (Österreich)"
   took 114px and pushed the two-row department bar to three rows on
   goldenrose.at; the summary keeps its aria-label ("Sprache wählen"), so the
   control is still announced. */
@media (max-width: 760px) {
  .gr-lang > summary { font-size: 0; gap: 0; }
}

/* ============================================================
   Mobile test 2026-09-24
   ============================================================ */

/* iOS Safari zooms the page into any field set below 16px when it is
   tapped, and leaves it zoomed. The search sits on its own row from
   1024px down, so it has the width for the larger type. */
@media (max-width: 1024px) {
  .gr-search input { font-size: 16px; }
}

/* Type-ahead. CommerceKit only attaches to a search field inside
   .widget_search, which the form now carries (header.php); it then appends
   its results box to the form with an inline pixel width measured once at
   load. Anchor the box under the field at the field's width instead. */
.gr-search .commercekit-ajs-results {
  top: calc(100% + 4px); left: 0; right: 0; z-index: 80;
  width: auto !important;
  max-height: min(70vh, 540px);
  background: #fff;
  box-shadow: var(--gr-shadow);
}
.gr-search .commercekit-ajs-suggestions { width: auto !important; }

/* The header was 261px on an iPhone 15, 40% of the first screen: on a
   product page the title, price and add-to-cart only began on the second
   screen. Same content, less air: about 205px. */
@media (max-width: 760px) {
  .gr-utility .gr-wrap { min-height: 30px; }
  .gr-header__main { padding-block: 10px 12px; gap: 10px 16px; }
  .gr-logo__img { height: 30px; }

  /* Placeholder room: the SUCHEN label becomes an arrow. The text stays in
     the DOM as the button's accessible name; the keyboard's own search key
     submits as well. */
  .gr-search input { height: 44px; padding-right: 52px; }
  /* .gr-search prefix: ".gr-shell button" (0,1,1) outranks a lone class. */
  .gr-search .gr-search__go {
    width: 40px; height: 34px; padding: 0;
    font-size: 0; letter-spacing: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .gr-search .gr-search__go::before {
    content: ""; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* Two rows of departments, 35px targets each, no gap between the rows. */
  .gr-nav__list { gap: 0 16px; }
  .gr-nav__list > li > a { padding: 7px 0; }

  /* The flag was a 16x24 target. */
  .gr-lang { margin-top: 0; }
  .gr-lang > summary { min-width: 44px; min-height: 40px; justify-content: flex-end; }
}