/* Parallus header.

   Selectors target Blocksy's real DOM:
     nav[data-id="menu"] > ul.menu > li > ul.sub-menu
   Links are a.ct-menu-link.

   Every menu colour and gap is a --p-menu-* variable set from
   Customizer > Parallus Menu (inc/menu-style.php). Nothing visual here
   is a literal, so restyling never means editing this file. */

:root {
  /* Chevron used for the dropdown caret, as a mask so it pivots cleanly. */
  --p-caret: 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
}

/* ============================================================
   MENU (structure only)

   Colour and typography for the top level, dropdown links and the
   mobile menu are Blocksy's, set in Header > Menu and Header >
   Mobile Menu. Nothing here restates them, so those controls work.

   What stays here is what Blocksy has no concept of: the mega-panel
   layout, and the category title, which Blocksy cannot distinguish
   from an ordinary dropdown link.
   ============================================================ */

[data-id="menu"] > ul.menu { gap: var(--p-menu-item-gap, 28px); }

@media (min-width: 1000px) {

  /* Blocksy sizes dropdown links from --menu-item-padding on .sub-menu.
     Zeroing it here is what gives the panel a shared left edge. */
  [data-id="menu"] > ul.menu > li.menu-item-has-children > ul.sub-menu,
  [data-id="menu"] > ul.menu > li > ul.sub-menu .sub-menu {
    --menu-item-padding: 0;
    --dropdown-items-spacing: 0;
  }

  /* The panel */
  [data-id="menu"] > ul.menu > li.menu-item-has-children > ul.sub-menu {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--p-menu-column-gap, 88px);
    row-gap: 32px;
    width: max-content;
    min-width: 0;
    max-width: min(var(--p-panel-max-width, 900px), calc(100vw - 48px));
    padding: var(--p-panel-pad-y, 42px) var(--p-panel-pad-x, 44px);
    border-radius: var(--p-radius-panel);
    box-shadow: 0 16px 40px rgba(17, 17, 17, var(--p-panel-shadow, 0.10));
    --dropdown-width: auto;
    --dropdown-divider: none;
  }

  /* Columns: title on top, links beneath, one shared left edge. */
  [data-id="menu"] > ul.menu > li.menu-item-has-children > ul.sub-menu > li {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 auto;
    min-width: var(--p-menu-column-min, 168px);
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* Category title. Blocksy has one dropdown font for every level, so
     this role has to live here. */
  [data-id="menu"] .sub-menu > li.parallus-group-heading > a.ct-menu-link {
    font-family: var(--p-font-nav);
    font-weight: var(--p-t-title-weight);
    font-size: var(--p-t-title-size);
    text-transform: var(--p-t-title-transform);
    letter-spacing: var(--p-t-title-tracking);
    color: var(--p-menu-title-color);
    padding: 0 0 var(--p-menu-title-gap, 26px);
    margin: 0;
    text-align: left;
    pointer-events: none;
    cursor: default;
  }

  /* Second level renders inline beneath its title. visibility must
     inherit: a descendant set to visible shows through a hidden
     ancestor, which would leak the links onto the page. */
  [data-id="menu"] > ul.menu > li > ul.sub-menu > li > ul.sub-menu {
    position: static;
    display: block;
    opacity: 1;
    visibility: inherit;
    transform: none;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: 0;
    pointer-events: auto;
  }

  [data-id="menu"] > ul.menu > li > ul.sub-menu > li > ul.sub-menu > li {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
  }

  /* Link spacing only. Colour and font come from Blocksy. */
  [data-id="menu"] > ul.menu > li > ul.sub-menu > li > ul.sub-menu > li > a.ct-menu-link {
    display: inline-block;
    padding: 0 0 var(--p-menu-row-gap, 17px);
    margin: 0;
    text-align: left;
    text-indent: 0;
    border-bottom: calc(var(--p-menu-underline, 0) * 1px) solid transparent;
    transition: border-color var(--p-dur-fast) var(--p-ease);
  }

  [data-id="menu"] > ul.menu > li > ul.sub-menu > li > ul.sub-menu > li > a.ct-menu-link:hover {
    border-bottom-color: currentColor;
  }

  /* No carets or ghost buttons inside the panel. */
  [data-id="menu"] .sub-menu .ct-toggle-dropdown-desktop,
  [data-id="menu"] .sub-menu .ct-toggle-dropdown-desktop-ghost {
    display: none;
  }

  [data-id="menu"] > ul.menu > li.parallus-no-link > a.ct-menu-link { cursor: default; }

  /* A fourth level becomes a side flyout rather than flattening. */
  [data-id="menu"] > ul.menu > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu {
    position: absolute;
    display: block;
    left: 100%;
    top: 0;
    width: max-content;
    padding: 12px 0;
    border-radius: var(--p-radius-panel);
    box-shadow: 0 16px 40px rgba(17, 17, 17, var(--p-panel-shadow, 0.10));
  }

  .p-icons--globe { display: none; }
}

/* ============================================================
   DISCOVER CARET
   Drawn on Blocksy's toggle span, NOT on a::after: Blocksy already
   uses a::after for its menu indicator, so anything put there gets
   absolutely positioned by its rules and disappears.
   Borders rather than a mask, so there is no data-URI or mask
   support to depend on. Rest and hover share one translate and
   differ only in rotation, so the glyph pivots on the spot.
   ============================================================ */

@media (min-width: 1000px) {
  [data-id="menu"] > ul.menu > li.menu-item-has-children > a.ct-menu-link {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
  }

  /* Blocksy's ghost button is not used. */
  [data-id="menu"] > ul.menu > li > .ct-toggle-dropdown-desktop-ghost { display: none !important; }

  [data-id="menu"] > ul.menu > li > a.ct-menu-link .ct-toggle-dropdown-desktop {
    position: relative;
    display: inline-block !important;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    margin: 0 !important;
    --toggle-button-size: 12px;
    --toggle-button-margin-end: 0;
    --toggle-button-margin-start: 0;
  }

  /* Hide the theme's plus glyph; the span is just our container. */
  [data-id="menu"] > ul.menu > li > a.ct-menu-link .ct-toggle-dropdown-desktop svg,
  [data-id="menu"] > ul.menu > li > a.ct-menu-link .ct-toggle-dropdown-desktop .ct-icon {
    display: none !important;
  }

  [data-id="menu"] > ul.menu > li > a.ct-menu-link .ct-toggle-dropdown-desktop::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    margin: 0;
    margin-left: -4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform-origin: 50% 50%;
    transform: translateY(-5.5px) rotate(45deg);
    transition: transform var(--p-dur-fast) var(--p-ease);
  }

  /* Only the rotation changes, so the pivot point never moves. */
  [data-id="menu"] > ul.menu > li.menu-item-has-children:hover > a.ct-menu-link .ct-toggle-dropdown-desktop::before,
  [data-id="menu"] > ul.menu > li.menu-item-has-children:focus-within > a.ct-menu-link .ct-toggle-dropdown-desktop::before {
    transform: translateY(-1.5px) rotate(225deg);
  }
}

/* ============================================================
   OVER-HERO STATE
   While the header is transparent the menu and icons sit on the
   hero, so they need their own colours. Both are editable in
   Customizer > Parallus Menu.
   ============================================================ */

/* Icons inherit currentColor from here. */
.p-icons__btn { color: var(--p-icon-color); }

[data-transparent-row="yes"] .p-icons > .p-icons__item > .p-icons__btn {
  color: var(--p-icon-over-hero) !important;
}

/* Panel contents keep their own colours regardless of header state. */
.p-panel,
.p-panel a,
.p-panel .p-panel__links a { color: var(--p-panel-text); }
.p-panel .p-panel__links a:hover { color: var(--p-panel-text-hover); }

/* The hamburger and any other Blocksy header glyphs too. */
[data-transparent-row="yes"] .ct-toggle-close,
[data-transparent-row="yes"] [data-id="trigger"] .ct-icon {
  color: var(--p-icon-over-hero) !important;
  fill: var(--p-icon-over-hero) !important;
}

@media (max-width: 999px) {
  [data-transparent-row="yes"] [data-id="trigger"] .ct-icon,
  [data-transparent-row="yes"] .p-icons > .p-icons__item > .p-icons__btn {
    color: var(--p-mobile-over-hero) !important;
    fill: var(--p-mobile-over-hero) !important;
  }
}

/* Disabled controls, e.g. the region selector with no regions. */
.p-field select:disabled,
.p-field.is-disabled select {
  color: var(--p-menu-disabled-color);
  background: var(--p-menu-disabled-bg);
  border-color: var(--p-border);
  cursor: not-allowed;
  opacity: 1;
}

.p-field.is-disabled .p-field__label { color: var(--p-menu-disabled-color); }

/* ============================================================
   MOBILE MENU
   Colour and size come from Header > Mobile Menu. Only the group
   heading, which Blocksy has no concept of, is styled here.
   ============================================================ */

@media (max-width: 999px) {
  [data-id="mobile-menu"] li.parallus-group-heading > .ct-sub-menu-parent > a.ct-menu-link,
  [data-id="mobile-menu"] li.parallus-group-heading > a.ct-menu-link {
    font-family: var(--p-font-nav);
    font-size: var(--p-t-title-size);
    font-weight: var(--p-t-title-weight);
    text-transform: var(--p-t-title-transform);
    letter-spacing: var(--p-t-title-tracking);
    color: var(--p-menu-title-color);
    pointer-events: none;
  }

  [data-id="mobile-menu"] ul.sub-menu { padding-left: 16px; }

  [data-id="mobile-menu"] li.parallus-group-heading:not(:has(ul.sub-menu)) .ct-toggle-dropdown-mobile {
    display: none;
  }
}

/* ============================================================
   ICON CLUSTER
   ============================================================ */

.p-icons { display: flex; align-items: center; gap: var(--p-icon-gap, 22px); }
.p-icons__item { position: relative; }

.p-icons__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: calc(var(--p-icon-size, 21px) + 13px);
  height: calc(var(--p-icon-size, 21px) + 13px);
  padding: 0;
  border: 0;
  border-radius: var(--p-radius);
  background: transparent;
  color: currentColor;
  cursor: pointer;
  transition: opacity var(--p-dur-fast) var(--p-ease);
}

.p-icons__btn:hover { opacity: 0.6; }
.p-icons__btn svg { width: var(--p-icon-size, 21px); height: var(--p-icon-size, 21px); }

.p-icons__count {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--p-accent);
  color: #FFFFFF;
  font-family: var(--p-font-body);
  font-size: 0.625rem;
  line-height: 15px;
  text-align: center;
}

/* ============================================================
   PANELS
   ============================================================ */

.p-panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 200;
  background: var(--p-panel-bg);
  color: var(--p-ink);
  border-radius: var(--p-radius-panel);
  box-shadow: 0 16px 40px rgba(17, 17, 17, 0.12);
  padding: var(--p-space-md);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--p-dur-fast) var(--p-ease),
              transform var(--p-dur-fast) var(--p-ease);
}

.p-panel[hidden] { display: none; }
.p-panel.is-open { opacity: 1; transform: none; }
.p-panel--narrow { width: 290px; }
.p-panel--bag { width: min(400px, calc(100vw - 32px)); }
.p-panel--left { right: auto; left: 0; }

.p-panel__title,
.p-bag__savedhead span {
  font-family: var(--p-font-nav);
  font-weight: var(--p-t-title-weight);
  font-size: var(--p-t-title-size);
  text-transform: var(--p-t-title-transform);
  letter-spacing: var(--p-t-title-tracking);
  color: var(--p-menu-title-color);
  margin: 0 0 var(--p-space-md);
}

.p-panel__links { list-style: none; margin: 0; padding: 0; }

.p-panel--menu { width: 232px; padding: 14px 10px; }

.p-panel__links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--p-radius-sm);
  font-family: var(--p-font-body);
  font-size: var(--p-t-link-size);
  font-weight: var(--p-t-link-weight);
  letter-spacing: var(--p-t-link-tracking);
  color: var(--p-panel-text);
  text-decoration: none;
  transition: background var(--p-dur-fast) var(--p-ease),
              color var(--p-dur-fast) var(--p-ease);
}

.p-panel__links a:hover {
  background: var(--p-panel-hover-bg);
  color: var(--p-panel-text-hover);
}
.p-panel__links svg { width: 17px; height: 17px; flex: 0 0 17px; }

/* ---- Locale form ---- */

.p-field { display: block; margin-bottom: var(--p-space-sm); }

.p-field__label {
  display: block;
  font-family: var(--p-font-body);
  font-size: 0.75rem;
  color: var(--p-panel-text);
  margin-bottom: 6px;
}

.p-field select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-sm);
  background: var(--p-bg);
  font-family: var(--p-font-body);
  font-size: 0.875rem;
  color: var(--p-ink);
}

.p-field__note {
  font-family: var(--p-font-body);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--p-panel-text);
  margin: 0 0 var(--p-space-sm);
}

.p-locale__actions { display: flex; gap: var(--p-space-xs); margin-top: var(--p-space-md); }
.p-locale__actions .p-btn { flex: 1; text-align: center; padding: 11px 16px; font-size: 0.6875rem; }
.p-btn--ghost { border-color: var(--p-border); color: var(--p-panel-text); }
.p-btn--block { display: block; text-align: center; width: 100%; }

/* ---- Bag ---- */

.p-bag__empty { font-family: var(--p-font-body); font-size: 0.875rem; color: var(--p-panel-text); margin: 0; }

.p-bag__items {
  list-style: none;
  margin: 0 0 var(--p-space-md);
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.p-bag__item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--p-space-sm);
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--p-border);
}

.p-bag__thumb img { width: 56px; height: 70px; object-fit: cover; display: block; }
.p-bag__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.p-bag__name { font-family: var(--p-font-heading); font-size: 0.875rem; color: var(--p-ink); text-decoration: none; }
.p-bag__qty, .p-bag__price { font-family: var(--p-font-body); font-size: 0.8125rem; color: var(--p-panel-text); }

.p-bag__remove { color: var(--p-muted); text-decoration: none; font-size: 1.1rem; line-height: 1; }
.p-bag__remove:hover { color: var(--p-accent); }

.p-bag__savedhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--p-space-xs);
}

.p-bag__savedhead span {
  font-family: var(--p-font-nav);
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--p-panel-text);
}

.p-bag__savedhead a { font-family: var(--p-font-body); font-size: 0.75rem; color: var(--p-ink); text-decoration: underline; }

.p-bag__saved {
  list-style: none;
  display: flex;
  gap: var(--p-space-xs);
  margin: 0 0 var(--p-space-md);
  padding: 0 0 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.p-bag__savedItem { flex: 0 0 76px; }
.p-bag__savedItem a { text-decoration: none; }
.p-bag__savedItem img { width: 76px; height: 95px; object-fit: cover; display: block; }

.p-bag__savedItem span {
  display: -webkit-box;
  margin-top: 5px;
  font-family: var(--p-font-body);
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--p-panel-text);
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.p-bag__foot { border-top: 1px solid var(--p-ink); padding-top: var(--p-space-sm); }

.p-bag__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--p-space-sm);
  font-family: var(--p-font-body);
  font-size: 0.9375rem;
  color: var(--p-ink);
}

/* ============================================================
   STICKY + TRANSPARENT HEADER
   Fixed on every breakpoint. Opacity tracks scroll progress via
   --p-header-solid, set by header.js from the Customizer values.
   ============================================================ */

#header.ct-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background-color: rgb(from var(--p-bg) r g b / var(--p-header-solid, 0));
  box-shadow: 0 1px 0 rgba(17, 17, 17, calc(0.07 * var(--p-header-solid, 0)));
}

/* ============================================================
   HERO SCRIM
   A gradient sitting behind the header so a light hero frame
   cannot swallow the menu. It covers the header itself and
   reaches a configurable distance below it, then fades out in
   step with the header turning solid, so it never doubles up
   with the solid background.
   Customizer > Parallus Header.
   ============================================================ */

#header.ct-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100% + var(--p-scrim-height, 90px));
  pointer-events: none;
  background: linear-gradient(to bottom, var(--p-scrim-color, #111111), transparent);
  opacity: calc(var(--p-scrim-strength, 0.35) * (1 - var(--p-header-solid, 0)));
}

/* Header content sits above the scrim. Relative only: a transform
   here would capture the fixed-position panels. */
#header.ct-header > [data-device] { position: relative; z-index: 1; }

/* Fallback for browsers without relative colour syntax. */
@supports not (background-color: rgb(from #fff r g b / 50%)) {
  #header.ct-header {
    background-color: transparent;
    transition: background-color var(--p-dur) var(--p-ease);
  }
  #header.ct-header.is-solid { background-color: var(--p-bg); }
}

#header.ct-header.is-solid [data-row] { background-color: transparent !important; }

.p-has-fixed-header body:not(.page-template-template-landing) #main-container {
  padding-top: var(--p-header-h, 76px);
}

.admin-bar #header.ct-header { top: 32px; }

@media (max-width: 782px) {
  .admin-bar #header.ct-header { top: 46px; }
}

/* ============================================================
   DEVICE WRAPPERS
   Blocksy stamps ct-hidden-sm / ct-hidden-md onto both wrappers'
   rows, which hid the mobile header and doubled the desktop one.
   The wrapper decides; those classes are neutralised inside it.
   ============================================================ */

@media (min-width: 1000px) {
  #header.ct-header > [data-device="mobile"] { display: none !important; }
}

@media (max-width: 999px) {
  #header.ct-header > [data-device="desktop"] { display: none !important; }

  #header.ct-header > [data-device="mobile"] > [data-row],
  #header.ct-header > [data-device="mobile"] > [data-row].ct-hidden-sm,
  #header.ct-header > [data-device="mobile"] > [data-row].ct-hidden-md {
    display: grid !important;
  }
}

/* ============================================================
   HEADER ROW FITTING
   Columns size to content so the menu never gets squeezed into
   Blocksy's overflow dropdown.
   ============================================================ */

@media (min-width: 1000px) {
  #header.ct-header [data-row="bottom"] [data-column-set="3"],
  #header.ct-header [data-row="bottom"] > .ct-container {
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr) !important;
  }

  #header.ct-header [data-column="start"] { justify-content: flex-start; min-width: 0; }
  #header.ct-header [data-column="end"] { justify-content: flex-end; min-width: 0; }

  [data-id="menu"] > ul.menu { flex-wrap: nowrap !important; }
  [data-id="menu"] > ul.menu > li > a.ct-menu-link { white-space: nowrap; }
}

/* ============================================================
   PANEL SIZING BY BREAKPOINT
   Tablet: compact boxes, all three treated the same.
   Mobile: full-bleed sheets under the header, globe included.
   ============================================================ */

@media (min-width: 600px) and (max-width: 999px) {
  .p-panel {
    position: absolute;
    top: calc(100% + 12px);
    left: auto;
    right: 0;
    width: 300px;
  }

  .p-panel--bag  { width: 360px; }
  .p-panel--menu { width: 240px; }

  .p-icons__item--globe .p-panel { left: 0; right: auto; width: 300px; }
}

@media (max-width: 599px) {
  .p-panel,
  .p-panel--narrow,
  .p-panel--menu,
  .p-panel--bag,
  .p-panel--left,
  .p-icons__item--globe .p-panel {
    position: fixed;
    top: calc(var(--p-header-h, 60px) + 8px);
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    max-height: calc(100svh - var(--p-header-h, 60px) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .p-field select { padding: 12px 10px; font-size: 1rem; }
}

@media (max-width: 999px) {
  .p-icons { gap: var(--p-icon-gap-mobile, 12px); }
  .p-icons__btn {
    width: calc(var(--p-icon-size-mobile, 19px) + 13px);
    height: calc(var(--p-icon-size-mobile, 19px) + 13px);
  }
  .p-icons__btn svg {
    width: var(--p-icon-size-mobile, 19px);
    height: var(--p-icon-size-mobile, 19px);
  }

  /* Globe pinned to the left of the row. No transform here: a
     transformed ancestor would become the containing block for the
     fixed-position panel inside it and clamp it to the icon. */
  #header [data-row] > .ct-container,
  #header [data-row] > div { position: relative; }

  .p-icons__item--globe {
    position: absolute;
    left: 46px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    margin: 0;
  }
}

/* ============================================================
   LOGO FADE
   The desktop asset is white. Inverting it proportionally to
   --p-header-solid takes it white -> grey -> black in step with
   the header background rather than snapping at a threshold.
   Mobile already uses the dark asset, so it is left alone.
   ============================================================ */

@media (min-width: 1000px) {
  #header.ct-header [data-device="desktop"] .site-logo-container img {
    filter: invert(var(--p-header-solid, 0));
  }

  /* Pages without a transparent header start solid, so the logo is
     dark immediately even before JS runs. */
  body:not(.home) #header.ct-header [data-device="desktop"] .site-logo-container img {
    filter: invert(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-panel,
  #header.ct-header,
  [data-id="menu"] > ul.menu > li > a.ct-menu-link .ct-toggle-dropdown-desktop {
    transition: none;
  }
}

/* Offcanvas is its own surface, not part of the transparent header. */

/* ============================================================
   DROPDOWN ALIGNMENT
   The panel lines up with the left edge of the first menu item
   rather than with whichever item opened it. The nav becomes the
   positioning context so the panel can never start further left
   than the menu itself.
   ============================================================ */

@media (min-width: 1000px) {
  [data-id="menu"] { position: relative; }

  [data-id="menu"] > ul.menu > li.menu-item-has-children { position: static !important; }

  [data-id="menu"] > ul.menu > li.menu-item-has-children > ul.sub-menu {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    margin-inline: 0 !important;
  }
}

/* ============================================================
   MENU SCALING
   Between the desktop breakpoint and a comfortable width the menu
   steps down in size and spacing, so the left column never runs
   into the centred logo. Values stay proportional to the
   Customizer settings rather than replacing them.
   ============================================================ */

@media (min-width: 1000px) and (max-width: 1179px) {
  [data-id="menu"] > ul.menu { gap: calc(var(--p-menu-item-gap, 28px) * 0.45); }
  [data-id="menu"] > ul.menu > li > a.ct-menu-link {
    font-size: calc(var(--p-menu-base-size, 13px) * 0.82) !important;
    letter-spacing: calc(var(--p-menu-base-tracking, 0.05em) * 0.6) !important;
  }
  .p-icons { gap: calc(var(--p-icon-gap, 22px) * 0.55); }
  .p-icons__btn {
    width: calc(var(--p-icon-size, 21px) * 0.86 + 13px);
    height: calc(var(--p-icon-size, 21px) * 0.86 + 13px);
  }
  .p-icons__btn svg {
    width: calc(var(--p-icon-size, 21px) * 0.86);
    height: calc(var(--p-icon-size, 21px) * 0.86);
  }
  #header.ct-header [data-device="desktop"] .site-logo-container img { max-height: calc(var(--p-logo-max-h, 35px) * 0.86); width: auto; }
}

@media (min-width: 1180px) and (max-width: 1379px) {
  [data-id="menu"] > ul.menu { gap: calc(var(--p-menu-item-gap, 28px) * 0.68); }
  [data-id="menu"] > ul.menu > li > a.ct-menu-link {
    font-size: calc(var(--p-menu-base-size, 13px) * 0.92) !important;
    letter-spacing: calc(var(--p-menu-base-tracking, 0.05em) * 0.8) !important;
  }
  .p-icons { gap: calc(var(--p-icon-gap, 22px) * 0.82); }
  .p-icons__btn {
    width: calc(var(--p-icon-size, 21px) * 0.9 + 13px);
    height: calc(var(--p-icon-size, 21px) * 0.9 + 13px);
  }
  .p-icons__btn svg {
    width: calc(var(--p-icon-size, 21px) * 0.9);
    height: calc(var(--p-icon-size, 21px) * 0.9);
  }
  #header.ct-header [data-device="desktop"] .site-logo-container img { max-height: var(--p-logo-max-h, 35px); width: auto; }
}

/* Invisible bridge so the pointer can travel from icon to panel. */
@media (hover: hover) and (min-width: 1000px) {
  .p-icons__item > .p-panel::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
  }
}

/* ============================================================
   DISABLED MENU ITEMS
   Items marked parallus-disabled are placeholders for content that
   does not exist yet. They read as unavailable rather than broken:
   greyed, not clickable, and skipped by keyboard navigation.
   Colour comes from Parallus Menu > Disabled text.
   ============================================================ */

.parallus-disabled > a.ct-menu-link,
.parallus-disabled > .ct-sub-menu-parent > a.ct-menu-link {
  color: var(--p-menu-disabled-color) !important;
  pointer-events: none;
  cursor: default;
}

/* Empty category headings read the same way. */
[data-id="menu"] .sub-menu > li.parallus-group-heading:not(:has(ul.sub-menu)) > a.ct-menu-link,
[data-id="mobile-menu"] li.parallus-group-heading:not(:has(ul.sub-menu)) > a.ct-menu-link {
  color: var(--p-menu-disabled-color);
  opacity: 1;
}