/* The Koleksiyon menu: the trigger in the header nav and the panel
   collection-menu.js hangs under the bar. The trigger dresses like the nav
   links beside it (font and colour are inherited from the nav; the accent
   underline is its own), the panel takes the header's material through
   header-style.css and the paper tokens through theme.css, so it follows
   the owner's Özelleştirme choices. The wrapper is the veil: it reaches from
   the bar to the bottom of the screen and closes the menu when pressed. */
.collection-menu-trigger { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 10px 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; white-space: nowrap; cursor: pointer; }
.collection-menu-trigger svg { width: 11px; height: 11px; flex: 0 0 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 180ms ease; }
.collection-menu-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.collection-menu-trigger::after { content: ''; position: absolute; left: 0; right: 18px; bottom: 7px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 180ms ease; }
.collection-menu-trigger:hover::after, .collection-menu-trigger[aria-expanded="true"]::after { transform: scaleX(1); }
/* Beside links that turn accent on hover (the home and information
   headers) the trigger does the same; the product page's links keep their
   ink and mark the current one with a text underline, so there the trigger
   underlines the same way when open and drops the bar. */
.desktop-nav .collection-menu-trigger:hover, .info-header .collection-menu-trigger:hover { color: var(--accent); }
.pp-header .collection-menu-trigger::after { display: none; }
.pp-header .collection-menu-trigger[aria-expanded="true"] { text-decoration: underline; text-underline-offset: 7px; text-decoration-color: var(--accent-rule); }
/* Open, the product page's header rises above its fixed purchase bar (z 22)
   and storage note (z 25), which would otherwise paint over the panel. */
.pp-header.has-open-menu { z-index: 30; }

.collection-menu { position: absolute; top: 100%; left: calc(-1 * var(--collection-menu-left, 0px)); width: var(--collection-menu-width, 100%); height: calc(100vh - var(--collection-menu-top, 0px)); height: calc(100dvh - var(--collection-menu-top, 0px)); z-index: 30; background: rgb(34 35 31 / 0); transition: background 220ms ease; }
.collection-menu.is-open { background: rgb(34 35 31 / .16); }
.collection-menu[hidden] { display: none !important; }
/* Closing (or not yet open) the veil lets presses through to the page; only an open menu catches them. */
.collection-menu:not(.is-open) { pointer-events: none; }
.collection-menu-panel { position: relative; box-sizing: border-box; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 24px var(--collection-menu-pad-right, 28px) 24px var(--collection-menu-pad-left, 28px); background: var(--theme-paper); color: #22231f; border-bottom: 1px solid rgb(var(--theme-line-rgb) / .6); box-shadow: 0 32px 48px -32px rgb(34 35 31 / .35); opacity: 0; transform: translateY(-8px); transition: opacity 200ms ease, transform 240ms cubic-bezier(.22, 1, .36, 1); }
.collection-menu.is-open .collection-menu-panel { opacity: 1; transform: none; }

.collection-menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(150px, .8fr); gap: 28px clamp(24px, 3.4vw, 56px); align-items: start; }
.collection-menu-column { min-width: 0; }
.collection-menu-title { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid rgb(var(--theme-line-rgb) / .7); font-size: 12px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; line-height: 1.4; color: var(--accent-strong); }
.collection-menu-list [data-collection-all] { font-weight: 500; }
/* A category with nothing in it yet: named, muted, no door. */
.collection-menu-column.is-empty .collection-menu-title { color: #606353; }
.collection-menu-empty { margin: 0; padding: 10px 0; font-size: 13px; color: #606353; }
/* The store's other doors stand apart from the categories: a rule on the
   left, the title in the ink rather than the accent. */
.collection-menu-explore { padding-left: clamp(18px, 2.4vw, 32px); border-left: 1px solid rgb(var(--theme-line-rgb) / .7); }
.collection-menu-explore .collection-menu-title { border-bottom: 0; padding-bottom: 0; margin-bottom: 4px; color: #606353; }
.collection-menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.collection-menu-list a { display: flex; align-items: baseline; gap: 9px; min-height: 44px; padding: 10px 0; font-size: 14px; line-height: 1.5; color: inherit; text-decoration: none; transition: color 160ms ease; }
.collection-menu-list a:hover { color: var(--accent-strong); }
.collection-menu-list a span { font-size: 11px; color: #606353; font-variant-numeric: tabular-nums; }
/* The information header colours any hovered link; a tile's name stays ink. */
.collection-menu-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; margin-top: 20px; padding-top: 14px; border-top: 1px solid rgb(var(--theme-line-rgb) / .6); font-size: 12px; color: #606353; }
.collection-menu-all { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--accent-strong); font-size: 13px; font-weight: 500; text-decoration: none; }
.collection-menu-all span { transition: transform 160ms ease; }
.collection-menu-all:hover span { transform: translateX(3px); }

/* The phone menu on the home page carries the same links as a group. */
.mobile-nav-group { display: grid; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--accent-line); }
.mobile-nav-title { display: block; padding: 8px 0 2px; font-size: 10px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: var(--accent-strong); }

@media (max-width: 1180px) { .collection-menu-grid { gap: 24px 28px; } }
@media (max-width: 960px) {
  .collection-menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .collection-menu-explore { grid-column: 1 / -1; padding-left: 0; padding-top: 18px; border-left: 0; border-top: 1px solid rgb(var(--theme-line-rgb) / .7); }
}
@media (max-width: 760px) { .collection-menu-trigger, .collection-menu { display: none !important; } }
/* Four entries share the header with its centred wordmark. */
body.v4 .desktop-nav, .pp-header > nav, .info-header > nav { gap: clamp(14px, 1.8vw, 28px); }
body > header .store-nav-link { white-space: nowrap; font-weight: 600; }
@media (min-width: 761px) and (max-width: 1100px) {
  body.v4 .desktop-nav, .pp-header > nav, .info-header > nav { gap: 12px; font-size: 12px; }
  .pp-header > nav a { font-size: 12px; }
}
@media (max-width: 760px) {
  .pp-header > nav .store-nav-link { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .collection-menu, .collection-menu-panel, .collection-menu-trigger svg, .collection-menu-trigger::after, .collection-menu-list a, .collection-menu-all span { transition: none; }
  .collection-menu-panel { transform: none; }
  .collection-menu-all:hover span { transform: none; }
}