/* Tejori — header */

.hdr-wrap {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid rgba(18, 18, 18, .08);
}

.hdr {
  display: flex;
  align-items: center;
  column-gap: 20px;
  padding: .911vw 5.208vw;
}

/* ---------- logo ---------- */

.hdr__logo {
  display: block;
  padding: .391vw;
  margin-left: -.391vw;
  line-height: 0;
}

.hdr__logo img {
  width: 5vw;
  transition: width .5s ease;
}

/* ---------- nav ---------- */

.nav {
  margin-left: .781vw;
}

.nav > ul {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
}

.nav__a {
  display: flex;
  align-items: center;
  padding: .521vw 1.146vw .521vw .863vw;
  font-size: 1.042vw;
  font-weight: 700;
  line-height: 1;
  color: var(--c-txt);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.nav__a > span {
  position: relative;
  padding-right: .417vw;
}

.nav__a:hover > span::after,
.nav__a.is-on > span::after {
  content: "";
  position: absolute;
  top: calc(100% + 15%);
  left: 0;
  width: 100%;
  height: .313vw;
  background: url('../img/line3.svg') no-repeat;
  background-size: cover;
}

.nav__c {
  position: absolute;
  right: 0;
  top: calc(50% - .26vw);
  width: .938vw;
  height: .469vw;
}

/* ---------- submenu ---------- */

.nav__has {
  padding-right: 1.458vw;
}

.nav__has:last-child {
  padding-right: 0;
}

.nav__has details {
  position: relative;
}

.nav__has summary {
  position: relative;
  list-style: none;
}

.nav__has summary::-webkit-details-marker {
  display: none;
}

.sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 100%;
  padding: 0 1.042vw;
  background: #fff;
  z-index: 5;
}

.sub a {
  display: flex;
  justify-content: center;
  padding: .26vw .521vw;
  font-size: 1.042vw;
  font-weight: 700;
  line-height: 1;
  color: var(--c-txt);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.sub a:hover {
  color: var(--c-green);
}

/* ---------- actions ---------- */

.acts {
  display: flex;
  gap: 1.927vw;
  margin-left: auto;
}

.ico {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.563vw;
  height: 2.292vw;
  color: var(--c-txt);
}

/* the heart's height never scaled, and its width stops growing at 24 */
.ico--wish svg {
  width: 1.563vw;
  max-width: 24px;
  height: 25px;
}

.ico--search svg,
.ico--acct svg {
  width: 1.563vw;
  height: 1.563vw;
}

.ico--cart svg {
  width: 1.354vw;
  height: 1.563vw;
}

.ico__n {
  position: absolute;
  top: -2px;
  right: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 12px;
  line-height: 12px;
  color: #fff;
  background: var(--c-ink);
  border-radius: 999px;
}

.hdr__sell {
  flex: none;
  width: 10.417vw;
}

.burger {
  display: none;
}

/* ---------- sticky shrink ---------- */

.hdr-wrap.is-stuck .hdr {
  min-height: 6.667vw;
}

.hdr-wrap.is-stuck .hdr__logo img {
  width: 3.391vw;
}

/* ---------- search overlay ---------- */

.srch {
  position: absolute;
  inset: 100% 0 auto;
}

.srch__bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
}

.srch__box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.042vw;
  padding: 1.042vw 5.208vw;
  background: #fff;
  border-bottom: 1px solid var(--c-line);
}

.srch__in {
  flex: 1;
  font-family: inherit;
  font-size: 1.146vw;
  padding: .781vw 1.042vw;
  color: var(--c-txt);
  border: 1px solid rgba(18, 18, 18, .3);
  background: none;
}

.srch__in:focus {
  outline: none;
  border-color: var(--c-green);
}

.srch__go svg {
  width: 1.563vw;
  height: 1.563vw;
}

.srch__x svg {
  width: 1.25vw;
  height: 1.25vw;
}

/* ---------- mobile drawer ---------- */
/* the whole drawer hangs below the header, which stays in view and closes it */

.drw {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  width: 100%;
  height: calc(100vh - 100%);
  background: rgba(0, 0, 0, .12);
}

.drw__bg {
  position: absolute;
  inset: 0;
}

/* a flat 252px panel with a 47px gutter on the right — the original's own
   figures, which never scaled with the viewport. The three rows are centred
   as a group, so on a short screen they hang past the padding evenly */
.drw__panel {
  position: relative;
  display: grid;
  /* the column is the panel's own width, never the widest row's — on a wide
     phone the button's text would otherwise push the whole menu out */
  grid-template-columns: minmax(0, 1fr);
  align-content: flex-start;
  width: 252px;
  height: 100%;
  margin-left: auto;
  padding: 30px 30px 20px 0;
  background: #fff;
  overflow-y: auto;
}

/* the logo sits against the same right edge as the menu */
.drw__top {
  text-align: right;
}

.drw__top a {
  display: block;
}

/* inline, so the block keeps the text line's full height — same as the original */
.drw__logo {
  display: inline;
  width: 121px;
  height: 109px;
}

.drw__nav {
  padding: 20px 0;
}

.drw__nav li {
  margin-bottom: 0;
}

.drw__a {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 17px 0 17px 20px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-txt);
  text-transform: uppercase;
  text-decoration: none;
  background: #fff;
  cursor: pointer;
}

.drw__a .nav__c {
  position: static;
  flex: none;
  width: 15px;
  height: 6px;
}

.drw__nav details[open] .nav__c {
  transform: rotate(180deg);
}

/* a sub-item reads exactly like the rest of the list */
.drw__nav .sub {
  position: static;
  transform: none;
  padding: 0;
}

.drw__nav .sub a {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: center;
  padding: 20px 0 20px 20px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

/* the margin is what keeps the button inside the panel's own column; its text
   line and icon are a little tighter than the shared button's, and this one is
   flat — no shadow and no hover wipe */
.drw__sell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 10px 0 10px 20px;
  line-height: 1.3;
  /* the label breaks mid-word rather than push the panel open */
  word-break: break-word;
  overflow: visible;
  box-shadow: none;
}

.drw__sell::before {
  content: none;
}

.drw__sell .btn__in svg {
  width: 8.759vw;
  height: 6.58vw;
}

/* from here up the header's own button takes over, so the menu drops this one */
@media (min-width: 750px) {
  .drw__sell {
    display: none;
  }
}

@media (min-width: 990px) {
  .drw {
    display: none;
  }
}

/* ---------- tablet / mobile header ---------- */

@media (max-width: 989px) {
  .hdr {
    padding: 1.818vw 4.545vw;
  }

  .hdr__logo img,
  .hdr-wrap.is-stuck .hdr__logo img {
    width: 10.227vw;
  }

  .nav,
  .hdr__sell {
    display: none;
  }

  .acts {
    align-items: center;
    gap: 6.364vw;
  }

  .ico {
    width: 5.455vw;
    height: 5vw;
  }

  /* the account icon is drawn a touch wider than the rest, so its box is too */
  .ico--acct {
    width: 5.682vw;
  }

  .ico--wish svg {
    width: 5.455vw;
    max-width: 24px;
    height: 25px;
  }

  .ico--search svg {
    width: 5.133vw;
    height: 5.114vw;
  }

  .ico--cart svg {
    width: 4.458vw;
    height: 5.114vw;
  }

  .ico--acct svg {
    width: 5.682vw;
    height: 5.682vw;
  }

  .burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.682vw;
    height: 5.682vw;
  }

  .burger svg {
    width: 5.682vw;
    height: 4.545vw;
  }

  .srch__box {
    padding: 4.545vw;
    gap: 3.409vw;
  }

  .srch__in {
    font-size: 4vw;
    padding: 2.273vw 3.409vw;
  }

  .srch__go svg,
  .srch__x svg {
    width: 5.114vw;
    height: 5.114vw;
  }
}

/* between the phone sizes and the desktop header the menu button stands a few
   pixels clear of the icons beside it */
@media (min-width: 768px) and (max-width: 989px) {
  .burger {
    margin-left: 5px;
  }
}