/* The dock: the site navigation since 8 Nov 2026, replacing the old navbar
   and burger overlay (approved on the /v2 preview, dropdown variant).
   Markup: includes/dock.php. Desktop: a centred glass capsule of category
   links (hover one for its dropdown of real products) plus a utility bubble
   (account, basket) 10px to its right. Phones: no capsule; the bubble holds
   top-right with a burger that opens a full-screen menu, and a round home
   key sits top-left. */

.vb-count {
  position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px;
  border-radius: 50%; background: #5164F6; color: #fff; text-align: center;
  font: 600 10px/16px 'Open Sans', sans-serif; /* 16px, not 17: a whole-pixel baseline puts the digit mid-circle on every screen */
  letter-spacing: 0; /* .dk1-item's wide tracking pushes the digits left of centre */
}
.vb-count .cedilla-cart-count { font-size: inherit; } /* site.css shrinks it to .7em */

/* ============ The capsule ============ */
.dk1 {
  display: flex; align-items: center; gap: 2px;
  padding: 6px 8px; border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(7, 7, 11, .88), rgba(7, 7, 11, .88)) padding-box,
    linear-gradient(110deg, rgba(252, 95, 173, .55), rgba(81, 100, 246, .55) 45%, rgba(33, 212, 253, .45)) border-box;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .07);
  font-family: 'Open Sans', sans-serif;
}
.dk1-home { display: inline-flex; align-items: center; padding: 5px 8px 5px 7px; text-decoration: none; }
.dk1-home img { width: 26px; height: 26px; display: block; }
.dk1-sep { width: 1px; height: 20px; background: rgba(255, 255, 255, .15); margin: 0 7px; flex: none; }
.dk1-item {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 8px 12px; border-radius: 999px; border: 0; background: none; cursor: pointer;
  color: rgba(255, 255, 255, .92); text-decoration: none;
  font: 500 10px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  transition: background .25s, color .25s;
}
.dk1-item svg { width: 17px; height: 17px; display: block; }
.dk1-item:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.dk1-item[aria-current="page"] { background: rgba(255, 255, 255, .07); color: #fff; }
.dk1-basket { position: relative; padding: 8px 10px; }
.dk1-basket img { width: 19px; height: 19px; display: block; }
.dk1-account { padding: 8px 10px; }
.dk1-account svg { width: 21px; height: 21px; }

/* The site's NEW pill (as on the overlay/navbar), sized for the dock */
.dk-new {
  display: inline-block; flex: none;
  padding: 3px 7px 4px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: radial-gradient(130% 160% at 100% 100%, rgba(81, 100, 246, .55) 0%, rgba(81, 100, 246, .12) 45%, #000 75%);
  box-shadow: 4px 4px 14px -4px rgba(81, 100, 246, .65);
  color: #fff; font: 600 8px/1 'Open Sans', sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  position: relative; top: -4px; margin-left: -4px;
}
/* Gradient dot on the blog pick pill (as the old navbar pill's) */
.dk-dot {
  display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, #FC5FAD, #5164F6, #21D4FD);
}

/* Both pills sit in one centred group, 10px apart */
.dks-wrap {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 999;
  display: flex; align-items: center; gap: 10px;
}
.dks-homefab { display: none; }

/* ============ Dropdowns: hover a category, see the goods ============ */
.ddc { position: relative; display: inline-flex; }
.dd {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 296px; padding: 9px; border-radius: 20px;
  border: 1px solid transparent;
  background:
    linear-gradient(#0a0a0f, #0a0a0f) padding-box,
    linear-gradient(110deg, rgba(252, 95, 173, .4), rgba(81, 100, 246, .4) 45%, rgba(33, 212, 253, .35)) border-box;
  box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .95);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s, transform .18s, visibility .18s;
}
/* invisible bridge so the pointer can travel from the item to the panel */
.dd::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.ddc:hover .dd, .ddc:focus-within .dd {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.ddc:hover > .dk1-item { background: rgba(255, 255, 255, .09); color: #fff; }
.dd-row {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 9px; border-radius: 13px; text-decoration: none;
  transition: background .18s;
}
.dd-row:hover { background: rgba(255, 255, 255, .08); }
.dd-row img { width: 48px; height: 36px; object-fit: cover; border-radius: 9px; display: block; flex: none; }
.dd-row .n { display: flex; flex-direction: column; gap: 3px; color: #fff; font: 600 12.5px/1.2 'Open Sans', sans-serif; min-width: 0; }
.dd-row .t { color: rgba(255, 255, 255, .55); font: 400 11px/1.2 'Open Sans', sans-serif; }
.dd-row .p {
  margin-left: auto; flex: none; color: rgba(255, 255, 255, .9);
  font: 500 10.5px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .06em;
}
.dd-all {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  /* panel has 9px padding below this, so 12px above the text = 3px + 9px below */
  margin: 6px 3px 0; padding: 12px 0 3px;
  border-top: 1px solid rgba(255, 255, 255, .1); text-decoration: none;
  color: rgba(255, 255, 255, .75);
  font: 500 9.5px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: .14em; text-transform: uppercase;
}
.dd-all:hover { color: #fff; }

.dkb, .dkm { display: none; }

@media (max-width: 860px) {
  /* the group dissolves on phones: no capsule, bubble top-right, burger inside it */
  .dks-wrap { display: contents; }
  .dks-main { display: none; }
  .dks-wrap .dk1 { position: fixed; z-index: 999; }
  .dk1-item { border-radius: 14px; }
  .dk1-item svg { width: 20px; height: 20px; }
  .dks-side {
    top: 10px; right: 10px; bottom: auto; left: auto;
    justify-content: flex-start; border-radius: 999px; padding: 5px 6px;
  }
  .dks-side .dk1-account, .dks-side .dk1-basket { padding: 7px 9px; }
  .dks-side .vb-count { top: -3px; right: -3px; } /* same spot on the basket as desktop; the padding is smaller here */

  /* Burger: two lines that fold into a cross. Drawn like the account icon (same
     20px box, 24-unit viewBox, 1.5 stroke) so the weight always matches it.
     Timing and easing are the old navbar burger's (.menu-icon in styles.css). */
  .dkb {
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; width: 40px; height: 34px; padding: 0;
    color: #fff; /* pure white, like the account and basket icons */
    -webkit-tap-highlight-color: transparent;
  }
  .dkb:hover { background: none; }
  .dkb:focus-visible { outline: 1px solid #5164F6; outline-offset: 1px; }
  .dkb::before { content: ''; position: absolute; top: -6px; bottom: -6px; left: 0; right: -6px; } /* full-height tap area */
  /* px here are the icon's 24-unit grid, so 5.1 draws as 4.25 screen px */
  .dkb-bars line { transform-origin: 12px 12px; transition: transform .2s cubic-bezier(.1, .82, .76, .965); }
  .dkb-bars line:first-child { transform: translateY(-5.1px) rotate(0deg); }
  .dkb-bars line:last-child { transform: translateY(5.1px) rotate(0deg); }
  .dkb[aria-expanded="true"] line:first-child { transform: translateY(0) rotate(45deg); }
  .dkb[aria-expanded="true"] line:last-child { transform: translateY(0) rotate(-45deg); }

  /* The menu: under the home key and bubble (999) so the cross stays usable */
  .dkm {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 998; box-sizing: border-box;
    padding: 84px 28px calc(28px + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    background:
      radial-gradient(90% 42% at 100% 100%, rgba(81, 100, 246, .24), transparent 72%),
      radial-gradient(70% 30% at 0% 100%, rgba(252, 95, 173, .13), transparent 72%),
      #06060a;
    color: #fff; font-family: 'Open Sans', sans-serif; line-height: 1.2; text-align: left;
    visibility: hidden; opacity: 0;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .dkm.is-open { visibility: visible; opacity: 1; transition: opacity .3s ease; }
  .dkm-nav { display: flex; flex-direction: column; margin: auto 0; --knob: #06060a; }
  .dkm.is-open .dkm-nav { animation: dkm-rise .5s cubic-bezier(.2, .7, .2, 1) both; }
  .dkm-eyebrow {
    margin: 0 0 8px; color: rgba(255, 255, 255, .55);
    font: 500 11px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    letter-spacing: .16em; text-transform: uppercase;
  }
  .dkm .dkm-link {
    display: flex; align-items: center; gap: 16px;
    min-height: 54px;
    min-height: clamp(46px, 7.2svh, 62px);
    color: #fff; text-decoration: none;
    font: 300 clamp(25px, 7.4vw, 32px)/1.1 'Open Sans', sans-serif;
    -webkit-tap-highlight-color: transparent;
  }
  .dkm-link svg { width: 24px; height: 24px; display: block; flex: none; color: rgba(255, 255, 255, .7); }
  .dkm-link .dk-new { font-size: 9.5px; padding: 4px 8px 5px; top: -8px; margin-left: -8px; }
  .dkm .dkm-link--small { min-height: 42px; font-size: clamp(17px, 4.8vw, 20px); font-weight: 400; color: rgba(255, 255, 255, .78); }
  .dkm .dkm-link[aria-current="page"] { color: #99bafd; }
  .dkm-rule { display: block; height: 1px; margin: 10px 0; background: rgba(255, 255, 255, .12); flex: none; }

  .dks-homefab {
    display: inline-flex; position: fixed; top: 10px; left: 12px; z-index: 999;
    padding: 8px; border-radius: 50%;
    background: rgba(7, 7, 11, .82); border: 1px solid rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .dks-homefab img { width: 24px; height: 24px; display: block; }
}
@keyframes dkm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .dkb-bars line, .dkm, .dkm.is-open .dkm-nav { transition: none; animation: none; }
}